Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Upgrade Your Website to HTML5 - VSLive Conference New York @iRajLal


Published on

Learn what you need to do, to upgrade your existing web application with HTML5. How and Where do you start? Learn how you capitalize on the State-of-the-Art HTML5 tags, Cutting edge graphics and animation with CSS3, and advanced HTML5 API and take your existing website to the next level of Web revolution.

You will learn:

Upgrade your current website with HTML5
Use advanced HTML5 APIs which gracefully degrade
Know how to enhance your website with the latest HTML5 goodies

Published in: Technology, Design
  • Be the first to like this

Upgrade Your Website to HTML5 - VSLive Conference New York @iRajLal

  1. 1. Upgrade Your Website to HTML5 Raj Lal Senior Engineer, Nokia Level: Intermediate
  2. 2. Story of aWeb Guy
  3. 3. Story of a Web Guy About Tools Upgrade
  4. 4. 1. About About Requirements Concerns
  5. 5. About the Web Guy1. Develop & design websites2. Manage multiple websites3. Knows Web stuff
  6. 6. Web Stuff <T AB L E > CS S S il e r l h t v ig a ja x Cl n t ie Se r ve r Va l a t io n id c o o k ie s RI A P l g - in s u HT M L 4 H T M L w id g e t s Br o w s e r w ar s s an d b o x jq u e r y X HT M L f l sh a w e b 2 .0 M e d ia p l y e r We b a p p l a t io n ic a AS P / P HP J a v a S c r ip t
  7. 7. Web 2.0 Web ApplicationOld HTML
  8. 8. HTML5 Web 2.0 Web ApplicationOld HTML
  9. 9. HTML5 Of f l ein S t o r a g eAp p C a c h T h r e a d s e We b worke r id C a n v a s An im a t io n AP I s HT M L Va l a t io n P l g - in s u v ie w p o r t a r t ic l e CS S 3 W3 C Au d io / v id e o We b s o c k e t T r a n s it io n Cr o s s b r o w s e r w e b d b S VG We b Ap p @ f o n t -f ac e Ge o l c a t io n o
  10. 10. How do I upgrade?
  11. 11. Requirements1. User Experience2. Availability3. Accessibility4. Cutting edge
  12. 12. Concerns 1. How do I upgrade to HTML5 2. New Website ? 3. Compatibility with old website? 4. Break existing websites ?
  13. 13. 2. Tools Information Tools
  14. 14. 2. Tools
  15. 15. Tools 1: Progressive Enhancement
  16. 16. Tools 2: Understand CSS 1. CSS is parsed sequentially 2. The last style is the final style 3. Browser ignore unknown syntax
  17. 17. Tools 2: Understand CSS .style { background-color: rgb(100,214,120) background-color: rgba(100,214,120, .5) }
  18. 18. Tools 2: Understand CSS Advanced Styles with CSS3 • Background • Border Radius • Drag and Drop • Opacity • Transformation • …
  19. 19. Tools 2: Understand CSS Prefix •-ms- •-moz- •-o- •-webkit-
  20. 20. Tools 2: Understand CSS .style { -moz-border-radius: 1em; -ms-border-radius: 1em; -o-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em; }
  21. 21. Tools 2: Understand CSS HTML CSS #style { Width:800px;<body> Height:640px;<div }id=“enhanced”class=“Style”> Body [id=enhanced] #style</div> {</body> Width:100%; Height:640px; }
  22. 22. Tools 3: Feature Detection Old method New method
  23. 23. Tools 3: Feature Detection
  24. 24. Tools 3: Feature Detection Use libraries • Modernizr •
  25. 25. Tools 3: Feature Detection<script src="modernizr-1.7.js“/>Modernizr.canvas ? "Canvas" : “Nocanvas";<script src="jquery-latest.js“/> ? "Ajax" : “No Ajax";
  26. 26. Tools 3: Feature DetectionModernizrCanvas SVG Cross Window MsgAudio InlineSVG Web WorkersVideo WebGL Web SQL databaseAnimation Websockets TouchTransformation GeolocationDrag and Drop Local Storage
  27. 27. Tools 3: Feature Detection jQuery.Support Ajax Cross Domain Resource Sharing (CORS) Fixed Position CSS Opacity CSS Float htmlNormalize
  28. 28. Tools 3: Feature Detection Demo
  29. 29. 3. Upgrade Upgrade
  30. 30. Requirements of Web Guy1. Better User Experience2. Available Everywhere3. Make it Accessible4. Cutting edge Graphics and Animation
  31. 31. Upgrade 1:Deliver Richer UX
  32. 32. 1: Deliver Richer UX I. Enhance you Homepage II. Add Media
  33. 33. Rich UX to Homepage What is common?
  34. 34. Answer: Slideshow
  35. 35. Upgrade 1: Add a slideshow Responsive CSS3 Slider By Ian Hansson
  36. 36. Upgrade 1: Add a slideshowHTML<input type="radio" name="slider"id="slide1"><input type="radio" name="slider"id="slide2"> Ian Hansson (@teapoted)
  37. 37. Upgrade 1: Add a slideshow HTML<div id=‘s’><div class="inner"><article><div class="info"></div></article><article><div class="info"></div></article></div></div>
  38. 38. Upgrade 1: Add a slideshow CSS#s .inner { width: 200%; }#s article {width: 50%;float: left;}#slide1:checked s.inner{ margin-left:0; }#slide2:checked s.inner{ margin-left:-100%;} Ian Hansson (@teapoted)
  39. 39. UP 2: Rich UX with Media
  40. 40. Upgrade 2:Available Everywhere
  41. 41. Upgrade 2: AvailabilityI. To all devices – PC – TV – Mobile – Tablet• All Screen size
  42. 42. All Devices: Layout Detection OPTIONS AVAILABLE
  43. 43. Layout Detection: Media QueriesMedia-queries enable style sheets tailored fordifferent ’width’, ‘height’ and ‘color’
  44. 44. Layout Detection: Media Queries<link rel="stylesheet" href="handheld.css"media="only screen and (max-width: 480px),handheld" /><link rel="stylesheet" href="default.css"media="screen" /><link rel="stylesheet" href="wider.css"media="only screen and (min-width: 1200px)" />
  45. 45. Layout Detection: Media Querieshandheld Default screen Wider screen
  46. 46. Layout Detection: Media QueriesMedia Query for device-aspect-ratio@media screen and (device-aspect-ratio: 16/9)@media screen and (device-aspect-ratio: 32/18)@media screen and (device-aspect-ratio: 1280/720)@media screen and (device-aspect-ratio: 2560/1440)
  47. 47. Layout Detection: Media Queries Media Query for Orientation@media screen and (orientation:portrait) { /* Portrait styles */}@media screen and (orientation:landscape) { /* Landscape styles */}
  48. 48. Layout Detection: ViewPortViewable area on the screen<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1">
  49. 49. Layout Detection: JavaScript jQuery.mediaqueries The script adds basic Media Query-Support (min- width and max-width in px units ) to all browsers<script src="jquery.mediaqueries.js“></script>
  50. 50. Upgrade 3:Make it Accessible
  51. 51. UP 3: Accessibility: Easier to Use Search Engines Limited ResourcesHelpsDisabled
  52. 52. UP 3: Accessibility: Easier to Use4 Key Areas for HTML5 Developers • Hearing • Mobility • Cognitive • Visual
  53. 53. UP 3: Accessibility: Easier to UseW3C recommends POUR Principle • Perceivable • Operable • Understandable • Robust
  54. 54. UP 3: Accessibility: Easier to Use1/4 Hearing • Problem Cannot hear media •Solution Make it PERCEIVABLE
  55. 55. UP 3: Accessibility: Easier to Use1/4 HearingPERCEIVABLE • Text alternative to all non-text content • Alternative for media using, subtitles, transcribed text • Semantic Markup with separation of, Style & Content
  56. 56. UP 3: Accessibility: Easier to Use2/4 Mobility • Problem Difficulty with Mouse Keyboard •Solution Make it OPERABLE
  57. 57. UP 3: Accessibility: Easier to Use2/4 MobilityOPERABLE•All function accessible from keyboard alone•No auto refresh, allow stop time based contents•Navigate with proper use of Headings & Anchors•Joysticks ,Voice recognition or audio feedback
  58. 58. UP 3: Accessibility: Easier to Use3/4 Cognitive • Problem Difficulty with Text content • Solution Make it UNDERSTANDABLE
  59. 59. UP 3: Accessibility: Easier to UseMAKE IT UNDERSTANDABLE • High contrast between front and background • Allow san serif fonts and custom resizable font size • Avoid auto-play animation, auto refresh, flashy images • Important info, error not by color only • Use multiple visual cues, std. icons,
  60. 60. UP 3: Accessibility: Easier to Use4/4 Visual • Problem Cannot see the content Differentiate color • Solution Make it ROBUST
  61. 61. 4/4 VisualROBUST • Broken HTML tag cause difficulty in screen reader • Follow HTML standard specifications • Use syntactically correct HTML & validate web page • Proper “lang” attributes in the markup • Use “acronym” and “abbr” tag with proper usage
  62. 62. UP 3: Accessibility: Easier to UseUse Semantic Markup
  63. 63. UP 3: Accessibility: Easier to UseUse HTML5 Elements ARIA Roles <nav role=”navigation”> CSS: No Fixed Font size
  64. 64. Upgrade 4:Cutting Edge
  65. 65. UPGRADE 4: Cutting EdgeI. Advanced graphics and animationII. HTML5 APIs – Geolocation – Communication APIs – Web Socket – Etc.
  66. 66. Requirement 4 : CSS3 Animation
  67. 67. Animation: SVG• 2D vector graphics using XML• Object retained in the memory• Full DOM support• SVG elements can be styled• Check Modernizr.svg Modernizr.inlinesvgPerform better when smallernumber of elements and large surface
  68. 68. HTML CODE Animation: SVG<svg id="svgElement"width="800px" height="600px"viewBox="0 0 800 600"><rect x="0" y="0" width="100%" height="100%" rx="10" ry="10" style="fill: white; stroke:black;" /><circle id="circle0" cx="40"cy="40" r="40" style="fill:orange; stroke: black; stroke-width: 1;" /></svg>
  69. 69. Animation: Canvas: Context 2D• Bitmap drawing area• Rectangles, lines, arcs, paths• Stateless• No DOM support, single element• Check Modernizr.canvasPerform better when large number of objects and surface is small
  70. 70. Animation: CSS3• Styles for Individual elements• Use CSS3 animation if available• Better than JavaScript based animation• Check Modernizr.csstransitionsCan perform better with GPU acceleration
  71. 71. Animation: CSS3var elem = $(‘myelement); JS CODEelem.addEventListener(click,function loop() { = ‘100px;}, false);#myelement CSS{…-ms-transition: opacity 1s ease;transition: opacity 1s ease;}
  72. 72. Advanced HTML5 APIs
  73. 73. HTML5 API: Polyfills and Shims? Provide support for missing features. • Polyfills: Replicate standard feature API • Shims: Own API with useful features
  74. 74. Summary• Upgrade to a Rich User Experience • Adding slideshow, rich media and advanced css• Available to All devices • Using Viewport, MediaQueries, Orientations• Upgrade to accessible Website • Ensuring 4 key accessible areas• Upgrade to CSS3 Animation & Adv. HTML5 APIs
  75. 75. Thank You Raj Lal Senior Engineer, Nokia Twitter @ iRajLal