1
00:00:06,769 --> 00:00:12,769
En este tutorial vamos a ver cómo personalizar la apariencia de nuestro sitio web a través del diseñador web.

2
00:00:12,949 --> 00:00:21,089
El diseñador web es un asistente que permite definir la apariencia de la web de manera sencilla y rápida sin tener conocimientos de código CSS.

3
00:00:22,309 --> 00:00:32,750
Bien, para abrir el diseñador web, una vez estamos en nuestro sitio web, pulsamos sobre editar en el panel superior y dentro del apartado apariencia encontramos el botón diseñador web.

4
00:00:32,750 --> 00:00:37,149
Aquí se abre el asistente para que comencemos a personalizar la apariencia de nuestra web.

5
00:00:37,609 --> 00:00:47,950
Antes de empezar a usarlo recomendamos acceder a la pestaña de ayuda ya que en ella encontraremos consejos y recomendaciones tales como activar el botón previsualizar para ver los cambios que vamos incorporando.

6
00:00:48,250 --> 00:00:56,909
Esta opción nos permite ver esos cambios en una página de ejemplo que se abre en segundo plano y que nos dará una idea de cómo quedarán reflejados en nuestra web.

7
00:00:56,909 --> 00:01:05,150
También veremos otros botones útiles como el de guardar y salir, opción que tendremos que pulsar para cuando queramos guardar los cambios que hayamos incorporado.

8
00:01:05,609 --> 00:01:12,530
El diseñador web cuenta con una serie de diseños a los que accedemos desde la pestaña temas y por cada diseño vemos varias opciones.

9
00:01:12,870 --> 00:01:19,730
Para previsualizar estos diseños y ver cómo quedarían en nuestra web podemos pulsar sobre el icono de la lupa que significa previsualizar.

10
00:01:19,730 --> 00:01:24,790
En el icono de la exclamación encontramos más información acerca de un tema en particular

11
00:01:24,790 --> 00:01:30,629
y también nos indica que podemos descargar este tema o apariencia y leer el archivo info.txt

12
00:01:30,629 --> 00:01:33,590
Para descargarlo haríamos clic en el icono de las flechas

13
00:01:33,590 --> 00:01:36,689
Como vemos nos descarga un archivo zip con distinta información

14
00:01:36,689 --> 00:01:43,430
Por último para seleccionar uno de estos temas en nuestra página web haríamos clic en el icono del tick verde

15
00:01:43,430 --> 00:01:47,109
Para terminar de aplicarlo deberemos hacer clic en guardar y salir

16
00:01:47,109 --> 00:01:49,250
Nos muestra un mensaje de aviso y aceptamos

17
00:01:49,250 --> 00:01:52,989
Se recarga nuestra página y ya nos aparece con el estilo que hemos seleccionado.

18
00:01:53,250 --> 00:01:58,310
A continuación, accedemos de nuevo al diseñador web para personalizar este diseño predefinido.

19
00:01:58,549 --> 00:02:03,530
Aunque en nuestro caso hemos aplicado un diseño, no es necesario aplicar uno para usar el diseñador web.

20
00:02:03,670 --> 00:02:07,769
Podemos crear nuestro diseño desde cero, completando los datos que vamos a ver a continuación.

21
00:02:08,330 --> 00:02:14,490
Aunque antes debemos indicar que en nuestra documentación de ayuda se puede consultar toda la información sobre el diseñador web.

22
00:02:14,490 --> 00:02:31,430
Bien, desde la pestaña General podemos personalizar los datos referidos a los aspectos generales de la página, como son el ancho, la posición de la misma, si queremos que tenga un color de fondo o una imagen, o definir el formato de los textos y de los enlaces de los datos generales de la página.

23
00:02:31,430 --> 00:02:36,949
Desde la pestaña cabecera definimos las características que queremos que tenga la cabecera de nuestra web.

24
00:02:37,030 --> 00:02:42,229
Podemos definir si queremos que se muestre o no el nombre de nuestra web, ahí lo vemos primero de historia,

25
00:02:42,650 --> 00:02:44,550
así como el formato que queremos que tenga.

26
00:02:44,870 --> 00:02:50,349
También podemos cambiar la imagen de la cabecera, pero este proceso lo veremos detenidamente en otro tutorial.

27
00:02:51,150 --> 00:02:56,810
También podemos editar cómo queremos que se vea este camino de migas que les aparece a los visitantes de nuestra web,

28
00:02:56,909 --> 00:02:58,569
o directamente podemos ocultarlo.

29
00:02:58,569 --> 00:03:08,689
Si vamos a realizar muchos cambios en la apariencia, es recomendable que pulsemos sobre guardar y salir cada vez que estemos seguros de mantener el cambio realizado para que el trabajo no se pierda.

30
00:03:08,810 --> 00:03:13,289
De nuevo, volvemos a entrar al diseñador web para seguir diseñando el aspecto de nuestra web.

31
00:03:13,650 --> 00:03:18,189
Desde la pestaña menús, definimos el aspecto que tendrá el menú principal de nuestra página.

32
00:03:18,569 --> 00:03:26,590
Nuestro sitio web cuenta con un menú que tiene subpáginas y aquí podemos escoger ocultar las páginas de segundo nivel cuando ponemos el cursor encima.

33
00:03:26,590 --> 00:03:36,610
Si queremos que el menú aparezca de manera vertical, tendremos que haber incorporado previamente el recurso mapa del web en una columna estrecha y podremos personalizar su presentación.

