Evolución y fundamentos de la web
En el mundo del desarrollo web, comprender la evolución histórica de la red es esencial para crear sitios modernos, accesibles y optimizados para los motores de búsqueda. Este curso aborda los conceptos clave que aparecen en el cuestionario: la transición de Web 1.0 a Web 2.0, la estructura básica de un documento HTML, las pseudoclases CSS que mejoran la interacción del usuario, los formatos de imagen más adecuados para transparencias y los factores de SEO que realmente importan.
Web 1.0 vs Web 2.0
Principales innovaciones de la Web 2.0
La Web 2.0 marcó un cambio de paradigma respecto a la Web 1.0. Mientras la primera se caracterizaba por ser estática y centrada en la consumición de contenido, la segunda introdujo la participación activa del usuario. Las características más relevantes son:
- Creación y compartición de contenido por parte de los usuarios (blogs, redes sociales, wikis).
- Aplicaciones web interactivas basadas en AJAX que permiten actualizar partes de la página sin recargar.
- Modelos de negocio basados en user‑generated content y crowdsourcing.
- Mayor énfasis en la experiencia de usuario (UX) y la colaboración en tiempo real.
Esta transformación no dependió de la introducción de HTTPS, HTML5 o la eliminación de plugins, aunque esas tecnologías llegaron posteriormente y reforzaron la evolución.
Estructura básica de una página HTML
El elemento que contiene la información visible
Todo documento HTML se compone de dos bloques principales: <head> y <body>. El elemento <body> es el contenedor de todo lo que el usuario ve en el navegador: textos, imágenes, formularios, videos y cualquier otro recurso visual.
Ejemplo simplificado:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi primera página</title>
</head>
<body>
<h1>¡Hola Mundo!</h1>
<p>Este es el contenido visible.</p>
</body>
</html>
Los elementos <meta>, <title> y <head> son esenciales para la optimización SEO y la correcta interpretación del documento, pero no aparecen en la pantalla del usuario.
Pseudoclases CSS para interacción
La pseudoclase :hover
Para mejorar la interacción y la accesibilidad, los diseñadores utilizan pseudoclases CSS. La más común para cambiar el estilo de un enlace al pasar el cursor es :hover. Su sintaxis básica es:
a:hover {
color: #ff6600; /* Cambia el color del texto */
text-decoration: underline;
}
Otras pseudoclases como :active, :focus o :visited cumplen funciones distintas: :active se activa mientras el elemento está siendo pulsado, :focus cuando recibe el foco del teclado y :visited indica enlaces ya visitados. Pero para el efecto de “cambio de color al pasar el cursor” la respuesta correcta es :hover.
Formatos de imagen y transparencia
PNG como estándar sin pérdida
Cuando se necesita conservar transparencias y mantener la calidad original, el formato PNG (Portable Network Graphics) es la mejor opción. Sus ventajas principales son:
- Soporte de canal alfa de 8 bits, que permite transparencias suaves y semitransparentes.
- Compresión sin pérdida, lo que garantiza que la imagen no pierda calidad al guardarse varias veces.
- Amplio soporte en todos los navegadores y dispositivos.
Otros formatos como JPEG pierden calidad por compresión con pérdida y no admiten transparencia; GIF sí permite transparencia pero solo binaria (total o nada) y está limitado a 256 colores; WEBP ofrece compresión eficiente y transparencia, pero su compatibilidad todavía no es universal en navegadores antiguos. Por ello, para la mayoría de los casos de uso en la web tradicional, PNG sigue siendo la elección recomendada.
SEO: factores que influyen en el posicionamiento
Qué no evalúan directamente los bots de Google
Los algoritmos de Google analizan cientos de señales para determinar la posición de una página en los resultados de búsqueda. Entre los factores directamente evaluados se encuentran:
- Presencia y densidad natural de palabras clave relevantes.
- Calidad, originalidad y profundidad del contenido.
- Estructuración adecuada de encabezados (
h1,h2,h3, …) que facilita la comprensión del tema. - Velocidad de carga, uso de HTTPS y experiencia móvil.
En contraste, el número de visitas diarias no es un factor que los bots de Google tomen en cuenta de forma directa. Aunque el tráfico puede ser un indicador indirecto de relevancia (por ejemplo, a través de métricas de comportamiento como el tiempo en página), los crawlers no acceden a estadísticas de visitas ni las utilizan como señal de ranking. Por lo tanto, la respuesta correcta a la pregunta del cuestionario es que el número de visitas que recibe la página cada día no es evaluado directamente por los bots.
Conclusión y buenas prácticas
Dominar los conceptos presentados en este curso permite crear sitios web que no solo son interactivos y visualmente atractivos, sino también optimizado para buscadores. Recuerda:
- Fomentar la participación del usuario mediante técnicas propias de la Web 2.0.
- Organizar tu HTML con un
<body>bien estructurado y semántico. - Utilizar pseudoclases como
:hoverpara mejorar la experiencia de navegación. - Elegir el formato de imagen adecuado (PNG para transparencias sin pérdida).
- Enfocarte en factores de SEO que realmente impactan el ranking y no en métricas de tráfico que los bots no consideran.
Aplicando estas buenas prácticas, estarás preparado para desarrollar proyectos web modernos, accesibles y posicionados en los primeros resultados de búsqueda.
