IT Media na Facebook

Autoryzowany Ośrodek Szkoleniowy ADOBE i MAXON

Tworzenie aplikacji internetowych i HTML5 – pakiet zintegrowany

kategoria: Tworzenie stron www – HTML 5
poziom: zintegrowany
czas trwania: 80 godzin
cena szkolenia: 5100 netto PLN
cena szkolenia Akcja z Plusem:5700 netto PLN
cena szkolenia Akcja Plus Plus:6000 netto PLN

Opis szkolenia


Szkolenie tworzenie aplikacji internetowych i HTML5 – pakiet zintegrowany
przeznaczone jest dla osób, które rozpoczynają naukę tworzenia stron www i chcą opanować ich projektowanie i tworzenie zgodnie z aktualnymi wymogami rynku.

W trakcie zajęć uczestnicy korzystają z nowych możliwości jakie oferuje język HTML5 i CSS3, nie używają jednak notatnika, ale produktów firmy Adobe: Photoshop / Illustrator (przygotowanie projektu strony i jej elementów graficznych) oraz Dreamweaver (najlepszy na rynku edytor HTML i CSS), a także licznych dodatków np. zewnętrznych bibliotek JavaScript.

Na szkoleniu powstają nowoczesne, atrakcyjne wizualnie i zgodne ze standardami strony internetowe. Uczestnicy poznają wszystkie etapy pracy od pomysłu, przez tworzenie galerii, formularzy i animacji aż po pełne kodowanie HTML/HTML5 i CSS/CSS3. Stronę zamieszczają na serwerze www, gdzie samodzielnie ją aktualizują i testują efekty swojej pracy. Powstałe strony responsywne są zgodne z zasadami RDW (Responsive Web Design) a budowane aplikacje mobilne gotowe do publikacji w App Store lub Google Play.

Czego nauczymy

• 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
• Podstawy języka JavaScript
• Tworzenie interaktywnych formularzy
• Projektowanie stron mobilnych
• Współpraca z jQuery i jQueryMobile
• Projektowanie animacji HTML5 w programie Adobe Edge
• Tworzenie interaktywnych animacji Adobe Edge
• 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

Znajomość obsługi komputera oraz platformy PC lub MacOS.

Program

Etap I – Tworzenie nowoczesnych aplikacji internetowych – 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, Spry
  • inne technologie

Podstawowe elementy strony WWW

  • tekst
  • grafika
  • style CSS
  • biblioteki JavaScript
  • elementy i animacje
  • PDF
  • wideo i muzyka

Interfejs i narzędzia Adobe Fireworks

  • narzędzia wektorowe
  • narzędzia bitmapowe
  • właściwości grafiki
  • formaty graficzne stosowane w Internecie

Tworzenie elementów graficznych na stronę WWW w programie Adobe Fireworks

  • import zdjęć i grafiki wektorowej
  • edycja grafiki
  • dodawanie efektów i cieni
  • skalowanie
  • użycie maski

Tworzenie projektu strony www

  • import i dostosowanie grafiki
  • zarządzanie wielkością
  • dodawanie tekstów
  • edycja kolorów
  • nawigacja
  • stopka, panele boczne
  • reklamy i nowości
  • cięcie grafiki na potrzeby języka HTML5 i stylów CSS

Cięcie, edycja i eksport projektu

  • użycie narzędzia Slice tool
  • wybór odpowiedniego formatu
  • aktualizacja grafiki

Tworzenie elementów ozdobnych (strzałki, bullety, nagłówki itp.)

  • zasady tworzenie niewielki plików graficznych
  • przygotowanie prostych grafik śródtekstowych
  • zasady eksportu grafiki bez tła

Zapis i optymalizacja elementów graficznych

  • zasady optymalizacji plików graficznych
  • zapis elementów graficznych dla strony WWW
  • prototypy stron WWW

Przygotowanie struktury serwisu WWW

  • site – definicja i zasady tworzenia i edycji
  • budowa optymalnej struktury katalogów
  • przygotowanie katalogu site’a

Interfejs programu Adobe Dreamweaver CS6

  • okna i palety programu
  • dopasowanie ekranu roboczego do własnych potrzeb
  • tworzenie własnych skrótów klawiaturowych
  • instalacja darmowych dodatków np. Lorem& More, Lightbox Gallery
  • korzyści użycia i problemy z dodatkami

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

  • 960 Grid system
  • 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 CS6
  • 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 CC
  • 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 CSS

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
  • rodzaje szablonów
  • wykorzystanie szablonów do tworzenie kolejnych podstroi serwisu
  • edycja szablonu i aktualizowanie podstron

Zasady użycia animacji Aniamte na stronie WWW

  • zalety i wady technologii Aniamte na stronie WWW
  • osadzenie elementów Aniamte na stronie WWW
  • alternatywy dla technologii Aniamte

Tworzenie stron WWW na podstawie szablonów Dreamweavera

  • użycie elementów Aniamte, animacji na stronie WWW
  • 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
  • elementy Spry w budowie formularzy
  • 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 CC 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

JavaScrip  na stronie WWW

  • Ajax i strony WWW
  • Adobe Spry
  • JQuery, MooTools

Współpraca z dodatkami JavaScript

  • Adobe Widget Browser oraz Adobe Exchange
  • wykorzystanie widgetów do tworzenia animacji nagłówka oraz innych elementów strony
  • inne dodatki

Tworzenie interaktywnej galerii typu Lightbox

  • Instalacja biblioteki Lightbox
  • przygotowanie grafiki
  • struktura galerii
  • edycja i formatowanie galerii
  • edycja kodu JavaScript
  • publikacja galerii

Tworzenie elementów Ajax

  • tworzenie interfejsu strony w oparciu o zakładki, panel typu Accordion czy Collapsible Panel
  • edycja stylów CSS dla elementów Spry

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 II –  Tworzenie responsywnych aplikacji internetowych i HTML 5

Szczegółowy program zajęć

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

Podstawy języka JavaScript

  • Typy danych, zmienne, obiekty
  • Dostęp do obiektów
  • Funkcje, tworzenie funkcji
  • Tworzenie prostych instrukcji warunkowych
  • Budowa różnego typu kalkulatorów (walutowe, BMI, temperatury, jednostek itp.)

Biblioteki JavaScript

  • Poznajemy przykładowe biblioteki JavaScript
  • Instalacja biblioteki
  • Praca z Lightbox, jQueryCcle
  • Podstawy jQuery, Zepto
  • Selektory, zdarzenia i funkcje

jQueryMobile

  • Tworzenie mobilnych serwisów i aplikacji
  • Sterowanie wyglądem
  • Theme Roller – tworzenie własnych skórek
  • Dodajemy przejścia
  • Elementy interaktywne
  • Listy, nawigacja, menu

Adobe Edge Animate

  • Zasady tworzenia animacji HTML5 w Edge Animate
  • Podstawy animacji
  • Tworzenie banerów HTML5
  • Zapis i eksport animacji
  • Wykorzystanie animacji Adobe Edge na stronie internetowej i aplikacji

Adobe Edge Animate – głębsze spojrzenie

  • Złożone animacje
  • Symbole
  • Dodajemy elementy interaktywne
  • Podstawy JavaScript w programie Adobe Edge Animate
  • Projektujemy interaktywne banery, czołówki i animacje

Testowanie strony na urządzeniach mobilnych

  • Adoobe Edge Inspect
  • Ripple
  • 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

 

Termin

Zapraszamy na zajęcia w następujących terminach:
21 sierpnia-1 września 2017

Standard szkoleń

Dbamy o wysoką jakość naszych szkoleń, ale również o komfort ich uczestników.

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,
  • tablety Wacom,
  • najnowsze oprogramowanie z możliwością wyboru platformy i wersji językowej,
  • drukowane materiały szkoleniowe,
  • obiady oraz serwis kawowy,
  • 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. Mają możliwość podzielenia się z nami swoimi spostrzeżeniami i uwagami.

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. Liczymy się z Waszym zdaniem.