SlideShare a Scribd company logo
Leave No One Behind
    with HTML5
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia

Recommended for you

Web Crawling with NodeJS
Web Crawling with NodeJSWeb Crawling with NodeJS
Web Crawling with NodeJS

Lightning talk I did at the second #JSMeetup in Paris. #Parisjs It kickstarted the project http://github.com/sylvinus/node-crawler

nodejs crawling node javascript jquery server spid
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

This document summarizes various JavaScript APIs available for building web applications. It discusses APIs for files, images, video, fullscreen, camera, WebRTC, pointer lock, web storage, IndexedDB, battery status, telephony, SMS, vibration, and more. The goal is to provide developers capabilities for building rich applications that interact with the user's device.

html5javascriptapis
Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with Wings

HTML5 is all the rage with the cool kids, and although there’s a lot of focus on the new language, there’s plenty for web app developers with new JavaScript APIs both in the HTML5 spec and separated out as their own W3C specifications. This session will take you through demos and code and show off some of the outright crazy bleeding edge demos that are being produced today using the new JavaScript APIs. But it’s not all pie in the sky – plenty is useful today, some even in Internet Explorer!

html5 javascript api
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
@robertnyman
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
Leave No One Behind with HTML5 - FFWD.PRO, Croatia

Recommended for you

HTML5 APIs - Where No Man Has Gone Before! - GothamJS
HTML5 APIs - Where No Man Has Gone Before! - GothamJSHTML5 APIs - Where No Man Has Gone Before! - GothamJS
HTML5 APIs - Where No Man Has Gone Before! - GothamJS

The document discusses various HTML5 APIs and their capabilities including web storage, geolocation, canvas, video, and web sockets. It provides code examples for how to use sessionStorage, localStorage, get geolocation data, draw on canvases, and open web sockets. The document is an introduction to exploring HTML5 capabilities on mobile and how no area has been untouched by new possibilities through these emerging APIs.

html5html5 javascriptapis
Developing for Mobile
Developing for MobileDeveloping for Mobile
Developing for Mobile

The document discusses developing for mobile web. It covers several topics including physical properties of mobile devices, their network usage and power constraints. It also discusses different versions of Gmail optimized for different devices. The document recommends inlining content, deferring non-essential work, and being creative with JavaScript libraries and debugging to improve performance for mobile. It highlights the ability of web technologies to build cross-device applications quickly without native restrictions. The conclusion is that native languages may be better if writing many device plugins, but web technologies can be effective otherwise.

html5mobilejavascript
iPhone Appleless Apps
iPhone Appleless AppsiPhone Appleless Apps
iPhone Appleless Apps

This document discusses how to build iPhone apps using only web technologies like HTML5, CSS3, and JavaScript without relying on native iOS frameworks or the App Store. Key points covered include how to create offline-capable apps using the cache manifest, emulate touch events with JavaScript, make the app feel native through CSS transforms and meta tags, and detect device capabilities. The example rubiks cube app demonstrates these techniques to create an offline-capable puzzle game experience on iPhone similar to a native app.

iphone html5 css3 barcamp barcampbrighton
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Accessibility
JAWS version 10 screen reader

NVDA 2010.1
VoiceOver on iPhone IOS4

Recommended for you

Building a js widget
Building a js widgetBuilding a js widget
Building a js widget

This document discusses building a JavaScript widget that provides messaging functionality across different platforms and browsers. It outlines requirements such as being cross-browser compatible, supporting customization, and allowing for updates without relying on third parties. It then describes the proposed architecture, which includes abstracting the API, developing the widget component, handling customizations, and enabling updates and A/B testing through a service called FAAST. The document emphasizes testing, continuous delivery, and automation to streamline the release process.

vuejsnightwatchjavascript
SocketStream
SocketStreamSocketStream
SocketStream

A talk given at Node.js Cambridge about SocketStream, a realtime framework for single page apps. https://socketstream.com

node.jsrealtimesocketstream
jQuery (DrupalCamp Toronto)
jQuery (DrupalCamp Toronto)jQuery (DrupalCamp Toronto)
jQuery (DrupalCamp Toronto)

jQuery is an open source JavaScript library that simplifies HTML and JavaScript interaction by providing methods for selecting elements, handling events, performing animations and AJAX calls. It has a large community of users and developers, numerous plugins that extend its functionality, and is used by many large companies and websites. Major releases of jQuery have continued to improve performance, add new features, and expand cross-browser compatibility.

javascriptdrupaljquery
<div id="demo-main" role="main">
    <article id="demo-main-content">
        <header>
             <hgroup>
                 <h2>A title</h2>
                 <h3>Subtitle to the above title</h3>
             </hgroup>
        </header>
        <p>
             Hello
        </p>
    </article>

    <aside id="demo-aside-content" role="complementary">
        This is just a demo page to see HTML5 markup and WAI-ARIA landmark
roles in action in a simple context
    </aside>
</div>
<header role="banner">
    <h1>HTML5 example <a href="http://robertnyman.com/html5">-
To: Information and samples for HTML5 and related APIs</a></h1>
    <p>This page has valid simple HTML5 markup with new elements
complemented with WAI-ARIA landmark roles for accessibility</p>
</header>




<footer id="page-footer" role="contentinfo">
    Created by <a href="http://robertnyman.com/">Robert Nyman</a>
</footer>
<aside aria-live="polite" aria-relevant="additions" aria-atomic="true">
   Some sidebar content
</aside>
WAI-ARIA Authoring Practices 1.0
              Live Regions
                   -
