1
00:00:05,299 --> 00:00:21,820
Eso. Mirad, os lo explico aquí. La propia aja de estilos aquí. Te lo cuenta la propia aja de estilos aquí. ¿Veis? ¿Qué pone ahí? ¿Blue? Ahí ponen los colores. Bueno, pues para usarlo tenéis que usar w3-yelcolor, como aquí.

2
00:00:21,820 --> 00:00:38,119
Aquí tiene un ejemplo. A ver, ¿veis? Plus igual a, y entre comillas, W3 guión y el color. Si lo probamos, si lo probamos, emoción de intriga. ¿Veis que ha cambiado el color?

3
00:00:38,119 --> 00:00:40,719
el pie de página

4
00:00:40,719 --> 00:00:42,960
vamos a cambiar el pie de página, vamos a elegir otro color

5
00:00:42,960 --> 00:00:44,859
mira, me gusta el color tierra, ¿dónde está el color?

6
00:00:45,560 --> 00:00:46,880
es sand, en inglés

7
00:00:46,880 --> 00:00:48,780
pues para ponerle color tierra

8
00:00:48,780 --> 00:00:51,060
me voy aquí, me voy al footer

9
00:00:51,060 --> 00:00:52,960
y pongo class

10
00:00:52,960 --> 00:00:54,600
igual a

11
00:00:54,600 --> 00:00:56,140
uw3

12
00:00:56,140 --> 00:00:57,960
sand

13
00:00:57,960 --> 00:01:01,179
¿de acuerdo? lo guardo

14
00:01:01,179 --> 00:01:02,920
me ha faltado una s

15
00:01:02,920 --> 00:01:05,120
class, porque si no, no funciona

16
00:01:05,120 --> 00:01:07,120
voy al

17
00:01:07,120 --> 00:01:07,840
navegador

18
00:01:07,840 --> 00:01:10,540
lo recargo

19
00:01:10,540 --> 00:01:12,900
y veis que lo ha puesto ya en color tierra

20
00:01:12,900 --> 00:01:16,900
para diseñar las páginas web

21
00:01:16,900 --> 00:01:18,099
para diseñar las páginas web

22
00:01:18,099 --> 00:01:20,359
para hacer este tipo de diseños

23
00:01:20,359 --> 00:01:22,760
se usa lo que se llama el diseño en columnas

24
00:01:22,760 --> 00:01:24,939
imaginaos que si éramos copiar

25
00:01:24,939 --> 00:01:27,439
este tipo de diseño

26
00:01:27,439 --> 00:01:28,180
o sea

27
00:01:28,180 --> 00:01:32,579
una información y una barra de la tela

28
00:01:32,579 --> 00:01:33,140
¿vale?

29
00:01:35,170 --> 00:01:36,010
bueno pues

30
00:01:36,010 --> 00:01:39,010
para eso uso otro elemento que se llama el div

31
00:01:39,010 --> 00:01:41,409
div

32
00:01:41,409 --> 00:01:45,180
es un contenedor, sirve simplemente

33
00:01:45,180 --> 00:01:46,700
para contener, si lo

34
00:01:46,700 --> 00:01:51,480
pongo ahora, veis que

35
00:01:51,480 --> 00:01:53,560
bueno, los elementos HTML se pueden anidar

36
00:01:53,560 --> 00:01:55,140
se pueden meter unos dentro de otros

37
00:01:55,140 --> 00:01:57,659
¿vale? eso es importante, de hecho aquí

38
00:01:57,659 --> 00:01:59,560
bueno, aquí ya lo he hecho sin decirlo y arriba

39
00:01:59,560 --> 00:02:01,280
aquí lo he hecho sin decirlo

40
00:02:01,280 --> 00:02:03,519
y arriba también lo he hecho sin decir

41
00:02:03,519 --> 00:02:05,359
¿de acuerdo?

42
00:02:05,760 --> 00:02:07,340
he anidado, ¿no?

43
00:02:07,579 --> 00:02:09,479
pues el div aparentemente no hace nada

44
00:02:09,479 --> 00:02:11,300
sirve para anidar

45
00:02:11,300 --> 00:02:16,259
Si lo pusiéramos tal cual, veríais que es como un P.

46
00:02:18,479 --> 00:02:21,259
Bueno, si lo encargamos, aparentemente no hace nada.

47
00:02:22,159 --> 00:02:26,199
Pero ahora con el div, una vez que ya tengo el contenedor creado,

48
00:02:26,819 --> 00:02:34,520
puedo hacer cosas, por ejemplo, aquí, las tarjetas.

49
00:02:36,039 --> 00:02:39,300
La tarjeta es simplemente un recuadro con sombra.

50
00:02:39,300 --> 00:02:42,240
Y se pone así, w3-car.

51
00:02:42,240 --> 00:02:53,550
Me voy a mi div y pongo class w3-card.

52
00:02:56,949 --> 00:02:59,050
Lo pruebo, a ver cómo va.

53
00:02:59,810 --> 00:03:00,870
Lo pruebo a ver cómo va.

54
00:03:08,210 --> 00:03:08,610
Ahí está.

55
00:03:08,949 --> 00:03:09,449
Lo veis ahí, ¿no?

56
00:03:09,750 --> 00:03:12,669
Que le ha puesto ahí una especie de sombrita.

57
00:03:13,889 --> 00:03:14,870
Ya tengo ahí una tarjeta.

58
00:03:15,090 --> 00:03:16,530
Voy a meter una segunda tarjeta.

59
00:03:18,669 --> 00:03:20,110
Vamos a meter una segunda tarjeta.

60
00:03:20,849 --> 00:03:21,449
Otro div.

61
00:03:29,860 --> 00:03:30,219
Class.

62
00:03:32,120 --> 00:03:35,280
W3Card, ¿de acuerdo?

63
00:03:36,620 --> 00:03:42,360
Bueno, y aquí voy a poner otro contenido, cualquier tontería.

64
00:03:46,659 --> 00:03:47,180
All on it.

65
00:03:49,259 --> 00:03:54,080
Bueno, este texto, Lore Nixon, lo vais a encontrar en muchos sitios.

66
00:03:54,659 --> 00:04:01,340
Tiene un montón de años y lo usaban los antiguos impresores de libros, los que hacían libros, para probar textos.

67
00:04:01,860 --> 00:04:04,960
De vez en cuando en las páginas web os vais a encontrar un Lore Nixon.

68
00:04:04,960 --> 00:04:11,099
Y de hecho hay muchos editores que tú tecleas Lorentz, tabulador, y te suelta el texto del Lorentz Zoom.

69
00:04:11,620 --> 00:04:13,539
Lo que pasa es que este editor no lo tiene activado.

70
00:04:13,919 --> 00:04:16,300
Bueno, pues ahora tengo dos tarjetas. Vamos a verlas.

71
00:04:17,860 --> 00:04:19,819
Pero claro, me pone una continuación de la otra.

72
00:04:20,420 --> 00:04:23,660
Y yo quiero simular este diseño.

73
00:04:24,199 --> 00:04:27,160
¿De acuerdo? Bueno, pues esto es lo que se llama diseño en columnas.

74
00:04:28,680 --> 00:04:31,079
Bajáis aquí donde pone diseño responsivo.

75
00:04:31,079 --> 00:04:42,899
Y lo que vamos a hacer es diseño en columnas. Vamos a dividir la página web en columnas. Por ejemplo, puedo dividir la página en una columna que ocupe la mitad y otra que ocupe la mitad.

76
00:04:43,319 --> 00:04:53,339
Tres columnas. Una que ocupa un tercio, un tercio, un tercio. Una que ocupa un tercio y otra dos tercios. Un cuarto, un cuarto, un cuarto. Una que ocupe un medio y otra un cuarto, un cuarto.

77
00:04:53,339 --> 00:04:59,959
y todas las combinaciones que se me ocurren, un cuarto y tres cuartos, un cuarto y un cuarto, lo que queráis.

78
00:05:02,000 --> 00:05:09,740
Puedo intentar copiar todos estos diseños. Bueno, lo primero para que esto funcione, tengo que crear un row, ¿de acuerdo?

79
00:05:10,500 --> 00:05:15,620
Un row, vamos a crear un row. Lo que voy a hacer es que estos dos elementos los voy a meter dentro de otro div,

80
00:05:17,800 --> 00:05:25,540
estos dos elementos los voy a meter dentro de otro div, bueno, esto lo selecciono y si pulso tabulador,

81
00:05:25,540 --> 00:05:27,480
veis que lo mueve hacia la derecha.

82
00:05:27,800 --> 00:05:29,620
Si pulso mayúscula hasta volador, hacia la izquierda.

83
00:05:29,759 --> 00:05:30,879
Esto sirve para intentar.

84
00:05:33,379 --> 00:05:34,199
Ya la lío.

85
00:05:35,699 --> 00:05:36,319
Con un control Z.

86
00:05:37,319 --> 00:05:38,259
Ahí está.

87
00:05:39,519 --> 00:05:41,139
Un div y aquí voy a meter

88
00:05:41,139 --> 00:05:42,860
un w3row.

89
00:05:47,589 --> 00:05:48,170
Ahí lo tenemos.

90
00:05:51,300 --> 00:05:52,779
De momento no pasa nada.

91
00:05:52,959 --> 00:05:54,180
Si yo lo intento usar,

92
00:05:55,399 --> 00:05:56,899
pues no pasa nada.

93
00:05:58,939 --> 00:06:00,339
No ha pasado absolutamente nada.

94
00:06:00,680 --> 00:06:02,240
Ya le tengo que... ¿Por qué? Porque está esperando

95
00:06:02,240 --> 00:06:03,600
que le diga el tamaño de las columnas.

96
00:06:03,600 --> 00:06:05,100
pues voy a poner por ejemplo

97
00:06:05,100 --> 00:06:06,639
dos half

98
00:06:06,639 --> 00:06:09,699
w3 half, eso que es half

99
00:06:09,699 --> 00:06:11,480
significa la mitad, que ocupe la mitad

100
00:06:11,480 --> 00:06:13,639
vale, pues vamos a decir que ocupe la mitad

101
00:06:13,639 --> 00:06:22,250
aquí le digo ocupe la mitad, fijaros

102
00:06:22,250 --> 00:06:23,930
que puedo añadir

103
00:06:23,930 --> 00:06:26,589
a continuación de una clase

104
00:06:26,589 --> 00:06:28,250
todo lo que quiera, incluso le podría

105
00:06:28,250 --> 00:06:29,250
poner aquí luego un color

106
00:06:29,250 --> 00:06:34,029
color lima, o sea

107
00:06:34,029 --> 00:06:36,490
va a ser una tarjeta que va a ocupar la mitad

108
00:06:36,490 --> 00:06:38,149
esta va a ser una tarjeta que va a ocupar la mitad

109
00:06:38,149 --> 00:06:39,449
y que va a ser de color lima

110
00:06:39,449 --> 00:06:42,389
Vamos a verlo en el navegador

111
00:06:42,389 --> 00:06:43,569
Esto va a quedar precioso

112
00:06:43,569 --> 00:06:45,050
Bueno, va a quedar horrible

113
00:06:45,050 --> 00:06:48,620
De acuerdo

114
00:06:48,620 --> 00:06:50,180
A ver dónde estás

115
00:06:50,180 --> 00:06:55,629
No me ha hecho caso

116
00:06:55,629 --> 00:06:56,329
A ver por qué

117
00:06:56,329 --> 00:07:01,670
Algo he hecho mal

118
00:07:01,670 --> 00:07:02,610
Esto pasa muchas veces

119
00:07:02,610 --> 00:07:04,170
He metido la pata

120
00:07:04,170 --> 00:07:06,050
¿Por qué está fallando?

121
00:07:07,250 --> 00:07:07,509
Fijaros

122
00:07:07,509 --> 00:07:08,850
Roll, half

123
00:07:08,850 --> 00:07:09,209
Ah, vale

124
00:07:09,209 --> 00:07:10,449
Fijaros, ¿por qué está fallando?

125
00:07:10,509 --> 00:07:11,649
Porque tienen que ser contenedores

126
00:07:11,649 --> 00:07:12,410
Esto me ha faltado decir

127
00:07:12,410 --> 00:07:15,389
Tienen que ser contenedores

128
00:07:15,389 --> 00:07:16,110
No tarjetas

129
00:07:16,110 --> 00:07:18,069
Bueno, pues vamos a poner ahí

130
00:07:19,829 --> 00:07:20,550
Nunca lo he probado.

131
00:07:20,670 --> 00:07:22,569
Vamos a probar a poner que sean contenedores.

132
00:07:22,769 --> 00:07:24,850
Me falta ponerlo delante del contenedor.

133
00:07:26,920 --> 00:07:29,100
Para que esto funcione tienen que ser contenedores.

134
00:07:29,240 --> 00:07:29,899
Vamos a probar.

135
00:07:33,810 --> 00:07:34,689
No ha funcionado.

136
00:07:34,850 --> 00:07:37,329
Bueno, pues tengo que quitarle lo de tarjeta.

137
00:07:39,540 --> 00:07:41,060
Con lo bonita que estaban quedando las tarjetas.

138
00:07:42,860 --> 00:07:43,740
Vamos a probar.

139
00:07:49,199 --> 00:07:49,740
Ah, vale, vale.

140
00:07:50,060 --> 00:07:51,279
Sí que estaba funcionando.

141
00:07:51,620 --> 00:07:53,060
Estaba funcionando desde el principio.

142
00:07:53,199 --> 00:07:54,560
Lo que pasa es que le he metido tanto zoom

143
00:07:54,560 --> 00:07:57,139
para que lo vea ahí bien.

144
00:07:57,300 --> 00:07:58,139
¿Veis lo que pasa?

145
00:07:58,139 --> 00:07:59,319
¿Cuándo le metes mucho zoom?

146
00:08:01,319 --> 00:08:02,680
Vale, estaba funcionando

147
00:08:02,680 --> 00:08:03,379
desde el principio.

148
00:08:05,860 --> 00:08:08,000
Lo que pasa es que si le metes mucho zoom, pues te pone

149
00:08:08,000 --> 00:08:10,579
lo que se llama diseño responsivo.

150
00:08:10,579 --> 00:08:12,019
Esto es lo típico de los móviles,

151
00:08:12,480 --> 00:08:14,000
que te lo pone todo a una continuación, ¿no?

152
00:08:14,000 --> 00:08:15,920
Pero fijaros, me ha puesto uno de un medio y otro de un medio.

153
00:08:16,579 --> 00:08:18,279
Pero vamos a poner el car, vamos a recuperar el car.

154
00:08:22,199 --> 00:08:24,060
Vamos a ver...

155
00:08:24,060 --> 00:08:24,459
Ahí está.

156
00:08:25,540 --> 00:08:28,000
Bueno, queda feísimo. Casi le quito, voy a quitar el car, ¿no?

157
00:08:28,180 --> 00:08:29,120
Pero fijaros que

158
00:08:29,120 --> 00:08:30,519
esto depende del zoom.

159
00:08:30,519 --> 00:08:33,379
claro, que lo he puesto un zoom tan grande

160
00:08:33,379 --> 00:08:35,299
que no se ve, ya con esto

161
00:08:35,299 --> 00:08:37,379
puedo intentar copiar el diseño como he visto

162
00:08:37,379 --> 00:08:41,740
antes, casi le voy a quitar el card, no, está feo

163
00:08:41,740 --> 00:08:43,580
le voy a quitar el card a este y se lo dejo

164
00:08:43,580 --> 00:08:43,860
a otro

165
00:08:43,860 --> 00:08:46,460
vale, pues un ejemplo, ¿no?

166
00:08:49,419 --> 00:08:51,500
he hecho un diseño de un medio, un medio

167
00:08:51,500 --> 00:08:53,259
pero podría hacer un diseño de

168
00:08:53,259 --> 00:08:54,480
un tercio, un tercio

169
00:08:54,480 --> 00:08:56,519
¿de acuerdo?

170
00:08:57,899 --> 00:08:59,000
a ver dónde están, ¿veis?

171
00:08:59,340 --> 00:09:01,539
he hecho half, le he puesto half a cada uno

172
00:09:02,600 --> 00:09:11,610
Half, half, pero lo podría haber puesto un tercio, un tercio, un tercio, un cuarto, un tercio...

173
00:09:11,610 --> 00:09:17,610
Las combinaciones que queráis. Mientras sume uno, las combinaciones que queráis.

174
00:09:17,610 --> 00:09:22,610
Aquí vamos a parar y vamos a continuar ahora con las barras de navegación.

175
00:09:22,610 --> 00:09:28,610
Lo que pasa es que para usar una barra de navegación, antes os tengo que contar los enlaces.

176
00:09:28,610 --> 00:09:34,649
Vamos aquí.