Embed Size (px)
Citation preview
DISEÑADORINTERFAZFRONT-END
RICARDO ALFARO
+ Elementos semánticos
Retrocompatibilidad
Filosofía de la simpleza
¿QUE ES?+ Acceso & Performance
SEMÁNTICA
Nuevas etiquetas más representativas y semánticas
OFFLINE & STORAGE
Almacenamiento local (DB), incluso trabajando sin conexión
DEVICE ACCESS
Apps más innovadoras, utilizando el acceso a los dispositivos del equipo
CONECTIVIDAD
Eficiencia en la comunicacióncliente-servidor a través de Web Socket
MULTIMEDIA
<audio> & <video> son componentes nativos en el browser
3D & EFECTOS
SVG, Canvas, WebGL y CSS3
PERFORMANCE & INTEGRACIÓN
Mejorar la performance a través de Web Workers y XMLHttpRequest2
CSS3 STYLESHEET
Amplia gama de estilización, efectos y la mejora enriquecida de la interfaz
GEO LOCALIZACIÓNWEB STORAGEWEB SOCKETSWEB FORMSWEB GL/3D/CANVASAUDIO/VIDEODRAG AND DROPSEMANTIC LABELSNUEVOS ESTILOS
<!DOCTYPE html>DOCTYPE
<meta charset=utf-8>ENCODING
<link rel=stylesheet href=styles.css>LINKS
<script src=jquery.js></script>
<header></header>
<footer></footer>
<nav></nav>
<article></article>
<section></section> <aside></aside>
<article></article>
<figure></figure>
<figure><img src=foto.png alt=foto><figcaption>Detalle de foto
</figcaption></figure>
<audio src=sonido.mp3></audio>AUDIO
<video src=video.mp4></video>VIDEO
<video controls><source src=”video.mp4” type=”video/mp4”><source src=”video.ogv” type=”video/ogg”>
<object type=”application/x-shocwave-flash” data=”player.swf?file=video.mp4”> <param name=”video” value=” player.swf? file=video.mp4”> <a href=”video.mp4”>Descargar</a></object>
</video>
LABELS
SOPORTE
SOPORTE
¿ ?
HTML5 para navegadores antiguosHTML5 SHIV
<!--[If lt IE 9]> <script src=http://html5shim.googlecode.com/
svn/trunk/html5.js> </script><![endif]-->
HTML5 SHIVhttp://code.google.com/p/html5shim/
MODERNIZR
librería Javascript que detecta las características HTML5 y CSS3 en el navegador del usuario
?MODERNIZR
<script src="modernizr-latest.js"></script>¿CÓMO SE USA?
POLYFILLSCODIGO QUE AYUDA A REPRESENTAR FUNCIONALIDADES HTML5 QUE NO SOPORTA EL NAVEGADOR
POLYFILLSCODIGO QUE AYUDA A REPRESENTAR FUNCIONALIDADES HTML5 QUE NO SOPORTA EL NAVEGADOR
https://github.com/Modernizr/Modernizr/
wiki/HTML5-Cross-Browser-Polyfills
HTML5 Boilerplatehttp://html5boilerplate.com
Bootstraphttp://twitter.github.com/bootstrap/index.html
ALGUNOSEJEMPLOS
¡GRACIAS!¿Preguntas?
