เริ่มต้น Blog นี้ด้วยการแนะนำ Front-End Framework สำหรับงาน Design Website ครับ
ชื่อของเจ้าตัวนี้คือ Bootstrap เป็น Framework ช่วยให้เราออกแบบหน้าตาเว็บไซต์ได้ง่ายขึ้นมากเป้นกอง แถมยังรองรับการออกแบบ Responsive ด้วย
นั่นหมายความว่า ออกแบบทีเดียว สามารถเอาไปเปิดได้กับอุปกรณ์ที่มีหน้าจอหลายๆขนาดได้
จริงๆ แล้วผมไม่ได้เป็นมืออาชีพเกี่ยวกับงานด้านเว้บไซต์สักเท่าไหร่ ที่มาได้เรื่อยบๆ ก็เพราะเริ่มต้นจากความชอบ ก็ตั้งแต่มี thai.net และ geocities สมัยนู้นแล้ว
ถ้านับการเรียนตามหลักสูตร ผมเรียน HTML ตอน ปวช นอกนั้น php css javascript ajax ก็เรียนเอาเองตอนกำลังเรียน ปตรี
และในสมัยนั้น การออกแบบก็ใช้ Table เป้นหลัก คือ การออกแบบจะทำใน photoshop แล้วใช้การ slice รูปให้เป้นชิ้นส่วนต่างๆ
ซึ่งหลังจาก export จาก photoshop ก็จะได้ไฟล์ html + images ครับ เท่านี้ก้ได้ Template เอาไปใช้งานได้ต่อแล้ว
และหลังจากนั้น ก็มีการใช้ css มาทดแทน table ซึ่งบอกตามตรงเลยว่าผมไม่ชินอย่างแรง เพราะเคยตัวกับการออกแบบเดิมๆ แถมไม่อยากยุ่งกับโค้ดด้วย
และงานสุดท้ายที่ผมทำเมื่อ 5 ปีก่อน ก็ยังคงเป็นการใช้ Table เป้นหลัก ผสม css นิดหน่อย
และหลังจากนั้นมาผมก้พยายามหาทางที่จะทำเว้บให้ได้ง่ายๆ และเป็นมาตรฐานแบบที่ชาวบ้านเขาใช้กัน ซึ่งพอศึกษา CSS ไปสักพัก ก็เริ่มงง เพราะ coding ทั้งนั้น
พอไปลองใช้ใน dreamweaver ก็เหมือนจะง่าย แต่พอพื้นฐานไม่แน่น เลยใช้งานไม่ถูกนัก
ระหว่างที่ผมหยุดเรื่อง CSS ไว้ แล้วหาทางไปต่อกับ framework php oop เพราะการเขียน php ดิบที่มันกรรมกรชัดๆ ถึงจะทำ function แล้ว แต่ก้ไม่วายทำเองงงเองอยู่ดี
พอเริ่มรู้จัก codeigniter ที่น่าจัมาแก้ปัญหานี้ได้ ก็เผอิญมาเจอ bootstrap ใน youtube พอดี เพราะเห้นมีคนบอกวิธีการใช้งาน ซึ่งผมเองก็สงสัยว่า bootstrap มันคืออะไร
หลังจากดูคลิปการสอนของคนไทยไปสักพัก ก็สรุปได้ว่า Bootstrap ช่วยในการออกแบบเว็บ เราแค่เขียนโค้ด div html แล้วเรียก class เป็นก็พอ ทำมห้ผมไม่ต้องไปยุ่งกับ css มากจนเกินไป ขอให้เรียกใช้เป้นก็พอแล้ว
ส่วนจะใช้ script อย่างอื่น ก็ได้ แต่ต้องศึกษาเพิ่มหน่อย
ตัวอย่าง class ปุ่ม button ที่ถ้าให้ผมทำ css นี่คงยาก แต่นี้เรียกใช้ class ก็จะได้แบบนีแล้ว
รายละเอียดเชิงลึก ผมจะไม่เขียนนะครับ เพราะมีคนสอนการใช้งานเรื่อง Bootstrap มากมาย ทั้งไทยเทศ ผมจะลงเทคนิค วิธีการเพิ่มเติมที่น่าสนใจเท่านั้นครับ
No comments: