Training HTML5: Next Generation Web Development – 1 day

Class overview :

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.

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

Onze voordelen :

  • Type of training: Inter-company, intra-company and individual
  • 100% flexible & personalised training : You choose the place, the dates and the training program
  • Offer request : Response within 24 hours
  • 50% discount for SME’s from Brussels-Capital Region
  • Free parking, lunch & drinks
  • Free use of our Digital Competence Centre: Manuals, courses, exercises, …

PIXYSTREE SCS

Rue Beeckmans, 53
1180 Bruxelles

Tel : +32 2 412 04 10
Fax : +32 2 412 04 19
Gsm : +32 485 212 722
Email : selossej@pixystree.com

http://www.pixystree.com

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s