El término “experiencia de usuario” es un término un tanto incomprendido, y muchos hombres de negocios están confundidos acerca de que involucra actualmente y que tan crucial es su uso.

Yo he respondido abiertamente lo que a mi juicio significa este campo en el desarrollo. El resultad es esta lista de 10 puntos que tratan de “derrotar” los mitos creados sobre este tema. Léelo, apréndelo y vívelo.

El diseño de experiencia de usuario, NO es…

Diseño de interfaz de usuario

No es raro confundir “Experiencia de Usuario” por “Interfaz de Usuario” después de todo se trata de una gran parte de cómo los usuarios interactúan con el mismo tiempo que experimentan productos y servicios digitales. Sin embargo, la interfaz de usuario es solo una pieza del rompecabezas.

“Es un elemento de la interfaz de usuario, pero hay mucho más”, dice Peter Merholz, socio fundador y presidente de Adaptive Path. Christian Crumlish, parte de la comunidad de la Biblioteca de Diseño de Patrones de Yahoo!, explica que el diseño “no se trata de cosméticos, jugar con píxeles y colocar botones. Es global y a todos nos concierne y no solo a los artistas.”

Dan Saffer, fundador y director en Kicker Studio, agrega que es común pensar erróneamente que el diseño es únicamente decoración y estilo. “He tenido clientes que me dicen que no debes preocuparte sobre como es su estrategia”, dice, “¿Porqué un diseñador debe preocuparse en el porqué? UX es algo más que un tema bonito.

Un paso en el proceso

Este es el proceso. Con el fin de crear una gran experiencia para tus usuarios, no solo debemos diseñar algo que ellos utilizan, tenemos que seguir escuchando e iterando. No tiene que ser un proceso rígido, pero tiene que existir.

“Experiencia de usuario no es una caseta de verificación de diseño”, dice Liz Danzico, un consultor independiente sobre la experiencia de usuario y el nuevo presidente del programa MFA in Interaction Design en la School of Visual Arts. “No basta con solo hacerlo y seguir. Es necesario que en integren todas las partes.”

Dan Brown, co-fundador y director de EightShapes señala que: “La mayoría(de los clientes) esperan que el diseño de experiencia sea discreto en actividad, resolver todos sus problemas con una sola especificación o de un solo estudio de investigación. Debe ser un esfuerzo continuo, un proceso de aprendizaje continuo sobre los usuarios, respondiendo a sus comportamientos, y a la evolución del producto o servicio.”

Sobre la tecnología

La experiencia de usuario no trata sobre la tecnología, dice Mario Bourque, arquitecto de administración de información y administrador de contenidos de Trapeze Group. “Es acerca de como vivimos. Sobre todo lo que hacemos; y lo que nos rodea.”

Como un pintor que utiliza la pintura para comunicar los conceptos y emociones, los diseñadores de la experiencia de usuario utilizan la tecnología para ayudar a las personas a alcanzar sus objetivos. Pero el objetivo principal es ayudar a la gente, no hacer una gran tecnología.

“El diseño de la experiencia del usuario no se limita a los confines de la computadora. Ni siquiera se necesita una pantalla”, afirma Bill DeRouchey, director de diseño de interacción en Ziba Design. “Experiencia de usuario es interactuar con cualquier otro productor, cualquier artefacto o cualquier sistema.”

Realmente, un diseñador de experiencia de usuario podría ayudar a mejorar la experiencia de una persona con cualquier cosa -de una puerta, de un grifo, de un carrito de compras. Simplemente no suelen referirse a las personas que utilizan esas cosas como “usuarios”, pero que lo son.

Sólo de usabilidad

Hacer las cosas más fácil e intuitiva está lejos de ser nuestro único objetivo. Con el fin de lograr que la gente cambie su comportamiento, tenemos que crear cosas que deseen utilizar.

“La utilidad no representa todo para la Experiencia de Usuario”, afirma Will Evans, arquitecto director de experiencia de usuario en Semantic Foundry. Él señala a Peter Morville de UX honeycomb, que además de útiles, se reconoce útil, conveniente y creíble, encontrar con, y, en definitiva, valiosos como los principales aspectos de la experiencia de usuario.

Sólo el usuario

Russ Unger, estratega de diseño de experiencia, le gusta decir que la mayor idea errónea de la Experiencia de Usuario es la “U” “Hay un conjunto de objetivos de negocio que se necesitan para ser cumplido y que además estamos diseñando,”, explica. “Nosotros simplemente no podemos hacer lo que es mejor siempre para los usuarios. Tenemos que tratar de asegurarnos de que estamos presentando una experiencia global que pueda satisfacer la mayor cantidad de necesidades y objetivos como sea posible para la empresa y los usuarios.”

Como diseñadores de Experiencia de Usuario tenemos que encontrar el punto clave entre las necesidades del usuario y los objetivos del negocio y, además, garantizar que el diseño están en la marca.

Costoso

Cada proyecto requiere de un enfoque a la medida de la base de los negocios con los recursos disponibles, las capacidades, el tiempo y el presupuesto, y toda una serie de limitaciones del mundo real. Pero eso no siempre significa que tiene que ser costoso o siempre serlo.

Steve Baty, director de estrategias de Experiencia de Usuario en Meld Consulting, combate la falacia de que el diseño de Experiencia de Usuario toma demasiado tiempo al proyecto. “A veces, un verdadero proceso UCD formal puede no ser la mejor cosa a tratar al principio”, dice. “Es muy importante -y totalmente posible sin importar dónde se está trabajando o cuando se llegue a un proyecto- a hacer mejoras a la vez en el proyecto y el producto mediante la introducción de algunas técnicas de diseño de la experiencia de usuario”.

“Las personas se aferran a las cosas como personas, investigan, dibujan comics, etc”, “En realidad los mejores diseñadores tienen una serie de opciones, elegir y escoger los métodos para cada proyecto es lo que hace que el proyecto tenga sentido”.

Fácil

Simplemente porque sabemos cómo llevar a cabo algunas actividades útiles y frescas y que conozca muy bien su negocio no significa que todo este proceso es sencillo. Cortando algunas pasos importantes hacen de la receta un desastre.

Saffer mantiene el concepto erróneo de que “Tan común entre los diseñadores, ya que es uno de los clientes, es que existe un método secreto que va a resolver todos sus problemas de diseño”.

Una trampa en el que muchas empresas caen es la idea de que son sus propios usuarios finales. Erin Malone, director de Tangible UX, considera que tanto los jefes de producto y programadores creen que creará la experiencia que ellos construyen. “Los diseñadores de Experiencia de Usuario son capturados en el medio tratando de hablar el idioma de negocios y los diseñadores tratando de justificar por qué tenemos que hacer nuestro trabajo y por qué es importante para el éxito del proyecto.”

Si usted hace suposiciones sobre la gente que espera recibir su producto o servicio -quienes son, cómo se comportan, que es lo que los distingue- probablemente se equivoque. Pero tómese el tiempo para conocerlos, y empeñece a la persona adecuada para facilitarse el proceso, y asegurece de salir bien.

El papel de una persona o departamento

Los diseñadores de Experiencia de Usuario son enlaces, no expertos en la materia, como médicos o seres mágicos. No tenemos un conjunto de mejores prácticas que podemos aplicar roboticamente, ni tenemos todas las respuestas. Nuestra mayor habilidad es que sabemos escuchar. Si bien nos puede ayudar a evangelizar en el proceso más eficaz dentro de su organización, es en la última instancia a todos los miembros de la empresa para que sea un éxito.

“Experiencia de Usuario no es sólo la responsabilidad de un departamento o persona”, dice Livia Labate, director de arquitectura de información y experiencia de usuario en Comcast Interactive Media.

Malone se destaca en el hecho de que hay muchos profesionales de diferentes razas que entran dentro el paraguas de la Experiencia de Usuario. “Nosotros, como industria, no hemos hecho un buen trabajo de separar las funciones y especialidades con suficiente lenguaje para que los clientes y las empresas que se necesitan contratar(personal o consultor) tengan diferentes tipos de personas en diferentes puntos en el ciclo de vida de un proyecto.”

Una sola disciplina

La verdad es que estamos todos muy nuevos en esto. Louis Rosenfeld, editor en Rosenfeld Media, la publicación de libros sobre el diseño de experiencia de usuario sostiene que la experiencia del usuaro todavía ni siquiera debe ser una disciplina. “Puede incluso no ser todavía comunidad”, afirma. “En el mejor de los casos, es una conciencia común, un hilo que une a la gente de diferentes disciplinas que se preocupan por el buen diseño, y que se da cuenta de que hoy en día cada vez más son más complejos los retos de diseño”.

Hemos proliferado una nube de títulos en diferentes partes del proceso. Experiencia de Usuario en algunos profesionales se centra en una técnica específica, como Indi Young y los modelos mentales, o de un solo problema, al igual que Lucas Wroblewski y formularios web, o de alguna actividad en la cual se centró, al igual que Steve Krug y las pruebas de utilidad. Al igual que usted no irá con un cardiólogo para curar su pierna rota, no espere que un profesional en el ámbito de la experiencia del usuario pueda satisfacer todo lo que necesita.

Una elección

Para aquellos de ustedes que piensan que realmente no necesitan un diseñador de experiencia de usuario, tengan esto en mente: “Nadie quiere creer que lo que están ofreciendo es de mala calidad o deficiente”, dice Kaleem Khan, un consultor independiente de experiencia de usuario, “Porque nadie tiene por objeto lograr un mal diseño como meta. Siempre es un riesgo. El mal diseño y las malas experiencias pueden suceder”.

Jared Spool, principan fundador y director ejecutivo de User Interface Engineering (UIE), La empresa más grande del mundo en investigación de usabilidad, ha realizado una amplia investigación sobre las cualidades de las satisfacción y el éxito de los equipos de producto. En pocas palabras, el defecto más común que ha encontrado es que las empresas piensan “buena experiencia del diseño es un complemento, no un requisito básico.”

Josh Porter, antiguo UIE y actual director de Bokardo Design, hace enfásis cuando dice, “La más grande idea falsa es que [las empresas] tienen la opción de invertir en su experiencia del usuario. Para sobrevivir, no lo hacen.”

Hay muchos increíbles profesionales que pueden ayudarle en su localidad. Revise su apartado local del Information Architecture Institute(IAI), el Interaction Design Association(IxDA), o el Usability Professionals Association(UPA), o solo simplemente busque alguién en LinkedIn

Puesto que diseñar websites para equipos móviles presenta situaciones particulares y desafíos en el proceso, el sujeto requiere un acercamiento estratégico del diseñador y desarrollador. En éste artículo, veremos al sujeto como un todo, incluyendo tendencias actuales, desafíos, consejos y un showcase de websites para móviles. También hay varios links hacia recursos útiles y artículos a lo largo de ésta publicación, así que si estás interesado en aprender más sobre el diseño para móviles, deberías tener mucha información al alcance de tus dedos.

Tendencias para el diseño web de móviles en 2009

Opciones Simples

Una de las cosas más intrigantes sobre los websites para móviles es la baja cantidad de opciones disponibles para los visitantes. La página principal móvil de Digg por ejemplo, solo contiene 10 encabezados y links, un link de log-in y unas cuantas opciones de navegación muy básicas. Cuando se trata de websites para móviles, la simplicidad es la clave. A causa de la falta de espacio y la lentitud usual de las conexiones de Internet, es importante que los visitantes tengan acceso a aquello que sea más crucial y tan concentrado como sea posible.

En una era de páginas conglomeradas, la simplicidad de un website para móviles puede resultar refrescante. Lo que es importante debe estar ahí, y lo que se considere superfluo ha de ser descartado. Las opciones simples que un usuario tenga pueden convertir un website para móviles mucho más utilizable que si fuese el caso contrario, siempre y cuando las opciones permitan al usuario realizar acciones que desee.

Espacio en Blanco

El espacio en blanco es una parte importante en cualquier diseño, y es algo que usualmente representa un desafío en el diseño web puesto que hay un deseo de presentar ante el visitante todo lo que sea posible. El espacio en blanco se convierte aún más en una necesidad en el diseño móvil porque el tamaño típico de la pantalla es mucho más pequeño. Un website sobrecargado sería poco atractivo para el usuario y poco versátil para su uso en el ambiente de un móvil.

Carencia de Imágenes

