<?php

include '../../includes/masterlist.php';
$letterarray = array("a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m");

?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" >
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
	<meta name="author" content="Dave Shea" />
    <meta name="description" content="Prezentacja mo¿liwo¶ci projektowania z wykorzystaniem CSS.">
	<meta name="description" content="A demonstration of what can be accomplished visually through CSS-based design." />
	<meta name="robots" content="all" />
    <meta name="translation" content="Polish, Pawel Bober">

	<title>css Zen Garden: Piêkno projektowania za pomoc± CSS</title>

	<!-- aby poprawiæ niewidziany Flash niezdefiniowanej zawarto¶ci. http://www.bluerobot.com/web/css/fouc.asp -->
	<script type="text/javascript"></script>
	
	<style type="text/css" title="currentStyle">
		@import "<?php echo $loadCSS; ?>";
	</style>
<?php

if($isNN4) {
	echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"";
	echo $isNN4;
	echo "\" />";
}

?>
	<link rel="Shortcut Icon" type="image/x-icon" href="http://www.csszengarden.com/favicon.ico" />	
	<link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.csszengarden.com/zengarden.xml" />
</head>

<!--


	Ten dokument xhtml jest przepe³niony tagami aby zapewniæ designerowi maksimum elastyczno¶ci.
	Jest tu wiêcej klas i dodatkowych tagów ni¿ potrzeba, co w rzeczywisto¶ci mo¿e byæ bardziej 
	prawdopodobne ni¿ by siê mog³o wydawaæ.
	
	Jednak¿e my¶lê ¿e wszyscy siê zgodzimy z tym, ¿e nawet tak zbudowana strona jest lepsza ni¿ zbudowana
	z pomoc± tabelek.


-->


<body id="css-zen-garden">

<div id="container">
	<div id="intro">
		<div id="pageHeader">
			<h1><span>css Zen Garden</span></h1>
			<h2><span>Piêkno projektowania za pomoc± <acronym title="Cascading Style Sheets">CSS</acronym></span></h2>
		</div>

		<div id="quickSummary">
			<p class="p1"><span>Oto prezentacja mo¿liwo¶ci projektowania z wykorzystaniem <acronym title="Cascading Style Sheets">CSS</acronym>. Wybierz arkusz stylu z listy aby za³adowaæ go do tej strony.</span></p>
			<p class="p2"><span>Pobierz przyk³adowe pliki <a href="zengarden-sample.html" title="Kod HTML strony, nie modyfikowaæ.">html</a> i <a href="zengarden-sample.css" title="Przyk³adowy kod CSS, mo¿na zmieniaæ.">css</a></span></p>
		</div>

		<div id="preamble">
			<h3><span>Droga do O¶wiecenia.</span></h3>
			<p class="p1"><span>Za¶miecanie ciemnej i ponurej drogi le¿y w przesz³ych reliktach w³a¶ciwych dla przegl±darek tagów, niekompatybilnych <acronym title="Document Object Model">DOM</acronym>ów i niepe³nego wsparcia dla <acronym title="Cascading Style Sheets">CSS</acronym>.</span></p>
			<p class="p2"><span>Dzi¶ musimy oczy¶ciæ umys³y z tych przesz³ych praktyk. O¶wiecenie sieci sta³o siê faktem dziêki niestrudzonym wysi³kom ludzi z ><acronym title="World Wide Web Consortium">W3C</acronym>, <acronym title="Web Standards Project">WaSP</acronym> czy twórcom g³ównych przegl±darek internetowych.</span></p>
			<p class="p3"><span>Ogród css Zen zachêca do chwili relaksu i zadumy nad wa¿nymi lekcjami mistrzów. Patrz z jasno¶ci±. Naucz siê korzystaæ z ogólnie uznanych (albo ju¿ nied³ugo) technik w nowym i o¿ywczym stylu. Zjednocz siê z sieci±</span></p>
		</div>
	</div>

	<div id="supportingText">
		<div id="explanation">
			<h3><span>O co w tym chodzi?</span></h3>
			<p class="p1"><span>Z pewno¶ci± istnieje potrzeba aby <acronym title="Cascading Style Sheets">CSS</acronym> zosta³
            traktowany powa¿nie przez artystów grafików. Ogród Zen istnieje by ekscytowaæ, inspirowaæ i zachêcaæ do udzia³u w tym przedsiêwziêciu. Na pocz±tek przejrzyj istniej±ce ju¿ wystroje z listy na stronie. Klikaj±c za³adujesz arkusz stylu we w³a¶nie t± stronê. Kod pozostanie ten sam, jedyne co siê zmieni to zewnêtrzny arkusz z plikiem .css. Tak, naprawdê.</span></p>
			<p class="p2"><span><acronym title="Cascading Style Sheets">CSS</acronym> pozwala na ca³kowit± kontrolê nad stylem i dokumentem hipertekstowym. Jedynym sposobem na zilustrowanie tego tak by podekscytowaæ ludzi jest demonstracja jakim <acronym title="Cascading Style Sheets">CSS</acronym> jest naprawdê , pa³eczka jest w rêkach tych - zdolnych zmieniæ strukturê w prawdziwe piêkno. Do dzi¶ wiêkszo¶æ przyk³adów zgrabnych trików i haczków zosta³o
            zademnonstrowane przez strukturystów i koderów. Projektanci tak¿e powinni zaistnieæ. To siê musi wreszcie zmieniæ.</span></p>
		</div>

		<div id="participation">
			<h3><span>Uczestnictwo</span></h3>
			<p class="p1"><span>Tak, ale jedynie artystów grafików. Je¿eli modyfikujesz t± stronê to potrzebne ci bêd± bardzo rozwiniête umiejêtno¶ci operowania <acronym title="Cascading Style Sheets">CSS</acronym> jednak przyk³adowe pliki s± opatrzone komentarzem tak ¿e nawet nowicjusze mog± u¿ywaæ ich jako punktów wyj¶ciowych. Zajrzyj do <A title="Lista zasobów CSS" href="http://www.mezzoblue.com/zengarden/resources/">Przewodnika po zasobach <ACRONYM title="Cascading Style Sheets">CSS</ACRONYM></A> po
            zaawansowane tutoriale i triki przydatne do pracy z <acronym title="Cascading Style Sheets">CSS</acronym>.</span></p>
			<p class="p2"><span>Mo¿esz modyfikowaæ arkusz stylów jak tylko chcesz ale nie sam <acronym title="HyperText Markup Language">HTML</acronym>. Z pocz±tku mo¿e siê to wydawaæ zniechêcaj±ce zw³aszcza je¿eli wcze¶niej nigdy nie pracowa³e¶ w ten sposób ale zajrzyj tylko to wymienionych linków aby nauczyæ siê czego¶ wiêcej i wykorzystaj przyk³adowe pliki jako przewodnik.</span></p>
			<p class="p3"><span>Pobierz przyk³adowe pliki <a href="zengarden-sample.html" title="Kod HTML strony, nie modyfikowaæ.">html</a> i <a href="zengarden-sample.css" title="Przyk³adowy kod CSS, mo¿na zmieniaæ.">css</a> do pracy na lokalnym dysku. Jak tylko ukoñczysz swoje dzie³o sztuki (tylko prosze nie przesy³aæ nie do koñca skoñcznych prac) wrzuæ swoj plik .css na serwer gdzie posiadasz konto. Pode¶lij nam link do pliku i je¿eli zgodzimy siê go wykorzystaæ podepniemy powi±zane z nim grafiki. <a href="http://www.mezzoblue.com/zengarden/sendfile.asp" title="U¿yj formularza kontaktowego aby przes³aæ swój plik CSS.">Pode¶lij nam link</A> do pliku i je¿eli zgodzimy siê go wykorzystaæ podepniemy powi±zane z nim grafiki. Propozycje fina³owe umieszczone zostan± na naszym serwerze.</span></p>
			<p class="p4"><span>uaktualnienie: Szukam t³umaczy. Je¿eli jeste¶ bieg³y w angielskim i innym jêzyku oto inny sposób na zaanga¿owanie siê w projekt. <a href="http://www.mezzoblue.com/contact/" title="Wy¶lij nam e-mail wymieniaj±c jêzyki, w których jeste¶ bieg³y.">Proszê o kontakt</a> w sprawie detali.</span></p>
		</div>

		<div id="benefits">
			<h3><span>Korzy¶ci</span></h3>
			<p class="p1"><span>Po co uczestniczyæ w projekcie? Dla uznania, inspiracji i zasobów do których mo¿emy siê wszyscy odwo³aæ projektuj±c w <ACRONYM title="Cascading Style Sheets">CSS</ACRONYM>. Co¶ takiego jest ogromnie potrzebne, nawet dzi¶. Coraz wiêcej powa¿nych witryn poprawi³o siê, niestety nie wszystkie. Kiedy¶ ta galeria bêdzie historyczn± osobliwo¶ci±; dzieñ ten jednak jeszcze nie nadszed³.</span></p>
		</div>

		<div id="requirements">
			<h3><span>Wymagania</span></h3>
			<p class="p1"><span>Chcieliby¶my ogl±daæ tak wiele <acronym title="Cascading Style Sheets, version 1">CSS1</acronym> jak to tylko mo¿liwe. <acronym title="Cascading Style Sheets, version 2">CSS2</acronym> 
            powinien byæ ograniczany jedynie do elementów ogólnie obs³ugiwanych. Ogród Css Zen opiera siê na funkcjonalnym, praktycznym <acronym title="Cascading Style Sheets">CSS</acronym> a nie na najnowszych trikach, dostêpnych jedynie dla 2% u¿ytkowników internetu. Jedynym powa¿nym warunkiem jest by twój <acronym title="Cascading Style Sheets">CSS</acronym> spe³nia³ standardy.</span></p>
			<p class="p2"><span>Niestety, projektuj±c w ten sposób ods³aniamy skazy ró¿nych implementacji <acronym title="Cascading Style Sheets">CSS</acronym>. Ró¿ne przegl±darki wy¶wietlaj± ten sam <acronym title="Cascading Style Sheets">CSS</acronym> nawet spe³niaj±cy standardy w ró¿ny sposób, co staje siê niezno¶ne gdy jaka¶ poprawka prowadzi do powstania innego problemu. Zajrzyj na stronê z <a href="http://www.mezzoblue.com/zengarden/resources.asp" title="Lista zasobów CSS">zasobami</a> gdzie znajdziesz informacje na temat poprawek. Zgodno¶æ ze wszystkimi przegl±darkami to wci±¿ marzenie ¶ciêtej g³owy i dlatego nie oczekujemy aby¶ tworzy³ perfekcyjny co do piksela kod na wszystkie platformy. Ale PRZETEJSTUJ go na czym tylko mo¿esz. Je¿eli twoja praca nie bêdzie dzia³a³a na przynajmniej IE5+/Win i Mozilli (czyli u ponad 90% u¿ytkowników) s± szanse ¿e nie zaakceptujemy jej.</span></p>
			<p class="p3"><span>Prosimy przesy³aæ tylko oryginalne prace. Respektujcie prawa autorskie. Proszê ograniczyæ materia³ wzbudzaj±cy obiekcje do minimum; pe³na smaku golizna zostanie przyjêta, czysta pornografia bêdzie odrzucana.</span></p>
			<p class="p4"><span>To zarówno æwiczenie do nauki jak i demonstracja. Zachowacie prawa autorskie do swoich grafik ale prosimy o wypuszczanie swojego <ACRONYM title="Cascading Style Sheets">CSS</ACRONYM> z licencja Creative Commons identycz± <a href="http://creativecommons.org/licenses/sa/1.0/" title="Poka¿ informacje o licencji Zen Garden.">jak tej strony</a> tak by inni mogli uczyæ siê z twojej pracy.</span></p>
			<p class="p5"><span>Szeroko¶æ pasma ³askawie darowana przez <a href="http://www.mediatemple.net/" lang="en">mediatemple</a></span></p>
		</div>

		<div id="footer">
			<a href="http://validator.w3.org/check/referer" title="Sprawd¼ poprawno¶æ XHTML">xhtml</a> &nbsp; 
			<a href="http://jigsaw.w3.org/css-validator/check/referer" title="Sprawd¼ poprawno¶æ CSS">css</a> &nbsp; 
			<a href="http://creativecommons.org/licenses/by-nc-sa/1.0/" title="Poka¿ detale licencji tej strony - Creative Commons.">cc</a> &nbsp;
			<a href="http://bobby.watchfire.com/bobby/bobbyServlet?URL=http%3A%2F%2Fwww.mezzoblue.com%2Fzengarden%2F&output=Submit&gl=sec508&test=" title="Sprawd¼ dostêpno¶æ tej strony w ¶wietle paragrafu 508 U.S">508</a> &nbsp;
			<a href="http://bobby.watchfire.com/bobby/bobbyServlet?URL=http%3A%2F%2Fwww.mezzoblue.com%2Fzengarden%2F&output=Submit&gl=wcag1-aaa&test=" title="Sprawd¼ dostêpno¶æ tej strony na podstawie WAI Content Accessibility Guidelines 1">aaa</a>
		</div>

	</div>

	
	<div id="linkList">
		<!--dodatkowy div dla elastyczno¶ci - ta lista bêdzie zapewne najwiêkszym trikem jakim siê zajmiecie -->
		<div id="linkList2">

		<!-- Je¿eli zastanawiacie siê nad dodatkowym &nbsp; na koñcu linku, to sztuczka by spe³niæ stadardy WCAG 1 Accessibility. -->
		<!-- Nie lubiê tego ale, to ma byæ æwiczenie wizualne. To kompromis. -->
			<div id="lselect">
				<h3 class="select"><span>Wybierz projekt:</span></h3>
				<ul>
<?php
					$c = 0;
					for ($a = ($listStart + 1); $a <= $listEnd; $a++) {
						$b = $listEnd - $c;
						$d = $letterarray[$c];
						$tempLink = linkMe($filename[$b]);
						echo "\t\t\t\t\t";
						echo "<li><a href=\"?cssfile=/${tempLink}/${tempLink}.css&amp;page=${thisPage}\" title=\"AccessKey: ${d}\" accesskey=\"${d}\">${styleName[$b]}</a> - <a href=\"${styleURL[$b]}\" class=\"c\">${styleCreator[$b]}</a></li>";
						echo "\n";
						$c = $c + 1;
					}
?>
				</ul>
			</div>

			<!--
				To siê nie poka¿e dopóki archiwa siê nie zape³ni±. Ale zaplanuj to. Je¿eli strasznie
				pozmieniasz sekcjê 'select a design' h3, tak¿e to bedziesz musia³ dostosowaæ.
			<div id="lfavorites">
				<h3 class="favorites"><span>Favorites:</span></h3>
				<ul>
					<li><a href="#">filename</a> by <a href="" class="c">submitter</a>&nbsp;</li>
					<li><a href="#">filename</a> by <a href="" class="c">submitter</a>&nbsp;</li>
				</ul>
			</div>
			-->

			<div id="larchives">
				<h3 class="archives"><span>Archiwa:</span></h3>
				<ul>
<?php
					
					$forward = $thisPage + 1;
					$backward = $thisPage - 1;
					
					if ($listStart >= 1) {
						echo "\t\t\t\t\t";
						echo "<li><a href=\"${thisFile}?cssfile=${currentDesign}&amp;page=${forward}\" title=\"Poka¿ nastêpny zestaw projektów. AccessKey: n\" accesskey=\"n\"><span class=\"accesskey\">n</span>astêpne projekty &raquo;</a></li>\n";
					}

					if ($thisPage >= 1) {
						echo "\t\t\t\t\t";
						echo "<li><a href=\"/${thisFile}?cssfile=${currentDesign}&amp;page=${backward}\" title=\"Poka¿ poprzedni zestaw projektów. AccessKey: p\" accesskey=\"p\">&laquo; <span class=\"accesskey\">p</span>oprzednie projekty</a></li>\n";
					}
?>
					<li><a href="http://www.mezzoblue.com/zengarden/alldesigns/" title="Poka¿ wszystkie projekty. AccessKey: w" accesskey="w">Poka¿ wszystkie projekty</a></li>
				</ul>
			</div>
			
			<div id="lresources">
				<h3 class="resources"><span>Zasoby:</span></h3>
				<ul>
<?php
					echo "\t\t\t\t\t";
					echo "<li><a href=\"${currentDesign}\" title=\"Poka¿ plik ¼ród³owy CSS obecnie ogl±danego projektu, AccessKey: v\" accesskey=\"v\">Poka¿ <acronym title=\"Cascading Style Sheets\">CSS</acronym> tego projektu.</a></li>";
?>
					<li><a href="http://www.mezzoblue.com/zengarden/resources.asp" title="Linki do wspania³ych stron z informacjami o CSS. AccessKey: r" accesskey="r"><acronym title="Cascading Style Sheets">CSS</acronym> <span class="accesskey"></span>Zasoby</a></li>
					<li><a href="http://www.mezzoblue.com/zengarden/faq.asp" title="Lista czêsto zadawanych pytañ (FAQ). AccessKey: q" accesskey="q"><acronym title="Frequently Asked Questions">FA<span class="accesskey">Q</span></acronym></a>&nbsp;</li>
					<li><a href="http://www.mezzoblue.com/zengarden/sendfile.asp" title="Prze¶lij swój CSS. AccessKey: s" accesskey="s"><span class="accesskey"></span>Prze¶lij projekt</a></li>
					<li><a href="http://www.mezzoblue.com/zengarden/translations/" title="Wy¶wietl t³umaczenia strony. AccessKey: t" accesskey="t"><span class="accesskey">T</span>³umaczenia</a></li>
				</ul>
			</div>
		</div>
	</div>


</div>

<!-- Oto dodatkowe divy/spany mog± byæ u¿ywane do pod³±czenia jakiej¶ symboliki (obrazków itp.). -->
<!-- Dodaj obrazek t³a do ka¿dego i u¿yj width i height aby kontrolowaæ rozmiar, rozmie¶æ za pomoc± absolute positioning -->
<!-- Istnieje raczej chory bug przesuniêcia koloru transparentnych GIFów w Netscape 6/7 i Mozilla v1.0 up to v1.3 (gdzie zosta³ usuniêty),
		a wiec przetestuj swój kod na tych przegl±darkach. -->
<div id="extraDiv1"><span></span></div><div id="extraDiv2"><span></span></div><div id="extraDiv3"><span></span></div>
<div id="extraDiv4"><span></span></div><div id="extraDiv5"><span></span></div><div id="extraDiv6"><span></span></div>

</body>
</html>