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

งานนำเสนอเรื่อง: "หลักการในการออกแบบ 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 CU By Prof. Robert Stueart. TJTTP March 20-31,2000 Web Page : Concept & Design What is a web page Think about topics which should be included on the home page Find the best Library Home Page Introduce HTML Mr. 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 Design Considerations
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 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 free periodicals Link to local Resources
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 ที่มีลักษณะภาพอยู่ในภาพ ให้ใช้พื้นที่ว่างให้เป็นประโยชน์บนหน้าจอมีที่ว่างมากพอจึงควรใช้มากกว่าที่จะประหยัดเนื้อที่จนไม่น่าดู ให้แสดงข้อมูลแต่ละส่วนให้มีรูปแบบคล้ายกัน แต่ละย่อหน้าไม่ควรมีความยาวมากเกินไป ทุกๆหน้าควรจะมีข้อความส่วนท้าย ประกอบด้วย ชื่อ และ link ไปยังผู้ที่สามารถติดต่อได้ วันที่ในการ update ล่าสุด และชื่อของสถาบันต้นสังกัด ทุกหน้าควรมีชื่อห้องสมุดแสดง ตรวจทาน page อย่างเต็มรูปแบบ เพื่อแก้ไขไม่ให้เกิดความผิดพลาด มีการ update และบำรุงรักษาอย่างต่อเนื่อง

14 URL ที่แนะนำการสร้าง Web Page คู่มือการจัดรูปแบบบน Web Page www. w3
URL ที่แนะนำการสร้าง Web Page คู่มือการจัดรูปแบบบน Web Page www .w3.org/Provider/Style/Overview.html คู่มือ HTML บน Web ตัวอย่าง homepage ห้องสมุดที่ดี libweb.princeton.edu library.eng.chula.ac.th

15

16

17

18

19

20 libweb.princeton.edu

21

22 library.eng.chula.ac.th

23 ตัวอย่าง home page ห้องสมุดมหาวิทยาลัย ***

24 How to achieve Make it easy to navigate our pages
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 ขอบคุณค่ะ