contentEditable: Contenido editable en HTML5

Adrián Mato — Fri, 20 Aug 2010 10:14:38 +0000

¿Qué es contentEditable?

Para ser exactos existen dos elementos similares envueltos: designMode y contentEditable, similares pero con distintos objetivos.

El atributo designMode está enfocado en la edición de todo el documento, por tanto podríamos decir que es un editor HTML al uso con el que editar todo un documento.

Por otra parte contentEditable sólo permite editar los elementos que tengan este atributo asignado dentro de un documento, además de los elementos “hijo” contenidos dentro del “padre”.

Los atributos designMode y contentEditable se emplean para activar el modo edición en documentos enteros o elementos concretos respectivamente.

Si bien actualmente existen multitud de editores “WYSIWYG” (What You See Is What You Get / lo que ves es lo que obtienes), es de esperar que con el avance y estandarización de HTML5, estos vayan quedando en un segundo plano en pro de la integración nativa con los navegadores y su modo de edición.

Aprendiendo a utilizar contentEditable en HTML5

Como hemos mencionado en la introducción, estamos tratando con un atributo asignable a distintas etiquetas HTML, por lo que el uso es realmente trivial como podemos ver en el siguiente ejemplo:




	
	contentEditable: Contenido editable en HTML5
	


	
		
			Contenido Editable con HTML5
		

		
			
				Mediante el atributo "contentEditable" podremos convertir nuestros elementos en contenido editable, al más puro estilo richtextbox.
				Haz click para editar.
			
		

		
			Tareas a realizar la próxima semana:
			
				Redactar nuevos tutoriales para Ontuts.
				Dominar el mundo con Erasmusu.com.
				Sacar a pasear a Coki.
				Introduce siguiente tarea aquí...

Basta con asignar el atributo editableContent=”true” a la lista ordenada para poder editar los elementos actuales e incluso introducir más elementos a la misma.

El código CSS

Como curiosidad he querido resaltar algún que otro selector que a más de uno puede resultarle confuso o nuevo:

[contenteditable]{
	border: 1px dotted transparent;
}
[contenteditable]:hover{
	background: #fff7c3;
	border: 1px dotted #f0df6c;
}
section > *{
	margin: 1em;
}

Empleamos [contenteditable] y [contenteditable]:hover para asignarle estilo a los elementos que tengan activo el modo edición, tanto para su estado normal como para cuando el usuario pasa el cursor por encima de los mismos. No es espetacular pero ayuda a orientar al usuario:

Para los más inexpertos en HTML5 simplemente comentarles que las etiquetas

son nuevas y simplemente se emplean para separar dentro de un artículo

con cabecera y secciones del mismo.

¿Qué navegadores lo soportan?

Como ocurre con la mayoría de novedades de HTML 5, los navegadores más recientes las soportan “sin problemas”:

Firefox 3.
Google Chrome.
Internet Explorer (desde la 5.5).
Opera 9.
Safari 3.

Y como más de uno habrá podido deducir con las comillas anteriores “sin problemas”… el demonio está en los detalles, por lo que os aconsejo esta demo online con la que probar los distintos navegadores.

Como curiosidad acerca de sus orígenes…

Sorprendentemente estos dos atributos (designMode y contentEditable) fueron originalmente diseñados e implementados por Microsoft con la versión Internet Explorer 5.5, aunque estaban explicados con una buena documentación en la realidad carecían de una buena funcionalidad, eran bastante engorrosos.

Conclusión final

Nada más conocer esta nueva característica me he parado a pensar en las horas que hemos perdido muchos desarrolladores en tratar de generar una “rich text box” en condiciones y todas las trabas e incompatibilidades que nos hemos encontrado a lo largo del proceso… ojalá que por fin estos atributos nos ayuden y faciliten un poco la vida, tanto a nosotros como al propio usuario final.

Me viene a la cabeza Erasmusu… en su día implementáramos nuestro propio rich text box con emoticonos, negrita, cursiva, etc, para los comentarios y foros y la verdad es que fue un dolor de cabeza contínuo. Al final optamos por el texto plano enriquecido de toda la vida .

¡Nos vemos en la próxima publicación!

No related posts.

Drag & Drop en HTML 5

Iván Guardado — Tue, 10 Aug 2010 08:31:26 +0000

Introducción

Una característica bastante utilizada en aplicaciones con una interfaz de usuario enriquezida es la de poder arrastrar los elementos. Ejemplos típicos son el de reorganizar los elementos de una web para personalizarla o mover un elemento a una determinada categoría.

Hasta ahora la forma más fácil de hacer esto era usar una librería de Javascript que nos facilitase el trabajo. La jQuery UI, que es la que más me conozco, estaba muy avanzada en este tema. Sin embargo, al ser una implementación totalmente basada en Javascript, tenía bastantes inconvenientes como:

Si mueves demasiado rápido los elementos, el elemento arrastrado se suele quedar atrás y se pierde en “dragging”.
Solo puedes mover elementos dentro de la misma web, no puedes arrastrar elementos de una ventana a otra ni aceptar elementos que no sean DOM.
Menos eficiencia al requerir más código.

Novedades en HTML 5

Los creadores del estándar HTML5, parece que han visto que esta característica es importante y que necesita ser mucho más exprimida para dar mucho más juego a las aplicaciones webs. A continuación os cito las principales novedades del estándard en este tema:

Nuevos eventos en el DOM: dragstart, drag, dragenter, dragover, dragleave, drop, dragend.
Nuevo atributo para los elementos DOM para hacerlo arrastrable: draggable=”true”.
Se permite adicionar información en el elemento arrastrable para que el contenedor pueda recibirla.
Posibilidad de establecer la imagen “ghost” mostrada mientras se arrastra.
Posibilidad de añadir efectos del estilo: copiar, mover, vínculo, etc…

Además, esta característica va más allá de la propia web, dándonos la posiblidad de arrastrar elementos entre distintas webs e incluso aceptar elementos de otras aplicaciones como arrastrar un texto de un procesador de texto o un fichero del sistema.

Los nuevos eventos

Vamos a listar los nuevos eventos que nos trae HTML5 para drag & drop y luego veremos un ejemplo de implementación para que veáis lo fácil y rápido que se implementa.

dragstart

Comienza el arrastrado. El “target” del evento será el elemento que está siendo arrastrado.

drag

El elemento ha sido movido. El “target” del evento será el elemento arrastrado.

dragenter

Se dispara cuando un elemento que está siendo arrastrado entra en un contenedor. El “target” del evento será el elemento contenedor.

dragover

El elemento ha sido movido dentro del contenedor. El “target” del evento será el elemento contenedor. Como el comportamiento por defecto es denegar el “drop”, la función debe retornar el valor “false” o llamar a “preventDefault” para que indicar que se puede el soltar elemento.

dragleave

El elemento arrastrado ha salido del contenedor. El “target” del evento será el elemento contenedor.

drop

El elemento arrastrado has sido éxitosamente soltado en el elemento contenedor. El “target” del evento será el elemento contenedor.

dragend

Se ha dejado de arrastrar el elemento, con éxito o no. El “target” del evento será el elemento arrastrado.
Vamos a ver un ejemplo de como hacer un elemento arrastable usando jQuery.

$('#mydrag')
    .attr('draggable', 'true')
    .bind('dragstart', function(ev) {
        var dt = ev.originalEvent.dataTransfer;
        dt.setData("Text", "Información adicional");
        return true;
    })
    .bind('dragend', function(ev) {
        return false;
    });

Y ahora la otra parte, creamos un contenedor que esté a la espera de elementos arrastrables.

$('#mycontainer')
    .bind('dragenter', function(ev) {
        //Cambiamos color del contenedor para mostrar que acepta al elemento
        $(ev.target).css('background','#F00');
        return false;
    })
    .bind('dragleave', function(ev) {
       //Reestablecemos el color del contenedor
        $(ev.target).css('background','#FFF');
        return false;
    })
    .bind('dragover', function(ev) {
        //Importante como hemos dicho para que acepte al elemento,
        //por defecto cancela el drop
        return false;
    })
    .bind('drop', function(ev) {
        var dt = ev.originalEvent.dataTransfer;
        alert(dt.getData('Text'));
        return false;
    });
});

Creo que el código no require de mucha explicación pues simplemente establece las funciones para cada evento, aunque creo que es importante reseñar que gracias al objeto dataTransfer se puede compartir información entre el elemento arrastrado y el contenedor, lo veremos a fondo a continuación.

Transfiriendo información con dataTransfer

Como ya hemos dicho, una de las características más importantes de esta nueva implementación, es la posibilidad de cargar información en el elemento arrastrado para que el contenedor pueda recibirla. Pero, lo que todavía está mucho mejor, es que un contenedor pueda recibir los datos desde elementos arrastrados desde otros navegadores o aplicaciones.

Como ya he mostrado en el ejemplo anterior, esto se hace a través de los métodos setData y getData del objeto dateTransfer expuesto en el objecto del evento (Event Object).

La información se debe de almacenar usando los tipos recomendados para un uso estándard y adecuado. A continuación unos ejemplos:

var dt = ev.originalEvent.dataTransfer;
dt.setData('text/plain', 'Hola mundo');
dt.setData('text/html', 'Hola mundo');
dt.setData('text/uri-list', 'http://web.ontuts.com');

Un ejemplo de uso de los tipos recomendados es seleccionar un texto en el navegador, arrastralo a un contenedor y esperar encontrar algo en en text/html, o arrastrar texto desde un procesador de texto y esperar encontrar algo en text/plain.

Uso de imágenes fantasma

Esta es una nueva característica que nos permite establecer lo que el usuario verá como imagen semitransparente mientras arrastra el elemento. Tenemos tres posibilidades:

Establecer un elemento del DOM.
Establecer una imagen (aunque se base en el punto anterior).
Establecer un elemento canvas.

Esto se hace a través del método setDragImage, incluído una vez más, en la propiedad dataTransfer. A continuación un ejemplo de los tres tipos:

var dt = ev.originalEvent.dataTransfer;
 //Elemento DOM
dt.setDragImage( $('h2')[0], 0, 0);
 //Imagen (elemento DOM)
dt.setDragImage( $('#image')[0], 32, 32); 

var canvas = document.createElement("canvas");
canvas.width = canvas.height = 50;
var ctx = canvas.getContext("2d");
ctx.lineWidth = 8;
ctx.moveTo(25,0);
ctx.lineTo(50, 50);
ctx.lineTo(0, 50);
ctx.lineTo(25, 0);
ctx.stroke();
//Canvas
dt.setDragImage(canvas, 25, 25);

El método setDragImage acepta como primer parámetro el elemento que se desea mostrar como imagen. Los dos siguientes parámetros son el “offset” que se desea dar a la imagen respecto a la posición por defecto.

Usando efectos de arrastrado / tirado

El drag & drop del nuevo estándar ha sido creado para sobre todo para soportar acciones como copiar, mover y vincular. Por ello se han añadido los efectos de tirado para mostrar la acción que se va a ejecutar. Para que te hagas una idea, son los iconcitos pequeños que aparecen cuando arrastras un icono en el S.O. (una flechita, un signo más, etc…).

Estes efectos pueden establecerse a nivel del elemento arrastrado o a nivel del contenedor. Si se vinculan al contenedor, el efecto solamente aparece cuando se producen los eventos dragenter y dragover.

Para usar esta funcionalidad se establecen las propiedades effectAllowed y dropEffect para los elementos arrastrados y contenedores respectivamente. Como es de esperar, estas propiedades están incluídas en el objeto dataTransfer. A continuación un ejemplo de como añadir el efecto al elemento arrastrado:

var dt = ev.originalEvent.dataTransfer;
dt.effectAllowed = 'copy';

Los valores permitidos para esta propiedad son:

none: ninguna operación permitida
copy: solo copiar
move: solo mover
link: solo vínculo
copyMove: copiar o mover
copyLink: copiar o vincular
linkMove: vincular o mover
all: copiar, mover o vincular

Por otro lado, puedes especificar el efecto para el propio contenedor, para indicar la acción que se va a llevar a cabo al soltar el elemento:

var dt = ev.originalEvent.dataTransfer;
dt.dropEffect = 'none';

Conclusión

Hasta aquí el tutorial sobre el Drag & Drop en HTML 5, si has tenido la paciencia de leerlo todo, te habrás dado cuenta que tiene muchas novedades y mejoras que despilegan un nuevo abanico de posiblidades, además de mejorar el rendimiento.

Espero que os haya resultado útil la información y no dudéis en dejar un comentario para preguntar, criticar o valorar.

¡Nos vemos en el próximo!

No related posts.

Sesiones en PHP

Iván Guardado — Fri, 30 Jul 2010 16:58:08 +0000

¿Que es una sesión?

Un sesión en una web se puede definir como el recorrido de páginas que un usuario hace en nuestro sitio, desde que entra hasta que lo abandona. Gracias al uso de sesiones podemos reconocer las peticiones de cada usuario y así llevar a cabo acciones específicas, como mostrar información adaptada a él o guardar información de sus gustos o páginas que más visita.

Podemos entonces decir que pueden diferenciarse dos tipos de sesiones:

Sesiones “activas”: las que muestran información personalizada según el usuario, por ejemplo, cuando inicia sesión en una web.
Sesiones “pasivas”: el servidor reconoce cada movimiento del usuario y lo almacena de forma que en un futuro, se le mostrará una web con la información que al usuario le pueda parecer más interesante sin que se dé cuenta.

Lógicamente, una web puede incorporar los dos tipos de sesiones, véase el caso de los servicios ofrecidos por Google .

¿Cómo funcionan?

Las sesiones se basan en un identificador generado por visitante, simulando una especie de DNI, de modo que cuando quiera acceder a cualquier página de nuestro sitio, mostrará ese “DNI” y quedará identificado. El identificador será único por cada usuario y se le conoce como Session ID (SID).

Ahora la pregunta es ¿Como se gestiona dicho SID? pues muy fácil, con Cookies. Si no sabes muy bien que son, te recomiendo mi anterior artículo Introducción a Cookies en la Web. Una cookie es información que se establece desde el servidor y que el navegador del usuario envía en cada petición de forma abstracta. Entonces, si establecemos en una cookie el identificador de sesión, ya tenemos nuestra tarjeta identificadora lista.

Desde el lado del servidor, se debe implementar toda la lógica de la sesión, almacenando todos los SID activos y la información relativa a ellos. Esto se puede hacer de múltiples formas: mediante sistema de ficheros, base de datos, memcached o cualquier otro método de almacenamiento de información.

Manejo de sesiones en PHP

PHP, como es de esperar tiene todo un set de funciones para el manejo de sesiones de forma que abstrae bastante la labor del desarrollador. Entre otras cosas, llevará a cabo las siguientes tareas:

Identificación por cookie del SID.
Si no existe el SID, crea uno y lo guarda en las cookies.
Almacenamiento de información relativa al SID en el sistema de ficheros.
Gestión del expirado de sesión.

Almacenar y/o recuperar información sobre la sesión actual es tan fácil como usar un array global llamado $_SESSION.

Con todo esto, el uso de sesiones en PHP se hace realmente fácil. Aunque los creadores de PHP no nos quieren encadenar y nos permiten crear nuestras propias funciones para gestionar las sesiones de forma manual, como veremos más adelante en un ejemplo.

Usando los manejadores de PHP

Vamos a mostrar un ejemplo de como crear una sesión por visitante y almacenar información persistente durante la sesión

Es importante informar sobre la función session_start. Dicha función se encarga de crear o cargar una sesión previamente abierta basándose en el SID pasado por cookies. Algo a tener muy en cuenta, es que al estar basado en cookies, el server generará cabeceras HTTP, por lo que es importante llamar a la función antes de que se envíe cualquier salida de texto.

Si no recibirás un error que dice algo como “headers already sent”. De hecho os recomiendo que pongáis la llamada en la primera línea de vuestro index.php para evitar problemas.

Usando manejadores propios

Como hemos dicho, PHP nos permite declarar nuestras propias funciones para gestionar las sesiones de forma personalizada, a continuación os dejo una clase base que podéis rellenar para crear vuestros manejadores:

Una vez que tengas la clase adaptada a tus necesidades, necesitas indicarle a PHP que use eses métodos y no los que usa por defecto.

Eso se consigue con la función session_set_save_handler:

ini_set('session.save_handler', 'user');
session_set_save_handler(array('Session', 'open'),
                         array('Session', 'close'),
                         array('Session', 'read'),
                         array('Session', 'write'),
                         array('Session', 'destroy'),
                         array('Session', 'gc')
                         );
session_start();

Configuración de sesiones en PHP

En la documentación oficial, podéis acceder a esta página en la que se muestra un listado completo de todas las variables de configuración (en el fichero php.ini), no obstante, vamos a ver algunas que tienen bastante importancia.

session.save_path

Especifica en que directorio será almacenda la informacion de los distintos SID generados. En este directorio tiene que poder escribir el usuario de Apache, que será el creador de los ficheros en última instancia.

session.name

Especifica el nombre de la sesión por defecto, que será a su vez el nombre de la cookie establecida por el servidor. Por defecto se llama PHPSESSID pero es recomendable cambiarlo.

session.gc_maxlifetime

Es el número de segundos tras el cual la información almacenda pasa a ser considerada basura y por tanto borrada cuando se lance el colector de basura (Garbage Collector).

session.cookie_lifetime

Establece los segundos durante los cuales la cookie de sesión va a estar activa. Por defecto está a 0 y por tanto la cookie de sesión durará hasta que el usuario cierre el navegador, como ya habíamos visto en Introducción a Cookies en la Web.

Es muy importante diferenciar esta variable de gc_maxlifetime. La funcionalidad de gc_maxlifetime hace la resta de la hora del último acceso menos la hora actual, si el resultado en segundos es mayor que el valor de dicha variable, la sessión se borra.

Mientras que cookie_lifetime establece un tiempo de duración fijo, es decir, si se establace en 60 segundos, la sesión expirará dentro de un minuto aunque el usuario esté accediendo continuamente.

session.use_only_cookies

Esta variable establece que solamente se deben de usar cookies para gestionar las sesiones. Por defecto está activado y es importante no modificarlo. El problema de desactivarlo, es que PHP intentará gestionar las sesiones vía parámetros GET en caso de que no estén activadas las cookies en el navegador del usuario.

Esto puede llevar a problemas de seguridad y comprometer la privacidad del usuario.

Conclusión

El uso de sesiones con PHP es, como has visto, bastante sencillo, aunque se puede complicar todo lo que quieras si lo quieres gestionar tú de forma manual.

Os recomiendo que si no tenéis experiencia en el tema, probéis a experimentar hasta que entendáis bien como funciona todo, ya que mucha gente usa las sesiones pero no toda sabe como funciona, y es muy importante siempre, saber lo que está haciendo el backend a la hora de desarrollar.

Espero que os haya gustado, ¡nos vemos en el proximo artículo!

Introducción a Cookies en la Web

Iván Guardado — Sat, 24 Jul 2010 11:01:14 +0000

¿Que es una Cookie?

Una cookie es información enviada desde un servidor de páginas web y almacenada en el disco duro del visitante a través del navegador. Esta información será reenviada de nuevo al servidor en cada petición, de forma que el servidor puede identificar o recuperar información sobre el usuario que está accediendo.

¿Por qué se han creado las cookies?

Las cookies fueron implementadas por primera vez por Netscape Communications para la creación del típico cesto de comprar en una tienda online. El problema hasta entonces era que el protocolo HTTP carecía de la posibilidad de mantener información pos sí mismo. Los métodos usados antes eran:

Identificación por IP: un método muy poco fiable, pues bajo una misma IP podían estar accediendo distintos usuarios (por ejemplo desde un cíber), además que la dirección IP de un usuario puede cambiar.
Por URL: Consiste en añadir la información en la URL, despues del interrogante ?. Esta es una técnica más precisa en lo que se refiere a identificación, pero tiene problemas de seguridad.

Gracias a las cookies, un servidor web puede identificar un conjunto pc-navegador-usuario y mostrar la información adecuada a ese conjunto, por ejemplo un carrito de compra que haya creado.

¿Son inseguras las Cookies?

Existe una tendencia entre la gente a pensar que las cookies son una especie de virus o gusano. Esto es debido a que las cookies están en muchas ocasiones vinculadas a temas de spyware.

La fama, la tendencia a pensar que las cookies son inseguras o malas se ha debido a que en numerosas ocasiones han sido vinculadas a temas de Spyware y otro tipo de situaciones comprometidas para el usuario.

Muchas empresas de publicidad las utilizan para hacer un seguimiento de los hábitos de navegación del usuario. Esto, a mucha gente le parece que es un asalto a la privacidad y por ello las cookies tienen sus detractores.

Sin embargo, el uso de cookies, a día de hoy, y con un navegador actualizado, no suponen ningún tipo de riesgo para el PC ni los datos almacenados en él.

¿Cómo se crea una Cookie?

Vamos a entrar en algo más técnico y ver como se establecen / reciben cookies a través del protocolo HTTP. Cuando entramos en una web, por ejemplo http://www.example.com/index.html, el navegador enviará una petición al servidor parecida a esta:

GET /index.html HTTP/1.1

Entonces el servidor hará lo que tenga que hacer para generar el contenido y devolverá algo así:

HTTP/1.1 200 OK
Content-type: text/html
(contenido de la página)

Si desde el servidor se quiere guardar una cookie en el ordenador del usuario, añadirá lo siguiente a su respuesta:

Set-Cookie: Name=el valor de la cookie; expires=Fri, 23-Jul-2010 23:59:59 GMT; path=/; domain=.example.com

Vamos a ver por partes qué significa esa línea:

Set-Cookie: Es el identificador que reconocerá el navegador para saber que se va a crear una cookie.
Name=valor de la cookie: Es el conjunto clave valor de la cookie. Name es el nombre identificado, siendo su valor lo que va inmediatamente después del signo igual (=). El valor pueden contener textos y números.
expires: Establece cuando la cookie dejará de existir. Si no se establece, lo cookie ser borrará al cerrar el navegador. Si se establece un tiempo inferior al actual, tambien se borrará.
domain: Establece el dominio al que la cookie será enviada. Si el valor es por ejemplo, ‘.example.com’, la cookie será enviada a cualquier subdominio existente en example.com. Si se le diese el valor img.example.com, la cookie solo sería enviada a ese subdominio, descartando también al propio example.com .
path: Establece el directorio al que afecta la cookie. Si por ejemplo se establece a ‘/user’, la cookie solo existirá en example.com/user. Es importante destacar que path y domain trabajan de forma conjunta.

Crear y leer cookies en PHP

Vamos a llevar todo esto tan teórico a la práctica usando PHP como lenguaje de programación. En php existe la función setcookie para crear o eliminar cookies y la variable global $_COOKIE para acceder a su contenido.

La funcion setcookie tiene la siguiente definición:

bool setcookie ( string $name [, string $value [, int $expire = 0 [, string $path [, string $domain [, bool $secure = false [, bool $httponly = false ]]]]]] )

Supongo que puedes vincular fácilmente cada parámetro con los valores que hemos listado en la sección anterior excepto $secure y $httponly.

$secure establece si la cookie debe solamente funcionar bajo conexiones protegidas por SSL.
$httponly es para indicar si la cookie es solo accesible a través del protocolo HTTP, evitando así el acceso desde lenguajes de scripting como Javascript. Esto puede ayudar a reducir bastante los ataques XSS.

Veamos algunos ejemplos prácticos.

Ejemplo de creación de cookies

Accediendo a las cookies

Borrando cookies

Apuntes sobre seguridad
Hay que tener mucho cuidado cuando se crean o leen cookies ya que existen muchos ataques que se aprovechan de excesos de confianza / desconocimiento del programador.

Nunca almacenes información privada en una cookie: Un ejemplo muy común de uso de cookies es la creación de sesiones con la opción “Recordarme”. En esta clase de webs, el usuario es recordado y no tiene que volver a escribir sus credenciales para iniciar sesión. Si estás pensando en almacenar el usuario y la contraseña en las cookies, vas por mal camino, pues es fácil acceder a la información de las cookies a través de un sniffer u otros ataques. Para que no os quedéis con la duda, lo que se suele hacer es generar un código aleatorio que identifique la sesión del usuario.
Nunca te fíes del contenido de una cookie: Si bien las cookies funcionan de forma totalmente transparente al usuario y no tiene, a simple vista, formas de modificarlas, no te puedes fiar del contenido que envíen. Existen múltiples herramientas que permiten modificar / crear las cookies de forma que un usuario avanzado podría hacer grandes destrozos en el servidor. Valida siempre el valor de las cookies para comprobar que tienen lo esperado y no, por ejemplo, inyección de código.

Conclusión
Las cookies han sido diseñadas para mejorar la experiencia del usuario en la web. Sin ellas no se habrían podido crear las primeras páginas con inicios de sesión y por lo tanto no llegarían a existir webs como Facebook o GMail.
Las cookies por tanto, aunque tengan mala fama entre las personas no-técnicas, son imprescindibles .
¡Nos vemos en el próximo tutorial!

Related posts:
Sesiones en PHP
Aprendiendo a utilizar la librería cURL en PHP
Introducción y Primeros pasos con Prototype, librería javascript
Introducción a Object-Relational Mapping (ORM)

Utilizando Doctrine como ORM en PHP

Iván Guardado — Tue, 06 Jul 2010 11:11:51 +0000

¿Que es Doctrine?

Doctrine es una librería para PHP que nos permite trabajar con un esquema de base de datos como si fuese un conjunto de objetos, y no de tablas y registros. Si no sabes todavía que significa ORM y que ventajas / desventajas tiene, te recomiendo que leas el tutorial anterior: Introducción a Object-Relational Mapping (ORM).

Doctrine está inspirado en Hibernate, que es uno de los ORM más populares y grandes que existen y nos brinda una capa de abstracción de la base de datos muy completa. La característica más importante es que te da la posibilidad de escribir consultas de base de datos en un lenguaje propio llamado Doctrine Query Language (DQL).

Características principales

Doctrine es una librería muy completa y muy configurable, por lo que casi me resulta complicado seleccionar que detalles destacar. Os pongo las características más globales, ya que este tutorial pretende ser una introducción, por lo que dejamos de lado las cosas más “complejas”.

Generación automática del modelo

Cuando se trabaja con ORM, necesitas crear el conjunto de clases que representa el modelo de la aplicación, luego estas clases serán vinculadas al esquema de la base de datos de forma automática con un motor ORM.

Aunque son cosas diferentes, cuando diseñas un modelo relacional y un modelo de clases, suelen ser muy parecidos. Doctrine se aprovecha de esta similitud y nos permite generar de forma automática el modelo de clases basándose en el modelo relacional de tablas.

Es decir, si tenemos una tabla llamada usuarios, se autogenerará una clase llamada Usuarios cuyas propiedades son las columnas de dicha tabla.

Posibilidad de trabajar con YAML

Como se comenta en el apartado anterior, Doctrine puede generar de forma automática el modelo, pero también deja la posibilidad (como es lógico) que puedas definir tu mismo el mapeo de tablas y sus relaciones.

