Contenido

Como crear tu propio Widget para WordPress

23 Dic

+ 0

Sampedro de Rutarelativa me envia un artículo que ha publicado sobre como crear un widget para WordPress sacado de un caso real que usan en su web. Sin duda una buena base para afrontar la nueva API de Widgets.

WordPress 2.9.1 está al caer

23 Dic

+ 14

Al parecer esta nueva versión va a durar poco, si, menos aún de lo que vienen durando últimamente. Al parecer han detectado 3 fallos que hacen sea necesario generar una versión nueva y volver a molestar al personal.

Los fallos detectados

Para solucionar estos fallos, tenemos un parche para solucionar los problemas sin tener que actualizar todo nuestro WordPress, que muy amablemente los chicos de Semiologic nos han unido. Simplemente son unos ficheros que se ubicarán en el directorio wp-includes/ de nuestro WordPress.

La versión 2.9.1

La nueva versión, que podría ver la luz en breve, no solo corregirá estos problemas, sino que solventará otros 17 errores menores que han sido ya detectados y se están solucionando para esta nueva versión.

Señores!, estamos en la web 2.0, el usuario aporta contenido… y también ayuda a depurar las aplicaciones sociales. Menos mal que el tiempo de respuesta para solucionar problemas es similar al de publicación de versiones 😀

corMVC, modelo MVC basado en jQuery

22 Dic

+ 5

El modelo MVC nos permite separar las diferentes capas de nuestros desarrollos de una forma clara, actualmente es la arquitectura más usada por los principales lenguajes de programación para generar frameworks que nos facilitan el trabajo.

cormvc-overview
(Ver Imagen)

Esa es la idea de corMVC, un framework jQuery que nos implementa esta tecnología. Para ello nos ofrece window.application con una serie de métodos para trabajar cómodamente con las diferentes capas.

Instalación

Para instalar el framework, y al estar basado en jQuery, debemos incluirlo previamente como vemos en el código:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="application.js"></script>

Modo de empleo

mvc-workflow
(Ver Imagen)

Una vez instalado en nuestra página, podemos empezar a usar los métodos disponibles para difinir nuestro código.

Modelo

window.application.addModel((function( $, application ){

	function Contact( ){
		// ....
	};

	Contact.prototype.validate = function(){
		// ....
	};

	return( Contact );
})( jQuery, window.application ));

En este ejemplo, vemos como podemos definir el objeto que será usado como modelo en nuestra aplicación.

Controlador

window.application.addController((function( $, application ){

	function Controller(){
		// Rutas que dirigen nuestras acciones
		this.route( "/", this.index );
		this.route( "/contacts/", this.index );
		this.route( "/contacts/add/", this.addContact );
		this.route( "/contacts/edit/:id", this.editContact );
		this.route( "/contacts/delete/:id", this.deleteContact );
	};

	Controller.prototype = new application.Controller();
	Controller.prototype.init = function(){
		// Cargamos la vista
		this.contactFormView = application.getView( "ContactForm" );
	};
	Controller.prototype.addContact = function( event ){
		// Mostramos la vista
		this.showView( this.contactFormView, event );
	};
	Controller.prototype.editContact = function( event, id ){
		// ...
	};
	Controller.prototype.deleteContact = function( event, id ){
		// Cargamos el modelo
		application.getModel( "ContactService" ).deleteContact(
			id,
			function(){
				application.relocateTo( "contacts" );
			}
		);
	};
	ContactService.prototype.saveContact = function(){
		var self = this;
		// Ajax para grabar datos
		application.ajax({
			url: "...",
			data: {
				....
			},
			normalizeJSON: true,
			success: function( response ){
				if (response.success){
					// ...
				} else {
					// ...
				}
			}
		});
	Controller.prototype.index = function( event ){
		// ...
	};
	Controller.prototype.showView = function( view, event ){
		// ...
	};

	return( new Controller() );

})( jQuery, window.application ));

El controlador se encargará de redirigir nuestras acciones para interactuar con el modelo. Como podemos ver, indicamos las rutas asociadas a los métodos del controlador.

View

window.application.addView((function( $, application ){

	function ContactForm(){
		// Parámetros por defecto
		this.form = null;
		// ...
	};
	ContactForm.prototype.init = function(){
		var self = this;
		this.form = $( "#contact-form" );

		this.form.submit(
			function( event ){
				self.submitForm();
				return( false );
			}
		);
	};

	ContactForm.prototype.submitForm = function(){
		var self = this;

		// Obtenemos el modelo
		application.getModel( "Contact" ).saveContact(
			// ...
			function( id ){
                                // Redirigimos al controlador
				application.relocateTo( "contacts" );
			},
			function( errors ){
				self.applyErrors( errors );
			}
		);
	};
	return( new ContactForm() );
})( jQuery, window.application ));

La vista, nos permitirá dirigir los datos hacia y desde el usuario.

Templates

<script id="contact-list-item-template" type="application/template">
 <li>
   <div>
     <a>${name}</a>
   </div>
   <div>
     <a href="javascript:void( 0 )">more</a> &nbsp;|&nbsp;
     <a href="#/contacts/edit/${id}">edit</a> &nbsp;|&nbsp;
     <a href="#/contacts/delete/${id}">delete</a>
   </div>
   <dl>
     <dt>name:</dt>
     <dd>${name}</dd>
     <dt>phone:</dt>
     <dd>${phone}</dd>
     <dt>email:</dt>
     <dd>${email}</dd>
   </dl>
 </li>
</script>

Como buen framework, nos ofrece un motor de plantillas destinado para pintar la salida que la vista nos ofrece.

Aunque a simple vista parezca un poco engorroso, los que hayan usado alguna vez el modelo MVC sabrán que este código solo ofrece ventajas a la hora de trabajar con varios desarrolladores o para organizar el código de proyectos medianamente grandes.

JSSS, las CSS hechas JSON

22 Dic

+ 4

Una interesante idea me encuentro por delicious esta mañana. Se trata de JSSS, una implementacion (muy sencilla) para conseguir JSON que genere CSS. La idea es solucionar algunas de las carencias de CSS:

  • CSS no es un lenguaje de programación (no hay variables, funciones, no lógica)
  • Las propiedades CSS no son cross-browser
  • Los frameworks CSS están pensado para trabajar en lado del servidor y necesitamos que se ejecute en el cliente
  • Incluir dinámicamente CSS en el DOM no garantiza que las clases CSS sean cross-browser

Por ese motivo, las hojas de estilo JSON pretenden aportar las ventajas de Javascript:

  • Todas las propiedades CSS están almacenadas en objetos JSON
  • Las propiedades y clases CSS pueden ser manipuladas via Javascript
  • Las propiedades y clases pueden ser dinámicas en tiempo de ejecución
  • Todo el sistema de plantillas CSS es gestionado desde el cliente

Código (jQuery)

function parseCSS(id,css){
  for(style in css){
    if(typeof css[style] == 'object'){parseCSS(style,css[style]);
    else{$(id).css(style,css[style]);}
  }
};

Ejemplo de uso

var drip = {};
drip.toolbar = {};

drip.toolbar.css = {
  height : "40px",
  width : "89px",
  position :"fixed",
  right : 50,
  bottom : 0,
  overflow : "hidden",
  cursor : "pointer",
  color : "#FEFEFE",
  "background-color": "#932c2c",
  "text-align" : "left",
  "font-family" : "Arial, Helvetica, sans-serif",
  "font-size" : "12px",

  "#drip-toolbar-button" : {
	height : "30px",
	width : "50px",
	cursor : "pointer",
  },

  ".links" : {
	  color : "#FEFEFE"
  }

};
// Parseamos JSSS
parseCSS('#drip-toolbar', drip.toolbar.css);

Opinión

La idea es interesante, y lleva más de 10 años dando vueltas por Internet, es cierto que se permite un mayor control del CSS en el lado del cliente, pero depende completamente de que este tenga javascript o lo esté ejecutando en este momento.

Optimiza la frecuencia de refresco del RSS de tu WordPress

21 Dic

+ 4

Un módulo del estandar RDF, concretamente el destinado sobre la frecuencia de sincronización, que este próximo año cumplirá 10 años de su aparición nos permite especificar la frecuencia con la que los agregadores de noticia deben comprobar si el feed ha cambiado.

Por defecto WordPress, asume que eres una máquina y que no paras de actualizar en todo el día:

<sy:updatePeriod>hourly</sy:updatePeriod>
<sy:updateFrequency>1</sy:updateFrequency>

WordPress nos añade dos filtros para modificar esta frecuencia a nuestro gusto. Para ello bastará con incluir estas líneas en el fichero functions.php de nuestro theme para conseguir una frecuencia de sincronización de 4 veces al día.

add_filter( 'rss_update_period',    create_function( '', 'return "daily";' ) );
add_filter( 'rss_update_frequency', create_function( '', 'return 4;' ) );

Via

jpegcam, adelántate al W3C Capture API

20 Dic

+ 15

Via el Tumblr de Esteban Saiz descubro jpegcam, que aunque es antigua se trata de una herramienta que aprovecha varias tecnologías para conseguir integrar una webcam en nuestro sitio web.

Como vimos hace unos días, una nueva especificación nos permitirá conseguir esto mismo desde el mismo navegador sin tener que usar Flash para activar la cámara, pero por el momento esta herramienta permitirá que vayamos disfrutando de esta posibilidad.

Instalación

La herramienta está compuesta de una serie de ficheros que debemos incluir en el directorio en el que incluyamos la aplicación:

  • webcam.js: Fichero que aporta la API con la que acceder a la cámara
  • webcam.swf: Interfaz flash que permite conectar con la cámara
  • shutter.mp3: Audio que simulará el sonido de captura de fotos.

Una vez colocados en lugar que deben estar tenemos que cargar el fichero webcam.js en nuestra página. Para ello, incluiremos el siguiente código:

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

Aunque puede ir entre los tags <head /> lo pondría al final del <body /> para aligerar un poco la carga de la página.

En este punto ya tenemos cargada la API que nos permite trabajar con la cámara, ahora nos quedará la configuración previa:

<script type="text/javascript">
 webcam.set_api_url( 'test.php' ); // Fichero de subida
 webcam.set_swf_url( '/path/to/webcam.swf' ); // Fichero SWF
 webcam.set_quality( 90 ); // Cálidad JPEG (1 - 100)
 webcam.set_shutter_sound( true ); // Activar sonido 

 // Eventos (onLoad, onComplete, onError)
 webcam.set_hook( 'onComplete', 'my_callback_function' );

 function my_callback_function(response) {
    alert("Success! PHP returned: " + response);
 }
</script>

Una vez configurado, ya podemos ponernos a usarlo. Para ello disponemos de una serie de métodos que nos permitirán generar el HTML e interactuar con las acciones que la cámara tendrá que realizar.

<script type="text/javascript">
 // Código necesario para incrustar la cámara
 document.write( webcam.get_html(320, 240) );
</script>

Con esto ya tenemos la película Flash cargada y ubicada allá donde lo hayamos puesto en nuestra página. Ahora solo nos quedará añadir los métodos para que el usuario pueda tomar la captura o configurar la cámara.

<form>
 <!-- Activamos la configuración -->
 <input type=button value="Configure..." id="configure" />

 <!-- Tomamos la imagen -->
 <input type=button value="Take Snapshot" id="capture" />
</form>
<script type="text/javascript">
 document.getElementById("configure").appendChild('click', function(){
 webcam.configure();
 }, false);

 document.getElementById("capture").appendChild('click', function(){
 webcam.snap();
 }, false);
</script>

Ya está hecho, con todo esto ya tenemos preparada nuestra página para aceptar las imágenes capturadas desde la webcam de nuestros usuarios. Solo tenemos que implementar, en el lado del servidor, la recepción de imágenes, en PHP sería algo parecido a esto:

$jpeg_data = file_get_contents('php://input');
$filename = "my_file.jpg";
$result = file_put_contents( $filename, $jpeg_data );

El script está preparado para recibir una URL y recibirla en el callback que recibirán los eventos disponibles por webcam, haciendo posible la carga asíncrona, para ello simplemente debemos pasar la URL después de haber subido el fichero.

$url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI'])
 . '/' . $filename;
print "$url\n";

He montado un pequeño ejemplo para que me dejéis una foto de vuestra cara 😀

jQuery 1.4 Alpha 2

19 Dic

+ 6

El equipo de desarrollo de jQuery no para y si ojeas el código de esta versión 1.4 Alpha 2 verás que no han estado descansando este tiempo. En cuanto a velocidad en interacción con el DOM podemos ver que la evolución desde la 1.2.6 es constante y sobretodo buena para nosotros.

Añade un traductor en 52 idiomas a tu página

19 Dic

+ 13

Si estás meditando sobre la idea de incluir un traductor a tu web deberías sopesar la posibilidad de usar TranslateThis, un botón sencillo que nos permitirá traducir nuestra página hasta en 52 idiomas diferentes:

<div id="translate-this"><a href="http://translateth.is/">Translate</a></div>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://x.translateth.is/translate-this.js"></script>
<script type="text/javascript">
TranslateThis();
</script>

Nunca fué tan fácil ofrecer información en el idioma del usuario 😀

WordPress 2.9 disponible para descargar

19 Dic

+ 11

Ya hemos ido viendo como la versión 2.9 de WordPress iba madurando poco a poco con nuevas funcionalidades y cosas realmente interesantes. Pues ahora ya podemos usarla en nuestros sitios web. WordPress 2.9, «Carmen» (en honor a Carmen McRae, una vocalista de Jazz), puedes instalarla descargandola desde aquí o actualizarla desde el panel de administración de tu WordPress.

PastryKit, framework JS/CSS para trabajar con iPhone de Apple

16 Dic

+ 5

PastryKit, es un framework destinado para crear aplicaciones para iPhone como si fueran nativas. El framework, desarrollado por Apple, forma parte de una página pública que Apple ofrece como «Manual de usuario» online del iPhone. La página solo está disponible desde el iPhone, así que si intentamos acceder desde cualquier navegador nos redireccionará a otra versión.

Desde Safari, podemos acceder indicando el Agente de usuario adecuado:

PastryKit
(Ver Imagen)

La URL a la que debemos acceder es:

http://help.apple.com/iphone/3/mobile/

En ella podemos ver los ficheros JS y CSS del framework. Por el momento, es lo único que tenemos ya que no hay documentación al respecto por parte de Apple, aunque ahora será cuestión de tiempo que alguien saque una documentación no oficial que nos muestre las opciones de esta herramienta.

JS:

  • http://help.apple.com/ipodtouch/3/mobile/dist/PastryKit-ug-compact.js
  • http://help.apple.com/ipodtouch/3/mobile/javascript.js

CSS:

  • http://help.apple.com/ipodtouch/3/mobile/style/stylesheet.css

Via