Html5 y otras yerbas
-
Upload
peter-concha -
Category
Documents
-
view
892 -
download
5
description
Transcript of Html5 y otras yerbas
![Page 1: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/1.jpg)
HTML5 y otras yerbas
Peter Concha Regatto
Microsoft Student Partner Jr
@PeterConchaR
Oscar Rendón
@orendon
oscarrendon.com
![Page 2: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/2.jpg)
Agenda
semántica
multimedia
css3 y estilos
html5, que? como? cuando? donde? por que?
gráficos y efectos
acceso de dispositivos
conectividad
y aun hay mas…
compatibilidad
![Page 3: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/3.jpg)
html5, que? como? cuando? donde? por que?
estándar
Clientes ricos
móviles
![Page 4: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/4.jpg)
semántica
multimedia
css3 y estilos
gráficos y efectos
acceso de dispositivos
conectividad
html5, que? como? cuando? donde? por que?
offline y almacenamiento rendimiento
La familia HTML5
![Page 5: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/5.jpg)
semántica
![Page 6: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/6.jpg)
VIEJA ESTRUCTURA
![Page 7: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/7.jpg)
NUEVA ESTRUCTURA
![Page 8: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/8.jpg)
<HEADER>
• Logo y título
• Navegación
• Varios encabezados
![Page 9: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/9.jpg)
<NAV>
• Puede ver más de uno
• Migas de pan
• Blog roll
![Page 10: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/10.jpg)
<ARTICLE>
• Artículos de blog y periódicos
• Comentarios y productos
• Sindicable
![Page 11: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/11.jpg)
<SECTION>
• Agrupa contenido semánticamente
• Sirve tanto para páginas y artículos
![Page 12: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/12.jpg)
<ASIDE>
• Sidebar
• Anuncios
![Page 13: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/13.jpg)
<FOOTER>
• Puede haber varios
• Licencias, enlaces, etc
![Page 14: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/14.jpg)
ADIOS
• Applets
• Big
• Center
• Font
• Frame
• Blink
• Marquee
![Page 15: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/15.jpg)
DEMO
semántica
![Page 16: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/16.jpg)
gráficos y efectos
![Page 17: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/17.jpg)
• WebGL
– Google, Opera, Mozilla, Apple
• CSS3
– Características 3D
• SVG
– <svg> </svg>
– Basado en XML
• Canvas
– <canvas></canvas>
– Javascript API
gráficos y efectos
![Page 18: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/18.jpg)
gráficos y efectos
DEMO
![Page 19: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/19.jpg)
multimedia
![Page 20: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/20.jpg)
<AUDIO> Y <VIDEO>
<audio src=“cancion.???”> </audio>
<video src=“video.???”> </video>
![Page 21: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/21.jpg)
ATRIBUTOS
• Autoplay: reproducción automática.
• Controls: muestra los controles de video nativos de cada navegador. No aparece por defecto.
• Poster: imagen de previsualización. Si no se especifica, el navegador coge el primer fotograma.
• Width, height: si no se especifican, se toman las del poster; si no serán 300px por 150px.
• Loop: reproduce el video en bucle.
• Preload: precarga el video.
• Src: indica la fuente del video.
![Page 22: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/22.jpg)
UN USO CORRECTO
<video controls width=“360” height=“240” poster=“poster.jpg”>
<source src=“intro.mp4” type=“video/mp4”>
<source src=“promo.mp4” type=“video/ogg”>
<p>Presentacion de la comunidad</p>
</video>
![Page 23: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/23.jpg)
GUERRA DE FORMATOS
FORMATO IE FIREFOX SAFARI CHROME OPERA
Ogg NO 3,4+ NO 5,0+ 10,5+
H264 9,0+ NO 3,0+ 5,0+
NO
WebM 9,0+ 4,0+ NO 5,0+
10,6+
![Page 24: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/24.jpg)
DEMO
multimedia
![Page 25: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/25.jpg)
acceso de dispositivos
![Page 26: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/26.jpg)
acceso de dispositivos
• Geo-lozalización GPS Dirección IP Celular WiFi
• Agnóstico al dispositivo • Interacción con el usuario
Orientación del dispositivo Eventos touch Futuro: microfono, camaras, usb, etc.
![Page 27: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/27.jpg)
acceso de dispositivos
DEMO
![Page 28: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/28.jpg)
css3 y estilos
![Page 29: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/29.jpg)
CSS3
• Nuevas posibilidades de decoración.
• Menos markup.
• Menos dependencias de javascript.
• Mayor control.
![Page 30: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/30.jpg)
SU USO
div { border-radius: 152px 304px 228px 152px; border-style: double; border-width: 42px; padding: 12px; }
<link href=“mobile.css" rel="stylesheet" media="screen and (max-width:480px)" type=“text/css" /> <link href=“netbook.css" rel="stylesheet" media="screen and (min-width:481px) and (max-width:1024px)" type="text/css" /> <link href=“laptop.css" rel="stylesheet" media="screen and (min-width:1025px)" type="text/css" />
![Page 31: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/31.jpg)
DEMO
css3 y estilos
![Page 32: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/32.jpg)
conectividad
![Page 33: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/33.jpg)
conectividad
• Websockets Comunicación entre cliente y servidor Half-duplex vs full-duplex Javascript API Cualquier puerto, incluso el 80 !
• Y que hay del servidor?
socket.io SignalR jWebSocket web-socket-ruby pywebsocket
![Page 34: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/34.jpg)
conectividad
DEMO
![Page 35: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/35.jpg)
compatibilidad
![Page 36: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/36.jpg)
SOPORTE HTML5
• Chrome
• Firefox
• Safari
• Opera
• Internet Explorer 9+
![Page 37: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/37.jpg)
¿Que podemos hacer para trabajar hoy con HTML5?.
Modernizr http://www.modernizr.com/
No se detecta HTML5.
Se detectan cualidades de HTML5.
![Page 38: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/38.jpg)
• La mejor librería de detección de caractetísticas detecta: – Todas las características principales de
HTML5
– Todas las principales características de CSS3
• Incluye HTML5 Shim para el soporte de tag semánticos
• Adopción generalizada
• Updates continuos
• Se incluye con ASP.NET MVC 3
![Page 39: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/39.jpg)
Polyfills & Shims • Que son? Normalmente JavaScript CSS y HTML y CSS
• ¿Qué permiten hacer? Proporcionan la tecnología que nosotros, los desarrolladores, esperaríamos que el navegador ofreciera nativamente. Provee características que faltan.
• ¡Cuando se utilizan? Se utilizan para generar la llamada “fallback Gracefully” o imitar una funcionalidad.
![Page 40: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/40.jpg)
MAPEO HTML5
![Page 41: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/41.jpg)
y aun hay mas…
![Page 42: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/42.jpg)
Y aun hay mas…
• Offline y Almacenamiento
– Almacenamiento local
– DB indexadas
– API para archivos
• Rendimiento e Integración
– Web Workers (Javascript en background)
– Aceleración por hardware
![Page 43: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/43.jpg)
El fututo, que sigue, que falta?
beautyoftheweb.com ietestdrive.com html5labs.com
![Page 44: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/44.jpg)
http://www.cuttherope.ie/
![Page 45: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/45.jpg)
HERRAMIENTAS • Cualquier editor y un navegador!
• SublimeText, TextMate, Notepad++, Aptana
• VS 11 Developer – Ready to Rock!! • VS 2010 SP1 – HTML5 Schema y Intellisense • WebMatrix – Incluye HTML5 default doctype
• ASP.NET MVC 3 tools update • HTML5 template para nuevos proyectos • Modernizr 1.7 incluido en nuevos proyectos
• Expression Web 4 SP1 – HTML5 Schema y Intellisense • Editor CSS preparado! • SuperPreview
![Page 46: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/46.jpg)
Recursos para el Desarrollador
• Noticias: blogs.msdn.com/IE
• Demostraciones: www.beautyoftheweb.com
• Ejemplos Técnicos: www.ietestdrive.com
• HTML5 Labs: www.html5labs.com
• cristalab.com • mejorandola.la • maestrosdelweb.com • avanet.org
• html5test.com • chromeexperiments.com • html5rocks.com
![Page 47: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/47.jpg)
PREGUNTAS
![Page 48: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/48.jpg)
CONTACTOS
AVANET
www.avanet.org
@avanet
Peter Concha R
@PeterConchaR
Oscar Rendón
@orendon
oscarrendon.com
![Page 49: Html5 y otras yerbas](https://reader031.fdocuments.net/reader031/viewer/2022013111/5484ebff5806b5b8588b470f/html5/thumbnails/49.jpg)
GRACIAS!