SlideShare une entreprise Scribd logo
1  sur  78
Télécharger pour lire hors ligne
HTML5 &
The Open Web
Mozilla is a
global non-
profit dedicated
to putting you
in control of
your online
experience and
shaping the
future of the
Web for the
public 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>
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);
Geolocation
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function (position) {
        alert(position.coords.latitude + ", " + position.coords.longitude);
    });
}
Drag and Drop
Fullscreen
<button id="view-fullscreen">Fullscreen</button>

<script type="text/javascript">
(function () {
    var viewFullScreen = document.getElementById("view-fullscreen");
    if (viewFullScreen) {
        viewFullScreen.addEventListener("click", function () {
            var docElm = document.documentElement;
            if (docElm.mozRequestFullScreen) {
                docElm.mozRequestFullScreen();
            }
            else if (docElm.webkitRequestFullScreen) {
                docElm.webkitRequestFullScreen();
            }
        }, false);
    }
})();
 </script>
mozRequestFullScreenWithKeys?
html:-moz-full-screen {
    background: red;
}

html:-webkit-full-screen {
    background: red;
}
Camera
<input type="file" id="take-picture" accept="image/*">
takePicture.onchange = function (event) {
    // Get a reference to the taken picture or chosen file
    var files = event.target.files,
        file;
    if (files && files.length > 0) {
        file = files[0];
        // Get window.URL object
        var URL = window.URL || window.webkitURL;

         // Create ObjectURL
         var imgURL = URL.createObjectURL(file);

         // Set img src to ObjectURL
         showPicture.src = imgURL;

         // Revoke ObjectURL
         URL.revokeObjectURL(imgURL);
     }
};
Boot to Gecko
https://github.com/andreasgal/B2G

https://github.com/andreasgal/gaia
Telephony & SMS
// Telephony object
var tel = navigator.mozTelephony;

// Check if the phone is muted (read/write property)
console.log(tel.muted);

// Check if the speaker is enabled (read/write property)
console.log(tel.speakerEnabled);

// Place a call
var call = tel.dial("123456789");
// Receiving a call
tel.onincoming = function (event) {
    var incomingCall = event.call;

     // Get the number of the incoming call
     console.log(incomingCall.number);

     // Answer the call
     incomingCall.answer();
};

// Disconnect a call
call.hangUp();
// SMS object
var sms = navigator.mozSMS;

// Send a message
sms.send("123456789", "Hello world!");

// Recieve a message
sms.onrecieved = function (event) {
    // Read message
    console.log(event.message);
};
Battery
// Get battery level in percentage
var batteryLevel = battery.level * 100 + "%";

// Get whether device is charging or not
var chargingStatus = battery.charging;

// Time until the device is fully charged
var batteryCharged = battery.chargingTime;

// Time until the device is discharged
var batteryDischarged = battery.dischargingTime;
battery.addEventLister("levelchange", function () {
    // Device's battery level changed
}, false);

battery.addEventListener("chargingchange", function () {
    // Device got plugged in to power, or unplugged
}, false);

battery.addEventListener("chargingtimechange", function () {
    // Device's charging time changed
}, false);

battery.addEventListener("dischargingtimechange", function () {
    // Device's discharging time changed
}, false);
Vibration
(function () {
    document.querySelector("#vibrate-one-second").addEventListener("click",
        function () {
            navigator.mozVibrate(1000);
        }, false);

    document.querySelector("#vibrate-twice").addEventListener("click",
        function () {
            navigator.mozVibrate([200, 100, 200, 100]);
        }, false);



    document.querySelector("#vibrate-long-time").addEventListener("click",
        function () {
            navigator.mozVibrate(5000);
        }, false);

    document.querySelector("#vibrate-off").addEventListener("click",
        function () {
            navigator.mozVibrate(0);
        }, false);
})();
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 Nyman
robertnyman.com/speaking/ robnyman@mozilla.com
robertnyman.com/html5/    Twitter: @robertnyman
robertnyman.com/css3/

Contenu connexe

Tendances

JavaScript APIs - The Web is the Platform - .toster conference, Moscow
JavaScript APIs - The Web is the Platform - .toster conference, MoscowJavaScript APIs - The Web is the Platform - .toster conference, Moscow
JavaScript APIs - The Web is the Platform - .toster conference, MoscowRobert Nyman
 
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 PauloHTML5, 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 PauloRobert Nyman
 
Yearning jQuery
Yearning jQueryYearning jQuery
Yearning jQueryRemy Sharp
 
Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with WingsRemy Sharp
 
Javascript is your (Auto)mate
Javascript is your (Auto)mateJavascript is your (Auto)mate
Javascript is your (Auto)mateCodemotion
 
HTML5 APIs - Where no man has gone before! - Altran
HTML5 APIs - Where no man has gone before! - AltranHTML5 APIs - Where no man has gone before! - Altran
HTML5 APIs - Where no man has gone before! - AltranRobert Nyman
 
Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)Remy Sharp
 
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New WorldJavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New WorldRobert Nyman
 
Creating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of todayCreating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of todaygerbille
 
Modern frontend development with VueJs
Modern frontend development with VueJsModern frontend development with VueJs
Modern frontend development with VueJsTudor Barbu
 
Building a js widget
Building a js widgetBuilding a js widget
Building a js widgetTudor Barbu
 
Developing for Mobile
Developing for MobileDeveloping for Mobile
Developing for MobileRemy Sharp
 
JavaScript APIs - The Web is the Platform
JavaScript APIs - The Web is the PlatformJavaScript APIs - The Web is the Platform
JavaScript APIs - The Web is the PlatformRobert Nyman
 
Websockets talk at Rubyconf Uruguay 2010
Websockets talk at Rubyconf Uruguay 2010Websockets talk at Rubyconf Uruguay 2010
Websockets talk at Rubyconf Uruguay 2010Ismael Celis
 
Introduction to ECMAScript 2015
Introduction to ECMAScript 2015Introduction to ECMAScript 2015
Introduction to ECMAScript 2015Tomasz Dziuda
 

Tendances (20)

JavaScript APIs - The Web is the Platform - .toster conference, Moscow
JavaScript APIs - The Web is the Platform - .toster conference, MoscowJavaScript APIs - The Web is the Platform - .toster conference, Moscow
JavaScript APIs - The Web is the Platform - .toster conference, Moscow
 
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 PauloHTML5, 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
 
Yearning jQuery
Yearning jQueryYearning jQuery
Yearning jQuery
 
Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with Wings
 
Javascript is your (Auto)mate
Javascript is your (Auto)mateJavascript is your (Auto)mate
Javascript is your (Auto)mate
 
HTML5 APIs - Where no man has gone before! - Altran
HTML5 APIs - Where no man has gone before! - AltranHTML5 APIs - Where no man has gone before! - Altran
HTML5 APIs - Where no man has gone before! - Altran
 
Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)
 
JavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New WorldJavaScript & HTML5 - Brave New World
JavaScript & HTML5 - Brave New World
 
Progressive What Apps?
Progressive What Apps?Progressive What Apps?
Progressive What Apps?
 
Web components
Web componentsWeb components
Web components
 
Creating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of todayCreating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of today
 
Modern frontend development with VueJs
Modern frontend development with VueJsModern frontend development with VueJs
Modern frontend development with VueJs
 
jQuery: Events, Animation, Ajax
jQuery: Events, Animation, AjaxjQuery: Events, Animation, Ajax
jQuery: Events, Animation, Ajax
 
Building a js widget
Building a js widgetBuilding a js widget
Building a js widget
 
Sane Async Patterns
Sane Async PatternsSane Async Patterns
Sane Async Patterns
 
HTML,CSS Next
HTML,CSS NextHTML,CSS Next
HTML,CSS Next
 
Developing for Mobile
Developing for MobileDeveloping for Mobile
Developing for Mobile
 
JavaScript APIs - The Web is the Platform
JavaScript APIs - The Web is the PlatformJavaScript APIs - The Web is the Platform
JavaScript APIs - The Web is the Platform
 
Websockets talk at Rubyconf Uruguay 2010
Websockets talk at Rubyconf Uruguay 2010Websockets talk at Rubyconf Uruguay 2010
Websockets talk at Rubyconf Uruguay 2010
 
Introduction to ECMAScript 2015
Introduction to ECMAScript 2015Introduction to ECMAScript 2015
Introduction to ECMAScript 2015
 

En vedette

Firefox OS Introduction at Bontouch
Firefox OS Introduction at BontouchFirefox OS Introduction at Bontouch
Firefox OS Introduction at BontouchRobert Nyman
 
S tree model - building resilient cities
S tree model - building resilient citiesS tree model - building resilient cities
S tree model - building resilient citiesRobert Nyman
 
Firefox OS learnings & visions, WebAPIs - budapest.mobile
Firefox OS learnings & visions, WebAPIs - budapest.mobileFirefox OS learnings & visions, WebAPIs - budapest.mobile
Firefox OS learnings & visions, WebAPIs - budapest.mobileRobert Nyman
 
HTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAXHTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAXRobert Nyman
 
Using HTML5 for a great Open Web
Using HTML5 for a great Open WebUsing HTML5 for a great Open Web
Using HTML5 for a great Open WebRobert Nyman
 
HTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - AltranHTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - AltranRobert Nyman
 
HTML5 and CSS3 – exploring mobile possibilities - Dynabyte event
HTML5 and CSS3 – exploring mobile possibilities - Dynabyte eventHTML5 and CSS3 – exploring mobile possibilities - Dynabyte event
HTML5 and CSS3 – exploring mobile possibilities - Dynabyte eventRobert Nyman
 
JavaScript - Like a Box of Chocolates - jsDay
JavaScript - Like a Box of Chocolates - jsDayJavaScript - Like a Box of Chocolates - jsDay
JavaScript - Like a Box of Chocolates - jsDayRobert Nyman
 
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - SpainJS
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - SpainJSBringing the Open Web & APIs to 
mobile devices with Firefox OS - SpainJS
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - SpainJSRobert Nyman
 
What are you going to do with your life? Geek Meet Västerås
What are you going to do with your life? Geek Meet VästeråsWhat are you going to do with your life? Geek Meet Västerås
What are you going to do with your life? Geek Meet VästeråsRobert Nyman
 
Android TV Introduction - Stockholm Android TV meetup
Android TV Introduction - Stockholm Android TV meetupAndroid TV Introduction - Stockholm Android TV meetup
Android TV Introduction - Stockholm Android TV meetupRobert Nyman
 
The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016Robert Nyman
 
An Introduction To HTML5
An Introduction To HTML5An Introduction To HTML5
An Introduction To HTML5Robert Nyman
 
The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016Robert Nyman
 
Five Stages of Development - Nordic.js
Five Stages of Development  - Nordic.jsFive Stages of Development  - Nordic.js
Five Stages of Development - Nordic.jsRobert Nyman
 

En vedette (15)

Firefox OS Introduction at Bontouch
Firefox OS Introduction at BontouchFirefox OS Introduction at Bontouch
Firefox OS Introduction at Bontouch
 
S tree model - building resilient cities
S tree model - building resilient citiesS tree model - building resilient cities
S tree model - building resilient cities
 
Firefox OS learnings & visions, WebAPIs - budapest.mobile
Firefox OS learnings & visions, WebAPIs - budapest.mobileFirefox OS learnings & visions, WebAPIs - budapest.mobile
Firefox OS learnings & visions, WebAPIs - budapest.mobile
 
HTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAXHTML5 - The 2012 of the Web - Adobe MAX
HTML5 - The 2012 of the Web - Adobe MAX
 
Using HTML5 for a great Open Web
Using HTML5 for a great Open WebUsing HTML5 for a great Open Web
Using HTML5 for a great Open Web
 
HTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - AltranHTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - Altran
 
HTML5 and CSS3 – exploring mobile possibilities - Dynabyte event
HTML5 and CSS3 – exploring mobile possibilities - Dynabyte eventHTML5 and CSS3 – exploring mobile possibilities - Dynabyte event
HTML5 and CSS3 – exploring mobile possibilities - Dynabyte event
 
JavaScript - Like a Box of Chocolates - jsDay
JavaScript - Like a Box of Chocolates - jsDayJavaScript - Like a Box of Chocolates - jsDay
JavaScript - Like a Box of Chocolates - jsDay
 
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - SpainJS
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - SpainJSBringing the Open Web & APIs to 
mobile devices with Firefox OS - SpainJS
Bringing the Open Web & APIs to 
mobile devices with Firefox OS - SpainJS
 
What are you going to do with your life? Geek Meet Västerås
What are you going to do with your life? Geek Meet VästeråsWhat are you going to do with your life? Geek Meet Västerås
What are you going to do with your life? Geek Meet Västerås
 
Android TV Introduction - Stockholm Android TV meetup
Android TV Introduction - Stockholm Android TV meetupAndroid TV Introduction - Stockholm Android TV meetup
Android TV Introduction - Stockholm Android TV meetup
 
The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016
 
An Introduction To HTML5
An Introduction To HTML5An Introduction To HTML5
An Introduction To HTML5
 
The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016
 
Five Stages of Development - Nordic.js
Five Stages of Development  - Nordic.jsFive Stages of Development  - Nordic.js
Five Stages of Development - Nordic.js
 

Similaire à HTML5 & The Open Web - at Nackademin

WebAPIs & WebRTC - Spotify/sthlm.js
WebAPIs & WebRTC - Spotify/sthlm.jsWebAPIs & WebRTC - Spotify/sthlm.js
WebAPIs & WebRTC - Spotify/sthlm.jsRobert Nyman
 
HTML for the Mobile Web, Firefox OS - All Things Open - 2014-10-22
HTML for the Mobile Web, Firefox OS - All Things Open - 2014-10-22HTML for the Mobile Web, Firefox OS - All Things Open - 2014-10-22
HTML for the Mobile Web, Firefox OS - All Things Open - 2014-10-22Frédéric Harper
 
Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09
Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09
Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09Frédéric Harper
 
HTML pour le web mobile, Firefox OS - Devfest Nantes - 2014-11-07
HTML pour le web mobile, Firefox OS - Devfest Nantes - 2014-11-07HTML pour le web mobile, Firefox OS - Devfest Nantes - 2014-11-07
HTML pour le web mobile, Firefox OS - Devfest Nantes - 2014-11-07Frédéric Harper
 
Mozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJSMozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJSRobert Nyman
 
HTML, not just for desktops: Firefox OS - Congreso Universitario Móvil - 201...
HTML, not just for desktops: Firefox OS - Congreso Universitario Móvil - 201...HTML, not just for desktops: Firefox OS - Congreso Universitario Móvil - 201...
HTML, not just for desktops: Firefox OS - Congreso Universitario Móvil - 201...Frédéric Harper
 
Bare-knuckle web development
Bare-knuckle web developmentBare-knuckle web development
Bare-knuckle web developmentJohannes Brodwall
 
Writing Maintainable JavaScript
Writing Maintainable JavaScriptWriting Maintainable JavaScript
Writing Maintainable JavaScriptAndrew Dupont
 
Javascript Frameworks for Joomla
Javascript Frameworks for JoomlaJavascript Frameworks for Joomla
Javascript Frameworks for JoomlaLuke Summerfield
 
Mobile Software Engineering Crash Course - C06 WindowsPhone
Mobile Software Engineering Crash Course - C06 WindowsPhoneMobile Software Engineering Crash Course - C06 WindowsPhone
Mobile Software Engineering Crash Course - C06 WindowsPhoneMohammad Shaker
 
Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...
 	Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W... 	Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...
Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...Robert Nyman
 
Leaving Flatland: getting started with WebGL
Leaving Flatland: getting started with WebGLLeaving Flatland: getting started with WebGL
Leaving Flatland: getting started with WebGLgerbille
 
Service Worker - Reliability bits
Service Worker - Reliability bitsService Worker - Reliability bits
Service Worker - Reliability bitsjungkees
 
Is html5-ready-workshop-110727181512-phpapp02
Is html5-ready-workshop-110727181512-phpapp02Is html5-ready-workshop-110727181512-phpapp02
Is html5-ready-workshop-110727181512-phpapp02PL dream
 
Taking Web Apps Offline
Taking Web Apps OfflineTaking Web Apps Offline
Taking Web Apps OfflinePedro Morais
 
Webgl para JavaScripters
Webgl para JavaScriptersWebgl para JavaScripters
Webgl para JavaScriptersgerbille
 

Similaire à HTML5 & The Open Web - at Nackademin (20)

WebAPIs & WebRTC - Spotify/sthlm.js
WebAPIs & WebRTC - Spotify/sthlm.jsWebAPIs & WebRTC - Spotify/sthlm.js
WebAPIs & WebRTC - Spotify/sthlm.js
 
