เมื่องาน OSSFest 2014 ที่ผ่านมานี้ ผมได้แนะนำ open source ตัวหนึ่งที่ใช้ในการทำ web แบบง่ายดายกว่าแต่ก่อน ชื่อ Bootstrap ซึ่งจริงๆ แล้วครั้งนี้ไม่ใช่ครั้งแรกที่ผมบรรยายเกี่ยวกับ Bootstrap ผมเคยพูดเรื่องนี้เมื่อ OSSFest 2012 ด้วย สิ่งที่ต่างกันก็คือ เมื่อ 2 ปีที่แล้วเป็น version 2 แต่รอบนี้เป็น 3 แล้ว บทความนี้และต่อจากนี้ผมคงได้มีโอกาสขยายความและเล่าเรื่องราว ความสามารถของ open source ตัวเล็กๆ ตัวนี้ให้กระจ่างชัดและเป็นประโยชน์แก่นักพัฒนาอีกหลายๆคนครับ

Bootstrap เป็น css framework ที่มากความสามารถ ถือกำเนิดขึ้นเมื่อ 4 ปีที่แล้วโดยทีมงานของ twitter เพื่อใช้ในการเป็น library สำหรับการแสดงผล web twitter และก็ได้เผยแพร่ให้คนอื่นได้ใช้ในรูปแบบ open source ด้วย ปัจจุบันมีการใช้อย่างแพร่หลายและมีนักพัฒนาหลายคนช่วยกันปรับปรุงแก้ไข โดย ณ ขณะนี้คือ version 3.3.0 แล้ว และที่น่าสนใจก็คือ cms ดังๆ ของโลกตอนนี้ใช้ Bootstrap เป็น framework ในการแสดงผล เช่น Joomla, WordPress โดยเฉพาะ Joomla ได้มีการใส่ Bootstrap เข้าไปใน core file ด้วย ทำให้ Bootstrap ไม่ใช่แค่ css framework สำหรับ html web ธรรมดาเท่านั้น แต่เป็น framework สำหรับ cms ด้วย

ที่ผมบอกว่า Bootstrap เป็นเหมือนมนต์มายาของ open source นั้นไม่ได้พูดเกินจริงครับ Bootstrap สามาถเปลี่ยนหน้า web อันแสนธรรมดาให้กลับกลายเป็นหน้า web ที่มีมิติ มีความงาม และลูกเล่นที่น่าสนใจได้ โดย code ไม่กี่ตัวอักษร ถ้าจะให้จำแนกเวทย์มนต์ของ Bootstrap นั้น ผมขอจำแนกเป็น 4 กลุ่มความสามารถนะครับ

  1. การแสดงผลหลากหลายขนาดหน้าจอ ซึ่ง Bootstrap ถือว่าความมามารถนี้เป็นพระเอกเลยกว่าได้ มีกลไกการแสดงผลสำหรับอุปกรณ์ที่หลากหลาย โดยเขียน code แค่ครั้งเดียวแต่รองรับได้หลายขนาดหน้าจอ ไม่ต้องมาทำ web หลายๆ version เหมือนในอดีต 
  2. UI (user interface) ส่วนประกอบของหน้า web ที่สวยงาม Bootstrap ได้เตรียม ui ไว้มากมาย แถมมีนักพัฒนาทั่วโลก ทำ ui มาแจกฟรีอีกเพียบครับ เพียงเขียน code ไม่กี่ตัวอักษรก็สามารถแปลง web ธรรมดาให้สวยได้ 
  3. JavaScript ที่แสนง่ายดาย เมื่อก่อนจะทำไรทีที่เป็น interactive กับ user ที่เป็น JavaScript ต้องใช้การเขียน code ที่เยอะมาก ยุ่งพอสมควร แต่ Bootstrap ได้ช่วยให้เขียน code สั้น และง่ายกว่ามาก ทำให้ใช้เวลาไม่นานแถมประหยัดพื้นที่ source code อีกด้วย

     

  4. CSS Preprocessors กลไกใหม่ของ css หรือเรียกง่ายๆว่า css ที่มีการ compile ไว้แล้ว โดย Bootstrap ทำงานกับ 2 preprocessors ดัง คือ Less และ Sass 

เครื่องมือที่ใช้ในการพัฒนา

ก่อนที่จะไปต่อเรื่อง Bootstrap ในมุมมองของ 4 กลุ่มนั้น เราต้องมีเครื่องมือในการพัฒนาเสียก่อน โดยที่ต้องเตรียมคือ

  • ชุด Web Server Package ผมขอแนะนำ XAMPP www.apachefriends.org หรือ Bitnami Wamp Stack bitnami.com/stack/wamp ซึ่งชุดนี้จะมีครบทั้ง apache, php และ mysql

  • IDE Editor จริงๆใช้ editor ธรรมดาพวก Notepad++ ก็ได้ แต่พวก ide จะมีเครื่องมือช่วยมากกว่า ผมขอแนะนำ NetBeans netbeans.org version ที่เป็น HTML5&PHP นะครับ จะทำงานกับ Bootstrap ได้ดีเลยครับ

  • Boostrap ถ้าขาดสิ่งนี้เป็นอันว่าจบ สามารถ download ได้ที่ getbootstrap.com ตอนนี้เป็น 3.3.0 และ web นี้เป็น web ที่สำคัญ เพราะจะมีคู่มือในการใช้งาน Bootstrap ไว้ให้ศึกษาอีกด้วย

ให้เตรียมเครื่องมือโดยไป download แล้วติดตั้ง 2 ชนิดแรก เพื่อเตรียมสร้าง web ในบทความตอนต่อไปครับ online document ศึกษาได้ที่ getbootstrap.com ส่วน ui สวยๆ หาได้ที่ bootsnipp.com หรือ web ช่วยในการออกแบบหน้าจอ ลองศึกษาได้ที่ www.layoutit.com

ปล. สิ่งที่ต้องเตรียมอีกอย่างคือ เตรียมต้องมนต์ของ Bootstrap ได้เลย เพราะเดี๋ยวคุณจะหลงรักสิ่งนี้เหมือนผม ^^

Comments are closed.