save ass

Un buen webmaster siempre debe comprobar que su página web sea compatible con los navegadores más usados. Sin embargo, dependiendo del sistema operativo que utilice, pueden presentarse algunas dificultades con algunos navegadores.

Existen sitios web que realizan capturas de pantalla de nuestra página web en diferentes navegadores. Esto nos evita tener que instalar varios navegadores en nuestra PC. Sin embargo, el inconveniente es que no podremos probar las modificaciones que hagamos en tiempo real. Será necesario esperar hasta que nuestra solicitud sea aceptada.

Browsershot (todos los SO + todos los navegadores)
Browsercam (de prueba – todos los SO + múltiples navegadores)
IEcapture (IE7)
Icapture (Mac + Safari)
Scapture (Linux + Firefox, Konqueror, Opera, Dillo + Lynx)
(fuente:kioskea)

El tema de crear CSS hoy en día se ha vuelto un dolor de cabezas para muchos desarrolladores web, en un principio era sencillo, diseños básicos, casi todo el mundo usaba IE y sólo cuatro se atrevían con navegadores alternativos. Hoy en día las cosas ha cambiando, los diseños son cada día más atractivos y por ende necesitan un desarrollo mas acabado, donde debemos rompernos la cabeza para que nuestros CSS funcionen en todos los navegadores, como también a crecido nuestro conocimiento en estándares (W3C) (maldito IE).

A continuación les dejo dos datos que considero no son comunes y que nos pueden ayudar a terminar un desarrollo mucho más rápido y de calidad.

HACK’s

1.- Creamos un CSS adaptado a Internet Explorer, luego repetimos la regla (lo que sea común no es necesario, únicamente que cambie -tradicionalmente padding, margin, width o height-) anteponiéndole “html>body”.
Afortunadamente a este último IE no lo interpretará mientras que el resto de navegadores sí.
Ejemplo práctico, para entenderlo mejor:

Hacer que Internet Explorer siga estandares

2.- El desarrollador Dean Edwards pone a disposición de todos, bajo licencia GNU LGPL, la librería JavaScript IE7, para hacer que Internet Explorer (Navegadores Microsoft IE) se comporten como un navegador que sigue los estándares. Además hace que los PNG transparentes funcionen correctamente en las versiones 5 y 6 del navegador y soluciona diversos problemas relacionados a la interpretación del CSS. (Fuente:maestrosdelweb)

Para utilizar esta librería debemos descargarla de Google Code. Ejemplo de como implementar:

Spritely es un plugin jQuery para crear un carácter dinámico y de animación para un fondo en HTML puro y JavaScript. Es un plugin liviano que permite crear fácilmente sprites animados y fondos de desplazamiento. Se trata de un plugin que funciona en todos los navegadores importantes incluido el de iPhone e Internet Explorer 6.

Spritely proporciona dos métodos fundamentales, sprite() y pan() ambos para animar la imagen de fondo con las propiedades CSS. La diferencia entre los dos es que una imagen “sprite” contiene dos o más “marcos” de animación, mientras que un ‘pan’ de imagen contiene una imagen continua, que fluye hacia la izquierda o la derecha y luego se repite.

Desarrollado por Artlogic Media; Spritely esta bajo licencia MIT o GPL versión 2.

FindIcons es un motor de búsqueda de iconos con una base de datos 300.000 iconos gratuitos y un total de 2.000 pack de iconos. Es alimentado por una sofisticada herramienta de búsqueda de filtrado y el resultado sistema de concordancia, lo que le permite encontrar fácilmente lo que necesita.

Todos los paquetes de icono en el sitio son libres de utilizar, al menos para uso personal. Algunos paquetes de iconos no están permitidos para uso comercial, mientras que algunos propietarios exigen un enlace a su página web.

Otro menú con animación de jQuery bastante simple pero elegante.

A continuación mostrare los pasos a seguir para construir este llamativo menú (continuar leyendo…)

Luego del terremoto sufrido en Chile y las vacaciones volvemos a retomar el ritmo con nuevos aportes.

Fuerza Chile!!

CSS3 viene con nuevas características y funciones que nos facilitaran de la vida de una manera notable. Aquí mostrare como crear un recuadro de texto con propiedades de CSS3. Esta propiedad solo funciona en Opera, Firefox, Chrome y Safari (para variar Explorer marcando diferencia). (continuar leyendo…)

Aquí les traigo otra gracias mas de jQuery. Esta vez se trata de pestañas dinámicas, las cuales se pueden abrir y cerrar a gusto.

(continuar leyendo…)

Otra gracia de jQuery, con esta libreria escrita por Dave Methvin. podremos redondear las esquinas con diferentes diseños y de manera muy simple. (continuar leyendo…)

Un efecto de cortinas desarrollado con la libreria javascript jQuery para animar un poco tu pagina web. Con un simple click puedes abrir o cerrar las cortinas. (DEMO).

Explicaremos paso a paso como generar este efecto. (continuar leyendo…)

Otra excelente librería de jQuery donde podemos generar un slideshow adaptado al tamaño del navegador (demo) con varias opciones como las siguientes:

(continuar leyendo…)