Antes de diseñar y publicar en la web hay que entender el terreno: cómo nació la red, qué la sostiene y qué significa cada término que aparece en el trabajo profesional.
Para ubicar el tema
La estructura. Qué es un título, un párrafo, una imagen, un enlace. El esqueleto invisible de todo lo que aparece en pantalla.
El aspecto. Tipografía, color, retícula, espaciado y comportamiento responsivo. Aquí la formación en diseño se vuelve código.
La producción. Construir sitios completos de forma visual, sin escribir todo el código a mano.
Sesión 1.1
No son sinónimos, y confundirlos es el error más común del tema.
Los dos protocolos que mueven los datos y por qué éstos se fragmentan.
Identificar cada parte y saber cuáles se controlan al publicar un sitio.
Recomendar a un cliente un nombre y una extensión con criterio.
Por qué hoy ningún proyecto profesional se publica sin candado.
Dialogar con desarrolladores, proveedores de hosting y clientes.
Origen
Internet es el resultado del experimento ARPANET (Advanced Research Projects Agency Network · Red de la Agencia de Proyectos de Investigación Avanzada), creada para compartir recursos de cómputo entre instituciones de investigación: en los años sesenta las computadoras eran carísimas y estaban en pocos lugares.
El reto era conectarlas sin depender de un punto único. Una red centralizada tiene un solo punto de falla: si cae el nodo del centro, cae todo. Una red en malla ofrece varios caminos entre dos puntos, así que puede perder nodos y seguir funcionando.
Centralizada
En malla
29 de octubre de 1969
La primera transmisión de ARPANET ocurrió entre la UCLA (University of California, Los Angeles · Universidad de California en Los Ángeles) y el SRI (Stanford Research Institute · Instituto de Investigación de Stanford).
El operador intentó escribir LOGIN para entrar al equipo remoto. El sistema del otro extremo se cayó en la tercera letra.
Aquello viajaba como texto plano sobre líneas telefónicas dedicadas: no existía cifrado de ningún tipo. Eso llegaría casi treinta años después.
Mensaje efectivamente transmitido: “LO”
Origen
Concepto clave
La infraestructura. Cables submarinos, fibra óptica, antenas, satélites y enrutadores, más un conjunto de reglas comunes que permite que todo eso se entienda entre sí.
Equivale a la red de carreteras, la señalización y las reglas de tránsito de un país.
Un servicio que corre encima. El conjunto de páginas y aplicaciones que se consultan con un navegador mediante direcciones web.
Equivale a los autobuses urbanos: usan las carreteras, pero no son las carreteras.
Sobre Internet corren también, sin ser “la Web”:
Cómo funciona
El idioma que hablan los programas entre sí. Cuando el navegador pide una página usa HTTP; cuando averigua a qué servidor pedírsela usa DNS; un gestor de correo usa protocolos propios de correo.
Es la única capa que se toca directamente al publicar un sitio.
Decide a qué programa del equipo va cada dato, mediante números de puerto, y si la entrega debe ser garantizada (TCP) o rápida aunque imperfecta (UDP).
IP coloca la dirección de origen y destino en cada paquete y decide por qué camino sale. Es la capa que permite que redes distintas —la red Wi-Fi de una casa, la fibra del proveedor, el centro de datos— se conecten entre sí.
El medio físico real: el cable Ethernet, la señal Wi-Fi, la fibra óptica, la antena 5G. Convierte los datos en pulsos eléctricos, luz u ondas de radio.
Cómo funciona
Bajo ese nombre conviven dos protocolos con tareas distintas:
Pone la dirección y elige la ruta de cada paquete.
Numera, confirma, retransmite y reordena.
Al subir una imagen de 4 MB a un servidor, esa imagen se fragmenta en miles de paquetes que pueden tomar rutas distintas y se reensamblan al llegar.
Cómo funciona
Confirma cada paquete, retransmite los que se pierden y los reordena. Más lento, pero nada se pierde.
Se usa en: páginas web, correo y la subida de archivos al hosting.
Si tarda, el usuario espera; pero la imagen llega completa.
Envía sin esperar confirmación. Puede perder o desordenar paquetes, pero no se detiene.
Se usa en: videollamadas, streaming, videojuegos y consultas de nombres.
Por eso en una videollamada la imagen se pixelea un segundo en lugar de congelarse esperando.
Direcciones
Una dirección IP es una cadena de números que identifica de forma única a un dispositivo dentro de una red.
Cuando una computadora solicita una página, indica la dirección del servidor al que se dirige e incluye la suya propia: igual que un sobre lleva destinatario y remitente. Sin remitente, la respuesta no sabría a dónde volver.
Direcciones
Cuatro números de 0 a 255 separados por puntos.
4 294 967 296 direcciones posibles. Se agotaron en 2011.
Ocho grupos de cuatro dígitos hexadecimales.
3.4 × 1038 direcciones. Prácticamente inagotables.
Comparación de escala, en proporción logarítmica:
Si IPv4 alcanzara para media dirección por persona en el planeta, IPv6 alcanzaría para asignar miles de millones de direcciones a cada grano de arena de la Tierra.
Direcciones
Como IPv4 se agotó, el proveedor asigna una sola dirección pública a todo el domicilio. El enrutador reparte internamente direcciones privadas y traduce las conversaciones: a eso se le llama NAT.
| Pública | Visible en todo Internet. La asigna el proveedor de servicio. |
| Privada | Solo dentro de la red local. 192.168.x.x · 10.x.x.x |
| Loopback | El propio equipo. 127.0.0.1 · localhost |
Nombres
El DNS traduce nombres legibles por personas a direcciones numéricas.
Funciona como la agenda de contactos de Internet: en el teléfono se guarda “Mamá” y el aparato marca el número. Del mismo modo se escribe uaemex.mx y el DNS entrega la dirección correspondiente.
Sin él, la web sería una lista de números. Con él, un dominio se convierte en marca, y eso ya es terreno de diseño.
Nombres · DNS
Ningún servidor conoce la respuesta completa. Cada uno indica a quién preguntar después, hasta llegar al que sí tiene el dato. Estos son los cinco participantes de esa cadena.
Nombres
| Registro | Para qué sirve |
|---|---|
| A | Apunta el dominio a una dirección IPv4. Es el más utilizado. |
| AAAA | Lo mismo, pero hacia una dirección IPv6. |
| CNAMECanonical Name · Nombre Canónico | Alias de un nombre hacia otro nombre. Típico para www. |
| MXMail Exchange · Intercambio de Correo | Define qué servidor recibe el correo del dominio. |
| TXTText · Texto | Texto libre: verificaciones de propiedad y políticas antispam. |
| NSName Server · Servidor de Nombres | Indica qué servidores mandan sobre el dominio. |
Por eso, antes de migrar el sitio de un cliente conviene bajar el TTL con días de anticipación, y conviene no prometer que el cambio surtirá efecto al instante.
Nombres
[ tercer nivel ] . [ segundo nivel ] . [ primer nivel ]
Una sección independiente dentro del mismo dominio. Se crea desde el panel de hosting y no se paga aparte: la Facultad de Arquitectura y Diseño ocupa fad.uaemex.mx sin haber registrado un dominio propio.
La parte que se registra y se renueva cada año. Es el activo de marca: corto, pronunciable en voz alta, sin guiones ni números que obliguen a deletrear.
Aquí ocupa el segundo nivel, justo antes de la extensión.
Sigue siendo la parte que se registra y se renueva: no cambió lo que se compra, cambió la estructura que lo rodea.
Al insertarse .com como segundo nivel, el nombre elegido se recorre al tercer nivel y el subdominio fad pasa al cuarto.
El dominio de primer nivel: la extensión final, siempre la última. Cuando corresponde a un país se le llama ccTLD (country code Top Level Domain · Dominio de Primer Nivel Territorial), y ancla el sitio a ese territorio.
En un dominio .com.mx el .com no es la extensión final, sino un nivel intermedio que señala uso comercial dentro de México. La extensión sigue siendo .mx.
Existen otras combinaciones equivalentes: .org.mx, .net.mx, .edu.mx, .gob.mx.
Nombres
.com .org .net .info
Abiertos a cualquiera. .com aporta reconocimiento comercial inmediato.
.mx .es .ar .co
Ligados a un territorio. Buenos para negocio local.
.edu .gob.mx .mil
Restringidos: exigen acreditar pertenencia al sector.
.design .studio .dev .app
Descriptivos y disponibles. .dev y .app obligan a usar conexión cifrada.
La asignación mundial de dominios y direcciones la coordina la ICANN (Internet Corporation for Assigned Names and Numbers · Corporación de Internet para la Asignación de Nombres y Números).
La Web
HTTP es el protocolo con el que el navegador solicita e interpreta los recursos de una página. Su problema: la información viaja en texto plano.
HTTPS (HyperText Transfer Protocol Secure · Protocolo Seguro de Transferencia de Hipertexto) combina HTTP con TLS (Transport Layer Security · Seguridad de la Capa de Transporte) para cifrar los datos en tránsito. Aporta confidencialidad, integridad y autenticidad.
Lo que ve alguien interceptando la red del café donde un cliente llena el formulario:
La Web
Todo bien: el recurso existe y ahí está. Es la respuesta que un navegador recibe miles de veces al día sin que nadie lo note.
“Esta dirección ya no es ésta, hay que ir a esta otra.” Es fundamental al rediseñar un sitio: si se cambian las direcciones sin colocar redirecciones 301, se pierde todo el posicionamiento acumulado en buscadores y dejan de funcionar los enlaces externos que apuntaban al sitio.
El recurso existe, pero el visitante no tiene permiso para verlo. En WordPress suele deberse a permisos de archivo mal configurados tras subir el sitio al servidor.
La dirección no corresponde a ningún recurso. Es una página que sí se diseña: un buen 404 mantiene la identidad de la marca y ofrece una salida, en lugar de dejar al usuario en un callejón.
Algo se rompió del lado del servidor. En WordPress casi siempre se trata de un complemento o un tema incompatible; la llamada “pantalla blanca” suele ser esto.
El servidor está saturado o en mantenimiento. Es el código correcto durante una actualización planificada, porque le indica al buscador “vuelve más tarde, no elimines este sitio del índice”.
La Web
Entre 1989 y 1991, Tim Berners-Lee creó en el CERN los tres pilares sobre los que se trabaja durante todo el semestre.
El lenguaje con el que se escribe el documento: qué es título, qué es párrafo, qué es imagen.
Es el tema que sigue en la asignatura.
El transporte que lleva ese documento desde el servidor hasta el navegador que lo solicita.
Hoy siempre en su versión cifrada.
La dirección única de cada recurso. Sin ella el navegador no sabría qué pedir ni a quién.
Y es lo que un cliente escribe en su tarjeta de presentación.
La Web
El protocolo de acceso. Puede ser https, http, mailto o ftp (File Transfer Protocol · Protocolo de Transferencia de Archivos). Hoy debe ser siempre https.
Identifica una sección con vida propia dentro del mismo dominio. Aquí corresponde a la Facultad de Arquitectura y Diseño, que tiene su propio sitio sin dejar de pertenecer a la Universidad.
El nombre registrado. Es lo único de toda la dirección que se compra y se renueva cada año.
La extensión. Junto con el subdominio y el dominio forma el host: el conjunto que el DNS traduce a una dirección numérica.
Indica dónde está el recurso dentro del servidor. Es lo que se define al organizar el menú del sitio: la jerarquía de páginas se refleja aquí.
Parámetros que van después de ?, en pares clave=valor unidos por &. Sirven para filtrar, buscar o medir campañas.
Apunta a una sección concreta dentro de la página. No viaja al servidor: lo resuelve el navegador. Es lo que utilizan los menús de una página de una sola pantalla.
La Web
Ilegible e imposible de dictar por teléfono. No dice nada de su contenido, ni a la persona ni al buscador.
Se lee, se recuerda, se comparte y describe el contenido. El buscador la premia y el cliente la entiende.
Reglas rápidas: minúsculas · guiones en lugar de espacios · sin acentos ni eñes · cortas · sin palabras de relleno.
Cierre conceptual
Definen dónde vive el sitio y bajo qué nombre. Es la primera decisión de marca del proyecto.
Define bajo qué condiciones se entrega. Sin él, el navegador marca el sitio del cliente como inseguro.
Definen cómo se navega. Es arquitectura de información, y es trabajo de diseño.
Definen qué experimenta el usuario. Es donde inicia la producción en la siguiente sesión.
Un diseñador que entiende la infraestructura no depende de nadie para publicar su trabajo.
Repaso
Sin coincidencias.
Evaluación
A partir del sitio de un estudio de diseño o una marca de referencia, entregar un documento con capturas de pantalla.
01 Desarmar su dirección: señalar qué partes tiene y cuáles no.
02 Obtener su dirección IP con ping o nslookup. ¿IPv4 o IPv6?
03 Trazar la ruta con tracert. ¿Cuántos saltos hay hasta el servidor?
04 Abrir el candado: ¿quién emitió el certificado y cuándo expira?
05 Analizar su dominio: ¿por qué ese nombre y esa extensión?
06 Explicar en un párrafo el recorrido completo, desde que se escribe el dominio hasta que aparece la página.
| Criterio | Peso |
|---|---|
| Precisión técnica | 40 % |
| Evidencia (capturas) | 30 % |
| Explicación escrita | 20 % |
| Presentación y ortografía | 10 % |
¿Por qué Internet y la Web no son lo mismo? · ¿Qué hace TCP que IP no hace? · ¿Por qué existe IPv6? · ¿Qué agrega la S de HTTPS? · ¿Por qué un cambio de DNS no es inmediato? · ¿Qué es un 301 y por qué importa en un rediseño?
Fin de la sesión 1.1
La próxima sesión: la primera página escrita en HTML. Se requiere computadora con un editor de código instalado.
Fuentes: Internet Society · MDN Web Docs · Cloudflare Learning Center · ICANN · IETF (RFC 9110, RFC 8446)
Esta presentación está pensada para pantalla horizontal.
Antecedentes y terminología de Internet