HNDIT11062 –

Web Development

Chapter 4 : Types of websites

1
 Course Content

 Static and Dynamic websites

 Web Syndication and Collaborative
websites
 Web 1.0 and Web 2.0

2
 Website
A website is a collection of related web pages
containing images, videos or other digital assets.

A web page is a document, typically written in plain

text with formatting instructions of Hypertext
Markup Language (HTML, XHTML).

• Other languages are;

» Java script
» XML
» VB script 3
Static and Dynamic
web sites

4
 Static web Sites
• For a static-content Web site, all content appearing on
Web pages is placed manually by professional Web
developers.
• This is also called "design-time page construction,"
because the pages are fully built while the site is being
developed.
• Static-content Web site is developed and then maintained
by experienced professionals.
• Such Web site usually costs less when initially developed,
but then all future changes still have to be done by Web
professionals.
• Therefore, a static Web site can be more expensive to
maintain, especially when you want to make frequent
changes to your site.
5
 Static web Sites…(cont.)
• Static web page
– a web page with contents that remain fixed
and unchanged once it has been created by
the author

2. Web server 3. HTML files 4. Client

looks for the return to client browser
corresponding formats
HTML files HTML files

1. Client requests
web pages Client computer
Web server

6
 Static web Sites…(cont.)
Static pages architecture:

Server

Browser

7
 Static web Sites…(cont.)
• Static web page

8
 Static web Sites…(cont.)
Static web sites are mainly focused on showing
permanent information , where the navigator is
limited by itself to obtain the data.
Static web sites can not interact with this
information, without interacting with the visited
web page.
These kind of web are not able to support web
applications as intelligent data base managers,
forums, consultations on line, intelligent e-mails...

9
• Quick to develop
• Cheap to develop and host
• Quick and easy to put together even by someone who
doesn’t have much experience
• A static web site can be created without any special type of
programming ( php , asp ) .

 The only disadvantage of the static websites resides on

the hard updating as well as the loss of powerful tools
supported with data bases, like the creation of historical
registers of the clients, orders online ..
10
 Dynamic web Sites
• Dynamic websites contain Web pages that are
generated in real-time.
 A web page with contents generated “on-the-fly” by the
server or the client computer according to clients’
requests
• These pages include Web scripting code, such as
PHP or ASP.
• When a dynamic page is accessed, the code within
the page is parsed on the Web server and the
resulting HTML is sent to the client's Web browser.
e.g. return the system’s current date and time to the
server browser (written in Active Server Page)
11
 Dynamic web Sites… (cont.)
• Dynamic-content Web site, while still developed
by professionals, can be maintained directly by
you, our customer.
• Such Web site initially costs more to develop, but
then you don't have to pay Web professionals
every time you need to change something on your
site.
• If you plan to make frequent changes to your site,
you most likely will be better off with a dynamic
Web site.
12
 Dynamic web Sites… (cont.)
Examples of dynamic website features could be:

• content management system

• e-commerce system
• bulletin / discussion boards
• intranet or extranet facilities
• ability for clients or users to upload documents
• ability for administrators or users to create content
or add information to a site (dynamic publishing).
13
• Much more functional website
• Much easier to update
• New content brings people back to the site and helps in
the search engines
• Can work as a system to allow staff or users to
collaborate

 Slower / more expensive to develop

 Hosting costs a little more
14
 E.g. Static vs. dynamic web pages

Buying ready-made lunch boxes: Ordering noodles in a noodle stall:

browsing static web pages browsing dynamic web pages

15
Comparison between static and dynamic web pages
16
Classification of dynamic web pages

1. Client-side dynamic web pages

• The creation of the web pages takes place in the
client computer

2. Server-side dynamic web pages

• The server is responsible for creating the web
pages

17
 Client-Side Dynamic Web Pages Vs
Server-Side Dynamic Web Pages

client-side dynamic web pages

4. Client browser
processes instructions Client-side Server-side
and HTML codes

1. Client requests the web pages

3. HTML codes and

Client computer instructions return Web server
5. Browser displays to client 2. Web server looks for HTML files
web pages together with instruction files

18
 Client-Side Dynamic Web Pages Vs
Server-Side Dynamic Web Pages
server-side dynamic web pages

Client-side Server-side 2. Web server

looks for
instruction
1. Client requests the web pages files

3.Web server
processes
4. HTML codes return to client instructions
Client computer and creates
5. Client browsers display the Web server the necessary
web pages HTML codes

19
Dynamic pages architecture:

Browser

Browser requests document

Server sends complete
e.g form on web page
document

Server
Server rec. CGI request

Perl Program
Program constructs new document or
sends specific one that already exists

20
Client-Side Dynamic Web Pages Vs
Server-Side Dynamic Web Pages

Comparison between client-side and server-side

dynamic web pages 21
 Client-Side Processing Technologies

• JavaScript
• VBScript
• Java
• Java Applets
• Common Gateway Interface (CGI)
• Active Server Pages (ASP)
• HyperText Preprocessor (PHP)

22
Collaborative and Syndication
Web sites

23
 Web syndication
• A marketing strategy for websites.
• A form of syndication in which website material is
made available to multiple other sites.
• Refers to making web feeds available from a site in
order to provide other people with a summary or
update of the website's recently added content
E.g. The latest news or forum posts
• Web syndication describes an arrangement between
two or more Internet companies for one company to
provide material to be made available on the other
party's site.
• Syndication benefits both the websites providing
information and the websites displaying it.
24
 Collaborative Web sites
A collaborative Web site comprises the
perpetual collective work of many authors.

E.g.
• Similar to a blog in structure and logic
• A wiki allows anyone to edit, delete or modify
content that has been placed on the Web site
using a browser interface, including the work of
previous authors.
• A blog, typically authored by an individual, does
not allow visitors to change the original posted
material, only add comments to the original
content. 25
 Collaborative Web sites…

• Allows individuals to create or upload documents to the

web where they can be.

• Users can share their thoughts, projects, links, etc. with

others.

• Users can respond to others ideas.

• Access can be restricted to selected users.

• Password protection is available.

26
 Wiki
• A website that allows the easy creation and editing of any
number of interlinked Web pages, using a simplified markup
language or a WYSIWYG text editor, within the browser.
• Typically powered by wiki software.
• Often used to create collaborative web sites, in knowledge
management systems etc.

BLOG
 A websites where entries are written in chronological order and
commonly displayed in reversed chronological order.
 Provide commentary or news on a particular subject.
 A typical blog combines text, images, links to other blogs, web
pages, and other media related to its topic.
 The ability for readers to leave comments in an interactive format
27
 Collaboration and Social Computing

• Users create and control collaborative

workspaces using standard meeting and team
site templates.
• Coordinate teamwork with shared calendars,
alerts, and notifications.
• Capture best practices and expertise using
blogs, wikis, Really Simple Syndication (RSS)
and surveys.
28
 What is Social Networking?

Social networking is the grouping of individuals

into specific groups, like small rural
communities or a neighborhood subdivision, if
you will.
Although social networking is possible in
person, especially in the workplace,
universities, and high schools, it is most
popular online.
29
E.g.
Name Description
Academia.edu Social networking site for
academics/researchers
My space leading social entertainment
destination powered by the
passion of fans. Music, movies,
celebs, TV, and games made
social.

Facebook Social networking for every one

Advogato Free and open source software

developers
Youtube, Twitter, etc.
30
 Social Networking… (cont.)

• The most cost effective way to keep in touch with your people (friends,
classmates, and relatives etc.).
• Not bound by any geographical and cultural differences. These sites are
a window to different cultures and places.
• Allows to send and receive messages, upload photos, and videos.
• A tool to promote business, services, products, or websites. Etc.

 The risk of identity theft and fraud.

The personal information of users can be used by dubious
people for illegal activities. Information like the e-mail address,
name, location, and age can be used to commit online crimes.
 If you do not know the person face to face then it will be
very hard for you to find the real identity.
 Online harassment and stalking 31
Web 1.0 Vs. Web 2.0

32
 Web 1.0
• Sir Tim Berners‐Lee

• Uniform access to disparate sources of information,

without differences between data sources

• Web 1.0, or web, refers to the first stage of the World

Wide Web linking WebPages with hyperlinks.

• Hyperlinks between WebPages began with the release

of the WWW to the public in 1993

33
 Web 1.0 … (cont.)
Some design elements of a Web 1.0 site include:

• 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
(1x1 pixel transparent images in the GIF format.
• HTML forms sent via email.
34
 Web 2.0
• The term Web 2.0 is associated with web
applications that facilitate participatory
information sharing, interoperability, user-
centered design and collaboration on the World
Wide Web.

• A Web 2.0 site allows users to interact and

collaborate with each other in a social media
dialogue as creators of user-generated content in
a virtual community.

35
 Web 2.0 … (cont.)

E.g.
 social networking sites
facebook, Twitter, Flicker, MySpace etc.
 Blogs
 Wikis
 MSN
 video sharing sites
YouTube etc.
 hosted services
36
 Web 2.0 … (cont.)
• Web Services / API’s
Emerging
Technology • “Folksonomies” / Content tagging
• “AJAX”
• RSS

Applications • Flicker
You • Google Maps
Know… • Blogging & Content Syndication

• Amazon API’s
Major • Google Adsense API
Retailers • Yahoo API
• Ebay API
37
38
 Web 2.0: Evolution Towards a Read/Write Platform

Web 1.0 Web 2.0

(1993-2003) (2003- beyond)

Pretty much HTML pages viewed Web pages, plus a lot of other “content”
shared over the web, with more
through a browser
interactivity; more like an application than
a “page”
“Read” Mode “Write” & Contribute

“Page” Primary Unit of content “Post / record”

“static” State “dynamic”

Web browser Viewed through… Browsers, RSS Readers, anything

“Client Server” Architecture “Web Services”

Web Coders Content Created by… Everyone

 WEB 1.0 Vs. Web 2.0
WEB 1.0 WEB 2.0
“the mostly read only web” “the wildly read-write web”
focused on companies focused on communities
e.g. Dot com, Bubble e.g. MySpace, Facebook
home pages blogs
owning content sharing content
HTML, portals XML, RSS
web forms web applications
directories (taxonomy) tagging ("folksonomy")
about wires about wireless.
Netscape Google

dial up broadband
Yahoo mail 1998 with 2 MB of storage. Google Mail (Gmail) with 2GB of storage.
 lesson review

 Differentiate Static and Dynamic web sites.

 Differentiate collaborative and Syndication web sites.

 Differentiate Web 1.0 Vs. Web 2.0.

 Describe how to migrate contents from Web 1.0 to
Web 2.0.

 Identify web sites under following categories

 Static and Dynamic
 Collaborative and Syndication
 Web 1.0 and Web 2.0