COAP:COAP-2100/week5: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
(35 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 ===


* Dealing with pictures (some reminders about formats and size)
==== Topics covered ====
* Strategies for dealing with Video formats
* Video with Flash
** Encoding of Flash videos
** Creating Flash files with the video component
** Adding captions (sub-titles) with [[Timed Text]]
* XML (some principles as explained in the [[Editing XML tutorial]])


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


* [http://en.wikipedia.org/wiki/Image_file_formats Image File Formats] (Wikipedia)
==== Monday ====
<!-- * [[Wiki]] and [[Mediawiki]] (background information and links) -->
* [[Video streaming]], [[Multimedia container format]], [[Codec]] (some short background info with links)
* [[Flash video component tutorial]] (only "Video encoding with Flash CS3", "Using the video with the component first method", "Making use of captions")


* 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 ====
==== Web sites to visit ====


; The original
* (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)


* http://c2.com/cgi/wiki?FrontPage WikiWiki
SVG animation hands on:
** Demo page: http://c2.com/cgi/wiki?WikiWikiSandbox


; Online wiki hosting services
'''<code>animate</code>example code that you can copy / paste into an editor'''
 
<source lang="XML">
* http://pbworks.com/ pbWiki, commercial on-line service
<?xml version="1.0"?>
** Demo site: https://atelierwebmaster.pbworks.com/
<svg xmlns="http://www.w3.org/2000/svg">
 
  <title>Simple animate example</title>
* http://wikispaces.com Wikispaces, commercial on-line service
  <desc>Rectangle shape will change</desc>
** Demo site: http://atelierwebmaster.wikispaces.com/
  <rect x="50" y="50" width="10" height="100" style="fill:#CCCCFF;stroke:#000099">
 
    <animate attributeName="width"  from="10px"  to="100px"
; Mediawikis (Wikipedia engine)
    begin="0s" dur="10s" />
 
    <animate attributeName="height" from="100px" to="10px"
* Demo site: http://www.wikimedia.org/
    begin="0s" dur="10s" />
** http://en.wikipedia.org/wiki/Main_Page
  </rect>
** Other Wikimedia sites ...
  <text x="50" y="170" style="stroke:#000099;fill:#000099;font-size:14;">
* Demo site: http://www.wikia.com/
  Hello. Admire the dynamic rectangle</text>
* Demo site: http://edutechwiki.unige.ch/
</svg>
* Demo site: https://developer.mozilla.org/en/Web_Development
</source>
 
-->
 
==== Classroom activities ====
 
; Monday
 
* Images (reminder about formats and size)
 
* Creating Flash videos: [[Flash video component tutorial]]
** Video formats ([[Multimedia container format]])
** http://video.google.com/videoadvancedsearch (Google video search)
** https://addons.mozilla.org/en-US/firefox/addon/3006 (Video download tool, FF extension)
** Video encoding for Flash and Timed Text ([[Flash video component tutorial]], only "Video encoding with Flash CS3", "Using the video with the component first method", "Making use of captions")


Code template for timed text:
Simple Motion example using mpath, variant 1 (more difficult):
<source lang="actionscript">
<source lang="XML">
<?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="UTF-8"?>
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1"
<svg xmlns="http://www.w3.org/2000/svg"  
    xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
    xmlns:xlink="http://www.w3.org/1999/xlink">
   <head><styling></styling></head>
   <title>Simple Motion animation example</title>
  <body>
  <div xml:lang="en">
<rect x="15" y="5" rx="5" ry="5" width="20" height="10" style="fill:#CCCCFF;stroke:#000099">
      <p begin="1" dur="4">Let´s start</p>
    <animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
 
      <mpath xlink:href="#path1"/>
    </div>
    </animateMotion>
  </body>
  </rect>
</tt>
<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>
</source>
Code template for times text (advanced):
Simple Motion example using path, variant2
<source lang="actionscript">
<source lang="XML">
<?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tt SYSTEM "mini-tt.dtd">
<svg xmlns="http://www.w3.org/2000/svg"  
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
   <title>Simple Motion animation example</title>
   <head>
 
    <styling>
<rect x="15" y="5" rx="5" ry="5" width="20" height="10"
      <style id="title" tts:backgroundColor="transparent" tts:color="red" tts:fontSize="24"/>
      style="fill:#CCCCFF;stroke:#000099">
    </styling>
      <animateMotion dur="6s" repeatCount="indefinite" rotate="auto"
  </head>
                      path ="m21,39c0,0 46,-44 79,-1c33,43 62,58 97,26c35,-32 86,-30 86,-31c0,-1 61,-9 29,43c-32,
  <body>
                      52 -19,51 -87,51c-68,0 -158,-5 -158,-6c0,-1 -40,-11 -41,-12"/>
  <div xml:lang="en">
  </rect>
      <p begin="0" dur="9" style="title">Something</p>
</svg>
      <p begin="30" dur="5">My
        <span tts:backgroundColor="yellow" tts:color="black">
        something</span>
      </p>
      <p begin="35" dur="5">
        <span tts:backgroundColor="transparent"></span>
        Working hard ....
      </p>
      <p begin="40" dur="4">The outside (not my bike)</p>
    </div>
  </body>
</tt>
</source>
</source>
* HTML 5 Video tag (short info)
<!--
* Wikis: the concept, variants
** Visit of some wikis (see wikisites above) + hands-on
** Wikimedia and the [[Mediawiki]] engine, including some visits and hands on Mediawiki
** Wiki politics (editing guidelines and governance)
** Easy online wiki hosting (see [[Wiki#Wiki_hosting Wiki]] (Wiki hosting section)
-->
; Wednesday
* Homework 3 feedback (15 min.)
* [[COAP-2100/term project|Term project]] assignment and discussion (15 min.)
* Break (10 min.)
* Mid-term (see below) (80 minutes, 90 minutes max!)


==== Homework 5 ====
==== Homework 5 ====


Create a Flash video with captions.
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
Details to be announced. (I first will see what we manage to get done in Monday week 5 class)
* 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)
Due: Wednesday, week 6
 
==== Mid-term exam ====
 
You will be allowed to use all materials (open book, open Internet). However, use of communication software (including websites like Facebook) is strictly forbidden. Offenders will get an F.
 
; Subjects that will be tested
* Be able to find information in the Firefox Codeburner/SitePoint HTML and CSS reference
* Understanding of principles underlying web formats (HTML, XHTML and CSS) including some of the history
* Be able to create simple HTML code and detect errors
** DocType declarations (superficially, e.g. understand the difference between the strict and transitional HTML4x/XHTML1x models)
** Required tags: ''html,body,title,link,style,a,img,h1,h2,h2,p,blockquote,ul,ol,li,div,span''
** Required attributes: style + the elementary attributes of the HTML ''a'', ''img'' and ''link'' tags + class + id
** Notice: I may design an exam question that asks you to find the definition of another HTML tag or attribute.
* Simple CSS styling
** Basic selectors (tag names)
** Class and ID selectors (.xxx and .#xxx)
** Simple boxing properties (i.e. margins, not positioning)
** Simple text properties, e.g. fonts, color, font-family, line spacing, left/right/center alignment
* Color models
** Basic principles of RGB, RGBa, HSL and HSLa (''not'' HSV) and use of color models for CSS color and background-color values. E.g. you should know that RBG combines amount of three colors, that HSL is a color on the "360 color wheel" plus saturation and light. E.g. you should know that alpha means transparency.
** Be able to find a RGB hex value for a given color name and the other way round (using any tool/table you like)
* Simple design principles
** Be able to comment on a web site design
** Be able to state basic usability principles (what does it mean ?)
** What do we mean be wireframing
** Use of color palettes (basic principles)
** Testing a web site with users (basic principles)
<!--
* XML
** Roles of XML, types of XML languages
** XML Formalism, wellformedness
** The concept of XML grammars and validity (no technical details about DTDs, XML Schemas, etc.)
-->
<!--
* Wikis
** Principles, i.e. what is a wiki, in which contexts are they popular, kinds of wiki engines (roughly)
** Mediawikis (create a page, titles, paragraphs and list, internal and external links, categories, simple use of pictures)
** Wiki governance (editing policies)
-->


; Exam type
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.
* The exam will be a quiz with various types of questions(e.g. MCQs, fill-in, debug, short answers)
* Tip: Most answers can be found in the [[Help:COAP-2100#Index_of_important_teaching_materials|teaching materials]] available in this wiki.


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


(none this week, hw4 is due next Monday, see week 4)
[[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"