หลักการในการออกแบบ Web Page

1. หลักการในการออกแบบ Web Page ภัทร์ภูรี จงเฟื่องปริญญา 31 พ.ค. 43 สถาบันวิทยบริการ จุฬาฯ

2. Workshop on Developing Strategic Information Services and Teaching the Use of Technology as an aid in End-User Education in Engineering and Science Libraries CUBy Prof. Robert Stueart. TJTTP March 20-31,2000Web Page : Concept & DesignWhat is a web pageThink about topics which should be included on the home pageFind the best Library Home PageIntroduce HTMLMr. Nam, Systems Director at AIT

3. Web Page คืออะไร Web Pageคือ สารสนเทศ หรือเอกสารที่อยู่บน อินเตอร์เน็ต Web Page จะเขียนด้วยภาษา HTML (Hyper Text Markup Language) ซึ่งจะกำหนดให้ มีเนื้อหาและรูปแบบต่างๆ เช่น ข้อความ รูปภาพ ภาพเคลื่อนไหวที่มีเสียงประกอบ (video & audio files) hypertext links เป็นต้น

4. Web Pageที่เขียนเสร็จแล้วจะต้องนำไปเก็บไว้ที่ Web Server หรือ HTTP Server Web Page จะถูกส่งจาก Server ไปยังคอมพิวเตอร์ของผู้รับ ผ่าน HTTP (hypertext transfer protocol) HTTPเป็นวิธีรับและส่ง Web Page (hypertext files ซึ่งมีนามสกุล “.html”) บน อินเตอร์เน็ต โดยผู้ใช้สามารถเรียก Web Page มาดู โดยใช้โปรแกรมที่เรียกว่า Browser เช่น Netscape หรือ Internet Explorer

5. Principles of Web Page DesignConsiderations • 1 Content 2 Organization 3 format • Define the goal of the page • Identify the audience • Quality of content is of supreme importance

6. Content • Deciding on the content • Decide what to put on the web site • Identify the audience • Define the goal of the page The goal is to inform, instruct & even persuade the user to facilitate access to the collection, information & services of the library by creating a well-organized well-design and user friendly WWW resource

7. Quality of Content • ในแต่ละหน้าของ Web Page ควรกำหนดจุดประสงค์ที่ชัดเจน • ข้อความทั้งหมดควรกระชับและชัดเจน • ข้อมูลของห้องสมุดจะต้องถูกต้องเสมอ • แหล่งข้อมูลที่เลือกมาควรจะสนับสนุนการเรียน การสอนและการวิจัยของมหาวิทยาลัย • มีการ link ไปยังแหล่งข้อมูลที่มีประโยชน์ที่เกี่ยวข้อง ความสำคัญอยู่ที่เนื้อหาใน Page ของเรา • Web อื่นๆ ที่จะทำการเชื่อมต่อด้วย ต้องตรวจสอบความถูกต้องและความน่าเชื่อถือ • จะต้องไม่มีการสนับสนุนข้อมูลที่ผิดกฎหมายหรือละเมิดลิขสิทธิ์ • เครื่องหมายควรมีคำอธิบายประกอบ • ไม่ควรใช้เสียงและภาพเคลื่อนไหว ใช้เฉพาะที่จำเป็นต่อการสื่อถึงเนื้อหานั้นๆ • ควรใช้กราฟิกที่จำเป็นสร้างสรรค์ที่เหมาะสมกับเนื้อหา

8. Content :Library Information • Web page statement • Contact email • Physical address • Update date • Staff Directory/Description of departments • News/Events • Description of Services and Policies

9. Content : References • Link to Web search engines • Link to Internet directories • Own and other OPAC • Link to Local information • Encyclopedias and Dictionaries

10. Content : Research • Link to Net Subject Resources • Link to local Resources • Link to Subscription services • Link to free periodicals

11. Content : Instructions • Net software tutorials • Library use tutorials • Software tutorials • Search engines guides

