1
00:00:00,000 --> 00:00:06,000
Bien, en este vídeo vamos a ver tres aspectos básicos.

2
00:00:06,000 --> 00:00:10,000
Primeramente vamos a introducir cajas contenedoras de contenido.

3
00:00:10,000 --> 00:00:15,000
Vamos a trabajar un poco con los textos y después con los elementos decorativos.

4
00:00:15,000 --> 00:00:21,000
Bien, empecemos por el primero, la introducción de cajas contenedoras de información.

5
00:00:21,000 --> 00:00:29,000
Para ello vamos a agregar elementos y vamos a cuadros.

6
00:00:29,000 --> 00:00:34,000
Entonces, dentro de cuadros contenedores de contenido, tenemos todos estos,

7
00:00:34,000 --> 00:00:39,000
podremos emplear, podremos utilizar el que queramos simplemente arrastrándolo a la sección.

8
00:00:39,000 --> 00:00:42,000
Por ejemplo, éste.

9
00:00:44,000 --> 00:00:49,000
Una vez en la sección podemos cambiar su forma, o sea, sus dimensiones,

10
00:00:49,000 --> 00:00:53,000
y podemos también cambiar su diseño, sus colores, etc.

11
00:00:53,000 --> 00:00:58,000
Bien, si cambiamos, damos a cambiar diseño, aquí en personalización,

12
00:00:58,000 --> 00:01:05,000
podemos cambiar la forma básica y bien sus colores, el tipo de borde, esquinas y sombreado.

13
00:01:05,000 --> 00:01:11,000
Por ejemplo, el color vamos a cambiarlo por uno de nuestro tema, por ejemplo, el rojo.

14
00:01:11,000 --> 00:01:19,000
Podemos también darle distinta transparencia para que se pueda ver a través de él un poco el fondo.

15
00:01:19,000 --> 00:01:25,000
Bien, vamos a dejarlo así, con un color del tema y con aproximadamente la mitad de transparencia.

16
00:01:26,000 --> 00:01:31,000
En las opciones de borde, lo mismo, tenemos un borde de un color y de una transparencia,

17
00:01:31,000 --> 00:01:37,000
vamos a dejarlo 100% y vamos a cambiar su ancho, por ejemplo, a 5 píxeles.

18
00:01:39,000 --> 00:01:45,000
Las opciones de las esquinas, pues esto es el borde de radius que hemos visto en CSS,

19
00:01:45,000 --> 00:01:49,000
vamos a ponerlo así de redondeadito, y por último el sombreado.

20
00:01:49,000 --> 00:01:51,000
¿Se puede aplicar sombreado? Uno.

21
00:01:52,000 --> 00:02:00,000
Se puede cambiar el ángulo del sombreado también, la distancia que tiene respecto de la forma,

22
00:02:02,000 --> 00:02:13,000
el tamaño de la sombra más o menos, el desenfoque y también el color y opacidad de esta sombra.

23
00:02:14,000 --> 00:02:20,000
Bien, ya tenemos una caja contenedora un poquito ya maqueada.

24
00:02:21,000 --> 00:02:24,000
Las opciones de diseño me conducen a lo mismo.

25
00:02:26,000 --> 00:02:32,000
Después tenemos la animación, es decir, los efectos de entrada cuando se carga la página web.

26
00:02:33,000 --> 00:02:35,000
Podemos darle distintos de ellos.

27
00:02:37,000 --> 00:02:39,000
Vamos a darle este, por ejemplo.

28
00:02:40,000 --> 00:02:45,000
Y ya por último me aparece una cosa que son efectos con el ratón, tipo javascript.

29
00:02:45,000 --> 00:02:48,000
Si le damos aquí, comenzamos,

30
00:02:55,000 --> 00:02:57,000
vamos a darle a elegir efecto.

31
00:02:58,000 --> 00:03:04,000
Entonces podemos reducir cuando le pasamos el ratón por encima, sesgar, rotar, hacer más cosas,

32
00:03:04,000 --> 00:03:08,000
vamos a ver por ejemplo el efecto de agrandar en cuanto le pasemos el ratón.

33
00:03:10,000 --> 00:03:17,000
Esto lo guardamos y vamos a verlo en vista previa.

34
00:03:21,000 --> 00:03:26,000
Hemos visto los efectos de aparición, cómo se agranda el contenedor cuando le pasamos el ratón

35
00:03:26,000 --> 00:03:30,000
y este de aquí, que ya lo tenía de antes, cómo se encoge.

