COAP:COAP-2100/week3-2012

The educational technology and digital learning wiki
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

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)
  • 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)