HTML5 i JavaScript: Mapa dojazdu z Google Maps cz.1

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.