html5 y otras yerbas
DESCRIPTION
TRANSCRIPT
![Page 1: Html5 y otras yerbas](https://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/html5/thumbnails/1.jpg)
HTML5 y otras yerbas
Peter Concha RegattoMicrosoft Student Partner Jr
@PeterConchaROscar Rendón
@orendonoscarrendon.com
![Page 2: Html5 y otras yerbas](https://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/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://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/html5/thumbnails/3.jpg)
html5, que? como? cuando? donde? por que?
WHATWG
W3C
estándar
multimedia
pugins
códec
Web semánticaflash
Experiencia
de usuario
CSS3
JavaScript
Ecmascript 5
XHTML 2.0
Clientes ricos
móviles
Berners-Lee 1989
2004 2007
![Page 4: Html5 y otras yerbas](https://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/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://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/html5/thumbnails/5.jpg)
semántica
![Page 6: Html5 y otras yerbas](https://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/html5/thumbnails/6.jpg)
VIEJA ESTRUCTURA
![Page 7: Html5 y otras yerbas](https://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/html5/thumbnails/7.jpg)
NUEVA ESTRUCTURA
![Page 8: Html5 y otras yerbas](https://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/html5/thumbnails/8.jpg)
<HEADER>
• Logo y título• Navegación• Varios encabezados
![Page 9: Html5 y otras yerbas](https://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/html5/thumbnails/9.jpg)
<NAV>
• Puede ver más de uno• Migas de pan• Blog roll
![Page 10: Html5 y otras yerbas](https://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/html5/thumbnails/10.jpg)
<ARTICLE>
• Artículos de blog y periódicos• Comentarios y productos• Sindicable
![Page 11: Html5 y otras yerbas](https://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/html5/thumbnails/11.jpg)
<SECTION>
• Agrupa contenido semánticamente• Sirve tanto para páginas y artículos
![Page 12: Html5 y otras yerbas](https://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/html5/thumbnails/12.jpg)
<ASIDE>
• Sidebar• Anuncios
![Page 13: Html5 y otras yerbas](https://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/html5/thumbnails/13.jpg)
<FOOTER>
• Puede haber varios• Licencias, enlaces, etc
![Page 14: Html5 y otras yerbas](https://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/html5/thumbnails/14.jpg)
ADIOS
• Applets• Big• Center• Font• Frame• Blink• Marquee
![Page 15: Html5 y otras yerbas](https://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/html5/thumbnails/15.jpg)
DEMO
semántica
![Page 16: Html5 y otras yerbas](https://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/html5/thumbnails/16.jpg)
gráficos y efectos
![Page 17: Html5 y otras yerbas](https://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/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://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/html5/thumbnails/18.jpg)
gráficos y efectos
DEMO
![Page 19: Html5 y otras yerbas](https://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/html5/thumbnails/19.jpg)
multimedia
![Page 20: Html5 y otras yerbas](https://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/html5/thumbnails/20.jpg)
<AUDIO> Y <VIDEO>
<audio src=“cancion.???”> </audio>
<video src=“video.???”> </video>
![Page 21: Html5 y otras yerbas](https://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/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://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/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://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/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://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/html5/thumbnails/24.jpg)
DEMO
multimedia
![Page 25: Html5 y otras yerbas](https://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/html5/thumbnails/25.jpg)
acceso de dispositivos
![Page 26: Html5 y otras yerbas](https://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/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://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/html5/thumbnails/27.jpg)
acceso de dispositivos
DEMO
![Page 28: Html5 y otras yerbas](https://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/html5/thumbnails/28.jpg)
css3 y estilos
![Page 29: Html5 y otras yerbas](https://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/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://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/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://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/html5/thumbnails/31.jpg)
DEMO
css3 y estilos
![Page 32: Html5 y otras yerbas](https://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/html5/thumbnails/32.jpg)
conectividad
![Page 33: Html5 y otras yerbas](https://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/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://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/html5/thumbnails/34.jpg)
conectividad
DEMO
![Page 35: Html5 y otras yerbas](https://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/html5/thumbnails/35.jpg)
compatibilidad
![Page 36: Html5 y otras yerbas](https://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/html5/thumbnails/36.jpg)
SOPORTE HTML5
• Chrome• Firefox• Safari• Opera• Internet Explorer 9+
![Page 37: Html5 y otras yerbas](https://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/html5/thumbnails/37.jpg)
¿Que podemos hacer para trabajar hoy con HTML5?.
Modernizrhttp://www.modernizr.com/
No se detecta HTML5.Se detectan cualidades de
HTML5.
![Page 38: Html5 y otras yerbas](https://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/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://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/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://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/html5/thumbnails/40.jpg)
MAPEO HTML5W3C
HTML
HTM
L5Canvas 2D
ContextM
icrodataH
TML+RD
FaH
TML5 M
arkupH
TML5 D
iff from H
TML4
Polyglot Markup
Text alternatives
CSS
CSS Snapshot 2007CSS N
amespaces
CSS Paged Media
CSS Print ProfileCSS Values and U
nitsCSS Cascading and Inheritance
CSS TextCSS W
riting Modes
CSS Line Grid
CSS RubyCSS G
enerated Content for Paged Media
CSS Backgrounds and BordersCSS Fonts
CSS Basic Box Model
CSS Multi-colum
n LayoutCSS Tem
plate LayoutCSS M
edia Queries
CSS SpeechCSS Color
CSS Basic User Interface
CSS ScopingCSS G
rid PositioningCSS Flexible Box Layout
CSS Image Values
CSS 2D Transform
ationsCSS 3D
Transformations
CSS TransitionsCSS Anim
ations
Web Apps
CORS
Element TraversalFile API
Index DB
Programm
able HTTP Caching and Serving
Progress EventsSelectors API
Selectors API L2Server-Sent Events
Uniform
Messaging Policy
Web D
OM
CoreW
eb SQL D
atabaseW
eb IDL
Web Sockets APIW
eb StorageW
eb Workers
XmlH
ttpRequest
XmlH
ttpRequest L2
DO
M L1
DO
M L2 Core
DO
M L2 View
sD
OM
L2 EventsD
OM
L2 StyleD
OM
L2 Traversal and RangeD
OM
L2 HTM
LD
OM
L3 CoreD
OM
L3 EventsD
OM
L3 Load and SaveD
OM
L3 ValidationD
OM
L3 XPathD
OM
L3 Views and Form
atting
DO
M L3 Abstract Schem
as
SVG
Docum
ent StructureBasic Shapes
PathsText
Transforms
Painting, Filling, ColorScriptingStyling
Gradients and Patt
ernsSM
ILFontsFilters
Geolocation
Geolocation API
ECMA
ECMA Script
262
ECMAScript 262
![Page 41: Html5 y otras yerbas](https://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/html5/thumbnails/41.jpg)
y aun hay mas…
![Page 42: Html5 y otras yerbas](https://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/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://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/html5/thumbnails/43.jpg)
El fututo, que sigue, que falta?
Sitios Listos con
HTML5
Desarrollando más
Características
Estándares en Prueba y Desar
beautyoftheweb.com ietestdrive.com html5labs.com
IE9 IE Platform Previews
HTML5 Labs
![Page 44: Html5 y otras yerbas](https://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/html5/thumbnails/44.jpg)
http://www.cuttherope.ie/
![Page 45: Html5 y otras yerbas](https://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/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://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/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://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/html5/thumbnails/47.jpg)
PREGUNTAS
![Page 48: Html5 y otras yerbas](https://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/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://reader033.vdocuments.site/reader033/viewer/2022061212/5495467cb47959e6278b45fa/html5/thumbnails/49.jpg)
GRACIAS!