{{quote {author: "Tim Berners-Lee", title: "The World Wide Web: A very short personal history", chapter: true}
El sueño detrás de la Web es el de un espacio de información común en el que nos comunicamos compartiendo información. Su universalidad es esencial: el hecho de que un enlace de hipertexto pueda apuntar a cualquier cosa, ya sea personal, local o global, ya sea un borrador o algo muy trabajado.
quote}}
{{index "Berners-Lee, Tim", "World Wide Web", HTTP, [JavaScript, "historia de"], "World Wide Web"}}
{{figure {url: "img/chapter_picture_13.jpg", alt: "Ilustración que muestra una central telefónica", chapter: "framed"}}}
Los próximos capítulos de este libro hablarán sobre los navegadores web. Sin los navegadores web, no habría JavaScript. O incluso si existiera, nadie le habría prestado atención.
{{index "descentralización", compatibilidad}}
La tecnología web ha sido descentralizada desde el principio, no solo técnicamente, sino también en la forma en que evolucionó. Varios desarrolladores de navegadores han añadido nuevas funcionalidades de manera ad hoc y a veces sin mucho sentido, que luego, a veces, han terminado siendo adoptadas por otros, y finalmente establecidas como en los ((estándares)).
Esto es a la vez una bendición y una maldición. Por un lado, es empoderador no tener a nadie controlando un sistema, sino mejorando con la contribución de diferentes grupos que trabajan en una ((colaboración)) laxa (o a veces en abierta hostilidad). Por otro lado, la forma caótica en que se desarrolló la Webha llevado a que el sistema resultante no sea precisamente un ejemplo brillante de ((coherencia)) interna. Algunas partes son directamente confusas y están mal diseñadas.
Las ((redes)) de computadoras existen desde la década de 1950. Si conectas cables entre dos o más computadoras y les permites enviar datos de ida y vuelta a través de estos cables, puedes hacer todo tipo de maravillas.
Y si conectar dos máquinas en el mismo edificio nos permite hacer cosas maravillosas, conectar máquinas en todo el planeta debería ser aún mejor. La tecnología para comenzar a implementar esta visión se desarrolló en la década de 1980, y la red resultante se llama la (o el) ((Internet)). Ha cumplido su promesa.
Una computadora puede usar esta red para enviar bits a otra computadora. Para que surja una comunicación efectiva de este envío de bits, las computadoras en ambos extremos deben saber qué se supone que representan los bits. El significado de cualquier secuencia dada de bits depende enteramente del tipo de cosa que está tratando de expresar y del mecanismo de ((codificación)) utilizado.
{{index [red, protocolo]}}
Un protocolo de red describe un estilo de comunicación sobre una ((red)). Hay protocolos para enviar correos electrónicos, para recibir correos electrónicos, para compartir archivos e incluso para controlar computadoras que han sido infectadas por software malicioso.
{{indexsee "Protocolo de Transferencia de Hipertexto", HTTP}}
El Protocolo de Transferencia de Hipertexto (((HTTP))) es un protocolo para recuperar ((recursos)) nombrados (trozos de información, como páginas web o imágenes). Especifica que el lado que realiza la solicitud debe comenzar con una línea como esta, nombrando el recurso y la versión del protocolo que está intentando usar:
GET /index.html HTTP/1.1
Hay muchas más reglas sobre la forma en que el solicitante puede incluir más información en la ((solicitud)) y la forma en que el otro lado, que devuelve el recurso, empaqueta su contenido. Veremos HTTP con un poco más de detalle en el Capítulo ?.
{{index layering, stream, ordering}}
La mayoría de los protocolos se construyen sobre otros protocolos. HTTP trata la red como un dispositivo similar a un flujo en el que puedes poner bits y hacer que lleguen al destino correcto en el orden correcto. Proporcionar esas garantías encima del envío de datos primitivos que proporciona la red es un problema bastante complicado.
{{index TCP}}
{{indexsee "Transmission Control Protocol", TCP}}
El Protocolo de Control de Transmisión (TCP) es un ((protocolo)) que aborda este problema. Todos los dispositivos conectados a Internet lo "hablan" y la mayoría de las comunicaciones en ((Internet)) se construyen sobre él.
{{index "listening (TCP)"}}
Una conexión TCP funciona de la siguiente manera: una computadora debe estar esperando, o escuchando, a que otras computadoras comiencen a hablar con ella. Para poder escuchar diferentes tipos de comunicación al mismo tiempo en una sola máquina, cada oyente tiene asociado un número (llamado ((puerto))). La mayoría de los ((protocolo))s especifican qué puerto debe usarse de forma predeterminada. Por ejemplo, cuando queremos enviar un correo electrónico usando el protocolo ((SMTP)), se espera que la máquina a través de la cual lo enviamos esté escuchando en el puerto 25.
Otra computadora puede establecer entonces una conexión conectándose a la máquina de destino usando el número de puerto correcto. Si la máquina de destino es alcanzable y está escuchando en ese puerto, la conexión se crea con éxito. La computadora que escucha se llama el ((servidor)), y la computadora que se conecta se llama el ((cliente)).
{{index ["abstracción", "de la red"]}}
Dicha conexión actúa como un conducto bidireccional a través del cual pueden fluir los bits: las máquinas en ambos extremos pueden insertar datos en él. Una vez que los bits se transmiten con éxito, pueden ser leídos por la máquina del otro lado. Este es un modelo muy cómodo. Se podría decir que ((TCP)) proporciona una abstracción de la red.
{{id web}}
La ((World Wide Web)) (no se debe confundir con la ((Internet)) en su totalidad) es un conjunto de ((protocolo))s y formatos que nos permiten visitar páginas web en un navegador. La parte "Web" en el nombre se refiere al hecho de que estas páginas pueden enlazarse fácilmente entre sí, conectándose así todas en una gran ((malla)) por la que los usuarios pueden moverse.
Para formar parte de la Web, todo lo que necesitas hacer es conectar una máquina a ((Internet)) y hacer que escuche en el puerto 80 con el protocolo ((HTTP)) para que otras computadoras puedan solicitarle documentos.
{{index URL}}
{{indexsee "Uniform Resource Locator", URL}}
Cada ((documento)) en la Web está nombrado por un Localizador de Recursos Uniforme (URL), que tiene un aspecto como este:
https://eloquentjavascript.es/13_browser.html
| | | |
protocolo servidor ruta
{{index HTTPS}}
La primera parte nos dice que esta URL utiliza el protocolo HTTP cifrado (en contraposición, por ejemplo, a HTTP, que sería solamente http://). Luego viene la parte que identifica a qué servidor estamos solicitando el documento. Por último está una cadena de ruta que identifica el documento específico (o ((recurso))) en el que estamos interesados.
Las máquinas conectadas a Internet tienen una ((dirección IP)), que es un número que se puede utilizar para enviar mensajes a esa máquina, y tiene un aspecto como 149.210.142.219 o 2001:4860:4860::8888. Como unas listas de números medio aleatorios son difíciles de recordar y complicadas de escribir, en su lugar puedes registrar un ((nombre de dominio)) para una dirección específica o un conjunto de direcciones. Registré _eloquentjavascript.es para apuntar a la dirección IP de una máquina que controlo y, por lo tanto, puedo usar ese nombre de dominio para servir páginas web.
{{index browser}}
Si escribes esta URL en la barra de direcciones de tu navegador, el navegador intentará recuperar y mostrar el ((documento)) en esa URL. Primero, tu navegador tiene que averiguar a qué dirección se refiere eloquentjavascript.net. Luego, utilizando el protocolo ((HTTP)), hará una conexión con el servidor en esa dirección y solicitará el recurso /13_browser.html. Si todo va bien, el servidor enviará un documento, que tu navegador mostrará en tu pantalla.
{{index HTML}}
{{indexsee "Lenguaje de marcado de hipertexto", HTML}}
HTML, que significa Lenguaje de Marcado de Hipertexto, es el formato de documento utilizado para páginas web. Un documento HTML contiene ((texto)), así como ((etiqueta))s que estructuran el texto, describiendo cosas como enlaces, párrafos y encabezados.
Un documento HTML corto podría tener esta pinta:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mi página de inicio</title>
</head>
<body>
<h1>Mi página de inicio</h1>
<p>Hola, soy Marijn y esta es mi página de inicio.</p>
<p>¡También escribí un libro! Léelo
<a href="http://eloquentjavascript.net">aquí</a>.</p>
</body>
</html>
{{if book
Así es como se vería dicho documento en el navegador:
{{figure {url: "img/home-page.png", alt: "Una versión renderizada del ejemplo de página de inicio HTML",width: "6.3cm"}}}
if}}
{{index [HTML, "notación"]}}
Las etiquetas, encerradas en ((corchetes angulares)) (< y >, los símbolos de menor que y mayor que), proporcionan información sobre la ((estructura)) del documento. El otro ((texto)) es simplemente texto plano.
{{index doctype, "versión"}}
El documento comienza con <!doctype html>, lo que le dice al navegador que interprete la página como HTML moderno, en contraposición a estilos obsoletos que se utilizaban en el pasado.
{{index "head (etiqueta HTML)", "body (etiqueta HTML)", "title (etiqueta HTML)", "h1 (etiqueta HTML)", "p (etiqueta HTML)"}}
Los documentos HTML tienen una cabecera y un cuerpo. La cabecera contiene información sobre el documento, y el cuerpo contiene el documento en sí. En este caso, la cabecera declara que el título de este documento es "Mi página de inicio" y que utiliza la codificación UTF-8, que es una forma de codificar texto Unicode como datos binarios. El cuerpo del documento contiene un encabezado (<h1>, que significa "encabezado 1" —las etiquetas <h2> a <h6> producen subencabezados—) y dos ((párrafo))s (<p>).
{{index "atributo href", "a (etiqueta HTML)"}}
Las etiquetas vienen en varias formas. Un ((elemento)), como el cuerpo, un párrafo o un enlace, comienza con una ((etiqueta de apertura)) como <p> y finaliza con una ((etiqueta de cierre)) como </p>. Algunas etiquetas de apertura, como la de ((enlace)) (<a>), contienen información adicional en forma de pares nombre="valor". Estos se llaman ((atributo))s. En este caso, el destino del enlace se indica con href="https://eloquentjavascript.es", donde href significa "hipervínculo de referencia".
{{index "atributo src", "etiqueta auto-cerrante", "img (etiqueta HTML)"}}
Algunos tipos de ((etiqueta))s no contienen nada y por lo tanto no necesitan ser cerradas. La etiqueta de metadatos <meta charset="utf-8"> es un ejemplo de esto.
{{index [escape, "en HTML"]}}
Para poder incluir ((corchetes angulares)) en el texto de un documento, a pesar de que tienen un significado especial en HTML, se debe introducir otra forma especial de notación. Un simple signo de menor que se escribe <, y un signo mayor que se escribe >. En HTML, un carácter et (es decir, el carácter &, también conocido en inglés y en general en informática como ampersand) seguido de un nombre o código de carácter y un punto y coma (;), se llama ((entidad)), y será reemplazada por el carácter que codifica.
{{index ["caracter barra invertida", "en cadenas de texto"], "caracter y comercial", "caracter de comillas dobles"}}
Esto es análogo a la manera en que se utilizan las barras invertidas en las cadenas de texto de JavaScript. Dado que este mecanismo también da un significado especial a los caracteres de ampersand, estos necesitan ser escapados como &. Dentro de los valores de los atributos, que están entre comillas dobles, se puede usar " para insertar un carácter de comillas real.
{{index "tolerancia a errores", "análisis sintáctico"}}
HTML se analiza de una manera notablemente tolerante a errores. Cuando faltan etiquetas que deberían estar ahí, el navegador las agrega automáticamente. La forma en que se hace esto se ha estandarizado, y puedes confiar en que todos los navegadores modernos lo harán de la misma manera.
El siguiente documento será tratado igual que el que se mostró anteriormente:
<!doctype html>
<meta charset=utf-8>
<title>Mi página de inicio</title>
<h1>Mi página de inicio</h1>
<p>Hola, soy Marijn y esta es mi página de inicio.
<p>También escribí un libro! Léelo
<a href=http://eloquentjavascript.net>aquí</a>.
{{index "título (etiqueta HTML)", "encabezado (etiqueta HTML)", "cuerpo (etiqueta HTML)", "html (etiqueta HTML)"}}
Las etiquetas <html>, <head> y <body> han desaparecido por completo. El navegador sabe que <meta> y <title> pertenecen a la cabecera y que <h1> significa que el cuerpo ha comenzado. Además, ya no cierro explícitamente los párrafos, ya que abrir un nuevo párrafo o finalizar el documento los cerrará implícitamente. Las comillas alrededor de los valores de los atributos también han desaparecido.
Este libro generalmente omitirá las etiquetas <html>, <head> y <body> en ejemplos para mantenerlos cortos y ordenados. Pero sí cerraré las etiquetas e incluiré comillas alrededor de los atributos.
{{index navegador}}
También omitiré generalmente el ((doctype)) y la declaración charset. Esto no debe interpretarse como una recomendación para omitirlos de documentos HTML. Los navegadores a menudo hacen cosas ridículas cuando los olvidas. Deberías considerar que el doctype y los metadatos del charset están implícitamente presentes en los ejemplos, incluso cuando no se muestran realmente en el texto.
{{id script_tag}}
{{index [JavaScript, "en HTML"], "script (etiqueta HTML)"}}
En el contexto de este libro, la etiqueta HTML más importante es <script>. Esta etiqueta nos permite incluir un fragmento de JavaScript en un documento.
<h1>Probando alerta</h1>
<script>alert("¡hola!");</script>
{{index "función alert", "cronología"}}
Dicho script se ejecutará tan pronto como su etiqueta <script> sea encontrada mientras el navegador lee el HTML. Esta página mostrará un cuadro de diálogo al abrirla —la función alert se asemeja a prompt en que muestra una ventana pequeña, pero solo muestra un mensaje sin solicitar entrada.
{{index "atributo src"}}
Incluir programas extensos directamente en documentos HTML a menudo resulta poco práctico. La etiqueta <script> puede recibir un atributo src para obtener un archivo de script (un archivo de texto que contiene un programa JavaScript) desde una URL.
<h1>Probando alerta</h1>
<script src="code/hello.js"></script>
El archivo code/hello.js incluido aquí contiene el mismo programa —alert("¡hola!")— que vimos antes. Cuando una página HTML referencia otras URL como parte de sí misma —por ejemplo, un archivo de imagen o un script— los navegadores web los recuperarán inmediatamente e incluirán en la página.
{{index "script (etiqueta HTML)", "etiqueta de cierre"}}
Una etiqueta de script siempre debe cerrarse con </script>, incluso si hace referencia a un archivo de script y no contiene ningún código. Si olvidas esto, el resto de la página se interpretará como parte del script.
{{index "ruta relativa", dependencia}}
Puedes cargar módulos ((ES)) (ver Capítulo ?) en el navegador al darle a tu etiqueta de script un atributo type="module". Dichos módulos pueden depender de otros módulos usando ((URL))s relativas a sí mismos como nombres de módulo en declaraciones de import.
{{index "botón (etiqueta HTML)", "atributo onclick"}}
Algunos atributos también pueden contener un programa JavaScript. La etiqueta <button> (que se muestra como un botón) soporta un atributo onclick. El valor del atributo se ejecutará cada vez que se haga clic en el botón.
<button onclick="alert('¡Boom!');">¡NO PRESIONES!</button>
{{index "carácter de comilla simple", [escape, "en HTML"]}}
Fíjate en que he tenido que utilizar comillas simples para el string en el atributo onclick porque las comillas dobles ya se usan para citar todo el atributo. También podría haber utilizado ".
{{index "script malicioso", "World Wide Web", navegador, sitio web, seguridad}}
Ejecutar programas descargados de ((Internet)) es potencialmente peligroso. No sabes mucho sobre la gente detrás de la mayoría de los sitios que visitas, y no necesariamente tienen buenas intenciones. Ejecutar programas de gente que no tienen buenas intenciones es la manera en que se infecta tu computadora con ((virus)), te roban tus datos y hackean tus cuentas.
Sin embargo, la gracia de la Web es que puedes navegar por ella sin necesariamente confiar en todas las páginas que visitas. Por eso, los navegadores limitan severamente las cosas que un programa JavaScript puede hacer: no puede ver los archivos en tu computadora ni modificar nada que no esté relacionado con la página web en la que estaba incrustado.
{{index sandboxing}}
Aislar un entorno de programación de esta manera se llama ((sandboxing)), la idea es que el programa está jugando inofensivamente en un arenero. Pero debes imaginar este tipo particular de arenero como uno que tiene una jaula de barrotes de acero bien gruesas sobre él para que los programas que juegan en él de verdad no puedan salir.
La parte difícil del sandboxing es permitir que los programas tengan suficiente espacio para ser útiles y, al mismo tiempo, restringirlos lo suficiente para que no hagan nada peligroso. Muchas funcionalidades útiles, como comunicarse con otros servidores o leer el contenido del ((portapapeles)), también pueden usarse para hacer cosas problemáticas que invaden la ((privacidad)).
{{index fuga, exploit, seguridad}}
De vez en cuando, alguien encuentra una nueva forma de evitar las limitaciones de un ((navegador)) y hacer algo dañino, que va desde filtrar información privada no demasiado relevante hasta tomar el control de toda la máquina en la que se ejecuta el navegador. Los desarrolladores de navegadores responden reparando el agujero, y todo vuelve a estar bien, hasta que se descubre el próximo problema (y con suerte se publica, en lugar de ser explotado en secreto por alguna agencia gubernamental u organización criminal).
{{index Microsoft, "World Wide Web"}}
En las etapas iniciales de la Web, un navegador llamado ((Mosaic)) dominaba el mercado. Después de unos años, el equilibrio se desplazó a ((Netscape)), que a su vez fue en gran medida reemplazado por ((Internet Explorer)) de Microsoft. En cualquier punto en el que un único ((navegador)) era dominante, el fabricante de ese navegador se creía con derecho a inventar nuevas funciones para la Web unilateralmente. Dado que la mayoría de usuarios usaban el navegador más popular, los ((sitio web))s simplemente comenzaban a usar esas características, sin importar los otros navegadores.
Esta fue la era oscura de la ((compatibilidad)), a menudo llamada la ((guerra de navegadores)). Los desarrolladores web se quedaron con no una Web unificada, sino dos o tres plataformas incompatibles. Para empeorar las cosas, los navegadores en uso alrededor de 2003 estaban llenos de ((error))es y, por supuesto los errores eran diferentes para cada ((navegador)). La vida era difícil para las personas que escribían páginas web.
{{index Apple, "Internet Explorer", Mozilla}}
Mozilla ((Firefox)), un derivado sin ánimo de lucro de ((Netscape)), desafió la posición de Internet Explorer a finales de la década de 2000. Como ((Microsoft)) no estaba particularmente interesado en mantenerse competitivo en ese momento, Firefox le quitó mucho cuota de mercado. Alrededor del mismo tiempo, ((Google)) introdujo su navegador ((Chrome)) y el navegador de Apple ((Safari)) ganó popularidad, lo que llevó a una situación en la que había cuatro actores principales, en lugar de uno solo.
{{index compatibilidad}}
Los nuevos actores tenían una actitud más seria hacia los ((estándares)) y mejores prácticas de ((ingeniería)), lo que nos dio menos incompatibilidad y menos ((error))es. Microsoft, viendo cómo su cuota de mercado se desmoronaba, adoptó estas actitudes en su navegador Edge, que reemplaza a Internet Explorer. Si estás empezando a aprender desarrollo web hoy, considérate afortunado. Las últimas versiones de los principales navegadores se comportan de manera bastante uniforme y tienen relativamente pocos errores.Desafortunadamente, con la disminución constante de la cuota de mercado de Firefox y Edge convirtiéndose en simplemente un contenedor alrededor del núcleo de Chrome en 2018, esta uniformidad podría una vez más tomar la forma de un único proveedor —Google en este caso— teniendo el suficiente control sobre el mercado de navegadores para imponer su idea de cómo debería ser la Web al resto del mundo.