Skip to content

Latest commit

 

History

History
119 lines (79 loc) · 4.47 KB

README.md

File metadata and controls

119 lines (79 loc) · 4.47 KB
Raw

Spectral Hackers Guild

Spectral Hackers Guild es un sitio web estático dedicado a la difusión de información sobre el club de hacking ético y ciberseguridad, así como a la publicación de recursos educativos y documentos relevantes.

Este sitio está alojado en GitHub Pages y utiliza tecnologías modernas como Bootstrap y Tailwind CSS para asegurar un diseño atractivo, responsivo y escalable.

1. Descripción General del Proyecto

El sitio tiene como objetivo proporcionar una plataforma para aprender sobre ciberseguridad, acceder a recursos de aprendizaje y descargar documentos relacionados con hacking ético.

Tecnologías Utilizadas

  • GitHub Pages: Para alojar el sitio web estático.
  • HTML5: Estructura del contenido del sitio.
  • CSS: Personalización de estilos con Tailwind CSS y Bootstrap.
  • Bootstrap 5.3: Para crear un diseño responsivo.
  • Tailwind CSS: Para estilos personalizados y optimización visual.
  • Formspree: Para la gestión de formularios sin backend.

2. Estructura del Proyecto

Estructura de Archivos y Directorios

El proyecto sigue la siguiente estructura de archivos y carpetas:

  / (Raíz del Repositorio)
  ├── index.html              # Página principal
  ├── learning.html           # Página de Aprendizaje
  ├── docs.html               # Página de PDFs
  ├── /Docs                   # Carpeta para los documentos PDF
  |   └── /file=
  |       └── /PDF
  │           ├── UNAM.pdf
  │           └── Infografia_UNAM.pdf
  |
  ├── styles.css              # Archivo CSS personalizado
  └── img                     # Carpeta para imágenes y favicon
      └── favicon.png         # Favicon del sitio

Descripción de los Archivos

  • index.html: Página principal del sitio con información general sobre el club.
  • learning.html: Página de recursos educativos.
  • docs.html: Página donde los usuarios pueden descargar documentos PDF.
  • styles.css: Archivo CSS personalizado para ajustes de diseño.
  • /Docs/file=/PDF: Carpeta que contiene los archivos PDF disponibles para descarga.
  • /img: Carpeta para imágenes, incluyendo el favicon del sitio.

3. Páginas del Proyecto

3.1. Página Principal (index.html)

  • Objetivo: Proporcionar información general sobre el club y sus proyectos.
  • Secciones Clave:
    • Navbar: Barra de navegación con enlaces a las demás páginas.
    • Hero Section: Banner principal con el nombre del club y su lema.
    • Proyectos y Retos: Descripción de los proyectos en curso.
    • Blog: Resumen de artículos.
    • Formulario de Contacto: Gestionado por Formspree para enviar información sin backend.

3.2. Página de Aprendizaje (learning.html)

  • Objetivo: Ofrecer tutoriales y recursos educativos sobre hacking ético y ciberseguridad.
  • Contenido: Listado de guías y recursos para el aprendizaje, con enlaces a tutoriales.

3.3. Página de PDFs (docs.html)

  • Objetivo: Permitir la descarga de documentos PDF.
  • Contenido: Listado de archivos PDF con enlaces de descarga directa desde la carpeta /Docs/file=/PDF.

4. Estilos y Diseño

4.1. Colores Utilizados

  • Morado oscuro (#5A189A): Color principal para los encabezados y botones.
  • Blanco (#FFFFFF): Color de fondo.
  • Gris claro (#F3F4F6): Para mejorar la legibilidad del texto.

4.2. Tipografía

  • Open Sans: Fuente utilizada en todo el sitio.

4.3. Diseño Responsivo

  • Bootstrap se utiliza para hacer que el sitio sea completamente adaptativo a diferentes pantallas.

4.4. Estilos Personalizados

  • Tailwind CSS se utiliza para personalizar márgenes, paddings, colores y tipografía.

5. Configuración del Formulario sin Backend

5.1. Integración con Formspree

El formulario en index.html está gestionado a través de Formspree para recoger datos sin necesidad de backend.

  • El formulario se configura con: 
    <form action="https://formspree.io/f/YOUR-FORM-ID" method="POST">

Formspree procesa el formulario y envía los datos al correo electrónico configurado.

6. Mantenimiento y Escalabilidad

  • Nuevas Páginas: Para añadir nuevas páginas, crea un nuevo archivo HTML y enlázalo en el menú de navegación.
  • Documentos PDF: Los nuevos documentos pueden añadirse a la carpeta /Docs/file=/PDF y enlazarse desde la página docs.html.