N° 5 Junio 2018
Objetivo: Aplica media queriespara adaptar sitios web a diferentes dispositivos mediante la simulaciรณn de una pรกgina web responsiva en DCC.
DOCUMENTOS ADAPTABLES
4 UTILIZANDO MEDIA QUERIES
6 CREANDO CONTENIDOS CON CUADRÍCULA FLUIDA
8 MODIFCANDO CONTENIDOS DE LA RETÍCULA FLUIDA
10 RESOLUCIÓN PÁGNA WEB ADAPTADA A DIFERENTES DISPOSITIVOS
11
4
< Dreamweaver también está optimizado para el trabajo con media queries. Vamos a ver cómo trabajar con diferentes tamaños de pantalla. Osea, cómo crear contenidos y luego gestionar los CSS para que estos contenidos se adapten a diferentes tamaños de pantalla. De entrada desde el panel de Diseñador de CSS puedo seleccionar un archivo cual-
> quiera y debajo de él tengo la opción de añadir nuevos medios. De hecho ya hay uno por defecto que es el global, que engloba todos los selectores CSS que no están metidos dentro de ninguna media query, que se van a ejecutar hasta que se active una en concreto.
Pulsando sobre el botón 'Más', añadirá sobre la fuente que tengo seleccionada, una nueva media query. En mi caso, yo lo que quiero es definir cómo tiene que cambiar la pantalla cuando el ancho sea menor que un tamaño determinado, que un tamaño fijo.
5
Con eso voy a conseguir hacer que para todos los dispositivos más pequeños que ese tamaño, la página cambie y me recoloque los elementos para que se puedan ver mejor. Voy a pedir que para todas las pantallas, osea si yo estoy en una pantalla cuyo tamaño máximo sea 500, o dicho de otra manera, todas las pantallas que sean más pequeñas que 500 pixeles, van a ejecutar el código que yo meta dentro de esta media query. Y de hecho puedo hacer también que por ejemplo una segunda media query en la que tenga un tamaño mínimo de 501, osea justo
después de este 500. Incluso por ejemplo podría especificar también un tamaño máximo de por ejemplo 720 y con eso conseguiré también tener una media query que se active para los dispositivos pequeños, una media query que se active para los dispositivos un poco más grandes, y luego el resto del código para cuando estamos hablando de pantallas de ordenador, de pantallas un poco más grandes. Cuando yo pulso en la "Vista previa en tiempo real", aparece un código QR, permite que con cualquier dispositivo móvil, con una tablet o con un
teléfono móvil, yo puedo escanearlo, me abrirá el navegador, y se verá el resultado de lo que estoy haciendo en ese navegador. Y cualquier cambio que yo haga dentro del archivo, cuando guarde el documento en tiempo real, se ocupará también de actualizar la vista en ese navegador con lo cual no sólamente voy a poder hacer pruebas fácilmente dentro de la vista en vivo con diferentes tamaños, sino que también voy a poder ver cómo queda realmente en los distintos dispositivos que pueda conectar con este código QR.
6
Una media query consiste en un tipo de medio y al menos una consulta que limita las hojas de estilo utilizando características del medio como ancho, alto y color. Se entiende como un módulo CSS3 que permite adaptar la representación del contenido a características del dispositivo. Añadido en CSS3, las media queries dejan que la presentación del contenido se adapte a un rango específico de dispositivos de salida sin tener que cambiar el contenido en sí. Las Media queries consisten de un media type y una o mas expresiones, implicando características del medio, la cual se resuelve como verdadera o falsa.
El resultado de la consulta es verdadera si el tipo de medio especificado en el media query concuerda con el tipo de dispositivo que está siendo mostrado y todas las expresiones en el media query son verdaderas. Se pueden redactar queries utilizando operadores lógicos, incluyendo not, and, y only. Además se puede combinar múltiples queries en una lista separada por comas múltiples; si cualquiera de las queries en la lista es verdadera, la hoja de estilo asociada es aplicada. Esto es equivalente a una operación lógica "or".
7
Funciones Multimedia: La mayoría de las funciones multimedia pueden ser precedidas por "min-" o "max-" para expresar "greater or equal to" o "less than or equal to". Esto elimina la necesidad de usar los símbolos "<" y ">" los cuales podrían causar conflictos con HTML y XML. Si usted usa una función multimedia sin especificarle un valor, la expresión retornara verdadero si el valor es diferente de cero.
8
El diseño de un sitio web debe responder y adaptarse a las dimensiones del dispositivo en el que se muestra (diseño interactivo). El diseño de cuadrícula fluida proporciona un medio visual para crear diferentes diseños según el dispositivo en el que se muestre el sitio web. Por ejemplo, el sitio web se va a mostrar en equipos de sobremesa, tabletas y teléfonos móviles.
Puede utilizar diseños de cuadrícula fluida para especificar diseños para cada uno de estos dispositivos. Dependiendo de si el sitio se muestra en un equipo de sobremesa, una tableta o un teléfono móvil, se emplea el diseño correspondiente para mostrar el sitio web.
9
Crear un diseño de cuadrícula fluida: 1. Seleccione Archivo > Cuadrícula fluida (heredada). 2. El valor predeterminado para el número de columnas de la cuadrícula se muestra en el centro del tipo de medio. Para personalizar el número de columnas para un dispositivo, edite el valor según sea necesario. 3. Para establecer la anchura de una página en comparación con el tamaño de la pantalla, establezca el valor en porcentaje. 4. También puede cambiar la anchura del medianil. El medianil es el espacio entre dos columnas. 5. Especifique las opciones de CSS de la página. 6. Guarde el archivo. Al guardar el archivo HTML, se le preguntará si desea guardar los archivos dependientes, como boilerplate.css y respond.min.js, en una ubicación del equipo. Especifique una ubicación y haga clic en Copiar.
10
uede editar documentos de cuadrícula fluida directamente en la Vista en vivo: 1. Asocie ID y clases de HTML con los elementos. 2. Edite los atributos y el texto de una imagen. 3. Inserte nuevos elementos. Insertar elementos de cuadrícula fluida: 1. El panel Insertar (Ventana > Insertar) muestra los elementos que se pueden usar en un diseño de cuadrícula fluida. Al insertar elementos, puede optar por insertarlos como elementos fluidos.
2. En el cuadro de diálogo que aparece, haga clic en Antes, Después o Anidar para ubicar el elemento con respecto al elemento de referencia resaltado en el documento. 3. Seleccione una clase o introduzca un valor para el ID. El menú Clase muestra las clases del archivo CSS que especificó al crear la página. 4. Seleccione la casilla de verificación Insertar como elemento fluido. 5. Cuando seleccione un elemento insertado, se mostrarán las opciones para ocultar, duplicar o eliminar la etiqueta Div. En el caso de etiquetas Div situadas unas encima de otras, se muestra la opción para cambiar de Div.
11
¡Cada día está más claro! El PC está perdiendo el combate contra la cantidad de dispositivos con los que podemos acceder hoy en día a la red, hasta tal punto que la venta de tablets y smartphones han superado a las ventas de los ordenadores tanto de sobremesa como portátiles. Hasta hace algunos años era imprescindible utilizar el ordenador para navegar por internet; ahora en cambio, es muy probable que la mayoría de accesos se realicen desde plataformas mobile o móviles. Hoy en día todos llevamos un smartphone encima y nos comunicamos y buscamos información constantemente, por lo que se ha convertido en algo esencial optimizar los sitios web para un buen uso en estos tipos de dispositivos. El atributo min-device-width se refiere a la resolución de la pantalla del dispositivo a la hora de cargar la hoja de estilos definida.
12
Esto quiere decir que si reducimos el ancho del navegador, seguirá mostrándose de la misma manera, ya que la resolución de la pantalla seguirá siendo la misma y no se adaptara al nuevo ancho de la ventana del navegador (es decir, si la pantalla de nuestro móvil tiene 450 px y el navegador detecta que lo óptimo sería visualizarla con 600 px así lo hará si no usamos la meta-etiqueta Viewport). En caso de usar los atributos para la resolución de la pantalla, la etiqueta Viewport es necesaria.
El Viewport es el área visual donde se plasma el contenido del documento HTML de tu sitio web. Se podría traducir como vista o ventana y nos sirve para definir qué área de pantalla está disponible al renderizar un documento, la escala/zoom que debe mostrar inicialmente.
Conclusiones Gracias a las media queries es posible la adaptación de un sitio web a los distintos dispositivos que existen en la actualidad, permitiendo la visualización de una manera eficáz y correcta. Con la globalización es importante crear sitios web adaptables y con una buena resolución, para que el cibernauta pueda obtener la información que busca de manera rápida.
Bibliografía González, J. (2016). Media queries para diseños adaptables con Dreamweaver 2017. Recuperado el 07/06/2018 de https://www.video2brain.com/mx/tutorial/media-queries-para-disenos-adaptables-con-dre amweaver-2017 Blazquez, D. (2017). CSS media queries. Recuperado https://developer.mozilla.org/es/docs/CSS/Media_queries
el
07/06/2018
de
Adobe. (2017). Diseño interactivo mediante diseños de cuadrícula fluida. Recuperado el 07/06/2018 de https://helpx.adobe.com/es/dreamweaver/using/responsive-design-fluid-grid-layouts.html Guerras, A. (2016). Diseño responsive: ¿cómo configurarlo correctamente?. Recuperado el 08/06/2018 de https://aukera.es/blog/diseno-responsive/
Responsive Design MaferOchoa