การออกแบบเว็บไซต์.

Slides:



Advertisements
งานนำเสนอที่คล้ายกัน
ระบบการจัดการเรียนการสอนผ่านเว็บด้วย Moodle
Advertisements

Dreamweaver Adobe การสร้างโฮมเพจด้วย โปรแกรม 4 โดย.. ไชยยงค์ กงศรี
E-Ruejang
รายวิชา การเขียนเว็บไซต์
Script Programming& Internet Programming
SUDIN CHAOHINFA 1 Web page design by Macromedia Dreamweaver ตัวอย่างเว็บไซต์ บ้านดินรุ่งอรุณ.
Web Design and Implementation
Planning the site อ.ธวัชชัย สลางสิงห์.
HTML เอกสารประกอบการบรรยายรายวิชา Browser-Based Application Development.
การพัฒนาเว็บเพจ เอกสารประกอบการบรรยาย รายวิชา เทคโนโลยี สารสนเทศ 2.
ภาควิชาวิทยาการคอมพิวเตอร์และเทคโนโลยีสารสนเทศ
Creating Effective Web Pages
กระบวนการพัฒนา เอกสารเว็บเพจ
การเขียนโปรแกรมบนเว็บ (WEB PROGRAMMING) บทที่ 2 หลักการออกแบบและพัฒนาเว็บไซต์ ความรู้เบื้องต้นเกี่ยวกับภาษา HTML โดย อ.ปริญญา น้อยดอนไพร คณะวิทยาศาสตร์และเทคโนโลยี
เกียรติพงษ์ ยอดเยี่ยมแกร
การพัฒนาเว็บเบื้องต้นด้วย Macromedia Dreamweaver
การออกแบบและพัฒนาเว็บไซต์
การออกแบบและพัฒนาเว็บไซต์
บทที่ 1 เริ่มต้นกับ HTML.
การอบรมพัฒนาระบบ Learning Managment System ด้วยโปรแกรม Moodle คณะแพทยศาสตร์ศิริราช มหาวิทยาลัยมหิดล วันที่ 4-5 มี.ค.2551.
เนื้อหาที่มีประโยชน์ Useful Content
องค์ประกอบ ของการออกแบบเว็บไซท์ อย่างมีประสิทธิภาพ
ความรู้เบื้องต้นเกี่ยวกับการสร้าง WebPage
World Wide Web. You will know หัวเรื่องหลักๆทั้งหมด 5 หัวข้อดังนี้ Basic Web Concept Web application in daily life Essential Web Developer Language How.
Software Dreamweaver 8 น.ส.ทวินันท์ อิสริยเมธีกุล SC1GA B
บทที่ 1 รู้จักกับการออกแบบเว็บ ไซท์. รู้จักกับการออกแบบเว็บไซท์ ความสำคัญของการออกแบบเว็บไซท์ สร้างความได้เปรียบเหนือคู่แข่ง การออกแบบเว็บไซท์ที่ดี ออกแบบให้ตรงกับเป้าหมายและลักษณะ.
การสร้าง website ด้วยโปรแกรมโปรแกรม Dreamweaver CS4 ตอนที่ 1
บทที่ 2 Introductio n to PHP. Intorduction to PHP2 -PHP -> Open Source - ไฟล์นามสกุล PHP สร้างจาก โปรแกรม -Macromedia Dreamweaver -FrontPage -NotePad.
หลักการและขั้นตอน การออกแบบเว็บไซต์
FRONT-END Beautiful & Responsive website. WEB STRUCTURE FRONT-END BACK-END SYSTEM MOBILE FRONT-END HTML CSS PHP Others lang. Ruby, Python java Others.
1 Introduction to Web Design Chapter 1. 2 ก้าวสู่ยุค อินเตอร์เน็ต.
Web Design and Programming Aj.Drusawin Vongpramate Department of Information Technology Faculty of Science.
โดย ศุภกฤษฏิ์ นิวัฒนากูล
Microsoft Access การใช้งานโปรแกรมระบบจัดการฐานข้อมูล
จัดทำโดย นายณัฐศุภญกร ตานาคา ปวส.2/5 การตลาด นางสาวสุพัตรา แจ่มมั่งคั่ง ปวส.2/5 การตลาด นางสาวสุวนันท์ ธรรมจิตร ปวส.2/5 การตลาด
เทคนิคการนำ Open Source Code มาใช้ในการพัฒนาเว็บไซต์อย่างปลอดภัย
อาจารย์ชนิดา เรืองศิริวัฒนกุล หลักสูตรสาขาวิชาเทคโนโลยีสารสนเทศ
Forum Storyboard and Dialogue design.
WWW (World Wide Web) พัฒนาขึ้นมาในช่วงปลายปี 1989 โดยทิม เบอร์เนอร์ ลี นัก วิศวกรรมซอฟต์แวร์ จาก ห้องปฏิบัติการทางจุลภาคฟิสิกส์แห่ง ยุโรป (European Particle.
การปรับปรุงระบบ GIS e-Learning
Introduction to Web Design
Web Design.
จงยกตัวอย่างโปรแกรมที่ใช้สำหรับออกแบบเว็บไซด์
ความรู้เบื้องต้น เกี่ยวกับการสร้างเว็บไซต์
อาจารย์ชนิดา เรืองศิริวัฒนกุล หลักสูตรสาขาวิชาเทคโนโลยีสารสนเทศ
ADOBE Dreamweaver CS3.
บทเรียนคอมพิวเตอร์ช่วยสอน
อาจารย์สุธารัตน์ ชาวนาฟาง
Object-Oriented Programs Design and Construction
ขั้นตอนการร้องเรียน.
อรกัญญา เมธา สำนักหอสมุด มหาวิทยาลัยเชียงใหม่
ระบบฐานข้อมูลอนามัยสิ่งแวดล้อมประเทศไทย
อ่านทั้งหมด Microsoft ข่าวสาร SharePoint
| AGRICULTURAL DEVELOPMENT EXTENSION |
ตัวชี้วัดปศุสัตว์อำเภอ ปีงบประมาณ ๒๕๖๑
ระบบเครือข่ายคอมพิวเตอร์ Internet
การออกข้อบัญญัติท้องถิ่น ตามพระราชบัญญัติการสาธารณสุข
ผู้สอน อาจารย์ สายฝน เชียงสา
สำนักงาน กศน.จังหวัดยะลา
แนวทางการประเมิน กองทุนหลักประกันสุขภาพ
รายวิชา MFS1301 หลักการออกแบบเว็บ (Principles of Web Design) 3 (ทฤษฎี2-ปฏิบัติ2-ศึกษาด้วยตนเอง5) หน่วยกิต หัวข้อที่ 9 Site Navigation อาจารย์ณัฐภัทร แก้วรัตนภัทร์
เจาะลึก google หลักการทำงานของ search engine
บทที่ 12 การออกแบบส่วนต่อประสานผู้ใช้งาน (USER INTERFACE DESIGN)
แผนพัฒนาระบบเทคโนโลยีสารสนเทศ 2561
โดย อ.ปริญญา น้อยดอนไพร คณะวิทยาศาสตร์และเทคโนโลยี
Information Retrieval
สรุปผลการดำเนินงานประจำปี 2558 กองทุนหลักประกันสุขภาพ
การประชุมสรุปงานสภาอาจารย์ วิทยาเขตปัตตานี ประจำปีงบประมาณ 2561
การบริหารจัดการเว็บไซต์
การออกแบบและพัฒนาเว็บไซต์
ใบสำเนางานนำเสนอ:

การออกแบบเว็บไซต์

วัตถุประสงค์ เมื่อจบบทเรียนนี้แล้วนักศึกษาสามารถ บอกองค์ประกอบพื้นฐานของการออกแบบเว็บไซต์ได้อย่างถูกต้อง ออกแบบเว็บไซต์ได้อย่างถูกต้อง และเหมาะสม

เนื้อหา คำศัพท์เกี่ยวกับเว็บไซต์ องค์ประกอบพื้นฐานของการออกแบบ วิธีการสร้างเว็บเพจ กระบวนการ 13 ขั้นตอนในการออกแบบ หลักการออกแบบเว็บไซต์ รูปแบบของเว็บไซต์

คำศัพท์เกี่ยวกับเว็บไซต์ เว็บไซต์ (Web site) แหล่งข้อมูลที่บรรจุอยู่บนเครือข่ายอินเตอร์เน็ต  หนังสือหนึ่งเล่ม เว็บเพจ (Web page) หน้าที่แสดงเอกสาร เนื้อหาของเว็บไซต์  เอกสารแต่ละหน้า โฮมเพจ (Home page) หน้าแรกของเว็บไชต์  ปกของหนังสือ

องค์ประกอบพื้นฐานของการออกแบบเว็บไซต์ ความเรียบง่าย (Simplicity) มีรูปแบบที่เรียบง่าย ไม่ซับซ้อนและใช้งานได้อย่างสะดวก สื่อสารเนื้อหาถึงผู้ใช้โดยมีเฉพาะองค์ประกอบเสริมที่จำเป็นเท่านั้น ความสม่ำเสมอ (Consistency) สร้างความสม่ำเสมอให้กับเว็บไซต์โดยใช้รูปแบบเดียวกันตลอดทั้งเว็บไซต์ ทั้งในส่วนของรูปแบบหน้า สไตล์ของกราฟิก ระบบเนวิเกชัน และโทนสี ถ้าลักษณะของแต่ละหน้าในเว็บไซต์เดียวกัน แตกต่างกัน อาจทำให้ผู้ใช้เกิดความสับสนได้

ความเป็นเอกลักษณ์ (Identity) การออกแบบต้องคำนึงถึงลักษณะขององค์กร รูปแบบของเว็บไซต์สามารถสะท้อนถึงเอกลักษณ์ขององค์กร เนื้อหาที่มีประโยชน์ (Useful Content) ควรจัดเตรียมเนื้อหาและข้อมูลที่ผู้ใช้ต้องการให้ถูกต้องและสมบูรณ์ ควรมีการปรับปรุงและเพิ่มเติมให้ทันต่อเหตุการณ์อยู่เสมอ

ระบบเนวิเกชันที่ใช้งานง่าย (User-Friendly Naviagtion) ระบบเนวิเกชันจะต้องออกแบบให้ผู้ใช้เข้าใจง่ายและใช้งานสะดวก โดยใช้กราฟิกที่สื่อความหมายร่วมกับคำอธิบายอย่างชัดเจน มีรูปแบบและลำดับของรายการอย่างสม่ำเสมอ มีลักษณะที่น่าสนใจ (Visual Appeal) ความน่าในใจของเว็บไซต์จะมีความสัมพันธ์กับคุณภาพขององค์ประกอบต่าง ๆ เช่น คุณภาพของกราฟิก การใช้ชนิดตัวอักษร การใช้โทนสี เป็นต้น

การใช้งานอย่างไม่จำกัด (Compatibility) ควรออกแบบเว็บไซต์ให้ครอบคลุมกับผู้ใช้ส่วนใหญ่มากที่สุด ไม่ควรมีการติดตั้งโปรแกรมเพิ่มเติม หรือเลือกใช้บราวเซอร์ชนิดใดชนิดหนึ่ง สามารถแสดงผลได้ทุกระบบปฏิบัติการและที่ความละเอียดหน้าจอต่าง ๆ กันได้อย่างไม่มีปัญหา คุณภาพในการออกแบบ (Design Stability) ควรให้ความสำคัญกับการออกแบบเว็บไซต์ ควรมีมาตรฐานการออกแบบและการจัดระบบข้อมูล

ระบบการใช้งานที่ถูกต้อง (Functional Stability) ระบบการทำงานต่าง ๆ ในเว็บไซต์จะต้องมีความแน่นอนและทำหน้าที่ได้อย่างถูกต้อง เช่น การกรอกข้อมูล การเชื่อมโยง เป็นต้น ควรมีการตรวจสอบการทำงานอยู่เสมอ

ปัจจัยสำคัญที่ผู้ใช้ต้องการจากเว็บไซต์ มีเนื้อหาที่เป็นประโยชน์ ตรงกับที่ผู้ใช้ต้องการ มีการปรับปรุงเนื้อหา และพัฒนาเว็บไซต์อยู่เสมอ ใช้เวลาในการดาวน์โหลดน้อย แสดงผลเร็ว การใช้งานที่สะดวก เข้าใจง่าย

ทีมงานพัฒนาเว็บไซต์ Webmaster Information Architect Designer เป็นผู้ควบคุมในเรื่องการออกแบบ เนื้อหา และรายละเอียดทางเทคนิค Information Architect ทำหน้าที่จัดระเบียบข้อมูลและทดสอบประสิทธิภาพในการใช้งาน Designer เป็นผู้ออกแบบลักษณะหน้าตาของเว็บไซต์ และองค์ประกอบต่าง ๆ HTML and JavaScript Coder รับผิดชอบการสร้างเว็บเพจโดยอาศัยเครื่องมือต่าง ๆ ปรับปรุง เปลี่ยนแปลงข้อมูล รวมถึงการอัพโหลดไฟล์

Developer/Programmer เป็นผู้เขียนสคริปต์และโปรแกรมต่าง ๆ อาจต้องเกี่ยวข้องกับระบบฐานข้อมูล System Administrator ทำหน้าที่ควบคุม ดูแลเว็บเซิร์ฟเวอร์ รวมถึงฮาร์ดแวร์และซอฟต์แวร์อื่นที่เกี่ยวข้อง สามารถวิเคราะห์และปรับตั้งระบบเพื่อการทำงานที่มีประสิทธิภาพ Content Editor/Writer เป็นบรรณาธิการ โดยรับผิดชอบในการจัดเตรียมเนื้อหา ตรวจสอบความถูกต้อง

วิธีการสร้างเว็บเพจ สร้างด้วยภาษา HTML โดยการใช้โปรแกรมสร้างเอกสาร (Text Editor) โดยทั่วไป เช่น โปรแกรม NotePad โดยการใส่คำสั่ง (Tag) ของภาษา HTML เข้าไปโดยตรง วิธีนี้ผู้สร้างต้องมีประสบการณ์และการเรียนรู้ภาษา HTML มาก่อน สร้างด้วยโปรแกรมประยุกต์ เป็นการสร้างแบบที่เรียกว่า WYSIWYG (What-You-See-Is- What-You-Get) เช่น Dreamweaver, FrontPage เป็นต้น

โปรแกรมช่วยในการสร้างเว็บ Macromedia Dreamweaver Microsoft FrontPage Allaire HomeSite CoffeeCup GoLive HotDog Pro HotMetaPro NetObjects Fusion

Macromedia Dreamweaver สามารถออกแบบหน้าเว็บได้อย่างสะดวกโดยอาศัยเครื่องมือต่าง ๆ โดยไม่จำเป็นต้องรู้เกี่ยวกับภาษา HTML มีหน้าจอในการแสดงหน้าจอการออกแบบและหน้าจอคำสั่ง มีระบบเทมเพลตที่จะทำให้ผู้ออกแบบสามารถใช้โครงสร้างเดียวกันทั้งเว็บไซต์ มีเครื่องมือเพื่อช่วยในการดาวน์โหลดและอัพโหลดไฟล์ระหว่างเครื่องเซิร์ฟเวอร์กับเครื่องที่ใช้พัฒนาเว็บเพจ

Microsoft FrontPage ลักษณะการทำงานใกล้เคียงกับโปรแกรมอื่น ๆ ที่อยูในชุด Office มีระบบอำนวยความสะดวกแบบ Wizard มีระบบในการบริหารจัดการเว็บไซต์ เช่น ระบบรายงานเกี่ยวกับหน้าเว็บเพจที่แสดงผลช้า เว็บเพจที่ถูกเพิ่มเข้าไป ลิงค์ที่ใช้งานไม่ได้ สามารถเชื่อมโยงกับระบบฐานข้อมูลได้โดยสะดวก บางครั้งอาจมีคำสั่งเพิ่มเติมเข้ามาเกินความจำเป็น หรืออาจเปลี่ยนแปลงโค้ดโดยไม่รู้ตัว

Allaire HomeSite ช่วยในการเขียนโค้ดภาษา HTML ด้วยคุณสมบัติที่เรียกว่า Tag Insight และ Function Insight ซึ่งจะแสดงแอตตริบิวต์ที่เหมาะสมขึ้นมาให้เลือกใช้กับแท็กที่กำลังเขียน เหมาะสำหรับนักออกแบบเว็บที่ถนัดในการใช้ภาษา HTML

กระบวนการ 13 ขั้นตอนในการพัฒนาเว็บไซต์ Phase 1 สำรวจปัจจัยสำคัญ (Research) 1. รู้จักตัวเอง – กำหนดเป้าหมายและสำรวจความพร้อม 2. เรียนรู้ผู้ใช้ – ระบุกลุ่มผู้ใช้และศึกษาความต้องการ 3. ศึกษาคู่แข่ง – สำรวจการแข่งขันและเรียนรู้คู่แข่งสิ่งที่ได้รับ สิ่งที่ได้รับ 1. เป้าหมายหลักของเว็บไซต์ 2. ความต้องการของผู้ใช้ 3. กลยุทธ์ในการแข่งขัน

Phase 2 : พัฒนาเนื้อหา (Site Content) 4. สร้างกลยุทธ์การออกแบบ 5. หาข้อสรุปขอบเขตเนื้อหา สิ่งที่ได้รับ แนวทางการออกแบบเว็บไซต์ ขอบเขตเนื้อหาและการใช้งาน ข้อมูลที่ถูกจัดอย่างเป็นระบบ

Phase 3 : พัฒนาโครงสร้างเว็บไซต์ (Site Structure) 6. จัดระบบข้อมูล 7. จัดทำโครงสร้างข้อมูล 8. พัฒนาระบบเนวิเกชัน สิ่งที่ได้รับ แผนผังโครงสร้างข้อมูล แนวทางการท่องเว็บ ระบบเนวิเกชัน

Phase 4 : ออกแบบและพัฒนาหน้าเว็บ (Visual design) 9. ออกแบบลักษณะหน้าตาเว็บเพจ 10. พัฒนาเว็บต้นแบบและข้อกำหนดสุดท้าย สิ่งที่ได้รับ ลักษณะหน้าตาของเว็บไซต์ เว็บเพจต้นแบบที่จะใช้ในการพัฒนา รูปแบบโครงสร้างของเว็บไซต์ ข้อกำหนดในการพัฒนาเว็บไซต์

Phase 5 : พัฒนาและดำเนินการ (Production and Operation) 11. ลงมือพัฒนาเว็บเพจ 12. เปิดตัวเว็บไซต์ 13. ดูแลและพัฒนาต่อเนื่อง สิ่งที่ได้รับ เว็บไซต์ที่สมบูรณ์ เปิดตัวเว็บไซต์และทำให้เป็นที่รู้จัก แนวทางการดูแลและพัฒนาต่อไป

หลักในการออกแบบเว็บไซต์ การออกแบบโครงสร้างเว็บไซต์ (Website Structure Design) การออกแบบหน้าตาเว็บไซต์ (Website Interface Design)

การออกแบบโครงสร้างเว็บไซต์ Site Map เป็นการวางแผนเนื้อหาของเว็บไซต์ เพื่อเป็นโครงสร้างในการจัดวางหน้าเว็บเพจทั้งหมด เปรียบเสมือนแผนที่ที่ทำให้เห็นโครงสร้างทั้งหมดของเว็บไซต์ ช่วยในการออกแบบเว็บไซต์เพื่อไม่ให้หลงทาง หรือการเชื่อมโยงแต่ละหน้า เป็นการนำเสนอแนวความคิดแบบลำดับชั้นจากส่วนใหญ่ไปหาส่วนย่อย หรือที่เรียกว่าแบบบนลงล่าง (Top Down Thinking)

สามารถประเมินราคาจาก Site Map ได้ ทุก ๆ เว็บเพจจะต้องมีลิงก์ทางออกเสมอ ทุก ๆ เว็บเพจควรมีลิงก์กลับหน้าโฮมเพจ หรือจุดเริ่มต้น ควรมีหน้าแสดง Site Map ในกรณีที่เว็บไซต์มีจำนวนหน้ามาก ๆ สามารถประเมินราคาจาก Site Map ได้

การออกแบบหน้าเว็บไซต์ ใช้งานง่ายและสะดวก โดยมีระบบ Navigation หรือระบบนำทางที่ดี เข้าใจง่าย การใช้งานไม่ซับซ้อน มองเห็นได้ชัด ควรวางไว้ด้านซ้าย หรือด้านบน อย่าเคลื่อนย้ายไปมา ควรมีลิงก์กลับไปยังโฮมเพจ มีการออกแบบกราฟิกที่สวยงาม สื่อความหมาย

ไม่ควรเสียเวลาโหลดภาพมากเกินไป ขนาดกราฟิกรวมกันไม่ควรเกิน 75 KB เป็น Flash ไม่ควรเกิน 120 KB ภาพรวมทั้งหมดควรออกมาในอารมณ์เดียวกัน (Theme) หรือโครงเดียวกัน แนวความคิดเดียวกัน

รูปแบบของเว็บไซต์ แบบ Content แบบ Image แบบผสม

แบบ Content ลักษณะงานจะเป็นภาพกราฟิกเล็ก ๆ มาเรียงกันเป็นหน้าเว็บเพจ จะมีเนื้อหามากกว่ารูป พัฒนามาจากการเขียนด้วยภาษา HTML มีข้อดีคือ ความเร็วในการโหลด

แบบ Image เป็นภาพกราฟิกขนาดใหญ่เต็มหนึ่งหน้า แล้วตัดแบ่งเป็นชิ้นเล็ก ๆ (Slice Image) มาวางเรียงกัน เพื่อความเร็วในการดาวน์โหลด และแสดงผล มีรูปแบบที่สวยงามและหลายหลาย โดยจะทำการสร้างจากโปรแกรมสร้างรูป หรือตกแต่งรูปโดยทั่วไป เหมาะกับหน้าที่มีเนื้อหาน้อย ต้องการความสวยงามเป็นหลัก หากภาพใหญ่จะทำให้การดาวน์โหลดช้า

แบบผสม เป็นการผสมผสานระหว่างแบบ Content และแบบ Image

ความผิดพลาดในการออกแบบเว็บไซต์ ใช้โครงสร้างหน้าเว็บเป็นระบบเฟรม ใช้เทคโนโลยีชั้นสูงโดยไม่จำเป็น ใช้ตัวหนังสือหรือภาพที่เคลื่อนไหวตลอดเวลา มีที่อยู่เว็บไซต์ที่ซับซ้อน (URL) ยากต่อการจดจำและพิมพ์ ไม่มีการแสดงชื่อและที่อยู่ของเว็บไซต์ในหน้าเว็บเพจ มีความยาวของหน้ามากเกินไป ขาดระบบเนวิเกชันที่มีประสิทธิภาพ

ใช้สีของลิงค์ไม่เหมาะสม ข้อมูลเก่าไม่มีการปรับปรุงให้ทันสมัย เว็บเพจแสดงผลช้า มีรายงานวิจัยว่า ถ้าเกิน 8 วินาที ผู้ใช้กว่า 90% จะเปลี่ยนไปดูเว็บอื่นแทน