Avisar de contenido inadecuado
Expand

Entrevista a Ruth Kedar, diseñadora del logo de Google

Hoy he leído una entrevista muy interesante publicada en Google Blogoscoped. Le preguntaban a Ruth Kedar, creadora del logotipo de Google, acerca del proceso de diseño de dicho logotipo. Aquí os dejo la traducción de su respuesta:

Yo era profesora de diseño en la Universidad de Stanford en 1999, cuando un amigo común me presentó a Larry Page y a Sergei Brin. Estaban buscando diseñadores para diseñar su logo y su web, y me pidieron que les presentara algunas ideas de diseño preliminares. Les gustó mi aproximación y mi estilo y me contrataron para diseñar ambas cosas.

Google quería crear un logo único que les diferenciara claramente de los otros buscadores del momento (Yahoo, Excite, HotBot, LookSmart y Lycos), además de contener su visión única. Sus competidores eran, antes de nada, portales comerciales, y de forma secundaria, buscadores. Google quería mostrarse como un proveedor de búsquedas, por encima de todo. Ofrecían resultados de búsqueda rápidos, comprensibles, y por encima de todo dignos de confianza. Su algoritmo era innovador, con un algoritmo complejo pero increíblemente sencillo de usar. Además, como marca, Google rechazaba corporativismos, convencionalismos...

Basándome en estas premisas, hubo varias pruebas de diseño, y se exploró en diversas direcciones. En cada reunión que tuvimos, tratamos de reconciliar lo mejor posible la filosofía anterior y la expresión visual que nos llevaría al diseño final.

Finalmente, el logo actual fué seleccionado porque cumplía sus objetivos en varios niveles:

  • Era divertido y sencillo. Un diseño sutil, en apariencia casi "carente de diseño", legible sin esfuerzo. Los colores evocan recuerdos de juegos infantiles, pero se desvían hábilmente de las estructuras de paletas de colores, como para insinuar el elemento inherente de la casualidad que se cuela con sigilo en cualquier página de resultados de búsqueda y la irreverencia y descaro del enlace "Voy a tener suerte". La textura y el sombreado de cada letra se ha hecho de forma discreta, elevándolas un poco sobre la página, pero dándoles peso y ligereza al mismo tiempo. Es sólido pero hay algo etéreo en él.
  • Times-Roman era la fuente elegida para la web en aquel momento, mientras que las fuentes sans-serif eran las preferidas para el "mundo impreso". Quería la legibilidad de una fuente serif, pero busqué una alternativa con las mismas cualidades que necesitábamos: sofisticación sutil, pero con algo de humor e irreverencia. La fuente escogida está basada en Catull, un viejo estilo de tipografía serif. Catull toma prestados elementos tradicionales de instrumentos de escritura como la pluma y el cincel, pero con un toque moderno. La búsqueda es, por naturaleza, una actividad que requiere mirar hacia el pasado. Los vínculos históricos que Catull tenía parecían apropiados, como un puente entre el viejo mundo analógico y la nueva era digital.
  • Visualmente, había dos grandes escuelas de pensamiento en aquel momento: aquellos que querían emular a los gigantes convencionales fuera de la web, como SUN o SGI (fuentes negritas en mayúsculas con tipografías sans-serif), y aquellos que veían en la irreverencia del estilo de Yahoo el "look" para el nuevo medio. Este diseño trataba de romper con las convenciones existentes dando a Google la expresión visual única que estaba buscando.

Google es hoy una entidad mucho más compleja - ha evolucionado y crecido más allá de nuestras más salvajes imaginaciones - ¿Quién iba a pensar que se convertiría en una de las marcas más ubicuas y reconocidas en todo el mundo, y que google se convertiría en un sustantivo y en un verbo?

Es un placer para mí que el diseño haya trascendido al tiempo pasado y a las necesidades originales, siendo tan relevante hoy como lo fué entonces. Además, se ha convertido en el lienzo donde florecen los Google Doodles de Dennis Hwang! :-)

