Wednesday, September 15, 2010

Move the cursor to the right...

I don't feel like explaining yet another Technodrama today, so I'm going to keep this post short.

Today we took our first look at Operating Systems with Introduction to Computer Science. We did this by acting out two Technodrama's.

In the first Technodrama, the actors were asked to move the cursor across the screen by moving the mouse. In the first take of the Technodrama we had a user, the cursor display and the mouse, but in the end we had established that the mouse needs a mouse driver to translate its movement into relative coordinates, which the cursor display can than use to position the cursor.

In the second Technodrama, the actors were asked to click the icon that had been selected in the first Technodrama. This assignment proved to be pretty difficult, as we couldn't agree on how this should happen. We ended up with a cursor display, a window manager, and the actual application that will launch when the icon has been clicked.

At the end of the lesson we had to break down both these Technodrama's in steps, telling which instrument performs what action in each process. You can see my version here.

Tuesday, September 14, 2010

Enjoy your panic

The assignment for today's lesson of Graphic Design was pretty difficult: we had to choose a picture that we had affinity with. This picture had to be put in a 3x3 grid, constantly altering its meaning, like so:

Enhance the message of the photo Change the message of the photo Diminish the message of the photo
By adding an element By adding an element By adding an element
By taking out an element By taking out an element By taking out an element
By exchanging an element By exchanging an element By exchanging an element

We learned that it is very difficult to pick a photograph that is right for this assignment. Some photos are fine the way they are, and do not easily benefit from adding, taking out or exchanging elements, since it doesn't help to enhance their meaning. With these kind of photos, it is difficult to find the right element to add or take out. When adding or exchanging an element, you also have to be very careful not to alter the meaning of the photo when you only want to enhance it. For example, there was a photo of a woman leaning against a wall, apparently waiting for something or watching something. The person who showed this picture decided to add a bus stop sign above the woman to enhance the message. What he actually had done was deciding for us what the picture should mean. In the original, the viewer would wander what the woman is doing: is she waiting for some friend of her? Is she watching a fight? Is she looking at her children walking away? All those scenarios would have been possible with the original picture, but not in the "enhanced" version.

Another lesson we have learned is that it is very difficult to diminish or erase the message from a photo, because every visual object has at least some meaning. For example, when you have a picture portraying a man standing in front of a building, and you take out the man, the picture is still about the building, thus having a meaning.

Our teacher was glad that we had had difficulties with the assignment, and told us to "enjoy our panic", because it shows that graphical editing is not an easy task.To illustrate this, he ended the lesson with a lecture on the book he had created for Industrial Design. Some seemingly simple pages would take him three days or more to get exactly right. He had completed the whole book in 2 years time. This lesson really made me appreciate the layout of books and other forms of visual communication more, and it helped to open my eye to the small details that are present everywhere in graphical work just to make the visual presentation feel right.

Next week we have to combine our second assignment (which was to fix a letter in a typeface) with the current assignment. We have to choose two photos and two verbs and put them in a grid of 2x2. The result is two different photos with the same text on the first row, and those same photos with a different text on the second row.

The story in 12 steps

On Monday we started with some video clips on editing. The message was that editing is what makes or brakes a video. It is the editing which gives a movie a certain atmosphere. An example was the Americans taking down the statue of Saddam Hussein. Due to the close-up shots of cheering people, the viewer perceives that the Iraqi people are very happy with this "act of liberation". When wide-angle shots would have been used for this news item instead, the viewer would have gotten a totally different impression, because most of the people watching the action weren't cheering at all, just watching silently. This proves how strong editing is, and how big the influence of the media is.

In the afternoon we had to present our story in a 12-step format, our version can be found here. This provided everybody with a different way of looking at their own story and theme. We all learned a lot from the way the different groups tackled the assignment, as well as how they presented themselves. One group had one or two members read from the computer screen, while the others just stood there. Another group just told their story, without really sticking to the 12-step format. Some groups had all people telling some steps, while others even used a powerpoint presentation to bring their ideas across. We decided to let everyone in the group present a few steps, with Isa introducing our group and the characters in the story. We decided against using a powerpoint presentation, because we didn't have enough time to create a suitable presentation, and Eliens had told us that he thought it wasn't really necessary to use one anyway.

Most groups created a linear story especially for the 12-step format, based on their theme. We, on the other hand, used our story as a basis for this format and added some things where necessary. This resulted in some steps of the 12-step format being rather vague, because the actual end result (the interactive video) isn't linear, as opposed to the 12-step format. For example, the 7th step, approach to inmost cave, was the 1st choice in our interactive video. When we got comments on the fact that we didn't come up with a linear story for the 12-step format, but used our interactive video as a basis instead, Eliens remarked that if someone was to judge whether we completed the assignment satisfactorily or not, it would be him, and he said that our approach was also OK. He also liked the fact that we combined the virtual world (farmville) with the real world (the server of farmville is located in the park).

This example proves that the Creative Technology is set up in a way that doesn't limit people in the way they cope with the provided assignments, but instead stimulates them to approach a problem in their own way. The result of this is that everyone will handle an assignment in a different way, giving material for a discussion on which way works best, and what can be learned from others.

Languages & Representations

On Friday (10-09-2010) we finished the subject "Languages" by learning about different web development languages. The most basic way of creating a webpage is by coding in HTML. When you want to have a more advanced layout, CSS can be used, a language specifically suited to webpage layout.

The problem with only coding in HTML or HTML+CSS is that the content on the page is the same for every user. When you want to display a different page for each user, you have to use PHP (or a similar language like ASP) to display content based on user input. A common use of PHP is a login system. The user has to provide his or her credentials, and somewhere in the PHP code a database server will be asked to look for a record with the matching user name and password. When this record exists, the user will be directed to a personal page, and when this record doesn't exist, the user will be asked to log in in again.

Web developers nowadays want more than just a static page though. To be able to update the page without refreshing, Javascript can be used. Due to the increased need for user provided content since Web 2.0, an extension had to be build on top of Javascript, which makes it possible to put data in a database or read data from a database without refreshing the page.

After "Languages" we discussed "Representations". Representations are a very important subject in Computer Science, because it affects file size, ease of use and accuracy. The examples that were provided for representations were JPG and GIF. Both are image formats, but they have a very different way of keeping file size reasonable. JPG uses macro blocks at the smallest level. In these blocks, the pixels only differ in brightness, and not in colour, which results in smaller files, because it isn't necessary to storage brightness and colour for each individual pixel. GIF does store brightness and colour for every pixel, but uses another trick to keep filesizes down: the palette of colours is limited to 256 colours.  Although this results in small files, it also limits the file format in its use. A photo, for example, can't be properly displayed in the GIF format. When you only want to show a drawing with a limited amount of colours, however, GIF is a viable option.

We ended the lesson by looking at the representation of numbers, which is often binary in the digital domain.

On sending "beer" and receiving "ber"

Let me preface this post by apologising for the fact that I haven't posted for quite some time. Let me try to make it up by posting four articles at once ;)

On Thursday (09-09-2010) we learned about the AB protocol. We did this by acting out a Technodrama again. Two people participated in the Technodrama: one of them was the sender, and the other one acted as the receiver. The sender had to send a message to the receiver, and this could only be done one letter at a time. The problem was that the medium they use to pass their messages is unreliable. This means that once in a while a message doesn't reach its destination. The only guarantee they had was that when you send an infinite number of messages, not all of them will be destroyed.

At the first attempt, the sender would just send all the letters to the receiver. Unfortunately, the unreliable medium made sure that a lot of messages didn't end up at the receiver, but were destroyed instead. To circumvent this problem, the sender just kept on sending the destroyed letters. In real network communication though, it is impossible to see which messages are lost on the way to the receiver, so the result of just sending all the letters to the receiver would be that the receiver might have some letters of the word, all of them, or end up with no letters at all.

At the second attempt, the sender put a number next to each letter she sent out. In this way the receiver would know that either she got all the letters that were send to her or that she missed some letters. When using this method there are two problems: first of all, you can't do something with the information that the receiver has not got all the letters. Moreover, the receiver has no way of telling that the word has ended. In other words, there is no way to tell the communication has ended.

Both these problems were solved in the final attempt. This time the sender would send a letter with a number, then wait for confirmation from the receiver for a certain time, and when this time has ended without confirmation, the sender would send the message again. At the end of the word the sender would send an “end mark”, signifying that the communication has ended.

