Algunos dirán que todo el mundo sabe lo que es una CARPETA o DIRECTORIO si lo prefiere. Sin embargo, vale la pena repetir que se trata de una entidad específica en la que se organizan archivos y / o otro directorio en un dispositivo de almacenamiento, por ejemplo, un HD (disco duro) o una partición del mismo.
Por lo tanto, un DIR es definible como una dirección, ruta o ubicación del sistema de archivos en el que hay archivos listados u otros directorios. Un directorio listado en otro directorio también se conoce como subdirectorio, y el que lo contiene es el directorio padre (o el directorio de nivel superior).
Así que cuando usted necesita llamar a un archivo de una página, usted tiene que tener cuidado de escribir el enlace con la ruta que debe seguirse para llegar a ese archivo mismo.

ESTRUCTURA DE UN SITIO (DE LAS CARPETAS)

Operar el diseño del sitio y una mejor organización de la estructura es necesario porque una página web contiene referencias a elementos (imágenes, scripts, sonidos, hojas de estilo, otras páginas web ...) cada uno de los cuales tiene su dirección de residencia en otra carpeta.
Es impensable tener una estructura con un único DIR, ya que sería un lío con montón de archivos de varios tipos: para el programador sería casi imposible navegar y encontrar fácilmente un archivo entre miles y miles diferentes.
Aquí mostramos un diagrama general de un sitio simple.

En la carpeta raíz se pueden haber varias subcarpetas y también archivos en las que se encuentra:

• el nombre de la página inicial que por HTML se debe nombrar index.htm (o index.html)
• Archivos que se utilizan para formatear o operar las páginas (scripts, CSS, widgets)
• Archivos que utilizamos dentro de las páginas: música, imágenes, películas, etc, que también se pueden dividir en subcarpetas para agrupar archivos por categoría o como usted prefiera.
• Lo que está arriba es un ejemplo, ya que puede agrupar y nombrar carpetas de acuerdo a sus necesidades de lógica.

El archivo HTML desde el que se inicia el sitio siempre se denomina 'índex'. Cuando llegamos al sitio en Internet, su navegador abre automáticamente este archivo (índice) que contiene uno o más menús con enlaces que apuntan a archivos 'alojados' en carpetas de archivos 1, 2, 3, 4, o incluso con enlaces a otros archivos en la web fuera de su sitio.
Dentro de cada una de las carpetas además de archivos HTML también podemos poner subcarpetas con otros elementos y archivos.

CREACIÓN DE CARPETAS PARA EL SITIO: en nuestro PC local (Cliente): para comprobar e individualizar los enlaces de conexión de los distintos archivos evitando errores debería ser mejor utilizar un editor especializado. Sin embargo, aquí hay dos ejemplos sencillos:

a) Si tengo un archivo llamado partners.htm que reside en el DIR llamado Files_1, y en partners.htm hay un enlace desde que se quiere abrir de nuevo index.htm, la referencia del enlace esI

../index.htm      (el target del link debería ser puesto como "_top")

../  significa ir un paso atrás, partiendo desde la carpeta de residencia del archivo partners.htm , para puntar al file index.htm

b) Si a partir del archivo partners.htm se tiene que abrir un archivo denominado list_4.htm que reside en la carpeta Files_4 la referencia de enlace desde partners será

../Files_4/list_4.htm

../ significa ir un paso atrás, partiendo desde la carpeta de residencia del archivo partners.htm, para puntar la carpeta Files_4, en la cuál se puede puntar el file list_4.htm.

En primer lugar, sería apropiado tener una idea clara de lo que se quiere hacer, que es tener un diseño general, y el dibujo esquemático de la página de nivel superior, es decir, el index.htm y de las otras páginas. Por cada página se debería tener un menu de enlaces a las demás paginas .

EL PROJECTO  GENERAL
DISEÑO GENERAL es escribir lo que se quiere hacer con el mayor detalle posible, añadiendo texto con bocetos y dibujos. Usted puede hacer esto con cualquier software, incluso Power Point u otro, lo que usted prefiere.
Como primer paso sugiero, sin embargo, diseñar en papel, por ejemplo en hojas de un libro clásico de contabilidad, con líneas o cuadrados. Entonces siempre se puede mover todo en los medios digitales, lo que también ayuda a aclarar las ideas mucho mejor.

Utilizamos la famosa regla periodística de 5W1H para arreglar ideas. G

• Dado por supuesto que ya tenemos las herramientas mínimas necesarias para comenzar a trabajar, los cinco W se utilizan para describir cómo ir adelante en el trabajo:
  
  
  • WHAT - (la cual cosa) Usted necesita decidir en términos generales lo que quiere, es decir, los objetivos a los que se enfrenta, por qué ( why) estamos aquí y qué "público" (who-quién) se espera para el sitio. También es importante estimar los esfuerzos requeridos, en términos de tiempo ( (When-cuándo), y también de trabajo ( HOW - how to do what (cómo - cómo hacer qué).
    Si es posible,se debería hacer chats con otros y tomar notas sobre las ideas que salen de la discusión, y luego reorganizarlas en tu cuaderno. Esta es la llamada 'tormenta del cerebro'. ('brain storming).
  • WHO - Saber quiénes son los posibles receptores, ayuda a determinar el estilo del sitio, el contenido, las herramientas que necesitará, el tipo de figuras y fotografías, etc. También es muy importante determinar la definición de las páginas para determinar el tamaño de la pantalla utilizado por la mayoría de los usuarios. Escriba todo en su cuaderno.
  • WHY - (El por qué) Los objetivos a obtener nos muestran las herramientas que se necesitarán y también si y cuánto costará. No dejes ahorrar la longitud de las explicaciones, el texto con bocetos y diagramas.
    Ambos si usted hace el sitio en nombre de alguien, o lo hace por usted mismo, siempre debe hacer el llamado 'brain storming', con clientes o amigos.
  • WHERE - Donde se alojará su sitio y, a continuación, es muy importante cuáles son las características ofrecidas por el proveedor, qué se permite hacer o qué no puede hacer si coloca páginas en ese servidor. Será útil tomar un paseo en Internet para comparar entre ofertas de diferentes proveedores. He elegido este proovedor porque es italiano ofrece dominio, buzones, blogs y también una cantidad considerable de espacio libre, ampliable al pago. También debe ser estable, debido a la ley europea. En conclusión haganse una tabla con proveedores de comparar para eligir bien.
  • HOW - (Cómo - las herramientas) - para determinar el compromiso que se necesita, y los costos, es absolutamente necesario saber cuales instrumentos se tiene la intención de utilizar.
    • Computadora Personal - si sólo tenemos una PC lenta, con poca memoria RAM, una tarjeta de video pobre, o una definición de pantalla baja, es incluso inútil comenzar. La conexión a Internet debe ser la más rápida posible, buscar en Internet, descargar los archivos, cargar su trabajo en el servidor de alojamiento.
    • El software de seguridad que son los programas que ya tenemos instalados para prevenir, mientras buscando material en internet, que alguien nos está pegando virus, trojans, adwares, popups. Todas las cosas que nos retardan o bloquean deben ser eliminadas, el registro de Windows y cualquier HD debe ser limpiados y desfragmentado regularmente. El firewal usual no es suficiente en estos casos .
    • El software operativo que es el que nos permite editar, ver y corregir nuestros archivos - páginas web y anexos incluyendo fotos, imágenes, películas, música y sonidos. Yo prefiero Adobe Dreamweaver, porque es más fácil, dejando más libertad para agregar archivos e integrar sin problemas páginas o datos externos al sitio. Dreamweaver está dotado con listas desplegable de menú contextuales, que proporcionan lo que puede agregar en los distintos tipos de TAG y en las hojas de estilo. Puesto que soy un proponente de la multi-operación y de la autosuficiencia también tengo un software para manipular imágenes, uno para el vídeo y uno para la música y los sonidos.
      
  • WHEN - CUANDO - hemos dicho que es importante estimar el esfuerzo requerido en términos de tiempo (Cuándo), y también trabajar (cómo - qué, cómo hacerlo). Si usted hace el sitio en nombre de alguien es absolutamente necesario para establecer plazos, pero incluso si lo hace por sí mismo que no se debe pensar en conseguir las vacas.
    Si no tienen tiempo o no están dispuestos a estudiar y trabajar duro, ni siquiera deberían empezar. Entonces se necesita hacer un programa de tiempo con todas las actividades, solo un simple GANTT, siempre que los activos estén en un orden lógico de ejecución.
• INICIAMOS EL TRABAJO- Cuando hayan completado el diseño general, pueden elegir dónde escribir sus archivos en el HD y crear un directorio con el nombre apropiado. A continuación, pueden comenzar a trabajar en el sitio:
  • Crear la estructura básica de las carpetas. Por supuesto todo el mundo puede organizar carpetas y archivos como quiera, pero es mejor más detalles con el fin de rastrear los distintos archivos. El inconveniente de la complejidad estructural es que entonces usted tiene que prestar mucha atención a cómo crear enlaces.
  • Preparar CSS para enmarcar al menos un esquema de la página básica del primer y segundo nivel
  • Preparar imágenes básicas con Adobe Photoshop u otro programa que le permita seleccionar colores y transparencias y tipos de archivos de imagen, y para organizar y guardar las imágenes optimizadas comprimidas para la red.

Aquí está un esquema de cómo está estructurado eL sitio, diseñado para ser traducido del italiano a 3 idiomas.

# DIR: LINOBERTUZZI (la carpeta raíz del sitio) en el disco duro 2 - windows reside en C:\. Aquí hay index.htm (que enumera los enlaces al archivo principal de cada uno de los diferentes idiomas). Debajo de esta raíz tse tienens subcarpetas siguientes

1. f# DIR: ITALIAN contiene mainit.htm, que es el archivo inicial
2. # DIR: INGLÉS
3. # DIR: FRANCÉS
4. # DIR: ESPAÑOL
5. # DIR: CSS - contiene las hojas de estilo
6. # DIR SCRIPTS - que contiene scripts
7. # DIR SPRYASSETS - contiene elementos nedeed por los menús spry
8. # DIR MUSICS -  música para descargar
9. # DIR IMMAGINI - todas las imágenes necesarias
10. # DIR MODELLI - modelos de archivos y plantillas
11. # DIR CURRICULA - mi curriculum vitae
12. # DIR ANIMATE - archivos gif (Jif) con figuras animadas

Los archivos iniciales típicos de un idioma son

      ° FILE: mainit.htm (archivo principal de cada idioma)  
      ° FILE: ifratesta.htm (iframe con encabezado de páginas de poner entre el previo)
      ° FILE: itotfondo.htm (iframe en la parte inferior de las páginas de poner entre el previo)

Todos los archivos que se pueden utilizar sin modificación, sin ser traducidos a varios idiomas, es decir, las animaciones de música - imágenes - modelos - están bajo el directorio raíz y luego están contenidas en una serie de subcarpetas.

Bajo la subcarpeta de cada idioma, tenemos otras subcarpetas de la siguiente manera:

# DIR: FILOSOFÍA # DIR: LETTERS
# DIR: PROYECTOS
# DIR: PARTNERS
# DIR: DESCARGAS
# DIR: SOFTWARE
# DIR: SPIRIT
# DIR: HISTORIA
# DIR: MÓDULOS
# DIR: PROVASOLUZIONI (pruebas y soluciones) - donde hay las páginas que estás viendo en este momento.

No seamos demasiado largos sobre tal explicación, y no quiero entrar más lejos los detalles de las varias subcarpetas. De hecho, queremos comenzar a construir una estructura de nuestro primer archivo index.htm, desde el cual se iniciarán las páginas de segundo nivel.

Nota: esta versión del sitio es la 2.0 en la que se han separado los lenguaje, poniendo cadauno en su propio server, con prooveedores diferentes. Entonces la estructura inicial ha cambiado.

Hoydía (2021) de nuevo me vi obligado a cambiar y volver al modelo anterior.