“Neon” – 18th Biennale of Sydney: all our relations

Image
http://bos18.com/artist?id=89

In week three’s readings on Latour’s work, we learn how he takes on the approach that the world exists as “connections”, or “hybrids” otherwise known as quasi objects. He describes how this is the starting point and it is through these networks that we continue to exist or comprise of. By viewing media technology and communication, Latour encourages us to consider not only our thoughts and activities but also how we interact or live within these actants and how they are pieced together to constitute that particular event.

The Biennale Exhibition can be seen to fit comfortably within Latour’s ideologies and views. Even the title of the exhibition “All our relations” encompasses the notion of how things are connected and relate to one another and the world we inhabit. The exhibition, as described by the curators, focuses on collaboration, conversation and how things co-exist. It is embedded in story telling and how this connects us to allow us to inhabit the space.

This notion is evident in the sculptural performance piece “Neon” by Gabriella Mangano and Silvana Mangano, where they are seen to foster collaboration and ultimately build a community through video performance. In this production, the two female artist are dressed simply and similar, performing repetitive  actions and gestures which show their exploration of a physical and emotional connection with each other. “Neon” employs handmade patterned paper, shaped into sculptural forms. While there is the sculptural element, which is inline with traditional art forms, they have chosen to communicate their work as a video performance piece which addresses the interrelation between body, time and space. You can see how they have treated video as an extension of drawing and by doing so allowed greater deliverance with the movement, sound, motion and repetition.

I found the performance to be extremely mesmerising, especially with the combination of movement and colour which took me into an unknown space. The use of bold colours within the dark environment made the ladies movements standout and emphasis the interplay between their two bodies, the sculptural object and the landscape with which they were moving in. I also found my perspective challenged because of the repetitive movements and how they disappeared within the sculptural form.

The two artists existing within darkness, created a sense of intimacy with their closeness to each other and their spacial relationship between the object, their own bodies and the dark environment. The performance was apparently improvised, relying on silent exchange and mutual understanding between both artists which I found to be very relevant to the overall theme of the Biennale, fostering collaboration which ultimately builds community and promotes “togetherness”.

Advertisements

Tag Cloud Generator

I found this cool site that generates code for you so that you can add a static tag cloud. Decided to use it on my project purely for aesthetics so that you can see that the real site being built would have this functionality built into it.

The site is found HERE.

OK after all that excitement, I couldn’t get it to look nice and it only allows two words which seems kinda pointless. I found a better site HERE.

Sequence

I think I may have found a stand-in for the parralex scrolling I was so keen to create for this project. Instead of having an image slider on the homepage which showcases featured properties, I may use “sequence”. It’s a jQuery slider plugin with infinite style. It provides the complete functionality for a website slider without forcing you to use a set theme. It has no in-built theme, leaving you complete creative control to build a unique slider using only CSS3 — no jQuery knowledge required!

This could work perfectly for my project as I had envisioned have out there property items floating the the air or sliding onto the page to visually set the mood that the site is all about finding the unconventional space for creative use.

Information on this can be found here!

Responsive web design

I have decided to base my project solely on responsive design, where I will produce the homepage & hopefully search page of my assignment so that it can be viewed on both web and mobile. I guess the next step for me is researching how to create fluid designs (Grids and images) that are flexible across both devices. I have been reading smashing magazine and it made reference to an interesting research article about mobile screen size trends, which can be found HERE. Funnily enough it didn’t mention the iPhone so I have a feeling the article was written before 2008. More links on the topic are:

Examples of responsive design:

I also found a useful article on CSS 3 properties and support in browsers. You can read it HERE. I also read in A List apart that when designing for the mobile, you should try to stick to some of Apples standards… so best to follow their lead in:

Fonts:

  • Use Helvetica.
  • Use bold font-weight to maximize readability (remember, your design will often be used in daylight conditions).
  • Use normal font weight for secondary information.

Lists:

  • Each row should be 44 pixels high.
  • Set text at 20px.
  • Inset text 10px from edges, and center vertically in row.
  • Make controls 29px high, with 12px bold text and a 5px border radius, centered vertically in row.

Groups:

  • Group items in a 300px wide box with 8px radius (10px on each side of box).
  • Set text at 20px.
  • Inset text 10px from edges.
  • Place labels above group box.
  • Inset labels 20px (so that they line up with 10px inset for group box and 10px inset for text within the box).

Standard colors:

  • Use #d9d9d9 for borders and list dividers.
  • Use #c5ccd3 for light blue (background).
  • Use #4c566c for dark blue (group box header).

http://www.alistapart.com/articles/putyourcontentinmypocketpart2/

Overview of web technologies thus far…

So I feel I need to start on the basics in order to grasp the types of technologies that are out there in the big wide world of the net. I want to be able to select a tool set that is clearly intrinsic to both how a digital project is put together and the final outcome. As the web is constantly evolving, I want to discover the basic tools that developers need in order to create sites and apps.

What I have learned thus far…

From the beginning web pages were written in HTML. This language is what tells the web browser the content and structure of the page. The HTML elements on a web page are defined by tags, usually having a start tag, for example, <p> for paragraph tag, and a closing tag </p>. The tags are not displayed, however they tell the web browser how the information should be displayed. For example, an <img> tag is to show an image. These HTML elements can also be linked to Cascading Style Sheets (CSS) to tell a web browser how to style the appearance of web pages. The introduction to CSS meant web pages were visually more expressive and the layout of a page was finally taken into consideration.

The idea of a dynamic webpage began with the scripting language Javascript, which meant that browsers could incorporate real-time interactions. For example, something on a page could be altered without needing to reload the entire page. As a result, web apps became faster and more responsive. In essence, Javascript is a language that helps create interactive websites, through the use of dynamic content, and runs on the web browser. Javascript falls under the umbrella of Client-Side Scripting Language, which enables (supports) interaction within a webpage. The code required to process user-input is downloaded and compiled by the browser or plug in. An example is a “rollover” which is typically triggered when choosing a navigation option.

jQuery is a multi-browser JavaScript library designed to simplify the creation of dynamic and interactive web content. It is free, open source software, and is designed to make it easier to find and manipulate elements and events on a web page. jQuery also, overcomes the need to refresh pages to view updated content. For example, it could be used to catch a mouse click on a certain area of a page that will then tell the web browser to hide or display some web content or pictures.

Web programmers often refer to the combination of JavaScript, XHR, CSS and several other web technologies as AJAX (Asynchronous JavaScript and XML). So Ajax is not a single technology, but a group of technologies used on the client side to create asynchronous web applications.

HTML has also continued to evolve as more features and improvements are incorporated into new versions of the HTML standard.The Latest version is HTML5 which incorporates a set of capabilities that give developers the ability to create great online applications, especially with video. So in early web, users had to install plug-ins in order to watch video in their browsers. As video became more and more sort after it became apparent for the need to embed the video within a page without any additional software. The HTML5 video tag does this. You can read in further detail other features of HTML5, in “28 HTML5 Features, Tips, and Techniques you Must Know”, by Jeffery Way.

As listed in the above article, HTML5 embodies some of the best aspects of the web, like working across multi-platform devices. One downfall at this stage is that HTML5 is not compatible with some browsers like Internet Explorer since it is still in a development stage and due to this reason, the features are still not fully defined. But even then it is very useful for the extra features it already provides which are absent in the previous version.

Another core technology is Server Side Scripting Language which involves completing an activity and then sending that information to another server to be processed. The server then runs a program that process the information and returns the results, typically a webpage. A great example, is a search engine. The keyword is typed in and then a program on a server matches the word entered against an index of website content.

Server-side scripting languages include ASP, PHP, Perl and much more. A good article which outlines the differences between the languages is “Which Server-Side Language Is Right For You?”, written by Kevin Yank. Another article on the topic can be found HERE.

For the purposes of the website we need to build for this assignment, I think I am going to go with PHP. I like the core idea that the server processes PHP commands – not the web browser. It can also be embedded into HTML which means the two are interchangeable within the page. As outlined in an article “Why Use PHP”, by Angela Bradley, it tells how PHP while adding some new features to your site, its basic appearance is still all created with HTML. It is great for things like users adding items to a shopping basket, as PHP can then store this information in a database for future reference. PHP is free and can generally be installed on all operating systems and web server platforms, which makes it highly available.

