Empezando desde cero: ¿Cómo funciona la Web? (I)

- Bien, así que quieres aprender a hacer páginas web, ¿no?

- Pues... sí, básicamente por eso estoy aquí.

- Claro. Supongo también que ya estás familiarizado con la Web. Sabes navegar y todo eso.

- Sí. Sí, claro...

- Claro, si no no estarías aquí. Y, ¿cómo llegaste hasta esta página, si puedo preguntar?

- Ee... pues, ya sabes, llegué desde otra página, pinchando en un enlace...

- ¡Bien! A partir de ahora, quiero que recuerdes una cosa: la Web son documentos enlazados unos con otros. Grabátelo en el coco, ¿lo harás?

- Bueno, si insistes... Pero ¿tan importante es?

- Sí, quiero que construyas tus conocimientos en bases sólidas, así que es fundamental que sepas cuál es la esencia de la Web.

- Muy bien, la Web es un montón de documentos enlazados los unos con los otros.

- Estupendo. Por supuesto tiene que haber algún mecanismo que haga eso posible.

- ¿A qué te refieres exactamente con un mecanismo?

- Pues, piensa en todo lo que tiene que suceder cada vez que tú haces algo tan fácil como pinchar un vínculo con el ratón. Cuando haces clic, tu ordenador recibe la orden de buscar el documento que le has pedido. Así que tiene que ir hasta donde esté el documento en cuestión, recogerlo, y mostrártelo en la pantalla.

- Sí, a grandes rasgos eso es lo que sucede.

- Bien. Pongámonos en el lugar del ordenador. Lo primero que necesitamos es saber qué documento tenemos que ir a buscar...

- Obviamente...

- Y necesitamos sabér dónde tenemos que ir a buscarlo, y una vez localizado, tenemos que traer el documento de algún modo a través de las redes de comunicaciones, y por último, tenemos que ser capaces de representar el documento en la pantalla.

- Vaya, pues es algo más complicado de lo que parecía a simple vista.

- Bueno, desde el punto de vista técnico hay muchas operaciones, que en realidad no deben preocuparte, pero te cuento todo esto porque desde el punto de vista del diseñador esto es importante. De aquí salen algunos conceptos que son fundamentales.

- Soy todo oídos.

- En primer lugar, cada documento debe tener un localizador o un identificador, algo que diga cómo se llama el documento y dónde se encuentra, es decir, en qué computadora de todas las conectadas a Internet está almacenado. En segundo lugar, debe existir un lenguaje en que las computadoras se comuniquen para pedirse y entregarse documentos unas a otras. Y en tercer lugar, debe existir una forma de codificar los documentos para que una vez que un ordenador, sea el que sea, lo haya obtenido, sea capaz de representarlo en la pantalla o en cualquier otro medio.

- Si quieres que te sea sincero, creo que estoy empezando a perderme...

- Tranquilo, es normal. Vamos por partes.

- Sí, será lo mejor.

- Muy bien. Hablemos del localizador.

- Sí, eso es fácil. Cada documento necesita un nombre único que le diferencie de todos los demás.

- Exacto. Y ya estarás harto de verlo: es lo que pone en la barra de direcciones del navegador. Por ejemplo, el identificador de esta página es http://html.conclase.net/tutorial/html/1/2.

- Entiendo.

- Ya veremos con más detalle qué significan exactamente todas las partes de un identificador. De momento lo importante es que si por ejemplo quieres crear un documento que esté enlazado con éste, tienes que hacer referencia a él con su nombre, http://html.conclase.net/tutorial/html/1/2.

- Muy bien, creo que lo capto, aunque sigo un poco perdido.

- Sigamos. La segunda parte era la comunicación entre computadoras.

- ¿Y de verdad yo me tengo que meter en eso? Me da un poco de miedo...

- No, al menos no hasta que tengas un nivel más avanzado. Pero esto también lo has visto, seguro. ¿Alguna vez te ha salido en la pantalla eso de "Error 404: Not found" o algo por el estilo?

- ¡Sí, ya te digo! ¡Un montón de veces!

- Pues ahí lo tienes. Las computadoras tienen una especie de protocolo sencillo para comunicarse. Algo así: "Me han dicho que tienes este documento. Dámelo, anda". Y la otra, si lo tiene, se lo da. Y si no lo tiene, le dice "No lo encuentro. Lárgate".

- ¡Qué amable!

