HTML5 Mobile Training Course

Course Summary

The Mobile Web is the Web, and the age of TOUCH is upon us!

If you wish to learn how to build sites that function like native apps when on a mobile device, and yet function as fully fledged websites when viewed on desktops, then this is the course for you.

In the past, people would create websites for the desktop, then write code to adjust it slightly, so it worked on a mobile device. The time has now come, however, to consider building your apps for the mobile device first, and then falling back to the desktop version.

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

HTML5 Mobile is a comprehensive 3 day course, that is suitable for developers of all levels. Day one tends to be more beginner/best practices focused. Day two is where we really get to roll up our sleeves and wield HTML5. By the end of day 3, it is hoped that students will have mastered the principles of mobile specific HTML5 development.

 

 

Duration [top]

3 days.

HTML5 Mobile is composed of the following:

Instructors [top]

Photo

Jeremy never expected nor planned on becoming a hardcore programmer, much less a computer language polyglot, but that is where his varied career has taken him. Much more interested in the technical side of things, he's worked on projects from MUDs to mapping APIs to a browser front end for corporate file sharing. Jeremy likes to learn new technology by diving in, writing a lot of bugs, and then debugging everything to get a thorough understanding of how things work. There's nothing better than finding out just what a platform is capable of, and where the boundaries still exist. Jeremy's current favorite languages are JavaScript, Python, and Lua.

When he's not teaching, he's probably rock climbing with his son, writing code for that game that maybe-someday will be published, or reading yet another classic novel that he should have read in school but didn't.

More about Jeremy Osborne...
Photo

Maximiliano Firtman is one of the leading experts in mobile and web 2.0 development in the Americas today. From development and private consulting work, to writing books and speaking at conferences, to training some of the most advanced software teams around the globe. Max has been a Nokia Developer Champion since 2006 and Adobe Community Champion since 2011. He is the author of the book Programming the Mobile Web and the upcoming jQuery Mobile: Up & Running, both published by O'Reilly Media. He has also written books in Spanish distributed in Latin America and Spain, such as AJAX, Web 2.0 Para Profesionales. You can follow him on twitter at @firt.

Today Max focuses on HTML5, CSS3, mobile web, multiplatform hybrid development and WPO (Web Performance Optimization). His Mobile Web Programming Blog discusses mobile web development with quite good success finding new things on devices (such as the accelerometer API in iOS) and creating the most complete mobile emulator guide up to now. He has also launched the free service Mobile Tiny URL for easy URL typing on mobile devices. In September 2011 Max has also created a new project Mobile HTML5, a compatibility tableof every mobile platform and its HTML5 support.

Max is the founder of two user groups: ARFUG -official Adobe User Group- and Mobile Argentina; and has organized lot of events in the last years, including MobileCamp and Adobe en Vivo Argentina. Max has presented at many conferences across the US, Europe and South America like Velocity, OSCON, Breaking Development, Nokia Talk, goto conference;, Campus Party, Adobe Lite Days, Adobe en Vivo, MobileCamp, and BarCamp.

More about Max Firtman...
Photo

Rick has been a freelance software engineer since he graduated in the early 2000's. He has worked in the UK and America both as a freelance consultant and as a freelance developer. He is a very passionate and seasoned full stack developer, specializing in advanced front end user interface(UI) and user experience(UX).

Having worked as lead CSS3/HTML5 developer for a start up in the Bay area, Rick has bleeding edge experience in ensuring extremely complex systems have simple to use and intuitive interfaces.

Having worked with nearly all web technologies over the last decade he believes that there is no one size fits all technology. However, he is an advocate for using open source wherever possible and admittedly has an affinity for curly brackets.

Rick has a passion for CSS and UX. You will also often find him talking about JavaScript being a 'real' language, or that JavaScript on the server is “what the world has been missing”.

Between hitting up Las Vegas on the weekends and playing Magic the Gathering with his other coder friends, Rick is currently developing amongst other apps; a real-time unified social network for the trade show industry based in Las Vegas and a bidding platform for a crowdfunding app based in San Francisco.

More about Rick Hurst...

Outline [top]

HTML5 Essentials Modules   (1 day)

HTML5 Essentials is a beginner course designed to help students gain a base proficiency in HTML5.

Intro to Front End Engineering   (1 hour)

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

Basic Markup   (1 hour)

  • 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

Basic Selecting and Styling   (1 hour)

  • 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

Basic JavaScript   (1 hour)

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

Intermediate Markup   (1 hour)

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

API Overview   (1 hour)

A high level overview (30,000ft) of all the main APIs and related subjects that make up what we know as HTML5 We will be touching on HTML5 subjects from Canvas and the Application Cache, to Touch Events, Messaging API, Responsive Design, Geolocation and Websockets just to name a few.

HTML5 Fast Track Modules   (1 day)

HTML5 FastTrack is a one-day course for semi-professional developers or graduates from our HTML5 Essentials.

This module is exclusively offered as a part of HTML5 Course.

Intermedia Javascript and jQuery   (1 hour)

  • 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

Intermediate Selecting and Styling   (1 hour)

  • 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

Advanced Markup and SVG   (1 hour)

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

Advanced Selecting and Styling   (1 hour)

  • 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

API Code Overview   (1 hour)

A mid-level overview (500ft) of all the APIs and related subjects that make up what we know as HTML5 We will be covering all the main HTML5 related subjects from Canvas and the Application Cache, to Touch Events Messaging API, Responsive Design, GeoLocation and WebSockets just to name a few This section moves quickly and discusses actual code.

HTML5 Mobile Modules   (2 days)

HTML5 Mobile is an advanced two-day course comprising of six carefully chosen mobile-relevant HTML5 Modules. Graduates from this course should be able to build HTML5 projects that target multiple devices and platforms.

jQuery Mobile 1.1.1   (2 hours)

  • What is the jQuery Mobile Framework 1.1.1, 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.

Responsive Design   (2 hours)

  • 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.

Touch Events   (2 hours)

  • 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.

Forms   (2 hours)

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

Application Cache   (2 hours)

  • 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.

Single Page Applications   (2 hours)

  • 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.