Esto se puede hacer con código PHP o con YAML, que es un formato de serialización de datos legible por humanos muy usado para este fin. En el ejemplo siguiente se muestra como definir dos tablas relacionadas:

---
User:
  columns:
    username:
      type: string(255)
    password:
      type: string(255)
    contact_id:
      type: integer
  relations:
    Contact:
      class: Contact
      local: contact_id
      foreign: id
      foreignAlias: User
      foreignType: one
      type: one

Contact:
  columns:
    first_name:
      type: string(255)
    last_name:
      type: string(255)
    phone:
      type: string(255)
    email:
      type: string(255)
    address:
      type: string(255)
  relations:
    User:
      class: User
      local: id
      foreign: contact_id
      foreignAlias: Contact
      foreignType: one
      type: one

En el ejemplo, se muestra una relación entre dos tablas a través de los campos User.contact_id y Contact.id.

Doctrine_Record y Doctrine_Table

Practicamente todo nuestro modelo heredará de estas dos clases. Doctrine_Record representa una entidad con sus propiedades (columnas) y nos facilita métodos para insertar, actualizar o eliminar registros entre otros. Por ejemplo:

name =  “Iván”;
$user->save();

La clase Doctrine_Table representa el esquema de una tabla. A través de esta clase podemos, por ejemplo, obtener información sobre las columnas o buscar registros específicos:

find(1);

Buscadores mágicos (Magic finders)

En Doctrine, puedes buscar registros basándote en cualquier campo de una tabla. En el partado anterior podíamos ver que existe el método find() para buscar un determinado id en una tabla…pues bien, se podría hacer findByX() en donde X es el nombre de la columna.

Si existen los campos llamados name y email, podemos hacer findByName() y findByEmail(). Tambien es importante decir que existe el método findAll(), que obtiene todos los registros de la tabla.

Relaciones entre entidades

En Doctrine, una vez que hemos definido nuestro modelo (o se ha creado de forma automática) con las tablas y sus relaciones, resulta fácil acceder y moverse por entidades relacionadas.

Vamos a ver un ejemplo de como acceder a valores que en nuestro sistema relacional se encuentran en tablas separadas. Teniendo en cuenta que tenemos dos tablas, User y Comments, con relación 1-N:

findAll();
foreach($comments as $comment){
	echo  $comment->User->name;
}

A través de $comment->User estamos accediendo a un nuevo objeto del tipo User que se carga de forma dinámica, de esta forma podemos acceder a las propiedades y métodos de dicha clase olvidándonos de tener que lanzar código SQL.

Lenguaje DQL

DQL es un lenguaje creado para ayudar al programador a extraer objetos de la base de datos. Entre las ventajas de usar este lenguaje se encuentran:

Está diseñado para extraer objetos, no filas, que es lo que nos interesa.
Entiende las relaciones, por lo que no es necesario escribir los joins a mano.
Portable con diferentes bases de datos.

Es importante considerar el uso de DQL para obtener la información a cargar en lugar de usar la “forma automática” de Doctrine para mejorar el rendimiento. En el ejemplo anterior, cuando se accede a $comment->User, hemos dicho que se está cargando un nuevo objeto de forma dinámica, pues bien, esto no es óptimo porque realiza consultas SQL de más.

Si tenemos 100 comentarios, ejecutará 100 consultas SQL para cargar la información del objeto User, lo cual es una pérdida de rendimiento enorme. En lugar de eso, es necesario usar DQL para que traiga toda la información de un solo paso:

select('c.*,u.name')
	->from('Comments c')
	->innerJoin('c.User u');
$comments =  $q->execute();

El código anterior obtendrá la información de los comentarios cruzados con los datos de usuario, por lo que obtendrá toda la información en un solo paso.

El lenguaje DQL es algo tan extenso que necesitaría varios artículos para explicarlo en profundidad, por eso te recomiendo que mires la documentación oficial que está bien explicado y completo

Construyendo un ejemplo real

Para darle algo de vida al tutorial, vamos a crear una implementación muy sencilla de Doctrine en la que veremos todo lo comentado hasta ahora. La aplicación consiste en un listado de comentarios escritos por usuarios.

Cada vez que se desee insertar un nuevo comentario, se deberá rellenar un formulario con: nombre, e-mail y texto, siendo los dos últimos obligatorios. Si el usuario no deja su nombre, se mostrará como “Desconocido”.

Paso 1: crear el esquema de base de datos

El ejemplo es tan sencillo que solamente tendrá dos tablas relacionadas entre sí: users y users_comments.

CREATE SCHEMA  ontuts_doctrine CHARSET UTF8 COLLATE utf8_general_ci;
use ontuts_doctrine;
CREATE TABLE users(
	id INT(11) PRIMARY  KEY auto_increment,
	name VARCHAR(30),
	email VARCHAR(60)
)ENGINE=INNODB;
CREATE TABLE  users_comments(
	id INT(11) PRIMARY KEY auto_increment,
	id_user INT(11)  NOT NULL,
	text VARCHAR(255),
CONSTRAINT fk_users_comments_users  FOREIGN KEY (id_user) REFERENCES users(id)
)ENGINE=INNODB;

Paso 2: crear el modelo

Esto, como ya habrás aprendido, se puede hacer de forma manual (con PHP o YAML) y de forma automática. En este caso lo haremos de forma automática para explicar como funciona. Vamos a crear el script que se encargará de generar los ficheros, create_orm_model.php:

 true));

Nos aseguramos de que existe la carpeta models en la raíz de nuestro proyecto:

mkdir  /path/myproject/models

Ahora llamamos al script, bien vía Apache o vía CLI:

php5  -f create_orm_model.php

Una vez se ha ejecutado con éxito, vamos a la carpeta models y vemos que se han generado varios ficheros:

Users.php
UsersTable.php
UserComments.php
UserCommentsTable.php
generated/BaseUsers.php
generated/BaseUsersComments.php

Si te fijas, se han creado las clases que se extienden de Doctrine_Record y Doctrine_Table que ya hemos comentado antes.

BaseUsers.php y BaseUsersComments.php representan clases base y que no deberías modificar. Cualquier método o propiedad que desees añadir, debes hacerlo sobre Users.php o UsersComments.php.

Paso 3: extender el modelo

Analizando la aplicación llegamos a la conclusión de que la clase Users necesita dos nuevos métodos:

getName: que devuelva el nombre del usuario o “Desconocido” si no ha rellenado esa información.
addComment: que inserte un nuevo comentario asignado a dicho usuario.

Editamos entonces el fichero Users.php y lo dejamos así:

id_user = $this->id;
		$comment->text = $text;
		$comment->save();
	}
	public function  getName(){
		if(empty($this->name) || is_null($this->name)){
			return  "Desconocido";
		}else{
			return $this->name;
		}
	}
}

Tambien necesitamos extender la clase UsersCommentsTable para sobreescribir el método findAll(), de forma que obtenga la información cruzada con la tabla users y así mejorar el rendimiento. Editamos el fichero UsersCommentsTable.php y lo dejamos así:

select('c.*,u.name')
			->from('UsersComments c')
			->innerJoin('c.Users u');
		return $q->execute();
	}
}

Listo, ya tenemos nuestro modelo ampliado .

Paso 4: crear la lógica

A continuación creamos el fichero index.php que contendrá la lógica principal de la aplicación. Nos queda algo así: index.php

setCharset('utf8');
Doctrine_Core::loadModels('models');

//Variable en la  plantilla html
$tpl = array("comments"=> array(), "error"=>false);

//Comprueba si se ha  enviado el formulario
if(!empty($_POST) &&  isset($_POST['create_comment'])){
	$email = filter_input(INPUT_POST,  "email", FILTER_SANITIZE_STRING);
	$name = filter_input(INPUT_POST,  "name", FILTER_SANITIZE_STRING);
	$text = filter_input(INPUT_POST,  "text", FILTER_SANITIZE_STRING);
	//Comprueba que se hayan rellenado  los campos obligatorios
	if(!empty($email) &&  !is_null($email) &&
	!empty($text) &&  !is_null($text)){
		$userTable = Doctrine_Core::getTable('Users');
		$users =  $userTable->findByEmail($email);
		$user = null;
		//Si el  usuario no existe, lo crea
		if($users->count()==0){
			$user =  new Users();
			$user->name = $name;
			$user->email = $email;
			$user->save();
		}else{
			$user =  $users[0];
		}
		//Inserta el comentario
		$user->addComment($text);
	}else{
		//Si no se se  han rellenado todos los valores obligatorios
		//mostrará un  error
		$tpl['error'] = true;
	}
}
//Carga los comentarios
$commentsTable =  Doctrine_Core::getTable('UsersComments');
$tpl['comments'] =  $commentsTable->findAll();
//Envia la información
require_once('template.phtml');

Paso 5: crear la plantilla

Por último ya solo nos queda dar formato visual al contenido de template.phtml:







Añadir  comentario
Por  favor, rellena las cajas marcadas con asterisco  (*)


Dirección e-mail  *



Nombre



Comentario *





Comentarios de los usuarios


Users->getName()?>  - text?>

Reflexión final

Como has visto, en cuestión de minutos tenemos una mini aplicación en PHP que nos permite añadir y listar registros de una base de datos de una forma muy ordenada y sin tocar ni una letra de código SQL.

No llevaría mucho tiempo añadir un sistema de login de usuarios y que pudiesen editar y borrar los comentarios, gracias a los métodos save() y delete() de la clase Doctrine_Record.

¡Nos vemos en la próxima publicación!

Introducción a Microsoft Silverlight: Parte II

Eugenio Estrada — Mon, 28 Jun 2010 12:09:07 +0000

Este tutorial forma parte de una serie

Multiplataforma

En la primera parte nos centramos en qué y para qué es Silverlight. Una vez que ya lo sabemos, lo más importante es saber cómo lo hace. Veremos cómo está construido y solo así podremos entender, entre otras cosas, sus limitaciones. Como dijimos en la primera parte, Silverlight es un plugin que se instala en nuestro navegador. La cantidad de navegadores y plataformas soportadas era muy amplía y esto supone una gran dificultad.

Esto estriba en que cada navegador y cada plataforma tiene sus propias limitaciones. Esto va a provocar que el plugin del navegador tenga esas mismas limitaciones. Por si eso no fuera poco, las aplicaciones Silverlight fuera del navegador tendrán limitaciones y pequeños matices distintos por su propia naturaleza. Por lo tanto, en resumen, Silverlight tendrá tantas limitaciones como el total de sus plataformas soportadas tengan.

Si eso no se hiciese de esa forma, tendríamos un problema, ya que una aplicación que funciona en un sistema, podría no funcionar en otro. Por poner algún ejemplo, desde una aplicación Silverlight no se puede tener acceso a los directorios del sistema o desde una aplicación fuera del navegador, el programador no puede abrir un enlace en el navegador, si no es el usuario al que se pide confirmación explícitamente.

La Platform Adaptation Layer (PAL), es la encargada de abstraer a Silverlight de la plataforma de donde se ejecuta. Lo que permite que poco a poco se vayan pudiendo ir incorporando características del sistema a la plataforma de Silverlight, por ejemplo las más deseadas son: acceso a la WebCam y servicios de impresión de documentos.

Partiendo de esta base, podremos analizar que tiene consigo Silverlight.

Recursos

Silverlight trae consigo una serie de clases, divididas en distintas tecnologías o agrupaciones:

Base Class Library (BCL): Contiene todo lo básico para trabajar con cualquier lenguaje .NET: colecciones, genéricos, criptografía, tipos básicos, hilos, etc. Aquí estará todo aquello que sea de carácter general.
Windows Communication Foundation (WCF): Contiene todos los metodos necesarios para las comunicaciones, como servicios web, serialización XML y JSON, RSS y todo tipo de mecanismos para las comunicaciones.
Acceso a datos (ADO.NET): Tiene todos los métodos necesarios para el manejo de datos, tanto jerárquicos como el XML, secuenciales como los Streams, consultas declarativas integradas en el lenguaje (LinQ), enlace a datos en la interfaz y demás.
Dynamic Language Runtime (DLR): Nos permite hacer uso de los lenguajes de programación dinámicos como JavaScript Managed, IronPython, IronRuby o lenguajes funcionales como F#.
Windows Presentation Foundation (WPF): Este quizás es el más importante de Silverlight, ya que es donde engloba el Presentation Core y el XAML.

Presentation Core: Contiene todos los controles, el acceso a derechos de contenido multimedia (DRM), el DeepZoom, los métodos de entrada (teclado, ratón, pantalla), todo el sistema de animaciones, la forma de integrar los enlaces a datos en la propia interfaz, etc.
XAML: Es la gran estrella en todo esta tecnología, ya que con muy pocas líneas de código de marcado, nos permite instanciar objetos que de forma imperativa estábamos perdiendo mucho tiempo. Llegando al punto de la integración de equipos de diseño gráfico donde no se tendrían que mezclar con herramientas de programadores.

Si bien ahora, todo esto te queda un poco grande, a medida que avancemos en este tutorial verás viendo como cada una de las partes que aquí simplemente describimos, van cobrando sentido en nuestras aplicaciones Silverlight.

¿Cómo funciona?

Cuando compilamos con Silverlight / .NET, lo que estamos haciendo es, desde un punto de vista de la plataforma (sin ningún lenguaje de programación especifico), coger código someterlo a un compilador que lo transforma en lo que Microsoft llama ensamblado. Dicho ensamblado escrito en un lenguaje similar a ensamblador, en tiempo de ejecución se compila a código nativo (normalmente en el primer uso nada más) y este es el que se ejecuta. Queda bien ilustrado con la siguiente figura:

En el caso de Silverlight, contamos con un proceso intermedio:

Esto se debe a que la generación a código nativo la hace el propio plugin de Silverlight en el navegador. Además una aplicación Silverlight puede contener X ensamblados y X recursos (imágenes, videos, etc.), eso no se debería descargar elemento a elemento, sino que es mejor empaquetarlo en un único fichero comprimido (con el algoritmo gzip). Y para eso se crear el fichero .xap, ya que es el que se mandará el navegador.

El empaquetado de recursos tienes sus matices, es bueno incluirlo en el XAP siempre y cuando sean recursos de poco peso para la aplicación. En caso de que sea un tamaño considerable, este se debería descargar asíncronamente bajo petición de la aplicación (y cacheado posteriormente a poder ser).

El diseñador tiene su sitio

En la primera parte apenas citamos el XAML (Xml Application Markup Language), un nuevo lenguaje creado para Silverlight, a lo largo de esta segunda parte hemos hablado de lo que nos proporciona la plataforma para manejarlo. Pero solo hablamos muy por encima de lo que era.

XAML ha nacido con varios objetivos muy claros, el más claro es la división entre diseñador y programador, de tal forma que el diseñador solamente tenga que trabajar con el XAML usando los recursos que el programador con XAML y el lenguaje que escoja le provea, pero de esto hablaremos más adelante.

Pero además intenta llevar a su máxima expresión el patrón Módelo-Vista-Controlador (MVC). Pero para su adaptación a Silverlight, Microsoft ha creado un derivado de este patrón llamado Modelo-Vista-VistaModelo, con las modificaciones que se hizo sobre el MVC original, se omite el Controlador y en cambio se crea un una adaptación del Modelo para cada Vista y a mayores la Vista puede acceder directamente al Modelo.

Manos a la obra

Hemos hablado de que el programador y el diseñador pueden convivir en un proyecto en paralelo, para ello hay que definir bien las funciones de cada uno y ver cómo pueden colaborar entre ellos. Sobre el ciclo de vida completo hablaremos en próximas entregas, ahora haremos un vista rápida de cómo pueden colaborar.

Aun que, de momento, no hemos visto nada de código. Podemos ir hablando de cómo pueden colaborar los dos roles principales en el desarrollo de una aplicación Silverlight.

Normalmente a la hora de diseñar una interfaz contamos con 3 partes fundamentales: esbozar, prototipar y diseñar/desarrollar. Normalmente el esbozo lo hace el analista en colaboración con el cliente, el prototipo lo hace solo el diseñador y diseño y desarrollo final lo hacen entre programador y diseñador, cada uno su rol.

En este caso el proceso sería el siguiente:

El analista hace el esbozo (en blanco y negro) ya usando los controles de Silverlight (con un estilo especial para remarcar que es un esbozo)
El diseñador partiendo de ese esbozo hace un prototipo funcional (con datos de ejemplo y sin procesos de negocio)
El programador otorga al prototipo los procesos de negocio para ser completamente funcional

Exceptuando el primer paso los dos siguientes pueden convivir juntos, el programador puede darle funcionalidad sin molestar al diseñador.

Pero el papel del programador no se limita a eso. Este le puede preparar recursos al diseñador para que use:

Controles de usuario: A pesar de que Silverlight tiene una buena cantidad de controles, que además son ampliados por la comunidad en el Silverlight Toolkit, el programador puede desarrollar sus propios controles para que el diseñador pueda usar directamente en la interfaz.
Comportamientos: Los comportamientos (conocidos como Behaviors) se usan para añadir funcionalidad a controles ya sea de forma genérica a cualquiera existente o alguno específico. Algún ejemplo de ellos podría ser una máquina de físicas para otorgar a los controles propiedades físicas como gravedad.
Efectos: Los efectos se pueden desarrollar usando el lenguaje HLSL y las librerías de DirectX. Con ello creamos los llamados Pixel Shaders. Por defecto son dos los que tienen el Blur (Difuminado) y DropShadow (Sombra).

En la primera demo de este tutorial vamos a ver como empezar a hacer algo con Silverlight. Recuerdo que en la primera entrega cité el software necesario para programar con Silverlight. A día de hoy tenemos otra alternativa, de la cual hablaremos en la siguiente entrega, que es MonoDevelop con soporte a Moonlight (Compatible con Silverlight 2.0 y 3.0 de forma experimental).

Esta primera demo la haremos con Visual Studio 2010 y Silverlight 4 SDK. Para eso veremos el proceso para crear un nuevo proyecto:

Abrimos Visual Studio 2010 y creamos un nuevo proyecto: Seleccionamos Visual C#>Silverlight>Silverlight Application

A continuación nos preguntará si queremos crear también un proyecto Web que aloje la aplicación, para esta primera demo le diremos que no.

Como podéis ver el proyecto generado tiene 2 ficheros, acabamos con extensión XAML:

App.xaml: Todas las aplicaciones Silverlight lo tienen, es el encargado de gestionar al carga del contenido, el que gestiona los errores como último nivel, cuando la aplicación se inicia, etc. En general se encarga de todo el ciclo de vida de la aplicación Silverlight.
MainPage.xaml: Será el contenido principal que se pintará al ejecutar nuestra aplicación.

Para nuestra primera demo tan solo vamos a dibujar los últimos artículos publicados en Ontuts, para ello debemos editar el fichero MainPage.xaml y añadir un control ListBox.

Para continuar, debemos añadir la referencia System.Xml.Linq.

Una vez lo tengamos añadido debemos editar el código C# de la página principal.

Y en el cargar los últimos titulares de Ontuts, usando su RSS, como se muestra a continuación:

using System;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Net;
using System.Xml.Linq;

namespace SilverlightApplication1
{
    public partial class MainPage : UserControl
    {
        Uri feed = new Uri("http://feeds.feedburner.com/web-ontuts", UriKind.Absolute);

        public MainPage()
        {
            InitializeComponent();
            Loaded += MainPage_Loaded;
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {

            // El objeto WebClient nos permite descargar
            // conteindo de otras páginas
            var webClient = new WebClient();
            // Establecemos el método que gestionará la descarga
            webClient.DownloadStringCompleted += webClient_DownloadStringCompleted;
            // Solitamos la descarga del feed
            webClient.DownloadStringAsync(feed);
        }

        void webClient_DownloadStringCompleted(object sender, object args)
        {
            var e = (DownloadStringCompletedEventArgs)args;
            // Comprobamos que no hay error
            if (e.Error != null) return;
            // Parseamos mediante LinqToXml el resultado
            var doc = XDocument.Parse(e.Result);
            // Obtemos con una consulta Linq los titulos de las entradas
            var query = from n in XDocument.Parse(e.Result).Descendants("item")
                                           select n.Element("title").Value;
            // Establecemos los titulos al ListBox
            TitularesListBox.ItemsSource = query;
        }
    }
}

Una vez esté hecho, con refrescar la página (F5 en Windows) ya se nos cargará en el navegador nuestra aplicación y podremos depurarla.

Y eso es todo, espero que haya quedado lo suficientemente claro .

Referencias

Os dejo con algunas referencias y fuentes que me han ayudado e inspirado a completar esta segunda parte del tutorial.

Enlaces

Silverlight: http://silverlight.net
Visual Studio: http://msdn.microsoft.com/vstudio
Expression: http://expression.microsoft.com
Moonlight: http://www.go-mono.com/moonlight
Eclipese Tools For Silverlight: http://www.eclipse4sl.org

Libros

Reflexión final: ¿Vamos a por un tercero?

Otra vez me debo disculpar, por haber tardado tanto en escribir la segunda parte. Pero ahora, que he cogido carrerilla, no me quiero quedar aquí.

Comentad qué os parece el enfoque, qué os gustaría leer sobre el tema, etc. Estamos abiertos a propuestas para continuar siendo de interés para vosotros.

¡Nos vemos en la próxima publicación!

Aplicaciones Multilenguaje PHP

Iván Guardado — Tue, 22 Jun 2010 10:36:35 +0000

Introducción

Hoy en día, gracias a Internet, tenemos la capacidad de llegar a cualquier persona del mundo, desde al vecino del quinto hasta alguien perdido en algún lugar remoto de las antípodas. Esto es una enorme ventaja que no se puede desaprovechar cuando tienes un nicho de mercado global.

Si tu web ofrece un servicio o información que puede ser consumido por cualquier persona del mundo, tienes que cuidar muchos detalles para que el usuario final se sienta satisfecho y conforme. Se tiene que sentir como en casa.

Es importante presentar al usuario una web adaptada a su localización, tanto en idioma como en formatos (fecha, moneda, etc…) de forma que su experiencia en el sitio sea buena y así, mejorar la calidad de las visitas.

Sin embargo, tener una web en varios idiomas es algo complejo, tanto desde punto de vista técnico (que es la parte que ocuparemos en este artículo) como de mantenimiento. A continuación veremos los distintos métodos que puedes usar para convertir tu aplicación PHP en multilenguaje.

Formatos para las traducciones

La primera pregunta que te viene a la cabeza cuando comienzas con el diseño de una aplicación multilenguaje es: ¿cómo hago para abstraer los textos de las plantillas? ¿uso un array? ¿uso variables globales? ¿un fichero csv?.

Bien, a continuación os muestro un listado de los métodos más usados con sus ventajas e inconvenientes:

Array

Este es el formato más sencillo para los programadores, pero es ineficaz cuando tienes muchas cadenas de texto o muchos idiomas a traducir. Sin embargo puede ser una buena elección cuando se trata de un sitio pequeño con poco texto y en el cual es el programador quien se encarga de hacer las traducciones (si le pasas un array a alguna persona no técnica para traducir, seguramente se cargue algo).

Ficheros CSV

Este formato es cómodo cuando es el cliente (persona no técnica) el que se encarga de la traducción, pues es legible por cualquier editor de texto estándard. Sin embargo, se debe de tener cuidado con la codificación UTF8.

Gettext

Este es uno de los métodos más utilizados. gettext es la biblioteca GNU de internacionalización usada para crear programas de interfaz en múltiples lenguajes, y que en los últimos años ha dado el salto al mundo web.

Es un formato de traducción profesional, ya que no es legible como texto plano, sino que necesitas un programa de edición como POEdit, que evitará problemas de codificación y hará del proceso de traducción una experiencia más agradable. PHP incorpora funciones para trabajar con esta librería de forma nativa.

Ficheros Ini

Tiene las mismas características que los ficheros CSV, lo único que cambia es la forma de organizar los textos. Es un formato legible por el ser humano y adecuado para que el cliente edite los ficheros sin complicaciones. Se debe tener especial cuidado con la codificación UTF8.

TMX

Este formato será usado por clientes que tengan varios sistemas que usan una única fuente de traducción, o cuando la fuente de traducción necesita ser independiente del sistema (system-independent). TMX es un fichero basado en XML que parece encaminado a ser el próximo estándard en la industria.

Este tipo de ficheros son legibles por el ser humano, pero su procesamiento es más lento que el de ficheros gettext.

Usando gettext en PHP

De todos los formatos que he citado anteriormente, he elegido este para mostrar una implementación porque para mí es el más cómodo y profesional tanto para los traductores como para los programadores.

Primer paso: Instalar un editor y crear un catálogo

Como ya os he comentado antes, para este formato se necesita un editor capaz de manejar este tipo de ficheros. Yo os recomiendo POEdit, que es fácil de instalar y de aprender a manejar.

Antes de nada, tenéis que saber como funciona el programa, ya que, seguramente si no os lo dicen, no conseguiréis hacer nada con él. El concepto general de su funcionamiento sería el siguiente:

Le especificamos en que directorio(s) se encuentran los ficheros que contendrán los textos traducibles.
Le especificamos cual será lar marca que identificará que textos son traducibles. Normalmente el guión bajo (_) .
El programa se encarga de buscar en todos los ficheros, los textos traducibles y los añade a una lista para su traducción.

Vamos entonces a crear nuestro primer catálogo. Teniendo en cuenta que tenemos un fichero como el siguiente en /path/templates/template.php en donde path es el directorio del proyecto:

Aquí hay que destacar el uso de la funcion _ (guión bajo). Dicha función nos ofrece dos cosas: por un lado, es un alias de la función de PHP gettext, por lo tanto se encargará automáticamente de traducir ese texto una vez configurado. Y por otro lado ayudará al POEdit a encontrar las cadenas de texto traducibles.

Abrimos POEdit y vamos a Archivo > Nuevo catálogo y rellenamos información relativa al proyecto:

En la pestaña Carpetas debes indicar en que directorio se encuentran los ficheros con textos traducibles:

Y en la pestaña Palabras Clave seleccionamos cual va a ser el identificador de los textos traducibles. Como hemos dicho antes, lo más común es el guion bajo (_):

Una vez acaba la configuración, os pedirá en donde queréis guardar el fichero. Lo guardamos en /path/locale/en_US/LC_MESSAGES/app.po . En ese directorio, se creará tambien un fichero app.mo, que es el que nos interesa.

Segundo paso: Hacer la traducción

Una vez creado y guardado el catálogo, podemos comenzar la traducción. Como ves, el programa ha detectado los textos traducibles y te los sirve en bandeja para que los traduzcas. Más fácil imposible

Tercer paso: Traducir desde PHP

Como ya hemos dicho, en PHP exite la función gettext que nos permitirá trabajar con el fichero que acabamos de generar. Creamos el fichero /path/index.php

¡Así de sencillo! Ahora PHP ya se encarga de cargar los textos según el locale establecido. Pero…¿cómo lo encuentra si tenemos un esqueleto de carpetas bastante complejo? La respuesta es: tenemos ese esqueleto complejo porque es el que PHP espera tener. Analicemos directorio por directorio la ruta del fichero app.mo:

/path/locale: Con la función bindtextdomain le decimos a PHP que debe de buscar en ese directorio las traducciones.
/path/locale/en_US: Al establecer la configuración local a en_US con las funciones putenv y setlocale, PHP buscará este directorio.
/path/locale/en_US/LC_MESSAGES: este es un directorio en el que PHP busca por defecto.
/path/locale/en_US/LC_MESSAGES/app.mo: Cargará este fichero porque así se le ha especificado en la función textdomain.

Cuarto paso: Agregando nuevos textos

Si vuelves a agregar algun texto a la plantilla, no pasa nada, por defecto se mostrara sin traducir (que ya es algo mejor que nada) y luego simplemente tienes que abrir el catálogo con el editor y pinchar en el botón Actualizar catálogo

Y el programa ya te saca un listado de los nuevos textos que se han añadido:

Reflexion final

Como has visto, existen múltiples metodos para incorporar sistema multilenguaje en tu aplicación web. De ti, del usuario final, y del número de cadenas de texto a traducir depende la elección entre uno u otro, ya que cualquiera puede ser efectivo bajos determinadas condiciones.

Si te decantas por usar gettext, te darás cuenta que lo único que tienes que hacer es definir bien los catálogos y luego todo son ventajas, tanto para los desarrolladores como para los traductores.

Espero que os haya parecido interesante el artículo y que dejéis vuestra opinión sobre el tema…

¡Nos vemos en el próximo artículo!

Creando un Menú Desplegable y Elegante en jQuery

Adrián Mato — Thu, 03 Jun 2010 10:22:49 +0000

Introducción: ¿Qué vamos a hacer?

Retomamos los tutoriales relacionados con javascript y jQuery de la mano de este control en forma de menú desplegable.

Al contrario que otros controles de este tipo, para desplegar este control, el usuario sólo tendrá que pasar el ratón por encima, en lugar de hacer click. Este será el aspecto final del control a crear:

La idea es que las distintas opciones sean mostradas en formato lista (

El control no necesitará hacer el cambio entre sección actualmente activa y la seleccionada, ya que eso se controlaría a la hora de generar la salida html en la lógica de programación (PHP, Java, Python… o lo que quiera que uséis).

Actualización: Por cierto… veo que algunas personas no lo han entendido bien: estamos imprimiendo una salida HTML limpia, por tanto los robots y rastreadores de Google y derivados, podrán indexar y seguir perfectamente todas esas opciones de nuestro menú.

¡Vamos a por el primer paso del tutorial!

Paso 1: La estructura HTML

Como acostumbramos a realizar en nuestros tutoriales, mantendremos una estructura sencilla, intentando que sea vistosa pero sobretodo clara a la hora de comprender qué estamos haciendo:




    
    Cómo crear un menú de pestañas elegante en jQuery
    


    
        Creando un menú desplegable en jQuery
        
			Visualizando: Tutoriales
			Recursos
			Inspiración
			Contacto
			Ver más...

Esto es lo que deberíamos tener actualmente:

Básicamente lo único relevante de este paso es comprender que estamos aplicando la clase de CSS “dropdown” a nuestra lista, con la que estaremos advirtiendo a nuestro futuro código javascript que será un control del tipo desplegable.

Vamos pues a darle un poco de estilo al ejemplo antes de ponernos con la lógica en javascript…

Paso 2: Aplicando estilo con CSS a nuestro menú desplegable

En este caso, el código CSS es muy básico y se centra principalmente en el aspecto visual del control de menú desplegable que estamos creando:

@CHARSET "UTF-8";
/*
Author: Adrian Mato
Author URI: http://web.ontuts.com
*/

/******* GENERAL RESET *******/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
    border:0pt none;
    font-family:inherit;
    font-size:100%;
    font-style:inherit;
    font-weight:inherit;
    margin:0pt;
    padding:0pt;
    vertical-align:baseline;
}
body{
    line-height: 1em;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0pt;
    cursor: default;
    color: #fff;
    background: #262626 url("bg.png") repeat scroll 0 0;
}
table{
    border-collapse: separate;
    border-spacing: 0pt;
}
strong{
    font-weight: 700;
}
caption, th, td{
    font-weight:normal;
    text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after{
    content:"";
}
blockquote, q{
    quotes:"" "";
}
pre{
    font-family: Arial, Helvetica, sans-serif;
}
input{
    border: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}
textarea{
    font-family: Arial, Helvetica, sans-serif;
    color: #888888;
    padding: 7px 3px 0 4px;
    font-size: 11px;
}
select{
    font-size: 11px;
    color: #888888;
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
    border: 1px solid #CAD2CE;
}
ul{
    list-style: none;
    list-style-type: none;
    list-style-position: outside;
}
a{
    cursor: pointer;
    color: #ece6bd;
    text-decoration: underline;
    outline: none !Important;
}
html,body{
    height:100%;
}
.clear{
    clear: both;
    height: 0;
    visibility: hidden;
    display: block;
    line-height: 0;
}
.clearfix{
    overflow: hidden;
}
.italic{
    font-style: italic;
}
/******* /GENERAL RESET *******/

/******* GENERAL *******/
h1{
    color: #fff;
    font-size: 26px;
    line-height: 3em;
}
h2{
    line-height: 2em;
    margin-top: 30px;
    margin-bottom: 20px;
    color: #e4e1cd;
}
.wrapper{
    width: 982px;
    margin: 0pt auto;
    padding-top: 10px;
}
/******* /GENERAL *******/

/******* CONTENT *******/
h3{
    line-height:1em;
    vertical-align:middle;
    height:48px;
    padding:10px 10px 10px 52px;
    font-size:32px;
    color:#E4E1CD;
}
/******* /CONTENT *******/

/******* MENU *******/
ul.dropdown{
	width: 200px;
	border: 1px solid #000;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background: #1a1a1a;
	margin-top: 2em;
}
ul.dropdown li{
	display: none;
	font-size: 12px;
}
ul.dropdown li.active{
	display: block;
	color: #8c8c8c;
	font-size: 14px;
	padding: 12px;
	color: #555;
	border-top: 1px solid #313131;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}
ul.dropdown li.active span{
	background: transparent url("dropdown.png") no-repeat scroll right center;
	padding-right: 24px;
	color: #8c8c8c;
}
ul.dropdown li a{
	display: block;
	text-decoration: none;
	padding: 8px 8px 8px 10px;
	background: #1e1e1e;
	border-bottom: 1px solid #171717;
}
ul.dropdown li.last a{
	border:0;
}
ul.dropdown li.first a{
	border-top: 3px solid #131313;
}
ul.dropdown li a:hover{
	background: #232323;
	color: #fff;
	padding-left: 11px;
}
/******* /MENU *******/

La clase dropdown será con la que identificaremos el control y sobre la cual aplicaremos el resto de propiedades a los distintos elementos.

Así pues todos los elementos de la lista compartirán estilo excepto la clase active la cual aparecerá siempre en el primer puesto de la lista, y será la que identifique el elemento actualmente seleccionado / activo.

Este es el aspecto que presentará ahora nuestro control:

Como habréis podido comprobar, ahora no se están mostrando los elementos de la lista, salvo el elemento activo. Sólo necesitamos crear la lógica para que se muestren / oculten a nuestro antojo via javascript…

¡Vamos a ello!

Paso 3: Añadiendo interacción con javascript mediante jQuery

Repasemos qué es lo que queremos de nuestro control en forma de menú despegable antes de aplicar la interacción:

Mostrar opciones al pasar el ratón por encima.
Ocultar opciones al mover el ratón de encima.
Reutilizable para tener múltiples controles en una misma página.

Con esto en mente, necesitaremos identificar (mediante selectores de jQuery) los elementos de clase “dropdown” para reconocerlos como controles de menú desplegable.

Antes de explicar la parte de los eventos, echemos un vistazo al código final:

//variable global para controles dropdown
var menu = $("ul.dropdown");

//control de eventos
$(this.document).ready(function(){
	menu.mouseover(function(){
		displayOptions($(this).find("li"));
	});
	menu.mouseout(function(){
		hideOptions($(this));
	});
})

//funcion que MUESTRA todos los elementos del menu
function displayOptions(e){
	e.show();
}
//funcion que OCULTA los elementos del menu
function hideOptions(e){
	e.find("li").hide();
	e.find("li.active").show();
}

El código como podéis comprobar es relativamente sencillo, y en el podemos ver la asignación de los eventos “al pasar por encima” y “al quitar el ratón de encima”, los cuales llaman a las funciones:

displayOptions(): Muestra todos los elementos de la lista inicialmente ocultos al pasar el ratón por encima.
hideOptions(): Oculta todos los elementos de la lista, y luego vuelve a mostrar el elemento activo.

La razón por la que mostramos nuevamente el elemento activo es porque el selector de jQuery que estamos empleando está ocultando todos los elementos de la lista, entre los que se incluye el activo, pero deseamos que se mantenga visible.

Antes de dar por finalizado el tutorial, me gustaría resaltar otro detalle del código anterior: la función find(), mediante la cual localizamos los elementos del control que está recibiendo los eventos.

Siempre que programes controles reutilizables, trata de trabajar con referencias al objeto activo, de esta forma podrás reutilizarlos o crear plugins de forma realmente sencilla.

Podríamos estar utilizando selectores de jQuery genéricos pero recordad: queremos que nuestro control pueda aparecer en más de una ocasión en una misma página, por tanto trabajamos con referencias al objeto activo, en lugar de a todos los objetos que contengan la clase de CSS dropdown.

Con todo ello, generar un plugin apartir de este planteamiento sería realmente trivial. Si bien no lo hemos hecho en este tutorial, sí que hemos explicado anteriormente cómo crear plugins en jQuery, echadle un vistazo que es realmente útil.

Reflexión final

Una vez más vuelvo a insistir en lo de siempre: con un poco de curiosidad y ganas por profundizar en lo que nos interesa podemos -en este caso- crear controles dinámicos en javascript de forma realmente sencilla.

Lo más importante es tener claro qué es lo que queremos que haga nuestro control (sus eventos, etc…) y luego buscar la mejor solución posible a cada uno de esos requisitos ya sea con jQuery u otras librerías javascript que manejemos.

Espero que os haya resultado útil y… ¡Nos vemos en el próximo artículo!

Presentando y Utilizando Google Font API y Google Font Directory

Adrián Mato — Thu, 20 May 2010 10:58:53 +0000

Introduciendo Google Font Api y Google Font Directory

Ayer 19 de Mayo de 2010 los chicos de Google presentaban dos grandes y buenas noticias para los desarrolladores / diseñadores web: Google Font API y Google Font Directory.

Su idea es compartir con todos nosotros una biblioteca de fuentes de letra amplia, de gran calidad y open source, conocida como Google Font Directory.

Google comparte una gran biblioteca de fuentes de letra open source listas para utilizar de forma realmente sencilla mediante su Google Font API.

Estas fuentes de letra podrán ser utilizadas mediante la Google Font API con el fin de mejorar el aspecto visual de todos nuestros diseños de manera realmente rápida y sencilla.

Han pasado muchos años y las fuentes de letra “no estándar” siguen sin tener un uso claro y sencillo, teniendo que recurrir a hacks, librerías javascript, objetos flash… todo esto pretende cambiar con CSS3 y su propiedad @font-face, y Google tratará de servir todas estas fuentes através de la nube según los requerimientos de cada navegador.

Ventajas y compatibilidad con múltiples navegadores

Todos aquellos que decidan usar la Google Font API tendrán asegurada la compatibilidad con múltiples navegadores para cualquiera de las fuentes de letra de su biblioteca. Todas estas fuentes tendrán las ventajas de un texto normal y corriente:

Se comportan como texto normal, no hay canvas ni otros objetos.
Indexables y legibles para los buscadores.
Visualmente atractivas y sin pérdida de calidad al hacer zoom.
Accesibles a todo tipo de lectores de pantalla.
Rápido a la hora de cargar las fuentes.

Por si fuera poco, navegadores “obsoletos” como Internet Explorer 6 serán perfectamente soportados por la Google Font API sin aparantemente ningún tipo de hack, canvas ni derivados.

Cómo utilizar la Google Font API

Como nos comentan en su blog, el método de uso es realmente sencillo. Tan sólo necesitamos crear un enlace a la Google Font API especificando las fuentes de letra que deseamos usar y aplicarla mediante selectores CSS en donde deseemos:



	
		
		Ontuts - Ejemplo de Google Fonts API
		
		


	¡Ontuts arrasa por donde pasa!

Este sería el resultado final:

Es realmente potente y sencillo, ¿verdad? No dejéis de mirar el html final que nos genera, es transparente, texto plano de toda la vida… pero con otro aspecto. Nada de canvas, objetos flash ni similares.

Reflexión final

Si bien todavía está en beta, como diseñador web me resulta realmente interesante ver que por fin podremos empezar a plantearnos el uso de fuentes de letra distintas a las habituales, que aporten mayor solidez a nuestros diseños sin necesidad de hacks, trucos baratos o imágenes en lugar de texto.

Me ha parecido una grandísima idea el hecho de que estén abiertos a que los diseñadores contribuyan a la biblioteca y seguramente en próximas semanas no parará de crecer.

Si bien puede parecer un problema, el hecho de que se aloje todo en los servidores de Google nos permitirá visualizar las fuentes de letra mucho más rápidamente ya sea por la velocidad con la que las sirven o por la cache que se irá acumulando a medida que visitemos más sitios que usen este método.

¿Qué opinión os merece a vosotros todo esto?

Reducir el tiempo de carga Web: Optimizando imágenes PNG

Adrián Mato — Tue, 11 May 2010 08:58:19 +0000

Este tutorial forma parte de una serie

¿Por qué optimizar las imágenes?

Como habíamos visto en el primer capítulo sobre minimizar las peticiones HTTP, estábamos intentando reducir el número de peticiones HTTP combinando todas nuestras imágenes en una única imagen. Reduciendo el número de imágenes estamos reduciendo también el número de peticiones HTTP.

Una vez tenemos claro el formato de imagen que nos conviene es importante optimizar cada una de nuestras imágenes para reducir su tiempo de carga lo máximo posible.

Ahora que tenemos un menor número de imágenes a cargar, necesitamos reducir el tamaño de estos archivos en disco, reduciendo así el tiempo de carga de nuestra web.

En este artículo trataremos de conocer la forma en la que podemos reducir el peso de las imágenes .PNG.

¿Cómo reducir el tamaño de la imagen sin perder calidad?

Las imágenes PNG contienen una serie de datos que pueden llegar a ser útiles en numerosas ocasiones, pero esta información carecerá en su mayoría de utilidad a la hora de crear y diseñar un sitio web. A esta información se le conoce como metadata y puede ser:

Información sobre la cámara.
Fecha y hora de la foto.
Miniaturas de vista previa e incluso audio.
Información específica de la aplicación (por ejemplo Photoshop).
Comentarios acerca de la imagen.
Y mucho más…

Como habrás podido suponer los fotógrafos pueden encontrar útil esta información acerca de la cámara, comentarios de las fotos, fechas, configuraciones… pero para nuestros diseños web no necesitaremos este tipo de información, sólo queremos mostrar la imagen.

Eliminando la información oculta reduciremos el tamaño de nuestras imágenes, favoreciendo a una mayor rapidez en la carga de las mismas.

Con toda esta información “inútil” por detrás de la foto nuestras imágenes están ocupando más espacio del que deberían, vamos a ver pues cómo eliminarla y favorecer así a una mayor rapidez en la carga de las mismas. ¡Allá vamos!

Optimizando con la herramienta pngcrush

Como hemos estado comentando a lo largo de esta serie de artículos, PNG es un formato sin pérdida, por lo que podremos realizar una gran cantidad de operaciones y guardado sin pérdida de calidad respecto a la imagen original (no hablamos de reducir la paleta de colores por supuesto, aunque hay excepciones).

Partiendo de la introducción a esta entrada, eliminaremos la información innecesaria mediante la herramienta pngcrush.

Uso de comandos pngcrush para optimizar las imágenes PNG

Si todavía no habéis descargado pngcrush hacedlo, y a continuación probamos el siguiente comando:

pngcrush -rem all -brute -reduce imagen_original.png imagen_final.png

Analicemos algunas de las opciones que hemos usado:

-rem elimina todos los bytes innecesarios, pero mantiene el de transparencia.
-reduce tratará de eliminar aquellos colores que no están siendo utilizados en la paleta de colores.
-brute probará una gran cantidad de métodos para optimizar al máximo la imagen. En muchos casos no consigue optimizar, pero si estamos en una situación “offline” no perdemos nada por intentarlo. En escenarios de máximo rendimiento / online no es aconsejable ya que es un proceso realmente lento.

Eliminar la información (metadata) de la imagen hará que también se elimine el copyright de la misma, así que tened cuidado, quizás sí os interese / debáis mantener dicha información.

Existen muchas otras alternativas… ¡echemos un vistazo!

Alternativas a pngcrush

Como siempre, nosotros hemos escogido pngcrush, pero existen multitud de alternativas en la web, tan sólo hay que buscarlas y probarlas:

Para terminar, simplemente comentar que es importante probar las distintas opciones disponibles para lograr la mejor configuración para nuestro proyecto y caso de uso. No es lo mismo trabajar en entornos online con recursos limitados que en entornos offline donde podemos tener mayor capacidad y recursos.

Reflexión final

Al igual que en el artículo anterior, con un poco de investigación, uso de las herramientas apropiadas y sentido común podemos conseguir optimizar nuestros sitios web de manera relativamente sencilla.

Ahora que controlamos de forma básica la optimización de los tres tipos de imágenes más utilizados en la web (GIF, JPEG y PNG), sólo nos queda seguir mejorando e investigando estos métodos… no dudéis en compartirlos con todos en los comentarios.

¡Nos vemos en la próxima publicación!

Tutoriales de Desarrollo y Diseño Web | Web.Ontuts » Tutoriales

contentEditable: Contenido editable en HTML5

¿Qué es contentEditable?

Aprendiendo a utilizar contentEditable en HTML5

Tareas a realizar la próxima semana:

El código CSS