Masz już konto? Zaloguj się

Kurs HTML5 i JavaScript

Nowe specyfikacje HTML5 przy użyciu JavaScript dają niesamowite możliwości twórcom stron WWW. Mechanizmy Geolokacji, Aplikacji Offline, Wideo czy Canvas to standard, który już teraz możemy wykorzystać.

66 lekcji

9h 36min

5 (3 oceny)

HTML5 i JavaScript - Techniki Zaawansowane

Nowe specyfikacje HTML5 przy użyciu JavaScript dają niesamowite możliwości twórcom stron WWW. Mechanizmy Geolokacji, Aplikacji Offline, Wideo czy Canvas to standard, który już teraz możemy wykorzystać. Poznaj go na praktycznych przykładach z naszym obszernym kursem. Materiał, który masz przed sobą to kompendium nowoczesnych technik pracy ze stronami WWW, które powinien znać każdy webdeveloper.

Geolokalizacja i Web Storage w HTML5

Chwilę później zajmiemy się kolejnym bardzo ważnym w HTML5 tematem, czyli geolokalizacją. Na początku poznasz potrzebną teorię, po czym stworzymy interaktywną mapę dojazdu wykorzystującą Google Maps API. Aplikacja będzie umożliwiała wyświetlenie lokalizacji np. Twojego biura, a także wpisanie adresu, z którego chciałoby się w to miejsce dojechać. Geolokalizacja w HTML5 pomoże nam ten proces zautomatyzować, znajdując pozycję użytkownika i wstawiając ją na mapę, rysując trasę.W kolejnym rozdziale zajmiemy się przechowywaniem danych po stronie klienta, innym niż dotychczas szeroko wykorzystywane i nadużywane pliki cookies. Omówimy interfejs Web Storage, a także stworzymy aplikację, która będzie automatycznie zapisywać dane wpisane do formularza na wypadek gdyby użytkownik utracił połączenie z internetem lub nieumyślnie zamknął przeglądarkę. Po ponownym otwarciu strony, wpisane wcześniej dane załadują się automatycznie w odpowiednie pola.

Praca z funkcją Canvas

W kursie nie zabraknie również flagowej technologii dostępnej w HTML5, czyli elementu Canvas i możliwości tworzenia grafiki 2D. Omówimy wszystko co jest Ci potrzebne, aby zacząć pracować z tym elementem, a więc rysowanie prostokątów, linii, łuków, krzywych, tekstu, tworzenie cieni, wzorków i gradientów, wstawianie zewnętrznych obrazów na Canvas, tworzenie masek przycinających, a także wykorzystywanie niezwykle ważnych transformacji. Rozdział ten zakończymy ciekawą, praktyczną aplikacją, którą będzie Sketchpad. Jeśli kiedykolwiek rysowałeś w programie Paint, to wiesz o czym mowa. Napiszemy bowiem jego uproszczoną wersję, dzięki której będziesz mógł wybrać kolor, a także wielkość pióra i za pomocą myszy rysować oraz zapisywać obrazy.

Audio i Video

Nie można mówić o HTML5 i pominąć jakże ważną rolę tej technologii w internetowej rozrywce, dlatego nie zabraknie również omówienia interfejsów Audio oraz Video. Dowiesz się dokładnie jak wstawiać na stronę dźwięk oraz filmy, z jakich formatów korzystać, aby zaspokoić potrzeby użytkowników różnych przeglądarek, a także jak jeden plik skonwertować na różne, potrzebne formaty. Następnie stworzymy od podstaw z wykorzystaniem programowania obiektowego, swój własny, responsywny odtwarzacz wideo.Dowiesz się jak stworzyć własne kontrolki do odtwarzania, pauzowania, wyświetlania postępu załadowania oraz między innymi zmiany poziomu głośności. Na koniec zaimplementujemy również fallback we Flashu dla tych przeglądarek, które nie wspierają natywnego odtwarzania wideo.Chwilę później poznasz interfejs File API. Dzięki poznanym metodom bez trudu odczytasz informacje o plikach wybranych z systemu przez użytkownika, na kilka sposobów odczytasz ich treść, a także utworzysz niezwykle przydatne obiekty Blob.

Web Workers oraz Drag & Drop

W kursie poznasz również technologię Web Workers, która umożliwia tworzenie zaawansowanych, wielowątkowych aplikacji wprost w przeglądarce internetowej. Po omówieniu podstaw, dowiesz się jakie są sposoby tworzenia Workerów, a następnie stworzymy ciekawy przykład, w którym wykorzystamy zdjęcie oraz element Canvas. W tym celu stworzymy filtr, który 1000 razy nałożymy na zdjęcie, pokazując tym samym ogromną zaletę Web Workerów, czyli nie blokowanie głównego wątku strony, gdy w tle wykonywane są ciężkie obliczenia.Następnie zajmiemy się interfejsem Drag'n'Drop, który umożliwia m. in. przeciąganie elementów drzewa DOM w obrębie przeglądarki, przypisywanie im danych, a także odczytywanie ich na elemencie, nad którym zostały upuszczone. Dowiesz się na co zwrócić uwagę by tworzyć kod, który zadziała w różnych przeglądarkach internetowych. Na koniec stworzymy bardzo ciekawy, praktyczny przykład, a będzie to uploader zdjęć wykorzystujący technologię AJAX. Zaimplementujemy możliwość przeciągania zdjęć do przeglądarki, generowania ich miniatur w locie dzięki File API, a także przesyłania ich na serwer bez przeładowywania strony. Po stronie serwera zdjęcia odbierzemy z użyciem języka PHP.

Web Sockets i inne przydatne funkcje

Chwilę potem poznasz genialne możliwości związane z rewolucją w dwukierunkowej komunikacji na linii klient-serwer, czyli technologię Web Sockets. Dowiesz się jakie są ogromne zalety omawianej technologii, jak połączyć się z serwerem, a także jak wysłać do niego informacje i odebrać informację zwrotną. Tutaj również nie zabraknie praktycznego przykładu, jakim będzie stworzony czat, w którym wielu użytkowników jednocześnie będzie się mogło ze sobą komunikować w czasie rzeczywistym. Stworzymy od podstaw całą logikę aplikacji po stronie klienta, a także zaimplementujemy własny serwer z użyciem Node.js. Serwer będzie zarządzał podłączonymi użytkownikami, a także przesyłał do innych stosowne informacje i statusy.W kursie omówimy również interfejs History API, dzięki któremu będziesz mógł manipulować historią przeglądarki w obrębie domeny. Poznane metody umożliwią Ci tworzenie punktów w historii przeglądarki, a także przypisywanie im stosownych danych. Później dzięki przyciskom "Wstecz" oraz "Do przodu" będziesz mógł przypisane wcześniej dane odczytywać i zmieniać treść na stronie. To świetny sposób na tworzenie aplikacji, które działają bez przeładowywania strony.Na koniec stworzymy aplikację filtrującą wiersze tabeli w zależności od wpisanej frazy. Wyszukiwania będą zapisywane w historii i będziemy mogli między nimi przeskakiwać używając wspomnianych wcześniej przycisków przeglądarki.W ostatnim rozdziale kursu omówimy możliwość tworzenia aplikacji działających bez aktywnego połączenia z internetem. Dzięki temu będziesz mógł zareagować np. na sytuację, gdy użytkownik Twojej witryny utraci połączenie z serwerem, a witryna nadal będzie mogła poprawnie funkcjonować. Jako przykład, przeniesiemy wcześniej stworzoną aplikację do offline i dowiesz się na co zwrócić uwagę, by wszystko działało jak należy.

Podsumowując, kurs zawiera między innymi:

  • Nowe elementy semantyczne w HTML
  • Formularze w HTML5 i ich walidacja
  • Geolokalizacja i interaktywna mapa z Google Maps
  • Web Storage i przechowywanie danych
  • Canvas oraz praktyczna aplikacja Sketchpad
  • Player audio i autorski, responsywny odtwarzacz wideo
  • Filtry z pomocą Web Workers oraz mechanizm Drag & Drop
  • Aplikacja Chata real-time z node.js
  • History API oraz aplikacje Offline

Dla kogo jest ten kurs?

Kurs przeznaczony jest dla osób, które znają już podstawy HTML, a także JavaScript. Jest to esencja praktycznej wiedzy dla tych z Was, którzy już projektują strony WWW i ten materiał pokaże im najnowsze techniki pracy oraz nowości, które już teraz wykorzystacie w swoich projektach. Jeśli dopiero zaczynasz swoją przygodę z JavaScript i HTML, polecamy przerobienie wcześniej naszych kursów podstawowych: HTML Podstawy, HTML w Praktyce, HTML5 oraz Strony WWW w CSS3.

Czego się nauczysz?

  • Nowe elementy semantyczne w HTML

  • Formularze w HTML5 i ich walidacja

  • Geolokalizacja i interaktywna mapa z Google Maps

  • Web Storage i przechowywanie danych

  • Canvas oraz praktyczna aplikacja Sketchpad

  • Player audio i autorski, responsywny odtwarzacz wideo

  • Filtry z pomoca Web Workers oraz mechanizm Drag & Drop

  • Aplikacja Chata real-time z node.js

  • History API oraz aplikacje Offline

Zawartość

HTML5 i JavaScript

15 rozdziały 66 lekcji 9h 36min

  • Wprowadzenie

    26min

    Wstep

    Podgląd lekcji

    10min

    Czym jest HTML5?

    Podgląd lekcji

    8min

    Jak korzystać z plików źródłowych

    8min

  • Manipulacja DOM

    40min

    Wstep do manipulacji DOM

    9min

    Nowe selektory w praktyce

    9min

    Wstęp do classList

    4min

    classList w praktyce

    6min

    Atrybuty data-*

    4min

    Praktyka z atrybutami data-*

    7min

  • Formularze

    1h 4min

    Wstep do formularzy

    8min

    Nowe typy pól formularzy

    9min

    Wstęp do walidacji formularzy

    9min

    Walidator formularzy cz.1

    12min

    Walidator formularzy cz.2

    14min

    Walidator formularzy cz.3

    12min

  • Geolokalizacja

    42min

    Wstep do geolokalizacji

    7min

    Pozyskiwanie pozycji urządzenia

    7min

    Mapa dojazdu z Google Maps cz.1

    13min

    Mapa dojazdu z Google Maps cz.2

    Podgląd lekcji

    15min

  • Web Storage

    32min

    Wstep do Web Storage

    5min

    Zapisywanie danych po stronie klienta

    6min

    Zapamiętywacz danych formularza cz.1

    12min

    Zapamiętywacz danych formularza cz.2

    8min

  • Praca z Canvas

    1h 31min

    Wstep do pracy z canvas

    8min

    Prostokąty i linie

    12min

    Łuki

    6min

    Zapisywanie stanu

    2min

    Bézier curve i Qadratic Curve

    5min

    Rysowanie tekstu

    4min

    globalCompositeOperation i globalAlpha

    7min

    Cienie, wzorki i gradienty

    8min

    Rysowanie obrazów

    4min

    Maska przycinająca

    2min

    Transformacje

    6min

    Sketchpad cz.1

    13min

    Sketchpad cz.2

    14min

  • Audio i Video

    1h 8min

    Wstep do Audio i Video

    11min

    Konwertowanie plików Audio i Video

    3min

    Praktyczne porady do plików Audio i Video

    Podgląd lekcji

    8min

    Audio i Video API

    5min

    HTML5 Video Player cz.1

    15min

    HTML5 Video Player cz.2

    19min

    HTML5 Video Player cz.3

    7min

  • File API

    27min

    Wstep do File API

    7min

    Odczytywanie informacji o plikach

    3min

    Odczytywanie treści plików

    10min

    Tworzenie obiektów Blob

    7min

  • Web Workers

    28min

    Wstep do Web Workers

    7min

    Metody tworzenia workerów

    9min

    Nakładanie filtrów na obrazy

    12min

  • Drag and Drop

    54min

    Wstep do Drag and Drop

    8min

    Praktykowanie Drag and Drop

    16min

    Image Uploader cz.1

    13min

    Image Uploader cz.2

    17min

  • WebSockets

    56min

    Wstep do Web Sockets

    7min

    Nawiązywanie połączenia z serwerem

    5min

    Real-Time Chat cz.1

    16min

    Real-Time Chat cz.2 - tworzenie serwera z Node.js

    10min

    Real-Time Chat cz.3

    19min

  • History API

    25min

    Wstep do History API

    3min

    Praktyka

    7min

    Wyszukiwarka w tabeli

    16min

  • Aplikacje Offline

    14min

    Wstęp do Offline Applications

    7min

    Przeniesienie aplikacji do Offline

    8min

  • Polyfills

    7min

    Jak wesprzeć starsze przeglądarki?

    7min

  • Zakończenie

    3min

    Dziękuję za uwagę

    3min

Autor kursu

Piotr Palarz

Web Developer

Średnia ocen autora: 5

Bio
Web Developer. Na co dzień tworzy strony i aplikacje internetowe. Pasjonat technologii webowych, miłośnik JavaScriptu oraz grafik hobbysta. W wolnych chwilach stale poszerza swoją wiedzę, czyta, publikuje w Internecie, a także stara się aktywnie spędzać czas z dala od ekranu monitora.
Inne kursy tego autora
JavaScript Narzędzia Deweloperskie w Przeglądarce Visual Studio Code Laravel Vue.js

Dołącz do ponad 10 tys. zadowolonych z naszych kursów

Wszystko świetnie wytłumaczone, przyjemny kurs

Bartosz Kozień

6 maja 2021

Józef Woziwoda

24 lipca 2021

Paweł Baranowski

18 lutego 2022

Kurs HTML5 i JavaScript

  • 66 lekcji wideo

  • 9h 36min materiału

  • Ostatnia rewizja 10.04.2020

  • Certyfikat w ramach ścieżek

  • Dostęp z urządzeń mobilnych

Dlaczego wybrać właśnie ten kurs?

Efektywna nauka

Kurs wideo to najbardziej efektywna a zarazem najprzyjemniejsza forma nauki. Jest on tak prowadzony, byś cały czas mógł go śledzić z zainteresowaniem i zaangażowaniem, a także czerpać satysfakcję ze zdobytej wiedzy!

Wiedza ekspertów

Wiedza, którą otrzymujesz w tym kursie, to nie tylko sucha teoria, ale również wskazówki od praktyka z wieloletnim doświadczeniem, dzięki którym dużo łatwiej będzie Ci opanować materiał i pracować efektywniej.

Praktyczne przykłady

Uczysz się na praktycznych przykładach. Kurs, który masz przed sobą to esencja praktycznej wiedzy i doświadczenia a także wzorów, które oszczędzą Ci godziny pracy i poszukiwań.

Pytania i odpowiedzi

Przeczytaj najczęściej zadawane pytania

Masz więcej pytań?

Porozmawiaj z nami na na czacie

Wyślij nam e-mail

Zadzwoń +48 880880606

Czy każdy kurs ma pliki źródłowe?

Nie każdy. Jeśli pliki są dostępne dla danego kursu, znajdziesz je w zakładce źródła. Niektóre kursy nie posiadają źródeł ponieważ nie są potrzebne, inne nie mogły być zamieszczone np. ze względu na prawa autorskie do wykorzystania komercyjnych prac naszych autorów. Staramy się aby kursy były maksymalnie praktyczne i chętnie pokazujemy zaplecze zawodowe naszych autorów, ale niekiedy nie możemy dołączyć go w postaci źródeł.

Jak jest skonstruowany kurs?

Kurs składa się z rozdziałów oraz lekcji. Staramy się, aby optymalnie kursy miały 5-7 rozdziałów po około 5-10 lekcji w każdym. W ten sposób nauka jest optymalna a podtrzymanie uwagi staje się łatwiejsze. Rekomendujemy przerabianie nie więcej niż jednego rozdziału naraz a po jego przerobieniu powtórzenie materiału we własnym zakresie.

Jak najlepiej wykorzystać kurs?

Potraktuj kurs jako inspirację do własnej pracy. Tam, gdzie się da staraj się powtarzać czynności, które wykonuje autor. Nie powtarzaj ich jednak bezmyślnie - spróbuj zmodyfikować przykłady i dostosować je do swoich potrzeb. W ten sposób przyswoisz materiał jeszcze lepiej!

Jak mogę uzyskać dostęp do kursu?

Możesz albo wykupić ten konkretny kurs przez koszyk, uzyskując do niego (i jego rewizji) bezterminowy dostęp, albo wykupić wariant abonamentu, który obejmuje dany kurs i w ten sposób oglądać go oraz inne materiały na platformie tak długo, jak Twój abonament jest aktywny.

Czy kurs jest aktualny?

Staramy się aby wszystkie materiały na stronie były aktualne. Nie znaczy to, że kurs powstał bardzo niedawno. Często na stronie znajdziesz trochę starsze kursy, jednak regularnie wykonujemy ich rewizję i zmieniamy lekcje - czy to przez dodanie stosownych komentarzy z aktualizacją, czy poprzez nagranie danej lekcji jeszcze raz. Datę ostatniej rewizji znajdziesz w informacjach o kursie.

Czym się różni kurs od warsztatu i ścieżki?

Kursy to kilku godzinne, kompleksowe opracowanie danego zagadnienia, podzielone na lekcje i rozdziały. Często uzupełniają je Warsztaty, które mają formę jednej dłuższej, praktycznej lekcji (30min-1h), natomiast ścieżki stanowią zbiór jednych i drugich materiałów - ułożoną z kursów i warsztatów playlistę, która pozwala Ci kompleksowo opanować dane zagadnienie.

We frontendzie nie można stać w miejscu, niezależnie od tego, czy jest się początkującym, czy zaawansowanym. Narzędzia i techniki się zmieniają, więc trzeba cały czas trzymać rękę na pulsie. Jako twórca kursów i programista mogę spokojnie polecić eduweb.pl jako aktualne i dobre źródło wiedzy.

Adam Romański

helloroman.com

Zacznij naukę w HTML5 i JavaScript

  • 66 lekcji wideo

  • 9h 36min materiału

  • Ostatnia rewizja 10.04.2020

  • Certyfikat w ramach ścieżek

  • Dostęp z urządzeń mobilnych