Multimedia y Enlaces: Los caminos del ninja

“Un ninja sin camino es un ninja perdido. Un enlace roto es un camino hacia la nada.” - Proverbio del Código

🎯 Objetivo Ninja

Conectarás páginas con enlaces perfectos y añadirás multimedia optimizada. Dominarás rutas relativas vs absolutas.

🏯 Teoría: El Por Qué

La web es una red de caminos. Los enlaces (<a>) son portales entre páginas. Las imágenes (<img>) son el alma visual.

Sin enlaces: Cada página es una isla. Con enlaces: Construyes un imperio conectado.

⚔️ Implementación

Enlaces: El Portal del Ninja

<!-- Enlace básico -->
<a href="https://8devmx.com">Ir al Dojo</a>

<!-- Abrir en nueva pestaña -->
<a href="https://google.com" target="_blank">Google</a>

<!-- Enlace con título (tooltip) -->
<a href="/contacto" title="Contáctanos aquí">Contacto</a>

<!-- Enlace a email -->
<a href="mailto:ninja@8devmx.com">Enviar email</a>

<!-- Enlace a teléfono -->
<a href="tel:+525512345678">Llamar</a>

<!-- Ancla a sección (mismo página) -->
<a href="#mision">Ir a misión</a>
<!-- ... más abajo en la página -->
<h2 id="mision">Misión</h2>

Rutas: El Mapa del Ninja

Rutas Absolutas (URL completa):

<!-- Funciona SIEMPRE, pero depende del dominio -->
<a href="https://8devmx.com/rutas/index.html">Rutas</a>
<img src="https://8devmx.com/images/ninja.webp">

Rutas Relativas (desde el archivo actual):

<!-- Mismo directorio -->
<a href="contacto.html">Contacto</a>

<!-- Subdirectorio -->
<a href="blog/articulo-1.html">Artículo</a>

<!-- Directorio padre -->
<a href="../index.html">Inicio</a>

<!-- Desde raíz del proyecto -->
<a href="/about.html">About</a>

Estructura ejemplo:

proyecto/
├── index.html
├── contacto.html
├── blog/
│   ├── articulo-1.html
│   └── articulo-2.html
└── images/
    └── logo.webp

Desde articulo-1.html:

<!-- Ir a index.html -->
<a href="../index.html">Inicio</a>

<!-- Ir a articulo-2.html (mismo directorio) -->
<a href="articulo-2.html">Siguiente</a>

<!-- Cargar logo -->
<img src="../images/logo.webp">

Imágenes: El Poder Visual

<!-- Imagen básica -->
<img src="ninja.webp" alt="Un ninja saltando">

<!-- Con dimensiones (mejora performance) -->
<img src="ninja.webp" alt="Un ninja" width="300" height="200">

<!-- Lazy loading (carga solo cuando está visible) -->
<img src="ninja.webp" alt="Un ninja" loading="lazy">

Atributo ALT (CRÍTICO):

<!-- ✅ BUENO -->
<img src="sasuke.webp" alt="Sasuke Uchiha activando Sharingan">

<!-- ❌ MALO -->
<img src="sasuke.webp" alt="imagen">
<img src="sasuke.webp" alt="">  <!-- Solo si es decorativa -->

¿Por qué ALT es sagrado?

  • Accesibilidad: Lectores de pantalla lo leen
  • SEO: Google indexa el texto
  • Fallback: Si la imagen no carga, muestra el texto

Formatos de Imagen

<!-- JPG: Fotos, degradados (compresión con pérdida) -->
<img src="foto.webp" alt="Paisaje">

<!-- PNG: Transparencias, logos (sin pérdida) -->
<img src="logo.webp" alt="Logo 8devmx">

<!-- WebP: Moderno, ligero (50% menos peso) -->
<img src="ninja.webp" alt="Ninja">

<!-- SVG: Vectores, escalables (XML) -->
<img src="icon.svg" alt="Icono">

Picture: Imágenes Responsive

<picture>
  <!-- Móvil -->
  <source media="(max-width: 600px)" srcset="ninja-small.webp">
  
  <!-- Tablet -->
  <source media="(max-width: 1200px)" srcset="ninja-medium.webp">
  
  <!-- Desktop -->
  <source srcset="ninja-large.webp">
  
  <!-- Fallback -->
  <img src="ninja.webp" alt="Ninja en acción">
</picture>

Audio y Video

<!-- Audio -->
<audio controls>
  <source src="jutsu.mp3" type="audio/mpeg">
  Tu navegador no soporta audio.
</audio>

<!-- Video -->
<video width="640" height="360" controls>
  <source src="entrenamiento.mp4" type="video/mp4">
  <source src="entrenamiento.webm" type="video/webm">
  Tu navegador no soporta video.
</video>

<!-- Con autoplay (muted es obligatorio) -->
<video autoplay muted loop>
  <source src="background.mp4" type="video/mp4">
</video>

iframes: Embeber Contenido

<!-- YouTube -->
<iframe width="560" height="315" 
  src="https://www.youtube.com/embed/VIDEO_ID"
  frameborder="0" 
  allowfullscreen>
</iframe>

<!-- Google Maps -->
<iframe 
  src="https://www.google.com/maps/embed?pb=..."
  width="600" 
  height="450" 
  style="border:0;">
</iframe>

🎯 Reto Ninja

MISIÓN DE MULTIMEDIA

🖼️ Galería de Ninjas

1

Crea un archivo galeria-ninja.html con una estructura básica.

2

Añade una barra de navegación con enlaces a "Inicio", "Sobre Mí" y un enlace de ancla a "Contacto".

3

Inserta al menos dos imágenes de tus ninjas favoritos usando <figure> y <figcaption>.

4

Asegúrate de incluir el atributo alt descriptivo y loading="lazy" en las imágenes.

5

Embebe un video (puede ser local o de YouTube) con controles de reproducción.

6

Crea una sección de contacto con enlaces de mailto: y tel:.

Consejo del Sensei: ¡No olvides las rutas! Si tu imagen está en una carpeta, asegúrate de apuntar correctamente con rutas relativas.

🔓 Pergamino Oculto (Bonus)

Técnica 1: Rel=“noopener noreferrer”

<!-- SIN protección (riesgo de seguridad) -->
<a href="https://sitio-externo.com" target="_blank">Link</a>

<!-- CON protección ✅ -->
<a href="https://sitio-externo.com" target="_blank" rel="noopener noreferrer">
  Link seguro
</a>

Evita: Que el sitio externo controle tu página original.

Técnica 2: Download Attribute

<!-- Descarga en vez de abrir -->
<a href="documento.pdf" download="mi-documento.pdf">
  Descargar PDF
</a>

Técnica 3: Imágenes Optimizadas

<!-- Srcset: diferentes resoluciones -->
<img 
  src="ninja-300.webp"
  srcset="ninja-300.webp 300w,
          ninja-600.webp 600w,
          ninja-1200.webp 1200w"
  sizes="(max-width: 600px) 300px,
         (max-width: 1200px) 600px,
         1200px"
  alt="Ninja en acción">

Técnica 4: Figure y Figcaption

<figure>
  <img src="diagram.webp" alt="Diagrama de flujo">
  <figcaption>
    Figura 1: Proceso de autenticación ninja
  </figcaption>
</figure>

✅ Checklist de Dominio

MAESTRÍA ALCANZADA

Pergamino del Explorador

Próximo Pergamino: Formularios - La puerta de entrada del guerrero (input, select, textarea).

¡Los caminos están despejados, ninja! Ahora conecta tu imperio. 🥷🌐