Inmersión a HTML5 y Videojuegos

Alexander Cubillos Jauregui

¿ QUÉ NO ES HTML5 ?

• NO es un lenguaje de programación• NO es el remplazo de FLASH

¿ QUÉ ES HTML5 ?

HTML5 ES UNA COLECCIÓN DE ESTÁNDARES PARA EL DESARROLLO Y DISEÑO DE PÁGINAS WEB.

WHATWGWEB HYPERTEXT APPLICATION TECHNOLOGY

WORKING GROUP

?

W3CWORLD WIDE WEB CONSORTIUM

?

ALGUNOS DE LOS OBJETIVOS DE HTML5• SOPORTAR EL CONTENIDO EXISTENTE.• SER INDEPENDIENTE DEL DISPOSITIVO.• REDUCIR LA NECESIDAD DE PLUGINS EXTERNOS

(SILVERLIGHT, FLASH, OTROS).• LAS NUEVAS CARACTERÍSTICAS DEBEN BASARSE

EN HTML, CSS, DOM Y JAVASCRIPT.• MEJOR MANEJO DE ERRORES.

NUEVOS ELEMENTOS DE SEMÁNTICA

http://goo.gl/Zxmf

NUEVO DOCTYPE

<META ...>

NO MÁS TYPE=“” EN <SCRIPT /> Y <LINK />

ALGUNAS DE LAS NUEVAS ETIQUETAS

• <HEADER>• <SECTION>• <ARTICLE>• <NAV>• <ASIDE>• <CANVAS>• <SVG>

• <FIGURE>• <SMALL> Redefined• <MARK>• <OUTPUT>• <AUDIO>• <VIDEO>

MAQUETAR EN HTML5

• number• range• email• url• search• color• tel

• datetime, datetime-local, date, month, week, time

Input[Type]

• autofocus• placeholder• form• required• autocomplete• pattern• dirname

• novalidate• formaction• formenctype• formmethod• formnovalidate• formtarget• contenteditable

NUEVOS ATRIBUTOS

DATA ATTRIBUTE

DETECTAR EL SOPORTE DE ATRIBUTOS

AUDIO Y VIDEO

FORMATOS QUE SOPORTAN LOS NAVEGADORES MÁS USADOS DE

FORMA NATIVA

AUDIO CODECS

VIDEO CODECS

GRÁFICAS 2D & 3D

WEBGL

Es un tecnología que permite generar gráficos 3D acelerados por hardware en el navegador, sin

necesidad de instalar nuevo software

<CANVAS>Es un entorno para crear imágenes dinámicas.

http://disneydigitalbooks.go.com/tron/

EJEMPLO CANVAS

<SVG>Scalable Vector Graphics

Es un formato que te permite realizar gráficos vectoriales escalables en la web.

http://www.drawastickman.com/

EJEMPLO SVG

Cascading Style Sheets level 3CSS3

http://lea.verou.me/css3-secrets/

TRANSICIONES

ANIMACIONES

CSS TRANSFORMACIONES

VIDEOJUEGOS

FRAMEWORKS

http://impactjs.com/

http://www.scirra.com/construct2

¿ CON QUÉ TRABAJARHTML5 ?

PARA LA PLAYBOOK

PROGRAMAR ES MUY FÁCIL

PROGRAMAR ES MUY FÁCIL

¿ PREGUNTAS ?Soporte@himediadigital.com

MUCHAS GRACIAS

Alexander Cubillos JaureguiSoporte: Soporte@himediadigital.com