รูปแบบเว็บเพจต้นแบบ หรือ ร่างโฮมเพจ

ปรับปรุง : 2565-05-22 (ปรับ broken link)

Web 2.0

Web 1.0 "AlexBrush"

เนื้อหาอาจเกิดจากผู้เขียนคนเดียว หรือรวมกลุ่มกันสร้างแหล่งเผยแพร่ (Content owner) ให้ข้อมูล แล้วผู้อ่านจะได้รับข้อมูลข่าวสารจากเจ้าของข้อมูลโดยตรง เช่น อโดบี้ให้ข้อมูลเรื่องกราฟิก ไมโครซอฟท์ให้ข้อมูลเรื่องระบบปฏิบัติการ และซีเอ็นเอ็นให้ข้อมูลเรื่องข่าวสารบ้านเมือง "thkodchasal2"

Web 2.0 "TLWGTypewriter"

เนื้อหามาจากทั่วสารทิศและอาจแตกได้เป็น เนื้อหาขนาดเล็ก (Micro content) ที่กระจายอยู่ตามที่ต่าง ๆ มารวมกันในรูปแบบใหม่ เสมือนเครือข่ายของข้อมูลข่าวสาร "WRTishkid2"

ความหมายของเว็บสองจุดศูนย์ (Web 2.0)

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

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

เทมเพจ (Template) "thkodchasal2"

เทมเพจ คือ เว็บเพจต้นแบบที่ถูกออกแบบทั้งโครงสร้าง ภาพ และเนื้อหา มักประกอบด้วยแฟ้มภาพ ตัวอย่างเนื้อหา และรหัสภาษาเอชทีเอ็มแอลที่สามารถนำไปแก้ไขได้ บางครั้งจะมีแฟ้ม .psd ซึ่งมีภาพต้นฉบับให้สามารถแก้ไขได้ด้วยโปรแกรม Photoshop, Imageready หรือ Firework

หัวข้อ (Topics)

รูปแบบ Web 2.0 มี 15 ลักษณะ

5 ฟอนต์ที่น่าสนใจใน Web 2.0

เปรียบเทียบยุค 1.0 กับ 2.0

การสร้าง Poster 8 นิ้ว * 18 นิ้ว

♥ แนะนำ 15 รูปแบบของเว็บ 2.0 #

Simplicity, Central layout, Fewer columns, Separate top section, Solid areas of screen real-estate, Simple nav, Bold logos, Bigger text, Bold text introductions, Strong colours, Rich surfaces, Gradients, Reflections, Cute icons, Star flashes "TLWGTypewriter"

อ่านเรื่องน้อง ป.6 ใน medium.com "sawasdee"
น้อง Kittichai Mala-in FramyFollow เล่าในเวทีของตนที่ medium.com แชร์เรื่องตอนเรียนประถม ที่ โรงเรียนบ้านง่อนหนองพะเนาว์มิตรภาพที่ 126 สมัย ป.3 ทำ root Smartphone ของ True ผ่าน King Root พอขึ้น ป.4 กับ ป.5 สร้างเกมด้วย RPG Maker VX เดี๋ยวนี้ ป.6 สนใจ Dream Weaver CS5 กับ CSS ได้ความรู้เยอะเลยจาก Thaicreate
ประเด็นที่น่าสนใจ คือ "น้องเค้าไปแข่งมา 2 ปีติดต่อกัน แต่มีน้อง ป.4 กับ ป.5 ที่เก่งกว่าเค้า"

สรุปรูปแบบเว็บ 2.0

มี 6 รูปแบบที่ครอบคลุมการออกแบบเว็บ 2.0
1. การเขียนที่อยู่ภายใต้สัญลักษณ์ (เข้ามาตรฐาน XML)
2. บริการในรูป Web services (การส่งผ่านข้อมูลออกไป)
3. ผสมผสานสร้างเนื้อหาใหม่ (เกี่ยวกับเมื่อไร อะไร ไม่ใช่ใคร หรือทำไม)
4. กำหนดแนวทางในประเด็นที่เกี่ยวข้องได้เร็ว (ผู้อ่านเป็นผู้ควบคุม)
5. เพิ่มเติมข้อมูลได้ตลอดเวลา (ชุมชนสร้างสังคมข่าวสาร)
6. ยกระดับการพัฒนาโปรแกรม (แยกโครงสร้าง และรูปแบบ)
digital-web.com

ตัวอย่างสี
--gray-dark: #343a40;

--blue: #007bff;

--indigo: #6610f2;

--purple: #6f42c1;

--pink: #e83e8c;

--red: #dc3545;

--orange: #fd7e14;

--green: #28a745;

--teal: #20c997;

--cyan: #17a2b8;

--gray: #6c757d;

รูปแบบ Web 2.0 มี 15 ลักษณะ

mobiletest.me

รูปแบบของเว็บ 2.0 (webdesignfromscratch.com)
1. เรียบง่าย อย่าให้งง (Simplicity) : google.com เรียบแบบเหลือเชื่อกันเลย
2. มีแม่แบบสำหรับทั้งไซต์ (Central layout) : facebook.com ทั้งไซต์ก็เหมือน ๆ กัน
3. คอลัมน์สอง หรือสามพอแล้ว (Fewer columns) : gmail.com มี 2 คอลัมน์เองครับ
4. หัวเป็นหัว ตัวต่างหาก (Separate top section) : cnn.com หัวแดงมาเลย ที่เหลือขาว
5. พื้นที่ถูกจองของขาประจำ (Solid areas of screen real-estate) : youtube.com ซีกขวามักเป็นของผู้สนับสนุน
6. เมนูบาร์ที่ทั้งคิง และควีน (Simple nav) : truelife.com มี top menu ได้น่าคลิ๊ปมาก
7. โลโก้บึก ๆ (Bold logos) : komchadluek.net มีโลโก้ของหนังสือพิมพ์เด่นชัด
8. ที่ใหญ่ก็ให้ใหญ่ (Bigger text) : wikipedia.org ตรงไหนเน้น ก็จะใหญ่กว่าเพื่อน ๆ
9. บทแนะ ส่วนนำต้องใหญ่กว่า (Bold text introductions) : bbc.com ก่อนเข้าเนื้อหาจะชวนอ่านด้วยส่วนนำ
10. สีต้องแข็งโป๊ก (Strong colours) : zdnet.com ใช้แดงกับน้ำเงิน
11. ยกพื้น (Rich surfaces) : kapook.com มีการยกพื้นหลายระดับ
12. ใช้สีไล่ระดับ (Gradients) : manager.co.th ไล่สีในส่วนของ header
13. สะท้อน (Reflections) : hunsa.com สะท้อนตัวอักษร ซึ่งเห็นน้อยลงแล้ว
14. สัญลักษณ์น่ารัก (Cute icons) : yahoo.com มีรูปแทนความหมายที่ทำให้รู้สึกมีชีวิตชีวา
15. ดาวกระพริบ (Star flashes) : teenee.com มีหัวใจ กับ new ที่เคลื่อนไหวสะดุดตา

เปรียบเทียบยุค 1.0 กับ 2.0

Web 1.0		Web 2.0
DoubleClick		Google AdSense
Ofoto		Flickr
Akamai		BitTorrent
mp3.com		Napster
Britannica Online ?		Wikipedia
personal websites		blogging
evite		upcoming.org (Event DB)
domain name speculation		search engine optimization
page views		cost per click
screen scraping		web services
publishing		participation
content management systems (CMS)		wikis
directories (taxonomy)		tagging (folksonomy)
stickiness		syndication

Box นี้ ใช้ m_min360h
ดังนั้นจะหายไป เมื่อลดขนาดจอภาพ

แต่ละรุ่นของ Thaiall.com webpage รูปแบบเว็บเพจต้นแบบ หรือ ร่างโฮมเพจ (Template / Prototype webpage) คือ รูปแบบของเว็บเพจแต่ละหน้าในเว็บไซต์ที่ออกแบบเป็นแบบเว็บเพจสถิต หรือ สแตติกเว็บเพจ (Static webpage หรือ Static homepage) ซึ่งมีเนื้อหาไม่เปลี่ยนแปลงมากนัก ไม่เชื่อมต่อกับระบบฐานข้อมูล และไม่มีการประมวลผลบนเครื่องบริการ มีผลให้การนำโค้ดต้นฉบับพร้อมแฟ้มภาพไปใช้เปิดต่างเครื่องแล้ว ได้ผลลัพธ์ตรงกับที่เปิดบนเครื่องบริการ ทำให้การสำรองเว็บเพจไปใช้บนเครื่องบริการอื่นได้ผลไม่ต่างจากเครื่องบริการหลัก เช่น Album : Joom

เลขรุ่นของเว็บเพจอยู่ใน HTML code บรรทัดที่ 21 เพื่อให้ระบบอ่านไปทำ List ใน update.htm

รุ่น 4.0 - ใช้ Header ป้ายน้ำเงิน เมนูบาร์ 6 ตัวเลือก Contents, KM, Articles, Members, Sponsors, About us และมี goo.gl เป็น short url อยู่ใต้ menu bar ด้านขวา และใช้ fieldset เป็นตัวหลักในการแสดงกล่องข้อความ และในส่วนของ footer ใช้ข้อความของ Albert Einstein มีตัวเลือก 5 หลัก และ 5 แถว
รุ่น 5.0 - ทดสอบกับ google.com/speed/pagespeed/insights/ แก้ปัญหา Legible font sizes ปรับการกำหนด css ให้ถูกต้องไม่ตกกรอบ
รุ่น 6.0 - พัฒนาที่สำคัญ 2 เรื่อ งคือ แยก CSS ออกไปเป็น rsp6.css และเพิ่ม TOP Navigator แบบ Responsive
รุ่น 6.1 - ปรับ top banner ยกเลิกการใช้ m_banner เปลี่ยนเป็น m_still ที่มีในรุ่น 6.0 เป็น responsive banner และไม่หายไป เมื่อมีการเปลี่ยนขนาดอุปกรณ์ และทดสอบ css รุ่น 6.1 ก็ผ่านด้วยดี
รุ่น 6.2 - เพิ่ม font และ library เข้ามาเป็นสมาชิกใหม่หลายตัว เช่น Bootstrap, Lightbox, Syntaxhighlighter
รุ่น 7.1 - ปรับ header + footer menu, windows-874 เป็น utf-8 และปรับ icon ใหม่ และลบ css ที่ใช้แต่ไม่มีผล และเพิ่ม Prettify และ 1 มกราคม 2562 เริ่มเปลี่ยนไปใช้ คชสาร 20px
รุ่น 7.2 - เริ่มใช้ google fonts และแต่งป้าย Banner ด้านบนใหม่
รุ่น 7.3
- เพิ่ม กล่องรับความคิดเห็น
- ปรับ footer และชื่อของ webpage เป็น "เทมเพจ ของฉัน (My Template)"
- กำหนดการย่อหน้าให้กับเอกสารอ้างอิง แบบเยื้องผ่าน css
เช่น <p style="text-indent:-20px;margin-left:20px;">hello</p>
เช่น .m_reference p{ text-indent:-15px; margin-left:20px; }
รุ่น 8.0
- ปรับลด White space ใน rsp80.css เพื่อลดขนาดแฟ้ม และเป็น UTF8 เหมือนเดิม
- ปรับภาพ rspthaiall.webp ใช้ Font เป็น Small Fonts
- เพิ่ม class ย่อหน้าหลายแบบ เช่น ย่อหน้าบรรทัดแรก (p20) ย่อหน้าวิจัย (m_reference) และย่อหน้าเข้าไป (myul)
รุ่น 8.1
- เริ่มใช้ bigcap ใน rsp81.css
- ใช้เครื่องมือตรวจ webpage อาทิ HTML validity, CSS validity, Check Link, DeadLink, PageSpeed Insights
- แก้ไข The link is missing a trailing slash, and caused a redirect. Adding the trailing slash would speed up browsing.
รุ่น 8.2
- ใช้ material.min.js ร่วมกับ manifest.json เพื่อ Add to Home Screen บน Mobile แล้วแสดงผลในแบบ application โดยเพิ่ม Tag ในบรรทัดที่ 6 ที่ส่วนของ header ตามหลัก /pwa
- ปิดปุ่ม Google search ที่มุมบนขวา เพราะผิดหลัก เมื่อส่งตรวจใน Pagespeed (40/80) (index82.htm)
- ใช้

Popover

แสดงข้อมูลเว็บเพจ ที่มุมขวาของ menu bar
- ใช้ H1 ในส่วนของ Header และกำหนดขนาดเป็น 12px

อ่านเพิ่มเติม

หมวกการคิด 6 สี หรือทฤษฎีหมวก 6 ใบ

ขาว : ข้อเท็จจริง

แดง : อารมณ์ความรู้สึก

เขียว : ริเริ่มสร้างสรรค์

เหลือง : เชิงบวก/คิดดี

ดำ : เชิงลบ/คิดต่าง

น้ำเงิน : คิดรวบยอด

SixThinking Hats คือ เทคนิคทรงพลัง เพื่อช่วยเพิ่มมุมมองสนับสนุนการตัดสินใจในเรื่องที่สำคัญ ช่วยให้เราคิดนอกกรอบจากความคิดเดิม ช่วยให้ได้ข้อมูลแวดล้อมต่อสถานการณ์ที่กำลังสนใจ (5W1H) เครื่องมือนี้ ถูกสร้างโดย Edward de Bono จากหนังสือ 6 Thinking Hats . เช่น ถ้าท่านเป็นผู้นำประเทศ Sweden จะทำอย่างไร เมื่อ โ ค วิด - 1 9 ระบาดไปทั่วโลก หรือ ถ้าสำเร็จการศึกษาแล้วจะทำอะไร หรือ ถ้าเกษียณแล้วจะทำอะไร หรือ ถ้าอาชีพหลักมั่นคงแล้วจะทำอาชีพเสริมอะไร แล้วยังมีประเด็นที่น่าสนใจอีกมาก เช่น ไอที การเมือง เพลง ภาพยนตร์ ดนตรี กีฬา ธุรกิจ สุขภาพ อาชีพเสริม ชีวิตโสด ห้องเรียนในอนาคต หรือ ชวนกันตอบคำถาม ว่า "ความสุขกับความสำเร็จ อะไรเกิดก่อน" ซึ่ง Shawn Achor สรุปกฎจากการวิจัยไว้ 7 ข้อ 1) คิดบวก สุขไว้ก่อน 2) กดคานและจุดหมุน 3) หาโอกาสในภัยคุกคาม 4) ล้มเพื่อก้าวต่อ 5) ทอนเป้าใหญ่ให้เล็กลง 6) เปลี่ยนเริ่มที่ 20 วินาที 7) คบคนดี

ถ้าท่านเป็นครู จะสอนนักเรียนอย่างเต็มกำลัง
เหมือนที่ตัวคุณครูเคยถูกสอนมา เช่นในอดีต
หรือเลือก พัฒนาศักยภาพของผู้เรียนรายบุคคล

5 ฟอนต์ที่น่าสนใจ

ตัวอย่างฟอนต์

<?php
// Font TLWGTypewriter
$msg = "Hello World!";
echo $msg;
?>

Fonts-TLWG (formerly ThaiFonts-Scalable)
คือ กลุ่มผู้พัฒนาฟอนต์ภาษาไทยบนลีนุกซ์ (TLWG = Thai Linux Working Group) แบบ Free License มี Homepage สำหรับสื่อสารเรื่องงานกับผู้สนใจ ที่ linux.thai.net โดยใช้ FontForge เป็นเครื่องมือพัฒนาฟอนต์ ผลงานฟอนต์ให้ดาวน์โหลด (Download) ftp://linux.thai.net และมีตัวอย่างภาพฟอนต์เผยแพร่ที่ linux.thai.net/~thep/ แล้วมี Group ใน Google.com เพื่อสื่อสารกันในกลุ่ม Developer มี Font 2 ตัวที่ผมสนใจเป็นพิเศษเลือกนำมาใช้ คือ Sawasdee.ttf กับ TLWGTypewriter.ttf ทีแรกสนใจ TLWGMono.ttf แต่สระกระโดดในบางกรณี แต่หน้าตาใกล้เคียงกันมาก ยังมี Font อีก 3 ตัวที่นำมาใช้ คือ rsp_alexbrush.ttf , rsp_thchakrapetch.ttf rsp_thkodchasal2.ttf โดย จักรเพชร (Chakrapetch) และ คชสาร (Kodchasal) เป็น อยู่ใน 13 ฟอนต์ราชการไทย ส่วน AlexBrush จะเน้นใช้กับภาษาอังกฤษ เพราะเป็นตัวเขียนที่เหมือนใช้แปรง ต้องใช้จินตนาการในการอ่านมากกว่าเดิม ออกแบบโดย TypeSETit อัพโหลดเมื่อ March 30, 2012 เริ่มนำไปใช้ในแฟ้ม CSS เมื่อ 19 ส.ค.2560 แล้วเผยแพร่เป็นโฮมเพจใน Github.io

ฟอนต์ราชการ : จักรเพชร 16px ก็สวยนะครับ

คชสาร 20px เริ่มใช้ 1 มกราคม 2562 [7.1]

คลาส m_desc ใช้สำหรับแสดงรายละเอียดของคำสั่ง โดยใช้ THChakraPetch ขนาด 14px;
ใช้งานครั้งแรกใน thaiall.com/pdf.js

เมนูของโฮมเพจ เปรียบเสมือน หน้าต่างของโฮมเพจ (hidden)

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

การออกแบบโฮมเพจ (Homepage Design) จะต้องคำนึงถึงคำว่า เว็บ น่ะ รก เคยอ่านมาจาก faylicity.com เค้าให้ข้อคิดว่าเว็บเพจไม่คนมีอะไรบ้าง ทั้งหมด 18 ข้อ การมีสิ่งเหล่านั้นทำให้เว็บ ดู รก เลอะเทอะ และล้อกับคำว่า เว็บนรก หรือเว็บ-น่ะ-รก ข้อพิจารณามีดังนี้ 1) วูบวาบ 2) ไม่ชอบ new 3) เมายา 4) ป้ายโฆษณา 5) พี้นที่มีค่า 6) เบื้องหลังน่ารังเกียจ 7) ใช้สีไม่เป็น 8) ตัวเองเป็นใหญ่ 9) ตัวนับกินทราฟฟิก 10) ใหญ่ไม่แคร์ 11) ไม่มีคำอธิบายภาพ 12) ภาพแทนอักษร 13) วีนาทีละ KB 14) หมู หมา กา ไก่ 15) หน้ามารยาท 16) ขอโทษขอโพย 17) โรคจะไปไหนดี 18) ไม่มีรายละเอียดประกอบ link

ตัวอย่าง 1. hunsa.com : scoop
ได้ใช้หัวข้อข่าวเป็น large icon 65*65 ที่ใหญ่ชัดเจน ภาพที่ใช้ประกอบประเด็นข่าวเป็นภาพถ่าย สรุปประเด็นให้อย่างง่าย กระชับ สะท้อนรายละเอียด
ตัวอย่าง 2. Kapook.com
แสดงให้เห็นถึง การออกแบบ icon ที่ยกนูนขึ้นมา มีเงา ใช้สีโทนเดียว เรียบง่าย

ตัวอย่าง 3. Trueid.net
แสดงให้เห็นถึง การออกแบบ icons ได้สวยงาม ใช้สีหลากหลาย สะดุดตา

ตัวอย่าง 4. teenee.com
แสดงให้เห็นถึง การใช้ข้อความเป็นรายการให้เลือก

weBlog บล็อก (Blog) คือ เว็บไซต์ประเภทหนึ่งที่ใช้สำหรับบันทึกบทความ คล้ายกับไดอารีของตนเองลงบนเว็บไซต์ ศัพท์เดิมคือ Web Log บางคนอ่านว่า We-Blog หรือ Web Log จนรวมคำเป็น บล็อก หรือ เว็บบล็อก ซึ่งเว็บบล็อกมีเนื้อหาหลายหลายไม่ว่าจะเป็นเรื่อราวทางการเมือง เศรษฐกิจ สังคม วัฒนธรรม กีฬา ภาพยนตร์ ดนตรี ธุรกิจ การศึกษา หรือเรื่องส่วนตัวที่ต้องการเปิดเผยแก่คนทั่วไปได้รับรู้ การสร้างเว็บบล็อกมีซอฟท์แวร์ช่วยในการบริหารจัดการ และมีเท็มเพลตให้เลือกหลากหลาย แล้วมีแนวโน้มจะเติมโตตลอดเวลาตามจำนวนผู้ใช้อินเทอร์เน็ตที่เพิ่มขึ้น [1]p.352

Thaiall-Blog sites : General Content + Blog ACLA + Lampang.net + Edu News + Nation.ac.th [Power by Wordpress]

ความต่างของ
id & class

addthis.com
ช่วยแชร์เว็บเพจ

สถิติ Blog rank
ใน truehits.net

ถึงยุคของ
responsive

ขนาดจอภาพ
ข้อมูลจาก truehits.net

การเขียนเอกสารอ้างอิง

การเขียน X-Bar
ใน word

เกณฑ์ประเมิน
ความพึงพอใจ

รวมรายชื่องานวิจัย
ด้านการขายออนไลน์

หกสิบคาถาชีวิต
วิกรม กรมดิษฐ์

Hiren บน USB

ระบบและกลไก

100/100 จาก pagespeed โดย google.com

22 ม.ค.60 ได้ปรับเว็บเพจ index.html ใน /quiz ซึ่งเป็นหน้า welcome page ของศูนย์สอบออนไลน์ และเป็นการปรับใหญ่ที่มีคุณสมบัติต่าง ๆ ต้อนรัปปี 2560 คือ 1) เป็น Responsive Web Design 2) ผ่านเกณฑ์ Pagespeed ของ Google 3) ปรับรูปแบบ และเพิ่มเนื้อหาพาไปยังโฮมเพจที่สำคัญ การผ่านเกณฑ์ของ Pagespeed มีข้อดี คือ เว็บเพจของเราจะถูกโหลดอย่างรวดเร็วโดยผู้ใช้ และแสดงผลอย่างเหมาะสมทั้งบน mobile device และ desktop computer ส่วนการเป็น Responsive Web Design ทำให้การพัฒนา Application บน Google play store กับ App store ของ Google ทำ Redirect มายัง webpage ได้ทันที โดยไม่ต้องปรับแต่งเพิ่มเติม
Welcome page : thaiall.com/quiz/index.html (100/100)
Get Started with the PageSpeed Insights API

Speed Rules

Avoid landing page redirects
Enable compression
Improve server response time
Leverage browser caching
Minify resources
Optimize images
Optimize CSS Delivery
Prioritize visible content
Remove render-blocking JavaScript
Use asynchronous scripts

Usability Rules

Avoid plugins
Configure the viewport
Size content to viewport
Size tap targets appropriately
Use legible font sizes

ปรับเว็บเพจให้รองรับ Pagespeed insightsของ google.com

เรื่อง Leverage browser caching # คือ เว็บเพจที่ใช้ image และ js อยู่ภายใน folder เพื่อให้ควบคุมได้ หากไปเรียก object มาจากภายนอก ก็จะเป็นเนื้อหาที่ควบคุมไม่ได้ อาจมีปัญหาทั้งคุณภาพและปริมาณ

เก็บรุ่นนี้ไว้ .. ตอนที่ทดสอบ Pagespeed กับคุณเอก
โดยผลการทดสอบเว็ฐเพจหน้านี้ ได้คะแนน 91/100 ในส่วนของ Speed แต่ส่วนของ User Experience ได้ 73/100 ตอนนั้น ก.ค.58 พบปัญหาสำคัญ 4 ข้อ คือ 1) ภาพที่เป็น .gif ไม่ได้ทำการ optimize ให้ขนาดแฟ้มลดลง แก้ไขได้ด้วยการสั่ง Decrease Color Depth 2) ภาพที่เป็น .jpg ไม่ได้ทำการลดขนาด ก็หาโปรแกรมลดความละเอียดลง ในเว็บไซต์ ไม่จำเป็นต้องละเอียดมากก็ได้ 3) เงื่อนไขของ Leverage browser caching ไม่รองรับภาพที่อยู่นอก folder 4) ถ้า include script จากภายนอก เช่น truehits.net หรือ google หรือ facebook ก็ไม่ต้องสนใจปัญหาเหล่านั้น เพราะเราไปทำอะไรที่นั่นไม่ได้
+ บริการ Pagespeed insights (SP=Speed, UE=User Experience)
+ ทดสอบเว็บเพจ #index.html (8.1) ได้ SP25/100
+ ทดสอบเว็บเพจ #index60.htm ได้ SP87/100
+ ทดสอบเว็บเพจ #index52.htm ได้ SP100/100
+ ทดสอบเว็บเพจ #index_no_include.htm (5.0) ได้ SP96/100
+ ทดสอบเว็บเพจ #blank_menu.htm ได้ SP100/100
การกำหนด viewport ได้ออกแบบไว้ตาม code ข้างล่างนี้

สร้างคลาสชื่อ inViewport และ outsideViewport แล้วกำหนดในแต่ละตาราง ทำให้ตารางที่กำหนด inViewport กว้าง 320px และ outsideViewport กว้าง 768px ตารางใดไม่กำหนดก็จะมีขนาดเต็มจอภาพ คือ 100% โดยอัตโนมัติ เมื่อขนาด screen เปลี่ยน ก็จะมาดูคุณสมบัติที่กำหนดใน @media only screen ตัวอย่าง viewport_inout.htm เขียนแบบกำหนด css ในแฟ้มเดียวกัน ไม่ได้แยกออกไปเป็น .css

.inViewport{width:320px;}
.outsideViewport{width:768px;}
@media only screen and (max-width:768px) {td{border-style:solid;}.outsideViewport{width:760px;}}
@media only screen and (min-width:321px) and (max-width:375px) {td{background-color:yellow;}}
@media only screen and (max-width:320px) {td{background-color:red;}}

ทดสอบเว็บเพจ web2/viewport_inout.htm กับ Pagespeed

ทดสอบกับ webpagetest.org

