เอกสารประกอบการเรียนย วิชา Web Design and Development
รู้จักการทำงานของเว็บไซต์เบื้องต้น
Get to know the basic website functions.
ปัจจุบันการสร้างเว็บไซต์ได้พัฒนาจากเดิมอย่างมากมีแนวทางต่างจากเว็บไซต์รุ่นเก่า เรียกว่าเว็บยุคใหม่ เราคงปฏิเสธไม่ได้ว่าการรับข้อมูลข่าวสารและอุปกรณ์การแสดงผลที่สามารถเข้าถึงผู้ใช้มีหลากหลายมากขึ้น เช่น Smartphone , Tablet , Notebook , PC , Laptop เป็นต้น
ซึ่งอุปกรณ์ประเภท Mobile Device แนวโน้มมีมากขึ้น การเข้าถึงอินเทอร์เน็ตสามรถเข้าได้ทุกที่
ทุกเวลา และอุปกรณ์การเข้าหลากหลาย ดังนั้นการออกแบบเว็บไซต์ต้องออกแบบให้แสดงผลได้ยืดหยุ่น เนื้อหาต้องให้เหมาะสมกับหน้าจอเพื่อให้ผู้ชมเห็นเนื้อหาได้พอดีกับหน้าจอ จึงมีการออกแบบเว็บเพจแบบ Responsive ที่สามารถปรับขนาด ย่อ ซ่อน หรือขยายบนอุปกรณ์ที่ต่างกัน โดยใช้ URL เดียวกัน เน้นการตอบสนองการใช้งานที่ง่าย สำหรับการแตะเปิด หรือ ปิด หรือเลือกด้วยนิ้วของผู้ใช้ในหน้าจอขนาดที่ต่างกัน
Responsive Web Design การแสดงผลเว็บไซต์ที่รองรับทุกหน้าจอการทำงาน
ถ้าเป็นสมัยก่อนการออกแบบหรือการสร้างเว็บไซต์นั้นจะต้องออกมาหลายๆ เวอร์ชั่น
แต่ปัจจุบัน Responsive Web คือ เว็บไซต์ที่สามารถรองรับการทำงานบนหน้าจออุปกรณ์เครือข่ายได้อุปกรณ์ เช่น Desktop Internet, Mobile Internet ( ipad, iphone, android, windows mobile อื่น ๆ ) ซึ่งอุปกรณ์เหล่านี้จะมีหน้าจอแตกต่างกันไป ตามขนาดความกว้างของเครื่อง โดยใช้ Code และ URL เดียวกันซึ่งนักเรียนต้องเรียนรู้เพิ่มเติม
ปัจจุบัน Responsive Web Design : คือแนวคิดการออกแบบแนวใหม่ การออกแบบจะมีการปรับเปลี่ยน css ที่ใช้ในการทำเว็บไซต์ เพื่อให้สามารถแสดงผลได้ทุก ๆ อุปกรณ์ ซึ่งจะใช้ URL ร่วมกัน แต่การแสดงผลในแต่ละอุปกรณ์แตกต่างกันไป
ข้อดีของ Responsive Web Design
• สามารถรองรับการแสดงผลได้ทุกหน้าจอ ในรูปแบบที่แตกต่างกันไป เช่นผ่านทางอุปกรณ์คอมพิวเตอร์ จะเป็นหน้าจอที่สมบูรณ์แบบ แต่หากผ่านทางอุปกรณ์มือถือ จะมีการเรียงลำดับเมนูลงมาเรื่อย โครงสร้างการออกแบบจะขึ้นอยู่กับผู้พัฒนา
• เพิ่มความสะดวกสบายสำหรับผู้ใช้งาน สามารถใช้งานได้โดยผ่าน URL ตัวเดียวกัน โดยไม่ต้องมีการกำหนดเวอร์ชั่นนี้สำหรับอุปกรณ์มือถือเท่านั้น ซึ่งมีผลดีในด้าน SEO ด้วย
• การแก้ไขข้อมูล แก้ไขข้อมูลในที่เดียวแสดงผลทุกอุปกรณ์
ข้อเสียของ Responsive Web Design
• ไม่สามารถรองรับการทำงาน พวก flash หรือพวก Javascript หรือรูปภาพที่มีขนาดใหญ่ได้
• เนื่องจากอุปกรณ์มือถือแสดงหน้าจอขนาดเล็ก ผู้พัฒนาอาจจะต้องมีการตัดเมนูบางส่วนที่ไม่จำเป็นสำหรับผู้ใช้ ออก
• ในการออกแบบต้องมีการจัดวางโครงสร้างให้ดี เช่น html5 css ให้เหมาะสม
• การปรับปรุงโครงสร้าง ภายหลังจะแก้ไขยาก อาจจะทำให้โครงสร้างการแสดงผลบ้างส่วนมีปัญหาได้
ก่อนที่เราจะสร้างเว็บไซต์ เราต้องทำความรู้จักเว็บไซต์(Web Site) พื้นฐานก่อนว่าเนื้อหาต่างๆ ที่เราจะนำมาสร้างหรือจัดวางบนเว็บไซต์นั้น ต้องมีอะไรบ้าง ประกอบไปด้วยเนื้อหาประเภทไหนบ้างเพื่อการออกแบบได้อย่างเหมาะสม การเริ่มต้นการสร้างเว็บเพจ เราควรทราบถึงความรู้พื้นฐานเกี่ยวกับการสร้างเว็บก่อน เพื่อจะทราบถึงความหมายและหลักการทำงานของเว็บว่าเป็นอย่างไร
คำศัพท์พื้นฐานเกี่ยวกับการสร้างเว็บไซต์
อินเทอร์เน็ต (Internet) คืออะไร
เป็นเครือข่ายคอมพิวเตอร์ที่ใหญ่ที่สุดในโลกซึ่งรวมเอาเครือข่ายย่อยเป็น จำนวนมากต่อเชื่อมภายใต้มาตรฐานเดียวกันจนเป็น เครือข่ายคอมพิวเตอร์ขนาดใหญ่ ทำให้ทั่วโลกเชื่อมโยงกัน เป็นเครือข่ายเดียวกันได้ในแพลตฟอร์มของ เวิลด์ไวด์เว็บ (World Wide Web) อินเทอร์เน็ต (Internet) เป็นเครือข่ายขนาดใหญ่ที่เชื่อมต่อเครือข่ายคอมพิวเตอร์ขององค์กรธุรกิจ
หน่วยงานของรัฐบาล สถานศึกษา ตลอดจนเชื่อมโยงคอมพิวเตอร์ส่วนบุคคลเข้าไว้ด้วยกัน ทำให้ข้อมูลสารสนเทศ สินค้า และบริการที่นำเสนอผ่านเครือข่ายคอมพิวเตอร์เหล่านี้สามารถเข้าถึงได้จาก คอมพิวเตอร์หรืออุปกรณ์อื่นๆ จากที่ต่างๆ ไม่ว่าจะเป็นบ้าน สำนักงาน โรงเรียน ชายทะเล หรือร้านอาหารทั่วโลก
ในปัจจุบันมีคนจากทั่วโลกนับพันล้านคนที่เข้าถึงบริการบนอินเทอร์เน็ต เช่น เวิลด์ไวด์เว็บ facebook อีเมล์ (e-mail) พาณิชย์อิเล็กทรอนิกส์ (e-commerce) ห้องคุย (chat room) การส่งสารทันที (instant messaging) และวอยซ์โอเวอร์ไอพีหรือวีโอไอพี (Voice over IP: VoIP)
เวิล์ดไวด์เว็บ (World Wide Web) คืออะไร?
เวิลด์ไวด์เว็บ (World Wide Web : WWW ) หรือเรียกสั้นๆ ว่าเว็บ เป็นการให้บริการข้อมูลแบบไฮเปอร์เท็กซ์ (hypertext) ที่ประกอบไปด้วยเอกสารจำนวนมากที่มีการเชื่อมโยงกัน ซึ่งเป็นแหล่งของข้อมูลขนาดใหญ่ที่ผู้ใช้อินเทอร์เน็ตสามารถเข้าถึงผ่านโพรโทคอลที่เรียกว่า เอชทีทีพี (Hypertext Transfer Protocol: HTTP) เวิลด์ไวด์เว็บ (World Wide Web) เป็นอินเทอร์เน็ตชนิดหนึ่งที่อยู่ในรูปแบบของกราฟิกและมัลติมีเดีย ซึ่งประกอบด้วยข้อความ (Text) ภาพ (Graphic) เสียง (Sound) และ ภาพเคลื่อนไหว (Movie) เป็นต้น ผู้ใช้ทั่วไปสามารถเข้าไปในเว็บได้ง่าย และจะได้รับข้อมูลครบถ้วนปัจจุบัน ถ้าพูดถึงอินเทอร์เน็ต คนทั่วไปจะเข้าใจว่าหมายถึงเว็บ ทั้งที่จริงแล้วเว็บเป็นส่วนหนึ่งของอินเทอร์เน็ตเท่านั้น
Get to know the basic website functions.
ปัจจุบันการสร้างเว็บไซต์ได้พัฒนาจากเดิมอย่างมากมีแนวทางต่างจากเว็บไซต์รุ่นเก่า เรียกว่าเว็บยุคใหม่ เราคงปฏิเสธไม่ได้ว่าการรับข้อมูลข่าวสารและอุปกรณ์การแสดงผลที่สามารถเข้าถึงผู้ใช้มีหลากหลายมากขึ้น เช่น Smartphone , Tablet , Notebook , PC , Laptop เป็นต้น
ซึ่งอุปกรณ์ประเภท Mobile Device แนวโน้มมีมากขึ้น การเข้าถึงอินเทอร์เน็ตสามรถเข้าได้ทุกที่
ทุกเวลา และอุปกรณ์การเข้าหลากหลาย ดังนั้นการออกแบบเว็บไซต์ต้องออกแบบให้แสดงผลได้ยืดหยุ่น เนื้อหาต้องให้เหมาะสมกับหน้าจอเพื่อให้ผู้ชมเห็นเนื้อหาได้พอดีกับหน้าจอ จึงมีการออกแบบเว็บเพจแบบ Responsive ที่สามารถปรับขนาด ย่อ ซ่อน หรือขยายบนอุปกรณ์ที่ต่างกัน โดยใช้ URL เดียวกัน เน้นการตอบสนองการใช้งานที่ง่าย สำหรับการแตะเปิด หรือ ปิด หรือเลือกด้วยนิ้วของผู้ใช้ในหน้าจอขนาดที่ต่างกัน
Responsive Web Design การแสดงผลเว็บไซต์ที่รองรับทุกหน้าจอการทำงาน
ถ้าเป็นสมัยก่อนการออกแบบหรือการสร้างเว็บไซต์นั้นจะต้องออกมาหลายๆ เวอร์ชั่น
แต่ปัจจุบัน Responsive Web คือ เว็บไซต์ที่สามารถรองรับการทำงานบนหน้าจออุปกรณ์เครือข่ายได้อุปกรณ์ เช่น Desktop Internet, Mobile Internet ( ipad, iphone, android, windows mobile อื่น ๆ ) ซึ่งอุปกรณ์เหล่านี้จะมีหน้าจอแตกต่างกันไป ตามขนาดความกว้างของเครื่อง โดยใช้ Code และ URL เดียวกันซึ่งนักเรียนต้องเรียนรู้เพิ่มเติม
ปัจจุบัน Responsive Web Design : คือแนวคิดการออกแบบแนวใหม่ การออกแบบจะมีการปรับเปลี่ยน css ที่ใช้ในการทำเว็บไซต์ เพื่อให้สามารถแสดงผลได้ทุก ๆ อุปกรณ์ ซึ่งจะใช้ URL ร่วมกัน แต่การแสดงผลในแต่ละอุปกรณ์แตกต่างกันไป
ข้อดีของ Responsive Web Design
• สามารถรองรับการแสดงผลได้ทุกหน้าจอ ในรูปแบบที่แตกต่างกันไป เช่นผ่านทางอุปกรณ์คอมพิวเตอร์ จะเป็นหน้าจอที่สมบูรณ์แบบ แต่หากผ่านทางอุปกรณ์มือถือ จะมีการเรียงลำดับเมนูลงมาเรื่อย โครงสร้างการออกแบบจะขึ้นอยู่กับผู้พัฒนา
• เพิ่มความสะดวกสบายสำหรับผู้ใช้งาน สามารถใช้งานได้โดยผ่าน URL ตัวเดียวกัน โดยไม่ต้องมีการกำหนดเวอร์ชั่นนี้สำหรับอุปกรณ์มือถือเท่านั้น ซึ่งมีผลดีในด้าน SEO ด้วย
• การแก้ไขข้อมูล แก้ไขข้อมูลในที่เดียวแสดงผลทุกอุปกรณ์
ข้อเสียของ Responsive Web Design
• ไม่สามารถรองรับการทำงาน พวก flash หรือพวก Javascript หรือรูปภาพที่มีขนาดใหญ่ได้
• เนื่องจากอุปกรณ์มือถือแสดงหน้าจอขนาดเล็ก ผู้พัฒนาอาจจะต้องมีการตัดเมนูบางส่วนที่ไม่จำเป็นสำหรับผู้ใช้ ออก
• ในการออกแบบต้องมีการจัดวางโครงสร้างให้ดี เช่น html5 css ให้เหมาะสม
• การปรับปรุงโครงสร้าง ภายหลังจะแก้ไขยาก อาจจะทำให้โครงสร้างการแสดงผลบ้างส่วนมีปัญหาได้
ก่อนที่เราจะสร้างเว็บไซต์ เราต้องทำความรู้จักเว็บไซต์(Web Site) พื้นฐานก่อนว่าเนื้อหาต่างๆ ที่เราจะนำมาสร้างหรือจัดวางบนเว็บไซต์นั้น ต้องมีอะไรบ้าง ประกอบไปด้วยเนื้อหาประเภทไหนบ้างเพื่อการออกแบบได้อย่างเหมาะสม การเริ่มต้นการสร้างเว็บเพจ เราควรทราบถึงความรู้พื้นฐานเกี่ยวกับการสร้างเว็บก่อน เพื่อจะทราบถึงความหมายและหลักการทำงานของเว็บว่าเป็นอย่างไร
คำศัพท์พื้นฐานเกี่ยวกับการสร้างเว็บไซต์
อินเทอร์เน็ต (Internet) คืออะไร
เป็นเครือข่ายคอมพิวเตอร์ที่ใหญ่ที่สุดในโลกซึ่งรวมเอาเครือข่ายย่อยเป็น จำนวนมากต่อเชื่อมภายใต้มาตรฐานเดียวกันจนเป็น เครือข่ายคอมพิวเตอร์ขนาดใหญ่ ทำให้ทั่วโลกเชื่อมโยงกัน เป็นเครือข่ายเดียวกันได้ในแพลตฟอร์มของ เวิลด์ไวด์เว็บ (World Wide Web) อินเทอร์เน็ต (Internet) เป็นเครือข่ายขนาดใหญ่ที่เชื่อมต่อเครือข่ายคอมพิวเตอร์ขององค์กรธุรกิจ
หน่วยงานของรัฐบาล สถานศึกษา ตลอดจนเชื่อมโยงคอมพิวเตอร์ส่วนบุคคลเข้าไว้ด้วยกัน ทำให้ข้อมูลสารสนเทศ สินค้า และบริการที่นำเสนอผ่านเครือข่ายคอมพิวเตอร์เหล่านี้สามารถเข้าถึงได้จาก คอมพิวเตอร์หรืออุปกรณ์อื่นๆ จากที่ต่างๆ ไม่ว่าจะเป็นบ้าน สำนักงาน โรงเรียน ชายทะเล หรือร้านอาหารทั่วโลก
ในปัจจุบันมีคนจากทั่วโลกนับพันล้านคนที่เข้าถึงบริการบนอินเทอร์เน็ต เช่น เวิลด์ไวด์เว็บ facebook อีเมล์ (e-mail) พาณิชย์อิเล็กทรอนิกส์ (e-commerce) ห้องคุย (chat room) การส่งสารทันที (instant messaging) และวอยซ์โอเวอร์ไอพีหรือวีโอไอพี (Voice over IP: VoIP)
เวิล์ดไวด์เว็บ (World Wide Web) คืออะไร?
เวิลด์ไวด์เว็บ (World Wide Web : WWW ) หรือเรียกสั้นๆ ว่าเว็บ เป็นการให้บริการข้อมูลแบบไฮเปอร์เท็กซ์ (hypertext) ที่ประกอบไปด้วยเอกสารจำนวนมากที่มีการเชื่อมโยงกัน ซึ่งเป็นแหล่งของข้อมูลขนาดใหญ่ที่ผู้ใช้อินเทอร์เน็ตสามารถเข้าถึงผ่านโพรโทคอลที่เรียกว่า เอชทีทีพี (Hypertext Transfer Protocol: HTTP) เวิลด์ไวด์เว็บ (World Wide Web) เป็นอินเทอร์เน็ตชนิดหนึ่งที่อยู่ในรูปแบบของกราฟิกและมัลติมีเดีย ซึ่งประกอบด้วยข้อความ (Text) ภาพ (Graphic) เสียง (Sound) และ ภาพเคลื่อนไหว (Movie) เป็นต้น ผู้ใช้ทั่วไปสามารถเข้าไปในเว็บได้ง่าย และจะได้รับข้อมูลครบถ้วนปัจจุบัน ถ้าพูดถึงอินเทอร์เน็ต คนทั่วไปจะเข้าใจว่าหมายถึงเว็บ ทั้งที่จริงแล้วเว็บเป็นส่วนหนึ่งของอินเทอร์เน็ตเท่านั้น