Contenido

WordPress y el Fatal Memory Error

30 ago

+ 5

Uno de los principales problemas de WordPress es el consumo de memoria, este consumo no siempre puede reducirse y poco a poco (versión a versión) parece que la funcionalidad básica va consumiendo más memoria de nuestro sistema. Para intentar reservar más memoria disponible en nuestro sistema la gente de WeblogToolsCollection.com publica un artículo recopilatorio de soluciones al famoso “Fatal error: Allowed memory size of 33554432 bytes exhausted.”

elRTE, editor WYSIWYG open-source a tener en cuenta

30 ago

+ 10

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.

screenshot0
(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.

TwitterWeek – 2010-08-29

29 ago

+ 2

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

Saludos

MonsterLab-MVC, framework MVC desarrollado en MooTools

27 ago

+ 2

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

Arrastra ficheros de tu web al escritorio gracias a Javascript

27 ago

+ 5

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 :D

Comprime CSS y Javascript con YUI Compressor directamente desde Textmate

26 ago

+ 0

Interesante Bundle para TextMate que nos permite comprimir nuestro código CSS y Javascript desde el mismo editor. Con una simple combinación de teclas reduciremos el peso de nuestros ficheros.

Perdiendole el miedo a la API XML-RPC de WordPress

26 ago

+ 3

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.

Favicons dinámicos con canvas

26 ago

+ 4

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.

dynamic-favicon
(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.

Carga Javascript/CSS con canvas en formato PNG

24 ago

+ 11

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.

jquery-1.2.3.min.js
(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

TwitterWeek – 2010-08-22

22 ago

+ 1

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

Saludos