Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

html5

on

  • 2,377 views

html5 - A new standard that will change the web

html5 - A new standard that will change the web

Statistics

Views

Total Views
2,377
Views on SlideShare
2,369
Embed Views
8

Actions

Likes
2
Downloads
61
Comments
1

5 Embeds 8

http://www.linkedin.com 3
http://localhost 2
http://portsmouthtakingthelead.blogspot.com 1
http://preacherspen.org 1
http://jujo00obo2o234ungd3t8qjfcjrs3o6k-a-sites-opensocial.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • I love these slides! Did you know we’re running a competition on SlideShare to win a 3M PocketProjector MP180? To enter, simply tag your presentation with ‘3MInform’. Head over to our page for more details... and don’t forget to follow us to find out if you get shortlisted!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

html5 html5 Presentation Transcript

  • HTML 5A NEW STANDARD THAT WILL CHANGE THE WEB
  • Hi! I’m Lester
  • I work at web agency Netlash.
  • HTML5A NEW STANDARD THAT WILL CHANGE THE WEBTechmondays 29/11/2010
  • HTML5 is the next major revision of the HTMLstandard, currently under development. Like itsimmediate predecessors, HTML 4.01 and XHTML 1.1,HTML5 is a standard for structuring and presentingcontent on the World Wide Web.http://en.wikipedia.org
  • CSSHTML5 HTML JS
  • HTML‣ Semantics‣ Web Forms‣ Multimedia‣ 2D & 3D drawing
  • HTML‣ Semantics‣ Web Forms‣ Multimedia‣ 2D & 3D drawing
  • DoctypeHTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • DoctypeHTML5 <!DOCTYPE HTML>‣ No end tag‣ Not case sensitive
  • New tags <header></header> <nav></nav> <section></section> <article></article> <aside></aside> <footer></footer> ...
  • HTML‣ Semantics‣ Web Forms‣ Multimedia‣ 2D & 3D drawing
  • New input elements ‣ <input type=”email” /> ‣ <input type=”date” /> ‣ <input type=”range” /> ‣ <input type=”search” /> ‣ <input type=”tel” /> ‣ <input type=”color” /> ‣ <input type=”number” />
  • Other elements ‣ <meter /> ‣ <progress /> ‣ <output />
  • New attributes ‣ placeholder=”Search...” ‣ pattern=”(?:[A-Z0-9-]+.)+” ‣ min=”1” max=”10” ‣ results=”10” ‣ required
  • DEMOWEB FORMS
  • HTML‣ Semantics‣ Web Forms‣ Multimedia‣ 2D & 3D drawing
  • Multimedia Audio tag <audio id="audio" src="audio.ogg" controls /> Video tag <video id="video" src="video.mp4" controls />
  • DEMOMULTIMEDIA
  • HTML‣ Semantics‣ Web Forms‣ Multimedia‣ 2D & 3D drawing
  • 2D & 3D drawing‣ Canvas‣ WebGL‣ SVG
  • DEMO2D & 3D drawing
  • JS‣ Client side storage‣ Communication‣ Desktop experience‣ Geolocation
  • JS‣ Client side storage‣ Communication‣ Desktop experience‣ Geolocation
  • Web storage‣ localStorage Store data with no time limit‣ sessionStorage Store data for one session
  • DEMOWEB STORAGE
  • Other storage techniques‣ Web SQL databases‣ Application cache
  • JS‣ Client side storage‣ Communication‣ Desktop experience‣ Geolocation
  • Communication‣ Web workers‣ Websockets‣ Noti cations
  • JS‣ Client side storage‣ Communication‣ Desktop experience‣ Geolocation
  • Desktop experience‣ Native drag & drop‣ Drag in & out
  • JS‣ Client side storage‣ Communication‣ Desktop experience‣ Geolocation
  • DEMOGEOLOCATION
  • BROWSER COMPATIBILITYhttp://www. ndmebyip.com/litmus/
  • Usefull links‣ HTML5 browser test - http://html5test.com/‣ HTML5 template - http://html5boilerplate.com/‣ HTML5 cheat sheet - http://goo.gl/Bof9/‣ HTML5 resources - http://www.html5rocks.com/
  • POLLWhen will HTML5 be fully recognized as a standard?
  • POLLGoodbye Adobe Flash?
  • Questions?
  • twitter.com/ElLessolester@netlash.comhttp://lester.be