COAP:COAP-2100/exams

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

"Mid-term" exam

Date

Wednesday, week 6

Format

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)
• XML
  • 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.)

SVG

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"

Not tested

• 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.

Mid-term preparation

Firstly, do the homework. You then can either just read my wiki pages or just the textbook chapters or both .....

HTML/CSS/XML

• Search on the Internet
• or look at Index of important teaching materials

SVG documentation

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/Basic_Shapes
• http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Document_Structure
• 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 ....

Bad:

<svg ....">

Good:

<svg xmlns="http://www.w3.org/2000/svg">

(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)

Final

The exam includes two parts:

1. Oral presentation of the term project, draft version or better (Monday week 8)
2. Oral presentation of a screencast presenting your term project (Wednesday week 8)

• Draft version of the site is due: Monday week 8 before class, i.e. you must present it in class.

Each student must shortly present his/her project on Monday week 8. You will have exactly 5 minutes to present the purpose of your project and the draft web site. A screencast presenting the term project must be turned before Wednesday week 8. The screen cast must be presented and discussed in class.

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%....