You are previewing HTML5 Enterprise Application Development.
O'Reilly logo
HTML5 Enterprise Application Development

Book Description

A step-by-step practical introduction to HTML5 through the building of a real-world application, including common development practices

  • Learn the most useful HTML5 features by developing a real-world application

  • Detailed solutions to most common problems presented in an enterprise application development

  • Discover the most up-to-date development tips, tendencies, and trending libraries and tools

In Detail

HTML5 has been a trending topic for a long time, but the lack of Flash support on iOS devices has sped up its penetration. New features in HTML5 come at a time when web developers are pushing the limits of what is achievable and HTML5, CSS3, and JavaScript have become an important alternative for building rich user interfaces.

"HTML5 Enterprise Application Development" will guide you through the process of building an enterprise application with HTML5, CSS3, and JavaScript through creating a movie finder application. You will learn how to apply HTML5 capabilities in real development problems and how to support consistent user experiences across multiple browsers and operating systems, including mobile platforms.

This book will teach you how to build an enterprise application from scratch using HTML5, CSS3, JavaScript, and external APIs.

You will discover how to develop engaging experiences using HTML5 capabilities, including video and audio management, location services, and 3D and 2D animations. We will also cover debugging techniques, automated testing, and performance evaluations to give you all the tools needed for an efficient development workflow.

"HTML5 Enterprise Application Development" is a comprehensive guide for anyone who wants to build an enterprise web application. You will learn through the implementation of a real-world application as we show you handy libraries, development tips, and development tools.

