HTML5 and Beyond Shiny New Toys and Tools to Use Them

HTML5 and Beyond Shiny New Toys and Tools to Use Them

Any questions?

Copyright infringement?

Syndrome from Incredibles

All new, all amazing, all better…

Edna Mode from the Incredibles: I never look back, it distracts me from the now

A kind of escapism…

Get cape, wear cape, fly

And it is dangerous…

Good and eval

Talking about HTML5…

the specs on HTML5

Talking about mobile!

People with phones

Promise or threat?

iPhone without an SDK

Jobs' original vision - no third party native apps

Fragmentation

Scared wizard of oz

Security concerns

This is what a hacker looks like - according to the press

The “mobile web”…

Awkward

Waiting is not helping…

Cookie waiting

The web is what you make it

What a strange font…

Bell centennial demo

Bell Centennial

Missing bits?

ink traps

Designing for context

ink traps

Applying the font fixes it…

Printed phonebook

Let's use tech that way!

CSS

Transforms

Bumblebee

3D Transforms

Optimus Prime

Transitions

        element {
          transition: property, property time delay;
        }
       
Transition

Animations

Buy this now!

Flexbox

  • One
  • Two
  • Three

Canvas

Controlling GIFs…

JSGIF Bookmarklet

Irregular shapes…

irregular shape rollovers

http://codepo8.github.io/irregular-shape-rollover

Image masking

image masking

http://christianheilmann.com/2013/06/15/image-masking-with-html5-canvas/

WebRTC

Face to GIF

The making of Face to GIF

What we need

screwdrivers Photo by “daveonflickr”

Based on standards

screwheads Photo by “grendelkhan”

What we use

Powerdrill Photo by “misslyrh”

Which results in…

worn out screw Photo by instructables

More power tools…

Remove a stripped screw

Creatures of habit

Lock not where it is

ASM.js

Remove a stripped screw

Things that are happening…

hide and seek

A new beginning…

Firefox OS

Upgrading the mobile world

Nokia couldn't take photos
  • Targeted at new, emerging markets
  • Very affordable hardware
  • No credit card needed - client billing
  • Web technologies through and through
  • Full hardware access
  • 19 mobile partners, 5 hardware partners

Full hardware access

  • Vibration API
  • Screen Orientation
  • Geolocation API
  • Mouse Lock API
  • Open WebApps
  • Network Information API
  • Battery Status API
  • Alarm API
  • Push Notifications API
  • WebFM API / FMRadio
  • WebPayment
  • IndexedDB
  • Ambient light sensor
  • Proximity sensor
  • Notification
  • Device Storage API
  • Browser API
  • TCP Socket API
  • Contacts API
  • systemXHR
  • WebTelephony
  • WebSMS
  • Idle API
  • Settings API
  • Power Management API
  • Mobile Connection API
  • WiFi Information API
  • WebBluetooth
  • Permissions API
  • Network Stats API
  • Camera API
  • Time/Clock API
  • Attention screen
  • Voicemail

Web activities

  • configure
  • costcontrol
  • dial
  • open
  • pick
  • record
  • save-bookmark
  • share
  • view
  • new, f.e type: “websms/sms” or “webcontacts/contact”

Find app by content

WebRTC data channel / Cubeslam

Cubeslam

Shadow DOM / Web Components

  • DOM access is the bottleneck ("jQuery" culture doesn't help)
  • We re-invent the browser rendering of UI elements after the browser rendered
  • Shadow DOM and web components break that cycle
  • This is friggin amazing!

Browsers are becoming editors

Developer tools

What does the future bring?

Kittens in 3D

It is not a certain hardware

Never forget data carriers

It is not a single browser

Only internet explorer

It is you

  • Use what browsers and standards bodies give you
  • File bugs and be a pain the **** - not on Twitter, on the bugtrackers of browsers
  • Create amazing experiences based on user needs – not more toys!
  • Always bet on the web, it worked for me

Thanks!

that's all firefox

Take the survey!

senchacon app