x

Confirm Download

Simultaneous file downloading works best in FireFox, Chrome, and Safari browsers. Please keep this window open until all downloads are complete. Some customers prefer using file download managers for Chrome or Firefox to better manage large and multiple file downloads.

Cancel Download

Mobile HTML5

      • What is the Mobile Web  (Free)

        We will discuss why we should care about mobile web, what mobile html5 means and a discussion on the differences with the classic standard web development and design techniques
      • 00:05:26

      • Browsers and Platforms  (Free)

        In this segment I'll introduce you all the browsers and web platforms where our mobile web content may run today. We will talk about Web Views and native web platforms available. We'll go through stat reports and the unique perspective on browsing on Android devices.
      • 00:17:40

      • Mobile Web Strategies  (Free)

        Deciding the right strategy for a mobile solution is a key for success; in this segment we'll cover the current options we have available, such as a mobile separate site, a responsive website and an adaptive website. We will also go through key features that a mobile web should have for success
      • 00:07:00

      • Creating a Development Environment

        I'll introduce the key tools we need to use to test and debug, what's the difference between emulators and simulators and the importance of real testing.
      • 00:05:38

      • Chrome Mobile Emulation

        Chrome supports a very useful mobile simulation though its developer tools. I'll show you how to use and when to trust on it.
      • 00:09:04

      • Emulating iOS

        The only tool available for emulating iOS is the official iOS Simulator for Mac. I'll introduce the tool, where to download it and how to use it. We will also see how to simulate an iOS device though Safari and Chrome developer tools
      • 00:03:51

      • Emulating Android

        An Android OS can be emulated through the official Android SDK and Genymotion, a faster Android emulator. I'll show you how to install and configure them and use them as a base to emulate Android browsers.
      • 00:15:04

      • Emulating Windows, BlackBerry and Firefox OS

        From Windows 8 we can use free tools from Microsoft to emulate a Windows Phone device or a Windows tablet through emulators and simulators; BlackBerry also offers emulators for different devices as well as Firefox OS from Mozilla.
      • 00:08:02

      • Working with Real Devices

        While we can use simulators and emulators for some testing, there is nothing like a real device. I'll show you some free and commercial online solutions to use a real phone remotely
      • 00:10:04

      • Remote Debugging Safari

        Safari for Mac allow us to debug a remote Safari mobile instance, such as a real iPhone, iPad or even the simulator. We'll cover the basics and how to use it.
      • 00:08:02

      • Remote debugging Chrome

        If you have Chrome on Android we can debug remotely with a USB cable. I'll show you how to enable it on your Android phone and the options available.
      • 00:06:37

      • Remote Debugging for Others

        A review on how to remote debug other browsers for mobile, including Internet Explorer, BlackBerry and Firefox OS
      • 00:05:28

      • Other Tools

        Other tools might be useful for mobile web development, such as Network sniffers, bandwidth simulators, sync navigation tools and live reload systems. I'll go through several tools in this section.
      • 00:08:09

      • Basic Template

        If you haven't played with HTML5 before, I'll introduce you to the basic template that will be the base for the rest of this training
      • 00:11:21

      • CSS Pixels and Screens on the Market

        I'll discuss what is a pixel today and what happens when we design for virtual screens instead of real screens. The differences from the desktop web world when talking about dimensions
      • 00:06:13

      • Viewport Basics

        To avoid seeing a zoomed-out experience we need to manage the viewport declaration through properties. We will discuss the default viewport widths available in the market
      • 00:15:13

      • Advanced Viewport Declarations

        The viewport allows some advanced declarations that we can use including zoom management and some deprecated features. Also, I'll introduce the @viewport declaration and current usage.
      • 00:10:47

      • CSS Media Queries

        CSS Media Queries are the heart of Responsive Web Design and a way to load and execute conditional CSS. We'll cover the most useful properties available for mobile devices and how to use them
      • 00:13:42

      • CSS Mobile Tricks

        Mobile devices have specific CSS hacks and tricks that are useless or not available on classic browsers. I'll go through some tricks with live demos
      • 00:20:15

      • Client-side and Server-side Detection

        While a universal code that will work everywhere is a good idea, we are far from that utophy. Today, we still need to detect features and sometimes devices. I'll show you server side and client side techniques for this purpose.
      • 00:13:18

      • Basic Form Template

        Forms are part of the heart of web interaction. I'll show you the basic of forms for mobile devices, including some usability concerns and the basic template
      • 00:05:39

      • Virtual Keyboards

        Most touch devices don't have a physical keyboard, so I'll show you how to use HTML5 properties to decide which virtual keyboard will appear on the screen.
      • 00:07:01

      • Native Input Controls

        Calling native lists and selectors is a good idea to reduce UI problems and to increase user's interaction. We'll cover the basic HTML controls we can use to trigger native UI selection lists and rich editor textfields.
      • 00:07:56

      • Form Validation

        With HTML5 and CSS3 we can add a validation layer that will help the UI with new attributes
      • 00:09:16

      • Advanced Auto-Complete Options

        Some browsers allow some advanced auto-complete validation options, useful for creating a better experience for ecommerce and long-typing procedures. Let's cover them with real examples.
      • 00:04:27

      • Images

        We'll reinforce the screen density concepts that will affect bitmap-based content and the solutions available today, including media queries, srcset, picture and vector-based solutions
      • 00:12:32

      • Canvas API

        Canvas API is a JavaScript-based API for drawing on screen; it's being treated as a bitmap so it has the same problems as image files for different resolutions. I'll show you how to use it on high resolution devices
      • 00:05:31

      • Video and Audio

        Video and audio playing is part of the basics of every multimedia solution. We will talk and see the video and audio elements, advanced features
      • 00:10:30

      • Overview on JavaScript for Mobile

        JavaScript is everywhere and a key component of a modern web solution. In this segment we'll introduce the key differences on mobile devices, including background execution, threading, battery consumption, page visibility and the usage of frameworks.
      • 00:06:03

      • Network Communications and Data Storage

        This video will discuss the different options we have in terms of network communication with the server. We will also see We will discuss options for local persistent storage and its unique challenges on mobile.
      • 00:06:17

      • Geolocation

        A mobile user is always in a different place; that's why we can use Geolocation services to locate the user and customize the experience. We will discuss the geolocation providers and the code to lock user's location.
      • 00:10:49

      • Touch, Gesture and Pointer Events

        Nowadays we browse mobile websites with our fingers, not with a mouse pointer. This new scenario comes with new challenges, including touch events and gesture recognitions. We'll go through what we can do on mobile browsers
      • 00:10:39

      • Camera

        Do you want to take a picture with a phone? HTML5 has different ways to do so from HTML and JavaScript. I'll show you live demos on how to use it.
      • 00:06:19

      • Calling Native Apps

        We love the browser but sometimes we need to send some action to a native app. In this video, I'll show you how you can open native apps, including the Caller, the SMS composer, Maps and more
      • 00:07:31

      • Integrating with Our Native App

        When you have both a website and an app on the stores, you can integrate both through APIS and meta tags. In this case I'll show you native integration on iOS, Android, Windows and other apps through AppLinks
      • 00:07:41

      • Home Screen Web Apps Overview

        A home screen web app is a whole new experience for websites. Available on iOS and Chrome on Android, it allows users to install websites and have a full-screen native-like experience.
      • 00:06:20

      • Icons and Meta Tags

        For multiplatform web app we need to define several meta tags and icon declaration. Let's review them.
      • 00:09:28

      • Closing

        Wrap-up and closing - Mobile HTML5
      • 00:01:39

Mobile HTML5

  • Publisher: O'Reilly Media
  • Released: November 2014
  • Run time: 5 hours 46 minutes

Learn how to use unique aspects of HTML5 to create mobile websites and apps on multiple device platforms. In this video course, Max Firtman (Programming the Mobile Web) shows you how to work with HTML5, CSS, JavaScript, and tools for mobile devices, such as emulators. You’ll learn about different screen sizes and resolutions, sensors and hardware, form design, testing and debugging, and other facets of mobile design and development.

With live code, detailed walk-throughs, many examples, and live demos of various tools and techniques, this course teaches you hidden tricks and solutions for better usability and multiplatform compatibility, as well as how to deal with common pitfalls and challenges. It’s ideal for experienced web designers and developers.

  • Learn the key features that a mobile website or app needs for success
  • Use emulators and other tools for testing and debugging mobile apps on several platforms
  • Delve into CSS media queries and responsive web design
  • Understand the mobile web ecosystem, including different browsers and rendering engines
  • Learn HTML5 solutions for placing images in high resolution, playing audio and video, and capturing images from a camera
  • Customize user experience with geolocation services and data from the accelerometer, magnetometer, and gyroscope
  • Understand the advantages of home-screen web apps for Android and iOS
  • Learn how to integrate your website with native apps

Maximiliano Firtman, founder of ITMaster Professional Training, is a mobile+web developer, trainer, speaker, writer, and Adobe Community Champion.