Contenido

[Solucionado] Safari4 y WordPress 2.7

11 mar

+ 6

Hace unos días comentabamos que encontramos unos problemas a la hora de usar nuestro WordPress 2.7 en Safari 4. Más concretamente al insertar Links o imagenes. Bueno pues ya tenemos una solución.

safari4wordpress

Despues de leer que el problema estaba en todas las adaptaciones de TinyMCE y que disponian de una versión devel funcional para este navegador he probado a integrarla en WordPress y así poder trabajar con Safari 4 sin problemas con nuestros WordPress.

Solución

  1. Descargas este fichero
  2. Haz una copia de la carpeta wp-includes/js/tinymce/ a wp-incldes/js/tinymceOLD/
  3. Sin borrar la original (wp-incldes/js/tinymce/) sobreescribe los ficheros con el contenido del fichero descargado.
  4. Ya puedes probarlo en tu panel de administración.

Hazlo tu mismo

  1. Descargar la última versión “devel” de tinyMCE.
  2. Haz una copia de la carpeta wp-incldes/js/tinymce/
  3. Saca el contenido del fichero que acabas descargar, lo que necesitas está en la ruta (tinymce\jscripts\tiny_mce)

safari4wordpress2

Estos son los ficheros que necesitas, copialos sobre la carpeta original en wp-incldes/js/tinymce/. Y listo! :D

FormCheck, valida formularios con MooTools

11 mar

+ 3

FormCheck es una versión muy vistosa para validar formularios usando MooTools. Como ya vimos hace unas semanas, era una de las alternativas para los usuarios de este framework. Si aún teníamos alguna duda para elegirlo quizas estos ejemplos de uso nos puedan ayudar a disipar dudas, y es que la versión 1.4 ofrece una gran cantidad de opciones para la visualización de mensajes.

Mejorando rendimientos de las técnicas de POO en Javascript

10 mar

+ 5

Hace unas semanas vimos el rendimiento que ofrecían las diferentes técnicas que proporcionan la posibilidad de añadir Orientación a Clases a nuestros scripts en Javascript.

En las pruebas realizadas por Broofa, vimos que los resultados daban como ganador al script de John Resig que dejaba a los demás a la altura del betún. Algo sorprendente en tan solo 25 líneas de código.

class_performance_javascript

JotaClass

jDeveloper (o Jota) nos deleitó con jClass2k, una implementación propia que estuvimos puliendo durante unos días para intentar mejorar los resultados obtenidos.

var JotaClass = function(current,previous){
      previous = typeof previous == 'undefined' ? {} : previous.prototype;
      for(p in previous){
            if(typeof current[p] == 'undefined') current[p] = previous[p];
            else if(typeof previous[p] == 'function'){
                  current[p] = (function(tmp){
                                var _parent = function(){
                                    this.parent = _parent.parent;
                                    return tmp.apply(this, arguments);
                                    }
                                    return _parent;
                                })(current[p]);
                current[p].parent = previous[p];
            }
        }
        var construct = function(){
          if(this.init) this.init.apply(this,arguments);
        }
        construct.prototype = current;
        construct.constructor = JotaClass;
        return construct;
    }
//Modo de empleo
var Hobbit = new JotaClass({
		bailar: function(){
			.....
		}
});

var Frodo = new JotaClass({
		anillo: true;
		desaparecer: function(){
			if (this.anillo)
				this.display("none");
		}
	},Hobbit);

JoseanpgClass

En este proceso Jose Antonio Perez (Joseanpg) se añadió para ilustrarnos con su experiencia y ayudarnos a pulir el script y obtener mejores resultados. A partir de ahí, salió otra implementación que podemos ver a continuación.

function makeParent(fn, parent) {
	      return function() {
	         this.parent = parent;
	         return fn.apply(this, arguments);
	      }
  }
var JoseanpgClass = function(current,previous){
   previous = typeof previous == 'undefined' ? {} : previous.prototype;
   for(p in previous)
	 current[p] = (typeof previous[p] == 'function')?makeParent(current[p], previous[p]):previous[p];
   var construct = function(){ if(this.init) this.init.apply(this,arguments);}
   construct.prototype = current;
   construct.constructor = JoseanpgClass;
   return construct;
}
//Modo de empleo
var Hobbit = new JoseanpgClass({
	bailar: function(){
		.....
	}
});

var Frodo = new JoseanpgClass({
	anillo: true;
	desaparecer: function(){
		if (this.anillo)
		this.display("none");
	}
},Hobbit);

Klass

Como me dió envidia, decidí implementar mi propia versión. Basada en el script de John Resig y sacando alguna idea de los scripts anteriores.

var Klass = function(prop) {
        var klass = function(){ if(this.init) this.init.apply(this, arguments);};
        klass.prototype = prop || {};
        klass.constructor = Klass;
        klass.extend = Klass.extend;
        return klass;
};

Klass.extend = function(prop){
	function setParent(fn, parent) {
		      return function() {
		         this.parent = parent;
		         return fn.apply(this, arguments);
		      }
	  }
	function merge(prev, next){
			for (var name in next){
				if (prev[name] && (typeof prev[name] == 'object' && typeof next[name] == 'object'))
					merge(prev[name], next[name]);
				else
					prev[name] = next[name];
			}
		return prev;
	};

      for (var name in this.prototype) {
		if (!prop[name])
			prop[name] = this.prototype[name];
		else if(typeof prop[name] == 'function' && typeof this.prototype[name] == 'function')
          prop[name] = setParent(prop[name], this.prototype[name]);
		else if(typeof prop[name] == 'object' && typeof this.prototype[name] == 'object')
          prop[name] = merge(prop[name], this.prototype[name]);
      }
  return new Klass(prop);
};
//Modo de uso
var Hobbit = Klass({
	bailar: function(){
		.....
	}
});

var Frodo = Hobbit.extend({
	anillo: true;
	desaparecer: function(){
	    if (this.anillo)
		this.display("none");
	}
});

Resultados

He montado un test basado en JSLitmus, osea que nos cuenta el número de operaciones por segundo (mientras más mejor) para testear nuestras implementaciones frente a la de John Resig (la más rápida de las anteriores). Para los que lo sepan, la versión Ad Hoc, es la montada nativamente.

firefoxsafari4opera

Ir al test

No he podido probar en más navegadores y todo está probado sobre Mac OS. Es interesante ver como, en todas las pruebas, siempre sobrepasamos (alguna implementación) la implementación de John Resig.

Actualización

He podido probar sobre Windows con diferentes navegadores, veamos los resultados:
Firefox 3.0.7
Gráfico Windows/Firefox

Opera 9.63
Windows/Opera

Internet Explorer 6
Windows/Internet Explorer 6
Internet Explorer 7.0
Windows/Internet Explorer 7

Safari 4
Windows/Safari4

Google Chrome
Windows/Google Chrome

Microformatos en tu navegador

10 mar

+ 6

El uso de microformatos lleva ya años por internet y poco a poco parece que va cuajando en la red haciendo más fácil interactuar con ella. Para ir aprovechandonos de ellos, podemos ir usando extensiones para nuestros navegadores que explotan esta posibilidad de extender las páginas web.

Opera parece que ya lo tiene integrado, pero no lo he podido probar. ¿Alguien me lo confirma?

Nace DevPlanet

9 mar

+ 4

Unijimpe, anuncia el nacimiento de DevPlanet. Un lugar donde agrupar todos los blogs de desarrollo en una solo, con la posibilidad de tener múltiples blogs asociados a tu misma cuenta.

devplanet

La idea no es nueva, hace ya unos años Hector (Sigt.net) nos deleitó con Planet WebDev que hasta la fecha sigue activo con una gran cantidad de blogs sindicados, que añaden contenido relacionado al desarrollo web.

Novedades?

Entre las características mas destacadas de DevPlanet podemos destacar las siguientes:

  • Registro de Bloggers.
  • Registro de Multiples Blogs
  • Ping manual y automatico de Posts.
  • Ranking de Posts.
  • Listado por categorías.

Gracias Jesus ;)

TinyTable, 2.5kb para unas tablas profesionales

9 mar

+ 11

Se acabaron las tablas estáticas con chorros de datos tabulados imposibles de manejar. Hay muchas herramientas javascript que nos permite extender las posibilidades de las tablas de datos, pero generalmente requieren el uso de un framework y unas buenas líneas de código. Con TinyTable, podemos conseguir unas tablas profesionales con solo 2,5kb (la versión packed).[Descargar][Demo]

input type=”file” para ficheros múltiples por fin en versión nativa

6 mar

+ 2

Safari4 (y WebKit evidentemente) se han convertido en los primeros navegadores que incorporan una versión nativa de un <input type=”file” /> que permite subir multiples ficheros a la vez. Hasta el momento hay soluciones Javascript para conseguir esta funcionalidad, pero ahora simplemente tendremos que indicar el atributo multiple para indicar que se trata de un selector múltiple y desde nuestro servidor podremos tratar esta variable como un array de ficheros que tratar desde nuestro servidor.

<input type="file" name="ficheros[]" multiple >

Con Safari4 (y WebKit) ya podemos usar esta propiedad que tanto va a alegrar los amantes de las galerías de imagenes, simplemente cuando se abra el panel de selección de ficheros, seleccionamos más de uno usando las teclas CTRL o SHIFT. Tenemos un ejemplo aquí.

Via

Introducción al hCard, preséntate semánticamente en la web

6 mar

+ 2

Con llegada de la web semántica, llegaron los Microformatos, y entre ellos tenemos el hCard. El hCard es la versión semántica de las tarjetas de presentación de toda la vida. Con la diferencia que estas además de ofrecer información sobre alguien puede adornar y permitir la interacción con navegadores y herramientas que detectan este tipo de estándar.

<div class="vcard">
  <span class="fn n">Jack Tripper</span>
  <div class="org">Jack's Bistro</div>
  <div class="adr">
    <div class="street-address">834 Ocean Vista Ave.</div>
    <span class="locality">Santa Monica</span>,
    <span class="region">CA</span>,
    <span class="postal-code">90405</span>
  </div>
</div>

El código que vemos arriba nos muestra un ejemplo que la gente de Opera ha creado para explicar una breve introducción a lo que es este estándar y lo que se pretende conseguir con él. En Microformats.com encontramos un listado con todas las líneas que podemos usar para dar más datos sobre la persona o sobre ti mismo. Como podemos observar, no es más que usar atributos como class, rel, id,… que informados con unos nombres definidos nos ayudan a estandarizar este código.

Tambien podemos usar alguna de estas herramientas:

  • hCard Creator: Herramienta que nos permite crear dinámicamente un hCard con los datos que nos van solicitando.
  • hCard Validator: Herramienta que nos permitirá validar nuestra creación, ya sea mediante una porción de código o mediante una URL.

El contenido de tu WordPress debería ser móvil

6 mar

+ 11

Estos días que he estado fuera, apesar de que he desconectado y he dejado Internet un poco al lado, tambien he tenido momentos de debilidad y me he visto paseando por las calles de Paris buscando una WIFI abierta con la que poder conectarme y echar un vistazo, para ver que todo estaba bien. Generalmente, le echaba un vistazo al iMeneame para estar informado de lo que sucedia en España y curiosidades de Internet, pero cuando intentaba visualizar alguna de las páginas (blogs en WordPress) que suelo visitar a diario me llevé la desilución de que no tenían el diseño de su blog adaptado a un dispositivo móvil con una pantalla pequeña.

Esto se traduce en páginas pesadas y enormemente grandes dificiles de usar desde un dispositivo móvil. En mi caso, usaba una conexión WIFI, y descargar 500kb (o más) de una página no suponía un problema, pero si hubiera tenido que usar el 3G (o GPRS) hubiera notado como la factura se disparaba, incluso me hubiera desesperado en la carga de alguna de ellas.

La solución

Sencilla, adaptar el contenido a estos dispositivos. Justamente hoy en WPFeed nos muestran los mejores plugins para adaptar el theme de nuestro blog dependiendo del dispositivo que nos visita.

  1. WordPress Mobile Plugin
  2. MobilePress
  3. WordPress Mobile Edition
  4. Mowser WordPress Mobile
  5. Mobilize bt Mippin WordPress Plugin
  6. Wetomo WordPress to Mobile
  7. Quick SMS
  8. WP-WAP

Hace ya un año vimos como adaptar WordPress al iPhone /iTouch a lo bruto, sea sin usar un plugin. De esta forma, ofrecemos un contenido más ajustado a estos dispositivos consiguiendo que sea más fácil la lectura y así conseguir que el usuario se sienta más cómodo leyendo nuestra página. Pero aún nos quedaban problemas con dispositivos con pantallas más pequeñas que no deben ser discriminados ya que la presencia de ellos en nuestras estadísticas se va disparándo por días y no podemos dejarlos de lado.

El arte de lanzar errores en Javascript

6 mar

+ 3

Uno de los artículos que vimos ayer en el recopilatorio de posts interesantes fué el de Nicolas C.Zakas, que nos muestra “El arte de lanzar errores”. Pero aún podemos extenderlo más y usar todas las posibilidades de las que disponemos para lanzar errores.

Según el MDC de Mozilla Labs, tenemos 7 tipos diferentes de errores que podemos lanzar:

Error

Se trata del error genérico, engloba todos los anteriores y compone el objeto base del que descienden los demás tipos de error. Su uso está pensado para informar al usuario de un error en tiempo de ejecución (falta de un parámetro, una variable no válida,…) esto no contempla los errores de compilación, aunque puede ser usado para ello. Se supone que tenemos el control de la ejecución y devolvemos un error por que no se ejecuta como debería. Está compuesto de:

  • message: Mensaje del error.
  • name: tipo del error.

El constructor del objeto nos permite indicar el mensaje de error que estamos lanzando:

new Error ("Esto es un error");

Además en Firefox, podemos usar dos parámetros más para indicar el fichero (fileName) y la línea (lineNumber) que debe aparecer en el error. Estos parámetros no son estándares y únicamente están para Firefox, los demás navegadores los omiten.

new Error("Esto es un error", "fichero.html", 34);

Por otro lado, Microsoft extiende Error() con las propiedades:

  • description: Similar al mensaje
  • number: Para indicar el número de mensaje.

estas propiedades son exclusivas de Microsoft, disponibles en Internet Explorer y únicamente para ellos.

EvalError

Este tipo de error se lanza cuando ocurre un error en la función eval();

RangeError

Lanzada cuando un parámetro o un número se sale de rango.

ReferenceError

Error que se lanza cuando se usa una referencia no válida.

SyntaxError

Tipo de error lanzado cuando se parsea el código usado en eval();

TypeError

Lanzado cuando una variable o un parámetro no es del tipo válido

URIError

Lanzado cuando encodeURI() y decodeURI() reciben parámetros no válidos.

throw

Esta sentencia nos permite lanzar excepciones al navegador desde nuestro código. Generalmente la usaremos dentro de un try....catch para evitar problemas con navegadores más antiguos y asegurarnos que hacemos llegar el error al navegador.

Modo de empleo

Como hemos visto antes, deberemos usar try…catch para asegurarnos que todo funcione bien, así que un ejemplo de como deberíamos usarlo sería asi:

try {
	throw new Error("Esto es un error");
} catch(e) {
	alert(e.name + ": " + e.message);
}

Ejemplo

Para verlo dentro de un ejemplo, he montado un ejemplo muy estúpido y sin sentido, pero que se puede ver como incrustamos lo que acabamos de ver.

document.getElementsByClassName = (function(){
	if (document.getElementsByClassName) {
		return document.getElementsByClassName;
	} else {
		try{
			throw new Error("No existe el método");
		}catch(e){
			alert(e.name + ": " + e.message);
		}
	}
})();