HTML 5 : Next Generation Web Development - 4 Days Enhancing ...

unevenfitterInternet and Web Development

Jun 20, 2012 (4 years and 9 months ago)


HTML5: Next Generation Web Development - 4 Days
Enhancing Websites with Emerging Technologies
Course 2320 Overview
You Will Learn How To • 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
HTML5 empowers organizations to harness the future of web development today while supporting legacy
browsers. Providing specifications to improve accessibility, search engine optimization (SEO), multimedia
and user-friendly forms, HTML5 takes web applications to a new dimension. In this course, you build
standards-compliant, responsive web pages with the next generation of JavaScript Application Programming
Interfaces (APIs) to improve the performance and user experience of your site.
Course Benefits
Web designers and developers interested in upgrading their sites to HTML5. Knowledge of HTML and CSS
at the level of Course 470, "Developing a Website," as well as prior JavaScript experience are assumed.
Who Should Attend
Practical hands-on exercises provide experience in creating modern, attractive sites with HTML5, CSS3 and
JavaScript. Exercises include:
Hands-On Training
• Improving semantics, accessibility and SEO with markup
• Preventing user error with validation and pickers
• Creating a 3-D effect with borders, shadows and fonts
• Customizing the user experience with location-specific content
• Persisting JSON data in browser storage
• Pushing content to the client with webSockets
• Depicting data graphically with the Canvas API
HTML5: Next Generation Web Development - 4 Days
Enhancing Websites with Emerging Technologies
Course 2320 Outline
Advancing web Standards to the Next
• Demystifying HTML5
• Supporting legacy browsers with polyfils
• Regressive enhancement
Improving Semantics, Accessibility and
Enhancing markup
• Adding structural elements in HTML5
• Maximizing accessibility with semantics
and ARIA
Assisting users with form completion
• Guiding input with autofocus and
• 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
• 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
The geolocation API in JavaScript
• Estimating user latitude and longitude
• Demonstrating geolocation with mapping
Generating location-specific content
• Calculating distance with the haversine
• Filtering information by geographic
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
Incorporating third-party data with Ajax
• Allowing Cross-Origin Resource Sharing
• Accessing external providers with
Exchanging information with webSockets
• Overcoming limitations of HTTP
• Pushing data to clients
Increasing responsiveness with asynchronous
• Leveraging Web Workers for
CPU-intensive code
• Creating a tag cloud using a background
Simplifying Interaction with Drag and
Dragging elements
• Processing mouse drags
• Transferring data with events
Identifying target destinations
• Enabling drop locations
• Responding to a drop event
Engaging Users with Multimedia
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