Este repositorio contiene el proyecto base para levantar una página web con los requerimientos mínimos para un proyecto que utilice el Sistema de Diseño y Accesibilidad para la Investigación (Sisdai). En el marco del Sisdai también puedes consultar los sisdai-anexos para encontrar lineamientos y recomendaciones de como documentar y/o construir un proyecto.
Cualquier persona puede hacer uso de esta biblioteca al clonarla e instalarla en su equipo a través del protocolo HTTPS.
- Homologa los estilos utilizando el sistema de diseño Sisdai.
- Mejora la accesibilidad mediante el uso de html semántico y aplicando las reglas establecidas en Sisdai.
- Facilita la actualización de elementos institucionales requeridos como cabeceras y pies de páginas de Gobierno de México y Conahcyt.
- Hace visible en ambientes de desarrollo las versiones actuales para mejorar la comunicación en revisiones
- Agrega de base un menú de accesibilidad con funciones adaptadas y conectadas con el sistema de diseño Sisdai.
| Elemento | Ubicacion | Descripción |
|---|---|---|
| main.js | src/ | Archivo en donde estan precargados sisdai-css y sisdai-componentes y se configura el matomo |
| App.vue | src/ | Archivo con la estructura basica de un proyecto, como cabeceras, pies de página, barra de navegación, menú de accesibilidad y componente con información de despliegue |
| PaginaInicio.vue | src/views/ | Vista en Vue con un ejemplo de portada para iniciar el contenido de un nuevo capitulo eni |
| PaginaVisualizaciones.vue | src/views/ | Vista en Vue con un ejemplo de una gráfica de barras con globo de información. |
| PaginaCreditos.vue | src/views | Vista en Vue con ejemplos de créditos para organizaciones y personas investigadoras. |
| PaginaInvestigadora.vue | src/views | Vista en Vue de un perfil de persona investigadora. |
| PaginaOtraVista.vue | src/views | Ejemplo de una vista en Vue vacía. |
| NavegacionPrincipalBase.vue | src/components/nagevacion/ | Utilizando la base de componente de navegación, en este componente se pueden actualizar los links del menú del sitio |
proyecto-base/
└── src/
├── main.js
├── App.vue
├── router/
│ └── index.js
├── views/
│ ├── PaginaInicio.vue
│ └── PaginaVisualizaciones.vue
│ └── PaginaCreditos.vue
│ └── PaginaInvestigadora.vue
│ └── PaginaOtraVista.vue
│ └── ErrorPaginaNoEncontrada.vue
└── components/
└── navegacion
└── NavegacionPrincipalBase.vuePara desarrollar este proyecto se usó node.js como entorno de ejecución de JavaScript. La opción recomendada para instalarlo es vía nvm que es el manejador de versiones de node. Siguiendo este camino, también se instalará el manejador de paquetes npm. Dado lo anterior las instrucciones de instalación y dependencias del proyecto se muestran aquí usando tanto npm, como nvm.
Si tienes un repositorio de código vacío y quieres iniciar con el proyecto base, sigue estas instrucciones. Si ya tienes contenido en tu proyecto y quieres integrar el capítulo demo, ve al paso 4.
-
Crea una carpeta en tu local con el nombre de tu proyecto.
mkdir mi-proyecto
-
Sigue las instrucciones del repositorio de código donde alojarás tu proyecto, para iniciarlizarlo con
git.cd mi-proyecto git init --initial-branch=main -
Agrega el remoto del repositorio de código donde alojarás tu proyecto. Es importante que se llame
originpara que sea el remoto por defecto.git remote add origin https://scm.crip.conacyt.mx/mi-proyecto.git
-
Agrega el remoto del capítulo demo.
git remote add proyecto-base https://codigo.conahcyt.mx/eni/proyecto-base.git
Si tecleas el comando
git remote -vpodrás ver todas las url de los remotos y sus nombres. -
Configura el repositorio remoto del sisdai para no bajar los tags ni heads
git config remote.proyecto-base.fetch '+refs/heads/*:refs/heads/*' git config remote.proyecto-base.tagopt --no-tags -
Baja los últimos cambios del proyecto-base
git pull --no-rebase proyecto-base main --allow-unrelated-histories
En caso de que tengas contenido en tu proyecto, resuelve los conflictos que te marque git.
-
Establece la versión adecuada de npm y nvm (previamente instaladas en tu equipo)
nvm use 20
-
Instala las dependencias de la biblioteca
npm install
Ahora ya puedes integrar tus cambios a otras ramas o subirlos al repositorio original. Puedes borrar el remote del capítulo demo y conservar solamente el de tu repositorio original. Estos pasos también te funcionarán para obtener cambios del capítulo demo si los necesitas.
-
Actualiza el nombre y reinicia la version en el
package.json// nombre-del-proyecto-nuevo/packaje.json "name": "nombre-del-proyecto-nuevo", "version": "0.1.0",
En este punto ya puedes subir la rama main a tu repositorio de código (origin). A partir de aquí te recomendamos seguir el versionamiento semántico y flujo entre ramas que puedes encontrar en sisdai-anexos.
-
Modifica el archivo de variables de ambiente
.envde acuerdo a las necesidades del proyecto. Para cada ambiente es necesario modificar el archivo de ambiente correspondiente, el.enves para el entorno local,.env.desarrollopara un ambiente de desarrollo,.env.preproduccionpara un ambiente de preproducción, y.env.productionpara un ambiente de producción. Se dejan por defecto estos cuatro archivos en el proyecto, pero pueden crearse o eliminarse de acuerdo al mismo. También se dejan en los archivos, variables de ambiente por defecto que se usan en este capítulo demo y que son propias de los capítulos de los ENI, sin embargo se deben agregar o quitar de acuerdo al proyecto a desarrollar. Se deja aquí el ejemplo del archivo de ambiente local.env.// variable para matomo (si cuentas con esta tecnología), // se mantiene en 0 cuando no se ha asignado un ID específico para el proyecto, // se cambia únicamente para el ambiente de producción VITE_MATOMO_ID = 0 // título del proyecto, éste aparecerá en la pestaña del navegador VITE_TITULO = Título del proyecto // descripción del proyecto, se utiliza para agregar metadatos en el navegador VITE_DESCRIPCION = Descripción del proyecto // palabras clave del proyecto, se utiliza para que los buscadores indexen el proyecto con estas etiquetas para mejorar las busquedas en los motores como Google VITE_PALABRAS_CLAVE = palabras, clave, separadas, por, coma // url completa de donde se encuentra la imagen que se utilizará como portada a la hora de compartir en redes sociales VITE_IMAGEN = https://dominio.mx/archivo-imagen-para-compartir.jpg // para cuando el proyecto viene de otro proyecto más grande, por ejemplo un ENI, aqui va el nombre del ENI en particular VITE_PROYECTO_MADRE = // el dominio en el que se verá tu proyecto, // en un entorno local es localhost:seguido-del-puerto // para el ambiente de pruebas y producción debes agregar el nombre del dominio ej. https://energia.conahcyt.mx VITE_DOMINIO = http://localhost:5173 // carpeta o subcarpeta en donde se hospeda el código, // se agrega la / cuando el proyecto está en raíz, // pero si tiene un subfolder como pasa en todos los capitulos ENI se debe agregar el nombre del capítulo en formato corto // ejemplo: para https://energia.conahcyt.mx/planeas/ el VITE_URL_BASE = /planeas/ VITE_URL_BASE = / // url de la carpeta de archivos estáticos (imágenes, documentos, etc) donde se alojan tus insumos si no los guardas en el front-end, // ej. en desarrollo: https://dev-dadsig-cdn.crip.conahcyt.mx/enis/energia/planeas/ // ej. en produccion: https://cdn.conahcyt.mx/enis/energia/planeas/ VITE_CDN_ARCHIVOS = https://dev-dadsig-cdn.crip.conahcyt.mx/ // metadato para decirle a los bots si se puede indexar la página // ej. en desarrollo: noindex, nofollow // ej. en produccion: index, follow VITE_INDEXACION = index, follow
-
Actualiza este README.md con la información que requiera tu proyecto.
-
Actualiza la licencia de tu proyecto. La licencia incluída aquí es únicamente para proyecto-base. Una vez que tengas tu propio proyecto deberás modificar la licencia de acuerdo con los lineamientos del proyecto GNU.
Para levantar el proyecto en un servidor local.
npm run devPara levantar el proyecto en un servidor local en modo de preproducción.
npm run dev:ppPara levantar el proyecto en un servidor local en modo de producción.
npm run dev:prodPara compilar el proyecto en un ambiente de desarrollo.
npm run build:devPara compilar el proyecto en un ambiente de preproducción.
npm run build:ppPara compilar el proyecto en un ambiente de producción.
npm run buildEn el package.json por defecto se incluyen otras instrucciones que te pueden
ayudar a revisar el proyecto.
Para garantizar el buen funcionamiento y cumplimiento de buenas prácticas de código se implementó un linter en este capítulo demo. La documentación del mismo la puedes encontrar en el archivo linter.md.
SOFTWARE LIBRE Y ESTÁNDARES ABIERTOS
Sisdai y proyecto-base están alineadas a las disposiciones establecidas por la Coordinación de Estrategia Digital Nacional ( DOF:06/09/2021) en donde se estipula que las "políticas y disposiciones tienen como objetivo fortalecer el uso del software libre y los estándares abiertos, fomentar el desarrollo de aplicaciones institucionales con utilidad pública, lograr la autonomía, soberanía e independencia tecnológicas dentro de la APF". En el artículo 63 se explicita que "cuando se trate de desarrollos basados en software libre, se respetarán las condiciones de su licenciamiento original [...]".
Considerando lo anterior proyecto-base se publica bajo la licencia LGPLv3. Dicha licencia se puede consultar en el archivo LICENSE de este repositorio. Esta licencia se encuentra disponible en inglés porque aunque el Sisdai privilegia el idioma español se respeta la versión original de acuerdo al proyecto GNU.
Por el momento sólo quienes sean parte de un equipo de investigación del capítulo de un ENI podrán levantar issues en este repositorio. Mientras que el equipo del sistema de diseño Sisdai se encargará de mantenerlo.