http://www.w3.org/WAI/PF/aria-practices/
             #LiveRegions

Recommended for you

#NewMeetup Performance
#NewMeetup Performance#NewMeetup Performance
#NewMeetup Performance

This document discusses optimizing Meetup's performance by reducing page load times. It recommends reducing JavaScript, image, DOM, and CSS files. Specific techniques include externalizing and concatenating JavaScript, lazy loading images and scripts, minimizing DOM elements, writing efficient CSS selectors, and profiling code to optimize loops and DOM manipulation. Reducing page weight through these techniques can improve the user experience by speeding up load times and drop in member activity.

Meetup Performance
Meetup PerformanceMeetup Performance
Meetup Performance

Presentation on how Meetup tackles web performance. Given on: - Nov 17th, 2009 for the NY Web Performance Group (http://www.meetup.com/Web-Performance-NY/) - Jan 26th, 2010 for NYC Tech Talks Meetup Group (http://www.meetup.com/NYC-Tech-Talks/)

achitecturemeetupperformance
Node worshop Realtime - Socket.io
Node worshop Realtime - Socket.ioNode worshop Realtime - Socket.io
Node worshop Realtime - Socket.io

The document discusses using Socket.io to add real-time capabilities to web applications. It provides an overview of Socket.io and how to install and use it with Node.js. Examples are given of emitting and receiving events, broadcasting to all connections, and setting up Socket.io with Express.

node.jssocket.io
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Video
<video controls src="myvideo.webm"></video>
<video controls>
    <source src="myvideo.mp4"></source>
    <source src="myvideo.webm"></source>
    <p>Hello, older web browser</p>
</video>

Recommended for you

[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC

This document discusses JavascriptMVC, an alternative Javascript MVC framework to BackboneJS. It provides an overview of JavascriptMVC's features such as MIT licensing, clear documentation, and providing an almost total solution for building web applications. Potential pros include the licensing, documentation, and comprehensive features. Potential cons include it being less well known and having fewer online resources than BackboneJS in Taiwan. Examples of how it handles classes, CSS, data loading/validation, and views are also provided.

javascriptjavascriptmvc
Nodejs.meetup
Nodejs.meetupNodejs.meetup
Nodejs.meetup

RSVP Node.js class at www.nycdatascience.com NYC data science academy's free workshop, given at NYC Open Data Meetup, http://www.meetup.com/NYC-Open-Data/events/163300552/

nyc open data meetupwww.nycdatascience.comnyc data science academy
Don't Over-React - just use Vue!
Don't Over-React - just use Vue!Don't Over-React - just use Vue!
Don't Over-React - just use Vue!

Vue.js is a JavaScript framework that provides two-way binding between DOM and JavaScript, a template language for declarative rendering, and supports installation via npm, direct download, or a script tag. It allows defining where rendering will occur, setting up data, and rendering data to the DOM. Components provide reusability through templates, logic, and styles. Additional features include routing, state management with Vuex, and use of the Vue CLI for scaffolding single file components.

javascriptvuejs
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
<video src="http://vid.ly/4w2g7d?content=video"
controls></video>
must die!!!
              rea lly
        Not
<video width="320" height="240" poster="poster.jpg" controls="controls">
    
    <source type="video/mp4" src="myvideo.mp4">
    
    <source type="video/webm" src="myvideo.webm">
    
    <source type="video/ogg" src="myvideo.ogv">
    
    <object width="320" height="240" type="application/x-shockwave-flash"
data="flashmediaelement.swf">
         <param name="movie" value="flashmediaelement.swf">
         <param name="flashvars" value="controls=true&file=myvideo.mp4">
         
         <img src="myvideo.jpg" width="320" height="240" title="No video
playback capabilities">
    </object>
</video>

Recommended for you

jQuery (MeshU)
jQuery (MeshU)jQuery (MeshU)
jQuery (MeshU)

jQuery is a JavaScript library that simplifies HTML and JavaScript interaction. It allows developers to select elements, perform actions on them such as adding/removing classes or triggering events, and chaining multiple actions together. jQuery supports CSS selectors, DOM manipulation, event handling, effects/animations, and AJAX operations. It is widely used by major websites for interactive prototypes and applications due to its small size, extensive documentation, plugins, and cross-browser compatibility.

jQuery (BostonPHP)
jQuery (BostonPHP)jQuery (BostonPHP)
jQuery (BostonPHP)

jQuery is an open source JavaScript library that simplifies HTML and JavaScript interaction. It allows selecting elements, performing actions on them such as adding/removing classes or showing/hiding, and handling events. jQuery is widely used by major companies and projects due to its small size, cross-browser compatibility, and large plugin ecosystem that extends its functionality.

HTML 5 - Overview
HTML 5 - OverviewHTML 5 - Overview
HTML 5 - Overview

HTML 5 is the latest version of the HTML standard. It includes several new elements and features to improve structure and behavior. Some key changes include new semantic elements like <article>, <aside>, <header>, and <footer>; built-in support for audio and video; the <canvas> element for drawing graphics; and forms with new input types. HTML 5 aims to simplify HTML and separate structure and presentation, making code cleaner and pages more accessible. It is developed jointly by the WHATWG and W3C organizations.

phppaideguaphphtml5
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia

Recommended for you

Mobile Web Video
Mobile Web VideoMobile Web Video
Mobile Web Video

The document discusses the evolution of web video and its increasing impact on mobile from 2010 to 2012. Key developments include the rise of smartphones, video formats supported in different browsers, tools for format conversion, and libraries like Video.js that provide consistent video playback across devices. WebRTC was also introduced, allowing real-time video chat in browsers. Overall mobile traffic and use of mobile video grew dramatically in this period.

mobile webvideo html5
Web Apps
Web AppsWeb Apps
Web Apps

In this lecture, I provide an overview of what it takes to create amazing Web Apps : rich media, the Canvas API, local storage and offline persistence are covered.

html5web applications
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...

This document provides an overview of various HTML5 APIs for multimedia, including native <video> and <audio> elements, the <canvas> element for scriptable graphics, and geolocation APIs. It discusses key considerations around supporting different media formats in <video> and <audio> and controlling media playback via JavaScript. The document also briefly introduces other HTML5 APIs for offline applications, local storage, and databases. It emphasizes the importance of feature detection over browser sniffing for progressive enhancement.

audiohtmlh264
<video src="tribute.webm">
  <track kind="subtitles" label="English" src="English.vtt" srclang="en" default></track>
  <track kind="subtitles" label="Croatian" src="Croatian.vtt" srclang="hr"></track>
</video>
<track   kind="subtitles">
<track   kind="captions">
<track   kind="descriptions">
<track   kind="chapters">
<track   kind="metadata">
00:00:05.000 --> 00:00:11.500
Play the best song in the world, or I'll eat your soul.

00:00:12.000 --> 00:00:14.000
Well me and Kyle, we looked at each other,
and we each said... "Okay."
Leave No One Behind with HTML5 - FFWD.PRO, Croatia

Recommended for you

What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5

The document provides an overview of HTML5 including: - New tags such as article, aside, audio, canvas, and video - The structure of an HTML5 page including the doctype, meta charset, and link types - Forms with new input types and validation attributes - Playing audio and video with HTML5 tags and controlling them with JavaScript - Drawing graphics on a canvas using JavaScript - Web workers for running scripts in background threads - Options for data storage including web storage, web SQL, and IndexedDB

html5kevinjavascript
HTML5와 모바일
HTML5와 모바일HTML5와 모바일
HTML5와 모바일

HTML5 provides new semantic elements that help improve accessibility and SEO. These include <header>, <nav>, <article>, <aside>, <footer>, <time>, <video>, <audio>, and more. HTML5 also introduces new features like local storage, offline caching, and geolocation that enhance the mobile web experience.

html5androidmobile
Html5 intro
Html5 introHtml5 intro
Html5 intro

The document provides an introduction and overview of HTML5. It discusses the structure of an HTML5 page, including updates to the doctype, removal of xmlns, and addition of the meta charset tag. New HTML5 elements like article, aside, audio, canvas, and video are presented. Updates to HTML5 forms, including new input types and attributes, are covered. The use of video and audio elements is explained. Finally, the canvas element is introduced and basic drawing using the canvas context is demonstrated.

html5 video canvas
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
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);

Recommended for you

Speak The Web: The HTML5 Experiments
Speak The Web: The HTML5 ExperimentsSpeak The Web: The HTML5 Experiments
Speak The Web: The HTML5 Experiments

Bruce Lawson demos HTML5, especially forms and video element at Sheffield Speak The Web, 8 February 2010

web standardshtml5video
Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~

The document discusses HTML5 and its APIs. It provides an overview of several HTML5 APIs including the geolocation API, web storage API, web workers API, and WebSocket API. It also discusses how these new HTML5 features allow for more advanced web applications compared to older technologies like Flash. Finally, it mentions some libraries and tools for testing HTML5 browser support.

html5modest
HTML5 workshop, part 1
HTML5 workshop, part 1HTML5 workshop, part 1
HTML5 workshop, part 1

This document discusses HTML5 and related web technologies. It introduces HTML5 semantics like header, nav, article, section, aside, and figure. It demonstrates using these elements to mark up a simple web page. It also covers HTML5 features like video, canvas, and SVG for rich media, as well as JavaScript APIs and libraries for manipulating these elements. Finally, it addresses questions around browser support for HTML5 and ensuring websites will work across browsers.

html5
context.fillRect(350, 50, 100, 100);

context.lineWidth = "10";
context.lineJoin = "round";

context.moveTo(50, 50);
context.lineTo(200, 200);
context.lineTo(100, 300);
context.closePath();
context.stroke();
context.fill();

context.beginPath();
context.strokeStyle = "#00f";
context.arc(200, 400, 75, 0, Math.PI*2, false);

context.stroke();
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
pdf.js
Leave No One Behind with HTML5 - FFWD.PRO, Croatia

Recommended for you

Robert Nyman - HTML5 apis where no man has gone before startechconf
Robert Nyman - HTML5 apis where no man has gone before startechconfRobert Nyman - HTML5 apis where no man has gone before startechconf
Robert Nyman - HTML5 apis where no man has gone before startechconf

The document discusses HTML5 APIs and new features available for video and canvas elements. It provides code examples for using the <video> element to embed video with controls and multiple sources, and for drawing shapes and images onto a <canvas> element using its 2D context.

startechconf
HTML5 APIs - Where No Man Has Gone Before - StarTechConf, Chile
HTML5 APIs - Where No Man Has Gone Before - StarTechConf, ChileHTML5 APIs - Where No Man Has Gone Before - StarTechConf, Chile
HTML5 APIs - Where No Man Has Gone Before - StarTechConf, Chile

The document discusses HTML5 APIs and new features available for video and canvas elements. It provides code examples for using the <video> element to embed video with controls and multiple sources, and for drawing shapes and images onto a <canvas> element using its 2D context.

html5javascriptapis
HTML5
HTML5HTML5
HTML5

This document provides an overview of HTML5 and what's new in the latest version. It discusses new semantic elements like <header>, <nav>, and <article> that improve document outlining. It also covers new multimedia features like native audio and video playback without Flash, as well as 2D/3D graphics using <canvas>. Other additions include new form controls, multiple file uploading, and geolocation. While HTML5 brings many new features, it is an ongoing evolution of HTML rather than a completely new language.

podcamphfxweb standardsweb design
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
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);

