Designing some Internet of Things – The Town Light

I have been experimenting lately with some Internet of Things (IoT) object. Some time ago, I attended a workshop at the MadLab at Manchester. Adrian McEwen presented his Bubblino, an Arduino bot that makes bubbles triggered by a Twitter message. He has written a book about designing IoT things. Based on all these examples I started experimenting myself. Working with some IoT myself, I started planning how user interfaces (UI) might affect how do we use the data that is streamed on the Web.

The Night Light Town

This is an experiment that reads the amount of light. The light data is sent to a server, which then is returned. Once the data is sent back, the Arduino reads the value and depending on the intensity, it turns on or off a LED.

To set up this you need:

  • Arduino
  • Arduino Ethernet/WiFi Shield
  • Photocell
  • 1k Ohm Resistor
  • 220 Ohm Resistor
  • A Breadboard

Here is the layout. You can use Fritzing to check more in detail how to set it up.


Fritz File

Alternatively you can download the Fritzing File:

Using Xively to Monitor Data

 Xively is a service that allows you to monitor data and then make other services or object react. In this case I use it to dump the light data to it and then get it to send it back to me. I followed the basic tutorial from the Xively website. Nevertheless, they provided the code for the WiFi Arduino Shield, so I had to make some basic modifications. This final script was based on the ones provided by Xively and Paul Bellamy.

Here is MY final code. (Make sure you include the libraries)


The Deity Collector

The Deity Collector

A Downloadable Tangible User Interface for Constructivist Museums

Now that I have started my PhD in Web Science, I wanted to talk about my MSc research project. I managed to produce a comparative study in between three tangible user interfaces (TUI). I was under the supervision of Dr. Enrico Costanza and Dr. Leif Isaksen. I learned a lot about Constructivism for museums and for educational theory. On the other hand I realised how much I still have to learn, or how little I actually know about Physical Computing and Human Computer Interaction (HCI). This was a very nice eye opener and motivating to carry on with my research pathway.

This post is more about where this is taking me, instead of the actual research method. If you would like to know more, I recommend you to go to my research blog .

My research poster

This is my poster from my MSc research project.


MSc Javier Pereda

I would like to thank PixEden for the characters kit from my poster. They produced a manga characters kit (Vector Based) completely free. I strongly recommend checking their work and their freebies! Here is the link for the characters:


Some nice events

I have been presenting the project in some conferences and academic events. I have been getting very good feedback.

This video is an interview from the DigiFest, where I presented my poster for the first time.


I also presented in the Digital Transformations Moot in London. This is a video where Nicole Beale and Dr. Gareth Beale were interviewed and presented some of the work that we are doing in the areas of Web Science and Digital Humanities at the University of Southampton.



Stop Fenton 2012 – The slacktivist campaign.

I have generated a set of graphics that emulate the Stop Kony 2012 campaign. This is based on an idea that I saw on a television show in which the popular video of Fenton the Dog is blended with this type of campaign. I explain my motivation behind this project and some new concepts of the new digital world  that we are living in.

Beyond the criticism of the Stop Kony campaign I am focusing on the ‘slacktivist’ element to make us realise how susceptible we are and how easy is to spread an idea through the Web.

Stop Kony 2012

Youtube Stats Kony

Kony Youtube Stats

The last 6th of March of 2012, over 20 million views in less than 5 days. This has been the fastest spreading viral video of all times. The video covers in a simplistic way the problem in Uganda where children are being abducted by military guerrillas lead by Joseph Kony. Regardless of how naïve or accurate is the producer Jason Russell’s vision of how to solve the problem, it is the most successful case in which awareness is created toward a socio-political problem in Africa or even the world.


People are capable of engaging into these types of campaigns in which an effect of inclusion occurs with the audience. We feel that we are part of the campaign because we used 30 minutes of our life to watch the Make Kony Famous video, and even more if we share the video or use our social network profile(s) to post our virtual support towards the campaign. We are becoming ‘slacktivists’ a blend of activists with slacking attitudes in which we care but not enough to do something significant.

