270 likes | 364 Views
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
E N D
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 ECSharp@yahoogroups.com • 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 • SVG (Scalable Vector Graphics) 6 years old. • Web Forms 2.0 • XMLHttp-Request (XHR) 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 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 audio HTML 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