Welcome to the New Web

Welcome to the New Web

Open sign

The Snow Cruiser

The arctic explorer

A marvel of technology

The arctic explorer

Running tests…

Shipping…

Failing…

Arctic explorer trapped in snow

Old approaches, new challenge…

Evolution

When we hear HTML5 we think…

Toyota Motor Triathlon Race Car Concept Photo by Ian Muttoo

The reason is the hype

Hype cycle

The hype cycle

HTML5 is the new Flash!

Apple killed Flash

Demo time!

Shiny Demos

Shinydemos.com

Failing to impress…

Laughing about demos breaking but it is an indicator of a not reliable platform

@andrewdobson at #createtheweb

Backwards compatible?

How to tell what is HTML5 - it doesn't work in IE

Business reports

HTML5 reports

A few truths…

A new challenge

Responsive Design Photo by Jason Weaver

There is no "one browser"

Connectivity will always be an issue

Fat hamster stuck

No love from hardware providers

clamped wheel
Photo by Ricardo Liberato

Paths to enlightenment

Hype cycle

The hype cycle

HTML5 should be thought of as this…

Volkswagen Schwimmwagen VW Schwimmwagen

Which can look like this…

Quadski Gibbs sports quadski

HTML5 = necessary evolution from documents to apps

Great ideas

  • Not breaking the web (backwards compatible)
  • Consistent parsing of markup
  • Multimedia access
  • Richer forms

It is not about what we can add, it is about what we can't take away.

  • Web distribution (URLs)
  • Very small footprint
  • Adaptation to environment
  • Offline storage
  • Best mean to achieve a goal
  • Atomic updates
  • Simple maintenance / localisation

Liberating hardware

Hardware blowup

http://arewemobileyet.com

Firefox OS - we're on it!

Firefox OS

https://wiki.mozilla.org/Gaia/Hacking

Emulator/previewer in the browser

B2G desktop item

R2D2B2G

Install page as app…

Install page as app

R2D2B2G

Profit

App in B2G

Knowledge merger

Hardware blowup

Christie Fidura at #createtheweb

Conversion as a way in…

Bananabread demo

Tools

Edge suite

http://html.adobe.com/

Browser: consumption and creation

Firefox devtools

Remote debugging

Remote debugging

https://hacks.mozilla.org/2012/08/remote-debugging-on-firefox-for-android/

Shifting our approach

Magic is outside your comfort zone

Escalator engineering

Escalators Photo by Joe Buckingham

Doing your part…

Responsive Design

        @media only screen and (max-width: 1024px) {
          body { background: yellow; }
        }
        @media only screen and (max-width: 780px) {
          body { background: blue; }
        }
        @media only screen and (max-width: 480px) {
        body { background: red; }
        }
      

Testing responsive design

Responsive view in Firefox

Demo | Screencast

Client-side validation for lazy bones

        <label>City:<input name="city" required></label>
      

Multimedia with simple fallback

        <video controls>
          <source src="hedgehogs.mp4" type="video/mp4">
          <source src="hedgehogs.webm" type="video/webm">
          <a href="hedgehogs.mp4">
            <img src="hedgehogs.jpg" alt="Frolicking hedgehogs">
          </a>
          Click image above to download video
        </video>
      

Animation and transitions in CSS

Ball?
Foxkeh
        #foxkeh { position: absolute; top: 200px; left: 300px;
          animation: move 2s alternate ease-in-out infinite;}
        @keyframes move { from {left: 300px;} to {left: 700px} }
        #ball { width: 100px; height: 100px;
                background: blue; transition: 1s; }
        #ball:hover { border-radius: 50% 50%;
                      background: red; }
      

Offline and local storage

        localStorage.setItem('keepthis','for later')
        localStorage.getItem('keepthis') // => 'for later'
      

Drag and drop upload and conversion

Thumbnails generated client side

http://thewebrocks.com/demos/canvasthumber/

Making it dead simple

Guitar Hero - now on Linux

Prototyping extended HTML5

X-tags examples

Web Components - X-Tag - WebGame stub - Mortar

Simple packaging

Yeoman.io

Yeoman.io

Re-think tooling

editor showing the final gameplay amended changing the code

Bret Victor - inventing on principle

Re-think explaining

Learnable programming

It is happening already!

Adobe brackets

Adobe Brackets

The time is now, the place is here…

Today is the tomorrow you expected yesterday

Shaun Tan: the lost thing

Thanks

impatient cookie monster