Haciendo mi sitio con TowerBuilder

TowerBuilder es un sistema que no requiere programación para generar sitios web con visualizaciones de datos de contrataciones y beneficiarios reales. Está pensado para seguir el dinero en grandes procesos de compra, se ha usado en grandes obras públicas (TorreDeControl.org) y en la compra de medicamentos (VivirConVIH.org).

¿Qué necesito para armar mi sitio con TowerBuilder?

• Conseguir un listado de contrataciones en formato OCDS.
• Armar una planilla de cálculo con los dueños de las empresas contratistas.
• Redactar y editar textos en formato MarkDown.
• Una cuenta de GitHub.com.

¿Qué ventajas tiene usar TowerBuilder para armar mi sitio?

• El diseño predeterminado no requiere ningún esfuerzo de programación ni alojamiento del sitio, se hace todo desde GitHub.com.
• Tendrás una visualización de datos impactante y un útil sistema de búsqueda de contratos.
• Si tienes acceso a los datos, podrás armar tu sitio en minutos.
• Podrás personalizar el diseño y los textos todo lo que gustes, de acuerdo a tus conocimientos y el tiempo disponible.
• Podrás utilizar los datos abiertos del gobierno de tu país y demostrar la utilidad del estándar de contrataciones abiertas (OCDS) para el periodismo.

Si algo te resulta muy difícil, puedes volver a intentar en 15 minutos, revisar nuestra sección de Errores y correcciones o pedir ayuda.

Proyectos lanzados

• Living with HIV - http://livingwithhiv.org/

Contáctanos para añadir tu proyecto creado con TowerBuilder a través de la siguiente dirección de e-mail: info@quienesquien.wiki.

Demos

Puedes ver una página de ejemplo en:

Español: http://es.towerbuilder.projectpoder.org/

Inglés: https://towerbuilder.projectpoder.org/

Documentación

En español: https://towerbuilder.readthedocs.io/es/latest/index.html

En inglés: https://towerbuilder.readthedocs.io/en/latest/index.html

Haciendo mi sitio con TowerBuilder

TowerBuilder es un sistema que no requiere programación para generar sitios web con visualizaciones de datos de contrataciones y beneficiarios reales. Está pensado para seguir el dinero en grandes procesos de compra, se ha usado en grandes obras públicas (TorreDeControl.org) y en la compra de medicamentos (VivirConVIH.org).

¿Qué necesito para armar mi sitio con TowerBuilder?

• Conseguir un listado de contrataciones en formato OCDS.
• Armar una planilla de cálculo con los dueños de las empresas contratistas.
• Redactar y editar textos en formato MarkDown.
• Una cuenta de GitHub.com.

¿Qué ventajas tiene usar TowerBuilder para armar mi sitio?

• El diseño predeterminado no requiere ningún esfuerzo de programación ni alojamiento del sitio, se hace todo desde GitHub.com
• Tendrás una visualización de datos impactante y un útil sistema de búsqueda de contratos.
• Si tienes acceso a los datos, podrás armar tu sitio en minutos.
• Podrás personalizar el diseño y los textos todo lo que gustes, de acuerdo a tus conocimientos y el tiempo disponible.
• Podrás utilizar los datos abiertos del gobierno de tu país y demostrar la utilidad del estándar de contrataciones abiertas (OCDS) para el periodismo.

Si algo te resulta muy difícil, puedes volver a intentar en 15 minutos, revisar nuestra sección de Errores y correcciones o pedir ayuda.

Proyectos lanzados

• Living with HIV - http://livingwithhiv.org/

Contáctanos para añadir tu proyecto creado con TowerBuilder a través de la siguiente dirección de e-mail: info@quienesquien.wiki.

Demos

Puedes ver una página de ejemplo en:

Español: http://es.towerbuilder.projectpoder.org/

Inglés: https://towerbuilder.projectpoder.org/

Documentación

En español: https://towerbuilder.readthedocs.io/es/latest/index.html

En inglés: https://towerbuilder.readthedocs.io/en/latest/index.html

Bifurcar el repositorio

Para poder empezar con tu sitio, primero debes crear tu propio repositorio. El repositorio es el espacio en el que estarán los archivos de tu sitio, y bifurcar significa que harás una copia del repositorio original de Tower Builder para tomarlo como base.

1. Es necesario estar registrado en GitHub.com, si no tienes una cuenta puedes crear una aquí.

   Excención de responsabilidades: GitHub.com es una subsidiaria de Microsoft Inc. que provee servicios de alojamiento de repositorios git y de alojamiento web de forma sencilla y gratuita, por lo que fue elegida para este proyecto y para publicar el código de nuestra organización.

2. GitHub te pedirá que verifiques tu dirección de correo, para más información puedes revisar la documentación oficial.

3. Para bifurcar el repositorio debes navegar al inicio de este repositorio y hacer click en el botón «fork» en el extremo superior derecho de la página. Esto creará una nueva página dentro de tu usuario, es decir http://github.com/tu_usuario/TowerBuilder y a partir de ahora trabajarás allí, ya que allí tendrás permiso de modificar los archivos y publicar sitios. Si tienes más dudas revisa la documentación de github sobre cómo bifurcar un repositorio. También puedes leer sobre bifurcaciones (forks) en general.

4. Para habilitar a otros colaboradores para que puedan editar los datos y textos, debes configurar tu repositorio de acuerdo a la documentación de github.

Editar la configuración

Ahora comenzarás a darle forma a tu sitio, tendrás que definir un nombre para tu proyecto y otros atributos de configuración. Para esto deberás:

1. Navegar hasta el archivo de configuración, para eso debes entrar a tu repositorio y buscar el archivo «_config.yml».

2. Da click en el nombre del archivo para abrirlo.

3. Da click en el botón «edit» en la parte superior derecha.

