html5 - el futuro del diseño web
Post on 22-Jan-2015
2.844 Views
Preview:
DESCRIPTION
TRANSCRIPT
jueves 24 de junio de 2010
HTML5El futuro del diseño web
jueves 24 de junio de 2010
jueves 24 de junio de 2010
1994HTML 2
1996css1 + Javascript
1997HTML4
1998CSS2
2000XHTML1
1991HTML
TIMELINE
jueves 24 de junio de 2010
2002Diseño con CSS
2005Ajax
2009HTML5
TIMELINE
jueves 24 de junio de 2010
HMTL5 HTML CSS JS APIS
jueves 24 de junio de 2010
HIPERTEXT MARKUP LANGUAGE
jueves 24 de junio de 2010
HIPERTEXT MARKUP LANGUAGE
jueves 24 de junio de 2010
W3C: PRESTAR ATENCIÓN
Ouch!!
jueves 24 de junio de 2010
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
1.6 MILLONES DE DE DEVELOPERS DE MACROMEDIA FLASH EN TODO EL MUNDO
jueves 24 de junio de 2010
RESTO DEL MUNDO
jueves 24 de junio de 2010
plopAPPLE
jueves 24 de junio de 2010
Apple no mató al flashel HTML5 lo hizo
jueves 24 de junio de 2010
HMTL5 HTML CSS JS APIS
jueves 24 de junio de 2010
HTML
jueves 24 de junio de 2010
DOCTYPE
jueves 24 de junio de 2010
<!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
<!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
ESTRUCTURA
jueves 24 de junio de 2010
ESTRUCTURA
jueves 24 de junio de 2010
ESTRUCTURA
jueves 24 de junio de 2010
ESTRUCTURA
jueves 24 de junio de 2010
¡HTML SEMANTICO!
¡No te lo puedo creer!
jueves 24 de junio de 2010
<header>
Contiene la información introductoria de cada página desde encabezados a tablas
de contenidos completas
jueves 24 de junio de 2010
<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
<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
<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
<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
<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
jueves 24 de junio de 2010
NOVEDADES
jueves 24 de junio de 2010
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
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
Audio / Video
Juan Adobe
jueves 24 de junio de 2010
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
SVG
Similar al Canvas. Dibujo procedural vectorial. Actualmente soportado por un gran numero de
navegadores.
jueves 24 de junio de 2010
TRANSICIÓNDEL XHTML AL HTML5
jueves 24 de junio de 2010
<input type="text" id="name">
<input type="text" id="name"/>
jueves 24 de junio de 2010
HMTL5 HTML CSS JS APIS
jueves 24 de junio de 2010
JS APIS
jueves 24 de junio de 2010
POWER
jueves 24 de junio de 2010
Application Programming InterfaceConjunto de reglas de una applicación
diseñadas para interactuar con otra u otras
API
jueves 24 de junio de 2010
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
API
HTML JS
jueves 24 de junio de 2010
Selectores
var el = document.getElementById('section1');el.focus();
Eh! buscame el elemento “section1” y resaltamélo padre
jueves 24 de junio de 2010
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
Web Storage
Ahora es posible guardar información sin disponer de una base de datos.
jueves 24 de junio de 2010
Drag and Drop
Los navegadores imitan cada vez más a las aplicaciones de escritorio
jueves 24 de junio de 2010
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
HMTL5 HTML CSS JS APIS
jueves 24 de junio de 2010
CSS
jueves 24 de junio de 2010
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
Selectores
Negation: permite hacer selecciones negativas
:not(.box) {color: #00c;}
jueves 24 de junio de 2010
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
Texto
Con esto podemos ajustar el texto a un contenedor más inteligentemente
div {text-overflow: ellipsis;}
jueves 24 de junio de 2010
Texto
También podemos poner el texto en columnas!
-webkit-column-count:
jueves 24 de junio de 2010
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
QUE MAS?CONTENIDO A MEDIDA
jueves 24 de junio de 2010
¿FALTA MUCHO?
jueves 24 de junio de 2010
SAFARI 4 WINDOWS
jueves 24 de junio de 2010
FIREFOX 3,5 WINDOWS
jueves 24 de junio de 2010
CHROME WINDOWS
jueves 24 de junio de 2010
OPERA 10 WINDOWS
jueves 24 de junio de 2010
INTERNET EXPLORER 6, 7 & 8
jueves 24 de junio de 2010
INTERNET EXPLORER 6, 7 & 8
jueves 24 de junio de 2010
HTTP://SLIDES.HTML5ROCKS.COM/A VER!
jueves 24 de junio de 2010
YO YA EMPECÉ. ¿VOS?
jueves 24 de junio de 2010
¡VAMOS BRASIL QUE GANAMOS!
jueves 24 de junio de 2010
¡VAMOS ARGENTINA QUE GANAMOS!
jueves 24 de junio de 2010
¡CHAS GRACIAS!
jueves 24 de junio de 2010
top related