Mobile HTML5
Using the Latest Today
Published on 13. November 2013
480 pages
978-1-4919-4888-0 (ISBN)
Description
Build kickass websites and applications for all mobile (and non-mobile) platforms by adding HTML5 and CSS3 to your web development toolkit. With this hands-on book, youll learn how to develop web apps that not only work on iOS, Android, Blackberry, and Windows Phone, but also perform well and provide good user experience.With lots of code and markup examples, youll learn best practices for using HTML5 features, including new web forms, SVG, Canvas, localStorage, and related APIs. Youll also get an in-depth look at CSS3, and discover how to design apps for large monitors and tiny screens alike.Learn HTML5s elements, syntax, and semanticsBuild forms that provide enhanced usability with less JavaScriptExplore HTML5 media APIs for graphics, video, and audioEnable your applications to work offline, using AppCache, localStorage, and other APIsLearn what you need to know about CSS3 selectors and syntaxDive into CSS3 features such as multiple backgrounds, gradients, border-images, transitions, transforms, and animationsMake your web applications usable, responsive, and accessible.Design for performance, user experience, and reliability on all platforms
More details
Other editions
Additional editions
Book
12/2013
1st Edition
O'Reilly
€42.50
Shipment within 10-20 days
Content
- Intro
- Copyright
- Table of Contents
- 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
- Chapter 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
- Remote Debugging
- Testing Tools
- Emulators and Simulators
- Online Tools
- Phones
- Automated Testing
- Chapter 2. Upgrading to HTML5
- HTML5 Syntax
- Elements
- Attributes
- Global and Internationalization Attributes
- HTML 4 Attributes Made Core in HTML5
- New to HTML5: Global Accessibility and Interactive Attributes
- HTML Element/Attribute Syntax
- Self-Closing Elements
- Best Practices
- The Required Components
- Elements Found in the &head&
- &meta&: Adding Metadata
- Mobile Meta Tags
- Mobile Vendor-Specific Values
- The &base& of Your Web Page
- &link&s Aren't Just for Stylesheets
- Chapter 3. Elements That Are New in HTML5
- Sectioning Elements in HTML5
- §ion&
- &article&
- §ion& 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
- &mark&
- &time&
- &rp&, &rt&, and &ruby&
- &bdi&
- &wbr&
- Changed Text-Level Semantic Elements
- &a&
- Text-Level Element Changes from HTML 4
- Unchanged Elements
- Embedded Elements
- Changes to Embedded Elements
- Interactive Elements
- &details& and &summary&
- &menu& and &menuitem&
- All of XHTML Is in HTML5, Except...
- In Conclusion
- Chapter 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
- New Form Elements
- The &datalist& Element and the list Attribute
- The &output& element
- &meter&
- &progress&
- &keygen&
- Other Form Elements
- The &form& element
- &fieldset& and &legend&
- &select&, &option&, &optgroup&
- &textarea&
- &button&
- The &label& Element
- In Conclusion
- Chapter 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
- Canvas Versus SVG
- Audio/Video
- Media Types
- Adding &video& to Your Website
- Attributes of &video& and &audio&
- Video and Audio and JavaScript
- Styling Video
- Chapter 6. Other HTML5 APIs
- Offline Web Applications
- Am I Even Connected to the Internet?
- Application Cache
- Local and Session Storage
- SQL/Database Storage
- Enhanced User Experience
- Geolocation
- Web Workers
- Microdata
- Cross-Document Messaging
- Accessible Rich Internet Applications (ARIA)
- Accessibility
- In Conclusion
- Chapter 7. Upgrading to CSS3
- CSS: A Definition and Syntax
- CSS Syntax
- Using External Stylesheets: &link& Revisited
- Media Queries
- CSS Best Practices
- CSS Selectors
- Basic Selectors
- More CSS3 Selectors
- General Selectors
- Using the Selectors
- Relational Selectors: Rules Based on Code Order
- Attribute Selectors
- Pseudoclasses
- State Pseudoclasses
- Structural Pseudoclasses
- The Math of the nth Types
- More Pseudoclasses
- Pseudoelements
- Other Selectors: Shadow DOM
- Specificity Trumps Cascade: Understanding CSS Specificity
- In Conclusion
- Chapter 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
- CSS Units of Measurement
- CSS Length Values
- Angles, Times, and Frequencies
- CSS Angle Measurements
- Times
- Frequencies
- Avoiding TRouBLe: Shorthand Properties and Value Declarations
- In Conclusion
- Chapter 9. CSS3: Modules, Models, and Images
- CSS Box Model Properties
- border
- border-style
- border-color
- border-width
- The CSS Box Model
- box-sizing
- Learning CSS3
- border-radius
- CSS Gradients
- Gradient Type: Linear or Radial
- Radial Gradients
- Linear Gradients
- background-size
- Stripey Gradients
- Repeating Linear Gradients
- Shadows
- Text Shadow
- Fitting Text with width, overflow, and text-overflow
- Box Shadow
- Putting It All Together: CubeeDoo
- Chapter 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
- Multiple Transforms
- Transitioning Transformations
- 3D Transform Functions
- Other 3D Transform Properties
- Putting It All Together
- CSS3 Animation
- Keyframes
- Transitions, Animations, and Performance
- Chapter 11. CSS Features in Responsive Web Design
- Media Queries, Breakpoints, and Fluid Layouts
- Multiple Columns
- Border Images
- Setting Border Images
- Flexbox
- flex
- Feature Detection with @supports
- Responsive Media
- Serving Images
- CSS Masking: Creating Transparent JPEGs
- Client Hints
- Chapter 12. Designing Mobile Applications
- Considerations Before You Start
- Design Considerations
- Tools: Productivity Applications
- Entertainment: Immersive Applications
- Utility
- What Is Right for You?
- The Mobile Platform: Rich with Possibilities
- Small Screen
- Less Memory
- One Window, One Application at a Time
- Minimal Documentation
- Development Considerations
- Targeting Mobile WebKit
- Status Bar
- Navigation Bar
- Startup Image
- Home Screen Icons
- Minimize Keyboard Entry
- Be Succinct
- Make it Obvious
- Minimize Required Input
- Minimize Text
- Other User Experience Considerations
- Chapter 13. Targeting Mobile Devices and Touch
- Scaling Down to Size
- @viewport
- Touch Me
- Touch Areas
- Mouse Events, Touch Events
- Pseudo or Not-So-Pseudo Click Events
- Hardware Access
- Phone Movement and Direction
- Device Status
- Native Web Apps, Packaged Apps, and Hybrids
- Testing
- Chapter 14. Mobile Performance
- Battery Life
- Use Dark Colors
- Use JPEGs
- Reduce JavaScript
- Eliminate Network Requests
- Hardware Acceleration
- Latency
- Reduce the Number of HTTP Requests
- Reduce Size of Requests
- Memory
- Optimize Images
- UI Responsiveness
- Touch Events
- Animation
- In Conclusion
- Appendix A. CSS Selectors and Specificity
- CSS Selectors Level 3
- CSS Selector Cheat Sheet
- CSS Selector Specificity
- CSS Selectors Level 4
- Index
- About the Author
