Наташа Арефьева — Семантика или смерть
-
Upload
yandex -
Category
Technology
-
view
1.074 -
download
6
description
Transcript of Наташа Арефьева — Семантика или смерть
![Page 1: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/1.jpg)
Наташа Арефьева
Семантика или смерть?
![Page 2: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/2.jpg)
2
nely-‐snork.lj.ru
@n_snork
![Page 3: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/3.jpg)
Самое интересное
3
-‐ Вся правда о семантической верстке и разметке
-‐ Какой может стать семантическая разметка в будущем
![Page 4: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/4.jpg)
Основные понятия
4
-‐ Семантическая верстка HTML5 & CSS
-‐ Семантическая разметкаMicrodata, RDFa, ARIA Role...
![Page 5: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/5.jpg)
Обозначение
5
![Page 6: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/6.jpg)
Научить разметку понимать,
какой контент она содержит
Цель
6
![Page 7: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/7.jpg)
7
HTML5!
![Page 8: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/8.jpg)
8
Доклад про разницу между <sec`on> и <ar`cle>, коротенько...минут на 40!
![Page 9: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/9.jpg)
9Семантика vs. ?
![Page 10: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/10.jpg)
10
Семантическойверстки
не существует
![Page 11: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/11.jpg)
11
![Page 12: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/12.jpg)
-‐ Что такое веб-‐стандарты?
-‐ Что такое семантическая верстка?
Два вопроса:
12
![Page 13: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/13.jpg)
13
Есть спецификация
Так давайте ей следовать!
![Page 14: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/14.jpg)
14
Я всё-‐таки коротенько...
![Page 15: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/15.jpg)
15
Посмотрим правде в глаза
-‐ Да, это сложно!
-‐ Да, стандарт открытый.
-‐ Не хватает аргументов ЗА.
![Page 16: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/16.jpg)
16
Посмотрим правде в глаза
-‐ Да, это сложно!
-‐ Да, стандарт открытый.
-‐ Не хватает аргументов ЗА.
![Page 17: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/17.jpg)
17
Посмотрим правде в глаза
-‐ Да, это сложно!
-‐ Да, стандарт открытый.
-‐ Не хватает аргументов ЗА.
![Page 18: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/18.jpg)
18
— Ну как, поисковики стали выше ранжировать сайты, использующие теги HTML5?
![Page 19: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/19.jpg)
19
— Нет! А должны были?— ...— И не будут!
![Page 20: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/20.jpg)
20
![Page 21: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/21.jpg)
-‐ Кто виноват?
-‐ Что делать?
Два вопроса:
21
![Page 22: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/22.jpg)
22
Не останавливаться!
Правила жизни самураев
![Page 23: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/23.jpg)
23
Посмотрим правде в глаза -‐ 2
-‐ Новая структура
-‐ Больше возможностей каскада
![Page 24: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/24.jpg)
Outline HTML4
24
-‐ в структуре участвуют все элементы-‐ все без исключения!-‐ иерархия заголовков H1-‐H6
![Page 25: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/25.jpg)
Outline HTML5
25
-‐ специальные теги: sec`on, nav, aside, ar`cle
-‐ «презентативное» исключаются
-‐ иерархия создается через sec`on
-‐ есть элементы, исключающиеся из структуры blockquote, figure, details, td...
![Page 26: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/26.jpg)
26
Как это работает?
![Page 27: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/27.jpg)
1. Un`tled BODY1. Un`tled NAV2. От создателей штанов3. Прильни к батарее
27
Unbtled
![Page 28: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/28.jpg)
28
Title it!
1. Accessibility links2. BBC naviga`on3. BBC Homepage
1. From BBC News2. News
![Page 29: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/29.jpg)
29
Структурные теги — отражение и расширение продуманной структуры документа!
![Page 30: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/30.jpg)
30
Суп можно приготовить из любых тегов
![Page 31: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/31.jpg)
31
+ 1 слой
![Page 32: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/32.jpg)
32
C июня 2013 года количество хостов в зоне RU
-‐ использующих doctype HTML5 выросло с 12.5% до 16.3%
-‐ использующих новые теги HTML5 выросло с 6.2% до 9.4%
![Page 33: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/33.jpg)
>15% в зоне COM
>20% в зоне RU
даные за ноябрь 2013 года
33
Хосты, использующие Doctype HTML5
![Page 34: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/34.jpg)
>7% в зоне COM
>11% в зоне RU
даные за ноябрь 2013 года
34
Хосты, использующие структурные элементы HTML5
![Page 35: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/35.jpg)
35
Сlass & id-‐ Осмысленность
-‐ Отделение от визуального представления
-‐ Единообразие
![Page 36: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/36.jpg)
36
Кто здесь?
<DIV id="ja-topnav"> <DIV class="w1"> <DIV class="w2"> <DIV class="w3">
![Page 37: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/37.jpg)
37
Кто здесь? — 2
![Page 38: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/38.jpg)
38
Кто здесь? — 3
<DIV class="b_button category-list-switchheaderDropListSwitch">
![Page 39: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/39.jpg)
39
Зачем разработчику читаемые названия?
-‐ Поддержка в команде
-‐ Простая передача знаний
-‐ Хм... чей это код тут лежит?
![Page 40: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/40.jpg)
40
Семантическая разметка
![Page 41: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/41.jpg)
— Знакомьтесь, <девочка>Алиса</девочка>, это <еда>варенье</еда>
41
Больше информации
![Page 42: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/42.jpg)
42
Кхм... но это же XML!
![Page 43: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/43.jpg)
Семантическая разметка
43
-‐ ARIA Role-‐ Microdata, RDFa, Microformats...-‐ Open Graph, Twi�er card-‐ ...
![Page 44: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/44.jpg)
44
WAI-‐ARIA Accessible Rich Internet
Applicabons
w3.org/TR/aria-‐in-‐html
![Page 45: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/45.jpg)
45
![Page 46: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/46.jpg)
46
mainbannerconten`nfonaviga`onformsearchapplica`on...
Роли
w3.org/TR/aria-‐in-‐html
presenta`on
![Page 47: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/47.jpg)
47
В рабочем черновике спецификации слово semanbcs употреблено
35 раз!w3.org/TR/aria-‐in-‐html
![Page 48: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/48.jpg)
Правила использования ARIA
48
1. Используйте нативную семантику.
2. Не изменяйте семантического значения.
w3.org/TR/aria-‐in-‐html
![Page 49: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/49.jpg)
49
Добавление ARIA role — перекрывает семантику
элемента
w3.org/TR/aria-‐in-‐html
![Page 50: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/50.jpg)
50
Кто поддерживает:
-‐ JAWS (Windows)
-‐ VoiceOver (Mac OS)
-‐ NVDA (Windows)
![Page 51: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/51.jpg)
51
Бонус -‐ дополнительный атрибут
DIV[role="banner"],DIV[role="navigation"]{
display: none;}
![Page 52: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/52.jpg)
А что-‐нибудь однозначное?
52
-‐ Microformats microformats.org
-‐ Microdata и словари schema.org
-‐ RDFa rdfa.info-‐ Open Graph protocol opg.me и др.
-‐ Twi�er Card-‐ ...
![Page 53: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/53.jpg)
Зачем нам это?
53
-‐ Привлечь пользователя
-‐ Сделать его счастливым
![Page 54: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/54.jpg)
54
Чистая квартира после
косметического ремонта
![Page 55: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/55.jpg)
55
![Page 56: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/56.jpg)
56
Даешь визуальное представление в
массы!
![Page 57: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/57.jpg)
57
And the winner is...
По данным Yandex, сентябрь 2013
![Page 58: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/58.jpg)
58
opengraphprotocol.org
Open Graph protocol
![Page 59: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/59.jpg)
59
Twi�er card
dev.twi�er.com/docs/cards
![Page 60: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/60.jpg)
60
Вторым к фишину
По данным Yandex, сентябрь 2013
![Page 61: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/61.jpg)
Microdata HTML5
61
goo.gl/ImUyY
![Page 62: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/62.jpg)
62
Давая больше информации, мы привлекаем к себе
внимание
![Page 63: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/63.jpg)
63
— Как оказывается просто приготовить «птичье молоко!
![Page 64: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/64.jpg)
64
— Как, оказывается, просто приготовить «птичье молоко!
![Page 65: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/65.jpg)
65
За любым, даже самым прекрасным
представлением должен стоять уникальный контент
Правила жизни самураев
![Page 66: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/66.jpg)
Так семантика или смерть?
![Page 67: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/67.jpg)
Использовать семантику
по назначению, в разумных дозах!
Рецепт:
![Page 68: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/68.jpg)
68
Чаще занимайтесьсемантикой!
![Page 69: Наташа Арефьева — Семантика или смерть](https://reader033.fdocument.pub/reader033/viewer/2022052304/5598bc611a28abbc4a8b4866/html5/thumbnails/69.jpg)
69
nely-‐snork.lj.ru
@n_snork
Огромное спасибо Артемию Ломову,Сергею Мезенцеву за помощь в подготовке доклада.