aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Llevo un día de esos que todos tenemos más de una vez a la semana (osea es3 concentrado). Así, que unas cosillas que quería publicar se quedan en una lista de links interesantes.

1. 16 librerías javascript para visualizar datos:  para todos los gustos y colores
2. jQuery Lessons (Selectors) por Woorkup: Antonio comienza una interesante serie de artículos sobre jQuery.
3. Mastering CSS: Getting Start: Explicación muy detallada (como solo Smashing Magazine son capaces de hacer)
4. Propuesta HTML5 (iTextlist): Interesante propuesta para incluir subtítulos a los tags <video /> de HTML5.
5. Google Chrome ejecutando código nativo de Windows: ¿Otro ataque directo a Microsoft?
6. QueryLoader: Precarga de tu pagina antes de mostrarla (me parece una tontería curiosa).

Aprovecho para explicar el bajo ritmo de publicación de los últimos meses.

Se ha juntado un incremento de trabajo en el curro, estamos cerrando unos proyectos y eso siempre requiere el 150% de la capacidad de cualquiera. Por otro lado, en casa estoy con un proyecto en el que estoy poniendo mucha ilusión pero poco tiempo (por eso se está alargando tanto) y la suma de estas dos variables hacen que cuando tengo unos minutos para publicar no me encuentre inspirado ni con ganas de contar nada, por ese motivo envio los enlaces via Twitter por si a alguien le sirve.

• Mi usuario de Twitter: @aNieto2k
• Solo los links que publico: http://search.twitter.com/search?q=bit.ly+from%3Aanieto2k

Espero poder volver a la normalidad lo más pronto posible. Siento las molestias.

MilkChart, es una librería para MooTools que nos permite generar gráficas de una forma sencilla usando los datos de una tabla de datos del propio HTML.

<script type="text/javascript" src="mootoolsCore.js"></script>
<script type="text/javascript" src="MilkChart.js"></script>

<script type="text/javascript">
    window.addEvent('domready', function() {
        var chart = new MilkChart.Pie(table[, options]);
    })
</script>

<!-- Table structure -->
<table id="chart">
    <thead>
        <tr>
            <th>Column A</th><th>Column B</th><th>Column C</th><th>Column D</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>8.3</td><td>70</td><td>10.3</td><td>100</td></tr>
        <tr><td>8.6</td><td>65</td><td>10.3</td><td>125</td></tr>
        <tr><td>8.8</td><td>63</td><td>10.2</td><td>106</td></tr>
        <tr><td>10.5</td><td>72</td><td>16.4</td><td>162</td></tr>
        <tr><td>11.1</td><td>80</td><td>22.6</td><td>89</td></tr>

    </tbody>
    <tfoot>
        <tr>
            <td>Row 1</td><td>Row 2</td><td>Row 3</td><td>Row 4</td><td>Row 5</td>
        </tr>
    </tfoot>
</table>

Para obtener una gráfica que permita hacer más visual el aspecto de los datos.

(Ver Imagen)

Tipos soportados

La librería, nos permite usar una serie de gráficos con los que visualizar los datos:

• Column
• Bar
• Line
• Scatter
• Pie

// Modo Columna
var chart = new MilkChart.Column(table, [options]);

// Modo Barras
var chart = new MilkChart.Bar(table, [options]);

// Modo línea
var chart = new MilkChart.Line(table, [options]);

// Modo puntos
var chart = new MilkChart.Scatter(table, [options]);

// Modo pastel
var chart = new MilkChart.Pie(table, [options]);

Opciones disponibles

Para parametrizar la salida de datos disponemos de una serie de opciones que nos permiten configurar el aspecto de nuestras gráficas.

• width – (int: Default a 400) Ancho de la gráfica (en px)
• height – (int: Default a 280) Alto de la gráfica (en px)
• padding – (int: Default a 12) Padding (en px)
• font – (string: Default a “Verdana”) Fuente de las etiquetas
• fontColor – (string: Default a #000000) Color de las etiquetas
• fontSize – (int: Default a 10) Tamaño de las etiquetas (en pt)
• background – (string: Default a #ffffff) Color de fondo de la gráfica
• chartLineColor – (string: Default a #333333) Color de las líneas
• chartLineWeight – (int: Default a 1) Ancho de las líneas (en px)
• border – (bool: Default a true) Dibuja un borde a la gráfica
• borderWeight – (int: Default a 1) Tamaño del borde (en px)
• borderColor – (string: Default a #333333) Border color
• titleSize – (int: Default a 18) Tamaño del título (en pt)
• titleFont – (string: Default a “Verdana”) Fuente usada para el título
• titleColor – (string: Default a #000000) Color de la fuente del título
• showRowNames – (bool: Default a true) Muestra los labels de las columnas en los ejes
• showValues – (bool: Default a true) Muestra los valores en los ejex
• showKey – (bool: Default a true) Muestra los valores de las columnas
• useZero – (bool: Default a true) Siempre usa 0 como menos valor
• useFooter – (bool: Default a true) Coge los nombres de las columnas del footer

Descargar

La gente de twitter, nos pone más fácil que nunca la integración de su servicio en nuestras páginas web. Para ello, únicamente tendremos que insertar estos dos archivos Javascript al final de nuestro HTML. En WordPress, debería ir (en casi todos los themes) en el fichero footer.php.

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/USERNAME.json?callback=twitterCallback2&count=5"></script>

Estos ficheros ya tienen toda la funcionalidad necesaria para añadir los últimos tweets, únicamente hemos de especificar el nombre del usuario que queremos mostrar y el número de actualizaciones que queremos mostrar.

Solo nos falta especificar el lugar donde estas actualizaciones se visualizarán, para ello, incluiremos en cualquier lugar de nuestro theme (donde queramos que se vean) estas líneas:

<div id="twitter_div">
 <ul id="twitter_update_list">
 <li>&nbsp;</li>
 </ul>
</div>

Sencillo, cómodo para que cualquiera pueda integrarlo en cualquier aplicación web.

Hace ya un tiempo vimos un sistema para gestionar los errores javascript que nos podemos encontrar en nuestra aplicación, para ello nos complicábamos con el uso de Ajax para hacer llegar el error al servidor.

Existen sistemas más sencillos como este que ví en una presentación de Nicholas C. Zakas:

function log(code, str){
 var img = new Image();
 img.src = log.php?code=' + encodeURIComponent(code) + '&str=' + encodeURIComponent(str);
}
// Uso
log(1,"Esto es un error");

Como podemos ver el sistema es sencillo y muy cómodo de implementar en nuestras aplicaciones.

Gestionando errores en nuestras aplicación

Las aplicaciones Javascript tienden a delegar la gestión de errores al navegador, lo que se traduce en mensajes de notificación y elementos que dejan de funcionar para el usuario.

Un concepto que debemos tener en cuenta es que somos los encargados de hacer saber al usuario que algo ha fallado y que acciones debe realizar para solventar el problema.

Ciclo de vida de un error

(Ver Imagen)

Como vemos en la imagen, de abajo a arriba nos encontramos el ciclo de vida desde que se ejecuta un error hasta que llega al navegador. Partiendo de esta imagen podemos definir una serie de acciones para controlar el error.

try…catch()

El primer nivel para controlar el error nos lo encontramos en nuestro código, ahí es donde definimos una escapatoria a un código que pueda dar error.

try {
 ....
} catch(ex){

 // X == tu código de error
 // ex.message == Mensaje de error devuelto por catch()
 log(X, ex.message); // Guardamos el log() en el servidor
}

window.onerror

En este punto nuestro código ya ha quedado atrás, y el navegador pasa a ejecutar el evento onerror de window. Como el resto de eventos del DOM podemos redefinir la funcionalidad del mismo y controlar un poco más el error producido.

window.onerror = function (msg, url, line){
 log(X, msg);
 return true; // Evitamos llegar al navegador
}

Conclusión

Estas herramientas únicamente nos deben proporcionar una solución a la gestión de errores de nuestras aplicaciones, con ellas podemos ofrecer al usuario alternativas cuando un error interrumpa el normal funcionamiento de nuestra aplicación y además registramos dichos errores para su evaluación posterior con el fin de solventarlos.

Hace unos días me encontré con este artículo que nos muestra como montar un sistema de localización (idiomatización) de nuestro Javascript. Y es que debido a la interacción de nuestro Javascript con el usuario, esta tarea se hace imprescindible si necesitamos acceder a usuarios en diferentes idiomas.

Ejemplo

Partimos de un fichero javascript llamado ({lang}.js) que incluirá la descripción de una serie de constantes con el texto en el idioma {lang} del fichero.

var LOCALIZATION = {
 LANGUAGE: 'GERMAN',
 WARNING: 'Achtung vor dem %s, er ist gefährlich !',
 LOADING: 'Bitte warten, Daten werden geladen',
 WELCOME: 'Hallo %s, wie geht\'s dir ?'
};

En este caso, el idioma es alemán, por lo que el fichero se llamará de.js, y podemos ver la variable LOCALIZATION que dispone de una serie de variables asociadas al texto en ese idioma.

Modo de empleo

Para usar esto en nuestro Javascript únicamente tendremos que usar la función translate() (que veremos más adelante) para obtener el texto traducido.

var translation = translate(LOCALIZATION.WARNING, "Zauberer");
console.log(translation);

Como vemos en el ejemplo, podemos intuir la funcionalidad la función translate().

translate()

(function () {
  if (!window.translate) {
    window.translate = function(){
      var html = [ ];
      var arguments = arguments;
      var format = arguments[0];

      var objIndex = 0;
      var reg = /\%s/;
      var parts = [ ];

      for ( var m = reg.exec(format); m; m = reg.exec(format) ) {
        parts.push(format.substr(0, m[0][0] == "%" ? m.index : m.index+1));
        parts.push("%s");
        format = format.substr(m.index+m[0].length);
      }

      parts.push(format);

      for (var i = 0; i < parts.length; ++i){
          var part = parts[i];

          if (part && part === "%s"){
            var object = arguments[++objIndex];

            if (object === undefined) {
              html.push("%s");
            }else{
              html.push(object);
            };
          }
          else{
            html.push(part);
          }
      }

      return html.join('');
    }
  };
})();

Esta función, nos permite reemplazar valores (%s) dentro de la cadena traducida mediante una serie de parámetros pasados a la función. Muy similar a la funcionalidad que printf() nos proporciona en PHP.