Si eres de los que usan las tablas para lo que realmente son, es decir, para mostrar datos tabulares y no para maquetación, este plugin te vendrá bien si tus tablas contienen muchas filas y corres el riesgo de perder los cabeceros de las columnas al hacer scroll.

Si usas Excel, sabrás que puedes fijar el contenido de las cabeceras para mantenerlas siempre visibles en la parte superior y así saber siempre qué columna estás viendo. Pues bien, este plugin hace lo mismo pero en una tabla de HTML.

Quien me conoce sabe que odio las tablas y la maquetación con ellas, pero hay que reconocer que cuando el contenido debe ir en forma de tabla, es absolutamente correcto utilizarlas y no simular su apariencia a base de divs o listas desordenadas.

ver más >

Un plugin interesa para mostrar una imagen destacada que, al pasar el ratón por encima, mueva esa imagen de tal manera que se vea el trozo oculto.

Además de eso, mostrará un pequeño caption que podemos indicar utilizando el title de nuestra imagen.

Vamos a intentar explicarnos, si tenemos una lista de productos con una pequeña foto miniatura, a menudo nos pasa que debemos cortar la foto porque algunas están tomadas en modo paisaje (apaisada) y otras en vertical y, buscar la forma de encajar ambos tipos de imágenes hace que uno de los métodos siempre pierda.

ver más >

A menudo te puede pasar de crear un DIV para poner únicamente una imagen (pensemos en una estructura header y 2 columnas) y no sabemos el alto que debe tener cada sección. Lo que tenemos claro es que no queremos que haya separación entre el header y las columnas.

Pues bien, lo que debería ser un simple trámite, de crear un div y meter la imagen dentro se complica por la aparición de un extraño espacio a mayores a base de margen o padding que sólo notarás si juntas las capas, ya sea con distintos fondos o (como en mi ejemplo, poniendo un borde y un fondo dorado).

Si ves el css más abajo o en la demo, verás que estoy usando un RESET brusco, para quitar todos los márgenes o paddings a los elementos, por lo que descarto los valores iniciales que tenga cada buscador en esta materia.

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 >

Breve explicación de como montar un menú multinivel con distintas animaciones con jQuery. Si buscas montar un menú multinivel (o multilevel in english) con 2 líneas de código... esta es tu solución.

Realmente es tan fácil de hacer que la web de su creador no tiene ni explicación más que 2 trozos de código de como implementarlo... así que no te quejarás de su facilidad de uso.

Su estructura está basada en listas desordenadas -más conocidas como UL- y para crear niveles inferiores, vas creando tantas listas como necesites. El plugin se ocupará de animar el menú e ir desplegando las opciones.

ver más >

Si lo que quieres es personalizar las barras de scroll de tu navegador o usar capas o elementos con scrollbars y que no sean las simples barras que incluyen los navegadores, Tiny Scrollbar es tu opción. Permite personalizar las barras de desplazamiento de los elementos de tu web con un script de tan solo 2.29 kb.

Tiny Scrollbar puede utilizarse para aplicar barras de desplazamiento a tu contenido. Fue construido usando la biblioteca jQuery. Es una herramienta dinámica, ligera que da a los diseñadores web una forma eficaz de mejorar una interfaz de usuario web.

Características:

ver más >

Cada elemento que utilizamos en nuestra hoja CSS tiene sus valores predeterminados, y, por ende, cada navegador los interpreta a su manera.

Antes de empezar un proyecto web, es muy útil resetear todos los elementos que vamos a utilizar mediante CSS y para ello, podemos usar 2 métodos.

1) Aplicando un reset a *: Esto significa, aplicar un reset para poner todos los valores a 0 a todos los elementos a la vez sin especificar (ver código 1)

ver más >

Descubro este nuevo plugin muy interesante para utilizar bordes redondeados en imágenes sin tener que preparar las imágenes con antelación.

Para navegadores modernos (entiéndase Firefox, Opera, Chrome, Safari, Explorer 9...) utiliza CSS3 y para Explorer 8 y anteriores, utiliza VML, por lo que el resultado está garantizado.

Su uso es muy fácil y entre sus principales características tenemos:

ver más >