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

elRTE es un editor WYSIWYG open source desarrollado con jQuery UI que nos permite disponer de un editor enriquecido muy fácil de implementar en nuestros sitios web.

(Ver Imagen)

Características:

• Uso avanzado de estilos CSS
  • Usado para identaciones
  • Usado para controlar bordes
  • En la mayoría de propiedades de los elementos usados.
• Ligero, rápifo y fácil de integrar
• Apariencia del interfaz configurable mediante CSS
• i18n. Fácilmente idiomatizable.
• Flexible para extender mediante plugins.

Existen muchos editores similares, y muchos respetan la accesibilidad web este es otro más a tener en cuenta.

En mi twitter he publicado estos enlaces que creo os pueden interesar.

• http://bit.ly/ci9s28 <– Prevenir el #clickjacking con #Javascript (via @unijimpe) #
• http://bit.ly/bnwPja <– ¿Por que comprimir el #javascript / #CSS Mejor conviertelo a PNG y cárgalo con #canvas #impresionante #
• http://bit.ly/bHDsBd <– Comprimir #javascript y #CSS a #PNG y cargarlo con #canvas (Ejemplos: http://bit.ly/c7muca) #
• http://bit.ly/9Siyrq <– Cambios en el menú de Firefox4 (via @paulrouget ) #
• http://bit.ly/d81HNM <– La tabla periódica de los elementos #HTML5 😀 #
• http://bit.ly/awoNui <– Modernist, un theme minimal para tu #wordress (via @rodrigogalindez) #
• http://bit.ly/aa1hFi <– Esto es una muestra de las maravillas que la gente está enviando al 10K Apart #
• http://bit.ly/cpsMOm <– #CSS3 no es #HTML5 #
• http://bit.ly/9ZlTUa <– Anthologize, convierte tu #wordpress a libro electrónico con un simple #plugin #
• http://bit.ly/csWD37 <– Crea aplicaciones #facebook con #codeigniter #
• http://kcy.me/15l <– AngularJS, aplicaciones complejas fáciles. No me gustan este tipo de frameworks con attr no válidos, pero son opciones #
• http://kcy.me/173 <– Las mejores #extensiones para #chrome que un desarrollador web puede necesitar #
• http://kcy.me/175 <– dualSlider, por que conformarte con slider si puedes tener 2? #jquery #plugin #
• http://kcy.me/184 <– Colección de #herramientas para desarrolladores web en diferentes lenguajes #
• http://kcy.me/1ca <– #Gmail ya permite arrastrar los adjuntos directamente a tu escritorio!! #
• http://kcy.me/1ec <– #jQuery xcolor, excelente #plugin con el que manipular #colores fácilmente #
• http://bit.ly/ccMssT <– Galactic inbox, un juego #HTML5 😀 #

Saludos

Seanmonstar está desarrollando un framework basado en el modelo MVC llamado MonstarLab-MVC cuyo mayor atractivo es que está desarrollado en MooTools y pensado para crear aplicaciones ricas en el navegador del usuario.

Modelo

 var Recipe = new Class({
            Extends: Model.Ajax,
            fields: {
                    id: Model.Fields.AutoField(),
                    title: Model.Fields.TextField({ length: 64, required: true}),
                    ingredients: Model.Fields.TextField()
            }
    });

Con el modelo podremos usar todos los tipos de almacenamiento disponibles (SQL, Ajax, XML, File, Storage,…)

Controlador

 var RecipesController = new Class({
            list: function(recipes) {
                    $(this).set('html', this.view({ recipes: recipes }));
            }

            events: {
                    load: function() {
                            Recipe.findAll(this.list.bind(this));
                    },
                    'click:relay(.recipe .delete)': function(e) {
                        e.preventDefault();
                        var recipeView = $(e.target).getParent('.recipe');
                        recipeView.model().destroy(function() {
                            recipeView.destroy();
                        });
                    }
            }
    });

El controlador se encargará de manejar los datos obtenidos desde el modelo.

Vista

<ul id="RecipesList">
        <% recipes.each(function(r) { %>
        <li class="recipe <%=r.identity()%>">
                <h3><%=r.get(title)%></h3>
                <%= view('recipes/ingredients', r.get('ingredients')); %>
                <a href="#" class="delete">Delete</a>
        </li>
        <% }); %>
</ul>

La vista, muy similar a la de las páginas ASP nos permite separar las plantillas de la lógica de negocio.

Interesante proyecto al que seguir detenidamente

gMail ha añadido la funcionalidad de permitir arrastrar ficheros de nuestras páginas web directamente al escritorio. Esta funcionalidad, inversa a la que hace unos meses publicaron y que puso en relieve el apoyo de Google al HTML5 y las nuevas funcionalidades javascript. La gente de CSS Ninja ha publicado un artículo explicando como conseguirlo nosotros mismos en nuestras páginas web.

HTML

<a href="Eadui.ttf" id="dragout" draggable="true" data-downloadurl="
             application/octet-stream
             :Eadui.ttf
             :http://thecssninja.com/gmail_dragout/Eadui.ttf">Font file</a> 

Como vemos el elemento <a /> se encarga de informar de que el elemento es draggable y además informamos el atributo data- para informar los datos necesarios para la descarga.

Javascript

var files = document.getElementById("dragout"), fileDetail;

if(typeof file.dataset === "undefined") {
	fileDetail = file.getAttribute("data-downloadurl");
} else {
	fileDetail = file.dataset.downloadurl;
}

file.addEventListener("dragstart",function(evt){
	evt.dataTransfer.setData("DownloadURL",fileDetail);
},false);

Si el navegador soporta los atributos data- cogeremos los datos necesarios informados en el HTML anterior, para posteriormente añadirlo al evento dragstart y simular la descarga del fichero con los datos anteriores. Solo apto para navegadores adaptados a las nuevas funcionalidades HTML5. Fácil, simple y potente 😀

Una de las características de WordPress desde casi sus comienzos es la capacidad de publicar artículos de forma remota. Inicialmente se introdujo la posibilidad de usar una dirección de correo a la que los artículos llegarían y automáticamente estos se publicarían.

Después, con la llegada del protocolo XML-RPC, se añadió la opción de recibir peticiones mediante él y extender así las opciones de los clientes externos para publicar remotamente. Ahora, unos años después, la API es bastante completa y nos permite generar un interfaz remoto, ya sea en nuestro escritorio (Windows/Linux/Mac) o incluso nuestro navegador, para administrar nuestro blog sin necesidad de acceder al panel administrador.

5ubliminal.com publica un pequeño artículo sobre las opciones más interesantes del API, que nos puede servir de guía si nos interesa esta funcionalidad o necesitamos extender la forma de acceder a nuestro blog.

El cambio de favicon de Google Calendar ha hecho que Danny Hope se pregunte si se podría hacer que el favicon mostrara la fecha actual en lugar del 31 que está mostrando ahora mismo.

Remy Sharp a modo de investigación personal se propuso conseguirlo, y tras unas cuantas pruebas logró generar un favicon dinámico usando <canvas /> y javascript para mostrar la fecha actual en lugar del estático 31.

(Ver Imagen)

Para ello, limpió el icono de Google dejando espacio para que los números cambien en función del día, unas pocas líneas de código y voala!

¿Como?

Como ya conocemos, la llamada para informar un favicon en cualquier página web:

<link id="favicon" rel="icon" type="image/png" href="ical-icon-complete.png" />

Marco en negrita el ID que ha indicado para localizar el elemento más fácilmente en el código Javascript.

(function () {
var canvas = document.createElement('canvas'),
    ctx,
    img = document.createElement('img'),
    link = document.getElementById('favicon').cloneNode(true),
    day = (new Date).getDate() + '';

if (canvas.getContext) {
  canvas.height = canvas.width = 16; // set the size
  ctx = canvas.getContext('2d');
  img.onload = function () { // once the image has loaded
    ctx.drawImage(this, 0, 0);
    ctx.font = 'bold 10px "helvetica", sans-serif';
    ctx.fillStyle = '#F0EEDD';
    if (day.length == 1) day = '0' + day;
    ctx.fillText(day, 2, 12);
    link.href = canvas.toDataURL('image/png');
    document.body.appendChild(link);
  };
  img.src = 'ical-icon.png';
}

})();

El código javascript, como podemos ver se encarga de generar un nuevo elemento <img /> en el que alojaremos la información creada con el elemento <canvas /> con el día incrustado dentro. Simplemente genial.

Como curiosidad me pareció muy interesante ayer la noticia de Nihilogic en la que nos mostraba la posibilidad de comprimir ficheros Javascript o CSS en una imagen PNG para luego cargarla mediante Canvas y así poder disponer del código comprimido anteriormente.

La idea, aunque interesante, no me parece factible para la vida real. Principalmente por que no me imagino depurando el código Javascript mirando un fichero PNG, pero para hacer pruebas es altamente atractivo.

(Ver Imagen)

(jQuery convertido a PNG :D)

La idea

Ya hemos visto otras formas de minimizar el tiempo de carga de nuestros ficheros Javascript o CSS, y esta no es muy diferente. Básicamente las dos se basan en evaluar el código de nuevo directamente en el navegador como texto, para ello se usa eval(), lo único que veremos cambiar será la forma de recoger el código.

var x = function(z, m, ix ) { // image, callback, chunk index
  var o = new Image();
  o.onload = function() {
    var s = "",
        c = d.createElement("canvas"),
        t = c.getContext("2d"),
        w = o.width,
        h = o.height;
    c.width = c.style.width = w;
    c.height = c.style.height = h;
    t.drawImage(o, 0, 0);
    var b = t.getImageData( 0, 0, w, h ).data;
    for(var i= 0; i <b.length; i += 4) {
      if( b[i]> 0 )
        s += String.fromCharCode(b[i]);
    }
    m(s, ix);
  }
  o.src = z;
}

Este código se encargará de leer mediante un elemento <canvas /> una imagen que le pasaremos como parámetro. Se encargará de cargar byte a byte para obtener el texto completo de nuestro javascript. Posteriormente lo evaluaremos y dispondremos del código disponible en nuestra página.

¿Como se crean esas PNG’s?

La creación de estas imágenes es bastante sencilla, simplemente tendremos que leer el texto que deseamos convertir a PNG y generaremos una imagen pixel a pixel con el valor de cada carácter.

def string2png( string, output )
  image = Magick::Image.new 1,string.length
  for i in 0 .. string.length
    color = '#%02X0000' % string[i]
    pixel = Magick::Pixel.from_color color
    image.pixel_color 0, i, pixel
  end
  image.compression = ZipCompression
  image.write("png8:"+ output)

  image = nil
end

En este código en Ruby vemos que después de leer el código lo recorremos letra a letra y vamos generando un pixel de un color diferente (dependiendo de la letra que estemos procesando). Ver el código completo.

¿Por que usar esto?

Personalmente no lo usaría para un uso real, pero la reducción de peso de ficheros en las pruebas realizadas con Javascript han sido bastante interesantes:
prototype-1.6.0.2.js
123 KB Javascript compressed to 30 KB PNG (24%)
jquery-1.2.3.min.js
53 KB Javascript compressed to 17 KB PNG (32%)
excanvas.js
24 KB Javascript compressed to 8 KB PNG (33%)
excanvas-compressed.js
10 KB Javascript compressed to 5 KB PNG (50%)
dijit.js
46 KB Javascript compressed to 16 KB PNG (35%)

Aunque son valores interesantes, las pruebas hechas con digit-all.js en la misma página de Nihilogic reflejan que para cargar los 70Kb comprimidos en PNG (255Kb sin comprimir) necesita cerca de 5-6 segundos en evaluarlo. Periodo que el navegador se queda prácticamente parado.
Por otro lado, navegador como IE6 no soportan el elemento canvas nativamente, lo que nos limita su uso prácticamente en la mayoría de sitios web.

Conclusiones

Como curiosidad está la mar de bien, incluso para demostrar lo que se puede hacer con ingenio y las herramientas que ofrece HTML5. Pero nada más, gZip ofrece una reducción interesante además lo incorporan la mayoría de navegadores.
Via

En mi twitter he publicado estos enlaces que creo os pueden interesar.

• http://mzl.la/bgoX28 <– Animaciones #javascript más rápida en #Firefox4 #
• http://bit.ly/arVkBX <– Extendiendo #HTML5 con #microformatos #
• http://bit.ly/8WWNyr <– Testing Mobile JavaScript (RT @epplestun ) #
• http://bit.ly/anXJiY <– Plasma Tree, experimiento #canvas realmente espectacular #html5 #
• http://bit.ly/9AEQIk <– Dominando 960, el framework #CSS #
• http://bit.ly/aZqVNF <– No esperar a $(document).ready() en #jquery nos dará unos milisegundos #
• http://bit.ly/aiHXXf <– PaintBrushJS, aplica #efectos a tus imágenes con #javascript #
• http://bit.ly/caZwkG <– jQuery.html5form(), añade la funcionalidad #HTML5 de validación de formularios a navegador que no lo tengan #jquery #
• http://bit.ly/cbgbVa <– Crea un mapa clickable completamente accesible con #CSS y #jQuery #interesante #
• http://bit.ly/aO5dHs <– Polymaps, librería #javascript para hacer dinámicos nuestros #mapas en navegadores modernos. #

Saludos