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

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

โพสนี้ได้รับแรงบันดาลใจมากจาก ImpressiveWebs ครับผม เค้าลิสต์เอาไว้เยอะมาก ๆ ส่วนผมจะเอามาพูดถึงเฉพาะอันที่สำคัญ ๆ และอธิบายคร่าว ๆ ให้ฟังกันครับ

Front-End Developer ควรรู้อะไรบ้าง

หลายคนอาจจะไม่ชินกับศัพท์คำนี้ (Front-End Developer) จะอธิบายให้ฟังกันก่อนนะครับ

การทำเว็บไซต์เว็บนึงแบ่งได้ง่าย ๆ เป็น 2 ส่วน คือ Front-End (สิ่งที่แสดงผลบนบราวเซอร์ คือ HTML, CSS, Javascript) กับ Back-End (ส่วนประมวลผล หรือโปรแกรมมิ่งนั่นเอง เช่น PHP, Ruby)

เพราะฉะนั้น Front-End Developer จะเป็นคนที่สามารถเขียน HTML, CSS และ Javascript ได้คล่องเพื่อทำให้การแสดงผลบนเว็บบราวเซอร์ออกมาสวยครับ คนที่ทำงานด้านนี้อาจจะดีไซน์เว็บไซต์ได้ดีด้วย (หรืออาจทำไม่ได้เลยก็ไม่แปลกครับ) เช่นเดียวกับ Web Designer ที่ถ้าทำงาน Front-End ได้ด้วยก็จะหรูมาก แต่ทำไม่ได้ก็ไม่ผิดอะไรครับ

มาดูกันว่าสิ่งที่ควรรู้มีอะไรบ้าง

• HTML4 / XHTML / HTML5
  HTML4 กับ XHTML จะคล้าย ๆ กัน ส่วน HTML5 ก็จะเปลี่ยนไปในระดับนึงครับ
• CSS2 / CSS3
  CSS2 นี่ต้องรู้ครับ ส่วน CSS3 ถ้ารู้ไว้ก็ดี แต่ถึงไม่รู้ก็ยังทำงานได้ครับ
• Javascript / jQuery
  jQuery เป็น Library ของ Javascript ที่จำเป็นต้องรู้ครับ เรียนรู้ได้ง่าย + ใช้ดีมาก ส่วน Javascript แบบสด ๆ ถ้าเขียนเป็นก็ดี แต่ถ้าเขียนไม่เป็นก็ไม่ต้องฝืนครับ
• CSS Framework / CSS Grid Framework / CSS Reset
  พวก Framework นี่ไม่รู้ก็ไม่เป็นไรครับ แต่ว่าง ๆ อาจจะหามาลองใช้สักตัว เพราะถ้าใช้คล่องจะประหยัดเวลาชีวิตไปได้เยอะเลยครับ ส่วน CSS Reset นี่ต้องรู้ครับ
• UX (User Experience) / Usability
  เป็นเทคนิคในการทำเว็บให้ใช้ง่าย และคิดถึงผู้ใช้ครับผม หากไม่ทราบว่ามันคืออะไรแนะนำให้อ่านบทความ UX User Experience คืออะไร เป็นสิ่งที่ควรรู้จริง ๆ ครับ
• Website Speed / Performance Optimization
  หมายถึงการทำให้เว็บไซต์โหลดได้เร็วนั่นเองครับ เดี๋ยวนี้ Google จัดอันดับโดยคำนึงถึงความเร็วการโหลดเว็บไซต์ด้วยนะครับ
• Web Developer Tool / Firebug
  ควรจะศึกษาปลั๊กอินของเว็บบราวเซอร์ที่เอาไว้ช่วยทำเว็บไซต์ครับ ซึ่งทั้ง Firefox ทั้ง Chrome ก็มีปลั๊กอินดี ๆ เยอะแยะเลย สำหรับท่านที่ไม่รู้ว่ามีอะไรบางแนะนำให้อ่านบทความ รวมปลั๊กอิน Firefox เด็ด ๆ สำหรับทำเว็บไซต์ ครับผม
• Responsive Web Design
  เป็นเทคนิคใหม่ในการโค้ดเว็บไซต์ให้ Layout สามารถปรับเท่าขนาดจอได้ครับ คือเปิดในคอมหรือเปิดในมือถือก็ยังสามารถอ่านเนื้อหาได้ง่ายโดยไม่ต้องสร้างเว็บสำหรับ Mobile แยกออกมา
• Mobile Website Development
  หมายถึงการทำเว็บไซต์ใหม่สำหรับมือถือเลย โดยถ้าคนเข้าเว็บไซต์เราผ่านมือถือก็จะถูก redirect ไปยัง URL เว็บไซต์เวอร์ชั่นมือถือนั่นเอง เทคนิคนี้จะทำให้เราควบคุมการแสดงผลหน้าเว็บเวอร์ชั่นมือถือได้ดีกว่าเทคนิค Responsive Enhancement แต่ก็แลกกับเวลาที่ต้องทำหน้าเว็บใหม่
• Cross-Browser / Cross-Platform Development / Cross-Browser Bug (IE6)
  เป็นกรรมของคนทำเว็บไซต์ที่ 1 เว็บไซต์สามารถเปิดได้จากหลายทางเหลือเกิน ทั้ง Firefox, Chrome, Opera, Safari, iPhone, Blackberry etc. ซึ่งการทำให้สวยบนบราวเซอร์เดียวเป็นเรื่องง่าย แต่การทำให้สวยบนทุกบราวเซอร์นี่ยากเหลือเกิน โดยเฉพาะคู่ปรับอันดับ 1 อย่าง Internet Explorer 6 อย่างไรก็ตาม หากเจอปัญหากับ IE แนะนำให้อ่านบทความ เทคนิคสู้รบกับ IE6 IE7 IE8 ครับ
• CSS Preprocessor (LESS / SASS)
  หลายคนอาจเคยได้ยินชื่อ LESS CSS ผ่านหูมาบ้างนะครับ เป็นการเขียน CSS แบบผสมเทคนิคโปรแกรมมิ่งเข้าไปด้วย เช่น เก็บค่า Property ไว้ในตัวแปรแล้วนำมาใช้หลาย ๆ ที่ พอจะแก้ก็แก้ที่ตัวแปรอย่างเดียวพอ ว่าง ๆ จะนำมาเขียนวิธีใช้ให้อ่านกันครับ
• HTML5 Javascript API
  HTML5 ได้เพิ่มความสามารถมากมาย ทั้งการเล่นเพลง เล่นวีดิโอ การวาดรูป การจับที่อยู่ผู้ใช้ ซึ่งเทคนิคพวกนี้ถ้ารู้เอาไว้จะได้เปรียบมากครับ แทนที่เราจะพึ่ง Javascript Library หรือ Flash ในการทำพวกนี้ แนะนำให้ลองหันมาดู HTML5 บ้างครับ แนะนำให้อ่านบทความ ทุกอย่างที่คุณควรรู้เกี่ยวกับ HTML5 ครับผม
• CMS Theme (WordPress, Drupal, Joomla)
  CMS หมายถึงระบบจัดการเว็บสำเร็จรูปทั้งหลายครับ ซึ่งเว็บของเรา (designil.com) ก็ใช้ WordPress อยู่ การเรียนรู้วิธีทำธีมของ CMS ชื่อดังจะทำให้มีโอกาสด้านการหางานเพิ่มขึ้นไปอีกครับ โดยเฉพาะ WordPress มีการซื้อ-ขายธีมกันเยอะมาก
• Font Embedding (@font-face, Cufon, Google Web Font)
  เทคนิคในการใส่ฟ้อนต์หน้าตาประหลาด ๆ ไปใช้บนเว็บไซต์นี่สำคัญมากครับ ซึ่งก็มีหลาย ๆ เทคนิคให้เลือกใช้ หนึ่งในนั้นคือ Google Web Font ซึ่งเคยนำเสนอวิธีใช้กันไปในบทความ Google Font API คืออะไร ลองไปอ่านกันดูนะครับ ใช้ง่ายมาก ๆ เลย
• SEO (Search Engine Optimization)
  SEO คือ เทคนิคการทำเว็บไซต์ให้ Search Engine ชอบ (หลัก ๆ คือ Google) ซึ่งก็มีเทคนิคหลาย ๆ แบบทั้งสายมืดและสายสว่างครับ อย่างน้อยเราควรจะรู้พื้นฐาน SEO นิดหน่อยเพื่อให้เว็บไซต์ออกมาแล้ว Search Engine ไม่รังเกียจ สำหรับท่านที่ใช้ WordPress ลองอ่านบทความ เทคนิคจูน SEO ของ WordPress ให้เทพ ดูครับ รับรองว่ามีประโยชน์แน่นอน

หัวข้อต่าง ๆ ที่ลิสต์ไว้ได้ลองกันหมดหรือยังครับ ถ้าลองหมดแล้วและทำได้ดีทุกอัน ยอมรับว่าความสามารถด้าน Front-End ของคุณอยู่ในระดับสูง หางานได้สบายเลยครับ

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

ตอนนี้หากท่านใดติดตามข่าวสารเว็บดีไซน์ใหม่ ๆ จะเห็นว่ามีเทคนิค HTML5, CSS3 เท่ ๆ ใช้งานง่าย ๆ ออกมาเยอะมาก  โดยเฉพาะ CSS3 นี่น่าจะเป็นสวรรค์ของ Web Designer อย่างเรา ๆ กันเลย

ท่านใดที่ไม่ค่อยได้ติดตามข่าวสารเกี่ยวกับการออกแบบเว็บไซต์ใหม่ ๆ แนะนำให้แวะไปที่ Fanpage ของ DesignIL ครับ ผมจะนำบทความที่น่าอ่าน หรือของฟรีดี ๆ เอามาแจกกันเรื่อย ๆ ครับ

จนถึงตอนนี้ ศัตรูอันยาวนานของนักออกแบบเว็บไซต์ ที่ชื่อว่า Internet Explorer 6 ก็ยังตามรังควานเราอยู่ครับ แน่นอนว่าด้วยความเก่าของมัน มันจึงไม่รองรับ HTML5, CSS3 เท่ ๆ ที่เราอยากใช้เลยครับ (แค่ CSS 2 ก็เรนเดอร์แปลกกว่าชาวบ้านแล้ว)

บทความนี้จึงเขียนขึ้นมาโดยรวบรวมจากทั้งประสบการณ์ และบทความต่าง ๆ ที่ผมได้อ่าน เพื่อใช้วางแผนต่อสู้กับ IE เวอร์ชั่นเก่า ๆ ครับ เพราะเว็บบราวเซอร์ (Web Browser - โปรแกรมที่ใช้เปิดเว็บไซต์) ตระกูล Internet Explorer นี่จะเริ่มรองรับ HTML5 กับ CSS3 จริง ๆ จัง ๆ ที่ IE9 นู่นเลย

ผมจะเขียนโดยแบ่งเป็น 2 ตอนครับ ตอนที่ 1 นี้จะเปิดเผยเทคนิค CSS, Javascript และวิธีการเช็คหน้าเว็บที่เรนเดอร์ใน IE เวอร์ชั่นเก่า ๆ ว่าเน่าไม่เน่ายังไงบ้าง ส่วนตอนที่ 2 จะพูดถึงการจัดการลูกค้าที่ต้องการให้เว็บรองรับ IE เวอร์ชั่นเก่าครับ (โดยเฉพาะ IE6)

เคลียร์สนามรบด้วย CSS Reset

หลาย ๆ คนอาจจะทราบกันอยู่แล้วว่า Web Browser แต่ละตัวเนี่ยจะกำหนด CSS พื้นฐานไม่เหมือนกัน เช่น Google Chrome อาจจะกำหนดขนาดฟ้อนต์เริ่มต้นไว้ใหญ่กว่า Internet Explorer(สมมตินะครับ)

CSS Reset เป็นชื่อที่เราใช้เรียกไฟล์ CSS ที่รวมกฎพื้นฐานต่าง ๆ เพื่อจะไปเขียนทับกฎพื้นฐานของแต่ละบราวเซอร์ ทำให้ทุกบราวเซอร์ใช้กฎ CSS พื้นฐานชุดเดียวกันนั่นเอง

โดยไฟล์ตระกูล CSS Reset ก็มีออกมาของหลายเจ้าให้เลือกใช้ครับ อันที่ดัง ๆ ที่คนใช้กันบ่อย ๆ คือEric Meyer CSS Reset (ปกติผมใช้ตัวนี้), HTML5Doctor, Blueprint Reset.css (Blueprint เป็น CSS Framework ที่ดังมาก ๆ) เลือกใช้กันได้ตามสะดวกเลยครับ

ปิดจุดอ่อนของ IE6 ด้วย IE9.js

อันนี้เป็นเครื่องมือที่อยากแนะนำมากครับ เป็น Javascript ที่ช่วยแก้บั๊ก HTML, CSS บางส่วนของ IE6-8 ที่เราเจอกันประจำ (โดยเฉพาะ IE6) และยังเอาไว้แก้ปัญหา PNG พื้นหลังไม่ใสใน IE6 ได้ด้วยครับ สรุปว่าโปรเจคไหนที่ลูกค้าอยากให้ซัพพอร์ท IE เวอร์ชั่นเก่าแนะนำให้แปะอันนี้ไปก่อนเลย

เดิมทีสคริปต์นี้ชื่อ IE7.js ครับ เอาไว้ทำให้ IE6 เรนเดอร์เว็บไซต์ออกมาใกล้เคียงกับ IE7 ซึ่งคนเขียนเค้าได้พัฒนาต่อมาเป็น IE8.js และ IE9.js ตามลำดับครับ ให้เลือกใช้อันใดอันหนึ่งเท่านั้นนะครับ ผมแนะนำให้ใช้ IE9.js ไปเลย จะได้เรนเดอร์ออกมาดีที่สุดครับ

สามารถดาวน์โหลดได้ที่ Google Code: IE7.js เลยครับ อยากได้ IE8 หรือ IE9 ก็โหลดได้จากในเว็บนั้นเลย อย่าลืมอ่านตรงหัวข้อ Usage ด้วยครับ เป็นการอธิบายวิธีใช้ให้ถูกต้อง

สอน IE เก่า ๆ ให้เรนเดอร์ CSS3 ด้วย Library ต่าง ๆ

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

CSS3PIE เป็นเครื่องมือสำหรับทำให้ IE6-8 เรนเดอร์ CSS3 สวย ๆ ต่าง ๆ ได้ครับ เช่น border-radius (ทำกรอบมน) ที่หลาย ๆ คนชอบใช้กัน ลองดู ฟังก์ชั่นที่ CSS3PIE รองรับ กันก่อนเลยครับ

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

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

รวมวิธีดูหน้าเว็บไซต์เรนเดอร์ใน IE เวอร์ชั่นเก่า

มาถึงปัญหาสำคัญสำหรับคนเขียน HTML/CSS กันเลยครับ ว่าจะเช็คหน้าเว็บไซต์ใน Internet Explorer เวอร์ชั่นเก่า ๆ ได้ยังไงในเครื่องที่ IE เป็นเวอร์ชั่น 8 เวอร์ชั่น 9 กันแล้ว หรือแม้แต่ใน Mac OS ที่ไม่มี IE ใช้ (จริง ๆ มี IE5 for Mac นะครับถ้าจำไม่ผิด)

ลองดูกันว่ามีวิธีไหนน่าสนใจบ้างในการดูเว็บไซต์เราว่า เปิดใน IE เวอร์ชั่นเก่าแล้วจะเน่ามั้ย

เครื่องมือที่หลาย ๆ คนน่าจะเคยใช้กัน น่าจะเป็น IETester และ MultipleIE ครับ ซึ่งจะมีปัญหาตรงที่เรนเดอร์ได้ไม่ตรงตามจริงครับ หลายท่านอาจจะเคยเจอปัญหานี้มากับตัวแล้ว จึงไม่แนะนำให้ใช้ครับ อีกอย่างคือ Javascript Engine ที่ใช้จะไม่ตรงตามจริงครับ ทำให้เวลาเทสพวก Interaction อาจไม่ตรงกับบราวเซอร์จริง

โปรแกรมที่แนะนำ คือ  IE Collection ครับ การใช้งานจะเหมือนกับ MultipleIE คือเลือกลง Internet Explorer เวอร์ชั่นที่เราต้องการทดสอบได้เลย โดยมีให้ลงตั้งแต่ IE 1.0 เลยทีเดียว (แต่ใครจะไปลงละนั่น) นอกจากนั้น Javascript Engine ที่ใช้ก็เป็นตัวต้นฉบับ ทำให้แน่ใจได้ว่าเรนเดอร์ได้ตรงตามจริง และตรวจเช็ค Interaction ได้ตามจริงเลยครับ

ถ้าเราต้องการเทสเว็บไซต์แบบต้องการแค่ดูว่าเรนเดอร์ออกมาแล้วเป็นอย่างไร ไม่สนใจเรื่อง Interaction บนเว็บไซต์ แนะนำให้ใช้ Browserlab ของ Adobe ครับ อันนี้จะเป็นเครื่องมือออนไลน์สำหรับเรนเดอร์หน้าเว็บไซต์ได้หลายบราวเซอร์ เหมาะมากสำหรับคนที่ใช้ Mac OS ด้วยครับ

สำหรับท่านที่ใช้ Windows และมี IE9 ลงอยู่ ในกรณีที่จะเทสเรนเดอร์เว็บใน IE7-8 สามารถให้Developer Tools ช่วยได้ครับ โดยเปิด IE9 แล้วกด F12 ก็จะมี Developer Tools เด้งขึ้นมา ให้คลิกตรง Browser Mode แล้วเปลี่ยนเป็น Internet Explorer 7 หรือ Internet Explorer 8 ครับ

บทความอ้างอิง และบทความต่าง ๆ ที่น่าอ่าน

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

• Reliable Cross-Browser Testing Part 1 – Smashing Magazine
• CSS Differences in Internet Explorer 6, 7, and 8 – Smashing Magazine
• CSS Reset for HTML5? – Stack Overflow

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

หมายเหตุ: บทความนี้เขียนโดย Guest Writer @jirayu ครับ

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

เอาเถอะ  วันนี้ผมจะเริ่มซีรี่ย์ของบทความบนบล็อก (ซึ่งได้ข่าวว่าซีรี่ย์เก่าที่เริ่มไว้ก็ยังไม่ได้ทำต่อ) ว่าด้วยการจัดหน้าและตกแต่งเนื้อหาบนหน้าเว็บด้วย HTML

หลายคนอาจจะคิดว่าการทำเรื่องพวกนี้อาจจะไม่จำเป็น  เพราะปัจจุบันเราใช้ CMS สำเร็จรูป (เช่น WordPress) กันแทบทั้งนั้น  การจัดหน้าและตกแต่งเนื้อหาก็ใช้ RTE ที่มากับ CMS เอา (หรืออย่าง Drupal ก็อาจจะใช้ markdown ได้) แล้วการจัดหน้าเองนั้นจำเป็นอย่างไร?

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

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

แท็กที่ใช้บ่อย

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

• <div> หลักๆคือใช้กำหนดเป็นพื้นที่ทั้งหมดของเนื้อหา  และใช้ในการหุ้มออพเจ็กท์บางอย่างในเนื้อหาด้วย (เช่นภาพหรือวิดีโอ)  และในบางกรณี  ก็ใช้สำหรับการทำเนื้อหาที่มีหลายคอลัมน์ด้วย
• <p> แท็ก p นั้นหมายถึง paragraph หรือย่อหน้า  ในแท็ก p นี้หลักๆผมจะใช้กำหนดความสูงของบรรทัดและระยะห่างระหว่างย่อหน้า
• <h1> – <h6> เป็นแท็กที่ใช้กำหนดหัวเรื่อง (เช่นตรง “แท็กที่ใช้บ่อย” ซึ่งผมกำหนดเป็น h2 เอาไว้) ซึ่งโดยปกติมันจะเรียงขนาดจากใหญ่สุด (h1) ไปหาเล็กสุด (h6) ซึ่งนั่นหมายถึงระดับความสำคัญของหัวเรื่องจากมากไปน้อยนั่นเอง
• <hr> มีไว้เพื่อขีดเส้นคั่นหน้า (บางคนก็เอาไว้แยกระหว่างเนื้อหาและแหล่งอ้างอิง)
• <b> หรือ <strong> เป็นแท็กที่ใช้ทำให้ตัวหนังสือแสดงผลเป็นตัวหนา  จะถามว่า p และ strong นั้นต่างกันอย่างไร  คือ strong นั้นจะใช้เน้นเข้มในกรณีที่ต้องการสื่อความหมายที่สำคัญกว่าปกติทั่วไป  ส่วน b นั้นใช้ในกรณีตกแต่งเสียมากกว่า  แต่เอาเข้าจริงใช้อันไหนมันก็เหมือนๆกันแหละครับ
• <i> หรือ <em> เป็นแท็กที่ใช้ทำให้ตัวหนังสือแสดงผลเป็นตัวเอียง  ควารมต่างของมันเหมือนกับ b และ strong นั่นแหละ
• <u> เป็นแท็กสำหรับขีดเส้นใต้ให้ข้อความ
• <span> ใช้หุ้มข้อความในส่วนที่เราจะทำอะไรพิเศษให้มัน  เช่นไฮไลต์  เปลี่ยนสีตัวอักษร  ลงเงา  บลาๆๆ
• <blockquote> ใช้ในการอ้างอิงคำพูด (สมัยก่อนผมใช้ div เอาดิบๆเลย ฮา)

แท็กที่กล่าวมานี้คือแท็กที่ใช้บ่อยๆครับ  ซึ่งในนี้จะมีแท็ก div, p, และ span ที่มักจะใช้ร่วมกับ CSS ในการแต่งหน้าทาปากให้มันด้วย (เช่นที่บอกไว้คือกำหนดระยะห่างย่อหน้า ความสูงบรรทัด  ไฮไลต์  ลงเงา  และอื่นๆ)

อันที่จริงยังมีแท็กอื่นๆที่ใช้ในการตกแต่งและจัดหน้าข้อความอีก และบางทีก็ออกจะซ้ำๆกับข้างบนนั่น  เช่น <cite> ที่ออกมาเป็นตัวเอียง หรือ <ins> ที่ออกมาเป็นขีดเส้นใต้ (ซึ่งมันใช้ร่วมกับ <del> เพื่อขีดฆ่า  แล้วใช้ <ins> เน้นคำที่แก้ลงไปแทน) หรือ <abbr> ที่ใช้กำหนดคำเต็มของตัวย่อ  (ซึ่งจะคล้ายกับ <acronym> ที่ใช้กำหนดคำเต็มเช่นกัน  แต่กรณี acronym จะใช้กำหนดให้คำที่ออกเสียงได้ เช่น ASAP หรือ NATO ในขณะที่ abbr จะใช้กับตัวย่อที่ไม่มีการออกเสียง  เช่น BKK)  หรืออย่างเช่น <sub> และ <sup> ที่ใชำเขียนตัวห้อย (เช่นเลขฐาน) หรือตัวยก (เช่นเลขชี้กำลัง)

โครงสร้างเนื้อหา

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

สำหรับโครงสร้างเนื้อหาที่ผมมองว่ามันเป็นระัเบียบ  จะเป็นประมาณนี้ครับ

</pre>
<div>
<h1>Content title</h1>
 ...

 ...

<hr />

<h1>Content title 2</h1>
 ...

 ...</div>
<pre>

จากตัวอย่าง  ผมได้กำหนดให้ div เป็นพื้นที่ของเนื้อหาทั้งหมด  กำหนดให้ h1 เป็นหัวข้อเนื้อหา  กำหนดให้ p เป็นเนื้อหาแต่ละย่อหน้า  และให้ hr เป็นตัวเส้นขีดแยกเนื้อหาสองส่วนออกจากกัน

ซึ่งโค๊ดตัวอย่างด้านบน  เมื่อนำเนื้อหามาใส่แล้ว  จะออกมาเป็นอย่างตัวอย่างนี้ครับ example01.html

การเลือกใช้แท็ก

อีกเรื่องที่ค่อนข้างสำคัญ (ในสายตาของผม) คือการเลือกใช้แท็กให้เหมาะสมกับเนื้อหาจุดนั้นๆ

ในสายตาปกติของเรา  อาจจะแยกความต่างของข้อความที่ครอบด้วย <strong> กับการครอบด้วย <span> ที่ใช้ CSS ทำตัวหนาไม่ออก  แต่ว่าโปรแกรมจำพวก Screen Reader (ซึ่งเป็นโปรแกรมที่ผู้พิการทางสายตาใช้อ่านเว็บ)  และบรรดา Search Engine ทั้งหลาย  จะสัมผัสได้ในความต่างครับ

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

ส่งท้ายตอนแรก

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

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

อย่าลืมติดตามกันนะครับ  สวัสดีครับ

ปล.บทความนี้เขียนเรื่อยๆ  ไม่มีจำนวนตอนที่ชัดเจนครับ

วันนี้มี Free WordPress Theme มาแจกกันฟรี ๆ ครับ สำหรับท่านที่พยายามหาธีมเวิร์ดเพรสสวย ๆ มาใช้งาน แต่พอลองหาดูใน WordPress.org แล้วไม่ค่อยมีธีมสวย ๆ เลย วันนี้รับรองว่าได้เจอธีมเจ๋ง ๆ เอาไปใช้ในเว็บไซต์ของคุณแน่นอนครับ

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

จึงอยากแนะนำให้เวลาโหลด Theme ฟรี ให้เลือกดาวน์โหลดจากเว็บไซต์ของคนทำธีมตัวจริง หรือเว็บไซต์ที่เชื่อถือได้ (เช่น WordPress.org หรือ Themeforest.net) จะปลอดภัยที่สุดครับ แน่นอนว่าบางธีมจะติด Credit ของคนทำธีมมาด้วยใน Footer เว็บไซต์ ก็อยากให้เราให้เกียรติคนทำธีมนิดนึงโดยการไม่เอา Credit ออกครับ (บางธีมถึงกับใส่โค้ด php ป้องกันการเอาออกด้วย)

อันนี้คิดว่าผู้อ่านหลาย ๆ ท่านน่าจะเข้าใจกันอยู่แล้วกับความเหนื่อยยากของคนดีไซน์และคนทำธีมครับ กว่าจะออกมาเป็น WordPress Theme 1 ธีมไม่ใช่ง่าย ๆ เหมือนกัน แต่คนที่เอาแต่ทำ SEO กลับไม่สนใจ คิดว่าการมี Link ออกแม้แต่ลิงค์เดียวในหน้าเว็บไซต์เป็นบาปมหัน ก็ลบออกกันหน้าด้าน ๆ เลย อันนี้ก็น่าเหนื่อยใจเหมือนกันครับ

ธีมที่จะแจกในวันนี้คัดสรรมาเฉพาะธีมสวย ๆ คุณภาพดีทั้งนั้นครับ และที่สำคัญคือแจกฟรีแบบถูกกฎหมายด้วย โดยมี Themes หลากหลายสไตล์ตั้งแต่แนว Minimalists (Minimal คือแนวชิว ๆ สบาย ๆ โล่ง ๆ โปร่ง ๆ แต่ดูดี) ไปจนถึงแนวกราฟฟิกดีไซน์หรูอลังการ แน่นอนว่าทุกธีม Support WP เวอร์ชั่น 3.0+ ครับ

มาดูกันดีกว่าว่าแบ่งธีมเป็นหัวข้ออะไรบ้าง:

• Portfolios, Galleries And Showcases – แน่นอนว่า Portfolio WordPress Theme เป็นที่นิยมมากครับ เพื่อเอามาใช้ทำเว็บรวมผลงานตัวเอง หัวข้อนี้เลยรวมธีม WordPress หลากหลายแบบสำหรับเอามาทำเว็บโชว์ผลงาน เหมาะมากสำหรับคนทำงานสายกราฟฟิก หรือคนที่อยากทำเว็บที่มีรูปประกอบเยอะ
• Business And Corporate Websites – รวมธีมที่ดูน่าเชื่อถือ เหมาะกับทำเว็บบริษัท หรือสำหรับทำธุรกิจออนไลน์ครับ
• Minimalist Themes – สำหรับคนที่ชอบอะไรโล่ง โปร่งสบาย รายละเอียดน้อย ธีมแนวนี้เหมาะกับเว็บที่ต้องการให้คนอ่านเน้นด้านเนื้อหา (แต่บางครั้งผมก็มองว่ามันออกจะจืดชืดไปหน่อย) หรือเว็บที่เน้นรูปใหญ่ ๆ เยอะ ๆ ครับ เพราะรูปจะเด่นขึ้นมาจากหน้าเว็บเลย เหมาะมากสำหรับนักถ่ายภาพ
• Blogs And Personal Websites - รวมธีมสำหรับเว็บบลอค หรือเว็บส่วนตัว ใครที่เขียนบลอคอยู่พลาดไม่ได้ครับ อาจจะได้เจอกับธีมใหม่ของบลอคคุณในนี้ก็ได้
• Shopping/Ecommerce Theme – ธีมสำหรับเว็บขายของ แนว E-Commerce ใครว่า WordPress เอาไว้เขียนบลอคอย่างเดียวครับ มันเอามาใช้ได้หลากหลายมากเลยนะ
• Mobile-Optimized Themes – ธีมสำหรับ Mobile ครับ เหมาะมากถ้าเอาไปเปิดใน Smartphone ต่าง ๆ (iPhone, มือถือ Android ต่าง ๆ เช่น HTC, Samsung)
• Magazine-Layout Themes – อีกหนึ่งประเภทธีมที่ขายดีครับ Magazine WordPress Theme เหมาะกับเว็บอารมณ์นิตยสาร ถ้าคิดไม่ออกให้นึกถึงบลอคปกติ แต่ว่าทุกโพสจะมีภาพประกอบสวยงาม ธีมพวกนี้จะโชว์โพสต่าง ๆ ให้น่าสนใจที่สุดเพื่อให้คนคลิกเข้าไปอ่านครับ
• “Coming Soon” And Landing Pages – ธีมแนวนี้ได้รับความนิยมมากขึ้นเพราะธุรกิจออนไลน์สมัยนี้นิยมทำ Landing Page เพื่อให้คนมาลงอีเมลของตัวเองไว้ (เอาไว้ดูยอดว่ามีคนสนใจเยอะแค่ไหน + อีเมลหาคนที่ลงชื่อไว้เมื่อถึงวันเปิดเว็บ) ซึ่งธีมแนวนี้จะวัดกันที่ดีไซน์และความง่ายในการลงอีเมลครับ เพื่อให้ยอดคนลงชื่อสูงที่สุด
• Theme Development Frameworks And Bare-Bone Themes – รวมพวก Theme Framework สำหรับคนทำธีมครับ ให้ทำธีมออกมาได้ง่ายขึ้น ใครอยากลองทำธีมเองจะศึกษาไว้ก็ไม่เสียหายครับ

พอรู้แล้วว่าแต่ละหัวข้อเกี่ยวกับอะไรกันบ้าง ก็ไปดาวน์โหลดธีมกันเลยครับ !

Download Free WordPress Theme แห่งปี 2011

หากเลือกธีมได้แล้วแต่ขาดปลั๊กอิน คลิกเลย รวมปลั๊กอิน (Plugin) เจ๋ง ๆ ของ WordPress แห่งปี 2011 !!

สวัสดีครับ วันนี้ไปเจอ Tutorial (บทความสอน) ทำ Effect ตัวหนังสือ ใน Photoshop เจ๋ง ๆ เลยเอามาแบ่งปันกัน ปกติก็เจอใน Feed เป็นธรรมดาอยู่แล้ว แต่ส่วนใหญ่คุณภาพไม่ค่อยเวิร์กแบบสุด ๆ ครับ เลยจะโพสใน @designil บน Twitter ซะมากกว่า วันนี้เจออันที่คิดว่าเด็ดจริง ๆ เลยเอามาแบ่งปันกันครับ

บทความสอนมีอยู่ 10 บทความครับ ซึ่งก็จะมีดีไซน์หลายแนว ทั้งแบบ น่ารัก สดใส ไปจนถึงแนวหรู ๆ ตัวหนังสือ 3D หรือตัวหนังสือแนวโลกอนาคต (Futuristic) เทคนิคในการตกแต่งตัวอักษรพวกนี้ ยังเอาไปใช้กับงานประเภทกราฟฟิกดีไซน์ (Graphic Design) ได้ด้วย เรียกได้ว่าอ่านทีเดียวได้ประโยชน์สองต่อเลย (แถมงานใน Tutorial นี้ก็สวยพอที่จะเอาไปใช้กับงานจริงได้สบายเลยครับ)

ไปดูกันเลยครับว่ามี Tutorial อะไรกันบ้าง:

รวม 10 บทความสอนแต่งตัวอักษรใน Photoshop

สวัสดีครับ ขออภัยที่ไม่ค่อยได้มาเขียนนะครับ เพราะหลังจากปิดเทอมก็ต้องรีบปั่นงานให้ทัน Deadline ไม่ได้หยุดพักกันเลยทีเดียว

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

บทความนี้จะแบ่งเป็นหลายส่วน ภาค 1 นี้จะพูดถึงโปรแกรมที่ใช้เขียนโค้ด HTML & CSS กันก่อนว่าผมใช้โปรแกรมอะไร ต้องขออภัยคนที่ใช้ Mac OS ด้วยนะครับเพราะผมใช้ Windows เลยจะแนะนำแค่โปรแกรม Windows ครับผม

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

โปรแกรมเขียนโค้ดที่ดีควรทำอะไรได้บ้าง

• Syntax-Highlight
  ใส่สีที่แตกต่างกันบนแท็ก HTML / CSS ช่วยให้โค้ดอ่านง่ายขึ้นครับ ตอนอ่านจะได้ไม่สับสน
• File Explorer
  หน้าต่างลิสต์โฟลเดอร์ / ไฟล์เอาไว้เลือกไฟล์ที่จะเปิดมาแก้ได้ง่าย ๆ เหมาะกับงานที่มีหลาย ๆ ไฟล์ เช่น ทำธีม WordPress
• Project Management
  แบ่งงานเป็นโปรเจค เหมาะกับคนที่รับทีละหลาย ๆ งาน ข้อดีคือเราจะแยกแยะได้ง่ายเวลาต้องทำโปรเจคนู้นแล้วกลับมาทำโปรเจคนี้ต่อ โปรแกรมจะเปิดไฟล์ / โฟลเดอร์ของโปรเจคนั้น ๆ ขึ้นมาให้เลย
• Themes
  โปรแกรมเปลี่ยนธีม (สีของ Background / สีของ Syntax-Highlight) ได้ อันนี้จริง ๆ แล้วแต่คนชอบครับ เพราะผมชอบเขียนโค้ดบน Background สีเข้ม ถ้าเป็น Background สีขาวมันดูแสบตา
• Autocomplete
  เป็นการเดาโค้ดได้ว่าเราจะพิมพ์อะไรต่อ แล้วเติมให้เลยครับ เช่นว่าผมจะพิมพ์ <div>บลาๆ</div> แต่แค่พิมพ์ถึง </ โปรแกรมก็รู้แล้วว่าจะพิมพ์ </div> เป็นต้นครับ
  อีกตัวอย่างนึงคือ พอพิมพ์โค้ด CSS ว่า list-style: เสร็จก็จะมี properties ต่าง ๆ ที่ไว้ใส่ใน list-style: โผล่ขึ้นมาให้เห็นเลย
• Multiple Files Opening
  เปิดได้ทีละหลาย ๆ ไฟล์พร้อมกัน โปรแกรมส่วนใหญ่จะทำได้อยู่แล้วครับ มีประโยชน์มากสำหรับงานใหญ่ ๆ เช่นงานแนว Web Application เราก็เลือกเปิดเฉพาะไฟล์ที่เกี่ยวกับฟังก์ชั่นที่กำลังทำอยู่ก็พอครับ
• Free or Affordable Price
  อันนี้สำคัญที่สุดเลยครับ (สำหรับคนที่ทำงานด้านนี้จริงจัง) โปรแกรมควรจะมีราคาในระดับที่รับได้ หรือถ้าฟรีเลยก็ยิ่งดีครับ ช่วยลด Cost ในการทำเว็บดีไซน์ได้มากเลย

ใช้โปรแกรมเขียนโค้ด HTML CSS ตัวไหนมาบ้าง แต่ละตัวเป็นยังไง?

ตอนทำเว็บแรกเริ่มเลยผมใช้ EditPlus ครับ เชื่อว่าน่าจะเคยได้ยินกัน และบางคนคงใช้อยู่ด้วย แต่มันเป็นโปรแกรมเสียตังค์ครับ และฟีเจอร์ต่าง ๆ ของโปรแกรมสามารถหาได้ในโปรแกรมเขียนโค้ดแจกฟรีทั่วไปแล้วครับ (ยกเว้นเอามา Compile Java ซึ่งสะดวกดี… แต่ไม่เกี่ยวกับ HTML CSS นี่เนอะ)

ต่อมาหลังจากผมได้รู้จัก Notepad++ ก็ใช้โปรแกรมนี้ทำงานมายาวเลยครับ ข้อดีคือธีมสวย (ชอบธีม Monokai ของมันมาก) โปรแกรมเบา โหลดเร็ว ฟังก์ชั่นพร้อมมาก ๆ แต่ข้อเสียคือทำเป็นโปรเจคไม่ได้ และความสามารถด้าน Autocomplete ไม่ค่อยเวิร์กครับ (เช่นว่าไฟล์ .php จะไม่มี autocomplete โค้ด HTML ให้เลย)

หลังจากนั้นผมก็หนีไปใช้ Mac OS ชั่วคราวครับ ใช้โปรแกรมชื่อ Coda ที่อินเตอร์เฟซสวยงาม + FTP เข้าไปแก้ไฟล์ได้เลย ชอบมากครับ ก่อนจะมาเจอ Espresso ที่ชอบระบบโปรเจคของโปรแกรมนี้มากกว่า ซึ่งใช้ไปสักพักนึง Macbook พังแถม Apple ไม่แคร์ครับ เลยกลับมาใช้ Windows

แน่นอนว่าใช้ Notepad++ เหมือนเดิมครับ โปรแกรมนี้โหลดเร็วดีชอบมากครับ เปลี่ยนธีมได้ด้วย แต่ด้วยเรื่อง Autocomplete นี่แหละที่เป็นปัญหาใหญ่ (จริง ๆ ก็ไม่ใหญ่ครับ แต่ถ้า Autocomplete ได้รับรองงานเร็วกว่าเดิมมากครับ)

เพื่อนแนะนำ Dreamweaver ให้ลองใช้ครับ ส่วนตัวไม่ชอบ Dreamweaver ตรงที่ดูมันใหญ่ โหลดช้า และฝังใจมาตั้งแต่ตอนเรียนว่าโปรแกรมนี้ไว้ใช้ด้าน WYSIWYG (What you see is what you get คือตกแต่งเหมือนใน Word เลย ไม่ต้องรู้โค้ด จิ้ม ๆ เครื่องมืออย่างเดียว)

อย่างสุดท้ายที่ไม่ชอบคือ มันเปลี่ยนธีมไม่ได้ครับ ไม่ชอบเขียนโค้ดใน Background ขาวครับ (แอบ Art 55)

แต่มารู้ทีหลังว่า Dreamweaver ทำธีมเองได้นะครับ เพื่อนคนที่แนะนำทำธีมสีดำมาให้ใช้เลย ก็เลยเอาไปใช้กับโปรเจค Web Application เว็บนึงครับ ชอบมาก ๆ โปรแกรมมี File Explorer ให้พร้อม และ Autocomplete ได้เทพมาก เสียอย่างเดียวตรงที่ราคาออกจะสูงไปนิดครับ

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

Autocomplete ทำได้เนี้ยบมาก แบ่งไฟล์เป็นโปรเจคจัดการได้ง่ายดี มีธีมให้เลือกใช้หลากหลายตามความชอบ โปรแกรมไม่หนักเกินไป ที่สำคัญมันฟรีด้วย ตอนนี้เอาไปใช้กับโปรเจคนึงเสร็จไปแล้ว คิดว่างานต่อ ๆ ไปก็จะใช้บริการโปรแกรมนี้ต่อครับ

สนใจ Komodo Edit 6 ไปหาได้ที่ไหน?

สำหรับท่านที่สนใจดาวน์โหลดโปรแกรมนี้ไปลองใช้กัน ไปที่
Komodo Edit: Free Open Source Editor

กดที่ปุ่ม Download Komodo Edit นะครับ ส่วนโปรแกรม Komodo IDE จะเป็นโปรแกรมเสียตังค์ของตระกูล Komodo ครับ เราเขียนโค้ด HTML & CSS ใช้แต่ตัว Edit ก็พอครับ

สำหรับท่านที่ต้องการดาวน์โหลดธีมสำหรับใช้ใน Komodo Edit เข้าไปโหลดที่: Kolormodo.com ได้เลยครับ มีธีมสวย ๆ ให้เลือกโหลดไปใช้กันฟรี ๆ

แล้วถ้าเขียน PHP ใช้โปรแกรมอะไรดี?

โปรแกรม Komodo Edit ไว้เขียน PHP ได้ด้วยครับ และมี Autocomplete เรียบร้อยเลย เรียกได้ว่าโปรแกรมเดียวทำได้ทั้ง Backend / Frontend เลยครับ

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

ขอบคุณที่ติดตามอ่านมาจนจบคร้าบ ตอนต่อไปจะพูดถึงเครื่องมือไว้เทสดีไซน์ใน Browser ต่าง ๆ

เพียงไม่กี่ปีที่ผ่านมา การสร้างเว็บไซต์ส่วนตัวเริ่มเป็นมาตรฐานด้วยการเขียนแบบ HTML กับ CSS แต่รู้หรือไม่? ปัจจุบันนั้น เว็บไซต์ทั้งหมดกว่า 14% นั้นใช้ระบบเว็บไซต์ของ WordPress กันทั้งนั้น

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

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

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

ระบบ Permalink Structure for URLs

คุณสามารถหาระบบนี้โดยการปรับที่ Setting > Permalinks ซึ่งระบบ Permalink นี้จะทำให้คุณสามารถสร้าง URL เฉพาะให้กับ WordPress ของคุณ

โดยปกติ หน้าตา URL ของโพสใน WordPress จะเป็นแบบนี้

http://example.com/?p=123

โดยมุมมองของระบบ SEO นั้น ไม่สามารถวิเคราะห์ URL รูปแบบนี้ได้ เพราะหัว URL นั้นไม่มีคีย์เวิร์ด

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

ซึ่งบางระบบของ SEO ส่วนใหญ่จะมีผลกับโครงสร้าง URL แบบ single-level ของบล็อคโพส ยกตัวอย่างเช่นระหว่าง URL 2 อัน จากด้านล่างนี้

http://example.com/post-name/

กับ

http://example.com/post-category/post-name/

อันแรกเป็น URL แบบ single-level ของบล็อคโพส, เราสามารถปรับใน WordPress ตรงแผงเมนู Permalink คุณจะเห็นส่วนที่เขียนว่า Common settings ให้เลือกแบบ Custom Structure และใส่ข้อความนี้ลงไป

/%postname%/

เมื่อเลือกเสร็จแล้ว URL ของบล็อคโพสคุณจะขึ้นลักษณะนี้

http://example.com/post-name/

ระบบ Title Tag

แท็ค <title> ในภาษา HTML นั้นมีความสำคัญต่อระบบของ SEO มาก เพราะเว็บเพจทุกหน้าย่อมต้องมีแท็ค <title> เสมอ

ผลของระบบเซิร์จเอนจิ้นนั้น จะนำแท็ค <title> แสดงขึ้นในการค้นหา ยกตัวอย่างเช่น ลองเซิจสักคำใน Google ซึ่งผลที่ได้มาจะออกมาเป็นแบบนี้

เป็นเพราะระบบการค้นหาอันดับแรกนั้นจะขึ้นอยู่กับแท็ค <title> นั่นเอง เช่นที่ผมได้ทำการค้นหาคำว่า “designil” ลงไป ก็จะขึ้นเว็บของ DesigNIL.com ขึ้นมา ก็เพราะหัวแท็ค <title> นั้นมีคำว่า “DesigNIL” อยู่นั่นเอง

<head>
<title>DesigNIL: Web Design HTML5 CSS3 Tutorial รวมความรู้เว็บดีไซน์ สอนออกแบบเว็บไซต์</title>
</head>

โดยปกติระบบของ WordPress ตรงส่วนแท็ค <title> นั้นจะขึ้นแบบ “ชื่อบล็อค » ชื่อโพส” และเป็นเช่นนั้น ระบบเซิร์จเอนจิ้นต่างๆก็จะค้นหาและเก็บข้อมูลไว้

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

เราสามารถเปลี่ยนรูปแบบของ <title> ได้ โดยทำการติดตั้งปลั๊คอินตัวเสริมชื่อ All in One SEO Pack ลงไปในระบบ ซึ่งในส่วนของเมนูปลั๊คอินนี้จะทำการเซ็ทแท็ค <title> ให้อัตโนมัติ เพื่อสามารถให้ระบบ SEO ค้นหาได้ง่ายขึ้น

ซึ่งปลั๊คอิน All in One SEO Pack สามารถหาดาวโหลดได้ที่ http://wordpress.org/extend/plugins/all-in-one-seo-pack/

Meta Tags

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

แต่อย่าลืมว่ามีข้อตกลงด้าน Human-friendly, non-spammy way อยู่ด้วย ซึ่งคีย์เวิร์ดที่จะนำมาอธิบายในหน้าเว็บนั้นควรอยู่ระหว่าง 150-160 ตัวอักษร ถ้ามากกว่านั้น ระบบเซิร์จเอนจิ้นจะตัดการค้นหานั้นออกไปหรือจนกว่าระยะเวลาการค้นหาของมันหมดลง

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

คุณสามารถใส่คีย์เวิร์ดในเมต้าแท็คบทบล็อคโพสเพื่อจัดคีย์เวิร์ดที่มีวลีสำคัญต่างๆ แต่ควรพิจารณาการจัดลำดับเซิร์จเอนจินซึ่ง Google ได้บอกไว้ว่า no longer takes meta keyword tags into account แปลได้ว่า “จะไม่ให้ความสำคัญกับ meta keyword”

ซึ่งหลายๆคนอาจกล่าวได้ว่า “มันอาจจะไม่สำคัญนักสำหรับการใช้เมต้าแท็คที่ยาว” แต่ยังมีระบบเซิร์จเอนจิ้นอื่นๆที่ใช้ระบบใกล้เคียงกับ Google อยู่ด้วย ซึ่งก็ใช้ระบบเมต้าแท็คคีย์เวิร์ดในการจัดอันดับเว็บไซต์เช่นกัน ดังนั้นผมแนะนำอย่างยิ่งในการใส่คีย์เวิร์ดอย่างรอบคอบและดีที่สุด

ซึ่งเช่นกัน คุณสามารถสร้างเมต้าแท็คคีย์เวิร์ดตามต้องการโดยใช้ปลั๊คอิน All in One SEO Pack

ใช้ noindex Meta Tag สำหรับหน้าที่ไม่ได้ใช้

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

สมมุติว่าคุณได้สร้างหน้าหมวดหมู่สำหรับบล็อคโพสหนึ่งใน URL

http://example.com/category/my-category/

กับหน้าที่เหมือนกันซึ่งดูได้จากตรงนี้

http://example.com/my-category/

ซึ่งไม่ดีแน่ ดังนั้นคุณจะทำอย่างไรต่อไป?

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

วิธีที่ง่ายที่สุดที่จะแก้ปัญหานี้คือใช้ปลั้กอิน All in One SEO Pack อีกแล้ว ในปลั้กอินนั้นจะมีตัวเลือกให้คุณกำหนดค่า noindex HTML Meta Tag ได้สามอย่างคือ Categories, Archives และ Tag Archives

ใช้ HTML Heading อย่างเหมาะสม

ส่วนใหญ่แท็ค HTML ที่ใช้ส่วนหัวคือ <h1>, <h2> , … , <h6> เพื่อแยกส่วนของเนื้อหาออกจากหัวของบทความ เป็น

วิธีที่ทำให้เนื้อหาของคุณอ่านง่ายขึ้น ไม่ใช่แค่นั้น ยังเป็นจุดสำคัญของการกำหนดคีย์เวิร์ดกับระบบจดจำเว็บไซต์ของเซิร์จเอนจิ้นต่างๆ ซึ่งแท็คส่วนหัวนี้มันมีค่ามากกว่าแท็ค HTML ทั่วๆไป (จำพวก <p> หรือ <blockquote> เป็นต้นฯ)

ซึ่งน่าแปลกที่ผู้สร้าง Themes ของ WordPress ปัจจุบันนี้ แทบทั้งหมดไม่ได้ให้ความสำคัญกับโครงสร้างเนื้อหาแบบที่ได้กล่าวข้างต้น

จากมุมมองของระบบ SEO นั้น แท็ค <h1> เป็นหัวข้อที่สำคัญมากที่สุดและควรมีเพียงแท็คนี้แท็คเดียวในหน้าเว็บ

รองลงมาคือ <h2> ซึ่งคุณสามารถมีได้หลายๆแท็คในหน้า จำพวกหัวข้อภายในเนื้อหา รองลงมาอีกคือ <h3> และ <h4> มีไว้เน้นเนื้อหาข้อความหรือแสดงข้อความให้ชัดเจนมากขึ้น (หรือเป็นข้อความคีย์เวิร์ด) ซึ่งนี่เป็นวิธีคล้ายๆกับการจัดโครงสร้างหน้าแบบนิตยสารต่างๆ

หากคุณใช้ชุด Themes ของ WordPress ที่คุณไม่ได้สร้างขึ้นมาเอง ขอให้คุณตรวจสอบแม่แบบของ Themes นั้นๆ (เช่น header.php, single.php, post.php, home.php และ page.php) เพื่อให้มั่นใจว่าเขียนรูปแบบแท็ค HTML ที่ถูกต้องและจัดโครงสร้างให้อย่างดี

ใช้ Sitemap XML

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

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

ดังนั้นการใช้ปลั๊กอิน Google XML Sitemaps ของ WordPress นั้น จะช่วยสร้าง Sitemap XML ของเว็บไซต์โดยอัตโนมัติ แถมยังมีระบบแจ้งการอัพเดทด้วยอีกเมื่อระบบเซิร์จเอนจิ้นต่างๆได้เข้ามาดูการปรับปรุง XML ของเว็บไซต์คุณ

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

** อัพเดทล่าสุด: 15/11/2011 **

WordPress Plugin: Social

• Disqus Comment System – (แนะนำ) ระบบคอมเม้นท์สุดเทพ คนตอบสามารถล็อกอินด้วย ID Facebook, Twitter ของตัวเองได้ กด Like/Dislike คอมเม้นท์ ฯลฯ เว็บไซต์ดัง ๆ หลายเว็บก็ใช้ระบบนี้ครับ ตัวอย่าง (เลื่อนลงมาดูตรงกล่องคอมเม้นท์)
• Facebook Comments – ใครไม่ถูกใจกับ Disqus อยากได้ระบบคอมเม้นท์ที่ซัพพอร์ท Facebook ล้วน ๆ ก็ใช้ตัวนี้เลย สามารถตั้งให้คอมเม้นท์ไปโผล่ในหน้า Profile ของคนคอมเม้นท์ได้ด้วย มีปุ่ม Facebook Like อยู่ด้านบนกล่องคอมเม้นท์ด้วย
• Facebook Like – สำหรับคนที่อยากใช้ Disqus แล้วก็อยากได้ปุ่ม Facebook Like ด้วย ใช้ปลั๊กอินตัวนี้เลยครับ
• SexyBookmarks – เพิ่มปุ่มแชร์บทความไปยังเว็บไซต์ดังต่าง ๆ เช่น Twitter, Facebook, Digg, Delicious แบบง่าย ๆ และดูดี
• Sociable – เอาไว้เพิ่มปุ่มแชร์บทความไปยังเว็บไซต์ดังต่าง ๆ เช่นกันครับ หน้าตาจะต่างกับตัวข้างบนนิดนึง
• Twitter @Anywhere Plus – เพิ่มของเล่นจาก Twitter เอาไว้ใส่ในเว็บไซต์เราหลายอย่าง เช่น กล่องทวีต (แบบในเว็บไซต์ Designil.com นี้), ปุ่ม Retweet, ทำให้ชื่อทวิตเตอร์ เช่น @woraperth ในโพส กลายเป็นลิงค์ไป Twitter อัตโนมติ
• Wickett Twitter Widget – เอาไว้แสดงทวีตใหม่ ๆ จาก Twitter Account ของเราในส่วน Widget (Sidebar, Footer อะไรพวกนี้)
• WP Greet Box – แสดงกล่องทักทายก่อนเริ่มบทความ คำพูดในกล่องจะเปลี่ยนไปตามต้นทางลิงค์ที่เข้ามา เช่นถ้าคนเข้ามาจาก Google มันก็จะทักว่า Hello Googler หรือถ้าเข้าจากหน้าเว็บเราปกติก็จะขึ้นลิงค์ให้ Subscribe แทน เจ๋งมาก ๆ ครับ

WordPress Plugin: เพิ่ม Functions ใหม่ ๆ

• Related Posts Thumbnails – (แนะนำ) แสดงบทความที่เนื้อหาใกล้เคียงกับบทความที่กำลังอ่านอยู่ พอคนอ่านบทความนึงจบแล้วจะได้หาอะไรอ่านต่อในเว็บเราง่าย ๆ ครับ แล้วยังแสดงรูปประกอบบทความด้วย ทำให้น่าคลิกมาก ๆ ตัวอย่าง (ดูตรง related)
• WordPress Popular Posts – อันนี้จะคล้าย ๆ กับปลั๊กอินด้านบนครับ แสดงรูปประกอบบทความได้เหมือนกัน ต่างกันที่ว่าตัวนี้จะเอาไว้ใส่ในส่วน Widget (Sidebar หรือ Footer เว็บ) ส่วนปลั๊กอินด้านบนจะแสดงใต้บทความครับ
• WP Post Ratings – คนอ่านสามารถให้คะแนนโพสของเราได้ เป็นดาว 1-5 ดวง มีบอกด้วยว่ามีคนให้คะแนนกี่คนแล้ว และคะแนนเฉลี่ยกี่ดาว
• Contact Form 7 – เอาไว้สร้างแบบฟอร์มสำหรับติดต่อเรา ปรับแต่งได้เยอะ ใช้งานง่าย
• WordPress Form Manager – (แนะนำ) เอาไว้สร้างแบบฟอร์มสำหรับติดต่อ ฟอร์มสมัครสมาชิก หรือฟอร์มแบบต่าง ๆ ได้มากมาย ทั้งยังปรับแต่งได้เยอะ ผมลองใช้แล้วชอบมาก ๆ ครับตัวนี้
• Better Author Bio – แสดงข้อมูลคนเขียนบทความนั้น ๆ ไว้ใต้บทความครับ แสดงรูป รายละเอียด และลิงค์ไป Twitter, Facebook คล้าย ๆ กล่องแสดงผู้เขียนในเว็บนี้เลย
• WP Download Monitor – เอาไว้ Upload และจัดการไฟล์สำหรับแจกจ่ายในเว็บเรา โดยตัวนี้จะช่วยนับด้วยว่ามีคนโหลดไปกี่คนแล้ว
• gTranslate – แปลเนื้อหาในเว็บไซต์เราเป็นอีก 58+ ภาษาโดยอัตโนมัติ ด้วยระบบของ Google Translate
• WPTouch – เพิ่มธีมสำหรับมือถือ (Mobile Theme) ให้เว็บไซต์เรา ทำให้เวลาคนเข้าเว็บเราด้วยมือถือ เช่น iPhone, Android จะโหลดเร็วขึ้นมาก ๆ
• Where did they go from here – ตัวนี้จะคล้าย Related post ที่เอาไว้โชว์โพสที่เนื้อหาใกล้เคียงกัน แต่ตัวนี้จะโชว์ว่าคนที่อ่านบทความนี้เค้าอ่านบทความอื่นบทความไหนบ้าง ช่วยเพิ่มทราฟฟิกให้เว็บได้ตรงจุดมากขึ้นครับ (คนเข้าไปอ่านบทความอื่นมากขึ้น)

WordPress Plugin: ตกแต่งหน้าตา Function เก่าให้น่าใช้

• WP Search Suggest – ทำให้กล่องเสิร์จใน WordPress กลายเป็น AJAX ครับ พอพิมพ์ตัวอักษรเข้าไป ยังไม่กดปุ่ม Search มันก็จะหาบทความที่เกี่ยวข้องขึ้นมาให้เลือกเลย
• Search Light – ทำกล่อง Search ให้เป็น AJAX เหมือนกับตัวด้านบน แต่อินเตอร์เฟซสวยงามน่าใช้กว่า (ถ้าชอบแบบเรียบ ๆ ก็ใช้ตัวข้างบนครับ) ตัวอย่างปลั๊กอินนี้ก็ลองพิมพ์ลงในช่องเสิร์จมุมขวาบนของเว็บไซต์นี้เลย
• WP jQuery Lightbox – เพิ่ม Effect แบบ Lightbox ให้กับรูปที่ใหญ่เกินขนาดบลอค จนต้องย่อเป็นรูปเล็กให้คลิกไปดูรูปใหญ่อีกที ถ้าใช้ปลั๊กอินนี้พอคลิกแล้วรูปจะขยายในหน้านั้นเลย
• WP Page Navi – (แนะนำ)แบ่งลิสต์บทความเป็นหน้า ๆ 1, 2, 3, 4, 5 ให้คลิกเลือกง่าย ๆ (โดยปกติจะแสดงแค่ลิงค์ Older Post ต้องคลิกเพื่อไล่ไปดูรายชื่อโพสเก่าทีละหน้า) ตัวอย่างก็ดูได้ในหน้าแรกเว็บไซต์นี้ (Designil.com) ด้านล่างเลยครับ
• Fluency Admin – ตกแต่งหน้า Admin, Login ของ WordPress ให้สวยงามขึ้น

WordPress Plugin: Media

• 1 Flash Gallery – สร้าง Gallery รูปด้วย Flash มีเอฟเฟ็กต์ต่าง ๆ มากมาย มีรูปแบบให้เลือกใช้หลากหลาย
• Nextgen Gallery – ปลั๊กอินไว้สร้าง Gallery รูปอีกตัว แต่ตัวนี้ไม่ใช่ Flash ครับ เอฟเฟ็กต์อาจอลังการน้อยกว่าตัวด้านบนหน่อย แต่น่าจะซัพพอร์ทพวกอุปกรณ์ที่ไม่สนับสนุน Flash (เช่น iPhone, iPad) ได้ดีกว่า
• Viper Video Quicktag – เพิ่มปุ่มในหน้าเขียนโพส สำหรับใส่วีดิโอจากเว็บไซต์ดัง ๆ เช่น Youtube, Vimeo, Google Video, Flickr ง่าย ๆ
• MapPress Easy Google Map – ใส่แผนที่ Google Map ในเว็บไซต์เราแบบง่าย ๆ เหมาะกับเว็บที่ต้องแสดงพิกัดต่าง ๆ เช่น เว็บสถานที่ท่องเที่ยว
• Photodropper – เอาไว้หาภาพจาก Flickr ที่มีลิขสิทธิ์แบบ Creative Commons ในการแปะบนเว็บ เอามาใส่ในบทความของเรา เหมาะกับหาภาพประกอบบทความแบบง่าย ๆ และถูกลิขสิทธิ์

WordPress Plugin: SEO

• HeadSpace2 SEO – ช่วยให้ SEO ของเว็บไซต์เราดีขึ้นครับ ทำให้ Search Engine เก็บข้อมูลเราดีขึ้น อันดับใน Google สูงขึ้น สามารถเพิ่ม Google Analytics, Google Webmaster ในปลั๊กอินนี้ได้เลย
• All in one SEO Pack – ปลั๊กอินชื่อดังอีกตัวสำหรับทำ SEO เหมือนกันครับ ไม่ควรลงพร้อมกับตัวด้านบนนะครับเพราะฟังก์ชั่นคล้ายกันมาก ระบบอาจรวนได้
• Google XML Sitemap – เอาไว้สร้างไฟล์ Sitemap สำหรับ Submit ให้ Google Webmaster ครับ จะทำให้บอท Google เก็บข้อมูลเว็บไซต์เราได้ง่ายขึ้น
• Google Analytics for WordPress – ใส่โค้ด Google Analytics บนเว็บไซต์เราแบบง่าย ๆ

WordPress Plugin: Security

• Akismet – ปลั๊กอินป้องกัน Spam สุดเทพของ WordPress ที่ถูกต้องประมาณ 98% (อีก 1% หลุด กับอีก 1% ไม่ใช่สแปมแต่ปลั๊กอินตัวนี้มองเป็น Spam) ข้อดีคือมันกรองเอง คนคอมเม้นท์ไม่ต้องกรอก Captcha ให้ยุ่งยาก
• SI Captcha Anti Spam – สร้าง Captcha ให้คนคอมเม้นท์กรอกเพื่อยืนยันว่าเป็นคนจริง ๆ นะ
• Limit Login Attempt – ตั้งได้ว่าถ้า Login ผิดกี่ครั้งจะโดนบลอคไปกี่นาที เอาไว้ป้องกันคนแฮครหัส Admin WordPress เราด้วยวิธี Brute-force (เป็นการสุ่มรหัสเอามาล็อกอินเรื่อย ๆ จนกว่าจะถูก)
• WordPress Database Backup – (แนะนำ) ตั้งเวลา Backup ฐานข้อมูลของ WordPress แบบอัตโนมัติ แถมส่งไฟล์เข้าอีเมลให้ด้วย ติดตั้งไว้ไม่เสียหายครับปลั๊กอินนี้ อุ่นใจได้ว่าข้อมูลจะไม่หายไปไหนเวลาโฮสต์ล่ม

WordPress Plugin: Advanced

• WP Minify – ย่อขนาดไฟล์ CSS / Javascript แบบอัตโนมัติ ทำให้โหลดหน้าเว็บได้เร็วขึ้น
• WP Super Cache -  แคชหน้าต่าง ๆ ของ WordPress ไว้ ทำให้โหลดเว็บไซต์ได้เร็วขึ้นหลายเท่า
• Theme-Check – สำหรับคนที่ทำธีมเอง เอาไว้ตรวจเช็คว่าธีมที่เราทำได้มาตรฐานของ WordPress หรือเปล่า ถ้าใครจะทำธีมส่ง Theme Directory ในเว็บไซต์ wordpress.org พลาดไม่ได้เลยครับ
• Search and Replace – ตามชื่อเลยครับ เอาไว้หาคำ ๆ นึงในทุกโพสบนเว็บเรา แล้วแทนด้วยคำใหม่ เหมาะมากเวลาเราเปลี่ยนเบอร์โทรหรืออีเมลใหม่ครับ (ในกรณีที่เราลงอีเมลไว้หลายโพสมาก

สำหรับใครที่ยังไม่สะใจ หรือยังไม่เจอปลั๊กอินที่ต้องการ สามารถไปที่ I want WordPress plugin to… ได้ครับ มีให้เลือกมากมาโดยแบ่งแยกตามการใช้งาน แต่ลิงค์นี้ค่อนข้างเก่าแล้ว ไม่ชัวร์ว่าจะใช้กับ WordPress เวอร์ชั่นใหม่ได้หมดมั้ยนะครับ ก่อนโหลดเช็คดี ๆ ครับ

ส่วนปลั๊กอินที่ผมลิสต์ไว้ในหน้านี้ ผมเช็คแล้วนะครับว่าสนับสนุน WordPress เวอร์ชั่น 3+ แล้ว โหลดได้ไม่ต้องกังวลเลย ^^ (บางตัวถึงจะเขียนว่า Support ถึงเวอร์ชั่น 2.9 แต่พอลองลงจริงก็ใช้ได้นะครับ)

ใครอยากได้ปลั๊กอินไว้ทำอะไร ทิ้งคอมเม้นท์ไว้ได้เลยนะครับผม

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

Web Browser ไม่ยอมรีเฟรชไฟล์ CSS?

โดยปกติแล้วเนี่ย ถ้าเราไม่สั่งให้บราวเซอร์เปิดระบบ No Cache บราวเซอร์จะทำการแคช (เก็บ) ไฟล์ CSS ไว้ (สำหรับ Firefox ผมใช้วิธีลงปลั๊กอินชื่อ Web Developer แล้วไปตั้งค่า ส่วนบราวเซอร์อื่นผมไม่ทราบครับ) ซึ่งพอเว็บบราวเซอร์แคชไฟล์ไว้จะทำให้เกิดปัญหาว่า พอเข้าเว็บไซต์เดิมอีกรอบ ก็จะทำการรีโหลดใหม่เฉพาะโค้ด HTML เท่านั้น ส่วนไฟล์ CSS จะนำมาจากที่เก็บแคชเอาไว้แล้ว

ถ้าใครเคยนั่งแก้ธีมในบลอคสำเร็จรูปอย่าง Exteen.com ก็น่าจะทราบกันดีว่า แก้ไข CSS ทีนึงก็ต้องบอกผู้อ่านที่เคยเข้าเว็บเรามาก่อนให้ทำการ Refresh แบบเคลียร์ Cache ทั้งหมด โดยการกด Ctrl+F5 ครับ เพื่อที่เค้าจะได้เห็นหน้าตา CSS ใหม่ของเรา

ทีนี้เมื่อก่อนผมก็ไม่ทราบวิธีแก้ครับ ได้แต่อัพบลอคใหม่เพื่อบอกว่าเปลี่ยนธีมใหม่แล้ว ใครยังไม่เห็นให้กดรีเฟรชแบบเคลียร์แคชเอา แต่วันนี้ไปเจอกับวิธีที่ง่ายและเจ๋งมากครับ (แต่ใช้กับที่ Exteen ไม่ได้นะครับ ต้องใช้กับเว็บที่เราแก้ HTML ได้เอง) นั่นก็คือวิธีที่เรียกว่า CSS Versioning ครับ

CSS Versioning คืออะไร และทำอย่างไร

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

สมมติว่าโค้ด HTML ที่เอาไว้เรียกไฟล์ CSS ในส่วน <head> ของเราเป็นแบบนี้นะครับ:

<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />

สังเกตตรง href=”css/style.css” นะครับ เราก็แก้ส่วนนี้เป็นแบบด้านล่างเลยครับ (ตรง … ไม่ต้องสนใจครับ)

<link ... href="css/style.css?v=1001" />

ใช่แล้วครับ แค่เติม ?v=เลขเวอร์ชั่น เข้าไปด้านหลังชื่อไฟล์ CSS ก็เป็นการตั้งเวอร์ชั่นได้แล้ว

อย่างไรก็ตาม ไม่จำเป็นต้องใช้ v=เลขเวอร์ชั่น เสมอไปนะครับ อาจใช้เป็น d=เลขเวอร์ชั่น หรือ ver=เลขเวอร์ชั่น พูดง่าย ๆ ว่าเขียนตัวอักษรอังกฤษตัวไหนก็ได้หมดครับ ขอแค่ตามหลัง ? ก็พอ

ซึ่งตรง เลขเวอร์ชั่น ก็ไม่ได้กำหนดว่าต้องเป็น 1, 2, 3, 4, … นะครับ เราจะเริ่มจาก 1001 แบบที่ผมเขียนในตัวอย่างก็ได้ ขอแค่ว่าพอเราแก้ไข CSS เสร็จแล้วอยากให้ Web Browser ของคนเข้าอัพเดท CSS อัตโนมัติ ก็แก้เป็นเลขที่ไม่ซ้ำจากเดิมครับ เช่น 1002

*อ่านด้านล่างต่อนะครับ มีอัพเดทวิธีการทำให้เลขเวอร์ชั่นเปลี่ยนเองได้*

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

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

UPDATE วิธีที่ไม่ต้องมานั่งแก้ตัวเลขเวอร์ชั่นเอง

เนื่องจากว่า @dtinth แนะนำเทคนิคดี ๆ มาทางทวิตเตอร์ครับ โดยเป็นการใช้โค้ด PHP ในการตั้งเลขเวอร์ชั่น = วันเวลาที่อัพเดทไฟล์ CSS โดยอัตโนมัติครับ ซึ่งเทคนิคนี้จะใช้ได้เฉพาะกับไฟล์ PHP เท่านั้นนะครับผม โค้ดด้านล่างสามารถก็อปไปแปะใช้ได้เลยครับ

<link ... href="style.css?v=<?php echo filemtime('style.css'); ?>" />

ขอบคุณ @dtinth สำหรับเทคนิคดี ๆ ครับ

สไลด์นี้เก็บตกมาจากงาน WPDevNight ครับ เป็นงานพบปะพูดคุยของคนทำเว็บไซต์ด้วย WordPress ครับผม (เว็บไซต์นี้ก็รันบน WordPress เหมือนกันครับ) โดยเนื้อหาจะเน้นเกี่ยวกับคนที่ “ทำ” เว็บไซต์ หรือ Web Developer ครับ ถ้าใครที่เป็นคนเขียนบลอคเฉย ๆ ไม่มีความรู้พวก HTML CSS PHP นิดหน่อยอาจงง ๆ ได้ครับ

สำหรับเนื้อหางานสามารถตามไปอ่านได้ที่ลิงค์เว็บไซต์หลักด้านบนได้เลยครับ ใครที่พลาดงานนี้ไปเอาไว้เจอกันใน Wordcamp (งานที่รวมทั้ง Developer & Blogger ที่ใช้ WordPress มาพูดคุยกัน) ครับผม

ผมเองก็พลาด WPDevNight เหมือนกัน แต่ไม่เป็นไรครับ ดีที่งานนี้ใช้การเขียนสิ่งที่บรรยาย (อาจจะไม่หมด) เข้าไปในเว็บ Smallpad.org ซึ่งเปิดให้ทุกคนสามารถเข้าไปอ่านได้ครับ มาดูกันเลยครับว่ามีอะไรที่น่าอ่านกันบ้าง

1. Web Design Business with WordPress

เปรียบเทียบ WordPress กับ CMS ตัวอื่น ๆ, วิธีการทำให้ลูกค้าเข้าใจเกี่ยวกับ CMS, ข้อดีของ WordPress, รูปแบบเว็บไซต์ที่ควรใช้ WordPress ทำ อ่านเนื้อหา Web Design Business with WordPress

2. WordPress Showcase & Plugin

รวมปลั๊กอินเวิร์ดเพรสต่าง ๆ ที่น่าสนใจ โดยแบ่งเป็นหมวดหมู่ และถ้าที่ลิสต์เอาไว้มีไม่พอ ก็มีลิงค์ให้ตามเข้าไปดูคลังปลั๊กอินเจ๋ง ๆ รวบรวมโดย @iannnnn ครับผม อ่านเนื้อหา WordPress Showcase & Plugin

3. WordPress Theme Design

สอนทำธีม WordPress โดยพูดถึง CSS และ Template Tag สำคัญ ๆ ต่าง ๆ ในธีม WP ดูสไลด์ได้ด้านล่างเลยครับผม อ่านเนื้อหา WordPress Theme Design

4. Interview with @ipeerapong

เชื่อว่าเว็บดีไซเนอร์หลาย ๆ คนที่ติดอกติดใจกับ WordPress น่าจะรู้จักเว็บไซต์ themeforest.net บ้างครับ เป็นเว็บไซต์ขายธีม WP ที่ใหญ่และคุณภาพดีมากเว็บหนึ่ง แล้วก็เคยมีการเอา Theme WordPress มาเซลล์ด้วย

ผมเคยได้ยินมาบ้างว่ามีคนไทยไปขายอยู่ด้วย ซึ่งคุณ @ipeerapong นี่แหละครับที่เป็นคนไทยที่ขายธีมเวิร์ดเพรสใน themeforest แล้วได้กำไรเป็นกอบเป็นกำ ใครสนใจอยากลองหรืออยากรู้ว่าเป็นยังไง ต้องอ่านครับ อ่านเนื้อหา Interview with @ipeerapong

5. WordPress Plugin Development

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

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

ใครที่ได้ไปงานนี้มาแล้วรบกวนช่วยบอกเล่ากันหน่อยนะครับว่าในงานเป็นอย่างไรบ้าง ขอบคุณมากคร้าบ