Saltar la navegación

2.3. 📖 Elaboración de Contenidos Web

Introducción

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. A continuación, analizamos de forma sintetizada cómo se pueden crear y optimizar imágenes, audio, geolocalización y vídeos para su uso en la web.

Imágenes

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.

Canva

  • Bancos de recursos
    Permiten usar imágenes gratuitas y legales:
    • Unsplash
    • Pixabay
    • Pexels
      ⚠️ 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">

Buenas prácticas:

  • Usa imágenes optimizadas (no muy pesadas).
  • Añade siempre el atributo alt (accesibilidad y SEO).
  • Organiza las imágenes en carpetas.

Audio

El audio puede servir para podcasts, explicaciones, música de fondo o efectos sonoros.

🔧 Herramientas básicas de audio

  • Audacity
    Software libre para grabar y editar audio: cortar, limpiar ruido, ajustar volumen y exportar en MP3 u OGG.
  • Grabadoras online o del móvil
    Para grabaciones sencillas de voz.
  • Bancos de sonido
    Como FreeSound (revisa siempre licencias).

🌐 Integración en la web

El audio se integra con la etiqueta <audio>:

<audio controls>
  <source src="audio/explicacion.mp3" type="audio/mpeg">
</audio>

Consejos:

  • Usa audio solo cuando aporte valor.
  • Evita la reproducción automática.
  • Ajusta el volumen y la calidad.

Geolocalización

La geolocalización 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 compartirCompartir
  2. Selecciona Insertar un mapa y haz clic en Copiar HTML.Insertar

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>

Maps

Buenas prácticas:

  • Ajusta el tamaño al diseño de la página.
  • Úsalo solo cuando sea relevante.
  • Ten en cuenta la privacidad.

Vídeos

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.Compartir
  2. Elegimos InsertarInsertar
  3. Copiamos el códigoCó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>

Consejos:

  • No subas vídeos muy pesados al servidor.
  • Mejor usar plataformas externas.
  • Asegúrate de que el vídeo aporta información real.

Una herramienta de desarrollo muy útil: CodePen

CodePen es una herramienta online para crear y probar páginas web de forma rápida, sin instalar nada en el ordenador. Funciona directamente desde el navegador y está pensada para trabajar con HTML, CSS y JavaScript.

Su principal ventaja es que ves el resultado al instante: escribes código y la página se actualiza en tiempo real. Esto facilita mucho aprender, probar ideas y detectar errores.

¿Por qué CodePen es tan útil para aprender desarrollo web?

  • 💻 Todo en un mismo sitio: HTML, CSS y JavaScript separados y bien organizados.
  • ⚡ Resultado inmediato: ideal para entender cómo afecta cada línea de código.
  • 🎨 Perfecto para experimentar sin miedo a romper nada.
  • 🌐 No necesitas servidor: puedes incrustar imágenes, vídeos, mapas o audios fácilmente.
  • 🤝 Compartir proyectos: basta un enlace para enseñar tu trabajo.

Creado con eXeLearning (Ventana nueva)