COAP:COAP-2100/week4: Difference between revisions
Jump to navigation
Jump to search
m (→Homework 4) |
m (→Homework 4) |
||
(14 intermediate revisions by the same user not shown) | |||
Line 5: | Line 5: | ||
==== Topics covered ==== | ==== Topics covered ==== | ||
* | * Introduction to static [[SVG]] | ||
* Dynamic SVG ( | * Using [[SVG]] within [[HTML5]] | ||
* Dynamic SVG (if time left, more on week 5) | |||
* Recall of XML principles (well-formed XML) | |||
==== Monday ==== | |||
* | * Creating SVG with [http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html 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 | ||
* https://developer.mozilla.org/en/SVG (reference) | |||
'''Example code that you can copy / paste into an editor''' | '''Example HTML5/SVG code that you can copy/paste into an editor''' | ||
<source lang="XML"> | <source lang="XML"> | ||
<!doctype html> | <!doctype html> | ||
Line 63: | Line 41: | ||
</source> | </source> | ||
==== Wednesday ==== | |||
* Discussion about the mid-term exam (Wed week 5) | |||
* Use of http://openclipart.org (Free SVG drawings) | |||
* Demo of the Inkscape SVG editor, preparing SVG graphics for the Web | |||
* Importing complex drawings in HTML5, see [[Using SVG with HTML5 tutorial]] | |||
==== Homework 4 ==== | ==== Homework 4 ==== | ||
* Create an HTML5+SVG page | * Create an HTML5+SVG page. It must include interesting contents and illustrations. | ||
** You may copy/paste | ** You may copy/paste from some other sources under the condition that do not violate any copyright and that you cite the source. | ||
** You may keep the HTML very simple (ie. only use h1 and p tags) | ** You may keep the HTML very simple (ie. only use h1 and p tags) | ||
* | * You are allowed to copy/paste free SVG images, e.g. from openclipart.org or you can draw them yourself. | ||
* Submit the file to the worldclass room. | * Submit the file to the worldclass room. | ||
HTML5 code fragment | |||
<source lang="XML"> | |||
<img height="100" src="my_sushi.svg" style="float:left;padding:5px 20px 5px 0px;"> | |||
</source> | |||
Main resources: | Main resources: | ||
* [[Using SVG with HTML5 tutorial]] | * [[Using SVG with HTML5 tutorial]] | ||
* [[Static SVG tutorial]] | * [[Static SVG tutorial]] | ||
* [[SVG/SMIL animation tutorial]] or [http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Animating_and_Scripting_SVG | * [[SVG/SMIL animation tutorial]] or [http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Animating_and_Scripting_SVG SVG Essentials/Animating and Scripting SVG] | ||
'''Due: Wednesday week 5 (before start of class)''' | |||
==== Teaching materials, software, and reference manuals ==== | |||
; (1) SVG Tutorials | |||
* See [[SVG]] for finding online tutorials | |||
* [[Static SVG tutorial]] | |||
* [[Using SVG with HTML5 tutorial]] | |||
* [[SVG/SMIL animation tutorial]] (if time left) | |||
* [http://commons.oreilly.com/wiki/index.php/SVG_Essentials SVG Essentials] On-line SVG textbook. Wiki version of J. David Eisenberg (2002), ''SVG Essentials'', O'Reilly | |||
* [[SVG/SMIL animation tutorial]] or [http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Animating_and_Scripting_SVG SVG Essentials/Animating and Scripting SVG] | |||
; (2) HTML Tutorials (if needed) | |||
* [[HTML]] (very short overview) | |||
* [[HTML5]] (overview, what's new) | |||
* [[HTML and XHTML elements and attributes]] | |||
* [http://www.w3.org/MarkUp/Guide/ D. Raggett's HTML 4 tutorial] (outdated, but ok as introduction, use the HTML5 document header) | |||
* [http://diveintohtml5.org/ Dive Into HTML5] by Mark Pilgrim. This is a free draft for the ''HTML 5: Up and running'' book from O'Reilly. ISBN 0596806027. The web site also includes [http://diveintohtml5.org/examples/ code examples], etc. | |||
; (3) SVG-Edit online software | |||
* [http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html svg-edit], Google's Online SVG editor | |||
* [http://www.flamingtext.com/imagebot/editor Imagebot], Make sure to save as SVG | |||
* [http://mondrian.io/ Mondrian] | |||
; (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://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) | |||
[[Category: COAP_2100]] | [[Category: COAP_2100]] |
Latest revision as of 09:58, 10 February 2014
Week 4
Topics covered
- Introduction to static SVG
- Using SVG within HTML5
- Dynamic SVG (if time left, more on week 5)
- Recall of XML principles (well-formed XML)
Monday
- 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
- https://developer.mozilla.org/en/SVG (reference)
Example HTML5/SVG code that you can copy/paste into an editor
<!doctype html>
<html>
<head>
<title>HTML5 SVG demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<h1>HTML5 SVG Demo</h1>
<p> A nice green circle:</p>
<svg id="circle" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="30" cy="30" r="30" fill="green" />
</svg>
</body>
</html>
Wednesday
- Discussion about the mid-term exam (Wed week 5)
- Use of http://openclipart.org (Free SVG drawings)
- Demo of the Inkscape SVG editor, preparing SVG graphics for the Web
- Importing complex drawings in HTML5, see Using SVG with HTML5 tutorial
Homework 4
- Create an HTML5+SVG page. It must include interesting contents and illustrations.
- You may copy/paste from some other sources under the condition that do not violate any copyright and that you cite the source.
- You may keep the HTML very simple (ie. only use h1 and p tags)
- You are allowed to copy/paste free SVG images, e.g. from openclipart.org or you can draw them yourself.
- Submit the file to the worldclass room.
HTML5 code fragment
<img height="100" src="my_sushi.svg" style="float:left;padding:5px 20px 5px 0px;">
Main resources:
- Using SVG with HTML5 tutorial
- Static SVG tutorial
- SVG/SMIL animation tutorial or SVG Essentials/Animating and Scripting SVG
Due: Wednesday week 5 (before start of class)
Teaching materials, software, and reference manuals
- (1) SVG Tutorials
- See SVG for finding online tutorials
- Static SVG tutorial
- Using SVG with HTML5 tutorial
- SVG/SMIL animation tutorial (if time left)
- SVG Essentials On-line SVG textbook. Wiki version of J. David Eisenberg (2002), SVG Essentials, O'Reilly
- SVG/SMIL animation tutorial or SVG Essentials/Animating and Scripting SVG
- (2) HTML Tutorials (if needed)
- HTML (very short overview)
- HTML5 (overview, what's new)
- HTML and XHTML elements and attributes
- D. Raggett's HTML 4 tutorial (outdated, but ok as introduction, use the HTML5 document header)
- Dive Into HTML5 by Mark Pilgrim. This is a free draft for the HTML 5: Up and running book from O'Reilly. ISBN 0596806027. The web site also includes code examples, etc.
- (3) SVG-Edit online software
- (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)