jueves, 28 de febrero de 2008

Adecuar salida para impresora

Cuando se mandan emails desde un site al cliente hay un par de cosas que deberíamos tener en cuenta.
La primera, la gente suele imprimir su emails. Es una costumbre fastidiosa y poco ecológica pero es verdad. Así que si no queremos que se gasten miles de hojas de papel impreso debemos añadir estilos específicos para la impresión.
Un ejemplo sería:

@media print {
BODY { font-size: 10pt }
}

La segunda, aunque los logos , decoraciones gráficas y demás parafernalia son muy bonitos estos pueden molestar por varias razones. La gente los imprime sin dolor de gastar papel puesto que este todavía es barato pero gastar tinta de impresora es otro cantar. La tinta de impresora es cara hasta decir basta, así que los elementos gráficos llenos de color y grandes son muy mal recibidos.

Y por último, siempre hay que mandar una versión del email en modo solo texto. Nunca sabemos a que clase de lector de email puede llegar nuestra correspondencia.

Espero que estos consejos sean útiles y los lleven a la práctica.

martes, 26 de febrero de 2008

La figura del operador web.

Cada día esperamos más de la web. Cuando entramos en un site queremos que este sea atractivo, que la información que buscamos sea fácil de encontrar y precisa. Pero hay un valor que prima sobre todos los demás y es que el site esté vivo. No hay nada peor que participar en uno y ver que este no responde, que mandamos un comentario y no se modera o que mandamos un email y no se contesta.
La web debe alimentarse y respirar o muere. Aunque cualquier site tiene una increíble capacidad de trabajar día y noche por nosotros siempre necesita del factor humano. Y no se trata de ningún sesudo webmaster, ni de programadores o ingenieros, es trata de un humilde operador encargado de contestar emails, completar información o mantener las noticias del site actualizadas.
Y es que cualquier proyecto web no sobrevive solo, necesita de una persona que la mantenga y le de vida. Si esa persona no existe solo se tratará de un juguete caro que posiblemente termine dando mala imagen a nuestra empresa debido a que nadie está detrás comunicándose con nuestros clientes.

viernes, 22 de febrero de 2008

Navegadores y dimensionado de imágenes.

Que existen muchos navegadores y que todos son diferentes es una realidad. Cada uno de ellos está desarrollado con una tecnología diferente que hace que tengan sus virtudes y sus puntos flacos.
Las diferencias se hacen evidentes con solo fijarse en una característica, como se dimensionan las imágenes. Basándome en una web existente he extraido una imágenes y las muestro tal como se capturaron en cuatro navegadores distintos.
Estos son los resultados:
Mozilla. Es sin duda el peor redimensionado de todos, la imagen aparece terrimeblemente aserrada y los textos de la parte de abajo del logo son ilegibles.



Explorer. El resultado sigue siendo bastante malo, el efecto sierra es menos patente pero sigue existiendo. Si se muestra una mejoría considerable en los textos pero su lectura sigue siendo casi imposible.


Opera. Ya por fin la imagen mejora de manera sensible. El efecto sierra queda practicamente solucionado y el texto por fin puede verse al menos en los tipo de letras mayores.


Safari. Sin duda es el campeón del redimensionado. Se ve con mucha perfección y los textos son legibles, incluso los más pequeños. Apple siempre ha tenido fama de un buen tratamiento gráfico y esta es una buena demostración.


La mejor solución para que siempre tengamos una miniatura perfecta de cualquier gráfico es posibilitar la subida de todo tipo de imágenes en todas las dimensiones necesarias. Sin embargo esto no es siempre posible y habrá ocasiones en las que tendremos que confiar en el buen funcionamiento del navegador para la presentación de nuestras imágenes.

miércoles, 20 de febrero de 2008

Select

No todos los días se programa en javascript y eso hace que algunos detalles se olviden con facilidad. El objeto select es uno de esos elementos que se utilizan con una frecuencia no demasiado alta.
Estas son algunas chuletas para recordar como hacer algunas cosas interesantes. Para todos los casos ponemos el id del elemento igualado a 'form_select'.

Añadir un nuevo elemento option al select.
var NuevoElementoOption=document.createElement('option');
NuevoElementoOption.value=id;
NuevoElementoOption.text=nombre;
try
{
//Versión Mozilla
document.getElementById('form_select').add(NuevoElementoOption,null);
}
catch(e)
{
//Version IE
document.getElementById('form_select').add(NuevoElementoOption);
}


Eliminar todos los elementos de una lista.
var x = document.getElementById("form_select");
while (x.length>0)
{
x.remove(x.length-1);
}

Obtener el valor del elemento seleccionado.
var x = document.getElementById("form_select");
var Establecimiento = x.options[x.selectedIndex].value;

sábado, 16 de febrero de 2008

Un mono listo.

Es que por algo se dice 'más listo que el hambre'. Si, es un excusa tonta, el mono fue más listo que yo.

miércoles, 13 de febrero de 2008

Premio Fundetec 2007

El pasado 7 de febrero se entregó el premio Fundetec 2007, dentro de la categoría 'Mejor Proyecto de Entidad Sin Ánimo de Lucro destinado a Pymes, Micropymes y/o Autónomos' a la asociación de turismo rural Asetur cuya site es ecoturismorural.com.
Para mi es una gran noticia ya que he formado parte del equipo que ha llevado a cabo el desarrollo de su nuevo desarrollo. Felicidades a todos aquellos que han tenido algo que ver en la realización de este proyecto.

Más información:
Fundetec
ecoturismorural.com

Ultimo libro leido: El curioso incidente del perro a medianoche

Este ha sido uno de los mejores libros que he leído en las ultimas fechas. Ha sido cómico, sorprendente, inspirador e incluso instructivo. Se trata de una historia escrita desde la perspectiva de un niño autista, la trama comienza con la muerte del perro de una vecina y la decisión del niño de comenzar a investigar la autoría del crimen. La historia se desarrolla por caminos que no dejaron de sorprenderte en cada página.
El niño carece de la capacidad de filtrar la información del exterior por lo que la percibe en su totalidad lo que le lleva a bloquearse por exceso de información. Esta idea me lleva a una reflexión, cuánta información que creemos superflua es en realidad importante.

miércoles, 6 de febrero de 2008

Los charlatanes y sus recetas milagrosas para la web

En una reunión con un cliente el representante de una de las empresas proveedoras dijo: 'Hay que pensar una web para como será internet dentro de un año'. ¡Qué frase más hermosa y a la vez vacía de contenido!.
Y es que el mundo de internet está lleno de charlatanes al igual que el viejo oeste, de pronto el cliente se encuentra con un vendedor que sin dar oportunidad a la reflexión llena el tiempo de las frases huecas que cualquier cliente incauto quiere oir. El charlatán procura llenar su monólogo de frases preensambladas del tipo 'la internet del futuro', 'el increible incremento del tráfico'... todo ello implementado en muy poco tiempo por supuesto.
Y es que parece que no es bueno decir que detrás de todo producto de calidad hay una gran cantidad de trabajo, no solo por parte del equipo de desarrollo sino también por parte del cliente. Una vez que la web está activa hay que gestionar su contenido, hacer un gran trabajo de promoción y una gran cantidad de pequeños y tediosos trabajos.
Lo más parecido a arrancar un site de una empresa es montar la empresa en si. Cuando se arranca una empresa los clientes no se agolpan a las puertas del comercio para comprar nuestra mercancia. Lo mismo pasa con la web, el futuro cliente suele ir a sitios muy específicos por lo que resulta complicado y caro atraerlo a nuestro site.
Volviendo a la frase, ya bastante difícil es completar un producto de calidad siguiendo todos los estándares, bregando con las deficiencias de los navegadores, cubriendo los aspectos legales, implementando los 'caprichos' de cada cliente y aportando ese grado de innovación que marca el futuro de la web como para estar jugando a ser Rappel adivinando cómo va a ser la web en el futuro.
Al final, internet la hacemos quienes queremos dar algo nuevo a los clientes y no esperamos a ver que es lo que hacen los demás.

martes, 5 de febrero de 2008

PHPMailer

Siempre es agradable recibir los emails maquetados y con alguna imagen que otra que le de gracia. Da una imagen profesional de nuestra web.
Otra característica interesante sería poder recibir adjuntos junto al email que enviemos desde la web.
Para ellos tenemos la instrucción mail en PHP para envío de correo 'solo texto' pero enviar correo maquetado con esta herramienta es una tarea dura y ardua. Por fortuna existe una herramienta llamada PHPMailer que nos facilita mucho la labor.

Vemos mediante un ejemplo su funcionamiento:

//Incorporamos la clase de envio de email.
include_once("phpmailer/class.phpmailer.php");

//Construimos un objeto de la clase PHPMailer
$mail = new PHPMailer();

//Indicamos al objeto donde se encuentran los ficheros del paquete PHPMailer
$mail->PluginDir = "phpmailer/";

//Instanciamos la propiedad Host con la dirección del servidor de envio de email, generalmente localhost.
$mail->Host = "localhost";

//En la propiedad From ponemos la dirección que se identifica como remitente
$mail->From = 'email del remitente';

//Indicamos el nombre con el que se identifica el remitente
$mail->FromName = 'Nombre del remitente';

//Frase descriptiva del email. En el subject siempre debe estar escrito una frase que resuma el contenido del email
$mail->Subject = "Asunto del email";

//Añadimos la direccion de envio
$mail->AddAddress("email de envio","Nombre del que recibe el email");

//Si queremos que alguien reciba una copia lo especificamos en este método
mail->AddCC("email de copia");

//Si quemos que alguien reciba una copia oculta lo especificamos en este método
$mail->AddBCC("email de copia oculta");

//Para adjuntar ficheros debemos utilizar el método AddAttachment
$mail->AddAttachment("Url de la imagen", "Nombre con el que aparecerá en los adjuntos");

//Si queremos utilizar imágenes dentro del email maquetado debemos utilizar este método
$mail->AddEmbeddedImage("Url de la imagen","Referencia de la imagen","Nombre de la imagen","base64","image/jpg");

Lógicamente "image/jpg" cambiará dependiente del tipo de imagen a enviar, si enviamos un gif debemos poner "image/gif".

//Construimos el email maquetado y lo metemos dentro de una variable
$body = '
<style type="text/css">
.Total
{
width:80%;
font-family: verdana;
}
</style>
<div class="Total">
<img src="cid:Referencia de la imagen"> /* Ver $mail->AddEmbeddedImage */
</div>';

//Cuerpo alternativo del email por si el lector del cliente no es capaz de componer páginas web
$alt_body = "Email alternativo\n\n";

//Ponemos el cuerpo del correo en la propiedad Body
$mail->Body = $body;

//Ponemos el cuerpo alternativo del correo en la propiedad AltBody
$mail->AltBody = $alt_body;

//Enviamos el correo, si se envia bien devuelve un 0 ( no hay error de envio ) en caso contrario devuelve otro valor.
$Error = $mail->Send();


Ver más en:
PHPMailer
http://blog.unijimpe.net/introduccion-a-phpmailer/

Transparentar capas en la web.

Hay ocasiones en las que quedaría bien en la web que zonas no activas aparecieran difuminadas dando a entender que no están en uso.
Para ello podemos hacer uso de la propiedad CSS3 llamada opacity soportada por Mozilla, IE no la soporta pero hay una solución para ello.
La propiedad opacity tiene valores entre 0 y 1. 0 es transparente y 1 totalmente opaco.
Para IE utilizaremos 'filter:alpha(opacity=100)' cuyos valores van de 0 a 100. 0 es transparente y 100 totalmente opaco. En el caso de IE hay que poner obligatoriamente la propiedad width ya que en caso contrario no funciona.
Para modificar dinámicamente estas propiedades tenemos para mozilla la instrucción this.style.opacity=0.2 y para IE this.filters.alpha.opacity=20 .
El ejemplo está probado en FireFox 2.0 y en IE7 .






Esto es un texto para ver la opacidad.









Ocultar


Ver