--
AchawonWatcharakorn - 23 Feb 2012 - 14:57
Web 2.0
Web 2.0 ถูกนำมากล่าวถึงอย่างจริงจังเป็นครั้งแรกในการประชุม web development ในเดือนตุลาคม พ.ศ. 2547 ซึ่งนำโดย O'Reilly Media และ MediaLive International มีการตีความหมายของ Web 2.0 หลากหลายด้วยกัน ซึ่งสรุปได้ว่า Web 2.0 เป็นระยะที่สองของสถาปัตยกรรม และการพัฒนาเว็บแอปพลิเคชัน หรืออาจกล่าวได้ว่า เป็นยุคที่สองของให้บริการบนอินเทอร์เน็ต หลังจาก Web 1.0 เริ่มเสื่อมความนิยมลง
แอปพลิเคชันที่ประกอบด้วยคุณลักษณะแบบ Web 2.0 มักถูกออกแบบขึ้นจากเทคนิคต่าง ๆ ที่พัฒนาขึ้นในยุค 90 อาทิเช่น public web service APIs Ajax (Asynchronous JavaScript And
XML) และ web syndication (Web feeds เช่น
RSS feeds เป็นต้น) เป็นต้น บางครั้งคำว่า Web 2.0 ก็รวมไปถึงรูปแบบใหม่ ๆที่เกิดขึ้นในบนอินเทอร์เน็ต เช่น blogs, wikis, tags, podcasts เป็นต้น
ตัวอย่างเว็บไซด์และการบริการบนอินเทอร์เน็ตต่าง ๆ ที่เป็นที่รู้จักกันอย่างแพร่หลาย ที่แสดงให้เห็นถึงความแตกต่างระหว่าง Web 1.0 และ Web 2.0 ได้อย่างดี มีดังนี้
| Web 1.0 | Web 2.0 |
| DoubleClick | Google AdSense |
| Ofoto | Flickr |
| Akamai | BitTorrent |
| mp3.com | Napster |
| Britannica Online | Wikipedia |
| personal web sites | blogging |
| page views | cost per click |
| publishing | participation |
| content management system | wikis |
| directories (taxonomy หรือการจัดหมวดหมู่ แบบทั่วไป) | tagging (folksonomy คือ open-ended labeling systemหรือการให้ผู้ใช้อินเทอร์เน็ตสามารถจัดหมวดหมู่เนื้อหาบนเว็บไซด์ เช่น รูปภาพ และลิงค์ต่าง ๆ เป็นต้น ด้วยการตั้งคีย์เวริด์ด้วยตนเอง) |
| stickiness | syndication |
โดยแนวทางของ Web 2.0 สามารถสรุปได้ดังนี้
- เว็บมีหน้าที่เป็น computing platform ที่ให้บริการเว็บแอปพลิเคชัน แก่ผู้ใช้บริการทางอินเทอร์เน็ต
- มีดาต้าเป็นองค์ประกอบสำคัญ
- มีเน็ตเวริค์ที่เกิดจากการเข้ามามีส่วนรวมของผู้ใช้อินเทอร์เน็ต มีการสื่อสารระหว่างผู้ใช้อินเทอร์เน็ตที่เปิดกว้าง
- มีการจัดหมวดหมู่เนื้อหาและการจัดระเบียบภายในเว็บที่มีประสิทธิภาพมากขึ้น และสถาปัตยกรรมบนเว็บมีการพัฒนามากขึ้น
- Web 2.0 เป็นคำที่ใช้ในแง่การตลาด เพื่อแบ่งแยกธุรกิจบนเว็บยุคใหม่ออกจากยุคเริ่มต้น (ยุค 90)
- มีการตอบรับอย่างตื่นตัวต่อนวัตกรรมใหม่ ในแวดวงเว็บแอปพลิเคชัน และบริการทางอินเทอร์เน็ต ซึ่งได้รับแรงผลักดันอย่างมากในช่วงกลางปี 2548
- เปลี่ยนจากเว็บไซด์แบบ static การค้นหาจาก search engines และ การท่องอินเทอร์เน็ตจากเว็บไซด์หนึ่งไปยังอีกเว็บไซด์หนึ่ง กลายเป็นเว็บไซด์แบบ dynamic ที่มีการโต้ตอบและมีการถ่ายทอดข้อมูลระหว่างเว็บไซด์ โดยผู้ใช้ไม่จำเป็นต้องทำการค้นหาด้วยตนเอง
หลายคนสงสัยว่า Web 1.0 มีลักษณะเป็นเช่นใด และเหตุใดจึงมีการกำเนิด Web 2.0 ขึ้น Web 1.0 ในทุกวันนี้ได้รับการนิยามว่า เป็นหน้า HTML แบบหยุดนิ่ง (static) ที่แทบจะไม่ได้รับการอัพเดทข้อมูล และส่วนมากจะถูกสร้างขึ้นจาก HTML ซึ่งแม้แต่ความสำเร็จของอินเทอร์เน็ตในยุคดอทคอม ก็เนื่องมาจากมีการสร้างเว็บไซด์ที่มีลักษณะไม่หยุดนิ่ง (dynamic) มากขึ้น และมีระบบจัดการเนื้อหา (Content management systems) ที่ทำหน้าที่จัดการเนื้อหาจากดาต้าเบส (ซึ่งยุคที่เว็บไซด์เริ่มมีการพัฒนาดังกล่าว อาจถูกเรียกว่า Web 1.5)
แรงผลักดันที่ทำให้ Web 2.0 ถือกำเนิดขึ้น ส่วนหนึ่งมีสาเหตุมาจากการพัฒนาความเร็วของอินเทอร์เน็ต ซึ่งมีผลอย่างมากต่ออัตราการใช้อินเทอร์เน็ตที่เพิ่มมากขึ้น อีกสาเหตุหนึ่งคือผู้ใช้อินเทอร์เน็ตมีวัตถุประสงค์ในการใช้งานที่หลากหลายขึ้น เช่น การค้นหาข้อมูล ทำธุรกิจ และการซื้อสินค้าออนไลน์ เป็นต้น
อิทธิพลของ Web 2.0 ที่มีต่อพฤติกรรมการใช้อินเทอร์เน็ตในปัจจุบัน
Web 2.0 ได้ก่อให้เกิดเครือข่ายชุมชนออนไลน์แบบใหม่ระหว่างผู้ใช้อินเทอร์เน็ตทั่วไป เว็บไซด์บางเว็บไซด์ให้บริการ social software หรือการติดต่อสื่อสารโดยมีคอมพิวเตอร์เป็นสื่อกลางเพื่อสร้างชุมชนออนไลน์ขึ้น ซึ่งเป็นที่รู้จักกันอย่างแพร่หลายในชื่อ blogs และ wikis นอกจากนี้บางเว็บไซด์ได้มีการให้บริการ
RSS feeds เป็นจำนวนมากภายในหน้าเว็บของตน ในขณะที่บางเว็บไซด์ได้สร้างลิงค์ที่ลิงค์ไปยังเว็บไซด์อื่น ๆชนิดเจาะลึกเข้าถึงข้อมูล
ความสามารถในการเชื่อมโยงข้อมูลทางเว็บ การติดต่อสื่อสาร รวมไปถึงการส่งข้อความต่าง ๆ ผ่านทางอินเทอร์เน็ต ที่ Web 2.0 พัฒนาขึ้น ได้ก่อให้เกิดการโยงใยทางสังคมที่แน่นแฟ้นระหว่างผู้ใช้อินเทอร์เน็ต ซึ่งอาจเป็นเรื่องที่เป็นไปไม่ได้ในยุคก่อนหน้านี้
นอกจากนี้ได้มีการใช้ Ajax ในการพัฒนาเว็บไซด์ที่สามารถทำงานคล้ายคลึงแอปพลิเคชันในเครื่องพีซี เช่น word processing spreadsheet และ slide-show presentation เป็นต้น Wysiwyg (What You See Is What You Get) และ wiki เป็นตัวอย่างของเว็บไซด์ประเภทดังกล่าว นอกจากนี้ยังมีเว็บไซด์ที่ช่วยเรื่องการจัดการโครงการ และการประสานงานต่าง ๆ อีกด้วย
เทคนิคที่ใช้ใน Web 2.0
โครงสร้างพื้นฐานของเทคโนโลยี Web 2.0 เป็นโครงสร้างที่ซับซ้อน ซึ่งประกอบด้วย server software content syndication messaging protocols standard-based browsers และ client applications ต่าง ๆ เทคนิคใหม่ ๆ มากมายถูกสร้างขึ้น และหากเว็บไซด์ใช้เทคนิคต่าง ๆ เหล่านี้ จะถูกเรียกได้ว่าเป็นเทคโนโลยี Web 2.0 เทคนิคเหล่านั้นประกอบด้วย
- Rich Internet Application เช่น Ajax
- CSS (Cascading Style Sheets)
- XHTML หรือ Microformat
- User interface languages จำพวก XUL (XML User Interface Language) และ SVG (Scalable Victor Graphics)
- Flash Remoting
- การเชื่อมโยงและการรวมข้อมูลผ่านทาง RSS และ Atom
- URLs ที่เหมาะสมและมีความหมาย
- Weblog หรือ blog
- REST (Representational State Transfer) หรือ XML Webservice APIs
- Social networking หรือการมีเครือข่ายทางสังคมผ่านอินเทอร์เน็ต
Ajax
Ajax (Asynchronous JavaScript And
XML) ถูกแนะนำให้เป็นที่รู้จักอย่างกว้างขวางในเดือนกุมพาพันธ์ พ.ศ. 2548 โดยเจสซี เจมส์ การ์เรต แห่ง Adaptive Path ได้อ้างอิงถึง Ajax ไว้ในบทความหนึ่งบนเว็บ ซึ่งยังสามารถหาอ่านได้จาก
http://www.adaptivepath.com/publications/essays/archives/000385.php โดย Ajax เป็นเทคนิคหนึ่งในการสร้างเว็บแิอปพลิเคชัน ที่แตกต่างจากการสร้างเว็บแอปพลิเคชันโดยทั่วไป โดยในเว็บแิอปพลิเคชันทั่วไป เมื่อติดต่อไปยัง server และได้รับข้อมูลใหม่จาก server เว็บเพจจะต้อง reload ทุกครั้ง ในขณะที่หากใช้ Ajax จะช่วยลดปริมาณการติดต่อระหว่าง server และ client ลงได้ โดย Ajax จะโหลดเฉพาะข้อมูลที่ user ต้องการเท่านั้น
Ajax engine ทำหน้าที่เป็นตัวกลางระหว่าง client และ server ฉะนั้นเมื่อ client มี requestแทนที่จะส่ง HTTP request ไปยัง server โดยตรง client จะส่ง JavaScript call ไปยัง Ajax engine เพื่อโหลดข้อมูลที่ user ต้องการ และหาก Ajax engine ต้องการข้อมูลเพิ่มเติมในการตอบสนองต่อ user Ajax engine จะส่ง request ไปยัง server โดยใช้
XML
การ์เรตได้กล่าวถึงเทคโนโลยีต่าง ๆ ที่เป็นส่วนประกอบของ Ajax ซึ่งได้แก่
- HTML/XHTML เป็นภาษาในการจัดแสดงข้อมูล
- CSS เป็นรูปแบบการจัดแต่ง XHTML
- Document Object Model (DOM) สำหรับ dynamic display and interaction
- XML เป็นรูปแบบการแลกเปลี่ยนดาต้า
- XSLT สำหรับ แปลง XML เป็น XHTML
- XMLHTTPRequest สำหรับ asynchronous data retrieval
- JavaScript เป็นภาษาในการใช้งาน Ajax engine
โดยส่วนประกอบจำเป็นขั้นพื้นฐานที่ขาดไม่ได้ใน Ajax ได้แก่ HTML/XHTML DOM และ JavaScript เพราะ XHTML จำเป็นสำหรับการแสดงข้อมูล ในขณะที่ DOM จำเป็นสำหรับการเปลี่ยนแปลงเฉพาะบางส่วนในหน้า XHTML โดยช่วยให้ไม่ต้องโหลดใหม่ทั้งหน้า และ JavaScript จำเป็นสำหรับการติดต่อกันระหว่าง client และ server และในจัดการ DOM ปัจจุบันมีเว็บไซด์จำนวนมากที่ใช้เทคโนโลยี Ajax ในการปรับปรุงคุณภาพของเว็บไซด์ เพื่อตอบสนองความต้องการของผู้ใช้ได้อย่างมีประสิทธิภาพมากยิ่งขึ้น อาทิเช่น Google Suggest และ A9.com เป็นต้น
RSS 2.0 (Really Simple Syndication) เคยเป็นที่รู้จักในชื่อว่า RDF Site Summary หรือ
RSS 0.9 ซึ่งถูกพัฒนาโดย Netscape Communication แต่ต่อมาภายหลัง Netscape ไม่ได้ให้ความสนใจที่จะพัฒนา
RSS ต่อ จึงได้มีนักพัฒนาอื่น ๆ ที่มีความสนใจและมองเห็นศักยภาพของ
RSS เข้ามาพัฒนาต่อ เริ่มจากนายเดพ ไวเนอร์ จาก Userland Software ได้สร้าง
RSS 0.91 (Rich Site Summary) ขึ้น โดยเป็นลักษณะ Document Type Declarations (DTDs) และต่อมากลุ่มนักพัฒนาที่เรียกตัวเองว่า
RSS-DEV ได้สร้าง
RSS 1.0 โดยใช้หลักการเดียวกันกับ
RSS 0.9 (RDF Site Summary) แต่มีความซับซ้อนมากกว่า
ต่อมานายเดพ ไวเนอร์ได้ประกาศตัวเป็นเจ้าของ
RSS และได้แนะนำ
RSS 2.0 (Really Simple Syndication) ให้เป็นที่รู้จัก และกลายเป็นรูปแบบของ
RSS ที่ใช้กันอย่างแพร่หลายในปัจจุบัน โดย
RSS 2.0 มีลักษณะที่ใกล้เคียงกับ
RSS 0.91 ที่เขาสร้างขึ้น แต่มีการเพิ่มเติมองค์ประกอบบางอย่าง เช่น <author/>
ตัวอย่างโค้ด
RSS 0.91
ตัวอย่างโค้ด
RSS 1.0
ตัวอย่างโค้ด
RSS 2.0
ผู้สนใจสามารถอ่านเพิ่มเติมเกี่ยวกับ
RSS ได้ที่
RSS
Atom
Atom แตกต่างจาก
RSS ตรงที่ Atom มีสเปกที่ชัดเจนและเข้มงวดกว่า ตัวอย่างเช่น
RSS ไม่ได้บอกในสเปกว่านักพัฒนาจะต้องจัดการ HTML markup อย่างไรบ้าง ในขณะที่สเปกของ Atom จะระบุกฏที่นักพัฒนาจะต้องทำตามไว้อย่างชัดเจน นอกจากนั้น Atom ยังอนุญาตให้นักพัฒนาเลือกประเภทของ content เองได้อีกด้วย
ตัวอย่างโค้ด
Atom
นอกเหนือจากเทคนิคข้างต้นแล้ว คุณลักษณะดังต่อไปนี้ก็ถือเป็นคุณสมบัติของ Web 2.0 ด้วยเช่นกัน ซึ่งได้แก่
- ผู้ใช้สามารถใส่ข้อมูลและเรียกใช้ข้อมูลได้อย่างง่ายดาย
- ผู้ใช้สามารถสร้างขุ้อมูลเป็นของตนเอง และเปลี่ยนแปลงข้อมูลเหล่านั้นได้ตามใจชอบ
- ผู้ใช้สามารถใช้แอปพลิเคชันผ่านทางเว็บเบราเซอร์ได้
- การแสดงข้อมูลควรเป็นแบบแปรผัน คือเปลี่ยนแปลงอยู่เสมอ โดยขึ้นอยู่กับคิวรีของผู้ใช้ เช่น คีย์เวริด์ เป็นต้น
เว็บไซด์ที่มีคุณสมบัติของ Web 2.0
Google AdSense
Google AdSense (
https://www.google.com/adsense/) เป็นโปรแกรมโฆษณาที่เจ้าของเว็บไซด์ต่าง ๆ สามารถสร้างรายได้จากการลงโฆษณาจากกูเกิล โดย AdSense จะส่งโฆษณาที่มีความเกี่ยวเนื่องกับเว็บไซด์นั้น ๆ และเป็นที่สนใจของผู้ที่เข้าชมเว็บไซด์ดังกล่าว และถ้าเว็บไซด์สร้างช่องค้นหาของกูเกิลไว้ด้วย AdSense จะส่งโฆษณาที่มีความเกี่ยวเนื่องกับผลการค้นหาของผู้ใช้ไว้ในหน้าแสดงผลการค้นหาอีกด้วย โดยเจ้าของเว็บไซด์ที่ลงโฆษณาจากกูเกิล สามารถตรวจสอบรายได้ที่เกิดจากการลงโฆษณาได้จากหน้ารายงาน
วิธีการลงโฆษณา ทำได้ง่ายดายโดยการก๊อปปี้ HTML code จากกูเกิล มาใส่ไว้ในหน้าเว็บเพจที่ต้องการ โดยกูเกิลจะนำโฆษณามาใส่ในเว็บไซด์ด้วย JavaScript
ตัวอย่าง HTML code
Google Ad
AdSense เป็นวิธีลงโฆษณาทางเว็บไซด์ที่ได้รับความนิยมมาก เพราะไม่เป็นที่รบกวนผู้ใช้เหมือนแบนเนอร์ และมีความเกี่ยวเนื่องกับเนื้อหาของเว็บไซด์ที่ลงโฆษณานั้น ๆ อีกด้วย
Flickr
Flickr (
http://www.flickr.com/) เปิดให้บริการตั้งแต่ปี พ.ศ. 2547 เพื่ิอเป็นเว็บไซด์ digital photo sharing ที่ผู้ใช้สามารถโหลดรูปภาพ แสดงรูปบนอินเทอร์เน็ต และเป็นที่เก็บรูปภาพสำหรับ blogger นอกจากนี้ Flickr ยังมี community tool ที่ช่วยให้ผู้ใช้สามารถ tag รูปภาพได้ โดยการตั้งคีย์เวริด์ให้กับรูปภาพ ซึ่ง tagจัดได้ว่าเป็นรูปแบบหนึ่งของ metadata ผู้ใช้สามารถค้นหารูปภาพได้สะดวกและรวดเร็วขึ้น โดยเฉพาะอย่างยิ่งการค้นหาจาก tag หรือคีย์เวริด์ที่เป็นที่นิยมมาก จะืทำให้สามารถค้นหารูปภาพได้เร็วยิ่งขึ้นไปอีก และเทคนิค tagging นี้เอง ที่ทำให้ Flickr ได้รับการกล่าวถึงว่าเป็นตัวอย่างชิ้นเอก ในการใช้ folksonomy ได้อย่างมีประสิทธิภาพ
นอกจากนี้ Flickr ยังจัดได้ว่าเป็นเว็บไซด์อันดับต้น ๆ ที่นำเทคนิค tag cloud มาใช้ ซึ่งโดยส่วนใหญ่จะืำทำโดยการเน้นคีย์เวริด์ที่ได้รับความนิยมมาก ด้วยฟอนท์ที่ใหญ่กว่าคย์เวริด์อื่น ๆ
เทคนิคที่ Flickr ใช้ ประกอบด้วย
RSS feedsและ Atom feeds รวมไปถึง API ที่ช่วยให้โปรแกรมเมอร์สามารถขยายบริการออกไปได้อีก และใช้ Ajax สำหรับ text-editing และ tagging interface
Google Suggest
กูเกิลซักเจสต์ (
http://www.google.com/webhp?complete=1&hl=en) มีดีไซน์ที่เหมือนกับกูเกิลปกติ แต่มีข้อแตกต่างตรงที่ ในกูเกิลซักเจสต์ เมื่อ user พิมพ์คำลงในช่องค้นหา กูเกิลซักเจสต์จะขอคำแนะนำจาก server และจะแสดงรายการคำที่แนะนำเป็นดร็อบดาวน์
ซึ่งการรับส่งข้อมูลระหว่าง client กับ server ในกูเกิลซักเจสต์ ถือว่าทำได้อย่างมีประสิทธิภาพมาก โดยรายการคำแนะนำจะถูกเปลี่ยนอย่างรวดเร็วขณะที่ user พิมพ์คำที่ต้องการค้นหา กูเกิลซักเจสต์ใช้ XMLHttp และ JavaScript array แทนการใช้
XML ในการรับส่งดาต้า ซึ่งถึงแม้ว่ากูเกิลซักเจสต์จะยังอยู่ในขั้นตอนการทดลองใช้ แต่เป็นที่คาดหมายว่าน่าจะถูกนำมาใช้เป็นหน้าหลักของกูเกิลในอนาคต
Google Maps
กูเกิลแม็บส์ (
http://maps.google.com) เป็นผลผลิตล่าสุดของกูเกิลที่เกิดจากเทคโนโลยี Ajax เพื่อหลีกเลี่ยงการโหลดหน้าเว็บเพจใหม่ทั้งหน้า
กูเกิลแม็บส์มีความแตกต่างจากแอปพลิเคชันแผนที่โดยทั่วไป โดย user สามารถลากแผนที่ไปในทิศทางที่ต้องการได้ ซึ่งถ้ามองในแง่ของการเขียนโค้ด JavaScript อาจจะไม่ใช่เรื่องใหม่นักสำหรับนักพัฒนา แต่ที่น่าสนใจคือเทคนิคการทำ tiling แผนที่และความสามารถในการ scroll แผนที่ได้อย่างไม่สิ้นสุด โดยแผนที่ได้ถูกตัดแบ่งเป็นชุด ๆ และถูกนำมา tile รวมกันเพื่อให้กลายเป็นรูปที่ต่อเนื่องกัน
มีการติดต่อระหว่าง client กับ server ผ่านทาง hidden iframe โดยข้อมูลจะถูกส่งคืนมาในรูปของ
XML และจะถูกส่งไปยัง Ajax engine ซึ่งถือได้ว่ากูเกิลแม็บส์เป็นแอปพลิเคชันที่ใช้ Ajax ที่ค่อนข้างมีความซับซ้อนและน่าศึกษาเป็นอย่างยิ่ง
A9
A9 (
http://www.a9.com) ถูกสร้างขึ้นโดย Amazon.com ให้เป็นเว็บค้นหา ซึ่งมีจุดเด่นตรงความ สามารถในการค้นหาข้อมูลต่างประเภทในเวลาเดียวกัน โดยผลของการค้นหาจะถูกดึงมาจากแหล่งต่าง ๆ ตัวอย่างเช่น ประเภทเว็บและรูปภาพ จะถูกดึงผ่านทาง Google ในขณะที่ผลการค้นหาหนังสือ และภาพยนตร์ จะได้รับข้อมูลมาจาก Amazon.com และ IMDb (Internet Movie Database) เป็นต้น
โดยจุดเด่นของ A9 คือการแสดงผลการค้นหาโดยแบ่งตามประเภทของการสืบค้น เช่น เว็บ รูปและหนังสือ เป็นต้น และเมื่อ user คลิกเลือกประเภทการค้นหาเพิ่มเติม การค้นหาจะถูกทำผ่าน hidden iframe และ XMLHttp หน้าเว็บเพจจะทำการเลื่อนผลที่แสดงอยู่แล้วเพื่อสร้างเนื้อที่สำหรับผลการค้นหาประเภทใหม่ ซึ่งจะถูกโหลดทันทีที่ได้รับข้อมูลจาก server โดยที่หน้าเว็บเพจไม่จำเป็นต้องถูกโหลดใหม่ทั้งหน้า
Yahoo! News
Yahoo! News (
http://news.yahoo.com) ได้ทำการปรับรูปโฉมใหม่ โดยเพิ่มฟังก์ชั่นที่จะแสดงกล่องข้อความสรุปเนื้อหาข่าว (รวมทั้งแสดงรูปภาพสำหรับบางข่าว) เมื่อ user เลื่อนเมาส์ไปวางไว้บนหัวข้อข่าวนั้น ๆ ดูได้จากรูป โดย Yahoo! News เป็นตัวอย่างที่ดีในการนำ Ajax มาเป็นส่วนประกอบในการปรับปรุงเว็บไซด์ แต่ไม่ได้นำมาใช้เป็นเทคโนโลยีหลัก โดยรูปภาพและข้อความสรุปข่าวถูกโหลดมาจาก server ผ่านทาง XMLHttp เมื่อ user ต้องการดู
References
http://www.oreillynet.com
http://www.adaptivepath.com
Zakas, McPeak, Fawcett, "Professional Ajax", Wrox Press, 2006