Conoce sobre los selectores css

Vemos jerarquía HTML. Y jugamos un poco con los selectores CSS

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Breakpoints para diseño Responsive

Responsive Web Design son muchas cosas, esoptimización para tres elementos fundamentales, navegadores y sistemas operativos, velocidades y anchuras de pantalla. En este caso vamos a tratar sobre la optimización para pantallas, los tipos de pantallas y los saltos que el diseño debe pegar para ir adaptándose.

Observarás que un diseño adaptable es responsivo a los cambios de la ventana del navegador. A medida que la hacemos mayor o menor la plantilla de la página va cambiando para adaptarse mejor a las nuevas dimensiones. Al estirar la pantalla observarás que, de una única columna en definiciones pequeñas, pasa a ser de dos columnas en una anchura de pantalla mayor, luego pasa a tener tres columnas cuando amplias todavía más el espacio y así indefinidamente, tal como el diseñador haya definido.

A esos saltos en los que un diseño cambia de un layout a otro, a medida que va agrandándose la ventana del navegador les llamamos breakpoints y se producen gracias a las media queries. En este artículo hablaremos de los breakpoints y sobre cuáles son los puntos ideales en los que realizarlos.

Los breakpoints no deben orientarse a dispositivos

Este es el punto más importante del artículo, puesto que generalmente las personas con menos experiencia en Responsive Web Design tienden a asumir que existen unas medidas estándar en las que se deben aplicar los breakpoints. Podría haberlas conforme a las dimensiones de diversos dispositivos, como iPhone, iPad, ordenadores con pantallas estándar y luego hablaremos de ellas, pero la realidad o la recomendación va por otro lado.

Como vimos en los capítulos de introducción en el Manual de Responsive, uno de los motivos por los que existe esta filosofía de diseño es el de no crear versiones distintas para distintos tipos de sistemas. No creamos una versión para móviles, otra para tabletas y otra para ordenadores. Eso debe haber quedado claro. Pues de la misma manera, no creamos breakpoints orientados a dispositivos. El motivo es el mismo: es imposible que puedas generar tantos saltos como tipos de pantallas y sus resoluciones, etc.

Si te empeñases en crear breakpoints con las dimensiones de dispositivos en la cabeza, vas a tener que crear saltos para cientos de dispositivos. Cuando saquen un nuevo modelo o una nueva marca seguro que no quieres actualizar tus saltos para que la web se vea bien en ellos. Es imposible alcanzar a todos los dispositivos, todas las marcas y modelos. Es imposible que conozcas todas las dimensiones de pantalla, las existentes hoy y las que puedan existir mañana.

Cómo saber el lugar donde colocar un breakpoint

Si no haces breakpoints orientados a dispositivos, ¿cómo saber dónde colocarlos? La respuesta te la da tu diseño. En otras palabras, breakpoint debe estar orientado al diseño particular de tu web.

Para saber dónde colocar los saltos con las mediaqueries debes estirar la ventana del navegador, partiendo de la ventana con dimensiones reducidas (mobile first) vas estirando la anchura hasta que comienzas a apreciar que tu diseño está viéndose peor. No es que los usuarios se dediquen a cambiar las dimensiones de la ventana del navegador, es algo que hacemos los diseñadores, para imitar rápidamente distintos tamaños de pantalla de móviles o tablets.

Toma cualquier página web adaptable, como la de DesarrolloWeb.com, y ponla en dimensiones de anchura pequeñas. Entonces agranda la ventana y apreciarás que en determinado momento surge mucho espacio vacío o que las columnas comienzan a ser demasiado grandes. Entonces, en ese momento, poco antes o poco después, verás que "zas", cambia el layout.

Osea, vas haciendo la página más ancha y cuando tu diseño empieza a empeorar, o los espacios comienzan a estar peor distribuidos, entonces es el momento adecuado de colocar un breakpoint.

Breakpoints grandes y pequeños

La regla de oro es no limitarnos a nosotros mismos a un número de breakpoints determinado. No debes escatimar a la hora de hacer breakpoints. No los veas como puntos donde cambias de layout, orientado a móviles, tablets o monitores de ordenador de alta definición. Como hemos dicho, no es ese el objetivo, crear versiones del diseño, aunque mantengas un único HTML. A veces un breakpoint puede ser simplemente cambiar la alineación de un elemento, la medida de un texto en un titular, etc. Los puntos donde colocas media queries pueden ser para cualquier cosa que necesites. A veces es algo tan simple como una imagen, que a partir de determinadas dimensiones, quieres que flote (float) para que el texto alrededor la rodee. O un aumento minúsculo en la fuente de la página. No importa que tan pequeño es el cambio, si ves que beneficia al aspecto de tu página, es motivo para crear un nuevo "media queries".

Por tanto, hay tanto breakpoints grandes, que te cambiarán el layout de la página y por tanto afectan de manera más radical al diseño y otros pequeños puntos de ruptura intermedios, que realizarán pequeños ajustes para solucionar detalles que merezca la pena retocar. Por todo eso, volvemos a remarcar el punto anterior, es importante que los breakpoints los hagas en función de tu diseño, apreciando el momento adecuado para producirlos, agrandando y empequeñeciendo la ventana del navegador para decidir cómo y cuándo.

Medidas estándar para media queries

Hay diseñadores que, a pesar de todo lo dicho anteriormente, aún se preguntan si existen medidas estándar para una página, en los que crear sus breakpoints. No podemos darte esas medidas, entre otras cosas porque no pretendemos contradecirnos a nosotros mismos, al menos no en este artículo. Pero no desesperes porque realmente no las necesitas.

Volvemos a insistir, las veces que haga falta, que las mediaqueries no se deben definir para optimizar un diseño para iPad o iPhone, etc. sino que deben ser aquellas que produzcan una adaptabilidad mejor del diseño. Y eso solo lo consigues conociendo tu propio diseño y no conociendo los soportes desde donde lo van a acceder. Recuerda además que cualquier colección de dispositivos que puedas tener siempre va ser parcial, puesto que es imposible reunir todos los tamaños de pantalla y resoluciones en ningún documento. Básicamente además porque necesitaríamos estar actualizando esa lista casi diariamente.

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Aprende sobre las CSS Media Queries

Las Media Queries son, en una traducción rápida, consultas de las características del medio donde se está visualizando una web y nos sirven para definir estilos condicionales, que solo se aplicarán en caso que esa consulta del medio sea satisfactoria.

Son una de las herramientas fundamentales para implementar el "Responsive Web Design" y han llegado de la mano de las CSS3, convirtiéndose en un aliado fundamental de cualquier diseñador web.

En la mayoría de los casos las Media Queries sirven para definir estilos diferentes para distintos tamaños de la pantalla. Son sencillas de entender y aplicar, aunque el estándar es bastante sofisticado, con diversas posibilidades. Existen muchos usos, algunos no tan habituales en el mundo del diseño actual, pero que podrán tener su protagonismo en algún momento.

Nota: A modo de curiosidad, pues realmente no se usa mucho en el diseño actual, las media queries pueden decirnos si el dispositivo tiene una relación de pantalla 4:3 o 16/9, o una profundidad de color dada, por ejemplo. En este artículo nos encargaremos de conocer los casos más comunes de uso y más adelante nos adentraremos en estas otras características adicionales.

Paso al frente de las CSS

Las Media Queries representan una evolución importante de CSS, puesto que suponen la primera estructura condicional en el lenguaje. Sabemos que CSS no es un lenguaje de programación, ni tiene motivos para parecerse, pero existen muchas cosas que se implementan en los lenguajes de programación y que nos vendrían bien en el desarrollo con CSS, como es el caso de los condicionales.

"Si ocurre ésto, entonces haz tal cosa"

Una construcción condicional como esta es tan útil y básica que, aunque CSS no sea un lenguaje de programación, necesita incorporarlas. Ejemplos de casos en los que nos vendría bien un condicional:

- Si la pantalla del usuario tiene estas características, entonces aplica estos estilos 

- Si se imprime el documento en la impresora, aplica estos estilos. 

- Si la pantalla del dispositivo tiene estas dimensiones y además está situado en posición horizontal (landscape), entonces aplica este CSS.

Situaciones como esas son básicas y los diseñadores pueden resolverlas usando las Media Queries. Son un paso al frente en cuanto a la separación entre el contenido y su representación, puesto que nos facilitan que el contenido de una página pueda adaptarse al medio donde se está reproduciendo, sólo a través de la definición de estilos, sin tener que tocar el HTML para nada.

Alternativas para implementar Media Queries

Aunque la utilidad es novedosa, la sintaxis es parecida a lo que ya conocemos de las CSS, por lo que nos resultará bien sencilla.

Para producir Media Queries debemos tener siempre en mente la expresión condicional, aquella que debe cumplirse para que se apliquen ciertos estilos. Además la expresión condicional puede tener incluso varias condiciones, usando operadores lógicos como "and" para combinarlas. De modo que las circunstancias que se deban cumplir para aplicar unas reglas CSS sean de lo más variadas.

Alternativa 1: 

La primera alternativa de las Media Queries es a través del atributo media de la etiqueta LINK. Como sabemos, esa etiqueta es la que se usa para enlazar una hoja de estilo con un documento HTML. En ese enlace podemos especificar condicionales que deben cumplirse para que los estilos enlazados se apliquen. Por ejemplo, que se esté imprimiendo un documento o que la pantalla tenga cierta anchura mínima.

Recordamos, la etiqueta LINK tiene esta forma:

<link rel="stylesheet" href="estilos-generales.css">

Pues ahora simplemente le podemos agregar el atributo "media" indicando la condición que se debe cumplir para que estos estilos se apliquen:

<link rel="stylesheet" href="estilo-imprimir.css" media="print">

Este atributo media="print" quiere decir que los estilos deben aplicarse sólo cuando la página se están mostrando para la impresión.

Nota: Este uso ya lo vimos anteriormente en el artículo Estilos específicos para impresión.

<link rel="stylesheet" href="estilo-pantallas-grandes.css" media="(min-width:1200px)">

Este uso será seguramente más novedoso para ti. Quiere decir que esos estilos deben aplicarse sólo cuando la pantalla del usuario (En caso de ordenadores de escritorio, la ventana del navegador) tenga una anchura mínima de 1200 píxeles.

El problema de escribir tus Media Queries así es que tienes archivos de CSS separados. Es decir, aquellos estilos para impresión o para pantallas de 1200px están en archivos independientes, lo que es sencillo de administrar para nosotros, pero una mala práctica en términos de optimización de la web, puesto que se tienen que realizarse varias solicitudes al servidor distintas para traerse los CSS. En la práctica ralentiza la carga de la página en relación a hacer una única solicitud de un archivo CSS que contenga todo el código de los estilos.

Alternativa 2: 

Este método que vamos a ver ahora es más interesante y es el que se usa habitualmente a nivel profesional. Consiste en incorporar los estilos en una construcción @media donde se apliquen entre llaves todos los estilos que queremos para una consulta de medio dada.

@media (min-width: 500px) {
    h1{
        margin: 1%;
    }
    .estiloresponsive{
        float: right;
        padding-left: 15px; 
    }
}

Como puedes ver, tenemos la sentencia @media en la que podemos indicar entre paréntesis las condiciones que deben cumplirse para que se aplique esta media query. En este caso será para pantallas que tengan una anchura mínima de 500 píxeles.

Luego entre llaves colocamos todas las reglas y atributos de estilos CSS que necesitemos aplicar en esta situación. Las reglas de estilos son las mismas que pondrías fuera de la estructura condicional. Cuando la sentencia entre paréntesis se evalúe como verdadera, se aplicarán todas ellas.

Operadores lógicos para las Media Queries

Para combinar diversas condiciones podemos usar los operadores lógicos, de una manera similar a como se usan en lenguajes de programación. Los que tenemos disponibles son:

• Operador and: las dos condiciones deben cumplirse para que se evalúe como verdadera. 
  
• Operador not: es una negación de una condición. Cuando esa condición no se cumpla se aplicarán las media queries. 
  
• Operador only: se aplican las reglas solo en el caso que se cunpla cierta circunstancia. 
  
