Web Design with FLOSS


Jesús David Navarro

jEsuSdA 8)


Who am I?

Jesús David Navarro

  • GNU/Linux user since 2001
  • Graphic designer and Web developer since long time ago in a galaxy far, far away...
    • Focused in FLOSS, Standars, Accesibility, Usabilty
    • First national price TAW 2009 - Most accessible public website (autonomic range)
  • Not very good English speaker

Linux user 311382
Me. Made using inkscape

All these works are made using FLOSS under GNU/Linux.


How humans are...

Somos aliens?!!

Imagine you are Aliens and you wanted to explore how humans doing Websites.

¡We have a mission!

How are humans doing Websites? and why?

¡We have a mission!


Some questions

You Win!!

You Loose!!

We lost the tool war?!!

You Loose!!

Why not using FLOSS?

Cost evaluation?

We need...

Cost evaluation

Commonly used privative software for web design

  • Microsoft Windows
  • Microsoft Office
  • Photoshop / Illustrator
  • Dreamweaver / Sublime Text

Costs evaluation

Software purchase price
Software Price
MS Windows® Pro 279 €
MS Office® Professional 539 €
Adobe Photoshop® 967 €
Sublime Text® 80 €
Adobe Creative Cloud® 737 € / year

Estimated purchase prices based on official information from Microsoft and Adobe. They may differ upwards or downwards depending on supplier, number of licenses, etc.

These prices do not reflect the Total Cost of Ownership.

Costs evaluation

Mucho Dinero

Almost 2.000€

Costs Evaluation

Software libre para diseño web

Inkscape and Gimp for graphic design, Debian GNU/Linux as operating system and desktop and Geany for layout and web programming.

Costs evaluation

Software purchase price
Software Price
Debian GNU/Linux 0 €
LibreOffice 0 €
The Gimp / Inkscape 0 €
Atom, Emacs, Bluefish, Geany... 0 €

These prices does not reflect the Total Cost of Ownership..

Costs evaluation

¡With the money saved, we to to the party!



Why people prefer spend money buying licences
instead having fun?


Maybe... piracy?

This does not explain the big picture...

What do they think?

or maybe they don't consider them "professional" tools...

You Loose again!!

We lost the war again!!

What do they think?

What kind of websites we can made using FLOSS?

We can do?

Enterprise Star Trek

but we show that


Let's see one example

Let's see one example

What professional means

Who is the designer?

For a long time we have been indoctrinated to value more the appearance than the essence, the aspect than the background of things.

To such an extent they have influenced us that we despise people without knowing their worth, just because they look like what we were told they should look like to be who they are.

Thus, for example, it is common in the world of new technologies for the professional assessment of a person to sometimes be evaluated by taking into account their appearance and the tools they use, rather than by their knowledge and skills.



  • adj. Related to a profession.
  • adj. A person who practices a profession.
  • adj. Person who usually practices an activity, including a criminal activity, on which he can make a living.
  • nb. A person who practices a profession with relevant capacity.
  • adj. Made by professionals, not by amateurs.
  • Definition according to the Royal Academy of the Spanish Language.


    So, are the tools professional or are the people?


    Visto en TV




    So we must...

    An example...

    How I do my everyday work

    Una posible solución, usar GNU/Linux

    Let's see how to made websites using FLOSS