Transcript กระบวนการ 13 ขั้นตอน ในการพัฒนาเว็บไซต์

อ.วรพจน์ พรหมจักร
1
INTERNET FOR EDUCATION
IT ในฐานะช่ วยทางด้ านการเรี ยนการสอน
การออกแบบ WEB DESIGN เพื่อพัฒนาบทเรียนบน WEB
- Introduction to Web Design
- Web Development Processes
2
การออกแบบให้ ตรงกับเป้าหมาย
และลักษณะของเว็บไซท์
3
วัตถุประสงค์
• เพื่อให้ นิสติ มีความรู้พื ้นฐานในการออกแบบเว็บไซต์
• เพื่อให้ นิสติ มีความรู้เกี่ยวกับองค์ประกอบของการออกแบบเว็บไซต์
• นิสติ สามารถอธิบายขันตอนในการพั
้
ฒนาเว็บไซต์ได้
• เพื่อให้ นิสติ สามารถออกแบบและพัฒนาระบบงานเกี่ยวกับเว็บเพจได้
4
ความสาคัญของการออกแบบเว็บไซต์
• เว็บไซต์เกิดขึ ้นมากมายผู้ใช้ จงึ มีทางเลือกมากขึ ้นที่จะเข้ าไปยังเว็บไซต์ตา่ ง ๆ ที่
ให้ บริการและจะไม่ทนอยูก่ บั เว็บที่สบั สน
• จากเว็บที่มีความสวยงามและเว็บที่มีข้อมูลอยูอ่ ย่างมากมายดูสบั สนวุน
่ วายและ
เสียเวลานานในการเข้ าดูคณ
ุ ต้ องการที่จะมีเว็บของคุณในลักษณะใด
• การออกแบบเว็บไซท์มีสว่ นสาคัญในการสร้ างความประทับใจให้ กบ
ั ผู้ใช้ บริ การ และ
ทาให้ อยากกลับเข้ ามาใช้ อีกในอนาคต หรื อดึงดูดผู้ใช้ ให้ อยูก่ บั เว็บได้ ตลอด
• การออกแบบเว็บไซท์นนไม่
ั ้ ได้ หมายถึงลักษณะหน้ าตาของเว็บไซท์เพียงอย่างเดียว
5
- การกาหนดเป้าหมายของเว็บไซต์
- ระบุกลุ่มผู้ใช้
- การจัดระบบข้ อมูล
- การสร้ างระบบวิเกชั่น
- การออกแบบหน้ าเว็บ
- การใช้ กราฟิ ก
- การเลือกใช้ สี และการจัดรู ปแบบตัวอักษร - ชนิดและรุ่ นของบราวเซอร์
- การคานึงถึงความแตกต่ างของสื่อกลางในการแสดงผลเว็บไซท์ ด้วย
- ขนาดของหน้ าจอมอมิเตอร์ และความละเอียดของสีในระบบ Plug – in
ชนิดต่ างๆ
6
7
องค์ ประกอบของการออกแบบเว็บไซต์ อย่ างมีประสิทธิภาพ
• ความเรี ยบง่ าย (Simplicity)
• มีรูปแบบที่เรี ยบง่าย ไม่ซบ
ั ซ้ อนและใช้ งานได้ อย่างสะดวก
• สื่อสารเนื ้อหาถึงผู้ใช้ โดยมีเฉพาะองค์ประกอบเสริ มที่จาเป็ นเท่านัน้
• ความสม่าเสมอ (Consistency)
• สร้ างความสม่าเสมอให้ กบ
ั เว็บไซต์โดยใช้ รูปแบบเดียวกันตลอดทังเว็
้ บไซต์ ทังใน
้
ส่วนของรูปแบบหน้ า สไตล์ของกราฟิ ก ระบบเนวิเกชัน และโทนสี
• ถ้ าลักษณะของแต่ละหน้ าในเว็บไซต์เดียวกัน แตกต่างกัน อาจทาให้ ผ้ ใู ช้ เกิด
ความสับสนได้
8
องค์ ประกอบของการออกแบบเว็บไซต์ อย่ างมีประสิทธิภาพ
• ความเป็ นเอกลักษณ์ (Identity)
• การออกแบบต้ องคานึงถึงลักษณะขององค์กร
• รูปแบบของเว็บไซต์สามารถสะท้ อนถึงเอกลักษณ์ขององค์กร
• เนือ้ หาที่มีประโยชน์ (Useful Content)
• ควรจัดเตรี ยมเนื ้อหาและข้ อมูลที่ผ้ ใู ช้ ต้องการให้ ถกู ต้ องและสมบูรณ์
• ควรมีการปรับปรุงและเพิ่มเติมให้ ทนั ต่อเหตุการณ์อยูเ่ สมอ
9
องค์ ประกอบของการออกแบบเว็บไซต์ อย่ างมีประสิทธิภาพ
• ระบบเนวิเกชันที่ใช้ งานง่ าย (User-Friendly
Navigation)
• ระบบเนวิเกชันจะต้ องออกแบบให้ ผ้ ใู ช้ เข้ าใจง่ายและใช้ งานสะดวก โดยใช้ กราฟิ ก
ที่สื่อความหมายร่วมกับคาอธิบายอย่างชัดเจน
• มีรูปแบบและลาดับของรายการอย่างสม่าเสมอ
• มีลักษณะที่น่าสนใจ (Visual Appeal)
• ความน่าในใจของเว็บไซต์จะมีความสัมพันธ์กบ
ั คุณภาพขององค์ประกอบต่าง ๆ
เช่น คุณภาพของกราฟิ ก การใช้ ชนิดตัวอักษร การใช้ โทนสี เป็ นต้ น
10
องค์ ประกอบของการออกแบบเว็บไซต์ อย่ างมีประสิทธิภาพ
• การใช้ งานอย่ างไม่ จากัด (Compatibility)
• ควรออกแบบเว็บไซต์ให้ ครอบคลุมกับผู้ใช้ สว่ นใหญ่มากที่สดุ
• ไม่ควรมีการติดตังโปรแกรมเพิ
้
่มเติม หรื อเลือกใช้ บราวเซอร์ ชนิดใดชนิดหนึง่
• สามารถแสดงผลได้ ทกุ ระบบปฏิบตั ิการและที่ความละเอียดหน้ าจอต่าง ๆ กันได้
อย่างไม่มีปัญหา
• คุณภาพในการออกแบบ (Design Stability)
• ควรให้ ความสาคัญกับการออกแบบเว็บไซต์
• ควรมีมาตรฐานการออกแบบและการจัดระบบข้ อมูล
11
องค์ ประกอบของการออกแบบเว็บไซต์ อย่ างมีประสิทธิภาพ
• ระบบการใช้ งานที่ถูกต้ อง (Functional Stability)
• ระบบการทางานต่าง ๆ ในเว็บไซต์จะต้ องมีความแน่นอนและทาหน้ าที่
ได้ อย่างถูกต้ อง เช่น การกรอกข้ อมูล การเชื่อมโยง เป็ นต้ น
• ควรมีการตรวจสอบการทางานอยูเ่ สมอ
12
ตัวอย่ างของการออกแบบเว็บไซต์ ท่ ดี ี
www.apple.com
จุดเด่ นในเรื่อง
-รู ปแบบทีเ่ ป็ นเอกลักษณ์
-ระบบเนวิเกชันทีเ่ ข้ าใจง่ าย
-การใช้ งานสะดวก
-กราฟิ กทีส่ วยงาม น่ าสนใจ
13
ทีมงานในการพัฒนาเว็บไซต์
• Webmaster
• เป็ นผู้ควบคุมในเรื่ องการออกแบบ เนื ้อหา และรายละเอียดทางเทคนิค
• Information Architect
• ทาหน้ าที่จดั ระเบียบข้ อมูลและทดสอบประสิทธิภาพในการใช้ งาน
• Designer
• เป็ นผู้ออกแบบลักษณะหน้ าตาของเว็บไซต์ และองค์ประกอบต่าง ๆ
• HTML and JavaScript Coder
• รับผิดชอบการสร้ างเว็บเพจโดยอาศัยเครื่ องมือต่าง ๆ
• ปรับปรุง เปลี่ยนแปลงข้ อมูล รวมถึงการอัพโหลดไฟล์
14
ทีมงานในการพัฒนาเว็บไซต์
• Developer/Programmer
• เป็ นผู้เขียนสคริ ปต์และโปรแกรมต่าง ๆ
• อาจต้ องเกี่ยวข้ องกับระบบฐานข้ อมูล
• System Administrator
• ทาหน้ าที่ควบคุม ดูแลเว็บเซิร์ฟเวอร์ รวมถึงฮาร์ ดแวร์ และซอฟต์แวร์ อื่นที่
เกี่ยวข้ อง
• สามารถวิเคราะห์และปรับตังระบบเพื
้
่อการทางานที่มีประสิทธิภาพ
• Content Editor/Writer
• เป็ นบรรณาธิการ โดยรับผิดชอบในการจัดเตรี ยมเนื ้อหา ตรวจสอบความถูกต้ อง
15
โปรแกรมช่ วยในการสร้ างเว็บ
ตัวอย่างโปรแกรมช่วยสร้ างเว็บ เช่น Dreamweaver
,FrontPage ,GoLive ,Homesite ,HotDog Pro ,HotMetalPro
, NetObjects Fusion ซึง่ โปรแกรมเหล่านี ้มีประโยชน์อย่างมากทีจ่ ะช่วย
ในการพัฒนาเว็บไซท์ได้ อย่างสะดวก และรวดเร็ว โดยไม่จาเป็ นต้ องรู้
ภาษา HTML
16
เริ่มต้ นออกแบบเว็บไซต์
17
เริ่มต้ นสร้ างเว็บไซต์
การสร้ างเว็บที่ดี ต้ องอาศัยการออกแบบและจัดระบบข้ อมูลอย่าง
เหมาะสม และพัฒนาตามขันตอน
้
ซึง่ ในกระบวนการพัฒนาเว็บไซต์
นันจะอาศั
้
ยหลักการจัดระบบโครงสร้ างข้ อมูลที่เรี ยกว่า Information
Architecture โดยจะอยูใ่ นหลายๆส่วน ตังแต่
้ ขนตอนแรกจนถึ
ั้
งขันที
้ ่
ได้ เป็ นรูปแบบโครงสร้ างสุดท้ าย ( Final Architecture Plan ) ซึง่ ถือ
เป็ นกระบวนการที่สาคัญมากที่จะทาให้ เว็บไซท์บรรลุตามเป้าหมาย
ที่ตงไว้
ั้
18
การจัดระบบโครงสร้ างข้ อมูล (Information Architecture)
การจัดระบบโครงสร้ างข้ อมูล คือ การพิจารณาว่าเว็บไซท์ควรจะ
มีข้อมูลและการทางานใดบ้ าง ด้ วยการสร้ างเป็ นแผนผังโครงสร้ าง
ก่อนที่จะเริ่มลงมือพัฒนาเว็บเพจ โดยเริ่มจากการกาหนดเป้าหมาย
ของเว็บไซท์ และกลุม่ ผู้ใช้ เป้าหมาย ต่อมาก็พิจารณาถึง เนื ้อหา และ
การใช้ งานที่จาเป็ น แล้ วนามาจัดกลุม่ ให้ เป็ นระบบ จากนันก็
้ ถึงเวลา
ในการออกแบบโครงสร้ างข้ อมูลในหน้ าเว็บให้ พร้ อมที่จะนาไป
ออกแบบกราฟิ ก และหน้ าตาให้ สมบูรณ์ตอ่ ไป ซึง่ แผนผังโครงสร้ างมี
ลักษณะดังภาพต่อไปนี ้
19
บุคลากร
เป้าหมาย
เนือ้ หา
เงินทุน
เว็บไซท์
ระยะเวลา
กลุ่มผู้ใช้
20
การจัดระบบโครงสร้ างข้ อมูลเป็ นพื ้นฐานสาคัญในการออกแบบ
เว็บไซท์ที่ดี ที่จะช่วยพัฒนาแบบแผนรายละเอียดข้ อมูลในการ
ออกแบบเว็บไซท์ ซึง่ ได้ แก่ รูปแบบการนาเสนอ, ระบบการทางาน,
แบบจาลอง, ระบบเนวิเกชัน และอินเตอร์ เฟสของเว็บ ดังนันการ
้
จัดระบบโครงสร้ างข้ อมูลจึงเป็ นสิง่ สาคัญที่เกี่ยวข้ องอยูใ่ น
กระบวนการออกแบบเว็บไซท์
21
การออกแบบเพื่อความสาเร็จของเว็บ
พืน้ ฐานในการออกแบบเว็บไซท์ ท่ ดี ีมีดังนี ้
1. มีเนื ้อหาเป็ นประโยชน์ ตรงกับที่ผ้ ใู ช้ ต้องการ
2. มีการปรับปรุงเพิ่มเติมเนื ้อหา และพัฒนาเว็บไซท์อยูเ่ สมอ
3. ใช้ เวลาในการดาวน์โหลดน้ อย แสดงผลเร็ว
4. การใช้ งานที่สะดวก เข้ าใจง่าย
22
ค้ นหาเป้าหมายในการสร้ างเว็บไซต์
• สร้ างเว็บทาไม และเพื่ออะไร
• สร้ างเว็บไซต์ให้ ใคร และใครคือกลุม
่ เป้าหมาย
• หาจุดเด่นและจุดด้ อยของเว็บไซต์อื่นๆ ที่มีเนื ้อหาใกล้ เคียง
• กาหนดจุดเด่นและจุดด้ อยของเว็บตัวเอง
การออกแบบโครงสร้ างเว็บไซต์
• พยายามกาหนดการเชื่อมโยงของหน้ าเว็บเพจต่างๆ ให้ สามารถคลิกกลับไปมาจากหน้ าต่างๆ ได้
สะดวก เพื่อให้ ผ้ ชู มสามารถคลิกเข้ าไปเยี่ยมชมเนื ้อหาที่สนใจได้ สะดวก
หน้ าตาของเว็บไซต์
 โดยทัว่ ๆ ไปเว็บไซต์สว่ นใหญ่จะมีโครงสร้ างที่ยอมรับว่าเป็ นมาตรฐานอยู่ 3 แบบ คือ