- Ya ves. Por supuesto, como sabrás, los ordenadores hablan con números, y en vez de decir "No lo encuentro" dicen "404". Así que tu ordenador vuelve derrotado con el rabo entre las piernas y un "404" en sus manos...

- ¡Y no se le ocurre nada mejor que darme el 404 a mí!

- Este protocolo de comunicación consiste básicamente en unas cuantas reglas para que todo funcione bien, y unos cuantos códigos como "404", "500", "200", etc. Por cierto, el protocolo se llama HTTP.

- HTTP, como lo que sale en el identificador...

- Justo. Ya veremos por qué, más adelante.

- ¿Qué significa?

- HTTP es HyperText Transfer Protocol.

- Esto... me dijeron que este tutorial era en español...

- Sí, sí. HTTP: Protocolo para la Transferencia de Hipertexto.

- Pues... bueno, no hemos mejorado mucho, la verdad...

- Bueno, lo de Protocolo de Transferencia seguro que ya lo has pillado.

- Sí, eso ya lo pillo.

- Y lo de hipertexto...

- Sí, eso es muy cíber...

- Compórtate, hombre.

- Perdón...

- Hiper es un prefijo que significa...

- Grande, ¿no? Cómo "hipermercado", por ejemplo.

- ¿Me vas a dejar? Hiper es un prefijo que usan los matemáticos para indicar que algo tiene dimensiones extras.

- ¿Cómo en hiperespacio?

- Sí, ese es un ejemplo. El hiperespacio tiene más de tres dimensiones. El texto normal tiene una sola dimensión...

- De eso nada, los documentos tienen dos dimensiones: mira una hoja de papel, es plana.

- No. Un cuadro, tiene dos dimensiones. Un texto tiene una dimensión, es como una línea. Empiezas a leer desde el principio y acabas por el final. Si pierdes el hilo deja de tener significado.

- Sí, claro, visto así...

- Entonces hipertexto es como el texto normal, pero mejor: puedes salirte del hilo, porque no estás restringido a una sola dimensión.

- ¡Claro, puedes ir dando saltos, como en la Web!

- ¿Has visto? ¡Todo tiene su explicación!

- ¡Y yo que pensaba que hipertexto sólo era un nombre chulo! Pero oye, no veo cómo esto del protocolo HTTP nos puede ser útil como diseñadores.

- Pues, por ejemplo, si controlas el protocolo, le puedes decir a la computadora en que están tus documentos que sea más amable, y que en vez de dar un 404, entregue una página más bonita, explicando que la página no ha sido encontrada, dando las posibles causas, una dirección de contacto y una forma de llegar a una página que exista.

- Aah, claro... pues es verdad. Bueno, vamos a la tercera parte, ¿no?

- ¡Ah, sí! Ya se me había olvidado...

- La tercera parte es el mecanismo para codificar los documentos de modo que los programas que reciben el documento puedan descodificarlo y representarlo en la pantalla como lo que era: un documento de hipertexto.

- Ya te estás poniendo críptico otra vez.

- Perdón. Voy a tratar de explicártelo. Si los documentos fueran de texto normal, bastaría con enviar un fichero con las palabras del texto, un documento de texto normal y corriente.

- Sí, pero no es texto normal...

- Es hipertexto. Eso quiere decir que además de palabras y frases, hay vínculos que se refieren a otros documentos. Entonces necesitamos un lenguaje para formatear los documentos que tenga en cuenta que hay palabras y también que hay hipervínculos.

- Mmm... ya, creo que te entiendo. Y por casualidad, ¿ese lenguaje es el HTML?

- Exactamente. El HTML fue el lenguaje que se creó para compartir documentos en la Web. En aquellos entonces los recursos eran limitados, así que tanto el protocolo HTTP como el lenguaje HTML tenían que ser muy sencillos: por eso son tan sencillos, ya lo verás.

- Eso espero, porque esta lección me está asustando un poco, hablas muy raro.

- Ya te acostumbrarás. Además ya sabes que los comienzos siempre son más difíciles que el resto.

- Sí. Bueno, ¿y qué significa HTML?

- HyperText Mark-up Language

- Ya estamos otra vez...

- Lenguaje para el Formato de Documentos de Hipertexto. Más claro el agua.

- ¿Quieres decir que Mark-up significa Formato de Documentos?

- Pues, básicamente es eso. Es un término de imprenta. Cuando un escritor escribía un libro, a mano o con una máquina de escribir, y se lo entregaba a su editor, el editor tenía que marcar sobre el texto instrucciones para que los de la imprenta imprimieran todo correctamente: decía dónde estaban los títulos, las secciones, marcaba los párrafos, etc. Todo eso lo anotaba con unas marcas más o menos estándares que los de la imprenta entendían. Al conjunto de todas esas marcas, en inglés se le llama "mark-up".

- Interesante.

- Pues eso es justamente lo mismo que tu vas a hacer cuando escribas en HTML. Tu vas a ser a la vez el escritor (escribes el contenido del documento) y el editor, porque vas a decir dónde acaba y dónde empieza cada párrafo, cuáles son los títulos, dónde acaba y dónde empieza una lista y cada elemento de la lista, etc. Y el navegador será como la imprenta, que va a reconocer todas esas marcas y le va a dar a tu documento la apariencia deseada: los títulos más grandes, los párrafos separados, las listas con marcadores de lista, etc.

- Ya entiendo. La idea en sí parece sencilla, ¿no?

- Sí, ¿quieres ver un ejemplo?

- ¡Claro!

- Muy bien. Imagina que tu página web va a tratar de... ¿de qué quieres que trate?

- No sé, por ejemplo, podría poner mis discos de música.

- Buena idea. Podríamos hacer un documento con un título como "Mi colección de discos", y varias secciones donde hablaras un poco de cada grupo y pusieras una lista con los discos. Dime un par de grupos.

- Pues, por ejemplo, Horslips y Gwendal.

- ¿Eh? Bueno, da igual. El caso es que el documento podría tener esta estructura:

Mi colección de discos

Horslips
Aquí ponemos algo sobre la historia de este grupo.
Después ponemos la lista de discos:
- El primer disco
- El segundo disco
- etc.

Gwendal
Lo mismo, un poco sobre el grupo y luego la lista:
- El primer disco
- El segundo disco
- etc.

- Ya veo. Esto es como un boceto. ¿Qué haríamos ahora?

- Si recuerdas, te dije que haríamos la labor del escritor y del editor. Además de decir lo que vamos a poner, que es lo que hace el escritor, tenemos que marcar la estructura del documento: los títulos, los párrafos, las listas...

- Justo lo que tenemos aquí: títulos, párrafos y listas.

- Muy bien, pues vamos a ello. Le vamos a poner a cada cosa, a cada elemento del documento, su etiqueta, para marcar su función dentro del documento, dónde empieza y dónde acaba. Por ejemplo, a los párrafos les ponemos una etiqueta <p> al principio, y otra </p> al final, donde p significa "párrafo". Al título principal, una etiqueta <h1> al principio y otra </h1> al final, y así todo.

- Pues no parece muy complicado...

- Claro, es que no lo es. Así es como quedaría el ejemplo completo. No te preocupes por las etiquetas que no conoces, ya hablaremos de ellas más adelante:

<h1>Mi colección de discos</h1>

<h2>Horslips</h2>
<p>Aquí ponemos algo sobre la historia de este grupo.
Después ponemos la lista de discos:</p>
<ol>
<li>- El primer disco</li>
<li>- El segundo disco</li>
<li>- etc.</li>
</ol>
<h2>Gwendal</h2>
<p>Lo mismo, un poco sobre el grupo
y luego la lista:</p>
<ol>
<li>- El primer disco</li>
<li>- El segundo disco</li>
<li>- etc.</li>
</ol>

- Ajá, supongo que <h2> son títulos de segundo nivel, <ol> listas y <li> cada objeto de la lista, ¿no?

- Muy bien, ¿has visto? ¿A que es fácil? Ahora sólo tienes que escribir el texto real y podemos ver cómo queda.

- Vale, a ver qué tal se ve esto:

<h1>Mi colección de discos</h1>

<h2>Horslips</h2>
<p>Este grupo irlandés nació en 1970, y en sus diez años de
existencia, hasta su separación en 1980, recorrieron Europa
y América tocando en directo. Aunque su música evolucionó
sensiblemente en ese tiempo, siempre se caracterizó por
imprimir de manera única las raíces celtas y el sonido del
rock. Horslips, sin haber llegado a ser un fenómeno de
masas, ha escrito algunas de las páginas más brillantes de
la música irlandesa reciente.</p>
<ol>
<li>"Happy To Meet, Sorry To Part", 1972</li>
<li>"The Táin", 1973</li>
<li>Etcétera, no los pongo todos.</li>
</ol>
<h2>Gwendal</h2>
<p>Gwendal es probablemente uno de los grupos de música celta
más conocidos en España. No en vano, su único disco en
directo fue grabado en España. Este grupo bretón, da a los
temas tradicionales irlandeses un estilo único, mezclando
delicadeza, virtuosismo y energía de manera magistral.</p>
<ol>
<li>- "Gwendal", 1974</li>
<li>- "Gwendal 2", 1975</li>
<li>Etcétera, tampoco los pongo todos</li>
</ol>

