Back to the future
El pasado 11 de abril impartimos en el Colegio de Arquitectos de Jaén el taller titulado “Back to the Future”, sobre autodifusión de la arquitectura a través de herramientas digitales. A continuación incluimos el tutorial paso a paso de uso de la plantilla Jekyllxhibit, que elaboramos para el taller y utilizamos como punto de partida en la creación de páginas de Web.
El taller proponía la elaboración de páginas Web en html estático a través del uso de las siguientes herramientas:
-
Jekyll es un proyecto de código abierto (más de 5 años) y un generador de páginas web en html estático. A menudo se dice que es una herramienta de blogging para hackers pero gracias a Prose.io está al alcance de cualquiera utilizarla.
-
Prose.io es una herramienta especialmente diseñada para editar contenido en jekyll, podemos editar el contenido de nuestra Web de manera sencilla y rápida.
-
GitHub Pages permite alojar de forma gratuita páginas generadas con Jekyll. Cualquier cambio que hagamos a través de Prose.io en el contenido de nuestra Web se publica automáticamente a través de GitHub Pages en nuestra Web.
1. Registro de dominio (opcional)
El primer paso sería registrar un dominio .ES o .COM. En caso de no haber registrado un dominio nuestra página web estará alojada en un subdominio de GitHub
http://NOMBREUSUARIO.github.io
2. Dar de alta en GitHub
Vamos a utilizar las siguientes tres herramientas para crear nuestra página web:
- Jekyll: es un simple generador de páginas web en html estático.
- Prose.io: es un editor de contenidos en formato Jekyll.
- GitHub Pages: aloja gratuitamente páginas generadas con Jekyll.
Nos damos de alta en GitHub.com, ¡es muy fácil y gratis!
3. Copiar plantilla base Jekyllxhibit en nuestro usuario de GitHub
A continuación accedemos con nuestro usuario en GitHub y localizamos nuestra plantilla base Jekyllxhibit en:
Hacemos click en FORK this repo localizado en la parte superior derecha y tendremos en nuestro usuario de GitHub una copia de la plantilla llamada Jekyllxhibit.
4. Renombrar plantilla GitHub
Un paso más antes de comenzar a añadir contenidos. Tenemos que renombrar la actual plantilla teniendo en cuenta que:
- Si es una pagina de perfil y no disponemos de dominio propio o vamos a utilizar un dominio propio la plantilla hay que llamarla siguiendo la nomenclatura:
NOMBREUSUARIO.github.io
- Si es una pagina de proyecto y vamos a utilizar un subdominio dentro de nuestro dominio principal no importa el nombre que elijamos para la plantilla.
De esta manera podremos acceder a nuestra página Web a través de la url:
http://nombreusuario.github.io
Para renombrarla hacemos click en la pestaña Settings del repositorio, introducimos el nuevo nombre y hacemos click en Rename. Llegado este punto hay que asegurarse que la sección GitHub Pages de Settings está activada y puede leerse:
Your site is published at http://www.nombreusuario.github.io
5. Configurar plantilla GitHub
El archivo CNAME forma parte de nuestra plantilla Jekyllxhibit y tiene que ser editado teniendo en cuenta:
- Si vamos a utilizar un dominio propio el archivo
CNAMEdebe contener el nombre de nuestro dominio, por ejemplo:colaborativa.eu. Habrá que esperar unos 10 minutos para ver el dominio actualizado. - Si no disponemos de dominio propio, se accederá a nuestra página a través de
NOMBREUSUARIO.github.io. En este caso el archivoCNAMEdebe contener una línea en blanco.
Para editar el archivo CNAME ir a nuestra plantilla en GitHub, veremos entonces la lista de archivos que la forman. Hacer click sobre el archivo CNAME y aparecerá la siguiente pantalla:
Hacer click en Edit, editarlo y hacer click en Commit Changes situado abajo a la derecha.
En el explorador ir a nombreusuario.github.com y ver la plantilla funcionando. ¡Ya podemos comenzar a añadir contenidos!
6. Descripción estructura plantilla GitHub
Brevemente describimos los archivos que componen la plantilla en GitHub:
- archivo
_config.yml: almacena información de configuración de la plantilla. - directorio
_layouts: plantillas en html que se utilizarán para visualizar los posts, en nuestro caso sólo disponemos de una llamadadefault.html. -
directorio
_posts: el contenido de nuestra página Web se localiza en este directorio, deben nombrarse siguiendo la nomenclatura AÑO-MES-DIA-título.md. El orden en el que aparecen los contenidos viene determinado por esta fecha. Cuenta con dos subdirectorios:-
directorio sections: incluye las secciones que aparecen en la barra de la izquierda. Cada sección tiene asociado un número de exhibits.
-
directorio exhibits: incluye nuestros protectos, artículos, noticias, etc. Cada exhibit está asociado a una sección concreta.
-
- directorio stylesheets: hojas de estilo en formato CSS.
7. Añadir Contenidos con Prose.io
Para comenzar a añadir contenidos iremos a:
y accederemos con nuestras credenciales de GitHub, para ello hacer click en el botón Authorize with GitHub.
Prose.io tendrá acceso a nuestra plantilla alojada en GitHub y nos permitirá añadir contenidos. Prose.io nos mostrará una lista de proyectos alojados en GitHub, hacemos click en la plantilla que deseamos modificar y aparecerá la siguiente pantalla:
Podremos añadir o modificar contenidos en el directorio exhibits, que contiene nuestros proyectos, artículos, noticias, etc., y en el directorio sections, que contiene las secciones en las que se clasifican los exhibits y se muestran en la columna de la izquierda.
7.1 Editar secciones con Prose.io
Para editar una sección existente hacer click en el directorio sections y aparecerá el listado de secciones existentes:
Hacemos click en la que deseamos modificar y aparecerá la siguiente barra de edición:
A continuación vamos a explicar las opciones de la barra de edición:
Formato Markdown
Los contenidos se escriben en formato de texto Markdown. Se trata de un lenguaje de marcado fácil y en el que se pueden insertar bloques de texto HTML. El formato Markdown genera archivos muy limpios y separa estilo de contenido, esto es positivo ya que puedes reutilizar el mismo contenido con distintos formatos.
Os recomendamos utilizar el siguiente editor online de Markdown para poder visualizar y editar al mismo tiempo:
Al hacer click en el botón M de la barra de edición nos aparecerá un pequeño y sencillo tutorial de la sintaxis Markdown:
Cabecera con Metadatos
Todos los archivos contienen una pequeña cabecera con variables de configuración sencillas llamada Metadata y a continuación el contenido propiamente dicho de la sección o exhibit a editar. A través del botón Metadata podemos mostrar o ocultar esta cabecera, lo cual nos permitirá centrarnos en la edición del contenido.
En el caso de las secciones sólo existirá la cabecera de Metadatos, la parte de contenidos estará vacía, y el único dato que tendremos que editar es el que corresponde a la etiqueta title que se refiere al título de la sección que aparecerá en la columna izquierda de la página Web. El resto de etiquetas permanecerán intactas.
Sección publicada
Otra opción de la barra de edición nos permite indicar si la sección se publicará en nuestra Web o no. Está representada por el icono estándard de Herramientas. Esta opción resulta de utilidad cuando estamos creando nuevas secciones que aún no hemos llenado de contenido por lo que nos interesa mantenerlas ocultas.
Vista Preliminar
Al hacer click en el botón Vista prelimitar, representado con un icono de un ojo, veremos como se visualizará nuestra sección o exhibit en la página Web. En el caso de secciones al no existir contenido, sólo existe la cabecera de metadata, la vista preliminar mostrará una pantalla en blanco.
Guardar y salir
Una vez editado el título de la sección debemos guardar los cambios. Para ello hacer click en el botón Save de la barra de edición y aparecerá la siguiente pantalla:
A continuación hacer click en el botón Commit para confirmar los cambios. Cada vez que realizamos una modificación se registrarán junto con un mensaje que podemos personalizar si lo deseamos.
Si en el momento de guardar no estamos satisfechos con los cambios realizados podemos volver a la pantalla de edición haciendo click en el icono de Prohibido, situado junto al botón Commit.
7.2 Añadir fotos con Prose.io y Flickr.com
Para añadir fotos a uno de nuestros artículos situados en el directorio exhibits primero tendremos que seleccionar el archivo a través de Prose.io y entrar en la pantalla de edición.
Una manera fácil de almacenar las imágenes de nuestra página Web es a través del servicio gratuito que ofrece Flickr.com. Para ello tendremos que darnos de alta en Flickr.com y añadir las fotos. Para insertar una foto en uno de nuestros exhibits sólo hay que hacer click en el botón Compartir de Flickr.com, copiar el código html asociado a la imagen y pegarlo en el archivo de nuestro exhibit en Prose.io.
En la siguiente captura de pantalla podemos ver la imagen insertada en nuestro exhibit.
En la siguiente captura de pantalla podemos ver una vista preliminar de como se visualizaría en nuestra Web.
Una vez concluida la edición, hacemos click en botón Save. A continuación hacer click en el botón Commit para confirmar los cambios. Cada vez que realizamos una modificación se registrarán junto con un mensaje que podemos personalizar si lo deseamos.
Si en el momento de guardar no estamos satisfechos con los cambios realizados podemos volver a la pantalla de edición haciendo click en el icono de Prohibido, situado junto al botón Commit.
7.3 Añadir vídeos con Prose.io y vimeo.com
Para añadir fotos a nuestros exhibits hay que seguir un proceso similar, recomendamos utilizar el servicio gratuito vimeo.com. El primer paso sería darse de alta en vimeo.com y subir el vídeo que queremos insertar en nuestra página Web. La siguiente captura muestra el formulario de alta de vimeo.com.
A continuación, accedemos a vimeo.com y añadimos nuestro primer vídeo. Para insertarlo en uno de nuestro exhibits habrá que hacer click en el botón Share situado en la esquina superior derecha del vídeo y copiar el texto situado bajo el título Embed.
En vimeo.com accedemos al exhibit en el que deseamos insertar el vídeo y pegamos el texto de vimeo.com.
En el texto para la inserción del vídeo hay que hacer una comprobación antes de almacenar los cambios del exhibit. Jekyll no entiende correctamente aquellas variables en las que no se especifica ningún valor, esperamos que resuelvan este problema pronto. En el ejemplo de abajo se trataría de las variables: webkitAllowFullScreen, mozallowfullscreen y allowFullScreen
<iframe src="http://player.vimeo.com/video/58116607"
width="500" height="281" frameborder="0"
webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe> <p><a href="http://vimeo.com/58116607">Montaje RepRapPro Huxley en Colaboratorio</a>
from <a href="http://vimeo.com/colaborativa">colaborativa</a> on
<a href="http://vimeo.com">Vimeo</a>.
</p>
Para que el vídeo se inserte correctamente hay que editar el texto y eliminarlas. El texto anterior editado quedaría:
<iframe src="http://player.vimeo.com/video/58116607" width="500" height="281" frameborder="0">
</iframe> <p><a href="http://vimeo.com/58116607">Montaje RepRapPro Huxley en Colaboratorio</a> from
<a href="http://vimeo.com/colaborativa">colaborativa</a> on <a href="http://vimeo.com">Vimeo</a>.
</p>
Haciendo click en el botón de Vista preliminar podemos comprobar que el vídeo se ha insertado correctamente en nuestro exhibit.
Instrucciones para configurar un dominio propio
Podéis encontrar una guía completa elaborada por GitHub en este enlace. Uno de los pasos fundamentales es el siguiente:
- Configurar DNS: al dar de alta tu dominio tendrás que establecer un A record que apunte a la dirección IP de GitHub 204.232.175.78. Dependiendo de donde tengas contratado tu dominio las instrucciones para realizarlo serán ligeramente distintas.
Créditos
La plantilla base Jekyllxhibit es un proyecto de código libre distribuido bajo licencia MIT. Los textos e imágenes bajo una licencia creative commons CC BY 3.0 ES.