The new age of the World Wide Web (WWW)

2. AGENDA
• WEB TECHNOLOGIES
Overview
Concept
History
• GENERATION OF WORLD WIDE WEB
Web 1.0
Overview
Elements
Technology
The Shift
Web 2.0
Overview
Characteristics
Technology (Open source, AJAX)
(CMS: Joomla, Web Browser:
Mozilla Firefox, SDK: Adobe Flex)
Latest Design Trends

3. WEB TECHNOLOGIES
“The interface between web
servers and their clients”
• Website Layouts
• Mark up languages
• Programming interfaces
& languages
• Document identification
& display

4. THE WWW CONCEPT
• Common information space
• Universality
• Social networking
• Analysis in general

5. GENERATIONS OF WWW
• Content
• Search
• Commerce
WEB 1.0
• Speedy
• Collaborative
• Trustworthy
• Ubiquitous
WEB 2.0 • The
Intelligent
Web
WEB 3.0

6. WEB 1.0
• First generation of the web (1991 - 2003)
- Development of www
- commercialization
- The “Dot com” boom
Overview

7. WEB 1.0
• Web 1.0 focused on Me and My site
Overview
Site Owner
Site Visitor
Static website
Creates website
Visits website
”Contact us” forms,
e-mail feedback,
e-newsletters, etc.

8. • Static pages instead of dynamic user-generated
content
• The use of Framesets
• The use of tables to position and align elements on a
page. These were often used in combination with
"spacer“ GIFs
• Online guestbook
• GIF buttons, typically 88x31 pixels in size promoting
web browsers and other products
• HTML forms sent via email
Elements
WEB 1.0

9. • Web 1.0 was dial-up, 50K average bandwidth
• Protocols such as HTTP
• Open standard markup languages such as HTML
and XML
• Internet access through ISPs
• Development of web browsers
Technology
WEB 1.0

10. THE SHIFT TO WEB 2.0
• Technological refinements
- Broadband improved browsers
- AJAX
- Flash application platforms
- Widgetization
• Change in general behavior of users
- Privacy concerns
- Rise in the literacy rate
- Need for better speed
- Social collaboration
Causes

11. WEB 1.0
• “the mostly read only web”
• 45 million global users (1996)
• focused on companies
• home pages
• owning content
• Britannica Online
• HTML, portals
• web forms
• directories (taxonomy)
• Netscape
• pages views
• Advertising
WEB 2.0
• “the wildly read-write web”
• 1 billion+ global users (2006)
• focused on communities
• blogs
• sharing content
• Wikipedia
• XML, RSS
• web applications
• tagging ("folksonomy")
• Google
• cost per click
• word of mouth
Differentiation
THE SHIFT TO WEB 2.0

12. • Term coined by O’Reilly Media in 2004
• Supposed 2nd generation of internet
based services
• Major emphasis on Online collaboration,
Social networking sites, wikis, open
source, photo sharing, video sharing,
blogs, Tagging
Overview
WEB 2.0
Facebook
Wikipedia
Flickr
Youtube
Twitter
Wordpress
Joomla
RSS Feed

13. • Draws together the capabilities of client and server
side software
• Information storage, creation and dissemination
capabilities
• “Network as platform” computing
• Rich user experience
• User participation
• Dynamic content
• Metadata
• Easy scalability
• SLATES
(Search – Links – Authoring – Tags – Extensions -
Signals)
Characteristics
WEB 2.0

14. • Search
• Links
• Authoring
• Tags (Folksonomies)
• Extensions
• Signals
Characteristics: SLATES
WEB 2.0

15. CLIENT SIDE TECHNOLOGIES
• Open source
• AJAX
SERVER SIDE TECHNOLOGIES
• PHP
• RUBYonRAILS
• COLDFUSION
• CGI Perl
• ASP
Technologies
WEB 2.0

16. Technologies
OPEN SOURCE
A software whose source code is published and made
available to the public, enabling anyone to copy, modify
and redistribute the source code without paying royalties
or fees
Examples:
• CMS (Content Management Systems)
Drupal
Joomla
WordPress
• Web Browser
Mozilla Firefox
• Wiki Server Software
MediaWiki
• SDK (Software Development Kit)
Adobe Flex
WEB 2.0

