Muse CC para diseño web responsivo

Sitios web flexibles: qué son y para qué se usan

¡Prueba gratis durante 10 días

nuestros 1203 cursos !

Prueba gratis Mostrar modalidades de suscripción
En este video explicamos los conceptos fundamentales de los sitios web con anchura flexible (esta es la opción actual por defecto) y la forma en cómo estos sitios afectan los elementos que se crean o importan.
07:25

Transcripción

Vamos a hablar de unos conceptos básicos de "responsive web design" en Adobe Muse. Voy a crear un nuevo sitio y lo primero que nosotros encontramos en esta ventana de Nuevo sitio es que, en este menú desplegable, nosotros podemos seleccionar entre un sitio de anchura fluida y un sitio de anchura fija. Los sitios web "responsive" no necesariamente tienen que tener la opción de anchura fluida, aunque sí es recomendable. Pero si ustedes deciden, podrían tener un sitio web "responsive" con anchura fija. Cuando nosotros creamos sitios web con anchura fluida, la mayoría de los elementos que nosotros creamos o importamos dentro de Muse también van a tener tamaños fluidos. En este caso, vamos a hacer un sitio web a 1280 pixeles y vamos a dejar activa la opción de anchura fluida, hago clic en OK. Vamos a ir a la página de inicio, por ejemplo, vamos a tomar la herramienta rectángulo y vamos a dibujar un rectángulo. Ahora vamos al panel Transformar y en la parte inferior del panel transformar hay una opción que se llama Cambiar tamaño, si hago clic en este menú desplegable tenemos varias opciones: la opción Ninguno quiere decir que este elemento va a tener un tamaño fijo aun cuando el tamaño de la página web sea flexible. La opción de Anchura adaptable quiere decir que solamente va a variar el tamaño al ancho. La tercera opción, Anchura y altura adaptables, quiere decir que de forma proporcional va a modificar tanto el ancho y el alto. Esas modificaciones van a depender de la modificación de la ventana del navegador, es decir, de lo flexible que sea la ventana del navegador. Me explico: voy a seleccionar la opción Ninguno y cuando tenemos sitios web con tamaño flexible, nos aparece esta barra en la parte derecha, voy a hacer un clic en esta barra, voy a arrastrar y observen que este elemento no responde de ninguna manera a este cambio del ancho de la ventana del navegador. Voy a hacer clic en esta parte superior de la barra, para dejar el tamaño original, que es 1280, vamos a escalar un poco más este elemento y ahora vamos a seleccionar la opción de Anchura adaptable. Observen lo que ocurre cuando cambio el ancho de la ventana del navegador, el ancho de este elemento también se modifica. Vamos ahora a seleccionar la tercera opción Anchura y altura adaptables, y observen que de forma proporcional se modifica tanto el ancho como el alto de este elemento, en el momento en el cual yo cambio el ancho de la ventana del navegador. Técnicamente, este cambio que estoy haciendo se denomina un cambio en el tamaño del "viewport", pero básicamente corresponde a cuando estamos en el navegador y cambiamos el tamaño de la ventana del navegador al ancho. Finalmente, tenemos una opción que se llama Ajustar anchura del navegador, que se utiliza cuando necesitamos elementos que cubran todo el ancho del navegador. Por ejemplo, un fondo en la parte superior de la página, es decir, en el encabezado o en el pie de la página. Entonces, cuando seleccionamos esta opción para cualquier elemento, ese elemento siempre va a cubrir todo el ancho de la ventana del navegador, sin importar si ampliamos muchísimo esa ventana o si por el contrario reducimos a un tamaño muy pequeño. Voy a deshacer este cambio. Voy ahora a importar una imagen, la imagen que voy a importar se llama 'leyva'. Y por defecto, las imágenes cuando están siendo utilizadas en un diseño que tiene anchura fluida, entonces va a tener activa la tercera opción Anchura y altura adaptables. Eso, por supuesto, es para mantener la proporción de la imagen. Entonces veréis lo que ocurre cuando cambio el ancho de la ventana del navegador: la imagen se escala de forma proporcional. De todas maneras, si por algún motivo yo necesito que esa imagen no se escale, entonces selecciono la opción Ninguno y aunque cambie el tamaño de la ventana del navegador, el tamaño de la imagen no se modifica, porque lo hemos indicado con esta opción. Algunos "widgets" tienen la capacidad de adaptarse y otros "widget", por el contrario, no. Vamos a ir por ejemplo al panel Biblioteca de widgets y vamos a cargar por ejemplo en la categoría Composiciones un "widget" que se llama 'En blanco'. Al seleccionar este "widget" y abrir el panel Transformar, nos damos cuenta que en la opción Cambiar tamaño no podemos elegir ninguna de las opciones que teníamos disponibles anteriormente. Voy a cambiar el tamaño de la ventana del navegador y observen como este "widget" no responde a ese cambio. Voy a eliminar este "widget" y voy a cargar un "widget" por ejemplo de menús En este momento, como tenemos una sola página, entonces solamente hay un elemento del menú. Sin embargo, solamente quiero verificar las opciones disponibles en Cambiar tamaño. Observen, la anchura de este "widget" es adaptable. No podemos hacer el cambio de forma proporcional, pero sí podemos hacer que este "widget" ajuste su ancho respondiendo al cambio de la ventana del navegador. Observen, de igual manera nosotros podríamos seleccionarlo y decirle que no tenga ningún tipo de cambio de tamaño. Si nosotros creamos un sitio web que tenga una anchura fija, entonces, dado que el diseño en general no va a ser modificado aun cuando yo cambie el ancho de la ventana del navegador, los elementos que yo cree tampoco van a ser modificados. Por ejemplo, voy a crear un rectángulo nuevamente, voy a seleccionarlo y, por defecto, observen que no hay modificación en el tamaño de este elemento. Vamos a importar una imagen, por ejemplo 'arequipa', y observen que, por defecto, estos elementos tienen seleccionada la opción Ninguno, es decir, que por defecto no van a tener cambios en su tamaño aun cuando cambiemos el tamaño de la ventana del navegador. Recuerden, entonces: cuando creamos sitios web con tamaños de anchura flexible, por defecto la mayoría de los elementos que creamos o que importamos también van a tener un tamaño flexible, pero si creamos sitios web con tamaños fijos, los elementos que nosotros importemos o creemos por defecto no van a tener tampoco ningún tipo de cambio en el tamaño.

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.