Artículo original (en inglés)

{
}
Expand

Nueva versión de JQuery: 1.2.2

53714-46267.jpgJQuery celebra su segundo aniversario con la publicación de su versión 1.2.2. Esta versión incluye principalmente correcciones para varios bugs de la versión 1.2, junto con algunas mejoras, sobre todo en el rendimiento del los selectores.

Cambios importantes en esta nueva versión

  • Mejora de un 300% en la velocidad de $(ElementoDOM)
  • Mejoras en el comportamiento de la función .ready()
  • Nuevos eventos: mouseenter, mouseleave, mousewheel.
  • Función .not más compleja.
  • y más...

JQuery sigue siendo uno de los frameworks javascript más activos y prometedores de los que disponemos en la actualidad.

Expand

Internet Explorer 8 supera el Acid2 Test

Acid2 Test Parece que Microsoft se está poniendo las pilas con la nueva versión de su navegador web, Internet Explorer 8: Leo en SitePoint que han conseguido que IE8 supere el Acid2 Test.

El Acid2 Test es una prueba de cumplimiento de estándares desarrollada por el Web Standards Project (WaSP), y cuya intención es proporcionar a los desarrolladores de navegadores web una herramienta que les permita comprobar si su aplicación soporta las funcionalidades más importantes para los diseñadores web.

Acid2 Test comprueba, entre otros, la correcta implementación de:

  • PNG  transparentes.
  • El elemento <object>.
  • Posicionamiento absoluto, relativo y fixed.
  • El modelo de caja.
  • Modelado CSS de tablas.
  • Márgenes.
  • Contenido generado desde CSS.
  • Parseado correcto del CSS.
  • Respespeto de la jerarquía en cascada.
  • Altos de linea.
  • Efectos hover.
Han montado incluso un vídeo que muestra cómo, a través de diferentes pruebas durante los últimos 5 meses, Internet Explorer 8 ha conseguido realizar el test con éxito.

Como curiosidad, hasta ahora sólo iCab y Konqueror han conseguido superar dicho test (la beta de Firefox 3 está cerca de conseguirlo también). 

Expand

Los mejores frameworks CSS (y porqué no los uso)

La intención de un framework es principalmente ahorrar tiempo y minimizar el riesgo de errores en el desarrollo de aplicaciones. Los frameworks nos evitan, sobretodo en los momentos iniciales del desarrollo de una aplicación, repetir código para construir la base y nos permiten conseguir ciertas funcionalidades o módulos genéricos de forma más rápida y sencilla. Así como hay frameworks para PHP (CakePHP, CodeIgniter, The Zend Framework...) o para Javascript (como no... JQuery), también existen varios frameworks para CSS. Veamos en qué consisten.

¿Qué es un framework CSS?

Igual que sus parientes orientados a lenguajes de servidor o cliente, el objetivo de un framework CSS será ahorrarnos realizar las tareas básicas al trabajar con hojas de estilo. Normalmente los frameworks CSS se componen de uno o varios archivos con declaraciones predefinidas que incluyen:

  • CSS Reset: Ya hablamos de las ventajas de resetear los estilos al empezar a trabajar la maquetación de una página, en nuestra lista de consejos y buenas prácticas para CSS.  Resetear los estilos nos permitirá homogeneinzar, a priori, las posibles diferencias de visualización entre navegadores, unificando las propiedades básicas de los elementos: márgenes, paddings, tamaños, formatos, etc.
  • 51249-44848.jpgLayout:  Una parte de los frameworks va dirigida a una de las tareas más árduas a la hora de maquetar cualquier diseño: conseguir un determinado layout, más o menos complejo, que sea, además de óptimo, "cross-browser", e.d. compatible con todos los navegadores. Suelen disponer de múltiples opciones combinables para conseguir layouts complejos: múltiples columnas, anchos fijos, elásticos, líquidos...
  • Tipografías: Una gestión genérica de las tipografías que se usarán en la página. De nuevo, no sólo se trata de aplicar un uso inteligente de fuentes y tamaños, si no de unos altos de línea, márgenes, paddings... consistentes, que ayuden a  mantener un correcto ritmo vertical en la página.

Ventajas de usar un framework CSS

  • Permite agilizar el desarrollo, sobretodo en sus momentos iniciales.
  • Te ahorra las habituales batallitas entre navegadores para conseguir que tus layouts sean "cross-browser".
  • Partes de una base normalizada / homogeneizada sobre la que desarrollar un trabajo adicional.
  • Si el framework CSS está bien documentado, agiliza el trabajo en un equipo relativamente grande.

Entonces... !¿Porqué no los uso?!

Eso me gustaría saber... No, es broma. De verdad que, aunque en el caso de frameworks de desarrollo para lenguajes como PHP o Javascript me parece una ventaja a la que sacar partido, creo que en el caso de las hojas de estilo, las ventajas no son suficientemente potentes como para superar el peso de las desventajas, que para mi son:

  • Curva de aprendizaje. Algunos frameworks son realmente complejos, y es necesaria bastante dedicación  y pruebas para llegar a controlarlos bien, conocer y usar todo su potencial.
  • Puede afectar negativamente a la semántica de tu marcado HTML. La mayoría de los frameworks contienen definiciones demasiado genéricas que además han sido pensadas y nombradas pensando únicamente en la apariencia que tendrán. Y si recordamos, uno de los consejos en el artículo que citábamos antes era "Sé descriptivo en los nombres y huye de usar aquellos que se refieran a la apariencia de los elementos." Meeec. Va a ser que un contenedor llamado "big-square-at-the-left" no va a resultar muy práctico si dentro de unos meses debemos cambiar el layout de nuestra página. ¿No habíamos quedado que la ventaja principal de las hojas de estilo era separar contenido y presentación?
  • Gran parte del código nunca será utilizado. Los frameworks intentan prever todas las situaciones y contienen muchas definiciones genéricas que posiblemente nunca lleguemos a utilizar. Esta desventaja sería en realidad aplicable también a otro tipo de frameworks. Con la diferencia que un framework PHP por ejemplo, el cliente no debe descargar TODO el framework para que la aplicación funcione: se ejecuta en el servidor. El CSS en cambio sí debe descargarse al navegador, con lo que debemos cuidar su extensión si no queremos afectar negativamente al rendimiento.
  • Por último, y posiblemente la más importante al menos para mi, es que usar un framework CSS te corta las alas a la hora de aprender, de entender cómo funcionan realmente las hojas de estilo. Muchas de las cosas que sé ahora las aprendí mientras me rompía los cuernos tratando de solucionar absurdos bugs de render de Explorer, o de conseguir flotar aquella caja rebelde, o buscando el motivo por el cual la cascada se iba a tomar viento al definir tal o cuál color. En mi opinión, condiciona excesivamente el trabajo del desarrollador.

Lista de frameworks CSS

De todas formas, te animo a que conozcas y pruebes algunos de estos frameworks ( quizás entonces entiendas mis motivos... o pienses que estoy loco )

Conclusión 

Aunque no recomiende su uso, sí que hay algunas ideas que subyacen al trabajo con frameworks con las que comulgo, y te invito efusivamente a seguir, como son:

  • El reseteo de los estilos al principio de tus CSS.
  • La creación de una librería de "helpers" o snippets de código y declaraciones CSS que te sirvan como referencia para resolver situaciones comunes.
  • Definir y mantener una estructura y una sintaxis del documento CSS que sea consistente, y aplicarla siempre en todos tus proyectos.

Otros artículos interesantes que inspiraron este post

{
}
Expand

Diseña el logo de Anuncios.es y llévate un mini-portátil ASUS de regalo