17. Technologies: OPEN SOURCE
CMS (Content Management System)
A content management system is software that keeps
track of every piece of content on your Web site
Examples:
Drupal
Joomla
WordPress
WEB 2.0

18. Technologies: OPEN SOURCE
• An open source solution that is freely available to
everyone
• Enables user to build Web sites and powerful online
applications
• Most popular Web site software available.
FEATURES:
• Easy installation
Joomla is relatively easy to install in a PHP/MySQL-
based hosting environment.
• Intuitive management
It is very easy to manage your website with
Joomla. The installation pack gives you a basic
idea how you can build your website
WEB 2.0

19. Technologies: OPEN SOURCE
FEATURES:
• Simple template customization
There are lots of templates available for Joomla on the web. You
can choose different themes for your sites depending on its
structure and orientation
• Extra resources for add-ons
If the CMS functionalities are not enough for you, Joomla allows
you to add extra tools on your site. With Joomla you can have
ecommerce, forum, gallery add-ons and more.
WEB 2.0

20. Technologies: OPEN SOURCE
WEB BROWSER
A software application used to locate and display web
pages
Examples:
Mozilla Firefox
WEB 2.0

21. Technologies: OPEN SOURCE
With security, stability, speed and much more, Firefox is
made for the way a user uses the Web.
FEATURES:
• Awesome Bars
Find the sites you love in seconds (and without having
to remember clunky URLs)
• One-Click Bookmarking
Bookmark, search and organize Web sites quickly and
easily
• Super Speed
View Web pages way faster, using less of your
computer’s memory
WEB 2.0

22. Technologies: OPEN SOURCE
• Easy Customization
Thousands of add-ons give you the freedom to make your
browser your own
• Private Browsing
Surf the Web without leaving a single trace
• Tabs
Do more at once with tabs you can organize with the drag of
a mouse
• Session Restore
Unexpected shutdown? Go back to exactly where you left of
• Personas
Instantly change the look of your Firefox with thousands of
easy-to-install themes
WEB 2.0

23. Technologies: OPEN SOURCE
SDK (Software Development Kit)
A programming package that enables a programmer to
develop applications for a specific platform
Examples:
Adobe Flex
WEB 2.0

24. Technologies: OPEN SOURCE
ADOBE FLEX
An open source framework for developing intuitive web
applications that make it much easier for people to view
and interpret data
TOOL KIT CHARACTERISTICS:
• Efficient programming model
• Developer tools
• Server integration
• Runtime consistency
• Plentiful components
• Outstanding performance
WEB 2.0

25. Technologies: OPEN SOURCE
ADOBE FLEX
USAGE:
Rich data visualization
Customer self service
Cleaner and more intuitive applications
WEB 2.0

26. Technologies
AJAX (Asynchronous JavaScript & XML)
A group of interrelated web development techniques
used on the client-side to create interactive web
applications
AJAX TECHNOLOGIES:
• HTML or XHTML for presentation
• The Document Object Model for dynamic display
of and interaction with data
• XML for interchange of data
• XMLHttpRequest object for asynchronous
communication
• JavaScript to bring these technologies together
WEB 2.0

27. Design Trends
OVER SIZED LOGO/HEADER
WEB 2.0

28. Design Trends
SKETCHES/ HAND DRAWN DESIGNS
WEB 2.0

29. RICH AND GIGANTIC TYPOGRAPHY
BASED DESIGNS
Design Trends
WEB 2.0

30. INTERACTIVE SINGLE PAGE LAYOUT
Design Trends
WEB 2.0

31. OUT-OF-THE-BOX DESIGNS
Design Trends
WEB 2.0

32. MAGAZINE/NEWSPAPER DESIGNS
Design Trends
WEB 2.0

33. 3D ELEMENTS &TEXT DESIGNS
Design Trends
WEB 2.0

34. CHANGE OF PERSPECTIVE
Design Trends
WEB 2.0

35. RETRO
Design Trends
WEB 2.0

36. The Semantic Web
WEB 3.0

37. THANK YOU