Toast is interesting.

Oh man, why do I have to do so many subjects that involve staring intensely at a white, possibly illuminated surface.

EPIC HEADACHE.

Okay. For project B, I've been thinking about it and I've decided to head in pursuit of a data visual rep. The geo-narrative isn't half as appealing to me after the lecture as it was before. So, the data viz wins my vote on the grounds that I would otherwise produce a fairly uninspired geo-narrative. (that and I totally managed to lose my digital camera.)

We're thorugh the looking glass people...

Okay, so it just occurred to me that I never finished last week’s post. Frankly I straight up forgot about it, that and I’ve been battling a severe case of procrastination. Though I do intend to go back and pick at it some more, perhaps when there are less pressing matters at hand- such as this week’s blog post.

Data Visualization:

Or dataviz if you want to be all jargon-professional. So what is dataviz? Essentially it is a means of representing abstract data visually, in a way that exploits fundamental elements that humans can detect (…i.e. colour, shape, pattern, scale) and ultimately leads to the uncovering of new information or assumption.
So, the premise of an effective data visualisation is that it exploits the user’s ability to see. The user should be able to ‘experience’ (or interact with) a dataviz, to further explore and uncover information for themselves through correlations or parallels.

I discovered the merit of a dataviz with this week’s tutorial exercise. Looking at the delicious links kinda solidified what data visualization should entail, more so than it would have had I gone searching for a dataviz on my own.

THIS was the data visualisation that I decided to talk about. I found appeal in its simplicity, the fact that data was accessible in a fashion that was both easy to uncover and understand. It’s also incredibly valuable in terms of representing data because it provides both a broad overview of information and a more intimate or specific insight into the data presented.

(a) So what is shown? The fertility rate or an average of how many children per woman/family, of a country is represented on the y axis. This dataviz takes on the convention of the grid, and utilizes numbers as a means of specific communication. (Upon mouse over the specifics of the item can be found, i.e. 8.3.)The x axis is the life expectancy in a number of years, and again mouse over provides the specifics. Countries use the visual element of colour, shape and placement/position to translate their information. The closer the country’s (represented by a circle) colour is to the colour red, the higher the average of births per woman there are to that country, the further along the x axis the longer the lifespan. A marker can be placed on a specific country, in the form of a hovering bubble, which thus allows an easily deciphered (or “seen”) visual representation of the information.

Once more this dataviz is valuable because of the broad spectrum of information it contains. It not only provides life expectancy and fertility rate for a number of countries but also has a “time slider”, to observe the changes that have occurred within that country over an amount of time. 1960 -2008 to be exact.

(b) I imagine the algorithm for this dataviz would go a little something like this…
Date, = country: x axis, y axis.

Maybe there would be another algorithm for colour: the colour depends on the position on the x and y axis. And of course there would be the stats coded to appear upon mouse over.

(c) Although I think I’ve already had a stab at explaining the visual elements of this dataviz…I can’t think of some kind of way to expand stab into a clever analogy…

Anyway…As I mentioned before the use of the grid is a convention and more importantly a means of clarifying. The general mass knows what function of a x/y axis grid is, the further away from the grid line, in most cases, indicates the higher the value of the entity. So here (time 2008), on first glance we can see that Niger the highest fertility rate, (not doing so well with the life expectancy) while China, Japan and Lichtenstein have the top three life expectancies.

If the concept on the grid is lost on you, colour reinforces what the grid may not. Though our own associations of colour may alter our interpretations of attitude towards the information. For example red for me represents pressure, anger and frustration- fittingly corresponding with my idea of having anywhere between five to seven or eight kids. Another person may associate the colour red with love, yes, lots of love produced that many children. That same person might also believe that the blue for 2- 3 kids is depressing, yes depressing that you don’t have seven or eight children to give your copious amounts of love. Or not, just a theory, or a tangent…

Okay, so those are the two key visual elements that I stabbed before further examined. I have nothing more to say on it.

(d) The interesting finds, included the general decrease in the fertility rate, and increase of life expectancy as the years go on.
Rwanda’s life expectancy dropped from 46.6 (1981)years back to 26.4 from 1988. There was also a significant drop in the fertility rate.

In 2008 the country with the lowest life expectancy is in Afghanistan. At a whopping low 48.9.

