Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

HTML 5 - A developers perspective

Wird geladen in …3

Hier ansehen

1 von 22 Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)


Ähnlich wie HTML 5 - A developers perspective (20)

Aktuellste (20)


HTML 5 - A developers perspective

  1. 1. A Developers Perspective<br />introducingHTML 5 & CSS 3<br />S.Santhosh Kumar<br />9941497246, @santhotech<br />santhosh@systeminsights.com<br />
  2. 2. HTML5 is the next major revision of the HTML standard, currently under development. Like its immediate predecessors, HTML 4.01 and XHTML 1.1, HTML5 is a standard for structuring and presenting content on the World Wide Web. The Web Hypertext Application Technology Working Group (WHATWG) began work on the new standard in 2004. It all starts with<!DOCTYPE HTML><br />Keep Updating!!!!<br />Everything Starts with a WIKI…<br />HTML 4.01 ?!?!<br />
  3. 3. In 2004, when the World Wide Web Consortium (W3C) was focusing future developments on XHTML 2.0, and HTML 4.01 had not been updated since 2000In 2009, the W3C allowed the XHTML 2.0 Working Group's charter to expire, and decided not to renew it. W3C and WHATWG are currently working together on the development of HTML5.<br />A great gateway for the developers to lessen their work<br />What about the previous version?<br />
  4. 4. Important Features of HTML 5<br />1<br />3<br />2<br />Graphics and Multimedia made Easy<br />New and Advanced Controls, Sockets and Communication capabilities.<br />Better hardware usage and advanced OS integration<br />Make the browser work for you not the other way around<br />
  5. 5. New and Advanced Controls, Advanced Communication Capabilities<br />More flexibility from the browsers. Does most of the work.<br />1<br />
  6. 6. New controls that has been Added<br /><ul><li>Sliders
  7. 7. Email Field
  8. 8. Pattern attribute
  9. 9. Date Field
  10. 10. Phone number field
  11. 11. Mandatory Field
  12. 12. Progress Bar</li></ul>Commonly needed Controls<br />Features<br /><ul><li>No more manual client side validations
  13. 13. No customized control needed
  14. 14. Browser takes care of stuff
  15. 15. Makes developers life a lot easier</li></li></ul><li>Selectors & Semantic Tags<br />Design easily with new layout tags like <header>, <footer>, <nav>, <aside> etc<br />New Layout Tags<br />Get the skeleton designed in no time at all.<br />
  16. 16. Communication<br />Establish two way communications effectively with web sockets in your client browser.<br />Run extremely long scripts without eating away your performance using web workers.<br />
  17. 17. 2<br />Better Hardware Usage and OS integration<br />Make maximum use of your client’s local resources.<br />
  18. 18. Client Side Data Stores, Local Storage<br />Data Persistence<br />
  19. 19. Local Data Storage<br />Local Storage available with the browsers are extremely helpful <br />for preserving the data<br />Helps for securing data in case of network failure with server.<br />Local storage can be effectively used side by side with your actual storage while<br />Maintaining the data effectively without any loss due to network problems.<br />
  20. 20. GEO LOCATION<br />Find your visitors location:<br />With GEOLOCATION you can detect your client browsers location.<br />Pinpoint location are services near to your clients browser is detected easily.<br />
  21. 21. Native Drag and Drop Support<br />Drag and Drop is no longer a task by special Libraries.<br />Use the inbuilt API support to perform drag and Drop operations in your applications.<br />document.addEventListener('dragstart', function(event) {  event.dataTransfer.setData('text', 'Customized text');  event.dataTransfer.effectAllowed = 'copy';}, false);<br />
  22. 22. Speech Recognition Made Easy Use the browser’s in-built ability to identify speech patterns<br />Take direct speech inputs from your client.<br />Forget about the speech recognition and concentrate only on usability of the data.<br />Leave the hard work to browser.<br />Special Speech Control Under Dev...<br />
  23. 23. Excellent Device Compatibility…<br />Special Support for Mobile phones and IPADS.<br />Just develop one app and use the same for web and mob.<br />
  24. 24. 3<br />Multimedia and Graphics<br />This is where it gets interesting!!!<br />
  25. 25. Canvas<br /><ul><li>The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bit map and does not have a built in scene graph.
  26. 26. It lets you draw directly to your browser
  27. 27. Make wonderful effects with ease
  28. 28. Manipulate your PICS any way you want
  29. 29. Your imagination is the only limit
  30. 30. Fully compatible with DOM</li></li></ul><li>Make ‘em Move<br />BROWSER ANIMATION<br /> Create wonderful browser animations and games which is fully compatible with the <br />Outlying DOM elements<br />Say no to FLASH. Lets Welcome HTML 5.<br />
  31. 31. SCALABLE VECTOR GRAPHICS<br />SVG in short is another great added advantage to HTML 5 arsenal.<br />What is SVG?<br />Scalable Vector Graphics (SVG) is a family of specifications of an XML-based file format for describing two-dimensional vector graphics, both static and dynamic (i.e. interactive or animated).<br />-wiki<br /> No more Pixelation<br /> Scale with SVG<br />
  32. 32. ?<br />CSS 3The Declarative Devil… <br />New added advantages in CSS 3 lets designers create cool stuff…<br />
  33. 33. <ul><li>Rounded Corners
  34. 34. Box Shadows
  35. 35. Text Shadows
  36. 36. Text Effects
  37. 37. Gradients
  38. 38. Linear
  39. 39. Radiant
  40. 40. Web Fonts
  41. 41. Transitions</li></ul>CSS3 Special Features<br />Trendy styles with CSS 3<br />You’re just gonna love it!<br />The best changes ever made in css<br />It is totally wicked!!!!!!!!<br />
  42. 42. HTML 5 <br />A DEVELOPER’S PERSPECTIVE<br />Any Questions?<br />Thank you.<br />S.Santhosh Kumar<br />9941497246, @santhotech<br />santhosh@systeminsights.com<br />