HTML5 Nivel II -‐ Semán;ca y mul;media http://www.udemy.com/html5-disenadores-ii/
Marlon Ceballos -‐ @adobexpert
Adobe Community Professional / Adobe Cer;fied Instructor
CERTIFIED INSTRUCTOR Adobe Consulting Adobe Consulting
www.xpert.co
Design Master - Web Master
CERTIFIED INSTRUCTOR
CERTIFIED INSTRUCTOR
Design Master / Web Master
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Adobe
Consulting
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Web semán0ca
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Web semán0ca • Las e;quetas HTML le indican al navegador la estructura de una página web • Si le agregamos al HTML información semán;ca, los navegadores y buscadores entenderán el contenido.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Web semán0ca • La tecnología de buscadores evoluciona constantemente • Los buscadores muestran en sus resultados la mayor can;dad de información posible • Esta información depende del marcado semán0co que realicemos al HTML. www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Nuevas e0quetas de HTML5
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
div • <div></div> – “Define una sección o división en un documento HTML o se usa para agrupar elementos” !
• Semán;camente no ;ene ningún significado • Actualmente debe usarse como úl;mo recurso cuando ningún elemento semán;co aplique.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
E0quetas de estructura • <sec;on></sec;on> – “Sección genérica de un documento o aplicación... grupo temá?co de contenido, generalmente con un encabezado...” !
• Ejemplo: capítulos, descripciones, etc.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
E0quetas de estructura • <ar;cle></ar;cle> – “Composición que puede ser independientemente reusada o distribuida” !
• Ejemplo: post de un blog, arSculo de un magazine, un widget, etc.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
E0quetas de estructura • <aside></aside> – “Sección con contenido relacionado de forma tangencial al contenido principal pero que podría considerarse separado” !
• Ejemplo: sidebars (laterales), publicidad, etc.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
E0quetas de estructura • <header></header> – “Grupo de ayudas de navegación o ayudas introductorias que generalmente con?ene encabezados de secciones. Un documento puede tener múl?ples headers”
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
E0quetas de estructura • <footer></footer> – “Representa un pie de página para la sección que precede. Generalmente con?ene información como el autor, links relacionados, copyright, etc”
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
E0quetas de estructura • <nav></nav> – “Representa una sección con vínculos de navegación (bloques mayores de navegación)”
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
E0quetas de contenido • <figure></figure> – “Contenido que opcionalmente ?ene una leyenda (cap?on)” !
• Ejemplo: ilustraciones, fotos, ejemplos de código, etc.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
E0quetas semán0cas <div<header> id=”header”> <div<nav> id=”nav”>
<section> <div>
<section> <div>
<section> <div>
<section> <div>
<aside> <div>
<section> <div>
<section> <div>
<section> <div> <div<footer> id=”footer”> www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Document  outline <header> <nav>
<section>
<section>
<section>
<section>
<aside>
<section>
<section>
<section> <footer> www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Video para web
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Historia del video en la web • RealPlayer / QuickTime / Windows Media Player (2000-‐2004) • Flash Video (2004).
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Historia del video en la web • NO Flash para iOS (2010) • NO Flash Player en móviles (2011) • Adobe anuncia su compromiso a HTML5 (2012) • NO al uso de plug-‐ins.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
La e0queta video en HTML5 • <video> </video>
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
El video como contenedor • Contenedor (formato) – Codec de video – Codec de audio
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Formatos de video para web
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
mp4 • .mp4 – Codec de video: H.264 – Codec de audio: AAC.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
mp4 • Desarrollado para ofrecer video en streaming a cualquier disposi;vo • Muy usado actualmente por su soporte, ventajas y calidad • Posee patentes las cuales requieren licencias de uso.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
ogg • .ogv – Codec de video: Theora – Codec de audio: Vorbis.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
ogg • Open Source y Free • Menor calidad que mp4.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
webm • .webm – Codec de video: VP8 (VP6 fué el códec de flv) – Codec de audio: Vorbis.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
webm • Desarrollado por Google específicamente para la web • Open Source y Free • Calidad similar a mp4.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
mp4 • Adobe Media Encoder • HandBrake.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
webm y ogg • Firefogg • Miro Video Converter.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Soporte en navegadores mp4 ogg webm <video>
Chome 4.0+ 4.0+ 6.0+
Firefox 21*+ 3.5+ 4.0+
Safari 3.2+ NO NO
Opera NO 10.5+ 10.6+
Explorer 9+ NO NO
iOS 3.2+ NO NO
4.0+
3.5+
4.0+
10.5+
9+
3.2+
Android 2.1*+ NO 2.3+ 2.3+
Total 79.28% 48.71% 55.2% 82.51%
• Información de www.caniuse.com • * Soporte parcial. www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Audio para web
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
La e0queta audio en HTML5 • <audio> </audio>
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Formatos de audio para web
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
mp3 • .mp3
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
AAC • .m4a • Básicamente el mismo mp4 pero solo con;ene audio.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
ogg • .oga o .ogg (vorbis) • Básicamente el mismo Ogg Theora pero solo audio.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
wav • .wav • Formato sin compresión (PCM) • Muy pesado para web.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Codificación de audio • Adobe Media Encoder • VLC.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Soporte de formatos de audio
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Soporte mp3 • Safari 5+ • Internet Explorer 9+ • Chrome 6+.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Soporte mp4 (AAC mp4) • Safari 5+ • Internet Explorer 9+ • Chrome 6+ » mp3 y mp4 es soportado por los mismos navegadores.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Soporte ogg/oga • Firefox 4+ • Opera 10.6+ • Chrome 6+.
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Soporte en navegadores
• Información de www.w3schools.com. www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR
Gracias
www.xpert.co Adobe
Consulting
CERTIFIED INSTRUCTOR