Your SlideShare is downloading. ×
0
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Demystifying HTML5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Demystifying HTML5

3,702

Published on

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,702
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
110
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. DEMYSTIFYING HTML5 SERGEJUS BARINOVAS ARCHITECT, ADFORM
  • 2. AGENDA • The history of HTML5 • What’s new in HTML5 • HTML5 vs. Silverlight & Flash • Next steps
  • 3. MY HTML5 BACKGROUND • Interest in HTML5 for ~1 year • HTML5 workshop in Las Vegas • Advertising is dependent on Flash (doesn’t work with iOS devices)
  • 4. DISCLAIMER This is not about
  • 5. THE HISTORY OF HTML5
  • 6. HTML QUIZ What language HTML is based on?
  • 7. HTML QUIZ ANSWER SGML
  • 8. HTML5 QUIZ What is HTML5?
  • 9. HTML5 QUIZ ANSWER • HTML (HTML5, SVG1.1) • CSS (CSS3) • JavaScript API
  • 10. A BIT OF HISTORY
  • 11. HTML XHTML • 1998 XML 1.0 • 1999 HTML 4.01 • 2000 XHTML 1.0 • Reformulate HTML in XML without adding any new elements or attributes • First draft of XForms 1.0
  • 12. XHTML – THE TRUTH Who is developing XHTML web sites?
  • 13. XHTML – THE TRUTH You are (probably) lying!
  • 14. XHTML – THE TRUTH Everything you know about XHTML is wrong
  • 15. XHTML – THE TRUTH • HTML 4.01 • HTML 4.01 DOCTYPE • MIME type – text/html • Browsers forgive malformed HTML • XHTML 1.0 • XHTML 1.0 DOCTYPE • MIME type – application/xhtml+xml • Browsers fail on the first error (draconian error handling)
  • 16. XHTML – THE TRUTH XHTML – forget about existing (99%) web sites!
  • 17. XHTML – THE TRUTH Thousands of web developers upgraded to XHTML syntax and DOCTYPE but kept serving it with a text/html MIME type
  • 18. XHTML – THE TRUTH This is not an XHTML!
  • 19. A-HA MOMENT We need to move on supporting interop!
  • 20. THE FUTURE OF HTML June 2004, W3C Workshop An evolution of the existing HTML 4 standard to include new features for modern web application developer
  • 21. THE FUTURE OF HTML 7 PRINCIPLES • Backwards compatibility, clear migration path • Well-defined error handling • Users should not be exposed to authoring errors • Practical use • Scripting is here to stay • Device-specific profiling should be avoided • Open process
  • 22. THE FUTURE OF HTML THE POLL Should the W3C develop declarative extension to HTML and CSS and imperative extensions to DOM?
  • 23. THE FUTURE OF HTML THE SPLIT • W3C • XHTML 2.0 • WHAT Working Group • Documenting the forgiving error-handling algorithms that browsers actually used • XForms 2.0 • <canvas> • <audio> and <video>
  • 24. THE FUTURE OF HTML THE REUNION October 2006, Tim Berners-Lee announced that the W3C would work together with the WHAT Working Group to evolve HTML
  • 25. THE FUTURE OF HTML FIRST DRAFT January 2008, HTML5 Draft The first time ever all 5 major browser vendors collaborate together
  • 26. THE FUTURE OF HTML CURRENT SITUATION
  • 27. WHAT’S NEW IN HTML5 JAVASCRIPT API
  • 28. WHAT’S NEW – JAVASCRIPT API • New Selectors • Web Workers* • Web Sockets* • Web Storage • Offline Apps* • Geolocation
  • 29. WHAT’S NEW – JS API NEW SELECTORS • DOM API var els = document.getElementsByClassName('section'); els[0].focus(); • Selector API var els = document.querySelectorAll('ul li:nth-child(odd)');
  • 30. WHAT’S NEW – JS API WEB WORKERS • Independent JavaScript threading main.js: var worker = new Worker('increment.js'); worker.postMessage(2); worker.onmessage = function(event) { alert(event.data); }; increment.js: self.onmessage = function(event) { var result = event.data + 1; self.postMessage(result); }
  • 31. WHAT’S NEW – JS API WEB SOCKETS • Bi-directional full-duplex communication var socket = new WebSocket(location); socket.onopen = function(event) { socket.postMessage('Hello, WebSocket'); } socket.onmessage = function(event) { alert(event.data); } socket.onclose = function(event) { alert('closed'); }
  • 32. WHAT’S NEW – JS API WEB STORAGE • Local Storage var item = document.localStorage.setItem('key','value'); • Session Storage var item = document.sessionStorage.getItem('value'); • IndexedDB var db = indexedDB.open('books', 'Books'); db.createIndex('BookTitle', 'books', 'title'); var index = db.index('BookTitle'); var result = index.get('HTML5');
  • 33. WHAT’S NEW – JS API OFFLINE APPS • Application Cache <html manifest="offline.manifest"> CACHE MANIFEST styles.css jquery-1.4.min.js index.html • Offline / Online Events window.addEventListener("online",function() {alert('on')}); window.addEventListener("offline",function() {alert('off')});
  • 34. WHAT’S NEW – JS API GEOLOCATION • Geolocation API if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(pos) { var lat = position.coords.latitude; var lng = position.coords.longitude; alert(lat + ':' + lng); }); }
  • 35. WHAT’S NEW IN HTML5 CSS3
  • 36. WHAT’S NEW – CSS3 • Selectors • Border Radius • Backgrounds • Color & Opacity • Shadows • 2D Transforms • WOFF Fonts
  • 37. WHAT’S NEW – CSS3 SELECTORS • Selectors .row:nth-child(even) { background: #dde; } • Specific attributes input[type="text"] {background: #eee; } • Negation :not(span) { display: block; } • Selection ::selection { background: #c00; }
  • 38. WHAT’S NEW – CSS3 BORDER RADIUS border-radius: 20px 10px; border-top-left-radius: 20px 10px; border-top-right-radius: 10px 25px; border-bottom-right-radius: 5px 10px; border-bottom-left-radius: 15px 25px;
  • 39. WHAT’S NEW – CSS3 BACKGROUNDS • Multiple backgrounds div { background-image: url(bg1.png), url(bg2.png); background-position: center center, 20% 80%, top left; } • SVG in CSS backgrounds body { background-image: url("marble.svg") }
  • 40. WHAT’S NEW – CSS3 COLOR & OPACITY • RGB / RGBA div.demo1 { background: rgba(60, 80, 100, 0.25); } • HSL / HSLA div.demo2 { background: hsla(320, 100%, 25%, 0.4); } • Opacity div.demo3 { background:#036; opacity:0.2; }
  • 41. WHAT’S NEW – CSS3 SHADOWS • Box Shadow div { box-shadow: 5px 5px 7px #888; } • Text Shadow span { text-shadow: 2px 2px 7px #111; }
  • 42. WHAT’S NEW – CSS3 2D TRANSFORMS div { transform: scale(0.75) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg); transform-origin: 0% 0%; }
  • 43. WHAT’S NEW – CSS3 WOFF FONTS • Font Linking @font-face { font-family: Whimsy; src: url('fonts/Whimsy.woff'); }
  • 44. WHAT’S NEW IN HTML5 HTML5
  • 45. WHAT’S NEW – HTML5 SIMPLER MARKUP HTML5 is simpler
  • 46. WHAT’S NEW – HTML5 SIMPLER MARKUP <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Sergejus apie .NET</title> <link rel="stylesheet" href="http://sergejus.blogas.lt/wp- content/themes/webby-green-10/style.css" type="text/css" /> <link rel="alternate" type="application/rss+xml" title="Sergejus apie .NET RSS Feed" href="http://sergejus.blogas.lt/feed" />
  • 47. WHAT’S NEW – HTML5 SIMPLER MARKUP <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Sergejus apie .NET</title> <link rel="stylesheet" href="http://sergejus.blogas.lt/wp- content/themes/webby-green-10/style.css" type="text/css" /> <link rel="alternate" type="application/rss+xml" title="Sergejus apie .NET RSS Feed" href="http://sergejus.blogas.lt/feed" />
  • 48. WHAT’S NEW – HTML5 SIMPLER MARKUP <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Sergejus apie .NET</title> <link rel="stylesheet" href="http://sergejus.blogas.lt/wp- content/themes/webby-green-10/style.css" type="text/css" /> <link rel="alternate" type="application/rss+xml" title="Sergejus apie .NET RSS Feed" href="http://sergejus.blogas.lt/feed" />
  • 49. WHAT’S NEW – HTML5 SIMPLER MARKUP <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Sergejus apie .NET</title> <link rel="stylesheet" href="http://sergejus.blogas.lt/wp- content/themes/webby-green-10/style.css" type="text/css" /> <link rel="alternate" type="application/rss+xml" title="Sergejus apie .NET RSS Feed" href="http://sergejus.blogas.lt/feed" />
  • 50. WHAT’S NEW – HTML5 SIMPLER MARKUP <!doctype html> <html> <head> <meta charset="utf-8" /> <title>Sergejus apie .NET</title> <link rel="stylesheet" href="http://sergejus.blogas.lt/wp- content/themes/webby-green-10/style.css" type="text/css" /> <link rel="alternate" type="application/rss+xml" title="Sergejus apie .NET RSS Feed" href="http://sergejus.blogas.lt/feed" />
  • 51. WHAT’S NEW – HTML5 SIMPLER MARKUP <!doctype html> <html> <head> <meta charset="utf-8" /> <title>Sergejus apie .NET</title> <link rel="stylesheet" href="http://sergejus.blogas.lt/wp- content/themes/webby-green-10/style.css" /> <link rel="alternate" type="application/rss+xml" title="Sergejus apie .NET RSS Feed" href="http://sergejus.blogas.lt/feed" />
  • 52. WHAT’S NEW – HTML5 ELEMENTS HTML5 is more semantic
  • 53. WHAT’S NEW – HTML5 ELEMENTS • <section> • <nav> • <article> • <header> • <footer> • <aside> • <figure> • and more…
  • 54. WHAT’S NEW – HTML5 ELEMENTS
  • 55. WHAT’S NEW – HTML5 ELEMENTS
  • 56. WHAT’S NEW – HTML5 WEB FORMS 2.0 HTML5 is for Web Apps
  • 57. WHAT’S NEW – HTML5 WEB FORMS 2.0 • <input type="text" required autofocus /> • <input type="email" value="some@email.com" /> • <input type="date" min="2009-11-22" max="2011-11-22" value="2010-11-22"/> • <input type="range" min="0" max="50" value="10" /> • <input type="search" results="10" placeholder="Search..." /> • <input type="tel" placeholder="(370) 678-00000" pattern="^(?d{3})?[-s]d{3}[-s]d{5}.*?$" /> • <input type="color" placeholder="e.g. #bbbbbb" /> • <input type="number" step="1" min="-5" max="10" value="0" />
  • 58. WHAT’S NEW – HTML5 AUDIO/VIDEO HTML5 is richer
  • 59. WHAT’S NEW – HTML5 AUDIO/VIDEO • Audio <audio id="audio" src="sound.mp3" controls /> document.getElementById("audio").muted = false; • Video <video id="video" src="movie.webm" autoplay controls /> document.getElementById("video").play();
  • 60. WHAT’S NEW – HTML5 AUDIO/VIDEO • Container / Video + Audio Codecs • MP4 / H.264 + AAC • Ogg / Theora + Vorbis • WebM
  • 61. WHAT’S NEW – HTML5 CANVAS • Simple Shapes • Paths • Text • Gradients • Images
  • 62. WHAT’S NEW – HTML5 CANVAS <canvas id="canvas" width="838" height="220" /> <script> var canvasContext = document.getElementById("canvas") .getContext("2d"); canvasContext.fillRect(250, 25, 150, 100); canvasContext.beginPath(); canvasContext.arc(450, 110, 100, Math.PI*1/2, Math.PI*3/2); canvasContext.lineWidth = 15; canvasContext.lineCap = 'round'; canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)'; canvasContext.stroke(); </script>
  • 63. WHAT’S NEW – HTML5 SVG <svg xmlns="http://www.w3.org/2000/svg"> <style type="text/css"> circle:hover {fill-opacity:0.9;} </style> <g style="fill-opacity:0.7;"> <circle cx="6cm" cy="2cm" r="100" style="fill:red; stroke:black; stroke-width:0.1cm" transform="translate(0,50)" /> <circle cx="6cm" cy="2cm" r="100" style="fill:blue; stroke:black; stroke-width:0.1cm" transform="translate(70,150)" /> <circle cx="6cm" cy="2cm" r="100" style="fill:green; stroke:black; stroke-width:0.1cm" transform="translate(-70,150)"/> </g> </svg>
  • 64. HTML5 VS. FLASH & SILVERLIGHT
  • 65. HTML5 VS. FLASH & SILVERLIGHT HTML5 is the future of Open Web
  • 66. HTML5 VS. FLASH & SILVERLIGHT HTML5 is not ready for main stream yet
  • 67. HTML5 DRAWBACKS • Draft version of specification • No standardized audio / video containers and codecs • Poor video / graphics performance • Lack of professional HTML5 tools
  • 68. HTML5 VS. FLASH & SILVERLIGHT • Flash & Silverlight will stay for • Enhanced video streaming • Digital rights management (DRM) • Complex RIAs
  • 69. ADOBE AND HTML5 • Working hard on HTML5 support • HTML5 video player with fallback to Flash • Export images as SVG and Canvas from Illustrator and Photoshop • Convert Flash to HTML5
  • 70. MICROSOFT AND HTML5 • Big focus on HTML5 and standards • HTML5 is the only true cross platform solution for everything, including (Apple’s) iOS platform. Bob Muglia, PDC2010 • Silverlight remains top platform for • Mobile • Desktop applications • Video / audio streaming
  • 71. NEXT STEPS
  • 72. NEXT STEPS HTML5 is not all or nothing
  • 73. NEXT STEPS HTML5 is foward compatible!
  • 74. NEXT STEPS You can start using it right now!
  • 75. NEXT STEPS • Read http://diveintohtml5.org • Modernizr.js – detects HTML5 support • ASP.NET MVC HTML5 helpers • Leverage <video> with fallback to Silverlight or Flash • Leverage <canvas> and <svg> with fallback to image
  • 76. NEXT STEPS Have fun and be creative!
  • 77. Q & A THANKS! sergejus.blogas.lt, @sergejusb

×