July 30, 2014

Cortar una imagen con una relación de aspecto definida: Darktable Vs. Gimp

A veces las cosas más fáciles son a las que menos les prestamos atención, y son estos trucos pequeños los que marcan la diferencia a la hora de editar rápidamente una imagen.

En el podcast de hoy, les daré una breve explicación sobre qué es la relación de aspecto, los tipos mas comunes para la fotografía, y como utilizarla. En el podcast está incluido el tutorial tanto en Darktable como en GIMP, ya que como siempre digo, lo bueno de Linux es la variedad.

Últimamente, cuando nos piden enviar un wallpaper a las distribuciones a las cuales colaboramos, uno de los requerimientos más importantes, mas allá del formato, es que tengan una relación de aspecto de 16:9. Es por eso que, si estás pensando colaborar con algún proyecto enviando tu wallpaper, que este pequeño tutorial de ayudará.

Espero que este tutorial les guste, y si además de eso también les gustó la imagen que se utilizó, no olviden darle click al post donde pueden encontrar los wallpapers de las avispas.

<iframe allowfullscreen="allowfullscreen" frameborder="0" height="315" src="http://www.youtube.com/embed/Be8_fBjpXUg" width="560"></iframe>

flattr this!

July 28, 2014

ColorZilla, recoge muestras de color en tu navegador

La gente de ColorZilla ha creado un par de plugines tanto para Chrome como para Firefox que te permiten tener un gotero integrado en tu navegador, y así, poder recoger muestras de color de forma fácil y rápida. Vamos, es como tener un kcolorchooser a un solo click de distancia.

screenshot2

 

ColorZilla incluye varias herramientas adicionales:

  • Cuentagotas - para obtener el color de cualquier pixel en la página
  • Una busqueda de colores similares.
  • Analiza los colores del elemento DOM en cualquier página Web
  • Generador de gradientes en CSS
  • Palette Viewer con 7 paletas preinstalados
  • Histórico de los colores escogidos recientemente
  • Información del elemento de la etiqueta, clase, Identificación, tamaño, etc
  • Manipular los colores por sus componentes / saturaciones / Valor Rojo / Verde / Azul o Hue.
  • Copia automática de los colores generados o muestreados en el portapapeles en CSS RGB, Hex y otros formatos.
  • Atajos de teclado para el muestreo rápido colores de la página.
  • Características adicionales

screenshot1

Si eres un diseñador y siempre necesitas revisar los colores con el inspector de código de tu browser, esta será una fácil y rápida solución para tu flujo de trabajo diario.

flattr this!

July 27, 2014

Updates with GlitterGallery

Personally, I’ve troubled with illness for a while now. College has started and time has gotten scarce. However, work on GG is going great as usual. As usual, I’d recommend running through the demo hosted at http://glittery-banas.rhcloud.com, since design work is only best experienced.

For Fedora folks following the projects, I’d like to mention some highlights.

For starters, now we have a remember me, because a couple of people said it’s trouble having to enter login credentials every time they’re on a new instance of their browser. Of course, it’s optional; only meant to aid you. We’re facing trouble with the 3rd party login, which suddenly seems to have broken. Paul is investigating it at the moment.

Login page

I’ve improved the toolbars on Project and User project. They’re slight changes to the transitions and the active element is now highlighted properly.

Toolbars

Paul recently rolled out the server side stuff for GlitterGallery Issues. I’ve also given it some front-end polish. Here’s some screenies:

Issues New

Issues List

Other areas I’m currently working on:

  1. Slideshow display for project images (80% complete)
  2. Multiple uploads for project components (50% complete)
  3. OpenShift QuickStart (stuck)

July 24, 2014

Shortcodes Ultimate, un plugin para todo.

Una de las razones por las que utilizo WordPress como CMS es la facilidad, comodidad y versatilidad que me provee a la hora de publicar. Desde que migré a WP no me preocupo de actualizaciones, y escribir se ha convertido en un placer más que en una obligación; y de vez en cuando, aparecen plugines como Shortcodes Ultimate que hacen la experiencia aún mejor.

 Este plugin provee un mega-pack de shortcodes con el que puedes crear etiquetas, sliders, cajas, botones y mucho más. Si eres de esas personas que les gusta tener un artículo con un poco de interactividad, este es el plugin que debes instalar.

Este plugin también tiene una versión paga con la cual puedes conseguir más mejoras. La lista completa de mejoras que incluye la versión gratis de este plugin son:

screenshot-2

  • Servicios
  • Cajas
  • Notas
  • Secciones privadas
  • Youtube
  • Vimeo
  • Audio
  • Video Embedido
  • Tablas
  • Permalinks
  • Membresía
  • Invitados
  • RSS
  • Menú
  • Sub-páginas
  • Documentos
  • Mapas
  • Slider
  • Carrusel
  • Galería
  • y más!

flattr this!

July 23, 2014

Here’s a low-barrier way to help improve FLOSS apps – AppStream metadata: Round 1

UPDATE: This program is full now!

We are so excited that we’ve got the number of volunteers we needed to assign all of the developer-related packages we identified for this round! THANK YOU! Any further applications will be added to a wait list (in case any of the assignees need to drop any of their assigned packages.) Depending on how things go, we may open up another round in a couple of weeks or so, so we’ll keep you posted!

Thanks again!!

– Mo, Ryan, and Hughsie


appstream-logo

Do you love free and open source software? Would you like to help make it better, but don’t have the technical skills to know where you can jump in and help out? Here is a fantastic opportunity!

The Problem

There is an cross-desktop, cross-distro, Freedesktop.org project called AppStream. In a nutshell, AppStream is an effort to standardize metadata about free and open source applications. Rather than every distro have its own separate written description for Inkscape, for example, we’d have a shared and high-quality description of Inkscape that would be available to users of all distros. Why is this kind of data important? It helps free desktop users discover applications that might meet their needs – for example, via searching software center applications (such as GNOME Software and Apper.)

Screenshot of GNOME Software showing app metadata in action!

Screenshot of GNOME Software showing app metadata in action!

Running this project in a collaborative way is also a great way for us to combine efforts and come up with great quality content for everyone in the FLOSS community.

Contributors from Fedora and other distros have been working together to build the infrastructure to make this project work. But, we don’t yet have even close to full metadata coverage of the thousands of FLOSS applications we ship. Without metadata for all of the applications, users could be missing out on great applications or may opt out of installing an app that would work great for them because they don’t understand what the app does or how it could meet their needs.

The Plan

Ryan Lerch among other contributors have been working very hard for many weeks now generating a lot of the needed metadata, but as of today only have roughly 25% coverage for the desktop packages in Fedora. We’d love to see that number increase significantly for Fedora 21 and beyond, but we need your help to accomplish that!

Ryan, Richard Hughes, and I recently talked about the ongoing effort. Progress is slower than we’d like, we have less contributors than we’d like – but it is a great opportunity for new contributors, because of the low barrier to entry and big impact the work has!

So along that line, we thought of an idea for an ongoing program that we’d like to pilot: Basically, we’ll chunk the long list of applications that need the metadata into thematic lists – for example, graphics applications, development applications, social media applications, etc. etc. Each of those lists we’ll break into chunks of say 10 apps each, and volunteers can pick up those chunks and submit metadata for just those 10.

The specific metadata we are looking for in this pilot is a brief summary about what the application is and a description of what the application does. You do not need to be a coder to help out; you’ll need to be able and willing to research the applications in your chunk and draft an openly-licensed paragraph (we’ll provide specific guidelines) and submit it via a web form on github. That’s all you need to do.

This blog post will kick off our pilot (“round 1″) of this effort, and we’ll be focusing on applications geared towards developers.

Your mission

If you choose to participate in this program, your mission will be to research and write up both brief summaries about and long-form descriptions for each of ~10 free and open source applications.

You might want to check out the upstream sites for each application, see if any distros downstream have descriptions for the app, maybe install and try the app out for yourself, or ask current users of the app about it and its strengths and weaknesses. The final text you submit, however, will need to be original writing created by you.

Specifications

Summary field for application

The summary field is a short, one-line description of what the application enables users to do:

  • It should be around 5 – 12 words long, and a single sentence with no ending punctuation.
  • It should start with action verbs that describe what it allows the user to do, for example, “Create and edit Scalable Vector Graphics images” from the Inkscape summary field.
  • It shouldn’t contain extraneous information such as “Linux,” “open source,” “GNOME,” “gtk,” “kde,” “qt,” etc. It should focus on what the application enables the user to do, and not the technical or implementation details of the app itself.
Examples

Here are some examples of good AppStream summary metadata:

  • “Add or remove software installed on the system” (gpk-application / 8 words)
  • “Create and edit Scalable Vector Graphics images” (Inkscape / 7 words)
  • “Avoid the robots and make them crash into each other” (GNOME Robots / 10 words)
  • “View and manage system resources” (GNOME System Monitor / 5 words)
  • “Organize recipes, create shopping lists, calculate nutritional information, and more.” (Gourmet / 10 words)

Description field for application

The description field is a longer-form description of what the application does and how it works. It can be between 1 – 3 short paragraphs / around 75-100 words long.

Examples

Here are some examples of good AppStream description metadata:

  • GNOME System Monitor / 76 words:
    “System Monitor is a process viewer and system monitor with an attractive, easy-to-use interface.

    “System Monitor can help you find out what applications are using the processor or the memory of your computer, can manage the running applications, force stop processes not responding, and change the state or priority of existing processes.

    “The resource graphs feature shows you a quick overview of what is going on with your computer displaying recent network, memory and processor usage.”

  • Gourmet / 94 words:
    “Gourmet Recipe Manager is a recipe-organizer that allows you to collect, search, organize, and browse your recipes. Gourmet can also generate shopping lists and calculate nutritional information.

    “A simple index view allows you to look at all your recipes as a list and quickly search through them by ingredient, title, category, cuisine, rating, or instructions.

    “Individual recipes open in their own windows, just like recipe cards drawn out of a recipe box. From the recipe card view, you can instantly multiply or divide a recipe, and Gourmet will adjust all ingredient amounts for you.”

  • GNOME Robots / 102 words:
    “It is the distant future – the year 2000. Evil robots are trying to kill you. Avoid the robots or face certain death.

    “Fortunately, the robots are extremely stupid and will always move directly towards you. Trick them into colliding into each other, resulting in their destruction, or into the junk piles that result. You can defend yourself by moving the junk piles, or escape to safety with your handy teleportation device.

    “Your supply of safe teleports is limited, and once you run out, teleportation could land you right next to a robot, who will kill you. Survive for as long as possible!”

Content license

These summaries and descriptions are valuable content, and in order to be able to use them, you’ll need to be willing to license them under a license such that the AppStream project and greater free and open source software community can use them.

We are requesting that all submissions be licensed under the Creative Commons’ CC0 license.

What’s in it for you?

Folks who contribute metadata to this effort through this program will be recognized in the upstream appdata credits as official contributors to the project and will also be awarded a special Fedora Badges badge for contributing appdata!

appstream

When this pilot round is complete, we’ll also publish a Fedora Magazine article featuring all of the contributors – including you!

Oh, and of course – you’ll be making it easier for all free and open source software users (not just Fedora!) to find great FLOSS software and make their lives better! :)

Sign me up! How do I get started?

help-1

  1. First, if you don’t have one already, create an account at GitHub.
  2. In order to claim your badge and to interact with our wiki, you’ll need a Fedora account. Create a Fedora account now if you don’t alrady have one.
  3. Drop an email to appstream at lists dot fedoraproject [.] org with your GitHub username and your Fedora account username so we can register you as a contributor and assign you your applications to write metadata for!
  4. For each application you’ll need to write metadata for, we’ve generated an XML document in the Fedora AppStream GitHub repo. We will link you up to each of these when we give you your assignment.
  5. For each application, research the app via upstream websites, reviews, talking to users, and trying out the app for yourself, then write up the summary and description fields to the specifications given above.
  6. To submit your metadata, log into GitHub and visit the XML file for the given application we gave you in our assignment email. Take a look at this example appstream metadata file for an application called Insight. You’ll notice in the upper right corner there is an ‘Edit’ button – click on this, edit the ‘Summary’ and ‘Description’ fields, edit the copyright statement towards the very top of the file with your information, and then submit them using the form at the bottom.

Once we’ve received all of your submissions, we’ll update the credits file and award you your badge. :)

If you end up commiting to a batch of applications and end up not having the time to finish, we ask that you let us know so we can assign the apps to someone else. We’re asking that you take two weeks to complete the work – if you need more time, no problem, let us know. We just want to make sure we reopen up assigned apps for others to join in and help out with.

Let’s do this!

Ready to go? Drop us a line!

July 21, 2014

Herramientas OpenSource para Edición de Videos

La edición de videos se ha convertido en una actividad cotidiana tanto para quienes lo realizan de forma profesional, como para quienes lo consideran solo un hobby. ¿Cuantos de nosotros no hemos querido mejorar la iluminación de un video o simplemente cortarlo y unirlo luego? Son muchas las cosas que podemos hacer cuando hablamos de edición. Lo bueno de trabajar con herramientas OpenSource es que la variedad siempre será una constante. Acá algunas de las aplicaciones para la Edición de Videos más utilizadas:

Kdenlive: Del acrónimo KDE Non-Linear Video Editor, es un editor no lineal bastante cómodo, y probablemente la primera opción para muchos. Pese a su sencillez permite una manipulación completa de tu video sin lagearse o crashearse. Es el que utilizo siempre para realizar mis podcast (al menos hasta que otra opción le robe el puesto)

OpenShot: Una de las cosas que me gusta de esta aplicación son sus efectos. Mostrados de una forma bastante gráfica (casi rayando en un instagram) agregar efectos es tan fácil como arrastrar y soltar. Si buscas una app para editar videos con efectos a lo instagram, esta debería ser tu elección.

Pitivi: Esta es una de esas aplicaciones de las que esperamos grandes cosas. PiTiVi permite renderizar, importar y exportar videos con capacidades básicas de edición; sin embargo, han contratado a un estudiante gracias a GSoC para que agregue efectos. Esperemos que todo les salga bien y tengamos una excelente app de edición en un futuro no muy lejano.

Avidemux: Esta aplicación es el equivalente a edición de negativos de los videos. Es posiblemente la única aplicación que literalmente corre sobre cualquier cosa. Permite edición y filtros. Por muy potente que sea, su interfaz sigue siendo una de las menos atractivas de la lista.

Existen muchas otras apps, tales como Lives, Cinelerra, Lombard, LightWorks, Kino y hasta Blender; lo importante es conocer la variedad y poder escoger. Por los momentos, mi favorita sigue siendo Kdenlive. Esta app ha demostrado ser útil y estable con el tiempo. ¿Qué opinan ustedes? ¿Cual es su preferida? ¿Cual me faltó?

flattr this!

July 16, 2014

Iconos Isométricos en Inkscape (Podcast y Pack de Iconos!)

¿Te has preguntado como se hacen esos iconos que simulan perspectiva? Pues acá está la respuesta!!!

La perspectiva axonométrico es aquella en la que se simula volumen utilizando tres planos que corresponden a altura, anchura y longitud. Como toda perspectiva, tendremos diversas representaciones prácticas, las cuales corresponden más que todo al punto de visualización del elemento tridimensional que queremos plasmar en el plano 2D. Aunque existen diversos tipos, para este podcast trabajaré con la perspectiva Isometrica,en la que la perspectiva es equitativa en todos sus ángulos. Si quieres conocer un poco más sobre los tipos de perspectiva Axonométrica, solo mira el podcast ;).

Subtitulos en español

<iframe allowfullscreen="allowfullscreen" frameborder="0" height="315" src="http://www.youtube.com/embed/NOsXxYnb3JM" width="560"></iframe>
URL: https://www.youtube.com/watch?v=NOsXxYnb3JM

En este slideshow puedes ver los tres pasos principales para trabajar con tu perspectiva isométrica en Inkscape.

Paso 1 para iconos isométricos

Y como hay que compartir, he realizado un pequeño pack de iconos isométricos de diversas cajas, los cuales espero que les gusten. Este pack contiene las siguientes figuras:

  • Caja de embalaje
  • Caja para transportar mascotas
  • Caja de regalos
  • Caja de madera sellada
  • Guacal (Caja de madera abierta)
  • Cabina telefónica londinense
  • Cartón de jugo
  • Caja de herramientas
  • Cubos de lego
  • Tardis

Como creo en que debemos compartir las fuentes (a menos que sea trabajo) he colgado los packs de iconos en OpenClipart e Iconfinder. Pueden bajárselos, pero recuerden comentar y porqué no, enviarme un screenshot de donde los utilizaron!

Gracias a nuestros patrocinadores de esta semana! especialmente a cursorlibre.com

flattr this!

July 10, 2014

Wallpaper Motivacional: Sueña en grande y atrévete a fallar

Soy de las que usan wallpapers minimalistas pese a que más de una vez me ha tocado hacer algunos con más elementos, así mismo, soy amante de las referencias o citas. En este caso quise dejarles un sencillo wallpaper motivacional bien simple con un mensaje que los invita a seguir soñando, a seguir tratando… fallar no es el final. La cita es de Norman Vaughan, un deportista olímpico que recorrió la Antártida a los 89, escribió libros y nunca renuncio a sus sueños por un poco de comodidad.

sueña en grande y atrevete a fallar
Full Resolución 2880 x 1800: https://www.dropbox.com/s/kqxknj332z5kk2c/suena-atrevete.png

flattr this!

July 09, 2014

Como crear letras con textura de piedra con GIMP e Inkscape

Primero que nada, quiero tomarme unas líneas para agradecerles por su apoyo. Cuando realicé el video solicitando su ayuda para poder continuar con los podcast no pensé que recibiría tanta receptividad. Hoy, a una semana de iniciar las campañas en Patreon, Flattr y Paypal ya se han recibido 2 donaciones y más de 10 mensajes de apoyo! Los podcast son posibles gracias a su generosidad, la cual me permite dedicar mi tiempo a generar contenido explícito y de calidad, basado en sus solicitudes e ideas. Nuevamente, gracias por creer en este proyecto… y si no saben de lo que hablo, den click aquí!

El video de hoy será un tutorial para darle textura de piedra a tus tipografías. Hay diversos métodos, pero soy una fiel creyente de que las cosas hay que simplificarlas, por lo que el proceso de hoy se realizará con ambas herramientas para que puedan comparar y sacar sus propias conclusiones. Vamos a por ello!

<iframe allowfullscreen="allowfullscreen" frameborder="0" height="315" src="http://www.youtube.com/embed/tuShX_GjtaI" width="560"></iframe>

Ahora, si quieres revisar rápidamente este tutorial, he agregado un par de slideshows para que puedas el paso a paso de cada herramienta. Recordemos que GIMP es un editor de Bitmaps,mientras que Inkscape es un editor vectorial. Aunque adoro GIMP, cuando tengo que hacer diseños que “pueden” ser impresos, prefiero utilizar Vectores, ya que me permitirán redimensionar mi arte sin perder calidad. Sin embargo,lo bueno es que siempre tendremos formas diferentes de hacer todo, así que da un vistazo y cuéntame cual proceso te agradó más!

Como crear letras con textura de piedra con GIMP

Texto con Textura de Piedra con Gimp

 
 
 

Como crear letras con textura de piedra con Inkscape

Texto con textura de piedra en Inkscape

flattr this!

July 07, 2014

Cambiar el logo para cada Idioma con mQtranslate

Y si… seguimos con mQtranslate, pero con cada cosa que me encuentro en el camino, prefiero bloguearla que dejarla en el olvido. Esta vez toca agregar un logo diferente para cada idioma cuando utilizamos mQtranslate, al menos es algo curioso que me han pedido mis clientes… también a ustedes?

Este tutorial es mucho más sencillo que el tutorial anterior de mQtranslate, solo deben agregar la siguiente instrucción a su header en donde la instrucción que pide el logo está:

<?php
if(qtrans_getLanguage() == ‘eu’){
echo ‘<a href=”#top”><img src=”/wp-content/uploads/2014/06/eu-logo-eu.png”></a>’;
}
if(qtrans_getLanguage() == ‘es’){
echo ‘<a href=”#top”><img src=”/wp-content/uploads/2014/06/logo-europa.png”></a>’;
}
?>

Y presto… con esto están listos. Yo subo las imagenes al mismo wordpress ya que hay ciertos clientes que son recelosos con dar acceso al servidor (no en este caso, pero me ha pasado antes) por lo que hay que ingeniarse soluciones. Una vez que subes las imagenes, obtén la url y elimina el dominio manteniendo todo lo demás, esa será la url que utilizarás.

logos

Sé que es un tutorial sencillo, pero estoy 100% segura de que se me va a olvidar, así que acá quedará como un post-it digital para la posteridad!

flattr this!

July 02, 2014

Anaconda Crash Recovery

Whoah! Another anaconda post! Yes! You should know that the anaconda developers are working hard at fixing bugs, improving features, and adding enhancements all the time, blog posts about it or not. :)

Today Chris and I talked about how the UI might work for anaconda crash recovery. So here’s the thing: Anaconda is completely driven by kickstart. Every button, selection, or thing you type out in the UI gets translated into kickstart instructions in memory. So, why not save that kickstart out to disk when anaconda crashes? Then, any configuration and customization you’ve done would be saved. You could then load up anaconda afterwards with the kickstart and it would pre-fill in all of your work so you could continue where you left off!

However! Anaconda is a special environment, of course. We can’t just save to disk. I mean, okay, we could, but then we can’t use that disk as an install target after restarting the installer post crash because we’d have to mount it for reading the kickstart file off of it! Eh. So it’s a bit complicated. Chris and I thought it’d be best to keep this simple (at least to start) and allow allow for saving the kickstart to an external disk to avoid these kind of hairy issues.

Chris and I talked about how it would be cool if the crash screen could just say, “insert a USB disk if you’d like to save your progress,” and we could auto-detect when the disk was inserted, save, and report back to the user that we saved. However, blivet (the storage library used by anaconda) doesn’t yet have support for autodetecting devices. So what I thought we could do instead is have a “Save kickstart” button, and that button would kick off the process of searching for the new disk, reporting to the user if they still needed to insert one or if there was some issue with the disk. Finally, once the kickstart is saved out, it could report a status that it was successfully saved.

Another design consideration I talked over with bcl for a bit – it would be nice to keep this saving process as simple as possible. Can we avoid having a file chooser? Can we just save to the root of the inserted disk and leave it at that? That would save users a lot of mental effort.

The primary use case for this functionality is crash recovery. It crashes, we offer to save your work. One additional case is that you’re quitting the installer and want to save your work – this case is rarer, but maybe it would be worth offering to save during normal quit too.

So here are my first cuts at trying to mock something out here. Please fire away and poke holes!

So this is what you’d first see when anaconda crashes:
00-CrashDialog

You insert the disk and then you hit the “Save kickstart” button, and it tries to look for the disk:
01-MountingDisk

Success – it saved out without issue.
02A-Success

Oooopsie! You got too excited and hit “Save kickstart” without inserting the disk.
02B-NoDiskFound

Maybe your USB stick is bricked? Something went wrong. Maybe the file system’s messed up? Better try another stick:
02C-MountingError

Hope this makes sense. My Inkscape SVG source is available if you’d like to tweak or play around with this!

Comments / feedback / ideas welcomed in the comments or on the anaconda-devel list.

July 01, 2014

On Wiki Loves Earth Brasil 2014
I was invited to be a member in the jury for the Wiki Loves Earth 2014 photography contest in Brasil and I joined gladly: it was both a honor and an opportunity to see some places which otherwise I don't expect to see any time soon. Also it was an opportunity to share from my experience with 3 editions already of the similar Wiki Loves Monuments in Romania. Now, as the Brasilian contest has published its winners, I want to share a few conclusions.First, it was a success from any point of view, from the impressive number of images (around 7000), to the exposure the team managed to receive, with presences on the most important technology and photography magazines and portals in the country. Then, a lot of impressive places I wish I could see in person, a good selection of winners and a first place image I really like and envy the photographer who took it.
Amanhecer no Hercules --
'Amanhecer no Hercules' by Carlos Perez Couto, CC-BY-SA, winner of WLE 2014 Brasil

Unfortunately, nothing is perfect and I have a couple of pet peeves about the contest. First, not once I found myself shouting in my head 'They didn't hear of the rule of thirds in Brasil?' I saw too many otherwise nice pictures with the horizon line cutting the image in half for no good reason, which could be way better with a 'correct' composition. Second, I had the feeling some participants misunderstood the purpose of Wikimedia Commons and sent unedited images: is OK to upload thereedited images as long as you do not change the reality. I encountered a lot of photos which can easily be improved with a few simple edits: framing (crop and/or rotation), color/exposure adjustments (curves, levels, brightness, saturation), sharpening and such. Some photos could made the top 10 if they had be edited as such. Fortunately, grace to the license, such improvements can be made at a later date by any contributor.
Still, the Wiki loves Earth 2014 contest didn't end: is still ongoing in a few other countries and will conclude with an international contest. Best of luck to all participants! Have good photos and all of us will win (including myself as an ordinary Wikipedia user).

June 30, 2014

Agregar selector de idiomas de mQtranslate al header

Luego de que migré todos mis sitios y los de mis clientes a mQtranslate, hay ciertas cosas que hay que agregar a mano cuando trabajas con Páginas Principales personalizadas, una de ellas es agregar el selector de idiomas a la cabecera.

El proceso, como siempre es bastante simple, así que vamos a por el. Lo primero es agregar la instrucción al header, que será la que muestre los idiomas:

<?php qtrans_generateLanguageSelectCode(); ?>

Luego de ello, solo tenemos que darle estilo. Les recomiendo que de una agreguen en el css las etiquetas con los idiomas que utilizarán, ya que por ahora, no encontré una forma de aregar automáticamente la variable del idioma a la etiqueta css sin utilizar jquery (Si conocen una, me la hacen llegar).

qtrans_language_chooser {
display: inline;
list-style: none;
float: right;
margin-top: 10px;
}

.lang-eu {
background: rgb(62, 129, 214);
border-radius: 20px;
padding: 5px;
}

.lang-es {
background: rgb(62, 129, 214);
border-radius: 20px;
padding: 5px;
margin-bottom: 4px;
}

.lang-es a, .lang-eu a {
color: #ffffff;
font-family: ‘Patua One’, cursive;
text-align: center;
}

Como ven, es bastante sencillo, y con un buen estilo la cosa no se ve tan fea. Para este ejemplo utilicé la forma de iconos redondos (con border-radius) y del color del theme, lo bueno es que, como no son imagenes, pueden darle todo el estilo que quieran.

header-lang

Otra forma que tienen es la de agregar un widget en el header y desde el admin, colocar la caja de mQtranslate; sin embargo, este es otro método en caso de que no quieran que sus usuarios anden tocando a cada rato el box. Las formas sobran, pero en mi caso (y quizás más por curiosidad que por otra cosa), decidí agregar el php y así, conocer un poco más el funcionamiento interno de mQtranslate. La curiosidad es la que nos hace aprender algo diferente todos los días.

flattr this!

June 28, 2014

Gathering a list of tutorial for Design Suite
Design Suite Live Spin has a shortcut for a list of tutorials related to graphical art and visual studio. The actual link is on http://fedoraproject.org/wiki/Design_Suite/Tutorials which needs more links for tutorials using free and open source tools.

June 25, 2014

Agregar áreas de widgets personalizadas a tu theme de WordPress

Una de las cosas mas básicas que se hacen al crear un theme de WordPress es agregar áreas de Widgets personalizadas y muchas veces, terminamos construyendo un theme completo a punta de estos. El procedimiento para agregar un sidebar es el siguiente:

Abrimos el archivo functions.php y ubicamos la siguiente línea:

if (function_exists('register_sidebar')) {

Luego agregamos lo siguiente:

register_sidebar(array(
'name'=> 'Nombre Del Widget',
'id' => 'codigo-del-widget',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));

screenshot2

Donde “Nombre del Widget” será el nombre que se mostrará en el admin y “codigo-del-widget” será el que utilizaremos para incluir en el php del theme como tal.

screenshot1

Ahora solo resta agregarlo dentro de nuestro theme, en mi caso, lo necesitaba para mostrar un mapa de ubicación de los posts publicados dependiendo de la ubicación de cada autor. La instrucción básica para agregar dicha área de widget es la siguiente:

<?php if (!function_exists('dynamic_sidebar') || 
!dynamic_sidebar('codigo-del-widget')) : ?>
<?php endif; ?>

Recuerda agregarle algún tipo de estilo para que no salga descuadrado, y con esto ya tendrás tu área de widget personalizada.

screenshot3

flattr this!

June 24, 2014

Fedora.next Branding Update

So we’ve gone through a lot of iterations of the Fedora.next logo design based on your feedback; here’s the full list of designs and mockups that Ryan, Sarup, and myself have posted:

That’s a lot of work, a lot of feedback, and a lot of iteration. The dust has settled over the past 2 weeks and I think from the feedback we’ve gotten that there is a pretty clear winner that we should move forward with:

Let’s walk through some points about this here:

  • F/G and H I think should both be valid logo treatments. I think that F/G is good for contexts in which it’s clear we’re talking about Fedora (e.g., a Fedora website with a big Fedora logo in the corner), and H is good for contexts in which we need to promote Fedora as well (e.g., a conference T-shirt with other distro logos on it.)
  • Single-color versions of F/G & H are of course completely fine to use as well.
  • F/G are exactly the same except the texture underneath is shifted and scaled a bit. I think it should be okay to play with the texture and change it up. We can talk about this, though.
  • Feedback seemed a bit divided about the cloud mark – it was about 50/50, folks liking it full height on all three bars vs. liking it with some of the bars shorter so it looked like a stylized cloud. I think we should go with the full-height version since it’s a stronger mark (it’s bolder and stands out more) and these are clearly all abstract marks, anyway.
  • Several folks suggested trying to replace the circles in version H with the Fedora speech bubble. I did play around with this, and Ryan and I both agreed that the speech bubble shape complicates things – it makes the marks inside look off-center when they are centered, and it also creates some awkward situations when the entire logo has to interact with other elements on a page or screen, so we thought it’d be better to keep things simple and stick with a simpler shape like a circle.
  • We’ll definitely build some official textures using the pattern in F/G and make them available so you can use them! Ryan has a very cool Inkscape technique for creating these so I’m still hoping to make a screencast showing how to do it.
  • Did I forget a particular point you brought up and would like some more discussion about? Let me know.

We’ll definitely need some logo usage guidelines written up and we’ll have to create a supplemental logo pack that can be dispensed via the logo at fedoraproject.org logo queue. Those things aren’t quite ready yet – if you want to help with that, let us know at the Fedora design team list or here in the comments.

Anyway, thanks for watching and participating in this process. It’s always a lot of fun to work on designs in the open with everyone like this :)

GG halfway through with redesign

We’ve reached about halfway with the GG redesign, so I’ve decided to share updates on this blog post. It’s basically design work, so the best way is to just try it out. Head over to http://glittery-banas.rhcloud.com, sign up for an account and give it a roll :) Some features may be hidden/removed for now, because we wanted to make sure what is visible is performing good.

Managed to capture the login page right in time to include the red nprogress loader :D

Login page

I wanted to make the onboarding experience smooth, so there’s guides that show up everywhere to help you around the system.

Dashboard

As you’d notice, there’s plenty of whitespace and big buttons to help you navigate without confusion. As you create new projects, widgets show up on the right to act as quick links to your recent projects. Notifications will be introduced next to projects soon :)

New Project

Here’s yet another example of a guide, helping a user understand what to do on a new project page.

Another example of a guide prompting the next action

Project files show up neatly in different columns - when I’m doing JS activity, I’ll try to make it pinterest style.

Freshly created project page

Also, I’ve tinkered a little with the User & project settings, introducing more UI elements.

Settings page

So go ahead and give it a try - http://glittery-banas.rhcloud.com. As usual, remember to report issues into the issue tracker :)

June 22, 2014

Status of Fedora 21 Supplemental Wallpaper

The submission phase for the supplemental wallpaper for Fedora 21 is now half over. Some already asked me for the status and most wanted also to see what is submitted. But we decided not to show them until after the voting, to avoid that people vote only for people they know instead of the quality of the submission.
But I think now its time to give a little bit of an overview what is the status now. So far we have 59 submissions, 3 of them had to be rejected, wrong license, one was an double and one had the wrong resolution.
The good thing is more people as last time contributed to the wallpaper, the bad thing is that I got a strong feeling some just did to get the badge. So the quality of some submissions is low. On the other hand some participated with creating wallpapers especially for the contest, so we have until yet three vector graphics or image manipulations in the contest. In generally a lot of the submissions are nice with the motif its just that a little bit work on the RAW files would help them over the top. Mostly they are over-lighted, some just in areas.
So the question is now, if we change Nuancier in a way that allows the upload of different versions of a submission, so that you can work on them to make them better if necessary.
But that is music which might be played in the future, lets take a little look whats already there. Here are 5 submissions, which are my personal favorites right now.

Just to remind you, there is still time until August 16th for submissions, so more then a month. So jump to Nuancier and make your submission

June 20, 2014

Como diseñar un Banner Web en Inkscape

Diseñar un banner web es una de las principales tareas que un diseñador tiene cuando llega a una empresa, bien sea para publicar en webs amigas o para promocionar un producto en su propia página. Anteriormente hice un artículo donde coloqué las medidas estandar que se usan en la red para los banners (que ya están un poco desactualizadas), pero hoy es el día en el que les dejaré un sencillo tutorial paso a paso, para diseñar su propio banner utilizando Inkscape.

Inkscape es una herramienta de diseño vectorial en la que cada forma o elemento que agregues se convierte en una capa, por lo que es muy fácil tener un diseño base y simplemente aregar/quitar cosas cuando amerite; lo que te dará un banner base muy fácil de editar para cualquier ocación sin tener que hacer uno nuevo cada vez.

Lo primero que debes hacer antes de comenzar, es tener una idea de la información que vas a colocar en el banner. Siempre debes partir de una idea principal para que no termines agregando cosas al azar que no tendrán ningún impacto en tu potencial cliente.

Al abrir Inkscape debes ajustar el tamaño de la página (o área de trabajo) al tamaño de tu banner. Puedes utilizar el atajo crtl+shift+d y ajustar las medidas; en mi caso, estoy utilizando 650×330.

Screenshot from 2014-06-19 14:37:18

Cuando vas a publicar anuncios, es importante que los colores que escojas para tu banner web sean llamativos, pero no en exceso, siempre toma en consideración el color de la web donde irá el banner y procura combinarlo; y si en dado caso el banner irá en diversas web, haz un fondo neutro con elementos destacados, no utilices colores neon para los fondos. (esta es mi apreciación personal). Para sacar el módulo de colores, puedes utilizar el atajo crtl+shift+f.

Screenshot from 2014-06-20 07:32:19

Es momento de agregar los elementos, tales como logo y contenido. En un banner, no siempre lo que más debe destacar es el logo; dependerá netamente de la información que quieras publicar. En mi caso estoy haciendo un banner para promocionar un taller de fotografía, por lo tanto, lo que resalta principalmente es el titulo, para que la gente sepa exactamente de que estoy hablando.

Screenshot from 2014-06-20 07:32:53

Una vez finalizado tu banner, solo presiona el atajo ctrl+shift+e para exportar; coloca la ruta de salida y asegurate de seleccionar la opción “Página(Page)” en la parte superior; coloca 90 DPI(PPP), que equivale al tamaño real y estás listo para exportar.

Screenshot from 2014-06-19 14:53:29

Y listo! ya tienes tu banner web! ¿Qué te ha parecido el tutorial?

tatica-banner

flattr this!

June 19, 2014

Heisenbug

heisenbug

You know. In case you needed a Heisenbug. Here he is.

The SVG source is available on the OpenClipart.org page for the design.

June 09, 2014

First shot at Inkscape - Moar Fedora.next logos!

I had always wanted to learn Inkscape; and the whole buzz around Fedora.next logos gave me exactly he opportunity. Just finished tinkering around with Inkscape for the first time, I must say it was worthwhile!

As promised, I’ve come up with a second iteration of the Fedora.next logos, this time as an SVG ;) If you haven’t been following already, you should check out attempts by Máirín Duffy and Ryan Lerch on the logos. I was without a computer, but did few sketches and my attempts are available here. Based on the feedback I received, I’ve now reduced to three improved concepts and would totally appreciate your feedback on them!

Alright, time for you to enjoy logos and for me to face the difficulty of communicating what exactly I was trying to do! :D

Strip A

I was poking around with Inkscape’s various buttons and accidentally ended up curving one side of the monitor. The end result appeared cool, so I decided to stick to it. I arrived at the keyboard by vertically inverting the monitor and skewing it a little bit.

Strip A

Strip B

These are my personal favorites (the workstation especially). I arrived at this by first creating a bunch of tiny squares, then recursively stacking them together to a produce grid effect. Finally, I colored it up in a way that automagically suggests the context of the logo. I have a few neat hacks in mind for this concept, if enough people agree on it, I could give it a try - the cloud & server can definitely improve! :)

Strip B

Strip C

The server on this strip was an attempt to ‘stack’ server disks that run Fedora - I’m not sure if I succeeded in creating that idea. From the feedback on my sketches (and late realization too), it appears that I couldn’t capture the idea of a cloud by stacking differently oriented Fedora bubbles together, so this time I’ve tried another shape. What do you think? The mouse is a different look at the workstation - most of the ones we’ve seen previously are oriented more towards the entire system, kinda rendering the logo ‘busy’.

Strip C

So…which would you rather pick? How could we possibly improve?

You’ll find the source for these images on my fedorapeople page or on my GitHub repo for this blog. They’re just 30$ for a one time use. J/K ;)

Note - if you actually end up looking at the source, you’re probably somebody who cares about how designers would want to collaborate. I’ve been improving the front end for GlitterGallery and recently wrote a huge post(with lots of pictures), so be sure to check that out too!

Thanks!

June 07, 2014

Neat feature with XO 1.75 Laptop
Yes, I am currently using XO 1.75 laptop to write this blog which needs more update. I am really busy outside Fedora  world while waiting for the infrastructure for Fedora 21 in order to refine Design Suite. 
This XO 1.75 has interesting apparently unavailable on most mobile device, a type of sensor that turns off the back light from the screen in plain sunlight. Surprisingly other device seems lacking that feature.  That will be a useful information for demonstrating the XO Laptop in local cafe as requested by my friends. I guess I will need a touch screen XO 4 laptop because of frequent question of touchscreen support, a trending norm in portable industry.

Init: Redesigning GlitterGallery responsively

When we started out this summer, I was telling Paul how my work on redesigning GlitterGallery was going to be awesome for my blog - pretty pictures!

GG Banner

I took to a lot of sketching last week since I was without a computer (I’ve posted Fedora.next logo concepts here). Like everything else, initial thoughts on GlitterGallery’s redesign started with sketches.

First, I hopelessly poured over all of my previous sketches to.. you know, get the ball rolling within my head.

First mockup ever!

First mockup on user page

First mockup on Glitterpost

Idea of comment -> track logic

Old plans of doing the pages

Pull request ideas

GitHub inspired mockups

Then it struck me - a lot has actually changed since those initial sketches, and we need to think in terms of how to deliver the new stuff better. Before starting to doodle right away, I went over a talk I did recently at the Libre Graphics Meeting in Leipzig. I couldn’t really explain all my ideas at the event, thanks to the last minute time allocation changes but I knew it was going to remind me of the key ideas we had to keep in mind when working on the new frontend. There were also few mockups I had made as part of my proposal for the summer, I went over them as well.

User page on proposal

Glitterpost on proposal

Issue page on proposal

Infograph on proposal

With that, I started to hopelessly doodle, taking inspiration from various articles Emily shared with me about responsive web design practices.

Initial bad layout

Ideas for the mobile flow

Blank slate ideas

And things started to look better.

Better layout

New user page overview

Aaaand, surprise! Two days ago, I found a charger and finally had access to the computer! Time to do the real pages!:D

Instead of polluting the original GlitterGallery repository, I started a new one for the WIP design stuff. There’s two pages at the time of writing, if you’d like to take a look, the login page and the user page. It might appear as just two simple pages, but these also serve as a framework on which to build the others, so the remaining redesign should be much easier and faster.

There was two important choices to make - the right layout and the right color scheme.

Ryan’s words at LGM come to the mind - “Mockups should show the essence of what you want to convey, without really going into too much detail about things like color. If the mockups are too precise about such things, people will complain when they don’t get what was originally promised - and it can be frustrating to give an answer!”

Pattern and color

He was right. I picked up a neat background texture from subtlpatterns, played around with various color combinations and finally settled with one when it began to feel right.

The challenge wasn’t to make just a few pages, it was to make them accessible on various devices - we had to redesign responsively ;) In the process, I picked up jeet, a cool library I must say; and experimented media queries on my sass - choosing the right breakpoints, sensible sizing, standard patterns, all of that stuff.

Here’s how the pages currently display on various devices - feel free to try them out in whatever cool gadgets you own! You can also try resizing your browser to watch the magic happen :)

User page on desktop

Login page on a notebook

User page on phone

I was super thrilled when I loaded the login page on my own phone! Infact, I had optimized it for the keypad to not cover the login button when typing the email - small things count, don’t they? ;)

Login on my MotoG

The most important part - lessons learned:

  1. Sketch. Easier to make changes to a paper drawing than having to go through all of that programming/layouting mess again.
  2. Design mobile first, and then go upwards on screen size. Practising this will result in more manageable stylesheets and you won’t overwrite styles for elements that behave the same way across smaller width devices.
  3. For responsiveness, choose breakpoints not based on standards, but based on page content.

My TODOs for the next week or so (Fedora stuff):

  1. Improve this framework: when there’s more screen available, things can be dealt with better.
  2. Extend this framework to some more pages.
  3. Work on digitizing the Fedora.next logo concepts.
  4. Go forward and finish the stuff planned for GSoC iteration one.

Great, now I’ll go drink some coffee - it’s been painful taking all these screenshots ;) Until the next post, here’s some family photo for ya:

Login page family pack

June 05, 2014

Son of more Fedora.next logos!

Where we left off last time was basically a brain dump of some random ideas. Thank you again for all of the great feedback and commentary around the designs. It really seems that folks are digging the “C” series of logo designs the most – here’s a bunch of iterations of that concept:

00-c-series

A lot of comments focused on the cloud logo not looking quite like a cloud, but the other logos worked pretty well. Other comments talk about how the cloud logo represented ‘scaling up,’ which is a good thing to represent. I poked around a bit with the cloud logo, keeping the vertical design for “scale up,” but varying the heights of the components to suggest a cloud a bit more:

01-cloud-shapes

Here’s those shape variations in context with the other logo designs:

02-cloud-shapes-in-context

Ryan and I talked a little bit about how these shapes are so simple, we could do a lot of cool treatments with them. One issue with making a logo design too ‘cool’ or ‘trendy’ is that the logo tends to get dated quickly. The basic shape of the C series logo designs, though, is that they are so simple they could have a timeless quality about them. You could dress them up with a particular treatment and then go back to basics or use a different treatment to keep up with trends but also not date the logo as trends change. We both really like this recent geometric pixelly fill kind of design (there are a few examples in the pixely pinterest board I put together), and Ryan came up with a great workflow to create these textures using the prerelease version of Inkscape from his copr repo. (We need to document and blog that too, of course. :) I promised banas I’d make it happen!)

Anyway, here are the original C series mockups with that kind of treatment:

03-treatment

Well, anyway! That’s just an update on my thinking here using your feedback. banas has also put together a blog post with some great sketches / iterations for the logo, and I suggest you take a look at his ideas and give him some feedback too:

Dreaming up Fedora.next logos

I know he had some computer issues that prevented him from being able to do these up in Inkscape, but he agreed to share his sketches as a work-in-progress – I think this is a great open way of sharing ideas.

Of course, as I hope is clear by now – your ideas and sketches are most certainly welcome as well, and we’d really love it if you riffed off the ideas that have already been posed by myself, Ryan, and banas. I think together we’ll end up with something really awesome. :)

In case you want to have a play with any of the stuff posted here, I’ve uploaded the SVG containing the assets:

http://duffy.fedorapeople.org/fedora-logos/next/fedora-next.5.svg

Enjoy :) Productive feedback welcomed in the comments or on the design-team mailing list.

June 04, 2014

Dreaming up Fedora.next logos

Last week was a nightmare - my laptop charger simply blew up! Despite searching the best accessible stores in my city, I had a hard time finding a replacement. I spent the week reading on responsive web design practices and sketching mockups for GlitterGallery & other web projects I’m involved with. Hopefully, I should be able to blog about progress with GlitterGallery’s front end by the end of this week, when I have something solid shipped :)

Inspired by Mo and Ryan’s fantastic work on the Fedora.next branding so far, I decided to tinker around with some logo ideas for Fedora.next server, cloud and workstation. A lot of these are improvements over some of the logo concepts Mo put up on her blog, some others are ideas of my own. I’m beginning to pick up Inkscape and with some help from the design team, I’ll try to digitize them soon!

Ok, no more talking, here’s some sketches for ya (apologies in advance for the low-res pictures)! Enjoy!

Strip A:

Strip A

The idea is straightforward - keep the “Fedora” in the Fedora.next the first thing and then supplement the individual components with their own graphics. Perhaps the keys in the workstation could do with a spacebar to make it more obvious?

Strip B:

Strip B

Here I experiment with the server as a stack of disks, and the workstation to be one of those new flexible laptop computers.

Strip Red Bull:

lol

Not really sure what I was trying to do, but it appears like I was trying a fancy cloud and ended up giving Fedora some wings! :D

Strip D:

Strip D

Really, the cloud on this is my personal favorite, it mimics a real cloud - with the Fedora logo put up front. I tried to introduce a desktop computer for the workstation, with the Fedora logo as monitor, a mouse and keys.

Strip E:

Strip E

The server stacks seem prettier to me here. I was hoping to make use of the patterns from Mo’s blog post for the bottom two layers. For the workstation, I introduced a half-shown monitor, with a Fedora mouse.

Strip F:

Strip F

Plain server disks, and a usb stick for the workstation instead - RedHat sent me one from the Brno office (doubles up as a can-opener), I thought it would make a cool concept for a workstation that can be carried around ;)

This whole thing was originally supposed to be an email to Mo, but she encouraged me to blog about it so here we are! Writing this also made me realize how difficult it is to communicate design stuff to an audience effectively. Please let me know if you particularly like/hate any of the logo ideas, it’d be useful to think about it before I get to digitizing them!

Once again, I’m posting the entire series here for you:

Fedora.next logo ideas

May 29, 2014

Marinating my brain on Fedora.next logos

Yep. Here’s a snapshot.

fedora-next.3

Inkscape SVG Source

This is the design methodology of, ‘throw a bunch of things at the wall and see what sticks.’

May 28, 2014

Another quick idea

Máirín Duffy has done 2 iterations of branding ideas, so here is another one from me covering a slightly different initial pass. This time, simple lines and a lot less curves on everything but the cloud.

Sources here

fedoranext-simple

 

Iterating on Fedora.NEXT Brand Concept #1

Last week I shared a concept for the Fedora.next logos with you, and I received quite a lot of feedback. Thank you for that. :) The feedback I received mostly clustered along these lines in some form or another:

  • The server logomark doesn’t read as a server to everyone – it’s too rounded.
  • The workstation logomark looks too much like a flip phone to read as a laptop.

Okay. I thought I might take that feedback and fart around with the designs some more, and record a bit of a stream of consciousness of what the heck I did so you can follow along and see where it’s coming from. I opened up the SVG source of the original designs in Inkscape and poked around a bit.

Making the server more… server-y?

server-ba

So the thing is, the initial stab at this concept here was made using minimally modified versions of the Fedora logo bubble. That’s why the rounding was so extreme. So for server, it was pretty simple to just tone down the rounding, and I think it reads better, if not as ideally as it should.

More cowbell for the workstation

workstation-ba

This one required a bit more iteration.

As with the server, the first step was to decrease the rounding so the edges of the shapes were more square (save for one corner, to try to keep a bit of unity with the other logotypes as well as link back to the main Fedora logo.) I actually quite prefer C2, but when it’s lined up with the other Fedora.next product logos, it’s much taller so it doesn’t hang toegther with the set as well. This maybe isn’t a huge problem, but having a similar basic shape across the product logos would definitely make life easier down the line (eg, being able to plug the logos into similar templates for web or print without having to modify the template to fit the taller logo.) Anyway. With this one, I fiddled around a lot to make sure there was a nice curvy negative space on the right side of the ‘laptop,’ to fit in with the Fedora logo-y feel. Too tall, though.

Okay, so on to the next iteration, C3, slimmed down the height of the screen and keyboard and pulled the two shapes closer together. The font was scaled down just a little bit as well. It still kind of has a weird look – I mean, it’s stylized in a way that hangs with the others, but I wanted to see if I could get something a bit more like a traditional laptop shape.

C4 is the next iteration then. It’s pretty much just C3 but the angling is changed to emulate a laptop. The overall styling across these logo marks is flat components layered on top of one another with shadows, like paper cutouts or something. I don’t know if skewing the shapes to indicate a sense of perspective like this breaks the look. It’s just an idea, anyway.

Iteration 2 compared to Iteration 1

it1-v-it2

Okay, so here’s the before and after, showing the logos from
last week and this iteration.

These are just mockups. More work needed. :)

These are all just iterations on the same concept though. There’s certainly room for other concepts for the logos here; I’m hoping to see at least another one for us to evaluate before we settle on anything.

Your ideas are welcome!

Ryan posted his iterations on the Cloud logo today – which is totally awesome, and I hope serves as further invitation for you to post your own iterations and ideas for these logos. They are more than welcome!!

Also, my bad. Seriously.

I forgot to post the link to my sources, which Ryan pointed out when he wanted to start working on a logo iteration. Here they are:

Now if you want to poke around with this design, you can more easily. Of course, it’s totally cool to just throw this idea out the window and start fresh with something else.

This made my day – maybe it’ll make yours, too.

Greg DeKonigsberg posted a link to these kids – apparently around 9 years old – that cover Rammstein, among other things. Their YouTube channel is awesome. Here they are covering Rammstein’s Alter Mann. This has nothing to do with Fedora logos. But neither do pandas.

badges

Fedora.next logo ideas iteration

Bouncing back on Mo’s post on fedora.next logo / branding ideas, here are a few tweaks and new ideas for the cloud logo. I know the cloud one is the easiest one to do, but here are a few ideas:

cloudideas

May 22, 2014

Fedora.NEXT Brand Concept #1

A while back we talked about designing the branding for Fedora in a Fedora.NEXT world. We’ve kind of fallen behind on the design process. So I’ve been spending some time with the questionnaire answers from the Cloud working group and the Server working group, and I put together the following boards as sort of a design research exercise:

  • Fedora Cloud Logo Research – items from the survey answers plus some other visualizations of cloudy stuff.
  • Fedora Server Logo Research – items from the survey answers plus some other visualizations of servers and whatnot.
  • Brand Systems – sample ‘brand systems’ of the sort we’ll need to make the Fedora.NEXT Fedora products hang together and look related.
  • Photographic Pixels – just an attempt at putting together some samples of inspirational artwork for this particular concept and maybe some others – I wasn’t sure what else to call it.

Spending so much time putting this together made me really antsy to design something – so I just threw this together this afternoon. It may and probably does suck, and it is something we can totally throw away if we want. But I thought it might be good to mock something up to start the conversation. If you are a designer looking at this seeing all the issues or if it sparks a new better idea, please get in touch on the design-team mailing list and let’s put some stuff together and riff off each other. I think we should probably do a Fedora.next branding hackfest too as mentioned much earlier, but it might be nice to have some material to work with to start. Maybe? What do you think?

Anyway, here’s my strawman! (click to see it at a larger size):

concept1

Okay, some rambling to kind of walk you through this:

  • Across the different competitive logos and such I saw a lot of rounded iconic designs, usually with thick outlines. I thought keeping the roundedness might be good to keep us on the same field, but I wanted something a little different than the other organizations / products / etc. had done.
  • Maybe the layering effect – kind of like pieces of the Fedora bubble (some stretched and squashed) cut out neatly or punched out and layered on top of each other – is a bit more unique than what is already out there.
  • There’s single-color versions too without the affect along the bottom.
  • There’s an accent color for each product – but I thought keeping the logos in Fedora blue would help them hang together more, and I don’t know that a huge blast of grape / lime / tangerine the way we do on our current website is a good thing.
  • The font I chose for the product names in Montserrat in all caps – this is an openly-licensed font, of course.
  • I did a half-ass pixelly pattern for each product too but I haven’t thoguht too deeply yet about how usable those might be or how to apply them yet.
  • The workstation logo was the hardest as the name ‘Workstation’ is quite long and doesn’t fit into the scheme as neatly. It also kind of fights a little bit with the glow of the laptop lid. And that is one funky laptop. But maybe it works.

Anyway! Just an idea! Thoughts / feedback are welcome in the comments. Snark, especially snark that isn’t creative or funny at all, can go straight to /dev/null. And if it doesn’t, don’t worry, I’ll mod it out.

Enjoy!

GlitterGallery: 2X GSoC love this year!

Last year was a significant one for GlitterGallery: we went from idea to working buggy prototype. It was a significant year for me too - I fulfilled most of my promises and learned a great deal in the process. This year the significance is going to be 2X!

  • We have a new ninja in the house. My friend Rohit’s going to help us upgrade to rugged, polish the authentication, write better tests & improve pull requests!
  • We’re just two months away from our beta usage by Fedora’s design team.

Before starting on this summer’s work, I just thought to summarize some long pending updates:

  • We now meet every Wednesday at #glittergallery on freenode. If you don’t find one of us there, just say hi to glitterfox! ;)
  • I’m working on a meetbot so we can publish logs for future meetings. Here’s our first and second meeting’s (shabby) logs.
  • My work this summer involves around redesigning the entire thing + the usual stuff I do. Proposal’s available here.
  • Not much community bonding for me this time since I was stuck with exams. However, I’d like to think Rohit’s now comfortable with the way we roll and will do us proud!

That’s all for now! Stay tuned for updates!

May 15, 2014

Fedora 21 needs your beautiful photos!

nuancier_monitor-f21

We need your submissions to make beautiful wallpapers available for Fedora 21! The supplemental wallpaper submission process is open and we’re ready for your work!

Questions You May Have

I don’t want to upload photos to the wiki. It’s a pain!! Haven’t you fixed this by now?

Zzzzzzap! Excuse removed! It is easier than ever to submit supplemental wallpapers – our lovingly hand-crafted custom wallpaper submission app, Nuancier, is now ready for your submissions! No more wiki submissions! (And the crowd goes wild!)

Nuancier, the new Fedora wallpaper submission app.

Nuancier, the new Fedora wallpaper submission app.

Can I have a cookie if I submit some wallpapers?

