desinging a library portal madhu

DESIGNING A LIBRARY PORTAL

Dr.M.MadhusudhanEmail: [email protected]

09911817540

Dr.M.Madhusudhan 204/12/23

Presentation Outlay Library Website and its roles Objectives of Library Website Case Studies Development Stages Basic Terminology Basics of HTML Live Library Website Designing

Library Website A library website is a: virtual public face the quasi equivalent of the front door signage, pathfinders, collections or surrogates to the collections,

services, and, to an extent, its users.


Roles of Library Website

A library website can play different roles; it can serve as a workstation where a user finds

databases, electronic texts, and the online catalog. It is a way to make library-made products available, it is used as a window to the WWW by making Internet

resources available on a selective basis, and it is a communication tool where information about

services, people and facilities and collections can be found.”



Objectives of Library Websites Promote library use Provide information about the library and its

activities Provide online access to local information

and web-based sources Act as a gateway to networked information

resources (CD-ROM, intranet/Internet) Integrate Push-based and web-based

services


Internet-based Library Services

Case Study websites


Case Study 1


Case Study 2

Case Study 3



Example E.g. http://www.amu.ac.in:80\index\html http – protocol (standards written in C, C++) – is a set of

rules and regulations (SMTP: Simple Mail Transfer Protocol for email)

www – it is utility of the browser, which helps to browse the information on the web

amu – name of the server (computer/server name) DNS (Domain Name Server) is network identifier

ac – academic institution domain in – India 80 – number related to HTTP (FTP=27) index – Home Page html –extension of web page


Basic Terminology

Types of Website Static (never change e.g. article)Dynamic (interactive web pages e.g.email ID

& Password, Feedback Form)Tools for client side : HTML, DHTML, Java

&VB Script (client side – browser)Server side: ASP,JSP, JAVA SERLETS, CGI

(Technologies for server side – reply )Text Editors: Notepad and WordPadWeb Editors: DreamWeaver, MS-FrontPage


Tools for Designing a WebsiteWorking knowledge on: HTML Tags & Web Authoring Tools DreamWeaver/ MS – Front Page Allied Software: Photoshop (for images, banner) Flash (for dynamic images and content) JavaScript (for dynamic website) DHTML (for dynamic website) PHP (for dynamic website & web forms) Adobe Acrobat Professional (for PDF files)


Web Tools for Designing a Website

Social Networking Websites (using Templates): e.g. Webs.com, Tripod, Google sites, etc.

Web Content Management Systems: e.g. Drupal, Joomla, etc

Weblogs – blogspot (Google) and Bloglines (Ask Jeeves).

Other websites and more...


Development Steps

1. Design

2. Authoring and testing

3. Launch

4. Maintenance


Strategies for Website Development

From simple to interactiveStart simple (HTML, graphics, text, links)

Information about the library and its activities

Links to remote information sources (gateway)

Add interactivity Site search, Database access, CD-ROM access

Push-based services

Develop internal capabilities


Design

1. Content to be served

2. Audience

3. Content formats and processing

4. Structuring and navigation

5. Layout of home page and branch pages

6. Site Search support

7. Feedback and help


What are the design elements of a web page?

Overall look of the web page – the general look or feel of the page (aesthetic value)

Content – all the information contained within the page I.e. text and other media types embedded in the page

Navigational tools – the text links, icons, buttons, bars and other objects use for exploring the page and any linked pages

Graphics – the images other graphical elements in the page

Page layout and structure – organization of the elements in the page


Overall look Match the purpose of the web site and its appropriate information to the target audience

Maintain consistency, clarity and simplicity – uniform color scheme

Use of colors, images, hyperlinks and web technology effectively

Organize the design elements logically and predictably



Content Match the purpose of the web site and its

appropriate information to the target audience Information organized logically and predictably

(text and other media types) Ensure information is accurate, current,

relevant , useful complete, interesting, unique Employ a concise, easy to read writing style



Navigational tools Can be selected from text links, icons, buttons,

bars and other graphical elements Organized them logically and predictably Provide clear, quick and consistent method to

move within the site Provide easy to use and find links Should employ intuitive and descriptive pointers Help create the web site’s identity



Graphics Appropriate, essential, and relevant to the

content of the page Functional - serve a purpose and/or provide

information Of size, quality and file format appropriate for

the page content Used to add value to the overall design



Page layout and structure Follow the overall look guidelines Take the technical elements into consideration

descriptive file name descriptive document title complete contact information effective use of tables and frames browser compatibility


Basics of HTML


Basic Terminology HTML - the Hyper Text Markup Language - This

is markup language that web pages are written in. web page - a file written in HTML, usually placed

on intranet or internet servers. web site - a collection of web pages, linked

together on a server. to code - to type out HTML into a file. tags - codes in HTML telling the browser to do

something, such as make text bold, place a link, etc.


HTML File

HTML stands for Hyper Text Markup Language An HTML file is a text file containing small

markup tags The markup tags tell the Web browser how to

display the page An HTML file must have an htm or html file

extension An HTML file can be created using a simple text

editor


Structure of HTML Document HTML generally has 2 parts an on-code and off-code, which

contains the text to be defined Few tags do not require an off-code Syntax:<tagname>…</tagname> HTML to define and specify the specific elements that make

up a page such as the body of the text, heading, paragraphs, line breaks, text elements and so on

HTML to define the composition of a web page, not its appearance


<HTML> [identifies the document as HTML]

</HTML> [ closing tag ]These tags generally define the basic structure of a

web page

<HEAD> <TITLE>My Library</TITLE></HEAD>

Contains information about the HTML document

<BODY><P>Content of My Library’s Web Page</P></BODY> Contains all information displayed on the

browser

What are the basic HTML tags?

Designing a Model Library Website


Table / Navigational tools

Elements of a web page

Document title

Address (URL)

BannerWeb page title

Footer / Copyright

Graphic elements Hyperlinks

Content

Search tool

Navigational tools

Frames

Hyperlinks


Designing a Model Website (Live Demonstration)

Designing a Home page Designing a Banner Designing a sub-page Adding JavaScript and CSS Adding Dynamic Features


JavaScript

JavaScript is the scripting language of the Web! JavaScript is used in Web pages to improve the

design, validate forms, detect browsers, create cookies, and much more.

JavaScript is the most popular scripting language on the Internet, and works in all major browsers, such as Internet Explorer, Mozilla, Firefox, Netscape, and Opera.


What is CSS?

CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles are normally stored in Style Sheets Styles were added to HTML 4.0 to solve a

problem External Style Sheets can save you a lot of

work External Style Sheets are stored in CSS files Multiple style definitions will cascade into one


Just a Minute…

desinging a library portal madhu

Technology

librarys web page