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

หลักการในการออกแบบ Web Page
ภัทร์ ภูรี จงเฟื่ องปริญญา
31 พ.ค. 43
สถาบันวิทยบริการ จุฬาฯ
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
Web Page คืออะไร
Web Page คือ สารสนเทศ หรือเอกสารทีอ่ ยู่บน
อินเตอร์ เน็ต Web Page จะเขียนด้ วยภาษา HTML
(Hyper Text Markup Language) ซึ่งจะกาหนดให้
มีเนือ้ หาและรู ปแบบต่ างๆ เช่ น ข้ อความ รู ปภาพ
ภาพเคลือ่ นไหวทีม่ เี สี ยงประกอบ (video & audio
files) hypertext links เป็ นต้ น
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
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
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
•
•
•
•
•
•
•
•
•
•
Quality of Content
ในแต่ ละหน้ าของ Web Page ควรกาหนดจุดประสงค์ ทชี่ ัดเจน
ข้ อความทั้งหมดควรกระชับและชัดเจน
ข้ อมูลของห้ องสมุดจะต้ องถูกต้ องเสมอ
แหล่ งข้ อมูลทีเ่ ลือกมาควรจะสนับสนุนการเรียน การสอนและการวิจัยของ
มหาวิทยาลัย
มีการ link ไปยังแหล่ งข้ อมูลทีม่ ปี ระโยชน์ ทเี่ กีย่ วข้ อง ความสาคัญอยู่ทเี่ นือ้ หาใน
Page ของเรา
Web อืน่ ๆ ทีจ่ ะทาการเชื่อมต่ อด้ วย ต้ องตรวจสอบความถูกต้ องและความน่ าเชื่อถือ
จะต้ องไม่ มกี ารสนับสนุนข้ อมูลที่ผดิ กฎหมายหรือละเมิดลิขสิ ทธิ์
เครื่องหมายควรมีคาอธิบายประกอบ
ไม่ ควรใช้ เสี ยงและภาพเคลือ่ นไหว ใช้ เฉพาะทีจ่ าเป็ นต่ อการสื่ อถึงเนื้อหานั้นๆ
ควรใช้ กราฟิ กที่จาเป็ นสร้ างสรรค์ ทเี่ หมาะสมกับเนือ้ หา
Content :Library Information







Web page statement
Contact email
Physical address
Update date
Staff Directory/Description of departments
News/Events
Description of Services and Policies
Content : References





Link to Web search engines
Link to Internet directories
Own and other OPAC
Link to Local information
Encyclopedias and Dictionaries
Content : Research
• Link to Net Subject Resources
• Link to local Resources
• Link to Subscription services
• Link to free periodicals
Content : Instructions
• Net software tutorials
• Library use tutorials
• Software tutorials
• Search engines guides
หลักในการจัดระบบงาน
• การจัดระบบงานใน Web ต้ องรวดเร็วต่ อผู้ใช้ ในการเข้ าถึงข้ อมูลที่ต้องการ โดยมี
อุปกรณ์ ช่วย เช่ นมีดชั นี หรือสารบัญค้ น
• ถ้ าข้ อมูลยาวมากควรใช้ link เข้ ามาช่ วย โดยแบ่ งข้ อมูลออกไปสร้ าง page ใหม่ ทมี่ ี
link เชื่อมโยงไปหาได้
• ข้ อความทีเ่ ป็ นหัวเรื่อง หรือ link ควรเป็ นคา หรือวลี ทีน่ ่ าสนใจ แต่ ต้องไม่ เกิน
ความจริง
• ข้ อมูลทีส่ าคัญทีส่ ุ ดควรอยู่ด้านบนของ page
• ควรมีข้อความบอกให้ ผ้ ูใช้ ทราบว่ าอยู่ ณ บริเวณใด ตลอดทั้ง site
• การกลับไปยัง home page ควรจะทาได้ จากทุกๆ page
• เป็ นการออกแบบสาหรับ WWW มีผ้ ใู ช้ ทวั่ โลก ต้ องเตรียมการเรื่องการเปลีย่ นแปลง
ภาษา
หลักในการจัดรู ปแบบ
• ใน home page ของห้ องสมุด หน้ าแรก ควรจะใช้ พนื้ ทีเ่ พียงหน้ าเดียว เพือ่ ความ
สะดวกในการอ่าน โดยไม่ ต้องเลือ่ นหน้ าจอและความรวดเร็วในการ load ข้ อมูล
• ทาให้ มขี ้ อมูลทีใ่ ช้ ประโยชน์ ได้ มาก แต่ ไม่ แน่ นจนเกินไป จัดทีว่ ่ างให้ เหมาะสม ให้
แสดงข้ อมูล โดยทาเป็ นตาราง หรือรายการทีส่ ามารถเลือกใช้ ได้ ง่าย
• ไม่ สร้ าง Web page ทีม่ ลี กั ษณะภาพอยู่ในภาพ ให้ ใช้ พนื้ ทีว่ ่ างให้ เป็ นประโยชน์ บน
หน้ าจอมีที่ว่างมากพอจึงควรใช้ มากกว่ าที่จะประหยัดเนือ้ ที่จนไม่ น่าดู
• ให้ แสดงข้ อมูลแต่ ละส่ วนให้ มรี ู ปแบบคล้ ายกัน แต่ ละย่ อหน้ าไม่ ควรมีความยาว
มากเกินไป
• ทุกๆหน้ าควรจะมีข้อความส่ วนท้ าย ประกอบด้ วย ชื่อ และ email link ไปยังผู้ที่
สามารถติดต่ อได้ วันที่ในการ update ล่ าสุ ด และชื่อของสถาบันต้ นสั งกัด
• ทุกหน้ าควรมีชื่อห้ องสมุดแสดง
• ตรวจทาน page อย่ างเต็มรู ปแบบ เพือ่ แก้ ไขไม่ ให้ เกิดความผิดพลาด
• มีการ update และบารุ งรักษาอย่ างต่ อเนื่อง
URL ที่แนะนาการสร้ าง Web Page
คู่มอื การจัดรู ปแบบบน Web Page
www .w3.org/Provider/Style/Overview.html
www.sun.com/styleguide
คู่มอื HTML บน Web
www.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
www.w3.org/Provider/Style/Overview.html
www.sun.com/styleguide
www.nashville.net/~carl/htmlguide
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
ตัวอย่ าง 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/
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
- -v[86I
ขอบคุณค่ ะ