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

ปรับปรุง : 2558-07-19 (ปรับป้าย)
Web 2.0
เว็บ 1.0
    มีผู้เขียนรวมกลุ่มกันไม่กี่คนสร้างเว็บเพจที่มีเนื้อหาให้ข้อมูลแก่ผู้อ่านจำนวนมาก ทำให้ผู้อ่านได้รับข้อมูลข่าวสารจากเว็บเพจของผู้เขียนโดยตรง เช่น อโดบี้ให้ข้อมูลเรื่องการออกแบบกราฟิก ไมโครซอฟท์ให้ข้อมูลเรื่องวินโดว์ และซีเอ็นเอ็นให้ข้อมูลเรื่องข่าวสารบ้านเมือง
เว็บ 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 (!webdesignfromscratch.com)
- 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
รูปแบบ web 2.0
รูปแบบของเว็บ 2.0 (webdesignfromscratch.com)
1. เรียบง่าย อย่าให้งง (Simplicity) : google.com baidu.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 ที่เคลื่อนไหวสะดุดตา
ตัวอย่าง
ต.ย.ของ hunsa.com มีการใช้ส่วนหัวของแต่ละตอนที่ใหญ่ชัดเจน ใช้สีไล่ระดับ สัญลักษณ์ประกอบข้อความเป็นภาพถ่าย พื้นที่แต่ละส่วนกำหนดไว้ชัดเจน สรุปประเด็นได้เรียบง่ายในหน้าแรกก่อนเข้าไปถึงรายละเอียด
แนะนำเว็บ (Web Guides)
+ http://en.wikipedia.org
+ http://www.w3.org
+ http://www.web2summit.com
+ http://www.paulgraham.com
+ http://www.zdnet.com
+ http://www.wired.com
+ http://www.digital-web.com
+ http://en.wikipedia.org (สมมาตร)
+ http://www.oreillynet.com
+ http://tools.pingdom.com (Load time checker)
เปรียบเทียบยุค 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
นิยามศัพท์ + บล็อก (Blog) คือ เว็บไซต์ประเภทหนึ่งที่ใช้สำหรับบันทึกบทความ คล้ายกับไดอารีของตนเองลงบนเว็บไซต์ ศัพท์เดิมคือ Web Log บางคนอ่านว่า We-Blog หรือ Web Log จนรวมคำเป็น บล็อก หรือ เว็บบล็อก ซึ่งเว็บบล็อกมีเนื้อหาหลายหลายไม่ว่าจะเป็นเรื่อราวทางการเมือง เศรษฐกิจ สังคม วัฒนธรรม กีฬา ภาพยนตร์ ดนตรี ธุรกิจ การศึกษา หรือเรื่องส่วนตัวที่ต้องการเปิดเผยแก่คนทั่วไปได้รับรู้ การสร้างเว็บบล็อกมีซอฟท์แวร์ช่วยในการบริหารจัดการ และมีเท็มเพลตให้เลือกหลากหลาย แล้วมีแนวโน้มจะเติมโตตลอดเวลาตามจำนวนผู้ใช้อินเทอร์เน็ตที่เพิ่มขึ้น [1]p.352
แต่ละรุ่นของ 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 ให้ถูกต้องตามหลัก
ปรับเว็บเพจให้รองรับ Pagespeed ของ google.com
ผลการทดสอบโฮมเพจหน้านี้ ได้คะแนน 91/100 ในส่วนของ Speed แต่ส่วนของ User Experience ได้ 100/100 ด้วย 4 เหตุผลสำคัญ คือ 1) ภาพที่เป็น .gif ไม่ได้ทำการ optimize ให้ขนาดแฟ้มลดลง แก้ไขได้ด้วยการสั่ง Decrease Color Depth 2) ภาพที่เป็น .jpg ไม่ได้ทำการลดขนาด ก็หาโปรแกรมลดความละเอียดลง ในเว็บไซต์ ไม่จำเป็นต้องละเอียดมากก็ได้ 3) เงื่อนไขของ Leverage browser caching ไม่รองรับภาพที่อยู่นอก folder 4) ถ้า include script จากภายนอก เช่น truehits.net หรือ google หรือ facebook ก็ไม่ต้องสนใจปัญหาเหล่านั้น เพราะเราไปทำอะไรที่นั่นไม่ได้

+ Pagespeed insights

+ index_no_include.htm
บริการสร้าง block สำหรับ web 2.0 ที่ผมใช้รุ่น 3.1
Code generator
for
template of web 2.0
Title
Keywords
Description
Short title
gkey
Social Media
COMMENT
It is nothing.
เอกสารอ้างอิง
[1] โอภาส เอี่ยมสิริวงศ์, "วิทยาการคอมพิวเตอร์และเทคโนโลยีสารสนเทศ", บริษัท ซีเอ็ดยูเคชั่น จำกัด., กรุงเทพฯ, 2551.
"Imagination is more important than knowledge" - Albert Einstein
Home
Thaiabc.com
Thainame.net
Lampang.net
Nation University
PHP
MySQL
Visual basic.NET
TabletPC
Linux
Online quiz
Download
Search engine
Web ranking
Add website
Blog : IT & Media
Blog : ACLA
Blog : Education
Facebook.com
Twitter.com
About us
My dream
Site map
Sponsor
http://goo.gl/72BPC