COIL UNAM

Documentacion funcional del sitio COIL UNAM (Vue 2 + Tailwind). Resume la configuracion, scripts y estructura para ejecutar y mantener el proyecto.

Requisitos previos

• Node.js 16+ y npm.
• Acceso a Internet para descargar dependencias y consumir la API configurada en src/api.js.

Instalacion y arranque local

1. Instalar dependencias: npm install
2. Levantar el entorno de desarrollo: npm run serve
3. Abrir http://localhost:8080 (puerto por defecto de Vue CLI).

Scripts disponibles

• npm run serve: entorno de desarrollo con hot reload.
• npm run build: compila la aplicacion para produccion en dist/.
• npm run lint: ejecuta ESLint sobre el codigo fuente.

Stack principal

• Vue 2.6 con Vue Router.
• Tailwind CSS 3 para estilos utilitarios (entrada en src/assets/css/tailwind.css).
• Font Awesome (iconos solidos) via @fortawesome/vue-fontawesome.
• Moment + moment-timezone para fechas.

Guia rapida si no usas Vue

• No necesitas instalar Vue CLI global; con npm install ya tienes todo (vue-cli-service viene en devDependencies).
• Las paginas estan en src/views/ como componentes de un solo archivo .vue (template + script + style).
• La navegacion esta en src/router.js: cada path apunta a una vista; si agregas una nueva pagina, importa la vista y agrega una ruta.
• El punto de entrada es src/main.js, que monta la app y carga estilos globales.
• Para probar: npm run serve levanta http://localhost:8080. Para compilar: npm run build genera dist/.

Estructura relevante

• src/main.js: arranque de Vue, registro de iconos y carga global de estilos.
• src/router.js: definicion de rutas publicas para home, eventos, recursos y ediciones de Coilaborando (2023-2025).
• src/App.vue: layout principal con BurgerMenu y router-view.
• src/api.js: helpers de fetch contra https://semanahddata.cuaieed.unam.mx/api/ para eventos, demos y comisiones. Contiene token embebido (ver notas de seguridad).
• src/timezone.js: catalogo de zonas horarias para formularios.
• src/components/: componentes UI (menus, formularios, alertas, carruseles).
• src/views/: paginas del sitio, incluyendo jornadas y entregas por anio de Coilaborando.

Vistas y rutas

• Home (/, HomeCoilView.vue): portada del sitio.
• Acerca de (/acerca-de, AboutCoilView.vue): informacion general COIL UNAM.
• Te interesa diseñar un COIL (/interes, InterestedCoilView.vue): guia para diseñar un COIL.
• Testimonios (/testimonios, TestimonialsCoilView.vue).
• Presencia (/presencia, PresenceCoilView.vue): COIL en medios.
• Publicaciones (/publicaciones, PublicationsCoilView.vue): materiales UNAM.
• Recursos (indice /recursos, resources/IndexView.vue): categorías de recursos.
• Recursos > Articulos (/recursos/articulos, resources/ArticlesView.vue).
• Recursos > Libros (/recursos/libros, resources/BooksView.vue).
• Recursos > Infografias (/recursos/infografias, resources/InfographicsView.vue).
• Recursos > Varios (/recursos/varios, resources/SomeView.vue).
• Recursos > Tutorial (/recursos/tutorial, resources/TutorialView.vue).
• Recursos > Workbook (/recursos/workbook, resources/WorkbookView.vue).
• Eventos (/eventos, EventsCoilView.vue).
• Comision (/consejeros, ComissionCoilView.vue).
• Registro (/registro, RegistrationCoilView.vue).
• Jornada COIL (/jornada-coil, JornadaCoilView.vue).
• 1a Jornada (/1jornada, Jornada1stView.vue).
• 2a Jornada (/2jornada, Jornada2thView.vue).
• 3a Jornada (/3jornada, Jornada3thView.vue).
• COILaborando actual (/coilaborando, CoilaborandoView.vue): boletin vigente.
• COILaborando previos (/coilaborando/previos, PreviosView.vue): indice de boletines.
• COILaborando ediciones 2023 (/coilaborando/previos/2023/{mes}, vistas en views/coilaborando/2023/).
• COILaborando ediciones 2024 (/coilaborando/previos/2024/{mes}, vistas en views/coilaborando/2024/).
• COILaborando ediciones 2025 (/coilaborando/previos/2025/{mes}, vistas en views/coilaborando/2025/).

Configuracion y buenas practicas

• Variables sensibles: actualmente el token API esta hardcodeado en src/api.js. Moverlo a variables de entorno (.env.local con prefijo VUE_APP_) antes de publicar o compartir el codigo.
• Rutas: al agregar nuevas paginas, registrar el componente en src/router.js y crear la vista dentro de src/views/ (o subcarpetas por anio).
• Estilos: usar utilidades Tailwind cuando sea posible; para estilos globales, editar src/assets/css/tailwind.css o agregar clases locales en los componentes.
• Imágenes: los recursos estan bajo src/assets/images/ con carpetas por categoria y anio para mantener orden.
• Largos de linea: mantener lineas en componentes Vue por debajo de ~120 caracteres; dividir props/atributos largos en varias lineas para preservar legibilidad y cumplir con linters.
• Linter/Prettier para el limite: npm run lint usa ESLint con Prettier. Para forzar 120 caracteres agrega .prettierrc con { "printWidth": 120 } y en .eslintrc.js suma "max-len": ["warn", { "code": 120, "template": 120, "ignoreUrls": true }] (o "vue/max-len" si prefieres aplicar solo a templates).

COILaborando Boletin (como actualizar)

• Vista principal vigente: src/views/CoilaborandoView.vue importa el numero actual como NewsletterView y muestra su portada + boton "ver anteriores".
• Patrón de previos (ej. Octubre 2025): contenedor con HeaderCoil, portada cover.jpg, contenido del boletin y CTA al indice de previos.
• Patrón vigente (ej. Diciembre 2025 actual): puede ser más simple, pero se recomienda alinear al patrón de previos para consistencia.

Pasos para archivar el numero vigente en previos

1. Crear/ajustar la vista en src/views/coilaborando/YYYY/MesView.vue con:
   • name acorde (ej. DiciembreView).
   • Layout con contenedor + portada + HeaderCoil + CTA router-link a { name: 'previos' }.
   • Usar assets en src/assets/images/coilaborando/YYYY/mes/ (incluye cover.jpg).
2. Registrar ruta en src/router.js con path /coilaborando/previos/YYYY/mes y name unico (ej. 2025-diciembre).
3. Agregar entrada en src/views/coilaborando/PreviosView.vue (arreglo bulletins): number, cover, name (coincide con la ruta).
4. Mantener las imagenes del numero archivado en su carpeta correspondiente; no mover assets.

Pasos para publicar un nuevo numero vigente

1. Crear la nueva vista (ej. src/views/coilaborando/2026/EneroView.vue) siguiendo el mismo layout de previos (portada + HeaderCoil + CTA a previos).
2. Guardar assets en src/assets/images/coilaborando/2026/enero/ (incluye cover.jpg).
3. En src/views/CoilaborandoView.vue, cambiar el import de NewsletterView a la nueva vista y actualizar la portada mostrada.
4. Opcional: preparar desde ya la ruta futura en router.js y la entrada en PreviosView.vue (se activará cuando el numero pase a previos).

Checklist rapido

• router.js: ruta con name unico por numero.
• PreviosView.vue: entrada en bulletins alineada al name y portada correcta.
• CoilaborandoView.vue: importa el numero vigente y muestra la portada actual.
• Assets: organizados por anio/mes bajo src/assets/images/coilaborando/.
• Revisión: npm run serve + npm run lint antes de build.

Construccion y despliegue

• Ejecutar npm run build; se genera dist/ listo para servir en Nginx/Apache o subir a un hosting estatico.
• Si se despliega detras de un subpath, ajustar publicPath en vue.config.js si es necesario.

Pruebas y calidad

• No hay pruebas automatizadas configuradas. Ejecutar npm run lint antes de subir cambios.

Contribucion rapida

• Crear rama de trabajo desde vuejs.
• Instalar dependencias, correr npm run serve, realizar cambios y validar visualmente.
• Ejecutar npm run lint y generar build de prueba si aplica.

Licencia

GPL-3.0