Transcript บทที่ 6 การพัฒนาเว็บไซต์

่
บทที 6
การพัฒนาระบบ
สารสนเทศ
บนเครือข่าย
เตรียมตัวให้พร ้อมก่อน
สร
้างเว็
บ
ก่อนทีจ
่ ะลงมือสร ้างเว็บไซต์ขน
ึ้ มาตามต ้องกาสงิ่ ทีส
่ าคัญ
ทีสด
ุ คือ พืน
้ ฐานทีค
่ วรรู ้จักเกีย
่ วกับการสร ้างเว็บไซต์
ทัง้ หมด ตัง้ แต่การเผยแพร่เว็บไซต์บนเครือข่าย
อินเตอร์เน็ ต ความหมายของคาต่าง ๆ เกีย
่ วกับเว็บไซต์
อ
่ บต
ี ปฏิ
และขึน
้ ตอนการสร ้างเว็บไซต์อย่างทีม
่ อ
ื อาชเพื
พ
ั ก
ิ น
ั
เพือ
่
ใคร
อะไร
จุดเด่น&
ด ้อย
ของเว็บ
ใกล ้เคียง
จุดเด่น&
ด ้อย
ของเว็บ
ตนเอง
เว็บไซต ์เผยแพร่ทางอินเทอร ์เน็ ต
ได้อย่ผา
งไรอข่ายอินเทอร ์เน็ ตนัน้
่ บไซต ์สามารถเผยแพร่
การทีเว็
่านเครื
มี องค ์ประกอบสาคญ
ั 4 ส่วน ดงั นี ้
่ ้าง
เว็บเพจ (Webpage) คือ ไฟล ์ HTML ของหน้าเว็บทีสร
้
ขึน
่ ในการเปิ ดไฟล ์
บราวเซอร ์(Browser) คือ โปรแกรมทีใช้
HTML เช่น Internet Explorer หรือ Netscape
Navigation เป็ นต้น
่ ใน
เครือข่ายอินเทอร ์เน็ ต (Internet) คือ เครือข่ายทีใช้
่
่
การส่งผ่านเว็บเพจและข้อมู ลต่าง ๆ ระหว่างเครืองที
่
เชือมต่
อก ันอยู ่ในเครือข่าเครื
ย อข่า
Browser
่
เว็บเซิร ์ฟเวอร ์(Web Server)
วเตอร ์ที่
ย คือ เครืองคอมพิ
้ั
่ บไฟล ์ของเว็บไซต ์ต่าง ๆ
ติดตงโปรแกรมส
าทีเก็
ร ้องขอเว็าหร
บ ับทาหน้
อิ
น
เทอร์
่
่ การร ้องขอเพือเปิ
่ ดดู
เครืเอาว้
องผู
ใ้ ช้
เพจจากเว็
า และให้
บริกบารเมือมี
เน็ต
ิ
เซ
ร
ฟ
์
เวอร์
Browser
เครือข่า
ย
ส่งเว็บเพจที่
่
ต ้องการ
เครืองผู
ใ้ ช้
อินเทอร์
กลับไปยัง
เน็ต
Browser
่
คาทีควรรู
้จักก่อนสร ้างเว็บไซต ์
(1)
เว็บไซต ์ (Website)
คือ ทุกสงิ่ ทุกอย่างที่
ประกอบกันขึน
้ มาเป็ น
เว็บของคุณ
เว็บเพจ (Webpage)
คือ ไฟล์ HTML 1
ไฟล์ทแ
ี่ สดงผลบน
บราวเซอร์นั่นเอง
โฮมเพจ(Homepage)
คือ เว็บเพจหน ้าแรก
ของเว็บไซต์ หรือ
เปรียบหน ้าเหมือ
ื
หน ้าปกหนั งสอ
URL (Universal
Resource
Location) คือ
มาตรฐานในการ
กาหนดทีอ
่ ยูข
่ อง
เว็บไซต์ในเครือข่าย
อินเทอร์เน็ ต หรือ
เรียกอีกอย่างว่าทีอ
่ ยู่
ของเว็บไซต์
(Internet Address)
บราวเซอร ์
(Browser) คือ
้
โปรแกรมทีใ่ ชแสดง
่
คาทีควรรู
้จักก่อนสร ้างเว็บไซต ์
(2)
HTML (Hyper Text
Markup Language)
คือ ภาษามาตฐานทีใ่ ช ้
ในการสร ้างเว็บเพจ
เพือ
่ นาไปแสดงบน
บราวเซอร์
FTP (File Transfer
Protocol) คือ
โปรโตคอลหรือ
มาตรฐานรูปแบบหนึง่ ที่
้
ใชในการรั
บ-สง่ ข ้อมูล
ระหว่างเครือ
่ ง
เว็บเซิร ์ฟเวอร ์ (Web
server) คือ เครือ
่ ง
คอมพิวเตอร์เครือ
่ งหนึง่
ในเครือข่าย
อินเทอร์เน็ ตทีท
่ าหน ้าที่
เก็บรวบรวมเว็บไซต์
ต่าง ๆ เอาไว ้ เพือ
่ ให ้
ผู ้ชมสามารถเข ้ามา
เปิ ดดูเว็บไซต์นัน
้ ได ้
่
ชือโดเมน
(Domain
ื่ ทีใ่ ช ้
name) คือ ชอ
อ ้างถึงเว็บไซต์แทน IP
Address เพือ
่ ให ้จดจา
รู ้จักรหัสโดเมน
รหัสโดเมน
com
edu
gov
mil
net
org
co.th
ใช้สาหร ับ
กลุม
่ การค ้าและเว็บไซต์
ทัว่ ไป
ึ ษา
สถาบันการศก
หน่วยงานของรัฐทีไ่ ม่ใช ่
หน่วยงานทางการ
ทหาร
หน่วงงานทางการทหาร
หน่วยงานเกีย
่ วกับ
เครือข่าย
หน่วยงานทีไ่ ม่หวังผล
กาไร
ตัวอย่าง
Pantip.com
Ucla.edu
Nasa.gov
Army.mil
Isp.net
Unesco.org
Infopress.co.
th
้
ขันตอนในการสร
้างเว็บไซต ์
สร ้างแปลนของ
เว็บไซต์
ออกแบบและลงมือ
สร ้าง
การเผยแพร่และ
ั พันธ์
ประชาสม
ประเมินผลเว็บไซต์
1. สร ้างแปลนของเว็บไซต ์
สร ้างแปลนของเว็บไซต ์ แปลนของเว็บไซต์
จะบอกว่าเว็บไซต์นัน
้ จะมีทงั ้ หมดกีห
่ น ้า การ
ื่ มโยงระหว่างแต่ละหน ้าเป็ นอย่างไร
เชอ
ภายในหน ้านัน
้ มีรายละเอียดเป็ นอย่างไรบ ้าง
สารวจความต้องการ เพือ
่ หา
ในขัน
้ ตอนนีจ
้ ะมี 2จุด
กิมุจง่ กรรมคื
อ
หมายในการจั
ดทาเว็บไซต์
โดยต ้องตอบคาถาม 4 ข ้อคือ
“เพือ
่ อะไร” “ทาเพือ
่ ใคร”
“จุดเด่นจุดด ้อยของเว็บ
ใกล ้เคียง” และ “จุดเด่นและจุด
ด ้อยของเว็บตนเอง”
สร ้าง Site map คือการเขียน
แบบร่างออกมาว่าเว็บไซต์วา่ จะ
1. สร ้างแปลนของเว็บไซต ์
หาข้อมู ลสาหร ับเว็บไซต ์ หลังจากได ้ site
map ออกมาเป็ นทีเ่ รียบร ้อย ก็เป็ นขัน
้ ตอนการ
เตรียมข ้อมูลแต่ละหน ้า ทัง้ สว่ นเนือ
้ หา
่ เสคัย
ี เลืงอรูกป
ภาพประกอบ และลูกเล่นอืน
่ ๆ เชน
ด
สร ้างสรรค ์
ข้อมู ลจาก
เคลือ
่ ขึ
นไหว
่ ๆ
้
แหล่งอืน
น
มาเอง
เช่น นิ ตยสาร
หนังสือพิมพ ์
หรือเว็บไซต ์
่
อืน
1. การสร ้างแปลนเว็บไซต ์
่
่ ดว่าเหมาะสม โดยหลักการ
หาชือโดนเมนที
คิ
ทีส
่ าคัญในการตั
ง้ อื่ ถึงวัตถุประสงค์
ควรส
ื่ โดเมน คืของเว็
ชอ
อ บไซต์
สะกดและจดจาได ้ง่าย
ไม่ซ้ากับคนอืน
่
Site Structuring
Sequence –
Chronological,
alphabetical, etc.
Grid – Useful for interrelated pages – e.g.
courses, manuals
Web – Associative,
complex links – e.g.
link internal/
external sites from
within a page.
Hierarchy – Well
understood and often
used – e.g.
organisational units
Typically, all these are used in
most sites
2. ออกแบบและลงมือสร ้าง
เว็บไซต ์
หลักการออกแบบ
เว็บเพจ
ั ้ ความสาคัญขององค์ประกอบ
• สร ้างลาดับชน
่
– เน้นว่าอะไรเป็ นเรืองส
าคญ
ั มาก สาคญ
ั รอง
– จ ัดระเบียบขององค ์ประกอบอย่างเหมาะสม
 ตาแหน่ งและลาดับขององค ์ประกอบ
สีและความแตกต่างของสี
่
ภาพเคลือนไหว
•
•
•
•
สร ้างรูปแบบ บุคลิก และสไตล์
จัดแต่งเว็บเพจให ้เป็ นระเบียบและเรียบง่าย
ให ้ Graphics อย่างเหมาะสม
้
เข ้าใจลักษณะการใชงานของเว็
บเพจ (ผ่านจอภาพ
หรือ ผ่านการพิมพ์)
2. ออกแบบและลงมือสร ้าง
เว็บไซต ์
หลักการออกแบบ
โฮมเพจ
โฮมเพจทีด
่ ค
ี วรมีลักษณะดังต่อไปนี้
แสดงถึงภาพรวมและสงิ่ ทีเ่ ป็ นประโยชน์ใน
เว็บไซต์
ั พันธ์กบ
ดูน่าสนใจและมีลักษณะทีส
่ ม
ั เนือ
้ หา
ื่ มโยงไปสูส
่ ว่ นหลัก ๆ ของ
มี link ทีส
่ ามารถเชอ
เว็บไซต์
แสดงผลได ้อย่างรวดเร็ว โดยใชรู้ ปภาพ graphics
อย่างจากัด
แสดงถึงสงิ่ ทีป
่ รับเปลีย
่ นใหม่
ื่
แสดงถึงเอกลักษณ์ของเว็บไซต์ ด ้วยการแสดงชอ
การออกแบบเว็บเพจ (Page
Design)
การออกแบบเว็บเพจให ้มีความยาวทีเ่ หมาะ
การออกแบบเว็บเพจสาหรับการพิมพ์ แบ่ง
เนือ
้ หาทีย
่ าวมาก ๆ ออกเป็ นสว่ นย่อย ๆ
สว่ นประกอบของหน ้าเว็บเพจ
สว่ นหัว (Page Header) เป็ นบริเวณทีส
่ าคัญทีส
่ ด
ุ
้
ื่ เว็บไซท์ ป้ าย
สว่ นใหญ่นย
ิ ม ใชวางโลโก
้ ชอ
โฆษณา ลิงค์ทส
ี่ าคัญ และระบบนาทาง
สว่ นของเนือ
้ หา (Page body) แสดงเนือ
้ หา
ภายในเว็บเพ็จนัน
้
สว่ นท ้าย (Page Footer) นิยมวางระบบนาทาง
ภายในเว็บไซท์
่ั
การออกแบบระบบเนวิเกชน
Navigation Bar
จะประกอบด ้วยกลุม
่ ลิงค์ตา่ ง ๆ ทีร่ วมกันอยูใ่ น
บริเวณหนึง่ ของเว็บอาจใชตั้ วอักษรหรือกราฟิ กก็ได ้
Frame Based
จะสามารถแสดงเว็บหลาย ๆ หน ้าในหน ้าต่างเว็บ
บราวเซอร์เดียวกัน โดยทีแ
่ ต่ละหน ้ายังเป็ นอิสระต่อ
กัน
Search Box
ื ค ้น (Search) ภายใน
เป็ นการเตรียมระบบการสบ
เว็บไซต์ เหมาะกับเว็บทีม
่ ข
ี ้อมูลปริมาณมาก ๆ
ั่  เข ้าใจง่าย มีความ
คุณสมบัตข
ิ องระบบเนวิเกชน
สมา่ เสมอ มีการตอบสนองผู ้ มีความพร ้อมและ
้
เหมาะสมต่อการใชงาน
3. การเผยแพร่เว็บไซท ์ (Publish
Website)
Web Hosting
ข ้อพิจารณา Web
Hosting
Free Web Hosting
การ Upload
3. การเผยแพร่เว็บไซท ์ (Publish
Website)
ดูจาก email ทีส
่ ง่ มาถึงทีม
ผู ้พัฒนา
การนับจานวน hit counter ของ
เว็บเพจ
ทัง้ นีจ
้ ด
ุ ประสงค์หลักของการ
ประเมินผลเว็บไซต์ ก็เพือ
่ นาผล
ของการประเมินนัน
้ มาพัฒนา
เว็บไซต์ตอ
่ ไป