Nos avisa Jose, de Anuncios.es, de un concurso que han lanzado desde su site y que vale la pena comentar:

Si hace poco estrenaban un nuevo diseño para su web, ahora es el momento de encontrar un buen logotipo para esta nueva etapa. Para ello, han preparado un concurso: Los participantes deberán enviar un logotipo de 200x80 píxeles y un icono de 20x20 píxeles antes del día 6 de enero. Si te animas a participar debes saber que el premio no está nada mal: un mini-portátil ASUS EEE 4G. El mismo día 7 darán a conocer el ganador.

Logotipo Anuncios.es

Quizás se echa en falta algo más de información sobre qué quieren conseguir / transmitir con el logotipo, unas mínimas directrices que ayuden a los participantes a saber qué busca exactamente la gente de Anuncios.es.

Más información | Concurso logotipo Anuncios.es

Expand

La evolución de Photoshop

Photoshop

Curiosa imagen que representa visualmente la evolución de Photoshop, a través de uno de los elementos más importantes de su interfaz: la barra de herramientas. Destaca la tendencia a simplificar de nuevo algunas opciones en la última versión, CS3, y cómo se ha reducido el ruido eliminando las líneas separadoras entre botones. Los cambios pequeños son poderosos, ¿verdad?

 

Expand

¿Disparo en el momento adecuado o Photoshop avanzado?

41940-39290.jpg

La imagen es tremenda: un momento de acción trepidante, un instante perfecto captado en una fotografía... pero es "sólo eso"? Para nada. En realidad se trata de un completo trabajo de edición en qué cada parte de la imagen se ha captado y trabajado por separado: el escenario, los disparos, el arma del "tirador", parte de su cuerpo, la secretaria, el vaso de leche, el "atacado"... decenas de piezas de un puzzle que encaja a la perfección. 

En el siguiente video podréis ver paso por paso las etapas de producción de la fotografía. Disfrutadlo.

Via | didntyouhear 

Expand

CSS Sprites. Mejora el rendimiento de tu web (I)


Con este artículo empezaremos una serie de posts que tratarán de diversas técnicas y consejos que podemos seguir para mejorar el rendimiento y los tiempos de carga de nuestra página web. Y es que el rendimiento de una aplicación web no sólo depende de la programación del lado del servidor, si no también del marcado, el uso que hagamos de hojas de estilo, de imágenes, de nuestra programación javascript... Todos ellos campos que afectan directamente al desarrollador web en su faceta de maquetador/diseñador.

Hoy empezaremos desarrollando una técnica CSS muy sencilla y efectiva: Los CSS Sprites.

La problemática.

Una de nuestras máximas prioridades a la hora de optimizar nuestra aplicación web debe ser reducir las peticiones que ésta hará al servidor una vez el HTML se haya cargado en el navegador del cliente. Cada archivo de hoja de estilos, cada archivo Javascript, cada imagen... cada elemento externo en definitiva, se solicita de forma separada y aumenta por tanto la transferencia y el tiempo de carga, esto resulta obvio. Lo que no resulta tan evidente es que ese aumento no es proporcional a la suma del tamaño de los archivos externos, es decir, la carga de 10 elementos de 5 KB no es igual de rápida que la de un elemento de 50 KB.

Además de sumar los tiempos de transferencia para cada archivo, deberemos sumar por un lado el tiempo que tarda en realizarse la propia conexión+petición+respuesta y el tamaño correspondiente a las cabeceras del archivo. Recordemos, en relación a las cabecera, que éstas se adjuntan a cada petición al servidor y que si, además, nuestra aplicación usa cookies, éstas también se adjuntarán a cabeceras para cada archivo. Podría darse el caso, por ejemplo en un archivo de imagen pequeño, en qué el tamaño de las cabeceras + cookies ¡superara al tamaño del propio archivo!

La solución.