Recommended for you

HTML5 and Accessibility sitting in a tree
HTML5 and Accessibility sitting in a treeHTML5 and Accessibility sitting in a tree
HTML5 and Accessibility sitting in a tree

21 September 2011 presentation to Accessibility London (#a11yldn) unconference on HTML5 and accessibility by Bruce Lawson of Opera.

multimediahtml5accessibility
audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010
audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010
audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010

Part II of the standards-next.org workshop on HTML5 with Bruce Lawson, concentrating on audio, video and canvas (plus hints of additional HTML5 API niceness)

htmlaudioweb standards
HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona /...
HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona /...HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona /...
HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona /...

The document discusses HTML5 multimedia capabilities for playing audio and video natively in browsers without plugins like Flash. It covers the <video> and <audio> tags, supported formats like MP4, WebM, Ogg Theora, and browser support. It also discusses the media playback API and features like controls, sources for different formats, and responsive design.

htmlweb standardsweb design
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Fullscreen
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia

Recommended for you

HTML5 kickstart - Brooklyn Beta workshop 21.10.2010
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010HTML5 kickstart - Brooklyn Beta workshop 21.10.2010
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010

This document provides an overview of HTML5 and discusses whether it should be used today. It notes that while HTML5 is exciting, there are still interoperability issues that make it premature to deploy for most sites. The document then covers the history and development of HTML5, new semantic elements, forms, multimedia capabilities like video and canvas, geolocation, offline detection and more. It emphasizes using feature detection and providing fallback options to support older browsers.

htmlaudioweb standards
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...

This document discusses new multimedia capabilities in HTML5, including browser-native <video>, <audio>, and <canvas> elements. It provides examples of how to use these elements to embed video and audio with controls and different formats, access camera feeds, and manipulate image data in the <canvas>. It also addresses concerns about browser support and recommends feature detection rather than browser sniffing for progressive enhancement.

audioweb standardswebrtc
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

This document discusses HTML5 and related topics. It provides code examples of new HTML5 elements like <header>, <article>, and <canvas>. It demonstrates how to add semantics, draw shapes, and load images onto a canvas. It also mentions new APIs for video, custom data attributes, and live regions for accessibility. The goal is to introduce HTML5 and showcase its capabilities for building engaging web content.

htmlhtml5javascript
<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

Recommended for you

Brave new world of HTML5
Brave new world of HTML5Brave new world of HTML5
Brave new world of HTML5

In this, my talk for Webinale in Berlin, June 1st 2011, I give an overview of HTML5 history and main features, relating it all back to how possible it is use develop with these new features today. Thanks to Patrick Lauke for allowing me to steal a lot of his slides ;-)

audiohistorysemantics
Have you tried listening?
Have you tried listening?Have you tried listening?
Have you tried listening?

The document discusses Robert Nyman's career in developer relations, including the different personas in the field, common activities like speaking at events and using social media, and challenges around measuring the impact of the work. It provides tips for those in developer relations such as figuring out your strengths, getting feedback, acknowledging people, and having passion for the work of connecting with developers.

developer relations
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

New internet users are coming online around the world and are facing very different constraints to accessing the internet. In this talk, we'll cover what we've learned from building experiences for new internet users and walk through how you can build great experiences that work well for billions of users around the world. This is a presentation from Google I/O 2017, the video is available at https://www.youtube.com/watch?v=wD3rpdiLMyY Speakers: Tal Oppenheimer, Mariya Moeva, Robert Nyman https://twitter.com/taloppenheimer https://twitter.com/marrrr https://twitter.com/robertnyman

accelerated mobile pagesampio17
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
<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);
     }
};
Leave No One Behind with HTML5 - FFWD.PRO, Croatia

Recommended for you

Introduction to Google Daydream
Introduction to Google DaydreamIntroduction to Google Daydream
Introduction to Google Daydream

Daydream is a VR platform from Google that aims to make VR experiences more accessible and approachable through mobile. The document discusses how VR challenges traditional design expectations around visuals, presence, immersion, interfaces, attention, and timing. It emphasizes experimenting with bite-sized VR experiences that tempt user curiosity on mobile through Daydream.

vrgoogle vrdaydream
Predictability for the Web
Predictability for the WebPredictability for the Web
Predictability for the Web

This document discusses improving predictability for web developers. It describes challenges like cross-browser inconsistencies that make development difficult. The authors outline efforts by Chrome to address these issues, such as collaborating with other browsers, listening to developers, and minimizing breaking changes. Developers are encouraged to test new browser features, file bugs, and provide feedback to help continue enhancing predictability.

browser bug searcherdeveloper feedbackcross-browser
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

The document discusses the future of the web, covering topics like user identification, payments, connecting with hardware, virtual reality, and more. It notes that user identification will improve with autofill and smart lock passwords. Payments will be simplified through the Payment Request API. Connecting with hardware like Bluetooth devices and NFC will allow interaction with physical objects. Virtual reality on the web is progressing with the WebVR API landing in browsers. Overall, the web continues advancing in powerful ways.

Pointer Lock API
var docElm = document.documentElement;

// Requesting Pointer Lock
docElm.requestPointerLock = elem.requestPointerLock ||
                             elem.mozRequestPointerLock ||
                             elem.webkitRequestPointerLock;
docElm.requestPointerLock();
document.addEventListener("mousemove", function(e) {
    var movementX = e.movementX       ||
                    e.mozMovementX    ||
                    e.webkitMovementX ||
                    0,
        movementY = e.movementY       ||
                    e.mozMovementY    ||
                    e.webkitMovementY ||
                    0;

    // Print the mouse movement delta values
    console.log("movementX=" + movementX, "movementY="
+ movementY);
}, false);
Leave No One Behind with HTML5 - FFWD.PRO, Croatia

Recommended for you

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

A presentation about the Future of the Web at the Cold Front conference in Copenhagen, Denmark, Sep 1 2016.

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

Presentation about the Future of Progressive Web Apps at the Google for Indonesia event in Jakarta, August 2016.

Google tech & products
Google tech & productsGoogle tech & products
Google tech & products

This document discusses trends in web and mobile usage and Google announcements from Google I/O. It notes that while native mobile apps saw more usage time than browsers in the past, the web has grown significantly with over 1 billion users on browsers. Google announced several new products at I/O including Instant Apps for Android, apps on Chromebooks, Google Home, Google Assistant improvements, Allo with smart replies and Google Assistant integration, Duo video calling with a Knock Knock feature, Daydream VR platform, and projects from ATAP like Jacquard and Soli.

googletechnologytech
Polyfills
Polyfills
http://caniuse.com/
Boot to Gecko

Recommended for you

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 ...

This document provides an introduction to progressive web apps (PWAs). It discusses the history of web technologies from HTML and HTTP in the early 1990s to more recent developments like service workers, push notifications, and web app manifests that enable PWAs. Features of PWAs are described like reliability, performance, engagement, and integration with the operating system. Case studies are presented showing the benefits some companies have seen from implementing PWAs.

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

This document provides a history of the development of the web from 1991 to the present. It discusses technologies like HTML, HTTP, XMLHttpRequest, AJAX, and mobile web development. It then introduces progressive web apps, which are web applications that are reliable, fast and engaging like native apps through the use of technologies like service workers, web app manifests and push notifications. Examples are given of companies like Flipkart that have seen success adopting progressive web apps.

progressive web appspwatokyo
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 document discusses the current state and future of the web. It notes that while native apps have gained popularity, especially on mobile, the web still accounts for a large portion of usage. It outlines tools from Google like service workers, push notifications, and app install banners that aim to close capabilities gaps between the web and native apps. The document advocates for progressive web apps that are accessible like websites but also feel like native apps to users. The future of the web, it argues, depends on continuing to match and surpass native platforms while keeping the web open, accessible, and long-lasting.

Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
https://github.com/mozilla-b2g/B2G

https://github.com/mozilla-b2g/gaia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia

Recommended for you

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 document discusses the current state and future of the web. It notes that while native apps have gained popularity, especially on mobile, the web remains strong with over 1 billion active users. It outlines tools from Google like Service Workers that help the web compete with capabilities previously only available to native apps like push notifications, offline access, and background processing. The document advocates for continued progress to simplify the web development process and ensure the longevity of technologies, arguing this will help the web remain diverse and accessible across all platforms.

webjavascriptservice workers
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 document discusses the current state and future of the web. It describes how the web currently lacks capabilities that native mobile apps have like push notifications, background processing, and offline access. However, new web features being developed like Service Workers, Push Notifications, and Background Sync aim to address these gaps. The document argues that with these new features, the divide between native and web is diminishing and the web can provide an app-like experience without requiring users to download an app. The future of the web depends on further developing these capabilities and ensuring the web remains accessible, simple to use, and continues to work across all platforms.

html5javascriptweb
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

The document discusses the current state and future of the web. It notes that while native apps currently dominate mobile usage, the web is working to address its limitations through new features like service workers for offline access, background sync for periodic processing, and push notifications. It highlights tools from Google like Mobile-Friendly Test, Chrome DevTools, and Web Fundamentals. It argues the web needs to simplify onboarding and spread awareness of its capabilities to ensure its long-term viability against native platforms. The future of the web depends on matching and surpassing native capabilities while keeping content universally accessible across different platforms.

nativewebandroid
WebAPI
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Try new things
Leave No One Behind with HTML5 - FFWD.PRO, Croatia

Recommended for you

Google, the future and possibilities
Google, the future and possibilitiesGoogle, the future and possibilities
Google, the future and possibilities

The document discusses various Google projects focused on the future including Google Now on Tap, Google Photos, virtual reality initiatives like Cardboard and Expeditions, self-driving cars, Project Loon for internet access, Google Lens, Project Soli, and advice to talk to everyone, listen, and show respect. It also mentions the author Robert Nyman working at Google Stockholm and projects like TEKLA, Jacquard, and Spotlight Stories.

solijacquardself-driving-cars
Developer Relations in the Nordics
Developer Relations in the NordicsDeveloper Relations in the Nordics
Developer Relations in the Nordics

A presentation about Google and Developer Relations in the Nordics, what the region is like and different initiatives.

nordicsdeveloper relations
What is Developer Relations?
What is Developer Relations?What is Developer Relations?
What is Developer Relations?

Developer relations works to champion developers in different regions by removing obstacles, being responsive to their needs, and networking and lobbying on their behalf. They aim to acquire and engage users for developers' apps and games through Google services like Google Play, which has paid $7 billion to developers so far and reaches over 1 billion Android users worldwide. Developer relations representatives like Robert Nyman are available to help developers and can be contacted for additional support.

Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia
Leave No One Behind with HTML5 - FFWD.PRO, Croatia

Recommended for you

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

Android TV is determined to be a significant player in the connected TV market as old TV devices are being replaced by new connected TVs at a rate of 100-200 million per year. Android TV powers televisions, media players, and gaming consoles like the Nexus Player. Content and apps are delivered through Android TV, and the Cast feature allows other platforms to connect to Android TV devices. Developers are encouraged to get involved early to acquire and engage users through games and services.

android tvandroid
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

New improvements for web developers - Promises, fetch, Service Workers, Push notifications, Add to Homescreen. Slides from a talk I gave at #frontendfi in Helsinki yesterday

apisjavascweb
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

A talk given at the frontend.fi meetup in Helsinki about Mobile phone trends, user data & developer climate .

developer climatetrendsmobile
HTML5
             -
The beauty of the Open Web
"So we saved the world
together for a while,
and that was lovely."
                  - Lost
Robert Nyman
robertnyman.com
   @robertnyman

More Related Content

What's hot

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
Robert Nyman
 
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos AiresJavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
Robert Nyman
 
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
Robert Nyman
 
Web Crawling with NodeJS
Web Crawling with NodeJSWeb Crawling with NodeJS
Web Crawling with NodeJS
Sylvain Zimmer
 
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
Robert Nyman
 
Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with Wings
Remy Sharp
 
HTML5 APIs - Where No Man Has Gone Before! - GothamJS
HTML5 APIs - Where No Man Has Gone Before! - GothamJSHTML5 APIs - Where No Man Has Gone Before! - GothamJS
HTML5 APIs - Where No Man Has Gone Before! - GothamJS
Robert Nyman
 
Developing for Mobile
Developing for MobileDeveloping for Mobile
Developing for Mobile
Remy Sharp
 
iPhone Appleless Apps
iPhone Appleless AppsiPhone Appleless Apps
iPhone Appleless Apps
Remy Sharp
 
Building a js widget
Building a js widgetBuilding a js widget
Building a js widget
Tudor Barbu
 
SocketStream
SocketStreamSocketStream
SocketStream
Paul Jensen
 
jQuery (DrupalCamp Toronto)
jQuery (DrupalCamp Toronto)jQuery (DrupalCamp Toronto)
jQuery (DrupalCamp Toronto)
jeresig
 
#NewMeetup Performance
#NewMeetup Performance#NewMeetup Performance
#NewMeetup Performance
Justin Cataldo
 
Meetup Performance
Meetup PerformanceMeetup Performance
Meetup Performance
Greg Whalin
 
Node worshop Realtime - Socket.io
Node worshop Realtime - Socket.ioNode worshop Realtime - Socket.io
Node worshop Realtime - Socket.io
Caesar Chi
 
