Avisar de contenido inadecuado

Actualización obligatoria a Internet Explorer 7

55787-47909.jpgDaniel se hace eco hoy de la decisión de Microsoft de incluir la actualización de Internet Explorer 6 a Internet Explorer 7 como una actualización obligatoria. Al parecer esta actualización obligatoria sólo afectará a aquellos ordenadores gestionados mediante Windows Server Update Services (WSUS), aunque se estima que el volumen de máquinas afectadas será importante.

En fin, cualquier notícia que implique que dejamos un poco más atrás al infame Internet Explorer 6 es para alegrarse, aunque la verdad es que aún le queda cuerda para rato. ¿Cuánto tiempo deberá pasar para que lo veamos desaparecer de las estadísticas de acceso a nuestras webs, y los diseñadores web podamos centrarnos exclusivamente en eso, en diseñar y maquetar, y no en pensar en los mil-y-un trucos para conseguir que todo encaje en el dichoso Explorer?...

Como consuelo nos quedan las -buenas- notícias que se van filtrando acerca del desarrollo de Internet Explorer 8. Parece que en esta ocasión están haciendo un buen trabajo. Veremos.

{
}

Bandeiras: conoce el mundo en el que vives

Bandera de Europa

Bajo este título, la agencia de publicidad portuguesa Foote Cone & Belding nos presenta una campaña sorprendente e incisiva. Tomando como base las banderas de países como Somalia, Angola, Brasil, la Unión Europea, Colombia o Estados Unidos, se adjuntan unas leyendas que describen lo que representan cada uno de los colores o formas que contienen, a modo de gráfico estadístico.

La campaña, dirigida a la revista política "Grande Reportagem" y con el subtítulo "Conoce tu mundo", pretende, según sus creadores "llamar la atención visualmente". Como explica, "la idea surgió cuando consultamos el site de Amnistía Internacional, y leímos que el 90% de las mujeres con mutiladas genitalmente. Nos dimos cuenta de que la distribución de los colores de su bandera coincidía exactamente con esos porcentajes".

Podéis ver algunos ejemplos más en la galería de imágenes, al final del post.

Vía Visualmente 

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)

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.

{
}

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). 

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

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

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?