SlideShare a Scribd company logo
HTML5 Essentials
        by Marc Grabanski
• Less Header Code
• More Semantic HTML tags
• Media Tags
• Geolocation
• Canvas
• Input Types
• Form Validation
• Draggable
• Local Storage
• Cross-Domain Messaging
• Web Sockets
• Eventually, 3D canvas
Less Header Code

<!DOCTYPE HTML>
<html>
<head>
  <meta charset=”utf-8”>
  <title>foo</title>
</head>
...
No need for type attribute

<script src=”foo.js”>
</script>

<link href=”foo.css”></link>
More Semantic HTML tags
           <div id=”header”>

             <div id=”nav”>

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




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

               <nav>

 <section>               <aside>

  <article>




              <footer>
Fix IE for HTML5 elements

document.createElement(‘header’);
HTML5 Shiv
<!--[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/
svn/trunk/ html5.js"></script>
<![endif]-->

or the more advanced


http://www.modernizr.com
Output
<output name="result"></output>
Progress
<progress id="p" max=100><span>0</span>%</progress>
Progress in Action
<p>Progress: <progress id="p" max=100><span>0</span>%</
progress></p>
 <script>
  var progressBar = document.getElementById('p');
  function updateProgress(newValue) {
    progressBar.value = newValue;
    progressBar.getElementsByTagName('span')[0].textContent =
newValue;
  }
 </script>
Progress is for status of a set of tasks

Meter is for a gauge of measure
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>
Details and Summary
<details>
 <summary>Copying... <progress max="375505392"
value="97543282"></progress> 25%</summary>
 <dl>
  <dt>Transfer rate:</dt> <dd>452KB/s</dd>
  <dt>Local filename:</dt> <dd>/home/rpausch/raycd.m4v</dd>
  <dt>Remote filename:</dt> <dd>/var/www/lectures/raycd.m4v</dd>
  <dt>Duration:</dt> <dd>01:16:27</dd>
  <dt>Color profile:</dt> <dd>SD (6-1-6)</dd>
  <dt>Dimensions:</dt> <dd>320×240</dd>
 </dl>
</details>
Address

<address>
 <a href="../People/Raggett/">Dave Raggett</A>,
 <a href="../People/Arnaud/">Arnaud Le Hors</A>,
 contacts for the w3c HTML activity
</address>


Address applies to the nearest Article or Body tag.
Data Attributes
<div class="spaceship" data-ship-id="92432"
   data-weapons="laser 2" data-shields="50%"
   data-x="30" data-y="10" data-z="90">
 <button class="fire">
</div>

<script>
div = document.getElementsByTagName(‘ div’)[0];
spaceships[div.dataset.shipId].fire()
</script>
Section
<article>
<hgroup>
 <h1>Apples</h1>
 <h2>Tasty, delicious fruit!</h2>
</hgroup>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
 <h1>Red Delicious</h1>
 <p>These bright red apples are the most common found in many
 supermarkets.</p>
</section>
<section>
 <h1>Granny Smith</h1>
 <p>These juicy, green apples make a great filling for
 apple pies.</p>
</section>
</article>
Good
       <body>
        <h4>Apples</h4>
        <p>Apples are fruit.</p>
        <section>
        <h2>Taste</h2>
        <p>They taste lovely.</p>
        <h6>Sweet</h6>
        <p>Red apples are sweeter</p>
        <h1>Color</h1>
        <p>Apples come in various
       colors.</p>
        </section>
       </body>
Better
         <body>
          <h1>Apples</h1>
          <p>Apples are fruit.</p>
          <section>
          <h2>Taste</h2>
          <p>They taste lovely.</p>
          <section>
           <h3>Sweet</h3>
           <p>Red apples are sweeter</p>
          </section>
          </section>
          <section>
          <h2>Color</h2>
          <p>Apples come in various colors.</p>
          </section>
         </body>
Figure and Figure Caption

<figure>
 <img src="bubbles-work.jpeg"
    alt="Bubbles, sitting in his office chair, works on his
       latest project intently.">
<figcaption>Bubbles at work</figcaption>
</figure>
Figure and Figure Caption
<p>In <a href="#l4">listing 4</a> we see the primary
core interface
API declaration.</p>
<figure id="l4">
 <figcaption>Listing 4. The primary core interface API
declaration.</figcaption>
 <pre><code>interface PrimaryCore {
 boolean verifyDataLine();
 void sendData(in sequence&lt;byte> data);
 void initSelfDestruct();
}</code></pre>
</figure>
Time and Publish Date Attribute
<time pubdate datetime="2009-10-09T14:28-08:00"></time>
<article>
 <header>
  <h1>The Very First Rule of Life</h1>
  <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
 </header>
 <p>If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.</p>
 <p>...</p>
 <section>
  <h1>Comments</h1>
  <article>
  <footer>
   <p>Posted by: George Washington</p>
   <p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p>
  </footer>
  <p>Yeah! Especially when talking about your lobbyist friends!</p>
  </article>
  <article>
  <footer>
   <p>Posted by: George Hammond</p>
   <p><time pubdate datetime="2009-10-10T19:15-08:00"></time></p>
  </footer>
  <p>Hey, you have the same first name as me.</p>
  </article>
 </section>
</article>
Breadcrumb Navigation
<nav>
 <p>
 <a href="/" rel="index up up up">Main</a> >
 <a href="/products/" rel="up up">Products</a> >
 <a href="/products/dishwashers/" rel="up">Dishwashers</a> >
 <a>Second hand</a>
 </p>
 <p>
 <a href="/" rel="index up up">Main</a> >
 <a href="/second-hand/" rel="up">Second hand</a> >
 <a>Dishwashers</a>
 </p>
</nav>



Similarly, pagination can be done with
first, last, next and prev
Menu and Command

<menu type="toolbar">
<command type="radio" radiogroup="alignment" checked="checked"
     label="Left" icon="icons/alL.png" onclick="setAlign('left')">
<command type="radio" radiogroup="alignment"
     label="Center" icon="icons/alC.png" onclick="setAlign('center')">
<command type="radio" radiogroup="alignment"
     label="Right" icon="icons/alR.png" onclick="setAlign('right')">
<hr>
<command type="command" disabled
     label="Publish" icon="icons/pub.png" onclick="publish()">
</menu>
Menu (continued)
 <menu type="toolbar">
 <li>
 <menu label="File">
  <button type="button" onclick="fnew()">New...</button>
  <button type="button" onclick="fopen()">Open...</button>
  <button type="button" onclick="fsave()">Save</button>
  <button type="button" onclick="fsaveas()">Save as...</button>
 </menu>
 </li>
 <li>
 <menu label="Edit">
  <button type="button" onclick="ecopy()">Copy</button>
  <button type="button" onclick="ecut()">Cut</button>
  <button type="button" onclick="epaste()">Paste</button>
 </menu>
 </li>
 <li>
 <menu label="Help">
  <li><a href="help.html">Help</a></li>
  <li><a href="about.html">About</a></li>
 </menu>
 </li>
 </menu>
Mark is highlighting something
<p><mark>Momentum is preserved across the wormhole.
Electromagnetic
radiation can travel in both directions through a wormhole,
but matter cannot.</mark></p>


  Strong is different, denotes importance
<p>When a wormhole is created, a vortex normally forms.
<strong>Warning: The vortex caused by the wormhole opening
will
annihilate anything in its path.</strong> Vortexes can be avoide
when
using sufficiently advanced dialing technology.</p>
Not all Navigation should use <nav>

          <nav></nav>

only main navigation, for instance
footer nav is secondary
Article is unique content to the page.

       <article></article>
Hgroup, highest rank group of headings

        <hgroup></hgroup>
Itemscope and Itemprop

  <div itemscope>
  <p>My name is <span itemprop="name">Elizabeth</span>.</p>
  </div>

  <div itemscope>
  <p>My name is <span itemprop="name">Daniel</span>.</p>
  </div>

  <div itemscope>
   <p>My name is <span itemprop="name">Neil</span>.</p>
   <p>My band is called <span itemprop="band">Four Parts Water</
  span>.</p>
   <p>I am <span itemprop="nationality">British</span>.</p>
  </div>
Media Tags

<video src=” cat.ogg” />

add native controls
<video src=”cat.ogg” controls />
Media Tags


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




http://camendesign.com/code/video_for_everybody
Video Format Support

Ogg Theora/Voribs

 - Firefox 3.5+
 - Chrome
 - Opera

MPEG-4 H.264/AAC

 - Safari
 - Chrome
 - Opera
Native Video          Fallback with Flash
- Safari (v4.0.4+)
- Google Chrome (v4.0+)
- Firefox (v3.6+)

 http://jilion.com/sublime/video
Media Tags

<audio src=”test.ogg”></audio>

<audio src=”test.ogg” autoplay controls loop>
 <a href=”test.ogg”>download</a>
</audio>
Native GeoLocation

navigator.geolocation.getCurrentPosition(
   function(position){
     position.coords.latitude,
     position.coords.longitude
   }
);
GeoLocation w/ Google Ajax API fallback
   if (navigator && navigator.geolocation) {
     // HTML5 GeoLocation
     function getLocation(position) {
       proccessDirections.sortLocations(
         position.coords.latitude,
         position.coords.longitude
       );
     }
     navigator.geolocation.getCurrentPosition(getLocation);
   } else {
     // Google AJAX API fallback GeoLocation
     if ((typeof google == 'object') && google.loader &&
google.loader.ClientLocation) {
       proccessDirections.sortLocations(
         google.loader.ClientLocation.latitude,
         google.loader.ClientLocation.longitude
       );
     }
   }
Canvas

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

<script>
canvas = canvas.getElementById(‘square’);
context = canvas.getContext(‘2d’);
context.fillStyle = “#000000”;
context.fillRect(0, 0, 100, 100);
</script>
Canvas Internet Explorer Support

ExplorerCanvas
http://code.google.com/p/explorercanvas/
Input Types

   <input type=”email” />

    tel          datetime
    search       date
    email        range
    url          color

Unsupported browsers default to text.
Input Types
Input type changes keyboard on iphone.
Input Type Range
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 Type Number + Output

<input name=a type=number step=any> +
 <input name=b type=number step=any> =
 <output onforminput="value = a.value + b.value"></output>
File Upload Multiple


   <input type=file multiple>
Input Type Email + Multiple


<label>Cc: <input type=email multiple name=cc></label>
Datalist

<label>Homepage: <input name=hp type=url list=hpurls></label>
<datalist id=hpurls>
 <option value="http://www.google.com/" label="Google">
 <option value="http://www.reddit.com/" label="Reddit">
</datalist>
Form Validation


<input name="custname" required>

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

<label>Feeling: <input name=f type="text" oninput="check(this)"></label>
<script>
 function check(input) {
   if (input.value == "good" ||
       input.value == "fine" ||
       input.value == "tired") {
     input.setCustomValidity('"' + input.value + '" is not a feeling.');
   } else {
     // input is fine -- reset the error message
     input.setCustomValidity('');
   }
 }
</script>
Storage


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

localStorage.setItem(key, value);
localStorage.getItem(key);
Local Storage in Yahoo! Search Pad
Local Storage in Yahoo! Search Pad




    http://www.jstorage.info/
Application Storage / Offline


<html manifest=”cache.manifest”>

detect online or offline

window.addEventListener('online', online, true);
window.addEventListener('offline', online, true);
Draggable

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

addEvent(div, “dragstart”, function(e){
  e.dataTransfer.setData(‘foo’, ‘bar’);
}, true);

addEvent(div, ‘dragend’, function(e){
  e.dataTransfer.getData(‘foo’);
}, true);
Cross Domain Messaging


postMessage(string);

onMessage(event) {
  event.data;
}
Editable Content

Turn an element into an editable area.
<script>
 document.getElementsByTagName('p')[0].contentEditable = true;
</script>
Web Sockets
var ws = new WebSocket("ws://hostname:80/");
ws.onmessage = function (event) {
  event.data
};
ws.onclose = function () {};
ws.onopen = function () {};
Web Worker


new Worker("worker.js");


- Don’t have access to DOM or page.
- Have to communicate through postMessage API
http://html5demos.com/
Web GL

                   3D O3D
http://www.youtube.com/watch?v=uofWfXOzX-g
Questions?

Marc Grabanski:
http://marcgrabanski.com

User interface and web application
development.
Examples: http://mjgin.com/work.html

Twitter: http://twitter.com/1Marc
Email: m@marcgrabanski.com

More Related Content

What's hot

Responsive Web Design Tutorial PDF for Beginners
Responsive Web Design Tutorial PDF for BeginnersResponsive Web Design Tutorial PDF for Beginners
Responsive Web Design Tutorial PDF for Beginners
Bootstrap Creative
 
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
Clément Wehrung
 
Grails and Ajax
Grails and AjaxGrails and Ajax
Grails and Ajax
TO THE NEW | Technology
 
Blockchain : A Key Player in Metaverse.pptx
Blockchain : A Key Player in Metaverse.pptxBlockchain : A Key Player in Metaverse.pptx
Blockchain : A Key Player in Metaverse.pptx
Dr. Mohamed Torky
 
Responsive Design and Bootstrap
Responsive Design  and BootstrapResponsive Design  and Bootstrap
Responsive Design and Bootstrap
MahmoudOHassouna
 
Chapter 07 php forms handling
Chapter 07   php forms handlingChapter 07   php forms handling
Chapter 07 php forms handling
Dhani Ahmad
 
Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...
Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...
Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...
Mario Heiderich
 
Introduction to Spring Framework
Introduction to Spring FrameworkIntroduction to Spring Framework
Introduction to Spring Framework
Serhat Can
 
Ekoparty 2017 - The Bug Hunter's Methodology
Ekoparty 2017 - The Bug Hunter's MethodologyEkoparty 2017 - The Bug Hunter's Methodology
Ekoparty 2017 - The Bug Hunter's Methodology
bugcrowd
 
Spring data jpa
Spring data jpaSpring data jpa
Spring data jpa
Jeevesh Pandey
 
HTML/HTML5
HTML/HTML5HTML/HTML5
HTML/HTML5
People Strategists
 
DDS: The IoT Data Sharing Standard
DDS: The IoT Data Sharing StandardDDS: The IoT Data Sharing Standard
DDS: The IoT Data Sharing Standard
Angelo Corsaro
 
Introduction to XHTML
Introduction to XHTMLIntroduction to XHTML
Introduction to XHTML
Hend Al-Khalifa
 
BEM it! Introduction to BEM
BEM it! Introduction to BEMBEM it! Introduction to BEM
BEM it! Introduction to BEM
Varya Stepanova
 
HTML5 & CSS3
HTML5 & CSS3 HTML5 & CSS3
HTML5 & CSS3
Ian Lintner
 
jQuery
jQueryjQuery
jQuery
Jay Poojara
 
jQuery - Chapter 3 - Effects
jQuery - Chapter 3 - Effects  jQuery - Chapter 3 - Effects
jQuery - Chapter 3 - Effects
WebStackAcademy
 
Blockchain Technology Explained | Blockchain Technology Tutorial | Blockchain...
Blockchain Technology Explained | Blockchain Technology Tutorial | Blockchain...Blockchain Technology Explained | Blockchain Technology Tutorial | Blockchain...
Blockchain Technology Explained | Blockchain Technology Tutorial | Blockchain...
Simplilearn
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
www.netgains.org
 
jQuery
jQueryjQuery

What's hot (20)

Responsive Web Design Tutorial PDF for Beginners
Responsive Web Design Tutorial PDF for BeginnersResponsive Web Design Tutorial PDF for Beginners
Responsive Web Design Tutorial PDF for Beginners
 
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
 
Grails and Ajax
Grails and AjaxGrails and Ajax
Grails and Ajax
 
Blockchain : A Key Player in Metaverse.pptx
Blockchain : A Key Player in Metaverse.pptxBlockchain : A Key Player in Metaverse.pptx
Blockchain : A Key Player in Metaverse.pptx
 
Responsive Design and Bootstrap
Responsive Design  and BootstrapResponsive Design  and Bootstrap
Responsive Design and Bootstrap
 
Chapter 07 php forms handling
Chapter 07   php forms handlingChapter 07   php forms handling
Chapter 07 php forms handling
 
Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...
Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...
Copy & Pest - A case-study on the clipboard, blind trust and invisible cross-...
 
Introduction to Spring Framework
Introduction to Spring FrameworkIntroduction to Spring Framework
Introduction to Spring Framework
 
Ekoparty 2017 - The Bug Hunter's Methodology
Ekoparty 2017 - The Bug Hunter's MethodologyEkoparty 2017 - The Bug Hunter's Methodology
Ekoparty 2017 - The Bug Hunter's Methodology
 
Spring data jpa
Spring data jpaSpring data jpa
Spring data jpa
 
HTML/HTML5
HTML/HTML5HTML/HTML5
HTML/HTML5
 
DDS: The IoT Data Sharing Standard
DDS: The IoT Data Sharing StandardDDS: The IoT Data Sharing Standard
DDS: The IoT Data Sharing Standard
 
Introduction to XHTML
Introduction to XHTMLIntroduction to XHTML
Introduction to XHTML
 
BEM it! Introduction to BEM
BEM it! Introduction to BEMBEM it! Introduction to BEM
BEM it! Introduction to BEM
 
HTML5 & CSS3
HTML5 & CSS3 HTML5 & CSS3
HTML5 & CSS3
 
jQuery
jQueryjQuery
jQuery
 
jQuery - Chapter 3 - Effects
jQuery - Chapter 3 - Effects  jQuery - Chapter 3 - Effects
jQuery - Chapter 3 - Effects
 
Blockchain Technology Explained | Blockchain Technology Tutorial | Blockchain...
Blockchain Technology Explained | Blockchain Technology Tutorial | Blockchain...Blockchain Technology Explained | Blockchain Technology Tutorial | Blockchain...
Blockchain Technology Explained | Blockchain Technology Tutorial | Blockchain...
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
 
jQuery
jQueryjQuery
jQuery
 

Similar to HTML5 Essentials

TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單
偉格 高
 
HTML5 workshop, part 1
HTML5 workshop, part 1HTML5 workshop, part 1
HTML5 workshop, part 1
Robert Nyman
 
HTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - AltranHTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - Altran
Robert Nyman
 
HTML5 - Pedro Rosa
HTML5 - Pedro RosaHTML5 - Pedro Rosa
HTML5 - Pedro Rosa
Comunidade NetPonto
 
Headless Drupal
Headless DrupalHeadless Drupal
Headless Drupal
drubb
 
关于 Html5 那点事
关于 Html5 那点事关于 Html5 那点事
关于 Html5 那点事
Sofish Lin
 
An Introduction To HTML5
An Introduction To HTML5An Introduction To HTML5
An Introduction To HTML5
Robert Nyman
 
Introduccion a HTML5
Introduccion a HTML5Introduccion a HTML5
Introduccion a HTML5
Pablo Garaizar
 
html5
html5html5
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5
Kevin DeRudder
 
The Devil and HTML5
The Devil and HTML5The Devil and HTML5
The Devil and HTML5
Myles Braithwaite
 
HTML5
HTML5HTML5
HTML5
HTML5HTML5
An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5
Steven Chipman
 
Html5 drupal7 with mandakini kumari(1)
Html5 drupal7 with mandakini kumari(1)Html5 drupal7 with mandakini kumari(1)
Html5 drupal7 with mandakini kumari(1)
Mandakini Kumari
 
Introduction to web components
Introduction to web componentsIntroduction to web components
Introduction to web components
Marc Bächinger
 
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
James Pearce
 
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
Pablo Garaizar
 
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoBuilding iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" Domino
Rob Bontekoe
 
Index of jquery template 2 Minuteman Summer Web Dev.
Index of jquery template 2 Minuteman Summer Web Dev.Index of jquery template 2 Minuteman Summer Web Dev.
Index of jquery template 2 Minuteman Summer Web Dev.
Daniel Downs
 

Similar to HTML5 Essentials (20)

TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單
 
HTML5 workshop, part 1
HTML5 workshop, part 1HTML5 workshop, part 1
HTML5 workshop, part 1
 
HTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - AltranHTML5, The Open Web, and what it means for you - Altran
HTML5, The Open Web, and what it means for you - Altran
 
HTML5 - Pedro Rosa
HTML5 - Pedro RosaHTML5 - Pedro Rosa
HTML5 - Pedro Rosa
 
Headless Drupal
Headless DrupalHeadless Drupal
Headless Drupal
 
关于 Html5 那点事
关于 Html5 那点事关于 Html5 那点事
关于 Html5 那点事
 
An Introduction To HTML5
An Introduction To HTML5An Introduction To HTML5
An Introduction To HTML5
 
Introduccion a HTML5
Introduccion a HTML5Introduccion a HTML5
Introduccion a HTML5
 
html5
html5html5
html5
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5
 
The Devil and HTML5
The Devil and HTML5The Devil and HTML5
The Devil and HTML5
 
HTML5
HTML5HTML5
HTML5
 
HTML5
HTML5HTML5
HTML5
 
An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5
 
Html5 drupal7 with mandakini kumari(1)
Html5 drupal7 with mandakini kumari(1)Html5 drupal7 with mandakini kumari(1)
Html5 drupal7 with mandakini kumari(1)
 
Introduction to web components
Introduction to web componentsIntroduction to web components
Introduction to web components
 
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
 
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
 
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoBuilding iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" Domino
 
Index of jquery template 2 Minuteman Summer Web Dev.
Index of jquery template 2 Minuteman Summer Web Dev.Index of jquery template 2 Minuteman Summer Web Dev.
Index of jquery template 2 Minuteman Summer Web Dev.
 

More from Marc Grabanski

CSS/SVG Matrix Transforms
CSS/SVG Matrix TransformsCSS/SVG Matrix Transforms
CSS/SVG Matrix Transforms
Marc Grabanski
 
Free vs Paid Content
Free vs Paid ContentFree vs Paid Content
Free vs Paid Content
Marc Grabanski
 
Introduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for AllIntroduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for All
Marc Grabanski
 
Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)
Marc Grabanski
 
