การใช้ฟอนต์นำเสนอข้อมูลข่าวสารบนเว็บไซต์ หรือ Web Typography ในยุคแรก นั้น Browser จะเป็นตัวกำหนดว่าจะนำเสนอด้วยฟอนต์อะไร ทำให้การแสดงผลในแต่ละ Browser ไม่เหมือนกัน ต่อมาใน HTML2 ได้มีการเพิ่มแท็ก <font> เข้ามา และใน CSS2 ก็อนุญาตให้เราสามารถกำหนดฟอนต์ได้เอง แต่ปัญหาที่เจอคือฟอนต์ที่เราเลือกใช้จะต้องถูกติดตั้งบนเครื่องฝั่งผู้ใช้ด้วย ดังตัวอย่างการกำหนดรูปแบบ font ด้วย CSS2 ดังนี้ body { font-family: Gill, Helvetica, sans-serif } เมื่อ Web Browser อ่านเจอ CSS ดังกล่าว อันดับแรกก็จะดูว่าฟอนต์ที่ชื่อ Gill ถูกติดตั้งไว้ในเครื่องแล้วหรือยัง ถ้าติดตั้งแล้วก็จะแสดงผลเว็บไซต์ด้วยฟอนต์ Gill แต่ถ้ายังไม่ได้ติดตั้ง Browser ก็จะมองหาฟอนต์ตัวถัดไปคือ Helvetica และ sans-serif ตามลำดับ จากข้อจำกัดดังกล่าว จึงมีผลทำให้เราไม่สามารถใช้งานฟอนต์สวยๆ บนเว็บไซต์ได้ นักออกแบบเว็บไซต์จึงเลือกใช้วิธีการนำเสนอข้อมูลด้วยรูปภาพแทน โปรแกรมกราฟิกที่ใช้กันก็อย่างเช่น Adobe Photoshop จะทำให้สามารถใส่ข้อความ และ effect ต่างได้อย่างสวยงาม แต่ปัญหาต่อมาที่เจอก็คือการแก้ไขข้อความในรูปภาพมีความยุ่งยากซับซ้อน อะไรๆ ก็ง่ายขึ้นด้วย @font-face ถือว่าเป็นข่าวดีของนักพัฒนาเว็บไซต์เป็นอย่างมาก เมื่อ CSS3 ได้กำหนด @font-face ไว้ใน specification ด้วย ทำให้การใช้ฟอนต์บนเว็บไซต์มีความหลากหลายมากยิ่งขึ้น @font-face เป็นกลไกที่จะช่วยให้เราสามารถเรียกใช้ฟอนต์ที่ไม่ได้ถูกติดตั้งไว้บนเครื่องฝั่งผู้ใช้ได้ โดยให้ระบุแหล่งที่อยู่ (src) ของไฟล์ฟอนต์ไว้ใน Style Sheet ดังนี้ @font-face { font-family: myFirstFont; src: url(‘www.mydomain.com/sansation_light.woff’); } จากโค้ดเมื่อ Web Browser อ่านเจอก็จะไปโหลดฟอนต์ตามที่อยู่ที่ระบุไว้มาใช้งาน ทำให้เราสามารถกำหนดฟอนต์ได้ตามต้องการ ปัญหาต่อมาที่เจอคือแต่ละ Web Browser นั้นรองรับไฟล์ฟอนต์ในรูปแบบ (format) ที่แตกต่างกันออกไป ในโค้ดตัวอย่างใช้รูปแบบ Web Open Font Format (woff) รูปแบบอื่นที่มีการใช้งานกันได้แก่ EOT (Embedded OpenType), TrueType Font (ttf), Open Type Font (otf) และ Scalable Vector Graphics (SVG) เป็นต้น โดยแต่ละ Browser รองรับรูปแบบไฟล์ต่างกันดังรูป ที่มา : www.w3schools.com แล้วทีนี้เราจะเขียน CSS อย่างไรให้รองรับทุก Browser ล่ะ? คำตอบก็คือ ให้เราระบุแหล่งที่อยู่ของไฟล์ฟอนต์ (src) แต่ละรูปแบบต่อท้ายเข้าไปเลยดังนี้ @font-face { font-family: myFirstFont; src: url(‘sansation_light.woff’); src: url(‘sansation_light.woff’) format(‘woff’), url(‘sansation_light.eot) format(‘embeded-opentype’), url(‘sansation_light.ttf) format(‘truetype); } จากโค้ดในส่วนของ format จะเป็นตัวบอก Browser ว่าไฟล์ที่ระบุตรงกับรูปแบบที่รองรับหรือไม่ ถ้าตรงก็โหลดมาใช้งาน แต่ถ้าไม่ตรงก็จะไม่โหลดลงมาให้เปลือง Banwidth แล้วจะหาไฟล์ฟอนต์ได้จากไหน? อ่านมาถึงตรงนี้แล้ว หลายคนอาจจะกังวลว่า แล้วจะหาไฟล์ woff, eot, ttf เหล่านี้ได้จากไหน? คำตอบคือให้ทำตามขั้นตอนดังนี้ ดาวน์โหลดฟอนต์ในรูปแบบ ttf ที่ต้องการก่อนครับ แนะนำเว็บไซต์ f0nt.com จะมีฟอนต์ภาษาไทยสวยๆ ให้เลือกมากมาย และที่สำคัญคือสามารถใช้ได้ฟรี ไม่มีค่าลิขสิทธิ์ เข้าเว็บไซต์ http://www.font2com/ ให้อัพโหลดไฟล์ฟอนต์ที่เตรียมไว้ แล้วคลิกปุ่ม Convert & Download ได้เลยครับ จะได้เป็นไฟล์ zip มา ข้างในประกอบด้วยไฟล์ css, demo.html และไฟล์ฟอนต์ต่างๆ ให้เราเอาไปใช้งานได้เลยครับ  

สำหรับในบทความนี้ เป็นภาคต่อจาก “เตรียมความพร้อมก่อนการพัฒนา Web Application ” โดยจะมาทำความรู้จักกับ Bootstrap กันให้มากขึ้น ซึ่ง Bootstrap จัดเป็น Front-end Framework  ที่กำลังได้รับความนิยมเป็นอย่างมากในปัจจุบัน อาจจะเป็นเพราะว่า Bootstrap มีแนวทางในการพัฒนาในแบบ Responsive Web Design ก็เป็นได้ (บทความ แนวทางการพัฒนาเว็บแบบ Responsive Web Design) แนวคิดของ Bootstrap จะให้ความสำคัญกับการออกแบบการแสดงผลในอุปกรณ์ขนาดเล็กก่อน (Mobile First Approach) กล่าวคือ การสร้างเว็บไซต์ 1 หน้าสำหรับ Content ชุดเดียวกัน เราต้องออกแบบการแสดงผลให้ครอบคลุมหน้าจออย่างน้อย 3 ขนาดทั้ง Mobile device, Table และ Notebook  จริงๆ แล้วการจะออกแบบโดยเริ่มต้นที่หน้าจอขนาดใหญ่ หรือเล็กก่อนก็สามารถทำได้ทั้งนั้น แต่การเริ่มต้นจากหน้าจอขนาดเล็กจะทำให้เราได้โฟกัสใน Content ที่สำคัญๆ ก่อน เพื่อให้ User ได้รับข้อมูลหลักที่เว็บไซต์ต้องการนำเสนอ และค่อยๆ ออกแบบโดยเพิ่มรายละเอียดที่สำคัญรองลงมาในหน้าจอขนาดใหญ่ขึ้นตามลำดับ ใน Bootstrap เวอชั่น 3 นั้นได้เพิ่มคุณสมบัติการเป็น Responsive มาในตัวแล้ว การนำมาใช้งานจึงไม่ต้อง Include ไฟล์คุณสมบัตินี้เพิ่มเหมือนในเวอร์ชั่นก่อนหน้า การดาวน์โหลด Bootstrap สามารถดาวโหลดได้ที่ www.getbootstrap.com โครงสร้างไดเร็กทอรี่ หลังจากดาวน์โหลดไฟล์มาแล้ว ให้ทำการแตกไฟล์ .zip จะพบว่ามีโครงสร้างไฟล์ดังนี้ css เป็นโฟลเดอร์สำหรับเก็บไฟล์ CSS ที่ใช้กำหนด Layout และ Theme ของหน้าเว็บ สังเกตว่าในโฟลเดอร์นี้จะมีไฟล์ .min ซึ่งเป็นไฟล์ CSS ที่ผ่านการคอมไพล์แล้วทำให้มีขนาดเล็กลง js เป็นโฟลเดอร์สำหรับเก็บไฟล์ JavaScript เพิ่มลูกเล่นให้กับเว็บ fonts เป็นโฟลเดอร์สำหรับเก็บฟอนต์ต่างๆ ที่ใช้ในการแสดงผลข้อความบนหน้าเว็บ สิ่งที่ Bootstrap เตรียมไว้ให้ Grid system ระบบ Grid จำนวน 12 คอลัมน์ สามารถเลือกใช้ได้ทั้งแบบ fixed และแบบ fluid Base CSS style sheets สำหรับ html elements พื้นฐาน เช่น typography, tables, forms และ images Components style sheets สำหรับสิ่งที่เราต้องใช้บ่อยๆ ไม่ว่าจะเป็น navigation, breadcrumbs รวมไปถึง pagination JavaScript jQuery plugins ต่างๆ ไม่ว่าจะเป็น modal, carousel หรือ tooltip เทมเพลตพื้นฐาน Bootstrap ใช้โครงสร้างเอกสารเป็น HTML5 ซึ่งมีเทมเพลตพื้นฐานดังรูป ตัวอย่างการนำไปใช้งานที่เห็นได้ชัด และหลายๆ ท่านในชุมชน PSU SysAdmin เองคงจะคุ้นเคยกันดี เช่น – Joomla เวอร์ชั่น 3 ที่นำ Bootstrap ไปใช้ เพื่อให้เว็บไซต์มีคุณสมบัติของ Responsive Design ตอบสนองการแสดงผลบนอุปกรณ์ที่มีขนาดต่างๆ กันได้เป็นอย่างดี – WordPress ก็สามารถสร้าง Theme ด้วย Bootstrap ได้เหมือนกัน (http://blog.teamtreehouse.com/responsive-wordpress-bootstrap-theme-tutorial) – นอกจากนี้ท่านยังสามารถดูตัวอย่างเว็บไซต์อื่นๆ ที่ทางผู้พัฒนา Bootstrap ได้รวบรวมไว้ได้ที่ http://expo.getbootstrap.com/      

ในการพัฒนาเว็บไซต์ จะมีผู้ที่เกี่ยวข้องโดยตรงหลักๆ ได้แก่ 1. ทีมพัฒนาเว็บไซต์ หรือโปรแกรมเมอร์ อาจจะมีคนเดียว หรือทำงานกันเป็นทีมก็ได้ และ 2. ผู้ใช้ หรือลูกค้า จะเป็นผู้กำหนดความต้องการของเว็บไซต์ หลังจากที่ทีมพัฒนาเก็บรวบรวมความต้องการของลูกค้า และได้ทำการวิเคราะห์ความต้องการแล้ว ขั้นตอนถัดไป ก็จะเป็นการวางแผน ออกแบบ Layout คร่าวๆ ก่อน เพื่อให้ทีมพัฒนามีความเข้าใจที่ตรงกัน อีกทั้งยังสามารถนำเสนอต่อลูกค้า เพื่อให้ลูกค้าเห็นภาพรวมของเว็บไซต์ก่อนการลงมือออกแบบเว็บไซต์ และเขียนโค้ดจริง  เราเรียกกระบวนการออกแบบ Layout และนำเนื้อหาคร่าวๆ ในเว็บไซต์มาจัดเรียงบน Layout นี้ว่า “การทำ Wireframe” การทำ Wireframe นั้นไม่ได้มีรูปแบบตายตัว นักพัฒนาแต่ละคนอาจมีวิธีการที่แตกต่างกันไป แต่มีวัตถุประสงค์ในการทำที่เหมือนกัน คือ เพื่อให้เห็นภาพรวมของเว็บไซต์ ทำให้ทีมเข้าใจตรงกัน และพัฒนาไปในทางเดียวกัน ตัวอย่างเครื่องมือที่ใช้ทำ Wireframe ที่ทำได้ง่ายที่สุด คือการใช้ดินสอ วาด Layout ลงบนกระดาษ และจัดเรียงเนื้อหาคร่าวๆ ดังรูป หรือจะใช้โปรแกรมคอมพิวเตอร์ช่วยในการทำก็ได้แล้วแต่ความถนัดของแต่ละคน ซึ่งโปรแกรมคอมพิวเตอร์ที่ช่วยในการทำ Wireframe จะมีให้เลือกใช้มากมาย ทั้งในแบบใช้งานออนไลน์ และแบบที่ต้องติดตั้งลงเครื่อง มีทั้งที่ให้ใช้งานฟรี และเสียตังค์ซื้อก็มี ตัวอย่างที่น่าสนใจได้แก่ Prototype – โปรแกรมทำ Wireframe ตัวนี้มีทั้งบน Windows / Mac OS โดยแบ่งเป็นเวอร์ชั่นฟรี กับเวอร์ชั่นเสียเงิน Pencil Project – โปรแกรมทำ Wireframe ใช้ฟรี ๆ มีทั้งบน Windows / Linux / Mac OS Cacoo – Web App สำหรับทำ Diagram, Wireframe ออนไลน์ โดย Account ฟรีจะสร้าง Wireframe ได้จำกัดหน้า JumpChart – Web App สำหรับทำ Wireframe Online ที่หน้าตาเรียบง่าย โดย Account ฟรีจะสร้าง Wireframe ได้จำกัดหน้า FrameBox – Web App สำหรับทำ Wireframe ฟีเจอร์น้อย แต่ใช้ฟรี ทำเสร็จส่งลิงค์ให้ลูกค้าได้ทันที iPlotz – Web App สำหรับสร้าง Wireframe ออนไลน์ที่ดูมีสีสันกว่าตัวอื่น ใช้ฟรี Account จะจำกัดหน้า วิธีการใช้งานโปรแกรมเหล่านี้ก็ไม่ยากมาก สามารถศึกษาได้ด้วยตนเอง และเลือกใช้งานโปรแกรมได้ตามความถนัดของแต่ละคน ตัวอย่างต่อไปนี้จะเป็นวีดีโอแนะนำการใช้งาน Pencil Project ซึ่งเท่าที่เคยได้ลองเล่นดูพบว่าเป็นโปรแกรมที่น่าสนใจ มีเครื่องมือให้ใช้ค่อนข้างครบถ้วน และที่สำคัญคือใช้งานได้ฟรีไม่มีค่าใช้จ่าย  

ในปัจจุบันนี้ต้องยอมรับว่าระบบอินเตอร์เน็ตเข้ามามีบทบาทสำคัญต่อการดำเนินกิจกรรมต่างๆ มากมาย ทั้งในด้านสังคม เศรษฐกิจ การเมือง การศึกษา หรือแม้กระทั่งวงการทหาร ดังนั้นแนวโน้มของโปรแกรมคอมพิวเตอร์จึงเน้นไปทางด้านโปรแกรมที่สามารถทำงานผ่านระบบอินเตอร์เน็ตได้ ประกอบกับอุปกรณ์ในการเข้าถึงอินเตอร์เน็ตมีความหลากหลายมากยิ่งขึ้นจึงมีผลต่อการพิจารณาเทคนิค วิธีการต่างๆ ที่จะนำมาใช้ในการพัฒนาระบบของผู้พัฒนาว่าควรจะเลือกใช้เทคโนโลยีใดบ้าง เพื่อให้โปรแกรมที่พัฒนาขึ้นมีความทันสมัย รองรับการใช้งานบนอุปกรณ์ต่างๆ ได้เป็นอย่างดี เนื่องจากอุปกรณ์ต่างๆ ไม่ว่าจะเป็น Computer, Tablet หรือ Mobile จะมีโปรแกรมพื้นฐานที่เรียกว่า Web Browser สำหรับเข้าใช้งานเว็บไซต์ต่างๆ อยู่แล้ว ดังนั้นการพัฒนาโปรแกรมในรูปแบบ Web หรือที่เรียกว่า Web Application จึงเป็นทางเลือกที่ได้รับความนิยมเป็นอย่างมาก สามารถตอบสนองความต้องการของผู้ใช้งานได้เป็นอย่างดี ก่อนการพัฒนาโปรแกรมทุกครั้ง ผู้พัฒนาระบบจะต้องทำการรวบรวมความต้องการของโปรแกรม (เป็นขั้นตอนแรกของการพัฒนาโปรแกรมตามกระบวนการ SDLC) เพื่อนำมาวิเคราะห์ และออกแบบระบบในขั้นตอนต่อไป ผลจากการวิเคราะห์ความต้องการในบางครั้งพบว่าเราไม่จำเป็นต้องพัฒนาโปรแกรมขึ้นมาใหม่ เนื่องจากโปรแกรมสำเร็จรูปบางตัวสามารถตอบโจทย์ความต้องการเหล่านั้นได้แล้ว เช่น Joomla, Moodle, WordPress เป็นต้น แต่ถ้าหากไม่ตอบโจทย์ความต้องการ ก็จะเป็นหน้าที่ของผู้พัฒนาที่จะต้องพัฒนาระบบขึ้นมาเอง ซึ่งในการที่จะพัฒนาระบบได้นั้น ผู้พัฒนาจะต้องมีความรู้พื้นฐานที่เกี่ยวข้อง เพื่อที่จะได้นำมาประกอบการตัดสินใจเลือกเทคนิคเหล่านั้นได้อย่างเหมาะสม ในบทความนี้เราจะมาทำความเข้าใจพื้นฐานที่ควรรู้สำหรับนักพัฒนาเว็บไซต์มือใหม่ได้แก่ความหมายของ Front-end,  Back-end และ Front-end Framework Front-end สำหรับเว็บไซต์ คือส่วนที่แสดงผล หรือหน้าเว็บไซต์ที่เราคุ้นเคยกัน เปรียบได้กับหน้าบ้าน ซึ่งเป็นส่วนที่ User โดยทั่วไปสามารถเห็น และเข้ามาใช้งานได้ เช่น หน้าเว็บที่ท่านกำลังอ่านอยู่ ณ ขณะนี้ เป็นต้น ซึ่งหน้าเว็บเหล่านี้จะต้องมีการออกแบบให้สวยงาม เพื่อสร้างความน่าสนใจของเนื้อหาเว็บไซต์ให้มากยิ่งขึ้น รวมทั้งการออกแบบในส่วนของการจัดวางเมนู การจัดตำแหน่งของเนื้อหาเว็บ การกำหนดรูปแบบ และขนาด Text เป็นต้น Back-end ในที่นี้หมายถึงส่วนหน้าจอการจัดการข้อมูล ไม่ว่าจะเป็นการเพิ่ม แก้ไข ลบเนื้อหาเว็บไซต์ (Content) สำหรับผู้ดูแลเว็บไซต์ (Admin) ตัวอย่างเช่น เนื้อหาที่ท่านกำลังอ่าน ก็มาจากการเพิ่มข้อมูล หรือเขียน Blog ผ่านหน้าจอการจัดการ ข้อมูลนั่นเอง สังเกตได้ว่าในการพัฒนาเว็บไซต์ทั้งส่วน Front-end หรือ Back-end ไม่ว่าจะเป็นเว็บใดก็ตามจะมีการนำเสนอเนื้อหาโดยใช้ภาษา HTML จากนั้นจึงจัดรูปแบบให้สวยงามด้วย CSS และเพิ่มลูกเล่นให้กับเว็บไซต์ให้น่าสนใจด้วย JavaScript ซึ่งเดิมทีการสร้างเว็บไซต์แต่ละเว็บนั้นเราจะเริ่มจากเขียน HTML, CSS และ JavaScript เองตั้งแต่ต้นจนจบ หรืออาจจะใช้เครื่องมือช่วยเช่น Dreamweaver แต่ในปัจจุบันนี้เราไม่จำเป็นต้องเริ่มจากศูนย์อีกแล้ว เนื่องจากได้มีการเขียนโค้ด HTML, CSS และ JavaScript แบบสำเร็จรูปรวมกันไว้เป็นชุดให้นักพัฒนาเว็บไซต์ได้ดาวน์โหลดไปใช้งานต่อได้เลย ซึ่งชุดโค้ดเหล่านี้จะทำหน้าที่ในการจัดวาง Layout ตัวอักษร ปุ่ม เมนู ฯลฯ นักพัฒนาก็แค่คัดลอกโค้ดส่วนที่ต้องการไปใช้ได้เลย เราเรียกชุดของโค้ดดังกล่าวนี้ว่า Front-end Framework ตัวอย่างของ Front-end Framework ที่นิยมใช้งานกัน ได้แก่ Bootstrap, ZURB foundation เป็นต้น  โดยในบทความถัดไปจะเป็นการแนะนำการพัฒนาเว็บไซต์ด้วย Bootstrap