From Microformats

Plain Old Semantic HTML (POSH)

Добро пожаловать на домашнюю страницу POSH.

Как всё начиналось?

Акроним POSH был впервые использован 6 апреля 2007 года (http://rbach.priv.at/Microformats-IRC/2007-04-06#T091456) на IRC-канале, посвященном микроформатам, пользователем <kwijibo>, как аббревиатура к "plain old semantic HTML" (семантический HTML). Позднее дискуссия Джона Олшопа (John Allsopp), Тантека Челика (Tantek Çelik) и Криса Мезины (Chris Messina) 18 апреля 2007 года после Web 2.0 Expo (http://rbach.priv.at/Microformats-IRC/2007-04-06#T091456) возродила идею о POSH и о том, что очень важно продвигать идеи POSH, на которых, собственно, и основаны микроформаты. Если вам нужно более подробное описание появления самого определения, обратитесь к разделу истории.

Почему?

Термин семантического HTML очень сложно произносить и он не отражает всей простоты явления. Нам нужно простое короткое слово, которое отражает всю суть концепции и которое достаточно легко произносить.

Что?

POSH объясняет конкретные преимущества семантического HTML авторам Web-документов. Семантический HTML — это производная HTML 4.01 (или XHTML 1.0), которая использует [semantic-ru|семантические] элементы и атрибуты, нежели чем репрезентационные. Лучший способ изучить и понять POSH — это делать всё по его правилам. Выберите страницу на вашем сайте, с которой вы хотели бы начать и примените к ней проверки POSH.

Что нужно сделать

Что вы можете сделать, чтобы быть на волне POSH и сделать свои Web-сайты подходящими под это определение?

1. Публиковать содержимое, соответствующее POSH. Изучите ресурсы POSH и убедитесь в том, что ваш Web-сайт является валидным с точки зрения семантического (X)HTML, и что он использует семантические имена классов.
2. Распространяйте POSH: убеждайте других, что это очень интересно, заставляйте их задумываться над разметкой собственных сайтов.
3. Улучшайте POSH: помогите нам собрать ресурсы для упрощения изменения сайтов другим людям.

Список проверок POSH

• Первое правило POSH — валидация (http://validator.w3.org) вашего POSH.
• Во-вторых, уберите те таблицы со своего сайта, которые выполняют репрезентационные функции, GIF-спейсеры и весь репрезентационный HTML.
• Далее, избавьте вашу разметку от «Bed и от BRreakfast» (http://tantek.com/log/2002/10.html#L20021022t1432).
• Уничтожьте якори на вашей странице и другие пустые ссылки
• Сделайте названия ваших классов более семантичными.
• ...

POSH-форматы

POSH-форматы — это форматы, которые отличаются правильным и точным использованием атрибута class в документах.

См. POSH-форматы.

Ресурсы

Руководства POSH

Пошаговые руководства о создании POSH-содержимого или обновления существующего содержимого до POSH.

• Валидация вашего CSS и HTML (http://westciv.com/style_master/house/tutorials/quick/validation/index.html) Простое пошаговое руководство, объясняющее преимущества валидации и принципы её использования
• ...

Закладки POSH

• Ma.gnolia POSH (http://ma.gnolia.com/groups/posh)
• Страницы с тегами POSH и microformats (http://del.icio.us/tag/posh+microformats) на сайте del.icio.us.

Презентации POSH

Презентации, которые объясняют и защищают концепции и техники использования семантического HTML. Если данный раздел разрастётся, он переедет на страницу презентаций о POSH.

• CSS: Between the Style Sheets by Tantek Çelik (2003-03) (http://tantek.com/presentations/2003SXSW/stylesheets.html), конкретнее, см. слайды 3-4,6 начиная с "Leaving the <B>ed & <BR>eakfast (http://tantek.com/log/2002/10.html#L20021022t1432)", и слайд 9: "CSS & the Semantic Spectrum", которые предоставляют беглое объяснение семантического использования (X)HTML-тегов.
• Семантика в реальном мире (http://www.tantek.com/presentations/2004etech/realworldsemanticspres.html) (2004-02-11)
• Семантический XHTML: может ли ваш Web-сайт быть вашим API? - Использование семантического XHTML, чтобы показывать, что вы имеете в виду (http://tantek.com/presentations/20040928sdforumws/semantic-xhtml.html) (2004-09-28)
• Элементы значимости XHTML (http://tantek.com/presentations/2005/09/elements-of-xhtml/) (2005-09-29, первая версия: 2005-03-13 на SXSW Interactive (http://tantek.com/presentations/2005/03/elementsofxhtml/)).
• ...
• Также смотрите специальные презентации по микроформатам.

Книги POSH

Современные книги о Web-дизайне, в которых объясняются принципы семантического HTML.

•  (http://www.oreilly.com/catalog/wdnut3/) Web Design in a Nutshell, Third Edition (http://www.oreilly.com/catalog/wdnut3/) от Jennifer Niederst Robbins See Jenville (http://jenville.com/).
• Microformats empowering your markup for Web 2.0 (http://microformatique.com/book/) от John Allsopp. Chapter 3 is a detailed and practical overview of the appropriate use of structural, valid and semantic HTML.
•  (http://htmlmastery.com/)Semantics, Standards and Styling (http://htmlmastery.com/) от Paul Haine.
•  (http://www.sitepoint.com/books/html1/)Build Your Own Web Site The Right Way Using HTML & CSS (http://www.sitepoint.com/books/html1/) от Ian Lloyd.

Журналы POSH

Интернет и оффлайн-журналы, которые часто публикуют статьи о семантичном HTML.

• A List Apart: For People Making Websites (http://alistapart.com/) (также см. статьи о HTML и XHTML (http://www.alistapart.com/topics/code/htmlxhtml/))
• Digital Web Magazine (http://www.digital-web.com/)

Блоги POSH

Блоги, которые регулярно публикуют информацию о POSH, об искусстве POSH

• David Baron's weblog (http://dbaron.org/log/current)
• Jeffrey Zeldman Presents (http://zeldman.com/)
• meyerweb.com - Eric Meyer (http://meyerweb.com/)
• Microformatique - John Allsopp (http://microformatique.com/)
• SimpleBits - Dan Cederholm (http://simplebits.com/) (see in particular SimpleQuiz (http://simplebits.com/bits/simplequiz/))
• Tantek Çelik (http://tantek.com/)
• ...

Статьи в блогах о POSH

Статьи, которые предоставляют специфические, современные техники и подсказки о применении семантики в HTML. Данный список является неполным. Мы знаем, что существует очень много статей в блогах относительно этого. Добавляйте, если вы нашли таковые.

• POSH - Plain Old Semantic HTML (http://www.456bereastreet.com/archive/200711/posh_plain_old_semantic_html/) by Roger Johansson.
• The Sandbox theme for WordPress readme.html (http://www.plaintxt.org/wp-content/uploads/sandbox-v09_readme.html) discusses what POSH is and how the theme helps users use it.
• Bed and BReakfast markup (B&BR) (http://tantek.com/log/2002/10.html#L20021022t1432) (2002-10-22) - avoiding nonsemantic uses of <b>old and <br>eak tags and using <h3>adings and <p>aragraphs instead.
• <A>norexic </A>nchors (http://tantek.com/log/2002/11.html#L20021128t1352) (2002-11-28) - use the "id" attribute on existing elements instead of adding empty <a name="foo"></a> elements. Use rel-bookmark for post permalinks within the document.
• A Touch of Class (http://tantek.com/log/2002/12.html#L20021216t2238) (2002-12-16) - introduction to proper use of the HTML 'class' attribute.
• Dive into Semantic MARKup (http://tantek.com/log/2002/12.html#L20021231t1850) (2002-12-31)
• Comment markup, presentation and plumbing (http://tantek.com/log/2003/01.html#L20030104t1249) (2003-01-04) - how to markup a list of comments, including example use of the rare "hreflang" attribute.
• Competent Classing by Eric Meyer (http://meyerweb.com/eric/thoughts/2004/07/18/competent-classing) (2004-07-18)
• More about the 'class' attribute (http://tantek.com/log/2004/07.html#d20t2359) (2004-07-20)
• Web Standards in the Real World: An Interview with Molly Holzschlag (http://www.uie.com/articles/holzschlag_interview/) (2005-06-01)
• Webpatterns and websemantics (http://westciv.typepad.com/dog_or_higher/2005/11/webpatterns_and.html) (2005-11-18)
• Writing Semantic HTML by Jesse Skinner (http://www.thefutureoftheweb.com/blog/2006/2/writing-semantic-html) (2006-02-22)
• Who will read your Semantic HTML? (http://www.thefutureoftheweb.com/blog/2007/1/who-will-read-your-semantic-html) by Jesse Skinner (2007-01-04)
• Semantics in HTML (http://microformatique.com/?page_id=109) by John Allsopp (2007-01-08 - 2007-03-12)
  • Part I - Traditional HTML Semantics (http://microformatique.com/?p=83) (2007-01-08)
  • Part II - standardizing vocabularies (http://microformatique.com/?p=97) (2007-02-20)
  • Part III - Towards a semantic web (http://microformatique.com/?p=108) (2007-03-12)
• Built in HTML semantics (http://microformatique.com/?p=82) A list of the semantic elements and attributes of HTML by John Allsopp (2007-01-08)
• The Importance of Being POSH (http://tantek.com/log/2007/04.html#d20t0823) by Tantek Çelik (2007-04-20)
• Getting back to POSH (Plain ol’ Semantic HTML) (http://factoryjoe.com/blog/2007/04/21/getting-back-to-posh-plain-ol-semantic-html/) by Chris Messina (2007-04-21)
• I’m POSH - are you? (http://friedcellcollective.net/outbreak/2007/04/22/im-posh-are-you/) (2007-04-23)
• The Internet’s Upper Class Or Why Your Site Should Be POSH (http://www.unintentionallyblank.co.uk/2007/04/24/plain-old-semantic-html/) (2007-04-24)
• On Appropriate Use of DIVs, or When Divitis Doesn’t Apply (http://nate.koechley.com/blog/2006/12/15/divitis_and_correct_div_usage/) by Nate Koechley, 2006-12-15
• Quick Comment: Choose Class/ID Names Based on Semantic and/or Structural Meaning (http://nate.koechley.com/blog/2006/12/22/note_on_structural_and_semantic_meaning/) by Nate Koechley, 2006-12-22
• SEEing is believing (http://leland.nu/think/2006/07/31/seeing-is-believing/) - using standards and efficient design, coding, maintenance, and marketing to produce a search-engine-efficient site by Richard Leland (2006-07-31)
• ...

См. другие блоги и статьи, в которых обсуждается семантический HTML (http://technorati.com/search/%22semantic%20HTML%22) и POSH (http://technorati.com/search/posh+semantic+HTML).

Подкасты POSH

• 2007-05-03: Разговор о POSH (http://www.netmag.co.uk/podcasts/07-05-03-net.mp3) в журнале .Net (8 эпизод), 56 минут, 26 Мб., 30:10-42:40)
• 2005-09-29: Элементы смысла в XHTML (http://microformats.org/media/2005/09/we05-2-tantek-celik.mp3) - подкаст с презентации Тантека с таким же именем (слайды (http://tantek.com/presentations/2005/09/elements-of-xhtml/))

Скрытые богатства POSH

• Руководства от W3Schools (http://www.w3schools.com/)
• Dev.Opera (http://dev.opera.com/)

POSH для вашего блога

Если вы хотите обновить ваш существующий блог, есть несколько интересных вещей, которые вы можете сделать:

WordPress

• Используйте Sandbox (http://www.plaintxt.org/themes/sandbox/) или K2 (http://getk2.com), которые уже поддерживают hCard и hAtom
• Добавьте Виджет hCard (http://redmonk.net/archives/2007/04/18/wordpress-widget-hcard-about-box/) на ваш сайт.

Продвигайте POSH

Когда вы сделали ваш сайт правильным, продвигайте идею POSH в массы:

• Продвигайте POSH. Сделайте кнопку со ссылкой на текущую страницу или используйте существующие кнопки:
  •  (http://redmonk.net/archives/2007/04/25/the-new-question/) - CC-by-3.0 (http://creativecommons.org/licenses/by/3.0/)
  •  (http://redmonk.net/archives/2007/04/26/chic/) - CC-by-3.0 (http://creativecommons.org/licenses/by/3.0/)
  •  (http://www.hauntedpalace.net/pandora/craic/poshscribbles.png) — CC-by-3.0 (http://creativecommons.org/licenses/by/3.0/)
  •  (http://www.hauntedpalace.net/pandora/craic/poshChopin.png) — CC-by-3.0 (http://creativecommons.org/licenses/by/3.0/)
• Расскажите друзьям. Расскажите вашим друзьям веб-дизайнерам о POSH убедите и помогите им за'posh'ить их собстввенные сайты, и сайты которые они делают на заказ. Пишите в своем блоге об опыте работы с POSH и о сайтах, которые используют эту технологию. Напишите [posh-testimonial-ru posh-отзыв]!
• Предлагайте свои идеи о распространении POSH. Вот некоторые из идей.
  • Hold a PoshPit - a one or half day marathon session mixing semantic HTML experts with folks who maintain/run web sites in general and see how many websites you can collectively upgrade to POSH during the course of the day.
  • ...

Улучшайте POSH

Добавляйте найденные вами ресурсы на эту страницу.

История

Небольшая история понятия POSH

Ранние ссылки на понятие "plain old semantic HTML", которые были найдены:

• 1998-05-01: Kirrily 'Skud' Robert в comp.infosystems.www.authoring.site-design (http://groups.google.com/group/comp.infosystems.www.authoring.site-design/msg/2373e9043c08cba4) - "The site is implemented in HTML 4.0 Transitional with style sheets; this means that anyone with an older browser won't get presentational markup, just plain old semantic HTML. "
• 2006-09-21 Drew's comment by on "Tables and SEO" (http://www.highrankings.com/advisor/tables-seo/): "I’d say it’s well worth it for a variety of reasons to only use tables when you’re presenting tabular data, and use plain old semantic HTML to mark up your content in all other cases." (retrieved by Tantek 08:20, 20 Apr 2007 (PDT))