Call : (+91) 968636 4243
Mail : info@EncartaLabs.com
EncartaLabs

HTML5 Mobile Essentials

( Duration: 3 Days )

In HTML5 Mobile Essentials training course, you will learn the new paradigm of site building at the core . The first two days (the HTML5 training course) will get you up to speed with using HTML5, and the last day is focused on mobile development. This course will cover topics such as touch event handling and responsive design. The course also covers jQuery Mobile so one can get up and running with mobile prototypes very quickly.

COURSE AGENDA

1

HTML5 Essentials Modules

2

Intro to Front End Engineering

  • Vision for HTML5
  • Mobile web is the web
  • How HTML5 integrates with everything
  • Front End Engineering is not an island
  • Basic Markup
3

Basic Markup

  • What is semantic markup, what we dropped from HTML4 and why
  • New Tags in HTML5
  • Doctype and charsets
  • Essential Meta Information
  • Web Developer Tools
  • Overview of the DOM
  • Putting your first HTML5 webpage online
  • Basic Versioning
  • Validating your code, and browser issues
  • Accessibility
  • Basic Selecting and Styling
4

Basic Selecting and Styling

  • How to select elements in the DOM with CSS
  • How to manipulate the page using the Cascade
  • Block and Inline elements
  • Floats, positioning, borders, margins, padding and text
  • Understanding the viewport
5

Basic JavaScript

  • Variables
  • Arrays
  • Strings
  • Loops
  • If/else and equivalence
  • Object Literals
  • JSON
  • Functions
  • Scope and Hoisting
6

Intermediate Markup

  • Effective positioning of your scripts
  • Good uses of the head tag
  • Importing vs linking
  • Anchoring
  • More Meta Tags
  • Inserting Analytics
7

API Overview

8

HTML5 Fast Track Modules

9

Intermedia Javascript and jQuery

  • Using web developer tools Tips for using the console
  • Deeper into the DOM
  • Scope, Private and Public, Callbacks and Nesting, NameSpacing, Using Object Literals, patterns, code execution, and general best practices
  • Jquery, and the 20% you will use 80% of the time
  • Event Handling and Binding Gotchas
  • Intermediate Selecting and Styling
10

Intermediate Selecting and Styling

  • Using web developer tools for live styling
  • CSS3 selectors
  • CSS3 properties
  • CSS3 hints and gotchas
  • Custom styles and conditional hacks
  • The 20% of CSS3 that you will use 80% of the time
  • Advanced Markup and SVG
11

Advanced Markup and SVG

  • Even more meta tags
  • SEO outlining
  • Microformats
  • Advanced SVG
  • ARIA
  • Device listening (@media)
  • Working with third party fonts
  • Retina versioning
  • Advanced Selecting and Styling
12

Advanced Selecting and Styling

  • Gylphs and Font Icons
  • Effective use of multiple background images
  • Gotchas for nth-of and other static selectors
  • Advanced positioning techniques
  • Border gotchas, grids, tables, and flex boxes
  • EMs vs Pixels (pros and cons)
  • Resetting Techniques
  • Optimization
  • CSS3 Fallback best practices
  • Advanced styling with before and after filter injection
  • HTML entities
  • API Code Overview
13

API Code Overview

14

HTML5 Mobile Modules

15

jQuery Mobile

  • What is the jQuery Mobile Framework, and why it is not jQuery for Mobile
  • Getting comfortable with data-* in your markup
  • Mobile form helpers
  • Why we break execution order best practices?
  • Dealing with the mobile viewport
  • Multiple View Architecture
  • Reaching out to a server (XmlHTTPRequest Level 2 and JSONP)
  • Overriding page handling using native jQuery Mobile listeners
  • Themes and rolling your own
  • Rapid Mobile Prototyping
16

Responsive Design

  • The myth of the one flexible design
  • All mobile views are different
  • Orientation and pixel densities
  • Freeing up some viewport real estate with JavaScript trickery
  • Markup fine tuning
  • Resolution for common devices
  • Detection paradigms
  • Layout grids, pros and cons
  • Dynamic Imagery and Background SVG
  • Pixel Fonts
17

Touch Events

  • The age of touch
  • How to capture a touch event
  • Multi touch and gestures
  • What happens during a touch event
  • Decoupling the touch and mouse events
  • Mouse and Touch handlers, details and gotchas
  • Mouse Wheels, shift, ctrl and alt keys
18

Forms

  • New input types
  • New attributes
  • Form validation
  • New CSS form-based selectors
  • FormData Object API
  • Browser support and Fallback
19

Application Cache

  • Why take your app offline?
  • Understanding Caching
  • Manifest and Server Config
  • Effective use of Network, Fallback and Cache
  • Progressive caching and cache expiration tips
  • Using JavaScript to improve the offline UX
20

Single Page Applications

  • Single Page Application paradigm
  • #! and escaped_fragment, and fallback
  • Push and pop states (History API)
  • Meta data for state
  • Re-injecting and rebinding replaced elements
  • Using third parties, Ajax and JSONP

Encarta Labs Advantage

  • One Stop Corporate Training Solution Providers for over 6,000 various courses on a variety of subjects
  • All courses are delivered by Industry Veterans
  • Get jumpstarted from newbie to production ready in a matter of few days
  • Trained more than 50,000 Corporate executives across the Globe
  • All our trainings are conducted in workshop mode with more focus on hands-on sessions

View our other course offerings by visiting https://www.encartalabs.com/course-catalogue-all.php

Contact us for delivering this course as a public/open-house workshop/online training for a group of 10+ candidates.

Top
Notice
X