Html5 y otras yerbas
description
Transcript of Html5 y otras yerbas
HTML5 y otras yerbas
Peter Concha RegattoMicrosoft Student Partner Jr
@PeterConchaROscar Rendón
@orendonoscarrendon.com
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
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
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
semántica
VIEJA ESTRUCTURA
NUEVA ESTRUCTURA
<HEADER>
• Logo y título• Navegación• Varios encabezados
<NAV>
• Puede ver más de uno• Migas de pan• Blog roll
<ARTICLE>
• Artículos de blog y periódicos• Comentarios y productos• Sindicable
<SECTION>
• Agrupa contenido semánticamente• Sirve tanto para páginas y artículos
<ASIDE>
• Sidebar• Anuncios
<FOOTER>
• Puede haber varios• Licencias, enlaces, etc
ADIOS
• Applets• Big• Center• Font• Frame• Blink• Marquee
DEMO
semántica
gráficos y efectos
• WebGL– Google, Opera, Mozilla, Apple
• CSS3– Características 3D
• SVG– <svg> </svg>– Basado en XML
• Canvas– <canvas></canvas>– Javascript API
gráficos y efectos
gráficos y efectos
DEMO
multimedia
<AUDIO> Y <VIDEO>
<audio src=“cancion.???”> </audio>
<video src=“video.???”> </video>
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.
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>
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+
DEMO
multimedia
acceso de dispositivos
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.
acceso de dispositivos
DEMO
css3 y estilos
CSS3
• Nuevas posibilidades de decoración.• Menos markup.• Menos dependencias de javascript.• Mayor control.
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" />
DEMO
css3 y estilos
conectividad
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
conectividad
DEMO
compatibilidad
SOPORTE HTML5
• Chrome• Firefox• Safari• Opera• Internet Explorer 9+
¿Que podemos hacer para trabajar hoy con HTML5?.
Modernizrhttp://www.modernizr.com/
No se detecta HTML5.Se detectan cualidades de
HTML5.
• 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
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.
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
y aun hay mas…
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
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
http://www.cuttherope.ie/
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
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
PREGUNTAS
CONTACTOS
AVANET
www.avanet.org@avanet
Peter Concha R@PeterConchaR
Oscar Rendón@orendon
oscarrendon.com
GRACIAS!