Class overview :

Class goals :

• Leverage HTML5 to create modern, feature-rich sites with next generation standards
• Improve accessibility and SEO with semantic elements, ARIA and microdata
• Design professional, eye-catching presentations with CSS3
• Build user-friendly forms with new input types and advanced UI controls
• Augment JavaScript-based Web apps with geolocation, local storage, messaging and background processing
• Program engaging interfaces with drag and drop, Canvas-based graphics, audio and video

Content of HTML5: Next Generation Web Development

Advancing Web Standards to the Next Generation

• Demystifying HTML5
• Supporting legacy browsers with polyfils
• Regressive enhancement

Improving Semantics, Accessibility and Forms

Enhancing markup

• Adding structural elements in HTML5
• Maximizing accessibility with semantics and ARIA

Assisting users with form completion

• Guiding input with autofocus and placeholders
• Validating data entry without scripting
• Preventing errors with pickers

Enriching Site Design with CSS3

Manipulating borders and backgrounds

• Grouping content
• Rounded corners
• Gradients
• Images

Creating elaborate effects

• Floating text and boxes with shadows and opacity
• Animating transformations and transitions

Applying Web fonts

• Customizing appearance with downloadable fonts
• Installing fonts with @font-face

Optimizing Page Rank with Microdata

Improving search engine optimization (SEO)

• Employing the Google data vocabularies
• Testing Google Rich Snippets

Scoping and annotating markup

• Offers
• Reviews
• Organizations
• Addresses
• Hiding values in custom data-*attributes

Providing Relevant Content with Geolocation

The geolocation API in JavaScript

• Estimating user latitude and longitude
• Demonstrating geolocation with mapping

Generating location-specific content

• Calculating distance with the haversine formula
• Filtering information by geographic location

Developing with Local and Session Storage, Messages and Web Workers

Persisting data

• Saving key/value pairs in localStorage
• Leveraging JSON, browser databases and object stores

Communicating between windows

• Posting messages across domains
• Processing a message from a different source

Incorporating third-party data with Ajax

• Allowing Cross-Origin Resource Sharing (CORS)
• Accessing external providers with XMLHttpRequest2

Exchanging information with WebSockets

• Overcoming limitations of HTTP
• Pushing data to clients

Increasing responsiveness with asynchronous processing

• Leveraging Web Workers for CPU-intensive code
• Creating a tag cloud using a background process

Simplifying Interaction with Drag and Drop

Dragging elements

• Processing mouse drags
• Transferring data with events

Identifying target destinations

• Enabling drop locations
• Responding to a drop event

Engaging Users with Multimedia Features

Drawing dynamic graphics with Canvas

• Charting with lines and rectangles
• Annotating diagrams with text and images

Alternatives to Canvas

• Mathematical Markup Language (MathML)
• Scalable Vector Graphics (SVG)
• Comparing Canvas to SVG

Enhancing a site with audio

• Embedding audio in a Web page
• Supporting multiple codecs and containers

Adding video to the Web

• Encoding media in an Ogg container
• Converting to H.264 and WebM formats