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

Via Ajaxian, descubro Deploy*, una aplicación web que nos permite crear instalaciones base para iniciar nuestros proyectos. Mediante una pequeña selección de opciones disponibles, podemos crear un zip con la estructura de directorios, los ficheros Javascript y un index.php listo para iniciar el desarrollo de nuestra aplicación web.

Además, si nos gusta la idea, podemos descargar el código fuente y adaptarlo a nuestras necesidades.

Hace más de un año que iMeneame vió la luz, la versión para el iPhone de Meneame.net (versión no oficial) ha tenido que aguantar con un diseño realmente horrible (evidentemente mio) hasta que me he topado con Lucas Savelli de WydStudio.

Gracias a Lucas, iMeneame ha adquirido un aspecto más moderno y más eficiente para el dispositivo que fue creado. Debido a que el contenido lo saco del RSS de Meneame me veo condicionado a lo que este formato nos devuelve, las limitaciones del XSL tampoco han ayudado mucho, pero creo que el resultado es más que satisfactorio apesar de las salvedades encontradas.

Espero que os guste, y me comuniqueis todos los fallos e impresiones.

Cuando desarrollamos una aplicación, generalmente trabajamos, inicialmente en local con unos datos para conectar a la base datos, unos ficheros con datos, unas rutas diferentes,… y esto suele provocar ediciones de fichero para que al subirlo a producción (al servidor online) no provoquen un error.

Una solución sencilla que podemos usar es la siguiente:

<?php
    // Nombre del fichero 
    $configfile = $_SERVER["SERVER_NAME"].".php";

    // Cargamos el fichero
    if (file_exists($configfile)) require $configfile;
    else die("Fichero ".$configfile." no existe");

?>

De esta forma podemos tener 2 ficheros con los datos necesarios para conectar en ambas bases de datos, con las rutas correctas para cada servidor,… completamente independientes. En mi caso, los ficheros son:

1. localhost.php
2. www.anieto2k.com.php

Automáticamente al entrar en la aplicación, comprobaremos $_SERVER["SERVER_NAME"] y cargaremos el fichero que sea oportuno.

Es una tontería, pero yo estuve mucho tiempo modificando los ficheros antes de subirlos y volviendo a modificarlos al volver a descargarlos 😀

El uso de frameworks Javascript aporta muchas ventajas al desarrollo web, facilidad de uso, estandarización, cross-browsing, … pero estas ventajas nos hacer perder el control y el conocimiento del código, sin contar con la carga de funcionalidades extras que no llegamos a usar.

Por estos motivos, llevo ya tiempo pensando en montar un framework Javascript que cubra mis necesidades, algo ligero y completo que me permita tener el completo control sobre el javascript que desarrollo.

Franki.js

Vamos a ver como montar tu propio framework javascript, montando las funciones básicas para posteriormente ir añadiendo las que necesitemos sin alterar el resto del framework.

Franki.js es un nombre que creo le viene que ni pintado, ya que nos vamos a nutrir de trozos de otros scripts con los que montaremos nuestra criatura. Nos sentiremos con el Dr. Frankenstein creando a su criatura 😀

var franki = {
   .. opciones ..
};

Extendiendo

La clave de los frameworks Javascript es sin duda la capacidad de extender elementos y así añadir nuevas funcionalidades a los elementos DOM con los que generalmente trabajamos. La función que es capaz de extender cualquier elemento es realmente sencilla, pero a la vez realmente poderosa.

extend: function(el, opt){
        for (var name in opt) el[name] = opt[name];
        return el;
 },
// Ejemplo
franki.extend(document.getElementById("logo"), {option: 'nueva propiedad'});

Como podemos ver, esta función recibe 2 parámetros, el elemento  que queremos extender y las opciones que queremos añadir a dicho elemento.

Recogiendo elementos

La función que usamos más en nuestros scripts es sin duda document.getElementById(); y evidentemente tenemos que reducir el número de letras que hemos de teclear para obtener un elemento pasándole un ID.

get: function(id){
        return franki.extend(document.getElementById(id), franki);
},
// Ejemplo
franki.get("logo);

Aprovechando que ya disponemos de extend() devolvemos el elemento extendido con las propiedades que franki.js va a incorporar.

Esta función no hace nada especial, aunque puede extenderse fácilmente con todas las posibilidades que javascript nos ofrece.

Creando e Insercción de Elementos

La creación de elementos DOM es otra funcionalidad que usamos considerablemente en nuestros scripts, por lo que es realmente necesario enmascarar la función document.createElement();

 create: function(type){
        return franki.extend(document.createElement(type), franki);
  },
// Ejemplo
var newDiv = franki.create("div");

insert: function(what) {
        return this.appendChild(what);
},
// Ejemplo
franki.get("logo).insert(newDiv);

Seguimos devolviendo el elemento extendido con las propiedades que poco a poco a ir haciendo crecer.

Atributos y Estilos

Los elementos que hemos extendido, necesitan tener la capacidad de devolver y modificar los atributos y estilos que los componen, para ello crearemos 2 funciones más.

css: function(name, value) {
        if (!value) return this.style[name];
        this.style[name] = value;
        return this;
},
// Ejemplo
var oldBorder = franki.get("logo").css("border");
franki.get("logo").css("border", "1px red solid");

attr: function(name, value) {
        if (!value) return this.getAttribute(name);
        this.setAttribute(name, value);
        return this;
},
// Ejemplo
var oldSrc = franki.get("logo").attr("src");
franki.get("logo").attr("src", "NUEVO_SRC");

Como vemos, disponemos de 2 nuevas propiedades que automáticamente se añadirán a los elementos con los que trabajemos.

Gestión de eventos

Los eventos asociados a los elementos es algo que por comodidad y por compatibilidad con navegadores podemos aprovechar para incluir en nuestro framework.

 addEvent: function(type, fn ) {
      if ( this.attachEvent ) {
        this['e'+type+fn] = fn;
        this[type+fn] = function(){this['e'+type+fn]( window.event );}
        this.attachEvent( 'on'+type, this[type+fn] );
      } else
        this.addEventListener( type, fn, false );
return this;
    },
// Ejemplo
franki.get("logo").addEvent("click", function(){ alert("Click");});

removeEvent: function(type, fn ) {
      if ( this.detachEvent ) {
        this.detachEvent( 'on'+type, this[type+fn] );
        this[type+fn] = null;
      } else
        this.removeEventListener( type, fn, false );
return this;
    },
// Ejemplo
franki.get("logo").removeEvent("click", function(){ alert("Click");});

Estas funciones, sacadas de este post de John Resig, nos sirven para poder trabajar perfectamente con nuestros elementos, aunque podríamos optar por la última revisión de Incoherence Babble.

Encadenamiento

Algo que siempre me ha gustado de los frameworks javascript actuales es la posibilidad de encadenar funcionalidades en la misma línea. Esto además de ayudarte a reducir el peso de nuestros scripts ayuda (a mi por lo menos) a ver más claro el código que estas escribiendo.

La clave de nuestro framework para poder encadenar funcionalidades es SIEMPRE devolver el elemento con el que estamos trabajando. Si nos fijamos en las funciones anteriores, nos devuelven el elemento que estamos usando. De esta forma podemos conseguir cosas como estas.

franki.get("logo").css("border", "2px red solid").addEvent("mouseover", function(){alert("MouseOver");});

Últimos retoques

Necesitamos un alias para evitar la llamada franki.get(), que es la base del framework. Por ello podemos optar por el famoso $(), o cualquier otra combinación que nos guste o nos vaya bien.

window.get = el.get;
get("logo").css("border", "2px red solid");

Aclaraciones

Las funciones son muy básicas y únicamente son para que sirvan de ejemplo de por donde empezar a construir tu propio framework, las posibilidades de extensión son infinitas.

El código

Veamos como quedaría todo juntito 😀

var franki = {
    get: function(id){
        return franki.extend(document.getElementById(id), franki);
    },
    extend: function(el, opt){
        for (var name in opt) el[name] = opt[name];
        return el;
    },
    create: function(type){
        return this.extend(document.createElement(type));
    },
    insert: function(what) {
        return this.appendChild(what);
    },
    css: function(name, value) {
        if (!value) return this.style[name];
        this.style[name] = value;
        return this;
    },
    attr: function(name, value) {
        if (!value) return this.getAttribute(name);
        this.setAttribute(name, value);
        return this;
    },
    addEvent: function(type, fn ) {
      if ( this.attachEvent ) {
        this['e'+type+fn] = fn;
        this[type+fn] = function(){this['e'+type+fn]( window.event );}
        this.attachEvent( 'on'+type, this[type+fn] );
      } else
        this.addEventListener( type, fn, false );
    return this;
    },
    removeEvent: function(type, fn ) {
      if ( this.detachEvent ) {
        this.detachEvent( 'on'+type, this[type+fn] );
        this[type+fn] = null;
      } else
        this.removeEventListener( type, fn, false );
    return this;
    }
};
// Alias
window.$ = franki.get;

Promoción

¿Has usado este post para crear tu propio framework? Pues usalo tambien para promocionarlo, usa los comentarios, evitar pegar el código, mejor usar un enlace algún lugar donde ver el código/ejemplos/tutoriales/…

Mejoras

Jose nos comenta el problema que puede provocar que franki disponga de métodos públicos a los que podrían acceder externamente provocando errores al acceder al elemento this.

franki.css("border", "1px red solid");
// --> Error

Este ejemplo nos arrojaría un error al detectar que this (franki) no dispone de las propiedades própias de un HTMLElement, por ese momento Jose nos propone un sistema para sacar lo métodos de franki, haciéndolos privados e innaccesibles desde fuera.

var franki = (function(){
    var metodosExtendidos = {
    get: function(id){
        return franki.extend(document.getElementById(id), franki);
    },
    extend: function(el, opt){
        for (var name in opt) el[name] = opt[name];
        return el;
    },
    create: function(type){
        return this.extend(document.createElemen(type));
    },
    insert: function(what) {
        return this.appendChild(what);
    },
    css: function(name, value) {
        if (!value) return this.style[name];
        this.style[name] = value;
        return this;
    },
    attr: function(name, value) {
        if (!value) return this.getAttribute(name);
        this.setAttribute(name, value);
        return this;
    },
    addEvent: function(type, fn ) {
      if ( this.attachEvent ) {
        this['e'+type+fn] = fn;
        var oThis = this;
        this[type+fn] = function(){oThis['e'+type+fn]( window.event );}
        this.attachEvent( 'on'+type, this[type+fn] );
      } else
        this.addEventListener( type, fn, false );
    return this;
    },
    removeEvent: function(type, fn ) {
      if ( this.detachEvent ) {
        this.detachEvent( 'on'+type, this[type+fn] );
        this[type+fn] = null;
      } else
        this.removeEventListener( type, fn, false );
    return this;
    }
};

    return {
       extend: function(el, opt){
         for (var name in opt) el[name] = opt[name];
         return el;
       },
       get: function(id){
               return franki.extend(document.getElementById(id), metodosExtendidos);
       }
    };
}());

Como podemos ver la variable metodosExtendidos se convierte en privada y es la usada en la función get() para extender el elemento que queremos usar.

Gracias Jose por la corrección, no había pensado en esa posibilidad.

El fin de semana es dificil dedicarle algo de tiempo a cualquier cosa, entre comidas con la familia y cenas con los amigos, queda poco tiempo para teclear. Pero estar alejado del PC da lugar a las mejores ideas, así que he aprovechado y he ido recopilando unas cuantas de estas ideas para CommentsFeeds.

1) Usando los servidores de Google

He creado un proyecto en Google Code, en el que he alojado el fichero commentfeeds.js que cargamos desde nuestro marcador para así disponer de un buen server donde tener alojado el script, y así disponer de una carga más rápida.

Esto nos obliga cambiar el enlace anterior a esto:

javascript:(function(s){s.type='text/javascript';s.src='http://commentfeed.googlecode.com/files/commentfeed.js?rand='+Math.random();document.getElementsByTagName('head')[0].appendChild(s)})(document.createElement('script'));

El enlace antíguo lo eliminaré el miercoles, así que si alguien le falla apartir de ese día, deberá cambiar el «Marcador fantasma» por el mostrado anteriormente.

También he usado Google Ajax Libraries, en que alojan los principales frameworks JS en los servidores de Google haciendo la carga más rápida.

2) Eliminando el CSS

En la fase anterior, usabamos un fichero CSS para colocar los elementos dentro de Google Reader. Ahora los aplico mediante Javascript evitando ese tiempo de demora para cargar el fichero.

Bueno, espero tener algo listo a final de semana, pero no quiero adelantar nada. Depende del tiempo libre que tenga. Saludos y gracias por el feedback que me estais reportando.

Bueno, ante todo, quiero dar las gracias a todos los que con sus pruebas me han ayudado a solucionar un par de problemas y a plantearme las cosas de una forma diferente. Esta tarde he podido dedicarle un poco de tiempo y he podido hacer alguna modificación a lo que os mostré ayer, os las enumero una a una.

1) Comentarios

Evidentemente, el no ver los comentarios previos podría suponer problemas para algunos casos, como bien comenta _SxR_ en su comentario.

Para ello he añadido los comentario relacionados al post, necesita un poco de diseño pero ahora lo importante es la funcionalidad.

2) Diferencia entre «Expanded View» y «List View».

Google Reader, permite usar 2 diferentes formas para visualizar los feeds, la «Expanded List» que nos presenta los artículo abiertos y a medida que vamos haciendo scroll hacia abajo,  nos va seleccionando el post que se encuentre en el centro.

Por otro lado, tenemos «List View», que nos muestra las entradas cerradas, mostrando únicamente el título y al hacer click sobre él, nos abre el artículo dejando los demás cerrados.

Dependiendo del modo usado, la funcionalidad puede ser diferente.

a) Expanded View

Una vez cargado el script, haciendo click sobre el artículo haremos aparecer la opción de «Comenta».

b) List View

Para este modo, y realmente para cualquiera, he hecho que el testigo que vemos justo arriba, al lado del motor de busqueda, sea un enlace que al hacer click sobre él, nos mostrará la opción de «Comenta».

Posibles problemas

Al tratarse de un fichero JS, puede verse afectado por algún tipo de caché y no disponer de alguna de las mejoras. Podemos hacer 3 cosas:

1. Armarnos de paciencia y esperar a que se recarge por si solo.

2. Acceder al enlace siguiente y recargar la página para así hacer una recarga nueva del fichero.

https://www.anieto2k.com/demo/commentfeed/commentfeed.js

3. Añadir al final del enlace del Marcador (Math.random()) dejando el marcado así:

javascript:(function(s){s.type='text/javascript';s.src='https://www.anieto2k.com/demo/commentfeed/commentfeed.js?rand='+Math.random(); document.getElementsByTagName('head')[0].appendChild(s)})(document.createElement('script'));

Gracias de nuevo a todos los que me están ayudando con sus ideas, consejos y sugerencias.

Los chicos de CSS-Trick nos muestran un tutorial de como conseguir mostrar los comentarios de cada entrada de una forma bastante elegante y original.

Como podeis ver, hay mucho CSS por delánte. Usando los iconos de calendario de Sotak, y mucho códugo CSS podremos conseguir el mismo efecto de la imagen. Un complemento perfecto para aquel calendario que pusimo hace más de 2 años 😀

Hace unos días estuve testeando librerías JS para mostrar gráficas. Realmente he encontrado librerías geniales, pero protoChart ha sido la que más me ha gustado. Para hacer pruebas, estuve usando datos de aNieto2k, y así de paso veía estadísticas del blog de una forma rápida y clara.

He preparado un zip con el que podreis mostrar vuestras estadísticas de la misma forma. En principio, únicamente mostraría estadísticas relacionadas con los posts, comentarios y pingbacks, comparativas con años anteriores, … y si tienes StatPress tendrás además estadísticas de visitas por horas del día actual y del día anterior, además de las visitas del mes (para ello tendremos que tener la opción de 30 días activada en el plugin).

Modificaciones

Para hacer las pruebas creé una clase a la que le podemos pasar una sentencia SQL con la que poder obtener datos X e Y y componer una gráfica.

var posts = [<?=$stat->getResults('line', "SELECT count(post_date) as data, DAY(post_date) as label FROM ".$wpdb->posts." WHERE MONTH(post_date) = ".$month." and YEAR(post_date) = $year AND post_parent = ''  GROUP BY 2 ORDER BY 2 ASC;")?>];

Simplemente hemos de respetar los valores que devolvemos con nuestra SQL. Los nombre data y label deben mantenerse ya que serán usados para mostrar leer los resultados.

Para añadir un nuevo campo a las estadísticas deberemos añadir el elemento HTML nuevo y las líneas necesarias del JS al final del fichero.

// HTML
<h2>Comparativa de comentarios por meses del año (<?=$year?>)</h2>
<div id="commentYear" style="width:100%; height:300px"></div>

// Javascript
var results1 = [<?=$stat->getResults('line', "SQL1")?>];
var results2 = [<?=$stat->getResults('line', "SQL2")?>];
new Proto.Chart($('commentYear'),
[
    {data: results1, label: "Resultados de SQL1"},
    {data: results2, label: "Resultados de SQL2"}
],
{
	xaxis: {min: 1, max: 31, tickSize: 1, tickDecimals: 0},
	lines: {show: true, fill: true},
	points: {show: true},
	legend: {show: true}
});

Tambien podemos hacer uso de gráficas de «quesitos», para ello pasaremos el parámetro ‘pie’ a la método getResults() de la clase stats.

// HTML
<h2>Navegadores de los usuarios (StatPress)</h2>
<div id="navegadores" style="width:100%; height:300px"></div>

// Javascript
new Proto.Chart($('navegadores'),
[
    <?=$stat->getResults('pie', $sql)?>
],
{
	pies: {show: true, autoScale: true},
	legend: {show: true}
});

Hay una infinidad de opciones para hacer tus gráficos más profesionales.

Instalación

1. Descargamos el ficheros
2. Descomprimimos y subimos a la raiz de nuestro WordPress.
3. Accedemos a la ruta http://tublog/stats.php

Descargar

El fichero se compone de:

• stats.php
• js/prototype.js
• js/protochart.js
• js/excanvas.js // Para Internet Explorer 6

[Descargar] [Ejemplo]

Hagamos un recuento de datos de los proyectos:

GeekTest

• 1.200 usuarios de media, se ponen a prueba cada día.
• 1.436 preguntas insertadas en 137 días funcionando, lo que da una media de 10,4 preguntas enviadas por día (solo las aceptadas).
• Aproximadamente una media de 1-3 preguntas son eliminadas cada día por quejas de los usuarios.

Ir a la aplicación

WpAdminThemes

• 147 usuarios registrados
• 91 themes creados y disponibles para descargar
• 110 días de funcionamiento

Ir a la aplicación

iMeneame

• 800 usuarios cada día visualizan esta versión no oficial de Meneame para iPhone.
• El 45% usa Internet Explorer como navegador principal.
• El 23% tiene una resolución de pantalla inferior a 800×600

Ir a la aplicación

Themes en Castellano

• Aproximadamente 200 themes completamente en castellano
• 700 usuario cada día descargan algún theme
• Todo gracias a Fernando Tellado y demás usuarios por su inestimable ayuda

Ir a la aplicación

BlogoEdad

• 2218 usuarios registrados
• Una media de 1500 usuarios lo visitan cada día
• Una media de 3 usuarios al mes son eliminados por irregularidades en el registro.
• El 27 de Octubre es el día que más bloggers han nacido
• La media de edad es de 25 años (somos unos yogurines :D)

Ir a la aplicación

Gracias a todos por hacer posible este sueño 😉