1
00:00:26,219 --> 00:00:35,140
Hola, chicos. En este videotutorial se va a crear una página web, como ejemplo de las diferentes capacidades que permite el uso de GitHub.

2
00:00:35,659 --> 00:00:40,600
Se va a ir introduciendo todos los elementos necesarios para construir la página web.

3
00:00:41,039 --> 00:00:46,880
Y luego se verá cómo GitHub tiene su propio servidor de páginas web para su publicación y difusión.

4
00:00:47,439 --> 00:00:52,359
En la creación de la página web de ejemplo, se utilizará el editor que incluye GitHub.

5
00:00:52,359 --> 00:00:58,979
Luego, según se va construyendo, poco a poco, la página se va a ir introduciendo toda la

6
00:00:58,979 --> 00:01:03,399
información necesaria, es decir, texto e imágenes.

7
00:01:03,399 --> 00:01:07,799
En este proceso de construcción, se va a organizar esta información para que tenga

8
00:01:07,799 --> 00:01:10,239
un aspecto apropiado e interesante.

9
00:01:10,239 --> 00:01:15,540
Y finalmente, cada vez que se haga un cambio en la página, se va a ir probando la publicación

10
00:01:15,540 --> 00:01:28,200
y ver el resultado, tal como lo ve cualquier persona que llegue a esta web.

11
00:01:28,200 --> 00:01:35,819
Hay que recordar que se parte del videotutorial GitHub 2 y, por tanto, estamos situados en el editor de páginas web.

12
00:01:36,319 --> 00:01:42,680
También hay que recordar que ya se tenía el primer archivo o la primera página web de ejemplo, el index.gdml.

13
00:01:43,280 --> 00:01:48,859
Aquí se tiene que empezar a colocar todas las etiquetas y atributos que van a definir la página web.

14
00:01:48,859 --> 00:01:56,219
Se recuerda que para la creación de cualquier página web es necesario el empleo de etiquetas o lenguaje de etiquetas.

15
00:02:05,269 --> 00:02:10,270
Bien, en la creación de cualquier página web, siempre debe tener este esqueleto.

16
00:02:12,370 --> 00:02:21,229
Siempre debe tener la etiqueta HTML y la etiqueta con la barra diagonal HTML, que es la que va a indicar siempre que es un documento de página web.

17
00:02:24,259 --> 00:02:33,759
Como todo documento HTML, debe tener una cabecera, indicada con la etiqueta title y finalización de cabecera con la etiqueta barra diagonal title.

18
00:02:34,259 --> 00:02:36,000
¿Dónde va el nombre de la página?

19
00:02:36,139 --> 00:02:41,960
En la parte del cuerpo, tiene la etiqueta BODY y la etiqueta barra diagonal BODY.

20
00:02:42,580 --> 00:02:46,460
Estas etiquetas componen el esqueleto de cualquier página web.

21
00:02:47,060 --> 00:02:52,860
Bien, una vez introducida toda esta información, se cliquea aquí, al control de código.

22
00:02:53,560 --> 00:02:59,060
Se va a hacer la primera actualización, y en esta caja se escribe el nombre de la actualización.

23
00:02:59,659 --> 00:03:00,500
Prueba 00.

24
00:03:01,439 --> 00:03:04,159
Se cliquea en el botón Confirmar y Enviar cambios.

25
00:03:04,780 --> 00:03:08,419
Estos cambios se envían al servidor de páginas web que tiene GitHub.

26
00:03:16,430 --> 00:03:19,710
Ahora se va a realizar ya el primer cambio en el esqueleto.

27
00:03:20,310 --> 00:03:24,849
Se va a escribir nuevas etiquetas para que aparezcan en este ejemplo de página web.

28
00:03:25,349 --> 00:03:27,370
Y se verán los primeros cambios en ella.

29
00:03:33,280 --> 00:03:37,599
Entre las etiquetas title, se escribe componentes de una computadora.

30
00:03:37,599 --> 00:03:44,400
Y entre las etiquetas body, se escribe componentes de una computadora entre las etiquetas de tamaño de título.

31
00:03:45,139 --> 00:03:46,780
Se cliquea en el control de código.

32
00:03:47,500 --> 00:03:52,639
Se hace la segunda actualización y en esta caja se escribe el nombre de la actualización.

33
00:03:53,240 --> 00:03:54,039
Prueba 01.

34
00:04:02,490 --> 00:04:06,270
La próxima acción para realizar es abrir una nueva pestaña.

35
00:04:15,479 --> 00:04:19,160
Esta tiene que corresponder al usuario de GitHub que se está empleando.

36
00:04:23,100 --> 00:04:24,839
Se va a ir aquí y se cliquea Acción.

37
00:04:28,449 --> 00:04:33,269
Ahora aparece una lista de diferentes actualizaciones que se han hecho en esta página.

38
00:04:33,269 --> 00:04:40,149
página. Todas las actualizaciones están todas en verde.

39
00:04:40,149 --> 00:04:48,610
Si presiono aquí en la última actualización, envía a la siguiente pantalla.

40
00:04:48,610 --> 00:04:53,990
Al cliquear en este enlace, abre una pestaña de nombre componentes de una computadora,

41
00:04:53,990 --> 00:05:00,370
que corresponde a la página web creada. En ella, aparece el título Componentes de una

42
00:05:00,370 --> 00:05:11,240
computadora. Bien, ahora se vuelve al editor de la página

43
00:05:11,240 --> 00:05:28,029
web. Se van a hacer algunos cambios en el título de la página web. En el título Componentes de la

44
00:05:28,029 --> 00:05:36,449
computadora, se le posiciona en el centro de la cabecera. Para ello, se posiciona Componentes de

45
00:05:36,449 --> 00:05:57,139
la computadora entre la etiqueta Center y la etiqueta barra diagonal Center. Se cliquea en

46
00:05:57,139 --> 00:06:04,939
el control de código y en esta caja se escribe el nombre de la actualización. Prueba 03. Se

47
00:06:04,939 --> 00:06:11,819
hace la nueva actualización. Se cliquea en el botón azul de confirmar y enviar cambios.

48
00:06:19,410 --> 00:06:31,240
A continuación, se cliquea el botón acción. En el cambio de pantalla, se ve cómo se está

49
00:06:31,240 --> 00:06:38,810
realizando la nueva actualización. Cuando la actualización pase de color amarillo a

50
00:06:38,810 --> 00:06:45,269
verde, significa que ya están los nuevos cambios en el servidor de páginas web. Si

51
00:06:45,269 --> 00:06:58,009
se cliquea en la pestaña, se vería que no hay cambios. Para ver si ha terminado de actualizar,

52
00:06:58,550 --> 00:07:05,850
se cliquea Actualizar página y se comprueba si ha pasado a verde el indicador. Está verde. Ya

53
00:07:05,850 --> 00:07:14,290
está actualizada. Se cliquea en la pestaña de la página. Se cliquea en Actualizar página y se

54
00:07:14,290 --> 00:07:29,839
comprueba que el título aparece centrado en la página. Ahora se vuelve, otra vez, al editor.

55
00:07:30,819 --> 00:07:37,220
Se va a realizar otro cambio en la página.

56
00:07:37,939 --> 00:07:41,459
El cambio a realizar está relacionado con la fuente del título.

57
00:07:42,220 --> 00:07:50,360
Se añade en la etiqueta Font el atributo color igual a blue y la etiqueta barra diagonal Font, y se actualiza como las veces anteriores.

58
00:07:51,180 --> 00:07:58,610
Se cliquea en Acción. Una vez que la actualización está verde, se clique la pestaña.

59
00:07:59,269 --> 00:08:03,709
Se actualiza la página, y se verifica el cambio de color a azul del título.

60
00:08:03,709 --> 00:08:15,180
A continuación, se vuelve al editor para añadir nuevas propiedades a la página index.html.

61
00:08:16,120 --> 00:08:28,839
La propiedad que se va a cambiar es el tipo de fuente.

62
00:08:29,560 --> 00:08:36,059
En la etiqueta Fonts, después del atributo Color igual a Blue, se añade el atributo Face igual a Arial Black.

63
00:08:37,720 --> 00:08:43,860
Se cliquea en el control de código para la nueva actualización, y en esta caja se escribe el nombre de la actualización.

64
00:08:45,139 --> 00:08:46,139
Prueba 05.

65
00:08:47,080 --> 00:08:59,500
Se cliquea el botón azul de Confirmar y Enviar cambios.

