Nueva asociación

fb_sumate[1]

Hace más de 10 años fui parte de la creación de una asociación de diseñadores gráficos. Si bien ya no participo activamente, no dejé de estar en contacto con los colegas que siguieron la gestación.

Hace unos años nos dieron la noticia de la obtención de la personería y hoy la Unión de Diseñadores Gráficos de Buenos Aires comienza a recibir asociados.

Para qué una asociación

Desde que empezó, la UDGBA albergó muchísimos debates sobre las distintas necesidades que tenemos los profesionales del diseño gráfico.

Esta asociación se propone:

  1. Valorizar, difundir y promover el diseño gráfico y a sus profesionales desde una organización que los represente como colectivo.
  2. Generar espacios que promuevan la participación y el intercambio entre colegas valorando la diversidad y la horizontalidad, es decir, apuntar a una asociación siempre abierta a la comunidad de diseñadores.
  3. Proyectar la organización hacia otros ámbitos de la sociedad, generando lazos y articulando con la academia, el estado, las cámaras empresariales y las organizaciones sociales.

Beneficios

Ahora en sus inicios ofrece unos pocos beneficios que seguramente se irán incrementando con el tiempo.

prepaga[1]El que más llamó la atención fue el de tener descuento aproximado del 50% en la prepaga Medicus.

Planes exclusivos para asociados activos de la UDGBA

La UDGBA y MEDICUS han firmado un acuerdo mediante el cual los asociados activos de la UDGBA pueden acceder a un beneficio que comprende la posibilidad de elegir entre cuatro opciones de plan de la prepaga, cada uno con su cartilla correspondiente, manteniendo las características de los planes de Medicus, pero con un descuento aproximado del 50%.

La diferencia entre cada plan radica en su valor y en la cantidad de centros y médicos con los que cuenta y el importe no cambiará en función de la edad del asociado.

Dentro del plan, el asociado de la UDGBA podrá incluir a su grupo familiar directo (conviviente o cónyuge, hijos/as, etc.) bajo los valores estipulados en los planes sin el requerimiento de que los mismos sean asociados a la UDGBA.

Los planes contemplan la posibilidad de derivar aportes de Obra Social, por empleo o monotributo. Estos planes no incluyen la modalidad de reintegros.

MEDICUS garantiza una atención personalizada, el acceso a todas las prestaciones y profesionales de la cartilla correspondiente de cada plan y la vigencia del acuerdo con la condición de que el titular del plan sea asociado activo de la UDGBA.

Cuota

Las modalidades de pago y los valores serán:

  • Asociado activo: $300 cuatrimestrales o $750 anuales
  • Asociado adherente: $200 cuatrimestrales o $375 anuales

Para asociarse

(Disponible desde el 27 de abril)

  1. Llenar el formulario en www.udgba.org.ar (Los datos enviados serán confidenciales y tendrán sólo un fin estadístico).
    Recibirás un correo electrónico con la bienvenida y los datos de la cuenta bancaria para transferir o depositar el valor de la cuota social.
  2. Luego de pagar la cuota, enviar el comprobante a socios@udgba.org.ar.
    Una vez confirmado, te enviarán el número de socio junto con información adicional de importancia.
    Para los asociados activos, se les informará el link en el cual podrán cargar su información profesional e imágenes de trabajos que luego serán publicadas en la Guía de Profesionales.

 

Seguramente sabremos más de esta asociación que comienza a funcionar a pleno. Desde este espacio saludamos a los colegas que lo hicieron posible: Nina Davidsohn, Sergio (elsebra) Braguinsky Carrera, Alejandro Cácharo, Federico Díaz Mastellone y Mauro Gullino, entre otros.

Sistema animal

Irene 20 Abr 2016 Dejá tu comentario

Las tapas con animales de la editorial O’Reilly son famosas entre los programadores y diseñadores web.
Personalmente soy fanática de este sistema.

Historia

brown_nutshell2

“Nutshell Handbooks” original

En los años 80, Tim O’Reilly vendía libros de Unix por correo. Cuando deciden empezar a venderlos en librerías, comienzan con un diseño que a Tim no le convencía.

En la búsqueda de una propuesta, Edie Freedman se encuentra con raras ilustraciones de animales del siglo 19, en una serie de libros y CD’s llamada Dover Pictorial Archives. Y creyó ver una relación entre esos extraños animales y los términos que a su oído sonaban tan extraños. Al investigar los atributos de los animales reales, descubrió que había llamativas correspondencias entre ciertas tecnologías y ciertos animales. Esa resonancia creció y se expandió mientras más leía sobre animales y tecnologías.

Loris usados en algunos de los primeros libros (sed & awk)

Cuando presentó la propuesta no todos la vieron con buenos ojos. Los animales les parecían extraños, feos y casi terroríficos. Pero a Tim le fascinó la propuesta, le resultaba evidente que iban a destacarse en los estantes de las librerías.

Algunos animales generaron rechazo, como la araña de “Webmaster in a nutshell” o la serpiente que aparecía en el sitio web, justamente en la página “cómo comprar”, que fue reemplazada por un conejo.

lorrie_animals2

Lorrie LeJeune Ilustradora

Las imágenes que se usaron pertenecen a todo el reino animal, desde grandes mamíferos como tigres y elefantes hasta peces, pájaros, insectos e invertebrados. Con el tiempo descubrieron que tenían mejor aceptación los animales con una cara reconocible y con la mirada puesta en el lector.

A través de la investigación, Edie Freedman -Directora creativa- y Karen Montgomery -Diseñadora de tapas- fueron tomando conciencia de la situación de los animales salvajes en el mundo.

Muchos de los que aparecían en las tapas estaban en peligro de extinción: el tarsero, el loris, la tortuga carey y el tigre por solo nombrar algunos. Desde el sitio animals.oreilly.com comparten información para concientizar sobre esta realidad.

Con el tiempo, Lorrie LeJeune fue quien pasó a realizar las ilustraciones a mano.

Tapas

Imagen https://www.quora.com/Why-does-perl-python-books-have-animal-pictures-on-it

 

El libro

OReilly animalsBuscando un libro en particular, me encuentro con que editaron un libro con las ilustraciones para colorear: The O’Reilly animals.

Parodias

En el propio sitio de O’Reilly podemos encontrar estas tapas parodiando algunas actitudes no muy destacables.

Fuente | O’Reilly animals | Archivo O’Reilly | Archivo O’Reilly | O’Reilly | Quora

OpenToonz: liberan el software de animación de Estudio Ghibli

OpenToonz

OpenToonz es la evolución de Toonz, un desarrollo de Digital Video en Italia. Este software de animación 2D, fue utilizado por el Estudio Ghibli desde La Princesa Mononoke.

Ahora Dwango lanza el proyecto OpenToonz, en cooperación con Digital VideoEstudio Ghibli. El objetivo es crear una nueva plataforma para el intercambio de conocimientos.

Desde El mundo secreto de Arrietty, Estudio Ghibli fue personalizando Toonz, para llegar a una versión más usable para su estilo de producción.

OpenToonz

Licencias y plataformas

Como OpenToonz, el software pasa a ser de código abierto (open source) y se comparte bajo una licencia BSD. Esto implica que cualquiera puede utilizarlo, incluso con fines comerciales.

OpenToonz es compatible con Windows 7 (o superior) de 64 bits y con OSX 10.9 (o superior).

Funcionalidades

Dentro de las funciones que incluye, está la herramienta de escaneo GTS, especializada en animación, desarrollada por el Estudio Ghibli. Esta función permite hacer 4 tipos de análisis (blanco y negro, color, binario/ no binario), guardar ajustes y reproducir procesos, además de ser compatible con los estándares TWAIN, entre otros. Por ahora esta funcionalidad está disponible solo para Windows.

GTS: herramienta de escaneo

Otro desarrollo, en este caso de parte de Dwango, es SDK, un plug-in para efectos en procesamiento de imágenes. Este plugin está disponible para Windows y OSX.

En el sitio de OpenToonz van a encontrar los links para bajarlos y los manuales, además de links a los espacios de debate de usuarios y desarrolladores.

Fuente: opentoonz.github.io

Grilla Flexbox: una perla del CSS3

fi-flexbox

Con el avance de las versiones de HTML y CSS, el diseño web va simplificando procesos.

Hasta hace poco la única manera de armar columnas era con float. Y la lógica era muy poco amable.

Desde hace unos años apareció flexbox, que ha ido cambiando la sintaxis. Ahora se ha estabilizado y los nuevos navegadores lo incluyen.

Este nuevo modelo de caja, organiza a los elementos hijos de esa caja horizontal o verticalmente.

Entonces ahora  al valor de la propiedad Display, se le suma flex:  display: flex o display: inline-flex.

csstricks2

CSS Tricks: A Complete Guide to Flexbox

Esta propiedad puede utilizarse en maquetado fijo, pero donde cobra mayor poder es en layouts líquidos o responsive.

Para empezar a usarlo, comparto con ustedes algunos recursos: un ejemplo mínimo, una guía de CSS Tricks que explica visualmente cada una de las opciones de flex que podemos usar, o bien pueden usar esta demostración en vivo para ver las diferentes capacidades. Por ejemplo, cambien el parámetro flex-wrap a wrap, y agranden el ancho. Van a ver como flotan los elementos y se acomodan en 2 líneas.

En Can I Use pueden ver el soporte que tiene según navegador y versión.

CanIuse-flexbox

Cine & diseño

Estas tres películas son sobre diseño. Y las tres del director Gary Hustwit.

  • Helvética (2007), documental independiente sobre tipografía, diseño gráfico y cultura visual global.
  • Objectified (2009), largometraje documental sobre nuestra compleja relación con los objetos manufacturados y las personas que los diseñan.
  • Urbanized (2011), documental sobre el diseño de las ciudades, hace foco en los problemas y las estrategias detrás del diseño urbano y cuenta con algunos de los más destacados arquitectos, planificadores y urbanistas del mundo.. Ver Urbanized online.

https://www.youtube.com/watch?v=uUSmT77mKxA

https://www.youtube.com/watch?v=kbU6qAxNwCQ

Más sobre este tema

Libro: Helvetica / Objectified / Urbanized: The Complete Interviews (inglés)

Libros, objetos y DVD’s

Ciudades caminables

Primeros automóviles en Buenos Aires, año 1904. Archivo General de la Nación Argentina – Documento Fotográfico. Inventario 215465

Allá por el año 1923, la ciudad de Cincinnati (Ohio) recibió una petición popular de 42.000 residentes para que se limite la velocidad de los automóviles a 25 mph (40 km/h).

Es que antes que el automóvil invadiera las ciudades, las calles tenían personas y vehículos lentos (carros, bicicletas). Pero luego de la aparición del auto en 1900 las muertes se hicieron cada vez más frecuentes.

En Cincinnati, la respuesta de los concesionarios de automóviles fue una gran campaña en medios para que la propuesta fuera rechazada.

Estos grupos influenciaron al gobierno nacional y lograron en 1928 una ley que impedía a las personas transitar libremente por el espacio público. Según el Modelo de Ordenanza Municipal de Circulación los peatones debían cruzar solo por donde se les indicaba. Pueden ver en el documento la desinteresada participación de asociaciones de automóviles y taxistas.

Como parte de esta campaña, se inventó el concepto de Jaywalking, que ridiculizaba a todo el que caminaba libremente.

jaywalking

El término “jaywalking” fue utilizado para poner el espacio público al servicio del automóvil

Hubo resistencia, jueces de Chicago y Nueva York defendían al peatón, por tener derechos previos, por ser superiores en cantidad. Es evidente quién ganó. Pero es interesante recordar que hubo una vez, hace tiempo en que todavía no se había naturalizado la dominación del automóvil.

https://www.youtube.com/watch?v=-AFn7MiJz_s

Para quienes estén interesados en el tema, comparto dos documentales (uno puede verse completo, el otro, el trailer y alquilar la película):

  • La escala humana (The human scale, Andreas Dalsgaard / Dinamarca / 2012)
  • Bikes vs. Cars (Fredrik Gertten, Fredrik Gertten / 2015 / Suecia)

https://www.youtube.com/watch?v=zkFgt80DUwU

Post inspirado en el evento Bicinéfilo, donde se proyectan algunos de estas pelíulas y cortos.

Más sobre este tema

‘Jaywalking’, o un poco de Historia sobre cruzar la calle de forma indebida, Circule seguro

The forgotten history of how automakers invented the crime of “jaywalking”, Joseph Stromberg (2015, inglés)

Jaywalking and the Invention of the Motor Age Street, Petern Norton (PDF – inglés)

Model Municipal Traffic Ordinance  (PDF – inglés)

WordPress: 10 plugins gratuitos geniales

WP jQuery Lightbox

Una herramienta que se ha hecho imprescindible en diseño web es el WordPress. Un CMS maravilloso, flexible y con una comunidad detrás que genera funcionalidades geniales. Esa batería de plugins es lo que hace tan maravilloso a este sistema. Comparto con ustedes 10 plugins básicos y geniales que uso.

  1. MenúResponsive Menu
    Con este plugin podés crear el menú de las 3 rayitas con poco esfuerzo. Es muy configurable e incluso permite pisar con tu CSS sus reglas.
    Podés decidir en qué breakpoint comienza a verse, cómo se ve el botón, como es la animación y desde qué lado, los colores de todos los elementos, niveles de navegación.
  2. SlideshowsCyclone Slider 2
    Hasta ahora el mejor y más completo plugin de slideshows que encontré, en su versión gratuita.

    • Responsive o ancho fijo
    • 5 themes diferentes (la version PRO tiene un par más)
    • varios slides en una misma página
    • link y caption (título y texto)
    • videos de Youtube y Vimeo
    • slide HTML
    • Contras: no permite fuente dinámica (posts), para gestos en dispositivos touch se necesita la versión PRO, la versión PRO se compra para cada sitio.
  3. FormularioContact Form 7
    Desde hace años se mantiene entre los mejores. Se pueden configurar varios formularios, incluso tiene elementos HTML5, se puede configurar la visualización del email de llegada, etc.
  4. IdiomasqTranslate X
    Indispensable un plugin para el manejo de idiomas. Muestra un tab por cada idioma, muy configurable.
  5. ImágenesWP jQuery Lightbox
    Visualización a mayor tamaño de imágenes en galerías o solas. Es responsive y responde a gestos en dispositivos touch.
  6. Redes SocialesSharify Social Share Buttons
    Para compartir los posts o páginas en las redes sociales, mandar por email, etc.
  7. PaginadoWP-PageNavi
    Agrega al pie un paginado muy fácil de configurar.
  8. Galería en forma de grillaResponsive Gallery Grid
    Permite mostrar una gallería en forma de grilla. Página demo.
  9. DesplegablesSection Page
    Permite agregar elementos drop-down con mucha facilidad.
  10. Widgets: Display widgets
    Permite mostrar y ocultar los widgets según la págin, categoría o para usuarios logueados.

Revuelta

Irene 3 Feb 2016 | 5 comentarios

badd
Hace 13 años comenzaba a escribir un blog sobre diseño y tecnología.
Empezó como un espacio propio para reflexionar, pero tuvo una gran e inesperada repercusión.
Los blogs comenzaban a ser un vehículo de intercambio y ese impulso hizo que Buenos Aires de Diseño explotara.
En los últimos años mi energía ha ido por otros caminos. Pero este año vuelvo a poner mi curiosidad al servicio del diseño y la innovación.
Con fuerzas renovadas, y con un compañero de ruta de lujo: Carlos Carpintero, docente, teórico e investigador del diseño se suma a este espacio.
Buenos Aires de Diseño cumple este mes 13 años y vuelve a la acción.

Curso de Diseño Responsive

El mes que viene voy a dar un curso de Diseño responsive. Es algo que me apasiona y que me piden, sobre todo los colegas.

Me interesa la capacitación en diseño web, creo que los diseñadores tenemos mucho campo en la web y para estar a la altura necesitamos espacios de aprendizaje.

Asi que si estás interesadx, sumate. Los grupos son reducidos, ¡no te lo pierdas!

La web actual demanda que nuestros diseños se adapten a cualquier dispositivo (móviles, tablets, notebooks, celulares, etc.)

El Responsive Web Design o Diseño Web Adaptable es una nueva técnica de diseño y desarrollo web que utiliza estructuras y elementos de tamaño variable. A través de condicionantes muestra diferentes visualizaciones del mismo sitio, según las dimensiones del dispositivo.

El desafío para los diseñadores es crear una interfaz que sea legible en cada dispositivo.

+ info

RWD-curso2015

Open Type en CSS 3

Ejemplo con algunas ligaduras activadas y desactivadas usando Magneta de Positype   -ver link más abajo.
Ejemplo con algunas ligaduras activadas y desactivadas usando Magneta de Positype.

En web, Open Type recién comienza a introducirse con la versión 3 de CSS.

¿Qué es Open Type?
El formato Open Type fue desarrollado por Adobe y Microsoft. Representa una mejora sobre los anteriores, PostScript y True Type, porque trabaja con el set completo de Unicode, que permite disponer de casi todos los símbolos (por ejemplo con fracciones no estándar) y casi todos los idiomas del mundo. Además permite un amplio uso de ligaduras. Mientras que las tipografías PostScript soportan 256 glifos, Open Type soporta más de 65.000. Y esto en un solo archivo: el .otf.
Algunos programas que aprovechan esta capacidad son Adobe InDesign y Photoshop.

Por ejemplo, para poder usar small-caps debo escribir en mi plantilla de estilos:

.smallcaps { font-feature-settings: "smcp" on; }

Puedo escribirlo de 3 maneras: "smcp" on, "smcp" 1 o simplemente "smcp".

Puedo activar m[as de uno simultáneamente: font-feature-settings: "liga", "smcp";.

Pero la implementación de CSS3 no es total y algunas características van siendo implementadas de a poco por los distintos navegadores.
Podemos ver en Can I use una tabla con los navegadores, sistemas operativos y versiones que soportan font-feature-settings.
Como todavía la implementación no es total, el código debo repetirlo con varios prefijos para que cada navegador lo tome:

-moz-font-feature-settings:"smcp" 1;
-ms-font-feature-settings:"smcp" 1;
-o-font-feature-settings:"smcp" 1;
-webkit-font-feature-settings:"smcp" 1;
font-feature-settings:"smcp" 1;

En este tester, podemos probar el funcionamiento de algunas características de Open Type y abajo nos indica qué código CSS3 utilizar.