Sunday, May 23, 2010
We would've been, could've been worse than you could ever know...
We have reached the end of an era, the era that is networked media. In crossing the finishing line a time comes for reflection and ultimately a retrospective overview of what has been achieved this past semester, especially in terms of this blog.
Frankly I believe that this blog has assisted me in my journey through the unit. It has allowed me to openly express and organize my thoughts and further obtain understanding and insight into the both the lecture and tutorial content. Each blog post that I have made was made with the some reflective intention whether that was to do with the production projects or Michael’s weekly lectures. I also believe that I would have blogged as often as weekly regardless of the unit requirement because after the first few posts (as can be observed by the shift of my blogging voice – satirical to serious) I really learnt the benefits of expressing thought in type.
Content of the blog: What can I say? Each post captures a state of mind or a state of being. Looking back I can feel frantic when reading slurs in capital letters or excitement with chat-speak (“OMMMGGG”) like remarks. My content was restrained primarily to the content of the course because frankly I didn’t feel the need to branch out into areas of the web or my social life that would not actually drive my work within the unit forward. In retrospect it was important to keep my brain active and on task in regards to the unit, and this was achieved through monitoring the content (keeping it all related) of my posts and the very task of posting weekly. I feel that the “push” to post weekly, although sometimes difficult, was incredibly beneficial in keeping my straying mind on track.
I used this blog to explain things. It might have been a new concept brought up in the lecture. It might have been the exercise we worked on in the tutorial. It might have been the grueling process I underwent in creating a project; nonetheless the main purpose of the blog was to explain. Explain and solidify concepts and ideas.
POST 1 is a prime example of the latter. This is a post that I am proud of, a post where I explained the entire building process of Production Project A. Here I could say everything that I wanted to say in the rationale, but couldn’t because of its sheer redundancy in terms of the rationale’s guidelines.
The two other posts that I am going to share are an example of tutorial learning. The material that we learnt and the knowledge that we gained in the tutorials after blogged not only stick, but are also shared to an audience. That’s the magical thing about blogging and the connectivity o the internet, that knowledge can be shared and spread to a wider body of people.
POST 2
POST 3
Audience: I don’t believe that I reached an audience beyond Michael and the University of Canberra crew. I counted myself on two other blog rolls and have a total of three anonymous followers. Over the 15 weeks that my blog was on the web I received a total of one comment. I think this gives a pretty good overview of the vastness of my audience. I believe it would be impossible to extend my audience into the wider web without giving them something more to offer. Right now ‘Zombie Stomping and Bear Blood’ revolves around a very specific realm of interests, a realm that you really have to be involved with to have interest in. It can be said that the subject of a blog determines its audience, which is especially evident when you look at some of the more successful or “famous” blogs on the internet. Even within the Networked media group there exists blogs which are more appealing to the common audience, they often included reference to the wider topic areas and an impression that they could continue beyond the course.
In retrospect a conscious effort could have been made to ‘connect’ to a broader audience, although I also believe that to do that the purpose and benefit for me as a blogger would have been negated. In my earlier posts I can see that I was trying too hard to gain traffic, and in placing my on popularity my resulting posts contained nothing more than a pathetic attempt at wit and little to no content. Striving for an audience basically led to me a rant pointlessly.
Connectivity: Audience also can be determined by connectivity, where a blog is placed and where it is advertised. In terms of connectivity, my blog connects to the blogosphere through the Moodle database and further connects to other blogs through a blog roll. Connectivity is the one thing I love about the internet, through linking and networking we all affect each other. For instance if I posted the link to this blog on my facebook account, the kids on my blog roll could potentially gain new followers and new friends. Connectivity is the lifeblood of the internet and ultimately the key to knowledge within the blogosphere.
Blogging in General: Connectivity not only provides knowledge but almost a social networking element to blogs. An entire community can be founded on a singular blog roll. For example: “I like sewing here are links to other bloggers who also sew.” Just as our blog rolls established a connected Network Media community. We learnt more about each other and our experiences through our blogs.
What I have learnt this semester is that blogging plays a leading role in communication. I can state with confidence that it is an essential part of the networked principal because it is run by the people. Blogging is just another way to be human, we express, socialize and empathize through connecting with each other. We can also broaden our horizons.
My blog may not be much on it’s own but it stands as a part of a larger picture. It continues to lives as I do, acting as a record, or a library, or a diary for all to see, observe and react to. Maybe one day, in the future it will help someone, but in the meantime this is the end of Zombie stomping.
I bid you, my dear readers (if you are out there) adieu.
Friday, May 14, 2010
End of the line: Project B Rationale
My proposition can be viewed here:
Drug trends and Crime within Australia:
Annually information collected about drug trends within Australia by the IDRS (Illicit drug reporting System) and the EDRS (Ecstasy and Related drugs reporting system) and displayed upon the National Drug and Alcohol Research Centre (Found Here), UNSW’s website. So all information displayed within my data visualisation is attributed to them and their work. ABS was also referenced.
I chose to create a data visualisation on the grounds that they assist in the discovery of information and learning. Through undergoing this project I also have formed the belief that information, especially government founded and supported, would be better released and absorbed by the public if it were in the form of data visualisation. Essentially I believe in the power of the visual for conveying messages.
Research for this project entailed looking at multiple data visualisations and consequently the structure of my project mimics the style of similar information based works. I was largely influenced by Google Public Data who convey information with simplicity and style.
I chose to use this data because it is represents a problem that needs a solution. With drug related deaths and over doses become more prevalent among youth and adolescents, perhaps acknowledgement and understanding of this information, in simple and visual form, will end in action. I believe that a data visualisation is a more effective way of conveying data because of its immediacy (visually gained) and simplicity. Direct relations can be made by the user and it is over all more stimulating to interact with than the standard report.
I thought it would be important to include animated gif images in my proposal. This was not only for practicality reasons, cutting down the amount of images, but also to give a better demonstration and perception of how my project would function if it were to be actually built. The Dataviz was constructed in Photoshop CS2, using up to 180 layers that were effectively turned on and off as the image was saved and resaved to produce “frames” for animation. Each image was imported into Adobe Image ready as a frame and then exported as an animation.
Symbols are a prime informative of the work. They are utilized in both panels, but are predominantly featured within the location or map panel. I made this choice because it symbols are recognized as a convention of marking something not physically based on a map. The map functions to provide information upon mouse over. The user theoretically should gain specific knowledge and insight into a particular crime, which enhances the meaning of the symbol and benefits the knowledge of the user.
The ‘keys’ on the map are reflective of the crimes they represent, a universal perception. For example a hand signifies violence crimes whilst a car is the symbol of driving offences. The choices for the symbols were very deliberate based on what I believed would be audience assumption. I discovered upon viewing copious amounts of similar projects that it is important to work with association patterns for the benefit of both your audience and effectiveness of your data visualisation.
I chose to use circles to represent the drugs because of their inability for tessellation. I believe that the as circles they are not lost visually in a pattern which may occur with squares or triangles especially when colour similarity occurs.
Colour is also an important feature of the visualisation. In The map panel colour is used to distinguish the different drug types. This is essential for the “visual information gain” element of the project as looking at the map it is easy to derive patterns such as specific drug use in specific areas. I have discovered that colour is an important visual informative as you only have to look to understand, no thought or calculation required.
Similarly colour is used in the left panel. I specifically chose to make the ‘most available’ the colour red, because it is often associated with the notion of “more.” The green to red spectrum is also a common feature I noticed in Data visualisation when doing my research. Another example of use of the green to red spectrum is Data Viz. Similarly this project associates the colour red with “more”.
Another visual element I use in the left panel is size. The sizes of the circles correspond to the use of that drug for that year. The larger the circle the more widely used the drug. Again size association occurs, the visual message is received
I specifically chose to use the font’ Rockwell’ because of it’s on screen readability. I attempted to keep my work as simple and as minimalistic as possibly for the purpose of accessibility across a broader audience. Personally I believe that I maintained a level of simplicity that is easy for anyone to understand.
In terms of putting the thing online, although I don’t know all that much about algorithms, I am going to attempt to guess what such algorithm would be used in the construction of my project:
Left Panel:
Year="*"
Symbol="*"
Crime="*" = associated with side bar crimes, number perhaps 1-5
Colour="*"
Location="lat, long"
Mouse over="info"
Right Panel
Year="*"
Circle Class= "e.g. Heroin"
Width= "px"
Colour percentage="*" - colour gradiant given percentages, 100% = red.
Mouse over= "info"
*circles must touch
(I'm probably totally wrong.)
I believe that this data would be most beneficial to the public as a dataviz because it relates drug trends within Australia. Drug abuse is becoming one of our countries concerns especially in an age where parents are overly cautious. I believe that my project, if built, could inform parents about neighbourhood activity and ultimately influence their real estate choices. There is a possibility that it could also be utilized by the police force to monitor trending drug activity, and the prominence of certain drugs on the street which could ultimately determine their course of action.
Ultimately I imagine that the core design of my dataviz could be utilized to display a variety of relating information, such as Drug related fatalities in relation to drug use or the demographic that certain drugs effect. Alternately as the data visualisation could grow to encompass these options after research is conducted.
As corny as it sounds the data visualisation has the capacity to change the course of the world, frankly because it is so much more engaging the way we record information standard, black and white text reports. We seem to be fighting what nature has bred us to do, to absorb colour and shape and distinguish patterns. After this project I firmly believe that if we just coloured our worl a little more, we can strive for change.
Sunday, May 9, 2010
Not much to report on goven'r
I’m thinking that the geo-narrative is more my style…yet…there is something (call it intuition) that is telling me ‘no’. Just ‘no’. So the reasoning centre of my brain (which, random fact, isn’t fully developed in teenagers) interprets that as “A geo narrative is too much work. You have little to no motivation, imagine if you actually had to get up from your computer and leave your dark little room to take pictures. By golly, the world would collapse.”
So there you have it.
Saturday, May 1, 2010
I thought this would have been a more substantial post.
In order to actually begin thinking about production project B I have to write up a blog, and map out a plan of the processes that I need to undertake to get the ball rolling.
1) Find a set of data.
It would be great if this was data that I hold some interested in, or that would give me motivation to complete this assessment. Either way it has to be a broad set of data, applicable to a dataviz in a way that would allow exploration and discovery.
2) Mind map and document the most effective way of visually presenting that data.
Okay, so since I have no skill or knowledge whatsoever on building data visualisations, this is going to be more of a proposal data viz, one that I can show through different images, or perhaps an animated image or slideshow how the dataviz is going to function and allow exploration. I’ll probably work digitally, on photoshop because it will eliminate that cause for scanning where I don’t actually own a scanner.
3) Make the damn thing.
That is pretty self explanatory, and hand it in before the due date. I need to get this started before the next tutorial, which is Wednesday. I need to have at least found my data set, and have explored possibilities of how to represent it visually.
4) Write the rationale.
Again, let’s try to get this done before 2 hours prior to the due date. We’ll aim for a couple of days before.
Okay, so I basically want to knock this over in a week if I can. So that I have time to reflect, edit if I need to and most likely fix any spelling and grammar mistakes I manage to leave on my rationale.
Sounds so simple doesn’t it?
All the more reason to get started.
P.s. I miss Networked Media lectures. On the other hand, I like having a spare hour and a half.
Tuesday, April 27, 2010
Toast is interesting.
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.)
Saturday, April 24, 2010
We're thorugh the looking glass people...
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?
Sunday, April 18, 2010
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.)
Saturday, April 10, 2010
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.
Sunday, April 4, 2010
Let us backtrack to a post I thought I would have posted before the rationale.
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.
Friday, March 26, 2010
Off the map, and over the edge. A Rationale
I chose to pursue the sims as my central topic because of its prominent online following and prominent network, information is both accessible and easily correlated. The community is something that, although never directly involved in, I am also knowledgeable about beyond the basis of downloading and uploading content. Furthermore the monetization of creator content and the outright war that surrounds it is both a topical (within the community) and a fascinating concept that I felt was capable of being presented in the form of an online ‘library’ or ‘gallery.’
In terms of presentation the website appealed to me the most, over a blog or something of a similar format, because of html’s full creative capabilities. I felt that a website and the process of html would also allow me to explore this semester’s teachings without any restriction or constraint. It was also a the format I felt most appropriate for my work, due to the fact that a blog is a representation of personal opinion while I wanted to take a more omniscient and open sided approach to the topic.
Html and CSS acted as the main foundations and technical process in the construction of my project. Coding was completed by hand through the use of the text editor PS Pad , whilst graphics were created with Adobe Photoshop CS2. To me the general aesthetic of my website was important because aesthetic plays an incredibly large role within the sims community. Content is created to acquire a specific style in game, the appeal of creators largely lie in the aesthetic they present and the generally sim-based websites are largely graphic based.
The bare visual of the website, that is the black “L” shaped sidebar to footer, was creating with CSS styling. The html ‘Iframe’ or inline frame, also played a prominent part in the success of my layout. Basically the inline frame allows linked content to appear within a set box. If you observe my website, the main content box is an inline frame, there is also an inline frame placed within the sidebar.
Tutorials such as: this were referenced during the construction of my layout. They were mainly utilized as a reference to code or means of research into maximizing my own use of the code, such as finding an easier way to achieve a specific effect. A specific example of this is the ‘float’ element for creating separate ‘blocks’ and co-existent, as opposed to the use of a html table. Class and ID were also a prominant feature of my layout.
Another part of my technical process was interlinking the wider web, or network with my page through the use of APIS and yahoo pipes. Flickr (a slide show created with this resource) was specifically utilized to provide my website with a broader and unbiased or unedited “gallery” function. Feed Informer was also used with my process to manage feeds independently and put them into html code. It was important to establish a dynamic link into to the sims community to demonstrate both the use of the blog as a host for content and the nature of the internet network. I believed that this could best be established with a several of my favourite creators RSS feeds.
In a cultural context, online communities are a prominent part of the internet culture. The online community exists to support an interest or hobby, whether that be videogames, films, or a figure of popular culture. Within the context of the sims community, the game and its creative tools are just another method of self expression or art. The culture that surrounds the sims community is based on creative freedoms, which is ultimately not endorsed by paysites. The simmers thus have taken on an anti-paysite attitude. Paysites Must be Destroyed(PMBD) is the central hub for paysite protest to occur, it is at the very centre of the community “economy” because it ultimately attempts to abolish it.
My site is ultimately a tamer and more passive observation of the concept, little sites explore the issue of paysites and free sites with a overall view and without assuming a side. I responded to the cultural community ideal that “paysites” are bad through the use of a website to correlate my information. Websites, unlike the forum are not places of direct interaction. I found with the forum, direct interaction disallows one to establish an objective opinion on the matter. This is particularly dominate with PMBD who only promote the destruction of paysites (and thus believe all paysite content to be rubbish), and flame any member with a dissimilar point of view.
As I previously stated, the culture of the sims community is largely art based. Thus the design patterns that exist within it are largely aesthetic. One design pattern that I incorporated into my layout was the large, and colourful banner. Within the community a large banner is used in forums, blogs and sites as a means of promoting the content that the site contains. Banners are largely colourful (though that varies with the theme of the website, or content that the website offers) and assume a decent portion of the page. This can be observed both Here and Here.
I constructed my layout to also follow some of the universal web patterns in website design.
This included:
> The logo of the site linking back to the home page.
> The use of a banner as the header for the page.
> The side bar and side bar menu being situated on the left hand side of the page.
> A footer, and footer links.
> A copyright notice in the footer
> A main scrolling, content frame.
Overall and in conclusion, a community cannot exist without the network that links it. We are capable of gaining so much more through what the interconnectivity of the web, such as APIs. Our webbing experience is enhanced by such things, as they allow us to learn more with a single click. I have learnt that websites require patience, html requires even more and without the network, the sims would be a heck of a lot more boring to play.
Friday, March 19, 2010
Chocolate, did you say chocolate...? CHOCOLATEEEE, CHOCOLATTTTEEEEE
I’m stress eating myself into oblivion right now. OM NOM NOM.
Edit: HOLY MOTHER OF GOD: This may be the answer: GOD LIKE TUTORIAL. It would mean abandoning the concept of CSS Frames, but the basic layout that they manage to build is incredibly nifty.
Tuesday, March 16, 2010
We need to get into specifics. I have several possibilities in mind.
> The forums: the content they provide, and the people they harbor. Forum versus forum.
> A gallery of quality content. (That’s incredibly subjective, and also, plenty of these sites exist)
> Pay custom content versus free custom content, the pirates versus TSR.
>The sims and art, uses for the game outside of gaming. (The storytelling, photo, and video making aspect.)
>The sims economy. Paysites and the like. The Pay/Free war.
I’m not incredibly worried about the specifics of the content at this very moment, right now, sitting here, typing this. Mostly because I’m more concerned with actually constructing html structure in the first place. There’s no use in having content without somewhere to actually put it.
To frame or not to frame:
Essentially Frames have a habit of breaking everything, including your entire internet experience. They manage to shut down the functionality of the internet; urls, bookmarking, search engines, printing and accessibility. I think it’s rather redundant for me to relate exactly how, when THIS article does it so beautifully. Check it out because it also provides the alternative to using frames, which is the “CSS frame.” The CSS fame isn’t so much a frame as an imitation frame, it arranges content within organised and static modules without crashing and burning the usability of your website. Though with many great inventions, and as the article specifies, the CSS frame has its limitations. These limitations mainly regard the overflow function: overflow: auto. From what I understand this function allows a scroll bar to be added if the content overflows it’s designated “frame.” This is not supported by all browsers, and alternate style sheets, and printing based style sheets must be made to avoid this issue. means more work for the builder. The above article, which I’m sure you’ve discovered is the source of my
If I build it early, I test it early, and can thus reassess if the need arises. Knowing my luck it will.
My reasoning behind wanting to pursue the CSS frame is, quite frankly, the aesthetic appeals to me. It gives the illusion of professionalism and structure. The fact that I actually can group the CSS and call it something means that wider resources are available to assist me in the task of building, which is always fantastic for the HTML/CSS novice.
THIS is both the starting point of my CSS Frame research and a representation of the CSS Frame. I thought I would share to help others, as well as providing a visual aid for my aspired finished product.
Another discovery: W3schools maintains that the overflow function is supported by all major browsers.
An end note: As I get more involved in this project, my authorial voice becomes more “essay like.” I find this interesting.
Sunday, March 14, 2010
Shocked? So is your humble narrator.
I’ve finally settled on my topic of interest, the topic that this website is going to revolve around, and that is the wonderful world of the sims community. Why? Well quite frankly it is one that so much information can be divulged on, it is one that few people, including many sims players, know exist. It is a place that thrives on drama and failure and neon colour. Ultimately I was bound to head in this direction, if not specifically the sims community than another beneath the web community umbrella, seeing as the majority of my webbing time revolves around lurking on forums, blogs, or networking sites. Initially I had tossed up the notion of fame or notoriety within the online community. The idea was too broad and too centralised within the art-based communities, seeing as that is where my experience lies. I also think it would be difficult to work this into an “exhibition” format, and too subjective to be the focus of a reference site. Similarly the idea of exploring the “art online” had too many subgenres to cover, so ultimately and more specifically I settled on the community surrounding the Maxis, EA phenomenon, The Sims.
Within the community there are many areas to report on; I hope to include some of the following: the creator, the content, the forums, the artistic purpose and the drama.
In terms of planning, this is where the conversation comes to a close. I’m hoping that in practice I will further develop the format of my exhibition and discover some neat tricks along the way.
Edit: I've been glancing at other blogs, and let me just say that some of them are fantastic, so much in fact that my measly little place on the web seems incredibly inferior.
Tuesday, March 9, 2010
My relationship with HTML, (I use HTML for a good time, then fail to return it’s phone calls) I imagine, is pushing procrastination. To be frank, when HTML and I get together, it’s a little awkward. Almost always we end up fighting. Though, this blog, amazingly acts as a nagging tool, reminding me that no matter how much HTML and I like to avoid each other; I really need it… to pass this course.
So cheers to you HTML, I hope we can put our differences beside us, and work together for a better future, as a team.
CSS is also one of my newer companions. Although we’ve only just recently met, I’m looking forward to working with it more, and getting over the initial CSS shock, in the coming week. A side thought, why is blog a term still ‘incorrect’ by Word’s standards, it’s a totally legitimate for something that’s getting the red squiggly line.
Onto the moodle topics, which was the main purpose for me writing this blog anyhow. I’ve already disclosed my many opinions on both HTML and CSS, but to summarize: it can be said that I get HTML and CSS to a certain extent, but mistakes are still made and the process is largely comprised of reference and trial and error.
Looking at the Semantic Link, I can see that Semantic Markup is an umbrella term for the umbrella tags, the ones that can be edited within CSS. Presentation based markup, I believe the example they use is the bold tag, is one that is not easily edited or accessed as it only pertains to the content within those tags on the HTML document, they cannot be changed and accessed by a style sheet. The link also stressed that semantic markup is much more organized than that of presentational based mark up. I imagine that this is because of the overriding nature of CSS sheets, making the actual core document less clunky and cluttered, and thus easier to read by the machines and search engines.
Cascading: layered, one builds on the other. They add up.
Semantic web: human level expressions. Semantic is what it looks like. Non semantic is what it is
(To be finished off)
Monday, March 8, 2010
I'm at a desk, I'm at a desk, don't you eva forget it
Now that those facts are free and no longer wrenching at my subconscious (we’ve inadvertently discovered the true purpose of the personal blog, to vent), I will elaborate on last week’s findings.
Michael opened the lecture with a reminder; we are supposed to seriously apply ourselves to our blogs. Now, it’s not that I haven’t been applying myself, it’s rather that I haven’t been applying myself as seriously as I probably should. For this blog post I have obviously adopted a more serious authorial voice. This is actually what stress does to a person, renders them into a 50 year old company CEO. Now, I’ll begin this meeting with...
Mash ups and APIs.
API, or application programming interface, is something incredibly useful within the realms of website design. This was particular evident upon observing ‘Beyond Reasonable Drought’ and it’s use of the Flickr API. Although I’m not entirely savvy on the topic, I at least understand that APIs are a means of cooperation occurring between information and software. To further educate myself, I pursued some online research on the matter and discovered (correct me if I’m wrong,):
-APIs rely on XML or Javascript to function.
- Web based APIs allow mash ups to occur, which is a combination of web services.
- Allows web based communities to share data between applications.
-Data is easily accessible from multiple locations.
Wikipedia, (although condemned academically), had a wonderful list, that really solidifies the idea of an API put to use as it provides specific examples of websites that the general masses are familiar with.
Directly sourced from: Wikipedia
Use of API’s to share content:
1. Photos can be shared from sites like Flickr and Photobucket to social setwork sites like Facebook and MySpace.
2. Content can be embedded, e.g., embedding a presentation from SlideShare on a Linked-In profile.
3. Content can be dynamically posted. Sharing live comments made on Twitter to a Facebook account, for example, is enabled by Twitter and Facebook's APIs.
4. Video content can be embedded on sites which are served by another host.
5. User information can be shared from web communities to outside applications,
delivering new functionality to the web community that shares its user data via an open API. One of the best examples of this is the Facebook Application platform.
Basically API’s really improve the functionality of the internet. They make a user’s web experience more convenient in terms of gathering or relaying information, and overall enhance the internet experience.
From my understanding mash ups are usually a correlation of API’s. An example that I gained from the lecture was Neave TVor Everyblock. These sites are combining multiple API’s the present a wholistic collection of information. This was particularly evident with everyblock which combines government databases (for statistics) with mainstream news feeds and flickr. The result of these combinations is a rich catalogue of information concerning a location, streamed from several places on the internet. I’m just dissapointed that everyblock is only specific to the US.
One final lesson that I have learnt this week is one about the superficiality of a blog. The more interested the author is in blogging characteristic such as interesting authorial voice, humour (or lack there of) and quirk the more trivial the content will be. Excuse me now, why I go rescue my mad hatter poster from falling off my wall.
No, that was not some kind of innuendo.
Xanthe out.
PS. APIS = DYNAMIC. Courtesy of tutorial.
Sunday, March 7, 2010
This week’s blog...
Dear me,
Tomorrow, when you wake up, you are going to seriously consider your networked media assessment, and then you are going to write some html, and write a more comprehensive blog on your findings and contemplations.
Okay? Okay.
Sincerely
Your present self.
Friday, February 26, 2010
WHAT WE LEARNT THIS WEEK
HTML: Hyper Text Markup language
CSS: Cascading Style Sheets
XML: Extensible Markup Language
Prior to this week’s lecture, it never really crossed my mind that these terms were in fact acronyms. I lived by the philosophy “I don’t care what it means, I only care what it does.” This was another lesson that was learnt.
What we learnt #1: Acronyms, the world is run by them. There is significant difference between HTML and CSS. XML exists.
I am familiar with html, if only, somewhat vaguely. I became acquainted with html because in my youth, like I mean pre-pubescent youth, I had no friends (I actually did have friends, but they hated me). Html and I would spend hours working, my creative mind and its construction skills together creating wonderful web pages and layouts. I must admit that I couldn’t code off the top of my head, no I copied and pasted codes from html referencing guides.
What we learnt #2: Copying and pasting codes is still the only way to do it. Though you’ll never actually learn what it is you are copying and pasting. (I.e. “I don’t care what it is, I only care what it does.”)
It was relieving when Michael related that html couldn’t really be broke, which makes sense considering it is THE FOUNDATION OF WEB BUIDING. Building webs, then I guess html is much like a spider, and I am a fly getting caught, wallowing and getting devoured by html, there is no escape. Since html is the foundation of web site building, CSS and XML are further building blocks in the construction of a page.
What we learnt: #3: CSS: why didn’t you ever think to research what it actually was? CSS is the foundation of design, not structure like HTML. I suppose HTML is like the skeleton of the whole thing, whilst CSS is a layer of skin and make up.
Elements of design should exist separate to the main structure, CSS can be over riding, an overriding design that can be applied to a co0llection html pages, linking to it through code. That was probably the worst explanation ever, but regardless of my explanatory skills I do understand this, even if my explanatory skills give the impression that I do not. ONWARDS AND UPWARDS. This point (the point I was previously talking about in my explanation of CSS) was truly, once and for all emphasised by The Zen Garden and it’s inter-changeability of layout due to separate and external CSS pages.
The time came to actually write code.
What we learnt: #4: When you fail CSS, (because let's face it, CSS really can't fail you. "It was all studpid CSS's fault." SURREE IT WASSS...idiot.) frustration, howling and broken moniters ensue.
With that I will conclude this very obtuse recount of WHAT WE LEARNT THIS WEEK.
< themesong >< /themesong >
Monday, February 22, 2010
The process of blogging: synonym of trying to march with concrete filled shoes...
Before this blog I used myspace and live journal to post thoughts, though they were hardly what you would call substantial or insightful. These posts consisted mainly of pictures and lacked any sort of authorial voice. I can tell you now that this particular blogging exercise has sparked an epiphany as to why that is: 1) I’m primarily a visual person, I like blogs filled with images for my own aesthetic pleasure (oh yes, pleasure indeed), 2) I find my authorial voice endlessly pretentious and irritating.
In week 2’s lecture Michael mentioned the importance of the authorial voice; it should be engaging and humorous. It should not drive people raging in the other direction, or rather in your direction hurling bricks and rotten tomatoes. I have the self absorbed paranoia that my words could provoke that reaction. In truth the worst my meaningless words, and endless strings of trying-to-be-clever-or-intellectual-but-end-up-looking-like-an-outright-knob sentences could do is provoke someone to roll their eyes and click the close button. The latter reaction is actually worse than the public uproar. If you did actually offend the world enough to put a bounty on your head, you have succeeded in impacting the world. This is the importance of the authorial voice: whether it’s quirky, charming or utterly offensive it will determine the success of your blog. People don’t want to read a blog that they don’t gain anything from.
I hope, my dear readers, that you will gain something, anything from my blog that prompts you to continue reading.
What I love about the internet, and furthermore blogging, is the anonymous nature of it all. Also the fact that blogging is an expression of thought through writing, not speech...which is yet another downfall of mine.
Scanning back over what I have just written, I have totally lost the plot. What was I trying to say? I don’t actually remember, and whatever I have written is obviously too far removed from the original point to actually be retrieved. Fail-sauce.
-Insert astute observation and witty conclusion here.-
Tuesday, February 16, 2010
Introductions served with a side of bad spelling:
The title is a lie, well part of it is anyway.
This is indeed an introductory post, but there will be no side serve of bad spelling, (sorry for all those hungry readers out there, ravenous for some literacy failure) I am, in fact, typing this out in Word. Before you scream cheat, although I imagine the vast majority are who have trouble spelling will be doing the same, I rather appear a cheat than a fool who didn’t listen to the good old primary school spelling lessons and who didn’t complete the good old primary school spelling homework. Believe me readers; I am paying for that mistake all these years later. How utterly macabre.
That was the introduction portion of my post. See, I revealed to you my life story, you already know the reason behind the existence of this blog, and now you and I dear reader have the foundations to be the best of friends.
Because I lack talent for the art of writing segways, I’m going to transition into my next subject of talk with a large and obnoxious title:
WEEK 2 LECTURE: KNOWLEDGE ABSORBED: Mmm I enjoy the subtlety
I'll offer a moment honesty right now, I am surprised how much I am enjoying the unit of Networked Media. It has simply broadened my perspective of importance of and within the web. Now, that is an incredibly broad claim, but let me further explain. For example, the concept of banwidth is now concreted in my mind with that darn ant analogy. Futhermore I've come to understand that there is a difference to copyright and trademark, something that my brain never particularly considered before (it's often too busy sorting through the desires to eat, sleep or stare at self in the mirror). So consequentially and in conclusion the past 2 lectures have heightened my insight into the very alive and functioning body of the internet beyond "OMGZ, I'M ON THE INTERWEBS!!11FACEBOOK.TWITTER.PORN." (Not really porn.)