mirror of
https://github.com/flowsta/uc3m-periodismo-datos.git
synced 2024-12-25 23:31:22 +01:00
bootstraping
This commit is contained in:
Adolfo Antón-Bravo
parent
7f92fc9c69
commit
34d60e45a8
10 changed files with 603 additions and 22 deletions
71
docs/cabecera.html
Normal file
71
docs/cabecera.html
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en" class="h-100">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||||
|
<meta name="generator" content="Hugo 0.88.1">
|
||||||
|
<title>Sticky Footer Navbar Template · Bootstrap v5.1</title>
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/sticky-footer-navbar/">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Bootstrap core CSS -->
|
||||||
|
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.bd-placeholder-img {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
text-anchor: middle;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.bd-placeholder-img-lg {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Custom styles for this template -->
|
||||||
|
<link href="css/sticky-footer-navbar.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body class="d-flex flex-column h-100">
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<!-- Fixed navbar -->
|
||||||
|
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand" href="#">Fixed navbar</a>
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||||
|
<ul class="navbar-nav me-auto mb-2 mb-md-0">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="#">Link</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link disabled">Disabled</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<form class="d-flex">
|
||||||
|
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||||
|
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Begin page content -->
|
||||||
|
<main class="flex-shrink-0">
|
||||||
|
<div class="container">
|
||||||
7
docs/css/bootstrap.min.css
vendored
Normal file
7
docs/css/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
7
docs/css/sticky-footer-navbar.css
Normal file
7
docs/css/sticky-footer-navbar.css
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
/* Custom page CSS
|
||||||
|
-------------------------------------------------- */
|
||||||
|
/* Not required for template or sticky footer method. */
|
||||||
|
|
||||||
|
main > .container {
|
||||||
|
padding: 60px 15px 0;
|
||||||
|
}
|
||||||
89
docs/index.html
Normal file
89
docs/index.html
Normal file
|
|
@ -0,0 +1,89 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en" class="h-100">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||||
|
<meta name="generator" content="Hugo 0.88.1">
|
||||||
|
<title>Plantilla Sticky Footer Navbar Template · Bootstrap v5.1 para la realización del trabajo de Periodismo de Datos</title>
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/sticky-footer-navbar/">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Bootstrap core CSS -->
|
||||||
|
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.bd-placeholder-img {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
text-anchor: middle;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.bd-placeholder-img-lg {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Custom styles for this template -->
|
||||||
|
<link href="sticky-footer-navbar.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body class="d-flex flex-column h-100">
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<!-- Fixed navbar -->
|
||||||
|
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand" href="#">Fixed navbar</a>
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||||
|
<ul class="navbar-nav me-auto mb-2 mb-md-0">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="#">Link</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link disabled">Disabled</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<form class="d-flex">
|
||||||
|
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||||
|
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Begin page content -->
|
||||||
|
<main class="flex-shrink-0">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="mt-5">Sticky footer with fixed navbar</h1>
|
||||||
|
<p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code class="small">padding-top: 60px;</code> on the <code class="small">main > .container</code>.</p>
|
||||||
|
<p>Back to <a href="../examples/sticky-footer/">the default sticky footer</a> minus the navbar.</p>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="footer mt-auto py-3 bg-light">
|
||||||
|
<div class="container">
|
||||||
|
<span class="text-muted">Place sticky footer content here.</span>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
7
docs/js/bootstrap.bundle.min.js
vendored
Normal file
7
docs/js/bootstrap.bundle.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
180
docs/metodologia.html
Normal file
180
docs/metodologia.html
Normal file
|
|
@ -0,0 +1,180 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en" class="h-100">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||||
|
<meta name="generator" content="Hugo 0.88.1">
|
||||||
|
<title>Metodología</title>
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/sticky-footer-navbar/">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Bootstrap core CSS -->
|
||||||
|
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.bd-placeholder-img {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
text-anchor: middle;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.bd-placeholder-img-lg {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Custom styles for this template -->
|
||||||
|
<link href="css/sticky-footer-navbar.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body class="d-flex flex-column h-100">
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<!-- Fixed navbar -->
|
||||||
|
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand" href="#">Fixed navbar</a>
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||||
|
<ul class="navbar-nav me-auto mb-2 mb-md-0">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="#">Link</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link disabled">Disabled</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<form class="d-flex">
|
||||||
|
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||||
|
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Begin page content -->
|
||||||
|
<main class="flex-shrink-0">
|
||||||
|
<div class="container">
|
||||||
|
<h1 id="periodismo-de-datos-en-uc3m">Periodismo de Datos en UC3M</h1>
|
||||||
|
<p>Notas sobre <strong>Periodismo de Datos</strong> en <em>UC3M</em></p>
|
||||||
|
<h2 id="qué-es-el-periodismo-de-datos">Qué es el periodismo de datos</h2>
|
||||||
|
<h3 id="tres-saberes-implicados">Tres saberes implicados</h3>
|
||||||
|
<ul>
|
||||||
|
<li>Periodismo</li>
|
||||||
|
<li>Visualización</li>
|
||||||
|
<li>Datos</li>
|
||||||
|
</ul>
|
||||||
|
<h2 id="por-qué-ponte-datos">Por qué <em>Ponte Datos</em></h2>
|
||||||
|
<p>Por Concepción Arenal Ponte</p>
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en" class="h-100">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||||
|
<meta name="generator" content="Hugo 0.88.1">
|
||||||
|
<title>Sticky Footer Navbar Template · Bootstrap v5.1</title>
|
||||||
|
|
||||||
|
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/sticky-footer-navbar/">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Bootstrap core CSS -->
|
||||||
|
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.bd-placeholder-img {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
text-anchor: middle;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.bd-placeholder-img-lg {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Custom styles for this template -->
|
||||||
|
<link href="css/sticky-footer-navbar.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body class="d-flex flex-column h-100">
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<!-- Fixed navbar -->
|
||||||
|
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand" href="#">Fixed navbar</a>
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||||
|
<ul class="navbar-nav me-auto mb-2 mb-md-0">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" href="#">Link</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link disabled">Disabled</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<form class="d-flex">
|
||||||
|
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
|
||||||
|
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Begin page content -->
|
||||||
|
<main class="flex-shrink-0">
|
||||||
|
<div class="container">
|
||||||
|
<h1 id="el-año-del-periodismo-de-datos-en-españa">2021: el año del periodismo de datos en España</h1>
|
||||||
|
<h2 id="la-evolución-en-los-casos-nacionales-es-evidente-pero-todavía-queda-camino-por-recorrer.-a-continuación-se-abarcarán-dos-de-los-mejores-ejemplo-de-periodismo-de-datos-de-españa-del-último-2021">La evolución en los casos nacionales es evidente, pero todavía queda camino por recorrer. A continuación se abarcarán dos de los mejores ejemplo de periodismo de datos de España del último 2021</h2>
|
||||||
|
<p><em>Miriam Puelles – Actividad 1 Periodismo de Datos II</em></p>
|
||||||
|
<p>El <strong>periodismo</strong> ya no es lo que era. Esta afirmación tan evidente como el propio transcurrir del tiempo. Y este 2021 ha sido un gran ejemplo. El motivo no es otro sino la <strong>profesionalización</strong> de los medios de comunicación españoles en el desarrollo del periodismo de <strong>datos</strong>, el cual, pese a ser todavía secundario ante los medios que se disponen internacionalmente, está completando un curso de gran progreso. Y los <strong>dos ejemplos</strong> a destacar con un claro caso.</p>
|
||||||
|
<p>En primer lugar, me gustaría hablar de <a href="https://www.elmundo.es/cotos-caza/2020/11/15/5fad58d4fc6c83024e8b4668.html"><strong><em>Los dueños de la caza en España</em></strong></a>, un reportaje del periódico <em>El Mundo</em> que vuelve a mostrar la fortaleza de este diario en cuanto a medios se refiere. Y es que sobra decir que <strong>es necesaria una fuerte financiación económica</strong> para poder dedicar tiempo y realizar un trabajo de calidad como el presente.</p>
|
||||||
|
<p>En concreto, <em>‘Los dueños de la caza en España’</em> busca descubrir quiénes son los titulares de los terrenos nacionales en los que se puede realizar dicha actividad. Para ello, el equipo del periódico El Mundo ha sabido realizar un <em>scraping</em> muy práctico que, ligado a una precisa narración, permite al lector avanzar y conocer de un simple vistazo. Porque ese al final es uno de los objetivos de este tipo de periodismo: hacer que los datos no sean un enemigo, sino un aliado para desvelar aspectos hasta ahora desconocidos y emplear visualizaciones que permita al lector entender dichos puntos de una forma sencilla.</p>
|
||||||
|
<p>Esto es lo que logra <em>Los dueños de la caza en España</em>. Es fácil, didáctico, tiene un buen tratamiento de datos y sobra decir que el diseño y la visualización es también correcta. En este punto es muy necesario que el lector la considere atractiva, y los gráficos que se muestran ilustrados nos hacen ver cómo el equipo de <em>El Mundo</em> ha cuidado especialmente este detalle.</p>
|
||||||
|
<p>Porque éste es uno de los problemas que ha acarreado el periodismo de datos nacional hasta la fecha: *<strong>no se cuida la estética</strong>. Sin embargo, es precisamente ésta la que puede hacer que el lector permanezca en el interior de la noticia a pesar de tener una correcta redacción.</p>
|
||||||
|
<p>Aquí entra el segundo ejemplo, procedente de <em>eldiario.es</em>. La elección de este caso no ha sido casual. El motivo real es el férreo esfuerzo que ha realizado en los últimos tiempos este digital por situarse a la vanguardia del periodismo pese a no disponer de unos medios económicos como sí dispone <em>El Mundo</em>. Por eso es muy valorable casos como el siguiente.</p>
|
||||||
|
<h1 class="mt-5">Sticky footer with fixed navbar</h1>
|
||||||
|
<p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code class="small">padding-top: 60px;</code> on the <code class="small">main > .container</code>.</p>
|
||||||
|
<p>Back to <a href="../examples/sticky-footer/">the default sticky footer</a> minus the navbar.</p>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="footer mt-auto py-3 bg-light">
|
||||||
|
<div class="container">
|
||||||
|
<span class="text-muted">Place sticky footer content here.</span>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="js/bootstrap.bundle.min.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
15
docs/pie.html
Normal file
15
docs/pie.html
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="footer mt-auto py-3 bg-light">
|
||||||
|
<div class="container">
|
||||||
|
<span class="text-muted">Place sticky footer content here.</span>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="js/bootstrap.bundle.min.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
11
docs/readme.html
Normal file
11
docs/readme.html
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<h1 id="periodismo-de-datos-en-uc3m">Periodismo de Datos en UC3M</h1>
|
||||||
|
<p>Notas sobre <strong>Periodismo de Datos</strong> en <em>UC3M</em></p>
|
||||||
|
<h2 id="qué-es-el-periodismo-de-datos">Qué es el periodismo de datos</h2>
|
||||||
|
<h3 id="tres-saberes-implicados">Tres saberes implicados</h3>
|
||||||
|
<ul>
|
||||||
|
<li>Periodismo</li>
|
||||||
|
<li>Visualización</li>
|
||||||
|
<li>Datos</li>
|
||||||
|
</ul>
|
||||||
|
<h2 id="por-qué-ponte-datos">Por qué <em>Ponte Datos</em></h2>
|
||||||
|
<p>Por Concepción Arenal Ponte</p>
|
||||||
|
|
@ -1,30 +1,30 @@
|
||||||
|
|
||||||
# Table of Contents
|
# Table of Contents
|
||||||
|
|
||||||
1. [Contenidos](#orgb93fe26)
|
1. [Contenidos](#orgdb5e909)
|
||||||
1. [Pandoc](#org7e51056)
|
1. [Pandoc](#org7372444)
|
||||||
2. [nano](#orga83e04f)
|
2. [nano](#org868d19c)
|
||||||
3. [zenburn](#org9d0712a)
|
3. [zenburn](#orgc2f4c37)
|
||||||
4. [OpenRefine](#orgd0b853b)
|
4. [OpenRefine](#org4e13299)
|
||||||
1. [Cómo utilizar el conteo de las facetas](#org24b65dd)
|
1. [Cómo utilizar el conteo de las facetas](#org8c237cf)
|
||||||
2. [Crear una columna con los valores de otra columna](#orgd7799bd)
|
2. [Crear una columna con los valores de otra columna](#org2acf0da)
|
||||||
3. [Cómo sumar todos los valores de un registro](#org1b5774e)
|
3. [Cómo sumar todos los valores de un registro](#org3e05575)
|
||||||
4. [Otras](#org6a6a97e)
|
4. [Otras](#orgf61c386)
|
||||||
2. [Pruebas](#org86cbad3)
|
2. [Pruebas](#org5437172)
|
||||||
|
|
||||||
|
|
||||||
<a id="orgb93fe26"></a>
|
<a id="orgdb5e909"></a>
|
||||||
|
|
||||||
# Contenidos
|
# Contenidos
|
||||||
|
|
||||||
|
|
||||||
<a id="org7e51056"></a>
|
<a id="org7372444"></a>
|
||||||
|
|
||||||
## Pandoc
|
## Pandoc
|
||||||
|
|
||||||
- Tiene una página donde se puede probar y da ejemplos
|
- Tiene una página donde se puede probar y da ejemplos
|
||||||
- Pero tenemos todo el manual con `man pandoc`
|
- Pero tenemos todo el manual con `man pandoc`. Quien no tenga este comando disponible debe instalarse el paquete `man-db`. En el caso de Cygwin, `apt-cyg install man-db`
|
||||||
- Se descarga de pandoc.org
|
- `Pandoc` Se descarga de [pandoc.org](https://pandoc.org/installing.html)
|
||||||
- Una vez instalado, se puede usar desde la terminal. Ten en cuenta que si tienes la terminal abierta mientras lo instalas no se actualizarán las rutas de la variable `PATH` por lo que conviene cerrar la terminal y volver a abrirla.
|
- Una vez instalado, se puede usar desde la terminal. Ten en cuenta que si tienes la terminal abierta mientras lo instalas no se actualizarán las rutas de la variable `PATH` por lo que conviene cerrar la terminal y volver a abrirla.
|
||||||
- Recuerda que para ver la variable `PATH` puedes hacer `echo $PATH`.
|
- Recuerda que para ver la variable `PATH` puedes hacer `echo $PATH`.
|
||||||
- Y si no te lo ha incluido, puedes añadir la ruta a la variable con `export PATH=$PATH:/ruta/absoluta/a/directorio/binario/pandoc/`. Esto funcionará para la sesión. Si quieres que sea un cambio permanente debes añadirlo a `.bashrc` o `.zshrc` según tu `shell`.
|
- Y si no te lo ha incluido, puedes añadir la ruta a la variable con `export PATH=$PATH:/ruta/absoluta/a/directorio/binario/pandoc/`. Esto funcionará para la sesión. Si quieres que sea un cambio permanente debes añadirlo a `.bashrc` o `.zshrc` según tu `shell`.
|
||||||
|
|
@ -32,7 +32,7 @@
|
||||||
- Comprueba que tienes pandoc con `pandoc --version`.
|
- Comprueba que tienes pandoc con `pandoc --version`.
|
||||||
|
|
||||||
|
|
||||||
<a id="orga83e04f"></a>
|
<a id="org868d19c"></a>
|
||||||
|
|
||||||
## nano
|
## nano
|
||||||
|
|
||||||
|
|
@ -41,7 +41,7 @@
|
||||||
- Tenéis que fijaros si tenéis comentadas o escritas dos opciones: `set softwrap` y `set linenumbers`. Escribidlo si no lo tenéis, guardadlo y salid. La próxima vez que entréis debéis tener ya las dos opciones activas.
|
- Tenéis que fijaros si tenéis comentadas o escritas dos opciones: `set softwrap` y `set linenumbers`. Escribidlo si no lo tenéis, guardadlo y salid. La próxima vez que entréis debéis tener ya las dos opciones activas.
|
||||||
|
|
||||||
|
|
||||||
<a id="org9d0712a"></a>
|
<a id="orgc2f4c37"></a>
|
||||||
|
|
||||||
## zenburn
|
## zenburn
|
||||||
|
|
||||||
|
|
@ -51,21 +51,21 @@
|
||||||
- En OSX hay opción gráfica aunque no sé si para Zenburn.
|
- En OSX hay opción gráfica aunque no sé si para Zenburn.
|
||||||
|
|
||||||
|
|
||||||
<a id="orgd0b853b"></a>
|
<a id="org4e13299"></a>
|
||||||
|
|
||||||
## OpenRefine
|
## OpenRefine
|
||||||
|
|
||||||
Voy a resumir las dos operaciones que había preparado más la que presentó el compañero Aguirre. Empezaré por esta.
|
Voy a resumir las dos operaciones que había preparado más la que presentó el compañero Aguirre. Empezaré por esta.
|
||||||
|
|
||||||
|
|
||||||
<a id="org24b65dd"></a>
|
<a id="org8c237cf"></a>
|
||||||
|
|
||||||
### Cómo utilizar el conteo de las facetas
|
### Cómo utilizar el conteo de las facetas
|
||||||
|
|
||||||
value.facetCount("value","Column 3")
|
value.facetCount("value","Column 3")
|
||||||
|
|
||||||
|
|
||||||
<a id="orgd7799bd"></a>
|
<a id="org2acf0da"></a>
|
||||||
|
|
||||||
### Crear una columna con los valores de otra columna
|
### Crear una columna con los valores de otra columna
|
||||||
|
|
||||||
|
|
@ -74,21 +74,21 @@ Voy a resumir las dos operaciones que había preparado más la que presentó el
|
||||||
return "Donald Trump"
|
return "Donald Trump"
|
||||||
|
|
||||||
|
|
||||||
<a id="org1b5774e"></a>
|
<a id="org3e05575"></a>
|
||||||
|
|
||||||
### Cómo sumar todos los valores de un registro
|
### Cómo sumar todos los valores de un registro
|
||||||
|
|
||||||
row.record.cells["FelipeVI"].value.sum()
|
row.record.cells["FelipeVI"].value.sum()
|
||||||
|
|
||||||
|
|
||||||
<a id="org6a6a97e"></a>
|
<a id="orgf61c386"></a>
|
||||||
|
|
||||||
### Otras
|
### Otras
|
||||||
|
|
||||||
Para lo demás he hecho cosas que hemos visto.
|
Para lo demás he hecho cosas que hemos visto.
|
||||||
|
|
||||||
|
|
||||||
<a id="org86cbad3"></a>
|
<a id="org5437172"></a>
|
||||||
|
|
||||||
# Pruebas
|
# Pruebas
|
||||||
|
|
||||||
|
|
|
||||||
194
sesiones/2021-11-24.md
Normal file
194
sesiones/2021-11-24.md
Normal file
|
|
@ -0,0 +1,194 @@
|
||||||
|
|
||||||
|
# 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"?
|
||||||
|
|
||||||
Loading…
Reference in a new issue