Muse CC para diseño web responsivo

Trabajar con la página maestra en el breakpoint de 480 px

¡Prueba gratis durante 10 días

nuestros 1220 cursos !

Prueba gratis Mostrar modalidades de suscripción
En el punto de rotura de 480 px tenemos una restricción de espacio que afecta particularmente al menú de navegación, por lo cual es necesario rediseñarlo para que el usuario tenga una mejor experiencia desde su smartphone.
06:49

Transcripción

Vamos a empezar a trabajar con el tercer punto de rotura o "breakpoint" que nosotros hemos definido en 480 pixeles. Empezamos entonces trabajando en la página maestra: hago un doble clic y aquí tenemos la página maestra en el área de Diseño. Vamos entonces a hacer un clic derecho, Añadir punto de rotura y 480 pixeles como ubicación de ese nuevo punto de rotura. Ahora ubicamos un poco estos elementos, tanto el logo como el menú de navegación, y hacemos el ajuste también en la caja de texto que tenemos en la parte inferior. Como se están dando cuenta, tenemos una restricción importante de espacio, ya que este "breakpoint" o punto de rotura está definiendo un tamaño de 480 pixeles. Por ejemplo, el texto que tenemos en la parte inferior, en el pie de página, es un texto con un tamaño muy grande para el espacio que nosotros tenemos. Dentro de la caja de herramientas nosotros tenemos dos herramientas de texto en la parte inferior. Esta primera herramienta permite que nosotros hagamos cambios que se reflejan en todos los puntos de rotura o "breakpoint", mientras que esta herramienta permite que nosotros hagamos cambios que se apliquen solamente al "breakpoint" actual o al punto de rotura actual. Vamos a hacer la demostración: con esta herramienta voy a seleccionar este texto y vamos a cambiar el tamaño, por ejemplo, a 8 pixeles. Si venimos a otro "breakpoint", observen que el cambio también se refleja a este otro "breakpoint" o punto de rotura y observen que el cambio también se refleja. Vamos a deshacer ese cambio, voy a tomar la otra herramienta, nuevamente cambiamos a 8 pixeles y observen que en los demás puntos de rotura o "breakpoints" ese cambio no se refleja. Voy a deshacer entonces y vamos a hacer el cambio pero no tan drástico. Vamos a dejarle un tamaño de 12 pixeles y lo dejamos en esa ubicación que tenemos actualmente. Recuerden: esos cambios solamente los estoy aplicando sobre este punto de rotura o "breakpoint", porque estoy utilizando esta herramienta. Ahora también tenemos problemas con el menú de navegación. Este es un menú de navegación relativamente pequeño, porque solo existen cuatro páginas en este sitio web, pero si existieran más páginas los problemas se agravarían. Solamente con estas cuatro páginas podemos darnos cuenta, por ejemplo, que el texto de contacto está muy al borde de la caja de este elemento del menú. Adicionalmente, como este menú de navegación está reduciendo su tamaño de forma proporcional, al hacerse tan pequeño, en pantalla estos pueden generar inconvenientes cuando la persona vaya a interactuar con cada uno de estos elementos. Entonces podría pasar que al tratar de tocar uno de estos elementos, active otro. Vamos entonces a eliminar o a ocultar este elemento dentro de este "breakpoint": clic derecho y seleccionamos la opción Ocultar en punto de rotura. Necesitamos crear un menú de navegación que tenga un área mayor de interacción. Eso lo podemos hacer de una forma bastante sencilla utilizando dentro de los "widgets" el menú que es vertical. Observen que arrastramos, podríamos escalar este elemento, y ya tenemos mucho más espacio entonces para que el usuario interactúe con cada uno de los elementos del menú. Voy a eliminar este menú y dentro del panel Biblioteca voy a importar un elemento de biblioteca que se llama 'menu-mobile' y que ya tengo preparado. Hago clic en Abrir, aquí tengo 'expert 2' como carpeta y dentro de esta carpeta el elemento 'menu-mobile'. Voy a tomar ese elemento, lo arrastro dentro de la página y lo voy a ubicar alineándolo en la parte inferior respecto a esta guía encabezada. Este elemento lo voy a desplazar hacia la parte derecha y además voy a traerlo al frente. Vamos a mirar qué está pasando con este elemento: Archivo, Vista previa de página en el navegador. Reducimos hasta activar el último "breakpoint" y observen lo que va a ocurrir: se despliega y se colapsa un menú de navegación. Expandimos nuevamente, volvemos a Muse y lo que tenemos es un "widget" de tipo acordeón. Cuando se despliega el "widget" de tipo acordeón, en el área de contenido de este "widget" nosotros hemos embebido o incrustado el menú de navegación vertical que ya está formateado, por supuesto. Tenemos sin embargo un inconveniente: observen como este menú de navegación está oculto por otro elemento, vamos a mirar qué es lo que está ocurriendo. Básicamente lo que pasa es que este menú de navegación está apareciendo en todos los puntos de rotura o "breakpoint", entonces lo seleccionamos, hacemos un clic derecho y seleccionamos la opción Ocultar en otros puntos de rotura, de manera que solamente va a aparecer en este punto de rotura o "breakpoint". Miren que aquí el problema ya no existe. Finalmente, necesitamos asegurarnos de que este menú de navegación esté sobre todos los elementos de contenido. Para eso, en el panel de Capas vamos a agregar una capa nueva, vamos a cambiarle el nombre, que se llame 'Menú'. Tomamos todos los elementos que están en la parte superior, en el área del encabezado, y hacemos un clic sostenido sobre este pequeño cuadro azul y lo arrastramos sobre el cuadro que está en la parte superior. Esto hace que todos los elementos que tenía seleccionados pasen a ser parte de la capa 'Menú'. Como la capa 'Menú' está sobre la 'Capa 1', entonces nos estamos asegurando que los elementos que hacen parte de esta capa siempre estén sobre o cubran los otros elementos. De esta manera, nosotros hemos hecho los ajustes necesarios de la página maestra en el Break Point o punto de rotura de 480 píxeles.

Muse CC para diseño web responsivo

Crea una web responsive sin escribir una sola línea de código gracias a Adobe Muse CC, la aplicación de la familia Adobe que te permite diseñar tu página de forma gráfica.

3:10 horas (41 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:15/09/2016

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.