SlideShare a Scribd company logo
Wednesday, May 25, 2011
I have a vision... every Web
                          page will be valid XML and full
                               of semantic meaning.




Wednesday, May 25, 2011
2004


                          WHAT WG

                             ?




Wednesday, May 25, 2011
Pave the cowpaths




Wednesday, May 25, 2011
W3C   W HAT WG




Wednesday, May 25, 2011
HTML 4.01                  XHTML 1.0   XHTML 1.1       XHTML 2.0



                          HTML 5                    ?

                                          HTML: The Living Standard   ?




Wednesday, May 25, 2011
Browser Wars                 Standards Wars

                                   All I know is I want my
                                    Web apps to work in
                                    everyone’s browser!




Wednesday, May 25, 2011
<script src="../global/modernizr-1.6.js"></script>
                <script>
                window.onload = loadMovie;

                function loadMovie() {
                      var video = document.getElementById("video");
                      if (Modernizr.video) {
                            console.log("supports video!");
                            if (Modernizr.video.h264) {
                                   console.log("supports mp4!");
                                   video.src = "myMovie.mp4";
                            }
                            else if (Modernizr.video.ogg) {
                                   console.log("supports ogg!");
                                   video.src = "myMovie.ogv";
                            }
                      }
                }
                <script>




Wednesday, May 25, 2011
$(document).ready(function(){
                         // Your code here
                       });




Wednesday, May 25, 2011
Wednesday, May 25, 2011
Wednesday, May 25, 2011
Desktop                                          November ‘10
                                                           February ‘11


               IE 9.0 beta
                          IE 8.0
                          IE 7.0
                          IE 6.0
    Firefox 4.0 beta
               Firefox 3.5
               Firefox 3.1
                    Chrome
                          Safari
                        Opera
                      Others
                        IE (all)
             Firefox (all)
                       Mobile
                                       0   10   20   30   40         50
Data from StatsCounter via Wikipedia

Wednesday, May 25, 2011
Wednesday, May 25, 2011
Mobile                                           November ‘10
                                                           February ‘11


             Opera Mini

                       iPhone

                        Nokia

            Black Berry

                    Android

                        Other

                                       0   10   20   30   40         50




Data from StatsCounter via Wikipedia

Wednesday, May 25, 2011
What is HTML5?


Wednesday, May 25, 2011
t a gs
                          • New doctype
                          • Semantic HTML tags
                          • Data attributes
                          • Media tags
                          • Form input types and validation
                          • Canvas
                          • Local Storage
                                                              A P Is
                          • Geolocation

                                                  r ip t
                          • Web-workers

                                          a S c
                                     v
                          • Web sockets
                                   Ja
Wednesday, May 25, 2011
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">




                          <!DOCTYPE html>



Wednesday, May 25, 2011
Structure and Semantics




Wednesday, May 25, 2011
<div id=”header”>
                                      <div id=”nav”>



                                               o u p
                                       iv s
                          <div id=”section”>     <div id=”aside”>

                                    d
                                    <div id=”footer”>

Wednesday, May 25, 2011
<header>
                                       <nav>


                          <section>              <aside>




                                      <footer>

Wednesday, May 25, 2011
http://caniuse.com




Wednesday, May 25, 2011
<p>

                          <h1>, <h2>                       redefined

                          <small>?   “small print”, e.g. for comments

                          <time>     Represents a date or time
                                                          new




Wednesday, May 25, 2011
What’s cool about
                             HTML5?


Wednesday, May 25, 2011
<video>




Wednesday, May 25, 2011
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
         width="425" height="344" codebase="http://
         download.macromedia.com/pub/shockwave/cabs/flash/
         swflash.cab#version=6,0,40,0">
         <param name="allowFullScreen" value="true" />
         <param name="allowscriptaccess" value="always" />
         <param name="src" value="http://www.youtube.com/v/
                                                                         The old way
         oHg5SJYRHA0&hl=en&fs=1&" />
         <param name="allowfullscreen" value="true" />
         <embed type="application/x-shockwave-flash" width="425"
         height="344" src="http://www.youtube.com/v/
         oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always"
         allowfullscreen="true">
         </embed>
         </object>
                                                                        The new way

                          <video src=”myawesomevideo.mp4”>
                          Your browser doesn’t support video
                          </video>



                                                                    http://www.mediafront.org/
Wednesday, May 25, 2011
<canvas>




Wednesday, May 25, 2011
function drawSmileyFace() {
                                var canvas = document.getElementById("smiley");
                                var context = canvas.getContext("2d");

                               // face
                               context.beginPath()
                               context.arc(300, 300, 200, 0, 2*Math.PI, true);
                               context.fillStyle = "#ffffcc";
                               context.fill();
                               context.stroke();

                               // left eye
                               context.beginPath();
                               context.arc(200, 250, 25, 0, 2*Math.PI, true);
                               context.stroke();

                               // right eye
                               context.beginPath();
                               context.arc(400, 250, 25, 0, 2*Math.PI, true);
                               context.stroke();

                               // nose
                               context.beginPath();
                               context.moveTo(300, 300);
                               context.lineTo(300, 350);
                               context.stroke();

                               // mouth
                               context.beginPath();
                               var angle = degreesToRadians(20);
                               context.arc(300, 350, 75, angle, Math.PI-angle, false);

                               context.stroke();
                          }



Wednesday, May 25, 2011
http://9elements.com/io/projects/html5/canvas/
Wednesday, May 25, 2011
Wednesday, May 25, 2011
<video> + <canvas>




Wednesday, May 25, 2011
http://www.craftymind.com/factory/html5video/CanvasVideo.html
Wednesday, May 25, 2011
Wednesday, May 25, 2011
<canvas> + libraries




Wednesday, May 25, 2011
Processing.js




                          http://fizz.bloom.io/
Wednesday, May 25, 2011
Wednesday, May 25, 2011
Three.js




                          http://mrdoob.github.com/three.js/examples/canvas_geometry_cube.html
Wednesday, May 25, 2011
localStorage




Wednesday, May 25, 2011
localStorage
                          Like cookies, but better




Wednesday, May 25, 2011
5MB




                          localStorage.setItem(“note1”, “wash cat”);
                          note1 = localStorage.getItem(“note1”);




Wednesday, May 25, 2011
CSS3




Wednesday, May 25, 2011
Wednesday, May 25, 2011
Browser Tools




Wednesday, May 25, 2011
Wednesday, May 25, 2011
Mobile




Wednesday, May 25, 2011
Mobile Web app libraries

                          XUI
                          jQtouch
                          Sencha Touch
                          jQuery Mobile




Wednesday, May 25, 2011
Mobile libraries for
                          HTML/CSS -> native

                          PhoneGap
                          Titanium
                          Rhodes (HTML+Ruby)




Wednesday, May 25, 2011
PhoneGap supported features by platform




Wednesday, May 25, 2011
Wednesday, May 25, 2011
Elisabeth Robson
                          beth@wickedlysmart.com
                              @elisabethrobson




Wednesday, May 25, 2011

More Related Content

Viewers also liked

Model/Guided Writing Task
Model/Guided Writing TaskModel/Guided Writing Task
Model/Guided Writing Task
Mele Makisi
 
Cas2016 transformación digital y metodologías ágiles
Cas2016 transformación digital y metodologías ágilesCas2016 transformación digital y metodologías ágiles
Cas2016 transformación digital y metodologías ágiles
Roberto Canales
 
Intra-emprendimiento en empresas de Frikis - Codemotion 2016
Intra-emprendimiento en empresas de Frikis - Codemotion 2016Intra-emprendimiento en empresas de Frikis - Codemotion 2016
Intra-emprendimiento en empresas de Frikis - Codemotion 2016
Roberto Canales
 
Lo somni (català)
Lo somni (català)Lo somni (català)
Lo somni (català)
belen1994
 
Mallorca, la meva illa
Mallorca, la meva illaMallorca, la meva illa
Mallorca, la meva illa
asureda2
 
La decadencia del_software
La decadencia del_softwareLa decadencia del_software
La decadencia del_software
Roberto Canales
 
Wellkome to emo-life
Wellkome to emo-lifeWellkome to emo-life
Wellkome to emo-life
KateSwarovskyh
 

Viewers also liked (9)

Model/Guided Writing Task
Model/Guided Writing TaskModel/Guided Writing Task
Model/Guided Writing Task
 
Cas2016 transformación digital y metodologías ágiles
Cas2016 transformación digital y metodologías ágilesCas2016 transformación digital y metodologías ágiles
Cas2016 transformación digital y metodologías ágiles
 
Intra-emprendimiento en empresas de Frikis - Codemotion 2016
Intra-emprendimiento en empresas de Frikis - Codemotion 2016Intra-emprendimiento en empresas de Frikis - Codemotion 2016
Intra-emprendimiento en empresas de Frikis - Codemotion 2016
 
Lo somni (català)
Lo somni (català)Lo somni (català)
Lo somni (català)
 
Mallorca, la meva illa
Mallorca, la meva illaMallorca, la meva illa
Mallorca, la meva illa
 
La decadencia del_software
La decadencia del_softwareLa decadencia del_software
La decadencia del_software
 
Wellkome to emo-life
Wellkome to emo-lifeWellkome to emo-life
Wellkome to emo-life
 
플리커
플리커플리커
플리커
 
플리커
플리커플리커
플리커
 

Recently uploaded

The Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF GuideThe Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF Guide
Shiv Technolabs
 
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
aslasdfmkhan4750
 
Integrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecaseIntegrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecase
shyamraj55
 
Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024
aakash malhotra
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
Priyanka Aash
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
313mohammedarshad
 
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
Edge AI and Vision Alliance
 
Google I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged SlidesGoogle I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged Slides
Google Developer Group - Harare
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
Matthias Neugebauer
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
Safe Software
 
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
shanihomely
 
The importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT StandardizationThe importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT Standardization
Axel Rennoch
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
alexjohnson7307
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
ldtexsolbl
 
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
digitalxplive
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
SynapseIndia
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Kunal Gupta
 
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
SAI KAILASH R
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
sunilverma7884
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
maigasapphire
 

Recently uploaded (20)

The Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF GuideThe Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF Guide
 
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
 
Integrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecaseIntegrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecase
 
Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
 
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
 
Google I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged SlidesGoogle I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged Slides
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
 
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
 
The importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT StandardizationThe importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT Standardization
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
 
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
The Rise of AI in Cybersecurity How Machine Learning Will Shape Threat Detect...
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
 
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
 

HTML5 - What's it all about?