Technologie internetowe

Transkrypt

WSTI w Katowicach, kierunek Informatyka
opis modułu MG2
Technologie internetowe
Internetowe technologie multimedialne (ITM)
Projektowanie serwisów internetowych (PSN)
Kod przedmiotu: MG2
Rodzaj przedmiotu: specjaln.; obieralny
Wydział: Informatyki
Kierunek: Informatyka
Specjalność (specjalizacja): Grafika komputerowa i budowa multimedialnych serwisów
internetowych
Poziom studiów: pierwszego stopnia
Profil studiów: ogólnoakademicki
Forma studiów: stacjonarne, niestacjonarne
Rok: 3 Semestr: V (ITM)
Rok: 3 Semestr: VI (PSN)
Formy zajęć i liczba godzin:
forma stacjonarna:
wykłady – 30; ćwiczenia laboratoryjne – 30 (ITM)
wykłady – 30; ćwiczenia laboratoryjne – 30 (PSN)
forma niestacjonarna:
wykłady – 20; ćwiczenia laboratoryjne – 20 (ITM)
wykłady – 15; ćwiczenia laboratoryjne – 20 (PSN)
Język/i, w którym/ch realizowane są zajęcia: zajęcia w języku polskim
Liczba punktów ECTS: 10 (ITM – 5; PSN - 5)
Założenia i cele przedmiotu:
Celem przedmiotu jest przekazanie studentom wiedzy na temat technologii flash oraz technologii
spokrewnionych używanych w internetowych aplikacjach multimedialnych, a także zaznajomienie z
praktyką projektowania graficznego w środowisku Macromedia / Adobe Flash.
Określenie
przedmiotów
wprowadzających
wraz
z
wymaganiami
wstępnymi:
Przedmioty “Internetowe technologie multimedialne” oraz “Projektowanie serwisów internetowych”
są przedmiotami wprowadzającym studenta w świat ruchomej grafiki komputerowej i projektowania
w pełni funkcjonalnych serwisów internetowych. Wymagana jest podstawowa wiedza z zakresu
moduł MG2, strona 1 z 10
opis modułu MG2
obsługi komputera oraz treści realizowane podczas przedmiotu “Grafika komputerowa i graficzny
interfejs użytkownika”.
3. Opis form zajęć
a) Wykłady
• Treści programowe (tematyka zajęć):
Internetowe technologie multimedialne
1. Wersje Flash i FlashPlayer - różnice i funkcjonalności; historia firmy Macromedia/Adobe:
a. FeatureSplash,
b. Flash 1 – 5,
c. Flash MX, MX2004, 8,
d. Flash CS3, CS4, CS5.
2. Programy alternatywne i wspomagające:
a. Sothink Easy,
b. Sothink Quick,
c. Alligator Flash Design,
d. Swish,
e. dekompilatory (Sothink, Eltima),
f. konwertery ( PDF2SWF, PPT2SWF),
g. 3D Flash Animator.
3. ActionScript - wersje, różnice.
4. SWF - format, aplikacje, użycie:
a. Flash Develop,
b. Kompilatory Flash,
c. Ming - generowanie po stronie serwera,
5. Formaty informacji multimedialnych (SWF, PDF, QT, RM, FLV i inne).
6. XML , zastosowania, języki pochodne MathML, SV.
7. Technologia RIA - charakterystyka ogólna:
a. komunikacja klient – serwer,
b. obiektowość w RIA.
8. RIA - technologia OpenLaszlo:
a. charakterystyka, zastosowania,
b. narzędzia : LaszloServerlet, XML eclipse plugin,
c. język LZX,
d. język JavaScript.
9. RIA - technologia JavaFX:
a. charakterystyka, zastosowania.
10. RIA - technologia SilverLight:
b. język XAML,
c. język JavaScript.
11. RIA - technologia Flex:
b. historia; Flex Serwer,
c. architektura,
d. narzędzia : SDK, Flex/Flash Builder,
e. język MXML, charakterystyka,
f. język AS; użycie we Flex,
g. użycie CSS we Flex.
12. RIA - technologia Flex, wspomaganie:
a. zmiana styli - Style Explorer,
b. zmiana wyglądu - Adobe Fireworks,
opis modułu MG2
c. wspomaganie projektowania - Adobe Catalyst.
13. RIA - Komunikacja klient – serwer:
a. E4X, XML over HTTP, SOAP,
b. AMF,
c. Adobe LiveCycle,
d. Adobe BlazeDS,
e. Flash Media Serwer,
f. ColdFusion.
14. AJAX vs RIA:
a. szybkość,
b. optymalizacja,
c. uniwersalność.
15. AJAX i JavaScript:
a. JavaScript,
b. HTTPRequest,
c. JQuery,
d. Mootools,
e. Inne frameworki.
16. MashUP z technologią RIA:
a. RSS / Atom,
b. Google Map,
c. YouTube ,
d. Flickr.
Projektowanie serwisów internetowych
1. Standardy sieciowe W3C:
a. HTML3.2, HTML4.1, XHTML1.0, XHML1.1., XHML2.0, HTML5/XHTML5,
b. Frameset, Transitional, Strict,
c. semantyka stron WWW,
d. tagi XHTML i ich znaczenie semantyczne,
e. CSS 2.1, 3.0,
f. konstrukcja dokumentu XHTML,
g. weryfikacja poprawności kodu – validatory.
2. Przeglądarki internetowe:
a. Mozilla, Mozilla Firefox, Internet Explorer, Opera, Chrome, Safari,
b. silniki renderujące,
c. różnice w interpretacji kody XHTML, CSS i JavaScript.
3. Kodowanie znaków i znaki specjalne:
a. kodowanie znaków narodowych WIN1250, ISO-8859-2, UTF-8,
b. błędy programów do edycji:
• znaki zakończenia linii,
• BOM.
4. Konstrukcja strony:
a. kompozycja graficzna - układ i typografia,
b. kod XHTML,
c. wygląd i wizualiacja CSS - układ i typografia,
d. elementy animacji:
• skrypty JavaScript,
• framworki JQuery, Mootools,
e. rola tekstów w witrynach internetrowych.
5. Kompozycja strony:
a. kompozycja graficzna:
• treść,
• światło,
opis modułu MG2
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
b. projektowanie na siatce:
• Grid System,
• zasada złotej proporcji,
c. kolory na stronie:
• teoria kolorów,
• zasady doboru kolorów
• kolory a funkcjonalność.
Elementy witryn internetowych:
a. nawigacja, typy nawigacji,
b. pola prezentacyjne,
c. pola informacyjne.
Budowanie układu strony:
a. ramki (Frameset) - wady,
b. tabelki (Table) - wady,
c. BOX Model,
d. CSS Float - zalety i trudności,
e. CSS Postion - zalety i trudności.
DOM - Dynamic Object Model w dokumentach XHTML.
Typografia stron:
a. zasady dobrej typografii - czytelność tekstów na ekranie:
• długość wiersza,
• marginesy,
• kolory,
• odstępy między: znakami, słowami, liniami,
b. fonty w Internecie:
• szeryfowe,
• bezszeryfowe,
• bezpieczny zestaw fontów, IR, sIFR,
c. typografia w CSS,
d. formatowanie tekstu:
• nagłówki,
• akapity,
• wyróżnienia,
• kolumny.
e. Frameworki typograficzne.
Dostępność witryn:
a. WAI – WCAG,
b. Section 508,
c. wykluczenie cyfrowe a prawo polskie i europejskie.
Funkcjonalność i Użyteczność serwisów internetowych.
Strony internetowe dla mediów alternatywnych :
a. strony do druku - Print style,
b. strony dla telefonów i palmtopów – Mobiles
c. dostępność witryn internetowych z myślą o urządzeniach.
Systemy CMS ( Joomla, Drupal, Xoop, Ez ), porównanie, funkcje, tworzenie szablonów.
Systemy Blogowe ( Wordpress, Textpattern ), porównanie, funkcje, tworzenie szablonów.
Elementy marketingu internetowego.
• Metody dydaktyczne: Wykład prowadzony jest w formie prezentacji multimedialnej, uzupełnionej
przykładami rozwiązywanymi w trakcie wykładu na tablicy oraz na rzutniku multimedialnym.
Dodatkowo, udostępniane są dla studentów materiały uzupełniające na stronach WSTI.
opis modułu MG2
• Forma i warunki zaliczenia:
Warunkiem zaliczenia przedmiotu jest aktywne uczestnictwo studenta w laboratoriach, realizowanie
projektów w trakcie zajęć wpływające na oceny cząstkowe oraz końcowe sprawdzenie kontrolne,
gdzie sprawdzana jest wiedza z całości przedmioty włącznie
z wykładami. Wskazany jest udział studenta w wykładach. Treści wykładów są uzupełnieniem wiedzy
zdobywanej na zajęciach laboratoryjnych i przekazują podstawową wiedzę
o technologiach powiązanych i alternatywnych. Ocenę z zaliczenia student uzyskuje w skali
wskazanej w regulaminie studiów.
• Wykaz literatury podstawowej i uzupełniającej (maksymalnie 5 pozycji w każdej grupie):
Literatura podstawowa:
Todd Perkins, Adobe Flash CS5/CS5 PL Professional. Biblia, Gliwice, Helion 2011.
Michael Labriola, Jeff Tapper, Matthew Boles, Adobe Flex 4, Gliwice, Helion 2011.
Literatura uzupełniająca:
Paul Wells, Animacja, Warszawa, PWN , 2009.
Adobe Flash CS5/CS5 PL Professional, Gliwice, Helion 2011.
Robert Reinhardt, Adobe Flash CS3 Professional PL. Techniki studyjne. Gliwice, Helion 2008.
Juan Sanchez, Andy McIntosh, Flex 3.0. Tworzenie efektownych aplikacji, Gliwice, Helion 2010.
Derrick Ypenburg, ActionScript 3.0. Szybki start, Gliwice, Helion 2009.
Larry Ullman, Adobe Air i Ajax. Szybki start, Gliwice, Helion 2010.
Matthew Keefe Adobe Flash i PHP. Biblia, Gliwice, Helion 2010.
Roger Braunstein, Mims H. Wright, Joshua J. Noble, ActionScript 3.0. Biblia, Gliwice, Helion 2009.
Literatura podstawowa:
Maria Sokół, Tworzenie stron WWW. Ćwiczenia praktyczne. Wydanie III, Gliwice, Helion 2011.
Literatura uzupełniająca:
Jason Beaird, Artystyczne projektowanie stron internetowych, PowerNET 2007 .
Marek Kasperski, Anna Boguska-Torbicz; Projektowanie stron WWW, Użyteczność w, Gliwice,
Helion 2008.
www.taat.pl - serwis internetowy; Artykuły i narzędzia pomocne przy tworzeniu stron
Ambrose, Gavin Twórcze projektowanie, Warszawa, Wydawnictwo Naukowe PWN, 2008.
Kae Verens, Projektowanie systemów CMS przy użyciu PHP i jQuery, Gliwice, Helion 2011.
Danny Dover, Erik Dafforn, Sekrety SEO. Tajna wiedza ekspertów, , Gliwice, Helion 2012.
Jerri L. Ledford, SEO. Biblia, Gliwice, Helion 2008.
Włodzimierz Gajda, HTML, XHTML i CSS. Praktyczne projekty. Wydanie II, Gliwice, Helion 2011.
b) Laboratoria
• Treści programowe (tematyka zajęć):
Środowisko Flash:
a. warstwy (blokowanie, widok szkieletowy - outline), zmiana nazwy,
b. miarki, prowadnice, siatki, przeciąganie,
c. widok - podgląd, tryby podglądu animacji,
d. odtwarzanie i kompilacja animacji, zapętlanie.
2. Rysowanie kształtów, klawisze skrótów (alt, ctrl, shift):
1.
opis modułu MG2
obrys i wypełnienie:
■
zachowanie i właściwości wypełnienia i kształtu,
■
Ink Bottle, Paint Bucket,
■
zaznaczanie wypełnienia,
b. zaznaczanie obrysu,
c. prostokąt, kwadrat, kwarat zaokrąglony,
d. elipsa, koło,
e. wielokąty, sześciokąt, gwiazda, trójkąt,
f. rozmieszczanie elementów (menu align).
Rysowanie linii:
a. linie proste (alt, shift, ctrl):
■
pencil tool (ołówek),
■
brush tool (pędzel),
b. właściwości linii (typ linii, zakończenia, złączenia linii),
c. rysowanie krzywych (pencil tool).
Kształtowanie i modyfikowanie:
a. poprzez nałożenie figur,
b. narzędzie transformacji,
c. poprzez modyfikacje krawędzi i wierzchołków (selection tool),
d. poprzez modyfikacje stycznych - krzywe Beizera (subselection tool),
e. narzędzi gumki.
Proste animacje:
a. animacje poklatkowe:
■
klatki kluczowe i zwykłe,
■
kopiowanie klatek, kasowanie, wstawianie,
■
timeline, ustawianie FPS,
b. animacja położenia:
■
różnice : wstaw klatkę kluczową, przekształć w klatkę kluczową;
■
przekształcanie : KK -> KZ;
c. Animacja rotacji (synchronizacja animacji);
d. Tween / Easing
Tworzenie symboli MovieClip w bibliotece i na scenie (F8):
a. modyfikowanie instancji symbolu ( kolor, kształt, alpha ),
b. rysowanie Symboli w trybie Object Drawing,
c. timeline w MovieClip.
Animacje zagnieżdżone:
a. motyl ruszający skrzydłami i czułkami.
Animacja po ścieżce:
a. motyl latający po ścieżce (ruszający skrzydłami i czułkami).
Animacja po ścieżce eliptycznej:
a. animacja planety krążącej wokół słońca (planeta z księżycem).
Animacja kształtu:
a. kształt w kształt,
b. napis / litery w kształt
Wypełnienia gradientowe (color mixer):
a. imitacja rury (gradienty proste),
b. imitacja kuli (gradienty radialne),
c. narzędzie przekształcenia gradientu
d. imitacja kuli z cieniem (gradient z kanałem alpha),
e. zapis własnych gradientów (color swatch).
Maskowanie :
a. maska z prostego kształtu,
b. maska z gradientem (blask na napisie).
Bitmapy i obrazki zewnętrzne:
a.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
opis modułu MG2
importowanie obrazków (biblioteka, scena),
przekształcanie obrazków w wektory (wypełnienia rastrowe)
modyfikowanie obrazków.
Wypełnienie bitmapami.
Teksty:
a. static, input, dynamic,
b. formatowanie tekstu.
Filtry:
a. cień wewnętrzny, zewnętrzny,
b. blask wewnętrzny, zewnętrzny,
c. obrys,
d. płaskorzeźba,
e. animacja filtrów.
Wbudowane efekty - TimeLine Effects
Publikowanie animacji, osadzanie animacji w HTML
a.
b.
c.
14.
15.
16.
17.
18.
1. Narzędzia dla webmaster:
a. Webmaster Tools for Firefox,
b. edytor Dreamweaver, KompoZer, Notepad++.
2. Element języka XHTML:
a. podstawowe zasady XHTML; różnice HTML a XHTML,
b. struktura dokumentu (preambuła XML, definicja DTD, sekcja meta, sekcja body),
c. podstawowe znaczniki; podstawowy dokument XHTML bez układu CSS,
d. wprowadzenie do CSS,
e. osadzanie stylów w dokumencie,
f. załączanie stylów do dokumentu,
g. odwołanie do znaczników przez selektory,
h. formatowanie znaczników liniowych,
i. formatowanie znaczników blokowych,
j. dziedziczenie stylów,
k. hierarchia i priorytety w CSS.
3. CSS i XHTML - tworzenie układu:
a. znacznik DIV - zastosowanie, właściwości,
b. BoxModel (margin, padding, border)
4. Układ oparty o position - tworzenie układu strony:
a. położenie i position absolute oraz left, right, top, bottom,
b. zmiana puntku odniesienia przez position relative,
c. menu poziome oparte o układ position.
5. Układ oparty o float - tworzenie układu strony:
a. dwie kolumny (float left i right),
b. float i padding - błąd IE,
c. trzy kolumny, środkowa wypełniająca (float left, right, none),
d. trzy równe kolumny (float left),
e. centrowanie strony (margin: auto),
f. układ złożony (clear:float),
g. rozciąganie boksów na wysokość (overflow, haslayout),
h. projektowanie CSS w układzie siatki,
i. łączenie układów float i postion.
6. Projektowanie nawigacji:
a. menu - lista, semantyka (list-style-type:none),
b. menu poziome (float, postition ),
c. podkładanie grafiki do menu,
d. efekt rollover w CSS (a:hover - pseudoklasy),
opis modułu MG2
e. rozsuwane menu w CSS (visible).
7. CSS style wizualne:
a. tło, kolory,
b. cięcie grafiki i wykorzystanie w stylizacji CSS.
8. Typografia:
a. znaczniki tekstowe XHTML - semantyka i stylizowanie,
b. formatowanie tekstu z użyciem CSS:
• font (family, size ),
• line-height,
• letter-spacing,
• word-spacing,
c. formatowanie tekstu:
• nagłówki,
• akapity,
• wyróżnienia,
• kolumny.
9. Formularze (zasady komunikacji ).
10. Stylizowanie formularzy w CSS.
11. Stylizowanie tabel w CSS .
12. Elementy interakcji :
a. JavaScript,
b. podstawy języka JavaScript,
c. DOM z użyciem języka JavaScript,
d. bilbioteka JQuery.
13. CMS w praktyce:
a. zastosowania systemów CMS,
b. wprowadzenie do zarządzania systemem CMS,
c. struktura systemu CMS, tworzenie szablonów dla CMS na podstawie stworzonego
układu.
• Metody dydaktyczne: W trakcie laboratorium prowadzący omawia zagadnienia związane z
realizacją poszczególnych ćwiczeń, a następnie studenci samodzielnie realizują zadania określone
przez prowadzącego.
Zakładane efekty kształcenia
Efekty kształcenia dla modułu: Moduł MG2 (Internetowe technologie multimedialne
ITM oraz Projektowanie serwisów internetowych PSN)
nr
MG2inż_01
MG2inż_02
MG2inż_03
MG2inż_04
Opis: student …
… zna i rozumie różnice pomiędzy technologiami AJAX a RIA,
AJAX i JavaScript oraz różnicę pomiędzy systemami CMS(Joomla,
Drupal, Xoop, Ez ), a systemami Blogowymi ( Wordpress, Textpatter )
…ma wiedzę na temat technologii RIA i jej interakcji z technologiami:
OpenLaszlo, JavaFX, SilverLight, Flex oraz wykorzystuje ją w
komunikacji klient-serwer
…zna standardy sieciowe W3C, konstrukcję i kompozycję strony
WWW, kodowanie znaków oraz różne dostępne przeglądarki
…potrafi biegle poruszać się w narzędziach dla webmastera:
Webmaster Tools for Firefox, oraz edytorach: Dreamweaver,
KompoZer, Notepad++ oraz środowisku Adobe Flash
Odniesienie
do efektów
kształcenia
dla kierunku
I1inż_W01
I1inż_K06
I1inż_W01
I1inż_W05
I1inż_W01
I1inż_U02
opis modułu MG2
MG2inż_05
MG2inż_06
MG2inż_07
MG2inż_08
…ma umiejętność tworzenia różnego typu animacji oraz wypełnień
gradientowych, potrafi wprowadzać i edytować teksty zarówno
statyczne jak i dynamiczny oraz tworzyć układ strony oparty o funkcję
position i float, kaskadowe arkusze styli (CSS)
…potrafi wprowadzać zewnętrzne bitmapy, maskować je oraz
nadawać im filtry, stosować wbudowane efekty (TimeLine Effects)
oraz zasady typografii internetowej.
…ma umiejętność samodzielnego tworzenia w pełni funkcjonalnych
serwisów internetowych opartych o aktualnie wykorzystywane
technologie
…ma umiejętność stylizowania formularzy oraz tabel za pomocą CSS,
stosuje elementy interakcji (język Java Script), obsługi systemów
zarządzania treścią CMS, publikowania animacji oraz osadzania ich w
dokumentach HTML.
I1inż_U01
I1inż_U02
I1inż_U14
I1inż_U02
I1inż_U01
I1inż_U02
I1inż_K02
I1inż_K03
I1inż_K05
I1inż_K09
I1inż_U01
I1inż_U02
I1inż_U14
Odniesienie efektów kształcenia do form zajęć i sposób oceny osiągnięcia
przez studenta efektów kształcenia
Numer
(Symbol)
Forma zajęć
Wykład
Sposób sprawdzenia osiągnięcia efektu
Ćwiczenia
WIEDZA
MG2_inż_01
MG2_inż_02
MG2_inż_03
sprawdzian
sprawdzian
dyskusja
UMIEJĘTNOŚCI
MG2_inż_04
MG2_inż_05
MG2_inż_06
MG2_inż_07
MG2_inż_08
obserwacja pracy studenta
praca kontrolna
sprawozdanie z ćw. laboratoryjnego
praca kontrolna
sprawozdanie z ćw. laboratoryjnego
Kryteria uznania osiągnięcia przez studenta efektów kształcenia.
Efekt
Efekt jest uznawany za osiągnięty gdy:
Prace kontrolne zawierają poprawnie zapisane różnice pomiędzy
technologiami AJAX a RIA, AJAX i JavaScript oraz różnicę pomiędzy
MG2inż_01
systemami CMS(Joomla, Drupal, Xoop, Ez ), a systemami Blogowymi (
Wordpress, Textpattern )
Praca kontrolna zawiera tematy technologii RIA i jej interakcji z
MG2inż_02 technologiami: OpenLaszlo, JavaFX, SilverLight, Flex oraz wykorzystanie
jej w komunikacji klient-serwer.
Student wykonał co najmniej ćwiczenia laboratoryjne, w trakcie których ...
... zadawał merytoryczne pytania i rozumiał otrzymane odpowiedzi, czego
wynikiem jest rozwiązanie postawionego zadania doświadczalnego (w
MG2inż_03
przypadku braku pytań ze strony studenta, pytania zadaje prowadzący
zajęcia – student “broni” swojego rozwiązania),
opis modułu MG2
MG2inż_04
MG2inż_05
MG2inż_06
MG2inż_07
MG2inż_08
... wykonał ćwiczenia, w trakcie których sprawnie wykorzystywał narzędzia
do projektowania stron WWW.
…wykonał ćwiczenia z uwzględnieniem różnego typu animacji oraz
wypełnień gradientowych, stworzył układ strony oparty o funkcję position i
float, kaskadowe arkusze styli (CSS)
…sporządził sprawozdania z ćwiczeń laboratoryjnych zawierające
zewnętrzne bitmapy z maskami oraz zastosował wbudowane efekty
... samodzielnie wykonał w pełni funkcjonalny serwis internetowy
uwzględniając obowiązujące trendy światowe
…sporządził sprawozdania z ćwiczeń laboratoryjnych zawierające
odpowiednie elementy kody CSS oraz języka Java Script

Technologie internetowe

Transkrypt

Podobne dokumenty

Interaktywne media cyfrowe_I

Tutaj - Miejskie Gimnazjum nr 2

harmonogram szkolenie zawodowe Będzin

Specyfikacja - html-css

PBTOOL - PB Tool do Smart Phone