We’ll do you one better. Yes, even better than a cookie are the special-edition, Fedora 21-specific Fedora Badges you will earn for participating in the supplemental wallpaper process.

nuancier-f21

In order, we’ve got:

So go out and get ‘em, tiger!

When do I need to submit by?

You’ve got plenty of time – the deadline is August 16 2014 at 23:59 UTC. But!! The luxury of time you have is no excuse!

Those of you in the Northern Hemisphere will of course be out gallivating and having all sorts of summer fun – and you know this whole wallpaper thing will totally slip your mind while you’re on the beach or having a picnic in the park. So do it now!!! (Of course, you should also take a picture of the beach, take a picture of the birds in the trees, and submit then too!!) And our Fedora friends in the Southern Hemisphere – well, you’re going to be bundling up and trying to stay warm…. or if you’re near the equator you’ll be trying to stay cool… things that will keep you busy enough perhaps to forget about these wallpapers. You can prevent this! Submit your work now, while you’re thinking about it!

Okay, okay. I’m in. What are the guidelines? What are you looking for?

There is definitely a glut of photos of cats in the world, so if you’re going to submit a photo of a cat, it’s really got to stand out and be amazing. Keep that in mind. Also, if it’s a picture you would worry about showing to your dad or your mom, we probably don’t want to see it either. :)

Okay, okay. You want the real requirements. Gnokii made a great post that dives into the specific requirements here, and Nuancier also has a list as a review/reminder when you start the submission process.

It is quite important that you are willing to openly license your submissions – Fedora believes the open sharing of software and content is important for everyone, so we try to reflect that in our wallpaper artwork as well. Gnokii’s post goes into more detail on the specific licenses.

Hope to see your submissions!!

bamboo

May 02, 2014

Submit your wallpaper for Fedora 21!

It is time to open the submission phase for Fedora 21 Supplemental Wallpapers. This time not only for the voting phase but also for the submission phase, we will use our application Nuancier for it. We hope that makes submissions a lot easier. Be aware its the first time we use it so there might pop up some issues.

There are some rules of technical nature:

  • Submitted wallpapers must use a format that can be read by software available in Fedora Package Collection. Preferred image formats include SVG and PNG.
  • Master files, which may be further edited, should be maintained in non-lossy formats. Preserving vector graphics, raster layers, and channels is important for such materials.
  • Originals for landscape formats must be a minimum of 1600 pixels wide and 1200 pixels high. The larger the better. Photographic submissions should be made at the highest resolution the camera is capable of.
  • Submitted wallpapers should be provided in a 16 x 9 aspect ratio when possible.
  • No watermarks, signatures, photographer/creator names, or messages may be included in any part of the work. However if the license allows, and the photo is compelling enough, we could remove watermarks.

and some of organizational nature:

  • Submissions must not contain material that violates or infringes anothers rights, including but not limited to privacy, publicity or intellectual property rights, or that constitutes copyright infringement. If your submissions include or derive from artwork created by other people, please make sure the license of the original work you incorporate is compatible with Fedora and that you are not violating any of the provisions of its license. Just because a work is licensed with a Creative Commons license does not mean it is free to use (make sure you provide attribution to artists that license their work with a CC Attribution clause.)
  • Submission should have the consent and approval of the author or creator
  • Submissions re thereby licensed to the public for reuse under CC-BY-SA unless specifically identified as being licensed by another approved liberal open source license. See a list of approved licenses for Fedora. Note that we can not accept NC or ND submissions.

The deadline until you can submit your artwork is the August 16 2014 at 23:59 UTC. The voting will open automatically after this deadline.

For the badges hunters, yes there will be badges for it. There will be a badge for submissions, it will be awarded after the examination of the picture if it fits the rules, which you can see above. Another one will be awarded if your submission is chosen and also for the voting process there will be one.

For further questions, you can send me a mail and don’t hesitate to ask me for assistance just write me a mail gnokii@fedoraproject.org.

April 30, 2014

Pop Art

Recently I took a very colorful and quite abstract picture, which I thought would make for an interesting 'pop art' effect. The process is really basic and obvious, but I decided to share it for anyone who want to learn a quickie.

pop art gimp

So, I opened the image with GIMP. Since I want the final collage as a 4x4 composition, increase the Canvas Size to 200% on both directions.

pop art gimp

Then Duplicate the image layer.

pop art gimp

Repeat the duplication until there are enough pieces to cover the image. I need 3 duplicates, for a total of 4 pieces.

pop art gimp

Select each piece and with the Alignment Tool move them to cover the image (one right, one bottom, one right and bottom).

pop art gimp

Now the aligned pieces should fill the entire image.

pop art gimp

Leave one layer as is (if you really want, you can edit it too) and for the second open the Hue-Saturation dialog.

pop art gimp

Move the Hue slider left or right until you are happy with the new color set.

pop art gimp

Repeat for the other layers until you have something like this:

pop art gimp

Export and you are done:

pop art gimp

Here's a different use case for a similar effect: I had a single background for the water drop photos, but adjusting the Hue made it appear the pictures are more different than in reality.

pop art gimp

PS: as someone told me, I should print this at some big size and try to sell my 'pop art' creation for a ginormous amount of money.

Firefox 29
firefox 29
Probably everybody already heard there is a new Firefox release and it changes many things and already has an opinion about it. Unfortunately I don't have the audience to gather a significant sample, but if anyone runs such a poll, I would be genuinely interested.

Which Firefox user interface do you prefer?
  1. Firefox 29 (the latest, just released)
  2. Firefox 4-28 (still on long term support)
  3. Firefox pre-4 (before the "keyhole")
  4. Seamonkey (the suite)
  5. I don't care (as long at it open web pages)
Of course i am coming here from an angle: I prefer the apps on my desktop to be consistent with each other, as layout, structure, widgets placement, shortcuts, behavior( I was happy the old Firefox never got the "keyhole" on Linux.) Still, not enough to move to something like Midori , where the look and feel is totally native but the set of features smaller.

April 29, 2014

New corebird release in the works

Corebird upstream has released version 0.7 of their awesome twitter client.

Please test and add karma to the Fedora package here:

https://admin.fedoraproject.org/updates/corebird-0.7-0.fc20

April 26, 2014

Micro-Charla de Fotografía con Software Libre

Lo prometido es deuda. Acá la micro-charla que fue transmitida en algunas de las ciudades donde se realizó el flisol. Espero la disfruten y cualquier duda que tenga, dejenlas en los comentarios.

Enlace directo: https://www.youtube.com/watch?v=k8pcXrIyDAs

<iframe allowfullscreen="allowfullscreen" frameborder="0" height="315" src="http://www.youtube.com/embed/k8pcXrIyDAs" width="560"></iframe>

flattr this!

April 23, 2014

Trabajando con el php de la url actual en WordPress

Hoy estuve teniendo varios problemas con Qtranslate, a quien no le da la gana de traducir los homes estáticos (y aún no se por qué…) por lo que comencé a utilizar transposh, bastante bueno para lo sencillo que es.

translate
El tema es que en el index estático que hice, no puedo agregar simplemente el widget de Transposh (y aunque puedo, solo quería tener unas lindas banderitas y ya), pero, quería que estas banderas no solo apuntaran a la traducción correspondiente, sino que tradujeran la URL actual en la que se encontraban. Sé que es un fix simple, pero como a mi me tocó googlear, pues les dejo acá la forma de hacerlo. El código PHP que trae la url actual es el siguiente:

<?php $url = content_url(); ?>?lang=es”>

Esta etiqueta solo la deben agregar antes del trozo de código que quieren que se agregue al final de cada url actual, por lo que, en mi caso, sería algo así:

<a href=”<?php $url = content_url(); ?>?lang=es”><img src=”<?php bloginfo(‘template_directory’); ?>/images/Spanish-flag-small.gif”></a>

Con este simple código, wordpress sabrá que tiene que utilizar la url actual y no la del home, agregandole al final el código correspondiente a la traducción automática de ese idioma, la cual es ?lang=es. Como ven, es un fix bastante sencillo y como está en el home, no hay más nada que hacer.

flattr this!

April 22, 2014

Pseudo-HDR editing

Usually I don't edit much my landscape photos, not because I don't know how but I prefer them this way. Still, recently I felt the need for some more advanced processing for a picture, it enjoyed some success so I decided to share the process. The tools used were UFRaw (in the form of the GIMP plugin), Luminance HDR and, of course, GIMP.

I passed by this scene in the nearby park at the "golden hour" and it looked photogenic, but I wanted to make it more dramatic. One can increase the drama in a landscape photo by using a HDR treatment, but not having the tripod with me (for a proper HDR image you need at least 3 images with exactly the same scene but different exposures) I decided to go for pseudo-HDR. For this, I set the camera recording mode to RAW.

pseudo hdr

Note: the real purpose of a HDR image is to have details both in the shadows and in the highlights, beyond what the camera sensor can record, the improved drama is a side effect.

The RAW image was imported in GIMP via the UFRaw plugin 3 times: with normal, -1 and +1 exposure. If you really want, you can try doing the same starting from a single JPEG an simulate the exposure bracketing with color levels/curves, but I wouldn't advise: if from a RAW you can recover some lost image details, in JPEG they are gone forever.

pseudo hdr

The result is 3 JPEG images, one under-exposed, one exposed properly and the other over-exposed, which are to be combined in a HDR. For more drama, you can bracket with more than one step.

pseudo hdr

I imported the JPEGs to Luminance HDR and set their exposures manually to -1, 0 and +1 (or whatever values you used for RAW development). Then just press "Next" a few times, there is no need to adjust parameters, nor align the images (they were obtained from the same source).

pseudo hdr

Now we have a High Dynamic Range image, which can't be used or viewed as-is on a normal computer display, it has to be converted back to Low Dynamic Range, but optimized for what do we want from it (details in shadows and/or highlights, drama, whatever).

pseudo hdr

Time to pick one of the presets in the right column, one you think is the best for your case.

pseudo hdr

Then I adjusted the color levels a bit (if you prefer, the levels can be adjusted later with GIMP or any other image editing app).

pseudo hdr

Now the image can be exported as a JPEG benefiting from the HDR/pseudo-HDR treatment. You can leave it as-is if you like.

pseudo hdr

However, I opened it again with GIMP for more refinement: sharpening and color curves adjustment, to make the colors warmer. This is my end result.

pseudo hdr

April 17, 2014

Get involved in the Fedora.next web efforts!

Lately I’ve been blogging about the proposal for new Fedora websites to account for the Fedora.next effort. So far, the proposal has been met with warm reception and excitement! (Yay!)

We Really Would Love Your Help

Two very important things that I’d like to make clear at this point:

  • This plan is not set in stone. It’s very sketchy, and needs more refinement and ideas. There is most certainly room to join in and contribute to the plan! Things are still quite flexible; we’re still in the early stages!
  • We would love your help! I know this usually goes without saying in FLOSS, but I still think it is worth saying. We would love more folks – with any skillset – to help us figure this out and make this new web presence for Fedora happen!

Are you interested in helping out? Or perhaps you’d just like to play around with our assets – no strings attached – for fun, or follow along on the progress at a lower level than just reading these blog posts? Let’s talk about where the action is happening so you can get in on it! :)

How To Get Involved

Up until this point, the Fedora.next web ideas and mockups have been scattered across various blogs, Fedora people pages, and git repos. We talked a bit last week in #fedora-design about centralizing all of our assets in one place to make it easier to collaborate and for new folks to come on board and help us out. Here’s what we’ve set up so far:

  • A Fedora Design GitHub group – I’ve already added many of our friends from the Fedora Design team. If you’d like to be included, let me know your github usersname!
  • nextweb-assets git repo – This repo has the Inkscape SVG source for the mockups and diagrams I’ve been blogging here. Please feel free to check them out, remix them, or contribute your own! I tried to set up a sensible directory structure. I recommend hooking this repo up to SparkleShare for a nice workflow with Inkscape.
  • mockups-getfedora git repo – This repo holds the prototype Ryan has been working on for the new getfedora.org ‘Brochure Site’ in the proposal.

We also, of course, have #fedora-design in freenode IRC for discussing the design, as well as the design-team mailing list for discussion.

The Fedora Websites team will be setting up a branch for the new websites work sometime by the end of next week. For now, you can take a look at the mockups-getfedora repo. You also might want to set up a local copy of the Fedora websites repo by following these instructions to get familiar with the Fedora websites workflow.

Okay, I hope this makes it abundantly clear that we’d love your help and gives you some clear steps towards starting to get involved should you be interested. Please don’t hesitate to get in touch with me or really anyone on the design team or websites team if you’d like to get started!

April 16, 2014

Design Hub Idea (Fedora.next website redesign)

So a couple of weeks ago we talked about a proposal for the new Fedora website that Ryan Lerch, Matthew Miller, and myself came up with. The feedback we’ve gotten thus far has been overwhelmingly positive, so I’ve put some time into coming up with less vague and hand-wavy ideas as to what a particular sub hub on the Fedora ‘Community Hub’ might look like. Remember, this thing we talked about:

diagram_communityhub_subhubs

We’re talking about what one of those individual little hubs might look like. The theoretical examples above are very Fedora team-centric; I would like us to follow a model a little more flexible than that in the spirit of Reddit. E.g., it should be easy to break out a new subhub for a specific topic, or a cross-team collaboration / project, etc. So the sub-hubs won’t necessarily be along team lines.

A Sub-hub for the Design Team

sub

Okay, okay, not that kind of sub. (I have a sandwich graphic too, just waiting for its opportunity. :) ) I understand pretty deeply how the Fedora design team works, the workflows and processes we’re involved with, so I figured it’d make the most sense to mock up a subhub for that team. The lovely Tatica volunteered to be the subject of this mockup. :)

This is going to be an obnoxiously big one. We’ll walk through it. Here goes:

design-hub-idea_notes

Alert Box

The first thing that should hit you is the purple alert box. (I think the color should probably be customizable from a pre-selected set of choices on a per-sub hub basis.) From looking around at various online communities and forums and chatting with folks, it seems a common meme for organizing online communities is having a set of guidelines for how the community is run. The idea with this box is that the community owners / mods can set the message, and it’ll be display to newcomers to the hub or to everybody (if it is ever updated.) It can be dismissed and won’t show up again unless the content is changed. It also links up to a fuller set of community rules and guidelines.

Moderator Box

This is kind of a meta help box. It’s in right sidebar, towards the top. It has a list of the group owners / mods; you can click on their names to get more info about them. It also has a link to the community rules & guidelines (helpful in case you closed out the alert box.) One idea we’ve been kicking around is letting people notify the mods of any issues from this widget; the tension there is making sure it doesn’t become a spam outlet.

Custom subhub banner

Following Reddit’s lead, there’s a space below the main navbar designated for the subhub’s branding. Some of the subreddit artwork I’ve seen isn’t the best quality though. We’ll probably offer a design team service to design the banners for different subhubs in the system. We can also provide a precanned set of nice backgrounds that teams can choose from. The way we’re thinking the banner will work is you can set a repeatable background tile, and then set a graphic that will be displayed left, center, or right.

User / profile config center

This isn’t mocked up yet; the vision there is that it would let you visit your profile page and would also provide a lot of the functionality you have in the FAS2 website today: change your password, change your ssh key, location, etc., as well as manage your group memberships.

Messaging center

This one is also not yet mocked up. It will likely be getting its own blog post soon. There’s a lot of different types of messages/notifications a user could get, so I think we need to sit down and catalogue the ones we know about before mocking anything up. I think it might also be cool to have a place to save/store stuff you like; like a favorites list you can refer back to later.

Nav bar

Okay, so here’s the idea with the navbar. It’s another Reddit-inspired thing. Users logging in for the first time with fresh FAS accounts by default will have a few select hubs in their navbar – perhaps ‘front,’ ‘planet,’ and ‘announce.’ (‘front’ could be maybe some kind of aggregation of the most popular content; planet would be a hub that basically repeats Fedora planet maybe, announce would basically mirror the Fedora project announce-list.)

Once a user joins different FAS groups – or if they are already a member of FAS groups – the hubs associated with the groups they are a member of could appear in their navbar. So here, you see Tatica has ‘designteam,’ ‘ambassadors,’ ‘marketing,’, and ‘LATAM’ subhubs in her navbar, as an example.

You can customize your nav bar by hitting the ‘edit’ button on the far right side of it. Maybe there could be a directory of subhubs across the system when you click on the ‘hubs’ logo in the upper right, and you can add them to your nav from their as well.

Subhub meta bar

This is the topmost widget in the right-hand sidebar. It gives you an idea of how many people are ‘members’ of the subhub (analogous to how many people are members of the FAS group it’s assocaited with,) and how many people follow the hub (‘subscribers.’) It also provides a mechanism for you to subscribe or unsubscribe from the hub.

Example Hyperkitty post

There’s an example post, ‘Fedora Design Github org,’ that I posted to the design-team mailing list a few days ago. This is mean to show how a post from Hyperkitty could appear in this system. The thought / hope is that we could use the Hyperkitty/Mailman API to send comments, or at the very least simply display them and link back out to Hyperkitty for replying and reading other posts.

Alternatively, we could just have a widget for the design-team mailing list, and not integrate posts into the news stream on the hub. We could instead show some of the Hyperkitty widgets currently displayed on list overviews, like the most active threads list or the most recent threads list. That’s another way to go. I’m not sure what’s best yet. Maybe we give subhub owners a choice, depending on how much they actively use the mailing list or not in their particular community.

Glitter Gallery post

We have another example post below the Hyperkitty one; this one is an example Glitter Gallery post. You can view the artwork and make comments on it, and the comments should get sent back to Glitter Gallery.

Example blog post

Further down the main news feed area we have a small snippet of a blog post to show how that would look in the subhub context. The idea here is that the design team has a subplanet on planet.fedoraproject.org associated with it – planet.fedoraproject.org/design – so those posts could show up in the chronological news stream as well.

Chat widget

Another idea in the right-hand sidebar – inspired by waartaa and ideally driven by it – a little chat client that connects to #fedora-design on freenode IRC, where the design team tends to hang out. I do not think the backlog should be blanked on every page load – I think there should always be at least a few hundred lines of backlog stored with the subhub so anybody coming in can follow the conversation from before they joined that they missed out on. It’ll let folks catch up and participate. :)

Nauncier widget

This is just a simple little widget to show that widgets don’t have to be complex – this one drives users who haven’t yet voted on the Fedora supplemental wallpapers to go and vote!

Ticket Widget

The design team has trac queue where we accept requests for artwork and design from across the project. It might be nice to inspire folks to help out with a ticket by having available tickets listed right there. It might be some good motivation too – if someone finishes a ticket or posts something to a ticket – that would be shown in the feed too. When you do good work and complete something, or submit something and are looking for feedback – you’d get more exposure by having that broadcast to the subhub news feed.

Some thoughts

Okay, so hopefully that little tour through the mockup made sense. What do you think?

Overall, I would like to point out that as with Hyperkitty, the design principle here is the same – we do not want to displace folks who are already happy with the tools they use and force them to log into this web system and use only that. If someone posts a reply to a mailing list post through this hubs system, the reply should get send back to the mailing list as a reply and should be perfectly readable by folks using only a mail client to receive postings by email. If someone sends a message in the chat, folks using a traditional IRC client in that channel should be able to see that message and communicate with the sender without issue. The hope here is to bring things together to make it easier and less intimidating for newcomers without sacrificing anything on the current contributors’ side.

I’d love to hear your thoughts in the comments!

The SELinux Coloring Book

selinux-comic-book-thumb

Dan Walsh had a great idea for explaining SELinux policy concepts in a fun way – creating an SELinux coloring book! He wrote up a script, I illustrated it using my Wacom in Inkscape on Fedora, and we turned it into an opensource.com article. Still. We needed physical coloring books, and what better place to hand them out than at the Red Hat Summit?

We got them printed up and shipped off to the Summit (some in assorted volunteers’ baggage :) ), and they’ve been so popular that Dan is getting close to running out, except a reserve he’s kept for the SELinux for Mere Mortals talk later today. We also handed out some slightly imperfect misprints in the Westford Red Hat office, and we’ve been told a co-worker’s daughter brought hers to pre-school and it was a big hit – the other kids want their own. When it comes to SELinux, we’re starting ‘em young on the setenforce 1 path. :)

How might you get your own copy? Well, we’ve made the coloring book, including the text and artwork, available under a Creative Commons Attribution ShareAlike license. So download, print, share, remix, and enjoy! :)

April 10, 2014

Como construir presentaciones online: Comparación de servicios

¿No has deseado tener una herramienta online de fácil uso para crear excelentes presentaciones? ¿No sería genial compartir charlas interactivas-online con tus amigos? Estas son algunas de las preguntas que me hice y luego de una busqueda (y la recomendación de amigos) me encontré con Slidifier y Slides. Slidifier es una herramienta para crear presentaciones simples e informales. Simplemente escribes lo que quieres en la caja de texto y presionas el botón “slidified” y eso se convertirá en una presentación lista en tu navegador; mientras que Slides te provee con una interfaz más completa para crear, agregando algunas opciones.

slidifier

En Slidifier, una vez que escribas tu presentación en la caja de texto, solo preciona “Slidify” y tu presentación se mostrará. Puedes navegarla utilizando las flechas o el botón izquierdo del ratón. La tecla de escape te sacará de la presentación y te llevará a la caja de texto nuevamente

Slidifier es creado por Holger Ludvigsen y Espen H. Halvorsen. Puedes ver su desarrollo en Github.

Slides

En Slides, hay una simple interfaz con una gran variedad de temas y transiciones para escoger,para que te asegures de que las cosas se muestren y muevan como quierasn. También puedes usar dispositivos touch (como tu tlf) para manejar la presentación. Slides también tiene un plan pro, donde prácticamente pagas es por más almacenamiento y descargas; lo cual no es malo para alguien que crea muchas presentaciones, digamos un profesor o alguna compañía.

Slides fue fundado por Hakim El Hattab y Owen Bossola a principios del 2013. Utiliza reveal.js, un framework opensource hecho por Hakim en el 2011. puedes ver el about de su página en slides.com

slides

No importa cual escojas, lo bueno es que existen opciones y estas tenerlas a la mano es útil de vez en cuando. Asegurate de crear excelentes presentaciones sin pensar mucho en el tiempo que debes gastar aprendiendo aplicaciones complejas :)

A license to print money
We learned (link in Romanian) the Romanian government is negotiating with Microsoft for a Windows XP support extension in the public administration. This is the free market at work and there may be solid arguments for doing so (yes, I would prefer my tax money to be spent on Free and Open Source Software instead of making business with a convicted monopolist, but realistically I don't expect this to happen in the foreseeable future).
My source of amazement is: once the patches and the delivery infrastructure are set for the first government (UK), then the costs for adding any subsequent government is approaching zero: computers in Romanian administration usually have Windows installed in English, so there is nothing to translate, the infrastructure to deliver patches is there and the network costs are the same or lower (presumably patches fro XP are smaller in size as patches for Windows 7).Apparently ending support for XP makes a lot of business sense for Microsoft, they suddenly started receiving important sums of money for things they did only a week ago for free. Who would refuse that?

April 08, 2014

On the Mozilla scandal

Like many of you, I too received the Mozilla email about "helping" with communications regarding the "activities of the past week", which is an euphemism for the Brendan Eich scandal. It comes with a FAQ you are expected to quote when talking about the issue.

Since all communications from Mozilla on the topic were opaque, either in blog posts with comments disabled or emails from generic addresses where is useless to reply, I finally decided to write something. Anyway, April 1-st, when I learned about the topic, wasn't a good day to write about serious issues. It may be not me my business what happens inside the Mozilla corporation, but if the Mozilla community feels a need to guide my public communications about it, then maybe it is.

So I am totally unhappy with Mozilla to caving-in to pressure from bullies. It creates a serious precedent and a slippery slope. What's the next step? Once a new CEO is announced, no matter who he is, the browser will be blocked by anti-gay websites? It looks like we are going towards a Balkanized web, where the "best viewed with [Internet Explorer|Netscape Navigator]" buttons are replaced by "blocked for browsers whose CEO have private opinion X".

Seriously, instead of personal political opinions of the Mozilla CEO I was more concerned about him wasting resources on the mobile OS unicorn while the browser looks more and more like a Chrome copy-cat.

April 01, 2014

A proposal for Fedora’s website (considering Fedora.next)

(I’d like to apologize upfront, in that I meant to post this about a month or so ago. You might be aware that the Red Hat Summit is coming up in 2 weeks, and I’ve had a few odds and ends to take care of for that event that cut to the front of the line on my task list because of their imminent deadlines!)

So, Fedora.next is shaking Fedora up a bit – enough that our current fedoraproject.org website is going to need a bit of a gut reno to appropriately reflect the new world of Fedora! A few weeks back, Ryan Lerch and I had an informal brainstorming session about how to account for Fedora.next with fedoraproject.org. We came up with what we thought was a pretty workable concept, and met with Matthew Miller a few days later to see what he thought. Here’s the whiteboard of what we came up with:

Fedora.next whiteboard

Whoah, what’s going on here? Okay, let’s walk through this.

The Proposal

There’s several website components to this proposal. We’ll go through each one-by-one. We have some thumbnail mockups of each site to give you a vague idea of the kind of thing we’re thinking of – there are no larger, detailed mockups at this point, except that I think Ryan is working on a prototype of the Brochure site with the websites team, which I think he is planning to blog about soon.

A Fedora ‘Brochure’ Site

fedora-next_brochure

So first, let’s create a Fedora website to allow people to learn about Fedora – the Operating System, you know, the sausage we’re making here – and to be able to download it. Ryan and I started calling this the ‘brochure’ site because it’s really informational and aimed at people who have never heard of Fedora before and want to learn more about what it is. It’s also aimed at people who know what Fedora is and use it, but who simply want to download it and get on with their lives. It’s not primarily aimed at contributors.

Some of the sites we were inspired by when coming up with this idea:

  • getfirefox.org – simple and clean website introducing what Firefox is, with a prominent single download button, features list, and tour as well as links out to more information about add-ons, support, and Mozilla.
  • google.com/chrome – short and sweet introduction to Chrome, with a prominent single download button, screenshots, feature list, and some chromebook / chromecast stuff.
  • android.com – clean layout with basic information about Android. It also includes news updates, which the other two didn’t.

Do you think this makes sense to have? It might be cool if we could give it its own domain to separate it out from contributor-centric stuff.

A Fedora User Support Site

fedora-next_user-support

Right now, there’s a lot of places within Fedora you can get help. To a newbie, it’s not really clear what the best place to go is. We’ve had ask.fedoraproject.org set up for a while, and it has the potential to become a really useful knowledgebase of help for Fedora users – if only it had enough prominence for more folks to start using it. In this proposal, then, we’re elevating ask.fedoraproject.org to a more prominent position – and having it linked it strongly with the brochure site. We’ll skin it to match the new brochure site as well.

The idea for this site is to be targeted primarily at Fedora users. We could, however, have another instance set up for contributors to ask questions about how to do things within Fedora and get help.

Further on down the line, it’d be really sweet to have Fedora desktop integration with the support site, so you can ask questions and get notifications when answers to your questions are available from the desktop. Maybe?

What do you think?

The Fedora ‘Commnunity Hub’

diagram_communityhub

Okay, so here’s where things get more complex. Full disclosure, too – we’ve tried doing something like this a couple of times now and honestly failed to get wide adoption and also to expand the functionality across Fedora’s disciplines. Hopefully, third time’s the charm! :) Perhaps there is something inherent in this idea that is fatally flawed, though. What do you think?

