ในการพัฒนา web site หรือไม่ก็ web application บน ide ต่างๆ กระบวนการ run project ถือเป็นขั้นตอนที่สำคัญมากเพื่อที่จะดูผลของการเขียนโปรแกรมนั้นๆ ซึ่งถ้า run ได้โดยไม่ error ก็ถือเป็นข่าวดีมากของการทำงานนั้นๆ ในบทความนี้จะอธิบายถึงเครื่องมือใหม่ ที่มีใน NetBeans version ล่าสุด สำหรับการ run project ที่เป็น html5 project บน Chrome

ซึ่ง project ที่จะทำการ run แบบนี้ได้ต้องสร้างแบบ HTML5 Application ตั้งแต่แรกครับ ดังรูป

null


Continue reading

เรื่องแรกๆ ที่มักจะอธิบายในช่วงเริ่มต้นเขียนโปรแกรม ส่วนใหญ่มักจะหยิบเอาเรื่อง typography มาบอกเล่า คำว่า typography ปัจจุบันถ้าเปิดในพจนานุกรมมักจะได้คำตอบว่าคือ “การพิมพ์” ถ้าจะให้อธิบายง่ายๆ ก็คือการแสดงข้อความตัวอักษรในหน้าจอนั้นๆ หรือถ้าจะเอาแบบชัดๆ ก็คือ การออกแบบตัวอักษรและการจัดวางฟอนต์ให้เหมาะสม สวยงาม กับพื้นที่ว่างและองค์ประกอบต่างๆ ในหน้านั้นๆ (ถ้าใครสนใจสามารถอ่านเพิ่มเติมได้ที่ Typography หมายความว่าอย่างไรกันแน่?)
ใน Bootstrap นั้นมีการเตรียมชุด class สำหรับงาน typography ไว้หลายคำสั่ง ซึ่งผมจะอธิบายทีละตัวนะครับ
Continue reading

ในการแสดงผลของ web นั้นในอดีตแสดงให้แก่หน้าจอน้อยประเภท ส่วนใหญ่คือหน้าจอ pc หรือไม่ก็ notebook ไม่ได้หลากหลายเท่าปัจจุบัน ในปัจจุบันมีขนาดหน้าจอเพิ่มขึ้น ไม่ว่าจะเป็น tablet หรือ smart phone ทำให้ web ที่ได้ทำการพัฒนาขึ้นต้องรองรับในความหลากหลายนี้ให้ได้ Bootstrap ก็เช่นกัน เนื่องจาก Bootstrap เป็นเครื่องมือในการสร้าง web แบบ responsive ด้วย ทำให้ขาดคุณสมบัติเกี่ยวกับการแสดงผลในหน้าจอที่มีขนาดที่หลากหลายไปไม่ได้ และต้องรองรับความแตกต่างของหน้าจอให้ได้

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

grids
Continue reading

ตามธรรมเนียมไทยใครไปเยือนบ้านไหน ต้องไหว้เจ้าของบ้าน ไปเยือนสถานที่ก็ต้องให้ความเคารพสถานที่นั้น การเขียนโปรแกรมก็เหมือนกัน ก่อนเริ่มต้นที่จะพัฒนาโปรแกรมด้วยภาษานั้นๆ ก็ต้องทักทายเพื่อทำความคุ้นเคย เสมือนกับการให้ความเคารพเจ้าของบ้านเพื่อที่ต่อไปจะได้เขียนโปรแกรมได้อย่างสะดวกราบรื่น error หรือ bug ไม่มาแผ้วพาน
ดังนั้นเดี่ยวเรามาเริ่มต้นใช้ Bootstrap กัน โดยการเขียนโปรแกรมที่ classic ที่สุดในโลกก็คือ “Hello World” ( ^-^ ) เริ่มต้นนะครับ เราจะใช้ NetBeans สร้าง project โดยทำการ new project ดังรูป


Continue reading

เมื่องาน 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

Atom Text Editor เป็น Editor น้องใหม่จากค่าย GitHub ซึ่งออกมาให้ใช้ได้ระยะหนึ่งแล้ว โดยตัวโปรแกรมออกมารองรับเฉพาะผู้ใช้ OSX เท่านั้น แต่ก็มีนักพัฒนาได้พอร์ทไปยังระบบปฏิบัติการอื่นๆ ด้วย เช่น Linux และ Windows เป็นต้น Atom ในแนวคิดการออกแบบมาคล้ายกับ Emac และ Sublime Text คือเป็น Editor ครอบจักรวาล ซึ่งตั้งต้นด้วย Edit ความสามารถเบื้องต้นธรรมดาๆ แต่เปิดให้เขียน plugin เพิ่มเติมได้ ซึ่งทำให้เราเพิ่มความสามารถของ Atom ได้ตามที่เราต้องการและที่สำคัญ Atom ใช้งานฟรีครับ :)

สำหรับท่านที่ใช้งาน OSX ไม่มีปัญหาสักเท่าไรกับการติดตั้ง Atom สามารถดาวน์โหลดมาติดตั้งกันได้เลย แต่สำหรับท่านที่ใช้ Ubuntu ต้องติดตั้งจาก PPA ดังนี้

sudo add-apt-repository ppa:webupd8team/atom

sudo apt-get update

sudo apt-get install atom

จากนั้นก็เริ่มใช้งานกันได้เลย สำหรับหน้าตาก็จะคล้ายๆ กับ Sublime Text และปุ่มคีย์ลัดจะคล้ายๆ กัน เดี๋ยวเรามาลองติดตั้ง package เพิ่มความสามารถให้กับ Atom กันดีกว่า เปิด Atom ขึ้นมาแล้วคลิกไปที่เมนู File > Preferences… เลือกเมนู Packages ด้านข้าง
Continue reading