HTML5

GRUPO 6

DIW - 2° DAW

Eva Gutiérrez Nicolás Rincón Rodríguez Víctor Arenas David Cavia González

USO DE ESTILOS

8. Bibliografía

7. Conclusiones

6. Ventajas y limitaciones

5. Ejemplos prácticos

4. Etiquetas principales

3. Definición y características

2. Historia de HTML

1. Introducción a HTML 5

Índice de contenidos

INTRODUCCIÓNHTML5

Actualmente HTML5 es fundamental en el desarrollo de aplicaciones web, debido a su capacidad de soportar contenido multimedia sin necesidad de complementos adicionales, a su compatibilidad con dispositivos móviles, y a su enfoque en la experiencia de usuario para que sea rica y accesible. También impulsa la estandarización, lo que fomenta la innovación y la reducción de dependencias sobre tecnologías propietarias, además tambien mejora la experiencia de usuario, ya que permite crear aplicaciones web más interactivas, dinámicas y con capacidades que antes se encontraban limitadas a software de escritorio.

Importancia:

HTML5: Introducción

HTML5 es la última versión del lenguaje estándar para la creación de las páginas web, este ha sido diseñado para estructurar y mostrar contenido en la web. Desde su lanzamiento ha influenciado la forma en la que los desarrolladores diseñan las web, añadiendo la capacidad de integrar elementos multimedia avanzados y mejorando la compatibilidad entre distintos tipos de dispositivos y navegadores.

Comprender la historia de HTML5 (origen y evolución) para concienciar sobre el impacto que tiene en el desarrollo web actual.

Analizar las ventajas, limitaciones y aplicaciones prácticas en proyectos web actuales.

Identificar las principales etiquetas y funcionalidades con las que cuenta HTML5.

Objetivos del trabajo

HISTORIA DE HTML

HTML: Creado en 1991 por Tim Berners-Lee. Evoluciones clave: HTML 2.0 (1995), HTML 3.2 (1997), HTML 4.01 (1999). Separación de contenido (HTML) y diseño (CSS). XHTML: Versión estricta basada en XML (2000). Mayor rigor en el código, pero poco adoptado por su complejidad.

Historia de HTML5

ANTECEDENTES DE HTML y XHTML

HTML5: Desarrollo

Inicio: Comenzó en 2004 por WHATWG como alternativa a XHTML; W3C se unió en 2008. Objetivos principales:

• Mejorar la semántica con nuevas etiquetas (<article>, <section>, <header>).

• Soporte nativo para multimedia con <audio> y <video>, eliminando la necesidad de Flash.
• Introducir APIs avanzadas, como <canvas> para gráficos, geolocalización, y almacenamiento local (localStorage).
• Fomentar el diseño adaptativo, optimizado para dispositivos móviles y la web moderna.

Publicación oficial: En octubre de 2014, HTML5 fue adoptado como estándar por el W3C, transformando el desarrollo web.

Impacto Histórico:

HTML5 ha marcado un antes y un después en la historia del desarrollo web. Su aparición va más allá de ser una actualización del lenguaje HTML, ya que este fue una respuesta a las necesidades emergentes de un mundo cada vez más digitalizado y dependiente de los servicios web. HTML5 tuvo impacto en la sociedad, economía, cultura y tecnología.HTML5 democratizó el acceso y la creación al contenido digital. A través de la eliminación de dependencias a tecnologías propietarias, facilito que más personas y empresas fueran capaces de desarrollar y consumir contenido de calidad sin barreras tecnológicas.

HTML5 influyó en la innovación tecnológica, ya que se integró con otras tecnologías como CSS, JavaScript y APIs nativas.-HTML5 no solo resolvió los problemas del pasado, sino que también ha sentado las bases para el desarrollo del futuro.Al ser un estándar abierto, promueve el ecosistema inclusivo y sostenible.

HTML5 también tuvo un impacto significativo en la industria tecnológica y en la economía digital, ya que este redujo costos debido a que permitió prescindir de complementos como Flash, también impulso la economía móvil ya que surgió el desarrollo de aplicaciones web progresivas lo que facilito la expansión de servicios web en dispositivos de bajo costo, y por último también transformo el comercio electrónico debido a su capacidad de crear experiencias de usuario más dinámicas y personalizadas.

Impacto Histórico:

DEFINICIÓN Y CARACTERÍSTICAS

• Nuevas etiquetas semánticas:

Concepto básico:

• El HTML5 es un estándar que sirve para definir la estructura, el diseño y el contenido de una página web.
• Además, es la última versión de la tecnología HTML, cuyas siglas corresponden a “HyperText Markup Language”.

características:

La <audio>etiqueta contiene una o más <source>etiquetas con distintas fuentes de audio. El navegador elegirá la primera fuente que admita.

La <video> etiqueta contiene una o más <source>etiquetas con distintas fuentes de vídeo. El navegador elegirá la primera fuente que admita.

• Nuevas etiquetas para manejar contenido multimedia sin necesidad de plugins:

- <audio>: para reproducir archivos de audio. - <video>: para reproducir archivos de video.

• Soporte para subtítulos y pistas mediante <track>.

• Mejor soporte multimedia:

CARACTERÍSTICAS

CARACTERÍSTICAS

• <canvas>: permite dibujar gráficos en 2D y 3D directamente en la página web, mediante scripts.
• Soporte para gráficos vectoriales escalables (SVG), mediante la etiqueta <svg> que define un contenedor para estos.

• Gráficos y animaciones avanzados:

