Tutorial de Dreamweaver CC para hacer una web responsive

Hoy vamos a repasar algunas características que ofrece el software de Adobe para poder realizar un diseño responsive en, al menos, móviles, tabletas y escritorio, así como repasar cómo ocultar elementos de algunas vistas respecto a otras, ya que no siempre nos va a interesar mostrar todo el contenido en todas las plataformas por temas de espacio o incluso diseño. Este texto da por supuesto que tenéis conocimiento básico por la navegación del programa, por lo que no me voy a detener en todos los aspectos, centrándome únicamente en los que me interesan para comprender este pequeño tutorial. Así mismo, esto no es una guía, sólo un repaso breve, basándome en el vídeo que ofrece Adobe en su página web, junto a otras fuentes que he encontrado por la red. El objetivo es ofreceros un escrito en español de lo que otros han realizado en inglés. Vamos allá.

Repaso de diseño responsive con Dreamweaver CC

Antes de empezar debemos comprender que todo diseño no empieza directamente con los estilos. Inicialmente nos haremos un mapa conceptual sobre las distintas secciones que vamos a tener, o para hacerlo aún más simple, del aspecto de cada página. Por ahora nos centraremos con una página principal. Usaremos listas no ordenadas para poner en pantalla los elementos, ya sean imágenes, texto o enlaces. Esto lo haremos para que todo se liste en vertical, de arriba a abajo, uno por uno. El objetivo es que luego sea más sencillo hacer flotar dichos elementos y colocarlos por el espacio. De hecho esto es una práctica muy habitual: si vais a vuestro navegador, a cualquier página, y, con la ayuda del menú conceptual, ocultáis los estilos, veréis que todo se presenta en un listado no ordenado. Las viñetas (el icono que tiene aspecto de un punto negro justo al lado del elemento) las ocultamos con estilos, junto al resto de modificaciones, por lo que no debemos preocuparnos por esto.

Bien, una vez hemos listado todos los elementos, ya sea texto, imágenes, enlaces, etc, vamos a ir a la vista diseño de nuestro programa, o “live” si lo tenemos en inglés. Ahí veremos los cambios en tiempo real que se realizan en nuestra web, pero lo que más me interesa de esta interfaz son unos iconos que hay en la parte inferior derecha de la ventana, al lado de la resolución. Estos iconos tienen forma de smartphone, tablet y ordenador, o desktop. Gracias a estos iconos, nuestra vista diseño va a cambiar en función de lo que pinchemos, mostrando el resultado adaptado a la plataforma objetivo. Evidentemente esto no se basa en presionar un botón y quedarnos tan anchos, es nuestra tarea navegar por los tres modos y modificar el aspecto según nos interese. Aquí hay varios factores a tener en cuenta: mostrar un objeto, el espacio ocupado y la flotación. Revisando la teoría de diseño web, sabremos que podemos ocultar o mostrar un elemento gracias a la propiedad hidden, ocupar más o menos espacio con los píxeles y modificar la flotación con la propiedad float. Gracias a algunas opciones que nos otorga el software de Adobe esto es tan sencillo como activar o desactivar algunas opciones.

Empezando por la ocupación de espacio, únicamente necesitamos pinchar encima del elemento y podremos redimensionarlo con la mecánica “click and drag”, es decir, nos aparecerá una caja con la que podremos aumentar o reducir su espacio vertical u horizontal. Dreamweaver hace el resto y ajusta de manera automática el objeto dentro de los nuevos parámetros. Esto debemos hacerlo en cada vista, ya que si modificamos una estamos estableciendo esos valores para la plataforma seleccionada. Es nuestra tarea ir vista por vista y modificarlo para que la visualización sea la correcta. Por suerte, en algunos casos, los cambios en una vista nos sirven para el resto, como es el caso de la tableta en horizontal y el escritorio.

Continuando por la flotación, esto es interesante ya que cuando redimensionamos el objeto es muy probable que nos queden espacios sin contenido por los laterales. Para hacer una flotación y que se adapte al resto debemos seleccionar el objeto en cuestión y observaremos que nos aparece un cuadro con varios iconos en la parte inferior: un ojo tachado, una flecha, dos rectángulos superpuestos y una papelera. Para la flotación necesitamos pinchar en la flecha, la cual las activa. Si en cualquier momento deseamos revertir los cambios, con presionar de nuevo anulará la flotación. Al igual que con la redimensión, debemos ir vista por vista haciendo flotar el objeto según nuestras necesidades de diseño.

Finalmente, ocultar objetos. Esta característica la vamos a necesitar sobretodo para el teléfono móvil, o vistas en vertical en general. El motivo es que en este modo de visión deseamos optimizar al máximo el espacio, por lo que información secundaria como los créditos de la página o incluso las redes sociales podemos dejarlo a un lado, dando prioridad al contenido de la web. Debemos tener en cuenta una cosa por eso y es que ocultar contenido no implica que no se cargue en el navegador. Ese contenido sigue ahí en la web, únicamente que el navegador no lo muestra. En otras palabras, se siguen consumiendo recursos para ese componente, pese a que no lo veamos, es invisible, no inexistente. Bien, para ocultar un objeto simplemente debemos seleccionarlo y en el cuadro de opciones que hemos usado para las flotaciones simplemente debemos seleccionar el ojo. Esto oculta el objeto en cuestión. Es posible que en las otras vistas también permanezca oculto, algo que no debería pasar. Si esto ocurre, simplemente debemos refrescar la vista presionando en el icono que tiene dos flechas en forma circular, al lado de la ruta del fichero, en la parte superior central de la vista diseño. Una vez presionado ese botón, el objeto oculto debería aparecer. Por otro lado, si queremos revertir los cambios, regresamos a la vista donde se encuentra el objeto oculto, presionamos en pantalla con botón derecho y seleccionamos la opción “manage hidden content”, que en español sería así como “administrar contenido oculto”, y aparecerá dicho contenido con un fondo gris con cuadros. Ese fondo indica el espacio total que ocupa. Para mostrarlo de nuevo, lo seleccionamos y volvemos a pinchar en el ojo. Una vez hecho esto, el contenido volverá a mostrarse en pantalla, en la vista seleccionada.

Con todo esto ya tenemos material suficiente para, al menos, hacer distintas vistas adaptables a varias plataformas. Hacer un diseño responsive es tarea de prueba y error, de modo que no os rindáis e id probando.

Curso relacionado: Curso Superior de Programación con HTML5 y CSS