COAP:COAP-2100/week5: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
mNo edit summary
Line 141: Line 141:
** Be able to comment on a web site design
** Be able to comment on a web site design
** Be able to state basic usability principles (what does it mean ?)
** Be able to state basic usability principles (what does it mean ?)
** What do we mean be wireframing
** What do we mean by wireframing
** Use of color palettes (basic principles)
** Use of color palettes (basic principles)
** Testing a web site with users (basic principles)
** Testing a web site with users (basic principles)

Revision as of 11:27, 8 February 2011

Week 5 COAP 2100

Topics Covered

  • Dealing with pictures (some reminders about formats and size)
  • 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


Classroom activities

Monday
  • Images (reminder about formats and size)

Code template for timed text: 

<?xml version="1.0" encoding="UTF-8"?>
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1"
    xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
  <head><styling></styling></head>
  <body>
   <div xml:lang="en">
      <p begin="1" dur="4">Let´s start</p>

    </div>
  </body>
</tt>

Code template for times text (advanced): 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tt SYSTEM "mini-tt.dtd">
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1"
    xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
  <head>
    <styling>
      <style id="title" tts:backgroundColor="transparent" tts:color="red" tts:fontSize="24"/>
    </styling>
  </head>
  <body>
   <div xml:lang="en">
      <p begin="0" dur="9" style="title">Something</p>
      <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>
  • HTML 5 Video tag (short info)


Wednesday
  • Homework 3 feedback (15 min.)
  • Term project assignment and discussion (15 min.)
  • Break (10 min.)
  • Mid-term (see below) (80 minutes, 90 minutes max!)

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.

Teaching material can be found in each weekly program. The most important handouts are listed on the COAP main page.

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 by wireframing
    • Use of color palettes (basic principles)
    • Testing a web site with users (basic principles)
Exam type
  • 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 teaching materials available in this wiki.

Homework 5

Create a Flash video with captions

  • Encode a video with the Flash or the Adobe Media encoder (remove unwanted start/end of the film and select an appropriate output format)
  • Prepare a flash "movie clip" that includes playback with the video component plus captions.
  • You can choose any film you like, but preferably one that you made yourself (originality bonus)

Bonus points: Extra elements in the Flash page, interesting captions, good timing, etc. I.e. the result should look professional and be useful.

I suggest that those who already turned in 3-4 homeworks skip this exercice. I will not test Flash in the final exam. I only require that you have some very basic understanding of timed text (i.e. use the "p" tag to define start and duration of captions ....)

When you upload the result, make sure to include all files needed to see the Flash clip, i,e, html, swf, component swf, flv, js. To get this right, I suggest to use a new folder for this project.

Due: Wednesday, week 6

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