{"id":701,"date":"2009-01-07T19:53:56","date_gmt":"2009-01-07T18:53:56","guid":{"rendered":"http:\/\/www.jurecuhalev.com\/blog\/?p=701"},"modified":"2009-01-07T20:33:29","modified_gmt":"2009-01-07T19:33:29","slug":"marko-mrdjenovic-im-posh-are-you","status":"publish","type":"post","link":"https:\/\/www.jurecuhalev.com\/blog\/marko-mrdjenovic-im-posh-are-you\/","title":{"rendered":"Marko Mrdjenovic: I&#8217;m POSH are you?"},"content":{"rendered":"<p>Here are my notes from lecture by <a href=\"http:\/\/friedcellcollective.net\/outbreak\/\">Marko Mrdjenovic<\/a>: Jaz sem POSH, pa ti? at @<a class=\"zem_slink\" title=\"Kiberpipa\" rel=\"blog\" href=\"http:\/\/www.kiberpipa.org\">kiberpipa<\/a> @<a class=\"zem_slink\" title=\"www:h\" rel=\"blog\" href=\"http:\/\/web.zen.si\">wwwh<\/a>.<\/p>\n<p><strong>What&#8217;s\u00a0 POSH and a short history?<\/strong><\/p>\n<div class=\"zemanta-img zemanta-action-dragged\" style=\"margin: 1em; float: right; display: block;\">\n<div>\n<dl class=\"wp-caption\" style=\"width: 250px;\">\n<dt class=\"wp-caption-dt\"><a href=\"http:\/\/www.flickr.com\/photos\/11215651@N06\/2351334292\"><img loading=\"lazy\" decoding=\"async\" title=\"Nor your ordinary next door girl\" src=\"http:\/\/farm4.static.flickr.com\/3131\/2351334292_6ffce0b013_m.jpg\" alt=\"Nor your ordinary next door girl\" width=\"240\" height=\"137\" \/><\/a><\/dt>\n<dd class=\"wp-caption-dd zemanta-img-attribution\" style=\"font-size: 0.8em;\">Image by <a href=\"http:\/\/www.flickr.com\/photos\/11215651@N06\/2351334292\">Cayce Newell<\/a> via Flickr<\/dd>\n<\/dl>\n<\/div>\n<\/div>\n<p>Years and years ago (before 1999), we had &#8220;shinny happy tables&#8221;, everything in HTML that dealt with advanced layout had to be done in tables since they didn&#8217;t undrstand anything else. We had to use lots of <a class=\"zem_slink\" title=\"Spacer GIF\" rel=\"wikipedia\" href=\"http:\/\/en.wikipedia.org\/wiki\/Spacer_GIF\">spacer GIF<\/a>&#8216;s to make it look right.<\/p>\n<p>Then one day Jeffy Z. started thinking about building layouts with CSS, so we had to burn our tables.<\/p>\n<p><em>That&#8217;s how POSH got invented.<\/em><\/p>\n<p>Then Microformats got invented and being pushed around at different conferences. People realized that until we can actually code HTML, <a class=\"zem_slink\" title=\"Microformat\" rel=\"wikipedia\" href=\"http:\/\/en.wikipedia.org\/wiki\/Microformat\">microformats<\/a> won&#8217;t do us any real justice<\/p>\n<p>POSH &#8211; <strong>P<\/strong>lain <strong>O<\/strong>ld <strong>S<\/strong>emantic <strong>H<\/strong>TML<\/p>\n<p><strong>5 Rules of POSH:<\/strong><\/p>\n<div class=\"zemanta-img zemanta-action-dragged\" style=\"margin: 1em; float: right; display: block;\">\n<div>\n<dl class=\"wp-caption\" style=\"width: 250px;\">\n<dt class=\"wp-caption-dt\"><a href=\"http:\/\/www.flickr.com\/photos\/66587650@N00\/376017813\"><img loading=\"lazy\" decoding=\"async\" title=\"1\/28\/07 - POSH - Los Angeles, Ca #5933\" src=\"http:\/\/farm1.static.flickr.com\/152\/376017813_f01837c75e_m.jpg\" alt=\"1\/28\/07 - POSH - Los Angeles, Ca #5933\" width=\"240\" height=\"180\" \/><\/a><\/dt>\n<dd class=\"wp-caption-dd zemanta-img-attribution\" style=\"font-size: 0.8em;\">Image by <a href=\"http:\/\/www.flickr.com\/photos\/66587650@N00\/376017813\">amayzun<\/a> via Flickr<\/dd>\n<\/dl>\n<\/div>\n<\/div>\n<ul>\n<li>Validate your code. Until it validates it&#8217;s not proper HTML.<\/li>\n<li>No tables. Unless it&#8217;s really tabular data, you don&#8217;t get to use it.<\/li>\n<li>No bed and breakfast. A lot of HTML is done in &lt;br&gt;, &lt;i&gt;, &lt;b&gt; and other tags that are meant to make things look certain way. Get rid of it.<\/li>\n<li>No anorexic anchors. Don&#8217;t use anchor placeholders for moving viewport around. New browsers can jump to an specific ID in page.<\/li>\n<li>Semantic classes. Don&#8217;t name your classes &#8220;blue&#8221; and &#8220;green&#8221;, but rather tell what they mean.<\/li>\n<\/ul>\n<p>Unfortunately, that&#8217;s not all:<\/p>\n<ul>\n<li>&lt;div&gt; and &lt;span&gt; are almost most important elements if you take a look how fast they appear in HTML standard. They&#8217;re defined as &#8220;generic language style containers&#8221;<\/li>\n<\/ul>\n<p>Wouldn&#8217;t it be great if we would get rid of them too? They really don&#8217;t tell us anything about the content that they hold.<\/p>\n<p>There are some exercises you can do:<\/p>\n<ul>\n<li>When you see a photo, you start thinking about the way you would express the image with <a class=\"zem_slink\" title=\"HTML element\" rel=\"wikipedia\" href=\"http:\/\/en.wikipedia.org\/wiki\/HTML_element\">HTML tags<\/a>.<\/li>\n<\/ul>\n<p>[long discussion about how to tag a number of different photos]<\/p>\n<div class=\"zemanta-img zemanta-action-dragged\" style=\"margin: 1em; float: right; display: block;\">\n<div>\n<dl class=\"wp-caption\">\n<dt class=\"wp-caption-dt\"><a href=\"http:\/\/www.flickr.com\/photos\/98215930@N00\/14870977\"><img decoding=\"async\" title=\"Gizmondo Babes\" src=\"http:\/\/farm1.static.flickr.com\/14\/14870977_c8c3a4f196_m.jpg\" alt=\"Gizmondo Babes\" \/><\/a><\/dt>\n<dd class=\"wp-caption-dd zemanta-img-attribution\" style=\"font-size: 0.8em;\">Image by <a href=\"http:\/\/www.flickr.com\/photos\/98215930@N00\/14870977\">TrojanDan<\/a> via Flickr<\/dd>\n<\/dl>\n<\/div>\n<\/div>\n<ul>\n<li>In <a class=\"zem_slink\" title=\"HTML 5\" rel=\"wikipedia\" href=\"http:\/\/en.wikipedia.org\/wiki\/HTML_5\">HTML5<\/a> you almost won&#8217;t need to use DIV and SPAN anymore as we get many new elements that give meaning to these things.<\/li>\n<\/ul>\n<ul>\n<li><em>If you use more then 40% of &lt;DIV&gt; and &lt;SPAN&gt; tags on your page, you&#8217;re probably doing something wrong.<\/em><\/li>\n<li>Lets use less elements. Instead of starting with elements, write content first.<\/li>\n<\/ul>\n<h6 class=\"zemanta-related-title\" style=\"font-size: 1em;\">Related articles by Zemanta<\/h6>\n<ul class=\"zemanta-article-ul\">\n<li class=\"zemanta-article-ul-li\"><a href=\"http:\/\/www.readwriteweb.com\/archives\/5_exciting_things_in_html_5.php\">5 Exciting Things to Look Forward to in HTML 5<\/a><\/li>\n<li class=\"zemanta-article-ul-li\"><a href=\"http:\/\/www.w3.org\/QA\/2008\/11\/html5-howto.html\">Learn How To Write HTML 5<\/a><\/li>\n<li class=\"zemanta-article-ul-li\"><a href=\"http:\/\/ajaxian.com\/archives\/this-week-in-html-5-e8\">This Week in HTML 5: Web Forms 2, Search, and more<\/a><\/li>\n<\/ul>\n<div class=\"zemanta-pixie\" style=\"margin-top: 10px; height: 15px;\"><a class=\"zemanta-pixie-a\" title=\"Zemified by Zemanta\" href=\"http:\/\/reblog.zemanta.com\/zemified\/90369f54-fbf6-4041-9039-95ba27f98f6e\/\"><img decoding=\"async\" class=\"zemanta-pixie-img\" style=\"border: medium none; float: right;\" src=\"http:\/\/img.zemanta.com\/reblog_e.png?x-id=90369f54-fbf6-4041-9039-95ba27f98f6e\" alt=\"Reblog this post [with Zemanta]\" \/><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Here are my notes from lecture by Marko Mrdjenovic: Jaz sem POSH, pa ti? at @kiberpipa @wwwh. What&#8217;s\u00a0 POSH and a short history? Image by Cayce Newell via Flickr Years and years ago (before 1999), we had &#8220;shinny happy tables&#8221;, everything in HTML that dealt with advanced layout had to be done in tables since [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[117,14],"tags":[296,306,633,631,632],"class_list":["post-701","post","type-post","status-publish","format-standard","hentry","category-conferences","category-tech","tag-faqs-help-and-tutorials","tag-html","tag-html-5","tag-html-element","tag-markup-languages"],"acf":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/posts\/701","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/comments?post=701"}],"version-history":[{"count":12,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/posts\/701\/revisions"}],"predecessor-version":[{"id":710,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/posts\/701\/revisions\/710"}],"wp:attachment":[{"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/media?parent=701"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/categories?post=701"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jurecuhalev.com\/blog\/wp-json\/wp\/v2\/tags?post=701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}