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

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (7)

Similar a Html5 and css3

Similar a Html5 and css3 (20)

Último

Último (20)

Html5 and css3