Contents at a Glance

Introduction

PART I: BUILDING WEB PAGES WITH THE OPEN WEB STANDARD

Hour 1: Improving Mobile Web Application Development with HTML5

Hour 2: New HTML5 Tags and Attributes with Mobile Development

Hour 3: Styling Mobile Pages with CSS3

Hour 4: Detecting Mobile Devices and HTML5 Support

Hour 5: JavaScript and HTML5 Web Applications

Hour 6: Building a Mobile Web Application

Hour 7: Upgrading a Site to HTML5

Hour 8: Converting Web Apps to Mobile

PART II: LEARNING HTML5 ESSENTIALS

Hour 9: Adding Meaning with HTML5 Sectioning and Semantic Elements

Hour 10: Drawing with the HTML5 Canvas Element

Hour 11: Fonts and Typography in HTML5

Hour 12: Audio and Video in HTML5

Hour 13: HTML5 Forms

Hour 14: Editing Content and User Interaction with HTML5

Hour 15: Microformats and Microdata

Hour 16: Working with HTML5 Drag-and-Drop Functionality

Hour 17: HTML5 Links

PART III: HTML5 FOR MOBILE AND WEB APPLICATIONS

Hour 18: Web Application APIs and Datasets

Hour 19: WebSockets, Web Workers, and Files

Hour 20: Offline Web Applications

Hour 21: Web Storage in HTML5

Hour 22: Controlling the Browser History with the History API

Hour 23: Adding Location Detection with Geolocation

Hour 24: Converting HTML5 Apps to Native Apps

PART IV: APPENDIXES

Appendix A: HTML Elements and Attributes

Appendix B: HTML5 and Mobile Application Resources

---

Introduction

The web is changing very quickly these days. New browser versions are being released every few months rather than every few years, and new devices are entering the marketplace all the time. For a web developer, staying up to date on the latest trends and technology is important, and the trending technology right now is HTML5.

In fact, some news outlets are claiming that HTML5 and mobile applications are two of the fastest-growing areas of job creation. According to Freelancer.com and iTWire, requests for freelancers knowing HTML5 rose by 34% in the first quarter of 2011, while general HTML jobs rose only by 7%. They also noted that Android jobs rose by 20%, and iPhone jobs rose by 9%. HTML5 and mobile applications are where the jobs are, and this Learning Lab can help you learn all about HTML5 and the application programming interfaces (APIs) that relate to it. After 24 hours, you will be able to build complex web applications and convert them into native mobile applications.

HTML5 Is More Than HTML

This Learning Lab covers more than HTML tags and attributes. Although these things are the basis of the HTML5 specification, when people talk about HTML5 they often include many other programming interfaces that are not strictly part of the HTML5 specification, like geolocation or the History API. This Learning Lab covers the basics of HTML5 and how it has changed from previous versions of HTML. It also introduces you to some of the technologies that are lumped in with HTML5, including:

• Drawing with the canvas element

• Adding streaming media with the video and audio elements

• Editing pages online and checking spelling

• Using drag-and-drop functions on web applications

• Building more user-friendly forms

• Creating semantic divisions with new elements, such as article, section, and nav

This book covers several other specifications beyond HTML5, including:

• Web Open Font Format (WOFF) web fonts

• Microformats and Microdata

• WebSockets

• Web Workers

• Files API

• Web Storage

• Offline Web Applications API

• History API

• Geolocation

Web Pages Are for More Than Computers

HTML used to be used primarily in web browsers on computers, but now, with the advent of smartphones and tablet computers, more people are accessing web pages on mobile devices.

Every hour of this Learning Lab provides examples of how the lesson’s contents apply both to web browsers and mobile devices and shows you techniques for getting your applications to look better on mobile devices.

With this Learning Lab, you will learn how to create applications that work on the most popular mobile smartphones and tablets out there: Android and iOS (iPhone, iPad, and iPod touch devices). Screenshots from both Android and iOS devices appear throughout as well as tips and warnings about how the different devices perform.

Organization of This Learning Lab

This Learning Lab is divided into 24 lessons, each of which are designed to take about an hour to complete, grouped together into three sections:

• Part I, “Building Web Pages and Applications with the Open Web Standard,” teaches you the basics of HTML, CSS, and JavaScript, and teaches you how to build a basic web application for mobile and non-mobile devices. After reading this section, you will know how to build a basic website with HTML, CSS, and JavaScript.

• Part II, “Learning the HTML5 Essentials,” covers some of the more important new features of HTML5. You will learn more about new HTML5 elements to help you build better applications.

• Part III, “HTML5 for Mobile and Web Applications,” describes some of the more useful APIs and tools for mobile application development and goes into detail about how to create mobile applications.

Conventions Used

Code samples are written in mono font within the text. Some code examples that are too long to display as one line in the book use the symbol to indicate that these lines should be all on one line, like this:

<link rel="stylesheet" href="styles-320.css" media="only screen and (max-width:320px)">

You can also use the Try It Yourself sections to help you practice what you’ve learned in the hour.

Q&A, Quiz, and Exercises

Every hour ends with a short question-and-answer section to help with follow-up questions that occur as a result of reading the hour.

You can also take an interactive quiz on the content of each hours as well as do some suggested exercises to help you get more out of what you learned and apply this knowledge to your own applications.

Where to Go to Learn More

Appendix B includes more websites and books you can access to learn more about HTML5 and mobile web applications. This book also has a companion website at www.html5in24hours.com where you can go to see the examples, view and download the source code for each hour, view and report errata about the book, and continue to learn and ask questions about HTML5 mobile applications.

---

Dedication

To Mark and Jaryth, you helped me find time I didn’t know I had. I love you.

About the Author

Jennifer Kyrnin has been teaching HTML, XML, and web design online since 1997. She has built and maintained websites of all sizes from small, single-page brochure sites to large, million-page databased sites for international audiences. She lives with her husband, son, and numerous animals on a small farm in Washington state.

We Want to Hear from You!

You are our most important critic and commentator. We value your opinion and want to know what we’re doing right, what we could do better, what areas you’d like to see us publish in, and any other words of wisdom you’re willing to pass our way.

You can email or write us to let us know what you did or didn’t like about this product—as well as what we can do to make our products stronger.

Please note that we cannot help you with technical problems related to this product's topic, and that due to the high volume of mail we receive, we might not be able to reply to every message.

When you write, please be sure to include this product's’s title and author as well as your name and phone or email address. we will carefully review your comments and share them with the author and editors.

E-mail:     feedback@samspublishing.com

Mail:        Sams Publishing Reader Feedback
                 Pearson Education
                 800 E. 96th Street
                 Indianapolis, IN 46240 USA

Reader Services

Visit our website and register this product at informit.com/register for convenient access to any updates, downloads, or errata that might be available.