เว็บสองจุดศูนย์ (Web 2.0)

ปรับปรุง : 2561-11-22 (prettify.js)

Web 2.0

Web 1.0 "AlexBrush"

"thchakrapetch"

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

Web 2.0

"WRTishkid2"

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

"thchakrapetch"

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

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

♥ แนะนำ 15 รูปแบบของเว็บ 2.0 #
- Simplicity, Central layout, Fewer columns, Separate top section, Solid areas of screen real-estate, Simple nav, Bold logos, Bigger text, Bold text introductions, Strong colours, Rich surfaces, Gradients, Reflections, Cute icons, Star flashes

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

http://goo.gl/72BPC

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

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

4 Fonts in Web 2.0

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

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

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

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

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

ปัจจุบัน กระแส 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. Truelife.com
แสดงให้เห็นถึง การออกแบบ icons ได้สวยงาม ใช้สีหลากหลาย สะดุดตา

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

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

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

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

weBlog

บล็อก (Blog) คือ เว็บไซต์ประเภทหนึ่งที่ใช้สำหรับบันทึกบทความ คล้ายกับไดอารีของตนเองลงบนเว็บไซต์ ศัพท์เดิมคือ Web Log บางคนอ่านว่า We-Blog หรือ Web Log จนรวมคำเป็น บล็อก หรือ เว็บบล็อก ซึ่งเว็บบล็อกมีเนื้อหาหลายหลายไม่ว่าจะเป็นเรื่อราวทางการเมือง เศรษฐกิจ สังคม วัฒนธรรม กีฬา ภาพยนตร์ ดนตรี ธุรกิจ การศึกษา หรือเรื่องส่วนตัวที่ต้องการเปิดเผยแก่คนทั่วไปได้รับรู้ การสร้างเว็บบล็อกมีซอฟท์แวร์ช่วยในการบริหารจัดการ และมีเท็มเพลตให้เลือกหลากหลาย แล้วมีแนวโน้มจะเติมโตตลอดเวลาตามจำนวนผู้ใช้อินเทอร์เน็ตที่เพิ่มขึ้น [1]p.352
Thaiall-Blog sites : General Content + Blog ACLA + Lampang.net + Edu News + Nation.ac.th [Power by Wordpress]

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

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

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

ถึงยุคของ
responsive

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

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

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

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

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

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

Hiren บน USB

ระบบและกลไก

แต่ละรุ่นของ thaiall.com webpage

เลขรุ่นของแต่ละเว็บเพจ จะอยู่ใน HTML Script บรรทัดที่ 21 เพื่อให้ระบบอ่านไปทำรายการใน http://www.thaiall.com/update1.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 - ทดสอบกับ https://developers.google.com/speed/pagespeed แก้ปัญหา 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

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

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

Speed Rules

rule

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

Usability Rules

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

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

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

เก็บรุ่นนี้ไว้ .. ตอนที่ทดสอบ Pagespeed กับคุณเอก
โดยผลการทดสอบเว็ฐเพจหน้านี้ ได้คะแนน 91/100 ในส่วนของ Speed แต่ส่วนของ User Experience ได้ 73/100 ตอนนั้น ก.ค.58 พบปัญหาสำคัญ 4 ข้อ คือ 1) ภาพที่เป็น .gif ไม่ได้ทำการ optimize ให้ขนาดแฟ้มลดลง แก้ไขได้ด้วยการสั่ง Decrease Color Depth 2) ภาพที่เป็น .jpg ไม่ได้ทำการลดขนาด ก็หาโปรแกรมลดความละเอียดลง ในเว็บไซต์ ไม่จำเป็นต้องละเอียดมากก็ได้ 3) เงื่อนไขของ Leverage browser caching ไม่รองรับภาพที่อยู่นอก folder 4) ถ้า include script จากภายนอก เช่น truehits.net หรือ google หรือ facebook ก็ไม่ต้องสนใจปัญหาเหล่านั้น เพราะเราไปทำอะไรที่นั่นไม่ได้
+ บริการ Pagespeed insights (UE=User Experience SP=Speed)
+ ทดสอบเว็บเพจ web2/index.html ได้ SP77/100 UE90/100 (6.1)
+ ทดสอบเว็บเพจ web2/index60.htm ได้ SP83/100 UE90/100
+ ทดสอบเว็บเพจ web2/index52.htm ได้ SP99/100 UE100/100
+ ทดสอบเว็บเพจ index_no_include.htm 5.0 ได้ SP91/100 UE73/100
+ ทดสอบเว็บเพจ Blank_menu.htm ได้ SP100/100 UE100/100
การกำหนด viewport ได้ออกแบบไว้ตาม code ข้างล่างนี้
สร้างคลาสชื่อ inViewport และ outsideViewport แล้วกำหนดในแต่ละตาราง
ทำให้ตารางที่กำหนด inViewport กว้าง 320 และ outsideViewport กว้าง 768
ตารางใดไม่กำหนดก็จะมีขนาดเต็มจอภาพ คือ 100% โดยอัตโนมัติ
เมื่อขนาด screen เปลี่ยน ก็จะมาดูคุณสมบัติที่กำหนดใน @media only screen
ตัวอย่าง viewport_inout.htm เขียนแบบกำหนด css ในแฟ้มเดียวกัน ไม่ได้แยกออกไปเป็น .css

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

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

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

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

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

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

เรื่อง CSS : Cascading Style Sheets กลายเป็นข้อควรรู้ที่จำเป็นสำหรับนักพัฒนาเว็บไซต์อย่างหลีกเลี่ยงไม่ได้ ปัจจุบัน CSS มีถึงรุ่น 3 แล้ว ในการใช้งานจริงมักสร้าง CSS แบบ External style sheet เพราะแฟ้มอื่นเรียกใช้ได้ ส่วน Internal style sheet ก็จะเรียกใช้ได้เฉพาะในแฟ้มนั้น ส่วน Inline style ก็จะพิมพ์คำว่า style ต่อท้าย tag นั้นไปเลย ซึ่งตัวแปรหลัก 2 แบบที่กำหนดเองใน CSS มี 2 แบบคือ id กับ class

การกำหนด และการเรียกใช้ต่างกันไป ถ้าเป็น id จะขึ้นต้นด้วย # แต่เป็น class จะขึ้นต้นด้วย . ถ้าเรียกใช้ id จะใช้ properties name ว่า id ส่วนเรียกใช้ class จะใช้ properties name ว่า class

สิ่งที่แตกต่างกัน คือ id จะเรียกใช้ครั้งเดียว แต่ class เรียกใช้ได้หลายครั้ง ถ้าวางแผนอย่างใจเย็นก็จะใช้ประโยชน์จาก css ได้อย่างเต็มที่ มีตัวอย่างที่ css_sample.htm และ การทำเมนู Responsive แบบ Top Nav หากจะทดสอบการปรับแต่ง css ทำได้ที่ w3schools.com

style

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

body

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

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

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

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

การใช้ Syntax High Lighter

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

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

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

Type 3: style in line
<div style="width: 320px !important;">
<pre class="brush: js">
Hello world!
</pre>
</div>

Type 4: no toolbar
<div class="syntaxhighlighter" style="width: 320px !important;">
<pre class="brush: js; toolbar: false;">
Hello world!
</pre>
</div>

Type 5: user class
<div class="m_still">
<pre class="brush: js">
Hello world!
</pre>
</div>
http://www.thaiall.com/web2/syntaxhighlighter.htm

การใช้ Prettify.js

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

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

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

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

การใช้ LightBox เครื่องมือ สำหรับการแสดงภาพ Enlarge เป็น Layer ใหม่ ลอยเหนือ Layer Webpage ที่มี Thumbnail หรือ Link ของภาพ แล้วสามารถคลิ๊กเลื่อนไปยังภาพต่อไปแบบ Slide Show ซึ่งเผยแพร่ที่ lokeshdhakar.com และผมใช้งานที่ Handbill กับอีกหลาย Folder

Sample Script
<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.jpg" rel='lightbox[yahoo]'><img src="yahoo.jpg" /></a>
แฟ้ม builder.js และ effect.js ถูกเรียกอัตโนมัติ
/images/closelabel.gif และ /images/loading.gif

ตัวอย่าง lightbox.htm

การใช้ Bootstrap Bootstrap อาจแปลว่า สิ่งที่ช่วยทำให้ง่ายขึ้น หรือ สิ่งที่ทำได้ด้วยตัวเอง
Bootstrap คือ Front-end Framework ที่ช่วยพัฒนาเว็บไซต์ได้เร็วขึ้น ง่ายขึ้น ซึ่ง Bootstrap มีเครื่องมือหลักให้ 4 แบบ คือ แบบที่ 1) Scaffolding หรือ Grid system ช่วยจัด column และ row บน screen เพื่อจัด Layouts แบบที่ 2) Base CSS ช่วยจัด form, table, icons หรือ buttons แบบที่ 3) Components ช่วยจัด Navbar หรือ Pagination หรือ Progress bars หรือ Media object แบบที่ 4) JavaScript ช่วยจัด Dropdown, Tab, Popover, Collapse, Carousel
กรณีใช้ Navbar - เมนูคอมพิวเตอร์ ก็คล้ายกับเมนูอาหาร มีตัวเลือกมากมายให้เลือกสั่ง ต้ม ผัด แกง ทอด ไอศครีม เมนูคอมพิวเตอร์ที่คุ้นตาก็จะมี file, edit, view, help เป็นต้น นักพัฒนา (Developer) จะเลือกเครื่องมือจัดเมนูให้ผู้ใช้ (User) เข้าถึงบริการต่าง ๆ ที่พัฒนาขึ้น ต่อไปเป็นตัวอย่างการทดสอบ menu ทั้ง 6 แบบ ที่ใช้ bootstrap กับ Java script ข้างนอก และเขียนเอง ซึ่งแชร์ source code 6 แบบ ใน blog

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

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

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

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

ตัวอย่างที่ 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>

การใช้ 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

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

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

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

คลิ๊ปวีดีโอ

in craft

in cartoon

Web 1.0 2.0 3.0

Web 3.0 - IoT

Future Internet

Tim Berners-Lee

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

4Shared.com

Box.com

One Drive

พบว่า dropbox.com และ google drive ไม่บริการ embed และใช้ iframe ไม่ได้ แต่ 4shared.com และ box.com และ one drive ให้ embed ผ่าน iframe ได้
# royal_files.htm
# kingsong.htm

ShareThis.com

เอกสารอ้างอิง (Reference) [1] โอภาส เอี่ยมสิริวงศ์, "วิทยาการคอมพิวเตอร์และเทคโนโลยีสารสนเทศ", บริษัท ซีเอ็ดยูเคชั่น จำกัด., กรุงเทพฯ, 2551.
[2] ซีเอสเอส (CSS), (2561). [ออนไลน์]. เข้าถึงได้จาก : https://getbootstrap.com/docs/3.3/css/. (วันที่ค้นข้อมูล : 9 สิงหาคม 2561).
[3] ภาษา HTML. (2561). [ออนไลน์]. เข้าถึงได้จาก : http://www.codingbasic.com/html.html. (วันที่ค้นข้อมูล : 9 สิงหาคม 2561).

"Imagination is more important than knowledge" - Albert Einstein

Title
Keywords
Description
Short title
gkey