|

170 cheat sheets para desarrolladores web

ByLuis

Ya hace tiempo hablamos de un directorio donde podíamos encontrar 30 cheat sheets, en este caso se trata de 170, que nos ayudarán en nuestro desarrollo web.
Aunque no todas son de desarrollo web, si la mayoría. Organizada por categorías, podemos encontrar ‘chuletas’ sobre: ActionScript, Ajax, Apache, ASCII, ASP, C#, CSS, CVS, Firefox, Google, HTML, Java, Javascript, LaTeX, microformatos, MySQL, Oracle, Perl, Photoshop/Gimp, PHP, Python, expresiones regulares, Ruby, Linux, blogs, Windows y XMLs.
Yo ya le he dado a imprimir unas cuantas que me van a venir muy bien.
Cheat Sheet Round-Up: Ajax, CSS, LaTeX, Ruby
Vía / Digg

Similar Posts

|

Mostrar iconos en los enlaces mediante Javascript

ByLuis

Hoy he visto en varios sitios cómo poner en los enlaces un icono del tipo de archivo al que se hace referencia. Algo parecido contamos hace ya tiempo, y al igual que en el ejemplo actual, no funciona para IE6, y aunque nos pese, aún hay muchas personas que siguen usando este navegador.

Una solución es realizarlo mediante Javascript, para lo cual tan solo deberemos incluir un pequeño script en nuestras páginas. El script tiene un array con expresiones regulares que detectan determinadas href y la url del icono para incluirlo en el estilo del enlace. Además existe una función que añade al evento onload del window una función que selecciona todos los enlaces, comprueba por cada enlace si cumple alguna de las expresiones regulares y si es así modifica el estilo con el icono correspondiente.

var listaiconos = new Array();
listaiconos[listaiconos.length] = new Array(/youtube\.com\/watch\?/, "icons/icon_film.gif");
listaiconos[listaiconos.length] = new Array(/sevenload\.com\/videos\//, "icons/icon_film.gif");
...
window.onload = function() {
var enlaces = document.getElementsByTagName("A");
for (var i=0; i<enlaces.length; i++) {
var ok = false;
for (var j=0; j<listaiconos.length && !ok; j++) {
if (enlaces[i].href.match(listaiconos[j][0])) {
enlaces[i].style.paddingRight = "20px";
enlaces[i].style.backgroundImage = "url("+listaiconos[j][1]+")";
enlaces[i].style.backgroundColor = "transparent";
enlaces[i].style.backgroundRepeat = "no-repeat";
enlaces[i].style.backgroundPosition = "right center";
ok = true;
}
}
}
}

Código

Vía / Intenta

SUP: Simple Update Protocol

ByLuis

SUP (Simple Update Protocol) es un sistema que permite a las webs que ofrecen contenidos avisar a los consumidores de sus feeds de qué feeds han sido modificados. Esto permite que no se tenga que comprobar los feeds cada poco tiempo para saber si se actualiza el feed o no (como hace Google Reader) o tener que enviar pings a muchos servicios.
SUP trabaja con ids (SUP-ID) que representan cada feed, el “consumidor” de feeds deberá almacenar los ids, acceder a una URL que ofrece los SUP-IDs actualizados y así saber cual de los feeds que le interesa debe actualizar.
SUP es cacheable, ocupa muy poco y no expone información comprometida como usernames o URL privadas. Muy útil para webs de blogs, microblogging, … pero no tiene sentido para blogs propios.
Simple Update Protocol
Gracias JL por el aviso

|

HTML5′s “email” and “url” Input Types

ByLuis

I’ve already covered some subtle HTML5 improvements like placeholder, prefetching, and web storage.  Today I want to introduce a few new INPUT element types:  email and url.  Let’s take a very basic look at these new INPUT types and discuss their advantages.The SyntaxThe syntax is as basic as a text input;  instead, you set the type to “email” or “ …

Post original

Fadomatic: añade transparecias a tus scripts

ByLuis

Fadomatic es un script que funciona los navegadores más importantes (IE, Gecko, Safari), que permite realizar transparecias disminuyendo el canal alpha progresivamente. Para mí, lo importante de este script es poder estudiar su funcionamiento, como para IE se usa el filtro alpha:

elemento.style.filter = "alpha(opacity="+opacidad+")";

Y como para los navegadores que sigue los estándares, usan el estilo opacity:

elemento.style.opacity = opacidad;

fadomatic.png

Fadomatic

Vía / Intenta

|

Tutorial para crear tu extensión Firefox

ByLuis

Acostumbrados a tener entornos de desarrollo que nos facilita el trabajo enormemente, nos encontramos con que la creación de una extensión para Firefox no es tan cómodo como el resto de nuestros desarrollos.

En el tutorial que os mostramos, tratan muy bien varios temas importantes, que son independientes del desarrollo en sí de la extensión, aunque estos también los tratan de pasada.

Cuando desarrollas una extensión es muy importante conocer los ficheros de configuración y la estructura de directorios, la gestión de preferencias y la localización. También es recomendable hacer un copy/paste sin piedad, coge una extensión que crees que pueda servirte, descomprime el archivo .xpi (que es un zip) y aprende del trabajo de otros.

A la hora de crear el archivo .xpi ellos recomiendan el uso de WinZip, yo recomiendo el 7-Zip, ya que es fácil de usar en modo línea de comandos y con un simple .bat nos creará el archivo con un solo click y así no perderemos tiempo, porque la verdad sea dicha, a no ser que yo lo haga mal, el desarrollo de una extensión de Firefox es un poco pesada por las veces que tienes que estar creando el .xpi y reiniciando el Firefox (y ni te cuento si el Firefox te pide usuario/contraseña para el proxy).

Os paso el .bat que utilizo yo para facilitarme el trabajo:

move *.xpi versiones
cd chrome
del nombre_ext.jar
7z a -tzip nombre_ext.zip content locale skin
ren nombre_ext.zip nombre_ext.jar
cd ..
7z a -tzip nombre_ext.zip install.rdf chrome defaults
ren nombre_ext.zip nombre_ext.xpi

Firefox Extension Development Tutorial

Vía / dzone

|

Lista de herramientas para testeo de aplicaciones web

ByLuis

Hace unas semanas hablamos sobre aplicaciones para la gestión de errores, pero está claro que para gestionar los errores, primero hay que encontrarlos. Para ello nada mejor que herramientas de testing para nuestras aplicaciones web.

Apache JMeter

Aplicación 100% Java de la gente de Apache, que nos permite definir comportamientos para casos de test y medir su rendimiento. Válido para contenido estático y dinámico (ficheros, Servlets, scripts de Perl, objetos Java, bases de datos y queries, FTP, …). Puede simular una gran carga en el servidor, HTTP y FTP testing y bases de datos mediante JDBC, multithreading y con grandes facilidades para extender su funcionalidad mediante plugins.

testing1.png

Apache JMeter

Mercury LoadRunner

Ayuda a preveer costosos problemas de rendimiento, cuellos de botella antes de que una aplicación web sea actualizada o sacada a producción. Soporta un gran número de entornos como Web Services, .NET y J2EE. Se pueden obtener gráficas de rendimiento, saber si una actualización cumple con ciertos requerimientos prefijados e identifica y elimina cuellos de botellas encontrados en el ciclo de vida de la aplicación.

testing2.png

Mercury LoadRunner

OpenSTA

No se trata de una herramienta específica, pero si una colección de herramientas que usando en una arquitectura distribuida basada en CORBA, realiza testeos a aplicaciones webs. Se requiere conocimiento de HTTP y de la aplicación en la que se está trabajando, por lo que no es sencillo su uso. No cumple ninguna metodología de testing, sino que es un sistema flexible para realizar testings y obtener datos.

testing3.png

OpenSTA

Microsoft Web Application Stress Tool

Aplicación que está diseñada para realizar simulaciones realistas de varios navegadores accediendo a páginas de tu aplicación web. Puedes obtener información sobre rendimiento y estabilidad con un número pequeño de clientes.

testing4.png

Microsoft Web Application Stress Tool

Radview WebLOAD

Permite hacer pruebas de carga y estrés en tu aplicación web, medir el rendimiento y la escalabilidad. Simula el comportamiento de los usuarios y predice los requerimientos necesarios e informa sobre cuellos de botellas, límites y puntos débiles antes de que se saque a producción la aplicación, ahorrando así en costes de tiempos por inactividad, costes por ventas y evitando pérdidas de clientes.

testing5.png

Radview WebLOAD

JCrawler

Aplicación opensource para realizar test de estrés a aplicaciones web. Le pasas una URL y puedes realizar una navegación. Admite redirecciones HTTP y cookies. Es independiente de la plataforma, posee un modo consola y es sencillo de configurar.

testing6.png

JCrawler

WAPT

Herramienta para cargar y estresar una aplicación web, de fácil uso, consistente, que te permite analizar el rendimiento y encontrar cuellos de botellas según distintas configuraciones. Ofrece simulaciones precisas de la navegación realizada por un usuario, admite diferentes usuarios en un único test, válido para aplicaciones dinámicas y contenidos HTTP/SSL y devuelve detallados informes y datos sobre los tests realizados.

testing7.png

WAPT

Charles Web Debugging Proxy

Interesante proxy HTTP, monitor HTTP y reverse proxy, que permite al desarrollador ver todo el tráfico HTTP que existe entre su máquina e Internet. Muestra las peticiones, las respuestas y las cabeceras HTTP (junto a las cookies e información de caché). Realizado en Java, permite simular una conexión tipo modem para saber como se ve tu aplicación web mediante este tipo de conexión. De especial utilidad para los desarrolladores de Flash para ver el contenido de LoadVariables, LoadMovie y cargas de XML.

testing8.png

Charles Web Debugging Proxy

Gracias Alexdw

Supongo que hay muchas otras más, y os invito a que nos digáis cuales para añadirlas y así aumentar la lista.