Digital Media: Let the Dataset Change Your Mindset

On Monday 20th January, I attended a day of lectures for my Digital Media module. During the day, I went to a lecture called “Let the Dataset Change your Mindset”, followed by a seminar where we all showed our research from last weeks task (please see previous digital media post), and ending with a Dreamweaver/interface design workshop. All of the notes from these sessions can be found below:

LET THE DATASET CHANGE YOUR MINDSET:

  • Hybridity – merging two or three or four… things together
  • For example, your WordPress blog, lots of information being drawn from different databases into this formatted area
  • RSS – means there is an RSS feed, allows you to pull information from other websites into your own
  • Dynamic – webpages, information changes and being pulled from different areas

Mashups

  • Mashups are basically hybrid forms, but Mashups mean something slightly different in webspeak
  • Internet Mashups use the API (Application Programming Interface) of two or more programmes to create a new interface with different functionality
  • Hopefully that functionality is greater than the functionality of the individual APIs and the hybrid app can then deliver content in new and surprising ways
  • READ LEV MANOVICH ARTICLE

Open Source

  • Most people give away their API for free and Mashups have come to be seen as a new frontier
  • They bring things together – often disparate data and APIs so that new things can be made and these hybrids can be presented in new ways to tell us things we didn’t know before

The Way Back Machine

  • Utility allows us to take a look at how the internet looked 10 years ago
  • But this is just about the way the pages looked
  • The architecture of the web (Internet Protocol Suite (TCP/IP) and its attendant layers) have changed little over 25 years
  • IP versions have changed but the model remains pretty much the same
  • What has changed?
    • The type and amount of traffic
    • The size of the pipes
    • The speed of connectivity
  • The delivery of content was dependent on the technology available to deliver that content
  • The emphasis in Web 2.0 is on the separation of content from its presentation
  • Content – words, pictures, interactive elements – DATA
  • Presentation – design, layout, fonts, sizes (look and feel) of content elements

History

  • Initially when the web started and HTML became available as a mark-up language for Web pages people composed their HTML code in a text editor, then editors like Dreamweaver came along and things got a bit easier
  • The pages produced were static, separate pages
  • The advent of LAMP (Linux, Apache, MySQL and PhP) led to the rise of the Content Management System or CMS

CMS

  • CMS systems underpin most major websites today
  • They are made up of open source templates that draw content from a database
  • The content and presentation are separated
  • This is what has paved the way to user-generated content as the systems have simplicity of use built in
  • Over time more and more people create their websites using these tools with the obvious consequence of information on the web growing exponentially because the new tools have collaborative features built into the design

HTML vs. XML

  • The LAMP manifestation of the open source world has brought along a considerable number of tools through which software development is supported today
  • Using HTML, a document can quickly be created using tags
  • As we will discover later today tags follow simple syntactical rules and are often used to describe both the content and the structure of a document
  • The separation of presentation and content became an issue when web pages began to be rendered on more and more devices, each with their own capabilities and restrictions:
    • Computer terminals
    • Laptops
    • Smartphones
    • Tablets
  • Web pages started to be created ‘on the fly’ – content pulled into a template from a database
  • An online database will rely on the assumption that no layout information needs to be stored for its content, but that this information will be added once its content is being accessed for display
  • In HTML, presentation can be specified within the document or separately on a Cascading Stylesheet (CSS) file
  • HTML tags are predefined and although there are ways of including additional tags (embedding scripting language for example) tags cannot generally be defined by the user
  • What was needed was a language that was pure information (content) separated from the presentation (display)
  • This would allow pure information to be carried and then displayed or delivered on all the new devices proliferating
  • So along comes XML which has no predefined tags at all
  • The author can create his/her own tags
  • XML is a software and hardware independent tool for carrying information
  • You don’t need to know much more than this:
    • HTML is about displaying information
    • XML is about carrying information

How does this separation benefit us?

  • Pages on the fly
  • Elegant web search
  • Syndication
  • Mash-ups
  • Multi-platform data distribution
  • Nifty plugins and applications that are customisable

APIs and Mashups

  • Google created the Google Maps API to facilitate developers integrating Google Maps into their web sites with their own data points
  • It is a free service
  • By using the Google Maps API you can embed the full Google Maps on an external web site
  • Google Maps actively promotes the commercial use of their mapping API
  • One of its earliest large-scale adopters were real estate sites
  • Googlemaps is one, very visual way of mashing data together from different sources – but you can create some interesting mashups using and filtering feeds for example to bring relevant information onto your web page

Examples of Mashups

Videos:

http://www.thewildernessdowntown.com

 

My Response to the Lecture:

Hybridity is not simply the expansion of digital media through creating hybrid forms, but it is also a process that has been adapted and practiced throughout a wide range of current industries. 

Hybridity is an incredibly powerful aspect in today’s digital era, and is usually taken for granted on a daily basis. As just one example of this, when a song is released from what we still call the music industry, we often expect them to also have their own music video. Is it therefore right to only call the music industry a music industry? 

After receiving this lecture, I also soon came to find myself dividing the term hybridity into, what I like to call, the three E’s: expansion, exploration, and experimentation. 

When looking back to the digital media example of hybridity, expansion can be used to explain how this industry has adapted and changed through the idea of exploring newly released technologies, as well as experimenting with the convergence of more than one process.

With this in mind, Hybridity and it’s three E’s can be defined by an umbrella cliché of “pushing the boundaries”. It is in our human nature to want, and need, more, and so the increasing of the digital media and its technologies simply allows us to push these boundaries to a limit that we could not have imagined before.

MINI PRESENTATIONS:

Dave McCandless

Dave McCandless 2

Kevin Russ

Kevin Russ 2

  • Jon Rafman – 9-eyes
    • http://9-eyes.com
    • Uses Google Maps to create images – screenshots interesting things he finds on Google Maps
    • Google Maps is his canvas – uses found imagery
    • Like a research tool for what happens around the world
    • Doesn’t post the location but clearly states that he found them through Google Maps – doesn’t edit out the Google Map symbols

Jon Rafman

Jon Rafman 2

  • Arvida Bystrom
    • http://arvidabystrom.tumblr.com
    • GIFF Images to explore sexuality, self-identity and contemporary feminism
    • Tries to manipulate the digital world to her own advantage
    • Sense of anarchy
    • May influence Picbod
    • One of her collections shows the perfect body, GIFFed over the photograph of her subject
    • Found out about this artist through Dazed magazine
  • Gabriela Herman
    • Bloggers
    • http://gabrielaherman.com/bloggers
    • Shows different bloggers looking at their screens – almost look as though they are shut off from the world – screen light looks like it could be a hypnotic vortex
    • All available light

Gabriela Herman

kara

DREAMWEAVER/INTERFACE WORKSHOP:

Interface

  • Open Dreamweaver
  • Create “New HTML”
  • Go onto “Split” mode
    • On left hand side is the code – the code that makes the webpage look like this
    • On the right hand side is the preview – this is a webpage, what it will look like on the web
  • Dreamweaver is basically a web publishing software
  • HTML is a static webpage – what you put on it will never change
  • PHP is a fluid webpage
  • “Multiscreen” button
    • Can choose what digital device you want to make your webpage for
  • “Preview/Debug in Browser” button
    • Will all render slightly differently
    • Can choose to preview in different Internet programmes – e.g. safari, Google chrome, etc.
  • CSS – basically how you want your elements to look like
    • E.g. headers to look like this…
  • HTML is the content, CSS is the presentation
  • Properties show how an object or an element behaves
  • Title – what you named your website; will be the title that appears in a Google Search
  • Beginning and end tags
    • E.g. <title> Holly Constantine Photography </title>
    • Body basically means what is in the body of the page – everything you want on your website needs to be between these two tags

Saving the Webpage

  • File – Save – choose where you will save it – save as index.html
  • ONLY USE LOWERCASE LETTERS
  • Go to window – files – manage sites – new site – save as holly site – choose folder you chose before – save – done
  • ONLY NEED TO MAKE ONE PAGE – MAKE IT A GOOD ONE!

Making a webpage

  • Going to need to stylize it
  • Go to file – new – css – create
  • Have elements and have to use the { to open and close the code
  • File – save – style.css – (in same folder as index file)
  • Index and style sheet are not yet associated – need to merge them to allow them to collaborate
    • Go back to index document – css styles – click on little menu button – attach style sheet – find style file you just made – choose this one
  • Once this is done, the two pages are collaborated so when you change something on the stylesheet it changes immediately
  • Save all – saves everything that is open
  • Creating a new tag
    • Go back to index document – css styles – click on the little menu button – new – choose tag – choose body – press okay – can define types, background, block, box, border, list, positioning, extensions, transitions – change settings – okay
    • Can edit this at any time
  • Can use the same stylesheet for different webpages

Jeremy Hilder Example

  • Save image from the webpage
  • Open the body css rule definition menu – select the image
  • Images should be a fixed pixel width of 960×575
    • Save images as a GIFF or PNG
    • Weight about 500K

Making a div tag

  • Insert – layout objects – div tag
  • Insert at insertion point
  • ID – tell the div tag what it is
    • E.g. a wrapper – hold all webpage information
    • New css rule – style it in the stylesheet we’ve already made – okay
    • Want to sit in the middle of the page
      • Category box – unclick same for all on margin – right auto, left auto
        • 900 pixels width
        • 500 pixels height
  • Border
    • Solid, one pixel, black border
  • Okay, then okay
  • A div tag is an area on a page in which you have defined

RESEARCHING HYBRIDITY:

After these lectures, we were then asked to spend time researching into one example of hybridity which was discussed in our “Let the Dataset change your Mindset” lecture. Below is a link to the example that I have looked into, along with the answers to the questions we were given:

Hybridity definition:

  • Hybridity is basically the merging and remixing of different media formats to create a unique output
  • Mashups are basically hybrid forms, and internet mashups use the API of two or more programmes to create a new interface with a different functionality

Examples of Internet Mashups:

  • The motivation behind these hybrid
    • “We leave our jobs as management consultants to pursue a dream of changing the way you do sports whether you are at elite level or merely someone who wishes to get into shape”
  • The narrative or message of application
    • “The vision is to create a service that makes sports more exciting and to offer the ability to unite a large group of physically active people”
    • “We wanted to meet all of these needs to reach both recreational as well as more serious athletes”
  • Is it art/journalism/entertainment?
    • Entertainment and leisure
  • Is it useful?
    • Yes
  • Who made it?
    • The Founders are – Mette, Christian, Jakob
    • All primarily into fitness and have taken part in a variety of different sports between them
  • What programmes does it use?
    • Different digital devices/smart phones that use GPS, including – Android, Blackberry, HTC, iPhone, Garmin, HP, LG, Motorola, Nokia, Samsung, Sony, Windows Phone, Polar, Timex
    • Google maps style programme
    • Twitter Feed style app

With this app, they say that at Endomondo.com you can “meet like-minded friends, get inspired by them, challenge them and follow their activities… live! So whether you are into just following your personal achievements or whether you wish to place yourself in a larger network of sports partners that challenge and support each other’s efforts – Endomondo.com is your new world of endorphins.

Advertisements