HTML5 Platform

a 10K Foot View

the HTML5 Platform

aka "Open Web Platform"

  • HTML5 Spec
  • Markup
  • Rich Media
  • Presentation
  • JavaScript APIs
  • Web Applications

an HTML5 Strategy

  • When, Where & Why
  • How
  • Resources

Our Survey

23 reponses. goo.gl/YfiaV

  • Q1: The Overview
    • Graphics (70%), APIs (48%), Realtime (48%)
  • Q2: In-Depth
    • RESTful (43%), new elements (43%), WebSockets (39%)
  • Q3: Dead Horse
    • new elements (30%), video & audio (22%)
  • Q4: Applied (65%) vs Overview (30%)
    • I got both slots, so you get both!

Q5: HTML5 platform is…

  • (70%) what I need to learn for tomorrow
  • (48%) steadily becoming the present reality
  • (35%) the platform of the future



View all at goo.gl/YfiaV

What is HTML5?

  • a W3C and WHATWG specification
  • a follow-on to HTML4 and XHTML1
  • a markup syntax
  • current behaviors, documented
  • a standardized JavaScript API
  • a simple DOCTYPE
  • a backlash against…
    • XML & SGML?
    • Flash and Plugins?

(Forgiving) Parsing Algorithm

  • inline support for SVG and MathML
  • specified parse error handling
    • e.g. <b><i>some text</b></i>
  • all compliant browsers now parse identically
  • => interoperable, compatible document trees

Standardized DOM Parse Tree

  • <html>, <head>, and <body> are optional!

  • “smart” auto-closing tags

    • <h1>…, <p>, <li>, <dt>, <dd>
  • <table> implies <tbody>

    • <thead>, <tfoot> auto-close
    • <tr>, <th> and <td> auto-close
  • use with cautionlike operator precidence

Web Application APIs

  • DOM, CSSOM, Timers and Events
  • History & Navigation
  • Storage & Offline support
  • RESTful & Realtime Communications
  • Focus, Editing, and Drag & Drop

New Markup

  • new tags
  • new attributes
  • up next
  • & rich media, a bit later

to get started…

<!DOCTYPE html>
<h1>Look, HTML5!

yep, that's all you need

to get started… in practice

<!DOCTYPE html>
<head>
  <meta charset='utf-8'>
  <title>HTML5 in Practice
<body>
  <h1>Look, HTML5!

because charset and title are important.

And yes, you may close your tags if you want.

(You can even write so it parses as HTML5 and XHTML2…)

HTML5 Markup

summary of HTML5 differences

  • New & Changed Elements & Attributes
    • sectioning & structural
    • improved semantics
    • enhanced forms
  • Obsolete Elements and Attributes
    • CSS instead of presentational markup
    • eliminate redundant & harmful elements

Structure & Sectioning

Structured Document

<!DOCTYPE html>
<head>
    <meta charset='utf-8'>
    <title>HTML5 Strutured
<body>
    <header><nav></nav></header>
    <aside></aside>
    <main>
        <section><aside></aside></section>
        <article></article>
        <section>
            <article><aside></aside> </article>
        </section>
    </main>
    <footer><nav></nav></footer>

Figure Semantics

Other Elements

  • <time>, <wbr>
  • behavior: <details>, <summary>
  • media: <canvas> <audio>, <video>, <track>, <source>
  • language: <bdi>, <ruby>, <rt>, <rp>
  • redefined: <b>, <s>, <u>, <i>, <cite>, <dl>, <hr>
  • redefined: <address>, <script>, <small>, <strong>

Enhanced Forms

  • behavior

    • placeholder
    • autofocus
    • readonly
    • validation
  • <input type=…>

    • email, url, tel
    • search
    • number, range

    • warning: fragmented browser support

New Forms Elements

  • <datalist>
  • <output>
  • <progress>
  • <meter>
  • <keygen>

Rich Media

a.k.a. visual & audio stimulation

<touch>, <taste> & <smell> would go here, if they existed!

Graphics: Images

Embedding

Graphics: Vectors

SVG Example

D3's Collision Detection

Graphics: 2D Canvas

2D Canvas Example

D3's Canvas Heatmap

Graphics: 3D WebGL

  • WebGL is based on OpenGL ES 2.0
    • support stats: 72% on desktop, 9% on mobile
  • 3D WebGL Rendering Context
    • buffers — generic, render, frame, depth and stencil
    • typed arrays, variables & textures
    • Vertex Shaders
    • Fragment Shaders
    • linking variables, textures and shader programs

3D WebGL Example

Video and Audio

a nightmare of politics, formats & proprietary codecs

  • <video>
    • MP4: IE, Chrome, Safari, iOS, Android
    • WebM: Chrome, Firefox, Opera
  • <audio>
    • AAC: IE, Chrome, Safari, iOS, Android
    • MP3: IE, Chrome, Safari, iOS, Android
    • Vorbis: Chrome, Firefox, Opera
  • <source> for alternate formats
    • use with media queries
  • <track> for timed text or data feeds

Video Example


                <video controls>
                  <source src="demo/video/birds.m4v" type="video/mp4" />
                  <source src="demo/video/birds.ogv" type="video/ogg" />
                </video>
                

Presentation

  • CSS 1, 2.1, 3 (and 4?)
    • for both HTML & SVG
  • inline style="…" attributes
  • inline <style> tags
  • linked stylesheets
  • media queries, inside and out

Media Queries

Backgrounds

Boxes

Text

Transformations

Animations

JavaScript APIs

  • DOM & CSSOM
  • JSON, HTML & XML Parsing
  • History & Navigation
  • Storage & Offline
  • Canvas & rendering
  • Communications
    • Security
    • Cross-document
    • RESTful & JSON
    • Realtime

Document Object Model

a.k.a. the DOM

  • for HTML, SVG & CSS
  • dataset
  • classList
  • events

Powerful APIs

  • History API
  • Geolocation
  • Drag and Drop

Storage, client-side

Canvas APIs

  • .fill() and .stroke()
  • .beginPath()
    • .lineTo() .arcTo()
    • .closePath()
  • .drawImage()
  • .transform() .rotate() .scale()
  • .clip()

Video & Audio

  • methods
    • .load()
    • .pause()
    • .play()
    • .canPlayType()
  • events
    • loaded, playing, ended, …
    • progress, timeupdate, …
    • seeking, pause, volumechange, …

Document Communcations

RESTful Communcations

(REST: Representational State Transfer) - AJAX, XHR2, JSON and JSONP - Security, same-origin policy and CORS - DOMParser for parsing XML or HTML - XMLSerializer to convert back to XHTML - XPath for selections and filtering


(More in our hands-on session)

Realtime Communcations


(More in our hands-on session)

Strategy for HTML5?

  • Why & When would I use it?
  • Where would I need it?
  • How can I get started?

When and Why?

When and Why?

No, for reals!

Where?

  • For Markup?
    • html5shiv and use everywhere!
    • <section>, <article> & <nav> away!
  • For Web App?
    • if mission critical, go incremental
      • test & use
      • fallbacks (or not)
    • if less critical, live on the edge!
      • test & error

        your browser does not support AWESOMENESS

How?

  • Start small & expand
    • Don't bite off too much!
    • It'll get better over time
  • Connect & Collaborate
    • great to learn from others
    • share what you learn

How?

Pay for it

  • time
    • blogs & research
    • learning & doing
  • money
    • books
    • courses
    • classes
  • outsource
    • doing
    • reviewing
    • architecting

How?

Tooling

How?

Languages as Tools

How?

Testing

We could go on…

But really, take a look at Dimi Navrotskyy's
great list of frontend dev links.

Essential Resources

Demos & the Edge

Books, Courses & Collections

Shane's 10K Foot

HTML5 Platform

Overview

I'd be happy to talk tech with you over coffee.