Upgrade Your Website to HTML5                             Raj Lal                  Senior Engineer, Nokia                 ...
Story of aWeb Guy
Story of a Web Guy  About      Tools   Upgrade
1. About              About           Requirements             Concerns
About the Web Guy1.   Develop & design websites2.   Manage multiple websites3.   Knows Web stuff
Web Stuff                               <T AB L E >                 CS S            S il e r l h t                        ...
Web 2.0           Web           ApplicationOld HTML
HTML5                         Web 2.0           Web           ApplicationOld HTML
HTML5                      Of f l ein            S t o r a g eAp p C a c h T h r e a d s                                  ...
How do I upgrade?
Requirements1.   User Experience2.   Availability3.   Accessibility4.   Cutting edge
Concerns 1.   How do I upgrade to HTML5 2.   New Website ? 3.   Compatibility with old website? 4.   Break existing websit...
2. Tools           Information              Tools
2. Tools
Tools 1: Progressive Enhancement
Tools 2: Understand CSS     1. CSS is parsed sequentially     2. The last style is the final style     3. Browser ignore u...
Tools 2: Understand CSS   .style   {    background-color: rgb(100,214,120)    background-color: rgba(100,214,120, .5)   }
Tools 2: Understand CSS    Advanced Styles with CSS3     •   Background     •   Border Radius     •   Drag and Drop     • ...
Tools 2: Understand CSS  Prefix  •-ms-  •-moz-  •-o-  •-webkit-
Tools 2: Understand CSS    .style    {    -moz-border-radius: 1em;    -ms-border-radius: 1em;    -o-border-radius: 1em;   ...
Tools 2: Understand CSS HTML                            CSS                 #style                 {                 Width...
Tools 3: Feature Detection     Old method   New method
Tools 3: Feature Detection
Tools 3: Feature Detection Use libraries • Modernizr • jQuery.support
Tools 3: Feature Detection<script src="modernizr-1.7.js“/>Modernizr.canvas ? "Canvas" : “Nocanvas";<script src="jquery-lat...
Tools 3: Feature DetectionModernizrCanvas           SVG             Cross Window MsgAudio            InlineSVG       Web W...
Tools 3: Feature Detection    jQuery.Support    Ajax    Cross Domain Resource Sharing (CORS)    Fixed Position    CSS Opac...
Tools 3: Feature Detection  http://widgets-gadgets.com/html5/              Demo
3. Upgrade             Upgrade
Requirements of Web Guy1.   Better User Experience2.   Available Everywhere3.   Make it Accessible4.   Cutting edge Graphi...
Upgrade 1:Deliver Richer UX
1: Deliver Richer UX  I.    Enhance you Homepage  II.   Add Media
Rich UX to Homepage       What is common?        http://micrsoft.com        http://amazon.com        http://linkedin.com
Answer: Slideshow
Upgrade 1: Add a slideshow    Responsive CSS3 Slider        By Ian Hansson
Upgrade 1: Add a slideshowHTML<input type="radio" name="slider"id="slide1"><input type="radio" name="slider"id="slide2">  ...
Upgrade 1: Add a slideshow HTML<div id=‘s’><div class="inner"><article><div class="info"></div></article><article><div cla...
Upgrade 1: Add a slideshow    CSS#s .inner { width: 200%; }#s article {width: 50%;float: left;}#slide1:checked   s.inner{ ...
UP 2: Rich UX with Media
Upgrade 2:Available Everywhere
Upgrade 2: AvailabilityI.       To all devices     –    PC     –    TV     –    Mobile     –    Tablet•        All Screen ...
All Devices: Layout Detection        OPTIONS AVAILABLE
Layout Detection: Media QueriesMedia-queries enable style sheets tailored fordifferent ’width’, ‘height’ and ‘color’
Layout Detection: Media Queries<link rel="stylesheet" href="handheld.css"media="only screen and (max-width: 480px),handhel...
Layout Detection: Media Querieshandheld Default screen   Wider screen        http://www.lancs.ac.uk/
Layout Detection: Media QueriesMedia Query for device-aspect-ratio@media screen and (device-aspect-ratio: 16/9)@media scre...
Layout Detection: Media Queries Media Query for Orientation@media screen and (orientation:portrait) {  /* Portrait styles ...
Layout Detection: ViewPortViewable area on the screen<meta name="viewport" content="width=device-width,initial-scale=1, ma...
Layout Detection: JavaScript  jQuery.mediaqueries The script adds basic Media Query-Support (min- width and max-width in p...
Upgrade 3:Make it Accessible
UP 3: Accessibility: Easier to Use                            Search                            Engines              Limit...
UP 3: Accessibility: Easier to Use4 Key Areas for HTML5 Developers    •   Hearing    •   Mobility    •   Cognitive    •   ...
UP 3: Accessibility: Easier to UseW3C recommends POUR Principle    •   Perceivable    •   Operable    •   Understandable  ...
UP 3: Accessibility: Easier to Use1/4 Hearing    •   Problem        Cannot hear media    •Solution        Make it PERCEIVA...
UP 3: Accessibility: Easier to Use1/4 HearingPERCEIVABLE   • Text alternative to all non-text content   • Alternative for ...
UP 3: Accessibility: Easier to Use2/4 Mobility    •   Problem        Difficulty with Mouse        Keyboard    •Solution   ...
UP 3: Accessibility: Easier to Use2/4 MobilityOPERABLE•All function accessible from keyboard alone•No auto refresh, allow ...
UP 3: Accessibility: Easier to Use3/4 Cognitive    •   Problem        Difficulty with Text content    • Solution        Ma...
UP 3: Accessibility: Easier to UseMAKE IT UNDERSTANDABLE  • High contrast between front and background  • Allow san serif ...
UP 3: Accessibility: Easier to Use4/4 Visual    •   Problem        Cannot see the content        Differentiate color    • ...
4/4 VisualROBUST • Broken HTML tag cause difficulty in screen reader • Follow HTML standard specifications • Use syntactic...
UP 3: Accessibility: Easier to UseUse Semantic Markup
UP 3: Accessibility: Easier to UseUse HTML5 Elements       ARIA Roles       <nav role=”navigation”>       CSS: No Fixed Fo...
Upgrade 4:Cutting Edge
UPGRADE 4: Cutting EdgeI.        Advanced graphics and animationII.       HTML5 APIs      –    Geolocation      –    Commu...
Requirement 4 : CSS3 Animation
Animation: SVG•   2D vector graphics using XML•   Object retained in the memory•   Full DOM support•   SVG elements can be...
HTML CODE                Animation: SVG<svg id="svgElement"width="800px" height="600px"viewBox="0 0 800 600"><rect x="0" y...
Animation: Canvas: Context 2D•   Bitmap drawing area•   Rectangles, lines, arcs, paths•   Stateless•   No DOM support, sin...
Animation: CSS3•   Styles for Individual elements•   Use CSS3 animation if available•   Better than JavaScript based anima...
Animation: CSS3var elem = $(‘myelement);    JS CODEelem.addEventListener(click,function loop() {elem.style.left = ‘100px;}...
Advanced HTML5 APIs
HTML5 API: Polyfills and Shims?  Provide support for missing features.  • Polyfills: Replicate standard feature API  • Shi...
Summary• Upgrade to a Rich User Experience  • Adding slideshow, rich media and advanced css• Available to All devices  • U...
Thank You            Raj Lal Senior Engineer, Nokia         Twitter @ iRajLal
Upcoming SlideShare
Loading in...5
×

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

2,835

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
1 Comment
0 Likes
Statistics
Notes
  • Get my book on User Interface design guidelines and best practices here http://www.designuserinterface.com/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
2,835
On Slideshare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
16
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved. I am going to tell you a story about a developer, who knows web designing, even some development HTML ASP/ PHP NET a web master or even a blogger . He got involved with web pages very early , he is now web master of multiple websites, some of them he manages some them is his own website. Family wesite, personal blog, portfolio. Fantastic ! He is riding the wave of web 2.0 flash and silverlight, now he starts hearing this new thing, the solution for all problems, OMG is that possible, the funny little language which he used for validation is now getting compiled in thelcient side, there is MVP pattern in JS OMG And CSS “style” can now create 3d animations , HTML5 is like the superman from another planet, who can do everything. Or can he ?
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved. Old School HTML Late 90’s Web Applications Y2K+ 2005+ Web 2.0
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved. Old School HTML Late 90’s Web Applications Y2K+ 2005+ Web 2.0
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved. April 2010 – Steve Jobs mentioned HTML5 better than Flash January 2011- Officially the HTML5 logo was introduced
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved. Make it available to everyone, all the time, everywhere Deliver better richer User Experience without worrying about browser support Simplify your website and make it usable, make it easy to use Make it faster to load, and reload Add cutting edge graphics, animations and effects
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved. Do I need to create a New Website ? HTML5 compatible with old website? I don’t want to break existing websites
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved. Least common denominator should be Content in plain HTML The next layer is the style an CSS enhancements On top of CSS should come the JavaScript behavior
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved. Least common denominator should be Content in plain HTML The next layer is the style an CSS enhancements On top of CSS should come the JavaScript behavior
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved. Least common denominator should be Content in plain HTML The next layer is the style an CSS enhancements On top of CSS should come the JavaScript behavior
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved. Least common denominator should be Content in plain HTML The next layer is the style an CSS enhancements On top of CSS should come the JavaScript behavior
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved. Least common denominator should be Content in plain HTML The next layer is the style an CSS enhancements On top of CSS should come the JavaScript behavior
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved. Least common denominator should be Content in plain HTML The next layer is the style an CSS enhancements On top of CSS should come the JavaScript behavior
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved. Least common denominator should be Content in plain HTML The next layer is the style an CSS enhancements On top of CSS should come the JavaScript behavior
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved. Least common denominator should be Content in plain HTML The next layer is the style an CSS enhancements On top of CSS should come the JavaScript behavior
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved. Least common denominator should be Content in plain HTML The next layer is the style an CSS enhancements On top of CSS should come the JavaScript behavior
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved. Least common denominator should be Content in plain HTML The next layer is the style an CSS enhancements On top of CSS should come the JavaScript behavior
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved. Least common denominator should be Content in plain HTML The next layer is the style an CSS enhancements On top of CSS should come the JavaScript behavior
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved. Least common denominator should be Content in plain HTML The next layer is the style an CSS enhancements On top of CSS should come the JavaScript behavior
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved. Least common denominator should be Content in plain HTML The next layer is the style an CSS enhancements On top of CSS should come the JavaScript behavior
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved. Least common denominator should be Content in plain HTML The next layer is the style an CSS enhancements On top of CSS should come the JavaScript behavior
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved. Make it available to everyone, all the time, everywhere Deliver better richer User Experience without worrying about browser support Simplify your website and make it usable, make it easy to use Make it faster to load, and reload Add cutting edge graphics, animations and effects
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • Visual Studio Live! New York 2012 © 2012 Visual Studio Live! All rights reserved.
  • 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 • jQuery.support
    25. 25. Tools 3: Feature Detection<script src="modernizr-1.7.js“/>Modernizr.canvas ? "Canvas" : “Nocanvas";<script src="jquery-latest.js“/>jQuery.support.ajax ? "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 http://widgets-gadgets.com/html5/ 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? http://micrsoft.com http://amazon.com http://linkedin.com
    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 http://www.lancs.ac.uk/
    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() {elem.style.left = ‘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
    1. A particular slide catching your eye?

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

    ×