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