Dakoo » javascript http://www.dakoo.cl ¿Te gusta la web? Mon, 07 Jun 2010 13:40:17 +0000 en hourly 1 http://wordpress.org/?v=3.0 Mas HTML 5 y 3 videos de Douglas Crockford explicando javascript avanzado http://www.dakoo.cl/mas-html-5-y-3-videos-de-douglas-crockford-explicando-javascript-avanzado/ http://www.dakoo.cl/mas-html-5-y-3-videos-de-douglas-crockford-explicando-javascript-avanzado/#comments Fri, 04 Jun 2010 18:38:38 +0000 admin http://www.dakoo.cl/?p=170 Siguiendo con los ejemplos de HMTL 5, este post escrito por Thomas Fuchs( no ssabes quien es?, el creador de script.aculo.us) en que nos muestra un ejemplo muy práctico y rápido de implementar.
Por otro lado hay 3 videos en que Douglas Crockford explica Javascript Avanzado.

ojalá les sirva

saludos TUTO

]]> http://www.dakoo.cl/mas-html-5-y-3-videos-de-douglas-crockford-explicando-javascript-avanzado/feed/ 0 Encontrar ids repetidos en html http://www.dakoo.cl/encontrar-ids-repetidos-en-html/ http://www.dakoo.cl/encontrar-ids-repetidos-en-html/#comments Sat, 20 Mar 2010 18:44:46 +0000 admin http://www.dakoo.cl/?p=128 En muchas oportunidades al escribir html nisiquiera podemos ver el resultado final de nuestros trabajos, por ejemplo si trabajas con trozos de html que al final se unen con códigos de otros desarrolladores y muchas veces no tenemos idea de los nombres que les pusieron a los tag html. Esto se complica más aún cuando tenemos que realizar algo con javascript sobre estos elementos que se han creado, por lo tanto, nuestros scripts no funcionarán.
A mí en mi trabajo me ocurre con mucha frecuencia así que escribí un pequeño script en js que te dá un alert con un resumen del estado de ids de tu html, para esto solo linkea esta dirección en tu html y al recargar la página te dará el resultado del análisis.

PLAIN TEXT
JavaScript:
  1. <script src="http://www.dakoo.cl/archivos/utilidades/verificador.js" type="text/javascript"></script>

En los próximos días linkearé el source por si quieren verlo

Espero les sirva

saludos tuto

]]> http://www.dakoo.cl/encontrar-ids-repetidos-en-html/feed/ 1 Container para marcas de google maps http://www.dakoo.cl/container-para-marcas-de-google-maps/ http://www.dakoo.cl/container-para-marcas-de-google-maps/#comments Tue, 09 Mar 2010 01:59:21 +0000 admin http://www.dakoo.cl/?p=123 Este post es debido a un enojo que tuve una véz. Me gusta mucho la orientación a objetos y estaba utilizando la api de google maps. El problema surgía al momento de tener un container con todos los marcadores que tenía en el mapa( en el cliente claro está) y despues de darme cuenta que lo que se suponía era la solución de google estaba deprecada, decidí ir por mi cuenta y crear una pequeña clase. Es algo super sencillo y que se vale de la clase Hash de Mootools y tiene como único objetivo tener algo más ordenado.
Aquí va el código

LA CLASE

PLAIN TEXT
JavaScript:
  1. function containerMarcas(){
  2.  
  3.     this.cont = new Hash();
  4.     this.add = function(key,marca){
  5.    
  6.         this.cont.include(key,marca);
  7.        
  8.     }
  9.     this.rm = function(key){
  10.    
  11.         this.cont.erase(key);
  12.        
  13.     }
  14.     this.getLen = function(){
  15.    
  16.         return this.cont.getLength();
  17.    
  18.     }
  19.     this.setNombreMarca = function(key,nombre){
  20.    
  21.         var mar = this.cont.get(key);
  22.          mar.setNombre(nombre);
  23.         this.cont.set(key,mar); 
  24.     }
  25.     this.setDescripcionMarca = function(key,des){
  26.    
  27.         var mar = this.cont.get(key);
  28.          mar.setDescripcion(des);
  29.         this.cont.set(key,mar); 
  30.     }   
  31.  
  32. }

Un ejemplo de uso

PLAIN TEXT
JavaScript:
  1. var container = new containerMarcas();
  2. container.add(k,m);

]]> http://www.dakoo.cl/container-para-marcas-de-google-maps/feed/ 2 Shell de Mootools http://www.dakoo.cl/shell-de-mootools/ http://www.dakoo.cl/shell-de-mootools/#comments Tue, 09 Mar 2010 00:49:51 +0000 admin http://www.dakoo.cl/?p=98 Hoy Mootools nuevamente me ha sorprendido, debo reconocer que tengo un cierto "amor" por este framework :P . Estoy hablando de una shell que te permite ir probando tus scripts antes de subirlos o solamente para testear.
Si quieres probar esta maravilla entra aquí

saludos tuto

]]> http://www.dakoo.cl/shell-de-mootools/feed/ 0 Comparacion de String con Javascript http://www.dakoo.cl/comparacion-de-string-con-javascript/ http://www.dakoo.cl/comparacion-de-string-con-javascript/#comments Thu, 17 Dec 2009 03:26:10 +0000 admin http://www.dakoo.cl/?p=93 Una de las cosas raras que me ha pasado con js fue una comparación de string.

Para los que han programado en otros lenguajes mas o menos  "modernos" saben que uno puede saber si un string es mayor que otro solo colocando la expresion "string1 > strin2" o "string1 < string2", esto en sí debería devolver 1 o 0 dependiendo de los strings ingresados. Yo pensaba que esta "regla" también se respetaba para js, GRAN ERROR SEÑOR, osea, no es TAN error, porque como siempre hay excepciones a la regla.

En firefox me funcionaba, en chrome y en ie6 no.

Ahora la solución.

Cachureando por ahi y por alla, recordando funciones de otros lenguajes(java más especificamente)  llegue a una página en la que implementó la función "compareTo", la cuál por ejemplo en java existe. Lo que hace esto es comparar caracter por caracter el unicode de cada uno y entregando el resultado. Con esto se dejan de lado los errores (que pienso que es donde se marean los navegadores) que se pueden producir por caracteres extraños, acentos por ejemplo, mayúsculas u otra cosa.

Vamos al código

PLAIN TEXT
JavaScript:
  1. function compareTo( s )
  2. {
  3.   var len1 = this.length;
  4.   var len2 = s.length;
  5.   var n = ( len1 <len2 ? len1 : len2 );
  6.  
  7.   for( i = 0 ; i <n ; i++ )
  8.   {
  9.     var a = this.charCodeAt( i );
  10.     var b = s.charCodeAt( i )
  11.     if( a != b )
  12.     {
  13.       return( a - b );
  14.     }
  15.   } 
  16.   return( len1 - len2 );
  17. }
  18. String.prototype.compareTo = compareTo;

Lindo no :D

Cualquier duda o sugerencia no dudes en comentar

Saludos tuto

]]> http://www.dakoo.cl/comparacion-de-string-con-javascript/feed/ 0 Primeros pasos con WebGl http://www.dakoo.cl/primeros-pasos-con-webgl/ http://www.dakoo.cl/primeros-pasos-con-webgl/#comments Sun, 22 Nov 2009 19:01:54 +0000 admin http://www.dakoo.cl/?p=73 ¿Web..Como?

Webgl viene a proponer una nueva revolución en gráficos 3d en la web. Desde hace mucho tiempo que la idea estaba en el aire y faltaba alguien que la llevara a cabo, es ahi donde aparece el grupo Kronos, un conjunto de empresas relacionadas con aplicaciones basadas en graficos 3d, en donde por ejemplo está incluidas AMD, Nvidia, Intel, ARM, etc. Este grupo hace muy poco que está empezando a mostrar los resultados en torno al proyecto Webgl y los resultados que están empezando a verse dan realmente para pensar.

Existen muchos ejemplos que se están empezando a ver en la Web sobre webgl, eso que aún no muchos navegadores soportan esta tecnología, es más, solo Webkit en sus ultimas versiones y Gekko en firefox 3.7( si lo se recien están en la version 3.5.x estable) lo están implementando. Si quieres ver estos ejemplos que andan pululando por ahí te conviene instalar firefox minifield, el cuál puedes bajar de esta dirección:

http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

Existen varias páginas que hablan sobre esto pero sin dudas la mejor y en la que voy a basarme para hacer los demos y esas cosas( si leiste bien, este no va a ser el primer post sobre esto :D ) es

http://learningwebgl.com/blog/

Tengo el Firefox Minifield, ¿ahora que?

Bueno ahora debes activarlo, esto se realiza:

  • Ejecuta Minifield
  • Escribe en la barra de direcciones about:config
  • Filtra por Webgl
  • Busca el comando "webgl.enabled_for_all_sites" y hazle doble click para que cambie a "true"

    • Ves que no era dificl :D

    Ahora si quieres ver algunos ejemplos mira estos:
    http://learningwebgl.com/blog/?p=11#examples

    Eso por ahora, prometo muy pronto poner un ejemplo para empezar a entender de que se trata todo esto

    Saludos tuto

    ]]>     http://www.dakoo.cl/primeros-pasos-con-webgl/feed/ 5     Acentos en Alerts de Javascript http://www.dakoo.cl/acentos-en-alerts-de-javascript/ http://www.dakoo.cl/acentos-en-alerts-de-javascript/#comments Fri, 24 Jul 2009 01:43:37 +0000 tuto http://dakoo.cl/?p=25 En la pega el otro día con un compañero teniamos que mostrar un texto en un alert de Javascript, el problema comenzó cuando no podiamos mostrar los clasicos &acute; como en html, así que investigando un poquito por la red encontré la solución.

    UNICODE

    Si en vez de colocar los caracteres con &aacute; l lo realizas de la siguiente forma

    alert("El a"+'\u00f1'+"o, es en el que estamos");

    Verás un bello alert con una Ñ .
    Como se fijarán lo que se muestra en ese alert es una Ñ la cuál es un caracter especial y los cuales también pueden mostrarse dentro de un alert.

    A continuación una lista con varios caracteres y el unicode respectivo

    http://lefunes.wordpress.com/2007/11/14/caracteres-especiales-en-javascript/

    Espero les sirva

    Saludos tuto

    ]]>     http://www.dakoo.cl/acentos-en-alerts-de-javascript/feed/ 3     Mootools Highlight, bueno, bonito y barato http://www.dakoo.cl/mootools-highlight-bueno-bonito-y-barato/ http://www.dakoo.cl/mootools-highlight-bueno-bonito-y-barato/#comments Thu, 25 Jun 2009 03:11:14 +0000 admin http://dakoo.cl/?p=10 Una funcionalidad de mootools bastante bonita es el Hightlight. Su objetivo es producir un parpadeo en un objeto de la pagina, entiendase por parpadeo como un cambio de color por un tiempo corto. El color por defecto que trae es un amarillo claro, pero trae la opcion que se puedan setear los 2 colores entre los cuales se producirá el cambio.
    En este ejemplo pueden ver 3 casos, uno donde se muestra el valor por defecto, otro donde se cambia entre dos colores dados por el usuario y el último un efecto que se genera con muy poco código y un poco de imaginacion
    Para ver los ejemplos en funcionamiento entra aca
    El código del primer ejemplo es este

       $('primero').addEvent('click', function(){
      $('primero').highlight();
  });

    El del segundo

    $('segundo').addEvent('click', function(){
$('segundo').highlight('#f00','#000');
});

    Mientras que el último es

    $$('.item').each(function(item, index){
item.addEvent('mouseover', function(){
item.highlight('#f00','#000');
});
});

    Como ven el código que se escribe es mínimo para un efecto bastante llamativo

    Si quieren ver el codigo completo descarguenlo de aquí

    Saludos tuto

    ]]>     http://www.dakoo.cl/mootools-highlight-bueno-bonito-y-barato/feed/ 0