เอกสารอ้างอิง

เอกสารอ้างอิง

[1]          “เทคโนโลยีเว็บ”.  [Online]. Available : http://www.stks.or.th/th/knowledge-bank/30/750.html.  [19 สิงหาคม พ.ศ.2555]

[2]   “จาก web1.0 ก้าวสู่ web 2.0 และ web3.0 (ตอนที่1 ฉันคือ web1.0 )”.  [Online].  Available :  http://guruthip.blogspot.com/2009/08/rss.html.  [19 สิงหาคม พ.ศ.2555]

[3]          “เทคโนโลยีเว็บ”.  [Online].  Available :  http://about-kmrb.blogspot.com/2012/08/blog-post_6420.html[20 สิงหาคม พ.ศ.2555]

[4]          “ลักษณะของ web 1.0 web 2.0 web 3.0”.  [Online].  Available :  http://www.kroobannok.com/blog/38859[20 สิงหาคม พ.ศ.2555]

[5]          “Web1.0-Web4.0”.  [Online].  Available :  http://www.learners.in.th/blogs/posts/484004

                [20 สิงหาคม พ.ศ.2555]

[6]          “LinkedIn คืออะไร?”.  [Online].  Available : http://www.socialmer.com/2011/11/10/what-is-linkedin/. [21 สิงหาคม พ.ศ.2555]

[7]          “iGoogle คืออะไร?”.  [Online].  Available : http://www.gooab.net/index.php?mo=3&art=440526. [23 สิงหาคม พ.ศ.2555]

[8]          “รู้จักกับ HTML5 - ภาคหนึ่ง HTML5 คืออะไร?”.  [Online].  Available : http://www.blognone.com/news/29947/%E0%B8%A3%E0%B8%B9%E0%B9%89%E0%B8%88%E0%B8%B1%E0%B8%81%E0%B8%81%E0%B8%B1%E0%B8%9A-html5-%E0%B8%A0%E0%B8%B2%E0%B8%84%E0%B8%AB%E0%B8%99%E0%B8%B6 %E0%B9%88%E0%B8%87-html5-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3 . [23 สิงหาคม พ.ศ.2555]

บทสรุป

บทสรุป

web 1.0 ผู้เข้าชมสามารถอ่านได้อย่างเดียว ( Read-only ) เป็นเทคโนโลยีที่สามารถที่ [4]     สามารถ แก้ไขข้อมูล หน้าตาของเว็บไซต์ได้เฉพาะผู้ดูแลเว็บไซต์ ( Webmaster )เป็นเว็บที่ผู้เข้าเยี่ยมชมไม่สามารถมีส่วนร่วมกับเว็บดังกล่าวได้ ถือว่าเป็นเว็บรุ่นแรกของเทคโนโลยีเว็บไซต์ ส่วนมากจะใช้ภาษา html เป็นภาษาสำหรับการพัฒนาweb 2.0 ผู้เข้าชมสามารถอ่านและเขียนได้ ( Read-Write ) เป็นเทคโนโลยีเว็บไซต์ที่พัฒนาต่อจาก web 1.0 เป็นเทคโนโลยีเว็บไซต์ที่สามารถโต้ตอบกับผู้ใช้งานได้ เช่น เว็บบอร์ด เว็บบล็อก วิพีเดีย เป็นต้น ซึ่งจะใช้ฐานข้อมูลมาเกี่ยวข้อกับเทคโนโลยีนี้ด้วย web 3.0 ผู้ชมสามารถอ่าน เขียน จัดการ ( Read-Write-Execute ) คือจากที่ผู้เข้าไปใช้อ่าน และเพิ่มข้อมูล ผู้ใช้ก็สามารถปรับแต่งข้อมูลหรือระบบได้เองอย่างอิสระมากขึ้น สำหรับเมืองไทยนั้นจะนำเข้ามาใช้ในอนาคต เทคโนโลยีบางอย่างที่คาดว่าจะถูกนำมาใช้ใน web 3.0 ได้แก่ Artificial Intelligent (AI) เรียกว่า ปัญญาประดิษฐ์ หรือสมองกล,Semantic Web and SOA (Service-oriented architecture)เป็นเรื่องของการแลกเปลี่ยนข้อมูลที่ต่างระบบกัน, 3D หรือ Web3D Consortium เป็นเว็บรูปแบบ 3 มิติ, Composite Applications เป็นการผสมบริการระหว่างกัน เช่น การดึงบริการจากเว็บรูปแบบหนึ่งมาใช้งานในเว็บไซต์รูปแบบอื่นๆ ได้ด้วยเสมือนเป็นเว็บไซต์เดียวกัน, Scalable Vector Graphic (SVG) เป็นเทคโนโลยีที่เมื่อเราจะย่อหรือขยายรูปภาพก็ไม่แตกเป็นเม็ดๆ,Semantic Wiki เป็นการแสดงข้อมูลของภาพที่เรากำลังอ่านอยู่, Metadata ( Data about Data)เป็นการอธิบายข้อมูลด้วยข้อมูลในเชิงสัมพันธ์กัน [4]

จากที่กล่าวมาเทคโนโลยีเว็บก็คือ การนำเสนอข้อมูลในระบบ [3]                               www (world wild web) โดยใช้วิธี การถ่ายทอดข้อมูลในรูปแบบของ Hyper Text ไปยังโปรโตคอล http (Hyper Text Transport Protocol) ภาษาที่ใช้ในการเผยแพร่เอกสารก็คือ ภาษา html (Hyper Text Markup Language) เทคโนโลยีเว็บเริ่มพัฒนามาครั้งแรกเรียกว่า เว็บ 1.0 ซึ่งเป็นการสื่อสารด้านเดียว ผู้รับสารไม่สามารถตอบโต้ได้ ต่อมาได้พัฒนาเป็น เว็บ 2.0 ซึ่งเป็นเทคโนโลยีเว็บที่ใช้อยู่ในปัจจุบัน โดยสามารถโต้ตอบและแลกเปลี่ยนระหว่างผู้สร้างและผู้ใช้ได้ และในอนาคตจะพัฒนาเป็น เว็บ 3.0 ซึ่งสามารถสร้างความฉลาดเทียมให้กับสิ่งไม่มีชีวิต ใช้เป็นเครื่องมือคาดเดาพฤติกรรม วิเคราะห์ความต้องการของมนุษย์ เมื่อได้ข้อมูลนั้นมา ระบบจะประมวลผลอย่างมีเหตุผล พร้อมทั้งสามารถแก้ไขสถานการณ์เฉพาะหน้าได้อีกด้วย [3] 

แนวโน้มของเทคโนโลยีเว็บในอนาคต

แนวโน้มของเทคโนโลยีเว็บในอนาคต

Web3.0 ยุคแห่งโลกอนาคต

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

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

“Read – Write – Execute” เป็นการคาดการณ์ลักษณะของการแสดงเนื้อหาและการโต้ตอบกันระหว่างเจ้าของ เวบไซต์และผู้เข้าชมเวบไซต์ในยุค Web 3.0 ซึ่งมีลักษณะเป็นการที่ผู้ใช้สามารถอ่าน เขียน และทำการจัดการเนื้อหาและปรับแต่งแก้ไขข้อมูลหรือระบบได้อย่างอิสระ  หรือในอีกลักษณะหนึ่งของ Web 3.0 คือ “Read – Write – Relate” เป็นลักษณะของการเชื่อมโยงข้อมูลเข้าด้วยกันมากขึ้นแทนที่จะเป็นเพียงข้อมูล ที่สามารถอ่านและเขียนได้เท่านั้น ซึ่งจะมีประโยชน์ต่อมาคือเมื่อเราสามารถหาความสัมพันธ์และการเชื่อมโยง ข้อมูลต่างๆได้ ก็จะทำให้เราเข้าใจความหมายของเครือข่ายการเชื่อมโยงต่างๆมากขึ้น

รูปแบบหรือลักษณะโดยทั่วไปของเวบไซต์ในยุค Web 3.0 นั้นมีการกล่าวกันว่าเวบไซต์จะมีการพัฒนาให้กลายเป็น Semantic Web ซึ่งเป็นการสร้างเครือข่ายของข้อมูลขึ้นมาเพื่อความสะดวกในการค้นหาและเข้า ถึงได้อย่างรวดเร็วทำให้มีการเชื่อมโยงความสัมพันธ์กับเแหล่งข้อมูลอื่นๆ ที่มีเนื้อหาสัมพันธ์กันได้อย่างมีประสิทธิภาพ รวมไปถึงการทำให้เวบไซต์มีลักษณะของ Artificial intelligence (AI) ซึ่งทำให้เวบไซต์สามารถตอบสนองผู้ใช้งานได้อย่างชาญฉลาด คอมพิวเตอร์สามารถเข้าใจความต้องการของผู้ใช้มากขึ้น และสามารถแสดงข้อมูลเฉพาะส่วนที่ตรงตามความต้องการของผู้ใช้ได้ซีแมนติกเว็บ (Semantic Web) หรือ เว็บเชิงความหมาย คือ การพัฒนาการของเวิลด์ไวด์เว็บซึ่งเกี่ยวข้องกับข้อมูลและการบริการบนเว็บไซต์ โดยสร้างความเป็นไปได้ที่เว็บไซต์จะสามารถเข้าใจถึงความต้องการของผู้ใช้และเครื่องมือที่ใช้บรรจุลงในสารบัญเว็บไซต์ ซึ่งมีที่มาจากเวิลด์ไวด์เว็บคอนซอร์เทียม เซอร์ ทิม เบอร์เนิร์ส-ลี มีทัศนคติเกี่ยวกับเว็บว่าเป็นแหล่งรวมการแลกเปลี่ยนข้อมูลและความรู้ โดยแก่นแท้ซีแมนติกเว็บจะบรรจุไปด้วยเซ็ตของหลักของการออกแบบ การทำงานร่วมกัน และความหลากหลายของเทคโนโลยี พื้นฐานบางส่วนของซีแมนติกเว็บแสดงให้เห็นถึงความเป็นไปได้ที่จะรองรับกับเทคโนโลยีหรือสามารถนำมาใช้ได้จริงในภายภาคหน้า ส่วนอื่นของซีแมนติกเว็บแสดงถึงลักษณะพิเศษ ซึ่งจะประกอบด้วย Resource Description Framework (RDF) ความหลากหลายของการสับเปลี่ยนของข้อมูล (เช่น RDF/XML, N3, Turtle, N-Triples) และเครื่องหมาย เช่น RDF Schema (RDFS) และ Web Ontology Language (OWL) ซึ่งสิ่งเหล่านี้มุ่งหมายเพื่อเตรียมการถึงส่วนประกอบของการจำกัดความ กำหนดการ และความรู้ที่ได้รับ มนุษย์สามารถใช้เว็บไซต์เพื่อจัดเก็บงาน เช่น การค้นหาคำว่า "ลิง" ในภาษาฟิน การจองหนังสือในห้องสมุด และการค้นหาราคาแผ่นดีวีดีที่ราคาถูกที่สุด อย่างไรก็ตามคอมพิวเตอร์ไม่สามารถทำงานได้สำเร็จลุล่วงในงานเดียวกันได้หากปราศจากการควบคุมของมนุษย์ เพราะเว็บเพจได้ถูกออกแบบให้มนุษย์ใช้สำหรับอ่าน ไม่ใช่เครื่องจักรกล ซีแมนติกเว็บคือทัศนคติของข้อมูลที่คอมพิวเตอร์สามารถเข้าใจได้ ดังนั้นเราจึงแสดงถึงความยุ่งยากของงานซึ่งนำไปสู่การค้นหา การแบ่งปัน และการแบ่งส่วนของข้อมูลบนเว็บ  อย่างไรก็ดี ก้าวต่อไปของสื่อใหม่จะเป็นการเชื่อมโยง และผสมผสานดิจิตอลคอนเท็นต์เหล่านั้นเข้าด้วยกันที่เรียกว่า Mash Up อันเป็นพื้นฐานของเว็บ 3.0 ที่หมายถึงเว็บไซต์ที่ได้รับการพัฒนาให้มีความฉลาดรู้ หรือ มี AI สามารถค้นหา และคาดเดาความต้องการของผู้บริโภคแต่ละคนได้ อุปกรณ์ไอที Gadget ต่างๆ ไม่ว่าจะเป็นNotebook/Netbook Smart Phone MID (Mobile Internet Device) Digital Photo frame e-book หรือแม้แต่อุปกรณ์เครื่องใช้ไฟฟ้าภายในบ้าน (Digital home appliance) จะได้รับการพัฒนาให้มีความฉลาดในการทำงานมากขึ้น ทั้งขนาด คุณสมบัติการทำงาน และราคา เช่น วันนี้เรามีวิทยุอินเทอร์เน็ตที่มีขนาดเล็กเท่าน้ำตาลก้อนในราคาไม่กี่ร้อย  นายประสิทธิ์ วรฉัตราวณิช รองผู้จัดการทั่วไป บริษัทเอ.อาร์.อินฟอร์เมชัน แอนด์ พับลิเคชัน จำกัด กล่าวถึงแนวโน้มของเว็บไซต์ในปี 2552 ว่า มีการพูดถึงเว็บ 3.0 แต่ขณะนี้ยังไม่มีการให้คำจำกัดความว่าเว็บ 3.0 คืออะไร เนื่องจากหากพูดถึงเรื่องเทคโนโลยีมากเกินไป จะเหมือนกับสมัยที่มีการพูดถึงเทคโนโลยีเกี่ยวกับโทรศัพท์มือถือว่านอกจากจะ ใช้พูดแล้วยังสามารถใช้ทำอะไรได้อีกบ้าง จะมีตั้งแต่การส่งข้อมูล ส่งเอ็มเอ็มเอส และอื่นๆอีกมากมาย โดยในช่วงแรกผู้บริโภคยังไม่นิยมใช้บริการอื่นๆของโทรศัทพ์มือถือเนื่องจาก ผู้บริโภคเห็นว่าเป็นเรื่องที่ยุ่งยาก แต่พอมีการพูดว่าโทรศัพท์มือถือให้บริการอยู่ 2 อย่างคือ ให้บริการเสียง คือการสื่อสารกันโดยการพูดคุย และบริการที่ไม่ใช่เสียง โดยบริการที่ไม่ใช่เสียงนั้นจะเป็นสิ่งที่สื่อสารกันโดยไม่ใช้คำพูดผ่านทาง โทรศัพท์มือถือ มีทั้งการส่งข้อความ หรือรูปภาพ โดยเรื่องดังกล่าวแสดงให้เห็นว่าหากใช้คำจำกัดความที่ง่ายก็จะทำให้ เทคโนโลยีไปได้เร็วขึ้น  “เทคโนโลยีเว็บ 3.0 ที่พูดมาก่อนหน้านี้ว่าหลังจากไอแจ๊คแล้วยังมีอะไรอีก โดยสิ่งที่มองเว็บ 3.0 ในขณะนี้คือเว็บเซอร์วิส ชนิดหนึ่ง ซึ่งแต่เดิมเว็บจะเป็นเพียงข้อมูลให้คนดูในยุคแรก พอยุคต่อมาเริ่มมี 2 ทาง คนดูเริ่มเป็นผู้สร้างเนื้อหาได้ แล้วการค้นหาข้อมูลผ่านเว็บก็เกิดขึ้น หรือที่เรียกว่าเซิร์สเอ็นจิ้น หรือการจับคู่ ต่อมาผู้ใช้เริ่มมีการให้ข้อมูลมากขึ้น เริ่มมีคำว่าแท็ก มีคำว่าคอมเม้นท์ มีการให้ความหมายเวลาใส่รูปในฟิกเกอร์ ถือสิ่งดังกล่าวเป็นการสอนให้ข้อมูลมีความหมายมากขึ้น และโลกได้ขยับจากการจับคู่คือเทียบคำมาสู่ความหมายของคำว่ามีนนิ่ง ในโลก 2.0 หากย้อนกลับไปดูข้อมูลมีนนิ่งเริ่มมีมาในช่วงเวลาหนึ่งแล้ว อย่างในเว็บไซต์ซิกเกอร์ หรือ ดิ๊กดอทคอม โดยมีนนิ่ง ที่เห็นได้ทั่วไปคือข่าวที่คนให้ความสนใจมากที่สุด เวลาค้นหาโดยใช้มีนนิ่ง ผู้ค้นจะได้เรื่องที่ตนสนใจมากกว่าในอดีต เช่น การค้นหาข้อมูลในกูเกิลจะมีข้อมูลขึ้นมาให้มากมายแต่สิ่งที่ต้องการมีเพียง ไม่กี่รายการ” รองผจก.ทั่วไป บ.เอ.อาร์.ฯ กล่าว นายประสิทธิ์ กล่าวต่อว่า เว็บ 3.0 จะเป็นเว็บที่คิดเองได้ หรือเว็บที่มี สมอง (เอไอ) มีการช่วยคิดในการค้นหาหรือใช้บริการ เช่น การไปเที่ยวญี่ปุ่น ผู้ใช้บริการสามารถพิมพ์ค้นหาคำว่าไปเที่ยวญี่ปุ่น เว็บจะแสดงออกมาบอกว่าสามารถไปได้อย่างไรบ้าง เที่ยวบินไหน เช่าที่พักได้ที่ไหนบ้าง ถ้าผู้ใช้บริการเพิ่มข้อมูลเข้าไปว่าราคาถูกต่อท้าย เว็บจะเลือกเที่ยวบินที่ถูกที่สุดว่าเป็นเที่ยวบินอะไร ที่ไหน โดยเว็บจะบอกเลยว่าเป้าหมายที่ผู้ใช้บริการต้องการจะต้องทำอะไรบ้าง อย่างไรก็ตาม เว็บ 3.0 ขณะนี้มีเว็บตัวอย่างอยู่บ้าง แต่ยังไม่สมบูรณ์ เนื่องจากเว็บ 3.0 มีเพียงประมาณ 100 เว็บไซต์ และเป็นเว็บไซต์ของต่างประเทศ  “เว็บ 3.0 ที่เป็นของไทยเองยังไม่มี แต่อาจจะมีเป็นงานวิจัยเล็กๆ ที่เป็นการวิจัยเฉพาะกลุ่มไม่ได้เหวี่ยงแห เป็นเซิร์สเอ็นจิ้นที่ทำได้ทุกอย่าง เพราะเราไม่ได้มีฐานข้อมูลมากเหมือนกูเกิล หรืออัลต้าวิสต้า อย่างไรก็ตาม อัลต้าวิสต้า เข้ามาในสนามของเว็บ 3.0 เร็ว เนื่องจากในสนามเซิร์สเอ็นจิ้น อัลต้าวิสต้าไม่สามารถแย่งขึ้นมาเป็น 3 อันดับแรก จากกูเกิล ยาฮู และเอ็มเอสเอ็นได้ เลยทิ้งจากสนามเซิร์ส และลงไปทำเว็บ 3.0 เพราะในอนาคตเว็บ 3.0 จะเป็นเทรนด์ของโลก อีกทั้งเว็บ 3.0 ได้มีการพูดถึงกันมาเป็นปีแล้ว แต่คาดว่าปี 51 จะเริ่มได้เห็นเว็บ 3.0 อย่างเป็นเรื่องเป็นราวแต่ยังไม่ใช่ของคนไทย เชื่อว่ากูเกิลจะเข้ามาในสนามของเว็บ 3.0 ด้วยเช่นกัน ส่วนคำว่าเว็บคิดเองได้ เป็นคำนิยามของผม เพราะมองว่าจาก แมชชิ่ง มีนนิ่ง ก็ต้องมาเป็นติ้งกิ้ง นั่นคือ 3 ยุคของเว็บในความคิดของผม และหากมองในแง่เทคโนโลยี คือ ไอแจ็ค แล้วก็มาเอไอ หรือ Artificial Intelligent ซึ่งจะมีคำว่าซีแมนทริกเว็บ” รองผจก.ทั่วไป บ.เอ.อาร์.ฯ กล่าว นายประสิทธิ์ กล่าวอีกว่า การเข้ามาของเว็บ 3.0 จะช่วยคิด ช่วยตัดสินใจให้ผู้บริโภคมากขึ้น เนื่องจากโลกในยุคปัจจุบันมีความซับซ้อนมากขึ้น เช่น เวลาจะไปเที่ยวแต่ละครั้งต้องค้นหาสนามบินว่าที่ไหนราคาถูก เนื่องจากชีวิตของมนุษย์มีตัวเลือกมาก แต่เวลาเลือกจริงๆ จะเลือกเพียง 3 ตัวเลือกแรกเท่านั้น เหมือนการค้นหาข้อมูลในเว็บที่การค้นหาแต่ละครั้งจะได้ตัวเลือกเยอะ แต่เวลาเลือกจริงผู้บริโภคจะดูเพียง 3 อันดับแรก หรือเพียง 3 หน้าแรกเท่านั้น รองผจก.ทั่วไป บ.เอ.อาร์.ฯ กล่าวด้วยว่า เว็บ 3.0 ไม่ได้จบที่เว็บสามารถคิดเองได้เท่านั้น แต่กำลังพูดถึงการเชื่อมโยงกับเว็บไซต์ของผู้ประกอบการรายอื่นได้ง่ายขึ้น เหมือนขณะนี้ที่กูเกิลสามารถค้นหาด้วยระบบการพูด ที่ระบบจะทำการวิเคราะห์เสียง เป็นการเข้ารหัสหลายรูปแบบ โดยการเข้ารหัสใช้การผิวปากเพื่อต้องการหาชื่อเพลง 1 เพลงนั้นก็สามารถทำได้ และระบบจะนำข้อมูลเพลงมาวิเคราะห์หาแบบอย่าง เพื่อเป็นจุดเริ่มต้นทำให้ระบบคิดได้ และชื่อเพลงที่เป็นไปได้จากการผิวปากก็จะขึ้นมาให้ผู้ใช้บริการเลือก และหากมองในเรื่องของการตลาดก็จะมีเรื่องของผู้ใช้ที่เข้ามามีบทบาทมากขึ้น สื่อก็จะต้องเรียนรู้จากสิ่งที่ผู้บริโภคเป็น แต่จะกลับทางกันจากเดิมสื่อจะเป็นคนคิดว่าเรื่องนี้ดีหรือไม่ที่จะนำมาเล่า ให้ผู้บริโภคฟัง โดยที่เรื่องเหล่านี้เป็นเรื่องที่ต่อจากการโพสต์กระทู้เฉยๆ นี่คือทิศทางของเทคโนโลยีเรื่องเว็บสื่อใหม่ในอนาคต ที่จะทำให้ผู้บริโภคได้รับประโยขน์ในแง่ของความสะดวกในการเข้าถึงที่รวดเร็ว ตรงกับความต้องการมากกว่า สื่ออนาล็อกที่มีข้อจำกัดมากมายอย่างในอดีต และหากเว็บ 3.0 มีการใช้งานจริงใน คงทำให้การดำรงอยู่ในสังคมของผู้บริโภคที่มีแต่ความยุ่งยากซับซ้อนได้ตัดสิน ใจในสิ่งต่างๆได้ง่ายยิ่งขึ้น...ตัวอย่างลักษณะของเวบไซต์ในยุค Web 3.0 เช่น Search Engine Google ที่เมื่อเราทำการสะกดคำที่ต้องการค้นหาผิด Google สามารถรู้ได้ว่าคำที่เราต้องการหาเป็นอะไร และทำการแสดงผลของคำที่เราน่าจะต้องการมาให้

Present เทคโนโลยีเว็บ..HTML5..บทความ..Part5

7)  Performance & Integration

ภาพที่ 24 ภาพไอคอนประกอบหมวด Performance & Integration [8]

หมวดที่เจ็ดเป็นการปรับปรุงประสิทธิภาพการทำงานของเว็บแอพ แบ่งออกเป็น 2 ส่วนใหญ่ๆ

                    (1)  Web Worker

                   อธิบายง่ายๆ Web Worker คือจาวาสคริปต์ที่ทำงานแบบมัลติเธร็ด เพื่อให้สคริปต์สามารถทำงานเบื้องหลังได้หลายๆ งานพร้อมกันการใช้งานเราสามารถสั่งได้ที่ตัวโค้ดจาวาสคริปต์โดยตรง โดยสร้างตัวแปรชนิด worker ขึ้นมาบอกเบราว์เซอร์ว่า โค้ดจาวาสคริปต์ส่วนนี้ ขอให้ทำงานแบบ Web Worker เพื่อประสิทธิภาพที่ดีขึ้น

                    (2)  XMLHttpRequest Level 2

                   ผมถือว่าผู้อ่าน Blognone คงรู้จัก XMLHttpRequest (XHR) ที่เป็นเทคโนโลยีพื้นฐานของ AJAX กันพอสมควรแล้ว อธิบายสั้นๆ สำหรับคนไม่รู้ XHR เป็นวิธีการโหลดข้อมูลเฉพาะบางส่วนของเว็บเพจ (ไม่ใช่ทั้งหน้า) ช่วยให้เราสามารถปรับปรุงข้อมูลบางส่วนของเพจได้ โดยไม่ต้องโหลดใหม่ทั้งหน้า ผลคือเว็บเพจที่อินเตอร์แอคทีฟมากขึ้นนั่นเอง

