The document discusses designing a library portal website. It outlines the objectives of a library website such as promoting library use and providing access to information and resources. It also describes the basic terminology used in website design, development stages, and provides examples of case studies and a live demonstration of designing a model library website.

1. DESIGNING A LIBRARY PORTAL Dr.M.Madhusudhan Email: [email_address] 09911817540

2. Presentation Outlay Library Website and its roles Objectives of Library Website Case Studies Development Stages Basic Terminology Basics of HTML Live Library Website Designing Dr.M.Madhusudhan 12/05/11

3. 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. Dr.M.Madhusudhan 12/05/11

4. 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.” Dr.M.Madhusudhan 12/05/11

5. 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 Dr.M.Madhusudhan 12/05/11

6. Dr.M.Madhusudhan 12/05/11 Internet-based Library Services

7. Case Study websites

8. Case Study 1 Dr.M.Madhusudhan 12/05/11

9. Case Study 2 Dr.M.Madhusudhan 12/05/11

10. Case Study 3 Dr.M.Madhusudhan 12/05/11

11. 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 Dr.M.Madhusudhan 12/05/11

12. 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 WordPad Web Editors: DreamWeaver, MS-FrontPage Dr.M.Madhusudhan 12/05/11

13. Tools for Designing a Website Working 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) Dr.M.Madhusudhan 12/05/11

14. 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... Dr.M.Madhusudhan 12/05/11

15. Development Steps Design Authoring and testing Launch Maintenance Dr.M.Madhusudhan 12/05/11

16. Strategies for Website Development From simple to interactive Start 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 Dr.M.Madhusudhan 12/05/11

17. Design Content to be served Audience Content formats and processing Structuring and navigation Layout of home page and branch pages Site Search support Feedback and help Dr.M.Madhusudhan 12/05/11

18. 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 Dr.M.Madhusudhan 12/05/11

19. 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 What are the design elements of a web page? Dr.M.Madhusudhan 12/05/11

20. 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 What are the design elements of a web page? Dr.M.Madhusudhan 12/05/11

21. 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 What are the design elements of a web page? Dr.M.Madhusudhan 12/05/11

22. 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 What are the design elements of a web page? Dr.M.Madhusudhan 12/05/11

23. 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 What are the design elements of a web page? Dr.M.Madhusudhan 12/05/11

24. Basics of HTML

25. 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. Dr.M.Madhusudhan 12/05/11

26. 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 Dr.M.Madhusudhan 12/05/11

27. 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 Dr.M.Madhusudhan 12/05/11

28. <HTML> [identifies the document as HTML] </HTML> [ closing tag ] These tags generally define the basic structure of a web page What are the basic HTML tags? Dr.M.Madhusudhan 12/05/11 <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

29. Designing a Model Library Website

30. Elements of a web page Dr.M.Madhusudhan 12/05/11 Table / Navigational tools Document title Address (URL) Banner Web page title Footer / Copyright Graphic elements Hyperlinks Content Search tool Navigational tools Frames Hyperlinks

31. Designing a Model Website (Live Demonstration) Designing a Home page Designing a Banner Designing a sub-page Adding JavaScript and CSS Adding Dynamic Features Dr.M.Madhusudhan 12/05/11

32. 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. Dr.M.Madhusudhan 12/05/11

33. What is CSS? CSS stands for C ascading S tyle S heets 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 Dr.M.Madhusudhan 12/05/11

34. Just a Minute… Dr.M.Madhusudhan 12/05/11