All About HTML5 & CSS3, History & Advantages

download All About HTML5 & CSS3, History & Advantages

of 12

description

html5

Transcript of All About HTML5 & CSS3, History & Advantages

Landing Page

HTML5 its everywhere A must have for professional web designers and developers1What is HTML 5 - The Newest Version of HTML 4.01 & XHTML 2.0 HTML5 is a language for structuring and presenting content for the World Wide Web. Since 1990, it is the fifth revision which is still under development.

Aim: To improve the language with support for the latest multimedia while keeping it easily readable and consistently understood by computers and devices.

Features: A single markup language that can be written in either HTML or XHTML syntax. Introduced application programming interfaces (APIs) for web applications. Able to run on low-powered devices such as smart phones and tablets. New structure, elements, dynamic pages support and lots more...

HTML5 a new core technology of the Internet originally proposed by Opera, its not W3C... Hats off to the Opera Developers! You made developer life easier... From the release of HTML in 2004 by W3C, and there was no attention on what the world needs. Then a new group called WHATWG (Web Hypertext Application Technology Working Group) devoted to evolving the Web.

The HTML5 working group includes AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, and many hundreds of other vendors.

Conclusion: HTML5 is not equal to CSS3 or JavaScript APIs. HTML5 is HTML its more clear right? by all means, the next version of HTML. If you are still confused then you need to dig deeper or simply remember HTML5 ===== HTML.

Creative graphical representation about What is HTML5 at http://i43.tinypic.com/fd4thv.jpgWhat is HTML52History of HTML5 When it was born

WHATWG began work on the new standard in 2004. When W3C was focusing future developments on XHTML 2.0, and HTML 4.01 had not been updated since 2000. Hence, W3C and WHATWG are currently working together on the development of HTML5.

It was highlighted in media on April 2010 after Apple Inc's, CEO Steve Jobs issued a public letter titled "Thoughts on Flash". Stating "Flash is no longer necessary" and that "new open standards created in the mobile era, such as HTML5, will win". In November 2011 Adobe announced that it will discontinue development of Flash for mobile devices and reorient its efforts in developing tools utilizing HTML5. First Public Working Draft of the specification released on 22 January 2008. Ian Hickson of Google is the editor of HTML5. HTML5 was still at Working Draft stage and guessed that this 100% complete would occur in the year 2022 or later.

A funny presentation about The History of HTML5 at http://slidesha.re/czIhbsHistory HTML53HTML5 new elements in markup, media, canvas, form & new attributes in input

Find brief explanation about each element at http://bit.ly/du6PoB

New tags in HTML54HTML5 differences from HTML4

Comparing HTML4 & 55What are the advantages of HTML5, and why you should adopt it?

Code structure: We have new structural elements instead of div tags to create templates; the result will be a clean & tidy and more organized code. Finally a cleaner markup and improved code with improved semantics.

Richer media elements like audio and video plug-ins: You can stream audio & video without any third party plug-ins such as flash. You can create your own player controls that are fully programmable with JavaScript.

Smarter forms: Form types and elements help you that the information entered is accurate. No need to run additional scripts for checking validation. These speeds up the loading time and the user experience will be enhanced.Local data storage: The data can be accessed to support the web application and it can even be accessed when the client is disconnected for a short period of time. There are methodologies for storing data: session storage, local storage and database storage.

Good for mobile devices: The only solution to faster applications that will be accessible across all mobile phones.

Functionality is built into the browser. There are lots more to know about HTML5. Start using HTML5 in your designs right now!Advantages of HTML56Despite of numerous benefits, we have few dis-advantages some of them were:

In built scripts were in JavaScript.

No true standard from one browser to another.

Native apps run faster than HTML5 based web apps.

Native Apps:Designed to run the computer environment (machine language and OS) & that runs by itself, such as using java applet.

For achieving UI across devices that lack the resources to efficiently render heavy CSS3 animation.

Its you & of course clients still need IE6 support, 7.7% of the world still using IE6 which was released in 2001. Its almost 11 years still many who have not upgraded. Lets assume within a short period of time it reaches to 0% and developers should definitely celebrate that moment.

Dis-advantages of HTML57How to make HTML5 compatible with all browsers

IE is always in list for non compatibility. Developers spent most of the time in research & development for fixes in IE. Forget about IE6. Below is the script which makes HTML5 elements to "display:block" in IE7 & IE8

To use this script, it must be included before the element (i.e. in the ) but doesn't matter if it appears before or after the CSS - but for the sake of performance, it would make better sense to include the CSS first then this script.

Please thank @jon_neal and afarkas who made IE actually print HTML5 elements.How to make Html5 as browser compatible8HTML5 with CSS3 takes your design to another level giving rich look & feel

Many common tasks are now simplified, giving more power to HTML5 & CSS3.

HTML5 with combination of CSS3 brings new features. New features were not yet supported fully, but its a good to learn new technologies to use.

iPhone 4 rendered using HTML5 and CSS3, no images needed just HTML5 and CSS3.

It's one thing to know the theory; it's another thing to put this theory into practice. Learn by doing. Develop with Tomorrow's Standards Today.

Some of the new cool new tricks possible with CSS3:@font-face, rounded-corners, box-shadow, text-shadow, multiple-backgrounds, border-images, opacity etc...HTML5 with CSS39CSS3 for web developers

CSS3 PIE which gives CSS3 support for IE browsers, which is a .htc file.

Write a separate CSS file for IE

In this stylesheet add the same name of the selector you have written in common stylesheet and add like below:

#selector{ behavior: url(path/to/PIE.htc);}How to make CSS3 as browser compatible10Reference links for HTML5 & CSS3

W3C HTML5 website: http://www.w3.org/html/logo/

Google Initiative: http://www.html5rocks.com

Does your browser support HTML5?: http://www.html5test.com

Demos and Examples: http://www.html5demos.com

Everything about CSS3: http://www.css3.info , http://www.css3files.com , http://www.css3.com

Statistics on HTML5 & CSS3 Support: http://findmebyip.com/litmus

In general clients used to say "in my browser its not coming" with "fmbip.com" you can resolve it simply send this url "http://www.fmbip.com/get-started/" and get results.

Article: http://www.articlesbase.com/software-articles/html-html4-html5-what-next-5392284.htmlReferences11Thanking Message12