Mahmoud, Karar; Hussein, Mahmoud M.; Abdel-Nasser, Mohamed ...
Presented By: Mahmoud Ghoz
-
Upload
sigourney-emerson -
Category
Documents
-
view
24 -
download
2
description
Transcript of Presented By: Mahmoud Ghoz
![Page 1: Presented By: Mahmoud Ghoz](https://reader038.fdocuments.in/reader038/viewer/2022110404/56812ebe550346895d945fc2/html5/thumbnails/1.jpg)
Presented By: Mahmoud Ghoz
Internet Explorer 9 and HTML5 for Developers
![Page 2: Presented By: Mahmoud Ghoz](https://reader038.fdocuments.in/reader038/viewer/2022110404/56812ebe550346895d945fc2/html5/thumbnails/2.jpg)
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
![Page 3: Presented By: Mahmoud Ghoz](https://reader038.fdocuments.in/reader038/viewer/2022110404/56812ebe550346895d945fc2/html5/thumbnails/3.jpg)
Agenda
• What do we mean by HTML 5?• HTML 5 History• HTML 5 new tags
![Page 4: Presented By: Mahmoud Ghoz](https://reader038.fdocuments.in/reader038/viewer/2022110404/56812ebe550346895d945fc2/html5/thumbnails/4.jpg)
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
![Page 5: Presented By: Mahmoud Ghoz](https://reader038.fdocuments.in/reader038/viewer/2022110404/56812ebe550346895d945fc2/html5/thumbnails/5.jpg)
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
![Page 6: Presented By: Mahmoud Ghoz](https://reader038.fdocuments.in/reader038/viewer/2022110404/56812ebe550346895d945fc2/html5/thumbnails/6.jpg)
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.
![Page 7: Presented By: Mahmoud Ghoz](https://reader038.fdocuments.in/reader038/viewer/2022110404/56812ebe550346895d945fc2/html5/thumbnails/7.jpg)
History
• The W3C voted to use the WHATWG’s Web Applications spec as the basis for the new version of HTML.
![Page 8: Presented By: Mahmoud Ghoz](https://reader038.fdocuments.in/reader038/viewer/2022110404/56812ebe550346895d945fc2/html5/thumbnails/8.jpg)
Main Aims
• Specifying current browser behaviors that are interoperable.
• Defining error handling for the first time.
![Page 9: Presented By: Mahmoud Ghoz](https://reader038.fdocuments.in/reader038/viewer/2022110404/56812ebe550346895d945fc2/html5/thumbnails/9.jpg)
Main Aims
• Evolving the language for easier authoring of web applications.–DOM APIs for drag and drop– Server-sent events–Drawing–Video
![Page 10: Presented By: Mahmoud Ghoz](https://reader038.fdocuments.in/reader038/viewer/2022110404/56812ebe550346895d945fc2/html5/thumbnails/10.jpg)
Demo 1
Simple HTML 5 Page
![Page 11: Presented By: Mahmoud Ghoz](https://reader038.fdocuments.in/reader038/viewer/2022110404/56812ebe550346895d945fc2/html5/thumbnails/11.jpg)
Demo 2
HTML 5 can help you with wrong syntax
![Page 12: Presented By: Mahmoud Ghoz](https://reader038.fdocuments.in/reader038/viewer/2022110404/56812ebe550346895d945fc2/html5/thumbnails/12.jpg)
Demo 3
Let’s See what HTML 5 Can do
![Page 13: Presented By: Mahmoud Ghoz](https://reader038.fdocuments.in/reader038/viewer/2022110404/56812ebe550346895d945fc2/html5/thumbnails/13.jpg)
Demo 3
![Page 14: Presented By: Mahmoud Ghoz](https://reader038.fdocuments.in/reader038/viewer/2022110404/56812ebe550346895d945fc2/html5/thumbnails/14.jpg)
Demo 4
The new in the <a> tag
![Page 15: Presented By: Mahmoud Ghoz](https://reader038.fdocuments.in/reader038/viewer/2022110404/56812ebe550346895d945fc2/html5/thumbnails/15.jpg)
Demo 5
<ol start=5>
![Page 16: Presented By: Mahmoud Ghoz](https://reader038.fdocuments.in/reader038/viewer/2022110404/56812ebe550346895d945fc2/html5/thumbnails/16.jpg)
New Keywords
• embed• KeyGen• Progress
![Page 17: Presented By: Mahmoud Ghoz](https://reader038.fdocuments.in/reader038/viewer/2022110404/56812ebe550346895d945fc2/html5/thumbnails/17.jpg)
Forms
• <input type=email>• <input type=url>• <input type=date>• <input type=time>• <input type=month> • <input type=tel>
![Page 18: Presented By: Mahmoud Ghoz](https://reader038.fdocuments.in/reader038/viewer/2022110404/56812ebe550346895d945fc2/html5/thumbnails/18.jpg)
Forms
• <input type=email required> • <input type=email multiple> • <input pattern=“[0-9][A-Z]{3}”>
![Page 19: Presented By: Mahmoud Ghoz](https://reader038.fdocuments.in/reader038/viewer/2022110404/56812ebe550346895d945fc2/html5/thumbnails/19.jpg)
Forms
NO JAVA SCRIPT REQUIRED
![Page 20: Presented By: Mahmoud Ghoz](https://reader038.fdocuments.in/reader038/viewer/2022110404/56812ebe550346895d945fc2/html5/thumbnails/20.jpg)
Multimedia
No need for plugin to play video and audioHTML 5 will do it for you
![Page 21: Presented By: Mahmoud Ghoz](https://reader038.fdocuments.in/reader038/viewer/2022110404/56812ebe550346895d945fc2/html5/thumbnails/21.jpg)
Demo 6
Play my ogv file
![Page 22: Presented By: Mahmoud Ghoz](https://reader038.fdocuments.in/reader038/viewer/2022110404/56812ebe550346895d945fc2/html5/thumbnails/22.jpg)
Canvas
• 2D drawing• 3D drawing• Playing with pictures• Animate objects
![Page 23: Presented By: Mahmoud Ghoz](https://reader038.fdocuments.in/reader038/viewer/2022110404/56812ebe550346895d945fc2/html5/thumbnails/23.jpg)
Demo 7
http://www.openrise.com/lab/FlowerPower/
![Page 24: Presented By: Mahmoud Ghoz](https://reader038.fdocuments.in/reader038/viewer/2022110404/56812ebe550346895d945fc2/html5/thumbnails/24.jpg)
Demo 8
http://htmlchess.sourceforge.net/demo/example.html
![Page 25: Presented By: Mahmoud Ghoz](https://reader038.fdocuments.in/reader038/viewer/2022110404/56812ebe550346895d945fc2/html5/thumbnails/25.jpg)
Things not covered
• Data storage–Web storage–Web SQL database
• Offline• Drag and Drop• Geolocation• Messages, worker and sockets
![Page 26: Presented By: Mahmoud Ghoz](https://reader038.fdocuments.in/reader038/viewer/2022110404/56812ebe550346895d945fc2/html5/thumbnails/26.jpg)
Questions
?
![Page 27: Presented By: Mahmoud Ghoz](https://reader038.fdocuments.in/reader038/viewer/2022110404/56812ebe550346895d945fc2/html5/thumbnails/27.jpg)
Thank You