Saltar al contenido principal

Modificar o crear páginas de proyectos

Para hacer una página de proyecto básica (es decir, sin subrutas o subproyectos) se necesita solo un archivo Markdown (.md) situado en la ruta src/pages/projects. Ese archivo según el nombre que tenga definirá el nombre de la ruta, es decir, si el archivo Markdown se llama hermes.md, la ruta de la web será https://acg.ual.es/projects/hermes (o localhost:3000/projects/hermes si esta en modo desarrollo). Otra recomendación para facilitar el desarrollo es copiar de base un proyecto de los actualmente existentes.

Estos Markdown que he creado como base de los anteriores proyectos se componen de código en HTML y Markdown que es sencillo de modificar. La estructura que he creado se compone de 3 partes:

  • El banner (o cabecera)
  • El cuerpo del proyecto
  • El sidebar (o barra lateral) Proyecto con anotaciones

Cada uno de estos tienen subpartes, pero es más fácil de entender viendo el código de un proyecto ejemplo primero:

---
title: Proyecto EJEMPLO
description: Proyecto EJEMPLO
hide_table_of_contents: true
---
import styles from '@site/src/css/projects.module.css';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import ProjectsBanner from '@site/src/components/ProjectsBanner';
import PublicacionesReFeatures from '@site/src/components/PublicacionesReFeatures';

<ProjectsBanner title="EJEMPLO" titleSubPart="opcional" subtitle="Un ejemplo de proyecto" reference="ex4mP1e" background="proyectos/banner/enia-banner.png" color="#009b45" textColor="#555555" titleColor="white" link="/projects/ejemplo/" />

<div className={styles.contentContainer}>
  <div className={styles.mainContent}>
  <Tabs>
    <TabItem value="inicio" label="Inicio" default>
      Texto en Markdown o HTML que se desee para el proyecto
      ## Un ejemplo
      De texto formateado en Markdown `de diferentes maneras` y **estilos**.
    </TabItem>
    <TabItem value="publicaciones" label="Publicaciones">
      ## Publicaciones
      <PublicacionesReFeatures proyectoId="ejemplo"/>
    </TabItem>
    <TabItem value="equipo" label="Equipo">
        ## Equipo

        **Dr. Luis Iribarne** - _(Investigador principal)_
        <div>Grupo de Informática Aplicada, Universidad de Almería, España</div>
        **[luis.iribarne@ual.es](mailto:luis.iribarne@ual.es)**

        **Dr. Nicolás Padilla**
        <div>Grupo de Informática Aplicada, Universidad de Almería, España</div>
        **[npadilla@ual.es](mailto:npadilla@ual.es)**

        **Dra. Rosa María Ayala**
        <div>Grupo de Informática Aplicada, Universidad de Almería, España</div>
        **[rmayala@ual.es](mailto:rmayala@ual.es)**
        
        etc.... este es un ejemplo de como se puede escribir diversos miembros
    </TabItem>
  </Tabs>
 </div>
 <div className={styles.sidebar}>
    <div className={styles.sidebarCard}>
      <div style={{ display: 'flex' }}>
        <img style={{ width: '100%', height: 'auto' }} src={require(`@site/static/img/proyectos/logoJA.jpg`).default}/>
      </div>
      <p className={styles.imgFoot}>
        ex4mP1e
      </p>
      <h1 className={styles.sideH1}>Ejemplo de sección</h1>
      <div className={styles.sideElement}>
        <div className={styles.elementHeader}>
          <div className={styles.sideH2}>Ejemplo de titulo de elemento</div>
          <div className={styles.date}>9 de mayo del 2018 (o algo que no sea una fecha)</div>
        </div>
        <div>
          Aquí iría un texto de ejemplo para mostrar como se puede hacer una sección de noticias o algo similar.
        </div>
        <a className={styles.botonVerMas} href="https://www.example.com/"><strong>Ver más</strong></a>
      </div>
      <h1 className={styles.sideH1}>Otra sección</h1>
      <div className={styles.sideElement}>
        <div className={styles.elementHeader}>
          <div className={styles.sideH2}>Titulo de elemento</div>
          <div className={styles.date}>9 de mayo del 2018</div>
        </div>
        <div>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec nunc ultricies tincidunt. Nullam nec purus nec nunc ultricies tincidunt.
        </div>
        <a className={styles.botonVerMas} href="https://www.example.com/"><strong>Ver más</strong></a>
      </div>
    </div>
    <h1 className={styles.sideH1}>Otra sección pero de enlaces</h1>
      <div className={styles.links}>
        - [Enlace 1](https://acg.ual.es/projects/enia/ui/webservices/)
        - [Enlace 2](http://jade.tilab.com/)
        - [Enlace 3](http://www.ual.es/acg/soleres/)
      </div>
  </div>
</div>

Comienzo del Markdown​

Siempre que comencemos con una página de proyecto, su inicio más sencilo tendrá generalmente la siguiente estructura:

---
title: Proyecto EJEMPLO
description: Proyecto EJEMPLO
hide_table_of_contents: true
---
import styles from '@site/src/css/projects.module.css';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import ProjectsBanner from '@site/src/components/ProjectsBanner';
import PublicacionesReFeatures from '@site/src/components/PublicacionesReFeatures';

Como podemos ver se compone de un encabezado que contiene un titulo, que generalmente es el nombre del proyecto, una descripción, y un párametro para esconder las tablas de contenido, ya que en una página de proyecto no interesa que aparezca esto. Como recomendación yo copiaría esta parte tal cuál he mostrado, y únicamente modificaría el título y la descripción del proyecto con el nombre deseado.

La cabecera o banner​

El banner es lo más sencillo de modificar, se compone de una sola línea de código (ya que es un componente personalizado): Banner de un proyecto

<ProjectsBanner title="EJEMPLO" titleSubPart="opcional" subtitle="Un ejemplo de proyecto" reference="ex4mP1e" background="proyectos/banner/enia-banner.png" color="#009b45" textColor="#555555" titleColor="white" link="/projects/ejemplo/" />
  • title: es el nombre del proyecto
  • titleSubPart: es opcional, es un subtitulo que se puede poner al lado del título para poner un estilo diferente.
  • subtitle: es el subtítulo del proyecto
  • reference: es un identificador del proyecto como TIN2010 o del estilo.
  • background: es la imagen de fondo del banner, se puede poner una imagen de fondo situada en src/static/img/proyectos/banner/ .
  • color: es el color de fondo del banner. Generalmente es muy util tener un selector de color y hacerlo coincidir con el color de la imagen de fondo seleccionada (yo uso Windows+Shift+C con una app llamada PowerTools y en Mac existe esta https://www.pikka.app/).
  • textColor: es el color del texto del banner. Se aplica al titleSubPart, subtitle y reference.
  • titleColor: es el color del título del proyecto. Si se quiere el mismo color que el texto del banner, se puede poner el mismo color que el textColor.
  • link: nos permite vincular el banner con la página de inicio del proyecto para que al pulsar nos devuelva al inicio

El cuerpo del proyecto​

El cuerpo principal realmente sería la unión de lo que llame cuerpo y sidebar, pero para simplificar lo he dividido en dos partes. El cuerpo del proyecto es la parte que contendrá lo fundamental del proyecto y donde se puede poner texto en Markdown o HTML. El cuerpo estará envuelto en un div con la clase contentContainer y dentro de este habrá un div con la clase mainContent. Dentro de este div se pondrá el contenido del proyecto. Un ejemplo de como se puede estructurar el cuerpo del proyecto es el siguiente:

<div className={styles.contentContainer}>
  <div className={styles.mainContent}>
  <Tabs>
    <TabItem value="inicio" label="Inicio" default>
      Texto en Markdown o HTML que se desee para el proyecto
      ## Un ejemplo
      De texto formateado en Markdown `de diferentes maneras` y **estilos**.
    </TabItem>
    <TabItem value="publicaciones" label="Publicaciones">
      ## Publicaciones
      <PublicacionesReFeatures proyectoId="ejemplo"/>
    </TabItem>
    <TabItem value="equipo" label="Equipo">
        ## Equipo

        **Dr. Luis Iribarne** - _(Investigador principal)_
        <div>Grupo de Informática Aplicada, Universidad de Almería, España</div>
        **[luis.iribarne@ual.es](mailto:luis.iribarne@ual.es)**

        **Dr. Nicolás Padilla**
        <div>Grupo de Informática Aplicada, Universidad de Almería, España</div>
        **[npadilla@ual.es](mailto:npadilla@ual.es)**

        **Dra. Rosa María Ayala**
        <div>Grupo de Informática Aplicada, Universidad de Almería, España</div>
        **[rmayala@ual.es](mailto:rmayala@ual.es)**
        
        etc.... este es un ejemplo de como se puede escribir diversos miembros
    </TabItem>
  </Tabs>
 </div>
 <div className={styles.sidebar}>
    <div className={styles.sidebarCard}>
      esta parte la desarrollo en la siguiente sección
  </div>
</div>

Sobre las distintas tablas (Tabs) del proyecto que se usan comunmente en la mayoria de los proyectos, se puede ver que se compone de tres partes:

  • Inicio: explicación del proyecto.
  • Publicaciones: sección de publicaciones del proyecto.
  • Equipo: sección de los miembros del proyecto. Para añadir más tablas, se puede copiar un TabItem y cambiar el value y label. Sobre las tablas, un TabItem siempre tiene que estar rodeado de un Tabs y un TabItem, además de tener un value y un label. El value es el identificador de la tabla y el label es el nombre que se mostrará en la pestaña de la tabla.

Sección de inicio​

La sección de inicio es la parte principal del proyecto, donde se puede poner texto en Markdown o HTML. Un ejemplo de como se puede estructurar la sección de inicio es el siguiente:

<TabItem value="inicio" label="Inicio" default>
      Texto en Markdown o HTML que se desee para el proyecto
      ## Un ejemplo
      De texto formateado en Markdown `de diferentes maneras` y **estilos**.
</TabItem>

Seccion de inicio

Un ejemplo real de proyecto más detallado sería el siguiente:

<TabItem value="inicio" label="Inicio" default>
    ## Desarrollo de un agente Web inteligente de información medioambiental

    ### Áreas del proyecto
    - Agentes inteligentes
    - Componentes de widgets
    - Groupware
    - Desarrollo basado en modelos
    - Interfaces de usuario web mashup

    ### Resumen del proyecto
    En el proyecto se desarrollará un agente de información ambiental, que se ejecuta sobre paradigmas web inteligentes, con interfaces de usuario para WIS como WIMP(Windows, Icons, Menus and Pointers) basado en la composición bottom-up en tiempo real sobre componentes de interfaz COTS como widgets y servicios de meditación (traders). Como resultado del proyecto, se pretende lanzar un prototipo de agente web inteligente de usos del suelo para la empresa EGMASA de la Consejería de Medio Ambiente de la Junta de Andalucía.
</TabItem>

Para conocer más sobre como se puede formatear el texto en Markdown, se puede consultar la documentación de Markdown.

Sección de publicaciones​

La sección de publicaciones es la parte donde se mostrarán las publicaciones del proyecto. Para mostrar las publicaciones, se usa un componente personalizado llamado PublicacionesReFeatures, que esta directamente vinculado a publicaciones.json. Un ejemplo de como se puede estructurar la sección de publicaciones es el siguiente:

<TabItem value="publicaciones" label="Publicaciones">
    ## Publicaciones
    <PublicacionesReFeatures proyectoId="ejemplo"/>
</TabItem>

Seccion de publicaciones

Como el proyecto "ejemplo" no existe en ninguno de los arrays de proyectos de publicaciones.json, se mostrará que no tiene contenido para ese proyecto, pero si se pone un proyecto que exista en publicaciones.json, se mostrarán las publicaciones de ese proyecto, por ejemplo, hermes o enia.

Sección de equipo​

La sección de equipo es la parte donde se mostrarán los miembros del proyecto. Un ejemplo de como se puede estructurar la sección de equipo es el siguiente:

<TabItem value="equipo" label="Equipo">
    ## Equipo

    **Dr. Luis Iribarne** - _(Investigador principal)_
    <div>Grupo de Informática Aplicada, Universidad de Almería, España</div>
    **[luis.iribarne@ual.es](mailto:luis.iribarne@ual.es)**

    **Dr. Nicolás Padilla**
    <div>Grupo de Informática Aplicada, Universidad de Almería, España</div>
    **[npadilla@ual.es](mailto:npadilla@ual.es)**

    **Dra. Rosa María Ayala**
    <div>Grupo de Informática Aplicada, Universidad de Almería, España</div>
    **[rmayala@ual.es](mailto:rmayala@ual.es)**
    
    etc.... este es un ejemplo de como se puede escribir diversos miembros
</TabItem>

image

La barra lateral o sidebar​

El sidebar, como hemos comentado anteriormente, forma parte del cuerpo principal. El sidebar es la parte que contendrá información adicional del proyecto y donde se puede poner texto en Markdown o HTML. El sidebar estará envuelto en un div con la clase sidebar y dentro de este habrá un div con la clase sidebarCard. Dentro de este div, se pondrá el contenido del sidebar. Un ejemplo de como se puede estructurar el sidebar del proyecto es el siguiente:

<div className={styles.contentContainer}>
 <div className={styles.mainContent}>
    desarrollo en la sección anterior
 </div>
 <div className={styles.sidebar}>
    <div className={styles.sidebarCard}>
      <div style={{ display: 'flex' }}>
        <img style={{ width: '100%', height: 'auto' }} src={require(`@site/static/img/proyectos/logoJA.jpg`).default}/>
      </div>
      <p className={styles.imgFoot}>
        ex4mP1e
      </p>
      <h1 className={styles.sideH1}>Ejemplo de sección</h1>
      <div className={styles.sideElement}>
        <div className={styles.elementHeader}>
          <div className={styles.sideH2}>Ejemplo de titulo de elemento</div>
          <div className={styles.date}>9 de mayo del 2018 (o algo que no sea una fecha)</div>
        </div>
        <div>
          Aquí iría un texto de ejemplo para mostrar como se puede hacer una sección de noticias o algo similar.
        </div>
        <a className={styles.botonVerMas} href="https://www.example.com/"><strong>Ver más</strong></a>
      </div>
      <h1 className={styles.sideH1}>Otra sección</h1>
      <div className={styles.sideElement}>
        <div className={styles.elementHeader}>
          <div className={styles.sideH2}>Titulo de elemento</div>
          <div className={styles.date}>9 de mayo del 2018</div>
        </div>
        <div>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec nunc ultricies tincidunt. Nullam nec purus nec nunc ultricies tincidunt.
        </div>
        <a className={styles.botonVerMas} href="https://www.example.com/"><strong>Ver más</strong></a>
      </div>
    </div>
    <h1 className={styles.sideH1}>Otra sección pero de enlaces</h1>
      <div className={styles.links}>
        - [Enlace 1](https://acg.ual.es/projects/enia/ui/webservices/)
        - [Enlace 2](http://jade.tilab.com/)
        - [Enlace 3](http://www.ual.es/acg/soleres/)
      </div>
  </div>
</div>

El sidebar se compone de dos partes:

  • Logo o menciones del proyecto.
  • Diferentes secciones de noticias o elementos.

Cualquiera de estas secciones se pueden añadir o quitar según se desee, pero toda tiene que estar contenida bajo el estilo sidebarCard.

Logo o menciones del proyecto​

La parte del logo o menciones del proyecto es la parte donde se mostrará el logo del proyecto y las menciones del proyecto. Un ejemplo de como se puede estructurar la parte del logo o menciones del proyecto es el siguiente:

<div style={{ display: 'flex' }}>
    <img style={{ width: '100%', height: 'auto' }} src={require(`@site/static/img/proyectos/logoJA.jpg`).default}/>
</div>
<p className={styles.imgFoot}>
    ex4mP1e
</p>

Aquí se muestra una mención del proyecto. Seccion de logo

Para un proyecto que necesita un doble logo/mención, se puede hacer lo siguiente (ejemplo de hermes):

<div style={{ display: 'flex', gap: '20px' }}>
    <img style={{ width: '60%', height: 'auto' }} src={require(`@site/static/img/proyectos/hermes-logo.png`).default}/>
    <img style={{ width: '40%', height: 'auto' }} src={require(`@site/static/img/proyectos/acg.png`).default}/>
</div>
<p className={styles.imgFoot} style={{lineHeight: "1.3"}}>
    Ayuda PID2021-124124OB-I00 financiado por el MCIN/AEI/10.13039/501100011033 y la UE "ERDF A way of making Europe”.
</p>

Sección de noticias o elementos​

Para la sección de noticias o elementos, se puede poner un título y debajo poner los elementos que se deseen. Es importante mantener la estructura de los elementos y sobretodo los estilos. Un ejemplo de como se puede estructurar la sección de noticias o elementos es el siguiente:

<h1 className={styles.sideH1}>Ejemplo de sección</h1>
<div className={styles.sideElement}>
    <div className={styles.elementHeader}>
        <div className={styles.sideH2}>Ejemplo de titulo de elemento</div>
        <div className={styles.date}>9 de mayo del 2018 (o algo que no sea una fecha)</div>
    </div>
    <div>
        Aquí iría un texto de ejemplo para mostrar como se puede hacer una sección de noticias o algo similar.
    </div>
    <a className={styles.botonVerMas} href="https://www.example.com/"><strong>Ver más</strong></a>
</div>
  • Ejemplo de sección: es el título de la sección, que como vemos se le aplica el estilo sideH1. Los siguiente elementos iran dentro de un div con la clase sideElement para todos y cada uno de los elementos tendrán aplicado individualmente el estilo elementHeader para el encabezado del elemento, sideH2 para el título del elemento y date para la fecha del elemento.
  • Ejemplo de titulo de elemento: es el título del elemento, que como vemos se le aplica el estilo sideH2.
  • 9 de mayo del 2018 (o subtitulo con este estilo): es la fecha del elemento o un subtitulo, que como vemos se le aplica el estilo date.
  • Aquí iría un texto de ejemplo para mostrar como se puede hacer una sección de noticias o algo similar: es el texto del elemento, que no tiene aplicado ningún estilo, pero tiene que estar dentro de un div.
  • Ver más: es un enlace para ver más información del elemento, que como vemos se le aplica el estilo botonVerMas.

Seccion noticias

Crear una subpágina de proyecto​

Para conseguir una subpágina de proyecto, es decir, que la ruta de la web sea, por ejemplo, https://acg.ual.es/projects/cosmart/compsac2020/ (que es una publicación dentro del proyecto CoSmart), se necesita un archivo Markdown (.md) con el nombre que queramos (recordemos que esto determinará el nombre de la URL) situado en la ruta src/pages/projects/ejemplo, es decir, tenemos que crear una carpeta con el nombre que le pusimos al archivo base del proyecto. Un ejemplo real sería el caso de SOLERES, que tiene una subpágina llamada jucs.md que se encuentra en la ruta src/pages/projects/soleres/jucs.md, es decir, hemos tenido que crear una carpeta llamada soleres, y la URL que nos da como resultado es https://acg.ual.es/projects/soleres/jucs.

Si queremos una URL con un conjunto de subpáginas, podemos crear una carpeta dentro de la carpeta del proyecto con el nombre que queramos y ahí meter los archivos Markdown. Usando un ejemplo real, SOLERES y sus eventos, que tiene una carpeta llamada eventos, situada dentro de la carpeta soleres que contiene los archivos Markdown de los eventos, como jstis2011.md, y la URL que nos da como resultado es https://acg.ual.es/projects/soleres/eventos/jstis2011.

Para la construcción de una subpágina de proyecto, se puede seguir la misma estructura que la de un proyecto base, pero añadiendo un banner que haga referencia al proyecto principal, es decir, que el link apunte a /projects/ejemplo/, por ejemplo, /projects/soleres.