forked from FiliSantillan/git
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
executable file
·1338 lines (1330 loc) · 59.8 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
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="es">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<meta charset="utf-8">
<title>FiliMX: Git & Github</title>
<meta name="author" content="Filiberto Martínez">
<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">
<meta property="og:type" content="website" />
<meta property="og:url" content="http://filimx.io/presentaciones/git" />
<meta property="og:title" content="FiliMX: Git & Github" />
<meta property="og:description" content="Una gran guía para los estudiantes del curso de 'Git & Github' | Platzi | FiliMX" />
<meta property="article:author" content="https://www.facebook.com/379077102274280" />
<meta property="og:image" content="http://filimx.io/presentaciones/git/img/git&github.png" />
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/sky.css" id="theme">
<link rel="stylesheet" href="lib/css/zenburn.css">
<link href='http://fonts.googleapis.com/css?family=Quicksand:300,400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700,300' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="img/git.ico"/>
<!-- 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>
<header class="header">
<!--
<div class="me">
<figure class="comunidad">
<img src="img/yo.png" alt="comunidad mejorando.la">
</figure>
<div class="name">
<strong class="corto"><a href="http://filisantillan.com" target="blank">Fili</a></strong>
<strong class="largo"><a href="http://filisantillan.com" target="blank">Filiberto Santillán</a></strong>
</div>
</div>
<div class="home_init">
<a href="#" class="icon-home"></a>
</div>
<div class="share">
<iframe src="//www.facebook.com/plugins/share_button.php?href=http%3A%2F%2Ffilimx.io%2Fpresentaciones%2Fgit&layout=button" scrolling="no" frameborder="0" style="border:none; overflow:hidden;" allowTransparency="true"></iframe>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://filimx.io/presentaciones/git" data-text="Guía: Git & Github | @SoyPlatzi @FiliMX @mikenieva #filigit #mejorandogit" data-count="none">Tweet</a>
<iframe src="http://ghbtns.com/github-btn.html?user=FiliMXSite&repo=git&type=fork"
allowtransparency="true" frameborder="0" scrolling="0" width="53" height="20"></iframe>
</div>
-->
</header>
<div class="reveal">
<div class="slides">
<section data-background="img/git&github.png">
<h1 class="white">Git & Github</h1>
<p>
</p>
</section>
<section class="idea">
<h2>Como surgió esta idea?</h2>
<p>Esta idea surgió gracias a un <a href="https://twitter.com/ucoatl/status/534440475437330432/photo/1" target="blank">tweet</a> y me dije ¡es una gran idea! ¿Porqué no hacerla más cool y divertida?.</p>
<figure class="dragon">
<img src="img/goku_happy.png" alt="">
</figure>
</section>
<section>
<section class="antes">
<h2>Antes de empezar</h2>
</section>
<section class="antes">
<h3>Entra al curso</h3>
<p>Esta presentación esta pensada y hecha sólo para los estudiantes del curso de <a href="https://cursos.mejorando.la/git-github" target="blank">Git & Github</a> de mejorandola, así que si no eres parte del curso ¿qué esperas?.</p>
<a href="https://cursos.mejorando.la/comprar/mensual/" class="curso_git" target="blank">Cómpralo desde $29 dólares</a>
</section>
<section class="antes">
<h3>Dudas y Comentarios</h3>
<p>Si tienes alguna duda, comentario, error, quieres sugerir algo, quieres algún cambio, o incluso si ves alguna falta de ortografía, manda un mensaje através de las redes sociales ó manda un tweet con el hashtag <a href="https://twitter.com/search?q=%23filigit&src=typd&lang=es" target="blank">#filigit</a>, responderé lo más pronto que pueda.</p>
</section>
</section>
<section class="elige">
<h3>Elige la clase en donde te quedaste ó continua con la presentación.</h3>
<div class="buttons">
<a href="#/5">Clase 1</a>
<a href="#/10">Clase 2</a>
<a href="#/15">Clase 3</a>
<a href="#/18">Clase 4</a>
<a href="#/24">Clase 5</a>
</div>
</section>
<section class="clases" data-background="#4393fa">
<h2>Clase 1</h2>
<h3>Instalación - Conceptos Básicos</h3>
</section>
<section>
<section class="control">
<h2>Control de versiones</h2>
<figure class="f_control">
<img src="img/control.png" alt="sistema de control de versiones dragon ball">
</figure>
</section>
<section class="control">
<h3>Qué es?</h3>
<p>Es la gestión de diversos cambios que se realizan sobre un elemento, registran y guardan cada modificación del proyecto, de igual forma nos solucionan tres problemas del pasado:</p>
<ul>
<li>Proyectos difíciles de gestionar y liderar.</li>
<li>Riesgos a sobrescribir con mi código al avance formal del equipo.</li>
<li>La centralización y poca probabilidad de trabajar remotamente.</li>
</ul>
</section>
</section>
<section>
<section class="arbol">
<h2>Arquitectura del árbol</h2>
</section>
<section class="arbol">
<h3>Working Area</h3>
<div class="working_div">
<figure class="working">
<img src="img/goku_e.gif" alt="goku entrenando">
</figure>
<figure class="working">
<img src="img/goku_e2.gif" alt="goku entrenando">
</figure>
<figure class="working">
<img src="img/goku_e3.gif" alt="goku entrenando">
</figure>
</div>
</section>
<section class="arbol">
<h3>Qué es?</h3>
<p>Aquí es donde editamos y tabajamos con nuestros proyectos, es cuando decidimos abrir el editor de código, preparar una buena taza de café y empezar a hacer magia.</p>
</section>
<section class="arbol">
<h3>Staging Area</h3>
<figure class="staging">
<img src="img/staging.png" alt="staging area dragon ball">
</figure>
</section>
<section class="arbol">
<h3>Qué es?</h3>
<p>Aquí es donde escogemos que archivos están listos para el siguiente commit, de igual manera decidimos que archivos no lo están y no pueden continuar por el momento.</p>
</section>
<section class="arbol">
<h3>Repository</h3>
<figure class="staging">
<img src="img/repo.png" alt="staging area dragon ball">
</figure>
</section>
<section class="arbol">
<h3>Qué es?</h3>
<p>Aquí es el registro de todo nuestro proyecto, ese proyecto por el cual pasaste dos noches sin dormir y tomaste diez tazas de café, pero que sin duda te deja una gran satisfacción al terminar.</p>
</section>
</section>
<section>
<section class="config">
<h2>Configuración</h2>
</section>
<section class="config">
<h3>git --version</h3>
<figure class="f_version">
<img src="img/version.png" alt="git version freezer">
</figure>
</section>
<section class="config">
<h3>Qué es?</h3>
<p>Después de haber instalado git, tenemos que comprobar si todo está bien, así que solo basta con escribir en la consola <strong>git --version</strong> y esto nos dará como resultado, la versión actual que tenemos en nuestro computador.</p>
</section>
<section class="config">
<h3>git config --global user.name "Tu nombre"</h3>
<figure class="f_user_name">
<img src="img/goku_bb.png" alt="git user.name dragon ball">
</figure>
<strong>Kakaroto</strong>
</section>
<section class="config">
<h3>Qué es?</h3>
<p>Al saber que tenemos git y que todo va perfecto, ahora tenemos que definir nuestro nombre de usuario, para eso sirve este comando y es como git sabe quienes somos.</p>
</section>
<section class="config">
<h3>git config --global user.email "Tu correo"</h3>
<figure class="f_user_correo">
<img src="img/no_image.jpg" alt="meme no_image">
</figure>
</section>
<section class="config">
<h3>Qué es?</h3>
<p>Git ya sabe nuestro nombre, pero aún no sabe nuestro correo electrónico y esto es algo necesario para git, con un simple comando le decimos nuestro correo.</p>
</section>
<section class="config">
<h3>git config --global user.ui true"</h3>
<figure class="f_color">
<img src="img/color.png" alt="vegeta color.ui">
</figure>
</section>
<section class="config">
<h3>Qué es?</h3>
<p>Este simple comando lo que hace es darnos una interfaz de colores, te lo recomiendo para que sea más fácil diferenciar algunas cosas de otras.</p>
</section>
<section class="config">
<h3>git config --global --list"</h3>
<figure class="f_list">
<img src="img/list.png" alt="list git">
</figure>
</section>
<section class="config">
<h3>Qué es?</h3>
<p>Por último tenemos este comando que nos dice nuestras configuraciones a nivel global, todo lo que hicimos antes aquí no los muestra.</p>
</section>
<section class="config">
<h3>Extra</h3>
<p>Se usa <strong>--global</strong> para que el cambio o configuración que hacemos sea a nivel global y afecte a todos los usuarios por igual.</p>
<p>Si queremos cambiar el nombre de usuario o correo sólo tenemos que volver a usar el mismo comando pero con el nuevo nombre:</p>
<ul>
<li>git config --global use.name "Nuevo nombre"</li>
<li>git config --global use.email "Nuevo correo"</li>
</ul>
</section>
</section>
<section>
<section class="setenta">
<h2>70% Git</h2>
</section>
<section class="setenta">
<h3>git help</h3>
<figure class="f_help">
<img src="img/help.png" alt="git hep dragon ball">
</figure>
</section>
<section class="setenta">
<h3>Qué es?</h3>
<p>
Es un comando que se utiliza para saber como funciona cada instrucción de git, al igual que da una breve explicacíon de dicha instrucción.
</p>
<p><strong>git --help <em>comando</em>.</strong></p>
</section>
<section class="setenta">
<h3>git init</h3>
<figure class="f_init">
<img src="img/db.png" alt="git hep dragon ball">
</figure>
</section>
<section class="setenta">
<h3>Qué es?</h3>
<p>
Con esté comando le decimos a git que empiece a monitorear todos los cambios que haga en mi carpeta de trabajo, es el <strong>Nivel 1</strong> de nuestro proyecto, es el inicio de una fantástica aventura.
</p>
<p>Si no inicias con <strong>git init</strong> nos dirá que no hay un repositorio de git.</p>
</section>
<section class="setenta">
<h3>git status</h3>
<figure class="f_status">
<img src="img/status.png" alt="git status dragon ball">
</figure>
</section>
<section class="setenta">
<h3>Qué es?</h3>
<p>
Nos muestra el estado en el que se encuentra nuestro proyecto:
</p>
<ul>
<li>Que cambios hay.</li>
<li>Que cambios viejos borraste.</li>
<li>Que es lo que sigue.</li>
</ul>
</section>
<section class="setenta">
<h3>git add</h3>
<figure class="f_add">
<img src="img/add.png" alt="git add dragon ball">
</figure>
</section>
<section class="setenta">
<h3>Qué es?</h3>
<p>
Con este comando decidimos que archivos van a convertirse en commit y que archivos aún no están listos.
</p>
<p>Agregamos todos los archivos.</p>
<p><strong>git add <em>-A</em></strong></p>
<p>Agregamos solo el archivo index.html o el nombre del archivo que usemos.</p>
<p><strong>git add <em>index.html</em></strong></p>
</section>
<section class="setenta">
<h3>git commit -m "mensaje"</h3>
<figure class="f_commit">
<img src="img/commit.png" alt="git commit dragon ball">
</figure>
</section>
<section class="setenta">
<h3>Qué es?</h3>
<p>
Aquí ya estamos en la ultima parte del esquema de árbol y es hacer un commit como tal.
</p>
<p>Ya que hicimos código y decidimos que archivos están listos, solo queda guardar lo que hicimos en un commit es decir el trabajo de hoy está hecho.</p>
<p><strong>git commit -m <em>"hoy pase de estar en ssj3 a ssj4"</em></strong></p>
</section>
<section class="setenta">
<h3>git log</h3>
<figure class="f_log">
<img src="img/log.png" alt="git log dragon ball">
</figure>
</section>
<section class="setenta">
<h3>Qué es?</h3>
<p>
Nos dice como está el repositorio a nivel de commits (Cuantos commits tenemos en el repositorio), quien las hizo, cuando las hizo y básicamente todo.
</p>
</section>
<section class="setenta">
<h3>git log > commits.txt</h3>
<figure class="f_log">
<img src="img/log2.png" alt="git log>commits.txt dragon ball">
</figure>
</section>
<section class="setenta">
<h3>Qué es?</h3>
<p>
Es exactamente lo mismo que <strong>git log</strong> solo que este nos genera un .txt con los commits en la raíz del proyecto.
</p>
</section>
<section class="setenta">
<h3>git checkout</h3>
<figure class="f_checkout">
<img src="img/checkout.png" alt="git checkout dragon ball">
</figure>
</section>
<section class="setenta">
<h3>Qué es?</h3>
<p>
Con este comando viajamos a travez del tiempo, y podemos ir a cualquier commit que tengamos atrás, esto sin afectar a los que hay enfrente.
</p>
<p>Si hacemos un cambio a algún proyecto que tienes atrás, crearás dos mundos paralelos</p>
<p><strong>git checkout <em>commit</em></strong></p>
<p><strong>git checkout <em>master</em></strong></p>
<p><strong><em>Master</em> -> rama principal</strong></p>
</section>
<section class="setenta">
<h3>git reset</h3>
<figure class="f_reset">
<img src="img/reset.png" alt="git reset dragon ball">
</figure>
</section>
<section class="setenta">
<h3>Qué es?</h3>
<p>
Este comando es súper poderoso y ten cuidado con usarlo, hace lo mismo que <strong>git checkout </strong> a diferencia que arrasa con todos los commits que tiene enfrente.
</p>
<p>Tiene tres tipos de ejeción:</p>
</section>
<section class="setenta">
<h3>git reset --soft</h3>
<figure class="f_soft">
<img src="img/soft.gif" alt="git reset --soft dragon ball">
</figure>
<p>Es un reset tranquilo, tu <strong>Working Area</strong> lo deja, no se mete con tú código.</p>
</section>
<section class="setenta">
<h3>git reset --mixed</h3>
<figure class="f_mixed">
<img src="img/mixed.gif" alt="git reset --mixed dragon ball">
</figure>
<p>Este reset es raro y muy poco usado, borra tu <strong>Staging Area</strong> sin tocar tu <strong>Working Area</strong></p>
</section>
<section class="setenta">
<h3>git reset --hard</h3>
<figure class="f_hard">
<img src="img/hard.gif" alt="git reset --hard dragon ball">
</figure>
<p>Este comando lo que dice es <strong>¡Hey quiero borrar todo!</strong> y en efecto eso es lo que hace, inluyendo tu código.</p>
</section>
</section>
<section class="clases" data-background="#4393fa">
<h2>Clase 2</h2>
<h3>Ramas y Fusiones</h3>
<div class="buttons">
<a href="#/5">Clase 1</a>
<a href="#/15">Clase 3</a>
<a href="#/18">Clase 4</a>
<a href="#/24">Clase 5</a>
</div>
</section>
<section>
<section class="ramas">
<h2>Ramas</h2>
</section>
<section class="ramas">
<h3>Qué es?</h3>
<p>Una rama es una línea del tiempo, en la historia de nuestro repositorio, funciona para crear features, arreglar bugs, experimentar, etc. Sin afectar la versión estable.</p>
</section>
<section class="ramas">
<h3>Línea Master</h3>
<figure class="f_master">
<img src="img/master.png" alt="master dragon ball">
</figure>
<p>Esta línea donde empezamos se le conoce como <strong>master</strong>, es la línea principal y estable del proyecto.</p>
</section>
<section class="ramas">
<h3>Creando una rama</h3>
<figure class="f_branch">
<img src="img/new_branch.png" alt="new branch dragon ball">
</figure>
</section>
<section class="ramas">
<p>Tenemos nuestra línea principal master <strong>(Trunks)</strong>, pero digamos que alguien quiere crear una rama para hacer otras cosas llamada experimental <strong>(Goten).</strong></p>
<p>Eso lo podemos lograr con:</p>
<p><strong>git branch <em>nombre de la rama</em></strong></p>
</section>
<section class="ramas">
<p>De ésta forma creamos una nueva línea <strong>(Rama)</strong> en la que nosotros podemos trabajar sin afectar a master</p>
<figure class="f_branchtwo">
<img src="img/new_branch2.png" alt="new branch dragon ball">
</figure>
</section>
<section class="ramas">
<h3>Extra</h3>
<p>Para eliminar una rama se usa el comando:</p>
<p><strong>git branch -d <em>nombre de la rama</em></strong></p>
</section>
</section>
<section>
<section class="head">
<h2>Concepto Head</h2>
</section>
<section class="head">
<h3>Qué es?</h3>
<figure class="f_head">
<img src="img/head.png" alt="git head">
</figure>
<p>Es la forma en que nos movemos de un punto a otro <strong>(commit)</strong>, Nuestro HEAD es el punto en donde nos encontramos.</p>
<figure class="f_head">
<img src="img/head2.png" alt="git head">
</figure>
</section>
</section>
<section>
<section class="fusiones">
<h2>Fusiones</h2>
<figure class="f_gotenks">
<img src="img/gotenks.gif" alt="fusion git gotenks">
</figure>
</section>
<section class="fusiones">
<h3>Qué es?</h3>
<p>Es la creación de un nuevo commit que vincule una de nuestras ramas <strong>(trunks)</strong>, con alguna otra rama <strong>(Goten)</strong>, dando como resultado un nuevo commit <strong>(Gotenks)</strong>.</p>
<fugure class="f_fusion">
<img src="img/fusion.png" alt="">
</fugure>
</section>
<section class="fusiones">
<p>Para hacer una fusión tenemos que seguir 2 pasos:</p>
<ol>
<li>Situarnos en la línea que va a absorber.</li>
<li>Fusionar</li>
</ol>
</section>
<section class="fusiones">
<h3>1. Situarnos en la línea que va a absorber.</h3>
<p>Es la línea que absorbera la rama que nosotros deseamos, en este caso será experimental.</p>
<p>Lo logramos hacer con el comando antes visto <strong>checkout</strong></p>
<p><strong>git checkout <em>nombre de la rama</em></strong></p>
</section>
<section class="fusiones">
<h3>2. Fusionar</h3>
<p>Aquí es cuando nuestra línea que absorbe <strong>(Trunks)</strong> toma a la línea experimental <strong>(Goten)</strong> y nos dá nuestro nuevo commit <strong>(Gotenks).</strong></p>
</section>
<section class="fusiones">
<p>Cuando se hace la fusión nos pueden dar 2 resultados diferentes:</p>
<ul>
<li><strong>Fast-Forward -></strong> Todo lindo y hermoso.</li>
<li><strong>Manual Merge -></strong> Todo feo y horrible.</li>
</ul>
<div class="two_fusion">
<figure class="f_fast_manual">
<img src="img/fast_manual.png" alt="2 fusions gotenks">
</figure>
</div>
</section>
<section class="fusiones">
<h3>Fast-Forward</h3>
<p>Simplemente hará la fusión sin preguntar nada, es cuando los gestores trabajan archivos diferentes al repositorio</p>
<p>Ejemplo:</p>
<ul>
<li>Filiberto Martínez -> index.html</li>
<li>Miguel Nieva -> styles.css</li>
</ul>
</section>
<section class="fusiones">
<h3>Manual Merge</h3>
<p>Es cuando dos desarrolladores o tú trabajan sobre el mismo archivo en la fusión</p>
<ul>
<li>Filiberto Martínez -> index.html</li>
<li>Miguel Nieva -> index.html</li>
</ul>
</section>
</section>
<section>
<section class="log_alias">
<h2>git log & Aliases</h2>
</section>
<section class="log_alias">
<p>En la terminal podemos igual ver como esta avanzando el proyecto, con el comando <strong>git log</strong>, de esta forma visualizaremos de forma simple y sintetizada el dibujo de las ramas.</p>
<p>El comando es:</p>
<strong>git log <em>--oneline --graph --all</em></strong>
</section>
<section class="log_alias">
<p>Sabemos que es un comando largo y da pereza, para eso existen los <strong>aliases</strong> los cuales hacen que no tengamos que escribir todo, es poder poner nuestros comandos git como queramos con el nombre que sea.</p>
<p><strong>git config --global <em>alias.filigit</em> '--oneline --graph --all'</strong></p>
<p>Ahora simplemente para usarlo hacemos lo siguiente:</p>
<p><strong>git log <em>filigit</em></strong></p>
</section>
</section>
<section class="clases" data-background="#4393fa">
<h2>Clase 3</h2>
<h3>Workflows y Colaboración Remota</h3>
<div class="buttons">
<a href="#/5">Clase 1</a>
<a href="#/10">Clase 2</a>
<a href="#/18">Clase 4</a>
<a href="#/24">Clase 5</a>
</div>
</section>
<section>
<section class="github">
<h2>GitHub</h2>
</section>
<section class="github">
<h3>Qué es?</h3>
<p>Github es una comunidad o plataforma donde podemos almacenar nuestros proyectos, utiliza <strong>Git</strong> para su gestión.</p>
<p>Cada vez son más las personas que estan esta gran comunidad, la mayoria de ellas estan por el ámbito web, pero sin duda hay proyectos totalmente distintos.</p>
<p>Github además lleva un historial de tu código, guarda cada nuevo cambio que haces.</p>
</section>
<section class="github">
<h3><strong>Git</strong> no es lo mismo que <strong>Github</strong></h3>
<figure class="f_github">
<img src="img/no_igual.png" alt="github es diferente a git">
</figure>
</section>
<section class="gihub">
<h3>Github se basa en tres áreas</h3>
<ul>
<li><strong>Colaboración: </strong> Gente que pone de su parte y abre sus ideas al mundo, no viven en el mundo de ¡Si lo pongo en Github, me lo roban!</li>
<li><strong>Creación: </strong> Si tienes proyectos, empresas, startups.</li>
<li><strong>Conexión: </strong> Conectas con el mundo profesional y tienes más probabilidades de ser contratado por tu portafolio.</li>
</ul>
</section>
</section>
<section>
<section class="workflows">
<h2>Workflows</h2>
</section>
<section class="workflows">
<h3>Qué es?</h3>
<p>Son flujos de trabajo colaborativos.</p>
<p>Lograr trabajar con varios profesionales sobre el mismo proyecto sin morir en el intento.</p>
<p>Es la manera de como logras integrar todo tu equipo para que se alcance un proyecto completo.</p>
<figure class="f_team">
<img src="img/team.png" alt="team github">
</figure>
</section>
<section class="workflows">
<h3>Exploración: Git Clone</h3>
<figure class="f_clon">
<img src="img/clon.png" alt="cooler clon github">
</figure>
</section>
<section class="workflows">
<p>Cuando clonas proyectos, es cuando no te interesa colaborar, solo quieres ver el proyecto y tenerlo en la computadora</p>
<p>Se basan en dos comandos:</p>
<p><strong>git clone <em>[https]</em></strong></p>
<p><strong>git clone <em>[SSH]</em></strong></p>
</section>
<section class="workflows">
<p>Solo tenemos que ir al proyecto que necesitamos, y justo a la derecha tenemos el https para clonar</p>
<figure class="https">
<img src="img/https.png" alt="https github">
</figure>
</section>
<section class="workflows">
<p>Ya que estamos en la carpeta donde queremos tener el proyecto usamos el comando:</p>
<p><strong>git clone <em>[https]</em></strong></p>
<figure class="git_clone">
<img src="img/git_clone.png" alt="">
</figure>
</section>
<section class="workflows">
<h3>Github Workflows están divididos en tres áreas:</h3>
<ol>
<li>Proyectos propios.</li>
<li>Proyectos propios (Yo + Equipo).</li>
<li>Proyectos con terceros.</li>
</ol>
</section>
<section class="workflows">
<h3>1) Proyectos Propios</h3>
</section>
<section class="workflows">
<p>Somos los dueños, si alguien decide participar nostros decidimos si aceptamos las propuestas o no, y regularmente se usan para guardar proyectos personales.</p>
<figure class="f_propio">
<img src="img/goku.png" alt="">
</figure>
</section>
<section class="workflows">
<p>Empezamos por crear un repositorio Local y Remoto.</p>
<p>Es decir crear un repositorio en nuestra computadora y otro en Github.</p>
<p>Ya que hicimos esto, Github no sabe que existe nuestra computadora, y nuestra computadora no sabe que existe Github.</p>
<p>Es cuando usamos:</p>
<p><strong>git remote</strong></p>
</section>
<section class="workflows">
<p><strong>git remote</strong></p>
<p>Lo que hace es vincular nuestro repositorio local <strong>(Computadora)</strong> con nuestro repositorio remoto <strong>(Github).</strong></p>
<figure class="f_remote">
<img src="img/remote.png" alt="remote github goku">
</figure>
</section>
<section class="workflows">
<p>Ejecutamos el comando:</p>
<p><strong>git remote add origin <em>Repositorio de github</em></strong></p>
<p>De esta forma se vinculan y se conocen.</p>
<p>Para saber nuestros enlaces que hacemos via repositorio:</p>
<p><strong>git remote <em>-v</em></strong></p>
</section>
<section class="workflows">
<p>Finalmente ahora ya que trabajamos, hay que mandar esos cambios al repositorio de github</p>
<p><strong>git push origin <em>master</em></strong></p>
<p><strong><em>master</em></strong> -> Es la rama que mandaremos a github, obviamente podemos poner cualquier rama.</p>
</section>
<section class="workflows">
<h3>2) Proyectos propios (Yo + Equipo)</h3>
</section>
<section class="workflows">
<p>Es lo mismo que el proceso anterior, pero todos los cambios que hagan los colaboradores, podran hacerlos sin preguntar.</p>
<p>Ya no solo eres tú, si no que ya habrá alguien más.</p>
<p>Los colaboradores no piden permiso, suben cambios y se acabo.</p>
<figure class="team_g_v">
<img src="img/g_v.png" alt="team goku and vegeta">
</figure>
</section>
<section class="workflows">
<p>Esto se explica a través de un proceso llamado:</p>
<p><strong>git fetch & git merge</strong></p>
<p>Cuando nosotros generamos un enlace remoto con un repositorio, hay una rama escondida llamada: <strong>origin/master</strong> y lo que haces es espejear el repositorio de github a tú área local.</p>
</section>
<section class="workflows">
<p><strong>git fetch</strong></p>
<p>Lo que hace git fetch es espejear nuestro <strong>repositorio remoto</strong> con nuestro <strong>origin/master</strong> </p>
<figure class="fetch">
<img src="img/fetch.png" alt="git fetch dragon ball">
</figure>
</section>
<section class="workflows">
<p>Entonces para sincronizarnos usamos:</p>
<p><strong>git fetch <em>origin</em></strong></p>
<p>Ahora lo que tenemos en remoto ya esta en la línea <strong>origin/master</strong></p>
</section>
<section class="workflows">
<p>Pero que pasa si yo creo commit totalmente distinto a lo que hay en origin/master ?</p>
<figure class="fetch">
<img src="img/fetch2.png" alt="git fetch dragon ball">
</figure>
</section>
<section class="workflows">
<p><strong>git merge</strong></p>
<p>Ahora que tenemos dos commits totalmente distintos, llego la hora de fusionarlos y así crear un nuevo commit.</p>
<figure class="merge">
<img src="img/merge.png" alt="git merge gogeta">
</figure>
</section>
<section class="workflows">
<p>Para esto solo tenemos que estar en la rama principal y ejecutar:</p>
<p><strong>git merge <em>origin/master</em></strong></p>
</section>
<section class="workflows">
<p><strong>git push</strong></p>
<p>Finalmente ya que tenemos la fusión, ahora lo pasamos al <strong>repositorio remoto</strong></p>
<figure class="push">
<img src="img/push.png" alt="git push gogeta">
</figure>
</section>
<section class="workflows">
<p>Solo usamos el comando visto en el primer workflow.</p>
<p><strong>git push <em>origin master</em></strong></p>
</section>
<section class="workflows">
<h3>3) Proyectos con terceros</h3>
</section>
<section class="workflows">
<p>Nosotros no somos dueños pero queremos participar en el desarrollo.</p>
<p>Todo dentro de un concepto de pull Request (PR).</p>
<p>Este tipo de repositorios trabajan bajo dos esquemas.</p>
<p>Necesitamos conectar dos repositorios porque cuando hacemos un <strong>fork</strong> es posible que ese proyecto se actualize y nosotros avancemos paralelo a otra cosa.</p>
</section>
<section class="workflows">
<p>Una vez hecho el fork ahora conectamos los remotos.</p>
<p>Primero con el repositorio <strong>Fork</strong></p>
<p><strong>git remote add origin <em>[http]</em></strong></p>
<p>Seguimos con el siguiente remoto <strong>(El repositorio original)</strong></p>
<p><strong>git remote add <em>upstream</em></strong></p>
<p>Como vemos ya tenemos los dos remotos:</p>
<figure class="remotos">
<img src="img/remotos.png" alt="">
</figure>
</section>
<section class="workflows">
<p>Ahora tenemos que espejear las dos ramas ocultas del proyecto:</p>
<p><strong>git fetch <em>origin</em></strong></p>
<p><strong>git fetch <em>upstream</em></strong></p>
<p>Esto va a hacer que tomemos los ultimos cambios en:</p>
<ul>
<li>Repositorio Fork</li>
<li>Repositorio Original</li>
</ul>
</section>
<section class="workflows">
<p>Ya que tenemos los últimos cambios, ahora hay que darselos a nuestra rama master y así se actualize junto con los nuestros.</p>
<p><strong>git merge <em>origin/master</em></strong></p>
<p><strong>git merge <em>upstream/master</em></strong></p>
</section>
<section class="workflows">
<p>Ahora ya que tenemos todo en nuestro repositorio local, tenemos que pasarlo a nuestro repositorio remoto <strong>(repositorio fork)</strong> que esta en github.</p>
<p><strong>git push origin <em>master</em></strong></p>
</section>
<section class="workflows">
<h2 class="aviso">importante</h2>
<h3>Desayuna <strong>git fetch</strong></h3>
<h3>Come <strong>git fetch</strong></h3>
<h3>Cena <strong>git fetch</strong></h3>
</section>
</section>
<section class="clases" data-background="#4393fa">
<h2>Clase 4</h2>
<h3>Manual Deployment + Project Management</h3>
<div class="buttons">
<a href="#/5">Clase 1</a>
<a href="#/10">Clase 2</a>
<a href="#/15">Clase 3</a>
<a href="#/24">Clase 5</a>
</div>
</section>
<section>
<section class="deployment">
<h2>Deployment</h2>
</section>
<section class="deployment">
<h3>Qué es?</h3>
<p>Son todas las actividades que hacen a un proyecto de software disponible para su uso, es la manera en que haces publico tus proyectos, la forma en que te mueves y los llevas al mundo.</p>
</section>
</section>
<section>
<section class="ambientes">
<h2>Environments (Ambientes)</h2>
</section>
<section class="ambientes">
<p>Hay cuatro ambientes regularmente en los equipos profesionales web.</p>
<ul>
<li>Development</li>
<li>Production</li>
<li>Testing</li>
<li>Staging</li>
</ul>
</section>
<section class="ambientes">
<h3>Development</h3>
<p>Es nuestra área local (PC, Laptop), es donde creamos código y nos pasamos horas divirtiendonos, siendo mejores profesionales.</p>
<figure class="f_ambientes">
<img src="img/goku_e3.gif" alt="goku entrenando">
</figure>
</section>
<section class="ambientes">
<h3>Production</h3>
<p>Es un repositorio remoto (Online, Web), puede ser en Github o algún otro servidor, es nuestro sitio final, el que le mostramos al mundo.</p>
<figure class="f_ambientes">
<img src="img/ssj.gif" alt="goku ssj">
</figure>
</section>
<section class="ambientes">
<h3>Testing</h3>
<p>Funciona para que nosotros generemos un test, exámenes para encontrar fallos en los códigos.</p>
<figure class="f_ambientes">
<img src="img/testing.gif" alt="gotenks fail">
</figure>
</section>
<section class="ambientes">
<h3>Staging</h3>
<p>Es un servidor extra básicamente, en ves de subir el proyecto a <strong>production</strong> primero pasas por staging y verificamos si todo va bien.</p>
<figure class="f_ambientes">
<img src="img/staging.gif" alt="gotenks fail">
</figure>
</section>
</section>
<section>
<section class="gh-pages">
<h2>Github Pages</h2>
</section>
<section class="gh-pages">
<h3>Qué es?</h3>
<p>Con Github Pages podemos generar un proyecto de nuestro repositorio permitiendonos mostrarlo a travez de un dominio, el unico problema es que no podemos usar backend, pero es muy util para portafolios, blogs y todo tipo de paginas del lado del frontend totalmente gratis</p>
</section>
<section class="gh-pages">
<p>Para ello solo tenemos que crear una nueva rama de nombre <strong>gh-pages</strong> y acoplarlo con nuestro nombre de usuario un ejemplo es esta presentación simplemente ve el url, si quieres saber más de este tema:</p>
<p><a href="https://pages.github.com/" target="blank">Github Pages</a></p>
<p><a href="https://cursos.mejorando.la/cursos/comunidad-mejorandola/concepto/programacion/crea-portafolios-con-github-pages/" target="blank">Portafolios con GitHub Pages</a></p>
<p>Todos los cambios y modificaciones que hagamos en la rama <strong>gh-pages</strong> se aplicaran a la pagina como tal.</p>
</section>
<section class="gh-pages">
<h3>Conectar por SSH</h3>
</section>
<section class="gh-pages">
<p>SSH es una forma segura de conectar con Github.</p>
<p>A diferencia de <strong>HTTP</strong> no pide el usuario y contraseña porque con SSH sabe quien eres tu.</p>
<figure class="f_scouter">
<img src="img/scouter.png" alt="">
</figure>
</section>
<section class="gh-pages">
<p>Primero hay que generar la llave:</p>
<p><strong>$ ssh-keygen</strong></p>
<p>Creara una carpeta <strong>.ssh</strong> oculta, que por lo general se encuentra en el Home.</p>
<p><strong>Nota:</strong> si este comando no te funciona en windows, descarga: <a href="https://github.com/msysgit/msysgit" target="blank">msysgit</a></p>
</section>
<section class="gh-pages">
<p>Nos movemos a esa carpeta, y dentro nos encontramos con dos archivos que nos interesan:</p>
<ul>
<li><strong>id_rsa.pub</strong> -> Llave publica, es la que le entregamos al servidor o a alguna persona.</li>
<li><strong>id_rsa</strong> -> Llave privada, jamas hay que perderla ni compartirla.</li>
</ul>
</section>
<section class="gh-pages">
<p>Para analizarla usamos:</p>
<p><strong>$ cat id_rsa.pub</strong></p>
<p>Esto nos mostrara un código muy raro, lo copiamos absolutamente todo.</p>
<p>Ahora vamos a Github / Settings / SSH keys / Add SSH Key </p>
</section>
<section class="gh-pages">
<p>Nos pedira un título y una llave, el título puede ser el que sea, pero en la llave pondremos lo que copiamos en la terminal.</p>
<p>Por ultimo damos click en Add key</p>
<figure class="key">
<img src="img/add_key.png" alt="">
</figure>
</section>
<section class="gh-pages">
<p>Nos dirijimos al repositorio remoto en github y copiamos el SSH, en la terminal nos dirijimos a nuestro proyecto local, y ejecutamos:</p>
<p><strong>git init</strong></p>
<p>Ahora hay que conectar via SSH con el repositorio remoto</p>
<p><strong>git remote add origin <em>[SSH]</em></strong></p>
</section>
<section class="gh-pages">
<p>Hacemos un git pull <strong>(fetch + merch)</strong> a la rama master</p>
<p><strong>git pull origin <em>master</em></strong></p>
<p>Pero como estamos trabajando con github pages usamos:</p>
<p><strong>git pull origin <em>gh-pages</em></strong></p>
</section>
<section class="gh-pages">
<p>Por ahora no aparece la rama <strong>gh-pages</strong> ya que esta oculta, para empezar a usarla:</p>
<p><strong>git checkout <em>gh-pages</em></strong></p>
</section>
<section class="gh-pages">
<p>Ahora si ya podemos trabajar y hacer el deployment</p>
<p><strong>1) Trabajar en código</strong></p>
<p><strong>2) git status</strong></p>
<p><strong>3) git add <em>-A</em></strong></p>
<p><strong>4) git commit -m <em>"Mensaje"</em></strong></p>
<p><strong>5) git push origin <em>gh-pages</em></strong></p>
</section>
</section>
<section>
<section class="manual">
<h2>Manual Deployment</h2>
</section>
<section class="manual">
<p>Bueno primero tenemos que dejar en claro que remote repository <strong>(Github)</strong> es un servidor, cuando nos conectamos a un servidor este mismo puede conectarse con otro servidor.</p>
<p>Esto se le conoce como infraestructura de servidores.</p>
</section>
<section class="manual">
<figure class="deploy">
<img src="img/deploy.png" alt="">
</figure>
</section>
<section class="manual">
<p>La forma correcta de autenticación es con SSH, esto dice ¿eres tu el propetario de estos tres ambientes?.</p>
<p>Si nosotros tenemos la llave nosotros podemos entrar a todos los candados, es decir los diferentes repositorios o servidores.</p>
<p>Eso basicamente es deployment</p>
</section>
<section class="manual">
<p>Ahora lo que tenemos que hacer es que a ese dominio o aplicación que acabamos de crear generar un repositorio con nuestra amiga la terminal.</p>
<figure class="terminal">
<img src="img/terminal.png" alt="terminal filimx">
</figure>
</section>
<section class="manual">
<p>Entramos remotamente desde la terminal al servidor.</p>
<p><strong>$ ssh [email protected]</strong></p>
<p>Recuerda que la dirección SSH varia segun tu servidor.</p>
<p>Nos dara la dirección para entrar de forma remota, esto igual depende del servidor, pero siempre nos la tiene que dar.</p>
</section>
<section class="manual">
<p>Ponemos nuestra contraseña, puede ser la misma o distinta a key que usamos con github.</p>
<p>Una vez hecho esto, ya estamos conectados de forma remota a travez de SSH</p>
</section>
<section class="manual">
<h3>Qué sigue ?</h3>
<p>Ahora tenemos que conectar la llave SSH que tenemos al servidor pero desde github y que no tenga ningun problema para mandarse información.</p>
<p>Esto lo logramos con:</p>
<p><strong>$ ssh-keygen</strong></p>
<p>Nuevamente nos genera una llave <a href="#/20/6">publica y privada</a></p>
</section>
<section class="manual">
<p>Entramos a la llave publica y nuevamente copiamos el código encriptado.</p>
<p>Para obtener el código recuerda usar:</p>
<p><strong>$ cat id_rsa.pub</strong></p>
<p>Vamos a Github / Settings / SSH keys / Add SSH Key</p>
</section>
<section class="manual">
<p>Nos pedira un título y una llave, el título puede ser el que sea, pero en la llave pondremos lo que copiamos en la terminal (Servidor).</p>
<p>Por ultimo damos click en Add key</p>
<figure class="key">
<img src="img/add_key.png" alt="">
</figure>
</section>
<section class="manual">
<p>¡Bien!, ya generamos una llave publica ahora con el servidor.</p>
<p class="aviso">Recordar que estamos conectados a un servidor externo y no a nuestro PC.</p>
</section>
<section class="deployment">
<p>Empecemos a conectar Github con nuestro servidor, regularmente tenemos comandos de git, en caso de que no tengamos git en el servidor, tenemos dos opciones:</p>
<ol>
<li>Que el proveedor nos los active.</li>
<li>Nosotros los instalemos.</li>
</ol>
</section>
<section class="deployment">
<p>Ahora si podemos empezar a traer el proyecto desde github.</p>
<ol>
<li><strong>git init</strong></li>
<li><strong>git remote add origin [SSH]</strong></li>
<li><strong>git pull origin master</strong></li>
</ol>
</section>
</section>
<section>
<section class="issues">
<h2>Issues</h2>
</section>
<section class="issues">
<p class="aviso">
Mini-bonus por mi
</p>
<p>
Esta es una pequeña ayuda que proporciono, pero básicamente hablare de lo mismo y de forma que tu lo puedas entender.
</p>
</section>
<section class="issues">
<h3>Qué es?</h3>
<p>
Los issues es una forma de dar seguimiento, mejorar o resolver un error de nuestros proyectos.
</p>
<figure class="issues">
<img src="img/issues.png" alt="github issues">
</figure>
</section>
<section class="issues">
<h3>Creando un Issue</h3>
<p>Para crear un issue tenemos que ir a nuestro repositorio en Github / settings y en la parte de <strong>Features</strong> activamos Issues.</p>
<p>Una vez hecho esto en la parte derecha nos saldra un nuevo icono, damos click.</p>
<figure class="issues2">
<img src="img/issues2.png" alt="github issues icon">
</figure>
</section>
<section class="issues">
<p>Ahora damos click en <strong>New Issue</strong>, aquí es donde elegimos un título y una pequeña descripción de lo que se debe de hacer.</p>
<figure class="issue3">
<img src="img/issue3.png" alt="github new issues">
</figure>
</section>
<section class="issues">
<p>En el issue hay una parte que dice <strong>No one is assigned</strong> que básicamente es: <strong>No has asignado el issue a nadie </strong>así que damos click en el engrane y seleccionamos a alguien incluso podemos a nosotros mismos.</p>
<figure class="issue4">
<img src="img/issue4.png" alt="no one is asigned issue">
</figure>
<p>De esta forma la persona que seleccionamos es la que tiene que hacerse cargo de ese issue.</p>
</section>
<section class="issues">
<p>Ya que tenemos todo esto damos click en:</p>
<p><strong>Submit new issue</strong></p>
<p>Ahora esta nuestro issue creado, y podemos hacer aun más...</p>
<figure class="issue5">
<img src="img/issue5.png" alt="issues creates">
</figure>
</section>
<section class="issues">
<p>Si entramos al issue podemos tener conversaciones con el equipo acerca de lo que pasa, poner imagenes o finalmente cerrar el issue porque se resolvio.</p>