Design for Media Environments: Participatory Mapping & Open Data

There is an open data movement afoot now. The cry for “Raw Data Now!”. It is calling for people all around the world to put their data on the web. Be that Government data, scientific data or community data. What ever it is this data could be used by other people to do tremendous things with, in ways that they never could have imagined.

Here is a short ted talk of Tim Berners-Lee speaking of this open culture of mapping data, ‘mash-able’ mashups of raw data and the results of this. This is what a ‘mashup’ of data could look like:

Bicycle Accidents | Southeasteleven
Bicycle Accidents | Southeasteleven

Here’s the Video:

OpenStreetMap powers map data on hundreds of web sites, mobile apps and hardware devices. OpenStreetMap (OSM) is a collaborative project to create a free editable map of the world. It has over 1.6 million registered users who can collect data using surveys, GPS devices, aerial photography, and other free sources. Crowdsourced data is available under the Open Database Lecense. OpenStreetMap is used by many organisations such as: Apple, FourSquare, Mapbox, Craigslist as an alternative to Google Maps.

OpenStreetMap Foundation is a non-profit organisation registered in England and it may very well be a good idea to incorporate some of their raw data somehow in our web app Grub. It’s still in the beginning stages, it’s not quite clear yet what direction we want to take. One idea could be that someone could search for a particular type of delicacy, so they search for a country and Grub will pin point restaurants, pubs, cafés, etc around the users area of location. Our app could potentially have a database of profiles for each restaurant, pub and café etc, which the user can click on and view it, like, send message, donate or perhaps “scoff” (share) it.

After creating an account I am now part of the community.

Screen Shot 2015-02-21 at 21.15.23

Design for Media Environments: Grub App

We decided to give our Web Social App the name Grub as it is short, punchy and one syllable. We want the app to limit access and to limit the things non-members can do to encourage signing up (for free). On the homepage we will include a check list to visually show the perks of being a signed up user, just like Spotify:

Screen Shot 2015-02-16 at 16.45.48


Signed up members to Grub will get ALL access to content and the option to download recipes and the images they contain as a PDF document. Each recipe will have a step-by-step guide through user generated images snapped by the Chef’s of Grub. This will be an app that will grow and advance the more Chefs contribute to the community. Grub’s Chefs will be able to network, share tips and invent new delicacies by experimenting and talking with one another. It will be the app for people who love their ‘grub’.

Signed up members:

  • Access to all content
  • Scoff” / Download recipes as PDF docs
  • Share on other platforms & social web apps: Facebook, Twitter, Pintrest, Email
  • Like, comment and share on Grub

Normal users:

  • Cannot upload recipes, only read content as text
  • Images not available to display
  • Limited access to content
  • PDF download not available for download
  • Cannot like, comment or share

To start with we as a team set up our own Github accounts to kick start this idea into gear. Screen Shot 2015-02-19 at 19.07.17


We started following each other and then we set up Grub and made a repository as you will see in the following.

Screen Shot 2015-02-19 at 19.07.30


Screen Shot 2015-02-19 at 17.30.12

Design for Media Environments: The New Group Project

For this new project we have been put in to teams of three. I have been put in a team with Elliot and Emily. After meeting and discussing ideas about our project we decided that making a web social app for food recipes would be ideal as there is not that many at this current point in time. We want to make a social recipe app that’s fairly similar to this: On this website you can explore types of dishes by typing them in or searching under a Country’s name. The ‘Chefs’, if you can call them that, because these are just homemade recipes made from home, all have profiles. On these profiles you can view other recipes that they have cooked up. You can like, share and comment on recipes posted which is what we will incorporate too.

These are some images I snapped from the website:
Screen Shot 2015-02-19 at 17.41.37Screen Shot 2015-02-19 at 17.41.52

Design for Media Environments: Contributing to the Community of Wikimedia Commons

Screen Shot Leaf
Leaf | Wiki Commons |


Using the Wikimedia website is a great way to make your work public and freely-licensed. Media content that you upload can comprise of images, sound and video clips, it’s entirely up to you. And the very people that like to contribute to this free, shared internet culture are volunteers, just like me and you.

Screen Shot Upload to Wiki

It’s as easy as that as you can see from the image above. Now my image is free to:

  • Share – to copy, distribute and transmit the work
  • Remix – to adapt the workUnder the following conditions:
  • Attribution – my work must be attributed in the manner specified by the author (in this case me) or licensor (but not in any way that suggests that they endorse you or your use of the work).
  • Share alike – if you alter, transform, or build upon this work, you may distribute the resulting work only under the same or similar license to this one.

Screen Shot Licensing Leaf

Design for Media Environments: Our Free, Participatory, Online Culture

With the emergence of New Media interacting and engaging with modern day society, growing more and more the more people use it, has now created new modernised participatory cultures in which almost all of us take part in. The Internet and video games are the biggest facilitators contributing new forms of interactivity and narrative to the industry. “A participatory culture is also one in which members believe their contributions matter, and feel some degree of social connection with one another (at the least they care what other people think about what they have created)”.

Forms of Participatory Culture include:

Here is a video brought to you by the Big Thinker Series:

Web 2.0

Web 2.0 is a universe of its own one could say and has grown into a large network that is becoming increasingly popular by day connecting many more devices that didn’t exist in the past (smartphones/mobile devices, tv’s and tablets). Web 1.0 was used prior to Web 2.0, the only difference between them is the incorporation of interactivity. Web 1.0 consumers used the internet for basic information with little user experience. Web 2.0 on the other hand directly encourages the user to engage with the content they’re viewing, whatever that may be. The various  web applications available to name a few are Youtube, Reddit and WordPress. Applications like these are the ones that make the most of a specific platform and they get better the more people use them. The developers behind such applications benefit just as greatly as the user who experiences them themselves. They are constantly delivering and updating software consistently to enhance the user’s experience.


