Kurs Web Designer

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
• 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

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.