Website Management - Home Pages of People@DU - University of ...

jellytrickInternet and Web Development

Nov 10, 2013 (7 years and 10 months ago)


Website Management

Seema Sirpal

Delhi University Computer Centre
University of Delhi

Educational Possibilities Offered by the Web

Simplified creation, distribution, and maintenance of
educational materials

Student-centered learning

Multiple channels for educational participation

Easy access to current information

Multimedia presentation of content -
Sound Files,

Uses of the Web in Education
Roles the Web Can Play

(Information about the class as a
whole such as a syllabus and notices.)
(Provides links to resources that supplement,
but are not required by, the class)
(Major course components are on the Web.)
Fully Webbed
(Entire course content and activities are on the

Introduction to the Internet
– What is the Internet?
– What is the World Wide Web?
– How does the Internet work?

Web content: sites and pages
– Locating content: URLs
– What is a web page?
– Static vs. dynamic pages

Web authoring: Using Tools e.g. Adobe Dreamweaver
– Static page authoring: HTML, CSS
– Dynamic page authoring: Forms, CGI, PHP


Internet is the network
of networks i.e. a
global network
What is Internet?
The Web physically consists
of your personal computer,
web browser
software, a
connection to an
service provider
, computers
that host digital
dat a, and
rout ers
a n d
swi t ches
t o di r ect t he f l ow of
i nf or mat i on.
Net Anat omy

The Internet and the Web are not the same thing.

The Web is just one of many services that make use
of the internet.

Internet & World Wide Web
(WWW)- The same?

TCP/IP (Transmission Control Protocol / Internet

Internet protocols are standardized, allowing different
types of computers to “talk” to each other.

Different services work within the TCP/IP framework.

Each computer or device connected to the Internet is
given a unique numeric address called an IP address.

Internet Protocols

World Wide Web (HTTP, HTTPS)


Directories (LDAP)

File transfer (FTP, SFTP, SCP)

Command line login (Telnet, SSH)

Instant messaging / Chat (ICQ, Jabber, AIM, .NET
Messenger Service, Yahoo! Messenger)

Streaming audio/video (RTP, RTSP, SMIL)

Voice (VoIP)

Internet Services with Protocols
The Web is known as a
Your computer is the client; the remote
computers that store electronic files are the
servers. To visit the website, enter the address

(Uniform Resource Locator)
of the
website in your web browser. Browser
requests the web page from the web server
that hosts the requested site. The server sends
the data over the Internet to your computer.
Your web browser interprets the data,
displaying it on your computer screen.
Navigating the Web
A web server can be referred to as either the hardware, the computer or
the software, the computer application that helps to deliver content that
can be accessed through the internet.

Most people think a web server is just the hardware computer, but a web
server is also referred to as the software computer application that is
installed in the hardware computer.

A web server is what makes it possible to be able to access content like
web pages, or other data from anywhere as long as it is connected to the
internet. The hardware part is what houses the content, while the software
part is what makes the content accessible through the internet. Examples:
IIS, Apache
The "glue" that holds the Web together is called
. This feature allows electronic files on the Web to be
linked so you can jump easily between them. On the Web, you
navigate through pages of information--commonly known as
--based on what interests you at that particular

Web pages are written in a computer language called
Markup Language
Navigating the Web

Most of the time, you see names in Web addresses, not IP numbers.

– E.g.,

– These are hostnames, human-readable aliases for numeric IP addresses.

Registered hostnames and their equivalent IP addresses are
stored in a DNS (Domain Name Server)

– When a web page is requested, the hostname is sent to the DNS,
which resolves it into an IP address.
For example:
“But when I browse the Web, I
don’t see IP numbers….”
World Wide Web is a network of
electronic files stored on millions of
computers all around the world.
Hypertext links these resources
together. Uniform Resource Locators
or URLs are the addresses used to
locate the files. Every URL is unique
and identifies one specific file.


The home page of University of Delhi

Web Addresses

General form:


• http://


Deconstructing a web URL
Sub-domains on

Steps for a Web development project





Ask these questions when planning your web


What is your goal?

Who is the audience?

What is the content?

What is the timeline?




Design Document


Consolidate your planning

Site structure, content, navigation, page layout, etc.





A website wireframe (also "web
wire frame", "web wireframe",
") is a basic
visual guide used in interface
design to suggest the structure of
a website and relationships
between its pages. A webpage
wireframe is a similar illustration
of the layout of fundamental
elements in the interface.
Typi cal l y, wi reframes are
completed before any artwork is






Usability: Jacob Neilson
Top 10 mistakes
in Web design


Long loading time

Outdated information

Using frames

Gratuitous u
se of Bleeding-edge technology

Scrolling text, constantly running animation

Complex URLs

Orphan pages

Long scrolling pages

Lack of navigation support

Non-standard link colors





Use Web authoring tool (e.g. Dreamweaver) to create
the web pages








Test the web pages locally

Upload the files to a Web server: publish your web site

Get user feedback

, redesign and revise the site
You create a Web
site on a computer.
Web Server (s)
Students / Public
access the site

Nothing is more important than the content of the site

Don’t confuse fancy effects with effective

Clean Design + Good Use of Technology = A Good
Web Site
Rules to Follow for Web Design
Web Languages




CSS – Cascading Style Sheet


PHP – Hypertext

CGI – Common Gateway Interface

XML – Extensible


AJAX (Asynchronous

Client Side Scripting

Client-side scripting generally refers to the class of computer programs on the
web that are executed client-side, by the user's web browser, instead of server-
side (on the web server). This type of computer programming is an important
part of the Dynamic HTML (DHTML) concept, enabling web pages to be
scripted; that is, to have different and changing content depending on user
input, environmental conditions (such as the time of day), or other variables.

Server Side Scripting

Server-side scripting is a web server technology in which a user's request is
fulfilled by running a script directly on the web server to generate dynamic web
pages. It is usually used to provide interactive web sites that interface to
databases or other data stores. This is different from client-side scripting where
scripts are run by the viewing web browser, usually in JavaScript. The primary
advantage to server-side scripting is the ability to highly customize the response
based on the user's requirements, access rights, or queries into data stores.

HTML, which stands for Hyper Text Markup Language, is
the predominant markup language for web pages. A markup
language is a set of markup tags, and HTML uses markup
tags to describe web pages.

HTML is written in the form of HTML elements consisting
of "tags" surrounded by angle brackets (like <html>) within
the web page content. HTML tags normally come in pairs
like <b> and </b>. The first tag in a pair is the start tag, the
second tag is the end tag (they are also called opening tags
and closing tags).


Cascading Style Sheets (CSS) is a style sheet language used to describe the
presentation semantics (the look and formatting) of a document written in a
markup language. Its most common application is to style web pages written in

CSS is designed primarily to enable the separation of document content (written
in HTML or a similar markup language) from document presentation, including
elements such as the layout, colors, and fonts. This separation can improve
content accessibility, provide more flexibility and control in the specification of
presentation characteristics, enable multiple pages to share formatting, and
reduce complexity and repetition in the structural content.

The CSS specifications are maintained by the World Wide Web Consortium
CSS-Cascading Style Sheet

JavaScript is primarily used in the form of client-side JavaScript, implemented as
part of a web browser in order to provide enhanced user interfaces and dynamic

The primary use of JavaScript is to write functions that are embedded in or
included from HTML pages. Some simple examples of this usage are:

Opening or popping up a new window with programmatic control over the size,
position, and attributes of the new window (e.g. whether the menus, toolbars, etc.
are visible).

Validating input values of a web form to make sure that they are acceptable before
being submitted to the server.

Changing images as the mouse cursor moves over them: This effect is often used
to draw the user's attention to important links displayed as graphical elements.

Static vs. Dynamic Website

Advantages of static websites
Quick to develop
Less cost to develop
Disadvantages of static websites
Requires web development expertise to update site
Site not as useful for the user
Content can get stagnant

Advantages of dynamic websites
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
Disadvantages of dynamic websites
Slower / more expensive to develop

Database Driven Webpages

Dynamic web pages are database driven. This means that you have a web page that
grabs information from a database (the web page is connected to the database by
programming,) and inserts that information into the web page each time it is loaded.

If the information stored in the database changes, the web page connected to the
database will also change accordingly (and automatically,) without human intervention.

Database driven sites can be built using several competing technologies, each with it’s
own advantages. Some of those technologies/tools include:
1. PHP
2. JSP
3. ASP
5. Cold Fusion

, Oracle, SQL Server etc.
MySQL :: The world's most
open source

Adobe Dreamweaver (formerly Macromedia Dreamweaver) is a web
development application originally created by Macromedia, and is now
developed by Adobe Systems, which acquired Macromedia in 2005.

Dreamweaver is available for both Mac and Windows operating systems.
Recent versions have incorporated support for web technologies such as CSS,
JavaScript, and various server-side scripting languages and frameworks
including ASP, ColdFusion, and PHP.

Developer(s): Adobe Systems

Stable release: CS5, CS5.5

Written in: C++

Platform: Mac OS X, Microsoft Windows

Type : Integrated Development Environment
Adobe Dreamweaver

DU has a campus license for Adobe CS5, 5.5 products

Adobe Photoshop, Flash, Acrobat, Dreamweaver, Fireworks
- 10
Popular Web Design Softwares

Adobe Dreamweaver
Dreamweaver allows users to preview websites in locally
installed web browsers.

It provides transfer and synchronization features, the ability
to find and replace lines of text or code by search terms and
regular expressions across the entire site,

and a
feature that allows single-source update of
shared code and layout across entire sites without server-side
includes or scripting. The behaviors panel also enables use
of basic JavaScript without any coding knowledge, and
integration with Adobe's Spry AJAX framework offers easy
access to dynamically-generated content and interfaces.

Generate Mockups
Built It
Steps to make a Website
Effortless Design: Website has 3 sec to catch
the attention on the visitor.

Interactive Design

Right information at right place.

Easy navigation
Website Architecture
File Transfer Protocol(FTP) is a standard network protocol used to copy a file
from one host to another over a TCP/IP-based network, such as the Internet.
FTP is built on a client-server architecture and utilizes separate control and
data connections between the client and server.
FTP-File Transfer Protocol
A Content Management System (CMS) is a system providing a collection
of procedures used to manage work flow in a collaborative environment.

The procedures are designed to do the following:

Allow for a large number of people to contribute to and share stored


Control access to data, based on user roles (defining which information

users or

user groups can view, edit, publish, etc.)

Aid in easy storage and retrieval of data

Reduce repetitive duplicate input

Auto Archival of content

Content Management System
STQC Security Check

Testing and Quality Certification (STQC) Directorate is an
attached office of the Department of Information Technology(DIT), Government
of India, provides quality assurance services in the area of Electronics and IT
through countrywide network of laboratories and

h t t p://w w w.s t q c.g o v.i n

W 3 C G u i d e l i n e s

T h e W o r l d W i d e W e b C o n s o r t i u m ( W 3 C ) i s a n i n t e r n a t i o n a l c o m m u n i t y w h e r e
M e m b e r o r g a n i z a t i o n s, a f u l l - t i m e s t a f f, a n d t h e p u b l i c w o r k t o g e t h e r t o d e v e l o p
W e b s t a n d a r d s. L e d b y W e b i n v e n t o r T i m B e r n e r s -
L e e a n d
C E O J e f f r e y J a f f e,
W 3 C's m i s s i o n i s t o l e a d t h e W e b t o i t s f u l l p o t e n t i a l.

h t t p://w w w.w 3 c.o r g

h t t p://w w w.w 3 c i n d i a.i n/

Intranet Portal

The Internet connects millions of computers and their users all over the world to
form a global network of many diverse organizations. In contrast, an Intranet is a
specialized network connecting individuals within a single organization.

Discover what's happening at the University/ College; Access a range of
personalized tools and information

Making materials accessible to Students

Course syllabus

Class Schedule

Class Outlines

Lecture Notes


Other Class or Subject related Matter

Communication with Students

(Mailing List)

Discussion Group

Reaching out to Students

SMS alerts

Email Updates

Payment Gateways

Web 2.0 in Education

The term
Web 2.0
is associated with web applications that facilitate
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, in contrast to websites where users are limited to
the passive viewing of content that was created for them.

Examples of Web 2.0 include social networking sites, blogs, wikis,
video sharing sites, hosted services, web applications.

Web 2.0 technologies provide teachers with new ways to engage
students in a meaningful way. "Children raised on new media
technologies are less patient with filling out worksheets and listening
to lectures”

because students already participate on a global level.

The Centre provides hosting infrastructure and content management for the
University website

DU College. Department, Centre or Event Website & Database Hosting
(more than 70 websites)- Linux, PHP,

DU Faculty Member's personal webpage hosting

Sites of Interest
(available only within the DU Network)
Software Downloads
– http://

Delhi University Intranet

- http://

Web Hosting Services at DUCC

Practical Experiences in
Using the Web

Education Is Changing

We are evolving a kind of education that suits the new
electronic medium. Increasingly what educators need to
do is to convey the concepts, the structure, and the basic
skills of our fields, thereby enabling the student to
continue self-instruction long after class is over.

P r o f. J o h n B o w e s

Technology Is Not A Panacea

Overall, I learned that you can't just drop technology into
a class on short notice. It takes preparation and
experience to be sure that technology enhances rather
than interferes in the process of the course.

P r o f. A n n e t t e O l s o n

P r a c t i c a l E x p e r i e n c e s i n
Using the Web