COAP:COAP-2100/week5: Difference between revisions
Jump to navigation
Jump to search
m (→Mid-term exam) |
m (→Mid-term exam) |
||
Line 67: | Line 67: | ||
==== Mid-term exam ==== | ==== Mid-term exam ==== | ||
You will be allowed to use all materials (open book, open Internet). However, use of | You will be allowed to use all materials (open book, open Internet). However, use of communication software (including websites like Facebook) is strictly forbidden. Offenders will get an F. | ||
; Subjects that will be tested | ; Subjects that will be tested | ||
* Be able to find information in the Firefox Codeburner/SitePoint HTML and CSS reference | * Be able to find information in the Firefox Codeburner/SitePoint HTML and CSS reference | ||
* Understanding of principles underlying web formats (HTML, XHTML and CSS) including some of the history | * Understanding of principles underlying web formats (HTML, XHTML and CSS) including some of the history | ||
* Be able to create HTML code and detect errors | * Be able to create simple HTML code and detect errors | ||
** DocType declarations (superficially, e.g. understand the difference between the strict and transitional HTML4x/XHTML1x models) | ** DocType declarations (superficially, e.g. understand the difference between the strict and transitional HTML4x/XHTML1x models) | ||
** Required tags: ''html,body,title,link,style,a,img,h1,h2,h2,p,blockquote,ul,ol,li,div,span'' | ** Required tags: ''html,body,title,link,style,a,img,h1,h2,h2,p,blockquote,ul,ol,li,div,span'' | ||
** Required attributes: style + the elementary attributes of the HTML ''a'', ''img'' and ''link'' tags | ** Required attributes: style + the elementary attributes of the HTML ''a'', ''img'' and ''link'' tags + class + id | ||
** | ** Notice: I may design an exam question that asks you to find the definition of another HTML tag or attribute. | ||
* Simple CSS styling | * Simple CSS styling | ||
** Basic selectors | ** Basic selectors (tag names) | ||
** Class and | ** Class and ID selectors (.xxx and .#xxx) | ||
** Simple boxing properties (not positioning) | ** Simple boxing properties (i.e. margins, not positioning) | ||
** Simple text properties, e.g. fonts, color, line spacing, left/right/center alignment | ** Simple text properties, e.g. fonts, color, font-family, line spacing, left/right/center alignment | ||
* Color models | * Color models | ||
** | ** Basic principles of RGB, RGBa, HSL and HSLa (''not'' HSV) and use of color models for CSS color and background-color values. E.g. you should know that RBG combines amount of three colors, that HSL is a color on the "360 color wheel" plus saturation and light. E.g. you should know that alpha means transparency. | ||
** Be able to find a RGB hex value for a given color name and the other way round (using any tool/table you like) | |||
* Simple design principles | * Simple design principles | ||
** Be able to comment on a web site design | ** Be able to comment on a web site design | ||
** What do we mean be wireframing | |||
** Use of color palettes (basic principles) | ** Use of color palettes (basic principles) | ||
** Testing a web site with users | ** Testing a web site with users (basic principles) | ||
<!-- | |||
* XML | * XML | ||
** Roles of XML, types of XML languages | ** Roles of XML, types of XML languages | ||
** XML Formalism, wellformedness | ** XML Formalism, wellformedness | ||
** The concept of XML grammars and validity (no technical details about DTDs, XML Schemas, etc.) | ** The concept of XML grammars and validity (no technical details about DTDs, XML Schemas, etc.) | ||
--> | |||
<!-- | <!-- | ||
* Wikis | * Wikis |
Revision as of 12:06, 31 January 2011
Week 5 COAP 2100
Topics Covered
- Dealing with pictures (some reminders about formats and size)
- Wikis
- Dealing with Video formats
- Encoding of Flash videos
- Creating Flash files with the video component
Teaching materials
- Image File Formats (Wikipedia)
- Wiki and Mediawiki (background information and links)
- Video streaming, Multimedia container format, Codec (some short background info with links)
- Flash video component tutorial
Web sites to visit
- The original
- http://c2.com/cgi/wiki?FrontPage WikiWiki
- Demo page: http://c2.com/cgi/wiki?WikiWikiSandbox
- Online wiki hosting services
- http://pbworks.com/ pbWiki, commercial on-line service
- Demo site: https://atelierwebmaster.pbworks.com/
- http://wikispaces.com Wikispaces, commercial on-line service
- Demo site: http://atelierwebmaster.wikispaces.com/
- Mediawikis (Wikipedia engine)
- Demo site: http://www.wikimedia.org/
- http://en.wikipedia.org/wiki/Main_Page
- Other Wikimedia sites ...
- Demo site: http://www.wikia.com/
- Demo site: http://edutechwiki.unige.ch/
- Demo site: https://developer.mozilla.org/en/Web_Development
Classroom activities
- Monday
- Images (reminder about formats and size)
- Wikis: the concept, variants
- Visit of some wikis (see wikisites above) + hands-on
- Wikimedia and the Mediawiki engine, including some visits and hands on Mediawiki
- Wiki politics (editing guidelines and governance)
- Easy online wiki hosting (see Wiki#Wiki_hosting Wiki (Wiki hosting section)
- Videos
- Formats
- http://video.google.com/videoadvancedsearch (Google video search)
- https://addons.mozilla.org/en-US/firefox/addon/3006 (Video download tool)
- Video encoding for Flash (if time left)
- HTML 5 Video tag.
- Wednesday
- Homework 3 feedback (15 min.)
- Term project assignment and discussion (15 min.)
- Break (10 min.)
- Mid-term (see below) (80 minutes, 90 minutes max!)
Mid-term exam
You will be allowed to use all materials (open book, open Internet). However, use of communication software (including websites like Facebook) is strictly forbidden. Offenders will get an F.
- Subjects that will be tested
- Be able to find information in the Firefox Codeburner/SitePoint HTML and CSS reference
- Understanding of principles underlying web formats (HTML, XHTML and CSS) including some of the history
- Be able to create simple HTML code and detect errors
- DocType declarations (superficially, e.g. understand the difference between the strict and transitional HTML4x/XHTML1x models)
- Required tags: html,body,title,link,style,a,img,h1,h2,h2,p,blockquote,ul,ol,li,div,span
- Required attributes: style + the elementary attributes of the HTML a, img and link tags + class + id
- Notice: I may design an exam question that asks you to find the definition of another HTML tag or attribute.
- Simple CSS styling
- Basic selectors (tag names)
- Class and ID selectors (.xxx and .#xxx)
- Simple boxing properties (i.e. margins, not positioning)
- Simple text properties, e.g. fonts, color, font-family, line spacing, left/right/center alignment
- Color models
- Basic principles of RGB, RGBa, HSL and HSLa (not HSV) and use of color models for CSS color and background-color values. E.g. you should know that RBG combines amount of three colors, that HSL is a color on the "360 color wheel" plus saturation and light. E.g. you should know that alpha means transparency.
- Be able to find a RGB hex value for a given color name and the other way round (using any tool/table you like)
- Simple design principles
- Be able to comment on a web site design
- What do we mean be wireframing
- Use of color palettes (basic principles)
- Testing a web site with users (basic principles)
- Exam type
- The exam will be a quiz with various types of questions(e.g. MCQs, fill-in, debug, short answers)
- Tip: Most answers can be found in the teaching materials available in this wiki.
Homework
(none this week, hw4 is due next Monday, see week 4)