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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Demystifying HTML5

3,647
views

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,647
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
109
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