html5 and css3
TRANSCRIPT
Denis Platonov
1
About me
2008 – 2011
Since 2011
2
Front-End
JavaScript
CSS
HTML
Evolution of the web
http://evolutionofweb.appspot.com/?hl=en 3
12 years of silenceHTML 4.01 Today
HTML5
HTML
CSS3
4
Gradients Border radius Box shadow Font face
HTML5 is backwards compatible
<br> valid HTML5
<br /> valid HTML5
<BR> valid HTML5
<BR /> valid HTML5
<META CHARSET="UTF-8"> valid HTML5
<meta charset=utf-8> valid HTML5
<meta charset="utf-8"> valid HTML5
<meta charset="utf-8" />valid HTML5
<MeTa CHARset=utF-8> valid HTML5
5
HTML5 – keeping it simple
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtm
l1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
dir="ltr" lang="ru" xml:lang="ru">
<!DOCTYPE html>
<html lang="ru">
6
Offline data Storage - overview
Web Storage
Store key/value pairs locally
Same-origin restriction
Each origin gets 5MB of storage space
○ QUOTA_EXCEEDED_ERR exception
Indexed Database API
Web SQL Database
File API: Directories and System
7
Offline data Storage - Web Storage
//Getter
var foo = localStorage["bar"];
//Setter
localStorage["bar"] = foo;
//Getter for integer
var foo =
parseInt(localStorage["bar"]);
8
Offline web applications
<!DOCTYPE HTML>
<html manifest="/cache.manifest">
<body>
</body>
</html>
9
Offline web applications
CACHE MANIFEST
# Version 1
CACHE:
/style.css
/javascript.js
NETWORK:
/script.cgi
FALLBACK:
/ /offline.html
10
Web workers
Background JavaScript
Multiple threads
11
Web sockets
Full-duplex communication channel
Web Sockets provide an enormous
reduction in unnecessary network traffic
12
Use case A:
1,000 clients
polling every second
Use case C:
100,000 clients
polling every second
Use case B:
10,000 clients
polling every second
Geolocation
IP address
Triangulation:
Wi-Fi, GSM or GPS
http://html5demos.com/geo
13
<form>
type="text"
type="password"
type="checkbox"
type="radio"
select
type="button"
type="submit"
type="file"
textarea
14
<form> - input types
<input type="email">
<input type="url">
<input type="tel">
15
<form> - input types
16
type="email"Default layout
type="tel"type="url"
<form> - input types
<input type="number" min="0"
max="10" step="2" value="6">
<input type="range" min="0"
max="10" step="2" value="6">
17
<form> - input types
<input type="date">
<input type="datetime">
<input type="datetime-local">
<input type="month">
<input type="week">
<input type="time">
18
date datetime month week
time datetime-local
<form> - input types
<input type="search">
<input type="color">
19
<form> - Placeholder text
<input type="text“
onblur="if (this.value == '') {this.value
= 'search this site';}“
onfocus="if(this.value == 'search this
site') {this.value = '';}“
value="search this site">
20
<form> - Placeholder text
21
<input type="text” placeholder="search this site">
<form> - datalist
<input type="search" list="search-
suggestions"/>
<datalist id="search-suggestions">
<option label="DM"
value="Depeche Mode">
<option label="Moz"
value="Morrissey">
<option label="NO"
value="New Order">
<option label="TC"
value="The Cure">
</datalist>
22
<form> - autofocus
23
<input type="text" autofocus />
<form> - validation
24
http://miketaylr.com/pres/html5/forms2.html
<input type="email">
<input type="text" required>
<canvas> - introduction
Bitmap
2D
JavaScript
Simple shapes, lines, gradients, text,
images
25
<canvas> - IE support
26
excan
vas.js
<audio>, <video> - markup<audio controls>
</audio>
27
<source src="music.ogg" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
<video width="300" height="200" controls>
</video>
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="video.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>
<!-- Flash fallback (flowplayer.org) -->
<!-- Flash fallback (flowplayer.org) -->
<audio>, <video> - browser support
28
<vid
eo
>
Browser (H.264/AAC)
.MPEG-4
(VP8/Vorbis)
.WebM
(Theora/Vorbis)
.Ogg
Mozilla Firefox 3.6+ a a
Opera 10.63+ a a
Google Chrome 8.0+ a a a
Apple Safari 5.0.3+ a
Microsoft IE9+ a a
<au
dio
>
Browser (MP3)
.MPEG-4
(Vorbis)
.Ogg
Mozilla Firefox 3.6+ a
Opera 10.63+ a
Google Chrome 8.0+ a a
Apple Safari 5.0.3+ a
Microsoft IE9+ a
Feature detect
Do not reinvent the wheel Use Modernizr!
Detects support for
HTML5 & CSS3 features
http://www.modernizr.com/
29
30
Yes, You Can Use HTML5
Today!
Questions & answers?
31
32