get semantic with HTML 5

Lachlan Hunt รีวิว HTML 5 ให้เราดูกันว่าจะมีอะไรเปลี่ยนแปลงไปในข้อกำหนด HTML รุ่นต่อไปบ้าง พร้อมตัวอย่างและภาพประกอบ (โดย Kevin Cornell) เข้าใจง่าย

เมื่อเทียบกับ HTML 4 (รุ่นปัจจุบัน) แล้ว HTML 5 นอกจากจะมีแท็กใหม่ ๆ ที่รองรับเทคโนโลยีเว็บที่พัฒนาขึ้น เช่นแท็กเกี่ยวกับไฟล์ภาพเคลื่อนไหวและเสียงแล้ว อีกจุดสำคัญของ HTML 5 ก็คือ มันจะมี โครงสร้าง (structure) และ ความหมาย (semantic) ที่ชัดเจนขึ้นด้วย

เมนู ที่ปรากฎอยู่บนจอ ก็จะถูกระบุว่าเป็นเมนู ไม่ใช่แค่ตารางที่วางอยู่ด้านขวาของจอ
ชื่อหนังสือ ที่ปรากฎอยู่บนจอ ก็จะถูกระบุว่าเป็นชื่อหนังสือ ไม่ใช่แค่ข้อความอันหนึ่งที่อยู่หลังคำว่า “ชื่อหนังสือ:”

ปัจจุบันนี้ นักออกแบบ/พัฒนาเว็บส่วนหนึ่ง พยายามที่จะเขียนโค้ดหน้าเว็บที่แยกเอา หน้าตา (presentation) ออกมาจาก เนื้อหา (content) ไม่ให้ปะปนกัน โดยส่วนของหน้าตาจะนำไปใส่ใน Cascading Style Sheets (CSS) ส่วนเนื้อหาก็จะอยู่ในเซตย่อยของ HTML ที่ไม่ใช้แท็กที่เกี่ยวข้องกับหน้าตาเช่น center, b, i (โดยถ้าอยากเน้นข้อความไหน ก็ให้ใช้ strong และ em แทน)

นอกจากการแยกหน้าตากับเนื้อหาออกจากกันแล้ว ก็ยังมีความพยายามที่จะเขียนโค้ด HTML ที่มีโครงสร้างเป็นระบบขึ้น โดยอาศัยแท็กจำพวก h1, div และ li เป็นต้น และพยายามใส่ความหมายเข้าไปในโค้ด โดยอาศัยแอตทริบิวต์จำพวก class, rel และ id โดยกลุ่มนี้จะเรียกรวม ๆ ว่า Semantic HTML โดยมีแนวคิดหลักอย่างน้อยสองแบบคือ POSH และ Microformats ซึ่งทั้งสองอย่างนี้สามารถใช้ร่วมกันได้ โดยอย่างแรกจะเป็นคำแนะนำกว้าง ๆ สำหรับหน้าเว็บทั้งหมด ส่วนอย่างหลังจะเป็นข้อกำหนดที่ชัดเจนสำหรับข้อมูลแต่ละประเภทไปเลย — กล่าวโดยรวมคือ ทั้งหมดนี้เป็นการประยุกต์ใช้ HTML รุ่นปัจจุบันที่มีอยู่ ให้บันทึกความหมายบางอย่างได้

HTML 5 จะช่วยให้รูปแบบการเขียนโค้ดลักษณะ POSH เป็นไปด้วยความสะดวกมากขึ้น เขียนได้ตรง ๆ ขึ้น (ลองดูตัวอย่างจาก A Preview of HTML 5)

ร่างข้อกำหนดของ HTML 5 เริ่มพัฒนามาตั้งแต่ พ.ศ. 2547 และปัจจุบันยังอยู่ในระหว่างการพัฒนาโดยคณะทำงานสองกลุ่มคือ W3C HTML WG และ WHATWG ร่วมมือกัน — โดยคาดว่าจะสามารถประกาศเป็น W3C Recommendation ได้ประมาณปี พ.ศ. 2565 (อีกประมาณ 15 ปี! – ดู FAQ)
อย่างไรก็ตาม ความสามารถของ HTML 5 จะค่อย ๆ ถูกนำไปใช้ในเว็บเบราว์เซอร์และเว็บไซต์ต่าง ๆ ทีละน้อย ๆ ตัวอย่างเช่นเว็บเบราว์เซอร์จำนวนหนึ่งในปัจจุบันก็รองรับแท็ก canvas หรือความสามารถด้าน autodiscovery แล้ว

ถ้าสนใจเรื่อง Semantic HTML (ซึ่งคุณสามารถนำแนวคิดนี้ไปใช้ได้ตั้งแต่ตอนนี้เลย ไม่ต้องมาตรฐานใหม่ ไม่ต้องรอเบราว์เซอร์ใหม่) ลองไปดูที่เว็บไซต์ semantichtml.org หรือค้นเว็บด้วยว่า “semantic html” ดู จะพบเว็บไซต์มากมาย ที่แนะนำและพูดคุยเกี่ยวกับเรื่องนี้

ผลพลอยได้อย่างหนึ่ง ที่น่าจะได้จากการเขียนหน้าเว็บตามแนว Semantic HTML ก็คือ โปรแกรมอ่านหน้าจอ (screen reader) สำหรับผู้พิการทางสายตา น่าจะทำงานได้ดียิ่งขึ้น เพราะมีข้อมูลมาช่วยตัดสินใจมากขึ้นในการอ่าน (คิดง่าย ๆ ว่า Semantic HTML เน้นว่าเนื้อหาหมายความว่าอะไร ไม่ใช่ว่าเนื้อหาจะถูกวาดยังไง การ‘อ่าน’โดยตรงจากเนื้อหาจริง ๆ ย่อมง่ายและถูกต้องกว่าการอ่าน+ตีความจากภาพวาดอยู่แล้ว)

[ ลิงก์ A List Apart | ผ่าน OSNews.com ]

technorati tags:
,

SWSE – Semantic Web Search Engine

เสริชเอนจินสำหรับ Semantic Web
SWSE

SWSE ออกเสียงเหมือน “swishy”
โลโก้เป็นรูปเข็มทิศสองอัน ชี้ไปทางทิศตะวันตกเฉียงใต้ (SW) และตะวันออกเฉียงใต้ (SE)

ทำลายสถิติโลก – สามารถค้นคำตอบจากประโยค RDF จำนวน 7 พันล้านประโยค ได้ภายในเสี้ยววินาที

The Semantic Web Search Engine developed at DERI is able to answer queries with more than 7 billion RDF statements in fractions of a second – the largest number reported so far anywhere in the world. An RDF statement is the entity that makes the Semantic Web semantic. Possible application areas include Social Network Applications and Analysis, eHealth applications, Web Search, location based services, and financial searches.

พัฒนาโดย DERI Galway ไอร์แลนด์ – รายละเอียด [PDF]

[ผ่าน The Register]

technorati tags:
,

Wiki 2.0

WOS4 WorkshopWiki 2.0: The Most Powerful Extensions for MediaWiki
14 Sep 2006, Erik Möller, on , , and more

part of Wizards of OS 4 : Information Freedom Rules
International conference, 14-16 Sep 2006 @ Columbiahalle, Berlin

tags:













Semapedia – tag the world with Wikipedia link

อันนี้เจ๋ง

Semapedia.org โดย มหาวิทยาลัยเวียนนา ออสเตรีย

เดี๋ยวนี้มือถือรุ่นใหม่ ๆ บางรุ่นมันอ่าน 2D barcode ได้ ก็มีคนเอาไปประยุกต์หลายแบบ อ่านนามบัตรบ้าง อ่านโปสเตอร์โฆษณาบ้าง เช็คราคาสินค้าบ้าง ของ Semapedia นี่ เป็นการไปดึงบทความวิกิพีเดียมาให้อ่าน

ตามรูปข้างบน (ถ้ามันไม่แสดง กดไปดูได้ที่เว็บเค้าเลย)
วิธีใช้ ก็คือ:

  1. มีคนสร้าง 2D barcode tag ขึ้นมาก่อน โดยใส่ url ของบทความของสถานที่ เข้าไปที่เว็บ Semapedia (เช่น th.wikipedia.org/wiki/วัดพระแก้ว)
  2. เอา tag อันนั้นไปแปะที่สถานที่ตามบทความ (ระวังโดนจับ :P)
  3. คนผ่านไปมา เห็นเข้า ก็เอามือถืออ่านเจ้า tag นั่น
  4. มือถือก็ส่ง tag นี้ไปให้ Semapedia Reader (Java ME) แล้วก็ไปดึงบทความจากวิกิพีเดียมาแสดงให้ดู
  5. … คุณไกด์ทำตาปริบ ๆ

cross โลกจริงกะโลกเสมือน แตะ เห็น ชิม ดม … อ่าน ? – -”

ดูตัวอย่างได้ที่ Semapedia clusters @ Flickr


tagged – Cologne Cathedral

tags: , , , , ,