4. Comienza a cambiar valores. Este archivo está en un formato llamado YAML, esto significa que está compuesto por una serie de pares de variables con sus valores, cada línea comienza con un nombre de variable, un signo de dos puntos (:) y luego el valor.

   variable: valor
   

   No debes cambiar nunca los nombres de las variables, sólo cambiarás lo que viene después de los dos puntos.

   • Lo primero que vas a cambiar es la variable title, esta define el nombre que tendrá tu sitio en diferentes lugares tales como la solapa del navegador, los resultados de búsqueda y en el encabezado del sitio. Para esto busca donde dice:

   title: "Tower Builder"
   

   y cambia el valor entre comillas por el título de tu sitio, por ejemplo

   title: "Análisis de contrataciones de la carretera sur".
   

   • Otros valores importantes a cambiar son:

   image: tb-logo.png -> # cambiarlo por el logo de tu proyecto o dejarlo vacío, es opcional
   description: >-
   # Modifica el texto existente y pon la descripción de tu proyecto aquí.
   

   • Para habilitar o deshabilitar el menú superior, cambiar entre true o false la siguiente variable:

   top_menu: true
   

   • Para cambiar el título del item del menú superior (aparece cuando hay varios items en el menú o cuando se ajusta la vnta a pantallas más pequeñas):

   menu_button_title: More information
   

   Para cambiar el logo, sigue estas instrucciones.

   • El Grafico se puede configurar a traves de varias variables contenidas en _config.yml

   graph:
       # el nombre del grafico
       title: "Nombre del gráfico"
       # los tamaños minimos y maximos de los nodos (en pixeles, aproximativo)
       sizes:
           - min: 5
           - max: 500
       # colores de nodos y connectores
       colours:
            - nodes:
                - default: '#1ee6d3'
                - contract: '#1ee6d3'
                - contractTypes: '#3abdc3'
                - contractByType: '#438a9c'
                - organization: '#3c5a6f'
                - shareholderPerson: '#EB639A'
                - shareholderCorp: '#363E4E'
            - links:
                - default: '#706F74'
                - contractsTypes: '#706F74'
                - toCenter: '#706F74'
                - toContractType: '#706F74'
                - toOrganization: '#706F74'
   

   • Jekyll tiene un sistema de Plugins que permiten ejecutar código personalizado sin necesidad de modificar la fuente de Jekyll. En la página de configuración de Tower Builder, se representa de esta manera:

   plugins:
     - jekyll-feed
     - jekyll-sitemap
   

   En este link, encontrarás información más avanzada sobre los plugins.

   • Para incluir algún archivo que no quiera ser procesado, deberá estar definido en la sección exclude

   exclude:
     - Gemfile
     - Gemfile.lock
     - node_modules
     - vendor/
     - docs/
   

   • Las colecciones son una excelente manera de agrupar contenido relacionado. Nuestro archivo de configuración muestra las colecciones con las que cuenta Tower Builder así:

   collections_dir: collections
   collections:
     first-slider:
       output: true
     visualization-slider:
       output: true
   

   Importante: Esta lista de colecciones no debe ser editada, puedes añadir colecciones, pero no borrar las que ya están de manera predeterminada.

   Para más información sobre las colecciones, visita esta página.

   • Las últimas variables que se muestran dentro del archivo «_config.yml», están relacionadas con las opciones con las que cuenta Tower Builder para mostrar los artículos:

   show_excerpts: true
   future: true
   

   Para conocer más sobre estas opciones visita este link.

Si quieres conocer opciones más avanzadas sobre este archivo de configuración, visita la documentación oficial de Jekyll.

Para agregar analytics al sitio, puedes agregar alguna de estas opciones:

# Analytics Configuration
jekyll_analytics:
  GoogleAnalytics:          # Add, if you want to track with Google Analytics
    id: UA-123-456          # Required - replace with your tracking id
    anonymizeIp: false      # Optional - Default: false - set to true for anonymized tracking

  Matomo:                   # Add, if you want to track with Matomo (former Piwik Analytics)
    url: matomo.example.com # Required - url to Matomo installation without trailing /
    siteId: "1234"          # Required - replace with your Matomo site id (Write id as string)

  Piwik:                    # Add, if you want to track with Piwik
    url: piwik.example.com  # Required - url to Piwik installation without trailing /
    siteId: "1234"          # Required - replace with your Piwik site id (Write id as string)

  MPulse:                   # Add if you want to track performance with mPulse
    apikey: XXXXX-YYYYY-ZZZZZ-AAAAA-23456   # Required - replace with your mPulse API key

  Plausible:
    domain: 'example.com'   # The domain configured in plausible
    source: 'https://plausible.example.com/js/plausible.js' # The source of the javascript

Agregar los datos

Datos de contratos

Para esta parte, deberás tener el listado de contratos que quieres visualizar en el formato del estándar de contrataciones abiertas OCDS. Puedes obtener el listado de alguna API, como la API de QuienEsQuien.wiki o de las fuentes OCDS utilizando la herramienta Kingfisher para guardarlo en disco. Para más información puedes revisar la documentación completa de Kingfisher. También puedes ver el listado completo de los Publicadores de OCDS que se actualiza trimestralmente.

Formatos de orígen

El estándar OCDS es un modelo para la publicación y análisis de datos de procesos de contratación. Los datos publicados bajo el estándar se encuentran en el formato JSON y pueden presentarse de dos formas: release y record. Generalmente, los datos OCDS se publican en listados de procesos de contratación conocidos como packages. Es posible encontrar paquetes de releases (Release Packages) y paquetes de records (Record Packages) publicados por los gobiernos de ciertos países.

Dependiendo del oríen de los datos, deberás modificar el archivo _config.yml para especificar el formato. Esto se hace en la opción contracts_format dentro de graph. Las diferentes opciones son:

• releases_json, este tiene la estructura {releases: [] }. Sirve para cuando tienes los contratos en un archivo.
• records_json_api, este tiene la estructura: {data: { records: [ {compiledRelease: {} }] } } y sirve cuando lso datos vienen de la API de QuienEsQuien.wiki.
• csv esta opción aún no está implementada, pero sirve para cuando tienes los contratos en una planilla de cálculo y los exportas a una archivo CSV.

Datos en archivo json

Los datos deberán ser colocados en un archivo con el nombre contracts.json y el archivo ubicado en la ruta assets/data/. Para subir el archivo al repositorio de Github, debes ubicarte en la página principal del repositorio en tu navegador. En el listado de archivos, primero haz click en la carpeta assets y en la pantalla siguiente haz click en la carpeta data. Una vez estés adentro de la carpeta data debes hacer click en el botón «Upload files», ubicado sobre la tabla del listado de archivos al lado derecho de la pantalla. Esto te llevará a una pantalla desde la cual puedes elegir el archivo desde tu computadora o arrastrarlo hacia la ventana del navegador. Si no ves el botón para subir archivos debes iniciar sesión en Github con tu usuario y contraseña.

El archivo de datos deberá contener un listado de records o releases de los procesos de contratación. Para lograr que el archivo sea sólo el listado de records o releases dentro de un array, puede ser necesario manipular el contenido del archivo. Para esto recomendamos la herramienta ocdskit y en particular jq.

Estructura del archivo contracts.json

El archivo contracts.json debe cumplir con la estructura de uno de los siguientes tipos de datos: Release Package o Record Package.

Un Release Package es un objeto JSON con una propiedad llamada «releases», la cual contiene un listado en forma de array, es decir, entre corchetes [], cuyos elementos son objetos individuales de tipo release separados por comas (,). Cada objeto de tipo release corresponde a un proceso individual de contratación.

{
	"releases": [
        { (release 1) },
        { (release 2) },
        ...
        { (release n) }
    ]
}

Un Record Package es un objeto JSON con una propiedad llamada «records», la cual contiene un listado en forma de array, es decir, entre corchetes [], cuyos elementos son objetos individuales de tipo record separados por comas (,). Cada objeto de tipo record se compone a su vez de dos propiedades: una propiedad llamada «releases», la cual debe cumplir con el mismo formato que los Release Packages descritos anteriormente, y otra propiedad llamada «compiledRelease», la cual contiene un objeto individual de tipo release. Cada objeto de tipo record corresponde a un proceso individual de contratación. El listado de releases dentro del objeto de tipo record contiene el historial de versiones publicadas para un proceso de contratación, y el objeto compiledRelease contiene la última versión de cada dato individual del mismo proceso de contratación.

{
	"records": [
        {
            "releases": [
                { (release 1) },
                { (release 2) },
                ...
                { (release n) }
            ],
            "compiledRelease": { (última versión del release) }
        },
        { (record 2) },
        ...
        { (record n) }
    ]
}

Nota: dentro de cada release, es necesario que ciertos campos contengan algún valor para que los gráficos se desplieguen de manera correcta. Los campos obligatorios son:

• ocid
• tender.title
• tender.mainProcurementCategory
• tender.procurementMethodDetails
• contracts.value.amount
• contracts.value.currency
• Dentro del campo parties, al menos uno con role: [»supplier»] y con valores para los campos de id y name

Guía: armar un listado de contratos manualmente

1. Navega hacia un repositorio o API de datos abiertos que ofrezca descargas de contratos en el formato OCDS. Para esta guía utilizaremos los datos encontrados en la API de https://api.datos.gob.mx/.

2. Para este ejemplo utilizaremos esta consulta para obtener un listado de contratos en formato JSON: https://api.datos.gob.mx/v2/Releases_SFP. Realiza la consulta ingresando el URL anterior en tu navegador.

3. Guarda el resultado desde el navegador en tu disco duro, verificando que su extensión sea .json.

   • Firefox: desde el menú principal (puedes hacerlo visible en Firefox presionando la tecla Alt) selecciona: Archivo > Guardar como (File > Save as, en inglés) o presiona Ctrl + S.
   • Chrome: utiliza el botón de la esquina superior derecha para mostrar el menú principal, luego selecciona: Más herramientas > Guardar página como (More tools > Save page as, en inglés) o presiona Ctrl + S.

4. Abre una terminal de línea de comando y navega hasta la ubicación del archivo que has descargado. Si nunca has usado la línea de comando, puedes leer los siguientes tutoriales para aprender: Linux / Windows / Mac.

5. Utiliza jq para trabajar con los datos JSON y darles la forma necesaria. Encontrarás instrucciones de descarga e instalación para tu sistema operativo aquí. Puedes aprender a utilizar jq leyendo el manual oficial.

6. La respuesta de la API consiste de un objeto raíz que contiene, entre otras, la propiedad «results». El valor de «results» es el listado de contratos en OCDS que necesitas para TowerBuilder. Con el siguiente comando (en Linux) puedes extraer el listado, colocarlo dentro de un objeto llamado «releases», y guardarlo en un archivo llamado contracts.json:

   cat Releases_SFP.json | jq '{releases: .results}' > contracts.json
   

   • cat Releases_SFP.json: leer el contenido del archivo Releases_SFP.json y mostrarlo en pantalla.
   • | jq: tomar el resultado del comando anterior y enviarlo al comando jq como input.
   • {releases: .results}: filtrar el JSON recibido como input, tomando el valor de la propiedad «results» y guardándolo en una nueva propiedad llamada «releases».
   • > contracts.json: tomar el resultado del filtro anterior, y guardarlo como un archivo llamado «contracts.json» en la carpeta actual.

7. Copia el archivo contracts.json a la carpeta assets/data/ de tu repositorio, como se explica en la sección anterior.

Datos provenientes de API

Primero debes obtener la URL de consulta a la API que devuelva el conjunto de contratos que quieres. Para esto deberás ayudarte de la documentación de la misma. En el caso de la Api de QuienEsQuien.wiki, puedes leer la documentación aquí.

Una vez que tengas la url, debes modificar en _config.yml la opción contracts_url con esta dirección y no te olvides de modificar graph.contract_format con el valor records_json_api como se indica en el apartado «Formatos de orígen».

Datos en archivo csv

Los datos deberán ser colocados en un archivo con el nombre contracts.csv y el archivo ubicado en la ruta assets/data/. Para subir el archivo al repositorio de Github, debes ubicarte en la página principal del repositorio en tu navegador. En el listado de archivos, primero haz click en la carpeta assets y en la pantalla siguiente haz click en la carpeta data. Una vez estés adentro de la carpeta data debes hacer click en el botón «Upload files», ubicado sobre la tabla del listado de archivos al lado derecho de la pantalla. Esto te llevará a una pantalla desde la cual puedes elegir el archivo desde tu computadora o arrastrarlo hacia la ventana del navegador. Si no ves el botón para subir archivos debes iniciar sesión en Github con tu usuario y contraseña.

El archivo de datos deberá contener un listado de contratos, uno por fila. Al momento de exportar el csv, asegúrate de que el separador sea una coma (,) y los datos estén encapsulados con comillas dobles (»»). El archivo debe contener las siguientes columnas, con una primera fila de encabezados que contiene el título de la columna en mayúsculas tal y como aparece en el listado, y los valores para cada columna deberán ser el campo OCDS que aparece entre paréntesis en la descripción:

• OCID: identificador del proceso de contratación (ocid)
• CONTRACT_TITLE: el título del contrato (contracts.title)
• CONTRACT_TYPE: la categoría o tipo del contrato (tender.mainProcurementCategory)
• PROCUREMENT_METHOD: el procedimiento de contratación (tender.procurementMethod)
• BUYER_NAME: nombre de la unidad compradora (buyer.name)
• SUPPLIER_NAMES: nombres de los proveedores, separados por punto y coma (;) (awards.suppliers.name)
• CONTRACT_START_DATE: fecha de inicio del contrato (contracts.period.startDate)
• CONTRACT_END_DATE: fecha de fin del contrato (contracts.period.endDate)
• CONTRACT_AMOUNT: monto del contrato (contracts.value.amount)
• CONTRACT_CURRENCY: moneda del contrato (contracts.value.currency)

Luego de colocar el archivo en la ruta apropiada debes editar el archivo _config.yml de la siguiente manera:

• Buscar la llave contracts_url y colocarle el valor «/assets/data/contracts.csv»
• Buscar la llave contracts_format y colocarle el valor «csv»

Datos en hoja de cálculo en línea

Si deseas utilizar una hoja de cálculo de Google Docs, luego de completar la base de datos como lo describe la sección anterior debes publicar el documento utilizando el menú File > Publish to the web. En el popup seleccionar la hoja en la que están los datos de los contratos, y luego en el siguiente selector debes elegir la opción «Comma-separated values (.csv)». Copia el enlace generado y verifica en tu navegador que se descarguen los datos en el formato CSV. Luego busca el archivo _config.yml y edítalo de la siguiente manera:

• Buscar la llave contracts_url y colocarle el enlace generado al publicar el documento, entre comillas
• Buscar la llave contracts_format y colocarle el valor «csv»

Datos de beneficiarios reales

Para complementar los datos de procesos de contratación es posible indicar la manera como éstos se relacionan con las personas y empresas que se encuentran detrás de las entidades que aparecen en los datos publicados bajo OCDS. Las relaciones se expresan como un árbol de jerarquías, en el cual se establecen relaciones entre empresas (una empresa matriz y sus subsidiarias) o entre empresas y personas (accionistas y miembros de juntas directivas de una empresa). Este árbol de jerarquías permite establecer quiénes son los beneficiarios reales de los procesos de contratación analizados.

