Diseño y Programación de Páginas Web

• No utilizar espacios en los nombres de los archivos de las páginas o las imágenes. Tampoco
utilizar caracteres raros como la ñ o los acentos.
• Tener cuidado con las mayúsculas y las minúsculas en los nombres de los archivos que
tratamos. Si las utilizamos equivocadamente la página podrá funcionar en nuestro Windows
(por que le dan igual las mayúsculas y las minúsculas), pero al subirla al servidor Linux o Unix
podría ser que no funcionase (porque estos sistemas si que distinguen entre mayúsculas y
minúsculas).
• Enterarse de cómo funciona el documento por defecto, que nos permitiréis que lo expliquemos
en capítulos posteriores.
• Trabajar siempre con una extensión del archivo HTML específica. No mezclar en un mismo
proyecto páginas con extensión .html y .htm.
Imágenes y otros recursos
Como se ha podido ver anteriormente, el diseño de una página web implica la creación de un archivo en
código HTML, pero no es lo único que debemos crear. En la mayoría de los casos también desearemos
incluir imágenes y para ello será necesario crear los correspondientes archivos gráficos.
El proceso para incluir una imagen en una página empieza por la creación de la imagen con un programa
de diseño gráfico o mediante su digitalización con un escáner. Será necesario que conozcamos alguno de
los programas de diseño gráfico que existen en el mercado. Son muy interesantes Photoshop, Paint
Shop Pro o Fireworks. En un principio podremos contentarnos con manejarlos por encima y nos resultará
muy fácil, pero según avancemos en el camino como diseñadores web será más necesario dominarlos
para obtener resultados más profesionales.
Los tipos de archivos gráficos que soporta Internet son el JPG y el GIF. Tienen características distintas y
por tanto usos distintos. Podemos conocer más esto en el reportaje Formatos gráficos de Internet.
Una vez tenemos los archivos gráficos los ponemos en el mismo directorio que los archivos HTML o en
un subdirectorio de este y en el código de la página HTML pondremos una etiqueta especial para incluir
la imagen, o la insertaremos con nuestro programa editor de HTML.
Lo importante de todo esto es que nos percatemos que el sitio web está compuesto por archivos HTML,
GIFs, JPGs e incluso los correspondientes archivos que contengan videos, animaciones Flash, programas
Java, etc. Todos estos archivos los tenemos que tener bien localizados dentro de nuestro disco duro y
dentro de un mismo directorio. Por supuesto el orden como estén los archivos dentro del directorio es
indiferente, pero podrá ser interesante que incluyamos subdirectorios para que quede todo mejor
colocadito y su mantenimiento sea más fácil. Por ejemplo, una técnica muy habitual es colocar todas las
imágenes dentro de un subdirectorio llamado images.
El objetivo de tanto orden y conocimiento de la localización de todos los archivos es que luego
tendremos que subirlos al servidor sin olvidarnos de ninguno. En capítulos posteriores veremos cómo se
hace este paso.
Un problema típico con las imágenes y otros archivos externos consiste en que cuando vemos las
páginas en nuestro ordenador se ven correctamente y no falta ninguna imagen ni otros posibles
elementos. Sin embargo, cuando subimos los archivos al servidor y vemos la página desde Internet esta
se muestra con errores en las imágenes y otros elementos, de modo que no se pueden ver. Esto suele
llamarse tener una imagen "rota". La razón por la que está rota es que no puede localizarla en el
servidor y por tanto no la puede mostrar. Esto puede ser debido a varias razones.
• La imagen no ha sido subida al servidor
• La posición relativa de la imagen con respecto a la página no es la misma en nuestro ordenador
(local) y en el servidor (remoto). Por ejemplo, las imágenes en local podrían estar en el
directorio images mientras que en remoto podrían estar en el mismo directorio que la página, lo
que sería un error. Siempre se debe respetar la estructura de directorios que hay en local y
crearla exactamente igual en remoto.
• La imagen que se intenta acceder tiene un camino dirigido a un directorio de nuestro disco
duro, como al ver la página desde Internet no se tiene acceso a tu disco duro, los usuarios no
podrán ver las imágenes. Cuando trabajamos con un editor de HTML y colocamos imágenes en
algunas ocasiones el editor coloca caminos en nuestro disco duro en lugar de caminos relativos.
Los caminos relativos son rutas que empiezan en el lugar donde está la página que estamos
diseñando.
Hay una forma muy útil de obtener pistas acerca del fallo de una imagen, consiste en pulsar con el botón
derecho del ratón sobre ella y seleccionar propiedades. Esto nos muestra información sobre la imagen y
nos informa sobre el sitio donde se está intentando encontrarla.
8