© 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. [email protected]
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