1
00:00:00,620 --> 00:00:10,660
Bueno, hola buenas, vengo a presentar lo que sería mi proyecto, mi página web sobre una página sencilla

2
00:00:10,660 --> 00:00:18,699
y enseñaros cómo lo he maquetizado y los pasos que he seguido para completarlo.

3
00:00:19,260 --> 00:00:28,300
Para empezar, la página se vería tal que así. He elegido como tema lo que sería uno de mis artistas favoritos,

4
00:00:28,300 --> 00:00:30,120
En plan de renacimiento

5
00:00:30,120 --> 00:00:31,980
Para no hablar mucho sobre mí

6
00:00:31,980 --> 00:00:35,240
Tal se vería

7
00:00:35,240 --> 00:00:36,640
Esta

8
00:00:36,640 --> 00:00:38,979
He hecho un display

9
00:00:38,979 --> 00:00:41,640
Aquí en el header de mi encabezado

10
00:00:41,640 --> 00:00:43,159
Para poner tres obras

11
00:00:43,159 --> 00:00:44,759
De renacimiento

12
00:00:44,759 --> 00:00:47,299
Que no tienen nada que ver con el autor inicial

13
00:00:47,299 --> 00:00:49,420
Dentro del header

14
00:00:49,420 --> 00:00:51,600
También he hecho una especie de recuadro para el tema

15
00:00:51,600 --> 00:00:53,219
Y dentro de ello

16
00:00:53,219 --> 00:00:55,759
He hecho una especie de mini presentación

17
00:00:55,759 --> 00:00:56,939
En el que

18
00:00:56,939 --> 00:01:03,219
También he colocado una imagen en un recuadro con un text-align center para que todo esté

19
00:01:03,219 --> 00:01:04,219
bien centradito.

20
00:01:04,219 --> 00:01:10,799
Aquí en el display he modificado todas las imágenes para que queden una al lado de otra

21
00:01:10,799 --> 00:01:12,079
sin que se entorpezcan.

22
00:01:12,079 --> 00:01:23,739
Y bueno, he hecho aquí un quién es y hablando un poquito sobre quién es este elegido artista

23
00:01:23,739 --> 00:01:24,739
Sandro Venticelli.

24
00:01:24,739 --> 00:01:31,140
Y aquí un poquito de información general sobre él, tal cual, he hecho un menú en

25
00:01:31,140 --> 00:01:38,819
el que hay varias opciones dentro de la página y aquí en la información general pues he

26
00:01:38,819 --> 00:01:51,859
puesto dos vídeos, dos enlaces con dos vídeos y he hecho un folder para testificar, como

27
00:01:51,859 --> 00:01:56,459
una especie de certificado que le he hecho yo, en el que hay un enlace que lleva a mi github.

28
00:02:08,469 --> 00:02:16,789
Abrimos aquí en historia y nos lleva a un enlace en el que aparece la historia de este buen señor,

29
00:02:16,789 --> 00:02:22,250
con sus primeras obras, obras de madurez, últimos años y eso.

30
00:02:22,250 --> 00:02:28,810
Aquí está un poquito mal porque no había ajustado pero ya no está ajustado.

31
00:02:28,810 --> 00:02:35,289
Aquí también podemos abrir en la opción obras, que esto lo he hecho con un float,

32
00:02:35,289 --> 00:02:46,129
y aparecen varias obras hechas por un display, también los he separado por section y article

33
00:02:46,129 --> 00:02:53,310
para que solo viera dos por cada fila. He puesto aquí varias obras también modificadas

34
00:02:53,310 --> 00:03:01,460
por tamaño y altura para que encajen una sobre otra con sus respectivos títulos. Y

35
00:03:01,460 --> 00:03:09,060
este sí que me ha quedado bien ajustado. Y tus datos, he hecho como una especie de

36
00:03:09,060 --> 00:03:12,960
registro para que se registren en la página web, aunque no tiene nada que ver con la página

37
00:03:12,960 --> 00:03:19,500
web pero para hacer lo de los formularios y crear y acabo así he puesto un título que opinas he

38
00:03:19,500 --> 00:03:25,439
puesto datos de registro el nombre de usuario contraseña repita contraseña correo datos

39
00:03:25,439 --> 00:03:30,300
personales nombre fecha de nacimiento sexo hombre mujer número color de avatar

40
00:03:32,360 --> 00:03:40,719
califiquen su satisfacción y le escribo un comentario y también he hecho otra pestaña

41
00:03:40,719 --> 00:03:47,560
para volver al inicio y volver a la página del principio. ¿Cómo hemos hecho esto?

42
00:03:51,560 --> 00:03:57,860
Entramos a Visual Studio Code y aquí abrimos un nuevo archivo.

43
00:03:57,860 --> 00:04:01,479
abrimos

44
00:04:01,479 --> 00:04:04,639
abrir archivo

45
00:04:04,639 --> 00:04:06,599
y nos vamos a

46
00:04:06,599 --> 00:04:08,319
así lo tenemos organizado

47
00:04:08,319 --> 00:04:09,039
desde dentro

48
00:04:09,039 --> 00:04:12,039
sería lo que sería página sencilla

49
00:04:12,039 --> 00:04:14,340
abrimos en página sencilla

50
00:04:14,340 --> 00:04:15,860
y tenemos una carpeta de imágenes

51
00:04:15,860 --> 00:04:17,899
una carpeta de estilos

52
00:04:17,899 --> 00:04:19,279
el index

53
00:04:19,279 --> 00:04:22,959
la página de historia

54
00:04:22,959 --> 00:04:24,079
la página de obras

55
00:04:24,079 --> 00:04:25,459
y la página de tus datos

56
00:04:25,459 --> 00:04:32,000
esta página nada, ponemos el hexágono por aquí, la página que hice principalmente pero como había

57
00:04:32,000 --> 00:04:39,560
que hacer una index pues hice una index, abrimos la index y aquí lo tenemos. ¿Cómo se ha creado todo?

58
00:04:39,560 --> 00:04:52,680
Pues muy fácil, abres un html, haces un gead, indicas la ruta del estilo de la hoja de ccs,

59
00:04:52,680 --> 00:04:55,040
das un nombre a la página

60
00:04:55,040 --> 00:04:56,779
y empiezas con el móvil

61
00:04:56,779 --> 00:04:58,560
abrí un disk contenedor

62
00:04:58,560 --> 00:05:00,759
y dentro de ese disk contenedor

63
00:05:00,759 --> 00:05:01,540
creé un head

64
00:05:01,540 --> 00:05:04,680
hice un enlace a las tres imágenes

65
00:05:04,680 --> 00:05:07,019
con sus respectivos class para modificarlos

66
00:05:07,019 --> 00:05:09,420
en la hoja CSS

67
00:05:09,420 --> 00:05:10,920
y hice

68
00:05:10,920 --> 00:05:13,279
un título

69
00:05:13,279 --> 00:05:14,920
en h1

70
00:05:14,920 --> 00:05:16,740
hacer el header y abrí un nav

71
00:05:16,740 --> 00:05:19,240
dentro de este nav

72
00:05:19,240 --> 00:05:20,980
hice un disk class

73
00:05:20,980 --> 00:05:21,680
encabezado

74
00:05:21,680 --> 00:05:28,100
puse un texto, hoy presentamos a Sandro Bochicelli, lo remarqué en negrita

75
00:05:28,100 --> 00:05:35,600
y puse un enlace con un retrato, con un clase de retrato para modificarlo también

76
00:05:35,600 --> 00:05:39,220
hacer el nav y abrir una site para crear lo que es el menú

77
00:05:41,980 --> 00:05:50,939
este es el menú clase inicio, porque cada menú en plan respectivamente iba a tener una longitud del margen

78
00:05:50,939 --> 00:05:53,920
entonces esto lo hice de inicio porque es el del index

79
00:05:53,920 --> 00:05:56,000
dentro de esto pues hice

80
00:05:56,000 --> 00:05:57,779
un class menú

81
00:05:57,779 --> 00:05:59,339
ese sí que es genérico

82
00:05:59,339 --> 00:06:01,680
y pues sus respectivos enlaces

83
00:06:01,680 --> 00:06:04,180
tiene un enlace al html historia

84
00:06:04,180 --> 00:06:06,279
tiene un enlace al html obras

85
00:06:06,279 --> 00:06:08,660
tiene un enlace al html datos

86
00:06:08,660 --> 00:06:11,160
y tiene un enlace al html index

87
00:06:11,160 --> 00:06:12,540
para regresar a esta misma página

88
00:06:12,540 --> 00:06:15,220
se cierra la site

89
00:06:15,220 --> 00:06:16,160
y se abre un main

90
00:06:16,160 --> 00:06:17,920
dentro de este main

91
00:06:17,920 --> 00:06:19,939
hice un h1

92
00:06:19,939 --> 00:06:22,819
Class H1

93
00:06:22,819 --> 00:06:23,500
¿Quién es?

94
00:06:24,339 --> 00:06:25,519
Diferenciándolo de este

95
00:06:25,519 --> 00:06:27,959
Diferenciándolo de

96
00:06:27,959 --> 00:06:30,399
Este que es un H1

97
00:06:30,399 --> 00:06:31,379
Normal

98
00:06:31,379 --> 00:06:34,040
Este lo hice un H1

99
00:06:34,040 --> 00:06:36,240
Class H1 para diferenciarle y para ponerle

100
00:06:36,240 --> 00:06:37,600
Propiedades que el otro no tenía

101
00:06:37,600 --> 00:06:39,800
Section Class

102
00:06:39,800 --> 00:06:40,579
Le puse primero

103
00:06:40,579 --> 00:06:42,680
Sandro Tichel

104
00:06:42,680 --> 00:06:44,740
H2 y H1 H3

105
00:06:44,740 --> 00:06:45,800
Explicando un poquito

106
00:06:45,800 --> 00:06:48,519
Un poquito de cultura general

107
00:06:48,519 --> 00:06:49,500
No sobre el tipo

108
00:06:49,500 --> 00:06:51,980
y después aquí hice

109
00:06:51,980 --> 00:06:54,160
un section class

110
00:06:54,160 --> 00:06:55,680
y con los iframes

111
00:06:55,680 --> 00:06:56,800
sacados de youtube

112
00:06:56,800 --> 00:07:00,040
esto, bueno, te voy a decir que lo he escrito yo

113
00:07:00,040 --> 00:07:00,699
pero es mentira

114
00:07:00,699 --> 00:07:04,000
entonces copié el enlace

115
00:07:04,000 --> 00:07:06,120
de youtube

116
00:07:06,120 --> 00:07:07,399
y los coloque tal cual

117
00:07:07,399 --> 00:07:10,100
le puse un

118
00:07:10,100 --> 00:07:11,639
class segundo para

119
00:07:11,639 --> 00:07:14,279
colocarles un display y que no estuvieran

120
00:07:14,279 --> 00:07:16,079
uno encima de otro, sino que estuvieran

121
00:07:16,079 --> 00:07:16,779
uno a la par

122
00:07:16,779 --> 00:07:19,779
hacer el mine y creo un minifolder

123
00:07:19,779 --> 00:07:21,579
este folder en plan

124
00:07:21,579 --> 00:07:22,759
página desarrollada

125
00:07:22,759 --> 00:07:25,779
un enlace a mi github

126
00:07:25,779 --> 00:07:27,800
y que acabe

127
00:07:27,800 --> 00:07:28,800
por mi nombre

128
00:07:28,800 --> 00:07:30,660
mi nombre real

129
00:07:30,660 --> 00:07:33,300
cierras el folder

130
00:07:33,300 --> 00:07:35,660
cierras el div, cierras el body y cierras

131
00:07:35,660 --> 00:07:36,360
el html

132
00:07:36,360 --> 00:07:39,959
vamonos a

133
00:07:39,959 --> 00:07:41,220
a lo que seria

134
00:07:41,220 --> 00:07:45,699
pues eso en plan

135
00:07:45,699 --> 00:07:57,319
aquí puedo abrir distintos tipos de html, bueno vamos a la página css, bueno en plan te va a explicar que se diferencia cada página de otra

136
00:07:57,319 --> 00:08:20,610
documentos, historia por ejemplo, historia, por ejemplo esta página de aquí se diferencia por el, bueno todos se diferencian por lo mismo

137
00:08:20,610 --> 00:08:46,009
1, archivo, abrir historia, abrir archivo, abrir archivo obras y abrir archivo datos.

138
00:08:46,529 --> 00:08:52,269
Aquí tenemos las cuatro páginas HTML que he utilizado para realizar lo que es la página

139
00:08:52,269 --> 00:08:59,230
general. Tenemos el index, tenemos el historias, tenemos obras y tenemos datos. ¿Qué es lo

140
00:08:59,230 --> 00:09:04,730
único que cambia de esas tres, estas cuatro páginas, pues el contenido del

141
00:09:04,730 --> 00:09:12,610
main. Por ejemplo, aquí en este main tenemos, en la historia tenemos cuatro

142
00:09:12,610 --> 00:09:21,110
sections que se separan por cada uno por un título. Tenemos el h1 que es el

143
00:09:21,110 --> 00:09:27,730
genérico en el que aparece biografía. Tenemos otro que es h3 que ya sería, que

144
00:09:27,730 --> 00:09:34,870
éste ya estaría por dentro que serían primeras obras y obras de madurez y últimos años explicando

145
00:09:34,870 --> 00:09:41,889
un poquito la historia de de sangre después tendríamos obras ahora sí que es un poquito

146
00:09:41,889 --> 00:09:48,610
más complicado que tendríamos un main con su respectivo h1 mejores obras y en todo este

147
00:09:48,610 --> 00:09:56,090
main se separaría por sexo y de todo eso se separaría por artículo o sea sexo sería lo

148
00:09:56,090 --> 00:10:02,409
que serían las filas y articles serían lo que serían las columnas siempre con un h3 para

149
00:10:02,409 --> 00:10:10,450
definir el título y con un enlace de la imagen y con su respectivo class para modificar las

150
00:10:10,450 --> 00:10:16,190
propiedades de la imagen entonces tenemos un sexo por ejemplo art y tenemos un sexo en el

151
00:10:16,190 --> 00:10:22,809
que cabrían la imagen de la fortaleza y la imagen de adoración a los magos

152
00:10:25,309 --> 00:10:30,590
y dentro de esto habría un artículo que se referiría a la fortaleza en el que habría su

153
00:10:30,590 --> 00:10:37,309
respectivo enlace y su respectivo clase y otro artículo que tendría su respectivo enlace y su

154
00:10:37,309 --> 00:10:45,470
respectivo y así hasta cuatro veces para crear el main de obras para que quede

155
00:10:45,470 --> 00:10:56,399
que quede tal que así. Te enseño como quedan historias

156
00:10:56,399 --> 00:11:09,649
y pues nos faltaría tus datos tus datos en plan lo único que cambia

157
00:11:09,649 --> 00:11:14,690
es el main y dentro de este main no hay sección sino from para crear una especie

158
00:11:14,690 --> 00:11:21,309
formulario, su respectivo h1 y dentro de este front hay un face cell, va a crear un contenedor

159
00:11:21,309 --> 00:11:28,870
dentro de ello y datos registros, le pones aquí todo lo que sería formularios, nombre

160
00:11:28,870 --> 00:11:34,070
de usuario, contraseña, repita contraseña, correo electrónico, con su respectivo input

161
00:11:34,070 --> 00:11:49,850
con el nombre, con la fecha de nacimiento, sexo con un input type radio, número de teléfono

162
00:11:49,850 --> 00:12:01,830
con un input type tel, color con un input color, y una vez hecho este, he hecho un da

163
00:12:01,830 --> 00:12:09,429
nuestra opinión con un label para clasificar, label list, nota, satisfaction y en todo esto

164
00:12:09,429 --> 00:12:14,769
pues he hecho una especial escala para que la persona que utilice esto pues pueda dar

165
00:12:14,769 --> 00:12:22,190
una opinión sobre esto y ¿qué más? he abierto un textarea para dar ya la opinión

166
00:12:22,190 --> 00:12:26,789
en plan, no estamos hablando de opinión pero hay que abrir un textarea para que se pueda

167
00:12:26,789 --> 00:12:36,389
escribir cositas y un section con class botones para modificarlo y sus respectivos botones

168
00:12:36,389 --> 00:12:45,090
un botón de enviar y un botón de grabar por defecto y pues lo mismo con un folder que

169
00:12:45,090 --> 00:12:52,669
no se que vale pues así queda la página una vez hecho esto pues te lo voy a mostrar

170
00:12:52,669 --> 00:13:02,450
quedaría tal que así, la página de inicio con su respectivo texto, la página de historia,

171
00:13:02,450 --> 00:13:19,929
la página de obras, la página de tus datos, y otra de la página de inicio, y bueno, ahora

172
00:13:19,929 --> 00:13:30,970
te va a mostrar lo que sería el CSS, el CSS pues tal que así, en plan, aparte de haber

173
00:13:30,970 --> 00:13:35,830
hecho el display que no me acuerdo donde lo he hecho pero debe estar por ahí

174
00:13:35,830 --> 00:13:42,169
modifique las tres propiedades de las imágenes poniendo imagen principal

175
00:13:42,169 --> 00:13:47,690
imagen de encabezado e imagen 3 los puse en medida para que los tres

176
00:13:47,690 --> 00:13:51,970
cambiaran en una misma fila y para darle así buen impacto a la persona que abra la

177
00:13:51,970 --> 00:13:56,690
página un h1 con un text ali center con una

178
00:13:56,690 --> 00:14:06,470
letra, con un tamaño, color de fondo y color de la letra. Con esto lo que hice lo de artes

179
00:14:06,470 --> 00:14:16,690
relacionistas y con un pad. Después el H1, que sería el título de todo, emplante salicente,

180
00:14:16,690 --> 00:14:25,970
rota de la letra, no sé qué, y con la diferencia de un fondo verde. Contenedor, le he puesto

181
00:14:25,970 --> 00:14:31,429
un fondo plano que sería todo el html por defecto tiene un fondo de este color

182
00:14:31,429 --> 00:14:37,850
que sería un fondo con los cremas, bueno con los carnecitos y rosita

183
00:14:37,850 --> 00:14:42,070
y el encabezado pues más de lo mismo

184
00:14:42,070 --> 00:14:50,129
después text1, el retrato que esto era complicado, le puse un border

185
00:14:50,129 --> 00:14:55,009
y le puse un tamaño adecuado para que no ocupara mucho

186
00:14:55,009 --> 00:14:59,509
después un main también con el mismo fondo

187
00:15:00,250 --> 00:15:05,289
esto es un class funsite 200 para poner el tamaño

188
00:15:05,289 --> 00:15:11,950
después separe los aside dependiendo de qué página porque cada aside tenía la

189
00:15:11,950 --> 00:15:16,870
única diferencia que había entre ellos era el height del fondo

190
00:15:16,870 --> 00:15:21,970
en cada esto hay un height diferente hay 2100

191
00:15:21,970 --> 00:15:30,210
1800, 1100 y 975 para que todo quedara compacto y que no hubiera mucha...

192
00:15:30,210 --> 00:15:35,909
sí que es... que quizás lo puede haber hecho de otra manera pero...

193
00:15:37,049 --> 00:15:43,409
después el fondo del formulario, el fondo lo puse de un color diferente para que

194
00:15:43,409 --> 00:15:51,509
viera un poquito más de seriedad y el menú, estos son los... las tablitas del

195
00:15:51,509 --> 00:15:58,830
menú que lo puse de color blanco, budding, text-align center, put the radius y margin

196
00:15:58,830 --> 00:16:11,350
button para darle separación. El artículo, esto es lo de las obras, que les puse un display

197
00:16:11,350 --> 00:16:16,570
y les puse un margin left para darles también separación. Lo de los botones, del enviar

198
00:16:16,570 --> 00:16:25,830
y reset después un texto alicente y aquí estarían las imágenes de las obras con sus clases las de

199
00:16:25,830 --> 00:16:33,009
fortaleza las de magos las del infierno delante las de primavera en busca el tema en menos más

200
00:16:33,009 --> 00:16:42,730
teclas del nacimiento de venus de retratada teclas de palacios del toro y aquí estaría por último el

201
00:16:42,730 --> 00:16:57,809
el class del folder con su respectiva letra con su respectiva tamaño color y por último

202
00:16:57,809 --> 00:17:05,970
el test write en plan elegí ponerlo a la derecha porque creí que en la izquierda estaba muy todo

203
00:17:05,970 --> 00:17:16,269
muy solapado. Y eso en plan así es como he hecho mi página sencilla y quedaría tal

204
00:17:16,269 --> 00:17:27,730
casi. No tiene mucho más misterio. La página de inicio, aquí pusimos dos enlaces externos,

205
00:17:27,730 --> 00:17:38,349
aquí la página de historia, la página de obras, la página y la página de datos.

206
00:17:38,349 --> 00:17:44,349
También cómo quedaría la arquitectura, pues la arquitectura quedará tal casi, vamos

207
00:17:44,349 --> 00:17:52,890
a borrar esto, con el index, las tres páginas html, el estilo css y una carpeta con las

208
00:17:52,890 --> 00:17:59,089
imágenes, donde se encontrarían todas las imágenes, y pues nada más, ha sido un placer,

209
00:17:59,089 --> 00:18:08,490
me ha llevado unas cuantas horas y unas cuantas horitas de lo de cabeza, pero creo que he

210
00:18:08,490 --> 00:18:11,730
hecho algo bonito. Muchas gracias y ha sido un placer.