SlideShare a Scribd company logo
1 of 46
Download to read offline
<HTML5>
NEW AND IMPROVED


    Timothy Fisher
Who Am I

   Timothy Fisher
   Compuware

      @tfisher
      timothyf@gmail.com
      www.timothyfisher.com
Less Header Code
More Semantic HTML tags
Media Tags
Geolocation
Canvas
Input Types
Form Validation
Local Storage
WebSQL Storage
Offline Applications
Draggable
Cross-Domain Messaging
Web Sockets
Web Workers
History API

HTML5 Support
Progressive Enhancement
HTML5 History

•   Specification of HTML published by W3C

•   W3C HTML5 Spec => 900+ pages

•   Work started on HTML5 in late 2003

•   First Working Draft published January 2008

•   Expected Candidate Recommendation - 2012

•   W3C Recommendation - 2022 or later *

* Requires 2 100% complete and fully interoperable implementations

              http://dev.w3.org/html5/spec/
Less Header Code
Pre HTML5:
<!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.01 Transitional//EN" "http://
www.w3.org/tr/html4/loose.dtd">
<html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Awesome Stuff</title>
    </head>
...

With HTML5:
<!DOCTYPE HTML>
<html>
    <head>
      <meta charset=”utf-8”>
      <title>Awesome Stuff</title>
    </head>
...
No Need for Type Attribute

Pre HTML5:
<script type=”text/javascript” src=”script.js”> </script>
<link type=”text/css” href=”style.css”></link>


With HTML5:
<script src=”script.js”> </script>
<link href=”style.css”></link>
More Semantic HTML Tags
             <div id=”header”>

               <div id=”nav”>




<div id=”sidebar”>     <div id=”article”>




             <div id=”footer”>
More Semantic HTML Tags
            <header>

             <nav>




                       <section>
  <aside>
                         <article>




            <footer>
More Semantic HTML Tags


Output
<output name="result"></output>




Progress
<progress id="p" max=100><span>0</span>%</progress>
More Semantic HTML Tags

Meter
Storage space usage:
<meter value=6 max=8>6 blocks used (out of 8 total)</meter>

Voter turnout:
<meter value=0.75><img alt="75%" src="graph75.png"></meter>

Tickets sold:
<meter min="0" max="100" value="75"></meter>
More Semantic HTML Tags

Details and Summary
<details>
   <summary>
      American League Central Division
   </summary>
   Detroit Tigers<br/>
   Minnesota Twins<br/>
   Chicago White Sox<br/>
   Cleveland Indians<br/>
   Kansas City Royals<br/>
</details>


  Use to create an expanding and contracting element that you can use to hide
  details without JavaScript
More Semantic HTML Tags


Address
<address>
   Written by:<br/>
   <a href="/people/show/23">Timothy Fisher</a>, <br/>
   Address: 25296 Hunter Lane, Flat Rock, MI 48134 <br/>
   Phone: 555-1212
</address>


Address applies to the nearest Article or Body tag.



Prior to HTML5 the Address element applied to the document/body as a whole
More Semantic HTML Tags

  Data Attributes
  <div class="car" data-brand="ford" data-model="mustang">
     <button class="fire">
  </div>

  //Using DOM's getAttribute() property
  var brand=mydiv.getAttribute("data-brand") //returns "ford"
  mydiv.setAttribute("data-brand", "mazda") //changes "data-brand" to "mazda"
  mydiv.removeAttribute("data-brand") //removes "data-brand" attribute entirely

  //Using JavaScript's dataset property
  var brand=mydiv.dataset.brand //returns "ford"
  mydiv.dataset.brand='mazda' //changes "data-brand" to "mazda"
  mydiv.dataset.brand=null //removes "data-brand" attribute

Custom data attribs were always possible but prior to HTML5 they would cause validation errors.
More Semantic HTML Tags
Section, hgroup, Article
<article>
   <hgroup>
       <h1>Mobile Phones</h1>
       <h2>Different Smart Phones</h2>
   </hgroup>
   <p>Some of the more popular mobile smart phones</p>
   <section>
       <h1>Apple iPhone</h1>
       <p>A popular smart phone from Apple.</p>
   </section>
   <section>
      <h1>Android-based Phones</h1>
      <p>A series of smart phones that use the Google Android operating system.</p>
   </section>
</article>

           These elements replace many of your divs
More Semantic HTML Tags


Figure and Figure Caption
<figure>
   <img src="ninja_guy.jpg" alt="A Standing Ninja Guy.">
   <figcaption>Cool Ninja Guy</figcaption>
</figure>




                                                           Cool Ninja Guy


The browser can position the caption for you
More Semantic HTML Tags

Menu and Command
<menu label="Hero List">
  <command type="radio" radiogroup="herolist" label="Spiderman">
  <command type="radio" radiogroup="herolist" label="Superman">
  <command type="radio" radiogroup="herolist" label="Batman">
</menu>




       a simple radio button group
More Semantic HTML Tags

Menu (continued)
<menu type="toolbar">
   <li>
       <menu label="File">
          <button type="button" onclick="file_new()">New...</button>
          <button type="button" onclick="file_open()">Open...</button>
          <button type="button" onclick="file_save()">Save...</button>
          <button type="button"onclick="file_saveas()">Save As...</button>
       </menu>
   </li>
   <li>
       <menu label="Edit">
         <button type="button" onclick="edit_copy()">Copy...</button>
         <button type="button" onclick="edit_cut()">Cut...</button>
         <button type="button" onclick="edit_paste()">Paste...</button>
       </menu>
   </li>
</menu>
Media Tags



<video src=” ironman.ogg” />


Automatically show native controls
<video src=”ironman.ogg” controls />




              http://www.youtube.com/html5
Media Tags


<video controls/>
   <source src=”ironman.mp4” />
   <source src=”ironman.ogg” />
</video>
                                                  ironman.mp4 ironman.ogg


  Specify multiple source elements to support more browsers
             (i.e. mp4 willl work in Safari, ogg will work in Firefox)
Media Tags


<audio src=” teenage_dream.mp3”></audio>


<audio controls>
   <source src=”teenage_dream.mp3”/>
   <source src=”teenage_dream.ogg”/>
</audio>


Provides a download link for non-supporting browsers:
<audio src=”teenage_dream.ogg” autoplay controls loop>
   <a href=” teenage_dream.ogg”>download</a>
</audio>
Native GeoLocation


Build location-aware apps without access to native mobile apis



 navigator.geolocation.getCurrentPosition(
    function(position) {
       // display position
    }
 );
Canvas
A complete drawing and animation API

<canvas id=”square”>
   fallback content
</canvas>

<script>
   // create basic filled square
   canvas = canvas.getElementById(ʻsquareʼ);
   context = canvas.getContext(ʻ2dʼ);
   context.fillStyle = “#000000”;
   context.fillRect(0, 0, 100, 100);
</script>


      http://www.theopensourcery.com/keepopen/2010/html5-canvas-demo/
               http://www.benjoffe.com/code/demos/canvascape/
Input Types


<input type=”email” />

   tel      datetime
   search   date
   email    range
   url      color



       Unsupported browsers default to text type
   Future browsers will display appropriate UI controls
Input Types


Input Type Range + Datalist
<input type="range" min="-100" max="100" value="0"
       step="10" name="power" list="powers">
   <datalist id="powers">
      <option value="0">
      <option value="-30">
      <option value="30">
      <option value="+50">
   </datalist>
Input Types

File Upload Multiple
<input type=file multiple>
Input Types


Datalist

 <input list="movies" />
 <datalist id="movies">
 # <option>The Dark Knight</option>
 # <option>Spiderman 3</option>
 # <option>X-Men</option>
 </datalist>




            Used to provide Auto Complete feature
Form Validation



   <input name="custname" required>

   <script>
      form.checkValidity();
   </script>




By adding ‘required’ attribute you can take advantage of validity checking without custom JavaScript.
Form Validation

Custom Validation
<label>Gender: </label>
<input name=”gender” type="text" oninput="check(this)">

<script>
   function check(input) {
       if (input.value != "male" && input.value != "female") {
            input.setCustomValidity('"' + input.value + '" is not a gender.');
       }
       else {
            // input is good - reset error message
            input.setCustomValidity('');
       }
   }
</script>
Local / Session Storage



sessionStorage.setItem(key, value);
sessionStorage.getItem(key);

localStorage.setItem(key, value);
localStorage.getItem(key);


       Save key/value pairs to a client-side data store implemented by browser
                 Session store expires when the browser is closed
WebSQL Storage

A set of APIs to manipulate client-side databases using SQL
  // open/create a database
  var db = openDatabase(db_name, version, db_desc, est_size);

  // create a table and insert some data
  db.transaction(function (tx) {
    tx.executeSql('CREATE TABLE foo (id unique, text)');
      tx.executeSql('INSERT INTO foo (id, text) VALUES (1, "synergies")');
  });

  // select data and display it
  tx.executeSql('SELECT * FROM foo', [], function (tx, results) {
    var len = results.rows.length, i;
    for (i = 0; i < len; i++) {
         alert(results.rows.item(i).text);
    }
  });
Offline Applications

Offline Applications using manifest
<html manifest=”cache.manifest”>
provide a cache.manifest file:
  CACHE MANIFEST
  clock.html                  uses MIME type:
  clock.css                   text/cache-manifest
  clock.js




            Run a web application in offline mode, disconnected from Internet

   Of course your app will still have failures if it tries to pull live data from the Internet
Offline Applications


Detect Online or Offline
window.addEventListener("online", function() {
       do_something();
   }, true);


window.addEventListener("offline", function() {
       do_something();
   }, true);
Draggable

<div draggable=”true”></div>

// set data to access at target
addEvent(div, “dragstart”, function(e) {
     e.dataTransfer.setData(ʻfooʼ, ʻbarʼ);
}, true);

// access data from dragged object
addEvent(div, ʻdragendʼ, function(e) {
     e.dataTransfer.getData(ʻfooʼ);
}, true);


HTML5 drag and drop should work across frames, and across browser windows.

