HTML5, the open web, and what it means for you -Tech4Africa
Upcoming SlideShare
Loading in...5
×
 

HTML5, the open web, and what it means for you -Tech4Africa

on

  • 2,062 views

 

Statistics

Views

Total Views
2,062
Views on SlideShare
2,046
Embed Views
16

Actions

Likes
4
Downloads
35
Comments
0

3 Embeds 16

http://lanyrd.com 7
http://us-w1.rockmelt.com 5
http://feeds.feedburner.com 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5, the open web, and what it means for you -Tech4Africa HTML5, the open web, and what it means for you -Tech4Africa Presentation Transcript

    • HTML5The Open Web, and what it means for you
    • Mozilla is aglobal non-profit dedicatedto putting youin control ofyour onlineexperience andshaping thefuture of theWeb for thepublic good
    • @robertnyman
    • What is HTML5?
    • Semantics APIs
    • must die!!! rea lly Not
    • HTML5 semantics
    • <!DOCTYPE html>
    • <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    • <meta charset="utf-8">
    • <header> <hgroup><article> <nav><section> <figure><aside> <figcaption><footer>
    • HTML5 Doctor
    • HTML5 Forms
    • http://www.quirksmode.org/html5/inputs.htmlhttp://www.quirksmode.org/html5/inputs_mobile.htmlhttp://wufoo.com/html5/
    • Video
    • <video controls src="nasa.webm"></video>
    • <video controls> <source src="nasa.mp4"></source> <source src="nasa.webm"></source> <p>Hello, older web browser</p></video>
    • <video src="http://vid.ly/4w2g7d?content=video"controls></video>
    • Canvas
    • <canvas id="my-canvas" width="500" height="500"> I am canvas</canvas>
    • var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d");context.fillStyle = "#f00";context.fillRect(0, 0, 100, 100);context.clearRect(40, 40, 20, 20);
    • pdf.js
    • History API
    • window.history.pushState(state, title, url);
    • var url = "http://robertnyman.com",title = "My blog",state = { address : url};window.history.pushState(state, title, url);
    • Web Sockets
    • LiveConnect Forever Frame HTTP Long-Polling and XHR Streaming What came before WebSockets? AJAX HTTP PollingCross Frame Communication
    • var ws = new WebSocket("ws://robertnyman.com/wsmagic");// Send dataws.send("Some data");// Close the connectionws.close();
    • var ws = new WebSocket("ws://robertnyman.com/wsmagic");// When connection is openedws.onopen = function () { console.log("Connection opened!");};// When you receive a messagews.onmessage = function (evt) { console.log(evt.data);};// When you close the connectionws.onclose = function () { console.log("Connection closed");};// When an error occurredws.onerror = function () { console.log("An error occurred");};
    • web-socket-js Socket.IO
    • Offline Web Applications
    • if (window.addEventListener) { /* Works well in Firefox and Opera with the Work Offline option in the File menu. Pulling the ethernet cable doesnt seem to trigger it */ window.addEventListener("online", isOnline, false); window.addEventListener("offline", isOffline, false);}else { /* Works in IE with the Work Offline option in the File menu and pulling the ethernet cable */ document.body.ononline = isOnline; document.body.onoffline = isOffline;}
    • // Poll the navigator.onLine propertysetInterval(function () { console.log(navigator.onLine);}, 1000);
    • <!DOCTYPE html><html manifest="offline.appcache"><head>...
    • CACHE MANIFEST# VERSION 10CACHE:offline.htmlbase.cssFALLBACK:online.css offline.cssNETWORK:/live-updates
    • WebGL
    • squareVertexPositionBuffer = gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);vertices = [ 1.0, 1.0, 0.0, -1.0, 1.0, 0.0, 1.0, -1.0, 0.0, -1.0, -1.0, 0.0];gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);squareVertexPositionBuffer.itemSize = 3;squareVertexPositionBuffer.numItems = 4;}
    • var teapotPositions = new Float32Array([ 17.83489990234375, 0, 30.573999404907227,16.452699661254883, -7.000179767608643, 30.573999404907227, 16.223100662231445,-6.902520179748535, 31.51460075378418, 17.586000442504883, 0, 31.51460075378418,16.48940086364746, -7.015810012817383, 31.828100204467773, 17.87470054626465, 0,31.828100204467773, 17.031099319458008, -7.246280193328857, 31.51460075378418,18.46190071105957, 0, 31.51460075378418, 17.62779998779297, -7.500199794769287,30.573999404907227, 19.108800888061523, 0, 30.573999404907227, 12.662699699401855,-12.662699699401855, 30.573999404907227, 12.486100196838379, -12.486100196838379,31.51460075378418, 12.690999984741211, -12.690999984741211, 31.828100204467773,13.10789966583252, -13.10789966583252, 31.51460075378418, 13.56719970703125,-13.56719970703125, 30.573999404907227, 7.000179767608643, -16.452699661254883,30.573999404907227, 6.902520179748535, -16.223100662231445, 31.51460075378418,7.015810012817383, -16.48940086364746, 31.828100204467773, 7.246280193328857,-17.031099319458008, 31.51460075378418, 7.500199794769287, -17.62779998779297,30.573999404907227, 0, -17.83489990234375, 30.573999404907227, 0, -17.586000442504883,31.51460075378418, 0, -17.87470054626465, 31.828100204467773, 0, -18.46190071105957,31.51460075378418, 0, -19.108800888061523, 30.573999404907227, 0, -17.83489990234375,30.573999404907227, -7.483870029449463, -16.452699661254883, 30.573999404907227,-7.106579780578613, -16.223100662231445, 31.51460075378418, 0, -17.586000442504883,31.51460075378418, -7.07627010345459, -16.48940086364746, 31.828100204467773, 0,-17.87470054626465, 31.828100204467773, -7.25383996963501, -17.031099319458008,31.51460075378418, 0, -18.46190071105957, 31.51460075378418, -7.500199794769287,-17.62779998779297, 30.573999404907227, 0, -19.108800888061523, 30.573999404907227,-13.092700004577637, -12.662699699401855, 30.573999404907227, -12.667499542236328,-12.486100196838379, 31.51460075378418, -12.744799613952637, -12.690999984741211,31.828100204467773, -13.11460018157959, -13.10789966583252, 31.51460075378418,-13.56719970703125, -13.56719970703125, 30.573999404907227, -16.61389923095703,-7.000179767608643, 30.573999404907227, -16.291099548339844, -6.902520179748535,31.51460075378418, -16.50950050354004, -7.015810012817383, 31.828100204467773,-17.033599853515625, -7.246280193328857, 31.51460075378418, -17.62779998779297,-7.500199794769287, 30.573999404907227, -17.83489990234375, 0, 30.573999404907227,-17.586000442504883, 0, 31.51460075378418, -17.87470054626465, 0, 31.828100204467773,-18.46190071105957, 0, 31.51460075378418, -19.108800888061523, 0, 30.573999404907227,-17.83489990234375, 0, 30.573999404907227, -16.452699661254883, 7.000179767608643,
    • Questions
    • Is it ready? Will HTML5 be around?
    • Is it ready?
    • Is it ready?
    • Is it ready?http://caniuse.com/
    • Will HTML5 be around?
    • HTML5 -The beauty of the Open Web
    • We are drowning ininformation, while starvingfor wisdom - E.O. Wilson
    • Robert Nymanrobertnyman.com/speaking/ robnyman@mozilla.comrobertnyman.com/html5/ Twitter: @robertnymanrobertnyman.com/css3/