Richard Stallman, fundador del movimiento del software libre, advierte que los programas basados en web, como Gmail o Facebook, forzarán a las personas a pagar por el uso de sistemas propietarios que cada vez costarán más. “Es estúpido, es peor que la estupidez”, dice Richard en un artículo del periódico The Guardian, donde desaconseja el uso de estos programas y en cambio sugiere mantener la información en nuestras manos.

Hoy en día millones de personas suben sus fotos, videos y, últimamente en incremento, su trabajo, a sitios de empresas como Google, Microsoft, Yahoo, etc. El crecimiento en la adopción del software “web-based” puede generar escenarios donde los usuarios se vean impedidos de acceder a sus propios archivos.

Si bien la “moda” parece ser que todo el procesamiento y almacenamiento de información se haga en un servidor, mientras que el usuario sólo posee el dispositivo de acceso, es fundamental plantearse los problemas relacionados con la privacidad y el acceso libre a nuestros datos de cara al futuro.

Perder tu “Cuenta Google” puede significar perder el acceso a tus e-mails, fotos, trabajos, etc. Los cambios en las tecnologías, las idas y vueltas de los mercados, y otros factores pueden tener resultados inesperados. Por eso es importante que desde las grandes empresas y la comunidad del software libre, se ofrezcan soluciones alternativas que nos garanticen el control de nuestra información, por ejemplo, a través de la adopción de estándares abiertos y el derecho a la portabilidad de datos.

¿Que harías si tuvieras 1000 veces más datos?

En la visión del increible Christophe Bisciglia, podríamos aprender y soñar a gran escala. Google funciona gracias a una red (se estima) de 1 millón de computadoras de bajo costo, sin mucho más poder que cualquier PC de escritorio, que almacenan varias copias de la web, entre otra información. Esta “nube de computación” responde nuestras consultas de búsqueda instantáneamente, recorriendo montañas de datos más rápido que cualquier otra máquina en la tierra. La mayoría de este hardware no se encuentra en el campus de Google, sino que está por ahí, en algún lugar, en grandes y fresquitos centros de datos. “Entonces un día, alguien va a sugerir un trabajo loco, que requiera algunos miles de computadoras, y vas a poder decir: hey, las puede conseguir”, reflexiona Christophe.

El surgimiento de una idea y la filosofía de trabajo 80/20

Ya había estado leyendo sobre esto, que los empleados en Google tienen 20% del tiempo de trabajo disponible para dedicar a sus propios proyectos. Me gustó mucho la idea y ahora la veo funcionar en la historia de Christophe y su proyecto. El utilizó ese 20% para organizar un curso e introducir a estudiantes de la Universidad de Washington para programar a escala de “la nube”. Lo llamó Google 101. Durante los meses siguientes, el proyecto de Christophe evolucionó y creció hasta llegar a una ambiciosa alianza con IBM anunciada en Octubre, para comunicar diferentes universidades a través de la tecnología de nubes de Google. Pero todo comenzó con un pequeño “cluster” de 40 computadoras y un curso basado en Hadoop, la implementación de código abierto de MapReduce, el software que divide el procesamiento de datos en pequeñas tareas repartidas a través de “la nube”. Finalmente, como cuenta Christophe Bisciglia, ese 20%, terminó convirtiéndose en el 100% de su tiempo.

Se viene bien

A medida que el concepto se difunde, promete expandir la marca de Google dentro de la industria más allá de la busqueda, medios y publicidad, llevando al gigante hacia la investigación científica y quizás nuevos negocios. En el proceso, “la nube” de Google se convertirá, eventualmente, en La Computadora mundial. Como dice Daniel Frye, vice-presidente de desarrollo de sistemas abiertos en IBM, “Google está haciendo lo que 10 años atrás se hacía en un laboratorio nacional“. Hasta se hacen comparaciones con la electricidad, cuando en un pasado se apagaron los generadores que la gente usaba en sus casas, para conectarse a la red pública. Para pequeñas compañías y empresarios, la nube promete oportunidades, poniendo a su disposición grandes masas de información y un poder practicamente ilimitado de procesamiento y almacenamiento de datos. Mientras tanto, otras compañías como el pionero Amazon, Yahoo! y últimamente Microsoft ya elaboran sus propias “nubecitas”.

“Comparado a esto, la web es diminuta. Vamos a estar riéndonos de lo pequeña que es.” Son palabras de Mark Dean, de IBM, quién piensa que la mezcla de negocios y ciencia van a liderar en un futuro cercano. Desde Microsoft, Tony Hey, dice que fucionarán como enormes laboratios virtuales donde “quizás puedas ganar el premio Nobel analizando datos ensamblados por alguien más”.

Más info, fuentes, ideas…

Hace poco estuve probando Google App Engine, que nos permite construir software y hacerlo correr en servidores Google, procesando y almacenando datos de forma distribuida.

Google and the Wisdom of Clouds (BussinessWeek)

Future of Mobile Search (petitinvention)

El primer paso, “Ta-da Lists”

El primer software de colaboración onilne que usé para trabajar fue Ta-da Lists, un sitio muy simple donde con una cuenta gratuita podemos crear listas de tareas y compartirlas con quién queramos. En un principio me resultó muy útil y fue el primer paso hacia una forma de trabajo en donde toda la información que necesitamos diariamente se encuentra centralizada y es accesible desde cualquier dispositivo conectado a Internet.

Google Apps

Según mi propia experiencia, los “Google Sites”, tienen algunas características que los hacen muy productivos. Por un lado su diseño simple e intuitivo, característico de los productos Google, por otro su flexibilidad. Todas las páginas son Wikis (como en Wikipedia), por lo que cualquier usuario puede editarlas cuantas veces quiera, y cada versión quedará guardada. Además, podemos compartir archivos, crear listas (por ejemplo de tareas), blogs, así como también insertar calendarios, videos y otros contenidos de sitios o aplicaciones externas, como “YouTube”. Además de los sitios, gracias a Google Apps también compartimos una “suite ofimática”, cuentas de email y calendario. Como la experiencia fue muy buena, hoy en día todos nuestros proyectos se encuentran en disponibles en varios sitios donde compartimos información internamente y con nuestros clientes.

Soluciones alternativas

