SlideShare a Scribd company logo
1 of 47
Download to read offline
Using HTML5
 For a Great
 Open Web
Why HTML5?
<!DOCTYPE html>
<DIV>A monkey</DIV>
<p id=john>John’s P</p>

<input type=text>
<input type="text">
<input type="text" />
As XHTML



<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml">


MUST be application/xhtml+xml or application/xml

<noscript>Not in XHTML</noscript>
<audio>


  <aside>       <nav>
                           <section>

           <hgroup>      <article>
<figure>
                            <time>
                      <header>
  <video>
                        <figcaption>
       <footer>
<input type="color">      <input type="range">


<input type="number">     <input type="email">

<input type="time">
                          <input type="search">
<input type="month">

                          <input type="tel">
<input type="date">


                          <input type="datetime">
<input type="week">

<input type="datetime-local">

<input type="url">
Web Storage
sessionStorage.setItem("FU", "Sarah Palin");
console.log(sessionStorage.getItem("FU"));
localStorage.setItem("Job", "Politician");
var sarahPalin = {
    "contest" : "Miss Alaska pageant",
    "Talent" : "Flute playing"
};

localStorage.setItem("sarah", JSON.stringify(sarahPalin));

console.log(typeof JSON.parse(localStorage.getItem("sarah")));
Web SQL
IndexedDB
Offline Web Applications
<!DOCTYPE html>
<html manifest="offline.appcache">
<head>
...
CACHE MANIFEST

# VERSION 10

CACHE:
offline.html
base.css

FALLBACK:
online.css offline.css

NETWORK:
/live-updates
History API
var url = "http://robertnyman.com",
    title = "My blog",
    state = {
        address : url
    };

window.history.pushState(state.address, title, url);
window.history.replaceState(state.address, title, url);
Video
<video controls src="nasa.webm"></video>
<video controls>
    <source src="nasa.mp4"></source>
    <source src="nasa.webm"></source>
</video>
<video src="http://vid.ly/4w2g7d?content=video"
controls></video>
Canvas
Apple even creates open
 standards for the web
                 -Steve Jobs
http://craftymind.com/factory/html5video/
             CanvasVideo.html
WebGL
http://code.google.com/p/webglsamples/
Flight of the Navigator
Robert Nyman
                                              robertnyman.com/speaking/
                                               robertnyman.com/html5/
                                                Twitter: @robertnyman




Pictures:

Star Wars Awesome: http://jacobcharlesdietz.com/#/awesome/                     Internet hole: http://cheezburger.com/View/3194058752
Robocop: http://www.meh.ro/2010/04/01/murphy-as-robocop/                       History: http://animatedtv.about.com/od/fgmultimedia/ig/-Family-Guy--
Royal wedding: http://twitpic.com/4r3mes                                       Pictures/Griffin-Family-History.htm
Storage fail: http://failfun.com/funny-pictures/gangsta-fail/                  Canvas: http://www.ioffer.com/c/Drawings-1000407
Cookie monster: http://honestviewsfromhonestman.blogspot.com/2009/09/cookie-   3D apple: http://3dst.de/typo3temp/pics/974e4144fc.jpg
monster.html                                                                   Go where I've never been: http://musicisart.ws/diane-arbus/
You suck: http://www.crunchgear.com/2009/04/22/gadgets-sucks/                  Anything is possible: http://www.elektrodrop.com/2009/12/straight-out-of-
                                                                               china/?quick_view=1
                                                                               Super Mario Video: http://www.archive.org/details/Mario1_507
We can’t change history, but we can change the future.
               Be nice to each other.

More Related Content

What's hot

第40回 HTML5とか勉強会 HTML5マークアップ ビギナーの良くある質問にズバリ答えます
第40回 HTML5とか勉強会 HTML5マークアップ ビギナーの良くある質問にズバリ答えます第40回 HTML5とか勉強会 HTML5マークアップ ビギナーの良くある質問にズバリ答えます
第40回 HTML5とか勉強会 HTML5マークアップ ビギナーの良くある質問にズバリ答えます
Futomi Hatano
 
Best of the EdTech Web 2010 - With Links
Best of the EdTech Web 2010 - With LinksBest of the EdTech Web 2010 - With Links
Best of the EdTech Web 2010 - With Links
Richard Byrne
 
JavaScript as a First Class Language
JavaScript as a First Class LanguageJavaScript as a First Class Language
JavaScript as a First Class Language
fabiopereirame
 

What's hot (20)

Juul Wholesale
Juul WholesaleJuul Wholesale
Juul Wholesale
 
第40回 HTML5とか勉強会 HTML5マークアップ ビギナーの良くある質問にズバリ答えます
第40回 HTML5とか勉強会 HTML5マークアップ ビギナーの良くある質問にズバリ答えます第40回 HTML5とか勉強会 HTML5マークアップ ビギナーの良くある質問にズバリ答えます
第40回 HTML5とか勉強会 HTML5マークアップ ビギナーの良くある質問にズバリ答えます
 
Incomplete file
Incomplete fileIncomplete file
Incomplete file
 
Under the Dome (of failure driven pipeline)
Under the Dome (of failure driven pipeline)Under the Dome (of failure driven pipeline)
Under the Dome (of failure driven pipeline)
 
Anime x
Anime xAnime x
Anime x
 
Best of the EdTech Web 2010 - With Links
Best of the EdTech Web 2010 - With LinksBest of the EdTech Web 2010 - With Links
Best of the EdTech Web 2010 - With Links
 
Podcasting 101
Podcasting 101 Podcasting 101
Podcasting 101
 
Things i am thankful for
Things i am thankful forThings i am thankful for
Things i am thankful for
 
