COAP:COAP-2100/week5: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
mNo edit summary
 
(73 intermediate revisions by the same user not shown)
Line 1: Line 1:
=== Week 5 [[Help:COAP-2100|COAP 2100]] ===
<categorytree mode="pages" depth="1" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">COAP 2100</categorytree>


==== Topics Covered ====
=== Week 5 ===


==== Topics covered ====


==== Teaching materials ====
* Static SVG (continued)
* Dynamic SVG


==== Monday ====


==== Classroom activities ====
* Work on project 4 (See week 4)
* [[Static SVG tutorial]] (grouping constructs)
* [[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
* You can find a PDFs of SVG book chapter in the worldclassroom / Documents folder


==== Wednesday ====


==== Mid-term exam (provisional !) ====
* (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)


You will be allowed to use all materials (open book, open Internet). However, use of websites that allow P2P or other forms of communication is strictly forbidden. Offenders will get an F.
SVG animation hands on:


; Subjects that will be tested
'''<code>animate</code>example code that you can copy / paste into an editor'''
* Be able to find information in the SitePoint HTML and CSS reference
<source lang="XML">
* Understand underlying principles of web formats (HTML, XHTML and CSS)
<?xml version="1.0"?>
* Be able to create HTML code and detect errors
<svg xmlns="http://www.w3.org/2000/svg">
** Required tags: html,body,title,link,style,a,img,h1,h2,h2,p,ul,ol,li,div,span
  <title>Simple animate example</title>
** Required attributes: style + the elementary attributes for the HTML a,img and link tags.
  <desc>Rectangle shape will change</desc>
* Simple CSS styling
  <rect x="50" y="50" width="10" height="100" style="fill:#CCCCFF;stroke:#000099">
** Basic selectors
    <animate attributeName="width"  from="10px"  to="100px"
** Class and IE selector
    begin="0s" dur="10s" />
** Simple boxing properties (not positioning)
    <animate attributeName="height" from="100px" to="10px"
** Simple text properties, e.g. fonts, color
    begin="0s" dur="10s" />
* Simple design principles
  </rect>
** Color schemes
  <text x="50" y="170" style="stroke:#000099;fill:#000099;font-size:14;">
** Testing a web site with users
  Hello. Admire the dynamic rectangle</text>
</svg>
</source>


; Exam type
Simple Motion example using mpath, variant 1 (more difficult):
* The exam will be a quiz with various types of questions(e.g. MCQs, fill-in, debug, short answers)
<source lang="XML">
<?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>
</source>
Simple Motion example using path, variant2
<source lang="XML">
<?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>


==== Homework ====
<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>
</source>
 
==== 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)
 
[[Category: COAP_2100]]

Latest revision as of 20: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"