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


The Presentation inside:

Slide 0

Богданов Марат Робертович Современные веб-технологии. Подробный курс Микроформаты


Slide 1

Микроформаты (англ. microformats; иногда сокращённо ?F или uF) позволяют наделять информацию смыслом, понятным для программ, обрабатывающих web-страницы. Микроформаты структурируют информацию согласно определенным соглашениям. 2


Slide 2

Принципы построения микроформатов При использовании микроформатов к существующей HTML-разметке добавляются новые составляющие, наполненные особым, заранее определённым смыслом. Таким образом, люди приходят к соглашению об использовании определённых значений атрибутов (в том числе class) для разметки определённых фрагментов информации. В дальнейшем такую разметку можно обрабатывать машинными средствами. 3


Slide 3

hCard (сокращение для HTML vCard) — микроформат для публикации контактной информации людей, компаний, организаций и мест. <div class="vcard"> <div class="fn org">Башкирский государственный педагогический университет им. М Акмуллы</div> <div class="adr"> <div class="street-address">Октябрьской революции, 3А</div> <div> <span class="locality">Уфа</span>, <span class="region">Республика Башкортостан</span> <span class="postal-code">450000</span> </div> <div class="country-name">Россия</div> </div> <div>Телефон: <span class="tel">+7-347-272-9127</span></div> <div>E-mail: <span class="email">[email protected]</span></div> <div> <span class="tel"><span class="type">Факс</span>: <span class="value">+7-347-272-9127</span></span> </div> </div> 4


Slide 4

hCalendar (сокращённо от HTML iCalendar) — микроформат для представления семантической информации о событиях в формате календаря. Он позволяет инструментам для парсинга (например, другим сайтам или расширениям Operator и Tails для Firefox) извлекать информацию о событии и отображать её на сайтах, индексировать, искать её или загрузить её в программу календаря или дневника и прочее. <span class="vevent"> <span class="summary">Вечеринка</span> пройдет <span class="dtstart"> <span class="value">2010-02-26</span>, с <span class="value">19:00</span></span> до <span class="dtend"><span class="value">22:00</span></span>. </span> 5


Slide 5

hAtom — ленты новостей (как аналог RSS и Atom) в обычном HTML или XHTML; <span class="hentry"> <span class="entry-summary">Образец короткого блога</span> был опубликован <span class="published"> <span class="value">2010-08-01</span> в <span class="value">12:06</span></span> и обновлен в <span class="updated"><span class="value">12:10</span></span>. </span> 6


Slide 6

XFN – Социальные сети Необходимо сообщить браузерам и поисковикам что страница поддерживает XFN. Для этого в тэге <head> веб-страницы надо добавить атрибут profile: <head profile="http://gmpg.org/xfn/11"> Для каждой гиперссылки на странице нужно добавить атрибут rel. Значений атрибута rel может быть несколько, в таком случае они перечисляются через пробел. <head runat="server"> <title>Социальные сети</title> <head profile="http://gmpg.org/xfn/11"> </head> <body> <form id="form1" runat="server"> <a href="http://myfriends.org" rel="contact colleague co-resident">Друзья</a> </form> </body> 7


Slide 7

Geo – широта и долгота Geo — микроформат, используемый для пометки географических координат в формате WGS84 (широта; долгота) на (X)HTML-страницах. <div class="geo">Уфа: <span class="latitude">54.45</span>; <span class="longitude">56.0</span></div> 8


Slide 8

hReview — отзывы (о товарах, услугах, событиях и тому подобном) <div class="hreview"> <span><span class="rating">5</span> звезд из 5</span> <h4 class="summary">Ашхана Гузель</h4> <span class="reviewer vcard">Рецензент: <span class="fn">Марат</span> - <abbr class="dtreviewed" title="20100418T2300-0700">April 18, 2010</abbr></span> <div class="description item vcard"><p> <span class="fn org">Гузель</span>Один из лучших ресторанов <span class="adr"><span class="locality">Уфа</span></span>. Отличное питание и обслуживание </p></div> <p>Дата посещения: <span> Апрель 2010</span></p> <p>Съеденное блюдо: <span> Бишбармак</span></p> </div> 9


×

HTML:





Ссылка: