Cada vez los teléfonos móviles tienen más importancia en el diseño web, si hace unos años casi nadie usaba Internet desde el móvil, hoy día es un sector con un enorme crecimiento gracias a modelos como el iPhone o los nuevos Android. Eso nos plantea un problema, pues es difícil crear un sitio web que sea valido tanto para resoluciones de ordenador, como para las pequeñas pantallas de los dispositivos móviles. Y si creamos 2 versiones alternativas nos surgirá otra duda, ¿cómo filtramos a los usuarios según el dispositivo desde el que accedan?

Una respuesta a ese problema nos la da el proyecto Detect Mobile Browser que facilita código libre en diferentes lenguajes de programación (Apache .htaccess, ASP, ColdFusion, JSP, Javascript, PHP, Python y Rails) para redirigir a los usuarios de navegadores móviles a una versión especial de nuestro sitio web, que previamente hayamos adaptado.

El código es simple y claro, por lo que no nos supondrá demasiado esfuerzo integrarlo en nuestros proyectos. Además, usa una lista de navegadores bastante completa y actualizada.

También nos ofrece otra alternativa, crear direcciones basadas en su propio dominio que  filtraran a los visitantes según su navegador. Yo no le encuentro demasiada utilidad, quien querría compartir una dirección como esta:

http://detectmobilebrowser.com/www.dglibre.com|www.dglibre.com/mv

No solo resulta excesivamente largo, sino que afectaría gravemente a nuestro SEO.

En este blog ya he publicado información sobre varios cursos gratuitos de programas libres para diseño gráfico. Los 2 cursos que hoy os voy a comentar están realizados por la plataforma de teleformación del CESLCAM. Ambos se pueden hacer online y no tienen ningún coste.

-Curso de diseño gráfico con software libre: Enfocado principalmente al uso de Gimp para la edición de imágenes e Inkscape para crear gráficos vectoriales. Durante el curso nos presentan la interfaz de ambos programas y las herramientas que incorporan, para luego mediante videotutoriales ver ejemplos de su uso. Teniendo también 2 ejercicios prácticos que nos puntuaran según nuestra pericia con el programa.

-Curso de diseño gráfico 3D con software libre: Dedicado íntegramente a Blender, con un temario bastante completo que va desde los conceptos más básicos a la post-producción. Cuenta con vídeos de ayuda, así como ejercicios prácticos. Además, se basa en una versión bastante actual  y también nos habla de 2 motores de render libres muy interesantes para  Blender (Yafaray y Luxrender).

Los podéis encontrar en el siguiente enlace, necesitaréis daros de alta en el sitio web: formados.ceslcam.com

Esta plataforma de teleformación también tiene cursos de pago (que incluyen tutoría por parte de los profesores) y ofrece la posibilidad de comprar el curso de Blender en un CD. Además, tienen más cursos gratuitos enfocados sobretodo a Molinux (distribución de GNU/Linux hecha en Castilla la Mancha) y ofimática.

En fin, otra opción para aprender a usar herramientas gráficas libres, en este caso con videotutoriales en español, lo que hace más ameno el aprendizaje. A ver si un día los agrupo todos en la sección de tutoriales, para que la gente encuentre todo de forma más ordenada.

Cuando un diseñador web empieza un nuevo proyecto las primeras preguntas que debe hacerse son:

-¿Un diseño fluido o estático? y de ser estático, ¿qué resolución usaran la mayoría de los visitantes en el sitio web?

Preguntas no siempre fáciles de responder pues aunque tengamos una idea aproximada de las resoluciones más usadas, no tenemos sobre la mesa estadísticas fiables.

Actualmente no cabe duda de quien tiene más datos sobre los internautas, Google. La cantidad de información que maneja es incluso preocupante pero en este caso nos resultara muy interesante. Partamos de la base de que es casi imposible que, durante un mes, un internauta no visite el buscador de Google o alguna web con Analytics, se puede decir que tienen todos los datos reales y además actualizados. Por eso la nueva herramienta resulta extremadamente útil:

Google Browser Size

Siguiendo la forma de trabajar típica de Google nos presenta los datos de forma sencilla y clara. Cuando entramos vemos una página web de ejemplo, sobre la cual se representa con colores el % de internautas que vera cada parte sin necesidad de usar las barras de desplazamiento del navegador. Además, podemos cargar nuestro sitio web como fondo para poder verlo de forma gráfica.

Como ejemplo, DGLibre debería ser vista correctamente por el 80% de los internautas (cifras peores de las que esperaba aunque supongo que los navegadores de móviles y netbooks bajan la media). Por otra parte, la zona dedicada al texto es accesible para el 99%, cifra muy positiva.

Cuando un feliz cliente llega al estudio de un diseñador gráfico entra en un mundo paralelo, donde puede necesitar consejos para su supervivencia. Siendo el momento clave cuando debe entregarles los datos del trabajo que necesita que le realicen. Este pequeño manual explica los pasos fundamentales que debe respetar un cliente para que el contacto con esa extraña especie sea lo menos traumática posible para ambos:

Contenido:

Por increíble que parezca los diseñadores gráficos necesitan que el cliente les aporte contenido. No destacan por una inteligencia privilegiada y si un cliente quiere por ejemplo un folleto publicitario para su empresa de fabricación de corcho, son incapaces de inventar 4 páginas de texto explicando las virtudes del corcho y de los 30 modelos de tapones que fabrica.

Como cliente esto puede resultar una sorpresa pero si ve que ante la frase:

-Y luego el texto llénalo con lo típico que se pone en estos casos.

Su diseñador gráfico pone caras raras y coge el ratón como si quisiera romperlo, tiene que asumir la realidad, debe aportar contenido para que su proyecto sea terminado. Por lo que deberá pasar por los siguientes temas.

Texto:

Llegados a este punto debe asumir otra característica del diseñador gráfico, es desagradecido. Por ello cuando prepare los textos para un proyecto no pierda su tiempo adornándolos, ese texto amarillo y verde con tipografía Comic Sans no será valorado como se merece. Tampoco se moleste en dar rienda suelta a su creatividad con los efectos de texto que incorpora Word, pues en cuanto caiga en manos del diseñador gráfico lo primero que hará es quitarle el formato al texto, son gente muy excéntrica.

Pero eso no es todo, sabemos que usted adora usar Excel para clasificar todos sus textos mediante hojas de calculo. Pues cometerá un grave error si se lo envía a un diseñador gráfico, pues tienen una seria alergia a esos archivos. Ese archivo Excel tan bonito con el texto dividido en 50 celdas diferentes puede producirle muchos dolores de cabeza y perdidas incomprensibles de tiempo. Por tanto, si no quiere que su proyecto acabe con retraso use solo procesadores de texto como Word o Writer, o incluso un simple .txt del bloc de notas puede ser una buena opción.

Imágenes:

Las imágenes son otro problema a tener en cuenta. Sé que usted ha visto muchas veces en películas y series como  una foto nocturna de baja resolución se podía ampliar infinitamente, hasta el punto de ver en el borroso reflejo de las gafas del villano la matricula de su coche. Pues los diseñadores gráficos no son capaces de hacerlo, curioso pero cierto, y eso que usted ya sabe que Photoshop es una herramienta mágica que hace casi todo el trabajo automáticamente.

Por ello debe intentar aportar siempre imágenes de alta resolución y sin mucha compresión. Por ejemplo, no se moleste en reducir las imágenes de su cámara fotográfica, siempre que sea posible envíelas tal cual y hará a un diseñador gráfico feliz.

También está el tema de la imagen corporativa de su empresa, por ejemplo los logotipos. Recordemos que los diseñadores gráficos no poseen la tecnología de las películas, Hollywood no la comparte con ellos, pobrecitos. Por eso si le entrega esa tarjeta que lleva 2 meses en su bolsillo arrugada y tiene manchas de café, el diseñador gráfico puede pasarse varias horas para escanearla y volver a trazar el diseño en limpio. Apiádese de ellos y llévele los archivos fuente que le entrego en su día a la imprenta.

Y si tiene un CD con la identidad corporativa de su empresa hecha por otro diseñador gráfico no dude en llevárselo, ni se imagina lo feliz que lo hará, animalito…

Ideas y bocetos:

El último punto y uno de las más importantes. Los diseñadores gráficos tienen deficiencias en su capacidad de comunicación y les falta ese sexto sentido para adivinar los gustos del cliente. Por ello tiene 2 alternativas:

-Dejar dar rienda suelta a la creatividad del diseñador gráfico. Por naturaleza seres tímidos a los que no les gusta mostrar sus ideas hasta que las terminan pero que suelen hacer un buen trabajo.

-O bien indicarle de forma precisa como quiere que sea el proyecto.

Esta última forma es conflictiva, recuerde los problemas de entendimiento y comunicación antes citados. Por lo cual, aunque usted le explique que quiere un diseño típico pero que represente a su empresa de fabricación de corcho teniendo un toque a las películas de Tarantino, es probable que no lo entienda.

Para ello son recomendables 2 cosas básicas:

-Entregarle referencias: Si ha visto un diseño que le gustó o la web de la competencia le parece fantástica, no dude en decírselo. De esa forma podrá dejar más claro sus gustos y le servirán de inspiración para los trabajos que le encargue. Eso sí, recuerde que son seres desconfiados y egocéntricos, normalmente se negaran a copiar con alevosía la referencia y solo la usaran para encontrar a sus propias musas.

-Prestar atención a lo que le dice y pregunta: Sé que son gente aburrida conversando y que preguntan cosas extrañas, como por ejemplo que sensaciones quiere que represente su logotipo o si tiene pensando algún color en particular. Usted, señor cliente, seguramente prefiera no tratar esos temas al principio para luego ir haciendo cambios sobre la marcha, incluso de un día para otro. Pero lo diseñadores gráficos, como gente desconfiada que son, prefieren tener las cosas claras antes de empezar a trabajar. Luego suelen ser gente comprensiva con los cambios pero tampoco abuse, dice la leyenda que un diseñador gráfico tras cambiar 80 veces un logotipo se volvió loco y mordió a un cliente, desde entonces cada noche de luna llena el cliente siente unas ganas insaciables de abrir Photoshop y borrar a su suegra de todas las fotos.

Si sigue estas normas seguramente consiga llevarse bien con esa rara especie incomprensible para muchos: el diseñador gráfico.

Por supuesto este texto es en tono humorístico que nadie se ofenda, sé que no todos lo cliente son así pero como decíamos en mi tierra: “haberlos haylos”.

En vista de que el inepto gobierno de España intenta hacer una reforma legislativa que permitiría cerrar sitios web sin autorización de un juez (censura pura y dura). No puedo dejar de unirme a este manifiesto que se está extendiendo con fuerza por la Red.

Ante la inclusión en el Anteproyecto de Ley de Economía sostenible de modificaciones legislativas que afectan al libre ejercicio de las libertades de expresión, información y el derecho de acceso a la cultura a través de Internet, los periodistas, bloggers, usuarios, profesionales y creadores de Internet manifestamos nuestra firme oposición al proyecto, y declaramos que:

• Los derechos de autor no pueden situarse por encima de los derechos fundamentales de los ciudadanos, como el derecho a la privacidad, a la seguridad, a la presunción de inocencia, a la tutela judicial efectiva y a la libertad de expresión.
• La suspensión de derechos fundamentales es y debe seguir siendo competencia exclusiva del poder judicial. Ni un cierre sin sentencia. Este anteproyecto, en contra de lo establecido en el artículo 20.5 de la Constitución, pone en manos de un órgano no judicial -un organismo dependiente del ministerio de Cultura-, la potestad de impedir a los ciudadanos españoles el acceso a cualquier página web.
• La nueva legislación creará inseguridad jurídica en todo el sector tecnológico español, perjudicando uno de los pocos campos de desarrollo y futuro de nuestra economía, entorpeciendo la creación de empresas, introduciendo trabas a la libre competencia y ralentizando su proyección internacional.
• La nueva legislación propuesta amenaza a los nuevos creadores y entorpece la creación cultural. Con Internet y los sucesivos avances tecnológicos se ha democratizado extraordinariamente la creación y emisión de contenidos de todo tipo, que ya no provienen prevalentemente de las industrias culturales tradicionales, sino de multitud de fuentes diferentes.
• Los autores, como todos los trabajadores, tienen derecho a vivir de su trabajo con nuevas ideas creativas, modelos de negocio y actividades asociadas a sus creaciones. Intentar sostener con cambios legislativos a una industria obsoleta que no sabe adaptarse a este nuevo entorno no es ni justo ni realista. Si su modelo de negocio se basaba en el control de las copias de las obras y en Internet no es posible sin vulnerar derechos fundamentales, deberían buscar otro modelo.
• Consideramos que las industrias culturales necesitan para sobrevivir alternativas modernas, eficaces, creíbles y asequibles y que se adecuen a los nuevos usos sociales, en lugar de limitaciones tan desproporcionadas como ineficaces para el fin que dicen perseguir.
• Internet debe funcionar de forma libre y sin interferencias políticas auspiciadas por sectores que pretenden perpetuar obsoletos modelos de negocio e imposibilitar que el saber humano siga siendo libre.
• Exigimos que el Gobierno garantice por ley la neutralidad de la Red en España, ante cualquier presión que pueda producirse, como marco para el desarrollo de una economía sostenible y realista de cara al futuro.
• Proponemos una verdadera reforma del derecho de propiedad intelectual orientada a su fin: devolver a la sociedad el conocimiento, promover el dominio público y limitar los abusos de las entidades gestoras.
• En democracia las leyes y sus modificaciones deben aprobarse tras el oportuno debate público y habiendo consultado previamente a todas las partes implicadas. No es de recibo que se realicen cambios legislativos que afectan a derechos fundamentales en una ley no orgánica y que versa sobre otra materia.

Parece que por fin podemos disfrutar de la versión final de Inkscape 0.47 tras 1 año y medio de desarrollo. Las novedades son muchas, siendo las más importantes:

• Autoguardado para no perder nunca trabajos.
• Curvas Spiro: Una novedosa forma de trabajar con gráficos vectoriales.
• Nuevos efectos.
• Herramienta Borrador.
• Nueva colección de filtros para imágenes.
• Corrector ortográfico en textos.
• Soporte para el formato SVG muy mejorado.
• Nuevas extensiones: Calendario, marcas de impresión, guías y atributos de interpolación.
• Mejoras en la exportación de los formatos EPS y PS.
• Muchos errores corregidos y pequeñas funcionales añadidas que mejorar la usabilidad.

Podéis descargar la nueva versión en la web de Inkscape:  inkscape.org

Para aprender a trabajar con este programa os vuelvo a recomendar el manual de Joaclint Istgud del que ya he hablado en esta entrada: Curso de Inkscape gratuito.

Checkmycolours es una herramienta que sirve para analizar los textos de una página web, comprobando si son legibles para cualquier persona. Lo hace comparando el contraste y luminosidad de los textos con el color de fondo. Algo que puede parecer trivial pero que muchas veces se nos olvida a los diseñadores web, pues nos concentramos en hacer un diseño atractivo y podemos acabar con textos difíciles de leer para personas con problemas de visión. Y aun entre las personas que ven bien, no es lo mismo leer un texto claro que uno capaz de cansarnos la vista con rapidez, motivo por el que podemos perder muchas visitas.

Por eso me ha parecido interesante esta herramienta, con Checkmycolours obtenemos de forma rápida un resumen de la legibilidad de los textos que tenemos en nuestro sitio web. Además, nos avisa cuando el contraste entre un texto y el fondo es insuficiente según el algoritmo propuesto por el W3C y nos permite hacer pruebas en tiempo real cambiando los colores.

Aparte hay que admitir que el creador ha conseguido una interfaz sencilla de usar y muy bonita a nivel gráfico.

Cada día son más las herramientas online que nos facilitan la vida pero de vez en cuando uno se encuentra pequeñas joyas que se vuelven imprescindibles. Es el caso de my Fontbook, uno de los mejores gestores de tipografías que he probado, siendo además gratuito y online. Por fin tenemos a mano una herramienta para visualizar y clasificar las fuentes instaladas desde cualquier navegador.

La interfaz del visor está basada en Ajax y resulta muy sencilla de manejar. Al entrar en my Fontbook por primera vez se cargaran las tipografías que tengamos instaladas (suele tardar unos minutos), luego podremos navegar entre ellas, probar textos concretos, poner etiquetas para tenerlas ordenadas, seleccionar las favoritas e incluso conocer datos técnicos sobre ellas. Otra opción muy útil que nos ofrece son las pruebas de impresión. Si seleccionas una tipografía y luego haces clic en el icono de la impresora nos saldrá una completa muestra de textos con esa tipografía a diferentes tamaños. Ideal para hacer pruebas de legibilidad en trabajos que mandaremos a imprenta.

Para usar algunas de estas opciones necesitaremos registrarnos, lo que no supone ningún problema pues es gratis y solo nos pide 3 datos. Vamos, una maravilla de herramienta que nos facilita mucho la vida a los diseñadores gráficos, acostumbrados a tener montones de tipografías acumuladas de anteriores proyectos.

Os dejo el vídeo donde el autor muestra su funcionamiento:

Siendo sinceros nunca espere gestionar mis tipografías de esta forma, un claro ejemplo de que la informática extiende rápidamente sus raíces hacía “la nube“, con las ventajas e inconvenientes que ello supone.

Cuando creamos un sitio web siempre debemos tener en cuenta como se adapta a diferentes resoluciones de pantalla. Existen herramientas que nos permiten hacerlo fácilmente, como por ejemplo la estupenda extensión Web Developer de Firefox, o también podemos cambiar a mano la resolución de nuestro escritorio aunque resulta una molestia.

Una alternativa rápida es ViewLike.us, un servicio web muy simple pero efectivo. Solo debemos de indicarle la dirección del sitio web  a probar y pulsar en el botón de la resolución deseada para que nos previsualice la web en un cuadro de ese tamaño mediante Ajax. Las resoluciones que nos ofrece son las más estandarizadas (incluyendo la Wii y el iPhone), aunque se echan de menos algunas panoramicas y sobretodo poder crear otras nuevas manualmente. No es la herramienta del año pero en ocasiones resulta útil.