COAP:COAP-2100/week3-2012: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 16: Line 16:
; (1) SVG Tutorials
; (1) SVG Tutorials
* See [[SVG]] for finding online tutorials
* See [[SVG]] for finding online tutorials
* See [[Using SVG with HTML5 tutorial]] for using SVG (Monday class)
* [[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
* You can find a PDF of an SVG book in the worldclassroom / Documents folder



Revision as of 20:15, 3 April 2012

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
(2) HTML Tutorials (if needed)
(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

Monday

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)
  • SVG continued, e.g. simple animations using the SMIL tags.

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: Wednesday week 4 (before start of class)