Post on 16-Apr-2017
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
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.
<SVG>Scalable Vector Graphics
Es un formato que te permite realizar gráficos vectoriales escalables en la web.
Cascading Style Sheets level 3CSS3
http://lea.verou.me/css3-secrets/
TRANSICIONES
ANIMACIONES
CSS TRANSFORMACIONES
VIDEOJUEGOS
FRAMEWORKS
¿ CON QUÉ TRABAJARHTML5 ?
PARA LA PLAYBOOK
PROGRAMAR ES MUY FÁCIL
PROGRAMAR ES MUY FÁCIL
MUCHAS GRACIAS
Alexander Cubillos JaureguiSoporte: Soporte@himediadigital.com