17
Семантический HTML5 Краковецкий Александр Software Engineer, Microsoft Regional Director, http://msug.vn.ua/

Alexander krakovetsky.semantichtml5

Embed Size (px)

Citation preview

Page 1: Alexander krakovetsky.semantichtml5

Семантический HTML5

Краковецкий Александр

Software Engineer, Microsoft Regional Director, http://msug.vn.ua/

Page 2: Alexander krakovetsky.semantichtml5

2© comScore, Inc. Confidential.

Технологическая карта концепций Веб

Page 3: Alexander krakovetsky.semantichtml5

3© comScore, Inc. Confidential.

3

RDF

Resource Description Framework (RDF) — это разработанная модель для представления данных, в особенности — метаданных. RDF представляет утверждения о ресурсах в виде, пригодном для машинной обработки. RDF является частью концепции семантической паутины.

Page 4: Alexander krakovetsky.semantichtml5

4© comScore, Inc. Confidential.

4

Семантическое облако

Page 5: Alexander krakovetsky.semantichtml5

5© comScore, Inc. Confidential.

5

Преимущества и недостатки Semantic Web

Недостатки:

– Практическая нереализуемость

– Дублирование информации

– Невозможность получения коммерческой выгоды

Преимущества:

- Единое информационное поле и API доступа

- Более удобная индексация поисковыми системами

- Нет привязки к конкретному ресурсу

Page 6: Alexander krakovetsky.semantichtml5

6© comScore, Inc. Confidential.

6

Микроформаты

Page 7: Alexander krakovetsky.semantichtml5

7© comScore, Inc. Confidential.

7

До появления HTML5…

- Все секции необходимо обрамлять с помощью тэгов DIV;

- Обычные CSS стили

Page 8: Alexander krakovetsky.semantichtml5

8© comScore, Inc. Confidential.

8

Новые семантические тэги в HTML5

article – основной контент;section – разделение текста на разделы;aside - часть контента, который имеет отношение к основному содержанию, но может быть использовано отдельно от него;header – шапка веб-страницы;footer – подвал веб-страницы;hgroup - определяет группу заголовков;figure - группирует элементы web-страницы по смыслу;menu – секция меню на веб-страницы;nav - основные навигационные блоки на странице;time – время;mark – фрагмент текста, на который следует обратить внимание (strong);dialog – диалоги, чаты, итервью.

Page 9: Alexander krakovetsky.semantichtml5

9© comScore, Inc. Confidential.

9

С появлением HTML5 вы можете делать так!

Page 10: Alexander krakovetsky.semantichtml5

10© comScore, Inc. Confidential.

10

Тэги, которые больше нет

Acronym

Applet

Basefont Big

Center

Dir

Font Frame

Frameset

Noframes

Strike

Tt

Page 11: Alexander krakovetsky.semantichtml5

11© comScore, Inc. Confidential.

11

Детальное описание ссылок, микроформаты

Page 12: Alexander krakovetsky.semantichtml5

12© comScore, Inc. Confidential.

12

Новые типы данных для форм

Page 13: Alexander krakovetsky.semantichtml5

13© comScore, Inc. Confidential.

13

…которые работают даже для мобильных устройств

Page 14: Alexander krakovetsky.semantichtml5

14© comScore, Inc. Confidential.

14

Accessible Rich Internet Applications (WAI-ARIA)

alert, alertdialog, application, article, banner, button, checkbox, combobox, complementary, contentinfo, definition, dialog, directory, document , grid,

gridcell, group, img, link, list, listbox, listitem, log, main, marquee, math, menu, menubar, menuitem, menuitemcheckbox, menuitemradio, navigation, note, option, presentation, progressbar, radio, radiogroup, region, row, search, separator, slider, spinbutton, status, tab, tabpanel, textbox, timer, toolbar,

tooltip, tree, treegrid, treeitem

http://dev.opera.com/articles/view/introduction-to-wai-aria/

Page 15: Alexander krakovetsky.semantichtml5

15© comScore, Inc. Confidential.

15

Браузеры. HTML5 Forms

Page 16: Alexander krakovetsky.semantichtml5

16© comScore, Inc. Confidential.

16

Примеры сервисов

Instapapper / http://instapaper.com/

Readability / http://lab.arc90.com/2009/03/02/readability/

Full RSS Feeds / http://fullrssfeed.com/, http://wizardrss.com/

SmartBrowser / http://msug.vn.ua/Services/MainContent

Page 17: Alexander krakovetsky.semantichtml5

17© comScore, Inc. Confidential.

Спасибо за внимание!

[email protected]

http://msug.vn.ua/