• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Semantic Coding and  Microformats
 

Semantic Coding and Microformats

on

  • 2,374 views

 

Statistics

Views

Total Views
2,374
Views on SlideShare
2,328
Embed Views
46

Actions

Likes
1
Downloads
4
Comments
0

4 Embeds 46

http://www.plug.org.ua 29
http://plug.org.ua 14
http://www.slideshare.net 2
http://ploneua.quintagroup.com 1

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Semantic Coding and  Microformats Semantic Coding and Microformats Presentation Transcript

    • Семантика і мікроформати
        • Serhiy Valchuk
        • © Quintagroup, 2008
    • Зміст доповіді 1. Семантична верстка 1.1 Що таке семантика і семантична верстка 1.2 Логіка документу 1.3 Елементи, які використовуються у семантичній верстці 1.4 Коротко про HTML 5 1.5 Приклад верстки 1.6 Переваги семантичної верстки 2. Мікроформати. 2.1 Що таке мікроформати 2.2 Які існують мікроформати 2.3 Приклади використання мікроформатів 2.4 Плон і мікроформати
    • Семантика - значення мовних одиниць - окремих слів, фразеологізмів, складових частин слова тощо. Значення слова, виразу. Семантична верстка – це використання html елементів за їх призначенням. Що таке семантика
    • Логіка документу 2.4.1 Розділення структури і представлення HTML має коріння в SGML, який завжди був мовою специфікації структурної розмітки. Оскільки HTML вже достатньо розвинувся, все більше його елементів представлення і атрибутів замінюються іншими механізмами, особливо - таблицями стилів. Досвід показує, що відділення структури документа від його представлення зменшує вартість обслуговування на основі широкого спектру платформ, носіїв і т.д. і полегшує оновлення документів. HTML на первинному етапі свого розвитку містив в собі тільки елементи логічної структуризації контента.
    • 9.2.1 Елементи абзацу: EM , STRONG , DFN , CODE , SAMP , KBD , VAR , CITE , ABBR и ACRONYM Елементи абзацу додають структурну інформацію до фрагментів тексту. Звичайне значення елементів абзацу таке: EM : Вказує акцент. Використовується для виділення тексту. Зазвичай відображається ПА курсивом. STRONG : Вказує сильніший акцент.. Використовується для виділення тексту. Зазвичай відображається ПА як напівжирний. CITE : Містить цитату або посилання на інші джерела. DFN : Указує, що це визначальний зразок терміну, що додається. CODE : Позначає фрагмент комп'ютерного коду. 9.2 Структурований текст
    • SAMP: Позначає типовий вивід програм, сценаріїв, і т.п. KBD : Позначає текст, введений користувачем. VAR : Позначає зразок змінної або програмного аргументу. ABBR : Позначає абревіатуру (напр., WWW, HTTP, URI, Mass. і т.п.). ACRONYM : Позначає акронім (напр., WAC, radar і т.п.). Продовження
    • Абревіатура (лат. abbrevio — скорочую) — складноскорочені слова, утворені з перших літер або з інших частин слів, що входять до складу назви чи поняття. Вживаються в усній та писемній мові. Абревіатури називають також акронімами (від грец. άκρος — «найвищий, крайній» та όνυμος — «ім'я»). (Щодо застосування терміну «акронім» існують різні думки: за однією, акронімами називають будь-які слова, складені з перших літер чи частин слів у скорочуваному словосполученні, за іншою — тільки такі, що вимовляються як цілісні слова, а не як послідовність назв літер). Wikipedia Продовження
    • The BLOCKQUOTE and Q elements Attribute definitions cite = uri [CT] The value of this attribute is a URI that designates a source document or message. This attribute is intended to give information about the source from which the quotation was borrowed. These two elements designate quoted text. BLOCKQUOTE is for long quotations (block-level content) and Q is intended for short quotations (inline content) that don't require paragraph breaks. 9.2.2 Quotations:
    • The SUB and SUP elements Many scripts (e.g., French) require superscripts or subscripts for proper rendering. The SUB and SUP elements should be used to markup text in these cases. З версткою даних елементів є нюнси, по замовчування вони роздувають рядок в якому вони є. 9.2.3 Subscripts and superscripts:
    • The P element The P element represents a paragraph. It cannot contain block-level elements (including P itself). We discourage authors from using empty P elements. User agents should ignore empty P elements. 9.3.1 Paragraphs:
    • The BR element forcibly breaks (ends) the current line of text. 9.3.2 Controlling line breaks
    • In HTML, there are two types of hyphens: the plain hyphen and the soft hyphen. The plain hyphen should be interpreted by a user agent as just another character. The soft hyphen tells the user agent where a line break can occur. Those browsers that interpret soft hyphens must observe the following semantics: If a line is broken at a soft hyphen, a hyphen character must be displayed at the end of the first line. If a line is not broken at a soft hyphen, the user agent must not display a hyphen character. For operations such as searching and sorting, the soft hyphen should always be ignored. In HTML, the plain hyphen is represented by the "-" character (- or -). The soft hyphen is represented by the character entity reference ­ (­ or ­) 9.3.3 Hyphenation
    • The INS and DEL elements Attribute definitions cite = uri [CT] The value of this attribute is a URI that designates a source document or message. This attribute is intended to point to information explaining why a document was changed. datetime = datetime [CS] The value of this attribute specifies the date and time when the change was made. INS and DEL are used to markup sections of the document that have been inserted or deleted with respect to a different version of a document (e.g., in draft legislation where lawmakers need to view the changes). These two elements are unusual for HTML in that they may serve as either block-level or inline elements (but not both). They may contain one or more words within a paragraph or contain one or more block-level elements such as paragraphs, lists and tables. 9.4 Marking document changes:
    • 10.2 Unordered lists (UL), ordered lists (OL), and list items (LI) Ordered and unordered lists are rendered in an identical manner except that visual user agents number ordered list items. User agents may present those numbers in a variety of ways. Unordered list items are not numbered. Both types of lists are made up of sequences of list items defined by the LI element (whose end tag may be omitted). Definition lists vary only slightly from other types of lists in that list items consist of two parts: a term and a description. The term is given by the DT element and is restricted to inline content. The description is given with a DD element that contains block-level content. Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words.
    • Елементи DIV & SPAN div – блочний елемент span – строковий елемент 7.5.4 Групування елементів: елементи DIV і SPAN Елементи DIV і SPAN в комбінації з атрибутами id і class надають загальний механізм для додавання структури для документу. Дані елементи визначають вміст як строковий (SPAN) чи рівня блоку (DIV), але не нав'язують інших ідіом представлення вмісту. Таким чином, автори можуть використовувати дані елементи в комбінації з таблицями стилів, атрибутом lang і т. д. і пристосувати HTML до виконання потрібних завдань.
    • HTML 5 Приклади нових елементів HTML 5 3.8 Sections 3.8.1 The body element 3.8.2 The section element 3.8.3 The nav element 3.8.4 The article element 3.8.5 The aside element 3.8.6 The h1 , h2 , h3 , h4 , h5 , and h6 elements 3.8.7 The header element 3.8.8 The footer element 3.8.9 The address element WHATWG - "Web Hypertext Application Technology Working Group" ( www.whatwg.org ) The WHATWG was founded by individuals of Apple, the Mozilla Foundation, and Opera Software in 2004,
    • Код: <div class=&quot;heading1&quot;> Я текст схожий візуально на заголовок першого рівня </div> <div class=&quot;paragraph&quot;> Я текст схожий на параграф </div> <h1&quot;> Я справжній заголовок першого рівня </h1> <p> Я справжній параграф </p> Стилі : .heading1 { font-size:32px; font-weight:bold; margin:22px 0; } Приклад верстки
    • Переваги семантики 1. Підвищення доступності сайту для альтернативних пристроїв перегляду - мобильні переглядачі - голосові переглядачі - версія сайту для друку - пошукові боти 2. Зрозуміла структура коду. 3. Зменшення кількості коду. 4. Позитивна оцінка колег.
    • Microformats are small bits of HTML that represent things like people, events, tags, etc. in web pages. Microformats enable the publishing of higher fidelity information on the Web, providing the fastest and simplest way to support feeds and APIs for your website. See more explanations of what are microformats, and what you can do with them. Мікроформати
      • hCalendar is a simple, open, distributed calendaring and events format, based on the iCalendar standard.
      • hCard is a simple, open, distributed format for representing people, companies, organizations, and places, using a 1:1 representation of vCard.
      • rel-license is a simple, open, format for indicating content licenses
        • <a href=&quot;http://creativecommons.org/licenses/by/2.0/&quot; rel=&quot;license&quot;>cc by 2.0</a>
      • rel-nofollow - by adding rel=&quot;nofollow&quot; to a hyperlink, a page indicates that the destination of that hyperlink SHOULD NOT be afforded any additional weight or ranking by user agents which perform link analysis upon web pages (e.g. search engines).
      • Rel-tag - By adding rel=&quot;tag&quot; to a hyperlink, a page indicates that the destination of that hyperlink is an author-designated &quot;tag&quot; (or keyword/subject) for the current page.
      Specifications
      • VoteLinks - values are &quot;vote-for&quot; &quot;vote-abstain&quot; or &quot;vote-against&quot;
      • XFN - XFN (XHTML Friends Network) is a simple way to represent human relationships using hyperlinks.
      • XMDP - XHTML Meta Data Profiles
      • XOXO - stands for eXtensible Open XHTML Outlines, and is pronounced variously as 'ecks oh ecks oh', 'zho-zho', or 'sho-sho'.
      Продовження
      • adr - for marking up address information
      • geo - for marking up WGS84 geographic coordinates (latitude; longitude)
      • hAtom - syndicating episodic content (e.g. weblog postings)
      • hResume - for publishing resumes and CVs
      • hReview -
      • rel-directory - to indicate that the destination of a hyperlink is a directory listing containing an entry for the current page
      • rel-ecolabel - for indicating ecolabelled products/services/companies
      • rel-enclosure - for indicating attachments (e.g. files) to download and cache
      • rel-home - indicate a hyperlink to the homepage of the site
      Drafts
      • rel-payment - indicate a payment mechanism
      • robots exclusion
      • XFolk - is a simple and open format for publishing collections of bookmarks.
      Продовження
    • Використання мікроформатів Новини Feedburner, news.google.com hAtom Адресна книга plaxo, linkedin, facebook hCard + XFN Календарі upcoming, ckopo.in.ua hCalendar
    • upcoming.yahoo.com - hCalendar Tails Export Firefox Add-ons
    • Operator by Michael Kaply Operator leverages microformats and other semantic data that are already available on many web pages to provide new ways to interact with web services. Tails Export by Robert de Bruin An extension for Showing and Exporting Microformats. Currently it supports the following formats... Firefox Add-ons
    • Плон і мікроформати
    • Посилання HTML 4.01 Specification - http://www.w3.org/TR/html401 Семантическая вёрстка - http://pepelsbey.net/2008/04/semantic-coding-1/ Семантическая верстка — советы и решения - http://flack.ru/2007/11/29/semantic-coding-howto-1/ Microformats - http://microformats.org
    • Дякую Дякую за увагу!