HTML5 Web Application Development By Example


HTML5 Web Application Development By Example
eBook: $26.99
Formats: PDF, PacktLib, ePub and Mobi formats
$22.94
save 15%!
Print + free eBook + free PacktLib access to the book: $71.98    Print cover: $44.99
$44.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Overview
Table of Contents
Author
Support
Sample Chapters
  • Packed with example applications that show you how to create rich, interactive applications and games.
  • Shows you how to use the most popular and widely supported features of HTML5.
  • Full of tips and tricks for writing more efficient and robust code while avoiding some of the pitfalls inherent to JavaScript.
  • Learn how to create professional looking applications using new CSS3 styles and responsive design.
  • Learn how to compress, package, and distribute your web applications on the Internet for fun or for profit.

Book Details

Language : English
Paperback : 276 pages [ 235mm x 191mm ]
Release Date : June 2013
ISBN : 1849695946
ISBN 13 : 9781849695947
Author(s) : J.M. Gustafson
Topics and Technologies : All Books, Web Development, Beginner's Guides

Table of Contents

Preface
Chapter 1: The Task at Hand
Chapter 2: Let's Get Stylish
Chapter 3: The Devil is in the Details
Chapter 4: A Blank Canvas
Chapter 5: Not So Blank Canvas
Chapter 6: Piano Man
Chapter 7: Piano Hero
Chapter 8: A Change in the Weather
Chapter 9: Web Workers Unite
Chapter 10: Releasing an App into the Wild
Appendix: Pop Quiz Answers
Index
  • Chapter 1: The Task at Hand
    • The components of an HTML5 application
    • Time for action – creating the HTML file
    • Time for action – creating the CSS file
    • Time for action – creating the JavaScript file
      • The dollar sign identifier
    • Creating our first application
    • Time for action – creating a tasklist
    • Time for action – removing a task from the list
    • Time for action – moving tasks within the list
    • HTML templates
    • Time for action – implementing a template
    • Time for action – editing a task in the list
    • Saving the state of the application
    • Time for action – creating a localStorage wrapper
    • Time for action – storing the tasklist
    • Time for action – loading the tasklist
    • Summary
    • Chapter 2: Let's Get Stylish
      • CSS3 overview
        • CSS3 colors
      • Rounded corners
      • Shadows
        • Box shadows
        • Text shadows
      • Time for action – styles in action
      • Backgrounds
        • Linear gradients
        • Radial gradients
        • Background images
        • CSS sprites
      • Time for action – adding a gradient and button images
      • Transitions
      • Transforms
      • Time for action – effects in action
      • Dynamic stylesheets
      • Time for action – adding a theme selector
      • Filling the window
      • Time for action – expanding the application
      • Summary
      • Chapter 3: The Devil is in the Details
        • HTML5 input types
          • Color
          • Date
          • Email
          • Number
          • Range
          • Time
          • URL
          • Datalist
          • Autofocus
        • Task details
        • Time for action – adding task details
        • Time for action – hiding task details
        • Custom data attributes
        • Data binding with custom attributes
        • Time for action – building a data model
        • Time for action – implementing the bindings
        • Time for action – loading the task list
        • Queuing up changes
        • Time for action – delaying the saves
        • Summary
        • Chapter 4: A Blank Canvas
          • HTML5 canvas
          • Getting a context
          • Canvas basics
            • Clearing the canvas
            • Context properties
          • Canvas pad
          • Time for action – creating a canvas pad
          • Time for action – showing the coordinates
          • Drawing lines
            • Paths and strokes
          • Time for action – using the mouse to draw
          • Changing context properties
          • Time for action – adding context properties
          • Creating a toolbar
          • Time for action – creating a toolbar
          • Time for action – implementing a reusable toolbar
          • Adding a toolbar
          • Time for action – adding the toolbar object
          • Time for action – initializing menu items
          • Adding drawing actions
          • Time for action – creating drawing actions
          • Time for action – saving and restoring
          • Adding drawing tools
          • Time for action – adding a line tool
            • Drawing rectangles
          • Time for action – adding a rectangle tool
            • Arcs and circles
          • Time for action – adding a circle tool
          • Summary
          • Chapter 5: Not So Blank Canvas
            • Drawing text
            • Time for action – adding a text tool
            • Transformations
            • Time for action – adding an Ellipse tool
            • Time for action – exporting an image
            • Handling touch events
            • Time for action – adding touch event handlers
            • Photo Pad
            • Time for action – creating Photo Pad
            • The File API
            • Time for action – loading an image file
            • Adding effects
            • Time for action – the imageEffects object
            • Time for action – black and white
            • Time for action – sepia
            • Image distortion
            • Time for action – making waves
            • Summary
            • Chapter 6: Piano Man
              • HTML5 audio overview
                • The HTML5 <audio> element
                • The HTML5 Audio API
              • Loading audio files
              • Time for action – creating an AudioManager object
              • HTML5 piano application
              • Time for action – creating a virtual piano
              • Time for action – loading the notes
              • Time for action – playing the notes
              • Keyboard events
              • Time for action – adding keyboard events
              • Volume and sustain controls
              • Time for action – adding a sustain control
              • Time for action – adding a volume control
              • Audio tools
                • FreeSound.org
                • Audacity
              • Summary
              • Chapter 7: Piano Hero
                • Creating Piano Hero
                • Time for action – creating the splash panel
                • Time for action – creating the game panel
                • Time for action – creating the controller
                • Creating an audio sequencer
                • Time for action – creating AudioSequencer
                • Playing a song
                • Time for action – adding the audio sequencer
                • Creating animated notes
                • Time for action – adding notes
                • Time for action – animating the notes
                • Handling user input
                • Time for action – checking the notes
                • Ending the game
                • Time for action – creating the results panel
                • Summary
                • Chapter 8: A Change in the Weather
                  • Introduction to Ajax
                    • Making Ajax requests
                  • Time for action – creating a weather widget
                  • Time for action – getting XML data
                  • Time for action – getting JSON data
                  • HTML5 Geolocation API
                  • Time for action – getting geolocation data
                  • Using web services
                    • Weather Underground
                    • Cross-site scripting and JSONP
                  • Time for action – calling the weather service
                  • Summary
                  • Chapter 9: Web Workers Unite
                    • Web workers
                      • Spawning a web worker
                      • Implementing a web worker
                    • Time for action – using a web worker
                    • The Mandelbrot set
                    • Time for action – implementing the algorithm
                    • Creating a Mandelbrot application
                    • Time for action – creating a Mandelbrot application
                    • Time for action – Mandelbrot using a web worker
                    • Debugging web workers
                    • Summary
                      • Appendix: Pop Quiz Answers
                        • Chapter 1, The Task at Hand
                        • Chapter 2, Let's Get Stylish
                        • Chapter 3, The Devil is in the details
                        • Chapter 4, A Blank Canvas
                        • Chapter 5, Not So Blank Canvas
                        • Chapter 6, Piano Man
                        • Chapter 7, Piano Hero
                        • Chapter 8, A Change in the Weather
                        • Chapter 9, Web Workers Unite
                        • Chapter 10, Releasing an App into the Wild

                        J.M. Gustafson

                        J.M. Gustafson is a professional software engineer who started programming on a VIC-20 in the 80s and hasn't stopped since. He has a degree in Computer Science and has been working with web technologies writing enterprise applications for nearly his entire career. Currently, he spends most of his time writing web apps and services in C# and JavaScript. In his free time he enjoys spending time with his family, playing music, writing, and the outdoors. When he's not doing any of that, you can find him doing (what else?) more programming. These days he is particularly interested in writing games using HTML5 and JavaScript, many of which you can find on his website at WorldTreeSoftware.com.
                        Sorry, we don't have any reviews for this title yet.

                        Code Downloads

                        Download the code and support files for this book.


                        Submit Errata

                        Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


                        Errata

                        - 1 submitted: last submission 20 Jan 2014

                        On Page number : 35

                        The code :
                        function loadTaskList()
                        {
                        var tasks = appStorage.getObject("taskList");

                        ...

                        Should read:
                        var tasks = appStorage.getValue("taskList"); 

                        Errata type: Code | Page number: 35

                         


                        On page number 44, the follwoing text:

                        "First, we'll change the style for the <div id="main"> element which contains the task-name text field and task list."
                        should be:
                        "First, we'll change the style for the <div id="main"> element which contains the new-task-name text field and task list."

                        and

                        "We also want to change the task-name text input field to take up the entire width of the main section by setting its width property to 98%."

                        should be:

                        "We also want to change the new-task-name text input field to take up the entire width of the main section by setting its width property to 98%."

                        and the css ID #task-name should be #new-task-name code that reads:
                        " #task-name
                        {
                            font-size: 1em;
                            display: block; "

                        should be:
                        " #new-task-name
                        {
                            font-size: 1em;
                            display: block; "

                        Errata type: Code | Page number: 44

                        We also want to change the task-name text input field to take up the entire width of the main section by setting its width property to 98%. This will give it a little wiggle room for the borders of the textbox; 100% will make it burst at the seams:

                        #task-name
                        {
                        font-size: 1em;
                        display: block;
                        width: 98%;
                        }

                        Correction: The text should read "change the new-task-name text input" and css id should be #new-task-name.


                         

                        Sample chapters

                        You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

                        Frequently bought together

                        HTML5 Web Application Development By Example +    HTML5 Data and Services Cookbook =
                        50% Off
                        the second eBook
                        Price for both: €32.60

                        Buy both these recommended eBooks together and get 50% off the cheapest eBook.

                        What you will learn from this book

                        • Build your first HTML5 application in next to no time
                        • Develop fun applications and games
                        • Learn about UI and UX using the new features in CSS3
                        • Create dynamic, responsive applications that will work on any device
                        • Use the top features in HTML5 to create fun, useful applications

                        In Detail

                        HTML5's new features have made it a real application development platform with widespread adoption throughout the industry for this purpose. Being able to create one application that can run on virtually any device from phone to desktop has made it the first choice among developers. Although JavaScript has been around for a while now, it wasn’t until the introduction of HTML5 that we have been able to create dynamic, feature-rich applications rivaling those written for the desktop.

                        HTML5 Web Application Development By Example will give you the knowledge you need to build rich, interactive web applications from the ground up, incorporating the most popular HTML5 and CSS3 features available right now. This book is full of tips, tools, and example applications that will get you started writing your own applications today.

                        HTML5 Web Application Development By Example shows you how to write web applications using the most popular HTML5 and CSS3 features. This book is a practical, hands-on guide with numerous real-world and relevant examples.

                        You will learn how to use local storage to save an application’s state and incorporate CSS3 to make it look great. You will also learn how to use custom data attributes to implement data binding. We’ll use the new Canvas API to create a drawing application, then use the Audio API to create a virtual piano, before turning it all into a game.

                        The time to start using HTML5 is now. And HTML5 Web Application Development by Example will give you the tips and know-how to get started.

                        Approach

                        The best way to learn anything is by doing. The author uses a friendly tone and fun examples to ensure that you learn the basics of application development. Once you have read this book, you should have the necessary skills to build your own applications.

                        Who this book is for

                        If you have no experience but want to learn how to create applications in HTML5, this book is the only help you'll need. Using practical examples, HTML5 Web Application Development by Example will develop your knowledge and confidence in application development.

                        Code Download and Errata
                        Packt Anytime, Anywhere
                        Register Books
                        Print Upgrades
                        eBook Downloads
                        Video Support
                        Contact Us
                        Awards Voting Nominations Previous Winners
                        Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
                        Resources
                        Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software