HTML5 - El futuro del diseño web

HTML5
El futuro del diseño web

jueves 24 de junio de 2010

TIMELINE
1991 1994 1996 1997 1998 2000
HTML HTML 2 css1 + Javascript HTML4 CSS2 XHTML1


TIMELINE
2002 2005 2009
Diseño con CSS Ajax HTML5


HMTL5 HTML CSS JS APIS


HIPERTEXT MARKUP LANGUAGE


Ouch!!

W3C: PRESTAR ATENCIÓN


QUE PODEMOS HACER
ñamñam!!

‣ Nuevos tags
‣ Ofﬂine data storage
‣ Semantic HTML
‣ Mejores forms
‣ Muchas APIS JS

* sólo navegadores soportados

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


RESTO DEL MUNDO


APPLE
plop


Apple no mató al flash
el 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>


EL DOCTYPE

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

<!DOCTYPE html>


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

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

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


Audio / Video

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

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

Con dos etiquetas muy simples podemos
reproducir audio y video en nuestos sitios web
sin necesidad de un reproductor externo


Audio / Video

Juan Adobe


Canvas

<canvas id="canvas" width="838" height="220"></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


SVG

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


TRANSICIÓN
DEL XHTML AL HTML5


JS APIS


POWER


API

Application Programming Interface
Conjunto de reglas de una applicación
diseñadas para interactuar con otra u otras


API

Application Programming Interface

POWER
Conjunto de reglas de una applicación
diseñadas para interactuar con otra u otras


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

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

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


Selectores

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

Negation: permite hacer selecciones negativas


Fuentes

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

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


Texto

div {text-overflow: ellipsis;}

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


Texto

-webkit-column-count:

También podemos poner el texto en
columnas!


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


A VER!
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

Recommandé

Recommandé

Contenu connexe

Dernier

Dernier (20)

En vedette

En vedette (20)

HTML5 - El futuro del diseño web