flowsta/sesiones/2021-11-24.md

Table of Contents

1. Contenidos
   1. Nomenclatura
   2. Pandoc
   3. Plantilla HTML: Bootstrap
      1. Descarga de ejemplos de Bootstrap
      2. Extraer los archivos
   4. Crear el directorio docs
   5. Editar contenido
   6. Crear archivos de contenido
2. Pruebas

Contenidos

Nomenclatura

Prestad atención a los nombres. Esto es importante en este momento porque vais a contar algo que hacéis con los datos pero también cómo lo habéis hecho. Por tanto, contarlo con precisión es fundamental para que se entienda bien y para que se contraste vuestro conocimiento sobre lo que habéis hecho.

Pandoc

El día anterior instalamos pandoc. Ahora tiene que estar como un comando más. Si no fuera así, repasa los apuntes del día anterior.

En la terminal su funcionamiento es muy simple y nos podemos ayudar de la sección de ejemplos o bien del propio manual. Recordad que también suele funcionar el comando man o la opción --help sobre el propio comando.

Si queremos convertir un archivo markdown a html hemos de escribir una sentencia similar a esta:

pandoc ruta/archivo.md -o ruta/archivo.index.html

Ten en cuenta que no nos crea una página (documento) web (html) sino que nos convierte la sintaxis markdown en html.

Plantilla HTML: Bootstrap

Aunque ya se había presentado en clase se hace una demostración de cómo se debe operar con esta plantilla para construir la web del trabajo final.
Según la Wikipedia, Bootstrap es Bootstrap "biblioteca multiplataforma o conjunto de herramientas de código abierto para diseño de sitios y aplicaciones web".
De todos los ejemplos que ofrece Bootstrap, vamos a utilizar Sticky Footer Navbar que es un tema muy sencillo que consiste en una cabecera con un menú, un espacio central donde situar el contenido y un pie donde situar otro contenido.

Descarga de ejemplos de Bootstrap

Para utilizar uno de los ejemplos de Bootstrap descargamos los todos los ejemplos. Si pinchamos con el botón derecho sobre el enlace a "Download examples" tendremos en el portapapeles este enlace:

https://github.com/twbs/bootstrap/releases/download/v5.1.3/bootstrap-5.1.3-examples.zip

Vamos a la terminal a donde queremos descargar este archivo (a través del comando cd) y lo descargamos, en este caso, con curl dado que la dirección de descarga no es la dirección final de los datos sino que hace un redirect.
En curl usaremos dos opciones:

• -o seguido del nombre del archivo que queremos que tenga. Recordad que el nombre del archivo también es el "nombre del recurso en el sistema de ficheros" por lo que aquí podríamos poner otra ruta si no quisiéramos tenerlo en la carpeta donde estamos.

• -L para seguir el redirect.

  curl -o bootstrap.zip -L https://github.com/twbs/bootstrap/releases/download/v5.1.3/bootstrap-5.1.3-examples.zip

Extraer los archivos

Ahora que tenemos el zip descargado podemos explorar sus contenidos con unzip:

unzip -l bootstrap.zip

Si me fijo en las últimas líneas justo son las que nos interesan:

0  2021-10-09 16:44   bootstrap-5.1.3-examples/sticky-footer-navbar/
     3064  2021-10-09 16:44   bootstrap-5.1.3-examples/sticky-footer-navbar/index.html
      177  2021-10-09 16:44   bootstrap-5.1.3-examples/sticky-footer-navbar/sticky-footer-navbar.css

Hay una carpeta del bootstrap que contiene otra con el tema que queremos.

Podemos extraer todos los archivos con unzip y luego copiar los que queremos con cp, tal como hemos visto en clase.

unzip bootstrap.zip
cp bootstrap-5.1.3-examples/sticky-footer-navbar/* uc3m-periodismo-datos/.

También podríamos extraer solo los archivos que queremos utilizando la opción -p que es para enviar la salida a la pipeline. Desde unzip sería así:

unzip -p bootstrap.zip bootstrap-5.1.3-examples/sticky-footer-navbar/index.html > uc3m-periodismo-datos/index.html
  unzip -p bootstrap.zip bootstrap-5.1.3-examples/sticky-footer-navbar/sticky-footer-navbar.css > uc3m-periodismo-datos/sticky-footer-navbar.css

Crear el directorio docs

Ahora que ya tengo la base de lo que va a ser mi web voy a crear dentro del repositorio el directorio docs donde se guarde el contenido web que luego utilizaré para que Github lo sirva como web.

mkdir docs

Ahora muevo allí el html y el css:

mv index.html sticky-footer-header.css docs/.

Editar contenido

Editamos el contenido y comprobamos las rutas.

Con nano, nano index.html y cambiamos, al menos, el contenido que tiene el elemento title.

En el elemento body hay un elemento header que editaremos posteriormente para enlazar los distintos documentos de la web.

Por debajo de cuando termina header hay un comentario de HTML que dice que aquí empieza el contenido:

<!-- Begin page content -->

Ahí es donde pegaremos el contenido del HTML que hemos convertido de Markdown con pandoc.

Podemos guardar y comprobar en el navegador si puedo abrir este documento. Esto lo hago, por ejemplo, con el atajo C o (Control + o).
Probablemente se cargue sin el estilo apropiado porque las rutas a los archivos de estilo no están bien. Podemos comprobarlo con grep:

grep -rn css index.html 
16:<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
36:    <link href="sticky-footer-navbar.css" rel="stylesheet">

Con esta expresión busco css en el archivo index.html y resulta que hay dos líneas, la 16 y 36, que contienen rutas a los archivos CSS. Uno de ellos lo tenemos pero el otro no por lo que debemos volver al punto de unzip y hacer lo mismo con ese archivo.
Luego, dado que ya tengo dos archivos CSS, mejor voy a crear una carpeta css para poner los dos archivos ahí.
Una vez que la hemos creado, edito el index.html y pongo las rutas correctas.

Os anticipo que hay también un archivo javascript cuyo enlace hay que corregir:

grep -rn src index.html 
85:    <script src="../assets/dist/js/bootstrap.bundle.min.js"></script>

Hago lo mismo con este archivo, lo extraigo del zip, lo copio en una carpeta que llamaré js y pongo su ruta correcta en el HTML.

Crear archivos de contenido

Se puede crear archivos de contenido (HTML) de varias maneras, veamos dos:

1. Edito el index.html con nano, cambio algo y, al darle a guardar, cambio el nombre del archivo.
2. Copio el archivo con cp.

Tened en cuenta que la estructura tiene que ser consistente. Por ejemplo, esta es la estructura actual de docs es esta:

$ tree .
.
├── cabecera.html
├── css
│   ├── bootstrap.min.css
│   └── sticky-footer-navbar.css
├── index.html
├── js
│   └── bootstrap.bundle.min.js
├── metodologia.html
├── pie.html
└── readme.html

2 directories, 8 files

Esto es porque he copiado dos veces index.html una con nombre de pie y otra con nombre de cabecera. De esta forma, si tengo los archivos html que proceden de markdown en uno como este readme.html, puedo crear un documento HTML completo en metodologia.html con esta instrucción:

cat cabecera.html readme.html pie.html > metodologia.html

De esta forma solo tengo que editar una vez la cabecera y el pie y luego puedo construir los demás documentos.

Una vez que termine el proceso, borraría cabecera.html y pie.html y los html intermedios (los que vienen de la exportación de markdown).

Pruebas

1. Cuál es el puerto de HTTP
2. ¿Y el de HTTPS?
3. ¿Cuál es la dirección IP de localhost?
4. ¿En qué archivo puedo ver el nombre de mi host?
5. ¿Qué diferencias hay entre un elemento y una etiqueta HTML?
6. ¿Qué diferencias hay entre Internet, la Web, un navegador y Google?
7. ¿Con qué comando realizamos conversiones de documentos de texto estructurado? Pon un ejemplo de cómo sería la instrucción y explícala.
8. ¿Qué es Bootstrap?
9. ¿Por qué son importantes las rutas?
10. Cuando se habla de recursos, ¿se habla de petróleo? Razona la respuesta.
11. ¿Por qué crees que se dice que "los datos son el nuevo petróleo"?