1
00:00:06,769 --> 00:00:11,689
En este tutorial vamos a ver cómo personalizar la vista móvil de nuestra página web.

2
00:00:11,949 --> 00:00:18,789
EducaMadrid ofrece una vista móvil común para todas las páginas web elaboradas con las herramientas propias del portal educativo Liferay.

3
00:00:19,010 --> 00:00:26,070
De este modo podemos tener elaborada nuestra página web con un diseño personalizado que sea accesible desde un ordenador

4
00:00:26,070 --> 00:00:33,929
y que también al visualizarla desde un dispositivo móvil automáticamente el diseño cambia la vista que por defecto ofrece la herramienta

5
00:00:33,929 --> 00:00:37,869
garantizando así su correcta visualización desde este tipo de dispositivos.

6
00:00:38,189 --> 00:00:44,070
Si queremos tener un diseño personalizado para los dispositivos móviles, tenemos que habilitar el diseño en vista móvil.

7
00:00:44,289 --> 00:00:48,890
Para ello vamos al panel superior Editar y después hacemos clic en Diseñador web.

8
00:00:49,030 --> 00:00:54,149
Ahora venimos a la pestaña Móvil. Aquí marcamos la opción Habilitar el diseño en vista móvil.

9
00:00:54,450 --> 00:01:02,909
Como vemos, aquí nos indica que este tipo de vista se aplicará en aquellos dispositivos cuya resolución de pantalla sea menor de 979 píxeles.

10
00:01:02,909 --> 00:01:09,090
después hacemos clic en guardar y salir y en aceptar si accedemos a vista previa vemos ahora

11
00:01:09,090 --> 00:01:13,549
nuestra web a través de un dispositivo móvil podremos comprobar que la página conserva la

12
00:01:13,549 --> 00:01:18,390
misma apariencia que cuando la visualizamos desde el ordenador pero la imagen de cabecera no se

13
00:01:18,390 --> 00:01:23,250
reajusta al nuevo tamaño de pantalla sino que se ve cortada por lo tanto lo que tenemos que

14
00:01:23,250 --> 00:01:28,290
hacer es adaptar la imagen a la vista móvil y subirla al diseñador web en la pestaña móvil

15
00:01:28,290 --> 00:01:33,549
Si lo deseamos también podemos subir una imagen diferente a la que tenemos en la vista para la web.

16
00:01:33,750 --> 00:01:38,810
Para ello deberemos tener en cuenta que como vemos la imagen de la cabecera se ajusta a la izquierda,

17
00:01:38,969 --> 00:01:45,530
por lo que deberemos incorporar una imagen cuya información que queremos que se vea correctamente la deberemos posicionar en el lado izquierdo

18
00:01:45,530 --> 00:01:48,469
y en el lado derecho podríamos poner un degradado o similar.

19
00:01:48,769 --> 00:01:54,829
Para subir la imagen de nuestra cabecera móvil cerramos la vista previa y después volveríamos al diseñador web,

20
00:01:54,829 --> 00:02:00,609
a la pestaña móvil y aquí haríamos clic en el icono del disco duro virtual para subir

21
00:02:00,609 --> 00:02:04,709
nuestra imagen. Después haríamos clic en añadir imagen, después en examinar y aquí

22
00:02:04,709 --> 00:02:08,930
seleccionaríamos de nuestro ordenador la imagen correspondiente. Después hacemos clic

23
00:02:08,930 --> 00:02:13,189
en abrir. Le podemos asignar un título y después hacemos clic en subir fichero. Una

24
00:02:13,189 --> 00:02:17,389
vez que está subido volvemos al listado y aquí simplemente lo seleccionamos y hacemos

25
00:02:17,389 --> 00:02:21,729
clic en seleccionar. Después haríamos clic en guardar y salir. Podemos ver como ahora

26
00:02:21,729 --> 00:02:23,949
la cabecera se ve correctamente.