{"id":62,"date":"2006-11-12T23:19:09","date_gmt":"2006-11-12T21:19:09","guid":{"rendered":"http:\/\/www.eriz.pc-inside.org\/weblog\/2006\/11\/12\/moj-schiz-semantyka-imho\/"},"modified":"2007-04-23T15:06:30","modified_gmt":"2007-04-23T14:06:30","slug":"moj-schiz-semantyka-imho","status":"publish","type":"post","link":"https:\/\/eriz.pcinside.pl\/weblog\/moj-schiz-semantyka-imho-62.html","title":{"rendered":"M\u00f3j „schiz” – semantyka – IMHO"},"content":{"rendered":"

\nKt\u00f3rego\u015b razu trafi\u0142em na blog Riddle’a<\/a>. Kole\u015b porusza nawet niez\u0142e tematy dotycz\u0105ce projektowania www, s\u0105 to g\u0142\u00f3wnie takie, kt\u00f3re poruszaj\u0105 ich budow\u0119, to, co jest pod mask\u0105. Par\u0119 miesi\u0119cy temu lizn\u0105\u0142em troch\u0119 XHTML-a i CSS-a + semantyczny JS. I skupi\u0119 si\u0119 w tym miejscu na przymiotniku, kt\u00f3ry postawi\u0142em przy akronimie JS<\/acronym>. Nie dotyczy on bynajmniej wy\u0142\u0105cznie JavaScriptu. Do rzeczy: wi\u0119kszo\u015b\u0107 stron, na kt\u00f3re mo\u017cna natkn\u0105\u0107 si\u0119 w internecie jest napisana „aby by\u0142o”. Gdy kt\u00f3ra\u015b ze stron przyk\u0142uje moj\u0105 uwag\u0119 wygl\u0105dem, b\u0105d\u017a dzia\u0142aniem: CTRL+F3 (czyli „poka\u017c \u017ar\u00f3d\u0142o” w Operze) i patrz\u0119, co jest pod mask\u0105. Jak\u017ce cz\u0119sto si\u0119 rozczarowywuj\u0119, gdy widz\u0119 \u015bmietnik wci\u015bni\u0119ty w tabelki.\n<\/p>\n

<\/p>\n

\nJednak nie skupi\u0119 si\u0119 tu na tabelkach, bo to jest temat na ca\u0142\u0105 seri\u0119 artyku\u0142\u00f3w. Wracaj\u0105c, cz\u0119sto mo\u017cna si\u0119 natkn\u0105\u0107 na konstrukcje typu onclick<\/em>, onmouseover<\/em> czy style<\/em>. S\u0105 to rozwi\u0105zania nieekonomiczne. Dlaczego?\n<\/p>\n

    \n
  1. wprowadzanie zmian w layoucie strony:<\/strong> Nie b\u0119d\u0119 si\u0119 o tym rozpisywa\u0142, bo Riddle ju\u017c to zrobi\u0142<\/a>,<\/li>\n
  2. wydajno\u015b\u0107 przy otwieraniu stron:<\/strong> plik ze skryptem\/stylami przegl\u0105darka pobiera tylko raz, co owocuje znacznym zmniejszeniem dokumentu wynikowego (XHTML) i zmniejszeniem zu\u017cycia limit\u00f3w transferowych (bo, jak ju\u017c wcze\u015bniej wspomnia\u0142em, pliki JS\/CSS zosta\u0142y pobrane i siedz\u0105 sobie w cache’u<\/abbr>),<\/li>\n
  3. idea semantyki:<\/strong> panuje \u0142ad i porz\u0105dek; wszystko jest na swoim miejscu<\/li>\n<\/ol>\n

    \nZe wspomnianym wcze\u015bniej wpisem Riddle’a zgodz\u0119 si\u0119 w 90%. A gdzie podzia\u0142o si\u0119 10%? W\u0142a\u015bnie… Riddle napisa\u0142:\n<\/p>\n

    \n

    Umieszczaj\u0105c link wraz z atrybutem onclick robimy tak samo \u017ale, jak umieszczaj\u0105c style liniowe poprzez style=””. Je\u015bli uwa\u017casz, \u017ce mo\u017cna zrobi\u0107 w niekt\u00f3rych miejscach wyj\u0105tek i okre\u015bli\u0107 prezentacj\u0119 w strukturze dokumentu, mo\u017cliwe \u017ce dojdziesz do tych samych wniosk\u00f3w je\u015bli chodzi o JavaScript. Czasem wszak\u017ce potrzebujemy jeden ma\u0142y onclick w jakim\u015b zapomnianym miejscu strony. Moim zdaniem jednak warto podej\u015b\u0107 do zagadnienia nowocze\u015bnie i odrzuci\u0107 on\u2026<\/em> raz na zawsze.<\/p>\n<\/blockquote>\n

    Owszem, z opini\u0105 na temat liniowego osadzania skrypt\u00f3w JS si\u0119 zgodz\u0119, to ze stylami ju\u017c nie za bardzo. Dlaczego? Mamy – powiedzmy – tabelki, ale z danymi, kt\u00f3re powinny si\u0119 w niej znale\u017a\u0107 (np. om\u00f3wienie jakich\u015b statystyk, itp.). Je\u015bli tych statystyk jest mas\u0119 i to w r\u00f3\u017cnych uk\u0142adach, to arkusz styl\u00f3w<\/strong> niepotrzebnie b\u0119dzie puchn\u0105\u0107. Oczywi\u015bcie mam tu na uwadz\u0119 rozmiary wzgl\u0119dne – tu s\u0105 to procenty. Bardzo prosty przyk\u0142ad: szeroko\u015b\u0107 kolumn we wspomnianych przeze mnie tabelkach. Przecie\u017c niezale\u017cnie od szeroko\u015bci ekranu przeskaluj\u0105 si\u0119 one bez problemu. Takie same proporcje zostan\u0105 zachowane na monitorze komputera, projektorze czy ekranie telefonu kom\u00f3rkowego. Owszem, mo\u017cna wszystko wcisn\u0105\u0107 do arkusza, gdy jest kilka tabel, ale co zrobi\u0107, gdy ich ilo\u015b\u0107 uro\u015bnie do kilkudziesi\u0119ciu? Jak to mawiaj\u0105: wszystko jest dla ludzi, ale z umiarem<\/cite>, wi\u0119c nie przesadzajmy… W tym wypadku trzeba si\u0119 pokierowa\u0107 rozumem<\/strong>. Nie b\u0105d\u017amy pedantyczni jak Anglicy<\/cite> – kto\u015b kiedy\u015b napisa\u0142 na blogu po\u015bwi\u0119conym kwestiom projektowania stron.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Kt\u00f3rego\u015b razu trafi\u0142em na blog Riddle’a. Kole\u015b porusza nawet niez\u0142e tematy dotycz\u0105ce projektowania www, s\u0105 to g\u0142\u00f3wnie takie, kt\u00f3re poruszaj\u0105 ich budow\u0119, to, co jest pod mask\u0105. Par\u0119 miesi\u0119cy temu lizn\u0105\u0142em troch\u0119 XHTML-a i CSS-a + semantyczny JS. I skupi\u0119 si\u0119 w tym miejscu na przymiotniku, kt\u00f3ry postawi\u0142em przy akronimie JS. Nie dotyczy on bynajmniej […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[77],"_links":{"self":[{"href":"https:\/\/eriz.pcinside.pl\/weblog\/wp-json\/wp\/v2\/posts\/62"}],"collection":[{"href":"https:\/\/eriz.pcinside.pl\/weblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eriz.pcinside.pl\/weblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eriz.pcinside.pl\/weblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eriz.pcinside.pl\/weblog\/wp-json\/wp\/v2\/comments?post=62"}],"version-history":[{"count":0,"href":"https:\/\/eriz.pcinside.pl\/weblog\/wp-json\/wp\/v2\/posts\/62\/revisions"}],"wp:attachment":[{"href":"https:\/\/eriz.pcinside.pl\/weblog\/wp-json\/wp\/v2\/media?parent=62"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eriz.pcinside.pl\/weblog\/wp-json\/wp\/v2\/categories?post=62"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eriz.pcinside.pl\/weblog\/wp-json\/wp\/v2\/tags?post=62"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}