HTML5 drag and drop also allows users to drag and drop data to and from non-web
applications, i.e. out of the browser or into the browser
Cross-Domain Messaging




// sender
var o = document.getElementsByTagName('iframe')[0];
o.contentWindow.postMessage('Hello world', 'http://b.example.org/');


// recipient
addEvent(window, "message", function(e){
  document.getElementById("rcvd_message").innerHTML = e.origin + " said: " + e.data;
});
Editable Content




Turn any element into an editable area
<script>
   document.getElementById(ʻnotepadʼ).contentEditable = true;
</script>
Web Sockets

                               • Opens a persistent connection to the server
                               • Can be used for server to browser push
                               • Restricted communication to origin server
                               • Eliminates need to poll for data



var ws = new WebSocket("ws://friendfeed.com/websocket");
ws.onopen = function() {
   ws.send("This is a message from the browser to the server");
};
ws.onmessage = function(event) {
   alert("The server sent a message: " + event.data);
};
Web Workers

- Provide “threads” for JavaScript execution
- Donʼt have access to DOM or page.
- Have to communicate through postMessage API
Web Workers
In the Browser
// Create a Web Worker
var worker = new Worker(“worker.js”);

// Post a message to the Web Worker
worker.postMessage(0);

// Triggered by postMessage in the Web Worker
worker.onmessage = function(evt) {
    // evt.data is the values from the Web Worker
    alert(evt.data);
};

// Catch Web Worker error
worker.onerror = function(evt) {
    alert(evt.data);
};
Web Workers


In the Web Worker
// Triggered by postMessage in the page
onmessage = function(evt) {
    // evt.data will be 0 here
    for (var i=evt.data, k=1000001; i<k; i++) {
        // Continually sends data back
        postMessage(i);
    };
};
History API

JavaScript API for moving through browser history

window.history.back();
window.history.forward();

window.history.go(2);

window.history.length;

window.history.pushState(data, title, url);
window.history.replaceState(data, title, url);
HTML5 Compatibilty
HTML5Test.com scores browsers according to the following criteria:


          •   Parsing Rules               •   Microdata

          •   Canvas                      •   Web Applications

          •   Video                       •   Geo Location

          •   Audio                       •   WebGL

          •   Local Devices               •   Communication

          •   Elements                    •   Files

          •   Forms                       •   Storage

          •   User Interaction            •   Workers
HTML5 Compatibilty

Safari 5             Chrome 7          Firefox 3.6




           http://www.HTML5test.com/
HTML5 Compatibilty

IE 8             IE 9 Beta          Opera




        http://www.HTML5test.com/
Progressive Enhancement

   •   Use HTML5 when available

   •   Fallback to a different mechanism when not available

   •   Supported by many libraries including jQuery.

if HTML5 video is not supported, flash video will load

  <video controls width="500">
  #    <source src="video.ogg" />
  #    <source src="video.mp4" />
  #    <embed src="http://blip.tv/play/gcMV" type="application/x-shockwave-flash"
               width="1024" height="798" allowscriptaccess="always"
               allowfullscreen="true"></embed>
  </video>
DON’T FORGET CSS3
• Rounded corners
• Box shadows
• Transitions
• Rotate
• Gradients
• Text shadow
• Web fonts
http://www.webhostingsearch.com/20-of-the-best-examples-of-css
Recommended Sites

              http://html5.timothyfisher.com

              http://www.HTML5test.com

              http://html5demos.com

               http://caniuse.com


This Presentation:
http://www.slideshare.net/timothyf/html5-new-and-improved

More Related Content

What's hot

Working with LoopBack Models
Working with LoopBack ModelsWorking with LoopBack Models
Working with LoopBack ModelsRaymond Feng
 
Picking the Right Node.js Framework for Your Use Case
Picking the Right Node.js Framework for Your Use CasePicking the Right Node.js Framework for Your Use Case
Picking the Right Node.js Framework for Your Use CaseJimmy Guerrero
 
Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec...
Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec...Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec...
Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec...SPTechCon
 
Building Android apps with Parse
Building Android apps with ParseBuilding Android apps with Parse
Building Android apps with ParseDroidConTLV
 
Easing offline web application development with GWT
Easing offline web application development with GWTEasing offline web application development with GWT
Easing offline web application development with GWTArnaud Tournier
 
Apache spark with akka couchbase code by bhawani
Apache spark with akka couchbase code by bhawaniApache spark with akka couchbase code by bhawani
Apache spark with akka couchbase code by bhawaniBhawani N Prasad
 
An Overview of Node.js
An Overview of Node.jsAn Overview of Node.js
An Overview of Node.jsAyush Mishra
 
Groovy in SOAP UI
Groovy in SOAP UIGroovy in SOAP UI
Groovy in SOAP UIravireddy76
 
LoopBack: a productivity booster for MEAN
LoopBack: a productivity booster for MEANLoopBack: a productivity booster for MEAN
LoopBack: a productivity booster for MEANMiroslav Bajtoš
 
