Saltar navegación

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

WIX-2.Cajas contenedoras, textos y elementos decorativos - 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 21 de diciembre de 2023 por Roberto S.

20 visualizaciones

En este video se resumen varios elementos claves en el diseño web: cajas contenedoras de objetos, textos y elementos decorativos.

Más información Transcripción

Descargar la transcripción

Bien, en este vídeo vamos a ver tres aspectos básicos. 00:00:00
Primeramente vamos a introducir cajas contenedoras de contenido. 00:00:06
Vamos a trabajar un poco con los textos y después con los elementos decorativos. 00:00:10
Bien, empecemos por el primero, la introducción de cajas contenedoras de información. 00:00:15
Para ello vamos a agregar elementos y vamos a cuadros. 00:00:21
Entonces, dentro de cuadros contenedores de contenido, tenemos todos estos, 00:00:29
podremos emplear, podremos utilizar el que queramos simplemente arrastrándolo a la sección. 00:00:34
Por ejemplo, éste. 00:00:39
Una vez en la sección podemos cambiar su forma, o sea, sus dimensiones, 00:00:44
y podemos también cambiar su diseño, sus colores, etc. 00:00:49
Bien, si cambiamos, damos a cambiar diseño, aquí en personalización, 00:00:53
podemos cambiar la forma básica y bien sus colores, el tipo de borde, esquinas y sombreado. 00:00:58
Por ejemplo, el color vamos a cambiarlo por uno de nuestro tema, por ejemplo, el rojo. 00:01:05
Podemos también darle distinta transparencia para que se pueda ver a través de él un poco el fondo. 00:01:11
Bien, vamos a dejarlo así, con un color del tema y con aproximadamente la mitad de transparencia. 00:01:19
En las opciones de borde, lo mismo, tenemos un borde de un color y de una transparencia, 00:01:26
vamos a dejarlo 100% y vamos a cambiar su ancho, por ejemplo, a 5 píxeles. 00:01:31
Las opciones de las esquinas, pues esto es el borde de radius que hemos visto en CSS, 00:01:39
vamos a ponerlo así de redondeadito, y por último el sombreado. 00:01:45
¿Se puede aplicar sombreado? Uno. 00:01:49
Se puede cambiar el ángulo del sombreado también, la distancia que tiene respecto de la forma, 00:01:52
el tamaño de la sombra más o menos, el desenfoque y también el color y opacidad de esta sombra. 00:02:02
Bien, ya tenemos una caja contenedora un poquito ya maqueada. 00:02:14
Las opciones de diseño me conducen a lo mismo. 00:02:21
Después tenemos la animación, es decir, los efectos de entrada cuando se carga la página web. 00:02:26
Podemos darle distintos de ellos. 00:02:33
Vamos a darle este, por ejemplo. 00:02:37
Y ya por último me aparece una cosa que son efectos con el ratón, tipo javascript. 00:02:40
Si le damos aquí, comenzamos, 00:02:45
vamos a darle a elegir efecto. 00:02:55
Entonces podemos reducir cuando le pasamos el ratón por encima, sesgar, rotar, hacer más cosas, 00:02:58
vamos a ver por ejemplo el efecto de agrandar en cuanto le pasemos el ratón. 00:03:04
Esto lo guardamos y vamos a verlo en vista previa. 00:03:10
Hemos visto los efectos de aparición, cómo se agranda el contenedor cuando le pasamos el ratón 00:03:21
y este de aquí, que ya lo tenía de antes, cómo se encoge. 00:03:26
Bien, volvemos al modo editor. 00:03:31
Y ahora vamos a introducirle texto, vamos a poner algo parecido a lo que tenemos aquí. 00:03:39
Para ello vamos a agregar elementos, textos. 00:03:44
Texto temático me aparece los diseños que yo he hecho aquí cuando dimos a las opciones del diseño del sitio. 00:03:52
Me aparecen siempre el texto en primer lugar, el primer encabezado, el h1, el h2, el h3 00:04:03
y luego aquí tengo los párrafos después del título de grado 6. 00:04:09
Vamos a ponerle un encabezado de grado 2, editamos el texto y le ponemos lo que pone aquí, noticias. 00:04:13
Bien, vuelvo a editar el texto. 00:04:22
Entonces le puedo cambiar el estilo si quiero, como he hecho antes, la fuente, el tamaño de la fuente también, 00:04:33
solo que yo al definir los encabezados, al definir los estilos globales de mi página web, 00:04:39
esto, ni el estilo, ni la fuente, ni el tamaño, en principio voy a tocarlo, así como el color. 00:04:45
Voy a cambiar ahora el color porque es muy parecido a la caja contenedora, 00:04:51
con lo cual vamos a ponerle en este caso otro color de mi tema, hecho con inteligencia artificial a partir del logo. 00:04:55
Lo arrastro, veis que pone adjuntar a la caja, está adjuntado a la caja, lo pongo un poco más arriba, ahí centradito. 00:05:06
Si le doy ahora a editar texto de nuevo, vamos a ver más opciones que tengo, le podría haber colocado un hiperenlace, 00:05:19
un hiperenlace a una página dentro de mis páginas web, que de momento no tengo ninguna, a una dirección web, 00:05:26
como por ejemplo https://yespablovicaso.info, le podría haber hecho más enlaces a otras partes, 00:05:33
a una sección o ancla de mi página web, a un pie de página, a un documento, para que me descargue un documento, 00:05:49
a un correo electrónico, etc. Y aquí me pone que se abre en la ventana nueva o en la ventana actual. 00:05:56
Como no está relacionado con mi página web, sino que es un sitio externo, lo dejo en la ventana nueva. 00:06:02
Los enlaces también los podría haber hecho desde esta opción. 00:06:07
Tengo también efectos de alineación, hacer listas, poner sangrías, etc. 00:06:13
Y luego tengo más efectos en el texto, para ello selecciono todo el texto, selecciono todo, 00:06:20
y aquí en editar texto puedo dar distintos efectos, por ejemplo este. 00:06:29
Puedo elegir el espaciado entre los caracteres, es decir, que la palabra sea más larga. 00:06:35
Así damos un poquito más de espacio entre ellos. 00:06:42
El espaciado interlineal, en caso de tener varias líneas, puedo poner el texto vertical y las opciones de accesibilidad. 00:06:47
Y ahora vamos a añadir lo que se dice la información, los párrafos. 00:07:02
Le arrastro a mi página web. 00:07:11
Y aquí podría poner, igual que hemos visto, con el encabezado. 00:07:14
Estilo, párrafo 1, fuente, tamaño y las mismas opciones que acabamos de ver. 00:07:19
Y ya por último vamos a añadir un elemento decorativo como el arte vectorial que tengo aquí. 00:07:27
Para ello vamos a añadir elementos y vamos a Decorate. 00:07:33
Y aquí en decorativo tengo bastantes cosillas que puedo utilizar. 00:07:39
Por ejemplo, vamos a poner aquí un corazoncito. 00:07:43
Y me sale una serie de opciones también parecidas a las de antes. 00:07:49
Voy a cambiarle este corazoncito por, digamos, esta otra forma. 00:07:52
Vamos a cambiar forma. 00:07:59
Y aquí en formas básicas tengo todas estas formas, pero tengo más. 00:08:03
Por ejemplo, tengo arte vectorial, app icons, todo esto. 00:08:08
Vamos a darle a iconos de las app, por ejemplo. 00:08:13
Tengo todo esto. 00:08:17
Y aquí tengo, en este caso, el clip. 00:08:21
Lo selecciono y lo agrego a la página. 00:08:25
Vemos cómo ha cambiado, ¿verdad? 00:08:29
Bueno, pues entonces vamos a cambiarle el color. 00:08:32
Aquí en diseño lo pongo, por ejemplo, de color negro de mi tema. 00:08:36
Evidentemente puedo cambiarlo de tamaño, arrastrándolo así un poquito. 00:08:42
Y tengo ahora las opciones de ponerlo delante de la caja contenedora o detrás, como hacíamos en PowerPoint. 00:08:47
Ahora mismo está delante. 00:08:53
Bien, pues para ello vamos a herramientas. 00:08:56
Y aquí en esta herramienta doy clic a la barra de herramientas. 00:08:59
Y vengo a este comando. 00:09:05
Este comando, si lo despliego, tengo para ponerlo detrás, como no está ahora. 00:09:07
Y veis que me aparece, ahora se me esconde detrás. 00:09:14
Es agresible porque le puedo dar que se me ponga delante. 00:09:17
Y ya por último, ultimísimo en este vídeo, puedo añadir líneas verticales y horizontales. 00:09:26
Para ello me vengo a decorativo igualmente. 00:09:34
Y aquí tengo las líneas horizontales, y también tengo un poco más abajo, 00:09:40
aquí tengo más líneas horizontales y líneas verticales, que dan un buen estilo a mi página web. 00:09:45
Por ejemplo, si yo arrastro esta línea, puedo hacerla más larga. 00:09:51
Y le puedo cambiar el diseño. 00:10:04
Dentro de estas líneas le puedo poner estos tipos, y lo puedo personalizar. 00:10:10
Le puedo dar distintos tipos de línea. 00:10:15
Aquí veis distintos tipos de estilo. 00:10:25
Y aquí elegís la que queráis. 00:10:35
Le puedes también cambiar el color, el ancho, etc. 00:10:43
Bien, pues en este vídeo ya nada más. 00:10:51
En el siguiente vídeo vamos a ver cómo tratar las imágenes, es decir, vamos a hacer algo similar a esta imagen. 00:10:55
Muchas gracias. 00:11:01
Subtítulos realizados por la comunidad de Amara.org 00:11:04
Idioma/s:
es
Idioma/s subtítulos:
es
Autor/es:
Roberto Soriano Casas
Subido por:
Roberto S.
Licencia:
Reconocimiento - No comercial
Visualizaciones:
20
Fecha:
21 de diciembre de 2023 - 19:31
Visibilidad:
Público
Centro:
IES PABLO PICASSO
Duración:
11′ 04″
Relación de aspecto:
1.93:1
Resolución:
1360x704 píxeles
Tamaño:
59.96 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid