Upload
shravan-kumar-kasagoni
View
1.020
Download
1
Tags:
Embed Size (px)
DESCRIPTION
HTML5
Citation preview
I Love HTML5
Buildin
g Nex
t Gen
erat
ion W
eb
Applicat
ions
Who Am I?Shravan Kumar KasagoniTechnical Fellow @ Thomson ReutersMicrosoft MVP – ASP.NET & IIS
http://theshravan.net@techieshravan
Rough Timeline of Web Technologies
1991HTML
1994HTML 2
1996CSS 1 +
JavaScript
1997HTML 4
1998CSS 2
2000XHTML 1
2002 Tableless
Design
2005AJAX
2009HTML 5
2022
What is HTML 5?
HTML 5 != HTMLHTML 5 IS NOT JUST
HTML
Just a marketing message
HTML5 is...
the future of the web
still under development
a huge spec
The “map” of HTML5
W3C
HTML
HTM
L5C
anvas 2
D C
onte
xt
Micro
data
HTM
L+R
DFa
HTM
L5 M
arku
pH
TM
L5 D
iff fro
m H
TM
L4Po
lyglo
t Marku
pTe
xt a
ltern
ativ
es
CSS
CS
S S
nap
shot 2
007
CS
S N
am
esp
ace
sC
SS
Paged M
edia
CS
S P
rint P
rofile
CS
S V
alu
es a
nd
Un
its
CS
S C
asca
din
g a
nd
In
herita
nce
CS
S Te
xt
CS
S W
riting M
od
es
CS
S Lin
e G
ridC
SS
Rub
y
CS
S G
en
era
ted
Con
ten
t for Pa
ged
M
ed
ia
CS
S B
ack
gro
und
s and
B
ord
ers
CS
S Fo
nts
CS
S B
asic B
ox M
od
el
CS
S M
ulti-co
lum
n La
yout
CS
S Te
mp
late
Layou
tC
SS
Med
ia Q
uerie
sC
SS
Sp
eech
CS
S C
olo
rC
SS
Basic U
ser In
terfa
ce
CS
S S
cop
ing
CS
S G
rid Po
sition
ing
CS
S Fle
xib
le B
ox La
you
tC
SS
Imag
e V
alu
es
CS
S 2
D Tra
nsfo
rmatio
ns
CS
S 3
D Tra
nsfo
rmatio
ns
CS
S Tra
nsitio
ns
CS
S A
nim
atio
ns
Web Apps
CO
RS
Ele
men
t Traversa
lFile
API
Index D
B
Pro
gra
mm
ab
le H
TTP C
ach
ing
an
d
Serv
ing
Pro
gre
ss Even
tsS
ele
ctors A
PI
Sele
ctors A
PI L2
Serv
er-S
ent E
vents
Unifo
rm M
essa
gin
g
Policy
Web
DO
M C
ore
Web
SQ
L Data
base
Web
IDL
Web
Socke
ts API
Web
Sto
rag
eW
eb
Worke
rsX
mlH
ttpR
eq
uest
Xm
lHttp
Req
uest L2
DO
M L1
DO
M L2
Core
DO
M L2
Vie
ws
DO
M L2
Even
tsD
OM
L2 S
tyle
DO
M L2
Traversa
l an
d
Rang
e
DO
M L2
HTM
LD
OM
L3 C
ore
DO
M L3
Even
tsD
OM
L3 Lo
ad
an
d S
ave
DO
M L3
Valid
atio
nD
OM
L3 X
Path
DO
M L3
Vie
ws a
nd
Form
attin
g
DO
M L3
Abstra
ct S
chem
as
SVG
Docu
men
t Stru
cture
Basic S
hapes
Path
sTe
xt
Tran
sform
sPain
ting, Fillin
g, C
olo
rS
criptin
gS
tylin
gG
radie
nts a
nd P
atte
rns
SM
ILFo
nts
Filters
Geolo
catio
nG
eolo
catio
n A
PI
ECMA
ECMA Script
262
EC
MA
Scrip
t 26
2
Specification lifecycle
Last call Call to implement
First Public Working Draft Working Draft
Candidate Recommendatio
n
Proposed Recommendatio
n
Recommendation
HTML5
HTMLECMA
Script 5CSS 3
JS API’S +
etc.
What’s New Markup – HTML
New Markup Elementsarticle figcaption progress
aside footer ruby
bdi header rt
command hgroup rp
details mark section
summary meter time
figure nav wbr
http://w3schools.com/html5/default.asp
New Media Elementsaudio For multimedia content, sounds, music or
other audio streams
video For video content, such as a movie clip or other video streams
source For media resources for media elements, defined inside video or audio elements
embed For embedded content, such as a plug-in
track For text tracks used in mediaplayers
The Canvas Element
<canvas></canvas>
http://w3schools.com/html5/default.asp
New Form Elements
datalist A list of options for input values
keygen Generate keys to authenticate users
outputFor different types of output, such as output written by a script
http://w3schools.com/html5/default.asp
New Input Type Attribute Valuestel week
search time
url datetime-local
email number
datetime range
date color
month placeholder
http://w3schools.com/html5/default.asp
Video Formats and Browser SupportCurrently supported video formats : MP4, WebM, 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
Opera 10.6 NO YES YES
SVG Basics
XML-based
• Scriptable, extensible, easily editable• Easy to apply CSS styles
Vector graphics
• Resizable without degradation• Vector images are composed of shapes instead of pixels
Compression
• Fast download
Easy debugging
• It is just XML!
Scalable Vector Graphics (SVG)• Support for:• Full DOM access to SVG elements• Document structure, scripting, styling, paths, shapes, colors,
transforms, gradients, patterns, masking, clipping, markers, linking and views
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"> <rect fill="red" x="20" y="20" width="100" height="75" /> <rect fill="blue" x="50" y="50" width="100" height="75" /></svg>
SVG or Canvas
Characteristic SVG Canvas
When to use Highly detailed drawing, charts
Programmatic rendering, games
Drawing Mode By Runtime By Application
DOM Support Each SVG element part of DOM
<CANVAS> part of the DOM
Animation Manipulating objects in the DOM
Using direct scripting in canvas
GPU acceleration
Yes Yes
Performance Best for larger surface and/or small # of objects
Best for smaller surface and/or large # of objects
Modification Tag, Script & CSS Script only
CSS3
CSS3
• 2nd largest spec in “HTML5”• Major revision to CSS 2.1• CSS 3
Borders & ColorsBackgrounds & ShadowsWOFF Media queriesSelectorsTransforms
CSS3 Borders
• CSS3 Borders• Rounded corners with the border-radius property
div.top { border-radius: 152px 304px 228px 152px; border-style: double; border-width: 42px; padding: 12px;}
CSS3 Colors
• CSS3 Colors & Transparency• Alpha color with rgba() and hsla() color functions• Transparency control with the opacity property• Full support for CSS3 color keywords
div.top { background-color: rgba(155,0,155,0.5)}div.bottom { background-color: hsla(0,100%,50%,0.2);}
CSS3 Shadows
• CSS3 Shadows• box-shadow property on block elements• Inset & Multiple shadows
div{…box-shadow: 20px 20px 20px hsla(0,100%,50%,0.2);
}
div{…box-shadow: 20px 20px 20px hsla(0,100%,50%,0.2), -20px -20px 20px hsla(180,50%,50%,0.8);
}
CSS3 Backgrounds
• CSS3 Backgrounds• Multiple background images per element• Comma separated values
div{
background-image: url("images/1.jpg"), url("images/2.jpg"), url("images/3.jpg");background-position: 90px 90px, 60px 60px, 30px 30px;
}
WOFF Fonts & @font-face
CSS3 Media Queries
• Selectively style page based on properties of the display media
<link href=“mobile.css" rel="stylesheet" media="screen and (max-width:480px)" type="text/css"/>
<link href=“netbook.css" rel="stylesheet" media="screen and (min-width:481px) and (max- width: 1024px)" type="text/css" />
<link href=“laptop.css" rel="stylesheet" media="screen and (min-width:1025px)" type="text/css" />
CSS Selectors
• Dynamic Styling • Style elements based on parameters
such as:• Pattern matching: rounded borders for all jpg images • Element location: 1st paragraph• Many kinds of selectors:• Type selectors: all H1 elements• Attribute selectors: all autoplay videos
CSS3 2D Transforms
• CSS3 2D Transforms• Matrix• Translate• Scale• Rotate• Skew
34
div { -ms-transform: scale(2, 2) rotate(30deg);}
http://theshravan.net | @techieshravan
Thank you