What can HTML5 do for you? If you're a web developer looking to use this new version of HTML, you might be wondering how much has really changed. Head First HTML5 introduces the key features -- including improved text elements, audio and video tags, geolocation, and the Canvas drawing surface -- and uses concrete examples and exercises to apply and reinforce these concepts.
Table of Contents
- A Note Regarding Supplemental Files
- Advance Praise for Head First HTML5 Programming
- Praise for other books from Eric Freeman & Elisabeth Robson
- Authors of Head First HTML5 Programming
How to Use this Book: Intro
- Who is this book for?
- We know what you’re thinking
- And we know what your brain is thinking
- Metacognition: thinking about thinking
- Here’s what WE did:
- Here’s what YOU can do to bend your brain into submission
- Read me
- Software requirements
- The technical review team
- Even more Acknowledgments!
- Safari® Books Online
- 1. Getting to Know HTML5: Welcome to Webville
- Declaring a variable
- How to name your variables
- Getting Expressive
- Doing things over and over...
- Making more decisions... and, adding a catchall
- How to bake your very own DOM
- A first taste of the DOM
- Test drive the planets
- You can’t mess with the DOM until the page has fully loaded
- So, what else is a DOM good for anyway?
- The Phrase-O-Matic
3. Events, Handlers and All that Jazz: A Little Interaction
- Get ready for Webville Tunes
- Getting started...
- But nothing happens when I click “Add Song”
- Handling Events
- Making a Plan...
- Getting access to the “Add Song” button
- Giving the button a click handler
- A closer look at what just happened...
- Getting the song name
- How do we add a song to the page?
- How to create a new element
- Adding an element to the DOM
- Put it all together...
- ...and take it for a test drive
- Review—what we just did
- How to add the Ready Bake Code...
- Integrating your Ready Bake Code
- Expanding your vocabulary
- How to add your own functions
- How a function works
- Local and Global Variables
- Knowing the scope of your local and global variables
- The short lives of variables
- Oh, did we mention functions are also values?
- What you can do with functions as values
- Did someone say “Objects”?!
- Thinking about properties...
- Some things you can do with objects
- Let’s talk about passing objects to functions
- Our next showing is at....
- Testing at the drive-in
- Objects can have behavior too...
- Meanwhile back at Webville Cinema...
- But we know that can’t be quite right...
- Let’s get the movie parameter out of there...
- Now what?
- Adding the “this” keyword
- A test drive with “this”
- How to create a constructor
- Now let’s use our constructor
- How does this really work?
- Test drive your constructor right off the factory floor
- What is the window object anyway?
- A closer look at window.onload
- Another look at the document object
- A closer look at document.getElementById
- One more object to think about: your element objects
5. Making Your HTML Location Aware: Geolocation
- Location, Location, Location
- The Lat and Long of it...
- How the Geolocation API determines your location
- Just where are you anyway?
- Test drive your location
- What we just did...
- How it all fits together
- Revealing our secret location...
- Writing the code to find the distance
- Location-enabled test drive
- Mapping your position
- How to add a Map to your Page
- Displaying the Map
- Test drive your new heads-up display
- Sticking a Pin in it...
- Testing the marker
- Meanwhile back at the Geolocation API...
- Can we talk about your accuracy?
- Accuracy Test
- “Wherever you go, there you are”
- Getting the app started
- Reworking our old code...
- Time to get moving!
- You’ve got some Options...
- The world of timeouts and maximum age...
- How to specify options
- Let’s finish this app!
- Integrating our new function
- And one more time...
6. Talking to The Web: Extroverted Apps
- Mighty Gumball wants a Web app
- A little more background on Mighty Gumball
- Just a quick start...
- So how do we make requests to web services?
- Move over XML, meet JSON
- A quick example using JSON
- Let’s get to work!
- Displaying the gumball sales data
- Watch Out, Detour Ahead!
- How to set up your own Web Server
- How to set up your own Web Server, continued
- Back to the code
- Let’s test this already!
- Impressing the client...
- Reworking our code to make use of JSON
- The Home Stretch...
- Moving to the Live Server
- A Live Test Drive...
- It’s a cliffhanger!
- Remember, we left you with a cliffhanger? A bug
- So, what do we do now?!
- What Browser Security Policy?
- So, what are our options?
- Meet JSONP
- But what is the “P” in JSONP for?
- Let’s update the Mighty Gumball web app
- Test drive your new JSONP-charged code
- Improving Mighty Gumball
- Step 1: Taking care of the script element...
- Step 2: Now it’s time for the timer
- A time-driven test drive
- Step 3: Reimplementing JSONP
- We almost forgot: watch out for the dreaded browser cache
- One more TIME test drive
- How to remove duplicate sales reports
- Updating the JSON URL to include the lastreporttime
- Test drive lastReportTime
- A Special Message from Chapter 7...
7. Bringing Out Your Inner Artist: The Canvas
- Our new start-up: TweetShirt
- Checking out the “comps”
- Let’s drop in on the TweetShirt crew...
- How to get a canvas into your web page
- Test drive your new canvas
- How to see your canvas
- Drawing on the Canvas
- A little Canvas test drive...
- A closer look at the code
- Failing gracefully
- TweetShirt: the Big Picture
- First, let’s get the HTML in place
- Now, let’s add the <form>
- Writing the drawSquare function
- Time for a test drive!
- Add the call to fillBackgroundColor
- Meanwhile, back at TweetShirt.com...
- Drawing with Geeks
- Breaking down the arc method
- A little taste of using the arc
- I say degree, you say radian
- Back to writing the TweetShirt circle code
- Writing the drawCircle function...
- Welcome back...
- Getting your tweets
- Test driving Tweets
- Giving drawText a spin
- Completing the drawText function
- A quick test drive and then LAUNCH!
- Yet another test drive
8. Not Your Father’s TV: Video ...With Special Guest Star “Canvas”
- Meet Webville TV
- The HTML, let’s get it done...
- Plug that set in and test it out...
- How does the video element work?
- Closely inspecting the video attributes...
- What you need to know about video formats
- The contenders
- How to juggle all those formats...
- How to be even more specific with your video formats
- I was told there would be APIs?
- A little content “programming” on Webville TV
- Implementing Webville TV’s playlist
- So what’s up with that event handler code?
- How to write the “end of video” handler
- Another test drive...
- How the canPlayType method works
- We need your help!
- Step inside the booth, let’s take a look...
- Unpacking the Demo Unit
- Inspecting the rest of the factory code
- The setEffect and setVideo handlers
- And here are the helper functions
- That new demo machine smell...test drive time!
- Getting our demo videos ready...
- Implementing the video controls
- Implementing the rest of the video controls
- Another test drive!
- Taking care of a loose end...
- And another...
- Switching test videos
- It’s time for special effects
- The FX plan
- Time to get those effects buttons working
- How video processing works
- How to process video using a scratch buffer
- Implementing a scratch buffer with Canvas
- How to position the video and canvases
- Writing the code to process the video
- How to create the buffer
- How to process the buffer
- Now we need to write some effects
- A film noir test drive
- The Big Test Drive
- If only it were a perfect world...
- How to use error events
- Test Crash!
- Where can you go from here?
9. Storing Things Locally: Web Storage
- How browser storage works (1995 - 2010)
- How HTML5 Web Storage works
- Note to self...
- Time for a test drive!
- Were Local Storage and the Array separated at birth?
- Getting serious about stickies
- Creating the interface
- Time for another test drive!
- Completing the user interface
- Yet another test drive!
- We need to stop for a little scheduled service
- Do-It-Yourself maintenance
- We have the technology...
- Reworking our app to use an array
- Converting createSticky to use an array
- What needs to change?
- Putting it all together
- Putting it all together continued...
- Test Drive!
- Deleting sticky notes
- The deleteSticky function
- How do you select a sticky to delete?
- How to get the sticky to delete from the event
- Delete the sticky from the DOM, too
- But of course we can!
- Update the user interface so we can specify a color
- JSON.stringify, it’s not just for Arrays
- Using the new stickyObj
- Test drive sticky note colors
- Now that you know localStorage, how are you going to use it?
- The Dreaded Slow Script
- When single-threaded goes BAD
- Adding another thread of control to help
- How Web Workers work
- Your first Web Worker...
- Writing Manager.js
- Receiving messages from the worker
- Now let’s write the worker
- Serving up a test drive
- Virtual Land Grab
- Take a look around
- How to compute a Mandelbrot Set
- How to use multiple workers
- Let’s build the Fractal Explorer app
- Creating workers, and giving them tasks...
- Writing the code
- Getting the workers started
- Implementing the worker
- A little pit stop...
- Time to get back on the road...
- Back to the code: how to process the worker’s results
- Psychedelic test drive
- Another test drive
- Fitting the canvas to the browser window
- The anal-retentive chef coder
- Time for the final test drive!
- Congratulations! You made it to the end
A. Leftovers: The Top Ten Topics (We Didn’t Cover)
- #1 Modernizr
- #2 Audio
- #3 jQuery
- #4 XHTML is dead, long live XHTML
- #5 SVG
- #6 Offline web apps
- #7 Web Sockets
- #8 More canvas API
- #9 Selectors API
- #10 But, there’s even more!
- The HTML5 Guide to New Construction
- Adding style to your new construction with CSS3
- B. This isn’t goodbye
- About the Authors
|j / →||Next chapter|
|k / ←||Previous chapter|
|f||Increase font size|
|g||Decrease font size|
|t||Toggle the table of contents|
Site wide shortcuts
|h||Go to the homepage|
|r||Go to recommended page or get a new recommendation|
|u||Scroll up to top of page|
|esc||Close modal windows|
|?||Toggle this panel|
|/||Focus search (where present)|
|j / →||Select next card|
|k / ←||Select previous card|
|↑||Select card above it|
|↓||Select card below it|
|tab||Focus next element inside card|
|esc||Remove selection from card|
|m||Show more cards (if more button present)|
Focused Cards (?)
|d||Remove recommended card|
|Shift enter||Go to chapter|
Shortcuts may be disabled from the settings page.