DAT203: How not to design a website, and the future of the iPad

In today's practical, we've had to pick two of the world's worst-designed websites, and we managed to come up with these examples: alexchiu.com and the official Space Jam film website at www2.warnerbros.com/spacejam/movie/jam.htm. alexchiu.com featured a rather inconsistent design theme, a profusion of formatting and spelling errors, and a heavy reliance on animated GIFs to add emphasis on links and certain titles. Also, we found out that when we click on a different language, the design of the website is completely different, rather than having the same design throughout, which is supposed to be the convention no matter what language is used.

Although the official Space Jam website was designed sometime in October or early November 1996 (which was approximately about a month or two before CSS existed, and before CSS became the norm), it featured many bad design features. The website used repeating backgrounds, inconsistent text, frames as title bars (which can cause confusion as the user cannot tell whether or not the logo at the top left actually is the button that returns to the home page of the website),  usage of the frame as a menu bar, and clashing colour schemes in certain pages, thereby rendering the text hard to read. We also found validation errors and spelling mistakes after we ran the Space Jam website through an online validator, so, even though it is almost an online 'museum' page, someone at Warner Brothers didn't really pay attention to ensuring that the website at least complies with W3C standards at the time and didn't think about the many little spelling errors that the website had. Even some of Disney's older websites had more of a consistent theme, at least.

Now, on to a different subject. We had a debate about how the hypothetical iPad 5 would evolve, and how it would eventually render conventional computers (desktops and laptops) obsolete. There is evidence that mobile devices are starting to overtake conventional computers in terms of sales, and with the proliferation of cloud computing, it could eventually replace the need to sync the device with a conventional computer. According to the IDC, an independent technology research firm (source: http://www.computerworld.com/s/article/9199918/In_historic_shift_smartphones_tablets_to_overtake_PCs), they are, indeed, outnumbering conventional computers, and even though they are already ahead of performance, the evolution of mobile technology is starting to make mobile devices outperform desktops and laptops in terms of speed, and eventually, they would be just as fast that even the most graphically-intense task could one day be performed on mobile devices such as the hypothetical iPad 5, or even its successor.

IDAT 102: Arch-OS bouncing ball visualisation

For my visualisation, I have decided to do a bouncing ball, which is influenced by the values of the first digit of the data captured from Arch-OS's Atrium A Heat Flow sensor in the Portland Square Building of the University. Because I wanted the illustration to represent the flow of the heat (hence the name of the sensor that I chose to use in my visualisation), I looked into pre-existing examples of data visualisations (http://vimeo.com/15088939) before deciding to go down the simpler route for my visualisation.

The data is first taken from the RSS feed using XMLElement in Processing, then the value of the data is taken from the 'description' child of the RSS using "value = xml.getChildren("channel/item/description");". The term 'child' in this context refers to a subsection within a 'parent', which in turn refers to the root of the RSS. The colour also varies according to the values of the RSS data, which varies between darker shades of red and grey depending on how high or how low either values are in each of the RGB attributes of the circle colour property.

The values are then parsed as floating-point integers, which is then used to create values which will be used for the random positioning and the colour properties by getting the content from value and then using charAt to obtain the indexes of the digits:

    float v = int(value[i].getContent().charAt(1));
    float v2 = int(value[i].getContent().charAt(2));
    float v3 = int(value[i].getContent().charAt(3));
    float v4 = int(value[i].getContent().charAt(4));

Then, the values are added to the attributes:

   fill(v,v2,v3);

   ellipse(ceil(random(0,v)) * 8, height/2 + 20, 50,50);

Note that the ellipse uses 'ceil' to round up a random number and the number obtained from the first index of the value (v) to the nearest whole integer, then it is multiplied by 8 to create the X value, and then the Y value is created by dividing the height by 2 and adding that by 20. The result, depending on the RSS value on a given day, is a ball that bounces left and right in rapid motions.

This is the entire source code of the project:


import processing.xml.*;

XMLElement xml;
XMLElement[] title;
XMLElement[] pubDate;
XMLElement[] value;

void setup(){
  size(600,100);
  background(0);
  smooth();
  String url = "http://x2.i-dat.org/archos/archive.rss?source=.AtriumA_heating_flow";
  XMLElement xml = new XMLElement(this, url);
  title = xml.getChildren("channel/item/title");
  pubDate = xml.getChildren("channel/item/pubDate");
  value = xml.getChildren("channel/item/description");

}

void draw(){
  background(255);
  for(int i=1; i<value.length; i++){
    float v = int(value[i].getContent().charAt(1));
    float v2 = int(value[i].getContent().charAt(2));
    float v3 = int(value[i].getContent().charAt(3));
    float v4 = int(value[i].getContent().charAt(4));
    fill(v,v2,v3);
   ellipse(ceil(random(0,v)) * 8, height/2 + 20, 50,50);
 }
}

IDAT 106: Addressable Technologies (crossover with IDAT101 for the research part of the blogging)

For my assignment, I chose to look into addressable technologies. Addressable technologies, depending on one's definition, is a technology that sends information to the receiving end (such as a computer or another central monitoring system. Although there are many uses for addressable technologies, the most prominent use of addressable technologies in a practical application are fire alarms, in which most buildings of the University have. In my application for IDAT101, the installation will make good use of it for influencing the ambient lighting and possibly a video screen behind the DJ booth.

Link to research: http://bit.ly/idat106research