gathering a building
1.0.0
Este proyecto se desarrolló bajo una fase previa del Yale Digital Humanities Lab. El laboratorio, que ahora forma parte del departamento de datos y métodos computacionales de la biblioteca de Yale, ya no incluye este proyecto en su alcance de trabajo. Como tal, no recibirá más actualizaciones. Hay un sitio web activo que utiliza este código. Cuando este sitio web falle, será eliminado de la web.
Este repositorio contiene el código fuente de una aplicación web que detalla aspectos de la arquitectura de la Universidad de Yale. La aplicación está construida sobre una interfaz Angular 1 que presenta datos cartográficos de un servidor CartoDB y recursos multimedia desde un backend API de Wordpress.
Los usuarios administradores pueden actualizar los datos que se muestran en el sitio visitando la interfaz de administración del sitio. Después de iniciar sesión, los usuarios pueden establecer los datos que se mostrarán en el sitio creando y editando publicaciones utilizando los siguientes campos de metadatos:
Campo predeterminado
El título de cada publicación está definido por el campo de título de publicación tradicional de Wordpress (campo de título de ejemplo)
Campo predeterminado
El contenido de texto de cada publicación está definido por el campo de contenido de texto tradicional de Wordpress (campo de párrafos de ejemplo).
Campo personalizado
Accepted values:
* home
* historical-geography
* architecture-and-urbanism
* material-journeys
* people-and-places
* about-the-author
* downloads
* links
El campo del controlador dentro de una publicación controla dónde se mostrará esa publicación en la navegación del sitio: es decir, si la publicación aparecerá en www.mydomain.com/routes/historical-geography o www.mydomain.com/routes/people-and-places , o alguna otra ruta en el sitio (ejemplo de campo de controlador).
Campo personalizado
Accepted values:
* An integer value between 0 and the number of posts for the given controller -1
El campo de orden dentro de una publicación controla dónde se presentará la publicación dentro de una ruta, es decir, el orden en que aparecerán las secciones dentro de la columna de texto a medida que el usuario se desplaza por el contenido de una ruta determinada.
Dadas todas las publicaciones que comparten un controlador, se puede establecer el orden en el que aparecerán dándole a la publicación que debería aparecer primero un valor de orden de 0, a la siguiente publicación que debería aparecer un valor de orden de 1, y así sucesivamente. Tenga en cuenta que no se aceptan valores de pedido duplicados (campo de pedido de ejemplo).
Campo personalizado
Accepted values:
* table-of-contents
* text
El campo tipo de sección dentro de una publicación indica si la publicación dada representa la sección de tabla de contenido para un controlador en particular o una sección basada en texto para ese controlador.
table-of-contents
Si el valor de tipo de sección de una publicación se establece en tabla de contenido (ejemplo de campo de tabla de contenido), la columna de texto para esa sección se representará como una serie de enlaces seguidos de una introducción de un solo párrafo a la sección (visualización de ejemplo). . Para crear una tabla de contenido, se deben identificar todas las publicaciones para un controlador determinado, luego crear un párrafo en el cuadro de texto principal de Wordpress para cada sección dentro del controlador que sigue a la tabla de contenido (por ejemplo, contenido de párrafos de tabla de contenido ).
text
Si el valor de tipo de sección de una publicación se establece en texto (campo de texto de ejemplo), la columna de texto de esa sección se representará como una serie de párrafos tradicionales (visualización de ejemplo). Para crear una publicación de texto, uno simplemente debe ingresar párrafos en el campo de texto tradicional de Wordpress (contenido de párrafos de texto de ejemplo).
Campo personalizado
Accepted values:
* one-div-container
* three-div-container
* four-div-container
El campo de plantilla dentro de una publicación indica el tipo de contenido que se mostrará detrás de la columna de texto. Hay tres opciones:
one-div-container
Si el valor de la plantilla de una publicación se establece en un contenedor de un div, su fondo será una imagen de fondo de página completa (visualización de ejemplo). La imagen de fondo está determinada por la imagen destacada de la publicación determinada (por ejemplo, un campo de contenedor de un div).
three-div-container
Si el valor de la plantilla de una publicación se establece en un contenedor de tres div, su fondo constará de tres elementos representados en el lado derecho de la pantalla (visualización de ejemplo). El contenido de estos elementos se establece mediante los siguientes campos personalizados: topImage , bottomImage , topCaption , bottomCaption . Tanto el campo topImage como el bottomImage son rutas completas a archivos de imagen, mientras que los campos topCaption y bottomCaption son campos de título de texto sin formato. (ejemplo de campo contenedor de tres div)
four-div-container
Si el valor de la plantilla de una publicación se establece en un contenedor de cuatro div, su fondo constará de cuatro imágenes de altura completa que se vinculan a secciones dentro del controlador determinado (pantalla de ejemplo). Las imágenes de fondo para esta plantilla de fondo están determinadas por el campo introImage dentro de las publicaciones de este controlador. Por ejemplo, la pantalla de ejemplo vinculada anteriormente en este párrafo muestra una página con cuatro imágenes de fondo: hormigón, piedra, ladrillo y vidrio. La primera de estas imágenes (concreta) se define por el valor introImagen dentro de la publicación que tiene un valor de orden de 1 (ya que esta es la primera publicación que aparece después de la tabla de contenido). Dentro de la publicación con un valor de pedido de 1, la imagen que se representará en el contenedor de cuatro div se especifica en el campo personalizado introImage (ejemplo de campo de contenedor de cuatro div)
Campo personalizado
Accepted values:
* light
* dark
light
Establecer el valor brandIcon en claro hace que el ícono de marca del sitio (por ejemplo, DHLab) aparezca en blanco, lo cual se recomienda para páginas con fondos oscuros (por ejemplo, el campo brandIcon claro).
dark
Establecer el valor brandIcon en oscuro hace que el ícono de marca del sitio (por ejemplo, DHLab) aparezca en gris oscuro, lo cual se recomienda para páginas con fondos claros.
Campo personalizado
Accepted values:
* light
* dark
light
Establecer el valor del botón de navegación en claro hace que el botón del menú de navegación del sitio (es decir, el ícono de "hamburguesa") aparezca en blanco, lo cual se recomienda para páginas con fondos oscuros (por ejemplo, el campo del botón de navegación claro).
dark
Establecer el valor del botón de navegación en oscuro hace que el botón del menú de navegación del sitio (es decir, el icono de "hamburguesa") aparezca en gris oscuro, lo cual se recomienda para páginas con fondos claros.
Campo personalizado
Accepted values:
* A fully-qualified url to an iframe
Las publicaciones con un valor de controlador de material-journeys pueden usar iframes para completar una representación de página completa del dominio iframed detrás de la columna de texto (visualización de ejemplo). Para hacerlo, solo es necesario establecer el valor de iframe en la página que desea mostrar (ejemplo de campo iframe).
La página de inicio del sitio consta de una serie de íconos que se superponen a una imagen central (por ejemplo, ícono de página de inicio). El contenido de estos íconos y la posición de estos íconos están determinados por publicaciones con los siguientes campos de metadatos:
Campo predeterminado
El título de cada ícono en la página de inicio está definido por el campo de título de publicación tradicional de Wordpress (campo de título de ejemplo). Siguiendo el título con » produce una bonita presentación visual.
Campo predeterminado
El contenido de texto del ícono de la página de inicio está definido por el campo de contenido de texto tradicional de Wordpress (campo de texto de ejemplo).
Campo personalizado
Accepted values:
* home
Cada ícono en la página de inicio debe tener su valor de controlador establecido en inicio (ejemplo de campo de controlador).
Campo personalizado
Accepted values:
* historical-geography
* architecture-and-urbanism
* material-journeys
* people-and-places
Cada valor de DestinationController controla la ruta a la que se debe dirigir a los usuarios al hacer clic en el enlace dentro del ícono de inicio dado. Configurar el controlador de destino de un ícono de inicio en viajes de material, por ejemplo, garantizará que los usuarios sean enviados a la ruta de viajes de material después de hacer clic en el enlace del ícono de inicio (ejemplo de campo controlador de destino).
Campo personalizado
Accepted values:
* An value between 0 and the number of posts for the given destinationController -1
El ID de destino indica la publicación dentro del controlador de destino a la que se deben dirigir los usuarios después de hacer clic en el enlace dentro del ícono de inicio dado. Establecer el controlador de destino de un ícono de inicio en viajes-material y el Id. de destino en 3, por ejemplo, garantizará que los usuarios que hacen clic en el enlace del ícono de inicio sean enviados a la publicación a la que se les asigna un valor de controlador de viajes-material y un valor de pedido de 3 (ejemplo de campo Id. De destino). .
Campo personalizado
Accepted values:
* A decimal value between 0 and 1
El valor xOffset de un ícono de inicio indica dónde debe ubicarse el ícono sobre la imagen de inicio en el eje x. Establecer este valor en 0 asegurará que el ícono esté ubicado en el borde más izquierdo de la imagen, establecer el valor en 1 asegurará que el ícono esté ubicado en el borde más derecho de la imagen y establecer el valor en un decimal entre 0 y 1 posicionarán el icono dentro del espectro delimitado por esos dos puntos (ejemplo de campo xOffset).
Campo personalizado
Accepted values:
* A decimal value between 0 and 1
El valor yOffset de un ícono de inicio indica dónde debe ubicarse el ícono sobre la imagen de inicio en el eje y. Establecer este valor en 0 asegurará que el ícono esté ubicado a lo largo del borde superior de la imagen, establecer el valor en 1 asegurará que el ícono esté ubicado a lo largo del borde inferior de la imagen y establecer el valor en un decimal entre 0 y 1 posicionarán el icono dentro del espectro delimitado por esos dos puntos (ejemplo del campo yOffset).
Puede encontrar una instancia de desarrollo de este repositorio aquí.
Esta aplicación está construida en un tiempo de ejecución de Node.js, por lo que es necesario tenerlo instalado para usar este código fuente. Para verificar si tiene Node.js instalado en su máquina, puede ejecutar:
which node
Si recibe una respuesta que indica que node no es un comando reconocido, deberá instalar Node.
Una vez instalado Node, puede clonar el código fuente, instalar dependencias e iniciar un servidor web local con los siguientes comandos:
git clone https://github.com/YaleDHLab/gathering-a-building
cd gathering-a-building
npm install --no-optional
npm start
Si luego abre un navegador y navega hasta localhost:8000, debería ver la aplicación. Puede finalizar este servidor local en cualquier momento presionando CTRL+C en la ventana de terminal en la que se está ejecutando el servidor.
Después de realizar cambios en su base de datos de Wordpress, puede obtener una vista previa de los cambios extrayendo json del servidor de Wordpress a su máquina local con el siguiente comando:
npm run build-content {{username}} {{password}}
Aquí {{username}} y {{password}} se refieren a las cadenas de nombre de usuario y contraseña que ingresaría para acceder a la URL del sitio protegida con contraseña.
Si los campos en la base de datos de Wordpress están configurados de acuerdo con la guía anterior, debería ver mensajes de confirmación de que se escribió el json para cada controlador. Si recibió un mensaje de error de validación, revise los campos de metadatos afectados y ejecute el comando npm run build-content nuevamente.
Después de escribir el nuevo json en su máquina local, puede obtener una vista previa de los cambios actualizando su navegador. Si navega a las rutas/publicaciones que cambió en la base de datos de Wordpress, debería ver los nuevos valores o contenido mostrados.
Si otros miembros del equipo realizaron cambios en el código de la aplicación y los cargaron en GitHub, puede desplegar y fusionar esos cambios con los suyos usando los siguientes comandos.
Primero, puede agregar y confirmar cualquier cambio que haya realizado en su repositorio local con el siguiente comando:
git add .
git commit -m "type a message indicating the changes you made here"
Luego, para desplegar los últimos cambios en la rama master de GitHub, puedes ejecutar:
git pull origin master
Esto abrirá el editor de texto de la línea de comando de vim y le pedirá que escriba un "mensaje de confirmación" en la pantalla. Puede hacerlo presionando i (que mueve el editor de texto vim al modo Insertar), seguido de la flecha hacia abajo (que mueve el cursor hacia abajo una fila en el documento de texto), seguido de un mensaje para los miembros de su equipo (por ejemplo, " fusionando el maestro remoto con el maestro local"), seguido de ESCAPE :wq ENTER .
Para fusionar una rama en GitHub que no se ha fusionado con la rama maestra en Github, puedes ejecutar:
git pull origin {{branch-name}}
Una vez que esté satisfecho con el aspecto del contenido, puede enviar los cambios al servidor implementado ejecutando:
chmod 600 PEM_FILE_NAME.pem
npm run deploy
Esto reemplazará los archivos en el servidor remoto con sus copias locales de esos archivos.
