COAP:COAP-2100/week3-2012: Difference between revisions
Jump to navigation
Jump to search
m (→Homework 3) |
|||
(15 intermediate revisions by the same user not shown) | |||
Line 3: | Line 3: | ||
=== Week 3 === | === Week 3 === | ||
==== Topics covered ==== | |||
* Using [[SVG]] within [[HTML5]] | |||
* Crash course on HTML5 (if needed) | |||
* [[SVG]] within [[HTML5]] | * Creating simple static SVG | ||
* SVG in HTML5 | |||
* Dynamic SVG (if time, else on week 4) | |||
* Recall of XML principles (well-formed XML) | |||
==== Teaching materials, software and reference manuals ==== | ==== Teaching materials, software and reference manuals ==== | ||
; (1) SVG Tutorials | ; (1) SVG Tutorials | ||
* See [[SVG]] for the | * See [[SVG]] for finding online tutorials | ||
* [[Using SVG with HTML5 tutorial]] for using SVG (Monday class and homework) | |||
* [[Static SVG tutorial]] (not everything) | |||
* [[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 | |||
* 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]] | |||
* [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) | ||
==== Classroom activities ==== | |||
===== Monday ===== | |||
* Introduction to HTML (if needed) | |||
* 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 | |||
'''Example code that you can copy / paste into an editor''' | |||
<source lang="XML"> | |||
<!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> | |||
</source> | |||
===== Wednesday ===== | |||
* Discussion about the mid-term exam (Wed week 5) | |||
* Demo of the Inkscape SVG editor (if it works in the computer room) | |||
* The Eisenberg SVG essentials book ([http://commons.oreilly.com/wiki/index.php/SVG_Essentials SVG Essentials], wiki version) | |||
* Static SVG continued (parts of the [[Static SVG tutorial]]) | |||
* Dynamic SVG (if time left) | |||
==== Homework 3 ==== | |||
* Create an HTML5 page with some interesting contents | |||
** You may copy/paste from the text from some other source 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) | |||
* Add illustrations made with SVG. You must create a least one simple drawing yourself. For the additional pictures, you are allowed to copy/paste free SVG code, e.g. from openclipart.org or you can draw them yourself. | |||
** Pictures should have an appropriate size | |||
** Small pictures should either float to the left or to the right. | |||
* Submit the file to the worldclass room. | |||
Main resource: [[Using SVG with HTML5 tutorial]] | |||
'''Due: Monday week 5 (before start of class) | |||
[[Category: COAP_2100]] | [[Category: COAP_2100 Archive]] |
Latest revision as of 01:08, 27 January 2014
Week 3
Topics covered
- Using SVG within HTML5
- Crash course on HTML5 (if needed)
- Creating simple static SVG
- SVG in HTML5
- Dynamic SVG (if time, else on week 4)
- Recall of XML principles (well-formed XML)
Teaching materials, software and reference manuals
- (1) SVG Tutorials
- See SVG for finding online tutorials
- Using SVG with HTML5 tutorial for using SVG (Monday class and homework)
- Static SVG tutorial (not everything)
- SVG/SMIL animation tutorial (if time left)
- SVG Essentials On-line SVG textbook. Wiki version of J. David Eisenberg (2002), SVG Essentials, O'Reilly
- 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
Example 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)
- Demo of the Inkscape SVG editor (if it works in the computer room)
- The Eisenberg SVG essentials book (SVG Essentials, wiki version)
- Static SVG continued (parts of the Static SVG tutorial)
- Dynamic SVG (if time left)
Homework 3
- Create an HTML5 page with some interesting contents
- You may copy/paste from the text from some other source 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)
- Add illustrations made with SVG. You must create a least one simple drawing yourself. For the additional pictures, you are allowed to copy/paste free SVG code, e.g. from openclipart.org or you can draw them yourself.
- Pictures should have an appropriate size
- Small pictures should either float to the left or to the right.
- Submit the file to the worldclass room.
Main resource: Using SVG with HTML5 tutorial
Due: Monday week 5 (before start of class)