ในการพัฒนา web site หรือไม่ก็ web application บน ide ต่างๆ กระบวนการ run project ถือเป็นขั้นตอนที่สำคัญมากเพื่อที่จะดูผลของการเขียนโปรแกรมนั้นๆ ซึ่งถ้า run ได้โดยไม่ error ก็ถือเป็นข่าวดีมากของการทำงานนั้นๆ ในบทความนี้จะอธิบายถึงเครื่องมือใหม่ ที่มีใน NetBeans version ล่าสุด สำหรับการ run project ที่เป็น html5 project บน Chrome
ซึ่ง project ที่จะทำการ run แบบนี้ได้ต้องสร้างแบบ HTML5 Application ตั้งแต่แรกครับ ดังรูป
เรื่องแรกๆ ที่มักจะอธิบายในช่วงเริ่มต้นเขียนโปรแกรม ส่วนใหญ่มักจะหยิบเอาเรื่อง typography มาบอกเล่า คำว่า typography ปัจจุบันถ้าเปิดในพจนานุกรมมักจะได้คำตอบว่าคือ “การพิมพ์” ถ้าจะให้อธิบายง่ายๆ ก็คือการแสดงข้อความตัวอักษรในหน้าจอนั้นๆ หรือถ้าจะเอาแบบชัดๆ ก็คือ การออกแบบตัวอักษรและการจัดวางฟอนต์ให้เหมาะสม สวยงาม กับพื้นที่ว่างและองค์ประกอบต่างๆ ในหน้านั้นๆ (ถ้าใครสนใจสามารถอ่านเพิ่มเติมได้ที่ Typography หมายความว่าอย่างไรกันแน่?)
ใน Bootstrap นั้นมีการเตรียมชุด class สำหรับงาน typography ไว้หลายคำสั่ง ซึ่งผมจะอธิบายทีละตัวนะครับ
Continue reading
ในการแสดงผลของ web นั้นในอดีตแสดงให้แก่หน้าจอน้อยประเภท ส่วนใหญ่คือหน้าจอ pc หรือไม่ก็ notebook ไม่ได้หลากหลายเท่าปัจจุบัน ในปัจจุบันมีขนาดหน้าจอเพิ่มขึ้น ไม่ว่าจะเป็น tablet หรือ smart phone ทำให้ web ที่ได้ทำการพัฒนาขึ้นต้องรองรับในความหลากหลายนี้ให้ได้ Bootstrap ก็เช่นกัน เนื่องจาก Bootstrap เป็นเครื่องมือในการสร้าง web แบบ responsive ด้วย ทำให้ขาดคุณสมบัติเกี่ยวกับการแสดงผลในหน้าจอที่มีขนาดที่หลากหลายไปไม่ได้ และต้องรองรับความแตกต่างของหน้าจอให้ได้
Bootstrap ได้ใช้หลักการซอยย่อยหน้าจอเป็นส่วนๆ โดยแต่ละส่วนนั้นเป็นแนวตั้ง หรือที่เรียกว่า คอลัมภ์ โดยมี 12 กล่อง ขนาดเท่าๆกัน ดังรูป
ตามธรรมเนียมไทยใครไปเยือนบ้านไหน ต้องไหว้เจ้าของบ้าน ไปเยือนสถานที่ก็ต้องให้ความเคารพสถานที่นั้น การเขียนโปรแกรมก็เหมือนกัน ก่อนเริ่มต้นที่จะพัฒนาโปรแกรมด้วยภาษานั้นๆ ก็ต้องทักทายเพื่อทำความคุ้นเคย เสมือนกับการให้ความเคารพเจ้าของบ้านเพื่อที่ต่อไปจะได้เขียนโปรแกรมได้อย่างสะดวกราบรื่น error หรือ bug ไม่มาแผ้วพาน
ดังนั้นเดี่ยวเรามาเริ่มต้นใช้ Bootstrap กัน โดยการเขียนโปรแกรมที่ classic ที่สุดในโลกก็คือ “Hello World” ( ^-^ ) เริ่มต้นนะครับ เราจะใช้ NetBeans สร้าง project โดยทำการ new project ดังรูป
เมื่องาน 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 ด้วย
Continue reading
