Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Proyecto Final de HTML

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 30 de abril de 2025 por Santiago Z.

10 visualizaciones

Muy buenas a todos, bienvenidos a mi proyecto de final de curso de aplicaciones web, vamos a presentar la página web 00:00:00

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 00:00:11

Vale, pues como podemos analizar, en la página principal de Bienvenida 00:00:30

Tenemos una site a la izquierda con una foto y una tabla con varias listas con párrafos 00:00:45

Como título tenemos, creo que es un H3, un H2, un subtítulo 00:00:53

Tenemos un header con botoncitos, por ejemplo, que cuando pasamos el ratón por encima se vuelven de otro color 00:00:59

Luego tenemos un section en el que hemos metido una tabla 00:01:05

Para poder hacer las tres características 00:01:11

Dos fotos, las cuales pedían, por ejemplo, dos actividades que no dejaría de hacer 00:01:14

Estas fotos tienen enlaces 00:01:22

Si yo pincho en ellos se va a la plataforma para ver el vídeo, por ejemplo 00:01:24

Y en la otra igual, que es el estudio de lo que más me gusta 00:01:31

Luego aplicaciones que más utilizo 00:01:39

Pues Youtube Music 00:01:43

Que también tiene un enlace para ir a la plataforma 00:01:43

Principal 00:01:47

Y luego por abajo pues tenemos lo que es 00:01:47

El footer con un enlace a nuestro 00:01:54

GitHub 00:01:56

Luego tenemos Curriculum 00:01:56

Que hemos metido 00:02:04

Un Curriculum 00:02:06

Dentro de lo que es el main 00:02:07

El contenido de la página 00:02:12

Y poquito más 00:02:14

Hemos ido metiendo enlaces, párrafos, listas 00:02:18

Un poquito más, ¿no? 00:02:22

O sea, tampoco hay mucho más que contar 00:02:24

Luego en formulario, hemos metido un formulario 00:02:28

Como por ejemplo el que vimos a principio de curso 00:02:31

En HTML 00:02:34

Y poquito más, o sea 00:02:36

La verdad es que está funcionando todo 00:02:47

Podemos elegir por aquí las cosas 00:02:49

Si funciona 00:02:52

Sí, bueno, podemos observar que la página está funcionando 00:02:53

Y luego tenemos una última página 00:03:17

Donde nosotros hemos hecho el informe de desarrollo del proyecto 00:03:23

De cómo va a estar estructurado nuestra maqueta web 00:03:30

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

Luego estaría el header 00:03:40

que sería el título del main 00:03:43

por ejemplo, que he preferido ponerlo así 00:03:46

por dejar el menú de navegación con botones 00:03:49

he dejado a la izquierda 00:03:51

lo que es el aside, la tablita izquierda 00:03:55

con la foto, las listas de información 00:03:57

de los párrafos y demás 00:04:01

y luego pues poquito más, o sea, el main, la cabecera 00:04:02

un lateral, un menú de navegación y el pie de página 00:04:07

vale 00:04:10

y aquí vamos a meter el vídeo explicativo 00:04:13

pues que ahora mismo estamos grabando 00:04:15

en mi caso 00:04:17

lo subiré a youtube ya que he tenido problemas 00:04:19

con github a la hora de 00:04:21

subir vídeos demasiado grandes 00:04:23

demasiado pesados 00:04:25

así que 00:04:26

lo voy a hacer a través de youtube 00:04:28

bien, ahora si vamos 00:04:31

al código 00:04:33

podemos observar pues que 00:04:34

no tiene 00:04:37

no tiene mucho misterio, ¿no? 00:04:38

Hemos metido un comentario con nuestro nombre 00:04:42

para identificar la página web a nuestro nombre, 00:04:45

de que no nos la han copiado ningún compañero ni nada. 00:04:48

Tenemos un menú de cabecera en el GEA, 00:04:52

donde hemos puesto toda la información. 00:04:54

Aparte de antes del GEA tenemos el lenguaje en español, ¿no? 00:04:57

Le hemos indicado en español que queremos el lenguaje. 00:05:00

El formato de codificación de los caracteres, 00:05:03

el cómo va a ser leído y procesada la información por los navegadores. 00:05:06

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

que es el que nosotros queramos, la pestaña, 00:05:17

y le hemos dado un link de acceso a un fichero de estilos CSS aparte. 00:05:20

Luego dentro del body hemos separado varias partes, 00:05:26

por ejemplo en la página principal tenemos un div, 00:05:29

al cual le hemos dado una clase con CSS llamada contenedor, 00:05:32

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. 00:05:36

luego el aside que es la barra lateral 00:05:47

la tenemos a la izquierda 00:05:51

y tenemos una imagen a la cual le hemos puesto una clase 00:05:54

llamada foto, el recurso va a ser la foto 00:06:03

el enlace como tal de la foto 00:06:06

y luego tenemos una lista 00:06:09

que la hemos hecho con las etiquetas 00:06:13

ul ya que no quería ponerlo 00:06:16

como etiquetas ordenadas sino que prefería 00:06:20

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. 00:06:22

Le hemos puesto un título secundario en H2 00:06:39

Le hemos puesto con la etiqueta HR una línea separadora 00:06:44

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

Y a partir de aquí hemos metido una tablita donde hemos podido meter las características 00:06:55

Esto es lo que veíamos, las tres características en la tabla esa horizontal 00:07:01

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. 00:07:05

poco más, aquí acaba esta sección 00:07:31

y luego ya estaríamos entrando 00:07:37

aparte de las líneas separadoras que tenemos 00:07:40

pues en la sección de footer 00:07:42

que ya sería lo que es el pie de la página 00:07:44

al cual le hemos metido unos enlaces 00:07:48

y redireccionamiento al repositorio de github 00:07:50

como tal 00:07:55

y esto sería nuestra página principal 00:07:56

A la cual le ponemos los archivos CSS 00:07:59

Los tenemos aquí detallados 00:08:04

La primera etiqueta, por ejemplo, es que le hemos dicho que a todo el contenido del cuerpo 00:08:06

De la página web, pues tenga un ancho y un alto en específico 00:08:11

Con un formato de cajita 00:08:17

Luego al body le hemos puesto una imagen de fondo 00:08:19

Como con un color turquesa así de mar 00:08:23

hemos cogido y lo hemos ajustado tanto al ancho y al alto 00:08:26

con la propiedad background side 00:08:32

le hemos dicho a la foto que no se repita 00:08:35

porque si nosotros poníamos que se repitiese 00:08:37

la foto quedaría mal como fondo y ya no quedaría ajustada a la página 00:08:40

y luego también le hemos dicho que al menú de navegación 00:08:44

donde los botones tengan un fondo de color negro 00:08:48

aposta para que cuando pasamos el botón por encima 00:08:50

pues esté en color rojo con el ratón 00:08:54

le hemos dado también al menú de navegación 00:08:56

a los div que hemos creado 00:09:01

le hemos puesto para que se pongan en línea 00:09:03

con la propiedad display 00:09:07

le hemos dado un espaciado interno 00:09:10

para que entre cada botón de los cuatro que hay 00:09:13

tengan 20 píxeles en concreto de espacio 00:09:16

le hemos dado un ancho del 24% 00:09:18

cuánto va a ocupar de ancho cada botón 00:09:22

y los colores de cada botón 00:09:23

esto lo he hecho a posta, el ponerlo en color negro 00:09:27

básicamente porque si nosotros luego pasamos el botón por encima 00:09:31

se pone en rojo, como hemos dicho antes 00:09:35

y es a posta, dejarlo en negro para que cuando lo pases 00:09:38

pues se ponga en rojo por encima 00:09:40

luego hemos alineado los textos al centro 00:09:42

y luego ya dentro de lo que es el menú 00:09:46

pues hemos puesto igual un fondo de color negro 00:09:49

con la propiedad background 00:09:53

le hemos dado 00:09:55

como hemos visto antes 00:09:57

a los bits, les vamos a dar 00:09:58

un espaciado interno 00:10:01

que los bordes sean redondeados 00:10:02

con la propiedad 00:10:04

border radius, con el padding 00:10:06

vamos a darle un espaciado interno como hemos dicho antes 00:10:08

y luego lo que es la caligrafía 00:10:11

había que poner también 00:10:15

varios apartados de caligrafía 00:10:16

y le hemos puesto con la propiedad font variant 00:10:19

en small caps 00:10:21

para poder meter como pequeños detallitos con las letras 00:10:22

en TextDecorationNone le hemos puesto esto 00:10:26

ya que no queríamos que el texto tuviera subrayada nada 00:10:30

de lo que es la página 00:10:33

y bueno, un poquito más 00:10:35

la siguiente opción, pues eso, el Ahover 00:10:38

que es para cuando pasábamos el rato por encima 00:10:40

que eso ya lo hemos dicho antes 00:10:42

y luego pues más cosas 00:10:43

por ejemplo, como los estilos del título principal 00:10:47

que le hemos puesto para que se alinee al centro 00:10:49

que las palabras 00:10:52

se pongan como fijas con la 00:10:54

propiedad text transform 00:10:56

y también le hemos añadido 00:10:57

una caligrafía como por ejemplo 00:11:00

antes podíamos meter calibrí 00:11:02

arial black o cualquier cosa 00:11:04

pues en nuestro caso le hemos metido sans serif 00:11:06

y poco más 00:11:08

luego lo que es 00:11:12

la barrita a la izquierda 00:11:14

la tabla a la izquierda que tenía 00:11:16

que tener, la vamos a aplicar 00:11:18

con la propiedad de aside 00:11:20

a la cual le hemos dado un fondo 00:11:21

de color negro, con la propiedad 00:11:24

background, al texto 00:11:26

le hemos puesto un color blanco 00:11:28

le hemos puesto 00:11:30

para que ese cuadro 00:11:32

flote a la izquierda 00:11:34

que se posicione por encima de la foto 00:11:35

de fondo 00:11:38

le hemos dado con la propiedad width 00:11:38

y con la propiedad height, una anchura y una altura 00:11:42

como lo tenemos aquí 00:11:44

marcados con píxeles y porcentajes 00:11:46

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. 00:11:48

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. 00:12:01

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

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 00:12:17

para que no quede todo apelotonado, le hemos dado un 200% y poquito más 00:12:29

luego en el contenido principal en el main hemos utilizado la propiedad float igual para que flote la información o la foto 00:12:36

lo que es este section, por así decirlo, por encima de nuestra foto de fondo 00:12:44

y le hemos puesto también un padding para que tenga como más anchura a nivel interna y demás 00:12:50

y además con la propiedad width un ancho del 75% para que ocupe de izquierda a derecha 00:12:59

pues un poquito más grande o un poquito menos para que quepa dentro de lo que es la tablita 00:13:06

Lo que sería el flow 00:13:13

El aside, perdón 00:13:15

Y luego estilo de la sección de características 00:13:17

Exactamente lo mismo 00:13:21

Le hemos puesto tres columnas 00:13:23

Le hemos puesto la propiedad column count 3 00:13:25

De tal manera que 00:13:28

Nosotros teníamos las tres personalidades 00:13:29

O tres cualidades y estaban en columna 00:13:31

Dentro de una tabla 00:13:33

Un width y un height 00:13:34

Para que tenga un ancho y una altura 00:13:37

La propiedad flow 00:13:38

Para que esté, igual que hemos dicho antes 00:13:40

Por así decirlo, flotando 00:13:42

por encima de la foto de fondo 00:13:44

unos 00:13:46

márgenes a nivel de izquierda 00:13:48

márgenes a nivel a la derecha con la propiedad 00:13:50

major y top y margin button 00:13:52

y poquita cosa más 00:13:54

colores de fondo que le hemos puesto con background 00:13:58

color, le hemos dado padding, relleno interno 00:14:00

y 00:14:03

poquita más 00:14:04

tampoco hay mucho más que comentar 00:14:05

porque básicamente es lo mismo 00:14:09

al resto del código le hemos 00:14:10

dado propiedades de tamaño 00:14:13

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. 00:14:14

luego ya nos vamos a dirigir al estilo de pie de página 00:14:37

lo que sería el footer 00:14:41

al cual le he puesto un fondo de color negro para que haga juego 00:14:42

el texto que esté en color blanco 00:14:46

y que el texto esté alineado 00:14:49

y poco más 00:14:53

luego a los estilos de subtítulos H3 00:14:55

pues le he puesto sin margen superior 00:14:59

y que estén alineados al centro 00:15:02

con estas dos propiedades, con margin-top 00:15:05

y con test-align-center 00:15:07

para que se alineen al centro 00:15:09

vamos a por la segunda parte 00:15:10

vamos a centrarnos 00:15:15

ahora en currículum, por ejemplo 00:15:20

poquita cosa más que detallar 00:15:21

hemos utilizado en el menú de 00:15:26

navegación varios divs, ¿no? como hemos 00:15:28

hecho antes, le hemos dado la clase menú 00:15:30

hemos puesto 00:15:32

enlaces de referencia para que cuando alguien 00:15:33

clique vaya a ese 00:15:35

index, ¿no? y se despliegue esa página 00:15:38

esto sigue siendo un poco igual 00:15:39

la parte de la side, la parte lateral 00:15:41

sigue siendo exactamente lo mismo 00:15:43

y nosotros 00:15:46

aquí a partir del main hemos metido 00:15:48

lo que es el contenido 00:15:49

lo que viene siendo 00:15:50

justo pues todo lo que es el 00:15:53

currículum, como tal 00:15:55

como podemos observar 00:15:57

le he metido una lista a través de un section 00:15:59

el cual le da una clase de 00:16:01

certifications, luego le he metido 00:16:03

un subtítulo 00:16:06

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? 00:16:07

el archivo CSS de Curriculum 00:16:23

vale, tenemos más o menos un poquito de lo mismo 00:16:28

tenemos un body al cual hemos dado varias propiedades de imagen de fondo 00:16:32

esto sigue siendo exactamente igual que en las otras páginas 00:16:37

y en principio lo que viene siendo el CSS tiene que ser 00:16:39

más o menos parecido 00:16:45

porque es que al fin y al cabo es lo mismo, estamos metiendo una propiedad 00:16:46

de navegación 00:16:53

con tips, estamos metiendo 00:16:55

un main, estamos metiendo 00:16:57

la propiedad 00:16:59

esta que hemos dicho antes 00:17:01

esto de aquí para que tengan 00:17:02

formas de caja 00:17:05

al fin y al cabo 00:17:06

es un poquito lo mismo 00:17:09

lo que viene siendo es un poquito lo mismo 00:17:10

y poquito más 00:17:12

que hay que detallar de aquí 00:17:15

si nosotros nos vamos 00:17:16

por ejemplo ahora al formulario 00:17:19

de recogida de datos 00:17:21

podemos ver 00:17:22

que hemos ido 00:17:25

metiendo como 00:17:26

en un formato de lista 00:17:28

lo que son los label 00:17:30

y los input 00:17:32

de tal manera que queden como si fuese una lista 00:17:34

pero es un cuestionario 00:17:37

esto lo hemos visto pues que 00:17:38

aunque esté en modo lista 00:17:41

pero no esté en lista como tal 00:17:42

pues tenemos los apartados en lista 00:17:44

como tal 00:17:46

tampoco sé cómo explicarlo muy bien 00:17:47

o sea, realmente son listas dentro de un UL 00:17:50

que están dentro de un fieldset 00:17:54

y que tienen un formato 00:17:56

para que luego con el CSS se pueda cuadrar 00:17:58

un poquito más, al fin y al cabo es todo lo mismo 00:18:02

un poquito más 00:18:08

esta guía de, por ejemplo 00:18:11

currículum o formulario de recogida de datos 00:18:14

lo he cogido de aquí 00:18:18

toda la información que he ido recogiendo 00:18:20

ha sido a través de los ejercicios 00:18:23

a lo largo del curso 00:18:24

un poquito más 00:18:25

así que 00:18:27

tampoco queda mucho más que detallar 00:18:31

vamos con el final de nuestro 00:18:34

proyecto web, que es la página 00:18:38

de informe de desarrollo 00:18:40

bueno, se me ha olvidado decir que cada carpeta 00:18:41

de estas tiene su carpeta propia de CSS 00:18:46

con su carpeta propia de imágenes 00:18:48

la cual están tirando los enlaces 00:18:49

y poquito más 00:18:51

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. 00:18:54

luego por otro lado 00:19:05

tenemos el main, aquí lo hemos cambiado 00:19:08

un poquito, ha sido 00:19:10

meter un poco 00:19:11

lo que es el vídeo 00:19:13

en columna hacia abajo 00:19:16

meter lo que es el vídeo 00:19:18

y la foto de como está producido 00:19:19

nuestro layout, de nuestro proyecto 00:19:22

le hemos dado 00:19:24

a estas fotos 00:19:27

le hemos dado una especie 00:19:29

de CSS en concreto 00:19:31

pues por ejemplo esta es la del 00:19:33

El menú de aside, esta no nos interesa, menú de listas, estilo del main. 00:19:35

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, 00:19:40

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

De tal manera que quede cuadrado dentro de lo que es el menú del main, el contenido del main, mejor dicho. 00:19:53

y luego el vídeo pues igual le hemos dado unas propiedades 00:20:04

para que tenga las mismas propiedades 00:20:07

de tamaño que la foto 00:20:10

aquí en este caso estoy dándome cuenta 00:20:14

que tengo que ponerle 50 así que solucionado 00:20:16

y nada, poquita cosa más así que 00:20:19

este es nuestro proyecto final de aplicaciones web 00:20:23

en el cual hemos producido una página web 00:20:27

y hemos conseguido 00:20:29

explicar el código pasito a pasito 00:20:33

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. 00:20:35

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? 00:20:51

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

Yo en mi caso estoy trabajando con Opera GX 00:21:12

Pero perfectamente podemos probar en Brave y podemos observar que funciona 00:21:16

Si nosotros nos metemos a Google Chrome y buscamos 00:21:28

Podemos observar que funciona y que no hay muchos detalles como tal 00:21:32

De diferencia a lo que me refiero 00:21:38

y luego como un navegador específico 00:21:41

el Leche o el Mosfila Firefox 00:21:44

que podemos observar 00:21:46

que también funcionan 00:21:48

y como último el Firefox 00:21:50

podemos observar que también 00:21:52