1
00:00:00,690 --> 00:00:11,189
Muy buenas a todos, bienvenidos a mi proyecto de final de curso de aplicaciones web, vamos a presentar la página web

2
00:00:11,189 --> 00:00:30,620
Como podemos ver por aquí vamos a hacerle live server para poder primero ver la página y después vamos explicando el código poquito a poquito

3
00:00:30,620 --> 00:00:45,899
Vale, pues como podemos analizar, en la página principal de Bienvenida

4
00:00:45,899 --> 00:00:53,140
Tenemos una site a la izquierda con una foto y una tabla con varias listas con párrafos

5
00:00:53,140 --> 00:00:57,859
Como título tenemos, creo que es un H3, un H2, un subtítulo

6
00:00:59,119 --> 00:01:05,959
Tenemos un header con botoncitos, por ejemplo, que cuando pasamos el ratón por encima se vuelven de otro color

7
00:01:05,959 --> 00:01:11,340
Luego tenemos un section en el que hemos metido una tabla

8
00:01:11,340 --> 00:01:14,000
Para poder hacer las tres características

9
00:01:14,000 --> 00:01:22,280
Dos fotos, las cuales pedían, por ejemplo, dos actividades que no dejaría de hacer

10
00:01:22,280 --> 00:01:24,500
Estas fotos tienen enlaces

11
00:01:24,500 --> 00:01:31,510
Si yo pincho en ellos se va a la plataforma para ver el vídeo, por ejemplo

12
00:01:31,510 --> 00:01:39,579
Y en la otra igual, que es el estudio de lo que más me gusta

13
00:01:39,579 --> 00:01:43,000
Luego aplicaciones que más utilizo

14
00:01:43,000 --> 00:01:43,939
Pues Youtube Music

15
00:01:43,939 --> 00:01:47,200
Que también tiene un enlace para ir a la plataforma

16
00:01:47,200 --> 00:01:47,859
Principal

17
00:01:47,859 --> 00:01:54,150
Y luego por abajo pues tenemos lo que es

18
00:01:54,150 --> 00:01:56,090
El footer con un enlace a nuestro

19
00:01:56,090 --> 00:01:56,670
GitHub

20
00:01:56,670 --> 00:02:04,379
Luego tenemos Curriculum

21
00:02:04,379 --> 00:02:06,680
Que hemos metido

22
00:02:06,680 --> 00:02:07,700
Un Curriculum

23
00:02:07,700 --> 00:02:12,560
Dentro de lo que es el main

24
00:02:12,560 --> 00:02:14,379
El contenido de la página

25
00:02:14,379 --> 00:02:18,169
Y poquito más

26
00:02:18,169 --> 00:02:22,629
Hemos ido metiendo enlaces, párrafos, listas

27
00:02:22,629 --> 00:02:24,710
Un poquito más, ¿no?

28
00:02:24,849 --> 00:02:28,349
O sea, tampoco hay mucho más que contar

29
00:02:28,349 --> 00:02:31,229
Luego en formulario, hemos metido un formulario

30
00:02:31,229 --> 00:02:34,870
Como por ejemplo el que vimos a principio de curso

31
00:02:34,870 --> 00:02:36,229
En HTML

32
00:02:36,229 --> 00:02:47,099
Y poquito más, o sea

33
00:02:47,099 --> 00:02:49,719
La verdad es que está funcionando todo

34
00:02:49,719 --> 00:02:52,560
Podemos elegir por aquí las cosas

35
00:02:52,560 --> 00:02:53,360
Si funciona

36
00:02:53,360 --> 00:03:17,789
Sí, bueno, podemos observar que la página está funcionando

37
00:03:17,789 --> 00:03:23,270
Y luego tenemos una última página

38
00:03:23,270 --> 00:03:30,900
Donde nosotros hemos hecho el informe de desarrollo del proyecto

39
00:03:30,900 --> 00:03:34,639
De cómo va a estar estructurado nuestra maqueta web

40
00:03:34,639 --> 00:03:40,520
Y como hemos visto antes, pues tenemos un menú de navegación como título

41
00:03:40,520 --> 00:03:43,039
Luego estaría el header

42
00:03:43,039 --> 00:03:46,560
que sería el título del main

43
00:03:46,560 --> 00:03:49,080
por ejemplo, que he preferido ponerlo así

44
00:03:49,080 --> 00:03:51,960
por dejar el menú de navegación con botones

45
00:03:51,960 --> 00:03:55,379
he dejado a la izquierda

46
00:03:55,379 --> 00:03:57,860
lo que es el aside, la tablita izquierda

47
00:03:57,860 --> 00:04:01,259
con la foto, las listas de información

48
00:04:01,259 --> 00:04:02,539
de los párrafos y demás

49
00:04:02,539 --> 00:04:07,319
y luego pues poquito más, o sea, el main, la cabecera

50
00:04:07,319 --> 00:04:10,979
un lateral, un menú de navegación y el pie de página

51
00:04:10,979 --> 00:04:13,039
vale

52
00:04:13,039 --> 00:04:15,780
y aquí vamos a meter el vídeo explicativo

53
00:04:15,780 --> 00:04:17,639
pues que ahora mismo estamos grabando

54
00:04:17,639 --> 00:04:19,720
en mi caso

55
00:04:19,720 --> 00:04:21,959
lo subiré a youtube ya que he tenido problemas

56
00:04:21,959 --> 00:04:23,839
con github a la hora de

57
00:04:23,839 --> 00:04:25,540
subir vídeos demasiado grandes

58
00:04:25,540 --> 00:04:26,660
demasiado pesados

59
00:04:26,660 --> 00:04:28,540
así que

60
00:04:28,540 --> 00:04:31,720
lo voy a hacer a través de youtube

61
00:04:31,720 --> 00:04:33,740
bien, ahora si vamos

62
00:04:33,740 --> 00:04:34,379
al código

63
00:04:34,379 --> 00:04:37,500
podemos observar pues que

64
00:04:37,500 --> 00:04:38,079
no tiene

65
00:04:38,079 --> 00:04:42,259
no tiene mucho misterio, ¿no?

66
00:04:42,480 --> 00:04:45,220
Hemos metido un comentario con nuestro nombre

67
00:04:45,220 --> 00:04:47,939
para identificar la página web a nuestro nombre,

68
00:04:48,000 --> 00:04:50,660
de que no nos la han copiado ningún compañero ni nada.

69
00:04:52,240 --> 00:04:54,360
Tenemos un menú de cabecera en el GEA,

70
00:04:54,660 --> 00:04:56,699
donde hemos puesto toda la información.

71
00:04:57,540 --> 00:05:00,259
Aparte de antes del GEA tenemos el lenguaje en español, ¿no?

72
00:05:00,259 --> 00:05:02,439
Le hemos indicado en español que queremos el lenguaje.

73
00:05:03,639 --> 00:05:06,279
El formato de codificación de los caracteres,

74
00:05:06,279 --> 00:05:09,560
el cómo va a ser leído y procesada la información por los navegadores.

75
00:05:11,240 --> 00:05:17,579
Le hemos metido un título para el proyecto que tenga una pestaña con nuestro propio nombre,

76
00:05:17,720 --> 00:05:19,899
que es el que nosotros queramos, la pestaña,

77
00:05:20,959 --> 00:05:25,279
y le hemos dado un link de acceso a un fichero de estilos CSS aparte.

78
00:05:26,600 --> 00:05:29,220
Luego dentro del body hemos separado varias partes,

79
00:05:29,399 --> 00:05:31,980
por ejemplo en la página principal tenemos un div,

80
00:05:32,540 --> 00:05:35,399
al cual le hemos dado una clase con CSS llamada contenedor,

81
00:05:36,279 --> 00:05:47,839
Vamos a meter varios subdiv en un menú de navegación que van a ser los botoncitos y poquita cosa más. Tienen los enlaces para que cuando la gente pinche en los botones pues te vaya esos enlaces.

82
00:05:47,839 --> 00:05:51,399
luego el aside que es la barra lateral

83
00:05:51,399 --> 00:05:54,600
la tenemos a la izquierda

84
00:05:54,600 --> 00:06:03,519
y tenemos una imagen a la cual le hemos puesto una clase

85
00:06:03,519 --> 00:06:06,399
llamada foto, el recurso va a ser la foto

86
00:06:06,399 --> 00:06:09,259
el enlace como tal de la foto

87
00:06:09,259 --> 00:06:13,199
y luego tenemos una lista

88
00:06:13,199 --> 00:06:16,579
que la hemos hecho con las etiquetas

89
00:06:16,579 --> 00:06:20,480
ul ya que no quería ponerlo

90
00:06:20,480 --> 00:06:22,660
como etiquetas ordenadas sino que prefería

91
00:06:22,660 --> 00:06:39,620
ponerlo como con puntitos o sin número. Aquí terminaría la side que es la tabla lateral y ahora ya nos empezamos a meter con el main que es el contenido de la página que está ubicado a la derecha abajo, la parte consistente.

92
00:06:39,620 --> 00:06:44,100
Le hemos puesto un título secundario en H2

93
00:06:44,100 --> 00:06:47,480
Le hemos puesto con la etiqueta HR una línea separadora

94
00:06:47,480 --> 00:06:55,040
La cual luego le he metido 0,1 píxeles en un archivo de CSS para que quede ajustado

95
00:06:55,040 --> 00:07:01,540
Y a partir de aquí hemos metido una tablita donde hemos podido meter las características

96
00:07:01,540 --> 00:07:05,620
Esto es lo que veíamos, las tres características en la tabla esa horizontal

97
00:07:05,620 --> 00:07:31,149
Luego hemos metido otras secciones fuera de la tabla, que las he metido a través de la etiqueta article también, les he dado una clase y un poquito más, he puesto imágenes, he puesto fotos con enlaces para que la gente cuando pinche te redirija a esos enlaces.

98
00:07:31,149 --> 00:07:37,579
poco más, aquí acaba esta sección

99
00:07:37,579 --> 00:07:40,279
y luego ya estaríamos entrando

100
00:07:40,279 --> 00:07:42,879
aparte de las líneas separadoras que tenemos

101
00:07:42,879 --> 00:07:44,360
pues en la sección de footer

102
00:07:44,360 --> 00:07:48,240
que ya sería lo que es el pie de la página

103
00:07:48,240 --> 00:07:50,699
al cual le hemos metido unos enlaces

104
00:07:50,699 --> 00:07:55,879
y redireccionamiento al repositorio de github

105
00:07:55,879 --> 00:07:56,959
como tal

106
00:07:56,959 --> 00:07:59,879
y esto sería nuestra página principal

107
00:07:59,879 --> 00:08:04,019
A la cual le ponemos los archivos CSS

108
00:08:04,019 --> 00:08:06,439
Los tenemos aquí detallados

109
00:08:06,439 --> 00:08:11,720
La primera etiqueta, por ejemplo, es que le hemos dicho que a todo el contenido del cuerpo

110
00:08:11,720 --> 00:08:17,560
De la página web, pues tenga un ancho y un alto en específico

111
00:08:17,560 --> 00:08:19,540
Con un formato de cajita

112
00:08:19,540 --> 00:08:23,339
Luego al body le hemos puesto una imagen de fondo

113
00:08:23,339 --> 00:08:26,160
Como con un color turquesa así de mar

114
00:08:26,160 --> 00:08:32,820
hemos cogido y lo hemos ajustado tanto al ancho y al alto

115
00:08:32,820 --> 00:08:35,279
con la propiedad background side

116
00:08:35,279 --> 00:08:37,899
le hemos dicho a la foto que no se repita

117
00:08:37,899 --> 00:08:40,820
porque si nosotros poníamos que se repitiese

118
00:08:40,820 --> 00:08:44,080
la foto quedaría mal como fondo y ya no quedaría ajustada a la página

119
00:08:44,080 --> 00:08:48,480
y luego también le hemos dicho que al menú de navegación

120
00:08:48,480 --> 00:08:50,820
donde los botones tengan un fondo de color negro

121
00:08:50,820 --> 00:08:54,059
aposta para que cuando pasamos el botón por encima

122
00:08:54,059 --> 00:08:56,639
pues esté en color rojo con el ratón

123
00:08:56,639 --> 00:09:01,460
le hemos dado también al menú de navegación

124
00:09:01,460 --> 00:09:03,759
a los div que hemos creado

125
00:09:03,759 --> 00:09:07,919
le hemos puesto para que se pongan en línea

126
00:09:07,919 --> 00:09:10,240
con la propiedad display

127
00:09:10,240 --> 00:09:13,419
le hemos dado un espaciado interno

128
00:09:13,419 --> 00:09:16,159
para que entre cada botón de los cuatro que hay

129
00:09:16,159 --> 00:09:18,940
tengan 20 píxeles en concreto de espacio

130
00:09:18,940 --> 00:09:22,000
le hemos dado un ancho del 24%

131
00:09:22,000 --> 00:09:23,919
cuánto va a ocupar de ancho cada botón

132
00:09:23,919 --> 00:09:27,200
y los colores de cada botón

133
00:09:27,200 --> 00:09:31,120
esto lo he hecho a posta, el ponerlo en color negro

134
00:09:31,120 --> 00:09:35,220
básicamente porque si nosotros luego pasamos el botón por encima

135
00:09:35,220 --> 00:09:38,159
se pone en rojo, como hemos dicho antes

136
00:09:38,159 --> 00:09:40,980
y es a posta, dejarlo en negro para que cuando lo pases

137
00:09:40,980 --> 00:09:42,740
pues se ponga en rojo por encima

138
00:09:42,740 --> 00:09:46,620
luego hemos alineado los textos al centro

139
00:09:46,620 --> 00:09:49,820
y luego ya dentro de lo que es el menú

140
00:09:49,820 --> 00:09:53,039
pues hemos puesto igual un fondo de color negro

141
00:09:53,039 --> 00:09:55,120
con la propiedad background

142
00:09:55,120 --> 00:09:57,159
le hemos dado

143
00:09:57,159 --> 00:09:58,440
como hemos visto antes

144
00:09:58,440 --> 00:10:01,100
a los bits, les vamos a dar

145
00:10:01,100 --> 00:10:02,879
un espaciado interno

146
00:10:02,879 --> 00:10:04,799
que los bordes sean redondeados

147
00:10:04,799 --> 00:10:06,679
con la propiedad

148
00:10:06,679 --> 00:10:08,480
border radius, con el padding

149
00:10:08,480 --> 00:10:11,179
vamos a darle un espaciado interno como hemos dicho antes

150
00:10:11,179 --> 00:10:15,220
y luego lo que es la caligrafía

151
00:10:15,220 --> 00:10:16,559
había que poner también

152
00:10:16,559 --> 00:10:19,080
varios apartados de caligrafía

153
00:10:19,080 --> 00:10:21,179
y le hemos puesto con la propiedad font variant

154
00:10:21,179 --> 00:10:22,240
en small caps

155
00:10:22,240 --> 00:10:26,139
para poder meter como pequeños detallitos con las letras

156
00:10:26,139 --> 00:10:30,399
en TextDecorationNone le hemos puesto esto

157
00:10:30,399 --> 00:10:33,580
ya que no queríamos que el texto tuviera subrayada nada

158
00:10:33,580 --> 00:10:35,299
de lo que es la página

159
00:10:35,299 --> 00:10:38,120
y bueno, un poquito más

160
00:10:38,120 --> 00:10:40,659
la siguiente opción, pues eso, el Ahover

161
00:10:40,659 --> 00:10:42,659
que es para cuando pasábamos el rato por encima

162
00:10:42,659 --> 00:10:43,919
que eso ya lo hemos dicho antes

163
00:10:43,919 --> 00:10:47,039
y luego pues más cosas

164
00:10:47,039 --> 00:10:49,740
por ejemplo, como los estilos del título principal

165
00:10:49,740 --> 00:10:52,720
que le hemos puesto para que se alinee al centro

166
00:10:52,720 --> 00:10:54,360
que las palabras

167
00:10:54,360 --> 00:10:56,460
se pongan como fijas con la

168
00:10:56,460 --> 00:10:57,659
propiedad text transform

169
00:10:57,659 --> 00:11:00,740
y también le hemos añadido

170
00:11:00,740 --> 00:11:02,679
una caligrafía como por ejemplo

171
00:11:02,679 --> 00:11:04,539
antes podíamos meter calibrí

172
00:11:04,539 --> 00:11:06,220
arial black o cualquier cosa

173
00:11:06,220 --> 00:11:08,340
pues en nuestro caso le hemos metido sans serif

174
00:11:08,340 --> 00:11:12,259
y poco más

175
00:11:12,259 --> 00:11:14,639
luego lo que es

176
00:11:14,639 --> 00:11:16,259
la barrita a la izquierda

177
00:11:16,259 --> 00:11:18,519
la tabla a la izquierda que tenía

178
00:11:18,519 --> 00:11:20,700
que tener, la vamos a aplicar

179
00:11:20,700 --> 00:11:21,860
con la propiedad de aside

180
00:11:21,860 --> 00:11:24,379
a la cual le hemos dado un fondo

181
00:11:24,379 --> 00:11:26,399
de color negro, con la propiedad

182
00:11:26,399 --> 00:11:28,600
background, al texto

183
00:11:28,600 --> 00:11:30,299
le hemos puesto un color blanco

184
00:11:30,299 --> 00:11:32,679
le hemos puesto

185
00:11:32,679 --> 00:11:34,340
para que ese cuadro

186
00:11:34,340 --> 00:11:35,820
flote a la izquierda

187
00:11:35,820 --> 00:11:38,299
que se posicione por encima de la foto

188
00:11:38,299 --> 00:11:38,759
de fondo

189
00:11:38,759 --> 00:11:42,320
le hemos dado con la propiedad width

190
00:11:42,320 --> 00:11:44,600
y con la propiedad height, una anchura y una altura

191
00:11:44,600 --> 00:11:46,440
como lo tenemos aquí

192
00:11:46,440 --> 00:11:48,460
marcados con píxeles y porcentajes

193
00:11:48,460 --> 00:11:59,210
Y luego hemos puesto un marking top para que la foto esté posicionada a X altura de lo que son la parte del footer de nuestra página.

194
00:12:01,190 --> 00:12:09,470
Además hemos añadido la posición sticky para que si nosotros bajamos la página web, por ejemplo, la foto se quede fija o que la tabla se quede fija.

195
00:12:11,840 --> 00:12:17,679
A la foto le hemos dado también unas propiedades, por ejemplo, para que esté ocupando lo justo dentro de la tabla.

196
00:12:17,679 --> 00:12:29,179
y luego ya a las listas pues le hemos dado como un espaciado para que entre ellas por lo menos haya un pequeño espacio de estilo

197
00:12:29,179 --> 00:12:36,360
para que no quede todo apelotonado, le hemos dado un 200% y poquito más

198
00:12:36,360 --> 00:12:44,299
luego en el contenido principal en el main hemos utilizado la propiedad float igual para que flote la información o la foto

199
00:12:44,299 --> 00:12:50,399
lo que es este section, por así decirlo, por encima de nuestra foto de fondo

200
00:12:50,399 --> 00:12:59,820
y le hemos puesto también un padding para que tenga como más anchura a nivel interna y demás

201
00:12:59,820 --> 00:13:06,460
y además con la propiedad width un ancho del 75% para que ocupe de izquierda a derecha

202
00:13:06,460 --> 00:13:13,299
pues un poquito más grande o un poquito menos para que quepa dentro de lo que es la tablita

203
00:13:13,299 --> 00:13:15,539
Lo que sería el flow

204
00:13:15,539 --> 00:13:17,259
El aside, perdón

205
00:13:17,259 --> 00:13:21,539
Y luego estilo de la sección de características

206
00:13:21,539 --> 00:13:23,799
Exactamente lo mismo

207
00:13:23,799 --> 00:13:25,220
Le hemos puesto tres columnas

208
00:13:25,220 --> 00:13:28,240
Le hemos puesto la propiedad column count 3

209
00:13:28,240 --> 00:13:29,740
De tal manera que

210
00:13:29,740 --> 00:13:31,620
Nosotros teníamos las tres personalidades

211
00:13:31,620 --> 00:13:33,580
O tres cualidades y estaban en columna

212
00:13:33,580 --> 00:13:34,559
Dentro de una tabla

213
00:13:34,559 --> 00:13:37,419
Un width y un height

214
00:13:37,419 --> 00:13:38,980
Para que tenga un ancho y una altura

215
00:13:38,980 --> 00:13:40,519
La propiedad flow

216
00:13:40,519 --> 00:13:42,519
Para que esté, igual que hemos dicho antes

217
00:13:42,519 --> 00:13:44,580
Por así decirlo, flotando

218
00:13:44,580 --> 00:13:46,460
por encima de la foto de fondo

219
00:13:46,460 --> 00:13:48,620
unos

220
00:13:48,620 --> 00:13:50,419
márgenes a nivel de izquierda

221
00:13:50,419 --> 00:13:52,700
márgenes a nivel a la derecha con la propiedad

222
00:13:52,700 --> 00:13:54,700
major y top y margin button

223
00:13:54,700 --> 00:13:58,860
y poquita cosa más

224
00:13:58,860 --> 00:14:00,840
colores de fondo que le hemos puesto con background

225
00:14:00,840 --> 00:14:03,320
color, le hemos dado padding, relleno interno

226
00:14:03,320 --> 00:14:04,799
y

227
00:14:04,799 --> 00:14:05,840
poquita más

228
00:14:05,840 --> 00:14:09,220
tampoco hay mucho más que comentar

229
00:14:09,220 --> 00:14:10,620
porque básicamente es lo mismo

230
00:14:10,620 --> 00:14:13,120
al resto del código le hemos

231
00:14:13,120 --> 00:14:14,659
dado propiedades de tamaño

232
00:14:14,659 --> 00:14:37,159
le hemos dado propiedades de ajustamiento de height, de weight, le hemos dado un padding a las fotos para que se ubiquen entre ellas con espacios adecuados, poca cosa más, ya las imágenes igual, le hemos dado un height, un weight, unos márgenes para que se queden fijas en X zonas de la página.

233
00:14:37,159 --> 00:14:41,580
luego ya nos vamos a dirigir al estilo de pie de página

234
00:14:41,580 --> 00:14:42,720
lo que sería el footer

235
00:14:42,720 --> 00:14:46,440
al cual le he puesto un fondo de color negro para que haga juego

236
00:14:46,440 --> 00:14:49,179
el texto que esté en color blanco

237
00:14:49,179 --> 00:14:53,200
y que el texto esté alineado

238
00:14:53,200 --> 00:14:55,620
y poco más

239
00:14:55,620 --> 00:14:59,159
luego a los estilos de subtítulos H3

240
00:14:59,159 --> 00:15:02,100
pues le he puesto sin margen superior

241
00:15:02,100 --> 00:15:05,620
y que estén alineados al centro

242
00:15:05,620 --> 00:15:07,519
con estas dos propiedades, con margin-top

243
00:15:07,519 --> 00:15:09,399
y con test-align-center

244
00:15:09,399 --> 00:15:10,620
para que se alineen al centro

245
00:15:10,620 --> 00:15:15,330
vamos a por la segunda parte

246
00:15:15,330 --> 00:15:20,029
vamos a centrarnos

247
00:15:20,029 --> 00:15:21,809
ahora en currículum, por ejemplo

248
00:15:21,809 --> 00:15:26,090
poquita cosa más que detallar

249
00:15:26,090 --> 00:15:28,129
hemos utilizado en el menú de

250
00:15:28,129 --> 00:15:30,090
navegación varios divs, ¿no? como hemos

251
00:15:30,090 --> 00:15:32,090
hecho antes, le hemos dado la clase menú

252
00:15:32,090 --> 00:15:33,509
hemos puesto

253
00:15:33,509 --> 00:15:35,870
enlaces de referencia para que cuando alguien

254
00:15:35,870 --> 00:15:38,049
clique vaya a ese

255
00:15:38,049 --> 00:15:39,649
index, ¿no? y se despliegue esa página

256
00:15:39,649 --> 00:15:41,950
esto sigue siendo un poco igual

257
00:15:41,950 --> 00:15:43,909
la parte de la side, la parte lateral

258
00:15:43,909 --> 00:15:46,029
sigue siendo exactamente lo mismo

259
00:15:46,029 --> 00:15:48,070
y nosotros

260
00:15:48,070 --> 00:15:49,909
aquí a partir del main hemos metido

261
00:15:49,909 --> 00:15:50,909
lo que es el contenido

262
00:15:50,909 --> 00:15:53,169
lo que viene siendo

263
00:15:53,169 --> 00:15:55,870
justo pues todo lo que es el

264
00:15:55,870 --> 00:15:57,269
currículum, como tal

265
00:15:57,269 --> 00:15:59,850
como podemos observar

266
00:15:59,850 --> 00:16:01,850
le he metido una lista a través de un section

267
00:16:01,850 --> 00:16:03,610
el cual le da una clase de

268
00:16:03,610 --> 00:16:06,090
certifications, luego le he metido

269
00:16:06,090 --> 00:16:07,029
un subtítulo

270
00:16:07,029 --> 00:16:23,669
y la lista no está ordenada, es una lista con puntitos, como podemos observar, como hemos dicho antes, están las listas organizadas con la propiedad all o con la propiedad all que no estén ordenadas, ¿no?

271
00:16:23,669 --> 00:16:28,360
el archivo CSS de Curriculum

272
00:16:28,360 --> 00:16:32,320
vale, tenemos más o menos un poquito de lo mismo

273
00:16:32,320 --> 00:16:37,159
tenemos un body al cual hemos dado varias propiedades de imagen de fondo

274
00:16:37,159 --> 00:16:39,759
esto sigue siendo exactamente igual que en las otras páginas

275
00:16:39,759 --> 00:16:45,399
y en principio lo que viene siendo el CSS tiene que ser

276
00:16:45,399 --> 00:16:46,720
más o menos parecido

277
00:16:46,720 --> 00:16:53,279
porque es que al fin y al cabo es lo mismo, estamos metiendo una propiedad

278
00:16:53,279 --> 00:16:55,440
de navegación

279
00:16:55,440 --> 00:16:57,559
con tips, estamos metiendo

280
00:16:57,559 --> 00:16:59,460
un main, estamos metiendo

281
00:16:59,460 --> 00:17:01,639
la propiedad

282
00:17:01,639 --> 00:17:02,820
esta que hemos dicho antes

283
00:17:02,820 --> 00:17:05,359
esto de aquí para que tengan

284
00:17:05,359 --> 00:17:06,240
formas de caja

285
00:17:06,240 --> 00:17:09,140
al fin y al cabo

286
00:17:09,140 --> 00:17:10,559
es un poquito lo mismo

287
00:17:10,559 --> 00:17:12,599
lo que viene siendo es un poquito lo mismo

288
00:17:12,599 --> 00:17:15,579
y poquito más

289
00:17:15,579 --> 00:17:16,720
que hay que detallar de aquí

290
00:17:16,720 --> 00:17:19,440
si nosotros nos vamos

291
00:17:19,440 --> 00:17:21,319
por ejemplo ahora al formulario

292
00:17:21,319 --> 00:17:22,400
de recogida de datos

293
00:17:22,400 --> 00:17:25,119
podemos ver

294
00:17:25,119 --> 00:17:26,680
que hemos ido

295
00:17:26,680 --> 00:17:28,599
metiendo como

296
00:17:28,599 --> 00:17:30,319
en un formato de lista

297
00:17:30,319 --> 00:17:32,680
lo que son los label

298
00:17:32,680 --> 00:17:34,380
y los input

299
00:17:34,380 --> 00:17:37,099
de tal manera que queden como si fuese una lista

300
00:17:37,099 --> 00:17:38,720
pero es un cuestionario

301
00:17:38,720 --> 00:17:41,019
esto lo hemos visto pues que

302
00:17:41,019 --> 00:17:42,759
aunque esté en modo lista

303
00:17:42,759 --> 00:17:44,480
pero no esté en lista como tal

304
00:17:44,480 --> 00:17:46,900
pues tenemos los apartados en lista

305
00:17:46,900 --> 00:17:47,640
como tal

306
00:17:47,640 --> 00:17:50,440
tampoco sé cómo explicarlo muy bien

307
00:17:50,440 --> 00:17:54,779
o sea, realmente son listas dentro de un UL

308
00:17:54,779 --> 00:17:56,920
que están dentro de un fieldset

309
00:17:56,920 --> 00:17:58,720
y que tienen un formato

310
00:17:58,720 --> 00:18:02,799
para que luego con el CSS se pueda cuadrar

311
00:18:02,799 --> 00:18:08,240
un poquito más, al fin y al cabo es todo lo mismo

312
00:18:08,240 --> 00:18:11,960
un poquito más

313
00:18:11,960 --> 00:18:14,740
esta guía de, por ejemplo

314
00:18:14,740 --> 00:18:18,599
currículum o formulario de recogida de datos

315
00:18:18,599 --> 00:18:20,839
lo he cogido de aquí

316
00:18:20,839 --> 00:18:23,339
toda la información que he ido recogiendo

317
00:18:23,339 --> 00:18:24,980
ha sido a través de los ejercicios

318
00:18:24,980 --> 00:18:25,940
a lo largo del curso

319
00:18:25,940 --> 00:18:27,940
un poquito más

320
00:18:27,940 --> 00:18:31,740
así que

321
00:18:31,740 --> 00:18:34,920
tampoco queda mucho más que detallar

322
00:18:34,920 --> 00:18:38,700
vamos con el final de nuestro

323
00:18:38,700 --> 00:18:40,500
proyecto web, que es la página

324
00:18:40,500 --> 00:18:41,660
de informe de desarrollo

325
00:18:41,660 --> 00:18:46,119
bueno, se me ha olvidado decir que cada carpeta

326
00:18:46,119 --> 00:18:48,200
de estas tiene su carpeta propia de CSS

327
00:18:48,200 --> 00:18:49,920
con su carpeta propia de imágenes

328
00:18:49,920 --> 00:18:51,660
la cual están tirando los enlaces

329
00:18:51,660 --> 00:18:54,839
y poquito más

330
00:18:54,839 --> 00:19:05,759
Igual que antes le hemos puesto lenguaje español. O sea, esto va a ser exactamente igual. Al fin y al cabo está cogiendo el mismo layout de la página.

331
00:19:05,759 --> 00:19:08,299
luego por otro lado

332
00:19:08,299 --> 00:19:10,700
tenemos el main, aquí lo hemos cambiado

333
00:19:10,700 --> 00:19:11,680
un poquito, ha sido

334
00:19:11,680 --> 00:19:13,859
meter un poco

335
00:19:13,859 --> 00:19:16,279
lo que es el vídeo

336
00:19:16,279 --> 00:19:18,319
en columna hacia abajo

337
00:19:18,319 --> 00:19:19,500
meter lo que es el vídeo

338
00:19:19,500 --> 00:19:22,160
y la foto de como está producido

339
00:19:22,160 --> 00:19:24,640
nuestro layout, de nuestro proyecto

340
00:19:24,640 --> 00:19:27,430
le hemos dado

341
00:19:27,430 --> 00:19:29,230
a estas fotos

342
00:19:29,230 --> 00:19:31,769
le hemos dado una especie

343
00:19:31,769 --> 00:19:33,289
de CSS en concreto

344
00:19:33,289 --> 00:19:35,930
pues por ejemplo esta es la del

345
00:19:35,930 --> 00:19:39,990
El menú de aside, esta no nos interesa, menú de listas, estilo del main.

346
00:19:40,569 --> 00:19:47,569
El estilo del main sigue siendo igual que en las otras, pero en nuestro caso lo que vamos a hacer es que la foto de layout,

347
00:19:47,569 --> 00:19:53,170
es decir, el estilo de layout, al que le hemos llamado layout, va a tener estos márgenes y estos tamaños.

348
00:19:53,690 --> 00:20:04,210
De tal manera que quede cuadrado dentro de lo que es el menú del main, el contenido del main, mejor dicho.

349
00:20:04,210 --> 00:20:07,910
y luego el vídeo pues igual le hemos dado unas propiedades

350
00:20:07,910 --> 00:20:10,990
para que tenga las mismas propiedades

351
00:20:10,990 --> 00:20:14,029
de tamaño que la foto

352
00:20:14,029 --> 00:20:16,970
aquí en este caso estoy dándome cuenta

353
00:20:16,970 --> 00:20:19,450
que tengo que ponerle 50 así que solucionado

354
00:20:19,450 --> 00:20:23,829
y nada, poquita cosa más así que

355
00:20:23,829 --> 00:20:27,450
este es nuestro proyecto final de aplicaciones web

356
00:20:27,450 --> 00:20:29,609
en el cual hemos producido una página web

357
00:20:29,609 --> 00:20:33,250
y hemos conseguido

358
00:20:33,250 --> 00:20:35,269
explicar el código pasito a pasito

359
00:20:35,269 --> 00:20:50,769
Por otro lado, hemos terminado también el índex principal en el cual nosotros hemos conseguido meter aquí el enlace para que cuando alguien quiera pinchar en cualquiera de estos ejercicios, pues pueda ir directamente a Página Web Extraordinaria y que cargue nuestra página web.

360
00:20:51,509 --> 00:21:03,849
Como podemos observar, la página web no es responsive porque nos han pedido una página web sencilla, ¿no? Y tendríamos que ir adaptándola en un futuro para adaptarnos a responsive, ¿no?

361
00:21:03,849 --> 00:21:12,230
Por otro lado se nos ha explicado que necesitamos en el vídeo que la página web esté adaptada a varios navegadores

362
00:21:12,230 --> 00:21:16,130
Yo en mi caso estoy trabajando con Opera GX

363
00:21:16,130 --> 00:21:28,359
Pero perfectamente podemos probar en Brave y podemos observar que funciona

364
00:21:28,359 --> 00:21:32,779
Si nosotros nos metemos a Google Chrome y buscamos

365
00:21:32,779 --> 00:21:38,529
Podemos observar que funciona y que no hay muchos detalles como tal

366
00:21:38,529 --> 00:21:41,829
De diferencia a lo que me refiero

367
00:21:41,829 --> 00:21:44,829
y luego como un navegador específico

368
00:21:44,829 --> 00:21:46,710
el Leche o el Mosfila Firefox

369
00:21:46,710 --> 00:21:48,890
que podemos observar

370
00:21:48,890 --> 00:21:50,009
que también funcionan

371
00:21:50,009 --> 00:21:52,069
y como último el Firefox

372
00:21:52,069 --> 00:21:54,910
podemos observar que también

373
00:21:54,910 --> 00:21:56,470
funciona en este navegador

374
00:21:56,470 --> 00:22:02,299
¡Uy bo! ¡Ahí está!

375
00:22:04,420 --> 00:22:06,220
Pues nada, esto es todo

376
00:22:06,220 --> 00:22:07,779
espero que os haya gustado

377
00:22:07,779 --> 00:22:09,980
y muchísimas gracias

378
00:22:09,980 --> 00:22:11,559
por escuchar mi proyecto

379
00:22:11,559 --> 00:22:13,720
y

380
00:22:13,720 --> 00:22:16,359
nos vemos en el siguiente vídeo

381
00:22:16,359 --> 00:22:17,339
Chao, chao