Saltar navegación

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

Diseñador Web: vista móvil

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 28 de marzo de 2025 por EducaMadrid

37 visualizaciones

Procedimiento para personalizar la vista móvil de la cabecera de nuestro sitio web.

Más información Transcripción

Descargar la transcripción

En este tutorial vamos a ver cómo personalizar la vista móvil de nuestra página web. 00:00:06
EducaMadrid ofrece una vista móvil común para todas las páginas web elaboradas con las herramientas propias del portal educativo Liferay. 00:00:11
De este modo podemos tener elaborada nuestra página web con un diseño personalizado que sea accesible desde un ordenador 00:00:19
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 00:00:26
garantizando así su correcta visualización desde este tipo de dispositivos. 00:00:33
Si queremos tener un diseño personalizado para los dispositivos móviles, tenemos que habilitar el diseño en vista móvil. 00:00:38
Para ello vamos al panel superior Editar y después hacemos clic en Diseñador web. 00:00:44
Ahora venimos a la pestaña Móvil. Aquí marcamos la opción Habilitar el diseño en vista móvil. 00:00:49
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. 00:00:54
después hacemos clic en guardar y salir y en aceptar si accedemos a vista previa vemos ahora 00:01:02
nuestra web a través de un dispositivo móvil podremos comprobar que la página conserva la 00:01:09
misma apariencia que cuando la visualizamos desde el ordenador pero la imagen de cabecera no se 00:01:13
reajusta al nuevo tamaño de pantalla sino que se ve cortada por lo tanto lo que tenemos que 00:01:18
hacer es adaptar la imagen a la vista móvil y subirla al diseñador web en la pestaña móvil 00:01:23
Si lo deseamos también podemos subir una imagen diferente a la que tenemos en la vista para la web. 00:01:28
Para ello deberemos tener en cuenta que como vemos la imagen de la cabecera se ajusta a la izquierda, 00:01:33
por lo que deberemos incorporar una imagen cuya información que queremos que se vea correctamente la deberemos posicionar en el lado izquierdo 00:01:38
y en el lado derecho podríamos poner un degradado o similar. 00:01:45
Para subir la imagen de nuestra cabecera móvil cerramos la vista previa y después volveríamos al diseñador web, 00:01:48
a la pestaña móvil y aquí haríamos clic en el icono del disco duro virtual para subir 00:01:54
nuestra imagen. Después haríamos clic en añadir imagen, después en examinar y aquí 00:02:00
seleccionaríamos de nuestro ordenador la imagen correspondiente. Después hacemos clic 00:02:04
en abrir. Le podemos asignar un título y después hacemos clic en subir fichero. Una 00:02:08
vez que está subido volvemos al listado y aquí simplemente lo seleccionamos y hacemos 00:02:13
clic en seleccionar. Después haríamos clic en guardar y salir. Podemos ver como ahora 00:02:17
la cabecera se ve correctamente. 00:02:21
Idioma/s:
es
Etiquetas:
EducaMadrid
Autor/es:
Samuel Gómez
Subido por:
EducaMadrid
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
37
Fecha:
28 de marzo de 2025 - 13:48
Visibilidad:
Público
Enlace Relacionado:
https://ayuda.educa.madrid.org/books/gesti%C3%B3n-de-espacios-web-del-portal-educativo/page/dise%C3%B1ador-web-20#bkmrk-m%C3%B3vil
Duración:
02′ 32″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
60.63 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid