Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 765665 of HTML5

  • Ciąg znaków tej wersji: HTML/HTML5
  • Tytuł wersji: HTML5
  • Identyfikator wersji: 765665
  • Utworzono:
  • Autor: Jacob99
  • Czy jest aktualna? Nie
  • Komentarz
Etykiety: 

Zawartość wersji

PRZYKŁADY HTML5

Kolekcja przykładów pokazujących możliwości zastosowania języka HTML.

HTML5_Logo_128.png

HTML5 jest najnowszą wersją standardu opisującego język HTML. Termin ten możemy zdefiniować na dwa sposoby:

  • Jest to nowa wersja języka HTML, zawierająca nowe elementy, atrybuty i zachowania,
  • większy zestaw technologii, które pozwala na bardziej różnorodne i potężne tworzenie stron i aplikacji internetowych. Zestaw ten czasem nazywamy HTML5 & friends, jednak często skracamy do nazwy po prostu HTML5.

Zawarta poniżej treść przeznaczona jest do zastosowania przez wszystkich programistów, strona zawiera dużo informacji na temat technologii HTML5, która została opisana w kilku grupach podzielonych według ich funkcji.

  • Semantyka: pozwala na bardziej precyzyjne opisanie zawartości.
  • Komunikacja: pozwala w sposób nowoczesny na komunikację z serwerem.
  • Offline & Storage: pozwala stronom internetowym na bardziej efektywne przechowywanie danych lokalnie i w trybie offline.
  • Multimedia: odtwarzanie plików audio i wideo bezpośrednio z przeglądarki.
  • Efekty i Grafika 2D/3D: pozwala w znacznie bardziej zróżnicowany sposób prezentować możliwości stron lub aplikacji internetowych.
  • Wydajność & Integracja: zapewnia większą prędkość i lepszą optymalizację wykorzystania sprzętu komputerowego.
  • Dostęp do urządzenia: zastosowanie w wielu urządzeniach wejścia i wyjścia.
  • Style: pozwala autorom na tworzenie ładniejszych motywów.

Semantyka

Elementy sekcji zawarte w dokumencie HTML5
Poznaj nowe elementy przedstawiające sekcje dokumentu wprowadzone do HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} i {{HTMLElement("aside")}}.
Zastosowanie elementów audio i video
Elementy {{HTMLElement("audio")}} i {{HTMLElement("video")}} pozwalają zagnieżdżać i zarządzać zawartością multimediów.
Formularze w HTML5
Spojrzenie na ulepszenia formularzy sieciowych w HTML5: wymuszenie poprawności API, kilka nowych atrybutów, nowe wartości dla atrybutów {{HTMLElement("input")}} {{htmlattrxref("type", "input")}} i nowego elementu {{HTMLElement("output")}}.
Nowe semantyczne elementy 
Obok sekcji, elementów mediów i formularzy, są liczne, nowe elementy takie jak: {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, lub {{HTMLElement("meter")}} i {{HTMLElement("main")}}, zwiększenie ilości elementów poprawności HTML 5.
Ulepszenia w {{HTMLElement("iframe")}}
Używając atrybutów {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}} i {{htmlattrxref("srcdoc", "iframe")}} , autorzy mogą teraz precyzyjniej określać poziom bezpieczeństwa i pożądane wyświetlanie elementów {{HTMLElement("iframe")}}.
MathML
Pozwala na bezpośrednie umieszczanie formuł matematycznych.
Wprowadzenie do HTML5
Ten artykuł pokazuje jak przekazać przeglądarce, że używasz HTML 5 na swojej stronie internetowej lub w aplikacji.
Parser zgodny z HTML5
Parser, który przetwarza dokument HTML na DOM, został rozszerzony i teraz precyzyjnie definiuje zachowanie we wszystkich przypadkach, nawet w wypadku niepoprawnego HTML-a. To prowadzi do znacznie większej przewidywalności zachowania strony i współpracy między przeglądarkami zgodnymi z HTML 5.

Połączenia

Web Sockets (dwukierunkowa komunikacja z serwerem)
Pozwala tworzyć stabilne połączenie pomiędzy stroną i serwerem, i  wymieniać nie-HTML-owe dane.
Server-Sent Events (zdarzenia wysłane przez serwer)
Pozwala serwerowi na "własnowolne" wysyłanie zdarzeń do klienta, inaczej niż w przypadku klasycznego paradygmatu, w którym serwer mógł wysyłać dane tylko w odpowiedzi na zapytanie klienta.
WebRTC
Ta technologia, w której RTC oznacza Komunikację Czasu Rzeczywistego(Real-Time Communication), pozwala na łączenie się z innymi i kontrolowanie wideokonferencji bezpośrednio z przeglądarki, bez potrzeby korzystania z wtyczek lub zewnętrznych aplikacji.

Tryb Offline i przechowywanie

Zasoby offline: pamięć cache aplikacji
Firefox w pełni wspiera specyfikację zasobów offline HTML5. Większość innych przeglądarek wspiera ją w podobnym stopniu.
Zdarzenia online i offline
Firefox 3 wspiera zdarzenia WHATWG online i offline, dzięki czemu aplikacje i dodatki mogą wykryć czy istnieje aktywne połączenie internetowe, a także wykrywać kiedy połączenie wygaśnie i kiedy jest aktywne.
Sesje WHATWG po stronie klienta i trwałe przechowywanie (aka Magazyn DOM)
Sesje po stronie klienta i trwałe magazynowanie pozwalają aplikacjom sieciowym przechowywać dane strukturalne po stronie klienta.
IndexedDB
IndexedDB jest sieciowym standardem przechowywania znacznych ilości danych strukturalnych w przeglądarce i wysokiej wydajności wyszukiwania w tych danych za pomocą indeksów.
Używanie plików z aplikacji internetowych
Wsparcie dla nowego API plików HTML5 zostało dodane do Gecko, tworząc możliwość dostępu aplikacji internetowych do plików lokalnych wybranych przez użytkownika. Obejmuje też wsparcie dla wielokrotnego wyboru plików z użyciem {{HTMLElement("input")}} z atrybutem type file i nowym atrybutem elementu: multiple. Istnieje także FileReader.

Multimedia

Zastosowanie elementów audio i video w HTML5
Znaczniki {{HTMLElement("audio")}} i {{HTMLElement("video")}} pozwalają osadzać i manipulować nowymi zawartościami multimedialnymi.
WebRTC
Ta technologia, w której RTC oznacza Komunikację Czasu Rzeczywistego(Real-Time Communication), pozwala na łączenie się z innymi i kontrolowanie wideokonferencji bezpośrednio z przeglądarki, bez potrzeby korzystania z wtyczek lub zewnętrznych aplikacji.
Używanie API kamery internetowej
Pozwala używać, manipulować i przechowywać obrazy z kamerki komputerowej.
Track and WebVTT
Znacznik {{HTMLElement("track")}} pozwala  tworzyć napisy i rozdziały. WebVTT jest formatem ścieżek tekstowych.

EFEKTY I GRAFIKA 3D

Przewodnik po Canvas
Informacje o nowym elemencie {{HTMLElement("canvas")}} wraz z opisem jak działa użyty do rysowania grafik i obiektów w Firefoksie.
HTML5 text API dla elementów <canvas>
HTML5 text API jest teraz wspierane przez elementy {{HTMLElement("canvas")}}.
WebGL
WebGL przenosi grafikę 3D do sieci poprzez wprowadzenie API, które ściśle odpowiada OpenGl ES 2.0 i może być używane w znacznikach HTML5 {{HTMLElement("canvas")}}.
SVG (Scalable Vector Graphics) - skalowalna grafika wektorowa
Bazujący na XML-u format grafiki wektorowej, który może być bezpośrednio osadzony w HTML-u.

WYDAJNOŚĆ i iNTEGRACJA

Web Workers
Umożliwia przekazanie działania JavaScrit do wątków w tle, dzięki czemu zapobiega spowalnianiu wydarzeń interaktywnych.
XMLHttpRequest Poziom 2
Umożliwia asynchroniczne pobieranie części strony, co umożliwia wyświetlanie elementów dynamicznych, zmieniających się w zależności od czasu i działań użytkownika. Jest to "następca" Ajax-a.
JIT-compiling JavaScript engines (kompilowalne silniki JavaScript)
Nowa generacja silników JavaScript jest o wiele potężniejsza i ma świetną wydajność.
API do obsługi przycisku wstecz (History API)
Pozwala manipulować historią przeglądania. Jest użyteczne zwłaszcza na stronach ładujących interaktywnie nowe informacje.
Atrybut contentEditable: przekształć swoją stronę w encyklopedię!
HTML5 ustandaryzował atrybut contentEditable. Dowiedz się więcej o tej właściwości.
Przeciągnij i upuść
API 'przeciągnij i upuść' w HTML5 wspiera przeciąganie i upuszczanie elementów wewnątrz strony i pomiędzy stronami. Upraszcza to także API dla dodatków i aplikacji bazujących na technologiach Mozilli.
Zarządzanie aktywnością w HTML
Nowe atrybuty HTML5 activeElement i hasFocus są już wspierane.
Obsługa protokołów opartych na sieci
Możesz teraz zarejestrować aplikacje internetowe jako obsługę protokołów używając funkcji navigator.registerProtocolHandler().
requestAnimationFrame
Pozwala kontrolować renderowanie animacji dla uzyskania optymalnej wydajności.1
Pełnoekranowe API
Kontroluje użycie całego ekranu dla stron internetowych lub aplikacji sieciowych bez wyświetlania UI przeglądarki.
Blokowanie kursora
Powala zablokować wskaźnik do zawartości, więc  gry i podobne aplikacje nie utracą aktywności kiedy kursor będzie na granicy okna.
Zdarzenia online i offline
Aby stworzyć dobrze obsługującą tryb offline aplikację internetową trzeba wiedzieć, kiedy aplikacja jest rzeczywiście offline. Prawdę mówiąc, musisz wiedzieć też, kiedy aplikacja powróci do stanu online.

DOSTĘP DO URZĄDZENIA

 
Używanie API kamery internetowej
Pozwala używać, manipulować i przechowywać obrazy z kamerki komputerowej.
Zdarzenia dotykowe
Narzędzia do obsługi zdarzeń tworzonych przez użytkownika używającego ekranu dotykowego.
Geolokacja
Pozwól przeglądarce zlokalizować pozycję użytkownika przy użyciu geolokacji.
Wykrywanie orientacji urządzenia
Pobierz informację o zmianie orientacji urządzenia na którym pracuje przeglądarka. Może ona być użyta jako urządzenie wejściowe( np w grach reagujących na zmianę pozycji urządzenia) lub służyć przystosowaniu layoutu strony do aktualnej orientacji urządzenia (portrait lub landscape)
 
Blokowanie kursora
Powala zablokować wskaźnik do zawartości, więc  gry i podobne aplikacje nie utracą aktywności kiedy kursor będzie na granicy okna.

stylizacja

CSS zostało rozszerzone, aby móc o wiele wygodniej stylizować elementy. Jest często nazywane CSS3, choć CSS nie jest monolitycznym tworem, w którym wszystkie elementy są na poziomie 3. Część jest na poziomie 1, część na 4, Lub którymś z poziomów pośrednich.

Nowe właściwości stylizacji tła
Teraz jest możliwe dodanie cienia do box-ów używając {{cssxref("box-shadow")}}, a także można ustawić wielokrotne tło.
Bardziej fantazyjne obramowania
Teraz nie tylko możliwe jest stylizowanie obramowań za pomocą obrazów, używając {{cssxref("border-image")}} i związanych z pismem odręcznym właściwościami, ale także zaokrąglenia obramowań są wspierane przez właściwość {{cssxref("border-radius")}}.
Wpraw w ruch swój styl
Używając Przejść CSS do animacji przejść pomiędzy różnymi stanami lub używając Animacji CSS do animowania części strony, bez zdarzenia wywołującego, możesz teraz kontrolować elementy interaktywne na twojej stronie.
Poprawa typografii Typography improvement
Autorzy mają większą kontrolę dla osiągnięcia lepszej typografii. Mogą kontrolować {{cssxref("text-overflow")}} i dzielenie wyrazów, a także mogą dodawać cienie i precyzyjniej kontrolować dekoracje tekstu. Niestandardowe kroje można pobrać i zastosować za pomocą {{cssxref("@font-face")}}.
Nowe, prezentacyjne layouty
W celu polepszenia elastyczności designów zostały dodane dwa nowe layouty: CSS multi-column layout(wielokolumnowy layout CSS) i CSS flexible box layout(layout elastycznego pudełka CSS).
 

Źródło wersji

<div class="callout-box">
<div style="font: 20px 'Bebas Neue','League Gothic',Haettenschweiler,Impact,'Arial Narrow',sans-serif; text-transform: uppercase;">PRZYKŁADY HTML5</div>

<p><a href="/en-US/demos/tag/tech:html5" title="demos/tag/tech:html5/">Kolekcja przykładów</a> pokazujących możliwości zastosowania języka HTML.</p>

<p><a href="/en-US/docs/HTML/HTML5" title="html5"><img alt="HTML5_Logo_128.png" class="internal default" src="/@api/deki/files/6020/=HTML5_Logo_128.png" style="" /></a></p>
</div>

<p><span class="seoSummary"><strong>HTML5</strong> jest najnowszą wersją standardu opisującego język <a href="/pl/docs/HTML" title="HTML">HTML</a>. </span>Termin ten możemy zdefiniować na dwa sposoby:</p>

<ul>
 <li><span class="seoSummary">Jest to nowa wersja <em>języka</em> HTML, zawierająca nowe elementy, atrybuty i zachowania,</span></li>
 <li><span class="seoSummary">większy zestaw technologii, które pozwala na bardziej różnorodne i potężne tworzenie stron i aplikacji internetowych.</span> Zestaw ten czasem nazywamy <em>HTML5 &amp; friends</em>, jednak często skracamy do nazwy po prostu <em>HTML5</em>.</li>
</ul>

<p>Zawarta poniżej treść przeznaczona jest do zastosowania przez wszystkich programistów, strona zawiera dużo informacji na temat technologii HTML5, która została opisana w kilku grupach podzielonych według ich funkcji.</p>

<ul>
 <li><em>Semantyka</em>: pozwala na bardziej precyzyjne opisanie zawartości.</li>
 <li><em>Komunikacja</em>: pozwala w sposób nowoczesny na komunikację z serwerem.</li>
 <li><em>Offline &amp; Storage</em>: pozwala stronom internetowym na bardziej efektywne przechowywanie danych lokalnie i w trybie offline.</li>
 <li><em>Multimedia</em><strong>: odtwarzanie plików audio i wideo bezpośrednio z przeglądarki.</strong></li>
 <li><em>Efekty i Grafika 2D/3D</em>: pozwala w znacznie bardziej zróżnicowany sposób prezentować możliwości stron lub aplikacji internetowych.</li>
 <li><em>Wydajność &amp; Integracja</em>: zapewnia większą prędkość i lepszą optymalizację wykorzystania sprzętu komputerowego.</li>
 <li><em>Dostęp do urządzenia</em><strong>: zastosowanie w wielu urządzeniach wejścia i wyjścia.</strong></li>
 <li><em>Style</em>: pozwala autorom na tworzenie ładniejszych motywów.</li>
</ul>

<div class="cleared row topicpage-table">
<h2 id="Semantyka" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="vertical-align: middle; width: 64px; height: 64px; padding-right: 0.5em;" />Semantyka</h2>

