Practical html5

1,120 views
937 views

Published on

A lot of things are being said about HTML5 ranging from bad to good to fanatical. From Apple, to Microsoft, to Adobe themselves, all of the big players have put their weight behind the standard. It is clear that HTML is here to stay, but what does that mean for today's developers? As consultants we need to determine the best use of technology today and in the future to deliver the best value to our clients. In this session Matt will give an overview of the technologies in and around what is being called HTML5 and whether they are useful today and going forward.

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,120
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
64
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Practical HTML by Matt Casto\n
  • In the interest of evaluating HTML5 from a completely practical standpoint, we first need to consider the most important factors.\n
  • Which platforms do you need to support?\nDesktop Computers, Smart Phones, Tablets\n
  • Which platforms do you need to support?\nDesktop Computers, Smart Phones, Tablets\n
  • Which platforms do you need to support?\nDesktop Computers, Smart Phones, Tablets\n
  • Which platforms do you need to support?\nDesktop Computers, Smart Phones, Tablets\n
  • Which browsers do you need to support?\nInternet Explorer, Firefox, Safari, Chrome, iOS Safari, Android, and others\n
  • Which browsers do you need to support?\nInternet Explorer, Firefox, Safari, Chrome, iOS Safari, Android, and others\n
  • Which browsers do you need to support?\nInternet Explorer, Firefox, Safari, Chrome, iOS Safari, Android, and others\n
  • Which browsers do you need to support?\nInternet Explorer, Firefox, Safari, Chrome, iOS Safari, Android, and others\n
  • Which browsers do you need to support?\nInternet Explorer, Firefox, Safari, Chrome, iOS Safari, Android, and others\n
  • Which browsers do you need to support?\nInternet Explorer, Firefox, Safari, Chrome, iOS Safari, Android, and others\n
  • Which browsers do you need to support?\nInternet Explorer, Firefox, Safari, Chrome, iOS Safari, Android, and others\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • What features do you need?\nOffline/Storage, Communication, Hardware Access, Semantics, Multimedia, CSS 3, 3D Effects, Performance\n
  • Beware of the “coolness factor” influencing your decisions. Don’t be a hipster.\nNOT PRACTICAL!\n
  • Beware of the “coolness factor” influencing your decisions. Don’t be a hipster.\nNOT PRACTICAL!\n
  • Beware of the “coolness factor” influencing your decisions. Don’t be a hipster.\nNOT PRACTICAL!\n
  • Beware of the “coolness factor” influencing your decisions. Don’t be a hipster.\nNOT PRACTICAL!\n
  • Beware of the “coolness factor” influencing your decisions. Don’t be a hipster.\nNOT PRACTICAL!\n
  • Beware of the “coolness factor” influencing your decisions. Don’t be a hipster.\nNOT PRACTICAL!\n
  • Beware of the “coolness factor” influencing your decisions. Don’t be a hipster.\nNOT PRACTICAL!\n
  • Beware of the “coolness factor” influencing your decisions. Don’t be a hipster.\nNOT PRACTICAL!\n
  • What really is HTML5? Many things considered to be part of HTML5 aren’t in the actual specification. HTML5 has become a buzzword.\n
  • HTML 5 is a combination of updates to HTML markup, CSS styling, and Javascript API.\n
  • HTML 5 is a combination of updates to HTML markup, CSS styling, and Javascript API.\n
  • HTML 5 is a combination of updates to HTML markup, CSS styling, and Javascript API.\n
  • HTML 5 is a combination of updates to HTML markup, CSS styling, and Javascript API.\n
  • HTML 5 is a combination of updates to HTML markup, CSS styling, and Javascript API.\n
  • HTML 5 is a combination of updates to HTML markup, CSS styling, and Javascript API.\n
  • HTML 5 is a combination of updates to HTML markup, CSS styling, and Javascript API.\n
  • HTML 5 is a combination of updates to HTML markup, CSS styling, and Javascript API.\n
  • HTML 5 is a combination of updates to HTML markup, CSS styling, and Javascript API.\n
  • HTML 5 is a combination of many disparate features. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is a combination of many disparate features. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is a combination of many disparate features. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is a combination of many disparate features. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is a combination of many disparate features. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is a combination of many disparate features. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is a combination of many disparate features. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is a combination of many disparate features. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • Online/Offline detection and data storage.\n
  • Online/Offline detection and data storage.\n
  • Online/Offline detection and data storage.\n
  • Online/Offline detection and data storage.\n
  • Online/Offline detection and data storage.\n
  • Online/Offline detection and data storage.\n
  • Online/Offline detection and data storage.\n
  • Online/Offline detection and data storage.\n
  • Online/Offline detection and data storage.\n
  • - Very simple key-value pair storage\n- jquery-jstore - jQuery based library implemented over local storage\n- 5MB limit with no API to increase quote - at the users’ mercy!\n- Used to be part of the HTML5 spec, but was removed\n
  • \n
  • - this is an implementation of SQLite in javascript\n- W3C deprecated specification on 11/18/2010 which means you shouldn’t use it :-(\n
  • Firefox has stated it will never add support for Web SQL. Coupled with IE’s lack of interest, the W3C deprecated the specification.\n
  • - Indexed Database API, aka IndexedDB, formerly known as WebSimpleDB\n- this is an object store, not a relational database, storing Javascript Objects\n- Asynchronous and Transactional only\n- You can create indexes against your stored objects\n
  • - The best example I could find online did not work and was out of date.\n- Firefox requires “moz” prefix. Chrome requires “webkit” prefix.\n- IMO, this technology shows great promise, but is not ready for prime time.\n
  • - Note that onLine won’t tell you if your site is down or not responding - only whether the browser has network connectivity.\n- IE and Firefox have “Work Offline” menu options, but WebKit browsers don’t.\n
  • - CACHE MANIFEST section includes all resources loaded into cache\n- NETWORK section includes all resources not cached\n- FALLBACK section includes page to fall back to when offline and referencing a page that is not included in the cache\n
  • - The cache manifest document is referenced in whatever page you want to automatically load all resources into the local application cache.\n- This is brittle - a problem with loading any resource will cause the entire process to fail, and the error notifications are very limited.\n
  • - Each browser has a different default size for the cache’s quota, with no API for checking the quota size or increasing it defined in the specification!\n- Again, at the users’ mercy for cache size.\n- For a funny, and informative, article about AppCache difficulties, search for “AppCache is a douchebag”\n
  • Communication\n
  • Communication\n
  • Communication\n
  • Communication\n
  • Communication\n
  • Communication\n
  • Communication\n
  • Communication\n
  • Communication\n
  • Communication\n
  • Communication\n
  • Communication\n
  • Communication\n
  • Communication\n
  • Communication\n
  • Communication\n
  • WebSocket API provides bi-directional, full-duplex communication over a single TCP socket.\n
  • Note no support on Android. Partial support in Safari versions refers to an implementation using an older version of the protocol.\n
  • Hardware Access\n
  • Hardware Access\n
  • Hardware Access\n
  • Hardware Access\n
  • Hardware Access\n
  • Hardware Access\n
  • Hardware Access\n
  • Hardware Access\n
  • Hardware Access\n
  • Hardware Access\n
  • Hardware Access\n
  • Hardware Access\n
  • Hardware Access\n
  • Hardware Access\n
  • Hardware Access\n
  • Hardware Access\n
  • \n
  • Lack of support in mobile browsers makes sense, really.\n
  • Of course, the google stuff in this example isn’t cross browser ... just ignore that part ;-)\n
  • IE 9 is reported to have issues reporting correct latitude & longitude.\n
  • \n
  • \n
  • Semantic markup elements, and other new markup elements.\n
  • Semantic markup elements, and other new markup elements.\n
  • Semantic markup elements, and other new markup elements.\n
  • Semantic markup elements, and other new markup elements.\n
  • Semantic markup elements, and other new markup elements.\n
  • Semantic markup elements, and other new markup elements.\n
  • Semantic markup elements, and other new markup elements.\n
  • Semantic markup elements, and other new markup elements.\n
  • Semantic markup elements, and other new markup elements.\n
  • Semantic markup elements, and other new markup elements.\n
  • Semantic markup elements, and other new markup elements.\n
  • Semantic markup elements, and other new markup elements.\n
  • Semantic markup elements, and other new markup elements.\n
  • Semantic markup elements, and other new markup elements.\n
  • Semantic markup elements, and other new markup elements.\n
  • Semantic markup elements, and other new markup elements.\n
  • Sorry for the small size - complete examples are difficult to fit onto a single slide. This shows most common new semantic elements. In the past, you would typically have a <div id=”whatever”> instead.\n
  • \n
  • The datalist is referenced as an auto-complete when user types into the input element.\n
  • \n
  • The summary value is shown with a glyph that can be clicked to expand and show the details, much like a tree-view control.\n
  • \n
  • The value inside the element is shown when the browser doesn’t support the element. The actual control displayed depends on the browser and operating system.\n
  • Partial support in Firefox 6+ and IE10 refers to supporting the progress element, but not the meter element.\n
  • The color input pops up a color selector based on the browser / OS.\nNote that number, email, and tel elements change the type of keyboard (SIP) in mobile browsers.\n
  • Most browsers only have partial support because this shows the support of ALL of the new form elements. Sorry, I’m lazy, I didn’t want to copy a chart for each element.\n
  • Video and audio are what most people think of when they hear the buzzword HTML5.\n
  • Video and audio are what most people think of when they hear the buzzword HTML5.\n
  • Video and audio are what most people think of when they hear the buzzword HTML5.\n
  • Video and audio are what most people think of when they hear the buzzword HTML5.\n
  • Video and audio are what most people think of when they hear the buzzword HTML5.\n
  • Video and audio are what most people think of when they hear the buzzword HTML5.\n
  • Video and audio are what most people think of when they hear the buzzword HTML5.\n
  • Video and audio are what most people think of when they hear the buzzword HTML5.\n
  • Video and audio are what most people think of when they hear the buzzword HTML5.\n
  • Video and audio are what most people think of when they hear the buzzword HTML5.\n
  • Video and audio are what most people think of when they hear the buzzword HTML5.\n
  • Video and audio are what most people think of when they hear the buzzword HTML5.\n
  • Video and audio are what most people think of when they hear the buzzword HTML5.\n
  • Video and audio are what most people think of when they hear the buzzword HTML5.\n
  • Video and audio are what most people think of when they hear the buzzword HTML5.\n
  • Video and audio are what most people think of when they hear the buzzword HTML5.\n
  • You would typically put a flash or silverlight audio object inside the audio tag to gracefully fallback on browsers that don’t support it.\n
  • \n
  • Note that no single encoding works for all browsers -- you WILL end up referencing multiple encodings.\n
  • You would typical put a flash video object inside the video tag for graceful fallback for devices that don’t support the video tag.\n
  • \n
  • Note that no single encoding works for all browsers.\n
  • \n
  • Note that Opera Mini’s partial support - it will display the canvas but is unable to play animations or complex operations.\n
  • A simple circle with a gratuitous gradient fill and pops up an alert when you click on it.\n
  • Note that Opera Mini’s partial support - it will display the canvas but is unable to play animations or complex operations.\n
  • CSS 3 includes many new ways of styling and animating elements that make old methods obsolete (like Flash).\nBrowsers have lots of specific tricks, but I’m sticking to the non-prefixed features.\n\n
  • CSS 3 includes many new ways of styling and animating elements that make old methods obsolete (like Flash).\nBrowsers have lots of specific tricks, but I’m sticking to the non-prefixed features.\n\n
  • CSS 3 includes many new ways of styling and animating elements that make old methods obsolete (like Flash).\nBrowsers have lots of specific tricks, but I’m sticking to the non-prefixed features.\n\n
  • CSS 3 includes many new ways of styling and animating elements that make old methods obsolete (like Flash).\nBrowsers have lots of specific tricks, but I’m sticking to the non-prefixed features.\n\n
  • CSS 3 includes many new ways of styling and animating elements that make old methods obsolete (like Flash).\nBrowsers have lots of specific tricks, but I’m sticking to the non-prefixed features.\n\n
  • CSS 3 includes many new ways of styling and animating elements that make old methods obsolete (like Flash).\nBrowsers have lots of specific tricks, but I’m sticking to the non-prefixed features.\n\n
  • CSS 3 includes many new ways of styling and animating elements that make old methods obsolete (like Flash).\nBrowsers have lots of specific tricks, but I’m sticking to the non-prefixed features.\n\n
  • CSS 3 includes many new ways of styling and animating elements that make old methods obsolete (like Flash).\nBrowsers have lots of specific tricks, but I’m sticking to the non-prefixed features.\n\n
  • CSS 3 includes many new ways of styling and animating elements that make old methods obsolete (like Flash).\nBrowsers have lots of specific tricks, but I’m sticking to the non-prefixed features.\n\n
  • CSS 3 includes many new ways of styling and animating elements that make old methods obsolete (like Flash).\nBrowsers have lots of specific tricks, but I’m sticking to the non-prefixed features.\n\n
  • CSS 3 includes many new ways of styling and animating elements that make old methods obsolete (like Flash).\nBrowsers have lots of specific tricks, but I’m sticking to the non-prefixed features.\n\n
  • CSS 3 includes many new ways of styling and animating elements that make old methods obsolete (like Flash).\nBrowsers have lots of specific tricks, but I’m sticking to the non-prefixed features.\n\n
  • CSS 3 includes many new ways of styling and animating elements that make old methods obsolete (like Flash).\nBrowsers have lots of specific tricks, but I’m sticking to the non-prefixed features.\n\n
  • CSS 3 includes many new ways of styling and animating elements that make old methods obsolete (like Flash).\nBrowsers have lots of specific tricks, but I’m sticking to the non-prefixed features.\n\n
  • CSS 3 includes many new ways of styling and animating elements that make old methods obsolete (like Flash).\nBrowsers have lots of specific tricks, but I’m sticking to the non-prefixed features.\n\n
  • CSS 3 includes many new ways of styling and animating elements that make old methods obsolete (like Flash).\nBrowsers have lots of specific tricks, but I’m sticking to the non-prefixed features.\n\n
  • Frankly, I just use jQuery for this\n
  • I’ll be the first to admit that I’m no CSS guru. I’m going through these CSS features exactly as they appear in http://slides.html5rocks.com/#css-selectors\n
  • Again, I’d use jQuery for this\n
  • Again, I’d use jQuery for this\n
  • Again, I’d use jQuery for this\n
  • \n
  • \n
  • This is based on a great interactive demo at http://slides.html5rocks.com/#rounded-corners\n
  • \n
  • Rather than showing http://caniuse.com support statistics for each CSS3 feature, I used their combined browser support chart.\n
  • 3D effects have been included in the specification for a while, but browsers are only recently beginning to support the specifications.\n
  • 3D effects have been included in the specification for a while, but browsers are only recently beginning to support the specifications.\n
  • 3D effects have been included in the specification for a while, but browsers are only recently beginning to support the specifications.\n
  • 3D effects have been included in the specification for a while, but browsers are only recently beginning to support the specifications.\n
  • 3D effects have been included in the specification for a while, but browsers are only recently beginning to support the specifications.\n
  • 3D effects have been included in the specification for a while, but browsers are only recently beginning to support the specifications.\n
  • 3D effects have been included in the specification for a while, but browsers are only recently beginning to support the specifications.\n
  • 3D effects have been included in the specification for a while, but browsers are only recently beginning to support the specifications.\n
  • 3D effects have been included in the specification for a while, but browsers are only recently beginning to support the specifications.\n
  • 3D effects have been included in the specification for a while, but browsers are only recently beginning to support the specifications.\n
  • 3D effects have been included in the specification for a while, but browsers are only recently beginning to support the specifications.\n
  • 3D effects have been included in the specification for a while, but browsers are only recently beginning to support the specifications.\n
  • 3D effects have been included in the specification for a while, but browsers are only recently beginning to support the specifications.\n
  • 3D effects have been included in the specification for a while, but browsers are only recently beginning to support the specifications.\n
  • 3D effects have been included in the specification for a while, but browsers are only recently beginning to support the specifications.\n
  • 3D effects have been included in the specification for a while, but browsers are only recently beginning to support the specifications.\n
  • I took a screenshot of the rendered result of this markup, but it doesn’t show the entire animation. For the real version, see http://slides.html5rocks.com/#canvas-3d which is, in turn, based on http://mobile.freecode.com/projects/sanogles\n
  • Performance is about threading, commonly known as web workers.\n
  • Performance is about threading, commonly known as web workers.\n
  • Performance is about threading, commonly known as web workers.\n
  • Performance is about threading, commonly known as web workers.\n
  • Performance is about threading, commonly known as web workers.\n
  • Performance is about threading, commonly known as web workers.\n
  • Performance is about threading, commonly known as web workers.\n
  • Performance is about threading, commonly known as web workers.\n
  • Performance is about threading, commonly known as web workers.\n
  • Performance is about threading, commonly known as web workers.\n
  • Performance is about threading, commonly known as web workers.\n
  • Performance is about threading, commonly known as web workers.\n
  • Performance is about threading, commonly known as web workers.\n
  • Performance is about threading, commonly known as web workers.\n
  • Performance is about threading, commonly known as web workers.\n
  • Performance is about threading, commonly known as web workers.\n
  • Web Workers have no access to the DOM or the calling page; the only communication allowed is through messages.\n
  • \n
  • If you feel like you really must use these newfangled features, but can’t depend on client support, you can always use feature detection and create graceful fallbacks; or even duplicate features using polyfill or shim libraries.\n
  • If you feel like you really must use these newfangled features, but can’t depend on client support, you can always use feature detection and create graceful fallbacks; or even duplicate features using polyfill or shim libraries.\n
  • If you feel like you really must use these newfangled features, but can’t depend on client support, you can always use feature detection and create graceful fallbacks; or even duplicate features using polyfill or shim libraries.\n
  • If you feel like you really must use these newfangled features, but can’t depend on client support, you can always use feature detection and create graceful fallbacks; or even duplicate features using polyfill or shim libraries.\n
  • Just remember what’s important: delivering what your customer needs.\n
  • Support your customer’s platforms and browsers.\n
  • Support your customer’s platforms and browsers.\n
  • Don’t be a hipster.\n
  • Don’t be a hipster.\n
  • Please thank our sponsors. Without sponsors such as these, a conference like this would cost an order of magnitude more ... if it were even possible.\n
  • Thanks for listening to me rant.\n
  • Practical html5

    1. 1. Practical HTML5 Matt Casto http://google.com/profiles/mattcasto
    2. 2. Practical
    3. 3. Practical Important Factors
    4. 4. PracticalImportant Factors
    5. 5. PracticalImportant Factors1. Client Platforms
    6. 6. PracticalImportant Factors1. Client Platforms
    7. 7. PracticalImportant Factors1. Client Platforms
    8. 8. PracticalImportant Factors1. Client Platforms2. Web Browsers
    9. 9. PracticalImportant Factors1. Client Platforms2. Web Browsers
    10. 10. PracticalImportant Factors1. Client Platforms2. Web Browsers
    11. 11. PracticalImportant Factors1. Client Platforms2. Web Browsers3. Features Needed
    12. 12. PracticalImportant Factors1. Client Platforms2. Web Browsers Offline / Storage3. Features Needed
    13. 13. PracticalImportant Factors1. Client Platforms2. Web Browsers Communication3. Features Needed
    14. 14. PracticalImportant Factors1. Client Platforms2. Web Browsers Hardware Access3. Features Needed
    15. 15. PracticalImportant Factors1. Client Platforms2. Web Browsers Semantics3. Features Needed
    16. 16. PracticalImportant Factors1. Client Platforms2. Web Browsers Multimedia3. Features Needed
    17. 17. PracticalImportant Factors1. Client Platforms2. Web Browsers CSS 33. Features Needed
    18. 18. PracticalImportant Factors1. Client Platforms2. Web Browsers 3D Effects3. Features Needed
    19. 19. PracticalImportant Factors1. Client Platforms2. Web Browsers Performance3. Features Needed
    20. 20. PracticalImportant Factors1. Client Platforms2. Web Browsers3. Features Needed
    21. 21. PracticalImportant Factors1. Client Platforms2. Web Browsers3. Features Needed4. Coolness Factor
    22. 22. PracticalImportant Factors1. Client Platforms2. Web Browsers3. Features Needed4. Coolness Factor
    23. 23. PracticalImportant Factors1. Client Platforms2. Web Browsers3. Features Needed4. Coolness Factor
    24. 24. PracticalImportant Factors1. Client Platforms2. Web Browsers3. Features Needed4. Coolness Factor
    25. 25. PracticalImportant Factors1. Client Platforms2. Web Browsers3. Features Needed4. Coolness Factor
    26. 26. Practical
    27. 27. Practical What is HTML5?
    28. 28. PracticalWhat is HTML5?
    29. 29. PracticalWhat is HTML5? HTML5 ≈ + +
    30. 30. PracticalWhat is HTML5? HTML5 ≈ HTML + +
    31. 31. PracticalWhat is HTML5? HTML5 ≈ HTML + CSS +
    32. 32. PracticalWhat is HTML5? HTML5 ≈ HTML + CSS + JS
    33. 33. PracticalWhat is HTML5?
    34. 34. PracticalWhat is HTML5? Offline / Storage Multimedia Communication CSS 3 Hardware Access 3D Effects Semantics Performance
    35. 35. PracticalWhat is HTML5? Offline / Storage Multimedia Communication CSS 3 Hardware Access 3D Effects Semantics Performance
    36. 36. Practical Offline / Storage
    37. 37. Practical Offline / Storage - Local Storage// use localStorage for persistent storage// use sessionStorage for per tab storagewindow.localStorage.setItem(value, area.value);window.sessionStorage.setItem(timestamp, (new Date()).getTime());var val = window.localStorage.getItem(value);window.localStorage.removeItem(value);window.localStorage.clear();
    38. 38. Practical Offline / Storage - Local StorageSource: http://caniuse.com
    39. 39. Practical Offline / Storage - Web SQL Databasevar db = openDatabase(exampleDB, 1.0, example database, 5 * 1024 * 1024);db.transaction(function (tx) { tx.executeSql(CREATE TABLE IF NOT EXISTS foo (id unique, text)); tx.executeSql(INSERT INTO foo (id, text) VALUES (1, "bar")); tx.executeSql(SELECT * FROM foo, [], function (tx, results) { var len = results.rows.length, i; for (i = 0; i < len; i++) { alert(results.rows.item(i).text); } });});
    40. 40. Practical Offline / Storage - Web SQL DatabaseSource: http://caniuse.com
    41. 41. Practical Offline / Storage - IndexedDBvar trans = db.transaction(["foo"], IDBTransaction.READ_WRITE, 0);var store = trans.objectStore("foo");var request = store.put( {"bar": foobar} );request.onsuccess = function(e) { alert("Success!" + "rnrn" + e.value);};request.onerror = function(e) { alert("Error! " + "rnrn" + e.value);};
    42. 42. Practical Offline / Storage - IndexedDBSource: http://caniuse.com
    43. 43. Practical Offline / Storage - onLine APIdocument.body.addEventListener("online", function() { checkOnLineState(); }, false);document.body.addEventListener("offline", function() { checkOnLineState(); }, false);checkOnLineState();function checkOnLineState() { if (typeof (navigator.onLine) == undefined) { alert("navigator.onLine isnt defined."); return; } if (navigator.onLine) { alert("You are online."); } else { alert("You are online."); }}
    44. 44. Practical Offline / Storage - AppCacheCACHE MANIFEST# v0.0.8 - not required, but lets you easily invalidate cacheindex.htmlsite.cssjquery-1.4.1.jsemoticon_smile.pngemoticon_unhappy.pngNETWORK:noncached.htmlFALLBACK:/ offline.html
    45. 45. Practical Offline / Storage - AppCache<!DOCTYPE HTML><html manifest="cache.manifest"> <head><title>Hello AppCache</title></head> <body> <h1>Hello AppCache!</h1> </body></html>
    46. 46. Practical Offline / Storage - AppCache & onLineSource: http://caniuse.com
    47. 47. Practical
    48. 48. Practical Offline / Storage Multimedia Communication CSS 3 Hardware Access 3D Effects Semantics Performance
    49. 49. Practical Communication
    50. 50. Practical Communication - WebSocket APIvar ws = new WebSocket("ws://websocket.example.com");ws.onopen = function(e) { alert("WebSocket connection open"); };ws.onmessage = function(e) { alert("WebSocket message received: " + e.data); };ws.onclose = function(e) { alert("WebSocket connection closed"); };ws.postMessage("Hello WebSocket");ws.disconnect();
    51. 51. Practical Communication - WebSocket APISource: http://caniuse.com
    52. 52. Practical
    53. 53. Practical Offline / Storage Multimedia Communication CSS 3 Hardware Access 3D Effects Semantics Performance
    54. 54. Practical Hardware Access
    55. 55. Practical Hardware Access - Native Drag & Dropdocument.addEventListener(dragstart, function(event) {  event.dataTransfer.setData(text, Customized text);  event.dataTransfer.effectAllowed = copy;}, false);
    56. 56. Practical Hardware Access - Native Drag & DropSource: http://caniuse.com
    57. 57. Practical Hardware Access - Geolocationif (navigator.geolocation) {  navigator.geolocation.getCurrentPosition(function(position) {    var latLng = new google.maps.LatLng(        position.coords.latitude, position.coords.longitude);    var marker = new google.maps.Marker( { position: latLng, map: map });    map.setCenter(latLng);  }, errorHandler);}
    58. 58. Practical Hardware Access - GeolocationSource: http://caniuse.com
    59. 59. Practical Hardware Access - Device Orientationwindow.addEventListener(deviceorientation, function(event) {  var a = event.alpha;  var b = event.beta;  var g = event.gamma;}, false);
    60. 60. Practical Hardware Access - Device OrientationSource: http://caniuse.com
    61. 61. Practical
    62. 62. Practical Offline / Storage Multimedia Communication CSS 3 Hardware Access 3D Effects Semantics Performance
    63. 63. Practical Semantics
    64. 64. Practical Semantics<body>   <section>   <aside>Top links...</aside>  <header>    <article>   <figure>    <hgroup>      <header>     <img src="..."/>      <h1>Page title</h1>        <h1>Title</h1>     <figcaption>Chart 1.1</figcaption>      <h2>Page subtitle</h2>      </header>   </figure>    </hgroup>      <section>   <footer>  </header>        Content...     Copyright ©  <nav>      </section>     <time datetime="2010-11-08">   <ul>Navigation...</ul>    </article> 2010  </nav> </section> </time>.   </footer> </body>
    65. 65. Practical SemanticsSource: http://caniuse.com
    66. 66. Practical Semantics - Datalist<input list="cars"/><datalist id="cars">  <option value="BMW"/>  <option value="Ford"/>  <option value="Volvo"/></datalist>
    67. 67. Practical Semantics - DatalistSource: http://caniuse.com
    68. 68. Practical Semantics - Details / Summary<details>  <summary>Parent</summary>  Child</details>
    69. 69. Practical Semantics - Details / SummarySource: http://caniuse.com
    70. 70. Practical Semantics - Progress & MeterYour score is:<meter min="0" max="100" low="40" high="90" optimum="100" value="91">A+</meter>Download is:<progress>working...</progress>Goal is:<progress value="75" max="100">3/4 complete</progress>
    71. 71. Practical Semantics - Progress & MeterSource: http://caniuse.com
    72. 72. Practical Semantics - new form elements<input type="text" required /><input type="email" value="some@email.com" /><input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14"/><input type="range" min="0" max="50" value="10" /><input type="search" results="10" placeholder="Search..." /><input type="tel"  placeholder="(555) 555-5555"         pattern="^(?d{3})?[-s]d{3}[-s]d{4}.*?$" /><input type="color" placeholder="e.g. #bbbbbb" /><input type="number" step="1" min="-5" max="10" value="0" />
    73. 73. Practical Semantics - new form elementsSource: http://caniuse.com
    74. 74. Practical
    75. 75. Practical Offline / Storage Multimedia Communication CSS 3 Hardware Access 3D Effects Semantics Performance
    76. 76. Practical Multimedia
    77. 77. Practical Multimedia - Audio
    78. 78. Practical Multimedia - AudioSource: http://caniuse.com
    79. 79. Practical Multimedia - Audio Browser Ogg mp3 wavFirefox 3.5+ ✓ ✓ Safari 5+ ✓ ✓Chrome 6+ ✓ ✓Opera 10.5+ ✓ ✓ IE 9 ✓ ✓
    80. 80. Practical Multimedia - Video
    81. 81. Practical Multimedia - VideoSource: http://caniuse.com
    82. 82. Practical Multimedia - Video Browser Ogg H.264 WebM Firefox 3.5+ ✓ Firefox 4+ ✓ ✓ Safari 3+ ✓ Chrome 6+ ✓ ✓Opera 10.5+ ✓ ✓ IE 9 ✓ ✓iPhone Safari ✓ Android ✓ ✓
    83. 83. Practical Multimedia - Canvas<canvas id="canvas" width="838" height="220"></canvas><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>
    84. 84. Practical Multimedia - CanvasSource: http://caniuse.com
    85. 85. Practical Multimedia - Inline SVG<html>  <svg>    <circle id="myCircle" class="important" cx="50%" cy="50%" r="100"        fill="url(#myGradient)"        onmousedown="alert(hello);"/>  </svg></html>
    86. 86. Practical Multimedia - Inline SVGSource: http://caniuse.com
    87. 87. Practical
    88. 88. Practical Offline / Storage Multimedia Communication CSS 3 Hardware Access 3D Effects Semantics Performance
    89. 89. Practical CSS 3
    90. 90. Practical CSS 3 - Selectors.row:nth-child(even) {  background: #dde;}.row:nth-child(odd) {  background: white;}
    91. 91. Practical CSS 3 - Image-like displaydiv {  display: inline-block;}
    92. 92. Practical CSS 3 - specific attributesinput[type="text"] {  background: #eee;}
    93. 93. Practical CSS 3 - Negation:not(.box) {  color: #00c;}            :not(span) {  display: block;}
    94. 94. Practical CSS 3 - More specific targettingh2:first-child { ... }div.text > div { ... }h2 + header { ... }
    95. 95. Practical CSS 3 - Webfonts@font-face { <div id="fontface-sample"  font-family: LeagueGothic; class="example">  src: url(LeagueGothic.otf); <span>LeagueGothic font with} no image replacement</span> </div>@font-face {  font-family: Droid Sans;  src: url(Droid_Sans.ttf);}header {  font-family: LeagueGothic;}
    96. 96. Practical CSS 3 - Text overflowdiv {  text-overflow: ellipsis;}
    97. 97. Practical CSS 3 - Rounded Cornersface: border-radius: 15px;left eye: border-radius: 20px;right eye: border-radius: 35px;base white: border-radius: 5px;mouth: border-radius: 23px;nose: border-radius: 0px;left black eye: border-radius: 35px;right black eye: border-radius: 2px;
    98. 98. Practical CSS 3text-shadow: 5px 5px 4px #0ff;
    99. 99. Practical CSS 3 - all featuresSource: http://caniuse.com
    100. 100. Practical
    101. 101. Practical Offline / Storage Multimedia Communication CSS 3 Hardware Access 3D Effects Semantics Performance
    102. 102. Practical 3D Effects
    103. 103. Practical 3D Effects - Canvas 3D<canvas id="canvas" width="838" height="220"></canvas><script>  var canvas = document.getElementById("canvas") var gl = canvas.getContext("experimental-webgl");  gl.viewport(0, 0, canvas.width, canvas.height);  //...</script>
    104. 104. Practical
    105. 105. Practical Offline / Storage Multimedia Communication CSS 3 Hardware Access 3D Effects Semantics Performance
    106. 106. Practical Performance
    107. 107. Practical Performance - Web Workersvar worker = new Worker("worker.js"); }worker.onmessage = function(e){ alert(e.data) };worker.postMessage("Hello Worker"); page script }onmessage = function(e) { if (e.data === "Hello Worker") { postMessage("Hello World"); worker.js }};
    108. 108. Practical Performance - Web WorkersSource: http://caniuse.com
    109. 109. Practical
    110. 110. PracticalDetection, Polyfills, and Shimshttp://modernizr.com/http://yepnopejs.com/https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
    111. 111. Practical
    112. 112. PracticalJust remember ...
    113. 113. PracticalJust remember ...
    114. 114. PracticalJust remember ...support yourcustomer.
    115. 115. PracticalJust remember ...
    116. 116. PracticalJust remember ...don’t be a hipster
    117. 117. Practical Please thank our sponsors!
    118. 118. PracticalResources:http://www.w3.org/html5http://www.html5rocks.com/http://slides.html5rocks.comhttp://diveintohtml5.orghttp://caniuse.com

    ×