demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

New Course: Transitioning to HTML5

courses

Estimated reading time: 2 minutes, 17 seconds

This is the outline for a new night course I will be teach at SAIT, starting September 29, 2011. I've touched on some of the topics featured in the outline in this blog; others are completely new, and are yet to be addressed in any articles. Prerequisites for the course will be XHTML (CMPN 215, "Web Page Design and Management") and CSS (CMPN 266). Pre-requisite waivers will be provided for applicants with an appropriate background.

Course Outline: Transitioning to HTML5

  1. Introduction to HTML5
    Introduction
    HTML5 is the successor to XHTML, and introduces dozens of new tags. It also changes many of the rules that you have used until now. Comprehending why HTML5 has been introduced, how it came to be, and what it replaces allows us to understand the appropriate uses of HTML5.
    Learning Outcome:
    Create a basic valid HTML5 document.
    Objectives
    1. Discuss the history of HTML development to HTML5
    2. Elucidate the goals of HTML5
    3. Summarize the differences between XHTML and HTML5
    4. Discuss HTML5’s new semantic container elements
    5. Convert a simple XHTML document to HTML5
    6. Write an HTML5 page from scratch that includes semantic containers
  2. HTML5 Rich Media
    Introduction
    Some of the most revolutionary advances of HTML5 are the <audio> , <video> and , <canvas> tags, which allow for in-browser support of rich media without the need for plugins.
    Learning Outcome:
    Embed rich media on an HTML5 page for multiple browsers.
    Objectives
    1. Define a codec and the current state of play for support of codecs by different browsers.
    2. Discover free programs for encoding audio and video for HTML5.
    3. Embed video and audio in a web page for different browsers.
    4. Discuss fallback options for older browsers.
    5. Create simple playback controls for audio and video with JavaScript.
    6. Use the <canvas> element on a web page.
  3. HTML5 Forms
    Introduction
    HTML5 introduces a dozen new input types to forms, making far richer web forms possible and potentially eliminating a great deal of JavaScript.
    Learning Outcome
    Create a valid HTML5 form.
    Objectives
    1. Use HTML5 inputs in a form
    2. Use the placeholder and autofocus attributes
    3. Explore in-browser validation
    4. Use JavaScript fallbacks for older browsers that do not support HTML5 forms.
  4. CSS and JavaScript for HTML5
    Introduction
    While most older browsers can display HTML5 elements, they do not always know how to do so. We can use CSS and/or JavaScript to help older browsers understand and display HTML5 tags.
    Learning Outcome
    Write a stylesheet for an HTML5 page.
    Objectives
    1. Write a stylesheet to support the display of HTML5 elements.
    2. Use a JavaScript “shim” to support HTML5 in Internet Explorer
    3. Write CSS to customize the appearance of HTML5 tags in browsers.
  5. HTML5 Microdata and Microformats
    Introduction
    Traditional metatags have largely been replaced in HTML5 by microdata and microformats, which allow far more specific and richer semantic markup of web pages.
    Learning Outcome
    Write microdata and microformats on a web page.
    Objectives
    1. Compare and contrast microdata, microformats, RDFa and metatags
    2. Add microdata to appropriate content (a meeting schedule) on a web page.
    3. Add microformats to appropriate content (recipes, resumes) on a web page.
comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.