COAP:COAP-2100/week4: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
mNo edit summary
mNo edit summary
Line 1: Line 1:
Program under construction ...
<categorytree mode="pages" depth="1" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">COAP 2100</categorytree>
 
=== Week 4 ===
 
==== Topics covered ====
 
* Creating simple static SVG (continued)
* Dynamic SVG (part I, continued on week 5)
 
==== 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]]
* [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
 
; (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/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]
 
; (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)
 
==== Classroom activities ====
 
* No Monday class
 
===== Wednesday =====
 
* Discussion about the mid-term exam (Wed week 5)
* Demo of the Inkscape SVG editor (editing the XML)
* 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
 
'''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>
 
 
==== Homework 4 ====
 
* Create an HTML5+SVG 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 at least create two simple animations. You are allowed to copy/paste free SVG code, e.g. from openclipart.org or you can draw them yourself.
* Submit the file to the worldclass room.
 
Main resources:
* [[Using SVG with HTML5 tutorial]]
* [[SVG/SMIL animation tutorial]]
 
'''Due: Wednesday week 5 (before start of class)


[[Category: COAP_2100]]
[[Category: COAP_2100]]

Revision as of 17:04, 10 April 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 4

Topics covered

  • Creating simple static SVG (continued)
  • Dynamic SVG (part I, continued on week 5)

Teaching materials, software and reference manuals

(1) SVG Tutorials
(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

Classroom activities

  • No Monday class
Wednesday
  • Discussion about the mid-term exam (Wed week 5)
  • Demo of the Inkscape SVG editor (editing the XML)
  • The Eisenberg SVG essentials book (SVG Essentials, wiki version)
  • Static SVG continued (parts of the Static SVG tutorial)
  • Dynamic SVG

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>


Homework 4

  • Create an HTML5+SVG 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 at least create two simple animations. You are allowed to copy/paste free SVG code, e.g. from openclipart.org or you can draw them yourself.
  • Submit the file to the worldclass room.

Main resources:

Due: Wednesday week 5 (before start of class)

Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-2100/week4&oldid=38534"