14 reglas para el alto performance de un sitio web
En unos de mis tantos paseos por internet me encontre con una herramienta para firefox 1 y 2 que se llama yslow, esta herramienta realiza un chequeo de 14 puntos que la gente de la sección de performance de yahoo determino como mejores prácticas al momento de estar desarrollando sitios web. Después de haber probado por algunos días esta herramienta la recomiendo ampliamente ya te da una idea muy clara de que es lo que tienes que hacer con tu sitio si es que aun no lo has hecho, o bien si en este momento no desarrollas en web, creo que sería importante que tomáras estos puntos en cuenta para tu próxima aplicación. A continuación les dejo los 14 puntos y un enlace donde pueden obtener mayor información.
- Realizar un menor número de HTTP Requests
- Utilizar un Content Delivery Network Se refiere a utilizar un CDN para seleccionar la ubicación más cercana al usuario para entregarle el contenido del sitio.
- Agregar Expires Header Este tipo de cabeceras se agregan en el servidor web (por ejemplo en apache web server)
- Comprimir los componentes en Gzip
- Insertar las CSS al inicio de la página
- Mover los Scripts al final
- Evitar las expresiones en CSS
- Hacer los JavaScript y CSS externos
- Reducir las busquedas de DNS
- Minificar JavaScript
- Evitar los redireccionamientos
- Remover los scripts duplicados
- Configurar ETags
- Hacer que Ajax sea cacheable(que se guarde en cache)
Saludos, espero que tengan un buen día.
Javascript log
Buen día a todos, desde hace tiempo que tenía este código para generar un logger para javascript, este logger imprime mensajes en una pantalla popup. Creo que esta pequeña funcion que vemos a continuación les sera de utilidad a muchos de los que tenemos que programar en javascript ya que no siempre se puede contar con un log de donde estan ocurriendo los errores, más sin embargo aun sigo recomendado que lo mejor es utilizar firebug ya que cuenta con un mayor número de herramientas. function log(message) { if (!log.window_ || log.window_.closed) {
var win = window.open(“”, null, “width=400,height=200,” +
“scrollbars=yes,resizable=yes,status=no,” +
“location=no,menubar=no,toolbar=no”);
if (!win) return;
var doc = win.document;
doc.write(“<html><head><title>Debug Log</title></head>” +
“<body></body></html>”);
doc.close();
log.window_ = win;
}
var logLine = log.window_.document.createElement(“div”);
logLine.appendChild(log.window_.document.createTextNode(message));
log.window_.document.body.appendChild(logLine);
}
Para imprimir los mensajes en el log lo único que tenermo que hacer es llamar a la función log() dentro de tu código.
for (var i = 0; i < 10; i++) {
log(“This is log message #” + i);
} Bueno pues espero que les sea de utilidad, no olviden estar poniendose en contacto con nosotros por medio del correo electrónico para tratar de postear sobre temas más diversos y que sean de interes para todos ustedes.
explicando GWT
Vía ajax hispano me encontre con este artículo que les dejo a continuación para que lo chequen a mi me parecío muy bueno por eso se los pongo a su disposición.
Saludos y empezamos nuevo año con ganas renovadas.
Me hago eco de uno de los
mejores artículos que he leído sobre el tema de google toolkit, he visto
conveniente citarlo aquí antes de hacer algo que seguramente no dejaría tan
claro. Un especial agradecimiento a Edgardo Balduccio de gadmonks por este fantástico
artículo.
Google lanzó su Google Web Toolkit
(ver los Destaques del día) y eso me produjo dos sensaciones opuestas:
1. Alegría. Que el creador de Gmail ponga a disposición un
framework completo (quizá el propio) para desarrollar aplicaciones en AJAX en su
estilo -único- es muy gratificante para aquellos desarrolladores que apreciamos
la manera en que Google hace las cosas.
2. Cierta decepción. Cuando bajé el framework, lo “instalé” (está entre comillas porque la
instalación se remite a ser copiado al disco duro en una carpeta cualquiera) y
ejecuté su aplicación de prueba (pueden verla funcionando aquí mismo) percibí que está íntegramente orientado al
lenguaje JAVA. Lo primero que pensé es en mis clientes (podría ser de mucha
utilidad), pero lamenté el hecho de que ese entorno resulta impopular a la hora
de ser integrado en weblogs y aplicaciones simples en PHP.
Aún así, para aquellos que estén interesados en la mecánica de este nuevo
regalo de google, me permitiré explicar algunos detalles de su
funcionamiento.
Requisitos
- Java: Sun Java 2 Runtime Environment 1.4.2+ [Download]
- Sistema operativo: Windows XP, Windows 2000, o Linux w/
GTK+ 2.2.1+ - Hardware: ~100MB de espacio en el disco, 512MB RAM
Cómo funciona
El GWT funciona de dos maneras:
1. Hosted mode
Este modo de ejecución es a través de un Apache
Tomcat que viene incorporado y sirve para debuggear la aplicación
en ciernes. Para ver cómo funciona este modo de ejecución, escojeremos el mismo
ejemplo que mostramos aquí (Kitchen Sink); deberemos entrar en la carpeta
samples, luego en KitchenSink y ejecutar el archivo
KitchenSink-shell.cmd. Este comando iniciará el servidor de
aplicaciones Tomcat y abrirá un navegador (¿vieron? Google ya tiene su
navegador, aunque sea para probar sus aplicaciones) que apuntará a nuestro
localhost en el puerto 8888 (para no interferir con otros servicios
http que podamos tener activos) con la aplicación en ejecución (si quieren ver
la aplicación -de nuevo- está aquí publicada en Gadmonks).
2. Web mode (compilado)
Fíjense que existe otro archivo “cmd”:
KitchenSink-compile.cmd. Ejecuten este comando y verán cómo el
framework compila la aplicación y la guarda dentro de una carpeta llamada
www en la que encontraremos otra con el nombre completo del
package java (en este caso www\com.google.gwt.sample.kitchensink.KitchenSink).
Dentro de esta última carpeta veremos algunos archivos HTML y XML que conforman
a la aplicación que podrá ser ejecutada desde cualquier navegador sin necesitar
del TOMCAT, pues -aunque resulte difícil entenderlo-, traduce todo el código
puro JAVA a javascript.
Estructura
El GWT genera archivos para Eclipse, aún así la programación puede ser efectuada a través
de cualquier IDE Java (yo me acostumbré a usar el JDeveloper de
Oracle, es gratuito y puede bajarse directamente desde la web).
Estas herramientas nos permitirán realizar el debug de la aplicación, es decir,
verificar el recorrido del código en ejecución para detectar errores
eventuales.
Para crear una nueva aplicación, usaremos el comando applicationCreator.cmd
(es necesario tener una ventana de línea de comandos abierta pues requiere de
argumentos y en ella se nos informa dónde están guardados los archivos que
fueron generados). El argumento de este comando es el nombre que le daremos al
package, por ejemplo:
-
applicationCreator
com.blogatronica.client.Prueba
El client es necesario, si no, nuestro proyecto no será
creado y dará un mensaje de error.
El comando generará una serie de carpetas, de acuerdo con el nombre de
nuestro package (en java siempre es así) dentro de la carpeta src en el
path del framework. En nuestro caso, el path será:
src\com\blogatronica\client y
src\com\blogatronica\public.
Dentro de public encontraremos el archivo Prueba.html y
dentro de client el código fuente en java, un archivo llamado
Prueba.java.
En Public.html está la llamada al javascript que será
generado en la ejecución (gwt.js), tanto en Host mode como en Web mode. Este
javascript será el que gerenciará todo el código generado.
La aplicación generada de prueba es el típico Hello world! que
aparecerá luego de que apretemos un botón. Para ejecutarla, pueden ver que el
framework generó en su path tanto el archivo de ejecución como el de
compilación, en este caso Prueba-shell.cmd y
Prueba-compile.cmd.
El archivo Prueba.java funda la clase de esta manera:
-
public class Prueba implements EntryPoint {
-
/**
-
* This is the entry point
method. -
*/
-
public void onModuleLoad() {
-
button.addClickListener(new ClickListener() {
-
public void onClick(Widget sender) {
-
if (label.getText().equals(“”))
-
label.setText(“Hello
World!”); -
else
-
label.setText(“”);
-
}
-
});
El código es muy simple, si cuando apretamos el botón el label está
vacío, escribirá “Hello world!” si no, sacará lo que está escrito y lo dejará
vacío. Pueden ver el ejemplo publicado aquí también.
Cuando el código es compilado, genera un archivo de javascript para cada
navegador, y describe a los navegadores de la siguiente manera (en el archivo
*nocache.html):
-
window["prop$user.agent"] = function() {
-
var v = window["provider$user.agent"]();
-
switch (v) {
-
case “ie6″:
-
case “moz”:
-
case “oldmoz”:
-
case “opera”:
-
case “safari”:
-
return v;
-
default:
-
parent.__gwt_onBadProperty(“com.blogatronica.Prueba”, “user.agent”, ['"ie6"', '"moz"', '"oldmoz"', '"opera"', '"safari"'], v);
-
throw null;
-
}
-
};
Podemos ver que los navegadores soportados son el Explorer, Mozilla, Netscape
(oldmoz), Opera y Safari.
Conclusión
Estas descripciones no esperan ser un detalle exhaustivo del funcionamiento
del GWT, sí acercar a los desarrolladores interesados -por querer usarlo o por
curiosidad- el mecanismo primario de un framework que podría facilitarle la vida
a más de uno a la hora de desarrollar alguna aplicación que nuestro trabajo nos
traiga a las manos. La versión es beta y en el sitio indica que esperan el
feedback de la gente para ajustarlo. A mí me pareció, en las pocas pruebas que
hice, muy estable, en ningún momento dio ningún error. Para los que prefieran
alguna cosa más fácil, les recomiendo el Google Page
Creatorv.
