diff options
Diffstat (limited to 'files/pl/web/guide')
| -rw-r--r-- | files/pl/web/guide/ajax/index.html | 23 | ||||
| -rw-r--r-- | files/pl/web/guide/ajax/na_początek/index.html | 221 | ||||
| -rw-r--r-- | files/pl/web/guide/api/index.html | 25 | ||||
| -rw-r--r-- | files/pl/web/guide/css/kolumny_css3/index.html | 65 | ||||
| -rw-r--r-- | files/pl/web/guide/css/sprawdzanie_media_queries/index.html | 116 | ||||
| -rw-r--r-- | files/pl/web/guide/graphics/index.html | 41 | ||||
| -rw-r--r-- | files/pl/web/guide/html/editable_content/index.html | 216 | ||||
| -rw-r--r-- | files/pl/web/guide/index.html | 55 | ||||
| -rw-r--r-- | files/pl/web/guide/liczniki_css/index.html | 86 | ||||
| -rw-r--r-- | files/pl/web/guide/performance/index.html | 14 |
10 files changed, 862 insertions, 0 deletions
diff --git a/files/pl/web/guide/ajax/index.html b/files/pl/web/guide/ajax/index.html new file mode 100644 index 0000000000..c8f03c5f20 --- /dev/null +++ b/files/pl/web/guide/ajax/index.html @@ -0,0 +1,23 @@ +--- +title: AJAX +slug: Web/Guide/AJAX +tags: + - AJAX + - Wszystkie_kategorie +translation_of: Web/Guide/AJAX +--- +<p> </p> +<p><span>"Getting Started" box, if there is no "Getting Started" article yet written, should be populated with another featurearticle or tutorial.</span></p> +<div class="callout-box"><strong><a href="/pl/AJAX/Na_początek" title="pl/AJAX/Na_początek">Na początek</a></strong><br> +Wprowadzenie do AJAX-a.</div> +<div> +<p><strong>AJAX (ang. <em>Asynchronous JavaScript and XML</em>, asynchroniczny JavaScript i XML)</strong> nie jest technologią sam w sobie, lecz terminem określającym "nowe" podejście do jednoczesnego wykorzystania takich istniejących technologii razem, jak: <a href="/pl/HTML" title="pl/HTML">HTML</a> lub <a href="/pl/XHTML" title="pl/XHTML">XHTML</a>, <a href="/pl/CSS" title="pl/CSS">kaskadowe arkusze stylów</a>, <a href="/pl/JavaScript" title="pl/JavaScript">JavaScript</a>, <a href="/pl/DOM" title="pl/DOM">obiektowy model dokumentu</a>, <a href="/pl/XML" title="pl/XML">XML</a>, <a href="/pl/XSLT" title="pl/XSLT">XSLT</a> oraz <a href="/pl/XMLHttpRequest" title="pl/XMLHttpRequest">obiekt XMLHttpRequest</a>. Dzięki modelowi AJAX, aplikacje sieciowe są w stanie dokonywać szybkich, przyrostowych aktualizacji w interfejsie użytkownika bez potrzeby przeładowywania całej strony WWW. W efekcie aplikacja wydaje się szybsza i lepiej reaguje na akcje użytkownika.</p> +</div> +<table class="topicpage-table"> <tbody> <tr> <td> <h4 id="Dokumentacja"><a href="/Special:Tags?tag=AJAX&language=pl" title="Special:Tags?tag=AJAX&language=pl">Dokumentacja</a></h4> <dl> <dt><a href="/pl/AJAX/Na_początek" title="pl/AJAX/Na_początek">Na początek</a></dt> <dd><small>Ten artykuł prowadzi czytelnika przez podstawy AJAX-u i podaje dwa proste przykłady, na początek.</small></dd> </dl> <dl> <dt><a class="external" href="http://www.adaptivepath.com/publications/essays/archives/000385.php">Ajax: Nowe podejście do aplikacji sieciowych</a></dt> <dd><small>Jesse James Garrett z <a class="external" href="http://www.adaptivepath.com">adaptive path</a> napisał ten artykuł w lutym 2005 roku. Przedstawia w nim AJAX i jemu pokrewne koncepcje.</small></dd> </dl> <dl> <dt><a class="external" href="http://www.onlamp.com/pub/a/onlamp/2005/05/19/xmlhttprequest.html">A Simpler Ajax Path</a></dt> <dd><small>"Okazuje się że, wykorzystanie obiektu XMLHttpRequest w celu uczynienia aplikacji sieciowej bardziej interaktywną bez rezygnowania z tradycyjnych rozwiązań, takich jak formularze służące pobieraniu danych od użytkownika, nie musi być wcale takie trudne."</small></dd> </dl> <dl> <dt><a class="external" href="http://www.contentwithstyle.co.uk/Articles/38/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps">Fixing the Back Button and Enabling Bookmarking for AJAX Apps</a></dt> <dd><small>Mike Stenhouse opisuje kilka sposobów na poradzenie sobie podczas tworzenia aplikacji AJAX z problemamami dotyczącymi przycisku Wstecz i zakładek.</small></dd> </dl> <dl> <dt><a class="external" href="http://alexbosworth.backpackit.com/pub/67688">Ajax Mistakes</a></dt> <dd><small>Alex Bosworth pisze o błędach popełnianych przez programistów tworzących aplikacje w AJAX-ie. </small></dd> </dl> <p><span><a href="/Special:Tags?tag=AJAX&language=pl" title="Special:Tags?tag=AJAX&language=pl">Pokaż wszystkie...</a></span></p> </td> <td> <h4 id="Spo.C5.82eczno.C5.9B.C4.87">Społeczność</h4> <ul> <li>Obejrzyj fora Mozilli...</li> </ul> <p>{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}</p> <h4 id="Narz.C4.99dzia">Narzędzia</h4> <ul> <li><strong><a class="external" href="http://www.ajaxlines.com">Tutorials, Resources and Toolkits</a></strong></li> <li><a class="external" href="http://www.ajaxprojects.com">Toolkits and frameworks</a></li> <li><a class="external" href="http://blog.monstuff.com/archives/000252.html">AJAX Debugging Tool</a></li> <li><a class="external" href="http://www.osflash.org/doku.php?id=flashjs">Flash/AJAX Integration Kit</a></li> <li><a class="external" href="http://xkr.us/code/javascript/XHConn/">A Simple XMLHTTP Interface Library</a></li> </ul> <p><span><a href="/Special:Tags?tag=AJAX:Narzędzia&language=pl" title="Special:Tags?tag=AJAX:Narzędzia&language=pl">Pokaż wszystkie...</a></span></p> <h4 id="Przyk.C5.82ady">Przykłady</h4> <ul> <li><a class="external" href="http://www.ajaxlines.com/ajax/stuff/article/ajax_poller_script.php">AJAX poller script</a></li> <li><a class="external" href="http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=9">Ajax Chat Tutorial</a></li> <li><a class="external" href="http://www.ajaxlines.com/ajax/stuff/article/ajax_toybox.php">Ajax Toybox</a></li> <li><a class="external" href="http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=13">RSS Ticker with AJAX</a></li> <li><a class="external" href="http://www.ajaxlines.com/ajax/stuff/article/ajax_login_system_using_xmlhttprequest.php">AJAX Login System using XMLHttpRequest</a></li> <li><a class="external" href="http://www.thinkvitamin.com/features/ajax/create-your-own-ajax-effects">Create your own Ajax effects</a></li> <li><a class="external" href="http://codinginparadise.org/weblog/2005/08/ajax-creating-huge-bookmarklets.html">AJAX: Creating Huge Bookmarklets</a></li> <li><strong><a class="external" href="http://www.ajaxprojects.com/ajax/projects/Cool_AJAX_sites">Cool Ajax Sites</a></strong></li> </ul> <h4 id="Powi.C4.85zane_tematy">Powiązane tematy</h4> <dl> <dd><a href="/pl/HTML" title="pl/HTML">HTML</a>, <a href="/pl/XHTML" title="pl/XHTML">XHTML</a>, <a href="/pl/CSS" title="pl/CSS">CSS</a>, <a href="/pl/DOM" title="pl/DOM">DOM</a>, <a href="/pl/JavaScript" title="pl/JavaScript">JavaScript</a>, <a href="/pl/XML" title="pl/XML">XML</a>, <a href="/pl/XMLHttpRequest" title="pl/XMLHttpRequest">XMLHttpRequest</a>, <a href="/pl/XSLT" title="pl/XSLT">XSLT</a>, <a href="/pl/DHTML" title="pl/DHTML">DHTML</a></dd> </dl> <h4 id="Wybrane_tematy">Wybrane tematy</h4> <ul> <li><a href="/pl/AJAX/Na_początek" title="pl/AJAX/Na_początek">Pierwsze kroki z AJAX-em</a></li> </ul> </td> </tr> </tbody> +</table> +<p><span>Categories</span></p> +<p><span>Interwiki Language Links</span></p> +<p> </p> +<p> </p> + +<p>{{ languages( { "ca": "ca/AJAX", "cs": "cs/AJAX", "en": "en/AJAX", "es": "es/AJAX", "fr": "fr/AJAX", "it": "it/AJAX", "ja": "ja/AJAX", "ko": "ko/AJAX", "nl": "nl/AJAX", "pt": "pt/AJAX", "ru": "ru/AJAX", "zh-cn": "cn/AJAX", "zh-tw": "zh_tw/AJAX" } ) }}</p> diff --git a/files/pl/web/guide/ajax/na_początek/index.html b/files/pl/web/guide/ajax/na_początek/index.html new file mode 100644 index 0000000000..1e4a4ec491 --- /dev/null +++ b/files/pl/web/guide/ajax/na_początek/index.html @@ -0,0 +1,221 @@ +--- +title: Na początek +slug: Web/Guide/AJAX/Na_początek +tags: + - AJAX + - Wszystkie_kategorie +translation_of: Web/Guide/AJAX/Getting_Started +--- +<p> +</p><p>Ten artykuł pozwoli Ci poznać podstawy technologii AJAX oraz poda dwa proste, gotowe do użycia przykłady. +</p> +<h3 id="Czym_jest_AJAX.3F" name="Czym_jest_AJAX.3F"> Czym jest AJAX? </h3> +<p>AJAX (<i>Asynchronous JavaScript and XML</i>) jest niedawno ukutą nazwą na dwie potężne cechy przeglądarek WWW, które, choć dostępne od lat, były pomijane przez wielu autorów stron, aż do niedawna, gdy na rynku ukazały się takie aplikacje, jak Gmail, Google Suggest i Google Maps. +</p><p>Dzięki tym cechom możesz: +</p> +<ul><li> wysyłać zapytania do serwera bez przeładowywania strony, +</li><li> parsować i pracować z dokumentami XML. +</li></ul> +<p>Termin AJAX jest akronimem. <strong>A</strong> pochodzi od <em>"asynchroniczny"</em>, co znaczy, że możesz wysyłać zapytania HTTP do serwera i robić inne rzeczy w trakcie oczekiwania na odpowiedź. <strong>JA</strong> pochodzi od <em>"JavaScript"</em>, a <strong>X</strong> pochodzi od <em>"XML"</em>. +</p> +<h3 id="Krok_1_.E2.80.93_powiedz_.22Poprosz.C4.99.21.22.2C_czyli_jak_wykona.C4.87_zapytanie_HTTP" name="Krok_1_.E2.80.93_powiedz_.22Poprosz.C4.99.21.22.2C_czyli_jak_wykona.C4.87_zapytanie_HTTP"> Krok 1 – powiedz "Poproszę!", czyli jak wykonać zapytanie HTTP </h3> +<p>W celu stworzenia zapytania HTTP przy użyciu JavaScriptu, potrzebujesz instancji klasy, która posiada żądaną funkcjonalność. Taka klasa została po raz pierwszy wprowadzona w Internet Explorerze, jako obiekt ActiveX, pod nazwą <code>XMLHTTP</code>. Później Mozilla, Safari i inne przeglądarki również dodały taki obiekt, implementując klasę <code>XMLHttpRequest</code>, która obsługuje metody i właściwości oryginalnego obiektu ActiveX. +</p><p>W rezultacie, w celu stworzenia międzyprzeglądarkowej instancji (obiektu) potrzebnej nam klasy, należy wpisać: +</p> +<pre>if (window.XMLHttpRequest) { // Mozilla, Safari, Opera ... + http_request = new XMLHttpRequest(); +} else if (window.ActiveXObject) { // IE + http_request = new ActiveXObject("Microsoft.XMLHTTP"); +} +</pre> +<p>(Na potrzeby przykładu powyższy fragment jest lekko uproszczoną wersją kodu używanego do stworzenia instancji XMLHTTP. Bardziej "życiowy" przykład można znaleźć w punkcie 3. tego artykułu). +</p><p>Niektóre wersje przeglądarek opartych na technologii Mozilli nie zadziałają poprawnie, jeżeli odpowiedź z serwera nie będzie opisana XML-owym nagłówkiem <code>mime-type</code>. Aby rozwiązać ten problem, można użyć dodatkowej metody do nadpisania nagłówka wysyłanego przez serwer, jeśli nie jest to <code>text/xml</code>. +</p> +<pre>http_request = new XMLHttpRequest(); +http_request.overrideMimeType('text/xml'); +</pre> +<p>Następnie należy się zdecydować, co chcesz zrobić po otrzymaniu od serwera odpowiedzi na Twoje zapytanie. Na tym etapie wystarczy powiedzieć obiektowi zapytania HTTP, która funkcja JavaScript będzie opracowywała wynik. Można to uzyskać poprzez ustawienie właściwości <code>onreadystatechange</code> obiektu funkcji JavaScript, której będziesz używał, na przykład: +</p><p><code>http_request.onreadystatechange = nameOfTheFunction;</code> +</p><p>Zwróć uwagę, że nie ma żadnych nawiasów za nazwą funkcji i nie są przekazywane żadne parametry, ponieważ chcemy przypisać referencję do tej funkcji, a nie wywołać ją. Można także, zamiast podawać nazwę funkcji, użyć techniki JavaScript do definiowania funkcji w locie (zwanej "funkcją anonimową") i określić akcje, które przetworzą wynik natychmiast, jak na przykład: +</p> +<pre>http_request.onreadystatechange = function(){ + // instrukcje +}; +</pre> +<p>Następnie, kiedy już zostało zadeklarowane, co będzie się działo zaraz po odebraniu odpowiedzi, należy wykonać zapytanie. W tym celu należy wywołać metody <code>open()</code> i <code>send()</code> klasy zapytania HTTP, tak jak na poniższym przykładzie: +</p> +<pre>http_request.open('GET', 'http://www.example.org/some.file', true); +http_request.send(null); +</pre> +<ul><li> Pierwszy parametr metody <code>open()</code> określa metodę zapytania HTTP - GET, POST, HEAD lub dowolną inną metodę, której chcesz użyć i którą obsługuje serwer. Dla zachowania zgodności ze standardem nazwę metody wpisuj dużymi literami. W przeciwnym razie niektóre przeglądarki (np. Firefox) mogą nie przetworzyć zapytania. Aby dowiedzieć się więcej na temat możliwych metod zapytań HTTP, zajrzyj do <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html">dokumentacji W3C</a>. +</li></ul> +<ul><li> Drugi parametr określa URL strony, która ma zostać odpytana. W celu zwiększenia bezpieczeństwa, nie jest możliwe odpytywanie stron znajdujących się w domenach zewnętrznych (tzw. 3rd-party domains). Upewnij się, że wpisujesz dokładną nazwę domeny, na wszystkich swoich stronach, w przeciwnym razie po wywołaniu metody <code>open()</code> dostaniesz odpowiedź z błędem "brak dostępu" (permission denied). Częstym błędem jest otwieranie strony jako domena.tld, ale wywoływanie stron z www.domena.tld. +</li></ul> +<ul><li> Trzeci parametr decyduje, czy zapytanie ma być asynchroniczne. Jeżeli tak, wykonywanie funkcji JavaScript będzie kontynuowane podczas oczekiwania na odpowiedź z serwera. I to jest właśnie A w nazwie AJAX. +</li></ul> +<p>Parametr metody <code>send()</code> może być dowolną daną, którą chcesz wysłać do serwera w przypadku użycia metody <code>POST</code>. Dane powinny być umieszczone w formie używanej przez ciągi zapytań, czyli: +</p><p><code>name=value&anothername=othervalue&so=on</code> +</p><p>Należy pamiętać o zakodowaniu każdej wysyłanej wartości funkcją <code><a href="pl/Dokumentacja_j%c4%99zyka_JavaScript_1.5/Funkcje/encodeURIComponent">encodeURIComponent</a></code>. Na przykład jeśli w środku, jakiegoś przesyłanego łańcucha znajdzie się znak & to "obetnie" nasz łańcuch. Opis tej funkcji w dokumentcji zawiera bardziej szczegółowe informacje. +</p><p>Zwróć uwagę na to, że jeśli chcesz wysłać dane metodą <code>POST</code>, musisz zmienić typ MIME swojego zapytania, używając składni: +</p> +<pre>http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); +</pre> +<p>W przeciwnym wypadku, serwer odrzuci dane wysłane metodą POST. +</p> +<h3 id="Krok_2_.E2.80.93_.22Voil.C3.A0.21.22.2C_czyli_obs.C5.82uga_odpowiedzi_serwera" name="Krok_2_.E2.80.93_.22Voil.C3.A0.21.22.2C_czyli_obs.C5.82uga_odpowiedzi_serwera"> Krok 2 – "Voilà!", czyli obsługa odpowiedzi serwera </h3> +<p>Pamiętasz, że w trakcie wysyłania zapytania została podana nazwa funkcji JavaScript, która została przygotowana do obsługi odpowiedzi? +</p><p><code>http_request.onreadystatechange = nazwaFunkcji;</code> +</p><p>Zobaczmy, co ta funkcja powinna zrobić. Najpierw musi ona sprawdzić stan zapytania. Jeżeli status ma wartość 4, oznacza to, że udało się pobrać pełną odpowiedź z serwera i można kontynuować jej przetwarzanie. +</p> +<pre>if (http_request.readyState == 4) { + // wszystko jest OK, odpowiedź została odebrana +} else { + // ciągle nie gotowe +} +</pre> +<p>Możliwe są następujące wartości <code>readyState</code>: +</p> +<ul><li> 0 (niezainicjowane) +</li><li> 1 (w trakcie pobierania) +</li><li> 2 (pobrano) +</li><li> 3 (interaktywne) +</li><li> 4 (gotowe) +</li></ul> +<p>(<a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/readystate_1.asp">Źródło</a>) +</p><p>Następnie należy sprawdzić kod odpowiedzi serwera HTTP. Wszystkie możliwe kody są opisane na <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html">stronie W3C</a>. W tym przypadku interesuje nas tylko odpowiedź <code>200 OK</code>. +</p> +<pre>if (http_request.status == 200) { + // świetnie!! +} else { + // wystąpił jakiś problem z zapytaniem, + // na przykład odpowiedzią mogło być 404 (Nie odnaleziono) + // lub 500 (Wewnętrzny błąd serwera) +} +</pre> +<p>Teraz, kiedy został już sprawdzony stan zapytania i kod statusu odpowiedzi, możesz zrobić co zechcesz z danymi otrzymanymi z serwera. Masz dwie możliwości dostania się do danych: +</p> +<ul><li> <code>http_request.responseText</code> – zwróci odpowiedź serwera jako ciąg znakowy +</li><li> <code>http_request.responseXML</code> – zwróci odpowiedź jako obiekt <code>XMLDocument</code>, z którym można pracować przy użyciu funkcji DOM JavaScriptu. +</li></ul> +<h3 id="Krok_3_.E2.80.93_.22Do_dzie.C5.82a.21.22_-_Prosty_przyk.C5.82ad" name="Krok_3_.E2.80.93_.22Do_dzie.C5.82a.21.22_-_Prosty_przyk.C5.82ad"> Krok 3 – "Do dzieła!" - Prosty przykład </h3> +<p>Stwórzmy teraz proste zapytanie HTTP. JavaScript odpyta serwer o dokument HTML <code>test.html</code>, który zawiera tekst "Jestem testem.", a następnie wyświetlimy ten tekst przy użyciu funkcji <code>alert()</code>. +</p> +<pre><script type="text/javascript" language="javascript"> + + var http_request = false; + + function makeRequest(url) { + + http_request = false; + + if (window.XMLHttpRequest) { // Mozilla, Safari,... + http_request = new XMLHttpRequest(); + if (http_request.overrideMimeType) { + http_request.overrideMimeType('text/xml'); + // Przeczytaj o tym wierszu poniżej + } + } else if (window.ActiveXObject) { // IE + try { + http_request = new ActiveXObject("Msxml2.XMLHTTP"); + } catch (e) { + try { + http_request = new ActiveXObject("Microsoft.XMLHTTP"); + } catch (e) {} + } + } + + if (!http_request) { + alert('Poddaję się :( Nie mogę stworzyć instancji obiektu XMLHTTP'); + return false; + } + http_request.onreadystatechange = function() { alertContents(http_request); }; + http_request.open('GET', url, true); + http_request.send(null); + + } + + function alertContents(http_request) { + + if (http_request.readyState == 4) { + if (http_request.status == 200) { + alert(http_request.responseText); + } else { + alert('Wystąpił problem z zapytaniem.'); + } + } + + } +</script> +<span + style="cursor: pointer; text-decoration: underline" + onclick="makeRequest('test.html')"> + Odpytaj +</span> +</pre> +<p>W tym przykładzie: +</p> +<ul><li> użytkownik klika na odnośnik "Odpytaj" w przeglądarce; +</li><li> to wywołuje funkcję <code>makeRequest</code> z parametrem - nazwą <code>test.html</code> pliku HTML w tym samym katalogu; +</li><li> wysyłane jest zapytanie, a następnie (<code>onreadystatechange</code>) wywołanie jest przenoszone do <code>alertContents()</code>; +</li><li> <code>alertContents()</code> sprawdza uzyskaną odpowiedź i wyświetla treść pliku <code>test.html</code> przy użyciu funkcji <code>alert()</code>. +</li></ul> +<p>Możesz przetestować ten przykład <a class="external" href="http://www.w3clubs.com/mozdev/httprequest_test.html">tutaj</a> i zobaczyć testowy plik <a class="external" href="http://www.w3clubs.com/mozdev/test.html">tutaj</a>. +</p><p><b>Uwaga</b>: Jeżeli strona wywołana przez XMLHttpRequest nie jest poprawionym XML-em (np. kiedy jest plikiem tekstowym), linia <code> http_request.overrideMimeType('text/xml');</code> spowoduje pojawienie się błędów w konsoli JavaScript w Firefoksie 1.5 i późniejszych. Zostało to opisane na stronie: <a class=" link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=311724" rel="freelink">https://bugzilla.mozilla.org/show_bug.cgi?id=311724</a>. Jest to zachowanie właściwe; ten artykuł zostanie niedługo poprawiony, aby dostosować się do tej zmiany. +</p><p><b>Uwaga 2</b>: jeżeli wysyłasz zapytanie do skryptu, który ma zwrócić XML, zamiast do statycznego pliku XML, musisz ustawić nagłówki odpowiedzi, jeśli chcesz, aby zadziałało to także w Internet Explorerze. Jeżeli nie ustawisz nagłówka <code>Content-Type: application/xml</code>, IE zwróci błąd JavaScript "Object Expected" po wierszu, w którym próbujesz dostać się do XML-owego elementu. Jeżeli nie ustawisz nagłówka <code>Cache-Control: no-cache</code>, przeglądarka doda odpowiedź do pamięci podręcznej i nigdy nie wyśle żądania ponownie, sprawiając, że praca nad skryptem może być "kłopotliwa". +</p><p><b>Uwaga 3</b>: jeżeli zmienna <code>http_request</code> jest używana globalnie, konkurujące funkcje wywołujące <code>makeRequest()</code> mogą nadpisywać siebie nawzajem, tworząc problemy. Określenie zmiennej <code>http_request</code> lokalnie dla funkcji i przekazywanie jej do funkcji <code>alertContent()</code> pozwala uniknąć takiej sytuacji. +</p><p><b>Uwaga 4</b>: Aby zarejestrować funkcję zwrotną (callback function) <code>onreadystatechange</code>, nie możesz użyć argumentów. Dlatego też poniższy kod nie zadziała: +</p> +<pre>http_request.onreadystatechange = alertContents(http_request); // (nie działa) +</pre> +<p>Z tego względu, aby zarejestrować tę funkcję pomyślnie, należy albo przekazać argumenty pośrednio poprzez funkcję anonimową, albo użyć <code>http_request</code> jako zmiennej globalnej. Oto przykłady: +</p> +<pre>http_request.onreadystatechange = function() { alertContents(http_request); }; //1 (simultaneous request) +http_request.onreadystatechange = alertContents; //2 (global variable) +</pre> +<p>Metoda pierwsza pozwala mieć wiele zapytań przetwarzanych jednocześnie, a metoda trzecia może być używana jeśli <code>http_request</code> jest zmienną globalną. +</p><p><b>Uwaga 5</b>: W przypadku błędu połączenia (na przykład kiedy serwer WWW został wyłączony), zostanie wyrzucony wyjątek w metodzie onreadystatechange podczas próby odczytania zmiennej .status. Z tego względu dobrze jest opakować wyrażenie if...then w try...catch. (Zobacz: <a class=" link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=238559" rel="freelink">https://bugzilla.mozilla.org/show_bug.cgi?id=238559</a>). +</p> +<pre>function alertContents(http_request) { + + try { + if (http_request.readyState == 4) { + if (http_request.status == 200) { + alert(http_request.responseText); + } else { + alert('Wystąpił problem z tym żądaniem.'); + } + } + } + catch( e ) { + alert('Złapany wyjątek: ' + e.description); + } + + } +</pre> +<h3 id="Krok_4_.E2.80.93_.22Z_archiwum_X.22_czyli_praca_z_odpowiedzi.C4.85_XML" name="Krok_4_.E2.80.93_.22Z_archiwum_X.22_czyli_praca_z_odpowiedzi.C4.85_XML"> Krok 4 – "Z archiwum X" czyli praca z odpowiedzią XML </h3> +<p>W poprzednim przykładzie, po otrzymaniu odpowiedzi z serwera, użyliśmy właściwości <code>responseText</code> obiektu zapytania i zawierała ona treść pliku <tt>test.html</tt>. Teraz spróbujmy użyć właściwości <code>responseXML</code>. +</p><p>Przede wszystkim stwórzmy prawidłowy dokument XML, o który odpytamy potem serwer. Taki dokument (<tt>test.xml</tt>) może wyglądać tak: +</p> +<pre><?xml version="1.0" ?> +<root> + Jestem testem. +</root> +</pre> +<p>W skrypcie musimy tylko zmienić linię zapytania na: +</p> +<pre>... +onclick="makeRequest('test.xml')"> +... +</pre> +<p>Potem w <code>alertContents()</code> musimy zmienić linię <code>alert(http_request.responseText);</code> na: +</p> +<pre>var xmldoc = http_request.responseXML; +var root_node = xmldoc.getElementsByTagName('root').item(0); +alert(root_node.firstChild.data); +</pre> +<p>W ten sposób pobraliśmy obiekt <code>XMLDocument</code>, zwrócony przez <code>responseXML</code> i skorzystaliśmy z metod DOM, aby dostać się do danych zawartych w dokumencie XML. Możesz zajrzeć do dokumentu XML <code>test.xml</code> <a class="external" href="http://www.w3clubs.com/mozdev/test.xml">tutaj</a> oraz do zaktualizowanego skryptu <a class="external" href="http://www.w3clubs.com/mozdev/httprequest_test_xml.html">tutaj</a>. +</p><p>Aby dowiedzieć się więcej o metodach DOM, zajrzyj do dokumentów <a class="external" href="http://www.mozilla.org/docs/dom/">Mozilla's DOM implementation</a>. +</p> +<div class="noinclude"> +</div> +{{ languages( { "ca": "ca/AJAX/Primers_passos", "de": "de/AJAX/Getting_Started", "en": "en/AJAX/Getting_Started", "es": "es/AJAX/Primeros_Pasos", "fr": "fr/AJAX/Premiers_pas", "it": "it/AJAX/Iniziare", "ja": "ja/AJAX/Getting_Started", "ko": "ko/AJAX/Getting_Started", "pt": "pt/AJAX/Como_come\u00e7ar", "ru": "ru/AJAX/\u0421_\u0447\u0435\u0433\u043e_\u043d\u0430\u0447\u0430\u0442\u044c", "zh-cn": "cn/AJAX/\u5f00\u59cb", "zh-tw": "zh_tw/AJAX/\u4e0a\u624b\u7bc7" } ) }} diff --git a/files/pl/web/guide/api/index.html b/files/pl/web/guide/api/index.html new file mode 100644 index 0000000000..0d56f6ab30 --- /dev/null +++ b/files/pl/web/guide/api/index.html @@ -0,0 +1,25 @@ +--- +title: Przewodnik po internetowych interfejsach API +slug: Web/Guide/API +tags: + - API + - Landing + - Przewodnik + - TopicStub + - Web +translation_of: Web/Guide/API +--- +<p>Współczesne technologie tworzenia aplikacji internetowych przy użyciu JavaScript wykorzystuje całą gamę interfejsów API, dzięki którym można tworzyć zaawansowane i wydajne aplikacje, uruchamiane w sieci web, lokalnie albo na serwerach za pośrednictwem takich technologii jak <a href="https://nodejs.org/">Node.js</a>. Na tej stronie można znaleźć kompletną listę wszystkich interfejsów API dostarczanych przez cały stos współczesnych technologii internetowej.</p> + +<h2 id="Interfejsy_API_od_A_do_Z">Interfejsy API od A do Z</h2> + +<p>{{ListGroups}}</p> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a href="/pl/docs/Web/API">Informator internetowych interfejsów API</a> (indeks wszystkich interfejsów API przeznaczonych do tworzenia aplikacji internetowych w JavaScript)</li> + <li><a href="/pl/docs/Web/API/Document_Object_Model">Obiektowy model dokumentu (Document Object Model - DOM)</a></li> + <li><a href="/pl/docs/Web/Events">Informator API zdarzeń</a></li> + <li><a href="/pl/docs/Learn">Nauka tworzenia stron i aplikacji internetowych</a></li> +</ul> diff --git a/files/pl/web/guide/css/kolumny_css3/index.html b/files/pl/web/guide/css/kolumny_css3/index.html new file mode 100644 index 0000000000..19d3c4285a --- /dev/null +++ b/files/pl/web/guide/css/kolumny_css3/index.html @@ -0,0 +1,65 @@ +--- +title: Kolumny CSS3 +slug: Web/Guide/CSS/Kolumny_CSS3 +tags: + - CSS + - CSS_3 + - Wszystkie_kategorie +translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts +--- +<p> +</p> +<h3 id="Wprowadzenie" name="Wprowadzenie"> Wprowadzenie </h3> +<p>Czytanie tekstu wyświetlanego w długich wierszach jest trudne i męczące dla oczu - jeśli przenoszenie wzroku z końca jednej linii na początek drugiej zajmuje zbyt wiele czasu, łatwo jest zgubić się w tekście i rozpocząć czytanie niewłaściwego wiersza. Z tego powodu i aby w pełni wykorzystać szerokość ekranu, tekst na stronach internetowych - tak samo jak w gazetach - powinien być układany w sąsiadujących kolumnach o stałej szerokości. Niestety osiągnięcie tego efektu nie jest możliwe przy użyciu języków HTML i obecnego CSS bez wymuszania sztywnej wysokości kolumn, znacznego ograniczania dozwolonej składni wewnątrz tekstu bądź też bez stosowania skomplikowanych skryptów. +</p><p><a class="external" href="http://www.w3.org/TR/2001/WD-css3-multicol-20010118">Szkic specyfikacji CSS3</a> proponuje kilka nowych własności CSS, które rozwiązałyby ten problem. W Firefoksie 1.5 i następnych zaimplementowana została część tych własności i zachowują się one w sposób opisany przez szkic specyfikacji (z jednym wyjątkiem opisanym niżej). </p><p>Aby zobaczyć, jak działają kolumny CSS, odwiedź (korzystając z Firefoksa 1.5) <a class="external" href="http://weblogs.mozillazine.org/roc/">blog Roberta O'Callahana</a>. +</p> +<h3 id="Stosowanie_kolumn" name="Stosowanie_kolumn"> Stosowanie kolumn </h3> +<h4 id="Liczba_i_szeroko.C5.9B.C4.87_kolumn" name="Liczba_i_szeroko.C5.9B.C4.87_kolumn"> Liczba i szerokość kolumn </h4> +<p>Własności CSS pozwalają okreslić liczbę i szerokość kolumn, w jakich zostanie wyświetlony tekst na stronie: <code>-moz-column-count</code> oraz <code>-moz-column-width</code>. +</p><p><code>-moz-column-count</code> pozwala ustalić liczbę kolumn. Na przykład: +</p> +<pre><div style="-moz-column-count:2">Z powodu trwających przygotowań do wydania Mozilli +Firefox 1.5 Beta 1 drzewo zostanie zamrożone dziś w nocy o 23:59 PDT (UTC -7:00). +Od tego momentu żadne nowe poprawki nie będą przyjmowane do Firefoksa 1.5 Beta 1, +którego wydanie zaplanowane jest na czwartek.</div> +</pre> +<p>Powyższy tekst powinien zostać w Firefoksie 1.5 wyświetlony w dwu kolumnach: +</p> +<div style="">Z powodu trwających przygotowań do wydania Mozilli Firefox 1.5 Beta 1 drzewo zostanie zamrożone dziś w nocy o 23:59 PDT (UTC -7:00). Od tego momentu żadne nowe poprawki nie będą przyjmowane do Firefoksa 1.5 Beta 1, którego wydanie zaplanowane jest na czwartek.</div> +<p><code>-moz-column-width</code> pozwala natomiast określić minimalną pożądaną szerokość kolumn. Jeśli przy okazji własność <code>-moz-column-count</code> nie jest ustalona, przeglądarka automatycznie wyświetli tyle kolumn, ile zmieści się w jej oknie. Na przykład tekst: +</p> +<pre><div style="-moz-column-width:20em;">Z powodu trwających przygotowań do wydania Mozilli +Firefox 1.5 Beta 1 drzewo zostanie zamrożone dziś w nocy o 23:59 PDT (UTC -7:00). +Od tego momentu żadne nowe poprawki nie będą przyjmowane do Firefoksa 1.5 Beta 1, +którego wydanie zaplanowane jest na czwartek.</div> +</pre> +<p>przeglądarka wyświetli następująco: +</p> +<div style="-moz-column-width: 20em;">Z powodu trwających przygotowań do wydania Mozilli Firefox 1.5 Beta 1 drzewo zostanie zamrożone dziś w nocy o 23:59 PDT (UTC -7:00). Od tego momentu żadne nowe poprawki nie będą przyjmowane do Firefoksa 1.5 Beta 1, którego wydanie zaplanowane jest na czwartek.</div> +<p>Szczegóły dotyczące kolumn CSS opisano w <a class="external" href="http://www.w3.org/TR/2001/WD-css3-multicol-20010118">szkicu specyfikacji CSS3</a>. +</p><p>W przypadku wyświetlania wielokolumnowego, treść automatycznie przepływa do następnych kolumn, jeśli zachodzi taka potrzeba. Cała funkcjonalność HTML, CSS oraz DOM jest zachowana, podobnie jak możliwość edycji i drukowania. +</p><p><br> +</p> +<h4 id="Wyr.C3.B3wywanie_wysoko.C5.9Bci_kolumn" name="Wyr.C3.B3wywanie_wysoko.C5.9Bci_kolumn"> Wyrówywanie wysokości kolumn </h4> +<p>Szkic specyfikacji CSS3 zakłada, że wysokości kolumn powinny być wyrównywane przez przeglądarkę w taki sposób, by wysokości treści w każdej kolumnie były możliwie najbardziej zbliżone. I to właśnie robi Firefox. +</p><p>Czasami jednak pojawia się potrzeba jednoznacznego zdefiniowania wysokości kolumn. W takim przypadku treść - w zależności od długości - wyświetlana powinna być w różnej, nieznanej projektantowi liczbie kolumn. Efekt ten zastosowano na stronach <a class="external" href="http://iht.com">International Herald Tribune</a>, gdzie jednak użyto w tym celu odpowiednich skryptów. Firefox rozszerza szkic specyfikacji CSS w taki sposób, że nadanie blokowi kolumn własności <code>height</code> powoduje wydłużanie się kolumn do określonej wysokości, a po osiągnięciu tejże - utworzeniu nowej kolumny. Zachowanie to jest bardzo przydatne przy tworzeniu układów stron WWW. +</p> +<h4 id="Odst.C4.99p_mi.C4.99dzy_kolumnami" name="Odst.C4.99p_mi.C4.99dzy_kolumnami"> Odstęp między kolumnami </h4> +<p>Domyślnie, przeglądarka wyświetla kolumny jedna tuż obok drugiej, przylegające do siebie. Zazwyczaj jednak nie jest to zachowanie pożądane. Aby poprawić tę sytuację, można za pomocą CSS ustawić dla kolumn odpowiednie wartości marginesów wewnętrznych, często jednak o wiele łatwiej zastosować jest własność <code>-moz-column-gap</code> ustawianą dla bloku kolumn: +</p> +<pre><div style="-moz-column-width:20em; -moz-column-gap:2em;">Z powodu trwających +przygotowań do wydania Mozilli Firefox 1.5 Beta 1 drzewo zostanie zamrożone dziś +w nocy o 23:59 PDT (UTC -7:00). Od tego momentu żadne nowe poprawki nie będą +przyjmowane do Firefoksa 1.5 Beta 1, którego wydanie zaplanowane jest na czwartek.</div> +</pre> +<div style="-moz-column-width: 20em;">Z powodu trwających przygotowań do wydania Mozilli Firefox 1.5 Beta 1 drzewo zostanie zamrożone dziś w nocy o 23:59 PDT (UTC -7:00). Od tego momentu żadne nowe poprawki nie będą przyjmowane do Firefoksa 1.5 Beta 1, którego wydanie zaplanowane jest na czwartek.</div> +<h4 id="Czytelno.C5.9B.C4.87_w_starszych_przegl.C4.85darkach" name="Czytelno.C5.9B.C4.87_w_starszych_przegl.C4.85darkach"> Czytelność w starszych przeglądarkach </h4> +<p>Starsze przeglądarki ignorują własności -moz-column, dzięki czemu stosunkowo łatwo jest utworzyć stronę, której treść będzie wyświetlana w pojedynczej kolumnie w starszych przeglądarkach, a w wielu kolumnach w Firefoksie 1.5. +</p> +<h3 id="Zako.C5.84czenie" name="Zako.C5.84czenie"> Zakończenie </h3> +<p>Kolumny w CSS3 to nowe narzędzie, które pomoże projektantom stron internetowych w najlepszy możliwy sposób wykorzystywać cenną powierzchnię ekranów uzytkowników. Dzięki takim opcjom jak automatycze wyrównywanie wysokości, kolumny na pewno znajdą wiele zastosowań w tworzeniu stron internetowych. +</p> +<h3 id="Dodatkowe_zasoby" name="Dodatkowe_zasoby"> Dodatkowe zasoby </h3> +<ul><li> <a class=" external" href="http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html" rel="freelink">http://weblogs.mozillazine.org/roc/a...18_for_we.html</a> +</li></ul> +{{ languages( { "en": "en/CSS3_Columns", "es": "es/Columnas_con_CSS-3", "fr": "fr/Colonnes_CSS3", "it": "it/Le_Colonne_nei_CSS3", "ja": "ja/CSS3_Columns", "ko": "ko/CSS3_Columns" } ) }} diff --git a/files/pl/web/guide/css/sprawdzanie_media_queries/index.html b/files/pl/web/guide/css/sprawdzanie_media_queries/index.html new file mode 100644 index 0000000000..140d3a1796 --- /dev/null +++ b/files/pl/web/guide/css/sprawdzanie_media_queries/index.html @@ -0,0 +1,116 @@ +--- +title: Sprawdzanie media queries +slug: Web/Guide/CSS/Sprawdzanie_media_queries +translation_of: Web/CSS/Media_Queries/Testing_media_queries +--- +<p>{{SeeCompatTable}}</p> + +<p>DOM dostarcza funkcje, dzięki którym możliwym jest sprawdzenie wyników media query. Jest to możliwe przy użyciu interfejsu {{domxref("MediaQueryList") }} i jego funkcji oraz właściwości. Po utworzeniu obiektu {{domxref("MediaQueryList") }} możesz zbadać wynik zapytania (query) lub (dodatkowo) otrzymywać powiadomienie, gdy rezultat się zmieni.</p> + +<h2 id="Creating_a_media_query_list" name="Creating_a_media_query_list">Tworzenie listy media query</h2> + +<p>Zanim będziesz mógł ocenić wynik zapytania, musisz utworzyć obiekt {{domxref("MediaQueryList") }}, <span class="short_text" id="result_box" lang="pl"><span class="hps">reprezentujący</span></span> media query. Aby to uczynić użyj metody {{domxref("window.matchMedia") }}.</p> + +<p>Na przykład, jeśli chcesz ustalić czy orientacja urządzenia jest pionowa czy pozioma, możesz skorzystać z takiego zapytania jak poniżej:</p> + +<pre>var mql = window.matchMedia("(orientation: portrait)"); /* sprawdzamy czy orientacja obiektu, jest pionowa; zwraca obiekt MediaQueryList */ +</pre> + +<h2 id="Checking_the_result_of_a_query" name="Checking_the_result_of_a_query">Sprawdzanie rezultatu zapytania (query)</h2> + +<p>Po wykonaniu powyższej metody, mamy dostęp do obiektu {{domxref("MediaQueryList") }}, który ma kilka przydatnych metod i właściwości. Jedną z nich jest cecha <code>matches</code>, która zwraca <code>prawdę</code> lub <code>fałsz</code>.</p> + +<pre class="brush: js">if (mql.matches) { + /* wykryta orientacja pionowa */ +} else { + /* wykryta orientacja pozioma */ +} +</pre> + +<h2 id="Receiving_query_notifications" name="Receiving_query_notifications">Otrzymywanie powiadomień</h2> + +<p>W przypadku, gdy chciałbyś na bieżąco dostawać alerty o stanie zapytania (query), skorzystaj z funkcji <code>addListener()</code>, która jest zdecydowanie wydajniejsza aniżeli sprawdzanie "ręcznie" co jakiś czas. By skorzystać z tego ułatwienia, wywołaj tę funkcję na obiekcie {{domxref("MediaQueryList") }}, określając <span class="short_text" id="result_box" lang="pl"><span class="hps">obserwator, który implementuje</span></span> interfejs {{domxref("MediaQueryListListener") }}:</p> + +<pre class="brush: js">var mql = window.matchMedia("(orientation: portrait)"); +mql.addListener(zmianaOrientacji); +zmianaOrientacji(mql); +</pre> + +<p>Powyższy kod tworzy media query list, a następnie dołącza listener. Zauważ, że po dodaniu listenera, przywołaliśmy listenera bezpośrednio - trzecia linijka. To pozwala nam określić aktualną orientację urządzenia.</p> + +<p>Zaimplementowana metoda <code>zmianaOrientacji()</code> pozwala nam wykonać pewne czynności, gdy zmieni się położenie urządzenia.</p> + +<pre class="brush: js">function zmianaOrientacji(mql) { + if (mql.matches) { + /* wykryta orientacja pionowa */ + } else { + /* wykryta orientacja pozioma */ + } +} +</pre> + +<h2 id="Ending_query_notifications" name="Ending_query_notifications">Wyłączenie powiadomień</h2> + +<p>Gdy nie potrzebujesz już powiadomień dotyczących zmiany wartości zapytania, możesz wywołać metodę <code>removeListener()</code> dostępną w obiekcie {{domxref("MediaQueryList") }}:</p> + +<pre>mql.removeListener(zmianaOrientacji); +</pre> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Zgodność z przeglądarką</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>9</td> + <td>{{CompatGeckoDesktop("6.0") }}</td> + <td>10</td> + <td>12.1</td> + <td>5.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>3.0</td> + <td>{{CompatUnknown}}</td> + <td>10</td> + <td>12.1</td> + <td>5</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Zobacz także</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">Media queries</a></li> + <li>{{domxref("window.matchMedia()") }}</li> + <li>{{domxref("MediaQueryList") }}</li> + <li>{{domxref("MediaQueryListListener") }}</li> +</ul> diff --git a/files/pl/web/guide/graphics/index.html b/files/pl/web/guide/graphics/index.html new file mode 100644 index 0000000000..17edfe14d1 --- /dev/null +++ b/files/pl/web/guide/graphics/index.html @@ -0,0 +1,41 @@ +--- +title: Grafiki na stronach +slug: Web/Guide/Graphics +tags: + - 2D + - 3D + - Canvas + - Graphics + - NeedsTranslation + - TopicStub + - Web + - WebGL +translation_of: Web/Guide/Graphics +--- +<p><span class="seoSummary">Nowoczesne strony czy też aplikacje internetowe często muszą prezentować pewne grafiki.</span> Dopóki proste wyświetlenie obrazka można wykonać za pomocą elementu {{HTMLElement("img")}}, albo ustawiając tło elementu HTML poprzez atrybut {{cssxref("background-image")}}, to często i tak zachodzi potrzeba generowania grafiki w locie albo manipulowania wyświetlonymi już obrazami. Poniże artykuły wprowadzą Ciebie głębiej w realizowanie tych czynności.</p> +<div class="row topicpage-table"> + <div class="section"> + <h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">Grafika 2D</h2> + <dl> + <dt> + <a href="/en-US/docs/Web/Guide/Graphics/Drawing_graphics_with_canvas">Rysowanie grafiki z elementem canvas</a></dt> + <dd> + Przewodnik wprowadzający do użycia elementu {{HTMLElement("canvas")}}, by rysować grafikę 2D w przeglądarce.</dd> + <dt> + <a href="/en-US/docs/SVG">SVG</a></dt> + <dd> + Scalable Vector Graphics (SVG) pozwala używać linii, krzywych oraz innych kształtów by wyświetlać grafikę. Unikając bitmap możesz generować obrazki, które bez problemów przeskalujesz do dowolnego rozmiaru.</dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/Graphics">Wyświetl wszystko...</a></span></p> + </div> + <div class="section"> + <h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">Grafika 3D</h2> + <dl> + <dt> + <a href="/en-US/docs/Web/WebGL">WebGL</a></dt> + <dd> + Przewodnik, który ułatwi Tobie zaczęcie pracy z WebGL. Technologia ta umożliwia użycie standardu OpenGL ES prosto w przeglądarce.</dd> + </dl> + </div> +</div> +<p> </p> diff --git a/files/pl/web/guide/html/editable_content/index.html b/files/pl/web/guide/html/editable_content/index.html new file mode 100644 index 0000000000..77abe792b7 --- /dev/null +++ b/files/pl/web/guide/html/editable_content/index.html @@ -0,0 +1,216 @@ +--- +title: Making content editable +slug: Web/Guide/HTML/Editable_content +translation_of: Web/Guide/HTML/Editable_content +--- +<p><span class="seoSummary">In progress. In HTML, any element can be editable. By using some JavaScript event handlers, you can transform your web page into a full and fast rich text editor. This article provides some information about this functionality.</span></p> + +<h2 id="How_does_it_work">How does it work?</h2> + +<p>All you have to do is set the {{htmlattrxref("contenteditable")}} attribute on nearly any HTML element to make it editable.</p> + +<p>Here's a simple example which creates a {{HTMLElement("div")}} element whose contents the user can edit.</p> + +<pre class="brush: html"><div contenteditable="true"> + This text can be edited by the user. +</div></pre> + +<p>Here's the above HTML in action:</p> + +<p>{{ EmbedLiveSample('How_does_it_work') }}</p> + +<h2 id="Executing_commands">Executing commands</h2> + +<p>When an HTML element has <code>contenteditable</code> set to <code>true</code>, the {{ domxref("document.execCommand()") }} method is made available. This lets you run <a href="/en-US/docs/Web/API/document.execCommand#Commands">commands</a> to manipulate the contents of the editable region. Most commands affect the document's selection by, for example, applying a style to the text (bold, italics, etc), while others insert new elements (like adding a link) or affect an entire line (indenting). When using <code>contentEditable</code>, calling <code>execCommand()</code> will affect the currently active editable element.</p> + +<h2 id="Differences_in_markup_generation">Differences in markup generation</h2> + +<p>Use of <code>contenteditable</code> across different browsers has been painful for a long time because of the differences in generated markup between browsers. For example, even something as simple as what happens when you press Enter/Return to create a new line of text inside an editable element was handled differently across the major browsers (Firefox inserted {{htmlelement("br")}} elements, IE/Opera used {{htmlelement("p")}}, Chrome/Safari used {{htmlelement("div")}}).</p> + +<p>Fortunately, in modern browsers things are somewhat more consistent. As of <a href="/en-US/docs/Mozilla/Firefox/Releases/55">Firefox 55</a>, Firefox has been updated to wrap the separate lines in {{htmlelement("div")}} elements, matching the behavior of Chrome, modern Opera, Edge, and Safari.</p> + +<p>Try it out in the above example.</p> + +<div class="note"> +<p><strong>Note</strong>: Internet Explorer, which is no longer being developed, uses {{htmlelement("p")}} elements instead of <code><div></code>.</p> +</div> + +<p>If you want to use a different paragraph separator, the above browsers all support {{domxref("document.execCommand")}}, which provides a <code>DefaultParagraphSeparator</code> command to allow you to change it. For example, to use {{htmlelement("p")}} elements:</p> + +<pre class="language-js"><code class="language-js">document<span class="punctuation token">.</span><span class="function token">execCommand</span><span class="punctuation token">(</span><span class="string token">"DefaultParagraphSeparator"</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">,</span> <span class="string token">"p"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<h2 id="Security">Security</h2> + +<p>For security reasons, Firefox doesn't let JavaScript code use clipboard related features (copy, paste, etc.) by default. You can enable them by setting the preferences shown below using <code>about:config</code>:</p> + +<pre class="code">user_pref("capability.policy.policynames", "allowclipboard"); +user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org"); +user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess"); +user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");</pre> + +<h2 id="Example_A_simple_but_complete_rich_text_editor">Example: A simple but complete rich text editor</h2> + +<div style="height: 500px; width: auto; overflow: auto;"> +<pre class="brush: html"><!doctype html> +<html> +<head> +<title>Rich Text Editor</title> +<script type="text/javascript"> +var oDoc, sDefTxt; + +function initDoc() { + oDoc = document.getElementById("textBox"); + sDefTxt = oDoc.innerHTML; + if (document.compForm.switchMode.checked) { setDocMode(true); } +} + +function formatDoc(sCmd, sValue) { + if (validateMode()) { document.execCommand(sCmd, false, sValue); oDoc.focus(); } +} + +function validateMode() { + if (!document.compForm.switchMode.checked) { return true ; } + alert("Uncheck \"Show HTML\"."); + oDoc.focus(); + return false; +} + +function setDocMode(bToSource) { + var oContent; + if (bToSource) { + oContent = document.createTextNode(oDoc.innerHTML); + oDoc.innerHTML = ""; + var oPre = document.createElement("pre"); + oDoc.contentEditable = false; + oPre.id = "sourceText"; + oPre.contentEditable = true; + oPre.appendChild(oContent); + oDoc.appendChild(oPre); + } else { + if (document.all) { + oDoc.innerHTML = oDoc.innerText; + } else { + oContent = document.createRange(); + oContent.selectNodeContents(oDoc.firstChild); + oDoc.innerHTML = oContent.toString(); + } + oDoc.contentEditable = true; + } + oDoc.focus(); +} + +function printDoc() { + if (!validateMode()) { return; } + var oPrntWin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes"); + oPrntWin.document.open(); + oPrntWin.document.write("<!doctype html><html><head><title>Print<\/title><\/head><body onload=\"print();\">" + oDoc.innerHTML + "<\/body><\/html>"); + oPrntWin.document.close(); +} +</script> +<style type="text/css"> +.intLink { cursor: pointer; } +img.intLink { border: 0; } +#toolBar1 select { font-size:10px; } +#textBox { + width: 540px; + height: 200px; + border: 1px #000000 solid; + padding: 12px; + overflow: scroll; +} +#textBox #sourceText { + padding: 0; + margin: 0; + min-width: 498px; + min-height: 200px; +} +#editMode label { cursor: pointer; } +</style> +</head> +<body onload="initDoc();"> +<form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;"> +<input type="hidden" name="myDoc"> +<div id="toolBar1"> +<select onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;"> +<option selected>- formatting -</option> +<option value="h1">Title 1 &lt;h1&gt;</option> +<option value="h2">Title 2 &lt;h2&gt;</option> +<option value="h3">Title 3 &lt;h3&gt;</option> +<option value="h4">Title 4 &lt;h4&gt;</option> +<option value="h5">Title 5 &lt;h5&gt;</option> +<option value="h6">Subtitle &lt;h6&gt;</option> +<option value="p">Paragraph &lt;p&gt;</option> +<option value="pre">Preformatted &lt;pre&gt;</option> +</select> +<select onchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;"> +<option class="heading" selected>- font -</option> +<option>Arial</option> +<option>Arial Black</option> +<option>Courier New</option> +<option>Times New Roman</option> +</select> +<select onchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;"> +<option class="heading" selected>- size -</option> +<option value="1">Very small</option> +<option value="2">A bit small</option> +<option value="3">Normal</option> +<option value="4">Medium-large</option> +<option value="5">Big</option> +<option value="6">Very big</option> +<option value="7">Maximum</option> +</select> +<select onchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;"> +<option class="heading" selected>- color -</option> +<option value="red">Red</option> +<option value="blue">Blue</option> +<option value="green">Green</option> +<option value="black">Black</option> +</select> +<select onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;"> +<option class="heading" selected>- background -</option> +<option value="red">Red</option> +<option value="green">Green</option> +<option value="black">Black</option> +</select> +</div> +<div id="toolBar2"> +<img class="intLink" title="Clean" onclick="if(validateMode()&&confirm('Are you sure?')){oDoc.innerHTML=sDefTxt};" src="data:image/gif;base64,R0lGODlhFgAWAIQbAD04KTRLYzFRjlldZl9vj1dusY14WYODhpWIbbSVFY6O7IOXw5qbms+wUbCztca0ccS4kdDQjdTLtMrL1O3YitHa7OPcsd/f4PfvrvDv8Pv5xv///////////////////yH5BAEKAB8ALAAAAAAWABYAAAV84CeOZGmeaKqubMteyzK547QoBcFWTm/jgsHq4rhMLoxFIehQQSAWR+Z4IAyaJ0kEgtFoLIzLwRE4oCQWrxoTOTAIhMCZ0tVgMBQKZHAYyFEWEV14eQ8IflhnEHmFDQkAiSkQCI2PDC4QBg+OAJc0ewadNCOgo6anqKkoIQA7" /> +<img class="intLink" title="Print" onclick="printDoc();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oEBxcZFmGboiwAAAAIdEVYdENvbW1lbnQA9syWvwAAAuFJREFUOMvtlUtsjFEUx//n3nn0YdpBh1abRpt4LFqtqkc3jRKkNEIsiIRIBBEhJJpKlIVo4m1RRMKKjQiRMJRUqUdKPT71qpIpiRKPaqdF55tv5vvusZjQTjOlseUkd3Xu/3dPzusC/22wtu2wRn+jG5So/OCDh8ycMJDflehMlkJkVK7KUYN+ufzA/RttH76zaVocDptRxzQtNi3mRWuPc+6cKtlXZ/sddP2uu9uXlmYXZ6Qm8v4Tz8lhF1H+zDQXt7S8oLMXtbF4e8QaFHjj3kbP2MzkktHpiTjp9VH6iHiA+whtAsX5brpwueMGdONdf/2A4M7ukDs1JW662+XkqTkeUoqjKtOjm2h53YFL15pSJ04Zc94wdtibr26fXlC2mzRvBccEbz2kiRFD414tKMlEZbVGT33+qCoHgha81SWYsew0r1uzfNylmtpx80pngQQ91LwVk2JGvGnfvZG6YcYRAT16GFtW5kKKfo1EQLtfh5Q2etT0BIWF+aitq4fDbk+ImYo1OxvGF03waFJQvBCkvDffRyEtxQiFFYgAZTHS0zwAGD7fG5TNnYNTp8/FzvGwJOfmgG7GOx0SAKKgQgDMgKBI0NJGMEImpGDk5+WACEwEd0ywblhGUZ4Hw5OdUekRBLT7DTgdEgxACsIznx8zpmWh7k4rkpJcuHDxCul6MDsmmBXDlWCH2+XozSgBnzsNCEE4euYV4pwCpsWYPW0UHDYBKSWu1NYjENDReqtKjwn2+zvtTc1vMSTB/mvev/WEYSlASsLimcOhOBJxw+N3aP/SjefNL5GePZmpu4kG7OPr1+tOfPyUu3BecWYKcwQcDFmwFKAUo90fhKDInBCAmvqnyMgqUEagQwCoHBDc1rjv9pIlD8IbVkz6qYViIBQGTJPx4k0XpIgEZoRN1Da0cij4VfR0ta3WvBXH/rjdCufv6R2zPgPH/e4pxSBCpeatqPrjNiso203/5s/zA171Mv8+w1LOAAAAAElFTkSuQmCC"> +<img class="intLink" title="Undo" onclick="formatDoc('undo');" src="data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7/I19DV3NHa7P///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq7046807TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfEwhdRIH4fh/DZMICe3/C4nBQBADs=" /> +<img class="intLink" title="Redo" onclick="formatDoc('redo');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1////yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9NaEDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw==" /> +<img class="intLink" title="Remove formatting" onclick="formatDoc('removeFormat')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9oECQMCKPI8CIIAAAAIdEVYdENvbW1lbnQA9syWvwAAAuhJREFUOMtjYBgFxAB501ZWBvVaL2nHnlmk6mXCJbF69zU+Hz/9fB5O1lx+bg45qhl8/fYr5it3XrP/YWTUvvvk3VeqGXz70TvbJy8+Wv39+2/Hz19/mGwjZzuTYjALuoBv9jImaXHeyD3H7kU8fPj2ICML8z92dlbtMzdeiG3fco7J08foH1kurkm3E9iw54YvKwuTuom+LPt/BgbWf3//sf37/1/c02cCG1lB8f//f95DZx74MTMzshhoSm6szrQ/a6Ir/Z2RkfEjBxuLYFpDiDi6Af///2ckaHBp7+7wmavP5n76+P2ClrLIYl8H9W36auJCbCxM4szMTJac7Kza////R3H1w2cfWAgafPbqs5g7D95++/P1B4+ECK8tAwMDw/1H7159+/7r7ZcvPz4fOHbzEwMDwx8GBgaGnNatfHZx8zqrJ+4VJBh5CQEGOySEua/v3n7hXmqI8WUGBgYGL3vVG7fuPK3i5GD9/fja7ZsMDAzMG/Ze52mZeSj4yu1XEq/ff7W5dvfVAS1lsXc4Db7z8C3r8p7Qjf///2dnZGxlqJuyr3rPqQd/Hhyu7oSpYWScylDQsd3kzvnH738wMDzj5GBN1VIWW4c3KDon7VOvm7S3paB9u5qsU5/x5KUnlY+eexQbkLNsErK61+++VnAJcfkyMTIwffj0QwZbJDKjcETs1Y8evyd48toz8y/ffzv//vPP4veffxpX77z6l5JewHPu8MqTDAwMDLzyrjb/mZm0JcT5Lj+89+Ybm6zz95oMh7s4XbygN3Sluq4Mj5K8iKMgP4f0////fv77//8nLy+7MCcXmyYDAwODS9jM9tcvPypd35pne3ljdjvj26+H2dhYpuENikgfvQeXNmSl3tqepxXsqhXPyc666s+fv1fMdKR3TK72zpix8nTc7bdfhfkEeVbC9KhbK/9iYWHiErbu6MWbY/7//8/4//9/pgOnH6jGVazvFDRtq2VgiBIZrUTIBgCk+ivHvuEKwAAAAABJRU5ErkJggg=="> +<img class="intLink" title="Bold" onclick="formatDoc('bold');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs=" /> +<img class="intLink" title="Italic" onclick="formatDoc('italic');" src="data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw==" /> +<img class="intLink" title="Underline" onclick="formatDoc('underline');" src="data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7" /> +<img class="intLink" title="Left align" onclick="formatDoc('justifyleft');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw==" /> +<img class="intLink" title="Center align" onclick="formatDoc('justifycenter');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7" /> +<img class="intLink" title="Right align" onclick="formatDoc('justifyright');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw==" /> +<img class="intLink" title="Numbered list" onclick="formatDoc('insertorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAADljwliE35GjuaezxtHa7P///////yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKSespwjoRFvggCBUBoTFBeq6QIAysQnRHaEOzyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs=" /> +<img class="intLink" title="Dotted list" onclick="formatDoc('insertunorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAAB1ChF9vj1iE33mOrqezxv///////yH5BAEAAAcALAAAAAAWABYAAAMyeLrc/jDKSesppNhGRlBAKIZRERBbqm6YtnbfMY7lud64UwiuKnigGQliQuWOyKQykgAAOw==" /> +<img class="intLink" title="Quote" onclick="formatDoc('formatblock','blockquote');" src="data:image/gif;base64,R0lGODlhFgAWAIQXAC1NqjFRjkBgmT9nqUJnsk9xrFJ7u2R9qmKBt1iGzHmOrm6Sz4OXw3Odz4Cl2ZSnw6KxyqO306K63bG70bTB0rDI3bvI4P///////////////////////////////////yH5BAEKAB8ALAAAAAAWABYAAAVP4CeOZGmeaKqubEs2CekkErvEI1zZuOgYFlakECEZFi0GgTGKEBATFmJAVXweVOoKEQgABB9IQDCmrLpjETrQQlhHjINrTq/b7/i8fp8PAQA7" /> +<img class="intLink" title="Delete indentation" onclick="formatDoc('outdent');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAAAAADljwliE35GjuaezxtDV3NHa7P///yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKCQG9F2i7u8agQgyK1z2EIBil+TWqEMxhMczsYVJ3e4ahk+sFnAgtxSQDqWw6n5cEADs=" /> +<img class="intLink" title="Add indentation" onclick="formatDoc('indent');" src="data:image/gif;base64,R0lGODlhFgAWAOMIAAAAADljwl9vj1iE35GjuaezxtDV3NHa7P///////////////////////////////yH5BAEAAAgALAAAAAAWABYAAAQ7EMlJq704650B/x8gemMpgugwHJNZXodKsO5oqUOgo5KhBwWESyMQsCRDHu9VOyk5TM9zSpFSr9gsJwIAOw==" /> +<img class="intLink" title="Hyperlink" onclick="var sLnk=prompt('Write the URL here','http:\/\/');if(sLnk&&sLnk!=''&&sLnk!='http://'){formatDoc('createlink',sLnk)}" src="data:image/gif;base64,R0lGODlhFgAWAOMKAB1ChDRLY19vj3mOrpGjuaezxrCztb/I19Ha7Pv8/f///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARY8MlJq7046827/2BYIQVhHg9pEgVGIklyDEUBy/RlE4FQF4dCj2AQXAiJQDCWQCAEBwIioEMQBgSAFhDAGghGi9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7" /> +<img class="intLink" title="Cut" onclick="formatDoc('cut');" src="data:image/gif;base64,R0lGODlhFgAWAIQSAB1ChBFNsRJTySJYwjljwkxwl19vj1dusYODhl6MnHmOrpqbmpGjuaezxrCztcDCxL/I18rL1P///////////////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAVu4CeOZGmeaKqubDs6TNnEbGNApNG0kbGMi5trwcA9GArXh+FAfBAw5UexUDAQESkRsfhJPwaH4YsEGAAJGisRGAQY7UCC9ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw==" /> +<img class="intLink" title="Copy" onclick="formatDoc('copy');" src="data:image/gif;base64,R0lGODlhFgAWAIQcAB1ChBFNsTRLYyJYwjljwl9vj1iE31iGzF6MnHWX9HOdz5GjuYCl2YKl8ZOt4qezxqK63aK/9KPD+7DI3b/I17LM/MrL1MLY9NHa7OPs++bx/Pv8/f///////////////yH5BAEAAB8ALAAAAAAWABYAAAWG4CeOZGmeaKqubOum1SQ/kPVOW749BeVSus2CgrCxHptLBbOQxCSNCCaF1GUqwQbBd0JGJAyGJJiobE+LnCaDcXAaEoxhQACgNw0FQx9kP+wmaRgYFBQNeAoGihCAJQsCkJAKOhgXEw8BLQYciooHf5o7EA+kC40qBKkAAAGrpy+wsbKzIiEAOw==" /> +<img class="intLink" title="Paste" onclick="formatDoc('paste');" src="data:image/gif;base64,R0lGODlhFgAWAIQUAD04KTRLY2tXQF9vj414WZWIbXmOrpqbmpGjudClFaezxsa0cb/I1+3YitHa7PrkIPHvbuPs+/fvrvv8/f///////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAWN4CeOZGmeaKqubGsusPvBSyFJjVDs6nJLB0khR4AkBCmfsCGBQAoCwjF5gwquVykSFbwZE+AwIBV0GhFog2EwIDchjwRiQo9E2Fx4XD5R+B0DDAEnBXBhBhN2DgwDAQFjJYVhCQYRfgoIDGiQJAWTCQMRiwwMfgicnVcAAAMOaK+bLAOrtLUyt7i5uiUhADs=" /> +</div> +<div id="textBox" contenteditable="true"><p>Lorem ipsum</p></div> +<p id="editMode"><input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" /> <label for="switchBox">Show HTML</label></p> +<p><input type="submit" value="Send" /></p> +</form> +</body> +</html> +</pre> +</div> + +<div class="note"><strong>Note:</strong> if you want to see how to standardize the creation and the insertion of your editor in your page, please see our <a class="internal" href="/@api/deki/files/6243/=rich-text-editor.zip" title="rich-text-editor.zip">more complete rich-text editor example</a>.</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("HTMLElement.contentEditable")}}</li> + <li>The {{htmlattrxref("contenteditable")}} global attribute</li> + <li><a href="/en-US/docs/Mozilla/Projects/Midas">Midas</a> (the scriptable text editor component)</li> + <li>{{cssxref("caret-color")}}, which lets you set the color of the text insertion caret</li> +</ul> diff --git a/files/pl/web/guide/index.html b/files/pl/web/guide/index.html new file mode 100644 index 0000000000..33786c5980 --- /dev/null +++ b/files/pl/web/guide/index.html @@ -0,0 +1,55 @@ +--- +title: Podręcznik web developera +slug: Web/Guide +tags: + - podręcznik + - sieć +translation_of: Web/Guide +--- +<p><strong><font><font>W tym artykule przedstawiono informacje o sposobie korzystania z określonych technologii i interfejsów API.</font></font></strong></p> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt class="landingPageList"><a href="/pl/docs/Learn/HTML">HTML</a></dt> + <dd class="landingPageList"><strong>Hipertekstowy język znaczników (<em>ang. HyperText Markup Language - HTML</em>)</strong> jest podstawowym językiem niemal wszystkich treści internetowych. Większość tego, co widzisz w przeglądarce jest opisane zasadniczo przy użyciu HTML.</dd> + <dt class="landingPageList"><a href="/pl/docs/Learn/CSS">CSS</a></dt> + <dd class="landingPageList"><strong>Kaskadowe arkusze stylów (<em>ang. Cascading Style Sheets - CSS</em>)</strong> to język używany do opisu prezentacji dokumetu napisanego w HTML.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/pl/docs/Web/Guide/Events">Zdarzenia</a></dt> + <dd class="landingPageList">Zdarzenia odnoszą się zarówno do wzorców projektowych używanych do asynchronicznej obsługi różnych incydentów występujących w czasie życia strony internetowej jak i do nazywania, charakteryzowania i stosowania dużej ilości incydentów różnego rodzaju.</dd> + <dt class="landingPageList"><a href="/pl/docs/Web/Guide/AJAX">AJAX</a></dt> + <dd class="landingPageList">AJAX jest pojęciem odnoszącym się do grupy technologii, umożliwiającym aplikacjom szybkie, stopniowe aktualizowanie interfejsu użytkownika, bez przeładowywania całej strony przegladarki. Czyni to aplikacje szybszymi i lepiej reagującymi na działania użytkownika.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/pl/docs/Web/Guide/Graphics">Grafika internetowa</a></dt> + <dd class="landingPageList">Nowoczesne strony internetowe i aplikacje często muszą prezentować grafike o różnym wyrafinowaniu.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/pl/docs/Web/Guide/API">Przewodnik po internetowych interfejsach API</a></dt> + <dd class="landingPageList">Wykaz wszystkich internetowych internfejsów API i wyjaśnienie do czego służą.</dd> + <dt><a href="https://developer.mozilla.org/pl/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></dt> + <dd>JavaScript to potężny język skryptowy używany do tworzenia aplikacji internetowych.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/pl/docs/Localizations_and_character_encodings">Lokalizacje i kodowanie znaków</a></dt> + <dd class="landingPageList">Przeglądarki przetwarzają wewnętrznie tekst jako Unicode. Jednak, dla transferu tekstu przez sieć do przegladarki stosuje się różne kodowanie znaków, polegajace na reprezentacji znaków w postaci bajtów, co jest uwarunkowane językiem treści (lokalizacją). <a class="external external-icon" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset">Specyfikacja HTML zaleca używanie kodowania UTF-8</a> (które reprezentuje cały Unicode) i niezależnie od użytego kodowania, deklarowanie kodowania w metadanych dokumentu HTML.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/pl/docs/Web/Guide/Mobile">Tworznie mobilnych stron i aplikacji</a></dt> + <dd class="landingPageList">Ta strona omawia kilka głównych technik stosowanych przy tworzeniu stron internetowych , które dobrze wyglądają i działają na urzadzeniach mobilnych. Jeżeli szukasz informacji o projekcie Firefox OS Mozillii, zobacz stronę <a href="https://developer.mozilla.org/en/Mozilla/Firefox_OS" title="Boot to Gecko">Firefox OS</a> . Interesująca może być też dla Ciebie strona o <a href="https://developer.mozilla.org/en/Mozilla/Firefox_for_Android">Firefox dla Android</a>.</dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt class="landingPageList"><a href="https://developer.mozilla.org/pl/docs/Web/Guide/Performance">Optymalizacja i wydajność</a></dt> + <dd class="landingPageList">Podczas tworzenia nowoczesnych aplikacji internetowych i stron jest ważne, aby działały one szybko i sprawnie. Pozwala to na efektywność zarówno na systemach dektopowych jak i urządzeniach przenośnych.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/pl/docs/Web/Guide/Parsing_and_serializing_XML">Parsowanie i serializowanie XML</a></dt> + <dd class="landingPageList">Ta platforma internetowa opisuje różne metody parsowania i serializowania dokumentów XML, z których każd ma swoje zalety i wady.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/pl/docs/Web/Guide/WOFF">Otwarty internetowy format czcionki (Web Open Font Format - WOFF)</a></dt> + <dd class="landingPageList"><strong>WOFF</strong> (<strong>Web Open Font Format</strong>) to format czcionki, który jest bezpłatny dla każdego uzytkownika internetu.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/pl/docs/Web/Guide/Using_FormData_Objects">Stosowanie obiektów FormData</a></dt> + <dd class="landingPageList">Obiekt <a href="https://developer.mozilla.org/en/DOM/XMLHttpRequest/FormData"><code>FormData</code></a> pozwala skompilować zestaw par klucz-wartość do wysłania przy użyciu <code>XMLHttpRequest</code>. Jest przeznaczony głównie do wysyłania danych formularzy, ale można go wykorzystać również do transmisji danych z kluczami poza formularzami. Transmisja odbywa się w tym samym formacie co metoda <code>submit()</code> formularzy, stosowaną gdy typ kodowania w formularza jest ustawiony na "multipart/form-data".</dd> + <dt class="landingPageList"><a href="/pl/docs/Glossary">Słownik</a></dt> + <dd class="landingPageList">Podaje definicje wielu pojęć związanych z siecią web i Internetem.</dd> +</dl> +</div> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/pl/docs/Web/Reference" title="/en-US/docs/Web/Reference">Informator web dewelopera</a></li> +</ul> diff --git a/files/pl/web/guide/liczniki_css/index.html b/files/pl/web/guide/liczniki_css/index.html new file mode 100644 index 0000000000..3c494e6af3 --- /dev/null +++ b/files/pl/web/guide/liczniki_css/index.html @@ -0,0 +1,86 @@ +--- +title: Liczniki CSS +slug: Web/Guide/Liczniki_CSS +tags: + - CSS + - Wszystkie_kategorie +translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +--- +<p> </p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Liczniki w CSS zostały opisane w sekcji <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a> dokumentacji CSS 2.1. Wartość licznika jest ustawiana poprzez użycie własności <a href="pl/CSS/counter-reset">counter-reset</a> oraz <a href="pl/CSS/counter-increment">counter-increment</a>, natomiast wyświetlana jest przy wykorzystaniu funkcji counter() lub counters() należących do własności <a href="pl/CSS/content">content</a>.</p> + +<h3 id="Zastosowanie_licznik.C3.B3w" name="Zastosowanie_licznik.C3.B3w">Zastosowanie liczników</h3> + +<p>Aby użyć licznika CSS, należy najpierw ustawić mu wartość (domyślnie jest to 0) przy pomocy własności <a href="pl/CSS/counter-reset">reset</a>. Aby wyświetlić wartość licznika w danym elemencie należy skorzystać z funkcji counter(). Poniższy przykład dodaje na początku każdego elementu <code>h1</code> "Sekcja <code>wartość licznika</code>:".</p> + +<pre> body { + counter-reset: sekcja; /* Ustawienie licznika sekcja na 0 */ + } + h1::before { + counter-increment: sekcja; /* Zwiększa licznik sekcja */ + content: "Sekcja " counter(sekcja) ": "; /* Wyświetla licznik */ + } +</pre> + +<h3 id="Zagnie.C5.BCd.C5.BCanie_licznik.C3.B3w" name="Zagnie.C5.BCd.C5.BCanie_licznik.C3.B3w">Zagnieżdżanie liczników</h3> + +<p>Liczniki CSS mogą być szczególnie użyteczne przy listach uporządkowanych (<code>ol</code>), ponieważ nowa instancja licznika CSS jest automatycznie tworzona dla potomków danego elementu. Użycie funkcji counters() pozwala na dodanie ciągu znaków, który będzie oddzielał kolejne poziomy zagnieżdżonych liczników:</p> + +<pre> ol { + counter-reset: sekcja; /* Tworzy nową instancję licznika + sekcja w każdym elemencie ol */ + list-style-type: none; /* Usuwa domyślnie wyświetlany licznik */ + } + li::before { + counter-increment: sekcja; /* Zwiększa tylko tę instancję + licznika sekcja */ + content: counters(sekcja, ".") " "; /* Wyświetla wartości wszystkich + instancji licznika sekcja, + oddzielając je ciągiem ".". */ + } +</pre> + +<p>Przykładowy HTML (w komentarzach podano wartość wygenerowanego licznika):</p> + +<pre><ol> + <li>item</li> <!-- 1 --> + <li>item <!-- 2 --> + <ol> + <li>item</li> <!-- 2.1 --> + <li>item</li> <!-- 2.2 --> + <li>item <!-- 2.3 --> + <ol> + <li>item</li> <!-- 2.3.1 --> + <li>item</li> <!-- 2.3.2 --> + </ol> + <ol> + <li>item</li> <!-- 2.3.1 --> + <li>item</li> <!-- 2.3.2 --> + <li>item</li> <!-- 2.3.3 --> + </ol> + </li> + <li>item</li> <!-- 2.4 --> + </ol> + </li> + <li>item</li> <!-- 3 --> + <li>item</li> <!-- 4 --> +</ol> +<ol> + <li>item</li> <!-- 1 --> + <li>item</li> <!-- 2 --> +</ol> +</pre> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<ul> + <li><a href="pl/CSS/counter-reset">counter-reset</a></li> + <li><a href="pl/CSS/counter-increment">counter-increment</a></li> +</ul> + +<p><span class="comment">potrzebna treść do artykułu</span></p> + +<p>{{ languages( { "en": "en/CSS_Counters", "fr": "fr/Compteurs_CSS" } ) }}</p> diff --git a/files/pl/web/guide/performance/index.html b/files/pl/web/guide/performance/index.html new file mode 100644 index 0000000000..00c4b9d7fe --- /dev/null +++ b/files/pl/web/guide/performance/index.html @@ -0,0 +1,14 @@ +--- +title: Optimization and performance +slug: Web/Guide/Performance +tags: + - Landing + - NeedsTranslation + - Optimization + - Performance + - TopicStub + - Web +translation_of: Web/Guide/Performance +--- +<p>When building modern Web apps and sites, it's important to make your content perform well. That is, to make it work quickly and efficiently. This lets it work effectively both for users of powerful desktop systems as well as for handheld devices with less power.</p> +<p>{{LandingPageListSubpages}}</p> |