Escrito por Analaura Antúnez
Leer entrevista completa: http://www.rldiseno.com/Entrevista-con-Fernando-Novelli-director-de-Magenta-Estudio-de-Comunicacion
Archive for the ‘Diseño’ Category
Imagen montevideana
23
Feb
El proyecto de diseño del sistema de identificación del Gobierno Departamental de Montevideo.
En el año 2006, la Intendencia Municipal de Montevideo realiza un llamado a licitación para el rediseño de su isologotipo y el desarrollo de un Programa de Identidad Institucional que normalizara el universo de aplicaciones de la entidad. En el brief proporcionado por el cliente se mencionaba la atomización de la comunicación, y la falta de coherencia en la resolución del vasto universo de aplicaciones de la marca, algunas con graves problemas funcionales, lo que redundaba en una escasa visibilidad e identificación de las mismas ante sus audiencias. Se presentaron nueve proyectos de diferentes estudios y agencias de publicidad, siendo la propuesta de i+D la seleccionada.
La propuesta se centró en dos aspectos claves, el primero, en el ámbito proyectual, consistió en la definición de un estilo visual concreto y propio, basado en la claridad y simpleza del diseño con el fin de lograr una fácil y rápida caracterización, permitiendo que el programa pudiera extenderse y cubrir un espectro muy amplio sin perder su centralidad y grado de integración.
El segundo aspecto fue una minuciosa estrategia de implantación que asegurara un óptimo desarrollo de la nueva identidad visual de la Intendencia.
El principal desafío fue desarrollar un sistema de identidad que pudiera incluir las muy diversas necesidades y facetas de comunicación de la Intendencia. La novedad de integrar dentro de la propuesta de identificación un sistema de pictogramas tiene como objetivo expandir estas posibilidades, tendiendo un puente entre ciudadanos e institución a través de un estilo que quiebra tanto con la solemnidad como con la complacencia de muchas de las comunicaciones de las instituciones gubernamentales del país. Los pictogramas, abandonando su neutralidad, plantean representaciones de los aspectos característicos de la ciudad y de la vida de los montevideanos, desde la cultura y la arquitectura, a la geografía y la música, pasando por el deporte y los servicios. Representaciones que apelan a la identificación y a la inclusión, a través de un clima distendido, lúdico y cómplice. La idea fue generar una herramienta para identificar, para situar y señalar, que a la vez fuera una propuesta desestructurada y optimista; una forma directa y original de ver, conocer y comprender la ciudad, de participar en ella.
Fuente: http://foroalfa.org/es/caso/16/Imagen_montevideana
HTML5: mejoras importantes en el lenguaje de la web
29
May
HTML son las siglas de HyperText Markup Language, el lenguaje de etiquetas de hipertexto que se utiliza para crear y poder visualizar los contenidos de las páginas web. Este no es un lenguaje estancado y definitivo, sino que a medida que va evolucionando internet se van exigiendo ciertas mejoras y la W3C regula todo su desarrollo.
Ahora Youtube nos sorprende con una versión de su página web creada con HTML5, a la que lógicamente sólo puede accederse para ver el contenido correctamente desde un navegador que soporte el nuevo lenguaje de marcas. Entre ellos, las versiones Beta de Firefox 3.5, Opera o Safari 3 servirán sin problemas.
En cuanto a las diferencias con la versión anterior, en la tabla de referencia de HTML5 propuesta por el W3C puede obtenerse un listado de todos los elementos disponibles, sus descripciones aclaratorias y si están o no definidos en HTML4 y HTML5. El desarrollador web aNieto2k publicó hace tiempo un artículo muy interesante en el que compara las novedades de la quinta versión del lenguaje con respecto a las anteriores. Habrá nuevos elementos para definir nuevas estructuras, como por ejemplo:
<article />: nueva etiqueta para definir bloques de contenidos que correspondan a artículos.<section />: definición de una sección del sitio.<dialog />: tag para definir diálogos y conversaciones entre varias personas.<video />y<audio />: para la inclusión de elementos de video y audio. Un ejemplo puede verse en la versión de Youtube en HTML5 que comentábamos anteriormente.<footer />: parte de la web donde podrá ir información sobre el autor, licencias de uso, condiciones… todo ese tipo de detalles que generalmente suelen colocarse en el pie de la web.<canvas />: espacio para gráficos generados en el momento de la visualización de la web.<time />: información sobre tiempos o fechas.<command />: para mostrar comandos que el usuario puede ejecutar.<progress />: implementación de una barra de progreso durante la realización de un proceso o tarea.
- …
Estos elementos y etiquetas también contienen ciertos atributos que también han sido mejorados, algunos de ellos eliminados y se han incorporado atributos nuevos en la definición de HTML5.
Como se puede observar, las nuevas etiquetas están definidas pensando también en la semántica de las páginas web, una evolución de la forma en que se realizan los sitios web que intenta dotar de significado útil para las personas todos los componentes y contenidos de una página.
Un ejemplo claro de a qué nos estamos refiriendo con el concepto de “web semántica” es plantearle a Google o a Yahoo la búsqueda “4+5” o “Hoteles en Zaragoza”. En ambos casos, el motor del buscador ha evolucionado hasta comprender que esas preguntas tienen un significado muy claro y piden una respuesta igualmente humana, y no simplemente una lista de páginas con coincidencias de los términos. En el primer caso, ambos responden directamente el cálculo de la suma de ambos números, entendiendo que se quiere realizar una operación matemática y no una búsqueda de palabas clave. En la segunda pregunta, responden con una lista de hoteles en la ciudad citada, con su localización exacta, páginas web, teléfono, precios, valoraciones y comentarios de otros usuarios.
Estas respuestas no obedecen realmente a los objetivos de la web semántica, ya que no utilizan realmente las tecnologías previtas para este nuevo paradigma sino que actualmente son solamente un guiño hacia una solución humana que una persona está buscando. Como comenta Alex Iskold en su artículos sobre mitos y realidades de la web semántica, el objetivo principal es que los usuarios podamos cambiar la forma en la que planteamos nuestras preguntas a una nueva forma totalmente humana, como por ejemplo: “¿Quién fue el presidente de los Estados Unidos entre los años 1993 y 2003?”. Y que la respuesta sea: “Bill Clinton hasta el 2001 y después George Bush”.
Ahora llega cuando la tecnología de los navegadores también avanza y poco a poco las nuevas versiones de los navegadores van soportando todos el nuevo lenguaje. Aunque, como siempre, unos antes que otros (léase Internet Explorer).
fuente: genbeta.com
Enlace | W3C – Guía breve de la web semántica
Enlace | HTML5
10 buenas ideas para tu blog sacadas de grandes blogs
04
May
Origen del post
Los llamados top blogs o grandes blogs son aquellos que vemos siempre primeros en los principales rankings. Y si bien no podemos llegar a ser como ellos en un día, al menos miremos que ideas nos pueden servir para nuestro blog.
Lo común y lo no común
Además de las características predefinidas por las estructuras de los blogs como colocar los tags al final de los posts, un sencillo buscador y el blogroll en el sidebar o en el footer, la mayoría de blogs seguimos esquemas muy similares. Muchos somos los que tenemos posts relacionados al final de cada post y top comentaristas en el sidebar. Otros ponen posts incompletos en la portada, estadísticas muy variadas en el sidebar, las categorías o páginas como un menú, nubes de tags, paginación numérica, un footer tamaño gigante para poner lo que no pueden o no quieren en el sidebar y un largo etcétera.
En este juego de plugins y widgets donde modificamos posts, sidebar y footer, muchas veces encontramos que la originalidad se ha perdido. No creo que hoy en día alguien se crea único por tener en su sidebar un buscador de Google y un traductor de su blog a otros idiomas. Ahora más que nunca las herramientas están más a la mano y muchos son los blogs que te ayudan a usarlas.
Bajo este contexto, lo común es eso común y lo poco común es lo que debemos buscar para realmente personalizar nuestro blog y hacerlo especial.
<!--more-->
10 ideas sacadas de top blogs
Esta lista está hecha de las cosas menos comunes que he encontrado, lo cual no necesariamente implica que sean los primeros ni los únicos en haberlas aplicado.
Para ver los ejemplos y mayores preguntas sobre su funcionamiento, dirigirse a los blogs enlazados 
- Microsiervos. Me gusta la sección que tienen en el pre-footer, llamada Enlaces de otras áreas temáticas microsiervas, donde en un par de categorías: Internet y Ciencia, aparecen enlaces a otros blogs fuentes de sus posts. Esta es una forma interesante de Link Love.
- Enrique Dans. Y muchos se preguntarán, que punto es rescatable de este blog?. Bueno, es interesante la forma en que ha logrado fusionar su identidad con la de su blog. Nada más miren la cabecera con su foto, las fotos de flicker, fotos suyas en los posts, sus artículos tan personales, es decir que si bien es un blog de tecnología no lo ha despersonalizado para nada. Al contrario, su sidebar dice mis fotos, mis fuentes diarias, cosas que leo, etc.
Lo que se logra con esto es que cuando la gente entre a su blog, no vea un blog, sino a su persona misma. Esto le ha válido para tener muchos seguidores, aunque también algunos detractores. - Mangas Verdes. Terminando cada post tiene los posts publicados hace exactamente un año, lo cual despierta la curiosidad de los lectores y reutiliza artículos que podrían quedar en el olvido. Esto es previo y complementario a los post relacionados que pone al final.
- Mangas Verdes. Después de los post del año anterior, se encuentra un buscador de posts por fecha, algo que normalmente no encontramos en un blog y que puede resultar muy útil.
- Mangas Verdes. Después del buscador de fechas, aparece una lista de las cuentas de Twitter que han twiteado el post actual, dando la posibilidad de enviarlo desde allí mismo. Esta opción es buenísima para obtener promoción en Twitter por parte de nuestros seguidores a cambio de la promoción de su cuenta en nuestro post. Muy buena idea.
- Mangas Verdes. En los comentarios, generar un enlace al último post del blogger que comenta. Esto implica que a cambio de un comentario, los demás lectores pueden fisgonear sobre lo último que ha escrito el comentarista y decidir si les interesa. Si bien, he visto esta modalidad en algún otro blog, sigue siendo una práctica muy poco utilizada.
- Loogic. Una sección de videos, donde agrega todos los videos que considera de interés para sus lectores y así se ahorra hacer posts sobre videos. Además los lectores al saber que existe dicha sección la visitarán con regularidad. Para esto se usa una lista de reproducción que se puede crear y administrar muy fácilmente en youtube.
- Martin Varsavky. Poner en portada y en la parte superior principal, las secciones de los más recientes y los más comentados. Algo muy elemental que siempre se pone en el sidebar y que pocos revisan, pero al ponerlo en el primer lugar visible aumenta las probabilidades de que el lector encuentre algo que le interese e incluso puede que abra varias pestañas. Usado por pocos.
- aNieto2K. Atentos a esto: miniposts semianónimos. Esta interesantísima forma de presentar posts, consiste en hacer un post en el que simplemente queremos difundir algún artículo interesante encontrado por ahí, pero que no da para un post entero. Entonces hacemos un minipost que aparentemente no tiene título pero sí lo tiene cuando accedemos a él(#) sólo que no se muestra en la portada. Simplemente genial.
- 86400. Un elemento distractor en la parte superior justo debajo de la cabecera. Este mensajito ingenioso no sólo llama la atención
y distingue su blog sino que también explica porque el nombre numérico de su blog.
Fuente: tensaiweb
http://tensaiweb.info/blog/10-buenas-ideas-para-tu-blog-sacadas-de-grandes-blogs/
¿Cómo hacer los textos más fáciles de leer?
22
Feb
Cuando se escribe, en ocasiones podemos tener la falsa creencia que las personas que leen nuestra información tienen conocimientos parecidos a los nuestros, y ésto no siempre es así, y sobre todo si lo que pretendemos es llegar al mayor número posible de lectores o usuarios (objetivo del 99.9% de los sitios web).
Esta claro que si nuestro Web trata de una temática específica es difícil hacer que la lectura sea fácil para cualquier persona. En mi caso concreto, ya no puedo tratar de explicar técnicamente como hacer una imagen accesible a una persona que no tiene conocimientos de html o de lenguajes de programación; pero si podría explicarle los beneficios que supone hacerlo y cual va a ser su resultado, porque quizás ésto si lo entienda todo el mundo.
Por tanto, la regla principal a la hora de redactar textos es que nos abstraigamos y nos pongamos en la piel de un usuario con los conocimientos más básicos posibles.
En nuestro ejemplo de la imagen accesible. Si yo fuera un usuario sin conocimientos de HTML no podría escribir algo así:
“Para hacer una imagen accesible debe usar el atributo alt de la etiqueta html img…”
No podría escribirlo porque sencillamente no tengo esos conocimientos. Pues eso es lo que nos vamos a encontrar si escribimos algo así, que sólo lo van a entender aquellas personas que tengan conocimientos HTML, el resto posiblemente se aburran y no vuelvan a visitar nuestro sitio Web porque se han dado cuenta de que no hay información que a ellos les interesa.
En cambio, si para tratar el tema de las imágenes accesibles escribo algo como ésto:
“Mediante la inserción de una breve descripción (alt) a la imagen conseguimos que cualquier persona pueda comprender la información transmitida por esa imagen…”
Un usuario con conocimientos en html, sabrá que existe una etiqueta img y que si usa su atributo alt para colocar la breve descripción está haciendo la imagen accesible. Por otra parte, otro usuario sin conocimientos html, sólo se va a quedar que es posible hacer una imagen accesible para cualquier persona, la forma de hacerlo no sabe cuál es, pero da igual si tampoco tiene conocimientos html, pero lo importante es que se le puede pasar una breve descripción a la imagen y de esta forma cualquier persona comprendería la información de esa imagen.
Según mi opinión, esta regla fundamental puede agrupar el conjunto de aspectos que hay que tener en cuenta a la hora de redactar textos. Algunos de esos aspectos pueden ser:
- Usar un lenguaje claro y conciso.
- Transmitir en cada párrafo una sola idea.
- No abusar de las sentencias en mayúscula.
- Usar un lenguaje familiar y cercano.
- No abusar de palabras pertenecientes a una determinada jerga.
- Hay que usar listas cuando sea necesario.
- Y por supuesto, utilizar una ortografía y gramática correcta.
Además, no se nos puede olvidar, que las Guías de Accesibilidad del Contenido Web nos exigen que los textos de los sitios Web sean legibles.
¿Pero esto de la legibilidad de los textos puede resultar un tanto subjetivo?Pues puede ser, pero existen diferentes algoritmos que nos miden la legibilidad de nuestros textos. Por ejemplo, uno de los que más me gustan y es más conocido (para textos en español) es el de Huerta Reading Ease. Para usarlo existe una herramienta llamada TxReadability que nos calcula la legibilidad de nuestros textos. Su puntuación va de 0 a 100, y se estima que se necesitan valores por encima de 60 para considerar que un texto es suficientemente legible.
Por cierto, este texto completo tiene una puntuación de 80.39 (Fácil de leer)
fuente: http://www.mqaccesibilidad.com
Paletas de colores para tus sitios
29
Nov
Colorbe otro practico sitio que nos ayudara a encontrar las paletas de colores ideales para usar en nuestros proyectos. El sitio posee un gran número de paletas diseñadas por usuarios las cuales podremos utilizar como referencia, o bien si nos animamos, podremos crear nuestras propias combinaciones para compartirlas luego con ellos. Si desean buscar algunos tonos específicos, es realmente simple, podemos hacerlo mediante el buscador de color u observando la nube de Tags que clasifica a cada uno de ellos, y ver si encontramos la gama de color que nos gustaría utilizar. Si damos con los colores deseados, los seleccionaremos y obtendremos uno por uno el Código Hexadecimal que forman esa paleta.
Enlace Colorbe
Buscador de juegos flash
17
Nov
GameCurry es un motor de búsquedas que rastrea los sitios de juegos e indexa todos los juegos flash. Podemos buscar por términos como “basketball” o por el nombre de los juegos. Sí, verán que puse “basketball” en vez de “básquetbol”. Por ahora busca en inglés. Estuve probándolo con diferentes términos en español y no anduvo bien con ninguno.
En la página de resultados nos vamos a encontrar con unas imágenes en miniatura de cada juego y si pasamos el cursor por arriba de ellas aparecerán las calificaciones y comentarios de los usuarios que nosotros también podemos hacer.
Enlace | GameCurry
Fuente | makeusof
APNG, graficos animados con calidad PNG
17
Nov
Cuando se habla de imágenes animadas enseguida se viene a la mente el formato GIF, un tipo de archivos que cumple con la función de mostrar movimiento pero que tiene limitantes muy grandes, como el hecho de no soportar transparencia en degradados o limitarse a exponer solo 256 colores.
Una muy buena alternativa a este formato la descubro gracias a wydstudios, se trata del formato aPNG (Animated Portable Network Graphics) un tipo de archivo que permite crear animación con las ventajas de los archivos PNGs (Soporte a transparencia en degradados y profundidad de color en 8 y 24 bits). En contra parte tiene algunas desventajas que no han ayudado a una rápida aceptación: un alto peso de los archivos, pocas herramientas para su creación y soporte limitado en los navegadores.
En este momento los únicos navegadores que soportan este tipo de animación son: KSquirrel 0.7.2, XnView 1.92, Opera 9.5 y Mozilla Firefox 3. Y puedes ver ejemplos y más información de este tipo de imágenes en el sitio oficial de este formato y en Mozilla Labs.
Algunas herramientas interesantes para trabajar con este formato son: APNG Assembler, una sencilla herramienta con la que puedes crear animaciones unicamente subiendo un archivo zip que contenga los pngs de la secuencia y APNG Edit extension una extesión para Firefox dedicada a editar y crear este tipo de gráficos.
A mi parecer, es un formato que promete mejorar en mucho la calidad de la animación gráfica pero que aun necesita desarrollo para adaptarse a las exigencias actuales (alta calidad con pocos recursos).
Fuente: Blog and Web