จัดทำโดย 1. นาย กฤษฎา ประมังคะตา รหัสนักศึกษา นาย พลกาญจน์ เผือกเทศ รหัส นักศึกษา อาจารย์ที่่ปรึกษา อ. สุเทพ ทัพธวัช การทำเรสปอนซีฟเว็บไซต์ยูอมิวเลท ดอทคอม Responsive website Uamulet.com

ที่ตั้ง : เลขที่ 328/3 ถนนลาดหญ้า แขวง คลองสาน เขตคลองสาน กรุงเทพฯ ชื่อบริษัท ซอฟท์เดบู จำกัด

1. เป็นผู้แทนจำหน่ายผลิตภัณฑ์ซอฟท์แวร์จาก ต่างประเทศ 2. พัฒนาระบบทาง e-Business ให้แก่องค์กรทั้ง ภาครัฐและเอกชนชั้นนำหลายแห่ง 3. จัดทำโปรแกรมคอมพิวเตอร์ตามวัตถุประสงค์ ของผู้ใช้ ลักษณะการประกอบการของสถาน ประกอบการ

ตำแหน่งโปรแกรมเมอร์ ลักษณะงานคือ 1. เพิ่มข้อมูลลงในโปรแกรมเพื่อแสดงผลในหน้า เว็บไซต์ 2. ตรวจสอบความถูกต้องในแต่ละเว็บไซต์ที่ได้รับ มอบหมาย 3. จัดทำรายงาน โดยการเอ็กพอร์ตเป็นไฟล์ PDF,Word,Excel ซึ่งเขียนจาก.net 4. พิมพ์งานจากเอกสารลงใน Word,Excel 5. ติดตั้งไดร์เวอร์ printer แล้วพิมพ์เอกสารเข้า เล่มคู่มือการใช้งานเว็บไซต์ ชื่อตำแหน่งงานและรายละเอียดที่ได้รับ มอบหมาย

นาย ไพชยนต์ ชัยธีระยานนท์ ตำแหน่ง หัวหน้าโปรแกรมเมอร์ ปฏิสัมพันธ์กับคนในบริษัท - มีการพูดคุยกันทั้งในและนอกบริษัท - มีการช่วยเหลือเป็นอย่างดีจากพี่ๆในบริษัท ทำ ให้ปรับตัวได้ไม่ยาก ชื่อและตำแหน่งพนักงานที่ปรึกษา

เว็บไซต์ uamulet.com ได้จัดทำมานานแล้ว แต่ไม่สามารถรองรับขนาดหน้าจอในการเข้าดูจาก mobile,tablet ทำให้เป็นเรื่องยากในการใช้งาน เว็บไซต์จาก mobile เพราะต้องเลื่อน scrollbar เพื่อชมเว็บไซต์ทั้งหมด ความเป็นมาและ ความสำคัญของปัญหา

1. พัฒนาเว็บไซต์ยูอมิวเลทดอทคอมให้สามารถ รองรับกับขนาดหน้าจอ สมาร์ทโฟน แท็บเล็ตและ เดสท็อปด้วยวิธีเรสปอนซีฟ วัตถุประสงค์ของ โครงงาน

ประโยชน์ที่คาดว่าจะได้รับ 1. เว็บไซต์มีความยืดหยุ่นตามขนาดของหน้าจอ ใช้งานง่าย สะดวกกะทัดรัด 2. เว็บไซต์สามารถแสดงผลได้สวยงามบนขนาด หน้าจอที่แตกต่าง 3. เว็บไซต์ลดเนื้อหาที่ไม่จำเป็น ทำให้การใช้งาน เว็บไซต์มีความรวดเร็ว 4. เว็บไซต์สามารถใช้ได้กับขนาดหน้าจอของ อุปกรณ์ที่หลากหลาย 5. ประหยัดเวลาและค่าใช้จ่ายได้มากกว่าการทำ 2 เว็บไซต์

1. เขียนโค้ดภาษา c# ลงในเว็บไซต์ยูอมิวเลท ดอทคอมซึ่งมีการทำงานแบบเรสปอนซีฟ 2. คัดเลือกเนื้อหาใหเ้หมาะสมกับขนาดของ หน้าจอ เพื่อการแสดงผลที่สวยงาม 3. รองรับระบบปฏิบัติการดังต่อไปนี้ - Windows รองรับ IE 8-11, Chrome, Firefox, Opera และไม่รองรับ Safari - Android รองรับ Chrome, Firefox และไม่รองรับ Opera, Safari, IE - iOS รองรับ Chrome, Safari และไม่รองรับ Opera, IE - Mac OSX รองรับ Chrome, Firefox, Opera, Safari ไม่รองรับ IE ขอบเขตของโครงงาน

ขั้นตอนการ ดำเนินงาน พ. ค.58 มิ. ย.58 ก. ค.58 ส. ค รวบรวม ความ ต้องการ 2. วิเคราะห์ ระบบ 3. ออกแบบ ระบบ 4. พัฒนา ระบบ 5. ทดสอบ ระบบ 6. จัดทำ เอกสาร ขั้นตอนและวิธีการดำเนินงาน

การรวบรวมข้อมูลและศึกษาข้อมูลโครงงาน โดย ได้ศึกษาการทำ Responsive และศึกษา HTML,CSS,Javascript จากเว็บไซต์ต่างๆ และ

วิเคราะห์ระบบ โดยการศึกษาองคป์ระกอบท้งัหมดของเวบ็ไซต์ Uamulet.com และวเิคราะห์ถึง วตัถุประสงคใ์นการทาเวบ็ไซต์ Uamulet.com ให เ้ป็นแบบ Responsive เพื่อใหผ้ใู้ชง้านได้ ประโยชน์ สูงสุด

ออกแบบระบบ โดยออกแบบส่วนต่างๆของ เว็บไซต์ใหม่ ให้มีข้อมูลที่จำเป็นและกะทัดรัด 1. ตัดส่วน ที่เป็น โฆษณา Banner ออก เพราะไม่จำเป็นสำหรับ ดูใน Tablet, Smart phone เพราะจะทำให้เว็บช้า และดูไม่เป็น ระเบียบ 2. ตารางข้อมูลและเมนูต่างๆ ทำใหม่ใน รูปแบบสไลด์ เพื่อให้มีพื้นที่มากขึ้น เพื่อให้ เหมาะกับหน้าจอที่มีขนาดเล็กลง แบ่งได้ 2 วิธี คือ แบบสปริง และ แบบ bootstrap

สรุป ผลที่ได้รับจากการทำเว็บ สามารถทำให้เว็บเกิดความยืดหยุ่นตามขนาด หน้าจอของ smart phone tablet และจอปกติ ได้ ทำให้มีความรู้ความเข้าใจในด้าน ภาษา c# และการใช้ bootstrap เข้ามาทำงานมากขึ้น และสามารถทำได้ตามจุดประสงค์ที่เราตั้งเอาไว้ ซึ้งประโยชน์ที่องค์กรจะได้รับคือความพึ่งพอใจ ของลูกค้า ซึ่งเป็นที่ต้องการของลูกค้าสมัยใหม่ ที่หันมาใช้ smart phone เป็นส่วนใหญ่

อุปกรณ์และเครื่องมือที่ใช้ ฮาร์ดแวร์

ซอฟต์แวร์