Price: $2,999.00

Course Number: 90020
Length: 4 Days
Print Friendly, PDF & Email

Why choose TONEX for your HTML5 Training?

HTML5 Training Course by TONEX covers the HTML5 elements combined with JavaScript and CSS3 to build powerful mobile web apps. This training class is built for web developers interested in mobile development, mobile web developers ready to update their skills with HTML5, and other developers and project managers looking to understand mobile technologies including HTML5 based mobile web frameworks.

We will show you how to build iOS and Android based Apps with HTML5, CSS3, JavaScript APIs, jQuery Mobile, JavaScript Object Notation (JSON), and PhoneGap.

HTML5 Training teaches you about:

  • HTML5 New Elements
  • HTML5 New Attributes
  • Mobile HTML5 Framework
  • CSS3 Support
  • Video and Audio
  • 2D/3D Graphics
  • Local Storage
  • Local SQL Database
  • Web Applications
  • Geo Location
  • Sensors

html5 training

Who Should Attend

Web developers interested in mobile development Mobile web developers ready to update their skills with HTML5 Business developers and project managers looking to understand mobile technologies Beginning to intermediate programmers who want to learn new web skills

Objectives

Upon completion of this course, the attendees will:

  • Discover what’s new in HTML5, CSS3, and JavaScript for mobile development
  • Compare Mobile Web (HTML5) Frameworks: PhoneGap, Sencha Touch, jQuery Mobile, jQTouch, and Titanium
  • Master the art of HTML5 based mobile web design for multiple platforms
  • Build a JSON based Twitter App
  • Create apps that detect the orientation and the movement of mobile devices using accelerometer, gyroscope, and magnetometer
  • Use geolocation and maps in a HTML5 location-based app
  • Build offline apps
  • Use HTML5 web forms to create an address book app
  • Create drawings and animation with JavaScript and HTML5’s canvas element
  • Leverage HTML5 multimedia features such as Canvas and SVG for the mobile web
  • Use HTML5’s audio and video elements to build a movie trailer app
  • Build HTML5 geo-location based applications

Outline

Introduction to HTML5

  • Core Elements of Mobile Application Development
  • Common infrastructure
  • Semantics, structure, and APIs of HTML5 documents
  • HTML5 at a Glance
  • Core Features of HTML5
  • HTML5 and Its Relationship to CSS3 and Javascript

The Elements of HTML5 Mobile Development

  • Mobile Development with HTML5
  • Context
  • Message
  • Look and Feel
  • Layout
  • Color
  • Typography
  • Graphics
  • Multimedia

Getting Started With HTML5

  • Structure of a Web Page
  • HTML5 DOCTYPE
  • Encoding
  • HTML5 Markup
  • HTML5 and CSS3
  • Viewport
  • Forms
  • Audio And Video
  • Customizing Audio/Video Controls
  • HTML5 Canvas
  • Using A Canvas
  • Drawing Text
  • Drawing Images
  • Working With Pixels
  • Understanding Transforms
  • Rendering
  • Data Storage
  • HTML5 Offline Applications
  • The Manifest File
  • HTML5 Caching
  • HTML5 Geolocation
  • HTML5 Web Workers
  • HTML5 Messaging APIs
  • Web Sockets
  • Device access
  • Connectivity
  • Performance

Building Mobile Web Apps with HTML5

  • Mobile Web (HTML5) Frameworks
  • Cascading Style Sheets Version 3 (CSS3)
  • New Semantic Elements
  • Web application APIs
  • User interaction
  • Geolocation
  • Audio and Video Tags
  • Local Storage Capacity
  • Web Forms
  • Canvas 2D and 3D drawing surface
  • Scalable Vector Graphics (SVG)
  • Comparison between SVG and Canvas
  • Loading Web pages
  • Web Workers
  • Web Storage
  • Web Sockets
  • Microdata
  • Device API and File API

Working with HTML5 Tags

  • Audio Tag
  • Video Tag
  • Canvas Tag
  • Canvas Tag 3d (WebGL)
  • Ruby Tag
  • Semantic Markup
  • Form Fields
  • Selectors API
  • Inline SVG
  • Text inside SVG
  • Microdata
  • Link Relations

Working with CSS3

  • Columns
  • Rounded Corners
  • Web Fonts
  • Text Wrapping
  • Text Stroke
  • Transitions
  • 2d Transforms
  • Animations
  • Gradients
  • New Selectors
  • Flex Box Model
  • Flex Box Model - Complex
  • Text and Box Shadow

Working with JavaScript APIs

  • Web Storage
  • localStorage
  • sessionStorage
  • Web SQL Database
  • Async Transactions
  • XDomain Communication
  • postMessage
  • File API
  • Using FileReader
  • Notifications
  • Simple Notifications
  • Web Notifications
  • Geolocation API
  • Get Current Position
  • Web Workers
  • Inline Workers
  • Native Drag and Drop
  • Drag and Drop

Labs: Building Mobile Apps with HTML5, CSS3 and Javascript

  • JavaScript animations
  • CSS3 Effects
  • Flexible Box Model: Basic Example
  • Flexible Box Model: Center Stage
  • 3D and CSS
  • 3D Transformation
  • Multimedia
  • Audio Tag with Fallback to Flash
  • Video Formats
  • Video + Canvas
  • Exploring the FileSystem APIs
  • FileSystem APIs
  • A Simple Trip Meter using the Geolocation API
  • The Final Product: Trip Meter
  • Building a Simple TODO Lists using Web Storage
  • Building a Simple TODO List using Web SQL Database
  • Building a Simple TODO List using IndexedDB
  • Create a Twitter App
  • MakeAjaxCalls
  • Add Geolocation, Detect Orientation and Use CSS3 Media Queries
  • Create an Address Book App with Forms
  • Build a Movie Trailer app with Audio and Video
  • Draw Using JavaScript and Canvas

Elective Labs

  • Building Apps with jQTouch
  • Building Apps with jQueryMobile
  • Building Apps with PhoneGap
  • Building Apps with Sencha Touch
  • Building Apps with Titanium
  • Building Games with HTML5, CSS3 and Javascript

Request More Information

Please enter contact information followed by your questions, comments and/or request(s):
  • Please complete the following form and a Tonex Training Specialist will contact you as soon as is possible.

    * Indicates required fields

  • This field is for validation purposes and should be left unchanged.

Request More Information

  • Please complete the following form and a Tonex Training Specialist will contact you as soon as is possible.

    * Indicates required fields

  • This field is for validation purposes and should be left unchanged.