More Related Content Similar to Web3: a simple and visual explanation (20) More from Total Identity (20) Web3: a simple and visual explanation1. WEB 3.0
2009
© TOTAL IDENTITY
Total Active Media
Total Identity
1 Martijn Arts
2. Total Identity
Activities Areas
Positioning Consultancy
Profiling Design
Publishing
Founded Interaction
1963 TOTAL DESIGN PR
Campaign
2000 changed name
TOTAL IDENTITY Earnings
2005 10,7 mln
Group 2006 11,9 mln
TOTAL IDENTITY 2007 14,2 mln
- Amsterdam 2008 13,4 mln
- The Hague
TOTAL ACTIVE MEDIA Network partners
VERMEULEN Antwerp
ALLCOMMUNICATION Bolzano
© TOTAL IDENTITY
SOFTWARE Bremen
Dubai
No staff Hamburg
112 Lisboa
2
Madrid
3. Martijn Arts
Lives in Amsterdam
Born in 1973
MsC Delft Tech. University
marts@totalactivemedia.nl
Total Active Media
Managing Director.
Total Identity
Shareholder
Board of directors
© TOTAL IDENTITY
Social Networks
LinkedIn
Hyves
Twitter (arts118)
3
4. 4
© TOTAL IDENTITY
WEB 3.0
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!
© TOTAL IDENTITY
5
6. But even for a static online
brochure programmers started to
store the content in a database,
starting with only texts.
© TOTAL IDENTITY
6
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.
© TOTAL IDENTITY
7
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.
© TOTAL IDENTITY
8
9. 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.
CMS
© TOTAL IDENTITY
9
10. 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.
CMS
© TOTAL IDENTITY
10
11. 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.
CMS
© TOTAL IDENTITY
11
12. 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.
CMS
© TOTAL IDENTITY
12
13. 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.
API (I)
CMS API (II)
API (III)
© TOTAL IDENTITY
13
14. As time went by, more and more
social media websites are developed
and more and more of these are
integrated in contentmanagement-
systems.
API (I)
CMS API (II)
API (III)
API (IV)
API (V)
© TOTAL IDENTITY
14
15. 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.
API (I)
CMS API (II)
API (III)
API (IV)
API (V)
API (VI)
API (VII)
© TOTAL IDENTITY
API (VIII)
API (...)
15
16. In the web2.0 social media boom the
amount of possible integrations is
enormous.
CMS
© TOTAL IDENTITY
16
17. And history repeats itself, more
often than not, code again looked
like spaghetti.
CMS
© TOTAL IDENTITY
17
18. 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.
CMS
© TOTAL IDENTITY
18
19. 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.
W
CMS E
B
3
© TOTAL IDENTITY
19
20. 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.
W
CMS E
B
3
open API
open ID
opensocial
open datalicence
...
© TOTAL IDENTITY
open X
20
21. 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.
W
CMS E
B
3
open API
open ID
opensocial
open datalicence
...
© TOTAL IDENTITY
open X
21
22. The same API’s are used to
distribute content via web
syndication formats as RSS to social
media sites like Flickr and YouTube.
API (I)
API (II)
API (III)
W
CMS E
B
3
open API
open ID
opensocial
open datalicence
...
© TOTAL IDENTITY
open X
22
23. The story tends repeats itself. The
amount of social media distribution
channels increases. Lots of
distribution and share icons appear
on websites .
API (I)
API (IV)
API (II)
API (V)
API (III) W
CMS E
B
3
open API
open ID
opensocial
open datalicence
...
© TOTAL IDENTITY
open X
23
24. The web3.0 universal adapter does
not only aggregate but also
distributes via the same protocols
and websites.
W
E
B
3
W
CMS
embed
RSS
Twitter
Gadget
E
Widget
send-to-a-friend
place-on-desktop
B
3
...
open API
open ID
opensocial
open datalicence
...
© TOTAL IDENTITY
open X
24
25. The architecture describes how
content is aggregated (input) and
distributed (output).
W
E
B
3
W
CMS
embed
RSS
Twitter
Gadget
E
Widget
send-to-a-friend
place-on-desktop
B
3
...
open API
open ID
opensocial
open datalicence
...
© TOTAL IDENTITY
open X
25 Output Content Input
26. 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.
W
E
B
3
W
CMS
embed
RSS
Twitter
Gadget
E
Widget
send-to-a-friend
place-on-desktop
B
3
...
open API
open ID
opensocial
open datalicence
...
© TOTAL IDENTITY
open X
26 Output Content Input
27. The CMS and the adapters are
combined into a new system that
uses a smaller data storage because
it uses social storage.
CMS
W W
E E
B B
3 3
© TOTAL IDENTITY
27 Output Content Input
28. This new system I call a (true)
webmanagementsystem or WMS,
for managing throughput instead of
content.
WMS
© TOTAL IDENTITY
28 Output Throughput Input
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!
© TOTAL IDENTITY
31
32. 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!
CMS
© TOTAL IDENTITY
32
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
© TOTAL IDENTITY
33
34. Here the homepage of the
Rotterdam Academy of Architecture
is shown.
© TOTAL IDENTITY
Content Output Input
34
35. Clicking on a website shows the
website in the same window. The
user does not leave the website.
© TOTAL IDENTITY
35
36. All share pop-up windows such as
shareoholic and del-ico-us
proprietary windows can be used.
No custom code.
© TOTAL IDENTITY
36
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
© TOTAL IDENTITY
37
38. We are now working on a Google
Wave solution for content-
distribution or content-injection.
CMS
© TOTAL IDENTITY
38
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!
© TOTAL IDENTITY
41
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.
© TOTAL IDENTITY
42
43. The user can manage media as raw
material on i-tWave.com.
Also, maps can be managed and
embedded elsewhere.
© TOTAL IDENTITY
43
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
© TOTAL IDENTITY
44
45. audio
manage profile
video
embeds / halffabrikaten
iPhone -tWave App manage embeds
i-tWave
ma
foto’s
na
ge
so
ingredients
e
cia
fac
l in
er
sync iPhone
int
gre
er
d
he
ien
be
ts
l
pa
ru
tekst
D
48. Locative output - maps as intermediate product
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!
© TOTAL IDENTITY
* and googlemapsmiddleware.com (both soon to be launched)
48
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.
© TOTAL IDENTITY
49
50. The user can also manage what
locations should be displayed on a
map with what icons and embed it
elsewhere.
© TOTAL IDENTITY
50
51. Locative output - maps as intermediate product
• 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
© TOTAL IDENTITY
51
52. GoogleMaps
API & mapping
s
ap
GoogleMaps API & mapping service
m
e
ag
an
m
m
an
ag
e
CMS
lo
ca
tio
n
GreenValley GoogleMaps other CMS
CMS middleware
53. offline
2009
© TOTAL IDENTITY
Total Active Media
Total Identity
53 Martijn Arts