<dl>
 <dt><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Elementy sekcji stosowane w dokumencie HTML5">Elementy sekcji zawarte w dokumencie HTML5</a></dt>
 <dd>Poznaj nowe elementy przedstawiające sekcje dokumentu wprowadzone do HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} i {{HTMLElement("aside")}}.</dd>
 <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Zastosowanie elementów audio i video</a></dt>
 <dd>Elementy {{HTMLElement("audio")}} i {{HTMLElement("video")}} pozwalają zagnieżdżać i zarządzać zawartością multimediów.</dd>
 <dt><a href="/en-US/docs/HTML/Forms_in_HTML" title="Formularze w HTML5">Formularze w HTML5</a></dt>
 <dd>Spojrzenie na ulepszenia formularzy sieciowych w HTML5: wymuszenie poprawności API, kilka nowych atrybutów, nowe wartości dla atrybutów {{HTMLElement("input")}} {{htmlattrxref("type", "input")}} i nowego elementu {{HTMLElement("output")}}.</dd>
 <dt>Nowe&nbsp;<span style="line-height: 1.5;">semantyczne&nbsp;</span><span style="line-height: 1.5;">elementy&nbsp;</span></dt>
 <dd>Obok sekcji, elementów mediów i formularzy, są liczne, nowe elementy takie jak: {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, lub {{HTMLElement("meter")}} i {{HTMLElement("main")}}, zwiększenie ilości <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">elementów poprawności HTML 5</a>.</dd>
 <dt>Ulepszenia w {{HTMLElement("iframe")}}</dt>
 <dd>Używając atrybutów {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}} i {{htmlattrxref("srcdoc", "iframe")}} , autorzy mogą teraz precyzyjniej określać poziom bezpieczeństwa i pożądane wyświetlanie elementów {{HTMLElement("iframe")}}.</dd>
 <dt><a href="/en-US/docs/MathML" title="MathML">MathML</a></dt>
 <dd>Pozwala na bezpośrednie umieszczanie formuł matematycznych.</dd>
 <dt><a href="/en-US/docs/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">Wprowadzenie do HTML5</a></dt>
 <dd>Ten artykuł pokazuje jak przekazać przeglądarce, że używasz HTML 5 na swojej stronie internetowej lub w aplikacji.</dd>
 <dt><a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">Parser zgodny z HTML5</a></dt>
 <dd>Parser, który przetwarza dokument HTML na DOM, został rozszerzony i teraz precyzyjnie definiuje zachowanie we wszystkich przypadkach, nawet w wypadku niepoprawnego HTML-a. To prowadzi do znacznie większej przewidywalności zachowania strony i współpracy między przeglądarkami zgodnymi z HTML 5.</dd>
</dl>

<h2 id="Po.C5.82.C4.85czenia" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="vertical-align: middle; width: 64px; height: 64px; padding-right: 0.5em;" />Połączenia</h2>

<dl>
 <dt><a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets (dwukierunkowa komunikacja z serwerem)</a></dt>
 <dd>Pozwala tworzyć stabilne połączenie pomiędzy stroną i serwerem, i&nbsp; wymieniać nie-HTML-owe dane.</dd>
 <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Server-Sent Events (zdarzenia wysłane przez serwer)</a></dt>
 <dd>Pozwala serwerowi na "własnowolne" wysyłanie zdarzeń do klienta, inaczej niż w przypadku klasycznego paradygmatu, w którym serwer mógł wysyłać dane tylko w odpowiedzi na zapytanie klienta.</dd>
 <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt>
 <dd>Ta technologia, w której RTC oznacza Komunikację Czasu Rzeczywistego(Real-Time Communication), pozwala na łączenie się z innymi i kontrolowanie wideokonferencji bezpośrednio z przeglądarki, bez potrzeby korzystania z wtyczek lub zewnętrznych aplikacji.</dd>
</dl>

<h2 id="Tryb_Offline_i_przechowywanie" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="vertical-align: middle; width: 64px; height: 64px; padding-right: 0.5em;" />Tryb Offline i przechowywanie</h2>

<dl>
 <dt><a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Zasoby offline: pamięć cache aplikacji</a></dt>
 <dd>Firefox w pełni wspiera specyfikację zasobów offline HTML5. Większość innych przeglądarek wspiera ją w podobnym stopniu.</dd>
 <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Zdarzenia online i offline</a></dt>
 <dd>Firefox 3 wspiera zdarzenia WHATWG online i offline, dzięki czemu aplikacje i dodatki mogą wykryć czy istnieje aktywne połączenie internetowe, a także wykrywać kiedy połączenie wygaśnie i kiedy jest aktywne.</dd>
 <dt><a href="/en-US/docs/DOM/Storage" title="DOM/Storage">Sesje WHATWG po stronie klienta i trwałe przechowywanie (aka Magazyn DOM)</a></dt>
 <dd>Sesje po stronie klienta i trwałe magazynowanie pozwalają aplikacjom sieciowym przechowywać dane strukturalne po stronie klienta.</dd>
 <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt>
 <dd>IndexedDB jest sieciowym standardem przechowywania znacznych ilości danych strukturalnych w przeglądarce i wysokiej wydajności wyszukiwania w tych danych za pomocą indeksów.</dd>
 <dt><a href="/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Używanie plików z aplikacji internetowych</a></dt>
 <dd>Wsparcie dla nowego API plików HTML5 zostało dodane do Gecko, tworząc możliwość dostępu aplikacji internetowych do plików lokalnych wybranych przez użytkownika. Obejmuje też wsparcie dla wielokrotnego wyboru plików z użyciem <span style="font-family: monospace;">{{HTMLElement("input")}}</span> z <strong><a href="/en-US/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type">atrybutem type</a></strong> <span style="font-family: Courier New;">file</span> i nowym atrybutem elementu: <a href="/en-US/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a>. Istnieje także <a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>.</dd>
</dl>

<h2 id="Multimedia" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="vertical-align: middle; width: 64px; height: 64px; padding-right: 0.5em;" />Multimedia</h2>

<dl>
 <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Zastosowanie elementów audio i video w HTML5</a></dt>
 <dd>Znaczniki {{HTMLElement("audio")}} i {{HTMLElement("video")}} pozwalają osadzać i manipulować nowymi zawartościami multimedialnymi.</dd>
 <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt>
 <dd>Ta technologia, w której RTC oznacza Komunikację Czasu Rzeczywistego(Real-Time Communication), pozwala na łączenie się z innymi i kontrolowanie wideokonferencji bezpośrednio z przeglądarki, bez potrzeby korzystania z wtyczek lub zewnętrznych aplikacji.</dd>
 <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Używanie API kamery internetowej</a></dt>
 <dd>Pozwala używać, manipulować i przechowywać obrazy z kamerki komputerowej.</dd>
 <dt>Track and WebVTT</dt>
 <dd>Znacznik {{HTMLElement("track")}} pozwala&nbsp; tworzyć napisy i rozdziały. <a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> jest formatem ścieżek tekstowych.</dd>
</dl>

<h2 id="EFEKTY_I_GRAFIKA_3D" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="vertical-align: middle; width: 64px; height: 64px; padding-right: 0.5em;" />EFEKTY I GRAFIKA&nbsp;3D</h2>

<dl>
 <dt><a href="/en-US/docs/Canvas_tutorial" title="Przewodnik po Canvas">Przewodnik po Canvas</a></dt>
 <dd>Informacje o nowym elemencie <code>{{HTMLElement("canvas")}}</code> wraz z opisem jak działa użyty do rysowania grafik i obiektów w Firefoksie.</dd>
 <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">HTML5 text API dla elementów &lt;canvas&gt;</a></dt>
 <dd>HTML5 text API jest teraz wspierane przez elementy {{HTMLElement("canvas")}}.</dd>
 <dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt>
 <dd>WebGL przenosi grafikę 3D do sieci poprzez wprowadzenie API, które ściśle odpowiada OpenGl ES 2.0 i może być używane w znacznikach HTML5 {{HTMLElement("canvas")}}.</dd>
 <dt><a href="/en-US/docs/SVG" title="SVG">SVG (Scalable Vector Graphics) - skalowalna grafika wektorowa </a></dt>
 <dd>Bazujący na XML-u format grafiki wektorowej, który może być bezpośrednio osadzony w HTML-u.</dd>
</dl>

<div class="section">
<h2 id="WYDAJNO.C5.9A.C4.86_i_iNTEGRACJA" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="vertical-align: middle; width: 64px; height: 64px; padding-right: 0.5em;" />WYDAJNOŚĆ i iNTEGRACJA</h2>

<dl>
 <dt><a href="/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt>
 <dd>Umożliwia przekazanie działania JavaScrit do wątków w tle, dzięki czemu zapobiega spowalnianiu wydarzeń interaktywnych.</dd>
 <dt><code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Poziom 2</dt>
 <dd>Umożliwia asynchroniczne pobieranie części strony, co umożliwia wyświetlanie elementów dynamicznych, zmieniających się w zależności od czasu i działań użytkownika. Jest to "następca" <a href="/en-US/docs/AJAX" title="AJAX">Ajax-a.</a></dd>
 <dt>JIT-compiling JavaScript engines (kompilowalne silniki JavaScript)</dt>
 <dd>Nowa generacja silników JavaScript jest o wiele potężniejsza i ma świetną wydajność.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">API do obsługi przycisku wstecz (History API)</a></dt>
 <dd>Pozwala manipulować historią przeglądania. Jest użyteczne zwłaszcza na stronach ładujących interaktywnie nowe informacje.</dd>
 <dt><a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">Atrybut contentEditable: przekształć swoją stronę w encyklopedię!</a></dt>
 <dd>HTML5 ustandaryzował atrybut contentEditable. Dowiedz się więcej o tej właściwości.</dd>
 <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Przeciągnij i upuść</a></dt>
 <dd>API 'przeciągnij i upuść' w HTML5 wspiera przeciąganie i upuszczanie elementów wewnątrz strony i pomiędzy stronami. Upraszcza to także API dla dodatków i aplikacji bazujących na technologiach Mozilli.</dd>
 <dt><a href="/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Zarządzanie aktywnością w HTML</a></dt>
 <dd>Nowe atrybuty HTML5&nbsp;<code>activeElement</code> i <code>hasFocus</code> są już wspierane.</dd>
 <dt><a href="/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Obsługa protokołów opartych na sieci</a></dt>
 <dd>Możesz teraz zarejestrować aplikacje internetowe jako obsługę protokołów używając funkcji&nbsp;<code>navigator.registerProtocolHandler().</code></dd>
 <dt><a href="/en-US/docs/DOM/window.requestAnimationFrame" title="DOM/window.requestAnimationFrame"><code>requestAnimationFrame</code></a></dt>
 <dd>Pozwala kontrolować renderowanie animacji dla uzyskania optymalnej wydajności.1</dd>
 <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">Pełnoekranowe API</a></dt>
 <dd>Kontroluje użycie całego ekranu dla stron internetowych lub aplikacji sieciowych bez wyświetlania UI przeglądarki.</dd>
 <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Blokowanie kursora</a></dt>
 <dd>Powala zablokować wskaźnik do zawartości, więc&nbsp; gry i podobne aplikacje nie utracą aktywności kiedy kursor będzie na granicy okna.</dd>
 <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Zdarzenia online i offline</a></dt>
 <dd>Aby stworzyć dobrze obsługującą tryb offline aplikację internetową trzeba wiedzieć, kiedy aplikacja jest rzeczywiście offline. Prawdę mówiąc, musisz wiedzieć też, kiedy aplikacja powróci do stanu online.</dd>
</dl>

<h2 id="DOST.C4.98P_DO_URZ.C4.84DZENIA" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="vertical-align: middle; width: 64px; height: 64px; padding-right: 0.5em;" />DOSTĘP DO URZĄDZENIA</h2>