66
00:09:00,779 --> 00:09:02,580
Se cliquea en la pestaña.

67
00:09:03,220 --> 00:09:04,259
Se cliquea en Acción.

68
00:09:08,559 --> 00:09:11,940
Se espera a que se envíe los cambios al servidor de páginas web.

69
00:09:14,940 --> 00:09:16,299
Se cliquea Actualizar.

70
00:09:22,250 --> 00:09:23,049
Se cliquea aquí.

71
00:09:25,799 --> 00:09:27,960
Y se comprueba que los cambios se han enviado.

72
00:09:34,009 --> 00:09:35,250
Se cliquea en la pestaña.

73
00:09:35,789 --> 00:09:37,169
Y se actualiza la página.

74
00:09:41,340 --> 00:09:43,320
Ahora se ve el cambio de tipo de letra.

75
00:09:43,320 --> 00:09:47,240
Ha cambiado a Arial Black y se mantiene el color azul.

76
00:09:53,480 --> 00:09:56,000
Se va a añadir otra propiedad a esta página.

77
00:09:56,720 --> 00:09:57,620
Se vuelve al editor.

78
00:09:58,379 --> 00:10:03,679
El cambio que se va a realizar es sustituir el fondo blanco de la página por otro color.

79
00:10:05,259 --> 00:10:07,860
El cambio que se va a hacer en la etiqueta Body.

80
00:10:08,460 --> 00:10:13,419
En la etiqueta se incluye el atributo VGColor igual a almohadilla de F09E.

81
00:10:13,419 --> 00:10:21,100
En cualquier página web, el color puede ser definido mediante un código numérico.

82
00:10:21,799 --> 00:10:24,799
Lo habitual es emplear código numérico hexadecimal.

83
00:10:26,399 --> 00:10:35,139
Para obtener el color deseado y su código numérico, solo tenemos que ir a un buscador de Internet y teclear código de colores en HTML.

84
00:10:36,580 --> 00:10:51,029
Se cliquea en esta opción y se entra en esta web.

85
00:10:53,440 --> 00:10:56,580
Ahora se puede buscar y elegir el color deseado.

86
00:10:57,019 --> 00:11:00,580
realizando los ajustes necesarios en la paleta de colores.

87
00:11:01,860 --> 00:11:06,620
En esta caja, se expresa el código numérico sexagesimal del color elegido

88
00:11:06,620 --> 00:11:10,980
después de todos los ajustes que se han realizado, y se copia.

89
00:11:14,029 --> 00:11:18,549
En este ejemplo de trabajo, se propone el código de AF09E.

90
00:11:20,750 --> 00:11:23,509
Ahora, se cliquea en el control de código.

91
00:11:24,190 --> 00:11:25,830
Se hace la nueva actualización.

92
00:11:25,830 --> 00:11:29,330
y en esta caja se escribe el nombre de la actualización.

93
00:11:29,970 --> 00:11:30,970
Prueba 05.

94
00:11:33,720 --> 00:11:36,799
Se cliquea el botón azul de Confirmar y Enviar cambios.

95
00:11:37,799 --> 00:11:39,659
Se vuelve a cliquear Acción

96
00:11:39,659 --> 00:11:47,139
y se ve cómo se ha vuelto a iniciar el proceso de actualización de los cambios en el servidor de páginas web.

97
00:11:47,779 --> 00:11:51,480
El color verde indica que ya están realizados todos los cambios.

98
00:11:54,980 --> 00:11:56,159
Se cliquea la pestaña

99
00:11:56,159 --> 00:11:58,919
y se actualiza la página.

100
00:11:59,799 --> 00:12:06,379
El resultado es que el fondo ha cambiado de color blanco a color verde claro.

101
00:12:11,320 --> 00:12:16,240
Seguidamente, se va a añadir nuevos elementos con sus correspondientes propiedades.

102
00:12:21,049 --> 00:12:21,950
Se vuelve al editor.

103
00:12:26,029 --> 00:12:28,649
Ahora se va a añadir una imagen debajo del título.

104
00:12:35,190 --> 00:12:43,049
Para poner la imagen en la página, es necesario que esté en el repositorio, al mismo nivel que los archivos que tiene la página web.

105
00:12:43,049 --> 00:13:01,960
Seguidamente, se localiza la imagen que se va a emplear, mediante el explorador de archivos.

106
00:13:01,960 --> 00:13:03,200
Se selecciona.

107
00:13:03,200 --> 00:13:08,299
Se arrastra de la carpeta local al repositorio.

108
00:13:08,299 --> 00:13:12,860
Se ve que ya está copiada en él, porque se puede ver.

109
00:13:12,860 --> 00:13:16,539
A continuación, se cliquea en el control de código.

110
00:13:16,539 --> 00:13:18,379
Se hace la actualización.

111
00:13:18,379 --> 00:13:21,960
Y en esta caja se escribe el nombre de la actualización.

112
00:13:21,960 --> 00:13:26,929
Prueba 07.

113
00:13:26,929 --> 00:13:33,169
Como siempre, se cliquea el botón azul de confirmar y enviar cambios.

114
00:13:33,169 --> 00:13:46,620
Ahora ya se dispone de la imagen para incluir en la página web de este ejemplo.

115
00:13:46,620 --> 00:13:50,919
Ahora se escribe la etiqueta que permite incluir la imagen en la página.

116
00:13:50,919 --> 00:14:00,840
La etiqueta que se va a emplear es simsf="computadora.jpg", con los atributos width="600", height="337",

117
00:14:00,840 --> 00:14:06,639
de ancho y alto respectivamente, medidos en píxeles. Y esta etiqueta está posicionada

118
00:14:06,639 --> 00:14:12,879
en las etiquetas Center y barra diagonal Center. Luego, se cliquea en el control de código.

119
00:14:13,580 --> 00:14:18,460
Se hace la actualización. Y en esta caja se escribe el nombre de la actualización.

120
00:14:19,080 --> 00:14:26,289
Prueba 08. Como siempre, se cliquea el botón azul de confirmar y enviar cambios.

121
00:14:31,870 --> 00:14:33,129
Se cliquea en Acción.

122
00:14:36,980 --> 00:14:40,440
Se verifica el envío de los cambios al servidor de páginas web.

123
00:14:48,080 --> 00:14:48,779
Ya está verde.

124
00:14:49,460 --> 00:14:51,200
Ya se han realizado los cambios.

125
00:14:51,960 --> 00:14:53,139
Se cliquea la pestaña.

126
00:14:53,700 --> 00:14:55,039
Y se actualiza la página.

127
00:14:58,700 --> 00:15:01,220
Aparece la imagen centrada ahí debajo del título.

128
00:15:01,840 --> 00:15:03,039
Con el tamaño deseado.

129
00:15:08,049 --> 00:15:10,049
Ahora se van a añadir nuevos elementos.

130
00:15:10,990 --> 00:15:14,759
Una vez que se regresa al editor.

131
00:15:15,600 --> 00:15:33,090
Un texto de introducción al tema de la página, situado debajo de la imagen.

132
00:15:40,230 --> 00:15:47,950
Este texto tendrá las etiquetas de FAND con los atributos de color igual a green, face igual a areal y size igual a 3,

133
00:15:48,570 --> 00:15:56,769
es decir, letra de color verde, tipo areal y tamaño 3, insertado en las etiquetas de párrafo P y barra oblicua P.

134
00:15:56,769 --> 00:16:09,639
Y para realizar los cambios, se hace, se cliquea en el control de código.

135
00:16:10,139 --> 00:16:15,139
Se hace la actualización, y en esta caja se escribe el nombre de la actualización.

136
00:16:15,759 --> 00:16:16,600
Prueba 09.

137
00:16:25,159 --> 00:16:28,299
Se cliquea el botón azul de Confirmar y enviar cambios.

138
00:16:29,580 --> 00:16:31,519
Se cliquea el botón de Acción.

139
00:16:33,039 --> 00:16:36,179
Se está produciendo el envío de los cambios al servidor web.

140
00:16:41,529 --> 00:16:43,149
Ya se han producido los cambios.

141
00:16:47,840 --> 00:16:50,279
Se cliquea la pestaña y se recarga la página.

142
00:16:57,399 --> 00:17:07,059
Debajo de la imagen, aparece el texto de introducción con las propiedades que se han sugerido para este trabajo, fuente areal, color verde y tamaño 3.

143
00:17:12,359 --> 00:17:21,500
En la siguiente modificación de la página, se introducen nuevos elementos, con una nueva forma de ordenación y presentación de los contenidos.

