Autoryzowany Ośrodek Szkoleniowy Adobe i Maxon

Szkolenie HTML i CSS w praktyce – moduł II: Responsywne strony i aplikacje

Szkolenie HTML i CSS w praktyce – moduł II: Responsywne strony i aplikacje

Kategoria: www i aplikacje mobilne,

Poziom: moduł II

Czas trwania: 40 godzin

Cena: 3000 PLN (netto)

 

Cena szkolenia "Akcja z plusem": 3600 PLN (netto)

Opis szkolenia

Szkolenie HTML i CSS w praktyce – moduł II – responsywne strony i aplikacje obejmuje swym zakresem niezbędne umiejętności dla każdego web developera. Korzystanie ze stron internetowych wyłącznie na ekranie komputera to już przeszłość. W dzisiejszych czasach, smartfony są preferowanym wyborem na świecie, jeśli chodzi o korzystanie z Internetu (dotyczy to ponad 52 % użytkowników). Responsywne strony internetowe projektowane w technologii Responsive Web Design dopasowują się do rozdzielczości ekranu tak, by użytkownik mógł korzystać z jej pełnej funkcjonalności.

Kluczem do sukcesu Twojej strony www będzie między innymi takie zaprojektowanie serwisu, które uwzględni wszystkie niezbędne funkcjonalności oraz pozwoli na optymalne zaprezentowanie treści i wszelkich materiałów znajdujących się na niej na ekranach o różnych rozdzielczościach.

Responsywny design (responsive web design) to takie zaprojektowanie serwisu www, które umożliwi poprawne wyświetlenie strony internetowej w zależności od rozdzielczości urządzenia. Projektując responsywny układ strony www możemy określić wiele czynników, pod wpływem których układ elementów HTML będzie otrzymywał nowe właściwości CSS.

HTML5

HTML5 jest najnowszym standardem z zakresu kodowania. HTML5 jak każda aktualizacja, miał na celu usprawnienie pracy web developerów i poprawy doświadczeń użytkowników. Bez względu na to czy jesteś początkującym czy doświadczonym już web developerem powinieneś mieć świadomość zmian, jakie pojawiły się w architekturze HTML wraz z jego wprowadzeniem. Nowe tagi, w tym tagi, które kładą nacisk i zwiększają możliwości mediów i aniamcji, zastosowanie tagów wideo i audio, to tylko kilka przykładów z tych, które zostaną omówione podczas szkolenia przez naszego trenera.

Projektowanie i tworzenie responsywnych stron WWW – praca z CSS

Uczestnicy szkolenia HTML i CSS w praktyce – moduł II – responsywne strony i aplikacje przyjrzą się strukturze typowej strony pod kątem dostępności i optymalizacji pod wyszukiwarki. Wielu dotychczasowych uczestników szkolenia odnotowało znaczną poprawę pozycji ich stron w rankingu Google po wdrożeniu zmian zaproponowanych w tej części kursu.

Znaczna część szkolenia poświęcona jest na poszerzenie wiedzy z zakresu CSS. Omówimy liczne selektory oraz właściwości dostępne w CSS oraz zalety i wady używania wartości względnych (piksele, punkty etc.) oraz wartości absolutnych (procent, emów itd.).

Model pudełkowy jest punktem wyjściowym do ciekawej dyskusji na temat implementacji standardów w różnych popularnych wyszukiwarkach. Poznasz różnice między elementami liniowymi i blokowymi oraz dowiesz się jak marginesy, paddingi i właściwości obramowania mogą wpłynąć na układ strony. Model pudełkowy daje Ci również możliwość dodawania obrazków tła do elementów i to może dać świetne efekty, zwłaszcza z zastosowaniem przezroczystości przy użyciu PNG lub właściwości CSS3.

Chociaż większość projektów może być wykonana przy zastosowaniu właściwości float, bywa też, że lepszym rozwiązaniem okaże się pozycjonowanie absolutne i relatywne. Nasz wykładowca upewni się, że poznasz te sposoby rozmieszczania elementów na stronie i będziesz potrafił stworzyć dokładnie taki układ strony, jaki jest w projekcie.  

Media Queries – Zapytania o media

Media Queries są to zapytania umożliwiające przypisywanie elementom różnych stylów; reguły, które mogą być zastosowane pod pewnymi warunkami. Można to ująć w ten sposób: „Jeśli strona użytkownika ma rozdzielczość mniejszą niż określona wartość, wtedy zastosuj dane właściwości CSS”. Zyskujemy możliwość zmieniania wyglądu strony, zwiększenia rozmiaru tekstu, zmiany koloru tła, ustawienia menu w innym miejscu w zależności od rozdzielczości itd. Ale zapytania o media to nie tylko kwestia rozdzielczości. Możesz zmienić wygląd strony w oparciu o takie kryteria jak rodzaj ekranu, ilości kolorów czy orientacja.

Podczas szkolenia nauczysz się jak korzystać z rozszerzonych możliwości Media Queries. Zapoznasz się z formami zapisu reguł odpowiedzialnych za określanie minimalnych i maksymalnych wielkości w zależności od rozdzielczości ekranu użytkownika. Dowiesz się jakie reguły zastosować, aby poznać faktyczną szerokość i wysokość strony, uwzględniającą już obecność różnych elementów takich jak toolbar, które w rzeczywistości ograniczają obszar widoczności. Nasz wykładowca pokaże Ci w oparciu o jakie elementy należy zbudować witrynę, tak aby wyświetlała się ona właściwie na urządzeniu bez względu na jego rozdzielczość.

Biblioteki JavaScript

JavaScript wprowadza interaktywność na stronę WWW. Biblioteki JavaScript zawierają wiele przydatnych funkcji, które wykonują ważne zadania, takie jak np. tworzenie pokazu slajdów. Szkolenie przybliży Ci świat bibliotek JS. Nauczysz się je instalować i korzystać z możliwości jakie one oferują. Będziesz pracować ze skryptem Lightbox wykorzystującym bibliotekę jQuery, aby stworzyć własną galerię zdjęć. JQuery Cycle pozwoli Ci zrobić pokaz slajdów, który niewątpliwie okaże się przydatny w niejednym projekcie, jaki będziesz realizować w przyszłości.

Framework Bootstrap

Podczas szkolenia nauczysz się tworzenia responsywnych stron internetowych przy użyciu jednego z najbardziej popularnych frameworków jakim jest Bootstrap. Poznasz grid system i dowiesz się jak tworzyć funkcjonalne layouty. Będziesz pracował ze stylami w celu stworzenia czytelnej nawigacji, tabelek, typografii, przycisków i formularzy. Ponadto, nasz trener przedstawi Ci zestaw wtyczek iQuery do tworzenia rozwijanego menu, tabs, modal boxes, tooltips i innych. Znajomość tych funkcji pozwoli Ci tworzyć projekty wyświetlające się prawidłowo na smartfonach, tabletach, laptopach czy komputerach stacjonarnych, rozwiązując wiele z częstych wyzwań przed jakimi staje współczesny web developer.

JQuery Mobile

Podczas szkolenia przyjrzymy się bliżej JQuery Mobile. Jest to framework, biblioteka Java Script, która została zaprojektowana, aby uprościć  proces pisania kodu. Biblioteka ta pozwala na stosowanie skróconego kodu, który jest równie efektywny jak oryginalny, rozbudowany kod JavaScript. Strony są wyświetlane prawidłowo na smartfonach czy tabletach, czyli urządzeniach o różnych rozdzielczościach ekranu. Nie ma nawet konieczności nauki innego języka programowania, macie możliwość napisania kompletnych aplikacji na iOS i Androida od zera używając jedynie języka JavaScript. Brzmi jak świetne rozwiązanie i faktycznie tak jest.

Podczas szkolenia HTML i CSS w praktyce – moduł II – responsywne strony i aplikacje poznasz podstawy tworzenia aplikacji mobilnych przy użyciu frameworka jQuery Mobile. Nauczysz się podstawowej struktury strony, wstawiania typowych komponentów takich jak nagłówki, stopki, paski narzędzi, przyciski, listy czy układy wielokolumnowe.

Google Analytics oraz Google Search Console

Jako uczestnik szkolenia HTML i CSS w praktyce – moduł II – responsywne strony i aplikacje zapoznasz się z narzędziami Google Analytics oraz Google Search Console, które są źródłem cennych informacji. Będziesz miał możliwość m.in. identyfikacji stron, które słabo radzą sobie w wyszukiwarkach, określenia jak na Twoją stronę trafili użytkownicy, skąd pochodzą czy też jak długo pozostają na stronie. Raporty ecommerce pozwalają na analizę dokonywanych transakcji, przychodów i wielu innych danych.  Google Search Console jest narzędziem, które pozwala na sprawdzenie statusu indeksowania strony i zoptymalizowanie widoczności strony dla wyszukiwarek.

Ilość informacji dostarczana przez oba te narzędzia może wydawać się przytłaczająca. Podczas szkolenia dowiesz się jak wykorzystywać informacje gromadzone w statystykach strony WWW tak, aby Twoi klienci mogli odnieść wymierne korzyści i uzyskać przewagę nad konkurencją.

Dla kogo jest to szkolenie?

Szkolenie przeznaczone jest dla wszystkich twórców stron internetowych, którzy chcieliby efektywnie dostosowywać swoje projekty na urządzenia mobilne. W trakcie zajęć tworzymy responsywną stronę www zoptymalizowaną pod kątem wyszukiwarek. Wykorzystujemy HTML5, CSS 3 oraz podstawy JavaScript tak, by nasze prace nie tylko wyglądały atrakcyjnie na każdym sprzęcie ale także, poprawnie wykonywały założone działania.

