Siempre queremos poner un slider en nuestras webs y nos esforzamos en buscar el más cool (o guay en versión spanish), con miles de efectos, que abarque miles de formatos en su contenido y que sea adaptativo (responsive in english)... para luego, no hacer nuestras webs adaptativas, poner sólo imágenes y usar siempre el efecto FADE... verdad?

Pues bien, buscando algo bueno bonito y barato, dí con este slider, realmente muy simple pero excesivamente potente y fácil de configurar o personalizar. Está basado en jQuery, como no, y su CSS tiene 13 líneas! (acabo de dejar de alucinar)... pero vamos a verlo a fondo.

Responsive
El slider es responsive, es decir, se adaptará él solito al ancho de tu ventana del navegador, esto te ahorrará escribir medidas distintas en tus media queries y ahorrarás líneas de código.

ver más >

Motivado por la aparición de Responsivator, me he decidido a liberar un clon que testea tus diseños web maquetados de manera adaptativa o, como todos lo conocemos, en Responsive Web Design.

El script es muy sencillo, se ocupa mediante una llamada en Ajax de cargar diferentes estados de la url introducida en el área indicada abajo, que no deja de ser un iframe para cada tamaño.

Este iframe, mostrará la versión adaptativa que se corresponda con su viewport, por lo que puedes ver todos los estados a la vez sin necesidad de tener todos los dispositivos adecuados.

ver más >

Adapt.js es un archivo JavaScript muy livianito (848 bytes minified) que determina qué archivo CSS debe cargarse antes de que el navegador renderice o muestre tu página. Si el navegador se inclina o se cambia el tamaño, Adapt.js simplemente comprueba su ancho, y sirve sólo el CSS que se necesita, cuando se necesita.

Un posible inconveniente de Adapt.js es la posibilidad de ver un breve destello de contenido sin estilo mientras se cambia de fichero CSS (piensa en ello como "Ajax" para CSS) aunque nos avisan desde su web que se hizo todo lo posible por evitar el destello creando hojas CSS de 3kb de peso.

La principal ventaja que le veo es la limpieza de los archivos CSS, ya que teniendo uno básico con las cosas que no varían entre versiones (colores de texto, de enlaces, fuentes, etc...) y sólo en los CSS específicos los estilos que se aplican únicamente al tamaño de pantalla indicado, hará que nuestros ficheros CSS pesen menos, a diferencia de lo que pasa cuando utilizas todas las Media Queries en un único fichero CSS.

ver más >

Para entender el concepto de Media Query, nada mejor que la definición oficial del W3C que dice: "Una media query consiste en un tipo de dispositivo (media) y cero o más expresiones que comprueban  el estado de las características particulares de ese dispositivo. Entre las características que pueden utilizarse en una media query están las propiedades  "ancho", "alto" y "color". Mediante el uso de media queries, la presentación del contenido puede adaptarse a un rango específico de dispositivos de salida sin necesidad de modificar el propio contenido".

Traduciéndolo al idioma ´martiniano´, una Media Query es una serie de condiciones que pueden aplicarse a nuestras hojas de estilo CSS para que, según el tamaño y resolución del dispositivo, adopte una u otra forma.

Si ya teníamos poco con adaptar las webs para todos los navegadores y Explorer y sus propios estándares, ahora tenemos el reto de hacer que nuestras webs se adapten a nuestro teléfono, tablet, netbook, televisión, reloj Casio de caucho y cuando dispositivo tengamos por ahí que se conecte a Internet.

ver más >

En esto del desarrollo web como en la vida, siempre toca evolucionar. Y evolucionar, en términos de informática, quiere decir incorporar nuevas prácticas, nuevos conocimientos y técnicas para optimizar el flujo de trabajo, consiguiendo un producto final de mejor calidad en el menor tiempo posible.

Esta vez, le ha tocado el turno al Responsive Web Design, o diseño web responsivo... o, en cristiano, el diseño web que se adapta a todos los dispositivos, según tamaño de pantalla u orientación, sin tener distintas versiones de tu web... Qué quiere decir ésto? Que partiendo de la base de un sólo código, es decir una única página web, mediante algunos .JS y muchas líneas de CSS, obtendrás la versión adecuada para el tamaño de la pantalla de tu visitante.

Qué ganamos con ésto...
Pues que tu página web se vea correctamente, al tamaño adecuado, sin hacer zoom, sin tener desplazamiento horizontal y sin fastidiar al usuario, dándole los contenidos que viene a ver en un tamaño acorde al aparatito que está usando.

ver más >