Mobile HTML5 by Weyl, Estelle -- Read -- Imperial Library of Trantor

Index

Mobile HTML5 Introduction

Native Applications Versus Web Applications

Pep Talk (or Leaving Old Internet Explorer Behind) The Browser Landscape Web Applications Versus Native Applications: A Brief History Release of the SDK: Beginning of Third-Party Applications

What’s New(t)? New Elements and APIs

Semantic Grouping Tags Web Forms SVG and Canvas Video and Audio Geolocation API Offline Content and Storage Other APIs

What’s New in CSS?

Web Fonts

Mobile-Specific Considerations Why This Book?

Screen Size User Goals

What’s in This Book Conventions Used in This Book Using Code Examples Safari® Books Online How to Contact Us Acknowledgments

1. Setting the Stage to Learn Mobile HTML5, CSS3, and JavaScript APIs

CubeeDoo: HTML5 Mobile Game Development Tools

Text Editor Browser Debugging Tools Desktop Debuggers

Mobile viewport

Remote Debugging

Android debugging tools weinre Using weinre Adobe Edge Inspect and Ghostlab JavaScript debugging with Aardwolf BlackBerry 10 Debugger

Testing Tools

Emulators and Simulators Online Tools Phones

Browser labs iOS Android Windows BlackBerry Nokia Kindle WebOS

Automated Testing

2. Upgrading to HTML5

HTML5 Syntax

Elements Attributes Global and Internationalization Attributes

id class title style lang dir

HTML 4 Attributes Made Core in HTML5

tabindex accesskey

New to HTML5: Global Accessibility and Interactive Attributes

hidden contenteditable contextmenu draggable dropzone spellcheck ARIA accessibility attributes Custom data attributes with data-*

Dataset API

itemid, itemprop, itemref, itemscope, and itemtype

HTML Element/Attribute Syntax

Self-Closing Elements Best Practices The Required Components

The Document Type Declaration The <html> element The <head> element The <title> element The <body> element

Elements Found in the <head> <meta>: Adding Metadata

Mobile Meta Tags

Viewport meta tag

Mobile Vendor-Specific Values

apple-mobile-web-app-capable apple-mobile-web-app-status-bar-style format-detection

The <base> of Your Web Page <link>s Aren’t Just for Stylesheets

Add <link>s for your stylesheets Attributes of the <link> tag The media attribute The rel attribute <style>

Adding a <script> to your web page

JavaScript performance tips

When a user has JavaScript turned off, <noscript> A <body> of elements

3. Elements That Are New in HTML5

Sectioning Elements in HTML5

<section> <article> <section> Versus <article> <nav> <aside> <header> <footer> CubeeDoo Header and Footer Not New, but Not Often Used: <address> Grouping Content: Other New HTML5 Elements <main> <figure> and <figcaption> <hr> <li> and <ol> Attribute Changes

Text-Level Semantic Elements New to HTML5

Changed Text-Level Semantic Elements

<a>

Mobile-specific link handling

Text-Level Element Changes from HTML 4 Unchanged Elements

Embedded Elements

Changes to Embedded Elements

Interactive Elements

All of XHTML Is in HTML5, Except...

In Conclusion

4. HTML5 Web Forms

Attributes of <input> (and Other Form Elements)

The type Attribute The required Attribute Minimum and Maximum Values: The min and max Attributes The step Attribute The placeholder Attribute The pattern Attribute The readonly Attribute The disabled Attribute The maxlength Attribute The size Attribute The form Attribute The autocomplete Attribute The autofocus Attribute

<input> Types and Attributes

Re-introduction to Input Types You Think You Know Text: <input type=“text”> Password: <input type=“password”> Checkbox: <input type=“checkbox”> Radio: <input type=“radio”> Submit: <input type=“submit”> Reset: <input type=“reset”> File: <input type=“file”> Hidden: <input type=“hidden”> Image: <input type=“image”> Button: <input type=“button”> Styling Input Types

New Values for <input> Type

Email: <input type=“email”> URL: <input type=“url”> Telephone: <input type=“tel”> Number: <input type=“number”> Range: <input type=“range”> Search: <input type=“search”> Color: <input type=“color”>

Date and Time Input Types

Date: <input type=“date”> Datetime: <input type=“datetime”> Datetime-local: <input type=“datetime-local”> Month: <input type=“month”> Time: <input type=“time”> Week: <input type=“week”>

Form Validation

Easy UI Improvements with CSS

Controlling validation bubbles Styling to enhance usability

New Form Elements

The <datalist> Element and the list Attribute

Graceful degradation of the <datalist>

The <output> element

CubeeDoo

Other Form Elements

The <form> element <fieldset> and <legend> <select>, <option>, <optgroup> <textarea> <button> The <label> Element

In Conclusion

5. SVG, Canvas, Audio, and Video

HTML5 Media APIs

SVG Including SVG in Your Documents Clown Car Technique: SVG for Responsive Foreground Images Learning SVG CubeeDoo SVG Canvas

Your first <canvas> <canvas> code example

Canvas Versus SVG

WebGL

Audio/Video

Media Types Adding <video> to Your Website Attributes of <video> and <audio>

The <track> element

Video and Audio and JavaScript

CubeeDoo

Styling Video

Responsive video sizing Things to know about <video> implementation

6. Other HTML5 APIs

Offline Web Applications

Am I Even Connected to the Internet? Application Cache

The cache manifest file Updating the cache

Local and Session Storage

The cookie comparison LocalStorage to enhance mobile performance CubeeDoo

classList

SQL/Database Storage

Web SQL methods

openDatabase method transaction method executeSQL() method

CubeeDoo high scores code IndexedDB

Enhanced User Experience

Geolocation Web Workers Microdata

Microdata versus microformats Microdata API

Cross-Document Messaging

CORS: Cross-Origin Resource Sharing Security

Accessible Rich Internet Applications (ARIA)

Accessibility

In Conclusion

7. Upgrading to CSS3

CSS: A Definition and Syntax

CSS Syntax Using External Stylesheets: <link> Revisited

The media attribute

Media Queries

window.matchMedia

CSS Best Practices

1. Minimize HTTP requests 2. Use external stylesheets 3. Normalize browsers with a CSS reset or normalizer 4. Use the weakest specificity for ease of overwriting 5. Don’t use inline styles or the !important modifier

CSS Selectors

Basic Selectors

Type selector Class selector ID selector

More CSS3 Selectors

General Selectors

Universal selector: * Type selector: E Class selector: .class ID selector: #id

Using the Selectors Relational Selectors: Rules Based on Code Order

Descendant combinator: E F Child combinator: E > F Adjacent sibling combinator: E + F General sibling combinator: E ~ F

Attribute Selectors

CubeeDoo

Pseudoclasses State Pseudoclasses Structural Pseudoclasses The Math of the nth Types

Even and odd Single elements :nth-of-type versus :nth-child Number expressions Exercise

More Pseudoclasses

:target :lang(en) :not(s), or the negation pseudoclass Real world example

Pseudoelements

::before and ::after

CubeeDoo

Understanding double-colon notation

Other Selectors: Shadow DOM

Specificity Trumps Cascade: Understanding CSS Specificity

In Conclusion

8. Expanding Options with CSS3 Values

CSS Color Values

Hexadecimal Values rgb() Syntax Adding Transparency with RGBA Hue, Saturation, and Lightness: HSL() CMYK Named Colors CurrentColor Browser Color Values

Which color syntax should I use?

CSS Units of Measurement

CSS Length Values

dpi, dpc, dppx CubeeDoo

Angles, Times, and Frequencies CSS Angle Measurements

Degrees Grads Rads Turns

Times Frequencies

CubeeDoo

Avoiding TRouBLe: Shorthand Properties and Value Declarations In Conclusion

9. CSS3: Modules, Models, and Images

CSS Box Model Properties

border border-style border-color

Making triangles with CSS

border-width The CSS Box Model box-sizing

Margins

Learning CSS3

border-radius

border-radius for native-looking buttons on the iPhone and in CubeeDoo

CSS Gradients

Gradient Type: Linear or Radial Radial Gradients Linear Gradients

Gradient angles and directions Gradient colors

iPhone and CubeeDoo linear gradients

background-size

DPI and background-size

Stripey Gradients Repeating Linear Gradients

Gradients in CubeeDoo Multiple background images Candy buttons and hard stops Tools for gradients

Shadows

Text Shadow Fitting Text with width, overflow, and text-overflow

text-overflow property white-space property

Box Shadow Putting It All Together: CubeeDoo

10. CSS3: Transforms, Transitions, and Animations

CSS Transitions

The transition-property Property The transition-duration Property The transition-timing-function Property The transition-delay Property The Shorthand transition Property Multiple Transitions

CSS3 Transforms

The transform-origin Property The transform Property

translate() translateX() translateY() scale() scaleX() scaleY() rotate() rotateX() rotateY() skew() skewX() skewY()

Multiple Transforms

matrix()

Transitioning Transformations 3D Transform Functions

translate3d() translateZ() scale3d() scaleZ() rotate3d() perspective()

Other 3D Transform Properties

The transform-origin property revisited The perspective property The transform-style property The backface-visibility property

Putting It All Together

CSS3 Animation

Keyframes

Applying animations Bouncing ball animation Animating sprites CubeeDoo animations

Transitions, Animations, and Performance

11. CSS Features in Responsive Web Design

Media Queries, Breakpoints, and Fluid Layouts Multiple Columns Border Images

Setting Border Images

border-image-source border-image-slice border-image-width border-image-outset border-image-repeat Border-image shorthand

Flexbox

flex Feature Detection with @supports

Responsive Media

Serving Images

Retina®: high pixel-density displays

Connection speed

background-size Data URIs Sprites image-set() Font icons

CSS Masking: Creating Transparent JPEGs Client Hints

12. Designing Mobile Applications

Considerations Before You Start Design Considerations

Tools: Productivity Applications Entertainment: Immersive Applications

Fun entertainment Serious entertainment

Utility What Is Right for You?

The Mobile Platform: Rich with Possibilities

Small Screen Less Memory

Manage memory

One Window, One Application at a Time Minimal Documentation Development Considerations

Targeting Mobile WebKit

Status Bar Navigation Bar

UX of navigation bar

Page controls

Navigation bar size and color

Startup Image Home Screen Icons

Minimize Keyboard Entry Be Succinct

Make it Obvious Minimize Required Input Minimize Text

Other User Experience Considerations

13. Targeting Mobile Devices and Touch

Scaling Down to Size

@viewport

Touch Me

Touch Areas Mouse Events, Touch Events

Pointer events Touch events Feature detection for touch events

Pseudo or Not-So-Pseudo Click Events

Tap highlight color Kill the selection dialog Kill the images dialog Kill panning onTouchEnd Touching to scroll

Hardware Access

Phone Movement and Direction Device Status

Network connection Battery Other APIs

Native Web Apps, Packaged Apps, and Hybrids

PhoneGap/Apache Cordova Sencha Touch Appcelerator Titanium

Testing

14. Mobile Performance

Battery Life

Use Dark Colors Use JPEGs Reduce JavaScript Eliminate Network Requests Hardware Acceleration

Avoid repaints and reflows

Latency

Reduce the Number of HTTP Requests

Browser cache Combined JavaScript file Single stylesheet Image sprites Image compression Data URIs/inline images Icons and character sets Inspecting network requests

Reduce Size of Requests

Minify text-based assets Compress binary files Gzip everything Reduce image size Skip the framework Minimize cookies Defer third-party scripts Performance anti-patterns

Memory Optimize Images

Weigh the benefits of CSS GPU benefits and pitfalls Viewport: Out of sight does not mean out of mind Minimize the DOM Memory management

UI Responsiveness

Touch Events Animation

In Conclusion

A. CSS Selectors and Specificity

CSS Selectors Level 3 CSS Selector Cheat Sheet CSS Selector Specificity CSS Selectors Level 4

Index About the Author Colophon Copyright

← Prev
Back
Next →

← Prev
Back
Next →