jQTouch and Titanium
jQTouch and TitaniumjQTouch and Titanium
jQTouch and Titanium
Marc Grabanski
 
jQuery UI and Plugins
jQuery UI and PluginsjQuery UI and Plugins
jQuery UI and Plugins
Marc Grabanski
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery Plugins
Marc Grabanski
 
jQuery Essentials
jQuery EssentialsjQuery Essentials
jQuery Essentials
Marc Grabanski
 

More from Marc Grabanski (8)

CSS/SVG Matrix Transforms
CSS/SVG Matrix TransformsCSS/SVG Matrix Transforms
CSS/SVG Matrix Transforms
 
Free vs Paid Content
Free vs Paid ContentFree vs Paid Content
Free vs Paid Content
 
Introduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for AllIntroduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for All
 
Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)Whirlwind Tour of SVG (plus RaphaelJS)
Whirlwind Tour of SVG (plus RaphaelJS)
 
jQTouch and Titanium
jQTouch and TitaniumjQTouch and Titanium
jQTouch and Titanium
 
jQuery UI and Plugins
jQuery UI and PluginsjQuery UI and Plugins
jQuery UI and Plugins
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery Plugins
 
jQuery Essentials
jQuery EssentialsjQuery Essentials
jQuery Essentials
 

