IT

บทนำ “แผนที่” เป็นส่วนประกอบสำคัญของระบบสารสนเทศภูมิศาสตร์ (Geographic Information System : GIS) มีบทบาทสำคัญต่อการพัฒนาด้านต่างๆ ในยุคปัจจุบัน เช่น การเดินทาง การขนส่ง การก่อสร้าง การวางผังเมือง การพัฒนาชุมชน อุตุนิยมวิทยา บริหารจัดการด้านธุรกิจ/อุตสาหกรรม/จราจร/สาธารณสุข/ทรัพยากรธรรมชาติ เป็นต้น แผนที่ซึ่งจะกล่าวถึงในบทความนี้เป็นแผนที่ภาคพื้นดินของ Google Maps ที่เริ่มบริการออนไลน์โดยไม่เสียค่าใช้จ่ายตั้งแต่เดือนกุมภาพันธ์ 2548 เป็นต้นมา และเปิดโอกาสให้ผู้ใช้สามารถกำหนดการแสดงข้อมูลแผนที่ในเว็บเพจ (Web pages) ได้ด้วยตนเอง (Lowensohn, 2007) หลักการสร้างจุดพิกัดบนแผนที่อิเล็กทรอนิกส์ Google Maps การสร้างจุดพิกัดบนแผนที่อิเล็กทรอนิกส์ Google Maps ต้องระบุตำแหน่งทางภูมิศาสตร์ (Geocode) ซึ่งเป็นจุดพิกัดบนแผนที่ เป็นจุดตัด (Coordinates) ของเส้นละติจูด หรือ เส้นรุ้ง (Latitude : LAT) กับเส้นลองจิจูด หรือ เส้นแวง (Longitude : LNG) เส้นละติจูด […]

เทคโนโลยีระบบเครือข่ายไร้สาย (Wireless Local Area Network : WLAN) ช่วยให้สามารถติดต่อสื่อสารผ่าเครือข่ายอินเทอร์เน็ต ในลักษณะ “Any Time – Any Where – Any One” ทำให้การรับส่งข้อมูลได้สะดวกรวดเร็วขึ้นและไม่มีภาระในการจัดหาสายเคเบิลเชื่อมต่ออุปกรณ์ระหว่างผู้ส่งและผู้รับข้อมูลข่าวสาร ระยะแรกๆ มีค่าใช้จ่ายสำหรับอุปกรณ์ไร้สายมากกว่าระบบสาย แต่ปัจจุบันเทคโนโลยการผลิตอุปกรณ์ไร้สายมีความทันสมัย คุณภาพดีและใช้งานอย่างแพร่หลายจึงทำให้ราคา อ่านต่อ

การแทรกกลุ่มแบบยุบได้ (Collapsible group) ถ้ามีเนื้อความยาวมาก การแสดงทั้งหมดในหน้าเว็บอาจจะดูลายตา ต้องใช้คำสั่งแทรกกลุ่มแบบยุบได้ หรือกล่องข้อความที่ขยายและยุบได้ จะแสดงข้อความบางส่วน ที่มุมกรอบด้านขวาจะมีเครื่องหมาย เลื่อนลงหรือขยายออก หรือ เลื่อนขึ้นหรือยุบ 1. เปิด Google Sites วางเคอร์เซอร์ในจุดที่ต้องการแทรกกลุ่มแบบยุบได้ 2. คัดลอกเนื้อเรื่องที่เตรียมไว้วางลงในกรอบบน (มองเห็นตามปกติ) และเนื้อเรื่องที่ซ่อนไว้วางลงในกรอบล่าง (มองเห็นเมื่อสั่งขยาย) 3. กดเผยแพร่ 2 ครั้ง การทำภาพหมุน (Image carousal) การทำภาพหมุน เป็นการทำสไลด์ภาพที่เลือกเลื่อนขวา <-> ซ้ายแบบไม่อัตโนมัติ ในการทำสไลด์ภาพต้องมีภาพอย่างน้อย 2 ภาพ 1. เตรียมภาพ ขนาดประมาณ 500×400 pixels 2. เมนูขวา แทรก -> ภาพหมุน 3. เมนูขวา แทรก -> ภาพหมุน -> อัปโหลดรูป 4. ถ้าต้องการเพิ่มภาพ

การจัดรูปแบบเนื้อหา (Content blocks) การจัดรูปแบบเนื้อหาของบทความใน Google Sites เรียกว่า บล็อกเนื้อหา มีแบบให้เลือก 6 แบบ ตามปกติจะมีการจัดเนื้อหาในลักษณะคล้ายกับเวิร์ด แตกต่างกันที่ไม่สามารถแทรกรูประหว่างเนื้อหาได้โดยตรง ต้องทำเป็นกรอบด้วยทำกรอบข้อความ กรอบรูป และต่อด้วยกรอบเนื้อหา จึงจะได้รูปแทรกอยู่ระหว่างเนื้อความ ตามตัวอย่าง ถ้ามีรูปไม่มากและเนื้อเรื่องไม่ยาวมากก็พอจะทำได้สะดวก ถ้ามีรูปมากและเนื้อเรื่องยาวมากต้องแทรกรูปทั้งหมดไว้ในกรอบแยกจากกรอบเนื้อเรื่องอยู่ส่วนท้าย แต่ Google Sites มีตัวช่วย คือ บล็อกเนื้อหา ลองมาใช้บล็อกเนื้อหาแบบต่างๆ ดังนี้ 1. เตรียมเนื้อหาและรูป 2. สร้างหน้าเว็บย่อย 3. เลือกบล็อกเนื้อหา แบบที่ 1 แทรกเนื้อหา แทรกรูป (ได้กรอบละ 1 รูป) แทรกคำบรรยายใต้รูป ชี้ สามจุด ทำได้ครั้งเดียว แก้ไขไม่ได้ ถ้าต้องการแก้ไขคำบรรยายใต้รูป ต้องลบรูปออกไปแล้วแทรกคำบรรยายเข้าไปใหม่ 4. กดเผยแพร่ 2 ครั้ง แบบที่ 2 แบบที่

ตอนนี้จะนำเสนอเทคนิคตกแต่งเว็บไซต์ที่สร้างด้วย Google Sites ว่าด้วยเรื่อง การแทรกสไลด์ การแทรกวิดีโอจากยูทูป และการแทรกปฏิทิน การแทรกสไลด์ วิธีที่ 1 การแทรกสไลด์ด้วยโค้ด HTML 1. เตรียมรูป PNG ขนาด 950×550 pixels จำนวน 8 รูป (หรือตามจำนวนที่ต้องการ มากที่สุด 200 สไลด์) 2. เปิด Google Slides แทรกรูป ปรับแต่งการเลื่อนสไลด์ตามที่ต้องการ ตั้งชื่อว่า slide_rose 3. ไปที่หน้าเว็บ Google Sites เปิดเรื่อง กุหลาบแสนสวย เลือกตอนท้ายของเนื้อเรื่องที่จะแสดงสไลด์ เมนูขวาบน แทรก -> ไดรฟ์ -> เลือกสไลด์ -> แทรก 4. ปรับจุดวางกรอบกลางหน้า กด เผยแพร่ 2 ครั้ง วิธีที่

ตอนนี้จะนำเสนอเทคนิคตกแต่งเว็บไซต์ที่สร้างด้วย Google Sites ว่าด้วยเรื่อง การแทรกอีโมจิ และการแทรกไอคอน การแทรกอีโมจิ การแทรกอีโมจิ จะคล้ายกับการแทรกฟอนต์ เนื่องจากอีโมจิเป็นฟอนต์ 2 แบบ คือ Noto Emoji (ขาวดำ) และ Noto Color Emoji (สี) จะขอแทรกอีโมจิในตัววิ่ง ยินดีต้อนรับ. . . 1. เตรียมโค้ด html จากเว็บไซต์ https://sites.google.com/view/sitesguide/fonts • คัดลอก Embed code วางใน Notepad • แก้ไขชื่อฟอนต์ 2 จุด เป็น Noto Color Emoji • พิมพ์ emoji แทนข้อความในแท็กและย้ายไปอยู่ในแท็ก <p>….</p> 2. คัดลอกข้อความตัววิ่ง ยินดีต้อนรับ. . . จาก

ตอนนี้ว่าด้วยเรื่อง การเพิ่มฟอนต์ภาษาไทย และการประยุกต์ใช้ตาราง-ทำปุ่มเลือกแบบกราฟิก เชิญติดตาม การเพิ่มฟอนต์ภาษาไทย ฟอนต์ภาษาไทยที่ระบบตั้งไว้ ต้องการเปลี่ยนฟอนต์ภาษาไทยเป็นอย่างอื่น 1. ชี้กรอบข้อความ ยินดีต้อนรับ กด รูปดินสอ แก้ไข 2. เพิ่มโค้ด html (ตัวสีแดง) 3. เปิดเว็บไซต์ https://sites.google.com/view/sitesguide/fonts คัดลอก Embed code 4. วางแทรกในโค้ดในข้อ 2 ระหว่าง <head></head>(ตัวสีน้ำเงิน) 5. ลบบรรทัด <p>“And what is the use of a book,” thought Alice, “without pictures or conversation?”</p> 6. เปลี่ยนฟอนต์ เดิม font-family: ‘Ruge Boogie’ คลิ้ก http://fonts.google.com 7. เลือกฟอนต์ภาษาไทยจาก Google

หัวข้อนี้มีรายละเอียดและขั้นตอนที่ค่อนข้างยาว จะขอนำเสนอเฉพาะที่สำคัญเป็นตอนๆ เพื่อไม่ให้เนื้อหายาวเกินไป ตอนนี้ขอนำเสนอ การทำตัวหนังสือวิ่งใต้ชื่อของหน้า และการเพิ่มโค้ดนับคนเปิดเว็บไซต์ ดังนี้ การตัวหนังสือวิ่งใต้ชื่อของหน้า เช่น  ข้อความ ยินดีต้อนรับ. . .Welcome. . .site.google.com/view/korayanis แบบที่ 1  ตัวหนังสือวิ่งจากขวาไปซ้าย พื้นหลังมีสีตามธีม  คลิ้กที่ว่างใต้กรอบชื่อของหน้า จะแสดงเมนูวงล้อ  กดเลือก < >  เลือก ฝังโค้ด  ในกรอบวางโค้ด <html> พิมพ์ <marquee>ยินดีต้อนรับ. . . . .site.google.com/view/korayanis </marquee>  เสร็จแล้วกด ถัดไป (ค่าปกติ วิ่งจากขวาไปซ้าย) ข้อความที่พิมพ์ลงในกรอบจะวิ่งจากขวาไปซ้าย ตรวจข้อความอีกครั้ง ถ้าไม่มีแก้ไข กด แทรก ปรับแต่งขนาดของเฟรมตัวหนังสือวิ่งให้กว้างเท่ากับชื่อของเรื่อง ไม่ต้องปรับความสูง แบบที่ 2  ตัวหนังสือวิ่งจากล่างขึ้นข้างบน พื้นหลังมีสีตามธีม <marquee direction=”up”>ยินดีต้อนรับ. . .Welcome. .

หลักการทั่วไปในการสร้างเว็บไซต์ ประกอบด้วย 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)

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