<dl>
 <dt>&nbsp;</dt>
 <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Używanie API kamery internetowej</a></dt>
 <dd>Pozwala używać, manipulować i przechowywać obrazy z kamerki komputerowej.</dd>
 <dt><a href="/en-US/docs/DOM/Touch_events" title="DOM/Touch_events">Zdarzenia dotykowe</a></dt>
 <dd>Narzędzia do obsługi zdarzeń tworzonych przez użytkownika używającego ekranu dotykowego.</dd>
 <dt><a href="/en-US/docs/Using_geolocation" title="Using geolocation">Geolokacja</a></dt>
 <dd>Pozwól przeglądarce zlokalizować pozycję użytkownika przy użyciu geolokacji.</dd>
 <dt><a href="/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Wykrywanie orientacji urządzenia</a></dt>
 <dd>Pobierz informację o zmianie orientacji urządzenia na którym pracuje przeglądarka. Może ona być użyta jako urządzenie wejściowe( np w grach reagujących na zmianę pozycji urządzenia) lub służyć przystosowaniu layoutu strony do aktualnej orientacji urządzenia (portrait lub landscape)</dd>
 <dt>&nbsp;</dt>
 <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Blokowanie kursora</a></dt>
 <dd>Powala zablokować wskaźnik do zawartości, więc&nbsp; gry i podobne aplikacje nie utracą aktywności kiedy kursor będzie na granicy okna.</dd>
</dl>

<h2 id="stylizacja" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="vertical-align: middle; width: 64px; height: 64px; padding-right: 0.5em;" />stylizacja</h2>

<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> zostało rozszerzone, aby móc o wiele wygodniej stylizować elementy. Jest często nazywane&nbsp;<a href="/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, choć CSS nie jest monolitycznym tworem, w którym wszystkie elementy są na poziomie 3. Część jest na poziomie 1,&nbsp;część na 4, Lub którymś z poziomów pośrednich.</p>

<dl>
 <dt>Nowe właściwości stylizacji tła</dt>
 <dd>Teraz jest możliwe dodanie cienia do box-ów używając {{cssxref("box-shadow")}}, a także można ustawić <a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">wielokrotne tło.</a></dd>
 <dt>Bardziej fantazyjne obramowania</dt>
 <dd>Teraz nie tylko możliwe jest stylizowanie obramowań za pomocą obrazów, używając {{cssxref("border-image")}} i związanych z pismem odręcznym właściwościami, ale także zaokrąglenia obramowań są wspierane przez właściwość {{cssxref("border-radius")}}.</dd>
 <dt>Wpraw w ruch swój styl</dt>
 <dd>Używając <a href="/en-US/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">Przejść CSS</a> do animacji przejść pomiędzy różnymi stanami lub używając <a href="/en-US/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">Animacji CSS</a> do animowania części strony, bez zdarzenia wywołującego, możesz teraz kontrolować elementy interaktywne na twojej stronie.</dd>
 <dt>Poprawa typografii Typography improvement</dt>
 <dd>Autorzy mają większą kontrolę dla osiągnięcia lepszej typografii. Mogą kontrolować {{cssxref("text-overflow")}} i dzielenie wyrazów, a także mogą dodawać <a href="/en-US/docs/CSS/text-shadow" title="CSS/text-shadow">cienie</a> i precyzyjniej kontrolować&nbsp;<a href="/en-US/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">dekoracje</a> tekstu. Niestandardowe kroje można pobrać i zastosować za pomocą {{cssxref("@font-face")}}.</dd>
 <dt>Nowe, prezentacyjne layouty</dt>
 <dd>W celu polepszenia elastyczności designów zostały dodane dwa nowe layouty:&nbsp;<a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS multi-column layout(wielokolumnowy layout CSS) </a>i <a href="/en-US/docs/CSS/Flexbox" title="CSS/Flexbox">CSS flexible box layout(layout elastycznego pudełka CSS)</a>.</dd>
</dl>
</div>
</div>

<dl>
 <dd>&nbsp;</dd>
</dl>
Przywróć do tej wersji