Autoryzowany Ośrodek Szkoleniowy Adobe i Maxon

Kurs Web Designer

Kurs Web Designer

Kategoria: Tworzenie stron www i aplikacji,

Poziom: zintegrowany

Czas trwania: 96 godzin

Cena: 6000 PLN (netto)

 

Opis szkolenia

Kurs Web Designer – to 12 dniowy kurs, który swym zakresem obejmuje zajęcia z Tworzenia aplikacji internetowych i HTML5 oraz do wyboru seminarium User experience w projektowaniu interfejsów użytkownika i interakcji bądź Trendy i prototypy – projektowanie stron WWW.

Dzięki uczestnictwu w zajęciach słuchacz osiągnie umiejętność tworzenia i projektowania serwisów oraz stron internetowych uwzględniając ich wymogi w zakresie responsywności.

Dodatkowo wdrożone elementy trendów, dobrych praktyk w zakresie projektowania podniesie jakość realizowanych projektów i umożliwi tworzenie usług internetowych zgodnie z UX i wymogami współczesnych zleć. 

 

Czego nauczymy?

  • Projektowania i tworzenia grafiki internetowej i jej optymalizacji
  • Wykorzystania narzędzi graficznych do edycji i dopasowania zdjęć
  • Użycia filtrów i efektów dla zdjęć oraz elementów graficznych
  • Dopasowania kolorów i jasności zdjęć
  • Sterowania wielkością zdjęć i elementów graficznych
  • Cięcia projektu na elementy konieczne do budowy strony HTML
  • Tworzenia atrakcyjnych nagłówków oraz reklam graficznych
  • Wykorzystanie programu Adobe Dreamweaver do edycji kodu HTML5 i stylów kaskadowych
  • Tworzenia szablonów stron www
  • Zasad tworzenia nowoczesnych stron www
  • Znaczników i struktury kodu HTML5
  • Dodawania łączy i ich formatowania
  • Tworzenia różnorodnych struktur nawigacyjnych (menu)
  • Formatowania menu głównego oraz innych elementów nawigacyjnych
  • Użycia grafik, tabel, elementów Flash na stronie www
  • Zasad języka HTML oraz nowości HTML5
  • Budowy stron WWW z użyciem HTML5 oraz arkuszy stylów CSS
  • Zarządzania wyglądem strony i jej elementów przy użyciu stylów CSS
  • Tworzenie i edycji różnorodnych stylów CSS
  • Wykorzystania różnych selektorów CSS
  • Wykorzystania języka JavaScript i różnorodnych widgetów
  • Wykorzystania interaktywnych elementów typu: Accordion, Tabbed Panel czy Collapsible Panel
  • Użycia zewnętrznych bibliotek JavaScript: Spry, MooTools i jQuery
  • Tworzenia, testowania i wdrażania atrakcyjnych formularzy w oparciu o style CSS
  • Walidacji danych formularza i przesyłania ich w wiadomości e-mail
  • Tworzenia nowoczesnych galerii zdjęć z użyciem biblioteki Lightbox lub podobnych
  • Wykorzystania dodatków do programu Adobe Dreamweaver
  • Użycia filmów wideo i muzyki na stronie internetowej
  • Przesyłania strony WWW na serwer internetowy
  • Optymalizacji grafiki i kodu
  • Aktualizacji strony na serwerze produkcyjnym
  • Tworzenia animacji JavaScript
  • Dodawania efektów specjalnych i trików
  • Tworzenia strony www od podstaw i… podszewki
  • Zasady wykorzystania Adobe Dreamweaver do pracy z kodem HTML i CSS
  • Zasady i sposoby tworzenia stron internetowych w oparciu o HTML5 i CSS
  • Wykorzystanie nowoczesnych stylów CSS 3.0
  • Tworzenie Media Queries – zapytań o media
  • Tworzenie prostych przejść i animacji CSS
  • Dostosowanie stylów CSS dla różnych mediów
  • Framework Bootstrap – prototypowanie i struktura strony
  • Podstawy języka JavaScript
  • Tworzenie interaktywnych formularzy
  •  Projektowanie stron mobilnych
  • Współpraca z jQuery i jQueryMobile
  • Współpraca z PhoneGapBuild
  • Zapis natywnej aplikacji dla systemu Android, iOS, Windows
  • Publikacji na różne media
  • Testowanie aplikacji na tabletach Android, iOS
  • Zasady publikacji w App Store i Google Play

Czego oczekujemy?

Od uczestników oczekujemy znajomości obsługi komputera typu PC bądź MAC.

Program

Etap: HTML i CSS w praktyce – moduł I

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
  • PDF
  • 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 oraz dodatki do programu

Etap: HTML i CSS w praktyce – moduł II

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

Etap III: User Experience

  1. Wprowadzenie do zagadnień z dziedziny Interakcji Człowiek-Komputer (Human-Computer Interaction).
  2. Podstawy projektowania zorientowanego na użytkownika (User-Centered Design).
  3. Wytyczne i zasady projektowania interfejsów użytkownika dla rozwiązań internetowych i mobilnych.
  4. Analiza współczesnych trendów w projektowaniu interfejsów użytkownika na przykładach.
  5. Proces koncepcyjny i analiza wymagań projektowych.
  6. Badanie potrzeb użytkowników w procesie projektowania rozwiązań interaktywnych.
  7. Podstawy tworzenia architektury informacji.
  8. Tworzenie prototypów interfejsów użytkownika o różnym poziomie dokładności za pomocą wybranych technik i narzędzi.
  9. Metody testowania użyteczności i przegląd narzędzi do ich przeprowadzania.
  10. Analiza danych i tworzenie raportów użyteczności.
  11. Podsumowanie szkolenia i omówienie źródeł rozszerzających poznane zagadnienia.

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.