Saltar navegación

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

Proyecto de Pagina Web - Contenido educativo

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 30 de abril de 2025 por Dante Mathias Y.

3 visualizaciones

Explicación breve de una pagina web, diseñada en Visual Studio Code

Más información Transcripción

Descargar la transcripción

Hola, buenas tardes. Voy a hablar de mi desarrollo de la página web. 00:00:02
Está creada por, no está desarrollada por un personaje, no está desarrollada por mí. 00:00:08
Está desarrollada por un personaje, de personaje mío favorito, de manga, llamado Dragon Ball Super. 00:00:15
Y voy a hablar de, en todo caso, su nombre original es Tama, Goku Blast. 00:00:23
La documentación para la página 00:00:28
La organización de ficheros pues tiene 00:00:32
Su carpeta con los estilos de cada una de las páginas 00:00:35
Las imágenes 00:00:40
Que ya lo voy diciendo ya 00:00:41
Todas las imágenes que están usadas 00:00:43
No están sin derecho de autor 00:00:45
Así que no pueden decir nada 00:00:48
Para la parte de etiqueta de HTML 00:00:50
En las encabezas de la página principal 00:00:53
Para cada página 00:00:55
aquí en el sujeto de la página principal desde aquí que había un encabezado que había otro 00:00:58
encabezado otro aquí es aquí se ve aquí en la documentación también los párrafos en todo caso 00:01:05
debería aquí en el inicio en la página principal donde he puesto más párrafos aquí donde el puesto 00:01:16
el section desde aquí un párrafo sería un párrafo otro párrafo y otro párrafo en los enlaces bueno 00:01:24
pues para los enlaces para apartado de 7.000 enlaces utilizado hr y link red el link red 00:01:32
utilizado para que estén conectados con los estilos y que se estilos de css y utilizaba 00:01:39
hr para por es para el na para la parte de navegación sería esta parte no las imágenes 00:01:46
ya he visto ya he dicho ya está con una carpeta y lleva en las tablas bueno la parte de tablas 00:01:55
en la parte de tablas que sería esto no he puesto mucho solo he puesto dos líneas 00:02:06
dos líneas de la formación de este señor donde se ve canónicamente en el juego en el 00:02:12
juego el anime cuando aparece cuando aparece por primera vez y luego pues por lo siguiente 00:02:20
repuesto sobre un body como se aprecia aquí un de body la línea tr un teatro que sería esto 00:02:31
y hasta de cerrarte body y las listas para listas utilizado una lista ordenada 00:02:38
una lista ordenada y uno se leí para cada apartado que se puede apreciar en la página web 00:02:45
también utilizado también aquí leí saque y 3 aquí también está también aquí hay otra 00:02:59
lista ordenada el bloque después de los bloques estaríamos hablando de estas tres partes estas 00:03:06
cuatro partes perdón una parte aquí otro bloque aquí otro bloque las páginas separadas en la 00:03:15
parte de navegación de la forma pues bueno las formularios en lo anunciado que ya más de 12 00:03:22
tipos de ese tipo de la mente dentro del formulario pues no esté puesto en aquí desarrollado y si esto 00:03:27
también se puede contar aquí los 12 que están puestos aquí y están desarrollados dentro de la 00:03:37
página del visual estudio en la parte de vídeos de html utilizado con imágenes embebidas y aquí 00:03:45
dios o el proyecto bueno el proyecto es lo estoy dando el vídeo aquí con curiosidades 00:03:59
sobre mi personaje y aquí aquí el vídeo el proyecto que lo voy a tener que antes de 00:04:05
enviarlo lo tendré que cambiar y pondré el vídeo que voy a subir a la mediateca para 00:04:11
para subirlo con él junto con él con toda la página luego hablando de los estilos pues pues 00:04:16
los electores de distintos tipos pues están distintos electores no me he puesto los mismos 00:04:28
he puesto cada para cada página puesto distintos electores que se apetece aquí también enlaces 00:04:37
le he puesto le he puesto una para cada uno hacer hasta lo lo de siempre los colores los 00:04:42
fondos pues se pasa aquí ya por ejemplo aquí el body que le he puesto y un color así como 00:04:51
un gris raro un gris raro y para el palco para el mail bueno para el color de todo esto para 00:04:58
el color del de todo esto le he puesto un color azul océano y aquí un color aqua en todo caso 00:05:08
el currículum aquí le he puesto tonal o todos perdón ya que se aprecian aquí los colores que 00:05:15
le he puesto un gris que es esto pues bueno como comentantes los fondos otros fondos la piel de 00:05:24
puesto aquí en el background color de vuestro color gris también podría modificar aquí si 00:05:39
quieres y dice si no lo si no lo veo claro aún estoy a tiempo de los cuatro por ejemplo aquí 00:05:44
para ejemplo para el de footer lo tengo aquí arriba para el pie de página le he puesto un 00:05:56
balón de verde amarillento y para por ejemplo la del sector le he puesto aquí un color un color rosado 00:06:02
Que bueno, no hay mucho que hablar 00:06:15
Para el posicionamiento y el float 00:06:18
Pues lo 00:06:23
Donde se ve más, donde he cambiado el posicionamiento 00:06:24
Es en el aside 00:06:27
Por ejemplo aquí en el 00:06:29
En todo se puede ver 00:06:32
El aside que lo tengo aquí 00:06:33
Le he puesto un float hacia la izquierda 00:06:36
Que se aprecia aquí 00:06:39
Que está hacia la izquierda 00:06:41
Y también en una imagen 00:06:42
Que es casualmente esta de aquí 00:06:45
que se encuentra los estilos 1 le puso un flot hacia la derecha para que quede así separado y 00:06:48
quede mejor ordenado de texto pues aquí se apetece todo para todo el texto para todo esto 00:06:55
no todo esto que está puesto todo lo que le he puesto su background la altura que le he puesto 00:07:05
para el mail el margen top por radio el flow de line start del info que estaremos hablando de esto 00:07:10
en esta parte de aquí el font que cada uno tiene su tipo de 00:07:21
bueno no cada uno no todos todos mantienen el mismo tipo de fuente de familia que lo ponemos 00:07:28
aquí el es ese fuente que sería este el lucidas and que se aprecia en el body en el cuerpo está 00:07:35
aquí con favor y utilizado lucidas and y los enlaces pues en cada uno de los enlaces le 00:07:42
puesto por ejemplo en el contenido con gran color wii en la altura de altura el pad y aquí donde se 00:07:48
aprecia más para las imágenes de 350 píxeles y la altura de 300 píxeles en las listas ya se 00:07:55
aprecia no hace falta que lo mira que lo mire a través de la visual l l y le he puesto un martín 00:08:06
para que quede un poco así que no esté todo pegado que se aprecia aquí tranquilamente y también le 00:08:11
puesto para luego listas las listas de aquí sólo del este que esté que no tengan el tipo de estilo 00:08:18
la tabla tampoco le toca mucho sólo he puesto un margen de las imágenes también ya le enseñado lo 00:08:27
que le he puesto en el formulario en la parte del formulario pues que lo vea que se ve aquí 00:08:35
el set que se ve aquí y tiene aquí su borde radio y creo que era un mal recuerdo era de 00:08:43
4 píxeles de 6 píxeles y de color blanco le he puesto mucha anchura para que quede 00:08:59
quede mejor y bueno para terminar la maqueta ha utilizado la primera que viene anunciado 00:09:06
que es la primera con su encabezado con su nav de navegación a la izquierda en la site con la 00:09:16
información personal y a la derecha sería el contenido el contenido dónde está dónde va a 00:09:25
estar todo el contenido de la página y luego abajo va a estar pues el pie de página dónde va a estar 00:09:30
queda que a la página en todo caso mi nombre y bueno de la validación que esto esto lo he 00:09:39
rápido porque me instaló un plugin dentro del visual estudio aunque aunque la mejor manera es 00:09:45
por esto es por esto pues 00:09:50
en la página web por ejemplo aquí para la primera ley de le he puesto aquí sale que 00:09:58
hay un warning en todo caso si me voy aquí me lo sale aquí se me queda aquí pone que 00:10:06
el sector lax con el h2 etcétera por ejemplo aquí dice que está correctamente es el currículum en 00:10:15
el proyecto también va a salir que está correcto pero el formulario que también es lo mismo va a 00:10:24
decir que tiene un guardia pero bueno pero lo comprobado en el google chrome y está todo igual 00:10:29
la accesibilidad para la accesibilidad bueno lo he visto bastante he visto bastante especial para 00:10:35
las personas que quieran dar porque tú le explica aquí por ejemplo en el formulario y está aquí en 00:10:42
vez de evitar darle a este rectángulo este rectángulo para escribir le das acá y te puedes 00:10:47
escribir luego para la navegación pues le va a hacer más fácil al usuario que meta aquí por 00:10:53
ejemplo el del inicio y se va al inicio al currículum así que las páginas dentro de una 00:11:00
así que no se vaya por ejemplo 00:11:07
esta 00:11:08
lo siento por el sonido pero 00:11:09
así para que no quede así 00:11:12
que se abra, por ejemplo desde el inicio no se abra 00:11:16
en otra 00:11:19
en una pestaña más, que es lo que no quiere la gente 00:11:19
luego las etiquetas temáticas 00:11:23
pues las etiquetas 00:11:25
pues bueno, no voy a hablar mucho 00:11:26
de las etiquetas, he utilizado 00:11:29
mucho el header, el nav 00:11:30
el aside, el main 00:11:33
en todas las páginas 00:11:34
también he utilizado 00:11:36
por ejemplo el filset 00:11:37
el legend 00:11:41
dentro del formulario 00:11:41
el section 00:11:43
y bueno, ahora es alguna que otra más 00:11:47
he ubicado mi página web aquí de github 00:11:49
y bueno 00:11:53
este sería para terminar 00:11:54
y bueno, el contenido multimedia pues 00:11:55
todas las imágenes, sin contar el vídeo 00:11:58
que es lo último cambio que tengo 00:12:00
que hacer del proyecto 00:12:02
porque he estado haciendo cambios a lo largo de estos días 00:12:04
antes de que se termine 00:12:07
el plazo pues aquí tendré que cambiar el vídeo este que está de momento de relleno y tendré que 00:12:08
poner el vídeo de mediateca pues ya está todo esto es estación de desarrollo creado por dante matías 00:12:15
Valoración:
  • 1
  • 2
  • 3
  • 4
  • 5
Eres el primero. Inicia sesión para valorar el vídeo.
Idioma/s:
es
Materias:
Informática
Niveles educativos:
▼ Mostrar / ocultar niveles
  • Formación Profesional
    • Ciclo formativo de grado medio
      • Primer Curso
      • Segundo Curso
Autor/es:
Dante Mathias
Subido por:
Dante Mathias Y.
Moderado por el profesor:
Miguel Angel Del Cura Varas (miguel.delcura)
Licencia:
Dominio público
Visualizaciones:
3
Fecha:
30 de abril de 2025 - 13:20
Visibilidad:
Público
Centro:
IES VILLABLANCA
Duración:
00′ 20″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
94.69 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid