Tag Archives: html5

All trainings in Brussels, Training Development

Training HTML5: Next Generation Web Development – 1 day

Leave a comment

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

All trainings in Brussels, Training Development

Training Comprehensive HTML5 Training – 4 days

Leave a comment

Class overview :

In this comprehensive HTML5 class, you will learn to learn to use HTML5 to develop modern websites.

Class goals :

  • Learn how to start building HTML5 pages today.
  • Learn the major benefits of HTML5.
  • Understand the difference between HTML5 and HTML 4.
  • Become familiar with HTML5′s new elements and attributes.
  • Learn to work with audio and video in HTML5.
  • Learn to work with HTML5′s new Canvas element to create code-based drawings.
  • Learn to use Web Storage for offline applications.
  • Learn to use all the cool new HTML5 form elements.
  • Learn the current state of browser support for HTML5 and how to make your HTML5 sites degrade gracefully.
  • Learn to acquire the users location with the geolocation API.
  • Learn to send messages between web pages and cross-domain with the Web Messaging API.
  • Learn to speed up slow web pages with Web Workers.
  • Learn to implement Drag and Drop.
  • Learn to use Web Applications while offline.
  • Learn to use the XMLHttpRequest Level 2 to access cross-domain resources.
  • Understand Web Sockets.
  • Learn to work with user Server-Sent events to update a web page.

Content of Comprehensive HTML5 Training

  1. Laying out a Page with HTML5
    1. Page Structure
      1. Laying out a Page with HTML 4 – the « old » way
      2. Laying out a Page with HTML5
    2. New HTML5 Structural Tags
    3. Page Simplification
  2. HTML5 – How We Got Here
    1. The Problems HTML 4 Addresses
    2. The Problems XHTML Addresses
    3. The New More Flexible Approach of HTML5 – Paving the Cowpaths
    4. New Features of HTML5
      1. HTML5 and JavaScript
      2. Additional Changes
      3. Modernizr
    5. The HTML5 Spec(s)
    6. Current State of Browser Support
  3. Sections and Articles
    1. The section Tag
      1. The HTML 4 Way
      2. The HTML5 Way
      3. Display of HTML5 Structural Elements
    2. The article Tag
    3. Outlining
      1. Sectioning
    4. Accessibility
  4. HTML5 Audio and Video
    1. Supported Media Types
    2. The audio Element
      1. Audio Formats
      2. Multiple Sources
      3. Audio Tag Attributes
      4. Getting and Creating Audio Files
    3. The video Element
      1. Video Tag Attributes
      2. Creating and Converting Video Files
    4. Accessibility
    5. Scripting Media Elements
    6. Dealing with Non-Supporting Browsers
      1. Graceful Degradation
  5. HTML5 Forms
    1. Modernizr
    2. New Input Types
      1. search
      2. tel
      3. url and email
      4. date/time input types
      5. number
      6. range
      7. min, max, and step attributes
      8. color
    3. HTML5 New Form Attributes
      1. autocomplete
      2. novalidate
    4. Some Other New Form Field Attributes
      1. required
      2. placeholder
      3. autofocus
      4. autocomplete
      5. form
      6. pattern
    5. New Form Elements
      1. datalist
      2. progress and meter
  6. HTML5 Web Storage
    1. Overview of HTML5 Web Storage
    2. Web Storage
      1. Browser Support
      2. Local Storage
      3. Session Storage
      4. Prefixing your Keys
    3. Other Storage Methods
      1. Web Database Storage
      2. Indexed Database API
  7. HTML5 Canvas
    1. Getting Started with Canvas
      1. Context
    2. Drawing Lines
      1. Multiple Sub-Paths
      2. The Path Drawing Process
      3. The fill() Method
    3. Color and Transparency
    4. Rectangles
    5. Circles and Arcs
      1. Radians
    6. Quadratic and Bézier Curves
      1. Practice
    7. Images
      1. drawImage() – Basic
      2. drawImage() – Sprites
    8. Text
      1. Text Properties
  8. Integrated APIs
    1. Offline Application API
      1. Cache Manifest File
      2. The HTML File
      3. Managing ApplicationCache with JavaScript
      4. A Sample Application
    2. Drag and Drop API
  9. Geolocation
    1. What is Geolocation Used for?
    2. Browser Support for geolocation
    3. The Geolocation Object
    4. Geolocation API Methods
    5. PositionOptions Object Properties
    6. Position Interface Attributes
  10. Web Messaging
    1. Web Messaging Methods
    2. Establishing Trust between Domains
    3. Establishing Trust with ORIGIN
    4. Cross Origin Resource Sharing (CORS)
    5. Ports and Channel Messaging
    6. MessagePort Methods
    7. The Message Event Object
    8. Additional Security Checks
  11. Web Workers
    1. Why use Web Workers
    2. What are Web Workers
    3. Features Available to Workers
    4. How do Web Workers work?
    5. The Worker Object
    6. WorkerGlobalScope
    7. WorkerGlobalScope Properties
    8. WorkerGlobalScope Methods
    9. WorkerGlobalScope Events
    10. Browser Support for Web Workers
    11. Types of Web Workers
    12. Terminating the worker from the Worker Script
  12. Drag and Drop
    1. What is Drag and Drop
    2. What is Drag and Drop Used for?
    3. Browser Support for Drag and Drop
    4. Understanding Drag and Drop
    5. Drag and Drop with a Data « payload »
    6. Drag Events
    7. Drop Event
    8. A jQuery UI Drag and Drop Example
  13. Offline Applications
    1. Why do we need offline Applications?
    2. Browser Support for Offline Applications
    3. Emptying the Browser Cache
    4. Understanding applicationCache
    5. The navigator.online property
    6. Associating the Cache Manifest with a Web Page
  14. XMLHttpRequest Level 2
    1. What is XmtlHttpRequest (XHR)?
    2. Benefits of XHR Level 2
    3. The XHR object: States
    4. The XHR object: Event Handlers
    5. The XHR Object: Methods
    6. The XHR object: Properties
  15. Web Sockets
    1. HTTP
    2. The Web Socket
    3. WebSocket Properties
    4. Web Socket Event Handlers
    5. WebSocket Methods
    6. Using a WebSocket Server with the WebSocket API
  16. Server-Sent Events
    1. What are Server Sent Events?
    2. The Server Messages
    3. Creating an EventSource
    4. The EventSource Properties
    5. The EventSource Events
    6. The Advantages of Server-Sent Events
    7. The Disadvantages of Server-Sent Events
    8. Server-Sent Events Summary
Comprehensive HTML5 Training
Training Comprehensive HTML5 Training

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, …

In this comprehensive HTML5 class, you will learn to learn to use HTML5 to develop modern websites.

All trainings in Brussels, Training Development

Training HTML5 Training for Managers – 2 days

Leave a comment

Class overview :

This HTML5 training class is for people who need to have a better understanding of HTML5, but are not going to be writing HTML5 code themselves (or at least not yet). It covers the structural differences between HTML5 and HTML 4 and addresses the benefits of HTML5 and the current state of HTML5 support.

Class goals :

  • Learn the benefits and purpose of HTML5.
  • Learn the differences between HTML5 and HTML 4 and XHTML.
  • Learn the state of browsers and other device support for HTML5.
  • Learn how to embed video in HTML5.

Content of HTML5 Training for Managers

  1. What is HTML5
    1. Time Line History HTML 1995 to 2010
    2. Review Standard for HTML, XHTML, and the HTML DOM
    3. Previous version of HTML came in 1999
    4. Goal is to reduce the need for proprietary RIA technologies, Adobe Flash, Microsoft Silverlight and Sun JavaFX
    5. Still a work in progress
    6. Able to develop more powerful multimedia
    7. Relies heavily on JavaScript
    8. Some elements that have been dropped from HTML 4.01
    9. Syntax is no longer based on SGML
    10. Application Focused
    11. Error Handling
    12. What HTML5 is, is not, is important
    13. Current State of HTML5
  2. HTML5 vs. HTML 4
    1. Specification
    2. Doctype simplified
    3. Character Encoding
    4. Forms
    5. Integrated APIs
    6. Associated APIs
  3. Rules for HTML5
    1. Some rules for HTML5 were established:
    2. New features should be based on HTML, CSS, DOM, and JavaScript
    3. Reduce the need for external plugins (like Flash)
    4. Better error handling
    5. More markup to replace scripting
    6. HTML5 should be device independent
    7. The development process should be visible to the public
  4. HTML5 New Features
    1. The canvas element for drawing
    2. The video and audio elements for media playback
    3. Better support for local offline storage
    4. New content specific elements, like article, footer, header, nav, section
    5. New form controls, like calendar, date, time, email, url, search
    6. Reduce need for plug-ins
  5. HTML5 Browser Support
    1. For each feature
    2. Code determination of supported features
    3. Fallback content when a browser doesn’t support the element
    4. How to check status of Browsers
    5. Using Modernizr
  6. HTML5 New Elements an Attributes
    1. New elements for better structure
    2. New standard for media content
    3. Canvas element uses JavaScript to make drawings on a web page
    4. More form elements, with more functionality
    5. Input element’s type attribute for better input control before sending it to the server
  7. Demos
    1. Embedding video
    2. Embedding audio
HTML5 Training for Managers
Training HTML5 Training for Managers

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, …