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

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

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

ปัญหา CSS3 ใน IE6

ช่วงนี้มีเทคนิคเจ๋ง ๆ โดยใช้ CSS3 ออกมาให้เห็นกันมากมายเลย (ใครสนใจเรียนรู้ CSS3 สามารถไปอ่านบทความสอน CSS ของเราได้เลยครับ) ซึ่งหลายคนคงทราบกันดีว่า CSS3 จะไม่ยอมแสดงผลในเว็บบราวเซอร์ชื่อดังอย่าง Internet Explorer 6-7 ครับ ก็เลยเกิดปัญหาเว็บดีไซเนอร์กล้า ๆ กลัว ๆ ไม่อยากใช้ CSS3 เพราะมันแสดงผลได้ไม่ครบทุกบราวเซอร์ โดยเฉพาะในประเทศไทยที่อัตราส่วนคนใช้ Internet Explorer เยอะจนน่าตกใจครับ

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

สำหรับวิธีแก้ปัญหาด้านบน เดี๋ยวไปอ่านทีเดียวครับ ตอนนี้มาดูอีกปัญหาหนึ่งของเว็บดีไซเนอร์ก่อน

ปัญหาการ Validate CSS ตระกูล -moz- หรือ -webkit

การที่เรา Validate CSS ผ่าน สำหรับเว็บดีไซเนอร์อย่างเราแล้วถือเป็นกำไรชีวิตอย่างนึงเลยครับ เป็นการแสดงฝีมือให้เห็นด้วยว่าเราเขียนโค้ดถูกต้องตามมาตรฐานนะ สำหรับใครไม่รู้ว่ามันคืออะไร ก็ไปอ่านที่ Validate CSS คืออะไร ได้เลยครับ ปัญหาที่เกิดขึ้น คือ ถ้าใครชอบใช้ CSS เฉพาะของบราวเซอร์ ตัวอย่างเช่นตระกูล -moz- หรือตระกูล -webkit- จะทำให้ Validate CSS ไม่ผ่านครับ (ใครอ่านบทความสอน CSS3 ของเราแล้วจะเห็นว่ามีการใช้ CSS พวกนี้ด้วย)

เรามาดูตัวอย่างโค้ดที่มี -moz- กับ -webkit- ก่อนครับ ถ้าเราต้องการทำขอบมน ๆ ในเว็บไซต์ด้วย CSS ปกติเราจะเขียนแบบนี้ครับ

#somebox {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

ซึ่ง border-radius บรรทัดแรก เป็นของ CSS3 ครับ หมายความว่าบรรทัดนี้จะ Validate ผ่าน แต่ปัญหาคือมันจะไม่แสดงผลขอบมนให้เห็นใน Firefox และบราวเซอร์ที่ใช้ Webkit ครับ เราเลยต้องใส่ -moz-border-radius กับ -webkit-border-radius ในบรรทัดต่อมาด้วย ซึ่งอันนี้ก็จะแสดงขอบมนใน Firefox และบราวเซอร์ที่ใช้ Webkit ครับ แต่สองบรรทัดนี้จะทำให้ Validate ไม่ผ่าน

ถ้าไม่สนเรื่อง Validate CSS ก็พอจะปล่อยผ่านไปได้ครับ ในเคสนี้ CSS ยังดูโอเค ไม่รกมากอยู่ แต่ถ้าอยากให้ขอบแต่ละด้านมนไม่เท่ากัน…

#this-is-ugly-code {
border-radius: 10px 5px;
-moz-border-radius:  10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius:  5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius:  5px;
}

จะเห็นว่าโค้ดเริ่มรกครับ เพราะ -webkit- กำหนดแบบบรรทัดเดียวไม่ได้นั่นเอง… คำถามต่อมา คือ แล้วถ้าเราต้องการให้มันแสดงผลบนบราวเซอร์อย่าง Opera และ Konquerer ด้วยล่ะ? โค้ดจะออกมาเป็นแบบนี้ (Konquerer เป็นเว็บบราวเซอร์ที่ไม่ค่อยดังครับ แต่ซัพพอร์ท CSS3 ได้ดีในระดับนึงเลย)

#this-is-the-end {
border-radius: 10px 5px;
-moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
-o-border-radius: 10px 5px;
-khtml-border-top-left-radius: 10px;
-khtml-border-top-right-radius: 5px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 5px;
}

เห็นได้ชัดเลยว่าโค้ดยาว ๆ รก ๆ แบบน่ากลัวมากครับ ทั้งที่เราแค่อยากจะใส่ขอบมนให้กล่อง ๆ นึงแค่นั้นเอง เรามาดูวิธีแก้ปัญหานี้กันดีกว่าครับ!

eCSStender มาแล้ว แว้ว แว้ว แว้ว

สำหรับปัญหาต่าง ๆ ที่ผมอธิบายไปด้านบน ทั้งการใช้ CSS3 ใน IE6 และการ Validate CSS ตระกูล -moz- -webkit- สามารถแก้ได้ด้วย eCSStender ตัวนี้เลยครับ!

eCSStender เป็น Javascript Library ที่สร้างขึ้นมาเพื่อเว็บดีไซเนอร์โดยเฉพาะ ความสามารถหลักของมันมีเพียงอย่างเดียว คือ “แสดงผลความสามารถ CSS บางส่วนที่บราวเซอร์นั้น ๆ ยังไม่ซัพพอร์ท” ครับ

โดย eCSStender ซัพพอร์ทความสามารถ CSS ดังต่อไปนี้:

• CSS3 Selectors
• RGBa / HSLa (ทำสีโปร่งใส)
• @font-face (ใช้ฟ้อนต์นอกเหนือจาก Web-safe Fonts)
• border-radius (ใช้ทำขอบมน แต่ยังใช้ใน IE ไม่ได้)
• box-shadow (ใส่เงาให้กล่อง)
• CSS3 Transform (เปลี่ยนแปลงรูปร่างกล่องหรือตัวอักษร ตอนนี้ซัพพอร์ทแค่การหมุน เอาไว้หมุนใน IE6 ได้ด้วย)
• CSS3 Transition (เอาไว้เปลี่ยนแปลงรูปร่างเมื่อเราทำอะไรกับกล่อง เช่น ชี้กล่อง)

ความสามารถด้านบนทุกอัน ยกเว้น border-radius จะถูกทำให้ใช้ได้ใน Internet Explorer เวอร์ชั่น 6+ ทั้งหมดครับ

ปัญหาแรกแก้ไขได้แล้ว ทีนี้มาดูว่าปัญหาที่สองเราจะแก้ไขด้วย eCSStender ได้ยังไง…

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

#beautified-code {
border-radius: 10px 5px;
}

โดยสำหรับการแสดงผลในแต่ละบราวเซอร์ ตัว eCSStender จะไปจัดการให้เราเองครับ ทีนี้โค้ดของเราก็ Validate CSS ผ่านสบาย ๆ แล้ว

Download eCSStender + วิธีใช้

สามารถไปดาวน์โหลด eCSStender กันได้ที่ เว็บไซต์ eCSStender เลยครับ

สำหรับวิธีใช้ก็แกะซิปแล้วเอาไฟล์ .js ในนั้นไปใส่ในเว็บไซต์เราครับ จากนั้นใส่โค้ดเพื่อเรียกใช้ในหน้าเว็บไซต์เราเลย:

<script type="text/javascript" src="eCSStender.js"></script>
<script type="text/javascript" src="eCSStender.CSS3-backgrounds-and
-borders.js"></script>
<script type="text/javascript" src="eCSStender.CSS3-selectors.js">
</script>
<script type="text/javascript" src="eCSStender.CSS3-color.js"></script>

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

<script type="text/javascript" src="eCSStender.js"></script>
<script type="text/javascript" src="eCSStender.CSS3-color.js"></script>

สำหรับบทความวันนี้ก็ขอจบแต่เพียงเท่านี้ครับ เขียนนานมาก ยังไงมีข้อสงสัยอะไรก็ถามได้เลยนะครับผม~!!

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

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

โดยวิธีใช้ CSS3 Generator ก็ไม่ยากเลยครับ เริ่มจาก เข้าเว็บไซด์ CSS3 Generator แล้วเลือกว่าอยากได้โค้ด CSS3 เอามาทำอะไรครับ ซึ่งมีให้เลือกดังนี้:

• Border Radius – โค้ดสำหรับทำกรอบโค้ง
• Box Shadow – ใส่เงาให้กล่อง
• Text Shadow – ใส่เงาให้ตัวอักษร
• RGBA – กำหนดสีแบบโปร่งใส
• @Font Face – ใช้ฟ้อนต์พิเศษนอกจาก Web Safe Fonts
• Multiple Column – แบ่งตัวหนังสือเป็นหลายคอลัมน์ในกล่องเดียว
• Box Resize – ตั้งให้กล่องขยายตามเนื้อหาในกล่องเองได้ เลือกให้ขยายเฉพาะแนวตั้งหรือแนวนอนได้
• Box Sizing – ตั้งว่าจะให้กรอบของกล่องเข้าไปอยู่ด้านในพื้นที่กล่อง หรืออยู่ด้านนอก (ปกติจะอยู่นอกกล่อง)
• Outline – กรอบกล่อง ตั้งค่าเหมือน border โดยอันนี้จะแสดงกรอบนอก border อีกที
• Selectors – ไม่มี Generator สำหรับอันนี้

พอเราเลือกแล้วจะมีช่องให้เรากรอกค่าต่าง ๆ เช่น ถ้าเลือก Text Shadow ก็จะให้เลือกใส่ค่าตำแหน่งเงา ความเบลอเงา และสีเงา (มีหน้าต่าง Color Picker ให้เลือกง่าย ๆ)

กรอกเสร็จแล้วสามารถก็อปปี้โค้ดในช่อง Your Code ไปใส่ในไฟล์ CSS เราได้เลย!

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

ใครมีเครื่องมืออะไรดี ๆ เกี่ยวกับเว็บดีไซน์มาแนะนำก็ทิ้งคอมเม้นท์ไว้ได้เลยครับ!

อย่าลืมติดตาม Twitter @designil ของเรา และ เว็บบอร์ดเว็บดีไซน์ ครับ!

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

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

สคริปต์ Lightbox ต่าง ๆ ที่รวบรวมมาในวันนี้ เป็นสคริปต์ที่ใช้ได้ดี และหน้าตาสวยงามกว่า Lightbox ธรรมดาอื่น ๆ ครับ โดยเฉพาะ PrettyPhoto กับ Sexy Lightbox นี่ผมชอบมากเป็นพิเศษ สคริปต์พวกนี้ส่วนใหญ่จะมีข้อดีตรงที่ติดตั้งได้ง่ายเพราะเค้าจะให้ไฟล์ตัวอย่างมาแล้วครับ เราก็ดูว่าไฟล์ตัวอย่างมีการเรียกใช้ไฟล์ javascript ตัวไหนบ้าง เรียกใช้ Lightbox ยังไง แล้วเอามาทำตามเท่านั้นเอง

สุดท้ายนี้อยากบอกว่า สคริปต์ต่าง ๆ ที่รวบรวมมาในวันนี้แจกฟรีทั้งหมดครับ! (จริง ๆ ผมก็ไม่เคยเห็นสคริปต์ Lightbox แบบเสียตังค์นะครับ หุหุ)

>> Download Free Best jQuery Lightbox Scripts <<

ติดตามเราได้ทาง Twitter ที่ @designil ครับผม!