-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
460 lines (418 loc) · 19.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GitHub para Periodistas</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="Gabriela Rodriguez">
<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>GitHub para Periodistas</h1>
<h3>¿Control de Versiones?</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>
<h2>VozData en La Nacion</h2>
<p>Como usamos GIT para desarrollar VozData</p>
<a href="http://vozdata.lanacion.org"><img src="images/lanacion.png"></a>
</section>
<section>
<h2>Control de Versiones</h2>
<p>
¿Por qué nos sirve software que maneje versiones?</p><p>Un software que facilite el manejo del historial de revisiones en nuestro proyecto.
</p>
<aside class="notes">
Sistema que registra los cambios realizados a un archivo a lo largo del tiempo. Te ayuda a recuperar archivos perdidos, a ir versiones anteriores del archivo, a encontrar en que momento se introdujo un bug en el software, a unir diferentes versiones de un documento de forma más naturalizada. GIT es un software de control de versiones que se realizo para guardar los cambios al corazón de Linux. Hay otros softwares que se usaban antes como SVN o CVS. Actualmente también se usan Bazaar o Mercurial.
</aside>
</section>
<section>
<section>
<h2>¿Por que Git?</h2>
<p>¿O por que los programadores lo usamos?</p>
</section>
<section>
<h2>Guarda fotos, no diferencias</h2>
<p>Git almacena la información como instantáneas del proyecto a lo largo del tiempo.</p>
<img width="178" height="238" src="images/git_versiones.png" alt="GIT Versiones">
</section>
<aside class="notes">Ayuda a recuperar archivos perdidos. Cada foto de la situación de los archivos es el conjunto de archivos en un momento del tiempo. Esto hace que GIT sea un mini-sistema de archivos con muchas herramientas potentes construidas sobre él.</aside>
<section>
<h2>Funciona localmente</h2>
<p>No necesitamos un servidor para trabajar con GIT</p>
</section>
<aside class="notes">La mayoría de las operaciones en Git sólo necesitan archivos y recursos locales para operar. Se puede ver la historia de cambios en GIT sin ir a ningún servidor remoto. </aside>
<section>
<h2>Integridad</h2>
<p>GIT esta observandolo todo</p>
</section>
<aside class="notes">Es imposible cambiar un archivo sin que GIT lo sepa.</aside>
<section>
<h2>GIT siempre añade información</h2>
<p>Todo es recuperable. Queda huella de todo lo que haces en tu proyecto integrado a GIT</p>
</section>
<aside class="notes">Cuando realizas acciones en Git, casi todas ellas sólo añaden información a la base de datos de Git. Es muy difícil conseguir que el sistema haga algo que no se pueda deshacer, o que de algún modo borre información.</aside>
</section>
<section>
<h2>¿Por que GitHub?</h2>
<p>Un poco de historia...</p>
<ol>
<li>Red social para proyectos de desarrollo de software</li>
<li>Colaboración entre periodistas y programadores</li>
<li>Guarda datos, mapas y código propio</li>
</ol>
</section>
<aside class="notes">Github es una red social, donde tu puedes subir tu repositorio publico o privado (mediante planes de suscripción), puedes enviar modificaciones a repositorios de otra gente, reportar problemas o nuevos requerimientos a otros repositorios, crear organizaciones y mucho más.
Ir a la página de GitHub y explicar un poco la interfase (fork, pull requests, organizations, colaboradores).
</aside>
<section>
<section>
<h3>¿Por que para un periodista?</h3>
<p>
colaboración en articulos, datos, proyectos
</p>
</section>
<aside class="notes">Para periodistas, Github es un lugar donde guardar datos, mapas y código que puedan generar para sus propios proyectos. También es un lugar donde se puede colaborar con otros periodistas y/o programadores.
Porque la programación está llegando a las redacciones.
Porque estan colaborando con programadores.
Porque estan usando internet, datos y la gran cantidad de información disponible en linea.
</aside>
<section>
<h3>VozData en La Nacion</h3>
<ol>
<li>potencio la colaboración entre programadores</li>
<li>llevo control de los nuevos requerimientos y bugs</li>
<li>manejamos prioridad de lo que necesitabamos desarrollar</li>
<li>delegamos trabajo</li>
</ol>
</section>
<aside class="notes">Mostrar proyecto en GitHub</aside>
<section>
<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">
Traducciones, pull requests sobre cambios.
</aside>
<section>
<h2>Publicar tutoriales</h2>
<p>Repositorio de manuales técnicos para periodistas. Como por ejemplo "<a href="https://github.com/ireapps/first-news-app">Como construir tu primera aplicación de noticias</a>"(en ingles) o "<a href="https://github.com/gabelula/github-para-periodistas">GitHub para periodistas</a>".</p>
</section>
<aside class="notes">Pueden "forkear" ese repositorio y hacerle cambios.</aside>
<section>
<h2>Publicar tu página web</h2>
<p>Hosteada en GitHub Pages</p>
</section>
<aside class="notes">GitHub Pages es una facilidad de GitHub en donde cualquiera puede publicar páginas webs en GitHub. Soporta Jekyll que es un generador de páginas estaticas.</aside>
</section>
<section>
<section>
<h2>Conceptos Básicos y Taller Técnico</h2>
<p></p>
</section>
<section>
<h2>Repositorio</h2>
<p>Se le llama al recipiente/directorio en donde estamos guardando todos los archivos del proyecto.</p>
</section>
<aside class="notes">Hay archivos que estan y hay otros que se pueden excluir de guardarlos en el repositorio. Esto se hace incluyendo el nombre del archivo a un archivo .gitignore
Poner ejemplos desde github.
</aside>
<section>
<h2>Clonar</h2>
<p>Copia un repositorio remoto en el disco local.</p>
</section>
<aside class="notes"></aside>
<section>
<h2>Fork</h2>
<p>Es un termino usado en GitHub para crear una copia (en github) de un repositorio de otra persona u organización. Esto se hace para colaborar sobre un proyecto ya existente o usar ese repositorio como base de tu propio proyecto.</p>
</section>
<aside class="notes"></aside>
<section>
<h2>Push y Pull</h2>
<p>Cuando se hacen cambios localmente y se quieren enviar a GitHub (u otro repositorio remoto) se hace "un push" para empujar esos cambios al remoto.</p>
<p>Cuando se quieren traer cambios desde un repositorio remoto se hace "un pull" para tomar los cambios hacia el local.</p>
</section>
<aside class="notes"></aside>
<section>
<h2>Branches</h2>
<p>Branches (vias de tren) permite hacer cambios y experimentar con tu repositorio sin afectar tu proyecto. Se pueden crear diferentes caminos que tu repositorio pueda tomar. Estos caminos se pueden unir en git luego si asi se quiere.</p>
</section>
<aside class="notes"></aside>
<section>
<h2>Pull Request</h2>
<p>Se usa en GitHub para hacer pedidos a un proyecto forkeado de que una los cambios que hiciste en tu repositorio.</p>
</section>
<aside class="notes">Explicar mostrando interface en github.</aside>
<section>
<h2>Los tres estados de tu documento</h2>
<p> Git tiene tres estados principales en los que se puede encontrar tu documento
<ol>
<li>confirmado (committed) - ya esta dentro de la version actual</li>
<li>preparado (staged) - estoy agregandolo a la siguiente version</li>
<li>modificado (modified) - lo estoy modificando</li>
</ol>
</p>
</section>
<aside class="notes">Confirmado significa que los datos están almacenados de manera segura en tu base de datos local.
Modificado significa que has modificado el archivo pero todavía no lo has confirmado a tu base de datos.
Preparado significa que has marcado un archivo modificado en su versión actual para que vaya en tu próxima confirmación.</aside>
<section>
<h2>Las tres secciones principales para un proyecto en GIT</h2>
<ol>
<li>directorio de GIT</li>
<li>área de preparación</li>
<li>directorio de trabajo</li>
</ol>
<img src="images/tres_estados.png" style="float:right;">
</section>
<aside class="notes">Directorio de Git: es donde git almacena los metadatos y la base de datos de objectos del proyecto.
Directorio de trabajo: es la copia de una versión del proyecto. Es la versión que se puede modificar o usar.
Área de preparación: es un archivo que almacena información de lo que va a ir en la próxima confirmación.
Ejemplo con un periodista usando github para colaborar en varios articulos. La version anterior no tiene tildes y el conjunto de cambios que voy a aplicar son agregar tildes.
</aside>
<section>
<h2>Flujo de trabajo</h2>
<ol style="list-style-type: decimal;">
<li>Se modifica archivos en tu directorio de trabajo.</li>
<li>Se añaden los archivos al área de preparación.</li>
<li>Se confirman los cambios, que lo que hace es tomar los archivos del área de preparación y los almacena de forma permanente en el directorio de Git.</li>
</ol>
</section>
<aside class="notes"></aside>
</section>
<section>
<h2>Como instalar Git</h2>
<ol>
<li>En Mac <a href="http://code.google.com/p/git-osx-installer">instalador</a>.</li>
<li>En Windows <a href="http://msysgit.github.com/">instalador</a>.</li>
<li>En Linux mediante manejador de paquetes: apt-get install git.</li>
</ol>
</section>
<section>
<section>
<h2>La linea de comandos</h2>
<p>(parentesis para poder entender el shell de git)</p>
<p>
Software que tiene una pantalla donde se pueden tipear comandos para que la computadora realize diferentes tareas.
</p>
<ol>
<li>En Mac: application Terminal</li>
<li>En Windows: prompt ó cygwin (ó git shell)</li>
<li>En Linux: la consola</li>
</ol>
</section>
<section>
<h2>Algunos comandos</h2>
<p>para tener mejor idea de como movernos en la linea de comandos<p>
<ol>
<li>Ayuda
<pre><code>man comando</code></pre>
<pre><code>help comando</code></pre>
</li>
<li>
Listar Archivos
<pre><code>ls</code></pre>
<pre><code>dir</code></pre>
</li>
<li>
Ver ubicación
<pre><code>pwd</code></pre>
<pre><code>cd</code></pre>
</li>
</ol>
</section>
<section>
<h2>Algunos comandos</h2>
<ol>
<li>Copiar archivos
<pre><code>cp archivo_a_copiar nuevo_archivo</code></pre>
<pre><code>copy archivo_a_copiar nuevo_archivo</code></pre>
</li>
<li>Mover archivos de lugar
<pre><code>mv archivo_a_mover nuevo_lugar</code></pre>
<pre><code>move archivo_a_mover nuevo_lugar</code></pre>
</li>
</ol>
</section>
<section>
<h2>Algunos comandos</h2>
<ol>
<li>Borrar archivos
<pre><code>rm archivo_a_borrar</code></pre>
<pre><code>remove archivo_a_borrar</code></pre>
</li>
<li>Mirar el contenido de archivos de texto
<pre><code>less archivo_a_leer</code></pre>
<pre><code>type archivo_a_leer</code></pre>
</li>
</ol>
</section>
<section>
<h2>En GIT</h2>
<ol>
<li>git clone</li>
<li>git init</li>
<li>git status</li>
<li>git diff</li>
<li>git log</li>
<li>git add archivo_a_agregar_al_repositorio_git</li>
<li>git commit</li>
<li>git push</li>
<li>git pull</li>
<li>git help</li>
</ol>
<a href="github-git-cheat-sheet.pdf">GIT sheet</a>
</section>
</section>
<section>
<section>
<h2>Como configurar GitHub</h2>
<ol>
<li>Crear cuenta en GitHub.</li>
</ol>
</section>
</section>
<section>
<section>
<h2>Como crear un repositorio</h2>
</section>
<section>
<h2>Iniciando uno localmente</h2>
<p>Ir al directorio del proyecto: cd directorio_path</p>
<p>Iniciar GIT: <pre><code data-trim contenteditable>git init</code></pre></p>
<p>Agregar archivos: <pre><code data-trim contenteditable>git add archivos_a_agregar</code></pre></p>
<p>Comitear: <pre><code data-trim contenteditable>git commit -m "Version inicial."</code></pre></p>
</section>
<section>
<h2>Agregandolo a github</h2>
<ol>
<li>Crear repositorio en github.</li>
<li>Agregar el remoto a el repositorio local: <pre><code data-trim contenteditable>git remote add github_url_para_repo</code></pre></li>
<li>Enviar cambios: <pre><code data-trim contenteditable>git push origin master</code></pre></li>
</ol>
</section>
</section>
<section>
<h2>Como clonar uno ya existente</h2>
<p><pre><code data-trim contenteditable>git clone github_url_para_repo</code></pre></p>
</section>
<section>
<h2>Como usar GitHub para colaborar</h2>
<ol>
<li>"Fork" de los repositorios a colaborar.</li>
<li>Crear "issues" de nuevos requerimientos y bugs.</li>
<li>Crear "Pull Requests" con cambios que se pueden colaborar.</li>
<li>Hacer comentarios en "issues" y en documentos del repositorio a colaborar.</li>
<li>Se pueden crear organizaciones donde se tienen diferentes roles y todos en la organización tienen acceso a enviar cambios a los repositorios.</li>
</ol>
</section>
<section>
<section>
<h2>Cómo usar GitHub y GitHub Pages para publicar contenido</h2>
<p>Para tú cuenta ú organización: username.github.io</p>
<p>Para tú repositorio: username.github.io/repositorio</p>
</section>
<section>
<h2>Para tú cuenta</h2>
<ol>
<li>Crear repositorio 'username.github.io' donde username es el nombre de tu cuenta</li>
<li>Clonar localmente</li>
<li>Crear index. $ echo "Hola Mundo!" > index.html</li>
<li>Enviar cambios a github.
<pre><code data-trim contenteditable>git add --all</code></pre>
<pre><code data-trim contenteditable>git commit -m "Commit inicial"</code></pre>
<pre><code data-trim contenteditable>git push</code></pre>
</li>
<li>Ir a http://username.github.io</li>
</ol>
</section>
<section>
<h2>Para tú proyecto</h2>
<ol>
<li>Crear un repositorio para el proyecto.</li>
<li>Ir a settings/seccion github pages en https://github.com y clickear en 'Automatic Page Generator'</li>
<li>Agregar contenido</li>
<li>Elegir un theme y cliquear en el botón 'Publish'</li>
<li>Pronto en username.github.io/repositorio
</ol>
</section>
</section>
<section>
<h2>Tutoriales y Referencias en línea</h2>
<ol>
<li>Libro <a href="http://git-scm.com/book/es/">Pro GIT</a>.</li>
<li>Ayuda de <a href="https://help.github.com/">GitHub</a>(en ingles).</li>
<li>GitHub para <a href="http://readwrite.com/2013/09/30/understanding-github-a-journey-for-beginners-part-1">iniciados</a>(en ingles).</li>
<li>GitHub para <a href="http://dannguyen.github.io/github-for-portfolios/">portfolios</a>(en ingles).</li>
<li>Generador de páginas webs y blogs con <a href="http://jekyllrb.com/">Jekyll</a></li>
<li>Herramienta para <a href="https://github.com/schacon/git-scribe">escribir</a> libros y articulos con GIT. Git-Scribe</li>
<li>Esta presentación en <a href="https://github.com/gabelula/github-para-periodistas-presentacion">GitHub</a></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>