Un Beneficiario Real es la persona física o natural quien, directa o indirectamente y en última instancia, posee, influencia, controla y/o se beneficia de al menos el 5% de un activo mediante un vehículo corporativo, sociedad mercantil o fideicomiso. Más información sobre Beneficiarios Reales, aquí.

Para crear el conjunto de datos de beneficiarios reales debes usar la plantilla disponible en assets/data/BO-template.csv, editarla en un software de planilla de cálculo (LibreOffice Calc, MS Excel, Google Spreadsheets u otro) y modificar los valores. El archivo contiene las siguientes columnas:

1. NOMBRE: el nombre de la entidad (persona o empresa) tal y como aparece en los datos OCDS.
2. TIPO_ENTIDAD: las palabras «empresa» o «persona» según la entidad de la primera columna.
3. RELACIONADO_CON: la entidad con la cual se desea establecer la relación.
4. TIPO_RELACION: cómo se relaciona la entidad de la primera columna con la entidad de la tercera columna. Puede contener los siguientes valores:
   • «parent» para establecer que la empresa en la tercera columna es subsidiaria de la empresa en la primera columna.
   • «shareholder» cuando la persona de la primera columna es accionista de la empresa en la tercera columna.
   • «boardmember» si la persona en la primera columna está en la junta directiva de la empresa en la tercera columna.
5. PUESTO: el nombre del puesto que ocupa la persona. Sólo aplica para un TIPO_RELACION con un valor de «boardmember».

Cada fila del archivo representa una rama del árbol de jerarquías, partiendo de una fila raíz que contendrá solamente el nombre de la empresa en la primera columna y la palabra «empresa» en la segunda. Es importante que en cada fila pongas los nombres de las empresas tal cual están en el listado de contratos, para que se pueda vincular la información en el gráfico. Como ejemplo, puedes tomar la siguiente jerarquía:

• Empresa A (1) aparece en un proceso de contratación.
• Empresa B (2) es la empresa matriz de Empresa A.
• Persona C (3) y Persona D (4) son accionistas de Empresa B.
• Persona E (5) y Persona F (6) son el Presidente y el Vicepresidente de la junta directiva de Empresa B.

Deberás llenar el archivo de la siguiente manera, con la información de cada entidad en una fila separada:

Ejemplo CSV

Repite el mismo proceso para cada jerarquía de empresas de la que tengas datos. Una vez tu archivo esté completo, puedes utilizar el mismo procedimiento de la sección anterior para subirlo a la carpeta assets/data/. Para este archivo deberás utilizar el nombre owners.csv.

Editar los textos

Los archivos de texto que se pueden editar, están en formato MarkDown (.md).

Markdown es una sintaxis liviana y fácil de usar para dar estilo a los textos en la web. Tú controlas la visualización del documento; formatear palabras en negrita o cursiva, agregar imágenes y crear listas son solo algunas de las cosas que podemos hacer con Markdown. En general, Markdown es solo texto regular con algunos caracteres no alfabéticos, como # o *.

Te recomendamos la guía de Markdown de Github para aprender más al respecto.

Textos principales

Los textos principales están conformados por las secciones que aparecen en el menú principal.

Para editar los archivos:

1. En el repositorio en Github, dar click en el archivo que se quiere modificar.
2. Dentro del archivo, dar click en el ícono del lápiz (Edit this file).
3. Modificar el archivo en formato markdown.
4. Una vez editado, ir a la parte de abajo de la página en la sección Commit changes, en el primer campo añadir una corta descripción de los cambios que se hicieron, puedes agregar una descripción más extensa en el siguiente campo, de manera opcional.
5. Guardar los cambios dando click en el botón verde Commit changes.

A continuación, mostramos la lista de documentos que se pueden editar:

Página principal

La página principal consta de nueve secciones, cada sección es un archivo editable en markdown y contiene variables con opciones diferentes para configurar la sección, se encuentran en la carpeta collections como se muestra acontinuación:

• collections/_home/1-main.md
• collections/_home/2-intro.md
• collections/_home/3-section.md
• collections/_home/4-section.md
• collections/_home/5-section.md
• collections/_home/6-highlight-section.md
• collections/_home/7-section.md
• collections/_home/8-section.md
• collections/_home/9-contacto.md

A estos archivos se les puede modificar el nombre, pero manteniendo la numeración de acuerdo al orden que quieres seguir en el sitio final.

A continuación te mostramos y explicamos las variables que deberás modificar dentro del archivo de cada sección de acuerdo al contenido que vas a agregar:

Portada, archivo 1-main.md

En esta sección podrás mostrar una imagen de fondo que ocupa toda la pantalla, un título principal o un logo, un texto corto y botones.

Variables:

---
title: Inicio -> # El título de la sección, esto se mostrará en el menú que aparecerá en la parte derecha de la pantalla.
main-section: true -> # Activa los estilos para que se muestre la imagen de fondo principal y los textos destacados.
main-logo: todosloscontratoscr-logo-blanco.png -> # Si quieres mostrar tu logo, añade el nombre del archivo que ya deberá estar en la carpeta **assets/img/**.

# Column options
one-column-section: true -> # Deberá estar activada para mostrar la sección en una sola columna
---

Contenido:

Abajo de la sección de variables, podrás agregar el texto corto y los botones que necesites, en formato markdown. Recomendamos mantener el largo del texto que se encuentra de ejemplo.

Introducción, archivo 2-intro.md

En esta sección podrás agregar un título, texto, subtítulos y añadir una imagen, video o iframe y un botón. También está la opción de activar una sección de notas que aparecerá debajo.

Variables:

---
title: Introducción -> # Título de la sección
cta-button-section: true -> # Activar si quieres mostrar un botón al final de la sección
button:
  link: "https://projectpoder.github.io/tolococr/" -> # Url del botón
  text: "Botón"  -> # Nombre del botón
# Media section
media: true -> # Activar para añadir una imagen, video o iframe, solo puedes elegir una opción
media-type: # Fill only one option
  image: -> # Añadir el nombre del archivo que deberá estar ya en la carpeta assets/img
  iframe: https://link.com -> # Agregar el link del iframe
  video: https://youtube.com -> # Agregar el link al video

# If iframe, set the different iframe size, depending of de size screen
iframe-size: -> # Esta opción funcionará si agregaste un iframe, podrás configurar el alto del iframe dependiendo de el tamaño de la pantalla
  xl-size: "20%" # Extra large screen ≥1280px
  lg-size: "30%" # Large screen ≤1279px
  md-size: "50%" # Medium screen ≤992px
  sm-size: "100%" # Small screen ≤768px
  xs-size: "120%" # Extra screen small <576px

# Column options
one-column-section: true -> # Activar para mostrar el contenido en una sola columna

# Section background and text colors
background-color: "#ffffff" -> # Elige un color de fondo para la sección
text-color: "#333333" -> # ELige el color del texto de la sección