So, is this damaging real activism or is the virtual awareness actually promoting action toward solving these issues? As slacktivists we are very unlikely to search for the most appropriate solutions or information toward the topics. Most revolutions have started with the educated middle class that have the culture, knowledge and some means to start the change of ideology. This promotes a gap in between activists and slacktivists. The Kony case has had many replies that indicate that the problem is not within Uganda but in the Western capitalist governments that have made Kony’s case possible. Nevertheless this is not the objective of this post.

Invisible Children is the organisation behind the Kony campaign. They have generated a mediated campaign with many celebrities and solvency behind that allows that strategic “aggressive push” of advertising and media dissemination. They as many NGOs are businesses that are focused on making a profit. Invisible Children has spent less than 4% of their money in Africa. This just generates a different perspective for me and for many other people.

10 o’clock Live

Episode 05 – Season 02 of the Channel 4 show 10 o’clock Live, Charlie Brooker came up with a quick presentation about the Kony campaign. In this dialogue he (or his team) brought a campaign that instead of stopping Kony, we will campaign to stop Fenton; a dog from a viral video from Youtube. This motivated me to produce the graphics for the Stop Fenton 2012 awareness campaign.


For this I created a series of posters, banners and social network imagery to be used. All these under (CC) Creative Commons License. So, if you use them please reference me for credit.

Stop Fenton 2012

I have utilised the same typography used on the original campaign. the most important elements are the deer as a logo an the Fenton 2012 typographic elements. It contains the same effects of red background with faded print. This generates the rough effect instead of being a very ‘polished’ design. It still needed to keep the same characteristics as the original concept.

Fenton Trinkermedia

Stop Fenton 2012 by Trinker

The full images can be found in my Flickr Gallery

Profile PictureFacebook TimelineAllA4 - PosterFentonBannerOption 2
Option 1

Stop Fenton 2012, a set on Flickr.

Extra links if you are interested:


Reply from Uganda’s Prime Minister


Press Color Separation

Understanding colour for press.

Color separation process

The process of color separation starts by separating the original artwork into red, green, and blue components (for example by a digital scanner). Before digital imaging was developed, the traditional method of doing this was to photograph the image three times, using a filter for each color. However this is achieved, the desired result is three grayscale images, which represent the red, green, and blue (RGB) components of the original image:

The next step is to invert each of these separations. When a negative image of the red component is produced, the resulting image represents the cyan component of the image. Likewise, negatives are produced of the green and blue components to produce magenta and yellow separations, respectively. This is done because cyan, magenta, and yellow are subtractive primaries which each represent two of the three additive primaries (RGB) after one additive primary has been subtracted from white light.

Cyan, magenta, and yellow are the three basic colors used for color reproduction. When these three colors are variously used in printing the result should be a reasonable reproduction of the original, but in practice this is not the case. Due to limitations in the inks, the darker colors are dirty and muddied. To resolve this, a black separation is also created, which improves the shadow and contrast of the image. Numerous techniques exist to derive this black separation from the original image; these include grey component replacementunder color removal, and under color addition. This printing technique is referred to as CMYK (the “K” being short for “key.” In this case, the key color is black).

Today’s digital printing methods do not have the restriction of a single color space that traditional CMYK processes do. Many presses can print from files that were ripped with images using either RGB or CMYK modes. The color reproduction abilities of a particular color space can vary; the process of obtaining accurate colors within a color model is called color matching.

– from Wikipedia

The interface

I have developed a small interactive interface that will be able to help understand this process.

Try to match the images to create the CMYK composite.

--> Click to launch the Trinker//CMYKinterface <--

101.a Defining an Interface // Exercise

101.a The Exercise.

Building a basic website.

Through this exercise we will be building a basic website.  At this stage we will not be covering any scripts or codes for it, all we need to do is understand how these interfaces work and perhaps start planning and defining our design methodology and process.

The Mind Map

The first thing that we have to do is to define what are we going to present, this could be our main subjects or areas for our website.

What I recommend to do is to create a mind map of all the possible linkage in between our subjects or areas.  For this you can use a simple piece of paper.

