Go to main content
Bypass navigation bar Referencia HTML Tags HTML Tutoriales HTML
Bypass language selection
Bypass location bar

Location: Inicio > Tutoriales HTML > Organizando un sitio web

Bypass main content

Organizando un sitio web

Este tutorial está diseñado para dar algunas ideas sobre cómo los archivos (documentos HTML, imágenes, etc.) en un sitio web pueden ser distribuidos entre directoriosy cómo los recursos pueden referirse unos a otros desde ubicaciones diferentes. También haré una pequeña referencia sobre cómo los archivos son subidos al servidor.

Páginas:12>
Bypass main content

Estructura de directorios

La forma en que organizas un sitio web depende mucho del tipo de sitio que estás construyendo y de la forma en que te gusta hacerlo, pero aquí te proveeré de algunos modelos que puedes utilizar para organizar tu sitio web, haciendo de cada actualización una tarea más sencilla. Mi recomendación es que crees un directorio principal en tu computadora el cual contendrá todos los archivos y subdirectorios del sitio, que luego podrás subir "tal cual está" al servidor.

La primera cosa que tienes que pensar es que poner todos los archivos en el directorio raíz puede estar bien para un sitio pequeño, con 5 páginas y 3 imágenes. Pero si tienes que manejar 20 páginas y 200 imágenes, este modelo organizativo puede tornarse en un serio problema. Entonces lo que puedes hacer es comenzar a agrupar los archivos de alguna manera y ubicarlos en diferentes directorios para hacer tu sitio un poco más simple de administrar y editar.

Por ejemplo, digamos que tienes un sitio donde muestras tu obras de arte: una colección de 5 imágenes diseñadas por tí mismo. Después de pensarlo por un momento, decides que construirás una página para mostrar las imágenes más la página principal y una página de contacto. Esto hace un total de 3 páginas y 5 imágenes. Como no es mucho, puedes crear esta estructura de directorio, la cual mantendrá a tus archivos bien organizados:

Entonces, has construido tu estructura de directorios con el directorio raíz y su subdirectorio "img", has puesto todas las imágenes en el directorio "img" y todos los documentos HTML en el directorio raíz. Esto funciona bien por los siguientes 6 meses mientras continúas creando más de tus obras. De pronto tienes 100 imágenes y comienzas a darte cuenta que este modelo se está volviendo obsoleto ya que has agregado cien archivos en un sólo directorio.

En este punto puedes vivir con el desastre o puedes adoptar una nueva estructura de directorios. Por ejemplo, puedes dividir tus imágenes en grupos temáticamente: flores, personal, animales, fantasía y surrealismo. Es este modo puedes mostrar todas las imágenes correspondientes a una misma categoría en una sola página (teniendo en cuenta que las imágenes sean lo suficientemente pequeñas para no hacer que la carga de la página tome una eternidad).

Puedes ahora poner cada imagen en su directorio correspondiente, lo que resultará en un promedio de 20 imágenes por directorio. Y estos directorios puede aún ser subdivididos (por ejemplo, el directorio de animales puede contener un subdirectorio llamado "aves").

Justo cuando estás feliz con tu sitio, tus amigos vienen a pedirte que les des la oportunidad de mostrar sus obras en tu sitio, lo que te parece una gran idea. Pero nuevamente, ¿cómo organidas toda esta informaciónde manera que no termine siendo un desastre? Bueno, una buena idea es usar la organización anterior exactamente como está, pero para cada uno de los artistas que mostrarán su trabajo en el sitio. Esto resultará en un directorio para cada artista, que contendrá sus imágenes y documentos administrados en subdirectorios.

Ahora puedes seguir agregando subdirectorios a los directorios de cada artista, y combinando estructuras. Nota que esta estructura también puede aplicarse a sitios con secciones en lugar de artistas.

Nunca olvides que puedes crear cualquier estructura de directorios que prefieras, el punto es que te sientas cómodo administrando y actualizando los archivos dentro de ella.

Páginas:12>

Diseño y desarrollo: Latitud29.com

Vínculos y logos|Contacto|Más allá de HTML|Herramientas y recursos|Mapa del sitio|Webmaster|Dona