# Article information -> # Con estas variables, activamos el área de notas de esta sección
articles: true -> # Muestra las notas
articles-section:
  background-color: "#EFEFEF" -> # Modifica el color del fondo de toda la sección de notas
# Article 1
article-content: -> # Aquí puedes agregar la información de una nota como se muestra con los textos de ejemplos
  title: Título de la nota
  author: Marisol Carrillo
  organization: PODER
  description: Proin tempus vehicula nibh, et mollis erat consequat sit amet. Aliquam molestie, elit feugiat sagittis luctus, ex lorem ultrices elit, ac molestie orci elit eu nisi. Phasellus accumsan fringilla ligula, id vulputate lorem bibendum in. Fusce congue ullamcorper tempus. In metus velit, finibus et libero nec, tempus aliquam metus.
  image: bg-masthead.jpg
  link: https://github.com/ProjectPODER
# Article 2
article-content2: -> # Información de la segunda nota de la sección
  title: Título de la nota 2
  author: Marisol Carrillo
  organization: PODER
  description: Proin tempus vehicula nibh, et mollis erat consequat sit amet. Aliquam molestie, elit feugiat sagittis luctus, ex lorem ultrices elit, ac molestie orci elit eu nisi. Phasellus accumsan fringilla ligula, id vulputate lorem bibendum in. Fusce congue ullamcorper tempus. In metus velit, finibus et libero nec, tempus aliquam metus.
  image: bg-masthead.jpg
  link: https://github.com/ProjectPODER
---

Contenido:

Después de la sección de variables, podrás añadir textos y subtítulos en formato markdown. Puedes añadir el texto que quieras, aquí no hay límite.

Sección general de una columna, archivo 3-section.md

Esta sección general, contiene un título, texto, la opción de mostrar una imagen, video o iframe, un botón y una sección de notas. Es la misma estructura que la Introducción y se muestra en una sola columna.

Variables:

title: Municipalidad
cta-button-section: true
button:
  link: "https://projectpoder.github.io/tolococr/"
  text: "Botón"
# Media section
media: true
media-type:
  image: graphic-example1.png
  iframe:
  video:
# Column options
one-column-section: true

# Section background and text colors
background-color: "#ffffff"
text-color: "#333333"

# Article information
articles: true
articles-section:
  background-color: "#EFEFEF"
# Article 1
article-content:
  title: Título de la nota
  author: Marisol Carrillo
  organization: PODER
  description: Proin tempus vehicula nibh, et mollis erat consequat sit amet. Aliquam molestie, elit feugiat sagittis luctus, ex lorem ultrices elit, ac molestie orci elit eu nisi. Phasellus accumsan fringilla ligula, id vulputate lorem bibendum in. Fusce congue ullamcorper tempus. In metus velit, finibus et libero nec, tempus aliquam metus.
  image: bg-masthead.jpg
  link: https://github.com/ProjectPODER
# Article 2
article-content2:
  title: Título de la nota 2
  author: Marisol Carrillo
  organization: PODER
  description: Proin tempus vehicula nibh, et mollis erat consequat sit amet. Aliquam molestie, elit feugiat sagittis luctus, ex lorem ultrices elit, ac molestie orci elit eu nisi. Phasellus accumsan fringilla ligula, id vulputate lorem bibendum in. Fusce congue ullamcorper tempus. In metus velit, finibus et libero nec, tempus aliquam metus.
  image: bg-masthead.jpg
  link: https://github.com/ProjectPODER

Contenido:

Después de la sección de variables, podrás añadir textos y subtítulos en formato markdown. Puedes añadir el texto que quieras, tampoco hay límite.

Sección de dos columnas, archivo 4-section.md

En esta sección podrás mostrar un título, un texto y una imagen, video o iframe en dos columnas y con un fondo de color, el color lo toma de la configuración del color primario que tenga el sitio.

Variables:

---
title: Section 4 -> # Título de la sección
# Media section
media: true -> # Activa el mostrar una imagen, video o iframe, solo se puede llenar una opción
media-type:
  image: graphic-example1.png -> # Nombre del archivo que ya deberá estar en la carpeta assets/img
  iframe: -> # Link entre comillas del iframe
  video: -> # Link entre comillas del video
# Column options
one-column-section: false -> # Desactiva la vista de una columna
two-columns-section: true -> # Activa la vista de dos columnas
# If two columns is true
# Media position
media-left: false - > # En estasección mostraremos la imagen, video o iframe en la columna derecha, por eso está desactivada esta opción
# Section background and text colors
background-color: "#ffffff" -> # Selecciona el color de fondo de toda la sección
text-color: "#ffffff" -> # Selecciona el color del texto de toda la sección

---

Contenido:

Aquí podrás agregar el título y el texto en la columna izquierda, recomendamos que no sean textos muy largos, es en formato markdown.

Sección de dos columnas, archivo 5-section.md

Esta sección es la misma que la anterior, pero cambiamos la opción de mostrar la imagen, video o iframe en la columna izquierda y mostramos la sección de notas debajo.

Variables:

---
title: section 5
# Media section
media: true
media-type:
  image:
  iframe:
  video: https://www.youtube.com/embed/TYCBicKyVhs -> # Añadir un video

# Column options
one-column-section: false
two-columns-section: true
# If two columns is true
# Media position
media-left: true -> # Activa la opción de mostrar la imagen, video o iframe en la columna izquierda
# Section background and text colors
background-color: "#ffffff"
text-color: "#ffffff"

# Article information
articles: true -> # Activamos la opción de mostrar notas
articles-section:
  background-color: "#EFEFEF"
# Article 1
article-content:
  title: Título de la nota
  author: Marisol Carrillo
  organization: PODER
  description: Proin tempus vehicula nibh, et mollis erat consequat sit amet. Aliquam molestie, elit feugiat sagittis luctus, ex lorem ultrices elit, ac molestie orci elit eu nisi. Phasellus accumsan fringilla ligula, id vulputate lorem bibendum in. Fusce congue ullamcorper tempus. In metus velit, finibus et libero nec, tempus aliquam metus.
  image: bg-masthead.jpg
  link: https://github.com/ProjectPODER
# Article 2
article-content2:
  title: Título de la nota 2
  author: Marisol Carrillo
  organization: PODER
  description: Proin tempus vehicula nibh, et mollis erat consequat sit amet. Aliquam molestie, elit feugiat sagittis luctus, ex lorem ultrices elit, ac molestie orci elit eu nisi. Phasellus accumsan fringilla ligula, id vulputate lorem bibendum in. Fusce congue ullamcorper tempus. In metus velit, finibus et libero nec, tempus aliquam metus.
  image: bg-masthead.jpg
  link: https://github.com/ProjectPODER
---

Contenido:

Aquí podrás agregar el título y el texto en la columna derecha, recomendamos que no sean textos muy largos, es en formato markdown.

Sección destacada, archivo 6-highlight-section.md

En esta sección podrás destacar contenido, consta de un título, texto y un botón, podrás modificar el color de fondo de la sección y de la caja contenedora del texto.

