Muse CC para diseño web responsivo

Trabajo con estados en nuestro sitio web responsive

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Los estados representan respuestas a las diferentes interacciones de los usuarios con los elementos en Adobe Muse y se pueden configurar fácilmente. Aunque son comunes en los botones, tienen múltiples usos.
06:22

Transcripción

Los estados representan respuestas a las diferentes interacciones del usuario sobre los elementos que tenemos en nuestro diseño web. Podemos configurar los estados de prácticamente cualquier elemento dentro de Muse. Por ejemplo, voy a seleccionar este botón y voy a abrir un panel que se llama Estados. Dentro de este panel, nosotros vemos los diferentes estados que pueden aplicar a este elemento. Tenemos el estado Normal, tenemos el estado Rollover, el estado Ratón pulsado y el estado Activo. El estado normal es el estado cuando no estamos interactuando con este elemento. El estaba rollover es el estado cuando colocamos el puntero sobre el área del elemento. El estado ratón pulsado es cuando hacemos un clic sobre el área del elemento. Y el estado activo es un estado especial que normalmente se utiliza en los menús de navegación. Vamos a hacer un cambio al estado rollover, así que seleccionamos este estado y vamos a cambiar el color de relleno de esta caja. En el área de relleno vamos a cambiar a color azul. Ese mismo listado de estados lo podemos encontrar dentro del panel de color haciendo clic sobre este "hyperlink". Aquí tenemos el estado normal, rollover, ratón pulsado y activo, exactamente lo mismo. Y también podemos seleccionar los estados desde este menú desplegable sin necesidad de utilizar el panel Estados. Vamos a previsualizar el resultado de lo que acabamos de hacer: hacemos clic en el botón Previsualizar, colocamos el puntero, y observen que ya tenemos el cambio de color de fondo en el estado rollover. Sin embargo, generalmente es buena idea que cuando el usuario coloca el puntero sobre estos elementos, me aparezca un icono diferente que me está indicando que existe una interacción, de este botón por ejemplo. En este caso, no vemos ningún cambio sobre el puntero, así que vamos al área de Diseño y en el área de Hipervínculos hacemos un clic en este menú desplegable y escribimos numeral. Técnicamente, podríamos utilizar cualquier carácter, pero normalmente de forma estandarizada nosotros utilizamos el símbolo numeral para indicar un hipervínculo, especialmente cuando todavía no conocemos el vínculo exacto que vamos a utilizar en un elemento. Presiono Enter y ya hemos agregado el numeral como un "hyperlink" temporal para este elemento. Vamos a previsualizar ese campo, observen como ahora el puntero cambia: es una mano y esto indica interacción. Adicionalmente, nosotros también podemos agregar una transición en los cambios entre los estados. Observen como el cambio es muy rápido, es brusco, la transición hace que ese cambio sea más suave. Vamos al área de Diseño, hacemos clic en este "hyperlink" o también dentro del panel de estados y en la parte inferior encontramos un texto que dice "transición", hacemos clic en esta flecha y nos aparecen una serie de opciones, vamos a marcar la opción Desvanecer. El valor de demora lo vamos a dejar en 0 y la duración del efecto de transición la vamos a dejar en el valor por defecto, que es 1. En el área velocidad, nosotros tenemos varias opciones en este menú desplegable. Voy a dejar la opción por defecto, que es Suave. Vamos a mirar el resultado, vamos al área de previsualizar y observen como la transición hace que ese cambio sea mucho más suave. Vamos a aplicarle ese mismo efecto de transición al menú de navegación. Recuerden que el menú de navegación hace parte de la página maestra, así que vamos a la área de planeación, entramos al modo de diseño de la página maestra, seleccionamos el menú de navegación. No me aparece todavía ningún estado, porque debemos seleccionar al menos un elemento de los que hacen parte del menú de navegación. Hacemos clic en la opción de Desvanecer, vamos ahora a la página de inicio, vamos a Previsualizar y tenemos el mismo efecto de transición que hemos aplicado a este botón en los elementos que hacen parte del menú de navegación. Ahora vamos a tomar este botón lo vamos a duplicar en la parte inferior, estoy arrastrando mientras presiono a la vez la tecla Option o la tecla Alt si estamos trabajando en Windows. Observen como las guías inteligentes me están indicando que tengo una distancia de 23 pixeles, que es exactamente igual a la distancia que tenemos en la parte superior. Vamos a soltar en este lugar. Ya tenemos el duplicado del botón, pero no es visible porque tanto el texto como el contorno es blanco, entonces vamos hacer cambios: en el color de contorno vamos a aplicarle azul y al texto vamos a aplicarle color azul también. Vamos a hacer ahora un cambio en el rollover, entonces vamos a seleccionar el estado rollover. En el estado rollover, vamos a cambiar el texto a color blanco. Aquí tenemos color azul en el estado normal y color blanco. Vamos al área de previsualización y tenemos en el rollover el color azul y el texto de color blanco. Como este botón es un duplicado de este botón que tenía aplicada la transición, entonces también tiene la transición aplicada en los estados. Vamos al área de diseño, duplicamos ese botón y nuevamente lo duplicamos para el elemento o los elementos que se encuentran más hacia la parte derecha. De esta manera, ya hemos terminado de crear los elementos que hacen parte de la segunda sección de la página de inicio.

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.