Hypertext Essay Concept

We have now, finally, begun to form our concept for our Hypertext Essay, and it is hopefully going to be something that hasn’t been seen before. We had an incredibly long think about how we were going to create an original idea that would reflect the main aspects behind the concept of a Hypertext web page. These aspects included the idea that the browser becomes immersed within the web page and makes their own decisions as to the content they would view first, the idea that the browser can enter the Hypertext essay at any page and it will still make perfect sense, be interlinked with the surrounding pages within the web site and externally linked and interconnected with external web pages and our own blogs. For now, we have formed specific ideas that will satisfy these aspects of what is considered a good Hypertext essay. For example, when the web site is put up, each of the group members will create a blog post that will provide a number of randomized links to different pages from within the Hypertext Essay, which will enable the user to enter the web site at a random point.

In terms of our unique way of allowing the browser to become immersed within the web site, we have created an idea that is not only aesthetically and interactively entertaining, but also allows for mindless, continuous browsing, as there is no beginning, middle or end, just one single stream of information that the user has the ability to interact with. Our idea will be shaped around the idea that as technology is advancing, hence, the world of blogging is changing according to technology. Therefore our idea is to create a single web page that presents an image of the Apple iPhone in which the user has the ability to interact with. The user may click individual icons on the virtual iPhone, which may open up new interfaces on the actual image of the iPhone, itself, or it will link to a web page that will appear next to the iPhone in a separate frame. This concept means that the user navigates the entire web page without losing interaction with the iPhone interface as a navigation device, which means there is no hierarchy involved with the web page. The web site is what Seth described as ‘flat’ as each page is easily accessible and there is no ‘home page’ to return to as the iPhone acts as the ‘home’ aspect, which is constantly with the user throughout his browsing experience in the web page.

Participation Reflection

Now comes the time where we must review our overall participation within the course of Networked Media. This involves tracking back to the participation criteria in which we set for ourselves in week 6.

Here are each criteria and a summary of how I have satisfied the particular area.

1. I will make at least 4 Blog entries per week, which range across all aspects of course exploration. (Reading, Writing, Creating, Collaboration, Research, Documentation etc.)

  • This, I feel, is has been a strong point throughout my Networked Media experience. Not only have I posted over 4 entries per week, but I have also demonstrated a range in my post style, where I feel I have immersed myself in all the forms of posts that are highlighted in the criteria.

2. I will collaborate with my group when required and contribute work to a high standard. Weekly group meetings will occur to make sure all students are on the same page in terms of assignment direction.

  • As group work has only just commenced for our group, I feel that I am collaborating quite well and contributing ideas creatively. Two meetings have been set this week for my group, which indicate a commitment to completing a quality project.

3. I will engage with all lectures, read and engage with the course readings.

  • I feel I have sufficiently engages with the lectures despite missing one, due to being caught up in other areas. I have always either reflected upon the lecture in a blog post, or utilized ideas to further develop my own research and exploration, which may also be demonstrated throughout the blog and assignments.

4. I will engage with all tutorials, participate in class discussion and voice my thoughts, ideas and opinions.

  • I would determine my participation in class to be good, as I have tried to contribute to the best on my ability in class discussion, voicing opinion and ideas and assisting other students.

5. I will practice and apply skills learned from within the course to areas outside of the course.

  • The skills learned from within the course have enabled me to re-shape my online activity, as I have become more aware of how the Web functions and how user’s interact with the public domain. The blogging skills and HTML skills have definitely broadened my mind as I had revisited the world of creating content within the Web, which I had lost grasp of years ago.

6. I will assign myself hours outside of on-campus hours to study for the course and do all of the above.

  • As you can see throughout my blog, there has been a considerable amount of time, which has been assigned to the Networked Media course outside of uni hours.

The difference between CSS and HTML

I presume we will be learning how to use CSS within our Hypertext essays over the next couple of weeks when we begin to actually construct them, which will be great because I am actually not too familiar with CSS. I am comfortable with my HTML skills, as they had developed strongly through the creation of my myspace page when I was an early teenager. However, when it comes to experience in creating actual websites, my skills happen to really only come from learning how to use website-making programs, such as Frontpage or Dreamweaver, where you can visually construct your website without the need to know extensive HTML coding.

I was always unsure as to the definition of CSS, until I conducted a simple Google search on the topic. The best definition of the term I could find was on Wiki Answers, where it provided a clarification of it’s distinction from HTML coding. It explains that “CSS (Cascading Style Sheets) is another widely-accepted web-design language. Unlike HTML, CSS does not “create” anything. Instead, it decorates, aligns, and positions (etc) elements in HTML. In a nutshell, CSS takes the normal HTML output and adds a few rules to how it’s actually displayed. CSS can edit things such as element width and height, background color, border, alignment, and actual visibility, for starters. HTML is capable of doing some of these things, but as mentioned earlier, the methods are usually deprecated, or are soon to be deprecated.”

From this information, it became clear to me as to the function of CSS within a web page, however I wasn’t too sure as to how you actually use the coding, or what it looked like. This is where I found some really great websites that provide tutorials and explain the role of CSS more explicitly. The problem here is that there is way too much information to place in to a singular post, therefore the links are listed below.

Social Networking

I had to create a little post discussing the revolution that is Facebook. First of all, without Facebook we wouldn’t be at this significant stage within our society, where it is no longer an issue when it comes to communication and connecting with people. This social networking website not only connects people for social purposes, but is also provides a platform for conferencing when it comes to things such as group work in a University course. What is quite interesting is the fact that Facebook was originally created in order to provide this platform specifically for University students. User’s would create their account and immediately be confronted with a tool for selecting their University and, hence, a tool that would find all their peers.

Today, Facebook has developed into a social networking beast, which sits just under Google and YouTube at #5 on the world’s top websites in terms of traffic according to this ranking.

Even though this website has revolutionized that way in which we communicate with one another, it does have quite a dark side and has been recognized as dangerous due to a few issues to do with privacy. For example, not only does it provide another website that may attract dangerous individuals that can victimize other users, but allows for something even as simple as a friend uploading a horrible image of you. I suppose it is like everything else in the world, there are always pros and cons!

Blogging Issues

When it comes to the time when you get used to the concept of blogging and it becomes a natural habit for you, sometimes you may forget that you are publishing your words into a public space. This has been a problem for myself as I seem to forget that anybody may potentially view my blog and the content I post, for example, the good old ‘vent’ has been a reoccurring issue for me. This may seem OK for some people, but the space available to create a blog post provides us with the motivation to express our inner thoughts as if nobody was reading, which may surface some embarrassing and unprofessional ideas and thoughts, especially from within a blog that focuses on university course work. A few examples of such posts include: ‘Meme-ified’, ‘Essays’, and the ‘Life is Hectic!’ post, where I actually state in the first sentence, “I need a space to vent my thoughts, so I am using this one.”

This is not exactly a problem, however when it comes to blogging it is often easy to relax to the idea that you are writing within a public space and this may influence saying things that are inappropriate for the Blog’s initial intentions of existence.

Hypertextualizationingness

This week’s lecture by Adrian Miles on Hypertext was available online for us to download and watch. We were then told to do a Blog entry about the lecture, hence the existence of this post. I had already created a little blog post on Hypertext earlier on in the course, yet this lecture inspired me to delve into the topic deeper. To begin, Adrian provided definition between Hypertext and the traditional ‘text’ befmore it’s development through technological advancement. He explained that “The 21st century is about systems that are chaotic and have a chaotic order, or disorder that dissipate and spread out”. It was also explained how this differs from systems seen within the 19th-20th century where  texts seemed to be strictly linear and singular, focusing in on a primary narrative. Hypertext, that has developed over the last few decades, is seen to consist of multiple narratives that motivate a chaotic, unfocused text.  These concepts have always been constrained in print before the coming of technologies such as the internet.

In terms of hypertext, Adrian also stated that “It’s actually legitimate to introduce the personal and the social into writing.” As hypertext introduces the linkage between different documents to social networked, we see text advancing to a more public, less discrete form. It is also primarily seen in the linear text that there is only one singular voice or tone about the text, where in the natural world we, as humans, clearly use multiple voices for particular relationships we have with people and things around us. Hypertext allows us to express these multiple voices across a non-linear form; across a text that has no such thing as a page 2, or in other words, there is no such page you must choose to read next in order for the text to make sense.

What I also found interesting in the lecture was the relationship Adrian formed between links between web pages and the edit points between two shots in film. He explained that hypertext is similar to cinema based on the fact that pages may act as shots in film and links act as the editing of two shots together. He went on to further explain that each web page is equally distant to each other in the web, as you can create a link that will take you to any page you want. He related this with film, as you are not constrained to edit whatever shots together that you like, which differs from printed text due to the simple example of the front page of a book being distanced to the back page from the pages between them. Hypertext was also defined as unstable due to the interactive narrative that is created for the browser due to links. Adrian explains that links allow for choices to be made and possibly different interpretations due to these choices throughout the hypertext’s individual browsers.

The Principles of Beautiful Web Design

After browsing around on the internet to get some inspiration and ideas for designing the hypertext essay, I came across an awesome website. This website is promoting the book, THE PRINCIPLES OF BEAUTIFUL WEB DESIGN, and even though the website is expected to be amazing as it is promoting a book on web design, it still caught my attention and made me realize that such a simple website can be so effective. So before you continue to read, click the link above if you haven’t already, and if you are too lazy to move your mouse an inch, click here. As you can see, it is nothing too fancy. It has a light, easy on the eyes colour scheme with simple text and distinguishable headings. The best part is that when you hover over the headings “Layout”, “Color”, “Texture”, “Typography” and “Imagery”, the web page comes to life in such a simple way. As you hover your mouse over a heading, arrows and text instantly flash up over the web page pointing and describing particular aspects to the design of the page. For example, when you hover over “layout”,  lines appear that reveal the different divisions on the page with little tags that explain certain aspects to the layout of the page.

My initial thought when I played with this function was, “Oh cool, this is pretty interesting”. Then I thought further and realized how it was such a great marketing technique for the book, as you are not only getting a little preview of what the book has to offer in a unique interactive way, you are also subconsciously recognizing the fact that with the help of this book, you can create this interesting function as well! This is something I definitely want my hypertext essay to have, the simplicity that renders functionality, but also the clever tricks that make it stand out and keep the browser lingering for those extra few minutes. This may explain why I am about to order the book, god damn clever advertising.

Mid-Semester Blog Review

In the final week of semester, we have to choose 12 blogs that we think best represent our blog’s development and quality (writing style and technical skill). Here are my 6 presumed choices for this half of the semester, each with a review as to why I have chosen them:

I have chosen this post because it is a good example of how I reflect upon a lecture. It shows that I not only provide a summary of the lecture, but also talk about ideas I have found interesting and provide examples and/or external research into these ideas. It also shows how I have begun to start increasing the quality of my posts with more analysis.

The reason I have chosen this post has nothing to do with the quality of writing style, or the magnitude of analysis I delve into, but rather how I use real-life examples to relate to course concepts and find particular contradictions in these examples that use supporting theories. In this post, I talk about how Melbourne’s ‘Metro’ train network is clearly a centralized network, yet it’s logo has a distinct resemblance to a distributed network map.

The reason I have chosen this post is because it shows that I didn’t want to create another expected summary of what the lecture presented us with, but taken the concepts and ideas and generated a creative example of my own. In this post I show how spatial montage can be represented when you embed several YouTube videos into one post, re-size and position them so they create a word from the videos’ thumbnails.  I wanted to stick to the fact that not all blog posts have to be long, drawn out analytical posts, but also short and to the point, while providing an entertaining example either created by myself or sources from another website.

This post has been chosen primarily due to a representation of the style of the majority of my posts in terms of language, layout, content and perspective. It shows that I cover not only course content, but explore into the external world beyond the course, yet relating to it. The post shows how I have discussed a topic related to the internet and how networking and distribution of content throughout the internet may cause some implications. I first use a real-life example of this and analyze it before using my own, personal example that relates to the topic. It shows that the short, to-the-point-style paragraphs generate a steady reading experience, while the extensive use of visual material supports the post and engages the reader.

This post demonstrates how my writing style has developed within the last 7 weeks of the course. It also uses basic image embedding and links, while demonstrating external exploration into the topic of web design, which is crucial in the planning stage for the development of the Hypertext Essay Task. The paragraphs are evenly spaced and broken with pictures and sub-headings, which provide a steady rhythm, making it easier to read. The large paragraph in the middle of the post allows for further discussion after the reader has been immersed within the post before finishing with a shorter paragraph.

And the last post would have to be in between the ‘Web 2.0 and Blogging’ Post and the ‘Link ya link to ya linky link link’ Post.

Page Layout

I think the first step in creating a web page will focus closely on the particular layout type, which you feel would be appropriate for your site. This comes down to what you intend to communicate through your website, as discussed within this weeks lecture (and the last post). This mainly involves determining if you are going to use particular technologies such as flash and css, then determining how your will structure the physical layout of each page and how a user will be able to navigate between them. Therefore, the particular layout you choose will not only shape the aesthetics of the website, but also the functionality of it.

