¿Por qué rediseñar?

El rediseño es parte de la evolución en la estrategia de negocio. Al lanzar la red social a Google le interesaba crear una base de usuarios y los atrajo con una interfaz simple y amigable, sin embargo, ahora debe dar el siguiente paso para conservarlos, pero más importante aun, conseguir que inviertan más tiempo en la red social. Por esta razón lanza un nuevo diseño enfocado en convertir Google + en una herramienta de comunicación, que funcione de forma similar a una aplicación de software, para que sea utilizada frecuentemente y durante más tiempo.

Ventajas del rediseño

La nueva imagen toma prestados varios elementos de Twitter y Youtube. De el primero por ser una de las grandes redes sociales que funcionan de modo “linea de tiempo”, organizando los mensajes por hora y fecha; mientras que el segundo, Youtube, es uno de los sitios web que Google ha logrado transformar con éxito en una aplicación web, es decir que ya no solo muestra vídeos sino que enriquece la experiencia ofreciendo funciones adicionales sobre el contenido (los vídeos), como por ejemplo listas de reproducción, subtítulos automatizados, recomendaciones personalizadas etc. La nueva imagen de Google + es un paso en esa dirección, que permite a los usuarios disponer de todas las herramientas para comunicarse (texto, multimedia, videoconferencia) en un solo lugar.

Después del rediseño

Uno de los cambios más notables es la reorganización de la página, que ahora hace énfasis en la creación de contenido, al resaltar el área para publicar mensajes y proporcionar una lista de temas populares (Similar a los trending topics de Twitter) para poder comentar al respecto.

Otros cambios notable son el nuevo menú de secciones, más compacto pero igualmente notable gracias a los nuevos iconos, dos nuevas secciones para descubrir a otros usuarios y celebridades, así como la ampliación del área de chat que ahora ocupa gran parte del lado derecho de la página, y refuerza la estrategia de convertir a Google + en una herramienta completa de comunicación digital.

A diferencia de Gmail y otras aplicaciones de Google, la red social tiende a utilizar más elementos gráficos, como iconos y botones, para conservar la facilidad de uso,hay que recordar que es una herramienta relativamente nueva y de uso poco extendido con la que mayoría de visitantes no esta familiarizados, a diferencia del correo electrónico que es uno de los servicios web más utilizados.

Qué debe mejorar y que debe permanecer

Menos

Hay dos aspectos importantes que Google debe mejorar en su interfaz: los textos y el color. En el primer aspecto falla porque gran parte de los textos son confusos o hacen falta descripciones, que para un usuario experimentado no es problema pero en un usuario principiante crea frustración.

En el segundo aspecto, del color, el problema radica en las estrictas políticas de imagen de Google que limitan la forma en que el color puede ser utilizado, dando como resultado interfaces con poco color pero principalmente interfaces en donde el área principal (donde ocurre gran parte de la acción) no resalta sobre el resto. Por ejemplo, el botón de búsqueda global, en azul, destaca más por color que el área para publicar mensaje, que aunque parece un detalle trivial hace una diferencia en la decisión del visitante sobre qué hacer en la página creando distracciones innecesarias, además de darle un aspecto insipido a la interfaz.

Más

En el aspecto positivo, Google ha hecho un buen trabajo organizando las secciones, que están claramente divididas, así como ha realizado un buen diseño de iconos. En cuanto a funcionalidades, los Hangouts (quedadas), el chat y los temas populares son características muy poderosas, que promueven conversaciones sobre temas de actualidad y permiten conocer diferentes opiniones sobre un mismo tema de forma más organizada que Twitter.

–––

En la nota de prensa también participo Norman Avila, de Clima Ya.

–––
Mientras escribía esta nota escuchaba Canon en D, de Pachelbel.

Comenta

ivanmendoza 2012 - Bajo licencia Creative Commons By-NC-SA.

El tema está primera vez fue Less CSS.

No fue un reto tan fácil como pensé pero no estuvo nada mal para ser la primera vez. Descubrí que se puede hacer mucho con poco tiempo, solo se necesitan ganas de hacer las cosas y tener bien desarrolladas las habilidades, de hecho esto ultimo es el reto porque nunca sé está suficientemente preparado.

De las cosas que aprendí, y dejo constancia pensando en repetir el reto, los dejo con esto:

Publico, luego edito.

(Como bien dice Hugo)

Conocer las herramientas

Como en cualquier reto, no solo basta tener las herramientas necesarias sino además hay que saber usarlas. Los atajos de teclado, los marcadores, las capturas de pantalla y actualizar el repositorio fueron tareas constantes durante todo el reto, cualquiera que hubiera fallado era suficiente para cambiar el resultado.

Gran parte del reto fue sentirme lo suficiente familiarizado con las herramientas que uso para poder explotarlas al máximo y sin mal gastar tiempo.

MindMeister respondió perfectamente para recibir todas las ideas desordenadas de los artículos, para marcar los publicados y para anotar detalles que debia escribir. Fue interesante comenzar el mapa desde la PC, añadir luego ideas desde el móvil y luego seguirlo editando desde la PC.

Todas las capturas de pantalla se hicieron con Evernote y se editaron con Photoshop.

Todo el código se publico con Github, porque desde que lo aprendí a usar no me dan ganas de subir código por FTP o a dropbox, el hecho de tener un repositorio que con el tiempo podes continuar mejorando, coloreado y que con algunas buenas prácticas se auto-documenta no tiene precio. La guinda del pastel fue poder estrenar los Gists (para publicar pequeños trozos de código) que ya conocía pero no había podido compartirlos antes.

Hacer sin dudas

Es un reto cansado —aunque no lo parezca— así que no te podes permitir dudar sobre lo que estas haciendo, si está bien escrito, si hace falta explicación, si es o no la mejor forma de implementarlo, etc.  En otras palabras: tiene más valor seguir avanzando con lo que se tiene que buscar al miedo y quedarse haciendo preguntas tontas.

Agregar valor

En ningún momento antes pensé en incluir imágenes o subir ejemplos de lo que estaba escribiendo, sin embargo, mientras publicaba los artículos presenti que había una mejor forma (aunque fuera simple) de hacer las cosas y pienso que eso ayudo a mejorar el resultado y me motivo mucho a seguir. Agregar valor adicional te deja con la idea de que nunca más podrás dar menos. Como escribió Saramago: quien ha dado rosas una vez, no puede volver a dar menos que rosas.

Las frases

Mientras armaba el ejemplo para el uso de sprites encontré algunas frases que me gustaron, se las comparto:

Cada día esconde una nueva revelación o un nuevo descubrimiento que puedo obtener —Bruce Lee

El tiempo es como un río que arrastra rápidamente todo lo que nace —Marco Aurelio

Nuestras horas son minutos
cuando esperamos saber,
y siglos cuando sabemos
lo que se puede aprender.
—Antonio Machado

—
Se termino, espero les sirva la info —a mi ya me sirvió— y siempre mantengan un reto bajo la almohada, uno que no los deje dormir.

Un comentario

ivanmendoza 2012 - Bajo licencia Creative Commons By-NC-SA.

Manipular colores desde la hoja de estilo facilita mucho el trabajo en web, porque por ejemplo nos permite hacer un gradiente de un mismo color claro a una tonalidad más oscura, invertirlo, desaturarlo, etc.

Cómo usar las funciones de color

Utilizar las funciones de color es bastante sencillo, únicamente debemos aprendernos el nombre de la función, poner el código o variable de color e indicar en qué porcentaje queremos manipularlo.

Por ejemplo para saturar o desaturar un color hacemos algo como lo siguiente:

@azul:     #33d;
@cyan:     #f0f;

.btn.azul{
    color:#fff;
    background:@azul;
    &:hover{
        background:saturate(@azul, 30%);
    }
}
.btn.cyan{
    color:#fff;
    background:@cyan;
    &:hover{
        background:desaturate(@cyan, 50%);
    }
}

En el ejemplo anterior tenemos dos botones, uno azul y otro cýan, que al posicionar el puntero encima cambia a un color más saturado en el caso del azul o a un color desaturado en el caso del cyan.

De igual forma podemos usar fadein y fadeout para manipular la transparencia de un color, en este caso usaremos dos botones, uno magenta y otro cyan (que inicia con 50% de transparencia):

@magenta:     #f0f;
@negro:       #000;

.btn.magenta{
    color:#fff;
    background:fadeout(@magenta, 50%);
    &:hover{
        background:fadein(@magenta, 30%);
    }
}
.btn.negro{
    color:#fff;
    background:@negro;
    &:hover{
        background:fadeout(@negro, 50%);
    }
}

De igual forma podemos trabajar con otras funciones de color como:

• lighten
• darken
• saturate
• desaturate
• fadein
• fadeout
• fade
• spin
• spin
• mix

Puedes ver en funcionamiento algunas de estas funciones en el ejemplo que he publicado en Github: uptoeleven-lesscss.

Más información

Enlace: Documentación oficial | http://lesscss.org/#-color-functions

Comenta

ivanmendoza 2012 - Bajo licencia Creative Commons By-NC-SA.

[HTML] Cargar LessJS desde la CDN de Google. Permite arrancar un proyecto con Less rapidamente sin tener ningún programa instalado, únicamente con una conexión de Internet. Luego, durante el desarrollo puedes cambiar la forma de trabajar a una que no dependa de Javascript (Ver apps recomendadas para trabajar con LESS).
Enlace: https://gist.github.com/1806334

[PHP] Usar modo desarrollo si el sitio web está en un servidor local. Intercambia entre el uso de la hoja de estilos css, si esta en producción, o el modo javascript con alerta de errores si esta en un servidor de desarrollo (localhost). Utiliza la CDN de Google como en el snippet anterior.
Enlace: https://gist.github.com/1806248

[LESS] Plantilla para definir estilos de fuente rapidamente.
Enlace: https://gist.github.com/1806368

[LESS] Desactivar la compresión de CSS al usar Simpless. Por defecto la aplicación comprime todos los estilos css y en algunas [extrañas] ocasiones quizá no querramos eso, para desactivar esa opción basta con agregar el siguiente comentario en la hoja de estilos less:

//simpless:!minify

[LESS] Librerias de estilos, no olviden que funcionan de forma muy similar a un snippet permitiendo acelerar su trabajo.
Enlace: Librerias de estilo en LESS.

Comenta

ivanmendoza 2012 - Bajo licencia Creative Commons By-NC-SA.

Cómo funciona LessPHP

LessPHP básicamente es un compilador de estilos less empaquetado en una clase de PHP, por lo que es posible llamarlo de cualquier aplicación que estemos usando y jugar con el resultado de la forma enq que mejor nos parezca.

Para comenzar debemos descargar y descomprimir los archivos desde la página de LessPHP (o Github), luego crear una archivo php en donde incluiremos la clase lessc.inc.php.

Luego de haberla incluido simplemente debes llamar a la función ccompile que es parte de la clase, enviandole como parametros el archivo de entrada (LESS) y el archivo de salida (CSS).

y listo. Luego solo debes ejecutar el script PHP desde el navegador y este se encargará de crear el estilo CSS, incluyo los archivos importados.

Para extender más el ejemplo podemos hacer un script que compile varios archivos y utilizaremos una excepción para manejar errores, porque seguramente los habrán.

En el ejemplo solo se utiliza el nombre de archivo, sin extensión, de esta forma podemos nombrar facilmente el archivo de salida con el mismo nombre.

Puedes descargar ver los archivos del ejemplo en Github: uptoeleven-lesscss.

Más información sobre LessPHP

Enlace: LessPHP | http://leafo.net/lessphp/
Github: LessPHP | https://github.com/leafo/lessphp
Documentación: LessPHP Documentation | http://leafo.net/lessphp/docs/

Comenta

ivanmendoza 2012 - Bajo licencia Creative Commons By-NC-SA.

Un sprite css es una colección de imágenes, iconos en este caso, unidos en una única imagen para luego crear clases CSS que muestren únicamente el estilo que necesitamos. El objetivo de los sprites css consiste en reducir la cantidad de imágenes a cargar, porque al reducir peticiones al servidor se acelera la velocidad de carga.

Es mejor una imagen de 100kb que 10 imágenes de 10kb.

Crear la imagen

El primer paso es crear una imagen con los iconos a utilizar, en este caso la imagen es de 300x120px y cada icono ocupa 60x60px, es decir que tendremos 10 iconos en la imagen. Utilizaré los iconos de IconSweet2 y marcaré los espacios de cada icono en Photoshop usando la extensión GuideGuide (recomendada).

Definir el namespace y mixins para los iconos en less

Lo que sigue a continuación es definir los estilos base para los iconos, por ejemplo la imagen que usará, las medidas de los iconos con variables y para facilitar el uso de los iconos más adelante agregaré un mixin (elegir) que permitirá elegir que icono usar unicamente por la posición que ocupa.

Se agregan dos clases más para posicionar los iconos

y por último el mixin que se encargará de “elegir” el icono dentro de la imagen. A este mixin de le enviará como parametro qué icono se usará, por ejemplo elegir(2, 0) usará el icono 2 de la fila 0.

Utilizar el sprite

Con los estilos anteriores hemos definido un namespace para cargar los iconos de la imagen, ahora para usarlo simplemente agregaremos las clases en el HTML y luego en la hoja de estilos base (style.less).

HTML

El HTML básicamente es un conjunto de parrafos <p> con clase tiempo1, tiempo2, etc. con un elemento span dentro de clase icono, este elemento será el encargado de contener la imagen.

style.less

En los estilos definimos que cada icono dentro clase tiempo1, tiempo2, etc. cargué un icono diferente. Además le indicamos la alineación que debe tener usando las clases que ya definimos

Y listo, al tener estos estilos definidos podremos usar los iconos dentro de nuestra página web. Para el ejemplo monté los estilos sobre una plantilla de Foundation y se ve así:

Puedes descargar ver los archivos del ejemplo en Github: uptoeleven-lesscss.

—
Aunque no parezca sencillo realmente lo es, y de hecho es un gran avance dentro del manejo de estilos.

Comenta

ivanmendoza 2012 - Bajo licencia Creative Commons By-NC-SA.

Las librerías de estilo no son exclusivas de Less, de hecho hasta un Reset CSS como el de Eric Meyer podría incluirse, sin embargo, con el poder que dan los mixins en Less la forma de trabajar es mucho mejor.

A continuación los dejo con una lista de librerias de estilo en less que podrían servirles

Less Elements

Es una librería de estilos que incluye mixins para agregar sombras, transiciones, gradientes, bordes redondeados, etc.

Esta fue una de las primeras librerías que conocí implementada en Less, me pareció inútil al inicio pero con el tiempo descubrí que ahorraba mucho tiempo y aumentaba la compatibilidad de mis estilos.Tanto así que decidí aportar con el proyecto en Github que a la fecha parece abandonado, aunque personalmente hice un clon (fork) de la librería y la he ido ajustando según mis necesidades, por ejemplo le agregué namespaces para poder recordar mejor los estilos.

Enlace: Less Elements |  http://lesselements.com/
Enlace: Mi versión de Less Elements | https://github.com/ivanmendoza/elements

Bootstrap

Bootstrap en realidad no es una librería de estilos, es un framework de diseño web completo, pero parte de la flexibilidad en la web es que puedes descargarlo y utilizar parte de sus estilos como libreria de estilos. Por ejemplo los botones.

Enlace: Bootstrap | http://twitter.github.com/bootstrap

Foundation

Con Foundation, de Zurb, sucede lo mismo que con Bootstrap, es un framework completo pero de igual forma podemos utilizar sus hojas de estilo como librerias de estilo.

A diferencia de Bootstrap Foundation no fue desarrollo para Less sino hasta hace unos días que incluyeron una rama de desarrollo en dónde utilizan less, por lo que debes buscar esa rama de desarrollo en su repositorio.

Enlace: Foundation con Less | https://github.com/zurb/foundation/tree/less

—
Puedes dejar un comentarios si conoces otra libreria de estilos que quieras recomendar.

Un comentario

ivanmendoza 2012 - Bajo licencia Creative Commons By-NC-SA.

Qué significa organizar estilos

