Google Codelab en 5 minutos
¿Qué es Codelab?
Google Codelab es una herramienta para crear cursos o tutoriales paso a paso.
La herramienta acepta dos formatos de entrada: Google Doc y Markdown. ¿Por qué? Primero usas GDoc para redactar y previsualizar rápidamente, y cuando lo tienes acabado lo conviertes a Markdown o directamente a HTML (al cual le puedes cambiar el CSS para adaptarlo a tu UX) y lo guardas en un repo o donde quieras.
¿Cómo redactar un Codelab?
Utilizando Google Docs:
- Hacemos una copia de la plantilla: https://g.co/codelabs/template
- Instalamos la extensión Preview Codelab para Chrome.
- Editamos nuestra copia del paso 1 y, para previsualizarlo, pulsamos el botón de la extensión en la barra del navegador.
Si nos unimos al grupo codelab-authors podemos acceder a la Formatting Guide que recoge todos los posibles formatos que el parser de Codelab puede procesar.
Utilizando Markdown:
Lo mejor es seguir este genial post en Medium de Mariusz Saramak y el markdown de su ejemplo.
El resultado
Generando el HTML final
Nuestros amigos de Google tienen en su repo de Codelab Tools la herramienta claat, con la que podemos levantar un servidor http local para previsualizar tanto fuentes Markdown como Doc, así como generar el HTML final.
Para instalar claat, nos descargamos la release adecuada para nuestro sistema operativo (en mi caso será claat-linux-amd64). Tenemos la ayuda disponible ejecutando el fichero con el flag --help, pero hay dos comandos principales:
Generar el HTML:
./claat-linux-amd64 export mitutorial.md
Levantar un servido local para ver el resultado:
./claat-linux-amd64 serve
Fuentes y recursos:
- Post de Mariusz Saramak: https://medium.com/@mariopce/tutorial-how-to-make-tutorials-using-google-code-labs-gangdam-style-d62b35476816
- Codelabs tools: https://github.com/googlecodelabs/tools
- Repo Codelabs command line tool (claat): https://github.com/googlecodelabs/tools/tree/master/claat
- Codelab Formatting Guide: https://docs.google.com/document/d/18dnMdUJQaGKY1Tit_-fO1YOpOpAbA4hh0YDXQlCEjvA/edit
