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

jellytrickInternet and Web Development

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

299 views

Website Management

Seema Sirpal

Delhi University Computer Centre
University of Delhi
ssirpal@ducc.du.ac.in

http://people.du.ac.in/~ssirpal


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,

Streaming
Videos
Uses of the Web in Education
Roles the Web Can Play

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

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

Overview

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
Internet
service provider
, computers
called
servers
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
Protocol).


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)

Email (SMTP, IMAP, POP3, MAPI)

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
client-server
system.
Your computer is the client; the remote
computers that store electronic files are the
servers. To visit the website, enter the address
or
URL

(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
Server
The "glue" that holds the Web together is called
hypertext
and
hyperlinks
. 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
browsing
or
surfing
--based on what interests you at that particular
Moment.

Web pages are written in a computer language called
Hypertext
Markup Language
or
HTML
.
Navigating the Web

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

– E.g.,
www.du.ac.in
,
www.google.com

– 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:
www.du.ac.in
= 201.141.141.34
“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.

example:
http://
www.du.ac.in

The home page of University of Delhi

Web Addresses

General form:

scheme
://
host
.
domain
.
tld
/
directory
/
file

• http://
www.du.ac.in
/site/how/
index.html



Examples:
http://rajdhani.du.ac.in

http://buddhist.du.ac.in/

http://cs.du.ac.in/

http://jdm.du.ac.in/

http://placement.du.ac.in/

http://col.du.ac.in/
etc.

Deconstructing a web URL
Sub-domains on
du.ac.in

Steps for a Web development project
Analysis

Design

Production

Evaluation

§

Ask these questions when planning your web
site

Ø

What is your goal?
Ø

Who is the audience?
Ø

What is the content?
Ø

What is the timeline?
Analysis

Design
Production

Evaluation

§

Design Document

Ø

Consolidate your planning
Ø

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

Design

Production

Evaluation


WireFrame


A website wireframe (also "web
wire frame", "web wireframe",
"web
wireframing
") 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
developed.

Analysis

Design

Production

Evaluation

§

Usability: Jacob Neilson
`
s
l
Top 10 mistakes
in Web design
z

Ø

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
Analysis

Design

Production

Evaluation

§

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

Analysis

Design
Production

Evaluation

Analysis

Design
Production

Evaluation

§

Test the web pages locally
§

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

Get user feedback
§

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



Nothing is more important than the content of the site


Don’t confuse fancy effects with effective
communication


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



Client-Side


HTML


JavaScript


CSS – Cascading Style Sheet


Server-Side


PHP – Hypertext
Preprocessor



CGI – Common Gateway Interface


XML – Extensible
Markup
Language


Hybrid


AJAX (Asynchronous
Javascript
)

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).

http://www.w3schools.com



HTML

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
HTML and XHTML.

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
(W3C).
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
websites.

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.
JavaScript


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
4. PERL
5. Cold Fusion

Databases:
MySql
, Oracle, SQL Server etc.
MySQL :: The world's most
popular
open source
database




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


http://www.psdeluxe.com/articles/tools/10-popular-web-design-softwares/
- 10
Popular Web Design Softwares


http://web-design-software-review.toptenreviews.com/

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
templating
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.


Features
Goals
Contents
Wireframe
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

data


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

http://cmsreview.net/

http://www.packtpub.com/open-source-awards-home


Content Management System
STQC Security Check

Standardisation
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
centres
.


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


Assignments


Other Class or Subject related Matter


Communication with Students


ListServ
(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
(
http://www.du.ac.in
)

DU College. Department, Centre or Event Website & Database Hosting

http://web.du.ac.in
(more than 70 websites)- Linux, PHP,
MySql


DU Faculty Member's personal webpage hosting

http://people.du.ac.in


Sites of Interest
(available only within the DU Network)
Software Downloads
– http://
download.du.ac.in

Delhi University Intranet

- http://
intranet.du.ac.in

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