JSON-LD 簡介 - Speaker Deck

Slide 1

Slide 1 text

JSON-LD簡介 @ KKBOX Presented by Bobo

Slide 2

Slide 2 text

大綱 •  前情提要 •  現今網路遇到的問題 •  語義網 (Semantic Web) •  結構化標記(Structured Data Markup)的方法 •  RDF（Resource Description Framework） •  JSON-‐LD •  簡介 •  實作的套件 •  驗證與測試的工具

Slide 3

Slide 3 text

現今網路遇到的問題 •  資訊爆炸! •  巨量資料不斷地在網路上產生多到看不完啦！

Slide 4

Slide 4 text

搜尋引擎 •  幫忙過濾一些資訊 •  可是… 其實搜尋引擎也看不懂這些文件…|| 這些資訊好像很有趣，但是我看不懂耶…

Slide 5

Slide 5 text

如果能讓電腦看得懂文件 •  可以了解語意內涵，而能進一步替使用者作更精確的資料判斷與處理。 •  許多的知識與智慧將有更好的連結與應用 •  以及更多新的應用可能！ •  電腦,巨量資料就交給你看囉~(人類：我下班看電影去XD)

Slide 6

Slide 6 text

語義網(Semantic Web) •  WWW 之父 Tim Berners-‐Lee 指出下一代網路的可能性 •  Web 3.0 Concepts •  跟電腦約定好溝通的語言，並把資料作適當標記 •  讓電腦自己看得懂這些巨量資料 •  許多知識與智慧將有更好的連結與應用

Slide 7

Slide 7 text

有哪些好處？(以搜尋為例) •  Google 真正“知道”更多關於這些資料，更有效整合相關的服務，以及更多應用的可能 •  Website 提高 SEO，帶來更多且精準的流量，以及更多應用的可能 •  User 獲得更優質的體驗，搜尋有更佳的深度與廣度，以及更多應用的可能

Slide 8

Slide 8 text

首先要把資料做個標記 •  結構化標記(structured data markup)的方法： •  Microformats：漸漸非主流，架構在 XHTML 標準上且使用 CSS的 class 來標記內容 •  RDFa： HTML5 支援, 主流搜尋引擎最愛 •  Open Graph：Facebook 所提出的規範 •  Microdata：HTML5支援, 主流搜尋引擎最愛, 較簡單 •  JSON-‐LD：最新現在最夯，待會跟你介紹

Slide 9

Slide 9 text

結構化標記的方法之一 Open Graph •  Facebook 使用，透過 Og meta tag 讓 FB 可以解析此網頁的結構化標記。 •  常見應用：Facebook 插件(按讚、分享...等) 。

Slide 10

Slide 10 text

結構化標記的方法(續) •  哪一種方法比較簡潔明瞭呢？

Slide 11

Slide 11 text

各家山頭林立，誰來一統江湖? •  語義網的概念默默地躺在理論知識殿堂許久 •  直到這幾年… 某個盒子被打開 •  冒出許多大傢伙都想要建立想像中的語義網…

Slide 12

Slide 12 text

Google 知識圖譜

Slide 13

Slide 13 text

Facebook •  Open Graph protocol •  Graph Search •  下列句子，現今有哪個搜尋引擎看得懂你的意思? •  Music my friends like. •  People who like Cycling. •  People who like Cycling and live in Taipei. •  試試看 Facebook 的Graph Search Demo 好像很厲害耶!

Slide 14

Slide 14 text

Facebook表示 •  閃開!~讓專業的來! HHVM 也是~ 冏 •  好像也只有 FB 有這個本錢這樣搞 •  難道未來網路規範要被這傢伙統一了嗎? 別怕…我們還有…

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

•  強大到連 Microsoft 都得…IE表示…

Slide 17

Slide 17 text

W3C推薦 RDF （Resource Description Framework） •  一個用於描述網路資源的框架 •  資源包含：圖片、文章、活動、人物、....等 •  被設計用來給電腦閱讀與理解 •  規範了資料的模型(Model)與語法(Syntax ) •  網路圖譜概念，設計用來整合不同資料來源

Slide 18

Slide 18 text

W3C推薦 (續) RDF （Resource Description Framework） •  最新版 RDF1.1 (2014-‐02-‐25，與上一版隔了10年) •  把資源連起來就是 Linked Data (LD, 鏈結資料) •  語法格式有：RDFa, RDF/XML, N -‐Triples, Turtle...等 •  在 RDF1.1 還新增了 JSON-‐LD 格式 (就是今天介紹的主角啦)

Slide 19

Slide 19 text

好多新名詞喔來複習一下

Slide 20

Slide 20 text

•  用我們熟悉的 JSON 物件 { } 把 LD 包起來就是 •  連圖示也那麼優雅簡單! 願景規範標記資源資料交換規格

Slide 21

Slide 21 text

今日重要名詞複習 •  Linked Data (LD, 鏈結資料) 把這些電腦看得懂有意義的東西(資源)連結起來 •  使用 URIs（Uniform Resource Identiﬁer）作為名稱來標示物件。 •  使用 HTTP 做為查詢及傳送URI的機制，使人或電腦可以查詢特定URI所代表之物件的相關資訊。 •  可以連結到其他 URIs 使其可以發掘更多的資訊 •  JSON-‐LD 最新最夯的結構化標記方法，讓電腦讀的懂你的資料 Data is messy and disconnected. JSON-‐LD organizes and connects it, creating a better Web.

Slide 22

Slide 22 text

所以 JSON-‐LD 是? •  一種輕量化的 Linked Data 格式 •  使用 JSON 格式來表示 Linked Data •  但是我只聽過 JSON 耶…沒關係，就是你熟悉的JSON 再加上 Linked Data 就是 •  講完了…

Slide 23

Slide 23 text

JSON-‐LD 很重要 •  是 RDF 1.1 最新支援的結構化資料方法 •  Google, Microsoft...等，旗下各項服務也開始支援 •  Drupal 8 拋棄 RDFa 等其他格式開始支援 JSON-‐LD •  多種結構化資料格式可以被正規化為 JSON-‐LD •  與目前 API 交換格式的主流 JSON 完全相容 •  才進得去某某 box 公司(誤)

Slide 24

Slide 24 text

JSON-‐LD帶來的好處 •  降低網站 debug 困難，原本 RDFa/Microdata 嵌在 HTML內，而 JSON 的 key/value 閱讀相對容易。 •  不需要特別學習 RDFa/Microdata 屬性內容與標記語法 •  結構化資料可以儲存在 Database 例如 MongoDB •  完全相容現有的 JSON 程式，確保現有的 parsers 和 libraries 可以繼續使用

Slide 25

Slide 25 text

JSON-‐LD範例 •  這是一個 JSON-‐LD，描述一個”人”的資源 •  接下來讓我們看看如何將 JSON 描述成 JSON-‐LD

Slide 26

Slide 26 text

1.單純的 JSON 形式的描述 •  這物件是在描述甚麼呢? •  因為有看到人名，我們很容易直覺判定這個東西是一個人 •  缺點：但機器就沒有這個天分了，這樣的格式描述有些不足且模糊不清

Slide 27

Slide 27 text

2.使用 IRIs 來作為 key 值定義格式，並且使用 schema.org 字彙庫 •  其中 @id 關鍵字表示這個值是 IRI 標記 •  缺點：這樣的描述有些冗長...有比較偷懶的方法嗎? •  IRI (Internationalized Resource Identiﬁers)為支援Unicode 的 URI (僅支援 ASCII)

Slide 28

Slide 28 text

3.加入 Context 前後文的概念 •  使用前後文的概念，先將我們要用到的部分做個語意環境定義 •  缺點：還是有些冗長，而且人這個東西應該已經定義過了吧？

Slide 29

Slide 29 text

4.使用參照來定義人這個東西 •  簡潔明瞭，請對照 1.單純 JSON 形式來看，我們在此使用了 @context 來作為參照 •  如此即可在不改變原有 JSON 格式之下，使 JSON 文件解析為 JSON-‐LD。

Slide 30

Slide 30 text

補充：schema.org 共用字彙庫 •  由 Google、Yahoo、Bing 等搜尋龍頭共同組成 •  建立描述網頁資料的常用詞彙和標記語法，藉此改善網路瀏覽體驗 •  鼓勵網站管理員在 HTML 內容上使用這些詞彙與 JSON-‐LD 格式進行標記 •  讓搜尋引擎、Gmail等服務更容易了解網頁內容 •  Microdata 和 JSON-‐LD 皆使用此詞彙 •  搜尋引擎較愛，但如果要給 FB 用記得加上 og meta tag

Slide 31

Slide 31 text

PHP實作 JSON-‐LD 的套件 •  PHP implementation of a JSON-‐LD Processor and API •  JSON-‐LD processor for PHP •  Drupal JSON-‐LD Extend

Slide 32

Slide 32 text

驗證與測試 JSON-‐LD 的工具 •  JSON-‐LD Playground JSON-‐LD 格式檢驗工具 •  Google 結構化資料測試工具、驗證 Emai 標記 •  RDF Translator 多種格式轉換的工具，包含 RDFa, microdata, JSON-‐LD, RDF/XML, RDF/JSON 等 •  Microdata/JSON-‐LD sniﬀer Chrome 插件用來檢測該頁面是否有 Microdata 或 JSON-‐LD，有的話會顯示圖示來提醒。

Slide 33

Slide 33 text

參考資料： •  What’s New in RDF 1.1 by W3C •  JSON-‐LD 1.0 by W3C •  JSON-‐LD: JSON for Linked Data by Gregg Kellogg •  JSON-‐LD: Linked Data for Web Apps by Gregg Kellogg •  JSON-‐LD and MongoDB by Gregg Kellogg •  JSON-‐LD and Why I Hate the Semantic Web •  Structured Data on the Web •  json-‐ld.org

Slide 34

Slide 34 text

THANK YOU~ 有這個東西嗎?? (驚) @ KKBOX Presented by Bobo Q & A Let’s music !