From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pl/web/guide/ajax/index.html | 23 +++ .../web/guide/ajax/na_pocz\304\205tek/index.html" | 221 +++++++++++++++++++++ files/pl/web/guide/api/index.html | 25 +++ files/pl/web/guide/css/kolumny_css3/index.html | 65 ++++++ .../guide/css/sprawdzanie_media_queries/index.html | 116 +++++++++++ files/pl/web/guide/graphics/index.html | 41 ++++ .../pl/web/guide/html/editable_content/index.html | 216 ++++++++++++++++++++ files/pl/web/guide/index.html | 55 +++++ files/pl/web/guide/liczniki_css/index.html | 86 ++++++++ files/pl/web/guide/performance/index.html | 14 ++ 10 files changed, 862 insertions(+) create mode 100644 files/pl/web/guide/ajax/index.html create mode 100644 "files/pl/web/guide/ajax/na_pocz\304\205tek/index.html" create mode 100644 files/pl/web/guide/api/index.html create mode 100644 files/pl/web/guide/css/kolumny_css3/index.html create mode 100644 files/pl/web/guide/css/sprawdzanie_media_queries/index.html create mode 100644 files/pl/web/guide/graphics/index.html create mode 100644 files/pl/web/guide/html/editable_content/index.html create mode 100644 files/pl/web/guide/index.html create mode 100644 files/pl/web/guide/liczniki_css/index.html create mode 100644 files/pl/web/guide/performance/index.html (limited to 'files/pl/web/guide') 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 +--- +

 

+

"Getting Started" box, if there is no "Getting Started" article yet written, should be populated with another featurearticle or tutorial.

+
Na początek
+Wprowadzenie do AJAX-a.
+
+

AJAX (ang. Asynchronous JavaScript and XML, asynchroniczny JavaScript i XML) nie jest technologią sam w sobie, lecz terminem określającym "nowe" podejście do jednoczesnego wykorzystania takich istniejących technologii razem, jak: HTML lub XHTML, kaskadowe arkusze stylów, JavaScript, obiektowy model dokumentu, XML, XSLT oraz obiekt XMLHttpRequest. 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.

+
+ +

Dokumentacja

Na początek
Ten artykuł prowadzi czytelnika przez podstawy AJAX-u i podaje dwa proste przykłady, na początek.
Ajax: Nowe podejście do aplikacji sieciowych
Jesse James Garrett z adaptive path napisał ten artykuł w lutym 2005 roku. Przedstawia w nim AJAX i jemu pokrewne koncepcje.
A Simpler Ajax Path
"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."
Fixing the Back Button and Enabling Bookmarking for AJAX Apps
Mike Stenhouse opisuje kilka sposobów na poradzenie sobie podczas tworzenia aplikacji AJAX z problemamami dotyczącymi przycisku Wstecz i zakładek.
Ajax Mistakes
Alex Bosworth pisze o błędach popełnianych przez programistów tworzących aplikacje w AJAX-ie.

Pokaż wszystkie...

Społeczność

  • Obejrzyj fora Mozilli...

{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}

Narzędzia

Pokaż wszystkie...

Przykłady

Powiązane tematy

HTML, XHTML, CSS, DOM, JavaScript, XML, XMLHttpRequest, XSLT, DHTML

Wybrane tematy
+

Categories

+

Interwiki Language Links

+

 

+

 

+ +

{{ 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" } ) }}

diff --git "a/files/pl/web/guide/ajax/na_pocz\304\205tek/index.html" "b/files/pl/web/guide/ajax/na_pocz\304\205tek/index.html" new file mode 100644 index 0000000000..1e4a4ec491 --- /dev/null +++ "b/files/pl/web/guide/ajax/na_pocz\304\205tek/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 +--- +

+

Ten artykuł pozwoli Ci poznać podstawy technologii AJAX oraz poda dwa proste, gotowe do użycia przykłady. +

+

Czym jest AJAX?

+

AJAX (Asynchronous JavaScript and XML) 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. +

Dzięki tym cechom możesz: +

+ +

Termin AJAX jest akronimem. A pochodzi od "asynchroniczny", co znaczy, że możesz wysyłać zapytania HTTP do serwera i robić inne rzeczy w trakcie oczekiwania na odpowiedź. JA pochodzi od "JavaScript", a X pochodzi od "XML". +

+

Krok 1 – powiedz "Poproszę!", czyli jak wykonać zapytanie HTTP

+

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ą XMLHTTP. Później Mozilla, Safari i inne przeglądarki również dodały taki obiekt, implementując klasę XMLHttpRequest, która obsługuje metody i właściwości oryginalnego obiektu ActiveX. +

W rezultacie, w celu stworzenia międzyprzeglądarkowej instancji (obiektu) potrzebnej nam klasy, należy wpisać: +

+
if (window.XMLHttpRequest) { // Mozilla, Safari, Opera ...
+    http_request = new XMLHttpRequest();
+} else if (window.ActiveXObject) { // IE
+    http_request = new ActiveXObject("Microsoft.XMLHTTP");
+}
+
+

(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). +

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 mime-type. Aby rozwiązać ten problem, można użyć dodatkowej metody do nadpisania nagłówka wysyłanego przez serwer, jeśli nie jest to text/xml. +

+
http_request = new XMLHttpRequest();
+http_request.overrideMimeType('text/xml');
+
+

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 onreadystatechange obiektu funkcji JavaScript, której będziesz używał, na przykład: +

http_request.onreadystatechange = nameOfTheFunction; +

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: +

+
http_request.onreadystatechange = function(){
+    // instrukcje
+};
+
+

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 open() i send() klasy zapytania HTTP, tak jak na poniższym przykładzie: +

+
http_request.open('GET', 'http://www.example.org/some.file', true);
+http_request.send(null);
+
+ + + +

Parametr metody send() może być dowolną daną, którą chcesz wysłać do serwera w przypadku użycia metody POST. Dane powinny być umieszczone w formie używanej przez ciągi zapytań, czyli: +

name=value&anothername=othervalue&so=on +

Należy pamiętać o zakodowaniu każdej wysyłanej wartości funkcją encodeURIComponent. 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. +

Zwróć uwagę na to, że jeśli chcesz wysłać dane metodą POST, musisz zmienić typ MIME swojego zapytania, używając składni: +

+
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+
+

W przeciwnym wypadku, serwer odrzuci dane wysłane metodą POST. +

+

Krok 2 – "Voilà!", czyli obsługa odpowiedzi serwera

+

Pamiętasz, że w trakcie wysyłania zapytania została podana nazwa funkcji JavaScript, która została przygotowana do obsługi odpowiedzi? +

http_request.onreadystatechange = nazwaFunkcji; +

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. +

+
if (http_request.readyState == 4) {
+    // wszystko jest OK, odpowiedź została odebrana
+} else {
+    // ciągle nie gotowe
+}
+
+

Możliwe są następujące wartości readyState: +

+ +

(Źródło) +

Następnie należy sprawdzić kod odpowiedzi serwera HTTP. Wszystkie możliwe kody są opisane na stronie W3C. W tym przypadku interesuje nas tylko odpowiedź 200 OK. +

+
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)
+}
+
+

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: +

+ +

Krok 3 – "Do dzieła!" - Prosty przykład

+

Stwórzmy teraz proste zapytanie HTTP. JavaScript odpyta serwer o dokument HTML test.html, który zawiera tekst "Jestem testem.", a następnie wyświetlimy ten tekst przy użyciu funkcji alert(). +

+
<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>
+
+

W tym przykładzie: +

+ +

Możesz przetestować ten przykład tutaj i zobaczyć testowy plik tutaj. +

Uwaga: Jeżeli strona wywołana przez XMLHttpRequest nie jest poprawionym XML-em (np. kiedy jest plikiem tekstowym), linia http_request.overrideMimeType('text/xml'); spowoduje pojawienie się błędów w konsoli JavaScript w Firefoksie 1.5 i późniejszych. Zostało to opisane na stronie: https://bugzilla.mozilla.org/show_bug.cgi?id=311724. Jest to zachowanie właściwe; ten artykuł zostanie niedługo poprawiony, aby dostosować się do tej zmiany. +

Uwaga 2: 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 Content-Type: application/xml, 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 Cache-Control: no-cache, 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". +

Uwaga 3: jeżeli zmienna http_request jest używana globalnie, konkurujące funkcje wywołujące makeRequest() mogą nadpisywać siebie nawzajem, tworząc problemy. Określenie zmiennej http_request lokalnie dla funkcji i przekazywanie jej do funkcji alertContent() pozwala uniknąć takiej sytuacji. +

Uwaga 4: Aby zarejestrować funkcję zwrotną (callback function) onreadystatechange, nie możesz użyć argumentów. Dlatego też poniższy kod nie zadziała: +

+
http_request.onreadystatechange = alertContents(http_request); // (nie działa)
+
+

Z tego względu, aby zarejestrować tę funkcję pomyślnie, należy albo przekazać argumenty pośrednio poprzez funkcję anonimową, albo użyć http_request jako zmiennej globalnej. Oto przykłady: +

+
http_request.onreadystatechange = function() { alertContents(http_request); };  //1 (simultaneous request)
+http_request.onreadystatechange = alertContents;  //2 (global variable)
+
+

Metoda pierwsza pozwala mieć wiele zapytań przetwarzanych jednocześnie, a metoda trzecia może być używana jeśli http_request jest zmienną globalną. +

Uwaga 5: 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: https://bugzilla.mozilla.org/show_bug.cgi?id=238559). +

+
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);
+        }
+
+    }
+
+

Krok 4 – "Z archiwum X" czyli praca z odpowiedzią XML

+

W poprzednim przykładzie, po otrzymaniu odpowiedzi z serwera, użyliśmy właściwości responseText obiektu zapytania i zawierała ona treść pliku <tt>test.html</tt>. Teraz spróbujmy użyć właściwości responseXML. +

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: +

+
<?xml version="1.0" ?>
+<root>
+    Jestem testem.
+</root>
+
+

W skrypcie musimy tylko zmienić linię zapytania na: +

+
...
+onclick="makeRequest('test.xml')">
+...
+
+

Potem w alertContents() musimy zmienić linię alert(http_request.responseText); na: +

+
var xmldoc = http_request.responseXML;
+var root_node = xmldoc.getElementsByTagName('root').item(0);
+alert(root_node.firstChild.data);
+
+

W ten sposób pobraliśmy obiekt XMLDocument, zwrócony przez responseXML i skorzystaliśmy z metod DOM, aby dostać się do danych zawartych w dokumencie XML. Możesz zajrzeć do dokumentu XML test.xml tutaj oraz do zaktualizowanego skryptu tutaj. +

Aby dowiedzieć się więcej o metodach DOM, zajrzyj do dokumentów Mozilla's DOM implementation. +

+
+
+{{ 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 +--- +

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 Node.js. Na tej stronie można znaleźć kompletną listę wszystkich interfejsów API dostarczanych przez cały stos współczesnych technologii internetowej.

+ +

Interfejsy API od A do Z

+ +

{{ListGroups}}

+ +

Zobacz też

+ + 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 +--- +

+

+

Wprowadzenie

+

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. +

Szkic specyfikacji CSS3 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).

Aby zobaczyć, jak działają kolumny CSS, odwiedź (korzystając z Firefoksa 1.5) blog Roberta O'Callahana. +

+

Stosowanie kolumn

+

Liczba i szerokość kolumn

+

Własności CSS pozwalają okreslić liczbę i szerokość kolumn, w jakich zostanie wyświetlony tekst na stronie: -moz-column-count oraz -moz-column-width. +

-moz-column-count pozwala ustalić liczbę kolumn. Na przykład: +

+
<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>
+
+

Powyższy tekst powinien zostać w Firefoksie 1.5 wyświetlony w dwu kolumnach: +

+
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.
+

-moz-column-width pozwala natomiast określić minimalną pożądaną szerokość kolumn. Jeśli przy okazji własność -moz-column-count nie jest ustalona, przeglądarka automatycznie wyświetli tyle kolumn, ile zmieści się w jej oknie. Na przykład tekst: +

+
<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>
+
+

przeglądarka wyświetli następująco: +

+
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.
+

Szczegóły dotyczące kolumn CSS opisano w szkicu specyfikacji CSS3. +

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. +


+

+

Wyrówywanie wysokości kolumn

+

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. +

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 International Herald Tribune, 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 height 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. +

+

Odstęp między kolumnami

+

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ść -moz-column-gap ustawianą dla bloku kolumn: +

+
<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>
+
+
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.
+

Czytelność w starszych przeglądarkach

+

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. +

+

Zakończenie

+

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. +

+

Dodatkowe zasoby

+ +{{ 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 +--- +

{{SeeCompatTable}}

+ +

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.

+ +

Tworzenie listy media query

+ +

Zanim będziesz mógł ocenić wynik zapytania, musisz utworzyć obiekt {{domxref("MediaQueryList") }}, reprezentujący media query. Aby to uczynić użyj metody {{domxref("window.matchMedia") }}.

+ +

Na przykład, jeśli chcesz ustalić czy orientacja urządzenia jest pionowa czy pozioma, możesz skorzystać z takiego zapytania jak poniżej:

+ +
var mql = window.matchMedia("(orientation: portrait)"); /* sprawdzamy czy orientacja obiektu, jest pionowa; zwraca obiekt MediaQueryList */
+
+ +

Sprawdzanie rezultatu zapytania (query)

+ +

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 matches, która zwraca prawdę lub fałsz.

+ +
if (mql.matches) {
+  /* wykryta orientacja pionowa */
+} else {
+  /* wykryta orientacja pozioma */
+}
+
+ +

Otrzymywanie powiadomień

+ +

W przypadku, gdy chciałbyś na bieżąco dostawać alerty o stanie zapytania (query), skorzystaj z funkcji addListener(), 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 obserwator, który implementuje interfejs {{domxref("MediaQueryListListener") }}:

+ +
var mql = window.matchMedia("(orientation: portrait)");
+mql.addListener(zmianaOrientacji);
+zmianaOrientacji(mql);
+
+ +

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.

+ +

Zaimplementowana metoda zmianaOrientacji() pozwala nam wykonać pewne czynności, gdy zmieni się położenie urządzenia.

+ +
function zmianaOrientacji(mql) {
+  if (mql.matches) {
+    /* wykryta orientacja pionowa */
+  } else {
+    /* wykryta orientacja pozioma */
+  }
+}
+
+ +

Wyłączenie powiadomień

+ +

Gdy nie potrzebujesz już powiadomień dotyczących zmiany wartości zapytania, możesz wywołać metodę removeListener() dostępną w obiekcie {{domxref("MediaQueryList") }}:

+ +
mql.removeListener(zmianaOrientacji);
+
+ +

Zgodność z przeglądarką

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support9{{CompatGeckoDesktop("6.0") }}1012.15.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support3.0{{CompatUnknown}}1012.15
+
+ +

Zobacz także

+ + 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 +--- +

Nowoczesne strony czy też aplikacje internetowe często muszą prezentować pewne grafiki. 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.

+
+
+

Grafika 2D

+
+
+ Rysowanie grafiki z elementem canvas
+
+ Przewodnik wprowadzający do użycia elementu {{HTMLElement("canvas")}}, by rysować grafikę 2D w przeglądarce.
+
+ SVG
+
+ 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.
+
+

Wyświetl wszystko...

+
+
+

Grafika 3D

+
+
+ WebGL
+
+ Przewodnik, który ułatwi Tobie zaczęcie pracy z WebGL. Technologia ta umożliwia użycie standardu OpenGL ES prosto w przeglądarce.
+
+
+
+

 

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 +--- +

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.

+ +

How does it work?

+ +

All you have to do is set the {{htmlattrxref("contenteditable")}} attribute on nearly any HTML element to make it editable.

+ +

Here's a simple example which creates a {{HTMLElement("div")}} element whose contents the user can edit.

+ +
<div contenteditable="true">
+  This text can be edited by the user.
+</div>
+ +

Here's the above HTML in action:

+ +

{{ EmbedLiveSample('How_does_it_work') }}

+ +

Executing commands

+ +

When an HTML element has contenteditable set to true, the {{ domxref("document.execCommand()") }} method is made available. This lets you run commands 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 contentEditable, calling execCommand() will affect the currently active editable element.

+ +

Differences in markup generation

+ +

Use of contenteditable 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")}}).

+ +

Fortunately, in modern browsers things are somewhat more consistent. As of Firefox 55, Firefox has been updated to wrap the separate lines in {{htmlelement("div")}} elements, matching the behavior of Chrome, modern Opera, Edge, and Safari.

+ +

Try it out in the above example.

+ +
+

Note: Internet Explorer, which is no longer being developed, uses {{htmlelement("p")}} elements instead of <div>.

+
+ +

If you want to use a different paragraph separator, the above browsers all support {{domxref("document.execCommand")}}, which provides a DefaultParagraphSeparator command to allow you to change it. For example, to use {{htmlelement("p")}} elements:

+ +
document.execCommand("DefaultParagraphSeparator", false, "p");
+ +

Security

+ +

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 about:config:

+ +
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");
+ +

Example: A simple but complete rich text editor

+ +
+
<!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>
+
+
+ +
Note: if you want to see how to standardize the creation and the insertion of your editor in your page, please see our more complete rich-text editor example.
+ +

See also

+ + 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 +--- +

W tym artykule przedstawiono informacje o sposobie korzystania z określonych technologii i interfejsów API.

+ +
+
+
+
HTML
+
Hipertekstowy język znaczników (ang. HyperText Markup Language - HTML) jest podstawowym językiem niemal wszystkich treści internetowych. Większość tego, co widzisz w przeglądarce jest opisane zasadniczo przy użyciu HTML.
+
CSS
+
Kaskadowe arkusze stylów (ang. Cascading Style Sheets - CSS) to język używany do opisu prezentacji dokumetu napisanego w HTML.
+
Zdarzenia
+
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.
+
AJAX
+
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.
+
Grafika internetowa
+
Nowoczesne strony internetowe i aplikacje często muszą prezentować grafike o różnym wyrafinowaniu.
+
Przewodnik po internetowych interfejsach API
+
Wykaz wszystkich internetowych internfejsów API i wyjaśnienie do czego służą.
+
JavaScript
+
JavaScript to potężny język skryptowy używany do tworzenia aplikacji internetowych.
+
Lokalizacje i kodowanie znaków
+
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ą).  Specyfikacja HTML zaleca używanie kodowania UTF-8 (które reprezentuje cały Unicode) i niezależnie od użytego kodowania, deklarowanie kodowania w metadanych dokumentu HTML.
+
Tworznie mobilnych stron i aplikacji
+
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ę Firefox OS . Interesująca może być też dla Ciebie strona o Firefox dla Android.
+
+
+ +
+
+
Optymalizacja i wydajność
+
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.
+
Parsowanie i serializowanie XML
+
Ta platforma internetowa opisuje różne metody parsowania i serializowania dokumentów XML, z których każd ma swoje zalety i wady.
+
Otwarty internetowy format czcionki (Web Open Font Format - WOFF)
+
WOFF (Web Open Font Format) to format czcionki, który jest bezpłatny dla każdego uzytkownika internetu.
+
Stosowanie obiektów FormData
+
Obiekt FormData pozwala skompilować zestaw par klucz-wartość do wysłania przy użyciu XMLHttpRequest. 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 submit()  formularzy, stosowaną gdy typ kodowania w formularza jest ustawiony na "multipart/form-data".
+
Słownik
+
Podaje definicje wielu pojęć związanych z siecią web i Internetem.
+
+
+
+ +

See also

+ + 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 +--- +

 

+ +

Podsumowanie

+ +

Liczniki w CSS zostały opisane w sekcji Automatic counters and numbering dokumentacji CSS 2.1. Wartość licznika jest ustawiana poprzez użycie własności counter-reset oraz counter-increment, natomiast wyświetlana jest przy wykorzystaniu funkcji counter() lub counters() należących do własności content.

+ +

Zastosowanie liczników

+ +

Aby użyć licznika CSS, należy najpierw ustawić mu wartość (domyślnie jest to 0) przy pomocy własności reset. 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 h1 "Sekcja wartość licznika:".

+ +
  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 */
+  }
+
+ +

Zagnieżdżanie liczników

+ +

Liczniki CSS mogą być szczególnie użyteczne przy listach uporządkowanych (ol), 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:

+ +
  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 ".". */
+  }
+
+ +

Przykładowy HTML (w komentarzach podano wartość wygenerowanego licznika):

+ +
<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>
+
+ +

Zobacz także

+ + + +

potrzebna treść do artykułu

+ +

{{ languages( { "en": "en/CSS_Counters", "fr": "fr/Compteurs_CSS" } ) }}

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 +--- +

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.

+

{{LandingPageListSubpages}}

-- cgit v1.2.3-54-g00ecf