HTML5:
Essentials for Content Creators

About Luigi Montanez

luigimontanez.com/html5

History of Web Standards

  • 1991: HTML
  • 1996: CSS and JavaScript
  • 2000: XHTML
  • 2002: Tableless Web Design (CSS2)
  • 2005: AJAX
  • 2009: HTML5

HTML5 = HTML + CSS + JS

Use HTML5 today

Google Chrome Frame

A plugin for Internet Explorer that installs Google Chrome into Internet Explorer.

1 <meta http-equiv="X-UA-Compatible" content="chrome=1">

Graceful Degradation

  • Opposite of progressive enhancement
  • Start with the cutting edge, degrade gracefully
  • Accomplished with polyfills

Agenda

  • Semantic Tags
  • Microdata
  • CSS3
  • Graphics
  • Video and Audio
  • Web Apps
  • Recap with Q&A

Before HTML5

We use the <div> as a container element.

 1 <body>
 2 
 3   <div id="header">...</div>
 4 
 5   <div id="article">
 6     <p>...</p>
 7     <div class="figure">...</div>
 8     <p>...</p>
 9   </div>
10 
11   <div id="footer">...</div>
12 
13 </body>

New tags

  • <header>
  • <footer>
  • <section>
  • <article>
  • <aside>
  • <figure>
  • <figcaption>

With HTML5

 1 <body>
 2 
 3   <header>...</header>
 4 
 5   <article>
 6     <p>...</p>
 7 
 8     <figure>
 9       <img src="graphic.png" />
10       <figcaption>...</figcaption>
11     </figure>
12 
13     <p>...</p>
14   </article>
15 
16   <footer>...</footer>
17 
18 </body>

Supporting older browsers

Add support for styling via the HTML5 Shiv:

1 <!--[if lt IE 9]>
2   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
3 <![endif]-->

New tags can be used today.

Agenda

  • Semantic Tags
  • Microdata
  • CSS3
  • Graphics
  • Video and Audio
  • Web Apps
  • Recap with Q&A

Not everything gets an HTML tag

Custom Vocabularies

Are tags like <person> or <comment> appropriate? Probably not.

  • Microdata enables scoped name/value pairs for custom vocabularies.
  • Problem also solved by Microformats and RDFa.
  • HTML5 spec defines Microdata.

Microdata

 1 <section itemscope itemtype="http://data-vocabulary.org/Organization">
 2   <h1 itemprop="name">Sunlight Foundation</h1>
 3   <section itemprop="address">
 4     <span itemprop="street-address">1818 N Street NW, Suite 300</span>
 5     <span itemprop="locality">Washington<span>
 6     <span itemprop="region">DC</span>
 7     <span itemprop="postal-code">20036</span>
 8   </section>
 9   Phone: <span itemprop="tel">202-742-1520</span>
10 </section>

More defined at data-vocabulary.org, but you can create your own.

  • Person
  • Product
  • Review
  • Event
  • Offer

Used in Google Search Results

Microdata enables a smarter Web. Use it today!

Agenda

  • Semantic Tags
  • Microdata
  • CSS3
  • Graphics
  • Video and Audio
  • Web Apps
  • Recap with Q&A

Web Fonts

Embed any font. Open source fonts from Google.

1 @font-face {
2   font-family: 'Permanent Marker';
3   src: local('Permanent Marker'), url('/path/to/font.woff') format('woff');
4 }
5 h1.marker { font-family: 'Permanent Marker', sans-serif; }

Permanent Marker

Visual effects

  • Shadows
  • Gradients
  • Reflections
  • Animation
  • Transforms
  • Rounded corners

Awesome Logo

The famous Star Wars opening crawl can now be rendered using CSS3.

Browser Support

  • Many CSS3 features not available in Internet Explorer 9.
  • Older browsers just don't get the eye candy.

Agenda

  • Semantic Tags
  • Microdata
  • CSS3
  • Graphics
  • Video and Audio
  • Web Apps
  • Recap with Q&A

Canvas

Define bitmaps (pixel-by-pixel). Think Photoshop, not Illustrator

1 <canvas width="300" height="225">
2 ...
3 </canvas>

Used in DocumentCloud.

SVG

Scalable Vector Graphics. Think Illustrator, not Photoshop.

WebGL

A port of OpenGL - an open source 3D rendering engine.

Browser Support

  • Canvas: ExplorerCanvas for IE 7/8.
  • SVG: Raphael.js for all browsers. Falls back to VML for older IE.
  • WebGL: Will never be supported in Internet Explorer.

Agenda

  • Semantic Tags
  • Microdata
  • CSS3
  • Graphics
  • Video and Audio
  • Web Apps
  • Recap with Q&A

Video and Audio

1 <video id="video" src="movie.webm" autoplay controls></video>
2 <audio id="audio" src="sound.mp3" controls></audio>

Popcorn.js enables between video and HTML content.

Browser support:

  • No <video> support in Internet Explorer 8 and earlier.
  • <audio> support in all browsers is early.

Agenda

  • Semantic Tags
  • Microdata
  • CSS3
  • Graphics
  • Video and Audio
  • Web Apps
  • Recap with Q&A

Web Apps

New technologies enable rich web apps that don't rely on an Internet connection.

Example: a mobile web app for exit polling on Election Day 2012:

  • Online
    • Web app downloaded to iPhone using Cache Manifest
  • Offline
    • Web app remains fully functional
    • Results are saved to Local Storage in the browser
  • Online
    • Saved results are synced back to the server using WebSockets

Browser support: Android and iOS browsers today.

Agenda

  • Semantic Tags
  • Microdata
  • CSS3
  • Graphics
  • Video and Audio
  • Web Apps
  • Recap with Q&A

Recap

  • HTML5 Philosophy
  • Semantic Tags
  • Microdata
  • CSS3
  • Graphics
  • Video and Audio
  • Web Apps

Further Reading

Questions?