Kurs HTML5 i JavaScript

Wstep

Koszyk Koszyk
  • Opis
  • Recenzje
  • Autor
  • Transkrypt
  • Pytania i odpowiedzi
  • QA

30 ocen

Wprowadzenie

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.

  1. Nowe elementy semantyczne w HTML
  2. Formularze w HTML5 i ich walidacja
  3. Geolokalizacja i interaktywna mapa z Google Maps
  4. Web Storage i przechowywanie danych
  5. Canvas oraz praktyczna aplikacja Sketchpad
  6. Player audio i autorski, responsywny odtwarzacz wideo
  7. Filtry z pomoca Web Workers oraz mechanizm Drag & Drop
  8. Aplikacja Chata real-time z node.js
  9. History API oraz aplikacje Offline

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.

Dlaczego wybrać właśnie ten kurs?

  1. 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!
  2. 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.
  3. 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ń.

Autor: Piotr Palarz

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.

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.

5

Średnia ocen autora

Ten kurs nie posiada jeszcze transkryptu. Choć bardzo się staramy, wygenerowanie transkryptów do wszystkich kursów jest bardzo czasochłonne. W wielu przypadkach wymaga zaangażowania drogiego oprogramowania i godzin pracy przy poprawianiu transkryptu tak, aby był on możliwie jak najlepszy.

Zależy nam na tym, aby przygotować transkrypty do wszystkich naszych treści. To jedyny sposób dla osób niedosłyszących, aby mogły wygodnie uczyć się technologii. Poza tym, transkrypty ułatwiają skanowanie kursu w poszukiwaniu informacji i jego indeksowanie.

Szukamy osób, które mogłyby nam pomóc w poprawianiu transkryptów. Jeśli masz chwilę wolnego czasu i interesuje Cię dany kurs, w zamian za taką pomoc chętnie udostępnimy Ci wybrany materiał. Wyślij swoje zgłoszenie tutaj, jeśli możesz pomóc nam rozwijać platformę.

  • Informacje
  • Lekcje

Autor: Piotr Palarz

Czas: 9 godzin 36 minut

Wersja: HTML5

Aktualizacja: 09.04.2020

  • Certyfikat w ramach Ścieżki
  • Dostęp z urządzeń przenośnych
  • Licencje dla firm i szkół
Podaruj w prezencie

Wprowadzenie

  • Wstep

  • Czym jest HTML5?

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

Manipulacja DOM

  • Wstep do manipulacji DOM

  • Nowe selektory w praktyce

  • Wstęp do classList

  • classList w praktyce

  • Atrybuty data-*

  • Praktyka z atrybutami data-*

Formularze

  • Wstep do formularzy

  • Nowe typy pól formularzy

  • Wstęp do walidacji formularzy

  • Walidator formularzy cz.1

  • Walidator formularzy cz.2

  • Walidator formularzy cz.3

Geolokalizacja

  • Wstep do geolokalizacji

  • Pozyskiwanie pozycji urządzenia

  • Mapa dojazdu z Google Maps cz.1

  • Mapa dojazdu z Google Maps cz.2

Web Storage

  • Wstep do Web Storage

  • Zapisywanie danych po stronie klienta

  • Zapamiętywacz danych formularza cz.1

  • Zapamiętywacz danych formularza cz.2

Praca z Canvas

  • Wstep do pracy z canvas

  • Prostokąty i linie

  • Łuki

  • Zapisywanie stanu

  • Bézier curve i Qadratic Curve

  • Rysowanie tekstu

  • globalCompositeOperation i globalAlpha

  • Cienie, wzorki i gradienty

  • Rysowanie obrazów

  • Maska przycinająca

  • Transformacje

  • Sketchpad cz.1

  • Sketchpad cz.2

Audio i Video

  • Wstep do Audio i Video

  • Konwertowanie plików Audio i Video

  • Praktyczne porady do plików Audio i Video

  • Audio i Video API

  • HTML5 Video Player cz.1

  • HTML5 Video Player cz.2

  • HTML5 Video Player cz.3

File API

  • Wstep do File API

  • Odczytywanie informacji o plikach

  • Odczytywanie treści plików

  • Tworzenie obiektów Blob

Web Workers

  • Wstep do Web Workers

  • Metody tworzenia workerów

  • Nakładanie filtrów na obrazy

Drag and Drop

  • Wstep do Drag and Drop

  • Praktykowanie Drag and Drop

  • Image Uploader cz.1

  • Image Uploader cz.2

WebSockets

  • Wstep do Web Sockets

  • Nawiązywanie połączenia z serwerem

  • Real-Time Chat cz.1

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

  • Real-Time Chat cz.3

History API

  • Wstep do History API

  • Praktyka

  • Wyszukiwarka w tabeli

Aplikacje Offline

  • Wstęp do Offline Applications

  • Przeniesienie aplikacji do Offline

Polyfills

  • Jak wesprzeć starsze przeglądarki?

Zakończenie

  • Dziękuję za uwagę

}