This document provides an overview of web technologies and the evolution of the World Wide Web. It discusses Web 1.0, the first generation focused on static websites, and Web 2.0, the second generation focused on user-generated content and social media. Web 2.0 utilized new technologies like AJAX and introduced characteristics like user participation, tagging, and dynamic content. It also highlights some popular content management systems, web browsers, and software development kits that supported the shift to Web 2.0. Finally, it briefly introduces the concept of Web 3.0 and the Semantic Web.

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