Practical html5

  • 746 views
Uploaded 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 …

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.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
746
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
55
Comments
0
Likes
2

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
  • 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

Transcript

  • 1. Practical HTML5 Matt Casto http://google.com/profiles/mattcasto
  • 2. Practical
  • 3. Practical Important Factors
  • 4. PracticalImportant Factors
  • 5. PracticalImportant Factors1. Client Platforms
  • 6. PracticalImportant Factors1. Client Platforms
  • 7. PracticalImportant Factors1. Client Platforms
  • 8. PracticalImportant Factors1. Client Platforms2. Web Browsers
  • 9. PracticalImportant Factors1. Client Platforms2. Web Browsers
  • 10. PracticalImportant Factors1. Client Platforms2. Web Browsers
  • 11. PracticalImportant Factors1. Client Platforms2. Web Browsers3. Features Needed
  • 12. PracticalImportant Factors1. Client Platforms2. Web Browsers Offline / Storage3. Features Needed
  • 13. PracticalImportant Factors1. Client Platforms2. Web Browsers Communication3. Features Needed
  • 14. PracticalImportant Factors1. Client Platforms2. Web Browsers Hardware Access3. Features Needed
  • 15. PracticalImportant Factors1. Client Platforms2. Web Browsers Semantics3. Features Needed
  • 16. PracticalImportant Factors1. Client Platforms2. Web Browsers Multimedia3. Features Needed
  • 17. PracticalImportant Factors1. Client Platforms2. Web Browsers CSS 33. Features Needed
  • 18. PracticalImportant Factors1. Client Platforms2. Web Browsers 3D Effects3. Features Needed
  • 19. PracticalImportant Factors1. Client Platforms2. Web Browsers Performance3. Features Needed
  • 20. PracticalImportant Factors1. Client Platforms2. Web Browsers3. Features Needed
  • 21. PracticalImportant Factors1. Client Platforms2. Web Browsers3. Features Needed4. Coolness Factor
  • 22. PracticalImportant Factors1. Client Platforms2. Web Browsers3. Features Needed4. Coolness Factor
  • 23. PracticalImportant Factors1. Client Platforms2. Web Browsers3. Features Needed4. Coolness Factor
  • 24. PracticalImportant Factors1. Client Platforms2. Web Browsers3. Features Needed4. Coolness Factor
  • 25. PracticalImportant Factors1. Client Platforms2. Web Browsers3. Features Needed4. Coolness Factor
  • 26. Practical
  • 27. Practical What is HTML5?
  • 28. PracticalWhat is HTML5?
  • 29. PracticalWhat is HTML5? HTML5 ≈ + +
  • 30. PracticalWhat is HTML5? HTML5 ≈ HTML + +
  • 31. PracticalWhat is HTML5? HTML5 ≈ HTML + CSS +
  • 32. PracticalWhat is HTML5? HTML5 ≈ HTML + CSS + JS
  • 33. PracticalWhat is HTML5?
  • 34. PracticalWhat is HTML5? Offline / Storage Multimedia Communication CSS 3 Hardware Access 3D Effects Semantics Performance
  • 35. PracticalWhat is HTML5? Offline / Storage Multimedia Communication CSS 3 Hardware Access 3D Effects Semantics Performance
  • 36. Practical Offline / Storage
  • 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. Practical Offline / Storage - Local StorageSource: http://caniuse.com
  • 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. Practical Offline / Storage - Web SQL DatabaseSource: http://caniuse.com
  • 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. Practical Offline / Storage - IndexedDBSource: http://caniuse.com
  • 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. 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. Practical Offline / Storage - AppCache<!DOCTYPE HTML><html manifest="cache.manifest"> <head><title>Hello AppCache</title></head> <body> <h1>Hello AppCache!</h1> </body></html>
  • 46. Practical Offline / Storage - AppCache & onLineSource: http://caniuse.com
  • 47. Practical
  • 48. Practical Offline / Storage Multimedia Communication CSS 3 Hardware Access 3D Effects Semantics Performance
  • 49. Practical Communication
  • 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. Practical Communication - WebSocket APISource: http://caniuse.com
  • 52. Practical
  • 53. Practical Offline / Storage Multimedia Communication CSS 3 Hardware Access 3D Effects Semantics Performance
  • 54. Practical Hardware Access
  • 55. Practical Hardware Access - Native Drag & Dropdocument.addEventListener(dragstart, function(event) {  event.dataTransfer.setData(text, Customized text);  event.dataTransfer.effectAllowed = copy;}, false);
  • 56. Practical Hardware Access - Native Drag & DropSource: http://caniuse.com
  • 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. Practical Hardware Access - GeolocationSource: http://caniuse.com
  • 59. Practical Hardware Access - Device Orientationwindow.addEventListener(deviceorientation, function(event) {  var a = event.alpha;  var b = event.beta;  var g = event.gamma;}, false);
  • 60. Practical Hardware Access - Device OrientationSource: http://caniuse.com
  • 61. Practical
  • 62. Practical Offline / Storage Multimedia Communication CSS 3 Hardware Access 3D Effects Semantics Performance
  • 63. Practical Semantics
  • 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. Practical SemanticsSource: http://caniuse.com
  • 66. Practical Semantics - Datalist<input list="cars"/><datalist id="cars">  <option value="BMW"/>  <option value="Ford"/>  <option value="Volvo"/></datalist>
  • 67. Practical Semantics - DatalistSource: http://caniuse.com
  • 68. Practical Semantics - Details / Summary<details>  <summary>Parent</summary>  Child</details>
  • 69. Practical Semantics - Details / SummarySource: http://caniuse.com
  • 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. Practical Semantics - Progress & MeterSource: http://caniuse.com
  • 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. Practical Semantics - new form elementsSource: http://caniuse.com
  • 74. Practical
  • 75. Practical Offline / Storage Multimedia Communication CSS 3 Hardware Access 3D Effects Semantics Performance
  • 76. Practical Multimedia
  • 77. Practical Multimedia - Audio
  • 78. Practical Multimedia - AudioSource: http://caniuse.com
  • 79. Practical Multimedia - Audio Browser Ogg mp3 wavFirefox 3.5+ ✓ ✓ Safari 5+ ✓ ✓Chrome 6+ ✓ ✓Opera 10.5+ ✓ ✓ IE 9 ✓ ✓
  • 80. Practical Multimedia - Video
  • 81. Practical Multimedia - VideoSource: http://caniuse.com
  • 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. 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. Practical Multimedia - CanvasSource: http://caniuse.com
  • 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. Practical Multimedia - Inline SVGSource: http://caniuse.com
  • 87. Practical
  • 88. Practical Offline / Storage Multimedia Communication CSS 3 Hardware Access 3D Effects Semantics Performance
  • 89. Practical CSS 3
  • 90. Practical CSS 3 - Selectors.row:nth-child(even) {  background: #dde;}.row:nth-child(odd) {  background: white;}
  • 91. Practical CSS 3 - Image-like displaydiv {  display: inline-block;}
  • 92. Practical CSS 3 - specific attributesinput[type="text"] {  background: #eee;}
  • 93. Practical CSS 3 - Negation:not(.box) {  color: #00c;}            :not(span) {  display: block;}
  • 94. Practical CSS 3 - More specific targettingh2:first-child { ... }div.text > div { ... }h2 + header { ... }
  • 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. Practical CSS 3 - Text overflowdiv {  text-overflow: ellipsis;}
  • 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. Practical CSS 3text-shadow: 5px 5px 4px #0ff;
  • 99. Practical CSS 3 - all featuresSource: http://caniuse.com
  • 100. Practical
  • 101. Practical Offline / Storage Multimedia Communication CSS 3 Hardware Access 3D Effects Semantics Performance
  • 102. Practical 3D Effects
  • 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. Practical
  • 105. Practical Offline / Storage Multimedia Communication CSS 3 Hardware Access 3D Effects Semantics Performance
  • 106. Practical Performance
  • 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. Practical Performance - Web WorkersSource: http://caniuse.com
  • 109. Practical
  • 110. PracticalDetection, Polyfills, and Shimshttp://modernizr.com/http://yepnopejs.com/https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
  • 111. Practical
  • 112. PracticalJust remember ...
  • 113. PracticalJust remember ...
  • 114. PracticalJust remember ...support yourcustomer.
  • 115. PracticalJust remember ...
  • 116. PracticalJust remember ...don’t be a hipster
  • 117. Practical Please thank our sponsors!
  • 118. PracticalResources:http://www.w3.org/html5http://www.html5rocks.com/http://slides.html5rocks.comhttp://diveintohtml5.orghttp://caniuse.com