CARACTERÍSTICAS

• Nuevos tipos de entrada como:

- date, email, tel, url, number, etc.

• Nuevos atributos para validación y personalización:

- placeholder, required, pattern, min, max, etc.

• Mejoras en formularios:

CARACTERÍSTICAS

HTML5 incorpora herramientas avanzadas para mejorar la accesibilidad, como la posibilidad de añadir subtítulos y descripciones a contenido de audio y video mediante la etiqueta <track>. Estas funciones permiten que personas con discapacidades auditivas o visuales puedan interactuar y disfrutar del contenido web de manera más inclusiva, promoviendo una experiencia más equitativa para todos los usuarios.

• Accesibilidad mejorada:

HTML5 soporta de manera nativa el diseño web responsivo, adaptándose a diferentes tamaños de pantalla. Esto mejora la accesibilidad y la usabilidad, asegurando que el contenido sea legible y funcional tanto en computadoras de escritorio como en smartphones y tablets.

• Diseño compatible con dispositivos móviles:

Etiquetas principales HTML5

<header> Representa el encabezado de una página o sección. Contiene títulos, logotipos o menús de navegación. <main> Contiene el contenido principal del documento, único en cada página. <section> Divide contenido en secciones temáticas. <footer> Representa el pie de página de un documento o sección.Incluye información como derechos de autor o enlaces a políticas. <article> Representa contenido autónomo, como artículos o publicaciones.

ETIQUETAS SEMÁNTICAS

Estas etiquetas proporcionan significado al contenido, facilitando la accesibilidad y el SEO.

<form> Contenedor para campos de entrada y botones. <input> Permite capturar datos mediante diversos tipos. <textarea> Campo para texto largo. <select> Lista desplegable.

ETIQUETAS FORMULARIO

Estas etiquetas permiten la interacción del usuario mediante la recolección de datos.

<audio> Reproduce audio directamente en el navegador. <video> Reproduce video sin plugins adicionales. <img> Inserta imágenes en la página.

ETIQUETAS MULTIMEDIA

HTML5 introduce soporte integrado para audio, video e imágenes.

<nav> Define una sección de navegación. <aside> Representa contenido relacionado, como barras laterales. <details> y <summary> Muestra/oculta contenido bajo demanda

OTRAS ETIQUETAS

Hay etiquetas específicas para estructuras o funciones adicionales.

Ejemplos prácticos HTML5

Dentro de esta etiqueta se desarrolla todo el cuerpo del documento.

Es la cabecera que incluye los metadatos. Describe referencias de la página.

Es la etiqueta raíz que contiene el resto de etiquetas y atributos del documento.

Se utiliza para indicar la version HTML. Actualmente se usa la versión 5.0.

ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML

<!DOCTYPE html>

<body>

<head>

<html>

Cualquier documento HTML debe contener al menos estos elementos para desarrollarse correctamente:

ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML

Por ejemplo:

se desarrollan todas las etiquetas HTML5

Dentro del

<body>

<p>

<b> <i> <u>

<a>

<div>

<table>

<h1-h6>

EJEMPLO PRÁCTICO

Ventajas yLimitaciones

PRINCIPALES VENTAJAS DE HTML

• Fácil de usar: Simple de aprender, incluso para principiantes.
• Compatibilidad universal: Funciona en todos los navegadores y dispositivos.
• Soporte multimedia: Permite integrar videos y audios sin plugins.
• Semántica mejorada: Mejora la accesibilidad y el SEO con etiquetas específicas.
• Extensible: APIs como <canvas> y localStorage amplían sus capacidades.
• Gratuito: Es de código abierto y no requiere licencias.

No es suficiente por sí solo: HTML5 necesita de otros lenguajes como CSS y JavaScript para diseños más atractivos o funcionalidades interactivas. Por ejemplo, las etiquetas para multimedia o gráficos como <canvas> requieren programación extra​. Problemas con navegadores antiguos: Algunas funciones avanzadas de HTML5 no funcionan bien en navegadores antiguos, lo que puede ser un dolor de cabeza si necesitas que tu sitio funcione para todos​

Limitaciones de HTML5

Conclusiones

Con esta presentacion hemos explorado el marco histórico y los fundamentos de HTML5, tambien hemos aprendido sus principales características y el papel que juega como estándar esencial en el desarrollo web en la actualidad.

CONCLUSIONES

Fin de la presentación

1.Introducción-https://ebac.mx/blog/que-es-html52.Antecedentes, Desarrollo e Historia de HTML5 -https://disenowebakus.net/historia-html.php -https://barrazacarlos.com/es/ventajas-y-desventajas-de-html/-https://community.listopro.com/html5-la-evolucion-del-desarrollo-web/ -https://www.trecebits.com/origen-evolucion-html/3.Definición HTML5 y características- https://www.esic.edu/rethink/tecnologia/html5-que-es-caracteristicas-y-como-funciona-c - https://openwebinars.net/blog/que-es-html5/4.Etiquetas principales- https://www.w3schools.com/html/default.asp - https://lenguajehtml.com/html/semantica/que-son/5.Ejemplos prácticos- https://www.aulaclic.es/html/index.htm - https://www.freecodecamp.org/6.Ventajas y Limitaciones HTML5-https://informatecdigital.com/articulos/para-que-sirve-el-html/ -https://sujeto.es/ventajas-y-desventajas-de-html/ -https://www.byronvargas.com/web/que-caracteristicas-tiene-html5/

8. Bibliografía