Well, let’s talk through it, first. It’s inspired by a lot of currently-popular social media sites; we’d really like it to be a place that Fedora contributors would feel compelled to visit daily and refresh throughout the day, depending on how actively they are working on Fedora that given day. (Whether or not we’ll achieve that, of course, we really can’t say or guarantee.) Here’s some of the features this hub would have:

  • Logged out mode has new user signup flow: Similar to how Twitter and Facebook operate when you’re logged out of them in a web browser, we were thinking that if you’re not logged into the hub, we don’t know what content would be the most appropriate to show you, so rather than risk a bad experience, let’s just prompt you to log in. This also gives us a nice clean space to promote new account signups. From the logged-out page, we could create a guided Fedora Account System (FAS) account creation flow (that uses FAS as a backend, of course) to help ease users into becoming contributors.
  • FAS integration: Speaking of FAS, we were thinking it might be nice if some of the basic account management tasks you do in FAS today were available from this site. E.g., change your password, email address, sign up for groups, that sort of thing. Maybe we could build out a groups UI and make the FAS groups we have more social (well, the groups that serve as more than just an ACL for something else. Maybe we could filter out the ACL groups?)
  • Messaging / notification tray: Another inspiration from various social media sites, we were thinking about having a messaging / notification tray along the top of every page in the hub. If there is new content available in one of the streams you’re subscribed to, or maybe if someone has sent you a message or you have a build that’s finished or what not, it’ll pop up as an additional item in your messaging tray. You can see in the ‘logged in’ thumbnail mockup above that the messaging tray has been expanded and shows a bunch of items. Click on any given item and you’ll be taken to the full details for that item, whether it’s a finished build in koji, a new update in bodhi to a package you watch, or a Fedora badge you’ve just been awarded.
  • Reddit-like spaces: Fedora is a really big project. We’re big enough and have enough teams and efforts and things going on that I think a global nav to encompass all that we do would be too unwieldy and out-of-date a few days after it was created. We’re more fluid than that. So I really like the idea of how Reddit organizes space within itself – users create spaces (‘subreddits’) that operate roughly under their own governance, and can customize those spaces (albeit in somewhat limited ways, a logo and custom banner I think.) New spaces can be created on an as-needed basis. Every space is basically a forum; each post has threaded comments and there is a voting system both for posts and for comments so the best content bubbles up to the top. We had the idea that we could organize the community hub in this fluid fashion – prepopulate the system with some established spaces, like for the Fedora Design team, Infrastructure team, and maybe the working groups and Fedora.next and projects like that. We’d allow Fedora community members to create and manage their own spaces too, and allow them to customize those spaces to their teams’ needs.

Let’s talk about that last point a little bit more in-depth, since it’s really core to how we were thinking this community hub could be organized.

Sub-hub-hubs and a bottle of rum!

diagram_communityhub_subhubs

Ideally, the spaces for various Fedora teams and projects on the community hub wouldn’t be limited to forums – we could build out custom widgets that each space could make use of, and tie those widgets into data coming in from fedmsg, for example.

You can see some (very, very rough) thumbnail mockups of what different hubs might look like above. Let me walk you through my brain using these thumbnails as a guide:

  • We’ve got an Ambassadors hub that shows a map of current ambassador activity, a swag gallery (lower right) and some discussions (courtesy Hyperkitty?) in the lower left…
  • There’s a Development hub with a list of builds and updates along the right column and devel-list discussions as well as announcements in the main content area…
  • Of course there is a hub for the Design Team with a widget to show recent mockups / designs, design-team list discussions, an asset search box, and a list of recent tickets along the right…
  • Finally, a Marketing hub with recent articles about Fedora from the press aggregated on top, with marketing-list discussions on the bottom, and recent Fedora magazine post along the right sidebar.

The specific content I walked you through on each thumbnail mockup above? It could all be totally bogus. It is a lot of work, figuring out for each team and project, what would be the right content to offer, and how to place it, and how to design widgets that would best hold it. To a certain extent, we’d like each subreddit subhub moderator/admin to create the default content offering, and maybe even allow users to customize for their individual needs further on top of those defaults. We do have to offer some basic tools and feeds, though, to make any of that possible.

You can see in our initial whiteboard that we walked through with Matthew (in the lower left corner) a list of the ways that different teams / efforts have overloaded the wiki to achieve what they needed:

  • development docs
  • personal pages
  • SIG pages
  • strategy
  • workflow (e.g., QA, design, rel-eng)
  • packaging policy
  • meeting minutes
  • team organization
  • asset management (e.g., the design team’s SVGs and PDFs!)
  • event management (pre-Flock, sign up for FUDcon in this wiki table!)
  • standard test procedures
  • UI specs (like this)
  • user documentation
  • community policy

Maybe some of these things would be better served by mechanisms made for working with them? Maybe we could design and build widgets or tie-ins to pre-existing infrastructure (like meetbot for meeting minutes, as an example) that would help manage these better than a wiki?

Getting flashbacks about early 2000′s web portal design? Yeh. We’re not trying to go there, honestly. Think about a model more similar to Facebook’s groups and apps, if you use Facebook.

On a per-user basis, the user might have a favorites bar or nav bar along the top prepopulated with the subhubs affiliated with the Fedora groups they are a member of. The user could customize this, to remove the subhubs they don’t want in their navbar and to add additional ones.

Does any of this make sense?

Well, what do you think? Ryan and I met with the Fedora websites team a few weeks ago or so to talk through the idea after working up this proposal with Matthew Miller. They were very supportive of the idea. So, we have had some designer-crazy checks up to this point; it can take a village to suss out designer-crazy sometimes, though, so do let us know your thoughts on this!

If need be, we can modify the plan, come up with a new one, or start blazing forward towards making this one a reality. We’ll need your feedback to figure out what to do. So, what do you think?

Addendum

I found this lurking in my Fedora People ~/public_html from 2009 – we’ve thought about this kind of split of the website before, and even thought about hubs (although not necessarily a platform for fluid hubs as in this proposal):

fedora-model-1

By the way! The scribbly font I used in the mockups is called ‘Redacted’ – it’s an Open Font License font that is really handy for when you want to whip out some quick mockups and don’t want to bother with lorem ipsum text. You can snag it from this link.

March 25, 2014

Hyperkitty at the 0th SpinachCon
SpinachCon - The gnu has spinach in his teeth!

SpinachCon – The gnu has spinach in his teeth!

As part of the greater LibrePlanet 2014 festivities, Deb Nicholson organized the first SpinachCon at Industry Lab in Cambridge MA, sponsored by the Open Invention Network.

What is SpinachCon?

“What the heck is a SpinachCon?” you may ask. Well, the idea is that there are free software projects that have niggling usability issues. Like pointing out to a friend that they have spinach stuck in their teeth, SpinachCon is an event where free software fans can show up and let the participating free software projects know whether or not they have ‘spinach in their teeth,’ and between what teeth that spinach might be. :) It’s basically a fun and informal free software usability testing session open to anyone who would like to drop by and help out by testing software.

13409182604_22085421aa_b

Hyperkitty joined three other free software projects – MediaGoblin, LibreOffice, and Inkscape – in the event.

How it worked

SpinachCon was 5 hours long, from noon until 5 PM the Friday before LibrePlanet. Each project had its own table. Ryan and I brought laptops that we set up on the Hyperkitty table, open and logged in as me to the Fedora’s Hyperkitty test server. Deb provided user questionnaire sheets that we stacked on the table, and I had also written out a set of six tasks for users to complete during their testing. I transcribed those into a text file in gedit, and we used USB sticks that Deb brought to transfer the file to the other laptop. We kept the gedit buffer open on each laptop.

Lunch was generously provided by the Open Invention Network, so we both grabbed some pizza and salad and let Deb know when we were ready for our first testers after we finished eating. We had a steady stream of testers throughout the entire length of the event.

Our per-user workflow was as follows:

  1. Open up the task list text file in gedit and save a copy coded with tester number. (This completely fell apart because the ability to save a gedit buffer with another file name has been taken away in Fedora rawhide. :( So we ended up copy/pasting buffers from one tab to another, it was hectic and stressful and our numbers got out of sync with our testers so we can’t associate questionnaires with tester task text files.)
  2. Introductions with tester, ask tester to sit down at appropriate laptop.
  3. Ask tester if they’ve used mailman before, and explain to them a little bit about what Hyperkitty is and how it works.
  4. Show the tester the gedit buffer and explain it has a list of tasks for them to complete, and that we’d like them to take notes and answer the questions as they complete the test.
  5. Sit with the tester and watch them complete the tasks, answering any questions they have and noting any issues or comments that came up as they went along.
  6. Thank tester for completing test, ask them to fill out questionnaire. (We forgot to have one of our testers fill out a questionnaire. Oops!)

Ideas for Running a Smoother Test Next SpinachCon

Based on some of our goofs / mishaps this time around, here are some suggestions for the next time we go to SpinachCon – please feel free to use these to prepare your project for SpinachCon in the future!

  • Bring enough Laptops! SpinachCon was held at a co-working space that didn’t have a computer lab. We didn’t realize until the week of that we’d need to bring laptops to the event for testers to use. I was hoping to use my own laptop to take notes, but it turned out to be fine to not have it to use in that capacity. We brought two laptops so we were able to run two tests at once. That worked well, since there was only two of us (me and Ryan) admining the test. I’d make sure you have one laptop per test admin so you’re not stuck waiting on a laptop to open up.
  • Grab enough blank questionnaire sheets! We ran out of questionnaire sheets and weren’t sure if there were any more blank ones available. I did track Deb down and get more, but I think for a 5-hour event, if each team has at least 20 sheets, they shouldn’t run out.
  • Bring plenty of paper and pens! I brought a paper notebook to take notes in and misplaced it. I ended up using the back of one of the filled out questionnaires to take some notes. Some testers brought laptops and wanted to use their own laptops, so we needed somewhere to write down the URL for them to go to. We also only had one pen at our table. Bring pens! Bring paper notebooks!
  • Take photos! I took photos of our testing process, with the permission of the folks sitting at the table. (I’ve used them in this blog post.) This is a good idea to do at the event, because it makes recap blog posts like this more interesting. :)
  • Assign numbers to testers and use to correlate data collected! If you are saving data about users on the computer and want to correlate that with your testing sheets, assign your testers a number before their test begins, and coordinate with any other test admins. How Ryan and I could have coordinated (and didn’t think to, until it was too late) was one admin gets even numbers, the other gets odd. So my testers would be #1, #3, #5, etc., and his could have been #2, #4, #6, so on and so forth. Write the tester number on the questionnaire sheet at the beginning of the test, save out the blank task question buffer in gedit as ‘test-$NUMBER.txt’ where $NUMBER is the tester’s assigned number, then hand the same sheet to the tester to fill out when they’ve completed the tasks. (A note for me: use vim, not gedit.)
  • Collect data on paper rather than electronically! Can you tell I’m frustrated by the issues we ran into collecting the user’s notes in text files? If I had been smart and prepared, I would have typed out the task list into LibreOffice and printed out a stack (At least 20 copies) and had the users refer to it and write their feedback using pen and paper during the test. Then it would have been easier to correlate the task sheets with the questionnaires – just staple them, or write on them, or fold them together, etc.
  • Test out your tasks before finalizing them! We realized after the first test that the wording in one of the tasks was confusing. Oops. We were able to update the gedit buffers (with great pain) on both laptops afterwards, but yeah. Test your test before you run it. Doh!

13408918443_ec3aa55103_b

What were the tasks for Hyperkitty?

Ooh! Do you want to try at home and let us know how you did? You know, that would be quite lovely! Anyhow, here’s the list of tasks:

  1. You’ve got a crazy inbox and you’re really not happy about signing up for high-traffic mailing lists. Based on this, would you rather sign up for the devel list or the astronomy list?
  2. Some of the lists on this system are kind of dead; some have a lot going on. Name some of the lists where there’s a lot going on – people actively making discussions.
  3. You’ve heard about Fedora’s development list (“devel”) and decided to look into it. Who are you likely to hear from if you read that list?
  4. In March 2012, there was a discussion about GPT and Fedora 17 on the devel list. Can you find it?
  5. Find a post you like an add a tag to it so you can find it later.
  6. Start a new discussion on the Fedora users list (“users.”)

If you’d like to play at home, visit lists.stg.fedoraproject.org and let us know how you did in the comments!

So, what did you learn about Hyperkitty?

Our full test results, including the full text from the user’s task notes buffers as well as the user questionnaires (listed in full per user as well as across user per question), are available on the Hyperkitty trac wiki:

At a high-level, we drew a few pretty strong conclusions from the testing experience:

1. Hyperkitty’s search needs more work.

Only 1 of the 8 testers was able to find the GPT posting from March 2012 in task #4! Suggestions the users offered here included:

  • listing more than 10 results per search results page
  • allowing users to sort the search results
  • allowing users to search only within a certain time period (e.g., only in March 2012)
  • simplifying the search results listing of posts
  • making the search box easier to find / more apparent
  • have an ‘advanced search’ page with a lot more searching tools
  • filter search results to only threads you were involved in

2. The users enjoyed Hyperkitty’s look and feel.

Multiple testers asked me about how to set up Hyperkitty for their own usage after completing the test. Hyperkitty earned the following average user ratings on the user questionnaire:

  • Aesthetics: 8.4 out of 10
  • Intuitive: 8.0 out of 10
  • User-Friendly: 7.6 out of 10
  • Professional: 8.6 out of 10

3. The left-hand nav / filters for the mailing list overview weren’t visible to users.

Only one of the 8 testers discovered the left nav on the hyperkitty list overview that would have allowed them to sort the lists by popularity (making task #2 super-easy!)

4. Users didn’t seem to notice the search box.

Only a few of the users noticed the search box. Most users, while on the devel list overview page, noticed the year/month listings in the left nav and clicked to March 2012 when completing task #4. Only a few tried to use search, and most only after browsing to March 2012 first.

5. Tagging needs more work.

Aaron, one of our testers, had a lot of interesting thoughts on making tags useful. For example, we should suggest tags already in use in the system (maybe via tag cloud, maybe via some other mechanism) to prevent users coming up with different tags for the same thing (or at least, preventing that as much as possible.) Some of the users also had a hard time finding the tags – they are associated with threads, not individual posts, so they are on the right-hand side of the thread view. Another issue that came up – some users weren’t sure if the tags were for their own personal usage or if they were viewable to everyone in the system. (The latter is the case!)

Summary

Overall we got a ton of great ideas, feedback, and information from SpinachCon, and it was a really valuable experience. Deb mentioned we may be doing another SpinachCon in the Boston area later this spring; I am totally excited to bring Hyperkitty to SpinachCon again then!

BTW, here’s a screenshot of how Hyperkitty looked to testers, for posterity / comparisons at the next SpinachCon:

hyperkitty-ss

Thank you the Open Invention Network for sponsoring such a great event!

March 18, 2014

DPI and photography
There is a good understanding of DPI among hardware geeks (they may boast about how superior is tablet X due to a higher DPI display), still I am surprised to see how many people from the photography world do not understand this (sometime don't want to learn, on the "is technical stuff, I am an artist and not care about technical details") to the point it becomes ridiculous, so I will try to explain it with simple words, in case someone will pay attention.

DPI stands for "Dots Per Inch" and is a characteristic of a hardware device (for example a computer/tablet/phone display). It says how many pixels are in one inch (1 inch = 2.54 cm). Example: the computer I use to write this piece has a 38 cm wide display, which is 38 cm / 2.54 ~= 15 inches. Considering the horizontal resolution is 1600 pixels, then it has a resolution of 1600 pixels / 15 = 106.67 DPI. Of course, the higher the DPI value, the better looking the image will be on your display, as it will enable to to see finer details.
dpi screen
In digital photography the situation is different: your photo is a file and it can be put on a wide range of displays. The DPI value is not as important as the actual image resolution in pixels, it is actually metadata. Actually the correct term when talking about photos is PPI, standing for "Points Per Inch", but PPI and DPI are close enough, is not a huge problem if you interchange them. PPI is relevant when you print the image, is the density of color points to be printed by a inch. The math is similar and having a target print size and print image quality (PPI), it will help determine the needed pixel resolution. Example: you want to print a 15 x 10 cm image at good quality (300 PPI). On the horizontal 15 cm / 2.54 = 5.9 inch, then 5.9 inch * 300 PPI = 1770 pixels. On the vertical, 10 cm / 2.54 = 3.96 inch, then 3.95 inch * 300 PPI = 1182 pixels. In conclusion, you will need a 1770 x 1182 pixels image. 1800 x 1200 is close enough and easy to remember, so a 1800 x 1200 image will print at good quality at 15 x 10 cm.
dpi print
JPEG is the file format we use day to day to exchange photos and it has the ability to store a DPI value somewhere inside its metadata, but is only metadata: an indication at which size (in cm or inches) to print the file. But you can print the same file at any dimension or any DPI/PPI value (of course, with the respective image quality consequence). Changing this value won't modify in any way the look and work of your digital file.

Now, what is a good DPI value for your print? This depends on its intended use, of course :) A 300 DPI is considered good enough for a quality print, like those in the glossy magazines, where you look closely and expect to see fine details. When printing a poster which will be seen from a couple of meters, you can lower the DPI value at 100 and for a billboard to be seen from tens of meters, you can go way lower: it does not mater the printed points are huge when looking closely, nobody will do that.

Now another practical example to illustrate the ridiculous part and how to deal with it. For a recent photo exhibition (it is still on display), the requirements were "100x66 cm at 240 DPI". This is ridiculous: 100 cm / 2.54 = 39.4 inch, 39.4 inch * 240 DPI = 9456 pixels and 66 cm / 2.54 = 26 inch, 26 inch * 240 DPI = 6240 pixels, so to satisfy it you need a 9456 x 6240 photo, which means 9456 * 6240 = 59005440 - you need a 60 Megapixel camera to produce it. Nobody in the target group for that expo has access to such a camera. What to do?

Knowing the people, I can safely say most of them just ignored a requirement they don't understand, and even if they understand can't follow. Still, some tried their best and this is the right thing to do, consider other exhibitions have sane requirements you can, and then should, follow, like the one asking for 1400 x 933 at 96 DPI.

The most obvious thing to do is to resize your image to achieve the needed resolution in both pixels and DPI (GIMP example below). This is sensible thing to do when you scale down the image, as in the 15 x 10 cm case, (reduce the pixel resolution count) and you can optimize interpolation method and post process your image. However, when it would need to scale up, as in the 100 x 66 cm case, is not only a waste of resources and time, extrapolation will lower the image quality so the result will be worse than printed at a low DPI value.
dpi print
What I do in such cases (and I got my images accepted in quite a few exhibitions) is to give the image at the largest pixel resolution I have available and then set the metadata DPI value for the desired target in centimeters, even if lower than the requirement. Is going to be the best print I can anyway.
dpi print
Most of the photos you will encounter have a value of 72 DPI, this is because that is the value assigned by default by the camera for historical reasons: it was the common resolution for computer displays when digital cameras were introduced to the market, at the time we used 14"-15" CRT monitors. I am not sure I can change it inside my Canon, but it does not matter: most of my photos are to be shown on a computer display and I can change the value (as shown above) when editing for a special print.

Of course, as I told above is specific to photography. For illustration/vector graphics is a different matter, we may talk about at another time if there will be enough interest.

March 10, 2014

Derechos civiles en Venezuela: La propia imagen

Ser fotógrafo impone un reto a respetar la privacidad de aquellos que son capturados en nuestras imágenes. No es raro ver fotógrafos que retraten a extraños en la calle y por ende, nos preguntamos ¿Qué sucede si alguien toma una foto mía? ¿Qué puede hacer con ella? ¿Qué puedo hacer si no estoy de acuerdo con lo que se hace o donde se publique la misma?.

En Venezuela, a falta de una ley explícita sobre el tema, conociendo como funcionan las leyes de protección civíl en distintos paises y jurisdicciones internacionales, y luego de hacer un estudio exhaustivo de las leyes nacionales; les redactaré estas líneas para que, tanto mis colegas fotógrafos, como aquellos que son fotografiados, conozcan el alcance legal de las atribuciones que ambos partícipes pueden tener.

Robyn at Flock 2013

¿Qué es el derecho a la propia imagen?

El derecho a la propia imagen atribuye a su titular la potestad para disponer de su imagen física, impidiendo su difusión salvo que el mismo de su propio consentimiento. Los avances tecnológicos permiten mil maneras de reproducir la imagen de una persona sin que ésta pueda llegar a apercibirse, por lo que este derecho es una garantía frente a aquellas intromisiones ilegítimas sobre la vida de la persona que consisten en reproducir su imagen física por cualquier medio que pueda hacerla identificable (televisión, vídeo, fotografía o incluso caricatura), con absoluta abstracción de su propia voluntad. Al reconocer este derecho, se trata de proteger un bien jurídico que, como el resto de los que definen los derechos fundamentales, se basa en el respeto al valor constitucional de la dignidad de la persona.

Como fotógrafo ¿Qué debo hacer para que el Derecho a la propia imagen no sea violado?

No es suficiente colocar una licencia Creative Commons, porque esta no ampara a la persona que está en ella. Trataré este punto basada en tres posibles escenarios, cuando fotografiamos a personas en un evento contratado, cuando fotografiamos a personas en un evento al que asistimos y cuando fotografiamos a extraños en la calle.

Cuando fotografiamos personas en un evento contratado.

Lo primero que debemos hacer como Fotógrafos es entregarle a los involucrados un documento donde ambas partes hagan una liberación de modelo o consentimiento de fotografía, para que las personas identificables en la imagen no puedan demandar. Acá hay un simple tutorial de como redactar este tipo de documentos. En mi caso personal, extiendo siempre el alcance, si mis clientes están de acuerdo, indicandoles que podría utilizar sus imagenes para concursos o exposiciones, y que ellos no pueden atribuirse la realización de la fotografía como tal, pero, que pueden reproducirla cuantas veces quieran para uso personal.

de la Ley de Derechos de Autor

Capítulo III
De los derechos afines al derecho de autor
Artículo 38.- El derecho de explotar una fotografía realizada por un fotógrafo profesional, puede ser objeto de cesión en las mismas condiciones que la efectuada bajo una relación laboral, en los términos del artículo 59 de esta Ley. 

 

Cuando fotografiamos a personas en un evento

Este es quizás el caso más delicado, porque no es lo mismo tomar una foto de una multitud a una foto de un particular. He asistido a infinidad de eventos donde he fotografiado a muchisima gente, sin embargo, hay dos tipos de eventos: Aquellos donde los organizadores colocan un parrafo de aceptación donde los asistentes permiten que todas las imagenes que se tomen de ellos podrán ser usadas para fines publicitarios de los mismos organizadores y aquellos casos donde simplemente no hay ningúna regla. En este último caso todo depende de si los organizadores reciben remuneración monetaria o no.

Si los organizadores explícitamente hacen que aquellos registrados firmen este acuerdo, aplicaría el mismo artículo como si el asistente hubiese firmado un Consentimiento de fotografía, por lo cual no puede demandar sobre el uso de la misma.

Si los organizadores no han redactado ningún documento y el evento es pago o de remuneración para la organización, entonces la persona puede demandar la remoción de dicha fotografía. En mi caso, me ha tocado eliminar varias fotografías anteriormente, sin embargo, preguntar a la gente antes de tomarle una foto ha sido una solución bastante simple.

Capítulo II
De los límites de los derechos de explotación
Artículo 43: Son comunicaciones lícitas:

  1. Las verificadas en el ámbito doméstico siempre que no exista un interés lucrativo.
  1. Las realizadas con fines de utilidad general en el curso de actos oficiales y ceremonias religiosas, siempre que el público pueda asistir a ellas gratuitamente y ninguno de los participantes en la comunicación perciba una remuneración específica por su intervención en el acto.
  1. Las efectuadas con fines exclusivamente científicos y didácticos, en establecimientos de enseñanza, siempre que no haya fines lucrativos.

 

Cuando fotografiamos a extraños en la calle

En este caso, la mayoría de las veces las personas salen borrosas debido al movimiento o sus caras no son lo suficientemente nítidas debido a la multitud. Sin embargo, lo mejor es entender que si una de estas personas ve su fotografía y no está de acuerdo con su publicación, como fotógrafos, tenemos el deber de eliminarla O pedir que firme una Liberación de modelo.

Ahora, como fotografiado o modelo y viviendo en Venezuela ¿Qué puedo hacer si NO estoy de acuerdo con el uso de mi fotografía?

Internacionalmente hay muchas leyes que amparan la privacidad de imagen, y aunque no hay una ley directa sobre este tema, la Constitución y la Ley de Propiedad Intelectual son un basamento suficiente para solicitar al fotógrafo que elimine tu fotografía. El  basamento legale principal es el siguiente:

Constitución Nacional de la República Bolivariana de Venezuela
Capítulo III
De los Derechos Civiles
Artículo 60. Toda persona tiene derecho a la protección de su honor, vida privada, intimidad, propia imagen, confidencialidad y reputación.
La ley limitará el uso de la informática para garantizar el honor y la intimidad personal y familiar de los ciudadanos y ciudadanas y el pleno ejercicio de sus derechos.

¿Como ayudarte si estás en desacuerdo con el uso de tu imagen propia?

Lo primero es acudir al diálogo e indicarle a la persona que no estás de acuerdo con el uso dado a tu imagen. Si esto no funciona, deben intentar llegar a un acuerdo. Como último recurso, y amparado en la Constitución, puedes actuar via amparo Constitucional, Demanda Civil o Demanda Penal. Esto se debe realizar por la Defensoría o la Fiscalía, la cual actúa en 48 horas de oficio.

Hay que recordar que solo se debe llevar a la ley cuando la fotografía denota actuaciones en contra del honor, dejando al escarnio público, vilipendio, etc; la imagen personal. Recordemos que cada ciudadano tiene un amparo de protección de su honor, vida privada, intimidad, propia imagen, confidencialidad y reputación en la Constitución.

Ahora, en la Ley de Derechos de Autor se menciona lo siguiente:

Capítulo II
De los derechos de los artistas intérpretes y ejecutantes
Artículo 92.- Los artistas intérpretes o ejecutantes, o sus derechohabientes, tienen el derecho exclusivo de autorizar o no la fijación, la reproducción o la comunicación al público, por cualquier medio o procedimiento, de sus interpretaciones o ejecuciones. Sin embargo, no podrán oponerse a la comunicación cuando ésta se efectúe a partir de una fijación realizada con su previo consentimiento, publicada con fines comerciales.

Notas Finales

No es un secreto que la ley tiene ciertos vacíos, sin embargo, en cuanto a la protección de la imagen e integridad del ciudadano es bastante estricta. Recordemos que como fotógrafos tenemos una labor de retratar la realidad y no denigrar a quien tenemos frente a nuestro lente.

Queda mucha tela por cortar, sin embargo, por algo hay que comenzar. Estaría feliz de comenzar un debate sobre el tema, generar algunas propuestas y redactar un comunicado que pueda ayudar a enriquecer las leyes actuales para que nuestro trabajo, y la integridad de las personas que fotografiamos, queden intactas.

Fuentes:

 

March 07, 2014

Arte FLISoL 2014

Como siempre hay que renovar, acá les dejo unas simples propuesta para el arte del 2014. Está bajo licencia CC-BY por lo que pueden hacerle las modificaciones que quieran mientras le den un pequeño agradecimiento a su servidora :)

Todo está en Vectores menos la línea de la ubicación, la cual pueden editar libremente en el SVG. Si no encuentran la tipografía, es Comfortaa (la pueden descargar dando click al link)

Espero les agrade, les sea útil y si necesitan algo más, no duden en avisar! feliz FLISoL!

afiche-flisol