COAP:COAP-2100/week3: Difference between revisions
(Daniel K. Schneider moved page COAP:COAP-2100/week3 to COAP:COAP-2100/week3-2012) |
m (→Software) |
||
(12 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
# | <categorytree mode="pages" depth="1" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">COAP 2100</categorytree> | ||
=== 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 | |||
* [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://bluegriffon.org/ BlueGriffon] Wysiwyg editor for HTML5. (Win/Mac/Linux) | |||
* [http://www.barebones.com/products/textwrangler/index.html TextWrangler] (Mac) | |||
Browser extensions (if installable): | |||
* [http://users.skynet.be/mgueury/mozilla/index.html HTML Validator]. You can get it directly from [http://sourceforge.net/projects/htmlvalidator/files/ Source Forge] | |||
* [https://addons.mozilla.org/en-US/firefox/addon/13048 Codeburner for Firefox] (HTML and CSS reference) | |||
* [https://addons.mozilla.org/en-US/firefox/addon/fireshot/?src=search Fireshot] (Screen capturing extension for Firefox) | |||
* [http://chrispederick.com/work/web-developer/ web-developer] | |||
The tidy program (optional: without Internet connection, you need a local validator that also works with NoteTab light) | |||
* Go to [http://www.paehl.com/open_source/?HTML_Tidy_for_Windows 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 ==== | |||
* [[HTML5]] (Short overview) | |||
* [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 validation and repair]] | |||
* [http://reference.sitepoint.com/html Online HTML reference manual] (at sitepoint, but you are free to choose others ...) | |||
* [[CSS tutorial]] | |||
* [http://reference.sitepoint.com/css Online CSS reference manual] | |||
; Alternatives | |||
* See [[HTML links]] | |||
==== Classroom activities ==== | |||
===== Monday ===== | |||
(1) Introduction to some major HTML5 tags | |||
Online documentation about HTML: | |||
* 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. | |||
* 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 | |||
# 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 | |||
# http://validator.w3.org/checklink (W3C Links Checker) | |||
# 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). | |||
# Other tools, e.g. a Feed validator are available from the [http://www.w3.org/QA/Tools/ Quality page] ... | |||
(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. | |||
(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 | |||
* Discussion of the [[COAP:COAP-2100/term project|term project]] | |||
(6) Using the tidy program (if time left) | |||
* You can get various flavors from [http://tidy.sourceforge.net/#binaries SourceForge]. More precisely: | |||
# Get the Windows binary version from http://www.paehl.com/open_source/?HTML_Tidy_for_Windows | |||
# Unzip it somewhere on the harddisk (I stronly suggest the C: drive, we will discuss this with the Lab assistants, so '''wait''') | |||
# Then configure NoteTab light, i.e. hit CTRL-F7 and tell the editor where to find tidy.exe | |||
# 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: | |||
# [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 ==== | |||
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 | |||
# Create an [[HTML5]] page and write down a draft proposal | |||
# 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. | |||
[[Category:COAP 2100]] |
Latest revision as of 11:55, 29 January 2014
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
- NoteTab light. A simple programming editor with little HTML support. (Windows(
- Kompozer for HTML4 (grab the latest development version !)
- BlueGriffon Wysiwyg editor for HTML5. (Win/Mac/Linux)
- TextWrangler (Mac)
Browser extensions (if installable):
- HTML Validator. You can get it directly from Source Forge
- Codeburner for Firefox (HTML and CSS reference)
- Fireshot (Screen capturing extension for Firefox)
- web-developer
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
- HTML5 (Short overview)
- Dive Into HTML5 (free online book about HTML5, not for absolute beginners)
- HTML and XHTML elements and attributes (lecture notes)
- HTML and XHTML validation and repair
- Online HTML reference manual (at sitepoint, but you are free to choose others ...)
- CSS tutorial
- Online CSS reference manual
- Alternatives
- See HTML links
Classroom activities
Monday
(1) Introduction to some major HTML5 tags Online documentation about HTML:
- We will use HTML and XHTML elements and attributes (lecture notes)
- We also will demonstrate the Codeburner Firefox extensions and the related Sitepoint web site.
- See HTML links (Manuals and short references) for other HTML documentation or search the web .....
(2) A introduction to W3C Quality Assurance Tool set. It includes several tools
- 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
- http://validator.w3.org/checklink (W3C Links Checker)
- 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).
- 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
- Discussion of the term project
(6) Using the tidy program (if time left)
- You can get various flavors from SourceForge. More precisely:
- Get the Windows binary version from http://www.paehl.com/open_source/?HTML_Tidy_for_Windows
- Unzip it somewhere on the harddisk (I stronly suggest the C: drive, we will discuss this with the Lab assistants, so wait)
- Then configure NoteTab light, i.e. hit CTRL-F7 and tell the editor where to find tidy.exe
- 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:
- 9 Essential Principles for Good Web Design
- The 5 second rule
- The Ten Most Violated Homepage Design Guidelines
- Top 10 Mistakes in Web Design (Jakob Nielsen's Alertbox)
- 10 Principles Of Effective Web Design
- 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.
- Think about objectives and requirements for your term project
- Create an HTML5 page and write down a draft proposal
- 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.