As you can see we have 4 main topics or areas.

  • Home
  • Portfolio
  • Clients
  • Videos
  • As external links we will be using Flickr and Apple.

I have also defined the linkage in between our areas.  If you look closer into the arrows, we can see that Home is capable of connecting to Portfolio, Clients, Videos, Flickr and Apple.  Portfolio can connect to all the areas except Flickr and Apple.  We have to be very careful when we design the mind map to be as close and accurate as our main website or at least closest to what we have planned for our interface.  Make sure that you won’t leave anything out!

After defining our main areas, the next step in our methodology will be to assign file names to each of our areas.

If you remember from the previous post, we have to create .html or .xhtml documents. The easiest or more logical (for me at least) thing to do is to name our pages with the same or closer name of what we have already defined.  This is also very important to integrate into the mind map, since it will be our reference for all our linkeage.

Here is where we start using our first rule: Our first page has to have the filename of index.html so the browser can identify the first starting page for the website.  If you call it home.html, the browser will not find the appropriate document to render the information.

The second rule and recommendation for naming your areas or pages will be not to use capital letters, special characters or spaces.  The main problem with using special characters or capital letters is that later on it will be more complex to remember which name started with capital letters and which ones don’t.

The problem of using spaces will be that if you are working on a Mac computer and you use a space, when you translate that name with a space into a windows machine, that space will be transformed into a different character because of the way the Windows systems read the file formats, which means your file will have a different name in Windows and your browser will not be able to find it.

The next image shows the names I assigned to the areas of my mind map above.

As you can se above:

  • Home = index.html
  • Portfolio = port.html
  • Clients = clients.html
  • Videos = video.html

Making our first website

Now that we know the pages that we require, we can start creating them using Dreamweaver.

Before actually starting to create the pages we need to define the website.  This process means that we will map all our files towards a folder, hard drive or location in the computer, so when we place it on a server or any other location, all the files will be linked properly and we will not be having any missing links.

Define a website on DW welcome screen

When you launch Dreamweaver you will get the welcome screen.  In there you can find the Dreamweaver Site shortcut.

If your Welcome screen does not open, you can define the site from the files palette. Window-Files (shift+cmd+F).

Manage Sites will allow you to visualise the different projects that you are currently undertaking on your local or network folders, and you can be able to preview them as green folders with the name of your managed site.  Make sure you don’t just start storing files on any location on your machine.

If you start to work on a different computer, you will also have to manage your website in relationship to those files again.

When you click on Dreamweaver Site / Manage Sites, you will be able to see the new Site Setup Window.  I am working with with Dreamweaver CS5.

Go to Site tab and where it says Site Name, go ahead and type: Exercise01.

Now go to the finder and create a folder on your computer and call it Exercise01 and then use that path on the Local Site Folder, you can use the folder icon on the Site Setup Window.  The Servers, Version Control and Advanced Settings we are going to leave them alone.

Lets start making the pages!

We will go to File-New, we will create a New Html with no layout.

Make sure you are on the Design view, by clicking on Design on the top left corner of you Dreamweaver interface.. At any moment you can change your view to Code, Split (Code/Design) or Design only.

Go ahead and type some content on that page which will become our Home, and lets save it as index.html.  We will repeat the process of creating the rest of the files by going to File-New; and create new Html with no layout and create your Portfolio, Clients and Videos pages.

If you want to visualise what you just wrote on a browser, you just have to click on the Preview/Review in browser button located on your tools palette.

Placing content

To start placing content like images or buttons on our website, what we have to do is open our Insert Palette and make sure that palette is on the Common tab.  From there we can be able to insert different types of media.

Basic Linkeage

There are three basic ways how we will be creating hyperlinks on our website.

By typing the name of the file on the property inspector, by pointing to the file or by browsing to the file.  This process can be also reproduced with images like jpg, png, or gifs.

Here is a video showing the way to create the hyperlinks.

Placing images

The most commonly used image formats for web are jpg, gif and png. Jpg have the widest colour range and is the most recommended one for pictures.  Gif is a very old format that allows us to create some animation with it, it can also contain transparency, the only issue is its compression which is not great.  Png is quite a not so old format that most browsers support now and can offer us an excellent compression, transparency but with no animation, This is perhaps the one you want to use for your logos and vector images.

The next video will show you how to place any kind of image into your website and centre it.

Web Custom fonts

Typography and the Web.

When we design a website, the browser will access the fonts that are installed in the computer of our user.  A website is basically text, images, videos and ornaments arranged through an xhtml or html document.  We use tags to assign format to certain type or ornament elements of our design.

Through html or CSS2, we have been able to use downloadable fonts for our websites, now its lack of interoperability  has been forcing this WebFonts to be less and less common.

Step 1

The basic website.

We will start with a basic website.  With our basic tags, or you can create your own.  At this moment I will be working with my <h1>, <h2> and <navigation> tag where I gathered the navigation links with a <div>.

Step 02

sorcu (Simo Kinnunen) and Cufón

I will start this next step by introducing Simo Kinnunen and a beautiful type renderer for the web called Cufón.  This is one of the most basic and simple ways to embed fonts on to our websites.  It is basically compiled of to essential parts.  The font generator in which fonts are transformed to SVG fonts and then to VML paths.  The second part will be the renderer which is completely engineered in JavaScript.

• Get cufón.

It is recommended to use the YUI-compressed version of cufón. You can download it from the cufón website.  Download it an make sure you host it on your server on on the same folder project.

• Generate a font.

We can use any font and transform it using the font generator.

This will generate a file which in the name of the document we can notice the weight of the font with a numerical value,  400 is equivalent to normal as 600 is to bold.

For example: Once we convert Kelvinized font, it will result in Kelvinized_400.font.js The name of the file is not really that important as the number next to it.  That way we can identify our fonts easier.

Step 03

Apply the fonts

Basically now what we have to do its to apply the JavaScript code to our website.  We have to place it in between the <head> tags of our html document.

• Start by loading cufón and loading the specific font that you are looking for


• Now we initialize the script.


• We can now start to personalize our script based on the tags that we used.
Cufon.replace('#navigation a');

Taking it a little bit further.

• We can use specific colours, shaders or gradients for our fonts, just add them to your selectors!

Cufon.replace('h1', {color: '-linear-gradient(blue, white)', textShadow: '1px 1px rgba(0, 0, 0, 0.2)' }); 
Cufon.replace('h2', {color: '-linear-gradient(white, 0.5=##fff, 0.6=#fff, teal)' }); 
Cufon.replace('#ligas', {textShadow: '1px 1px rgba(0, 0, 0. 0.2)'  });

101.Defining the interfaces (Introduction)

What is an interface?

At the moment we start interacting with any system and perhaps try to communicate with it, we have to define the method or context in which we will be interacting with it.  This method/context will create some boundaries in between user-system/system-user.  The interface will be the channel through which the user will interact with this system.

In computer technologies, there are several types of interfaces:

  • User interface
  • Software interface
  • Hardware interface

The main goal is to produce a user interface that will make the experience for the user mainly efficient, easy and enjoyable.  This is based on the main concept of providing a design specially focused on Usability.  Merging interface design and usability design, we start introducing concepts from ergonomics, psychology and of course all the standard design theory used for static and dynamic design.

What is the interface for?

One of the most important thing that we have to do, is define what is going to be the main usage of our interface.  At the moment there are millions of interfaces developed everyday.

ArcadeFor example the arcade console has been around us for a long time and not many people actually stops to analyze the concept behind this interface.  We have a visual output which is controlled by a user using a mechanical input (joystick and buttons) inside a software interface (game).  At the same time the user needs to provide a payment through another interface, this one is quite simple: the coin slot.

From these millions of interfaces, we have to understand what is the objective or action that we are trying to complete. Playing music on a mp3 player, playing a dvd, playing a game, browsing a website, teaching a subject, telling a story, visualizing data, making a phone call, performing a task, etc..

One of the first things that we have to do, is to define the need of the interface, what is going to be the purpose of it.  There has to be a need which this interface will be filling

The peripherals of the interface.

