Nicolás Flores

Diseñador Multimedial

Diseño, optimización de webs y soluciones autogestionables

Yaestabaregistrado.com

Diseño por Kumite.
La gente de YER quería rediseñar su sitio, y me contactó para la implementación del mismo.
El desafío fue hacer los cambios sin que la rutina que el equipo tenía para actualizar el sitio cambie.
  • WordPress
  • Maquetación respetando los estándares de W3C y SEO.
  • PHP/MySQL | jQuery
Ir al sitio Datos técnicos

Filmabonito

Diseño por Pixelate Creativos.
La empresa necesitaba de un sistema para administrar algunos contenidos del sitio, pero en especial que permita altas, bajas y modificaciones de los productos y upload de fotos. Además el administrador permite elegir entre tres layout de banners para la home.
  • PHP/MySQL | jQuery
  • CMS propio
  • Maquetación respetando los estándares de W3C y SEO.
  • Montado en Smarty
Ir al sitio Datos técnicos

Playroad

Diseño y maquetación por Estudio 46.
El sitio ya contaba con un CMS, pero estaba incompleto. Me confiaron la terminación del mismo, permitiendo altas, bajas y modificaciones de productos y upload de fotos. Luego, se me encargó el desarrollo del carrito de compras.
  • Para el CMS, PHP/MySQL | jQuery
  • Carrito de compra con Dineromail
Ir al sitio Datos técnicos

OD Real Estate

Diseño y maquetacion por Estudio 46.
Se necesitaba un administrador para el catálogo del sitio, el cual permita altas, bajas y modificaciones de propiedades y noticias y upload de fotos. Se hizo también un sistema de propiedades destacadas para la home.
  • PHP/MySQL | jQuery
  • Creación de un CMS propio
  • Montado en Smarty
Ir al sitio Datos técnicos

Bien Cortado

El emprendimiento necesitaba un rediseño del logo y comenzar su comunicación web desde cero.
  • XHTML | jQuery
  • Maquetación respetando los estándares de W3C y SEO.
Ir al sitio Datos técnicos

Tercer Ojo

Se terminó el desarrollo del sitio full flash de la empresa. Además se agregó la sección "Novedades", y se optimizó el sitio para que sea correctamente indexado por buscadores.
  • AS 3
  • Información a través de XMLs
  • SEO aplicado a Flash
Ir al sitio Datos técnicos

Coramina Lenceria

Diseño por Pixelate Creativos.
Desarrollo de un sistema de administración para el catálogo del sitio, que permite altas, bajas y modificaciones de los productos y upload de fotos.
  • PHP/MySQL | jQuery
  • CMS propio
  • Maquetación respetando los estándares de W3C y SEO.
Ir al sitio Datos técnicos

El blog del Turu

pero no soy blogger

« ir al inicio

setInterval error en Chrome y Firefox

22 de enero de 2012 | 5:46 pm

Hace unos días encontré un error en una animación que hice en jQuery, que hace uso de setInterval.  SetInterval existe para ejecutar una función cada determinada cantidad de tiempo. Supongamos que estoy en un sitio que hace uso de esta función, pero después voy a otro tab del browser, y me quedo navegando allí durante unos minutos, eso quiere decir que en otro tab (que no estoy viendo…) se debería estar ejecutando una función.

Firefox y Chrome evitan que las funciones con setInterval se ejecuten si uno está viendo otro tab. Tiene sentido, intentan ahorrar memoria para ponerla, justamente, donde el usuario esté mirando. El único problema es que en vez de hacer un “pause”, lo que hacen es ir guardando todas las veces que se deberían ejecutar. Lo que provoca que cuando finalmente vuelvemos a hacer foco, se ejecutan una detrás de la otra!

La solución es increiblemente fácil cuando las funciones con setInterval involucran animaciones, como en mi caso.

Primero les muestro el còdigo sin la corrección:

function magic(elemento){
	$(elemento).animate({
		left: '-=1',
		bottom: '+=2'
	}, 70, function() {
		// Animation complete.
		$(this).animate({
		left: '+=3'
		}, 70, function(){
			$(this).animate({
				left:'-=2',
				bottom:'-=2'
			}, 70)
		});
	});
}

Este código lo que hace es mover un div hacia la izquierda y abajo, y luego hacia la posición original, provocando un ligero temblor. Para ejecutarlo, uso por ejemplo:

setInterval("magic('.banner')",5000);

Lo que hace que cada 5 segundos, el div banner tiemble. Al perder el foco y luego volver al tab, la ejecuciòn en cadena hacia que el banner se fuera no 1, sino por ejemplo 200 pixeles hacia la izquierda (y hacia abajo…). Quedaba horrible por el hecho de quedar en cola de ejecución la función de temblor.

La solución es borrar lo que haya en memoria:

function magic(elemento){
	$(elemento).stop(true,true).animate({
		left: '-=1',
		bottom: '+=2'
	}, 70, function() {
		// Animation complete.
		$(this).animate({
		left: '+=3'
		}, 70, function(){
			$(this).animate({
				left:'-=2',
				bottom:'-=2'
			}, 70)
		});
	});
}

Así de simple…

Samsung Galaxy I5500L

8 de agosto de 2011 | 1:32 am

Hace dos meses más o menos perdí mi celular, aquel Sony Ericcson K310 que tanto tiempo me acompañó y que por algún motivo el que lo encontró no quiso devolver, por más que estaba hecho mierda. Admito que quería el Galaxy S i9000, pero como Claro no tenía stock, me llevé el modelo un poco más viejo, menos top, pero que no por eso deja de ser un smartphone.

En este tiempo de uso, estoy muy conforme. Lo único malo del equipo es que viene con Android 2.1 preinstalado, cuando hoy en día la versión 2.2 es la común. Por qué no le instalé el 2.2 ni bien lo compré? Bueno, primero porque lo tengo que hacer yo, segundo, porque no tenía tiempo, tercero, porque cuando tenés algo que funciona, hace falta arreglarlo? (if it ain’t broke, don’t fix it).

Genial, hasta que dejó de andar…. desde hace unos días (bastantes) no podía enviar SMSs ni recibirlos, y cualquiera que me llamase, por más que el número esté agendado, siempre figuraba como “Desconocido”. Me decidí entonces a actualizar el firmware y el Android.

Dónde podría encontrar todo lo necesario para hacer el update? No, Google no… Taringa. Primero encontré un post donde podía hacer el update a través de Kies (software oficial de Samsung). Como ya venía leyendo sobre el tema, tenía instalado el Kies con la sorpresa de que mi desktop no detectaba el teléfono.

En un momento de iluminación, instalé el Kies en mi netbook, y como vengo comprobando desde hace un tiempo, tener un Windows original tiene sus ventajas… probablemente este diciendo una boludez, pero mi realidad es que cuando algo no anda como es de esperarse, la netbook me salva.

Entonces, Kies leyó mi teléfono, se propuso a bajar todo lo necesario (sólo dije que sí a una o dos cosas) y me quedé esperando a que Kies haga todo, como dice en el tutorial. Llegó el momento de la verdad, donde ya está todo bajado, y el teléfono se empieza a prender y a apagar, y aparece la pantallita “downloading…”:

Como nadie se queda con lo primero que encuentra, ya estaba leyendo este otro post donde se explica el mismo update pero con más pasos y sin usar el Kies. De allí no sólo obtuve la imagen que muestro arriba, sino que supe que el tiempo de esa pantalla debe durar de 3 a 10 minutos. Por eso es que cuando llevaba dos horas de “downloading”, sabía que algo andaba mal…

A esta altura, ya me había bajado todos los archivos para hacer el update manual. Luego de mucho meditarlo, opté por reiniciar Kies. El primer mensaje de reinicio de Kies me dijo que había ocurrido un error durante una actualización. Ok, clic en restaurar, y por supuesto, no funcionó, diciéndome que no reconoce ningún teléfono conectado.

Hasta ahora no me había animado al proceso manual porque el firmware nombrado en el tutorial dice Europa, y uno nunca sabe como funcionan estas cosas. Investigando un poco más, no soy el único con este problema, y acá responden a mi duda, asi que Europa esta bien para Argentina.

Decido encarar el tutorial de instalación manual, pero llegué al mismo problema, ODIN no reconce ningún teléfono conectado a la netbook.

Ya notoriamente nervioso, decidí desconectarlo, abrirlo, quitar la batería, tarjeta SIM y memoria SD. Volví a poner la batería, y lo encendí con la combinación “volumen bajo + tecla central + encendido”. Obtuve exactamente la misma pantalla y no reconocimiento del teléfono. Releyendo el tutorial del instalación manual, me di cuenta de que esta pantalla nos dice que el teléfono esta en “modo” de copiado de archivos, sólo necesita recibirlos.

En un nuevo momento de iluminación, antes de seguir probando cualquier cosa, reinicié la netbook. Y ahora sí, al conectar el teléfono ya lo reconocìa el sistema, por lo que empiezo a tranquilizarme un poco. Descarté por completo seguir con Kies, y seguí con ODIN.

Entre 5 y 10 minutos tardó en instalarse todo, y salió bárbaro. Ya con mi Android 2.2 pruebo el SMS…. y no anda. Bueno, ok, entonces, despues de todo, puede ser un problema de Claro… *610, opción 3, le describo mi problema a la operadora, y resulta que mi lìnea no tenía todo activado. Dos minutos después ya estaba enviando y recibiendo SMSs.

Conclusiones: tengo que llamar a servicio técnico más seguido. Y Kies es una CAGADA. Sirve para hacer backups, pero si tu vida ya está en Gmail, entonces no lo necesitas.

Parecen ser más pasos, y definitivamente más intimidante, pero el segundo tutorial fue el camino a seguir.

A propòsito, Android 2.2, está MUY bueno.

Consejos para freelance – Entrega 1

18 de septiembre de 2010 | 4:19 pm

Hace un poquito más de un año que estoy trabajando en casa, y ya me animo a dar consejos a quienes se preguntan qué se necesita para trabajar freelance. Esta no es ninguna guía definitiva, son sólo algunos tips aprendidos en este tiempo, es totalmente extensible (por eso lo de “entrega 1″), y más importante aún, es lo que a mí me funcionó, quizás otros no pueden aplicar estos punteos, o lo hicieron sin resultados… para eso están los comentarios:

Necesitás equipo

Ya escribí un post sobre esto anteriormente, básicamente  la idea es que para responderle a un cliente, necesitás una oficina completa. Si hace falta contratar a alguien de sistemas, hacelo. Si hace falta aprender algo de sistemas, es mejor si llamás al que sabe de verdad antes de ponerte ahorrativo en algo con lo que vas a trabajar todos los días. En fin, preparate en todos los sentidos.

Un lápiz es más preciso que la memoria

Soy de aquellos que tiene muy buena memoria. Suelo recordar muchos detalles de cada una de mis charlas, inclusive de aquellas que fueron hace ya un par de años. Sin embargo, no puedo recordar todos los detalles todo el tiempo, obvio. Si bien siempre llevo mi anotador, durante el transcurso de una reunión no estoy tomando nota constante de todo lo que se está hablando, ni siquiera la punteo. Para mí, siempre fue más efectivo prestar muchísima atención a lo que se está hablando, inclusive cuando era estudiante. A mí siempre me sirvió pensar sobre lo que se está hablando en el momento. Pero algo que aprendí a fuerza de olvidos, es que cuando salgo de la reunión tengo que anotar todo lo que se dijo. No hay manera de que tu memoria le gane al lápiz y papel en esa situación, ni siquiera lo intentes de otra manera.

Evitar bocetar con “lorem ipsum”

Todo diseñador conoce las bondades de “lorem ipsum”, cuando se necesita empezar a diseñar y no hay ningún copy definido por el cliente o redactor de turno, aparece aquella mágica oración en latín al rescate. Lo cierto es que si pasás más de un día trabajando en un diseño con esa frase en latín, tu diseño se va a ver espectacular. Esto es tan cierto como que el diseño final no va a llevar ninguna de esas palabras en latín. A partir del segundo día, hay que poner mayor énfasis en que el cliente/redactor nos entrege algo que se parezca, aunque remotamente, a los copys finales. Tu diseño siempre se va ver bien, balanceado, con cuerpos de texto perfectos, legibles, familias tipográficas armónicas, colores adecuados, y un sin fin de etc. usando “lorem ipsum”, pero se verá horrible con “el texto que va”.

Hay dos tipos de clientes: el que escucha tu opinión y capacidades, y el que quiere que hagas lo que él dice