As we are beginning to start our Hypertext essay, I have been looking around at many different websites to get inspiration. Obviously, we have to choose a particular type and layout, in which we have the ability to create, otherwise we will get stuck trying to create a web page that we do not actually have the skills to create, therefore a lot of time may be wasted learning or struggling how to do particular things other than making progress. In this task, I presume we will be learning how to construct a basic HTML web page, which means no flash, no dreamweaver, no zooming and fancy animation (Sad Face). Even though I am familiar with these technologies, I still think I will stick to the basic HTML and challenge myself in seeing how I can create something impressive out of it.

Example of a Flash Website
Example of a basic HTML website

According to my trusty friend, Wikipedia, web design layouts result in visual content frameworks that can be fixed, use units of measure that are relative, or they can provide fluid layout with proportional dimensions. I would think, from seeing past examples of Hypertext essays, that we will be sticking to a fixed style of website. Therefore, the next step is to look for layout types that will suit the Hypertext format that my group’s essays will converge to form. As you can see from the image above, a basic HTML web page will usually differ from a flash website due to it’s fixed nature and scrolling navigation. A flash web page will often be fixed within the browser window, yet features animation and not require the need to scroll to navigate through the page. In terms of links, flash websites are often seen to be internalized and contained within one web page, meaning when you click on a link it is possible that you will not get taken to another page, but rather the information is already contained within the page itself and it was only just hidden behind the motion based interface that is the page itself.

The basic HTML layout

These are the two most commonly seen basic web page layouts, which are still often seen throughout many flash websites. It’s basic structure allows easy browser navigation and reception of content. It is also the layout in which users have been trained to respond the best to, as if it were a distinct language that allows for seamless interaction within the content of the site without the abstraction of learning how to navigate around  a web page that deters from conventions.

To conclude, here are a few flash web pages that I found interesting:


Flurrious

Record Tripping


Beans


Verbatim Championship

Web Design

In this week’s lecture we had an interesting presentation from Dr. Miek Dunbar, who specializes in Web Design. This lecture was particularly important for me, as I found much of the information useful as we begin to design our Hypertext essay for the second part of the assignment. Miek’s main statement for the significance of the design of a web page was basically about planning or shaping things that construct the page in a way that complements the designer’s intentions for the purpose of the web site. For example, a web site that need the browser to receive as much information as possible within little time may be presented with a clean layout, which is easy to read and navigate around. On the other hand, this does not necessarily make it a good website, as one may find themselves enjoying being immersed in a web site that has no significant exit or entrance and may not be able to track their experience with navigational tools. A website design has a main goal of determining the best way to create layout, navigation and the aesthetics of a website to satisfy the web site’s intentions of existence.

Here are some main points that I found interesting on designing  a web page, which were mentioned in the lecture:

- A web page is organized by Hierarchy, meaning the most significant content is presumed to be displayed first or more obviously. Things to note within this aspect of web design:

  • The order of things on the page/screen
  • What we want people to read first?
  • What is the importance of the information?
  • People read in an ‘F’ pattern
  • Do we want any order at all?

- Layout

  • We take into account that the minimum screen width for an individuals PC is It is said that 960px is the max width. He stresses to design the website to this width.

- Typography

  • All about contrast; about making headings obvious that they are headings. Links are obviously links, etc.
  • People find it hard to keep reading text that goes beyond 10-15 words across.
  • Placing enough space between paragraphs. Be careful of white text on black background as it can be quite eye straining.

- Narrative

  • Narrative is made to be incredibly ordered in web design. It’s all about structuring and organizing the information so it is easy to find. The way people come into your hypertext will determine how they exit it, and the experience is not only just about the pages, but also what’s in between them.

- Navigation and Wayfinding

  • Menus-
  1. You can use menus to allow people to get to the various clusters or sections of your hypertext.
  2. Menus can also communicate “where” are person is within your text.

- Designing your hypertext

  • Sketch your ideas with paper and pen & plan the architecture.
  • Have an intention to your website; a specific purpose or something that you may discover within the creation of it.
  • What experience do you want your web browser to experience?

The Beauty of Web Design

In the current age, web designers aim for optimization of people’s experiences; meaning the most information possible is communicated to the browser in the least time. It presents a frictionless, seamless navigation. However, sometimes navigation is intentionally intercepted and aggravated, such as within the web page discussed in class,  found HERE. This is an interactive movie created for the latest single by the band, Arcade Fire, where you enter your street address and the web site uses Google maps to create a personalized, interactive video that uses multiple windows that pop up and different intervals. This type of creative exploration among new web sites seen today is not only an example of spatial montage discussed in the course before, but a representation of the fact that the design of the website is key to a user’s experience of it, regardless of the content available within the website.