บริการของ webpagetest ทำให้ทราบว่า เวลาดาวน์โหลดจากประเทศใด ด้วยบราวเซอร์ใด ให้ Performance Results ในเรื่องของเวลาเป็นอย่างไร
รายงานแยก tab เป็น 9 หัวข้อ
1. Summary - First byte ในกี่วินาที , Start Render ในกี่วินาที , First Contentful Paint ในกี่วินาที , Speed Index ในกี่วินาที
2. Details - แสดงแต่ละ step ตามวินาที ว่าแฟ้มใดถูกโหลดเมื่อใด , จำแนกทั้งชื่อแฟ้ม เวลาเริ่ม ระยะเวลาดาวน์โหลด ประเภทแฟ้ม
3. Performance - แยกรายชื่อแฟ้ม แสดง keep-alive หรือ detect ไม่พบ , รายงานว่าลิงค์ใด Failed จะได้แก้ไขได้
4. Content - แยก MIME Type ว่ามีจำนวนเท่าใด , image , js , font , html , css , other , flash , video
5. Domains - จำแนกได้ข้อมูลจากโดเมนใดบ้าง กี่รีเควส กี่ไบท์ , www.thaiall.com , fonts.gstatic.com , ws.sharethis.com
6. Processing - เทียบให้เห็นว่าใช้เวลาในการโหลดอะไรมากที่สุด , Layout , Painting , Scripting , Loading , Other
7. Screenshot - แสดงหน้าแรกให้ดูว่าผู้ชมจะพบอะไร , แสดงรายงานปัญหาที่พบใน Console log อาจเป็น warning หรือ error
8. Image Analysis - แสดงการเปรียบเทียบขนาดภาพ (weight) ว่าถูกลดขนาดดีรึยัง , แตกภาพทีละภาพว่า ภาพใดเกรดอะไร เช่น ใช้แบบ WEBP ดีกว่า JPG
9. Request Map - แสดงเป็นแผนที่ใยแมงมุมว่าไปโดเมนใด มีขนาดวงตาม size
Welcome page : https://www.thaiall.com/quiz/index.html (A หมด)
/media - webp

deadlinkchecker.com

บริการตรวจสอบ dead link ของทั้งเว็บไซต์ (whole website) หรือเฉพาะเว็บเพจหน้าหนึ่ง (single webpage) ถ้าลิงค์ใดที่ร้องขอไปแล้ว ตอบกลับด้วยรหัส 404 แสดงว่าไม่พบเว็บเพจที่ร้องขอ จากนั้นจะเป็นหน้าที่ของผู้พัฒนาเว็บเพจ ที่ต้องเปลี่ยน หรือลบลิงค์นั้นออกจากเว็บเพจ
เมื่อ 8 กุมภาพันธ์ 2565 มีโอกาสนำโฮมเพจ KM มาปัดฝุ่นในส่วนของ dead link โดยเข้าไปใช้บริการตรวจลิงค์เสียหาย แล้วพบจำนวนลิงค์ที่ไม่เสีย 250 รายการ แต่อีก 13 เสียหาย จึงเข้าตรวจสอบและซ่อมแซมทีละลิงค์ ซึ่งความเสียหายที่พบมี 5 ประเภท คือ File Not found , Server Not found , Fobidden , Internal Server Error และ Timeout เมื่อตรวจในรายละเอียด พบว่า ผู้ให้บริการเปลี่ยนเป็น https หรือ บางลิงค์ต้องเข้าซ้ำจึงจะเข้าได้ อาจเป็นเพราะเครื่องบริการตอบสนองช้าเกินกำหนด จึงไม่ทันใจก็เป็นได้
deadlinkchecker.com
w3.org/checklink
ahrefs.com/broken-link-checker
drlinkcheck.com/
softwaretestinghelp.com/broken-link-checker/
Chrome : Broken Link Checker
Chrome : Deadlink Checker

ตัวอย่าง webpage ที่ผ่านการทดสอบ

blank_menu.htm บน pagespeed หรือ github.io บน pagespeed

เว็บเพจที่ดี (Good Webpage) ต้องผ่านการทดสอบ (Testing) ในหลายสถานการณ์ แต่ก็ไม่จำเป็นว่าดีของผู้ตั้งกฎเกณฑ์ (Criteria) จะดีสำหรับเราเสมอไป มีโอกาสเขียนเว็บเพจ ชื่อ blank_menu.htm ที่เป็น responsive web design มีเมนูแบบ drop down เมื่อเปลี่ยนขนาดจอไปถึง 320px หรือ iphone5 หลังนำ code ที่มีอยู่ไปทำเว็บเพจหน้านี้ ได้ส่งเข้าตรวจสอบใน 4 สถานการณ์ ดังนี้
1. User Experience : 100/100
2. Speed : 100/100
3. CSS Standard : Pass
4. XHTML Standard : Pass (no warning)
แล้วเปิดด้วย IE 11 และ save as เป็น Web archive, Single file (.mht) เมื่อเปิดด้วย IE11 พบว่าหน้าตาเหมือนเดิม
Link : blank_menu.htm และ blank_menu_htm.mht

ความแตกต่างของ ID และ Class ใน CSS

CSS (Cascading Style Sheets) คือ ภาษาคอมพิวเตอร์สำหรับกำหนดรูปแบบในเอกสาร HTML หรือเรียกว่า สไตล์ชีต ที่ใช้กำหนดรูปแบบ (Layout) สีอักษร สีพื้น ตัวอักษร การจัดวาง ระยะห่าง เส้นขอบ เป็นต้น มีรูปแบบ Syntax เฉพาะตัว ได้รับการกำหนดมาตรฐานโดย W3C การใช้ CSS มี 3 แบบ คือ Inline, Internal และ External CSS
เรื่อง CSS : Cascading Style Sheets กลายเป็นข้อควรรู้ที่จำเป็นสำหรับนักพัฒนาเว็บไซต์อย่างหลีกเลี่ยงไม่ได้ ปัจจุบัน CSS มีถึงรุ่น 3 แล้ว ในการใช้งานจริงมักสร้าง CSS แบบ External style sheet เพราะแฟ้มอื่นเรียกใช้ได้ ส่วน Internal style sheet ก็จะเรียกใช้ได้เฉพาะในแฟ้มนั้น ส่วน Inline style ก็จะพิมพ์คำว่า style ต่อท้าย tag นั้นไปเลย ซึ่งตัวแปรหลัก 2 แบบที่กำหนดเองใน CSS มี 2 แบบคือ id กับ class
การกำหนด และการเรียกใช้ต่างกันไป ถ้าเป็น id จะขึ้นต้นด้วย # แต่เป็น class จะขึ้นต้นด้วย . ถ้าเรียกใช้ id จะใช้ properties name ว่า id ส่วนเรียกใช้ class จะใช้ properties name ว่า class
สิ่งที่แตกต่างกัน คือ id จะเรียกใช้ครั้งเดียว แต่ class เรียกใช้ได้หลายครั้ง ถ้าวางแผนอย่างใจเย็นก็จะใช้ประโยชน์จาก css ได้อย่างเต็มที่ มีตัวอย่างที่ css_sample.htm และ การทำเมนู Responsive แบบ Top Nav หากจะทดสอบการปรับแต่ง css ทำได้ที่ w3schools.com

style

#header {background-color:yellow;font-size:20px;} 
.title-text {color:red;} 
p.big { font-size:40px; }
span.small { font-size:10px; }
table, th, td { border: 1px solid black; }
.br1 {color:red;border: 2px} 
.br2 {font-size:20px;float:left;}
.br3 {color:blue;font-size:30px;float:left;}

body

<body id="header" class="title-text">
<span style="color:green;">hello</span>
<p class="big">my</p>
<span class="small">friend</span>
<span class="small">is tom.</span>
<table class="br1"><tr><td>one</td></tr></table>
<table class="br2"><tr><td>two</td></tr></table>
<table class="br3"><tr><td>three</td></tr></table>

นิยามศัพท์
px (Pixels) คือ หน่วยสำหรับวัดการแสดงผลบนหน้าจอ (Screen) โดย 1 Pixel เท่ากับ 1 จุดบนหน้าจอ
pt (Points) คือ หน่วยสำหรับสื่อสิ่งพิมพ์ ที่ต้องการพิมพ์บนกระดาษ (Paper) โดย 1 Point มีค่าเท่ากับ 1/72 นิ้ว
em หรือ rem (Root Element) คือ หน่วยที่เป็นจำนวนเท่าที่กำหนดไว้ในระดับบนสุด (Default pixel size) ปกติ 1em =16px เทียบกับ Parent ที่ใกล้สุด แต่ 1rem =16px โดยอ้างอิงจากค่า Root ของโฮมเพจ ดังนั้นถ้า Root ของโฮมเพจกำหนดขนาดตัวอักษรเป็น 10px ก็จะได้ว่า 1rem=10px

html { font-size: 62.5%; } /* 16 x 0.625 =10px */
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

เรียกใช้ font แบบ TTF (True Type Font) [Hidden]

<body>
<style>
@font-face{
font-family:THChakraPetch;
src:url('rsp_thchakrapetch.ttf');
}
@font-face{
font-family:AlexBrush;
src:url('rsp_alexbrush.ttf');
}
</style>
<p style="font-family:THChakraPetch;font-size:100px;">สวัสดี</p>
<p style="font-family:AlexBrush;font-size:100px;">hello</p>
<p><a href="rsp_thchakrapetch.ttf">rsp_thchakrapetch.ttf</a></p>
<p><a href="rsp_alexbrush.ttf">rsp_alexbrush.ttf</a></p>
</body>

บริการสร้าง block สำหรับ web 2.0 ที่ผมใช้รุ่น 3.1 [Hidden]

JS Library : SyntaxHighLighter

เครื่องมือสำหรับการแสดง Source code ให้อ่านง่ายเป็นระเบียบเหมือนที่ปรากฎใน Editor ซึ่ง thaiall.com เลือกใช้ SyntaxHighLighter V3 ของ Alex Gorbatchev ซึ่งเผยแพร่ที่ github.com (V4) การใช้งานสามารถ Download script ที่เป็น javascript มาไว้ในเครื่องแล้วเรียกเข้ามาผ่าน <script> หรือจะเรียกแฟ้มแบบ online เข้ามาตรง ๆ จากแห่งเผยแพร่ script ก็ได้ เช่นที่ https://cdnjs.com (Content Delivery Network) ตัวอย่างการใช้งานที่เรียกมาใช้แบบ online คือ webpage ที่ฝากไว้กับ Github.io เพื่อแสดงแฟ้ม rsp62.css การปรับแต่งนั้น นอกจากจะปรับใน code ที่นำเสนอ source code ได้แล้ว ยังปรับที่แฟ้ม syntaxhighlighter/styles/* อีกด้วย แล้วทำ webpage ทดสอบการใช้งานที่ SyntaxHighLighter.htm

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreDefault.css"/>
<script type="text/javascript">SyntaxHighlighter.all();</script>
<style type="text/css"> .syntaxhighlighter { overflow-y: auto !important; overflow-x: auto !important;</style>
Type 1: control style
<pre class="brush: js">
Hello world!
</pre>

Type 2: highlight
<pre class="brush: js; highlight: [1, 2]">
Hello 
world!
</pre>

Type 3: style in line
<div style="width: 320px !important;">
<pre class="brush: js">
Hello world!
</pre>
</div>
Type 4: no toolbar
<div class="syntaxhighlighter" style="width: 320px !important;">
<pre class="brush: js; toolbar: false;">
Hello world!
</pre>
</div>
Type 5: user class
<div class="m_still">
<pre class="brush: js">
Hello world!
</pre>
</div>
http://www.thaiall.com/web2/syntaxhighlighter.htm

JS Library : Prettify.js

+ prettify.htm มี open source ใน github.com
Set 1 : online calling from
- rawgit../run_prettify.js
- thaiall.com/prettify/rawgit_run_prettify.js
- rawgit_run_prettify.css
Set 2 : unzip from github.com
- thaiall.com/prettify/run_prettify.js
- thaiall.com/prettify/skins/sunburst.css

ตัวอย่าง source code
สำหรับเรียกใช้ prettify.js เพื่อแสดง source code ที่สวยงาม เป็นอีกทางเลือกนอกจากการใช้ Syntaxhighlighter มีตัวอย่างใช้งานจริงในการนำเสนอ Source code ที่ /source
ซึ่งมี theme ให้เลือก 3 แบบ คือ Default, Sons-of-obsidian และ Sunburst

<!DOCTYPE html><html><head>
<link type="text/css" rel="stylesheet" href="../prettify/prettify.css" />
<script src="../prettify/run_prettify.js" defer></script>
</head><body>
<?prettify linenums=true?>
<pre class="prettyprint" style="font-size:16px;">
Hello world
This is the testing for Prettify library
</pre>
</body></html>

thaiall.com/prettify/prettify-small.zip
: run_prettify.js และ prettify.css จาก prettify.htm
Skins : Desert, Doxy, Sons-of-obsidian, Sunburst

JS Library : LightBox

เครื่องมือ Library สำหรับการแสดงภาพ Enlarge เป็น Layer ใหม่ ลอยเหนือ Layer Webpage ที่มี Thumbnail หรือ Link ของภาพ แล้วสามารถคลิ๊กเลื่อนไปยังภาพต่อไปแบบ Slide Show ซึ่งเผยแพร่ที่ lokeshdhakar.com พบว่ามีหลาย version ซึ่งผมนำไปใช้ในหลายโฮมเพจ (Lightbox v2.10.0 เรียกใช้เพียง lightbox.css และ lightbox-plus-jquery.js) เช่น /Web2, /Java/test.htm, /Handbill, หรือ /Lightbox.htm ส่วนรุ่นเก่า Lightbox v2.04 แบบเรียกแฟ้ม .js จำนวน 3 แฟ้ม (lightbox.css, prototype.js, scriptaculous.js, lightbox.js) ใช้ที่ /Html5/test.htm
ปัญหาที่อาจรู้สึกได้ หากเรียกแฟ้มจาก cdnjs คือ response time ที่อาจมากกว่าในเครื่องของเราเอง

Sample Code

Lightbox v2.04
<link rel="stylesheet" href="/lightbox.css" type="text/css" media="screen" />
<script src="/prototype.js" type="text/javascript"></script>
<script src="/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="/lightbox.js" type="text/javascript"></script>
<a href="yahoo.webp" rel='lightbox[yahoo]'><img src="yahoo.webp" /></a>

แฟ้ม builder.js และ effect.js จะถูกโหลดโดยอัตโนมัติ พร้อมกับ /images/closelabel.gif และ /images/loading.gif
มีตัวอย่างที่ lightbox.htm (Lightbox v2.04)

Lightbox v2.10.0
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/js/lightbox-plus-jquery.js"></script>
<a href="burinr.jpg" rel='lightbox[burin]'><img src="burinr.jpg" /></a>

มีตัวอย่างที่ java_test.htm (Lightbox v2.10.0)

JS Library : Bootstrap Bootstrap คือ สิ่งที่ช่วยทำให้ง่ายขึ้น หรือ สิ่งที่ทำได้ด้วยตัวเอง [Glyphicon sample listing]
BBootstrap คือ Front-end Framework ที่ช่วยพัฒนาเว็บไซต์ได้เร็วขึ้น ง่ายขึ้น ซึ่ง Bootstrap มีเครื่องมือหลักให้ 4 แบบ คือ แบบที่ 1) Scaffolding หรือ Grid system ช่วยจัด column และ row บน screen เพื่อจัด Layouts แบบที่ 2) Base CSS ช่วยจัด form, table, icons หรือ buttons แบบที่ 3) Components ช่วยจัด Navbar หรือ Pagination หรือ Progress bars หรือ Media object แบบที่ 4) JavaScript ช่วยจัด Dropdown, Tab, Popover, Collapse, Carousel

กรณีใช้ Navbar - เมนูคอมพิวเตอร์ ก็คล้ายกับเมนูอาหาร มีตัวเลือกมากมายให้เลือกสั่ง ต้ม ผัด แกง ทอด ไอศครีม เมนูคอมพิวเตอร์ที่คุ้นตาก็จะมี file, edit, view, help เป็นต้น นักพัฒนา (Developer) จะเลือกเครื่องมือจัดเมนูให้ผู้ใช้ (User) เข้าถึงบริการต่าง ๆ ที่พัฒนาขึ้น ต่อไปเป็นตัวอย่างการทดสอบ menu ทั้ง 6 แบบ ที่ใช้ bootstrap กับ Java script ข้างนอก และเขียนเอง ซึ่งแชร์ source code 6 แบบ ใน blog

ตัวอย่างที่ 1 (แบบที่ 4)
การอ้างอิง Bootstrap จากภายนอกเครื่องบริการ มีใช้ที่ marry.htm (menu)

Sample #1
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="http://www.thaiall.com">Thaiall.com</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="http://www.thaiall.com">Home</a></li>
      <li><a href="http://www.thaiall.com/php">PHP</a></li>
    </ul>
  </div>
</nav>

ตัวอย่างที่ 2 (แบบที่ 2)
การอ้างอิง Bootstrap เฉพาะ glyphicons จากภายนอกเครื่องบริการ มีใช้ที่ /handbill

Sample #2
<link rel="stylesheet" 
href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css">
<span class="glyphicon glyphicon-heart" style="color:red;"></span>
<span class="glyphicon glyphicon-globe" style="color:red;"></span>
<span class="glyphicon glyphicon-chevron-right" style="color:red;"></span>

ตัวอย่างที่ 3 (แบบที่ 2)
การอ้างอิง Bootstrap เฉพาะ glyphicons จากภายในเครื่องบริการ มีใช้ที่ /web2 หรือ /teachaccess
สำหรับ http://www.thaiall.com/bootstrap/bootstrap-glyphicons330.css

Sample #3
<link rel="stylesheet" href="/bootstrap/bootstrap-glyphicons330.css">
<span class="glyphicon glyphicon-heart" style="color:red;font-size:20px;"></span>

ตัวอย่างที่ 4
การใช้อักษรพิเศษรูปหัวใจ (Heart) อาจไม่ต้องใช้ bootstrap มีใช้ที่ blank_menu.htm

Sample #4
<span style="color:red;font-size:40px;"> &hearts; &#9829; &#x2665; </span>
<span style="color:pink;font-size:40px;"> &#10084; &#x2764; </span>
<span style="color:blue;font-size:40px;"> &#10085; &#x2765; </span>

JS Library : Google Map

ปัจจุบันมีการนำแผนที่ของ Google มาประยุกต์ใช้มากมาย สำหรับการเขียน HTML ก็เพียงแต่ใช้ <script> อ้างอึง address ที่ google เผยแพร่ จากนั้นก็ส่ง option ที่เรากำหนด แล้วกำหนด div สำหรับวางแผนที่ใน webpage เพียงเท่านี้ก็มีข้อมูลแผนที่มากมายมาแสดงผล เราสามารถพัฒนาโปรแกรมด้วยภาษา Script บน Web server ที่ทำงานร่วมกับ Database , windows app, ios app, android app เพื่อจัดการข้อมูล และควบคุมการแสดงผลของแผนที่ มีตัวอย่างที่ thaiall.com/map

บริการอื่น ๆ ของ Google ที่น่าสนใจ
+ Google Map
+ Google chart เล่าใน PHP
+ Google Firebase Demo
ทดสอบแสดง google map ใน iframe

พบว่า ไม่สามารถเรียก map ของ Google เข้ามาแสดงใน iframe ที่จุดนี้ พบว่า Google แจ้งว่า "หน้านี้โหลด Google Maps ไม่ถูกต้อง" จึงต้องไปแสดงในแฟ้ม map.htm

<html><head><script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script> 
function initialize() { 
  var latlng = new google.maps.LatLng(18.217612,99.63913); 
  var myOptions = { 
    zoom: 10, 
    center: latlng, 
    navigationControl: true, 
    mapTypeControl: true, 
    scaleControl: true,
    mapTypeId: google.maps.MapTypeId.HYBRID
  }; 
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
} 
</script> 
</head><body onload="initialize()"> 
<div id="map_canvas" style="width:100%; height:100%"></div> 
</body></html>

JS Library : Google chart

การนำเสนอ chart ในเว็บเพจ

มีด้วยกันหลายวิธี ได้ทบทวนการใช้ OFC (Open Flash Chart) อยู่พักหนึ่ง สุดท้ายก็ต้องยอมแพ้ เพราะ เส้นทางของ Flash ในอนาคต ดูจะตีบตันเหลือเกิน และ OFC ก็ไม่ได้พัฒนาต่อให้สมบูรณ์ ต่างกับ Google Chart ที่พัฒนาอย่างต่อเนื่อง และเลือกใช้งานได้หลากหลาย ตามความต้องการของผู้ใช้

Sample code

<html><head><title>line chart</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
  ['Year', 'Sales', 'Expenses'],
  ['2004', 1000, 400],
  ['2005', 1170, 460],
  ['2006', 660, 1120],
  ['2007', 1030, 540]]);
  var options = { title: 'Company Performance', curveType: 'function', legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script></head>
<body><div id="curve_chart" style="width: 900px; height: 500px"></div></body>
</html>

Source + Output : .. line.docx

แนะนำเว็บไซต์ (Website guide)

http://guru.sanook.com/2424/
Web 3.0 คือ การจัดเก็บและนำเสนอแบบมี Hierarchy
http://en.wikipedia.org/wiki/Web_2.0
Web 2.0 คือ user-generated content and interoperability
http://www.w3.org/2001/sw/
http://www.w3schools.com (tryhtml_basic)
https://conferences.oreilly.com/web2summit/web2011
http://www.paulgraham.com/web20.html
https://www.zdnet.com/blog/web2explorer
https://www.wired.com
http://www.digital-web.com/
https://en.wikipedia.org/wiki/Semantic_Web
https://www.oreilly.com/pub/a/web2/
https://tools.pingdom.com (Load time checker)
https://fast.com (Speed Testing)

หัวข้อที่น่าสนใจ

Git

TEC

ตัวอย่างรูปแบบวางภาพใน google/classroom.htm

ครูUSเล่าว่ามีระบบตรวจสอบคัดลอก
ยังไม่รองรับภาษาไทย ใช้ใน G Suite
ซึ่ง Admin ต้องสมัครรุ่นทดสอบ

ข้อมูลเบื้องต้นเกี่ยวกับวิชา
ชื่อวิชา และห้องเรียน
นำรหัสชั้นเรียนไปบอกนักเรียนให้เข้าเรียน

นักเรียนรู้คะแนน
คะแนนงานได้เท่าใด
คะแนนสอบได้เท่าใด

บัญชีบุคคลใน gmail.com
สามารถเข้าใช้บริการ
สร้างชั้นเรียนและเชิญนักเรียนได้

Chrome มีตัวเลือกช่วยเปลี่ยนแปลภาษาได้ง่าย
ต้องเข้าไปตั้งค่าภาษา - ชั้นสูง
"เสนอให้แปลหน้าที่ไม่ใช่ภาษาที่เราอ่านได้"

เราสามารถสร้างชั้นเรียนได้หลายชั้นเรียน
ภาพนี้คลิ๊ปปุ่ม +
เลือกได้ว่าจะ เข้าร่วมชั้นเรียน / สร้างชั้นเรียน

คลิ๊ปวีดีโอ

in craft

in cartoon

Web 1.0 2.0 3.0

Web 3.0 - IoT

Future Internet

Tim Berners-Lee

สื่อเทิดพระเกียรติในหลวง รัชกาลที่ 9

4Shared.com

Box.com

One Drive

พบว่า Dropbox.com และ Google drive ไม่บริการ embed และใช้ iframe ไม่ได้ แต่ 4shared.com และ box.com และ one drive ให้ embed ผ่าน iframe ได้
Royal_files.htm
Kingsong.htm

ตัวอย่าง 13 ฟอนต์ราชการ

13 ฟอนต์ราชการ	20px	18px	16px	14px
1. TH Bai Jamjuree CP (ใบจามจุรี)
2. TH Chakra Petch (จักรเพชร)
3. TH Charm of AU (ชาร์ม ออฟ เอยู)
4. TH Charmonman (จามรมาน)
5. TH Fah Kwang (ฟ้ากว้าง)
6. TH K2D July8 (8 กรกฏา)
7. TH Kodchasan (คชสาร)
8. TH KoHo (กลุ่ม ก-ฮ)
9. TH Krub (ครับ)
10. TH Mali Grade 6 (ด.ญ. มะลิ ป.6)
11. TH Niramit AS (นิรมิตร)
12. TH Srisakdi (ศรีศักดิ์)
13. TH Sarabun PSK (สารบรรณ)

อ้างอิงจาก
https://www.f0nt.com/release/13-free-fonts-from-sipa/
https://en.wikipedia.org/wiki/National_fonts
http://www.thaiall.com/html5

12 Google Fonts

1. ฟอนต์ Itim (ไอติม)
– มีหัวกลม ตัวกลม โค้งมน คล้ายเขียน

2. ฟอนต์ Chonburi (ชลบุรี)
– ไม่มีหัว ตัวหนา เหมือนใช้ปากกาหัวแบน

3. ฟอนต์ Kanit (คณิต)
– ไม่มีหัว ทันสมัย อ่านง่าย น่าใช้

4. ฟอนต์ Prompt (พร้อม)
– ไม่มีหัว สะอาด โค้งกว่าคณิต คล้ายเขียน

5. ฟอนต์ Trirong (ไตรรงค์)
– มีหัว ผอมบาง ดูเป็นมาตรฐาน

6. ฟอนต์ Taviraj (ทวิราช)
– มีหัว อ้วนกว่าไตรรงค์

7. ฟอนต์ Mitr (มิตร)
– ไม่มีหัว ทันสมัย คล้ายคณิต หนากว่า

8. ฟอนต์ Athiti (อธิติ)
– ไม่มีหัว แบบบาง ดูโปร่ง คล้ายเขียน

9. ฟอนต์ Pridi (ปรีดี)
– มีหัว เป็นไทย อ้วนกว่าไตรรงค์

10. ฟอนต์ Maitree (ไมตรี)
– มีหัว มีเชิงชายมาก ผอมกว่าไตรรงค์

11. ฟอนต์ Pattaya (พัทยา)
– ไม่มีหัว ตัวเอียง หนา ทันสมัย

12. ฟอนต์ Sriracha (ศรีราชา)
– ไม่มีหัว เอียงสวย ลีลา คล้ายเขียน

https://i-makeweb.com/freebies/font-thai-free-google-fonts
https://www.designil.com/free-thai-fonts-google-web/
ตัวอย่าง code สำหรับเรียกใช้ font
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Itim|Chonburi" />

การเรียกใช้ google font : kanit, mitr ในแฟ้ม html

# เรื่อง google font
1. แฟ้ม mitr.htm อยู่ใน local จะไม่เรียก font ไม่ได้ เพราะไปอ้างอิง Resource จากข้างนอก จะฟ้อง has been blocked by CORS policy 
2. แฟ้ม mitr.htm นี้ สามารถเรียก kanit ในเครื่องของผมได้ เพราะติดตั้ง font ไว้ในระบบปฏิบัติการ แต่เปลี่ยนเครื่องจะไม่แสดง font เพราะไม่ได้ติดตั้งในเครื่องอื่น
3. เรียก kanit ใน thaiabc.wordpress.com แล้วเปิดที่เครื่องของผมได้ เพราะติดตั้ง font ไว้ แต่เปิดเครื่องอื่นจะไม่พบ
4. แฟ้ม mitr.htm วางใน thaiall.com แล้วเรียก font ในห้อง /google/fonts พบว่าใช้งานได้ปกติ
5. คำว่า CORS ย่อมาจาก Cross-Origin Resource Sharing เป็นประเด็นที่ป้องกันการเรียกใช้ทรัพยากรข้ามเครื่อง
- ทดสอบที่ http://www.thaiall.com/google/fonts/mitr.htm
- เปิด https://fonts.google.com/specimen/Mitr แล้ว download .zip แล้ว unzip แล้ว คลิ๊ก install fonts ได้
- เปิด https://fonts.google.com/specimen/Kanit แล้ว download .zip แล้ว unzip แล้ว คลิ๊ก install fonts ได้

งานมอบหมาย คือ ฝึกวิชาที่หนักหนา

งานมอบหมาย (Assignment) หมายถึง การสั่งงานให้นิสิต/นักศึกษา/นักเรียน/ผู้เรียนรู้ ได้ฝึกปฏิบัติด้วยตนเอง เป็นวิธีหนึ่งในการพัฒนาทักษะของผู้เรียน งานมอบหมายที่ใช้เวลาค้นคว้า เรียนรู้ ปฏิบัติ ไม่นานนัก และทำที่บ้าน เรียกว่า การบ้าน (Homework) ส่วนงานมอบหมายที่ต้องดำเนินการอย่างเป็นระบบ ใช้เวลาระยะหนึ่ง ลองผิดลองถูก ปรับปรุงแก้ไขพัฒนา เรียกว่า โครงงาน (Project) สำหรับงานมอบหมาย/การบ้าน/โครงงาน มักต้องใช้หลักการแนวทางที่ได้จากในห้องเรียน ต่อยอด หรือค้นคว้าเพิ่มเติม ที่ท้าทายความสามารถมากพอ จนต้องใช้เวลาระยะหนึ่งในการฝึกฝน ค้นคว้า จนสำเร็จตามวัตถุประสงค์ เกิดทักษะตามวัตถุประสงค์ที่กำหนดไว้

ชวนมองงานมอบหมายในแต่ละวิชา

การพัฒนาเว็บไซต์ด้วยภาษา PHP
สื่อและเทคโนโลยีสารสนเทศ
ระบบปฏิบัติการ
การโปรแกรมภาษาจาวา
ปฏิสัมพันธ์ระหว่างมนุษย์และคอมพิวเตอร์
กฎหมาย และจริยธรรมทางคอมพิเตอร์

กล่องรับข้อเสนอแนะ

กล่องรับข้อเสนอแนะ
ในเว็บไซต์ thaiall.com ได้เพิ่ม กล่องรับความคิดเห็น (คลิ๊ก : short url) เข้า template รุ่น 7.3 อยู่มุมล่างขวาสุดของเว็บเพจ ใช้บริการของ google form โดยใช้บัญชี @gmail.com ทำให้มีฟอร์มเปิดรับข้อเสนอแนะ แบ่งเป็น หัวเรื่อง กับ รายละเอียด ให้เพื่อน (Peer) ได้เข้าไปแสดงความคิดเห็น หรือต้องการให้ข้อเสนอแนะต่อเว็บไซต์ เมื่อถึงเวลาอันควรก็จะใช้อีเมล @gmail.com เปิดเข้าไปใน Google doc, Form หรือ Sheets เข้าไปเปิด "การตอบกลับ" พบข้อเสนอแนะ ที่เรียงตาม วัน เวลาในระดับวินาที ใน Form สามารถตั้งได้ว่า "รับการแจ้งเตือนทางอีเมลเมื่อมีคำตอบใหม่" ในแต่ละ Form สามารถเลือก "ผู้ทำงานร่วมกัน" เพิ่ม @hotmail.com หรือ @nation.ac.th ก็ทำให้ผู้ที่ได้รับเชิญ เข้ามาดูการตอบกลับได้ ทำให้การจัดการกล่องรับข้อเสนอแนะ ดำเนินการร่วมกันได้ ไม่ใช่ทำงานคนเดียว ด้วยอีเมลเดียวเท่านั้น เมื่อเพื่อน @hotmail.com ได้รับจดหมายเชิญเข้าไปทำงานร่วมกันใน "ฟอร์ม" ก็กดปุ่มใน inbox ชื่อ "เปิดในฟอร์ม" เมื่อเปิดแล้วก็สามารถแสดงความคิดเห็น เหมือนคนทั่วไป แต่ถ้าต้องการเข้าแก้ไข หรือดู การตอบกลับ ก็คลิ๊กปุ่ม "REQUEST EDIT ACCESS" ที่อยู่มุมบนขวาได้

บทเรียน นักเรียนทำแบบทดสอบ #

. นักเรียนเปิดแบบทดสอบ
เมื่อเปิดลิงค์จะพบแบบทดสอบเช่น TEC101temp https://forms.gle/sSMHQ2VrtsRqGm1P6
ซึ่งปิดรับคำตอบ/ข้อคิดเห็น คนเดิมทำซ้ำไม่ได้
หรือ TEC103 (4 ข้อเฉลย) https://forms.gle/UZoqbbVVBP4Y96cG8

. คำตอบ คือ อัพโหลด
กรณีแบบทดสอบต้องการให้ส่งแฟ้ม
เลือก อัพโหลดแฟ้มได้
คลิ๊ก เพิ่มไฟล์ และเพิ่มไฟล์อีกได้
คลิ๊ก อัพโหลด

. ทำครบทุก section
กรณีข้อสอบแบ่งเป็น Section
หน้าสุดท้ายมีปุ่มให้คลิ๊ก "ส่ง"

. บันทึกแล้ว
พบว่าข้อสอบไม่ให้ทำอีกครั้ง
และดูคะแนนไม่ได้ ต้อง "ปิดหน้าต่างนี้"

. กรณีรับ Link ทางอีเมล
ครูเชิญนักเรียนผ่านทางอีเมล
นักเรียนเปิดอีเมล แล้วคลิ๊ก "กรอกข้อมูลฟอร์ม"

. ต้องการอีเมล
ต้องลงชื่อเข้าใช้
กรอกอีเมล แม้ใช้ชื่อเดียวกับที่เข้าระบบ แต่ก็ต้องกรอก
หรือ กรอกให้ต่างจากอีเมลกับที่ลงชื่อไว้ได้

. ทำครบทุก section
กรณีข้อสอบแบ่งเป็น Section
หน้าสุดท้ายมีปุ่มให้คลิ๊ก "ส่ง"
ถือว่าเสร็จสิ้นภารกิจทำแบบทดสอบ

ภาพประกอบ

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

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

ระบบปฏิบัติการ
โปรแกรมจัดการซอฟต์แวร์และฮาร์ดแวร์ เพื่อสนับสนุนการประมวลผล อำนวยความสะดวก และความเข้ากันให้ราบรื่น

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

การ clone จาก github.com $ git clone https://github.com/mozilla/pdf.js.git

สั่งดาวน์โหลด script ทั้งหมดใน repository จาก github.com
มาไว้ในเครื่องคอมพิวเตอร์ของเรา บน current directory
ระยะเวลาในการ download ขึ้นอยู่ขนาดของ repository และความเร็วในการเชื่อมต่อ
ซึ่งยังนำ package นี้ไปใช้ในทันทีไม่ได้ ต้องมีขั้นตอนต่อไป
หลัง clone ทำให้ห้อง pdf.js มีขนาดรวมถึง 203 MB, 1626 Files, 194 Folders

pdf.js
git

Design : อ่านเพิ่มเติม

มีอยู่ช่วงหนึ่ง ที่พบปัญหาการออกแบบเว็บเพจ ที่มีเนื้อหาจำแนกออกเป็น block โดยใช้ tag fieldset เข้ามาจัดการ แล้วมีจำนวน block เพิ่ีมขึ้นอย่างต่อเนื่อง พบว่า มีหลายเว็บเพจ ที่ไม่ได้ออกแบบให้มีรายการสารบัญ (content) ไว้ที่ส่วนบนของหน้านั้น จึงทำให้เนื้อหา กับ ภาคผนวก ผสมต่อเนื่องกันจนแยกกันได้ยาก เป็นเหตุให้ต้องเพิ่มการแบ่งส่วนให้ชัดเจน แต่ยังคงเนื้อหาทั้งหมดให้เป็นแบบ static และอยู่ในเว็บเพจเพียงหน้าเดียว จึงได้เลือกใช้วิธีเพิ่ม bar ที่ชื่อว่า อ่านเพิ่มเติม แล้วเขียน javascript เข้ามาควบคุมลำดับให้เป็น automatic running ทำให้สามารถอ้างอิง block ตามหมายเลขลำดับได้ง่ายขึ้น ว่า block ที่เห็นอยู่นั้นเป็น block ที่เท่าใด กลุ่มเว็บเพจที่ใช้งาน "อ่านเพิ่มเติม" เต็มเซต คือ /mis ที่มีถึง 22 เว็บเพจ สำหรับคำสั่ง ภาษาจาวาสคริปต์ ที่ใช้สำหรับเลข 1 นั้น เขียนลำดับการสั่งงานต่างกับคำสั่งสำหรับแสดงหมายเลขถัดไป เพราะการนับ 1 จำเป็นต้องประกาศตัวแปรในครั้งแรก ส่วนตัวถัดไปสามารถใช้ตัวแปรที่ประกาศขึ้นมาแล้วได้ มีตัวอย่าง ดังนี้

<div class="num"><script>var i = 1; document.write(i++);</script></div>
<div class="num"><script>document.write(i++);</script></div>

histats.com มีบริการเสริมติดมาที่มุมล่างซ้าย

Histats websites in Thailand
- 2,430 results in this report (Upgrade : required)
- อ่านเรื่อง um-simpli-fi
- กรมอุตุนิยมวิทยา
- builtwith.com

PWA เริ่มใช้ที่รุ่น 8.2

เมื่อ 23 มี.ค.65 เริ่มปรับ /web2 และ /pwa เป็นรุ่น 8.2 มีการปรับที่สำคัญ คือ การทำให้ webpage สามารถแสดงผลเหมือนเป็น mobile app ซึ่งการใช้งาน เริ่มจากเปิด webpage ผ่าน browser บน mobile แล้วเลือก "เพิ่มไปที่ , หน้าจอหน้าแรก" จะมี icon ปรากฎบน mobile ถือเป็นการติดตั้งเรียบร้อยแล้ว ต่อจากนั้น เมื่อเริ่มใช้งาน เราสามารถคลิ๊ก icon บน mobile จะมีหน้าตาเหมือน application แต่ระบบข้างหลัง คือ browser เช่นเดิม
โจทย์นี้ เคยมีเพื่อนต้องการให้แสดง webpage แบบ full screen บน browser ซึ่งมีกรณีศึกษาที่ดำเนินการเทียบเคียงได้กับหนังสืออีเล็กทรอนิกส์ Peter rabbit ทำให้ผมนึกถึงการทำงานของ PWA ที่เคยแกะโค้ดไว้เมื่อปี 2560 แต่เป็นคุณสมบัติการทำ Full screen ที่แตกต่างกัน แล้วเห็นว่าความสามารถของ PWA นี้น่าสนใจ จึงเริ่มต้นนำร่องปรับใช้กับ 2 โฮมเพจนี้ ซึ่งการใช้งานก็เพิ่มโค้ดไปเพียง 2 tag ในบรรทัดที่ 6 คือ 1) กำหนดค่ารายการในแฟ้ม manifest ที่ต้องปรับสำหรับแต่ละหน้า และ 2) เรียกสคลิ๊ป material.min.js ซึ่งเป็นองค์ประกอบสำหรับการออกแบบที่เรียกใช้ค่าจากแฟ้ม manifest
github.com/kongruksiamza/PWATutorial/

ปรับโฮมเพจ ศาสตราจารย์ บัณฑิต กันตะบุตร เนื่องจากเสิร์ชเอนจินแต่ละค่าย ให้ผลสืบค้นต่างกัน เมื่อ 25 มีนาคม 2565 ค้น ศาสตราจารย์ บัณฑิต กันตะบุตร ใน google.com ไม่พบเลย แต่ค้นพบใน yahoo.com ทั้งหมด 3 หน้า คือ thaiall และ thaiabc และ thaiabc..article.asp จึงได้ทำการคัดลอกเว็บเพจ ปรับแก้ให้เข้ากับไซต์ใหม่ แล้วอัพโหลดใหม่ โดยเนื้อหาเว็บเพจของอาจารย์เป็นแฟ้มแรกในกลุ่ม /article ที่ดำเนินการนำร่อง โดยมีขั้นตอนดำเนินการ 4 ส่วน ดังนี้
แก้ไข og:image และ og:url ในบรรทัดที่ 3 และ 5 จาก thaiall.com เป็น thaiabc.com
ลบ menu bar และ header ออกทั้งหมดตั้งแต่ใต้ body ไปจนถึง tag กำหนดจุฬาภรณ์ลิขิต
เมนูของ footer ลบออกทั้งหมด ตั้งแต่ใต้นาฬิกาจับเวลา ไปถึง truehits.net
เปลี่ยนค่า tracker ของ truehits.net จาก c0001941 เป็น h0014200 ในส่วนของ footer

เช็คอันดับใน Search engine ผ่าน smallseotools.com

serprobot.com

การตั้งชื่อโฮมเพจ เว็บไซต์ โพสต์ หรือหัวข้อ มีความสำคัญต่อการพิจารณานำไปจัดอันดับในระบบ Search Engine ซึ่งอยู่ในหัวข้อ SEO (Search Engine Optimization) ที่ผู้จัดทำเว็บไซต์ หรือเนื้อหาทุกคนต้องให้ความสนใจ เพราะมีผลต่อการเข้าถึงที่สุด ถ้าผลการสืบค้นตามคำค้นที่ได้วางแผนไว้ อยู่ในอันดับแรก ย่อมมีปริมาณการเข้าถึงสูง ส่งผลต่อการบรรลุเป้าหมายของการสร้างโฮมเพจ เว็บไซต์ โพสต์หรือหัวข้อนั้นได้ อาจมีวัตถุประสงค์เพื่อการค้า บริการ การประชาสัมพันธ์ หรือให้ข้อมูลข่าวสาร
ตัวอย่างใน smallseotools.com หรือ searchenginereports.net เป็นการค้นหา ตำแหน่งอันดับใน google.com ว่า โฮมเพจอีคอมเมิร์ซ ในเว็บไซต์ของ thaiall.com ที่ได้ใช้ title มาเป็นคำค้น จะต้องใช้คำเดียว หรือหลายคำค้น จึงจะพบเนื้อหาในอันดับที่เท่าใด เพราะ "keyword" แต่ละคำย่อมถูกครอบครองโดยเว็บไซต์ที่น่าเชื่อถือ ถ้าต้องการทางลัดให้ได้อันดับที่ดี ก็จำเป็นต้องเลือกซื้อบริการ Advertising จากแต่ละแหล่ง โดยเจาะตรงถึงกลุ่มเป้าหมายทั้งเพศ อายุ ภูมิลำเนา และคำค้นได้ แล้วท่านล่ะ สนใจใช้คำค้นคำใดผ่าน Search Engine เป็นพิเศษ

คุณคิดอะไรอยู่

ShareThis.com

เอกสารอ้างอิง (Reference)

[1] โอภาส เอี่ยมสิริวงศ์. (2551). "วิทยาการคอมพิวเตอร์และเทคโนโลยีสารสนเทศ", บริษัท ซีเอ็ดยูเคชั่น จำกัด., กรุงเทพฯ,.

[2] ซีเอสเอส (CSS). (2561). [ออนไลน์]. เข้าถึงได้จาก : https://getbootstrap.com/docs/3.3/css/. (วันที่ค้นข้อมูล : 9 สิงหาคม 2561).

[3] ภาษา HTML. (2561). [ออนไลน์]. เข้าถึงได้จาก : http://www.codingbasic.com/html.html. (วันที่ค้นข้อมูล : 9 สิงหาคม 2561).

"ไม่เริ่มต้นในวันนี้ จะไม่มีทางสำเร็จในวันพรุ่ง" โดย โยฮัน ว็อล์ฟกัง ฟ็อน เกอเทอ

Thaiall.com

Truehits.net

"ยอมรับคุกกี้"
เพื่อให้เว็บไซต์นำเสนอ
ประสบการณ์ที่ดีขึ้นสำหรับคุณ

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

Title
Keywords
Description
Short title
gkey