CS 50.12 HTML 5 :: Interactive Web Pages

Introduction Assignment :: Due 9/1/11 :: 20 points

HTML5 Documents :: due 9/8/11 :: 40 points

  • Create a document that conforms to HTML5 standards and has the following elements: [30pts]
    doctype, html, meta (in the revised html5 format)
    header, hgroup, aside, section, nav, footer, figure, figcaption, time

  • Run your page through the outline simulator at http://gsnedders.html5.org/outliner/then post to the class message board about your experiences in playing with the code and seeing the outliner change. [5pts]

  • Create a homework page and post that page address on the class message board. for this first assignment include your name, section # and a link to the page described above. I will make a page that links to everyone's homework page after they have been submitted. [5pts]

Additional technologies CSS3 :: due 9/15/11 :: 40 points

  • Create a sampler of the following properties:
    nth selector, @font-face, text-shadow, border-radius, box-shadow, gradient, multiple backgrounds [30pts]

  • incorporate 3-5 CSS3 properties into the page you created last week. [10pts]

  • Run your page through the validator at HTML5 validator - http://html5.validator.nu/

  • Add links to your homework page that link to the new web pages you created

Advanced CSS3 capability transform & transitions :: due 9/22/11 :: 40 points

  • Create a sampler of the CSS3 transitions: scale, skew, rotate, translate [15pts]

  • Create a sampler of one transition, rotate, skew, scale or translate and show the various settings you can use to modify that transition. Include 2-3 examples that animate the transformation. [15pts]

  • Incorporate 2-3 CSS3 transitions into the page you created last week. [10pts]

  • Add links to your homework page that link to the new web pages you created

CSS3 / JQuery Slideshows :: due 9/29/11 :: 40 points

  • Create a sampler of the 4 slideshows. You can either use the ones I demonstrated in class or if you are looking for a challenge, you can try one of the extra ones I have linked to in the lesson.

  • Add links to your homework page that link to the new web pages you created

Sample form :: due 10/06/11 :: 40 points

  • Create a form with the new input types:
    email, search, url, tel, number, date, time, datetime, week, month, color. Also use range, min, max, and value at least once on the form

  • Include new attributes of autofocus, autocomplete, placeholder, pattern, required

  • Add CSS styles for pseudo classes of valid, invalid, and required

  • Add links to your homework page that link to the new web page you created

Advanced form :: due 10/13/11 :: 40 points

  • Create a form with the new element of datalist, progress, meter and output
    [10 pts]

  • Add a form to your live page and make sure at least 10 of the new features are included and there is an animation. [20 pts]

  • Test your forms on 2 of the 3 smart phone emulators and post your comments to the class message board. [10pts]

  • Optional - add JavaScript code to make the form perfrom in IE as it does in Opera or Safari.

  • Add links to your homework page that link to the new web page you created

Video :: due 10/20/11 :: 40 points

  • Add 1 video to your live site. the video must be displayed in 2 formats (mp4 and ogg, webm is optional). Include at least 3 attributes and the Flash embed code which will allow the video to run on older versions of the browser.
    [20 pts]

  • Create a video sampler that has code for the following attributes, preload, autoplay, loop, poster, height and width, background. [20 pts]

  • Add links to your homework page that link to the new web page you created.

Midterm Exam :: due 10/27/11 :: 50 points

Take Exam Here :: please note, you have 1 hour to complete the exam

Audio :: due 11/03/11 :: 30 points

Create an audio sampler with audio files saved in the m4a and oga formats and include the atttributes of preload, autoplay and loop. [10 pts]

Modify the live site video so that the controls have a play/pause button, load progress, play progress and current / duration time. [20 pts]

Canvas :: due 11/10/11 :: 40 points

Create a sample page which is similar to the "hello world" created in class. Use the canvas element, create a style for the canvas tag and then use JavaScript to draw a rectangle that has a fill and a stroke.[5 pts]

Create 2 overlapping shapes and make the upper shape have a transparent color so we can see overlap. [5 pts]

Use canvas and Javascript to draw a stick figure that includes a head, face, and body. [20 pts]

Post to the class message board by answering the "Canvas Survey" post. [10pts]

Canvas Graphs:: due 11/17/11 :: 40 points

Create 4 graphs:
1. a bar graph (you can use the one I demonstrated in class)
2. a horizontal graph that has animation (you can use the one I demonstrated in class)
3. in interactive graph (you can use the one I demonstrated in class)
4. a graph from the effects page (you CANNOT use the one I demonstated in lab)

When creating these graphs you must modify the colors or labels of each graph. Please create links from your homework page to these 4 examples.

Canvas Advanced Graphs:: due 12/1/11 :: 40 points

Vote for what you want to learn on Dec. 1 & 8th. Post your choices at the class message boardn. Look for the "What to do for 2 weeks" post. DUE 11/24

Create a graphs that is dynamicaly drawn using a select / option tag: [20pts]

Create 4 table to chart graphs based on the table to chart Javadcript code which is included in the GvChart plugin. [20pts]


CSS / HTML5 and Javascript Tricks :: due 12/8/11 :: 40 points

Please create the following 4 files based on the samples demonstrated in the lesson.

Accordion [10 pts]

Toggle tabs [10 pts]

Horizontal drop down [10prs]

Meg drop down [10 pts]

Odds and Ends :: due 12/18/11 :: 40 points

Geolocation [10 pts]

Editable content areas [10 pts]

Swapping classes [10 pts]

Drag and Drop [10 pts]

Last Class "show and tell" practical portion of final :: due 12/15/11

On Dec 15th we will meet in class to do a "show and tell" - where everyone finds an HTML 5 / CSS3 / Javascript resource and we share it with the class.

We have 29 students enrolled - if everyone takes 10 minutes we will need 290 minutes which would be close to 5 hours. So.... I would like folks to pair off into groups of 2 and then we will need 140 - 150 minutes (which will work out perfectly since we have the lab time)

During the 10 minutes you can demonstrate something cool about HTML 5 you have discovered. Linda McBee and Dustin already have their thing. Linda can show us the Illustrator plug in and Dustin Adobe Edge. The smart move is to sign up now to be their partners. 80 points



Final Exam / Feedback form :: Due 12/12/21/11 :: 50 points

Final exam will be taken online