รู้จักกับ Microformats

ไม่ทราบว่าเคยได้ยินกันบ้างหรือยังกับคำคำนี้ Microformats และ งงกันบ้างไหมครับว่ามันคืออะไร ทำงานอย่างไร สำหรับเราหลาย ๆ คนคงเป็นเรื่องใหม่ ที่จะเข้ามาปั่นหัวให้วุ่นวายกันอีกแน่ Microformats เป็น “กลุ่มของข้อมูล ที่นำเอามาตรฐานเข้ามาใช้ ที่ถูกออกแบบโครงสร้างมาให้เป็นประโยชน์ต่อ มนุษย์ มากกว่า จักรกล” อย่างไรนะเหรอ? ในอนาคตอีกไม่นานนี้ (ในประเทศไทย) จะได้รู้ถึงคุณประโยชน์ของมันอย่างแน่นอน เมื่อ ICT รู้จักทำประโยชน์ให้ประเทศ รู้จักมองถึงปัญหาที่เกิดเกี่ยวกับโลก cyber อย่างแท้จริง รู้จักมองถึงประชาชนในประเทศ และ รักษาสิทธิ์ที่พวกเราพึงจะได้มากกว่านี้ … ทำไมผมถึงพูดออกมาอย่างนั้น ทำไมน่ะเหรอ เอาไว้จะสาธยายให้ฟัง หลังจากอธิบายเกี่ยวกับ Microformats ก่อนก็แล้วกันครับ

Microformats นั้นหมายถึงการใช้ Standard ที่เรารัก (ไม่รู้ว่ารักจริงไหมนะ เฉพาะชาว ThaiCSS หรือเปล่า?) ให้มีความหมายมากที่สุด (semantic มากที่สุด) เท่าที่จะทำได้ มองง่าย ๆ ไปเลยเสียว่า มันคือแบบฝึกหัดในการทำให้ Website ของคุณนั้นมี Accessibility ที่สูง ๆ นั่นเอง Microformats ใช้ XHTML tags หลาย ๆ ตัวเช่น address, cite และ blockquote และ XHTML attributes หลาย ๆ ตัวเช่น rel, rev และ title เอามาทำให้ข้อมูลของคุณนั้นเกิดความหมาย เกิดประโยชน์มากที่สุด (ถ้าอ่านมาถึงตรงนี้ คุณมีความคิดในใจเกิดขึ้นว่า อะไรของมันวะเดี๋ยว tags เดี๋ยว attributes ให้ลองอ่าน ความหมายของมันในกระทู้นี้ Microformats ใช้ยากไหม? ไม่ยากครับ มันใช้ tags และ attribute ที่เราคุ้นเคยนี่แหละ นำมาใช้ในทางที่ดีที่สุด เกิดประโยชน์ที่สุด

ยกตัวอย่าง ง่าย ๆ สักหนึ่งตัวอย่าง

สมมติว่าคุณอยากจะทำนามบัตร electronics วางใน website ของคุณ เราก็ใช้รูปแบบของ hCard จาก Microformats ทีนี้เราจะเขียนอย่างไร สมมติว่า ผมจะวางข้อมูลในการติดต่อของผมลงไปอย่างนี้

Radiz Sutthisoontorn

XHTML CSS Web Designer

Slice2CSS

9/6 Phaholyothin, Phaholyothin 35 Ladyao Jatujak BKK 10900 Thailand

Mobile: +66-841-234-567

Home: +66-212-345-67

ผมก็จะต้องเขียนออกมาแบบนี้

<div class=”vcard”>

<address class=”email fn”><a href=”mailto:info@slice2css.com”>Radiz Sutthisoontorn</a></address >

<address class=”title”>XHTML CSS Web Designer</address>

<address class=”org url”><a href=”http://www.slice2css.com”>Slice2CSS</a></address>

<address class=”adr”>

<span class=”street-address”>9/6 Phaholyothin, Phaholyothin 35</span>

<span class=”locality”>Ladyao Jatujak</span>

<span class=”region” title=”Bangkok”>BKK</span>

<span class=”postal-code”>10900</span>

<span class=”country-name”>Thailand</span>

</address>

<address class=”tel”><span class=”type”>Cell</span>: +66-841-234-567</address>

<address class=”tel”><span class=”type”>Home</span>: +66-212-345-67</address>

</div>

ถ้าเป็น vCard ต้องเขียน code ออกมาแบบนี้

BEGIN:VCARD

VERSION:3.0

N:Sutthisoontorn;Radiz

FN:Radiz Suttisoontorn

EMAIL;type=internet:info@slice2css.com

TITLE:XHTML CSS Web Designer

ORG:Slice2CSS;

URL:http://www.slice2css.com

ADR;TYPE=HOME:;; 9/6 Phaholyothin, Phaholyothin 35; Ladyao Jatujak; BKK; 10900; Thailand.

TEL;type=Mobile;type=pref:+66-841-234-567

TEL:type=Home;type=pref:+66-212-345-67

END:VCARD

คุณเห็นอะไรบ้างจากตัวอย่างข้างบนจะเห็นได้เลยว่า ผมใช้ XHTML Tags ที่เหมาะสมกับข้อมูลที่ควรจะเป็น ใส่ class ที่เป็นคุณสมบัติของ hCard ของ Microformats ลงไป และ จุดที่น่าสังเกตอีกอย่างหนึ่งคือ รูปแบบที่ผมกล่าวถึงเมื่อกี้ยังมีการประกาศตัวแปรเป็นรูปแบบเดียวกับ vCard ของ XML อีกด้วย ทำงานร่วมกันได้อีกด้วย

ทำไมเราต้องใช้มัน มันมีประโยชน์อย่างไร

จะกล่าวถึงประโยชน์ของมันก่อนละกันนะครับว่า Microformats นั้นจะเป็นตัวกลางในการ share ความรู้ระหว่างมนุษย์ กับ  จักรกลเพราะฉะนั้นลองนึกภาพดูว่าถ้าเราทำให้เจ้าจักรกลทั้งหลายเข้าใจข้อมูลต่าง ๆ ที่เราอยากรู้ อยากแชร์ให้กับคนอื่น ๆ เจ้าเครื่องจักรก็จะช่วยเราได้มากขึ้นทำประโยชน์ให้เรามากขึ้น ยกตัวอย่างเช่น Search Engine ทั้งหลายจะสามารถเข้ามา index ข้อมูลของเราได้โดยถูกต้องแทบจะ 100% เลยเพราะว่ามันรู้แล้วว่า อ๊ะ การประกาศแบบนี้ การใช้ class แบบนี้ คือ รูปแบบของ Microfaormats และ ความหมายของมันคือ แบบนี้ ฉันก็จะเอาไปเก็บในหมวดหมู่ index นี้ สมมติว่ามันเจอ hCard ของผมมันก็จะทราบแล้วว่านี่เป็นข้อมูลในการติดต่อผมนะ อ่ะทีนี้มันก็จะเอาไป index ไว้ในหมวดหมู่ที่ควรจะอยู่ละ ทีนี้การสืบค้นก็จะง่ายขึ้น หรืออาจจะเป็นอุปกรณ์อื่น ๆ เจ้า browser ต่าง ๆ ก็สามารถเข้าใจ และ แยกแยะได้ด้วย

ทีนี้ผมจะกล่าวถึงการใช้งาน มองสองมุม มุมแรก user บางท่านอาจจะไม่ทราบไม่รู้ว่ามันจะช่วยได้อย่างไรฉันก็แค่ใช้ของฉันไปวัน ๆ หรือ สืบหา สืบค้นข้อมูลในสิ่งที่เราต้องการก็พอแล้ว แต่กลับกัน ทางฝั่ง developer ทั้งหลายจะสะดวกสบายขึ้นทำงานได้ง่ายขึ้นกับการจัดการข้อมูลของพวกเขา แต่ประเด็นสำคัญ และ เป็นประเด็นนรกแตกเลย คือ ถ้า ie6 ยังครองโลกอยู่แล้วล่ะก็ ทุกอย่างมันก็จบ เพราะอะไร? เพราะ เราจะไม่สามารถใช้คำสั่ง CSS 3 ได้เลย การเขียน CSS แบบ Descendant Selectors ก็จะไม่ได้ผล แล้วมันเกี่ยวไรกันฟะ? … เกี่ยวสิครับเพราะถ้าเขียนแบบ Descendant Selectors ไม่ได้ class ก็จะเยอะมาก มากเกินความจำเป็น ความโกลาหลสับสนวุ่นวายก็ยังคงอยู่ ต้องรอดูกันว่าเมื่อ IE8 มาแล้ว IE6 จะตายสนิทหรือไม่ เราจะได้ใช้เทคโนโลยีที่ควรใช้ แต่ยังใช้ไม่ได้กันเสียที

ในสภาวะของประเทศของเรา

ครับที่บอกไว้ข้างต้น ขอย้ำว่าไม่ใช่เฉพาะเรื่องเทคโนโลยี Microformats จะพูดรวมไปถึงเรื่องอื่น ๆ ด้วย (ขอนิดนึงนะ) ICT ควรจะศึกษา และ ทำความเข้าใจบ้าง หรือ ทั้งหมดได้ก็ดี ICT ไม่ใส่ใจอะไรเลย ใช่หรือไม่? ไม่ว่าจะเป็น Web Standards และ เทคโนโลยีที่เกี่ยวข้องอื่น ๆ หรือว่ารู้แล้วไม่ทำ หรือ ว่าอย่างไร? ใครจะให้คำตอบได้บ้าง ไม่ว่าจะเป็นเรื่องของการเข้ารหัสภาษาทั้ง 3 แบบ จะเอาอันไหนให้เป็น standard หรือ จะเอาทั้ง 3 นั้นเป็น standard ก็ยังไม่ไปตกลง การให้ความรู้ความเข้าใจที่ถูกต้องเกี่ยวกับความรู้ทางไอที ฯลฯ เขียนไปถึงมุกดาหารบ้านผมยังไม่รู้จะหมดมั้ย แล้ว mict ตัวใหม่ที่บอกว่า สนับสนุนผู้พิการทางสายตา และ ผ่าน WAI พูดออกมาเต็มปากเต็มคำขนาดนั้น รู้แล้วจริง ๆ หรือไม่ อย่าผลาญภาษีของประชาชนเล่น และ มอบสิ่งที่ผิด ๆ ให้กับเยาวชนสิครับ ไม่คิดถึงตัวเอง ครอบครัวตัวเอง ลูกหลานตัวเอง ก็ให้คิดถึงประเทศชาติบ้านเมืองบ้าง อย่าไปถ่วงความเจริญเขา

องค์กรของรัฐควรจะทำอย่างไร ควรจะเป็นตัวอย่างที่ดีครับ ควรจะทำให้เห็นเป็นตัวอย่าง เรื่อง WAI ถึงคุณจะทำผ่านได้จริง แต่การเข้ารหัสภาษาที่ไม่ตกลง screenreader ก็ช่วยอะไรไม่ได้อยู่ดี หวังไวัอย่างยิ่งว่า ผมจะได้เห็นความเปลี่ยนแปลงครั้งใหญ่เร็ว ๆ นี้ อาจจะไม่ใช่ ICT ที่อยากจะเปลี่ยนแปลงเอง แต่สภาพแวดล้อมจะเปลี่ยนแปลงคุณเอง

เจ้าของ hosting ต่าง ๆ ในไทย ควรตามเทคโนโลยีด้วยนะครับ เท่าที่รู้กันในบ้านเรา มีไม่กี่ที่ที่สามารถ run application-x มีไม่กี่ที่ที่สนับสนุน xml และ xhtml แบบเต็ม ๆ เพราะฉะนั้นโอกาสในการพัฒนาก็จะน้อยลงไป จะทำอย่างไร ควรจะต้องเริ่มคิดกันได้แล้วนะครับ

บทสรุป

หาก Microformats เป็นเทคโนโลยีที่สามารถนำมาใช้ได้ดีเยี่ยม สมบูรณ์ และ ทำงานได้เป็นประโยชน์สูงสุดได้จริง ๆ แล้วล่ะก็ Web 3.0 ก็คงใกล้เราเข้ามาทุกทีแล้วล่ะครับ ผู้ที่นำเทคโนโลยีนี้มาใช้ ก็ไม่ใช่อื่นไกล Apple นี่เองคุณสามารถเข้าไปสำรวจได้ใน .mac ซึ่งถ้าคุณมี account อยู่คุณสามารถตรวจหาดูได้ใน code ของเขาได้ทันที เมื่อคุณ Login

ด้วยความเคารพ

Back to Top

9 Responses to รู้จักกับ Microformats

  1. พร อันทะ

    มันเป็นเรื่องไกลตัวกระนั้นหรือ ไม่ใช่เลย มันเกาะอยู่ตรงหน้าผากเราๆ ท่านๆ นี่เอง อีกไม่นานมันจะตบหน้าเราโดยไม่ทันตั้งตัว ถ้าหากว่าเรายังมัวงุ่มง่ามอยู่ ICT บ้านเราทำอะไรกันมั่ง ก็อย่างที่เห็นกันอยู่ หวังมากไม่ได้

     
    แต่สิ่งที่เราทำได้ก็คือ ศึกษาต่อไปก่อน ด้วยตัวเอง ก่อนที่จะหมดพลังกัน อย่ารอเขาเหล่านั้นเลย เดี๋ยวจะตายหมู่กันซะเปล่า ถึงก่อนมีสิทธิ์ก่อน แต่เอ.. จะเอาสิทธิ์ไปใช้ที่ไหนวะ

    Reply

  2. radiz

    วันที่ 23 เอาสิทธิ์ไปใช้ซะ หรือ กา ไม่ประสงค์ใช้สิทธิ์ เอิ๊ก ๆ

    Reply

  3. RookieDZ

    หากมันเป็นอย่างนั้นจริงเราก็คงต้องเตรียมตัวกันก่อนแล้วล่ะคับท่าน

    Reply

  4. mookie

    โอ้ววว มึน -\"-

     
    ขอบคุณค๊าบบ สำหรับบทความที่มีประโยชน์หลายๆ ^^

    Reply

  5. bukoilza

    รู้ก่อน มีสิทธิ์ก่อน โอกาสทองครับ

    Reply

  6. dogdoy

    เพิ่งจะเคยเห็นนี่แหละครับ ขอบคุณหลายๆครับ

    Reply

  7. ดูหนังออนไลน์

    วุ่นวายมากอะอยากทำแต่ยากอะครับ

    Reply

  8. jack

    แล้วมันใช้ยังไง นำไปใช้ยังไง ครับ แปะใว้ตรงไหน ทุกหน้าเว็บเพจเลยหรือเปล่า….

    Reply

    • Radiz Sutthisoontorn
      Radiz Sutthisoontorn

      ตามลักษณะการใช้งานครับ อย่างส่วนที่เกี่ยวกับเนื้อหา microformats จะมีชุด attribute ที่ใช้แยกส่วนโครงสร้างต่างๆ ตรงนี้ก็จะมีใช้อยู่ในทุกหน้าครับ ส่วนพวก vcard อาจจะอยู่ที่หน้า about us หรือหน้า profile ของคุณ

      ขึ้นอยู่กับการออกแบบเนื้อหามากกว่าครับว่าคุณออกแบบให้มันออกมาเป็นอย่างไรและจะนำ microformats ไปใช้ support สิ่งที่คุณอยากได้อยากทำอย่างไร?

      ขอโทษที่ตอบช้านะครับ ขอบคุณสำหรับคำถามครับ
      -รดิส

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

Back to Top