martes, noviembre 01, 2011

Tutorial de desarrollo web, Parte IV: Hipervínculos e imágenes. Atributos. Rutas absolutas y relativas

Previously, on The CubeBlog...

Otra semana más aquí estamos con el tutorial de desarrollo web. Antes de comenzar, una vez más les dejo las soluciones a los ejercicios de la semana pasada en un nuevo documento de Google Docs.
Si recordamos la primera entrega del tutorial recordaremos que explicamos que el HTML era un lenguaje de marcado de hipertexto. Hasta ahora hemos aplicado bien la parte de "lenguaje de marcado", usando etiquetas para marcar el comienzo y el final de cada parte del documento. Sin embargo, hasta el momento en ningún momento hemos tratado con hipertexto, sólo texto normal. Pero eso cambiará a partir de esta entrega.
Lo que convierte a los documentos HTML en documentos de hipertexto es una función que todos conocemos bastante bien: los enlaces, vínculos o links que solemos encontrar en toda página web. Estos enlaces (también conocidos como "hipervínculos") nos transportan de un documento HTML a otro (o incluso a veces a distintas partes de un mismo documento), dando esa capacidad de ir eligiendo el camino por el que seguir leyendo. La sentencia básica para los hipervínculos es la etiqueta "a", que por lo general veremos de esta manera:

<a href="http://the-cubeblog.blogspot.com">The CubeBlog</a>

El nombre de esta etiqueta, "a", viene de la palabra anchor ("ancla" en inglés) y siempre representa a un hipervínculo (aunque en versiones antiguas del HTML representaba también puntos de referencia dentro de un documento, pero en HTML5 esa opción ya no se permite). En este caso, el resultado de este código sería el siguiente:

The CubeBlog

Como véis, si hacéis click en el enlace, os remitirá a la página principal del blog, ya que es el enlace que hemos puesto en su interior. Los enlaces pueden meterse dentro de un párrafo, encabezado o cualquier otra formación sin ningún problema: sólo el texto que encerremos entre las dos etiquetas "a" será el enlazado, de la siguiente manera:

<p>Esto es un enlace a <a href="http://the-cubeblog.blogspot.com">The CubeBlog</a>. Pica en él</p>

Cuyo resultado sería:

Esto es un enlace a The CubeBlog. Pica en él

Sencillo de entender, ¿no? Sin embargo, vamos a explayarnos un poco con este asunto, por una razón: es la primera vez que vemos un atributo.
Hasta el momento, habíamos visto todas las etiquetas sin atributos, sólo el nombre de la etiqueta y ya está, pero en este caso, junto al nombre de la etiqueta ("a") vemos una pequeña instrucción, el "href", que está igualada a una dirección web (en este caso, la dirección de este blog). Los atributos proporcionan información extra a la etiqueta, y casi todas las etiquetas pueden (o incluso muchas deben) contener atributos. El nombre del atributo, al igual que el nombre de la etiqueta, siempre debe ir en minúsculas y estar seguido por un símbolo igual (=) tras lo cual introduciremos el valor que le queramos dar a ese atributo rodeado de comillas dobles ("). Además, algunos atributos, como el "href", son bastante libres, ya que puede contener cualquier dirección que al usuario se le ocurra, y por lo tanto no importa que sus valores estén en mayúsculas o en minúsculas (aunque se recomienda siempre que sea posible usar las minúsculas). Por contra, existen atributos cuyos posibles valores están predefinidos, y en esos casos, también deberán ir escritos en minúsculas. A medida que vayamos viendo atributos iremos entendiéndolo mejor, pero son bastante intuitivos en su mayoría.
Ahora queda fijarnos en otro detalle: en nuestro ejemplo, el valor de "href" es una dirección de una página web, pero, ¿siempre tenemos que usar direcciones de páginas webs en nuestros documentos? Para nada. Normalmente crearemos vínculos que enlazarán con otras páginas (cada documento HTML es una "página") dentro de nuestro propio sitio web (un sitio web es el conjunto de todas las páginas que tengamos alojados en una misma jerarquía) y para ello usaremos las llamadas rutas relativas, que nos servirán tanto para cuando estemos trabajando con nuestras páginas en nuestro ordenador o una vez colgados en internet. La diferencia entre las rutas relativas o absolutas es la siguiente:
  • Una ruta absoluta es aquella que cuenta toda la dirección del archivo desde la raíz, y que por tanto podremos usar desde cualquier carpeta o subcarpeta de nuestro sitio sin ninguna modificación ya que siempre llevará a la misma página. Por ejemplo, la ruta que antes mostramos (http://the-cubeblog.blogspot.com) sería una ruta absoluta, ya que muestra desde la raíz (e incluso, en este caso, el protocolo "http://") hasta el documento que buscamos, aunque en nuestro caso como buscamos el documento principal, la dirección no es muy larga. Es más fácil entender las rutas absolutas cuando las vemos en nuestro propio ordenador. Por ejemplo, para el archivo "hello_world.html" que hicimos en la segunda entrega, la ruta absoluta sería "C:/Mis páginas webs/hello_world.html" (en caso de añadirle también el protocolo, sería "file:///C:/Mis páginas webs/hello_world.html"). Las rutas absolutas son sólo recomendables cuando enlazan con sitios externos (evidentemente, siempre bajo el protocolo "http://", pero su uso para archivos dentro de un mismo sitio debe ser evitado a toda costa.
  • Las rutas relativas serán las que más usemos dentro de nuestro propio sitio. Consiste en indicar, a partir del directorio en que tengamos alojada la página, cómo llegar al documento al que queremos enlazar. Por ejemplo, si hiciéramos un documento HTML en la unidad C:/ y quisiéramos enlazarlo con el "hello_world.html" nuestra ruta sería "./Mis páginas webs/hello_world.html". El punto (.) inicial indica que partimos de la carpeta en la que se encuentra el documento del que salimos, y desde ahí creamos la ruta. Esta práctica es muy útil ya que, si nos tomamos un momento para estructurar bien las páginas de nuestro sitio, transportarla de un ordenador a otro e incluso subirlas a internet una vez hayamos completado el sitio será muy sencillo, ya que mientras la estructura de carpetas se respete, las rutas relativas funcionarán allá dónde las coloques. Además, para las rutas relativas nos será muy útil, aparte del punto que ya usamos antes (aunque si elimináramos el punto y la siguiente barra funcionaría de todas maneras, con la dirección "Mis páginas webs/hello_world.html"), los dos puntos (..), los cuales indican al navegador que deben subir a la carpeta padre de la que se encuentre en ese momento. Para poner un ejemplo, si creamos una carpeta "Nueva carpeta" dentro de la carpeta "Mis páginas webs" y ahí creamos un documento dentro del cual creamos un enlace a nuestro "hello_world.html" la ruta debería ser: "../hello_world.html". Así, en esta ruta indicamos a nuestro navegador que queremos subir a la carpeta padre ("Mis páginas webs", que contiene la carpeta "Nueva carpeta" donde se encuentra el documento con el enlace).
Como esto puede verse un poco engorroso así en frío, vamos a enseñar una pequeña estructura de carpetas y explicar unas cuantas rutas relativas:
Aparte, dentro de la carpeta "pagina" tenemos el documento "index.html".
Dentro de la carpeta "documentos-importantes" tenemos "nominas.html" y "beneficios.html".
Dentro de "documentos-muy-muy-secretos" tenemos "datos.html".
Y, finalmente, dentro de "documentos-no-tan-importantes" tenemos "donaciones.html".
Ahora, ignorando el humor un tanto ácido del "sitio web" que he formado, vamos a ver una serie de supuestos. En primer lugar, queremos que de "index.html" haya un vínculo a "nominas.html". La ruta relativa sería:
./documentos-importantes/nominas.html
En segundo lugar, queremos que desde "nominas.html" se pueda acceder a "beneficios.html". Su ruta relativa sería:
./beneficios.html
En estas ambas páginas queremos poder volver al "index.html", así que la ruta del enlace en cualquiera de los dos documentos quedaría de esta manera:
../index.html
Y, finalmente, desde "datos.html" queremos enlazar con "donaciones.html", siendo la ruta más compleja de todas las que hemos visto aquí:
../../documentos-no-tan-importantes/donaciones.html
Por supuesto, si sólo existieran estos enlaces en un sitio web de este tipo, el sitio sería un poco extraño ya que habrían sitios inaccesibles, pero bueno, sólo han sido ejemplos para ilustrar las rutas relativas. Espero que los lectores hayan entendido bien cómo escribir las rutas con estos ejemplos.
ANOTACIÓN: No está de más indicar que en las direcciones webs no se permite el uso de espacios, así que, en vistas de acabar publicando la página que estemos construyendo, tanto archivos como carpetas que formen la estructura de nuestro sitio deben carecer de espacios (por ejemplo, la carpeta "Mis páginas webs" contiene todos los archivos pero funciona como carpeta "raíz" para nosotros, y nunca nos hará falta referenciarla, así que sí puede contener espacios, mientras que todas las carpetas y archivos dentro de dicha carpeta deben cumplir esta regla). También las tildes y las eñes pueden dar problemas dependiendo del servidor, así que también sería recomendable evitarlas.
Finalmente, y finalizando la lección de esta semana, vamos a aprender a darle algo de color a nuestra página incluyendo imágenes. Para el ejemplo, voy a usar la caricatura que está junto a mi nombre en la parte superior del menú. La sintaxis sería ésta:

<img src="http://img84.exs.cx/img84/8653/emealcubo4uh.jpg" alt="Se supone que soy yo"/>

Como vemos, igual que la etiqueta "br", la etiqueta "img" se cierra a sí misma, y en este caso tiene dos atributos obligatorios, el atributo "src", en el cual hay que introducir la ruta, absoluta o relativa, de la imagen, y el "alt", el cual mostrará un texto alternativo en caso de que, por algún motivo, la imagen no se pueda cargar. Al igual que la etiqueta "a", podemos incluirla en cualquier lugar, ya que la imagen intentará incrustarse en el texto como si fuera un caracter, pero eso, salvo que la imagen sea muy pequeña, es bastante antiestético, por lo cual, hasta que aprendamos a darle estilo a nuestra página, recomendaría que los "img" los pusiéramos en párrafos apartados del texto. Si queréis ver el resultado del anterior código, sería el siguiente:

Se supone que soy yo

Simple, ¿no?
Y, como se va haciendo costumbre, llega la hora de los ejercicios:

EJERCICIO 1


En primer lugar vamos a rescatar una vez más los dos archivos "quijote.html" y "tabla3.html" y, al final de cada uno de los documentos, en un nuevo párrafo, vamos a crear en ambos un enlace al otro (se supone que deberíais haberlos creado ambos en la carpeta "Mis páginas webs"). Además, en el documento "quijote.html", entre el encabezado y el párrafo con el texto, introduciremos una imagen cualquiera que encontremos por Google (preferiblemente, que esté relacionada con dicho libro) y que tendremos que guardar en una carpeta llamada "imagenes" dentro de "Mis páginas webs" para referenciarla desde ahí.

EJERCICIO 2


Dentro de "Mis páginas webs" crearemos la estructura de directorios y archivos que vimos antes y en cada una de las páginas introduciremos enlaces a todas las otras páginas del sitio. El diseño de cada página y cualquier cosa que se quiera añadir extra será a gusto del alumno. Sería interesante que también añadieran imágenes para ir cogiéndole el truco.

Y con esto terminamos, realmente ha sido bastante poco lo que hemos aprendido en esta entrega, pero creo que aprender a crear rutas relativas es algo bastante importante y es un concepto que, a pesar de ser sencillo, necesita una explicación para quienes no lo conocen. Y con esto me despido hasta la semana que viene. ¡Suerte con ello!

No hay comentarios: