Si tenéis la misma memoria que yo seguro que ya habéis hecho una buena colección de chuletas de los lenguajes que empleáis más a menudo.
Con el uso cada vez más extendido de jQuery como librería javascript ya me iba haciendo falta una para no tener que andar buscando por la documentación cada vez que me olvido de algo y por eso os traigo esta que he encontrado vía Nettuts y que han publicado en Color Charge
Además, de formato png para consultarla en el ordenador la tenéis disponible para consultarla online desde vuestro iPhone e iPod Touch
jQuery Cheatsheet: http://colorcharge.com/jquery/
Más de una vez he entrado en un sitio y me ha encantado alguno de los efectos javascript que tenía, hasta ahora solía irme a ver el código fuente para averiguar con qué librería javascript, si se usaba una, se habían conseguido.
Parece que no soy la única con curiosidad, pero puede que no la más vaga, ya que Oskar Krawczyk ha creado un cómodo bookmarklet con el que averiguarlo en un sólo click.
WTFramework Bookmarklet: http://blog.olicio.us/2008/11/08/wtframework-bookmarklet/
Vía Feed My App
Supongo que a estas alturas no hará falta que comience este post con una parrafada sobre lo malo que es el javascript cuando va entrelazado al código HTML de un sitio y la importancia de separar las diversas capas de una web.
Si estás dando el paso a un javascript más limpio y no obstructivo te vendrá bien el Obstructive Javascript Checker.
Distribuido como script para Greasemonkey, comando para Ubiquity o extensión para Firefox, se encargará de resaltar el javascript en línea y los enlaces javascript:. Sin duda bastante más cómodo que habilitar y deshabilitar el javascript o navegar entre el código fuente.
Obstructive Javascript Checker: http://www.robertnyman.com/obtrusive-javascript-checker/
Vía 456 Berea St
Si alguna vez tienes la necesidad de crear una tabla con horarios (como la programación de televisión, horarios de clases, de trenes…) echale un vistazo a este script.
Con él conseguirás horarios de aspecto agradable y que pueden navegarse cómodamente gracias a javascript.
El código generado es perfectamente válido y agregar nuevos eventos es un suspiro, además a cada evento puedes constar de texto o código HTML e incluso podrás agregar funciones a ese HTML.
Today’s Timetable: http://www.cod3.net/timetable/
Los acordeones son uno de esos recursos ya ubicuos en el desarrollo de interfaces web, al igual que los sistemas de pestañas, nos permiten introducir más información en menos espacio sin agobiar a nuestros visitantes.
La mayoría de sitios emplean acordeones asociados a librerías de Javascript como jQuery o Mootools y eso está muy bien cuando nuestro sitio va a emplear algunas de las funciones de estas librerías pero, si sólo queremos introducir un pequeño efecto puntual es como matar moscas a cañonazos.
Por eso me ha encantado este diminuto script de tan sólo 1.3KB que te permitirá disfrutar de unos preciosos acordeones animados sin necesidad de cargar tus webs de ficheros pesados.
Soporta múltiples instancias, usa listas de definición para el marcado y un sistema muy simple de hojas de estilo para la personalización.
Para inicializarlo sólo debemos introducir el siguiente código
var mySlider=new accordion.slider("mySlider");
mySlider.init("slider",0,"open");
Y el script se encargará de tratar con las listas de definición y agregar los eventos necesarios a los encabezados.
Funciona perfectamente en Firefox, Safari, Opera, Internet Explorer y Chrome.
A pesar de que a los feeds RSS les está costando convertirse en una tendencia de máxima adopción, los que si los usamos ya no podríamos vivir sin ellos. Casi todos los blogs y servicios web ofrecen suscripción a sus canales por este medio y no es extraño que queramos dar a nuestros lectores la posibilidad de suscribirse, no sólo a nuestro feed, si no por ejemplo a nuestro feed de Twitter o delicious ¿verdad?
Desde Komodo Media nos llega una forma sencilla y vistosa de ofrecer múltiples opciones de suscripción en un bonito widget gracias a jQuery.
Es compatible con todos los navegadores modernos, lo que deja excluído a Explorer 6.
jQuery Feed Menu: http://www.komodomedia.com/blog/2008/10/jquery-feed-menus/
Vía Webappers
Uno de los cambios que ha llevado a cabo AdSense en los últimos meses y que ha perjudicado bastante a los que trabajamos con él es la reducción del área clicable de los banners.
La mayoría de las veces se conseguían algunos clicks accidentales o no que no pinchaban directamente sobre el enlace.
La verdad es que la cosa funciona igual en cualquier web, a más grande sea el área a pinchar para acceder a otra zona más opciones hay de que los usuarios pinchen. No hay cosa peor que tener a nuestro “posible cliente” moviendo el ratón por media pantalla hasta encontrar el punto en que el cursor se convierte en manita y le avisa de que ha encontrado el enlace.
Big Target es un plugin para jQuery que te permitirá convertir tus bloques de contenido en “grandes enlaces”, por ejemplo cuando usamos un resumen para introducir los post y un link de “leer más” podríamos hacer que todo el bloque del resumen funcionase igual que el enlace y respondiese al click del usuario llevándole a la página en cuestión. Gran idea en espera que HTML5 nos permita convertir otros elementos, además de los a, en enlaces.
bigTarget.js: http://newism.com.au/blog/post/58/bigtarget-js-increasing-the-size-of-clickable-targets/
vía WebAppers
Siempre viene bien tener a mano una referencia donde consultar nuestras dudas, para todos los que ya habéis convertido al Firefox en la navaja suiza del desarrollo web os traigo hoy DevBoi.
DevBoi es un plugin que instalará una completa referencia de HTML, CSS, el DOM y Javascript en el sidebar de vuestro navegador.
Además de las referencias incluídas en la instalación estándard podréis ampliar su soporte a otros lenguajes como PHP o Ruby on Rails
Christian Effenberger es, sin duda, una referencia para todos los que estamos interesados en las transformaciones de imágenes en el navegador mediante Canvas.
Gracias a él, hasta los más torpes podemos disfrutar de efectos impresionantes con sólo incluir un archivo javascript en nuestros sitios y aplicar una clase (o varias para adaptar el efecto totalmente a nuestro estilo) a nuestras imágenes. Simple y realmente espectacular.
Esferas:
Con sphere.js
Fotogramas:
Con filmed.js
Diapositivas:
Con slided.js
En los navegadores antiguos degrada sin problemas.
Los efectos son gratuitos para sitios personales y no comerciales. Para otro tipo de sitios, incluidas las webs con banners, existen licencias comerciales que tendrás que hablar directamente con el creador.
Una de esas cosas que se suelen recomendar pero no siempre cumplir es informar a nuestros visitantes del tamaño de nuestros ficheros antes de que comiencen a descargarlos.
Sobre todo si nuestros sitios albergan muchas descargas puede hacerse algo tedioso ir agregando la información a mano. Por eso, Natalie Downe ha creado un cómodo script javascript que se encargará de todo por nosotros.
addSizes.js emplea el mini servicio json-head de Simon Willison para realizar los cálculos, por tu parte sólo tendrás que incorporar el script y colocar el enlace al fichero como sueles hacer. El script detectará que se trata de una descarga y obrará la magia colocando tras tus enlaces la información necesaria, por ejemplo, “tu enlace a un mp3 (mp3 4.5 MB)”.
addSizes.js: http://natbat.net/2008/Aug/27/addSizes/
vía Feed My App
Alojado en RedCoruna Hosting
¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información
Seguir @webmasterlibre