Hace poco tuve la oportunidad de trabajar en un proyecto de otra empresa para un gigante del software empresarial. A raíz de esto me sentí motivado para leer un poco más sobre el tema. Descubrí que este gigante tiene dos importantes rivales en un futuro cercano, uno de ellos es Google con su software para empresas. Pero por otro lado existe una cultura que va más allá de las empresas y que, además de poseer una filosofía propia, sigue obteniendo logros a través del tiempo. La consolidación de tecnologías de software libre como Linux, Apache, MySql, Perl, PHP, Mozilla tiene un impacto muy positivo en la forma de pensar de muchos. Por eso no me sorprendería ver en poco tiempo una solución de código abierto pisando fuerte dentro del mundo del software colaborativo.

Are you, experienced?

Me gustaría que acerquen sus experiencias con (Google) Apps, (Microsoft) Sharepoint, etc, y sus pensamientos sobre el futuro del software colaborativo. Les recomiendo dar un vistazo al “concept browser” Aurora, de la fundación Mozilla.

Hoy, viendo cosas en Digg, además de la interesantísima colección de pinturas clásicas con un pato extra, encontré un artículo de Wired que habla sobre Wikileaks y su nada modesto sueño de salvar al periodismo y comenzar a cambiar el mundo.

¿Wikileaks?

Primero que nada, les cuento de qué se trata. Wikileaks es una versión de Wikipedia pero centrada en la publicación y análisis de documentos secretos. Su objetivo es nada más y nada menos que cambiar el mundo para mejor, sirviendo como foro global para discutir y examinar abiertamente documentos filtrados que desvelen comportamientos no éticos por parte de gobiernos, empresas y organizaciones.

Halgo flota en el aire

Hace 18 meses que Julian Assange se convirtió en el co-fundador de Wikileaks. En se periodo hubo mucha acción, varios escándalos internacionales y amenazas de censura. Pero Julian dice que Wikileaks recién está empezando a cambiar el mundo.

“En toda negociación, en toda reunión dónde se hacen planes y en toda disputa en el trabajo, lentamente se está formando la percepción de que el interés público quizá tenga un abogado silencioso en la habitación”, cuenta Assange.

Tiempos violentos

Wikileaks ha demostrado tener un enorme impacto, mayormente positivo. Pero también es criticado por publicar casi todo lo que se le cruza en el camino y por ser “irresponsable” al publicar información militar y gubernamental clasificada, algunas veces sin valor como noticia, amenazando la privacidad de las personas involucradas.

Comenzó publicando información que comprometía al presidente de Kenya. En Noviembre de 2007 se publicaron documentos revelando cómo el gobierno de Estados Unidos ocultaba algunos detenidos de la Cruz Roja Internacional, además de usar perros para intimidar a los prisioneros. Hace poco, durante el levantamiento de monjes en el Tibet, se publicaron imágenes censuradas por el gobierno chino que daban cuenta de la brutal represión ejercida por las fuerzas policiales. La cantidad de documentos publicados crece todo el tiempo, las críticas y presiones no se hacen esperar.

De cara al futuro

Quedan por resolver algunas cuestiones para garantizar la “calidad” del contenido publicado, incluso el modelo de “wiki” se cuestiona hoy en día, pero no hay dudas de que el periodismo de investigación enfrenta un cambio a partir del nacimiento de Wikileaks.

Una vez escuché algo muy optimista, alguien decía que las canciones de Lennon realmente cambiaron el mundo, porque su mensaje llegó a los oidos de personas muy importantes que tomaron decisiones que afectaron a millones. Decía que su decisión tiene que haberse visto afectada de alguna manera por esas canciones tan populares.

Wikileaks llego en 2007 con el sueño de cambiar el mundo. Parece que ese “algo” que flota en el aire se está haciendo sentir.

Como para no perder la costumbre, la gente de Cierzo Development se acercó con otro interesantísimo proyecto. Esta vez les presento a SMMART, una plataforma mediante la cual podemos ingresar el nombre de una marca y sus competidores, para que el sistema nos devuelva información y gráficos indicando la cantidad de comentarios positivos, negativos o neutrales que se hacen en noticias, blogs y otros medios sociales de la web.

http://www.analisisdemedios.es/

Están explicados en este blog algunos temas del diseño web como la posición del logo, precedencia, espacios,número áureo, teoría de Gestalt, proceso de diseño y diferencia entre estilo y diseño.

Se pueden ver estos conceptos funcionando en el último desarrollo de Proyecto 83, el sitio web de Riegos Ariel.

http://riegosariel.com.ar

Algunas características:

• El diseño es muy simple, atractivo y de gran usabilidad.
• El código generado funciona en los navegadores más populares.
• Está basado en Joomla, un poderoso sistema de administración de contenidos.
• Las URL favorecen el posicionamiento en buscadores.
• Los títulos, descripciones y palabras clave de las páginas se generan a partir del contenido.
• Es un sistema muy flexible y escalable.
• Es accesible, se puede aumentar el tamaño de la letra y navegar normalmente.

¡Novedades!

Damos las gracias a las galerías de diseños web que publicaron este sitio y a todos aquellos que votaron para que se mantenga en la portada de algunos.

http://www.csselite.com/showcase/corporate/riegos-ariel.html
http://css-lounge.com/riegos-ariel
http://screenalicious.com/screen/riegosariel.com.ar/
http://www.alabrasil.com/2008/06/12/riegos-ariel/
http://www.dezinspiration.com/track/site/1467
http://dailyslurp.com/default.aspx?dts=6/20/2008
http://csshere.com/2008/riegos-ariel/
http://www.cssgalore.com/industry/riegosariel.html
http://designshack.co.uk/design/riegosariel.html 

Hace tiempo estoy suscripto al feed de Freelance Folder, tiene muy buena información para freelancers. Recién leí un artículo sobre lo que el autor define como “la violenta verdad de la oportunidad”.

Bob Younce dice, y con mucha razón, que las oportunidades no se descubren, sino que se crean.

Esto lo afirma por experiencia propia. La historia comienza con una persona económicamente estancada que, después de estar desocupado durante 6 meses, decide “meter la cola entre las patas”, culpar a otros, entregarse bah.

El despertar

Un mañana de mayo, Bob se despertó y al mirarse al espejo vió a una persona con mucho potencial, pero sin esperanzas, ni siquiera perspectivas de esperanzas.

Entonces reaccionó, y pensó “Esto es completamente estúpido. Si quiero hacer algo de mi mismo, si quiero tener éxito, tengo que hacer que pase”. En ese momento se dió cuenta que nadie iba a hacer las cosas por él, que ninguna empresa lo iba a llamar. Si quería tener éxito, tendría que hacer las cosas él mismo. Crear sus propias oportunidades.

Entonces empezó a estudiar en la universidad por un lado, y a escribir contenido para la web por el otro. Cuando sus clientes ya no tuvieron trabajo para pasarle, buscó nuevos.

Esto fue hace 5 años. Hoy, Bob es un exitoso escritor freelance. Tiene más trabajo del que puede hacer la mayoría de los días y puede darle a su familia una buena vida. Cada día trabaja escribiendo más para el y menos para otros. Su marca se vuelve más y más definida y, en unos 12 meses, muchos artículos escritos para emprendimientos de Internet serán completamente suyos.

¿Está zarpado este Bob no? para nada. Bob es un escritor más, del promedio. Hay muchos mejores que él.

Entonces, ¿cómo hizo para convertirse en un escritor exitoso?

La violenta verdad de la oportunidad

Cómo dijimos hoy, las oportunidades no se descubren, sino que se crean. Esto no es nada nuevo, pero puede ser revolucionario. De hecho se puede convertir en un disparador que le cambie la vida a muchos.

Todo depende de hacer las cosas. Cuando tu trabajo freelance se termina, a mover el culo y buscar más. Cuando tu primer cliente se va, buscá 3 más para reemplazarlo. Cuándo nadie te pague por escribir, escribí cosas para vos. Abrí un blog. Experimentá con directorios de artículos pagos. Terminá tu novela y enviala a un editor. Si la rechaza (y seguro que lo va a hacer, al menos la primera vez), enviala al siguiente. Y después a otro. Y a otro. Si nadie contesta, publicala vos mismo.

¿Se puede aprender sobre la marcha? claro que sí!. Hay que prestar mucha atención a la crítica y aprender de los primeros clientes a través del proceso de producción. Es importante leer libros, blogs, wikis y usar todas las herramientas que estén a mano. Encontrar personas que admiramos por sus logros y aprender de sus aciertos y errores, conversar con ellos.

La vida freelance no es para el débil, no es para quién no tiene motivaciones y no es para aquel que no está dispuesto a crear sus propias oportunidades, esto esta claro. Si no podés crear tus propias oportunidades, meté la cola entre las patas. Pero si podés mirar al espejo todos los días y decir “Hoy voy a hacer que las cosas pasen para mí”, ahí sí tenés buenas chances de ser un freelancer exitoso.

¿Y por qué eso de que la verdad es violenta?

Simplemente porque es verdad con poder. Es poderosa para derrumbar falsos ídolos y mitos, y también con el poder de reconstruir la realidad alrededor de sí misma.

La verdad de la oportunidad es violenta porque puede transformar tu actitud desalentadora, derrotada, y transformala en verdadero hambre por crear tu propio camino. “I did it my way”.

Gracias Bob por tus sabias palabras!

Hace un tiempo, la empresa española Cierzo Development se puso en contacto conmigo. Querían encargarme el diseño de la interfaz de usuario para un novedoso proyecto web.

Hoy, la cantidad de usuarios que participan en Pronostico-quiniela.es crece semana a semana. Además el sitio ganó un premio de Yahoo!, recibiendo el reconocimiento de la gente y los medios de comunicación.

http://pronostico-quiniela.es 

El proyecto innovador de Cierzo Development

Antonio García Morte charlaba con sus amigos, como en la casa de cualquiera de ustedes, sobre fútbol, y cómo hacer una buena quiniela, ese juego que por los territorios de Diego Armando conocemos como “el prode”. Y así llegaron a la conclusión que la mejor manera era colaborando unos con otros, combinando su inteligencia.

De ahí surge el lema “juntos ganamos todos”. Porque mediante la web desarrollada íntegramente por Cierzo, los usuarios colaboran entre sí para armar entre todos una “quiniela ideal” y así obtener mejores resultados a la hora de jugar.

¿Cómo funciona?

Es muy fácil, de lunes a jueves todos los usuarios pueden hacer su quiniela. Entonces el viernes a la mañana el sistema le devuelve a cada uno su quiniela original junto con otra mejorada, calculando los resultados mediante un sistema basado en algoritmos de inteligencia artificial.

Un diseño fácil de entender

Comunicar la idea de este sitio web de una forma simple y clara es fundamental. Primero que nada el usuario necesita saber de qué se trata y para qué sirve pronostico-quiniela.es.

Por eso la presentación Flash en la portada y una página explicativa detallando el funcionamiento del sistema con textos y animaciones. En un primer momento se pensó en usar imágenes, pero había que encontrar la imagen justa para cada concepto dentro de un catálogo de imágenes de stock, algo bastante dificil en este caso. Los dibujos en cambio, nos dieron una gran libertad a la hora de ilustrar el funcionamiento del sistema con mucha simpleza y claridad.

Haciendo un buen uso del color, guiando al ojo mediante los principios de precedencia y agrupando los elementos según la teoría de Gestalt, el diseño de los gráficos estadísticos y las tablas de resultados permite la clara visualización de una gran cantidad información.

Y también fácil de usar

En “La quiniela” recurrí a toda mi experiencia diseñando interfaces de usuario para aplicaciones de escritorio y web, en la búsqueda de un diseño claro, intuitivo y fácil de usar. Por eso la cantidad de contenidos y opciones fue reducida al mínimo, evitando la sobrecarga de información visual.

Inmediátamente después de la presentación del sistema, el diseño del sitio invita al usuario a participar mediante un formulario muy simple, con sólo 3 campos de texto, 1 “checkbox” y el gran botón de “Comenzar”. Esto es muy importante, porque no queremos asustar ni aburrir al usuario con un largo formulario, a modo de interrogatorio.

El diseño del formulario para “hacer quiniela” es muy similar a las tablas de resultados. De la misma manera fueron diseñadas las otras pantallas, buscando la coherencia en el diseño. El objetivo de esto fue crear una interfaz intuitiva, donde el usuario encuentre los mismos elementos de diseño en diferentes contextos, reduciendo el tiempo de aprendizaje y facilitando su uso.

Buenos resultados

