HTML5

USO DE ESTILOS

GRUPO 6

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

DIW - 2° DAW

1. Introducción a HTML 5

2. Historia de HTML

3. Definición y características

4. Etiquetas principales

5. Ejemplos prácticos

6. Ventajas y limitaciones

7. Conclusiones

8. Bibliografía

Índice de contenidos

INTRODUCCIÓNHTML5

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.

Importancia:

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.

Objetivos del trabajo

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

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

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

HISTORIA DE HTML

Historia de HTML5

ANTECEDENTES DE HTML y XHTML

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.

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.

Impacto Histórico:

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.

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.

DEFINICIÓN Y CARACTERÍSTICAS

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:

• Nuevas etiquetas semánticas:

CARACTERÍSTICAS

• Mejor soporte multimedia:

• 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>.

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.

CARACTERÍSTICAS

• Gráficos y animaciones avanzados:

• <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.

CARACTERÍSTICAS

• Mejoras en formularios:

• 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.

CARACTERÍSTICAS

• Diseño compatible con dispositivos móviles:

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.

• Accesibilidad mejorada:

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.

Etiquetas principales HTML5

ETIQUETAS SEMÁNTICAS

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

<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 MULTIMEDIA

ETIQUETAS FORMULARIO

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

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

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

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

OTRAS ETIQUETAS

Hay etiquetas específicas para estructuras o funciones adicionales.

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

Ejemplos prácticos HTML5

ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML

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

<html>

<!DOCTYPE html>

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

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

<head>

<body>

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

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

ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML

Dentro del

<body>

se desarrollan todas las etiquetas HTML5

Por ejemplo:

<p>

<h1-h6>

<div>

<b> <i> <u>

<table>

<a>

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.

Limitaciones de HTML5

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​

Conclusiones

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.

Fin de la presentación

8. Bibliografía

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/