Curso de Diseño Web IV - Publicar una página en la Web

Esta serie de entradas, tituladas Curso de Diseño Web, quieren ser un pequeño manual orientado a todo aquel que quiera iniciarse en el mundo del diseño Web partiendo de cero. En la primera entrada hablamos brevemente del funcionamiento de Internet y una pequeña introducción a HTML, en la segunda entrada hablamos sobre enlaces entre páginas y en la tercera hablamos de la metodología de trabajo cuando nos enfrentamos a un proyecto Web. En esta cuarta entrada hablamos sobre el proceso de mover nuestras páginas desde nuestro ordenador local a Internet.

Para publicar una página en Internet. Necesitaremos llevar a cabo los siguientes pasos:

1. Encontrar una empresa que proporcione espacio de almacenamiento. En ingles se refiere al alojamiento como Hosting. Cuando lea servicio de Hosting debe entender por ello que la empresa alquila un espacio de almacenamiento en un servidor donde residirá nuestra página. A menudo estas empresas de hosting alquilan también dominios. Algunas de las más famosas son 1&1, GoDaddy y Joker. Hay muchísimas empresas dedicadas al alquiler de servidores y dominios. Para evaluar la empresa de alquiler debemos pensar en las tecnologías que queramos usar para construir nuestras páginas, el presupuesto que tengamos, la localización de nuestro tráfico etc. A modo de metáfora podemos asemejar el dominio de una página (ej. softamo.com) con una dirección postal y el espacio de almacenamiento con la casa donde alojamos nuestras pertenencias y a la que se llega yendo a la dirección postal.
2. Escoger un nombre para tu portal. Por ejemplo: unpaisenlamochila.com. La ICANN coordina la administración de los elementos técnicos del DNS para garantizar la resolución unívoca de los nombres, para que los usuarios puedan encontrar todas las direcciones. En otras palabras, la ICANN delega en otras empresas el alquiler de nombres de dominio. Cuando una empresa nos alquila un nombre de dominio, dicha empresa notifica al ICANN que ese domino nos pertenece de modo que sólo haya en Internet un servidor asociado a dicho dominio.
3. Copiar los archivos desde tu ordenador hasta la empresa encargada del alojamiento. Para transferir archivos entre ordenadores en Internet hay varios protocolos que permiten la transferencia con cierta velocidad. Protocolos como FTP o SFTP. El uso de un protocolo u otro depende del soporte ofrecido por la empresa de alojamiento con la que contratemos.

El siguiente gráfico ilustra, el proceso mediante el cual copiamos nuestro directorio local (donde tenemos los archivos que forman nuestro portal Web) al servidor remoto.

Hay muchos programas que nos permiten usar el protocolo FTP. A continuación un listado de los más populares:

Windows

• SmartFTP, cliente FTP de pago.
• File Zilla, producto FTP gratuito
• IPSWITCH File Transfer gratis en la versión Home y de pago en la versión profesional.

MAC OS X

• Transmit es una elegante aplicación FTP para MAC OSX, de pago.
• Fetch es una de las más aplicaciones más populares FTP para Mac OSX, de pago.
• Cyberduck, una aplicación FTP gratuita para Mac OSX.

Anteriormente hemos mencionado la necesidad de alquilar un dominio o dirección Web. ¿Qué es un dominio?. Podemos dividir un dominio en tres partes. Por ejemplo para:

http://www.cabaretcafe.com/indicaciones.html

• La primera parte de la URL (http) habla sobre el protocolo que se usa para obtener un recurso
• La segunda parte (www.cabaretcafe.com) es el nombre del portal Web.
• La tercera parte (/indicaciones.html) es el camino absoluto hacia el archivo desde el directorio raíz.

¿Cómo funciona el protocolo HTTP?

El protocolo http es la base del funcionamiento de internet. Se basa en un intercambio de peticiones y respuestas entre clientes (portátiles, teléfonos móviles, ordenadores de escritorio ) y servidores. Este intercambio se ilustra en el siguiente gráfico:

¿Qué pasa si el servidor no encuentra el archivo?

Si el servidor no encuentra el archivo requerido por el cliente, envía un código 404. El protocolo HTTP define códigos de repuesta. Los navegadores entienden los códigos recibidos en los paquetes de respuesta HTTP.

¿Cómo funcionan las páginas por defecto?