In 1960 Europe’s countries had the highest life expectancy. Afghanistan has the lowest.
Timor and Cambodia hit a low in life expectancy in the 70s.

Where most of the countries in earlier times sat within the red to orange range in terms of fertility rate, in 2008 only 3 countries sat in the orange range of fertility rate.

I now realise, that this would never have been found out (by me) and retained in the back of my little mind without data visualisation.

THE SYSTEM WORKS! And isn’t that, ladies and gentlemen, the most important thing?

I go to town when I write lecture notes for networked media. Without them, I would hardly be able to comprehend what Michael is saying. They keep me focused. The following notes regard the subjects of…

Multiplicity:

Multiplicity, the anecdote that Michael used was the one of Francis Galton. In 1906 Mr Galton attended a fair, where he discovered that the average of all the guesses of the weight of a cow was closer to the cow’s actual weight than the closest individual guess. This is of course, dear friends, is the power of multiplicity, where the power of the mass outweighs the power of the individual.

Now multiplicity does not only pertain to the notion of power (power = capability to achieve) but also variety- a different way of looking at things, or a broader perspective.

Within multiplicity there exist two subsections: people and machine multiplicity. Machine multiplicity involves scale and algorithm while people multiplicity involves crowd sourcing and the concept of the ‘wisdom of the crowd’.
The wisdom of the crowd, examples including Wikipedia and open source software, has its advantages in four key areas:

Diversity of opinion, independence of opinion (little influenced), decentralization (interpretation of information is likely their own interpretation) and aggregation.

The power of the people is important because people can do things that computers cannot, or can do things with computers that computers cannot do on their own.

(to be continued...
I'm fighting illness whilst sitting here.)

This week in our tutorials, following the moodle instructions, we were placed into pairs and asked to research a popular site and a less popular one of similar interest or direction and compare the two. We (that is, Mel and I) ended up observing the world of interactive chat rooms-and focused our presentation on the popular teen based chat room Habbo Hotel and the ever growing 3D chat world IMVU.

Using Google statistics we found that Habbo’s popularity was significantly higher than that of IMVU at its peak in 2004. IMVU has yet to catch Habbo, but the possibility is in fact inevitable since Habbo’s popularity is in a state of decline whilst IMVU’s popularity is at a steady skyward climb. These statistics were supported by the site’s online count.

We visited Habbo Hotel: approximately 2000 Australians and just over 1000 Americans online. This was a stark contrast to IMUV’s 50,099 currently active participants.

History of Habbo:

Habbo was launched online in 2000, as social networking website promoted to teenagers. It was originally a creative project of Finnish designer Sampo Karjalainen and technologist Aapo Kyrölä who used it as a chat room for a Finnish rock band. In 2000 the market was taken mainstream by Dee Edwards of the UK, and by 2001 Habbo Hotel had hit the international market being translated into four different languages and appearing in a number of countries.

Collective Intelligence:

The site obviously harnesses social networking, though unlike in the fashion of web 2.0, I don’t believe the users contribute largely to the production and management of the site.

The limitations of rejecting collective intelligence means limitations on the site, it can ultimately only be enhanced by the corporate heads of the site and not the community. Because Habbo is directed at teenagers safety measures and moderation must be put in place, and we believe that this really inhibits the site’s creative growth. It can be no more than just a chat site, customise your avatar, buy credits with your parent’s money and then get over it. The lack of community imput will lead to the death of Habbo.

This is why I believe IMVU’s popularity is increasing. It is a web 2.0 friendly service where Habbo is not. IMVU promotes community involvement through the production of content. The community participates in the interface by creating content and “selling it” for online credits. The interface is thus enhanced and progressed (continues to maintain interest) through the constant stream of new items. The method of community imput has its advantages because the interface will always be a reflection of what the community wants. Its popularity is ensured.
The success of IMVU over Habbo also relies on the structure of the interface. You can very much compare these two programs with the Maxis PC game- The Sims. Habbo is much more like the original sims, can only be viewed from one angle, cartoon like, pixelled, microcosmic. Whilst IMVU is musch more like The sims 3, open world, detailed character customization, active content based community, heavily interactive (with object and avatar) and finally supportive of the customer. Although both are “pay sites” IMVU seems more worth the money.

And that is our little investigation concluded. It was really interesting to hear what the other groups had to present on their findings of the various different sites and the less popular counterparts. I found that the interfaces that thrived- ones like YouTube, Amazon, etc were the ones that were conscious of the community, involving them and benefiting them. The ones that encompassed the spirit of Web 2.0.

Let us backtrack to a post I thought I would have posted before the rationale.

Okay for this post I am going to majorly backtrack to the process of creating my website: more specifically the exact processes that I used and what effect that they had on the appearance or aesthetic of my page.

I’m mostly doing this to demonstrate what I have learnt exploring html and more or less a vague insight into my process, and because I believe that it will make a substantial post to submit when the time comes to send this space of the web to marking.

WARNING: A trek of a read ahead. May damage eyes, and/or brain.

In building my website I really learnt the benefits of the ID tag. Writing this now, I realize that I have come a long way in understanding its properties and purpose since it’s introduction. When Michael first mentioned the ID tag back in week 3, I admit that its full potential didn’t quite register until I was able to put it into use. It is a prominent feature in the CSS of my web page.

When we look at the layout, we can see that it is comprised of “blocks.” Each block has a separate ID. So, the header, sidebar, main navigation bar and footer are all blocks with according IDs. Each ID or block has specific attributes, heights, background colours (specifically black) or background images (the main header). The characteristics are identified in CSS and ‘applied’ to the main document (index.html) by linking to the CSS through the html document.
I.e.
style/type=css….h ref=“CSSurl”…

In firefox if we apply the “margin:auto” tag to the entire page or in CSS id “page container”; the content, or in this case the content blocks will be centered. This is because both the right and left margins will “push” against each other and the content will be centered. This technique was an easy way of centering the layout in a way that applied to all screen resolutions. I found in later construction (specifically for aligning the ‘floating’ iframe) that specifying widths and heights with pixels or “px” would warp the layout for those with a lower or smaller screen resolution.

Although a margin had to be placed over my entire CSS to align it, margins had to be placed to contain each box also. In most browsers default padding is placed underneath under each specified block of CSS, so a custom CSS rule has to be written and applied to both ‘html’ and ‘body’ tags to override it. This means that each block fits together snuggly, or to address the specific problem encountered: there is no gap existing between the main navigation bar and the side bar. Thanks to the “god like tutorial” that I specified in an earlier post, I learnt that you can write a single rule and apply it to two areas of html with the use of a comer. I.e. to apply a rule to both html and body, the rule would be written as:

Body, html { CSS: Rule; }

The comma between ‘html’ and ‘body’ (which are called selectors) means “or”, but because both are written on the core html document it will be applied to both.
Height was specified for all content blocks, except for the sidebar and main content block whose heights and overflow were set to auto. With auto height the content block will be as tall as the browser allows, fitting within the constraints of both the layout surrounding it (in my case the header and the footer) and the browser window itself. Any overflow of content or information is contained within the content box with a scroll bar. The information retains it’s form without a horizontal scroll bar because the width of the content box is specified, though this only applied to the main content Iframe. Content was kept from stretching out other blocks through the use of overflow:hidden. This was specifically applied to the main (horizontal) navigation bar.

Without a specified height of overflow function, the content block will, by default, stretch to accommodate the content. This is a different layout effect entirely, still nice, but not the one that I was searching for.

Constructing this layout I also learnt of something that I wasn’t aware of prior. The float function, which in truth is actually both incredibly useful and incredibly nifty. I can only really parallel the float function to a layer in photoshop. Like adding a layer to a photoshop image, adding a float will place whatever you have assigned the function to above the existing content. It is now “on another layer” separate from the rest of your layout. By default floated elements do not push elements that surround it. It can’t effect, or effectively warp the elements that are around it. A float tag was placed on the main content space, where it was aligned and given a margin the width of the sidebar. Previous to this section of code each content block was aligned vertically, the sidebar and main content block were not placed side by side as intended. The float function essentially allowed the layout to become more conventional in its design.

A side note: later on in the layout I gave the main content Iframe the float function, and could not align it properly within my layout without encountering the resolution problem. After a good few hours of attempting to correct the problem I found that the Iframe could be placed within the constraints of the mainframe CSS block, which retained it’s place throughout the entire ordeal. I learnt the hard way that the most simple solution is probably the best attack tactic when it comes to html. I also learnt that trial and error is an incredibly tedious process, especially on a webserver that does reloads its directory every time save a file.
And back to it: A “clear” property has to be assigned to the footer, because otherwise the float manages to overlap it. When clear is assigned, the float element will come to an end when it comes into contact with the footer.

At this point (because I’ve been writing in vague chronological order) I had a basic layout. I’m sitting on page seven of the Subcide Tutorial. Styling and further solidifying the layout was next on the agenda. At this point the realization slapped me in the face: I would have to employ the Iframe for my main content box. The tutorial fails to mention how the main navigation will link to the body, so using my prior knowledge of html and past experience I utilized the Iframe. Due to the issues it has in Internet Explorer, for me this was a last resort. I attempted other methods of linking using the “target link” technique, but learnt that the main content CSS box that I had created was not a legitimate enough “target” for links.

I explained in an earlier post the function and use of the Iframe, but here here explains and understands it better than I do. The Iframe was the last piece of html to be completed and put into the layout. As I explained previously, it was aligned into the layout by taking the space of the main content “box” that had been specified and created in CSS in the preliminary construction of the layout. I have to reiterate that it took me over 9000 attempts before I realized that html works off simplicity and that fancy floating and margin/align tags were only ruining my layout.

On a similar note I also learnt that failing to close a bracket in CSS will kill your layout or render it void, while leaving our a comma will drive you insane, writing and rewriting code trying t figure out why an image won’t show up. The conclusion: screwing up the HTML or CSS coding process will waste hours of your time. So a piece of advice to myself; or anyone who is reading this, make sure you’re actively functioning when you code, or you are going to end up with one killed headache.

Okay, that may or may not have been stray tangent. Back to the layout. At this point we moved on to making everything pretty. I fired up the Sims 2 and photoshop to take some screen shots and put together my main banner. Yeah, that was my Saturday night. The background image was also constructed with photoshop, as was any the main headers within my content as well as the ‘buttons’ on the main navigation and sidebar.

The construction of the main navigation bar, and the rollover effect I attribute wholeheartedly to the tutorial. I understand that each link was given a “background image” which is the button that can be seen, and was commanded to slide up 50 pixels upon rollover. An image 150 pixels tall was created, the first fifty pixels was the ‘unactive state’ – the white text, while the middle 50 pixels were the ‘cursor state’ (roll over) – coloured text, and finally the bottom 50 pixels were comprised of the “active state” which was a coloured button that would correspond with the open window: altering the viewer as to what section they are viewing. I couldn’t get that final state to occur. That was an incredibly poor explanation, but if we reference the tutorial once more, my explanation might become a little clearer.

(Another realization slapped me, maybe I can’t really explain it because I don’t particularly understand it as well as I like to think I do.)

Within the content box, further styling occurred by placing margins or padding around the headers and the paragraphs. To be more specific, by default there is no space between paragraphs or content placed within the p tag. My layout contains a rule that puts 15 pixels between paragraph tags and gives 20 pixels padding between headers and paragraphs. This ultimately avoids the need for the break tag, which would achieve the same effect, and makes coding content cleaner and more efficient.

So this is generally what went into the construction of the basic layout. After the external graphics were placed in the layout further basic styling was done to change the colour of the content blocks, and footer text. When it comes down to it, the layout created is quite simple and can be built by anyone (as long as you’ve got some good old internet support). I’ve definitely learnt that html is easy to learn when you can type what you want you want to achieve in a search engine and get pages of results, or alternatively view the source of a page that has done a similar thing.

A large portion of the coding was written in PS pad, before it was uploaded onto webs.com which I chose as my free webserver. There was no real reason why I chose this specific host, it was the first one that I encountered. In retrospect webs has it’s cons, which included an advertising bar placed at the very bottom of the page (this can also be considered a pro compared to other free hosting sites which force ridiculously large advertising banners onto a free page – one example of this is free webs.), the directory is incredibly slow and tedious to dig through, and like other free hosts it withholds benefits for paying or donation memberships. I do believe that webs.com was the best choice though out of the other options I have experienced in the past (yeah, I’m talking about you free webs, tripod and geocities.)

Anyway, nearly 2000 words later, this explanation is done, and fortunately so is another weekly blog post.