ในการตรวจสอบก็ทำได้โดยไปที่เว็บ Search Engine แล้วพิมพ์คำสั่งต่างๆ เช่น site:domainname.com เพื่อดูจำนวน index, link:domainname.com เพื่อดูจำนวน back link, การทดลองใส่คีย์เวิร์ด แล้วค้นหาดูว่าเว็บไซต์เราอยู่อันดับที่เท่าไหร่ เป็นต้น

พอตรวจกับ Google เสร็จ ก็ไปลองตรวจกะ Yahoo, Bing บ้างซิ เป็นไงบ้าง  มันก็ยุ่งยากอยู่เหมือนกัน ยิ่งมีหลายเว็บ มีหลายคีย์เวิร์ดที่จะต้องตรวจสอบกัน เมื่อเป็นแบบนี้เราก็ต้องอาศัยเครื่องทุ่นแรง โดยมองหา SEO Tools ดีๆ ไว้ช่วยงานกันบ้าง

ที่จะแนะนำในบทความนี้ก็จะเป็นเว็บไซต์ที่ให้บริการเครื่องมือสำหรับทำ SEO (SEO Tools) ลองไปทดลองใช้กันนะคะ ใครมีเว็บไหนดีๆ แนะนำอีก ก็ฝากไว้ใน comment ได้เลยค่า ^^

1. ตรวจสอบอับดับเว็บไซต์,  Check Page Rank, Check Bot, Check Index, Check BackLink, Check InLink และอื่นๆ
 http://www.ihaveweb.com

ผู้เขียนใช้เว็บนี้ในการตรวจหาอันดับเว็บใน google เลือกได้ทั้ง .in.th และ .com  ถ้าเว็บเราอยู่ระหว่างทำอันดับ และยังไม่ติดหน้าแรกๆ แล้ว ใช้บริการนี่เลยค่ะ http://www.ihaveweb.com/Check-Keyword-Ranking ช่วยให้ไม่ต้องเสียเวลาคลิกๆ ไล่หาเองจากเว็บ google มันจะตรวจสอบและบอกเราให้ว่าเว็บเราอยู่อันดับไหน ในคีย์เวริ์ดที่เราค้นหาค่ะ 

นอกจากนี้ยังมีบริการอื่นๆ อีก เลือกใช้ตามอัธยาศัยเลยค่ะ  ทดลองใช้แล้ว เห็นว่าทำงานเร็วไม่ช้า ก็เลยเอามาฝากกัน ^^

2. รวมเว็บ social bookmark สำหรับช่วยโปรโมทเว็บไซต์ ทั้งสำหรับเว็บภาษาไทย หรือ เว็บอังกฤษ ไว้มากมายที่นี่ค่ะ
http://www.yuwarat.com
http://www.diggle.in.th/social-bookmark

ODP (Open Directory Project) เป็น Web Directory มาตรฐานสูง ที่รวบรวมเว็บไซต์ต่างๆ จัดไว้เป็นหมวดหมู่ มากกว่า 4 ล้านเว็บไซต์  โดยอาศัยอาสาสมัคร (Editor) หลายหมื่นคนจากทั่วโลกมาช่วยดูแลคัดกรองเว็บไซต์ต่างๆ ที่ส่งรายชื่อเข้ามา

ODP ดำเนินการมาตั้งแต่ 1998 โดย Netscape Communications Corporation

ข้อมูล ณ วันที่ 12 ส.ค. 2009  จำนวนเว็บไซต์ในฐานข้อมูลของ ODP มีจำนวน 4,596,136 เว็บ ใน 590,000 กว่าหมวดหมู่  และมีบรรณาธิการอาสาสมัคร 83,828 คน
.
ชื่อ ODP หลายคนอาจจะไม่ค่อยคุ้นเคยนัก น่าจะรู้จักกันในชื่อ DMOZ มากกว่า (เว็บไซต์ของ DMOZ www.dmoz.org )

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

enjoyday ก็เช่นกัน ตั้งแต่ทำเว็บนี้มา ก็นำไป submit รวมทั้งหมด 3 ครั้ง ในที่สุดความฝันก็เป็นจริง ออกแนวเวอร์ เล็กน้อย อิอิ  

.
ข้อดีที่เค้าว่ากัน มีอะไรบ้าง …

1. ได้ลิงค์กลับมายังเว็บไซต์จำนวนมาก เพราะฐานข้อมูลเว็บไซต์ของ DMOZ เป็นแบบเปิด อนุญาตให้เว็บไซต์ต่างๆ นำข้อมูลรายชื่อเว็บไซต์ดังกล่าวไปใช้งานได้   โดยผู้ที่นำไปใช้ ได้แก่ Search Engine อย่าง Google, Netscape, Lycos และผู้ใช้รายย่อยอื่นๆ รวมกันมากกว่า 1 แสน เว็บไซต์

2. มีผลต่อการจัดอันดับผลการค้นหาใน Google  อันดับจะดีขึ้นทันตาเห็นเพราะได้ Trust Rank จาก DMOZ

อย่าง enjoyday  เมื่อก่อน คีย์เวิร์ด “สอนทำเว็บ” จะอยู่ที่ 4-5 นี่ขึ้นมาอันดับ 2 ได้แล้ว  และคีย์เวิร์ด “การสร้างเว็บไซต์” ,”สร้างเว็บไซต์” ก็ยึดอันดับ 1 มาได้ ไม่แกว่งเหมือนเมื่อก่อน   ส่วนจำนวนคนเข้าเว็บยังประมาณเดิมอยู่ค่ะ

3. โก้ เอาไว้อวดชาวบ้านให้อิจฉาได้ค่ะ อิอิ

นับข้อดีได้ 3 ข้อแล้ว ก็เอาเว็บไป submit ที่ DMOZ กันดีกว่า

.
.
วิธีการเพิ่มเว็บไซต์ของเราเข้าไปใน DMOZ

1. สำหรับเว็บไซต์ภาษาไทยให้เข้าไปที่ http://www.dmoz.org/World/Thai/
2. คลิกเลือกหมวดหมู่ต่างๆ เช่น enjoyday เป็นเว็บเกี่ยวกับสอนทำเว็บ จะเลือกหมวดหมู่เป็น คอมพิวเตอร์: อินเทอร์เน็ต: ออกแบบเว็บและการพัฒนา: คำถามพบบ่อย, การช่วยเหลือ, และสอนทำเว็บ
3. ที่ด้านบนจะมีเมนูลิงค์ เกี่ยวกับ dmoz | dmoz blog | แนะนำ URL | อัพเดต URL | ร่วมเป็นบรรณาธิการ | รายงาน abuse/spam | ช่วยเหลือ ให้คลิกที่ แนะนำ URL
4. จะเข้ามาหน้าแบบฟอร์ม ให้กรอกรายละเอียดเกี่ยวกับเว็บไซต์ของเราให้ครบถ้วน อย่างกระชับ แล้วกดปุ่ม ส่ง ที่ด้านล่าง.

