Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Json ld 簡介

5.108 Aufrufe

Veröffentlicht am

JSON-LD 簡介 by Bobo

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

Json ld 簡介

  1. 1. JSON-LD簡介 @  KKBOX   Presented  by  Bobo      
  2. 2. 大綱 •  前情提要   •  現今網路遇到的問題   •  語義網 (Semantic  Web)   •  結構化標記(Structured  Data  Markup)的方法   •  RDF(Resource  Description  Framework)   •  JSON-­‐LD   •  簡介   •  實作的套件   •  驗證與測試的工具
  3. 3. 現今網路遇到的問題 •  資訊爆炸!   •  巨量資料不斷地在網路上產生   多到看不完啦!
  4. 4. 搜尋引擎   •  幫忙過濾一些資訊   •  可是…   其實搜尋引擎也看不懂這些文件…|| 這些資訊好像很有趣,但是我看不懂 耶…
  5. 5. 如果能讓電腦看得懂文件 •  可以了解語意內涵,而能進一步替使用者作更精確的 資料判斷與處理。   •  許多的知識與智慧將有更好的連結與應用 •  以及更多新的應用可能!   •  電腦,巨量資料就交給你看囉~(人類:我下班看電影去XD)  
  6. 6. 語義網(Semantic  Web) •  WWW 之父 Tim  Berners-­‐Lee 指出下一代網路的可能性   •  Web  3.0  Concepts   •  跟電腦約定好溝通的語言,並把資料作適當標記   •  讓電腦自己看得懂這些巨量資料   •  許多知識與智慧將有更好的連結與應用
  7. 7. 有哪些好處?(以搜尋為例) •  Google  真正“知道”更多關於這些資料,更有效整合相 關的服務,以及更多應用的可能 •  Website  提高 SEO,帶來更多且精準的流量,以及更多 應用的可能 •  User  獲得更優質的體驗,搜尋有更佳的深度與廣度, 以及更多應用的可能  
  8. 8. 首先要把資料做個標記 •  結構化標記(structured  data  markup)的方法 :   •  Microformats:漸漸非主流,架構在 XHTML  標準上且使用 CSS的 class  來標記內容   •  RDFa:  HTML5 支援, 主流搜尋引擎最愛   •  Open  Graph:Facebook  所提出的規範   •  Microdata:HTML5支援, 主流搜尋引擎最愛, 較簡單   •  JSON-­‐LD:最新現在最夯,待會跟你介紹  
  9. 9. 結構化標記的方法之一   Open  Graph   •  Facebook  使用,透過 Og  meta  tag  讓  FB  可以解析此網 頁的結構化標記。   •  常見應用:Facebook  插件(按讚、分享...等)  。  
  10. 10. 結構化標記的方法(續) •  哪一種方法比較簡潔明瞭呢?  
  11. 11. 各家山頭林立,誰來一統江湖? •  語義網的概念默默地躺在理論知識殿堂許久   •  直到這幾年… 某個盒子被打開   •  冒出許多大傢伙都想要建立想像中的語義網…
  12. 12. Google  知識圖譜
  13. 13. 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    好像很厲害耶!
  14. 14. Facebook表示 •  閃開!~讓專業的來!  HHVM  也是~  冏   •  好像也只有 FB  有這個本錢這樣搞 •  難道未來網路規範要被這傢伙統一了嗎?       別怕…我們還有…  
  15. 15. •  強大到連 Microsoft 都得…IE表示…
  16. 16. W3C推薦   RDF   (Resource  Description  Framework) •  一個用於描述網路資源的框架   •  資源包含:圖片、文章、活動、人物、....等 •  被設計用來給電腦閱讀與理解 •  規範了資料的模型(Model)與語法(Syntax  )   •  網路圖譜概念,設計用來整合不同資料來源
  17. 17. W3C推薦 (續)   RDF   (Resource  Description  Framework) •  最新版 RDF1.1  (2014-­‐02-­‐25,與上一版隔了10年)   •  把資源連起來就是 Linked  Data  (LD, 鏈結資料) •  語法格式有:RDFa,  RDF/XML,  N  -­‐Triples,  Turtle...等   •  在 RDF1.1  還新增了 JSON-­‐LD  格式 (就是今天介紹的主 角啦)  
  18. 18. 好多新名詞喔   來複習一下
  19. 19. •  用我們熟悉的 JSON  物 件 {  } 把 LD  包起來就是   •  連圖示也那麼優雅簡單!     願景 規範 標記資源   資料交換規格
  20. 20. 今日重要名詞複習 •  Linked  Data  (LD,  鏈結資料)   把這些電腦看得懂有意義的東西(資源)連結起來   •  使用 URIs(Uniform  Resource  Identifier)作為名稱來標示物件。   •  使用 HTTP  做為查詢及傳送URI的機制,使人或電腦可以查詢特 定URI所代表之物件的相關資訊。   •  可以連結到其他 URIs  使其可以發掘更多的資訊     •  JSON-­‐LD   最新最夯的結構化標記方法,讓電腦讀的懂你的資料 Data  is  messy  and  disconnected.  JSON-­‐LD  organizes  and   connects  it,  creating  a  better  Web.
  21. 21. 所以 JSON-­‐LD 是? •  一種輕量化的 Linked  Data  格式   •  使用 JSON  格式來表示 Linked  Data   •  但是我只聽過 JSON  耶…沒關係,就是你熟悉的JSON 再加上 Linked  Data 就是   •  講完了…
  22. 22. JSON-­‐LD 很重要 •  是 RDF  1.1  最新支援的結構化資料方法 •  Google,  Microsoft...等,旗下各項服務也開始支援   •  Drupal  8 拋棄 RDFa 等其他格式開始支援 JSON-­‐LD   •  多種結構化資料格式可以被正規化為 JSON-­‐LD   •  與目前 API 交換格式的主流 JSON  完全相容 •  才進得去某某 box  公司(誤)  
  23. 23. JSON-­‐LD帶來的好處 •  降低網站 debug  困難,原本 RDFa/Microdata  嵌在   HTML內,而 JSON  的 key/value 閱讀相對容易。   •  不需要特別學習 RDFa/Microdata  屬性內容與標記語法   •  結構化資料可以儲存在 Database 例如 MongoDB   •  完全相容現有的 JSON 程式,確保現有的 parsers  和  libraries  可以繼續使用
  24. 24. JSON-­‐LD範例 •  這是一個 JSON-­‐LD,描述一個”人”的資源   •  接下來讓我們看看如何將 JSON 描述成 JSON-­‐LD  
  25. 25. 1.單純的 JSON  形式的描述 •  這物件是在描述甚麼呢?   •  因為有看到人名,我們很容易直覺判定這個東西是一個人 •  缺點:但機器就沒有這個天分了,這樣的格式描述有些不 足且模糊不清
  26. 26. 2.使用 IRIs  來作為 key  值定義格式, 並且使用 schema.org  字彙庫 •  其中 @id  關鍵字表示這個值是 IRI  標記 •  缺點:這樣的描述有些冗長...有比較偷懶的方法嗎?   •  IRI  (Internationalized  Resource  Identifiers)為支援Unicode 的 URI  (僅支援 ASCII)
  27. 27. 3.加入 Context  前後文的概念 •  使用前後文的概念,先將我們要用到的部分做個語意環境 定義 •  缺點:還是有些冗長,而且人這個東西應該已經定義過了 吧?
  28. 28. 4.使用參照來定義人這個東西 •  簡潔明瞭,請對照 1.單純 JSON  形式來看,我們在此 使用了 @context 來作為參照 •  如此即可在不改變原有 JSON  格式之下,使 JSON  文件 解析為 JSON-­‐LD。
  29. 29. 補充:schema.org  共用字彙庫 •  由 Google、Yahoo、Bing  等搜尋龍頭共同組成 •  建立描述網頁資料的常用詞彙和標記語法,藉此改善網路 瀏覽體驗 •  鼓勵網站管理員在 HTML  內容上使用這些詞彙與 JSON-­‐LD   格式進行標記 •  讓搜尋引擎、Gmail等服務更容易了解網頁內容 •  Microdata  和 JSON-­‐LD 皆使用此詞彙   •  搜尋引擎較愛,但如果要給 FB  用記得加上 og  meta  tag
  30. 30. PHP實作 JSON-­‐LD  的套件 •  PHP  implementation  of  a  JSON-­‐LD  Processor  and  API   •  JSON-­‐LD  processor  for  PHP   •  Drupal  JSON-­‐LD  Extend  
  31. 31. 驗證與測試 JSON-­‐LD  的工具 •  JSON-­‐LD  Playground  JSON-­‐LD  格式檢驗工具   •  Google  結構化資料測試工具、驗證 Emai 標記   •  RDF  Translator  多種格式轉換的工具,包含 RDFa,   microdata,  JSON-­‐LD,  RDF/XML,  RDF/JSON  等 •  Microdata/JSON-­‐LD  sniffer  Chrome  插件用來檢測該頁 面是否有 Microdata  或 JSON-­‐LD,有的話會顯示圖示 來提醒。  
  32. 32. 參考資料: •  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
  33. 33. THANK  YOU~   有這個東西嗎??  (驚) @  KKBOX     Presented  by  Bobo     Q    A Let’s  music  !

×