Sue Brandreth's Learning Resources

Part I: Building Web Pages and Applications with the Open Web Standard

Hour 1: Improving Mobile Web Application Development with HTML5     1

• Understanding How We Got to HTML5     1

Learning What’s Different with HTML5     3
Defining Web Applications     4
Using the Open Web Standard     4
Using HTML5 with iOS and Android Devices     6
Writing Mobile Websites     7
Summary      11
Q&A     12
Workshop     13

 

Hour 2: New HTML5 Tags and Attributes with Mobile Development     15
The New HTML5 Tags     15
The New HTML5 Attributes     24
Changes to HTML 4 Tags and Attributes     25
Changes to HTML Syntax in HTML5     27
Mobile Support of HTML5 Tags and Attributes     28
Benefits of HTML5 for Mobile Web Development     29
Summary     30
Q&A     30
Workshop     31

 

Hour 3: Styling Mobile Pages with CSS3     33
Quick Introduction to CSS     33
What CSS3 Adds to the Party      42
Using CSS3 on Mobile Devices     46
Summary     46
Q&A     46
Workshop     47

 

Hour 4: Detecting Mobile Devices and HTML5 Support     49
Choosing What HTML5 Elements to Use     50
Android and iOS Support for HTML5     50
Detecting HTML5 Functions     52
Degrading Gracefully     58
Using CSS3 Media Queries to Detect Mobile Browsers     60
Testing Your Applications     63
Summary     64
Q&A     64
Workshop     65

 

Hour 5: JavaScript and HTML5 Web Applications     67
What is JavaScript?     67
What is jQuery?     72
Using jQuery Mobile     79
Summary     82
Q&A     82
Workshop     83

 

Hour 6: Building a Mobile Web Application     85
Building a Site that Works on All Devices     85
Deciding on What Type of Application You Want     86
Building the Application in HTML     89
Using CSS to Make the HTML Look Good     91
Adding Mobile Meta Tags for More Effective HTML5 Pages     96
Optimizing Your Site for Mobile     99
Summary     102
Q&A     102
Workshop     103

 

Hour 7: Upgrading a Site to HTML5     105
Deciding When and How to Upgrade from HTML 4     105
HTML5 Features that Work Right Now     111
The State of HTML5 Browser Support     112
Adding HTML5 Features as Extras on Your Site     113
HTML5 Features that Turn Your Site into a Killer Mobile Application     115
Summary     116
Q&A     116
Workshop     118

 

Hour 8: Converting Web Apps to Mobile     119
Choosing a Web Editor     120
Testing Your Application     121
Evaluating Your Content     123
Changing the Visual Design for Mobile     124
Checking for HTML5 and CSS3     130
Supporting Multiple Devices     132
Evaluating Finished Apps on Other Devices     133
Getting an Application to Work on Older Browsers     134
Summary     138
Q&A     139
Workshop     139

 

Part II: Learning the HTML5 Essentials

 

Hour 9: Adding Meaning with HTML5 Sectioning and Semantic Elements     141
What Are Sectioning Elements?     141
Using the New Sectioning Elements     142
Marking Up HTML Semantically     154
Summary     159
Q&A     159
Workshop     160

 

Hour 10: Drawing with the HTML5 Canvas Element     163
Using the Canvas Element     163
Drawing Shapes on the <Canvas> Element     165
Writing Fonts and Text on the Canvas     177
Displaying Images     179
How Is Canvas Different from SVG or Flash     182
Summary     183
Q&A     184
Workshop     185

 

Hour 11: Fonts and Typography in HTML5     187
Defining the Elements of Typography     187
Using Proper Typographical Entities     196
Understanding Web Open Font Format (WOFF)     198
Summary     202
Q&A     202
Workshop     203

 

Hour 12: Audio and Video in HTML5     205
Why Use HTML5 for Audio and Video vs Flash     205
Choosing Video Formats for the Best Compatibility     207
Choosing Audio Codecs for the Widest Support     208
The New HTML5 Media Elements     210
Useful Attributes to Extend Your Media     212
Creating Fallback Options for Internet Explorer      216
Creating Custom Controls with API Methods     217
Summary     219
Q&A     220
Workshop     220

 

Hour 13: HTML5 Forms     223
New Usability Features in HTML5 Forms     223
HTML5 Input Types     228
Other New Form Elements     235
Form Validation     237
Summary     241
Q&A     242
Workshop     242

 

Hour 14: Editing Content and User Interaction with HTML5     245
The New contenteditable Attribute     245
The execCommand Method     247
Adding Spellcheck to Web Pages     251
Hiding Elements     252
Additional UI Components of HTML5     253
Browser Support of UI and Editing Features     255
Summary     257
Q&A     258
Workshop     258

 

Hour 15: Microformats and Microdata     261
Using Microformats     261
Using Microdata     267
Using RDFa     269
Deciding Which Format to Use     270
Mobile and Microformats     271
Summary      272
Q&A     273
Workshop     274

 

Hour 16: Working with HTML5 Drag-and-Drop Functionality     275
Implementing Drag and Drop     275
Drag-and-Drop Events     276
Drag-and-Drop Attributes     279
Helpful CSS Extensions     280
Building a Drag-and-Drop Interface     280
Using Drag and Drop on iOS     287
Summary     290
Q&A     290
Workshop     291

 

Hour 17: HTML5 Links     293
How Links Have Changed in HTML5    293
Link Types and Relationships     299
Using the New Link Types     300
Summary     306
Q&A     306
Workshop     307

 

Part III: HTML5 for Mobile and Web Applications

 

Hour 18: Web Application APIs and Datasets     309
Creating Web Applications     309
Datasets and data-* Attributes     318
Summary     320
Q&A     320
Workshop     321

 

Hour 19: WebSockets, Web Workers, and Files     323
Two-Way Communication with WebSockets     323
Running Scripts in the Background with Web Workers     326
Handling Client-Side Files with the File API     331
Summary     337
Q&A     338
Workshop     339

 

Hour 20: Offline Web Applications     341
Building Offline Apps and Converting Apps to Work Offline     341
The Cache Manifest     343
Using DOM Events and Properties for Offline Apps     347
Debugging the Application Cache     351
Summary     352
Q&A     352
Workshop     353

 

Hour 21: Web Storage in HTML5     355
What Is Web Storage?     356
Web SQL and Indexed DB     361
Summary     370
Q&A     371
Workshop     372

 

Hour 22: Controlling the Browser History with the History API     373
Why Control the Browser History?     373
History API Methods     375
Using the History API     375
Dangers and Annoyances of the History API     383
Summary     384
Q&A     385
Workshop     386

 

Hour 23: Adding Location Detection with Geolocation     387
What Is Geolocation?     387
Privacy and Geolocation     394
Creating a Mobile Geolocation Application     396
Summary     401
Q&A     401
Workshop     402

 

Hour 24: Converting HTML5 Apps to Native Apps     405
Comparing the Difference Between Native and HTML5 Apps     405
Converting to Native Apps     408
Creating Application Icons     414
Testing Your Applications     416
Selling Your App in the App Stores     418
Options Other Than Converting to Native Apps     419
Summary     419
Q&A     420
Workshop     421

 

Part IV: Appendixes

 

Appendix A: Answers to Quizzes     423
Hour 1, “Improving Mobile Web Application Development with HTML5”     423
Hour 2, “New HTML5 Tags and Attributes with Mobile Development”     423
Hour 3, “Styling Mobile Pages with CSS3”     424
Hour 4, “Detecting Mobile Devices and HTML5 Support”     424
Hour 5, “JavaScript and HTML5 Web Applications”     425
Hour 6, “Building a Mobile Web Application”     425
Hour 7, “Upgrading a Site to HTML5”     426
Hour 8, “Converting Web Apps to Mobile”     426
Hour 9, “Adding Meaning with HTML5 Sectioning and Semantic Elements”     427
Hour 10, “Drawing with the HTML5 Canvas Element”     427
Hour 11, “Fonts and Typography in HTML5”     428
Hour 12, “Audio and Video in HTML5”     428
Hour 13, “HTML5 Forms”     429
Hour 14, “Editing Content and User Interaction with HTML5”     429
Hour 15, “Microformats and Microdata”     430
Hour 16, “Working with HTML5 Drag-and-Drop Functionality”     430
Hour 17, “HTML5 Links”     430
Hour 18, “Web Application APIs and Datasets”     431
Hour 19, “WebSockets, Web Workers, and Files”     431
Hour 20, “Offline Web Applications”     432
Hour 21, “Web Storage in HTML5”     432
Hour 22, “Controlling the Browser History with the History API”     433
Hour 23, “Adding Location Detection with Geolocation”     434
Hour 24, “Converting HTML5 Apps to Native Apps”     434

 

Appendix B: HTML Elements and Attributes     437
HTML5 Elements     437
HTML5 Attributes     442

 

Appendix C: HTML5 and Mobile Application Resources     447
Books     447
Websites      448
This Book’s Website      448

---

Fling, B. (2009) Mobile Design and Development: Practical Techniques for Creating Mobile Sites and Web Apps, O’Reilly Media

Mobile devices outnumber desktop and laptop computers three to one worldwide, yet little information is available for designing and developing mobile applications. Mobile Design and Development fills that void with practical guidelines, standards, techniques, and best practices for building mobile products from start to finish. With this book, you’ll learn basic design and development principles for all mobile devices and platforms. You’ll also explore the more advanced capabilities of the mobile web, including markup, advanced styling techniques, and mobile Ajax.

If you’re a web designer, web developer, information architect, product manager, usability professional, content publisher, or an entrepreneur new to the mobile web, Mobile Design and Development provides you with the knowledge you need to work with this rapidly developing technology. Mobile Design and Development will help you:

• Understand how the mobile ecosystem works, how it differs from other mediums, and how to design products for the mobile context
• Learn the pros and cons of building native applications sold through operators or app stores versus mobile websites or web apps
• Work with flows, prototypes, usability practices, and screen-size-independent visual designs
• Use and test cross-platform mobile web standards for older devices, as well as devices that may be available in the future
• Learn how to justify a mobile product by building it on a budget

Table of Contents

 Wroblewski, L. (2011) Mobile First, A Book Apart

Download Source Code (ZIP 26,729KB)

Companion Web Site: http://www.lukew.com/resources/mobile_first.asp

Our industry’s long wait for the complete, strategic guide to mobile web design is finally over. Former Yahoo! design architect and co-creator of Bagcheck Luke Wroblewski knows more about mobile experience than the rest of us, and packs all he knows into this entertaining, to-the-point guidebook. Its data-driven strategies and battle tested techniques will make you a master of mobile—and improve your non-mobile design, too!

Contents

Part 1: Why Mobile First?

1. Growth
2. Constraints
3. Capabilities

Part 2: How to go Mobile

1. Organization (Read this chapter online)
2. Actions
3. Inputs
4. Layout