inmersión a html5
TRANSCRIPT
![Page 1: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/1.jpg)
![Page 2: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/2.jpg)
Inmersión a HTML5 y Videojuegos
Alexander Cubillos Jauregui
![Page 3: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/3.jpg)
¿ QUÉ NO ES HTML5 ?
• NO es un lenguaje de programación• NO es el remplazo de FLASH
![Page 4: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/4.jpg)
¿ QUÉ ES HTML5 ?
HTML5 ES UNA COLECCIÓN DE ESTÁNDARES PARA EL DESARROLLO Y DISEÑO DE PÁGINAS WEB.
![Page 5: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/5.jpg)
WHATWGWEB HYPERTEXT APPLICATION TECHNOLOGY
WORKING GROUP
?
![Page 6: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/6.jpg)
W3CWORLD WIDE WEB CONSORTIUM
?
![Page 7: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/7.jpg)
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.
![Page 8: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/8.jpg)
NUEVOS ELEMENTOS DE SEMÁNTICA
![Page 10: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/10.jpg)
NUEVO DOCTYPE
![Page 11: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/11.jpg)
<META ...>
![Page 12: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/12.jpg)
NO MÁS TYPE=“” EN <SCRIPT /> Y <LINK />
![Page 13: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/13.jpg)
ALGUNAS DE LAS NUEVAS ETIQUETAS
![Page 14: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/14.jpg)
• <HEADER>• <SECTION>• <ARTICLE>• <NAV>• <ASIDE>• <CANVAS>• <SVG>
• <FIGURE>• <SMALL> Redefined• <MARK>• <OUTPUT>• <AUDIO>• <VIDEO>
![Page 15: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/15.jpg)
MAQUETAR EN HTML5
![Page 16: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/16.jpg)
![Page 17: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/17.jpg)
• number• range• email• url• search• color• tel
• datetime, datetime-local, date, month, week, time
Input[Type]
![Page 18: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/18.jpg)
• autofocus• placeholder• form• required• autocomplete• pattern• dirname
• novalidate• formaction• formenctype• formmethod• formnovalidate• formtarget• contenteditable
NUEVOS ATRIBUTOS
![Page 19: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/19.jpg)
DATA ATTRIBUTE
![Page 20: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/20.jpg)
DETECTAR EL SOPORTE DE ATRIBUTOS
![Page 21: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/21.jpg)
AUDIO Y VIDEO
![Page 22: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/22.jpg)
![Page 23: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/23.jpg)
FORMATOS QUE SOPORTAN LOS NAVEGADORES MÁS USADOS DE
FORMA NATIVA
![Page 24: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/24.jpg)
AUDIO CODECS
![Page 25: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/25.jpg)
VIDEO CODECS
![Page 26: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/26.jpg)
GRÁFICAS 2D & 3D
![Page 27: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/27.jpg)
WEBGL
Es un tecnología que permite generar gráficos 3D acelerados por hardware en el navegador, sin
necesidad de instalar nuevo software
![Page 28: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/28.jpg)
<CANVAS>Es un entorno para crear imágenes dinámicas.
![Page 29: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/29.jpg)
![Page 31: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/31.jpg)
<SVG>Scalable Vector Graphics
Es un formato que te permite realizar gráficos vectoriales escalables en la web.
![Page 33: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/33.jpg)
Cascading Style Sheets level 3CSS3
http://lea.verou.me/css3-secrets/
![Page 34: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/34.jpg)
TRANSICIONES
![Page 35: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/35.jpg)
![Page 36: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/36.jpg)
ANIMACIONES
![Page 37: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/37.jpg)
![Page 38: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/38.jpg)
CSS TRANSFORMACIONES
![Page 39: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/39.jpg)
![Page 40: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/40.jpg)
VIDEOJUEGOS
![Page 41: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/41.jpg)
FRAMEWORKS
![Page 44: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/44.jpg)
¿ CON QUÉ TRABAJARHTML5 ?
![Page 45: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/45.jpg)
![Page 46: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/46.jpg)
PARA LA PLAYBOOK
![Page 47: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/47.jpg)
![Page 48: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/48.jpg)
PROGRAMAR ES MUY FÁCIL
![Page 49: Inmersión a HTML5](https://reader038.vdocuments.site/reader038/viewer/2022102323/54570d29af7959db738b6f68/html5/thumbnails/49.jpg)
PROGRAMAR ES MUY FÁCIL