HTML5 is the cool new kid on the block for building Web Applications. People generally prefer native mobile apps over bookmarks in mobile browsers. Why not do both? In this course you’ll see how you can use a native mobile shell on the popular mobile platforms (iOS, Android, and Windows Phone 7) to host an HTML5 application and how to interact with native APIs, handle offline mode, and deal with devices with different resolutions.
Although Jon spent the first few years of his professional life as an attorney, he quickly
found chasing bits more interesting than chasing ambulances. Since 2011, Jon has been concentrating on the mobile world. Working mainly in iOS, Jon
has helped numerous companies create and transform mobile teams into teams that can
create, build, test, and deploy mobile applications with ease.
Introduction Hi. My name is Jon Flanders, and I'm here to talk to you about Building Native Mobile Applications using HTML5. In this particular module of this course, I'm going to talk first about why even talk about building mobile apps using HTML5, and we'll get into some of the enabling technologies that actually makes this a possibility today, HTML5, CSS3. And then we'll talk a little bit about what is a mobile app and what are your choices in terms of building something that can be an app for your mobile users, and we'll discuss what are those options.
Building the native shell Hi. My name is Jon Flanders, and I'm here in this module to talk about building a native shell for holding an HTML UI on mobile platforms. So, in this particular module, it's going to be sort of very methodical. We're going to talk about iOS, Android, and Windows Phone 7. We're going to go through, for each of those platforms, how you can build the native shell, how your HTML code can talk to your native code, and how the native code can talk back to the HTML code. Then I'll talk a little bit at the end about where do we want to get our resources from? Where do we want to get the HTML images, CSS? Should they come from an online source or should they be embedded inside of the app or maybe a hybrid of both?
Designing mobile friendly content Hi. My name is Jon Flanders. I'm here to talk to you in this module of the native mobile apps using HTML5 course about designing some contents specifically for mobile devices. We're going to talk about some useful meta tags, we'll talk about issues surrounding navigation, and then we'll talk a little bit about images, things like PNG versus SVG.
Dealing with touch Hi. This is Jon Flanders. In this module, I'm going to talk about dealing with touch in your HTML5 mobile applications. In the module we're going to talk about touch events, as well as some best practices. Now, in terms of putting touch in your HTML5 mobile application, it's really going to be up to you. It's a UX decision. Obviously touch is a very important part of mobile platforms. Users expect touch in certain scenarios. So, what's going to drive your choices are going to be what do other apps that are like your app do, and does the user expect touch to be available? Touch is available in all of the contexts we've been talking about in this course, so a Mobile Browser App, the Add to Homescreen App or a Native "Shell. " When you need to talk to other hardware, you're using a Web View, UI Web View or web browser control. These touch events are available in all of these different contexts.
Dealing with Offline Hi. I'm Jon Flanders, and I'm here to talk to you about dealing with offline scenarios when you're building HTML5-based mobile applications. So, we're going to start out talking about a smaller feature called startup images, then we're going to dive down into more meaty features of offline capabilities, application cache, local storage, and writing code that can detect whether you're offline or online.