Overview
This course explores the new HTML5 structure, semantics and form tags. Participants will be led through a series of progressively advanced topics, where each topic consists of lecture, group discussion, comprehensive hands-on lab exercises and lab review. The course equips participants with the skills and knowledge essential for building mobile applications using HTML5.
What You'll Learn
- How to start building HTML5 pages
- Major benefits of HTML5
- Understand the difference between HTML5 and HTML 4
- Familiarize with HTML5’s new elements and attributes
- Learn to work with audio and video in HTML5
- Work with HTML5’s new Canvas element to create code-based drawings
- Use Web Storage for offline applications
- Use all the cool new HTML5 form elements
- Current state of browser support for HTML5 and how to make your HTML5 sites degrade gracefully
Curriculum
- Page structure
- Laying out a page with HTML 4 – the “old” way
- Laying out a page with HTML5
- New HTML5 structural tags
- Page simplification
- HTML5 – How we got here
- The problems HTML 4 addresses
- The problems XHTML addresses
- The new more flexible approach of HTML5 – paving the cowpaths
- New features of HTML5
- HTML5 and JavaScript
- Additional changes
- Modernizr
- The HTML5 spec(s)
- The current state of browser suppor
- The section tag
- The HTML 4 way
- The HTML5 way
- Display of HTML5 structural elements
- The article tag
- Outlining
- Sectioning
- Accessibility
- Supported media types
- The audio element
- Audio formats
- Multiple sources
- Audio tag attributes
- Getting and creating audio files
- The video element
- Video tag attributes
- Creating and converting video files
- Accessibility
- Scripting media elements
- Dealing with non-supporting browsers
- Graceful degradation
- Modernizr
- New input types
- search
- tel
- url and email
- date/time input types
- number
- range
- min, max, and step attributes
- color
- HTML5 New form attributes
- autocomplete
- novalidate
- Some other new form field attributes
- required
- placeholder
- autofocus
- autocomplete
- form
- pattern
- New form elements
- datalist
- progress and meter
- Overview of HTML5 web storage
- Web storage
- Browser support
- Local storage
- Session storage
- Prefixing your keys
- Other storage methods
- Web database storage
- Indexed database API
- Getting started with canvas
- Context
- Drawing lines
- Multiple sub-paths
- The path drawing process
- The fill () method
- Color and transparency
- Rectangles
- Circles and arcs
- Radians
- Quadratic and bézier curves
- Practice
- Images
- drawImage () – basic
- drawImage () – sprites
- Text
- Text properties
- Offline application API
- Cache manifest file
- The HTML file
- Managing ApplicationCache with JavaScript
- A sample application
- Drag and drop API
- Overview
- Attributes
- Events
- Methods
- Example
- Overview
- What are web workers?
- How web workers work
- Handling errors
- Example
- Overview
- Geolocation methods
- Location properties
- Handling errors
- Example
- Overview
- Objects in JavaScript
- The main jQuery object
- jQuery plugin entry point
- Internal definition of a plugin
- jQuery design patterns
- Example
- JQuery for mobile
- Overview
- Creating a web site
- Forms
- Example of jQuery for mobile
- Overview
- Developing for mobile
- iOS requirements and development environment
- Android requirements and development environment
- Example of iOS WebView application
- Example of android WebView application
Who should attend
This is an intermediate level web development course, designed for experienced developers who need to extend their knowledge of web design and development.
This course is highly recommended for:
- Software engineers
- Mobile developers
- Mobile app developers
- Web and software development engineers
Prerequisites
Participants must have previous experience or working knowledge of developing software applications. Basic HTML4, basic CSS and basic JavaScript development skills are required. Additionally, experience with JSON; DOM and Ajax is a bonus and helpful.
