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

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 43: Line 43:
* Repairing clip art from openclipart.org with Inkscape (export "as SVG")
* Repairing clip art from openclipart.org with Inkscape (export "as SVG")
* Scaling SVG graphics
* Scaling SVG graphics
'''Example code that you can copy / paste into an editor'''
<source>
<!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
; Wednesday

Revision as of 21:28, 1 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 3

Topics covered

  • Using SVG within HTML5
  • Crash course on HTML5 (if needed)
  • Creating simple SVG
  • Recall of XML principles (well-formed XML)

Teaching materials, software and reference manuals

(1) SVG Tutorials
  • See SVG for finding online tutorials
  • See Using SVG with HTML5 tutorial for using SVG (Monday class)
  • You can find a PDF of an SVG book in the worldclassroom / Documents folder
(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 <source> <!doctype html> <html> 

 <head>
   <title>HTML5 SVG demo</title>
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 </head>

 <body>

HTML5 SVG Demo

A nice green circle:

   <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
  • Details TBA on Wednesday.

Due: Wednesday week 4 (before start of class)

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