COAP:COAP-2100/week3: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
(9 intermediate revisions by the same user not shown)
Line 12: Line 12:
* Introduction to CSS
* Introduction to CSS
* CSS validation
* CSS validation
; Webdesign
* Basic Webdesign principles


==== Software ====
==== Software ====


We suggest using the following HTML Editors
We suggest using the following HTML Editors
* [http://www.fookes.com/notetab/ NoteTab light]. A simple programming editor with little HTML support.
* [http://www.fookes.com/notetab/ NoteTab light]. A simple programming editor with little HTML support. (Windows(
* [http://kompozer.net/download.php Kompozer] for HTML4 (grab the latest development version !)
* [http://kompozer.net/download.php Kompozer] for HTML4 (grab the latest development version !)
* [http://bluegriffon.org/ BlueGriffon] Wysiwyg editor for HTML5.
* [http://bluegriffon.org/ BlueGriffon] Wysiwyg editor for HTML5. (Win/Mac/Linux)
* [http://www.barebones.com/products/textwrangler/index.html TextWrangler] (Mac)


Browser extensions (if installable):
Browser extensions (if installable):
Line 31: Line 35:
* Extract the single tidy.exe to some directory, e.g. c:\bin\
* Extract the single tidy.exe to some directory, e.g. c:\bin\


==== Teaching materials ====
==== HTML/CSS Teaching materials ====


* [[HTML5]] (Short overview)
* [http://diveintohtml5.org/ Dive Into HTML5] (free online book about HTML5, not for absolute beginners)
* [http://diveintohtml5.org/ Dive Into HTML5] (free online book about HTML5, not for absolute beginners)
* [[HTML and XHTML elements and attributes‎‎]] (lecture notes)
* [[HTML and XHTML elements and attributes‎‎]] (lecture notes)
Line 47: Line 52:
===== Monday =====
===== Monday =====


(1) Some major HTML tags
(1) Introduction to some major HTML5 tags
Online documentation about HTML:
Online documentation about HTML:
* We will use [[HTML and XHTML elements and attributes‎‎]] (lecture notes)  
* We will use [[HTML and XHTML elements and attributes‎‎]] (lecture notes)  
* We also will demonstrate the Codeburner Firefox extensions and the related [http://reference.sitepoint.com/html Sitepoint] web site.
* We also will demonstrate the Codeburner Firefox extensions and the related [http://reference.sitepoint.com/html Sitepoint] web site.
* See [http://edutechwiki.unige.ch/en/HTML_links#Manuals_.26_Short_References HTML links] (Manuals and short references) for other HTML documentation if you wish...
* See [http://edutechwiki.unige.ch/en/HTML_links#Manuals_.26_Short_References HTML links] (Manuals and short references) for other HTML documentation or search the web .....


(2) A introduction to [http://www.w3.org/QA/Tools/ W3C Quality Assurance Tool set]. It includes several tools
(2) A introduction to [http://www.w3.org/QA/Tools/ W3C Quality Assurance Tool set]. It includes several tools
Line 64: Line 69:


(3) Using web browser development tools
(3) Using web browser development tools
* Use of [https://addons.mozilla.org/en-US/firefox/addon/249 HTML Validator] Once installed you can ''View-Source'' (CTRL-U) and look at the errors.
* Use of [https://addons.mozilla.org/en-US/firefox/addon/249 HTML Validator]. Once installed, you can ''View-Source'' (CTRL-U) and look at the errors.


(4) Using Tidy inside NoteTab light
(4) Using Tidy inside NoteTab light
* This may not work (since Tidy must be installed on your computer)
* This may not work (since Tidy must be installed on your computer)


(5) Homework 1 feedback and Q/A Homework 2 (if needed)
(5) Q/A Homework 2 (if needed)
* Overal: ok work ... some could have invested some more work, e.g. use all features (or at least remove unused pages).
* Pay attention to copyright (i.e. lock the web site or kill it if you reuse copyrighted materials)
* Pay attention to copyright (i.e. lock the web site or kill it if you reuse copyrighted materials)


Line 85: Line 89:
===== Wednesday =====
===== Wednesday =====


We will start learning [[CSS]], in particular
(1) Feedback for homework 1
* Good work
* Please hide problematic sites, e.g. those that advertise services that do not exist.
 
'''(2) CSS'''
 
We recall some [[CSS]] principles, in particular:


* Associating a styles and stylesheets with HTML
* Associating a styles and stylesheets with HTML
Line 96: Line 106:
* HTML div and span tags
* HTML div and span tags
* Backgrounds  
* Backgrounds  
* CSS “boxes” , positioning elements and text flow (if time only !)
* CSS “boxes” , positioning elements and text flow
 
'''(3) Web design'''
 
Some introductory texts:
# [http://psd.tutsplus.com/tutorials/designing-tutorials/9-essential-principles-for-good-web-design/ 9 Essential Principles for Good Web Design]
# [http://unbounce.com/landing-page-optimization/the-5-second-rule-best-sites-of-2009-part-1/ The 5 second rule]
# [http://www.useit.com/alertbox/20031110.html The Ten Most Violated Homepage Design Guidelines]
# [http://www.useit.com/alertbox/20031110.html Top 10 Mistakes in Web Design] (Jakob Nielsen's Alertbox)
# [http://uxdesign.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/ 10 Principles Of Effective Web Design]
# [http://www.useit.com/alertbox/20030825.html Usability 101]


==== Homework 3  ====
==== Homework 3  ====


Task: Create a little HTML page that spells out a proposition for the [[COAP:COAP-2100/term project|term project]]: creating a website with an online service (see homework 1)
Task: Create a little HTML page that spells out a proposition for the [[COAP:COAP-2100/term project|term project]]: creating a little website using either an online service (see homework 1/2) or your own HTML5 coding.


# Think about objectives and requirements for your term project
# Think about '''objectives''' and '''requirements''' for your term project
# Create an HTML page (either in HTML 4.01 strict or XHTML strict) and write down a draft proposal
# Create an [[HTML5]] page and write down a draft proposal
# Create an external CSS style sheet that is linked to the HTML page
# Create an external CSS style sheet that is linked to the HTML page


Line 122: Line 142:


Submission:
Submission:
* Upload '''both''' the HTML and the CSS file to the World classroom before start of week 3 '''Monday''' lesson.
* Upload '''both''' the HTML and the CSS file to the World classroom before start of week 4 '''Wednesday''' lesson.


[[Category:COAP 2100 Archive]]
[[Category:COAP 2100]]

Latest revision as of 11:55, 29 January 2014

COAP 2100
COAP 2100 Archive
COAP:COAP-2100
COAP:COAP-2100/exams
COAP:COAP-2100/term project
COAP:COAP-2100/week1
COAP:COAP-2100/week2
COAP:COAP-2100/week3
COAP:COAP-2100/week4
COAP:COAP-2100/week5
COAP:COAP-2100/week6
COAP:COAP-2100/week7
COAP:COAP-2100/week8

Week 3

Topics Covered

HTML
  • Introduction to HTML5. How is it different from XHTML 1.x and HTML 4.x ?
  • Valid HTML. Why is valid code important and what needs to be validated ?
Styling with CSS
  • Introduction to CSS
  • CSS validation
Webdesign
  • Basic Webdesign principles

Software

We suggest using the following HTML Editors

Browser extensions (if installable):

The tidy program (optional: without Internet connection, you need a local validator that also works with NoteTab light)

  • Go to HTML Tidy for Windows
  • Download the EXE version. You will get a *.zip file called tidy.zip
  • Extract the single tidy.exe to some directory, e.g. c:\bin\

HTML/CSS Teaching materials

Alternatives

Classroom activities

Monday

(1) Introduction to some major HTML5 tags Online documentation about HTML:

(2) A introduction to W3C Quality Assurance Tool set. It includes several tools

  1. http://validator.w3.org/ (Markup Validation Service)
    • You can enter a URL, upload file or directly copy/paste code
    • Supported formats (Sept 2009): HTML, XHTML, SMIL, MathML
  2. http://validator.w3.org/checklink (W3C Links Checker)
  3. http://jigsaw.w3.org/css-validator/ (on line CSS validation service)
    • URL validation: You can enter either an HTML/XHTML URL or just a CSS
    • Alternatively you can upload a CSS file (and pick the CSS profile).
  4. Other tools, e.g. a Feed validator are available from the Quality page ...

(3) Using web browser development tools

  • Use of HTML Validator. Once installed, you can View-Source (CTRL-U) and look at the errors.

(4) Using Tidy inside NoteTab light

  • This may not work (since Tidy must be installed on your computer)

(5) Q/A Homework 2 (if needed)

  • Pay attention to copyright (i.e. lock the web site or kill it if you reuse copyrighted materials)

(6) Start of Homework 3 / Objectives and requirements for a term project

(6) Using the tidy program (if time left)

  • You can get various flavors from SourceForge. More precisely:
  1. Get the Windows binary version from http://www.paehl.com/open_source/?HTML_Tidy_for_Windows
  2. Unzip it somewhere on the harddisk (I stronly suggest the C: drive, we will discuss this with the Lab assistants, so wait)
  3. Then configure NoteTab light, i.e. hit CTRL-F7 and tell the editor where to find tidy.exe
  4. Alternatively (v.s. using a default repair configuration through NoteTab ), you also can install GuiTidy: http://www.paehl.de/tidy/ (scroll all the way down). It will give you more options. Advanced users will have to use the command line.
Wednesday

(1) Feedback for homework 1

  • Good work
  • Please hide problematic sites, e.g. those that advertise services that do not exist.

(2) CSS

We recall some CSS principles, in particular:

  • Associating a styles and stylesheets with HTML
    • Inline Styles
    • Embedded Style Sheets
    • Linking External Style Sheets
  • CSS Validation ( http://jigsaw.w3.org/css-validator/ )
  • CSS Selectors
  • Text styling (e.g. fonts, size, aligns)
  • HTML div and span tags
  • Backgrounds
  • CSS “boxes” , positioning elements and text flow

(3) Web design

Some introductory texts:

  1. 9 Essential Principles for Good Web Design
  2. The 5 second rule
  3. The Ten Most Violated Homepage Design Guidelines
  4. Top 10 Mistakes in Web Design (Jakob Nielsen's Alertbox)
  5. 10 Principles Of Effective Web Design
  6. Usability 101

Homework 3

Task: Create a little HTML page that spells out a proposition for the term project: creating a little website using either an online service (see homework 1/2) or your own HTML5 coding.

  1. Think about objectives and requirements for your term project
  2. Create an HTML5 page and write down a draft proposal
  3. Create an external CSS style sheet that is linked to the HTML page

Constraints:

  • HTML must include at least 3 titles plus paragraphs and lists (of your choice)
  • Define a global default CSS rule or a rule for the body element
  • Define an extra rule for titles, paragraphs and list elements
  • You should make a serious attempt to define a project (i.e. explicitly define some objectives and requirements)

Evaluation:

  • I only will evaluate whether you comply with the constraints, e.g. technical and design quality of the CSS, validity of the HTML
  • Details of the term project proposal will not be evaluated and it is not yet binding. However, I require that you you define certain key elements:
    • Objectives: What is the purpose of the web site ?
    • Audience: What is your main target audience ? Can others consult it/find it useful ?
    • Functions: What kind of information / applications should the site provide
    • Styling: Any ideas about its look and feel ?
    • Other information: ???

Submission:

  • Upload both the HTML and the CSS file to the World classroom before start of week 4 Wednesday lesson.
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-2100/week3&oldid=50687"