HTML Básico y Avanzado

Dominio completo del lenguaje de marcado para la estructuración de contenido web

Objetivos de Aprendizaje

HTML Básico

Estructura
Texto
Multimedia
Semántica

Estructura Básica HTML5

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Título del Documento</title>
</head>
<body>
    <!-- Contenido visible de la página -->
</body>
</html>

Elementos Fundamentales

  • <html>: Contenedor raíz
  • <head>: Metadatos y recursos
  • <body>: Contenido visible
  • <meta>: Configuración del documento
  • <title>: Título en pestaña del navegador

Encabezados

<h1>Título principal</h1>
<h2>Subtítulo</h2>
<h3>Sub-sección</h3>
<!-- Hasta h6 -->
Jerarquía SEO Accesibilidad

Párrafos y Formato

<p>Párrafo normal</p>
<p><strong>Negrita</strong> y <em>énfasis</em></p>
<p>Salto<br>de línea</p>
<hr> <!-- Línea horizontal -->
Texto Formato Estructura

Listas

<ul> <!-- No ordenada -->
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<ol> <!-- Ordenada -->
  <li>Primero</li>
  <li>Segundo</li>
</ol>
Organización Menús Contenido

Imágenes

<img src="imagen.jpg" 
     alt="Descripción accesible" 
     width="400" height="300">
src alt SEO

Buena Práctica:

Siempre incluye el atributo alt para accesibilidad y SEO.

Enlaces

<a href="https://ejemplo.com" 
   target="_blank" 
   rel="noopener noreferrer">
   Texto del enlace
</a>
href target rel

Seguridad:

Usa rel="noopener noreferrer" con target="_blank" para prevenir vulnerabilidades.

Estructura Semántica

<header>Cabecera</header>
<nav>Navegación</nav>
<main>
  <article>
    <section>Sección 1</section>
    <section>Sección 2</section>
  </article>
  <aside>Contenido relacionado</aside>
</main>
<footer>Pie de página</footer>
HTML5 SEO Accesibilidad

Tablas Accesibles

<table>
  <caption>Título de tabla</caption>
  <thead>
    <tr><th scope="col">Encabezado</th></tr>
  </thead>
  <tbody>
    <tr><td>Dato</td></tr>
  </tbody>
</table>
Organización Datos Accesibilidad

HTML Avanzado

Formularios
Multimedia
APIs
Templates

Tipos de Input

<input type="email" required>
<input type="password" minlength="8">
<input type="date" min="2023-01-01">
<input type="range" min="0" max="100">
<input type="color" value="#3498db">
HTML5 Validación UX

Validación Integrada

<form novalidate>
  <input type="text" pattern="[A-Za-z]{3}" 
         title="3 letras" required>
  <input type="number" min="18" max="99">
  <button type="submit">Enviar</button>
</form>
pattern required novalidate

Elementos Avanzados

<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
</datalist>
<input list="browsers">

<progress value="75" max="100"></progress>
<meter min="0" max="100" value="65"></meter>
HTML5 UX Componentes

Video y Audio

<video controls width="600">
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" 
         srclang="es" label="Español">
  Tu navegador no soporta video.
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>
HTML5 Accesibilidad Subtítulos

SVG y Canvas

<!-- SVG (vectorial) -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" 
          stroke="green" fill="yellow" />
</svg>

<!-- Canvas (bitmap) -->
<canvas id="myCanvas" width="200" height="100">
  Alternativa para navegadores antiguos
</canvas>
Gráficos Animaciones Interactividad

Drag and Drop

<div id="dropzone" ondragover="allowDrop(event)" 
     ondrop="drop(event)">
  <img id="drag1" src="img.png" draggable="true" 
       ondragstart="drag(event)" width="100">
</div>

<script>
function allowDrop(e) { e.preventDefault(); }
function drag(e) { e.dataTransfer.setData("text", e.target.id); }
function drop(e) {
  e.preventDefault();
  const id = e.dataTransfer.getData("text");
  e.target.appendChild(document.getElementById(id));
}
</script>
HTML5 Interactividad JavaScript

Web Storage

// Almacenamiento local (persistente)
localStorage.setItem('clave', 'valor');
const dato = localStorage.getItem('clave');

// Almacenamiento de sesión (temporal)
sessionStorage.setItem('usuario', 'Juan');

// Evento que se dispara cuando cambia el storage
window.addEventListener('storage', (e) => {
  console.log(`Cambio en ${e.key}: ${e.newValue}`);
});
Persistencia Sin Cookies 5MB

<template> y <slot>

<template id="cardTemplate">
  <div class="card">
    <h3><slot name="title">Título predeterminado</slot></h3>
    <p><slot name="content">Contenido...</slot></p>
  </div>
</template>

<script>
const template = document.getElementById('cardTemplate');
const clone = template.content.cloneNode(true);
document.body.appendChild(clone);
</script>
Reutilización Shadow DOM Componentes

Microdatos

<div itemscope itemtype="https://schema.org/Person">
  <span itemprop="name">Juan Pérez</span>
  <span itemprop="jobTitle">Desarrollador Web</span>
  <a itemprop="url" href="https://ejemplo.com">Sitio web</a>
</div>
SEO Estructura Rich Snippets

Ejercicios de Laboratorio

Ejercicio 1: Formulario de Contacto Avanzado

Creé un formulario de contacto con validación HTML5 que incluye:

  • Campos obligatorios con required
  • Validación de email con type="email"
  • Patrón personalizado para teléfono
  • Mensajes de error personalizados

Resultado:

Ejercicio 2: Implementación de Web Storage

Desarrollé una pequeña aplicación que usa localStorage para:

  • Guardar preferencias del usuario
  • Mantener un historial de búsquedas
  • Recordar el último tema seleccionado (claro/oscuro)

Resultado:

Prueba a guardar un valor y recargar la página

Ejercicio 3: Página Semántica con ARIA

Construí una página usando:

  • Elementos semánticos HTML5 (header, nav, main, etc.)
  • Atributos ARIA para mejorar accesibilidad
  • Estructura lógica para lectores de pantalla
  • Microdatos para SEO

Fragmento de código:

<header role="banner">
  <nav role="navigation" aria-label="Principal">
    <ul>
      <li><a href="#inicio" aria-current="page">Inicio</a></li>
      <li><a href="#servicios">Servicios</a></li>
    </ul>
  </nav>
</header>

<main role="main">
  <article itemscope itemtype="https://schema.org/Article">
    <h1 itemprop="headline">Título del Artículo</h1>
    <p itemprop="description">Descripción...</p>
  </article>
</main>

Reflexión sobre el Aprendizaje

¿Qué aprendí?

Durante esta semana, he consolidado mi comprensión de HTML desde sus fundamentos hasta características avanzadas:

  • Estructura semántica: Ahora entiendo la importancia real de usar elementos como article, section y nav no solo para organización, sino para accesibilidad y SEO.
  • Formularios avanzados: He aprendido a aprovechar la validación nativa del navegador, reduciendo la dependencia de JavaScript para validaciones básicas.
  • APIs HTML5: La implementación de Web Storage ha sido reveladora para entender cómo mantener estado en aplicaciones web sin backend.
  • Accesibilidad: Los atributos ARIA y la estructura semántica ya no son conceptos abstractos, sino herramientas concretas que puedo aplicar para hacer la web más inclusiva.

¿Cómo aprendí?

Mi proceso de aprendizaje combinó múltiples enfoques:

  • Práctica guiada: Seguí tutoriales estructurados para entender los conceptos básicos, luego los adapté a mis necesidades.
  • Experimentación: Creé múltiples versiones de cada ejercicio, probando diferentes enfoques y comparando resultados.
  • Análisis de errores: Cuando algo no funcionaba, investigaba en documentación y foros, lo que me llevó a comprender más profundamente los conceptos.
  • Enseñanza: Expliqué los conceptos a compañeros, lo que me obligó a organizar mis pensamientos y descubrir áreas que necesitaba reforzar.

El momento más valioso fue cuando implementé el formulario con validación y descubrí cómo los mensajes de error predeterminados podían personalizarse, lo que me llevó a investigar sobre internacionalización y accesibilidad en formularios.

Próximos Pasos

Para continuar mi aprendizaje, planeo:

  • Profundizar en accesibilidad con más atributos ARIA y pruebas con lectores de pantalla.
  • Explorar más APIs HTML5 como Geolocation y Drag & Drop en proyectos reales.
  • Investigar Web Components para crear elementos reutilizables.
  • Mejorar mis formularios con validación asíncrona y retroalimentación en tiempo real.

También quiero centrarme en patrones de diseño accesibles y mejores prácticas de performance para HTML, especialmente en la carga de recursos multimedia.

Buenas Prácticas

Accesibilidad

  • Usa atributos alt en imágenes
  • Implementa ARIA cuando sea necesario
  • Estructura semántica correcta
  • Contraste adecuado de colores
  • Navegación con teclado

SEO

  • Estructura semántica adecuada
  • Meta etiquetas descriptivas
  • URLs amigables
  • Microdatos para rich snippets
  • Contenido de calidad y relevante

Performance

  • Optimiza imágenes
  • Usa lazy loading
  • Minimiza el uso de iframes
  • Implementa caché adecuadamente
  • Prioriza contenido crítico

Resumen Semana 2

Conceptos Clave

  • Estructura básica de documento HTML
  • Elementos semánticos para mejor SEO y accesibilidad
  • Formularios avanzados con validación integrada
  • APIs de HTML5: Web Storage, Geolocation, Drag & Drop
  • Técnicas de optimización y buenas prácticas

Elementos Dominados

  • Etiquetas básicas y de formato
  • Multimedia: video, audio, SVG, Canvas
  • Formularios avanzados y validación
  • Web Components: template y slot
  • Microdatos para SEO

Próximos Pasos

  • Profundizar en CSS moderno
  • Introducción a JavaScript
  • Accesibilidad avanzada (ARIA)
  • Optimización de performance
  • Patrones de diseño web