Planning the site

1. Planning the site อ.ธวัชชัย สลางสิงห์

2. PLANNING A SITE • Requirements and Specifications • Creating a site specification • Analyzing your audience • Analyzing Your Audience • Information design and taxonomy creation • Identifying the content goal • Organizing Information Structure • Graphic design and page template creation • sketch, mockup • wireframe

3. การพัฒนาเว็บไซต์ • Good project plan - วางแผนพัฒนาเว็บไซต์ที่ดี • Larger project need a project manager - การพัฒนาเว็บไซต์ขนาดใหญ่ จำเป็นต้องมีผู้จัดการโปรเจ็ก • development framework - ขอบเขตของ project • web development project lifecycle - วงจรการพัฒนาเว็บไซต์ ต้องครอบคลุมกระบวนการทุกขั้นตอนตั้งแต่เริ่มจนจบ

4. Requirements and Specification • ความต้องการ Requirement – the client ให้ข้อมูลความต้องการเกี่ยวกับเว็บไซต์ และ Users ให้ข้อมูลความต้องการในสิ่งที่อยากได้รับบริการบนเว็บไซต์ • break down to tasks - ออกแบบการทำงานตามความต้องการของลูกค้าหรือผู้ใช้

5. Creating a Site Specification • สร้างขอบเขตให้เว็บไซต์ • who is the client for the site?Users? - ลูกค้าคือใคร ผู้ใช้เว็บคือใคร • can you write a two or three paragraph mission statement that briefly states the site’s goal?- ระบุพันธกิจที่แสดงถึงเป้าหมายของเว็บไซต์ ภาระกิจหลักที่ต้องทำให้บรรลุเป้าหมาย • what do you envision as the goal of the site? เป้าหมายที่คุณมีต่อเว็บไซต์ • what do you gain from creating and maintaining a website? จะได้รับอะไร • what are the requirements for the web site? เว็บไซต์มีความต้องการอะไรบ้าง ต้องนำเสนออะไรบ้าง

6. Creating a Site Specification • สร้างขอบเขตให้เว็บไซต์ • are the requirements feasible? - สิ่งที่ต้องการสามารถเป็นไปได้หรือไม่บนเว็บไซต์ • How will you judge the success of the site? - ตัวชี้วัดความสำเร็จ • who is the target audience? –กลุ่มเป้าหมายที่จะเป็นผู้ใช้ของเว็บไซต์ • what is the budget? - ทุนเท่าไร • Is this a new site or an upgrade? - เป็นการอัพเดทหรือสร้างใหม่

7. Analyzing Your Audience • ระบุกลุ่มเป้าหมาย • ผู้ใช้ต้องการอะไรเมื่อเปิดเว็บไซต์นี้ • จะทำอย่างไรให้ผู้ใช้สามารถกลับมาใช้งานเว็บไซต์อีกและบ่อยๆ • ผู้ใช้ส่วนใหญ่ใช้อินเตอร์เน็ตแบบใด ใช้คอมพิวเตอร์ใด • ผู้ใช้ที่จะเป็นสมาชิกของเว็บไซต์ • ผู้ชาย หรือ ผู้หญิง • การศึกษา และความรู้เฉพาะทางด้านเทคนิก

8. Analyzing Your Audience • ผู้ใช้เข้ามาใช้งานเว็บไซต์เพื่อวัตถุประสงค์ใด • information • download files • game • web links

9. Information Design and Taxonomy Creation • User analysis ให้ข้อมูลในการออกแบบเนื้อหาของเว็บไซต์ • เป้าหมายเพื่อสร้างระบบการนำทางของเนื้อหาบนเว็บไซต์ให้มีความหมายและเข้าใจง่าย • การจัดประเภทของเนื้อหาได้อย่างดี

10. Organizing Information Structure • ให้วิเคราะข้อมูลที่ผู้ใช้ต้องการ และจะเข้าถึงข้อมูลอย่างไร • พิจารณาข้อมูลที่จะนำเสนอบนเว็บไซต์ แล้วใช้รูปแบบต่อไปนี้ • Linear Structure –booklikepresentation • Tutorial Structure - เหมาะกับสื่อการเรียนการสอน • Web Structure–แสดงลิงค์ไปยังทุกหน้า • Hierarchical Structure–รูปแบบที่นิยม เป็นแบบลำดับชั้น • Cluster Structure- เหมือน hierarchical แต่จะมีเว็บไซต์ซ้อนเว็บไซต์ • Catalog Structure- เหมาะ e-commerce website

11. Linear Structure

12. Tutorial Structure

13. Web Structure

14. Hierarchical Structure

15. Cluster Structure

16. Catalog Structure

17. Identifying the Content Goal • พิจารณาประเภทของเว็บไซต์ที่จะพัฒนา • billoard • Portal • Blog • E-commerce • Publishing etc. • วัตถุประสงค์ของทีมพัฒนาและลูกค้า อาจแตกต่างจากวัตถุประสงค์ของผู้ใช้

18. Construction and Content Development • Plan the filename convention for the site - วางแผนการตั้งชื่อไฟล์ • ใช้ตัวอักษร lowercase • ใช้ underscores แทน space • การเรียกชื่อไฟล์มี 2 รูปแบบ • abstract path : compete URL link ระบุชื่อ urlเต็มๆ • relative path : partial URL link ระบุชื่อไฟล์ที่อยู่ในคอมหรือserver

19. <a href="laptop.htm">link text</a>

23. Construction and Content Development • Plan the filename convention for the site - วางแผนการตั้งชื่อไฟล์ • ใช้ตัวอักษร lowercase • ใช้ underscores แทน space • การเรียกชื่อไฟล์มี 2 รูปแบบ • abstract path : compete URL link ระบุชื่อ urlเต็มๆ • relative path : partial URL link ระบุชื่อไฟล์ที่อยู่ในคอมหรือserver

24. Graphic design and Page Template Creation • Sketches and page mockups ใช้ในการออกแบบ layout ของเว็บไซต์ • Wireframe เป็นการออกแบบเว็บไซต์ layout ในแบบที่คงที่ใกล้เคียงตัวงานจริง