Lamentablemente, hay más del segundo tipo de clientes. Es algo con lo que se tiene que lidiar. No entiendo bien por qué esto suele darse en la profesión del diseñador, constantemente nuestro criterio es dejado de lado, llevándonos a la posición de aquél que sabe usar el programa de diseño. Un diseñador es mucho más que un ejecutador de programas, ya hablé sobre esto antes.

Mi abuelo y mi madre son odontólogos, y ellos cuentan que algunos pacientes acuden a ellos diciendo: “doctor/a, vine a que me arranque la muela”. Suena gracioso, y lo es en verdad. Por más que mi abuelo o mi madre se esfuercen en hacerle entender que hay caminos alternativos a “arrancar la muela”, es una batalla perdida. Podrán decirle que la muela se puede curar, que tiene arreglo… quizás hasta lo convencen y hacen el arreglo. Pero es seguro que ese paciente saldrá del consultorio, irá a otro lugar (no necesariamente un consultorio odontológico), y logrará que le arranquen la muela.

Eso es todo para esta primer entrega, agreguen sus propias experiencias.

Facebook Share

20 de agosto de 2010 | 8:37 pm

Un tip rápido para aquellos que añaden cosas de Facebook a sus blogs, en este caso el Share con el globito que cuenta la cantidad de veces que fue compartido un enlace.

Si lo intentaste hacer, ya sabés que el tutorial oficial es muy simple de seguir, un copy/paste y sale con fritas…

Pero si todo fuese taaaaaan facil, entonces no habrías llegado a esta web, ya que existe un problema por el que necesitás hacer click en el share para que te aparezca el globito. Los programadores de Facebook implementaron el hecho de que muestre el globito con la cantidad de shares sólo cuando se haya compartido, como mínimo, tres veces.

Eso quiere decir que hasta que alguien no haga click y lo comparta con sus amigos (y esto, tres veces…) no se va a ver ese diseño tan lindo que querías poner. Entonces, tenés que hacer trampa, y te digo cómo:

1) Parche facil, pero no elegante: el javascript de Facebook hace la cuenta de cuántas veces compartieron tu enlace, y si el resultado es menor a tres, entonces añade la siguiente class al span que hará al gobito:

.fb_share_no_count{
display:none;
}

Entonces la solución es sobreescribir el display none. Si al botón lo colocamos dentro de un div con id share, entonces:

#share .fb_share_no_count{
display:block;
}

Esto sólo mostrará el globito, dentro de él no habrá ningún número, aunque se haya compartido una o dos veces, eso no se mostrará.

2) Parche copado, pero de tiempo limitado: para implementar esta utilidad, copiaste un código javascript, el cual es:

<a name=”fb_share”></a>
<script src=”http://static.ak.fbcdn.net/connect.php/js/FB.Share”
type=”text/javascript”>
</script>

Si en vez de llamar externamente a ese javascript, hay que bajarlo y editarlo, más específicamente hay que buscar la siguiente línea:

this.displayBox(a,3);

¿Ya se imaginan que quiere decir ese 3? Entonces, hay que cambiar al 3 por un 0, guardar, subir el .js a nuestro servidor, y hacer la llamada localmente. Esta solución está publicada en Patrick M. Kelly’s Bulletin Board.

Cuál es el problema de esto? que la semana que viene, o dentro de un mes, o cuando sea, Facebook va a cambiar la programación del Share. Cuando eso suceda, tu programación editada puede llegar a no funcionar.

Estará en cada uno evaluar qué camino seguir.

Presupuestar siendo freelance

18 de mayo de 2010 | 10:19 pm

Esta etapa de trabajo freelance en la que me embarqué ya se ha extendido por 9 meses. Tiempo durante el cual la vengo pasando muy bien. Sin moverme demasiado, trabajo no me está faltando, lo que es muy bueno. Es por la no falta de trabajo que en este sitio aún no figura mi portfolio con mis últimos trabajos. Esto no quiere decir que si pongo el portfolio online es porque no tengo trabajo, no sean literales. Sólo quiere decir que pude tomarme todo este tiempo para pensar bien cómo quiero que se muestre todo.

Hablando exclusivamente de trabajo freelance, me voy a permitir escribir unas líneas sobre el armado de presupuestos. Tal como dije en el post anterior, guías para ser freelance hay muchisimas, estos posteos no pretenden ser otra cosa que mi visión sobre temas muy puntuales.

Un trabajo freelance empieza por el contacto con el cliente, donde se transmitió una necesidad, y uno puede satisfacerla. Uno empieza entonces a bosquejar en mente varias ideas, de diseño, desarrollo, usabilidad, publicidad, etc. Pero más importante aún, tiempos, costos y equipo de trabajo. Estas obligado a presupuestar, no interesa si sos estudiante y estas leyendo esto porque tenés curiosidad sobre el trabajo freelance, necesitas hacer un presupuesto. Con el correr de los trabajos, los documentos que hago con presupuestos empiezan a ocupar más y más carillas. Los primeros fueron de tres, ahora son 4 o 5… por supuesto que depende del trabajo en sí, ya me van a entender.

Qué items cubro en mis documentos?

Órden de trabajo: suelen ser uno o dos renglones. Muy simple, “Se requiere hacer un sitio web” es perfectamente viable.

Breve detalle: sirve para explayarse en el trabajo. Por ejemplo, si el sitio tendrá administrador, usuarios, carritos, blog, etc. Se intenta nombrar los ítems que habrá (si existe ya un árbol de navegación, va acá), pero no cómo van a funcionar.

Detalle técnico: En este espacio sí se dice como va a funcionar todo lo que se mencionó antes. No hace falta decir detalles de cómo se va a programar o maquetar, pero sí que hará en x lenguaje, o siguiendo estándares, que validará en tales navegadores, etc.

Requerimientos: fácil, que necesitamos que nos dé el cliente para poder hacer todo lo que dijimos que sabemos hacer.

Alcance: es el espacio donde se pone en claro dónde termina mi responsabilidad y empieza la del cliente o la de terceros. Por ejemplo, si preveo que puede existir un problema legal porque el cliente insiste en copiar, este es el espacio en donde pongo de preaviso al cliente. Si el trabajo requiere SEO, suelo aclarar que mi servicio es (precisamente) SEO y no posicionamiento, ya que para primeras posiciones se requiere otro tipo de trabajo.

Tiempo de trabajo: cuánto me va a llevar. Esto va de la mano con algunos puntos de requerimientos y alcances. Entonces, siempre vale la aclaración de que si el cliente no entrega el material, uno también lo hace.

Valor: cuánto cuesta, porcentajes a cobrar, y formas de pago.

Documentación: para hacer un presupuesto, seguro que el cliente nos mostró una web (o lo hicimos nosotros para graficar algo), o nos pasó algún .doc o .jpg, etc. Todo lo que nos haya pasado y que se usó para presupuestar, va acá.

Otras cosas que se pueden añadir pueden las relativas al contrato de terceros, desde fotografías hasta el servidor. Otro punto puede ser sobre la propiedad intelectual.

El que estoy evaluando agregar, pero depende muchísimo del cliente y proyecto, es qué sucede cuando se extiende el período de bocetos de diseño, lo cual va de la mano con que se supone que alguien te contrata no para ejecutar el diseño que él tiene en la cabeza, sino para que uno pueda traducir una necesidad en la mejor resolución visual.

Es un poco más complicado, porque básicamente se trata de decir que la persona idónea soy yo, y no el cliente. Y al menos por ahora, no se me ocurre una forma de decirlo sin que lleve a un malentendido.

Escucho sugerencias…

Imagen en el submit de un form

29 de noviembre de 2009 | 10:33 pm

Adlatina es un portal de comunicación. Tiene unos cuantos años online, si trabajan en publicidad lo conocen por obligación (si trabajan y no lo conocen, que esperan?). Algo que me molesta, y mucho, es que en su formulario de login no funciona el “enter”. O sea, pongo mi email, mi password, toco enter……… y muevo el mouse hasta el boton “Ingresar” para hacer click y loguearme. Horrible…

El otro día me puse a pensar en esto, porque simplemente no puede ser que suceda. Pensé un poco más, y la conclusión es que si está hecho de esa forma (y hace años), es porque no saben hacerlo bien. Alguno dirá “pero es un botón de submit, cómo no van a saber hacerlo?”. Corrección, es un botón de submit con una imagen, es otra cosa.

Veamos el código que usaron para este botón sin usabilidad:

<div class="box">
	<div class="content2">
		<a tabindex="7" class="boton" title="ingresar" onclick="document.formulario.submit();" href="#"><span>ingresar</span></a>
		<div class="clear"> </div>
	</div>
</div>

Como se puede ver, no hay ningún elemento de formulario que haga el submit. En vez de un <input type=”submit”>, hay un <a><span>, donde el atributo onclick del <a> es un javascript que hace el submit de un form. Espantoso.

Según mi teoría, el que hizo este formulario no supo cómo resolver el poner una imagen en el submit del formulario. El problema con los input, es que cuando se trata del <input type=”submit” /> el css empieza a comportarse extraño con todos los navegadores. Mientras en Firefox funciona, Explorer falla siempre. Entonces, en su lugar hay que usar un elemento que no lo usa nadie, el <button>.

El código quedaría así:

<div class="box">
	<div class="content2">
		<button tabindex="7" type="submit" class="boton_usable"><div><span>ingresar<span></div></button>
		<div class="clear"> </div>
	</div>
</div>

A la etiqueta button se le puede poner como contenido un <div> o un <span>, si son maquetadores y no conocían <button>, se acaban de dar cuenta que es su nuevo mejor amigo.

Les dejo el link con el formulario tal cuál como está hoy, y mi propuesta. Chusmeen el CSS.

Firmas con imágenes en Thunderbird

3 de noviembre de 2009 | 9:58 pm

Thunderbird es el cliente de email compañero de aventuras de Firefox. Thunderbird tiene cosas que claramente debe mejorar en cuanto a usabilidad, especialmente el lector de blogs, dar de alta un feed es muy complicado. Más allá de esto, les doy una guía de pasos para crear una firma con imagen embebida, cosa que si bien no es dificil, tampoco está facil.

Lo importante a entender, es que una firma en Thunderbird siempre es un archivo aparte, que el programa lee y añade al final de nuestro email. O sea, si yo hago un archivo llamado firma.txt, cuyo contenido es “Nicolás Flores”, ya tengo mi firma. Entonces, para setear este archivo como firma, Herramientas/Configuración de cuentas:

thunderbird11

Si yo quiero poner en mi firma una imagen, entonces no me sirve setear un archivo .txt como firma. Para hacer esto necesito un archivo .html, y configurar una etiqueta de imagen, con la ruta correspondiente al archivo. No es necesario que el archivo se encuentre en un servidor web, puede estar en una carpeta en mi PC.

Para hacer un archivo html necesitamos un notepad común y corriente, en donde ponemos:

<img moz-do-not-send="false" src="file:///C:/turu.jpg" alt="Turu">

Editamos la ruta con el nombre del archivo correcto, y listo!

Es importante utilizar el parámetro alt, ya que si el receptor del email tiene bloqueado el codigo html que hace posible ver una imagen, en su lugar colocará el texto que pongamos allí.

Cuando enviemos un email, es probable que nos pregunte si deseamos enviar el email en formato html o texto. Elegir html por razones obvias…

Truco CSS para escalar imágenes

11 de mayo de 2009 | 7:12 pm

Hace unas semanas me encontraba leyendo sobre este truco de css para escalar imágenes en Internet Explorer sin que se vean pixeladas. Quedó como una curiosidad, pero no le ví un uso práctico.

Hoy se lo encontré. Estas semana estuve arreglando un back office y un front, y hoy notaron que las imágenes de los productos subidos por BO tienen un tamaño distinto al utilizado en el front. Como las subidas eran más grandes, bastó con esa simple línea de css:

img{
-ms-interpolation-mode: bicubic;
}

y listo.

SEO y SEM

25 de abril de 2009 | 1:09 pm

En los últimos meses me preguntaron en distintas ocaciones sobre SEO y SEM. No es precisamente algo en lo que me especializo, o sobre lo que esté leyendo constantemente. Lo que sí me interesa en relación a SEO es la web semántica, escribir bien para que se guarde un sitio correctamente.

Luego de esta introducción, les cuento brevemente de qué se tratan. Entonces, qué es SEO y SEM?

SEO: Search Engine Optimization. Es preparar un sitio web para que los buscadores (soy generoso con el plural… google) puedan “ver” una página correctamente. O sea, que todo el contenido sea guardado correctamente en la base de datos del buscador. Esto es para que cuando alguien hace una búsqueda, con tus páginas bien guardadas, te puedan encontrar en los primeros resultados de la búsqueda.

Tareas SEO: correcta maquetación del sitio, keywords apropiados, titles apropiados, contenido acorde a esas keywords y títulos, sitemap.xml.

