presented by: mahmoud ghoz
DESCRIPTION
Presented By: Mahmoud Ghoz. Internet Explorer 9 and HTML5 for Developers. About Me. My name is Mahmoud Ghoz My Current Position is Project Leader at ITWorx MCPD (Distributed Systems) and MCT Community activity Co-founder for Agile Egypt A.K.A. ASGE Co-founder for MS3arab - PowerPoint PPT PresentationTRANSCRIPT
Presented By: Mahmoud Ghoz
Internet Explorer 9 and HTML5 for Developers
About Me
• My name is Mahmoud Ghoz• My Current Position is Project Leader at ITWorx• MCPD (Distributed Systems) and MCT• Community activity– Co-founder for Agile Egypt A.K.A. ASGE– Co-founder for MS3arab–My Blog Ghoz.NET –My DL is [email protected]
• Project under construction–Bel3arabi
Agenda
• What do we mean by HTML 5?• HTML 5 History• HTML 5 new tags
What do we mean by HTML 5?
Add all new web technology into a box labeled HTML 5
Web Forms 2.0 XMLHttp-Request (XHR)
SVG (Scalable Vector Graphics) 6 years old.
HTML 5
History
• It will help you understand why some aspects of HTML5 are as they are.
• And hopefully pre-empt some of those “EIH? Why did they design it like that?” moments
History
• In 1998, the W3C decided that they would not continue to evolve HTML.
• HTML was frozen at version 4.01.• WHATWG (Web Hypertext Application
Technology Working Group) see otherwise.• WHATWG is working since 2004.• In 2006 the W3C decided that they had perhaps
been over-optimistic in expecting the world to move to XML.
History
• The W3C voted to use the WHATWG’s Web Applications spec as the basis for the new version of HTML.
Main Aims
• Specifying current browser behaviors that are interoperable.
• Defining error handling for the first time.
Main Aims
• Evolving the language for easier authoring of web applications.–DOM APIs for drag and drop– Server-sent events–Drawing–Video
Demo 1
Simple HTML 5 Page
Demo 2
HTML 5 can help you with wrong syntax
Demo 3
Let’s See what HTML 5 Can do
Demo 3
Demo 4
The new in the <a> tag
Demo 5
<ol start=5>
New Keywords
• embed• KeyGen• Progress
Forms
• <input type=email>• <input type=url>• <input type=date>• <input type=time>• <input type=month> • <input type=tel>
Forms
• <input type=email required> • <input type=email multiple> • <input pattern=“[0-9][A-Z]{3}”>
Forms
NO JAVA SCRIPT REQUIRED
Multimedia
No need for plugin to play video and audioHTML 5 will do it for you
Demo 6
Play my ogv file
Canvas
• 2D drawing• 3D drawing• Playing with pictures• Animate objects
Demo 7
http://www.openrise.com/lab/FlowerPower/
Demo 8
http://htmlchess.sourceforge.net/demo/example.html
Things not covered
• Data storage–Web storage–Web SQL database
• Offline• Drag and Drop• Geolocation• Messages, worker and sockets
Questions
?
Thank You