HTML5 Enterprise Application Development by Shah, Nehal -- Read -- Imperial Library of Trantor

Index

HTML5 Enterprise Application Development

Table of Contents HTML5 Enterprise Application Development Credits About the Authors About the Reviewers www.PacktPub.com

Support files, eBooks, discount offers and more

Why Subscribe? Free Access for Packt account holders Instant Updates on New Packt Books

Preface

A brief history of time (client-server edition) A brief history of time (web browser edition) It's all about semantics

Content tags Language tags Layout tags Format tags Forms get an upgrade Enter microdata

An anatomy lesson

A word about DOCTYPE The lang attribute Metatags are important too Putting it all together

The application What this book covers What you need for this book Who this book is for Conventions Reader feedback Customer support

Downloading the color images of this book Downloading the example code Errata Piracy Questions

1. HTML5 Starter Kit: Compatibility

The real meaning of compatibility Browsers

Rendering engine JavaScript engine

OS platforms Display resolution Importance of compatibility Patching the differences – compatibility libraries

HTML5 Shiv Modernizr Explorer Canvas HTML5 Boilerplate

Before starting app development Summary

2. HTML5 Starter Kit: Useful Tools

Choosing editors and IDEs

Adobe Dreamweaver CS6 Aptana Studio 3 BlueGriffon 1.5.2 Maqetta eXo Cloud9

Choosing web servers

Apache Apache Tomcat Jetty Tornado nginx LightTPD Node.js

Prepackaged stacks Web browsers and add-ons

Mozilla Firefox Google Chrome Safari Internet Explorer Opera

HTTP proxies

Charles Fiddler

Summary

3. The App: Structure and Semantics

Understanding page structure

Navigation list Secondary content

Metadata Microdata Favicons and icons CSS3 resets

Individual sides Shorthand

Sticky footer General styling Responsive web design and adaptive web design

Importing CSS files using media queries Importing other CSS from our main CSS Using media queries as conditionals in our main CSS

Summary

4. The App: Getting Movies Via Geolocation

How it works The API A simple request Movies near you

Self-invoking That becomes this Getting location Getting postal codes AJAX ain't just a cleaning product From postal codes to showtimes

Summary

5. The App: Displaying Movie Data via CSS3

Back to the browsers' babel tower CSS3 Magic – adding more styles to MovieNow

Adding rounded corners Setting color

Red, green, and blue Red, green, blue, and alpha Hue, saturation, and lightness Hue, saturation, lightness, and alpha

Adding gradients Adding box shadows Adding text shadows Some tricks to fake 3D

Movies and styles

Styling our list Transitions Animations

Choosing between transitions and animations Using media queries Applying CSS3 selectors Summary

6. The App: Trailers via HTML5 Video

Introducing HTML5 video Implementing a video player

Custom controls

Styling

Buttons and image sprites Styling seek and volume bars Features detection Styling sliders

Adding interactions using JavaScript

Initial settings Initializing video controllers Setting the seek slider Initializing the volume slider Functions to get DOM objects Play and pause Full screen Format time Controlling time Until the end of time

Possible improvements Still not perfect

Introducing HTML5 audio Implementing an audio player

Custom controllers

Styling

How I learned to stop worrying and love Flash Summary

7. The App: Showing Ratings via Canvas

Charting Preparing our code Everything depends on the context

2D context

An overview of the Canvas 2D Drawing API

Styles Font styles Drawing simple shapes Drawing complex shapes

Drawing charts

3D context – WebGL and experimental WebGL

Entering a tridimensional world Three.js

Scene Camera Material Texture Mesh Geometry Animating our geometries Finishing up

Summary

8. The App: Selection UI via Drag-and-Drop

Adding showtimes Styling showtimes What a drag

Handling drag with JavaScript

Drop it

Toggling the drop zone Transferring some data Displaying the results

Summary

9. The App: Getting the Word Out via Twitter

Registering our application How to tweet in MovieNow? Authenticating

User not logged and/or application not authorized User logged in Adding some styles

Posting tweets

Service Applying HTML Adding more styles Adding JavaScript interactions Form validation support across browsers

New input fields types Summary

10. The App: Consuming Tweets Via Web Workers

Getting the data Capturing geocodes Anatomy of a Web Worker Using Web Workers to get nearby tweets Updating the event listener Styling the tweets Summary

11. Finishing Up: Debugging Your App

What to look for Which tools to use Playing with HTML and CSS Step by step with JavaScript

JavaScript console Analyzing load times JavaScript profiling

Mobile debugging Web debugging proxies Summary

12. Finishing Up: Testing Your App

Types of testing Unit testing

Setting up your unit test Invoking your target Verifying the results Frameworks and tools

JsTestDriver QUnit Sinon.JS Jasmine

Functional testing

The Selenium standalone server The php-webdriver connector from Facebook PHPUnit

Browser testing Continuous integration Summary

13. Finishing Up: Performance

Web Performance Optimization (WPO) Following standards Optimizing images Optimizing CSS JavaScript performance considerations Additional page performance considerations

Server-side considerations

Performance analytics

Load times Profilers

Summary

Index

← Prev
Back
Next →

← Prev
Back
Next →