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

cena 3000 zł (netto)

40h (5 dni)

Ścieżka: Tworzenie stron www i aplikacji

Najbliższy termin:


17-21 lutego 2020

Sprawdź inne terminy zapisz się

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

średnia ocen: 5.0

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

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.

szkolenie html i css moduł 2 responsywne strony dla zaawansowanych

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. Podobnie 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 animacji, 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 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. Dodatkowo uczestnicy poznają zalety i wady używania wartości względnych (piksele, punkty etc.) oraz wartości absolutnych (procent, emów itd.).

szkolenie html i css responsywne strony wersja mobilna

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. Co więcej, 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. To może dać świetne efekty, zwłaszcza z zastosowaniem przezroczystości przy użyciu PNG lub właściwości CSS3.

Większość projektów może być wykonana przy zastosowaniu właściwości float. Jednak 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 co więcej 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 możemy zastosować 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 HTML i CSS w praktyce – moduł II – responsywne strony i aplikacje 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 JQuery 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.

Szkolenie HTML i CSS w praktyce – moduł II zapozna Cię z podstawami 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ą.

Zgłoś się na Szkolenie HTML i CSS II już dziś!

Czego się nauczysz

  • 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

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 oczekujemy?

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

Program szczegółowy

 

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

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

Nasi trenerzy

Marcin Bober

Marcin Bober. Prowadzi szkolenia z zakresu budowania i optymalizacji serwisów www i aplikacji mobilnych. W pracy dydaktycznej duży nacisk kładzie na przygotowanie słuchaczy do samodzielnej pracy i tworzenia własnych kreatywnych rozwiązań.

dowiedz się więcej
o tym wykładowcy

Standard szkolenia

Jedyny w Polsce
Autoryzowany Ośrodek Szkoleniowy
Adobe i Maxon

Certyfikowani wykładowcy - praktycy

Najnowsze oprogramowanie i samodzielne stanowisko komputerowe PC/MAC

Certyfikat i materiały szkoleniowe

Małe, kameralne grupy szkoleniowe

Pyszny obiad i kawa

Opinie z ankiet po szkoleniu

Przyjemna atmosfera. Bezproblemowe uzyskanie odpowiedzi na wszystkie pytania.

-

Szkolenie w 100% spełniło moje oczekiwania. Wykładowca był ekstra. Ośrodek również jest dobrym miejscem.

-

Bardzo dobre szkolenia, sympatyczni i kompetentni prowadzący.

-

Czcesz zapytać o coś przed zakupem?
Napisz do nas na szkolenia@itmedia.pl

lub zadzwoń pod numer

22 678 38 87

System rozwoju w Akademii IT Media:

Kończąc to szkolenie
zyskujesz rangę
Adept

Co otrzymuję jako Adept:

  • Materiały szkoleniowe
  • Zniżki na oprogramowanie Adobe i tablety Wacom
  • Newsletter z materiałami rozwojowymi
  • Zaproszenia na bezpłatne
    Dni Otwarte w IT Media

dowiedz się więcej