Configurar correctamente la estructura inicial de un proyecto web es fundamental para trabajar de forma organizada y eficiente. Aquí se explica paso a paso cómo crear las carpetas, los archivos HTML y CSS necesarios, y cómo integrar Materialize mediante CDN para comenzar a construir un sitio con tres vistas.
¿Cómo organizar las carpetas y archivos del proyecto?
El punto de partida es crear una carpeta principal en cualquier ubicación de tu computadora. En este caso se usa Visual Studio Code como editor de texto [0:08]. Dentro de esa carpeta se genera la siguiente estructura:
- Un archivo index.html, que funciona como la página de inicio del proyecto [1:02].
- Una carpeta llamada CSS, destinada a contener todos los estilos personalizados.
- Dentro de esa carpeta, un archivo main.css donde se escribirán las reglas de estilo propias [1:14].
El proyecto contempla tres vistas, es decir, tres archivos .html distintos. Sin embargo, los otros dos se crean más adelante, conforme se avance en el desarrollo [1:26]. Esta práctica permite concentrarse primero en la vista principal y evitar archivos vacíos innecesarios.
Una vez creado el index.html, se inicializa la estructura básica de HTML dentro de él. Con esto, el esqueleto del proyecto queda listo para recibir las dependencias externas.
¿Qué es un CDN y cómo se integra Materialize?
Un CDN (Content Delivery Network) es una red de servidores que permite cargar librerías externas directamente desde una URL, sin necesidad de descargar archivos al proyecto. Materialize ofrece esta opción en su página oficial, dentro de la sección Get Started [1:52].
Para integrar Materialize se necesitan dos elementos:
- El enlace de CSS de Materialize, que se coloca dentro de la etiqueta
<head> del HTML [2:10].
- El script de JavaScript de Materialize, que se coloca justo antes de cerrar la etiqueta
</body> [2:18].
Incluir el JavaScript es una buena práctica aunque ciertos componentes parezcan puramente visuales, ya que algunas animaciones y funcionalidades dependen de él [2:06].
Si prefieres un flujo de trabajo diferente, Materialize también se puede instalar mediante NPM o trabajar con Sass para personalizar los estilos a un nivel más profundo [2:30].
¿Cómo agregar las fuentes e íconos de Google que requiere Materialize?
Materialize utiliza fuentes e íconos específicos de Google, particularmente la fuente Material Icons (material plus icons). La referencia a estas fuentes se encuentra en la misma documentación de Get Started, al final de la sección de setup [2:50].
El enlace de las fuentes de Google se copia y se pega por encima del enlace CSS de Materialize dentro del <head> [3:06]. Esto garantiza que los íconos y tipografías estén disponibles antes de que Materialize los necesite.
Finalmente, se añade también la referencia al archivo main.css propio, apuntando a la ruta css/main.css [3:18]. Con estos tres enlaces en el <head> y el script de JavaScript antes del cierre de </body>, la estructura completa del index.html queda lista.
El orden recomendado dentro del <head> es:
- Fuentes de Google (Material Icons).
- CSS de Materialize (CDN).
- CSS personalizado (main.css).
Este orden asegura que tus estilos propios puedan sobrescribir los de Materialize cuando sea necesario, aprovechando la cascada de CSS.
Con esta configuración inicial completa, el siguiente paso es comenzar a codificar y maquetar el header del proyecto. Si tienes dudas sobre la estructura o la integración del CDN, comparte tu experiencia en los comentarios.
