Organizando un sitio web

Práctica

Esta práctica consistirá en la creación de una estructura básica de directorios que contendrá al documento que hemos venido desarrollando en las prácticas anteriores. Consideraremos a este sitio como un proyecto estilo blog donde el archivo creado hasta ahora, es una de sus publicaciones.

Antes de empezar a considerar la estructura de directorios, necesitamos crear una carpeta y arrojar nuestro archivo allí dentro. Puedes llamar a esta carpeta como quieras ("miblog", "primerproyecto", "practica", "raiz", etc). Su nombre no es importante, siempre y cuando puedas identificar la carpeta del sitio web en el sistema de archivos de tu computadora. En cualquier caso, debes tener presente que esta carpeta actuará como el directorio raiz del sitio web.

La imagen muestra como crear una carpeta en Windows 8 en el escritorio. La información mostrada en esta imagen está apropiadamente descripta en el texto y sirve únicamente como ayuda visual. Crear una carpeta es un proceso que puede variar dependiendo del sitema operativo que utilices, pero nunca demasiado. Aquí explicaré cómo crear una carpeta en Windows 8, y dejaré que descifres cómo hacerlo en otros sistemas operativos.

Para crear una carpeta en Windows 8, tienes que hacer un click derecho sobre el escritorio (o la carpeta en la que te encuentras) y, cuando el menú contextual se despliegue, seleccionar las opciones "Nuevo" y luego "Carpeta". A continuación, selecciona un nombre para tu nueva carpeta y presiona ENTER.

Eso es todo. Ahora, arroja el archivo dentro y estamos listos hasta aquí. Deberías tener la siguiente estructura:

  • raiz
    Carpeta
    • ejemplo.html
      Documento HTML

Ya puedes cambiar el nombre de tu archivo por algo más significativo, como "aprendiendo-html.html". Esto mejorará la organización del sitio y te permitirá identificar al archivo durante un proceso de actualización. Puedes elegir otro nombre, pero ten en cuenta que yo me referiré a este archivo como "aprendiendo-html.html".

Es hora de agregar algunas carpetas a esta estructura. Por ahora, solamente estaremos creando una carpeta llamada "recursos" dentro de nuestro raíz, y luego dos carpetas más llamadas "imagenes" y "videos" dentro de la primera. El proceso de creación de una carpeta es simple y se ha tratado anteriormente en esta práctica. La única particularidad en este caso es que debes hacerlo dentro de la carpeta correspondiente para obtener la estructura deseada. Al final, deberías tener esta estructura:

  • raiz
    Carpeta
    • recursos
      Carpeta
      • imagenes
        Carpeta
      • videos
        Carpeta
    • aprendiendo-html.html
      HTML document

Lo próximo que debes hacer es agregar un archivo "index". En este documento, podrías presentarte al usuario y contarle acerca de los temas tratados en tu sitio web. Pero lo más importante de todo, es que este archivo "index" es lo que se mostrará cuando un usuario entre a tu sitio por primera vez. Este es el vestíbulo de tu sitio, así que será mejor que lo utilices para recibir a tus invitados.

Hasta este punto, la estructura debería verse así:

  • raiz
    Carpeta
    • recursos
      Carpeta
      • imagenes
        Carpeta
      • videos
        Carpeta
    • index.html
      Documento HTML
    • aprendiendo-html.html
      Documento HTML

Como este es un sitio web al estilo blog, se supone que agregarás al menos un artículo por semana. A este ritmo, tu directorio raíz pedría volverse un lío muy pronto. En un intento de prevenir tal situación, haremos un par de cosas: primero, crearemos una carpeta "publicaciones" para contener a todos los artículos; y segundo, dividiremos los artículos por mes (una carpeta por cada mes). Por ahora, solo agregaremos la carpeta para el mes corriente, que incluirá en su nombre el mes y el año ("2017-12") para evitar ambigüedades.

Por último, no olvides mover el archivo a su nueva ubicación y revisa que tu estructura quede así:

  • raiz
    Carpeta
    • recursos
      Carpeta
      • imagenes
        Carpeta
      • videos
        Carpeta
    • publicaciones
      Carpeta
      • 2017-12
        Carpeta
        • aprendiendo-html.html
          Documento HTML
      • index.html
        Documento HTML
    • index.html
      Documento HTML

Como puedes ver en la estructura anterior, también existe un archivo "index.html" dentro de la carpeta "publicaciones". Este archivo se supone listará todos los artículos del sitio. Al comienzo será solamente un archivo, pero en la medida que tu colección siga creciendo, tendrás que pensar en dividirlo en dos o más archivos, una técnica conocida como "paginación".

Aquí te recomiendo que hagas una pausa, que comiences a crear otros documentos para llenar esta estructura y que enlaces los documentos unos con otros, de modo que se consolide el conocimiento hasta aquí adquirido. Cuando creas que has tenido suficiente, puedes pasar al siguiente tutorial.

Próximo tutorial ›

Prev123