COAP:COAP-2100/week3-2012

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

Week 3

Topics covered

• Using SVG within HTML5
• Crash course on HTML5 (if needed)
• Creating simple SVG
• Recall of XML principles (well-formed XML)

Teaching materials, software and reference manuals

(1) SVG Tutorials

• See SVG for finding online tutorials
• See Using SVG with HTML5 tutorial for using SVG (Monday class)
• You can find a PDF of an SVG book in the worldclassroom / Documents folder

(2) SVG-Edit online software

• svg-edit (Online SVG editor)
• SVG-edit 2.5.1 (stable version, in case the above won't work).
• If you are curious about the "about", follow the links on the svg-edit home page

(3) Free SVG drawing tools you can install on your computer

• Inkscape Powerful, but more difficult drawing tool (export as "pure" SVG before pasting into HTML5)
• DIA, a popular open source diagramming tool can import/export SVG (Win/Mac/Linux). There are also portable app (Windows) and zip versions

(4) Free SVG clipart

• Open Clip Art Library (openclipart.org)

Classroom activities

Monday

• Introduction to HTML (if needed)
• Creating SVG with svg-edit
• Embedding SVG in HTML 5. See Using SVG with HTML5 tutorial
• Download SVG from http://openclipart.org
• Repairing clip art from openclipart.org with Inkscape (export "as SVG")
• Scaling SVG graphics

Wednesday

• Discussion about the mid-term exam (Wed week 5)
• SVG continued, e.g. simple animations using the SMIL tags.

Homework 3

• Create an HTML5 page
• Details TBA on Wednesday.

Due: Wednesday week 4 (before start of class)