Aunque el diseño gráfico, incluyendo los estilos web, son usualmente algo desordenado, un tanto libre en su desarrollo hay momentos en que mantener un orden es beneficioso, especialmente con proyectos amplios o con un futuro prometedor, que como ejemplo podría mencionar temas de wordpress, aplicaciones web, portales de contenido, etc.

Significa que antes de crear si quiera una clase comenzarás definiendo en qué forma se dividirán los estilos, la paleta de colores, las fuentes a utilizar, la carpeta de imágenes, e incluso pre-definir clases genericas para utilizar en toda la hoja de estilos para algunos elementos repetitivos como el logotipo o colores de identidad de la marca

De qué forma me ayuda Less CSS a organizar estilos

Dividir estilos por sección

Una buena forma de dividir los estilos es por la sección del sitio web que modifican (portada, página interna, contacto, etc). De esta forma existirá una hoja de estilo por cada sección aunque al final se mezclen en una única hoja de estilos utilizando el comando import.

En el siguiente código estoy definiendo las hojas de estilos que utilizaré como base, la primera es parte del framwork Foundation sobre el cual trabajo, el segundo es una adaptación de la libreria de estilos Less Elements, la tercera es un framework propio sobre el que estoy trabajando y la última es una librería de estilos para controles de formulario. En situaciones así, en donde intervienen varias hojas de estilo los namespaces resultan muy útiles.

Predefiniendo la paleta de colores

Los colores se definen por su nombre en variables. También se pueden definir como variables llamadas como su contexto (error, hover, informativo) aunque esto es más complicado. Quizá la forma ideal (aunque no la más rápida) sea una combinación de ambas como en el siguiente ejemplo en dónde defino los colores que son parte de la identidad de la marca seguido de algunos colores definidos por su contexto (action que significa que son enlaces)

Para evitar confusiones con los nombres de variable acostumbro a anteponer una c al nombre de la variable, excepto que sea el nombre de un color lo dejo como esta.

Uso de fuentes

De vez en cuando las fuentes es un tema olvidado en los estilos web, se define un estilo y se olvida el resto. Pero es una buena práctica al menos definir cuatro tipos de fuentes:

• La fuente del contenido, o texto en general (fontBase)
• …de los titulares (fontHeadings)
• …de los controles de formularios o de elementos que actuen como parte de la interfaz, usualmente es una fuente más angosta y aún legible en dimensiones reducidas (fontControls)
• y la fuente del código fuente, que por recomendación debe ser monoespaciada.

En el ejemplo anterior además importe una hoja de estilos, font.less, que es la encargada de definir la webfont Yanone Kaffeesatz.

Definir variables de referencia

Definir variables de referencia no es necesario pero yo se los recomiendo, es un buen tip, por ejemplo para definir la ubicación de las imágenes, de las fuentes, el ancho máximo de la pantalla u otros valores de referencia dentro de todo el diseño gráfico. Por ejemplo si sabemos que el logotipo siempre deberá tener un margen especifico podríamos definirlo desde el inicio.

Luego de un código como el anterior es mucho más fácil trabajar, por ejemplo para agregar una imagen como fondo utilizariamos un estilo similar a este:

.panel{
  background:url("@{dirImages}/fondo.jpg") repeat;
}

Es importante aclarar que las variables se incluyen de la forma @{variable} porque están dentro de una cadena de texto.

Definir estilos globales

Para finalizar se debe definir los estilos globales, los del body y demás contenedores, para poder tener una base de estilos sobre la culal poder trabajar.

Comenta

ivanmendoza 2012 - Bajo licencia Creative Commons By-NC-SA.

Los namespaces son una forma de agrupar estilos, especificamente clases y mixins. Más que una caracteristica de Less CSS son una forma de enfocar y ordenar tus estilos, ya que básicamente son mixins que agrupan diferentes estilos y se utilizan igual.

Si trabajas en un sitio web pequeño, con apenas algunas decenas de líneas de estilos, seguramente no necesites usar namespaces, sin embargo, cuando trabajas en un proyecto gigante con más de tres hojas de estilo, con miles de lineas y cientos de clases entonces podrás tomar una gran ventaja de ellos.

La forma en que un namespace funciona es la siguiente:

#boton{
  .aceptar{  /* ... */  }
  .cancelar{ /* ... */ }
  .error{    /* ... */ }
}

#alerta{
  .aceptar{  /* ... */  }
  .cancelar{ /* ... */ }
  .error{    /* ... */ }
}

En el ejemplo anterior podemos ver dos namespaces, #boton y #alerta, cada uno define estilos diferentes para elementos diferentes, pero al utilizar namespace no hay conflicto con los nombres y el uso de namespaces le añade cierta semántica al código CSS.

Utilizando el ejemplo anterior, la forma de llamar a cada uno de los estilos dentro de los namespaces sería la siguiente:

.alerta_error{
   #alerta .error;
   .boton{
     #boton .error;
   }
}

En este último ejemplo asumimos que dentro del sitio web hay un elemento de clase alerta_error(un DIV si quieres) con un botón adentro de clase boton. Se necesita que el elmento tenga el estilo de alerta y el botón también así que cada uno de ellos llama a la clase .error pero de su respectivo namespace sin que esto genere ningún problema entre ellos.

El uso de namespaces en Less CSS no es necesario, sin embargo si es una practica recomendada y que por experiencia personal te puedo mencionar que es muy útil para reutilizar estilos en diferentes proyectos.

Más información

Un excelente ejemplo del uso namespace nos los da Twitter con su framework Bootstrap que define varios namespaces para diferentes estilos de elemento, por ejemplo #gradients. Bootstrap mixins | http://twitter.github.com/bootstrap/less.html#mixins

Enlace: Documentación oficial sobre Namespaces | http://lesscss.org/#-namespaces

Comenta

ivanmendoza 2012 - Bajo licencia Creative Commons By-NC-SA.

Este artículo es parte de la serie uptoeleven: Less CSS publicada de 1 a 11 el 11 de febrero del 2012.

Los mixins son parte fundamental de los estilos en Less CSS, y la forma de funcionar es como las clases CSS pero se pueden reutilizar y parametrizar de forma que pueden simplificar bastantes tareas de diseño.

Qué se puede hacer con un mixin

Con un mixin podemos

• Definir un estilo básico y reutilizarlo dentro de toda la hoja de estilos. Por ejemplo un estilo de botón, y luego durante la hoja de estilos únicamente cambiar el color.
• Crear estilos de color, por ejemplo definiendo color de fondo y de texto y luego reutilizarlos más adelante para colorear elementos.
• Crear “funciones css” que en base a parametros recibidos definan los estilos, por ejemplo un mixin para crear bordes redondeados en don el parametro es el radio de los bordes.
• Combinar multiples clases para crear una nueva clase de estilos para un elemento. Por ejemplo combinar una clase que defina el estilo de un botón con una que defina los colores asociados a eliminar o aceptar, de forma obtenemos multiples combinaciones de boton+colores sin definir cada vez la forma del botón.

Cómo se crea un mixin

La forma de crear un mixin es muy sencilla, únicamente se define una clase y para invocarla en otra clase usamos su nombre seguido de punto y coma, así:

.boton{
  border-radius:4px;
  border:solid 1px #aaa;
  background:#ddd;
  color:#000;
}
.rojo{
  background:#f00;
  color:#fff;
}
.verde{
  background:#0f0;
 color:#fff;
}

.boton_verde{
  /* Se combinan dos clases anteriores para crear una tercera */
  .boton;
  .verde;
}

Si quisieramos simplifcar el ejemplo anterior utilizando parametros entonces lo harïamos de la siguiente forma:

.boton(@fondo: #ddd, @texto: #000 ){
  border-radius:4px;
  border:solid 1px #aaa;
  background:@fondo;
  color:@texto;
}

.boton_verde{
  /* Se envian los colores como parametros */
  .boton(#0f0, #fff);
}

En este segundo ejemplo nos ahorramos definir las clases .verde y .rojo, y nos da la ventaja de crear botones del color que querramos.

Más información sobre mixins

Enlace: Documentación oficial sobre Mixins | http://lesscss.org/#-mixins

Comenta

ivanmendoza 2012 - Bajo licencia Creative Commons By-NC-SA.