Dakoo » General http://www.dakoo.cl ¿Te gusta la web? Fri, 04 Nov 2011 03:03:16 +0000 en hourly 1 http://wordpress.org/?v=3.3 Twittcel en todo Chile – twiteros separados por comunas http://www.dakoo.cl/twittcel-en-todo-chile-twiteros-separados-por-comunas/ http://www.dakoo.cl/twittcel-en-todo-chile-twiteros-separados-por-comunas/#comments Fri, 04 Nov 2011 03:02:43 +0000 admin http://www.dakoo.cl/?p=195 Continue reading →]]> Bueno este post lo haré con mucha alegría. Twittcel lo pasé a nivel nacional. Para los que no saben que es, se trata de una aplicación que busca twiteros de la región del maule, Chile ordenándolos por comuna. La cosa es que ahora después de algunos cambios y de mucho leseo(especialmente por falta de tiempo), les traigo la nueva versión la cuál ya tiene identificados alrededor de 49000 twiteros de todo Chile.
Prometo en un pronto Post explicar como funciona y dentro de lo posible seguir agregándole funcionalidad

Link

Espero les guste

saludos a todos

]]> http://www.dakoo.cl/twittcel-en-todo-chile-twiteros-separados-por-comunas/feed/ 0 Audio en HTML5 http://www.dakoo.cl/audio-en-html5/ http://www.dakoo.cl/audio-en-html5/#comments Tue, 21 Dec 2010 01:35:08 +0000 admin http://www.dakoo.cl/?p=182 Continue reading →]]> Reconozco que desde hace mucho tiempo que no escribía nada, entre trabajo, proyectos y novia no queda mucho tiempo para escribir nada en este blog. Hoy escribo sobre un tema que hace tiempo quería seguir tratando, HTML5. Acabo de leer un libro sobre este tema llamado "HTML5 for web designers" de Jeremy Keith. En el cuál explican varios temas y entre estos uno bien interesante es el tag AUDIO.
Un "problema" que sucedía antes de HTML5 era que al momento de querer reproducir algún archivo de música en una web había que utilizar algún reproductor flash y por ende tener que instalar un plugin en el browser. Ahora luego de mucho tiempo HTML nos provee de un tag que permite reproducir un archivo de audio.
Pero vamos por un ejemplo inmediatamente:

PLAIN TEXT
HTML:
  1. <!DOCTYPE html>
  2.     <meta charset = "UTF-8">
  3.     <head>
  4.     </head>
  5.     <body>
  6.         <audio id = "player" src = "ejemplo.ogg" controls preload="true"></audio>
  7.         <button onClick = "document.getElementById('player').play();">Play</button>
  8.         <button onClick = "document.getElementById('player').pause();">Stop</button>
  9.         <button onClick = "document.getElementById('player').volume += 0.1;">Volume Up</button>
  10.         <button onClick = "document.getElementById('player').volume -= 0.1;">Volume Down</button>
  11.     </body>
  12. </html>

Analizemos lo que nos dice este código, en el primer tag tenemos la declaración de AUDIO, en src colocamos la dirección donde se encuentra nuestro archivo, al escribir controls le decimos a la página que muestre un reproductor, el cuál tiene play, pause y volume. Por otro lado si queremos manejar nuestro archivo mediante javascript en los siguientes tag button está como se pueden utilizar.
Ahora ¿Qué archivos podemos reproducir?
Bueno para variar esto depende en muchos casos del browser que estemos utilizando. Pero una buena opción que nos da HTML5 es poder colocar más de una fuente (src) en nuestros archivos por ejemplo si no estamos seguros que el browser de nuestros usuarios reproduce podemos colocar también una versión en ogg de nuestro archivo, incluso podemos decirle el tipo de archivo que es, de la siguiente manera

PLAIN TEXT
HTML:
  1. <audio controls>
  2. <source src = "ejemplo.ogg" type = "audio/ogg">
  3. <source src = "ejemplo.mp3" type = "audio/mpeg">
  4. </audio>

Incluso dentro de el tag audio podemos poner un objeto flash , el orden en que trata de reproducir el browser es de arriba hacia abajo.

Si quieres ver un ejemplo funcionando y tienes un browser que soporta HTML5 puedes verlo funcionando en este link

saludos tuto

]]> http://www.dakoo.cl/audio-en-html5/feed/ 3 HTML 5 – nav http://www.dakoo.cl/html-5-nav/ http://www.dakoo.cl/html-5-nav/#comments Thu, 03 Jun 2010 03:41:33 +0000 admin http://www.dakoo.cl/?p=159 Continue reading →]]> Al igual que nuestro anterior post donde vimos el tag section en esta ocasión nos centraremos en el tag nav. El objetivo de este elemento al igual que section es describir de forma más semántica la página, con esto se logra una estructura más ordenada y quizás en el futuro los buscadores puedan tomarlos en cuenta para la Web semántica.
Este tag se utiliza para introducir los menús de navegación del sitio, esto generalmente se hacía con:

PLAIN TEXT
HTML:

Ahora al introducir este elemento como dijimos anteriormente mejora la forma semántica del sitio, como se ve en este ejemplo.

PLAIN TEXT
HTML:
  1. <nav>
  3. <li><a href="#l">Inicio</a></li>
  4. <li><a href="#">Acerca de</a></li>
  5. <li><a href="#">Contacto</a></li>
  6. </ul>
  7. </nav>

Creo que no hay mucho que hablar sobre este tag ya que es simple su objetivo

Espero les sirva

saludos tuto

]]> http://www.dakoo.cl/html-5-nav/feed/ 0 HTML 5 – section http://www.dakoo.cl/html-5-section/ http://www.dakoo.cl/html-5-section/#comments Wed, 02 Jun 2010 04:26:23 +0000 admin http://www.dakoo.cl/?p=154 Continue reading →]]> Hoy comenzamos con la revisión de la especificación html 5 y en esta ocasión nos centraremos en el tag section.

Este elemento se utiliza para darle una nueva estructura al código, por ejemplo en este código se ve una estructura de html 5 con varios nuevos elementos

PLAIN TEXT
HTML:
  1. <header>
  2.   <p>Cabecera</p>
  3. </header>
  4. <nav>
  5.   <p>Menu de navegacion</p>
  6. </nav>
  7. <section>
  8.   <p>Seccion</p>
  9.     <article>Articulo</article>
  10. </section>
  11. <footer>
  12.   <p>Pie de pagina</p>
  13. </footer>

Si nos damos cuenta la estructura es más fácil de entender ya que los nuevos elementos le dan una estructura definida y una forma que al solo leer los elementos involucrados se saben las partes que están dentro del sitio.
En cuanto al tag section viene unido a acción de ordenar semánticamente el código, ojo que no viene a sustituir los div, ya que si lo que se busca es dar estilos al código para por ejemplo utilizar efectos javascript conviene tener divs y no section o articles.
En esta página encontré un resumen super bueno de lo que no se debe hacer al usar el tag section y la voy a traducir.

  • No use section cuando quieras utilizarlo para dar estilos o ejecutar scripting
  • No lo use si los tag nav, articles o aside es más apropiado
  • No lo uses si a continuación de abrir la etiqueta no viene un título

En resumen un interesantenuevo tag con el que se pueden construir sitios más semanticamente correctos.

Espero les sirva

saludos tuto

]]> http://www.dakoo.cl/html-5-section/feed/ 2 HTML 5 http://www.dakoo.cl/html-5/ http://www.dakoo.cl/html-5/#comments Tue, 01 Jun 2010 02:24:37 +0000 admin http://www.dakoo.cl/?p=149 Continue reading →]]> La del tìtulo es una palabra que ultimamente está muy famosa, si no me creen dense una vuelta por twitter o alguna otra red social y se darán cuenta que desde que los navegadores comenzaron a soportar esta nueva versión del lenguaje de etiquetas que da forma a nuestra querida Web, esta misma se revolucionó con todas las nuevas alternativas y las cosas que se podían lograr. Esto unido al hecho de que CSS3 también apareció en acción hace muy poco, hace que las alternativas de crear sitios más complejos pero a la vez con mas alternativas de entregar la información de muchas más maneras, motiva a la gente que está detrás de la creación de estas aplicaciones. Es por este motivo que he decidido repasar la mayor parte de la especificación de la W3C sobre HTML 5, me comprometo a hacerlo con ejemplos que dejen más claro el uso de cada uno de los nuevos elementos y también trataré de introducir un poco de css3 y javascript para que vean algunas de las cosas que se pueden lograr.
Espero mañana tener el primer review

saludos tuto

]]> http://www.dakoo.cl/html-5/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 Continue reading →]]> 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 Continue reading →]]> 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 Continue reading →]]> 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