/// DESIGN-ROOT /// Diseño, usabilidad y animación web

El siguiente estilo nos permite cambiar la opacidad de una imagen tras un evento (onMouseDown, onMouseOver,...).

style="filter:alpha(opacity=100)" onMouseDown="this.filters.alpha.opacity=50"

Un caso práctico de aplicación podría ser una galería de fotografías compuesta por imágenes thumb en miniatura. Al hacer clic sobre una imagen thumb se abre en un pop-up la imagen a gran tamaño. Si aplicamos este estilo dentro de la etiqueta <img> de la imagen, al pulsar sobre ella bajará la opacidad indicando que ya se ha pulsado.

Aqui van algunas recomendaciones a la hora de elaborar una newsletter (boletín informativo que se envía vía email a usuarios registrados al servicio).

SOBRE EL PESO...

• Ninguna foto o imagen que esté dentro del email debe superar los 45Kb (kilobytes). Cuanto más pesa estas fotos, más difícil es para un usuario descargarlo. Esto puede provocar que el usuario no lea el email, es recomendable que el peso sea de unos 30Kb.

• El peso total de todas las fotos no debe superar los 200 Kb, el exceso provocaría la saturación del servidor al tratar de servir un exceso de tráfico, para que el peso total de fotos no influya en la apertura del email, el peso total no tendría que superar los 100 Kb.

• En caso de que exista una creatividad streaming (video, flash, etc...), el peso de ésta no debe superar los 600 Kb.

VERSIÓN TEXTO

• Debe prepararse para cada envío en formato HTML, una versión texto para aquellos usuarios que no puedan recibir formato HTML. Esta versión no puede contener ni fotos ni formularios, se debe realizar en formato ASCII, utilizando el block de notas (NotePad).

ASUNTO DEL MENSAJE

• Recomendamos un asunto corto y breve, no más de 5 palabras para poder captar el interés del usuario fácilmente.
• Es preferible que no contenga el nombre del anunciante y que no tenga “tono” muy publicitario.

CONSTRUCCIÓN DEL EMAIL

• Es recomendable que tanto el cuerpo del email como las imágenes no sean excesivamente anchas a fin de que se puedan leer perfectamente sin necesidad de ampliar el mensaje a  pantalla completa.

• Las fotos donde pueda haber clicks deberían colocarse cuanto más arriba mejor, el tamaño horizontal de las mismas no debe superar los 550 pixeles.

• En el caso de colocar un texto dentro del área de un gráfico, recomendamos que lo coloquen al lado izquierdo del gráfico. Esto evitara dificultades en el alineamiento y la visualización.

• Es recomendable que el texto HTML no esté centrado.

• Si se desea realizar una creatividad streaming con flash, java o javascript, es necesario que dicha creatividad no esté incorporada en el email, ya que no se visualizaría. La solución que debe optarse es enviar un email con una creatividad HTML con una imagen en la cual al hacer click, abre un navegador en el que se visualiza la creatividad al completo. Si la creatividad flash está dentro del email debe ponerse siempre un link que abra un navegador con dicha creatividad para el caso en el que no se vea.

• No debe tener el HTML del Email ningún javascript, tanto para abrir popups, como realizar botones (mouse over) o animación ninguna ya que al desactivarse no funcionarían, de querer hacerse se debe hacer como el punto anterior.

• Layer: Si se crea un mail que contenga layers, la página no se visualizará en la mayoría de clientes de correo (el único que lo puede ver es Outlook y Outlook Express, no se ve tampoco clientes web como hotmail, yahoo...), por tanto no debe tener layers

• Muchos clientes email cambian las fuentes de letra, por tanto es recomendable que las fuentes dentro del email tengan estilo, sin embargo no deben realizarse hojas de estilo ya que se muchos clientes email las desactivan deben estar junto a la creatividad HTML.

• Imágenes de fondo: Es recomendable para evitar que en la creatividad se rompa la maquetación que las imágenes que se incluyan como fondo lo hagan dentro de una tabla y no dentro del tag “”. En este caso puede que no llegara a visualizarse la imagen.

JPEGS versus GIFS

• No recomendamos el uso de .jpegs para gráficos que contienen texto. Deben utilizar .gifs para un imagen con texto. Sólo deben utilizar .jpegs para imágenes que son fotos.

• Si utilizan .gifs para gráficos que contienen texto, el fondo debe ser transparente.

HACER TEST

• Recomendamos que antes de mandarnos la creatividad finalizada que la prueben en diferentes “email clients”/clientes de lector de email (Microsoft Outlook, Netscape, Yahoo, Eudora, Lotus Notes, Hotmail, etc.)

VALIDAR CODIGO HTML

• Recomendamos que validen el código HTML con las normas W3c (http://validator.w3.org/).

Este script muestra un texto al posicionar el cursor sobre un enlace, similar al efecto estándar de la etiqueta ALT, pero con la ventaja de que éste sale inmediatamente sin necesidad de esperar unos segundos.

1.- Creamos el estilo para la CAPA del mensaje ALT

2.- Copiamos el siguiente script

/***********************************************
* Show Hint script- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
  
var horizontal_offset="9px" //horizontal offset of hint box from anchor link

/////No further editting needed

var vertical_offset="0" //horizontal offset of hint box from anchor link. No need to change.
var ie=document.all
var ns6=document.getElementById&&!document.all

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=(whichedge=="rightedge")? parseInt(horizontal_offset)*-1 : parseInt(vertical_offset)*-1
if (whichedge=="rightedge"){
var windowedge=ie && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-30 : window.pageXOffset+window.innerWidth-40
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth+parseInt(horizontal_offset)
}
else{
var windowedge=ie && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
}
return edgeoffset
}

function showhint(menucontents, obj, e, tipwidth){
if ((ie||ns6) && document.getElementById("hintbox")){
dropmenuobj=document.getElementById("hintbox")
dropmenuobj.innerHTML=menucontents
dropmenuobj.style.left=dropmenuobj.style.top=-500
if (tipwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=tipwidth
}
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
dropmenuobj.style.visibility="visible"
obj.onmouseout=hidetip
}
}

function hidetip(e){
dropmenuobj.style.visibility="hidden"
dropmenuobj.style.left="-500px"
}

function createhintbox(){
var divblock=document.createElement("div")
divblock.setAttribute("id", "hintbox")
document.body.appendChild(divblock)
}

if (window.addEventListener)
window.addEventListener("load", createhintbox, false)
else if (window.attachEvent)
window.attachEvent("onload", createhintbox)
else if (document.getElementById)
window.onload=createhintbox

3.- Copiado el script, solo nos queda "llamarlo" desde la etiqueta a href del enlace de la siguiente manera:

<a href="#" class="hintanchor" onMouseover="showhint('Aqui esta mi <b>mensaje</b> ¿Qué te parece?', this, event, '200px')">[MI MENSAJE]</a>

Fuente: www.dynamicdrive.com

blogSpirit es un servicio de alojamiento de weblog que da al usuario todas las mejores características... Gratis!

Un blog es un sitio Web fácil de usar en el cual puede, entre otras muchas cosas, expresar rápidamente sus opiniones e interactuar con otros usuarios. Todo ello GRATIS.

Nunca disponer de una bitácora gratis en Internet fue tal fácil, subdominio gratis, espacio gratis, multitud de diseños para elegir, plugins con las más variadas utilidades y herramientas para tener el mejor weblogs. Pulsa sobre el enlace si quieres conocer las caracteristicas completas.

¿Quieres tener tu propia bitácora? Bitacoras.com pone a tu disposición Bitacorae, un potente gestor de contenidos 100% en español con el que mantener tu diario en línea será tan sencillo como utilizar un procesador de textos.

Google Trends es el último experimento de Google, un buscador de tendencias. Con escribir un término en el buscador, Google te muestra lo popular que es ese término en las consultas realizadas en su buscador o cuántas veces aparece dicho término en las noticias y cuál es su evolución a lo largo del tiempo.

A simple vista me recuerda a Zeitgeist, otro de los servicios que ofrece Google para conocer cuáles son las palabras más buscadas por los internautas.

Tras unos meses en que la web estuvo "caída" a causa de un ataque hacker, Ajedrez21 (desarrollada por Chess Education and Technology S.L.) vuelve a la carga para ofrecer la mejor aplicación para jugar en red al ajedrez.

Para acceder a ciertas áreas y solicitar determinados servicios se requiere registrarse previamente como usuario, cumplimentando y enviando el formulario seguro de registro.

La web iSketch ofrece una magnífica aplicación para jugar en red al conocido juego de mesa Pictionary. No es necesario registrarse (sólo si quieres mantener un nombre de usuario fijo). Si estas aburrid@ te recomiendo que eches un vistazo a esta página y demuestres tus habilidades pictóricas con el ratón.