SlideShare a Scribd company logo
1 of 16
Download to read offline
TSU. Erick Aguila Martínez
TSU. Erick Aguila Martínez
Agenda HTML 5
• Soporte
• ¿Por qué usar HTML 5?
• ¿Cómo usar HTML 5?
• Componentes
• API´s
• Novedades
• Simplificar
• Dudas, preguntas o aclaraciones
HTML 5
¿Qué significa?
Hyper Text Markup Language en su versión 5
¿Qué es?
Es el lenguaje de marcado de hipertexto básico de World Wide
Web.
• La primer publicación fue lanzada en 2008
• La publicación Living Standart fue lanzada en 2012
• La publicación final y recomendada fue lanzada en 2014
HTML 5 Soporte
HTML 5 cuenta con el soporte para los navegadores modernos
• Mozilla
• Safari
• Opera
• Google Chrome
• Internet Explorer 8.0+
¿Porqué usar HTML 5?
HTML es un lenguaje unificado para web, móvil y desarrollo de
videojuegos.
Puede ejecutarse en todas las plataformas
Windows 8, Windows phone, iOS, Android, Web.
¿Cómo usar HTML 5?
Para crear una aplicación con HTML 5 completa y funcional necesitamos
de 3 componentes.
Componentes
HTML 5 es quien define la estructura básica del proyecto.
<header>																																				</header>
<footer>																																			</footer>
<nav>																																									</nav>
<article>																
</article>
<seccion>																
</seccion>
<aside>	
</aside>
Componentes
CSS3 es quien cuida el estilo y la presentación de la interface de
usuario.
Componentes
JavaScript es quien hace que las cosas sucedan (la mayoría)
todo en segundo plano (backend).
API´s
Interfaz de programación de aplicaciones (IPA) o API del ingles
application programming interface.
Son el conjunto de subrutinas, funciones o procedimientos que ofrece
cierta biblioteca para ser utilizado por otro software.
API´s
HTML 5 implementa las siguientes API´s
• Geolocalización
• Drag and Drop
• Local Storage
• App Cache
• Web Workers
• SSE
Novedades
HTML 5 incluye nuevas etiquetas y nuevos componentes para ser
utilizadas en sitios web
• Contenido multimedia Audio/Video (sin plugins)
• Animaciones con estilo Adobe Flash (sin Adobe Flash)
• Almacenamiento de datos (Local Storage)
• Efectos de texto (Animación)
Novedades
HTML 5 además de agregar una gran cantidad de API´s de tipos
contenido, diferentes efectos y combinaciones maravillosas con
frameworks como BOOTSTRAP, FUNDATION, SEMANTIC UI
MATERIALIZE CSS simplifico las etiquetas de HTML 4.
Teniendo un código más sencillo y pequeño.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>titulo</title>
</head>
<body>
Contenido ...
</body>
</html>
<!DOCTYPE html PUBLIC "-
//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=UTF-
8">
<title>titulo</title>
</head>
<body>
Contenido …
</body>
</html>
Simplificar HTML 4.0 à HTML 5
Conclusión / Resumen
En resumen
HTML 5 el lenguaje de marcado de hipertexto en version 5 incluye
nuevas APIs y novedades para varios navegadores, trabajando
en conjuto con otras tecnologias y frameworks.
Termino con la conclusión de que:
HTML 5 llego para mejorar la www, dirigiendola a posibilidades
infinitas, es decir que nos proporcina una facilidad para crear
sitios web, juegos, aplicaciones moviles de una manera
simplificada y sencilla.
Dudas preguntas o aclaraciones.

More Related Content

What's hot

What's hot (20)

Html
HtmlHtml
Html
 
Sitio 1196353748625921 3
Sitio 1196353748625921 3Sitio 1196353748625921 3
Sitio 1196353748625921 3
 
Curso FPE Diseño Web. Módulo 2. El HTML
Curso FPE Diseño Web. Módulo 2. El HTMLCurso FPE Diseño Web. Módulo 2. El HTML
Curso FPE Diseño Web. Módulo 2. El HTML
 
Fundamentos de html
Fundamentos de htmlFundamentos de html
Fundamentos de html
 
1.6.2. Lenguajes de Programación - Unidad 2
1.6.2. Lenguajes de Programación - Unidad 21.6.2. Lenguajes de Programación - Unidad 2
1.6.2. Lenguajes de Programación - Unidad 2
 
Sitio
SitioSitio
Sitio
 
Sitio
SitioSitio
Sitio
 
Introducción a html
Introducción a htmlIntroducción a html
Introducción a html
 
El código html
El código htmlEl código html
El código html
 
Manual html
Manual htmlManual html
Manual html
 
El lenguaje de la web
El lenguaje de la webEl lenguaje de la web
El lenguaje de la web
 
Etiquetas para estructurar texto HTML5 - 2 parte
Etiquetas para estructurar texto HTML5 - 2 parteEtiquetas para estructurar texto HTML5 - 2 parte
Etiquetas para estructurar texto HTML5 - 2 parte
 
Clase 1 periodo II html
Clase 1 periodo II  htmlClase 1 periodo II  html
Clase 1 periodo II html
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Introducion a HTML5
Introducion a HTML5Introducion a HTML5
Introducion a HTML5
 
Producto 3
Producto 3Producto 3
Producto 3
 
Hacer una pagina web con HTML
Hacer una pagina web con HTMLHacer una pagina web con HTML
Hacer una pagina web con HTML
 
Html
HtmlHtml
Html
 
Etiquetas para estructurar texto en HTML - 4 parte
Etiquetas para estructurar texto en HTML - 4 parteEtiquetas para estructurar texto en HTML - 4 parte
Etiquetas para estructurar texto en HTML - 4 parte
 
Una Página WEB
Una Página WEBUna Página WEB
Una Página WEB
 

Viewers also liked

52309 cm 9161_nss_sd_review_web_only
52309 cm 9161_nss_sd_review_web_only52309 cm 9161_nss_sd_review_web_only
52309 cm 9161_nss_sd_review_web_only
chrisseth
 

Viewers also liked (15)

JAULA VIRTUAL INFATIL
JAULA VIRTUAL INFATILJAULA VIRTUAL INFATIL
JAULA VIRTUAL INFATIL
 
Taller - cuento El Guardian de la Orilla
Taller - cuento El Guardian de la OrillaTaller - cuento El Guardian de la Orilla
Taller - cuento El Guardian de la Orilla
 
Dien tu-tuong-tu
Dien tu-tuong-tuDien tu-tuong-tu
Dien tu-tuong-tu
 
Diagramas
DiagramasDiagramas
Diagramas
 
LA DANZA
LA DANZALA DANZA
LA DANZA
 
Demchyshyn. Presentation for Ukr Gas Investment Forum
Demchyshyn. Presentation for Ukr Gas Investment ForumDemchyshyn. Presentation for Ukr Gas Investment Forum
Demchyshyn. Presentation for Ukr Gas Investment Forum
 
marwa ibrahim
marwa ibrahimmarwa ibrahim
marwa ibrahim
 
стронговська ми діти неньки одної
стронговська ми діти неньки одноїстронговська ми діти неньки одної
стронговська ми діти неньки одної
 
52309 cm 9161_nss_sd_review_web_only
52309 cm 9161_nss_sd_review_web_only52309 cm 9161_nss_sd_review_web_only
52309 cm 9161_nss_sd_review_web_only
 
Vacation Rental
Vacation RentalVacation Rental
Vacation Rental
 
Reported speech
Reported speechReported speech
Reported speech
 
Intb3, contreras,zapata,herrera,sosa,filidor
Intb3, contreras,zapata,herrera,sosa,filidorIntb3, contreras,zapata,herrera,sosa,filidor
Intb3, contreras,zapata,herrera,sosa,filidor
 
Alexander Cartwright
Alexander CartwrightAlexander Cartwright
Alexander Cartwright
 
Les 5 attentes des sportifs en matière de sécurité
Les 5 attentes des sportifs en matière de sécuritéLes 5 attentes des sportifs en matière de sécurité
Les 5 attentes des sportifs en matière de sécurité
 
10 Cokelat Ini Punya Bentuk Unik Yang Bikin Hari Valentine Makin Spesial!
10 Cokelat Ini Punya Bentuk Unik Yang Bikin Hari Valentine Makin Spesial!10 Cokelat Ini Punya Bentuk Unik Yang Bikin Hari Valentine Makin Spesial!
10 Cokelat Ini Punya Bentuk Unik Yang Bikin Hari Valentine Makin Spesial!
 

Similar to Html 5 (20)

Html5
Html5Html5
Html5
 
HTML5
HTML5HTML5
HTML5
 
Html 5
Html 5Html 5
Html 5
 
Html 5 (2)
Html 5 (2)Html 5 (2)
Html 5 (2)
 
Html 5
Html 5Html 5
Html 5
 
Html 5
Html 5Html 5
Html 5
 
Html 5 (5)
Html 5 (5)Html 5 (5)
Html 5 (5)
 
Html 5
Html 5Html 5
Html 5
 
Html 5
Html 5Html 5
Html 5
 
Html 5 (1)
Html 5 (1)Html 5 (1)
Html 5 (1)
 
Html 5 (1)
Html 5 (1)Html 5 (1)
Html 5 (1)
 
Semana 2 Arquitectura web y HTML 5
Semana 2   Arquitectura web y HTML 5Semana 2   Arquitectura web y HTML 5
Semana 2 Arquitectura web y HTML 5
 
HTML5 y CSS3
HTML5 y CSS3HTML5 y CSS3
HTML5 y CSS3
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
Que es html 5
Que es html 5Que es html 5
Que es html 5
 
HTML5
HTML5HTML5
HTML5
 
html5
html5html5
html5
 
JS Patterns Applied to a Real World Example
JS Patterns Applied to a Real World ExampleJS Patterns Applied to a Real World Example
JS Patterns Applied to a Real World Example
 

More from Erick Aguila Martínez

More from Erick Aguila Martínez (20)

Compilado de signos vitales.pdf
Compilado de signos vitales.pdfCompilado de signos vitales.pdf
Compilado de signos vitales.pdf
 
OPQRST.pdf
OPQRST.pdfOPQRST.pdf
OPQRST.pdf
 
SAMPLE.pdf
SAMPLE.pdfSAMPLE.pdf
SAMPLE.pdf
 
Componentes android
Componentes androidComponentes android
Componentes android
 
Test driven development
Test driven developmentTest driven development
Test driven development
 
Notificaciones android
Notificaciones androidNotificaciones android
Notificaciones android
 
Machine learning
Machine learningMachine learning
Machine learning
 
Marco de trabajo scrum
Marco de trabajo scrumMarco de trabajo scrum
Marco de trabajo scrum
 
Android mvp
Android mvpAndroid mvp
Android mvp
 
Versionamiento de software
Versionamiento de softwareVersionamiento de software
Versionamiento de software
 
¿Qué es una interface en java?
¿Qué es una interface en java?¿Qué es una interface en java?
¿Qué es una interface en java?
 
Expresiones regulares
Expresiones regularesExpresiones regulares
Expresiones regulares
 
Cadena de valor
Cadena de valorCadena de valor
Cadena de valor
 
Manual replicación transaccional
Manual replicación transaccionalManual replicación transaccional
Manual replicación transaccional
 
Manual replicación instantanea
Manual replicación instantaneaManual replicación instantanea
Manual replicación instantanea
 
Manual de fragmentación vertical
Manual de fragmentación vertical Manual de fragmentación vertical
Manual de fragmentación vertical
 
Manual de fragmentación mixta
Manual de fragmentación mixtaManual de fragmentación mixta
Manual de fragmentación mixta
 
Manual de fragmentación horizontal
Manual de fragmentación horizontalManual de fragmentación horizontal
Manual de fragmentación horizontal
 
Ecuaciones diferenciales
Ecuaciones diferencialesEcuaciones diferenciales
Ecuaciones diferenciales
 
Mitigando ataques espias
Mitigando ataques espiasMitigando ataques espias
Mitigando ataques espias
 

Html 5

  • 1. TSU. Erick Aguila Martínez
  • 2. TSU. Erick Aguila Martínez Agenda HTML 5 • Soporte • ¿Por qué usar HTML 5? • ¿Cómo usar HTML 5? • Componentes • API´s • Novedades • Simplificar • Dudas, preguntas o aclaraciones
  • 3. HTML 5 ¿Qué significa? Hyper Text Markup Language en su versión 5 ¿Qué es? Es el lenguaje de marcado de hipertexto básico de World Wide Web. • La primer publicación fue lanzada en 2008 • La publicación Living Standart fue lanzada en 2012 • La publicación final y recomendada fue lanzada en 2014
  • 4. HTML 5 Soporte HTML 5 cuenta con el soporte para los navegadores modernos • Mozilla • Safari • Opera • Google Chrome • Internet Explorer 8.0+
  • 5. ¿Porqué usar HTML 5? HTML es un lenguaje unificado para web, móvil y desarrollo de videojuegos. Puede ejecutarse en todas las plataformas Windows 8, Windows phone, iOS, Android, Web.
  • 6. ¿Cómo usar HTML 5? Para crear una aplicación con HTML 5 completa y funcional necesitamos de 3 componentes.
  • 7. Componentes HTML 5 es quien define la estructura básica del proyecto. <header> </header> <footer> </footer> <nav> </nav> <article> </article> <seccion> </seccion> <aside> </aside>
  • 8. Componentes CSS3 es quien cuida el estilo y la presentación de la interface de usuario.
  • 9. Componentes JavaScript es quien hace que las cosas sucedan (la mayoría) todo en segundo plano (backend).
  • 10. API´s Interfaz de programación de aplicaciones (IPA) o API del ingles application programming interface. Son el conjunto de subrutinas, funciones o procedimientos que ofrece cierta biblioteca para ser utilizado por otro software.
  • 11. API´s HTML 5 implementa las siguientes API´s • Geolocalización • Drag and Drop • Local Storage • App Cache • Web Workers • SSE
  • 12. Novedades HTML 5 incluye nuevas etiquetas y nuevos componentes para ser utilizadas en sitios web • Contenido multimedia Audio/Video (sin plugins) • Animaciones con estilo Adobe Flash (sin Adobe Flash) • Almacenamiento de datos (Local Storage) • Efectos de texto (Animación)
  • 13. Novedades HTML 5 además de agregar una gran cantidad de API´s de tipos contenido, diferentes efectos y combinaciones maravillosas con frameworks como BOOTSTRAP, FUNDATION, SEMANTIC UI MATERIALIZE CSS simplifico las etiquetas de HTML 4. Teniendo un código más sencillo y pequeño.
  • 14. <!doctype html> <html> <head> <meta charset="UTF-8"> <title>titulo</title> </head> <body> Contenido ... </body> </html> <!DOCTYPE html PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF- 8"> <title>titulo</title> </head> <body> Contenido … </body> </html> Simplificar HTML 4.0 à HTML 5
  • 15. Conclusión / Resumen En resumen HTML 5 el lenguaje de marcado de hipertexto en version 5 incluye nuevas APIs y novedades para varios navegadores, trabajando en conjuto con otras tecnologias y frameworks. Termino con la conclusión de que: HTML 5 llego para mejorar la www, dirigiendola a posibilidades infinitas, es decir que nos proporcina una facilidad para crear sitios web, juegos, aplicaciones moviles de una manera simplificada y sencilla.
  • 16. Dudas preguntas o aclaraciones.