Saltar navegación

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

1x04 - Proyecto Web: Crea una página web sencilla - 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 1 de mayo de 2025 por Eduardo Alejandro H.

8 visualizaciones

Descargar la transcripción

Buenas tardes, soy Eduardo y voy a presentar mi trabajo de HTML, mi práctica 1.4. 00:00:03
Aquí tenemos, esta es la página, aquí tenemos el index, que es donde he escrito los primeros datos sobre mí, sobre cosas que me gustan hacer. 00:00:11
aquí tenemos el currículum, mi currículum, he puesto mi educación, mis idiomas, la competencia personal y aplicaciones que desee usar 00:00:24
luego aquí tenemos el formulario que he creado y el cómo creé la página 00:00:37
aquí aún no está el vídeo, lo pondré ahora en un rato 00:00:49
como podemos ver, tengo el variador para ver si los comandos están bien puestos 00:00:51
Tengo que abrirlo e irme hasta, un segundo, hay veces que se me descolocan las carpetas 00:01:01
en este PC, por ejemplo, elegimos como dice la página y lo comprobamos, como vemos aquí 00:01:14
hay dos errores, pero estos errores realmente son unos caracteres que puse para el vídeo 00:01:28
de la mediatrack, que cuando lo suba, es que aún no está subido y por eso da error, 00:01:36
porque aún no he puesto qué vídeo voy a subir. Tengo que subirlo aún. Luego también está el formulario, por ejemplo. 00:01:40
Vamos a ver, no tiene ningún error sobre una advertencia que me dice un class aside. Luego el índex, que es mi página principal. 00:01:52
Vamos a ver, no tiene ningún error sobre algunas advertencias. Y por último sería el curriculum. 00:02:07
Aquí tenemos que tampoco tiene errores realmente sobre advertencias. Luego también lo que voy a mostrar es 00:02:12
La documentación de mi página 00:02:30
Que la hice en clase 00:02:33
Como podemos ver 00:02:37
Tengo aquí los encabezados 00:02:39
Que hice con un header 00:02:40
Que es básicamente lo que he usado 00:02:42
Para darle los títulos a las páginas 00:02:44
Justo aquí, mi curriculum, por ejemplo 00:02:46
Es uno de los headers que usé 00:02:47
Para cada una de las distintas páginas 00:02:50
Luego los párrafos 00:02:53
Tengo varios párrafos 00:02:56
Sobre todo los usé para el aside 00:02:57
Justo aquí, para los nombres 00:03:00
para que quedara mucho más ordenado y más más más elegante más bonito luego los enlaces tengo 00:03:02
algunos enlaces básicamente son para la página index para mí la página principal que es aquí 00:03:14
justo en la imagen puso un enlace dentro de la imagen de salir a cenar que lleva hasta una 00:03:20
hasta una hasta la página web de mi restaurante favorito es el chinos luego las imágenes tengo 00:03:25
varias imágenes por ejemplo esta misma de cenar o la de los juegos o la de mi cena de mi foto 00:03:35
tablas usé las tablas de todo para mi currículum para la parte del currículum como podemos ver las 00:03:42
tengo aquí son estas las tablas de ecuación de formación la susepa y también para los idiomas 00:03:52
de tablas podemos ver aquí mientras desarrollo si nos vamos justo aquí empieza aquí una tabla 00:03:56
tabla y el de polvo y justo aquí están los de res y hostia de hs y te des para cada cosa 00:04:16
usé los th solo para que nada más en plan como título la comprensión en lo largo del escrito 00:04:22
para que nada más con un título mágico como otra cosa luego tengo las listas que usé listas 00:04:27
también para el header también para usar para las hay también el listado para que 00:04:35
quedara más ordenado y mucho más y mucho mejor más centralizado también usé los bloques que es 00:04:41
para cada para cambiar de a cada página del formulario como que la página y la página 00:04:53
también fue los formularios tenemos mi formulario aquí está el formulario que cree 00:05:01
podemos ver tiene varias 00:05:12
tiene prácticamente todas las los tipos de temas para formularios que hemos usado como el text 00:05:15
el text, el date que es para las fechas, el ratio para elegir un tipo, el number para 00:05:31
el número, los números, el tel para el tel, también el number sirve. Luego también tenemos 00:05:50
los vídeos aún no está aquí subido porque como he dicho estoy ahora mismo grabando el vídeo luego 00:06:06
lo pondré aquí luego aquí tengo los estilos que usé varios estilos de css distintos ejemplo pues 00:06:13
este de aquí lo usé sobre todo para el aside para darle el color de fondo el tamaño como 00:06:22
deberían de estar las clases puestas en que se tienen estas centralizadas las como podemos ver 00:06:29
los colores pues con colores para el fondo y lesiones unidades del height y el width y para 00:06:36
distintas cosas sobre todo las usé para las imágenes para mis imágenes de la página del 00:06:44
index justo aquí las usé para esto sobre todo bien usé el modelo de la caja lo podemos ver aquí 00:06:49
del tamaño que le di es cierto en cada página es distinto porque tuve que cambiarlo según la 00:06:57
página y según lo que hubiera dentro de ella luego de fondos tengo un estilo css que fue 00:07:14
para el fondo del contorno blanco el de posicionamiento que también para las imágenes 00:07:21
sobre todo, donde tenían que estar colocadas, en el centro, un poco más alejados del footer, 00:07:34
que es este. Aquí tenemos los estilos que usé para el texto, los tenemos aquí, aquí 00:07:43
tengo los estilos, justo aquí tengo varios distintos, es que cada texto necesitaba uno 00:08:02
distinto las h1 somos el entre mayoría de los textos pues tienen sólo se uno para ellos pero 00:08:09
cada uno elegió un h5 con el con una clase para cada footer distinto por si acaso necesitaba 00:08:14
cambiarlo pero hay varios la mayoría si si bien este de la mayoría tienen los mismos 00:08:21
carácteres los mismos estilos la mayoría hay muchos se cambian entre ellos como por 00:08:28
ejemplo los header que tienen el text shadows y el letter spacing a diferencia del resto 00:08:32
Luego también tengo las fuentes, que cambiaré las fuentes de algunos, las formas de escribir normales y los textos que hay. 00:08:39
Justo aquí tienen la normal, que es la de Real Herbética y Sans Serif, pero para el header lo que decidí fue usar otra que era el Franklin Gothic Medium Arial Nero. 00:08:48
Luego enlaces, no tengo ningún estilo para enlaces, porque no he ido a cambiarlos. 00:09:00
del listado si que tengo que era básicamente porque en el listado cuando tú pones un listado 00:09:06
hay veces que lo que pasa es que usé listados también en mis curriculum y lo que pasaba es que 00:09:11
había muchas veces que se ofrecían puntitos justo aquí y quedaba bastante mal así que decidí editar 00:09:16
el listado para que así con el estilo de list style known que básicamente hace que los puntos 00:09:23
no desaparezcan, no tengan ningún estilo. También hice uno para las tablas que era 00:09:28
justo aquí, que era básicamente donde tenían que estar colocadas las cosas y a qué distancia 00:09:34
cada una de la otra. Era sobre todo para esto, para los idiomas. También tengo unas fuentes 00:09:42
para las fotos, como he dicho, imágenes distintas. Para el formulario tengo otras que era básicamente 00:09:48
para darle el borde para darle el color del borde si lo quería también algo más redondeado 00:09:54
y luego a mediación del archivo pues tengo justo aquí el layout que usé que era una cabecera una columna 00:10:04
aquí la columna 1 justo aquí que es la side la columna en el medio que es el texto normal que 00:10:12
oriente y el pie de página que es el footer como podemos ver accede desde cualquier buscador desde 00:10:19
firework y el firework o sea del fireball perdón del fireball y del google y del chrome también 00:10:29
funciona ahí y funciona en todos los pcs que he probado hasta ahora y aparte de eso pues 00:10:37
y también lo tengo justo aquí subido a mi github tengo que subir a mi github 00:10:46
se me había olvidado que había cambiado la contraseña 00:10:53
esto si que no me había pasado nunca 00:11:08
que mande un código de autentificación 00:11:22
tengo justo aquí 00:11:24
hice mi pro 00:11:33
mi pro 00:11:35
mi propia carpeta en el github 00:11:37
y lo subí ahí durante varias veces 00:11:42
hay algunos que si es bien que pone 00:11:44
que lo subí el mes pasado pero es porque básicamente son cosas 00:11:46
que aún no he cambiado 00:11:48
como por ejemplo algunas imágenes que no cambié de mi 00:11:49
Por ejemplo, mi propia imagen, la foto que tengo aquí seleccionada, esta sí que no la cambié, así que pues eso, que tenga, que lleve ya un mes, que no la tenía desde el mes pasado, pero la mayoría de los restos sí que lo vi y le actualicé constantemente, por lo cual, pues eso, la mayoría dicen que fue hace una semana o ayer mismo. 00:11:52
Luego algo que si es cierto 00:12:08
Y ya, pues eso 00:12:13
Tengo todo, todo como he dicho 00:12:16
Y es cierto que es una variación 00:12:18
Como hemos visto, todo funciona correctamente 00:12:23
Solo hay algunas advertencias que me salen 00:12:25
Que no entiendo muy bien el por qué 00:12:27
Que es sobre algunos comandos que 00:12:28
Según el 00:12:30
Validator, no tendrían 00:12:31
Están algo 00:12:34
No deberían estar exactamente ahí 00:12:35
Pero sería eso todo 00:12:37
Muchas gracias 00:12:40
Idioma/s:
es
Idioma/s subtítulos:
es
Materias:
Sistemas Microinformáticos y Redes
Etiquetas:
Tecnología
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:
Eduardo .A Hernández Pinto
Subido por:
Eduardo Alejandro H.
Moderado por el profesor:
Miguel Angel Del Cura Varas (miguel.delcura)
Licencia:
Reconocimiento
Visualizaciones:
8
Fecha:
1 de mayo de 2025 - 15:23
Visibilidad:
Público
Centro:
IES VILLABLANCA
Duración:
12′ 43″
Relación de aspecto:
1.86:1
Resolución:
1920x1032 píxeles
Tamaño:
108.65 MBytes

Del mismo autor…

Ver más del mismo autor


EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid