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

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

Embed Size (px)

Citation preview

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

HTML 5 - First Look

A Part of eTeam Knowledge BaseBy: Shehzad Ali

22-Sep-11

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

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

Presentational Markup

(HTML)

Procedural Markup

(Processing)

Descriptive Markup(meta tags, xml)

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

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

Presentational Markup

(HTML)

Procedural Markup

(Processing)

Descriptive Markup(meta tags, xml)

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

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

Presentational Markup

(HTML)

Procedural Markup

(Processing)

Descriptive Markup(meta tags, xml)

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

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

Presentational Markup

(HTML)

Procedural Markup

(Processing)

Descriptive Markup(meta tags, xml)

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

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

Presentational Markup

(HTML)

Procedural Markup

(Processing)

Descriptive Markup(meta tags, xml)

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

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

Presentational Markup

(HTML)

Procedural Markup

(Processing)

Descriptive Markup(meta tags, xml)

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

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

Presentational Markup

(HTML)

Procedural Markup

(Processing)

Descriptive Markup(meta tags, xml)

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

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

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

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

Page 11: HTML 5 - First Look A Part of eTeam Knowledge Base By: Shehzad Ali 22-Sep-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,

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

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

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

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

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

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

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

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 draftstill

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

HTML5 = Markup + CSS + JavaScript API

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

How it looks likeHTML 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>

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

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

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

Removed Tags

• acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt

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

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

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

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

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

….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

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

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

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

…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>

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

…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

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

New Layout ElementsNow Next

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

Current Problems

• Heavy processor and memory utilization• Standardization

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

Our Preparation

Team Discussion

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

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

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

References

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

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