Cooking your Ravioli "al dente" with Hexagonal Architecture
Cooking your Ravioli "al dente" with Hexagonal ArchitectureCooking your Ravioli "al dente" with Hexagonal Architecture
Cooking your Ravioli "al dente" with Hexagonal ArchitectureJeroen Rosenberg
 
Developing an intranet on office 365
Developing an intranet on office 365Developing an intranet on office 365
Developing an intranet on office 365Eric Shupps
 
Introduction to share point 2010 development
Introduction to share point 2010 developmentIntroduction to share point 2010 development
Introduction to share point 2010 developmentEric Shupps
 
Seattle StrongLoop Node.js Workshop
Seattle StrongLoop Node.js WorkshopSeattle StrongLoop Node.js Workshop
Seattle StrongLoop Node.js WorkshopJimmy Guerrero
 

What's hot (20)

Working with LoopBack Models
Working with LoopBack ModelsWorking with LoopBack Models
Working with LoopBack Models
 
Picking the Right Node.js Framework for Your Use Case
Picking the Right Node.js Framework for Your Use CasePicking the Right Node.js Framework for Your Use Case
Picking the Right Node.js Framework for Your Use Case
 
Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec...
Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec...Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec...
Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec...
 
Asp.net.
Asp.net.Asp.net.
Asp.net.
 
Building Android apps with Parse
Building Android apps with ParseBuilding Android apps with Parse
Building Android apps with Parse
 
Easing offline web application development with GWT
Easing offline web application development with GWTEasing offline web application development with GWT
Easing offline web application development with GWT
 
Apache spark with akka couchbase code by bhawani
Apache spark with akka couchbase code by bhawaniApache spark with akka couchbase code by bhawani
Apache spark with akka couchbase code by bhawani
 
An Overview of Node.js
An Overview of Node.jsAn Overview of Node.js
An Overview of Node.js
 
Groovy in SOAP UI
Groovy in SOAP UIGroovy in SOAP UI
Groovy in SOAP UI
 
LoopBack: a productivity booster for MEAN
LoopBack: a productivity booster for MEANLoopBack: a productivity booster for MEAN
LoopBack: a productivity booster for MEAN
 
Ch3 server controls
Ch3 server controlsCh3 server controls
Ch3 server controls
 
Vaadin
VaadinVaadin
Vaadin
 
Cooking your Ravioli "al dente" with Hexagonal Architecture
Cooking your Ravioli "al dente" with Hexagonal ArchitectureCooking your Ravioli "al dente" with Hexagonal Architecture
Cooking your Ravioli "al dente" with Hexagonal Architecture
 
Developing an intranet on office 365
Developing an intranet on office 365Developing an intranet on office 365
Developing an intranet on office 365
 
Introduction to share point 2010 development
Introduction to share point 2010 developmentIntroduction to share point 2010 development
Introduction to share point 2010 development
 
Angular universal
Angular universalAngular universal
Angular universal
 
Seattle StrongLoop Node.js Workshop
Seattle StrongLoop Node.js WorkshopSeattle StrongLoop Node.js Workshop
Seattle StrongLoop Node.js Workshop
 
Why ruby on rails
Why ruby on railsWhy ruby on rails
Why ruby on rails
 
Introduction To Grails
Introduction To GrailsIntroduction To Grails
Introduction To Grails
 
Microservices/dropwizard
Microservices/dropwizardMicroservices/dropwizard
Microservices/dropwizard
 

Viewers also liked

Text Formatting+(HTML5)
Text Formatting+(HTML5)Text Formatting+(HTML5)
Text Formatting+(HTML5)Ahmed Hassan
 
HTML5 & WAI-ARIA - Happy Families
HTML5 & WAI-ARIA - Happy FamiliesHTML5 & WAI-ARIA - Happy Families
HTML5 & WAI-ARIA - Happy FamiliesSteven Faulkner
 
HTML5 Accessibility
HTML5 AccessibilityHTML5 Accessibility
HTML5 Accessibilitybgibson
 
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic BookHTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic BookiTawy Community
 
Html5 tutorial for beginners
Html5 tutorial for beginnersHtml5 tutorial for beginners
Html5 tutorial for beginnersSingsys Pte Ltd
 
دورة CSS3 باللغة العربية
دورة CSS3 باللغة العربيةدورة CSS3 باللغة العربية
دورة CSS3 باللغة العربيةanees abu-hmaid
 
باللغة العربية HTML5 دورة
باللغة العربية HTML5 دورة باللغة العربية HTML5 دورة
باللغة العربية HTML5 دورة anees abu-hmaid
 
كتاب تعلم Html5 css3
كتاب تعلم Html5 css3كتاب تعلم Html5 css3
كتاب تعلم Html5 css3titifcom
 
أحدث الأدوات والمستجدات في تطوير تطبيقات الأجهزة الذكية
أحدث الأدوات والمستجدات في تطوير تطبيقات الأجهزة الذكيةأحدث الأدوات والمستجدات في تطوير تطبيقات الأجهزة الذكية
أحدث الأدوات والمستجدات في تطوير تطبيقات الأجهزة الذكيةAbdullah AlQasim
 
Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Peter Lubbers
 

Viewers also liked (15)

طور نفسك
طور نفسكطور نفسك
طور نفسك
 
Text Formatting+(HTML5)
Text Formatting+(HTML5)Text Formatting+(HTML5)
Text Formatting+(HTML5)
 
HTML5 Tutorial
HTML5 TutorialHTML5 Tutorial
HTML5 Tutorial
 
HTML5 & WAI-ARIA - Happy Families
HTML5 & WAI-ARIA - Happy FamiliesHTML5 & WAI-ARIA - Happy Families
HTML5 & WAI-ARIA - Happy Families
 
HTML5 Accessibility
HTML5 AccessibilityHTML5 Accessibility
HTML5 Accessibility
 
Html 5 Features And Benefits
Html 5 Features And Benefits  Html 5 Features And Benefits
Html 5 Features And Benefits
 
HTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic BookHTML 5 - CSS 3 Arabic Book
HTML 5 - CSS 3 Arabic Book
 
Html5 tutorial for beginners
Html5 tutorial for beginnersHtml5 tutorial for beginners
Html5 tutorial for beginners
 
1 فون جاب
1  فون جاب1  فون جاب
1 فون جاب
 
دورة CSS3 باللغة العربية
دورة CSS3 باللغة العربيةدورة CSS3 باللغة العربية
دورة CSS3 باللغة العربية
 
باللغة العربية HTML5 دورة
باللغة العربية HTML5 دورة باللغة العربية HTML5 دورة
باللغة العربية HTML5 دورة
 
كتاب تعلم Html5 css3
كتاب تعلم Html5 css3كتاب تعلم Html5 css3
كتاب تعلم Html5 css3
 
أحدث الأدوات والمستجدات في تطوير تطبيقات الأجهزة الذكية
أحدث الأدوات والمستجدات في تطوير تطبيقات الأجهزة الذكيةأحدث الأدوات والمستجدات في تطوير تطبيقات الأجهزة الذكية
أحدث الأدوات والمستجدات في تطوير تطبيقات الأجهزة الذكية
 
Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)
 
Www.kutub.info 16076
Www.kutub.info 16076Www.kutub.info 16076
Www.kutub.info 16076
 

Similar to HTML5 New and Improved

TechDays 2013 Jari Kallonen: What's New WebForms 4.5
TechDays 2013 Jari Kallonen: What's New WebForms 4.5TechDays 2013 Jari Kallonen: What's New WebForms 4.5
TechDays 2013 Jari Kallonen: What's New WebForms 4.5Tieturi Oy
 
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!Coulawrence
 
#NewMeetup Performance
#NewMeetup Performance#NewMeetup Performance
#NewMeetup PerformanceJustin Cataldo
 
HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2James Pearce
 
PrimeTime JSF with PrimeFaces - Dec 2014
PrimeTime JSF with PrimeFaces - Dec 2014PrimeTime JSF with PrimeFaces - Dec 2014
PrimeTime JSF with PrimeFaces - Dec 2014cagataycivici
 
Vaadin Components @ Angular U
Vaadin Components @ Angular UVaadin Components @ Angular U
Vaadin Components @ Angular UJoonas Lehtinen
 
Html5ppt
Html5pptHtml5ppt
Html5pptrecroup
 
Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015
Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015
Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015Phil Leggetter
 
Pengenalan AngularJS
Pengenalan AngularJSPengenalan AngularJS
Pengenalan AngularJSEdi Santoso
 
Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...
Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...
Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...OPITZ CONSULTING Deutschland
 
Implementation of GUI Framework part3
Implementation of GUI Framework part3Implementation of GUI Framework part3
Implementation of GUI Framework part3masahiroookubo
 
Ajax Performance Tuning and Best Practices
Ajax Performance Tuning and Best PracticesAjax Performance Tuning and Best Practices
Ajax Performance Tuning and Best PracticesDoris Chen
 
Repaso rápido a los nuevos estándares web
Repaso rápido a los nuevos estándares webRepaso rápido a los nuevos estándares web
Repaso rápido a los nuevos estándares webPablo Garaizar
 

Similar to HTML5 New and Improved (20)

Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
 
TechDays 2013 Jari Kallonen: What's New WebForms 4.5
TechDays 2013 Jari Kallonen: What's New WebForms 4.5TechDays 2013 Jari Kallonen: What's New WebForms 4.5
TechDays 2013 Jari Kallonen: What's New WebForms 4.5
 
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
 
#NewMeetup Performance
#NewMeetup Performance#NewMeetup Performance
#NewMeetup Performance
 
前端概述
前端概述前端概述
前端概述
 
HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2
 
PrimeTime JSF with PrimeFaces - Dec 2014
PrimeTime JSF with PrimeFaces - Dec 2014PrimeTime JSF with PrimeFaces - Dec 2014
PrimeTime JSF with PrimeFaces - Dec 2014
 
Html5 For Jjugccc2009fall
Html5 For Jjugccc2009fallHtml5 For Jjugccc2009fall
Html5 For Jjugccc2009fall
 
Vaadin Components @ Angular U
Vaadin Components @ Angular UVaadin Components @ Angular U
Vaadin Components @ Angular U
 
HTML5
HTML5 HTML5
HTML5
 
Html5ppt
Html5pptHtml5ppt
Html5ppt
 
HTML5
HTML5HTML5
HTML5
 
Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015
Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015
Why You Should be Using Web Components Right Now. And How. ForwardJS July 2015
 
Pengenalan AngularJS
Pengenalan AngularJSPengenalan AngularJS
Pengenalan AngularJS
 
Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...
Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...
Design Patterns for JavaScript Web Apps - JavaScript Conference 2012 - OPITZ ...
 
Spsl v unit - final
Spsl v unit - finalSpsl v unit - final
Spsl v unit - final
 
Implementation of GUI Framework part3
Implementation of GUI Framework part3Implementation of GUI Framework part3
Implementation of GUI Framework part3
 
Ajax Performance Tuning and Best Practices
Ajax Performance Tuning and Best PracticesAjax Performance Tuning and Best Practices
Ajax Performance Tuning and Best Practices
 
Repaso rápido a los nuevos estándares web
Repaso rápido a los nuevos estándares webRepaso rápido a los nuevos estándares web
Repaso rápido a los nuevos estándares web
 
1cst
1cst1cst
1cst
 

More from Timothy Fisher

Social Media Startup Guide
Social Media Startup GuideSocial Media Startup Guide
Social Media Startup GuideTimothy Fisher
 
Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Timothy Fisher
 
Developing High Performance Web Apps
Developing High Performance Web AppsDeveloping High Performance Web Apps
Developing High Performance Web AppsTimothy Fisher
 
Getting Social with OpenSocial
Getting Social with OpenSocialGetting Social with OpenSocial
Getting Social with OpenSocialTimothy Fisher
 
Automated Testing With Watir
Automated Testing With WatirAutomated Testing With Watir
Automated Testing With WatirTimothy Fisher
 

More from Timothy Fisher (6)

Social Media Startup Guide
Social Media Startup GuideSocial Media Startup Guide
Social Media Startup Guide
 
Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011
 
JQuery 101
JQuery 101JQuery 101
JQuery 101
 
Developing High Performance Web Apps
Developing High Performance Web AppsDeveloping High Performance Web Apps
Developing High Performance Web Apps
 
Getting Social with OpenSocial
Getting Social with OpenSocialGetting Social with OpenSocial
Getting Social with OpenSocial
 
Automated Testing With Watir
Automated Testing With WatirAutomated Testing With Watir
Automated Testing With Watir
 

Recently uploaded

IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 

Recently uploaded (20)

IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 

