Frameworks Responsive Web Design (RWD)

El “Responsive Web Design” es algo que toda empresa comercial aspira tener. Día a día el número de dispositivos móviles  va incrementando (desde computadores “desktop”, portátiles, teléfonos, tabletas e incluso televisores) y la gente los utiliza para buscar recursos e información en la web.

Todos estos dispositivos tienen diferentes resoluciones de pantalla y por tanto el diseños también cambia, y si no se tiene las herramientas necesarias, el ajustar manualmente la configuración de sitio web para todos los dispositivos, puede volverse un cáos.  Y es así como los frameworks CSS para la creación de diseños web receptivo fueron creados.

A continuación se describen algunos frameworks CSS para “Responsive Web Design”. Algunos ya son bastante conocidos y otros que recién fueron creados en las necesidades de las nuevas tendencias de diseño web.

Less+ Framework
http://lessframework.com/

less

Este Framework permite a los diseñadores crear sitios “sensibles” con capacidad de adaptar su contenido en función de la resolución de la pantalla, utilizando jQuery.

Responsive Grid System
http://responsive.gs/

Responsive-Grid-System

Éste es un framework CSS de cuadricula fluida que permite el desarrollo rápido de sitios web. Está listo para ser utilizado en 12, 16 y 24 columnas. También ofrece reajuste clearfix y de forma opcional un archivo de “reset” .

1 Kb CSS Grid 
http://www.1kbgrid.com/

1kb

Esta es una solución fácil de implementar sistemas de grillas, “reset” de estilo, tipografía y estilos básicos de formulario y todo en 1Kb, algo realmente importante.

Boostrap
http://twitter.github.com/bootstrap/

bootstrap

Éste framework fue creado por Twitter para los desarrolladores Web, renderea los contenendores tanto en navegadores de escritorio, como así también en tablets y teléfonos inteligentes. Cuenta con 12-columna de la grilla principal, tambien posee varios plugin Javascript para aumentar su funcionalidad.

Titan Framework
http://titanthemes.com/titan-framework-a-css-framework-for-responsive-web-designs

Titan-Framework

Éste utiliza las mismas clases CSS como 960.gs, por lo que el cambio entre las dos es muy fácil. Esto lo destaca a Titan Framework del resto.

320 and Up
http://stuffandnonsense.co.uk/projects/320andup/

320andup

320 and Up contiene 5 CSS3 Media Querys incrementales. Está construido con LESS y Sass, CSS mixins.

Fundation
http://foundation.zurb.com/

fundation

Un rápido y flexible framework, destinado especialmente para front-end. Sitios web creados con este framework funcionará en casi cualquier dispositivo sin importar el tamaño de la resolución.

Gridiculous – A Fully Responsive Grid Boilerplate
http://gridiculo.us/

gridiculous

Este es un texto modelo de grillas con columnas variables (ancho máximo de 1200px, 960px, 640px, 320px ancho y también dispone de pantalla completa). Gracias a este framework, el desplazamineto de las columnas esta asegurado, por lo que las columnas anidadas y fotos y los vídeos permanecerá totalmente “sensible”, independientemente del tamaño de la pantalla.

Simple Grid
http://simplegrid.info/

simple_grid

Simplegrid es un sistema de grillas basada en “una clase por elemento” asi de simple. Este framework  libera de las barras de desplazamiento horizontales.

Anuncios

Cómo acelerar el renderizado CSS

Cuando codificamos CSS, uno de los objetivos es la eficiencia del renderizado en el  navegador.  Google siempre está en una constante búsqueda de hacer más rápida la web. Mozilla también tiene varias sugerencias sobre las mejores prácticas .

optimizando_codigo_css2

Técnicas para acelerar el renderizado CSS

Evitar el “redibujo” de las imágenes

Para evitar esto, siempre se debe especificar la anchura y la altura de todas las imágenes, esta técnica permite que el navegador muestre la página incluso antes de que se descarguen las imágenes, de lo contrario el navegador requerirá un “redibujo” y volver a renderear una vez que las imágenes se descargan. Se puede especificar la anchura y la altura de todas las imágenes, ya sea en el código HTML, a travez de la etiqueta  img , o en CSS.

Los selectores generales son menos eficientes, en cambio los ID son más eficientes

Estos son selectores de acuerdo con la velocidad de renderizado:

# Sidebar {}               / * ID (la más rápida) * /
.home #slider {}           / * ID * /
.footer {}                 / * Clase * /
ul li a.arrow {}           / * Clase * /
ul {}                      / * etiqueta * /
ul li a}                   / * etiqueta */
* {}                       / * General (el más lento) * /
#content [title = 'home' ] / * General * /

Por ejemplo, este selector no es muy eficaz:

# Sidebar > li

Los IDs son los más efectivos, uno puede llegar a pensar que el navegador encontrará el ID rápidamente y dentro de él a los “li” hijos, pero no va a acelerar la velocidad de renderizado, ya que los navegadores interpretan los selectores de derecha a izquierda.

El Principio de derecha a izquierda

Es muy importante entender cómo los navegadores leen o interpretan los selectores CSS. Leen CSS de derecha a izquierda, por ejemplo, para que el selector ol> li [title = “link”] lo primero que se interpreta es [title = “link”] (también se conoce como el “selector de llave”).
También es bueno saber que, en cuanto a la interpretación de derecha a izquierda, si un selector falla, éste dejara de ser interpretado y así se utiliza menos recursos de los necesarios para mantener la interpretación. Sin embargo, siempre se debe quitar los selectores no utilizados en el código.

hojas_de_estilo_css

Colocar las reglas CSS en archivos externos y enlazarlos desde la cabecera del documento principal

Siempre se debe colocar los archivos CSS de forma externa y crear el vinculo correspondiente desde la cabecera del documento principal. Queda “casi” terminantemente prohibido la especificación de estilo en linea y creación de estilos en bloques dentro del cuerpo de un documento HTML, ya que puede tomar mucho más tiempo para que el navegador muestre e interprete el documento.

Selectores Descendentes

Los selector CSS más difíciles de interpretar son los selectores descendentes. Es terriblemente difícil de interpretar, especialmente si se encuentra dentro de una etiqueta universal. Por ejemplo, este es un ejemplo muy malo de un selector descendente:
html body nav a span {}

Usar como ventaja el CSS en Cascada

A veces, se puede lograr un muy buen resultado sin utilizar selectores adicionales. Por ejemplo, consideremos el siguiente ejemplo:
nav li a {font-size:14px}
El tamaño de la fuente “font-size”, no es necesario declararlo específicamente para el tag “a”, es mucho más eficiente:
nav {font-size:14px}

ccs3

Selectores CSS3

Los selectores CSS3 (por ejemplo : first-child ) son increíbles para ayudar en los elementos de estilo, manteniendo el código limpio y semántico. La triste realidad, sobre estos selectores, es que no se los debe utilizar, en lo absoluto, si la mayor preocupación es el rendimiento de página.

Velocidad vs Practicidad

Para conseguir la representación más eficaz para una determinada página, simplemente se puede ir por un camino, dando a cada elemento de la página una identificación única y la aplicación de un estilo con selectores de ID único. Es extremadamente no-semántico y extremadamente difícil de mantener. Incluso los sitios basados ​​en el rendimiento NO sacrifican la capacidad de mantenimiento o semántica por un archivo CSS más eficiente.

Una buena práctica es volver a revisar los archivos CSS y buscar donde se lo puede mejorar, especialmente si el público objetivo utilizara dispositivos móviles, los cuales tienen una cierta (dis)capacidad de interpretación.

Todas estas recomendaciones, requieren una cierta inversión de tiempo, pero el coste es pequeño, especialmente en comparación con las ventajas que acarrea. Y una vez que estas practicas se ponen en marcha, continúan para mejorar el rendimiento durante la vida útil del proceso de desarrollo.

Nueva técnicas para text-indent

Existe una técnica muy conocida en el diseño web para ocultar el texto en la página, agregando una propiedad CSS a la indentacion “text-indent” el valor negativo -9999px. Esto mueve el texto hacia el lado izquierdo de la pagina sin generar la barra de desplazamiento inferior del navegador y ocultándolo de la mirada del visitante. Como desventaja, llega a ser perjudicial para el SEO ya que se está tratando de ocultar el contenido de los visitantes del sitio.

css

Ahora, veamos un ejemplo práctico. Dentro de un diseño Web, se necesita incluir el logotipo de la empresa en el título de la pagina, para ello utilizaríamos lo siguiente:

Text_indent_01

El problema con esto es que no se tiene las palabras clave del sitio Web en el título de la página, aunque, puede añadir un título a través del atributo alt, pero no tiene tanto peso, como lo sería, tener su título en una etiqueta h1 de la página.

Pero si se utiliza una etiqueta h1 no se puede agregar una imagen en el logotipo, la única manera de lograr esto es agregar la imagen como background de la etiqueta h1 y tener el texto dentro de la etiqueta h1. Esto nos lleva a otro problema, que ahora se tendrá tanto el logotipo y el texto en el título sitio Web.

Aquí es donde la técnica text-indent:-9999px entra en acción, si se agrega esta regla al archivo CSS, entonces se puede lograr tener el logotipo de su sitio Web y el texto dentro de la etiqueta h1.

Text_indent_02

Text_indent_03

Esta técnica funciona bien, pero la desventaja es que tiene un impacto en el rendimiento del navegador. Ademas cuando la resolución es muy grande, el texto fuera de la pantalla, llegaría a verse. Se pensaría que el  incremento del valor (a más de -9999) seria la solución, pero nada más falso, ya que eso nuevamente acarrearía el inconveniente del rendimiento del navegador.

Nueva técnica

Text_indent_04

Esto coloca el texto de la página, sin importar el tamaño ni la resolución de la página. Ademas se añade la propiedad nowrap por lo que el texto siempre seguirá fluyendo fuera de la página y nos aseguramos de que cualquier desborde del texto seguirá escondido.

Una de las ventajas (diferencias) de esta técnica, es que el rendimiento aumenta porque hay menos cosas para el navegador debe interpretar.

CSS3, box-shadow vs filter: drop-shadow

Ambas son propiedades de Css. Y pese a que la sintaxis es la misma, hay grandes diferencias en el resultado obtenido.

En un anterior articulo ya habíamos destacado las propiedades de box-shadow

Que no vaya a confundir el parecido en la sintaxis de ambas propiedades.  La gran ventaja del filtro drop-shadow es que recorre el contorno y la transparencia que tiene un elemento, una imagen con transparencia PNG, por ejemplo.

.drop-shadow {
-webkit-filter: drop-shadow(rgba(0,0,0,.5) 0px 0px 10px);
-moz-filter: drop-shadow(rgba(0,0,0,.5) 0px 0px 10px);
-ms-filter: drop-shadow(rgba(0,0,0,.5) 0px 0px 10px);
-o-filter: drop-shadow(rgba(0,0,0,.5) 0px 0px 10px);
filter: drop-shadow(rgba(0,0,0,.5) 0px 0px 10px);
}
.box-shadow {
box-shadow: rgba(0,0,0,.5) 0px 0px 10px 5px
}

Entre las diferencias encontramos:

  • En sintaxis, Drop-shadow no admite el valor “inside”
  • Drop-shadow supone una carga mayor para el navegador
  • El resultado del efecto aunque similar difiere notablemente con box-shadow la sombra se aplica a la caja del elemento. Sin embargo el filtro Css drop-shadow lo hace sobre el elemento generado y visible
  • El soporte de los navegadores: prácticamente total para box-shadow y según caniuse para drop-shadow sólo algunas versiones de webkit lo soportan (y con prefijo).

Sí bien, es una propiedad experimental, y sí, sólo es compatible con los navegadores WebKit por ahora. Pero de acuerdo con caniuse.com ya hay 32,51% de los usuarios de Internet que lo podrían interpretar. En general, es un tipo de decoración de mejora considerablemente la estética de la pagina. O incluso se la puede utilizar como un box-shadow normal en navegadores que no soportan este filtros todavía.

Box-shadow, una de las nuevas y mejores características de CSS3

La propiedad CSS box-shadow permite a los diseñadores implementar fácilmente sombras difuminadas (tanto exterior o interior) en casi cualquier elemento (principalmente de caja – div), especificando los valores para el color, el tamaño, desplazamiento entre otras características.

Sintaxis

box-shadow: [ color | offset-x | offset-y | blur-radius | spread-radius | inset ]

Ejemplo:

.shadow {
box-shadow: rgba(220,220,220,.65) 3px 3px 10px 5px inset;
}

Valores


1º Valor: color de la sombra
Se puede elegir expresarlo en cualquiera de las forma permitidas (hexadecimal o rgba).  En el ejemplo, la expresada en valor rgba (rgb+canal alpha de trasnparencia)
Y en caso de no declarar un valor del color, toma el de la propiedad color.
2º Valor: Desplazamiento horizontal de la sombra (offset)
Puede ser un valor positivo o negativo y estar expresado en cualquier unidad de longitud que permite css. Expresa el desplazamiento horizontal de la sombra creada. Un valor positivo: sombra a la derecha. Negativo: hacia la izquierda. La posición de la sombra es creada con relación a la posición del elemento al que se aplica.
3º Valor: Desplazamiento vertical:
Aplica lo mismo que en el anterior, pero en sentido vertical. Valor positivo hacia abajo, negativo hacia arriba.
4º Valor: radio de desenfoque
En inglés “Blur Radius”. Es opcional. El radio de desenfoque define la dureza o suavidad de la sombra. Cuanto menor sea el valor, más nítida la sombra. Un valor alto creará un desenfoque grande. Admite cualquier valor, pero los negativos son interpretados como Cero (0).
5º Valor: Distancia de propagación (opcional).
Otro valor de la longitud, puede ser positivo o negativo, y define hasta donde se propagará la sombra (más allá de lo definido por offset). Un valor negativo hará que la sombra sea más pequeña, más comprimida.
6º Valor: Inset/outset (opcional)
Dos posibles valores, siendo outset el valor por defecto. Esta propiedad marca hacia dónde se creará la sombra. Inset: se crea en el interior del elemento, outset por fuera de él. Se puede declarar al inicio o al final, si se intercala entre los demás valores se anula la declaración.

Compatibilidad con navegadores

Lo cierto es que las CSS 3 todavía están en fase de especificación, aunque ya se encuentran muy avanzadas y los navegadores más modernos ya han comenzado a implementarlas. No obstante, el W3C todavía no ha liberado las especificaciones de esta versión de CSS y hasta que empiece a recomendar su implementación los clientes web basados en Gecko y WebKit tienen soporte a esta funcionalidad de CSS3, pero a través de prefijos.
Para Opera podemos utilizar box-shadow en las versiones más moderas,  sin ningún inconveniente.

Atributo box-shadow para navegadores basados en motores de renderizado Gecko, como Firefox:  De manera temporal, Firefox es capaz de interpretar el atributo -moz-box-shadow, por ejemplo:

-moz-box-shadow: #090 1px 1px 0px;

Atributo box-shadow para navegadores basados en moteres de renderizado WebKit, como Safari o Google Chrome: En estos momentos y de manera temporal, navegadores como Chrome o Safari entienden el atributo: -webkit-box-shadow, por ejemplo:

-webkit-box-shadow: #fc8 3px 3px 1px;

Como podremos imaginar, si deseamos ampliar al máximo la compatibilidad con box-shadow, necesitaríamos indicar tanto el propio atributo box-shadow, así como -moz-box-shadow y -webkit-box-shadow para que funcione en las versiones actuales de Firefox, Safari, Chrome, etc.

En el caso de Internet Explorer, de manera nativa solo es interpretado a partir de la versión 9 en adelante. Si se quiere hacer efectos de sombra en versiones inferiores del IE, se puede hacer uso de filtros específicos de Microsoft (Shadow Filter), pero no es la mejor ni la más recomendada práctica.

Ejemplo:

.shadow {
box-shadow: #111 3px 3px 4px ;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Color='#111111', Strength=4, Direction=135)";
/* IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Color='#111111', Strength=4, Direction=135);
}

Generadores online

Estos son solamente algunos:

http://css3gen.com/box-shadow/
http://westciv.com/tools/boxshadows/index.html

Referencia oficial W3C

http://www.w3.org/TR/css3-background/#the-box-shadow