📚 Introducción al desarrollo web: HTML y CSS (1/2)
🗂️ Cómo funciona la Web
1. Evolución de la Web: de la página web a la aplicación web
✅ Resumen
La Web ha evolucionado significativamente desde su creación en 1990, cuando las páginas solo contenían texto. Con el tiempo, HTML incorporó nuevas capacidades como imágenes, tablas y formularios, lo que permitió una mayor interacción y complejidad en el diseño web. Esta evolución transformó las páginas estáticas en aplicaciones web (web apps), que hoy permiten realizar tareas equivalentes a software tradicional, como editar documentos o gestionar correos, directamente desde el navegador.
Las aplicaciones web presentan ventajas clave: no requieren actualizaciones manuales, son accesibles desde cualquier dispositivo con navegador (independencia de dispositivo) y permiten el acceso ubicuo a la misma información desde distintos lugares (computación en la nube). Sin embargo, su desarrollo exige conocimientos avanzados en programación y bases de datos. Recientemente, han surgido mercados de aplicaciones web, como Google Chrome Web Store y Firefox Marketplace, que facilitan la distribución y uso de estas herramientas. Esta evolución refleja cómo la Web pasó de ser un medio de consumo de contenido a una plataforma versátil y esencial en la era digital.
2. El hipertexto y la hipermedia
✅ Resumen
El hipertexto, base fundamental de la Web, no fue inventado por Tim Berners-Lee, sino que es el resultado de contribuciones de varios visionarios a lo largo del siglo XX. Paul Otlet, a principios del siglo, imaginó Mundaneum, un sistema centralizado de conocimiento interconectado mediante fichas, anticipando una red global de documentos. En 1945, Vannevar Bush conceptualizó el "memex", un dispositivo para crear y seguir enlaces entre documentos. No fue hasta 1963 cuando Ted Nelson acuñó los términos "hipertexto" e "hipermedia", desarrollando el proyecto Xanadú.
El hipertexto se define como un conjunto estructurado de textos unidos por enlaces, permitiendo una navegación no lineal. La hipermedia surge de combinar el hipertexto con elementos multimedia (sonido, imagen, video), enriqueciendo la experiencia de usuario. Tim Berners-Lee reconoce que su contribución fue integrar el concepto de hipertexto con tecnologías existentes como TCP y DNS, dando origen a la Web tal como la conocemos. Así, la Web es la materialización más exitosa de estas ideas pioneras.
3. Las URLs
✅ Resumen
Tim Berners-Lee, reconocido como el padre de la Web, desarrolló las tres tecnologías fundamentales que la hacen posible: HTML para crear páginas web, HTTP para la comunicación entre navegador y servidor, y URL para el direccionamiento de recursos.
Una URL tiene un formato básico compuesto por esquema (protocolo como http o https), máquina (dominio), directorio y archivo. Su correcta definición es crucial, ya que Berners-Lee enfatiza que deben permanecer válidas durante décadas para evitar el error 404 ("página no encontrada") cuando los contenidos se mueven o eliminan.
Para manejar URLs largas y complejas, existen acortadores como los de Google o bitly, especialmente útiles en plataformas con límites de caracteres como Twitter. Cabe destacar que el término URL técnicamente forma parte del concepto más amplio URI (Identificador Uniforme de Recurso), aunque su uso sigue siendo predominante. La estructuración coherente de URLs es esencial para la integridad del hipertexto web.
4. Los nombres de dominio
✅ Resumen
Las URLs son direcciones para localizar recursos en Internet y se componen de varias partes: documento, ruta, nombre de dominio y esquema/protocolo. El nombre de dominio identifica de forma única un sitio web y puede incluir subdominios. Originalmente limitados a caracteres ASCII (95 caracteres imprimibles), hoy existen nombres de dominio internacionalizados que permiten usar caracteres como vocales acentuadas o eñe.
Internamente, los ordenadores se identifican mediante direcciones IP, existiendo una correspondencia con los nombres de dominio. Los dominios se organizan en niveles: los de primer nivel pueden ser genéricos (.com, .org) o territoriales (.es, .fr). Los genéricos se asignan por orden de solicitud, mientras los territoriales siguen normas de cada país (en España los gestiona red.es). Los dominios de segundo nivel (como idesweb.es) son los que registramos comúnmente. Algunos países como España tienen terceros niveles organizativos (.gob.es, .edu.es).
El análisis de una URL como http://www.dlsi.ua.es muestra esta estructura: .es (nivel superior territorial), .ua (segundo nivel), www.dlsi (subdominio/host). La comprensión de esta estructura es esencial para navegar y gestionar recursos web eficientemente.
5. Los nuevos nombres de dominio
✅ Resumen
La introducción de nuevos dominios de nivel superior genéricos (gTLDs) en 2014 por la ICANN (Internet Corporation for Assigned Names and Numbers) tuvo como objetivo ampliar el sistema de nombres de dominio de Internet y diversificar las posibilidades de identificación de sitios web.
Hasta ese momento, los gTLDs disponibles eran limitados (por ejemplo, .com, .org, .net, .info, .biz, .edu, .gov, .mil). Sin embargo, ante el crecimiento de Internet y la saturación de ciertos dominios, ICANN abrió en 2012 un proceso para que empresas, comunidades, instituciones y marcas pudieran solicitar sus propios gTLDs. Tras un proceso de evaluación técnica, financiera y legal, los primeros comenzaron a activarse en 2014.
Este cambio permitió la aparición de extensiones mucho más diversas y específicas, como:
- Basadas en marcas: .google, .apple, .microsoft.
- Basadas en sectores o actividades: .shop, .hotel, .bank.
- Basadas en comunidades o regiones: .cat (catalán), .eus (euskera), .gal (gallego).
- Basadas en genéricos innovadores: .online, .xyz, .tech.
6. Las direcciones IP y el sistema de nombres de dominio
✅ Resumen
Las direcciones IP identifican dispositivos en Internet. IPv4 (32 bits, formato como 192.168.1.1) ofrece unos 4.300 millones de direcciones, insuficientes para la demanda actual. IPv6 (128 bits, notación hexadecimal) soluciona este límite con un espacio prácticamente ilimitado, aunque su adopción ha sido lenta.
Los nombres de dominio (ej: google.com) deben traducirse a direcciones IP para que los dispositivos se comuniquen. Esta traducción la realiza el DNS, una base de datos distribuida globalmente entre servidores especializados. Cuando un dispositivo necesita acceder a un dominio, consulta a un servidor DNS que, si no tiene la información, la busca en otros servidores hasta encontrar la IP correspondiente.
Las ventajas del DNS son clave: los nombres son más fáciles de recordar que las IPs numéricas, y permiten que una IP pueda cambiar sin afectar el nombre de dominio, manteniendo la accesibilidad del servicio. El texto finaliza sugiriendo investigar los "registros DNS", que son los tipos de entradas específicas que gestionan estas correspondencias y otras funcionalidades en el sistema.
7. Creación de una página web con Blogger (1): estructura de un blog
✅ Resumen
En esta lección se explica cómo crear un blog.
Un blog es un sitio web compuesto por entradas ordenadas cronológicamente, donde la más reciente aparece primero. Su estructura básica incluye un título, descripción, entradas fechadas (que pueden tener autor, etiquetas y comentarios), y sistemas de navegación como archivos cronológicos, etiquetas temáticas o búsqueda.
Para crear un blog, se necesita una cuenta de Google. Al acceder a Blogger, se elige un título y una URL única (que terminará en blogspot.com), y una plantilla visual (modificable luego). Tras la creación, se puede publicar la primera entrada inmediatamente. El blog tiene una parte pública (visible para todos) y una privada (panel de administración accesible solo para el autor desde blogger.com), donde se gestiona el contenido y configuraciones.
📖 Creación de una página web con Blogger (1): estructura de un blog
8. Creación de una página web con Blogger (2): configuración básica
✅ Resumen
En esta lección se explica la configuración esencial de un blog en Blogger. La configuración está organizada en seis secciones principales.
En "Lo básico" se establece el título, descripción, privacidad y permisos, permitiendo añadir autores o restringir el acceso a lectores específicos.
"Entradas y comentarios" controla el número de entradas visibles, la moderación de comentarios y opciones anti-spam.
"Móvil y correo electrónico" activa funciones de publicación por SMS/email y notificaciones.
En "Idioma y formato" es crucial ajustar la zona horaria correcta para las fechas.
"Preferencias para motores de búsqueda" optimiza el posicionamiento con metaetiquetas.
Finalmente, "Otros" incluye herramientas clave como exportar/importar el blog (copia de seguridad) y gestionar la sindicación RSS.
Las configuraciones más relevantes son: definir la privacidad del blog, moderar comentarios, establecer la zona horaria correcta y realizar copias de seguridad periódicas. Estas opciones se configuran generalmente una vez durante la creación inicial del blog.
📖 Creación de una página web con Blogger (2): configuración básica
9. Creación de una página web con Blogger (3): edición básica de una entrada
✅ Resumen
En esta lección se explica la creación y edición de entradas en Blogger. Para crear una nueva entrada, se accede desde el panel de administración y se define un título y contenido. La barra de herramientas ofrece opciones de formato básico (negrita, cursiva, listas, alineación), aunque se desaconseja el subrayado. Es importante configurar las opciones de cada entrada: etiquetas (temas), programación de publicación (fecha/hora específica), enlace permanente personalizable y ubicación geográfica opcional.
Las entradas pueden guardarse como borrador o publicarse inmediatamente. Una vez publicadas, permanecen editables desde la vista de administración o directamente desde la página pública del blog. La edición permite modificar texto, añadir contenido o eliminar la entrada completamente.
📖 Creación de una página web con Blogger (3): edición básica de una entrada
10. Creación de una página web con Blogger (4): edición avanzada de una entrada
✅ Resumen
En esta lección se enseña a insertar elementos multimedia y etiquetas en entradas de Blogger. Para crear un enlace, se selecciona el texto y se pega la URL destino usando el botón correspondiente.
Las imágenes pueden insertarse de tres formas: desde una URL (copiando la dirección de una imagen en internet), subiéndolas desde el ordenador (seleccionando uno o varios archivos) o desde álbumes existentes. Es posible ajustar su tamaño (pequeño, mediano, grande) antes de añadirlas. Los vídeos se insertan principalmente desde YouTube mediante búsqueda directa en la plataforma, o subiéndolos desde el dispositivo.
Las etiquetas permiten clasificar las entradas por temas (como "imagen" o "vídeo"). Pueden asignarse individualmente o a múltiples entradas simultáneamente, facilitando la organización y navegación del contenido.
📖 Creación de una página web con Blogger (4): edición avanzada de una entrada
11. Creación de una página web con Blogger (5): diseño y gadgets
✅ Resumen
En esta lección se explica cómo personalizar el diseño visual de un blog en Blogger y añadir gadgets (complementos). La plantilla o aspecto visual puede cambiarse en cualquier momento accediendo a la galería de plantillas, donde se puede previsualizar y aplicar un nuevo diseño. Además, la opción "Personalizar" permite ajustar detalles como colores, anchos de página, tipografías y estructura de columnas.
La sección "Diseño" muestra la estructura del blog y permite añadir gadgets en zonas específicas (como barras laterales). Se explica cómo insertar el gadget de "Etiquetas", que puede configurarse para mostrar las etiquetas como lista o nube, ordenadas alfabéticamente o por frecuencia. Los gadgets pueden reorganizarse arrastrándolos a distintas posiciones. La personalización del diseño y la incorporación de gadgets permiten mejorar la funcionalidad y navegación del blog, como filtrar entradas por etiquetas directamente desde la interfaz pública.
📖 Creación de una página web con Blogger (5): diseño y gadgets