[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC
Alive Kuo
 
Nodejs.meetup
Nodejs.meetupNodejs.meetup
Nodejs.meetup
Vivian S. Zhang
 
Don't Over-React - just use Vue!
Don't Over-React - just use Vue!Don't Over-React - just use Vue!
Don't Over-React - just use Vue!
Raymond Camden
 
jQuery (MeshU)
jQuery (MeshU)jQuery (MeshU)
jQuery (MeshU)
jeresig
 
jQuery (BostonPHP)
jQuery (BostonPHP)jQuery (BostonPHP)
jQuery (BostonPHP)
jeresig
 

What's hot (20)

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
 
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos AiresJavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
 
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
 
Web Crawling with NodeJS
Web Crawling with NodeJSWeb Crawling with NodeJS
Web Crawling with NodeJS
 
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
 
Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with Wings
 
HTML5 APIs - Where No Man Has Gone Before! - GothamJS
HTML5 APIs - Where No Man Has Gone Before! - GothamJSHTML5 APIs - Where No Man Has Gone Before! - GothamJS
HTML5 APIs - Where No Man Has Gone Before! - GothamJS
 
Developing for Mobile
Developing for MobileDeveloping for Mobile
Developing for Mobile
 
iPhone Appleless Apps
iPhone Appleless AppsiPhone Appleless Apps
iPhone Appleless Apps
 
Building a js widget
Building a js widgetBuilding a js widget
Building a js widget
 
SocketStream
SocketStreamSocketStream
SocketStream
 
jQuery (DrupalCamp Toronto)
jQuery (DrupalCamp Toronto)jQuery (DrupalCamp Toronto)
jQuery (DrupalCamp Toronto)
 
#NewMeetup Performance
#NewMeetup Performance#NewMeetup Performance
#NewMeetup Performance
 
Meetup Performance
Meetup PerformanceMeetup Performance
Meetup Performance
 
Node worshop Realtime - Socket.io
Node worshop Realtime - Socket.ioNode worshop Realtime - Socket.io
Node worshop Realtime - Socket.io
 
[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC
 
Nodejs.meetup
Nodejs.meetupNodejs.meetup
Nodejs.meetup
 
Don't Over-React - just use Vue!
Don't Over-React - just use Vue!Don't Over-React - just use Vue!
Don't Over-React - just use Vue!
 
jQuery (MeshU)
jQuery (MeshU)jQuery (MeshU)
jQuery (MeshU)
 
jQuery (BostonPHP)
jQuery (BostonPHP)jQuery (BostonPHP)
jQuery (BostonPHP)
 

Similar to Leave No One Behind with HTML5 - FFWD.PRO, Croatia

HTML 5 - Overview
HTML 5 - OverviewHTML 5 - Overview
HTML 5 - Overview
Marcelio Leal
 
Mobile Web Video
Mobile Web VideoMobile Web Video
Mobile Web Video
Sarah Allen
 
Web Apps
Web AppsWeb Apps
Web Apps
Tim Wray
 
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
Patrick Lauke
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5
Kevin DeRudder
 
HTML5와 모바일
HTML5와 모바일HTML5와 모바일
HTML5와 모바일
ACCESS
 
Html5 intro
Html5 introHtml5 intro
Html5 intro
Kevin DeRudder
 
Speak The Web: The HTML5 Experiments
Speak The Web: The HTML5 ExperimentsSpeak The Web: The HTML5 Experiments
Speak The Web: The HTML5 Experiments
guestd427df
 
Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~
Sho Ito
 
HTML5 workshop, part 1
HTML5 workshop, part 1HTML5 workshop, part 1
HTML5 workshop, part 1
Robert Nyman
 
Robert Nyman - HTML5 apis where no man has gone before startechconf
Robert Nyman - HTML5 apis where no man has gone before startechconfRobert Nyman - HTML5 apis where no man has gone before startechconf
Robert Nyman - HTML5 apis where no man has gone before startechconf
StarTech Conference
 
HTML5 APIs - Where No Man Has Gone Before - StarTechConf, Chile
HTML5 APIs - Where No Man Has Gone Before - StarTechConf, ChileHTML5 APIs - Where No Man Has Gone Before - StarTechConf, Chile
HTML5 APIs - Where No Man Has Gone Before - StarTechConf, Chile
Robert Nyman
 
HTML5
HTML5HTML5
HTML5 and Accessibility sitting in a tree
HTML5 and Accessibility sitting in a treeHTML5 and Accessibility sitting in a tree
HTML5 and Accessibility sitting in a tree
brucelawson
 
audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010
audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010
audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010
Patrick Lauke
 
HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona /...
HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona /...HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona /...
HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona /...
Patrick Lauke
 
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010HTML5 kickstart - Brooklyn Beta workshop 21.10.2010
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010
Patrick Lauke
 
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
Patrick Lauke
 
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
Robert Nyman
 
Brave new world of HTML5
Brave new world of HTML5Brave new world of HTML5
Brave new world of HTML5
Chris Mills
 

Similar to Leave No One Behind with HTML5 - FFWD.PRO, Croatia (20)

HTML 5 - Overview
HTML 5 - OverviewHTML 5 - Overview
HTML 5 - Overview
 
Mobile Web Video
Mobile Web VideoMobile Web Video
Mobile Web Video
 
Web Apps
Web AppsWeb Apps
Web Apps
 
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05...
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5
 
HTML5와 모바일
HTML5와 모바일HTML5와 모바일
HTML5와 모바일
 
Html5 intro
Html5 introHtml5 intro
Html5 intro
 
Speak The Web: The HTML5 Experiments
Speak The Web: The HTML5 ExperimentsSpeak The Web: The HTML5 Experiments
Speak The Web: The HTML5 Experiments
 
Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~
 
HTML5 workshop, part 1
HTML5 workshop, part 1HTML5 workshop, part 1
HTML5 workshop, part 1
 
Robert Nyman - HTML5 apis where no man has gone before startechconf
Robert Nyman - HTML5 apis where no man has gone before startechconfRobert Nyman - HTML5 apis where no man has gone before startechconf
Robert Nyman - HTML5 apis where no man has gone before startechconf
 
HTML5 APIs - Where No Man Has Gone Before - StarTechConf, Chile
HTML5 APIs - Where No Man Has Gone Before - StarTechConf, ChileHTML5 APIs - Where No Man Has Gone Before - StarTechConf, Chile
HTML5 APIs - Where No Man Has Gone Before - StarTechConf, Chile
 
HTML5
HTML5HTML5
HTML5
 
HTML5 and Accessibility sitting in a tree
HTML5 and Accessibility sitting in a treeHTML5 and Accessibility sitting in a tree
HTML5 and Accessibility sitting in a tree
 
audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010
audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010
audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010
 
HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona /...
HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona /...HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona /...
HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona /...
 
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010HTML5 kickstart - Brooklyn Beta workshop 21.10.2010
HTML5 kickstart - Brooklyn Beta workshop 21.10.2010
 
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / ...
 
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
 
Brave new world of HTML5
Brave new world of HTML5Brave new world of HTML5
Brave new world of HTML5
 

More from 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 2017
Robert Nyman
 
Introduction to Google Daydream
Introduction to Google DaydreamIntroduction to Google Daydream
Introduction to Google Daydream
Robert Nyman
 
Predictability for the Web
Predictability for the WebPredictability for the Web
Predictability for the Web
Robert 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 2016
Robert 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 2016
Robert 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 Indonesia
Robert Nyman
 
Google tech & products
Google tech & productsGoogle tech & products
Google tech & products
Robert 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, Japan
Robert 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 - Istanbul
Robert 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 go
Robert Nyman
 
Google, the future and possibilities
Google, the future and possibilitiesGoogle, the future and possibilities
Google, the future and possibilities
Robert Nyman
 
Developer Relations in the Nordics
Developer Relations in the NordicsDeveloper Relations in the Nordics
Developer Relations in the Nordics
Robert Nyman
 
What is Developer Relations?
What is Developer Relations?What is Developer Relations?
What is Developer Relations?
Robert 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 meetup
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, Helsinki
Robert 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, Helsinki
Robert Nyman
 

More from 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 - 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
 
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
 
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?
 
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
 
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
 

Recently uploaded

Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Chris Swan
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
Enterprise Wired
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
ishalveerrandhawa1
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Erasmo Purificato
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
RaminGhanbari2
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
Aurora Consulting
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
Stephanie Beckett
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
Awais Yaseen
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
Toru Tamaki
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
Liveplex
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
Vijayananda Mohire
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
Mark Billinghurst
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
jackson110191
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
Emerging Tech
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
SynapseIndia
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 

Recently uploaded (20)

Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
Best Programming Language for Civil Engineers
Best Programming Language for Civil EngineersBest Programming Language for Civil Engineers
Best Programming Language for Civil Engineers
 
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
論文紹介:A Systematic Survey of Prompt Engineering on Vision-Language Foundation ...
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
 
How RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptxHow RPA Help in the Transportation and Logistics Industry.pptx
How RPA Help in the Transportation and Logistics Industry.pptx
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 

Leave No One Behind with HTML5 - FFWD.PRO, Croatia

  • 1. Leave No One Behind with HTML5
  • 7. 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
  • 12. JAWS version 10 screen reader NVDA 2010.1 VoiceOver on iPhone IOS4
  • 13. <div id="demo-main" role="main"> <article id="demo-main-content"> <header> <hgroup> <h2>A title</h2> <h3>Subtitle to the above title</h3> </hgroup> </header> <p> Hello </p> </article> <aside id="demo-aside-content" role="complementary"> This is just a demo page to see HTML5 markup and WAI-ARIA landmark roles in action in a simple context </aside> </div>
  • 14. <header role="banner"> <h1>HTML5 example <a href="http://robertnyman.com/html5">- To: Information and samples for HTML5 and related APIs</a></h1> <p>This page has valid simple HTML5 markup with new elements complemented with WAI-ARIA landmark roles for accessibility</p> </header> <footer id="page-footer" role="contentinfo"> Created by <a href="http://robertnyman.com/">Robert Nyman</a> </footer>
  • 15. <aside aria-live="polite" aria-relevant="additions" aria-atomic="true"> Some sidebar content </aside>
  • 16. WAI-ARIA Authoring Practices 1.0 Live Regions - http://www.w3.org/WAI/PF/aria-practices/ #LiveRegions
  • 18. Video
  • 20. <video controls> <source src="myvideo.mp4"></source> <source src="myvideo.webm"></source> <p>Hello, older web browser</p> </video>
  • 23. must die!!! rea lly Not
  • 24. <video width="320" height="240" poster="poster.jpg" controls="controls"> <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 --> <source type="video/mp4" src="myvideo.mp4"> <!-- WebM/VP8 for Firefox4, Opera, and Chrome --> <source type="video/webm" src="myvideo.webm"> <!-- Ogg/Vorbis for older Firefox and Opera versions --> <source type="video/ogg" src="myvideo.ogv"> <!-- Flash fallback for non-HTML5 browsers without JavaScript --> <object width="320" height="240" type="application/x-shockwave-flash" data="flashmediaelement.swf"> <param name="movie" value="flashmediaelement.swf"> <param name="flashvars" value="controls=true&file=myvideo.mp4"> <!-- Image as a last resort --> <img src="myvideo.jpg" width="320" height="240" title="No video playback capabilities"> </object> </video>
  • 29. <video src="tribute.webm"> <track kind="subtitles" label="English" src="English.vtt" srclang="en" default></track> <track kind="subtitles" label="Croatian" src="Croatian.vtt" srclang="hr"></track> </video>
  • 30. <track kind="subtitles"> <track kind="captions"> <track kind="descriptions"> <track kind="chapters"> <track kind="metadata">
  • 31. 00:00:05.000 --> 00:00:11.500 Play the best song in the world, or I'll eat your soul. 00:00:12.000 --> 00:00:14.000 Well me and Kyle, we looked at each other, and we each said... "Okay."
  • 35. <canvas id="my-canvas" width="500" height="500"> I am canvas </canvas>
  • 36. var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d"); context.fillStyle = "#f00"; context.fillRect(0, 0, 100, 100);
  • 37. context.fillRect(350, 50, 100, 100); context.lineWidth = "10"; context.lineJoin = "round"; context.moveTo(50, 50); context.lineTo(200, 200); context.lineTo(100, 300); context.closePath(); context.stroke(); context.fill(); context.beginPath(); context.strokeStyle = "#00f"; context.arc(200, 400, 75, 0, Math.PI*2, false); context.stroke();
  • 44. var url = "http://robertnyman.com", title = "My blog", state = { address : url }; window.history.pushState(state, title, url);
  • 49. <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>
  • 51. html:-moz-full-screen { background: red; } html:-webkit-full-screen { background: red; }
  • 55. 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); } };
  • 58. var docElm = document.documentElement; // Requesting Pointer Lock docElm.requestPointerLock = elem.requestPointerLock || elem.mozRequestPointerLock || elem.webkitRequestPointerLock; docElm.requestPointerLock();
  • 59. document.addEventListener("mousemove", function(e) { var movementX = e.movementX || e.mozMovementX || e.webkitMovementX || 0, movementY = e.movementY || e.mozMovementY || e.webkitMovementY || 0; // Print the mouse movement delta values console.log("movementX=" + movementX, "movementY=" + movementY); }, false);
  • 77. HTML5 - The beauty of the Open Web
  • 78. "So we saved the world together for a while, and that was lovely." - Lost