Saltar navegación

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

video explicando mi pagina web

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 Rubén P.

6 visualizaciones

esto es un video para explicar mi pagina web

Más información Transcripción

Descargar la transcripción

Hola, os enseño aquí mi página web, aquí está mi carpeta con mis imágenes del vídeo de la página web 00:00:00
y aquí están mis HTML, currículum HTML, formulario HTML, índex HTML y sobre mi proyecto HTML 00:00:11
y aquí está el índex CSS donde están todas las modificaciones 00:00:18
Os voy enseñando, aquí tengo mi index.html, mi header, mi nav, mi currículum y os iré explicando cómo funciona esto paso a paso. 00:00:24
Aquí va mi formulario, mi index 00:00:46
Os iré explicando el CSS para que vale 00:00:50
Y todo para que se vea que está bien 00:00:54
Bueno, empezamos mostrando la página 00:00:58
Como veis 00:01:03
Es una página principal muy sencillita, la verdad 00:01:06
Con un header, está bastante bien 00:01:09
Página principal 00:01:13
donde podemos 00:01:14
bueno, aquí están mis características 00:01:16
y os voy explicando 00:01:19
que hace cada 00:01:22
cada etiqueta 00:01:23
lo que hace el header 00:01:27
este que tenemos aquí 00:01:28
lo que sería 00:01:34
esto, página principal 00:01:35
donde, bueno 00:01:38
donde va todo 00:01:40
donde explica más o menos 00:01:41
Lo que es la página principal 00:01:43
La verdad 00:01:45
Bueno, aquí tenemos el dip 00:01:46
Que es 00:01:49
¿Cómo explicarlo? 00:01:51
El sitio donde está 00:01:54
Bueno, cada etiqueta para meterme 00:01:55
Aquí lo muestro 00:01:59
Para desplazarnos 00:02:01
A cada página 00:02:03
Bastante útil, la verdad 00:02:04
Aquí te puedes ir metiendo 00:02:07
A cada página 00:02:08
Y lo vas mirando 00:02:10
para eso vale el DIP 00:02:12
la verdad, el NAPDIP 00:02:13
es para que no se me junte 00:02:15
el, bueno 00:02:17
la página principal con el formulario 00:02:19
y el currículum, tengo como un espacio 00:02:22
como un espacio entre uno 00:02:23
y el otro, para que 00:02:26
no se molesten 00:02:27
para que no quede tan mal, la verdad 00:02:28
la A es para el 00:02:31
HRF 00:02:34
que ahora mismo no, o sea lo tengo 00:02:34
en otra página, pero bueno, es para el HRF 00:02:37
un contenedor 00:02:39
Por aquí, para los colores 00:02:41
El fútbol 00:02:44
Que es una 00:02:47
Bueno, lo voy explicando 00:02:49
Que es 00:02:51
Bueno, es que el fútbol no 00:02:52
No lo tengo 00:02:55
A ver, esto elimino 00:02:56
No tengo nada 00:02:59
Vale 00:03:02
Tengo el contenedor 00:03:07
Tengo aquí una especie de cosas 00:03:08
La verdad 00:03:11
Tengo aquí salir de fiesta 00:03:12
Y jugar al VR 00:03:15
Que son las dos cosas que más me gustan la verdad 00:03:17
Y aquí pues bueno 00:03:19
Tres características sobre mí 00:03:20
Que es ser generoso, habilidoso y altruista 00:03:23
La verdad 00:03:25
Aquí podemos ver que aplicación web 00:03:26
Que más uso la verdad 00:03:29
Que es el Spotify 00:03:31
Que nos lleva directamente al Spotify con un link 00:03:32
La verdad 00:03:35
Aquí se puede apreciar 00:03:36
Y aquí tengo mi 00:03:38
Bueno la página creada por mí 00:03:39
que si te metes aquí se va directamente a mi github 00:03:42
ahora en cuanto cargue 00:03:45
a ver, me tardo un poquito 00:03:48
y aquí está donde está mi github y todo 00:03:51
la verdad 00:03:56
bueno, siguiendo con el index 00:03:57
aquí tengo un body 00:04:02
que es donde tengo el fondo de pantalla 00:04:04
es donde tengo esto 00:04:08
está aquí la luna y todo esto 00:04:10
la verdad, luego tengo la imagen 00:04:11
que es esta, la de salir de fiesta 00:04:15
y tengo el texto, el texto que es esto para poder 00:04:19
centrarlo, para poder centrarlo bien, la verdad 00:04:24
bueno, aquí tengo mi index, el formulario, que bueno ya más adelante 00:04:27
os enseñaré 00:04:32
la cabeza, otro formulario 00:04:33
el aside, que tengo dos aquí, una a la izquierda y el otro a la derecha, tengo dos, el main, 00:04:40
la verdad, el main, y bueno, voy enseñando también el formulario como lo tengo también 00:04:50
creado y bueno, tengo el formulario ahí en grande para que se vea bien y tengo lo de 00:04:58
rehenaste el formulario en pequeñito 00:05:08
y aquí tengo 00:05:10
mi dosas ahí, también 00:05:12
y aquí, bueno 00:05:14
tengo datos de registro 00:05:15
puedo escribir lo que sea 00:05:17
para que se vea que 00:05:19
funciona, enviar 00:05:22
y se envía 00:05:24
formulario procesado 00:05:28
y para que se envíe, la verdad 00:05:29
tengo aquí pues 00:05:31
un espacio bastante largo 00:05:33
y aquí con mi footer 00:05:36
esto para 00:05:37
enviar. Tampoco hay mucha cosa 00:05:39
que ver aquí en el 00:05:41
en esto de aquí. Características 00:05:43
bueno 00:05:46
características sobre 00:05:46
bueno 00:05:49
tampoco os he enseñado esto 00:05:52
el aside 00:05:53
el TH 00:05:56
bueno, como lo tengo bastante organizado 00:05:59
la verdad 00:06:02
el footer, como podéis ver 00:06:03
Ah no, perdón 00:06:06
Perdón, perdón, perdón 00:06:09
El aside, como os he explicado 00:06:11
Y aquí va lo de las características 00:06:14
Esto es para 00:06:17
Esto es 00:06:18
Esto de aquí 00:06:20
Está en tres columnas 00:06:21
Con un float, con un rise, con un padding 00:06:24
Y bueno 00:06:26
Con 00:06:28
Con muchas cosas 00:06:29
Como podéis observar 00:06:31
Luego tengo varias clases 00:06:32
Aquí va donde va la top photo 00:06:35
Fiesta y billar 00:06:37
Tengo puesto clase jugar y clase foto 00:06:38
Y clase 00:06:41
Abajo, que es la aplicación 00:06:43
Que más uso 00:06:45
Y luego tengo 00:06:47
La clase de abajo 00:06:49
Sería esta de aquí 00:06:51
A ver si la encuentro 00:06:54
Esta de aquí, textaline 00:06:55
Center, main right 00:06:57
Que es esa 00:06:58
Y nada más, lo único que ha sido 00:07:00
Ha sido centrarlo 00:07:03
La verdad, o sea, centrarlo 00:07:04
Y así queda 00:07:07
Centras todo 00:07:08
Y queda tal cual así 00:07:09
Y luego aquí el footer 00:07:11
Que el footer lo tengo puesto en todos lados 00:07:14
La verdad 00:07:16
Que un h3, un article 00:07:17
Un article 00:07:19
Bueno, tengo bastantes cosas 00:07:20
Metidas, la verdad 00:07:24
Y bueno, vamos al 00:07:25
Curriculum, obviamente 00:07:27
Bueno, vamos al formulario mejor 00:07:29
Se lo voy explicando 00:07:33
Vamos al formulario 00:07:34
en el formulario tengo 00:07:36
este tipo de cosas, le voy a procesar el formulario 00:07:38
para que cuando escribas se envíe 00:07:40
a un sitio en concreto 00:07:43
donde te envíe, aquí tengo 00:07:44
mis asades, que estos los pongo 00:07:46
siempre y aquí bueno 00:07:49
empezamos con un fielse, luego un 00:07:50
legend y 00:07:52
nada más, poner 00:07:54
tu correo, usuario 00:07:56
contraseña 00:07:59
ir poniéndolo de vez en cuando 00:08:02
la verdad 00:08:04
Poniendo 00:08:05
Label 00:08:06
Input 00:08:10
Poniendo así todo el rato 00:08:11
Es poniéndolo todo el rato 00:08:12
Para que te salga 00:08:15
Y la verdad es que es bastante sencillito 00:08:17
El formulario 00:08:19
La verdad 00:08:21
Y aquí tengo el footer 00:08:22
Y aquí podéis ver 00:08:25
Que está bien 00:08:28
El formulario 00:08:29
Con su label y su input 00:08:30
La verdad bastante bien 00:08:33
Y tampoco había mucho 00:08:34
Tampoco había mucho que explicar la verdad 00:08:36
Pues bastante sencillito la verdad 00:08:38
Explicaré también 00:08:41
El index 00:08:43
A ver 00:08:44
Formulario, aquí 00:08:45
Aquí hay una especie de 00:08:47
Bueno, field set 00:08:50
Que es lo que va haciendo esto 00:08:52
Esta de aquí, la naranjita 00:08:54
Para ver 00:08:56
Como 00:08:59
Para ver como es, cambia de color y todo 00:08:59
A ver si lo encuentro por aquí 00:09:03
Aquí está 00:09:05
Que lo tengo puesto naranja 00:09:07
Con esta inmensidad 00:09:09
Grande, pequeño 00:09:11
Bueno 00:09:13
Tampoco me costó mucho la verdad hacerlo 00:09:14
Bueno, y vamos con el 00:09:17
Curriculum 00:09:19
Este de aquí 00:09:20
Este costó un poquito más la verdad 00:09:22
Pero bueno 00:09:25
Aquí voy explicando 00:09:26
Pues un H1, bueno, si os sabéis que no lo 00:09:28
no lo he explicado, o sea, con sus links, perdón, sus asides, y bueno, y aquí tengo 00:09:31
puesto un mail con cuatro imágenes, la verdad, os podéis observar, bueno, tres, perdón, 00:09:40
tres, bueno, sí, estas imágenes también pertenecen, y aquí están, aquí están los 00:09:48
dos asides que digo siempre, y mi foto de currículum, mi nombre, mi número de teléfono, 00:09:55
mi correo y donde vivo 00:10:01
y aquí una breve 00:10:03
una breve 00:10:04
de como, bueno de como 00:10:07
soy yo, trabajando 00:10:09
y eso, estudiando 00:10:11
y aquí mi educación 00:10:12
aquí se puede ver 00:10:15
donde estuve y 00:10:16
lo que estoy haciendo ahora, la verdad 00:10:19
y competencia de idiomas pues 00:10:20
solo lengua materna, la verdad 00:10:23
y aquí pues como siempre mi 00:10:24
asay, y aquí explico mi 00:10:27
el currículum 00:10:29
me costó bastante 00:10:32
y aquí están mis imágenes 00:10:34
mi clase de estudio 00:10:36
que podemos ir aquí y lo podemos ver 00:10:39
a ver 00:10:43
aquí, estudio, el font-weight 00:10:44
el padding-less 00:10:49
tirar más a la izquierda, más para la derecha 00:10:50
eso ya como tú veas 00:10:53
bueno, para hacer este tipo de tabla 00:10:55
Aquí hice una tabla, la verdad, una tabla con los datos suficientes, como podéis observar, y bueno, esto ya lo he explicado antes, y esto es una foto y luego lo que quieras poner ahí. 00:10:59
El nombre, estudiante 00:11:20
Centrar esto, centrarlo 00:11:22
Y esto dejarlo tal cual 00:11:24
Esto centrarlo y esto es un hdr 00:11:28
Un hdr y esto lo he puesto abajo 00:11:30
La verdad 00:11:32
Poco más la verdad 00:11:36
El asaer 00:11:39
Y las clases que tengo 00:11:40
Que es estudio y destacado 00:11:43
Destacado si queréis lo podemos ver 00:11:45
Aquí está, color blanco 00:11:47
Para que se vea, para que resalte 00:11:49
Porque no se veía mucho con este fondo 00:11:50
Y con un font size, bueno, bastante 00:11:52
Como lo he visto, la verdad 00:11:55
Aquí está el currículum 00:11:57
Ahora que bastante bien 00:12:00
Y vamos con 00:12:01
A ver 00:12:03
A ojo sobre mi proyecto 00:12:05
Bueno 00:12:08
Aquí podemos observar 00:12:09
La clase 00:12:11
Y todo, que esto lo de siempre 00:12:13
Ya lo he explicado 00:12:15
La site, que esto lo tengo en todos lados 00:12:16
en la young sobre mi proyecto 00:12:19
la imagen que puse 00:12:23
que la tenéis por aquí 00:12:25
vamos a ver 00:12:27
la tenéis aquí, la young 00:12:28
sobre mi proyecto y como tengo yo 00:12:31
hecho mi 00:12:33
bueno, mi página web, ¿no? con dos asails 00:12:34
como habéis podido ver, en mail, que es donde 00:12:37
estaba toda la información, la extra 00:12:39
de navegación, que es esto, ya la habéis 00:12:41
visto, y el header 00:12:43
el header que está arriba del todo 00:12:45
la verdad, a ver si se vea 00:12:46
Y el footer, que lo he dicho siempre, la verdad. 00:12:49
Y aquí una breve de cómo he explicado lo que es el ION. 00:12:52
Pues, contiene un header, de dónde está el título, bueno, y ese tipo de cosas, la verdad. 00:12:57
La documentación de la página web. 00:13:02
La documentación, sí, más o menos, la documentación. 00:13:08
Con un link que puse yo para que me reedicionara ahí. 00:13:11
A ver si carga 00:13:18
Y aquí la tenemos 00:13:19
Documentación del proyecto final 00:13:21
Para que te llegue 00:13:23
A ese final 00:13:25
Faltaría solo 00:13:29
El video explicativo 00:13:31
Así que nada 00:13:33
Eso es todo 00:13:35
Repaso un poquito más 00:13:36
El index 00:13:39
El CSS 00:13:41
Vamos el contenedor que puse 00:13:42
El tipo de 00:13:45
los tipos de tablas, el estudio, ubicación, lo de correo, que lo de correo es este tipo 00:13:46
de cosas, a ver si, espérate, a ver que lo he quitado, el correo, como entendáis es 00:13:54
esto, es la foto esta que es donde pone Rubén Plasmeina, esto lo he llamado como teléfono 00:14:07
Y esto como ubicación 00:14:12
Aquí lo podéis ver 00:14:14
Ubicación, correo y teléfono 00:14:15
He puesto más o menos las propiedades que tenía que poner 00:14:19
Para que me quedase así 00:14:22
Y poco más, la verdad 00:14:24
Esto es todo 00:14:28
Para que veas que no es muy complicado 00:14:31
Pero bueno 00:14:34
Esto es más o menos 00:14:35
Poner la foto, su tamaño, todo 00:14:37
La tabla 00:14:39
Y esto para que se resalte 00:14:41
Un poquito más, la verdad 00:14:43
Y si queréis 00:14:44
Alguna demostración de 00:14:47
Cómo cambio 00:14:49
Cualquier cosa del formulario mismo 00:14:50
Que ya puede ser 00:14:53
Esto mismo 00:14:55
Pongo 00:14:56
A ver a que se cambia 00:14:59
Aquí pongo esto, pongo lo mismo 00:15:02
Para que veas 00:15:06
Cómo se cambia un poquito 00:15:08
el formulario 00:15:10
mira, ya que puedes observar que se añade uno más 00:15:12
es porque lo he puesto 00:15:16
y se añade uno más 00:15:18
así que 00:15:20
vale, eso 00:15:23
demuestro si quieres 00:15:24
haciendo cambios 00:15:26
aquí voy cambiando un par de cosas si quieres 00:15:29
para que veas que se cambia 00:15:35
cuando veas todo 00:15:39
página principal 00:15:40
aquí lo podéis ver 00:15:43
se cambia cosas 00:15:44
y eso sería todo 00:15:47
la verdad 00:15:51
nada más 00:15:51
Valoración:
  • 1
  • 2
  • 3
  • 4
  • 5
Eres el primero. Inicia sesión para valorar el vídeo.
Idioma/s:
es
Etiquetas:
Dificultades Específicas de Aprendizaje
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
    • Ciclo formativo de grado superior
      • Primer Curso
      • Segundo Curso
Autor/es:
Ruben pelaez medina
Subido por:
Rubén P.
Moderado por el profesor:
Miguel Angel Del Cura Varas (miguel.delcura)
Licencia:
Reconocimiento - Compartir igual
Visualizaciones:
6
Fecha:
1 de mayo de 2025 - 22:31
Visibilidad:
Público
Centro:
IES VILLABLANCA
Duración:
15′ 55″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
171.67 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