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
- 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
- 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
- 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
- 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
- MACME book
- generate all QRCodes
- 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
- 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”