HTML 5 - First Look

1. HTML 5 - First Look A Part of eTeam Knowledge Base By: Shehzad Ali 22-Sep-11

2. Markup Language a modern system for annotating a text in a way that is syntactically distinguishable from that text terminology evolved from the "marking up" of manuscripts, i.e. the revision instructions by editors omitted from the version of the text which is displayed for end-user Procedural Markup (Processing) Presentational Markup (HTML) Descriptive Markup (meta tags, xml)

3. Markup Language a modern system for annotating a text in a way that is syntactically distinguishable from that text terminology evolved from the "marking up" of manuscripts, i.e. the revision instructions by editors omitted from the version of the text which is displayed for end-user Procedural Markup (Processing) Presentational Markup (HTML) Descriptive Markup (meta tags, xml)

4. Markup Language a modern system for annotating a text in a way that is syntactically distinguishable from that text terminology evolved from the "marking up" of manuscripts, i.e. the revision instructions by editors omitted from the version of the text which is displayed for end-user Procedural Markup (Processing) Presentational Markup (HTML) Descriptive Markup (meta tags, xml)

5. Markup Language a modern system for annotating a text in a way that is syntactically distinguishable from that text terminology evolved from the "marking up" of manuscripts, i.e. the revision instructions by editors omitted from the version of the text which is displayed for end-user Procedural Markup (Processing) Presentational Markup (HTML) Descriptive Markup (meta tags, xml)

6. Markup Language a modern system for annotating a text in a way that is syntactically distinguishable from that text terminology evolved from the "marking up" of manuscripts, i.e. the revision instructions by editors omitted from the version of the text which is displayed for end-user Procedural Markup (Processing) Presentational Markup (HTML) Descriptive Markup (meta tags, xml)

7. Markup Language a modern system for annotating a text in a way that is syntactically distinguishable from that text terminology evolved from the "marking up" of manuscripts, i.e. the revision instructions by editors omitted from the version of the text which is displayed for end-user Procedural Markup (Processing) Presentational Markup (HTML) Descriptive Markup (meta tags, xml)

8. Markup Language a modern system for annotating a text in a way that is syntactically distinguishable from that text terminology evolved from the "marking up" of manuscripts, i.e. the revision instructions by editors omitted from the version of the text which is displayed for end-user Procedural Markup (Processing) Presentational Markup (HTML) Descriptive Markup (meta tags, xml)

9. SGML • SGML is a language which defines Markup languages, its a very flexible markup language framework • SGML was developed by Goldfarb in 1974 • Goldfarb hit upon the basic idea while working on a primitive document management system intended for law firms in 1969 • HTML is an application of SGML

10. HTML - Timeline • 1991, Sir Tim Berners-Lee, used SGML syntax to create HTML • First specification defined 20 elements • 1995, IETF (Internet Engineering Task Force) completed "HTML 2.0", the first HTML specification intended to be treated as a standard against which future implementations should be based • Since 1996, the HTML specifications have been maintained, with input from commercial software vendors, by the World Wide Web Consortium (W3C). • January 1997, HTML 3.2 was published as a W3C Recommendation. It was the first version developed and standardized exclusively by the W3C, as the IETF had closed its HTML Working Group in September 1996 • The last HTML specification published by the W3C is the HTML 4.01 Recommendation, published in late 1999

11. XHTML • Belongs to XML family, extends versions of HTML • 2000, After HTML4 W3C started to develop XHTML as a standard for future development • XHTML is an application of XML ,a more restrictive subset of SGML (end tag, case, quoted attributes) • therefore, XHTML documents need to be well-formed,

12. WHATWG – A New Player • Web Hypertext Application Technology Working Group is a community of people interested in evolving HTML and related technologies • The WHATWG was founded by individuals from Apple, the Mozilla Foundation and Opera Software in 2004 under the name web applications 1.0 • WHATWG was formed in response to the slow development of web standards monitored by the World Wide Web Consortium (W3C), and its decision to abandon HTML in favor of XML-based technologies • Web Hypertext Application Technology Working Group (WHATWG) began work on the new standard 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 2000 • New developments of WHATWG termed as HTML5 (next version of HTML4) among developers community • The HTML5 specification was adopted as the starting point of the work of the new HTML working group of the World Wide Web Consortium (W3C) in 2007, and issued its first public draft in 2008 • 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

13. General Rules for New Development • New features should be based on HTML, CSS, DOM, and JavaScript • Reduce the need for external plugins (like Flash) • Better error handling • More markup to replace scripting • HTML5 should be device independent • The development process should be visible to the public

14. HTML 5 • Ian Hickson of Google is the editor of HTML5 • Even though HTML5 has been well known among web developers for years, it became the topic of mainstream media in April 2010 after Apple Inc's then-CEO Steve Jobs issued a public letter titled "Thoughts on Flash“ • It was estimated that HTML5 would reach W3C Recommendation by late 2010, but as of September 2011 is still under development • Ian Hickson, editor of the HTML5 specification, expects the specification to reach the Candidate Recommendation stage during 2012 • W3C is developing a comprehensive test suite to achieve broad interoperability for the full specification by 2014, which is now the target date for Recommendation • The criterion for the specification becoming a W3C Recommendation is fully complete and fully interoperable implementations • HTML5 is still a draft

15. HTML 5 • Ian Hickson of Google is the editor of HTML5 • Even though HTML5 has been well known among web developers for years, it became the topic of mainstream media in April 2010 after Apple Inc's then-CEO Steve Jobs issued a public letter titled "Thoughts on Flash“ • it was estimated that HTML5 would reach W3C Recommendation by late 2010, but as of September 2011 is still under development • Ian Hickson, editor of the HTML5 specification, expects the specification to reach the Candidate Recommendation stage during 2012 • W3C is developing a comprehensive test suite to achieve broad interoperability for the full specification by 2014, which is now the target date for Recommendation • The criterion for the specification becoming a W3C Recommendation is fully complete and fully interoperable implementations • HTML5 is a draft still

16. HTML5 = Markup + CSS + JavaScript API

17. How it looks like HTML 4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN“ "http://www.w3.org/TR/html4/strict.dtd"> </html> <head><title>HTML</title> </head> <body><p>Hello World</p> </body> </html> HTML 5 <!DOCTYPE HTML> <html> <head> <title>HTML</title> </head> <body> <p>Hello World</p> </body> </html>

18. New Tags • article, aside, audio, bdo, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, video, wbr

19. Removed Tags • acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt

20. What else is new… • There is also a renewed emphasis on the importance of DOM scripting (e.g., JavaScript) in Web behavior • DOM scripting refers to programmatically accessing the Document Object Model (DOM) • DOM is the way of representing and interacting objects in HTML, ie Elements(tags) • A common misconception is that HTML5 can provide animation within web pages, which is untrue. Either JavaScript or CSS3 is necessary for animating HTML elements. Animation is also possible using JavaScript and HTML 4 • On 18 January 2011, the W3C introduced a logo to represent the use of or interest in HTML5, , it does not imply validity or conformance to a certain standard • There are some related technologies, which are not part of either the W3C HTML5 or the WHATWG HTML specification. The W3C publishes specifications for these separately. • Few examples of such technologies are: Geolocation, Web SQL Database, Indexed Database API, Web Storage, File API, Directories and System, File Writer

21. Let’s have a look at Video Audio Canvas Local Storage Session Storage Email Field URL Field Place Holder Attribute Pattern Attribute Required Attribute Number Field Range Field Date Field DateTime Field Search Field

22. ….Let’s have a look at Color Field Data List Field Keygen ( When the form is submitted, the private key is stored locally, and the public key is sent to the server ) Pattern Attribute Output Field Drag Drop (Firefox) Geolocation (location, google-map) Editable Contents File Reader Draw on Canvas

23. Microdata • Microdata vocabularies provide the semantics, or meaning of an Item • Microdata helps technologies such as search engines and web crawlers better understand what information is contained in a web page, providing better search results • Web developers can design a custom vocabulary or use vocabularies available on the web

24. …Microdata (without microdata) <section> Hello, my name is John Doe, I am a graduate research assistant at the University of Dreams. My friends call me Johnny. You can visit my homepage at <a href="http://www.JohnnyD.com">www.JohnnyD.com</a>. I live at 1234 Peach Drive Warner Robins, Georgia. </section>

25. …Microdata <section itemscope itemtype="http://data-vocabulary.org/Person"> Hello, my name is <span itemprop="name">John Doe</span>, I am a <span itemprop="title">graduate research assistant</span> at the <span itemprop="affiliation">University of Dreams</span>. My friends call me <span itemprop="nickname">Johnny</span>. You can visit my homepage at <a href="http://www.JohnnyD.com" itemprop="url">www.JohnnyD.com</a>. <section itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address"> I live at <span itemprop="street-address">1234 Peach Drive</span> <span itemprop="locality">Warner Robins</span> <span itemprop="region">Georgia</span>. </section> </section> Item Type: http://data-vocabulary.org/Person name = John Doe title = graduate research assistant affiliation = University of Dreams nickname = Johnny url = http://www.johnnyd.com/ address = Item(1) Item 1 Type: http://data-vocabulary.org/Address street-address = 1234 Peach Drive locality = Warner Robins region = Georgia

26. New Layout Elements Now Next

27. Current Problems Heavy processor and memory utilization Standardization

28. Our Preparation Team Discussion

29. Next Topics CSS 3 New Java Script API New Offline Databases in HTML 5

30. References • Wikipedia • W3Schools • w3.org • Google • Html5test.com