• Operador or: no existe como tal, pero puedes poner varias condiciones separadas por comas y cuando se cumpla cualquiera de ellas, se aplicarán los estilos de las media queries.

@media (max-width: 600px) and (orientation: landscape) {

    h1{

        color: red;

    }

}

Esta regla se aplicaría para pantallas con una anchura máxima de 600 píxeles y cuando la orientación está en horizontal.

Nota: Ten en cuenta que la mayoría de smartphones simulan tamaños de pantalla mayores, haciendo una especie de dimensiones virtuales que faciliten la lectura de webs que no están diseñadas para Responsive Web Design. Por ello, lo más seguro es que tengas que poner el "viewport" en el documento HTML a algo como: 

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Sin ese viewport tu móvil simularía que tiene unas dimensiones de unos 980 píxeles, cuando quizás la pantalla solo tenga una anchura real de 320 o 500 píxeles. 
Este asunto ya se explicó con detalle en el artículo sobre el viewport.

Para ver en funcionamiento la parte del orientation (landscape o portrait), tienes que usar un móvil o tablet y cambiar la posición de la pantalla, para que esté en horizontal o vertical.

Nota: Si tienes un ordenador que no reconozca el cambio de orientación la posición siempre será considerada será landscape.

@media tv and (min-width: 1200px){
    h1{
        margin: 10%;
    }
}

Esta regla aplicaría en dispositivos de tipo televisión y cuya resolución minima de anchura sea de 1200 píxeles.

@media (min-width: 600px),  handheld and (orientation: portrait) {
    h1{
        color: green;
    }
}

Este mediaquery servirá para pantallas de minimas dimensiones 600 píxel y también para todos aquellos dispositivos handheld que estén en posición vertical.

Nota: Handheld es un término inglés que sirve para especificar aquellos dispositivos que son de mano. Pequeños ordenadores que se llevan en la mano, como los palm o agendas electrónicas que aparecieron antes de popularizarse los smartphones o tablets. Por mis pruebas handheld no aplica a los móviles o tablets.

Las Media Queries tienen muchas más posibilidades que no cubrimos con este artículo. Las veremos más adelante, pero sin duda con lo que ahora sabes podrás resolver el 98% de las necesidades que te puedas encontrar en el mundo del diseño web.

Si te interesa saber más sobre este tema, en este otro artículo de DesarrolloWeb.com te contamos la estrategia para aplicar las Media Queries en Responsive Web Design.

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Flujo de desarrollo de un sitio responsive

En el Manual de Responsive hemos conocido muchas características deseables de los sitios de Internet de hoy en general y de los sitios adaptables en particular. Ahora vamos a comenzar con una aproximación al flujo de trabajo que se podría realizar para la creación de un "layout responsive". Claro que hay muchas técnicas que deberemos conocer para poder producirlos, ya en código, pero no nos vamos a meter todavía con explicaciones demasiado técnicas, sino a estudiar los posibles procesos de diseño.

Con el término "proceso de diseño" de momento nos referimos al procedimiento con el que se puede construir un sitio, desde su concepción hasta su ejecución. Aunque de momento nos quedaremos en las filosofías o estrategias posibles para solucionar los problemas de la web de hoy.

Problemática de la web de hoy

Ya hemos hablado de ella en artículos anteriores, por lo que no vamos a introducirnos de nuevo en las circunstancias de la web actual, solo cabe recordar que hoy al diseñar "páginas web" tenemos que conseguir que éstas sean medianamente inteligentes para poder adaptarse a cualquier tipo de situación.

Debe quedar claro que existen decenas, o cientos, de dispositivos que se conectan con un sitio web y que los desarrollos deben poder verse correctamente en todos ellos. Esa variedad de ordenadores y dispositivos tienen unas características muy distintas y además un número siempre creciente.

Pasos para diseñar un sitio responsive

Deben de existir decenas de aproximaciones o flujos de trabajo para desarrollar un sitio "responsive" que tengan en cuenta la problemática actual descrita anteriormente. Aquí ya depende de cada diseñador y de sus costumbres, preferencias o formación. Vamos a introducir a continuación aproximaciones genéricas que son comúnmente aceptadas y aplicadas a nivel profesional y más adelante en futuros artículos nos dedicaremos a describirlas en detalle y apreciar las ventajas e inconvenientes de cada una.

Nota: Suponemos que antes de comenzar se tiene claro el objetivo del sitio, se ha hecho un prototipo (wireframe), en papel o cualquier otra herramienta de prototipado y tanto el cliente como el desarrollador han llegado a un consenso sobre cómo debe ser la web y qué elementos debe contener. Este punto no es trivial y sobre él hablaremos más adelante, cuando expliquemos filosofías como "Mobile First", pero básicamente podemos adelantar que debemos ser bastante concisos con los contenidos que se deben mostrar, eliminando aquello que sea superfluo o innecesario. Explicaremos más adelante que un diseño responsive tenemos que comenzar por montar la web para que se vea bien en móviles y si cargamos excesivamente de contenido la página no nos va a caber todo en la pequeña pantalla de un dispositivo. Es una tendencia habitual que el cliente o el equipo de marketing quiera incorporar mucha información, pero hay que pensar que no siempre es necesario e incluso habrá ocasiones en la que demasiada información pueda ser contraproducente. Así que este proceso comienza por racionalizar el contenido que debe tener la web, algo que no vamos a tratar en este artículo.

Nota: Desarrollar con HTML distinto para lo cada tipo de sistema, móvil, tablet, ordenador de escritorio, etc., dijimos que no era la idea detrás de las técnicas responsive. Lógicamente estamos hablando de un mismo HTML para un sitio web.1) Crear un HTML con el contenido que deseamos mostrar

En cualquiera de los caminos debemos partir de un mismo HTML. Como sabes, el contenido se escribe con HTML y debe ser común para todos los tipos de dispositivos e incluso para los ordenadores con pantallas enormes. El lenguaje CSS es el que nos permite aplicar un formato adecuado para la presentación de ese contenido y allí es donde podremos aplicar nuestras reglas, que permitirán que el diseño se adapte a cada tipo de sistema donde deba ser consumido el contenido.

A ser posible, el HTML tiene que ser bastante semántico, algo que aporta elHTML5. Es algo deseable por diversos motivos como ya hemos hablado en decenas de artículos en DesarrolloWeb.com y programas en directo.

Como resultado de este punto debes tener un HTML sencillo, en el que habrás situado el contenido completo de tu sitio y aquellas interfaces para las funcionalidades necesarias. Me refiero principalmente a los bloques de contenido, puesto que lo más seguro es que hayas colocado textos falsos (los típicos lorem) e imágenes que posiblemente no tienen nada quever, con la intención de ocupar los espacios que vas a usar en tu diseño. Lo que tendrás también son las imágenes de cabecera o pie, como el logo de la empresa, iconos sociales, barras de navegación, etc. En resumen, todo lo que se ha acordado en el prototipo que deberías incluir en la página web a construir.

De momento, si tienes dudas sobre si un contenido debería estar o no en el diseño inicial, es mejor que no lo pongas. O si es un contenido que solo se va a ver en ordenadores de escritorio, tampoco lo pongas, puesto que nos vamos a centrar primero en encajar todo en las pantallas pequeñas.

2) Aplicar CSS

Hacer el HTML es la parte menos divertida. Con el CSS comenzará la fiesta y podrás empezar a disfrutar la mejor parte del diseño web. Como sabes, el CSS sirve para aplicar un formato a la página, tanto en lo que respecta a la posición de los elementos como al estilo o aspecto que deben tener. En este punto debes comenzar a aplicar los estilos necesarios a la página, poco a poco, para que comience a verse como tú querías.

A lo largo del Manual de Responsive de DesarrolloWeb.com iremos explicando cada una de las técnicas y herramientas que te ayudarán a construir un CSS optimizado que nos permita crear un layout adaptable. Existen mucha información que seguramente querrás saber, pero es imposible contarla toda en el mismo artículo. De momento vamos a describir las dificultades que encontrarás, pues no solo debes conocer a fondo el funcionamiento de las CSS sino también cómo los navegadores lo soportan, pues no todos entienden las mismas reglas de estilos.

Cada navegador entiende un conjunto de reglas de estilos y aquellas que no soporta, por desconocerlas, simplemente las ignora. Ahí es donde comienza la parte más compleja del diseño web y donde podremos aplicar principalmente dos flujos de trabajo diferentes. Pero antes de explicarlos queremos analizar los dos tipos de circunstancias en las que debemos encontrar soluciones.

A) Recursos de diseño estéticos

Son aquellos estilos que se agregan para mejorar la estética de un sitio, como fuentes tipográficas especiales, cajas con esquinas redondeadas, sombras en textos o cajas, etc. Este tipo de elementos no requieren una especial adaptabilidad. Son menos preocupantes, porque no van a afectar a la accesibilidad de un contenido. Son interesantes para que un sitio se vea especialmente bonito, pero si un navegador no puede renderizar ese tipo de estilos no representará un problema de gravedad. Por ejemplo, si Internet Explorer 8 no es capaz de mostrar un borde redondeado, no va a pasar absolutamente nada, puesto que los usuarios serán capaces de ver las cajas, aunque tengan esquinas con ángulos rectos.

Nota: Aquí unos y otros pueden tener opiniones o necesidades distintas. Quizás nuestro cliente quiere que la web se vea igual en un navegador de última generación y en un navegador anticuado como IE8. Quizás nuestro jefe lo exija, pero en nuestra opinión (y la de la mayoría de los diseñadores más importantes del momento) tenemos otras cosas más importantes en las que centrarnos. Hemos hablado en decenas de programas en directo en nuestro canal de Youtube sobre estas circunstancias y nuestro objetivo no es discutir una vez más sobre ello. Aunque, de manera objetiva, lo más importante de una web es el contenido y lo que deben exigirnos los jefes, clientes, y nosotros mismos, es que el contenido sea accesible desde cualquier sistema, no tanto que se vea igual. Si hay un navegador que no soporta sombras, por ejemplo, no se acaba el mundo. Al contrario, deberíamos ser conscientes de las diferencias de cada uno y aceptarlas.

B) Diseño de layout

Son aquellos estilos que se encargan de presentar la información con una estructura definida, por columnas, cabecera, pie, etc. El layout, al que nos referimos también como plantilla, nos permite jerarquizar la información y desplegarla de manera que el usuario la pueda entender mejor, pueda apreciar la importancia de cada cosa y centrarse en lo que nosotros preferimos que se aprecie más. Por ejemplo, si una web tiene una barra lateral donde hay banners y otras cosas con menor importancia (lo que conocemos como "aside") en todos los sistemas deberíamos poder remarcar la menor importancia de ese contenido. Si un navegador no es capaz de situar esa barra lateral en su lugar, por lo menos debemos centrarnos en que no aparezca antes que otras informaciones más importantes. O incluso más importante sería que, si un navegador no consigue respetar el diseño de layout, que por lo menos no aparezcan unos elementos encima de otros, dificultando la lectura del contenido.

En resumen y Como sabes, en el mundo de la web, a todos los niveles, lo importante es el contenido. Si la estética de una web no es igual en todos los navegadores podemos seguir viviendo tranquilos. Sin embargo, si hay diferencias de layout éstas pueden provocar que el contenido no sea accesible, o entendible, y eso sí representaría un problema mayor que deberíamos corregir.

Aproximaciones para resolver los problemas de compatibilidad del CSS

Hemos dicho que nos debemos preocupar más por los problemas de layout derivados de las diferencias de navegadores y su soporte con CSS, aunque estas técnicas también pueden ayudarte a encontrar vías de solución de problemas estéticos.

Ahora deberíamos introducir dos nuevos conceptos que son variaciones diferentes para resolver un mismo problema, las incompatibilidades en el CSS: Progressive Enhancement o Graceful Degradation. Sin embargo, son conceptos y técnicas lo suficientemente importantes para verlos de manera independiente, por lo que lo dejaremos para el próximo artículo. Aunque de momento cabe decir que estas técnicas no son algo específico de Responsive Web Design, sino que las aprendimos cuando estudiamos HTML5 en el diseño web.

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información