Recently uploaded

MAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptxMAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
janagijoythi
 
Redefining Cybersecurity with AI Capabilities
Redefining Cybersecurity with AI CapabilitiesRedefining Cybersecurity with AI Capabilities
Redefining Cybersecurity with AI Capabilities
Priyanka Aash
 
Communications Mining Series - Zero to Hero - Session 3
Communications Mining Series - Zero to Hero - Session 3Communications Mining Series - Zero to Hero - Session 3
Communications Mining Series - Zero to Hero - Session 3
DianaGray10
 
What's New in Teams Calling, Meetings, Devices June 2024
What's New in Teams Calling, Meetings, Devices June 2024What's New in Teams Calling, Meetings, Devices June 2024
What's New in Teams Calling, Meetings, Devices June 2024
Stephanie Beckett
 
The Path to General-Purpose Robots - Coatue
The Path to General-Purpose Robots - CoatueThe Path to General-Purpose Robots - Coatue
The Path to General-Purpose Robots - Coatue
Razin Mustafiz
 
It's your unstructured data: How to get your GenAI app to production (and spe...
It's your unstructured data: How to get your GenAI app to production (and spe...It's your unstructured data: How to get your GenAI app to production (and spe...
It's your unstructured data: How to get your GenAI app to production (and spe...
Zilliz
 
Generative AI Reasoning Tech Talk - July 2024
Generative AI Reasoning Tech Talk - July 2024Generative AI Reasoning Tech Talk - July 2024
Generative AI Reasoning Tech Talk - July 2024
siddu769252
 
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
FIDO Alliance
 
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
 
NVIDIA at Breakthrough Discuss for Space Exploration
NVIDIA at Breakthrough Discuss for Space ExplorationNVIDIA at Breakthrough Discuss for Space Exploration
NVIDIA at Breakthrough Discuss for Space Exploration
Alison B. Lowndes
 
Sonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdfSonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdf
SubhamMandal40
 
Keynote : AI & Future Of Offensive Security
Keynote : AI & Future Of Offensive SecurityKeynote : AI & Future Of Offensive Security
Keynote : AI & Future Of Offensive Security
Priyanka Aash
 
Perth MuleSoft Meetup July 2024
Perth MuleSoft Meetup July 2024Perth MuleSoft Meetup July 2024
Perth MuleSoft Meetup July 2024
Michael Price
 
Acumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptxAcumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptx
BrainSell Technologies
 
How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...
DianaGray10
 
Zaitechno Handheld Raman Spectrometer.pdf
Zaitechno Handheld Raman Spectrometer.pdfZaitechno Handheld Raman Spectrometer.pdf
Zaitechno Handheld Raman Spectrometer.pdf
AmandaCheung15
 
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
 
Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10
ankush9927
 
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision MakingConnector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
DianaGray10
 
kk vathada _digital transformation frameworks_2024.pdf
kk vathada _digital transformation frameworks_2024.pdfkk vathada _digital transformation frameworks_2024.pdf
kk vathada _digital transformation frameworks_2024.pdf
KIRAN KV
 

Recently uploaded (20)

MAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptxMAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
 
Redefining Cybersecurity with AI Capabilities
Redefining Cybersecurity with AI CapabilitiesRedefining Cybersecurity with AI Capabilities
Redefining Cybersecurity with AI Capabilities
 
Communications Mining Series - Zero to Hero - Session 3
Communications Mining Series - Zero to Hero - Session 3Communications Mining Series - Zero to Hero - Session 3
Communications Mining Series - Zero to Hero - Session 3
 
What's New in Teams Calling, Meetings, Devices June 2024
What's New in Teams Calling, Meetings, Devices June 2024What's New in Teams Calling, Meetings, Devices June 2024
What's New in Teams Calling, Meetings, Devices June 2024
 
The Path to General-Purpose Robots - Coatue
The Path to General-Purpose Robots - CoatueThe Path to General-Purpose Robots - Coatue
The Path to General-Purpose Robots - Coatue
 
It's your unstructured data: How to get your GenAI app to production (and spe...
It's your unstructured data: How to get your GenAI app to production (and spe...It's your unstructured data: How to get your GenAI app to production (and spe...
It's your unstructured data: How to get your GenAI app to production (and spe...
 
Generative AI Reasoning Tech Talk - July 2024
Generative AI Reasoning Tech Talk - July 2024Generative AI Reasoning Tech Talk - July 2024
Generative AI Reasoning Tech Talk - July 2024
 
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
UX Webinar Series: Drive Revenue and Decrease Costs with Passkeys for Consume...
 
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
 
NVIDIA at Breakthrough Discuss for Space Exploration
NVIDIA at Breakthrough Discuss for Space ExplorationNVIDIA at Breakthrough Discuss for Space Exploration
NVIDIA at Breakthrough Discuss for Space Exploration
 
Sonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdfSonkoloniya documentation - ONEprojukti.pdf
Sonkoloniya documentation - ONEprojukti.pdf
 
Keynote : AI & Future Of Offensive Security
Keynote : AI & Future Of Offensive SecurityKeynote : AI & Future Of Offensive Security
Keynote : AI & Future Of Offensive Security
 
Perth MuleSoft Meetup July 2024
Perth MuleSoft Meetup July 2024Perth MuleSoft Meetup July 2024
Perth MuleSoft Meetup July 2024
 
Acumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptxAcumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptx
 
How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...
 
Zaitechno Handheld Raman Spectrometer.pdf
Zaitechno Handheld Raman Spectrometer.pdfZaitechno Handheld Raman Spectrometer.pdf
Zaitechno Handheld Raman Spectrometer.pdf
 
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
 
Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10
 
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision MakingConnector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
 
kk vathada _digital transformation frameworks_2024.pdf
kk vathada _digital transformation frameworks_2024.pdfkk vathada _digital transformation frameworks_2024.pdf
kk vathada _digital transformation frameworks_2024.pdf
 

HTML5 Essentials

  • 1. HTML5 Essentials by Marc Grabanski
  • 2. • Less Header Code • More Semantic HTML tags • Media Tags • Geolocation • Canvas • Input Types • Form Validation • Draggable • Local Storage • Cross-Domain Messaging • Web Sockets • Eventually, 3D canvas
  • 3. Less Header Code <!DOCTYPE HTML> <html> <head> <meta charset=”utf-8”> <title>foo</title> </head> ...
  • 4. No need for type attribute <script src=”foo.js”> </script> <link href=”foo.css”></link>
  • 5. More Semantic HTML tags <div id=”header”> <div id=”nav”> <div id=”article”> <div id=”sidebar”> <div id=”footer”>
  • 6. More Semantic HTML tags <header> <nav> <section> <aside> <article> <footer>
  • 7. Fix IE for HTML5 elements document.createElement(‘header’);
  • 8. HTML5 Shiv <!--[if lte IE 8]> <script src="http://html5shiv.googlecode.com/ svn/trunk/ html5.js"></script> <![endif]--> or the more advanced http://www.modernizr.com
  • 11. Progress in Action <p>Progress: <progress id="p" max=100><span>0</span>%</ progress></p> <script> var progressBar = document.getElementById('p'); function updateProgress(newValue) { progressBar.value = newValue; progressBar.getElementsByTagName('span')[0].textContent = newValue; } </script>
  • 12. Progress is for status of a set of tasks Meter is for a gauge of measure
  • 13. 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>
  • 14. Details and Summary <details> <summary>Copying... <progress max="375505392" value="97543282"></progress> 25%</summary> <dl> <dt>Transfer rate:</dt> <dd>452KB/s</dd> <dt>Local filename:</dt> <dd>/home/rpausch/raycd.m4v</dd> <dt>Remote filename:</dt> <dd>/var/www/lectures/raycd.m4v</dd> <dt>Duration:</dt> <dd>01:16:27</dd> <dt>Color profile:</dt> <dd>SD (6-1-6)</dd> <dt>Dimensions:</dt> <dd>320×240</dd> </dl> </details>
  • 15. Address <address> <a href="../People/Raggett/">Dave Raggett</A>, <a href="../People/Arnaud/">Arnaud Le Hors</A>, contacts for the w3c HTML activity </address> Address applies to the nearest Article or Body tag.
  • 16. Data Attributes <div class="spaceship" data-ship-id="92432" data-weapons="laser 2" data-shields="50%" data-x="30" data-y="10" data-z="90"> <button class="fire"> </div> <script> div = document.getElementsByTagName(‘ div’)[0]; spaceships[div.dataset.shipId].fire() </script>
  • 17. Section <article> <hgroup> <h1>Apples</h1> <h2>Tasty, delicious fruit!</h2> </hgroup> <p>The apple is the pomaceous fruit of the apple tree.</p> <section> <h1>Red Delicious</h1> <p>These bright red apples are the most common found in many supermarkets.</p> </section> <section> <h1>Granny Smith</h1> <p>These juicy, green apples make a great filling for apple pies.</p> </section> </article>
  • 18. Good <body> <h4>Apples</h4> <p>Apples are fruit.</p> <section> <h2>Taste</h2> <p>They taste lovely.</p> <h6>Sweet</h6> <p>Red apples are sweeter</p> <h1>Color</h1> <p>Apples come in various colors.</p> </section> </body>
  • 19. Better <body> <h1>Apples</h1> <p>Apples are fruit.</p> <section> <h2>Taste</h2> <p>They taste lovely.</p> <section> <h3>Sweet</h3> <p>Red apples are sweeter</p> </section> </section> <section> <h2>Color</h2> <p>Apples come in various colors.</p> </section> </body>
  • 20. Figure and Figure Caption <figure> <img src="bubbles-work.jpeg" alt="Bubbles, sitting in his office chair, works on his latest project intently."> <figcaption>Bubbles at work</figcaption> </figure>
  • 21. Figure and Figure Caption <p>In <a href="#l4">listing 4</a> we see the primary core interface API declaration.</p> <figure id="l4"> <figcaption>Listing 4. The primary core interface API declaration.</figcaption> <pre><code>interface PrimaryCore { boolean verifyDataLine(); void sendData(in sequence&lt;byte> data); void initSelfDestruct(); }</code></pre> </figure>
  • 22. Time and Publish Date Attribute <time pubdate datetime="2009-10-09T14:28-08:00"></time>
  • 23. <article> <header> <h1>The Very First Rule of Life</h1> <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p> </header> <p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p> <p>...</p> <section> <h1>Comments</h1> <article> <footer> <p>Posted by: George Washington</p> <p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p> </footer> <p>Yeah! Especially when talking about your lobbyist friends!</p> </article> <article> <footer> <p>Posted by: George Hammond</p> <p><time pubdate datetime="2009-10-10T19:15-08:00"></time></p> </footer> <p>Hey, you have the same first name as me.</p> </article> </section> </article>
  • 24. Breadcrumb Navigation <nav> <p> <a href="/" rel="index up up up">Main</a> > <a href="/products/" rel="up up">Products</a> > <a href="/products/dishwashers/" rel="up">Dishwashers</a> > <a>Second hand</a> </p> <p> <a href="/" rel="index up up">Main</a> > <a href="/second-hand/" rel="up">Second hand</a> > <a>Dishwashers</a> </p> </nav> Similarly, pagination can be done with first, last, next and prev
  • 25. Menu and Command <menu type="toolbar"> <command type="radio" radiogroup="alignment" checked="checked" label="Left" icon="icons/alL.png" onclick="setAlign('left')"> <command type="radio" radiogroup="alignment" label="Center" icon="icons/alC.png" onclick="setAlign('center')"> <command type="radio" radiogroup="alignment" label="Right" icon="icons/alR.png" onclick="setAlign('right')"> <hr> <command type="command" disabled label="Publish" icon="icons/pub.png" onclick="publish()"> </menu>
  • 26. Menu (continued) <menu type="toolbar"> <li> <menu label="File"> <button type="button" onclick="fnew()">New...</button> <button type="button" onclick="fopen()">Open...</button> <button type="button" onclick="fsave()">Save</button> <button type="button" onclick="fsaveas()">Save as...</button> </menu> </li> <li> <menu label="Edit"> <button type="button" onclick="ecopy()">Copy</button> <button type="button" onclick="ecut()">Cut</button> <button type="button" onclick="epaste()">Paste</button> </menu> </li> <li> <menu label="Help"> <li><a href="help.html">Help</a></li> <li><a href="about.html">About</a></li> </menu> </li> </menu>
  • 27. Mark is highlighting something <p><mark>Momentum is preserved across the wormhole. Electromagnetic radiation can travel in both directions through a wormhole, but matter cannot.</mark></p> Strong is different, denotes importance <p>When a wormhole is created, a vortex normally forms. <strong>Warning: The vortex caused by the wormhole opening will annihilate anything in its path.</strong> Vortexes can be avoide when using sufficiently advanced dialing technology.</p>
  • 28. Not all Navigation should use <nav> <nav></nav> only main navigation, for instance footer nav is secondary
  • 29. Article is unique content to the page. <article></article>
  • 30. Hgroup, highest rank group of headings <hgroup></hgroup>
  • 31. Itemscope and Itemprop <div itemscope> <p>My name is <span itemprop="name">Elizabeth</span>.</p> </div> <div itemscope> <p>My name is <span itemprop="name">Daniel</span>.</p> </div> <div itemscope> <p>My name is <span itemprop="name">Neil</span>.</p> <p>My band is called <span itemprop="band">Four Parts Water</ span>.</p> <p>I am <span itemprop="nationality">British</span>.</p> </div>
  • 32. Media Tags <video src=” cat.ogg” /> add native controls <video src=”cat.ogg” controls />
  • 33. Media Tags <video controls/> <source src=”cat.mp4” /> <source src=”cat.ogg” /> </video> http://camendesign.com/code/video_for_everybody
  • 34. Video Format Support Ogg Theora/Voribs - Firefox 3.5+ - Chrome - Opera MPEG-4 H.264/AAC - Safari - Chrome - Opera
  • 35. Native Video Fallback with Flash - Safari (v4.0.4+) - Google Chrome (v4.0+) - Firefox (v3.6+) http://jilion.com/sublime/video
  • 36. Media Tags <audio src=”test.ogg”></audio> <audio src=”test.ogg” autoplay controls loop> <a href=”test.ogg”>download</a> </audio>
  • 37. Native GeoLocation navigator.geolocation.getCurrentPosition( function(position){ position.coords.latitude, position.coords.longitude } );
  • 38. GeoLocation w/ Google Ajax API fallback if (navigator && navigator.geolocation) { // HTML5 GeoLocation function getLocation(position) { proccessDirections.sortLocations( position.coords.latitude, position.coords.longitude ); } navigator.geolocation.getCurrentPosition(getLocation); } else { // Google AJAX API fallback GeoLocation if ((typeof google == 'object') && google.loader && google.loader.ClientLocation) { proccessDirections.sortLocations( google.loader.ClientLocation.latitude, google.loader.ClientLocation.longitude ); } }
  • 39. Canvas <canvas id=”square”> fallback content </canvas> <script> canvas = canvas.getElementById(‘square’); context = canvas.getContext(‘2d’); context.fillStyle = “#000000”; context.fillRect(0, 0, 100, 100); </script>
  • 40. Canvas Internet Explorer Support ExplorerCanvas http://code.google.com/p/explorercanvas/
  • 41. Input Types <input type=”email” /> tel datetime search date email range url color Unsupported browsers default to text.
  • 42. Input Types Input type changes keyboard on iphone.
  • 44. 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>
  • 45. Input Type Number + Output <input name=a type=number step=any> + <input name=b type=number step=any> = <output onforminput="value = a.value + b.value"></output>
  • 46. File Upload Multiple <input type=file multiple>
  • 47. Input Type Email + Multiple <label>Cc: <input type=email multiple name=cc></label>
  • 48. Datalist <label>Homepage: <input name=hp type=url list=hpurls></label> <datalist id=hpurls> <option value="http://www.google.com/" label="Google"> <option value="http://www.reddit.com/" label="Reddit"> </datalist>
  • 49. Form Validation <input name="custname" required> <script> form.checkValidity(); </script>
  • 50. Custom Validation <label>Feeling: <input name=f type="text" oninput="check(this)"></label> <script> function check(input) { if (input.value == "good" || input.value == "fine" || input.value == "tired") { input.setCustomValidity('"' + input.value + '" is not a feeling.'); } else { // input is fine -- reset the error message input.setCustomValidity(''); } } </script>
  • 52. Local Storage in Yahoo! Search Pad
  • 53. Local Storage in Yahoo! Search Pad http://www.jstorage.info/
  • 54. Application Storage / Offline <html manifest=”cache.manifest”> detect online or offline window.addEventListener('online', online, true); window.addEventListener('offline', online, true);
  • 55. Draggable <div draggable=”true”></div> addEvent(div, “dragstart”, function(e){ e.dataTransfer.setData(‘foo’, ‘bar’); }, true); addEvent(div, ‘dragend’, function(e){ e.dataTransfer.getData(‘foo’); }, true);
  • 57. Editable Content Turn an element into an editable area. <script> document.getElementsByTagName('p')[0].contentEditable = true; </script>
  • 58. Web Sockets var ws = new WebSocket("ws://hostname:80/"); ws.onmessage = function (event) { event.data }; ws.onclose = function () {}; ws.onopen = function () {};
  • 59. Web Worker new Worker("worker.js"); - Don’t have access to DOM or page. - Have to communicate through postMessage API
  • 61. Web GL 3D O3D http://www.youtube.com/watch?v=uofWfXOzX-g
  • 62. Questions? Marc Grabanski: http://marcgrabanski.com User interface and web application development. Examples: http://mjgin.com/work.html Twitter: http://twitter.com/1Marc Email: m@marcgrabanski.com