HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo
Upcoming SlideShare
Loading in...5
×
 

HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo

on

  • 8,123 views

 

Statistics

Views

Total Views
8,123
Views on SlideShare
6,661
Embed Views
1,462

Actions

Likes
0
Downloads
23
Comments
1

22 Embeds 1,462

http://www.revista.espiritolivre.org 908
https://hacks.mozilla.org 267
http://hacks.mozilla.org 83
http://www-ig-opensocial.googleusercontent.com 35
http://newsblur.com 32
http://www.newsblur.com 29
http://drbeat.li 27
http://webdesigning.collected.info 18
http://thewebdesign.collected.info 12
http://www.tux-es.org 11
http://127.0.0.1 10
http://lanyrd.com 7
http://us-w1.rockmelt.com 7
https://www.linkedin.com 3
http://htmlfive.collected.info 3
http://www.hanrss.com 3
http://webcache.googleusercontent.com 2
http://1kpl.us 1
http://html55.collected.info 1
http://xianguo.com 1
http://fever.lightcorp.net 1
https://webcache.googleusercontent.com 1
More...

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…
  • Free Download : http://gg.gg/114bb

    Hey Guyz and girls, Today I am gonna show you perfact tool, Remember This video is old, But the download link with hack is brand new. Its very simple to using this tool and here are some instructions in video. Please REDOWNLOAD. Don't Forget to Comment Subscribe & Rate My Video :)

    Virus Scan :- This file has been scanned with avast! Antivirus. -- Status: FILE IS CLEANN.

    Copyright © 2014. All Rights Reserved
    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 - MDN Hack Day, Sao Paulo HTML5, The Open Web, and what it means for you - MDN Hack Day, Sao Paulo Presentation Transcript

  • HTML5 &The Open Web
  • Mozilla is aglobal non-profit dedicatedto putting youin control ofyour onlineexperience andshaping thefuture of theWeb for thepublic good
  • @robertnyman
  • What is HTML5?
  • Semantics APIs
  • Platforms!
  • must die!!! rea lly Not
  • HTML5 semantics
  • <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  • <meta charset="utf-8">
  • <header> <aside><article> <nav><section> <figure><footer> <figcaption>
  • 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>
  • Canvas
  • pdf.js
  • <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);
  • 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
  • Geolocation
  • if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (position) { alert(position.coords.latitude + ", " + position.coords.longitude); });}
  • 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?
  • http://caniuse.com/
  • Will HTML5 be around?
  • Try new things
  • Robert Nymanrobertnyman.com/speaking/ robnyman@mozilla.comrobertnyman.com/html5/ Twitter: @robertnymanrobertnyman.com/css3/