HTML for the Mobile Web, Firefox OS - All Things Open - 2014-10-22
HTML for the Mobile Web, Firefox OS - All Things Open - 2014-10-22HTML for the Mobile Web, Firefox OS - All Things Open - 2014-10-22
HTML for the Mobile Web, Firefox OS - All Things Open - 2014-10-22
 
Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09
Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09
Firefox OS, une plateforme à découvrir - IO Saglac - 2014-09-09
 
HTML pour le web mobile, Firefox OS - Devfest Nantes - 2014-11-07
HTML pour le web mobile, Firefox OS - Devfest Nantes - 2014-11-07HTML pour le web mobile, Firefox OS - Devfest Nantes - 2014-11-07
HTML pour le web mobile, Firefox OS - Devfest Nantes - 2014-11-07
 
Mozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJSMozilla Web Apps - Super-VanJS
Mozilla Web Apps - Super-VanJS
 
HTML, not just for desktops: Firefox OS - Congreso Universitario Móvil - 201...
HTML, not just for desktops: Firefox OS - Congreso Universitario Móvil - 201...HTML, not just for desktops: Firefox OS - Congreso Universitario Móvil - 201...
HTML, not just for desktops: Firefox OS - Congreso Universitario Móvil - 201...
 
Bare-knuckle web development
Bare-knuckle web developmentBare-knuckle web development
Bare-knuckle web development
 
Writing Maintainable JavaScript
Writing Maintainable JavaScriptWriting Maintainable JavaScript
Writing Maintainable JavaScript
 
Intro to HTML5
Intro to HTML5Intro to HTML5
Intro to HTML5
 
Html5 For Jjugccc2009fall
Html5 For Jjugccc2009fallHtml5 For Jjugccc2009fall
Html5 For Jjugccc2009fall
 
Moustamera
MoustameraMoustamera
Moustamera
 
Javascript Frameworks for Joomla
Javascript Frameworks for JoomlaJavascript Frameworks for Joomla
Javascript Frameworks for Joomla
 
Mobile Software Engineering Crash Course - C06 WindowsPhone
Mobile Software Engineering Crash Course - C06 WindowsPhoneMobile Software Engineering Crash Course - C06 WindowsPhone
Mobile Software Engineering Crash Course - C06 WindowsPhone
 
Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...
 	Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W... 	Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...
Bringing the open web and APIs to mobile devices with Firefox OS - Whisky W...
 
Leaving Flatland: getting started with WebGL
Leaving Flatland: getting started with WebGLLeaving Flatland: getting started with WebGL
Leaving Flatland: getting started with WebGL
 
Service Worker - Reliability bits
Service Worker - Reliability bitsService Worker - Reliability bits
Service Worker - Reliability bits
 
Is html5-ready-workshop-110727181512-phpapp02
Is html5-ready-workshop-110727181512-phpapp02Is html5-ready-workshop-110727181512-phpapp02
Is html5-ready-workshop-110727181512-phpapp02
 
Javascript - Beyond-jQuery
Javascript - Beyond-jQueryJavascript - Beyond-jQuery
Javascript - Beyond-jQuery
 
Taking Web Apps Offline
Taking Web Apps OfflineTaking Web Apps Offline
Taking Web Apps Offline
 
Webgl para JavaScripters
Webgl para JavaScriptersWebgl para JavaScripters
Webgl para JavaScripters
 

Plus de Robert Nyman

Have you tried listening?
Have you tried listening?Have you tried listening?
Have you tried listening?Robert Nyman
 
Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017Robert Nyman
 
Introduction to Google Daydream
Introduction to Google DaydreamIntroduction to Google Daydream
Introduction to Google DaydreamRobert Nyman
 
Predictability for the Web
Predictability for the WebPredictability for the Web
Predictability for the WebRobert Nyman
 
The Future of Progressive Web Apps - Google for Indonesia
The Future of Progressive Web Apps - Google for IndonesiaThe Future of Progressive Web Apps - Google for Indonesia
The Future of Progressive Web Apps - Google for IndonesiaRobert Nyman
 
Google tech & products
Google tech & productsGoogle tech & products
Google tech & productsRobert Nyman
 
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...Robert Nyman
 
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, JapanProgressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, JapanRobert Nyman
 
The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...Robert Nyman
 
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...Robert Nyman
 
The web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - IstanbulThe web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - IstanbulRobert Nyman
 
