HTML5- The Boosting Era of Web Development


Published on

HTML5 development is a developing field nowadays as a result of the tremendous assortment of mixture and local applications that might be made utilizing it. Truth be told, it is popular in a substantial go of divisions from financial services to retail to social insurance. Developers can think of single applications that offer a ton of helpful characteristics, being greatly unpredictable in nature. A confirmation to its prevalence is that it has surpassed Flash in fame.

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

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

HTML5- The Boosting Era of Web Development

  1. 1. Content at a Glance Preface HTML5:The Platform vs. the Specification How This Works An Overview Of HTML5 & CSS3 A Platform For Web Development Backward Compatibility How HTML5 & CSS3 Boost The Web Development? 1.Improving User Interfaces 1.1 New Structural and Tag Attributes 1.2Creating User-Friendly Web Forms 2.Making Better User Interface With CSS3 2.1 Building Mobile Interface with Media Queries
  2. 2. 3. Improving Accessibility 3.1 Providing Navigation Hints with ARIA Roles 4. New Sight & Sound 4.1 Drawing On Canvas 4.2 Eye Candy 5. Future Enhancements 5.1 CSS Transitions 5.2 WebGL 5.3 Indexed Database APIs  Conclusion
  3. 3. Preface Just three months are like a year if you spend it on web. This is the pretty experience of much of the web developers. Sometime before HTML5 and CSS3 looks like far off in the way but now many companies are using this technologies. HTML5 and CSS3 is a building block for the next era of web applications. Here we are going to find about all the ways you can use HTML5 and CSS3.Before starting let’s t have a look on HTML5 and CSS3 buzzwords.
  4. 4. HTML5: The Platform vs. the Specification HTML is a specification that describes some new tags & markup, as well as some wonderful JavaScript APIs, but it’s getting caught up in whirlwind of hype and promises. In some cases pieces from the CSS3 specification such as shadow, gradients and transformations are being called “HTML.” We’ll focus on the HTML5 and CSS3 specifications themselves and how you can the techniques they describe. We’ll look into a suit of specifications that were once part of HTML5 but are in use right now on multiple platforms.
  5. 5. How This Works Here we focuses on a specific group of problems that we can solve with HTML5 and CSS3. We introduce you to specific concept and walk you through building a simple example using the concept. We are focusing on what you are using today. There are more HTML5 and CSS3 features that aren’t in widespread use yet. So let’s start your web journey with us.
  6. 6. An Overview Of HTML5 & CSS3 HTML5 and CSS3 are two new standards proposed by W3C and its working groups. It is a new era of technologies you use every day for web applications. Before we dive in deep details of HTML5 and CSS3 let’s talk about some benefits and challenges we’ll face.
  7. 7. A Platform For Web Development A lot of new features of HTML center around for creating web based applications. From more descriptive tags and better cross site and cross window communication to animations and multimedia support, developers using many HTML5 and CSS3 have a lot of new tools for better user experience and to make richer and more interactive applications on the web. Now the question is that how HTML5 and CSS3 provide advance benefits in web application? You will see how all of those unpredictable benefits you will gain. So let’s start.
  8. 8. Backward Compatibility If you have worked with HTML or XML you’ve come across the doctype declaration before. It is used to tell validators and editors what tags and attributes you can use and how the document should be formed. Lot of web browsers used it to determine how the browser will render the page. A valid doctype causes browsers to render pages in “standard mode.”
  9. 9. 1.Improving User Interfaces 1.1 New Structural and Tag Attributes I’d like to talk about a serious problem affecting many web developers today. Most of the developers affected by Divitis ,they wrap elements with extra div tags with IDs such as banner, sidebar, article, and footer-is rampant. HTML5 specification provides a cure in the form of new semantic tags that describe the content they contain. For example: <header> Defines a header region of the page or section. <footer> Defines a footer region of the page or section. <nav> Defines a navigation section of the page or section.
  10. 10. 1.2 Creating User-Friendly Web Forms You turn to Prototype or JQuery, or you roll your own controls and features using a combinations of HTML,CSS and JavaScript. Now here are the some new attribute to turn any HTML field into a user input control. For example: Email field [<input type=“email”>] Display a form field for email address. URL field [<input type=“url”>] Display a form field for URLs. Search field [<input type=“search”> Display a form field for search keywords.
  11. 11. 2.Making Better User Interface With CSS3 2.1 Building Mobile Interface with Media Queries We’ve been able to media specific style sheets .We can use media queries to determine the following: • Resolution • Orientation • Device width and height • Width and height of the browser window
  12. 12. 3. Improving Accessibility 3.1 Providing Navigation Hints with ARIA Roles HTML5’s new role attribute lets us assign “accessibility” to each element on your page..Accessibility for Rich Internet Applications (ARIA) is a specification that provides ways to improve the accessibility of websites. There are classification of roles that you can put to use now are landmark role and document role.HTML5 says that some elements have default roles and can’t be overridden.
  13. 13. 4. New Sight & Sound 4.1 Drawing On Canvas Canvas is nothing but a 2D drawing platform within the browser that uses nothing more than JavaScript and HTML with no plugins. Canvas is extensible through a JavaScript API. Now it is openly developed as a W3C specifications. There are the some feature and uses of canvas: • Canvas is bitmap system • Used for data visualization • Animated Graphics • Web applications • Games
  14. 14. 4.2 Eye Candy ONE of the first things you'll notice about the new Windows Vista operating system from Microsoft is the serious amount of eye candy that comes at you. It requires the new graphical user interface that makes better use of today's powerful graphics hardware. You need a minimum of 128MB of video memory on your 3D graphics card, 1 gigabyte of system memory and a processor running at 1 gigahertz to enjoy the show.
  15. 15. 5.Future Enhancement 5.1 CSS Transitions Interaction invitation are important to good user experience design, and CSS has supported pseudoclasses so that we can do some basic interaction cues on our elements.
  16. 16. 5.2 WebGL WebGL describes how to work with 3D objects. The WebGL specification isn’t part of HTML5, but Apple, Google, Opera, and Mozilla are part of the working group and support in their browsers.
  17. 17. 5.3 Indexed Database APIs Index Database API is a key/value store similar to the web storage APIs like localStorage and sessionStorage, but it provides methods for performing advanced queries.
  18. 18. Conclusion If you follow the progress of HTML5 and CSS3 and stay up-to-date with what’s happening, you’ll be fine. All these are not final specifications for web development anything in those could change. While Firefox, Chrome, and Safari have strong HTML5 support. But before you think too much about the future, let's start working with HTML5.