Variables:

---
title: Highlight
cta-button-section: true
button:
  link: "https://projectpoder.github.io/tolococr/"
  text: "Botón"
# Highlight section options
highlight-section: true -> # Activar para mostrar los estilos de la sección destacada
highlight-section-background: "#006607" -> # Agrega un color de fondo del contenedor del texto
# Column options
one-column-section: true -> # Muestra una sola columna

# Section background and text colors
background-color: "#ffffff"
text-color: "#ffffff"
---

Contenido:

Añade un título o subtítulo y texto que quieras destacar.

Sección general de una columna, archivo 7-section.md y 8-section.md

Esta sección muestra títulos, textos, imagen, video o iframe y un botón, en una columna. La configuración del ejemplo muestra secciones simples de texto.

Variables:

---
title: Sobre el proyecto
cta-button-section: false
button:
  link: "https://projectpoder.github.io/tolococr/"
  text: "Botón"
# Media section
media: false
media-type:
  image:
  iframe:
  video:
# Column options
one-column-section: true

# Section background and text colors
background-color: "#ffffff"
text-color: "#333333"

---

Contenido:

Agrega títulos o subtítulos y párrafos de texto que sean necesarios. Aquí no hay límite de texto.

Sección de contacto, archivo 9-contacto.md

En esta sección se puede añadir el título, un texto y un link que vaya al lugar donde quieras que te contacten.

Variables:

---
title: Contacto
cta-button-section: true
button:
  link: "https://projectpoder.github.io/tolococr/"
  text: "Botón"

# Column options
one-column-section: true

# Section background and text colors
background-color: "#97C461"
text-color: "#333333"

---

Contenido:

Añade un título y texto.

Pie de página

Para editar el pie de página, deberás editar los archivos en la carpeta colletions/_footer. Encontrarás dos archivos llamados column-1.md o column-2.md, cada archivo tiene variables para configurar la sección, donde podrás agregar un título y un logo.

Variables:

---
title: Proyecto de -> # Título de la columna
image-logo: logoPODER_19.png -> # Nombre del archivo que deberá estar en la carpeta assets/img
image-name: Logo de PODER -> # Nombre de la imagen
width-logo: 100px -> # Tamaño de la imagen
# If there are more logos
image-logo2: Innovaap_logo.png -> # Puedes agregar un segundo logo en la misma columna
image-name2: Logo de Innovaap
width-logo2: 170px
---

Embeber iframes de Kibana

A continuación, te explicamos los pasos a seguir para embeber un iframe de Kibana correctamente:

• En Kibana, seleccionar la opción de compartir para embed la visualización (se puede llegar desde la edición del dashboard).
• La visualización debe estar en Simona.
• Copiar la visualización al espacio público desde saved objects, buscando por nombre, elegir «clone to space» y elegir public.
• Ir al espacio público, buscar la visualización, seleccionar share y luego embed.
• La elección de snapshot o saved object depende de si queremos que los numeros se actualicen (saved object) o si queremos que siempre queden así (snapshot).
• De la url copiada, eliminar todo excepto la url que está entre comillas en src.
• Poner esta url en la variable iframe de la sección en la que se quiere agregar.

Por ejemplo:

title: Introducción
cta-button-section: false
button:
  link:
  text:
# Media section
media: true
media-type: # Fill only one option
  image:
  # Agregar el link del iframe
  iframe: "https://publico-simona.quienesquien.wiki/s/publico/app/visualize#/edit/e5b829d0-ca23-11eb-b96d-0715cd05503e?embed=true&_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:'2008',to:'2019'))&_a=(filters:!(),linked:!f,query:(language:kuery,query:''),uiState:(),vis:(aggs:!((enabled:!t,id:'1',params:(customLabel:'Cantidad%20de%20contratos'),schema:metric,type:count),(enabled:!f,id:'2',params:(customLabel:'Suma%20de%20monto',field:monto),schema:metric,type:sum),(enabled:!t,id:'3',params:(customLabel:'Cantidad%20de%20Adjudicatarios',field:adjudicatario.keyword),schema:metric,type:cardinality),(enabled:!t,id:'5',params:(customLabel:'Cantidad%20de%20Instituciones',field:institucion.keyword),schema:metric,type:cardinality),(enabled:!t,id:'6',params:(customLabel:'Cantidad%20de%20municipios',field:municipio.keyword),schema:metric,type:cardinality)),params:(addLegend:!f,addTooltip:!t,metric:(colorSchema:Greens,colorsRange:!((from:0,to:100),(from:100,to:10000),(from:10000,to:30000),(from:30000,to:40000),(from:40000,to:500000)),invertColors:!f,labels:(show:!t),metricColorMode:Background,percentageMode:!f,style:(bgColor:!f,bgFill:%23000,fontSize:60,labelColor:!f,subText:''),useRanges:!f),type:metric),title:SICOP_DASH_numeros,type:metric))"
  video:

# If iframe, set the different iframe size, depending of de size screen
iframe-size: -> # Esta opción funcionará si agregaste un iframe, podrás configurar el alto del iframe dependiendo de el tamaño de la pantalla
  xl-size: "20%" # Extra large screen ≥1280px
  lg-size: "30%" # Large screen ≤1279px
  md-size: "50%" # Medium screen ≤992px
  sm-size: "100%" # Small screen ≤768px
  xs-size: "120%" # Extra screen small <576px

Página Acerca

Para editar los textos de la página Acerca:

• 4-about.md

Sliders

Para editar los textos de cada slide del slider:

• sliders/_first-slider/slide-1.md
• sliders/_first-slider/slide-2.md
• sliders/_first-slider/slide-3.md

Para añadir o quitar un slide, sólo debes añadir o quitar un archivo .md dentro de la carpeta _first-slider.

Para cambiar o añadir una imagen (.jpg, .png o .svg) dentro del slider, debes agregar la imagen dentro de la carpeta assets/img/ y agregar el nombre del archivo dentro del archivo correspondiente al slide en el que aparecerá la imagen.

---
title: First Slide
**image: graphic-example.png** -> # aquí va el nombre del archivo.
---

Para editar los textos del slider con la visualización:

• sliders/_visualization-slider/slide-1.md
• sliders/_visualization-slider/slide-2.md
• sliders/_visualization-slider/slide-3.md

Nombre de páginas y permalinks

Puedes editar el nombre y el permalink que se mostrará en cada sección del menú principal.

Para eso, debes ubicar en cada archivo editable, el área donde se encuentra esta información, por ejemplo:

---
layout: home
title: Home
permalink: /
---

Para cambiar el nombre de la página, edita:

---
title: Nombre de la página
---

Para cambiar el permalink, edita:

---
permalink: /link-de-la-pagina/
---

Cambiar el orden de los elementos del menú principal

Tower Builder añade los elementos del menú principal en orden alfabético, se pueden reordenar cambiando el número que se encuentra en el nombre del archivo, de acuerdo al orden que se desee.

Por default tenemos este orden:

1. Home
2. slider.html
3. visualization-slider.html
4. contracts.html
5. about.md
6. styleguide.md

Estos son los pasos para editar el nombre de un archivo en Github:

1. Da click en el archivo que quieres modificar.
2. Dentro del archivo, dar click en el ícono del lápiz (Edit this file).
3. En la parte superior de la página, encontrarás el campo donde se modifica el nombre del archivo.
4. Modificar el nombre del archivo.
5. Una vez modificado, ir a la parte de abajo de la página en la sección Commit changes, en el primer campo añadir una corta descripción de los cambios que se hicieron, puedes agregar una descripción más extensa en el siguiente campo, de manera opcional.
6. Guardar los cambios dando click en el botón verde Commit changes.

Nota: Para quitar la página Styleguide del menú, debes ir al archivo de configuraciones _config.yml y escribir el nombre completo del archivo en la sección exclude, quedando de esta manera:

exclude:
  - Gemfile
  - Gemfile.lock
  - node_modules
  - update_boostrap.sh
  - vendor/
  - docs/
  - **6-styleguide.md**

Agregar un elemento del menú

Puedes crear un archivo donde podrás añadir texto y aparecerá dentro del menú.

Los pasos para crear un archivo son:

1. En GitHub, navegua a la página principal del repositorio.
2. En el repositorio, busca la carpeta donde deseas crear un archivo.
3. Encima de la lista de archivos, haz clic en Create new file. Crear nuevo documento
4. En el campo de Name your file, escribe el nombre y la extensión del archivo. Para crear subdirectorios, escribe el /separador de directorios. Nombrar un nuevo archivo
5. En la pestaña Edit new file , agrega contenido al archivo.
6. Es importante agregar siempre a los archivos nuevos creados, el siguiente código al incio del archivo:

---
layout: page -> # siempre debe ser **page**
title: Nombre de la página -> # puedes cambiar al título que desees
permalink: /nombre-del-link/ -> # puedes cambiar al nombre del link que desees mostrar
---

1. Para revisar el nuevo contenido, haz clic en Preview. Vista previa
2. Al final de la página, en el primer campo de la sección Commit new file, añadir una corta descripción de los cambios que se hicieron, puedes agregar una descripción más extensa en el siguiente campo, de manera opcional.
3. Guardar los cambios dando click en el botón verde Commit new file.

Para información más detallada de cómo crear un nuevo archivo, visita la documentación oficial de Github.

Eliminar un elemento del menú

Para quitar un elemento del menú, basta con eliminar el archivo.

Para eliminar un archivo en Github:

1. Da click en el archivo que quieres eliminar.
2. En la parte de arriba del documento, da click en el ícono del bote de basura.
3. Al final de la página, en el primer campo de la sección Commit changes, añadir una corta descripción de los cambios que se hicieron, puedes agregar una descripción más extensa en el siguiente campo, de manera opcional.
4. Guardar los cambios dando click en el botón verde Commit changes.

Artículos

Los artículos son notas que analizan contratos, y aparecen vinculados a estos en el gráfico.

Para que se puedan vincular, debes saber el identificador del contrato OCID y agregarlo en el archivo, de la siguiente manera:

person: Juan Carlos Dueño

Publicar el sitio

Importante: Antes de publicar tu sitio, asegúrate de borrar el contenido del archivo CNAME o reemplazar el contenido por la url de tu sitio web.

Una vez que hayas configurado tu sitio, agregado los datos y editado los textos, puedes publicar el sitio para verificar si está todo correcto.

Inicialmente, tu nombre de usuario y el nombre del repositorio se verán reflejados en la dirección URL de tu sitio cuando esté publicado. Este tendrá la forma de tu_usuario.github.io/tu_repositorio

1. Debajo del nombre de tu repositorio, da click en la opción «Settings».

2. Baja hacia la sección Github Pages y selecciona en Source la opción de master branch.

3. La página se recargará, baja nuevamente hacia la sección de Github Pages y podrás ver una leyenda que dirá lo siguiente: Your site is published at your_url.

   Nota: Después de publicar tu sitio por primera vez, podrás personalizar la URL, más información sobre definir la dirección de tu sitio, aquí.

4. Da click en la url y podrás ver tu sitio publicado.

Si requieres más información, puedes consultar la documentación oficial de Github.

Importante: No utilizar la misma URL del repositorio original, porque no se podrá visualizar el sitio.

Versiones para iframe

Tower Builder cuenta con versiones que pueden insertarse mediante un iframe en otros sitios web, después de publicar tu sitio podrás ver esta versión añadiendo el parámetro ?iframe a tu url. Por ejemplo, para ver la versión iframe de nuestra demo, puedes ir a la siguiente dirección:

https://towerbuilder.projectpoder.org/?iframe.

Para insertar un iframe de la visualización o del slider, puedes añadir a tu url /iframe-visualization o /iframe-slider, un ejemplo con nuestra demo la puedes ver en los siguientes links:

https://towerbuilder.projectpoder.org/iframe-visualization/

https://towerbuilder.projectpoder.org/iframe-slider/

Actualizaciones de TowerBuilder

TowerBuilder, la base con la que estás construyendo tu sitio, puede tener actualizaciones eventuales y es importante mantener tu repositorio sincronizado con el original para tener siempre las últimas actualizaciones de seguridad y nuevas funcionalidades. El proceso para sincronizar los repositorios consiste de los siguientes pasos:

1. En tu navegador, abre la página principal de tu repositorio (https://github.com/tu_usuario/TowerBuilder).
2. Arriba del listado de archivos, del lado derecho, ubica el botón «Compare» y dale un click.
3. La pantalla siguiente te muestra los cambios que has realizado en tu versión de TowerBuilder, pero esto no es exactamente lo que queremos ver aquí, sino los cambios hechos en el repositorio original de TowerBuilder. Debajo del título de la página encontrarás varios selectores que te permiten elegir los repositorios a comparar. En el primero de izquierda a derecha, selecciona tu propio repositorio.
4. En la siguiente pantalla, haz click en el link que dice «compare across forks» que se encuentra justo debajo del título de la página, del lado derecho.
5. Verás que se habilitan nuevamente los selectores de la pantalla anterior. Ahora deberás utilizar el tercer selector de izquierda a derecha para escoger el repositorio base de TowerBuilder (ProjectPODER/TowerBuilder). Esto mostrará los cambios realizados en el repositorio maestro, que serán las actualizaciones que debes integrar a tu repositorio. Si no existen actualizaciones, aparecerá un mensaje con el texto «There isn’t anything to compare» y no será necesario continuar con el proceso.
6. Haz click en el botón verde que dice «Create pull request». Aparecerá un editor de texto donde puedes ingresar un mensaje, no es necesario ingresar ningún mensaje, pero es buena práctica ingresar un mensaje que especifique que estás realizando actualizaciones desde el repositorio maestro.
7. Puedes hacer click en el botón verde que dice «Create pull request» nuevamente.
8. La pantalla siguiente te debe indicar que no existen conflictos mediante un ícono verde con un cheque blanco. Si existen conflictos entre los repositorios no aparecerá este ícono, y no será posible realizar las actualizaciones. Justo debajo del ícono aparece un botón verde que dice «Merge pull request», debes hacer click en este botón. El texto del botón cambiará a «Confirm merge», debes hacer click de nuevo para finalizar el proceso de sincronización.

Puedes seguir esta secuencia de pasos cada vez que desees sincronizar tu repositorio con los cambios y mejoras del repositorio maestro.

Definir la dirección de tu sitio

Inicialmente, tu nombre de usuario y el nombre del repositorio se verán reflejados en la dirección URL de tu sitio cuando esté publicado. Este tendrá la forma de tu_usuario.github.io/TowerBuilder

1. Si deseas cambiar la parte de tu_usuario podrás cambiar tu nombre de usuario o crear una cuenta de organización en Github y elegir la organización al momento de bifircuar el repositorio. Si ya has creado el repositorio, puedes moverlo a la organización.
2. Puedes cambiar el nombre de tu repositorio. Si deseas cambiar la parte de TowerBuilder puedes cambiar el nombre del repositorio.
3. GitHub.com ofrece la posibilidad de tener dominios personalizados para tus páginas, puedes revisar la documentación aquí.

Usar un subdominio personalizado

Para usar un subdominio personalizado, es necesario modificar el DNS del dominio, esto se hace en el sitio donde se registró el dominio.

Es necesario agregar un CNAME que apunte a usuario.github.io, para más detalles consultar la documentación oficial de github.

Importante: No utilizar la misma URL del repositorio original, porque no se podrá visualizar el sitio.

Personalizar los estilos del sitio

Puedes modificar algunos estilos de Tower Builder como los colores, la tipografía, la imagen de fondo de la Home y el tamaño del texto.

Para editar los estilos, debes entrar a la carpeta _sass/ y abrir el archivo _variables.scss, dentro del documento, encontrarás algunas variables que podrás modificar.

Este archivo está en un formato llamado .scss, está compuesto por una serie de variables con sus valores, cada línea comienza con un nombre de variable, un signo de dos puntos (:) y luego el valor.

$variable: valor

No debes cambiar nunca los nombres de las variables, sólo cambiarás lo que viene después de los dos puntos.

Cambiar los colores

Estas son las variables que encontrarás de manera determinada para los colores:

$blue:    #007bff !default;
$indigo:  #6610f2 !default;
$purple:  #6f42c1 !default;
$pink:    #e83e8c !default;
$red:     #dc3545 !default;
$orange:  #fd7e14 !default;
$yellow:  #ffc107 !default;
$green:   #28a745 !default;
$teal:    #20c997 !default;
$cyan:    #17a2b8 !default;

Los colores para un sitio web, generalmente se representan mediante el sistema hexadecimal, por ejemplo: #007bff.

Puedes cambiar los tonos de los colores que se encuentran por default cambiando el código hexadecimal o, sólo para la sección de colores, podrás añadir nuevas variables con colores nuevos, por ejemplo:

Para cambiar el tono
$blue:    #007bff !default;

Cambiar por
$blue:    #0056b2 !default;

Para añadir un color
$turquoise: #40e0d0;

El color principal de Tower Builder, está definido en la variable $primary, por default tiene la variable del color azul $blue, para cambiar el color, sólo debes reemplazarla por la variable del color que quieras, por ejemplo:

$primary:       $blue !default;

Cambiar por 
$primary:       $turquoise !default;

O dejar sin editar, si sólo cambiaste el tono del color.

Te recomendamos este sitio(en inglés) o este sitio (en español), para encontrar los códigos hexadecimales de los colores.

Cambiar los colores del preloader

El preloader aparece cuando se está cargando el slider y la visualización, para cambiar los colores sólo deberás colocar el color que desees en las siguientes variables:

$preloader-color1: #1ee6d3;
$preloader-color2: #343a40;
$preloader-color3: $primary;

Cambiar la imagen de fondo de la página principal

La variable para cambiar la imagen del fondo de la página prncipal la encuentras así:

$bgHome : "./img/bg-masthead.jpg";

1. Para cambiarla, necesitas agregar la imagen en la carpeta assets/img/, en formato jpg o png.

2. Después, ir al archivo _variables.scss y reemplazar el nombre de la imagen:

   Default
   $bgHome : "./img/bg-masthead.jpg";
   
   Cambiar por
   $bgHome : "./img/nombre-de-tu-archivo.jpg";
   

Cambiar el logo

1. Agrega el archivo de tu logotipo en la carpeta assets/img/, en formato jpg,png o svg.
2. Ve al archivo de configuración _config.yml y cambia el valor de la variable image por el nombre del archivo de tu logotipo:

image: tb-logo.png

Cambiar favicon

1. Reemplaza el archivo que se encuentra en la raíz del proyecto llamado favicon.png por tu favicon, deberá conservar el mismo nombre y de preferencia, la imagen debe tener como medidas: 32 x 32 pixeles.

Adaptar la visualización para vistas en dispositivos móviles

De manera predeterminada, el archivo 3-visualization-slider.html tiene configurada la opción de «responsive» como «true» para una mejor experiencia en la navegación en dispositivos móviles:

---
layout: default
title: Visualization
permalink: /visualization/
responsive: true
---

Esto quiere decir que la visualización necesitará mostrarse en imágenes para las vistas en móviles, para esto deberás, una vez obtenida tu gráfica, convertir cada forma de tu visualización en imagen (.png o .jpg), debes agregar estas imágenes dentro de la carpeta assets/img/ para poder agregarla posteriormente en el encabezado de cada slide correspondiente. Por ejemplo:

---
title: Slide 1
image: tu-grafica.png -> Aquí va el nombre de tu imagen.
---

También puedes desactivar la opción de «responsive» y evitar colocar la imagen en cada slide, sólo debes borrar la línea que dice responsive: true del encabezado del archivo 3-visualization-slider.html y borrar del encabezado de cada slide toda la línea que comienza con image:.

¿Por qué no se ve el gráfico?

Una de las razones es porque probablemente el archivo contracts.json no tiene el formato correcto. Verifica que el archivo sea correcto checando nuevamente nuestra documentación.

¿Por qué no aparecen mis artículos vinculados con el gráfico?

Revisa que el nombre de cada artículo este en el formato correcto o si está correctamente vinculado, como lo explicamos aquí.

¿Por qué el formato de mi texto o artículo se rompe?

Revisa que el formato del archivo sea .md.

Revisa si los archivos correspondientes, cuentan con el encabezado correcto como lo explicamos aquí.

Checa que estés usando elementos que acepta el formato Markdown, puedes checar la documentación oficial aquí.

Tengo otro problema

Si encuentras algún problema que no se tenga en cuenta en este manual o deseas ayuda para armar tu sitio, puedes ponerte en contacto con PODER a través de la siguiente dirección de e-mail: info@quienesquien.wiki.

Alternativamente puedes reportar una incidencia utilizando GitHub, en la siguiente dirección: https://github.com/ProjectPODER/TowerBuilder/issues.