Html5
•Download as PPTX, PDF•
1 like•722 views
This document provides an overview of Internet Explorer 9 and HTML5 for developers. It discusses what HTML5 means and includes new tags. It covers the history of HTML5 and how it came to be. The presentation demonstrates several new HTML5 features such as canvas, drag and drop, local storage, and multimedia capabilities without plugins. It also discusses whether HTML5 is right for applications with limited resources or those targeting mobile audiences.
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Html5
Similar to Html5 (20)
More from Mahmoud Ghoz
Recently uploaded
Recently uploaded (20)
Html5
- 1. Internet Explorer 9 and HTML5 for Developers Presented By: Mahmoud Ghoz
- 2. About Me • My name is Mahmoud Ghoz • My Current Position is Project Leader at ITWorx • Cofounder for Qhat.NET • MCPD (Distributed Systems) and MCT
- 3. Agenda • What do we mean by HTML 5? • HTML 5 History • HTML 5 new tags
- 4. 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
- 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
- 6. 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.
- 7. History • The W3C voted to use the WHATWG’s Web Applications spec as the basis for the new version of HTML.
- 8. Main Aims • Specifying current browser behaviors that are interoperable. • Defining error handling for the first time.
- 9. Main Aims • Evolving the language for easier authoring of web applications. – DOM APIs for drag and drop – Server-sent events – Drawing – Video
- 10. Demo 1 Simple HTML 5 Page
- 11. Demo 2 HTML 5 can help you with wrong syntax
- 12. Demo 3 Let’s See what HTML 5 Can do
- 13. Demo 3
- 14. Demo 4 The new in the <a> tag
- 16. New Keywords • embed • KeyGen • Progress
- 17. Forms • <input type=email> • <input type=url> • <input type=date> • <input type=time> • <input type=month> • <input type=tel>
- 18. Forms • <input type=email required> • <input type=email multiple> • <input pattern=“[0-9][A-Z]{3}”>
- 19. Forms NO JAVA SCRIPT REQUIRED
- 20. Multimedia No need for plugin to play video and audio HTML 5 will do it for you
- 21. Demo 6 Play my ogv file
- 22. Canvas • 2D drawing • 3D drawing • Playing with pictures • Animate objects
- 23. Demo 7 Canvas
- 24. Demo 8 Canvas 3D
- 27. Demo 11 Drag and Drop
- 28. Things not covered • Offline • Geolocation • Messages, worker and sockets
- 29. Is HTML5 Right for You? Are you planning to develop an application with limited resources?
- 30. Is HTML5 Right for You? Are you planning to reach your audience on the go with devices such as smartphones and tablets?
- 31. Is HTML5 Right for You? Are you looking to reach mobile audiences, but without having to go through mobile app store ecosystems?
- 32. Questions
- 33. Thank You
Editor's Notes
- Document the undocumentedUnambiguously define how browsers and other user agents should deal with invalid markup.
- <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
- http://html5.validator.nu Open developer tool
- In 2004, the editor of the HTML5 spec, Ian Hickson, mined 1 billion web pages via the Google index, looking to see what the “real” web is made of. One of the analyses he subsequentlypublished (http://code.google.com/webstats/2005-12/classes.html) was a list of the most popular class names in those HTML documents. More recently, in 2009 the Opera MAMA crawler (see http://devfiles.myopera.com/articles/572/idlist-url.htm) looked againat class attributes in 2,148,723 randomly chosen URLs and alsoids given to elements (which the Google dataset didn’t include) in 1,806,424 URLs.
- Embed: is used to embed plugin … HTML 5 supposed to replace all the plugin but not over nightKeyGen: where you form need to send a public KeyProgress: is used to represent a progress meter to indicate the completion of a task
- There is no standard how every browser will render the controlsBrowser now is responsible to validate the input
- Attribute:Required:We also have required attribute to mark this field as mandatory. Multiple: allows the user to enter multiple email addresses.Pattern: custom validate, A part number is a digit followed by three uppercase letters.
- Let’s Play Game
- Let’s Play Game
- Let’s Play Game
- Let’s Play Game
- Geolocation: W3C, not HTML5, API that works with maps, mobile phones can locate you on the mapMessages: allow you to send message from one domain to anotherWeb workers: Threads, is a way of running a discrete block of JavaScript in a background process to the main browser.Web Sockets: is not HTML 5, -Comet- Web Sockets give you a bi-directional connection between your server and the client, the browser. This connection is also real-time and is permanently open until explicitly closed. This means that when the server wants to send your client something, that message is pushed to your browser immediately.
- HTML5 is a good fit; HTML is human readable, and there are over ten million web developers (compared to much fewer native and plug-in developers).
- HTML5 is a good fit; with HTML web-based mobile applications, your application consistently displays across mobile web browsers, including future devices.
- HTML5 is a good fit; with HTML web-based mobile applications, you don’t even need the approval of a app store to reach your audience.