HTML5: Next Generation Web Development

Enhancing Websites with Emerging Technologies

Course 2320 • 4 Days

E-mail E-mail Print Print Q&A Q&A PDF PDF Facebook Twitter Twitter

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

Course Benefits

HTML5 empowers organisations to harness the future of web development today while supporting legacy browsers. Providing specifications to improve accessibility, search engine optimisation (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.

Who Should Attend

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.

Hands-On Training

Practical hands-on exercises provide experience in creating modern, attractive sites with HTML5, CSS3 and JavaScript. Exercises include:

Improving semantics, accessibility and SEO with markup
Preventing user error with validation and pickers
Creating a 3-D effect with borders, shadows and fonts
Customising 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

Course Content

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
Maximising 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

Customising appearance with downloadable fonts
Installing fonts with @font-face

Optimising Page Rank with Microdata

Improving search engine optimisation (SEO)

Employing the Google data vocabularies
Testing Google Rich Snippets

Scoping and annotating markup

Offers
Reviews
Organisations
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

<< Back to Web Development, XML, and Adobe Products

Related Courses

Learning Tree AnyWare^TM is a trademark of Learning Tree International, Inc. in the United States and other countries, and is covered by a patent application pending in the United States.

Course Dates

Most events below can be taken in-class or live, online from your home or office with AnyWare.

UK Dates
29 May - 1 Jun	London enrol
28 - 31 Aug	London enrol
27 - 30 Nov	London enrol
12 - 15 Feb	London enrol
30 Apr - 3 May	London enrol
US East Coast Dates
17 - 20 Jul	New York enrol*
31 Jul - 3 Aug	Washington, DC enrol*
21 - 24 Aug	Washington, DC enrol*

*Work and train on the same day! Attend live US East Coast Courses online from 2pm to 9pm GMT.

For AnyWare enrolments, please register at least 7 days prior to the start of the course.

Note: The exercise material in this course is not currently compatible with the Mac operating system.

More Dates and Locations.

Tuition for Course 2320 (4 Days)

Standard Fee £1,925

Saving Options

Bring this or any Learning Tree Course on-site to your location!

"The HTML5 course taught by Learning Tree provides hands-on training for real-world problems. With the information provided by Learning Tree, I can jump right into the issue with little to no learning curve".

– C. Cooke
Sr. Software Developer
SAIC