En el mundo de la web, un contenido de calidad se ha convertido en un elemento fundamental para atraer y retener la atención del usuario. En este contexto, es muy importante comprender cómo elaborar y utilizar diferentes tipos de contenidos web.

Las imágenes ayudan a explicar ideas, hacen la web más visual y mejoran la experiencia del usuario. Eso sí, deben estar bien hechas y optimizadas.

🔧 Herramientas para crear imágenes

• GIMP: Ideal para editar imágenes: recortar, ajustar tamaño, mejorar colores, eliminar fondos o exportar en formatos web (JPG, PNG, WebP).
  👉 Muy recomendable si quieres aprender algo más “profesional”.
• Canva: Perfecta para crear banners, cabeceras, infografías o imágenes para secciones web. Muy intuitiva y rápida.
  👉 Excelente para trabajos académicos y proyectos rápidos.

• Bancos de recursos: Permiten usar imágenes gratuitas y legales:
  • Unsplash
  • Pixabay
  • Pexels
  • Freepik
    ⚠️ Aun así, revisa siempre la licencia.
• Herramientas de IA: Generan imágenes a partir de texto (prompts). Son muy útiles para ilustraciones o ideas creativas, pero hay que ser críticos con las licencias y el uso ético.

🌐 Integración en la web

Las imágenes se insertan con la etiqueta <img>:

<img src="imagenes/ejemplo.jpg" alt="Descripción de la imagen">

Un mapa es muy útil para mostrar:

• La ubicación de una empresa
• Un centro educativo
• Un evento
• Una ruta

🔧 Herramienta principal

• Google Maps: Permite generar mapas personalizados y obtener un código para incrustarlo en tu web. 

🌐 Integración en la web

Google Maps genera un <iframe> listo para usar:

1. Navega a un sitio concreto en Googel Maps, y haz clic en el botón compartir
2. Selecciona Insertar un mapa y haz clic en Copiar HTML.

El código debe ser algo similar a esto:

<iframe 
  src="https://www.google.com/maps/embed?..."
  width="600" height="450" style="border:0;" 
  allowfullscreen="" loading="lazy">
</iframe>

El vídeo es uno de los contenidos más potentes: explica mucho en poco tiempo y engancha al usuario.

🔧 Herramientas para crear vídeo

• Canva: Permite crear vídeos sencillos con texto, música y animaciones.
• Editores básicos como OpenShot: Para montar vídeos con más control.
• YouTube: Ideal para alojar vídeos sin ocupar espacio en tu servidor.

🌐 Integración en la web

Vídeo propio:

<video controls width="600">
  <source src="video/presentacion.mp4" type="video/mp4">
</video>

Vídeo de YouTube (recomendado):
YouTube genera un <iframe> para incrustar fácilmente el vídeo en la web similar a la integración de un mapa en Google Mapas:

1. En el vídeo que quieras insertar, haz clic en Compartir.
2. Elegimos Insertar
3. Copiamos el código

El código tiene este aspecto:

<iframe width="560" height="315" src="https://www.youtube.com/embed/vz_vU53JvvI?si=schVBHW92_bRT6ww" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>