Link download
Link downloadLink download
Link download
 
JavaScript as a First Class Language
JavaScript as a First Class LanguageJavaScript as a First Class Language
JavaScript as a First Class Language
 
guide make Redirect backlink
guide make Redirect backlinkguide make Redirect backlink
guide make Redirect backlink
 
FLEXIcontent & FLEXIaccess presentation
FLEXIcontent & FLEXIaccess presentationFLEXIcontent & FLEXIaccess presentation
FLEXIcontent & FLEXIaccess presentation
 
Handlino - RandomLife
Handlino - RandomLifeHandlino - RandomLife
Handlino - RandomLife
 
Get backlink from redirect #f
Get backlink from redirect #fGet backlink from redirect #f
Get backlink from redirect #f
 
Get backlink from redirect #r
Get backlink from redirect #rGet backlink from redirect #r
Get backlink from redirect #r
 
Danh sách forum nước ngoài pr cao chất lượng
Danh sách forum nước ngoài pr cao chất lượngDanh sách forum nước ngoài pr cao chất lượng
Danh sách forum nước ngoài pr cao chất lượng
 
Get backlink from redirect #o
Get backlink from redirect #oGet backlink from redirect #o
Get backlink from redirect #o
 
usautowheels
usautowheelsusautowheels
usautowheels
 
List of micro blog websites
List of micro blog websitesList of micro blog websites
List of micro blog websites
 
Dig Deeper/Django C-notes
Dig Deeper/Django C-notesDig Deeper/Django C-notes
Dig Deeper/Django C-notes
 

Similar to Using HTML5 For a Great Open Web - Valtech Tech Days

Play withmultimedia mac
Play withmultimedia macPlay withmultimedia mac
Play withmultimedia mac
Maso Lin
 
Presentation tools for the classroom 2011
Presentation tools for the classroom 2011Presentation tools for the classroom 2011
Presentation tools for the classroom 2011
Karen Brooks
 
FITC Spotlight HTML5 - The state of the web
FITC Spotlight HTML5 - The state of the webFITC Spotlight HTML5 - The state of the web
FITC Spotlight HTML5 - The state of the web
Frédéric Harper
 
20111014 mu me_html5
20111014 mu me_html520111014 mu me_html5
20111014 mu me_html5
Erik Duval
 
Thing Im Thankful For BKaminski
Thing Im Thankful For BKaminskiThing Im Thankful For BKaminski
Thing Im Thankful For BKaminski
LundquistOnlineA
 

Similar to Using HTML5 For a Great Open Web - Valtech Tech Days (20)

Play withmultimedia mac
Play withmultimedia macPlay withmultimedia mac
Play withmultimedia mac
 
Ruby Robots
Ruby RobotsRuby Robots
Ruby Robots
 
Presentation tools for the classroom 2011
Presentation tools for the classroom 2011Presentation tools for the classroom 2011
Presentation tools for the classroom 2011
 
FITC Spotlight HTML5 - The state of the web
FITC Spotlight HTML5 - The state of the webFITC Spotlight HTML5 - The state of the web
FITC Spotlight HTML5 - The state of the web
 
HTML5 and the web of tomorrow!
HTML5  and the  web of tomorrow!HTML5  and the  web of tomorrow!
HTML5 and the web of tomorrow!
 
Revolutions The Appendix
Revolutions The AppendixRevolutions The Appendix
Revolutions The Appendix
 
HTML5
HTML5HTML5
HTML5
 
Mobile Web Performance - Velocity 2011
Mobile Web Performance - Velocity 2011Mobile Web Performance - Velocity 2011
Mobile Web Performance - Velocity 2011
 
WebDev References
WebDev ReferencesWebDev References
WebDev References
 
Jabber Bot
Jabber BotJabber Bot
Jabber Bot
 
Cutting Edge Search Technology SAScon May 2012
Cutting Edge Search Technology SAScon May 2012Cutting Edge Search Technology SAScon May 2012
Cutting Edge Search Technology SAScon May 2012
 
디자인 패턴과 YUI를 이용해 Rich UI 빠르게 구현하기
디자인 패턴과 YUI를 이용해 Rich UI 빠르게 구현하기디자인 패턴과 YUI를 이용해 Rich UI 빠르게 구현하기
디자인 패턴과 YUI를 이용해 Rich UI 빠르게 구현하기
 
Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…
 
Christian Heilmann's 'State of the Browser in 2011'
Christian Heilmann's 'State of the Browser in 2011'Christian Heilmann's 'State of the Browser in 2011'
Christian Heilmann's 'State of the Browser in 2011'
 
HTML5: Markup Evolved
HTML5: Markup EvolvedHTML5: Markup Evolved
HTML5: Markup Evolved
 
Open Hack London - Introduction to YQL
Open Hack London - Introduction to YQLOpen Hack London - Introduction to YQL
Open Hack London - Introduction to YQL
 
20111014 mu me_html5
20111014 mu me_html520111014 mu me_html5
20111014 mu me_html5
 
Thing Im Thankful For BKaminski
Thing Im Thankful For BKaminskiThing Im Thankful For BKaminski
Thing Im Thankful For BKaminski
 
Rubbing the Sankara Stones the wrong way - From the Front 2014
Rubbing the Sankara Stones the wrong way - From the Front 2014Rubbing the Sankara Stones the wrong way - From the Front 2014
Rubbing the Sankara Stones the wrong way - From the Front 2014
 
Taking your Web App for a walk
Taking your Web App for a walkTaking your Web App for a walk
Taking your Web App for a walk
 

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

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Recently uploaded (20)

MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfCyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdf
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 

Using HTML5 For a Great Open Web - Valtech Tech Days