Urban Augmented Contexts | READ/WRITE REALITY. An intensive workshop on Ubiquitous Publishing

We have defined the Augmented Context as the whole of those elements found in ordinary physical space which expose, signal and make visually accessible the existence of additional, augmented layers of digital information, content and interactivity.

To understand the necessity of creating an Augmented Context for our movie we can refer to the two basic scenarios of fruition of our production:

people who have the mobile application of our movie
people who don’t have the mobile application of our movie

While traversing the physical space people who don’t yet have the mobile app used to experience the AR Movie need to be visually alerted to become aware of the existence of augmented content in the space.

Even the people who do have the mobile app are not expected to walk with their smartphone constantly in front of their faces (try it! your arm will hurt in a few minutes, and you’ll look like a stupid cyborg ).

The Augmented Context serves the following two purposes:

visually alert people of the existence of augmented content in a physical space
provide contextual information and opportunities for interaction

The idea of creating an Augmented Context is also useful for another reason: it can be considered as being a first, accessible step towards the creation of a layer of direct digital interaction to the city, or to other environments.

In this perspective, the visual presence of items which act as signals of the possibility for digital interaction in the space which we are traversing, thus creating hooks onto our visual perception of the city, have definite cognitive effects which are very similar to the ones we have to account for while designing interfaces.

From the study of Visual Thinking we have come to know different sets of rules which we can use to create user interfaces which are not only beautiful, but also achieve the task of actively supporting the visual tasks which we want to promote most on our interfaces: if we are designing an interface whose main goal is “commerce”, we will want to make sure that the steps that lead to the purchase are efficiently highlighted in both their presence and sequence of use, and that their usage patterns are not only simple and accessible, but also visible and “visibly desirable”. Visual Thinking researches on these issues by connecting the studies on cognitive sciences, neurosciences, psychology to identify the mechanisms and toolsets which we can use to ensure that we achieve these goals: Gestalt theory, color theory, aesthetics all combine into the definition of the best practices, methodologies and techniques that we can use to create interfaces which actively support (and visually suggest) the tasks which we feel more important to be executed on our interface by users.

The book “Visual Thinking for Design” by Colin Ware is a good read to understand the concepts of visual thinking: it is mostly imagined for bidimensional applications such as website design or graphic design, but the concepts expressed in the book are immediately applicable to our scenario.

From the point of view of our activity, the city is an interface, and we must ensure that the visual tasks which we want to promote are actually accessible, visible and actively suggested, to create a state of awareness in the people who might choose to use our digital experiences.

The Augmented Context can be imagined under a variety of forms:

stickers with QRCodes disseminated in the architectural space
urban furniture and signage providing information and instructions on how to access the AR content
stenciled QRCodes, sounds, signs, billboards and anything that can be imagined as placed in the physical space to offer information and awareness about the presence of the augmented content

The Augmented Context can be created to include QRCodes to link to:

instructions on the access and usage of the mobile app needed to access the AR Experience
background information on the theme of the movie (or other AR Content)
realtime information coming from databases and/or social networks
opportunities for interaction, allowing people to comment and describe their experience and to interconnect with other previous visitors

To create the Augmented Context we used the MACME platform created by FakePress Publishing and available under a GPL license from the WordPress Plugin repositoryand on the project’s GitHub page.

MACME allows using a WordPress CMS to create cross medial content, including text, video, sounds, and social media, and to automatically generate it in versions which are suitable for printing, attaching, packaging, putting on stickers, t-shirts and any objects or location onto which a QRCode can be attached.

Here is a simple tutorial on how to use MACME to produce cross-media content such as the one needed for the Augmented Context.

MACME is a WordPress plugin. So the first step towards installing MACME is to install WordPress.

Note: the wordpress.com website offers free WordPress blogs to users. Sadly it does not allow users to install all the plugins which are available for the WordPress platform, but only a limited selection of them. Therefore MACME cannot be installed on a free blog on the wordpress.com website.

Note: the first steps of this tutorial show how you can manually install WordPress. Web Hosting providers now currently offer many solutions for automatic installation of this Content Management System, so you will probably never need to do these first steps, but probably will only have to click “install WordPress” (or something like this) on your web hosting provider’s administration interface.

WordPress is a Content Management System (CMS). CMS software is basically a software tool which can be used to manage the content of your website: content, images, videos, classification using tags and categories, users, comments, visual themes and appearance configurations, and things like that.

A CMS stores the content of your website on a database and then pulls it out from it to take care of the requests of your users (for example whenever an user requests a certain web page from your website the CMS pulls its content out of the database, formats it and visually presents it according to the appearance settings you configured on the CMS as well, and displays it on the user’s browser).

To install a CMS you will need:

a web server
a database
a scripting engine

Let’s start from the last one: the scripting engine. The CMS is a “program”, meaning that the pages of your website are created by executing a software program which:

interprets the request of the user
recalls the information from the database
assembles the resulting content by applying the visual information you configured on the CMS itself (on WordPress they are called “themes”)
composes the resulting interface by executing a series of additional procedures (for example, in the WordPress CMS, you are able to install plugins which provide additional functionalities such as calendars, better image/video galleries, connections to social networks…)
displays the result on the user’s browser

Programs are written in a certain programming language. WordPress uses the PHP language. So to use WordPress your computer will have to have installed a PHP execution environment.

Practically all web hosting providers have this option available for their users, but please do check before buying your service (for example your provider could be offering you a server using a Windows platform which has ASP configured instead of PHP).

So your web hosting provider will have to provide you with a web server, a database server and a PHP execution environment.

You might want to install these on your local machine before attempting to do it on the web. To do this, you can use the XAMPP toolkit which we provide in the RWR software kit.

First step: configure your database.

Use your PhpMyAdmin interface (either the one provided with your web hosting or the one included with XAMPP) to create a database.

Use your login and pasword (you should have been given one by your provider or you should have configured one while installing XAMPP) to access PhpMyAdmin and choose the “create a new database” option on its first screen to create the DB. (a note for this and other tutorials: labels and command names tend to change slightly or even heavily across the different versions of all software products: dont panic if you don’t find the exact label on your own screen, but search in detail for the closest thing you can find, and you will get it right 90% of the time: read what is written on your interfaces!)

Write a name for your database (any sequence of letters without accents, spaces and other “strange” characters will do), write it down so you don’t forget it (and yes, capital letters are important!) and click on the “CREATE” button to create it.

Select it from the list on the left of the interface (click on its name) and then click on the “User privileges” menu on the top of the interface.

You will be presented with a list of all the users which can access your databases (it might be empty if this is the first database you create).

Click on the button “Add new user” near the list.

Fill in the details (and store them somewhere, remembering that capital letters are important): choose a login/username (any alphanumeric string with no spaces/strange characters) a password (use both alphanumerics and punctuation, for max security) and, below these input fields select both the options which grant all privileges to your user: “grant all privileges to user” and “select all privileges” (this one will select all the checkboxes at the bottom of the screen).

Note: this is a simplified tutorial! We need to start quick and fast! You should not use the common practice of just granting all privileges to all your users! It is a dangerous act and might compromise your website, leaving it open to attacks and you could loose all your work by doing it! Please make sure you know a bit more about computer security before creating a real website by following at least a couple to the many tutorials on web security which are commonly found around the web.

So make sure that you write down all the information you created up to now (your database name, user name, password) and make sure you know the internet address of your database server: to find this out, look at the very top of your PhpMyAdmin interface; among other information you will find the host name/internet address for this, too.

Now let’s install WordPress.

To install WordPress download it from HERE (or use the one included in the RWR software kit, but we suggest you go on the website and download the most up to date version) and follow the instructions found here.

You basically have to:

create a directory (for example let’s call it “wordpress”) on your server (let’s say it is called http://www.yourdomain.com)
copy inside it the content of the wordpress ZIP archive you downloaded
open your browser and go to the directory (so in the example you would go to http://www.yourdomain.com/wordpress)
follow the on screen instructions
when prompted, insert the database name, user name, password, database host name you stored in the previous steps (make sure you use the same capitalization you used originally while creating the DB!)
when prompted for “tables prefix” just leave the value that is already written in the input field (for an explanation of this field refer to the installation instruction already linked above)
click “Install”
if for some reason the process requires you manually create a configuration file, showing you a text area full of PHP code:

copy it (copy all the text in the text area)
paste it on a plain text file (make sure it is a plain text file: notepad on Windows and textpad on macintosh can trick you as their basic setup is for Rich Text Format, make sure that you set it to plain text)
save the text file naming it “wp-config.php” (make sure that this is the real extension of the file by checking that windows or osx are not hiding the extensions of known file formats)
transfer the file using an FTP client software (like this one) to your server, placing it into the wordpress directory you created in the first step (so that there will be a “wp-config.php” file in the same directory where the “wp-settings.php” file is

click “Next”
voilà your WordPress CMS is installed!
choose an administrator login and password (write them down somewhere so that you don’t loose them)
configure a name and basic information for your website
you’re done

You can now access your wordpress website at (using the info of the example) http://www.yourdomain.com and you can access the administration interface (called Dashboard) at http://www.yourdomain.com/wp-admin (insert your WordPress administrator login and password to access it, not the database login and password)

This gets your WordPress up and running. If something doesn’t work: don’t despair! Erase everything and start over: it only takes a few minutes to complete all the steps. To erase the tables in your database: access PhPMyAdmin, click on the database name you created before, select all of its tables and click the “drop tables” function on the top menu. You are now ready to start over from scratch.

And this also ends the steps which you won’t have to do if your web hosting provider offers you an “install WordPress” function among its services.

Now we can Install MACME

MACME is a standard WordPress Plugin. To install it:

unpack your MACME ZIP archive included in the RWR software kit
copy the “macme” directory to the wordpress plugin directory on your server

using the info of the previous example it is found at www.yourdomain.com/wordpress/wp-content/plugins
use an FTP client to do the upload
make sure that you only copy the “macme” directory containing all the MACME files (for example, this directory should include the “macme.php” file directly inside it) and not a “macme” directory containing another “macme” directory and then the files: according to how you unzipped the archive this could happen

browse to the WordPress Dashboard
on the left side menu, search for the “Plugin” section and click on it
among the installed plugins list you will find the “macme” plugin
click on “Activate” (the command appears when you hover on the plugin name)
if everything goes well you should see the plugin installed

Let’s see what we can do using MACME

MACME allows you to add content to your CMS in ways which will ensure it to be accessible from a series of media and devices.

To do it, MACME allows you to insert certain types of content in a specific way.

Let’s create a new post:

go to your WordPress dashboard
go to the Posts section
click on the Add New Post command
in the editing interface that appears, add a title up top and some random text in the body
now click on the MACME icon ( ) on the editing toolbar (at the end of the first row of icons)
a popup will appear, allowing you to choose from a series of options (such as links, images, videos etc)
choose “video embed”, some additional fields should appear (title, description, embed code)
fill in the required information (choosing a title, a description, and pasting inside the “embed” field the embed code of a Youtube video of your choice)
click “Insert”
a shortcode (a special WordPress command enclosed by square brackets) should have been inserted into the body of your post where your cursor was placed
save the post (by clicking the “Publish” or “Update” button on the top-right)
after saving completed, click on the “View Post” command at the top of the window
your post including the video should appear on the browser

So that was easy: a video added to your website in a really easy way.

But what if I need to make this video accessible from print?

This is the case we’re aiming to: the Augmented Context requires that you provide some physically accessible digital content directly from signage or urban furniture of some kind.

For example you might wish to provide an instruction or introduction video directly from a signpost so that passer-bys are alerted that an Augmented Reality movie is available in the current location and so that they can access an easy, supportive way of understanding how to experience it (maybe the video shows them in a few easy steps how they can install the app on their smartphone and use it to walk around and see the movie).

Therefore our objective is to make this video accessible from print.

We can use a QRCode (so that the person could take a picture of the QRCode on the signpost and be taken automatically to the information/instruction video).

MACME can generate QRCodes for any content generated using MACME (meaning: any content added using the MACME icon on the editing toolbar).

There are two ways to do this:

MACME book
generate all QRCodes

MACME Book

MACME allows you to select some or all of your website content and to organize them in a book structure.

To do this,

go to the “MACME_BOOK” menu option on the bottom-left of your wordpress dashboard
choose some content from the left side of the interface, among the ones present in your CMS (and remember to choose the one in which you inserted the video using MACME) and bring them to the right side by clicking on the arrows beside their title
click on “SAVE ALL BOOK STRUCTURE”
go to the “MACME_BOOK_GENERATE” menu option on the bottom left of your wordpress dashboard
click on “GENERATE PDF”
click on “open generated PDF” as soon as the generation process finishes
a PDF will open in your browser
if you scroll down its pages (don’t worry about the default messages and missing images now, there are options in the MACME configuration menu to configure all of them correctly) you will come across the post containing your video added with MACME
the post contains a QRCode, if you scan it using a smartphone, it will take you to a generated web page containing your video
you can freely copy the QRCode image from the PDF (just select it in the PDF and “save as image”) and use it in your signage graphic design to link your design to the video

Generate All QRCodes

MACME offers you a function that allows you to generate all the QRCodes that are present on its database in a single place, so that it is easier to manage them.

For example you might wish to print all your QRCodes on stickers so that they could be disseminated across the location.

To do this:

create a new Page using the “Page” section on the left side of your WordPress dashboard, and the command “Add New Page”
choose a title for your page
in the body of the page paste the shortcode [macme_all_codes]
save the page (“Publish” or “Update”)
click on “View Page”
Done!

As you can see the page contains all the QRCodes generated by MACME in a single, easy to use place.

Each QRCode has a title and the link to which it refers to.

Its appearance can be changed by using the CSS stylesheet included with the MACME plugin, so that you can adapt them to your stickers and visual designs.

You can also freely copy the QRCodes and paste them directly onto your designs, and they will continue to work correctly.

You might want to consider using this Page as a service page: a page you and only you use to generate your QRCodes, without publishing it on the main interface of your website (for example by not including it in the navigation menus which you can configure in the “Appearance” section of the WordPress dashboard.

There are other shortcodes you might want to experiment with: they are listed in the “MACME” configuration menu at the bottom left of the WordPress dashboard, together with the configuration options which allow you to customize your MACME installation.

This procedure allows you to create the content which is needed for the Augmented Context and, more in a more general scenario, to create content (images, videos, sounds, maps and more ) which can be correctly and automatically accessed on a series of devices and from a series of physical media.

QRCodes can be printed, stenciled, attached using stickers, printed on objects, clothes and even on architectures and facades of buildings, allowing you to connect digital content virtually anywhere.

In this scenario you can easily create your content using the WordPress CMS and make it accessible cross-medially and across multiple devices using the MACME plugin.