Programación creativa

Secret places es una guia de hoteles con encanto en 3 idiomas. Frente a otras guias, los fundadores presumen de haber visitado los hoteles, y solo haber considerado aquellos que son realmente especiales.

Valoración
( **** ) Buena, Teniendo en cuenta que la pagina apenas se ha modificado desde el 10/09/2004, consigue que el usuario navegue y consiga casi todos sus objetivos, ofrece alternativas de navegacion, y en general respeta criterios basicos de construccion de sitios web. Eso si hay algunos detalles mejorables.

Objetivo
Buscar hoteles entre Huelva, Extremadura y sur de Portugal para Diciembre de este año.

Resultado
Positivo. He recopilado varios hoteles e ideas de viaje. Echo de menos haber encontrado antes el listado de todos los hoteles de una region. La arquitectura de la informacion flaquea en muchos aspectos, pero hay muchisima informacion relacionada con los hoteles y con los municipios.

Portada
:( . La portada muestra un extenso texto con informacion relacionada con la empresa, su nacimiento, y una relacion de tipos de hoteles que encuentran cabida en sus servicios. La unica información relevante que podemos encontrar en portada es el listado de Lugares Secretos, ( En ingles ” sitios inolvidables “). Se deberia destacar mas desde un principio uno o varios directorios de enlaces por regiones, tipos de hoteles o precios. El unico “distribuidor” que tenemos es por paises, que quizas sea un criterio de clasificacion ambiguo para el tipo de busqueda que estamos haciendo.

Dentro de Portugal
El mapa me hace mas facil ( frente a un directorio ), el reconocimiento visual de la zona a la que quiero ir, Alentejo. Pero cuando pulso me vuelve a aparecer otro mapa mas detallado localizando los hoteles. Lo cierto es que dentro de esta zona, que el hotel esté mas o menos alejado me importa poco, sin embargo si estoy echando de menos ver el listado completo de hoteles. La orientacion espacial en el territorio, es un criterio demasiado ambiguo, para tomar la decision de mi viaje. Voy pulsando puntos al azar en el mapa hasta que doy con el enlace:
Click on hotel icons on map or show all Alentejo hotels
Voila. En un listado me esta mostrando una fotografia un.a breve descripcion, y unos iconos descriptivos, lo cierto es que me requiere mucho esfuerzo comprender que significan echo de menos un pequeño texto explicativo con los servicios.

Detalle del hotel
Cuando pinchamos en View hotel, Encontramos una extensa y rica ficha con fotos, descripcion, tarifas, formulario para disponibilidad, y con comentarios ( aunque estan vacios en todos los que he mirado ). Las fotos estan cuidadas, parecen echas por la misma mano para todos los hoteles, lo que refuerza la sensacion de lugares recomendados.

Mejoras
Los contenidos de la web merecen una alta puntuacion, si ademas estos datos estuvieran mejor organizados, el sitio seria muy bueno.Usando la informacion que tiene ahora mismo, podriamos crear una web mucho mas amigable, tendiendo en cuenta al usuario. Destacando:

• La portada, no funciona como un buen distribuidor, es mas ornamental que otra cosa.
• El menu de la izquierda se usa poco o nunca.
• El mapa en un segundo nivel de acercamiento, su uso no deberia competir con un buen listado, donde aparezcan los hoteles.
• Los iconos acompañados de un texto descriptivo.

Recordar que esto no es una critica exhaustiva de experto, sino un simple acercamiento como usuario.

Creado por un profesor de atropología cultural de la universidad de Kansas, Michael wesch.
Es un interesante resumen que parte del texto escrito y acaba en la organizacion de los contenidos en la web.

Pues eso, que me he pasado a wordpress. Textpattern es buenisimo pero intenté adaptarlo a mi diseño ( ! Que cabezoneria con reinventar la rueda ¡) y me aburrí. Y viendo los diseños tan variados, y lo facil de usar que es wordpress al final he cedido.

Desde las herramientas para webmaster de google ( sitemaps ), Muestran ahora estadisticas de la velocidad y cantidad de paginas que el motor de busqueda parsea en nuestro sitio.
Ademas da la opción de aumentar o disminuir la velocidad del parseo.

oido en maestros del web

La extensión de firefox Tails export muestra y permite extraer metadatos de los Microformatos de una web.
En el caso de los hcard y los hcalendar, permite exportar al formato vCard e iCalendar respectivamente, lo que se traduce en archivos de contactos y eventos que nuestro cliente de “correo favorito” es capaz de interpretar.
Ademas permite ver en pantalla el fragmento de codigo html que conforma el microformato en si. Estos son los microformatos que es capaz de interpretar.

• hCard [export to .vcf file]
• hCalendar [export to .ics file]
• hReview
• xFolk
• Rel-license

Segun el articulo difundido en un blog oficial de Microsoft , El esperado IE7 sale el 18 de octubre. Entre sus opciones mas jugosas cabe destacar:

• mas de 200 bugs arreglados
• quirk mode ( para paginas en modo IE6 )
• lector incorporado de rss
• liveclipboard ( usará algunos de los microformatos mas estandarizados )

Segun la conferencia de Chris Wilson ( director del equipo de desarrollo de IE7 ), mas que nunca se ha tenido en cuenta la opinion de la comunidad, y prometen no volver a tomarse vacaciones de 5 años. En las conferencias de Oviedo demostró que sabia bien la lección.

Me desplazo por gracia de GTK al curso de Usabilidad y Accesibilidad de Eduardo Manchón y Jose Florido con mi compañero Jose Manuel Pita ( Ver su opinion en tripix ). En mi modelo mental ( termino muy de psicologia ) la usabilidad se relaciona con enlaces azules, Amplios directorios de enlaces, y ausencia de sentido estetico.

El curso lo compone 5 miembros de 3 areas diferentes, SEOs, Responsables de maquetacion y emprendedores con un proyecto propio, ( echo de menos un diseñador ).

Caldo de cultivo para un ambiente distendido de todos aprendiendo de todos. Los cursos a pesar del horario, se hacen amenos con pausas alemanas de 13:00 a 14:00 para partir la jornada que ya de por si es bien intensiva.

Los dos de GTK interrumpimos continuamente para sacar jugo del temario. Se hacen practicas sobre casos de uso reales, se comentan ejemplos.

Usuarios reales:
Como estaba planteado se utilizan dos usuarios reales. Tenemos mala suerte con los usuarios que se consideraban normales y resultan ser realmente muy habiles. Aun asi se detectan tres o cuatro problemas de usabilidad que cada uno por separado podria invalidar una compra.

En una lista resumo las conclusiones que yo extraigo de este curso, quiero que se agarren bien frente a mi mundo real.
Conclusiones:

DATOS

• A publico mas heterogeneo mas usabilidad
• No valores un diseño o una web sin datos.
• La falta de relevancia estadistica no compite con el descubrimiento de errores de usabilidad.
• El descubrimiento de errores en usabilidad y su solucion mejora la web
• Los estudios de Marketing no ayudan a la usabilidad web ( hay que analizar el comportamiento no las opiniones )

PROYECTOS PROPIOS

• Comienza con algo que no tardes en hacer mas de un mes
• Modificalo periodicamente para mejorarlo
• Si te vinculas mucho con el proyecto, dejalo un tiempo para poder ser critico con su funcionamiento
• O pide opinion externa

DISEÑO

• Ceguera de los usuarios hacia banners e imagenes de cabecera
• Los listados funcionan
• Los buscadores funcionan
• Los menus de cabecera no funcionan
• Los elementos innecesarios compiten con los realmente importantes
• Las fotos reales de personas reales son un reclamo
• Las metaforas no funcionan
• El usuario no va a comprender los iconos
• los textos descriptivos si funcionan
• los enlaces q hacen intuir el contenido real si funcionan
• Los menus de banderas no funcionan y pueden perjudicar

TRABAJO EN GRUPO

• Las acciones del usuario son mas importantes que tu opinion y la de tus compañeros
• Tu opinion no cuenta, argumenta con ejemplos reales
• Con tu equipo y pocos medios se pueden encontrar errores.

HEURISTICOS

• Da relevancia a los puntos que son mas importantes y son faciles de solucionar.
• Hablar sobre una web es como hablar sobre un hijo.

El curso cumple sobradamente las expectativas. El resto de alumnos tienen casos interesantes, Eduardo muestra conocimiento tambien en el trato con otros departamentos y convence, Jose Florido da muestras de sabiduria en estandares y preocupacion por el panorama actual de la accesibilidad.

Vuelvo de Malaga con la excitación del principio, con la intencion de montar un proyecto propio ( debe ser el cuarto ya ) y con ganas de intentar cosas nuevas en la empresa.

Recopilo aqui, una pequeña aproximación a lo que nos deparara a los desarrolladores, con el uso de este lenguaje y mis conclusiones.

Esta imagen es muy familiar a casi todos nosotros, cada tienda virtual tiene un formulario html que se parece a este, lo mas comodo seria tener un objeto que integrase estas variables y su funcionamiento conjunto. Esto no es nada nuevo, ASP.NET, permite generar “objetos” que se renderizan como una unidad a pesar de estar compuestos por subelementos html. Tambien sucede con JSP con las beans y la logica de estos objetos tambien se integra dentro de la unidad. Lo malo de esta forma de trabajar, bajo mi punto de vista, es la continua ida y venida al servidor, para validar los mismos datos antes de ser enviados.
<xforms:model>
<xforms:instance>
<ecommerce xmlns=”">
<method/>
<number/>
<expiry/>
</ecommerce>
</xforms:instance>
<xforms:submission action=”http://example.com/submit” method=”post” id=”submit” includenamespaceprefixes=”"/>
</xforms:model>

Que luego en el servidor podriamos recoger en el mismo orden y jerarquia:

<ecommerce>
<method>cc</method>
<number>1235467789012345</number>
<expiry>2001-08</expiry>
</ecommerce>


Por otro lado tenemos los elementos que definen la interface, que captura los datos que especificamos arriba, que podemos cargar desde fuera como un archivo XSD


<select1 ref="method">
<label>Select Payment Method:</label>
<item>
<label>Cash</label>
<value>cash</value>
</item>
<item>
<label>Credit</label>
<value>cc</value>
</item>
</select1>
<input ref="number">
<label>Credit Card Number:</label>
</input>
<input ref="expiry">
<label>Expiration Date:</label>
</input>
<submit submission="submit">
<label>Submit</label>
</submit>

h2. Validaciones
Capitulo mucho mas complejo parece el de los eventos y validaciones. Pero parece que por fin podremos confiar plenamente en el navegador para validar los datos con el ahorro que esto supone de recursos y lineas de codigo de servidor.

 Conclusión
XForms es una recomendación de la w3c(World Wide Web Consortium) y pronto lo veremos en los navegadores. Parece un acercamiento hacia la promesa de la web semantica, Podemos compartir y reutilizar nuestro codigo mas que nunca, nuestro codigo dependera del dispositivo solo en la presentacion no en los datos, mas comodidad para usar microformatos que ayuden a buscadores a reconocer la información…

La idea que subyace esta tecnica es la idea de usar sin abusar el contenido dinamico, las partes que menos cambian en un sitio seran las que se actualizen con menos frecuencia, y a la inversa.

Esta tecnica se esta perfeccionando, en las ultimas tecnologias de servidor. En asp.net tenemos una libreria especializada en tecnicas de cache ( System.Web.Caching ) . En Php, el proceso de cacheo, no viene en ninguna libreria nativa, pero el proceso no es muy complicado y la adaptabilidad es total.

En los portales online, se muestran articulos con tamaños de imagenes completamente diferentes dependiendo del contexto, Cada articulo puede tener muchas imagenes, y ademas se deberia permitir la posibilidad de ver la imagen del articulo en el tamaño original de la foto ( 1024×768 aproximadamente). Estos requisitos no permiten que exista la posibilidad de guardar un numero determinado de formatos para cada foto ( thumbnail, mediano y grande), Porque limita el diseño del portal y porque a la larga, cada foto que se descarga en la web es una costosa conexion que nos acerca a la puerta de salida de nuestro servidor de alojamientos.

La tecnica de caché de servidor, nos permite almacenar información en el sistema de directorios de nuestro servidor, para evitarnos conexiones innecesarias. Dentro de esta modalidad hay muchas formas de crearnos nuestra propia caché, yo os muestro la que estoy llevando a cabo, extraida en gran parte de este interesante articulo. Basicamente:

El cliente hace una petición

El servidor detecta si existe un archivo con la información facilitada en su petición. dos opciones:

1. Si existe recoge el contenido de este fichero y lo escribe en el documento.
2. Si no existe, hace una consulta a la base de datos, crea un fichero con el resultado y escribe la información de la base de datos en el documento. La proxima vez que alguien haga la misma petición, dispondra de esta información sin acceder a la base de datos.

Aqui muestro el sencillo codigo con el que se puede hacer este proceso:


///recogemos una la peticion del cliente
$id=$_GET['id'];
$cachefile ="cache/imagen-{$id}.jpg";
if (file_exists($cachefile)) { //detectamos si existe el fichero y si existe, lo escribimos
$fp = fopen($cachefile, 'r');
echo fread($fp,filesize($cachefile));
fclose($fp);
exit;
}
//si no se hubiera parado antes realizamos la consulta
$sql = "SELECT foto FROM imagenes WHERE id_foto=$id";
if(!($result = mysql_query ($query, $conexion))) { exit(); }
$data = @ mysql_fetch_array($result);
mysql_free_result($result);
if (!empty($data['foto'])) {
$size=strlen($data['foto']);
//Abrimos un buffer
ob_start();
header("Content-Type: image/jpeg");
header("Content-Length: $size");
echo $data['foto'];
$fp = fopen($cachefile, 'w');
//escribimos el fichero recien creado con los contenidos del buffer fwrite($fp, ob_get_contents());
fclose($fp);
//cerramos el buffer
ob_end_flush();
}


Hasta aqui no existe ninguna ventaja con respecto a guardar una imagen en directorio en vez de en base de datos. Con el siguiente ejemplo quizá te convenza:


$id=$_GET['id'];
include("../includes/config.php");
$cachefile = "cache/miniatura-{$id}.jpg";
if (file_exists($cachefile)) {
$fp = fopen($cachefile, 'r');
echo fread($fp,filesize($cachefile));
fclose($fp);
exit;
}
$query = "SELECT foto, ancho,alto FROM imagenes WHERE id_foto=$id";
if(!($result = mysql_query ($query, $conexion))) exit();
$data = @mysql_fetch_array($result);
if (!empty($data['foto'])) {
//compruebo el tamaño original de la foto
list($ancho,$alto)=array($data['ancho'],$data['alto']);
ob_start();
header("Content-Type: image/jpeg");
$imagen_bit = imagecreatefromstring($data['foto']);
//la transformo en una imagen mas pequeña
$target = imagecreatetruecolor($ancho/4, $alto/4);
imagecopyresampled($target, $imagen_bit, 0, 0, 0, 0, $ancho/4, $alto/4, $ancho, $alto);
imagejpeg($target);
$fp = fopen($cachefile, 'w');
//escribo el fichero fwrite($fp, ob_get_contents());
fclose($fp);
ob_end_flush();
}


El inconveniente de esta manera de trabajar es ¿cuando y como sabemos que se han actualizado los datos?. Para sitios con mucho trafico, se podria plantear el borrado de la cache cada x tiempo, pero ya no seria información “fresca”. Mi alternativa pasa por borrar todos los archivos de cache las imagenes cuando se eliminen y/o modifiquen los articulos relacionados. Para esta tarea tengo una clase que simplifica las tareas comunes relacionadas con la cache y que os muestro aqui. No esta optimizada pero funciona bien, si veis alguna manera de mejorarla os agradeceria que me lo mostraseis, y poder asi publicarlo.


<?php
class cache
{
public static $items_cargados;
public static function borra($item)
{//borra todos los archivos de la carpeta cache que empiecen por $item
$cachefile ="../cache/{$item}*";
$resultado = glob($cachefile);
if ($resultado !== FALSE){
foreach ($resultado as $filename)
{
unlink($filename);
}
}
// if (file_exists($cachefile)) unlink($cachefile);
}
public static function guarda($item, $contenido,$tipo=null)
{//lee $contenido y lo escribe como $item en la carpeta /cache $cachefile ="../cache/$item";
//$size=strlen($contenido);
ob_start();
if ($tipo!=null)header("Content-Type: $tipo");
if($tipo=="image/jpeg")
{
$contenido = imagejpeg($contenido);
}else echo $contenido;
$fp = fopen($cachefile, 'x');
fwrite($fp, ob_get_contents());
fclose($fp);
ob_end_flush();
}
public static function detecta($item)
{//Detecta la existencia del fichero $item en la carpeta /cache
if(cache::$items_cargados==null)cache::$items_cargados=array();
if(array_search($item,cache::$items_cargados)!=false)return true;
$items_cargados[]=$item;
$cachefile ="../cache/$item";
return file_exists($cachefile);
}
public static function carga($item)
{//escribe el archivo en pantalla
$cachefile ="../cache/$item";
include($cachefile);
}
public static function carga_binario($item)
{//Escribe el archivo binario en pantalla
//En este caso no nos serviria el include ya que en ocasiones arrastra simbolos que interpreta como caracteres especiales de php
$cachefile ="../cache/$item";
$fp = fopen($cachefile, 'r');
echo fread($fp,filesize($cachefile));
fclose($fp);
}
}
?>


¿Y como se usa?. Como ejemplo pongo el siguiente archivo que retorna una imagen con la altura que el usuario desee, y un ancho proporcional:


<?php
include("../includes/config.php");
include("../classes/cache.class.php");
if ($id==null)$id=$_GET['id'];
if ($alto==null)$alto=$_GET['alto'];
$id_imagen_unico="imagen{$id}_{$alto}";
if (cache::detecta($id_imagen_unico))
{
cache::carga($id_imagen_unico);
}else{
$query = "SELECT foto, ancho, alto FROM imagenes WHERE id_foto=$id";
if(!($result = mysql_query ($query, $conexion)))
{
exit();
}
$data = @ mysql_fetch_array($result);
mysql_free_result($result);
list($ancho_img,$alto_img)=array($data['ancho'],$data['alto']);
if (!empty($data['foto']))
{
$imagen_bit = imagecreatefromstring($data['foto']);
$target = imagecreatetruecolor($alto*$ancho_img/$alto_img,$alto);
imagecopyresampled($target, $imagen_bit, 0, 0, 0, 0, $alto*$ancho_img/ alto_img, $alto, $ancho_img, $alto_img);
cache::guarda($id_imagen_unico,$target,'image/jpeg');
imagedestroy($imagen_bit);
imagedestroy($target);
}
}
mysql_close($conexion);
?>


En principio me lo he bajado para trastear, pero al ir usandolo me temo que va a sustituir a mi navegador por defecto.

Solo un detalle de la interface:

Este post lo estoy creando desde la pestaña “Open Blog Editor”, configurar tu blog es insertar url, usuario y password.
La imagen de arriba la he subido sin teclear flickr.com
Conforme vas navegando por tus redes sociales va incorporando tus datos para que puedas usarlos desde diversos paneles. Yo hasta ahora estoy usando delicious, flickr, facebook, twitter, y mi blog.

Pero ¿ porque voy a empezar a usarlo como navegador por defecto ?:
He hecho la prueba de fuego de usar firebug ( la extension de firefox ) y …. ! funciona ¡.
Ademas el renderizado del html me parece identico a firefox ( no soy un experto pero me parece que es un firefox retocado ).

Solo dos cosas malas
Echo de menos gmail y google docs
No se todavia si se podria añadir de forma facil otros mashups que los predefinidos, por ejemplo tener 11870.com en la pestaña “People” podria estar muy bien. o por supuesto meter recetas en recetae.com en la misma pestaña.

Probadlo en serio creo que está muy bien hecho.

Blogged with Flock

Tags: social, navegadores, inspiracion