2009 - Page 9 of 19 - Sentido Web

Javascript

7 reglas para realizar Javascript de calidad

ByLuis June 18, 2009

Siete consejos para realizar un javascript de calidad y no intrusivo:

No hagas suposiciones: no pienses que el usuario tendrá el javascript activado o que usará un navegador adecuado.
Usa IDs y relaciones entre elementos: para no depender de un HTML mal estructurado y que el javascript sea imposible de realizar, utiliza IDs para acceder a los elementos con los que se quiere tratar y busca elementos que faciliten acceder a otros elementos.
Utiliza estilos: en vez de modificar los estilos de los elementos HTML mediante Javascript, usa clases CSS que modifiquen los estilos, y mediante Javascript se le puede añadir la clase a un elemento superior.
Comprende el navegador y a los usuarios: debes pensar cómo funciona un navegador, no sobre saturar su comportamiento (abuso de drag&drop, eventos, …). Además debes pensar qué espera el usuario que haga el navegador, y respetarlo.
Comprende los eventos: los eventos no solo corresponden a un objeto, sino a los elementros hijo que contiene. Así se pueden realizar eventos sobr un único elemento y no tener que modificar los demás.
Respeta el código de otros: seguro que a parte de tu código existe algún otro que has añadido, por lo que deberás programar teniendo en cuenta que hay que evitar conflicto entre funciones.
Después de ti vendrá otro: es muy frecuente que alguien acabe modificando tu código, ten un poco de consideración por los demás y escribe código legible y entendible.

The seven rules of Unobtrusive JavaScript

Vía / @dcedilotte

utilidades

UIzard: herramienta de desarrollo via Ajax

ByLuis June 17, 2009

UIzard es un entorno de trabajo open source vía web que utiliza Ajax, y que funciona en varios navegadores Firefox y Safari (la versión para IE está siendo optimizada).

Se trata de un GUI muy completo en el que se pueden realizar páginas web, añadiendo elementos, con orígenes de datos, formularios, …
La mayor parte viene en coreano, pero creo que es bastante claro para poder entenderlo facilmente.
UIzard
Vía / @knight

Javascript

linkNotify: plugin jQuery que indica que se carga un enlace

ByLuis June 16, 2009

linkNotify es un plugin jQuery que permite modificar enlaces y mostrar un texto personalizado que indica que el enlace se está cargando. Algo que puede ser muy útil para aplicaciones en la que el usuario es algo básico y pincha y pincha en el enlace eternamente hasta que ve algún resultado sin esperar a que cargue la primera vez.

$('a').linkNotify('Espera mientras carga la pagina...');

linkNotify

PHP

FluentDOM: librería PHP estilo jQuery para tratar con DOMDocument

ByLuis June 15, 2009

Interesante librería que nos permite trabajar con DOMDocument de una forma sencilla, permite xpath y namespaces. La librería me recuerda a QueryPath, la cual realiza funciones similares.

echo FluentDOM($xml)
->node(
FluentDOM($samples)
->find('//b[@id = "first"]')
->removeAttr('id')
->addClass('imported')
)
->replaceAll('//p');

FluentDOM

MYSQL

Mostrar el tiempo transcurrido con MySQL

ByLuis June 10, 2009

Algo muy común a la hora de realizar una aplicación web es indicar las fechas según el tiempo transcurrido, en vez de poner 2009-06-03 poner “hace 7 días”.

Para aquellos que necesiten mostrar las fechas de esta forma usando MySQL es posible hacerlo usando una función:

DELIMITER //
CREATE FUNCTION TimeDiffUnits (old DATETIME, new DATETIME) RETURNS CHAR(50) DETERMINISTIC NO SQL
BEGIN
DECLARE diff INTEGER;
SET diff = UNIX_TIMESTAMP(new) - UNIX_TIMESTAMP(old);
CASE
WHEN (diff < 3600) THEN
RETURN CONCAT(FLOOR(diff / 60) , ' Minutes');
WHEN (diff < 86400) THEN
RETURN CONCAT(FLOOR(diff / 3600), ' Hours');
WHEN (diff < 604800) THEN
RETURN CONCAT(FLOOR(diff / 86400), ' Days');
WHEN (diff < 2592000) THEN
RETURN CONCAT(FLOOR(diff / 604800), ' Weeks');
WHEN (diff < 31536000) THEN
RETURN CONCAT(FLOOR(diff / 2592000), ' Months');
ELSE
RETURN CONCAT(FLOOR(diff / 31536000), ' Years');
END CASE;
END //
DELIMITER ;

Importante: no uséis jamás está función ni en el WHERE ni en el ORDER BY ni en el GROUP BY, ya que se ejecutaría para cada registro de las tablas.

User Friendly Age Function for MySQL

PHP

Crear aplicaciones Facebook con CodeIgniter

ByLuis June 8, 2009

No me apasiona especialmente realizar aplicaciones para Facebook, pero cuando no te queda otra, es mejor no complicarse la existencia y usar un buen framework como CodeIgniter (claro, que algunas aplicaciones si se realizan sin más tampoco pasa nada).

Para aquellos que quieran realizar aplicaciones en Facebook usando CodeIgniter le puede venir bien estas dos guías y dos librerías. Tanto las guías hablan de lo mismo, y las librerías son para Facebook-Connect (pero en una de ellas la explican paso a paso).

De forma resumida podríamos decir que para integrar Facebook en CodeIgniter debemos usar la librería facebook.php como un plugin de CI.

PHP

API para Bing

ByLuis June 5, 2009

Bing, el nuevo buscador de Microsoft, ya tiene una API a disposición de los desarrolladores, y también existe una librería para acceder a la API mediante PHP.
Tan solo es necesario instalar la librería, obtener una clave de desarrollador e integrarlo con nuestro código.
Bing API PHP
Vía / DZone

Javascript

Guía para desarrollar Javascript accesible

ByLuis June 4, 2009

Interesante tutorial que nos enseña que problemas pueden encontrarse las personas con alguna discapacidad que le obligue a prescindir de Javascript (o usuarios con dispositivos móviles), y cómo solucionarlo.
Los mayores problemas con el que se encuentran las personas que no ejecutan javascript en sus navegadores son en la navegación (menús dinámicos), contenido oculto (accesible mediante Ajax), controles dinámicos (eventos de ratón, drag&drop, …) y confusión (la web está pensada para el uso de Javascript y no usarlo conlleva un contenido inicial deficiente).
Como resumen diría que hay que ofrecer los contenidos sin necesidad de javascript, éste sólo debe ser un apoyo, y que para comprobar si tu web es accesible lo mejor es probarlo inhabilitando el javascript en tu navegador.
Creating Accessible JavaScript
Vía / @maxkuri

AI/Usabilidad | MYSQL

Comentarios anidados con PHP y MySQL

ByLuis June 3, 2009

Los comentarios anidados es algo muy común entre los foros o blogs. Realizarlo es bastante sencillo, aunque quizás hacerlo de la forma más eficiente puede tener su dificultad.
En el post que referencio, nos explican paso a paso cómo hacerlo: estructura de la BD, formulario, consultas, …
La solución es de las sencillas, se trata de que cada comentario tenga un campo que enlace con el comentario padre, y luego a la hora de recuperar los comentarios, hay que ir realizando consultas de obtención de comentarios por cada comentario padre, salvo en el primer caso que se buscan los comentarios iniciales.
HOW-TO: Multi-level Comments In PHP