The web, just like the Universe, is vast and absolutely enormous. The possibilities are virtually endless and is continuously growing. ‘The Internet Map‘, which is just visually incredible, maps every website on the web on a single page as its own virtual universe, with space-like graphics. Each circle represents a website and based upon their size it shows you how popular the website is by the amount of visits it gets. Facebook, Google and Youtube are all the big ones but as you zoom in more and more into this ‘universe’ space, or the web let’s say, the smaller sites start to appear. This is an interesting user experience, it just shows you how enormous the web actually is.

Here’s a screenshot:

Google Internet map screenshot Internet map screenshot


So as you can see from the two pictures above, when having clicked on a site’s representation of a planet a window pops over it with a brief description of what the site is and it’s global ranking, as well as it’s country’s ranking.

The internet is open which means its free for everyone to use. It may not be as openly accessible in some countries than it is for us, however this means that using the technologies of Web 2.0, we (the people) have the power to contribute and participate in this cyber space with no boundaries. Just like the universe, the possibilities are endless.

Wiki is a database or a website, depending on how you look at it, was developed collaboratively by a community of users, allowing any user to add and edit content. Like Github, it allows users to collaborate and modify content plus including the ability to expand it’s structure and/or delete content. A Wiki is a large database for creating, browsing and searching through information.

Wikipedia or Wikimedia ,or any of the others, all fall under a content management system (CMS) called Wiki. It’s not the same CMS as WordPress because no one owns or holds any right to a Wiki. Wikis have a unique way of structuring information too. For example a Wiki page can be created from multiple authors.

Wikipedia invites any user to edit a page or create a new one in the most simplistic way possible in terms of the front-end side of things (design and user-experience).

Have a look at Remember, all the information you see from this organisation is written by people like you and I. It is free, it is open and it is powerful!



‘Creative Commons Licenses’ gives way to a more flexible management of exclusive rights offered by copyright protection. This allows the creators of the content to choose the various kinds of protections and freedom that they wish to apply to their work.

So they key license terms are:

  • Others can copy, distribute, display, perfume and remix your work if they credit your name as requested by you.
  • Others can only copy, distribute, display or perform verbatim copies of your work.
  • Others can distribute your work only under a license identical to the one you have chosen for your work.
  • Others can copy, distribute, display, perform or remix your work but for non-commercial purpose only.

These terms combined (within Creative Commons) will allow others to use your work whilst still protecting your property. This has created a free, shared internet culture.  In other words, what’s mine is yours, only if you comply to the  terms of the licensing agreements that I have chosen.

WordPress, which you are currently on, has been built using open source software. Just like:

  • Firefox web browser
  • Git
  • VLC Media Player

The open source softwares I have used so far are:

  • PHP
  • MySQL (Databases)
  • Processing
  • Adobe Brackets (to develop my code)
  • FileZilla (to upload my code files to a server).

Here are some other FREE, open access, User Generated Content (UGC) websites that you might find interesting:

  • – FREE e-books
  • – digital library of Internet sites and other cultural artifacts in digital form
  • – Free books such as recipes.
  • – Open data content.
  • Open Hardware:




Design for Media Media Environments: Github

GitHub is a community. It is involved in an online participatory culture which everybody within the community contributes to. Developers are able to collaborate with each other within the realm of code. The actual GitHub community itself is huge, with people all around the world using this platform. You may have heard people referring to GitHub as a publishing tool. Whilst others have referred to it as a version control system or even just a collaborative platform. GitHub is in fact all of those things, in one form or another.

At its core GitHub is a web-based hosting platform for Git repositories (projects). Widely used by programmers and developers it is often used for developing and maintaining code. The really good thing about GitHub is that it allows you to have both local and remote copies of your projects and you can update your lines of code without ever overwriting them.You can follow repositories (projects) by “watching” them and you can also see how many “watchers” it’s got. You can bookmark repositories as well, using the “star” feature and you can also “fork” it as well which is copying a repository. Forking it allows you to freely experiment with changes without affecting the original project.  How GitHub is perfect for collaborating on projects is that it has the power to edit and make changes to code from multiple files, no matter how big or small, that can be contributed from other users that you’re working with at the same time into one master version. Other users will be notified of these changes and will either need to accept their input or decide not to. If the code needs debugging then it will be put on another branch of the master file.

Here is a video that will expand on what I have just explained. It may give you some further knowledge to Github as a whole as well:

Design for Media Environments: New Unit Set

Screen Shot 2015-02-16 at 13.17.52 Screen Shot 2015-02-16 at 13.18.16


We have been set a new unit where we must create a “social” Web based application that addresses a specific “problem” of a target audience. It will be a collaborative project of three web developers. We will all contribute code to a shared online repository using Github and at the end of the projects we will upload it to a shared web server.

Software we will use:
HTML5 and CSS3 will be used for the design front-end and PHP and MySQL database for the applications back-end. The source code for this will be version controlled using Git and will be regularly backed up.

Being aware of the various hardwares used to create and distribute the application may be demonstrated through basic “Responsive Design”. The number of devices, platforms and browsers that need to work with your site/application is growing at an incredible rate. “Responsive Design” is an approach aimed at crafting sites to provide an optimal viewing experience. Don’t you just hate it when you’re trying to view something that you were just viewing on your laptop, but then try to view the same thing on your phone, and you have to keep zooming in and out because the design is not responsive? That is what it does, it fixes that annoying problem. This is achieved through the CSS code when developing the site. It offers: easy reading and navigation with a minimum of resizing, panning, and scrolling.