ปรับปรุง : 2568-07-15 (เพิ่ม scholar)

รูปแบบเว็บเพจต้นแบบ

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

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

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

--blue: #007bff;

--indigo: #6610f2;

--purple: #6f42c1;

--pink: #e83e8c;

--red: #dc3545;

--orange: #fd7e14;

--green: #28a745;

--teal: #008080;

--thistle: #d8bfd8;

--cyan: #17a2b8;

--gray: #6c757d;

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. ยกระดับการพัฒนาโปรแกรม (แยกโครงสร้าง และรูปแบบ)
☘ digital-web.com

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

Web 1.0		Web 2.0
DoubleClick	♦	Google AdSense
Ofoto	♦	Flickr
Akamai	♦	BitTorrent
Personal websites	♦	Blogging
Evite	♦	Upcoming.org (Event DB)
Domain name speculation	♦	Search engine optimization
Page view	♦	Cost per click
Screen scraping	♦	Web services
Publishing	♦	Participation
CMS	♦	Wiki
Directories (taxonomy)	♦	Tagging (folksonomy)
Stickiness	♦	Syndication

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

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
- การบันทึกเว็บเพจด้วย Save as PDF และเพิ่มลิงก์ใน Menu และเข้าระบบ update แนะนำให้ Scale:default เพื่อสัดส่วนเกือบเต็มหน้า A4 / Portrait
- ทดสอบบน Zend2.com หรือ ProxySite.com
- ทดสอบกับ Page speed ด้วย index100.php
- ทดสอบกับ file_pagespeed.php
- ทดสอบการโหลด css , js , content ด้วย file_pagespeed.php : 2 fieldsets + css + js, หัว ท้าย + css + js , ไม่รวม css + js

7. เทมเพจ รุ่น 9.0

องค์ประกอบ	index.html PS=53 เปิดดู	Not lib PS=100 เปิดดู	Not ext PS=96 เปิดดู	JS in file PS=94 เปิดดู
♦ 1. CSS	╱	╱	╱	╱
♦ 2. Histats.com	╱
♦ 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

serprobot.com

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

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>

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

ความแตกต่างของ 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

DirectoryIndex indexo.html index.html

เดิมมีเหตุผลที่ต้องสร้าง indexo.html เป็น Main page ส่วนแฟ้ม index.html ให้เป็น Welcome page แต่ในปัจจุบัน หากต้องการเปลี่ยนให้หน้าแรกของ Directory เป็น indexo.html หรือ แฟ้มแรกที่ถูกเรียกโดยปริยาย (Default Homepage File) สามารถกำหนดผ่านค่า 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

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

ตัวอย่างรูปแบบการเขียนรหัสต้นฉบับ - โค้ดภาษา 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

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