Web Design สร้างเว็บไซต์อย่างไรให้ถูกวิธี?
สร้างเว็บไซต์อย่างไรให้ถูกวิธี?
Saturday, 20 March 2010 22:36
ปัจจุบัน เว็บไซต์ (Website) มีความสำคัญต่อองค์กรมาก ถือเป็นเครื่องมือสำคัญในทางธุรกิจที่จะสื่อสารไปยังลูกค้า พนักงาน นักลงทุน และสื่อมวลชนต่างๆ ดังนั้น เว็บไซต์ จึงไม่ใช่สิ่งที่จะทำกันเล่นๆ อีกต่อไป ในเมื่อคุณจะสร้าง เว็บไซต์ ทั้งทีแล้ว คุณก็ควรที่จะสร้างเว็บที่มีคุณค่า ยั่งยืน ไม่ล้าสมัย และไม่เปลี่ยนตามแฟชั่น เป็นเว็บที่สร้า่งขึ้นด้วยการนำความรู้ด้านการพัฒนาเว็บใหม่ๆ เข้ามาใช้ให้เกิดประโยชน์ ขณะเดียวกันก็ไม่ใช้เทคโนโลยีที่เกินความจำเป็น โดยให้ความสำคัญกับขั้นตอนการทำ ไม่น้อยไปกว่าสิ่งที่จะปรากฏต่อหน้าผู้ใช้ เพื่อให้ผู้ใช้ได้รับความสะดวก และประสบการณ์ที่ดี ขณะเดียวกันก็สามารถอำนวยความสะดวกให้กับผู้สร้างด้วย โดยเฉพาะการปรับปรุงรูปแบบเว็บในภายหลัง
แต่สิ่งเหล่านี้จะเกิดขึ้นได้ ก็ต่อเมื่อคุณ "สร้าง เว็บไซต์ อย่างถูกวิธี" เพื่อให้เว็บที่ได้ เป็นสิ่งที่จะสื่อสารความคิดของคุณไปสู่ผู้ชมได้อย่างชัดเจนและมีประสิทธิภาพ โดยอาศัยองค์ประกอบต่อไปนี้
เครื่องมือที่เหมาะสม (The Right Tools)
ฮาร์ดแวร์ (Hardware)
- สิ่งแรกที่จำเป็นเลยล่ะครับ คือ เครื่องคอมพิวเตอร์ โชคดีที่การทำเว็บนั้น ไม่จำเป็นต้องใช้คอมพิวเตอร์ที่มีคุณสมบัติพิเศษใดๆ คุณสามารถนำคอมพิวเตอร์ทั่วไปมาใช้ในการทำ เว็บไซต์ ได้ (ถ้าเครื่องคอมพิวเตอร์ของคุณไม่เก่าจนเกินไป กระทั่งเปิดโปรแกรมใหม่ๆ ไม่ได้)
- สำหรับ จอมอนิเตอร์ ความละเอียดของหน้าจอที่ระดับ 1,024 x 768 พิกเซลขึ้นไปนั้น จะช่วยให้มีพื้นที่ทำงานมากขึ้น ถ้ามีโอกาสเลือก ขอแนะนำจอขนาด 17 นิ้วขึ้นไปครับ เพราะถ้าเล็กเกินไปสายตาคุณอาจมีปัญหาได้
- อุปกรณ์ชิ้นถัดไปที่จำเป็นในการทำเว็บก็คือ สแกนเนอร์ (Scanner) มีไว้สำหรับสแกนภาพจากรูปถ่าย หรือสิ่งพิมพ์เข้ามาใช้ในเว็บ
- กล้องดิจิตอล (Digital Camera) ก็เป็นอุปกรณ์ที่น่าสนใจ เพราะคุณสามารถถ่ายภาพ แล้วนำมาใช้กับเว็บได้อย่างสะดวก ลดขั้นตอนการสแกนภาพได้อีกด้วย
- ส่วน เครื่องพิมพ์ (Printer) อาจไม่เกี่ยวข้องโดยตรงนักกับการทำเว็บ แต่ถ้ามี คุณก็สามารถใช้ตรวจสอบการพิมพ์หน้าเว็บบนหน้ากระดาษได้
ซอฟต์แวร์ (Software)
ในการทำ เว็บไซต์ นั้น โปรแกรม หรือ ซอฟต์แวร์ (Software) เป็นสิ่งสำคัญที่ควรคำนึงถึงมากกว่าฮาร์ดแวร์หลายเท่า เพราะความสามารถของแต่ละโปรแกรมนั้น แตกต่างกันมาก โปรแกรมที่เกี่ยวข้องกับการทำเว็บมีมากมาย โปรแกรมที่เป็นพื้นฐานสำคัญนั้นมีหลายประเภท คือ
- โปรแกรมสร้างเว็บ (Web Authoring Tool) เช่น Dreamweaver, FrontPage, Adobe Golive, Namo WebEditor,... ฯลฯ
- โปรแกรมออกแบบกราฟิก (Graphic Design Tool) เช่น Fireworks, Photoshop, Illustrator, และโปรแกรมอื่นๆ อีกหลายชนิดให้เลือกใช้
- โปรแกรมด้านมัลติมีเดีย (Multimedia Tool) เช่น Flash, Camtasia Studio, SoundForge,... ฯลฯ
- โปรแกรมสำหรับเขียนสคริปต์ (Scripting Tool) เช่น ASP, JSP, PHP และ ColdFusion รวมถึงโปรแกรมด้านอื่นๆ อีกมาก
- โปรแกรม FTP ใช้ในการก๊อปปี้ไฟล์ในเครื่องคุณไปยังเว็บเซิร์ฟเวอร์ เช่น CuteFTP, WS_FTP, FileZilla,... ฯลฯ
- โปรแกรม CSS เป็นโปรแกรมในการออกแบบสไตล์ชีทโดยเฉพาะ เช่น TopStyle, CSS Tab Designer,... ฯลฯ
แนวทางที่ถูกต้อง (The Right Ways)
ในปัจจุบันมี เว็บไซต์ มากมาย ถูกสร้างขึ้นมาอย่างไม่ถูกต้องนัก เริ่มตั้งแต่การเน้นที่ความสวยงามมากกว่าเนื้อหา การคำนึงถึงลูกเล่นต่างๆ มากกว่าการใช้งาน และการสนใจเทคโนโลยีมากกว่าขั้นตอนการพัฒนา นอกจากนี้ จากข้อจำกัดของภาษา HTML ในการจัดเลย์เอาท์ จึงเกิดการพลิกแพลงนำตารางมาใช้กำหนดโครงสร้า่งของหน้าเว็บ ซึ่งนอกจากจะทำให้มีปัญหาในการปรับปรุงเนื้อหาแล้ว ยังทำให้เกิดการแสดงผลที่ผิดพลาดในอุปกรณ์ชนิดอื่นๆ เช่น โทรศัพท์มือถือ ได้อีกด้วย
แนวทางหลักในการออกแบบควรเป็นดังนี้ครับ
- ออกแบบเพื่อผู้ใช้ (Designing for Users) คำถึงถึงผู้ใช้เป็นหลัก เพื่อให้ได้ เว็บไซต์ ที่เข้าใจง่าย ทำให้ผู้ใช้สามมารถท่องไปในส่วนต่างๆ ของเว็บด้วยความรู้สึกที่ดี
- ออกแบบตามมาตรฐาน (Designing with Web Standards) ใช้ XHTML ในการกำหนดโครงสร้างของเนื้อหา เพราะ XHTML จะมีความเที่ยงตรงกว่า HTML และใช้ได้หลายระบบ ทำให้ซอฟท์แวร์ หรือระบบอื่นนอกเหนือจากเบราเซอร์ สามารถเข้าใจได้ และ ใช้สไตล์ชีท (CSS) ในการออกแบบรูปแบบขององค์ประกอบต่างๆ แทนที่จะใช้แท็ก table, font และแท็กอื่นๆ ในทางที่ไม่ถูกต้อง การใช้ XHTML ร่วมกับ CSS จะช่วยให้เราออกแบบเว็บได้ง่ายขึ้น เพราะเป็นการแยกเนื้อหาออกจากการนำเสนอ
- ออกแบบเพื่อความเร็ว (Designing for Speed) เนื่องจากไม่มีใครชอบที่จะรอ และไม่มีใครชอบใช้เว็บที่ช้า เพราะอาจทำให้รู้สึกหงุดหงิด และรำคาญได้
- ออกแบบเพื่อให้แก้ไขได้สะดวก (Designing for Change) หากคุณใช้ Dreamweaver คุณมีเครื่องมือ 3 ชนิดให้เลือก คือ Template, Library Item, และ Server-Side Include (SSI) ซึ่งแต่ละวิธีนี้นมีข้อได้เปรียบ-เสียเปรียบแตกต่างกันไป
- ออกแบบเพื่อให้ทุกคนเข้าถึงได้ (Designing for Accessibility) เช่น การใส่คำอธิบายให้รูปภาพ ในส่วนของ alt (alternate text), ใช้ระบบเนวิเกชั่นแบบตัวอักษร แทนการใช้กราฟิก หรือ แสดงคำอธิบายประกอบวีดีโอ หรือข้อมูลเสียง เพื่อให้ผู้ชมสามารถอ่านตามได้
แนวทางทั้งหมดนี้ จะช่วยให้เว็บใช้งานง่ายขึ้น แสดงผลเร็วขึ้น เข้าถึงผู้ชมได้มากขึ้น และสามารถแสดงผลในอุปกรณือื่นๆ นอกเหนือจากเบราเซอร์ได้อย่างเหมาะสม ที่สำคัญคือ ความสามารถในการแก้ไขที่ง่าย สะดวก และรวดเร็ว เพื่อให้เป็นเว็บที่พึงปรารถนาของทั้งผู้ออกแบบและผู้ใช้ทุกคน
ทัศนะคติที่ดี (The Right Attitude)
คุณต้องมีใจรัก จึงจะทำเว็บได้อย่างสนุก มีความสุขในการพัฒนาเว็บให้ดียิ่งขึ้น การสร้างเว็บให้ดีนั้น ต้องอาศัยทักษะหลายด้าน ไม่ว่าจะเป็นการเข้าใจภาษา HTML, การออกแบบกราฟิก, การจัดการกับข้อมูล, รวมถึงการเขียนโปรแกรม ขึ้นอยู่กับความยากง่ายของ เว็บไซต์ ถ้าคุณกำลังออกแบบ เว็บไซต์ พื้นฐาน ที่ไม่จำเป็นต้องยุ่งเกี่ยวกับการเขียนโปรแกรมที่ซับซ้อน คุณก็สามารถทำทุกอย่างได้ด้วยตัวคุณเพียงคนเดียว เรียกว่าเป็น Solo Web Designer ทำหน้าที่ทั้ง Writer, Producer, Information Architect, และ Graphic Designer ไปพร้อมๆ กัน แต่คุณอาจไม่รู้สึกอะไรมากไปกว่า "การทำเว็บ" เท่านั้นเอง
อย่าหวังว่าคุณจะทำเว็บได้สมบูรณ์แบบในครั้งแรกที่ลงมือทำ ขอให้เริ่มอย่างเรียบง่าย อย่าคิดมากจนท้อถอย ลงมือทำ ก้าวไปทีละขั้น หาทางแก้ปัญหาต่างๆ ที่ได้พบ ทีละเปราะ เมื่อคุณมีประสบการณ์มากขึ้น ก็จะสามารถพิจารณาเพิ่มเติมสิ่งต่างๆ เข้ามาใน เว็บไซต์ ได้อย่างเหมาะสม ด้วยความมุ่งมั่น ตั้งใจจริง จะนำคุณไปสู่ความสำเร็จในที่สุด
ที่สำคัญคือคุณต้องพัฒนาตัวเองอยู่เสมอ พัฒนาทักษะ ความรู้ที่จำเป็น ต้องมีความรู้รอบด้าน ติดตามความก้าวหน้าของเว็บอยู่เสมอ เนื่องจากเทคโนโลยีมีการพัฒนาอยู่ตลอดเวลา วิธีที่คุณทำในวันนี้ อาจใช้ไม่เหมาะสมกับวันพรุ่งนี้ เว็บดีไซน์เนอร์ต้องยอมรับการเปลี่ยนแปลง และพร้อมที่จะเรียนรู้สิ่งใหม่อยู่เสมอ
รายละเอียดในการสร้าง เว็บไซต์ ยังมีอีกมาก แล้วพบกันคราวหน้าครับ ^_^
Article by: Nattaphon
-
ขอบคุณสำหรับข้อแนะนำที่มีมาเสมอๆ ผมว่าเวปสร้างไม่ยากเกินความสามารถ จริงครับ แต่ความยากมันอยู่ที่ความขยันมากกว่า และตอนนี้ผมก็เริ่มมีปัญหาเรื่องความขยันซะแล้วครับ เฮ่อ จะพยายามต่อไปครับ
-
|2010-07-06 07:23:50 Nattaphon - ตอบ คุณทรงวุฒิ
ความขยัน จะเกิดได้ก็ต่อเมื่อเรามีเป้าหมายในชีวิตที่ชัดเจน
ภาพเป้าหมายของเรา จะไปกระตุ้นให้เราลงมือทำบางอย่าง
อย่างกระตือรือร้น จนดูเหมือนว่าเราเป็นคนขยันครับมีเป้าหมายในชีวิต (ที่ชัดเจน) ก่อนนะครับ แล้วเรา
จะขยันจนตัวเราเองยังต้องแปลกใจ ว่าทำไมเราขยันจัง
-
|2010-03-25 20:32:46 Nit
เหมือนจะขยันนะค่ะ อยู่กับเน็ตทุกวัน แต่ความท้อนี่สิค่ะ เมื่อเจออะไรที่ไม่เข้าใจแล้ว มันเหนื่อยจนเกือบถอยหลายครั้ง แต่ก็อยากรู้ เลยต้องทน
-
|2010-07-06 07:24:05 Nattaphon - ตอบ คุณ Nit
อย่าเิพิ่งท้อครับ ผมจะเอาใจช่วย
คนเราสามารถที่จะเป็นอะไรก็ได้ที่ตนต้ัองการจะเป็น
ในการเริ่มต้นบางอย่าง การคาดหวังผลเลิศ จะทำให้ท้อได้ครับ
ดังนั้น ต้องวางลำดับความสำเร็จไว้เป็นความสำเร็จย่อยๆ
แล้วเดินตามเสต็ปย่อยๆ นั้นไป ทีละก้าวเมื่อทำแต่ละสเต็ปสำเร็จ เราจะมีกำลังใจมากขึ้นครับ
สู้ๆ นะครับ
-
|2010-04-27 22:22:20 Anonymous
ขอบคุณครับ สำหรับ ข้อความดีๆ และโปรแกรมที่แนะนำ
ตอนนี้ผมกำลังหา โปรแกรม สร้างเว็บแบบ สวยๆ อ่าครับ
ท่ามีมาลงไห้หน่อยนะครับ !!
-
|2010-07-06 07:23:23 Nattaphon - ตอบ
โปรแกรมดีๆ มักจะมีลิขสิทธิ์ครับ คงจะนำมาให้โหลดกันฟรีๆ ไม่ได้ครับ แต่ถ้าอยากได้ของถูก ก็หาซื้อได้ตามห้างไอทีชื่อดังทั้งหลายล่ะครับ มีเยอะแยะเลย (สำหรับประเทศไทยเท่านั้นนะครับ)
พี่ครับคือผมอยากทำเว็บบอร์ดเป็นหมวดๆในเว็บ GDI ง่ะ-
|2010-07-06 07:19:26 Nattaphon - ตอบ คุณ armshair6120
ผมใช้ Simple Machines Forum (SMF) ในการทำเว็บบอร์ดครับ เป็นเว็บบอร์ด Open Source
สามารถดาวน์โหลดมาติดตั้งในโฮสของเราเองได้ ต้องเป็นโฮสติ้งที่รองรับฐานข้อมูล MySQL ด้วยครับ จึงจะติดตั้งได้
ต้องมีความรู้ในเรื่องเว็บพอสมควร เพื่อจะได้ดูแลเว็บบอร์ดได้ครับ
-
|2010-06-04 04:20:49 Anonymous - ผมลาออกไปเลย
ผมทำธุรกิจแล้วผมติดต่อกับแม่ข่ายไม่ได้(ดาวไลน์) ไม่มีผู้แนะนำ
ผมก็เลยทำเวปจนเสร็จด้วยมือ และเสนอเข้า Google AdWords
ก็ไม่ผ่านการยืนยันอีกปรึกษาใครไม่ได้ผมต้องลาออกและหาคนที่ผมจะมาทำธุกิจใหม่ หวังว่าคุณคงไม่รังเกียจ ผมต้องรอการยืนยันอีก 1 วัน และยืนยันเสร็จผมจะมาขอคำแนะนำจากคุณ หวังว่าจะได้ร่วมทำธุรกิจน่ะครับ
-
|2010-07-06 07:18:22 Nattaphon - ตอบ
มีอะไรที่ผมจะสามารถติดต่อกลับได้หรือเปล่าครับ
เช่น อีเมล์ หรือเบอร์ติดต่อกลับ
-
|2010-07-06 07:15:32 Nattaphon - ตอบ
ติดต่อได้ที่นี่เลยครับ
=> http://www.nattaphon.com/contact-me.htmlขอบคุณครับ
-
ตอนนี้ผมเปลี่ยนรูปแบบเว็บอีกแล้วครับ
เปลี่ยนไปเปลี่ยนมาไม่รู้กี่รอบแล้วครับ
แต่อยากเรียน Wordpress ให้เก่งๆ ไวๆ ด้วยครับ
Free SiteBuilder
Unlimited Disk Space
Unlimited Bandwidth