<commit_before><!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">

		<title>Crea tu propia aplicación de datos Open Source</title>

		<meta name="description" content="Presentación en español sobre git, github y control de versiones para periodistas o interesados en periodismo de datos.">
		<meta name="author" content="<NAME>">

		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<link rel="stylesheet" href="css/reveal.min.css">
		<link rel="stylesheet" href="css/theme/serif.css" id="theme">

		<!-- For syntax highlighting -->
		<link rel="stylesheet" href="lib/css/zenburn.css">

		<!-- If the query includes 'print-pdf', include the PDF print sheet -->
		<script>
			if( window.location.search.match( /print-pdf/gi ) ) {
				var link = document.createElement( 'link' );
				link.rel = 'stylesheet';
				link.type = 'text/css';
				link.href = 'css/print/pdf.css';
				document.getElementsByTagName( 'head' )[0].appendChild( link );
			}
		</script>

		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
	</head>

	<body>

		<div class="reveal">

			<!-- Any section element inside of this container is displayed as a slide -->
			<div class="slides">

				<section>
					<h1>Aplicación de Datos</h1>
					<h3>¡tú puedes!</h3>
					<p>
						<small>Presentación por <a href="http://gaba.stayover.org">Gabriela "Gaba" Rodriguez</a> / <a href="http://twitter.com/gaba">@gaba</a> / <a href="http://www.opennews.org">Open News Fellow 2014</a></small>
					</p>
				</section>

				<section>
					<h3>¿Qué es una aplicación de noticias?</h3>
					<p>¿Qué vamos a hacer?</p>
					<aside class="notes">
						Una web que muestre la base de datos y un mapa interactivo de incendios en España.
					</aside>
				</section>

				<section>
					<section>
						<h3>Pre-requisitos</h3>
					</section>
					<section>
						<h3>Linea de Comandos</h3>
						<p>En Windows: prompt<p>
						<p>En Linux y Mac: Console y Terminal</p>
					</section>
					<aside class="notes"></aside>
					<section>
						<h3>Editor de Texto</h3>
						<p>Un editor de texto plano. No sirve Word pues agrega formato y otras cosas al texto que no necesitamos. Recomendaciones: notepad, sublime, gedit<p>
					</section>
					<aside class="notes"></aside>
					<section>
						<h3>Git y GitHub</h3>
						<p>En Windows http://windows.github.com</p>
						<p>En Mac http://mac.github.com</p>
            <p>Crear cuenta en http://github.com</p>
					</section>
					<aside class="notes"></aside>
					<section>
						<h3>Python - version 2.7</h3>
            <p>En Windows https://www.python.org/download/windows</p>
						<p>Instrucciones http://docs.python-guide.org/en/latest/starting/install/win/</p>
					</section>
					<aside class="notes"></aside>
					<section>
						<h3>Pip o easy_install</h3>
						<p>un manejador de packetes para python</p>
						<p>Instrucciones para windows: http://docs.python-guide.org/en/latest/starting/install/win/</p>
						<p>En Mac: $ brew install pip</p>
						<p>En Linux: $ apt-get install pip</p>
					</section>
					<aside class="notes"><aside>
					<section>
						<h3>virtualenv</h3>
						<p>manejador de ambientes virtuales</p>
						<p>Instrucciones para windows: http://docs.python-guide.org/en/latest/starting/install/win/</p>
						<p>En Mac: $ pip install virtualenv</p>
					</section>
					<aside class="notes"></aside>
				</section>

				<section>
					<section>
							<h3>Empezando por crear el ambiente</h3>
							<p>
								Abrir la terminal, ir a donde se quiere crear la aplicación y crear un ambiente virtual llamado mi-app.
							</p>
							<pre><code data-trim contenteditable>$ virtualenv mi-app</code></pre>
					</section>
					<aside class="notes">Esto crea un directorio llamado mi-app. Hay que crear el directorio virtual sólo una vez.</aside>

					<section>
						<h3>Activar el ambiente virtual</h3>
						<p>En Mac/Linux</p>
						<pre><code data-trim contenteditable>
							$ cd mi-app
						</code></pre>
						<pre><code data-trim contenteditable>
							$ . bin/activate
						</code></pre>

						<p>En Windows</p>
						<pre><code data-trim contenteditable>
							$ cd Scripts
						</code></pre>
						<pre><code data-trim contenteditable>
							$ activate
						</code></pre>
						<pre><code data-trim contenteditable>
							$ cd ..
						</code></pre>
					</section>
					<aside class="notes"></aside>
				</section>

				<section>
					<section>
						<h3>¡Hola Git! Crear repositorio GIT local</h3>
						<pre><code data-trim contenteditable>
							$ git init repo
						</code></pre>
						<pre><code data-trim contenteditable>
							$ cd repo
						</codE></pre>
					</section>
					<aside class="notes"></aside>

					<section>
						<h3>Ir a GitHub y crear repositorio llamado mi-app-datos </h3>
						<p>No seleccionar "Initialize with README". Empezaremos con un repositorio en blanco.</p>
						<p>Ir a tu directorio local (repo) y agregar el repositorio remoto</p>
						<pre><code data-trim contenteditable>git remote add origin https://github.com/mi-usuario-en-github/mi-app-datos.git</code></pre>
					</section>
					<aside class="notes">					</aside>

					<section>
						<h3>Crear tu primer archivo</h3>
						<p>un archivo en blanco README con una extension Markdown</p>
						<p>En Mac o Linux</p>
						<pre><code data-trim contenteditable>$ touch README.md</code></pre>
						<p>En Windows</p>
						<pre><code data-trim contenteditable>$ start notepad++ README.md</code></pre>
						<h2>Edición Colaborativa de un articulo</h2>
						<p><a href="http://www.wired.com/2012/02/github-revisited/">Wired</a> publico <a href="https://github.com/WiredEnterprise/Lord-of-the-Files">un articulo</a> sobre GitHub desde GitHub.</p>
						<p>Links:</p>
						<ol>
							<li>https://github.com/WiredEnterprise/Lord-of-the-Files</li>
							<li>http://www.wired.com/2012/02/github-revisited/</li>
						</ol>
					</section>
					<aside class="notes"></aside>

					<section>
						<h3>Abrir README.md en tu editor preferido</h3>
						<p>Escribir algo como</p>
						<pre>
							<code contenteditable>
									Mi primera aplicación de datos
									==============================
							</code>
						</pre>
						<p>Guardarlo.</p>
					</section>
					<aside class="notes"></aside>

					<section>
						<h3>Agregarlo a Git</h3>
						<p></p>
						<pre>
							<code data-trim contenteditable>
								$ git add README.md
							</code>
						</pre>
						<pre>
							<code data-trim contenteditable>
								$ git commit -m "Primer commit"
							</code>
						</pre>
						<pre>
							<code data-trim contenteditable>
								$ git push origin master
							</code>
						</pre>
					</section>
					<aside class="notes"></aside>
				</section>

				<section>
					<section>
						<h3>¡Hola Flask!</h3>
						<p>Usar pip para instalar Flask</p>
						<pre><code data-trim contenteditable>$ pip install Flask</code></pre>
					</section>
					<aside class="notes">Flask es un python microframework que usaremos para hacer la app.</aside>

					<section>
						<h3>Crear archivo app.py</h3>
						<p>para configurar Flask</p>
						<pre>
							<code data-trim contenteditable>
								# Mac y Linux:
								$ touch app.py
							</code>
						</pre>
						<pre><code data-trim contenteditable>
								# Windows:
								$ start notepad++ app.py
							</code>
						</pre>
					</section>
					<aside class="notes"></aside>

					<section>
						<h3>Abrir app.py en un editor</h3>
						<p></p>
						<pre>
							<code contenteditable>
								from flask import Flask
								app = Flask(__name__)
							</code>
						</pre>
					</section>
					<aside class="notes">Aqui estamos importando lo basico de Flask. Este archivo sera el backend de la aplicación.</aside>

					<section>
						<h3>Configurar para hacer la raíz de tu sitio</h3>
						<p>Usaremos un archivo llamado 'index.html' para colocar la información. Tenemos que especificarlo en app.py</p>
						<pre>
							<code contenteditable>
								from flask import Flask
								from flask import render_template
								app = Flask(__name__)

								@app.route("/")
								def index():
								    return render_template('index.html')
							</code>
						</pre>
					</section>
					<aside class="notes"></aside>

					<section>
						<h3>Ir a linea de comandos</h3>
						<p>crear directorio templates en el mismo repositorio en que estamos.</p>
						<pre>
							<code data-trim contenteditable>
								$ mkdir templates
							</code>
						</pre>
					</section>
					<aside class="notes"></aside>

					<section>
						<h3>Crear index.html</h3>
						<p>dentro del directorio templates</p>
						<pre>
							<code data-trim contenteditable>
								# Macs y Linux:
								$ touch templates/index.html
							</code>
						</pre>
						<pre><code data-trim contenteditable>
								# Windows:
								$ start notepad++ templates/index.html
							</code>
						</pre>
					</section>
					<aside class="notes"></aside>

					<section>
						<h3>Volver a editar app.py</h3>
						<p>y agregarle lo siguiente para poder levantar el servidor local de Flask</p>
						<pre>
							<code contenteditable>
								from flask import Flask
								from flask import render_template
								app = Flask(__name__)

								@app.route("/")
								def index():
								    return render_template('index.html')

								if __name__ == '__main__':
								    app.run(
								        host="0.0.0.0",
								        port=8000,
								        use_reloader=True,
								        debug=True,
								    )
							</code>
						</pre>
					</section>

					<section>
						<h3>Correr app.py en la linea de comandos</h3>
						<p>Mirar el resultado en un navegador en http://localhost:8000</p>
						<pre>
							<code data-trim contenteditable>
								$ python app.py
							</code>
						</pre>
					</section>

					<section>
						<h3>Agrega tu trabajo a GIT</h3>
						<p>cancela lo que este corriendo de app.py (CTR-C) en la terminal</p>
						<pre>
							<code data-trim contenteditable>
								$ git add .
							</code>
						</pre>
						<pre>
							<code data-trim contenteditable>
								$ git commit -m "Flask app.py and first template"
							</code>
						</pre>
						<pre>
							<code data-trim contenteditable>
								$ git push origin master
							</code>
						</pre>
					</section>
				</section>

				<section>
					<section>
						<h3>¡Hola HTML!</h3>
						<p>Comenzar nuevamente editando index.html. Reemplazar el contenido por el esqueleto de un archivo HTML</p>
						<pre>

								<xmp>
									<!doctype html>
									<html lang="es">
									    <head></head>
									    <body>
									        <h1>Incendios en España entre 2004 y 2014</h1>
									    </body>
									</html>
								</xmp>

						</pre>
					</section>
					<section>
						<h3>Commitear los cambios al repositorio</h3>
						<p></p>
						<pre>
							<code data-trim contenteditable>
								$ git add templates/index.html
							</code>
						</pre>
						<pre>
							<code data-trim contenteditable>
								$ git commit -m "Real HTML"
							</code>
						</pre>
						<pre>
							<code data-trim contenteditable>
								$ git push origin master
							</code>
						</pre>
					</section>
					<section>
						<h3>Crear directorio para guardar archivos estaticos</h3>
						<p></p>
						<pre>
							<code data-trim contenteditable>
								$ mkdir static
							</code>
						</pre>
					</section>
					<section>
						<h3>Guardar archivo CSV</h3>
						<p>descargarlo desde BLAH BLAH y guardarlo en directorio static. Agregarlo a git</p>
						<pre>
							<code data-trim contenteditable>
								$ git add static
							</code>
						</pre>
						<pre>
							<code data-trim contenteditable>
								$ git commit -m "Agregando fuente de datos CSV"
							</code>
						</pre>
						<pre>
							<code data-trim contenteditable>
								$ git push origin master
							</code>
						</pre>
					</section>
					<section>
						<h3>Abrir app.py en editor de texto</h3>
						<p>Usaremos libreria csv para acceder a nuestros datos</p>
						<pre>
							<code contenteditable>
								import csv
								from flask import Flask
								from flask import render_template
								app = Flask(__name__)

								csv_path = './static/incendio.csv'
								csv_obj = csv.DictReader(open(csv_path, 'r'))
								csv_list = list(csv_obj)

								@app.route("/")
								def index():
								    return render_template('index.html')

								if __name__ == '__main__':
								    app.run(
								        host="0.0.0.0",
								        port=8000,
								        use_reloader=True,
								        debug=True,
								    )

							</code>
						</pre>
					</section>
					<section>
						<h3>Pasarle la lista de datos del csv a index.html</h3>
						<p></p>
						<pre>
							<code contenteditable>
								import csv
								from flask import Flask
								from flask import render_template
								app = Flask(__name__)

								csv_path = './static/la-riots-deaths.csv'
								csv_obj = csv.DictReader(open(csv_path, 'r'))
								csv_list = list(csv_obj)

								@app.route("/")
								def index():
								    return render_template('index.html',
								        object_list=csv_list,
								    )

								if __name__ == '__main__':
								    app.run(
								        host="0.0.0.0",
								        port=8000,
								        use_reloader=True,
								        debug=True,
								    )

							</code>
						</pre>
					</section>
					<section>
						<h3>Guardar app.py y editar index.html</h3>
						<p>Colocar la lista del csv en el index.html</p>
						<pre>
								<xmp>
									<!doctype html>
									<html lang="es">
											<head></head>
											<body>
													<h1>Incendios en España entre 2004 y 2014</h1>
													{{ object_list }}
											</body>
									</html>
								</xmp>
						</pre>
						<p>En linea de comandos correr app.py y visitar http://localhost:8000 nuevamente</p>
					</section>
					<section>
						<h3>Vamos a darle formato a los datos en index.html</h3>
						<p>Estamos usando el lenguaje de templating jinja de Flask</p>
<xmp>
	<!doctype html>
	<html lang="es">
	    <head></head>
	    <body>
	        <h1>Incendios en España entre 2004 y 2014</h1>
	        <table border=1 cellpadding=7>
	            <tr>
	                <th>Comunidad</th>
	            </tr>
	        {% for obj in object_list %}
	            <tr>
	                <td>{{ obj['COMUNIDAD'].decode('UTF-8') }}</td>
	            </tr>
	        {% endfor %}
	        </table>
	    </body>
	</html>
</xmp>
					</section>
					<section>
						<h3>Refrescar el navegador con nuestra aplicación</h3>
						<p>Colocaremos más datos en la table.</p>
						<xmp>
								    <table border=1 cellpadding=7>
							        <tr>
							            <th>Superficie Forestal Quemada</th>
							            <th>Fecha</th>
							            <th>Muertos</th>
							            <th>Heridos</th>
							            <th>Comunidad</th>
							            <th>Provincia</th>
							            <th>Comarca</th>
							            <th>Causa</th>
							            <th>Perdidas</th>
							        </tr>
							    {% for obj in object_list %}
							        <tr>
							            <td>{{ obj['SUPQUEMADA'] }}</td>
							            <td>{{ obj['FECHA'] }}</td>
							            <td>{{ obj['MUERTOS'] }}</td>
							            <td>{{ obj['HERIDOS'] }}</td>
							            <td>{{ obj['COMUNIDAD'].decode('UTF-8') }}</td>
							            <td>{{ obj['PROVINCIA'].decode('UTF-8') }}</td>
							            <td>{{ obj['COMARCA'].decode('UTF-8') }}</td>
							            <td>{{ obj['CAUSA'].decode('UTF-8')  }}</td>
							            <td>{{ obj['PERDIDAS'] }}</td>
							        </tr>
							    {% endfor %}
							    </table>
						</xmp>
					</section>
					<section>
						<h3>Refrescar el navegador</h3>
						<p>y luego commitear tu trabajo</p>
						<pre>
							<code contenteditable>
								$ git add .
								$ git commit -m "Creamos tabla de datos"
								$ git push origin master
							</code>
						</pre>
					</section>
				</section>

				<section>
					<section>
						<h3>Agreguemos página de detalles por incendio</h3>
						<p>Agregamos una nueva ruta en app.py</p>
						<pre>
							<code contenteditable>
								import csv
								from flask import Flask
								from flask import render_template
								app = Flask(__name__)

								...

								@app.route("/")
								def index():
								    return render_template('index.html',
								                           object_list=csv_list
								                          )

								@app.route('/<number>/')
								def detail(number):
								    return render_template('detail.html')

								if __name__ == '__main__':
								  ...

							</code>
						</pre>
					</section>

					<section>
						<h3>Agreguemos el template detail.html</h3>
						<p></p>
						<pre>
							<code data-trim contenteditable>
								# Macs y Linux:
								$ touch templates/detail.html
							</code>
						</pre>
						<pre>
							<code data-trim contenteditable>
								# Windows:
								$ start notepad++ templates/detail.html
							</code>
						</pre>
					</section>

					<section>
						<h3>Editamos el archivo detail.html</h3>
						<p>Agregar algo simple. Y levantamos la página en el navegador con cualquier número. http://localhost:8000/2004210126/</p>
						<pre>
							<code data-trim contenteditable>
								¡Hola España!
							</code>
						</pre>
					</section>

					<section>
						<h3>Buscamos el incendio</h3>
						<p>Conectamos el número en la URL con el número identificador real del incendio en el CSV.</p>
						<p>Editamos app.py y convertimos la lista que tenemos en algo donde el incendio sea fácilmente buscable por identificador</p>
						<pre>
							<code contenteditable>
								csv_path = './static/incendios.csv'
								csv_obj = csv.DictReader(open(csv_path, 'r'))
								csv_list = list(csv_obj)
								csv_dict = dict([[o['IDPIF'], o] for o in csv_list])
							</code>
						</pre>
					</section>

					<section>
						<h3>Editamos la función detail en app.py</h3>
						<p>para que conecte el número en la URL con el registro correspondiente.</p>
						<pre>
							<code contenteditable>
								@app.route('/<number>/')
								def detail(number):
								    return render_template('detail.html',
								        object=csv_dict[number],
								    )
							</code>
						</pre>
					</section>

					<section>
						<h3>Volver a editar detail.html</h3>
						<p></p>
<xmp>
		<!doctype html>
		<html lang="es">
		    <head>
					<meta name="Incendios en España"  content="text/html;"
					http-equiv="content-type" charset="utf-8">
				</head>
		    <body>
		        <h1>{{ object['COMUNIDAD'].decode('UTF-8') }}</h1>
		    </body>
		</html>
</xmp>
					</section>

					<section>
						<h3>Reiniciar el servidor y refrescar el navegador del incendio</h3>
						<p>http://localhost:8000/2004210126/</p>
						<pre>
							<code data-trim contenteditable>
								$ python app.py
							</code>
						</pre>
					</section>

					<section>
						<h3>Editar index.html para enlazar la página del incendio</h3>
						<p>En la tag table reemplazar la fila de
							<xmp><td>{{ obj['IDPIF'] }}</td></xmp>
								por
						</p>
						<xmp>
							<td><a href="{{ obj['IDPIF'] }}/">{{ obj['IDPIF'] }}</a></td>
						</xmp>
					</section>

					<section>
						<h3>Reiniciar el servidor de pruebas y refrescar el navegador</h3>
						<p>http://localhost:8000</p>
						<pre>
							<code data-trim contenteditable>
								$ python app.py
							</code>
						</pre>
					</section>

					<section>
						<h3>Agregar el resto de los campos del incendio</h3>
						<p>en detail.html</p>
<xmp>
	<body>
	  <h1>Incendio de {{ object['COMUNIDAD'].decode('UTF-8') }}</h1>
	  <p>En la comunidad {{ object['COMUNIDAD'].decode('UTF-8') }},
			provincia {{ object['PROVINCIA'].decode('UTF-8') }},
			comarca {{ object['COMARCA'].decode('UTF-8') }},
			municipio {{ object['MUNICIPIO'].decode('UTF-8') }} se quemó una
			superficie forestal de {{ object['SUPQUEMADA'] }}.
			Hubieron {{ object['MUERTOS'] }} muertos y {{ object['HERIDOS'] }}
			heridos. Se detectó en la fecha {{ object['FECHA'] }}. Se pudo
			controlar en {{ object['TIME_CTRL'] }} minutos y extinguir
			en {{ object['TIME_EXT'] }} minutos. La causa del incendio
			fue {{ object['CAUSA'].decode('UTF-8') }}. En la extinción
			del incendio participaron {{ object['PERSONAL'] }} personas,
			{{ object['PESADOS'] }} vehiculos pesados y {{ object['AEREOS'] }}
			medios aereos.</p>
	</body>
</xmp>
					</section>

					<section>
						<h3>Commitear en GIT</h3>
						<pre>
							<code contenteditable>
								$ git add .
								$ git commit -m "Creamos una página por incendio."
								$ git push origin master
							</code>
						</pre>
					</section>
				</section>

				<section>
					<section>
						<h2>¡Hola Javascript!</h2>
						<p>Ahora vamos a colocar un mapa con los incendios usando una libreria de Javascript llamada Leaflet. Primero hay que importarla en el index.html</p>
<xmp>
  <head>

		<meta name="Incendios en España"  content="text/html;" http-equiv="content-type" charset="utf-8">

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
    <script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js?2"></script>

	</head>
</xmp>
					</section>

					<section>
						<h3>Crear un elemento HTML para el mapa</h3>
						<p>y usar Leaflet para centrarlo en España</p>
						<pre>
							<code contenteditable>
								<body>
									<div id="map" style="width:100%; height:300px;"></div>
									... aca esta la table ...
							    <script type="text/javascript">
							      var map = L.map('map').setView([40.2085,-3.713], 6);
							      var mapquestLayer =
										new L.TileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
							          maxZoom: 18,
							          attribution: 'Data, imagery and map information provided by
												<a href="http://open.mapquest.co.uk" target="_blank">MapQuest</a>,
												<a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>
												and contributors.',
							          subdomains: ['otile1','otile2','otile3','otile4']
							      });
							      map.addLayer(mapquestLayer);
							    </script>
								</body>
							</code>
						</pre>
					</section>

					<section>
						<h3>Transformar los datos que tenemos en GeoJSON, que lea Leaflet</h3>
						<p>Lo hacemos en el mismo Javascript</p>
						<pre>
							<code contenteditable>
								    <script type="text/javascript">
								      var map = L.map('map').setView([40.2085,-3.713], 6);
								      var mapquestLayer = new L.TileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
								          maxZoom: 18,
								          attribution: 'Data, imagery and map information provided by <a href="http://open.mapquest.co.uk" target="_blank">MapQuest</a>,<a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> and contributors.',
								          subdomains: ['otile1','otile2','otile3','otile4']
								      });
								      map.addLayer(mapquestLayer);

								      var data = {
								        "type": "FeatureCollection",
								        "features": [
								          {% for obj in object_list %}
								          {
								            "type": "Feature",
								            "properties": {
								              "causa": "{{ obj['CAUSA'].decode('UTF-8') }}",
								              "id": "{{ obj['IDPIF'] }}"
								            },
								            "geometry": {
								              "type": "Point",
								              "coordinates": [{{ obj['LONGITUD'] }}, {{ obj['LATITUD'] }}]
								            }
								          }{% if not loop.last %},{% endif %}
								          {% endfor %}
								        ]
								      };
								      var dataLayer = L.geoJson(data);
								      map.addLayer(dataLayer);
								    </script>
							</code>
						</pre>
					</section>

					<section>
						<h3>Agregar una ventanita popup que muestre información de la superficie quemada</h3>
						<p>Sustituir</p>
						<pre>
							<code data-trim contenteditable>
								var dataLayer = L.geoJson(data);
							</code>
						</pre>
						<p>por</p>
						<pre>
							<code data-trim contenteditable>
					      var dataLayer = L.geoJson(data, {
					          onEachFeature: function(feature, layer) {
					              layer.bindPopup(feature.properties.causa);
					          }
					      });
							</code>
						</pre>
					</section>

					<section>
						<h3>Y ahora envolver la superficie por un link al incendio</h3>
						<p>Sustituir lo anterior por</p>
						<pre>
							<code data-trim contenteditable>
								            var dataLayer = L.geoJson(data, {
                onEachFeature: function(feature, layer) {
                    layer.bindPopup(
                        '<a href="' + feature.properties.id + '/">' +
                            feature.properties.causa +
                        '</a>'
                    );
                }
            });
							</code>
						</pre>
					</section>

					<section>
						<h3>Comitear los cambios</h3>
						<p></p>
						<pre>
							<code data-trim contenteditable>
								$ git add .
								$ git commit -m "Agregamos un mapa a la página principal."
								$ git push origin master
							</code>
						</pre>
					</section>

					<section>
						<h3>Editar detail.html</h3>
						<p>para agregar un mapa especifico del incendio.</p>
						<xmp>
							<!doctype html>
							<html lang="es">
							  <head>
							   <meta name="Incendios en España"  content="text/html;" http-equiv="content-type" charset="utf-8">
							   <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
							   <script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js?2"></script>
							  </head>
							  <body>
							      <div id="map" style="width:100%; height:300px;"></div>
							      <h1>Incendio de {{ object['COMUNIDAD'].decode('UTF-8') }}</h1>
							      <p>En la comunidad {{ object['COMUNIDAD'].decode('UTF-8') }}, provincia {{ object['PROVINCIA'].decode('UTF-8') }}, comarca {{ object['COMARCA'].decode('UTF-8') }}, municipio {{ object['MUNICIPIO'].decode('UTF-8') }} se quemó una superficie forestal de {{ object['SUPQUEMADA'] }}. Hubieron {{ object['MUERTOS'] }} muertos y {{ object['HERIDOS'] }} heridos. Se detectó en la fecha {{ object['FECHA'] }}. Se pudo controlar en {{ object['TIME_CTRL'] }} minutos y extinguir en {{ object['TIME_EXT'] }} minutos. La causa del incendio fue {{ object['CAUSA'].decode('UTF-8') }}. En la extinción del incendio participaron {{ object['PERSONAL'] }} personas, {{ object['PESADOS'] }} vehiculos pesados y {{ object['AEREOS'] }} medios aereos.</p>
							      <script type="text/javascript">
							        var map = L.map('map').setView([{{ object['LONGITUD'] }}, {{ object['LATITUD'] }}], 16);
							        var mapquestLayer = new L.TileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
							            maxZoom: 18,
							            attribution: 'Data, imagery and map information provided by <a href="http://open.mapquest.co.uk" target="_blank">MapQuest</a>,<a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> and contributors.',
							            subdomains: ['otile1','otile2','otile3','otile4']
							        });
							        map.addLayer(mapquestLayer);
							        var marker = L.marker([{{ object['LONGITUD'] }}, {{ object['LATITUD'] }}]).addTo(map);
							    </script>
							  </body>
							</html>
						</xmp>
					</section>

					<section>
						<h3>Comitear los cambios</h3>
						<p></p>
						<pre>
							<code data-trim contenteditable>
								$ git add .
								$ git commit -m "Agregamos un mapa a la página de detalle."
								$ git push origin master
							</code>
						</pre>
					</section>
				</section>

				<section>
					<section>
						<h3>¡Hola Internet!</h3>
						<p>Ahora publicaremos nuestra aplicación de datos en Internet. Vamos a usar Frozen Flask, una libreria de Python que crea una página estatica por cada página que hicimos.</p>
						<p>Usar pip para instalar Frosen Flask</p>
						<pre>
							<code data-trim contenteditable>
								$ pip install Frozen-Flask
							</code>
						</pre>
					</section>

					<section>
						<h3>Crear un archivo freeze.py</h3>
						<p></p>
						<pre>
							<code data-trim contenteditable>
								# Mac y Linux:
								$ touch freeze.py
								# Windows:
								$ start notepad++ freeze.py
							</code>
						</pre>
					</section>

					<section>
						<h3>Editar freeze.py</h3>
						<p></p>
						<pre>
							<code data-trim contenteditable>
								from flask_frozen import Freezer
								from app import app
								freezer = Freezer(app)

								if __name__ == '__main__':
								    freezer.freeze()
							</code>
						</pre>
					</section>

					<section>
						<h3>Correrlo desde linea de comandos</h3>
						<p>Esto creara un directorio build con un monton de archivos estaticos.</p>
						<pre>
							<code data-trim contenteditable>
								$ python freeze.py
							</code>
						</pre>
					</section>


					<section>
						<h3>Usar el navegador</h3>
						<p>para mirar uno de los archivos generados en build. Lo único que paso a estaticos fueron las páginas de index.html. Tenemos que editar freeze.py para incluir detail.html</p>
						<pre>
							<code data-trim contenteditable>
								from flask_frozen import Freezer
								from app import app, csv_list
								freezer = Freezer(app)

								@freezer.register_generator
								def detail():
								    for row in csv_list:
								        yield {'number': row['IDPIF']}

								if __name__ == '__main__':
								    freezer.freeze()
							</code>
						</pre>
					</section>


					<section>
						<h3>Correrlo desde linea de comandos</h3>
						<p>Ahora se generan muchos más archivos en build.</p>
						<pre>
							<code data-trim contenteditable>
								$ python freeze.py
							</code>
						</pre>
					</section>

					<section>
						<h3>Comiteamos los cambios</h3>
						<p></p>
						<pre>
							<code data-trim contenteditable>
								$ git add .
								$ git commit -m "Congelamos la app"
								$ git push origin master
							</code>
						</pre>
					</section>

					<section>
						<h3>Finalmente publiquemos la app en github-pages</h3>
						<p>Para esto sólo tenemos que crear un branch gh-pages en nuestro repositorio.</p>
						<pre>
							<code data-trim contenteditable>
								$ git checkout -b gh-pages # Create the new branch
								$ git merge master # Pull in all the code from the master branch
								$ git push origin gh-pages # Push up to GitHub from your new branch
							</code>
						</pre>
					</section>

					<section>
						<h3>Luego de unos minutos tu app estara publicada en</h3>
						<p>http://tunombredeusuario.github.io/mi-app/build/index.html</p>
				</section>

				<section>
					<h3>Tutoriales y Referencias en linea</h3>
					<ol>
						<li>Git y GitHub <a href="http://git-scm.com/book/es/">Pro GIT</a>.</li>
						<li>Esta presentación en <a href="https://github.com/gabelula/first-news-presentacion">mi primera aplicación de datos</a></li>
						<li>La inspiración para este taller</li>
						<li>Flask</li>
						<li>Python y Pip</li>
						<li>Leaflet</li>
						<li>Github Pages</li>
					</ol>
				</section>

				<section>
					<h1>¿Comentarios?</h1>
					<h3>Por @gaba</h3>
				</section>

			</div>

		</div>

		<script src="lib/js/head.min.js"></script>
		<script src="js/reveal.min.js"></script>

		<script>

			// Full list of configuration options available here:
			// https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
				controls: true,
				progress: true,
				center: true,
				history: true,
				keyboard: true,
				touch: true,
				hideAddressBar: true,

				theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
				transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none

				// Parallax scrolling
				// parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg',
				// parallaxBackgroundSize: '2100px 900px',

				// Optional libraries used to extend on reveal.js
				dependencies: [
					{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
					{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
					{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
					{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
				]
			});

		</script>

	</body>
</html>
<commit_msg>Mas detalles para usuarios Windows.<commit_after><!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">

		<title>Crea tu propia aplicación de datos Open Source</title>

		<meta name="description" content="Presentación en español sobre git, github y control de versiones para periodistas o interesados en periodismo de datos.">
		<meta name="author" content="<NAME>">

		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<link rel="stylesheet" href="css/reveal.min.css">
		<link rel="stylesheet" href="css/theme/serif.css" id="theme">

		<!-- For syntax highlighting -->
		<link rel="stylesheet" href="lib/css/zenburn.css">

		<!-- If the query includes 'print-pdf', include the PDF print sheet -->
		<script>
			if( window.location.search.match( /print-pdf/gi ) ) {
				var link = document.createElement( 'link' );
				link.rel = 'stylesheet';
				link.type = 'text/css';
				link.href = 'css/print/pdf.css';
				document.getElementsByTagName( 'head' )[0].appendChild( link );
			}
		</script>

		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
	</head>

	<body>

		<div class="reveal">

			<!-- Any section element inside of this container is displayed as a slide -->
			<div class="slides">

				<section>
					<h1>Aplicación de Datos</h1>
					<h3>¡tú puedes!</h3>
					<p>
						<small>Presentación por <a href="http://gaba.stayover.org">Gabriela "Gaba" Rodriguez</a> / <a href="http://twitter.com/gaba">@gaba</a> / <a href="http://www.opennews.org">Open News Fellow 2014</a></small>
					</p>
				</section>

				<section>
					<h3>¿Qué es una aplicación de noticias?</h3>
					<p>¿Qué vamos a hacer?</p>
					<aside class="notes">
						Una web que muestre la base de datos y un mapa interactivo de incendios en España.
					</aside>
				</section>

				<section>
					<section>
						<h3>Pre-requisitos</h3>
					</section>
					<section>
						<h3>Linea de Comandos</h3>
						<p>En Windows: prompt<p>
						<p>En Linux y Mac: Console y Terminal</p>
					</section>
					<aside class="notes"></aside>
					<section>
						<h3>Editor de Texto</h3>
						<p>Un editor de texto plano. No sirve Word pues agrega formato y otras cosas al texto que no necesitamos. Recomendaciones: notepad, sublime, gedit<p>
					</section>
					<aside class="notes"></aside>
					<section>
						<h3>Git y GitHub</h3>
						<p>En Windows http://windows.github.com</p>
						<p>En Mac http://mac.github.com</p>
            <p>Crear cuenta en http://github.com</p>
					</section>
					<aside class="notes"></aside>
					<section>
						<h3>Python - version 2.7</h3>
            <p>En Windows https://www.python.org/download/windows</p>
						<p>Instrucciones http://docs.python-guide.org/en/latest/starting/install/win/</p>
					</section>
					<aside class="notes"></aside>
					<section>
						<h3>Pip o easy_install</h3>
						<p>un manejador de packetes para python</p>
						<p>Instrucciones para windows: http://docs.python-guide.org/en/latest/starting/install/win/</p>
						<p>En Mac: $ brew install pip</p>
						<p>En Linux: $ apt-get install pip</p>
					</section>
					<aside class="notes"><aside>
					<section>
						<h3>virtualenv</h3>
						<p>manejador de ambientes virtuales</p>
						<p>Instrucciones para windows: http://docs.python-guide.org/en/latest/starting/install/win/</p>
						<p>En Mac: $ pip install virtualenv</p>
					</section>
					<aside class="notes"></aside>
				</section>

				<section>
					<section>
							<h3>Empezando por crear el ambiente</h3>
							<p>
								Abrir la terminal, ir a donde se quiere crear la aplicación y crear un ambiente virtual llamado mi-app.
							</p>
							<pre><code data-trim contenteditable>$ virtualenv mi-app</code></pre>
					</section>
					<aside class="notes">Esto crea un directorio llamado mi-app. Hay que crear el directorio virtual sólo una vez.</aside>

					<section>
						<h3>Activar el ambiente virtual</h3>
						<p>En Mac/Linux</p>
						<pre><code data-trim contenteditable>
							$ cd mi-app
						</code></pre>
						<pre><code data-trim contenteditable>
							$ . bin/activate
						</code></pre>

						<p>En Windows</p>
						<pre><code data-trim contenteditable>
							$ cd Scripts
						</code></pre>
						<pre><code data-trim contenteditable>
							$ activate
						</code></pre>
						<pre><code data-trim contenteditable>
							$ cd ..
						</code></pre>
					</section>
					<aside class="notes"></aside>
				</section>

				<section>
					<section>
						<h3>¡Hola Git! Crear repositorio GIT local</h3>
						<pre><code data-trim contenteditable>
							$ git init repo
						</code></pre>
						<pre><code data-trim contenteditable>
							$ cd repo
						</codE></pre>
					</section>
					<aside class="notes"></aside>

					<section>
						<h3>Enviar el repo a GitHub</h3>
						<p>En Windows, abrir GitHub y publicar repositorio en GitHub..</p>
						<p>En Linux y Mac, crear repositorio en GitHub. Ir a tu directorio local (repo) y agregar el repositorio remoto recien creado.</p>
						<pre><code data-trim contenteditable>git remote add origin https://github.com/mi-usuario-en-github/mi-app-datos.git</code></pre>
					</section>
					<aside class="notes">					</aside>

					<section>
						<h3>Crear tu primer archivo</h3>
						<p>un archivo en blanco README con una extension Markdown</p>
						<p>En Mac o Linux</p>
						<pre><code data-trim contenteditable>$ touch README.md</code></pre>
						<p>En Windows</p>
						<pre><code data-trim contenteditable>$ start notepad++ README.md</code></pre>
					</section>
					<aside class="notes"></aside>

					<section>
						<h3>Abrir README.md en tu editor preferido</h3>
						<p>Escribir algo como</p>
						<pre>
							<code contenteditable>
									Mi primera aplicación de datos
									==============================
							</code>
						</pre>
						<p>Guardarlo.</p>
					</section>
					<aside class="notes"></aside>

					<section>
						<h3>Agregarlo a Git</h3>
						<p></p>
						<pre>
							<code data-trim contenteditable>
								$ git add README.md
							</code>
						</pre>
						<pre>
							<code data-trim contenteditable>
								$ git commit -m "Primer commit"
							</code>
						</pre>
						<pre>
							<code data-trim contenteditable>
								$ git push origin master
							</code>
						</pre>
					</section>
					<aside class="notes"></aside>
				</section>

				<section>
					<section>
						<h3>¡Hola Flask!</h3>
						<p>Usar pip para instalar Flask</p>
						<pre><code data-trim contenteditable>$ pip install Flask</code></pre>
					</section>
					<aside class="notes">Flask es un python microframework que usaremos para hacer la app.</aside>

					<section>
						<h3>Crear archivo app.py</h3>
						<p>para configurar Flask</p>
						<pre>
							<code data-trim contenteditable>
								# Mac y Linux:
								$ touch app.py
							</code>
						</pre>
						<pre><code data-trim contenteditable>
								# Windows:
								$ start notepad++ app.py
							</code>
						</pre>
					</section>
					<aside class="notes"></aside>

					<section>
						<h3>Abrir app.py en un editor</h3>
						<p></p>
						<pre>
							<code contenteditable>
								from flask import Flask
								app = Flask(__name__)
							</code>
						</pre>
					</section>
					<aside class="notes">Aqui estamos importando lo basico de Flask. Este archivo sera el backend de la aplicación.</aside>

					<section>
						<h3>Configurar para hacer la raíz de tu sitio</h3>
						<p>Usaremos un archivo llamado 'index.html' para colocar la información. Tenemos que especificarlo en app.py</p>
						<pre>
							<code contenteditable>
								from flask import Flask
								from flask import render_template
								app = Flask(__name__)

								@app.route("/")
								def index():
								    return render_template('index.html')
							</code>
						</pre>
					</section>
					<aside class="notes"></aside>

					<section>
						<h3>Ir a linea de comandos</h3>
						<p>crear directorio templates en el mismo repositorio en que estamos.</p>
						<pre>
							<code data-trim contenteditable>
								$ mkdir templates
							</code>
						</pre>
					</section>
					<aside class="notes"></aside>

					<section>
						<h3>Crear index.html</h3>
						<p>dentro del directorio templates</p>
						<pre>
							<code data-trim contenteditable>
								# Macs y Linux:
								$ touch templates/index.html
							</code>
						</pre>
						<pre><code data-trim contenteditable>
								# Windows:
								$ start notepad++ templates/index.html
							</code>
						</pre>
					</section>
					<aside class="notes"></aside>

					<section>
						<h3>Volver a editar app.py</h3>
						<p>y agregarle lo siguiente para poder levantar el servidor local de Flask</p>
						<pre>
							<code contenteditable>
								from flask import Flask
								from flask import render_template
								app = Flask(__name__)

								@app.route("/")
								def index():
								    return render_template('index.html')

								if __name__ == '__main__':
								    app.run(
								        host="0.0.0.0",
								        port=8000,
								        use_reloader=True,
								        debug=True,
								    )
							</code>
						</pre>
					</section>

					<section>
						<h3>Correr app.py en la linea de comandos</h3>
						<p>Mirar el resultado en un navegador en http://localhost:8000</p>
						<pre>
							<code data-trim contenteditable>
								$ python app.py
							</code>
						</pre>
					</section>

					<section>
						<h3>Agrega tu trabajo a GIT</h3>
						<p>cancela lo que este corriendo de app.py (CTR-C) en la terminal</p>
						<pre>
							<code data-trim contenteditable>
								$ git add .
							</code>
						</pre>
						<pre>
							<code data-trim contenteditable>
								$ git commit -m "Flask app.py and first template"
							</code>
						</pre>
						<pre>
							<code data-trim contenteditable>
								$ git push origin master
							</code>
						</pre>
					</section>
				</section>

				<section>
					<section>
						<h3>¡Hola HTML!</h3>
						<p>Comenzar nuevamente editando index.html. Reemplazar el contenido por el esqueleto de un archivo HTML</p>
						<pre>

								<xmp>
									<!doctype html>
									<html lang="es">
									    <head></head>
									    <body>
									        <h1>Incendios en España entre 2004 y 2014</h1>
									    </body>
									</html>
								</xmp>

						</pre>
					</section>
					<section>
						<h3>Commitear los cambios al repositorio</h3>
						<p></p>
						<pre>
							<code data-trim contenteditable>
								$ git add templates/index.html
							</code>
						</pre>
						<pre>
							<code data-trim contenteditable>
								$ git commit -m "Real HTML"
							</code>
						</pre>
						<pre>
							<code data-trim contenteditable>
								$ git push origin master
							</code>
						</pre>
					</section>
					<section>
						<h3>Crear directorio para guardar archivos estaticos</h3>
						<p></p>
						<pre>
							<code data-trim contenteditable>
								$ mkdir static
							</code>
						</pre>
					</section>
					<section>
						<h3>Guardar archivo CSV</h3>
						<p>descargarlo desde BLAH BLAH y guardarlo en directorio static. Agregarlo a git</p>
						<pre>
							<code data-trim contenteditable>
								$ git add static
							</code>
						</pre>
						<pre>
							<code data-trim contenteditable>
								$ git commit -m "Agregando fuente de datos CSV"
							</code>
						</pre>
						<pre>
							<code data-trim contenteditable>
								$ git push origin master
							</code>
						</pre>
					</section>
					<section>
						<h3>Abrir app.py en editor de texto</h3>
						<p>Usaremos libreria csv para acceder a nuestros datos</p>
						<pre>
							<code contenteditable>
								import csv
								from flask import Flask
								from flask import render_template
								app = Flask(__name__)

								csv_path = './static/incendio.csv'
								csv_obj = csv.DictReader(open(csv_path, 'r'))
								csv_list = list(csv_obj)

								@app.route("/")
								def index():
								    return render_template('index.html')

								if __name__ == '__main__':
								    app.run(
								        host="0.0.0.0",
								        port=8000,
								        use_reloader=True,
								        debug=True,
								    )

							</code>
						</pre>
					</section>
					<section>
						<h3>Pasarle la lista de datos del csv a index.html</h3>
						<p></p>
						<pre>
							<code contenteditable>
								import csv
								from flask import Flask
								from flask import render_template
								app = Flask(__name__)

								csv_path = './static/la-riots-deaths.csv'
								csv_obj = csv.DictReader(open(csv_path, 'r'))
								csv_list = list(csv_obj)

								@app.route("/")
								def index():
								    return render_template('index.html',
								        object_list=csv_list,
								    )

								if __name__ == '__main__':
								    app.run(
								        host="0.0.0.0",
								        port=8000,
								        use_reloader=True,
								        debug=True,
								    )

							</code>
						</pre>
					</section>
					<section>
						<h3>Guardar app.py y editar index.html</h3>
						<p>Colocar la lista del csv en el index.html</p>
						<pre>
								<xmp>
									<!doctype html>
									<html lang="es">
											<head></head>
											<body>
													<h1>Incendios en España entre 2004 y 2014</h1>
													{{ object_list }}
											</body>
									</html>
								</xmp>
						</pre>
						<p>En linea de comandos correr app.py y visitar http://localhost:8000 nuevamente</p>
					</section>
					<section>
						<h3>Vamos a darle formato a los datos en index.html</h3>
						<p>Estamos usando el lenguaje de templating jinja de Flask</p>
<xmp>
	<!doctype html>
	<html lang="es">
	    <head></head>
	    <body>
	        <h1>Incendios en España entre 2004 y 2014</h1>
	        <table border=1 cellpadding=7>
	            <tr>
	                <th>Comunidad</th>
	            </tr>
	        {% for obj in object_list %}
	            <tr>
	                <td>{{ obj['COMUNIDAD'].decode('UTF-8') }}</td>
	            </tr>
	        {% endfor %}
	        </table>
	    </body>
	</html>
</xmp>
					</section>
					<section>
						<h3>Refrescar el navegador con nuestra aplicación</h3>
						<p>Colocaremos más datos en la table.</p>
						<xmp>
								    <table border=1 cellpadding=7>
							        <tr>
							            <th>Superficie Forestal Quemada</th>
							            <th>Fecha</th>
							            <th>Muertos</th>
							            <th>Heridos</th>
							            <th>Comunidad</th>
							            <th>Provincia</th>
							            <th>Comarca</th>
							            <th>Causa</th>
							            <th>Perdidas</th>
							        </tr>
							    {% for obj in object_list %}
							        <tr>
							            <td>{{ obj['SUPQUEMADA'] }}</td>
							            <td>{{ obj['FECHA'] }}</td>
							            <td>{{ obj['MUERTOS'] }}</td>
							            <td>{{ obj['HERIDOS'] }}</td>
							            <td>{{ obj['COMUNIDAD'].decode('UTF-8') }}</td>
							            <td>{{ obj['PROVINCIA'].decode('UTF-8') }}</td>
							            <td>{{ obj['COMARCA'].decode('UTF-8') }}</td>
							            <td>{{ obj['CAUSA'].decode('UTF-8')  }}</td>
							            <td>{{ obj['PERDIDAS'] }}</td>
							        </tr>
							    {% endfor %}
							    </table>
						</xmp>
					</section>
					<section>
						<h3>Refrescar el navegador</h3>
						<p>y luego commitear tu trabajo</p>
						<pre>
							<code contenteditable>
								$ git add .
								$ git commit -m "Creamos tabla de datos"
								$ git push origin master
							</code>
						</pre>
					</section>
				</section>

				<section>
					<section>
						<h3>Agreguemos página de detalles por incendio</h3>
						<p>Agregamos una nueva ruta en app.py</p>
						<pre>
							<code contenteditable>
								import csv
								from flask import Flask
								from flask import render_template
								app = Flask(__name__)

								...

								@app.route("/")
								def index():
								    return render_template('index.html',
								                           object_list=csv_list
								                          )

								@app.route('/<number>/')
								def detail(number):
								    return render_template('detail.html')

								if __name__ == '__main__':
								  ...

							</code>
						</pre>
					</section>

					<section>
						<h3>Agreguemos el template detail.html</h3>
						<p></p>
						<pre>
							<code data-trim contenteditable>
								# Macs y Linux:
								$ touch templates/detail.html
							</code>
						</pre>
						<pre>
							<code data-trim contenteditable>
								# Windows:
								$ start notepad++ templates/detail.html
							</code>
						</pre>
					</section>

					<section>
						<h3>Editamos el archivo detail.html</h3>
						<p>Agregar algo simple. Y levantamos la página en el navegador con cualquier número. http://localhost:8000/2004210126/</p>
						<pre>
							<code data-trim contenteditable>
								¡Hola España!
							</code>
						</pre>
					</section>

					<section>
						<h3>Buscamos el incendio</h3>
						<p>Conectamos el número en la URL con el número identificador real del incendio en el CSV.</p>
						<p>Editamos app.py y convertimos la lista que tenemos en algo donde el incendio sea fácilmente buscable por identificador</p>
						<pre>
							<code contenteditable>
								csv_path = './static/incendios.csv'
								csv_obj = csv.DictReader(open(csv_path, 'r'))
								csv_list = list(csv_obj)
								csv_dict = dict([[o['IDPIF'], o] for o in csv_list])
							</code>
						</pre>
					</section>

					<section>
						<h3>Editamos la función detail en app.py</h3>
						<p>para que conecte el número en la URL con el registro correspondiente.</p>
						<pre>
							<code contenteditable>
								@app.route('/<number>/')
								def detail(number):
								    return render_template('detail.html',
								        object=csv_dict[number],
								    )
							</code>
						</pre>
					</section>

					<section>
						<h3>Volver a editar detail.html</h3>
						<p></p>
<xmp>
		<!doctype html>
		<html lang="es">
		    <head>
					<meta name="Incendios en España"  content="text/html;"
					http-equiv="content-type" charset="utf-8">
				</head>
		    <body>
		        <h1>{{ object['COMUNIDAD'].decode('UTF-8') }}</h1>
		    </body>
		</html>
</xmp>
					</section>

					<section>
						<h3>Reiniciar el servidor y refrescar el navegador del incendio</h3>
						<p>http://localhost:8000/2004210126/</p>
						<pre>
							<code data-trim contenteditable>
								$ python app.py
							</code>
						</pre>
					</section>

					<section>
						<h3>Editar index.html para enlazar la página del incendio</h3>
						<p>En la tag table reemplazar la fila de
							<xmp><td>{{ obj['IDPIF'] }}</td></xmp>
								por
						</p>
						<xmp>
							<td><a href="{{ obj['IDPIF'] }}/">{{ obj['IDPIF'] }}</a></td>
						</xmp>
					</section>

					<section>
						<h3>Reiniciar el servidor de pruebas y refrescar el navegador</h3>
						<p>http://localhost:8000</p>
						<pre>
							<code data-trim contenteditable>
								$ python app.py
							</code>
						</pre>
					</section>

					<section>
						<h3>Agregar el resto de los campos del incendio</h3>
						<p>en detail.html</p>
<xmp>
	<body>
	  <h1>Incendio de {{ object['COMUNIDAD'].decode('UTF-8') }}</h1>
	  <p>En la comunidad {{ object['COMUNIDAD'].decode('UTF-8') }},
			provincia {{ object['PROVINCIA'].decode('UTF-8') }},
			comarca {{ object['COMARCA'].decode('UTF-8') }},
			municipio {{ object['MUNICIPIO'].decode('UTF-8') }} se quemó una
			superficie forestal de {{ object['SUPQUEMADA'] }}.
			Hubieron {{ object['MUERTOS'] }} muertos y {{ object['HERIDOS'] }}
			heridos. Se detectó en la fecha {{ object['FECHA'] }}. Se pudo
			controlar en {{ object['TIME_CTRL'] }} minutos y extinguir
			en {{ object['TIME_EXT'] }} minutos. La causa del incendio
			fue {{ object['CAUSA'].decode('UTF-8') }}. En la extinción
			del incendio participaron {{ object['PERSONAL'] }} personas,
			{{ object['PESADOS'] }} vehiculos pesados y {{ object['AEREOS'] }}
			medios aereos.</p>
	</body>
</xmp>
					</section>

					<section>
						<h3>Commitear en GIT</h3>
						<pre>
							<code contenteditable>
								$ git add .
								$ git commit -m "Creamos una página por incendio."
								$ git push origin master
							</code>
						</pre>
					</section>
				</section>

				<section>
					<section>
						<h2>¡Hola Javascript!</h2>
						<p>Ahora vamos a colocar un mapa con los incendios usando una libreria de Javascript llamada Leaflet. Primero hay que importarla en el index.html</p>
<xmp>
  <head>

		<meta name="Incendios en España"  content="text/html;" http-equiv="content-type" charset="utf-8">

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
    <script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js?2"></script>

	</head>
</xmp>
					</section>

					<section>
						<h3>Crear un elemento HTML para el mapa</h3>
						<p>y usar Leaflet para centrarlo en España</p>
						<pre>
							<code contenteditable>
								<body>
									<div id="map" style="width:100%; height:300px;"></div>
									... aca esta la table ...
							    <script type="text/javascript">
							      var map = L.map('map').setView([40.2085,-3.713], 6);
							      var mapquestLayer =
										new L.TileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
							          maxZoom: 18,
							          attribution: 'Data, imagery and map information provided by
												<a href="http://open.mapquest.co.uk" target="_blank">MapQuest</a>,
												<a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>
												and contributors.',
							          subdomains: ['otile1','otile2','otile3','otile4']
							      });
							      map.addLayer(mapquestLayer);
							    </script>
								</body>
							</code>
						</pre>
					</section>

					<section>
						<h3>Transformar los datos que tenemos en GeoJSON, que lea Leaflet</h3>
						<p>Lo hacemos en el mismo Javascript</p>
						<pre>
							<code contenteditable>
								    <script type="text/javascript">
								      var map = L.map('map').setView([40.2085,-3.713], 6);
								      var mapquestLayer = new L.TileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
								          maxZoom: 18,
								          attribution: 'Data, imagery and map information provided by <a href="http://open.mapquest.co.uk" target="_blank">MapQuest</a>,<a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> and contributors.',
								          subdomains: ['otile1','otile2','otile3','otile4']
								      });
								      map.addLayer(mapquestLayer);

								      var data = {
								        "type": "FeatureCollection",
								        "features": [
								          {% for obj in object_list %}
								          {
								            "type": "Feature",
								            "properties": {
								              "causa": "{{ obj['CAUSA'].decode('UTF-8') }}",
								              "id": "{{ obj['IDPIF'] }}"
								            },
								            "geometry": {
								              "type": "Point",
								              "coordinates": [{{ obj['LONGITUD'] }}, {{ obj['LATITUD'] }}]
								            }
								          }{% if not loop.last %},{% endif %}
								          {% endfor %}
								        ]
								      };
								      var dataLayer = L.geoJson(data);
								      map.addLayer(dataLayer);
								    </script>
							</code>
						</pre>
					</section>

					<section>
						<h3>Agregar una ventanita popup que muestre información de la superficie quemada</h3>
						<p>Sustituir</p>
						<pre>
							<code data-trim contenteditable>
								var dataLayer = L.geoJson(data);
							</code>
						</pre>
						<p>por</p>
						<pre>
							<code data-trim contenteditable>
					      var dataLayer = L.geoJson(data, {
					          onEachFeature: function(feature, layer) {
					              layer.bindPopup(feature.properties.causa);
					          }
					      });
							</code>
						</pre>
					</section>

					<section>
						<h3>Y ahora envolver la superficie por un link al incendio</h3>
						<p>Sustituir lo anterior por</p>
						<pre>
							<code data-trim contenteditable>
								            var dataLayer = L.geoJson(data, {
                onEachFeature: function(feature, layer) {
                    layer.bindPopup(
                        '<a href="' + feature.properties.id + '/">' +
                            feature.properties.causa +
                        '</a>'
                    );
                }
            });
							</code>
						</pre>
					</section>

					<section>
						<h3>Comitear los cambios</h3>
						<p></p>
						<pre>
							<code data-trim contenteditable>
								$ git add .
								$ git commit -m "Agregamos un mapa a la página principal."
								$ git push origin master
							</code>
						</pre>
					</section>

					<section>
						<h3>Editar detail.html</h3>
						<p>para agregar un mapa especifico del incendio.</p>
						<xmp>
							<!doctype html>
							<html lang="es">
							  <head>
							   <meta name="Incendios en España"  content="text/html;" http-equiv="content-type" charset="utf-8">
							   <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
							   <script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js?2"></script>
							  </head>
							  <body>
							      <div id="map" style="width:100%; height:300px;"></div>
							      <h1>Incendio de {{ object['COMUNIDAD'].decode('UTF-8') }}</h1>
							      <p>En la comunidad {{ object['COMUNIDAD'].decode('UTF-8') }}, provincia {{ object['PROVINCIA'].decode('UTF-8') }}, comarca {{ object['COMARCA'].decode('UTF-8') }}, municipio {{ object['MUNICIPIO'].decode('UTF-8') }} se quemó una superficie forestal de {{ object['SUPQUEMADA'] }}. Hubieron {{ object['MUERTOS'] }} muertos y {{ object['HERIDOS'] }} heridos. Se detectó en la fecha {{ object['FECHA'] }}. Se pudo controlar en {{ object['TIME_CTRL'] }} minutos y extinguir en {{ object['TIME_EXT'] }} minutos. La causa del incendio fue {{ object['CAUSA'].decode('UTF-8') }}. En la extinción del incendio participaron {{ object['PERSONAL'] }} personas, {{ object['PESADOS'] }} vehiculos pesados y {{ object['AEREOS'] }} medios aereos.</p>
							      <script type="text/javascript">
							        var map = L.map('map').setView([{{ object['LONGITUD'] }}, {{ object['LATITUD'] }}], 16);
							        var mapquestLayer = new L.TileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
							            maxZoom: 18,
							            attribution: 'Data, imagery and map information provided by <a href="http://open.mapquest.co.uk" target="_blank">MapQuest</a>,<a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> and contributors.',
							            subdomains: ['otile1','otile2','otile3','otile4']
							        });
							        map.addLayer(mapquestLayer);
							        var marker = L.marker([{{ object['LONGITUD'] }}, {{ object['LATITUD'] }}]).addTo(map);
							    </script>
							  </body>
							</html>
						</xmp>
					</section>

					<section>
						<h3>Comitear los cambios</h3>
						<p></p>
						<pre>
							<code data-trim contenteditable>
								$ git add .
								$ git commit -m "Agregamos un mapa a la página de detalle."
								$ git push origin master
							</code>
						</pre>
					</section>
				</section>

				<section>
					<section>
						<h3>¡Hola Internet!</h3>
						<p>Ahora publicaremos nuestra aplicación de datos en Internet. Vamos a usar Frozen Flask, una libreria de Python que crea una página estatica por cada página que hicimos.</p>
						<p>Usar pip para instalar Frosen Flask</p>
						<pre>
							<code data-trim contenteditable>
								$ pip install Frozen-Flask
							</code>
						</pre>
					</section>

					<section>
						<h3>Crear un archivo freeze.py</h3>
						<p></p>
						<pre>
							<code data-trim contenteditable>
								# Mac y Linux:
								$ touch freeze.py
								# Windows:
								$ start notepad++ freeze.py
							</code>
						</pre>
					</section>

					<section>
						<h3>Editar freeze.py</h3>
						<p></p>
						<pre>
							<code data-trim contenteditable>
								from flask_frozen import Freezer
								from app import app
								freezer = Freezer(app)

								if __name__ == '__main__':
								    freezer.freeze()
							</code>
						</pre>
					</section>

					<section>
						<h3>Correrlo desde linea de comandos</h3>
						<p>Esto creara un directorio build con un monton de archivos estaticos.</p>
						<pre>
							<code data-trim contenteditable>
								$ python freeze.py
							</code>
						</pre>
					</section>


					<section>
						<h3>Usar el navegador</h3>
						<p>para mirar uno de los archivos generados en build. Lo único que paso a estaticos fueron las páginas de index.html. Tenemos que editar freeze.py para incluir detail.html</p>
						<pre>
							<code data-trim contenteditable>
								from flask_frozen import Freezer
								from app import app, csv_list
								freezer = Freezer(app)

								@freezer.register_generator
								def detail():
								    for row in csv_list:
								        yield {'number': row['IDPIF']}

								if __name__ == '__main__':
								    freezer.freeze()
							</code>
						</pre>
					</section>


					<section>
						<h3>Correrlo desde linea de comandos</h3>
						<p>Ahora se generan muchos más archivos en build.</p>
						<pre>
							<code data-trim contenteditable>
								$ python freeze.py
							</code>
						</pre>
					</section>

					<section>
						<h3>Comiteamos los cambios</h3>
						<p></p>
						<pre>
							<code data-trim contenteditable>
								$ git add .
								$ git commit -m "Congelamos la app"
								$ git push origin master
							</code>
						</pre>
					</section>

					<section>
						<h3>Finalmente publiquemos la app en github-pages</h3>
						<p>Para esto sólo tenemos que crear un branch gh-pages en nuestro repositorio.</p>
						<pre>
							<code data-trim contenteditable>
								$ git checkout -b gh-pages # Create the new branch
								$ git merge master # Pull in all the code from the master branch
								$ git push origin gh-pages # Push up to GitHub from your new branch
							</code>
						</pre>
					</section>

					<section>
						<h3>Luego de unos minutos tu app estara publicada en</h3>
						<p>http://tunombredeusuario.github.io/mi-app/build/index.html</p>
				</section>

				<section>
					<h3>Tutoriales y Referencias en linea</h3>
					<ol>
						<li>Git y GitHub <a href="http://git-scm.com/book/es/">Pro GIT</a>.</li>
						<li>Esta presentación en <a href="https://github.com/gabelula/first-news-presentacion">mi primera aplicación de datos</a></li>
						<li>La inspiración para este taller</li>
						<li>Flask</li>
						<li>Python y Pip</li>
						<li>Leaflet</li>
						<li>Github Pages</li>
					</ol>
				</section>

				<section>
					<h1>¿Comentarios?</h1>
					<h3>Por @gaba</h3>
				</section>

			</div>

		</div>

		<script src="lib/js/head.min.js"></script>
		<script src="js/reveal.min.js"></script>

		<script>

			// Full list of configuration options available here:
			// https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
				controls: true,
				progress: true,
				center: true,
				history: true,
				keyboard: true,
				touch: true,
				hideAddressBar: true,

				theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
				transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none

				// Parallax scrolling
				// parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg',
				// parallaxBackgroundSize: '2100px 900px',

				// Optional libraries used to extend on reveal.js
				dependencies: [
					{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
					{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
					{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
					{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
				]
			});

		</script>

	</body>
</html>

{'fraction_non_alphanumeric': 0.14863955245089974, 'fraction_numerical': 0.010979312820666238, 'mean_word_length': 1.9405762040906092, 'pattern_counts': {'":': 18, '<': 1945, '<?xml version=': 0, '>': 1945, 'https://': 12, 'lorem ipsum': 0, 'www.': 12, 'xml': 0}, 'pii_count': 6, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5152869', 'n_tokens_mistral': 32592, 'n_tokens_neox': 21911, 'n_words': 5250}