Currículo: esta unidad cubre parte de los saberes básicos del Bloque B – Publicación de contenidos (TICO.2.B.1) correspondiente a 2º Bachillerato. Además, se evalúan los criterios que puedes encontrar al final de esta página.
Tabla de contenidos
Desde los primeros días de la Web en los laboratorios del CERN, cuando Tim Berners-Lee ideó una manera de interconectar la información a través de hipertextos, hasta el dinámico universo digital en el que hoy nos movemos, la Web ha sido testigo y protagonista de revoluciones tanto silenciosas como explosivas.
Pero, ¿qué hace a la Web tan importante en nuestros días? La respuesta esta no solo en su capacidad para almacenar y transmitir información, sino en cómo ha redefinido las relaciones humanas, el comercio, la educación, y hasta nuestra percepción de la realidad.
A través de ejemplos contemporáneos, como el impacto de las redes sociales en las dinámicas políticas y sociales, o el surgimiento de la economía del compartir, observamos cómo la Web no es un mero canal de información, sino un espacio de interacción humana sin precedentes.
Cada página web que visitamos, cada aplicación que usamos, y cada servicio online al que accedemos son piezas de un rompecabezas que nos ayuda a comprender el mundo en el que vivimos. Adentrarnos en el estudio de la Web es, por tanto, explorar cómo la tecnología moldea la sociedad y viceversa.
5.1. Fundamentos básicos de la web
La web, como la conocemos hoy, es un entramado complejo de tecnologías, protocolos y prácticas diseñadas para interconectar a las personas con la información.
Vamos a intentar aportar algo de comprensión, describiendo algunas de sus características principales.
5.1.1. Características de la web
La web no es una vía de comunicación unidireccional; permite la interacción entre los usuarios y los sistemas.
Ejemplo de ello son los formularios web que recopilan información de los usuarios, permitiendo una experiencia personalizada.
Una de las metas de la web es ser accesible por cualquier persona, en cualquier lugar y en cualquier dispositivo o navegador, es decir, que sea accesible. Un ejemplo claro es la iniciativa Web Accessibility Initiative (WAI), que promueve directrices para asegurar que la web sea accesible para personas con discapacidades.
Los sitios web pueden cambiar y actualizarse en tiempo real, ofreciendo contenido dinámico basado en las interacciones del usuario o eventos externos. Las páginas de noticias que actualizan sus titulares conforme ocurren son un ejemplo sencillo, pero lo vemos con mucha más claridad en las redes sociales, aplicaciones cuyo contenido es completamente distinto de un usuario a otro.
La web se estructura en torno al concepto de hipertexto, que permite enlazar documentos entre sí mediante enlaces. Wikipedia es el ejemplo emblemático de cómo la hipertextualidad facilita el acceso a gigantescas cantidades de información de manera intuitiva.
5.1.2. Funcionamiento de la web
Para entender cómo funciona la web, podemos imaginarla como el almacén de cajas fuertes de un banco, pero en lugar de cajas llenas de bienes personales, tiene servidores llenos de páginas web accesibles desde cualquier parte del mundo.
Vamos a desglosar este proceso en pasos simples.
1: La solicitud del usuario
Quieres encontrar información sobre «el sistema solar». Lo primero que haces es abrir tu navegador web (como Chrome, Firefox o Safari) y escribes tu consulta en un buscador como Google o directamente una dirección web que ya conoces.
Un compañero te ha dicho que en cienciaespacial.com hay datos curiosos que te pueden servir. Así que tecleas era dirección en tu navegador y pulsas [INTRO]:
En este momento, estás haciendo una «solicitud» para ver una página web específica.
Acabas de presenciar un HTTP Request.
2: Localizando el recurso
Cada página web tiene una dirección única, conocida como URL –Uniform Resource Locator-, que funciona como la dirección de una casa -en nuestro caso cienciaespacial.com-.
Pero, para que el navegador encuentre la página que has solicitado, necesita convertir esa dirección legible por humanos en una dirección numérica llamada dirección IP –Internet Protocol–, que identifica de manera única a un servidor en la web.
¿Te has fijado que las cajas fuertes del banco no tienen el nombre de sus propietarios? Tienen un número que las identifica. Los servidores funcionan igual, los identificamos por un número con el formato de una dirección IP –cuatro números de 0 a 255, separados por un punto-:
80.123.45.251
Este proceso de traducción de la dirección de una web en la dirección IP del servidor que la aloja se realiza a través de algo llamado DNS –Domain Name System–, que actúa como una guía telefónica, traduciendo nombres de dominio en direcciones IP. Este proceso se llama Domain Name Resolution.
3: El servidor web responde
Una vez que el navegador sabe la dirección IP del servidor donde reside la página web que quieres visitar, envía una solicitud a ese servidor. Piensa en el servidor como un gran archivo donde se guardan todas las páginas web. Cuando el servidor recibe tu solicitud, busca la página que has pedido, procesa los datos necesarios para elaborar la respuesta y la envía de vuelta a tu navegador.
Esa respuesta es una HTTP Response.
Todo esto ocurre en el lado servidor -donde se aloja la web-, y lo que ha procesado el servidor es el Backend -la parte privada- de la web.
4: Cargando la página web
Al recibir la información del servidor, tu navegador comienza a cargar la página web. Esto incluye texto, imágenes, videos y cualquier otro contenido. El navegador interpreta el código HTML (el lenguaje con el que se escriben las páginas web), lo estiliza con CSS (que define el aspecto de la página) y ejecuta cualquier código JavaScript (que añade interactividad a la página) para presentarte la página web tal y como fue diseñada.
Todo esto ocurre en el lado cliente -tú y tu equipo-, y lo que acaba de hacer tu navegador es mostrar el Frontend -la parte pública- de la web.
5: Interacción y más solicitudes
Una vez que la página está cargada, puedes interactuar con ella: hacer clic en enlaces, ver vídeos, rellenar formularios, dejar comentarios, etc.
Cada vez que interactúas, es posible que tu navegador haga más solicitudes al servidor, por ejemplo, si haces clic en un enlace para ir a una nueva página. El proceso desde el paso 1 se repite, y el ciclo continúa mientras navegas por la web.
Este proceso, que puede parecer complicado en teoría, ocurre en cuestión de segundos gracias a la arquitectura cliente-servidor (que acabamos de describir), en la que intervienen numerosos protocolos de comunicación tremendamente eficientes.
Bien.
Conoces cómo funciona la web, sabes de dónde parte la solicitud, cómo esa solicitud consigue encontrar el servidor que la atiende, y también que un archivo llega de vuelta a tu navegador y lo muestra.
Pero, ¿cómo consigue el navegador mostrar en pantalla toda la información de una web?
Ese es nuestro siguiente paso.
5.2. Introducción a HTML y CSS
Estamos ante los dos pilares fundamentales del desarrollo web del lado cliente.
Estas dos tecnologías hacen posible la creación y el diseño de sitios web:
- HTML (HyperText Markup Language – Lenguaje de Marcado de Hipertexto).
- CSS (Cascading Style Sheets – Hojas de Estilo en Cascada).
Estas tecnologías son fundamentales para construir y estilizar las páginas web, ofreciendo una base sólida sobre la cual se apoyan todos los sitios web modernos.
A continuación, exploraremos qué son, cómo funcionan y por qué son tan importantes en el diseño web.
5.2.1. HTML: la estructura de la web
HTML es el lenguaje estándar de marcado utilizado para crear y estructurar páginas web.
A través de HTML, definimos elementos como títulos, párrafos, enlaces, imágenes y muchas otras estructuras que componen una página web.
Piensa en HTML como el esqueleto de un sitio web, proporcionando la estructura básica sobre la cual todo lo demás se construye.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Esqueleto de una web</title>
</head>
<body>
<!-- Contenido principal -->
</body>
</html>HTML utiliza etiquetas –tags– para marcar diferentes partes del contenido de una página web, indicando al navegador cómo debe ser mostrado el contenido. Por ejemplo, la etiqueta <h1> se usa para los títulos principales, <p> para párrafos, <a> para enlaces, y así sucesivamente.
Cada etiqueta tiene un propósito específico y ayuda a organizar el contenido de manera semántica.
Aprender HTML es el primer paso para cualquier desarrollador web, ya que proporciona la base necesaria para construir sitios web. Además, un buen manejo de HTML es imprescindible para la accesibilidad web, asegurando que el contenido sea accesible para todos los usuarios, incluidos aquellos que utilizan lectores de pantalla u otras tecnologías de asistencia.
5.2.2. CSS: el estilo de la web
CSS es el lenguaje utilizado para describir la presentación visual de las páginas web, incluyendo colores, márgenes y fuentes. Mientras que HTML se encarga de la estructura, CSS define el estilo y la apariencia de esa estructura.
Puedes pensar en CSS como la ropa que viste al esqueleto proporcionado por HTML, dándole color, forma y estilo.
CSS permite a los desarrolladores aplicar estilos a elementos HTML seleccionándolos mediante selectores y luego definiendo propiedades y valores específicos.
Por ejemplo, podemos cambiar el color de fondo de todos los párrafos (<p>) a azul con una simple regla de CSS:
p { background-color: blue; } CSS puede ser incorporado directamente en el HTML, enlazado como un archivo externo, o incluso insertado en línea en los propios elementos.
Dentro del ecosistema de CSS, los frameworks han surgido como herramientas muy potentes que simplifican y aceleran el desarrollo de interfaces de usuario atractivas.
Entre estos, Tailwind CSS destaca como un framework que permite a los desarrolladores construir diseños personalizados sin salirse de su HTML, lo que elimina la necesidad de escribir CSS desde cero.
El uso de CSS mejora notablemente la experiencia del usuario al permitir la creación de páginas web visualmente atractivas con aspecto profesional. Además, CSS juega un papel muy importante en el diseño web adaptable, asegurando que las páginas se vean bien en una amplia variedad de dispositivos y tamaños de pantalla.
Dominar CSS significa tener el control sobre la apariencia de un sitio web, pudiendo ajustar el diseño para mejorar la usabilidad y la estética.
5.2.3. JavaScript: la interactividad de la web
JavaScript, por su parte, es el lenguaje de programación que aporta vida a las páginas web, llevando la interactividad y dinamismo a un nivel superior en el desarrollo web.
Mientras que HTML proporciona la estructura y CSS el estilo, JavaScript introduce la capacidad de interactuar con los elementos de la página, realizar cálculos, manipular datos y responder a acciones del usuario.
Se puede ejecutar tanto en el cliente (navegador) como en el servidor (Node.js), lo que lo hace extremadamente versátil.
Con JavaScript, se pueden crear efectos animados, validar formularios, realizar solicitudes asíncronas a servidores sin recargar la página –AJAX-, y mucho más.
Cuando una página web se carga, el navegador lee el código HTML, aplica estilos CSS y luego interpreta y ejecuta el código JavaScript. Este proceso permite a JavaScript manipular los elementos del DOM –Document Object Model / Modelo de Objeto de Documento-, que es una representación programática de la página web, permitiendo modificar dinámicamente el contenido, estructura y estilo de la página.
JavaScript también maneja eventos, que son sucesos que ocurren en la página web, como clics, movimientos del ratón, pulsaciones de teclas, etc. Mediante el uso de «listeners» de eventos, JavaScript puede ejecutar código en respuesta a estas acciones, mejorando la experiencia del usuario al hacer que la página web responda a sus interacciones.
Es tal su importancia que se le llama directamente: el lenguaje de la web.
5.3. Accesibilidad y usabilidad
La accesibilidad y la usabilidad en la web se refieren a la práctica de hacer que los sitios web sean fáciles de usar y accesibles para todos los usuarios, incluidas las personas con discapacidades.
Estos conceptos son fundamentales para crear una web inclusiva que ofrezca una experiencia de usuario óptima para una audiencia diversa.
5.3.1. Qué es la accesibilidad web
La accesibilidad web implica diseñar y desarrollar sitios web que puedan ser utilizados por personas con discapacidades. Esto incluye asegurar que el contenido web sea accesible para personas con discapacidades visuales, auditivas, motrices, del habla, cognitivas y neurológicas.
La accesibilidad se logra mediante el seguimiento de directrices y estándares específicos que abordan cómo el contenido web debe ser creado y presentado.
5.3.2. Qué es la usabilidad web
La usabilidad web se centra en diseñar sitios web de manera que sean fáciles y eficientes de usar por el mayor número posible de personas.
Se trata de crear experiencias de usuario que sean intuitivas, que minimicen la dificultad de navegación y que permitan a los usuarios alcanzar sus objetivos con facilidad.
La usabilidad abarca aspectos como la simplicidad del diseño, la facilidad de aprendizaje, la eficiencia de uso y la satisfacción del usuario.
5.3.3. Estándares y directrices
Las WCAG -Pautas de Accesibilidad para el Contenido Web- son una serie de recomendaciones desarrolladas por el W3C (Consorcio World Wide Web) que establecen cómo hacer el contenido web más accesible. Estas pautas se dividen en tres niveles de conformidad: A (el nivel más bajo), AA y AAA (el nivel más alto). Cubren principios como la percepción, la operabilidad, la comprensibilidad y la robustez.
La WAI-ARIA -Aplicaciones de Internet Enriquecidas Accesibles-, por su parte, es una especificación técnica diseñada para mejorar la accesibilidad de las aplicaciones web dinámicas, permitiendo a los desarrolladores hacer que elementos complejos de la interfaz de usuario sean accesibles, especialmente para personas que utilizan lectores de pantalla.
5.3.4. Implementación práctica
Implementar la accesibilidad y la usabilidad requiere consideración desde las primeras etapas del diseño y desarrollo web.
Esto incluye la elección de colores y fuentes que sean fáciles de leer, asegurar que el sitio web sea navegable usando solo el teclado, proporcionar textos alternativos para imágenes, y diseñar formularios que sean fáciles de completar.
También implica probar el sitio web con una variedad de usuarios, incluidos aquellos con discapacidades, para asegurar que el sitio web sea accesible y fácil de usar para todos.
5.4. Herramientas de diseño
Las herramientas de diseño web son componentes muy importantes en el desarrollo de sitios web.
Facilitan la creación de la interfaz visual y la experiencia de usuario en aplicaciones web. Varían desde software de diseño gráfico hasta plataformas de desarrollo que ofrecen un entorno de trabajo visual, donde se pueden arrastrar y soltar elementos para diseñar páginas web.
A continuación, se presentan algunas de las herramientas de diseño web más populares.
 | Figma se destaca por su enfoque colaborativo en el diseño de interfaces de usuario (UI) y experiencia de usuario (UX). Es una herramienta basada en la nube que permite a equipos de diseño trabajar juntos en tiempo real, desde la idea hasta el prototipado, facilitando la comunicación y la iteración rápida entre los miembros del equipo. |
 | Adobe XD es conocido por su integración fluida con otras herramientas de Adobe y su capacidad para crear prototipos interactivos de alta fidelidad. Permite a los diseñadores y desarrolladores colaborar en la creación de aplicaciones web y móviles, ofreciendo un amplio rango de funcionalidades para el diseño de interfaces y experiencias de usuario. |
 | Sketch es ampliamente valorado por su simplicidad y enfoque específico en el diseño de UI/UX para aplicaciones web y móviles. Ofrece un amplio conjunto de plugins y una comunidad activa que contribuye constantemente con extensiones para mejorar la eficiencia del flujo de trabajo de diseño. |
 | InVision Studio se centra en la creación de prototipos interactivos y animaciones sofisticadas. Esta herramienta es ideal para diseñadores que buscan presentar sus ideas de manera dinámica, permitiendo a los participantes experimentar de cerca cómo funcionará el producto final. |
 | Axure RP es reconocido por sus capacidades avanzadas de prototipado y la creación de wireframes complejos. Es particularmente útil para diseñadores y equipos de producto que necesitan desarrollar prototipos funcionales con lógica y condiciones interactivas, facilitando la simulación de aplicaciones web complejas. |
 | Affinity Designer es apreciado por su precisión y rendimiento en el diseño gráfico vectorial. Aunque es una herramienta más general, su capacidad para trabajar con alta definición y su fluidez la hacen idónea para diseñadores web que buscan crear elementos gráficos detallados y escalables para sus proyectos. |
 | Canva es una herramienta de diseño gráfico basada en la web enfocada en la simplicidad y accesibilidad. Aunque no es exclusiva para diseño web, su facilidad de uso la hace popular entre no diseñadores y profesionales que necesitan crear rápidamente gráficos para redes sociales, blogs y sitios web simples. |
 | Bootstrap Studio es una herramienta de diseño potente para crear sitios web adaptables utilizando el framework Bootstrap. Ofrece una amplia gama de componentes predefinidos que pueden ser arrastrados y soltados para construir rápidamente interfaces atractivas. |
 | Webflow combina diseño, desarrollo y hosting en una sola plataforma, permitiendo a los diseñadores construir sitios web completamente funcionales sin necesidad de escribir código. Es particularmente útil para diseñadores que buscan tener control total sobre el diseño y la funcionalidad de sus sitios sin depender de un desarrollador. |
Cada una de estas herramientas de diseño web ofrece características únicas que pueden adaptarse a diferentes necesidades y flujos de trabajo. La elección de la herramienta adecuada dependerá del proyecto específico, las habilidades del equipo de diseño/desarrollo, y los objetivos a largo plazo de la estrategia digital.
5.5. Gestores de contenido
Un Gestor de contenido -CMS: Content Management System– es un software que ayuda a crear, gestionar y modificar el contenido de un sitio web sin la necesidad de tener conocimientos especializados en programación.
Los CMS más conocidos incluyen WordPress, Joomla, y Drupal.
Estas plataformas ofrecen una interfaz de usuario amigable donde se puede controlar el aspecto del sitio web, estructurar el contenido, y añadir nuevas funcionalidades mediante plugins o extensiones.
Los CMS separan el diseño y la estructura del contenido, permitiendo a los usuarios editar el contenido sin afectar el diseño general del sitio web. Esto se logra a través de una interfaz de administración accesible mediante un navegador web, donde se pueden añadir o editar publicaciones de blog, páginas, menús y otros elementos del sitio web.
Estos sistemas han revolucionado la manera en que se crean y mantienen los sitios web, democratizando la publicación web y permitiendo a individuos sin infraestructura tener presencia online a un coste realmente bajo en desarrollo web.
Entre los principales beneficios de utilizar CMS, se encuentran:
- Eficiencia: permiten crear sitios web de manera rápida y eficiente, reduciendo el tiempo de desarrollo.
- Accesibilidad: facilitan que personas sin conocimientos técnicos en programación puedan crear sitios web que ya están configurados para respetar la accesibilidad.
- Personalización: ofrecen numerosas opciones de personalización a través de temas, plantillas y plugins.
- Colaboración: la gran mayoría de ellos permite que varios usuarios trabajen en el sitio web simultáneamente.
Al seleccionar un CMS, es importante considerar varios factores como la facilidad de uso, la flexibilidad, las opciones de personalización, la seguridad, y el soporte de la comunidad. Además, se debe tener en cuenta el propósito del sitio web (por ejemplo, blog, tienda online, sitio corporativo) para elegir una plataforma que mejor se adapte a las necesidades específicas.
5.6. Elaboración y difusión de contenidos web
La elaboración de contenidos en la web es una tarea clave para captar la atención del público, mejorar el engagement y comunicar efectivamente el mensaje deseado.
La integración de diferentes tipos de medios, como imágenes, audio, geolocalización y vídeos, enriquece la experiencia del usuario y aumenta las posibilidades de interacción con el contenido.
Veamos cómo estos elementos se pueden utilizar de manera efectiva en la web.
5.6.1. Imágenes
Las imágenes tienen el poder de comunicar rápidamente ideas complejas, complementar el texto y hacer que las páginas web sean visualmente atractivas.
Para un uso efectivo, las imágenes deben ser de alta calidad, relevantes para el contenido circundante y optimizadas para la web (en términos de tamaño y formato) para garantizar tiempos de carga rápidos y una buena experiencia de usuario.
Herramientas como Adobe Photoshop, GIMP, Adobe Illustrator o Inkscape son ampliamente utilizadas para la edición y creación de imágenes optimizadas para la web.
Formatos de imagen recomendados para la web
- JPEG (o JPG): ideal para fotografías o imágenes con muchos colores. JPEG permite una buena compresión de la imagen, reduciendo el tamaño del archivo mientras mantiene una calidad aceptable. Es el formato más utilizado para imágenes en la web debido a su equilibrio entre calidad y tamaño de archivo.
- PNG: recomendado para imágenes que requieren transparencia (como logos) o cuando se necesita preservar detalles nítidos con menos compresión. Los archivos PNG son generalmente más grandes que los JPEG, pero ofrecen una calidad superior para ciertos tipos de imágenes.
- WebP: un formato moderno que proporciona compresión superior tanto para imágenes con pérdida (similar a JPEG) como sin pérdida (similar a PNG). WebP ofrece una calidad de imagen comparable a JPEG y PNG pero con tamaños de archivo significativamente menores, lo que mejora los tiempos de carga de las páginas web. Sin embargo, es importante verificar la compatibilidad del navegador.
- SVG: ideal para gráficos vectoriales como iconos y logos. SVG mantiene la calidad de la imagen a cualquier escala, lo que los hace perfectos para interfaces adaptables. Además, los archivos SVG suelen ser más pequeños que sus análogos en formato de mapa de bits y se pueden manipular con CSS y JavaScript.
Dimensiones recomendadas
El tamaño ideal de una imagen depende del uso previsto en la página web. Por ejemplo:
- Imágenes de fondo o de cabecera completa: deben tener al menos 1920 píxeles de ancho para cubrir pantallas de tamaño completo sin perder calidad.
- Imágenes de contenido: un ancho de 800 a 1200 píxeles suele ser adecuado para la mayoría de los propósitos, equilibrando calidad y velocidad de carga.
- Miniaturas e iconos: deben ser lo más pequeños posible sin sacrificar la claridad, generalmente entre 100 y 300 píxeles de ancho.
Pesos indicados
- Imágenes para web: idealmente, las imágenes no deben superar los 200 KB para cargas rápidas, aunque imágenes de alta calidad para fondos o secciones importantes pueden llegar hasta 500 KB bajo circunstancias específicas.
- Miniaturas e iconos: deben ser menores de 100 KB, preferiblemente alrededor de 30-50 KB para optimizar la velocidad de carga.
Herramientas y prácticas para la optimización
Utiliza herramientas de optimización como TinyPNG, JPEGmini o Squoosh para reducir el tamaño del archivo sin perder calidad perceptible.
Considera la implementación de técnicas de carga diferida –lazy loading– para imágenes, lo que significa que las imágenes solo se cargan cuando están a punto de entrar en el area de visión del usuario en el navegador.
Aplica técnicas de «responsive images» con atributos srcset y sizes en HTML para servir diferentes tamaños de imágenes basados en la resolución de pantalla del dispositivo, asegurando que los usuarios descarguen solo el tamaño de imagen que necesitan.
Siguiendo estas recomendaciones, puedes mejorar significativamente la velocidad de carga de las páginas, la experiencia del usuario y el rendimiento general de un sitio web.
5.6.2. Audio
El contenido de audio, como podcasts y música de fondo, puede agregar una dimensión adicional a la experiencia web, haciéndola más inmersiva. Sin embargo, debe utilizarse con precaución para no distraer o molestar a los usuarios.
Los elementos de audio son especialmente útiles en sitios web educativos, plataformas de medios y blogs personales, donde complementan la información presentada o crean un ambiente particular.
Las herramientas más usadas para editar y producir contenido de audio de calidad incluyen Audacity y Adobe Audition.
Formatos de audio recomendados para la web
- MP3: es el formato más común y ampliamente compatible para archivos de audio en la web. Ofrece un buen equilibrio entre calidad y tamaño de archivo, siendo suficiente para la mayoría de las necesidades de audio en la web.
- AAC (Advanced Audio Coding): proporciona una mejor calidad de sonido que MP3, lo que lo convierte en una excelente opción para aplicaciones que requieren una mayor fidelidad de audio. Es ampliamente soportado por navegadores modernos y dispositivos móviles.
- OGG (con codec Vorbis o Opus): es una alternativa libre de patentes a formatos como MP3 y AAC. Ofrece una calidad comparable o superior a MP3 con tamaños de archivo similares o menores. Sin embargo, su compatibilidad con navegadores no es tan universal como la de MP3 y AAC.
- Opus: es un codec de audio altamente versátil que proporciona una de las mejores eficiencias de compresión, manteniendo una alta calidad de audio. Es ideal para todo tipo de contenido, desde música hasta voz y es compatible con la mayoría de los navegadores modernos.
Duración y tamaño de archivo recomendado
El tamaño óptimo de un archivo de audio para la web dependerá del uso específico (por ejemplo: fondo de página, efectos de sonido, podcasts, etc.) y la duración del audio. A continuación, se ofrecen algunas pautas generales:
- Música: para música de fondo o pistas completas, es recomendable mantener el archivo de audio por debajo de 1 MB por minuto como máximo, lo cual es posible con una tasa de bits de aproximadamente 128 kbps para MP3, que es suficiente para una calidad de sonido aceptable sin ocupar demasiado espacio.
- Efectos de sonido: para efectos de sonido, notificaciones o clips cortos que se reproducen como respuesta a acciones del usuario, es mejor mantener estos archivos lo más pequeños posible, idealmente por debajo de 100 KB. Esto se puede lograr reduciendo la tasa de bits (64 kbps o menos) y la duración del clip.
- Podcasts: para contenido de voz, como podcasts o tutoriales, se puede optar por tasas de bits más bajas (64-96 kbps) sin sacrificar demasiado la calidad, apuntando a mantener el tamaño del archivo por debajo de 0.5 MB por minuto.
Optimizar el audio para la web
- Compresión: utiliza una tasa de bits adecuada para tu contenido sin comprometer demasiado la calidad. Para voz, 64-96 kbps pueden ser suficientes, mientras que para música, 128-192 kbps suelen ofrecer un buen equilibrio.
- Muestreo: ajusta la frecuencia de muestreo según sea necesario. Para archivos de voz, 44.1 kHz es más que suficiente, y en algunos casos, se puede reducir a 22.05 kHz para ahorrar espacio.
- Formatos: estudia la compatibilidad del navegador y elige formatos de audio que ofrezcan la mejor compresión y calidad para tu audiencia objetivo.
5.6.3. Vídeo
Los vídeos son una herramienta indispensable para contar historias, explicar conceptos complejos y mostrar productos o servicios en acción.
Para ser efectivos, deben ser de alta calidad, breves y enfocados, garantizando que complementen el contenido sin sobrecargar la página.
Plataformas como YouTube, Vimeo, Instagram o TikTok ofrecen opciones para incrustar vídeos en sitios web, mientras que herramientas como Adobe Premiere Pro, Final Cut Pro o CapCut son ampliamente utilizadas para la edición de vídeos.
A continuación, se presentan las recomendaciones sobre formatos, tamaños y optimizaciones indicados para videos en la web.
Formatos de vídeo recomendados para la web
- MP4 (con codec H.264): es el formato más común para vídeo en la web, gracias a su alta compatibilidad con navegadores y dispositivos móviles. El codec H.264 ofrece un excelente equilibrio entre calidad y tamaño de archivo, lo que lo hace ideal para streaming de vídeo.
- WebM (con codec VP8 o VP9): es un formato abierto, diseñado para la web. Ofrece calidad de video comparable a MP4 pero con tamaños de archivo potencialmente menores. Es especialmente útil para sitios que requieren soporte para HTML5 video en navegadores que no soportan MP4.
- HLS (HTTP Live Streaming): es un protocolo de streaming adaptativo desarrollado por Apple. Aunque no es un formato de archivo en sí mismo, HLS permite servir videos en diferentes calidades, ajustándose dinámicamente a la velocidad de la conexión del usuario. Esto mejora la experiencia de visualización en condiciones de red variables.
Tamaños y pesos recomendados
Determinar el tamaño y peso óptimo para un video en la web depende de varios factores, incluyendo la duración del video, la resolución y la calidad deseada. Veamos algunos escenarios comunes:
- Videos cortos (menos de 2 minutos): para clips cortos, como presentaciones de productos o anuncios, es recomendable mantener el tamaño del archivo por debajo de 5 MB si es posible. Esto se puede lograr reduciendo la resolución a 720p y utilizando una tasa de bits moderada (aproximadamente 1 Mbps para H.264).
- Videos de duración media (2-5 minutos): para tutoriales, reseñas y contenido similar, apunta a un tamaño de archivo de entre 5 MB y 10 MB. Esto puede requerir ajustar la tasa de bits y considerar una resolución de 720p o 1080p, dependiendo de la importancia de la calidad visual.
- Videos largos (más de 5 minutos): para contenidos extensos como webinars, conferencias o cursos, el uso de streaming adaptativo (como HLS) es la mejor opción. Si se prefiere un único archivo, considera mantener una tasa de bits baja (500 Kbps a 1 Mbps) y una resolución de 720p para controlar el tamaño del archivo.
Prácticas para optimización de video para la web
- Compresión: utiliza una tasa de bits adecuada para equilibrar calidad y tamaño de archivo. Las tasas de bits más bajas pueden reducir la calidad pero mejorarán los tiempos de carga y la accesibilidad en conexiones lentas.
- Resolución: considera la resolución óptima en función del dispositivo objetivo. Mientras que 1080p es estándar para una visualización de alta calidad, 720p puede ser suficiente para dispositivos móviles y mejorar la accesibilidad.
- Herramientas de compresión: utiliza herramientas de compresión de video como HandBrake, Adobe Media Encoder o servicios online para optimizar tus vídeos para la web.
- Pruebas en diferentes dispositivos: prueba la reproducción de tus videos en una variedad de dispositivos y velocidades de conexión para asegurar una experiencia de usuario consistente.
Siguiendo estas recomendaciones, puedes asegurar que tus videos se carguen rápidamente y se vean bien en la web, proporcionando una experiencia de usuario agradable sin comprometer la calidad visual.
5.6.4. Geolocalización
La geolocalización en la web es una tecnología que permite determinar y utilizar la ubicación geográfica de un usuario en tiempo real.
Esta funcionalidad se ha convertido, en algunos casos, en un recurso fundamental para personalizar experiencias de usuario, ofrecer contenido relevante basado en la proximidad y mejorar la funcionalidad de una amplia variedad de aplicaciones web.
Conceptos básicos
La geolocalización utiliza la IP del usuario, señales de WiFi, torres de telefonía móvil y en dispositivos con GPS, el satélite, para determinar una ubicación física aproximada.
Esta información puede ser usada para una variedad de propósitos, como por ejemplo:
- Personalización del contenido: mostrar información relevante basada en la ubicación del usuario, como noticias locales, ofertas, eventos, clima y recomendaciones de productos.
- Servicios basados en la ubicación (LBS): aplicaciones que ofrecen servicios específicos basados en la ubicación del usuario, como aplicaciones de entrega, servicios de taxi o ridesharing y herramientas de navegación.
- Publicidad geolocalizada: dirigir anuncios específicos a usuarios basados en su ubicación para aumentar la relevancia y la efectividad de las campañas publicitarias.
- Análisis de datos: recopilar datos de ubicación para analizar patrones de movimiento, preferencias de los usuarios y tendencias de consumo para mejorar servicios y productos.
Problemas de la geolocalización
La recopilación y uso de datos de ubicación plantea importantes consideraciones de privacidad. Es obligatorio obtener el consentimiento explícito del usuario antes de acceder a su ubicación y ser transparente sobre cómo se utilizará esa información.
Por otro lado, la precisión de la geolocalización puede variar significativamente dependiendo del método utilizado y del entorno (urbanos con alta densidad de señales frente a áreas rurales).
Por último, implementar la geolocalización de manera que funcione de forma fiable en diferentes dispositivos y navegadores, sin comprometer el rendimiento de la aplicación no es fácil, siendo en ocasiones incompatible algunos dispositivos en contextos determinados.
Mejores prácticas para el uso de la geolocalización web
- Pedir permiso: siempre solicita permiso al usuario antes de acceder a su ubicación. La mayoría de los navegadores y plataformas móviles muestran un diálogo de permiso de forma predeterminada.
- Transparencia sobre el uso de datos: proporciona información clara sobre cómo y por qué se utilizan los datos de ubicación, incluyendo políticas de privacidad accesibles.
- Optimización para la precisión: utiliza combinaciones de tecnologías de geolocalización para mejorar la precisión siempre que sea posible. Por ejemplo, combinar GPS con información de redes WiFi en dispositivos móviles.
- Manejo de errores: implementa un mecanismo de gestión de errores adecuado para casos donde el usuario deniegue el permiso de acceso a la ubicación o donde la información de ubicación no esté disponible.
- Uso eficiente de los datos: minimiza el uso de datos de ubicación para lo estrictamente necesario y evita solicitudes de ubicación frecuentes que pueden afectar el rendimiento y la duración de la batería en dispositivos móviles.
La integración de la geolocalización en la web abre un abanico de posibilidades para crear experiencias de usuario ricas y personalizadas. Sin embargo, es vital abordarla con una perspectiva ética centrada en el usuario, priorizando la privacidad, el consentimiento y la transparencia.
5.6.5. Difusión de contenidos
La difusión de contenidos en la web es una parte crítica de cualquier estrategia digital, ya que determina cómo y dónde se encontrará el público objetivo con el contenido creado.
Con la creciente cantidad de información disponible en Internet, es clave emplear métodos efectivos para asegurar que el contenido no solo llegue a su audiencia sino que también capte su atención y fomente la interacción.
A continuación, vamos a ver algunas estrategias y herramientas avanzadas para la difusión eficaz de contenidos en la web.
Estrategias de difusión de contenidos
- Optimización para motores de búsqueda (SEO): asegurar que el contenido sea descubierto a través de búsquedas orgánicas es fundamental. Esto implica la optimización de palabras clave, metaetiquetas, la estructura del contenido, la velocidad de carga de la página y la creación de backlinks de calidad. Herramientas como Google Analytics, SEMrush y Ahrefs pueden ayudar a analizar y mejorar estos aspectos.
- Marketing de contenidos: crear contenido valioso y relevante que resuene con la audiencia objetivo, no solo para atraerla sino para mantenerla comprometida. Esto incluye blogs, infografías, estudios de caso, videos y mucho más. Plataformas como HubSpot y WordPress son de gran ayuda para distribuir este tipo de contenido.
- Redes sociales: utilizar plataformas sociales para promover el contenido y fomentar la participación de la audiencia. Cada plataforma (como Facebook, Twitter, Instagram o TikTok) tiene su propio conjunto de mejores prácticas y tipos de contenido preferidos. Herramientas como Buffer, Hootsuite y Sprout Social permiten programar publicaciones y analizar el rendimiento del contenido en diferentes plataformas.
- Email marketing: a pesar de ser uno de los métodos más antiguos, el email marketing sigue siendo extremadamente efectivo para difundir contenido directamente a una audiencia interesada. Segmentar la lista de correo y personalizar el contenido del email aumenta la relevancia y la eficacia. MailChimp y Substack son plataformas populares que ofrecen estas capacidades.
- Publicidad pagada: invertir en publicidad pagada en motores de búsqueda (SEM) y redes sociales puede aumentar significativamente el alcance del contenido. La clave es apuntar a la audiencia correcta con mensajes y ofertas relevantes. Google Ads, Facebook Ads y TikTok Ads son las plataformas más utilizadas para la publicidad pagada.
Técnicas avanzadas de difusión
- Automatización del marketing: herramientas como Marketo, HubSpot y Salesforce Pardot permiten automatizar la difusión de contenidos y la interacción con la audiencia, desde la captura de leads hasta el calentamiento y la conversión de los mismos.
- Análisis de datos y A/B testing: utilizar herramientas de análisis web y pruebas A/B para entender cómo interactúa la audiencia con el contenido y optimizar la estrategia en consecuencia. Google Optimize y Optimizely son herramientas que facilitan estas pruebas.
- Influencer marketing: colaborar con influencers y creadores de contenido puede amplificar el alcance del contenido y mejorar su credibilidad. Plataformas como AspireIQ y BuzzSumo ayudan a identificar y gestionar relaciones con influencers relevantes para la marca.
- Contenido generado por el usuario (UGC): fomentar a la audiencia a crear y compartir contenido relacionado puede aumentar el engagement y proporcionar contenido auténtico. Incentivar reseñas, testimonios y participación en redes sociales son formas de impulsar el UGC.
- SEO local: para negocios con presencia física, optimizar el contenido para búsquedas locales (incluyendo Google My Business y Google Maps) puede atraer tráfico relevante y aumentar la visibilidad en áreas específicas.
La difusión efectiva de contenidos en la web requiere una combinación de estrategias bien planificadas, el uso de herramientas adecuadas y una constante adaptación a las tendencias digitales y preferencias de la audiencia. Al implementar estas tácticas avanzadas, las marcas pueden asegurar que su contenido no solo alcance a su público objetivo sino que también fomente la interacción, la lealtad y la conversión, contribuyendo significativamente al éxito de sus objetivos digitales.
5.7. Posicionamiento, analítica web y alojamiento
El éxito de un sitio web no solo depende de un diseño atractivo o contenido de calidad, sino también de cómo se posiciona en la web, se analiza su rendimiento y dónde se aloja.
Estos aspectos nos permitirán asegurar la visibilidad, el análisis correcto de la audiencia y la estabilidad del sitio.
5.7.1. Posicionamiento web
El posicionamiento en la web, especialmente a través del SEO (Search Engine Optimization), es un campo complejo y en constante evolución que abarca una amplia gama de técnicas destinadas a mejorar la visibilidad de un sitio web en los resultados de los motores de búsqueda –SERP: Search Engine Results Pages-.
Veamos algunas de las facetas del SEO, y cómo su optimización puede mejorar el posicionamiento de un sitio web.
Investigación de palabras clave
La base de una buena estrategia de SEO es una investigación de palabras clave exhaustiva. Esto implica identificar los términos y frases que los usuarios potenciales están buscando en los motores de búsqueda cuando buscan productos, servicios o información relacionada con lo que ofrece tu sitio web.
Como herramientas recomendadas podemos citar: Google Keyword Planner, SEMrush, Ahrefs y Google Trends.
Una buena estrategia es enfocarse en palabras clave de cola larga –long tail-, analizar la intención detrás de las búsquedas y observar a la competencia.
Optimización On-Page
La optimización on-page se refiere a todas las medidas que se pueden tomar directamente dentro del sitio web para mejorar su posición en los rankings de búsqueda. Esto incluye:
- Títulos de página y meta descripciones: deben ser únicos para cada página e incluir palabras clave relevantes.
- Estructura de URL: URLs claras y estructuradas lógicamente que incluyan palabras clave.
- Contenido de calidad: crear contenido relevante, de alta calidad y optimizado para las palabras clave objetivo.
- Optimización de imágenes: incluir palabras clave en los nombres de archivo de las imágenes y en sus atributos alt.
- Uso de encabezados: organizar el contenido de manera efectiva utilizando etiquetas H1, H2, etc.
- Web semántica: usar etiquetas que faciliten a los buscadores «entender» la importancia de cada contenido que aparece en tu web, como secciones, menús de navegación, pie de página, contenido adicional, etc.
Optimización Off-Page
Las estrategias off-page se centran en aumentar la autoridad del dominio de tu sitio web a través de la obtención de enlaces desde otros sitios web de alta calidad.
- Link building: el proceso de obtener enlaces entrantes desde sitios web relevantes y autorizados.
- Marketing de contenidos: crear contenido valioso que naturalmente atraiga enlaces.
- Social media marketing: aumentar la visibilidad y el alcance del contenido a través de las redes sociales.
SEO técnico
El SEO técnico incluye aquellos ajustes que mejoran la infraestructura de tu sitio web, asegurando que los motores de búsqueda puedan rastrear e indexar tu sitio más eficientemente.
- Velocidad de carga: utilizar herramientas como Google PageSpeed Insights para mejorar los tiempos de carga.
- Responsive design: asegurar que tu sitio web esté optimizado para dispositivos móviles.
- Seguridad: implementar HTTPS para proteger la información de los usuarios.
- Estructura de datos enriquecidos: usar esquemas de marcado para mejorar la forma en que los motores de búsqueda interpretan y muestran tu contenido.
Análisis y mejora continua
El SEO no es un proceso de configuración única, sino un esfuerzo continuo que requiere monitoreo y ajustes regulares.
- Análisis de rendimiento: utilizar Google Analytics y Google Search Console para rastrear el tráfico, las conversiones y la salud general del sitio.
- Pruebas A/B: experimentar con diferentes enfoques para ver qué funciona mejor en términos de SEO y UX.
El posicionamiento efectivo en la web a través del SEO es fundamental para el éxito a largo plazo de cualquier sitio web. Requiere una combinación de técnicas on-page y off-page, junto con un enfoque en el SEO técnico y un compromiso con la mejora continua basada en el análisis de datos. Mantenerse al día con las prácticas recomendadas y adaptarse a los cambios en los algoritmos de los motores de búsqueda, puede mejorar significativamente la visibilidad del sitio web, atraer más tráfico y alcanzar los objetivos planteados.
5.7.2. Analítica web
La analítica web es fundamental para entender cómo interactúan los usuarios con un sitio web y, poder así, tomar decisiones basadas en datos que mejoren su experiencia.
Al profundizar en la analítica web, se pueden descubrir insights valiosos sobre el comportamiento del usuario, la efectividad del contenido, y la eficiencia de las estrategias de marketing digital.
Componentes clave de la analítica web
- Análisis de tráfico: comprende no solo cuántos visitantes llegan al sitio, sino también cómo llegan. Esto incluye el tráfico directo, referido, orgánico de buscadores, y de campañas específicas. Herramientas como Google Analytics permiten segmentar el tráfico para entender mejor las fuentes y optimizar las estrategias de adquisición.
- Comportamiento del usuario: analiza qué hacen los usuarios una vez que llegan al sitio. Páginas vistas, tiempo en el sitio, tasa de rebote y caminos de navegación son métricas claves. Herramientas como Hotjar o Crazy Egg ofrecen mapas de calor y grabaciones de sesiones que ayudan a visualizar este comportamiento.
- Conversión: define lo que constituye una conversión para tu sitio, que puede variar desde completar una compra hasta suscribirse a un boletín. Establecer y monitorear objetivos en Google Analytics permite rastrear las conversiones y calcular el retorno de inversión (ROI) de diferentes canales de marketing.
- Segmentación de usuarios: divide a los usuarios en grupos basados en comportamientos, fuentes de tráfico, demografía, y otros, para entender y atender mejor a segmentos específicos. La segmentación avanzada es crítica para personalizar experiencias y aumentar la relevancia del contenido.
5.7.3. Alojamiento web
El alojamiento web es un elemento fundamental para cualquier sitio en internet, actuando como el hogar digital donde reside tu contenido.
Elegir el tipo correcto de alojamiento puede tener un impacto significativo en el rendimiento del sitio, la experiencia del usuario y la capacidad general para adaptarse a tus necesidades.
Veamos con más detalle los diferentes tipos de alojamiento, sus características y cuándo podrían ser la mejor opción.
Tipos de alojamiento web
| Alojamiento | Descripción | Ventajas | Desventajas |
| Compartido | Múltiples sitios web residen en un solo servidor, compartiendo recursos como CPU, memoria y espacio en disco. | Coste más bajo, fácil de configurar, ideal para sitios pequeños con tráfico moderado. | Recursos limitados, menor rendimiento durante picos de tráfico, menos control sobre la configuración del servidor. |
| Servidor Privado Virtual -VPS- | Divide un servidor físico en múltiples servidores virtuales. Aunque los recursos siguen siendo compartidos, cada sitio tiene asignaciones dedicadas, ofreciendo un mejor equilibrio entre coste y rendimiento. | Recursos dedicados, mejor rendimiento, más control sobre la configuración. | Requiere más conocimientos técnicos para gestionar, coste más alto que el alojamiento compartido. |
| Servidor dedicado | Tu sitio web tiene acceso exclusivo a todo el servidor. Esto proporciona el máximo rendimiento y control, pero a un coste significativamente mayor. | Control total sobre el servidor, rendimiento óptimo, recursos no compartidos. | Coste elevado, requiere un alto nivel de conocimiento técnico para administrar. |
| En la nube | Utiliza múltiples servidores en la nube para equilibrar la carga y maximizar el tiempo de actividad. Es altamente escalable, lo que significa que puedes ajustar los recursos según la demanda. | Alta escalabilidad, pago por uso, excelente tiempo de actividad y redundancia. | La estructura de precios puede ser compleja, y la configuración y gestión requieren conocimientos técnicos. |
| Gestionado para WordPress | Especializado y optimizado para sitios de WordPress, donde el proveedor se encarga de aspectos técnicos como seguridad, backups y actualizaciones. | Optimización específica para WordPress, soporte experto, mayor seguridad. | Más caro que el alojamiento compartido, menos flexibilidad que un VPS o servidor dedicado. |
Cómo elegir un alojamiento web
- Tráfico esperado: si esperas un alto volumen de tráfico, considera VPS o alojamiento en la nube para mejor rendimiento.
- Presupuesto: el alojamiento compartido es más adecuado para presupuestos limitados, pero si el rendimiento es crítico, podría valer la pena invertir en opciones más robustas.
- Necesidades técnicas: sitios complejos con necesidades específicas de software pueden requerir un VPS o un servidor dedicado para configuración personalizada.
- Escalabilidad: si anticipas un crecimiento rápido, el alojamiento en la nube ofrece la flexibilidad para escalar recursos rápidamente.
- Gestión: el alojamiento gestionado ofrece paz mental a través de soporte experto, ideal si no tienes un equipo técnico.
Servicios de alojamiento populares
- Alojamiento compartido y VPS: Bluehost, SiteGround, InMotion Hosting, Webempresa, 1&1 IONOS, Arsys,…
- Alojamiento dedicado: HostGator, A2 Hosting, Liquid Web, Interdominios, Acens,…
- Alojamiento en la nube: Amazon Web Services, Google Cloud Platform, Microsoft Azure.
- Alojamiento gestionado para WordPress: WP Engine, Kinsta, Flywheel, Raiola Networks,…
La elección del tipo de alojamiento web adecuado es importantísimo para el éxito de tu sitio web. Analiza cuidadosamente tus necesidades actuales y futuras, presupuesto y nivel de experiencia técnica al tomar esta decisión. Invertir en el alojamiento correcto desde el principio puede ahorrarte muchos problemas y asegurar que tu sitio web sea rápido, seguro y capaz de crecer junto con tu negocio.
Almudena Bengoechea Carazo
Hola Lope, soy Almudena profe de Tecnología. En primer lugar felicitarte por esta web y agradecerte que compartas tus conocimientos.
Actualmente estoy impartiendo TIC de 2 de bachillerato Qué prácticas has propuesto a tu alumnado para desarrollar este tema??
Lope
Hola Almudena, muchas gracias por tu comentario.
Para mi lo importante de este tema es que sepan usar las etiquetas más importantes de HTML y las reglas más comunes de CSS, además de conocer las tres maneras que hay de incorporar instrucciones CSS al HTML. Cualquier ejercicio que trabaje eso será útil. La profundidad y nivel de detalle con el que se planteen estas prácticas depende mucho del tiempo que le dediques al tema, y también del tipo de alumnado que tengas. Algunos les ponemos 5 ejercicios y un examen, otros 7 ejercicios y otros 2 ejercicios. Es algo que debes valorar en función de todo lo anterior. Por otro lado, los propios criterios de evaluación implicados te van a dar una orientación muy clara de lo que debes evaluar.
Saludos.