- No te ofendas, pero como crítico musical te queda bastante por aprender. Bien, le he añadido una línea que es necesaria pero que no influye en la presentación. Ya hablaremos de eso en el futuro. Pero a ver cómo queda.

- Estooo, no te ofendas, pero como tutor de HTML te queda bastante por aprender. Esto es horrible. Sería más bonito si lo escribiera a mano. No pretenderás hacerme creer que todas esas páginas web tan estupendas que se ven por ahí están hechas así...

- ¡Eeh, tranqui! Muchacho, si acabamos de empezar, ¿qué quieres? De todos modos tienes algo de razón. El HTML no sirve para hacer cosas bonitas. Puedes estructurar tus contenidos, pero poco más...

- ¿Entonces?

- Verás, el HTML tiene algo así como unas "amigas" que le ayudan a hacer lo que él no sabe.

- Me dejas sin palabras. ¿Qué clase de amigas?

- Las Hojas de Estilo. Especialmente las CSS.

- No me lo digas, más palabros ingleses.

- Pues sí. CSS significa "Cascading Style Sheets"

- Eso suena muy mal, tío.

- "Hojas de Estilo en Cascada". Sería un poco largo explicarte por qué se llama así. Así que de momento quédate con lo de "Estilo".

- Muy bien. Veamos, supongo que las hojas de estilo nos dejan darle estilo al HTML, ¿no?

- Exactamente. Voy a intentar explicárte de manera sencilla cómo funciona esto.

- Más te vale.

- Tenemos nuestro cutre documento en HTML y nos apetece darle un poco de color al asunto. Para ello, tenemos que escribir unas "reglas de estilo" para el navegador. Si todas esas reglas las juntamos en otro documento, lo que tenemos es una hoja de estilo.

- Muy bien, sigue...

- Ya está, esa es la idea básica. Pero es una idea muy básica y muy fundamental del diseño web: el contenido y su estructura en HTML, el estilo y la apariencia en la Hoja de Estilo. ¿Lo recordarás?

- ¡Por supuesto! ¿Por quién me has tomado?

- Genial. Te pondría un ejemplo, pero creo que para ser el primer día hemos avanzado suficiente. ¿Qué has aprendido hoy?

- He aprendido que la Web son documentos enlazados entre sí. Que eso es posible gracias al hipertexto, que te permite saltar de unos documentos a otros. Y también gracias a que cada documento tiene un nombre propio que lo identifica entre los demás. Que los documentos de hipertexto viajan por la red a través de un protocolo llamado HTTP. Que para escribir documentos de hipertexto se usa HTML. Y que en los documentos HTML se mete el contenido y su estructura, y la apariencia se controla con las Hojas de Estilo.

- Muy bien, aunque hay algo incorrecto en lo que has dicho, y esa es la tercera y última regla fundamental que te voy a dar hoy: en la Web la apariencia no se controla. Aunque quisieras no podrías. No sabes quién lee tus páginas, no sabes que clase de ordenador utiliza, ni el navegador que utiliza, ni el sistema operativo, ni la resolución de pantalla, ni el número de colores, ni el tamaño de la ventana de su navegador... Por tanto, recuerda, en la Web no controlas, sólo sugieres.

- De acuerdo.

- Y es importante que te tomes esto como una ventaja de la Web, y no como un inconveniente contra el que luchar. Gracias a su enorme flexibilidad, la Web, y con ella lo que tú escribas, puede ser universal. Si escribes tus documentos correctamente, hasta los ciegos podrán acceder a sus contenidos sin dificultad.

- Muy bien, muy bien, me has convencido: en la Web no se controla nada, sólo se sugiere.

- Eres un alumno estupendo. Espero verte por aquí pronto para la segunda lección. Tengo algunas cosas muy importantes que enseñarte.

- Por supuesto que sí, no faltaré

- Hasta luego.

- Adiós, ¡y gracias!