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



ปรับปรุง : 2558-07-14 (ปรับป้าย)

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 ?

นิยามศัพท์ + บล็อก (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 ให้ถูกต้องตามหลัก

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

Social Media

COMMENT

เอกสารอ้างอิง
[1] โอภาส เอี่ยมสิริวงศ์, "วิทยาการคอมพิวเตอร์และเทคโนโลยีสารสนเทศ", บริษัท ซีเอ็ดยูเคชั่น จำกัด., กรุงเทพฯ, 2551.

"Imagination is more important than knowledge" - Albert Einstein

http://goo.gl/72BPC