Czego nauczymy?

  • Zasad wykorzystania Adobe Dreamweaver do pracy z kodem HTML i CSS
  • Zasad i sposobów tworzenia stron internetowych w oparciu o HTML i CSS
  • Wykorzystania nowoczesnych stylów CSS3
  • Tworzenia Media Queries – zapytań o media
  • Tworzenia prostych przejść i animacji CSS
  • Dostosowania stylów CSS dla różnych mediów
  • Framework Bootstrap – prototypowania i struktury strony
  • Podstaw języka JavaScript
  • Tworzenia interaktywnych formularzy
  • Projektowania stron responsywnych
  • Współpracy z jQuery i jQueryMobile
  • Współpracy z PhoneGapBuild
  • Zapisu natywnej aplikacji dla systemu Android, iOS, Windows
  • Publikacji na różne media
  • Testowania aplikacji na tabletach Android, iOS
  • Zasady publikacji w App Store i Google Play

Czego oczekujemy?

Podstawy znajomość Adobe Dreamweaver a także CSS i HTML

Program

Wykorzystane narzędzia i programy

Adobe Dreamweaver

  • Projektowanie serwisu
  • Tworzenie stron HTML
  • Tworzenie stylów CSS

Projektowanie i tworzenie stron WWW

  • Język HTML5
  • Struktura strony
  • Tworzenie zaawansowanych układów stron
  • Elementy graficzne
  • Wykorzystanie CSS

Praca z CSS

  • Nowoczesne style CSS
  • Selektory CSS
  • Projektowanie bez użycia class i id
  • Grafika CSS
  • Gradienty i zaokrąglone narożniki
  • Cienie

Animacje CSS

  • Tworzenie prostych przejść CSS
  • Interaktywne przejścia CSS

Media Queries – Zapytania o media

  • Tworzenie punktów kontrolnych
  • Dopasowanie wyglądu strony dla różnych wielkości ekranu
  • Skalowanie strony na urządzenia mobilne
  • Modyfikacja wyglądu strony
  • Usuwanie i dodawanie elementów w zależności od wielkości stron
  • Tworzenie mobilnej strony internetowej

Formularze HTML5

  • Typy pól formularza
  • Dodawanie formularzy na stronie internetowej i aplikacji
  • Walidacja HTML5
  • Współpraca z JavaScript

Biblioteki JavaScript

  • Poznajemy przykładowe biblioteki JavaScript
  • Instalacja biblioteki
  • Praca z Lightbox, jQueryCycle
  • Podstawy jQuery, Zepto, Respond, html5shiv
  • Selektory, zdarzenia i funkcje

Framework Bootstrap

  • Instalacja plików
  • Wprowadzenie do projektowania
  • Grid system, układ kolumn
  • Tabele, listy, typografia, obrazki, glyphicons i itp
  • Przyciski i formularze
  • Wykorzystanie komponentów Bootstrap
  • Tworzenie responsywnego projektu strony www
  • Testowanie gotowej strony na symulacjach urządzeń mobilnych

jQuery Mobile

  • Tworzenie mobilnych serwisów i aplikacji
  • Sterowanie wyglądem
  • Theme Roller – tworzenie własnych skórek
  • Dodajemy przejścia

Kontrolki w jQuery Mobile:

  • Toolbar
  • Navbar
  • Tabs
  • Panel
  • Popup
  • Listview
  • Table Reflow
  • Table Column Toggle i Filterable

Dostosowanie aplikacji

  • Tworzenie interfejsu
  • Wykrywanie urządzenia oraz CSS3 Media Queries
  • Wykorzystanie stylów CSS3 w HTML5
  • Efekty wizualne oraz animacje
  • Elastyczny układ projektu
  • Testowanie strony na urządzeniach mobilnych
  • Testowanie na tabletach, telefonach komórkowych
  • Tworzenie natywnej aplikacji iOS, Windows, Android
  • Współpraca z serwisem PhoneGapBuild
  • Zapis i tworzenie aplikacji
  • Testowanie aplikacji
  • Zasady publikacji pracy w App Store i Google Play

Dbamy o wysoką jakość szkoleń i komfort uczestników.

Standard szkoleń — co zapewniamy?

  • małe, kameralne grupy szkoleniowe,
  • sprawdzonych wykładowców – praktyków,
  • klimatyzowane sale,
  • samodzielne stanowiska pracy,
  • komputery PC z opcją wyświetlania 3D i funkcją touch,
  • komputery typu iMAC,
  • możliwość korzystania z tabletów Wacom,
  • najnowsze oprogramowanie z możliwością wyboru platformy i wersji językowej,
  • drukowane lub elektroniczne materiały szkoleniowe,
  • obiady oraz serwis kawowy,
  • woda gazowana, niegazowana, ciasteczka
  • certyfikaty potwierdzające realizację zajęć w Autoryzowanym Ośrodku Szkoleniowym wystawiane w języku polskim lub angielskim.

Po każdym szkoleniu w Akademii IT Media uczestnicy wypełniają ankietę oceniając odbyte zajęcia. W ankiecie oceniają zarówno poziom swojego zadowolenia na podstawie spełnionych oczekiwań jak również sposób prowadzenia zajęć przez wykładowcę, jego przygotowanie i profesjonalizm.