HTML5 New and Improved

  • 1. <HTML5> NEW AND IMPROVED Timothy Fisher
  • 2. Who Am I Timothy Fisher Compuware @tfisher timothyf@gmail.com www.timothyfisher.com
  • 3. Less Header Code More Semantic HTML tags Media Tags Geolocation Canvas Input Types Form Validation Local Storage WebSQL Storage Offline Applications Draggable Cross-Domain Messaging Web Sockets Web Workers History API HTML5 Support Progressive Enhancement
  • 4. HTML5 History • Specification of HTML published by W3C • W3C HTML5 Spec => 900+ pages • Work started on HTML5 in late 2003 • First Working Draft published January 2008 • Expected Candidate Recommendation - 2012 • W3C Recommendation - 2022 or later * * Requires 2 100% complete and fully interoperable implementations http://dev.w3.org/html5/spec/
  • 5. Less Header Code Pre HTML5: <!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.01 Transitional//EN" "http:// www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Awesome Stuff</title> </head> ... With HTML5: <!DOCTYPE HTML> <html> <head> <meta charset=”utf-8”> <title>Awesome Stuff</title> </head> ...
  • 6. No Need for Type Attribute Pre HTML5: <script type=”text/javascript” src=”script.js”> </script> <link type=”text/css” href=”style.css”></link> With HTML5: <script src=”script.js”> </script> <link href=”style.css”></link>
  • 7. More Semantic HTML Tags <div id=”header”> <div id=”nav”> <div id=”sidebar”> <div id=”article”> <div id=”footer”>
  • 8. More Semantic HTML Tags <header> <nav> <section> <aside> <article> <footer>
  • 9. More Semantic HTML Tags Output <output name="result"></output> Progress <progress id="p" max=100><span>0</span>%</progress>
  • 10. More Semantic HTML Tags Meter Storage space usage: <meter value=6 max=8>6 blocks used (out of 8 total)</meter> Voter turnout: <meter value=0.75><img alt="75%" src="graph75.png"></meter> Tickets sold: <meter min="0" max="100" value="75"></meter>
  • 11. More Semantic HTML Tags Details and Summary <details> <summary> American League Central Division </summary> Detroit Tigers<br/> Minnesota Twins<br/> Chicago White Sox<br/> Cleveland Indians<br/> Kansas City Royals<br/> </details> Use to create an expanding and contracting element that you can use to hide details without JavaScript
  • 12. More Semantic HTML Tags Address <address> Written by:<br/> <a href="/people/show/23">Timothy Fisher</a>, <br/> Address: 25296 Hunter Lane, Flat Rock, MI 48134 <br/> Phone: 555-1212 </address> Address applies to the nearest Article or Body tag. Prior to HTML5 the Address element applied to the document/body as a whole
  • 13. More Semantic HTML Tags Data Attributes <div class="car" data-brand="ford" data-model="mustang"> <button class="fire"> </div> //Using DOM's getAttribute() property var brand=mydiv.getAttribute("data-brand") //returns "ford" mydiv.setAttribute("data-brand", "mazda") //changes "data-brand" to "mazda" mydiv.removeAttribute("data-brand") //removes "data-brand" attribute entirely //Using JavaScript's dataset property var brand=mydiv.dataset.brand //returns "ford" mydiv.dataset.brand='mazda' //changes "data-brand" to "mazda" mydiv.dataset.brand=null //removes "data-brand" attribute Custom data attribs were always possible but prior to HTML5 they would cause validation errors.
  • 14. More Semantic HTML Tags Section, hgroup, Article <article> <hgroup> <h1>Mobile Phones</h1> <h2>Different Smart Phones</h2> </hgroup> <p>Some of the more popular mobile smart phones</p> <section> <h1>Apple iPhone</h1> <p>A popular smart phone from Apple.</p> </section> <section> <h1>Android-based Phones</h1> <p>A series of smart phones that use the Google Android operating system.</p> </section> </article> These elements replace many of your divs
  • 15. More Semantic HTML Tags Figure and Figure Caption <figure> <img src="ninja_guy.jpg" alt="A Standing Ninja Guy."> <figcaption>Cool Ninja Guy</figcaption> </figure> Cool Ninja Guy The browser can position the caption for you
  • 16. More Semantic HTML Tags Menu and Command <menu label="Hero List"> <command type="radio" radiogroup="herolist" label="Spiderman"> <command type="radio" radiogroup="herolist" label="Superman"> <command type="radio" radiogroup="herolist" label="Batman"> </menu> a simple radio button group
  • 17. More Semantic HTML Tags Menu (continued) <menu type="toolbar"> <li> <menu label="File"> <button type="button" onclick="file_new()">New...</button> <button type="button" onclick="file_open()">Open...</button> <button type="button" onclick="file_save()">Save...</button> <button type="button"onclick="file_saveas()">Save As...</button> </menu> </li> <li> <menu label="Edit"> <button type="button" onclick="edit_copy()">Copy...</button> <button type="button" onclick="edit_cut()">Cut...</button> <button type="button" onclick="edit_paste()">Paste...</button> </menu> </li> </menu>
  • 18. Media Tags <video src=” ironman.ogg” /> Automatically show native controls <video src=”ironman.ogg” controls /> http://www.youtube.com/html5
  • 19. Media Tags <video controls/> <source src=”ironman.mp4” /> <source src=”ironman.ogg” /> </video> ironman.mp4 ironman.ogg Specify multiple source elements to support more browsers (i.e. mp4 willl work in Safari, ogg will work in Firefox)
  • 20. Media Tags <audio src=” teenage_dream.mp3”></audio> <audio controls> <source src=”teenage_dream.mp3”/> <source src=”teenage_dream.ogg”/> </audio> Provides a download link for non-supporting browsers: <audio src=”teenage_dream.ogg” autoplay controls loop> <a href=” teenage_dream.ogg”>download</a> </audio>
  • 21. Native GeoLocation Build location-aware apps without access to native mobile apis navigator.geolocation.getCurrentPosition( function(position) { // display position } );
  • 22. Canvas A complete drawing and animation API <canvas id=”square”> fallback content </canvas> <script> // create basic filled square canvas = canvas.getElementById(ʻsquareʼ); context = canvas.getContext(ʻ2dʼ); context.fillStyle = “#000000”; context.fillRect(0, 0, 100, 100); </script> http://www.theopensourcery.com/keepopen/2010/html5-canvas-demo/ http://www.benjoffe.com/code/demos/canvascape/
  • 23. Input Types <input type=”email” /> tel datetime search date email range url color Unsupported browsers default to text type Future browsers will display appropriate UI controls
  • 24. Input Types Input Type Range + Datalist <input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers"> <datalist id="powers"> <option value="0"> <option value="-30"> <option value="30"> <option value="+50"> </datalist>
  • 25. Input Types File Upload Multiple <input type=file multiple>
  • 26. Input Types Datalist <input list="movies" /> <datalist id="movies"> # <option>The Dark Knight</option> # <option>Spiderman 3</option> # <option>X-Men</option> </datalist> Used to provide Auto Complete feature
  • 27. Form Validation <input name="custname" required> <script> form.checkValidity(); </script> By adding ‘required’ attribute you can take advantage of validity checking without custom JavaScript.
  • 28. Form Validation Custom Validation <label>Gender: </label> <input name=”gender” type="text" oninput="check(this)"> <script> function check(input) { if (input.value != "male" && input.value != "female") { input.setCustomValidity('"' + input.value + '" is not a gender.'); } else { // input is good - reset error message input.setCustomValidity(''); } } </script>
  • 29. Local / Session Storage sessionStorage.setItem(key, value); sessionStorage.getItem(key); localStorage.setItem(key, value); localStorage.getItem(key); Save key/value pairs to a client-side data store implemented by browser Session store expires when the browser is closed
  • 30. WebSQL Storage A set of APIs to manipulate client-side databases using SQL // open/create a database var db = openDatabase(db_name, version, db_desc, est_size); // create a table and insert some data db.transaction(function (tx) {   tx.executeSql('CREATE TABLE foo (id unique, text)'); tx.executeSql('INSERT INTO foo (id, text) VALUES (1, "synergies")'); }); // select data and display it tx.executeSql('SELECT * FROM foo', [], function (tx, results) {   var len = results.rows.length, i;   for (i = 0; i < len; i++) {    alert(results.rows.item(i).text);   } });
  • 31. Offline Applications Offline Applications using manifest <html manifest=”cache.manifest”> provide a cache.manifest file: CACHE MANIFEST clock.html uses MIME type: clock.css text/cache-manifest clock.js Run a web application in offline mode, disconnected from Internet Of course your app will still have failures if it tries to pull live data from the Internet
  • 32. Offline Applications Detect Online or Offline window.addEventListener("online", function() { do_something(); }, true); window.addEventListener("offline", function() { do_something(); }, true);
  • 33. Draggable <div draggable=”true”></div> // set data to access at target addEvent(div, “dragstart”, function(e) { e.dataTransfer.setData(ʻfooʼ, ʻbarʼ); }, true); // access data from dragged object addEvent(div, ʻdragendʼ, function(e) { e.dataTransfer.getData(ʻfooʼ); }, true); HTML5 drag and drop should work across frames, and across browser windows. HTML5 drag and drop also allows users to drag and drop data to and from non-web applications, i.e. out of the browser or into the browser
  • 34. Cross-Domain Messaging // sender var o = document.getElementsByTagName('iframe')[0]; o.contentWindow.postMessage('Hello world', 'http://b.example.org/'); // recipient addEvent(window, "message", function(e){   document.getElementById("rcvd_message").innerHTML = e.origin + " said: " + e.data; });
  • 35. Editable Content Turn any element into an editable area <script> document.getElementById(ʻnotepadʼ).contentEditable = true; </script>
  • 36. Web Sockets • Opens a persistent connection to the server • Can be used for server to browser push • Restricted communication to origin server • Eliminates need to poll for data var ws = new WebSocket("ws://friendfeed.com/websocket"); ws.onopen = function() { ws.send("This is a message from the browser to the server"); }; ws.onmessage = function(event) { alert("The server sent a message: " + event.data); };
  • 37. Web Workers - Provide “threads” for JavaScript execution - Donʼt have access to DOM or page. - Have to communicate through postMessage API
  • 38. Web Workers In the Browser // Create a Web Worker var worker = new Worker(“worker.js”); // Post a message to the Web Worker worker.postMessage(0); // Triggered by postMessage in the Web Worker worker.onmessage = function(evt) { // evt.data is the values from the Web Worker alert(evt.data); }; // Catch Web Worker error worker.onerror = function(evt) { alert(evt.data); };
  • 39. Web Workers In the Web Worker // Triggered by postMessage in the page onmessage = function(evt) { // evt.data will be 0 here for (var i=evt.data, k=1000001; i<k; i++) { // Continually sends data back postMessage(i); }; };
  • 40. History API JavaScript API for moving through browser history window.history.back(); window.history.forward(); window.history.go(2); window.history.length; window.history.pushState(data, title, url); window.history.replaceState(data, title, url);
  • 41. HTML5 Compatibilty HTML5Test.com scores browsers according to the following criteria: • Parsing Rules • Microdata • Canvas • Web Applications • Video • Geo Location • Audio • WebGL • Local Devices • Communication • Elements • Files • Forms • Storage • User Interaction • Workers
  • 42. HTML5 Compatibilty Safari 5 Chrome 7 Firefox 3.6 http://www.HTML5test.com/
  • 43. HTML5 Compatibilty IE 8 IE 9 Beta Opera http://www.HTML5test.com/
  • 44. Progressive Enhancement • Use HTML5 when available • Fallback to a different mechanism when not available • Supported by many libraries including jQuery. if HTML5 video is not supported, flash video will load <video controls width="500"> # <source src="video.ogg" /> # <source src="video.mp4" /> # <embed src="http://blip.tv/play/gcMV" type="application/x-shockwave-flash" width="1024" height="798" allowscriptaccess="always" allowfullscreen="true"></embed> </video>
  • 45. DON’T FORGET CSS3 • Rounded corners • Box shadows • Transitions • Rotate • Gradients • Text shadow • Web fonts http://www.webhostingsearch.com/20-of-the-best-examples-of-css
  • 46. Recommended Sites http://html5.timothyfisher.com http://www.HTML5test.com http://html5demos.com http://caniuse.com This Presentation: http://www.slideshare.net/timothyf/html5-new-and-improved

Editor's Notes