Dado que las conexiones de Internet de alta velocidad se han vuelto comunes en años recientes, los diseñadores se han podido tomar mayores libertades como por ejemplo en asuntos relacionados con el ancho de banda y videos e imágenes. El visitante común, sea en desktop o laptop, desea ver un website que capture su atención, y como resultado las imágenes son explotadas al límite. Sin embargo, cuando se trata del diseño para móviles, el uso excesivo de imágenes causa mayores daños que beneficios. Hay una gran variedad de velocidades en cuanto a conexiones de Internet para móviles, así como planes de pago para su acceso. Cuando están conectados vía móvil, los visitantes están usualmente al tanto de la lentitud de la conexión y del consumo que ello representa para sus bolsillos. Adicionalmente, el tamaño de las pantallas puede hacer que se dificulte el ver las imágenes o leer el contenido. Por estas razones es usual que se vea poco uso de imágenes en el diseño web para móviles. Dado que un creciente número de usuarios de móviles optan por teléfonos inteligentes con pantallas más grandes y mejores velocidades de conexión, van aumentado las oportunidades de usar imágenes. Sin embargo, puesto que el número de usuarios aún no tienen acceso a éste tipo de dispositivos aún, muchos sitios web para móviles siguen evitando el uso de imágenes tanto como les sea posible.

Sub-dominios en vez de .mobi o dominios separados

Mientras algunos websites usan el .mobi para las versiones móviles de los mismos, es usualmente más común ver compañías que usen un subdominio o un folder separado en su dominio primario. Existen varios aspectos que una compañía debe considerar al tomar ésta decisión, pero uno de los mayores beneficios de usar un sub-dominio es que mantienen todo dentro de un solo dominio, en lugar de dispersar cosas y potencialmente llegar a confundir al visitante.

Comúnmente verá versiones móviles de websites en direcciones como mobile.example.com, m.example.com, example.com/mobile, example.com/m y otras dentro de éstas líneas. Algunos ejemplos más específicos son: m.twitter.com, mobile.washingtonpost.co y netflix.com/mobile. Por supuesto, existen excepciones a ésta tendencia, pero al ver las versiones móviles de websites de renombre, verán más sub-dominios que simplemente .mobi como es habitual.

Contenido priorizado

Dada la simplicidad de éstas páginas y la falta de variabilidad de opciones, el contenido dispuesto ha de ser altamente priorizado. Algo que le puede resultar asombroso al ver websites para móviles es cuán priorizado es el contenido para el visitante. Claro, todo website ha de estar orientado hacia las necesidades del visitante, pero como la mayoría de websites funcionan comercialmente con fines de negocios, normalmente habrá elementos que no sean necesariamente importantes para el visitante. Puesto que la publicidad y anuncios son una parte ya aceptada como inherente del Internet, la mayoría de websites para móviles presentan la opción de publicidad gratis. El contenido en un website para móvil es típicamente priorizado en cuanto a contenido a comparación de un website normal, lo cual beneficia a la compañía con una mayor cantidad de visitantes.

Desafíos comunes en el Diseño para Móviles

Por supuesto, el diseño web para equipos móviles conlleva su propio conjunto de desafíos que los diseñadores deben superar para crear un website para móviles exitoso. Si ya ha intentado diseñar en éste ámbito, ésto habrá sido algunos de los desafíos más significativos.

Variedad de Tamaños de Pantallas

Aunque los diseñadores web estén de por sí orientados a lidiar con asuntos sobre múltiples tamaños de pantallas y aspectos relacionados, en el caso del diseño para móviles presenta sus particularidades, pues la mayoría de diseñadores se sienten cómodos con los típicos retos dentro del ámbito de los monitores para desktops, pero los móviles presentan retos bastante inusuales. Dado que la tecnología de los móviles va cambiando, los tamaños de las pantallas cambian también. Afortunadamente para los diseñadores, los equipos móviles modernos tienen por lo general pantallas más grandes y mayor resolución que los teléfonos de algunos años atrás, aunque, los teléfonos antiguos siguen en uso. Un estudio reveló que 240 x 320 (a.k.a. QVGA) debiera ser el tamaño estándar para el desarrollo de móviles. Varios móviles nuevos y teléfonos inteligentes vienen con pantallas más grandes, pero aquellos con pantallas pequeñas son más bien cosa del pasado.

Falta de Entendimiento

Uno de los mayores desafíos para los diseñadores es el tener que enfrentarse a la intimidación que surge de lidiar con nuevos aspectos en el diseño. Si no ha tenido en consideración los browsers para móviles y visitantes en sus diseños anteriores, probablemente no sea algo con lo cual se sienta cómodo sin realizar algún tipo de investigación previa. Como los browsers para móviles se comportan diferentes a los browsers para desktops y como el ambiente de los usuarios no es el mismo, el diseñador necesita ganar cierta comprensión y familiaridad. Con la información y recursos presentados en éste artículo, fácilmente puede iniciarse con un conocimiento básico sobre las web para móviles, si es que no tiene conocimientos previos.

Cambio Rápido

Como cualquier otra tecnología, el cambio rápido en una constante. Claro está, los diseñadores web necesitan estar en la cima de la industria en general, y la web móvil no es la excepción. Conforme la tecnología y las tendencias van cambiando, la web móvil irá siempre a la par. El desafío del cambio en realidad no es nada nuevo para los diseñadores, pues la web móvil presenta solamente un área más en que los diseñadores necesitan estar al día.

Desafío de Prueba

Uno de los desafíos más significativos en el diseño para móviles es la amplia variedad de teléfonos en uso. Mientras que el diseño para desktops conlleva sus propios desafíos de prueba, con sus varios browsers y resoluciones de pantalla, hay muchas más maneras dependientes de probar éstos ítems en el momento. En la web móvil sin embargo, muchos de sus visitantes estarán probablemente accediendo a su website en un ambiente en el cual nunca tuvo usted mismo la oportunidad de probar específicamente.

Existen por supuesto algunas cosas que puede hacer para que el website para móviles sea probado lo mejor posible. Para comenzar, la simplicidad de los websites para móviles en cierta forma facilita el proceso de prueba puesto que hay menos cosas que puedan salir mal. Con un diseño cuidadoso y algunas pruebas bien planeadas, es posible estar lo suficientemente seguro que un website aparezca como se desea y aún más importante, que sea utilizable en la gran mayoría de móviles.

Decidir qué es lo Esencial

Si los websites tienen la finalidad de contener solo aquello que sea sumamente esencial, el dueño o diseñador del website deberá determinar acertadamente cuál contenido ha de ser el más importante. Esto podría parecer muy simple, pero tomar un website cargado de contenido, imágenes y aún videos y procesarlo hasta tener solo aquello en esencia significativo puede representar un gran desafío. Otro aspecto sobre este tema que debe ser abordado es el estado del visitante frecuente. ¿Qué hacen? ¿Por qué acceden al website a tal hora? ¿En qué podrían estar interesados y en qué no? Recuérdese que los intereses de los visitantes a través de móviles son ampliamente diferentes a aquellos de quienes visitan a través de desktops.

Consideraciones para el Diseño Móvil

Ahora que hemos visto algunas de las tendencias actuales y desafíos en el diseño móvil, examinemos ahora algunos aspectos específicos que deben ser considerados durante el proceso de diseño.

Marcación limpia y semántica

Lo mejor que se puede hacer para dejar una base sólida para tener un website para móviles utilizable es incorporar marcaciones limpias y semánticas. Aquello con lo que podría salirse uno con la suya en el caso de un website tradicional podría causar problemas en el caso de un website para móviles. La marcación limpia ayudará a asegurarse que el browser sea capaz de presentar apropiadamente el website, además de ayudar a dar los visitantes una experiencia agradable, sin dificultades innecesarias.

Separación del contenido y presentación con CSS

Es más probable que los usuarios de websites para móviles vean un sitio con las imágenes y el CSS deshabilitados. Lo más importante para éstos visitantes es poder acceder al contenido y los links: la presentación es secundaria. Un website que usa marcación limpia y válida, con un CSS para separar la presentación del contenido ya se halla en una posición de éxito en éste ámbito del diseño.

Etiquetas con Alt

Como es muy probable que los visitantes no puedan tener acceso a imágenes o bien que decidan deshabilitarlas, las etiquetas con alt son sumamente importantes para fines prácticos. Claro que han de ser usadas siempre, pero en éste caso es mucho más necesario usarlas.

Etiquetar campos de formularios

Éstos ayudan a que el visitante se sienta más a gusto durante su visita, facilitándole el trabajo. Imagínese usar un formulario sin saber a donde se supone que se dirija. Las etiquetas con ALT y las etiquetas de campos de formulario son cosas simples que ayudan en mucho.

Uso de encabezados

Dado que es usual el uso de texto inconsistente y sin estilo en los browsers de móviles, los encabezados cobran relevancia. Los browsers de móviles tiene una menos capacidad de estilizar el texto a como uno desearía, pero h1, h2, h3 y otros tags generalmente ayudan a hacer que el texto tenga forma y cobre una nueva perspectiva para el visitante.

Evite elementos emergentes

La idea es simple, al tener una pantalla tan pequeña y el espacio de por sí saturado, los elementos emergentes simplemente harán ver mal el website, por lo que evitarlos es altamente recomendado.

Reduzca márgenes y sangrías

Claro está que se puede usar márgenes y sangrías con fines estéticos, pero el principio es que ocupen la menor cantidad de espacio posible para no interferir con la fluidez y apariencia de la página.

Preste atención a la navegación

La mayoría de websites tiene un menú primario de navegación en la parte superior de la página. Esto puede ayudar en los websites para móviles, pero generalmente las opciones de navegación en los móviles no son tan avanzadas. Provea solamente los links más relevantes y si es posible, dé a los visitantes una forma fácil de acceder a los otros ítems de navegación.

Considere el contraste de color

Puesto que las pantallas de los móviles no han de tener la misma apariencia que los monitores de desktops y laptops, asegúrese que el fondo y el color del texto tengan un adecuado contraste para que el contenido sea fácilmente comprensible.

Vamos a centrarnos en el uso de Smushit y ver cuál es la ganancia posible que podemos obtener para estos sitios. Esta herramienta nos ayuda a identificar las imágenes que se puede optimizar de nuestra plantilla, pero que siga conservando la misma calidad visual.

Google

Google tiene alrededor de 140 millones de visitantes únicos y 2 billones de visitas al mes. Te das cuenta de que cada byte es importante en el cómputo final, para mejorar la velocidad de carga de cada página y mejorar la experiencia de nuestros usuarios. Ejecutamos Smushit en Google, y el resultado fue que el logotipo se puede mejorar mediante la conversión de GIF a PNG. La mejoría fue notable un 5,92% o 507 bytes. En términos de visitas, podemos traducir de este modo: 400 000 000 * 507 bytes = 188.872218 gigabytes. Así, Google puede ganar 190 GB de tráfico mensual.

Yahoo!

Yahoo! tiene alrededor de 134 millones de visitantes únicos y 2,2 billones de visitas cada mes. Su portada es dinámica y en su caso se consideraron solamente las imágenes de la interfaz. Al parecer, 4,16 KB sólo corresponden a elementos de la interfaz de usuario como iconos, fondos o paneles. Esto significa que Yahoo! puede ahorrar un mínimo de 440 000 000 * 4,16 = 1,745.60547 gigabytes de tráfico por mes.

MSN

MSN cuenta con alrededor de 88 millones de visitantes únicos y 800 millones de visitas cada mes. Vamos a tratar de optimizar los elementos de la interfaz, al igual que Yahoo!, Esta página es dinámica y tiene imágenes temporales. Después de ejecutar Smushit, nos dimos cuenta que MSN puede perder 1,65 KB de peso en sus elementos de interfaz de usuario. Traducido al tráfico y visitas mensuales: 160 000 000 * 1,65 = 251.77002 gigabytes se pueden ahorrar mensualmente por la optimización de las imágenes.

LIVE

LIVE tiene alrededor de 87 millones de visitantes únicos y 970 millones de visitas cada mes. Aquí la ganancia es de 857 bytes o 8,67% a partir del tamaño de imágenes. En este caso, la ganancia mensual de visitas: 194 000 000 * 857 bytes = 154.839829 gigabytes.

YouTube

YouTube tiene alrededor de 70 millones de visitantes únicos y 360 millones de visitas cada mes. Smushit puede ahorrarle a YouTube 30.11kb por usuario, lo que representa el 28,35% de las imágenes. Si se aplicase la optimización de su interfaz de usuario, los servidores de YouTube pueden reducir el tráfico: 72 000 000 * 30,11 Kilobytes = 2,067.48962 gigabytes.

Wikipedia

Wikipedia cuenta con cerca de 60 millones de visitantes únicos y 200 millones de visitas cada mes. Esta página Web no es comercial, debe tratar de optimizar su interfaz de usuario al máximo ya que Wikipedia es sostenida por donaciones. Después de aplicado Smushit sobre Wikipedia, los resultados fueron muy importantes: 5.28kb o 13,35%. Por lo tanto, esto significa que el mes de tráfico pueden perder 40 000 000 * 5,28 = 201.416016 gigabytes. No está mal en la reducción de costes.

eBay

eBay tiene alrededor de 80 millones de visitantes únicos y 700 millones de visitas cada mes. Tenemos una ganancia de 3,84 KB después de ejecutar Smushit en eBay. La misma regla se aplicó en este caso. Parece que eBay puede obtener un adicional de 140 000 000 * 3,84 = 512.695312 gigabytes adicionales los millones de dólares que mueve por sus subastas.

Amazon

Amazon tiene unos 75 millones de visitantes únicos y 330 millones de visitas cada mes. Este sitio es uno de los más dificiles de optimizar. Tiene muchos elementos en la primera página y tuvimos que comprobar todos aquellos que correspondan a la interfaz gráfica. La ganancia fue menor que la de eBay: 3.28 KB. Estoy seguro de que Amazon puede manejar grandes de tráfico debido a su buena infraestructura y buen servicio. Vamos a ver lo que podría ser la mejora en su caso: 66 000 000 * 3,28 = 206.451416 gigabytes mensuales se pueden evitar con un poco de esfuerzo.

Facebook

Facebook tiene unos 60 millones de visitantes únicos y 870 millones de visitas cada mes. Facebook tiene una página sencilla, sin anuncios, el trabajo estaba a medio hacer. Según Smushit, Facebook puede mejorar su página con solo 396 bytes o el 0,66%. Esto significa que los servidores podría ganar 174 000 000 * 396 bytes = 64.1718507 gigabytes.

MySpace

MySpace tiene cerca de 60 millones de visitantes únicos y 800 millones de visitas cada mes. En comparación con Facebook, su ganancia es importante. MySpace pueden obtener 8,71% o 6,30 MB. En términos de tráfico es 160 000 000 * 6,30 = 961.303711 gigabytes.

Como puede ver, basta con utilizar una simple herramienta como Smushit, para que estos gigantes de internet pueden ganar algo de velocidad y puede desahogar un poco sus servidores. Lo mismo se puede hacer para su sitio. Con Shmushit usted puede acelerar su sitio y hacerlo más rápido para sus visitantes. Oh!, hay otra buena noticia para los bloggers … de Wordpress. Ahora puedes descargar el plugin para Wordpress de Smushit, y cada imagen que se sirva en su sitio, será optimizada. Smushit ha sido elaborado por Stoyan Stefanov y Nicole Sullivan de Yahoo!.

¿Por qué la optimización de recursos es importante? Bueno, de acuerdo con el estudio sobre El Estado de Internet por Akamai del tercer cuarto de 2008, el 5% de los usuarios de Internet tienen conexiones regulares abajo de los 256Kbps solo en Estados Unidos (no quiero imaginar, como se encuentra la situación en nuestro países). Con el fin de ofrecer una gran experiencia de usuario, usted debe considerar a todos sus visitantes y clientes potenciales.

Este artículo ilustra un proceso estructurado que le ayudará a simplificar el enfoque para desarrollar sus aplicaciones Web, ahorrando tiempo y realizando el trabajo de manera más eficiente.

Fase principal del proceso.

En un proceso genérico de desarrollo de aplicaciones Web se pueden identificar cinco fases principales:

1. La definición de los requisitos
2. El Diseño
3. El Desarrollo de la Aplicación
4. Las Pruebas 

5. La Publicación

La Planificación y el Seguimiento son “fases cruzadas”, que siguen al desarrollo de proceso para definir un plan del proyecto, compuesto de una lista de actividades que se deben controlar durante la ejecución del proyecto. Para cada actividad hay que definir un conjunto de información útil para su seguimiento, por ejemplo:

1. El Propietario
2. La Duración
3. El costo

Definición de los requisitos


En esta primera fase tiene que definirse el alcance y las necesidades de la aplicación Web en términos de lo que debe hacer su solicitud, principales características y requisitos técnicos:

Ámbito

Con el fin de definir el alcance de la aplicación Web es suficiente redactar una lista detallada con una clara descripción de las características de aplicación. Por el momento no es importante el “cómo” sino el “qué”.

Necesidades

El análisis de las necesidades es una parte crucial del proceso de desarrollo. En este paso tendrá que estimar su potencial de tráfico, elegir un lenguaje del lado del servidor (PHP, ASP, Coldfusion …), la base de datos, escoger un servicio de alojamiento … Evaluar todas las cosas que con un adecuado equilibrio entre los tiempos, costos y objetivos.

Diseño

Después de la fase de definición de los requisitos, usted tiene que “diseñar” un esquema detallando claramente el proyecto. En esta fase se puede identificar los siguientes pasos:

Diseño: Mapa de Aplicación

Un mapa de aplicación contiene información esencial sobre la estructura de su aplicación: las páginas (representado con algunos bloques) y las principales relaciones entre ellos.

De esta manera usted tiene un mapa con algunas “ubicaciones” (páginas) y un “camino” (relaciones entre las páginas), que sólo tiene que seguir para adelante, página por página, para implementar su aplicación en la siguiente fase. De esta manera se ahorrará mucho tiempo, teniendo en cuenta claro lo que tiene que implementar.

Diseño: La base de datos

Bueno, ahora es el momento del diseño de la base de datos para su aplicación. Una manera sencilla de hacerlo es utilizando un modelo entidad-relación (ER). En general, puede seguir este orden: primero definir las tablas, los atributos y relaciones entre tablas, etc.

Diseño: Estructura de la pagina

