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

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

Web 2.0

มีภาพว่า เว็บข้อมูลข่าวสารถูกทำให้แตกออกเป็น เนื้อหาขนาดเล็ก (Microcontent) ที่กระจายอยู่ตามที่ต่าง ๆ แล้วเอกสารเว็บแบบใหม่ก็แปรรูปมารวมกัน เสมือนเครือข่ายของข้อมูลข่าวสาร

ความหมายของเว็บสองจุดศูนย์ (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
น้อง 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 ที่เก่งกว่าเค้า"
รูปแบบ 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 Service
+ mobiletest.me
+ responsivepx.com
+ quirktools.com
+ responsivetest.net
+ ipadpeek.com
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 มาแรง เน้นออกแบบให้เรียบง่าย และออกแบบครั้งเดียวใช้ได้กับทุกอุปกรณ์ การออกแบบแล้วต้องทดสอบกับอุปกรณ์ต่าง ๆ แต่ถ้าไม่ต้องการทดสอบกับของจริง โปรแกรมบราวเซอร์ก็ได้จำลองหน้าต่างมาให้ทดสอบเลือกอุปกรณ์ได้โดยง่าย ว่าที่เราออกแบบโฮมเพจไว้นั้น เมื่อใช้กับอุปกรณ์ใด จะพบหน้าตาแบบใด

ตัวอย่าง 1. hunsa.com : scoop ได้ใช้หัวข้อข่าวเป็น large icon 65*65 ที่ใหญ่ชัดเจน ภาพที่ใช้ประกอบประเด็นข่าวเป็นภาพถ่าย สรุปประเด็นให้อย่างง่าย กระชับ สะท้อนรายละเอียด
การออกแบบโฮมเพจ (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

ตัวอย่าง 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
promoteweb2
block นี้ ใช้ 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
Hiren บน USB
การเขียนเอกสารอ้างอิง
การเขียน X-Bar
ใน word
เกณฑ์ประเมิน
ความพึงพอใจ
ระบบและกลไก
รวมรายชื่องานวิจัย
ด้านการขายออนไลน์
หกสิบคาถาชีวิต
วิกรม กรมดิษฐ์
แต่ละรุ่นของ 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 ก็ผ่านด้วยดี

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
เก็บรุ่นนี้ไว้ .. ตอนที่ทดสอบ 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
การกำหนด viewport ได้ออกแบบไว้ตาม code ข้างล่างนี้
.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
เตือนเรื่อง Leverage browser caching #
คือ เว็บเพจคนใช้ image และ js ภายใน folder เพื่อให้ควบคุมได้
ถ้าไปเรียกมาจากข้างนอกก็จะเป็นเนื้อหาที่ควบคุมไม่ได้ทั้งคุณภาพและปริมาณ
ความแตกต่างของ 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
Code generator for template of web 2.0
Title
Keywords
Description
Short title
gkey
การใช้ 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>
<pre class="brush: js">
Hello world!
</pre>
<pre class="brush: js; highlight: [1, 2]">
Hello 
world!
</pre>
ถ้าต้องการบังคับ Width ของ Pre ต้องใช้ Div เข้าไปคลุม ตามตัวอย่างข้างล่างนี้
<div class="syntaxhighlighter" style="width: 720px !important;">
<pre class="brush: js">
Hello world!
</pre>
</div>
การใช้ 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>
การแสดงแผนที่ของ 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.htm
แนะนำเว็บไซต์ (Website guide)
+ Web 3.0 คือ การจัดเก็บและนำเสนอแบบมี Hierarchy
+ 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
เอกสารอ้างอิง (Reference) [1] โอภาส เอี่ยมสิริวงศ์, "วิทยาการคอมพิวเตอร์และเทคโนโลยีสารสนเทศ", บริษัท ซีเอ็ดยูเคชั่น จำกัด., กรุงเทพฯ, 2551.
ShareThis.com

http://goo.gl/72BPC