12. หลักในการจัดระบบงาน • การจัดระบบงานใน Web ต้องรวดเร็วต่อผู้ใช้ในการเข้าถึงข้อมูลที่ต้องการ โดยมีอุปกรณ์ช่วย เช่นมีดัชนี หรือสารบัญค้น • ถ้าข้อมูลยาวมากควรใช้ link เข้ามาช่วย โดยแบ่งข้อมูลออกไปสร้าง page ใหม่ที่มี link เชื่อมโยงไปหาได้ • ข้อความที่เป็นหัวเรื่อง หรือ link ควรเป็นคำ หรือวลี ที่น่าสนใจ แต่ต้องไม่เกินความจริง • ข้อมูลที่สำคัญที่สุดควรอยู่ด้านบนของ page • ควรมีข้อความบอกให้ผู้ใช้ทราบว่าอยู่ ณ บริเวณใด ตลอดทั้ง site • การกลับไปยัง home page ควรจะทำได้จากทุกๆ page • เป็นการออกแบบสำหรับ WWW มีผู้ใช้ทั่วโลก ต้องเตรียมการเรื่องการเปลี่ยนแปลงภาษา

13. หลักในการจัดรูปแบบ • ใน home page ของห้องสมุด หน้าแรก ควรจะใช้พื้นที่เพียงหน้าเดียว เพื่อความสะดวกในการอ่าน โดยไม่ต้องเลื่อนหน้าจอและความรวดเร็วในการ load ข้อมูล • ทำให้มีข้อมูลที่ใช้ประโยชน์ได้มาก แต่ไม่แน่นจนเกินไป จัดที่ว่างให้เหมาะสม ให้แสดงข้อมูล โดยทำเป็นตาราง หรือรายการที่สามารถเลือกใช้ได้ง่าย • ไม่สร้าง Web page ที่มีลักษณะภาพอยู่ในภาพ ให้ใช้พื้นที่ว่างให้เป็นประโยชน์บนหน้าจอมีที่ว่างมากพอจึงควรใช้มากกว่าที่จะประหยัดเนื้อที่จนไม่น่าดู • ให้แสดงข้อมูลแต่ละส่วนให้มีรูปแบบคล้ายกัน แต่ละย่อหน้าไม่ควรมีความยาวมากเกินไป • ทุกๆหน้าควรจะมีข้อความส่วนท้าย ประกอบด้วย ชื่อ และ email link ไปยังผู้ที่สามารถติดต่อได้ วันที่ในการ update ล่าสุด และชื่อของสถาบันต้นสังกัด • ทุกหน้าควรมีชื่อห้องสมุดแสดง • ตรวจทาน page อย่างเต็มรูปแบบ เพื่อแก้ไขไม่ให้เกิดความผิดพลาด • มีการ update และบำรุงรักษาอย่างต่อเนื่อง

14. URL ที่แนะนำการสร้าง Web Pageคู่มือการจัดรูปแบบบน Web Pagewww .w3.org/Provider/Style/Overview.html www.sun.com/styleguideคู่มือ HTML บน Webwww.nashville.net/~carl/htmlguide ตัวอย่าง homepage ห้องสมุดที่ดี www.usc.edu/isd/locations/libraries.html www.harvard.edu/museums libweb.princeton.edu www.lib.pku.edu.cn/enhtml/index.htm library.eng.chula.ac.th

15. www.w3.org/Provider/Style/Overview.html

16. www.sun.com/styleguide

17. www.nashville.net/~carl/htmlguide

18. www.usc.edu/isd/locations/libraries.html

19. www.harvard.edu/museums

20. libweb.princeton.edu

21. www.lib.pku.edu.cn/enhtml/index.htm

22. library.eng.chula.ac.th

23. ตัวอย่าง home page ห้องสมุดมหาวิทยาลัย *** www.lib.auburn.edu www.library.cmu.edu www.lib.ksu.edu/ www.lib.lsu.edu/ www.calvin.edu/library www.uky.edu/Libraries www.lib.virginia.edu/

24. How to achieve • Make it easy to find us (worldwide) • Make it easy to navigate our pages • Make it informative and interesting • Make it look good (fashionable ???) • Make it a collection of collections Carefully outline and lay out the page in advance before beginning HTML mark-up

25. - -v[86I ขอบคุณค่ะ