30
Jun
aNieto2k hace 4 días en: Programacion, javascript, webdev
Una de las técnicas más usadas para reducir el tiempo de carga de una página web es la de bajar el Javascript al final del fichero HTML, concretamente justo encima de </body>.
Esto hace que la carga de la página, no se quede en stand-by mientras termina de cargar el javascript. El resultado es realmente sorprendente:
Antes:
(Ver Imagen)
Despues:
(Ver Imagen)
Conclusión
Como podemos ver hemos reducido un 47% el tiempo de carga de la página (la del ejemplo) o hemos mejorado el tiempo de carga un 210%, haciendo que esta cargue en casi la mitad de tiempo.
Esto además, nos evita problemas con el evento onload ya que los elementos HTML ya están añadidos al árbol DOM.
30
Jun
aNieto2k hace 4 días en: Programacion, Wordpress, javascript, webdev
Un par de cosillas que he encontrado y que pueden interesantes tener presentes:
- SMT (Simple Mouse Tracking): Sistema basado en Javascript para guardar el rastro del ratón del usuario al pasear por tus páginas.
- <MyTableGrid />: Librería que usa Prototype + Script.aculo.us para conseguir unas tablas dinámicas muy interesantes.
- Wordpress Configuration Tips: Trucos de optimización durante la configuración de Wordpress.
- wordwrap en Javascript: James Padolsey crea una pequeña función que emula la función wordwrap() de php.
- Trucos de Gmail: Conviertete en un Gmail Ninja!!
- Haz Dra&Drop en tablas: Javascript para realizar drag & drop con el contenido de las tablas.
- $fx: Librería Javascript especializada en animaciones.
- jsAnim: Otra librería Javascript especializada en animaciones.
- Gx: Y una más, otra librería Javascript para realizar animaciones (tan solo 10kb sin comprimir).
26
Jun
aNieto2k hace 8 días en: Programacion, javascript, webdev
Pocas son las cosas que no podamos hacer con Javascript, y la de hacer gráficas no es una de ellas.
(Ver Imagen)
Gracias a alguna de estas librerías, hacer nuestras gráficas más elegantes para nuestros usuarios es realmente sencillo:
- Flot [jQuery]
- fgCharting [jQuery]
- jQuery Sparklines [jQuery]
- jqPlot [jQuery]
- TufteGraph [jQuery]
- jQuery Google Charting [jQuery]
- ProtoChart [Prototype]
- JSXGraph [Prototype o jQuery]
- Protovis [Native JS]
- PlotKit [Nativa JS]
Me ha parecido muy raro que no hubiera nada para MooTools, así que he estado buscando algo para los que desarrollamos con este framework.
- MooChart
- TabletoChart
- MooWheel
¿Me he dejado alguna que valga la pena conocer?
18
Jun
aNieto2k hace 16 días en: Asides, Programacion, estandares, javascript, web, webdev
Luis publica un enlace en el que nos muestra 7 consejos básicos que hemos de seguir los desarrolladores con Javascript para conseguir que nuestro Javascript tenga ese toque de calidad que lo diferencie de un simple script. [Original]
18
Jun
aNieto2k hace 16 días en: Programacion, estandares, javascript, web, webdev
Un desarrollador web cada día debe lidiar, para hacer compatibles sus aplicaciones, con los diferentes navegadores que hay actualmente en Internet, con las diferentes versiones de cada uno de los navegadores y además con las diferentes versiones de las tecnologías que usa. Ya sea CSS2, CSS3 o Javascript 1.6, 1.7 … al fin y al cabo siempre tenemos que ir condicionando nuestras aplicaciones para todas las posibles combinaciones. Como sabemos que es nuestro trabajo y que si no lo hacemos nosotros no lo hará nadie, nuestra mejor herramienta es estar bien informado de todo lo relacionado a estas incompatibilidades y así poder acotarlas antes de que el problema nos haga correr.
(Ver Imagen)
Para ello, páginas como estas nos ayudarán en el día a día. Se trata de una recopilación de diferencias entre las diferentes versiones de Javascript, desde la 1.6 hasta la 1.8.1, en la que podemos ver la compatibilidad con los principales navegadores disponibles. ¿Conoces alguna más?
17
Jun
aNieto2k hace 17 días en: Programacion, estandares, javascript, web, webdev
Doodle.js es una librería que nos permite trabajar fácilmente con el elemento <canvas /> y todo lo que ello conlleva. Con una estética similar a jQuery, dibujar sobre el lienzo que es <canvas /> es tan sencillo como esto:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- CANVAS PARA IE -->
<!--[if IE]><script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script><![endif]-->
<!-- SCRIPT DOODLE -->
<script src="./doodle-0.1.js" type="text/javascript"></script>
<!-- JAVASCRIPT -->
<script type="text/javascript">
function init() {
(function(oo) {
oo.canvas('#my_canvas');
var box = oo.rect({x:25, y:25,width:50, height:50, fill:"#ff0000"});
box.draw(); //draw a red box with initial parameters
box.modify({fill:'rgb(0,255,0)'}).translate(50,0).draw();
box.modify({fill:'purple'}).rotate(-45).draw();
box.modify({fill:'yellow'}).translate(50,0).scale(1.5).draw();
box.modify({fill:'blue'}).transform(1.5,0,0,1.5,50,0).draw();
})($doodle);
};
</script>
</head>
<body onload="javascript:init();">
<!-- ELEMENTO CONTENEDOR CANVAS -->
<canvas id="my_canvas" width="600" height="400">
<p>Error: El elemento canvas no está disponible para este navegador.</p>
</canvas>
</body>
</html>
Ejemplos
No os perdais algunos de los ejemplos disponibles en la página de la librería:
13
Jun
aNieto2k hace 21 días en: Asides, Programacion, estandares, javascript, web, webdev
Interesante artículo de Andrés Fernández en el que nos muestra la forma de optimizar y disfrutar de gradientes mediante Javascript. Para ello hace uso de <canvas />, un elemento bastante bien adoptado por todos los navegadores modernos y fácil de parchear para Internet Explorer. Áltamente recomendable. Gracias Jose Antonio.
10
Jun
aNieto2k hace 24 días en: Curiosidades, Programacion, javascript, webdev
Esta mañana he encontrado un artículo, que esta noche publicaré, en el que me he encontrado una interesante curiosidad javascript, os la dejo y a ver si alguien lo encuentra 
var divs = document.getElementsByTagName("div");
for (var i=0; i < divs.length; i++) {
var div = document.createElement("div");
document.body.appendChild(div);
}
Primero, y sin probar el código intenta comprender que es lo que hace el script, una vez visualizado y comprobado que no haya errores, pruebalo, ya sea en Firebug, o en una página aposta. ¿A ver si alguien me sabe decir por que ocurre esto? Esta noche, o mañana por la mañana pondré la solución y el enlace donde lo ví, pero seguro que lo sacáis antes …. tiempo!!
Intenta no leer los comentarios y contestar lo que has pensado.
Actualización
Bueno, los comentaristas están mucho más puestos que yo en Javascript, y nos han deleitado con comentarios explicativos imposibles de mejorar, así que si quieres saber algo más sobre los HTMLCollection, NodeList y demás, lee los comentarios. El código lo he sacado de un artículo de Nicholas C. Zakas sobre optimización Javascript y me ha parecido muy curioso
6
Jun
aNieto2k hace 28 días en: Programacion, javascript, webdev
James Padolsey nos deleita con una nueva aplicación Javascript que nos ayudará a depurar nuestros scripts. Se trata de un sistema visual para mostrarnos el contenido de nuestras variables.
// HTML
<div id="debug"></debug>
// Javascript
var Objeto = {
uno: function(){
return "Esto es una función"
},
dos: [1,2,3,4,5],
tres:{
uno: "UNO",
dos: [{
uno: "uno"
},{
dos: "dos"
}]
},
cuatro: "CUATRO"
};
var prettyObject = prettyPrint(Objeto,{/* Opciones */});
document.getElementById("debug").appendChild(prettyObject);
Como podemos ver en el código, tenemos a Objeto que está compuesto de funciones, cadenas y arrays. Al pasarlo por prettyPrint() obtenemos un objeto DOM en forma de tabla con la información del objeto que hemos pasado condicionado por las opciones que usemos como segundo parámetro. Este objeto, será introducido dentro del elemento #debug.
Puedes ver un ejemplo que James ha montado aqui.
(Ver Imagen)
Ejemplo con jQuery
Si estás usando jQuery y te gustaría implementarlo fácilmente en tu sitio web puedes usar esto:
var Objeto = {
uno: function(){
return "Esto es una función"
},
dos: [1,2,3,4,5],
tres:{
uno: "UNO",
dos: [{
uno: "uno"
},{
dos: "dos"
}]
},
cuatro: "CUATRO"
};
jQuery.getScript("http://github.com/jamespadolsey/prettyPrint.js/raw/ed94a997925c6bf269b780712c17fd27cf284886/prettyprint.js", function(){
if (jQuery("#debug").length == 0) jQuery("body").append('<div id="debug"></div>');
jQuery("#debug").html(prettyPrint(Objeto));
});
// No sé si la URL funcionará para todo el mundo.