El proyecto de Cierzo Development ha recibido el reconocimiento de los medios de comunicación españoles (TVE, Aragón Televisión, A3, RNE, Onda Cero, 20 minutos, El periódico…) y también de la gente, que lo eligió como Revelación Web Yahoo! 2007 en la categoría Deportes y que ya suman más de 9.000 usuarios registrados colaborando unos con otros, dando vida a la idea de que “juntos ganamos todos”.

Existen varios programas para convertir una imágen estática en código XHTML/CSS que pueda ser “entendido” por navegadores, buscadores, etc. Pero para mi la mejor forma de crear páginas web sigue siendo el trabajo artesanal, escribir el código “a mano”.

Significado

Cuando empiezo a escribir el código de una página web, le doy mas importancia a la parte semántica, a “qué es” cada cosa. Por ejemplo “esto es un título”, “esto un subtítulo” o “esto es una lista”. Sin darle tanta importancia a la ubicación y mucho menos al color o al tipo de letra.

Ubicación

Cuando termino con la parte semántica empiezo a pensar en la parte visual. Pero no en “cómo se ve”, sino en “dónde va” cada cosa. Por ejemplo “esta división va a la izquierda” o “este listado es horizontal”. La idea es usar la menor cantidad de divisiones para agrupar elementos y ubicarlos en la pantalla.

Estética

Ya con todo listo, me concentro en la parte de “cómo se ve” la página web. Me resulta bastante cómodo hacer primero el fondo de la página y seguir por el primer elemento (por ejemplo la cabecera) para después ir terminando los demás de arriba hacia abajo hasta llegar al pie.

En lo posible no hay que cambiar el código XHTML, así se logra la completa separación entre el contenido y la estética de una página web.

El número en cuestión, 1.61803398874989484… , está en todos lados. Lo encontramos en la reproducción de los animales e insectos, en la forma de las plántas y los árboles, en el espiral de una galaxia o un caracol ( espiral logarítmica ), en las distancias entre diferentes partes de nuestro cuerpo, en figuras geométricas, hojas, etc. También lo podemos encontrar en el cuadro de Leonardo, La Gioconda, en sonatas de Mozart, en un atado de cigarrillos, en las tarjetas de crédito y en otros tantos diseños a través de la historia, ya que este número se usa desde hace miles de años en todos los campos del diseño.

¿Y cómo aplicarlo al diseño web?

En las proporciones de los diferentes elementos con los que construimos nuestro diseño. Por ejemplo dentro de un rectángulo áureo podemos contener un banner, un cuadro de imágen, un menú, etc.

Otro ejemplo puede ser el diseño de los elementos básicos un blog, la relación entre el contenido principal y una barra lateral. Si diseñamos un sitio para 800×600, el ancho máximo de nuestro diseño será 760px. Si dividimos 760 / 1.6180339887 nos dá 469, entonces el contenido principal va a ser de 469px de ancho y la barra lateral de 291px.

El problema de las diferentes resoluciones de pantalla

Un sitio web debe poder verse bien en diferentes tipos pantallas, con distintas resoluciones. Esto quiere decir que el espacio que tenemos para hacer todas las locuras que se nos ocurran, el lienzo, no es fijo, sino que su tamaño puede variar dependiendo de la pantalla del usuario.

Entonces si diseñamos para 800×600, en teoría nuestro diseño no se verá bien en resoluciones mayores, como 1024×768, 1280×900, 1440×900, etc.

La hora del espanto fue… ¡CSS al rescate!

Podemos ajustar el diseño a la pantalla usando porcentajes. En el caso del diseño de los elementos básicos de un blog, contenido y barra lateral, los números que corresponden a las medidas 469px y 291px son 62% y 38% respectivamente. Así podemos mantener una proporción en un diseño “líquido” (ver ejemplo), donde el ancho de nuestro diseño se adapta la pantalla del navegador.

Ahora, si bien la proporción de los elementos básicos estaría bien, el trabajo dificil para el diseñador será adaptar los demás elementos del diseño a este “layout” flexible, manteniendo las proporciones que lo hacen “bello”, según la “filosofía áurea”.

Distintos tipos de diseños.

En este otro ejemplo, agregué un contenedor para limitar el ancho a 780px y ubicar el diseño en el centro de la pantalla. El diseño dejó de ser líquido, pero se mantiene la relación entre el contenido y la barra derecha.

¿Y si aumentamos el tamaño del texto?, vemos que el que el tamaño de la letra aumenta, pero los elementos básicos del diseño siguen teniendo las mismas proporciones. Ahora, si al ancho del contenedor (780px) lo expreso en unidades tipográficas sería aproximadamente 78em ( con el tamaño de la fuente del cuerpo de la página al 63% ). Entonces cuando cambio el tamaño de la fuente, también cambia el tamaño del layout (ejemplo).

Para ir un poco mas allá, podemos crear un diseño donde el tamaño del texto y los elementos del layout dependan del tamaño de la pantalla. En este último ejemplo, agregué un JavaScript para calcular, a partir del ancho de la pantalla del navegador, el porcentaje que corresponde al tamaño del texto.

Más…

Si quieren saber más sobre cómo aplicar la divina proporción al diseño web les recomiendo este excelente artículo de Smashing Magazine.

Cuando uno empieza a diseñar quiere llenar cada espacio con alguna cosa. Los espacios vacíos parecen ser un desperdicio. Pero en realidad es al revés. El espacio hace que el diseño sea mucho mas claro.

En diseño web hay tres aspectos que deberían considerarse sobre los espacios.

Interlineado

El espacio entre las líneas de un texto afecta directamente a la legibilidad. Poco espacio hace que las líneas se superpongan, mientras que demasiado espacio puede sugerir que la línea de texto terminó, perdiéndose continuidad. Por eso hay que buscar un punto intermedio. El interlineado se puede controlar mediante CSS usando el selector ‘line-height’.

Padding

Su uso mas común es para separar el texto de otros elementos, ya que por lo general nunca deberían tocarse. El padding es el espacio entre el texto y los demás elementos.

Espacio en blanco

Primero hay que decir que el espacio en blanco no tiene porqué ser blanco, puede ser de cualquier color. Es simplemente el espacio vacío en una página. El espacio en blanco se usa para dar balance, proporción y contraste a un diseño. Mucho espacio en blanco sugiere elegancia, por eso es común en las revistas que las publicidades de grandes marcas de relojes y autos hagan uso del espacio vacío como un elemento de diseño.

En diseño web, por ahí todavía más que con otro tipo de diseño, lo central es la información. En un buen diseño, el usuario debería ser conducido a través de la pantalla por el diseñador. Para lograr esto, existe la precedencia, que viene a ser algo así como el peso visual que tienen las diferentes partes del diseño.

Un ejemplo simple de precedencia es el logo, que se ubica comunmente arriba a la izquierda, porque es el primer lugar donde mira la mayoría de la gente.
Pero la precedencia va mucho mas allá. El diseñador debe dirigir la mirada del usuario hacia una secuencia de pasos.

Existen varias herramientas para lograr esto:

• Posición - La ubicación de algo en una página tiene clara influencia sobre el orden en el que el usuario lo vea.
• Color - El uso de negrita y colores sutiles es una forma fácil de decirle al usuario donde mirar.
• Contraste - Diferente color para resaltar o el mismo para dar una importancia secundaria.
• Tamaño - Lo mas grande precede a lo mas chico .
• Elementos de diseño - Si hay una flecha gigante apuntando algo, ¿adónde te parece que va a mirar el usuario?.

Según mi experiencia, el camino para convertirse en diseñador web freelance y vivir de lo que a uno le gusta hacer puede tomar poco más de un año, pero hace falta estar bien preparado y tener una gran capacidad de improvisación, fundamental para hacerle frente a cualquier desafío.

Entrenarse

Antes de mandarse al ring hay que entrenar bastante. Hay que saber o tener una idea y experiencia en direrentes áreas como el diseño gráfico, programación, sistemas, redes y branding. Para estar preparado hay que saber usar el Google, la Wikipedia y encontrar blogs y sitios que nos sirvan de referencia, inspiración y motivación en cada trabajo que hagamos. A mi nunca me gustó aprender en la escuela, es mas la odiaba! y aunque primaria, secundaria y un poco de universidad me sirvieron para aprender algunas cosas, siempre busqué respuestas por mi cuenta en libros y revistas, hablando con mi familia o amigos, en la calle, en Internet.

Para estar entrenado hay que experimentar. La experiencia es muy importante porque nos da confianza al momento de hablar y de hacer. Siempre se rescata algo bueno de todo lo que hagamos, sea diseñar webs o vender sándwiches por la playa.

Tener un portfolio

Los primeros proyectos son para armar un portfolio chiquito y demostrar a nuestros futuros clientes que sabemos hacer el trabajo que nos pidan. Mis primeros trabajos fueron crear sitios web para amigos y conocidos de mi familia. Los precios eran muy bajos pero el producto no era gran cosa, aunque le ponía todas mis ganas. Un día encontré TrabajoFreelance.com, publiqué algunas ofertas y una alguien decidió confiar en mi ( ¡gracias kelo! ). Este trabajo fue el primer y último diseño “full-flash” que hice. ¡Y salió muy bien! así que ya tenía una referencia para otros clientes, un comentario a mi favor y varios trabajos hechos publicados en mi sitio web.

Crear una marca

Tener un sitio web fácil de encontrar en Google con una muestra de trabajos y un formulario de contacto resulta muy útil. La reputación de nuestra marca debe ser impecable en donde sea que la usemos y, en lo posible, a mi parecer, libre banderas políticas y religiosas. Esto no significa alejarse de la realidad, se puede hablar sobre calentamiento global o la gente que se muere de hambre sin atacar directamente a empresas u organizaciones. Creo que para dar nuestra opinión personal es mejor, justamente, un blog personal.

Siguiendo con lo de nuestra reputación o “status”, sitios como TrabajoFreelance.com ofrecen un sistema de puntos y premios ( medallas ) que sirve muchísimo a la hora de convencer a una persona que está cruzando el océano de que puede confiar en nosotros. En estos sitios, después de terminar un trabajo, cada parte valora a la otra y deja un comentario. Un sólo comentario con buena onda y ya se hace mucho más fácil que otra persona confíe en nosotros.

En los presupuestos, mails y otros documentos que enviemos está bueno incluir un membrete, un pie y mantener en lo posible un estilo y una paleta de colores.

Jugar con los precios

Hay veces que sabemos que nuestro trabajo vale mucho más, pero no podemos salir reclamar lo que nos pertenece sin un “status”. Así es la cosa, nos guste o no. Entonces tenemos que jugar con los precios.

En este juego donde “pescamos” clientes ofrecemos nuestros servicios a precio de oferta, porque estamos comprando “status”. Es una suerte de promoción. Con el tiempo, si sentimos la necesidad, podemos aumentar el precio, pero siempre mejorando la calidad de nuestros trabajos, en la medida en que ganamos conocimiento, experiencia y mejoramos nuestras herramientas. Para mi pasar de un monitor CRT de 15′’ con una mancha psicodélica ( estaba “imantado” ), al LCD wide-screen de 19′’ me cambió mucho la concepción del diseño web.

Un consejo importante, por experiencia, para empezar a trabajar en cualquier proyecto el cliente debe enviarnos 50% del pago por adelantado, mínimo 33% si es un proyecto muy grande. Así se evitan muchas complicaciones.

Ordenar las cosas

Cuando las cosas empiezan a ir bien, puede complicarse organizar todo el trabajo. Por eso hay que planificar bien el tiempo y ordenar las cosas. Por ejemplo, con GMail se pueden tener todos los correos en una sóla cuenta y encontrar cualquier mensaje que recibimos o enviamos en un toque. El historial de Messenger es perfecto para registrar todas las conversasiones.

Algo muy útil es usar carpetas para organizar los trabajos y buscar una serie de nombres comunes. Por ejemplo, dentro de la carpeta de un proyecto podemos tener otras carpetas que se llamen “Materiales”,”Archivos recibidos”,”Documentos”,”Pre-diseño”,”Diseño” y “Xhtml”. Así cuando buscamos algo lo encontramos por intuición, sin pensar “¿adonde habré guardado esos lindos dibujitos que hice ayer a la noche?”.

Una planilla de cálculo tipo Excel o Google Spreadsheets y ya tenemos todos los números en una tabla para ver en qué gastamos de más, cuánto ganamos y si vamos progresando o nos hundimos como el Titanic.

Encontrar el camino

Ya con algo de experiencia, reputación y algunas herramientas, uno empieza a disfrutar mucho más del proceso de diseño.
Para mi, al principio cada trabajo era un bardo. Me llevaba mucho esfuerzo hacer hasta el pre-diseño más simple y por lo general también me tenía que ocupar de muchas cosas al mismo tiempo ( diagramar, diseñar, maquetar, desarrollar… ). Pero con el tiempo se van encontrando técnicas y aprendiendo muchas cosas, entonces las cosas de todos los días se hacen más fáciles y el trabajo es mas fluído, mas ida y vuelta.

Ganando “status” y siendo directo y sincero con las personas que trabajen con nosotros, vamos a tener un mayor control sobre las áreas que más nos gusten, por ejemplo diseño y maquetación.

Los beneficios de ser freelancer son muchos, ya no uso la alarma del despertador, sólo me levanto a la hora que me despierte . Si quiero vacaciones, las tengo. Yo elijo cuándo y cuánto trabajo por semana. Claro que esto no quiere decir que “puedo hacer lo que quiero”, porque aveces quisiera quedarme todo el dia en la playa y no puedo. También tengo obligaciones y responsabilidades como todo el mundo, la diferencia está en que puedo elegir cuándo tenerlas.

Perfeccionarse y pasarla bien

Y después de leer, hablar, hacer y experimentar tanto hay que seguir leyendo, hablando, haciendo y experimentando. Así cada día aprendemos más y diseñar se hace cada día más entretenido, y redituable.

Eso sí, a no marearse con los números, sean altos o bajos, sólo hay tratar de saber manejarlos. Siempre nos tenemos que enfocar en lo que estamos creando, en nuestros diseños. La plata, el dinero… es muy útil tenerlo para vivir tranquilos y disfrutar de la vida cómo queramos, nos da libertad en ese sentido, pero lo más importante es hacer lo que nos gusta.

Dejar un comentario en este blog

¿Te leíste todo esto? debe ser porque te interesa el tema… otra gente puede estar interesada, ¡cómo vos!.

Dejar comentarios en los blogs es una muy buena forma de conocer futuros amigos, colegas y clientes.

El planeta, nuestra casa, está teniendo algunos problemas para mantener el clima relativamente estable en el que vivimos hace mucho, mucho tiempo. Los expertos que estudian el tema advierten que el calentamiento global es una de las mayores amenazas que enfrentamos los seres vivos. Las personas, las empresas, los gobiernos de muchos paises están tomando conciencia de la urgencia de hacer algo antes de que sea demasiado tarde. Hace algunos días, representantes de 27 países de la Unión Europea ratificaron su compromiso con el Protocolo de Kioto y presentaron planes para reducir 20 por ciento sus emisiones para 2020. El Protocolo vence en 2012, por lo que es fundamental marcar los pasos a seguir de cara al futuro. Por otro lado, la administración de Bush retiró su firma, no ratificó lo pactado en Kioto y propone que los países recorten sus emisiones de forma voluntaria. Estados Unidos es uno de los principales emisores de gases invernadero y la administración de George Bush está acusada de manipular información científica con el fin de minimizar un problema que puede causar la extinción de la especie humana.

Será necesario, por lo menos, un recorte del 15 al 30 por ciento de las emisiones de gases invernadero para el año 2020, manteniendo el aumento de la temperatura a menos de 2º C. Para 2050 puede ser necesario que la reducción sea del 60 al 80 por ciento. Esto signigica que es necesario ir mas allá de las mejoras en eficiencia energética, cambios en el estilo de vida y prácticas comerciales si queremos tener esperanzas de mitigar la amenaza del calentamiento global.

El uso de Internet y nuevas formas de hacer negocios son herramientas muy importantes para lograr un cambio y convertir al calentamiento global en una lección del pasado. Las tecnologías móviles, el teletrabajo, blogs, sistemas de transporte para la luz solar y muchas otras innovaciones nos ayudan a contaminar menos, aprovechar mejor la energía y tomar conciencia sobre uno de los mayores, sino el mayor problema que enfrentamos los seres humanos.

El mundo visual que nos rodea es muy complejo. Para poder entenderlo, nuestra mente desarrolló estrategias que le hacen frente a la confusión y a la ambigüedad. Buscando siempre la solución mas simple al problema, una de esas estrategias es agrupar elementos que tengan algo en común. Acá entra la Teoría de Gestalt. Saber como funciona la psicología de Gestalt ayuda a construír sitios web más fáciles de usar.

La Teoría de Gestalt, surgida en Alemania a principios del siglo XX, considera que las personas percibimos a los objetos como conjuntos. Entonces si vemos un triángulo vemos un triángulo, y no tres líneas y tres ángulos. Así es que podemos decir que todo (un triángulo) es mucho mayor que la suma de sus partes (tres líneas).

Saber esto nos da una idea de cómo organizar nuestros ojos, nuestro campo visual.

Para los diseñadores, lo más importante es la referencia que hace la psicología de la Gestalt sobre cómo se foman estos grupos y qué efecto tienen en la percepción. Teniendo eso en cuenta, se puede crear unidad y cohesión en el diseño, o al contrario, hacer que un elemento rompa con el esquema y aparezca fuera de cualquier grupo, destacándose por sobre los demás.

Principios fundamentales de la corriente Gestalt

• Ley de Cierre - Cuando faltan elementos, nuestra mente los agrega para completar una figura.
• Ley de la Semejanza - Nuestra mente agrupa los elementos similares según su forma, tamaño, color y brillo.
• Ley de la Proximidad - Agrupamos los elementos de forma parcial o secuencial. Percibimos a los elementos que están cerca como una unidad.
• Ley de Simetría - En la distancia, las imágenes simétricas son percibidas como una sola.
• Ley de Continuidad - La mente trata de continuar un patrón, aunque este haya desaparecido.
• Ley de la Comunidad - Muchos elementos moviéndose en la misma dirección son percibidos como un único elemento.

Soy diseñador web profesional hace un año, cuando empecé no tenía nada parecido a un proceso de diseño. Con el tiempo, fui encontrando una forma de organizarme, una agenda de trabajo, que analicé y reescribí varias veces. Así que éste es mi proceso de diseño, por ahí te puede servir para organizar tus proyectos.

Considerar el problema

