0
DEMYSTIFYING
HTML5
SERGEJUS BARINOVAS
ARCHITECT, ADFORM
AGENDA
• The history of HTML5
• What’s new in HTML5
• HTML5 vs. Silverlight & Flash
• Next steps
MY HTML5 BACKGROUND
• Interest in HTML5 for ~1 year
• HTML5 workshop in Las Vegas
• Advertising is dependent on Flash
(doe...
DISCLAIMER
This is not about
THE HISTORY OF
HTML5
HTML QUIZ
What language HTML
is based on?
HTML QUIZ ANSWER
SGML
HTML5 QUIZ
What is HTML5?
HTML5 QUIZ ANSWER
• HTML (HTML5, SVG1.1)
• CSS (CSS3)
• JavaScript API
A BIT OF HISTORY
HTML XHTML
• 1998 XML 1.0
• 1999 HTML 4.01
• 2000 XHTML 1.0
• Reformulate HTML in XML without
adding any new elements or a...
XHTML – THE TRUTH
Who is developing
XHTML web sites?
XHTML – THE TRUTH
You are (probably) lying!
XHTML – THE TRUTH
Everything you know
about XHTML is wrong
XHTML – THE TRUTH
• HTML 4.01
• HTML 4.01 DOCTYPE
• MIME type – text/html
• Browsers forgive malformed HTML
• XHTML 1.0
• ...
XHTML – THE TRUTH
XHTML – forget about
existing (99%) web sites!
XHTML – THE TRUTH
Thousands of web developers upgraded to
XHTML syntax and DOCTYPE but kept
serving it with a text/html MI...
XHTML – THE TRUTH
This is not an XHTML!
A-HA MOMENT
We need to move on
supporting interop!
THE FUTURE OF HTML
June 2004, W3C Workshop
An evolution of the existing HTML 4 standard to include
new features for modern...
THE FUTURE OF HTML
7 PRINCIPLES
• Backwards compatibility, clear migration path
• Well-defined error handling
• Users shou...
THE FUTURE OF HTML
THE POLL
Should the W3C develop declarative
extension to HTML and CSS and
imperative extensions to DOM?
THE FUTURE OF HTML
THE SPLIT
• W3C
• XHTML 2.0
• WHAT Working Group
• Documenting the forgiving error-handling
algorithms ...
THE FUTURE OF HTML
THE REUNION
October 2006, Tim Berners-Lee
announced that the W3C would work together with the
WHAT Work...
THE FUTURE OF HTML
FIRST DRAFT
January 2008, HTML5 Draft
The first time ever all 5 major browser
vendors collaborate toget...
THE FUTURE OF HTML
CURRENT SITUATION
WHAT’S NEW IN
HTML5
JAVASCRIPT API
WHAT’S NEW –
JAVASCRIPT API
• New Selectors
• Web Workers*
• Web Sockets*
• Web Storage
• Offline Apps*
• Geolocation
WHAT’S NEW – JS API
NEW SELECTORS
• DOM API
var els = document.getElementsByClassName('section');
els[0].focus();
• Select...
WHAT’S NEW – JS API
WEB WORKERS
• Independent JavaScript threading
main.js:
var worker = new Worker('increment.js');
worke...
WHAT’S NEW – JS API
WEB SOCKETS
• Bi-directional full-duplex communication
var socket = new WebSocket(location);
socket.on...
WHAT’S NEW – JS API
WEB STORAGE
• Local Storage
var item = document.localStorage.setItem('key','value');
• Session Storage...
WHAT’S NEW – JS API
OFFLINE APPS
• Application Cache
<html manifest="offline.manifest">
CACHE MANIFEST
styles.css
jquery-1...
WHAT’S NEW – JS API
GEOLOCATION
• Geolocation API
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(fu...
WHAT’S NEW IN
HTML5
CSS3
WHAT’S NEW – CSS3
• Selectors
• Border Radius
• Backgrounds
• Color & Opacity
• Shadows
• 2D Transforms
• WOFF Fonts
WHAT’S NEW – CSS3
SELECTORS
• Selectors
.row:nth-child(even) { background: #dde; }
• Specific attributes
input[type="text"...
WHAT’S NEW – CSS3
BORDER RADIUS
border-radius: 20px 10px;
border-top-left-radius: 20px 10px;
border-top-right-radius: 10px...
WHAT’S NEW – CSS3
BACKGROUNDS
• Multiple backgrounds
div {
background-image: url(bg1.png), url(bg2.png);
background-positi...
WHAT’S NEW – CSS3
COLOR & OPACITY
• RGB / RGBA
div.demo1 { background: rgba(60, 80, 100, 0.25); }
• HSL / HSLA
div.demo2 {...
WHAT’S NEW – CSS3
SHADOWS
• Box Shadow
div { box-shadow: 5px 5px 7px #888; }
• Text Shadow
span { text-shadow: 2px 2px 7px...
WHAT’S NEW – CSS3
2D TRANSFORMS
div {
transform: scale(0.75)
rotate(0deg)
translate(0px, 0px)
skew(0deg, 0deg);
transform-...
WHAT’S NEW – CSS3
WOFF FONTS
• Font Linking
@font-face {
font-family: Whimsy;
src: url('fonts/Whimsy.woff');
}
WHAT’S NEW IN
HTML5
HTML5
WHAT’S NEW – HTML5
SIMPLER MARKUP
HTML5 is simpler
WHAT’S NEW – HTML5
SIMPLER MARKUP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xht...
WHAT’S NEW – HTML5
SIMPLER MARKUP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xht...
WHAT’S NEW – HTML5
SIMPLER MARKUP
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Con...
WHAT’S NEW – HTML5
SIMPLER MARKUP
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charse...
WHAT’S NEW – HTML5
SIMPLER MARKUP
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Sergejus apie .NET</title>...
WHAT’S NEW – HTML5
SIMPLER MARKUP
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Sergejus apie .NET</title>...
WHAT’S NEW – HTML5
ELEMENTS
HTML5 is more semantic
WHAT’S NEW – HTML5
ELEMENTS
• <section>
• <nav>
• <article>
• <header>
• <footer>
• <aside>
• <figure>
• and more…
WHAT’S NEW – HTML5
ELEMENTS
WHAT’S NEW – HTML5
ELEMENTS
WHAT’S NEW – HTML5
WEB FORMS 2.0
HTML5 is for Web Apps
WHAT’S NEW – HTML5
WEB FORMS 2.0
• <input type="text" required autofocus />
• <input type="email" value="some@email.com" /...
WHAT’S NEW – HTML5
AUDIO/VIDEO
HTML5 is richer
WHAT’S NEW – HTML5
AUDIO/VIDEO
• Audio
<audio id="audio" src="sound.mp3" controls />
document.getElementById("audio").mute...
WHAT’S NEW – HTML5
AUDIO/VIDEO
• Container / Video + Audio Codecs
• MP4 / H.264 + AAC
• Ogg / Theora + Vorbis
• WebM
WHAT’S NEW – HTML5
CANVAS
• Simple Shapes
• Paths
• Text
• Gradients
• Images
WHAT’S NEW – HTML5
CANVAS
<canvas id="canvas" width="838" height="220" />
<script>
var canvasContext = document.getElement...
WHAT’S NEW – HTML5
SVG
<svg xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
circle:hover {fill-opacity:0.9;}
<...
HTML5 VS.
FLASH & SILVERLIGHT
HTML5 VS.
FLASH & SILVERLIGHT
HTML5 is the future
of Open Web
HTML5 VS.
FLASH & SILVERLIGHT
HTML5 is not ready
for main stream yet
HTML5 DRAWBACKS
• Draft version of specification
• No standardized audio / video
containers and codecs
• Poor video / grap...
HTML5 VS.
FLASH & SILVERLIGHT
• Flash & Silverlight will stay for
• Enhanced video streaming
• Digital rights management (...
ADOBE AND HTML5
• Working hard on HTML5 support
• HTML5 video player with fallback to Flash
• Export images as SVG and Can...
MICROSOFT AND HTML5
• Big focus on HTML5 and standards
• HTML5 is the only true cross platform solution
for everything, in...
NEXT STEPS
NEXT STEPS
HTML5 is not
all or nothing
NEXT STEPS
HTML5 is foward
compatible!
NEXT STEPS
You can start using it
right now!
NEXT STEPS
• Read http://diveintohtml5.org
• Modernizr.js – detects HTML5 support
• ASP.NET MVC HTML5 helpers
• Leverage <...
NEXT STEPS
Have fun and be creative!
Q & A
THANKS!
sergejus.blogas.lt, @sergejusb
Upcoming SlideShare
Loading in...5
×

Demystifying HTML5

3,729

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,729
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
110
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Demystifying HTML5"

  1. 1. DEMYSTIFYING HTML5 SERGEJUS BARINOVAS ARCHITECT, ADFORM
  2. 2. AGENDA • The history of HTML5 • What’s new in HTML5 • HTML5 vs. Silverlight & Flash • Next steps
  3. 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. 4. DISCLAIMER This is not about
  5. 5. THE HISTORY OF HTML5
  6. 6. HTML QUIZ What language HTML is based on?
  7. 7. HTML QUIZ ANSWER SGML
  8. 8. HTML5 QUIZ What is HTML5?
  9. 9. HTML5 QUIZ ANSWER • HTML (HTML5, SVG1.1) • CSS (CSS3) • JavaScript API
  10. 10. A BIT OF HISTORY
  11. 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. 12. XHTML – THE TRUTH Who is developing XHTML web sites?
  13. 13. XHTML – THE TRUTH You are (probably) lying!
  14. 14. XHTML – THE TRUTH Everything you know about XHTML is wrong
  15. 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. 16. XHTML – THE TRUTH XHTML – forget about existing (99%) web sites!
  17. 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. 18. XHTML – THE TRUTH This is not an XHTML!
  19. 19. A-HA MOMENT We need to move on supporting interop!
  20. 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. 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. 22. THE FUTURE OF HTML THE POLL Should the W3C develop declarative extension to HTML and CSS and imperative extensions to DOM?
  23. 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. 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. 25. THE FUTURE OF HTML FIRST DRAFT January 2008, HTML5 Draft The first time ever all 5 major browser vendors collaborate together
  26. 26. THE FUTURE OF HTML CURRENT SITUATION
  27. 27. WHAT’S NEW IN HTML5 JAVASCRIPT API
  28. 28. WHAT’S NEW – JAVASCRIPT API • New Selectors • Web Workers* • Web Sockets* • Web Storage • Offline Apps* • Geolocation
  29. 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. 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. 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. 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. 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. 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. 35. WHAT’S NEW IN HTML5 CSS3
  36. 36. WHAT’S NEW – CSS3 • Selectors • Border Radius • Backgrounds • Color & Opacity • Shadows • 2D Transforms • WOFF Fonts
  37. 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. 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. 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. 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. 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. 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. 43. WHAT’S NEW – CSS3 WOFF FONTS • Font Linking @font-face { font-family: Whimsy; src: url('fonts/Whimsy.woff'); }
  44. 44. WHAT’S NEW IN HTML5 HTML5
  45. 45. WHAT’S NEW – HTML5 SIMPLER MARKUP HTML5 is simpler
  46. 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. 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. 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. 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. 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. 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. 52. WHAT’S NEW – HTML5 ELEMENTS HTML5 is more semantic
  53. 53. WHAT’S NEW – HTML5 ELEMENTS • <section> • <nav> • <article> • <header> • <footer> • <aside> • <figure> • and more…
  54. 54. WHAT’S NEW – HTML5 ELEMENTS
  55. 55. WHAT’S NEW – HTML5 ELEMENTS
  56. 56. WHAT’S NEW – HTML5 WEB FORMS 2.0 HTML5 is for Web Apps
  57. 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. 58. WHAT’S NEW – HTML5 AUDIO/VIDEO HTML5 is richer
  59. 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. 60. WHAT’S NEW – HTML5 AUDIO/VIDEO • Container / Video + Audio Codecs • MP4 / H.264 + AAC • Ogg / Theora + Vorbis • WebM
  61. 61. WHAT’S NEW – HTML5 CANVAS • Simple Shapes • Paths • Text • Gradients • Images
  62. 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. 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. 64. HTML5 VS. FLASH & SILVERLIGHT
  65. 65. HTML5 VS. FLASH & SILVERLIGHT HTML5 is the future of Open Web
  66. 66. HTML5 VS. FLASH & SILVERLIGHT HTML5 is not ready for main stream yet
  67. 67. HTML5 DRAWBACKS • Draft version of specification • No standardized audio / video containers and codecs • Poor video / graphics performance • Lack of professional HTML5 tools
  68. 68. HTML5 VS. FLASH & SILVERLIGHT • Flash & Silverlight will stay for • Enhanced video streaming • Digital rights management (DRM) • Complex RIAs
  69. 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. 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. 71. NEXT STEPS
  72. 72. NEXT STEPS HTML5 is not all or nothing
  73. 73. NEXT STEPS HTML5 is foward compatible!
  74. 74. NEXT STEPS You can start using it right now!
  75. 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. 76. NEXT STEPS Have fun and be creative!
  77. 77. Q & A THANKS! sergejus.blogas.lt, @sergejusb
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×