สวัสดีครับ กลับมาอัพเดทอีกครั้งหลังจากทิ้งช่วงไปสักพัก ก็ต้องขออภัยด้วยนะครับ อย่างไรก็ตามหน้า 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 ของคุณอยู่ในระดับสูง หางานได้สบายเลยครับ

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

Font เป็นหนึ่งใน  Element ที่สำคัญในการทำเว็บดีไซน์ รวมถึงกราฟฟิกดีไซน์ด้วยครับ แต่ปัญหาคือคนไม่ค่อยรู้ว่าจะดาวน์โหลดฟ้อนต์ฟรีได้จากที่ไหน และปัญหาที่สำคัญว่าคือลิขสิทธิ์ฟ้อนต์ ที่ถ้าไม่รู้เนี่ยมีโอกาสโดนปรับหลักหมื่นหลักแสนเลยทีเดียวครับ บางทีเค้าเขียนว่า Download Free Fonts แต่ก็ใช้ในงาน Commercial (ค้าขาย) ไม่ได้ครับ ต้องอ่านข้อตกลงดี ๆ ว่า ฟรี ขนาดไหน

แล้วก็ลิขสิทธิ์ของฟ้อนต์เนี่ย ถึงจะเป็น Commercial Fonts แต่ก็ไม่ได้หมายความว่าจะใช้ได้ในทุกกรณีนะครับ เช่น ฟ้อนต์ตระกูล DB ซึ่งปกติต้องเสียเงินซื้ออยู่แล้วถึงจะเอามาใช้ในงานได้ ชุดละ 5000 กว่าบาท (ใช้ได้ 5 คนครับ แปลว่าถ้าแชร์กับคนอื่นจะตกชุดละ 1000 บาท) ผมก็ไปอ่านเรื่องลิขสิทธิ์เจอมาจาก เว็บ F0nt ว่า

- ออกแบบและเลือกใช้ฟอนท์ใดฟอนต์หนึ่ง เป็นประจำให้กับลูกค้ารายใดรายหนึ่ง เพื่อสร้างเอกลักษณ์จดจำ ต้องชำระค่าลิขสิทธิ์

หมายถึง ถ้าใช้ฟ้อนต์เป็นโลโก้, identity ของเว็บนั้น ๆ เราจำเป็นต้องจ่ายค่าลิขสิทธิ์เพิ่มเติมจากค่าฟ้อนต์ด้วยครับ

เพราะฉะนั้นเวลาเล่นกับฟ้อนต์ในงาน Commercial เนี่ย ต้องเช็คให้ดี ๆ นะครับว่าลิขสิทธิ์ของฟ้อนต์เค้าเขียนไว้ว่าอะไรยังไงบ้าง

แจก Free Thai Fonts ฟ้อนต์ภาษาไทยฟรี

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

• F0nt.com
  เว็บไซต์นี้คือสุดยอดของแหล่งแจกฟ้อนต์ไทยฟรีแล้วครับ นอกจากนั้นยังมีบทความเกี่ยวกับฟ้อนต์ที่น่าอ่าน และเว็บบอร์ดที่ให้คนชอบฟ้อนต์เข้าไปพูดคุยกันครับ ฟ้อนต์เด็ด ๆ ของที่นี่คือ Circular, Supermarket ครับ
• 13 ฟ้อนต์ไทย โดย SIPA
  สำหรับคนที่กำลังหาฟ้อนต์ไทยสวย ๆ ที่เหมาะกับเว็บแนวไทย ๆ ทาง SIPA ได้แจก Fonts ไทยฟรีถึง 13 ตัวด้วยกันครับ ตอนที่ผมหาฟ้อนต์มาทำเว็บส่งประกวดโครงการเว็บในหลวงและพระราชินี ก็หาเอาจากที่นี่เช่นกันครับ
• RSU Fonts
  ทางมหาวิทยาลัยรังสิตได้ทำฟ้อนต์แจกฟรี 2 ตัวครับ ซึ่งตัวนึงเป็นฟ้อนต์แนวโมเดิร์นชื่อ RSU กับอีกตัวเป็นฟ้อนต์ลายมือครับ ที่เจ๋งคือฟ้อนต์ RSU ซึ่งทั้งฟรีและสวยงามระดับฟ้อนต์เสียตังค์เลยครับ งานหลาย ๆ ตัวที่ผม (designil) ทำใช้ฟ้อนต์นี้แล้วลูกค้าชอบมากครับ
• รวมฟ้อนต์ฟรี ตระกูล JS, DS, PLE และอื่น ๆ
  ทาง f0nt.com ได้รวมฟ้อนต์ตระกูลต่าง ๆ ที่ผู้ใช้อนุญาตให้นำไปใช้ได้ โดยไม่ต้องจ่ายค่าลิขสิทธิ์ไว้ที่นี่ครับ (เป็นคนละตัวกับบนหน้าเว็บ F0nt นะครับ ฟ้อนต์ในนี้จะไม่ใช่ฟ้อนต์ที่สมาชิก F0nt.com เป็นคนทำ) ซึ่งตระกูลหลัก ๆ ที่น่าจะเคยเห็นเคยใช้กัน คือฟ้อนต์ JS หรือ DS ครับ

ถ้าใครรู้แหล่งโหลดฟ้อนต์ไทยอื่น ๆ บอกมาได้นะครับ ^^

รวมฟ้อนต์ไทยที่ไม่ฟรี

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

• DB Fonts
  เจ้านี้ฟ้อนต์สวยงามมากครับ ราคาชุดละ 5000 บาท แต่ใช้ได้ 5 คนต่อ 1 ชุด เพราะฉะนั้นหาคนแชร์ก็จะได้ราคา 1000 บาทต่อชุดเท่านั้น อย่าเข้าใจผิดว่า 1 ชุดมี 1 ฟ้อนต์นะครับ ชุดนึงมีฟ้อนต์ 5 ตัวบ้าง 10 ตัวบ้างครับ
• PSL Fonts
  ฟ้อนต์เจ้านี้คุณภาพดีครับ เสียดายที่เค้าไม่ค่อยแยกขาย ขายที 50 ฟ้อนต์อะไรแบบนี้ครับ ดีไซเนอร์บางคนเลยไม่มีทุนพอจะสอยมาใช้ได้ แต่ใครอยากลองใช้ดูในหน้าโปรโมชั่นครับ เหมือนว่าเค้าจะมีให้ใช้ฟ้อนต์ในราคาประหยัด ฟ้อนต์ตระกูลนี้ต้องระวังเรื่องลิขสิทธิ์มากครับ รวมถึง DB Fonts ด้วย เพราะ 2 เจ้านี้เอาเรื่องลิขสิทธิ์หนักครับ
• คัดสรรดีมาก
  ที่นี่ฟ้อนต์คุณภาพดีครับ แต่ส่วนใหญ่เห็นว่าเค้าจะทำฟ้อนต์ให้แบรนด์ไปเลยมากกว่าจะทำฟ้อนต์ขายทั่วไป เพราะฉะนั้นถ้าต้องการซื้อฟ้อนต์อาจจะเน้นดูจาก 2 เจ้าบนเป็นหลักครับ

แจก Free English Fonts ฟ้อนต์ภาษาอังกฤษฟรี

มาดูกันบ้างว่าจะดาวน์โหลดฟ้อนต์ฟรีที่เป็นภาษาอังกฤษได้จากที่ไหนครับ

• DaFont.com (ไม่แนะนำ)
  เว็บนี้หลายคนคงรู้จักอยู่แล้วครับ เพราะเข้าไปโหลดฟ้อนต์กันเยอะมาก แต่อยากให้ระวังไว้ว่า ฟ้อนต์แต่ละตัวในเว็บนี้ลิขสิทธิ์ไม่เหมือนกันครับ ดูลิขสิทธิ์ได้จากตัวอักษรด้านบนปุ่มดาวน์โหลดครับ บางตัวก็ Free for Persona use (แปลว่าใช้ในงานค้าขายไม่ได้) บางตัวเป็น Donationware (ต้องบริจาคถึงจะใช้ได้) เวลาโหลดให้เลือกดี ๆ ครับ หรือถ้าเป็นไปได้อย่าโหลดจากเว็บนี้เลยดีที่สุดครับ
• FontSquirrel
  เว็บนี้รวมฟ้อนต์ฟรี ที่สามารถใช้ในงาน Commercial ได้ แถมทุกฟ้อนต์ในเว็บนี้ยังเอาไปใช้ได้เป็น Web Font (เอาฟ้อนต์ไปใช้แทนตัวอักษรบนเว็บ ซึ่งเป็นการเอาไฟล์ฟ้อนต์มาใช้เลย ไม่ใช่การเซฟฟ้อนต์เป็นรูปนะครับ) ได้ด้วยครับ นอกจากนั้นยังมีเครื่องมือ Web Font Generator เอาไว้แปลงฟ้อนต์ไหนก็ได้ให้ใช้บนเว็บได้ เราสามารถโหลดฟ้อนต์จาก F0nt.com มาแปลงที่นี่ เพื่อใช้บนเว็บได้อย่างถูกลิขสิทธิ์ ครับ ซึ่งฟ้อนต์อื่น ๆ ถ้าจะเอามาแปลงต้องดูลิขสิทธิ์ฟ้อนต์นั้น ๆ ด้วยนะ
• FontFabric
  รวมฟ้อนต์ฟรีสวย ๆ มากมายเลยครับที่นี่ ในเครื่องผม (designil) มีฟ้อนต์ของเจ้านี้หลายตัวเลย หลาย ๆ ตัวเป็นฟ้อนต์แนว Experimental คือ ฟ้อนต์แปลก ๆ ใช้ในงานได้เฉพาะบางชนิด อะไรประมาณนี้ครับ ที่สำคัญฟ้อนต์ในเว็บนี้ใช้ในงาน Commercial ได้นะครับ
• Lost Type
  ฟ้อนต์สวย ๆ แจกฟรีครับ ผมโหลดจากเว็บไซต์นี้ไป 3-4 ฟ้อนต์แล้ว ยอมรับว่าฟ้อนต์เค้าดีจริง และข้อดีอีกอย่างของเว็บไซต์นี้ คือ ก่อนโหลดเค้าจะมีให้ใส่ราคาว่าจะให้คนทำฟ้อนต์เท่าไร (ถ้าจะโหลดฟรีก็ใส่ 0 ไป) ถ้าใครเอาไปใช้ในงานของลูกค้าลองบริจาคสักนิดนึงครับ ช่วยให้เค้ามีแรงทำฟ้อนต์สวย ๆ ต่อไปด้วยครับ แน่นอนว่าใช้ในงานค้าขายได้ครับ
• League of Movable Type
  ที่นี่แจกฟ้อนต์ Open Source ครับ ดาวน์โหลดไปใช้กันได้ฟรี ๆ และใช้ในงาน Commercial ก็ได้ ฟ้อนต์ของที่นี่สวย ๆ หลายตัว ผมเคยมาโหลดจากที่นี่ตั้งแต่เมื่อก่อนตอนที่ฟ้อนต์ยังน้อย ๆ อยู่เลยครับ สวยมาก ๆ
• Google Web Fonts
  เมื่อก่อนเคยเขียนไปแล้วครับเกี่ยวกับเรื่อง Google Font API ซึ่งอันนี้ก็เป็นตัวเดียวกันครับ แต่เป็น Version 2 ทำใหม่ดูดีขึ้นมาก และฟ้อนต์มีให้เลือกเยอะขึ้นด้วยครับ แล้วก็ไม่จำเป็นต้องใช้โค้ด Google เพื่อเอามาใส่บนเว็บอย่างเดียว ฟ้อนต์พวกนี้แจกฟรีครับ ถ้าอยากใช้ในงานกราฟฟิกก็ดาวน์โหลดไปใช้ได้อีกด้วย

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

วันนี้มี 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 !!

สวัสดีครับ ขออภัยที่ไม่ค่อยได้มาเขียนนะครับ เพราะหลังจากปิดเทอมก็ต้องรีบปั่นงานให้ทัน 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 ต่าง ๆ

สวัสดีครับ ไม่ได้อัพมานานเพราะติดช่วงสอบก็ต้องขออภัยด้วยนะครับ วันนี้ผมได้รวบรวมปลั๊กอิน (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 แต่พอลองลงจริงก็ใช้ได้นะครับ)

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

หลายคนอาจจะเคยผ่านตาโพสที่ผมเขียนประชาสัมพันธ์ค่าย INET Young Webmaster Camp 8 มาแล้วนะครับ ค่ายนี้จะรับนิสิตนักศึกษาที่สนใจในด้านต่าง ๆ คือ เว็บโปรแกรมมิ่ง, เว็บดีไซน์, เว็บคอนเท้นท์, และ เว็บมาร์เก็ตติ้ง เข้ามาฝึกฝนโดยมีเว็บมาสเตอร์ดัง ๆ มาคอยให้คำแนะนำครับ

ไปค่าย YWC แล้วได้อะไร

ในฐานะที่ผมเคยเป็นเด็กค่ายปีที่แล้ว ก็ต้องไปคุมน้อง ๆ ที่เข้ามาในปีนี้ครับ และได้เรียนรู้อะไรหลาย ๆ อย่างเลยทีเดียว จริง ๆ แล้วตอนปีที่แล้วผมเข้าไปในฐานะ Web Programmer ครับ พอเข้าไปในค่ายนี้ก็ได้เรียนรู้ว่า โปรแกรมเมอร์ควรจะรู้เรื่องเว็บดีไซน์ด้วย ไม่งั้นสื่อสารกับ Web Designer ไม่รู้เรื่องจริง ๆ ครับ (ตอนผมเข้าไปนี่พวก HTML, CSS ไม่แข็งมาก ๆ) และเพราะอยากรู้เรื่องนั้นก็เลยเปิดเว็บไซต์นี้ designil.com ขึ้นมาครับ เวลาผมไปเจอความรู้อะไรใหม่ ๆ บนเว็บต่างประเทศจะได้เอามาแบ่งปันทุกท่านด้วย

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

ไม่ใช่ว่าซื้อหนังสือ “เทคนิคทำการตลาดบน Twitter/Facebook” มาแล้วมันจะช่วยให้สินค้าขายดีขึ้นทันที เพราะเทคนิคอะไรที่ใช้แล้วมันสำเร็จเนี่ย คงมีคนก่อนหน้าเราเป็นร้อยใช้ไปหมดแล้วล่ะครับ เราต้องศึกษาให้มากกว่านั้น ทั้งจาก Case Study (กรณีศึกษาของแบรนด์ต่าง ๆ ว่าเค้าทำอะไรยังไงบ้าง), ข่าวสารใหม่ ๆ (แนะนำเว็บไซต์ Thumbsup.in.th ครับ ข่าวเค้าไวมาก), นิตยสารและหนังสือ Marketing มากมายในท้องตลาด

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

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

YWC Magazine คืออะไร

เนื่องจากมีผู้ใหญ่ใจดีมีไอเดียว่าอยากทำเว็บไซต์สไตล์นิตยสารออนไลน์ โดยให้ความรู้เกี่ยวกับการสร้างเว็บไซต์ในแต่ละสาขา (Design, Code, Content, Marketing) เพื่อให้ทุกคนที่ทั้งได้เข้าและไม่ได้เข้าค่ายนี้มารับความรู้กัน รุ่นพี่ YWC คนหนึ่งจึงได้ตัดสินใจสร้างเว็บไซต์นี้ขึ้นมาครับ

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