Web Design and Implementation Introduction to web design and web technologies อ.ธวัชชัย สลางสิงห์

Web design Introduction ความสำคัญของการออกแบบ เว็บไซต์ ประเภทต่างๆของเว็บไซต์ ขั้นตอนการออกแบบเว็บไซต์ Technology

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

การออกแบบเว็บไซต์ กิจกรรมที่เกี่ยวข้อง กำหนด เป้าหมายของเว็บไซต์ ระบุกลุ่มผู้ใช้ การจัดระบบข้อมูล การสร้างระบบเนวิ เกชั่น การออกแบบหน้าเว็บ กราฟฟิก สี ตัวอักษร การจัดรูปวาง ข้อความบนเว็บ

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

ประเภทต่างๆของเว็บไซต์  ประเภทต่างๆของเว็บไซต์ Dynamic website เว็บไซต์สามารถโต้ตอบกับผู้ใช้งานได้ แบบ real time Statistic website เว็บไซต์สามารถแสดงผลข้อมูลได้เร็ว ไม่ ซับซ้อน แต่ไม่สามารถติดต่อกับผู้ใช้ได้ แบบ real time

ประเภทของเว็บไซต์ เว็บท่าหรือเว็บวาไรตี้ (variety web) เป็นเว็บที่ให้บริการต่างๆ บริการเครื่องมือค้นหา ที่รวบรวมลิงค์ของเว็บไซต์ที่น่าสนใจมากมาย บริการที่เกี่ยวกับเรื่องราวที่มีสาระและบันเทิงหลากหลายประเภท เป็นแหล่งแลกเปลี่ยนความคิดเห็นของผู้คนในสังคมในหรือเรียกว่า เว็บ ชุมชน (community web)  คือเว็บที่ให้บริการพื้นที่แก่กลุ่มคนผู้ที่มีความสนใจใน เรื่องเดียวกันได้เข้ามาแลกเปลี่ยนและแสดงความคิดเห็นกัน

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

ประเภทของเว็บไซต์ เว็บข้อมูล (information site) เป็นเว็บที่ให้บริการเกี่ยวกับการสืบค้นข้อมูล ข่าวสาร หรือข้อเท็จจริง ต่างๆ ตนเองขึ้นมา เพื่อเป็นช่องทางให้ประชาชนหรือกลุ่มบุคคลที่ สนใจ ได้เข้ามาศึกษาค้นคว้าข้อมูลที่เกี่ยวข้องกับองค์กรของตนได้ อีกทั้งยังเป็นการสร้างโอกาสในการประชาสัมพันธ์และสร้างความเข้าใจ อันดีให้เกิดแก่ประชาชนในสังคมอีกด้วย

ประเภทของเว็บไซต์ เว็บธุรกิจหรือการตลาด (business / marketing site) เป็นเว็บไซต์ที่มักสร้างขึ้นโดยองค์กรธุรกิจต่างๆ มีจุดมุ่งหมายหลักใน การประชาสัมพันธ์องค์กรและเพิ่มผลกำไรทางการค้า โดยเนื้อหาส่วน ใหญ่หรือเกือบทั้งหมดมักจะเป็นการนำเสนอที่มีความน่าสนใจและตรง ใจกลุ่มเป้าหมายมากที่สุด ทั้งนี้เพื่อผลกำไรทางธุรกิจ

ประเภทของเว็บไซต์ เว็บการศึกษา (education site) เป็นเว็บที่สร้างขึ้นโดยสถาบันการศึกษาต่างๆ หรือ องค์กรทั้งภาครัฐและเอกชนที่มีนโยบายในการเผยแพร่ ความรู้ และให้โอกาสในการค้นคว้าหาข้อมูลเพื่อ การศึกษาแก่นักเรียน นิสิต นักศึกษา รวมถึง ประชาชนทั่วไป เว็บการศึกษาให้ข้อมูลเกี่ยวกับการ เรียนรู้ทั้งแบบที่เป็นทางการและไม่เป็นทางการ เว็บที่ เกี่ยวกับการศึกษาโดยตรงนั้น ได้แก่เว็บของ สถาบันการศึกษา ห้องสมุด และเว็บที่ให้บริการการ เรียนรู้แบบออนไลน์ที่เรียกว่าอี-เลิร์นนิ่ง (e- learning) นอกจากนี้แล้วยังรวมถึงเว็บที่สอนหรือให้ ความรู้เกี่ยวกับเรื่องต่างๆ เช่น การทำเว็บ การ ทำอาหาร การถ่ายภาพ การเขียนโปรแกรม ฯลฯ

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

ประเภทของเว็บไซต์ ประเภทของเว็บไซต์ เว็บองค์กรที่ไม่แสวงหาผลกำไร (None-profit organiztion site) เป็นเว็บที่สร้างขึ้นโดยกลุ่มบุคคลหรือองค์กรที่ช่วยเหลือสังคมโดยที่ ไม่หวังผต่างๆ ที่มีนโยบายในการสร้างสรรค์ลกำไรหรือค่าตอบแทน เช่น สมาคม ชมรม มูลนิธิ และโครงการต่างๆ โดยอาจมี จุดประสงค์เฉพาะที่แตกต่างกัน เช่น เพื่อทำความดี พิทักษ์ สิ่งแวดล้อม ปกป้องสิทธิมนุษยชน รณรงค์ไม่ให้สูบบุหรี่

ประเภทของเว็บไซต์ ประเภทของเว็บไซต์ เว็บส่วนตัว (Personal site) เป็นเว็บของคนๆ เดียว เพื่อนฝูง หรือครอบครัวก็ได้ โดยอาจจัดทำ ขึ้นด้วยเหตุผลที่แตกต่างกัน เช่น แนะนำกลุ่มเพื่อน โชว์รูปภาพ แสดงความคิดเห็น เขียนไดอารี่ประจำวัน นำเสนอผลงาน ถ่ายทอด ประสบการณ์เกี่ยวกับสิ่งที่เชี่ยวชาญหรือสนใจ อาจทำเป็นเว็บไซต์หรือ เป็นเพียงเว็บเพจหน้าเดียวก็ได้

ประเภทต่างๆของเว็บไซต์  ประเภทต่างๆของเว็บไซต์ Web as software เว็บไซต์ที่ออกแบบ task oriented Web as hypertext system เว็บไซต์ที่ออกแบบ information oriented

ประเภทต่างๆของเว็บไซต์  ประเภทต่างๆของเว็บไซต์ Web as software

ประเภทต่างๆของเว็บไซต์  ประเภทต่างๆของเว็บไซต์ Web as Hypertext

ขั้นตอนการออกแบบเว็บไซต์ Strategy กำหนดเป้าหมาย วางแผน งาน user needs - ใครเป็นกลุ่มเป้าหมายที่จะ มาใช้งาน เพราะอะไร ศึกษาความ ต้องการของผู้ใช้ site objectives - ใครเป็นคนต้องการ ออกแบบ และออกแบบไปทำไม

ขั้นตอนการออกแบบเว็บไซต์ Scope – ขอบเขตของเว็บไซต์ functional specification - มีฟังก์ชั่นการ ทำงานอะไรบ้าง content requirements – มีเนื้อหาของ เว็บไซต์มีอะไรบ้าง

ขั้นตอนการออกแบบเว็บไซต์ Structure Information Architecture Interaction Design

ขั้นตอนการออกแบบเว็บไซต์ Skeleton - layout Interface design Navigation design information design Readability Understandability

ขั้นตอนการออกแบบเว็บไซต์ colour Typography Visual element Branding Multimedia Emotion

Web design technologies HTTP Servers & Browsers HTML CSS Javascript

Web design technologies Servers & Browsers – Web Server, web clients, browsers, other site. HTML – HyperText Markup Language - standard language, structurally describes content CSS – Cascading Style Sheet – Separate style from content Javascript – provide multi- function available for website