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

jQuery เป็น 1 ใน Javascript Library ที่ดังมาก ในด้านการใช้งานง่าย เร็ว และความสามารถสูง ซึ่งเป็นหนึ่งในสิ่งที่ Front-End Developer ควรจะรู้วิธีใช้ไว้ครับ

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

ปกติ TutsPlus จะมีส่วน Premium คือต้องจ่ายเงินเป็นรายเดือน / รายปี แล้วจะได้อ่านเนื้อหาพิเศษ สอนเป็นวีดิโอเลย คราวนี้ก็เป็นโอกาสอันดีที่เค้าแจกฟรีให้เราเรียน 1 คอร์ส นั่นก็คือคอร์ส Learn jQuery in 30 Days หรือ เรียนรู้ jQuery ใน 30 วัน

วิธีการสมัครก็ง่ายมาก:

1. เข้าไปกรอกอีเมลเราที่หน้า Learn jQuery in 30 Days แล้วยืนยันอีเมล
2. ระบบจะส่งอีเมลมาทุกวัน เป็นวีดิโอวันละ 1 ตอน แต่เราไม่ต้องเข้าไปดูทุกวัน รอเสาร์อาทิตย์แล้วเข้าไปดูทีเดียว 5 ตอนก็ได้

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

หากตรงไหนไม่เข้าใจยังไงไปโพสถามใน Facebook Page ของเราได้นะครับ เพราะผมก็คงนั่งเรียนจนจบคอร์สเหมือนกันครับ

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 แต่พอลองลงจริงก็ใช้ได้นะครับ)

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

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

ตอนนี้การเขียน HTML5 และ CSS3 ก็มาแรงมาก ๆ ถ้ามี Editor เอาไว้ช่วยเขียนจะทำงานได้เร็วขึ้นมากเลยครับ

โปรแกรมที่ผมใช้บ่อย ๆ ตอนเขียน HTML กับ CSS บน Windows ก็คือ:

Notepad++ สุดยอด Text Editor สำหรับเขียน HTML/CSS/PHP

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

• Highlight Syntax (ใส่สี syntax แต่ละส่วนแยกเป็นคนละสี เพื่อให้อ่านโค้ดได้สะดวกขึ้น) ได้หลายภาษาเลยครับ ตั้งแต่ Assembly ยัน PHP เพราะงั้นโปรแกรมเมอร์ทั้งมือเก่ามือใหม่ ทั้งคนที่เขียนเว็บหรือเขียนโปรแกรมทั่วไป ก็ได้ประโยชน์จากโปรแกรมนี้แน่นอน!!
• ขนาดโปรแกรมเพียง 14 mb และถ้าอัด Zip เหลือ 4 mb เท่านั้น!
• ไม่ต้องติดตั้ง เป็นโปรแกรมแบบ Portable ใส่ในแฟลชไดรฟ์ก็พกพาไปใช้ได้ทุกที่ (แบบติดตั้งก็มีให้ใช้ครับ แล้วแต่ชอบเลย)
• ความสามารถต่าง ๆ เทียบเท่าโปรแกรมเสียเงิน โดยเฉพาะอย่างยิ่งความสามารถพิเศษมากมายในเมนู TextFX และ Plugins ของโปรแกรมทำให้จัดการโค้ดสะดวกขึ้นมาก และมีความสามารถที่โปรแกรมเสียเงินหลาย ๆ ตัวไม่มีอีกด้วย
• เปลี่ยน Theme ได้! สำหรับคนที่เบื่อการเขียนโค้ดตัวอักษรสีดำบน Background สีขาวแล้ว ลองมาเขียนโค้ดใน Background เข้ม ๆ บ้างจะติดใจครับ (ตอนนี้ผมก็ใช้แบบ Background สีดำอยู่ครับ ชื่อธีม Monokai)
• ข้อสุดท้าย มันเป็นโปรแกรมฟรี ฟรีและดีจริง ๆ ช่วยให้งานทำเว็บไซต์สบายขึ้นอีกเยอะเลยครับ และด้วยความที่มันไม่มีเวอร์ชั่นเสียตังค์ ความสามารถทุกอย่างของโปรแกรมใช้ได้เต็มที่ ไม่มีล็อคครับ ไม่เหมือนอีกหลาย ๆ โปรแกรมที่มีทั้งเวอร์ชั่นฟรี กับเวอร์ชั่นเสียตังค์

สำหรับใครที่สนใจแล้ว สามารถไปอ่านรายละเอียดเพิ่มเติม และดาวน์โหลดได้ที่

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

โปรแกรมที่อยู่ในลิสต์นี้มีทั้งโปรแกรมฟรี และไม่ฟรีครับ นอกจากนั้นบางตัวก็ไม่ใช่แค่ Text Editor แต่ทำหน้าที่เป็น IDE (integrated development environment) หรืออธิบายง่าย ๆ ว่ามันเป็น Text Editor ที่สามารถ compile/debug/version control และอื่น ๆ อีกมากมายครับ ซึ่งเอาจริง ๆ เราใช้แค่ Text Editor ก็เพียงพอแล้วครับ เพราะ IDE จะเหมาะกับโปรแกรมเมอร์มากกว่า

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

หลายคนอาจจะเคยได้ยินข่าวนานมาแล้วว่า มีคนทำเกมส์แบบ DOOM ด้วย HTML5 ซึ่งความจริงแล้วก็ไม่เชิงเป็นเกมครับ เป็นการทดลองใช้ความสามารถ Canvas ใน HTML5 ซึ่งเขียนมาตั้งแต่ปี 2005 แล้ว!!

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

ตัวอย่างเกมส์ที่อาจจะเคยเล่นกันมาแล้วก็คือ Pacman ที่อยู่ในโลโก้ Google ซึ่งทำด้วย HTML5 ครับ ตัวนี้กลายเป็นกระแสใน Twitter ไปพักนึงเลยครับ

อย่าเพิ่งคิดว่าเกมส์ที่สร้างด้วย HTML5 จะต้องใช้กราฟฟิกประมาณเกมส์ 8-bit เก่า ๆ นะครับ ถึงตัว Canvas จะเอาไว้วาดรูปแบบง่าย ๆ ได้ก็จริง แต่ก็สามารถนำกราฟฟิกที่ทำไว้แล้วมาใช้ได้นะครับ เพราะบางเกมส์ใช้กราฟฟิกแบบ 3 มิติสวยสด อนิเมชั่นเนียนมาก (เนียนไม่เนียนนี่คิดว่าขึ้นอยู่กับ RAM ของเครื่องครับ แล้วก็ขึ้นอยู่กับบราวเซอร์ด้วย ผมใช้ Google Chrome เล่นแล้วลื่นกว่าเล่นบน Firefox เยอะเลยครับ)

เกริ่นมาเยอะแล้ว ลองไปเล่นกันดูดีกว่าครับ บางเกมส์นี่ผมเล่นแบบเพลิน ๆ ไปแล้วติดใช้ได้เลย ตอนนี้ชักอยากทำเกมส์ด้วย HTML5 ขึ้นมาแล้วครับ

[button color=green size=medium link=http://www.webdeveloperjuice.com/2011/01/09/14-html5-games-to-make-you-stand-still/ target=blank]14 เกมส์สร้างด้วย HTML5 ที่จะทำให้คุณติดใจ[/button]

[button color=orange size=medium link=http://html5games.com/ target=blank]รวมเกมส์ HTML5 ทุกประเภท ทุกรูปแบบ[/button]

]]> http://www.designil.com/%e0%b9%81%e0%b8%99%e0%b8%b0%e0%b8%99%e0%b8%b3-%e0%b9%80%e0%b8%81%e0%b8%a1%e0%b8%aa%e0%b9%8c-html5-canvas.html/feed 8 http://www.designil.com/%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99%e0%b9%8c-free-psd-photoshop-download.html http://www.designil.com/%e0%b9%80%e0%b8%a7%e0%b9%87%e0%b8%9a%e0%b8%94%e0%b8%b5%e0%b9%84%e0%b8%8b%e0%b8%99%e0%b9%8c-free-psd-photoshop-download.html#comments Sun, 10 Oct 2010 13:20:20 +0000 designil http://www.designil.com/?p=494

วันนี้ไปเจอของดีเลยเอามาแจกฟรี ๆ กันครับ เป็นไฟล์ PSD (สำหรับใช้ในโปรแกรมโฟโต้ช็อปนั่นเอง – อ่านบทความเกี่ยวกับการดีไซน์เว็บไซต์บนโฟโต้ช็อปที่ Photoshop) สำหรับเว็บดีไซเนอร์อย่างเรา ๆ ก็คงใช้ชีวิตอยู่กับ Adobe Photoshop / Illustrator วันละหลายชั่วโมงกันอยู่แล้ว ซึ่งบางครั้งเวลาเราอยากได้ส่วนแปลก ๆ ก็ต้องนั่งดีไซน์กันเอง หาบรัชหรือ Shape สำเร็จรูปมาใช้ไม่ได้

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

โดยครั้งนี้แจกกันกว่า 30 เว็บไซต์ ให้ไปนั่งดาวน์โหลดกันจนปวดมือเลยทีเดียวครับ รีบคลิกลิงค์ด้านล่างกันได้เลย!

30+ เว็บไซต์สำหรับดาวน์โหลดไฟล์ Photoshop

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

ส่วนกราฟฟิกแบบ Raster เรา ๆ ที่ทำเว็บดีไซน์น่าจะคุ้นเคยกันอยู่แล้ว พวกนามสกุล .jpg, .gif, .png, .bmp นี่เอง ซึ่งพวกนี้เป็นกราฟฟิกที่เกิดจากเอาจุดสีมาวางติด ๆ กันทีละ 1 pixel ดังนั้นเวลาย่อ-ขยายรูปภาพจะทำให้เสียรายละเอียดไป (ถ้าย่อ-ขยายใน Photoshop จะเห็นว่ามีการทำให้ภาพเบลอนิดหน่อย ช่วยให้มุมที่ถูกยืดไม่ดูเป็นเหลี่ยมมากนัก)

กราฟฟิกเวกเตอร์ที่แจกในวันนี้มีหลายรูปแบบครับ ทั้ง Background ลาย vintage สวย ๆ, โลโก้แบรนด์ดังเท่ ๆ, ไอคอน Social Networks ความละเอียดสูง, และรูปเงาคนหลากหลายท่า ลองเข้าไปดูกันเลยครับ รับรองว่าดาวน์โหลดกันไม่หวาดไม่ไหวแน่!

>> รวมแหล่งดาวน์โหลด Vector ฟรี !! <<

สวัสดีครับ วันนี้มีของน่าสนใจเอามาแจกกันครับ โดยมันมีชื่อเรียกว่า Facebook GUI PSD Kit ครับ เป็นไฟล์ Photoshop (.psd) อินเตอร์เฟซ (GUI – Graphic User Interface) ของเว็บไซต์ Facebook.com นั่นเอง โดยมีทั้งอินเตอร์เฟซหน้าแรก หน้าเลือกเพื่อน รวมไปถึงกล่องเตือนต่าง ๆ ในเว็บไซต์ Facebook เลยครับ

ลองดูจากรูปด้านล่างได้เลยครับว่าในแพ็กนี้เค้าแจกอะไรบ้าง:

จะเห็นว่ามีให้ทุกอย่างขนาดที่จะสร้างเว็บ Facebook ของตัวเองได้เลยครับ ซึ่งเหมาะมากกับเว็บดีไซเนอร์ที่ชอบออกแบบเว็บไซต์ใน Photoshop ก่อนมาเขียน HTML/CSS จริง เพราะสามารถก็อปแปะส่วนที่ต้องการจากไฟล์โฟโต้ช็อปนี้ได้เลย

ข้อดีอีกอย่างที่ทำให้ไฟล์นี้น่าดาวน์โหลดมาก ๆ คือ UI (User Interface) ของเว็บ Facebook.com เป็นอินเตอร์เฟซที่ถูกใช้โดยคนทั่วทั้งโลกกว่า 500 ล้านคนครับ ทำให้มั่นใจได้ว่าถ้าเราเลียนแบบบางส่วนเอาไปทำคล้าย ๆ กันในเว็บเรา คนที่เข้าเว็บไซต์ของคุณจะไม่งงกับหน้าตาระบบแบบนี้แน่นอน!

ใครเอาไปใช้แล้วเป็นยังไงบ้างเอามาแชร์กันได้นะครับ ^^

>> Download Facebook GUI Kit <<