144
00:17:22,099 --> 00:17:24,660
Para ello, se empleará el concepto de tabla.

145
00:17:28,539 --> 00:17:29,960
Se vuelve a regresar al editor.

146
00:17:30,940 --> 00:17:42,109
En este ejemplo, se va a añadir nueva información.

147
00:17:42,930 --> 00:17:45,609
Se va a añadir nuevas imágenes y texto.

148
00:17:46,289 --> 00:17:52,470
En concreto, dos fotografías y sus textos explicativos relacionados con la temática de la página web.

149
00:17:54,470 --> 00:17:58,890
Para tal fin, se emplea una tabla compuesta de dos filas y dos columnas.

150
00:17:59,529 --> 00:18:03,650
Recordad que la intersección de las filas y las columnas son las celdas,

151
00:18:03,650 --> 00:18:07,809
y en las celdas es donde se va a posicionar las fotografías y los textos.

152
00:18:08,730 --> 00:18:13,589
Lo primero que se va a hacer es cargar las fotografías de la computadora al repositorio.

153
00:18:14,250 --> 00:18:18,650
Se arrastra cada una de ellas de la carpeta de local de la computadora al repositorio

154
00:18:18,650 --> 00:18:29,920
y se comprueba que se han cargado correctamente.

155
00:18:48,069 --> 00:18:50,210
Ya están todas las imágenes necesarias.

156
00:18:53,029 --> 00:18:58,029
Ahora, se añade todas las etiquetas necesarias para crear la estructura de la tabla.

157
00:18:59,970 --> 00:19:02,490
Se escribe las etiquetas de párrafo.

158
00:19:03,109 --> 00:19:04,990
Se escribe las etiquetas de centrado.

159
00:19:05,690 --> 00:19:07,430
Se escribe las etiquetas de tabla.

160
00:19:07,990 --> 00:19:12,250
Tabla y barra diagonal tabla, con el atributo de borde de ancho 2.

161
00:19:13,470 --> 00:19:21,190
En la tabla establecida, entre las etiquetas de tabla, se inserta las etiquetas de la primera fila, TR y barra diagonal TR.

162
00:19:21,509 --> 00:19:28,250
Entre las etiquetas de la fila, se inserta las etiquetas de cada una de las columnas, TD y barra diagonal TD.

163
00:19:28,250 --> 00:19:34,190
y en cada etiqueta de cada columna se insertan las etiquetas de la imagen con sus atributos

164
00:19:34,190 --> 00:19:37,009
o las etiquetas del texto con sus atributos.

165
00:19:37,769 --> 00:19:48,319
Se repite el mismo proceso para la segunda fila.

166
00:20:22,440 --> 00:20:25,200
Seguidamente, se cliquea en el control de código.

167
00:20:25,940 --> 00:20:30,279
Se hace la actualización para que las fotografías se puedan insertar en la página

168
00:20:30,279 --> 00:20:32,700
y se cree la estructura de la tabla.

169
00:20:33,319 --> 00:20:37,339
Y en esta caja se escribe el nombre de la actualización, Prueba 11.

170
00:20:38,700 --> 00:20:42,759
Ahora, se cliquea el botón azul de Confirmar y enviar cambios.

171
00:20:44,400 --> 00:20:46,299
Se cliquea el botón de Acción.

172
00:20:48,000 --> 00:20:51,480
Se espera a que las fotografías y los cambios se envíen al servidor.

173
00:20:52,099 --> 00:20:56,380
Cuando el indicador cambia de color a verde es la señal de que todo está actualizado.

174
00:21:05,859 --> 00:21:09,660
Finalmente, se cliquea sobre la página y se vuelve a recargar.

175
00:21:10,579 --> 00:21:25,549
El resultado es que se visualiza una tabla formada por dos filas y dos columnas.

176
00:21:26,130 --> 00:21:31,630
En la primera columna están las imágenes de los componentes y la segunda los nombres de los componentes.

177
00:21:37,240 --> 00:21:45,319
Y con esto, finaliza el videotutorial del proceso de construcción de la página web en GitHub y el proceso de publicación de la misma.

178
00:21:45,940 --> 00:21:47,119
Espero que os sea útil.

179
00:21:47,740 --> 00:21:48,839
Adiós, chicos.