XMLHttpRequest Level 2 เป็นความพยายามของ W3C ที่จะพัฒนา XMLHttpRequest รุ่นแรกให้มีประสิทธิภาพ-ความสามารถมากขึ้น แบ่งได้ง่ายๆ 3 อย่าง ได้แก่

· การแยกแยะเหตุการณ์ (event) แต่ละชนิดออกจากกัน ช่วยให้โปรแกรมเมอร์ติดตามและควบคุมการส่งข้อมูลได้ง่ายขึ้น

·  รองรับการอัพโหลดไฟล์จากฝั่งไคลเอนต์ (เดิมที่ไม่รองรับการส่งไฟล์) ซึ่งจะใช้ควบคู่กับ File API ในหัวข้อก่อน

·    ส่งข้อมูลแบบข้ามหลายโดเมน ซึ่งรุ่นก่อนเรียกได้เฉพาะโดเมนเดียวกันc

8)  CSS3

ภาพที่ 24 ภาพไอคอนประกอบหมวด CSS3 [8]

                   CSS3 มีความสามารถเพิ่มขึ้นจาก CSS2 ในปัจจุบันมาก เพิ่มฟีเจอร์ของแวดวงสิ่งพิมพ์ที่เกี่ยวข้องกับการจัดหน้า การควบคุมการไหลของข้อความ และฟอนต์เข้ามาอีกมาก แต่ก็ยังมีเรื่องอื่นๆ เช่น 3D, เสียงพูด, แอนิเมชัน ฯลฯ (ดูข่าวเก่าเรื่อง CSS3 Regions ประกอบ)เทคโนโลยีอีกตัวที่เกี่ยวข้องกันคือ Web Open Font Format (WOFF)ที่ช่วยให้เราฝังฟอนต์เข้ามาในเว็บเพจได้ด้วย

Present เทคโนโลยีเว็บ..HTML5..บทความ..Part4

5)  Multimedia

ภาพที่ 22 ภาพไอคอนประกอบหมวด Multimedia [8]

                   เรื่องนี้เราพูดกันมาเยอะมาก และเริ่มใช้งานจริงกันแล้ว คงไม่ต้องลงลึกในบทความตอนนี้ อธิบายแบบสั้นๆ คือเดิมที่ HTML4 ขึ้นไปไม่สามารถแสดงผลเสียง-วิดีโอได้โดยตรง ต้องใช้วิธีฝัง <object> แล้วติดตั้งปลั๊กอินเพื่อช่วยเล่นมัลติมีเดีย ซึ่งทำงานได้ตามนั้นแต่ก็มีปัญหายิบย่อยมากมายตามมาเช่นกันแต่พอเป็น HTML5 ได้กำหนดให้ HTML ต้องเล่นไฟล์เสียงและวิดีโอได้ในตัว จึงเป็นที่มาของแท็กใหม่ <audio> และ <video> ที่หลายคนคงลองใช้กันแล้ว ดังนั้นต่อไปเสียงและวิดีโอจะกลืนเป็นเนื้อเดียวกับเว็บเพจโดยตรง เราสามารถปรับเปลี่ยนการแสดงผลของมันได้เฉกเช่นเดียวกับส่วนอื่นๆ ของเว็บเพจ เช่น ย้ายตำแหน่ง ซ้อนฉากหลัง หาอย่างอื่นมาบัง ฯลฯ อย่างไรก็ตาม เรื่องมัลติมีเดียของ HTML5 กลับมีปัญหาประการใหม่เพิ่มเข้ามา นั่นคือ "สงคราม codec" ระหว่างเบราว์เซอร์สองค่ายใหญ่ ดังที่เราเห็นจากข่าว WebM+Ogg (สนับสนุนโดย Chrome/Firefox/Opera) vs H.264 (สนับสนุนโดย IE/Safari) นั่นเอง

6)  3D, Graphics & Effects

ภาพที่ 23 ภาพไอคอนประกอบหมวด 3D, Graphics & Effects [8]

หมวดที่หกเกี่ยวกับเรื่องกราฟิก แบ่งเป็น 4 ประการย่อย

                                   (1)  SVG (Scalable Vector Graphics)

                   เป็นภาษาตระกูล XML ที่ออกแบบมาสำหรับการวาดกราฟิกแบบเวกเตอร์ (พอเทียบเคียงได้กับ SWF ของ Adobe หรือ XAML ของไมโครซอฟท์) เทคโนโลยีนี้มีมานานพอสมควรแล้ว คงไม่ต้องลงรายละเอียดนะครับ

                   (2)  Canvas

                   แท็ก <canvas> ถือเป็นของใหม่ที่สำคัญใน HTML5 เพราะมันช่วยเปลี่ยนลูกเล่นการแสดงผลของเว็บเพจไปอีกมากเดิมที HTML เป็นการวาดออบเจคต์ (เช่น ข้อความ รูป กล่องข้อความ ฯลฯ) ขึ้นมาเป็นหน้าจอ และสามารถตกแต่งออบเจคต์แต่ละตัวได้ในระดับหนึ่งผ่าน CSS (เช่น ใส่สีพื้น วาดเส้นขอบ ทำมุมโค้ง) แต่ในภาพรวม HTML ยังไม่สามารถแสดงกราฟิกแบบราสเตอร์ (raster) ได้ด้วยตัวมันเอง ต้องทำภาพมาแปะอีกทอดหนึ่งแท็ก canvas ที่ถูกเพิ่มเข้ามาช่วยให้เราสามารถ "วาดภาพ" ลงบนเว็บเพจได้โดยตรง (กำหนด canvas ในเพจ แต่สั่งวาดด้วยจาวาสคริปต์นะครับ) โดยขอบเขตของภาพที่วาดก็จะอยู่ในออบเจคต์ชื่อ canvas นั่นเองสิ่งที่เราสามารถใส่ลงไปในกรอบ canvas ได้แก่

                                           ·   รูปทรงพื้นฐาน สี่เหลี่ยม วงกลม เส้นตรง เส้นโค้ง พาธ (รูปทรงมีไม่เยอะเท่ากับ SVG)

               ·  ไฟล์รูปภาพ จะซ้อนกันกี่ชั้นก็ได้ตามสะดวก

               ·  แอนิเมชัน กำหนดให้วัตถุต่างๆ เคลื่อนไหว

          ·  แปลงสภาพวัตถุ (transformation) จะกำหนดให้หมุน เอียง บิดเบี้ยว ได้เหมือนกัน

        ·  ประกอบ-ซ้อนภาพวัตถุ (composition) เช่น นำสี่เหลี่ยมกับสามเหลี่ยมมา intersect เพื่อสร้างวัตถุแบบใหม่ความต่างที่สำคัญของ SVG กับ canvas คือ

           ·  SVG ได้ผลลัพธ์เป็นเวกเตอร์ ส่วน canvas ได้ผลลัพธ์เป็นราสเตอร์ (ภายในกรอบวัตถุ canvas)

                                            ·  SVG สั่งวาดด้วยแท็กแบบ markup (ซับเซ็ตของ XML) ส่วน canvas สั่งวาดด้วยจาวาสคริปต์

                  (3)  WebGL

