Saltar navegación

Aula virtual - Color fondo

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 14 de octubre de 2023 por Elías G.

5 visualizaciones

Videotutorial donde se muestra cómo modificar el color de fondo de las secciones

Más información Transcripción

Descargar la transcripción

Vamos a mostrar una opción que tenemos de modificar cosas de la aula virtual que no se nos exige pero en determinados casos puede mejorar el aspecto de nuestra aula. 00:00:02
Vamos por ejemplo a aprender a cambiar el color de fondo de los elementos. 00:00:11
El color de fondo se va a cambiar el color de la caja en la que trabajemos o de las líneas que nosotros definamos. 00:00:18
Es decir, si veo un modo de audición, aquí si cambio el color de esto se me va a cambiar lo que es la guía didáctica, pero no se me van a cambiar las actividades de debajo. 00:00:25
Se me va a cambiar esta ventanita de baloncesto, pero las otras no. Tendría que ir cambiándolas yo individualmente en los casos en los que se pueda. 00:00:36
Aquí, por ejemplo, se me va a cambiar esto. 00:00:44
Al tener la distribución de una sección por página, pues sí que va a quedar más o menos bien porque todo lo que tenemos hecho se muestra solo la página inicial. 00:00:46
¿Y cómo se haría esto? Pues vamos, por ejemplo, a baloncesto, damos a modo edición, bajamos a baloncesto y vamos a cambiar este color. 00:00:58
El cambio se realiza aquí, editar tema, añadir más botones, botones avanzados, y se hace en HTML. 00:01:09
Tenemos que entender un poco qué es HTML. 00:01:18
No es que sea no entenderlo por completo, sino una parte de HTML. 00:01:21
Son un sistema de etiquetas que le dice al contenido lo que tienen que hacer. 00:01:25
En este caso, esta etiqueta empieza aquí y se cierra aquí. 00:01:28
Y lo que dice es que el texto se va a alinear al centro y que luego va a añadir esta imagen. 00:01:33
¿Cómo sé que dice esto? Porque si me vengo aquí y le digo que lo alinee a la izquierda, vuelvo a HTML y aquí me dice que se está alineando a la izquierda. 00:01:38
Si cambio y le digo que lo alinee a la derecha, lo que me está haciendo es alinearlo a la derecha. 00:01:50
Eso me da pistas sobre qué está haciendo este comando HTML. 00:01:59
Ahora nosotros vamos a tener que añadir aquí un código que le va a decir de qué color 00:02:03
quiero el fondo y el fondo va solo a afectar a lo que hay entre la etiqueta P y la etiqueta 00:02:10
¿Qué comando hay que añadir? 00:02:20
Pues hay que añadir un comando que si vais al curso que yo tengo con esto cambiado de 00:02:22
color pulsáis editar tema que está en este color sepia pulsáis botones avanzados lo que hay que 00:02:28
añadir es esto style el estilo background y este es el color esta es la instrucción que hay que 00:02:39
copiar como aquí ya tenemos la parte del style lo único que tenemos que copiar es background color 00:02:51
y el código del color. Y aquí detrás del punto y coma 00:03:00
doy un espacio para que se vea mejor 00:03:06
y tengo background. Si esto tiene estos colores y no sale nada 00:03:09
en rojo es que está bien. Pulso y aquí lo tenemos. 00:03:14
Si ahora yo le doy a guardar cambios, pues me aparece así. 00:03:18
Y en modo como lo vería el alumno 00:03:22
aparecería el baloncesto. Esto, tal y como 00:03:25
lo hemos puesto afecta a sólo la imagen si yo tuviese varias imágenes aquí como es el caso 00:03:30
de mi curso tiene que agregar esta orden a una etiqueta que abarcase todo como por ejemplo aquí 00:03:38
todo lo voy a tener centrado he añadido fuera toda esta etiqueta esto lo podría hacer en el 00:03:45
curso editar tema esto lo dejo como estaba al principio y ahora si añado aquí una etiqueta de 00:03:53
que todo va a ir centrado y que además el background es este pues me va a abarcar hasta 00:04:05
donde esté la etiqueta del center que me la va a poner automáticamente por eso una etiqueta abierta 00:04:13
que va a buscar el último espacio y me la va a cerrar me han añadido ahí y ahora cuál es la 00:04:19
diferencia aquí es el problema cuál es la diferencia con otro que si yo me pongo aquí 00:04:26
voy a poder ir añadiendo espacios tanto arriba como abajo para hacer esto más grande si lo 00:04:31
necesito entonces en función de si la etiqueta está el background el color de fondo está dentro 00:04:42
de una etiqueta que abarque todo o dentro de una etiqueta que abarque sólo una parte pues eso es lo 00:04:49
que me va a cambiar de color vamos a dejarlo como estamos al principio tenemos que tener cuidado con 00:04:55
lo que tocamos en el html pero esta parte la podemos cambiar aquí y está aquí también y ahora 00:05:02
volvemos a los botones avanzados y bueno como queremos tenerlo centrado no pasa nada si no lo 00:05:13
añadiríamos aquí. Bien, tengo el primero cambiado. Voy a copiar esto para ponérselo a todos. Bien, me vengo 00:05:19
a balón mano, editar tema. Como la imagen va a estar centrada, no hay ningún problema en ponerlo 00:05:35
aquí center style background y ahí la tenemos 00:05:44
voy a quitarle aquí un espacio 00:05:52
guardar cambios me vengo a la siguiente editar tema cambio voy a centrarla ahora 00:05:56
me va a aparecer cuando cambie me va a aparecer la etiqueta de center y ya está 00:06:05
está centrado en el medio no hay ningún problema si quiero darle más espacio 00:06:09
porque estás así un poco rara pues se lo doy guardar cambios y ahí la tenemos mis hábitos 00:06:14
saludables editar tema botones avanzados pego aquí center style background aquí también le voy a 00:06:21
añadir un espacio arriba y un espacio abajo guardar cambios y en mi fichero de juegos 00:06:32
voy a hacer lo mismo 00:06:40
voy a pegar esta etiqueta de centrar 00:06:43
y de cambiar el color 00:06:47
voy a añadir la etiqueta de cierre 00:06:50
y también voy a añadir un espacio arriba y un espacio abajo 00:06:53
ahora que he cambiado el color 00:06:58
tengo esto, pero uno puede decir 00:07:01
pero que bien, has cambiado los colores y has puesto en todos los mismos 00:07:04
pues vamos a cambiar el color de alguno 00:07:08
Vamos a cambiar el color, por ejemplo, de todas menos la primera. 00:07:10
La primera la vamos a dejar así. 00:07:15
¿Y cómo se cambia el color? 00:07:18
Pues me vengo a, como siempre, editar ajustes o editar tema en este caso. 00:07:20
Y tengo aquí un código de color, que en este caso es un código gris a decimal. 00:07:27
Y lo que hago es buscar una página, color HTML, una página de códigos de colores HTML. 00:07:32
entro y aquí en función de yo donde me sitúe va cambiando el código hay dos tipos de código el 00:07:40
hexadecimal este y el rgb rojo verde y azul pues yo voy a cambiar voy a coger este color 00:07:49
que es el hexadecimal es este me lo traigo al aula virtual y voy a cambiar este código de aquí pulso 00:07:58
y ya tengo cambiado uno 00:08:09
guardo cambios 00:08:11
y ya tengo cambiado el valor mano 00:08:12
voy a cambiar cariocas 00:08:14
con un color que le pegue 00:08:17
lo mismo que antes 00:08:18
html, voy a cambiar ese código 00:08:20
y voy a coger 00:08:22
un azul 00:08:23
el código es este 00:08:26
me lo traigo aquí 00:08:28
lo cambio 00:08:30
tengo que tener cuidado de no quitar la comilla 00:08:32
y ahí está 00:08:34
guardo cambios 00:08:36
Y aquí tenemos las cariocas, el valor mano, vamos a por otra, mis hábitos saludables, editar tema, código HTML, vamos a cambiarla por, copio, esto lo quito, me vengo a mis hábitos saludables, cambio el código y ya se me ha cambiado por ese color. 00:08:38
y puedo cambiar también la ficha de juegos, editar tema, por un color, no sé cuál ya, 00:09:08
no soy muy malo eligiendo colores, ese, y me vengo y cambio el código y ya tenemos 00:09:21
todos cambiados y si vamos al modo edición, quitamos el modo edición y se ve como lo 00:09:35
venían los alumnos, la área didáctica viene con un cesto, balón, mano, cariocas, mis hábitos saludables 00:09:42
y este debería haber puesto otro color, voy a cambiar el de arriba, porque quedan un poco similares, 00:09:48
voy a cambiar mis hábitos saludables por un amarillo, por un amarillo, machillón, este, y ahora sí 00:09:56
quedan todos diferentes 00:10:22
quito el modo edición 00:10:23
y aquí tenemos 00:10:26
la primera parte, no le he cambiado el color 00:10:28
que podría y tenemos 00:10:30
todo con distinto color 00:10:32
Autor/es:
Elías Gutiérrez
Subido por:
Elías G.
Licencia:
Reconocimiento - Compartir igual
Visualizaciones:
5
Fecha:
14 de octubre de 2023 - 17:50
Visibilidad:
Clave
Centro:
CP INF-PRI SAN CARLOS
Duración:
10′ 37″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
48.89 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid