Kurs Web Designer składa się z czterech szkoleń:
Szkolenie HTML i CSS w praktyce – moduł I: Tworzenie stron www
Internet
- Możliwości Internetu
- 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
SEO
- Wstęp do pozycjonowania i optymalizacji
Szkolenie HTML i CSS w praktyce – moduł II: Responsywne strony i aplikacje
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ń
- Interakcja 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 i badanie
- 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
Testowanie użyteczności
- 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
- 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
Strony WWW
Najważniejsze elementy serwisu
- Teksty
- Formularze
- Linki
- Menu główne
- Więcej o nawigacji
- Grafika
- Adres URL
- Tabele
- Mapa serwisu
- Wersja alternatywna
Wyszukiwarki internetowe
- 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
Optymalizacja strony
- 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
Narzędzia
- Google Search Console
- Google Analytics