HTML5 - El futuro del diseño web
-
Upload
benjamin-arnedo -
Category
Design
-
view
2.857 -
download
2
description
Transcript of HTML5 - El futuro del diseño web
![Page 1: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/1.jpg)
jueves 24 de junio de 2010
![Page 2: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/2.jpg)
HTML5El futuro del diseño web
jueves 24 de junio de 2010
![Page 3: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/3.jpg)
jueves 24 de junio de 2010
![Page 4: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/4.jpg)
1994HTML 2
1996css1 + Javascript
1997HTML4
1998CSS2
2000XHTML1
1991HTML
TIMELINE
jueves 24 de junio de 2010
![Page 5: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/5.jpg)
2002Diseño con CSS
2005Ajax
2009HTML5
TIMELINE
jueves 24 de junio de 2010
![Page 6: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/6.jpg)
HMTL5 HTML CSS JS APIS
jueves 24 de junio de 2010
![Page 7: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/7.jpg)
HIPERTEXT MARKUP LANGUAGE
jueves 24 de junio de 2010
![Page 8: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/8.jpg)
HIPERTEXT MARKUP LANGUAGE
jueves 24 de junio de 2010
![Page 9: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/9.jpg)
W3C: PRESTAR ATENCIÓN
Ouch!!
jueves 24 de junio de 2010
![Page 10: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/10.jpg)
QUE PODEMOS HACER
‣ Nuevos tags‣ Offline data storage‣ Semantic HTML‣ Mejores forms‣ Muchas APIS JS
ñamñam!!
* sólo navegadores soportados
jueves 24 de junio de 2010
![Page 11: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/11.jpg)
1.6 MILLONES DE DE DEVELOPERS DE MACROMEDIA FLASH EN TODO EL MUNDO
jueves 24 de junio de 2010
![Page 12: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/12.jpg)
RESTO DEL MUNDO
jueves 24 de junio de 2010
![Page 13: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/13.jpg)
plopAPPLE
jueves 24 de junio de 2010
![Page 14: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/14.jpg)
Apple no mató al flashel HTML5 lo hizo
jueves 24 de junio de 2010
![Page 15: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/15.jpg)
HMTL5 HTML CSS JS APIS
jueves 24 de junio de 2010
![Page 16: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/16.jpg)
HTML
jueves 24 de junio de 2010
![Page 17: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/17.jpg)
DOCTYPE
jueves 24 de junio de 2010
![Page 18: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/18.jpg)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/
DTD/xhtml1-strict.dtd">
<!DOCTYPE html>
jueves 24 de junio de 2010
![Page 19: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/19.jpg)
<!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
jueves 24 de junio de 2010
![Page 20: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/20.jpg)
ESTRUCTURA
jueves 24 de junio de 2010
![Page 21: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/21.jpg)
ESTRUCTURA
jueves 24 de junio de 2010
![Page 22: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/22.jpg)
ESTRUCTURA
jueves 24 de junio de 2010
![Page 23: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/23.jpg)
ESTRUCTURA
jueves 24 de junio de 2010
![Page 24: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/24.jpg)
¡HTML SEMANTICO!
¡No te lo puedo creer!
jueves 24 de junio de 2010
![Page 25: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/25.jpg)
<header>
Contiene la información introductoria de cada página desde encabezados a tablas
de contenidos completas
jueves 24 de junio de 2010
![Page 26: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/26.jpg)
<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
jueves 24 de junio de 2010
![Page 27: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/27.jpg)
<section>
Representa un documento genérico o poción de una aplicación. Actúa como DIV
separando porciones del documento
jueves 24 de junio de 2010
![Page 28: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/28.jpg)
<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
jueves 24 de junio de 2010
![Page 29: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/29.jpg)
<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
jueves 24 de junio de 2010
![Page 30: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/30.jpg)
<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
jueves 24 de junio de 2010
![Page 31: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/31.jpg)
jueves 24 de junio de 2010
![Page 32: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/32.jpg)
NOVEDADES
jueves 24 de junio de 2010
![Page 33: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/33.jpg)
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' />
jueves 24 de junio de 2010
![Page 34: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/34.jpg)
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();
jueves 24 de junio de 2010
![Page 35: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/35.jpg)
Audio / Video
Juan Adobe
jueves 24 de junio de 2010
![Page 36: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/36.jpg)
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>
jueves 24 de junio de 2010
![Page 37: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/37.jpg)
SVG
Similar al Canvas. Dibujo procedural vectorial. Actualmente soportado por un gran numero de
navegadores.
jueves 24 de junio de 2010
![Page 38: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/38.jpg)
TRANSICIÓNDEL XHTML AL HTML5
jueves 24 de junio de 2010
![Page 39: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/39.jpg)
<input type="text" id="name">
<input type="text" id="name"/>
jueves 24 de junio de 2010
![Page 40: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/40.jpg)
HMTL5 HTML CSS JS APIS
jueves 24 de junio de 2010
![Page 41: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/41.jpg)
JS APIS
jueves 24 de junio de 2010
![Page 42: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/42.jpg)
POWER
jueves 24 de junio de 2010
![Page 43: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/43.jpg)
Application Programming InterfaceConjunto de reglas de una applicación
diseñadas para interactuar con otra u otras
API
jueves 24 de junio de 2010
![Page 44: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/44.jpg)
Application Programming InterfaceConjunto de reglas de una applicación
diseñadas para interactuar con otra u otras
API
POWER
jueves 24 de junio de 2010
![Page 45: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/45.jpg)
API
HTML JS
jueves 24 de junio de 2010
![Page 46: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/46.jpg)
Selectores
var el = document.getElementById('section1');el.focus();
Eh! buscame el elemento “section1” y resaltamélo padre
jueves 24 de junio de 2010
![Page 47: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/47.jpg)
Selectores
var els = document.querySelectorAll("table.test > tr > td");
Che, buscaméla a la celdita de la tabla “test” querí
jueves 24 de junio de 2010
![Page 48: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/48.jpg)
Web Storage
Ahora es posible guardar información sin disponer de una base de datos.
jueves 24 de junio de 2010
![Page 49: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/49.jpg)
Drag and Drop
Los navegadores imitan cada vez más a las aplicaciones de escritorio
jueves 24 de junio de 2010
![Page 50: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/50.jpg)
Geolocación
Con sólo apretar un botón el navegador puede determinar tu ubicación por tu IP.
jueves 24 de junio de 2010
![Page 51: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/51.jpg)
HMTL5 HTML CSS JS APIS
jueves 24 de junio de 2010
![Page 52: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/52.jpg)
CSS
jueves 24 de junio de 2010
![Page 53: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/53.jpg)
Selectores
Ahora puedo hacer filas de tablas con distintos colores, entre otras cosas.
.row:nth-child(even) {background: #dde;}
jueves 24 de junio de 2010
![Page 54: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/54.jpg)
Selectores
Negation: permite hacer selecciones negativas
:not(.box) {color: #00c;}
jueves 24 de junio de 2010
![Page 55: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/55.jpg)
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);}
jueves 24 de junio de 2010
![Page 56: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/56.jpg)
Texto
Con esto podemos ajustar el texto a un contenedor más inteligentemente
div {text-overflow: ellipsis;}
jueves 24 de junio de 2010
![Page 57: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/57.jpg)
Texto
También podemos poner el texto en columnas!
-webkit-column-count:
jueves 24 de junio de 2010
![Page 58: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/58.jpg)
QUE MAS?
‣ Filete del texto‣ Opacidad‣ Modelo de Color HSLA‣ Esquinas redondeadas‣ Gradientes‣ Sombras‣ Multiples fondos simultáneos‣ ANIMACIONES
jueves 24 de junio de 2010
![Page 59: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/59.jpg)
QUE MAS?CONTENIDO A MEDIDA
jueves 24 de junio de 2010
![Page 60: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/60.jpg)
¿FALTA MUCHO?
jueves 24 de junio de 2010
![Page 61: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/61.jpg)
SAFARI 4 WINDOWS
jueves 24 de junio de 2010
![Page 62: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/62.jpg)
FIREFOX 3,5 WINDOWS
jueves 24 de junio de 2010
![Page 63: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/63.jpg)
CHROME WINDOWS
jueves 24 de junio de 2010
![Page 64: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/64.jpg)
OPERA 10 WINDOWS
jueves 24 de junio de 2010
![Page 65: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/65.jpg)
INTERNET EXPLORER 6, 7 & 8
jueves 24 de junio de 2010
![Page 66: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/66.jpg)
INTERNET EXPLORER 6, 7 & 8
jueves 24 de junio de 2010
![Page 67: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/67.jpg)
HTTP://SLIDES.HTML5ROCKS.COM/A VER!
jueves 24 de junio de 2010
![Page 68: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/68.jpg)
YO YA EMPECÉ. ¿VOS?
jueves 24 de junio de 2010
![Page 69: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/69.jpg)
¡VAMOS BRASIL QUE GANAMOS!
jueves 24 de junio de 2010
![Page 70: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/70.jpg)
¡VAMOS ARGENTINA QUE GANAMOS!
jueves 24 de junio de 2010
![Page 71: HTML5 - El futuro del diseño web](https://reader033.fdocuments.co/reader033/viewer/2022050920/54c0c2dc4a7959f4488b45f5/html5/thumbnails/71.jpg)
¡CHAS GRACIAS!
jueves 24 de junio de 2010