Table of Contents

  1. HTML5 Enterprise Application Development
    1. Table of Contents
    2. HTML5 Enterprise Application Development
    3. Credits
    4. About the Authors
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
        3. Instant Updates on New Packt Books
    7. Preface
      1. A brief history of time (client-server edition)
      2. A brief history of time (web browser edition)
      3. It's all about semantics
        1. Content tags
        2. Language tags
        3. Layout tags
        4. Format tags
        5. Forms get an upgrade
        6. Enter microdata
      4. An anatomy lesson
        1. A word about DOCTYPE
        2. The lang attribute
        3. Metatags are important too
        4. Putting it all together
      5. The application
      6. What this book covers
      7. What you need for this book
      8. Who this book is for
      9. Conventions
      10. Reader feedback
      11. Customer support
        1. Downloading the color images of this book
        2. Downloading the example code
        3. Errata
        4. Piracy
        5. Questions
    8. 1. HTML5 Starter Kit: Compatibility
      1. The real meaning of compatibility
      2. Browsers
        1. Rendering engine
        2. JavaScript engine
      3. OS platforms
      4. Display resolution
      5. Importance of compatibility
      6. Patching the differences – compatibility libraries
        1. HTML5 Shiv
        2. Modernizr
        3. Explorer Canvas
        4. HTML5 Boilerplate
      7. Before starting app development
      8. Summary
    9. 2. HTML5 Starter Kit: Useful Tools
      1. Choosing editors and IDEs
        1. Adobe Dreamweaver CS6
        2. Aptana Studio 3
        3. BlueGriffon 1.5.2
        4. Maqetta
        5. eXo
        6. Cloud9
      2. Choosing web servers
        1. Apache
        2. Apache Tomcat
        3. Jetty
        4. Tornado
        5. nginx
        6. LightTPD
        7. Node.js
      3. Prepackaged stacks
      4. Web browsers and add-ons
        1. Mozilla Firefox
        2. Google Chrome
        3. Safari
        4. Internet Explorer
        5. Opera
      5. HTTP proxies
        1. Charles
        2. Fiddler
      6. Summary
    10. 3. The App: Structure and Semantics
      1. Understanding page structure
        1. Navigation list
        2. Secondary content
      2. Metadata
      3. Microdata
      4. Favicons and icons
      5. CSS3 resets
        1. Individual sides
        2. Shorthand
      6. Sticky footer
      7. General styling
      8. Responsive web design and adaptive web design
        1. Importing CSS files using media queries
        2. Importing other CSS from our main CSS
        3. Using media queries as conditionals in our main CSS
      9. Summary
    11. 4. The App: Getting Movies Via Geolocation
      1. How it works
      2. The API
      3. A simple request
      4. Movies near you
        1. Self-invoking
        2. That becomes this
        3. Getting location
        4. Getting postal codes
        5. AJAX ain't just a cleaning product
        6. From postal codes to showtimes
      5. Summary
    12. 5. The App: Displaying Movie Data via CSS3
      1. Back to the browsers' babel tower
      2. CSS3 Magic – adding more styles to MovieNow
        1. Adding rounded corners
        2. Setting color
          1. Red, green, and blue
          2. Red, green, blue, and alpha
          3. Hue, saturation, and lightness
          4. Hue, saturation, lightness, and alpha
        3. Adding gradients
        4. Adding box shadows
        5. Adding text shadows
        6. Some tricks to fake 3D
      3. Movies and styles
        1. Styling our list
        2. Transitions
        3. Animations
      4. Choosing between transitions and animations
      5. Using media queries
      6. Applying CSS3 selectors
      7. Summary
    13. 6. The App: Trailers via HTML5 Video
      1. Introducing HTML5 video
      2. Implementing a video player
        1. Custom controls
          1. Styling
            1. Buttons and image sprites
            2. Styling seek and volume bars
            3. Features detection
            4. Styling sliders
          2. Adding interactions using JavaScript
            1. Initial settings
            2. Initializing video controllers
            3. Setting the seek slider
            4. Initializing the volume slider
            5. Functions to get DOM objects
            6. Play and pause
            7. Full screen
            8. Format time
            9. Controlling time
            10. Until the end of time
        2. Possible improvements
        3. Still not perfect
      3. Introducing HTML5 audio
      4. Implementing an audio player
        1. Custom controllers
          1. Styling
      5. How I learned to stop worrying and love Flash
      6. Summary
    14. 7. The App: Showing Ratings via Canvas
      1. Charting
      2. Preparing our code
      3. Everything depends on the context
        1. 2D context
          1. An overview of the Canvas 2D Drawing API
            1. Styles
            2. Font styles
            3. Drawing simple shapes
            4. Drawing complex shapes
          2. Drawing charts
        2. 3D context – WebGL and experimental WebGL
          1. Entering a tridimensional world
          2. Three.js
            1. Scene
            2. Camera
            3. Material
            4. Texture
            5. Mesh
            6. Geometry
            7. Animating our geometries
            8. Finishing up
      4. Summary
    15. 8. The App: Selection UI via Drag-and-Drop
      1. Adding showtimes
      2. Styling showtimes
      3. What a drag
        1. Handling drag with JavaScript
      4. Drop it
        1. Toggling the drop zone
        2. Transferring some data
        3. Displaying the results
      5. Summary
    16. 9. The App: Getting the Word Out via Twitter
      1. Registering our application
      2. How to tweet in MovieNow?
      3. Authenticating
        1. User not logged and/or application not authorized
        2. User logged in
        3. Adding some styles
      4. Posting tweets
        1. Service
        2. Applying HTML
        3. Adding more styles
        4. Adding JavaScript interactions
        5. Form validation support across browsers
      5. New input fields types
      6. Summary
    17. 10. The App: Consuming Tweets Via Web Workers
      1. Getting the data
      2. Capturing geocodes
      3. Anatomy of a Web Worker
      4. Using Web Workers to get nearby tweets
      5. Updating the event listener
      6. Styling the tweets
      7. Summary
    18. 11. Finishing Up: Debugging Your App
      1. What to look for
      2. Which tools to use
      3. Playing with HTML and CSS
      4. Step by step with JavaScript
        1. JavaScript console
        2. Analyzing load times
        3. JavaScript profiling
      5. Mobile debugging
      6. Web debugging proxies
      7. Summary
    19. 12. Finishing Up: Testing Your App
      1. Types of testing
      2. Unit testing
        1. Setting up your unit test
        2. Invoking your target
        3. Verifying the results
        4. Frameworks and tools
          1. JsTestDriver
          2. QUnit
          3. Sinon.JS
          4. Jasmine
      3. Functional testing
        1. The Selenium standalone server
        2. The php-webdriver connector from Facebook
        3. PHPUnit
      4. Browser testing
      5. Continuous integration
      6. Summary
    20. 13. Finishing Up: Performance
      1. Web Performance Optimization (WPO)
      2. Following standards
      3. Optimizing images
      4. Optimizing CSS
      5. JavaScript performance considerations
      6. Additional page performance considerations
        1. Server-side considerations
      7. Performance analytics
        1. Load times
        2. Profilers
      8. Summary
    21. Index