HTML 5 - A developers perspective

1,660 views
1,587 views

Published on

This slide will present the advantages and features of HTML 5, the next version of html.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,660
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
28
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

HTML 5 - A developers perspective

  1. 1. A Developers Perspective introducingHTML 5 & CSS 3 S.Santhosh Kumar 9941497246, @santhotech santhosh@systeminsights.com
  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> Keep Updating!!!! Everything Starts with a WIKI… HTML 4.01 ?!?!
  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. A great gateway for the developers to lessen their work What about the previous version?
  4. 4. Important Features of HTML 5 1 3 2 Graphics and Multimedia made Easy New and Advanced Controls, Sockets and Communication capabilities. Better hardware usage and advanced OS integration Make the browser work for you not the other way around
  5. 5. New and Advanced Controls, Advanced Communication Capabilities More flexibility from the browsers. Does most of the work. 1
  6. 6. New controls that has been Added Sliders Email Field Pattern attribute Date Field Phone number field Mandatory Field Progress Bar Commonly needed Controls Features No more manual client side validations No customized control needed Browser takes care of stuff Makes developers life a lot easier
  7. 7. Selectors & Semantic Tags Design easily with new layout tags like <header>, <footer>, <nav>, <aside> etc New Layout Tags Get the skeleton designed in no time at all.
  8. 8. Communication Establish two way communications effectively with web sockets in your client browser. Run extremely long scripts without eating away your performance using web workers.
  9. 9. 2 Better Hardware Usage and OS integration Make maximum use of your client’s local resources.
  10. 10. Client Side Data Stores, Local Storage Data Persistence
  11. 11. Local Data Storage Local Storage available with the browsers are extremely helpful for preserving the data Helps for securing data in case of network failure with server. Local storage can be effectively used side by side with your actual storage while Maintaining the data effectively without any loss due to network problems.
  12. 12. GEO LOCATION Find your visitors location: With GEOLOCATION you can detect your client browsers location. Pinpoint location are services near to your clients browser is detected easily.
  13. 13. Native Drag and Drop Support Drag and Drop is no longer a task by special Libraries. Use the inbuilt API support to perform drag and Drop operations in your applications. document.addEventListener('dragstart', function(event) {  event.dataTransfer.setData('text', 'Customized text');  event.dataTransfer.effectAllowed = 'copy';}, false);
  14. 14. Speech Recognition Made Easy Use the browser’s in-built ability to identify speech patterns Take direct speech inputs from your client. Forget about the speech recognition and concentrate only on usability of the data. Leave the hard work to browser. Special Speech Control Under Dev...
  15. 15. Excellent Device Compatibility… Special Support for Mobile phones and IPADS. Just develop one app and use the same for web and mob.
  16. 16. 3 Multimedia and Graphics This is where it gets interesting!!!
  17. 17. Canvas 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. It lets you draw directly to your browser Make wonderful effects with ease Manipulate your PICS any way you want Your imagination is the only limit Fully compatible with DOM
  18. 18. Make ‘em Move BROWSER ANIMATION Create wonderful browser animations and games which is fully compatible with the Outlying DOM elements Say no to FLASH. Lets Welcome HTML 5.
  19. 19. SCALABLE VECTOR GRAPHICS SVG in short is another great added advantage to HTML 5 arsenal. What is SVG? 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). -wiki No more Pixelation Scale with SVG
  20. 20. ? CSS 3The Declarative Devil…  New added advantages in CSS 3 lets designers create cool stuff…
  21. 21. Rounded Corners Box Shadows Text Shadows Text Effects Gradients Linear Radiant Web Fonts Transitions CSS3 Special Features Trendy styles with CSS 3 You’re just gonna love it! The best changes ever made in css It is totally wicked!!!!!!!!
  22. 22. HTML 5 A DEVELOPER’S PERSPECTIVE Any Questions? Thank you. S.Santhosh Kumar 9941497246, @santhotech santhosh@systeminsights.com

×