mgr inż. arch. Michał Tomaszewicz GRAFIKA W INTERNECIE INFORMACJE OGÓLNE Wyższa Szkoła Informatyki w Łodzi Wydział Zamiejscowy we Włocławku 2007
I. Zmysły w odbiorze witryny internetowej 1. ZMYSŁY UDZIAŁ WYKORZYSTANIA: WZROK 87%, SŁUCH 7% 2. MEDIA A WPŁYW NA ZMYSŁY: Media wykorzystujące zmysł słuchu: A. Obraz statyczny Informacja docierająca do odbiorcy konstruowana jest w oparciu o atrybuty, które mają wywołać u oglądającego określony zbiór skojarzeń bądź emocji: Kształt wywołujący określone skojarzenia (np. piktogramy) lub emocje (kształty o ostrych krawędziach mają silniejsze nasycenie emocjonalne niż kształty obłe). Kolor główna cecha działająca na emocje widza (np. błękit działa kojąco, ognista czerwień powoduje pobudzenie). Kolor może również powodować skojarzenia związane z nabytymi doświadczeniami. Nasycenie koloru działa głównie na emocje. Silniejsze nasycenie powoduje wzrost reaktywności, kolory bledsze działają na nas uspokajająco. Jasność obrazu działa na emocje (np. ciemne kolory mogą powodować stan przygnębienia), ale głównie jest używana do przyciągania wzroku do konkretnego miejsca. Ciemny element na jasnej stronie spowoduje zwrócenie uwagi na ten obszar strony. Kompozycja dotyczy głównie elementów graficznych, które w odpowiednim zestawieniu mogą ułatwiać odbiór treści. Na przykład rozmieszczenie ilustracji od lewego górnego rogu, do prawego dolnego wydaje się naturalne i zgodne z oczekiwaniami. Treść dotyczy głównie zdjęć. Treść wyzwala emocje jak i przywodzi na myśl skojarzenia. Np. zdjęcie głodującego dziecka wzbudza w nas uczucie współczucia.
B. Ruchome elementy graficzne Ruch zostanie natychmiast zauważony, nawet wtedy gdy widz ogląda właśnie najwspanialszy statyczny obraz. Z tego względu ruchome elementy graficzne wykorzystywane są jako elementy interfejsu, np. animowane przyciski. Ruchome elementy należy stosować z umiarem, ponieważ animowanie jednocześnie wielu elementów powoduje bałagan na ekranie i dezorientację widza. C. Tekst Słowo pisane jest nieodzownym i podstawowym elementem multimediów, ponieważ za pomocą tekstu można w bardzo prosty sposób przekazać ważne informacje. Media wykorzystujące zmysł słuchu: A. Muzyka jest używana do ilustrowania pewnych sytuacji i do budowania nastroju. Dlatego powinna być ściśle związana z tematyką projektu. B. Narracja przeniesienie formy pisanej na mówioną, stąd nacisk jest położony na przekazanie informacji. Doskonale sprawdza się w projekcie adresowanym do dzieci. C. Elementy dźwiękowe głównie element interakcji użytkownika z aplikacją, pomagający np. w nawigacji. Media wykorzystujące zmysł wzroku i słuchu animacja i film połączenie obrazów ruchomych z dźwiękiem. A. Animacja rysunkowa silnie oddziałuje uproszczoną formą graficzną. Wykorzystywana w prezentacjach edukacyjnych, instruktażowych, w testach, grach, kartkach z życzeniami. Pożądana w projektach adresowanych do dzieci. Chętnie stosowana w Internecie ze względu na niewielkie rozmiary plików. B. Animacja komputerowa i film oferuje najszersze spektrum przekazywania informacji. Brak obecnie ogólnodostępnej technologii publikowania pełnowartościowego materiału filmowego w Internecie. Nie istnieją ograniczenia w publikowaniu filmów rozpowszechnianych na płytach CD.
Media interaktywne: C. Panoramy i obiekty Quick Time VR zdjęcia (z reguły co 15 ) połączone tak aby pokazywały 360-stopniową panoramę sali (obserwator w jej centrum) lub obiekt ze wszystkich stron (obserwator patrzy z zewnątrz na obiekt). Widz używa myszy do rozglądania się po sali, obracania i przesuwania obiektu, zbliżania się i oddalania. II. Elementy medialne a interfejs użytkownika (witryna internetowa) zastosowanie 1. Interfejs użytkownika: Interfejs użytkownika składa się z części systemu, które są widoczne dla użytkownika oraz którymi może on manipulować oraz z modeli i wrażeń, które tworzą się w umyśle użytkownika podczas pracy z tymi częściami systemu L. Barfield 2. Komponenty witryny (interfejsu) elementy medialne. A. KOLOR (KOLOR ELEMETÓW I TŁO) B. TEKST I HPERTEKST C. OBRAZY STATYCZNE D. TYPOWE KOMPONENTY INTERNETOWE E. OBRAZY DYNAMICZNE
Wszystkie wymienione elementy mają w grafice internetowej na celu: A. UKAZYWANIE INFORMACJI B. KATEGORYZACJĘ INFORMACJI C. HIERARCHIZACJĘ INFORMACJI D. DANIE MOŻLIWOŚCI INTERAKTYWNEGO PRZEGLĄDANIA INFORMACJI 3. KOLOR A. ZAŁOŻENIE PODSTAWOWE: NIE PROJKETUJMY WIĘCEJ NIŻ 4-5 (JEDNOZNACZYNYCH) KOLORÓW TYLE MIEŚCI SIĘ W PAMIĘCI KRÓTKOTERMINOWEJ CZŁOWIEKA Kolor może dawać różne skojarzenia emocjonalne, dzięki czemu, projektując witrynę, czy grafikę użytkową mamy, w pewnej mierze możliwość oddziaływania na uczucia i odczucia odbiorcy. B. ZNACZENIE WYBRANYCH KOLORÓW SKOJARZENIA EMOCJONALNE (wg Frankowskiego) biały czystość, niewinność, estetyczność, swoboda, lekkość, chłód, czarny śmierć, bunt, siła, zło, mrok, tęsknota, subkultura, czerwony życie, energia, agresja, działanie, nagłość, miłość, żółty oświecenie, ciepło, radość, optymizm, zazdrość, tchórzostwo, choroba, pomarańczowy -egzotyka, ciepło, tajemnica, energia,
granatowy urząd, praca, odpowiedzialność, mundur, niebieski władza, chłód, melancholia, ciężkość, dostojeństwo, fioletowy - bogactwo, królewskość, wyrafinowanie, inteligencja, tajemniczość, różowy dziewczęcość, czułość, ukojenie brązowy oparcie, podstawa, konkrety, pracowitość, sumienność, zielony natura, zdrowie, relaks, wesołość, pieniądze ($), roślinność. 4. TEKST I HPERTEKST A. ZAŁOŻENIE PODSTAWOWE: STARAJMY SIĘ NIE PROJEKTOWAĆ WIĘCEJ NIŻ 3 RODZAJÓW TEKSTU W INFORMACJI WIZUALNEJ DOTYCZY TO TEŻ ZALEZNOŚCI FONT WIELKOŚĆ. B. HIPERTEKST - ZAŁOŻENIA Elementy dokumentu są ze sobą połączone (struktura grafu) Można poruszać się między częściami dokumentu (węzły i połączenia) Dostępne jest wyszukiwanie informacji Dokumenty bardzo często mają strukturę hierarchiczną Hipertekst - zalecenia - Węzły powinny być proste - Nie powinno się dublować informacji - Hierarchiczna struktura dokumentu - Rozsądna liczba odwołań Dobrze jest wprowadzić ścieżkę, po której porusza się użytkownik
5. OBRAZY STATYCZNE A. ROZDZIELCZOŚĆ WYŚWIETLANIA Ze względu na to, iż grafika internetowa wymaga najczęściej szybkiego wyświetlania i optymalizacji, obrazy rastrowe należy przygotowywać w rozdzielczości 72 dpi. Jest to około 28 punktów (pikseli ekranowych) na 1 cm bieżący w osi x i tyleż samo w osi y. B. MODY KOLORÓW RGB (red, green, blue) podstawowy w zastosowaniach informatycznych, model, na który pracują monitory, zatem używanie pozostałych modeli (i mieszanie ich z RGB w ramach jednej informacji wizualnej) dla grafiki internetowej może wiązać się z przekłamaniami kolorów. HSV (hue, saturation, brightness odcień, nasycenie, jasność) tzw model subiektywny. CMYK (cyan, magenta, yellow, black) kolory z wkładów drukujących, model używany w profesjonalnym tworzeniu informacji wizualnej z zastosowaniem do wydruku. B. NAJPOPULARNIEJSZE FORMATY PLIKÓW RASTROWYCH W INTERNECIE JPG GIF PNG (nie opisuję charakterystyki tych formatów, ale zadam z nich jakieś pytanie;-))
6. PODSTAWOWE TYPOWE KOMPONENTY INTERNETOWE A. MENU ROZWIJANE B. POLA WYBORU (CHECKBOX) C. PASEK PRZEWIJANIA D. PASEK ADRESU E. POLA WPROWADZANIA DANYCH F. POLA WYBORU DANYCH (Z ROZWINIĘCIA) G. GALERIE JAKO AUTONOMICZNY KOMPONENT 7. OBRAZY DYNAMICZNE A. BANERY Banery budowane na bazie animowanych GIFów i PNG Banery wektorowe skompilowane w formacie swf (flash) B. ANIMACJE Małe animowane Gify, PNG (ikony, elementy interaktywne) Animacje flashowe oraz komponenty interaktywne (flash) obiekty trójwymiarowe
7. NARZĘDZIA DO TWORZENIA I PRZEGLĄDANIA GRAFIKI INTERNETOWEJ A. SKŁAD WITRYNY INTERNETOWEJ OPARTY NA ŚRODOWISKU JĘZYKA (NP. HTML) Tego typu aplikacje dają możliwość projektowania i administrowania komponentami przy użyciu gotowych szablonów, bez znajomości kodu html. Zaletą tego rodzaju oprogramowania jest prostota obsługi. Wady to głównie ograniczenia w efektach graficznych i sterowaniu. Najpopularniejszym programem był zawsze Microsoft Frontpage, jednak obecnie pojawiło się dużo aplikacji alternatywnych (także darmowych) np.: Aptana, BlueJ, Dreamweaver (profesjonalny, płatny), Expression Web, HateML Pro, Nvu, Visual Web Developer, WYSIWYG Web Builder, Zend Studio,
B. MACROMEDIA FLASH I PODOBNE Flash to wielowątkowe narzędzie do tworzenia witryn internetowych, grafiki internetowej animowanej i wszelkiego rodzaju aplikacji interaktywnych, zaopatrzone w zaawansowane narzędzia graficzne. Skompilowany efekt (plik swf) oparty jest na grafice wektorowej. Możliwości: a. Tworzenie kompletnych witryn internetowych wraz ze wszyskimi komponentami. b. Tworzenie wszelkiego rodzaju interaktywnych aplikacji animowanych wielowątkowych. Możliwości dodatkowe: a. Swobodne sterowanie animacją w osi czasu. b. Szerokie możliwości osadzenia w aplikacji różnych elementów (graficznych i dźwiękowych). c. Projektowanie zdarzeń i zależności między nimi. d. Język skryptowy ActionScript, dzięki któremu sterowanie zdarzeniami właściwie nie ma żadnych ograniczeń. e. Wektoryzacja plików rastrowych. Aplikacje alternatywne: a. Swish (płatny, ale spolszczony i niedrogi, obsługuje prosty Action Script), b. Flex Builder (komercyjny, zaopatrzony w moduł Action Script'u)
C. APLIKACJE 3D 3d internecie można podzielić na dwie grupy: 1. Aksonometryczny lub perspektywiczny trzeci wymiar budowany na obiektach 2d (podobne działanie jak modyfikator perspektywa w Corelu) Tym sposobem można uzyskiwać efekt 3d dla np. Okien przeglądarki przykład: Browse3D 3.5 - przeglądarka internetowa będąca nakładką na Internet Explorer. 2. Wirtualny świat (rzeczywiste 3d) zbudowany w konkretnym języku (lub konkretnej aplikacji). Przykładem wirtualnego świata do zastosowań internetowych może byc świat budowany na języku VRML. VRML (by Kamil Dąbrowski) VRML (Virtual Reality Modeling Laguage - Język modelowania rzeczywistości wirtualnej) jest narzędziem, które pozwala na opisywanie obiektów i animacji na scenie trójwymiarowej. Dzięki niemu możemy tworzyć interaktywne światy wirtualne gdzie mamy możliwość chodzenia pośród zdefiniowanych obiektów (wyświetlanie obiektów trójwymiarowych w czasie rzeczywistym), spotykania się z innymi uczestnikami danego świata (światy Multiuser), definiowania dowolnej ilości czujników interakcyjnych zmieniających wygląd świata VRML w zależności od życzenia jego uczestnika. Światy wirtualne utworzone w VRML mogą zawierać połączenia hiperlinkowe z innymi światami VRML oraz stronami zapisanych w standardzie HTML. Mogą być one również wzbogacone o pliki dźwiękowe, graficzne i filmowe. Światy VRML uruchamiamy na tej samej zasadzie co strony HTML - poprzez sieć Internet - musimy jednak zaopatrzyć naszą przeglądarkę WWW w odpowiedni plug-in. VRML powstał w wyniku naturalnego rozwoju Internetu, który od działania w trybie tekstowym przeszedł ewolucję aż do ery WWW.
VRML charakteryzuje się trzema cechami, które odróżniając go od innych aplikacji do grafiki trójwymiarowej jednocześnie stanowią o jego atrakcyjności: dostępność czyli możliwość odwiedzenia świata wirtualnego za pomocą sieci Internet co oznacza, że jest on dostępny dla bardzo szerokiej grupy osób, przy czym nie jest istotny ani moment, w którym dana osoba chce się z konkretnym światem połączyć, ani miejsce, w którym dana osoba obecnie się znajduje. możliwość ruchu w świecie wirtualnym wszystkie obiekty na scenie trójwymiarowej możemy obejrzeć z każdej strony, ale nie na zasadzie wyświetlania ich kolejnych rzutów, czy też animacji (chociaż to też jest możliwe), ale poprzez chodzenie" wokół nich. interakcyjność każdy uczestnik świata wirtualnego może mieć wpływ na jego wygląd, jeśli twórca umieścił w opisie sceny różnego rodzaju czujniki. Otoczenie może się zmienić pod wpływem kliknięcia, rzucenia okiem", czy też zbliżenia się do danego obiektu. Bardzo ciekawe efekty można uzyskać wprowadzając dźwięki, np.: zbliżając się do jakiegoś obiektu dźwięk narasta, a oddalając się stopniowo zanika. Rozszerzeniem plików VRML jest *.wrl (od słowa world"). PRZEGLĄDARKI VRML Cosmo Player 2.1 WorldView 2.1 Community Place Browser 2.0 PR D2 Blaxxun CCpro 3D 4.0 Należy dodać iż nie tylko vrml, jako język znajduje zastosowanie w obsłudze wirtualnego świata dla internetu. Obiekty trójwymiarowe (oglądane w odpowiednich przeglądarkach) mogą być budowane w JAVIE. Przyszłością może stać się prosty język XML, chętnie używany w już w profesjonalnych aplikacjach do modelowania i renderingu, także związanych ze środowiskiem Linuksa.