ทำยังไงให้เว็บติด DMOZ ได้ง่ายๆ
อ้างอิงจาก  http://www.thaiseoboard.com/index.php/topic,71636.0.html
.
Editor (คนไทย) ของ DMOZ ได้แนะนำไว้ดังนี้ค่ะ

1. เว็บเรามีเนื้อหาสาระ
2. submit ให้ถูกหมวด อ่านคำอธิบายหมวดหมู่ให้ดี
3. เขียนคำอธิบายชัดเจน
4. อย่าใส่ keyword เข้าไปในหน้าเยอะๆ เค้าจะเรียกว่า spam
5. ถ้าเว็บไหนออกแนวคล้ายๆกัน เหมือนไปก๊อปเว็บคนอื่น (ไม่ original) เพื่ออัพ ranking ของเว็บตัวเองก็โดนเช่นกัน
6. Editor คนๆ หนึ่งต้องมานั่งเช็คเว็บที่ส่งมาเป็น ร้อยๆ ต่อเดือนนี่ซิ เพราะฉะนั้นเพื่อให้พวกพี่ๆ เค้าทำงานกันง่ายขึ้น ก็เขียนคำอธิบายให้กระชับ แล้วก็ทำตามข้อ 1-5

แนะนำตามประสบการณ์ของ enjoyday

1. submit ให้ถูกหมวด โดยอาจดูว่าเว็บไซต์คู่แข่งเราที่ติด DMOZ ก่อนแล้ว เค้าอยู่หมวดไหน ก็เลือกหมวดนั้นเลย อิอิ
2. แปลกใจนิดหน่อยที่ชื่อเว็บส่วนใหญ่ที่ใช้กันเป็นภาษาไทย ตอน submit ครั้งที่ 3 เลย กรอกเป็นชื่อภาษาไทยดู “เอ็นจอยเดย์”
3. ดูลักษณะข้อความที่ใช้บรรยายเกี่ยวเว็บของเว็บที่ติดใน DMOZ ว่าเป็นอย่างไร ส่วนใหญ่ก็จะสั้นกระชับสุดๆ  ก็ตามนั้นเลยค่ะ
4. พิสูจน์แล้วว่า เว็บที่ติด Adsense และโฆษณาอื่นๆ ถ้ามีเนื้อหาที่ดี สามารถติด DMOZ ได้ ^^

.
ปัจจัยที่มีผลที่ทำให้เว็บจะติด DMOZ ได้

1. เว็บมีเนื้อหาที่ดี
2. submit ให้ถูกหมวดหมู่ และคำอธิบาย กระชับ ชัดเจน
3. มี Editor อยู่ในเนื้อหาหมวดหมู่ที่เรา submit
4. มีเพื่อนหรือคนรู้จักเป็น Editor
5. แล้วแต่อารมณ์ Editor    ข้อนี้น่าจะสำคัญมากอยู่ เหอๆ

เอาล่ะค่ะ ขอให้ทุกคนโชคดี

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

ผู้เขียนเองก็ยังจัดว่าเป็นมือใหม่เช่นกัน เพราะยังทำ Blog นี้ได้ไม่นาน มีอะไรที่ยังต้องศึกษาอีกเยอะ แต่ถ้าจะให้แนะนำเบื้องต้นคิดว่าพอจะทำได้

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

.

ข้อแรก “ไม่มีทักษะไม่ใช่เรื่องใหญ่เลย สำหรับคนที่อยากจะเริ่มต้นทำเว็บ”

“อยากทำเว็บไซต์ แต่ไม่มีทักษะอะไรเลยสักนิด จะทำได้มั้ย?”

สามารถทำได้แน่นอนค่ะ ขอแค่มีใจอยากจะทำ แต่ต้องอดทน ยอมเหนื่อยกว่าชาวบ้านเค้ามากหน่อย หาข้อมูลศึกษาเยอะๆ ว่าคนอื่นเค้าทำเว็บกันยังไง แล้วลองลงมือทำตามด้วย

เอาตัวอย่างไปดูก่อนเลย เว็บใหม่เมื่อเดือนเมษา ปีนี้เองค่ะ
http://www.fxmodify.com (สอนการใช้งาน Photoshop)
เจ้าของเว็บนี้ศึกษาและเขียน code HTML เอง (ดูๆ แล้วน่าจะใช้โปรแกรม Dreamweaver) ทั้งยังปรับปรุงอย่างต่อเนื่องมาเรื่อยๆ เว็บออกมาสวยงามมาก ผู้เขียนเองก็ทึ่งเหมือนกัน ทั้งที่ก่อนหน้านี้ยังไม่รู้ว่า ข้อความที่แสดงใน Title bar แก้ code ตรงไหน อย่างเว็บบรอดทีแรกก็จะจ้างคนทำด้วยซ้ำ แต่พอมีคนแนะนำวิธีการให้ ก็ลองทำเองจนได้

ถ้าเว็บไซต์มีจำนวนหน้าที่อยากจะเสนอข้อมูลไม่มาก เราหา web template สวยๆ มาทำเองก็ได้ ศึกษา HTML สักหน่อย เอามาแก้ๆ ก็ใช้ได้แล้ว

แต่ถ้าเตรียมการไว้ว่าเนื้อหาต้องมีการ Update กันบ่อยๆ ก็แนะนำให้ใช้ระบบจัดการเนื้อหาเว็บไซต์ ที่เรียกว่า Web CMS (Web Content Management System) เพราะสะดวกรวดเร็ว สวยงาม ที่เหลือเอาเวลามาใส่เนื้อหา โปรโมทเว็บไซต์ ดีกว่าค่ะ

สมัยนี้ซอฟต์แวร์สำหรับทำเว็บไซต์สำเร็จรูปเยอะแยะ ที่ให้ใช้กันฟรีๆ ที่ยอดนิยมหน่อย ก็ WordPress, Joomla!, PHP-Nuke และ Drupal

อย่างผู้เขียนเองก็พึ่งรู้จักคำว่า Web CMS ว่าคืออะไร รวมถึงพึ่งจะได้รู้จัก Joomla! ด้วย (แต่ยังดีที่รู้จัก WordPress มานานแล้ว)
ถึงได้บอกว่าทักษะไม่ใช่ปัญหา ถ้าเรามีใจจะเรียนรู้ !

.

ข้อสอง “ใจเย็นพี่ ใจเย็น อย่าพึ่งรีบโปรโมทเว็บ ทั้งที่เว็บยังไม่มีอะไรเลย ทำเนื้อหาก่อนดีมั้ย”

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

พี่ที่ทำงาน “จะทำสติ๊กเกอร์โฆษณาเว็บแปะไว้ที่รถดีมั้ย”
ไอ้เราต้องรีบบอก “พี่ทำเนื้อหาก่อนดีมั้ย หลายหน้าก่อน ค่อยโปรโมท ไม่งั้นคนเข้ามา ไม่เห็นมีอะไรเลย คราวหน้าเค้าก็ไม่เข้ามากันแล้ว”

ตอนนี้ผ่านไปแล้ว 2 อาทิตย์ หน้าแรกยังเป็นหน้าของ web hosting อยู่เลย เหอๆ

.

ข้อสาม “กว่าเว็บจะเป็นที่รู้จัก ต้องใช้เวลาโปรโมทสักระยะ”

“เปิดร้านได้ 3 วันแล้ว ทำไมไม่มีคนซื้ออะไรเลย”

ใช่ว่าพอเรา upload เว็บไซต์ของเราขึ้นไปในระบบอินเตอร์เน็ตแล้ว คนอื่นเค้าจะรู้จักเว็บของเราทันที ซะเมื่อไหร่ ลองค้นหาใน Google ซิ หาเว็บเราเจอหรือเปล่า ถ้าเรายังหาไม่เจอ คนอื่นเค้าก็ไม่เจอค่ะ

หลังจากที่ข้อมูลเนื้อหาเว็บพร้อมแล้ว มันต้องโปรโมทเว็บ และทำให้ web search engine อย่าง Google รู้จักเว็บไซต์ของเราก่อน ด้วยการไป submit ประมาณ 3 เดือน กว่าจะเริ่มเห็นผลค่ะ (วิธีการยังไม่ขอพูดถึงในบทความนี้)

แล้ว submit เว็บกับ google ไปแค่ 3 วัน ก็อย่าพึ่งถามว่าทำไมยังหาไม่เจอด้วย !
.

ข้อสี่ “อย่าโง่งมหมกมุ่นเพียงลำพัง ออกไปดูชาวบ้านชาวช่อง เค้าทำอะไรกันไปถึงไหนแล้ว คบเพื่อนบ้านบ้าง”

รู้เค้ารู้เรา รบร้อยครั้งชนะร้อยครั้ง เว็บไซต์ในโลกอินเตอร์เน็ตมีจำนวนมหาศาลค่ะ ทั้งที่เนื้อหาเหมือนกัน คล้ายกัน แต่ทำไมอีกเว็บนึงดัง ใครๆ ก็รู้จัก ขณะที่อีกเว็บไม่เคยได้ยินชื่อ

ควรจะเปิดโลกทัศน์ ด้วยการเข้าร่วมแหล่งชุมชนเว็บบอร์ดต่างๆ บ้าง แนะนำ thaiseoboard.com ค่ะ (เข้าไปแรกๆ อาจจะงง แนะนำให้ซื้อหนังสือเกี่ยวกับ SEO มาอ่านก่อน)

.
ข้อห้า “ทำความรู้จักกับ SEO ก่อนเลย จะได้ไม่ต้องมาแก้งานภายหลัง”

SEO (Search Engine Optimization) คือ การจัดทำ ปรับปรุงเว็บไซต์ด้วยเทคนิคต่างๆ เพื่อให้เว็บไซต์ของเราถูกค้นหาเจอติดอันดับต้นๆ หรือหน้าแรกของ เว็บ Search Engine เช่น google.com, yahoo.com และ search engine เจ้าอื่นๆ

ที่เราต้องทำ SEO ก็เพราะคนส่วนใหญ่หาข้อมูลต่างๆ ผ่าน Search Engine ยิ่งเว็บไซต์ของเราอยู่อันดับต้นๆ เท่าไรก็จะมีโอกาสถูกพบ และคลิกเข้าไปชมมากขึ้น ช่วยประหยัดเวลาและงบค่าประชาสัมพันธ์เว็บได้มาก

เนื่องจากเทคนิคในการทำ SEO บางอย่างมันก็เกี่ยวข้องกับตอนที่เราเขียนหน้าเว็บเพจด้วย เช่น ควรใส่ tag meta ที่สำคัญให้ครบถ้วน, หัวข้อสำคัญควรใช้ tag <h1>,<h2>,… ลิงค์เมนูไม่ควรเป็นภาพ ฯลฯ สิ่งเหล่านี้จะทำให้ Search Engine มาเก็บข้อมูลเว็บเราได้ง่าย เราจึงควรที่จะเรียนรู้ไว้ก่อน จะได้ไม่ต้องมาแก้งานกันทีหลังค่ะ

.
ข้อหก “ข้อมูลเนื้อหาในเว็บสำคัญที่สุด !”

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

ลองวิเคราะห์ดูว่า ข้อมูลที่นำเสนอในหน้าเว็บขาดตกบกพร่องตรงไหน ใช่ข้อมูลที่คนอยากรู้หรือเปล่า การค้นหาข้อมูลในเว็บทำได้ง่ายหรือเปล่า ข้อมูลมีมากพอหรือเปล่า ….

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

.
ข้อเจ็ด “ตรวจสอบพัฒนาการของเว็บไซต์ด้วยสถิติคนเข้าเว็บ”

ต้องหาตัวเก็บสถิติคนเข้าเว็บมาใช้นะคะ จะได้นำข้อมูลเหล่านั้นมาวิเคราะห์ เพื่อปรับปรุงเว็บไซต์ได้ถูกจุด เช่น คนเข้าเว็บเราจาก คำค้นหา (keyword) อะไร, เข้ามาทางไหน, ใช้ระยะเวลาอยู่ในเว็บนานมั้ย, เรื่องอะไรที่เป็นที่สนใจ ฯลฯ

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

ขอแนะนำให้ใช้ของ Google ให้สมัครทั้ง google.com/webmasters และ google.com/analytics
และสมัครที่ stats.in.th อีกที่หนึ่งด้วย ดูสถิติง่ายดี

ช่วงแรกๆ อาจจะยังใช้ประโยชน์จากตัวเก็บสถิติพวกนี้ไม่ได้เท่าไหร่ เพราะคนเข้าเว็บยังน้อยเกินไป ต้องใจเย็นๆ

.

ข้อแปด “ทำเว็บด้วยความสนุก ดีที่ซู้ด !”

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

.

ข้อเก้า “อย่าหยุดที่จะเรียนรู้ และพยายามปรับปรุงเว็บไซต์ของเราให้ดียิ่งขึ้นๆไปอีก”

เทคนิควิธีการทำเว็บ ในเรื่องต่างๆ เป็นส่วนสำคัญที่จะทำให้เว็บของเราประสบความสำเร็จ ต้องหมั่นศึกษากันไปเรื่อยๆ ค่ะ

และเคยได้ยินมั้ยคะ “เว็บไซต์ที่ดี คือเว็บที่ยังทำไม่เสร็จ” โดยเฉพาะพวกเว็บ Blog นี่แหละ หยุดเขียนเมื่อไหร่สงสัยคนเลิกเข้าแน่ !

.

ข้อสิบ “ถ้ายังไม่ได้ดังหวัง ก็อย่าพึ่งท้อใจเร็วเกินไป”

(ข้อสุดท้ายสำหรับตอนนี้ คิดอะไรออกเพิ่ม เดี๋ยวมา revised ใหม่ 55)

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

แล้วอย่าเอาความสำเร็จของคนอื่นมาเป็นบรรทัดฐานมากเกินไป จริงๆ แล้วเค้าอาจจะเคยลองผิดลองถูกมานับครั้งไม่ถ้วน ไม่รู้กี่เว็บต่อกี่เว็บแล้ว แต่ตอนที่เค้ามาเล่า อาจจะตัดตอนมาเฉพาะเว็บล่าสุดก็ได้ค่ะ ว่า “ผมทำไม่ถึงเดือน ยอดรายได้เท่านั้นเท่านี้”

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

เป็นกำลังใจให้ทุกคนค่ะ (ให้ตัวเองด้วยค่ะ)

ส่วนความคิดเห็น เป็นบริเวณที่มีการถกกันเกี่ยวกับบทความจากผู้อ่าน/ผู้เยี่ยมชม หน้าที่ของผู้ออกแบบ จะต้องออกแบบให้บริเวณนี้ดูเป็นการสนทนากัน ด้วยการแยกแต่ละความคิดเห็นออกจากกัน อาจจะด้วยการกำหนดหมายเลขให้แต่ละความคิดเห็น วิธีนี้ยังช่วยให้ง่ายต่อการอ้างอิงความคิดเห็นต่าง ๆ อีกประการ คือแยกความคิดเห็นของเจ้าของบทความ ให้ต่างจากความคิดเห็นทั่วไป เพื่อเอาไว้คั่นว่าได้ตอบความเห็นของผู้อ่านถึงไหนแล้ว หรือ ดูว่ามีความเห็นเพิ่มมาอีกหรือป่าว

ตัวอย่างส่วนแสดงความคิดเห็นที่ดี

1. Chris Shiflett

Chris’ ออกแบบแบบเรียบง่าย อ่านง่าย แยกชื่อผู้ออกความคิดเห็น ออกจาก ความคิดเห็นอย่างชัดเจน เพื่อประโยชน์ที่ได้กล่าวไปแล้วข้างต้น

2. Darkmotion

ผมชอบที่เขาแยกส่วนชื่อผู้ออกความเห็น กับ ความคิดเห็น และดูแล้วได้อารมณ์มาก เหมือนการคุยกัน

3. Blog Design Blog

นี่ก็เป็นอีกตัวอย่างหนึ่ง มีตัวเลขบอกลำดับความคิดเห็น และเน้นชื่อผู้ออกความคิดเห็นด้วยกล่องสีฟ้า ทำให้แยกออกจากส่วนของความคิดเห็น

วิธีทำให้การออกแบบส่วนแสดงความคิดเห็นออกมาดูดี

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

.

7. ส่วนท้ายของบทความ(Post’s Footer)

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

ตัวอย่างส่วนท้ายของบทความที่ดี

1. Freelanceswitch

ผมชอบการออกแบบบล็อกแบบ Collis มาก ให้ความรู้สึกเรียบร้อย สะอาด ดึงดูดความสนใจ
ในตัวอย่างนี้เขาทำได้ดีทีเดียว แยกส่วนเนื้อหาออกจากส่วนเพิ่มเติ่มพิเศษในส่วนท้ายบทความได้ชัดเจน

2. PSDTuts

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

3. Standards for Life

ส่วนท้ายบทความของ Standards of Life ให้ความรู้สึกปลอดโปร่งโล่งสบาย การสลับสี similar posts(เนื้อเรื่องที่คล้ายกัน) ดูแล้วสบายตา

วิธีทำให้การออกแบบส่วนท้ายบทความออกมาดูดี

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

.

8. ส่วนท้ายของบล็อก(Footer)

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

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

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

ตัวอย่างส่วนท้ายของบล็อกที่ดี

1. Designshack

ผมชอบที่ Designshack ใช้ส่วนท้ายของบล็อกเป็นที่วางเมนูรองทั้งหมด โดยด้านข้างบล็อกจะไม่มีเมนูรองเลย

2. Web Designer Wall

ผมชอบความตั้งใจของเจ้าของบล็อก เขาให้ความสำคัญกับส่วนนี้พอ ๆ กับส่วนหัวเลย ผลจึงออกมาดูงดงามยิ่งนัก

3. Chris Shiflett

เป็นส่วนท้ายบล็อกที่สะอาด เรียบง่าย มาก ๆ สื่ออกมาได้อย่างชัดเจนว่าต้องการอะไร

วิธีทำให้การออกแบบส่วนท้ายของบล็อกออกมาดูดี

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

.

9. โฆษณา(Advertisements)

ในปัจจุบันหลาย ๆ บล็อก ได้นำโฆษณามาแปะไว้ในบล็อก จึงทำให้ส่วนนี้มีความสำคัญมากขึ้น ต้องการการออกแบบอย่างพิถีพิถัน เพื่อไม่ให้บล็อกดูน่าเกียจเกินไปหรือ เพื่อไม่ให้โฆษณษมาบดบังความสำคัญของเนื้อหา

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

ตัวอย่างโฆษณาที่ดี

1. Copyblogger

Copyblogger ใช้โฆษณาที่มีขนาดมาตรฐานทั่วไป (125 x 125) ไว้ด้านบนของบล็อก โดยการระบุไว้อย่างชัดแจ้งว่านี่คือผู้สนับสนุน แต่ก่อนที่คุณจะเห็นโฆษณาคุณจะได้พบกับ tagline ของเขาก่อน ทำให้เห็นว่าเขาให้ความสำคัญกับเนื้อหาบล็อกมากกว่าโฆษณา

2. Webdesignerwall

Webdesignerwall ไม่ได้มีเพียงแค่โฆษณาขนาดมาตรฐาน แต่ยังมีโฆษณาอยู่ตรงกลางเนื้อหาด้วย และ ด้วยการออกแบบของเขาทำให้ผู้เยี่ยมชมทราบได้ว่านี่เป็นโฆษณา

3. Problogger

Problogger วางโฆษณาไว้ถัดจากโลโก้ของบล็อก แต่มันไม่ได้บดบังความน่าสนใจของโลโก้และเนื้อหาบล็อกเลย

วิธีทำให้การออกแบบโฆษณาออกมาดูดี

• ถ้าคุณตั้งใจไว้ว่าจะเอาโฆษณามาแปะไว้ในบล็อก ในระหว่างการออกแบบบล็อกคุณจะต้องให้ความสำคัญกับมันด้วย เพื่อให้โฆษณาที่เอามาแปะ เข้ากับบล็อกได้อย่างลงตัว
• โฆษณาที่เป็นที่นิยมมาก คือ google’s adsense และโฆษณาขนาด 125 x 125 Google’s adsense เป็นโฆษณาที่ยืดหยุ่นอย่างมาก คุณสามารถเลือกขนาดได้ หรือ รูปแบบการแสดงผลได้ตามที่คุณต้องการ แต่โฆษณาขนาด 125 x 125 จะไม่ค่อยยืดหยุ่นสักเท่าไหร่ โฆษณาประเภทนี้มักจะนำไปใส่ไว้ด้านข้างบล็อก
• หลังจากที่ได้ตัดสินใจคร่าว ๆ ไว้แล้วว่าจะใช้โฆษณาแบบไหนก็ให้คุณหาตัวอยางโฆษณาแบบนั้น แล้วคัดลอกมาแปะไว้ในบล็อกคุณ แปะหลอก ๆ ไว้ก่อน เพื่อที่การออกแบบส่วนอื่น ๆ จะได้เข้ากับบล็อกของคุณได้อย่างลงตัว
• อย่าลืมออกแบบบล็อกให้สังเกตเห็นโฆษณาได้ง่าย แต่จะต้องไม่บดบังความสำคัญของเนื้อหา ด้านข้างของบล็อกเป็นส่วนที่เหมาะสมที่สุดที่จะนำโฆษณาไปแปะและ ส่วนที่แย่ที่สุดคือการนำโฆษณาไปไว้ในที่ ๆ ผู้เยี่ยมชมจะเข้าใจผิดคิดว่าเป็นเมนูของบล็อก

Google มีโฆษณาที่เป็นชุดของลิงค์จำนวนหนึ่ง และ ผมมักจะสับสนคิดว่ามันคือเมนูของบล็อก ดังนั้น การระบุว่านี่คือโฆษณาจะช่วยแก้ปัญหานี้ได้

ที่มา http://www.divland.com/blog/2008/06/12/how-to-blog-design/

ข้อมูลจาก http://www.blogdesignblog.com/blog-design/how-to-blog-design-style-guide/

• ส่วนหัว(Header)
• ส่วนเนื้อหา(Content Area)
• เมนูหลัก(Primary Navigation)
• เมนูรอง(Secondary Navigation)
• หัวเรื่อง(Headlines)
• ส่วนแสดงความคิดเห็น(Comments)
• ส่วนท้ายของบทความ(Post’s Footer)
• ส่วนท้ายของบล็อก(Footer)
• โฆษณา(Advertisements)

1.ส่วนหัว(Header)

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

ตัวอย่างส่วนหัวที่ดี

1. Octwelve

Octwelve เป็นตัวอย่างที่ดีของการใช้ตัวอักษรที่สวยงาม ในส่วนหัวเพื่อทำให้ส่วนหัวแตกต่างจากส่วนอื่น ๆ ของบล็อกอย่างเห็นได้ชัด และยังทำให้คุณรู้ว่าบล็อกนี้มีเนื้อหาเกี่ยวกับอะไร

2. Cult foo

ผมชอบส่วนหัวของ Cultfoo ตรงที่รูปภาพทะลุออกมาจากกรอบ ที่เดิมทีจะเป็นกรอบโค้งและกรอบเหลี่ยม การออกแบบแบบนี้เรียกร้องความสนใจให้บล็อกได้เป็นอย่างดีทีเดียว
3. Darkmotion

จุดเด่นของ darkmotion คือ การออกแบบส่วนหัวที่ได้อารมณ์มาก ดูแล้วสนุกสนานรื่นเริง

วิธีทำให้การออกแบบส่วนหัวออกมาดูดี

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

.

2. ส่วนเนื้อหา(Content Area)

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

ตัวอย่างส่วนเนื้อหาที่ดี

1. Simplebits

ส่วนเนื้อหาของ Simplebits ดีที่อ่านง่ายและแยกลิงค์ออกจากส่วนของเนื้อหาได้อย่างชัดเจน แต่มันไม่เรียกร้องความสนใจหรือไม่ตื่นตาตื่นใจสักเท่าไหร่ ออกแนวเรียบง่าย

2. We Love WP

ปัญหาใหญ่ในการออกแบบพื้นหลังสีทึบคือยากต่อการอ่าน แต่ถ้าหากทำให้ดีแล้วจะดูสวยงามมาก WeLoveWP ใช้สีน้ำตาลอ่อนจึงไม่ตัดกับพื้นหลังที่ออกทึบมากเท่าไหร่ ทำให้อ่านง่าย

3. We Break Stuff

ผมชอบการผสมผสานรูปแบบลิงค์ระหว่างเส้นใต้ที่เป็นจุด ๆ กับสี ทำให้ดูดี

วิธีทำให้การออกแบบส่วนเนื้อหาออกมาดูดี

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

.

3. เมนูหลัก(Primary Navigation)

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

ตัวอย่างเมนูหลักที่ดี

1. A list apart

AList Apart เป็นตัวอย่างที่ดีตัวอย่างหนึ่งในการนำเมนูหลักไว้ด้านบน

2. Mindtwitch

Mindtwitch ใช้การความแตกต่างของพื้นผิวแสดงทำให้เห็นชัดเจนว่าเป็นเมนูหลัก

3. Jogger

เมนูหลักของ Jogger เรียบง่าย และทำได้ง่าย แต่มันสื่อสารออกมาได้อย่างชัดแจ้ง และยังกลืนเข้ากับส่วนอื่น ๆ ได้อย่างแนบเนียน

วิธีทำให้การออกแบบเมนูหลักออกมาดูดี

• จำนวนลิงค์ในส่วนเมนูหลักไม่ควรมีเยอะเกินไป ทั้งนี้ไม่ได้มีกฏเกณฑ์ตายตัวว่าจะต้องมีไม่เกินกี่ลิงค์ แต่โดยทั่วไปแล้วไม่ควรเกิน 6-7 ลิงค์
• ส่วนของเมนูหลักควรสงวนไว้ให้ เฉพาะลิงค์ที่ไปสู่หน้าหลักของส่วนอื่น ๆ ของบล็อก โดยที่หน้านั้นสามารถพาผู้เยี่ยมชมไปสู่ส่วนย่อยต่าง ๆ(เมนูรองนั่นเอง) ได้อีก
• ตัวอย่างเมนูหลักที่เห็นได้ทั่วไปคือ การติดต่อ(contact) เกี่ยวกับเรา (about) คุณสมบัติ/คุณลักษณะของเมนูหลัก ขึ้นอยู่กับว่า คุณออกแบบโครงสร้างบล็อกของคุณอย่างไร และ อะไรที่คุณต้องการให้ผู้เยี่ยมชมบล็อกของคุณสนใจ

.

4. เมนูรอง(Secondary Navigation)

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

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

ตัวอย่างเมนูรองที่ดี

1. Elitistsnob

ผมชอบที่ส่วนด้านข้างเด่นชัด แยกออกมาจากส่วนอื่น ๆ ทำให้ผู้เยี่ยมชมสามารถมองหาได้ง่าย

2. Mancub

ชอบที่ส่วนด้านข้างผุดออกมาจากเนื้อหา

3. Designdisease

Design Disease ใช้สีส้มทำให้ส่วนข้างเด่นกว่าส่วนอื่น ๆ

วิธีทำให้การออกแบบเมนูรองออกมาดูดี

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

.

5. หัวเรื่อง(Headlines)

หัวเรื่องของแต่ละบทความมีไว้เพื่อดึงดูดความสนใจผู้อ่าน และยั่วเย้าให้อ่านเนื้อหาทั้งหมดในที่สุด การจะทำเช่นนี้ได้ หัวเรื่องของคุณจะต้องเด่น โดยสามารถทำได้หลากหลายวิธี

ตัวอย่างหัวเรื่องที่ดี

1. Henry Jones

Henry Jones เป็นตัวอย่างการออกแบบหัวเรื่องที่ดูเรียบง่ายมาก ๆ แต่ถึงจะเรียบง่ายมันก็สามารถดึงความสนใจมาสู่หัวเรื่องได้ อาจจะด้วยการใช้ไอคอนแปะไว้กับวันที่ และจำนวนความคิดเห็น ที่อยู่ถัดลงมาจากหัวเรื่อง

2. I Love Typography

ตัวอย่างนี้ใช้สีสันและแบบตัวอักษรแสดงให้เห็นถึงความคิดสร้างสรรค์ ยั่วยวนใจผู้เยี่ยมชม

3. Blogsolid

Blogsolid ใช้ยุทธวิธีในการดึงดูดความสนใจผู้เยี่ยมชมมาสู่หัวเรื่อง ด้วยการนำรูปภาพงานศิลปอันงดงามมาวางไว้ใกล้กับหัวเรื่อง

วิธีทำให้การออกแบบหัวเรื่องออกมาดูดี

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

ที่มา http://www.divland.com/blog/2008/06/12/how-to-blog-design/

ปัจจุบันมีเว็บไซต์เกิดขึ้นใหม่มากมาย เนื่องจากผู้สร้างเว็บสมัยนี้ไม่จำเป็นต้องเรียนรู้การเขียนโปรแกรมภาษา HTML หรือภาษา script ต่างๆ เช่น PHP, ASP, JavaScript เหมือนสมัยก่อน ก็สามารถใช้ Web CMS ในการสร้างเว็บไซต์ขึ้นได้อย่างง่ายดาย โดยใช้เวลาไม่กี่นาที แถมหน้าตาเว็บที่ได้ก็ยังเหมือนมืออาชีพทำอีกด้วย !!

.

Web CMS คืออะไร ?

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

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

สำหรับหน้าตาของ Web CMS เกิดจากการใช้ไฟล์ Template ที่สร้างด้วย HTML และภาษา Script อื่นๆ ซึ่งหลังจากติดตั้ง Web CMS แล้ว หากหน้าตาที่ได้มาไม่ถูกใจ เราก็สามารถที่จะหา Template ตัวอื่นมาเปลี่ยนใหม่ได้ วิธีการก็ไม่ยุ่งยากอะไร

ส่วนการเขียนเนื้อหา ก็ทำง่ายๆ คล้ายการพิมพ์งานบน MS Word เลยค่ะ

นอกจากนี้ เรายังสามารถเพิ่มความสามารถใหม่ๆ เข้าไปได้อีก ด้วยการติดตั้ง Plugin หรือ Module เพิ่มเติม

.

Web CMS มีทั้งที่ต้องเสียเงินซื้อ และแบบ Open Source ซึ่งฟรี

มาดูกันว่า CMS ตัวไหนที่ได้รับความนิยมในบ้านเรา แบ่งตามการจัดการเนื้อหา

• เว็บไซต์ที่นำเสนอเนื้อหา ที่นิยมใช้กัน ได้แก่ Joomla!, PHP-Nuke  และ Drupal
• เว็บบล็อก (Blog)  ได้แก่ b2evolution, ที่ได้รับความนิยมอย่างมากก็คือ WordPress (ที่ enjoyday ก็ใช้ตัวนี้ค่ะ)
• เว็บอีคอมเมิร์ซ (e-Commerce) สำหรับเปิดร้านค้าออนไลน์เพื่อขายสินค้าหรือบริการผ่านเว็บไซต์ ที่จะต้องมีระบบตระกร้าสินค้า CMS ที่ใช้กัน ได้แก่ phpShop, osCommerce และ Zen cart
• เว็บ Gallery ก็จะใช้ Coppermine
• กระดานข่าว (Webborad) ที่กำลังนิยมอย่างมากในปัจจุบันก็ SMF (Simple Machines Forum), phpBB และ Discuss ซึ่งกำลังมาแรง ลูกเล่นเยอะ แต่ก็กินทรัพยากรเครื่องค่อนข้างมาก ถ้ามีคนเข้าจำนวนมาก ส่วน vBulletin, IPB (Invision Power Board) ปัจจุบันนี้ไม่ฟรีแล้ว

ก่อนเลือกใช้ CMS ตัวไหนก็ให้ดูวัตถุประสงค์ของเว็บไซต์เราก่อนว่าจะเหมาะกับการใช้ CMS ตัวไหน ลองศึกษาวิธีการติดตั้ง การใช้งาน ดูก่อน

ศึกษาเพิ่มเติมที่ได้ที่นี่เลยค่ะ http://www.cmsthailand.com

1. การสร้าง Blog โดยใช้โปรแกรมเว็บสำเร็จรูป CMS : WordPress
ตัวอย่างเว็บ Blog : enjoyday.net นี่แหละค่ะ
« บทความเรื่อง การสร้าง Blog ด้วย WordPress »

2. การสร้างเว็บไซต์ โดยใช้โปรแกรมเว็บสำเร็จรูป CMS : Joomla
ตัวอย่างเว็บไซต์ : enjoychinese.net เป็นเว็บสอนภาษาจีน (อีกเว็บไซต์หนึ่งของผู้เขียนเองค่ะ)
« บทความเรื่อง การสร้างเว็บไซต์ด้วย Joomla! »

3. การสร้างเว็บไซต์แบบเขียนหน้าเว็บเพจเองโดยใช้ HTML, CSS, XHTML
แบบนี้จะเหมาะกับเว็บไซต์ที่มีจำนวนหน้าเว็บเพจไม่มาก ที่ไม่มีการเปลี่ยนแปลงบ่อยๆ

ตัวอย่างเว็บไซต์ #1 : เว็บไซต์ดารา ที่นำเสนอข้อมูลไม่กี่หน้า และเพิ่มส่วน Dynamic ด้วยกระดานข่าว (Webboard) ให้ Fanclub ได้พูดคุยกัน
(อยู่ระหว่างการจัดทำบทความ)

ตัวอย่างเว็บไซต์ #2 : รู้จักการนำ Website Template มาใช้
(อยู่ระหว่างการจัดทำบทความ)

4. การสร้างเว็บขายสินค้าออนไลน์
สำหรับการสร้างเว็บขายสินค้าออนไลน์ สามารถสมัครฟรีกับเว็บ e-marketplace ทั้งหลาย เช่น tarad.com, weloveshopping.com หรือถ้าสนใจจะทำเว็บไซต์เอง สามารถหา software ประเภท Open source ที่แจกฟรีมาใช้งาน ลองเข้าไปอ่านในหัวข้อ
« บทความเรื่อง ร้านขายสินค้าออนไลน์ »

1. โปรแกรมสำหรับพัฒนาเขียนเว็บเพจ สำหรับตัวที่แนะนำคือ EditPlus กับ Adobe Dreamweaver

กรณีที่เราออกแบบเว็บไซต์และเขียนเว็บเพจแต่ละหน้าเอง แนะนำให้ใช้ Adobe Dreamweaver ค่ะ

ก่อนใช้งานโปรแกรม Adobe Dreamweaver เราจะต้องมีความรู้พื้นฐานภาษา HTML ก่อนนะคะ ไม่งั้นงงแย่

เว็บไซต์ที่สอนการใช้งานโปรแกรม Adobe Dreamweaver CS3 (ณ ตอนนี้ โปรแกรม Adobe มาถึงเวอร์ชั่น CS4 แล้วค่ะ) ลองเข้าไปศึกษาได้ค่ะ
http://www.bloggang.com/viewdiary.php?id=tutorcat&month=12-2007&date=12&group=1&gblog=1
http://www.devteen.com/2009/02/20/dream-site/

ส่วนกรณีที่เราใช้โปรแกรมเว็บไซต์สำเร็จรูปอื่นๆ เช่น WordPress, Joomla ที่จะต้องมีการแก้ไขไฟล์บางไฟล์ และเราไม่มีความรู้ทางการเขียนโปรแกรมเลย
อาจจะแค่โปรแกรม Text Editor ง่ายๆ อย่าง EditPlus เปิดโปรแกรมเร็วดี ไม่หนักเครื่องด้วยค่ะ

download โปรแกรม EditPlus ที่นี่
http://www.editplus.com

2. โปรแกรมสร้างและตกแต่งภาพ หนีไม่พ้นโปรแกรมยอดนิยมอย่าง Adobe Photoshop

เว็บไซต์ที่สอนการใช้งานโปรแกรม Photoshop
http://www.fxmodify.com (สอนเป็น Video)
http://www.gururu.ioakhost.com/

3. โปรแกรม Upload ไฟล์ข้อมูลจากเครื่องคอมพิวเตอร์ของเราไปยังเครื่อง Server แนะนำ FileZilla, WS_FTP

download โปรแกรม FileZilla ที่นี่
http://filezilla-project.org

เตรียมไว้้ให้พร้อมเลยนะคะ เดี๋ยวเราจะต้องใช้โปรแกรมเหล่านี้กันแล้วในหัวข้อต่อไป

ภาษาโปรแกรมที่ใช้ในการพัฒนาเว็บไซต์ โดยพื้นฐาน ได้แก่

1. HTML (ย่อมาจาก Hyper Text Markup Language)
เป็นภาษาที่ใช้สำหรับสร้างเว็บเพจ มีโครงสร้างประกอบไปด้วย tag และ attribute ต่างๆ ที่ใช้ในการควบคุมการแสดงผลของข้อความ รูปภาพ หรือวัตถุอื่น ๆ     ภาษา HTML นั้นเป็นภาษาประเภท Markup ไม่จัดเป็นภาษาประเภท Programming  สามารถที่จะเรียนรู้ได้ง่าย

2. CSS (ย่อมาจาก Cascading Style Sheets)
เป็นภาษาที่มีรูปแบบการเขียน Syntax ที่เฉพาะ ถูกกำหนดขึ้นเพื่อใช้เสริมภาษา HTML ให้สามารถจัดรูปแบบการแสดงผลให้กับเอกสาร HTML ได้สมบูรณ์แบบมากขึ้น

3. XHTML (ย่อมาจาก Extensible HyperText Markup Language)
เป็นมาตรฐานใหม่ของ HTML คำสั่งต่างๆนั้นก็ยังเหมือนกับ HTML แต่จะมีความเข้มงวดในเรื่องโครงสร้างภาษามากกว่า และมีการตัด tag และ attribute ที่ล้าสมัยออกไป

ก่อนจะลงมือเขียนเว็บเพจ ขอให้มีความรู้ความเข้าใจในภาษาพื้นฐานเหล่านี้ก่อน โดยศึกษาได้จากบทเรียนออนไลน์ของ enjoyday.net
- เรียนรู้ HTML
- เรียนรู้ CSS
- เรียนรู้ XHTML

ถึงแม้ว่าเราจะใช้ Software เว็บไซต์สำเร็จรูป (Web CMS) ในการสร้างเว็บไซต์หรือบล็อก เช่น WordPress,  Joomla ก็ตาม    HTML และ CSS นี้จะเป็นพื้นฐานให้เราแก้ไข code และปรับแต่งหน้าตาเว็บไซต์ให้ถูกใจเราได้ค่ะ

.

นอกจากภาษาพื้นฐาน HTML/XHTML และ CSS  ในข้างต้นที่ไม่ใช่ภาษาสำหรับเขียนโปรแกรมแล้ว  เราอาจจะเคยได้ยินภาษา JavaScript, ASP, ASP.NET, PHP,JSP และอื่นๆ   ภาษาเหล่านี้เป็นภาษา Script ที่นิยมใช้ในการสร้างเว็บเพจค่ะ

คค

ภาษา Script ที่ใช้ในการสร้างเว็บเพจ แบ่งได้เป็น

1) Server-Side Script เช่น PHP, ASP, JSP, CGI    เป็นภาษา script ที่ประมวลผลที่ฝั่ง Server แล้วส่งผลลัพธ์ไปแสดงผลที่ฝั่ง Client ผ่านโปรแกรมเว็บบราวเซอร์ เช่น IE, Firefox

2) Client-Side Script เช่น JavaScript, VBScript, JScript   เป็นภาษา script ที่ประมวลผลบนเครื่องคอมพิวเตอร์ของผู้เยี่ยมชมเว็บไซต์ โดยใช้โปรแกรมเว็บเบราเซอร์  ซึ่งจะช่วยแบ่งเบาการทำงานให้กับเครื่อง Web Server ได้

ในกรณีที่ต้องการให้แอพพลิเคชันทำงานร่วมกันกับแอพพลิเคชันอื่น เช่น ฐานข้อมูล  เราจะต้องใช้ Server-Side Script  เขียนคำสั่งติดต่อกับฐานข้อมูล  โดยผู้ชมเว็บจะไม่สามารถดูคำสั่ง ( Source Code) ของ Server-Side Script เหล่านั้นได้

ต่างจากการเขียนคำสั่งแบบ Client-Side Script  ที่ผู้ชมเว็บสามารถดูคำสั่งที่เขียนด้วย Client-Side Script รวมถึง HTML, CSS  ของหน้าเว็บเพจนั้นได้  ด้วยการคลิกเมาส์ขวาบนหน้าเว็บเพจนั้นๆ และเลือกคำสั่ง View Source หรือ View Page Source ในโปรแกรมเว็บเบราเซอร์

.

ถ้าอ่านคำอธิบาย แล้วไม่เข้าใจ ???  ก็ยังไม่ต้องไปสนใจมันค่ะ

แล้วมันต้องใช้มั้ยล่ะ ?
ตอบตามตรง… เว็บไซต์ส่วนใหญ่ เค้าใช้กันทั้งนั้นแหละค่ะ
แต่….เราไม่จำเป็นต้องเขียนภาษา Script เหล่านี้เองก็ได้ ฟังแล้วน่าจะเบาใจขึ้นมาแล้วนะคะ

แล้วภาษา Script เหล่านี้ใช้ตอนไหนบ้าง ?
ใช้ในกรณีที่เว็บเรามีการทำงานที่เกี่ยวข้องกับฐานข้อมูล เช่น สมุดเยี่ยม, กระดานข่าว (Webboard), ระบบสมาชิก, ระบบตระกร้าสินค้า และอื่นๆ

เราสามารถที่จะเลือกใช้ Web CMS หรือเว็บไซต์สำเร็จรูป ที่เป็น Open Source (แบบฟรี) มาติดตั้งในเว็บไซต์ของเราเพื่อใช้งานได้ โดยที่ไม่ต้องพัฒนาเองค่ะ  ไว้จะกล่าวถึงในบทความต่อๆ ไป

โดยทั่วไปเจ้าเว็บไซต์สำเร็จรูปที่เราจะนำมาใช้นี้ ถูกพัฒนามาจากภาษา Script ไม่ตัวใดก็ตัวหนึ่ง  ส่วนใหญ่จะเป็น PHP เพราะเป็นภาษา Script แบบ Open Source  เหมือนกันค่ะ ^^

1. Static Website

หมายถึง เว็บไซต์ที่สร้างด้วยภาษา HTML ธรรมดา และบันทึกเป็นไฟล์นามสกุล .html    เนื้อหาข้อความ รูปภาพในหน้าเว็บเพจนั้นจะเป็นไปตามที่เราเขียนกำหนดไว้

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

Static Website เหมาะกับเว็บไซต์ที่มีขนาดไม่ใหญ่ จำนวนหน้าเว็บเพจไม่มาก ไม่มีการเปลี่ยนแปลงข้อมูลบ่อยๆ  และไม่มีการติดต่อฐานข้อมูล

ถ้าเราจะสร้างเว็บรูปแบบนี้ สามารถทำได้ไม่ยาก โดยต้องศึกษาเรื่องการเขียนเว็บเพจด้วย HTML ก่อน

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

ส่วนข้อเสีย ก็คือ การแก้ไขเปลี่ยนแปลงยุ่งยาก จะต้องแก้ไขกับไฟล์หน้าเว็บเพจนั้นๆ เมื่อแก้ไขแล้ว ก็ต้อง Upload ไฟล์นั้นขึ้นไป Web Server ใหม่ทุกครั้ง  และเว็บรูปแบบนี้จะไม่สามารถใช้งานฐานข้อมูลได้

.

2. Dynamic Website

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

สังเกตได้ว่า เมื่อมีผู้มาตั้งกระทู้ และตอบกระทู้ ก็จะเกิดหน้าเว็บเพจนั้นๆ ขึ้นได้เอง โดยที่เราไม่ได้เป็นคนสร้างหน้าเว็บเพจเหล่านั้นเอง

เว็บไซต์รูปแบบนี้จะถูกสร้างด้วยภาษา Script แบบ Server Side Script เช่น PHP, ASP, ASP.Net, JSP และอื่นๆ  ไฟล์เอกสารที่ไ้ด้จะมีนามสกุล .php, .asp เป็นต้น

และมักจะมีการติดต่อกับฐานข้อมูลเพื่อบันทึกข้อมูลลงในฐานข้อมูล หรือนำข้อมูลจากฐานข้อมูลขึ้นมาแสดงผลเป็นหน้าเว็บเพจ

ส่วนการทำงานของเว็บไซต์รูปแบบนี้ จะต่างจากแบบ Static Website   โดยเมื่อมีผู้ชมเรียกดูหน้าเว็บเพจ  ไฟล์หน้าเว็บเพจนั้นจะถูกแปลและ execute คำสั่งโดยตัว Interpreter ที่ฝั่ง Server ใ้ห้อยู่ในรูปแบบเอกสาร HTML ก่อน จึงส่งกลับให้ Web Server  เพื่อส่งต่อไปให้โปรแกรมเว็บเบราเซอร์ของผู้ใช้งานต่อไป

การสร้างเว็บไซต์รูปแบบนี้ ต้องอาศัยความรู้ในการเขียนโปรแกรมมากกว่าแบบแรกมาก  นอกจากจะต้องมีความรู้พื้นฐาน HTML แล้ว ยังต้องเขียนภาษา Server Side Script เป็นอย่างน้อย 1 ภาษา ต้องรู้เรื่องการจัดการฐานข้อมูล ต้องเขียน SQL เืพื่อจัดการกับข้อมูลในฐานข้อมูลได้  และถ้าอยากให้ระบบงานทำงานได้อย่างรวดเร็วไม่ต้อง Refresh หน้าจอบ่อยๆ ยังต้องรู้เรื่อง AJAX อีกด้วย

.

^ ถ้าอ่านข้อความข้างบนแล้วงง  ก็ไม่ต้องซีเรียสนะคะ …

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

.

เพราะในปัจจุบันมีระบบที่จะช่วยให้เราจัดการเนื้อหาเว็บไซต์ได้อย่างสะดวก เรียกว่า Web CMS    เพียงแค่เรียนรู้วิธีการใช้งาน ก็สามารถสร้างเว็บไซต์แบบ Dynamic ได้โดยไม่ต้องเขียนโปรแกรมอะไรเลย

(แต่สำหรับเว็บไซต์ที่ทำงานเฉพาะเจาะจง ก็ยังจำเป็นต้องเขียนโปรแกรมเพื่อสร้าง Web Application สำหรับใช้งานเองอยู่ ซึ่งเราก็ปล่อยให้เป็นเหน้าที่ของเหล่าโปรแกรมเมอร์ต่อไปค่ะ)

เราสามารถที่จะสร้างเว็บไซต์โดยให้บางหน้าเว็บเพจเป็นแบบ Static ที่ใช้ HTML ธรรมดา เขียน และให้บางหน้าสร้างเป็นแบบ Dynamic โดยใช้ภาษา Script ก็ได้ค่ะ  ตัวอย่างเช่น บทเรียนสอน HTML, CSS, XHTML ของ enjoyday จะใช้ HTML ธรรมดาๆ ส่วนหน้าอภิธานศัพท์ ผู้เขียนอยากจะเพิ่มหรือแก้ไขคำศัพท์ได้ง่ายๆ และให้มีระบบสืบค้นด้วย จึงใช้ PHP เขียน เป็นต้น