โดยทั่วไปแล้ว การวาดภาพ-แสดงผลใน canvas เรามักใช้กับภาพ 2 มิติเป็นหลัก แต่ถ้าต้องการวาดภาพ 3 มิติ เราจะใช้ส่วนขยายของ canvas ที่เรียกว่า WebGL (Web-based Graphics Library) WebGL เป็นไลบรารีกราฟิกที่พัฒนาอยู่บน OpenGL ES 2.0 ซึ่งเป็นไลบรารีกราฟิก 3 มิติมาตรฐานของวงการไอที แต่ดัดแปลงให้เรนเดอร์ภาพออกมาบนออบเจคต์ canvas ภายในเบราว์เซอร์ และสั่งงานได้ผ่านจาวาสคริปต์ ตอนเรนเดอร์ก็ทำผ่าน GPU ตามปกติ (ดูข่าวเก่าหมวด WebGL ประกอบ) ขั้นตอนการวาดภาพ 3 มิติบน WebGL แทบไม่ต่างอะไรกับ canvas ปกติ เพราะเราต้องกำหนดบริเวณที่เป็น canvas ในเว็บเพจขึ้นมาก่อน เพียงแต่ตอนวาดในจาวาสคริปต์ เราจะสร้างออบเจคต์ชนิด WebGL ขึ้นมาแทน canvas ปกติ ส่วนหลักการวาดวัตถุ 3 มิติคงไม่ต่างอะไรกับ OpenGL ครับ ใครเคยเขียนโปรแกรมกับ OpenGL คงใช้ WebGL ได้แทบจะทันทีสถานะตอนนี้ของ WebGL คือเบราว์เซอร์ทุกค่ายสนับสนุนแล้ว ยังเหลือฝั่งไมโครซอฟท์ที่ยังไม่ยอมสนับสนุน (เหตุผลหนึ่งเพราะอยู่บน OpenGL ไม่ใช่ DirectX)ข้อมูลเพิ่มเติม Getting started with WebGL - Mozilla Developer Networko

                     (4)  CSS3 3D

CSS3 นั้นต่างไปจาก CSS2 มาก เพราะมันไม่ใช่มาตรฐานเดี่ยวๆ แต่ประกอบด้วยมาตรฐานย่อยๆ จำนวน "หลายสิบ" ชนิด ซึ่งหนึ่งในนั้นคือ CSS3 3D Transforms ที่สามารถแปลงสภาพวัตถุบนเว็บเพจในแบบต่างๆ เช่น ขยายขนาด หมุนเอียงตามแกน xyzp

Present เทคโนโลยีเว็บ..HTML5..บทความ..Part3

3)  Device Access

ภาพที่ 20  ภาพไอคอนประกอบหมวด Device Access [8]

                   เทคโนโลยีหมวดที่สามจะเน้นความเชื่อมโยงกับฟีเจอร์ของฮาร์ดแวร์ (โดยเฉพาะฮาร์ดแวร์แบบพกพา) เช่น

·  Geolocation API เพื่อขอข้อมูลเชิงพิกัดของอุปกรณ์

·  เข้าถึงไมโครโฟนและกล้องถ่ายภาพของอุปกรณ์

· เข้าถึงข้อมูลภายในตัวอุปกรณ์ เช่น สมุดที่อยู่ หรือข้อมูลการเอียงเครื่อง (tilt orientation)

                   ฟีเจอร์ในกลุ่มนี้จะไม่ได้อยู่ในรูปของแท็ก HTML โดยตรง แต่จะเป็น API ที่ฝั่งเบราว์เซอร์ต้องเตรียมไว้ให้ แล้วเว็บเพจค่อยเรียกใช้ผ่านจาวาสคริปต์อีกทีหนึ่งในการใช้งานจริงๆ เราคงใช้ผ่านเฟรมเวิร์คจาวาสคริปต์ที่เตรียมเรื่องพวกนี้ไว้ให้แล้วมากกว่า เช่น jQuery Mobile, Sencha Touch หรือ SproutCore เป็นต้น

4)  Connectivity

ภาพที่ 21 ภาพไอคอนประกอบหมวด Connectivity [8]

เทคโนโลยีกลุ่มที่สี่เน้นการเชื่อมต่อกับเครือข่ายที่ดีขึ้น มี 2 อย่างที่สำคัญ

(1)  WebSockets

                   WebSockets เป็น API ที่ออกมาเพื่อต่อยอดแนวทางของ AJAX ในอดีต อธิบายง่ายๆ มันคือการ push ข้อมูลจากเซิร์ฟเวอร์มายังไคลเอนต์ (แบบเดียวกับ push mail ที่เรารู้จักกัน)

ในแง่เทคนิค การส่งข้อมูลแบบ HTTP แบบดั้งเดิมจะเปิดการเชื่อมต่อกับเซิร์ฟเวอร์เพื่อส่งข้อมูล แล้วตัดการเชื่อมต่อเมื่อใช้เสร็จ ดังนั้นการขอข้อมูลจากเซิร์ฟเวอร์เป็นระยะจึงทำได้ยาก เพราะต้องดึงข้อมูลจากเซิร์ฟเวอร์ (polling) เป็นระยะ ซึ่งเปลืองโหลดของเซิร์ฟเวอร์ไม่น้อย โดยเฉพาะกรณีที่ต้องเปิดการเชื่อมต่อ HTTP ค้างเอาไว้ (Long polling หรือ COMET) WebSockets เกิดมาเพื่อแก้ปัญหานี้ โดยสร้างการเชื่อมต่อแบบ (เกือบ) ถาวรระหว่างเซิร์ฟเวอร์กับไคลเอนต์ เพื่อให้สองฝั่งส่งข้อมูลกันได้ตลอด ทั้งหมดรันอยู่บนโพรโตคอล TCP อีกชั้นหนึ่ง และไม่ได้วิ่งบนโพรโตคอล HTTP เพื่อประหยัดโหลดของ HTTP ครับ ในการใช้งานเราจะเรียก WebSockets ด้วย   ws://  หรือถ้าต้องการการเชื่อมต่อแบบปลอดภัย  wss://  ข้อดีคือเบากว่า HTTP แต่ข้อเสียคือทั้งสองฝั่ง (โดยเฉพาะเซิร์ฟเวอร์) ต้องรองรับ WebSockets ด้วย จึงอาจจะใช้ไม่ได้ในทุกกรณีปัจจุบัน WebSockets เป็นมาตรฐานที่รับรองโดย IETF และกำลังผ่านกระบวนการเข้าเป็นมาตรฐานของ W3C

(2)  Server-sent Events (SSE)

                   WebSockets เป็นการส่งข้อมูลแบบสองทาง แต่ถ้าเราต้องการส่งข้อมูลทางเดียวจากเซิร์ฟเวอร์มายังไคลเอนต์ (เช่น notification ของ Facebook/Twitter) เราสามารถใช้เทคโนโลยีอีกตัวชื่อ Server-sent Events (SSE) แทนได้  SSE ถูกออกแบบมาเพื่อแก้ปัญหา polling ของ AJAX เช่นเดียวกับ WebSockets หลักการทำงานของ SSE คือเซิร์ฟเวอร์สามารถส่งข้อมูลไปยังไคลเอนต์ได้โดยตรง โดยที่ไคลเอนต์ไม่ต้องร้องขอ (GET Request) ก่อน ความต่างของ SSE กับ WebSockets นอกจากจะเป็นเรื่องการส่งข้อมูลแบบทางเดียว/สองทางแล้ว ยังต่างกันที่ตัวโพรโตคอล เพราะ SSE จะรันอยู่บน HTTP ตามปกติ ทำให้สามารถใช้กับเซิร์ฟเวอร์ในปัจจุบันได้ทันที

 ในการใช้งานจริง เราอาจเลือกได้ระหว่าง

·  การส่งข้อมูลด้วย WebSockets ทั้งสองทาง (บน WebSockets)

· การรับข้อมูลจากเซิร์ฟเวอร์ด้วย SSE แล้วส่งกลับด้วย XMLHttpRequest (บน HTTP)

Present เทคโนโลยีเว็บ..HTML5..บทความ..Part2

1)  Semantics

ภาพที่ 18  ภาพไอคอนประกอบหมวด Semantics [8]

                   เทคโนโลยีกลุ่ม Semantics คือตัว syntax ของภาษา HTML5 ที่แน่นอนว่าเปลี่ยนไปจาก HTML4 ซึ่งมีแท็กใหม่ๆ และคุณสมบัติ (atrribute) ใหม่ๆ เพิ่มขึ้นอีกพอสมควรโดยโครงสร้างของภาษาแล้ว HTML5 ยังเหมือนกับ HTML ที่เราคุ้นเคย แต่เพิ่มแท็กใหม่ ตัดแท็กเก่า และเปลี่ยนวิธีใช้แท็กเก่าบางตัวออกไป รายละเอียดอ่านได้จาก HTML5 differences from HTML4 ของ W3C ยกมาเป็นตัวอย่างพอให้เห็นภาพ

(1)  แท็กใหม่

แท็กกลุ่มนี้จะช่วยบ่งบอกความหมายของวัตถุในเว็บเพจได้ดีขึ้น เช่น จากเดิมเราใช้ <div id="header"> ก็เปลี่ยนมาเป็น <header> ทำให้เบราว์เซอร์สามารถรับทราบความหมายของวัตถุแต่ละชิ้นได้ดีขึ้น

                                ตัวอย่าง

·  section - บ่งบอกเซคชันของเนื้อหา

·  article - กำหนดขอบเขตของตัวเนื้อบทความ

·  aside - กำหนดขอบเขตของเนื้อหาเสริม (ล้อมกรอบ)

·  header - กำหนดขอบเขตของส่วนเริ่มต้นหรือส่วนหัวของเว็บไซต์ (อย่าสับสนกับ <head>)

·  footer - กำหนดขอบเขตของส่วนท้ายของเว็บไซต์ พวกข้อความกำหนดสิทธิ์ต่างๆ

·  nav - บอกว่ามันเป็นส่วนนำทางของเว็บไซต์

·  figure - บอกว่าเป็นภาพหรือวิดีโอประกอบเนื้อหา (ข้างในสามารถซ้อนแท็ก img หรือ video พร้อมคำอธิบายได้อีกชั้น)

                   นอกจากนี้ส่วนของฟิลด์ยังมี attribute ใหม่อีกกลุ่มสำหรับ input type ที่เจาะจงกว่าเดิม เช่น จากเดิมเราใช้ <input type="text" id="email"> ก็เปลี่ยนเป็น <input type="email"> แทน

·  tel - เบอร์โทร

·  search - ช่องค้นหา

·  url

·  email

·  datetime

·  date

·  time

·  color

(2)  แท็กที่ถูกตัดออก

ส่วนใหญ่เป็นแท็กเก่าที่ทำหน้าที่กำหนดฟอร์แมตการแสดงผล ซึ่งย้ายไปใช้ CSS แทนหมดแล้ว นอกจากนี้ยังเอาแท็กที่เกี่ยวกับเฟรมทั้งหมดออกไป เพราะล้าสมัยแล้ว และแท็กที่ไม่ค่อยมีคนใช้อย่าง acronym (ใช้ abbr แทน) หรือ applet (ใช้ object แทน)

·  big

·  center

·  font

·  strike

·  frame

·  frameset

·  noframes

·  acronym

·  object

(3)  แท็กที่ถูกเปลี่ยนวิธีใช้

                   แท็กเก่าแต่เปลี่ยนความหมาย-วิธีใช้งาน

·  i - ไม่ได้หมายถึงการทำตัวเอียง (เพราะอยู่ใน CSS) แต่หมายถึงโทนเสียงของตัวข้อความที่เปลี่ยนแปลง

·  small - หมายถึงข้อความหรือคอมเมนต์ประกอบเนื้อหาหลัก ที่ควรจะแสดงด้วยตัวเล็กกว่าปกติ

·  strong - หมายถึงข้อความสำคัญ ไม่ใช่การเน้นด้วยตัวเข้ม

·  u - เป็นการบ่งชี้ว่าข้อความจุดนี้มีการแสดงผลแบบพิเศษ เช่น จงใจเขียนให้ผิดเพื่อเป็นตัวอย่าง หรือ ชื่อในภาษาจีน เป็นต้น

                นอกจากแท็กหลักที่เปลี่ยนแปลงแล้ว เทคโนโลยีในหมวดนี้ยังรวมไปถึงเทคโนโลยีเว็บหลายๆ ชนิดที่มีอยู่แล้วในปัจจุบัน เช่น RDFa, Microdata, Microformats ที่ช่วยกำหนดความหมายให้กับเนื้อหา เพื่อนำไปประมวลผลต่อได้ง่ายขึ้นครับจะเห็นว่าในภาพรวมแล้ว HTML5 หมวด semantics จะช่วยให้ตัวโครงสร้างของเว็บเพจมีความหมาย (ในเชิงของ semantic web) มากขึ้นรายละเอียดเพิ่มเติมอ่านได้จาก HTML5 Semantics - Smashing Magazine

2)  Offline & Storage

ภาพที่ 19  ภาพไอคอนประกอบหมวด Offline & Storage [8]

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

                  (1)  Web Storage

เทคโนโลยีแรกคือ Web Storage ซึ่งเป็นการเก็บข้อมูลแบบง่ายๆ ในรูป key-value (ภาษาโปรแกรมบางภาษาเรียก dictionary) ซึ่งแยกย่อยได้อีก 2 อย่าง คือ

·  Session storage เก็บข้อมูลเฉพาะเซสชันการท่องเว็บนั้นๆ ปิดแท็บเมื่อไรข้อมูลก็หายไป ใช้ออบเจคต์ชนิด sessionStorage อันนี้ไม่ซับซ้อน

·   Local storage เก็บข้อมูลระยะยาว (persistence) โดยใช้ออบเจคต์ชื่อ localStorage ซึ่งจะซับซ้อนขึ้น เพราะเราสามารถเปิดเว็บเพจเดียวกันใน 2 แท็บหรือมากกว่า ซึ่งมันจะแชร์ข้อมูลก้อนเดียวกันฟีเจอร์ Web Storage จะคล้ายกับ Google Gears เมื่อ 3-4 ปีก่อนหน้านี้ เพียงแต่ Web Storage รวมมากับ HTML5 เลย ไม่ต้องลงปลั๊กอินเพิ่มเองแบบ Gears

                  (2)  ฐานข้อมูล

การเก็บข้อมูลง่ายๆ แบบ key-value อาจไม่เพียงพอต่อความต้องการของนักพัฒนา HTML5 จึงเพิ่มวิธีการเก็บข้อมูลที่ซับซ้อนขึ้นมา ซึ่งก็คือฐานข้อมูลแบบที่เราคุ้นเคยนั่นเอง

ปัญหาของฐานข้อมูลใน HTML5 ก็คือมาตรฐานที่แยกเป็นสองทาง

·  Web SQL Database มันคือการนำ SQL มายัดใส่เบราว์เซอร์ (ส่วนมากนิยม SQLite) ตอนนี้ใช้ได้แค่เบราว์เซอร์ตระกูล WebKit และ Opera แนวทางนี้มีข้อเสียตรงความซับซ้อนของ SQL และเริ่มหมดความนิยมแล้ว (ทั้งที่มาตรฐานยังไม่เสร็จ)

·  IndexedDB แนวทางใหม่ที่สร้างขึ้นในภายหลัง ไม่ใช้ SQL แต่เก็บข้อมูลแบบ key-value เหมือนกับ Web Storage เพียงแต่เพิ่มการทำดัชนี (index) ช่วยให้หาข้อมูลได้รวดเร็วขึ้น และเพิ่มเรื่อง transactions เพื่อความปลอดภัยของข้อมูลมาด้วยBlognone เคยลงเรื่อง Web SQL vs IndexedDB ไปครั้งหนึ่งแล้ว ย้อนอ่านรายละเอียดได้ในตอนเก่าครับ

    (3)  File API

เราพูดถึงการเก็บข้อมูลแบบง่ายๆ และการเก็บลงฐานข้อมูลไปแล้ว ลำดับถัดไปคือการจัดการกับ "ไฟล์" นั่นเอง HTML5 มี API มาให้เราสองตัวคือ FileReader กับ FileWriter หน้าที่ก็ตามชื่อครับปัญหาของ FileReader ที่จะต้องสนใจคือความแตกต่างระหว่างไฟล์ที่อยู่ในเครื่อง กับไฟล์ที่อยู่บนเว็บ ซึ่งกำลังพัฒนากันอยู่ส่วน FileWriter มีข้อกังวลเรื่องความปลอดภัย เพราะต่อจากนี้ไปเว็บเพจจะสามารถเขียนไฟล์ในเครื่องเราได้ มาตรการแก้ไขจุดอ่อนนี้ก็ต้องพัฒนากันต่อไป(ข่าวเก่า W3C เปิดตัว File API, มาตรฐานกลางในการเข้าอ่านไฟล์ในเครื่องลูกข่าย)

     (4)  แคชสำหรับเวลาออฟไลน์ (App Cache)

เมื่อเว็บแอพพลิเคชันไม่ได้ต่อเน็ต ก็ต้องมีวิธีจัดการกับข้อมูลที่เกิดขึ้นระหว่างนั้น ซึ่งเป็นหน้าที่ของ AppCaching API ที่บอกว่าเว็บแอพพลิเคชันจะถูกเก็บไว้บนเครื่องนานแค่ไหน ทำให้เว็บแอพมีลักษณะคล้ายๆ กับแอพที่ติดตั้งแบบปกติมากขึ้น