- Wednesday, week 6
- Open book. You may use both print texts and the Internet. However, use of communication software (including websites like Facebook) is strictly forbidden. Offenders will get an F.
- The exam will include all sorts of questions (MCQs, fill-in, code repair, ...)
General HTML/CSS and XML knowledge
- Subjects that may be tested
- Be able to find information about HTML tags/attributes and CSS selectors/properties. I may design an exam question that asks you to find the definition of an tag or attribute.
- Selecting an appropriate on-line service for creating a web site.
- Be able to create simple HTML code and detect errors
- DocType declarations (superficially, e.g. be able to distinguish between an HTML5, an HTML4 and a XHTML page)
- Required tags: html,head,body,title,link,a,img,h1,h2,blockquote,p,ul,ol,li,div,span
- Required attributes: style + the elementary attributes of the HTML a, img and link tags + class + id
- 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. color, font-family, line spacing, left/right/center alignment
- Color models
- Basic principles of RGB, RGBa, HSL and HSLa (not HSV). 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. You also 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)
- Use colors with CSS and SVG
- Simple design principles
- Be able to comment on a web site design
- Be able to find and use basic web page usability principles, testing a web site with users
- Creating a simple wireframe (sketch of a web page)
- Roles of XML, some types of XML languages
- Essentials of the XML formalism, well-formedness
- The concept of XML grammars and validity (no technical details about DTDs, XML Schemas, etc.)
Items that may be tested
- SVG file structure (the svg element)
- SVG embedding in HTML using the img, object elements and SVG image element
- Graphic primitives: rect, circle, ellipse, line, polyline, polygon and text)
- Attributes you should know: position and size attributes, opacity, fill and stroke
- Grouping and reusing: Defining an "id", g, def and use
- Basic use of the transform attribute (scaling, rotation, and translation)
- Simple animation: animate
- Attributes for animate: to, from, values, dur, begin, end, fill, attributeName, xlink:href, repeatCount
- Simple chaining of animations, e.g.
dur="0s" begin="0s; other_anim.end"or
using "values=1.0 0.0 1.0"
- The "path" language. However, I may ask you to copy/paste a path from the online SVG-edit tool or change its style (e.g. the color).
- Interactive SVG, DOM programming, etc.
Firstly, do the homework. You then can either just read my wiki pages or just the textbook chapters or both .....
- Search on the Internet
- or look at Index of important teaching materials
Pick one of these. You can ignore difficult sections that we did not introduce in the classroom.
(1) SVG Essentials (chapters 3,4,11):'
- http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Animating_and_Scripting_SVG (Only the animate tag, in particular: ignore the scripting)
- Important: Namespace declarations are missing from all the examples in this book, i.e. code will not work unless you add these ! If you want to print these textbook chapters, use the PDF that sits in the Documents folder of the World Classroom. You are allowed to bring it to the exam ....
(2) Building Web Applications with SVG (pages 20 to 39 only !)
- Excerpt sits in the worldclassroom. Probably the best text for starters.
(3) Wiki pages:
My own lecture notes
- Using SVG with HTML5 tutorial (mandatory reading, not well covered in the text books)
- Static SVG tutorial (only parts that will be tested, if something is not clear, read a recommended textbook chapter)
- SVG/SMIL animation tutorial (only sections that concern the animate element, read VG_Essentials/Animating_and_Scripting_SVG if something is not clear)
- Using Inkscape for web animation (only the mechanics of the SVG animation)
- Interactive SVG-SMIL animation tutorial (optional, but it can't hurt to look at this)
(4) W3C Primer:
Good text for folks who want it both short and complete ....
- An SVG Primer for Today's Browsers W3C Working Draft — September 2010. (200+ pages)
The exam includes two parts:
(1) Oral presentation of the term project. Each student must shortly present his/her project (draft version) on Monday week 8. You will have exactly 5 minutes to present the purpose of your project and the draft web site.
(2) A screencast presenting your term project (shown and discussed on Wednesday week 8). The screen cast will be shown and discussed in class. Also, prepare for technical questions from the instructor.
Presentation guidelines - important elements
- Objectives (what is the term project website about)
- Target audience
- How far did you implement the site ?
- What technology did you use ?
- Can it be used ?(user experience), i.e.
- usefulness (people can do something with it, e.g. find information, buy stuff)
- appeal (style, graphics, ....)
- Does the result fit your objectives (improvements, etc.)
Recall of the term project:
- The draft version of the site is due on Monday week 8 before class, i.e. you must present the site in class and therefore make sure that you got sufficient materials. Presenting intentions is not enough !
- On Wednesday, the screencast must be ready, i.e. turned in before start of class. Also make sure that you can answer technical questions.
Late submission / absence policy:
- Missing the oral presentation / draft site not ready = 50% off
- Missing the screencast presentation = 50% off.
- Missing both, you will get a maximum of 50%....