Porque el diseño está para solucionar problemas, para cubrir necesidades. En el caso del diseño web, el problema lo tiene el usuario que visita el sitio. Esta persona acaba de entrar a un lugar desconocido, en búsqueda de información, porque necesita hacer algo. La función del diseño es facilitar el acceso a esa información y ofrecer cosas para hacer. La página de reservas de un hotel por ejemplo, tiene que mostrar cuáles habitaciones están disponibles y cuándo, junto con la opción de hacer una reserva. Las necesidades de los usuarios se dan de muchas formas, pero siempre es querer algo: querer comprar, querer saber, querer decir, querer sentir…

Materiales

El segundo paso es buscar imágenes en Flickr, colores en ColourLovers, organizar los documentos que envió el cliente, marcar sitios similares y todo lo que se pueda juntar. Información,objetos, fotos, experiencias, todo. Este montón de materiales nos van a ayudar a sumergirnos en el tema, para poder sentirnos como usuarios y como clientes, para identificar mejor las necesidades de cada uno y ofrecer soluciones a través del diseño.

Pre-diseño

Primero en papel dibujando algunas ideas, conceptos, iconos, layouts, etc, y después en la pantalla creando los primeros bocetos, se empieza a formar un pre-diseño para poder mostrarle al cliente. Algo bastante útil es guardar una copia cada vez que hagamos algún cambio significativo. Por ejemplo pre-diseño001.png, pre-diseño002 .png, etc, para poder reciclar materiales y volver atrás en caso de que lo necesitemos.

Diseño

Bueno ahora hay que terminar con lo que empezamos. Primero terminar bien el diseño de la portada y una página modelo para las interiores. Después terminar todas las otras páginas. No me gusta pasar a escribir código hasta tener todo el diseño terminado, desde la portada hasta la página de aviso legal o error 404. Lo mejor es dedicarse a cada tarea, ahora diseño y sólo diseño, después escribo código y no me preocupo por el diseño.

Código

Hay algunas herramientas que ayudan, tendría que probar Coda que es bastante comentado, pero por ahora escribo todo el código en Notepad++. Primero busco que el sitio se vea bien Firefox, después voy haciendo los cambios que sean necesarios para Internet Explorer, Opera y Safari. Por último, la validación de los archivos XHTML y CSS.

Todo listo, cierre del proyecto

Si se puede, lo mejor es dejar pasar un tiempo, aunque sea una tarde y recién después revisar todo el trabajo. Está bueno para alejarse un poco y verlo con otro punto de vista. Cuando sea hora de cerrar el proyecto, lo mejor es dejarle al cliente una muestra online y un archivo comprimido con el trabajo terminado.

Bueno así es como hago mis diseños. ¿Y vos? ¿cuál es tu proceso de diseño?

Porqué entender la diferencia es todo

Por Jeffrey Zeldman

Mi padre fue un pintor de fin de semana, él y sus libros de artes jugaron un rol formativo en mi infancia. Como muchos chicos, yo estaba fascinado por la mera representación. Me perdía a mi mismo mirando minuciosamente grabados de batallas de gladiadores, pueblos pintorescos y ruinas romanas al atardecer. Yo entendía el arte como sinónimo de dibujo. El detalle mas minucioso, mas líneas en el grabado u hojas en el árbol, eso era el mejor arte, en mi infancia. Mas tarde, descubrí los cómics. Aún mas tarde, los museos. Maxfield Parrish me hizo querer tomar drogas, y también me hizo dar cuenta que yo nunca podría ser un pintor. Paul Klee parecía un mal artista que no podía dibujar. Andy Warhol fue un tramposo, porque usó asistentes.

No pretendo entender el arte de hoy, pero se que mis primeras impresiones tienen poco que ver con la naturaleza del arte, y todo que ver con la pura sensación visual. Como Disneyland y el circo, arte era espectáculo. Pero sólo se puede subir al Matterhorn una cantidad de veces, y sólo se puede comer tanto caramelo de algodón, antes de que te descompongas. Desde la sensación, me gradué hacia el estilo. El Spider-Man de Steve Ditko. Arte pop. Rock, y entonces alma, y entonces tapas de álbums punks. Yo era un adicto al estilo. No podía diferenciar lo bueno de lo malo, pero sabía lo que era cool.

“Muchos jóvenes diseñadores web ven sus creaciones de la forma en que yo solía ver la cultura pop. Esto es cool o es basura.”

Muchos jóvenes diseñadores web ven sus creaciones de la forma en que yo solía ver la cultura pop. Esto es cool o es basura. Ellos confunden estilo por diseño, cuando las dos cosas no son exáctamente lo mismo. El diseño comunica en todos los niveles. Te dice dónde estás, señala lo que podés hacer, y lo hace fácil. El estilo es tautológico; se comunica estilo. En términos visuales, el estilo es un aspecto del diseño; en términos comerciales, el estilo puedo comunicar atributos de la marca.

También puede transmitir el desprecio del diseñador por el tema. “Esto es muy aburrido, así que acá hay algunas franjas y acá un menú desplegable, así que también van a saber que soy mejor que este estúpido trabajo.” En este nivel, el estilo es un lenguaje subterráneo, de un par a otro, no tiene nada que ver con los visitantes del sitio o el propósito. De hecho, este estilo aplicado puede interferir con la finalidad del sitio. Entonces los gurús dan un paso al frente, y culpan al diseño por las fallas del fetichismo estilístico.

Los diseñadores que se conducen por el estilo pueden tener éxito si tienen suficiente suerte para seleccionar y elegir esos proyectos que benefician sus obsesiones estilísticas. La mayoría de los diseñadores web no tienen ese lujo. Pero eso no les impide aplicar el vocabulario estilístico de los principales diseñadores en los proyectos en los que trabajan. Y entonces terminamos con sitios de e-commerce que parecen volantes para una rave, y sitios informativos adornados con deslumbrantes pero con mas frecuencia equivocadas e inapropiadas introducciones.

La web solía parecerse a una guía telefónica. Ahora gran parte de ella parece un portfolio de diseño. De hecho, se ve como el portfolio de 20 conocidos diseñadores, cuyo estilo es copiado una y otra vez por jóvenes diseñadores que se consideran a si mismos sus discípulos. Las distinciones entre el diseño gráfico y el diseño para comunicar se pierden en estos diseñadores. Cómo la distinción entre el verdadero estilo, que evoluciona a partir de la naturaleza del proyecto, y deriva en el pastiche, que es insertado en muchos proyectos como un tercer brazo.

Cuando el estilo es fetiche, los sitios confunden a los visitantes, perjudicando a los usuarios y a las empresas que pagan por sus sitios. Cuando los diseñadores no empiezan preguntándose quiénes van a usar el sitio, y para qué lo van a utilizar, obtenemos un sentido de la apariencia que le da a la belleza un mal nombre - al menos, en algunos círculos.

El problema es, que vivimos en una sociedad obsesionada con las superficies ( y con miedo de mirar que hay debajo ). En una cultura de consumo donde compramos zapatillas de $200 porque parecen cool y una canción de Beck se usó en el comercial, flash y deslumbramiento son el premio mas valioso de todos los productos básicos.

Para algunos clientes y para muchos diseñadores jóvenes, los proyectos multimedia Flash se han convertido en sinónimo de diseño de páginas web. Si no canta y baila, no debe ser buena, y ciertamente no es cool. Gran trabajo se está creando en Flash (SWF), y está recibiendo el reconocimiento en shows de premios - particularmente en tradicionales shows de premios de alto rango, en donde “el material digital” precede a la multimillonaria industria de comerciales de TV. Los jueces esperan que los comerciales de TV tengan conceptos brillantes y altos valores de producción como la mayoría de las películas comerciales. Naturalmente esperan que los sitios web, también.

Experimentos de estilo barroco construidos con la última tecnología seguirán ganando premios mientras los jueces los sigan viendo en los últimos navegadores con pantallas widescreen y Pentiums con conexiones T1. Y, no es necesario decir, van a ganar estos premios sólo si son dignos de premio en su diseño gráfico y programación. No nos referimos a la mala concepcion aquí. Estamos hablando de diseño a los mas altos niveles, pero el diseño de un tipo único.

La mayoría de mis colegas diseña sitios como estos. Me babeo cuando veo sus logros, y me alegra que se lleven a casa su merecido premio. Pero también me preocupa.

“No hay suficientes diseñadores que estén trabajando en ese gran espacio entre la apariencia y la usabilidad, dónde la mayor parte de la web se debe construir.”

Me preocupa porque los diseñadores jóvenes que confunden estilo con diseño están aprendiendo a copiar los trucos técnicos y estilísticos de sus héroes, pero no necesáriamente cómo comunicar en este medio. El “Bullet Time” es perfecto para “The Matrix”, pero no para documentos. Y dado que una gran parte del diseño de páginas web es informacional - o se supone que lo sea - la venta mayorista de los logros estilísticos de otras personas hace que los sitios informacionales no avancen en el medio, sino que los hacen mas confusos.

Me preocupo porque hay diseñadores que nunca van a evolucionar, estilos individuales, y mucho menos aprender a construir estilos apropiados para marcas en determinados proyectos. Debido a la falta de vocabularios críticos en los reclutadores, que ponen a la gente cuyos portfolios demuestren un conocimiento de “lo que es cool” en puestos de trabajo donde serán miserables. (”Con tu talento, darás vuelta ese lugar.”) Porque eventualmente los diseñadores que conocen de branding y de diseño para comunicación, y quienes conozcan la diferencia entre estilo y diseño, entrarán al mercado y desplazarán algunos diseñadores jóvenes que nunca tuvieron la oportunidad de comprender lo que hacen.

Me preocupa el medio, porque no basta con los que trabajan en ese enorme espacio entre la apariencia y la usabilidad, que es donde la web se debe construir. Y cada vez hay menos incentivos para que los diseñadores web trabajen en esos campos, ya que este tipo de trabajo es de agrado para los usuarios web pero no gana absolutamente ningún reconocimiento de la industria, dejando de lado los cheques. (”Mi Dios, que se cargue tan rápido y trabaje tan bien, incluso en IE3 en la vieja Dell de mi papa.” ¿Usted sabe cómo son los jueces de premios? ¿siempre diciendo cosas como estas? tampoco yo.

Sobre todo, me preocupan los usuarios web. Porque después de más de diez años de desarrollo de la red comercial, todavía tienen que tomarse su tiempo para encontrar lo que están buscando, y todavía se preguntan porqué es tan desagradable leer texto en la web - que es lo que la mayoría de ellos hace cuando están conectados.
Mientras nuestra sociedad siga valorando mas el estilo que el diseño, la superficie sobre el fondo, esta situación no va a mejorar. Por supuesto, lo mismo pienso cada cuatro años, cuando tengo que votar.

Adobe Design Center, Style versus design.

La respuesta es ¡si!. La razón es que todos los diseñadores creativos deberían conocer el lienzo en el que trabajan. Incluso quienes buscan romper las convenciones, porque para romper las convenciones del lienzo, primero hay que conocerlo bien. Los diseñadores web deberían saber y entender el medio en el cual su diseño será aplicado.

¿Cómo puede un escultor esculpir sin conocer los diferentes tipos de piedras? ¿Cómo puede un pintor pintar sin conocer las diferencias entre pinceles, pinturas y lienzos? ¿Cómo un diseñador para impresión puede crear sin conocer el proceso de impresión, tipos de papel o la diferencia entre CMYK y RGB? ¿Y cómo un diseñador web puede diseñar sin saber escribir código, o al menos cómo trabaja el mismo?

¿Hay que ser un adicto al código HTML o un maestro del CSS para ser diseñador web? No. Pero se deben conocer los fundamentos del medio, y los elementos del mismo, porque son los que le dan vida al diseño. Aprender acerca del medio es fundamental para cualquier diseñador, para cualquier artista.

El proyecto Mapa de Necochea, llevado adelante por Proyecto 83, busca crear un mapa completo de la ciudad mediante el uso de la API de Google Maps y la Web 2.0

El mapa

En este enlace se puede ver el resultado experimental del proyecto Mapa de Necochea

Por primera vez en la historia, los hinchas tienen la oportunidad de comprar y tomar el control de un club profesional de fútbol, dentro y fuera de la cancha.

Miles de usuarios de MyFootballClub aportaron 35 libras cada uno y mediante el sitio llegaron a un acuerdo para la compra del Ebbsfleet United FC. Ahora tienen igual poder de decisión sobre la selección del equipo, transferencias de jugadores y el camino a seguir por el club.