ในการพัฒนาเว็บไซต์ จะมีผู้ที่เกี่ยวข้องโดยตรงหลักๆ ได้แก่ 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