Seguir un estándar para la Creación del Sitio Web

[adawolfs]

Estructura de Carpetas

Seguir una estructura convencional para las carpetas

/my-static-site
|-- index.html
|-- about.html
|-- contact.html
|-- favicon.ico
|-- .htaccess
|-- /stye
|   |-- style.css
|   |-- reset.css
|   |-- layout.css
|-- /js
|   |-- main.js
|   |-- utils.js
|-- /images
|   |-- logo.png
|   |-- background.jpg
|-- /fonts
|   |-- myfont.woff
|   |-- myfont.woff2

Nomenclatura

1. Nombres de Archivos y Carpetas:

   • Usar nombres descriptivos y en minúsculas.
   • Preferir siempre el idioma ingles, para la creación de archivos, clases, nomenclaturas y mensajes de commit.
   • Evitar espacios; usar guiones - para separar palabras.
   • Ejemplos: style.css, main.js, logo.png.

2. CSS:

   • Archivos CSS deben tener nombres que describan su propósito: style.css, reset.css, layout.css.

3. JavaScript:

   • Nombres descriptivos según su función: main.js, utils.js.

4. Imágenes:

   • Nombres que describan el contenido o propósito de la imagen: logo.png, background.jpg.

5. Fuentes:

   • Nombres que indiquen el tipo de fuente: myfont.woff, myfont.woff2.

Uso de Referencias Relativas sobre Absolutas

1. Referencias Relativas:

   • Las rutas relativas hacen que el proyecto sea más portátil y adaptable a cambios en el directorio base.
   • Ejemplo:

     <link rel="stylesheet" href="css/style.css">
     <script src="js/main.js"></script>
     <img src="images/logo.png" alt="Logo">

   • Utilizar rutas relativas facilita mover el proyecto a diferentes servidores o directorios sin necesidad de actualizar las rutas.

2. Referencias Absolutas:

   • Las rutas absolutas definen la ruta completa desde la raíz del sitio web.
   • Ejemplo:

     <link rel="stylesheet" href="/css/style.css">
     <script src="/js/main.js"></script>
     <img src="/images/logo.png" alt="Logo">

   • Las rutas absolutas son menos flexibles cuando se trasladan proyectos a diferentes entornos o subdirectorios.

Estándares para Commits

Para mantener un historial de cambios claro y comprensible, es importante seguir una convención para los mensajes de commits:

1. Formato del Mensaje:

   • Primera línea (resumen): Máximo 50 caracteres, debe describir brevemente el cambio.
   • Segunda línea: Vacía.
   • Tercera línea en adelante: Descripción detallada del cambio, si es necesario.

2. Tipos de Commits:

   • feat: Una nueva característica.
   • fix: Arreglo de un bug.
   • docs: Cambios en la documentación.
   • style: Cambios que no afectan el código (formateo, espacios en blanco, etc.).
   • refactor: Cambios en el código que no arreglan un bug ni añaden una característica.
   • test: Añadir o corregir pruebas.
   • chore: Actualización de tareas de build, configuración, etc.

3. Ejemplos de Mensajes de Commits:

   • feat: add responsive navigation bar
   • fix: correct typo in index.html
   • docs: update README with project setup instructions
   • style: reformat CSS files
   • refactor: reorganize JavaScript functions
   • test: add unit tests for main.js
   • chore: update dependencies

Buenas Prácticas Adicionales

1. Comentarios en el Código:

   • Comentar secciones del código para explicar su funcionalidad, especialmente en archivos JavaScript y CSS complejos.

2. Consistencia:

   • Mantener un estilo de codificación consistente (puedes usar herramientas como ESLint para JavaScript y Stylelint para CSS).

3. Documentación:

   • Mantener un archivo README.md en la raíz del proyecto explicando la estructura, cómo configurar y ejecutar el proyecto, y cualquier otra información relevante.

4. Usar referencias relativas sobre absolutas

[ErickaT23]

Ya lo revise todo, gracias por la información voy a poner en marcha los cambios y lo estaré subiendo.

[GuateGeeks]

Vale, con respecto al HTML

Considera utilizar más elementos HTML5 para mejorar la accesibilidad y la estructura del documento.

Se puede usar

para el contenido principal.

Cambia

por

y

si quieres añadir una descripción al logo.

Evita el uso de separadores como elementos de lista, en el menú de navegación, estás usando

|

para separar elementos del menú. Sería mejor controlar esto a través de CSS usando pseudo-elementos como :after, para no añadir contenido no semántico al HTML.

Un botón dentro de un enlace contactános es redundante y podría ser simplificado solo a un enlace con estilos de botón.

https://github.com/GuateGeeks/page-stage/blob/develop/my-static-site/index.html#L8 No uses referencias absolutas, usa referencias relativas

https://github.com/GuateGeeks/page-stage/blob/develop/my-static-site/index.html#L30 Usar clases para crear este menu no es muy estandar,recomendaria que uses mejor el selector "nav div"

https://github.com/GuateGeeks/page-stage/blob/develop/my-static-site/index.html#L40 Veo que usas muchas clases especificas, podrias intentar hacer clases mas generales, podrias tener lo siguiente

    <section id="contact">
        <div class="container">
            <div class="content">

Y en tu css hacer selecciones por el ID

contact .container .content {

....

Recomiendo que saques el archivo index de "my-static-file" y ponlo en la raiz del proyecto para simplificar la estrucutra.

[GuateGeeks]

Se usa font-family: 'Barlow'; en múltiples lugares. Podrías simplificar este proceso aplicando la fuente a nivel más global (por ejemplo, en body) y sobreescribir donde sea necesario.

Para colores, tamaños de fuente y otros valores que se repiten, considera utilizar variables CSS. Esto hace que las actualizaciones y mantenimiento sean más fáciles y rápidas. Por ejemplo: css Copiar código :root { --main-font: 'Barlow', sans-serif; --primary-color: #B230C8; --secondary-color: #172B60; --text-color: #fff; --font-size-large: 40px; --font-size-normal: 20px; } body { font-family: var(--main-font); color: var(--text-color); }

Elimina cualquier redundancia en los selectores y propiedades. Por ejemplo, si múltiples secciones comparten estilos comunes, crea clases reutilizables. Reduce la especificidad donde sea posible para hacer el CSS más fácil de sobreescribir y mantener.

Aumentar la Semántica en CSS:

En lugar de nombres de clase como .box o .big-box, considera nombres más descriptivos que reflejen su función o contenido, lo cual mejora la legibilidad y mantenimiento del código.

Considera usar propiedades como grid o flexbox para diseños más complejos, lo cual puede simplificar tu código y mejorar la responsabilidad y mantenibilidad del layout.