In the second part of the lesson we discussed languages, mainly the difference between natural languages and formal languages. The most important difference between them is that in a natural language the meaning of the words are not strictly defined (one word can have multiple meanings), while in a formal language a word can have only one meaning. Another significant difference is that a natural language evolves because the community “owns” its definition, while the definition of a formal language is “owned” by one company, and as a result has little to no change in definition (of course new words can be added to formal languages, but the meaning of existing words are seldom changed).

At the end of the lesson we had to design a formal language, in groups of 4 or 5, with the purpose of describing how to draw buildings. All the groups that presented their ideas ended up with a system based on lines, their length and their direction. Our group ended up with a system of shapes, drawn in a size relative to the other shapes.

After four groups had presented their ideas, our teachers made clear that we could have designed a language that doesn't describe how to draw lines, or even shapes, but perhaps common elements in buildings (windows, roofs, doors) or maybe even complete buildings, which makes the language specifically suited to the task it must perform. This made clear to me that we hadn't paid attention to the sheet about designing a “proper” formal language, which contains the following points:
  • understand the purpose
  • understand the domain
  • capture the essential concept
  • identify the basic "compositional mechanisms"
  • understand the users
Lesson learned: read and understand the sheets before you try to "reinvent the wheel".

Wednesday, September 8, 2010

Do you have some money for me?

Today we had Introduction to Computer Science. The subject for this lesson was Protocols. The lesson started with some examples of protocols, to make us understand what a protocol is and what its use is. This was demonstrated by an anecdote about the French Court, and by a scene from the "Family Guy".

After we had some idea of what a protocol is, some volunteers had to act in a Technodrama, with which we had to find out the protocol for withdrawing money. A Technodrama is a kind of mini-play in which technology that employs a protocol has a significant role. We start off with a protocol that left a lot to be desired, but by continuously interrupting the play, and offering suggestions for improvement, it became more and more refined. We ended up with a protocol that is more or less "the real thing". After this piece of interactive entertainment, we had to make a timeline on which we had to put every step in the protocol. The final assignment was to create a workflow taxonomy for cash withdrawal, using your timeline as a guidance. You can see my version on my wikipage.

The usage of a Technodrama to understand the protocol of cash withdrawal has really shown to me than if you want to understand how a certain protocol works, it is often more useful to act out the protocol, instead of writing it down on paper, as you will become aware of its problems much more quickly. It was also interesting to see that, with a little help, we were able to construct this protocol without actually knowing what problems can arise when withdrawing cash.

Tuesday, September 7, 2010

The quick brown fox...

Today started with a discussion about the "We Create Identity" project. We eventually came up with the idea that you would meet a park manager in the interactive video, who asks you to decide how the problems with the park should be solved. The consequences of this choice will then be shown in a video. We also wanted to incorporate the concept "Enjoying Nature" and "The Power of Nature", for example by having a picnic in the park and by water surfing. Since we didn't quite know how to link those ideas, we decided that it would be best if everyone works out one (or more) of those ideas and then link all the best options in the end to create one coherent story. You can see the discussion about this project on our Google Doc.

In the afternoon we had a Graphic Design class, where everyone had to pick a font, look for a letter in this font that somehow doesn't feel right, and then correct that letter. This resulted in the observation that all typefaces follow a certain set of rules, and this exercise makes us look for the letters that don't follow the rules. In practice, however, we found that sometimes it is necessary to break the rules in order to make the typeface better: sometimes breaking the rules creates a certain identity for a typeface, at other times the typeface might become more legible by doing so, and in some cases it improves the balance between black and white in a printed text.

After most people had presented their work it was time for a lecture on visual language. We looked at several visual messages, identifying their meaning, judging how clear this came trough, trying to work out how you "read" an image and offering suggestions on how to improve those images. This lecture made it very clear that you have to take utmost care when creating a visual instruction. Viewers must be able to see what it means in a couple of seconds, there can be no ambiguity, viewing the image must give the viewer a feeling of comfort, and the image must respect the viewers knowledge and level of development by not having too much explanation of the message of the image. When you consider all those requirements, it becomes apparent that creating a proper visual message is not as simple as it might seem at first.

Following the lecture, there were a few more presentations of typefaces. At the end of the lesson we received the assignment for next week: we must pick a photograph, put it in a grid of 3x3, and add, remove or exchange elements from those 9 pictures. I will explain the assignment in more detail next week after the Graphic Design course. I will also update this post with my own fixed typeface at the end of the week, after I have used all the knowledge I have obtained today to improve my version of the typeface.