รายงานการสร้างเว็บ 20

รายงาน วชิ าการสร้างและจดั การเว็บไซต์ E-Commert รหัสวชิ า 30901-2009 จัดทำโดย นางสาว วราภรณ์ จบั ทอง ระดับประกาศนยี บัตรวชิ าชีพชน้ั สูง (ปวส.1) สาขาวชิ า เทคโนโลยีสารสนเทศ สาขางาน นกั พฒั นาซอฟแวร์ เสนอ คณุ ครู พริ ฬุ ห์พชิ ญ์ ลือโฮ้ง รายงานน้เี ป็นสว่ นหนง่ึ ของวิชาการสรา้ งและจัดการเวบ็ ไซต์ ภาคเรยี นท่ี 2 ปีการศึกษา 2565 วทิ ยาลยั อาชีวศึกษาแพร่

ก คำนำ รายงานเลม่ น้ีจัดขึน้ เพื่อเป็นสว่ นหนึ่งของวิชาการสร้างและการจดั การเว็บไซต์ รหัสวิชา 30901-2009 ระดบั ชน้ั ปวส.1 เพอ่ื เรียนรู้ส่ือการตลาดบนสอื่ สังคมออนไลนไ์ ด้เข้ามามี บทบาทและมอี ิทธิพลตอ่ ผบู้ ริโภคเปน็ อยา่ งมาก เนื่องจากผ้คู นในยคุ สมัยนีใ้ ความสำคญั ในการดำเนิน ชีวติ ควบค่ไู ปกบั สื่อออนไลน์ตา่ งๆมากกวา่ สอ่ื อน่ื ๆ เพราะฉะน้ันจึงทำใหเ้ กิดการทำการตลาดบนสอื่ สังคม สามารถจะเข้าถงึ ผู้บรโิ ภคได้งา่ ยและสะดวกรวดเร็วกวา่ ช่องทางอ่ืนๆ และยงั ตอบสนอง ตอ้ งการความรับรู้ของคนในยคุ ปจั จบุ นั ได้เป็นอย่างดี ผูจ้ ดั ทำคาดหวงั เป็นอย่างยิง่ วา่ การจดั ทำเอกสารฉบับนจี้ ะมขี ้อมลู ท่ีเปน็ ประโยชน์ หากมีข้อผดิ พลาด ยินดีรบั ฟงั ข้อเสนอแนะเพื่อพฒั นา ปรบั ปรุงในโอกาสต่อไป นางสาววราภรณ์ จับทอง ผูจ้ ัดทำ

สารบญั ข เรอื่ ง หน้า คำนำ ก สารบญั ข บทที่ 1 ท่มี าในการจดั ทำเว็บไซต์ บทท่ี 2 หลังบ้านของเว็บไซต์ (ภาพ) 1-3 บทท่ี 3 หน้าบ้านของเว็บไซต์ (ภาพ) 4-6 บทท่ี 4 ผลการประกอบการ 7-8 บทท่ี 5 ประโยชน์ และแนวทางการนำไปพัฒนาต่อ 9 ผู้จดั ทำ 10-11 12

1 บทท่ี 1 ท่ีมาในการจัดทำเว็บไซต์ จดุ เรม่ิ ตน้ และแนวทางการสร้างเวบ็ ไซต์ Wix เกดิ จากความคิดสร้างสรรค์ของผ้รู ่วมกอ่ ตง้ั บรษิ ัท 3 คน คือ Avishai Abrahami, Nadav Abrahami และ Giora Kaplan ความคิดนี้เกิดขึ้น (บนชายหาด) ขณะที่พวกเขากำลังสร้างเว็บไซต์เพื่อเป็นรากฐานให้กับ สตาร์ตอัปอีกรายหนึ่ง ทั้งสามพบว่าการสร้างเว็บไซต์ด้วยตนเองนั้นยุ่งยาก น่าหงุดหงิด และมีค่าใช้จ่ายสูง ประสบการณ์อันน่าทกุ ข์ทรมานนี้เองทำให้เกิดไอเดียใหม่ขึ้นมา นั่นคือการสร้างแพลตฟอร์มท่ีทุกคนสามารถสร้าง เว็บไซต์ของตนเองได้โดยไม่ต้องมีทักษะการเขียนโค้ดหรือออกแบบ เป็นบริษัทจากอิสราเอล ที่ก่อตั้งเมื่อปี 2006 โดยแรกเริ่มเดิมที WIX วางตัวเองเป็น Martech กลุ่ม cloud-based web development services หรือพูด ง่ายๆก็คือระบบที่เปิดให้ User เข้าไปสร้าง Website แบบ HTML5 และ Mobile Site ได้ทางออนไลน์โดย User สามารถปรับแต่ง Website ง่ายๆโดยการลากและเลื่อนวัตถุต่างๆ ตามที่ตาเห็น และเลือกกดเซฟ และพับลิช Website นั้นๆก็ขึ้นออนไลน์ใน Internet โดยความสามารถใน Account ท่ี WIX เปิดให้ใช้งาน Free มคี วามสามารถครบครนั นำไปทำการตลาดได้เลย บทบาทและความสำคัญของเวบ็ ไซต์ ในปัจจุบนั เว็บเวบ็ ไซต์เขำ้ มามีบทบาทและมคี วามสำคัญตอ่ ชีวิตประจำวันของเราเป็นอย่างมากโดยเฉพาะ กลุ่มคน เจนวาย (Generation Y) หรือ “เด็กรุ่นใหม่” ที่เกิดระหว่างปี พ.ศ.2523-2543 อายุ 13-33 ปี เป็นกลุ่ม คนที่โตมำพร้อมกับคอมพิวเตอร์ อินเทอร์เน็ตและเทคโนโลยีไอที ทำให้วิถีชีวิตต้องการความทันสมัยและทันต่อ เหตุการณ์อยู่เสมอ เว็บไซต์จึงเป็นแหล่งสารสนเทศที่สำคัญสำหรับทุกคน เพราะสามารถเข้าถึงข้อมูลได้อย่าง รวดเร็ว ไม่ว่าจะเป็นการติดต่อสื่อสาร การประชาสัมพันธ์ข่าว การโฆษณาสื่อต่าง ๆ ผ่านทางเว็บไซต์ หรือ แม้กระทั่งสอ่ื สงั คมออนไลน์ Social Network เชน่ Facebook หรอื Google+ หรอื Twitter ที่สามารถตอบโจทย์ การติดต่อส่อื สารไดเ้ ป็นอยา่ งดี ดงั นั้น เวบ็ ไซตจ์ ึงมบี ทบาทสำคัญเป็นอย่างมาก ทกุ องค์กรทงั้ ภาครฐั และเอกชน ได้ ให้ความสำคัญของการมีเว็บไซต์เพิม่ มากยิง่ ขึ้น โดยมีจุดประสงค์เพือ่ การประชาสัมพันธ์ หรือเพื่อการค้าขาย และ หากมีการนำเสนอเวบ็ ไซต์ในรูปแบบสวยงาม ค้นหาข้อมูลงา่ ย มีความน่าเชือ่ ถือ ก็จะได้รับความนิยมอย่างรวดเร็ว ชว่ ยเพม่ิ จำนวนผ้เู ขา้ ชมหรือลกู คา้ ไดม้ ากกว่าสือ่ ประเภทอ่ืน ๆ อีกดว้ ย – บริษัทรบั ทำเวบ็ ไซต์, รับทำเว็บไซต์

2 ข้ันตอนการสร้าง wix หลังจากเราสมคั รใชง้ าน Wix เสร็จเรียบร้อย ใหเ้ ราเลอื กข้ันตอน Create Website Wix จะข้ึนหนา้ ตา่ งมาให้เราเลือก WIX ADI กบั การสรา้ งเองผ่าน Editor โดย������������ WixADI ยอ่ มาจากคำว่า WIX artificial design intelligence โดยการสร้าง Website ผ่าน Wix ADI น้ันจะ เป็นการท่ี Wix ให้เราเลือก Theme, Business Type, Scheme สี และฟีเจอรต์ ่างๆ โดยหลักจาก เลอื กเสร็จทาง Wix จะสร้าง Website ใหต้ ามเงือ่ นไขท่ีเราเลอื กเลย หลักจากเลอื ก Theme หรอื รปู แบบแลว้ Wix ADI กจ็ ะให้เราเลอื กรปู แบบ หนา้ ท่ีต้องการใช้ในเวบ็ (ภาพดา้ นลา่ ง) ว่าเว็บเราตอ้ งการให้มีหน้า หรอื section

3 หลกั จากเลือกเงอื่ นไขตา่ งๆเสรจ็ ส้ิน ทาง Wix กจ็ ะสร้างหน้า Website ให้เราเอง แค่เลอื ก Publish ก็สามารถนำไปใช้งานได้ทนั ท…ี ......ทง้ั หมดนคี้ อื ความง่ายของ Wix ADI สว่ น Wix Editor จะเปน็ การสร้าง Website เองเตม็ รูปแบบ ผ่านการ Drag & Drop หรือลากวาง โดย ณ ปี2021 Wix เอง นอกเหนือจากการสรา้ ง Website แล้วก็ได้เพม่ิ ความสามารถดา้ น Marketing มามากมายไม่ว่าจะเปน็ • การสร้างแบบฟอร์มเก็บขอ้ มูลทุกรปู แบบ • การส่งขอ้ มลู จากฟอรม์ ไปที่ Email • การมรี ะบบ Contact List หรือระบบ CRM database ยอ่ มๆ • การมีระบบ Marketing Automation ในตัวเอง • มเี คร่ืองมอื SEOในตวั การปรบั Meta ต่างๆ • เชอ่ื มต่อกับ Martech ตวั อื่นๆได้ ไมว่ า่ จะเปน็ Google Analytic, Facebook Pixel, Google Tag Manager , Google Ads • สามารถวางแผนการตลาดหรอื Marketing Activities Planner ได้เลย

4 บทที่ 2 หลังบ้านของเว็บไซต์ (ภาพ) เมนหู ลักมเี ครื่องมือสำหรับแก้ไขหนา้ พน้ื หลังสอ่ื บล็อกของคณุ และอื่น ๆ มากมาย เราสามารถคลกิ ทโี่ มดลู หัวเรือ่ งหลกั และปอ๊ ปอปั จะปรากฏข้นึ พรอ้ มกับการต้งั ค่าโมดลู สว่ นหัว เราสามารถเปลีย่ นขนาดตัวอกั ษรข้อความภายในกล่องส่วนหวั และเพิ่มเอฟเฟกตบ์ างอย่างได้

5 ลิงก์สำหรบั แกไ้ ขหน้ารถเข็นหนา้ ขอบคณุ และการออกแบบส่วนกลางสำหรับหน้าผลิตภัณฑข์ องคณุ นอกจากน้ีคุณยังสามารถปรบั แต่งผลติ ภณั ฑ์สาธติ ได้อย่างอิสระหากทำใหส้ งิ่ ต่างๆง่ายขึน้

6 หน้าผลติ ภัณฑ์แตล่ ะหน้ามีช่องตา่ งๆใหก้ รอกและปรบั แต่ง ตั้งชื่อผลิตภณั ฑ์อปั โหลดรปู ถ่ายและทำ เครอ่ื งหมายวา่ ควรจะแสดงในรา้ นค้าออนไลน์ ยงั สามารถเพ่มิ สนิ ค้าลงในคอลเลกชั่น ทเ่ี หลอื ก็ตกแต่งตามความตอ้ งการ

7 บทที่ 3 หน้าบ้านของเว็บไซต์ (ภาพ) หนา้ Home หนา้ Gallery

8 หน้า Product หน้าการสง่ั ซ้อื

9 บทท่ี 4 ผลประกอบการ ไม่มีผลประกอบการ

10 บทท่ี 5 ประโยชน์ และแนวทางการนำไปพฒั นาต่อ ประโยชน์ • ช่วยเผยแพร่ขอ้ มูลขา่ วสารและบริการต่าง ๆ ให้เป็นทร่ี ู้จกั อย่างแพร่หลาย และช่วยลด คา่ ใชจ้ ่ายในการโฆษณาประชาสมั พันธ์ • สามารถใหบ้ รกิ ารต่าง ๆ ทีส่ ะดวกสบายและรวดเร็วทีส่ ดุ กับลกู คา้ ได้ตลอด 24 ชวั่ โมง • ไมเ่ สยี สว่ นแบง่ จากการขาย • ใชง้ บประมาณน้อย • ชว่ ยเพมิ่ ยอดขายใหก้ บั ธุรกิจ • เป็นการแนะนำบรษิ ทั เบอ้ื งต้น ทีท่ ำให้ลูกคา้ ได้เข้าถึง เป็นอนั ดบั แรก แนวทางการพัฒนาต่อ การสร้างเว็บไซต์ที่มีคุณภาพแล้วนั้น จะมีองค์ประกอบที่เกี่ยวข้องอยู่มากมาย ซึ่งผู้พัฒนา เว็บไซต์จะต้องศกึ ษาขอ้ มูล และวิเคราะห์ขอ้ มูล ก่อนถึงขั้นตอนลงมือปฏิบตั ิจริง ยกตัวอย่างเช่น วัตถุ ประสงคือของเว็บไซต์คืออะไร และกลุ่มเป้าหมายของเว็บไซต์คือใคร และเทคโนโลยีที่จำนำมาใช้ รูปแบบของเว็บเพจควรจะเป็นอย่างไร ซึ่งที่ได้กล่าวมานี้เป็นสิ่งที่ให้ความสำคัญ ซึ่งวันนี้เราจะมาพูด ในส่วนของขน้ั ตอนในการพัฒนาเวบ็ ไซต์ให้ได้ทราบกนั คะ่ 1. กำหนดเป้าหมายและวางแผน ในการพัฒนาเว็บไซต์ เราควรกำหนดเป้าหมาย และควร วางแผนล่วงหน้า ซง่ึ ตอ้ งมขี ัน้ ตอนทชี่ ัดเจน ไดแ้ ก่ 1. กำหนดวตั ถุประสงค์ของเวบ็ ไซต์ 2. กำหนดกล่มุ เปา้ หมาย 3. การเตรียมแหลง่ ขอ้ มลู 4. การพัฒนาทกั ษะของบคุ ลากร 5. การเตตรยี มทรพั ยากรตา่ งๆทจี่ ำเป็น

11 2. วิเคราะห์และจัดโครงสร้างของระบบพาณิชย์อิเล็กทรอนิกส์ ขั้นตอนนี้จะเป็นการนำ ข้อมลู ต่างๆ ที่รวบรวมไดจ้ ากขน้ั แรก ไม่วา่ จะเป็น วตั ถุประสงค์ของเว็บไซต์ คณุ ลักษณะ ขอ้ จำกัดของ กลุ่มเป้าหมาย รวมไปถึงเนื้อหาหลักของเว็บไซต์ นำมาประเมินวิเคราะห์ และจัดระบบ เพื่อให้ได้ โครงสร้างข้อมูล และข้อกำหนด โดยจะนำไปสร้างแผนผังเว็บไซต์ รูปแบบของเมนู รวมไปถึง องคป์ ระกอบต่างๆของเวบ็ เชน่ รปู ภาพและกราฟฟิก, เสียง, วดิ โี อ, มลั ตมิ ีเดีย 3. ออกแบบเว็บเพจและเตรียมข้อมูล ขั้นตอนนี้เป็นการออกแบบโครงหน้าตา และลักษณะ ในด้านกราฟฟิกของหน้าเว็บไซต์ เพื่อให้ผู้เข้าชมเว็บไซต์เกิดอารมณ์ในการรับรู้ ดังนั้นผู้ที่ทำหน้าที่นี้ ควรมีความสามารถทางด้านศิลป์พอสมควร โปรแกรมที่เหมาะจะใช้ในการออกแบบคือ Adobe Photoshop หรอื Macromedia Fireworks 4. ลงมือสร้างและทดสอบ เป็นขั้นตอนที่เว็บเพจจะถูกสร้างขึ้นมาจริงทีละหน้าๆ โดยการ อาศัยเค้าโครง และองค์ประกอบกราฟฟิกตามที่ออกแบบไว้ เนื้อหาต่างๆจะถูกนำมาใส่และ จัดรูปแบบ ลิงค์และระบบนำทางถูกสรา้ งคือประกอบเสริมต่างๆถูกวางเข้าที่ อย่างไรก็ตาม เมื่อลงมอื สร้างเว็บเพจจริงๆ เราอาจจะพบว่าสิ่งที่ได้ออกแบบไว้แล้ว บางอย่างไม่เหมาะสม หรือควรได้รับการ ปรบั แตง่ กส็ ามารถทำไดเ้ ชน่ กัน 5. เผยแพรแ่ ละส่งเสรมิ ให้เปน็ ท่ีรจู้ กั โดยทัว่ ไปการนำเว็บไซตข์ ึน้ เผยแพรบ่ นอนิ เทอรเ์ น็ต ทำด้วยการอัพโหลดไฟล์ทั้งหมด คือ HTML และไฟล์อื่นที่เกี่ยวข้อง ขึ้นไปแก้บนเซิร์ฟเวอร์ที่เราเปิด บริการไว้ การอพั โหลดเวบ็ ไซต์หรือบางคร้ังเราเรยี กว่า “พับลชิ ” ซ่ึงอาจทำดว้ ยโปรแกรมสรา้ งเว็บไซต์ 6. การดูแลและพัฒนา เมื่อเว็บไซต์ถูกเผยแพร่ออกไป ควรดูแลโดยตลอด ซึ่งหน้าที่น้ี ครอบคลุมหลายเรื่อง ตั้งแต่การตรวจสอบเว็บเซิร์ฟเวอร์ว่าไม่หยุดทำงานบ่อยๆ ลิงค์ที่เชื่อมโยคไป ภายนอกยังคงใช้ไดห้ รอื ไมค่ อ่ ยตอบคำถามท่มี ผี ูม้ าฝากไว้บนเว็บเพจ ถ้าเป็นเวบ็ ขา่ วสารก็ต้องปรับปรุง ข้อมลู ใหท้ นั สมยั อยตู่ ลอดเวลา และถา้ มกี ารใช้ฐานขอ้ มูลกต็ ้องแบ็คอพั ขอ้ มลู อย่างสมำ่ เสมอ หลังจากเว็บไซต์ได้รับการเผยแพร่ไประยะหนึ่งแล้ว เราควรปรับปรุงเพื่อให้ผู้ชมรู้สึกว่ามีความ เปลี่ยนแปลง มีความสดใหม่ ทันสมัย ไม่ล้าหลัง โดยการที่เรานำข้อมูลสถิติที่รวบรวมไว้มาพิจารณา ประกอบด้วย การเปลี่ยนแปลงทำได้ทั้งในส่วนของเนื้อหาโครงสร้างเว็บไซตแ์ ละการออกแบบหน้าตา โดยการนำเทคโนโลยีใหมๆ่ เข้ามาเพ่ิม

12 ผ้จู ัดทำ นางสาววราภรณ์ จบั ทอง เลขท่ี 20 รหัสประจำตวั 65309010022 ระดบั ประกาศนยี บตั รวชิ าชีพชน้ั สงู (ปวส.1) สาขาวิชา เทคโนโลยสี ารสนเทศ สาขางาน นกั พัฒนาซอฟต์แวร์