Web3: a simple and visual explanation


Published on

This presentation shows the history of the web in simple iconic drawings. It results in the explanation of web3.0 and its possibilities and promises. In these simple drawings I tried to also make the underlying technology easy to understand. At the end of the presentation I show three brand new online uses or applications.

Published in: Technology, Business
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web3: a simple and visual explanation

  1. 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
  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
  29. © TOTAL IDENTITY 29 futuristic?
  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
  39. © TOTAL IDENTITY 39 i-tWave
  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
  46. GoogleMaps middelware © TOTAL IDENTITY 46
  47. © TOTAL IDENTITY 47 Middleware
  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