© T

OTAL

IDEN

TITY

1

WEB 3.02009 Total Active MediaTotal Identity

Martijn Arts

© T

OTAL

IDEN

TITY

Total Identity

2

ActivitiesPositioningProfiling

Founded 1963 TOTAL DESIGN

2000 changed nameTOTAL IDENTITY

GroupTOTAL IDENTITY- Amsterdam- The HagueTOTAL ACTIVE MEDIA VERMEULENALLCOMMUNICATION SOFTWARE

No staff112

AreasConsultancyDesignPublishingInteractionPRCampaign

Earnings2005 10,7 mln2006 11,9 mln2007 14,2 mln2008 13,4 mln

Network partnersAntwerpBolzanoBremenDubaiHamburgLisboaMadrid

© T

OTAL

IDEN

TITY

3

Martijn ArtsLives in AmsterdamBorn in 1973MsC Delft Tech. Universitymarts@totalactivemedia.nl

Total Active MediaManaging Director.

Total IdentityShareholderBoard of directors

Social NetworksLinkedInHyvesTwitter (arts118)

© T

OTAL

IDEN

TITY

4

WEB 3.0

© T

OTAL

IDEN

TITY

5

This is what the first website looked like... The traditional ‘hook’ of the corporate website. It looked like a brochure... it was a static brochure!

© T

OTAL

IDEN

TITY

6

But even for a static online brochure programmers started to store the content in a database, starting with only texts.

© T

OTAL

IDEN

TITY

7

More and more data was stored in and retrieved from the database. Not only texts, but also images, navigation, sitemaps, forms and design elements. This resulted in a lot of custom code and a lot of connections to the database. More often than not, code looked like spaghetti.

© T

OTAL

IDEN

TITY

8

Instead of using stored procedures and other database proprietary code, developers made so-called ‘middleware solutions’: applications that separated content from front-end design.

© T

OTAL

IDEN

TITY

9

CMS

This middleware solution that separated content from front-end design was invented by a lot of web development agencies in the same period. The solution was given a name. It was called a content-managementsystem or in short a CMS.

© T

OTAL

IDEN

TITY

10

CMS

Separating a system into three layers was not new though. In traditional IT this can very well be compared to the three-tier-model of architecture. Technically, web development followed the same principles as traditional IT-development.

© T

OTAL

IDEN

TITY

11

CMS

As time went by, front-end design started to change. The traditional ‘hook’ of the corporate website started to disappear and a new design started to make its way into popularity: the portal. This website is characterized by using a lot of rectangular shapes in which different dynamic content is published.

© T

OTAL

IDEN

TITY

12

CMS

Not only portals were designed and developed. Also other web-sites were published. New websites with specific purposes like storing photo’s or video’s. These were called social media sites and their popularity grew fast. Apart from this, content syndication is made simpler. News and other data could now be exchanged by anyone, not only nerds.

© T

OTAL

IDEN

TITY

13

CMSAPI (I)

API (II)

API (III)

Social media websites were integrated in CMS-systems. This was very advantageous for CMS-developers and CMS-systems for they profited from the specific use of these social media sites and syndication formats like RSS (Really Simple Syndication). Integration is done using API’s (Application Program Interfaces) but also as custom development.

© T

OTAL

IDEN

TITY

14

CMSAPI (I)

API (II)

API (III)

API (IV)

API (V)

As time went by, more and more social media websites are developed and more and more of these are integrated in contentmanagement-systems.

© T

OTAL

IDEN

TITY

15

CMSAPI (I)

API (II)

API (III)

API (IV)

API (V)

API (VI)

API (VII)

API (VIII)

API (...)

Social media is said to be the biggest trend in 2009 and 2010 and even more social media websites are published. Among these the social networks gained enormous popularity, overshadowing corporate websites and even e-mail. The amount of integrations grew proportionally. This era of social media websites was named the web2.0 era.

© T

OTAL

IDEN

TITY

16

CMS

In the web2.0 social media boom the amount of possible integrations is enormous.

© T

OTAL

IDEN

TITY

17

CMS

And history repeats itself, more often than not, code again looked like spaghetti.

© T

OTAL

IDEN

TITY

18

CMS

Developers made a new solution that is architecturally similar to the ‘middleware solution’ that was described earlier: u universal adapter that aggregates content from other (social media) websites.

© T

OTAL

IDEN

TITY

19

CMSWEB3

This universal adapter is not named yet but a new name for the universal adapter could very well be a web3.0 adapter. This in correspondence to what industry leaders such as Microsoft and Google say about the new era of web3.0: the era of technical integration of the web after the explosion of different protocols, functionalities, (social media) sites, widgets, gadgets, et cetera.

© T

OTAL

IDEN

TITY

20

CMSWEB3

open APIopen IDopensocialopen datalicence...

open X

This web3.0 universal adapter uses new open standards such as openAPI, openID, opensocial, et cetera. Web3.0 could very well be the era of open X. After making content freely available, the web opens up all code, functionality and webservices to anyone.

© T

OTAL

IDEN

TITY

21

CMSWEB3

open APIopen IDopensocialopen datalicence...

open X

The universal web3.0 adapter is a generic solution for aggregation. The thing is that in web3.0 content is not only aggregated but also distributed.

© T

OTAL

IDEN

TITY

22

CMSWEB3

open APIopen IDopensocialopen datalicence...

open X

API (I)

API (II)

API (III)

The same API’s are used to distribute content via web syndication formats as RSS to social media sites like Flickr and YouTube.

© T

OTAL

IDEN

TITY

23

CMSWEB3

open APIopen IDopensocialopen datalicence...

open X

API (I)

API (IV)

API (II)

API (V)

API (III)

The story tends repeats itself. The amount of social media distribution channels increases. Lots of distribution and share icons appear on websites .

© T

OTAL

IDEN

TITY

24

CMSWEB3

open APIopen IDopensocialopen datalicence...

open X

embedRSSTwitterGadgetWidgetsend-to-a-friendplace-on-desktop...

WEB3

The web3.0 universal adapter does not only aggregate but also distributes via the same protocols and websites.

© T

OTAL

IDEN

TITY

25

CMSWEB3

open APIopen IDopensocialopen datalicence...

open X

embedRSSTwitterGadgetWidgetsend-to-a-friendplace-on-desktop...

Content InputOutput

WEB3

The architecture describes how content is aggregated (input) and distributed (output).

© T

OTAL

IDEN

TITY

26

CMSWEB3

open APIopen IDopensocialopen datalicence...

open X

embedRSSTwitterGadgetWidgetsend-to-a-friendplace-on-desktop...

Content InputOutput

The new CMS with adapters does not only manage the content for one website but for many archetypical sites. Web design is again influen-ced by the underlying system.

WEB3

© T

OTAL

IDEN

TITY

27 InputOutput

CMSWEB3

WEB3

The CMS and the adapters are combined into a new system that uses a smaller data storage because it uses social storage.

Content

© T

OTAL

IDEN

TITY

28 Throughput InputOutput

WMS

This new system I call a (true) webmanagementsystem or WMS, for managing throughput instead of content.

© T

OTAL

IDEN

TITY

29

futuristic?

© T

OTAL

ACT

IVE

MED

IA

© T

OTAL

IDEN

TITY

31

Aggregated input - the web as your database

The website of the Rotterdam Academy of Architecture uses del.icio.us to tag all web content that is interesting for the academy to use as corporate information, news or marketing.

The tagged information is published on the website of the academy. The web - and all its media - can thus be used as input for the academy website.

Just tag and use!

© T

OTAL

IDEN

TITY

32

CMS

Del.icio.us is used as content aggregator. This is pictured here. The universal web3.0 adapted is reduced to just using del.icio.us. Web sites can again be cost effective!

© T

OTAL

IDEN

TITY

33

Bottom-up input

• Making use of del.icio.us.• Tagging everything related to a topic for which you want to create a website.• Simplest form of content aggregation.• del.icio.us account can be read using RSS.• RSS content is stored in a database and enriched with new info and images.• Screenshots/thumbnails of tagged websites are made server side automatically.• All content stored on the web can thus be used in your own website.• Also all media en functionality that is available on the web.• Only the summary is written and design is made - after that a link to elsewhere.• No copyright problems and no investments in content creation or technology.

This solution has been developed for the Rotterdam Academy of Architecture

© T

OTAL

IDEN

TITY

34

Content InputOutput

Here the homepage of the Rotterdam Academy of Architecture is shown.

© T

OTAL

IDEN

TITY

35

Clicking on a website shows the website in the same window. The user does not leave the website.

© T

OTAL

IDEN

TITY

36

All share pop-up windows such as shareoholic and del-ico-us proprietary windows can be used. No custom code.

© T

OTAL

IDEN

TITY

37

Top-down output

• All webparts or containers have generic functions such as RSS, send-to-a-friend et cetera.• These functions are integrated as webservices in a so-called “frame” of a container.• We named these frame webservices “framelets” - open source.• These are developed as add-on for Drupal and Wordpress - others to follow.• All content on the portal page can thus be distributed.• This is a generic form of content injection - in social media websites.• For even more generic content injection we use Google Wave.• We publish to Google Wave - Google Wave distributes to all social media websites.• By doing this we follow the new developments of Google Wave - a promise for the future.

Is now being developed for Center Parcs Europe

© T

OTAL

IDEN

TITY

38

CMS

We are now working on a Google Wave solution for content-distribution or content-injection.

© T

OTAL

IDEN

TITY

39

i-tWave

© T

OTAL

IDEN

TITY

40

© T

OTAL

IDEN

TITY

41

Locative input - media as raw material

The i-tWave iPhone 3GS App makes is easy for you to record videos, photos, audio and texts in one application. The application stores the information with the geo location that is automatically detected by the iPhone.

i-tWave instantly distributes your mobile content to Twitter, Flickr, Wordpress and Drupal. On i-tWave.com you can manage and add social media accounts.

Just record, shoot, take or type and publish anywhere!

© T

OTAL

IDEN

TITY

42

In one easy to use interface, users can take a photo, write a text, record audio or video. This media is geo located automatically and sent to the server. Here you see some of the iPhone screenshots.

© T

OTAL

IDEN

TITY

43

The user can manage media as raw material on i-tWave.com.Also, maps can be managed and embedded elsewhere.

© T

OTAL

IDEN

TITY

44

Locative input - media as raw material

• The i-tWave iPhone 3GS App sends the original files as stored by the iPhone.• Original files are stored and can be downloaded in your personal i-tWave folder. • Files are automatically converted server side so it can be viewed in any browser.• Converted files are published automatically to Twitter, Flickr, Wordpress, and Drupal. • Files are published on Google Maps on i-tWave.com. • This personal map can be embedded as intermediate product in any other website.• Publishing options of raw material and intermediate products will be enhanced soon.• i-tWave is open source and based on Drupal.

Has been developed in-house

video

audio

foto’s

tekst

iPhone -tWave App manage embeds

manage social ingredients

man

age

profi

le

ingredients

embeds / halffabrikaten

i-tWave

Drupa

l beh

eerin

terfa

ce

sync

iPho

ne

© T

OTAL

IDEN

TITY

46

GoogleMapsmiddelware

© T

OTAL

IDEN

TITY

47

Middleware

© T

OTAL

IDEN

TITY

48

The Google Maps Middleware Solution offers anyone the opportunity to display data on a map on their own website. Locations, summaries, images and icons can be managed from your own CMS so no new system needs to be trained.

The Google Maps Middleware Solution can be integrated in GreenValley, Drupal and Wordpress. On makemymap.org* you can create an account, see a short tutorial and download the necessary plugins.

Just enter locations and publish you map anywhere!

* and googlemapsmiddleware.com (both soon to be launched)

Locative output - maps as intermediate product

© T

OTAL

IDEN

TITY

49

In easy to use pop-ups that are opened from your CMS, locations can be entered and managed. All locations are geo located automatically. Here you see two screenshots of the Google Maps Middleware Solution.

© T

OTAL

IDEN

TITY

50

The user can also manage what locations should be displayed on a map with what icons and embed it elsewhere.

© T

OTAL

IDEN

TITY

51

• The Google Maps Middleware solution stores as little data as possible - no double info.• Original data is retrieved (deep linked) from original contentmanagementsystem (CMS). • Locations are automatically geo coded server side so it can be viewed on a map.• Geo coded locations can be selected to be published on any number of maps. • This personal map can be embedded as intermediate product in any other website.• Uploading locations as CSV/XML is an user friendly option that is added soon.• Data can be synchronized using a webservice and scheduler (cronjob).• We are investigating other map services link Bing Maps, MapQuest and OpenStreetMaps.• The Google Maps Middleware is open source and based on Drupal.

Has been developed in house

Locative output - maps as intermediate product

other CMS

Goo

gleM

aps A

PI &

map

ping

ser

vice

CMS

GoogleMapsmiddleware

manag

e map

s

GreenValleyCMS

GoogleMapsAPI & mapping

manage location

© T

OTAL

IDEN

TITY

53

offline2009 Total Active MediaTotal Identity

Martijn Arts