Saltar navegación

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

Introducción a hojas de estilo II. W3.CSS - 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 23 de septiembre de 2024 por Pedro Luis L.

43 visualizaciones

Más información Transcripción

Descargar la transcripción

Eso. Mirad, os lo explico aquí. La propia aja de estilos aquí. Te lo cuenta la propia aja de estilos aquí. ¿Veis? ¿Qué pone ahí? ¿Blue? Ahí ponen los colores. Bueno, pues para usarlo tenéis que usar w3-yelcolor, como aquí. 00:00:05
Aquí tiene un ejemplo. A ver, ¿veis? Plus igual a, y entre comillas, W3 guión y el color. Si lo probamos, si lo probamos, emoción de intriga. ¿Veis que ha cambiado el color? 00:00:21
el pie de página 00:00:38
vamos a cambiar el pie de página, vamos a elegir otro color 00:00:40
mira, me gusta el color tierra, ¿dónde está el color? 00:00:42
es sand, en inglés 00:00:45
pues para ponerle color tierra 00:00:46
me voy aquí, me voy al footer 00:00:48
y pongo class 00:00:51
igual a 00:00:52
uw3 00:00:54
sand 00:00:56
¿de acuerdo? lo guardo 00:00:57
me ha faltado una s 00:01:01
class, porque si no, no funciona 00:01:02
voy al 00:01:05
navegador 00:01:07
lo recargo 00:01:07
y veis que lo ha puesto ya en color tierra 00:01:10
para diseñar las páginas web 00:01:12
para diseñar las páginas web 00:01:16
para hacer este tipo de diseños 00:01:18
se usa lo que se llama el diseño en columnas 00:01:20
imaginaos que si éramos copiar 00:01:22
este tipo de diseño 00:01:24
o sea 00:01:27
una información y una barra de la tela 00:01:28
¿vale? 00:01:32
bueno pues 00:01:35
para eso uso otro elemento que se llama el div 00:01:36
div 00:01:39
es un contenedor, sirve simplemente 00:01:41
para contener, si lo 00:01:45
pongo ahora, veis que 00:01:46
bueno, los elementos HTML se pueden anidar 00:01:51
se pueden meter unos dentro de otros 00:01:53
¿vale? eso es importante, de hecho aquí 00:01:55
bueno, aquí ya lo he hecho sin decirlo y arriba 00:01:57
aquí lo he hecho sin decirlo 00:01:59
y arriba también lo he hecho sin decir 00:02:01
¿de acuerdo? 00:02:03
he anidado, ¿no? 00:02:05
pues el div aparentemente no hace nada 00:02:07
sirve para anidar 00:02:09
Si lo pusiéramos tal cual, veríais que es como un P. 00:02:11
Bueno, si lo encargamos, aparentemente no hace nada. 00:02:18
Pero ahora con el div, una vez que ya tengo el contenedor creado, 00:02:22
puedo hacer cosas, por ejemplo, aquí, las tarjetas. 00:02:26
La tarjeta es simplemente un recuadro con sombra. 00:02:36
Y se pone así, w3-car. 00:02:39
Me voy a mi div y pongo class w3-card. 00:02:42
Lo pruebo, a ver cómo va. 00:02:56
Lo pruebo a ver cómo va. 00:02:59
Ahí está. 00:03:08
Lo veis ahí, ¿no? 00:03:08
Que le ha puesto ahí una especie de sombrita. 00:03:09
Ya tengo ahí una tarjeta. 00:03:13
Voy a meter una segunda tarjeta. 00:03:15
Vamos a meter una segunda tarjeta. 00:03:18
Otro div. 00:03:20
Class. 00:03:29
W3Card, ¿de acuerdo? 00:03:32
Bueno, y aquí voy a poner otro contenido, cualquier tontería. 00:03:36
All on it. 00:03:46
Bueno, este texto, Lore Nixon, lo vais a encontrar en muchos sitios. 00:03:49
Tiene un montón de años y lo usaban los antiguos impresores de libros, los que hacían libros, para probar textos. 00:03:54
De vez en cuando en las páginas web os vais a encontrar un Lore Nixon. 00:04:01
Y de hecho hay muchos editores que tú tecleas Lorentz, tabulador, y te suelta el texto del Lorentz Zoom. 00:04:04
Lo que pasa es que este editor no lo tiene activado. 00:04:11
Bueno, pues ahora tengo dos tarjetas. Vamos a verlas. 00:04:13
Pero claro, me pone una continuación de la otra. 00:04:17
Y yo quiero simular este diseño. 00:04:20
¿De acuerdo? Bueno, pues esto es lo que se llama diseño en columnas. 00:04:24
Bajáis aquí donde pone diseño responsivo. 00:04:28
Y lo que vamos a hacer es diseño en columnas. Vamos a dividir la página web en columnas. Por ejemplo, puedo dividir la página en una columna que ocupe la mitad y otra que ocupe la mitad. 00:04:31
Tres columnas. Una que ocupa un tercio, un tercio, un tercio. Una que ocupa un tercio y otra dos tercios. Un cuarto, un cuarto, un cuarto. Una que ocupe un medio y otra un cuarto, un cuarto. 00:04:43
y todas las combinaciones que se me ocurren, un cuarto y tres cuartos, un cuarto y un cuarto, lo que queráis. 00:04:53
Puedo intentar copiar todos estos diseños. Bueno, lo primero para que esto funcione, tengo que crear un row, ¿de acuerdo? 00:05:02
Un row, vamos a crear un row. Lo que voy a hacer es que estos dos elementos los voy a meter dentro de otro div, 00:05:10
estos dos elementos los voy a meter dentro de otro div, bueno, esto lo selecciono y si pulso tabulador, 00:05:17
veis que lo mueve hacia la derecha. 00:05:25
Si pulso mayúscula hasta volador, hacia la izquierda. 00:05:27
Esto sirve para intentar. 00:05:29
Ya la lío. 00:05:33
Con un control Z. 00:05:35
Ahí está. 00:05:37
Un div y aquí voy a meter 00:05:39
un w3row. 00:05:41
Ahí lo tenemos. 00:05:47
De momento no pasa nada. 00:05:51
Si yo lo intento usar, 00:05:52
pues no pasa nada. 00:05:55
No ha pasado absolutamente nada. 00:05:58
Ya le tengo que... ¿Por qué? Porque está esperando 00:06:00
que le diga el tamaño de las columnas. 00:06:02
pues voy a poner por ejemplo 00:06:03
dos half 00:06:05
w3 half, eso que es half 00:06:06
significa la mitad, que ocupe la mitad 00:06:09
vale, pues vamos a decir que ocupe la mitad 00:06:11
aquí le digo ocupe la mitad, fijaros 00:06:13
que puedo añadir 00:06:22
a continuación de una clase 00:06:23
todo lo que quiera, incluso le podría 00:06:26
poner aquí luego un color 00:06:28
color lima, o sea 00:06:29
va a ser una tarjeta que va a ocupar la mitad 00:06:34
esta va a ser una tarjeta que va a ocupar la mitad 00:06:36
y que va a ser de color lima 00:06:38
Vamos a verlo en el navegador 00:06:39
Esto va a quedar precioso 00:06:42
Bueno, va a quedar horrible 00:06:43
De acuerdo 00:06:45
A ver dónde estás 00:06:48
No me ha hecho caso 00:06:50
A ver por qué 00:06:55
Algo he hecho mal 00:06:56
Esto pasa muchas veces 00:07:01
He metido la pata 00:07:02
¿Por qué está fallando? 00:07:04
Fijaros 00:07:07
Roll, half 00:07:07
Ah, vale 00:07:08
Fijaros, ¿por qué está fallando? 00:07:09
Porque tienen que ser contenedores 00:07:10
Esto me ha faltado decir 00:07:11
Tienen que ser contenedores 00:07:12
No tarjetas 00:07:15
Bueno, pues vamos a poner ahí 00:07:16
Nunca lo he probado. 00:07:19
Vamos a probar a poner que sean contenedores. 00:07:20
Me falta ponerlo delante del contenedor. 00:07:22
Para que esto funcione tienen que ser contenedores. 00:07:26
Vamos a probar. 00:07:29
No ha funcionado. 00:07:33
Bueno, pues tengo que quitarle lo de tarjeta. 00:07:34
Con lo bonita que estaban quedando las tarjetas. 00:07:39
Vamos a probar. 00:07:42
Ah, vale, vale. 00:07:49
Sí que estaba funcionando. 00:07:50
Estaba funcionando desde el principio. 00:07:51
Lo que pasa es que le he metido tanto zoom 00:07:53
para que lo vea ahí bien. 00:07:54
¿Veis lo que pasa? 00:07:57
¿Cuándo le metes mucho zoom? 00:07:58
Vale, estaba funcionando 00:08:01
desde el principio. 00:08:02
Lo que pasa es que si le metes mucho zoom, pues te pone 00:08:05
lo que se llama diseño responsivo. 00:08:08
Esto es lo típico de los móviles, 00:08:10
que te lo pone todo a una continuación, ¿no? 00:08:12
Pero fijaros, me ha puesto uno de un medio y otro de un medio. 00:08:14
Pero vamos a poner el car, vamos a recuperar el car. 00:08:16
Vamos a ver... 00:08:22
Ahí está. 00:08:24
Bueno, queda feísimo. Casi le quito, voy a quitar el car, ¿no? 00:08:25
Pero fijaros que 00:08:28
esto depende del zoom. 00:08:29
claro, que lo he puesto un zoom tan grande 00:08:30
que no se ve, ya con esto 00:08:33
puedo intentar copiar el diseño como he visto 00:08:35
antes, casi le voy a quitar el card, no, está feo 00:08:37
le voy a quitar el card a este y se lo dejo 00:08:41
a otro 00:08:43
vale, pues un ejemplo, ¿no? 00:08:43
he hecho un diseño de un medio, un medio 00:08:49
pero podría hacer un diseño de 00:08:51
un tercio, un tercio 00:08:53
¿de acuerdo? 00:08:54
a ver dónde están, ¿veis? 00:08:57
he hecho half, le he puesto half a cada uno 00:08:59
Half, half, pero lo podría haber puesto un tercio, un tercio, un tercio, un cuarto, un tercio... 00:09:02
Las combinaciones que queráis. Mientras sume uno, las combinaciones que queráis. 00:09:11
Aquí vamos a parar y vamos a continuar ahora con las barras de navegación. 00:09:17
Lo que pasa es que para usar una barra de navegación, antes os tengo que contar los enlaces. 00:09:22
Vamos aquí. 00:09:28
Subido por:
Pedro Luis L.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
43
Fecha:
23 de septiembre de 2024 - 11:07
Visibilidad:
Público
Centro:
IES VILLABLANCA
Duración:
09′ 34″
Relación de aspecto:
1.78:1
Resolución:
1280x720 píxeles
Tamaño:
15.46 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid