Html5 and css3

About me
 2008 – 2011

HTML
CSS

 Since 2011 JavaScript

Front-End

2

Evolution of the web
HTML HTML 4.01 Today
12 years of silence

HTML5

http://evolutionofweb.appspot.com/?hl=en 3

CSS3
Gradients Border radius Box shadow Font face

4

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
Use case A: Use case B:
1,000 clients 10,000 clients
polling every second polling every second

Use case C:
100,000 clients
polling every second

12

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


Default layout type="email"

type="url" type="tel"

16

 <input type="number" min="0"
max="10" step="2" value="6">

 <input type="range" min="0"
max="10" step="2" value="6">

17

<input type="date">
<input type="datetime">
<input type="datetime-local">
<input type="month">
<input type="week">
time datetime-local
<input type="time">

date datetime month week
18

<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

<input type="text” placeholder="search this site">

21

<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

<input type="text" autofocus />

23

<form> - validation

<input type="email">

<input type="text" required>

http://miketaylr.com/pres/html5/forms2.html

24

<canvas> - introduction
 Bitmap
 2D
 JavaScript
 Simple shapes, lines, gradients, text,
images

25

<canvas> - IE support
excanvas.js

26

<audio>, <video> - markup
<audio controls>
<source src="music.ogg" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">

</audio>

<video width="300" height="200" controls>
<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"'>


</video>

27

<audio>, <video> - browser support
Browser (H.264/AAC) (VP8/Vorbis) (Theora/Vorbis)
.MPEG-4 .WebM .Ogg
Mozilla Firefox 3.6+ a a
<video>

Opera 10.63+ a a
Google Chrome 8.0+ a a a
Apple Safari 5.0.3+ a
Microsoft IE9+ a a

Browser (MP3) (Vorbis)
.MPEG-4 .Ogg
Mozilla Firefox 3.6+ a
<audio>

Opera 10.63+ a
Google Chrome 8.0+ a a
Apple Safari 5.0.3+ a
Microsoft IE9+ a

28

Feature detect
 Detects support for
HTML5 & CSS3 features
 http://www.modernizr.com/

Do not reinvent the wheel Use Modernizr!

29

Yes, You Can Use HTML5
Today!

30

Questions & answers?

31

Html5 and css3

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (7)

Similar to Html5 and css3

Similar to Html5 and css3 (20)

Recently uploaded

Recently uploaded (20)

Html5 and css3