HTML5 Seminar

Arya MirInternet και Εφαρμογές Web

12 Φεβ 2012 (πριν από 5 χρόνια και 6 μήνες)

625 εμφανίσεις

Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
HTML 5
Jishnu Mohan
Dept.of IT,MESCE
Guide:Prof.C.K Raju
October 19,2010
1/26
HTML 5
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
Title
Outline
1 Title
2 Introduction
3 Comparison Between HTML 4 and HTML 5
4 Tags
5 JavaScript API
Web SQL Database
Geolocation
6 CSS
7 Advantages
8 Current Problems
9 Conclusion
2/26
HTML 5
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
Title
Outline
1 Title
2 Introduction
3 Comparison Between HTML 4 and HTML 5
4 Tags
5 JavaScript API
Web SQL Database
Geolocation
6 CSS
7 Advantages
8 Current Problems
9 Conclusion
2/26
HTML 5
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
Title
Outline
1 Title
2 Introduction
3 Comparison Between HTML 4 and HTML 5
4 Tags
5 JavaScript API
Web SQL Database
Geolocation
6 CSS
7 Advantages
8 Current Problems
9 Conclusion
2/26
HTML 5
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
Title
Outline
1 Title
2 Introduction
3 Comparison Between HTML 4 and HTML 5
4 Tags
5 JavaScript API
Web SQL Database
Geolocation
6 CSS
7 Advantages
8 Current Problems
9 Conclusion
2/26
HTML 5
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
Title
Outline
1 Title
2 Introduction
3 Comparison Between HTML 4 and HTML 5
4 Tags
5 JavaScript API
Web SQL Database
Geolocation
6 CSS
7 Advantages
8 Current Problems
9 Conclusion
2/26
HTML 5
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
Title
Outline
1 Title
2 Introduction
3 Comparison Between HTML 4 and HTML 5
4 Tags
5 JavaScript API
Web SQL Database
Geolocation
6 CSS
7 Advantages
8 Current Problems
9 Conclusion
2/26
HTML 5
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
Title
Outline
1 Title
2 Introduction
3 Comparison Between HTML 4 and HTML 5
4 Tags
5 JavaScript API
Web SQL Database
Geolocation
6 CSS
7 Advantages
8 Current Problems
9 Conclusion
2/26
HTML 5
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
Title
Outline
1 Title
2 Introduction
3 Comparison Between HTML 4 and HTML 5
4 Tags
5 JavaScript API
Web SQL Database
Geolocation
6 CSS
7 Advantages
8 Current Problems
9 Conclusion
2/26
HTML 5
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
Title
Outline
1 Title
2 Introduction
3 Comparison Between HTML 4 and HTML 5
4 Tags
5 JavaScript API
Web SQL Database
Geolocation
6 CSS
7 Advantages
8 Current Problems
9 Conclusion
2/26
HTML 5
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
WHATWG
Web Hypertext Application Technology Working Group
3/26
HTML 5
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
4/26
HTML 5
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
Introduction
History of HTML
1991 HTML
1994 HTML 2
1995 HTML 3
1996 CSS + JavaScript
1997 HTML 3.2
1998 HTML 4,CSS 2
2000 XHTML 1
2002 Tableless Web Design
2005 AJAX
2008 HTML 5 Working Draft
5/26
HTML 5
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
Introduction
History of HTML
1991 HTML
1994 HTML 2
1995 HTML 3
1996 CSS + JavaScript
1997 HTML 3.2
1998 HTML 4,CSS 2
2000 XHTML 1
2002 Tableless Web Design
2005 AJAX
2008 HTML 5 Working Draft
5/26
HTML 5
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
Introduction
History of HTML
1991 HTML
1994 HTML 2
1995 HTML 3
1996 CSS + JavaScript
1997 HTML 3.2
1998 HTML 4,CSS 2
2000 XHTML 1
2002 Tableless Web Design
2005 AJAX
2008 HTML 5 Working Draft
5/26
HTML 5
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
Introduction
History of HTML
1991 HTML
1994 HTML 2
1995 HTML 3
1996 CSS + JavaScript
1997 HTML 3.2
1998 HTML 4,CSS 2
2000 XHTML 1
2002 Tableless Web Design
2005 AJAX
2008 HTML 5 Working Draft
5/26
HTML 5
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
Introduction
History of HTML
1991 HTML
1994 HTML 2
1995 HTML 3
1996 CSS + JavaScript
1997 HTML 3.2
1998 HTML 4,CSS 2
2000 XHTML 1
2002 Tableless Web Design
2005 AJAX
2008 HTML 5 Working Draft
5/26
HTML 5
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
Introduction
History of HTML
1991 HTML
1994 HTML 2
1995 HTML 3
1996 CSS + JavaScript
1997 HTML 3.2
1998 HTML 4,CSS 2
2000 XHTML 1
2002 Tableless Web Design
2005 AJAX
2008 HTML 5 Working Draft
5/26
HTML 5
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
Introduction
History of HTML
1991 HTML
1994 HTML 2
1995 HTML 3
1996 CSS + JavaScript
1997 HTML 3.2
1998 HTML 4,CSS 2
2000 XHTML 1
2002 Tableless Web Design
2005 AJAX
2008 HTML 5 Working Draft
5/26
HTML 5
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
Introduction
History of HTML
1991 HTML
1994 HTML 2
1995 HTML 3
1996 CSS + JavaScript
1997 HTML 3.2
1998 HTML 4,CSS 2
2000 XHTML 1
2002 Tableless Web Design
2005 AJAX
2008 HTML 5 Working Draft
5/26
HTML 5
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
Introduction
History of HTML
1991 HTML
1994 HTML 2
1995 HTML 3
1996 CSS + JavaScript
1997 HTML 3.2
1998 HTML 4,CSS 2
2000 XHTML 1
2002 Tableless Web Design
2005 AJAX
2008 HTML 5 Working Draft
5/26
HTML 5
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
Introduction
History of HTML
1991 HTML
1994 HTML 2
1995 HTML 3
1996 CSS + JavaScript
1997 HTML 3.2
1998 HTML 4,CSS 2
2000 XHTML 1
2002 Tableless Web Design
2005 AJAX
2008 HTML 5 Working Draft
5/26
HTML 5
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
HTML 5  HTML + CSS + JavaScript API
6/26
HTML 5
Comparison Between HTML 4 and HTML 5
Outline
1 Title
2 Introduction
3 Comparison Between HTML 4 and HTML 5
4 Tags
5 JavaScript API
Web SQL Database
Geolocation
6 CSS
7 Advantages
8 Current Problems
9 Conclusion
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
Comparison Between HTML 4 and HTML 5
HTML 4
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>HTML</title>
</head>
<body>
<p>Hello World</p>
</body>
7/26
HTML 5
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
Comparison Between HTML 4 and HTML 5
HTML 5 Minified
<!DOCTYPE html>
<title>HTML</title>
<p>Hello World</p>
8/26
HTML 5
Tags
Outline
1 Title
2 Introduction
3 Comparison Between HTML 4 and HTML 5
4 Tags
5 JavaScript API
Web SQL Database
Geolocation
6 CSS
7 Advantages
8 Current Problems
9 Conclusion
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
Tags
Removed Tags
width
height
size
<u>
<strike>
cellpadding
valign
<basefont>
<font>
<center>
9/26
HTML 5
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
Tags
New Tags
header
nav
aside
article
section
footer‘
video
canvas
time
10/26
HTML 5
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
11/26
HTML 5
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
12/26
HTML 5
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
Tags
Video and Audio
<video src="x.mp4"controls autobuffer></video>
<audio src="sound.mp3"controls></audio>
Example
http://youtube.com/html5
13/26
HTML 5
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
Tags
Link Relations
<link rel="icon"href="/favicon.ico"/>
<a rel="archives"href="http://myblog.com/archives">
old posts</a>
<a rel="external"href="http://notmysite.com">
tutorial</a>
<a rel="license"href="http://licenseurl.org">
license</a>
<a rel="nofollow"href="http://notmysite.com/sample">
wannabe</a>
14/26
HTML 5
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
Tags
Micro Data
My name is <span itemprop="name">Neil</span>.
Our band is called <span itemprop="band">Blah</span>.
I am <span itemprop="nationality">Indian</span>.</p>
15/26
HTML 5
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
Tags
Canvas
Canvas,Canvas 3D (WebGL)
Example
http://www.3dtin.com
16/26
HTML 5
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
Tags
SVG
<html>
<svg>
<circle id="myCircle"class="important"cx="50%"
cy="50%"r="100"
fill="url(#myGradient)"
onmousedown="alert('hello');"/>
</svg>
</html>
17/26
HTML 5
JavaScript API
Outline
1 Title
2 Introduction
3 Comparison Between HTML 4 and HTML 5
4 Tags
5 JavaScript API
Web SQL Database
Geolocation
6 CSS
7 Advantages
8 Current Problems
9 Conclusion
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
JavaScript API
JavaScript API
Client Side Storage (Web SQL Database,App Cache,Web
Storage)
Communication (Web Sockets,Worker Workers)
Desktop experience (Notifications,Drag and Drop API)
Geolocation
18/26
HTML 5
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
JavaScript API
Web SQL Database
var db = window.openDatabase("Database Name",
"Database Version");
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM test",[],
successCallback,errorCallback);
});
19/26
HTML 5
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
JavaScript API
Geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var options = { position:new google.maps.LatLng(lat,lng) }
var marker = new google.maps.Marker(options);
marker.setMap(map);
});
}
20/26
HTML 5
CSS
Outline
1 Title
2 Introduction
3 Comparison Between HTML 4 and HTML 5
4 Tags
5 JavaScript API
Web SQL Database
Geolocation
6 CSS
7 Advantages
8 Current Problems
9 Conclusion
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
CSS
CSS 3:New Features
FontFace
Text wrapping
Columns
Text Stroke
Opacity
Rounded Corners
Gradients
Shadows
Animations
21/26
HTML 5
Advantages
Outline
1 Title
2 Introduction
3 Comparison Between HTML 4 and HTML 5
4 Tags
5 JavaScript API
Web SQL Database
Geolocation
6 CSS
7 Advantages
8 Current Problems
9 Conclusion
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
Advantages
Advantages
No need to depend on proprietary technologies
Less webpage size compared to HTML 4
Faster when compared to HTML 4 + JavaScript
Common platform for all webpages
22/26
HTML 5
Current Problems
Outline
1 Title
2 Introduction
3 Comparison Between HTML 4 and HTML 5
4 Tags
5 JavaScript API
Web SQL Database
Geolocation
6 CSS
7 Advantages
8 Current Problems
9 Conclusion
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
Current Problems
Current Problems
Heavy processor and memory utilisation
Standardisation
23/26
HTML 5
Conclusion
Outline
1 Title
2 Introduction
3 Comparison Between HTML 4 and HTML 5
4 Tags
5 JavaScript API
Web SQL Database
Geolocation
6 CSS
7 Advantages
8 Current Problems
9 Conclusion
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
Conclusion
24/26
HTML 5
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
Conclusion
Reference
W3C Working Draft
dev.w3c.org/html5
WHATWG
http://whatwg.org/html5,
irc.freenode.net#whatwg
Wikipedia
25/26
HTML 5
Title
Introduction
Comparison Between HTML 4 and HTML 5
Tags
JavaScript API
CSS
Advantages
Current Problems
Conclusion
Thank You!
jishnu7@gmail.com
http://blog.thecodecracker.com
This document is created using L
A
T
E
X
26/26
HTML 5