HTML5 - Nivel II Semántica y multimedia

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