COAP:COAP-2100/week3-2012: Difference between revisions
Jump to navigation
Jump to search
mNo edit summary |
|||
| Line 17: | Line 17: | ||
* You can find a PDF of an SVG book in the worldclassroom / Documents folder | * You can find a PDF of an SVG book in the worldclassroom / Documents folder | ||
; (2) SVG-Edit online software | ; (2) HTML Tutorials (if needed) | ||
* [[HTML and XHTML elements and attributes]] | |||
* [http://www.w3.org/MarkUp/Guide/ D. Raggett's HTML 4 tutorial] (ok, but use the HTML5 document header) | |||
; (3) SVG-Edit online software | |||
* [http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html svg-edit] (Online SVG editor) | * [http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html svg-edit] (Online SVG editor) | ||
* [http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html SVG-edit 2.5.1] (stable version, in case the above won't work). | * [http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html 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 [http://code.google.com/p/svg-edit/ svg-edit home page] | * If you are curious about the "about", follow the links on the [http://code.google.com/p/svg-edit/ svg-edit home page] | ||
; ( | ; (4) Free SVG drawing tools you can install on your computer | ||
* [http://www.inkscape.org/ Inkscape] Powerful, but more difficult drawing tool (export as "pure" SVG before pasting into HTML5) | * [http://www.inkscape.org/ Inkscape] Powerful, but more difficult drawing tool (export as "pure" SVG before pasting into HTML5) | ||
* [http://dia-installer.de/ DIA], a popular open source diagramming tool can import/export SVG (Win/Mac/Linux). There are also portable app (Windows) and zip versions | * [http://dia-installer.de/ DIA], a popular open source diagramming tool can import/export SVG (Win/Mac/Linux). There are also portable app (Windows) and zip versions | ||
; ( | ; (5) Free SVG clipart | ||
* [http://www.openclipart.org/ Open Clip Art Library] (openclipart.org) | * [http://www.openclipart.org/ Open Clip Art Library] (openclipart.org) | ||
Revision as of 21:26, 1 April 2012
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) HTML Tutorials (if needed)
- HTML and XHTML elements and attributes
- D. Raggett's HTML 4 tutorial (ok, but use the HTML5 document header)
- (3) 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
- (4) 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
- (5) 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)