Desinging a library portal madhu


Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Desinging a library portal madhu

  1. 1. DESIGNING A LIBRARY PORTAL Dr.M.Madhusudhan Email: [email_address] 09911817540
  2. 2. Presentation Outlay <ul><li>Library Website and its roles </li></ul><ul><li>Objectives of Library Website </li></ul><ul><li>Case Studies </li></ul><ul><li>Development Stages </li></ul><ul><li>Basic Terminology </li></ul><ul><li>Basics of HTML </li></ul><ul><li>Live Library Website Designing </li></ul>Dr.M.Madhusudhan 12/05/11
  3. 3. Library Website <ul><li>A library website is a: </li></ul><ul><li>virtual public face </li></ul><ul><li>the quasi equivalent of the front door </li></ul><ul><li>signage, </li></ul><ul><li>pathfinders, </li></ul><ul><li>collections or surrogates to the collections, services, and, </li></ul><ul><li>to an extent, its users. </li></ul>Dr.M.Madhusudhan 12/05/11
  4. 4. Roles of Library Website <ul><li>A library website can play different roles; </li></ul><ul><li>it can serve as a workstation where a user finds databases, electronic texts, and the online catalog. </li></ul><ul><li>It is a way to make library-made products available, </li></ul><ul><li>it is used as a window to the WWW by making Internet resources available on a selective basis, and </li></ul><ul><li>it is a communication tool where information about services, people and facilities and collections can be found.” </li></ul>Dr.M.Madhusudhan 12/05/11
  5. 5. Objectives of Library Websites <ul><li>Promote library use </li></ul><ul><li>Provide information about the library and its activities </li></ul><ul><li>Provide online access to local information and web-based sources </li></ul><ul><li>Act as a gateway to networked information resources (CD-ROM, intranet/Internet) </li></ul><ul><li>Integrate Push-based and web-based services </li></ul>Dr.M.Madhusudhan 12/05/11
  6. 6. Dr.M.Madhusudhan 12/05/11 Internet-based Library Services
  7. 7. Case Study websites
  8. 8. Case Study 1 Dr.M.Madhusudhan 12/05/11
  9. 9. Case Study 2 Dr.M.Madhusudhan 12/05/11
  10. 10. Case Study 3 Dr.M.Madhusudhan 12/05/11
  11. 11. Example <ul><ul><li>E.g. :80indexhtml </li></ul></ul><ul><ul><li>http – protocol (standards written in C, C++) – is a set of rules and regulations (SMTP: Simple Mail Transfer Protocol for email) </li></ul></ul><ul><ul><li>www – it is utility of the browser, which helps to browse the information on the web </li></ul></ul><ul><ul><li>amu – name of the server (computer/server name) DNS (Domain Name Server) is network identifier </li></ul></ul><ul><ul><li>ac – academic institution domain </li></ul></ul><ul><ul><li>in – India </li></ul></ul><ul><ul><li>80 – number related to HTTP (FTP=27) </li></ul></ul><ul><ul><li>index – Home Page </li></ul></ul><ul><ul><li>html –extension of web page </li></ul></ul>Dr.M.Madhusudhan 12/05/11
  12. 12. Basic Terminology <ul><ul><li>Types of Website </li></ul></ul><ul><ul><li>Static (never change e.g. article) </li></ul></ul><ul><ul><li>Dynamic (interactive web pages ID & Password, Feedback Form) </li></ul></ul><ul><ul><li>Tools for client side : HTML, DHTML, Java &VB Script (client side – browser) </li></ul></ul><ul><ul><li>Server side : ASP,JSP, JAVA SERLETS, CGI (Technologies for server side – reply ) </li></ul></ul><ul><ul><li>Text Editors : Notepad and WordPad </li></ul></ul><ul><ul><li>Web Editors: DreamWeaver, MS-FrontPage </li></ul></ul>Dr.M.Madhusudhan 12/05/11
  13. 13. Tools for Designing a Website <ul><li>Working knowledge on: </li></ul><ul><li>HTML Tags & Web Authoring Tools </li></ul><ul><li>DreamWeaver/ MS – Front Page </li></ul><ul><li>Allied Software: </li></ul><ul><li>Photoshop (for images, banner) </li></ul><ul><li>Flash (for dynamic images and content) </li></ul><ul><li>JavaScript (for dynamic website) </li></ul><ul><li>DHTML (for dynamic website) </li></ul><ul><li>PHP (for dynamic website & web forms) </li></ul><ul><li>Adobe Acrobat Professional (for PDF files) </li></ul>Dr.M.Madhusudhan 12/05/11
  14. 14. Web Tools for Designing a Website <ul><li>Social Networking Websites (using Templates): e.g., Tripod, Google sites, etc. </li></ul><ul><li>Web Content Management Systems: e.g. Drupal, Joomla, etc </li></ul><ul><li>Weblogs – blogspot (Google) and Bloglines (Ask Jeeves). </li></ul><ul><li>Other websites </li></ul><ul><li>and more... </li></ul>Dr.M.Madhusudhan 12/05/11
  15. 15. Development Steps <ul><li>Design </li></ul><ul><li>Authoring and testing </li></ul><ul><li>Launch </li></ul><ul><li>Maintenance </li></ul>Dr.M.Madhusudhan 12/05/11
  16. 16. Strategies for Website Development <ul><li>From simple to interactive </li></ul><ul><ul><li>Start simple (HTML, graphics, text, links) </li></ul></ul><ul><ul><ul><li>Information about the library and its activities </li></ul></ul></ul><ul><ul><ul><li>Links to remote information sources (gateway) </li></ul></ul></ul><ul><ul><li>Add interactivity </li></ul></ul><ul><ul><ul><li>Site search, Database access, CD-ROM access </li></ul></ul></ul><ul><ul><ul><li>Push-based services </li></ul></ul></ul><ul><li>Develop internal capabilities </li></ul>Dr.M.Madhusudhan 12/05/11
  17. 17. Design <ul><li>Content to be served </li></ul><ul><li>Audience </li></ul><ul><li>Content formats and processing </li></ul><ul><li>Structuring and navigation </li></ul><ul><li>Layout of home page and branch pages </li></ul><ul><li>Site Search support </li></ul><ul><li>Feedback and help </li></ul>Dr.M.Madhusudhan 12/05/11
  18. 18. What are the design elements of a web page? <ul><li>Overall look of the web page – the general look or feel of the page (aesthetic value) </li></ul><ul><li>Content – all the information contained within the page I.e. text and other media types embedded in the page </li></ul><ul><li>Navigational tools – the text links, icons, buttons, bars and other objects use for exploring the page and any linked pages </li></ul><ul><li>Graphics – the images other graphical elements in the page </li></ul><ul><li>Page layout and structure – organization of the elements in the page </li></ul>Dr.M.Madhusudhan 12/05/11
  19. 19. <ul><li>Overall look Match the purpose of the web site and its appropriate information to the target audience </li></ul><ul><li>Maintain consistency, clarity and simplicity – uniform color scheme </li></ul><ul><li>Use of colors, images, hyperlinks and web technology effectively </li></ul><ul><li>Organize the design elements logically and predictably </li></ul>What are the design elements of a web page? Dr.M.Madhusudhan 12/05/11
  20. 20. <ul><li>Content </li></ul><ul><li>Match the purpose of the web site and its appropriate information to the target audience </li></ul><ul><li>Information organized logically and predictably (text and other media types) </li></ul><ul><li>Ensure information is accurate, current, relevant , useful complete, interesting, unique </li></ul><ul><li>Employ a concise, easy to read writing style </li></ul>What are the design elements of a web page? Dr.M.Madhusudhan 12/05/11
  21. 21. <ul><li>Navigational tools </li></ul><ul><li>Can be selected from text links, icons, buttons, bars and other graphical elements </li></ul><ul><li>Organized them logically and predictably </li></ul><ul><li>Provide clear, quick and consistent method to move within the site </li></ul><ul><li>Provide easy to use and find links </li></ul><ul><li>Should employ intuitive and descriptive pointers </li></ul><ul><li>Help create the web site’s identity </li></ul>What are the design elements of a web page? Dr.M.Madhusudhan 12/05/11
  22. 22. <ul><li>Graphics </li></ul><ul><li>Appropriate, essential, and relevant to the content of the page </li></ul><ul><li>Functional - serve a purpose and/or provide information </li></ul><ul><li>Of size, quality and file format appropriate for the page content </li></ul><ul><li>Used to add value to the overall design </li></ul>What are the design elements of a web page? Dr.M.Madhusudhan 12/05/11
  23. 23. <ul><li>Page layout and structure </li></ul><ul><li>Follow the overall look guidelines </li></ul><ul><li>Take the technical elements into consideration </li></ul><ul><ul><li>descriptive file name </li></ul></ul><ul><ul><li>descriptive document title </li></ul></ul><ul><ul><li>complete contact information </li></ul></ul><ul><ul><li>effective use of tables and frames </li></ul></ul><ul><ul><li>browser compatibility </li></ul></ul>What are the design elements of a web page? Dr.M.Madhusudhan 12/05/11
  24. 24. Basics of HTML
  25. 25. Basic Terminology <ul><li>HTML - the Hyper Text Markup Language - This is markup language that web pages are written in. </li></ul><ul><li>web page - a file written in HTML, usually placed on intranet or internet servers. </li></ul><ul><li>web site - a collection of web pages, linked together on a server. </li></ul><ul><li>to code - to type out HTML into a file. </li></ul><ul><li>tags - codes in HTML telling the browser to do something, such as make text bold, place a link, etc. </li></ul>Dr.M.Madhusudhan 12/05/11
  26. 26. HTML File <ul><li>HTML stands for Hyper Text Markup Language </li></ul><ul><li>An HTML file is a text file containing small markup tags </li></ul><ul><li>The markup tags tell the Web browser how to display the page </li></ul><ul><li>An HTML file must have an htm or html file extension </li></ul><ul><li>An HTML file can be created using a simple text editor </li></ul>Dr.M.Madhusudhan 12/05/11
  27. 27. Structure of HTML Document <ul><li>HTML generally has 2 parts an on-code and off-code, which contains the text to be defined </li></ul><ul><li>Few tags do not require an off-code </li></ul><ul><li>Syntax:<tagname>…</tagname> </li></ul><ul><li>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 </li></ul><ul><li>HTML to define the composition of a web page, not its appearance </li></ul>Dr.M.Madhusudhan 12/05/11
  28. 28. <ul><li><HTML> [identifies the document as HTML] </li></ul><ul><li></HTML> [ closing tag ] </li></ul><ul><li>These tags generally define the basic structure of a web page </li></ul>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. 29. Designing a Model Library Website
  30. 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. 31. Designing a Model Website (Live Demonstration) <ul><li>Designing a Home page </li></ul><ul><li>Designing a Banner </li></ul><ul><li>Designing a sub-page </li></ul><ul><li>Adding JavaScript and CSS </li></ul><ul><li>Adding Dynamic Features </li></ul>Dr.M.Madhusudhan 12/05/11
  32. 32. JavaScript <ul><li>JavaScript is the scripting language of the Web! </li></ul><ul><li>JavaScript is used in Web pages to improve the design, validate forms, detect browsers, create cookies, and much more. </li></ul><ul><li>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. </li></ul>Dr.M.Madhusudhan 12/05/11
  33. 33. What is CSS? <ul><li>CSS stands for C ascading S tyle S heets </li></ul><ul><li>Styles define how to display HTML elements </li></ul><ul><li>Styles are normally stored in Style Sheets </li></ul><ul><li>Styles were added to HTML 4.0 to solve a problem </li></ul><ul><li>External Style Sheets can save you a lot of work </li></ul><ul><li>External Style Sheets are stored in CSS files </li></ul><ul><li>Multiple style definitions will cascade into one </li></ul>Dr.M.Madhusudhan 12/05/11
  34. 34. Just a Minute… Dr.M.Madhusudhan 12/05/11