แบบที่ 1 จะประกอบด้ วยพื ้นที่สว่ นหัวของหน้ าด้ านบน (สีฟ้า) เมนูทางซ้ ายมือ (สีเขียว) และส่วน
แสดงเนื ้อหา (สีเหลือง) ในด้ านขวามือ
แบบที่ 2 จะคล้ ายกับแบบที่ 1 แต่จะเพิ่มผังรายละเอียดด้ านขวามือขึ ้นมา โดยมีส่วนเนื ้อหาอยู่ตรง
กลางหน้ า (เว็บสาเร็จรูปหลายแบบนิยมใช้ เหมาะกับการทาหน้ าแรกที่ต้องการเสนอประเด็นสาคัญ
ที่น่าสนใจ สามารถคลิกไปดูรายละเอียดในหน้ าถัดไปได้ )
แบบที่ 3 จะตัดส่วนเมนูซ้ายขวาออก นาเอาเมนูไปแทรกไว้ ที่สว่ นหัวเรื่ องและในส่วนท้ ายหน้ าแทน
(เหมาะกับเว็บไซต์เล็กๆ ที่ต้องการแสดงความสวยงามในการออกแบบภาพกราฟฟิ ก มากกว่า
เนื ้อหาภายใน)
โครงสร้ างของเว็บไซต์
โครงสร้ างทัง้ 3 แบบจะมีสว่ นประกอบหลักอยู่ 3 ส่วน คือ
• ส่ วนหัวเรื่ อง เป็ นส่วนที่จะบรรจุตรา/เครื่ องหมาย/สัญลักษณ์ของเว็บไซต์นนั ้
(หน่วยงานหรื อ องค์กร) ซึง่ มีความนิยมวางไว้ ที่ตาแหน่งมุมซ้ ายบนจะเหมาะสม
ที่สดุ (ในวงกลม) (ผลจากการวิจยั ตาแหน่งที่ได้ รับความนิยมในการวางโลโก้ คือ
ซ้ าย 74% กลาง 20% ขวา 6%) ด้ านขวามืออาจวางแบนเนอร์ โฆษณากิจกรรม
ต่างๆ ได้
• ส่ วนเมนู เป็ นส่วนที่จะนาพาผู้ชมเข้ าไปยังหมวดหมูเ่ นื ้อหาที่จดั ไว้ ได้ อย่างสะดวก
รวดเร็ว ทาหน้ าที่เหมือนกับถนนหรื อแผนผังเส้ นทางเดิน หรื อหน้ าสารบัญในหนังสือ
อาจวางไว้ ในตาแหน่งบนสุดใต้ สว่ นหัวเรื่ อง หรื อแทรกในส่วนหัวเรื่ องก็ได้ และทา
เมนูปลีกย่อยไว้ ในส่วนซ้ ายของหน้ า หรื อส่วนล่างของหน้ า
• ส่ วนเนือ้ หา เป็ นส่วนที่จะแสดงรายละเอียดของเนื ้อหาแต่ละเรื่ องสัมพันธ์กบ
ั เมนู
ประกอบไปด้ วยข้ อความ ภาพประกอบ ตารางแสดงข้ อมูลต่างๆ ซึง่ จะต้ องมีการ
เปลี่ยนแปลงไปตามเหตุการณ์มกั จะวางไว้ ในส่วนกลางหน้ า
• เพื่อให้ งานสาเร็จทีมพัฒนาเว็บจะต้ องเป็ นนักท่องเว็บ เพื่อศึกษาเว็บไซต์หลายๆ
ประเภท ทังของหน่
้
วยงานภาครัฐบาล องค์กร บริษัทเอกชนที่มีชื่อเสียง
สถาบันการศึกษา เว็บให้ บริการค้ นหา เว็บด้ านบันเทิง เพื่อศึกษาข้ อดี ข้ อเสีย
ลักษณะจุดเด่นของแต่ละเว็บไซต์ แล้ วนามาวิเคราะห์เพื่อใช้ เป็ นแนวทางในการ
กาหนดเป้าหมายและพัฒนาเว็บไซต์ของเรา
การตัง้ ชื่อโฟลเดอร์ และไฟล์
 ควรใช้ ตวั อักษรเป็ นตัวพิมพ์เล็ก a-z หรื อตัวเลข 0-9 หรื อผสมกัน
 ห้ ามเว้ นวรรคในชื่อไฟล์หรื อโฟลเดอร์ ถ้ าต้ องการสื่อความหมายของคาหรื อข้ อความให้ ใช้ Underscore




( _ ขีดล่าง) Dash ( - ขีดกลาง) คัน่ เช่น tip_tricks.html (ไม่ควรใช้ tip tricks.html) หรื อ
how_to_write.html อาจเขียนเป็ น how2write.html ก็จะสื่อความหมายได้
ห้ ามใช้ เครื่ องหมายอื่นใดในชื่อไฟล์หรื อโฟลเดอร์ ยกเว้ น Underscore และ Dash
ชื่อไฟล์แรกของเอกสารบนเว็บไซต์ มักจะใช้ ชื่อ index
นามสกุลของเอกสารบนเว็บที่เป็ นภาษา HTML จะมี 2 รูปแบบ คือ .htm และ .html (ควรสอบถาม
ผู้ดแู ลระบบที่ให้ บริ การเครื่ องเซิร์ฟเวอร์ เก็บเอกสารเว็บว่าให้ บริ การใช้ นามสกุลใดในไฟล์เริ่ มต้ น) ค่า
มาตรฐานส่วนใหญ่กาหนดให้ เป็ น index.html
ไม่ควรใช้ ตวั อักษรตัวเล็ก/อักษรตัวใหญ่ผสมกัน เพราะในเครื่ องที่ใช้ ระบบ Unix จะถือว่ามี
ความหมายต่างกัน (ในวินโดว์มีความหมายเป็ นชื่อเดียวกัน) เช่น Index.html กับ index.html จะถือว่า
มี 2 ไฟล์ที่แตกต่างกัน หรื อ bird.JPG, Bird.jpg กับ bird.jpg เป็ นไฟล์รูปภาพ 3 ไฟล์ที่ตา่ งกัน
การกาหนดโครงสร้ างโฟลเดอร์ เก็บเอกสารบนเว็บ
ในการสร้ างเว็บไซต์เราจะต้ องสร้ างโฟลเดอร์ สาหรับเก็บเอกสาร
ต่างๆ อย่างเป็ นระบบ เพื่อให้ สามารถค้ นหาและเรี ยกใช้ งานได้ สะดวก
รวมทังการเชื
้
่อมโยงไปยังไฟล์เหล่านันได้
้ อย่างถูกต้ อง
การกาหนดชื่อเอกสารเว็บในแถบไตเติล้ (Title bar)
 การกาหนดชื่อเอกสารเว็บเพจแต่ละหน้ าในส่วนของแท็ก <title> ... </title> ของส่วน Head
จะต้ องกาหนดเสมอและควรใช้ ภาษาอังกฤษนา สามารถใช้ ภาษาไทยเป็ นคาตามได้ แต่ต้องไม่ยาวเกิน
64 ตัวอักษร เช่น Make a home with HTML : สร้ างเว็บสวยด้ วยภาษา HTML
(การนับตัวอักษรในคาภาษาไทยต้ องนับสระบน/ล่าง/วรรณยุกต์ด้วย)
<html>
<head>
<title> Make a home with HTML : สร้ างเว็บสวยด้ วยภาษา
HTML</title>
</head>
<body>
...............
</body>
</html>
 ชื่อเรี ยกเว็บไซต์ที่ปรากฏบนไตเติ ้ลบาร์ นอกจากจะนามาใช้ แสดงชื่อเรื่ องของเว็บไซต์นนๆ
ั ้ แล้ ว ยังเป็ น
ข้ อความที่จะถูกนามาใช้ เป็ นคาสาคัญ (Keyword) ในการสืบค้ นข้ อมูลจาก Search
Engine เสมอ
คาหลัก (Keyword) และคาอธิบายหน้ าเว็บเพจ
(Description)
• ต้ องมีการกาหนดคาหลักให้ กบ
ั เว็บเพจนันๆ
้ โดยใช้ คาสัง่ ที่มีรูปแบบเฉพาะไว้ ในส่วน Head ถัด
จาก Title เรี ยกว่าการใช้ คาสัง่ Meta (ซึง่ จะไม่แสดงผลในหน้ าต่างบราวเซอร์ ) ดังนี ้
• <Meta name="X" content="Y"> (x และ y จะถูกแทนค่าด้ วยข้ อความ)
<head>
<title> Make a home with HTML : สร้างเว็บสวยด้วยภาษา HTML</title>
<meta name="keyword" content="html, web, page, website, home.">
<meta name="description" content="HTML is a wonderful language for internet
communication.">
<meta name="author" content="Information Technology - [email protected].">
</head>
การควบคุมการเข้ ารหัสภาษาไทย
 การแสดงผลภาษาไทยของเว็บเพจเป็ นอีกปั ญหาหนึง่ ที่ไม่ควรมองข้ าม โดยเฉพาะการสร้ างเว็บ
จากเครื่ องมือสาเร็จรูปหลายๆ โปรแกรมที่มกั จะทาการกาหนดให้ เว็บเป็ นภาษาของ
ผู้พฒ
ั นาโปรแกรม (อาจเป็ นภาษาในยุโรป/อเมริ กา/หรื อภาษาอื่นๆ) ทาให้ ผ้ ชู มไม่สามารถอ่าน
ภาษาไทยได้ ดังนันผู
้ ้ สร้ างเว็บจะต้ องทาการกาหนดค่าการถอดรหัสภาษาไทยไว้ เลยในทุกๆ ไฟล์
โดยใช้ คาสัง่ Meta ระบุไว้ ที่สว่ น Head เช่นเดียวกันดังนี ้
<meta http-equiv="Content-Type" content="text/html; charset=TIS-620"> หรื อ
<meta http-equiv="Content-Type" content="text/html; charset=Windows-874">
32
กฎพืน้ ฐานสาหรับการสร้ างเว็บไซต์ ท่ เี ว็บมาสเตอร์ ควรใส่ ใจ
มีอยู่ 10 ประการ
1. ใช้ แบ็กกราวด์สะอาด เรี ยบง่าย
2. คิดก่อนใช้ เอฟเฟคท์ตา่ งๆ
3. ใช้ ตวั อักษรที่คมชัด
4. ออกแบบกราฟิ กให้ มีขนาดไฟล์เล็กๆ
5. ควบคุมขนาดของเพจให้ ดี
33
กฎพืน้ ฐานสาหรับการสร้ างเว็บไซต์ ท่ เี ว็บมาสเตอร์ ควรใส่ ใจ
มีอยู่ 10 ประการ
6. วางแผนและออกแบบก่อนลงมือสร้ าง
7. ชี ้นาผู้ชมด้ วยวิธีการง่ายๆ
8. อย่าพยายามทาตัวล ้าหน้ าเกินไป
9. ง่ายๆ แต่จริ งใจ
10.อย่าลืมปรับปรุงความสดใส
34
ความผิดพลาดในการออกแบบเว็บไซต์ 10 อันดับแรก
ความผิดพลาดที่มักเกิดขึน้ ในการออกแบบเว็บไซท์ ท่ วั ไป มีดงั นี ้
1. ใช้ โครงสร้ างหน้ าเว็บเป็ นระบบเฟรม
2. ใช้ เทคโนโลยีขนสู
ั ้ งโดยไม่จาเป็ น
3. ใช้ ตวั หนังสือหรื อภาพที่เคลื่อนไหวตลอดเวลา
4. มีที่อยูเ่ ว็บไซท์ที่ซบั ซ้ อน (URL) ยากต่อการจดจาและพิมพ์
5. ไม่มีการแสดงชื่อและที่อยูข่ องเว็บไซท์ในหน้ าเว็บเพจ
6. มีความยาวของหน้ ามากเกินไป
35
ความผิดพลาดในการออกแบบเว็บไซต์ 10 อันดับแรก
7. ขาดระบบเนวิเกชันที่มีประสิทธิภาพ
8. ใช้ สีของลิงก์ไม่เหมาะสม
9. ข้ อมูลเก่าไม่มีการปรับปรุงให้ ทนั สมัย
10. เว็บเพจแสดงผลช้ า
36
WEB DEVELOPMENT
PROCESSES
37
ปรั บปรุ งเว็บไซต์ ให้ ก้าวหน้ าอย่ เู สมอ
38
กระบวนการ 13 ขัน้ ตอน ในการพัฒนาเว็บไซต์
กระบวนการในการพัฒนาเว็บไซท์มีทงหมด
ั้
13 ขันตอนและแบ่
้
ง
ออกเป็ น Phase ได้ 5 phase ดังนี ้
Phase 1: สารวจปัจจัยสาคัญ (Research)
1. รู้จกั ตัวเอง - กาหนดเป้ าหมายและสารวจความพร้ อม
2.เรียนรู้ผ้ใู ช้ – ระบุกลุ่มผู้ใช้ และศึกษาความต้ องการ
3. ศึกษาคู่แข่ ง – สารวจการแข่ งขันและเรียนรู้คู่แข่ ง
39
Phase 2: พัฒนาเนือ้ หา (Site Content)
4. สร้ างกลยุทธ์ การออกแบบ
5. หาข้ อสรุปขอบเขตเนือ้ หา
Phase 3: พัฒนาโครงสร้ างเว็บไซท์ (Site
Structure)
6. จัดระบบข้ อมูล
7. จัดทาโครงสร้ างข้ อมูล
8. พัฒนาระบบเนวิเกชัน
40
Phase 4: ออกแบบและพัฒนาหน้ าเว็บ ( Visual
design )
9. ออกแบบลักษณะหน้ าตาเว็บเพจ
10. พัฒนาเว็บต้ นแบบและข้ อกาหนดสุ ดท้ าย
Phase 5: พัฒนาและดาเนินการ (Production and
Operation)
11. ลงมือพัฒนาเว็บเพจ
12. เปิ ดตัวเว็บไซท์
13. ดูแลและพัฒนาต่ อเนื่อง
41
กระบวนการ 13 ขัน้ ตอน ในการพัฒนาเว็บไซต์
Phase1: สารวจปั จจัยสาคัญ (Research)
1. รู้ จักตัวเอง
- กาหนดเป้าหมายหลักของเว็บไซต์
- กาหนดเป้าหมายที่ชัดเจน
- ระบุวธิ ีการวัดความสาเร็จ
- พิจารณาทรั พยากรที่มี
 บุคลากร
 เงินทุน
 ระยะเวลาในการพัฒนา
 เนือ
้ หาข้ อมูลที่จะนาเสนอบนเว็บ
42
กระบวนการ 13 ขัน้ ตอน ในการพัฒนาเว็บไซต์
2. เรี ยนรู้ ผ้ ูใช้
- กาหนดกลุ่มผู้ใช้ เป้าหมาย
- ค้ นหาสิ่งที่ผ้ ูใช้ ต้องการ
- สร้ างประโยชน์ ต่อผู้ใช้
- เรี ยนรู้ ประสบการณ์ ของผู้ใช้ (User Experience)
- จาลองสถานการณ์ (Scenario)
3. สารวจการแข่ งขันและคู่แข่ ง
- สารวจบรรยากาศการแข่ งขัน
- เรี ยนรู้ จากคู่แข่ ง
43
กระบวนการ 13 ขัน้ ตอน ในการพัฒนาเว็บไซต์
Phase 2: พัฒนาเนือ้ หา (Site Content)
4. สร้ างกลยุทธ์ การออกแบบ
- สร้ างแนวทางให้ ผ้ ใู ช้ ได้ รับข้ อความที่จะสื่อ
เว็บไซต์ ของผลิต
ภัณฑ์ Powerbar
(www.powerbar.com)
สร้ างภาพลักษณ์ ของ
อาหารเสริมที่ให้ พลังงาน
แก่ นักกีฬาได้ อย่ างน่ า
สนใจ
44
กระบวนการ 13 ขัน้ ตอน ในการพัฒนาเว็บไซต์
- ประยุกต์ เนือ้ หาจากสื่ออื่น (Repurposed Content)
เว็บไซท์ www.cooktek.com นาเอา
ข้ อมูลประกอบการขายสินค้าที่มีอยู่ใน
สิ่งพิมพ์มาประยุกต์ ใช้ บนเว็บไซท์
45
กระบวนการ 13 ขัน้ ตอน ในการพัฒนาเว็บไซต์
4. สร้ างกลยุทธ์ การออกแบบ (ต่ อ)
- เนือ้ หาเสริมคุณค่ า (Value Added Content)
- เลือกใช้ เทคโนโลยีท่ เี หมาะสม
5. หาข้ อสรุ ปขอบเขตเนือ้ หา
- กาหนดเนือ้ หาและการใช้ งานที่จาเป็ น
- พิจารณาถึงความเป็ นไปได้
- เก็บรวบรวมและพัฒนาข้ อมูล
46
กระบวนการ 13 ขัน้ ตอน ในการพัฒนาเว็บไซต์
Phase 3: พัฒนาโครงสร้ างเว็บไซต์ (Site Structure)
6. จัดระบบข้ อมูล
- จัดกลุ่มและระบุช่ ือเนือ้ หา
7. จัดทาโครงสร้ างข้ อมูล
- จัดทารายการโครงสร้ างของไซต์ (Site Structure Listing)
เมื่อมีข้อมูลที่ถูกจัดกลุ่มให้ เป็ นระบบเรี ยบร้ อยแล้ ว
ขัน้ ตอนต่ อไปก็นาข้ อมูลที่ได้ มาจัดเป็ นโครงสร้ างเนือ้ หา ที่แสดงถึง
กลุ่มข้ อมูลและลาดับชัน้ ของหัวข้ อย่ อย โดยอยู่ในรู ปแบบตัวหนังสือ
ทัง้ หมดก่ อน ดังตัวอย่ างต่ อไปนี ้
47
Section 1
Section 1.1
Section 1.2
Section 2
Section 2.1
Section 2.2
Section 2.2.1
Section 2.2.2
Section 2.2.3
Section 2.3
Section 2.4
Section 3
48
กระบวนการ 13 ขัน้ ตอน ในการพัฒนาเว็บไซต์
- จัดทาแผนผังโครงสร้ างเว็บไซต์ (Architectural Blueprint)
49
กระบวนการ 13 ขัน้ ตอน ในการพัฒนาเว็บไซต์
- แผนผังโครงสร้ างเว็บไซต์ อย่ างง่ าย
เรียกว่า Site map ตัวอย่ างเว็บไซต์
www.jwt.com
50
กระบวนการ 13 ขัน้ ตอน ในการพัฒนาเว็บไซต์
8. พัฒนาระบบเนวิเกชัน
- วางแนวการเคลื่อนที่ภายในไซท์ (Site Flow)
ในขัน้ ตอนนี ้ จาเป็ นต้ องใช้ แผนภาพ เข้ ามาประกอบการสร้ าง flow
chart หรื อ storyboard เพื่อแสดงให้ เห็นถึงแนวทางและรู ปแบบการเชื่อมโยงที่
ชัดเจนยิ่งขึน้
ตัวอย่ าง Site Flow
POTENTIAL USERS
51
NONUSERS
CURRENT USERS
JOURNALISTS
HOME
Download
&Support
Products
Press
Center
ClickWise
Walk-Through
Download
ClickWise
The
Company
Company
Contacts
52
กระบวนการ 13 ขัน้ ตอน ในการพัฒนาเว็บไซต์
- สร้ างระบบเนวิเกชัน (Navigation System)
กระบวนการสร้ างระบบเนวิเกชัน เริ่มต้ นจากการพิจารณา
แผนผังโครงสร้ างเว็บไซท์ ร่ วมกับแนวทางการเคลื่อนที่ภายในไซท์ ท่ ีมี
อยู่ เพื่อให้ ได้ ระบบนาทางที่จะพาผู้ใช้ ไปสู่ส่วนต่ างๆของเว็บไซท์
- หน้ าข่ าวจากเว็บไซต์ ของสานักพิมพ์ Peachpit
Press(www.peachpit.com) ซึ่งสามารถคลิกที่
ปุ่ มเนวิเกชันด้ านซ้ ายเพือ่ ไปยังส่ วนหลักๆ ของเว็บ
ได้ โดยตรง ส่ วนรูปโลโก้ของบริษทั ที่อยู่ตรงมุมบน
ซ้ าย จะนากลับไปยังหน้ าโฮมเพจ
53
แผนภูมิแสดงลาดับขัน้ ในการพัฒนาโครงสร้ างเว็บไซต์
ข้ อสรุปขอบเขตเนือ้ หา (Content Inventory)
จัดระบบ (Organize)
วางแผนผังโครงสร้ าง (Draft Architectural Plan)
จัดโครงสร้ าง (Restructure)
รายการโครงสร้ างของไซท์ (Site Structure Listing)
ทาเป็ นกราฟิ ก (Visualize)
แผนผังโครงสร้ างเว็บไซท์ (Architectural Blueprint)
แนวทางการเคลือ่ นทีภ่ ายในไซท์ (Site Flow)
ระบบเนวิเกชัน (Navigation System)
54
กระบวนการ 13 ขัน้ ตอน ในการพัฒนาเว็บไซต์
Phase 4: ออกแบบและพัฒนาเว็บ (Visual Design)
9. ออกแบบลักษณะหน้ าตาเว็บเพจ (Interface Design)
- สร้ างแบบจาลองรายละเอียดข้ อมูลในหน้ าเว็บ (Architectural
Page Mock-up)
- ตัวอย่ างแบบจาลองรายละเอียดข้ อมูลในหน้ าเว็บเกี่ยวกับสินค้ า
ชื่อสิ นค้ า
รายละเอียด:
วิธีใช้ :
ข้ อมูลทางเทคนิค :
ราคา :
ลิงค์ไปยังหน้ าอืน่
55
กระบวนการ 13 ขัน้ ตอน ในการพัฒนาเว็บไซต์
- จัดแบ่ งพืน้ ที่ในหน้ าเว็บ (Page Layout)
- ออกแบบโครงร่ างของหน้ าเว็บเพจ (Design Sketch)
โครงสร้ างหน้ าเว็บหลัก 3 แบบ
56
ตัวอย่ างการออกแบบเว็บไซต์
57
กระบวนการ 13 ขัน้ ตอน ในการพัฒนาเว็บไซต์
10. พัฒนาเว็บต้ นแบบ และโครงสร้ างเว็บไซต์ ขัน้ สุดท้ าย
- สร้ างและทดสอบเว็บเพจต้ นแบบ (Web-Based Prototype)
- สรุ ปแผนผังโครงสร้ างเว็บไซท์ อันสุดท้ าย (Final Architecture
Blueprint)
- ระบุข้อกาหนดในการพัฒนาเว็บไซต์ (Production
Specification)
- กาหนดรู ปแบบมาตรฐาน (Style Guide)
58
กระบวนการ 13 ขัน้ ตอน ในการพัฒนาเว็บไซต์
Phase 5 : พัฒนาและดาเนินการ (Production &Operation)
11. ลงมือพัฒนาเว็บเพจ (Production)
- เรี ยบเรี ยงและตรวจสอบข้ อมูล
- ตกแต่ งหน้ าตาเว็บเพจให้ สมบูรณ์ (Final Interface)
- สร้ างเทมเพลตสาหรั บหน้ าเว็บ (Web Template)
59
ตัวอย่ างการออกแบบเทมเพลต 3
รูปแบบ ตามความเหมาะสมของ
เนือ้ หา
60
กระบวนการ 13 ขัน้ ตอน ในการพัฒนาเว็บไซต์
- พัฒนาเว็บเพจ
- พัฒนาระบบการใช้ งานของเว็บ
ตัวอย่ างเว็บเพจที่ได้ จากเทมเพลตทั้ง 3 รูปแบบก่ อนหน้ านี้
61
กระบวนการ 13 ขัน้ ตอน ในการพัฒนาเว็บไซต์
12. เปิ ดตัวเว็บไซต์ (Launch)
- ทดสอบคุณภาพ การใช้ งาน และความถูกต้ อง
o การใช้ งาน (Usability)
o ความสม่าเสมอ และความถูกต้ อง (Consistency and
Accuracy)
o ความเข้ ากันได้ กับสิ่งแวดล้ อมของผู้ใช้ (Compatibility and
Degradability)
- ทาให้ เว็บไซท์ เป็ นที่ร้ ู จัก (Promotion)
62
กระบวนการ 13 ขัน้ ตอน ในการพัฒนาเว็บไซต์
13. ดูแลและพัฒนาต่ อเนื่อง (Maintenance & Growth)
- เพิ่มข้ อมูลใหม่ โดยยึดรู ปแบบมาตรฐาน
- วิเคราะห์ สถิตกิ ารใช้ บริการในเว็บไซต์
- ตรวจสอบความถูกต้ องของลิงค์
- ตรวจสอบเนือ้ หาและการใช้ งานในเว็บให้ ถูกต้ อง ทันสมัย
และตรงกับความต้ องการของผู้ใช้ อยู่เสมอ
63
สรุ ปกระบวนการ 13 ขัน้ ตอน ในการพัฒนาเว็บไซท์
กระบวนการในการพัฒนาเว็บไซท์มีทงหมด
ั้
13 ขันตอนและแบ่
้
ง
ออกเป็ น Phase ได้ 5 phase พร้ อมสิ่งที่ได้ รับจากแต่ละ phase มีดงั นี ้
สิ่ งทีไ่ ด้ รับ
Phase 1: สารวจปัจจัยสาคัญ (Research)
1. รู้จกั ตัวเอง - กาหนดเป้ าหมายและสารวจความพร้ อม
2. เรียนรู้ผ้ใู ช้ – ระบุกลุ่มผู้ใช้ และศึกษาความต้ องการ
3. ศึกษาคู่แข่ ง – สารวจการแข่ งขันและเรียนรู้คู่แข่ ง
1. เป้ าหมายหลักของเว็บไซท์
2. ความต้ องการของผู้ใช้
3. กลยุทธ์ ในการแข่ งขัน
64
สิ่ งทีไ่ ด้ รับ
Phase 2: พัฒนาเนือ้ หา (Site Content)
1. แนวทางการออกแบบเว็บไซท์
4. สร้ างกลยุทธ์ การออกแบบ
2. ขอบเขตเนือ้ หาและการใช้ งาน
5. หาข้ อสรุปขอบเขตเนือ้ หา
3. ข้ อมูลที่ถูกจัดอย่ างเป็ นระบบ
Phase 3: พัฒนาโครงสร้ างเว็บไซท์ (Site
Structure)
1. แผนผังโครงสร้ างข้ อมูล
6. จัดระบบข้อมูล
3. ระบบเนวิเกชัน
7. จัดทาโครงสร้ างข้ อมูล
8. พัฒนาระบบเนวิเกชัน
2. แนวทางการท่ องเว็บ
65
สิ่ งทีไ่ ด้ รับ
Phase 4: ออกแบบและพัฒนาหน้ าเว็บ ( Visual
design )
1. ลักษณะหน้ าตาของเว็บไซท์
9. ออกแบบลักษณะหน้ าตาเว็บเพจ
3. รูปแบบโครงสร้ างของเว็บไซท์
10. พัฒนาเว็บต้ นแบบและข้ อกาหนดสุ ดท้ าย
4. ข้ อกาหนดในการพัฒนาเว็บไซท์
Phase 5: พัฒนาและดาเนินการ (Production and
Operation)
11. ลงมือพัฒนาเว็บเพจ
12. เปิ ดตัวเว็บไซท์
13. ดูแลและพัฒนาต่ อเนื่อง
2. เว็บเพจต้ นแบบที่จะใช้ ในการพัฒนา
1. เว็บไซท์ ที่สมบูรณ์
2. เปิ ดตัวเว็บไซท์ และทาให้ เป็ นที่รู้จกั
3. แนวทางการดูและพัฒนาต่ อไป
66
• END
• Question ?