Web TechHnologies

for the future Web
Part I - Introduction to
HTML5
Introduction to HTML5
Rules for HTML5
Upgrading to HTML5
HTML5 Overview to new features
Browser Support for HTML5
New Elements in HTML5
Introduction to HTML5
Rules for HTML5

New features should be based on HTML,
CSS, DOM, and JavaScript
Reduce the need for external plugins (like
Flash)
More markup to replace scripting
HTML5 should be device independent
The development process should be visible
to the public
Upgrading to HTML5
Just <!DOCTYPE html>
HTML5 Overview to new

features
Browser Support for HTML5

HTML5 is not yet an official standard, and
no browsers have full HTML5 support.
But all major browsers (Safari, Chrome,
Firefox, Opera, Internet Explorer) continue
to add new HTML5 features to their latest
versions.

(cont.)

(cont.)
New Semantic/Structural
Elements
Tag
Description
<artic Defines an article

le>
<asid Defines content aside from the page
e>
content
<bdi> Isolates a part of text that might be
formatted in a different direction from
other text outside it
<com Defines a command button that a
mand user can invoke
>
<deta Defines additional details that the
ils>
user can view or hide
<sum Defines a visible heading for a
mary> <details> element
<figur Specifies self-contained content, like
e>
illustrations, diagrams, photos, code
listings, etc.
<figca Defines a caption for a <figure>
ption element
>
<foot Defines a footer for a document or
er>
section
<head Defines a header for a document or
er>
section
<hgro Groups a set of <h1> to <h6>
up>
elements when a heading has
multiple levels

(cont.)
New Media Elements
Tag
Description
<audi Defines sound content

o>
<vide Defines a video or movie
o>
<sour Defines multiple media resources for
ce>
<video> and <audio>
<emb Defines a container for an external
ed>
application or interactive content (a
plug-in)
The new <canvas> Element

<trac
k>
Tag
Defines text tracks for <video> and

<audio>
Description

(cont.)
New Form Elements
Tag
Description
<data Specifies a list of pre-defined options

list>
for input controls
<keyg Defines a key-pair generator field (for

en>
forms)
<outp Defines the result of a calculation

ut>
Removed Elements
The following HTML 4.01 elements are removed from
HTML5:
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>
PART II New Features
Video/Audio on the Web

HTML5 Drag and Drop
HTML5 Canvas
HTML5Inline SVG
HTML5Geolocation
HTML5Web Storage
HTML5Application Cache
HTML5Web Workers
HTML Server-Sent Events
HTML5Form Elements
Video/Audio on the Web

<video>
<audio>
Video on the Web

Browsers support:
HTML5 video demo
Currently, there are 3 supported video
formats for the <video> element: MP4,
WebM, and Ogg:
Browser
MP4
WebM
Ogg
Internet
Explorer 9
YES
NO
NO
Firefox 4.0 NO
YES
YES
Google
Chrome 6
YES
YES
YES
Apple
Safari 5
YES
NO
NO
HTML5 <video> - Methods,

Properties, and Events
Methods
Properties
Events
play()
currentSrc
play
pause()
currentTime
pause
load()
videoWidth
progress
canPlayType videoHeight
error
duration
timeupdate
ended
ended
error
abort
paused
empty
muted
emptied
seeking
waiting
volume
loadedmetada
ta
height
width
Audio on the Web

Browsers support:
HTML5 audio
Currently, there are 3 supported file
formats for the <audio> element: MP3,
Wav, and Ogg:
Browser
MP3
Wav
Ogg
Internet
Explorer 9
YES
NO
NO
Firefox 4.0 NO
YES
YES
Google
Chrome 6
YES
YES
YES
Apple
Safari 5
YES
YES
NO
YES
YES
Opera 10.6 NO
HTML5Drag and Drop
Browsers support:
Note:Drag and drop does not work in Safari 5.1.2.
Drag and Drop Demo

Desktop drag in, drag out (only available
in Chrome)
HTML5Canvas
Browsers support:
HTML5Geolocation
Browsers Support:
Note:Geolocation is much more accurate for devices with
GPS, like iPhone.
Geolocation demo
HTML5Web Storage
Browsers support:
Note:Internet Explorer 7 and earlier versions, do not

support web storage.
localStorage
Example
localStorage.lastname="Smith";
document.getElementById("result").innerHTML="Last name:
"+localStorage.lastname;
Local storage demo
sessionStorage
Example
sessionStorage.lastname="Smith";
document.getElementById("result").innerHTML="Last name:
"+sessionStorage.lastname;
SessionStorage Demo
HTML5 Form Elements

<input type="color" name="favcolor" />
<input type="date" name="bday" />
HTML5 Form Elements

<input type="datetime" name="bdaytime" />
<input type="email" name="usremail" />
HTML5 Form Elements

<input type="month" name="bdaymonth" />
<input type="text" x-webkit-speech />
<input type="number" name="quantity" min="1" max="5" />
HTML5 Form Elements

<input type="range" name="points" min="1" max="10" />
<input type="search" name="googlesearch" />
<input type="time" name="usr_time" />
<meter value="2" min="0" max="10">2 out of 10</meter>

<meter value="0.6">60%</meter>
HTML5 Form Elements

<progress value="22" max="100"></progress>
<input type="url" name="homepage" />
<input type="week" name="year_week" />
CSS 3 Presentation Layer

Color
Opacity (0.0 to 1.0)
RGBA Color
div { color: rgba(0,255,0,0.5) }
HSL/A Color
div { color: hsla(0,255,0,0.5) }
BACKGROUNDS
Background-size
div {background-size: 200px 100px}
Background-Image
background: url(body-top.png) top left
no-repeat,
url(body-bottom.png) bottom left norepeat,
url(body-middle.png) left repeat-y;
Borders
border-color
Border-image
Border-radius
Border-radius:10px;
border-top-right-radius:10px;
Box-shadow
Box-shadow: hoffset - voffset - blur
radius color
Box-shadow:10px 10px 10px #333;
TEXT
Text-overflow
Text-shadow
Column-width and Column-gap
@font-face
Transformation
Rotate
Transform: rotate(30deg);
Scale
Transform: Scale(0.5,2.0);
Skews
Transform: skew(-30deg);
Translate (Moves the object along

each axis)
Transform: translate(30px,5px);
Browser Prefixes
Firefox (-moz-box-shadow:)
SAFARI (-webkit -box-shadow:)
OPERA (-o-box-shadow:)
IE (-ms-box-shadow:)
PART III - References

http://slides.html5rocks.com
http://w3schools.com/html5
http://html5demos.com/
http://diveintohtml5.info
http://www.findmebyip.com/litmus
http://twitter.github.com/bootstrap/
getting-started.html#examples
Thank You!
NALLIAPPAN.G
Project Leader Web Application
Development.
Mob: 9787143151
Email: nalliappang@gmail.com

Web TechHnologies

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Web TechHnologies

Diunggah oleh

Hak Cipta:

Format Tersedia

for the future Web

Rules for HTML5

HTML5 Overview to new

Browser Support for HTML5

New Elements in HTML5

New Elements in HTML5

New Elements in HTML5

New Elements in HTML5

<artic Defines an article

New Elements in HTML5

<audi Defines sound content

The new <canvas> Element

Defines text tracks for <video> and

New Elements in HTML5

<data Specifies a list of pre-defined options

<keyg Defines a key-pair generator field (for

<outp Defines the result of a calculation

PART II New Features

Video/Audio on the Web

Video/Audio on the Web

Video on the Web

HTML5 <video> - Methods,

Audio on the Web

HTML5Drag and Drop

Drag and Drop Demo

Note:Internet Explorer 7 and earlier versions, do not

Local storage demo

HTML5 Form Elements

<input type="date" name="bday" />

HTML5 Form Elements

<input type="email" name="usremail" />

HTML5 Form Elements

<input type="text" x-webkit-speech />

<input type="number" name="quantity" min="1" max="5" />

HTML5 Form Elements

<input type="search" name="googlesearch" />

<input type="time" name="usr_time" />

<meter value="2" min="0" max="10">2 out of 10</meter>

HTML5 Form Elements

<input type="week" name="year_week" />

CSS 3 Presentation Layer

Translate (Moves the object along

PART III - References

Anda mungkin juga menyukai