flowsta/sesiones/2021-11-24.md

# Table of Contents

1.  [Contenidos](#org65dcd08)
    1.  [Nomenclatura](#orge13a2a0)
    2.  [Pandoc](#org28e6da1)
    3.  [Plantilla HTML: Bootstrap](#org5c42bda)
        1.  [Descarga de ejemplos de Bootstrap](#org65fb45f)
        2.  [Extraer los archivos](#org45599d0)
    4.  [Crear el directorio docs](#orgdd7e2ff)
    5.  [Editar contenido](#org0f2ec0c)
    6.  [Crear archivos de contenido](#org986f95d)
2.  [Pruebas](#org0ce56c7)


<a id="org65dcd08"></a>

# Contenidos


<a id="orge13a2a0"></a>

## 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.  


<a id="org28e6da1"></a>

## 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](https://pandoc.org/demos.html) o bien del propio [manual](https://pandoc.org/MANUAL.html). 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`.  


<a id="org5c42bda"></a>

## 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](https://es.wikipedia.org/wiki/Bootstrap_(framework)) es Bootstrap "biblioteca multiplataforma o conjunto de herramientas de código abierto para diseño de sitios y aplicaciones web".  
De todos los [ejemplos](https://getbootstrap.com/docs/5.1/examples/) que ofrece Bootstrap, vamos a utilizar [Sticky Footer Navbar](https://getbootstrap.com/docs/5.1/examples/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.  


<a id="org65fb45f"></a>

### Descarga de ejemplos de Bootstrap

Para utilizar uno de los [ejemplos](https://getbootstrap.com/docs/5.1/examples/) 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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Redirections).  
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


<a id="org45599d0"></a>

### 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


<a id="orgdd7e2ff"></a>

## 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/.


<a id="org0f2ec0c"></a>

## 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`.  


<a id="org986f95d"></a>

## 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`).  


<a id="org0ce56c7"></a>

# 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"?