Este sería un claro ejemplo de una técnica antigua retomada para solucionar un problema moderno. Y es que para encontrar el origen de los CSS Sprites debemos mirar atrás hacia los antiguos juegos en 2D ( o los actuales juegos para móviles ), que usaban los "sprites" para las animaciones de sus personajes u otros elementos del juego. 

37249-34955.jpg

Como ves, los sprites no eran más que imágenes que contenían a su vez varias imágenes pequeñas, que en el caso de los videojuegos se utilizaban para recrear una animación. En nuestro caso, la solución a las múltiples peticiones para imágenes en nuestras hojas de estilo pasará por el uso de imágenes grandes que contengan a su vez varias imágenes más pequeñas. De esta forma, para mostrar diversos fondos o varios iconos, estaremos realizando una única petición al servidor, con el correspondiente ahorro en tiempo de carga y transferencia.

Implementación.

El "truco" en esta técnica está en el uso correcto del posicionamiento de backgrounds para mostrar sólo aquella parte de la imagen que nos interesa. Pongamos como ejemplo un menú, en el que queremos mostrar un icono diferente por cada opción.

Nuestro HTML podría ser algo parecido a:

<ul>
    <li class="option1">Opción 1</li>
    <li class="option2">Opción 2</li>
    <li class="option3">Opción 3</li>
</ul>

y para el CSS usaríamos

    .option1, .option2, .option3 { padding-left:20px; }
    .option1 { background:url(iconos.png) 0 0 no-repeat;
    .option2 { background:url(iconos.png) 0 -30px no-repeat;
    .option3 { background:url(iconos.png) 0 -60px no-repeat;

Como verás, hemos jugado con el posicionamiento vertical de la imagen para mostrar sólo aquella parte de la misma que nos interesa, la que contiene el icono en cuestión:

37249-34957.jpg               37249-34969.jpg

A partir de aquí podemos aplicar esta técnica de trabajo a muchos otros casos, ya no sólo iconos, sino fondos de imagen, pestañas, u otros elementos gráficos de interfaz.

Es fácil hacerse una idea del ahorro conexiones que podemos conseguir: una página con 20 iconos y 3 fondos de imagen diferentes para distintos contenedores pasaría de 23 peticiones de imágenes desde las CSS a sólo 2: una imagen conteniendo todos los iconos y otra conteniendo los fondos.

Más información.

Expand

Recopilación de pinceles de alta resolución para Photoshop

Hoy descubro a través de Vecindad Gráfica una fantástica recopilación de pinceles para Photoshop. Estos pinceles pueden ahorrarnos unas horitas de trabajo cuando nos encontremos enfrascados ilustrando un  diseño. La mayoría de ellos están preparados para trabajar a alta resolución, con lo que además podremos usarlos no sólo para trabajos web, si no también para proyectos de impresión. Os recomiendo descargarlos y echarles un vistazo, seguro que encontraréis alguno interesante.

Enlace | 100 increíbles pinceles de alta resolución para Photoshop

Expand

Fundamentos web 2007: día 3 - Workshop sobre microformatos

30938-29231.jpg

Aquí vamos de nuevo, arrancando el tercer y último día de las jornadas, dedicado a un workshop full day que va a ser dirigido por Tantek Çelik, sobre Microformatos.

10:36 - Tantek ha empezado haciendo una pequeña introducción hablando de los orígenes de la web semántica. Está hablando del concepto POSH. Comenta que espera que la jornada sea lo más interactiva posible, invitando a participar a todos aquellos que quieran comentar cualquier cosa durante sus explicaciones.

Describe algunos de los microformatos más elementales, empezando por rel. El atributo rel puede usarse para implementar, por ejemplo, los microformatos rel-license ( para indicar la licencia aplicable a determinado contenido ), XFN ( para indicar la relación existente entre dos personas ), rel-tag ( para indicar que determinado enlace responde a una categorización _etiqueta_ ), vote-links ( para indicar que un enlace se usa para votar / valorar determinado contenido ).

11:16 - He subido algunas fotos más al álbum de Flickr. Mientrs tanto Tantek ha hablado de la importancia de tener en cuenta la accesibilidad cuando trabajemos con microformatos. Ha comentado también acerca de las etiquetas abbr y acronym, cuyo uso correcto estaba convencido que conocía y... no!

Hasta ahora utilizaba la etiqueta acronym para marcar cualquier conjunto de iniciales que sirva para identificar un concepto ( FBI, HTML, KISS, POSH, LAMP... ), cuando en realidad sólo debe usarse para aquellos que funcionan y se leen como una palabra. Haciendo caso a los ejemplos anteriores, sólo lo serían KISS, POSH o LAMP. Por mi parte sólo usaba ABBR para abreviaciones de palabras del tipo etc., telf., dña., d., e.g., ... Haciendo caso a la especificación, FBI, HTML, WWW... deberían marcarse con la etiqueta ABBR. Nunca te acostarás sin saber una cosa más.

11:30 - Está hablando sobre el microformato hCard, utilizado para marcar perfiles de usuario ( nombre, nickname, email, dirección... ) El microformato hCard basa su estructura en el formato vCard, usado en la mayoría de software y dispositivos que trabajan con información de contactos ( agendas PDA, teléfonos, aplicaciones tipo Outlook... )

12:42 - OperatorTras el descanso para el café, empieza retomando el tema del hCard, y recomienda a aquellos que hayan traído portátil instalar la extensión Operator para Firefox. Operator permite interactuar con aquellos elementos de una página que hagan uso de microformatos. Funciona como una barra de herramientas adicional que nos da acceso a aquellos contactos, eventos, direcciones, tags... que haya marcados en la página, ofreciendo opciones para exportar la información que contienen. Por ejemplo en el caso de contactos marcados con hCard, nos permite exportarlos a nuestro gestor de contactos ( Outlook, libreta de direcciones, la Agenda en Mac... ).

Operator

12:56 - Han repartido algunos ejercicios entre los asistentes. Se propone una práctica para marcar un perfil sencillo con nuestro nombre y nuestra web. En realidad no tiene más misterio que conocer qué nombres de clase usar y para qué. Revisad la especificación y haced vosotros mismos algunas pruebas usando Operator para comprobar que lo hacéis correctamente. Como curiosidad podéis ver algunos atajos permitidos para simplificar el marcado de nombres.

13:41 - Seguimos viendo ejemplos y realizando algunos ejercicios prácticos. Quizás lo más interesante es que está apuntando a algunas excepciones útiles para identificar o marcar casos concretos, combinando algunos de los atributos de determinada forma. Prometo una recopilación a posteriori... Ahora prefiero atender. Wink

14:09 - Media hora más tarde de lo previsto... a comer!

-------- 

16:49 - Finally! Termina con hCard y pasa a comentar hCalendar. Pone como ejemplo a Upcoming ( algo así como Eventtos, pero en inglés y con algunas funcionalidades orientadas a red social ). Recuerda que se pueden usar cualquiera de los generadores de microformatos disponibles en la propia página de microformats.org.

Resulta interesante la idea de combinar y / o anidar diferentes microformatos para conseguir estructuras complejas. Pone como ejemplo un evento marcado con hCalendar cuyo location se marca usando hCard, indicando que se trata de un negocio.

17:59 - C'est fini. Hemos hecho un repaso de un par de microformatos algo más complejos, como son hReview y hResume, que combinan estructuras de microformatos más elementales. Como se veía venir... nada de XFN. Le atacaré ahora si se deja, o via mail. Wink

Ala, un placer compartirlo con ustedes. Ahora, a recoger y pillar el taxi para el aeropuerto, que esta noche llego tarde y empalmo con la despedida de soltero de Raúl. Let's rock.