Escuela Superior Politcnica del Litoral Escuela de Diseo y Comunicacin

Lic. Diseo Web y Aplicaciones Multimedia Tema: Diseo de Cuadrcula Lquida (Fluida) en DreamWeaver

Lcdo. Yamil Lambert Sarango Cristina Ramrez Hidalgo 2013-2014

Diseo de Cuadricula Fluida o Lquida en DreamWeaver CS6

Esta es una nueva herramienta incluida en la versin CS6 de Adobe DW., y tambin disponible en la ultima, Adobe CC (Creative Cloud). Con esta opcion, optimizamos tiempo y recursos para la creacion de paginas web, cuya finalidad no sera solo para ser vista en una computadora de escritorio, sino tambien podra ser visitada desde multiples dispositivos moviles, como tabletas o smartphones. Solo basta con seleccionar la opcion "Diseo de Cuadrilla Fluida (Fluid Grid Layaout)", y modificar las opciones que nos presenta: 480 px: Es el tamao de la pantalla, en la cual se proceder a disear. 5: Es el numero de columnas que van a caber, en la pantalla del smartphone. 25%: Corresponde al ancho de cada columna. 91%: Representa la suma del ancho de todas las columnas, de la cual depender la distribucin en la pantalla. Estas dos ltimas opciones, son modificables, en la ultima, se es recomentable utilizar el 100% para aprovechar todo el espacio de trabajo. En tabletas, el tamao predeterminado es de 768 px, con 8 columnas, pero en este no se especifica el grosor de las columnas, simplemente las distribuye tanto en espaciado como en ancho, segn el porentaje asignado al espacio de trabajo, en este caso es un 93%. Para las pc, le asigna un tamao de 1232 px. y 10 columnas, al igual que en la configuracion para tabletas, no muestra el grosor de las columnas, solamente es configurable el numero de columnas que van a ser presentadas, por default son 10, y asi mismo seran distribuidas a lo ancho de la pantalla dependiendo del porcentaje asignado al lienzo, en este caso es un 93%.

Con estas dimensiones prepuestas por DreamWeaver, se propone insertar el concepto de Diseo Web Adaptable. Adems que tambin nos da la opcin de vincular hojas de estilos (CSS) previamente diseadas. Si no se cuenta con un estilo creado, el programa, al momento de crear nuestra pagina, nos pedir guardar las configuraciones que hemos hecho, y las guardar como una nueva hoja de estilo. En la parte inferior derecha de nuestro workspaces, por encima de la ventana de propiedades, se encuentran las diferentes vistas propuestas, o sea, para mobiles, tablets, y pcs; con sus dimensiones correspondientes:

Al momento de guardar nuestro archivo html (el que contendr nuestro diseo de la pgina), es necesario almacenar en la misma carpeta los siguientes archivos dependientes:

Boilerplates.css Hoja de estilo basada en Boilerplates en html5, que asegura el vinculo de las diferentes vistas nuestro archivo, en los diversos dispositivos anteriormente mencionados. Respond.min.js Es una biblioteca de JavaScript que provee la compatibiliada de los medios en las versiones anteriores de los navegadores.

Y bueno, aqu aparece Fluido.css, este es la hoja de estilos que se crea por defecto al inicio, (en mi caso, se llama fluido, ya depende del nombre que se le quiera poner), esta guarda la informacion de cada una de las vistas. Por defecto, se crea una etiqueta div, que podria ser llamado como nuestro contenedor principal, del cual se continuar con lo dems. Aunque solo se disee, ingrese y/u organice la informacin y componentes, en una sola vista, esta ser replicada en todas. Es recomendable empezar a maquetar en la vista para celulares, para tener mayor control del espacio de trabajo. A pesar de que al insertar elementos, estos se repiten en todas las vistas, las propiedades de los mismos podrn variar a conveniencia nuestra, esto tambin va ligado al concepto de Responsive Design. Y ya solo con testearlo, en el navegador de nuestra eleccion, y cambiarle la proporcionalidad, para simular los diferentes dispositivos, se notar la diferencia entre cada una. En el siguiente ejemplo, he aadido a mi diseo, 5 etiquetas de tipo div de Diseo de cuadrcula fluida ms, imgenes, y texto. Tanto el tamao del texto, como el de las imgenes, son autoajustables dependiendo del dispositovo en el que son vistas.

Ejemplo: Vista Diseo Vista para smartphones Vista para tabletas

Vista para Pcs

Vista Final (navegador Google Chrome) Vista para smartphones Vista para tabletas

Vista para Pcs