COAP:COAP-2100/week2-2011: Difference between revisions
Jump to navigation
Jump to search
mNo edit summary |
|||
| (18 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 2 === | === Week 2 === | ||
| Line 9: | Line 10: | ||
* Validation services (if time left) | * Validation services (if time left) | ||
==== Teaching materials ==== | ==== Teaching materials, software and reference manuals ==== | ||
; What do we mean by the Internet ? | ; What do we mean by the Internet ? | ||
| Line 16: | Line 17: | ||
; Configuring your Web browser with extensions | ; Configuring your Web browser with extensions | ||
* [[Browser extension]] | * [[Browser extension]]s for Firefox. You must install '''at least''': | ||
** [http://users.skynet.be/mgueury/mozilla/index.html HTML VALIDATOR] - [http://htmlvalidator.sourceforge.net/mozilla/tidy_firefox_win_0861.xpi Download for Windows] (1/2011) | |||
** [https://addons.mozilla.org/en-US/firefox/addon/13048 Codeburner for Firefox] (HTML and CSS reference) | |||
** [https://addons.mozilla.org/en-US/firefox/addon/1146 Screengrab] (easy tool to create screen captures of web sites) | |||
; Text and HTML editors | ; Text and HTML editors | ||
* [[Text editor]] (definition and pointers to recommended editors) | * [[Text editor]] (optional reading, definition and pointers to recommended editors) | ||
* [[Web authoring system]]s (a list of web editing tools) | * [[Web authoring system]]s (optional reading, a list of web editing tools) | ||
* At Webster, the "official" text editor is NoteTab light: http://www.notetab.com/ | * At Webster, the "official" text editor is NoteTab light: http://www.notetab.com/ | ||
* For this class, we will use Kompozer: http://www.kompozer.net/download.php (free software, multiplatform) | |||
See also [[XML editor]]s, an alternative for XHTML editing | See also [[XML editor]]s, an alternative for XHTML editing | ||
; HTML and XHTML | ; HTML and XHTML documentation | ||
* [[HTML and XHTML elements and attributes]] | * [[HTML and XHTML elements and attributes]] (lecture notes) | ||
* [[World Wide Web]], [[HTML]] and [[XHTML]] (for background information) | * [[World Wide Web]], [[HTML]] and [[XHTML]] (for background information) | ||
You also may either consult the Reference book (Deitel) or do an online tutorial. Recommended: | You also may either consult the Reference book (Deitel) or do an online tutorial. Recommended: | ||
| Line 35: | Line 40: | ||
; HTML elements reference | ; HTML elements reference | ||
* http://en.wikipedia.org/wiki/HTML_element | * http://en.wikipedia.org/wiki/HTML_element | ||
* However, again, we suggest to install the [https://addons.mozilla.org/en-US/firefox/addon/13048 Codeburner for Firefox] extension. | |||
==== Classroom activities ==== | ==== Classroom activities ==== | ||
| Line 41: | Line 47: | ||
* Catching up week 1: Social networking software | * Catching up week 1: Social networking software | ||
* Q/R HomeWork 1 | * Q/R HomeWork 1 | ||
* Short demo of Kompozer and creation of a little HTML page | |||
; Wednesday | |||
* Short lecture: What do we mean by Internet and the World-Wide Web | * Short lecture: What do we mean by Internet and the World-Wide Web | ||
* Browser configuration | * Browser configuration | ||
* Short Introduction to HTML and XHTML (principle and most important tags) | |||
* Homework 2 (why and how, visit of http://www.csszengarden.com/) | |||
* Introduction to XHTML | * HTML Coding with Kompozer (and optionally NoteTab light or another text editor) | ||
* HTML Coding with Kompozer and NoteTab light | * HTML Validation with various tools (we suggest using the Firefox extension) | ||
* HTML Validation with various tools | * Adding/editing HTML fragments to/in on-line services with [[through the web editor]]s (if time left) | ||
* Adding/editing HTML fragments to/in on-line services with [[through the web editor]]s | |||
==== Homework 2 ==== | ==== Homework 2 ==== | ||
Task: Create a little HTML page that evaluates | Task: Create a little HTML page that evaluates three web designs at CSS Zen Garden | ||
# Go http://www.csszengarden.com/ (Zen Garden) | # Go http://www.csszengarden.com/ (Zen Garden) | ||
| Line 58: | Line 66: | ||
#* http://www.mezzoblue.com/zengarden/alldesigns/ will list all submitted design that made it into the CSS ZenGarden. | #* http://www.mezzoblue.com/zengarden/alldesigns/ will list all submitted design that made it into the CSS ZenGarden. | ||
#* (New) You also can pick rejected designs from: http://www.mezzoblue.com/zengarden/alldesigns/others/ (links may be broken though, since they point to original submissions) | #* (New) You also can pick rejected designs from: http://www.mezzoblue.com/zengarden/alldesigns/others/ (links may be broken though, since they point to original submissions) | ||
# Create an HTML page (either in '''HTML 4.01 strict''' or '''XHTML 1.x stict''') and write down your (short) analysis | # Create an HTML page (either in '''HTML 5''' or '''HTML 4.01 strict''' or '''HTML 4.01 transitional''' or '''XHTML 1.x stict''') and write down your (short) analysis | ||
# | # Just use Kompozer and/or keep to simple tags (e.g. h1,h2,p,ul,ol,a,p) and do not try to make it look good (CSS is for another homework) | ||
# You should, however, insert screen shots using the ''img'' tag | |||
# We suggest that you look at some prior homework that can be found [http://tecfa.unige.ch/guides/te/coap2100/hw2009/hw2/ here]. Username and password are available in the worldclass room. | |||
Constraints: | Constraints: | ||
# Your page should be valid HTML/XHTML strict (either use the HTML validator of the editor, an online tool or the Firefox extension to validate) | # Your page should be valid HTML/XHTML transitional or strict (either use the HTML validator of the editor, an online tool or the Firefox extension to validate) | ||
# You must a include two screenshots | # You must a include two screenshots | ||
# You are free to structure your analysis as you like as long as you look at three design versions. | |||
Submission | Submission | ||
# Upload the html file + other assets to the worldclassroom before start of the '''Wednesday week 3 lesson''' | |||
# Do not forget to upload the screenshots (most likely about 3 pictures, else the instructor won't be able to see them) | |||
To get a good grade: | |||
* Try to be principled and systematic, i.e. look at these three designs using some interesting criteria. You also can discuss the criteria. | |||
* Turn it in on time | |||
[[Category:COAP 2100 Archive]] | |||
Latest revision as of 15:20, 20 March 2012
Week 2
Topics Covered
- What do we mean by the Internet ?
- Web markup, HTTP and web applications
- Your development environment (Web browser and text editor)
- Introduction to HTML and XHTML
- Validation services (if time left)
Teaching materials, software and reference manuals
- What do we mean by the Internet ?
- Slides used: internet-intro.pdf
- Internet tutorial (first part of the slides above spelled out ...)
- Configuring your Web browser with extensions
- Browser extensions for Firefox. You must install at least:
- HTML VALIDATOR - Download for Windows (1/2011)
- Codeburner for Firefox (HTML and CSS reference)
- Screengrab (easy tool to create screen captures of web sites)
- Text and HTML editors
- Text editor (optional reading, definition and pointers to recommended editors)
- Web authoring systems (optional reading, a list of web editing tools)
- At Webster, the "official" text editor is NoteTab light: http://www.notetab.com/
- For this class, we will use Kompozer: http://www.kompozer.net/download.php (free software, multiplatform)
See also XML editors, an alternative for XHTML editing
- HTML and XHTML documentation
- HTML and XHTML elements and attributes (lecture notes)
- World Wide Web, HTML and XHTML (for background information)
You also may either consult the Reference book (Deitel) or do an online tutorial. Recommended:
- http://en.wikibooks.org/wiki/HyperText_Markup_Language
- http://www.w3schools.com/html (part 1) followed by /http://www.w3schools.com/xhtml/ (W3C Schools tutorial)
- HTML links includes pointers for other online tutorials
- HTML elements reference
- http://en.wikipedia.org/wiki/HTML_element
- However, again, we suggest to install the Codeburner for Firefox extension.
Classroom activities
- Monday
- Catching up week 1: Social networking software
- Q/R HomeWork 1
- Short demo of Kompozer and creation of a little HTML page
- Wednesday
- Short lecture: What do we mean by Internet and the World-Wide Web
- Browser configuration
- Short Introduction to HTML and XHTML (principle and most important tags)
- Homework 2 (why and how, visit of http://www.csszengarden.com/)
- HTML Coding with Kompozer (and optionally NoteTab light or another text editor)
- HTML Validation with various tools (we suggest using the Firefox extension)
- Adding/editing HTML fragments to/in on-line services with through the web editors (if time left)
Homework 2
Task: Create a little HTML page that evaluates three web designs at CSS Zen Garden
- Go http://www.csszengarden.com/ (Zen Garden)
- Pick two designs that you like and one that you dislike
- http://www.mezzoblue.com/zengarden/alldesigns/ will list all submitted design that made it into the CSS ZenGarden.
- (New) You also can pick rejected designs from: http://www.mezzoblue.com/zengarden/alldesigns/others/ (links may be broken though, since they point to original submissions)
- Create an HTML page (either in HTML 5 or HTML 4.01 strict or HTML 4.01 transitional or XHTML 1.x stict) and write down your (short) analysis
- Just use Kompozer and/or keep to simple tags (e.g. h1,h2,p,ul,ol,a,p) and do not try to make it look good (CSS is for another homework)
- You should, however, insert screen shots using the img tag
- We suggest that you look at some prior homework that can be found here. Username and password are available in the worldclass room.
Constraints:
- Your page should be valid HTML/XHTML transitional or strict (either use the HTML validator of the editor, an online tool or the Firefox extension to validate)
- You must a include two screenshots
- You are free to structure your analysis as you like as long as you look at three design versions.
Submission
- Upload the html file + other assets to the worldclassroom before start of the Wednesday week 3 lesson
- Do not forget to upload the screenshots (most likely about 3 pictures, else the instructor won't be able to see them)
To get a good grade:
- Try to be principled and systematic, i.e. look at these three designs using some interesting criteria. You also can discuss the criteria.
- Turn it in on time