<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>BBProject.net &#187; absolute</title>
	<atom:link href="http://www.bbproject.net/tag/absolute/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.bbproject.net</link>
	<description>Programowanie, webmastering, informatyka</description>
	<lastBuildDate>Tue, 03 Aug 2010 08:22:56 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Co zrobić gdy reklama blokuje wyświetlanie strony?</title>
		<link>http://www.bbproject.net/2010/03/co-zrobic-gdy-reklama-blokuje-wyswietlanie-strony/</link>
		<comments>http://www.bbproject.net/2010/03/co-zrobic-gdy-reklama-blokuje-wyswietlanie-strony/#comments</comments>
		<pubDate>Tue, 09 Mar 2010 06:07:39 +0000</pubDate>
		<dc:creator>M@ster</dc:creator>
				<category><![CDATA[Webmastering]]></category>
		<category><![CDATA[absolute]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[optymalizacja]]></category>
		<category><![CDATA[position]]></category>
		<category><![CDATA[reklama]]></category>

		<guid isPermaLink="false">http://www.bbproject.net/?p=220</guid>
		<description><![CDATA[Otwieramy stronę internetową, widzimy nagłówek i czekamy&#8230; czekamy&#8230; po chwili pojawia się reklama a za nią interesująca nas treść. Brzmi znajomo? Zdecydowana większość systemów reklamowych opiera się na załączaniu zewnętrznego kodu JavaScript, który w przypadku wolnego serwera dostawcy reklam, może powodować niepotrzebne spowalnianie ładowania się naszej strony. O ile w sytuacji takich gigantów jak Google [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignleft size-thumbnail wp-image-224" title="Billboard" src="http://www.bbproject.net/wp-content/uploads/2010/02/billboard-160x122.jpg" alt="" width="160" height="122" />Otwieramy stronę internetową, widzimy nagłówek i czekamy&#8230; czekamy&#8230; po chwili pojawia się reklama a za nią interesująca nas treść. Brzmi znajomo?</p>
<p>Zdecydowana większość systemów reklamowych opiera się na załączaniu zewnętrznego kodu JavaScript, który w przypadku wolnego serwera dostawcy reklam, może powodować niepotrzebne spowalnianie ładowania się naszej strony. O ile w sytuacji takich gigantów jak <a href="https://www.google.com/adsense">Google AdSense</a> nie mamy się o co martwić, to przy korzystaniu z usług innych podmiotów czy też systemów pośredniczących (np.: <a href="http://www.openx.org">OpenX</a>), może warto zastanowić się jak pozbyć się tego problemu i nie opóźniać pokazania treści tylko przez reklamę. Zniecierpliwiony użytkownik naszej witryny może ją po prostu opuścić zanim zdąży cokolwiek zobaczyć.</p>
<p><span id="more-220"></span>Przedstawione rozwiązanie problemu jest stricte teoretyczne, gdyż docelowa implementacja zależy od konkretnego przypadku, a osoby które zajmują się tworzeniem stron internetowych na pewno będą wiedziały jak przenieść to na własny grunt.</p>
<p>Załóżmy hipotetyczną budowę naszej witryny w następującej postaci:</p>
<div style="margin: 10px auto; width: 300px;">
<div style="border: 2px solid #ff0000; padding: 10px; margin: 10px 0px; text-align: center;"><span style="color: #ff0000;">nagłówek</span></div>
<div style="border: 2px dotted #696969; padding: 10px; margin: 10px 0px; text-align: center;"><strong><span style="color: #696969;">reklama</span></strong></div>
<div style="border: 2px solid #1e90ff; padding: 10px; margin: 10px 0px; text-align: center;"><span style="color: #1e90ff;">treść</span></div>
</div>
<p>Przykładowy kod takiej witryny mógł by wyglądać w następujący sposób:</p>
<pre class="brush: xml">&lt;div id="header"&gt;&lt;/div&gt;
&lt;div id="advert"&gt;&lt;/div&gt;
&lt;div id="content"&gt;&lt;/div&gt;</pre>
<p>Jeśli nie chcemy aby warstwa reklamowa blokowała pojawienie się treści, wystarczy że przeniesiemy ją na sam koniec. Ktoś powie &#8211; ok, ale w tym wypadku reklama powędruje na dół strony. Musimy zatem zastosować pewną sztuczkę. Mianowicie, zwiększamy <strong>dolny margines</strong> warstwy nagłówka o wartość wysokości sekcji reklamowej, tak aby powstała pusta luka. Z kolei warstwę z reklamą, pozycjonujemy w sposób <strong>absolutny</strong> (<em>position: absolute;</em>) przy pomocy stylów, umieszczając ja w otrzymanej wnęcę.</p>
<pre class="brush: xml">&lt;div id="header" style="margin-bottom: 50px;"&gt;&lt;/div&gt;
&lt;div id="content"&gt;&lt;/div&gt;
&lt;div id="advert" style="position: absolute; top: 200px; height: 50px;"&gt;&lt;/div&gt;</pre>
<p>Tym sposobem, przeglądarka wyświetlając stronę, najpierw pokaże nagłówek, treść a dopiero na samym końcu reklamę &#8211; ale w odpowiednim miejscu. Jeśli ta z jakichś powodów nie będzie w stanie się wyświetlić (padnie serwer reklamy), to nie spowoduje to blokowania treści.</p>
<p>Oczywiście to co znajduje się pod reklamą, np.: stopka strony, nie pokaże się dopóki nie zostanie pobrana reklama, nie mniej, nie jest to tak istotny element w stosunku do treści po którą sięga odwiedzający witrynę.</p>
<p>Rozwiązania tego nie możemy zastosować w sytuacji w której odległość warstwy z reklamą jest zmienna w stosunku do początku strony, gdyż w tym momencie nie jesteśmy w stanie pozycjonować warstwy przy pomocy atrybutu <em>absolute</em>. Metodę tą stosuje z powodzeniem na dwóch swoich stronach i spisuje się znakomicie &#8211; <a href="http://www.cotozaplik.pl">cotozaplik.pl</a> oraz <a href="http://checksum.me">checksum.me</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.bbproject.net/2010/03/co-zrobic-gdy-reklama-blokuje-wyswietlanie-strony/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
