Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Наташа Арефьева — Семантика или смерть

0 views

Published on

Что такое семантическая вёрстка в 2013 году. Какие «уровни» семантики возможны. Какими средствами мы располагаем, чтобы сделать вёрстку семантичной: теги HTML5, атрибуты, микроформаты и другие возможности. Семантическая вёрстка vs. семантический веб. Какой будет семантическая вёрстка в будущем? Позволит ли она сделать веб лучше?

Published in: Technology
  • Be the first to comment

Наташа Арефьева — Семантика или смерть

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

×