Kurs Web Designer
- Kategoria
- INFORMATYKA
- Typ szkolenia
- otwarte
- Profil uczestników
- Kurs skierowany jest do osób, które chcą osiągnąć umiejętność tworzenia i projektowania serwisów oraz responsywnych stron internetowych.
- Wymagania wstępne
- Od uczestników oczekujemy znajomości obsługi komputera typu PC bądź MAC.
- Program
Kurs Web Designer składa się z czterech szkoleń:
Szkolenie HTML i CSS w praktyce – moduÅ‚ I: Tworzenie stron www
Możliwości i ograniczenia Internetu
Zasady projektowania i tworzenia serwisów internetowych
- rozpoznanie potrzeb Klienta
- wybór odpowiedniej technologii
- przygotowanie struktury serwisu
- omówienie ukÅ‚adu strony internetowej
- struktura strony internetowej
Standardy budowy stron WWW
- typy dokumentów HTML
- HTML4 i HTML5
- CSS
- JavaScript i popularne biblioteki
- jQuery,
- inne technologie
Podstawowe elementy strony WWW
- tekst
- grafika
- style CSS
- biblioteki JavaScript
- wideo i muzyka
Przygotowanie struktury serwisu WWW
- site – definicja i zasady tworzenia i edycji
- budowa optymalnej struktury katalogów
- przygotowanie katalogu site’a
Tworzenie site’a
- konfiguracja site’a w programie Dreamweaver
Porównanie różnych metod budowy layoutu strony WWW
- zasady tworzenie układu strony WWW
- zasady tworzenie stron w oparciu o znacznik i style CSS
- Zasady użycia semantycznych znaczników HTML5
- zalety budowy strony w oparciu o znaczniki HTML5 i style kaskadowe
PrzeglÄ…d layoutów stron WWW
- PrzeglÄ…d i porównanie wybranych ukÅ‚adów strony internetowej
- układ jednokolumnowy
- układ dwukolumnowy
- układy wielokolumnowe
Zasady budowy layoutu w Adobe Dreamweaver
- Wykorzystanie semantycznych znaczników HTML5 do tworzenia struktury strony www
- formatowanie elementów tekstowych
- wykorzystanie listy
- grafika na stronie www
Zasady użycia stylów CSS
- zasady tworzenie stylów CSS
- rodzaje selektorów
- style typu class, tag, id, compound
- dziedziczenie właściwości
- podstawowe wÅ‚aÅ›ciwoÅ›ci stylów
- narzÄ™dzia tworzenia i edycji stylów w programie Adobe Dreamweaver
- arkusze stylów
- Å‚Ä…czenie arkusza ze stronÄ… HTML
- CSS3
Tworzenie strony WWW
- podstawowe informacje o znacznikach HTML5
- tworzenie strony internetowej w oparciu o znaczniki semantyczne HTML5
- analiza struktury strony (headrer, footer, section, content, nav i inne elementy)
Wprowadzanie treści strony
- wprowadzanie tekstów
- wykorzystanie grafiki
- logiczna struktura strony WWW
- wykorzystanie listy, akapitów i znaczników nagÅ‚ówkowych
- dodawanie elementów nawigacyjnych
Formatowanie strony i edycja układu strony w oparciu o style CSS
- wykorzystanie różnorodnych selektorów CSS
- zasady dziedziczenia
- hierarchia stylów
- użycie zaawansowanych wÅ‚aÅ›ciwoÅ›ci CSS do formatowania elementów strony i jej ukÅ‚adu
Tworzenie atrakcyjnej nawigacji
- wykorzystanie listy do tworzenia nawigacji
- wykorzystanie stylów CSS do edycji wyglÄ…du menu
- dodawanie Å‚Ä…czy
- efekty specjalne nawigacji (wykorzystanie pseudoklas :hover, :active, :selected)
Optymalizacja strony pod kÄ…tem wyszukiwarek internetowych
- logiczna struktura strony
- znaczniki w sekcji head
- zasady tworzenia tytuÅ‚u i użycia nagÅ‚ówków
- teksty alternatywne, nazwy Å‚Ä…czy, itp
- logika strony i znaczników
Praca z grafikÄ…
- zarządzanie wielkością, optymalizacja grafiki
- kadrowanie i efekty graficzne w programie Dreamweaver
- wykorzystanie elementów tylu Smart Object i wspóÅ‚praca z plikami Photoshopa
- teksty alternatywne
- dodawanie Å‚Ä…czy
- formatowanie grafiki za pomocÄ… stylów CSS
Zaawansowane formatowanie tekstów
- zasady formatowania tekstów na stronie WWW
- wykorzystanie typografii i stylów CSS
- formatowanie tekstów za pomocÄ… stylów CSS
Arkusze stylów CSS gÅ‚Ä™bsze spojrzenie
- formatowanie grafiki, list, nagÅ‚ówków
- ostateczne dostosowanie wyglÄ…du strony przy użyciu stylów CSS
- dostosowanie stylów do poprawnego wyÅ›wietlania strony w różnych przeglÄ…darkach
- ciekawe efekty wizualne z użyciem stylów CSS
- dodawanie tła strony
- interaktywne elementy nawigacji
- wykorzystanie CSS3
Tworzenie animacji na bazie stylów CSS
- animacje na stronie www
- animacje za pomocÄ… stylów CSS
Budowa szablonów stron WWW
- tworzenie szablonów stron internetowych w programie Dreamweaver CS6
- rodzaje szablonów
- wykorzystanie szablonów do tworzenie kolejnych podstroi serwisu
- edycja szablonu i aktualizowanie podstron
Tworzenie stron WWW na podstawie szablonów Dreamweavera
- wykorzystanie i formatowanie tabel
- zapis i testowanie stron
- dodawanie Å‚Ä…czy
- tworzenie i edycja stylów CSS dla elementów nawigacyjnych
- zaawansowane sposoby użycia stylów do formatowania menu
Praca z formularzem WWW
- zasady budowy formularza
- tworzenie interaktywnego formularza kontaktowego
- formatowanie elementów formularza za pomocÄ… stylów CSS
- walidacja i testowanie działania formularza na stronie WWW
- edycja stylów CSS formularza
- przygotowanie formularza do przesyłania danych
- tworzenie strony potwierdzającej przesłanie danych
Testowanie i walidacja strony WWW
- testowanie poprawnoÅ›ci dziaÅ‚ania strony w różnych przeglÄ…darkach
- testowanie poprawnoÅ›ci kodu HTML i stylów CSS
Konfiguracja serwera WWW
- konfiguracja site’a
- wybór firmy hostingowej i zakup domeny
- serwer ftp
- konfiguracja Adobe Dreamweaver do pracy z serwerem
Przesyłanie i aktualizacja strony na serwer WWW
- połączenie z fizycznym serwerem WWW
- przesyłanie strony na serwer
- pobieranie stron z serwera
- aktualizacja strony na serwerze WWW
- synchronizacja
Tworzenie interaktywnej galerii typu Lightbox
- Instalacja biblioteki Lightbox
- przygotowanie grafiki
- struktura galerii
- edycja i formatowanie galerii
- edycja kodu JavaScript
- publikacja galerii
Osadzenie mapy Google na stronie
- wykorzystanie dodatku Google Map do osadzenia mapy
Dodatkowe biblioteki JavaScript np. JQuery
- instalacja i wykorzystanie gadżetów JQuery
- tworzenie galerii zdjęć przy użyciu biblioteki Lightbox
PÅ‚ywajÄ…ce reklamy Aniamte na stronie WWW
- zasady dodawania reklam umieszczonych ponad stronÄ… internetowÄ…
Wykorzystanie filmów wideo i muzyki na stronie WWW
- problemy z przeglÄ…darkami i wojna formatów
- praca z plikami FLV
- wykorzystanie plików mp4, mp3, ogg
- tworzenie odtwarzacza wideo na stronie WWW
- tworzenie odtwarzacza audio na stronie www
Tips & Triks, biblioteki Javascript
Wstęp do pozycjonowania i optymalizacji SEO
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 CS
- 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 CSS 3 Media Queries
- Wykorzystanie stylów CSS 3 w HTML5
- Efekty wizualne oraz animacje
- Elastyczny układ projektuTestowanie strony na urządzeniach mobilnych
- Adoobe Edge Inspect
- Ripple
- Testowanie na tabletach, telefonach komórkowychTworzenie 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
Szkolenie UX – User Experience w projektowaniu interfejsów użytkownika i interakcji
- Wprowadzenie do zagadnień z dziedziny Interakcji Człowiek-Komputer (Human-Computer Interaction).
- Podstawy projektowania zorientowanego na użytkownika (User-Centered Design).
- Wytyczne i zasady projektowania interfejsów użytkownika dla rozwiÄ…zaÅ„ internetowych i mobilnych.
- Analiza wspóÅ‚czesnych trendów w projektowaniu interfejsów użytkownika na przykÅ‚adach.
- Proces koncepcyjny i analiza wymagań projektowych.
- Badanie potrzeb użytkowników w procesie projektowania rozwiÄ…zaÅ„ interaktywnych.
- Podstawy tworzenia architektury informacji.
- Tworzenie prototypów interfejsów użytkownika o różnym poziomie dokÅ‚adnoÅ›ci za pomocÄ… wybranych technik i narzÄ™dzi.
- Metody testowania użyteczności i przegląd narzędzi do ich przeprowadzania.
- Analiza danych i tworzenie raportów użytecznoÅ›ci.
- Podsumowanie szkolenia i omówienie źródeÅ‚ rozszerzajÄ…cych poznane zagadnienia.
Szkolenie SEO, pozycjonowanie i optymalizacja stron www
Wprowadzenie
- Zasady projektowania i tworzenia nowoczesnych serwisów internetowych
- Optymalna komunikacja użytkowników po serwisie internetowym
- Standardy budowy stron WWW
- Optymalizacja elementów graficznych
- PrzeglÄ…d layoutów stron WWW – analiza wspóÅ‚czesnych trendów w projektowaniu stron internetowych
Optymalizacja strony pod kÄ…tem wyszukiwarek internetowych
- logiczna struktura strony
- META znaczniki w sekcji head
- zasady tworzenia tytuÅ‚u i użycia nagÅ‚ówków
- teksty alternatywne, nazwy Å‚Ä…czy, itp
- logika strony i znaczników
Testowanie i walidacja strony WWW
Najważniejsze elementy serwisu
- Teksty
- Formularze
- Linki
- Menu gÅ‚ówne
- Więcej o nawigacji
- Grafika
- Adres URL
- Tabele
- Mapa serwisu
- Wersja alternatywna
Jak działają wyszukiwarki stron internetowych
Korzyści płynące z optymalizacji dla wyszukiwarek internetowych
Najważniejsze informacje o stronach internetowych
- Dobór domeny
- Kompatybilność z przeglądarkami internetowymi
- Znaczniki meta
- JavaScript i Flash
- Hierarchia treści, grafika, galerie na stronie, multimedia
- Przyjazna struktura strony internetowej
- WpÅ‚yw linków przychodzÄ…cych i wychodzÄ…cych na pozycjÄ™ strony
- Przekierowania
- Blokowanie stron przed indeksacjÄ…
- Prędkość działania
Indeksacja witryny
- Ocena postępu indeksacji
- Kontrola postępu indeksacji strony w Google
Mapa strony
- Po co korzystać z map witryny?
- Mapa witryny – schemat i budowa
Rozmieszczenie sÅ‚ów i fraz kluczowych na stronie www
Audyt strony www pod kÄ…tem SEO
Zarządzanie treścią witryny pod kątem jej poprawnej optymalizacji
Czynniki wpływające na pozycję w rankingu
- Czynniki wewnętrzne
- Czynniki zewnętrzne
Google Search Console oraz Google Analytics
Podsumowanie szkolenia i omówienie źródeÅ‚ rozszerzajÄ…cych poznane zagadnienia.
Nasi trenerzy
- ProwadzÄ…cy
- Marcin Bober, Marcin Wichrowski
- Forma
- Zajęcia praktyczno- teoretyczne
- Czas trwania
- 104h (13 dni)
- Lokalizacja
- Cena
- 7700 zł netto
- Zgłoszenie
- Kurs Web Designer
- W cenÄ™ wliczono
- W cenę wliczony jest obiad podawany w czasie przerwy, serwis kawowy, materiały szkoleniowe, imienny certyfikat udziału.
- Certyfikaty
- Certyfikat Autoryzowanego Ośrodka Szkoleniowego Adobe