A menudo navegamos a páginas que no especifican el nombre de ningún archivo. Por ejemplo, escribimos en nuestro navegador http://google.es. ¿Qué sucede en estos casos?, ¿Qué archivo envía el servidor al cliente para estas peticiones?. La respuesta es muy sencilla, los servidores nombran determinados archivos como archivos por defecto, habitualmente se usa el nombre index.html. Si en una petición se no se especifica ningún archivo, se busca el archivo por defecto. Si existe, se envía éste. Este proceso se ilustra en el siguiente gráfico.

En la segunda entrada de este curso hablamos sobre caminos relativos. Sin embargo, lo que el navegador entiende son caminos absolutos. De hecho cuando el navegador recibe un camino relativo hacia un archivo lo traduce a un camino absoluto. Un camino absoluto empieza en el directorio raíz y recorre el portal web saltando a través de directorios hasta llegar al archivo solicitado. El proceso se explica en el siguiente gráfico.

El siguiente ejercicio, muestra como construir direcciones para llegar a los diferentes archivos de nuestro portal Web.

1. http://www.autospaco.com
2. http://www.autospaco.com/direcciones.html
3. http://www.autospaco.com/nuevos/
4. http://www.autospaco.com/nuevos/imagenes/minicooper.gif
5. http://www.autospaco.com/usados/inventario.html

¿Cómo enlazo a un portal Web externo?

Podemos enlazar a portales externos. Por ejemplo el siguiente código enlazaría a la página de Softamo:
<a href="http://softamo.com">Softamo</a>

¿Cómo abrir la página enlazada en una ventana nueva?

Podemos abrir un enlace en una nueva ventana añadiendo el atributo target="_blank". El código quedaría del siguiente modo:
<a target="_blank" href="http://softamo.com">Softamo</a>

¿Cómo mejorar la accesiblidad de mis enlaces?

El atributo title sirve para mejorar la accesibilidad de nuestros enlaces. Este atributo se muestra en la mayoría los navegadores como una burbuja de ayuda cuando ponemos nuestro ratón sobre el enlace y lo dejamos encima durante un segundo. Más aún, el valor que pongamos en este atributo será leído por los lectores de pantalla usados por los usuarios con minusvalías visuales.
<a title="Ir a la empresa encargada del diseño de esta Web" href="http://softamo.com">Softamo</a>

Resumen

• Normalmente el mejor modo de publicar un portal en la Web es encontrar un proveedor de alojamiento.
• Un nombre de dominio es un nombre único, como google.com o dguadalajara.es, y es usado para identificar el portal.
• Un proveedor de alojamiento puede crear uno más servidores Web en su dominio. Los servidor se llaman a menudo www.
• El protocolo FTP (File Transfer Protocol) es un método común para transferir páginas web y contenido a un servidor.
• Un URL, Uniform Resource Locator o dirección Web, puede ser usado para identificar cualquier recurso en la Web.
• Una URL típica consiste de protocolo, un nombre de dominio Web y un camino absoluto a un recurso.
• HTTP es un protocolo de peticiones y respuestas que se usa para transferir páginas Web entre un servidor Web y un navegador.
• El protocolo file es usado por el navegador para leer páginas del propio ordenador del usuario.
• Un camino absoluto es el camino desde el directorio raíz al archivo.
• index.html y default.htm som ejemplos de páginas por omisión. Si especifica un directorio sin un nombre de archivo, el servidor Web buscara un archivo por omisión y se lo mandará al navegador.
• Puede usar caminos relativos o URLs en el atributo href de sus elementos <a> para enlazar con otras páginas. Para otras páginas en su sitio es mejor usar caminos relativos, usar URLs para enlaces externos.
• Usé el atributo id para crear un punto de destino en su página. Use # seguido del nombre usado en el atributo id para enlazar con dicha posición en la página.
• Para mejorar la accesibilidad, use el atributo title ofreciendo una descripción del enlace en los elementos <a>
• Use el atributo target para abrir un enlace en otra ventana del navegador. Né olvide que el atributo target puede ser problemático para usuarios en un rango de dispositivos y navegadores alternativos.

Este curso de diseño Web online está inspirado en el libro Head First HTML with CSS & XHTML . Compre dicho libro si quiere aprender HTML y CSS rápidamente.

Etiquetas: Curso Diseño Web, Web Design