HTML5 - El futuro del diseño web

jueves 24 de junio de 2010

HTML5El futuro del diseño web


1994HTML 2

1996css1 + Javascript

1997HTML4

1998CSS2

2000XHTML1

1991HTML

TIMELINE


2002Diseño con CSS

2005Ajax

2009HTML5

TIMELINE


HMTL5 HTML CSS JS APIS


HIPERTEXT MARKUP LANGUAGE


W3C: PRESTAR ATENCIÓN

Ouch!!


QUE PODEMOS HACER

‣ Nuevos tags‣ Offline data storage‣ Semantic HTML‣ Mejores forms‣ Muchas APIS JS

ñamñam!!

* sólo navegadores soportados


1.6 MILLONES DE DE DEVELOPERS DE MACROMEDIA FLASH EN TODO EL MUNDO


RESTO DEL MUNDO


plopAPPLE


Apple no mató al flashel HTML5 lo hizo


HTML


DOCTYPE


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/

DTD/xhtml1-strict.dtd">

<!DOCTYPE html>


http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd




<!DOCTYPE html>

EL DOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/

DTD/xhtml1-strict.dtd">

epetaculaaaaar


ESTRUCTURA


¡HTML SEMANTICO!

¡No te lo puedo creer!


<header>

Contiene la información introductoria de cada página desde encabezados a tablas

de contenidos completas


<nav>

Reservado para la sección que contiene los links a las demás páginas. No hace falta que

estar en cada menu, sólo en el principal


<section>

Representa un documento genérico o poción de una aplicación. Actúa como DIV

separando porciones del documento


<article>

Una porción de una página que es un contenido en sí. Puede ser una noticia, un post de un blog, una entrada en un foro o un artículo en un website de e-commerce


<aside>

Representa contenido relacionado a la parte principal del documento. Se lo verá

generalmente en sidebars como contenedor de “artículos relacionados”, “lista de links”. Puede usarse como Blockquote también


<footer>

Sirve para cerrar no sólo la página sino para culminar bloques de contenido también. Va a ser posible que lo encontremos varias veces

en una página


NOVEDADES


Nuevos forms

Ahora la validación de datos de un formulario es más precisa

<input type='color' /><input type='number' /><input type='email' /><input type='tel' />


Audio / Video

Con dos etiquetas muy simples podemos reproducir audio y video en nuestos sitios web

sin necesidad de un reproductor externo

<audio src="sound.mp3" controls></audio>document.getElementById("audio").muted = false;

<video src='movie.mp4' autoplay controls></video>document.getElementById("video").play();


Audio / Video

Juan Adobe


Canvas

Dibujo a base de código. Desarrollado inicialmente por apple para el webkit. Actualmente funcionando en el Dashboard del OSX. Actualmente adoptado

por otros navegadores modernos

<canvas id="canvas" width="838" height="220"></canvas>


SVG

Similar al Canvas. Dibujo procedural vectorial. Actualmente soportado por un gran numero de

navegadores.


TRANSICIÓNDEL XHTML AL HTML5


JS APIS


POWER


Application Programming InterfaceConjunto de reglas de una applicación

diseñadas para interactuar con otra u otras

API


Application Programming InterfaceConjunto de reglas de una applicación

diseñadas para interactuar con otra u otras

API

POWER


API

HTML JS


Selectores

var el = document.getElementById('section1');el.focus();

Eh! buscame el elemento “section1” y resaltamélo padre


Selectores

var els = document.querySelectorAll("table.test > tr > td");

Che, buscaméla a la celdita de la tabla “test” querí


Web Storage

Ahora es posible guardar información sin disponer de una base de datos.


Drag and Drop

Los navegadores imitan cada vez más a las aplicaciones de escritorio


Geolocación

Con sólo apretar un botón el navegador puede determinar tu ubicación por tu IP.


CSS


Selectores

Ahora puedo hacer filas de tablas con distintos colores, entre otras cosas.

.row:nth-child(even) {background: #dde;}


Selectores

Negation: permite hacer selecciones negativas

:not(.box) {color: #00c;}


Fuentes

Se pueden incrustar tipografías que no sean necesariamente las de sistemas. Diseñadores!

atentos!

@font-face {font-family: 'LeagueGothic'; src: url(LeagueGothic.otf);}


Texto

Con esto podemos ajustar el texto a un contenedor más inteligentemente

div {text-overflow: ellipsis;}


Texto

También podemos poner el texto en columnas!

-webkit-column-count:


QUE MAS?

‣ Filete del texto‣ Opacidad‣ Modelo de Color HSLA‣ Esquinas redondeadas‣ Gradientes‣ Sombras‣ Multiples fondos simultáneos‣ ANIMACIONES


QUE MAS?CONTENIDO A MEDIDA


¿FALTA MUCHO?


SAFARI 4 WINDOWS


FIREFOX 3,5 WINDOWS


CHROME WINDOWS


OPERA 10 WINDOWS


INTERNET EXPLORER 6, 7 & 8


HTTP://SLIDES.HTML5ROCKS.COM/A VER!


http://slides.html5rocks.com

http://slides.html5rocks.com

YO YA EMPECÉ. ¿VOS?


¡VAMOS BRASIL QUE GANAMOS!


¡VAMOS ARGENTINA QUE GANAMOS!


¡CHAS GRACIAS!


HTML5 - El futuro del diseño web

Design

Transcript of HTML5 - El futuro del diseño web