SEM: Search Engine Marketing. Cuando hacés una búsqueda, en google por ejemplo, aparecen sobre el costado derecho links con otro color de fondo, y a veces entre los primeros resultados. Esas posiciones y keywords fueron pagas. Yo pago para que con la palabra “xxxxx” mi sitio web aparezca primero de todo, pero siempre será con otro color de fondo, para indicarle al usuario que esa no es una posición natural.

Para SEO se le debe pagar al diseñador, si es que no lo ofrece como parte de la calidad de su trabajo (debería!). Para SEM, se le paga al buscador que ofrece este servicio (google, yahoo…).

Lo que queda un poco entre medio es lo que se conoce como “ruido”.

Ruido: cuántas y qué páginas están hablando de mi sitio. Si yo tengo un sitio web correctamente hecho, indexado en google, etc. pero no me conoce nadie, entonces nunca voy a figurar en las primeras posiciones… quitemos el buscar la url de tu sitio, ahí siempre vas a estar primero.

Cualquier agregado y corrección, adelante…

Guía de maquetación HTML para e-mails marketing

17 de abril de 2009 | 6:46 pm

En el tiempo en que llevo trabajando en Interactive, aprendí que algo a lo que hay que prestarle un poco más de atención en la etapa de test es a los e-mails marketing. Debido a la ausencia de estándares, y que corporativamente se utilizan clientes de email como lotus o outlook pero el público en general utiliza webmails, uno se ve obligado a reducir las piezas html a una serie de reglas para performar correctamente en todos los medios.

Como no suelo encontrar guías en la web sobre este tema, comparto la que uso diariamente. Agreguen o corrijan lo que crean necesario:

  1. Resolución de imágenes para web: 72 dpi.
  2. Evitar usar imágenes menores a 14px de alto y 8px de ancho.
  3. No usar hojas de estilos externas, ni estilos embebidos en el head.
  4. No usar javascript.
  5. No usar div para maquetar, usar tablas y no más de dos anidadas.
  6. Evitar usar degradés como fondo donde haya un cuerpo de texto. De esta manera se puede setear el color de fondo sólido como propiedad del td.
  7. Evitar la imágenes como fondo de un td.
  8. Utilizar etiqueta alt en todas las imágenes.
  9. Setear altura y ancho en tablas y tds.
  10. Setear alineaciones verticales y horizontales, aún cuando sean las default (middle y left).
  11. Para setear márgenes con presición, usar spacer.gif, archivo gif transparente de 15×15 pixeles seteándole ancho y alto a necesidad.
  12. Usar entidades htmls. Adjunto las más comunes:
    • á, é, í, ó, ú = &aacute;, &eacute;, &iacute;, &oacute;, &uacute.
    • Á, É, Í, Ó, Ú = &Aacute;, &Eacute;, &Iacute;, &Oacute;, &Uacute.
    • ñ, Ñ = &ntilde;, &Ntilde;
    • TM = &trade;
    • (R) = &reg;
    • (C) = &copy;
    • Comillas simples = ‘
    • Comillas dobles = “
    • & = &amp;
  13. Ojo al utilizar superscript “<sup></sup>”, en textos multilínea agregará márgenes.
  14. No usar etiqueta <p>.
  15. Colocar textos entre <font></font>. La forma correcta de formatear un texto sería:

<font face=”arial, helvetica, sans-serif” size=”1″ color=”#666666″ style=”font: normal 10px arial, helvetica, sans-serif; color:#666666;”>Lorem ipsum dolor sit amet</font>

De esta forma se asegura que el texto tenga el formato deseado, ya sea por “style”, o por los antiguos parámetros. Lotus usará face=”arial, helvetica, sans-serif” size=”1″ color=”#666666″, los webmails style=”font: normal 10px arial, helvetica, sans-serif; color:#666666;”.
La equivalencia en tamaños de tipografía sería:
- 10-11 = size 1
- 12-13 = size 2
- 14+ = size 3

Notar el retraso importante que se tiene en materia de email. No conozco a nivel mundial la eficacia que tiene un email marketing. Sí sé la eficacia que tienen en los sitios que maneja la agencia, porcentaje alto cuando el email se convierte en una pieza de comunicación y deja de ser un “correo no deseado”.

Más sobre eficacia de email marketing en Dossiernet.