Сергей Мезенцев — Семантический винегрет
DESCRIPTION
Семантическая разметка укоренилась в вебе в виде множества стандартов. На смену привычным микроформатам приходят более универсальные технологии. Опробованы различные подходы к построению действительно осмысленного интернета. В своём докладе я расскажу про основные выжившие технологии (JSON-LD, Острова, Microdata, Микроформаты 2.0), разберу их плюсы и минусы. Попробую ответить на вопрос о том, что ждёт нас дальше.TRANSCRIPT
![Page 1: Сергей Мезенцев — Семантический винегрет](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f5428d8b42a42328b48c2/html5/thumbnails/1.jpg)
Семантический винегрет
Сергей Мезенцев
Разработчик
Web Standards Days, 7 декабря 2013
![Page 2: Сергей Мезенцев — Семантический винегрет](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f5428d8b42a42328b48c2/html5/thumbnails/2.jpg)
2
• Сергей Мезенцев
• @thebits
• С 2007 года занимаюсь SW
• Сооснователь семантической
социальной сети dobrometr.ru
• В 2012 году присоединился к
SW в Яндексе
• Разработчик github.com/hayaku
![Page 3: Сергей Мезенцев — Семантический винегрет](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f5428d8b42a42328b48c2/html5/thumbnails/3.jpg)
О чем мы будем говорить
• Зачем нужен семантический веб?
• Семантическая разметка
• Синтаксис
• Словари
• С чего начать
![Page 4: Сергей Мезенцев — Семантический винегрет](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f5428d8b42a42328b48c2/html5/thumbnails/4.jpg)
Зачем нужен
семантический веб?
![Page 5: Сергей Мезенцев — Семантический винегрет](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f5428d8b42a42328b48c2/html5/thumbnails/5.jpg)
5
Зачем нужен семантический веб
Сделать Интернет понятным, не разрушая
существующих устоев
![Page 6: Сергей Мезенцев — Семантический винегрет](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f5428d8b42a42328b48c2/html5/thumbnails/6.jpg)
6
Урсус Верли (Ursus Wehrli)
![Page 7: Сергей Мезенцев — Семантический винегрет](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f5428d8b42a42328b48c2/html5/thumbnails/7.jpg)
7
Урсус Верли (Ursus Wehrli)
![Page 8: Сергей Мезенцев — Семантический винегрет](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f5428d8b42a42328b48c2/html5/thumbnails/8.jpg)
8
10% страниц в рунете имели
семантическую разметку в
2012 году
![Page 9: Сергей Мезенцев — Семантический винегрет](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f5428d8b42a42328b48c2/html5/thumbnails/9.jpg)
9
24% страниц в Интернете
имеют семантическую
разметку сегодня
![Page 10: Сергей Мезенцев — Семантический винегрет](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f5428d8b42a42328b48c2/html5/thumbnails/10.jpg)
10 Сентябрь 2013
![Page 11: Сергей Мезенцев — Семантический винегрет](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f5428d8b42a42328b48c2/html5/thumbnails/11.jpg)
11
SW используют
![Page 12: Сергей Мезенцев — Семантический винегрет](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f5428d8b42a42328b48c2/html5/thumbnails/12.jpg)
12
Синтаксис Словари
Семантическая разметка
![Page 13: Сергей Мезенцев — Семантический винегрет](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f5428d8b42a42328b48c2/html5/thumbnails/13.jpg)
Семантическая разметка
![Page 14: Сергей Мезенцев — Семантический винегрет](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f5428d8b42a42328b48c2/html5/thumbnails/14.jpg)
14
Семантическая вёрстка
HTML5
• nav, article, section, aside
• WAI-ARIA
• HTML5 outliner
• Наташа Арефьева, 18:10
![Page 15: Сергей Мезенцев — Семантический винегрет](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f5428d8b42a42328b48c2/html5/thumbnails/15.jpg)
15
Семантическая разметка
Синтаксис
• RDFa
• Microdata
• Микроформаты
• JSON-LD
• …
Словари
• Schema.org
• OpenGraph
• Микроформаты
• FOAF
• …
![Page 16: Сергей Мезенцев — Семантический винегрет](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f5428d8b42a42328b48c2/html5/thumbnails/16.jpg)
Синтаксис
От простого к сложному
![Page 17: Сергей Мезенцев — Семантический винегрет](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f5428d8b42a42328b48c2/html5/thumbnails/17.jpg)
17
Microformats
• Появились в 2007 году
+ Простая технология для своего времени
− Маленький словарь
− Ограничен HTML
Microformats 2.0
http://microformats.org/
![Page 18: Сергей Мезенцев — Семантический винегрет](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f5428d8b42a42328b48c2/html5/thumbnails/18.jpg)
18
Microdata
Расширение HTML5
+ Естественность для верстальщика
− Судьба спецификации
http://www.w3.org/TR/microdata/
Словари
Schema.org, GoodRelations, LRMI, …
![Page 19: Сергей Мезенцев — Семантический винегрет](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f5428d8b42a42328b48c2/html5/thumbnails/19.jpg)
19
<div itemscope itemtype="http://schema.org/ImageObject"> <h2 itemprop="name">Винни-Пух</h2> <img src="http://example.ru/image.png" itemprop="contentUrl"/> <span itemprop="description">Винни-Пух и все-все- все.</span> </div>
![Page 20: Сергей Мезенцев — Семантический винегрет](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f5428d8b42a42328b48c2/html5/thumbnails/20.jpg)
20
RDFa
RDFa и RDFa Lite
+ Большая выразительность
− Сложность
− Мало используют
http://rdfa.info
![Page 21: Сергей Мезенцев — Семантический винегрет](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f5428d8b42a42328b48c2/html5/thumbnails/21.jpg)
21
<html prefix="og: http://ogp.me/ns#"> <head> <title>The Rock (1996)</title> <meta property="og:title" content="The Rock" /> <meta property="og:type" content="video.movie" /> <meta property="og:url" content="http://www.imdb.com/title/tt0117500/" /> <meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" /> ... </head> ... </html>
![Page 22: Сергей Мезенцев — Семантический винегрет](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f5428d8b42a42328b48c2/html5/thumbnails/22.jpg)
22
JSON-LD
Появился в 2010 году
+ Простой и понятный формат
+ Поддержка парсерами
− Не распространён
http://json-ld.org/
![Page 23: Сергей Мезенцев — Семантический винегрет](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f5428d8b42a42328b48c2/html5/thumbnails/23.jpg)
23
<script type="application/ld+json"> { "@context": "http://schema.org", "@type": "CheckInAction", "object": { "@type": "Flight“ }, "url" : http://www.example.com/check_in } </script>
![Page 24: Сергей Мезенцев — Семантический винегрет](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f5428d8b42a42328b48c2/html5/thumbnails/24.jpg)
Словари
От простых к сложным
![Page 25: Сергей Мезенцев — Семантический винегрет](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f5428d8b42a42328b48c2/html5/thumbnails/25.jpg)
25
Open Graph
• Появился в 2010 году
+ Элементарная имплементация
+ Распространённость
− Маленький словарь
− Некоторые ограничения из-за элементарности
http://ogp.me/
![Page 26: Сергей Мезенцев — Семантический винегрет](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f5428d8b42a42328b48c2/html5/thumbnails/26.jpg)
26
<html xmlns:og="http://ogp.me/ns#"> <head> <meta property="og:title" content="Мой любимый ролик"/> <meta property="og:url" content="http://myhost.ru/video.html"/> <meta property="og:image" content="http://myhost.ru/video/my_video.jpg"/> <meta property="og:description" content="Формула 1, победа любимой команды"/> <meta property="og:video:height" content="640" /> <meta property="og:video:width" content="480" /> <meta property="og:duration" content="56" /> <meta property="og:video:type" content="application/x-shockwave-flash" /> </head>
![Page 27: Сергей Мезенцев — Семантический винегрет](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f5428d8b42a42328b48c2/html5/thumbnails/27.jpg)
27
Schema.org
• Появился в 2011 году
+ Активное развитие
+ Богатый словарь
http://schema.org/
![Page 28: Сергей Мезенцев — Семантический винегрет](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f5428d8b42a42328b48c2/html5/thumbnails/28.jpg)
28
<div itemscope itemtype="http://webmaster.yandex.ru/vocabularies/term-def.xml"> <span itemprop="term">Веб-страница</span> — <span itemprop="definition">самостоятельная часть веб-сайта; документ, снабженный уникальным адресом (URL).</span> </div>
![Page 29: Сергей Мезенцев — Семантический винегрет](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f5428d8b42a42328b48c2/html5/thumbnails/29.jpg)
С чего начать
![Page 30: Сергей Мезенцев — Семантический винегрет](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f5428d8b42a42328b48c2/html5/thumbnails/30.jpg)
30
С чего начать
• Open Graph
• Schema.org + HTML5 Microdata
• Проверить валидатором
• Валидатор
http://webmaster.yandex.ru/microtest.xml
Микроформаты, Schema.org, OGP, Microdata, JSON-LD,
RDFa
![Page 31: Сергей Мезенцев — Семантический винегрет](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f5428d8b42a42328b48c2/html5/thumbnails/31.jpg)
31
Семантический веб очень
простой. Используйте
![Page 32: Сергей Мезенцев — Семантический винегрет](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f5428d8b42a42328b48c2/html5/thumbnails/32.jpg)
32
Ссылки
http://schema.org/
http://www.w3.org/wiki/WebSchemas
http://bit.ly/ya_help
http://bit.ly/ya_validator
http://microformats.org/
http://json-ld.org/
http://rdfa.info/
![Page 33: Сергей Мезенцев — Семантический винегрет](https://reader033.vdocuments.site/reader033/viewer/2022060116/557f5428d8b42a42328b48c2/html5/thumbnails/33.jpg)
33
Литература SW
• Linked Data: Evolving the Web into
a Global Data Space – http://linkeddatabook.com/
• Programming the Semantic Web – http://shop.oreilly.com/