Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

repo for html5 workshop

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 images
Octocat-spinner-32 javascript
Octocat-spinner-32 labs
Octocat-spinner-32 labs_finished
Octocat-spinner-32 labs_instructions
Octocat-spinner-32 HTML5_workshop_handouts.pdf
Octocat-spinner-32 README.md
Octocat-spinner-32 index.html
README.md

HTML5 Workshop

So what is this? It's an HTML5 workshop that I'm giving (first run at Strange Loop https://thestrangeloop.com/) The goal is simple: get people up to speed on HTML5. Here's the conference blurb:

Conference Blurb

Interested in HTML5? Want a chance to play around with the latest and greatest in web app development? This workshop is for you! We'll cover feature detection, web forms, the new HTML elements, take a spin around the canvas, audio, video and we'll finish up with offline/local storage and the history API.

Before you can take advantage of a new HTML5 feature, you have to make sure a given browser supports it. This section will cover the basics of detection as well as getting the most out of rocking cool libraries like Modernizer. We'll also look at just what to do when a browser doesn't support a feature you're trying to leverage.

Along with a new human type-able doctype, HTML5 introduces several new semantic elements. Recognizing that nearly every website in existence has a header, a footer and some navigation divs, HTML5 gives us a header, a footer and a nav element along with a few others. HTML5 seeks to pave cowpaths, not force the web to bend to its ways...

One of the most exciting features of HTML5 is the canvas, a space you can use to draw anything from shapes to text to, well, anything! From basic drawing to graphs to full fledged games, canvas opens up a whole new world of possibility, a world sans browser plugins. Speaking of the absence of plugins, we'll look at what it takes to add video and audio to your pages. We'll also take a look at the history API showing how you can easily manipulate where the browser thinks it has been.

As we create richer and richer clients, we're writing more and more JavaScript. While the JS engines are getting faster and faster, there are cases where it'd be very handy to run scripts in the background. Web workers give us just such an opportunity. We'll also talk about the pros and cons of having a database in the browser.

Prerequisites

Attendees are expected to have a laptop (or be very good at quickly making friends with someone that has one). On said laptop, you should have at least one (ideally multiple) modern browser:

In addition, you should have a text editor though you can certainly load the labs into an IDE if you wish. The labs do not require any additional installation beyond cloning the repository to some location on your hard drive.

Your Guide

For those that are curious about me, here's my bio:

Nathaniel T. Schutta is a senior software engineer focussed on making usable applications. A proponent of polyglot programming, Nate has written two books on Ajax and speaks regularly at various worldwide conferences, No Fluff Just Stuff symposia, universities, and Java user groups. In addition to his day job, Nate is an adjunct professor at the University of Minnesota where he teaches students to embrace dynamic languages. Nate is also doing everything he can to rid the world of bad presentations, he helped write a book on Presentations Patterns.

You can follow me on Twitter: @ntschutta

You can read my mostly dead blog: or check out my eventual reboot:

Something went wrong with that request. Please try again.