หลักการทั่วไปในการสร้างเว็บไซต์ ประกอบด้วย 5 ส่วน คือ (1) โค้ดคำสั่งแสดงหน้าเว็บไซต์ที่เขียนด้วยภาษาเขียนเว็บไซต์ (html, PHP, ASP, Javascript, Python) โค้ดควบคุมการแสดงผล (CSS, Javascript) และรูปภาพ/ไฟล์ที่โค้ดคำสั่งเรียกใช้ (2) พื้นที่เก็บข้อมูล (hosting) ในข้อ (1) (3) โดเมน (domain) หรือชื่อของเว็บไซต์ (4) บัญชีอีเมล์ของผู้สร้างเว็บไซต์ (admin) และ (5) โปรแกรมเปิดเว็บไซต์ (browser) มีส่วนสำคัญที่จะต้องมีค่าใช้จ่ายรายปี (ประมาณ 1 พันบาท) คือ ส่วนที่ (2) พื้นที่เก็บข้อมูล และ (3) โดเมน แต่มีทางเลือกที่จะไม่เสียค่าใช้จ่ายรายปีในส่วนนี้โดยการใช้บริการพื้นที่เก็บข้อมูล (hosting) และมีที่อยู่ของเว็บไซต์ (URL) ซึ่งไม่ใช่โดเมนแบบไม่มีค่าใช้จ่ายรายปี
สาเหตุการเขียนบทความนี้เนื่องมาจากลืมจ่ายเงินค่าจดทะเบียนโดเมน – Domain (ชื่อเว็บ .com .net .org) และค่าเช่าโฮสติ้ง – Hosting (เก็บข้อมูลเว็บ) จึงทำให้เว็บถูกปิดและข้อมูลต่างๆ ที่ทำไว้หายไปทั้งหมดถึง 2 ครั้ง ต้องโทษตัวเองที่ไม่ได้เปิดดูอีเมล์แจ้งเตือนจ่ายค่าต่ออายุซึ่งแจ้งล่วงหน้า 2-3 เดือน เคยถามผู้ให้บริการจดทะเบียนโดเมนและเช่าโฮสติ้งว่าสามารถกู้คืนได้หรือไม่ คำตอบคือได้แต่มีค่าใช้จ่ายหลายพันบาท จึงตอบปฏิเสธไป แม้ว่าจะมีการสำรองข้อมูลไว้แล้วแต่ไม่เป็นปัจจุบัน อีกทั้งยังไม่มีพื้นที่เก็บข้อมูลเว็บและไม่มีชื่อเว็บ ทำให้ต้องเริ่มต้นใหม่ทั้งหมดโดยที่ต้องอัพโหลดข้อมูลเว็บทั้งหมดขึ้นไปโฮสติ้ง ซึ่งต้องใช้เวลามากพอสมควร จึงหาแนวทางสร้างเว็บไซต์ที่มีชื่อเว็บไซต์และโฮสติ้งเก็บข้อมูลเว็บที่ไม่มีค่าใช้จ่ายรายปีและไม่หมดอายุง่ายๆ ใช้ได้ตลอดไป พอรู้มาบ้างว่า Google Sites ตอบโจทย์นี้ได้เป็นอย่างดี
โดยทั่วไปในการสร้างเว็บไซต์สามารถทำได้ 4 วิธี คือ
- วิธีที่ 1 การสร้างเว็บไซต์แบบไม่เสียค่าใช้จ่าย ด้วยการเลือกใช้ Google Sites
- วิธีที่ 2 การสร้างเว็บไซต์ด้วยระบบการจัดการเนื้อหาของเว็บไซต์ (Content Management System : CMS) เช่น WordPress, Joomla, Mambo ฯลฯ
- วิธีที่ 3 การสร้างเว็บไซต์ด้วย DreamWeaver, FrontPage ฯลฯ
- วิธีที่ 4 เขียนโค้ดซึ่งต้องอาศัยผู้ที่มีความเชี่ยวชาญด้าน HTM, CSS, PHP , MySQL, และ Javascript
นอกจากนี้ในการสร้างเว็บไซต์ยังสามารถดาวน์โหลดแม่แบบหน้าเว็บ (เทมเพลท-template) หรือ ธีม (theme) แบบไม่เสียค่าใช้จ่าย หรือเสียค่าใช้จ่าย รวมทั้งสร้างเทมเพลทด้วยโปรแกรมสำเร็จรูป เช่น Artisteer, Elemenntor, Web Builder ฯลฯ เพื่อนำมาติดตั้งในการสร้างเว็บไซต์วิธีที่ 1 และ 2
ในตอนที่ 2 นี้ จะขอแนะนำการสร้างเว็บไซต์แบบไม่เสียค่าใช้จ่ายด้วย Google Sites ซึ่งเป็นบริการอย่างหนึ่งของ Google เริ่มให้บริการตั้งแต่เดือนพฤษภาคม 2551 เป็นต้นมา ช่วงแรกเรียกว่าชุด Classic Google Sites ใช้งานได้จนถึงวันที่ 1 มกราคม 2566 ต่อจากนั้นมาพัฒนาเป็น Google Sites แบบใหม่ที่มีเครื่องมือจัดทำและตกแต่งเว็บไซต์หลายอย่างที่ใช้งานง่าย เว็บไซต์แบบเดิมที่ไม่ได้โอนย้ายมาเป็ยเว็บไซต์แบบใหม่จะถูกลบออกจากระบบโดยอัตโนมัติ
ข้อดีของการสร้างเว็บด้วย Google Sites
- ไม่ต้องเสียค่าใช้จ่ายรายปี จัดพื้นที่เว็บให้ 100 MB
- ไม่ต้องมีความรู้ภาษาเขียนเว็บ สร้างหน้าเว็บเหมือนกับการพิมพ์ในโปรแกรมเวิร์ด ใช้งานง่ายด้วยการจับลากและวาง (Drag &Drop)
- แทรก/เชื่อมโยงข้อมูลหน้าเว็บได้หลายรูปแแบ เช่น เอกสาร ชีต งานนำเสนอ ปฏิทิน รูป วิดีโอ แผนที่ ฯลฯ
- แทรกภาษาเขียนเว็บ HTML/CSS ได้เกือบทั้งหมด
- ปรับการแสดงผลหน้าเว็บแบบอัตโนมัติได้ในหลายอุปกรณ์ (พีซี โน้ตบุ๊ค แท็ปเล็ต และสมาร์ทโฟน)
- เลือกแม่แบบหน้าเว็บ หรือ ธีม (theme) หรือ เทมเพลต (template) ได้หลายรูปแบบทั้งไม่เสียค่าใช้จ่ายและเสียค่าใช้จ่าย
- ไม่ต้องสั่งบันทึกหรืออัปเดทข้อมูลที่มีการแก้ไขเปลี่ยนแปลง เพราะระบบจะบันทึกอัตโนมัติเป็นระยะๆ แต่สุดท้ายหลังจากแก้ไขเสร็จสิ้นแล้วจะต้องสั่ง เผยแพร่
- มีระบบรักษาความปลอดภัยสูง เนื่องจากใช้เซิร์ฟเวอร์ของ Google
ข้อจำกัดของการสร้างเว็บด้วย Google Sites
- ไม่มีชื่อเว็บไซต์โดยตรง แต่เป็นที่อยู่ของเว็บไซต์ (URL) ซึ่งค่อนข้างยาว เช่น ชื่อเว็บไซต์ korayanis จะมี URL http://sites.google.com/site/korayanis (ถ้าจดทะเบียนและเสียค่าใช้จ่าย ชื่อเว็บไซต์จะเป็น korayanis.com, koayanis.net) แต่มีคำสั่งที่เจ้าของเว็บไซต์สามารถใช้โดเมน .com โดยซื้อโดเมน หรือใช้โดเมนที่ลงทะเบียนไว้แล้วได้
- การแทรกรูประหว่างข้อความทำได้ไม่ค่อนสะดวก ต้องแบ่งเป็นกรอบแยกจากกันเป็นส่วนๆ เช่น ด้านบนเป็นกรอบข้อความ ถัดมาเป็นกรอบรูป และถัดมาเป็นกล่องข้อความ ต้องทำเช่นนี้ ไม่สามารถเขียนโค้ดแสดงรูประหว่างข้อความได้ ดูตัวอย่างเพจ
- การแทรกรูปที่สะดวกที่สุดคือ อัปโหลดขึ้น Google Drive แล้วใช้คำสั่งแทรกรูป ถ้าแทรกรูปจาก URL ของไฟล์รูปจะต้องเขียนโค้ด html แสดงรูปเพิ่มลงไปทุกๆ ครั้งที่แทรกรูปด้วยวิธีนี้ เช่น <img scr =”http:///___________________________/.jpg”>
- ชื่อหัวเรื่องจำกัดไม่เกิน 74 อักขระ (รวมช่องว่าง)
- ไม่สามารถเขียนโค้ดเฉพาะเพื่อประมวลผลกับฐานข้อมูลในลักษณะให้ผู้ใช้ลงทะเบียน สืบค้นข้อมูล แสดงผลลัพธ์ตามเงื่อนไข ฯ
- ไม่สามารถจัดการไฟล์ต่างๆ ได้โดยตรง เช่น อัปโหลดรูปจำนวนมากๆ ขึ้นไปยังเซิร์ฟเวอร์ครั้งเดียว
เริ่มต้นการสร้างเว็บด้วย Google Sites
การที่จะใช้บริการ Google Site จำเป็นต้องเตรียมการดังนี้
- บัญชี Gmail ไว้ให้พร้อม ถ้ายังมีต้องสมัครลงทะเบียนให้เรียบร้อยก่อน เนื่องจากจะต้องใช้บัญชี Gmail และรหัสผ่านในการยืนยันตัวตนเพื่อเข้าใช้งาน Google Sit
- ข้อมูลตัวอักษรเป็นไฟล์เวิร์ด (.docx) (คัดลอกจากเครื่อง หรือ Google Docs นำมาวางบนหน้าเว็บ)
- ไฟล์อื่นๆ ที่อัปโหลดไว้ที่ Google Drive :- รูปภาพ – Google Photos ชีต – Google Sheets งานนำเสนอ – Google Slides ตัวอย่างเว็บ Google sites
แต่อย่างไรก็ตามการสร้างเว็บไซต์ด้วย Google Sites ยังมีประโยชน์อย่างมากสำหรับมือใหม่ไม่เชี่ยวชาญในภาษาเขียนเว็บ (HTML, PHP, CSS, Javascript, MySQL) ซึ่งอยากมีเว็บไซต์เป็นของตนเองและไม่ต้องเสียค่าใช้ มาลองทำตามขั้นตอน ดังต่อไปนี้
ขั้นตอนที่ 1
ลงทะเบียน (Sign in) และกำหนดชื่อเว็บ-ชื่อของหน้า
1.1 เตรียมบัญชีอีเมล์ @gmail.com ถ้ายังไม่มีต้องสมัครงลงทะเบียนให้เรียบร้อยก่อนทำในขั้นตอนต่อไป
1.2 เปิดบราวเซอร์ไปที่ http://www.google.com
จะเป็นการให้เราใช้ Google Sites แบบใหม่ ซึ่งเปิดบริการตั้งแต่วันที่ 31 มกราคม 2566 เป็นต้นมา ส่วนแบบเดิม (classic) ได้ถูกยกเลิกการใช้ไปแล้ว เมื่อเปิดครั้งแรกจะแสดงกรอบยินดีต้อนรับ กด [รับทราบ] 1.3 เริ่มสร้างเว็บไซต์ใหม่
1.4 กำหนดชื่อเว็บและส่วนหัวของหน้าเว็บ
ชื่อของหน้าสามารถจัดรูปแบบ (format) ตัวอักษรได้ตามที่ต้องการจากคอนโทรลพาเนล
1.5 เปลี่ยนพื้นหลังของชื่อของหน้า 1.5.1 เปลี่ยนสีพื้นหลัง ตัวอักษรคงเดิม
1.5.2 เปลี่ยนพื้นหลัง ตัวอักษรคงเดิม ตามรูปเลือกแบบ แบนเนอร์ ไว้แล้ว กด ประเภทส่วนหัว
เลือก ชื่อเรื่องเท่านั้น ไม่มีพื้นหลัง
1.5.3 เปลี่ยนทั้งสีหรือรูปพื้นหลังและตัวอักษร ใช้รูปที่ออกแบบไว้ 1.5.3.1 ลบข้อความที่เป็นชื่อของหน้า
1.5.3.1 เตรียมรูปชื่อเรื่องขนาด 1100×300 pixels
1.5.3.2 เลือกรูป ที่มุมบนขวา กด รูปภาพ กด อัปโหลด (รูปที่ยังไม่มีบนโฮสต์ ถ้าเคยอัปโหลดแล้วให้กด เลือก)
1.5.4 แสดงผล ถึงขั้นตอนนี้เป็นอันว่าการออกแบบส่วนหัวของเว็บเรียบร้อย ที่เมนูบนสุด กด แสดงตัวอย่าง ดูการแสดงผล
สามารถเลือกการแสดงผลได้ 3 ขนาด คือ โทรศัพท์ แท็บเล็ต หน้าจอขนาดใหญ่ (จอพีซี)
1.5.5 เผยแพร่เว็บ ชั้นตอนนี้เป็นการทำให้เว็บไซต์ของเราใช้งานได้เผยแพร่สู่สาธารณ ที่เมนูด้านบนขวา กด เผยแพร่
จะได้ที่อยู่ของเว็บไซต์ (URL) ดังนี้ http://sites.google.com/view/korayanis เปิดด้วยบราวเซอร์ต่างๆ หรือทำลิงค์ในหน้าเว็บอื่น (หมายเหตุ แต่ก่อน Google Sites รุ่น classic กำหนด URL : http://sites.google.com/site/web name)
ขั้นตอนที่ 2
สร้างหน้าเว็บ ขั้นตอนนี้เป็นการสร้างหน้าเว็บเป็นเรื่องๆ ตามข้อมูลและรูปภาพ 2.1 ที่มุมบนขวา กด หน้าเว็บ => สามจุด => เพิ่มหน้าย่อย
2.2 ตั้งชื่อหน้าย่อยใหม่ ยาวที่สุด 75 อักขระ (รวมช่องว่าง) และกด Advanced เพื่อกำหนดเส้นทางเปิดหน้าเว็บ (Custom path) เป็นภาษาอังกฤษ ยาวที่สุด 75 อักขระ (รวมช่องว่าง) เพื่อให้ลิงค์แสดงอักขระที่สื่อความหมายได้ง่าย ถ้าไม่กำหนดส่วนนี้จะทำให้เห็นลิงค์เป็นอักขระที่ไม่สื่อความหมาย เช่น %E2%&%E…. เป็นต้น
2.3 เพิ่มเนื้อหา คลิ้กที่ว่างใต้กรอบชื่อของหน้า จะแสดงเมนูวงล้อ
2.3.1 แทรกข้อความ เพิ่มข้อความลงไป (มีข้อมูลพิมพ์ไว้แล้วเป็นเวิร์ด คัดลอกแล้วนำมาวาง) เมื่อพิมพ์ข้อความเสร็จ ไม่ต้องสั่งบันทึกเพราะ Google Sites จะบันทึกแบบอัตโนมัติเป็นระยะๆ
2.3.2 แทรกรูปภาพ
2.3.2.1 เตรียมรูปภาพไว้ที่ Google Drive เป็นไฟล์ JPG หรือ PNG ขนาดประมาณ 500×500 pixels
2.3.2.2 คลิ้กที่เส้นกรอบล่างใต้ชื่อเรื่อง (ดูข้อ 2.3 ) เลือก แทรกรูปภาพ
2.3.2.3 เลือกรูปภาพจาก Google Drive เสร็จแล้ว กด แทรก
2.3.3 ทำให้เว็บเผยแพร่ได้ ภายหลักมีการเปลี่ยนข้อมูลในเว็บทุกครั้ง ต้องมีการทำให้เว็บเผยแพร่ได้ด้วยการ กด เผยแพร่ เช่นเดียวกันกับข้อ 1.5.5 อีกครั้งเพื่ออัปเดทเว็บ
2.3.4 เพิ่มหน้าเว็บย่อยอื่นๆ เริ่มทำเช่นเดียวกับข้อ 2.1 ถึง ข้อ 2.3.4
ขั้นตอนที่ 3
เปิดเว็บ 3.1 เปิดบราวเซอร์ URL => http://sites.google.com/view/korayanis
3.2 เลือกเรื่องที่สร้างหน้าเว็บไว้แล้ว 1 เรื่อง
สรุป
การสร้างเว็บไซต์ด้วย Google Sites ไม่ยุ่งยากและไม่ต้องมีความเชี่ยวชาญในภาษาเขียนเว็บ เพียงแต่เราต้องมีบัญชี Gmail เพื่อเปิดเข้าใช้บริการเก็บข้อมูลไว้ที่ Google Drive (เอกสาร รูปภาพ ชีต งานนำเสนอ) เพื่อนำสิ่งเหล่านี้มาแทรกในหน้าเว็บในแต่ละเรื่อง หลังจากสร้างเว็บไซต์ถูกต้องและครบถ้วนตามขั้นตอนที่แนะนำไว้ข้างต้นเสร็จแล้วจะได้ที่อยู่ของเว็บ http://sites.google.com/view/ชื่อเว็บ สามารถเปิดดูได้ทั่วไป ไม่ต้องเสียค่าใช้จ่ายรายปีและไม่หมดอายุ ถ้าเราต้องการเพิ่มหน้าเว็บในเรื่องใหม่ก็แค่เปิด URL แล้วคลิ้กรูปดินสอตรงบริเวณมุมล่างขวาแล้ทำตามขั้นตอนข้างต้น ผู้อ่านที่สนใจสร้างเว็บไซต์ที่ไม่เสียค่าใช้จ่ายสามารถแชร์ความรู้นี้ได้ต่อๆ ไป ในบทความต่อไปจะเป็นเรื่อง Google Site ตอนที่ 3 เน้นเนื้อหาเทคนิคขั้นสูงในการตกแต่งเว็บให้สวยงามมากยิ่งขึ้น เช่น นำรูปดอกกุหลาบที่แสดงทั้งหมดดูแล้วลายตา เปลี่ยนเป็นรูปสไลน์โชว์ น่าจะดูดีขึ้น เชิญติดตามครับ
อ้างอิง
- Create a site, no programming or design skills needed. เข้าถึงได้จาก https://workspace.google.com วันที่ 1 กรกฎาคม 2566
- Web Authoring Tools: Google Sites โดย อาจารย์จักริน ชวชาติ ภาควิชาวิทยาการคอมพิวเตอร์ คณะวิทยาศาสตร์ มหาวิทยาลัยเชียงใหม เข้าถึงได้จาก https://www2.cs.science.cmu.ac.th/courses/ 204100/lib/exe/fetch.php?media=07_google_sites.pdf วันที่ 1 กรกฎาคม 2566
- อบรมกูเกิ้ลไซต์ เข้าถึงได้จาก https://sites.google.com/site/banrainarao/ วันที่ 1 กรกฎาคม 2566