The web - What it has, what it lacks and where it must go
The web - What it has, what it lacks and where it must goThe web - What it has, what it lacks and where it must go
The web - What it has, what it lacks and where it must goRobert Nyman
 
Google, the future and possibilities
Google, the future and possibilitiesGoogle, the future and possibilities
Google, the future and possibilitiesRobert Nyman
 
Developer Relations in the Nordics
Developer Relations in the NordicsDeveloper Relations in the Nordics
Developer Relations in the NordicsRobert Nyman
 
What is Developer Relations?
What is Developer Relations?What is Developer Relations?
What is Developer Relations?Robert Nyman
 
New improvements for web developers - frontend.fi, Helsinki
New improvements for web developers - frontend.fi, HelsinkiNew improvements for web developers - frontend.fi, Helsinki
New improvements for web developers - frontend.fi, HelsinkiRobert Nyman
 
Mobile phone trends, user data & developer climate - frontend.fi, Helsinki
Mobile phone trends, user data & developer climate - frontend.fi, HelsinkiMobile phone trends, user data & developer climate - frontend.fi, Helsinki
Mobile phone trends, user data & developer climate - frontend.fi, HelsinkiRobert Nyman
 
Google & gaming, IGDA - Helsinki
Google & gaming, IGDA - HelsinkiGoogle & gaming, IGDA - Helsinki
Google & gaming, IGDA - HelsinkiRobert Nyman
 
Firefox OS - mobile trends, learnings & visions, at FOKUS FUSECO Forum 2014
Firefox OS - mobile trends, learnings & visions, at FOKUS FUSECO Forum 2014Firefox OS - mobile trends, learnings & visions, at FOKUS FUSECO Forum 2014
Firefox OS - mobile trends, learnings & visions, at FOKUS FUSECO Forum 2014Robert Nyman
 
Streem - Water footprint, behavior and awareness
Streem - Water footprint, behavior and awarenessStreem - Water footprint, behavior and awareness
Streem - Water footprint, behavior and awarenessRobert Nyman
 

Plus de Robert Nyman (20)

Have you tried listening?
Have you tried listening?Have you tried listening?
Have you tried listening?
 
Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017
 
Introduction to Google Daydream
Introduction to Google DaydreamIntroduction to Google Daydream
Introduction to Google Daydream
 
Predictability for the Web
Predictability for the WebPredictability for the Web
Predictability for the Web
 
The Future of Progressive Web Apps - Google for Indonesia
The Future of Progressive Web Apps - Google for IndonesiaThe Future of Progressive Web Apps - Google for Indonesia
The Future of Progressive Web Apps - Google for Indonesia
 
Google tech & products
Google tech & productsGoogle tech & products
Google tech & products
 
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
 
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, JapanProgressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
 
The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...
 
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
 
The web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - IstanbulThe web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - Istanbul
 
The web - What it has, what it lacks and where it must go
The web - What it has, what it lacks and where it must goThe web - What it has, what it lacks and where it must go
The web - What it has, what it lacks and where it must go
 
Google, the future and possibilities
Google, the future and possibilitiesGoogle, the future and possibilities
Google, the future and possibilities
 
Developer Relations in the Nordics
Developer Relations in the NordicsDeveloper Relations in the Nordics
Developer Relations in the Nordics
 
What is Developer Relations?
What is Developer Relations?What is Developer Relations?
What is Developer Relations?
 
New improvements for web developers - frontend.fi, Helsinki
New improvements for web developers - frontend.fi, HelsinkiNew improvements for web developers - frontend.fi, Helsinki
New improvements for web developers - frontend.fi, Helsinki
 
Mobile phone trends, user data & developer climate - frontend.fi, Helsinki
Mobile phone trends, user data & developer climate - frontend.fi, HelsinkiMobile phone trends, user data & developer climate - frontend.fi, Helsinki
Mobile phone trends, user data & developer climate - frontend.fi, Helsinki
 
Google & gaming, IGDA - Helsinki
Google & gaming, IGDA - HelsinkiGoogle & gaming, IGDA - Helsinki
Google & gaming, IGDA - Helsinki
 
Firefox OS - mobile trends, learnings & visions, at FOKUS FUSECO Forum 2014
Firefox OS - mobile trends, learnings & visions, at FOKUS FUSECO Forum 2014Firefox OS - mobile trends, learnings & visions, at FOKUS FUSECO Forum 2014
Firefox OS - mobile trends, learnings & visions, at FOKUS FUSECO Forum 2014
 
Streem - Water footprint, behavior and awareness
Streem - Water footprint, behavior and awarenessStreem - Water footprint, behavior and awareness
Streem - Water footprint, behavior and awareness
 

Dernier

Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Allon Mureinik
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024The Digital Insurer
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j
 

Dernier (20)

Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 

HTML5 & The Open Web - at Nackademin

  • 2. Mozilla is a global non- profit dedicated to putting you in control of your online experience and shaping the future of the Web for the public good
  • 3.
  • 6. Semantics APIs
  • 8.
  • 9. must die!!! rea lly Not
  • 11.
  • 14. <header> <aside> <article> <nav> <section> <figure> <footer> <figcaption>
  • 15. Video
  • 16.
  • 17.
  • 18.
  • 19.
  • 21.
  • 23.
  • 24.
  • 26. <canvas id="my-canvas" width="500" height="500"> I am canvas </canvas>
  • 27. 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);
  • 29.
  • 30.
  • 31.
  • 32. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (position) { alert(position.coords.latitude + ", " + position.coords.longitude); }); }
  • 35.
  • 36.
  • 37. <button id="view-fullscreen">Fullscreen</button> <script type="text/javascript"> (function () { var viewFullScreen = document.getElementById("view-fullscreen"); if (viewFullScreen) { viewFullScreen.addEventListener("click", function () { var docElm = document.documentElement; if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } else if (docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } }, false); } })(); </script>
  • 39. html:-moz-full-screen { background: red; } html:-webkit-full-screen { background: red; }
  • 41.
  • 43. takePicture.onchange = function (event) { // Get a reference to the taken picture or chosen file var files = event.target.files, file; if (files && files.length > 0) { file = files[0]; // Get window.URL object var URL = window.URL || window.webkitURL; // Create ObjectURL var imgURL = URL.createObjectURL(file); // Set img src to ObjectURL showPicture.src = imgURL; // Revoke ObjectURL URL.revokeObjectURL(imgURL); } };
  • 45.
  • 46.
  • 49. // Telephony object var tel = navigator.mozTelephony; // Check if the phone is muted (read/write property) console.log(tel.muted); // Check if the speaker is enabled (read/write property) console.log(tel.speakerEnabled); // Place a call var call = tel.dial("123456789");
  • 50. // Receiving a call tel.onincoming = function (event) { var incomingCall = event.call; // Get the number of the incoming call console.log(incomingCall.number); // Answer the call incomingCall.answer(); }; // Disconnect a call call.hangUp();
  • 51. // SMS object var sms = navigator.mozSMS; // Send a message sms.send("123456789", "Hello world!"); // Recieve a message sms.onrecieved = function (event) { // Read message console.log(event.message); };
  • 53.
  • 54. // Get battery level in percentage var batteryLevel = battery.level * 100 + "%"; // Get whether device is charging or not var chargingStatus = battery.charging; // Time until the device is fully charged var batteryCharged = battery.chargingTime; // Time until the device is discharged var batteryDischarged = battery.dischargingTime;
  • 55. battery.addEventLister("levelchange", function () { // Device's battery level changed }, false); battery.addEventListener("chargingchange", function () { // Device got plugged in to power, or unplugged }, false); battery.addEventListener("chargingtimechange", function () { // Device's charging time changed }, false); battery.addEventListener("dischargingtimechange", function () { // Device's discharging time changed }, false);
  • 57. (function () { document.querySelector("#vibrate-one-second").addEventListener("click", function () { navigator.mozVibrate(1000); }, false); document.querySelector("#vibrate-twice").addEventListener("click", function () { navigator.mozVibrate([200, 100, 200, 100]); }, false); document.querySelector("#vibrate-long-time").addEventListener("click", function () { navigator.mozVibrate(5000); }, false); document.querySelector("#vibrate-off").addEventListener("click", function () { navigator.mozVibrate(0); }, false); })();
  • 58. WebGL
  • 59.
  • 60.
  • 61.
  • 62.
  • 63. 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; }
  • 64. 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,
  • 65.
  • 66.
  • 68. Is it ready? Will HTML5 be around?
  • 70.
  • 72. Will HTML5 be around?
  • 73.
  • 75.
  • 76.
  • 77.