วชิรวิชญ์ จิวานิจ

การใช้ฟอนต์นำเสนอข้อมูลข่าวสารบนเว็บไซต์ หรือ 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 ตามลำดับ จากข้อจำกัดดังกล่าว จึงมีผลทำให้เราไม่สามารถใช้งานฟอนต์สวยๆ บนเว็บไซต์ได้ นักออกแบบเว็บไซต์จึงเลือกใช้วิธีการนำเสนอข้อมูลด้วยรูปภาพแทน โปรแกรมกราฟิกที่ใช้กันก็อย่างเช่น … Read more

สำหรับในบทความนี้ เป็นภาคต่อจาก “เตรียมความพร้อมก่อนการพัฒนา 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 ที่สำคัญๆ ก่อน เพื่อให้ … Read more

ในการพัฒนาเว็บไซต์ จะมีผู้ที่เกี่ยวข้องโดยตรงหลักๆ ได้แก่ 1. ทีมพัฒนาเว็บไซต์ หรือโปรแกรมเมอร์ อาจจะมีคนเดียว หรือทำงานกันเป็นทีมก็ได้ และ 2. ผู้ใช้ หรือลูกค้า จะเป็นผู้กำหนดความต้องการของเว็บไซต์ หลังจากที่ทีมพัฒนาเก็บรวบรวมความต้องการของลูกค้า และได้ทำการวิเคราะห์ความต้องการแล้ว ขั้นตอนถัดไป ก็จะเป็นการวางแผน ออกแบบ Layout คร่าวๆ ก่อน เพื่อให้ทีมพัฒนามีความเข้าใจที่ตรงกัน อีกทั้งยังสามารถนำเสนอต่อลูกค้า เพื่อให้ลูกค้าเห็นภาพรวมของเว็บไซต์ก่อนการลงมือออกแบบเว็บไซต์ และเขียนโค้ดจริง  เราเรียกกระบวนการออกแบบ Layout และนำเนื้อหาคร่าวๆ ในเว็บไซต์มาจัดเรียงบน Layout นี้ว่า “การทำ Wireframe” การทำ Wireframe นั้นไม่ได้มีรูปแบบตายตัว นักพัฒนาแต่ละคนอาจมีวิธีการที่แตกต่างกันไป แต่มีวัตถุประสงค์ในการทำที่เหมือนกัน คือ เพื่อให้เห็นภาพรวมของเว็บไซต์ ทำให้ทีมเข้าใจตรงกัน และพัฒนาไปในทางเดียวกัน ตัวอย่างเครื่องมือที่ใช้ทำ Wireframe ที่ทำได้ง่ายที่สุด คือการใช้ดินสอ วาด Layout ลงบนกระดาษ และจัดเรียงเนื้อหาคร่าวๆ ดังรูป หรือจะใช้โปรแกรมคอมพิวเตอร์ช่วยในการทำก็ได้แล้วแต่ความถนัดของแต่ละคน ซึ่งโปรแกรมคอมพิวเตอร์ที่ช่วยในการทำ Wireframe จะมีให้เลือกใช้มากมาย … Read more

ในปัจจุบันนี้ต้องยอมรับว่าระบบอินเตอร์เน็ตเข้ามามีบทบาทสำคัญต่อการดำเนินกิจกรรมต่างๆ มากมาย ทั้งในด้านสังคม เศรษฐกิจ การเมือง การศึกษา หรือแม้กระทั่งวงการทหาร ดังนั้นแนวโน้มของโปรแกรมคอมพิวเตอร์จึงเน้นไปทางด้านโปรแกรมที่สามารถทำงานผ่านระบบอินเตอร์เน็ตได้ ประกอบกับอุปกรณ์ในการเข้าถึงอินเตอร์เน็ตมีความหลากหลายมากยิ่งขึ้นจึงมีผลต่อการพิจารณาเทคนิค วิธีการต่างๆ ที่จะนำมาใช้ในการพัฒนาระบบของผู้พัฒนาว่าควรจะเลือกใช้เทคโนโลยีใดบ้าง เพื่อให้โปรแกรมที่พัฒนาขึ้นมีความทันสมัย รองรับการใช้งานบนอุปกรณ์ต่างๆ ได้เป็นอย่างดี เนื่องจากอุปกรณ์ต่างๆ ไม่ว่าจะเป็น Computer, Tablet หรือ Mobile จะมีโปรแกรมพื้นฐานที่เรียกว่า Web Browser สำหรับเข้าใช้งานเว็บไซต์ต่างๆ อยู่แล้ว ดังนั้นการพัฒนาโปรแกรมในรูปแบบ Web หรือที่เรียกว่า Web Application จึงเป็นทางเลือกที่ได้รับความนิยมเป็นอย่างมาก สามารถตอบสนองความต้องการของผู้ใช้งานได้เป็นอย่างดี ก่อนการพัฒนาโปรแกรมทุกครั้ง ผู้พัฒนาระบบจะต้องทำการรวบรวมความต้องการของโปรแกรม (เป็นขั้นตอนแรกของการพัฒนาโปรแกรมตามกระบวนการ SDLC) เพื่อนำมาวิเคราะห์ และออกแบบระบบในขั้นตอนต่อไป ผลจากการวิเคราะห์ความต้องการในบางครั้งพบว่าเราไม่จำเป็นต้องพัฒนาโปรแกรมขึ้นมาใหม่ เนื่องจากโปรแกรมสำเร็จรูปบางตัวสามารถตอบโจทย์ความต้องการเหล่านั้นได้แล้ว เช่น Joomla, Moodle, WordPress เป็นต้น แต่ถ้าหากไม่ตอบโจทย์ความต้องการ ก็จะเป็นหน้าที่ของผู้พัฒนาที่จะต้องพัฒนาระบบขึ้นมาเอง ซึ่งในการที่จะพัฒนาระบบได้นั้น ผู้พัฒนาจะต้องมีความรู้พื้นฐานที่เกี่ยวข้อง เพื่อที่จะได้นำมาประกอบการตัดสินใจเลือกเทคนิคเหล่านั้นได้อย่างเหมาะสม ในบทความนี้เราจะมาทำความเข้าใจพื้นฐานที่ควรรู้สำหรับนักพัฒนาเว็บไซต์มือใหม่ได้แก่ความหมายของ Front-end,  Back-end และ Front-end … Read more