jQuery, CSS3, and HTML5 for Mobile/Desktop Devices by Campesato, Oswald -- Read -- Imperial Library of Trantor

Index

Half Title License Title Copyright Dedication Contents Preface Acknowledgments Chapter 1 New Features in HTML5

HTML5 and Various Working Groups HTML5 Specifications: W3C or WHATWG? What is HTML5?

Browser Support for HTML5

What Technologies are Included in HTML5? Differences between HTML4 Tags and HTML5 Tags Useful Online Tools for HTML5 Web Pages

Modernizr YepNope.js Caniuse HTML5 on Mobile HTML5 BoilerPlate

Designing HTML5 Web Pages

Graceful Degradation Progressive Enhancement

Responsive Design A Simple HTML5 Web Page New HTML5 Elements

Semantic Markup HTML5 Elements

Article Versus Section: How Are They Used? Why Use Semantic Markup? A Simple Web Page with Semantic Markup

The HTML5 <hgroup> Element Custom Attributes in HTML5 The HTML5 <audio> Element The HTML5 <video> Element Popcorn.js: HTML5 Media Framework HTML5 <video> and Web Camera Support

HTML5 Forms

New Input Types New Attributes A Simple HTML5 Form Example The HTML5 FormData Object

Using HTML5 Web Storage

HTML5 Web Storage versus IndexedDB HTML5 Web Storage versus Cookies HTML5 Web Storage and Security

An Example of HTML5 localStorage

LocalStorage and iOS 5.1 Storing Images in localStorage

HTML5 Web Databases Using An HTML5 IndexedDB Database Storing Twitter Tweets in a Web Database Web Database and Mobile Devices Performance, Debugging, and Testing Tools

Blaze Chrome Speed Tracer PageSpeed WEINRE Firebug for Firefox jsconsole Socketbug Adobe Shadow

Additional Useful Links Summary

Chapter 2 Introduction to CSS3

CSS3 Support and Browser-Specific Prefixes for CSS3 Properties A Quick Overview of CSS3 Features CSS3 Pseudo-Classes, Attribute Selection, and Relational Symbols

CSS3 Pseudo-Classes CSS3 Attribute Selection CSS3 Relational Symbols

CSS3 Shadow Effects and Rounded Corners

Specifying Colors with RGB and HSL CSS3 and Text Shadow Effects CSS3 and Box Shadow Effects CSS3 and Rounded Corners

CSS3 Gradients

Linear Gradients Radial Gradients Online Tools For Creating CSS3 Gradients

CSS3 2D Transforms

Zoom In/Out Effects with Scale Transforms Rotate Transforms Skew Transforms Translate Transforms

CSS3 Media Queries

Detecting Orientation with CSS3 Media Queries Detecting Orientation with Simple JavaScript

Working with Web Fonts

Online Resources for Fonts

CSS3 and Presentation Tools Summary

Chapter 3 CSS3 2D/3D Animation and CSS Frameworks

A CSS3-Based Cube CSS3 Transitions Simple CSS3 Animation Effects

Animation Effects with CSS3 keyframes Glowing Effects Image Fading and Rotating Effects with CSS3 Bouncing Effects

CSS3 Effects for Text

Rendering Multi-Column Text

3D Effects in CSS3 CSS3 3D Animation Effects CSS3 Animation and CSS Sprites Sliding Panels with CSS3 Animation CSS Frameworks

The Compass/Sass Framework

Sass Variables Sass Mixins

The Blueprint Framework The LESS Framework

LESS Variables LESS mixins Using LESS in Client-Side and Server-Side Code

CSS3 Performance Useful Links Summary

Chapter 4 CSS3 and SVG

New CSS3 Features CSS Canvas Backgrounds CSS Device Adaptation CSS Exclusions

CSS Filters CSS Flexbox (Flexible Box) CSS Grid CSS Regions CSS Shaders Simple Vertex CSS Shaders Animation Effects with CSS Shaders CSS Shaders and Detached Tiles CSS Shaders and Curtain Effects

CSS3 and SVG

CSS3 and SVG Bar Charts

Rendering 3D Surfaces in SVG Similarities and Differences Between SVG and CSS3 CSS3 Toolkits and IDEs

Sencha Animator Adobe Edge AliceJS

Summary

Chapter 5 Fundamentals of jQuery

What is jQuery?

Referencing jQuery Files in HTML5 Web Pages

HTML Web Pages without jQuery Using jQuery to Find Elements in Web Pages

A “Hello World” Web Page with jQuery jQuery Qualifiers versus jQuery Methods Using Web Storage with jQuery

Querying and Modifying the DOM with jQuery

Find and Modify Elements With :first and :last Qualifiers Finding Elements with :even and :odd Qualifiers Finding Elements with :eq, :lt, and :gt Qualifiers Finding HTML Elements by class or id Finding and Setting Element Attributes Finding Form Elements and Their Attributes Using nth-child() for Finding Elements Using jQuery to Remove Elements Creating DOM Elements Other jQuery Methods for Inserting DOM Elements Useful jQuery Code Blocks

jQuery Element Navigation Methods

The next()/prev()/closest()/parent() Methods Other jQuery Navigational Selection Methods

Caching Results of jQuery Invocations What About this, $this, and $(this)? Handling Click Events in jQuery jQuery APIs for Traversing Elements Chaining jQuery Functions HTML5 Geolocation with jQuery Accelerometer Values with jQuery Using jQuery Plugins Summary

Chapter 6 Animation Effects with jQuery and CSS3

Working with CSS3 Selectors in jQuery

HTML <div> Elements and the jQuery css() Function Creating Rounded Corners with jQuery Gradients and Shadow Effects with jQuery

Basic Animation Effects in jQuery

Using Callback Functions

jQuery Fade and Slide Animation Effects

The fadeIn(), fadeOut(), and fadeToggle() Functions jQuery Slide-Related Functions Easing Functions in jQuery

The jQuery .animate() Method

Custom CSS Animation Using the .animate() Function The jQuery Queue and Animation Effects

Creating a Slideshow with Images CSS3-Based Animation Effects

Animation Effects with CSS3 Keyframes and 2D Transforms 2D Transforms with CSS3 and jQuery

A Follow the Mouse Example with jQuery Your First Sketching Program Other Animation Effects with jQuery Rendering a Set of Bouncing Balls with jQuery and CSS3 Handling Other Events with jQuery

Handling Mouse Events Handling Events in jQuery 1.7 and Beyond Handling Keyboard Events

Summary

Chapter 7 Query UI Controls

Accordion Effects Buttons Check Boxes and Radio Buttons Combo Boxes Date Pickers Progress Bars Scroll Panes with the jQuery jScrollPane Plugin Sliders Tabs Theming jQuery UI The jQuery UI Effect Function A Sample Web Page with Various UI Components Future Versions of jQuery Useful Links Summary

Chapter 8 Introduction to jQuery Mobile

Overview of jQuery Mobile Key Features and Components in jQuery Mobile A Minimal jQuery Mobile Web Page More Differences between jQuery and jQuery Mobile

jQuery Mobile Page Views jQuery Mobile Custom Attributes

jQuery Mobile Page Transitions jQuery Mobile and CSS-Related Page Initialization

The mobileinit Event

jQuery Mobile Options and Customization Page Navigation and Changing Pages

The jqmData() Custom Selector

Multiple Page Views in One HTML5 Web Page Positioning the Header and Footer in Page Views Working with Buttons in jQuery Mobile

Navigation Buttons as Anchor Links Groups of Buttons and Column Grids Rendering Buttons with Themes

jQuery Mobile Icons Forms and Form Elements in jQuery Mobile List Views in jQuery Mobile

Simple List Views with Buttons Nested List Views

Navigation Bars Select Menus in jQuery Mobile

jQuery Mobile and Ajax

jQuery Mobile and Geolocation Summary

Chapter 9 User Gestures and Animation Effects in jQuery Mobile

Handling User Gestures and Events in jQuery Mobile

Two jQuery Plugins for Detecting User Gestures Scroll Events in jQuery Mobile Portrait Mode Versus Landscape Mode

Animation Effects Using jQuery Mobile

Fade-Related Methods Slide-Related jQuery Methods

jQuery Mobile and Transition Effects jQuery Mobile and Animation Effects with CSS3 jQuery Mobile Virtual Mouse Events jQuery Mobile and Page-Turning Effects CSS3 2D/3D Animation Effects with jQuery Mobile CSS3 3D Animation with Tap Events jQuery Mobile and Dynamic Animation Effects jQuery Mobile and 3D Cube Animation Effects jQuery Mobile Bouncing Balls Accelerometer Values with jQuery Summary

Chapter 10 Other HTML5 Technologies

The Stages in the W3C Review Process HTML5 APIs in W3C Recommendation Status (REC) HTML5 APIs in W3C Candidate Recommendation Status (CR)

Battery API (DAP)

HTML5 Geolocation

Obtain a User’s Position with getCurrentPosition() Track a User’s Position with watchPosition()

HTML5 WebSockets

A Simple WebSockets Web Page

SPDY and HTML5 WebSockets Migrating to HTML5 WebSockets Other Projects with HTML5 WebSockets Available WebSocket Servers Vibration API (DAP) XMLHttpRequest Level 2 (XHR2)

Making Ajax Calls without jQuery Making Ajax Calls with jQuery HTML5 Cross-Origin Resource Sharing (CORS) Ajax Requests Using XMLHttpRequest Level 2 (XHR2)

HTML5 APIs in W3C Last Call Status (LC) HTML5 Contacts HTML5 Drag and Drop (DnD) jQuery and HTML5 Drag and Drop jQuery and HTML5 localStorage Libraries for HTML5 localStorage HTML5 Web Messaging Using HTML5 Server-Sent Events (SSE)

A Comparison of Ajax and SSE

HTML5 APIs in W3C Working Draft Status (WD) Audio Processing jQuery and HTML5 File APIs HTML5 Web Intents Using HTML5 Microdata HTML5 Web Notifications HTML5 WAI-ARIA HTML5 Web Workers HTML5 History APIs HTML5 Offline Web Applications Detecting Online and Offline Status HTML5 APIs in Experimental Status Other Upcoming HTML5 Features Summary

Chapter 11 Introduction to HTML5 Canvas

What is HTML5 Canvas? HTML5 Canvas Versus SVG

The HTML5 Canvas Coordinate System

Line Segments, Rectangles, Circles, and Shadow Effects HTML5 Canvas Linear Gradients

Horizontal, Vertical, and Diagonal Linear Gradients

Radial Color Gradients Bezier Curves Bezier Curves with Linear and Radial Gradients Rendering Images on Canvas with CSS3 Selectors Repeating an Image on Canvas with Patterns HTML5 Canvas Transforms and Saving State jCanvas: A jQuery Plugin for HTML5 Canvas HTML5 Canvas with CSS3 and jQuery Mobile Other HTML5 Canvas Topics Other HTML5 Canvas Toolkits Summary

Chapter 12 Charts and Graphs in HTML5 Canvas

Rendering Gradient Bar Charts Mouse-Enabled Bar Chart Rendering 3D Bar Charts Rendering Multiple Line Graphs Rendering Area Graphs Rendering Pie Charts Rendering Multiple Charts and Graphs Bar Charts with HTML5 Canvas and jQuery Mobile Updating HTML5 Canvas Bar Charts with a WebSocket Server An Integrated Example with HTML5 Canvas, CSS3, and SVG Third Party Chart Libraries Summary

Chapter 13 HTML5 Mobile Apps on Android, iOS, and Tizen

HTML5/CSS3 and Android Applications SVG and Android Applications HTML5 Canvas and Android Applications Android and HTML5 Canvas Multi-Line Graphs Android and HTML5 Canvas Animation Android Applications with jQuery Mobile What is PhoneGap?

How Does PhoneGap Work? Other Useful Links

Creating Android Apps with the PhoneGap Plugin PhoneGap Form Input Example on Android Working with HTML5, PhoneGap, and iOS A CSS3 Cube on iOS Using PhoneGap Tizen

Benefits Platform Overview The Application Layer Tizen API

Tizen Core Service

Application Framework Base Connectivity Graphics and UI Location Messaging Multimedia PIM (Personal Information Management) Security System Telephony Web The Kernel Layer Development Tools Sample Web Applications Native and Hybrid Applications Support Links to More Information

Android and jQuery Mobile for Robot Control Summary

Looking Forward: Interviews with Industry Leaders

Vincent Hardy Brian Leroux Tony Parisi

Appendices A-E (on the DVD)

Appendix A: Overview of SVG Appendix B: Introduction to Android Appendix C: HTML 5 and JavaScript Toolkits Appendix D: Programming the Roomba Robot Appendix E: Introduction to SPA

Index

← Prev
Back
Next →

← Prev
Back
Next →