COAP:COAP-2100/week4: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
(3 intermediate revisions by the same user not shown)
Line 45: Line 45:


* Discussion about the mid-term exam (Wed week 5)
* Discussion about the mid-term exam (Wed week 5)
* Demo of the Inkscape SVG editor (if it works in the computer room)
* Use of http://openclipart.org (Free SVG drawings)
* The Eisenberg SVG essentials book ([http://commons.oreilly.com/wiki/index.php/SVG_Essentials SVG Essentials], wiki version)
* Demo of the Inkscape SVG editor, preparing SVG graphics for the Web
* Static SVG continued (parts of the [[Static SVG tutorial]])
* Importing complex drawings in HTML5, see [[Using SVG with HTML5 tutorial]]
* Dynamic SVG (if time left)
 
; (1) SVG Tutorials
* See [[SVG]] for finding online tutorials
* [[SVG/SMIL animation tutorial]] or [http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Animating_and_Scripting_SVG SVG Essentials/Animating and Scripting SVG]
* [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
* Demo of the Inkscape SVG editor (editing the XML)
* https://developer.mozilla.org/en/SVG (reference)
 
'''Example code that you can copy / paste into an editor'''
<source lang="XML">
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <title>Simple animate example</title>
  <desc>Rectangle shape will change</desc>
  <rect x="50" y="50" width="10" height="100" style="fill:#CCCCFF;stroke:#000099">
    <animate attributeName="width"  from="10px"  to="100px"
    begin="0s" dur="10s" />
    <animate attributeName="height" from="100px" to="10px"
    begin="0s" dur="10s" />
  </rect>
  <text x="50" y="170" style="stroke:#000099;fill:#000099;font-size:14;">
  Hello. Admire the dynamic rectangle</text>
</svg>
</source>
 
 


==== Homework 4 ====
==== Homework 4 ====
Line 84: Line 56:
* You are allowed to copy/paste free SVG images, e.g. from openclipart.org or you can draw them yourself.
* You are allowed to copy/paste free SVG images, e.g. from openclipart.org or you can draw them yourself.
* Submit the file to the worldclass room.
* Submit the file to the worldclass room.
HTML5 code fragment
<source lang="XML">
<img height="100" src="my_sushi.svg" style="float:left;padding:5px 20px 5px 0px;">
</source>


Main resources:  
Main resources:  
Line 103: Line 80:


; (2) HTML Tutorials (if needed)
; (2) HTML Tutorials (if needed)
* [[HTML]] (very short overview)
* [[HTML5]] (overview, what's new)
* [[HTML and XHTML elements and attributes]]
* [[HTML and XHTML elements and attributes]]
* [http://www.w3.org/MarkUp/Guide/ D. Raggett's HTML 4 tutorial] (outdated, but ok as introduction, use the HTML5 document header)
* [http://www.w3.org/MarkUp/Guide/ D. Raggett's HTML 4 tutorial] (outdated, but ok as introduction, use the HTML5 document header)
* [http://diveintohtml5.org/ Dive Into HTML5] by Mark Pilgrim. This is a free draft for the ''HTML 5: Up and running'' book from O'Reilly. ISBN 0596806027. The web site also includes [http://diveintohtml5.org/examples/ code examples], etc.


; (3) SVG-Edit online software
; (3) SVG-Edit online software

Latest revision as of 09:58, 10 February 2014

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

  • Introduction to static SVG
  • Using SVG within HTML5
  • Dynamic SVG (if time left, more on week 5)
  • Recall of XML principles (well-formed XML)


Monday

Example HTML5/SVG 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

Homework 4

  • Create an HTML5+SVG page. It must include interesting contents and illustrations.
    • You may copy/paste from some other sources 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)
  • You are allowed to copy/paste free SVG images, e.g. from openclipart.org or you can draw them yourself.
  • Submit the file to the worldclass room.

HTML5 code fragment 

<img height="100" src="my_sushi.svg" style="float:left;padding:5px 20px 5px 0px;">

Main resources:

Due: Wednesday week 5 (before start of class)

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
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-2100/week4&oldid=50806"