36
00:03:31,000 --> 00:03:33,000
Bien, volvemos al modo editor.

37
00:03:39,000 --> 00:03:44,000
Y ahora vamos a introducirle texto, vamos a poner algo parecido a lo que tenemos aquí.

38
00:03:44,000 --> 00:03:48,000
Para ello vamos a agregar elementos, textos.

39
00:03:52,000 --> 00:04:02,000
Texto temático me aparece los diseños que yo he hecho aquí cuando dimos a las opciones del diseño del sitio.

40
00:04:03,000 --> 00:04:09,000
Me aparecen siempre el texto en primer lugar, el primer encabezado, el h1, el h2, el h3

41
00:04:09,000 --> 00:04:13,000
y luego aquí tengo los párrafos después del título de grado 6.

42
00:04:13,000 --> 00:04:22,000
Vamos a ponerle un encabezado de grado 2, editamos el texto y le ponemos lo que pone aquí, noticias.

43
00:04:22,000 --> 00:04:33,000
Bien, vuelvo a editar el texto.

44
00:04:33,000 --> 00:04:39,000
Entonces le puedo cambiar el estilo si quiero, como he hecho antes, la fuente, el tamaño de la fuente también,

45
00:04:39,000 --> 00:04:45,000
solo que yo al definir los encabezados, al definir los estilos globales de mi página web,

46
00:04:45,000 --> 00:04:51,000
esto, ni el estilo, ni la fuente, ni el tamaño, en principio voy a tocarlo, así como el color.

47
00:04:51,000 --> 00:04:55,000
Voy a cambiar ahora el color porque es muy parecido a la caja contenedora,

48
00:04:55,000 --> 00:05:06,000
con lo cual vamos a ponerle en este caso otro color de mi tema, hecho con inteligencia artificial a partir del logo.

49
00:05:06,000 --> 00:05:18,000
Lo arrastro, veis que pone adjuntar a la caja, está adjuntado a la caja, lo pongo un poco más arriba, ahí centradito.

50
00:05:19,000 --> 00:05:26,000
Si le doy ahora a editar texto de nuevo, vamos a ver más opciones que tengo, le podría haber colocado un hiperenlace,

51
00:05:26,000 --> 00:05:33,000
un hiperenlace a una página dentro de mis páginas web, que de momento no tengo ninguna, a una dirección web,

52
00:05:33,000 --> 00:05:49,000
como por ejemplo https://yespablovicaso.info, le podría haber hecho más enlaces a otras partes,

53
00:05:49,000 --> 00:05:56,000
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,

54
00:05:56,000 --> 00:06:02,000
a un correo electrónico, etc. Y aquí me pone que se abre en la ventana nueva o en la ventana actual.

55
00:06:02,000 --> 00:06:07,000
Como no está relacionado con mi página web, sino que es un sitio externo, lo dejo en la ventana nueva.

56
00:06:07,000 --> 00:06:13,000
Los enlaces también los podría haber hecho desde esta opción.

57
00:06:13,000 --> 00:06:20,000
Tengo también efectos de alineación, hacer listas, poner sangrías, etc.

58
00:06:20,000 --> 00:06:29,000
Y luego tengo más efectos en el texto, para ello selecciono todo el texto, selecciono todo,

59
00:06:29,000 --> 00:06:35,000
y aquí en editar texto puedo dar distintos efectos, por ejemplo este.

60
00:06:35,000 --> 00:06:42,000
Puedo elegir el espaciado entre los caracteres, es decir, que la palabra sea más larga.

61
00:06:42,000 --> 00:06:47,000
Así damos un poquito más de espacio entre ellos.

62
00:06:47,000 --> 00:06:57,000
El espaciado interlineal, en caso de tener varias líneas, puedo poner el texto vertical y las opciones de accesibilidad.

63
00:07:02,000 --> 00:07:11,000
Y ahora vamos a añadir lo que se dice la información, los párrafos.

64
00:07:11,000 --> 00:07:14,000
Le arrastro a mi página web.

65
00:07:14,000 --> 00:07:19,000
Y aquí podría poner, igual que hemos visto, con el encabezado.

66
00:07:19,000 --> 00:07:24,000
Estilo, párrafo 1, fuente, tamaño y las mismas opciones que acabamos de ver.

67
00:07:27,000 --> 00:07:33,000
Y ya por último vamos a añadir un elemento decorativo como el arte vectorial que tengo aquí.

68
00:07:33,000 --> 00:07:39,000
Para ello vamos a añadir elementos y vamos a Decorate.

69
00:07:39,000 --> 00:07:43,000
Y aquí en decorativo tengo bastantes cosillas que puedo utilizar.

70
00:07:43,000 --> 00:07:46,000
Por ejemplo, vamos a poner aquí un corazoncito.

71
00:07:49,000 --> 00:07:52,000
Y me sale una serie de opciones también parecidas a las de antes.

72
00:07:52,000 --> 00:07:59,000
Voy a cambiarle este corazoncito por, digamos, esta otra forma.

73
00:07:59,000 --> 00:08:01,000
Vamos a cambiar forma.

74
00:08:03,000 --> 00:08:08,000
Y aquí en formas básicas tengo todas estas formas, pero tengo más.

75
00:08:08,000 --> 00:08:13,000
Por ejemplo, tengo arte vectorial, app icons, todo esto.

76
00:08:13,000 --> 00:08:17,000
Vamos a darle a iconos de las app, por ejemplo.

77
00:08:17,000 --> 00:08:19,000
Tengo todo esto.

78
00:08:21,000 --> 00:08:25,000
Y aquí tengo, en este caso, el clip.

79
00:08:25,000 --> 00:08:28,000
Lo selecciono y lo agrego a la página.

80
00:08:29,000 --> 00:08:31,000
Vemos cómo ha cambiado, ¿verdad?

81
00:08:32,000 --> 00:08:35,000
Bueno, pues entonces vamos a cambiarle el color.

82
00:08:36,000 --> 00:08:41,000
Aquí en diseño lo pongo, por ejemplo, de color negro de mi tema.

83
00:08:42,000 --> 00:08:46,000
Evidentemente puedo cambiarlo de tamaño, arrastrándolo así un poquito.

84
00:08:47,000 --> 00:08:53,000
Y tengo ahora las opciones de ponerlo delante de la caja contenedora o detrás, como hacíamos en PowerPoint.

85
00:08:53,000 --> 00:08:55,000
Ahora mismo está delante.

86
00:08:56,000 --> 00:08:59,000
Bien, pues para ello vamos a herramientas.

87
00:08:59,000 --> 00:09:04,000
Y aquí en esta herramienta doy clic a la barra de herramientas.

88
00:09:05,000 --> 00:09:07,000
Y vengo a este comando.

89
00:09:07,000 --> 00:09:14,000
Este comando, si lo despliego, tengo para ponerlo detrás, como no está ahora.

90
00:09:14,000 --> 00:09:17,000
Y veis que me aparece, ahora se me esconde detrás.

91
00:09:17,000 --> 00:09:22,000
Es agresible porque le puedo dar que se me ponga delante.

92
00:09:26,000 --> 00:09:34,000
Y ya por último, ultimísimo en este vídeo, puedo añadir líneas verticales y horizontales.

93
00:09:34,000 --> 00:09:38,000
Para ello me vengo a decorativo igualmente.

94
00:09:40,000 --> 00:09:45,000
Y aquí tengo las líneas horizontales, y también tengo un poco más abajo,

95
00:09:45,000 --> 00:09:51,000
aquí tengo más líneas horizontales y líneas verticales, que dan un buen estilo a mi página web.

96
00:09:51,000 --> 00:09:58,000
Por ejemplo, si yo arrastro esta línea, puedo hacerla más larga.

97
00:10:04,000 --> 00:10:07,000
Y le puedo cambiar el diseño.

98
00:10:10,000 --> 00:10:15,000
Dentro de estas líneas le puedo poner estos tipos, y lo puedo personalizar.

99
00:10:15,000 --> 00:10:19,000
Le puedo dar distintos tipos de línea.

100
00:10:25,000 --> 00:10:29,000
Aquí veis distintos tipos de estilo.

101
00:10:35,000 --> 00:10:39,000
Y aquí elegís la que queráis.

102
00:10:43,000 --> 00:10:50,000
Le puedes también cambiar el color, el ancho, etc.

103
00:10:51,000 --> 00:10:55,000
Bien, pues en este vídeo ya nada más.

104
00:10:55,000 --> 00:11:01,000
En el siguiente vídeo vamos a ver cómo tratar las imágenes, es decir, vamos a hacer algo similar a esta imagen.

105
00:11:01,000 --> 00:11:03,000
Muchas gracias.

106
00:11:04,000 --> 00:11:07,000
Subtítulos realizados por la comunidad de Amara.org