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

ตอนนี้หากท่านใดติดตามข่าวสารเว็บดีไซน์ใหม่ ๆ จะเห็นว่ามีเทคนิค 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 ก็จะได้คำตอบที่เร็วขึ้นครับ

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

Google Font API เป็นบริการใหม่ของกูเกิ้ล ที่เพิ่งเริ่มให้บริการเมื่อต้นเดือนพฤษภาคม 2010 ครับ โดยเป็นบริการที่อนุญาตให้ ใช้ฟ้อนต์ที่โฮสต์อยู่บนกูเกิ้ลในเว็บไซต์เรา ครับ ระบบนี้ใช้ Javascript และ CSS ในการแสดงฟ้อนต์

บทความเกี่ยวกับ Google Font API อันนี้ ผมสรุปโดยเก็บข้อมูลมาจากทางหน้าเว็บของ API, บทสัมภาษณ์ทีมงาน Google Font, และบทความบน Designshack ครับผม ใครถนัดภาษาอังกฤษจะคลิกเข้าไปอ่านในนั้นก็ได้ครับ

Google Font API คืออะไร?

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

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

สำหรับวิธีอื่น ๆ ก็เช่น การใช้ Flash (siFR), Javascript (Cufon) หรือแม้แต่ CSS3 ก็สามารถใช้ @font-face ได้เช่นกัน โดยแต่ละวิธีจะมีข้อดีข้อเสียแตกต่างกัน เช่น ในด้านความเร็ว หรือในด้านบราวเซอร์ที่รองรับ

ข้อดีของ Google Font API คืออะไร

• ฟรี ใช้ได้ง่าย ไม่ต้องยุ่งกับโค้ดมาก
  เว็บดีไซเนอร์มักจะไม่ถูกโรคกับโค้ดครับ เพราะฉะนั้น Google Font API จะเหมาะกับดีไซเนอร์มาก เพราะแค่ก็อปแปะโค้ดก็เสร็จแล้ว
• ฟ้อนต์เป็น Open source
  ทำให้สามารถใช้บริการนี้ได้ฟรีทั้งในเว็บส่วนตัว หรือเว็บที่หากำไรครับ
• บราวเซอร์รองรับเยอะ แม้แต่ IE6 ก็รองรับ
  ทำให้การใช้ Google Font API ไม่ต้องกลัวว่าแต่ละบราวเซอร์จะแสดงผลไม่เหมือนกัน โดยบราวเซอร์ที่รองรับ คือ:
  Chrome 4.2+, Firefox 3.5+, Safari 3.1+, Opera 10.5+, Internet Explorer 6+
• ใช้ CSS แต่งฟ้อนต์ที่เรียกมาใช้ได้
  แต่งฟ้อนต์ด้วย CSS อย่าง text-shadow หรือคำสั่งอื่น ๆ ก็ทำได้ไม่มีปัญหา
• ประหยัด Bandwidth ที่ใช้ เพิ่มความเร็วในการโหลดฟ้อนต์
  เทคนิคแทนฟ้อนต์อื่น ๆ ส่วนใหญ่ต้องโฮสต์ไฟล์ฟ้อนต์เองครับ แต่บริการนี้กูเกิ้ลโฮสต์ไฟล์ให้เราเลย มีระบบแคชฟ้อนต์ด้วย แถมโฮสต์ของกูเกิ้ลก็เร็วอีก ดีกว่าโฮสต์ไฟล์ฟ้อนต์ไว้เองเยอะเลยครับ

ตัวอย่างการใช้ Google Font API

สามารถลองดูของจริงได้จาก หน้าทดสอบ Google Font API ครับผม

ตอนไม่มี Google Font API จะเป็นแบบนี้ (ใน Internet Explorer อาจไม่เห็นตัวอักษรหมุนครับ เพราะใช้ CSS3):

พอใส่ Google Font API แล้ว จะได้แบบนี้ครับ:

วิธีใส่ Google Font API ในเว็บไซด์

สำหรับวิธีใส่ฟ้อนต์จากกูเกิ้ลในเว็บไซต์เราก็ไม่ยากเลยครับ ขอแค่มีความรู้ CSS นิดหน่อยก็พอครับ

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

มาดูกันเลยดีกว่าว่าวิธีใช้ฟ้อนต์จาก Google Font API ทำอย่างไร:

1. เลือกฟ้อนต์ที่ต้องการใช้จาก Google Font Directory โดยการคลิกบนฟ้อนต์นั้น ๆ

ฟ้อนต์ยังมีไม่เยอะครับ ถ้าอยากได้แบบมีฟ้อนต์ให้เลือกเยอะ ๆ ลองไปใช้บริการเสียตังค์ของ Typekit ดูนะครับ

2. หน้ารายละเอียดฟ้อนต์จะโผล่ขึ้นมา คลิกที่แท็บ “Get The Code” สีน้ำเงิน อยู่ใต้โลโก้สีเหลือง

หน้านี้จะบอกชื่อคนดีไซน์ ชื่อฟ้อนต์ ขนาดไฟล์ (ส่วนใหญ่จะเบามาก เพราะถูกบีบอัดแล้ว)

3. ก็อปปี้โค้ดในกล่องแรกสุด ใต้หัวข้อ “Embed the font into your page” ไปใส่ใต้แท็ก <head> ในเว็บไซต์คุณ

ตัวอย่างเช่น ผมใช้ฟ้อนต์ชื่อ Reenie Beanie ก็จะต้องก็อปปี้โค้ดแบบนี้ครับ

<link href='http://fonts.googleapis.com/css?family=<strong>Reenie+Beanie</strong>'  rel='stylesheet' type='text/css'>

แค่นี้ ตอนโหลดหน้าเว็บไซต์ ก็จะมีการโหลดฟ้อนต์นี้ขึ้นมาเพื่อให้พร้อมใช้งานแล้ว

4. เรียกฟ้อนต์มาใช้ผ่าน CSS

แค่กำหนดชื่อฟ้อนต์ที่เราเลือกใน font-family ก็ใช้งานได้แล้วครับ ลองดูตัวอย่างด้านล่าง

h1 { font-family: 'Reenie Beanie', arial, serif; }

โค้ดนี้จะใช้ฟ้อนต์ Reenie Beanie กับแท็ก H1 ครับ ซึ่งจะเห็นว่ามีการตั้งฟ้อนต์ไว้ 3 อัน คือ Reenie Beanie, arial, และ serif

การตั้งแบบนี้ CSS จะเรียกใช้จากซ้ายไปขวาครับ ถ้าหาฟ้อนต์แรกไม่เจอก็จะไปโหลดฟ้อนต์สอง (Arial) และถ้าหาฟ้อนต์สองไม่เจอก็จะไปเรียกฟ้อนต์ที่สาม (Serif) สำหรับใน Firefox ระหว่างที่โหลดไฟล์ฟ้อนต์จาก Google Font API มาแสดงผล ก็จะแสดงฟ้อนต์ Arial ก่อนครับ

สรุปเกี่ยวกับ Google Font API

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

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

หรือถ้าชอบบทความนี้ ก็รบกวน Retweet ด้วยครับผม ขอบคุณมากครับ ^^

เอนทรีนี้เป็นเอนทรีแรกที่เขียนบทความขึ้นมาเองครับ เนื่องจากไม่นานมานี้ได้ไปลอง CSS Framework ตัวหนึ่ง (จริง ๆ แล้วอาจจะเล็กเกินกว่าจะเรียกว่า Framework) นั่นคือ 960.gs ซึ่งพอเข้าเว็บไปอ่านข้อมูลตอนแรกก็ยังงง ๆ อยู่ แต่พอดู Screencast (หรือวีดิโอ) ของ NetTuts แล้วก็กระจ่างขึ้นมาทันทีเลยครับ โดยส่วนตัวคิดว่าเป็น CSS Framework เบา ๆ ที่ใช้งานง่ายมาก ๆ

ก่อนอื่นขอบอกไว้ก่อนว่า ถ้าจะใช้ CSS Framework จะต้องเขียน CSS เป็นในระดับหนึ่งก่อนนะครับ ไม่ต้องถึงขนาดเก่งเทพก็ได้ครับ เอาพอรู้ว่า class/id ใน CSS เป็นยังไง แล้วก็เอามาใช้ยังไง แค่นั้นก็พอแล้วครับ

เว็บไซด์ที่ทำด้วย 960.gs

ก่อนจะทำก็ต้องรู้ก่อนใช่มั้ยครับว่า 960.gs เนี่ยทำเว็บไซด์หน้าตาประมาณไหน อันนี้เป็นตัวอย่างจากเว็บ 960.gs ครับ:

ข้อดี/ข้อเสียของ  960.gs

ข้อดี

• ใช้ง่าย เรียนรู้ได้เร็ว
• แบ่งเป็น 12-column กับ 16-column เลือกได้ว่าจะให้ layout ละเอียดแค่ไหน
• ช่วยให้การออกแบบเว็บไซด์เร็วขึ้นมาก ถ้าทำเว็บที่หน้าตาเหมาะกับ Grid System อันนี้
• หน้าตาเว็บเหมือนกันทุก Browser ทำให้ไม่ต้องกังวลว่าไปเปิดใน IE6 แล้วจะเจอบั๊กรอดักควาย
• ขนาดไฟล์เล็กมาก ถ้าแบบ Compress (บีบอัดแล้ว) แล้วไม่เกิน 5 kb ส่วนแบบ Uncompress ไม่เกิน 8 kb

ข้อเสีย

• ขนาดเว็บไซด์มีความกว้างอยู่ที่ 960 px เท่านั้น (เป็นตัวเลขที่สวยอยู่แล้ว) ซึ่งถ้าอยากได้ความกว้างขนาดอื่นจะใช้ไม่ได้
• ขาดความอิสระใน Layout ของเว็บไซด์ลงไปอีกหน่อย (อันนี้เป็นเรื่องธรรมดาของการใช้ Framework อยู่แล้ว)

Grid Overlay

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

วิธีใช้ในเว็บบราวเซอร์ก็คือ >> แดรกลิงค์ที่เค้ากำหนดไว้ไปใส่ ในแถบบุ๊กมาร์ค หรือแอด Favorite เอาไว้ ครับ พอจะใช้ก็ไปที่เว็บที่ต้องการใช้ แล้วคลิกลิงค์บุ๊กมาร์กนั้น มันจะรัน Javascript ที่แสดงกริดทับบนเว็บนั้นทันทีครับ (ถ้าเน็ตอืดอาจต้องรอสักพัก)

ผมเจอคนทำโค้ดแบบนี้ออกมาสองคนครับ เลือกใช้ได้เลย: 960 Gridder, Grid960

แหล่งข้อมูลสำหรับ 960.gs

สำหรับคนที่ยังใช้ไม่เป็นเลย เริ่มจาก Screencast ของ NetTuts น่าจะดีที่สุดครับ เพราะเค้าโชว์แบบ Step by Step ตั้งแต่ดาวน์โหลด 960.gs มาจากเว็บเลยทีเดียว

A Detailed Look at the 960 CSS Framework

ถ้าดูอันข้างบนแล้วยังไม่สะใจ ก็สามารถอ่าน บทความจาก NetTuts ได้ครับ อันนี้จะสอนใช้ 960.gs แบบ Step by Step เช่นกัน แต่จะเป็นแบบตัวหนังสือล้วน ๆ แล้วก็สอนทำเว็บที่หน้าตาดูดีกว่าวีดิโอด้านบนครับ

Prototyping With The Grid 960 CSS Framework

พร้อมแล้วสามารถไปดาวน์โหลด 960 Grid System มาใช้กันได้จาก 960.gs Official Website เลยครับ!

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

เชื่อว่าหลายคนอาจยังไม่รู้ว่า 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 ครับผม!