Estructura de carpetas de mi sitio Web

Introducción

Un sitio Web está formado por un conjunto de páginas Web. En mi caso quiero que funcionen de forma local. Si funciona de forma local, funciona con un servidor. Existen muchas funcionalidades que funcionan desde un servidor pero no lo hacen en local.
Las páginas Webs pueden tratar asuntos muy distintos, pero suelen tener en común muchas partes. Por ejemplo la cabecera, el pie, un índice, funciones javascript,..
Cada archivo HTML contiene los archivos que se usarán: Hojas de estilos CSS, archivos de código javascript, imágenes, sonidos, vídeos,.. Algunos son exclusivos de un página, mientras que otros son comunes.

Por otra parte, con el tiempo he ido haciéndome con mi colección de recursos: Galerías de imágenes, menús, presentación de la información organizada en forma de árboles, acordeones, funciones de dibujo en el canvas, presentación de código de forma resaltada..
Algunos de esos recursos son externos, y otros son propios. Al final no se trata de reinventar la rueda constantemente, y lo lógico es compartir las mismas soluciones, lo que aporta dos ventajas: no perdemos el tiempo rehaciendo lo que ya está hecho; y al final las distintas páginas tienen tu propia personalidad, los usuarios utilizan los recursos de la misma manera y reconocen tus páginas Web.

El propósito de este documento es describir un sistema de ficheros que facilite la elaboración de mis páginas Web.

Reglas para hacer un proyecto en mi sitio

Tipos de ficheros

Aproximadamente en la introducción he indicado el tipo de ficheros disponibles. Los indico y realizo algunas consideraciones.

Ficheros HTML, directores de lo que presentan ya que en estos se hace referencia al resto de ficheros participantes. Una carpeta contiene cada HTML, o unos pocos HTML muy relacionados.
Ficheros particulares de la página Web, usados sólo por ese HTML. No están pensados en compartirse con otros HTML, por lo que debe facilitarse el acceso sólo para esa Web.
Ficheros comunes a casi todos los HTML:
- Ficheros de estilo.
- Fragmentos HTML (cabeceras, pies, índices,..).
- Imágenes y sonidos tipo coorpotativos.
- Código javascript compartido.
Recursos utilizables por los HTML. Suelen ser ficheros .CSS y .JS como los resaltadores de códigos. También recursos propios, que vuelven a ser .CSS y .JS. Algunos hacen referencia a direcciones externas.

Composición de mis páginas WEB

Divido la pantalla en 5 partes:

Cabecera, en la parte superior, de la que quiero emplear la parte central
Contenido lado izquierdo. Podría contener el índice del propio documento.
Contenido zona central, que contendrá el contenido de la página Web.
Contenido lado derecho, para colocar índice del sitio Web, no del documento.
Pie en la parte inferior de la página.

Aunque hay una forma por defecto que indican las proporciones que ocupan cada parte, la idea es poder modificarla fácilmente, de forma individual para cada HTML para la que quiera una distribución distinta a la de por defecto.

Además quiero que las partes de contenido se desplacen verticalmente de forma independiente de las otras partes de contenido.

Estructura de carpetas

Esquema

Raiz
- index.html
- indice
  - indice.html
- comun
  - style1.css
  - style2.css
  - nav.js
  - nav.html
  - logo.png
  - ..
- recursos_1
  - prism.css
  - prism.js
  - tree.css
  - tree.js
  - libIO.js
  - ..
- proj 1
  - proj_1_1.html
  - proj_1_2.html
  - stilos_1_1.css
  - imagen_1_1_1.jpg
  - imagen_1_1_2.jpg
  - ..
- proj 2
  - proj_2_1.html
  - stilos_2_1.css
  - imagenes
    - imagen_2_1_1.jpg
    - imagen_2_1_2.jpg
  - ..
- ..

Fichero index.html

Este fichero es una micropresentación que salta al fichero real del sitio web. Esto lo logramos poniendo en el <HEAD>:

<META HTTP-EQUIV="Refresh" CONTENT="1; URL='indice/indice.html'" />

¿Porque utilizamos index.htnl?: Porque cuando alguien pone la dirección de un sitio sin especificar el fichero, este es el fichero que dan los servidores.

¿Porqué no utilizamos index.html como fichero índice para recorrer el sitio?. Porque este fichero tiene las rutas relativas diferentes al resto de archivos html.

E index.html, lo que hacemos es saltar a indice/indice.html. Este fichero referenciará al resto de ficheros html de la misma forma relativa que el resto de ficheros. Por ejemplo:

<link href="../comun/style1.css" rel="stylesheet"/>

Cabe la posibilidad de que index.htnl direccione a posibles diferentes ficheros índice, que no tienen porqué llamarse indice.html, y que pueden o no estar todos en la carpeta indice.

Ficheros índices

Son una presentación de un tema general y permiten navegar por todos los demás HTML.

Carpeta comun

Contiene los ficheros estandarizados .CSS y .JS del sitio. A mode de ejemplo se han indicado:

Dos ficheros CSS: style1.css y style2.css. Cada uno representa un tema distinto, uno puede ser claro y otro oscuro, para que el usuario elija cómo quiere verlo.
Fichero nav.js: Contiene código javascript que permite manejo de menús, ejecutar los menús tipo "Despegar", "Replegar", "Esquema", cambiar de tema CSS (style1.css o style2.css), las variables con los textos HTML de las partes comunes a los HTML, el código que permite ejecutar la incorporación de estas carables en el HTML, Funciones de configuración.
imágenes comunes como el logo a poner en la cabecera, si lo hubiera.
El fichero nav.html pretende representar el modelo que probamos cómo queda y de donde obtenemos las variables para incrustación de código HTML que se encuetran en html.js.
Podríamos tener ficheros de fuentes de letras,..

Carpetas recursos_X

Aquí están los ficheros con recursos comunes, pero que no son empleados de forma extensiva por los .html o páginas. Ejemplos de recursos son código para el resaltado de códigos en lenguajes de programación, visualización de ecuaciones, para representación de estructuras de árboles, para presentar una galería de fotos, para presentar menús horizonales, verticales, acordeones, sistema de pestañas, gráficos u animaciones,..

En general constan de dos archivos: un .css que define los estilos, y un .js con el código. También podemos tener un .html con la explicación de cómo se usa el recurso. En ocasiones sólo un archivo, por ejemplo un .js para una librería matemática. Es interesante que los nombres de los archivos tengan que ver con el nombre del recurso y sea el mismo para todas sus extensiones. Podríamos tener varias carpetas de recursos, pero en general, y manteniendo el criterio de nombre común, podríamos meter varios recursos en cada carpeta.

Hacer una página Web

La página Web la haremos en su carpeta, lo que hemos llamado carpeta de proyectos y que en el esquema de carpetas hemos puesto como "proj_n". El nombre de la carpeta indicada es genérico, le podemos dar el nombre que queramos.

En la carpeta de proyectos debe haber uno o muy pocos ficheros .HTML. Son las aplicaciones finales. Referenciarán a los ficheros anteriores. Si deben tener un fichero de estilos propio, lo podemos poner compartiráen la misma carpeta de proyecto, lo mismo que los ficheros .JS de código javascript, imágenes, sonido, videos,.. Si se prefiere se pueden poner en subcarpetas dentro de la carpeta de proyecto, lo que puede ser muy recomendable si por ejemplo se utilizan muchas imágenes. Se decidirá para cada proyecto.

Para poder tener páginas webs con las composiciones indicadas y utilizar correctamente el sistema de archivos, los ficheros .HTML:

Deben tener la estructura descrita, con los <DIV> de clases "grid", "grid2", "headerCenter", "contentLeft", "contentCenter", "contentRight" y "footer".
El siguiente código muestra un ejemplo bastante completo, cuyas partes se explican a continuación:


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Título del documento</title>

    <!-- Fuente de google -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

    <!-- ÁREA DE REFERENCIAS A FICHEROS DE ESTILO (.CSS) EXTERNOS -->
    <link id="temaCSS" href="../comun/style.css" rel="Stylesheet">
    <link href="../recursos_1/prism.css" rel="stylesheet">
    <link href="../recursos_1/tree.css" rel="Stylesheet">
    
    <!-- ÁREA DE ESTILOS PROPIOS DEL DOCUMENTO EN EL .HTML -->
    <style type="text/css"> 
        .grid {
            grid-template-columns: 1fr 12fr 5fr;
        }

        .grid2 {
            grid-template-columns: [x0] 1fr [x1] 12fr [x2] 5fr [x4];
        }
    </style>

</head>

<body>
    <main class="grid">
        <header class="header grid2">
            <div class="headerCenter logo-nav-container"> <!-- Cabecera -->

            </div>
        </header>
        <div class="contentLeft"> </div>       <!-- Contenido área izquerda -->
        <div class="contentCenter">            <!-- Contenido principal en área central -->

        </div>
        <div class="contentRight"></div>       <!-- Contenido área derecha, por defecto para el índice del sitio. -->
        <div class="footer"> </div>            <!-- Contenido pie de página -->
    </main>

    <!-- ÁREA DE REFERENCIAS A FICHEROS JAVASCRIPT (.JS) EXTERNOS -->
    <script src="../RECURSOS_1/prism.js"></script>
    <script src="../comun/nav.js"></script>

    <!-- ÁREA DE CÓDIGO JAVASCRIPT PROPIO DEL DOCUMENTO -->
    <script>
        addEventListener('load', htmlPorDefecto);
    </script>
</body>
</html>

Se puede empezar a hacer in proyecto copiando el código anterior como inicio de nuestro .html, y luego quitar y añadir el código restante.

Si queremos poder cambiar de archivos CSS, tendremos que identificar con id="temaCSS" la línea que hace referencia a los estilos (línea 16):
```
<link id="temaCSS" rel="Stylesheet" href="../COMUN/style.css">
                            
```
Si vamos a usar recursos, por ejemplo para mostrar código resaltado y árboles, tenemos que poner la referencia a los CSS, que es de esperar que los rengamos en RECURSOS_1 (líneas 17 y 18):
```
<link href="../recursos_1/prism.css" rel="stylesheet">
<link href="../recursos_1/tree.css" rel="Stylesheet">
                            
```
y en la parte fichal de scripts, antes del cierre del body, referenciar a los archivos correspondientes javascript (líneas 49 y 50):
```
<script src="../recursos_1/prism.js"></script>
<script src="../recursos_1/tree.js"></script>
                            
```
Si queremos cambiar los anchos de las columnas, pondremos un estilo como (líneas 21 a 29):
```
.grid {
    grid-template-columns: 1fr 12fr 5fr;
}

.grid2 {
    grid-template-columns: [x0] 1fr [x1] 12fr [x2] 5fr [x4];
}
                            
```
los valores 1fr, 12fr y 5fr son las relaciones entre las columnas izquierda, central y derecha correspondientes a las áreas contentLeft, contentCenter y contentRight.
Para que nos incruste el código común, debemos incluir el archivo nav.js (línea 50), antes del cierre del body:
```
<script src="../comun/nav.js"></script>
                            
```
También contiene las funciones de los menús para desplegar, replegar, de los esquemas (details-summary) del documento, cambio de tema CSS. Además ejecutaremos el siguiente script (líneas 53 a 55):
```
addEventListener('load', htmlPorDefecto);
                            
```
La función htmlPorDefecto(), ejecuta las siguientes funciones:
```
ponHTML("footer", varPie);              // Carga el footer (pie de página).
ponHTML("headerCenter", varCabecera);   // Carga el headerCenter (parte superior del documento o cabecera).
ponHTML("contentRight", varIndice);     // Carga el índice de ficheros en el contentRight (lado derecho).
habilitaPanelesMoviles();
                            
```
Si no queremos cargar una de esas partes, podemos no llamar a htmlPorDefecto() y ejecutar las funciones concretas que deseemos (sustituyendo línea 54 por las llamas a ponHTML() que queramos).
La última línea habilita el redimensionamiento con el ratón de los tres divs de contenido. Si queremos dejar fijas las dimensiones de los paneles, debe evitarse llamar a la función habilitaPanelesMoviles();.
Cuando hagamos una función javascript, las referencias a las id o a las clases de los elementos del documento, lo haremos con el formato usado por los selectores tal como se usan selector con las funciones document.querySelector(selector) o document.querySelectorAll(selector), Es decir, lo parámetros serán del tipo "#miIdentificador" o ".miClase". Se usasá document.querySelector(selector) en cuenta de document.getElementById(id).