Saltar navegación

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

WIX-1. Diseño básico de la página 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 19 de diciembre de 2023 por Roberto S.

17 visualizaciones

Se repasa cómo diseñar los colores y formato de texto principales, diseño de encabezado, sección y pie de página.

Más información Transcripción

Descargar la transcripción

Hola, hola a todos. Bien, vamos a empezar esta colección de vídeos de Wix y vamos a empezar, supongo que ya habéis creado un sitio, os recomiendo que lo hagáis empleando el Gmail, ¿de acuerdo? 00:00:02
Entonces, llegamos al inicio en donde yo tengo aquí, después de muchos años, muchas páginas web. Os recuerdo que con Wix no solamente se os da permiso hacer una página web, sino bastantes, ¿de acuerdo? 00:00:15
Bien, pues para ello, para empezar a crear una nueva página web, vamos aquí a crear un sitio nuevo. 00:00:28
Y lo vamos a hacer siempre desde blanco, ¿de acuerdo? Sin utilizar ningún tipo de ayuda. 00:00:35
Vamos a configurarlo sin inteligencia artificial, aunque luego nos apoyaremos en ella. 00:00:43
¿Qué tipo de sitio web quieres crear? Nada, omitimos, no quiero tanta ayuda. 00:00:50
Ahora, ¿qué nombre te gustaría poner a tu sitio? Luego lo podemos hacer, omitimos. 00:00:57
qué deseas agregar a tu sitio, nada, omitimos, ya lo haré yo todo 00:01:01
y ahora podemos ir al panel de control o bien usar una plantilla 00:01:08
curiosamente para no utilizar una plantilla tenemos que dar aquí a usar una plantilla 00:01:14
y aquí vamos a utilizar de todas las plantillas que se nos ofrecen 00:01:18
vamos a utilizar una en blanco 00:01:26
y dentro de las plantillas en blanco 00:01:28
Esto es como PowerPoint, que me ofrece aquí, digamos, banners para poner distintos elementos. 00:01:32
Vamos a ponerle una en blanco. 00:01:40
Vamos a editar. 00:01:43
Tarda un poquito. 00:01:45
Mientras compone el editor de HTML5. 00:01:47
Paciencia. 00:01:51
Bien, ya estamos aquí. 00:02:07
Esto es una cosa que nos pone ahora siempre. 00:02:09
Vamos a chatear. 00:02:12
buena. Entonces, esta es la presentación de nuestra página web. Tenemos una página 00:02:13
web en blanco completamente, en donde tenemos un encabezado, tenemos una sección, se pueden 00:02:19
agregar más secciones al cuerpo y tenemos también un pie de página. Bien, lo primero, 00:02:25
antes de agregar ningún elemento, es hacer el diseño básico. Es decir, el diseño básico 00:02:33
del encabezado, cuerpo y pie de página. 00:02:37
Para ello el primero y muy importante últimamente son los colores 00:02:41
y diseño general del tema. Para ello nos venimos aquí 00:02:45
a diseño del sitio. Hacemos clic 00:02:49
y vemos que tenemos temas del sitio, es decir, los colores típicos, tenemos 00:02:51
distintas colecciones. Vamos de momento 00:02:57
a prescindir de ellos porque nosotros podemos 00:03:01
personalizarlo, aquí podemos cambiar el tema 00:03:05
si ya lo hubiéramos elegido, o bien 00:03:09
lo podríamos, aquí el tema de color, podríamos cambiar el tema de color 00:03:16
y personalizarlo, mirad, tengo aquí 00:03:20
utilizando inteligencia artificial 00:03:24
vamos a ver luego un ejemplo de cómo se hace esto, ¿de acuerdo? primeramente 00:03:27
yo puedo elegir los temas 00:03:32
de color que yo quiera, los colores base, primeramente 00:03:36
aquí si hacéis en información, dice que los colores base 00:03:39
normalmente se usan para el fondo y el texto, entonces este va a ser 00:03:44
este va a ser el color del fondo y este el color de texto 00:03:48
por defecto, y luego tenemos otros distintos colores 00:03:52
aquí en ajustes avanzados, también tenemos para el fondo principal 00:03:55
nuevamente, un fondo secundario, líneas separadores, títulos 00:03:59
subtítulos, el cuerpo 00:04:04
los párrafos, los enlaces, etc 00:04:06
todo esto se puede ir cambiando 00:04:08
como veis, haciendo clic 00:04:10
sobre él, se podría cambiar colores 00:04:12
bien 00:04:14
entonces 00:04:18
lo que yo voy a hacer ahora va a ser 00:04:20
utilizar 00:04:22
voy a cambiar el color del tema 00:04:25
y voy a subir un logo 00:04:26
supongamos 00:04:28
utilizando 00:04:30
inteligencia artificial, para luego 00:04:33
vamos a subir un logo, por ejemplo yo tengo aquí el logo de Coca-Cola 00:04:34
perdón, de Persicola, tarda un poquito, con lo cual paciencia también 00:04:39
vale, ya lo tengo aquí completo, lo señalo 00:04:47
y escojo la imagen, bien, entonces él ahora 00:05:03
está calculando las distintas familias, digamos de colores 00:05:07
más parecido al logo, se supone de mi empresa, de mi corporación 00:05:11
etcétera, vale, para mantener una armonía de colores 00:05:15
dentro de mi página web 00:05:19
entonces yo podría elegir 00:05:21
cualquiera de estas familias que me ofrece 00:05:23
bueno, pues vamos a elegir por ejemplo 00:05:25
esta familia de aquí 00:05:27
elijo esta 00:05:29
y vemos a ver cómo ha cambiado la cosa 00:05:31
vuelvo 00:05:33
al diseño del sitio 00:05:34
vemos los colores que yo he elegido 00:05:37
los temas de color 00:05:40
el llama puesto 00:05:41
como vemos 00:05:43
los colores de énfasis que ha considerado oportunos 00:05:45
y en ajustes avanzados lo mismo. 00:05:47
Yo lo podría cambiar aquí, pero voy a dejarlo para después, ¿vale? 00:05:51
Una vez elegidos los colores del sitio, puedo elegir el tema de texto. 00:05:55
Los encabezados principales. 00:06:02
Aquí él me ha dicho que según lo que yo tengo, según los colores que yo he elegido, 00:06:05
según mi logo, según la inteligencia artificial, según mis colores, 00:06:11
él, digamos que ha deducido 00:06:15
que el tema de texto 00:06:18
el encabezado es una hermética bold 00:06:22
de 60 puntos 00:06:24
los H2 encabezados de grado 2 00:06:26
son hermética bold de 40 00:06:28
y los de 3 00:06:30
encabezados de grado 3 son de 38 00:06:32
yo esto lo puedo cambiar 00:06:34
por ejemplo, si no me convence 00:06:35
hago clic 00:06:37
y yo le puedo cambiar la familia 00:06:38
vamos a ponerle por ejemplo 00:06:41
Comic Sans o Lobster 00:06:43
por ejemplo, un óster, 60 es muy grande, vamos a ponerle, por ejemplo, 45, 00:06:44
le puedo poner en negrita, en cursiva, y le puedo cambiar aquí el color. 00:06:50
Vemos que son los colores del tema que con inteligencia artificial 00:06:56
él ha deducido de la persa. 00:06:59
Vamos a ponerle este, aplicamos, y aplicamos. 00:07:01
Ya tenemos aquí el encabezado de grado 1. 00:07:08
El encabezado de grado 2, pues lo lógico es que también sea lobster, para seguir, digamos, una estética común. 00:07:12
Vamos a poner más pequeñita, por ejemplo, de 32 puntos, por ejemplo. 00:07:23
Ahora, le cambio este color del tema, aplicamos. 00:07:31
Y el encabezado de grado 3, igual, una lobster, vamos a ponerle, por ejemplo, de 25 puntos. 00:07:35
Y el tema, el color este del tema. 00:07:47
Aplicamos. Podríamos seguir así hasta el encabezado de grado 6 y luego tengo distintos párrafos. Vamos a utilizar solamente un párrafo. Vamos a definir el párrafo 1 y que sigamos la estética que hemos aplicado hasta el momento. 00:07:51
es decir, la familia Lobster y la letra de párrafo que vamos a poner la más pequeña, 00:08:08
como por ejemplo de 15 puntos, y para que se entienda bien vamos a ponerla negra. 00:08:18
Aplicamos, aplicamos y ya tenemos también dos párrafos, es decir, tenemos los colores, los párrafos, 00:08:25
Y ahora vamos a definir, vamos a dar formato, diseñamos el encabezado, el pie de página y los colores de la sección. 00:08:32
Para ello hacemos clic en el encabezado y podemos darle a cambia diseño de tu encabezado. 00:08:44
Y aquí me salen los diseños que tengo, que son de muchos tipos, pero también se pueden personalizar. 00:08:51
Aquí tengo distintos encabezados, formas de encabezados, cambiándolos, por ejemplo, este, 00:09:02
y aquí vemos que se puede cambiar para cada uno de ellos, puedo cambiar, o bien, el fondo, el color y opacidad, y luego el borde. 00:09:14
Bien, elijamos, por ejemplo, este. Vemos que en color y opacidad me sale blanco, se puede cambiar, 00:09:24
es un color, el blanco del diseño con inteligencia artificial, pero yo en cualquier momento lo puedo cambiar. 00:09:31
bien por un color que me ha dado del tema 00:09:36
o bien agregando un color de los casi 17 millones 00:09:38
que son disponibles en HTML 00:09:43
bueno, pues vamos a ponerle 00:09:45
para que no nos vayamos del tema, por ejemplo 00:09:47
este color 00:09:50
así 00:09:52
y en el fondo 00:09:53
vemos que podemos cambiar también 00:09:58
el fondo de más negro a más claro 00:10:01
y el fondo, el borde 00:10:04
le puedo poner más o menos opacidad al borde 00:10:06
y más o menos ancho 00:10:10
el color del tema, por ejemplo, le podría poner un azul 00:10:12
vamos a ponerle este, por ejemplo, y vamos a ponerle, por ejemplo, más anchura 00:10:17
ya estamos, vemos que dentro de ellos podría elegir muchos más 00:10:26
y cada uno tendría distintas opciones que no son iguales para cada uno 00:10:32
bien, pues ya tengo, en este caso 00:10:36
el encabezado, vamos al pie de página 00:10:40
y es muy similar 00:10:42
siempre me viene política de privacidad 00:10:44
que la podemos eliminar, esto sería un enlace 00:10:46
a mi política de privacidad 00:10:49
lo suprimo 00:10:51
y vamos ahora 00:10:52
hago clic y me sale 00:10:55
un menú muy parecido a antes 00:10:56
vamos a cambiar el diseño 00:10:58
y vamos a ponerlo 00:11:00
pues algo 00:11:03
similar a lo que hemos puesto antes 00:11:05
el fondo, ahora lo voy a cambiar 00:11:06
un poco, lo voy a poner más clarito y vamos a darle un borde con menos opacidad, más 00:11:10
anchito, esto ya os digo que es un post de diseño, lo seleccionamos y ya estamos. La 00:11:25
edición rápida es para añadir rápidamente elementos, yo no lo recomiendo, ¿de acuerdo? 00:11:39
Vale, si selecciono otra vez el pie de página, por ejemplo, y le doy a los ajustes, puedo 00:11:45
poner el pie de página fijo, significa el pie de página fijo que yo me muevo arriba 00:11:54
y abajo y el pie de página se quedaría fijo, ¿de acuerdo? No seguiría el scroll que hago 00:12:01
con el ratón, quedaría siempre en esta posición. La verdad que si no es una información muy 00:12:08
interesante, mejor eliminarlo. Vale, pues ya tengo aquí el pie de página, tengo también 00:12:12
el encabezado y ahora vamos al cuerpo, las secciones. Se pueden añadir muchas secciones, 00:12:22
es decir, de estas pueden haber varias. Yo de momento voy a dejar solamente una y en 00:12:38
ella también puedo cambiar el fondo, por ejemplo. Vamos a cambiar el fondo, le puedo 00:12:44
poner un color, una imagen, un vídeo, pero este fondo sería el fondo de toda esta sección 00:12:50
que como vemos pasan los límites, es importante ver que los límites son estos 00:12:58
más allá de esta región, aquí por la derecha y aquí por la derecha 00:13:04
izquierda estaría prohibido en teoría 00:13:10
el fondo también se podría haber cambiado, aquí el diseño, el fondo de todo 00:13:12
el fondo de página, podríamos haber puesto un color, una imagen 00:13:18
dentro de las imágenes, yo podría haberme subido 00:13:24
una imagen que yo tuviera 00:13:28
o bien explorar dentro de las colecciones 00:13:29
de Wix 00:13:32
de Shutterstock y de Ansplash 00:13:33
¿vale? vamos a ver por ejemplo 00:13:36
el multimedia que tengo de Wix 00:13:37
en Wix tengo 00:13:39
podría buscar aquí por categorías 00:13:42
filtrar por imágenes 00:13:44
o bien por todo 00:13:46
¿de acuerdo? o bien también 00:13:50
podríamos haber puesto incluso un vídeo 00:13:52
los vídeos que tengo 00:13:54
pues por ejemplo, le podría haber puesto este vídeo 00:13:57
son, digamos, bastante interactivos 00:14:03
lo que pasa es que para un fondo de página web 00:14:05
va a quitar, digamos 00:14:07
visibilidad al contenido, ¿de acuerdo? 00:14:08
por ejemplo, aquí también podría haber puesto este 00:14:12
las dunas 00:14:13
vamos a poner estas dunas 00:14:15
y aquí vemos cómo quedaría la página web 00:14:18
me quedaría así 00:14:24
en principio, aquí no vemos que se estén moviendo las dunas 00:14:28
esto hay que verlo cuando ya está la página 00:14:32
publicada, bien en vista previa 00:14:35
primeramente vamos aquí 00:14:36
a guardar, de acuerdo 00:14:39
según vayamos trabajando vamos guardando 00:14:40
y cuando le damos a guardar 00:14:42
le damos 00:14:45
el nombre, vemos que tiene 00:14:46
en mi caso es resoñando 10 00:14:49
mi correo electrónico, le pone como su dominio 00:14:51
quicksite.com y ahora le pone 00:14:53
el nombre, por ejemplo 00:14:55
voy a ponerle borrame 00:14:57
comprueba que existe 00:15:02
guardamos y continuamos 00:15:05
vamos a publicarlo 00:15:07
lo podríamos haber hecho aquí también 00:15:11
y una vez publicado 00:15:14
vamos a ver el sitio 00:15:16
y así es como me queda 00:15:17
aquí tengo el encabezado que de momento no he puesto nada 00:15:21
y el pie de página aquí 00:15:24
vemos que el encabezado 00:15:26
se queda fijo 00:15:28
el pie de página no, según hago yo 00:15:29
con el ratón, bien, vamos 00:15:32
de nuevo 00:15:34
a la página 00:15:34
podría yo cambiar el fondo de la selección 00:15:37
podríamos haber puesto un color, otra imagen 00:15:42
otro color, otra imagen, incluso un vídeo 00:15:47
a lo que es esta sección de aquí 00:15:51
una cosa es el fondo de la sección y otra cosa es el fondo 00:15:53
de toda la página web, bien, pues voy a ponerle por ejemplo 00:16:00
un color, si le pusiera 00:16:03
un color me lo tapa entero, sin embargo 00:16:07
si le pongo un degradado 00:16:11
mirad, me da la opción 00:16:13
en este caso 00:16:15
lineal 00:16:17
radial 00:16:20
me da la opción de ponerle 00:16:20
transparencia, con lo cual 00:16:23
se me ve el fondo 00:16:25
y así le da un efecto, digamos 00:16:27
de combinación de colores 00:16:29
entre lo que es el fondo 00:16:32
y el fondo de la sección 00:16:33
también por ejemplo 00:16:35
le podría haber puesto esto 00:16:37
etcétera, como veis tengo muchas 00:16:39
combinaciones, voy a dejarlo de momento 00:16:45
con degradado 00:16:48
de esta forma, voy a quitarle 00:16:48
más transparencia, aquí 00:16:54
vemos como tengo, como se me queda 00:17:00
edición rápida como digo es para 00:17:02
introducirle elementos 00:17:08
de manera rápida, no lo recomiendo 00:17:10
y aquí tengo una cosa muy curiosa 00:17:12
que es separadores de forma 00:17:19
los separadores de forma se aplican 00:17:20
debajo de cada sección que apliquemos 00:17:22
¿de acuerdo? 00:17:25
Mirad, vamos a ponerle, por ejemplo, este separador de forma. 00:17:26
Le ponemos este separador, pero vamos a personalizarlo, ¿de acuerdo? 00:17:32
Entonces, la altura, vamos a quitar la altura. 00:17:37
También, opacidad. 00:17:41
Le podríamos aquí cambiar el color. 00:17:47
Vamos a quitarle más altura todavía, un poquito más. 00:17:49
Desplazamiento horizontal, me lo lleva, de esta forma, como veis, va cambiando la onda, por así decirlo. 00:17:52
bien, vamos a dejar así por ejemplo 00:17:58
menos altura 00:18:00
y luego el efecto de capa que lo que va a hacer es difuminarlo 00:18:01
como ves 00:18:04
podríamos haberlo invertido 00:18:05
bien 00:18:07
pues de momento ya lo dejamos así 00:18:09
y hasta aquí 00:18:12
esta presentación de este vídeo 00:18:14
¿de acuerdo? es decir, hemos visto el diseño básico 00:18:16
hemos visto los temas 00:18:18
el diseño del sitio 00:18:20
el encabezado 00:18:21
las secciones, que como digo, se pueden introducir 00:18:23
más secciones 00:18:26
y el pie de página, ¿ok? 00:18:27
Bien, en próximos vídeos ya veremos cómo agregar más elementos ya a la página web, 00:18:30
es decir, veremos cómo introducir textos, imágenes, veremos cómo meter cuadros, 00:18:36
cuadros contenedores de contenido, cuadros decorativos, galerías multimedia, etc. 00:18:46
Vale, pues hasta aquí, muchas gracias. 00:18:52
Idioma/s:
es
Idioma/s subtítulos:
es
Autor/es:
Roberto Soriano Casas
Subido por:
Roberto S.
Licencia:
Reconocimiento - No comercial
Visualizaciones:
17
Fecha:
19 de diciembre de 2023 - 19:59
Visibilidad:
Público
Centro:
IES PABLO PICASSO
Duración:
18′ 58″
Relación de aspecto:
1.89:1
Resolución:
1360x720 píxeles
Tamaño:
98.54 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid