Me pone programar

Más que me pone, digamos que me gusta y disfruto con ello

Me pone programar

Blog personal sobre PHP, JavaScript, CSS, Estándares, Flash i demás temas interesantes del mundo de la informática e Internet

Compresor de JavaScript

15/05/2009 a las 05:12 por Shox

He encontrado un magnífico compresor de Javascript online, que realiza diferentes modos de compresión con diferentes librerías, para que podamos ver cual nos conviene más para nuestro proyecto.

Las posibles opciones son: JSMin, Dojo ShrinkSafe, YUI Compressor, Packer y gzip.

Además ofrece unas gráficas mostrando cuales son los ratios de compresión en cada caso, o cuanto tiempo ha tardado la compresión

Compresor Rater

Debbuging en JavaScript sin utilizar alert()

16/10/2008 a las 11:23 por Shox

Hoy me he topado con una manera muy cool de hacer debugging en JavaScript sin necesidad del molesto alert().

Yo siempre habia utilizado la función de Firebug console.log(), e incluso si quería hacer debug de PHP, la extensión FirePHP, que aunque falle mucho, es muy interesante. Pero el problema que es sólo para Firefox, hace que la opción de Blackbird gane enteros.

Como podeis ver en la imagen (y si vais al sitio hay una demo expléndida) consta de una ventana translúcida en la esquina superior izquierda de la pantalla donde va apareciendo todo el log que lleve el código. Además la manera de utilizarlo es muy cómoda:

JavaScript:
  1. log.debug( 'Mensaje de debug' );
  2. log.info( 'Mensaje de informacion' );
  3. log.warn( 'Mensaje de warning' );
  4. log.error( 'Mensaje de error' );

Por ponerle una pega, la ventana de log no puede cambiarse de sitio, con lo que a veces puede llegar a ser incómoda, pero el filtrado de tipo de mensaje es muy potente.

Blackbird

Categorías: Debug, JavaScript
Tags: , , ,
Comentarios: 325 comentarios »

Firebug Lite, por fin inspector de DOM i HTML para IE

02/08/2008 a las 06:12 por Shox

La nueva versión de Firebug Lite, 1.2, ha añadido a su funcionalidad de sólo como uso de consola de debug JavaScript, y ahora se comporta de una manera más parecida a la de su hermano mayor. Ahora es capaz de inspeccionar el DOM, hacer track de los XHRs, y navegar por el HTML, CSS y JavaScript.

Por fin una versión que será muy útil a los desarrolladores web, para superar la dificil tarea de programar en Internet Explorer. Funciona en todos los navegadores, como Safari y Opera.

Para instalarla en cualquier página web sólo tienes que poner el siguiente código:

HTML:
  1. <script type='text/javascript'src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>

Firebug Lite

Vía: No al IE6 - Navegadores web

Que es jQuery. Parte I

29/06/2008 a las 07:28 por Shox

jQuery es un framework de JavaScript para facilitar, entre otros, el acceso a los elementos del DOM, los efectos y sobretodo las llamadas en AJAX. jQuery podría ser otro framework más como script.aculo.us, MooTools, YUI pero en cambio disponemos una gran potencia con una facilidad mucho mayor que sus competidores.

Primero de todo deberemos de incluir la libreria en nuestra web: por ejemplo

HTML:
  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>

Primero de todo vamos a seleccionar un elemento de nuestro HTML, y por ejemplo, esconderlo. Utilizaremos la función hide() que, efectivamente, esconde dicho elemento html, pero ahora nos fijaremos más en como acceder al árbol DOM de HTML.

JavaScript:
  1. $("p").hide(); // Escondemos todas las p de nuestra web
  2.  
  3. $("#item").hide(); // Escondemos el elemento con id="item"
  4.  
  5. $(".miClase").hide(); // Escondemos los elementos con class="miClase"
  6.  
  7. $("p span").hide(); // Escondemos únicamente todos los span que haya dentro de los p
  8.  
  9. $("p span.miClase").hide(); // Escondemos los span con class="miClase" que haya dentro de p
  10.  
  11. $("p span#item").hide(); // Escondemos el span con id="item" que hay dentro de p
  12.  
  13. $("p > span").hide(); // Esconde los span que son hijos directos de p
  14.  
  15. $("p+div").hide(); //Esconde todos los div que esten precedidos de un p
  16.  
  17. $("p~div").hide(); //Esconde todo los div que hayan sido precedido por p
  18.  
  19. $("input[type=radio]").hide(); // Esconde todos los inputs que sean del tipo radio
  20.  
  21. $("a[href^=http://]").hide(); // Esconde todos los links que su href empiece por http://
  22.  
  23. $("a[href$=.com]").hide(); // Esconde todo los links que su href acabe por .com
  24.  
  25. $("a[href*=www]").hide(); // Esconde todo los links que en su href aparezca "www"

Como podemos ver, jQuery siempre (o casi siempre, ya lo veremos más adelante) actua sobre elementos de HTML, seleccionandolos en lo que llamaremos selector, y le aplicaremos funciones:

$(selector).funcion();

Ya veremos más adelantes que la selección de elementos del DOM es más potente aun, y que las funcionalidades, a parte de que se pueden unir, son casi infinitas.

jQuery

Categorías: JavaScript, jQuery
Tags: ,
Comentarios: 34 comentarios »

IE, Javascript y los memory leaks

29/06/2008 a las 06:47 por Shox

Recuerdo del blog de Omatech, un problema que tuvo David con los memory leaks del Internet Explorer 6 usando Javascript.

Traduzco al castellano el problema la solución:

"...la navegación por la web era fluida por Firefox e Internet Explorer, pero pasaba a ser excesivamente lenta en el segundo después de algunas iteraciones.

Despues de varias pruebas, encontra algo interesante:IE: Where’s my memory?. Segun parece Internet Explorer no gestiona bien los closures en Javascript de forma que el garbage collector automático utilizado en el ECMAScript no funciona como debería en Internet Explorer. Podemos encontrar una buena explicación de que es un closure en IE: Where’s my memory? o en Javascript Closures.

Una vez echo los cambios en varios sitios, la navegación era ligeramente más fluida, pero el problema seguía estando. ¿Que podría ser? Finalmente, lo que parecía ser como isolate-your-code-developing, encontre el problema, i como sucede a menudo resultaba ser menos importante de lo que podíamos pensar (ahora es fácil decirlo). En la web se utilizaba un javaScript con el tag de inicio siguiente:

<script language="javascript">

En cambio, según las especificaciones de W3C, el atributo language está en desuso, i en su lugar instan en utilizar el atributo type, que por otra parte, es obligatorio. Así que el tag de inicio mínimo deberia de ser:

<script type="text/javascript">

Este cambio resuelve finalmente el problema planteado..."

Con este ejempo podemos ver la importancia de que las especificaciones están para algo, y que ampararse en lo que uno aprendio hace 8 o 10 años no tiene sentido.

Categorías: JavaScript
Tags: , ,
Comentarios: 542 comentarios »