Muse CC: Responsive webs

Conceptos fundamentales de los sitios web responsive

¡Prueba gratis durante 10 días

nuestros 1150 cursos !

Prueba gratis Mostrar modalidades de suscripción
En este video explicamos los conceptos fundamentales de los sitios web responsive, como puntos de rotura, entre otros. Esta característica es actualmente la base del diseño responsive en Adobe Muse CC.
05:40

Transcripción

Vamos a crear un nuevo sitio web, vamos a darle un tamaño de anchura de 1280, anchura fluida, y hago clic en el botón de OK. Vamos a ir ahora a la página maestra y en la parte superior vamos a encontrar una regla, esa regla me va a permitir ver los diferentes "breakpoints" que tenga mi sitio web. Por defecto, tenemos un solo "breakpoint", en este caso tenemos un "breakpoint" de 1280 pixeles de ancho. Si nosotros hacemos un doble clic en este ícono, me abre entonces la ventana de Propiedades del punto de rotura. Aquí estamos viendo que la anchura del punto de rotura o "breakpoint" es 1280 pixeles y la anchura mínima es de 320 pixeles ¿Qué quiere decir esto? Que como nuestro sitio web es un sitio web con anchura fluida, entonces el rango de fluidez va a estar entre 1280 pixeles y 320 pixeles. Por debajo de los 320 pixeles observen que el diseño como tal queda fijo. Cuando nosotros hemos cambiado el tamaño de la ventana del navegador y colocamos el puntero sobre la página, nos aparece un lápiz, este lápiz quiere decir que nosotros no podemos hacer ediciones en este momento y que lo que va a pasar si hacemos un clic es que volvemos al punto de rotura original, eso es equivalente a hacer clic sobre esta barra. Observen: hacemos un clic y volvemos al tamaño original de este punto de rotura. También podemos hacer lo mismo haciendo clic sobre la barra del "breakpoint" en particular. Ese tamaño mínimo lo podemos modificar: hacemos un doble clic sobre esta área y entonces definimos por ejemplo que la anchura mínima no sea 320 pixeles, sino que sea por ejemplo 600 pixeles. En ese caso, miren el rango de fluidez: la parte más clara corresponde al rango donde el tamaño es fluido y la parte más oscura corresponde al tamaño mínimo donde ya no va a haber modificaciones en el diseño aun cuando estemos cambiando el ancho de la ventana del navegador, es decir, desde este tamaño hacia abajo. Voy a hacer clic nuevamente en esta barra. Cuando nosotros queremos generar los diferentes "breakpoints", simplemente nos ubicamos de forma cercana al valor del "breakpoint" que necesitamos, por ejemplo 800 pixeles, hacemos un clic derecho y seleccionamos la opción de añadir un "breakpoint" o punto de rotura. Él nos va a preguntar el valor exacto, vamos a decirle por ejemplo que el valor exacto es 860 pixeles, y aquí tenemos nuestro segundo "breakpoint". En este caso, nosotros no tenemos contenido dentro la página, por lo tanto en el nuevo "breakpoint" tampoco va a haber contenido. Voy a deshacer este proceso con Comando + Z y vamos a generar un rectángulo. Como deshice la tarea que había hecho anteriormente, entonces solamente tengo un "breakpoint". Vamos entonces a generar el "breakpoint" de 800 pixeles, añadimos el punto de rotura, 800 pixeles, y aquí tenemos el punto de rotura o "breakpoint" de 1280 y el punto de rotura o "breakpoint" de 800 pixeles. En este caso, el rango de fluidez de este punto de rotura va de 1280 hasta 800. Si hago un doble clic sobre esta área, entonces me está diciendo: este "breakpoint" o punto de rotura tiene un tamaño máximo de 1280 y una anchura mínima de 801 pixeles, un pixel más que el punto de rotura o "breakpoint" que sigue, que en este caso es 800 pixeles. Y en el nuevo "breakpoint" nosotros tenemos el mismo elemento que tenemos en este "breakpoint" anterior. Y digo que es el mismo porque si hacemos cambios, por ejemplo como cambios de color, ese cambio se ve reflejado también en los siguientes "breakpoint" –recuerden, por que es el mismo elemento–. De hecho, si eliminamos este elemento también se elimina en este "breakpoint" o en los demás "breakpoints". Voy a deshacer la eliminación de ese elemento, debe entonces aparecer en los demás "breakpoint" o puntos de rotura. Si por algún motivo nosotros necesitamos que un elemento no aparezca en un "breakpoint" o punto rotura específico, entonces hacemos un clic derecho y seleccionamos la opción Ocultar el punto de rotura y esto oculta solamente en este punto de rotura o "breakpoint", por lo tanto, se sigue manteniendo visible dentro de los demás "breakpoints". Voy a deshacer esa tarea y ahora voy a hacer un clic derecho y voy a seleccionar la opción Ocultar en otros puntos de rotura. Eso hace un proceso opuesto: en este punto de rotura se mantiene la visibilidad de este elemento, mientras que en los demás puntos de rotura queda oculto. Es importante tener en cuenta que aunque este elemento se encuentra oculto, va a ser descargado por el navegador. Por ese motivo, no es viable una técnica de optimización basada en ocultar elementos en determinados "breakpoints", porque aunque esos elementos no se estén viendo, de todas maneras el navegador lo va a descargar.

Muse CC: Responsive webs

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.