34
00:03:36,870 --> 00:03:42,830
Aquí ya lo habríamos añadido y si quisiéramos que solo se mostrara este menú, haríamos clic en mostrar solo este menú.

35
00:03:43,050 --> 00:03:49,030
Desde la pestaña recursos, definimos el aspecto que tendrán los recursos y aplicaciones que mostremos en nuestra web.

36
00:03:49,030 --> 00:03:59,469
Por ejemplo, podemos configurarlo para que se muestren los recursos sin borde, el espacio que queremos definir entre los recursos, el redondeado de las esquinas y muchas más opciones de personalización.

37
00:04:00,050 --> 00:04:06,270
Desde la pestaña contenidos definimos la presentación que tendrán los contenidos creados con el administrador de contenidos.

38
00:04:06,569 --> 00:04:14,629
Podemos seleccionar un tipo de fuente con la que se mostrarán los títulos y otro distinto para los textos de esos contenidos, así como el color con el que se mostrarán.

39
00:04:14,629 --> 00:04:19,790
En este apartado tablas podemos definir el aspecto que tendrán las tablas que proporcionan

40
00:04:19,790 --> 00:04:24,089
información adicional en algunos tipos de contenidos, como por ejemplo el tipo de contenido

41
00:04:24,089 --> 00:04:29,529
publicación. Desde la pestaña pie de página definimos los aspectos relacionados con la

42
00:04:29,529 --> 00:04:34,089
parte inferior de nuestra página. Como vemos podemos especificar la altura, añadir una

43
00:04:34,089 --> 00:04:39,250
imagen, cambiar los colores y demás. Desde la pestaña móvil podemos definir el aspecto

44
00:04:39,250 --> 00:04:43,170
que tendrá nuestra página cuando se vea desde un dispositivo móvil. EducaMadrid

45
00:04:43,170 --> 00:04:47,290
ofrece una vista móvil común para todas las páginas web elaboradas con las herramientas

46
00:04:47,290 --> 00:04:51,709
propias del portal educativo Liferay. De este modo, podemos tener elaborada nuestra página

47
00:04:51,709 --> 00:04:56,470
web con un diseño y apariencia personalizada accesible desde un PC y al visualizarla desde

48
00:04:56,470 --> 00:05:00,889
un dispositivo móvil de forma automática, el diseño cambia a la vista que por defecto

49
00:05:00,889 --> 00:05:05,029
ofrece la herramienta, garantizando así su correcta visualización desde este tipo de

50
00:05:05,029 --> 00:05:09,490
dispositivos. En otro tutorial explicaremos cómo personalizar la vista móvil. Desde

51
00:05:09,490 --> 00:05:14,769
la pestaña avanzado podremos incorporar código CSS para complementar la personalización de

52
00:05:14,769 --> 00:05:20,230
nuestra página. En este caso recomendamos sólo hacerlo si tenemos conocimientos avanzados sobre

53
00:05:20,230 --> 00:05:25,569
CSS. Como decíamos al principio una vez que hemos finalizado nuestro proceso de diseño pulsamos

54
00:05:25,569 --> 00:05:29,850
sobre guardar y salir para guardar los cambios. En el caso de que no queramos aplicar ninguno de

55
00:05:29,850 --> 00:05:34,269
los cambios realizados pulsamos sobre descartar cambios. En nuestro caso vemos que se han aplicado

56
00:05:34,269 --> 00:05:38,930
algunos cambios de los que hemos ido haciendo como eliminar el borde de los contenidos y hacer

57
00:05:38,930 --> 00:05:43,189
bordes más redondeados. Si en algún momento queremos realizar alguna modificación en la

58
00:05:43,189 --> 00:05:47,889
apariencia pero queremos asegurarnos de no perder lo que ya tenemos, recomendamos guardar la

59
00:05:47,889 --> 00:05:52,269
apariencia que habíamos realizado previamente. Para ello deberemos abrir de nuevo el diseñador

60
00:05:52,269 --> 00:05:57,209
web y hacer clic en copia de seguridad. Aquí leemos con atención las instrucciones para guardar

61
00:05:57,209 --> 00:06:03,350
esta copia de seguridad así como para restablecerla. En resumen es copiar y guardar este código en un

62
00:06:03,350 --> 00:06:07,610
bloc de notas o un programa similar en nuestro ordenador. Y si en algún momento quisiéramos

63
00:06:07,610 --> 00:06:11,970
volver al diseño inicial proporcionado por EducaMadrid, accederemos de nuevo al diseñador

64
00:06:11,970 --> 00:06:16,730
web y pulsamos sobre borrar mi diseño. Efectivamente nos muestra un aviso en el que nos indica

65
00:06:16,730 --> 00:06:20,949
que esta operación no puede deshacerse y el diseño se eliminará definitivamente.

66
00:06:21,589 --> 00:06:26,550
Por último, antes de acabar, vamos a ver brevemente algunos ejemplos de páginas de

67
00:06:26,550 --> 00:06:31,189
web de centros reales que han usado el diseñador web para personalizar su página. En este

68
00:06:31,189 --> 00:06:35,269
caso vemos la del CEIP San Sebastián, que ha empleado la misma plantilla que nosotros

69
00:06:35,269 --> 00:06:41,050
en el tutorial, pero como vemos la ha personalizado con el diseñador web. Y ahora vemos otros dos

70
00:06:41,050 --> 00:06:46,649
ejemplos distintos que han utilizado plantillas diferentes del diseñador web y las han personalizado.