Pixelovers

SIFO, el framework de PHP5 para aplicaciones del mundo real

juanmaguitar — Sun, 23 Oct 2011 12:00:00 GMT

¿Qué es SIFO?

SIFO es un framework que surge de la necesidad de reaprovechar todas las soluciones "definitivas" que se iban descubriendo en el trabajo del día a día, y que se podian utilizar en más proyectos.

Con soluciones "definitivas" me refiero a las soluciones que despues de haber sido probadas en el mundo real han demostrado ser la mejor opción (cómo implementar la internacionalización, el trabajo en multiples entornos, la cache, el debug, etc...)

Lleva ya funcionando un tiempo en algunos sitios, tanto sitios de mucho trafico con multiples servidores cómo en sitios más modestos, asi que su practicidad y flexibilidad está más que probada.

SIFO contiene un montón de librerias y clases que resuelven de forma sencilla los problemas básicos que te vas a encontrar en el desarrollo de un sitio web, lo que te permite centrar tu atención en resolver la lógica de tu negocio.

Además es gratuito!

Concretemos... ¿qué me ofrece SIFO?

Patron MVC

SIFO utliiza el patrón MVC (Modelo-Vista-Controlador) para separar tu proyecto en 3 capas:

Modelos: Contienen la lógica de tu negocio. De donde se obtienen los datos (consultas a la base de datos)
Vistas: Son los templates HTML con un poco de lógica (iteraciones). Es la capa de presentación de tu web. Por defecto se utiliza Smarty como sistema de plantillas
Controladores: Combinan las 2 capas anteriores con la lógica necesaria

Múltiples entornos de trabajo

A través del fichero config/domains.config.php podrás configurar tu aplicación para que se comporte diferente segun el entorno (dominio) en el que estés. Lo normal es utilizar al menos 2 dominios: Uno para producción [mycoolsite.com] y otro local para desarrollo [mycoolsite.local]

Entre otras cosas, puedes configurar para cada entorno:

Mostrar/Ocultar el debug
Los idiomas que acepta tu aplicación
Los datos de acceso a los diferentes servicios, comandos de inicio, configuraciones master/slave (mysql)

Routing

Cuando escribes una URL hay un mapeo que relaciona esa dirección con el controlador que debe contestar. Este mapeo está en el archivo config/router.config.php.

Si quieres utilizar URL's traducidas puedes utilizar los archivos config/router_xx_XX.config.php. (donde xx_XX es el country code).

Debug potente

El debug de SIFO te muestra un monton de información interesante sobre tu aplicacion:

Benchmark: Analisis completo de los tiempos de ejecución por archivo y por metodo
Parámetros que recibe cada controlador
Valores que recibe cada template (smarty)
Queries ejecutadas por la Base de Datos
Datos almacenados en la sesion (y poder hacer kill session)
Datos almacenados en las cookies del usuario
Control de la cache

Multilenguaje

Con SIFO podrá hacer tu proyecto multilenguaje de una forma sencilla. Incluso tiene herramientas de traducción (basadas en archivos de configuracion o en bases de datos) que puedes utilizar para que tus colegas "no-programadores" te ayuden a introducir las traducciones.

Todos los templates de smarty vienen con los plugins i18n que te permiten hacer tus templates en un único lenguaje e indicar qué frases deben ser traducidas.

Herencia entre proyectos

La herencia entre proyectos te permitirá crear varios proyectos (instancias) basados en un "padre".

Asi, estos proyectos heredaran del "padre" sus configuraciones, templates controladores, modelos, librerias... con la posibilidad de sobreescribir, extender o limitar estas funcionalidades heredadas.

Y mucho mas...

Lazy loading (carga sólo las clases que necesites)
Multiples Bases de Datos (Redis, Oracle, MySQL...)
Crons en PHP desde Linea de Comandos
Distinción entre contenido Dinámico y Estático (utiliza un CDN para tus imagenes, CSS...)
Un montón de clases útiles (Geolocalización, Facebook, Twitter, Sphinx, Amazon...)
Extensible (Utiliza tus propias librerias o clases)
Y mas...

Me has convencido... Quiero probarlo ya!!

Vale, vale.... Pues hay varias formas de conseguir tu copia de SIFO

Desde Github
Desde Google Code

Si no quieres complicarte la vida con sistemas de control de versiones puedes bajarte un archivo comprimido con todo el código de SIFO pero ¡OJO!... no contiene la ultima versión.

Toda la info y documentación (actual y futura) sobre SIFO la puedes encontrar en su sitio oficial

¿Que te ha parecido este framework? ¿Lo conocias? ¿Lo has probado? ¿Conoces alguno similar?

Esperamos vuestros comentarios

Ver álbum de fotos | Leer SIFO, el framework de PHP5 para aplicaciones del mundo real en Pixelovers

¿Te gustaria trabajar en Softonic?

juanmaguitar — Sun, 16 Oct 2011 07:00:00 GMT

Softonic es una empresa grande. Es el portal de descargas de software numero uno a nivel mundial y hace poco superó la cifra de 100 millones de usuarios unicos

Pero ademas es la mejor empresa donde trabajar en España... y estan buscando gente!!!

Lo de que es la mejor empresa para trabajar no sólo lo digo yo (despues de casi 4 años trabajando alli)... lo dice tambien el ranking anual de "Best Workplaces" realizado por la consultora independiente Great Place to Work.

Ha sido la mejor empresa para trabajar en el 2011... pero tambien lo fue en el 2010 y en el 2009

Pinta bien, ¿no?

Softonic es un lugar donde puedes aportar tu creatividad y tus conocimientos, dónde se valora el esfuerzo y donde puedes aprender de uno los equipos técnicos mejor preparados de España.

Pero lo mejor de Softonic sin duda es su gente. Es gente proactiva, emprendedora, responsable... gente a la que le gusta las cosas bien hechas, que mima mucho lo que hace... gente que sabe mucho cada uno de su especialidad... pero sobre todo es MUY BUENA GENTE, con una calidad humana impresionante.

Las oficinas de Barcelona tampoco estan nada mal ;-)

Bueno, pues la empresa no para de crecer y es por eso que Softonic anda buscando talentos para ampliar su plantilla.

De entre todas las vacantes, hay unas cuantas relacionadas con el Diseño y Desarrollo Web que igual te interesan. Entre ellas estan:

Qué, ¿te animas?

Si te animas puedes apuntarte directamente a las ofertas desde Infojobs.

¡Suerte!

Leer ¿Te gustaria trabajar en Softonic? en Pixelovers

Hydra.js, para hacer tus aplicaciones JS modulares y escalables

juanmaguitar — Wed, 12 Oct 2011 11:26:00 GMT

¿Tu JavaScript se va haciendo cada vez mas grande y se está volviendo immanejable? ¿Estas buscando alguna arquitectura que te permita hacer tu aplicacion más escalable?

Para aplicaciones que se van haciendo grandes la mejor solucion es la de aplicar una arquitectura de diseño modular.

Dicho de forma sencilla un modulo seria el código que controla un trozo de HTML (y nada más), o dicho de otra forma, un grupo de HTML + CSS + JS autónomo.

Por ejemplo, en Yahoo utilizan esta arquitectura lo que les permite realizar codigo JS individualmente a cada modulo que implementan. Esto seria un modulo de Yahoo:

En su dia, Nicholas Zakas (ex-Front End Engineer de Yahoo) hizo una presentación de las ventajas de hacer una aplicación con esta arquitectura y de cómo implementarlo.

El esquema general de esta arquitectura es este:

Desde hace unos meses tenemos disponible Hydra.js un gestor de modulos que nos permite implementar todo este sistema de modulos en nuestro site de manera sencilla.

Su autor es Tomas Corral actual Javascript Expert en Softonic.com y Evangelizador del Performance & Buenas Prácticas en el JS.

Algunas de las ventajas de Hydra son:

Ningun módulo conoce la existencia de otros modulos (lo que implica que si falla un modulo, el resto seguiran funcionando)
Un modulo puede notificar algo y le llegará a todos los modulos que esten esuchando
Un modulo puede ser extendido
Los modulos pueden ser testeados mediante Unit Testings
Sólo ocupa 1.5kb comprimido

¿Cómo quedaria un modulo tipo en Hydra? Pues asi:

Hydra.module.register('moduleId', function(action) { return { init: function (oData) { action.listen(['action1', 'action2', 'actionN'], this.handleAction, this); $("#button").click(function(){ action.notify({ type: 'listenedAction', data: 'data' }); }); }, actionHandlers: { action1: function (oData) {}, action2: function (oData) {}, actionN: function (oData) {} }, handleAction: function (oNotifier){ var oHandler = this.actionHandlers[oNotifier.type] if(typeof oHandler === "undefined") { return; } oHandler.call(this, oData); oHandler = null; }, destroy: function () {} }; });

Para más info sobre Hydra puedes visitar su pagina en GitHub desde donde te puedes hacer un clone del proyecto.

¿Que te ha parecido este gestor de modulos? ¿Lo conocias? ¿Has implementado alguna arquitectura similar en tu aplicación? Esperamos vuestros comentarios

Ver álbum de fotos | Leer Hydra.js, para hacer tus aplicaciones JS modulares y escalables en Pixelovers

Los 5 mejores libros para aprender Javascript

juanmaguitar — Sun, 28 Aug 2011 09:20:00 GMT

El otro dia me encontré con un post donde recomendaban libros sobre Javascript para elevar tu nivel. Este post surge a raiz de una discusión que hay en el grupo de Google sobre Javascript JSMentors

La verdad es que coincido bastante con las conclusiones de este post. Pero voy a simplificar mucho más la lista para dejar sólo los 5 libros imprescindibles para pasar de principiante a programador Javascript Avanzado.

Aqui va la lista en el orden que considero que deberian ser leidos:

1.- JavaScript: The Good Parts by Douglas Crockford

Este es el libro de introduccion a Javascript por excelencia.

El libro es corto pero denso. En el podemos encontrar, de manera rigurosa, las caracteristicas principales de este lenguaje sin entrar en conceptos demasiado avanzados.

Douglas Crockford es Arquitecto Senior de Javascript en Yahoo!. Es famoso for introducir y mantener el formato JSON (Javascript Object Notation). Conferenciante habitual sobre Javascript, y miembro del comité ECMAScript.

2.- Object-Oriented JavaScript by Stoyan Stefanov

Para mi este libro, Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications and libraries, es el que más me ha ayudado a entender conceptos claves en Javascript como Closures y Herencia & Prototype. El libro en su conjunto te da una vision clara y actual del lenguaje. Recomendadisimo!!

El autor Stoyan Stefanov, es Performance Gurú en Yahoo! Co-creador de Smush-it y arquitecto de YSlow 2.0. Conferenciante y autor de varios libros sobre JavaScript

3.- Professional JavaScript for Web Developers by Nicholas C. Zakas

Professional JavaScript for Web Developers (Wrox Programmer to Programmer), es una referencia completa del lenguaje y abarca TODOS los aspectos del lenguaje.

Este libro lo deberias leer al menos una vez y tenerlo siempre de referencia.

El autor Nicholas Zakas es un gurú de Javascript y ex-ingeniero FrontEnd de Yahoo!. Conferenciante y autor de varios libros sobre JavaScript

4.- JavaScript Patterns by Stoyan Stefanov

Este libro, JavaScript Patterns, nos enseña cual es la mejor manera de desarrollar una aplicación con Javascript. Nos muestra numerosas buenas practicas y patrones de diseño.

No es un libro para principiantes, pero si te sientes comodo con Javascript y el DOM y quieres "saltar de nivel" y que tu código sea mejor, más eficiente y mantenible... este es tu libro.

5.- Test-Driven JavaScript Development by Christian Johansen

Por ultimo, para "cerrar el circulo" y una vez ya hemos alcanzado un buen nivel de Javascript, deberiamos empezar a aplicar TDD en nuestras aplicaciones Javascript.

Este libro, Test-Driven JavaScript Development (Developer's Library) , es la mejor introduccion que puedes encontrar para empezar a aplicar Unit Testings a tu código JS.

Su autor, Christian Johansen, es un programador noruego, experto en TDD y creador de Sinon.js

¿Que opinas de estos libros? ¿Has leido alguno? ¿Cuál ha sido el que más te ha ayudado? ¿Algun libro que creas que debe estar en esta lista?

Esperamos vuestros comentarios.

Leer Los 5 mejores libros para aprender Javascript en Pixelovers

Los 5 mejores libros sobre Javascript

juanmaguitar — Sun, 28 Aug 2011 09:20:00 GMT

El otro dia me encontré con un post donde recomendaban libros sobre Javascript para elevar tu nivel. Este post surge a raiz de una discusión que hay en el grupo de Google sobre Javascript JSMentors

Aqui va la lista en el orden que considero que deberian ser leidos:

1.- JavaScript: The Good Parts by Douglas Crockford

Este es el libro de introduccion a Javascript por excelencia.

El libro es corto pero denso. En el podemos encontrar, de manera rigurosa, las caracteristicas principales de este lenguaje sin entrar en conceptos demasiado avanzados.

2.- Object-Oriented JavaScript by Stoyan Stefanov

El autor Stoyan Stefanov, es Performance Gurú en Yahoo! Co-creador de Smush-it y arquitecto de YSlow 2.0. Conferenciante y autor de varios libros sobre JavaScript

3.- Professional JavaScript for Web Developers by Nicholas C. Zakas

Este libro: Professional JavaScript for Web Developers (Wrox Programmer to Programmer), es una referencia completa del lenguaje y abarca TODOS los aspectos del lenguaje.

Este libro lo deberias leer al menos una vez y tenerlo siempre de referencia.

El autor Nicholas Zakas es un gurú de Javascript y ex-ingeniero FrontEnd de Yahoo!. Conferenciante y autor de varios libros sobre JavaScript

4.- JavaScript Patterns by Stoyan Stefanov

Este libro: JavaScript Patterns , nos enseña cual es la mejor manera de desarrollar una aplicación con Javascript. Nos muestra numerosas buenas practicas y patrones de diseño.

Este libro no es para principiantes, pero si te sientes comodo con Javascript y el DOM y quieres "saltar de nivel", quieres que tu código sea mejor, más eficiente y mantenible... este es tu libro.

5.- Test-Driven JavaScript Development by Christian Johansen

Por ultimo, para "cerrar el circulo" y una vez ya hemos alcanzado un buen nivel de Javascript, deberiamos empezar a aplicar TDD en nuestras aplicaciones Javascript.

Este libro, Test-Driven JavaScript Development (Developer's Library) , es la mejor introduccion que puedes encontrar para empezar a aplicar Unit Testings a tu código JS.

El autor Christian Johansen es un programador noruego, experto en TDD y creador de Sinon.js

¿Que opinas de estos libros? ¿Has leido alguno? ¿Cuál ha sido el que más te ha ayudado? ¿Algun libro que creas que debe estar en esta lista?

Esperamos vuestros comentarios.

Leer Los 5 mejores libros sobre Javascript en Pixelovers

Git & GitHub, el sistema de control de versiones de moda y su hosting gratuito

juanmaguitar — Sat, 20 Aug 2011 11:50:00 GMT

¿Qué es Git?

Git es un sistema de control de versiones distribuido, gratuito y de código abierto que se ha hecho muy popular en los ultimos tiempos.

Fue diseñado por Linus Torvalds (creador de Linux) y se ha hecho popular sobre todo por ser el sistema utilizado para el control de versiones del kernel de Linux.

Algunos proyectos que se estan desarrollando a traves de Git son el propio Git, Linux Kernel, Perl, Eclipse, Gnome, KDE y Android

Las caracteristicas principales de Git son:

MUY rapido y fácil
Es un sistema distribuido de control de versiones, es decir que no requiere de un repositorio central (como por ejemplo SVN).
Cada copia (clone) que hagamos en nuestra maquina (repositorio local completo) es autosuficiente (commits offline).
Está optimizado para el trabajo con ramas (branches)

¿Qué es GitHub?

Por otro lado tenemos GitHub que es el hosting más grande (y más popular) que hay en la red de repositorios Git (cerca de 1 millon de respositorios públicos).

Ofrece hosting gratuito para proyectos públicos y hosting de pago para proyectos privados.

Algunos proyectos públicos interesantes que puedes encontrar en GitHub son Ruby on Rails, Node.js, jQuery, jQuery UI, Diaspora, Django y Cake PHP

Primeros pasos: Haciendo "Clone" de un Proyecto

El principal motivo por el que habrás oido hablar de Git o de GitHub es por que algun proyecto que te interese estará alojado en GitHub, y quieres bajartelo y trabajar con él en local.

Para hacer esto, lo primero que tendremos que hacer es instalar Git en nuestra maquina y configurarlo para que se entienda con GitHub (nuestro repositorio remoto)

Bajamos e instalamos la última version de Git
Generamos una clave SSH y la configuramos en GitHub
Configuramos nuestra info para que quede reflejada en nuestros commits

En la documentacion de GitHub hay unas guias para hacer todo esto en Mac, Windows y Linux

Una vez hecho esto ya podemos hacer "clone" de un proyecto.

$ git clone https://github.com/octocat/Spoon-Knife.git Cloning into Spoon-Knife... remote: Counting objects: 24, done. remote: Compressing objects: 100% (21/21), done. remote: Total 24 (delta 7), reused 17 (delta 1) Unpacking objects: 100% (24/24), done.

Otra cosa que podemos hacer es lo que se llama hacer "Fork" de un proyecto que consiste en crear otra copia remota a partir de la cual trabajar sin afectar al repositorio original. De esta forma puedes crear un proyecto nuevo basado en otro ya existente o trabajar en una nueva feature de un proyecto.

Una vez hecho el Fork, tendremos que hacer clone de nuestra copia particular

$ git clone git@github.com:username/Spoon-Knife.git

Enlaces y más

Y tu... ¿Que opinas de Git? ¿Y de GitHub? ¿Lo conocias? ¿Cual es tu experiencia con él? ¿Y respecto a otros sistemas de control de versiones como Subversion?

Esperamos vuestros comentarios...

Ver álbum de fotos | Leer Git & GitHub, el sistema de control de versiones de moda y su hosting gratuito en Pixelovers

Las 10 mejores Conferencias Europeas sobre Desarrollo y Diseño Web en el 2011

juanmaguitar — Sun, 22 May 2011 21:00:00 GMT

En el mundo del diseño y el desarrollo web no hay más remedio que estar aprendiendo continuamente. Pero para este aprendizaje continuo a veces, los libros y la red se quedan cortos, o al menos hacen que el proceso de adquirir este conocimiento sea mas lento.

Por eso es interesante asistir a alguna de estas conferencias (A.K.A. workshops, seminarios, etc..). En ellas, en pocos dias, podremos conocer las nuevas tecnologias, herramientas y recursos (muchas veces de la mano de los propios autores), la forma de trabajar de otros profesionales del sector, o simplemente comprender mejor aquello en lo que trabajamos dia a dia.

Asi que aqui os dejo una lista de las que a mi juicio son las 10 conferencias más interesantes que se van a realizar en Europa sobre Diseño y Desarrollo Web durante el 2011.

Ahi van:

1.- London Design Festival

El London Design Festival es una celebración del diseño que durante 9 dias se realizará en la capital de la creatividad mundial. El festival cubre un amplio espectro de disciplinas del diseño.

Cuándo: Del 17 al 25 de Septiembre del 2011

Dónde: Londres (Reino Unido) en diferentes ubicaciones a lo largo de la ciudad

Sitio Web: http://www.londondesignfestival.com/

2.- Fronteers

Fronteers es una organización sin animo de lucro de Desarrolladores front-end holandeses. Entre los objetivos de esta organización estan la profesionalización de este sector, mejorar el reconocimiento de la disciplina front-end, y la mejora de la posición de los desarrolladores front-end holandeses en sus empresas y del diseño/desarrollo web en el mundo en general.

Cuándo: Del 6 al 7 de Octubre del 2011

Dónde: Amsterdam (Holanda) en Pathé Tuschinski

Sitio Web: http://fronteers.nl/

3.- Web Performance Summit

Conferencia online donde se realizaran varias charlas para mejorar el rendimiento de nuestra web. Esta conferencia forma parte de una serie de conferencias online organizadas por Environments for humans

Cuándo: El 25 de Mayo del 2011

Dónde: Online

Sitio Web: http://environmentsforhumans.com/2011/web-performance-summit/

4.- Web Developers Conference

Conferencia organizada y presentada por Alex Older que lleva funcionando desde el 2007. Panoramica general vista por profesionales del sector.

Cuándo: El 21 de Octubre de 2011

Dónde: Bristol (Reino Unido)

Sitio Web: http://webdevconf.com/

5.- Frontend

Conferencia Internacional sobre diseño y desarrollo Frontend.

Cuándo: Del 10 al 12 de Octubre de 2011

Dónde: Oslo (Noruega)

Sitio Web: http://www.frontend2011.com/

6.- UX Camp London

Encuentro de un dia para cualquiera que esté interesado en la experiencia de usuario, el diseño de interacción, la arquitectura de la información o la usabilidad

Cuándo: El 9 de Julio del 2011

Dónde: Richmond, Londres (Reino Unido)

Sitio Web: http://uxcamplondon.org/

7.- NodeCamp

Encuentro de un par de dias con charlas, workshops, debates y más, centradas en Node.js

Cuándo: 11 y 12 de Junio de 2011

Dónde: Colonia (Alemania)

Sitio Web: http://nodecamp.eu/

8.- EuRuKo

La Conferencia europea de referencia sobre el lenguaje Ruby. Cada año se realiza en una ciudad distinta.

Cuándo: 28 y 29 de Mayo de 2011

Dónde: Berlin (Alemania)

Sitio Web: http://euruko2011.org/

9.- Full Frontal

Conferencias sobre Javascript y desarrollo FrontEnd durante un dia. Una de las citas imprescindibles para los Javascripers.

Cuándo: El 11 de Noviembre de 2011

Dónde: Brighton (Reino Unido) en Preston Circus

Sitio Web: http://2011.full-frontal.org/

10.- jsConf EU

"LA" Conferencia de Javascript. Cita anual para todos los programadores Javascript en Europa. Si quieres saber lo que se cuece a nivel mundial en JS no te la puedes perder.

Cuándo: 1 y 2 de Octubre de 2011

Dónde: Berlin (Alemania)

Sitio Web: http://jsconf.eu/2010/save_the_date_october_1st_and.html

... ¿Qué opinas de estas conferencias? ¿Has asistido a alguna de ellas en ediciones anteriores? ¿Alguna conferencia que creas que deba estar en esta lista?

Esperamos vuestros comentarios.

Más info:

Leer Las 10 mejores Conferencias Europeas sobre Desarrollo y Diseño Web en el 2011 en Pixelovers

¿Cómo debemos crear Arrays, Objetos y Funciones en Javascript?

juanmaguitar — Sun, 15 May 2011 10:45:00 GMT

En Javascript existen lo que se llaman las funciones constructoras. Son funciones que nos permiten crear objetos cuando las llamamos con el operador new.

Todos los "tipos de dato" (arrays, funciones, strings...) en Javascript tienen su funcion constructora correspondiente, aunque para crear estos elementos se recomienda utilizar la llamada 'notación literal'

Pero... ¿por qué no conviene usar las funciones constructoras…

new Object()
new Array()
new Function()
new Boolean()
new String()
new Number()

…para crear objetos, arrays, funciones o datos de tipo booleano, string o number?

Las respuesta nos viene de la mano de Douglas Crockford aquí:
http://www.yuiblog.com/blog/2006/11/13/javascript-we-hardly-new-ya/

JavaScript is a prototypal language, but it has a new operator that tries to make it look sort of like a classical language. That tends to confuse programmers, leading to some problematic programming patterns.

You never need to use new Object() in JavaScript. Use the object literal {} instead.

Similarly, don’t use new Array(), use the array literal [] instead. Arrays in JavaScript work nothing like the arrays in Java, and use of the Java-like syntax will confuse you.

Do not use new Number, new String, or new Boolean. These forms produce unnecessary object wrappers. Just use simple literals instead.
Do not use new Function to create function values. Use function expressions instead.

En general es mas limpio (más claro) crear estos elementos con la notación literal y además:

En el caso de new Number, new String y new Boolean lo que creamos son objetos contenedores de estos datos y no el tipo de dato primitivo (ocupa mas memoria innecesaria).

Como los métodos del objeto los podremos usar igual (al llamarlos, JS convertirá el dato en objeto, llamará al método, devolverá el resultado y destruirá el objeto creado) no es necesario crear el objeto de primeras para utilizar sus métodos

En el caso de new Function hace un eval del código que le pasamos, perdemos el lexical scope y mas cosas que hacen que no sea una buena manera de crear una función

Es interesante el comentario de Nicholas C. Zakas en este post:

I think it’s also important to answer the question, “if I’m not supposed to do it, then why am I allowed to?”
In the case of String, Number, Boolean, and Function, these constructors are available so that their prototypes can be augmented, not so they can be instantiated.
Since these are used to create wrappers on the fly, it’s the only way to add new methods to this type of data.

Es por esto que la herramienta JSLint (una herramienta muy recomendable para validar el código) no admite el uso de estas funciones constructoras:

Constructors and new

Constructors are functions that are designed to be used with the new prefix. The new prefix creates a new object based on the function's prototype, and binds that object to the function's implied this parameter. If you neglect to use the new prefix, no new object will be made and this will be bound to the global object. This is a serious mistake.
JSLint enforces the convention that constructor functions be given names with initial uppercase. So…

JSLint does not expect to see a function invocation with an initial uppercase name unless it has the new prefix.

JSLint does not expect to see the new prefix used with functions whose names do not start with initial uppercase. This can be controlled with the newcap option.

JSLint does not expect to see the wrapper forms new Number, new String, new Boolean.

JSLint does not expect to see new Object (use {} instead).

JSLint does not expect to see new Array (use [] instead).

Conclusion:

Para crear Strings, Numbers o Booleans asignamos directamente a nuestra variable el tipo de dato.

Para crear Arrays, Objetos o Funciones utilizaremos la notacion literal

Es decir:

Para crear Arrays utilizaremos --> var myArray = [];
Para crear Objetos utilizaremos --> var myObject = {};
Para crear Funciones utilizaremos --> var myFunction = function () {};
Para crear Strings haremos --> var myString = "";
Para crear Numbers haremos --> var myNumber = 0;
Para crear Booleans haremos --> var myBoolean = false;

Leer ¿Cómo debemos crear Arrays, Objetos y Funciones en Javascript? en Pixelovers

onBeforeUnload: Cómo recordarle al usuario que grabe antes de cerrar una pagina

juanmaguitar — Sun, 06 Feb 2011 22:56:00 GMT

Hace poco me surgió para un proyecto la necesidad de interceptar el cierre de la pestaña del navegador. La idea era que si el usuario estaba editando los datos de un formulario y cerraba la pestaña sin haber guardado estos datos, se le avisara de que iba a perder los datos y se le diera la oportunidad de cancelar el cierre y guardar la información del formulario.

Asi que investigando un poco descubri el evento onBeforeUnload que se comporta de una forma peculiar.

onBeforeUnload se lanza antes de que se descargue el contenido de la pagina, y es una funcion que está integrada en la mayoria de los navegadores. En los navegadores donde no esté definida simplemente se ignora la asignación de este evento.

El tema es que el manejador de este evento debe devolver una cadena que es la que se mostrará al usuario junto con los botones de “Abandonar la página” o “Permanecer en la página”

Asi, para una captura de este evento de la siguiente manera:

window.onbeforeunload = confirmaSalida;

function confirmaSalida()   {

       return "Vas a abandonar esta pagina. Si has hecho algun cambio sin grabar vas a perder todos los datos.";

}

Al cerrar la ventana nos apareceria el aviso. Este aviso tiene diferente formato según el navegador:

En Internet Explorer:

En Firefox:

En Chrome:

Si capturamos este evento deberiamos controlar cuando es necesario mostrar el mensaje (por ejemplo si el usuario no ha modificado ningun dato no deberia aparecer).

Para esto podemos utilizar tranquilamente una variable que se ponga a TRUE cuando deba aparecer el mensaje:

window.onbeforeunload = confirmaSalida;

function confirmaSalida()   {

       if (datosModificadosSinGuardar) {

              return "Vas a abandonar esta pagina. Si has hecho algun cambio sin grabar vas a perder todos los datos.";

       }

}

Si queremos utilizar jQuery, tendremos que modificar el atributo returnValue del objeto que representa al evento:

$(window).bind(“beforeunload”, function(eEvent) {

       if (datosModificadosSinGuardar) {

              eEvent.returnValue "Vas a abandonar esta pagina. Si has hecho algun cambio sin grabar vas a perder todos los datos.";

       }

}

Asi que con onBeforeUnload podemos añadir un detalle extra de seguridad para nuestros usuarios.

¿Qué opinas de esta funcion? ¿La conocias?

Esperamos vuestros comentarios

Ver álbum de fotos | Leer onBeforeUnload: Cómo recordarle al usuario que grabe antes de cerrar una pagina en Pixelovers

10 Extensiones de Firebug que deberias conocer

juanmaguitar — Mon, 24 Jan 2011 19:18:00 GMT

Si estas en el mundo del Desarrollo Web, es muy probable que ya conozcas Firebug.

Este popular plugin de Firefox nos permite, entre otras cosas, hacer debug del Javascript, cambiar el CSS de tus paginas en tiempo real y ver el trafico de red de tu pagina.

Pero aparte de lo que viene de serie, Firebug nos permite añadirle funcionalidades a traves de extensiones. Algunas de estas extensiones se estan convirtiendo en imprescindibles para muchos diseñadores y programadores web.

Asi que aquí os dejo una lista de las 10 extensiones para Firebug que considero más interesantes:

1.- PixelPerfect

La herramienta perfecta para los diseñadores y para los obsesivos del pixel perfectamente colocado (conozco yo a unos cuantos).

Te permite poner como fondo semi-transparente el diseño de tu página web, de forma que luego puedes ajustar el CSS para hacer tu maquetado “pixelarmente” perfecto.

Descargar PixelPerfect

2.- YSlow

YSlow analiza tu sitio web y te muestra un informe de su rendimiento. En este informe sugiere mejoras que puedes acelar para acelerar la carga de tu página.

El analisis que hace YSlow está basado en las reglas que sugiere Yahoo para webs de alto rendimiento desde su Developer Network.

Descargar YSlow

3.- CodeBurner

CodeBurner te permite acceder desde Firebug al material de referencia de HTML y CSS de SitePoint.

Te muestra un pequeño informe con la posibilidad de acceder a la descripción detallada de la propiedad CSS o del tag HTML seleccionado

Descargar CodeBurner

4.- FireQuery

Con este complemento de FireBug podras ver desde la consola o desde el inspector de DOM tus expresiones jQuery (eventos, data, colecciones).

Imprescindible si quieres depurar Javascript bajo jQuery.

Descargar FireQuery

5.- Widerbug

Con esta extensión instalada podras ver Firebug como panel lateral del browser lo que nos permite aprovechar el ancho de las pantallas panorámicas.

Simple pero efectivo, no?

Descargar Widerbug

6.- FireCookie

Con esta extensión podras ver y manejar las cookies desde Firefox de una manera sencilla.

Descargar FireCookie

7.- FireRainbow

FireRainbow colorea tu codigo y te permite aplicar diferentes temas. Muy util sobre todo para la lectura del código JavaScript desde Firebug.

Descargar FireRainbow

8.- FirePHP

Te permite comunicarte con la consola de Firebug desde PHP. Ideal para debuggear desarrollos PHP con llamadas AJAX.

Descargar FirePHP

9.- Jiffy

Esta extensión añade un panel a Firebug que te muestra de forma visual los tiempos de ejecución del JavaScript. Perfecto para analizar el rendimiento de tu JS.

Descargar Jiffy

10.- FireFinder

Con esta herramienta podras localizar rapidamente los elementos HTML de tu paginas mediante selectores CSS o expresiones XPath.

Tambien te puede servir para chequear que tus selectores CSS estan accediendo a los elementos correctos.

Descargar FireFinder

Y hasta aqui la lista...

¿Que opinas de Firebug? ¿Y de estas extensiones? ¿Las has probado? ¿Alguna extension que no esté en la lista y que nos quieras recomendar?

Esperamos vuestros comentarios.

Enlaces y mas

Ver álbum de fotos | Leer 10 Extensiones de Firebug que deberias conocer en Pixelovers

Pixelovers en la jsConf.eu 2010 de Berlin

juanmaguitar — Tue, 05 Oct 2010 22:49:00 GMT

Hace dos fines de semana se celebró en Berlin la versión europea de la conferencia más importante del JavaScript que hay actualmente: la jsConf

Y Pixelovers estuvo alli

Esta conferencia se celebra 2 veces al año (una en EEUU y la otra en Europa) y suele ir la creme de la creme de los desarrolladores en JavaScript. Por poner algunos ejemplos, en la de Berlin estuvieron:

Brendan Eich: Co-fundador y CTO de Mozilla… y creador del lenguaje: JavaScript!
Douglas Crockford: Senior architect en Yahoo!. Creador del formato JSON. Conferenciante y autor de varios libros. El autentico gurú de JavaScript.
Stoyan Stefanov : Performance Gurú en Yahoo! Co-creador de Smush-it y arquitecto de YSlow 2.0. Conferenciante y a autor de varios libros sobre JavaScript. Si quieres aprender JavaScript avanzado, leete sus libros. Muy recomendado.

¿De que se habló este año en la jsConf?

Pues entre otras cosas se habló de:

HTML5 y sus APIs
JavaScript Performance (Buenas practicas para mejorar su rendimiento)
JavaScript y los estandares web
Node.js (JavaScript en el servidor)
Unify (Framework para Desarrollo cross-platform)
PhoneGap (Framework para Desarrollo cross-platform orientado a moviles)
Chakra (el nuevo motor de JavaScript para Internet Explorer 9)
Sockets.io (el jQuery de los sockets)
Editores para JS (Skywriter, el editor online para Javascript de Mozilla y Cloud9 IDE, El IDE de Javascript hecho por Javascripters para Javascripters)
Extensiones para browsers (Chrome, JetPack & Safari 5 )

10 Conclusiones claras de la jsConf

Despues de 2 dias escuchando a desarrolladores de Javascript hablando de diferentes aspectos de este lenguaje, las conclusiones generales que he sacado de todo lo que se habló son las siguientes:

La programación de Javascript en el lado del servidor empieza a ser un asunto serio.
Node.js está de moda.
Microsoft parece que ha hecho las paces con Javascript con su Internet Explorer 9
Que jQuery sea el framework más popular, no quiere decir que sea siempre la mejor opción. Se tiende a confundir programar con jQuery a programar con Javascript
Javascript cada vez tiene menos que envidiarle a Flash en cuanto a gráficos. Flash tiene los dias contados.
HTML5 es muy potente pero su uso aún es limitado (aun hay muchas versiones de navegadores populares que no lo soportan)
Learning Javascript used to mean you weren't a "serious software developer". Today, not learning Javascript means the same thing (James Governer)
IE6 must die (Douglas Crockford)
El desarrollo web es cada vez más cross-platform
Los programadores de Javascript tenemos que fomentar el uso correcto de este lenguaje promocionando una buena documentacion.

Enlaces y más

Leer Pixelovers en la jsConf.eu 2010 de Berlin en Pixelovers

10 Blogs sobre Diseño y Desarrollo Web en castellano que deberías estar siguiendo

juanmaguitar — Mon, 06 Sep 2010 08:00:00 GMT

Encontrar blogs en castellano y de calidad sobre Diseño y Desarrollo Web no es nada fácil.

Si bien en inglés tenemos un montón de blogs excelentes como puede ser cualquiera de la red de Smashing Network, en castellano la cosa cambia.

Asi que en este post quiero compartir con vosotros una lista (totalmente subjetiva) de blogs que me gustan y que comparten ciertas caracteristicas:

Todos los blogs estan en castellano.
La mayor parte de su contenido se centra en JavaScript, XTHML, CSS, PHP y en general en el Diseño y Desarrollo Web.
Son actualizados con bastante frecuencia.
En ellos podemos encontrar recursos, novedades y referencias prácticas y muy interesantes.
Utilizan un lenguaje claro y cercano.

No son todos los que estan, ni estan todos los que son, pero si creo que esta es una serie de blogs a los que merece la pena seguirles la pista.

Ahí van…

1.- aNieto2K

El Blog de Andrés Nieto nos ofrece desde Palma de Mallorca (España) articulos de gran calidad sobre (como él dice) “Desarrollo Web, Wordpress, y algunas cosillas mas…”. Toda una referencia en castellano del Desarrollo Web.

Blog: http://www.anieto2k.com/

Twitter: @aNieto2k

2.- Web.Ontuts

Desde este blog, la gente de Cokidoo nos ofrece tutoriales, recursos, y sites de inspiración sobre diseño y desarrollo web. Muy recomendable.

Blog: http://web.ontuts.com/

Twitter: @ontuts

3.- Pixelco Blog

Desde Argentina nos viene Pixelco Blog.

En él Diego Cambiaso y un grupo de colaboradores nos hablan de diseño, desarrollo, estándares, Internet y tecnología. Postean varios artículos… al día!

Blog: http://pixelcoblog.com/

Twitter: @diegocambiaso

4.- Intenta

Intenta es el blog personal de Francisco López.

El blog inició su andadura en el año 2004 y en él puedes encontrar articulos prácticos y recursos muy útiles.

Blog: http://www.webintenta.com/

Twitter: @webintenta

5.- dzign.us

Colección de artículos, recursos, enlaces y cosas interesantes sobre HTML, CSS, JS, PHP y Diseño Gráfico.

Este Blog nos viene desde Argentina de la mano de Leandro D'Onofrio, actualmente diseñador web senior de Despegar.com

Blog: http://dzign.us/

Twitter: @dzignus

6.- Craftyman

Blog centrado en el Desarrollo Web que nos viene desde Perú de la mano de Cesar Mancilla.

En el encontraras articulos de CSS, Javascript, PHP y del Desarrollo Web en general.

Blog: http://craftyman.net/

Twitter: @craftyman

7.- Dieggo Mattei Blog

Otro blog desde Argentina, pero éste mas centrado en el Diseño Web.

Diego Mattei, diseñador freelance, nos ofrece multitud de recursos del mundo Adobe y sobre todo los relacionados con Photoshop.

Blog: http://diegomattei.com.ar/

Twiter: @diego_mattei

8.- La Webera

En la Webera tratan temas útiles para la creación web. Desde las últimas noticias sobre posicionamiento en buscadores, técnicas de promoción web, marketing online, CSS y HTML, hasta referencias sobre herramientas para webmasters y páginas de interés.

Blog: http://www.blog.lawebera.es/

Twitter: @lawebera

9.- Creativos Online

Este Blog forma parte de la red de Blogs “Actualidad Blog” y en él podemos encontrar artículos interesante sobre Diseño Grafico y Diseño Web.

Blog: http://www.creativosonline.org/blog/

Twitter: @creativosblog

10.- Pixelovers

Ejem… Ya os habia dicho que esta lista era totalmente subjetiva

Bromas aparte, no seria coherente con el trabajo que realizamos desde Pixelovers para intentar ofrecer articulos interesantes sobre Diseño y Desarrollo Web si no os recomendara nuestro propio blog.

Asi que, ya que estas aqui... echale un vistazo al resto de articulos del blog y opina tu mismo.

Yo desde luego seguiria a Pixelovers

Blog: http://www.pixelovers.com/

Twitter: @pixelovers

¿Qué te ha parecido esta lista? ¿Conocias estos blogs? ¿Qué te parecen? ¿Algun blog que crees que deberia estar aquí?

Esperamos vuestro comentarios.

Ver álbum de fotos | Leer 10 Blogs sobre Diseño y Desarrollo Web en castellano que deberías estar siguiendo en Pixelovers

Codificando XHTML y CSS más rapido con Zen-Coding

juanmaguitar — Mon, 30 Aug 2010 08:00:00 GMT

Zen Coding es un plugin que está disponible para casi todos los editores del mercado y con el que podras codificar HTML/XML/CSS a gran velocidad.

Este plugin nos ofrece dos funcionalidades:

Expansión de abreviaciones: con unas abreviaciones determinadas (muy sencillas, ya que son muy parecidas a los selectores de CSS) podremos generar gran cantidad código HTML/XML/CSS con una simple combinación de teclas.
Selección de bloques (pares de tags): Pudiendo realizar una serie de acciones como seleccionar pares de tags, ir a zonas editables de los tags, envolver (wrap) un bloque con otras abreviaciones, comentar/borrar bloques y más cosas.

Para que veais lo que se puede hacer con este plugin os dejo aquí un video.

También hay disponible una demo online desde la que podeis probar su funcionamiento via web (CTRL+E para expandir, requiere Javascript)

Ejemplos

Veamos un ejemplo sencillo. Esta abreviación :

 div#page>div.logo+ul#navigation>li*5>a

Nos generaria lo siguiente (con una combinación de teclas que depende del editor, pero normalmente CTRL + ,)

 <div id="page"> <div></div> <ul id="navigation"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </div>

Otro ejemplo mas completo. La siguiente abreviación:

 html:xs>(div#header.header>img.logo[src="http://www.google.es" title="logo" alt= "logo"])+(div#content.content>h1+p*5)+(div#footer.footer>ul>li*5>a[href="./"])

Nos generaria el siguiente código:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title></title> </head> <body> <div id="header"> <img src="http://www.google.es" alt="logo" class="logo" title="logo" /> </div> <div id="content"> <h1></h1> <p></p> <p></p> <p></p> <p></p> <p></p> </div> <div id="footer"> <ul> <li><a href="./"></a></li> <li><a href="./"></a></li> <li><a href="./"></a></li> <li><a href="./"></a></li> <li><a href="./"></a></li> </ul> </div> </body> </html>

Mola , eh?

Editores

Hay una serie de plugins oficiales (desarrollados por el equipo de Zen Coding y con todas las caracteristicas de Zen Coding)

Aptana/Eclipse (crossplatform)
TextMate (Mac).
Coda (Mac)
Espresso (Mac)
Komodo Edit/IDE (crossplatform)
Notepad++ (Windows)
PSPad (Windows)
<textarea> (browser-based)
editArea (browser-based)

Pero ademas hay plugins desarrollados por terceros (en los que no se garantiza que esten disponibles todas las funcionalidades de Zen Coding) como pueden ser los de Dreamweaver o los de Vim

Puedes acceder a todos los plugins disponibles para los editores desde aquí o desde aquí

Enlaces y mas

En definitiva, esta es una herramienta de las que dices “¿Dónde has estado toda mi vida?”. Se acostumbra uno muy rapido a utilizarla ya que te ahorra muuuuuucho tiempo a la hora de codificar HTML/XML/CSS. Dentro de poco os vereis haciendo "CTRL + ," en cualquier editor de textos

¿Qué os parece esta herramienta? ¿La conocíais? ¿Conoceis alguna herramienta similar?

Esperamos vuestros comentarios.

Leer Codificando XHTML y CSS más rapido con Zen-Coding en Pixelovers

Sticky Footer: Como mantener el Footer en la parte inferior del navegador

juanmaguitar — Tue, 24 Aug 2010 08:02:00 GMT

En la maquetación de nuestros sitios web nos encontramos muchas veces con que tenemos que solucionar un pequeño problema: necesitamos mantener el footer pegado al pie de la pagina sea como sea el contenido de esta.

Este tipo de problema con el Footer tambien lo puedes encontrar por la red con el nombre de “Sticky Footer “ (Pie de pagina pegajoso) y aunque hay varias soluciones por la red, yo voy a compartir aquí una que me funciona muy bien. Y si algo te funciona, ¿para que cambiar? ¿No?

Asi que, resumiendo… ¿cómo se va a comportar nuestro Footer cuando apliquemos esta tecnica?

Que hay mucho contenido… pues la pagina hará su Scroll (como mandan los canones) y debajo de todo tendremos a nuestro Footer

Que hay poco contenido… pues veremos toda nuestra pagina sin Scroll y ahí debajo bien situado, pegadito al borde de abajo, veremos a nuestro Footer saludando

Esta técnica nos viene de la mano de Ryan Fait y lo unico que hay que hacer es añadir un DIV de mas.

Es decir para una estructura HTML como esta…


 <body>

 <div id="container">
 <div id="header"> … </div>
 <div id=”content”> … </div>

 <div class="push"></div>
 </div> 
 <div id=”footer”> … </div> 

 </body>

aplicaríamos este CSS …


 * { margin: 0; }
 html, body { height: 100%; }
 /* El margin-bottom de container es el valor negativo de la altura del footer */ 
 #container { min-height: 100%; height: auto !important; height: 100%; 
 margin: 0 auto -4em;  }
 /* .push debe tener la misma altura que footer */
 #footer, .push { height: 4em; clear:both; }

Puedes ver un ejemplo de esta tecnica de la mano del propio autor.

¿Y tu? ¿Conoces alguna otra técnica “definitiva” para solucionar este problema?

Esperamos vuestros comentarios

Leer Sticky Footer: Como mantener el Footer en la parte inferior del navegador en Pixelovers

jQuery Mobile: jQuery para teléfonos moviles

juanmaguitar — Thu, 19 Aug 2010 20:19:00 GMT

http://static.obolog.net/multimedia/fotos/861000/860626/860626-284172.jpg

John Resig (creador de jQuery), nos presentaba hace unos dias oficialmente el nuevo proyecto del equipo de jQuery: jQuery Mobile.

Hasta ahora, para el desarrollo frontend de webs para dispositivos moviles habia que utilizar plantillas de diseño que podiamos encontrar por la red y plugins del tipo jQTouch, pero no habia una solucion integrada y estable… hasta ahora.

El objetivo de jQuery Mobile es el de ofrecer las herramientas necesarias para “desarrollar JavaScript de alto nivel y con un interfaz unificado, que funcione en los navegadores de los dispositivos moviles mas utilizados”… suena bien, no?

Entre otras cosas, este Framework nos ofrece unas plantillas optimizadas para moviles con la idea de unificar el diseño de widgets y layouts.

Podeis ver algunos de estos diseños aquí

Pero la principal diferencia que ofrece este nuevo Framework es la amplia variedad de navegadores para moviles con la que estan trabajando para ofrecer la maxima compatibilidad.

Para conseguir esto, estan utilizando una tabla llamada Graded Browser Support (ideada por Yahoo) en la que se clasifican los browsers y dispositivos en diferentes grados:

Grado A : browser de alta calidad y en dispositivos populares.
Grado B : browser de baja calidad en dispositivos populares o browser de alta calidad en pocos dispositivos del mercado
Grado C : browser de baja calidad y poco utilizado .

Podeis ver como queda esta tabla actualmente en la siguiente imagen:

Pues bien, el objetivo de jQuery Mobile es ofrecer soporte a todos los navegadores de grado A y B

Asi que, una buena noticia para los desarrolladores web ya que esta nueva herramienta nos va a facilitar (y mucho) el desarrollo de aplicaciones para moviles.

¡Ah! Se me olvidaba… está previsto que salga a finales de año.

NOTA:

Hace poco pude “asistir” (via web) a una conferencia online en la que John Resig nos contaba como se debian abordar las pruebas de rendimiento y de compatibilidad en un desarrollo en JS para moviles. Podeis ver esta presentación en slideshare.

En esta charla analizaba los dispositivos moviles y los browsers disponibles en el mercado y nos explicaba cómo hacer un testeo para moviles en condiciones (basado sobre todo, como decia, en Yahoo!s Graded Browser Support technique).

Todo lo que explicaba en esta charla es lo que estan aplicando para el desarrollo de jQuery Mobile

Ver álbum de fotos | Leer jQuery Mobile: jQuery para teléfonos moviles en Pixelovers

Rediseño de Flickr

jorgecasar — Tue, 29 Jun 2010 09:07:00 GMT

El otro día Juanma comentó sobre Facebook Facelift, el lavado de cara de Facebook y hoy me he encontrado que Flickr han cambiado la página de fotos. Hay que reconocer que el mensaje es muy llamativo: "We're introducing a new photo page, and you can check it out early. Take me to the future!" que viene a significar: "Estamos presentando una nueva página de foto y tu puedes echarle un vistazo antes de tiempo. ¡Llévame al futuro!

Por mi naturaleza aventurera y hambrienta de cosas nuevas no he podido resistirme a darle al enlace. Y me he llevado una grata sorpresa, un página de foto más grande, más rápida y más al estilo Flickr, como ellos mismos indican.

Para facilitarte la navegación por la nueva página te ofrecen una breve visita que consiste en 4 pasos por las principales características:

Explorar y ver: Puedes navegar rápidamente por la foto y la galería:
- Dónde estás: Ve rápidamente a la siguiente foto. encima de la foto a la derecha tienes 2 botones para ir a la anterior y a la siguiente foto.
- Acercarse: Mira esta foto más grande en la vista de caja de luz (lightbox). Entre los botones anteriores hay una lupa que te permite ampliar la foto actual. También puedes ampliarla haciendo click en la foto.
- Vista previa: Echa un vistazo a la cinta de película para ver las fotos relacionadas con esta. Debajo del mapa puedes ver una cinta de fotos que cuando pasas el ratón por encima aparece una flecha a la derecha y/o izquierda para ir corriendo la cinta.
Quién, qué, dónde:
- ¿De qué es esta foto?: Un título y una descripción pueden proporcionar detalles elementales acerca de esta foto. Debajo de la foto aparece el título y la descripción.
- La historia detrás de esta foto: Todos los detalles clave se pueden encontrar aquí: quién la tomó, cuándo se tomó, el lugar y más. A la derecha de la foto tienes toda la información referente a la foto.
Comentar y compartir:
- Favoritas e intercambio: Guarda tus fotos favoritas, compártelas con un amigo, agrégales una etiqueta y más. Ahora hay un menú de acciones relacionado con la foto arriaba a la izquierda que nos permitirá fácilemente: Agregar una etiqueta, Escribir una nota, Agregar una persona, Agregar al/quitar del álbum, Agregar a un grupo, Ver más tamaños, Ver presentación, Ver datos Exif, Encargar impresiones y más, Rotar, Editar foto en Picnik, Editar el título, la descripción y las etiquetas, Reemplazar esta foto, Eliminar esta foto
- Agregar a la conversación: Deja la tuya aquí. "¡Vaya, esta me encanta!"
Personas y lugar:
- ¡Coloca tu foto en el mapa!: Y responde a la pregunta: "Qué buena toma, ¿dónde tomaste esta foto?" Dan más importancia a la geolocalización de las fotos.
- Agregar personas y etiquetas: Cuéntanos quién o quiénes están en las fotos y agrégales etiquetas para describirlos. Esto te ayudará a organizarte y a hacer tus fotos más memorables.

Aquí os dejo una captura donde se indican todos los cambios:

La verdad es que es un gran avance y según lo vas usando te das cuenta que es muy intuitivo y tienes todas las acciones a mano. Sigue teniendo el mismo aspecto, limpio y sencillo, al que nos tiene acostumbrado Flickr. Auqnue me atrevería a decir que es más limpio y sencillo ahora. Al hacer el layout más grande, pasando de 800px a 975px, les permite también ampliar la foto de 500px a 640px y la columna de la derecha de 247px a 300px.

¿Vosotros que opináis del nuevo diseño? Os cuesta encontrar las cosas, o como me ha pasado a mi ¿habéis descubirto cosas que no sabías que existían, o estaban muy escondidas?

Ver álbum de fotos | Leer Rediseño de Flickr en Pixelovers

Facebook Facelift, el lavado de cara de Facebook

juanmaguitar — Sun, 27 Jun 2010 11:25:00 GMT

En febrero de este año, Facebook hizo el ultimo cambio en su interface. Con este cambio se mejoró la navegabilidad de la aplicación y puso mas a mano las opciones mas usadas por los usuarios.

Pero desde algunos puntos de Internet piden un cambio más radical de la interface de Facebook.

Este es el caso de The Facebook Facelift que es una iniciativa promovida por Barton Smith para mejorar la interfaz de Facebook con un nuevo diseño que mejora la distribución del contenido y la experiencia de usuario.

La iniciativa tiene un grupo dentro del mismo Facebook para sumar apoyos a esta propuesta.

Aquí teneis el video para que veais lo que propone:

Facebook Facelift - Home & Profiles from Barton Smith on Vimeo.

También se pueden ver pantallazos de su propuesta en Flickr

La verdad es que el diseño propuesto es una pasada y después de ver el video y los pantallazos se queda uno un poco frustrado al volver al Facebook de siempre.

Desde luego, esta propuesta tiene mi voto

Y a ti ¿qué te parece esta propuesta de rediseño del Facebook?

Leer Facebook Facelift, el lavado de cara de Facebook en Pixelovers

Anywhere: Hovercards

jorgecasar — Fri, 18 Jun 2010 16:00:00 GMT

Continuando con serie de artículos dedicados al anywhere, ya vimos la semana pasada como enlazar nombre de usuario de Twitter. Y esta semana hemos analizado la función hovercards, la cual nos permite mostrar la ficha de usuario de Twitter en los nombres de usuario que haya en nuestra página.

La forma sencilla de llamar a esta función es mediante:

T.hovercards();

Cabe destacar que esta función llamará, implicitamente, a linkifyUser, por lo que no será necesario hacer cosas como:

T.linkifyUsers().hovercards();

Pero igual que linkifyUsers tiene opciones de personalización, aparte del selector de la función T, del que hablamos en el artículo de linkifyUsers, así que nos centraremos en los parámetros de la propia función hovercards. Esta función puede recibir como parámetro un objeto con las siguientes propiedades:

linkify: Esta propiedad sirve para indicar si queremos llamar a la función linkifyUsers o no (por defecto el valor es true).
infer: Nos permitirá indicarle a la función si el nombre de usuario se encuentra dentro del texto del elemento seleccionado o no (por defecto es false). Esta propiedad no es compatible con la anterior, si ponemos infer a true linkify pasará a false.
username: nos permite identificar cual es el nombre de usuario, cuando no se encuentra en el texto del elemento. Esta propiedad tampoco es compatible con linkify, si especificamos un username linkify pasará a false.
expanded:Permite mostrar la hovercard con la información extendida. Con toda la que sale tras pulsar en el "more...". Parece ser que no lo tienen implementado. No me ha funcionado y no he encontrado evidencia alguna en el código.
complete: Tal y como sucedía en linkifyUsers hemos encontrado en el código también la llamada a la funcióncomplete en hovercards. Atributo no documentado.
selector: Por defecto es: 'a.twitter-anywhere-user' pero puedes indicarle otro selecotr sobre el que aplicar las hovercards, por ejemplo si utilizaste el atributo className de linkifyUsers. Atributo no documentado.

Leer Anywhere: Hovercards en Pixelovers

Personalizar tu perfil de Twitter (y II)

juanmaguitar — Sat, 12 Jun 2010 12:24:00 GMT

Si eres un asiduo de Internet y estas al día en lo que a redes sociales se refiere, seguro que tienes una cuenta en Twitter y que la utilizas habitualmente.

Lo que a lo mejor tienes un poco abandonado es el background de tu perfil de Twitter, bien por que no tengas facilidad para el diseño o sencillamente porque aun no te has puesto a hacerlo.

Hay diseños impresionantes en algunos perfiles de twitter que puedes ver por la red. Albert Garcia ya nos hacia referencia en su dia a algunos de estos perfiles de Twitter con diseños realmente creativos.

Asi que, para que tu no seas menos, hemos recopilado una serie de herramientas y de recursos que te permitiran conseguir un background personalizado (y chulo) en poco tiempo ;-)

Free Twitter Designer .- Herramienta online que te permite crear de forma gratuita un background profesional
themeleon.- Herramienta online de la mano de ColourLovers que te permite crear de forma gratuita un background profesional
TwitBacks.- Crea tu background de forma gratuita con esta herramienta online
TweetBacks.- Otro grupo de backgrounds profesionales listos para ser usados
TweetyBack.- Diseños sencillos para tu cuenta
Free Twitter Layouts.- Colección de más de 50 backgrounds clasificados por categorias y listos para que te los bajes y los utilices en tu perfil
Twitter Gallery .- Colección de más de 200 backgrounds también clasificados por categorias. Tiene un sistema de instalacion automatica del fondo en un tu perfil de Twitter desde su web
TweetPlate .- Mas de 150 fondos gratuitos y muy profesionales.
Tweety Got Back.- Más de 400 Fondos realmente espectaculares.

¿Que te han parecido estos recursos? ¿Conoces alguno más que deberia estar en esta lista?

Esperamos vuestros comentarios

Leer Personalizar tu perfil de Twitter (y II) en Pixelovers

Acelera la carga de jQuery en tu site utilizando un CDN

juanmaguitar — Wed, 09 Jun 2010 22:37:00 GMT

Si utilizas jQuery, es una buena idea que cargues la librería desde un CDN (Content Delivery Network).

Pero, ¿qué es un CDN?

Es el nombre que recibe un grupo de servidores repartidos por todo el mundo en puntos estratégicos y pensados para la distribución de ficheros.

Hay varios CDN’s gratuitos, entre ellos el de Google, el de Microsoft y el de Edgecast.

Tambien hay CDN's de pago. Algunos puede que te suenen como Akamai o Amazon CloudFront

¿Cómo funciona un CDN?

La idea es que en vez de cargar las librerias desde tu servidor de hosting, las cargues directamente desde el CDN. De este modo cuando se haga la petición se cargará la librería (o librerias solicitadas) desde el nodo mas cercano al cliente con lo que se cargará más rapido.

¿Cómo lo utilizo en mi site?

Para cargar jQuery desde el CDN de Google, pondriamos en el HEADER de nuestro HTML lo siguiente:

 <script src="http://www.google.com/jsapi"> <script type="text/javascript"> google.load("jquery", "1.3.2"); </script>

Y para cargarlo desde el CDN de Microsoft pondriamos esto:

 <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"> </script>

¿Qué ventajas tiene usar un CDN?

Usar CDN tiene varias ventajas:

Liberas a tu servidor de la carga de estos archivos
Incrementas las posibilidades de que el fichero esté cacheado, ya que otros sitios que usen tu CDN enlazaran al mismo fichero
Un CDN muy probablemente servirá el fichero más rapido que desde tu propio servidor de hosting

¿Qué CDN gratuito me conviene utilizar?

Pues en Pingdom.com han hecho una comparativa de rendimiento entre los de Google, Microsoft y Edgecast, y han llegado a unas interesantes conclusiones:

El CDN de Google es el más lento de los 3 en America del Norte y en Europa
En Europa el CDN de Microsoft es el más rapido
En América del Norte, el CDN de Edgecast es el más rapido
El CDN de Edgecast gana en terminos de rendimiento medio

Un último factor a considerar es que el CDN más usado es con el que tendras más posibilidades de tener tu archivo cacheado, pero por ahora no hay datos de cual es el CDN más utilizado.

¿Y tu? ¿Qué opinas del uso del CDN? ¿Lo utilizas? ¿Cuál utilizas? ¿Alguno gratuito que no hayamos nombrado aquí?

Enlaces y más

Leer Acelera la carga de jQuery en tu site utilizando un CDN en Pixelovers

Anywhere: Auto-linkification of Twitter usernames

jorgecasar — Sun, 06 Jun 2010 21:11:00 GMT

Ya os hablamos hace un par de semanas de @Anywhere (API Javascript de Twitter) y hoy queremos entrar en más detalles sobre la librería, para que la puedas implementar en tu web de forma sencilla y potente. Por no hacer el artículo hablaremos en de cada uno de las funciones en un artículos separados. Así, hoy trataremos uno de los métodos más sencillitos de la API @Anywhere. También quiero destacar que todos los ejemplos de código estarán dentro de la llamada de callback (T) como dijimos en el anterior artículo:

twttr.anywhere(function (T) {
 // Tu código aquí...
});

Como sabéis la función T puede recibir como parámetro un selector el cual usará la librería Sizzle para encontrar los elementos del DOM, es la misma librería que usa jQuery, así que seguro que estáis familiarizados con este forma de encontrar elementos en el DOM. Si no le pasamos ningún argumento a T tomará todo el contenido del body de la página para buscar.

Con Linkify users podremos enlazar con el perfil de Twitter a todos usuarios que mencionemos en la página de la forma: @nombreUsuaurio teniendo en cuenta la siguiente expresión regular: /\B[@＠]([a-zA-Z0-9_]{1,20})\b/g, es decir,el símbolo '@' seguido de 1 a 20 caracteres alfanuméricos incluyendo el '_'. Por lo tanto nombres como @pixelovers, @jorgecasar y @juanmaguitar son nombre de twitter válidos.

Sabiendo esto simplemente podremos enlazar estos nombres utilizando el siguiente código en Javascript:

T.linkifyUsers();

Si queremos ser más específicos y que solo busque en cierta parte de nuestra página podemos llamar a la función especificando un selector:

T('#content').linkifyUsers();

También es importante saber que la función linkifyUsers puede recibir un objeto como argumento con las sugientes propiedades:

className: Puedes especificar un nombre de clase alternativo. (En la documentación)
complete: Puedes añadir una llamada de callback a la finalización del autoenlazado (No se especifica en la documentación)

Un ejemplo especificando todas las formas de llamar a esta función podría ser:

T('#content').linkifyUsers({
 className:"twitterName",
 complete: function(){
 alert('LinkifyUsers done!');
 }
});

Creo que con esto podréis hacer una primera toma de contacto con @Anywhere. Ya lo tienes implementado en tu sitio y quieres mostrarnos como lo has hecho. Deja un comentario explicandolo. Si has tenido problemas, preguntanos, entre todos podemos intentar encontrar la solución.

Leer Anywhere: Auto-linkification of Twitter usernames en Pixelovers

Google Font API: Usa tipografías open source en la web

jorgecasar — Mon, 24 May 2010 09:09:00 GMT

Cada vez salen más y más APIs, y Google es uno de los qué más APIs libera. Esta vez ha presentado en las conferencias Google I/O, realizadas el pasado 19 y 20 de Mayo, la Google Font API. Esta API te ayuda a añadir tipografías en cualquier página web. Esto tiene unos beficios claros como:

Disponer de tipografías de código abierto de alta calidad
Funciona en la mayoría de los navegadores
Es extremadamente facil de usar.

Puedes ver todas las tipografías disponibles en el Directorio de Tipografías de Google. De momento disponen de 18 fuentes, con variantes en itálica, negrita, italica negrita. Además 1 de ellas dispone de 10 familias diferentes. Por lo tanto contamos con un catálogo amplio que nos permitirá dar otro estilo a nuestra web y salirnos de las típicas tipografías universales.

Además el catálogo está muy cuidado, ya que dispone de una ficha por cada una de las tipografías. En la ficha puedes encontrar el nombre del diseñador, con un enlace a su biografía y otros datos personales. También dispones de la descripción de la tipografía y el set de caracteres. También hay ejemplos de textos en diferentes tamaños, desde 36px hasta 12px, en diferentes colores, #000, #333 y #666, y diferentes variantes, cursiva, negrita y negrita cursiva Puedes ver como ejemplo la ficha de la tipografía Cararell.

Si te parece interesante y quieres ver como incluirlo en tu web acontinuación te cuento las diferentes formas, solo con CSS y con ayuda de Javascript.

Solo con CSS

Tienes varias formas de incluir las tipografías en tu web. La más sencilla de todas es incluyendo una hoja de estilos adicional:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name"/>

Luego simplemente usas la tipografía en tu hoja de estilos de forma habitual:

CSS selector {
 font-family: 'Font+Name', serif;
}

Si no quieres cargar todas las variantes, puedes especificar las variantes que quieras añadiendo dos puntos y las variantes que quieras separadas por comas:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name:variante"/>

Si quieres añadir varias tipografías, no es necesario hacer 1 llamada por cada una de ellas, simplemente con separar los nombres con pipes "|" es suficiente:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans"/>

Y si quieres hacer todo a la vez simplemente sigue todas las reglas anteriores, y quedará algo de esta forma:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans"/>

Con ayuda de Javascript

Si no quieres que la carga de tu página se vea afectada por tener que resolver otras DNS y cargar contenido de servidores que no puedes controlar, puedes probar WebFont Loader. Una API de Javascript que te da un mayor control sobre las tipografías cargadas. Esta forma también es muy sencilla, pero requiere un mínimo de conocimiento de Javascript. Con añadir estas lineas en el head de tu página tendríamos todo listo para usarla

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js">
 </script>
 <script type="text/javascript">
 WebFont.load({
 google: {
 families: [ 'Tangerine', 'Cantarell' ]
 }
 });
 </script>

Esto carga las tipografías indicadas en families y si todo ha ido correctamente y el navegador permite estas tipografías se añadirá en el html las clases: 'wf-active' y 'wf-family-type-active' (por ejemplo: 'wf-cantarell-n4-active').

Esto nos permite usar en nuestra hoja de estilo tipografías alternativas en caso de no haber podido cargar las deseadas, de esta forma:

.wf-inactive p {
 font-family: serif
 }
 .wf-active p {
 font-family: 'Cantarell', serif
 }

Con WebFont Loader puedes solicitar fuentes a otros proveedores como por ejemplo TypeKit o incluso hacer llamadar a cualquier proovedor de tipografías especificando el proveedor.

En la llamada a WebFont Loader puedes especificar callbacks para ejecutar tu propio código en un momento dado. Las funciones de calback de las que dispones son:

loading() Se llama cuando todos los módulos de proveedores de tipografías web (google, typekit, y/o custom) han reportadoq ue empiezan a cargar tipografías.
fontloading(fontFamily, fontDescription) Se llama cuando se empieza a cargar cada solicitud de tipografía web. El parámetro fontFamily es el nombre de la familia de la tipografía, y fontDescription representa el estilo y peso de la tipografía.
fontactive(fontFamily, fontDescription) Se llama cuando ha terminado de cargar cada una de las solicitudes.
fontinactive(fontFamily, fontDescription) Se llama si una solicitud ha fallado al cargar.
active() Se llama cuando todas las tipografías web han sido cargadas o bien no se haya podido cargar, siempre y cuando al menos una se cargado con éxito.
inactive() Se llama si el browser no soporta tipografías web o si ninguna de las fuentes se ha podido cargar.

Sabiendo todo esto, no me he podido resistir a hacer pruebas con esta nueva API, así que os dejo una demo de uso, en las que cargo las fuentes bajo demanda.

Demo de Google Font API

¿Qué os ha parecido la API? ¿Quiéres eseñarnos tus nuevos diseños usando estas tipografías?

Ver álbum de fotos | Leer Google Font API: Usa tipografías open source en la web en Pixelovers

Anywhere: API Javascript de Twitter

jorgecasar — Wed, 19 May 2010 09:35:00 GMT

Hace 1 mes se realizó el Chirp, la conferencia oficial para desarrolladores de Twitter. Y en ella se presentaron varias novedades en torno al mundo Twitter. Entre ellas, una nueva página para desarolladores de Twitter: dev.twitter.com, donde podemos ver nuevas herramientas. En la que nos vamos a centrar, por ser la más cercana a la temática del blog es @Anywhere. @Anywhere es una API de Javascript que te permite integrar Twitter con tu sitio en unas pocas lineas de Javascript. Antes de empezar a utilizarla has de registrarte como desarrollador para que te faciliten una API key, para ello tienes el formulario de registro de un aplicación Anywhere. Tras ese paso, solo debemos añadir en las cabeceras de nuestra web la llamada a este script:

<script src="http://platform.twitter.com/anywhere.js?id=YOUR_API_KEY&v=1" type="text/javascript"></script>

Una vez añadido este script la foma de inicializar @Anywhere es la siguiente:

twttr.anywhere(function (T) {
 // Tu código aquí...
});

Como ves en realidad llamamos a una función y le pasamos una función de callback con un parámetro T (podéis llamarlo como queráis). La cual se ejecutará una vez cargado el script de Twitter @Anywhere. Con esta API, de momento, puedes realizar lo siguiente:

Autoenlazar nombres de usuario de Twitter
Hovercards
Botones de Follow
Caja de Tweet
Login de usuario

Os invito a que la probéis. Desde Pixelover estamos preparando algunas demos de uso que os iremos enseñando a lo largo de estas semanas.

Leer Anywhere: API Javascript de Twitter en Pixelovers

Cómo localizar un portatil robado

juanmaguitar — Mon, 17 May 2010 20:18:00 GMT

Durante mucho tiempo habia tenido el dilema de si comprarme un Mac o no. El motivo principal por el que no me decidía era el precio. Demasiado caros para mi gusto.

El tema es que hace cosa de un año me decidí por fin a entrar en el mundo Apple y me compré un portátil MacBook. Pero mira, por cosas de la vida, justo un par de meses después de haberlo comprado me entraron en casa y me lo robaron :(

Yo pensaba que al ser Apple y al tener el numero de serie y la factura, tendrian alguna forma de rastrear el portátil, de bloquearlo si se conectaba a Internet, o algo asi… pero no. Llamé al servicio técnico de Apple y me dijeron que no podian hacer nada.

Asi que bueno, investigando por la red, he encontrado algunos sistemas para poder localizar tu portátil en caso de robo o desaparición:

Adeona. Es un servicio abierto y gratuito, que permite realizar un seguimiento de la localización de un ordenador portátil perdido o robado.

Hay que instalar un pequeño programa agente (disponible para Windows Vista y XP, Linux y Mac OS X) con el que obtendremos un archivo y una clave. Con estos elementos, si alguna vez se pierde el ordenador, podremos recuperar entre otras cosas la IP Publica y Privada que esté utilizando el equipo para conectarse a la red

Ademas, si es un Mac, el cliente de Adeona hace una foto del usuario con la Webcams integrada y la registra.
Locate PC. Es un programa que nos puede enviar un email de manera silenciosa, con todos los datos necesarios para que podamos ubicar donde está el portatil.
Prey. Es una aplicación gratuita y muy ligera que te permitirá trackear y localizar tu portátil en caso de robo. Funciona en todos los SO.

El programa se autoconectará a la primera red WIFI disponible y te enviará por mail todos los datos que pueda recopilar, entre ellos la geo-localización de la conexión WIFI que esté utilizando tu portátil :)
Undercover. Con este programa, exclusivo para Mac, nuestro portátil quedará identificado en los servidores de Undercover, con lo que podremos activar en cualquier momento desde su web el "modo recuperacion". Además la aplicación se puede proteger contra borrado (y formateo).

Si nos lo roban, el sistema realizará varias acciones con el objetivo de localizar al intruso. Entre estas acciones está el registro de chats, correo electronico, logins, e imágenes a traves de la Webcam que quedaran registradas en sus servidores.

Si el intruso no se conecta a Internet, la aplicación simulará un fallo de hardware que hará necesario llevarlo al servicio tecnico.

¿Y tu? ¿Conoces algun sistema más para localizar tu portátil en caso de robo? ¿Cuál es tu opinión sobre estos que comentamos aquí? ¿Has tenido que utilizar alguno? ¿Te han servido para localizar tu portatil?

Esperamos vuestros comentarios

...por cierto, la historia del robo de mi portátil tiene final feliz. Lo recuperó la policia hace poco (1 año despues del robo!!!) de rebote por otra historia.

Eso si, ya me estoy instalando uno de estos por si (toco madera) me vuelve a pasar.

Enlaces y más

Ver álbum de fotos | Leer Cómo localizar un portatil robado en Pixelovers

Comportamiento de los usuarios en los sitios web

juanmaguitar — Sun, 25 Apr 2010 20:06:00 GMT

La usabilidad web es el área que estudia cómo deben estar hechos los sitios web para que sean fáciles de usar por los usuarios finales, para que encuentren lo que buscan de la forma más rápida y eficiente posible.

Dicho estudio se basa en el comportamiento de los usuarios en la web.

Asi que es importante que tengamos en mente cómo se comportan los usuarios en internet a la hora de diseñar nuestros sitios web. De esta forma conseguiremos que le saquen el máximo partido posible a nuestra web.

Veamos cuales son los patrones básicos de comportamiento de los usuarios en la web:

Los usuarios aprecian la calidad y la credibilidad (El contenido es más importante que el diseño). Esto quiere decir que si ven un sitio con contenido de calidad van a perdonar la presencia de publicidad y/o un diseño pobre. Este es el motivo por el que sitios web no-tan-bien-diseñados pero con contenido de alta calidad ganan mucho tráfico con los años.
Los usuarios no leen, escanean (Organiza bien la información para que se asimile bien). Cuando miran una página web, los usuarios web buscan puntos de referencia que les sirvan de guia en su recorrido por el contenido de la pagina (headers, enlaces, texto en negrita,..).
Los usuarios web son impacientes (Que no les cueste encontrar lo que buscan). We want the world and we want it now decian The Doors en un tema. Pues esto es igual. Cuanto menos intuitiva sea la navegación y más le cueste a un usuario obtener lo que busca, mas posibilidades de que abandone nuestro sitio en busca de otra opción mejor.
Los usuarios no siempre eligen la mejor opción (No te pases optimizando). Los usuarios no siempre buscan la forma más rapida de encontrar la información. En vez de eso, escanean la página de una forma lineal, yendo secuencialmente de una seccion a otra. Y en cuanto encuentran un enlace que parece llevarles a lo que buscan lo clickan inmediatamente. Ten en cuenta esto y no te pases optimizando la disposicion de la información
Los usuarios siguen su intuición (Que las cosas hagan y digan lo que se espera de ellas). En la mayoria de los casos los usuarios seguiran su instinto para moverse en el sitio web antes que leer la información que se les ofrece. Asi que mejor que la informacion en tu sitio web esté dispuesta de la forma que esperan tus usuarios.
Los usuarios quieren tener el control (No les digas cómo navegar). Los usuarios quieren ser capaces de controlar su navegador y delegar en el sitio web la presentacion de la información. Por ejemplo, no quieren ventanas popups inesperadas y quieren que el boton “Back” siempre nos lleve a la página anterior.

¿Y tú que opinas? Esperamos vuestros comentarios.

Enlaces y más

Leer Comportamiento de los usuarios en los sitios web en Pixelovers