After we defined the main usage for our interface, now our next step will be to define the input/output method for it.  In the modern world or at least in what we are going to be focusing on these series, will be designing interfaces which will be interacting with a software and a computer.  This means our main input peripherals are going to be items like: keyboards, mouse, touch-screens, joysticks, etc.  Knowing this, we can start planing and visualizing what kind of options we are going to have and what kind of restrictions too.

If you are going to design a game, then you need to know what is going to be your platform: PC (keyboard, mouse), XBox (controller),  Wii (Remote), so this way we have the main concept and idea of how many buttons, movement restrictions, maneuverability and/or distance to the output that we are going to have for each one and that starts defining our key concepts of what we are going to be using or needing.

Planning our new interface.

In this introduction we will start with one of the most commonly known interfaces: a website.

First of all we have to understand how a website works and how it is going to be interacting with our user.

A website is basically a text document formated with hypertext markup language (html), that also may contain images, videos, animations or any other sort of information that embellishes the document.

This document will be hosted in a web server wich can be accessed through the internet or a local network. We access the information through a Uniform Resource Locator (URL), which contains the address.  The transportation of the information with the Hypertext Transfer Protocol (HTTP), which finally sends the information to our web browser/interface where all the information is rendered.

Anatomy of a website


This is the person in charge of developing the graphics, web pages, scripts and any content necessary for the page. He will be providing the content to the hosting company.  The designer has to be in charge of choosing the proper visual communication procedure and techniques in order to have a successful website.


This is the company that creates the link in between your domain name and your hosting company where your files are going to be hosted. Through this process you pick your .com, .org,, etc, depending on your business needs.

Hosting Company

They are in charge of hosting your files on their servers. Sometimes they can act as the registrar company to provide your an easier management of services. You can access these files using any FTP software.

Technologies and software.

Through these series we will cover several applications and programming languages.  Just to get us started and getting familiarized with these applications I will list some of them.

Html/Xhtml/Css/XML Editors

Mainly we can use any text editor to create and modify any website.  Mostly we will be working with Dreamweaver which is a web page creator software.  Dreamweaver allows to work as a WYSIWYG or as a code inspector, the software can be purchased through the Adobe Website.

In the other hand Text Wrangler, provides us a free option for developing these type of files.  It has been developed by a company called Barebones, which allows you to download this app. for free!  Then we can use any web browser to visualize the information.

One of our last resourses, we can use notepad or any text editor to modify or create the content for our websites.

FTP Managers/Software

The Hosting company will provide storage for our files, these files are not on our computer but on a remote hard drive  somewhere in the world.  We need to access these files somehow.  We can use the web browser to access this remote hard drive (remote server).  Dreamweaver is capable to connect to the hosting server and work directly with these files, so if you already own Dreamweaver, then perhaps you won’t need anything else.  Personally I sue CyberDuck, a free Mac application that allows to connect and transfer your files and the best of all is that its free!  There are other options for mac/pc like Captain FTP, Smart FTP or Cute FTP.

It is recommended to work on your computer and once your documents are done, then you can upload your files directly to the hosting.

TrinkerMedia Wrestling Project

Wrestling as a form of expression.

TrinkerLogoWhat is TrinkerMedia

TrinkerMedia is a branch of the alias I use on the industry to present my work. I started posting and developing as Trinker in 2003.
Unlike the Trinker word in german, the origin of Trinker comes from “trincado” which means  lucky streak, which then I anglicized in order for it to be more commercial and universal.

At the moment I teach several design disciplines on a university in the south east of England, I am also currently working as a freelance for several projects here in the United Kingdom as well as Spain, Mexico and Holland.


As human beings we have been always hiding beneath masks, they do not have to be face masks; they do not have to be made of wood, silk or even iron. However, society encourages us to wear a mask in order to be accepted into it. Using a physical mask enables us to represent something that we are not, or possibly something that we really want to be, or even something that we truly are and we are not even aware of it.

What if we decide to use these masks, not because we have to, but because we want to? What kind of person would you become? A super hero? A villain?

Well, this is what wrestlers do. They create their own costumes, their own masks and impregnate on them all their memories, their culture, their history and their deepest hopes and dreams in order to be somebody in their world. The use of masks comes from ancient traditions in diverse cultures and the design of them represent the most important part of a character because through it, is communicated the essence of the character.

This research will be focused on understanding the background and history of each mask design through an extensive graphical analysis in order to achieve a wider knowledge of how graphical components plays a fundamental role in the identity construction of a character.

As a Mexican graphic designer, my work is imbued with a mixture of cultures, colours and ideologies.  For this material compilation, the work itself is a combination of art and technology which encompasses the identity of my culture.
The idea itself is to present Mexican wrestling and the mask designs especially. There is an immense cult following for Mexican wrestling notably in Japan, the United States and, of course, Mexico.  My work introduces the audience to the hidden world behind the wrestling mask and furthermore, opens doors to the mexican wrestling world.

Most of my work is meant to interact with the audience so they are able to become involved with the characters and the sensations invoked by their designs. This interactive material, combined with the printed material function together thus creating an integral and multi-skilled project.


  • To generate a general understanding of the use of masks in the Mexican wrestling world (historiography, social context and iconography).
  • To generate an understanding regarding the graphical aspects of the wrestling masks.
  • To create a wrestling mask typology (Purpose, character and visual composition).
  • To compare the relation Wrestler – Designer, Designer – Wrestler, within the creation of the mask and development of the character.

Context of the Research

In the last years, several books about Mexican wrestling have been published. However, all these books have always been photographic journals and nobody has attempted to analyse in depth and categorise the masks used. One of the principal tasks as a graphic designer is to deliver proper visual information in the most accurate way. In this sense, it is fundamental now to analyse the empirical information that designers and wrestlers use to develop their own designs, and search for a visual understanding of the process and result.

The research about the wrestling phenomenon has been focused almost exclusively on the social aspect of the sport, becoming necessary a study of the artistic aspect of the characters and specifically of their masks, which are the central part of the personage. Through this investigation will be revealed an unexplored facet of this sport and its relation with graphic design, fine arts, fashion, popular culture, marketing and Mexican history.


For the development of this project four (so far) stages have been considered.

  • Gathering information of the personal and professional process of each individual to develop the character and design. This will be achieved by several interviews directly with the wrestlers, the mask designers and the people who knit them, documenting the information on video and photo.
  • The creation of a photo graphical journal.
  • The graphical, social and historical analysis of the characters.
  • Typological catalog for each one of the wrestling masks.

Current Outputs or Media

Trinker Media Wrestling Project (digiart)

TrinkerLogoWrestling Digital Art


Flash based mosaic generated video output

--> Click here <--

This interface uses any kind of video input which is recognized by the interface and then translated into a mosaic build from over 150 mask icons which act like pixels to generate the brand new image. This interface can be projected on a wall to be used as a wallpaper or can be displayed in any traditional monitor.

The interface contains over 160 wrestler masks icon and can be modified to increase the size of the mosaics.

Basically all you have to do is plug a camera into your computer and allow flash to access your camera.

To allow Flash access to the web cam, right-click on the interface and click on Settings.  On the bottom right side of the interface there is a web-cam icon, inside that menu you can pick the camera that you desire (your computer may have several pre-installed), and pick the USB Class Video.


Flash based animated wallpapers

These interfaces were designed to be projected onto a wall. The bigger the better!

Flash allows to use vector based drawings which means there will be no pixelation on the elements. Each one of the wallpapers contains the typography and visual elements to communicate the character’s essence into the ambience.


--> Click here to view <--


Flash based Augmented Reality

This interface is based on Augmented Reality technology. The main purpose is to present several mask designs on the basic templates. The process is very similar to interface6, where a marker has to be placed to load a 3D object. In this case the marker is placed embedded to the mask and the pattern used as the marker will be part of the design of the mask. The user wearing the mask will present that pattern to the video input, loading the design rendered on 3D on top of the mask and of the user. This will allow us to introduce the user to the same perspective that the wrestlers have from the “inside” the mask.

Augmented Reality

Trinker//Javier Pereda