html5 y css3 ¿imprescindibles?

21
HTML5 + CSS3 ¿Imprescindibles? Paco Fortis

Upload: binaris-escuela-digital-avanzada

Post on 22-May-2015

599 views

Category:

Technology


10 download

DESCRIPTION

Presentación empleada durante el evento celebrado en Binaris el pasado 20 de marzo de 2013.

TRANSCRIPT

Page 1: HTML5 y CSS3 ¿Imprescindibles?

HTML5 + CSS3¿Imprescindibles?

Paco Fortis

Page 2: HTML5 y CSS3 ¿Imprescindibles?

Apuntad vuestras preguntas

Evento

45 + 45

Page 3: HTML5 y CSS3 ¿Imprescindibles?

¿Por qué HTML5?

HTML 4.01

XHTML 1.0

XHTML 2.0

XHTML 5

HTML 5.1

http://www.w3.org/TR/html5/

http://www.w3.org/html/wg/drafts/html/master/Overview.html

http://www.w3.org/html/logo/

WHATWG

Page 4: HTML5 y CSS3 ¿Imprescindibles?

¿Qué se pretende conseguir con HTML5?

HTML + CSS + JavaScript - plugins

+ etiquetas - scripting

independiente

libre público

http://www.w3.org/TR/html5/

http://www.w3.org/html/wg/drafts/html/master/Overview.html

+ sencillo + rendimiento

+ compatible

+ potente

Page 5: HTML5 y CSS3 ¿Imprescindibles?

¿Qué aporta HTML5?

http://www.w3.org/TR/html5/

http://www.w3.org/html/wg/drafts/html/master/Overview.html

web semánticamejores formularios

almacenamiento offline

audiovídeo

canvas sockets web

http://www.w3.org/TR/geolocation-API/

http://www.w3.org/TR/IndexedDB/

APIs amigas:Geolocation APIIndexed Database API

Page 6: HTML5 y CSS3 ¿Imprescindibles?

http://html5test.com/

HTML5 ¿Únicamente para Internet?

Page 7: HTML5 y CSS3 ¿Imprescindibles?

Maquillando la web

<!DOCTYPE HTML><html lang="es">

<head><meta charset="utf-8" /><title>Título del sitio</title>

</head><body>

<div id="contenedor"><header id="cabecera">

<!-- Contenido de la cabecera --><nav id="menuPrincipal"><!-- Menú

principal --></nav></header><aside id="colIzq">

<!-- Contenido de la columna izquierda --></aside><div id="colCentro">

<!-- Contenido de la columna central --><article>

<!-- Artículo 1 --></article><article>

<!-- Artículo 2 --></article>

</div><footer id="pie"><!-- Contenido del pie --></footer>

</div></body>

</html>

CSS 2.1

CSS3CSS4

Page 8: HTML5 y CSS3 ¿Imprescindibles?

¿Qué aporta CSS3?

+ selectores+ unidades

colores y transparencias

Page 9: HTML5 y CSS3 ¿Imprescindibles?

¿Qué aporta CSS3?

+ propiedades

Page 10: HTML5 y CSS3 ¿Imprescindibles?

¿Qué aporta CSS3?

+ propiedades

Page 11: HTML5 y CSS3 ¿Imprescindibles?

¿Qué aporta CSS3?

+ propiedades

Page 12: HTML5 y CSS3 ¿Imprescindibles?

¿Qué aporta CSS3?

+ funciones

Page 13: HTML5 y CSS3 ¿Imprescindibles?

¿Qué aporta CSS3?

+ funciones

Page 14: HTML5 y CSS3 ¿Imprescindibles?

¿Qué aporta CSS3?

+ funciones

Page 15: HTML5 y CSS3 ¿Imprescindibles?

¿Qué aporta CSS3?

media queries 1280 x 800

Page 16: HTML5 y CSS3 ¿Imprescindibles?

¿Qué aporta CSS3?

media queries 800 x 1280

Page 17: HTML5 y CSS3 ¿Imprescindibles?

¿Qué aporta CSS3?

media queries 800 x 480

Page 18: HTML5 y CSS3 ¿Imprescindibles?

¿Qué aporta CSS3?

media queries 480 x 800

Page 19: HTML5 y CSS3 ¿Imprescindibles?

Vuestro turno

Preguntas

Page 20: HTML5 y CSS3 ¿Imprescindibles?

Gracias por estar aquí

Francisco José Fortis Morenohttps://twitter.com/fjfortis

http://www.linkedin.com/in/pacofortis