SQL is programming language designed for managing data in relational database management systems. It is basic language for all databases and is often called “Sequel”. As described by Wikipedia, a relational database means relationships are formed between pieces of data so all data should be significant. In essence, a relational database represents how things are connected. For example, a user could ask the database to construct a report of financial activity for the specific month. The output would simply be sent to SQL screen or saved in to particular file. An interesting article that explains SQL can be found HERE. It lists a number of DBMS (or “Back-end” systems), including DB2, Oracle, Microsoft’s SQL Server and Access, Sybase, Informix, MySQL, mSQL. Using SQL, we can store data, manipulate and retrieve from the database.

MySQL is one type of DBMS providing access to stored data. Many web applications use PHP and MySQL in partnership to provide feature rich websites: Joomla, WordPress and phpBB are all successful web applications that are highly available due to them being free and easily installed on web servers.

Handy Links

Coding:

Responsive Web design:

HTML5

Parallax Scrolling:

UX Design:

Underwater Tea-party

For this class, I have decided to create a website called “Underwater Tea-party”, which will be a resource that lists engaging and innovative creative spaces for hire. People can either list their own spaces available or search for a place. Primarily the site is specific for unusual, unique or outlandish spots, perfect for shoots, location settings, one-off themed parties and much more. The requirements are:

  • Homepage
  • Find a Space
  • List a Space
  • Individual Listings pages
  • About Us
  • Contact Us
  • Subscribe to Newsletter
  • Log / Register functionality
  • Pods that pull featured and latest listings

To really understand how the application server works I would like to incorporate some form of sort / search functionality, whereby users can select a region and type of property they are after and the displayed results are pulled in from an external database.

For the design, I think adding some form of parallax scrolling to the homepage would fit in really well and create a great interactive storytelling experience. I imagine the user moving their mouse across / down the page and different, unusual spaces being displayed as they scroll.

I still want the main way of navigating within the site to be through the navigation header, so perhaps the scrolling parallax can be subtle. I also noticed that many sites loose the header as you scroll down. I would much prefer the header to stay on the page the whole time, similar to Ok-Studio site and the Beetle Site. The reason being is that the main focus of the site is the search functionality. I want users at any point to be able to stop and search for a property. Perhaps I’m best off dividing the site into main and secondary information, whereby the main is viewed under the header nav and secondary information like, “About us”, “Featured Properties” and “Latest Listings” can pop up in text and image as users scroll down the page. I would still want the secondary information to be dynamic so it can be updated often.

Below is a list of things I need to find out about parallax scrolling before I decide to incorporate it into my site.

  • Can you preload the graphics: in case the site is graphic intense, will I be able to preload the graphics before loading the site, to give the user more seamless experience.
  • Mobile devices: I don’t think this would be the same experience as the desktop browsers, so I would have just a static background image for the homepage.
  • Viewpoint sizes: making sure the scene works on various viewpoint sizes (small, medium, large).
  • Can text be Dynamically Feed in on scrolling image, to allow for frequent updates?

Parallax Scrolling

I saw this really great website the other day, Nike Vision and since then I have been noticing more and more sites that use the parallax scrolling effect. I really enjoyed viewing the Nike site as it altered my experience by using a technique that features layered images that move around the website in different speeds/perspectives creating an interesting 3D illusion. Other sites I have seen are the Voltswagen Beetle and The Art of Flight. On both sites the user is taken on a journey. As you are scrolling down or across, information and images are displayed. I especially love the beetle site because it works as a time line taking you through the history of the car and then to the latest model.It plays on your emotions by deploying text like…”It’s back…It’s a boy”. Meanwhile, as you are scrolling down, completely involved in story of the car, you notice that you have almost completed viewing all the sites content, as the top navigation bar moves horizontally illustrating what section you are up to. This parallax scrolling has in effect allowed the user to view the whole sites contents with very little effort on the their part.

Nike Vision:

The Art of Flight

Volkswagen Beetle