El siguiente paso es diseñar una estructura aproximada de la página, la identificación de todas las secciones principales mediante un nombre (por ejemplo, # cabecera, # navbar, mainContent #, # lateral).

Diseño: Lenguaje de programación a lado-Servidor

Teniendo una cuenta un enfoque orientado a objetos para el desarrollo, se podrán definir las clases, las funciones y todas las características del lado del servidor que se necesita. Debemos recordar que no es la “aplicación”, sino una manera de tener un “guía” para que aplicar en la próxima fase.

Diseño: Frameworks JS

En este paso se puede elegir un framework JavaScript (jQuery, Script.aculo.us, MooTools), que pasa para identificar las principales características que desea aplicar (arrastrar y soltar, efectos de animación) la compilación de una lista simple que asocia a cada especificidad una o varias páginas señaladas.

Hasta este punto se ha completado la fase de diseño. Vamos a comenzar con la aplicación.

Aplicación

Ahora empieza el verdadero reto, porque “la aplicación” es la realización de lo antes proyectado. Puede dividir esta fase en los siguientes pasos:

Aplicación: Base de datos

Crear una nueva base de datos y escribir código SQL, definición de tablas, atributos y relaciones.

Aplicación: HTML

Usar la estructura de las páginas que se definen en la fase de diseño para la aplicación de código HTML:

<div id="header"> </div>
<div id="navbar"> </div>
<div id="mainContent"> </div>
<div id="sidebar"> </div>
<div id="footer"> </div>


Este es el momento para añadir todos los elementos HTML que se necesitan en los puntos identificados durante la fase de diseño. Por ejemplo, si las secciones mainContent contiene una entrada con un título, un cuerpo de texto y etiquetas de correo, añade los siguientes elementos:

<div id="header"> </div>
<div id="navbar"> </div>
<div id="mainContent">
<h1><!-- Post title --></h1>
<p><!-- Text body --></p>
<small><!-- Post tags --></small>
</div>
<div id="sidebar"> </div>
<div id="footer"> </div>


Aplicación: CSS

Cuando la estructura principal está lista, empiece a escribir el código CSS para añadir estilo a su aplicación. Si usted necesita algunas sugerencias acerca de cómo escribir un mejor código CSS, puede consultar las siguiente gúias:

• CSS coding: semantic approach in naming convention
• Useful guidelines to improve CSS coding and maintainability

Aplicación: del lado del servidor

Implementar la lógica de la aplicación, como funciones, interacciones a la DB, las consultas, y cada cosa requiere una interacción del lado del servidor.

Aplicación: JavaScript

Aplicar características Ajax (arrastrar y soltar, efectos de animación …) utilizando el framework que se eligió en la fase de diseño (jQuery, Script.aculo.us, MooTools …).

Pruebas

Durante esta fase hay que “subrayar” la ejecución del código de la aplicación en diferentes condiciones (por ejemplo, el uso de otro navegador). Su objetivo es detectar todos los errores y corregir la aplicación antes de la versión final.

Recuerde, este proceso debe ser metódico y requieren mucha paciencia. Prueba de cada página y cada uno de las características (en este caso también le puede ayudar el mapa de la aplicación para proceder en un cierto orden). Si usted encuentra un error durante la prueba de ejecución, tenemos que solucionarlo modificando el código y que proceda a la validación final (una última prueba) del código.

Publicación

Finalmente usted está listo para publicar su aplicación. Publicar en una carpeta de prueba y hacer una prueba final. Si todo proceder bien podremos poner a disposición de nuestro público la versión final.

El experimento de Yahoo! en el campo de la búsqueda social, con Yahoo! 360 nunca despegó. Era un búsqueda social rudimentaria basada en marcadores y donde los amigos eran mostrados en los resultados de búsqueda.

La búsqueda nunca ha sido la fortaleza de Facebook, Actualmente está siendo manejada por Microsoft, pero la experiencia de búsqueda en el sitio es pobre. Eso dificulta hacer una búsqueda más profunda más allá de solo los nombres de tus amigos. En la actualidad necesitas ir a la pagina de búsqueda avanzada del perfil para filtrar atravez de sus intereses, actividades u otro categoría del perfil, por ejemplo.

Aun la búsqueda social hecha correctamente seria invaluable para Facebook. Pero también podría ser mas valioso para Google. (Ellos ya saben la manera de hacer dinero con la búsqueda). De igual manera también seria la oportunidad de Microsoft Live Search, pero ellos no inspiran mucha confianza en estos momentos. Así que dejemos de lado por un momento la alianza de Google-Facebook o asociación (dado la inversión de Microsoft en Facebook), y vamos a imaginar como los dos podrían ayudarse el uno al otro.

Inclusive si Facebook-Microsoft figuraran en la búsqueda social, es mas viable con Google, por que es donde la mayoría de nosotros realiza sus búsquedas. Para darse una idea de cómo esto seria, tu puedes probar SideStripe, que es, un widget para la búsqueda en Google y una aplicación para Facebook. SideStripe es como GLUE para la búsqueda (Glue es una extensión para tu navegador que muestra cuando alguien de tu red social muestra un interés en un libro, película, restaurante, producto o algunas otras cosas mencionadas en la pagina que se esté visitando). De manera similar, SideStripe indexa a todos tus amigos en Facebook y partes de sus perfiles (donde trabajan, sus intereses, etc.) Cuando se hace una búsqueda en Google, una caja con los resultados de SideStripe aparece después del tercer resultado orgánico, dando una idea de que amigos pueden ser expertos en el tema. Por ejemplo cuando yo busco por “Google” la aplicación me muestra en Facebook, los amigos que trabajan en Google o a alguien que este afiliado al buscador.

Una búsqueda por Bikini mostraría resultados de amigos que están interesados en bikinis. Ademas se puede agregar entradas en los resultados de las búsquedas. Y eso aparecerá a continuación del resultado (Aunque no te deja agregar vínculos, que se consideraría una falla mayor). Y si sigues sin encontrar lo que estas buscando podrás ver en cualquiera de los dos: Google o SideStripe y puedes preguntar a todos tus amigos desde la caja de SideStripe desde Google acerca del tema del cual tu estas tratando de aprender y esa pregunta se mostrara en el lector de todos tus amigos. Entonces toda respuesta será indexada y localizable.

Sidestripe aún está en versión alfa y muy amenudo los resultados aparecen en blanco. Cuando hay resultados, estos son interesantes. Cuando mas gente utilice Sidestripe esto podría mejorar.

Aun mejorando la opción de búsqueda de Facebook, podría llevar un largo camino por delante realizar el sueño de una búsqueda social. El Feed de FaceBook, ya muestra lo que mis amigos están haciendo no solo dentro de la red social sino también através de toda la web, (Twitter, Flickr, YouTube, Digg, etc.).

El truco al hacer todo esto es similar a la información aleatoria en búsqueda que se viene con un algoritmo social que podría categorizar todo adecuadamente. Por ejemplo cuanto yo busco por Florencia, Italia, amigos que han vivido en Florencia, Italia deberían de mostrarse, pero también amigos que recientemente han tomados fotos de la ciudad, o tweeteado acerca de Florencia, talvez en ese orden. Esta parte de categorizar es la parte mas difícil de solucionar, y en esto es en lo que Google es bueno .
Imagine por ejemplo, la opción de agregar a Facebook Connect a la búsqueda de Google lo cual podría iniciar la búsqueda social en los resultados (eso solo debería de aparecer cuando hayan resultados a mostrar). Eso podría agregarle una nueva dimensión a la búsqueda.

Por supuesto que Google tiene su propio programa Friend Connect y quiere ganar dinero con eso atraves de FriendSense pero así como la búsqueda no es el fuerte de Facebook, las redes sociales no lo son para Google. Todos mis contactos están en facebook, A ellos son los que quiero encontrar. Y todo lo que he descrito anteriormente es la gran oportunidad para Microsoft que se está dejando pasar.

Para los mejores resultados, en mi humilde opinión, deberían de venir de una combinación de Google y Facebook.

Anatomía de una Página Web

Los elementos de una página web son como órganos; son vitales para un funcionamiento apropiado y la satisfacción estética de la página web.

Éstos son los elementos principales de una página web. Hay muchas maneras diversas de organizarlos, pero ésta sea quizás el layout más básico y frecuentemente usado en línea.

Contenedor

Todas las páginas web usan un contenedor y para el mismo fin; para contener elementos de la página sin embargo, el modo en que se logra varía. Por ejemplo, el BODY-tag o div es lo que más se utiliza comúnmente. En el pasado, incluso se ha utilizado una tabla (no se use una tabla como contenedor de página, dado que es un método obsoleto). Piénsese en el contenedor como los muros exteriores de su casa, dentro de los cuales posteriormente se colocarán los cuartos, cocina, sala, etc.

Tipos de Contenedor:

• Líquido: se expande para llenar el ancho de la ventana browser.
• Fijo: se elige un ancho específico que no cambia a pesar del tamaño de la ventana browser.

Encabezado

El encabezado en sí no es un elemento específico aunque algunos así lo consideren. Es más usado generalmente para referirse a la sección superior de la página web donde el logo, navegación, dirección, etc. se encuentran. Muchas personas prefieren mantener estos elementos contenidos en un DIV para facilitar el estilizado de la página, separación de elementos y/o contención de elementos. El encabezado se considerará un contenedor, por lo cual tendrá dos opciones: líquido o fijo, como se mencionó anteriormente.

Logotipo

Su logo es su identidad y marca. El lugar mas común para el logo es en el encabezado, alineado a la izquierda. Leemos de izquierda a derecha, de arriba abajo, por ello el logo será el elemento que más atraerá la atención desde un inicio.

Navegación

La navegación de páginas es uno de los elementos más importantes; el visitante la necesita para usar su website. Ha de ser fácil de encontrar y utilizar, por lo cual está casi siempre ubicado en el encabezado o al menos cerca de la parte superior de la página. A veces ambos tipos de navegación son usados para websites de mucho contenido.

Tipos de Navegación:

• Horizontal: una serie de links presentados dentro de la línea, a los que usualmente se refiere como “navegación”.
• Vertical: una serie de links presentados como una columna vertical, a la que comúnmente se refiere como “menú”.

Contenido Principal

Como todos saben (o deberían), ¡el contenido es el rey! Cuando la gente visita nuestro sitio, el contenido será lo que estarán buscando principalmente. Ha de ser el mayor punto de enfoque de nuestra página, así los visitantes podrán encontrar lo que buscan rápida y fácilmente.

Barra lateral o Sidebar

Este es el elemento con el contenido secundario como publicidad, búsqueda de páginas, links de suscripciones (RSS, Twitter, Email, etc.), métodos de contacto, etc. Éste elemento no es necesario a pesar que muchas páginas lo usan. Regularmente se ubica del lado derecho, pero se puede usar también a la izquierda o en ambos lados (dos sidebars) siempre y cuando no interrumpa con la visualización del contenido principal. Para los websites que usan navegación horizontal y vertical, el sidebar se reemplaza por elemento de navegación vertical.

Pie de Página

El final de una página web siempre ha de incluir un pie de página que permita al visitante saber que la página ha llegado a su fin. Como el encabezado, el pie de página no es un elemento específico sino más bien un complemento del contenido. Con el pie de página irá principalmente el copyright y la información de legalidad y contacto. Es buena idea incluir algunos links a las secciones más importantes de la propia página tales como el encabezado, home page, página de contacto, etc. Algunos websites usan éste espacio como una oportunidad para mencionar material relacionado u otra información relevante.

Espacio en Blanco

Esta es un área en la página web que no está cubierta por ninguna clase de tipografía u otro contenido. Puede que sientan la tentación de llenar cualquier espacio que se encuentre vacío, ¡pero no lo hagan! El espacio en blanco es tan importante en una página web como lo es su contenido. Puede verse como el sitio NETTUTS usa espacios en blanco con efectividad para guiar al visitante a través del contenido, además de dar balance estético a la página y dar una buena impresión de separación entre los contenidos.

Esto pues cubre la anatomía de la página web. Ahora veamos cómo el Ratio Dorado se relaciona con éstos elementos.

El Ratio Dorado y el uso de Fórmulas

¿Recuerdan que antes dije que las matemáticas eran hermosas? Percibimos un atractivo visual basado en el ratio. Durante miles de años, artistas, diseñadores, arquitectos, etc. han usado intencional o intencionalmente un ratio en común que resulta en satisfacciones estéticas. ¿Cuál es el número mágico? 1.62 (de hecho es 1.6218…) No me interesa compartir los orígenes de éste número sino más bien su modo de uso.

Usar el ratio dorado es muy simple. Supongamos que quiere encontrar el ancho de sus columnas de Contenido Principal y Sidebar. Tomará el ancho total de su área de contenido (usemos 900px para éste ejemplo) y se divide entre 1.62. Entonces, 900px dividido entre 1.62 da 555.55px. No se necesita ser exactos por lo que se aproximará a 555px. Ahora sabe que su elemento de contenido principal tendrá un ancho de 555px y su sidebar de 345px. ¡¿Fácil, no?!

¡Pero un momento! La diversión no acaba ahí. También se puede aplicar el ratio dorado a otros anchos de elementos en relación a su altura, o viceversa. Esto produce satisfacciones estéticas en los elementos a causa de la proporción del ratio dorado.

Usando Fórmulas

Si es como la mayoría de personas, entonces supongo que no ha de querer sacar una calculadora cada vez que desee usar éste ratio. Para simplificar el proceso, podemos usar una simple fórmula. Todo lo que debe hacer es dividir el ancho y/o altura en tercios.

Cada división puede incluso posteriormente ser reducida a tercios, produciendo una fórmula más detallada. Si lee el artículo “Una mirada profunda al Framework Blueprint CSS” se dará cuenta que Blueprint usa un detallado sistema de fórmulas. Las fórmulas no solo hacen más fácil y rápido el diseño, sino que también proveen resultados estéticos deseables en el layout. Si todavía no utiliza fórmulas en sus diseños, ahora quizás sea un buen momento para intentarlo. Puede descargar un Formulario para Fireworks, PhotoShop y más dese http://960.gs, que es otro fantástico Framework CSS que usa fórmulas.

Como puede ver, NETTUTS se guía muy bien por el uso del ratio dorado. El primer tercio de la página está nuevamente dividido en tercios para mostrar como aún el encabezado se fragmenta en tercios, muy cercanos al ratio dorado. No hay dudas del por qué el diseño de NETTUTS es tan atractivo.

Si es nuevo diseñando, le animo a que encuentre sitios populares, evalúe el elemento layout y cómo ello se ha guiado por el ratio dorado y las fórmulas. Luego tómese un tiempo para practicar usando el ratio dorado con sus propios elementos y colocándolos en su layout usando las fórmulas.

CSS Hacks: el Problema

Aunque nuestros navegadores favoritos (Firefox, Opera y Safari) no cuentan con algún método para asignar un estilo CSS para un navegador específico; como Internet Explorer, “the buggiest browser”, si cuentan con un método seguro y fácil de utilizar para renderizar CSS/HTML.

Como configurarlo:

Para mostrar que hacks están funcionando correctamente, he creado 6 parrafos con sus identificadores específicos para cada navegador/version. Esto nos permitirá conocer que hack funciona en cada caso.

<p id = "opera">Opera 7.2 - 9.5</p>
<p id = "safari">Safari</p>
<p id = "firefox">Firefox</p>
<p id = "firefox12">Firefox 1 - 2 </p>
<p id = "ie7">IE 7</p>
<p id = "ie6">IE 6</p>


Ahora, ocultamos todos los elementos P:

<style type="text/css">
    body p {
      display: none;
    }
</style>


Utilizando Conditional Comments en Internet Explorer

La manera más sencilla para especificar propiedades CSS solo en Internet Explorer es utilizar Conditional Comments.

<!--[if IE 7]>
  <style type=”text/css”>
  </style>
<![endif]–>
<!–[if IE 6]>
  <style type=”text/css”>
  </style>
<![endif]–>


Utilizando CSS Hacks para Internet Explorer

No recomiendo el uso de este tipo de solución dado que los Conditional Comments son más sencillos de utilizar, pero si prefieres mantener todo tu código CSS en un solo archivo, esta es una mejor alternativa. Notarás que el hack para IE7 no aplica en IE6 dado que este último no reconoce el selector “>”. También hay que indicar que este hack no es reconocido en otros navegadores.

/* IE 7 */

html > body #ie7 {
  *display: block;

}
/* IE 6 */
body #ie6 {
  display: block;
}


CSS Hacks para Firefox

El primer hack solo funciona en Firefox 1 y 2; y trabaja utilizando la propiedad body:empty. El segundo hack, es reconocido en todas la versiones de Firefox y funciona utilizando la extensión propietaria -moz. -moz combinado con el prefijo -document url-prefix() es utilizado principalmente por los creadores de extensiones. He encontrado que utilizar este método es mucho más eficaz, y que es más seguro para asegurarse que dichas reglas no serán tomadas en cuenta por otros navegadores.

/* Firefox 1 - 2 */
body:empty #firefox12 {
  display: block;
}
/* Firefox */
@-moz-document url-prefix() {
  #firefox { display: block; }
}


CSS Hacks para Safari

Los hacks CSS para Safari funcionan de manera similar a los de Firefox, dado que utilizan su propia extensión propietaria. Utilizando el prefijo -webkit lograremos que dichas reglas funcionen en Safari y solamente en Safari.

/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  #safari { display: block; }
}


CSS Hacks para Opera

Este hack para Opera trabaja realmente como una negación. Funciona de una manera realmente interesante y hasta extraña, por que hace una comparación para todos los navegadores que soportan min-device-pixel-ratio, pero que no son -webkit. Esto funcionaba bien mientras Firefox no soportaba esta propiedad.

/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
  head~body #opera { display: block; }
}


¿Haz tenido que escribir alguna vez un correo a alguien – a un extraño, solicitándole particularmente un favor?. ¿Cómo podemos redactar correos que sean leídos y atendidos? ¿ómo podemos redactar un correo a alguien y obtener una respuesta?.

Ya sea un correo personal o de negocios, la habilidad de redactar un correo efficiente y efectivo es super útil – tanto en términos de productividad como de responsabilidad.

Todos estamos ocupados, y recibimos correos largos y ambiguos. Irónicamente, muchos de nosotros enviamos correos de este tipo a otras personas.

Ahora que hemos entendido, es más sencillo detectar que tipos de correos funcionan y cuales no. Yo he hecho observaciones interesantes y útiles sobre la creación de correos electrónicos – particularmente.

• Que no hacer cuando enviamos un correo a una persona (ej. a un extraño)
• Como escribir correos que la gente quiera leer.

El objetivo de este artículo es compartir algunos consejos de como mejorar la forma en que enviamos correo más efectivos a las personas y advertir de posibles peligros de aquellos correos que no funcionan.

Antes de seguir profundizando, vamos a asumir algunos puntos:

• El receptor (la persona a la que recibe el mensaje) va a recibir algo junto con el correo.
• Necesitas algo del receptor y planeas obtenerlo a través del correo.
• No sabes mucho acerca del receptor, o conoces poco, o es un amigo íntimo y tu estás enviándole un correo con una petición inusual.

Nuestro objetivo es construir un correo que:

• Será leído
• Será comprendido
• No irritará a la persona que lo reciba
• No tomará mucho tiempo para que la persona pueda terminar de leerlo.

Psicología en el envío de Correos

Generalmente hablando, el emisor y el receptor tienen puntos de vistas bastante diferentes. Y desde la perspectiva del emisor, nosotros no debemos invertir tiempo entendiendo como es el receptor ni como luce su buzón de entrada.

Observando al receptor

• Recibe varios correos regularmente.
• Puede que reciba boletines electrónicos periódicamente, especialmente si es una figura pública.
• Recibe las mismas preguntas y peticiones en su correo.
• No cuenta con mucho tiempo libre.
• No te ayudará, sino es de manera rápida.

Observando al emisor

• Invierte un largo tiempo creando un correo perfecto (perfectamente largo).
• Cree que su petición es original, única y especial.
• Cree que él es el primero en solicitar un favor.
• No puede imaginar por que alguien tarda tanto en responder.
• Desea contar la “historia completa”, desde todos los ángulos posible, para dar a entender su punto de vista.

Con estos puntos de vistas tan disparejos, no es de extrañar que los receptores reciban el tipo de correos que reciben y los emisores vean como sus correos no son lo efectivos que desean que sean.

Ahora, coloquemonos en “los zapatos” de la persona que recibe un correo (y estemos ahí por un momento). Cuando nos encontramos con un buzón de entrada lleno de correos – al regresar, por ejemplo, de un período de vacaciones, nosotros tenemos algunos hábitos naturales:

• Tendemos a responder, o a hacer un borrador de aquellos correos que son rápidos de responder. Esto es, aquellos correos que requieren muy poco trabajo y poca atención.
• Cuando abrimos un correo que es muy largo, nuestra primera reacción es cerrarlo, o dejarlo para después cuando tengamos más tiempo.
• Cuando recibimos un correo de alguien, esperando algo de nosotros, ofreciéndonos algún producto, o solicitando algo de nuestro tiempo, lo guardamos y respondemos automáticamente con un simple, no, aunque la oferta realmente nos beneficie.
• Vamos por la lista de correos, mientras respondemos con un “¿Qué?”.
• Vamos a través de los correos mientras nos preguntamos “¿Por qué debería prestarle atención?

15 Consejos para Redactar Correos Claros, Concisos y que sean Respondidos

1. Determinar el objetivo de nuestro correo

Mucha gente conoce que es lo que quiere, pero no se toma el tiempo necesario para ordenar y clarificar sus ideas. Estos son los ingredientes para un correo ambiguo y sin sentido. Sin un claro entendimiento del objetivo, nuestras ideas serán desorganizadas y podremos confundir fácilmente a nuestro usuario.

Existen 4 tipos de correos:

1. El correo como objetivo en si mismo – El correo en si, es el objetivo principal. Este tipo de correos desean transmitir alguna información. No es necesaria una respuesta.
2. Preguntas – Necesitamos tener respuesta del receptor a nuestro correo. Por ejemplo, alguna recomendación, o la respuesta a alguna pregunta. La respuesta es el objetivo principal.
3. Diálogo – abrir un canal de comunicación, cuyo objetivo es algún resultado o beneficio en el futuro.
4. Correos que invitan a la acción – El objetivo no es una respuesta, sino una acción de parte del usuario. Por ejemplo, llevar a cabo una compra o hacer un intercambio de enlaces.

¿Qué tipo de correos estamos enviando? ¿Cuál es el objetivo que perseguimos?.

2. Respuesta rápidas, “¿Cuál es el punto?”

La gente quiere saber “¿Qué es lo que necesita de mí?. Haz que esta pregunta sea rápida de responder. Evita introducciones largas o detalles demasiado minuciosos. Salta directamente al objetivo principal. Mantén claro el objetivo en palabras sencillas.

Si el objetivo es invitar a una acción, manténlo claro siempre al usuario.

Y si no es necesaria una acción o respuesta, simplemente menciónalo como: “No es necesaria una respuesta”.

3. Mantén la lista de beneficios de una manera clara.

Si el correo persigue algún beneficio para el que lo envía, asegurate que incluir de manera clara, y fácil de entender una lista de beneficios para el usuario.

Muchos correos de este tipo se centran únicamente en los beneficios para el emisor, y la acción que lo beneficiará. Si no mostramos algún “incentivo”, o este es difícil de comprender, el usuario dirá no – resultando en una pérdida de tiempo para ambos.

También, debemos tomar en cuenta que los incentivos deben ser realistas, el intercambio sea justo, y existen beneficios genuinos para nuestro usuario. “Haz tu tarea antes de contactar con alguien”. Ponte en sus zapatos, “¿Cómo debes actuar?”.

Por ejemplo, un intercambio de vínculos con un sitio como LifeHacker no es un intercambio justo. Esto se llama SPAM. Si ellos no muestran vínculos a otros sitios, es muy probable que no quieran mostrar los tuyos.

4. Recuerda a KISS

Cuando enviamos un correo de una extensión bastante considerable a nuestro usuario (solicitándole un favor o su tiempo), esencialmente le estamos diciendo: “No respeto tu tiempo.”. Muéstrale que aprecias su tiempo, redactando un correo conciso, y simple de responder.

Es posible lograr el mismo resultado, utilizando pocas palabras.

Ser conciso no significa que seamos ambiguos. Podemos ser creativos con nuestras palabras y agregar un poco de personalidad al correo, pero siempre siendo concisos.

5. Ahorra contar la historia completa – Cuenta los puntos clave.

Las personas tienden a decir mucho en cada correo. Desean contar una historia llena de detalles, entendiendo, erróneamente, que el receptor del mensaje entenderá completamente. La verdad es, que a menos que lo conozcamos personalmente, quien reciba el correo no lo comprenderá.

Simplemente cuenta los puntos importantes. Esto mantendrá el mensaje corto.

6. Crea un introducción más personal

Si estas frente alguien nuevo en una fiesta, ¿tomas la palabra y cuentas la historia completa acerca de tu vida?. Probablemente no. Típicamente, hacemos una pausa después de una introducción rápida. En un correo electrónico, parar de hablar es equivalente a presionar el botón de enviar.

Añadiendo al mensaje una introducción, como si estuviésemos frente a otra persona es otro consejo para mantener nuestros mensajes cortos.

7. Consejos sobre Mensajes de Texto

Cuando estamos utilizando un dispositivo móvil como un BlackBerry o nuestro teléfono celular, perdemos la fluidez que nos proporciona el teclado de nuestra computadora, y debemos ir directamente al punto principal.

Ahora, asumamos que estamos frente a un dispositivo móvil. ¿Cómo luce nuestro mensaje ahora?

8. Evita demasiados Adornos

Mucha gente tiene la idea de que al “adornar” un correo atraerá más la atención, mientras lo que consigue es complicar al lector su entendimiento.

También, hay una gran diferencia entre ser genuino y decir algo que “salga del corazón”. Los humanos son realmente buenos al detectar frases poco auténticas – aunque sea en un correo.

Utilizar este tipo de “palabras elegantes” deben ser utilizadas si realmente es necesario. Y recuerda que entre más corto sea un correo, será más probable que el lector lo tome en serio.

9. Se personal

Personaliza su correo con un énfasis especial para el lector, coloca un comentario rápido en su sitio, producto o trabajo. Firma un correo con tu propio nombre, y deja un comentario especial como “¡Disfruta del fin de semana!”.

10. Hazlo sencillo de encontrar

Haz que la firma del correo, incluya enlaces apropiados a tu sitio web, blog, portafolio o producto. También cerciorate que los vínculos son funcionales y que pueden ser leídos fácilmente.

11. Usa un lenguaje sencillo

Si el tipo de escritura es demasiado formal o usa un lenguaje muy técnico, es más difícil de entender. Tu correo no debe sonar como un documento legal o SPAM.

Escribe utilizando un lenguaje informal. Se auténtico y realista.

Trata de sonar profesional, cuando necesites sonar profesional. Utiliza tu voz natural.

12. Utiliza un tipo de fuente adecuado

Nada es más molesto que abrir un correo y que este este repleto de texto en negrita. Esto hace que instantáneamente desee cerrar el correo, para proteger mis ojos.

Pero también, una fuente muy pequeña o muy grande puede ser difícil de leer (ej. fuente a tamaño 8 puntos, Times Roman y en negrita), crea en el lector una sensación de no querer leer el correo.

Recuerda que la fuente de tu correo, es parte de la ‘presentación’. No resaltes todas las palabras del mensaje, sino utiliza una tipografía sencilla de leer (como Arial), y utiliza un tamaño estándar. Tampoco utilices colores extravagantes, por que puede que no se vean bien en cualquier monitor.

13. Dale formato a tus mensajes

Crea correos sencillos de leer y utiliza listas con viñetas, o listas numeradas; manteniendo los párrafos cortos. Enfatiza las palabras clave, sin excederte.

14. Minimiza las preguntas

Limita el número de preguntas a una o dos como máximo. Entre más elevado sea el número de preguntas, menos será la posibilidad de obtener un mensaje de vuelta completo.

Se razonable y no esperes que el lector del correo resuelva todos tus problemas. Por ejemplo, “¿Cómo me hago rico rápidamente? ¿Cómo llego a tener éxito?” son preguntas demasiado generales. Se específico en tus preguntas y redacta la pregunta que realmente te interesa.

Puedes enviar preguntas adicionales en correos separados. Pero ten cuidado de no sobrecargar la via de comunicación con el receptor de tu mensaje.

Ajusta las palabras

No temas eliminar palabras, oraciones, o incluso párrafos completos que no tengan utilidad.

Verifica aquellas frases que pueden sonar demasiado ambiguas o que podrían confundir. ¿Puedes dar a entender lo mismo con menos palabras?. Verifica aquellos comentarios que no agregan ningún sentido al objetivo principal. También, remueve detalles innecesarios.

Nuevo sistema de comentarios

La sección de comentarios de WordPress ha sido rediseñada desde cero. Las características más notables son Edición Rápida, Seguimiento y Navegación con accesos rápidos.

Edición Rápida

Ahora, tenemos la opción de editar comentarios desde la pantalla de comentarios. Si presionamos sobre la opción ‘Edición Rápida’ en la pantalla de moderación, el comentario es reemplazado por un panel de edición, donde podremos editar el Nombre, la URL, el correo electrónico y el contenido del mensaje. Este editor en línea es grandioso y sin duda nos permitirá ahorrar algo más de tiempo cuando editemos un comentario.

Seguimiento

Dependiendo del tráfico de nuestro blog, puede que haya muchos comentarios por entrada, y darle seguimiento requería revisar cada comentario, recordar que decían y agregarlo como comentario. Esta nueva versión de WordPress permite darle seguimiento a cada comentario desde la misma página. Cuando presionamos la opción ‘Reply’ nos mostrará un formulario debajo del comentario donde podremos contestarle a un usuario.

Navegación con accesos rápidos

Una de las características que más se apreciarán es este sistema desarrollado con jQuery que permite moderar comentarios utilizando solamente el teclado. Podemos movernos entre comentarios utilizando las teclas J y K. Con la letra A aprobamos un comentario y con U, conseguimos el efecto contrario, S marca un comentario como Spam, y D lo selecciona para eliminación. R muestra el formulario de ‘Reply’ (mencionado arriba) y para salir del mismo, podemos presionar ESC, y la letra Q inicia la edición rápida. Esto nos permite disfrutar de una experiencia de moderación más rápida.

Nuevas características en el Dashboard:

El panel que hasta ahora dominaba la parte alta de nuestro Tablero (el panel Right Now) ha sido desplazado hasta un bloque que ahora muestra toda la información acerca de la actividad en nuestro sitio web. El rediseño fué necesario para que esta área sea más sencilla de leer y entender.

Otras características que destacan son QuickPress y Press This.

QuickPress es básicamente un complemento que nos permite agregar un nuevo artículo, accesible desde el Dashboard.

Press This se parece mucho a un botón de ‘Promueve esta nota’ de Digg o StumbleUpon. Básicamente guarda un marcador. Cuando encontramos un sitio que utilice esta característica, podremos hacer una nota sobre este artículo. La opción nos abrirá una nueva ventana con el vínculo a la página que actualmente estamos viendo. Excelente para hacer Networking, y sencillo de entender para cualquiera.

Opciones de Pantalla

Hasta el momento, cada página mostraba los mismos elementos en pantalla cada vez, así que los desarrolladores han agregado esta interesante característica. Con ella, básicamente podremos decidir que secciones de la página queremos mostrar. Cuando la seleccionamos, se expande hasta mostrarnos una serie de cuadros de chequeo de características. Esta opción está disponible para la parte Administrativa de WordPress.

Cada sección puede organizarse donde nosotros elijamos, arrastrando y reorganizando cada opción.

Complementos

Los chicos de WordPress han agregado una nueva API que permite instalar un complemento ubicado en los repositorios, desde la sección de Administración. Con esto, se elimina el proceso de buscar, descargar, copiar y activar cada plugin, a simplemente buscar e instalar.

Es así de sencillo. Además se ha agregado una ‘Nube de Etiquetas’ con vínculos a una lista de términos de búsqueda más populares (siempre, refiriéndonos a los complementos).

Para los complementos que se encuentren en sitios de terceros, se ha agregado la opción de un formulario para subir el complemento desde nuestro equipo.

Media Library

Aunque no suene muy significativo, esta nueva característica permite subir archivos sin necesidad de crear un nuevo artículo. Esto es útil si queremos subir un archivo en ZIP o otro tipo de archivos a nuestro directorio sin utilizar un FTP.

Administración de Artículos

La administración de contenidos cuenta con nuevo concepto gracias a la opción “Bulk Edit”. Si seleccionamos varios archivos y presionamos el filtro ‘Editar’ podremos moderar varios al mismo tiempo, seleccionando etiquetas o categorías en conjunto.

Mención Especial: Cambio en la Interface

Bien, no podemos comprender todos estos cambios sin mencionar una característica muy apreciable: un completo lavado de cara a la interface. Se han hecho algunos cambios en los colores, cambiando a un color gris, que es mucho más estético.

Ahora no solo el menú está dispuesto en forma vertical (que asegura que no se nos escapará nada, permitiendo una cantidad casi infinita de elementos, además de que es ajustable). Esto asegura un ahorro en el espacio en la página. Los desarrolladores de complementos y temas pueden cargar sus propios iconos y utilizar la API para agregarlos al menú.

La nueva distribución de colores en gris es más limpia que la anterior en tonos azules y naranja. La interface del administrador hasta ahora no se había estandarizado, pero WordPress 2.7 hace un esfuerzo en este sentido. La nueva interface es más robusta que las anteriores, además de más flexible.

Finalmente, el nuevo estilo es más inteligente, eficiente y fácil de usar, permitiendo un flujo de trabajo más rápido y flexible, y una mejor personalización del ambiente de trabajo.

Y ahora ¿cuál es la excusa?

WordPress 2.7 es la última excusa para no cambiarse. La nueva interfaz y nuevas características revolucionan la manera de hacer blogging.

Para hacerlo sencillo, cuando alguien hace una búsqueda sobre usted o su compañía, ¿en que posición de la lista de resultados se encuentra?

El SEO nos permite:

• Resaltar una noticia en los medios
• Crear enlaces hacia nuestro sitio de gran calidad. (Ver el artículo: Creating Website Backlinks and Anchor Texts )
• Rankear en Google y Yahoo! News por palabras clave.
• Distribuir contenido a nuestra audiencia.

Mientras el uso de SEO incrementa nuestra presencia y aumenta el número de visitas hacia nuestros artículos, es imperativo recordar que nosotros escribimos primeramente y sobre todo para NUESTRA AUDIENCIA – el más importante “tráfico” de todos. Es fácil olvidarnos de nuestro usuario en particular y empezar a escribir para una audiencia general. Los consejos que se listan a continuación te permitirán adentrarte en el mundo del SEO, pero no creas que son los únicos que deben tomarse en centa – ver el #10

1. ¡No utilices palabras técnicas!

No pongas atención solamente al SEO, necesitas contar la historia a tus usuarios. Conoce como tu audiencia está buscando a través de los motores de búsqueda, y utiliza dichos términos en tu nota.

Consejo: ¿No puedes evitar el uso de palabras técnicas?. Trata de expresarte de otra manera – suena como alguien que no es experto en la industria. Si ellos no lo entienden, cámbialo.

2. Utiliza palabras clave

El uso de palabras clave es especialmente importante. Un ejemplo de esta idea es este excelente artículo — Google Big Daddy Searchquake About to Rock Your Ranking?. Ve a Google y buscalo como Google, Big Daddy y Ranking. El artículo aparece en las primeras posiciones en el listado de resultados. Aunque existen varias herramientas para lograr obtener las palabras clave, puedes probar con herramientas específicas de búsqueda para hacer la tarea un poco más sencilla. (Conoce que palabras clave utilizar antes de iniciar a escribir cualquier párrafo)

3. Hotlink y resaltado de palabras (y frases)

Un hábito sencillo, pero extremadamente efectivo. Además de hacer uso de palabras clave, es importante que el texto sea resaltado en frases importantes e incluir vínculos con información adicional. Un hotlink es muy útil tanto para usuarios como profesionales. Un vínculo ofrece a nuestros lectores la posibilidad de seguir explorando información adicional.

Consejo: Otra práctica sencilla de aplicar es incluir SIEMPRE en los vínculos el prefijo http://, o el vínculo puede que no funcione.

4. Investiga de herramientas SEO gratuitas

Yo no te conozco, pero yo sigo aprendiendo acerca del SEO. Por esta razón, dependo en gran parte de expertos reputados y de herramientas gratuitas para aprender más. Puedes probar estas herramientas SEO (si no deseas utilizar estas herramientas, prueba buscar otras propias y comparte lo que has aprendido en los comentarios)

5. Utiliza anchor links

Incluye vínculos con anchor links junto con tus keywords. El uso de este tipo de vínculos aumenta las posibilidades de llevar a los visitantes de regreso a tu sitio web.

Consejo: asegurate que al menos una de las palabras clave en los vínculos hacia la página de tu sitio web lleve de nuevo a la página principal.

6. Optimiza las primeras 250 palabras

Las primeras 250 palabras de un artículo son esenciales de cara a los motores de búsqueda y al mismo tiempo, son las que determinan si perderás la atención del lector. Debes querer que tu artículo sea “clickable” — esto significa que alguien se interese y desee leer más. Practica los principios de la escritura de notas y artículos. Asegurate que los 5 primeros pasos sean incorporados dentro de las primeras 250 palabras de tu artículo.

Consejo: Siempre escribe tus artículos en tercera persona.

7. Paciencia

Si estas leyendo este artículo es por que aún no estas convencido de aplicar todas las tácticas SEO. Esto esta bien. Es mucho más importante recordar que escribir un artículo de éxito requiere de un proceso de “evolución” y aprendizaje. Recuerda que llegar a aplicar correctamente estos principios llevará tiempo y destreza.

8. Atrae a usuarios, periodistas y bloggers

Prueba algo nuevo (o viejo) y coméntalo. Responde a lo que buscan tus usuarios, bloggers o reporteros. No solo te dará credibilidad, sino que tu misma comunidad te lo agradecerá.

Consejo: Envía un correo personal o llama a tus usuarios favoritos, periodístas y/o bloggers para conocer su opinion. Es una inversión a futuro para ambos.

9. Escribe un gran artículo

Incorporando SEO a mis artículos me obliga a ser un mejor escritor y mejorar mi contenido.

Consejo: no incluyas una fecha en tu artículo. Esto hace que tu información parezca desactualizada y daña tu credibilidad.

10. Se diferente

Publica el contenido que interese a tu audiencia, NO aquello que solamente haga que pierdan su tiempo. No dejo de recordar este punto, si no tienen una buena “historia” que contar, ninguna técnica SEO podrá ayudarte. ¿Cuál es el impacto de la información que publicas? ¿Cuál es tu punto de vista sobre la nota?

Consejo: Preguntate antes de escribir una nota, “¿Por que le debería gustar a mi madre, hermano o tía este artículo?”.

En este artículo, encontrarás 10 sistemas de administración de contenidos que no cuentan con mucha atención como sus contrapartes – aunque deberían.

Existe una larga lista de sistemas de admistración de contenidos, así que si tu favorito no se encuentra en el listado, compártelo con nosotros en los comentarios.

ExpressionEngine

ExpressionEngine es un sistema de administración de contenidos muy poderoso y fácil de utilizar. ExpressionEngine es conocido por la flexibilidad e “intuición” de su motor de Plantillas que permite a los desarrolladores moldear el CMS a sus necesidades. Cuenta por defecto con una característica de caching que reduce significativamente la carga al Servidor (de mucho beneficio si contamos con un gran tráfico). Puedes revisar la sección de Testimonios en el sitio de ExpressionEngine para conocer de sitios que utilizan este sistema.

Concrete5

Concrete5 es un sistema de administración de contenidos bastante sólido. Permite editar una página web desde el front-end ingresando al modo de edición, que mostrará las regiones y elementos que pueden ser editables. El sistema cuenta con un panel de administración bastante robusto que incluye un sistema de estadísticas que evita tener que instalar un complemento o aplicaciones de terceros como Google Analitics.

Radiant CMS

Radiant CMS enfoca su uso en pequeños equipos. Esta diseñado de una manera sencilla y elegante, como las aplicaciones de 37 Signals, evitando características innecesarias, permitiendo simplemente al usuario disponer de una interface para crear y editar el contenido de un sitio web.

CushyCMS

CushyCMS es un administrador de contenidos que no requiere de instalación, lo que reduce el tiempo de mantenimiento y desarrollo. Con CushyCMS, puedes definir que áreas son editables, y crear secciones seguras (que no podrán cambiar nuestros clientes). CushyCMS es utilizado actualmente por cerca de 10,000 sitios web y está ganando popularidad por su sencillez y por ser bastante amigable.

Symphony

Symphony, creado por Overture, es un CMS diseñado para desarrolladores. Utiliza XSLT para permitir a los desarrolladores flexibilidad a la hora de personalizarlo. Si no conoces mucho acerca de XSLT, Overture provee una larga lista de tutoriales y video tutoriales en su Centro de Recursos. Como se mencionó anteriormente, Symphony no es para todo mundo; siendo un administrador de contenidos que necesita que el administrador cuente con cierto grado de conocimientos técnico, lo que hace que posiblemente debas considerar otra opción.

MODx

MODx es, además de un administrador de contenidos, una plataforma de desarrollo de aplicaciones web para PHP. MODx pone un gran énfasis en estándares Web, permitiendo desarrollar sitios como XHTML 1.1 Strict. Viene con un editor de menú CSS bastante robusto. Para usuarios menos experimentados, MODx cuenta con una interface gráfica que te permitirá utilizarlo de una manera más cómoda.

Plone CMS

Plone CMS es un administrador de contenidos desarrollado con Zope. Es soportado por una larga lista de colaboradores por lo que no es difícil encontrar ayuda sobre algún tópico. Además, Plone cuenta con una buena Base de Documentación en formato Wiki que te ayudará grandemente.

RailFrog

RailFrog es uno de los pocos CMS desarrollados utilizando Ruby On Rails (la misma tecnología con la que estan desarrolladas aplicaciones como Twitter o Basecamp. Para ayudarte a iniciarte en el uso de Railfrog, puedes leer la documentación en el Portal de Desarrollo, que te ayudará a encontrar guías que podrás seguir para conocer más de la herramienta.

TIPO3 CMS

TIPO3 es un administrador de contenidos open-source, orientado a empresas, cuyo uso principal se centra en proveer a las compañías una solución para sus sitios web e Intranet. Mientras muchos CMS tratan de ser sencillos y básicos, TYPO3 permite a los usuarios características avanzadas para ayudarlos a realizar tareas complejas e integrarlas con otras aplicaciones.

SilverStripe

SilverStripe es un administrador de contenidos, open-source y basado en PHP. Esta desarrollado utilizando MVC que permite escalar aplicaciones de una manera más sencilla. Puedes ver una demostración en su sitio, de una instalación básica de SilverStripe para darte una idea de como funciona la administración del sistema.

Recursos para Administradores de Contenidos

• The CSS Matrix – Una herramienta para comparar sistemas de administración de contenidos.
• CMS Watch – Un portal de noticias sobre sistemas de administración de contenidos.
• CMS Toolbox: Una lista con más 80 Sistemas de Administración de Contenidos de Código Abierto
• CMS Report – Un sitio con reportes sobre Administradores de Contenidos
• Como desarrollar un sitio mantenible utilizando CushyCMS y Twitter

1. Asegurese de establecer una guía base – David Airey

Como con cualquier proyecto de diseño, una guía base establece un plan. En el diseño de logotipos, la línea guía es una pieza muy importante para la documentación que dirige al diseñador hacía su objetivo principal.

David Airey, un reconocido diseñador de logotipos de Irlanda nos cuenta:

Una sólida guía en el diseño de logotipos nos asegura que el tiempo invertido no será desperdiciado. Esta misma guía me ayuda en modo particular a centrar mi atención en las áreas que mejor ayudan a mis clientes, haciendo que estos se sientan mucho más satisfechos con el resultado final.

Cuando somos contratados para un proyecto de diseño gráfico o la creación de un logotipo, es de vital importancia que describamos cada paso desde el comienzo. Hay dos razones muy importantes para hacer esto.

Primero, te asegura que conoces exactamente que deseas proyectar con tu proyecto.

Segundo, la guía actúa como un punto de referencia para los diseñadores, indicándoles los puntos en los de deben poner más atención.

2. Investiga sobre el tipo de empresa del cliente y su entorno – Jon Sandruck

El conocimiento sobre el tipo de negocio al que se dedica el cliente y la industria en la que compite, ayuda significativamente al diseñador a centrarse en el mensaje correcto que desea proyectar, y también ayuda al cliente a diferenciarse en su sector.

Jon Sandruck es un diseñador independiente que vive y trabaja en Dallas. En un artículo sobre su trabajo en la creación del logotipo de la empresa Alliance Business Insurance, relata que la investigación que llevó a cabo sobre la empresa le orientó de gran manera en la creación de la imágen corporativa de la compañía.

Una gran parte de los servicios que presta una compañía como Alliance a sus clientes es una mezcla de varios servicios, o consiste en la formación de una alianza. Al final, me enfoqué en la idea de “ensamblar” varias piezas dentro de una rueda.

Dado que el nombre de la compañia es Alliance, y la primera letra (la A mayúscula), es un tríangulo; y el tríangulo es la estructura más estable, y la estabilidad en una atributo clave en la industria de los seguros, decidí hacer que el logotipo girará sobre la letra A.

3. Utiliza un cuaderno de notas o bocetos para dibujar de una manera práctica las primeras ideas – Dainis Graveris

Con las computadoras, como centro de todo el diseño en el mundo moderno, es sencillo iniciar la creación de un logotipo de manera digital, pero algunas ocasiones eso mismo nos lleva a un proceso de diseño demasiado vago. Haciendo un boceto de las ideas iniciales nos ayudará a considerar y revisar varias ideas rápidamente.

Dainis Graveris es un diseñador de Latvia. En su artículo sobre el proceso de creación de Logotipos, habla acerca del uso de “bocetos inspiracionales”:

El uso de bocetos no es una tarea sin sentido, sino una forma correcta de colocar nuestras ideas, de nuestra cabeza, en un papel. Después de esto, será mucho más sencillo pasar del boceto en papel a la computadora. Hacer un boceto nos ayuda a desarrollar nuestra imaginación – una vez que hayas entendido esto, siempre iniciarás desde un papel en blanco.

4. Diseñar el logotipo en un solo color – Patrick Winfield

Un logotipo puede ser utilizado en una gran variedad de ambientes. Algunos necesitarán que el logotipo sea reproducido en un tamaño reducido o con un límite de colores, así que es importante asegurarse que el diseño luzca bien en formato monocromático.

Como autor del blog 10e20, Patrick Winfield comparte su inspiración e ideas con sus lectores. En su artículo, El proceso del diseño de logotipos, del concepto a la completación, él debate sobre el uso del color en el diseño:

Me gusta trabajar primero en una escala de colores negros y blancos, para asegurarme que el logotipo lucirá bien si se utiliza de forma simple. Los colores son muy subjetivos y emotivos. Esto puedo distraernos del diseño final – si por ejemplo, ves tu logotipo en un color rojo, este color puede ser la primera cosa a la que respondas ignorando los demás elementos que componen el diseño. Yo no consideraría enviar las sugerencias del uso de determinados colores hasta que se haya aprobado el diseño final en blanco y negro.

5. Crear el logotipo en formato vectorial – Chris Sponner

Aplicaciones Vectoriales como Adobe Ilustrator permiten hacer diseños basados en ecuaciones matermáticas, en contraposición con aplicaciones como Adobe PhotoShop que renderizan un documento en base a sus pixeles. Para que el diseño de nuestro logotipo pueda ser dimensionado sin perder calidad, este debe estar en un formato vectorial.

Chris Spooner es un diseñador web independiente. En un artículo propio titulado: Cómo diseñar un logotipo, de su concepción a su desarrollo, él habla acerca de la necesidad de uso de gráficas vectoriales en el diseño de la imágen corporativa.

Siempre diseña tus logotipos en una aplicación que utilice vectores como Adobe Ilustrator, evitando el uso de herramientas como PhotoShop, debido a que un logotipo debe ser escalable sin perder su calidad y necesita verse bien cuando es impreso en una valla publicitaria de 20 pies.

6. Presenta únicamente los mejores conceptos al cliente – Angela Ferraro-Fanning

Una vez se ha creado una amplia gama de conceptos, es tiempo de seleccionar los mejores ejemplos y presentarlos al cliente para su revisión. Este escenario es un punto de inflección en el proceso y determina hacia donde se dirige el proyecto.

Angela Ferraro-Fanning, propietaria de 13thirtyone nos habla sobre el proceso de la creación del logotipo para una tienda de calzado: Kick:

La política que sigo cuando trabajo en la creación de logotipos para un cliente es presentarme con tres conceptos. Yo trato de crear tres conceptos completablemente diferentes utilizando tres diferentes tipos de formatos para el logotipo: solo texto, solo una imagen o la combinación de ambos. El hecho de que mi cliente vea tres propuestas, no significa que vaya a tomarlas todas. En la creación del logotipo para Kick, literalmente cree 35 diferentes formatos.

El elegir los diseños para Kick a considerar, primero decidí cuales de estos realmente presentaban mi trabajo con una mejor calidad. Es importante que me presente con un cliente con propuestas de las que estoy orgullosa de colocar en mi portafolio. Un trabajo que es publicado, es un trabajo que será visto por otros potenciales clientes, así que debo asegurarme que cada concepto presentado a un cliente es de extrema calidad.

7. Mostrar como trabajará el logotipo en su contexto – Veerle Pieters

Un logotipo puede ser utilizado con un amplio rango de propósitos. Conociendo el uso que se le propone dar al logotipo, podemos aplicar conceptos que ayudarán a adaptar al contexto en que se utilizará.

Veerle Pietes es un diseñador gráfico especializado en diseño web que reside en Bélgica y parte del equipo de diseño de Douh!. En un reciente artículo describió el proceso que llevó a cabo en el diseño del logotipo de la revista Scroll:

Desde que conocí que el propósito principal era cubrir la cubierta de una revista, presenté al cliente las propuestas utilizando una fotografía ficticia como cubierta. Dependiendo de la ilustración de la cubierta, utilizaba el logotipo en color negro o blanco.

8. Mantén el diseño simple (estúpido) – Jeff Fisher

Un principio popular en el mundo del diseño es el acrónimo KISS, que hacer referencia a: Keep It Simple, Stupid. La idea anima al diseñador a mantener simple una idea sin agregarle una complejidad innecesaria.

El diseñador profesional y autor de libros, Jeff Fisher, profundiza en algunos puntos en el uso de la sencillez en el diseño de logotipos:

Mientras me encontraba aún en la Universidad, un instructor me introdujo en el concepto de K.I.S.S. Los logotipos sencillos son facilmente reconocidos, increiblemente memorables y más efectivos para las necesidades del cliente. Una identidad refinada puede capturar la atención de un observador que viaja a 70 millas por hora en una autopista, o alguien que está ordenando sus compras en un tienda.

9. Hacer elecciones correctas a lo hora de pasar el diseño a color – Ryan Nichols

El color es uno de los aspectos clave de cualquier diseño, la psicología y la impresión que cada color transmite puede alterar dramáticamente el mensaje que transmite el diseño. Al ya tener una propuesta final de como lucirá el logotipo, la elección del color tiene una gran importancia.

Ryan Nichols trabajó como Director Creativo durante la creación del logotipo para la conferencia Future of Web de Carsonified. En un artículo bastante profundo sobre el proceso tras el proyecto él hablo acerca de la elección de los colores tras FOWA, FOOA y FOWD.

Nosotros creemos que el color es un comunicador muy importante. Esto contribuye de gran manera al mensaje que transmite la marca en si. Desde el inicio del proyecto, la estrategia a seguir era transmitir energía. Nuestro primer paso para lograrlo fue colocar varios tableros con algunas paletas de colores que considerábamos de gran calidad.

Eventualmente, decidimos utilizar una paleta de un solo color para cada conferencia, asociada al color distintivo del chocolate: el café. Esto dió a la marca un aspecto fresco, debido a que el color café proyectaba balance a la vez que transmitía energía. Esto también permitió al color actuar como un unificador.

10. Rediseña un logotipo con mucho cuidado – David Turner, Michael Bierut

Un logotipo debe ser diseñado evitando tendencias, permitiendo que luzca genial hoy y por muchos años en el futuro. Dos populares rediseños del año 2008 fueron los de Metallica y Saks Fifth Avenue. Es sumamente importante, cuando realizamos un rediseño, prestar atención a la historia y al estilo del diseño original, especialmente tomando en consideración que marcas como Metallica, cuentan con un club de fanáticos tan especial que algunos de ellos llevan tatuado el logotipo original.

David Turner fué el diseñador detrás del rediseño del logotipo de Metallica, cuyo Estudio, Turner Duckworth también a trabajado en el rediseño del logotipo de compañías como Coca Cola o el diseño del logotipo de Amazon. Durante una entrevista en ocasión del lanzamiento del nuevo logotipo de Metallica, el comentó:

Pusimos atención a la historia del grupo, y evaluamos como adaptar la nueva imágen al logotipo original, para que fuese notorio el cambio sin afectar la imagen anterior. Asimismo, trabajamos paralelamente con el rediseño de Coca Cola. Una vez que colocamos el nuevo logotipo en la Web, la respuesta de los fanáticos fuera grandiosa. Esto es muy importante.

De manera similar, Michael Bierut, socio de Pentagram, habla acerca de la investigación que llevó a cabo sobre la historia de la marca Saks Fifth Avenue, y como se basó en los logotipos originales:

Examinando su historia, encontramos que a lo largo de su historia ellos habían utilizado literalmente docenas de logotipos desde su fundación. El logotipo actual fué realizado en 1973 por Tom Carnese; siendo una adaptación del tipo de tipografía utilizado casi veinte años antes. En la mente de muchas personas, este era el logotipo de Saks.

Pero readaptar un logotipo de 30 años atras no era suficiente. Saks estaba satisfecho con hacer énfasis en la herencia, pero era necesario que la nueva imagen de la marca viese hacia el futuro, un lugar de constantes cambios y que sorprendiera con una orientación hacia la calidad.

Utilizar un servicio de generación de Thumbnails generalmente ahorra tiempo tanto al desarrollador de un sitio (dado que los mismos son automáticos) y al visitante (que toma una idea acerca del vínculo).

En este artículo te presentamos 10 soluciones gratuitas para la generación de thumbnails incluyendo una pequeña guía de como crear uno propio.

Considerando que probablemente utilizarás uno de estos servicios en el futuro, asegurate de colocar este artículo entre tus favoritos.

SnapCasa

Un proveedor bastante popular de generación de thumbnails. Cuenta con un servicio gratuito y otro de pago. El plan gratuito tiene como límite 300,000 peticiones por mes; suficiente para muchos sitios. Y además es completamente libre de publicidad.

Su uso es bastante simple. Solamente debemos referenciar la URL de la página como parámetro en la etiqueta IMG y eso es todo:


<img src = "http://snapcasa.com/Get.aspx?code=[code]&size=[size]&url=[url]" />


ShrinkTheWeb

Un servicio muy potente y gratuito con un límite de 250,000 peticiones por mes en su versión libre.

Para el plan gratuito, no puede personalizarse el tamaño de las thumbnails, aunque si soporta las dimensiones más populares. Por otro lado, el servicio es libre de publicidad y trabaja tanto con JavaScript como con Flash.

Websnapr

Websnapr ofrece un servicio gratuito y coloca una etiqueta de "Powered by Websnapr" sobre las imágenes. También ofrece servicios de pago sin limitaciones y muchos más características.

Cuenta con plugins para WordPress, Drupal y más sistemas listados en su página oficial.

thumbalizr

Existe un plan gratuito con y sin soporte para su API. Los thumbnails son mostrados con una marca de agua, aunque los planes de pago no tiene esta limitación.

Después de registrarse, se provee de un código en PHP que hace caching de las imagenes para agilizar las peticiones.

iWEBTOOL Thumbnails

Después de insertar el archivo Javascript, casi comienza a trabajar automáticamente. Agrega un vínculo a los thumbnails que puede ser removido mediante la opción de pago.

artViper Website Thumbnails

Este servicio ofrece interesantes características en su versión gratuita como: tamaños personalizados de thumbnails, soporte para subpaginas, previsualización en tiempo real y más. Es necesario colocar un backlink en cada página donde sea utilizado.

thmbnl

Thmbnl también permite un plan gratuito y de pago. El plan gratuito solamente permite 1000 vistas por mes. Los thumbnails son generados en 5 diferentes tamaños y el código es proporcionado solamente después de registrarse.

Girafa

Un excelente servicios que se limita a 2000 vistas al día y no soporta subpaginas.

MyThumbnail

Un servicio gratuito de generación de thumbnails que actualmente no ofrece ninguna limitación en el número de peticiones, soporta subpáginas y cualquier tamaño para la imagen final.

Creando tu propio servicio de creación de Thumbnails:

También puedes crear tu propio servicio y utilizarlo sin ninguna limitación. IECapt es una utilería basada en línea de comandos que captura los sitios web utilizando el motor de renderizado de Internet Explorer (y CutyCapt para WebKit).

Utilizando estas herramientas, podrás capturar imagenes de sitios web ejecutandolas desde un script (como PHP, ASP, etc). Puedes obtener más detalles aqui.

Opacidad en IE8 en modo de compatibilidad de IE7:

Primero que todo, he encontrado una diferencia en el uso del atributo OPACITY entre IE8 con compatibilidad con IE7 e IE7, no emulado.

En IE7 (la versión “pura” e IE8 con compatibilidad), el atributo OPACITY se define como:

.opaque {
    filter: alpha(opacity=50);
}


En IE8, por otro lado, el atributo OPACITY se establece de la siguiente manera (que como yo entiendo, es una solución temporal para agregar soporte a este atributo).

.opaque {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}


Necesito hacer uso de este atributo para algunos mapas políticos que estoy preparando, y lo he hecho de la siguiente manera:

.opaque {
    filter: alpha(opacity=50);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}


Funciona bien en IE8 e IE7, pero no en IE8 en modo de compatibilidad. Así que ha sido necesario cambiar el orden de las líneas; por que aparentemente IE8 en modo de compatibilidad tiende a confundirse cuando el -ms-filter sigue de filter.

.opaque {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
}


Este es otro error que he logrado solucionar (y claro, lo he notificado al equipo encargado del desarrollo de IE), pero esto me hace pensar. ¿Realmente necesitamos poner atención a IE8 en modo de compatibilidad con IE7?

Haciendo pruebas en IE8 en modo de compatibilidad:

Probablemente es una buena idea recordar a todo mundo, como trabaja el modo de compatibilidad de IE8:

• Por defecto, IE8 renderiza las páginas con el motor de renderizado de IE8.
• Pero, el autor de un sitio, puede indicarle a IE8 que utilice el motor de renderizado de IE7 agregando una etiqueta <meta> en cada página, o agregando una cabecera HTTP:

  <meta http-equiv="X-UA-Compatible" content="IE=7" />

• Además, IE8 permite a los usuarios cambiar directamente el motor de renderizado a IE7 presionando un botón ubicado a la par de la barra de direcciones (Note que este botón estará unicamente presente si el sitio no ha notificado el cambio de motor con la etiqueta <meta>. En caso contrario el usuario no podrá seleccionar otro motor de renderizado).
• Afortunadamente, IE recuerda que motor utilizas para ciertos sitios. Si, por ejemplo, decides utilizar el modo de compatibilidad para ver X sitio, ese será utilizado cada vez que regresas a dicho website. Si, el usuario navega a otro sitio que no utiliza la etiqueta <meta>, entonces IE8 retomará el uso de su motor propio, dejando a criterio del usuario, cambiar a modo de compatibilidad.

De igual manera, puedes elegir ignorar el modo de compatibilidad de IE8; lo que hará que tus visitantes vean el sitio bajo el motor de IE8, y si no hay razón para cambiarlo, ellos lo verán así siempre. (Al menos, creo que es lo mejor que puede pasar, aunque no estoy tan seguro de la reacción que los usuarios tendrán por la presencia de este botón).

Para otros escenarios, el modo de compatibilidad de IE8 (y en un futuro para IE9, etc.) emula perfectamente a IE7. A excepción del problema con la opacidad, siempre será importante probar nuestro sitio en modo de compatibilidad en busca de errores.

Creo que lo mejor es que probemos nuestros sitios en modo de compatibilidad y en la versión de IE7. Cualquier bug que encontremos podremos reportarlo al grupo de desarrolladores de IE. Es exactamente lo que haré en los próximos meses.

HTML: IE tenía razón

Mientras trabajaba en el mismo sitio, encontré una curiosa diferencia entre IE y el resto de navegadores, y contrariamente a lo que puedas estar pensando, esta vez IE tenía razón y los otros navegadores estaban equivocados.

<include type="parliament" year="1967" />

La anterior etiqueta agrega una gráfica del parlamento alemán de 1967 en el texto. He escrito este script y lo he probado en todos los navegadores y trabaja perfectamente.

Sin embargo, he tenido serios problemas a la hora de acceder a la estructura DOM. He intentado acceder a la etiqueta como si se tratara de un almacen de datos. Desafortunadamente, todos los navegadores interpretan esta etiqueta como si solamente la estuviese abriendo, y el código subsecuente, llega a estar dentro de la misma, como CHILDS, a excepción de IE. Solamente IE toma en cuenta la diagonal de cierre de etiqueta.

Justo ahora, estoy que ardo de colera por esta situación. Muy probablemente terminaré agregando la etiqueta de cierre </include>, dado que deseo que otros navegadores entiendan correctamente el código (Y como además estoy utiilzando XHTML, creo que ellos suponen que comprendo como se cierra una etiqueta).

Agregando un parrafo

En una nota relacionada, he cometido un error HTML en donde nuevamente IE me ha alertado correctamente y los otros navegadores se han equivocado.

<p>Yaddah yadday yah. Yaddah yadday yah. Yaddah yadday yah. Yaddah yadday yah.<p>
<include type="parliament" year="1967" />


Note que accidentalmente olvidé cerrar la etiquete </p> Este error hace que la etiqueta <include /> sea considerada como “hija” de un parrafo vacío.

IE ha notificado un Error Desconocido en Tiempo de Ejecución; mientras que los otros navegadores han ejecutado el script correctamente. Después de analizarlo detenidamente, he decido que IE tenía razón y los otros navegadores estaban equivocados.

Cada una de las gráficas producidas mediante JavaScript están en un contenedor <div>. Cada contenedor es insertado en la página justo después de la declaración de la etiqueta <include />, lo que en este caso en particular haría que la etiqueta <div> este dentro de <p>

IE obedece la regla, rechazando abrir un <div> dentro de un <p>, por que esto no está permitido.

Chrome: ciclos dentro de los miembros de un objeto

Tomemos como ejemplo el siguiente objeto JavaScript:

var myObject = {
    "member1": "yaddah",
    "member2": function () {
        return "yaddah"
    },
    "member3": ["yaddah","more yaddah"]
}

for (var i in myObject) {
    alert(i);
}

Todos los navegadores mostrarán mediante el mensaje de alerta: “member1″, “member2″ y “member3″. Todos siguiendo el orden establecido en el código fuente.

Chrome no lo hace así. Google Chrome mostrará a cada miembro del objeto en orden aleatorio.

Obviamente, esto no es un error. Cada libro de referencia de JavaScript, establece que los intérpretes JavaScript pueden acceder a los miembros de un objeto en el orden que quieran.

Partes de mi código necesitan que los navegadores lean un objeto respetando el orden establecido en el código fuente. Mientras escribía este artículo, me dí cuenta que estaba equivocado y pense: “Bien, todos los navegadores lo hacen como quiero de todos modos”. Pero no es así. Debo agregar un arreglo que contenga el orden de los miembros como quiero.

Esta es una de las áreas más interesantes en cuanto a la compatibilidad con navegadores. ¿Qué cuenta más, las especificaciones formales o la implementación práctica en todos los navegadores?

Si el cambio es relativamente sencillo de implementar, quisiera sugerir que el equipo de Chrome siga la línea de los otros navegadores y que lo implemente en el orden establecido en el código fuente. No puedo forzar esta especificación, dado que la misma aprueba claramente este actual comportamiento.

Opera: la propiedad text

Finalmente, Opera permite el uso del atributo text para todos los nodos dentro del árbol DOM (o al menos para todos los <div>). Esto arruina mi código para la creación de gráficos, por que algunas veces almaceno información en la propiedad text; y Opera lo muestra en pantalla, mientras que los otros navegadores lo ocultan.

La solución es simple: hacer uso de otra propiedad con un nombre diferente. De todas maneras, desearía que Opera documentara esta característica propietaria.

DotPress comenzó como un pequeño blog en WordPress.com con publicaciones propias sobre varios tópicos que son comunes a muchos profesionales día a día. El primer contenido fué un artículo para programadores en lenguage PHP sobre el método de instalación de Apache, PHP y MySQL sobre Windows. Este primer artículo ha tenido tanto éxito que a la fecha a recibido casi 20,000 visitas desde el día de su publicación.

Y otros artículos también han tenido un gran impacto en los desarrolladores, como la serie de Maquetación de páginas utilizando DIV’s que ha recibido más de 30,000 visitas en total.

DotPress me ha dado muchas satisfacciones: me ha abierto puertas a conocer más sobre este mundillo de desarrollo web; a conocer a personas muy importantes en el medio y a participar en proyectos de gran influencia como Maestros del Web en donde colaboré con más de 15 artículos de diversas temáticas.

En marzo de este año, 1 año después de iniciado el blog en WordPress.com, mudé el sitio a su nuevo dominio. Por diversas circunstancias no pude darle el seguimiento adecuado a la publicación de nuevos artículos, pero ahora, superados estos obstáculos me dispongo a anunciar oficialmente el inicio de esta nueva era de DotPress.

El diseño del sitio es reflejo de esta nueva filosofía de trabajo, basandose en el estilo gráfico de las revistas de diseño.

Cada página será trabajada cuidadosamente en cada detalle, para darle un aire único y original, sin sacrificar el índice de publicación de nuevos contenidos.

Pero todo este trabajo no tiene ningún sentido, sin el apoyo de nuestros lectores, que nos siguen día a día y nos apoyan con sus comentarios.

Realmente es un honor que consideres DotPress como parte de tus sitios favoritos. Mis colaboradores y yo, trabajaremos fuertemente en proveer del mejor contenido de Internet y ponerlo accesible a todos aquellos que buscan mejorar la experiencia de nuestros usuarios en sus sitios y proyectos web.