COAP:COAP-2100/week5: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
(6 intermediate revisions by the same user not shown)
Line 10: Line 10:
==== Monday ====
==== Monday ====


* Work on project 4 (See week 4)
* [[Static SVG tutorial]] (grouping constructs)
* [[Static SVG tutorial]] (grouping constructs)
* [[SVG/SMIL animation tutorial]]
* [[SVG/SMIL animation tutorial]] (demos)
* [http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Animating_and_Scripting_SVG SVG Essentials/Animating and Scripting SVG], part of [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
* [http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Animating_and_Scripting_SVG SVG Essentials/Animating and Scripting SVG], part of [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 PDFs of SVG book chapter in the worldclassroom / Documents folder
* You can find a PDFs of SVG book chapter in the worldclassroom / Documents folder


Simple Motion example using mpath:
==== Wednesday ====
 
* (Short) discussion of term projects
* [[SVG/SMIL animation tutorial]] (try it yourself)
* [[Interactive SVG-SMIL animation tutorial]] (interactivity demo)
* [[Using Inkscape for web animation]] (some tips on preparing complex SVG files for animation)
 
SVG animation hands on:
 
'''<code>animate</code>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>
 
Simple Motion example using mpath, variant 1 (more difficult):
<source lang="XML">
<source lang="XML">
<?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="UTF-8"?>
Line 32: Line 59:
  </svg>
  </svg>
</source>
</source>
Simple Motion example using path
Simple Motion example using path, variant2
<source lang="XML">
<source lang="XML">
<?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="UTF-8"?>
Line 42: Line 69:
       style="fill:#CCCCFF;stroke:#000099">
       style="fill:#CCCCFF;stroke:#000099">
       <animateMotion dur="6s" repeatCount="indefinite" rotate="auto"
       <animateMotion dur="6s" repeatCount="indefinite" rotate="auto"
      path ="m21,39c0,0 46,-44 79,-1c33,43 62,58 97,26c35,-32 86,-30 86,-31c0,-1 61,-9 29,43c-32,
                      path ="m21,39c0,0 46,-44 79,-1c33,43 62,58 97,26c35,-32 86,-30 86,-31c0,-1 61,-9 29,43c-32,
              52 -19,51 -87,51c-68,0 -158,-5 -158,-6c0,-1 -40,-11 -41,-12"/>
                      52 -19,51 -87,51c-68,0 -158,-5 -158,-6c0,-1 -40,-11 -41,-12"/>
   </rect>
   </rect>
  </svg>
  </svg>
</source>
</source>


==== Wednesday ====
==== Homework 5 ====
 
'''Midterm exam'''
 
* Subject area: SVG
* Type of exam: SVG file that you will have to complete according to instructions
* Open book. You may use both print texts and the Internet
 
Items that may be tested
* SVG embedding in HTML
* Graphic primitives (only the ones shown in my examples): '''rect, circle, ellipse, line, polyline''', '''polygon''' and '''text''')
** Attributes you should know: position and size attributes, opacity, fill and stroke
* Grouping and reusing: '''Defining an "id"''', '''g''' and '''use'''
** Make sure to master the ''transform'' attribute (scaling, rotation, and translation)
* Simple animation: '''animate'''
** Attributes for animate: to, from, values, dur, begin, end, fill, attributeName, xlink:href, repeatCount
 
'''Not tested'''
* The "path" language. However, I may ask you to copy/paste a path from the online [http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html SVG-edit tool] or change its style (e.g. the color).
 
'''Preparation:'''
 
Textbook chapters (you can ignore elements that did not present in class)
* http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Basic_Shapes
* http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Document_Structure
* http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Animating_and_Scripting_SVG (Only the animate tag, in particular: ignore the scripting)
 
'''Important''': If you want to print these textbook chapters, use the PDF that is in the Documents folder of the World Classroom. You are allowed to bring it to the exam ....


Wiki pages:
Create either an HTML5/SVG page, a HTML5 page that includes SVG, or a pure SVG page that includes some animation:
* [[Using SVG with HTML5 tutorial]] (mandatory reading, not covered in the text book)
* The page should include at least 2 animations
* [[Static SVG tutorial]] (read SVG_Essentials/Basic_Shapes and Document_Structure if something is not clear)
* The animation should be useful in one way or another. You can explain the purpose of the animation either within the page or by other means (e.g. through a comment in the world classroom)
* [[SVG/SMIL animation tutorial]] (only sections that concern the animate element, read VG_Essentials/Animating_and_Scripting_SVG if something is not clear)
* Bonus: Some interactivity (e.g. a mouse click or mouse over)


==== Homework ====
You either can create your own drawing using any SVG tool or add animation to a clipart file from http://openclipart.org. If you use external resources, please cite, e.g. in the SVG code using the ''desc'' element.


None for this week. See homework 4, week4
Due: Wednesday week 6 before class (upload to the world classroom)


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

Latest revision as of 19:46, 12 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 5

Topics covered

  • Static SVG (continued)
  • Dynamic SVG

Monday

Wednesday

SVG animation hands on:

animateexample code that you can copy / paste into an editor 

<?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>

Simple Motion example using mpath, variant 1 (more difficult): 

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Simple Motion animation example</title>
 
 <rect x="15" y="5" rx="5" ry="5" width="20" height="10" style="fill:#CCCCFF;stroke:#000099">
    <animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
       <mpath xlink:href="#path1"/>
    </animateMotion>
   </rect>
 <path id="path1" d="m21,39c0,0 46,-44 79,-1c33,43 62,58 97,26c35,-32 86,-30 86,-31c0,-1 61,-9 29,43c-32,
                     52 -19,51 -87,51c-68,0 -158,-5 -158,-6c0,-1 -40,-11 -41,-12" 
                     stroke-width="5" stroke="#000000" fill="none"/>
 </svg>

Simple Motion example using path, variant2 

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Simple Motion animation example</title>

 <rect x="15" y="5" rx="5" ry="5" width="20" height="10"  
       style="fill:#CCCCFF;stroke:#000099">
       <animateMotion dur="6s" repeatCount="indefinite" rotate="auto"
                      path ="m21,39c0,0 46,-44 79,-1c33,43 62,58 97,26c35,-32 86,-30 86,-31c0,-1 61,-9 29,43c-32,
                      52 -19,51 -87,51c-68,0 -158,-5 -158,-6c0,-1 -40,-11 -41,-12"/>
   </rect>
 </svg>

Homework 5

Create either an HTML5/SVG page, a HTML5 page that includes SVG, or a pure SVG page that includes some animation:

  • The page should include at least 2 animations
  • The animation should be useful in one way or another. You can explain the purpose of the animation either within the page or by other means (e.g. through a comment in the world classroom)
  • Bonus: Some interactivity (e.g. a mouse click or mouse over)

You either can create your own drawing using any SVG tool or add animation to a clipart file from http://openclipart.org. If you use external resources, please cite, e.g. in the SVG code using the desc element.

Due: Wednesday week 6 before class (upload to the world classroom)

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