1
00:00:00,240 --> 00:00:08,019
Para cambiar el contenido de la plantilla voy a utilizar BlueGryphon, aunque podría haber utilizado Brackets o cualquier otro editor.

2
00:00:08,380 --> 00:00:23,339
Me he preparado un documento de texto con el contenido que quiero utilizar y lo que voy a hacer es abrir el documento que he denominado Index, que sería el de inicio.

3
00:00:23,339 --> 00:00:25,859
y desde aquí voy a ir cambiando

4
00:00:25,859 --> 00:00:30,300
pues todo lo que quiera respecto a contenido se refiere

5
00:00:30,300 --> 00:00:32,640
vamos a cambiarle el nombre

6
00:00:32,640 --> 00:00:35,000
a la cabecera

7
00:00:35,000 --> 00:00:37,179
y vamos a ir modificando

8
00:00:37,179 --> 00:00:45,289
vamos a ir modificando pues

9
00:00:45,289 --> 00:00:50,100
el contenido en general

10
00:00:50,100 --> 00:00:59,740
bueno, voy a habilitar la opción

11
00:00:59,740 --> 00:01:01,439
vista dual

12
00:01:01,439 --> 00:01:04,099
para poder ver el código a la vez que

13
00:01:04,099 --> 00:01:07,140
que veo como se va a mostrar en el navegador

14
00:01:07,140 --> 00:01:11,560
vale, ya he cambiado ese encabezado

15
00:01:11,560 --> 00:01:13,140
y voy a copiar

16
00:01:13,140 --> 00:01:25,409
que voy a introducir en forma de párrafo

17
00:01:25,409 --> 00:01:31,900
ahí lo vemos, también podemos modificarlo

18
00:01:31,900 --> 00:01:35,280
desde la vista de diseño

19
00:01:35,280 --> 00:01:45,459
vale, voy a incluir ahora una imagen

20
00:01:45,459 --> 00:01:50,969
y voy a utilizar la vista diseño para hacerlo

21
00:01:50,969 --> 00:01:53,930
entonces voy a localizar la imagen

22
00:01:53,930 --> 00:02:06,090
Dentro de la carpeta de imágenes ya he puesto algunas de las imágenes que voy a utilizar. Voy a seleccionarla. Importantísimo indicar que la URL es relativa a la ubicación de la página.

23
00:02:06,090 --> 00:02:29,969
Ponemos un título y un texto alternativo y aceptamos. La imagen se va a incluir con su tamaño original, en este caso es muy grande y se sale del contenedor en el que la estamos incluyendo.

24
00:02:29,969 --> 00:02:48,009
Vamos a cambiar su tamaño y de momento lo vamos a hacer desde la opción de HTML porque no vamos a tocar los estilos de momento. Vamos a utilizar el atributo width y recordad que vamos a utilizar porcentajes para que las imágenes se ajusten al tamaño de pantalla.

25
00:02:48,009 --> 00:03:10,330
Vale, le he puesto el 80%, a ver que da un salto de línea y no era necesario. Ahí vemos que ahora sí la imagen ocupa un 80% del contenedor en el que se encuentra. La voy a centrar y lo puedo hacer utilizando de nuevo las opciones de diseño y ahí tendríamos ahora mismo parte del contenido ya modificado.

26
00:03:10,330 --> 00:03:13,789
otra cosa que voy a hacer es este párrafo

27
00:03:13,789 --> 00:03:20,409
lo voy a poner con una alineación justificada

28
00:03:20,409 --> 00:03:24,229
que me gusta más, vale, debajo de la imagen

29
00:03:24,229 --> 00:03:28,009
que la vemos aquí, vamos a seguir incluyendo

30
00:03:28,009 --> 00:03:34,159
otro párrafo, lo hago desde la opción de código, he creado

31
00:03:34,159 --> 00:03:38,520
un párrafo y voy a coger el texto que quiero utilizar para ese párrafo

32
00:03:38,520 --> 00:03:41,370
copio

33
00:03:41,370 --> 00:03:50,469
y lo pego, veríamos de nuevo

34
00:03:50,469 --> 00:03:56,389
en la opción de diseño, como aparece

35
00:03:56,389 --> 00:03:58,250
ese nuevo contenido.

36
00:03:58,370 --> 00:04:00,110
No me lo voy a justificar. Ahí veníamos.

37
00:04:01,169 --> 00:04:01,370
Vale.

38
00:04:03,819 --> 00:04:05,159
Voy a seguir creando

39
00:04:05,159 --> 00:04:07,460
contenido dentro de esta página de inicio

40
00:04:07,460 --> 00:04:08,500
y lo que voy a hacer

41
00:04:08,500 --> 00:04:11,439
es crear

42
00:04:11,439 --> 00:04:12,759
unos enlaces.

43
00:04:13,580 --> 00:04:15,759
Vamos a crear un encabezado.

44
00:04:16,779 --> 00:04:17,680
Lo hago desde la vista

45
00:04:17,680 --> 00:04:19,759
de diseño. Lo podría hacer también

46
00:04:19,759 --> 00:04:21,839
desde el código, que se va a

47
00:04:21,839 --> 00:04:22,779
llamar otros datos.

48
00:04:22,779 --> 00:04:43,680
Y aquí vamos a añadir una tabla. Esto no lo habíamos utilizado, pero ya que tenemos BlueGryphon con vista a diseño, pues vamos a usarlo. Voy a añadir una tabla y voy a incluir un contenido en forma de enlace en cada una de las celdas de la tabla.

49
00:04:43,680 --> 00:05:14,230
Entonces vamos a poner un enlace al proyecto educativo del centro, vamos a poner un enlace a las enseñanzas de la ESO y vamos a poner un contenido a las enseñanzas de bachillerato.

50
00:05:21,949 --> 00:05:29,910
Esto van a ser enlaces externos a páginas que ya están elaboradas pero que están fuera de mi sitio web.

51
00:05:29,910 --> 00:06:06,980
Por ejemplo, aquí tenemos el proyecto educativo que se encuentra en esta dirección, entonces vamos a copiar la url para enlazarla, ahí la vemos, en este caso no ponemos que es una url relativa porque es una dirección externa y vamos a decir que lo abra en una ventana nueva.

52
00:06:06,980 --> 00:06:14,920
Haríamos lo mismo con las enseñanzas de la ESO y las enseñanzas de bachillerato

53
00:06:14,920 --> 00:06:20,759
Hemos hecho lo mismo con enseñanzas de la ESO y enseñanzas de bachillerato

54
00:06:20,759 --> 00:06:22,839
Bueno, todavía no vamos a tocar

55
00:06:24,680 --> 00:06:33,759
Todavía no vamos a tocar los estilos, pero de momento voy a centrar en la tabla

56
00:06:33,759 --> 00:06:39,899
Y desde aquí, desde la opción del código, que veo que está poniendo un borde a mi tabla

57
00:06:39,899 --> 00:06:42,279
Se lo voy a quitar, no me gusta el orden de esta tabla.

58
00:06:45,420 --> 00:06:55,800
Podemos comprobar de momento, vamos a guardar y vamos a comprobar cómo está quedando ya desde el navegador.

59
00:06:55,800 --> 00:07:10,360
Vamos a abrir el navegador y podemos comprobar la apariencia que está tomando y vamos comprobando esos enlaces que hemos creado que efectivamente funcionan.

60
00:07:11,459 --> 00:07:35,069
Vale, vamos a continuar editando. Vamos a cambiar el pie de la página y la barra de navegación. Para el pie de la página he preparado también un texto que simplemente voy a copiar y sobre la opción de diseño, por ejemplo, lo voy a pegar.

61
00:07:35,069 --> 00:07:38,050
bien, si me gusta el aspecto

62
00:07:38,050 --> 00:07:39,889
lo mantendríamos aquí

63
00:07:39,889 --> 00:07:43,589
bueno, quedaba bien ese salto de línea

64
00:07:43,589 --> 00:07:46,209
vale, y respecto a la

65
00:07:46,209 --> 00:07:48,129
barra de navegación, aquí lo que voy a

66
00:07:48,129 --> 00:07:50,329
tener que hacer es poner los textos indicando

67
00:07:50,329 --> 00:07:51,910
hacia donde van a navegar

68
00:07:51,910 --> 00:07:53,949
y enlazarlo, crear enlaces

69
00:07:53,949 --> 00:07:56,290
internos a mi sitio web con las diferentes páginas

70
00:07:56,290 --> 00:07:58,949
siempre va a haber

71
00:07:58,949 --> 00:08:01,910
una que se va a llamar inicio

72
00:08:01,910 --> 00:08:03,230
lo voy a cambiar desde la opción de

73
00:08:03,230 --> 00:08:06,120
código

74
00:08:06,120 --> 00:08:10,040
puedo poner mayúsculas

75
00:08:10,040 --> 00:08:15,939
una que se va a llamar

76
00:08:15,939 --> 00:08:18,839
naciones

77
00:08:18,839 --> 00:08:23,660
acordaos que en el boceto habíamos definido las páginas que vamos a utilizar

78
00:08:23,660 --> 00:08:25,540
una que sería la de día

79
00:08:25,540 --> 00:08:29,199
y necesitaría un cuarto enlace

80
00:08:29,199 --> 00:08:32,159
para ello puedo copiar

81
00:08:32,159 --> 00:08:34,039
y pegar

82
00:08:34,039 --> 00:08:36,360
y crear un nuevo

83
00:08:36,360 --> 00:08:39,960
ítem del menú de navegación que sería

84
00:08:39,960 --> 00:08:41,159
luz y color

85
00:08:41,159 --> 00:08:46,960
ya están creados los

86
00:08:46,960 --> 00:08:49,659
cuatro ítems del menú de navegación

87
00:08:49,659 --> 00:08:51,620
pero ahora hay que enlazarlos

88
00:08:51,620 --> 00:08:52,960
con las páginas a las que

89
00:08:52,960 --> 00:08:55,399
a las que apuntan

90
00:08:55,399 --> 00:08:57,340
la página inicio

91
00:08:57,340 --> 00:09:00,980
pues ya sabemos que es el

92
00:09:00,980 --> 00:09:01,980
index.html

93
00:09:01,980 --> 00:09:08,350
conviene utilizar minúsculas

94
00:09:08,350 --> 00:09:10,730
ojo, es sensible a las mayúsculas y a las minúsculas

95
00:09:10,730 --> 00:09:12,429
y no localizaría

96
00:09:12,429 --> 00:09:16,149
el archivo. La página

97
00:09:16,149 --> 00:09:18,929
instalaciones, pues sería instalaciones.html

98
00:09:18,929 --> 00:09:27,710
y así haríamos con galería y con

99
00:09:27,710 --> 00:09:30,830
luz color. También lo podemos hacer desde aquí

100
00:09:30,830 --> 00:09:35,509
doble clic y buscamos

101
00:09:35,509 --> 00:09:39,950
la página sobre la que queremos enlazar, en este caso

102
00:09:39,950 --> 00:09:43,929
galería. Importante de nuevo, url relativa a la

103
00:09:43,929 --> 00:10:06,070
ubicación de la página y aceptaríamos lo mismo con luz y color. Guardamos y comprobamos

104
00:10:06,070 --> 00:10:19,129
el aspecto que tiene la página. Ahora mismo, ahí han aparecido los sitios del menú de

105
00:10:19,129 --> 00:10:26,250
navegación y comprobamos que, bueno, todavía no he modificado las otras páginas, pero

106
00:10:26,250 --> 00:10:30,429
me estarían enlazando a las diferentes páginas

107
00:10:30,429 --> 00:10:34,570
este menú de navegación, tal cual lo voy a copiar y lo voy a pegar

108
00:10:34,570 --> 00:10:36,870
en el resto de documentos HTML

109
00:10:36,870 --> 00:10:43,169
lo mismo voy a hacer con el pie de la página

110
00:10:43,169 --> 00:10:46,250
que va a ser igual en todos los documentos HTML

111
00:10:46,250 --> 00:10:50,690
vamos por ejemplo a hacerlo en el de instalaciones para que veáis a lo que me refiero

112
00:10:50,690 --> 00:10:56,320
voy a abrir el archivo

113
00:10:56,320 --> 00:10:59,860
denominado instalaciones que ahora mismo contiene la plantilla básica

114
00:10:59,860 --> 00:11:04,700
voy a poner la vista dual, tengo ahora aquí los dos archivos abiertos

115
00:11:04,700 --> 00:11:08,960
voy al archivo que he puesto como inicio

116
00:11:08,960 --> 00:11:13,440
y voy a copiar todo lo que es la barra de navegación

117
00:11:13,440 --> 00:11:16,480
control c, copiar, control c, copiar

118
00:11:16,480 --> 00:11:20,690
y se lo voy a cambiar, control v

119
00:11:20,690 --> 00:11:25,450
ahí lo vemos, también cambiaría título

120
00:11:25,450 --> 00:11:37,799
cambiaría el contenido, pero eso lo haríamos después

121
00:11:37,799 --> 00:11:39,960
y vamos a cambiar también

122
00:11:39,960 --> 00:11:44,460
lo que es el footer o el pie de la página

123
00:11:44,460 --> 00:11:49,220
control c para copiar, control c para copiar

124
00:11:49,220 --> 00:11:52,019
y vamos a el footer

125
00:11:52,019 --> 00:11:56,059
control v, ahí está, vale

126
00:11:56,059 --> 00:12:01,240
vamos a guardar, y ahora si vemos la vista

127
00:12:01,240 --> 00:12:10,460
Si vemos en el navegador, ahora comprobaremos que efectivamente si voy a instalaciones, aparece la página de instalaciones, si voy a inicio, vuelve a la página de inicio.

128
00:12:12,179 --> 00:12:21,139
Tendríamos ya la primera página y también tendríamos el menú de navegación y el pie para utilizar en el resto de páginas.

129
00:12:21,139 --> 00:12:27,440
bueno, así crearíamos el contenido de todas nuestras páginas de nuestro sitio

130
00:12:27,440 --> 00:12:30,460
podemos incluir todo lo que hemos ido aprendiendo

131
00:12:30,460 --> 00:12:34,320
vídeo, listas, mapas

132
00:12:34,320 --> 00:12:37,759
bueno, todo lo que queráis incluir