Sebastián Thüer

Comunicación, diseño y tecnología

Diseño Web

Anticipando Internet Explorer 9

· ·

Interfaz renovada y minimalista, respecto por los estándares web y un riguroso proceso de testeo. Microsoft parece estar trabajando para Internet Explorer 9 no se convierta en la nueva pesadilla de los diseñadores web. Luego de 15 años de Internet Explorer, parece que Microsoft ha tomado nota de sus principales fallos y se ha volcado dedicidamente en favor de los estándares web.

Hace unos días se ha filtrado un video que muestra la nueva interfaz de usuario de Internet Explorer. El minimalismo recuerda mucho a Chrome la principal diferencia es que la pestaña de ventanas se colocan a la derecha de la barra de direcciones. Los botones también se han reducido al mínimo y quedan solo dos que permiten ir hacia atrás o adelante. El resto de las opciones parecen estar en una serie de iconos que agrupan diferentes posibilidades de configuración.

Uno de los aspectos que más llama la atención en el video es su desempeño en un test bastante popular como Acid3 donde obtiene una puntuación de 95 sobre 100, por encima de la versión actual de Firefox que llega al 94% ¿Qué significa esto? Probablemente, que el lanzamiento de Internet Explorer 9 no necesite revisar nuestras páginas si están diseñados de acuerdo con los estándares.

Además de los estándares, Internet Exporer 9 apuesta decididamente por HTML5 y la página de Test Drive que lanzó Microsoft contiene muchos ejemplos sobre diferentes implementaciones de las nuevas etiquetas que tiene el lenguaje. Otra buena noticia: tambien hay soporte para CSS3 y los nuevos selectores avanzados que permiten afectar el diseño de un segmento de la página de modo mucho más específico.

Además, hay una extensa documentación y existe la posibilidad de descargar una Preview de IE9 para ir viendo cómo se comporta el navegador en cuanto a nuevas implementaciones y velocidad, una aspecto cada vez más importante con la gran cantidad de aplicaciones web y su creciente comlejidad.

Diseño web para iPad

· ·

A medida que los dispositivos táctiles avanzan las formas de navegar e interactuar se van transformando. En Xperience Consulting presentan 10 recomendaciones para diseñar una web para un iPad con una serie de cuestiones a tener en cuenta cuando creamos sitios web para este dispositivo. Más allá de algunas lo técnico es interesante analizar los principios que hay detrás en el diseño interactivo. Se me ocurren algunos:

  • Reducción de los sistemas simbólicos: El mouse y el puntero son dispositivos que median nuestra interacción con la información. Por más que nos resulten familiares, en cierta forma, suplantan nuestro cuerpo y ‘tocamos’ los elementos con un puntero digital que responde al movimiento que realizamos sobre el objeto mouse. Tocar con la mano es mucho más directo, por cual la propensión a desplazarnos es mayor. El iPad ni siquiera tiene barra de scroll (otro elementos simbólico), simplemente nos movemos con nuestros dedos. También la tentación de hacer zoom es mayor, como si quisiéramos acercar el elemento que visualizamos.
  • Aumento de la impresición: Los dedos son mucho más torpes que el delicado ángulo del puntero del mouse. Por lo tanto, necesitamos un margen de error mayor y lograr que el área sensible de un objeto tenga como mínimo el tamaño de la yema de un dedo. Grupos de enlaces amontonados, botones apretados o iconos pegados son una invitación al error.
  • Maleabilidad: Mientras que los monitores son elementos estables, los dispositivos manuales pueden ser sujetados de muchas formas y en situaciones diversas. Apple entendió perfectamente esto e incluyó en el iPhone y iPad sensores de orientación para saber si el dispositivo está sujetado a lo largo o a su ancho. El diseño tiene que verse bien en ambas situaciones.
  • Cautividad: Apple impone sus criterios y establecer lo que se puede hacer o no en sus dipositivos. Hay que renunciar a Flash y usar los codecs de videos que Apple decida incluir. Probablemente la competencia sea bastante más flexible pero por el momento quien marca la pauta y establece el estándar del sector -como ocurría hace algún tiempo con Microsoft- es la firma de Steve Jobs.

Actualización 10/09/2010: Slides con la presentación de Xperience Consulting

Gracias Irene por el enlace 😉

¿Algo más a tener en cuenta? ¿Agregarías o quitarías algo de esta lista?

Foto por Jared Earle con licencia Creative Commons.

Consejos para escribir código CSS comprensible

· ·

Se puede decir que hay tantas maneras de escribir código como cantidad personas que programan. Sin embargo, existen ciertos estándares y convenciones que facilitar a que otra persona pueda comprender lo que hemos hecho y sean capaces de modificarlo. Lamentablemente entre muchos diseñadores web esta práctica no existe y van escribiendo las líneas del CSS  a medida que lo necesitan sin orden ni estructura lógica. Al ser el CSS un «lenguaje» enunciativo donde no hay variables, bucles ni estructuras lógicas muchos se limitan simplemente a definir clases y atributos de manera secuencial y desordenada.

En SpyreStudios publicaron  10 Great Tips for Writing Better And More Comprehensive CSS donde proponen una serie de prácticas sencillas de implementar pero que facilitan enormemente la lectura de un archivo de estilo.   Y la verdad, son cosas muy fáciles de hacer pero que facilitan enormemente el diseño web, especialmente cuando se trabajo en grupo o hay que pasarle el trabajo a otro diseñador.

Algunas me parece útiles, otras no tanto pero acá está la lista:

  1. Comentar el código
  2. Usar las sangrías
  3. Usar la notación taquigráfica (shorthand code)
  4. Una línea por cada regla
  5. Mantener los hacks fuera del archivo principal
  6. Uas nombras significativos para clases e IDs
  7. Eliminar clases e IDs no utilizados
  8. Ordenar alfabéticamente el nombre de las clases
  9. Combinar selectores
  10. Agrupar el código y divirlos en varios archivos

Otro pack de recursos para diseñadores web

· ·

Plantillas para sitios web, blogs, Flash, recursos 3D, videos, vectores, audio y más. El sitio con recursos para el diseño web Evanto cumple 4 años y se sube a la moda de ofrecer paquetes de recursos a un precio muy conveniente por un tiempo limitado.

Aunque no tiene tantos elementos como otros de su tipo, son apenas 20 dólares por 5 plantillas para sitios web, 5 archivos de Flash, 6 paquetes de código CSS, JavaScript, WordPress y PHP, 7 proyectos de animación, 16 archivos PSD y vectoriales y más.  Además, hay un voucher de $50 dolares para un hosting con Media Temple y otro de $10 para Rockable Press

Una interesante oportunidad para hacerte con un paquete de recursos que vienen bien a diseñadores que están dando sus primeros pasos en la web. Atención: la oferta dura sólo 5 días.

21 recursos para crear el sitio web de tu empresa

· ·

¿Se puede crear el sitio web de una empresa en una hora? Yo lo dudo mucho pero en KissMetrics han escrito 21 Resources to Help You Build a Company Website in Less Than an Hour donde hacen una lista de varios recursos como hosting, sistemas de gestión de contenidos (CMS), diseño corporativo y sistemas de comercio electrónico.

Más allá de los que aparecen siempre en la lista como WordPress, Drupal, etc. hay algunos nuevos que no tenía en vista y habrá que investigar un poco más como Concrete5 y PrestaShop. Inkd aparece como opción interesante si necesitás ayuda en la parte gráfica.