What is Schema.org ?

ทั้ง Facebook และ Google ต่างก็ใช้ Social Graph ในการ implement Social Network ของตนเอง ในขณะที่ Facebook ใช้ Open Graph Protocol สำหรับการใส่ information เพิ่มเติมใน Web Page ทาง Google ก็เลือกใช้ markup ในรูปแบบของ schema.org เพื่อใช้ในการเพิ่ม information ลงใน Web Page สำหรับตัวอย่างที่จะแสดงต่อไปนี้เป็น markup ในรูปแบบของ schema.org เพื่อใช้สำหรับปุ่ม +1

การใช้ markup ในรูปแบบของ schema.org มีข้อดีคือ Search Engine ไม่ว่าจะเป็น Bing, Yahoo!, Google ต่างก็เข้าใจ syntax และสามารถนำข้อมูลที่อยู่ในรูปแบบของ schema.org มาใช้ในการปรับปรุงผลลัพธ์ในการ Search ของตนเอง

HTML Tag จะบอกถึงวิธีการ Display แต่ไม่ได้ระบุว่าสิ่งที่กำลัง Display นั้นหมายถึงอะไร ยกตัวอย่างเช่น <h1>Avatar</h1> อาจจะหมายถึงภาพยนตร์เรื่อง Avatar หรืออาจจะหมายถึง Profile Picture ก็ได้ ซึ่งเป็นเรื่องยากที่ Search Engine จะสามารถเข้าใจได้ ซึ่งถ้า Search Engine สามารถเข้าใจว่าเราหมายถึงอะไร Search Engine ก็จะสามารถแสดง related contents ได้ตรงกับที่เราต้องการมากขึ้น นั่นจึงเป็นที่มาของ schema.org  ซึ่งมีหน้าที่ในการกำหนด vocabularies ที่ผู้พัฒนา web สามารถนำไปใช้เพื่อให้ Search Engine สามารถเข้าใจความหมายของเนื้อหา

โดยทั่วไปเรามักจะใช้ vocabularies จาก schema.org คู่กับ microdata format ในการเพิ่ม information ให้กับ HTML

จากตัวอย่างจะเห็นว่าเราใช้ itemscope และ itemtype ในการกำหนดขอบเขต และชนิดของข้อมูล ซึ่งมีความหมายว่า ข้อมูลใน div ที่เรากำหนด itemscope เอาไว้ จะหมายถึงข้อมูลที่เกี่ยวกับภาพยนตร์ ซึ่งในที่นี้คือภาพยนตร์เรื่อง Avatar นั่นเอง

นอกจากนั้นเรายังสามารถเพิ่ม information ให้กับข้อมูลได้อีกโดยใช้ itemprop ดังตัวอย่างต่อไปนี้

จากตัวอย่างจะเห็นว่าเรามีการใช้ itemprop="name" เพื่อเป็นการระบุชื่อภาพยนตร์ และใช้ itemprop="director" เพื่อเป็นการระบุชื่อผู้กำกับ ซึ่งถึงตอนนี้ Search Engine จะสามารถเข้าใจได้ว่าข้อมูลนี้เกี่ยวกับภาพยนตร์เรื่อง Avatar ที่กำกับโดย James Cameron

สำหรับผู้ที่สนใจ สามารถศึกษาข้อมูลเพิ่มเติมได้ที่ http://schema.org ครับ

แหล่งที่มา : http://schema.org

Facebook Open Graph Protocol

การใช้งาน Open Graph Protocol จะทำให้เราสามารถเปลี่ยน Web Page ของเราให้กลายเป็น Object หนึ่งใน Social Graph ซึ่งจะมีความสามารถต่างๆเหมือนกับ Facebook Page บน Facebook นั่นหมายความว่าถ้าหาก User กดปุ่ม Like บน Web Page ก็จะมีเกิด Connection ระหว่าง User กับ Web Page และ Web Page ของเราจะถูกนำไปแสดงไว้ในส่วนของ "Likes and Interests" ในหน้า User Profile นอกจากนั้นเรายังสามารถ publish update ไปยัง User ที่กดปุ่ม Like Web Page ของเราไว้ได้อีกด้วย สำหรับวิธีในการเปลี่ยน Web Page ของเราให้กลายเป็น Graph Object เราจะใช้การเพิ่ม meta tag เข้าไปใน Web Page สำหรับ meta tag ที่จำเป็นต้องใส่ มีดังต่อไปนี้

og:title - เป็นชื่อของ Object ที่ปรากฎบน Social Graph ยกตัวอย่างเช่น "The Rock"
og:type - ชนิดของ Object ยกตัวอย่างเช่น "video.movie"
og:image - URL ของรูปที่ใช้แทน Object บน Social Graph
og:url - URL ของ Object (ซึ่งจะถูกนำไปใช้เป็น ID บน Social Graph)

ตัวอย่างการใช้งาน Open Graph ของภาพยนตร์เรื่อง The Rock บน IMDB

สำหรับ meta tag อื่นๆ (เป็น optional แต่ควรใส่) ได้แก่

og:audio - URL สำหรับ Audio File ที่เกี่ยวกับ Object
og:description - ข้อมูลสั้นๆที่อธิบายเกี่ยวกับ Object
og:determiner - คำที่ใช้แสดงนำหน้าชื่อของ Object (อย่างเช่น a, an, the,"",auto)
og:locale - ค่า locale ประจำ Object นั้นๆ ค่า default จะเป็น en_US
og:video - URL สำหรบ Video File ที่เกี่ยวกับ Object

สำหรับ Properties บางตัว เราสามารถกำหนด Extra Metadata เข้าไปได้อีก ยกตัวอย่างเช่น

ตัวอย่างการใช้งาน Extra Metadata ของ Image Property

สำหรับในกรณีที่ property นั้น สามารถมีได้หลาย value เราสามารถกำหนดโดยใช้ meta tag เดิม (แต่เปลี่ยน value) ยกตัวอย่างเช่น

ตัวอย่างการใช้งาน Property ที่มีได้หลาย Value

สำหรับการตรวจสอบว่าเราใส่ Property ได้ถูกต้องตาม Open Graph Protocol หรือไม่นั้น เราสามารถใช้ Object Debugger ที่ Facebook เตรียมไว้ให้ โดยเข้าไปที่ http://developers.facebook.com/tools/debug แล้วใส่ URL ของ Web Page เข้าไป จากนั้น Debugger ก็จะทำการตรวจสอบ Web Page ตาม URL ที่เราใส่เข้าไป แล้วก็จะรายงานผลออกมาให้เราเห็นครับ

แหล่งที่มา: http://ogp.me/

Introduction to JSON and PHP

ปัจจุบันการใช้งาน JSON เริ่มที่จะเข้ามาแทนที่ XML เนื่องจากมีขนาดเล็ก สามารถใช้งานได้โดยไม่จำเป็นต้องใช้ parser ที่วุ่นวาย ผู้ที่คิดค้น JSON format คือ Douglas Crockford ดังนั้นการเรียนรู้ที่จะใช้งาน JSON จึงเป็นสิ่งที่จำเป็น โดยเฉพาะ Web Developer สำหรับบทความที่ผมอยากจะแนะนำต่อไปนี้ เขียนขึ้นโดย Frank Lakatos มีชื่อว่า "Introduction to JSON and PHP" เป็นบทความที่เขียนเกี่ยวกับการประยุกต์ใช้งานร่วมกันระหว่าง JSON และ PHP โดยมีตัวอย่างการใช้งานทั้งทางฝั่ง Client Side (โดยใช้ jQuery และ AJAX) และ Server Side (PHP และ json_encode) สำหรับผู้ที่สนใจ สามารถเข้าไปอ่านบทความได้ที่นี่ครับ http://www.itnewb.com/tutorial/Introduction-to-JSON-and-PHP

แหล่งที่มา:

1. http://www.itnewb.com/tutorial/Introduction-to-JSON-and-PHP
2. http://en.wikipedia.org/wiki/JSON

Cross-origin resource sharing

Cross-origin resource sharing (CORS) เป็นเทคโนโลยีที่กำหนดขึ้นโดย W3C ที่จะทำให้ Web Page สามาถ Access ข้อมูลข้าม Domain ได้ (โดยปกติจะไม่สามารถทำได้ เพราะผิดกฎ Same Origin Policy) CORS กำหนดวิธีการสื่อสารระหว่าง Web Browser และ Web Server เพื่อที่จะสามารถอนุญาติให้ Access ข้อมูลข้าม Domain ได้อย่างปลอดภัย การ implement CORS ทางฝั่ง server สำหรับในกรณีที่เป็น Simple Request (HTTD Method มีค่าเท่ากับ HEAD, GET หรือ POST และ Content-Type มีค่าเท่ากับ application/x-www-form-urlencoded, multipart/form-data,text-plain) สามารถทำได้ง่ายๆ เพียงแค่ส่ง HTTP Header เพิ่ม ดังต่อไปนี้

สำหรับการเพิ่ม HTTP Header ในลักษณะนี้ จะเป็นการอนุญาติให้สามารถ Access ข้อมูลมาจากที่ไหนก็ได้ ซึ่งต้องระวังเป็นพิเศษ เนื่องจากเป็นการเสี่ยงที่จะเกิดปัญหา XSS attacts จาก Website ที่่ไม่หวังดี ทางที่ดี ควร grant access เฉพาะเท่าที่จำเป็น อย่างเช่น

สำหรับในกรณีที่ไม่ใช่ Simple Request (อย่างเช่นในกรณี HTTP Method มีค่าเท่ากับ PUT หรือ DELETE หรือในกรณีที่ Content-Type มีค่าเท่ากับ application/json) Browser จะต้องส่ง Preflight Request (เพื่อทำการขออนุญาติ) ก่อนที่จะส่ง Request ที่ต้องการออกไป เมื่อได้รับการอนุญาติจากทางฝั่ง Server ปลายทางแล้ว จึงจะสามารถส่ง Request ไปได้ ซึ่ง Browser จะเป็นผู้รับผิดชอบในการส่ง Preflight Request ดังกล่าวโดยอัตโนมัติ ทำให้เหมือนกับว่าเราส่งเพียงแค่ Request เดียว คือ Request ที่เราต้องการเท่านั้น

จะสังเกตุว่าการจะสามารถใช้เทคโนโลยี CORS ได้นั้น ต้องมีความร่วมมือเกิดขึ้นทั้งจากทางฝั่ง Server และทางฝั่ง Browser ปัจจุบัน Browser ที่รองรับการใช้เทคโนโลยี CORS ได้แก่ Chrome 3+, Firefox 3.5+, Safari 4+ และ IE 8+ สำหรับผู้ที่สนใจ สามารถศึกษาเพิ่มเติมได้จาก wikipedia  ส่วนอันนี้เป็น Tutorial เกี่ยวกับการใช้งาน CORS จาก HTML 5 Rock ครับ

แหล่งที่มา:

1. http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
2. http://www.html5rocks.com/en/tutorials/cors/

Social Design Best Practices

สำหรับใครที่กำลังมีความคิดที่อยากจะสร้าง Social Application ให้ออกมาดีๆ ควรที่จะอ่านบทความก่อนนี้นะครับ http://bit.ly/LyFJxs  เป็นบทความที่เขียนสรุปเกี่ยวกับ Best Practices ในการสร้าง Social Application ให้ประสปความสำเร็จครับ

แหล่งที่มา: http://docs.opensocial.org

Humans.txt, We are People, Not Machines

humans.txt เป็น Text File ขนาดเล็กๆที่จะช่วยให้เรารู้จักผู้ที่อยู่เบื้องหลัง Web Site ที่เราเห็นกันอยู่ทุกๆวัน วิธีการใช้งานก็เพียงแค่วางไฟล์ humans.txt เอาไว้ที่่ root folder ของ Web Site ส่วนใน HTML เราก็เพิ่ม <link href="http://domain/humans.txt" rel="author" type="text/plain"></link> เข้าไปในบริเวณส่วน HEAD ลองดูตัวอย่างของ Text File ได้ ที่นี่

แหล่งที่มา: http://humanstxt.org/