Cómo funciona la base de la World Wide Web y los sistemas wiki

Es imposible imaginar la World Wide Web (WWW) sin hipertexto. Hoy en día, ambos conceptos son inseparables, pero las tecnologías de hipertexto no se utilizan únicamente en la web.

¿Cómo surgió el término?

El autor del término “hipertexto” es Theodor Nelson, un filósofo, sociólogo y creador del sistema de hipertexto Xanadu, un competidor ideológico de la World Wide Web. Utilizó este término por primera vez en su ponencia en la Conferencia Nacional Americana de la Asociación de Maquinaria Computacional en el verano de 1965.

Retrato de Theodor Holm Nelson, un pionero de la informática, vistiendo una chaqueta oscura y una camisa azul.
Theodor Nelson, el visionario detrás del concepto de hipertexto y la hipermedia.

Nelson describió el hipertexto como un conjunto de materiales textuales e imágenes interconectados de forma compleja. Pueden contener anotaciones, citas, complementos, notas al pie, aclaraciones y mucho más. No es simplemente texto, sino algo más: hipertexto.

En 1967, Nelson, Andries van Dam y varios estudiantes de la Universidad Brown completaron el proyecto de investigación Hypertext Editing System (HES) (“Sistema de edición de hipertexto”). El programa creado funcionaba en un mainframe IBM System/360 Modelo 50 con una pantalla IBM 2250 conectada, en la que se mostraba el texto.

El operador podía crear etiquetas en el texto (enlaces en el documento) y asignarles nombres para poder volver al lugar editado anteriormente. La selección de la etiqueta se realizaba con un lápiz fotosensible que se aplicaba a la pantalla.

Imagen en blanco y negro de una mano usando un lápiz fotosensible en una pantalla de una terminal IBM 2250, mostrando código.
Un vistazo a la tecnología pionera de la IBM 2250 y su innovador lápiz fotosensible.

Gracias a esto, el operador podía formatear o corregir rápidamente el texto antes de imprimirlo. Se puede decir que esta fue la primera implementación de la idea del hipertexto.

Pero el verdadero auge de la tecnología de hipertexto está relacionado con la aparición y el desarrollo de la World Wide Web. En 1991, el físico Tim Berners-Lee creó la primera especificación de HTML 1.0, y en septiembre de 1994 apareció HTML 2.0. Fue este último el que convirtió al hipertexto en la base lógica de las páginas web.

Para qué sirve el hipertexto

El hipertexto es una forma de organizar documentos que define su apariencia y cómo se interconectan entre sí.

💡
¡Importante! El hipertexto es un concepto de organización de la información, no una herramienta específica.

Un ejemplo de hipertexto son los sistemas wiki. Por ejemplo, la conocida distribución de Linux Arch tiene su propia enciclopedia (Wiki), que se actualiza constantemente y está traducida a 30 idiomas.

Gracias a los hipervínculos, el usuario, al acceder a cualquier sección, puede encontrar la información necesaria, ya sea para configurar el sistema o para corregir errores.

En internet, el hipertexto es importante principalmente porque ayuda a crear un marcado semántico, gracias al cual los datos de una página web tienen una estructura e interconexiones específicas. Para ello se utiliza HTML, el lenguaje de marcado de hipertexto. Permite formatear texto, insertar imágenes, enlaces, metadatos, etc.

De qué se compone el hipertexto

Analicemos la estructura del hipertexto usando un ejemplo de código HTML. Está formado por conjuntos de símbolos (etiquetas) que el usuario no ve. Explican al navegador (el programa en el que se abre la página) cómo colocar el texto en la página, cómo deben verse las tablas, las listas y qué contenido deben tener. Las etiquetas también se utilizan para insertar en el documento enlaces a imágenes, archivos de vídeo y audio.

Por ejemplo, aquí hay un fragmento de código HTML que crea una tabla con cuatro celdas dispuestas horizontalmente, una de las cuales contiene un hipervínculo a un libro:

<table>
    <tr>
        <td>Título</td>
        <td>Título original</td>
        <td>
          <a href=”https://clck.ru/38uWRP”>Enlace al libro</a>
        </td>
        <td>Año</td>
    </tr>
</table>

Además del contenido de las celdas, vemos las etiquetas <table>, <tr>, <td> y <a>. Todo esto es hipertexto.

Cómo funciona el hipertexto

Observemos la página principal del sitio web CodigoNautas:

Captura de pantalla de la página principal de CodigoNautas.com, mostrando una invitación a unirse a su boletín y una sección con temas de tendencia en programación (Fundamentos, Programación, Python, CSS, Javascript).
Únete a la comunidad CodigoNautas y mejora tus habilidades en programación.

Tiene texto, imágenes, bloques con números y secciones ocultas debajo del botón “Temas Tendencia”: “Fundamentos”, “Programación”, “Python” y otros. Todos estos elementos se encuentran en lugares específicos y no están mezclados porque su ubicación y funcionalidad están determinadas por el lenguaje de marcado: HTML.

Puedes ver el código HTML en las herramientas de desarrollador del navegador. En Google Chrome, presiona Ctrl + Shift + I en Windows o Command + Option + I en macOS. La combinación de teclas puede variar para otros navegadores.

Por ejemplo, así es como se ve parte del código HTML de la página principal de Skillbox:

Fragmento de código HTML que incluye metadatos SEO para la web CodigoNautas, utilizando etiquetas Open Graph y Twitter Cards, además de Google Tag Manager.
Un vistazo al código fuente de CodigoNautas

Estas son solo algunas líneas entre cientos de otras que determinan la apariencia y las acciones de los elementos.

Además de las páginas web, existen otras implementaciones de documentos de hipertexto. Por ejemplo, archivos creados en paquetes de oficina como Microsoft Office y LibreOffice. Tomemos un documento habitual con formato .docx, que contiene un fragmento de un poema conocido, una imagen y un hipervínculo.

Captura de pantalla de Microsoft Word mostrando un documento con una imagen de William Shakespeare y texto, donde se presume la presencia de hipervínculos, aunque no son visibles en la imagen.
Documentos interactivos con hipervínculos en Microsoft Word.

A pesar de su aparente simplicidad, un archivo con la extensión .docx es en realidad un archivo ZIP. En su interior hay imágenes que el usuario ha añadido al texto, archivos que gestionan los estilos, la configuración, etc. Esto se puede comprobar fácilmente si se abre el documento con un programa de compresión de archivos:

El directorio principal del archivo es “word“. Contiene la carpeta “media” con las imágenes y el documento de hipertexto “document.xml“, que contiene el texto escrito por el usuario, los hipervínculos y las etiquetas de formato XML.

Esta es otra implementación de hipertexto, que difiere ligeramente de los documentos HTML en la estructura interna de los archivos.

Qué recordar

Resumamos lo que hemos aprendido hoy:

  • El hipertexto es una forma de organizar documentos relacionados entre sí mediante enlaces. El término fue propuesto en 1965 por Theodor Nelson.
  • El ejemplo más popular de implementación de hipertexto es la World Wide Web. Cada página web es un documento de hipertexto. Todas están escritas en lenguaje de marcado de hipertexto HTML.
  • Además de HTML, existen otras implementaciones de hipertexto. Por ejemplo, XML, Wiki y la ayuda de Windows.

Categorizado en:

Desarrollo Web,