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.

I Love HTML5

1,050 views

Published on

HTML5

Published in: Technology, Design
  • Be the first to comment

I Love HTML5

  1. 1. WhoShravan Kumar KasagoniTechnical Fellow @ Thomson ReutersMicrosoft MVP – ASP.NET & IIShttp://theshravan.net@techieshravan
  2. 2. 2022
  3. 3. HTML 5 !=HTMLIS NOT JUST HTML 5 HTML
  4. 4. Just a marketing message
  5. 5. the future of the webstill under developmenta huge spec
  6. 6. First Public Candidate Proposed Working Draft RecommendationWorking Draft Recommendation Recommendation Last call Call to implement
  7. 7. article figcaption progressaside footer rubybdi header rtcommand hgroup rpdetails mark sectionsummary meter timefigure nav wbr http://w3schools.com/html5/default.asp
  8. 8. audio For multimedia content, sounds, music or other audio streamsvideo For video content, such as a movie clip or other video streamssource For media resources for media elements, defined inside video or audio elementsembed For embedded content, such as a plug-intrack For text tracks used in mediaplayers
  9. 9. <canvas></canvas> http://w3schools.com/html5/default.asp
  10. 10. datalist A list of options for input valueskeygen Generate keys to authenticate users For different types of output, such as outputoutput written by a script http://w3schools.com/html5/default.asp
  11. 11. tel weeksearch timeurl datetime-localemail numberdatetime rangedate colormonth placeholder http://w3schools.com/html5/default.asp
  12. 12. Currently supported video formats : MP4, WebM, OggBrowser MP4 WebM OggInternet Explorer 9 YES NO NOFirefox 4.0 NO YES YESGoogle Chrome 6 YES YES YESApple Safari 5 YES NO NOOpera 10.6 NO YES YES
  13. 13. XML-based• Scriptable, extensible, easily editable• Easy to apply CSS stylesVector graphics• Resizable without degradation• Vector images are composed of shapes instead of pixelsCompression• Fast downloadEasy debugging• It is just XML!
  14. 14. <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"> <rect fill="red" x="20" y="20" width="100" height="75" /> <rect fill="blue" x="50" y="50" width="100" height="75" /></svg>
  15. 15. Characteristic SVG CanvasWhen to use Highly detailed drawing, Programmatic rendering, charts gamesDrawing Mode By Runtime By ApplicationDOM Support Each SVG element part of <CANVAS> part of the DOM DOMAnimation Manipulating objects in the Using direct scripting in DOM canvasGPU Yes YesaccelerationPerformance Best for larger surface Best for smaller surface and/or small # of objects and/or large # of objectsModification Tag, Script & CSS Script only
  16. 16. CSS3
  17. 17. div.top { border-radius: 152px 304px 228px 152px; border-style: double; border-width: 42px; padding: 12px;}
  18. 18. div.top { background-color: rgba(155,0,155,0.5)}div.bottom { background-color: hsla(0,100%,50%,0.2);}
  19. 19. div{… box-shadow: 20px 20px 20px hsla(0,100%,50%,0.2);}div{… box-shadow: 20px 20px 20px hsla(0,100%,50%,0.2), -20px -20px 20px hsla(180,50%,50%,0.8);}
  20. 20. div{ background-image: url("images/1.jpg"), url("images/2.jpg"), url("images/3.jpg"); background-position: 90px 90px, 60px 60px, 30px 30px;}
  21. 21. <link href=“mobile.css" rel="stylesheet" media="screen and (max-width:480px)" type="text/css"/><link href=“netbook.css" rel="stylesheet" media="screen and (min-width:481px) and (max- width: 1024px)" type="text/css" /><link href=“laptop.css" rel="stylesheet" media="screen and (min-width:1025px)" type="text/css" />
  22. 22. div { -ms-transform: scale(2, 2) rotate(30deg);} 34
  23. 23. http://theshravan.net | @techieshravan

×