Saltar navegación

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

Video proyecto AW

Ajuste de pantalla

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 1 de mayo de 2025 por Mario B.

9 visualizaciones

Más información Transcripción

Descargar la transcripción

Hola a todos, soy Mario y os voy a enseñar mi proyecto de aplicaciones web. 00:00:02
Vamos a empezar contando lo que es mi proyecto en sí. 00:00:09
Tenemos un header, un aside, una barra de navegación, que en todos es igual. 00:00:16
Si te das cuenta, no solo cambia el header, o sea, el título, perdón, que consta de un aside con nuestra foto tal y con varias fotos nuestras. 00:00:25
Aquí tengo tres características sobre mí, que aquí en el index es un section, que lo he dividido en tres, empático, trabajador y disruptivo, por ejemplo, y lo he puesto en formato de columna, para que quede así, en formato de columna, con su correspondiente titulito, en fin. 00:00:44
luego tengo dos actividades que no debería hacer 00:01:06
que esto es también otro section 00:01:11
bueno es un h2 y debajo 00:01:15
un section que por ejemplo esto 00:01:19
son dos titulitos con las imágenes abajo 00:01:22
que esta por ejemplo es un link aquí cuando yo 00:01:27
jugaba, este es mi compañero cuando yo jugaba a la front zone 00:01:31
y estas de, por ejemplo, hacer motocross, por ejemplo, tenéis aquí, por ejemplo, si dejo 00:01:34
el ratón encima de la imagen, sale un titulito ahí como motocross, entonces el título, 00:01:41
cuando pones el título en la imagen, y luego más. Y luego, la primera opción en un web 00:01:48
que más uso es Instagram, que tal y igual que la de Fronton, es un enlace que pinchas, 00:01:56
te lleva a Instagram. Y aquí también. Y luego aquí tenemos un footer, que en todas 00:02:03
también es igual, lo cubrí con un formulario y ven todas iguales, que te lleva al repositorio 00:02:11
en el que está la página que he creado. Yo todavía el repositorio no lo he creado, 00:02:18
no te lleva a nada, te lleva a mi GitHub, pero quiero ponerle ahora cuando termine, 00:02:25
que te lleve directamente al repositorio donde está este proyecto subido. 00:02:31
Seguimos con el currículum. Ah, bueno, otra cosa que no he dicho es que aquí, cuando 00:02:37
doy los botones, tengo el cursor encima y se cambia de color, como veis. 00:02:41
Aquí en el currículum tenemos varias partes. Tenemos el currículum. Esto es el aside. 00:02:46
Aquí tenemos un main, que es lo que envuelve todo, que es todo esto, todo esto que es azul, todo eso es, y un div. 00:02:58
Es el primer div que se llama encabezado, pues es esto. 00:03:11
Ahí tengo la foto, mi nombre y un breve resumen. 00:03:15
Y soy estudiante. 00:03:20
Esto lo he conseguido gracias a una etiqueta de lista para que me lo quede así en ese formatito ahí a la derecha. 00:03:21
Queda bastante bien con un dibujito al lado. 00:03:35
Luego tenemos educación y formación. 00:03:41
que aquí he abierto otro DIP, que es ya lo que envuelve el resto del documento, si no me equivoco, sí. 00:03:43
Aquí en el DIP tenemos un pequeño section, aquí no, tenemos aquí otro section, que es, por ejemplo, 00:03:56
aquí he elegido poner los estudios que tengo y que estoy usando ahora mismo. 00:04:07
el está en formato de tabla, con los ternes y los th y td, y así para que quede ordenado 00:04:13
el rezo. Luego tenemos aquí otro section, que es el que, por ejemplo, he puesto los 00:04:21
idiomas que domino, por decirlo así. Bueno, sí, los idiomas que domino. Aquí tienes 00:04:32
es un colspan, que es el para la tabla. O sea, está el TH y luego el atributo colspan 00:04:39
para dividirlo en dos. Luego, ¿qué más? Tenemos aquí toda la tabla 00:04:47
con los TR, TH y TD, para que quede así bien. Y luego aquí una pequeña leyenda para que 00:05:01
veáis lo que significa cada cosa. Es esta. Aquí lo he hecho mediante un spam. 00:05:11
Luego demás. Esto de habilidades, personas y digitales. 00:05:21
bueno, son pequeñas cosas que 00:05:26
mías de mi persona 00:05:28
pues que hay cosas que domino 00:05:31
personales y 00:05:32
y digitales 00:05:34
que es esto 00:05:36
y esto 00:05:38
bueno, que esto es la verdad que 00:05:40
me queda bastante bien con 00:05:42
con la barrita esta 00:05:43
y queda así ordenado y bastante bien 00:05:45
y luego voy a terminar 00:05:48
pues el footer, que en todas como ya he dicho 00:05:49
antes es igual 00:05:52
seguimos con 00:05:53
el formulario, que aquí es un poquito más complejo. Es la primera estructura, el título, 00:05:56
el menú de navegación y el aside. Y aquí todo el resto del formulario que tengo. Y 00:06:04
empieza aquí. Esto es un span, que es este, que rellena un título, pareciera un subtítulo 00:06:13
para que lo vea el usuario. Y aquí tenemos, por ejemplo, esta primera parte, que es el 00:06:22
dato de registro, que es un fieldset. Cada uno es un fieldset diferente. Por ejemplo, 00:06:28
tenemos tres. Y luego tenemos un correo electrónico, que es el type del input, o sea, es un input 00:06:36
con tipo email para que, por ejemplo, si escribo algo tenga que llevar un arroba detrás. 00:06:48
Por ejemplo, así. Ya dejaría enviar, aunque no me dejaría enviarlo porque tengo que rellenar 00:06:55
todas, pero vamos, ahora lo veis. Otro label y otro input con tipo de texto, este, como 00:07:03
máximo tiene que ser 15, y bueno, aquí como veis también son todos requeridos. Eso quiere 00:07:16
decir que no te dejan enviar el formulario hasta que no has completado los campos y los 00:07:24
requisitos de cada campo. Luego tenemos aquí una contraseña de tipo 00:07:29
password, que es para que salga sí, con puntito y medio de letras, y que tenga mínimo seis 00:07:38
y máximo quince, eso quiere decir que no te deja ver el formulario si tiene menos de 00:07:49
seis o más de quince, o sea, tienes que tener entre medias, y también es requerido. 00:07:54
Y luego aquí tenemos otro fieldset, que ya es el más grande, que empieza con el nombre, 00:07:59
tipo text, con el id de nombre, para que salga el nombre. 00:08:12
Nombres y apellidos, como veis, son todos requeridos. 00:08:17
Fecha de nacimiento y el tipo date, que esto es para que salga así, para que podáis meter 00:08:20
la fecha de nacimiento de cada uno, que se haya guardado. 00:08:26
Luego tenemos aquí el sexo, que es un label con diferentes inputs para que te deje elegir 00:08:30
solo si te deja elegir, por ejemplo, una mujer, pues no tendría sentido. 00:08:45
¿Qué más? Tenemos también la altura en centímetros, que es de tipo number, con la 00:08:48
que se da así, y vais poniendo lo que queráis. También me parece que podéis poner aquí 00:08:57
un 5, por ejemplo. Va subiendo de 10 en 10. Eso aquí se hace así, con el rango de su 00:09:01
área de 10 se pone con este. Y aquí mínimo de 100 y máximo de 300. 00:09:10
Luego tenemos el teléfono móvil, que es formato de un tipo de teléfono y también, como este, es requerido. 00:09:14
Luego tenemos un label con un select para que podamos ir eligiendo lo que somos, 00:09:29
o sea, lo que cada persona, para que se abra una lista con lo que cada uno sea, casado, casada, tal. 00:09:37
Y aquí un color preferido, que es con este tipo de color, para que salga así, que podéis elegir lo que queráis. 00:09:46
Y luego tenemos aquí el último fiel set, que parece mucho, pero no es muy complejo, la verdad. 00:09:56
tenemos este tipo de checkbox para que en este caso sí que nos deje elegir varios a la vez del 00:10:03
mismo tipo. Aquí si fuese así como en el otro, que sólo nos deje elegir uno, pues no tendría 00:10:16
sentido. Y aquí pues para el DMT, el CDN y el ZAP. Y luego aquí, en idiomas es igual, 00:10:22
igual que en otro. Y luego aquí, si sabéis otro tipo de idioma, pues le podéis escribir 00:10:31
ahí, con este. Y luego le he puesto este, para saber si sean aves o ingles, pues para 00:10:39
para elegir si es un tipo bajo o medio, que es con este, con el option y con los values. 00:10:51
Y luego quitan con un mínimo de 1 y un máximo de 3. 00:11:01
Y luego también, si tenéis habilidades que queríamos saber, pues lo podéis escribir 00:11:06
aquí también. 00:11:14
Por ejemplo, voy a rellenarlo todo para que veáis cómo queda. 00:11:15
Para esto, por ejemplo, ponemos esto, esto, esto... 00:11:20
Este no lo tengo requerido para que la gente, si no tiene IDGA, 00:11:29
que no le hace falta que lo ponga y te deje enviarlo. 00:11:33
Ponemos esto y aquí ponemos algo. 00:11:37
Le damos a enviar y pone aquí que formulario procesado. 00:11:40
Y si por lo que sea lo sabéis confundido o algo, 00:11:44
le doy aquí a los efectos y se resuelta todo, se queda todo en blanco. 00:11:47
Y como he dicho antes, pues el footer, con lo que me lleva a mi GitHub. 00:11:53
Y luego ya para terminar tenemos sobre mi proyecto, a ver si sigue grabando esto, sí. 00:12:00
¿Qué tenemos? Pues como os he dicho antes, tenía un header, el título que es esto, 00:12:08
del nav, de navegación, que son los botones eléctricos que tengo aquí, el main, que 00:12:12
en este caso es todo esto azul que tengo, este cuadrito azul, y luego el footer, como 00:12:18
he dicho antes. Y aquí no tenemos gran cosa, tengo una foto para que quede más claro cómo 00:12:25
es. Esta es una lista de documentación que tengo que poner bien para cuando luego te 00:12:31
lo envíe, cuando le pinches aquí, te salva este archivito. Y luego un vídeo. Este es 00:12:36
un vídeo de prueba que he puesto ahí. Luego, cuando termine de grabar este vídeo, quito 00:12:45
este y pongo el que estoy grabando ahora mismo, para que quede bien. Y bueno, vamos a ir empezando 00:12:49
con esto, con lo que pide la documentación, vamos. 00:12:54
Pero que empezamos con los enjabezados. 00:13:06
Pues aquí tengo algunos puestos. 00:13:08
Por ejemplo, aquí en el índex tengo un H3, un H2, el H1, 00:13:14
que es el título principal, que esto no tiene mucho misterio. 00:13:20
Bueno, esto lo sabéis todos, contra el más pequeño es el número de aquí, el más grande. 00:13:26
El h1 es el más grande, el h6, o por ejemplo, el h1 es más grande que el h3. 00:13:33
Con lo cual, lo que está aquí va a ser el tamaño más grande que este. 00:13:38
Luego tenemos párrafos, que en todo el documento solo tengo uno, que es este, que es lo que cuenta, lo que contó antes, lo que consta el layout. 00:13:45
Luego tenemos aquí los enlaces. 00:13:58
Aquí, por ejemplo, en todas las páginas tengo la barra de navegación, en el NAMP tengo esto, que es un enlace a, por ejemplo, este, que te mande al index. 00:14:01
Es este algoritmo, esta es la fórmula, es básicamente esto de aquí. 00:14:12
Estos son los enlaces. 00:14:18
Imágenes, que aquí tengo unas cuantas. 00:14:21
Aquí, en el index, tengo la de... 00:14:24
Espera que las encuentre. 00:14:31
Aquí están, puedo escondirlas. 00:14:33
Aquí tengo una imagen con el class y todo el logotipo. 00:14:36
Con lúgico tengo un CSS que lo enseñaré más después y poquito más. 00:14:40
Aquí tengo otra imagen, la del motocross, y eso. 00:14:48
Y tablas, pues aquí se ve bien, una tabla grande que tengo es la del formulario, 00:14:53
perdón, la del currículum, la de compresión oral, frita, la de los idiomas, 00:15:01
con la etiqueta tabla y con el trt h y demás 00:15:10
en las listas que aquí tengo en el currículum también es este aquí por 00:15:16
ejemplo con el huele y le leí para crear las listas 00:15:23
lo tenemos en los bloques lo que es lo que divide el documento que son los 00:15:32
los dip y los section, el área que tengo en todos, tengo aquí el... bueno, aquí dejo el index, 00:15:39
un section, un dip, también tendré por ahí, aquí tengo dips, eso queda claro, los formularios, 00:15:51
que bueno, eso es todo lo que enseñé antes, también formularios, pues todo esto es un formulario, 00:16:02
el FIETCH para diferenciar, con el label, el input, lo que le enseñaba antes básicamente. 00:16:07
El vídeo, que le tengo aquí en el subproyecto, que es aquí, con la etiqueta vídeo, que aquí pones la 00:16:17
ruta y el tipo de vídeo. En mi caso es mp4 porque tengo configurado el OBS para que me lo grabe así. 00:16:24
Luego el width y el height lo tengo en el CSS, que lo enseño luego. 00:16:31
El estilo es el CSS. 00:16:38
Selección de distintos tipos. 00:16:42
Pues aquí en el CSS tengo diferentes líneas con diferentes... 00:16:44
Aquí un punto foto con distintos electores, un main.index. 00:16:51
Aquí dos para que lo haga a la vez. 00:16:55
Aquí solo uno para que me haga solo este. 00:16:58
Aquí un punto de características, que por ejemplo es este, es este, para que solo me haga esto, esto es ir un poco paso a paso. 00:17:00
Colores y fondos, pues el fondo del documento, como veis aquí, es una imagen, aunque esté muy blanco, es una imagen, esta de aquí se ve bien, que la tengo puesta aquí, con el background de imagen. 00:17:12
Y el background repite es para que la imagen no se repita, no se sobreponga ni nada. 00:17:27
¿Qué más? Bueno, aquí dimensiones y unidades. 00:17:34
Pues, prácticamente en todos los selectores tengo un padding. 00:17:40
un padding, bueno, esto no lo tenía que haber, un width y demás. 00:17:46
Width, Height, Margin, 00:17:52
para dimensionar 00:17:55
lo que me estoy refiriendo, este punto foto, 00:18:00
pues para darle un width de 200 píxeles. 00:18:03
Y si me voy a poner un formato de píxel, un formato de porcentaje. 00:18:09
Se veía cada uno como mejor le venga. 00:18:12
Y pues, iba cambiando. 00:18:14
¿Qué más? Aquí tengo más. 00:18:18
Modelo de caza. 00:18:22
Que esto me parece que eran los main y... 00:18:25
O sea, no, perdón, el main, el pavings y demás. 00:18:29
Me pavings, a ver si encuentro alguno con pavings, para que lo podáis ver. 00:18:34
Pavings. 00:18:40
Y aquí tengo un padding para el footer, pues un padding de 10 píxeles. 00:18:42
¿Qué más? 00:18:50
Ese es el fondo, pues esto es el background color, background de imagen. 00:18:53
El background de imagen es para el fondo, pues aquí. 00:19:01
y el background color 00:19:06
como tengo aquí 00:19:09
en el menú hover 00:19:11
este tributo es para darle 00:19:12
más importancia respecto al 00:19:15
resto de 00:19:18
tributos 00:19:20
aquí tengo el background color 00:19:21
cuando 00:19:23
esta línea 00:19:24
sirve para que cuando yo ponga el ratón encima 00:19:27
de esto se ponga 00:19:29
el color que le he dicho 00:19:31
es este 00:19:32
Esto se puede poner en un formato de red de veo, en un formato de color normal como éste. 00:19:34
Eso ya depende. 00:19:39
Y aquí tenemos el posicionamiento y el float. 00:19:45
Esto es para que sea flotante de lo que tengo. 00:19:49
Por ejemplo, este aside que tengo para que sea... 00:19:53
Esto se traduce en que sea el color, que sea este color. 00:19:57
este para que le parece este poquito 00:20:04
with hate y marito marito pues esto es esto es marito 00:20:11
esto pues poco a poco 00:20:17
el texto pues aquí tengo tengo bastantes 00:20:21
característica de texto son 00:20:28
Son pues todas estas, el Width, Margin, el Membrane Radius, el Margin Toe, que hay bastantes. 00:20:32
Luego, el Fuente, que esto es para, tengo aquí al principio de todo, el Times New Roman, 00:20:51
pues es para que te ponga esto, la fuente, que entonces es igual, o sea, es el mismo. 00:21:00
Luego tenemos los enlaces, pues son los menús de la traducción. 00:21:13
NapDip, este por ejemplo, para que el color de la letra sea negro, el fondo sea blanco, 00:21:23
el borde radio es para que las puntas sean medio redondeadas, como esto, por ejemplo, 00:21:37
lo que veis es medio redondeado y poco más. 00:21:43
Luego tengo también los estilos de listas, que están… 00:21:51
las tengo aquí miradas abajo. 00:21:59
He cambiado cada cosa según nos convenga. 00:22:14
¿Qué más? 00:22:22
Por ejemplo, tengo para que aplique a la tabla de estudios, al TH de la tabla de estudios, 00:22:24
al TH de la tabla de nivel de idiomas, al TH de la tabla de nivel de idiomas, pues para 00:22:42
que aplique a las cuatro los mismos atributos que son estos. 00:22:48
Y luego pues esto, por ejemplo, para que es igual que el T a tabla de nivel de idiomas 00:22:53
y el TH a tabla de nivel de idiomas, para que el texto esté centrado. 00:23:00
Si más, pues las tengo aquí de arriba, que habéis visto antes. 00:23:03
Son wii de 280 píxeles, pues esto es para que vaya cambiando poco a poco, pues pongo 00:23:28
aquí 300, pues la cosa, vais a ver que igual se descuadra, este tengo aquí, igual queda 00:23:33
muy grande para el gusto, esto depende de cada uno y lo vais cambiando según venga. 00:23:42
Luego tenemos aquí el border, que es para este bordecito de aquí, esto se cambia aquí, 00:23:50
Si queréis que tenga 3 píxeles, esto ya lo habéis cambiado a modo de 8 píxeles y que sea de color negro. 00:23:56
Veis que se quedan bien. Pues queda más o menos esto ya, según cada uno. 00:24:02
Sí. 00:24:10
¿Veis? Ya, así ya queda mejor. Esto, pues, como he dicho, cada uno según le convenga. 00:24:11
Espera, bueno, el momento que me enchufo el ordenador es que me estoy volviendo sin batería. 00:24:19
¿Los formularios? Pues esto es 300. Esto está aquí abajo, los formularios. 00:24:38
Esto es el span, el formly, el fieldset, el fieldset de lista, el fieldset normal, 00:24:53
esto me parece que era para 00:25:01
qué más ahí está cambiando un poquillo para que lo que sirve cada cosa por ejemplo 00:25:30
Vamos a ir a aquel principio. El punto de actividades. Si no me equivoco, es esto. Las actividades. 00:25:40
Por ejemplo, una de las características que igual se ve mejor que las características 00:26:02
es este dip. 00:26:09
Por ejemplo, cambiamos el padding para que veáis cómo igual cambia. 00:26:10
¿Ves? 00:26:21
Esto es para que quede como un margen más arriba respecto a esta línea y aquí pues 00:26:22
bajo el más más ancho pues como he dicho cada uno pues que lo vaya haciendo con el documento 00:26:30
el vídeo por ejemplo 00:26:44
pues si quito esto confundido yo si se queda así también se sentiría si tendría que quedar 00:26:49
porque como solo hay un vídeo 00:26:59
en todo documento, pues 00:27:00
se queda aquí 00:27:02
por ejemplo, aquí del vídeo 00:27:03
una cosa que no he dicho del vídeo 00:27:08
es que este atributo sirve para que 00:27:11
el usuario 00:27:13
que cuando vea el vídeo 00:27:14
cuando sale aquí, pues pueda ir avanzando 00:27:16
puede ir retrocediendo 00:27:18
para que sean estos controles 00:27:20
vale, para 00:27:22
y ya pues poco más 00:27:26
tenemos 00:27:29
el CSS 00:27:30
los botones 00:27:33
los botones son 00:27:36
estos que tengo aquí 00:27:39
esto ya pues 00:27:41
como en todo 00:27:45
eje de 00:27:46
más 00:27:48
margin top por ejemplo 00:27:49
para que 00:27:51
por ejemplo si quito este 00:27:53
aquí hay atributo, lo dejo así. Se quedaría muy pegado aquí. Pues en vez de, para facilitar 00:27:56
la vida, poner un margin-top, se va a quedar centrado. No hace falta que pongamos un margin-left, 00:28:03
o sea, un margin por debajo. Por ejemplo, margin-button, que es para que quede por debajo. 00:28:10
Con poner solo el marinto, pues con eso valdría. 00:28:21
A ver cómo queda. 00:28:24
Bueno, como he puesto los 40 en cada lado, pues queda justo la mitad. 00:28:25
Claro, como he dicho, esto sobra. 00:28:30
Con poner marinto por ahí, valdría. 00:28:33
Y poco más. 00:28:38
Aquí tenéis el documento, que lo subiré ahora y cualquier pregunta, pues me decís. 00:28:40
Valoración:
  • 1
  • 2
  • 3
  • 4
  • 5
Eres el primero. Inicia sesión para valorar el vídeo.
Etiquetas:
Empresa
Niveles educativos:
▼ Mostrar / ocultar niveles
  • Formación Profesional
    • Ciclo formativo de grado básico
      • Primer Curso
      • Segundo Curso
    • Ciclo formativo de grado medio
      • Primer Curso
      • Segundo Curso
Autor/es:
Maruio Bravo de Francisco
Subido por:
Mario B.
Moderado por el profesor:
Miguel Angel Del Cura Varas (miguel.delcura)
Licencia:
Reconocimiento - No comercial - Sin obra derivada
Visualizaciones:
9
Fecha:
1 de mayo de 2025 - 22:00
Visibilidad:
Público
Centro:
IES VILLABLANCA
Duración:
00′ 08″
Relación de aspecto:
1.78:1
Resolución:
1280x720 píxeles
Tamaño:
574.17 MBytes

Del mismo autor…

Ver más del mismo autor

Comentarios

Para publicar comentarios debes entrar con tu nombre de usuario de EducaMadrid.

Comentarios

Este vídeo todavía no tiene comentarios. Sé el primero en comentar.


EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid