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

1. รุ่นของเว็บ: 1.0, 2.0, 3.0

Web 1.0 (อดีต)
เนื้อหาอาจเกิดจากผู้เขียนคนเดียว หรือรวมกลุ่มกันสร้างแหล่งเผยแพร่ (Content owner) ให้ข้อมูล แล้วผู้อ่านจะได้รับข้อมูลข่าวสารจากเจ้าของข้อมูลโดยตรง เช่น อโดบี้ให้ข้อมูลเรื่องกราฟิก ไมโครซอฟท์ให้ข้อมูลเรื่องระบบปฏิบัติการ และซีเอ็นเอ็นให้ข้อมูลเรื่องข่าวสารบ้านเมือง
Web 2.0 (ปัจจุบัน)
เนื้อหามาจากทั่วสารทิศและอาจแตกได้เป็น เนื้อหาขนาดเล็ก (Micro content) ที่กระจายอยู่ตามที่ต่าง ๆ มารวมกันในรูปแบบใหม่ เสมือนเครือข่ายของข้อมูลข่าวสาร
ความหมายของ Web 2.0
เว็บ 2.0 คือ รูปแบบของเว็บไซต์รุ่นที่สอง ที่เน้นการนำเข้าเนื้อหาจากผู้เขียนที่หลากหลาย นำไปแสดงในเว็บไซต์ได้มากมาย เกิดเครือข่ายสังคม มีรูปแบบที่ดูง่ายน่าตื่นตาตื่นใจ
เว็บ 2.0 คือ การเปลี่ยนสภาพของเว็บไซต์ จากแค่ผลรวมของเว็บไซต์หลายแหล่ง มาเป็นโครงสร้างพื้นฐานทางคอมพิวเตอร์ที่ให้บริการซอฟต์แวร์ผ่านเว็บให้กับผู้ใช้ ผู้ที่เห็นด้วยกับแนวคิดนี้คาดว่าบริการต่าง ๆ บนเว็บ 2.0 จะมาแทนที่ซอฟต์แวร์แบบดั้งเดิม
เทมเพจ (Template)
เทมเพจ คือ เว็บเพจต้นแบบที่ถูกออกแบบทั้งโครงสร้าง ภาพ และเนื้อหา มักประกอบด้วยแฟ้มภาพ ตัวอย่างเนื้อหา และรหัสภาษาเอชทีเอ็มแอลที่สามารถนำไปแก้ไขได้ บางครั้งจะมีแฟ้ม .psd ซึ่งมีภาพต้นฉบับให้สามารถแก้ไขได้ด้วยโปรแกรม Photoshop, Imageready หรือ Firework

mobiletest

2. แนะนำ 15 รูปแบบ web 2.0

♥ แนะนำ 15 รูปแบบ web 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

อ่านเรื่องน้อง ป.6 ใน Medium.com
น้อง 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 ที่เก่งกว่าเค้า"

หัวข้อ (Topics)

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

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

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

การสร้างโปสเตอร์ 8 นิ้ว * 18 นิ้ว

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

140px*140px
+ Contrast
+ Sharp
Quality: 25

รูปแบบของเว็บ 2.0 (Web design from Scratch.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) : Gotoknow.org พื้นที่สำหรับผู้สนับสนุน
6. เมนูบาร์ที่ทั้งคิง และควีน (Simple nav) : Adobe มี Top menu และ Submenu
7. โลโก้บึก ๆ (Bold logos) : เบียร์สิงห์ แบรนด์ต้องมาก่อน
8. ที่ใหญ่ก็ให้ใหญ่ (Bigger text) : Wikipedia.org ตรงไหนเน้น ก็จะใหญ่กว่าเพื่อน
9. บทแนะ ส่วนนำต้องใหญ่ (Bold text introductions) : Bbc.com ชวนอ่านก่อนคลิกเปิด
10. สีต้องแข็งโป๊ก (Strong colours) : Zdnet.com สีตัดกันชัดเจน
11. ยกพื้น (Rich surfaces) : Dashboard มีการยกพื้นหลายระดับ
12. ใช้สีไล่ระดับ (Gradients) : Manager.co.th ไล่สีในส่วนของ header
13. สะท้อน (Reflections) : Shadow menu เงาสะท้อน
14. สัญลักษณ์น่ารัก (Cute icons) : Yahoo.com มีรูปแทนความหมายที่ทำให้รู้สึกมีชีวิตชีวา
15. ดาวกระพริบ (Star flashes) : Teenee.com มีหัวใจ กับ new ที่เคลื่อนไหวสะดุดตา
สรุปรูปแบบเว็บ 2.0
มี 6 รูปแบบที่ครอบคลุมการออกแบบเว็บ 2.0
1. การเขียนที่อยู่ภายใต้สัญลักษณ์ (เข้ามาตรฐาน XML)
2. บริการในรูป Web services (การส่งผ่านข้อมูลออกไป)
3. ผสมผสานสร้างเนื้อหาใหม่ (เกี่ยวกับเมื่อไร อะไร ไม่ใช่ใคร หรือทำไม)
4. กำหนดแนวทางในประเด็นที่เกี่ยวข้องได้เร็ว (ผู้อ่านเป็นผู้ควบคุม)
5. เพิ่มเติมข้อมูลได้ตลอดเวลา (ชุมชนสร้างสังคมข่าวสาร)
6. ยกระดับการพัฒนาโปรแกรม (แยกโครงสร้าง และรูปแบบ)

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

เลขรุ่นอยู่ในโค้ดบรรทัดที่ 21 เป็นข้อมูลสร้างรายการปรับปรุง 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, CheckLink, DeadLink, PageSpeed, Keyword Position
- แก้ไข The link is missing a trailing slash, and caused a redirect. Adding the trailing slash would speed up browsing.
รุ่น 8.2
- ปิดปุ่ม Google search ที่มุมบนขวา เพราะผิดหลัก เมื่อส่งตรวจใน Pagespeed (40/80) (index82.htm)
- ใช้ Popover แสดงข้อมูลเว็บเพจ ที่มุมขวาของ menu bar
- ใช้ H1 ในส่วนของ Header และกำหนดขนาดเป็น 12px
- ใช้ material.min.js ร่วมกับ manifest.json เพื่อ Add to Home Screen บน Mobile แล้วแสดงผลในแบบ application โดยเพิ่ม Tag ทั้ง .js และ .json ในบรรทัดที่ 6 ที่ส่วนของ header ตามหลัก /pwa

{
  "name": "Progressive Web Apps",
  "short_name": "pwa",
  "description": "PWA = Progressive Web Apps",
  "start_url": "/pwa/index.html",
  "background_color": "teal",
  "theme_color": "teal",
  "display": "standalone"
}

6. รุ่นของเทมเพจใน Thaiall.com 9.0 - 9.2

รุ่น 9.0 - ปรับ Style, Header และ Footer ใน rsp90.css - ภาพส่วน Header สร้างจากโค้ด SVG : คลิกเพื่อเปิดดูโค้ด - ย้าย .syntaxhighlighter ไปอยู่ใต้ body - ปรับลิงค์แบบ Folder ด้วยการปิด Link ด้วย / - เรียกใช้ Google font จำนวน 12 ฟอนต์ - ภาพควรกำหนด Width และ Height และ Alt - เพิ่ม ให้กับ header และ footer เพราะบางเว็บเพจใช้ frameset - การบันทึกเว็บเพจด้วย Gofullpage เป็น pdf แนะนำให้ zoom 150% เพื่อสัดส่วนที่สวยงาม และ Papersize : A4 Portrait - ทดสอบกับ Page speed ด้วย index90_100.htm Home screen รุ่น 9.1 (เริ่มใช้ 4 ก.ย.2566) rsp91.css - ปรับเพิ่ม header ให้สอดคล้องตามหลัก seo - title ไม่เกิน 60 ตัวอักษร - keywords ไม่เกิน 10 คำ และ description ประมาณ 160 ตัวอักษร - ย้าย h1 ลงมาในเนื้อหาก่อน ad และ คล้าย title ได้ - ปรับ num ไปใช้ function q() รุ่น 9.2 (เริ่มใช้ 8 ต.ค.2567) rsp92.css - เพิ่ม class : not_print ควบคุม footer - เพิ่ม title ให้ a และ alt ให้ img ทั้งหมด และเพิ่ม loading="lazy" ให้ img ตั้งแต่หน้า 2 - พยายามลด font-family ให้เหลือเพียง ChulabhornLikit และ TLWGTypewriter - เพิ่ม padding จาก 2px เป็น 4px จะได้คลิกง่าย - ปรับเปลี่ยนสีพื้น กับสีอักษร เพื่อเพิ่ม contrast - ลบลิงก์ print-friendly เพราะ window.print() ถูก blocked ใน chrome - เพิ่ม webp ใน .htaccess บน >filesMatch ".(webp\|jpg\|jpeg\|png\|gif\|ico\|ttf)$"< - ปรับภาพเป็นสกุล .webp ให้เป็น Quality = 30 และ Compression method = 6 (slow) - ปรับการทดสอบ ใน index90_100.htm / index100.htm / index100.php
♦ 3. Truehits.net	╱
♦ 4. Adsense	╱
♦ 5. JQuery	╱	╱
♦ 6. Bootstrap	╱	╱
♦ 7. Syntaxhighlighter	╱	╱
♦ 8. Lightbox	╱	╱
♦ 9. Popover	╱	╱
♦ 10. PWA:Home screen	╱	╱	╱
♦ 11. Loadtime	╱	╱	╱
♦ 12. Google Fonts	╱	╱	╱

8. คะแนน 100/100 จาก Pagespeed

เพจสปีด (Page Speed) คือ ค่าความเร็วในการดาวน์โหลดเว็บไซต์ หรือการแสดงผลของเว็บเพจ เป็นหัวข้อหนึ่งในการเพิ่มประสิทธิภาพให้เนื้อหาสำหรับเครื่องมือค้นหา (SEO) ที่มีผลโดยตรงต่อการจัดอันดับเว็บไซต์เพื่อแสดงในผลการสืบค้นเว็บเพจ ซึ่งสามารถตรวจสอบค่า Page Speed ได้จากเครื่องมือ Google PageSpeed Insight เพื่อใช้วัดความเร็วของเว็บเพจตามเกณฑ์ต่าง ๆ ซึ่งแบ่งผลการวิเคราะห์ประสิทธิภาพจำแนกตามอุปกรณ์เป็น 2 ประเภท คือ อุปกรณ์เคลื่อนที่ (Mobile) และ เครื่องคอมพิวเตอร์ตั้งโต๊ะ (Desktop)
∎ 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 กับ Apple app store มีการเชื่อมโยงกับเว็บเพจบนเครื่องบริการได้ทันที โดยไม่ต้องปรับแต่งเพิ่มเติม เรียกว่ามีคุณสมบัติ Write once, run anywhere (WORA)
☸ Welcome page : thaiall.com/quiz/index.html (100/100)
☸ Get Started with the PageSpeed Insights API
☸ /weblampang (https M53/D97)
☸ /weblampang (http M69/D98)

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

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

เว็บเพจที่ดี (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
☸ helloworld100.htm (DOM warning เกิน 800 nodes)
☸ helloworld100js.htm (สคริปต์นับ element ได้ 16 elements ใน console)
☸ Report : Lighthouse บน Node.js
☸ Json viewer สำหรับ /node.js/thaiall_report.json
☸ PSI : Blank_menu.htm หรือ github.io บน pagespeed
☸ PSI : helloworld 100,100,100,100 บน thaiall.com
☸ PSI : helloworld 100,100,79,100 บน thaiabc.com
☸ PSI : helloworld 100,100,79,100 บน thainame.net

10. การปรับเว็บเพจให้รองรับ Pagespeed insights เก็บรุ่นนี้ไว้ .. ตอนที่ทดสอบ 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

เรื่อง Leverage browser caching ☸ คือ เว็บเพจที่ใช้ image และ js อยู่ภายใน folder เพื่อให้ควบคุมได้ หากไปเรียก object มาจากภายนอก ก็จะเป็นเนื้อหาที่ควบคุมไม่ได้ อาจมีปัญหาทั้งคุณภาพและปริมาณ
การกำหนด 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;}}

☸ ทดสอบ viewport_inout.htm บน PageSpeed

11. ตรวจลิงค์ด้วย 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 หรือ บางลิงค์ต้องเข้าซ้ำจึงจะเข้าได้ อาจเป็นเพราะเครื่องบริการตอบสนองช้าเกินกำหนด จึงไม่ทันใจก็เป็นได้

☸ Chrome : Broken Link Checker
☸ Chrome : Deadlink Checker
☸ deadlinkchecker ตรวจ webpage
☸ validator.w3.org/checklink
☸ ahrefs.com/broken-link-checker
☸ drlinkcheck.com/
☸ softwaretestinghelp/broken-link-checker

12. ทดสอบกับ WebPageTest.org

บริการของ WebPageTest.org ทำให้ทราบว่า เวลาดาวน์โหลดจากประเทศใด ด้วยบราวเซอร์ใด ให้ 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 : thaiall.com/quiz/index.html (A หมด)
☸ /media - webp

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

14. บริการสร้าง template สำหรับ static webpage [Hidden]

Thaiall Products :: HTML Validity :: CSS Validity :: CheckLink :: DeadLink :: PageSpeed :: Keyword Position :: Google :: Truehits

15. บทความวิจัยในฐาน Scholar เกี่ยวกับ web 2.0 และ truehits ปี 2009

ค้นใน scholar google ด้วยคำว่า "truehits" พบบทความ เรื่อง A STUDY ON THE CURRENT STATUS OF THE UTILIZATION OF WEB 2.0 TECHNOLOGY AMONG POPULAR THAI WEBSITES มีเนื้อหาเกี่ยวกับ web 2.0 ตีพิมพ์ผลการศึกษาในปี ค.ศ.2010 ระบุว่า กลุ่มเว็บไซต์ด้านบันเทิง พัฒนาในรูปแบบ web 2.0 มากที่สุด มี 4.5% รองลงมาคือ กลุ่มการศึกษา มี 4.4% ตามด้วย กลุ่มสุขภาพ และ กลุ่มข่าว มี 2.8% เท่ากัน โดยใช้ข้อมูล 10 กลุ่ม ได้แก่ 1) Education, 2) Entertainment, 3) Travelling, 4) Shopping, 5) Organization, 6) Business, 7) News/Media, 8) Banking and Financing, 9) Computer และ 10) Health โดยผู้วิจัย อาศัยข้อมูลเพื่อใช้ในการวินิจฉัยเว็บไซต์ และจำแนกกลุ่มเว็บไซต์ จาก truehits ใช้เว็บไซต์ 100 อันดับแรกในปี ค.ศ.2009 และจำแนกประเภทของ web 2.0 ออกมาได้ 8 กลุ่ม ได้แก่ 1) Collective Intelligence, 2) Peer-to-Peer Networking, 3) Social Networking, 4) RSS, 5) Podcasts, 6) Wikis, 7) Blogs, และ 8) Mash-ups พบว่า อันดับหนึ่ง คือ Social Networking มีมากถึง 52%

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

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) linux.thai.net และมีตัวอย่างภาพฟอนต์เผยแพร่ที่ linux.thai.net/~thep/ มี 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

ตัวอย่าง 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 (สารบรรณ)

อ้างอิงจาก
☸ f0nt.com/release/13-free-fonts-from-sipa/
☸ wikipedia.org/wiki/National_fonts

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 (ศรีราชา)
– ไม่มีหัว เอียงสวย ลีลา คล้ายเขียน

☸ 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 เป็นประเด็นที่ป้องกันการเรียกใช้ทรัพยากรข้ามเครื่อง
- ทดสอบที่ https://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 ได้
♥

เรียกใช้ 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:120px;">สวัสดี</p>
<p style="font-family:AlexBrush;font-size:120px;">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>

ฟอนต์มหาวิทยาลัยเชียงใหม่ ทุกองค์กรย่อมต้องมี เอกลักษณ์ขององค์กร และ อัตลักษณ์ของบุคคล พบว่า มหาวิทยาลัยเชียงใหม่ ได้เผยแพร่ฟอนต์ของมหาวิทยาลัย เมื่อวันที่ 21 ตุลาคม 2568 ผ่านแฟนเพจของมหาวิทยาลัย ที่สามารถดาวน์โหลดมาใช้งานได้ทั้งบน Application, Desktop และ Website มีรายละเอียดที่ https://cmu.to/CMUFont อ่านรายละเอียดเกี่ยวกับเอกลักษณ์องค์กร (CI) มหาวิทยาลัยเชียงใหม่ ได้ที่ cmu.ac.th/th/cmu/symbol มีตัวอย่าง 44 ตัวอักษร ดังนี้ ก ข ฃ ค ฅ ฆ ง จ ฉ ช ซ ฌ ญ ฎ ฏ ฐ ฑ ฒ ณ ด ต ถ ท ธ น บ ป ผ ฝ พ ฟ ภ ม ย ร ล ว ศ ษ ส ห ฬ อ ฮ หรือ ตัวอย่างข้อความ ดังนี้ เทียบดูนี่ 12 ๑๒

<body>
<style>
@font-face{font-family:'CMURegular'; src: url('rsp_cmu2025.ttf');}
</style>
<span style="font-family:CMURegular;font-size:20px;">สวัสดี</span>
</body>

สัญญาอนุญาตการใช้งานโปรแกรมคอมพิวเตอร์ฟอนต์ CMU
เพื่อให้การใช้งานโปรแกรมคอมพิวเตอร์ฟอนต์เป็นไปอย่างถูกต้องและเหมาะสม เจ้าของลิขสิทธิ์และผู้ใช้งานตกลงและยอมรับเงื่อนไขดังต่อไปนี้ :
1. โปรแกรมคอมพิวเตอร์ฟอนต์ CMU เป็นลิขสิทธิ์ของมหาวิทยาลัยเชียงใหม่ โดยศูนย์สื่อสารองค์กรและนักศึกษาเก่าสัมพันธ์ มหาวิทยาลัยเชียงใหม่
2. ท่านสามารถใช้งานฟอนต์ CMU ได้ทั้งในรูปแบบของการใช้งานส่วนบุคคล หรือการใช้งานเชิงพาณิชย์โดยไม่มีค่าใช้จ่าย
3. ท่านสามารถใช้โปรแกรมคอมพิวเตอร์ฟอนต์ในการผลิตสื่อประชาสัมพันธ์ทุกประเภท อาทิ งาน ออกแบบกราฟิก สื่อสิ่งพิมพ์ สื่ออิเล็กทรอนิกส์ เว็บไซต์ หรือภาพเคลื่อนไหว ทั้งในรูปแบบออนไลน์และออฟไลน์ บนอุปกรณ์และแพลตฟอร์มต่างๆ
4. ท่านสามารถใช้โปรแกรมคอมพิวเตอร์ฟอนต์เป็นส่วนหนึ่งหรือทั้งหมดของโลโก้ แบรนด์ดิ้ง โฆษณา หรือผลิตภัณฑ์เชิงพาณิชย์
5. ท่านสามารถใช้โปรแกรมคอมพิวเตอร์ฟอนต์ได้ไม่จำกัดจำนวนผลงาน ไม่จำกัดจำนวนอุปกรณ์ที่ใช้งาน และไม่จำกัดระยะเวลาในการใช้งาน
6. ท่านสามารถฝังโปรแกรมคอมพิวเตอร์ฟอนต์บางส่วนหรือทั้งหมดลงในโปรแกรม แอปพลิเคชัน เว็บไซต์ เพื่อการแสดงผลหรือเรียกใช้งาน
7. ท่านไม่สามารถที่จะให้เช่า เสนอขาย ขาย โปรแกรม คอมพิวเตอร์ฟอนต์ CMU หรือนำไปแลกเปลี่ยน เพื่อผลประโยชน์อื่นใด
8. ท่านไม่สามารถอ้างสิทธิ์ความเป็นเจ้าของโปรแกรมคอมพิวเตอร์ฟอนต์ชุดนี้ หรืออ้างว่าเป็นของตนได้ และไม่สามารถลบ ทำลาย ทำให้เสียหาย หรือทำให้ไม่ชัดเจนซึ่งเครื่องหมายหรือสัญลักษณ์ของความเป็นเจ้าของลิขสิทธิ์
9. ท่านไม่สามารถดัดแปลง แก้ไขชื่อ เลข รหัส ชุดคำสั่ง คัดลอกบางส่วนหรือทั้งหมด หรือเรียบเรียงเพื่อสร้างโปรแกรมคอมพิวเตอร์ฟอนต์ชุดใหม่
10. ท่านไม่สามารถนำโปรแกรมคอมพิวเตอร์ฟอนต์ไปใช้ในกิจกรรมที่ผิดกฎหมาย ผิดศีลธรรม หรือขัดต่อความสงบเรียบร้อย และท่านจะเป็นผู้รับผิดชอบต่อความเสียหายที่เกิดขึ้นจากการใช้งานฟอนต์ผิดวัตถุประสงค์หรือผิดกฎหมาย
11. เจ้าของลิขสิทธิ์มีสิทธิ์แก้ไข เปลี่ยนแปลง เพิ่มเติม เงื่อนไขการใช้งาน รวมถึงมีสิทธิ์เพิกถอนสิทธิ์การใช้โปรแกรมคอมพิวเตอร์ฟอนต์

☸ CMU-FONT-2025.zip (63.6 MB)

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
☸ ตัวอย่างการใช้งาน syntaxhighlighter แบบ onload

<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;toolbar:false;">
Hello world!
</pre>
Type 2: highlight
<pre class="brush:js; highlight: [1, 2];toolbar:false;">
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>
https://www.thaiall.com/web2/syntaxhighlighter.htm

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]
Bootstrap คือ Front-end Framework ที่ช่วยพัฒนาเว็บไซต์ได้เร็วขึ้น ง่ายขึ้น ซึ่ง Bootstrap มีเครื่องมือหลักให้ 4 แบบ คือ แบบที่ 1) Scaffolding หรือ Grid system ช่วยจัด column และ row บน screen เพื่อจัด Layouts แบบที่ 2) Base CSS [2] ช่วยจัด 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 ที่พัฒนาอย่างต่อเนื่อง และเลือกใช้งานได้หลากหลาย ตามความต้องการของผู้ใช้

โค้ด และผลลัพธ์ : google_ajax_api_line [docx]

ตัวอย่างโค้ด 24 ชาร์ต
♦ Annotation chart
♦ Area chart
♦ Bar chart
♦ Bubble chart
♦ Calendar chart
♦ Candle stick chart
♦ Column chart
♦ Combo chart
♦ Diff chart
♦ Donut chart
♦ Gantt chart
♦ Gauge chart

♦ Geo chart
♦ Histrogram chart
♦ Line chart
♦ Line interval chart
♦ Map chart
♦ Organization chart
♦ Pie chart
♦ Scatter chart
♦ Table chart
♦ Timeline chart
♦ Trendline chart
♦ Wordtree chart

<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);





















ความแตกต่างของ 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:12px; }
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 */








☸
บริหารธุรกิจ

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

☸
วิจัย

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

☸
ระบบปฏิบัติการ

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

☸
ผังงาน

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





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

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


ชวนมองงานมอบหมายในแต่ละวิชา
♦ การพัฒนาเว็บไซต์ด้วยภาษา PHP

♦ สื่อและเทคโนโลยีสารสนเทศ

♦ ระบบปฏิบัติการ

♦ การโปรแกรมภาษาจาวา

♦ ปฏิสัมพันธ์ระหว่างมนุษย์+คอมพิวเตอร์

♦ กฎหมาย และจริยธรรมทางคอมพิเตอร์








เมนูของโฮมเพจ เปรียบเสมือน สารบัญของโฮมเพจ [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 
[Power by Wordpress]

ความต่างของ
id & class
addthis.com
ช่วยแชร์เว็บเพจ
สถิติ Blog rank
ในทรูฮิต
ถึงยุคของ
responsive
ขนาดจอภาพ
ข้อมูลจากทรูฮิต
การเขียนเอกสารอ้างอิง
การเขียน X-Bar
ใน word
เกณฑ์ประเมิน
ความพึงพอใจ
รวมรายชื่องานวิจัย
ด้านการขายออนไลน์
หกสิบคาถาชีวิต
วิกรม กรมดิษฐ์
Hiren บน USB
♥
ระบบและกลไก
♥



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



ครู US เล่าว่ามีระบบตรวจสอบคัดลอก

ยังไม่รองรับภาษาไทย ใช้ใน G Suite

ซึ่ง Admin ต้องสมัครรุ่นทดสอบ




ข้อมูลเบื้องต้นเกี่ยวกับวิชา

ชื่อวิชา และห้องเรียน

นำรหัสชั้นเรียนบอก น.ร. เข้าเรียน




นักเรียนรู้คะแนน

คะแนนงานได้เท่าใด

คะแนนสอบได้เท่าใด




บัญชีบุคคลใน gmail.com 

สามารถเข้าใช้บริการ

สร้างชั้นเรียนและเชิญนักเรียนได้




Chrome มีตัวเลือกช่วยเปลี่ยนแปลภาษา

ต้องเข้าไปตั้งค่าภาษา - ชั้นสูง

"เสนอให้แปลหน้าที่ไม่ใช่ภาษาของเรา"




เราสามารถสร้างชั้นเรียนได้หลายชั้นเรียน

ภาพนี้คลิกปุ่ม + 

เลือกได้ว่าจะเข้าร่วมชั้นเรียน/สร้างชั้น




ภาพประกอบ : การใช้ภาษา R





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


. นักเรียนเปิดแบบทดสอบ

เมื่อเปิดลิงค์จะพบแบบทดสอบ

เช่น TEC101temp https://forms.gle/sSMHQ2VrtsRqGm1P6

ซึ่งปิดรับคำตอบ/ข้อคิดเห็น คนเดิมทำซ้ำไม่ได้

หรือ TEC103 (4 ข้อเฉลย) 
https://forms.gle/UZoqbbVVBP4Y96cG8 

 


. คำตอบ คือ อัพโหลด

แบบทดสอบต้องการให้ส่งแฟ้ม

เลือก อัพโหลดแฟ้มได้

คลิก เพิ่มไฟล์ เพิ่มอีก อัพโหลด

 


. ทำครบทุก section

กรณีข้อสอบแบ่งเป็น Section

หน้าสุดท้ายมีปุ่มให้คลิก "ส่ง"

 


. บันทึกแล้ว

พบว่าข้อสอบไม่ให้ทำอีกครั้ง

และดูคะแนนไม่ได้ ต้อง "ปิดหน้าต่างนี้"

 


. กรณีรับ Link ทางอีเมล

ครูเชิญนักเรียนผ่านทางอีเมล

นักเรียนเปิดอีเมล แล้วคลิก "กรอกข้อมูลฟอร์ม"

 


. ต้องการอีเมล

ต้องลงชื่อเข้าใช้

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

หรือ กรอกให้ต่างจากอีเมลกับที่ลงชื่อไว้ได้

 


. ทำครบทุก section

กรณีข้อสอบแบ่งเป็น Section

หน้าสุดท้ายมีปุ่มให้คลิก "ส่ง"

ถือว่าเสร็จสิ้นภารกิจทำแบบทดสอบ

 



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





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

ใน Form สามารถตั้งได้ว่า "รับการแจ้งเตือนทางอีเมลเมื่อมีคำตอบใหม่"
ในแต่ละ Form สามารถเลือก "ผู้ทำงานร่วมกัน"
เพิ่ม @hotmail.com หรือ @[ organization name ].ac.th ก็ทำให้ผู้ที่ได้รับเชิญ เข้ามาดูการตอบกลับได้
ทำให้การจัดการกล่องรับข้อเสนอแนะ ดำเนินการร่วมกันได้ ไม่ใช่ทำงานคนเดียว ด้วยอีเมลเดียวเท่านั้น
เมื่อเพื่อน @hotmail.com ได้รับจดหมายเชิญเข้าไปทำงานร่วมกันใน "ฟอร์ม" ก็กดปุ่มใน inbox 
ชื่อ "เปิดในฟอร์ม" เมื่อเปิดแล้วก็สามารถแสดงความคิดเห็น เหมือนคนทั่วไป
แต่ถ้าต้องการเข้าแก้ไข หรือดู การตอบกลับ ก็คลิกปุ่ม "REQUEST EDIT ACCESS" ที่อยู่มุมบนขวาได้



การให้เลขลำดับในหัวข้อ "อ่านเพิ่มเติม"



มีอยู่ช่วงหนึ่ง ที่พบปัญหาการออกแบบเว็บเพจ (Webpage Design)
ที่มีเนื้อหาจำแนกออกเป็น block โดยใช้ Html 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


Flipbook

เมื่อ 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 ส่วนสำหรับเนื้อหาใน thaiabc.com ดังนี้

♦ แก้ไข og:image และ og:url ในบรรทัดที่ 3 และ 5 จาก thaiall.com เป็น thaiabc.com

♦ ลบ menu bar และ header ออกทั้งหมดตั้งแต่ใต้ body ไปจนถึง tag กำหนดจุฬาภรณ์ลิขิต

♦ เมนูของ footer ลบออกทั้งหมด ตั้งแต่ใต้นาฬิกาจับเวลา ไปถึง truehits.net

♦ เปลี่ยนค่า tracker ของ truehits.net จาก c0001941 เป็น h0014200 ในส่วนของ footer

☸ Wiki: บัณฑิต กันตะบุตร



การเขียนโค้ดที่ดี (Writing Good Code)




บทความเรื่อง การเขียน code ที่ดีใน 3 แหล่ง 
พบว่าในบล็อก arnondora.in.th
ที่ Arnondora เขียนจากประสบการณ์ เรื่อง How to write a good code พบมีหัวข้อที่น่าสนใจ ดังนี้
1) Cleverness != Good Code
2) Naming ..
3) Comment is also important
4) Write and Re-Write
5) Learn From The Master
6) Good Code is just the “WORD”
∎
แล้วไปค้นดูเพิ่มเติม พบที่ Gnome developer บอกว่า
Some important qualities of good code ประกอบด้วย
1) สะอาด อ่านง่าย (Cleanliness)
2) แน่นอน คงเส้นคงวา (Consistency)
3) ขยับขยายได้ (Extensibility)
4) ถูกต้อง (Correctness)
∎
นอกจากกนี้ ยังพบว่า Makeuseof.com แนะนำไว้ 10 หัวข้อ สำหรับ 
10 tips writing cleaner better code ประกอบด้วย
1) ชื่อที่สื่อความหมายได้ (Use Descriptive Names)
2) ทุกโมดูลทำหน้าที่เฉพาะเพียงอย่างเดียว (Give Each Class/Function One Purpose)
3) ลบโค้ดที่ไม่จำเป็น (Delete Unnecessary Code)
4) อ่านง่ายมาก่อนฉลาด (Readability > Cleverness)
5) รูปแบบที่แน่นอน (Keep a Consistent Coding Style)
6) เลือกสถาปัตยกรรมที่ถูกต้อง (Choose the Right Architecture)
7) สำนวนของภาษาเป็นครู (Master the Language’s Idioms)
8) เรียนจากโค้ดของครู (Study the Code of Masters)
9) เขียนหมายเหตุที่ดี (Write Good Comments)
10) ปรับโค้ดใหม่เสมอ (Refactor, Refactor, Refactor)

☸ ทดสอบ บน pagespeed

Good Code = อ่านและปรับใช้ได้ง่าย

ชวนอ่านเรื่อง "เว็บ-น่ะ-รก"









สามารถกำหนดผ่านค่า DirectoryIndex ในแฟ้ม .htaccess บน Linux Server
เมื่อร้องขอ URL ด้วยชื่อ Directory โดยไม่ได้กำหนดชื่อแฟ้มเป็นการเฉพาะเจาะจง
ดังนั้นมีตัวอย่างการใช้งาน สำหรับการร้องขอการเปิดโฮมเพจ เช่น
thaiall.com/quiz ,
thaiall.com/education ,
thaiall.com/class ,
thaiall.com/php หรือ
thaiall.com/java
จะเรียก indexo.html โดยอัตโนมัติตามค่าที่กำหนดไว้ใน .htaccess
เพื่อเปลี่ยนค่าปริยายที่เป็น index.html ส่งผลให้การแสดงผล URL บน Address bar ไม่แสดงชื่อแฟ้มให้เห็น ว่าแฟ้มที่ถูกเรียกนั้น คือ indexo.html
แต่ถ้าต้องการเรียกแบบกำหนดชื่อแฟ้มก็ยังทำได้เช่นเดิม เช่น 
thaiall.com/quiz/indexo.html หรือ 
thaiall.com/quiz/index.html
ส่วน .htaccess ในห้อง /sudoku กำหนดให้เรียกแฟ้ม index.php เป็นแฟ้มแรก
ทำโดยกำหนดให้ DirectoryIndex index.php

☸ export_to_pdf.htm : ส่งข้อมูลใน webpage ออกไปเป็น PDF

☸ export_to_png.htm: ส่งข้อมูลใน webpage ออกไปเป็น PNG

☸ export_to_png_pdf.htm: ส่งข้อมูลใน webpage ออกไปเป็น PNG และ PDF

ส่งข้อมูลออกเป็น

ตัวอย่างรูปแบบการเขียนรหัสต้นฉบับ - โค้ดภาษา PHP / Perl / Python โค้ดที่ดี (Good code) คือ โค้ดที่อ่านง่ายสามารถนำกลับมาแก้ไขได้อย่างรวดเร็วตามวัตถุประสงค์ที่กำหนด หรือมีความทันสมัยที่นำโค้ดไปพัฒนาต่อยอดได้ง่าย หรือปรับขยายเพิ่มเติมทั้งฟังก์ชัน ข้อมูล และความต้องการใหม่ได้โดยง่าย และมีคำอธิบายโค้ดที่เข้าใจได้เมื่อกลับมาอ่านโค้ดซ้ำในอนาคต ในมุมมองของผู้พัฒนาที่ต้องการใช้โค้ดซ้ำ
☸ goodcode.php

/* PHP Language */
ini_set('display_errors', 'Off');
if ($_SERVER['SERVER_NAME'] == 'www.thaiall.com') session_save_path('/home/thaiall/tmp');
session_start();
/**
 * Script_name: test3.php
 * Source_code: http://www.thainame.net/quiz/test3.php
 * Version: 1.0.0 
 * Date: 2565-12-31
 * Developer: @thaiall
 *
 * Objectives:
 * 1. เพื่อ
 * 
 * Description:
 * - เปลี่ยนจาก mysql แบบเดิม เป็น mysqli
 */
 /* Static Variables */

/* Perl Language */
#!/usr/bin/perl
# Script_name: text.pl

/* Python Language */
"""
Script_name: turtle.py
"""
import datetime # required
from turtle import * 
bgpic("roadmap.png")
color("red", "yellow")
begin_fill()
while True:
    forward(200)
    left(160)
    if abs(pos()) < 1:
        break
end_fill()
date_time = datetime.datetime.now()
print(date_time) # 2023-03-20 23:55:51.463846

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

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

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

MS Word

MS Powerpoint

☘
in craft

☘
in cartoon

☘
Web 1.0 2.0 3.0

☘
Web 3.0 - IoT

☘
Future Internet

☘
Tim Berners-Lee

ถาม - ตอบ

ถาม	Web 2.0 คืออะไร
ตอบ	Web 2.0 คือ ยุคของเว็บไซต์ที่เน้น การโต้ตอบและการมีส่วนร่วมของผู้ใช้ (Interactive & User-generated content) ต่างจากยุค Web 1.0 ที่ผู้ใช้เป็นเพียงผู้รับข้อมูล
ถาม	Web 2.0 แตกต่างจาก Web 1.0 อย่างไร
ตอบ	* Web 1.0: เนื้อหาแบบคงที่ (Static), ผู้ใช้แค่อ่านหรือดูข้อมูล * Web 2.0: เนื้อหาโต้ตอบได้ (Dynamic), ผู้ใช้สามารถสร้าง แก้ไข แสดงความคิดเห็น และแชร์ข้อมูลได้
ถาม	ตัวอย่างเทคโนโลยีหรือแพลตฟอร์ม Web 2.0 มีอะไรบ้าง
ตอบ	เฟซบุ๊ก (Facebook), ยูทูบ (YouTube), วิกิพีเดีย (Wikipedia), ทวิตเตอร์ (Twitter/X), บล็อก (Blog), กูเกิลไดรฟ์ (Google Drive)
ถาม	ลักษณะเด่นของ Web 2.0 คืออะไร
ตอบ	1. ผู้ใช้มีส่วนร่วมสร้างเนื้อหา (User-generated content) 2. ระบบโต้ตอบแบบเรียลไทม์ 3. การเชื่อมโยงและแชร์ข้อมูลข้ามแพลตฟอร์ม 4. ใช้เทคโนโลยี AJAX, RSS, API เพื่อให้ข้อมูลอัปเดตทันที
ถาม	Web 2.0 ส่งผลต่อการใช้ชีวิตอย่างไร
ตอบ	ทำให้การสื่อสารเร็วขึ้น เข้าถึงข้อมูลง่ายขึ้น เปิดโอกาสให้คนทั่วไปผลิตและเผยแพร่ผลงานเองได้ และเพิ่มโอกาสการทำงานออนไลน์ เช่น E-commerce, ครีเอเตอร์คอนเทนต์

ThaiJO : "Web 2.0" สืบค้น 3 กันยายน 2568 [44 รายการ]

ถ้าสนใจ ชื่อเรื่องใด ให้นำชื่อเรื่องไปสืบค้นในแหล่งสืบค้นต่าง ๆ เพื่ออ่านเพิ่มเติมได้
เช่น "สืบค้น การใช้เทคโนโลยีเว็บ 2.0 ของห้องสมุดมหาวิทยาลัยของรัฐ ใน tci-thaijo.org"

An Adaptive Temporal-Concept Drift Model for Sequential Recommendation
Business model for Captioning University Lecture Recordings
Cloud Computing and Big Data in Learning Management System
Education 3.0 for Distance Learning
Enhancing Reading Comprehension by Using the STAD Technique in Seventh Grade Students at a Secondary School
Implementing a Portfolio-based Learner Autonomy Development Model in an EFL Writing Course
Role of Information and Communication Technology in the Provision of Career Information in Higher Technical and Vocational Education Institutions
Use of Web 2.0 to Support Human Capital Creation: A Case of Indigenous Knowledge in Rural of Thailand
WCAG 2.1: Web Accessibility Guidelines for Everyone
Web 2.0: สิทธิในการสื่อสารเพื่อขับเคลื่อนสังคมสารสนเทศ
Wikipedia Writing Assignments: A One-year Pilot Program in Chemistry Classes at Mahidol University
กลศิลป์ในการเล่าเรื่องของนิยายออนไลน์ในสังคมไทย
การจัดการเรียนรู้แบบผสมผสานโดยใช้ปัญหาเป็นหลักร่วมกับการใช้ผังกราฟิกบนเว็บ 2.0 เพื่อพัฒนาความสามารถในการแก้ปัญหาสำหรับนักเรียนชั้นมัธยมศึกษาตอนปลาย
การบูรณาการเทคโนโลยีเว็บ 2.0 เพื่อพัฒนา ความสามารถทางการเขียนภาษาอังกฤษ ของนิสิตมหาวิทยาลัย
การประยุกตใชเครื่องมือทางสังคมกับหองสมุดดิจิทัล (Applying Social Tools to Digital Libraries)
การพัฒนาระบบการจัดการสารสนเทศการประกันคุณภาพการศึกษาระดับหลักสูตร
การพัฒนาระบบควบคุมอัจฉริยะสำหรับโรงเรือนอนุบาลต้นกล้าเมล่อนญี่ปุ่น สายพันธุ์ออเร้นจ์แมน บนแพลตฟอร์มอินเทอร์เน็ตประสานสรรพสิ่ง
การพัฒนาระบบเทคโนโลยีสารสนเทศเพื่อการอนุรักษ์และศึกษาเอกสารตัวเขียน (R1, D1)
การพัฒนารูปแบบเครือข่ายกัลยาณมิตรนิเทศด้วยการใช้เทคโนโลยี เว็บ ๒.๐ โดยการวัดและประเมินตามสภาพจริงเพื่อส่งเสริม สมรรถนะทางวิชาชีพของนักศึกษาฝึกประสบการณ์วิชาชีพครู
การพัฒนาแอปพลิเคชันการเข้าร่วมกิจกรรมของนักศึกษาวิทยาลัยชุมชนด้วยแนวทางการยืนยันแบบดิจิทัล
การศึกษาการใช้สภาพแวดล้อมการเรียนรู้ส่วนบุคคลของนิสิตครุศาสตร์สาขาคอมพิวเตอร์ศึกษา
การศึกษาเชิงเปรียบเทียบข้อความเขียนชมเชยโดยผู้บริโภคตัวจริงในภาษาอังกฤษ: วิเคราะห์สิ่งที่ได้รับคำชม 'ต้มยำกุ้ง' กับสองความหมายเชิงอรรถศาสตร์
การสร้างทุนมนุษย์ความรู้ท้องถิ่นในคนรุ่นใหม่: กรณีศึกษาทุนมนุษย์ความรู้ท้องถิ่น เรื่องผักพื้นบ้าน
การออกแบบและพัฒนาเว็บไซต์ของหน่วยงานประจำจังหวัดปราจีนบุรี
การเปลี่ยนผ่านของการจัดการความรู้
การเพิ่มประสิทธิภาพความสามารถการเข้าถึงข้อมูลบนเว็บ สำหรับผู้พิการทางสายตา
การเสริมต่อศักยภาพทางการเรียนรู้ภาษาอังกฤษเฉพาะกิจผ่านเฟซบุ้ก
การใช้กิจกรรมการพัฒนาทักษะการออกแบบขั้นตอนวิธีทางคอมพิวเตอร์ ด้วยวิธีปัญหาเป็นฐาน โดยใช้เทคโนโลยีเว็บ 2.0 และเทคนิคพี่เลี้ยง
การใช้เทคโนโลยีห้องสมุด 2.0 ในงานบริการสารสนเทศของห้องสมุดและ ศูนย์สารสนเทศทางวิทยาศาสตร์และเทคโนโลยี ในเขตกรุงเทพมหานคร และปริมณฑล
การใช้เทคโนโลยีเว็บ 2.0 ของห้องสมุดมหาวิทยาลัยของรัฐ
การใช้เทคโนโลยีเว็บ 2.0 เพื่อสนับสนุนกระบวนการถ่ายทอดความรู้ให้คนรุ่นใหม่: กรณีการถ่ายทอดความรู้ท้องถิ่นในชนบท
การใช้เทคโนโลยีเว็บ 2.0 ในการจัดการเรียนรู้ตามแนวคิดทฤษฎีโครงสร้างนิยม (Constructivism)
ความคาดหวังของผู้บริหารห้องสมุดมหาวิทยาลัยต่อทักษะของบรรณารักษ์ เรื่องเทคโนโลยีเว็บ 2.0 ที่ใช้สำหรับงานบริการสารสนเทศ
ทัศนคติของนักศึกษาระดับปริญญาตรีต่อการใช้เทคโนโลยี Web 2.0 สำหรับ การเรียนรู้ภาษาในสถาบันเทคโนโลยีไทย-ญี่ปุ่น
บทบาทของงานสื่อสารเชิงกลยุทธ์กับวาทกรรม ด้านสิ่งแวดล้อมในสื่อมวลชน
ประสิทธิผลและความปลอดภัยของการใช้ยา mecobalamin ในการรักษาภาวะปวดปลายประสาทจากการติดเชื้อไวรัสงูสวัด : การทบทวนวรรณกรรมอย่างเป็นระบบและการวิเคราะห์อภิมานของการทดลองแบบสุ่ม
ปัจจัยที่ส่งผลต่อแรงจูงใจในการปฏิบัติงานของเจ้าพนักงานปกครองในจังหวัดนครศรีธรรมราช
ผลการบูรณาการไอซีทีในการจัดการเรียนรู้ด้วยโครงการ เรื่อง การอนุรักษ์พลังงานและสิ่งแวดล้อมต่อผลสัมฤทธิ์ทางการเรียน และสมรรถนะสำคัญของผู้เรียนชั้นมัธยมศึกษาปีที่ 5 โรงเรียนศึกษาสงเคราะห์เชียงใหม่ ปีการศึกษา 2553
พลังกลุ่มไร้สังกัดในสังคมไทย: กรณีศึกษาว่าด้วยการเคลื่อนไหวทางสังคมแนวใหม่แบบไร้องค์กรนำ
พันธกิจนักประพันธ์ในพื้นที่ออนไลน์
ระบบบูรณาการอุปกรณ์ตรวจจับภาพโดยใช้ระบบสารสนเทศภูมิศาสตร์เพื่อการปฏิบัติการทางยุทธวิธี
เทคโนโลยีเว็บสู่ห้องสมุดมหาวิทยาลัย 4.0
เว็บไซต์ยูทูบ (ภาษาไทย) กับการสื่อสารความเกลียดชัง
“ปัญญาสะสม” บนสังคมออนไลน์

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

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

[2] Bootstrap team. (2561). ซีเอสเอส (CSS). สืบค้น 9 สิงหาคม 2561, จาก https://getbootstrap.com/docs/3.3/css/

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

Thaiall.com

Title
Keywords
Description
Short title
gkey
image
url
truehit_page