Zastosowania grafiki komputerowej Historia Sprzęt dla potrzeb grafiki komputerowej (monitory i systemy graficzne, procesory, urządzenia we/wy) Zmysły ludzkie i percepcja Złudzenia optyczne Nauki i prawa pokrewne dotyczące poznania, postrzegania, zapamiętywania i uczenia Źródła komunikacji i współczesne formy przekazu Komunikacja interpersonalna (werbalna i niewerbalna) Komunikacja człowiek – komputer (system komputerowy) Światło widzialne Barwa Modele i przestrzenie barw Grafika rastrowa i wektorowa Algorytmy kompresji obrazu Formaty i edytory plików graficznych Rasteryzacja i wektoryzacja obrazów Podstawowe struktury danych do reprezentacji obrazów Reprezentacja obiektów geometrycznych stosowanych w grafice komputerowej Algebra obrazów Grafika 2D i 3D Algorytmy graficzne Geometria fraktalna Animacja Rodzaje interfejsów, style interakcji użytkownika z systemem Systemy pomocy Urządzenia interakcji Zasady projektowania graficznego, charakterystyka GUI Interfejs aplikacji na urządzenia mobilne i specjalne Projektowanie strony głównej witryny Testowanie interfejsu Dostępność witryn i aplikacji dla osób niepełnosprawnych Interfejs i funkcjonalność stron WWW 36. subtraktywne vs addytywne mieszanie barw 1. Zastosowania grafiki komputerowej ● interfejs uzytkownika ● wykresy w biznesie i nauce 1 ● kreslenie i projektowanie wspomagane komputerowo (CAD , 3dsmax) ● filmy animowane ● wizualizacja w symulatorach lotu 2. Historia Dziś już nikogo nie dziwi częsta obecność obrazów stworzonych za pomocą komputera z zainstalowanymi specjalnymi programami. Są one obecne nie tylko na nośnikach komputerowych oraz w globalnej sieci, ale także w prasie czy telewizji – nawet ostateczny kształt publikacji prasowych i książkowych to dziś dzieło grafika komputerowego – dziedzina ta nosi nazwę DTP. Poza tym, tym, że o wiele łatwiej tworzyć takie obrazy i charakteryzują się one lepszą jakością, niż tradycyjne, łatwo jest również je potem edytować, dostosowując je do określonych wymagań. Nie zawsze jednak tak było i przez całe dziesięciolecia komputery, pod względem graficznym, nie były bardzo wydajnymi maszynami. Pierwsze komputery, jakie potrafiły obsługiwać pliki graficzne pojawiły się wprawdzie na początku lat pięćdziesiątych dwudziestego wieku, jednak były na tyle drogie i trudne w obsłudze, że poza środowiskami akademickimi nie zyskały dużego rozgłosu. Ośmiobitowe komputery, jakie trafiły pod strzechy, a tym samym do powszechnego użycia w latach osiemdziesiątych pod względem graficznym były bardzo niefunkcjonalne – potrafiły wyświetlać niewiele kolorów, z czego zazwyczaj były to od trzech do ośmiu w jednym momencie. Pierwszy komputer domowy, który obsługiwał grafikę, Apple II zazwyczaj operował na palecie czterokolorowej, przez co gry i inne materiały multimedialne tworzone na takie, dziś już niemal zabytkowe platformy, były pod tym względem bardzo ubogie. Dopiero rozprzestrzenienie się komputerów osobistych o architekturze PC pozwoliło na szybki rozwój grafiki komputerowej i przybranie przez nią postaci, w jakiej znamy ją dziś – już na początku lat dziewięćdziesiątych pojawiły się pierwsze gry, które stworzone były w technologii, która bardzo przypominała dzisiejsze 3D. Dziś grafika komputerowa to bardzo rozbudowana dziedzina, plasująca się gdzieś na pograniczu informatyki i sztuki – leży w sferze zainteresowań zarówno artystów, jak i informatyków, a na dodatek stale, dynamicznie się rozwija – co roku tworzone są nowe technologie, publikowane nowe programy graficzne oraz biblioteki. Ogromne graficzne możliwości współczesnym komputerów docenione zostały przez osoby związane z innymi mediami, a one stały się jednym z najważniejszych narzędzi używanych w przemyśle filmowym. 3. Sprzęt dla potrzeb grafiki komputerowej (monitory i systemy graficzne, procesory, urządzenia we/wy) ● myszka ● klawiatura ● karta graficzna ● monitory ● tablet ● skaner ● drukarka 4. Zmysły ludzkie i percepcja Percepcja- organizacja i interpretacja wrażeń zmysłowych, w celu zrozumienia otoczenia. 2 Percepcjato postrzeganie; uświadomiona reakcja narządu zmysłowego na bodziec zewnętrzny; sposób reagowania, odbierania wrażeń. (W. Kopaliński) Istnieją dwa rodzaje struktur poznawczych: ● Związana z wyobraźnią. Odbierane przez nią wrażenia zmysłowe zazwyczaj są deformowane przez nasze oczekiwania, potrzeby, uczucia i mechanizmy obronne, uruchamiane przez podświadomość. ● Związana z inteligencją. Koryguje ona doznania zarejestrowane w naszej wyobraźni. Systemy percepcyjne człowieka umożliwiają mu widzieć, słyszeć, czuć smak, zapach, dotyk i zmiany temperatury. Jest to także poczucie świadomości (otoczenia). Percepcja w szerokim sensie oznacza rejestrację (uchwycenie) przedmiotów i zdarzeń środowiska zewnętrznego: ich odbiór sensoryczny, zrozumienie, identyfikację i określenie werbalne oraz przygotowanie do reakcji na bodziec. Etapy procesu postrzegania: ● odbiór wrażeń, ● postrzeganie w wąskim znaczeniu, ● identyfikacja i rozpoznawanie. 5. Złudzenia optyczne Złudzenie optyczne– błędna interpretacja obrazu przez mózg pod wpływem kontrastu, cieni, użycia kolorów, które automatycznie wprowadzają mózg w błędny tok myślenia. Złudzenie wynika z mechanizmów działania percepcji, które zazwyczaj pomagają w postrzeganiu. W określonych warunkach jednak mogą powodować pozornie tylko prawdziwe wrażenia. 6. Nauki i prawa pokrewne dotyczące poznania, postrzegania, zapamiętywania i uczenia 7. Źródła komunikacji i współczesne formy przekazu ● mowa ● maile ● listy ● gesty ● uczucia ● obrazy, filmy ● gry 8. Komunikacja interpersonalna (werbalna i niewerbalna) Komunikacja interpersonalnato wymiana informacji między jej uczestnikami. Nośnikami danych mogą być słowa (komunikacja werbalna), gesty, teksty, obrazy, dźwięki czy też sygnały elektryczne albo fale radiowe. Ważne jest, aby były one zrozumiałe dla nadawcy i odbiorcy. Komunikacja werbalna– komunikacja z użyciem języka naturalnego, czyli mowy jako środka komunikacji. Jest to podstawowy sposób komunikacji międzyludzkiej. Mowa ciała, język ciała , komunikacja niewerbalna– zespół niewerbalnych komunikatów nadawanych i odbieranych przez ludzi na wszystkich niewerbalnych kanałach jednocześnie. Informują one o 3 podstawowych stanach emocjonalnych, intencjach, oczekiwaniach wobec rozmówcy, pozycji społecznej, pochodzeniu, wykształceniu, samoocenie, cechach temperamentu itd. Komunikaty te nadawane są i odbierane najczęściej na poziomie nieświadomym, jednak mogą być również nadawane i odbierane świadomie (tak jak większość gestów - emblematów czy wiele wyrazów mimicznych). 9. Komunikacja człowiek – komputer (system komputerowy) komunikacja odbywa sie przez interfejs uzytkownika czy to graficzny czy konsolowy. warto tez zwrocic uwage na ulatwienia na niewidzacych albo gluchych. 10. Światło widzialne Światło widzialne– ta część promieniowania elektromagnetycznego, na którą reaguje siatkówka oka człowieka w procesie widzenia. Dla człowieka promieniowanie to zawiera się w przybliżeniu w zakresie długości fal 380-780 nm (co najmniej), dla różnych zwierząt zakres ten bywa nieco odmienny, lecz o zbliżonych wartościach. 11. Barwa Barwa– wrażenie psychiczne wywoływane w mózgu ludzi i zwierząt, gdy oko odbiera promieniowanie elektromagnetyczne z zakresu światła. Główny wpływ na to wrażenie ma skład widmowy promieniowania świetlnego, w drugiej kolejności ilość energii świetlnej, jednak niebagatelny udział w odbiorze danej barwy ma również obecność innych barw w polu widzenia obserwatora, oraz jego cechy osobnicze, jak zdrowie, samopoczucie, nastrój, a nawet doświadczenie i wiedza w posługiwaniu się zmysłem wzroku. W szerszym znaczeniu barwa jest całościowym pojęciem dotyczącym odbioru opisywanych wrażeń, w węższym zaś jest jakościowym określeniem odbieranego światła zwanym walorem barwy(czyli porównaniem do najbliższej wrażeniowo barwy prostej), a wtórują temu pojęcia jasności barwy(czyli udziału ilości światła pochodzącego z danej barwy w stosunku do ogółu bieżących warunków oświetleniowych), oraz nasycenia barwy(czyli udziału achromatyczności w danej barwie). Nauką badającą wywoływanie wrażeń barwnych oraz sposób ich odbioru jest teoria koloru. Jest ona połączeniem wybranych zagadnień z zakresu fizyki, biologii oraz psychologii. 12. Modele i przestrzenie barw Przestrzeń barw- widma fal elektromagnetycznych z zakresu od 380 do 780 nm (tj. światło widzialne) znalazły swe matematyczne modele w postaci trójwymiarowych przestrzeni barw. Dzięki tym modelom barwę można opisać nie tylko przez podanie jej widma, ale przez modele w różnym stopniu zbliżone do ludzkiej percepcji barwy, związanej z fizjologią oka ludzkiego. Najważniejsze przestrzenie barw ujęto w normach międzynarodowych. Stosuje się je w różnych dziedzinach przemysłu: farbiarskim, tekstylnym, spożywczym, fotografii itd. Utworzono różne modele przestrzeni barw, m.in.: ● RGB- jeden z modeli przestrzeni barw, opisywanej współrzędnymi RGB. Jego nazwa powstała ze złożenia pierwszych liter angielskich nazw barw: R– red(czerwonej), G– 4 green(zielonej) i B– blue(niebieskiej), z których model ten się składa. Jest to model wynikający z właściwości odbiorczych ludzkiego oka, w którym wrażenie widzenia dowolnej barwy można wywołać przez zmieszanie w ustalonych proporcjach trzech wiązek światła o barwie czerwonej, zielonej i niebieskie ● HSV- Model HSV nawiązuje do sposobu, w jakim widzi ludzki narząd wzroku, gdzie wszystkie barwy postrzegane są jako światło pochodzące z oświetlenia. Według tego modelu wszelkie barwy wywodzą się ze światła białego, gdzie część widma zostaje wchłonięta, a część odbita od oświetlanych przedmiotów. Symbole w nazwie modelu to pierwsze litery nazw angielskich dla składowych opisu barwy: H – odcień światła (ang. Hue) wyrażona kątem na kole barw przyjmująca wartości od 0° do 360°. Model jest rozpatrywany jako stożek, którego podstawą jest koło barw. Wymiary stożka opisuje składowa S – nasycenie koloru (ang. Saturation) jako promień podstawy oraz składowa V – (ang. Value) równoważna nazwie B – moc światła białego (ang. Brightness) jako wysokość stożka. ● CMYK- Skrót CMYK powstał jako złożenie pierwszych liter angielskich nazw kolorów. Końcowa litera K może oznaczać albo literę ostatnią słowa black(czarny) (ostatnią, ponieważ litera B jest skrótem jednego z podstawowych kolorów w analogicznym skrócie RGB) bądź skrót key colour(kolor kluczowy). ○ Cyjan – odcień niebieskiego, ale trochę bledszy i bardziej spłowiały, można go określić jako szarobłękitny lub sinoniebieski. Najbardziej podobne kolory to błękit, szafir i turkus. Nazywanie koloru cyjanowego kolorem "zielononiebieskim" jest błędem wynikającym z niezrozumienia różnic pomiędzy addytywną i subtraktywną metodą mieszania barw. W syntezie addytywnej kolor uzyskany w wyniku połączenia zielonego i niebieskiego. ○ Magenta – w syntezie addytywnej kolor uzyskany w wyniku połączenia czerwieni i niebieskiego. Najbardziej podobne kolory to fuksja, karmazyn i amarant. ○ Yellow – kolor bardzo podobny do żółtego, jednak trochę bledszy od typowej nasyconej żółcieni. W syntezie addytywnej kolor uzyskany w wyniku połączenia czerwieni i zielonego. ○ Black – kolor czarny, jednak o niezbyt głębokiej czerni. 13. Grafika rastrowa i wektorowa ● grafika rastrowa– obraz budowany jest z prostokątnej siatki punktów (pikseli). Najważniejsze formaty plików to: Bitmap, OpenRaster, ICO (Microsoft file format). Formaty takie jak JPEG, TIFF, PNG oraz GIF także przechowują obraz według koncepcji rastrowej, natomiast dodatkowo pojawia się w tych formatach kompresja. Najważniejsze edytory graficzne: Photoshop, MS Paint oraz GIMP. ● grafika wektorowa- jest rozszerzeniem grafiki rastrowej. Stosuje ona prymitywy graficzne takie jak: punkty, linie, krzywe oraz kształty lub wieloboki do przedstawienia obrazów w grafice komputerowej. Wszystkie te prymitywy graficzne bazują na równaniach matematycznych. Podstawowym standardem grafiki wektorowej jest SVG. Podstawowe edytory graficzne: CorelDRAW, Adobe Illustrator, oraz Inkscape. Typy prymitywów najczęściej używane w grafice wektorowej: 5 ○ linie i polilinie, ○ poligony, ○ okręgi i elipsy, ○ krzywe Béziera, 14. Algorytmy kompresji obrazu ● kompresja bezstratnato ogólna nazwa takich metod upakowywania informacji do postaci zawierającej zmniejszoną liczbę bitów tak, aby całą informację dało się z tej postaci odtworzyć do identycznej postaci pierwotnej. Najważniejszym twierdzeniem o kompresji bezstratnej jest Twierdzenie o zliczaniu (counting theorem), wg którego Niemożliwe jest skonstruowanie funkcji przekształcającej odwracalnie informację na informację (czyli funkcji kompresji bezstratnej), która nie wydłuża jakieś informacji o przynajmniej 1 bit, chyba że nie kompresuje ona żadnej informacji. Algorytmy kompresji bezstratnej dobrze kompresują "typowe" dane, czyli takie w których występuje znaczna nadmiarowość informacji (redundancja). Pewne rodzaje danych są bardzo trudne lub niemożliwe do skompresowania: strumienie liczb losowych (niemożliwe do skompresowania), strumienie liczb pseudolosowych (w praktyce trudne, choć teoretycznie bardzo dobrze kompresowalne), dane skompresowane za pomocą tego samego lub innego algorytmu (w praktyce trudne). Format bezstratny to PNG. GIF Popularne metody to: ○ BZIP2 ○ Kodowanie Huffmana ○ Kodowanie arytmetyczne ○ Move To Front ○ transformata Burrowsa-Wheelera ● Kompresja stratna to metody zmniejszania ilości bitów potrzebnych do wyrażenia danej informacji, które nie dają gwarancji, że odtworzona informacja będzie identyczna z oryginałem. Dla niektórych danych algorytm kompresji stratnej może odtworzyć informację w sposób identyczny. Zwykle kompresję stratną stosuje się do: ● obrazków ● dźwięków ● ruchomych obrazów, np. w filmie Popularne formaty kompresji stratnej obrazu: ● JPEG ● JPEG2000 (kompresja falkowa) Popularne formaty kompresji stratnej wideo: ● DivX ● XviD ● MPEG ● Real Video Popularne formaty kompresji stratnej dźwięku: 6 ● MP3 ● OGG Vorbis ● Real Audio 15. Formaty i edytory plików graficznych Grafika rastrowa: ● BMP, JPG, GIF, PNG, TIFF, PNG, PSD (Photoshop), XCF (GIMP) ● Paint.NET, Adobe Photoshop, GIMP Grafika wektorowa: ● SVG, CDR, SWF, WMF ● Inkscape, Corel DRAW Grafika 3D: ● MAX, BLEND, C4D, ● Autodesk 3ds Max, Autodesk Maya, Maxon Cinema 4D, Blender, Google Sketchup 16. Rasteryzacja i wektoryzacja obrazów Rasteryzacja– w grafice komputerowej działanie polegające na jak najwierniejszym przedstawieniu płaskiej figury geometrycznej na urządzeniu rastrowym, dysponującym skończoną rozdzielczością. Rasteryzacji mogą podlegać krzywe: odcinki, okręgi, elipsy, łuki eliptyczne, krzywe sześcienne, krzywe sklejane (np. Béziera), przekroje stożkowe, jak również powierzchnie wielokątów, kół, powierzchnie zdefiniowane krzywymi sklejanymi itp. Wektoryzacja (trasowanie)polega na zmianie grafiki rastrowej na grafikę wektorową. W procesie wektoryzacji rastry opisujące daną bitmapę zostają zgrupowane w większe obiekty wektorowe na zasadzie podobieństwa koloru. Proces wektoryzacji niemal każdej bitmapy deformuje jej pierwotny wygląd. Tylko bitmapa przedstawiająca prosty kształt ma szanse być poprawnie przekształcona. 17. Podstawowe struktury danych do reprezentacji obrazów ● macierze ktore odzwierciedlają poszczególne piksele 18. Reprezentacja obiektów geometrycznych stosowanych w grafice komputerowej 19. Algebra obrazów 7 20. Grafika 2D i 3D 2D computer graphics 2D computer graphics are digital images that are computer-based. They include 2Dgeometric models, such as image compositions, pixel art, digital art, photographs,and text. 2D graphics are used everyday on traditional printing and drawing. There are twokinds of 2D computer graphics - raster and vector graphics.Raster graphics or bitmaps are composed of arrays of pixels. Each pixel can be a differentcolor or shade. They are edited on the pixel level and are used on most old computer andvideo games, graphing calculator games, and many mobile phone games. Vector graphicsare composed of paths. Paths are used to describe the images by establishingmathematical relationships between points within an image. Vector graphics are mainlyused on photographic images 3D computer graphics 3D computer graphics are graphics that use 3D representation of geometric data. Thisgeometric data is then manipulated by computers via 3D computer graphics softwarein order to customize their display, movements, and appearance. 3D computer graphics areoften referred to as3d models. A 3d model is a mathematical representation of geometricdata that is contained in a data file. 3D models, can be used for real-time 3D viewing inanimations,videos, movies, training, simulations,architectural visualizations or for display as 2D rendered images (2D renders) 21. Algorytmy graficzne Rasteryzacja: ● algorytm Bresenhama dla linii - służy do rasteryzacji krzywych płaskich, czyli do jak najlepszego ich obrazowania na siatce pikseli ● krzywe Béziera - parametryczna krzywa powszechnie stosowana w programach do projektowania inżynierskiego CAD. Krzywe Béziera są krzywymi parametrycznymi, tzn. każda współrzędna punktu krzywej jest pewną funkcją liczby rzeczywistej będącej wspomnianym parametrem; aby określić krzywą na płaszczyźnie potrzebne są dwie funkcje, aby określić krzywą w przestrzeni – trzy, itd. Ze względu na rodzaj tych funkcji mówi się o krzywych wielomianowych oraz krzywych wymiernych. Powszechnie stosuje się również krzywe złożone z kawałków gładko połączonych krzywych wielomianowych bądź wymiernych, tzw. krzywych B-sklejanych (także: krzywych gładkich). Przycinanie: ● Algorytm Cohena-Sutherlanda - jest analitycznym algorytmem obcinania dwuwymiarowych odcinków przez prostokąt obcinający, którego boki są równoległe do osi układu współrzędnych. ● Algorytm Liama-Barsky'ego Symulowanie kolorów: ● algorytm Floyda-Steinberga - algorytm redukcji palety tonalnej lub barwnej obrazu (kwantyzacja) tak, by zminimalizować błąd (różnicę między obrazem w ograniczonej 8 palecie, a oryginałem) przez kontrolowany rozrzut pikseli w ograniczonej palecie. Jest to jeden z najbardziej popularnych w grafice komputerowej algorytmów rozpraszania (ang. dithering). ● dithering (grafika komputerowa) - zamierzony efekt zastosowania szumu w celu zniwelowania błędu kwantyzacji zapobiegający efektowi Bandingu (fałszywych konturów na granicach przejść między kolorami). Interpolacja - w grafice komputerowej jest to proces mający na celu utworzenie nowego, wcześniej nieistniejącego piksela na podstawie pikseli sąsiadujących z pikselem tworzonym tak, aby był on jak najlepiej dopasowany optycznie do przetwarzanego obrazu. Rodzaje: ● najbliższego sąsiada, ● dwuliniowa, ● dwusześcienna, ● algorytm Lanczosa. 22. Geometria fraktalna W informatyce fraktalne metody kompresji obrazu są jednymi z najlepszych algorytmów zmniejszających rozmiar pliku graficznego. Z łatwością można to wyjaśnić, przypominając sobie, jakie jest stanowisko teorii fraktali w grafice. Nie jest to opis piksel po pikselu, lecz przepis na jego stworzenie. W związku z rozkwitem grafiki fraktalnej uproszczona została praca grafików komputerowych. Gdy potrzebują oni obrazu stoku górskiego lub drzewa, zamiast przeszukiwać setki zdjęć, posługują się odpowiednimi modelami do generowania takich obrazów 23. Animacja Sztuka tworzenia ruchomych obiektów z wykorzystaniem komputerów. Jest poddziedziną grafiki komputerowej i animacji. W coraz większym zakresie jest ona realizowana jako animacja 3D (trójwymiarowa). By stworzyć iluzję ruchu, na ekranie komputera wyświetlany jest określony obraz, po czym szybko zamienia się go na następny - podobny do poprzedniego, lecz z nieznacznymi zmianami w pozycji obiektów. Technika ta jest identyczna z zastosowaniami telewizyjnymi i kinowymi. Do uzyskania wymaganych klatek stosuje się takie techniki jak morfing i rendering. 24. Rodzaje interfejsów, style interakcji użytkownika z systemem ● interfejs tekstowy — urządzenie wejściowe to klawiatura, a wyjściowe to drukarka znakowa lub wyświetlacz w trybie znakowym, ● interfejs graficzny — wejście to urządzenie wskazujące (np. myszka), a wyjściowe to 9 wyświetlacz graficzny, ● interfejs strony internetowej — wejście i wyjście jest realizowane poprzez stronę internetową wyświetlaną w przeglądarce internetowej. 25. Systemy pomocy Pomaga użytkownikowi w zorientowaniu się za co są odpowiedzialne poszczegółne elementy interfejsu użytkownika. Dobrze zaprojektowany interfejs powinien byc na tyle przejrzysty, aby nie potrzebowal dodatkowego systemu pomocy 26. Urządzenia interakcji Klawiatura, mysz (touchpad, trackpoint, trackball), mikrofon, głośnik, tablet. 27. Zasady projektowania graficznego, charakterystyka GUI Graficzny interfejs użytkownika (ang. Graphical User Interface, GUI), często nazywany też środowiskiem graficznym – ogólne określenie sposobu prezentacji informacji przez komputer oraz interakcji z użytkownikiem, polegające na rysowaniu i obsługiwaniu widżetów. Środowisko graficzne jest grupą wzajemnie współpracujących programów, zapewniającą możliwość wykonywania podstawowych operacji na komputerze(takich jak uruchamianie programów, poruszanie się po katalogach, dokonywanie ustawień itp.) w trybie graficznym, najczęściej okienkowym. Zapewnia alternatywny dla konsoli sposób pracy na komputerze. Najważniejszym elementem graficznego interfejsu jest okno programu (lub kilka takich okien). Wewnątrz takiego okna są rozmieszczone elementy interakcyjne, zwane widżetami (lub "kontrolkami", nawiązując do pulpitów sterowniczych). Użytkownik komunikuje się z aplikacją pośrednio przez te widgety najczęściej za pomocą myszy i klawiatury. Mysz jest odpowiedzialna za przesuwanie tzw. kursora myszy, wskazującego odpowiednią pozycję na ekranie, a naciskanie przycisków jest związane z obszarem, w którym zawiera się aktualna pozycja kursora. Klawiatura jest związana z kolei z pojęciem tzw. "skupienia" (ang. focus). Skupienie jest stanem, który może posiadać w jednym czasie dokładnie jeden widget w całym systemie okienkowym. Jeśli użytkownik naciska klawisze na klawiaturze, informacja o naciskaniu klawiszy przekazywana jest do tego widżetu, który aktualnie "posiada skupienie". Projektowane działania Środki wyrazu Cel, jaki realizuje środek wyrazu a. Pokazanie możliwych przyciski, linki, wskazówki i efektywniejsze interakcje interakcji wyjaśnienia b. Pokazanie struktury treści kompozycja w lepsza orientacja, nawigacja, i organizacji komunikatu kontrze/pozytywie, wizualny rozumowanie, dostosowanie rytm, wizualny kontrast, się do 10 parateksty modelu poznawczego odbiorcy c. Zaakcentowanie słowa kluczowe, listy, lepsza orientacja, nawigacja, najwonniejszych informacji nagłówki, hierarchia rozumienie, ustawienie wizualna, wskazówki, zgodne z modelem sygnalizowanie poznawczym d. Nakierowanie na grupowanie informacji lepsza organizacja, integracja korespondujące z sobą semantycznie powiązanych i elementów informacyjnych elementy (ale wskazanych do pochodząca z różnych źródeł, różne ze względu na użyte jednoczesnego czytania, tworzenie całościowego modalności, np. tekst i obraz) przestrzenna ciągłość, wyobrażenia struktury wizualne granice, materiału, lepsze jego prowadzenie uwagi poprzez: zrozumienie strzałki, dymki, kodowanie kolorystyczne e. Pokazanie nawigacji po linki, zaznaczone punkty lepsza organizacja i strukturze (gdzie podążać rozpoczęcia czytania i nawigacja i jak wrócić do miejsca startu) podążania wzroku, przestrzenne rozmieszczenie elementów f. Redukcja obciążenia unikanie układu graficznego, łatwiejsze interakcje, lepsze poznawczego który sprzyja pęknięciom zrozumienie uwagi g. Rozpoznanie oczekiwań wprowadzanie nieznanych użytkownika i próba informacji w języku, który jest sprostaniu im mu bliższy, dostosowanie języka i terminologii do wiedzy uprzedniej 28. Interfejs aplikacji na urządzenia mobilne i specjalne Musi byc dostowsowany do sposobu obslugi m.in wielkosc przyciskow odpowiednia, aby mozna ja bylo kliknac palcem. tekst o odpowiedniej wielkosci aby mozna bylo bez problemu odczytac tekst. Istnieje wiele rozmiarow ekranow dlatego layout powinien byc responsive i dostosowywac sie do rozmiaru ekranu 29. Projektowanie strony głównej witryny Musi być: ● przejrzysta ● zawierac tylko najwazniejsze funkcje i odnosniki do szczegołow ● 30. Testowanie interfejsu 11 ● Instnieja biblioteki ktore symuluja klikanie w rozne miejsca i w ten sposob testuja poszczegolne elementy interfejsu uzytkownika ● najlepszym testem UI jest dac uzytkownikowi urzadzenie z danym interfejsem i spytac sie go jakie sa jego odczucia bo to przeciez uzytkownikowi ma sluzyc dany interfejs i dla niego powinnien byc wygodny i przejrzysty 31. Dostępność witryn i aplikacji dla osób niepełnosprawnych ● WAI-ARIA(Web Accessibility Initiative - Accessible Rich Internet Applications) is a technical specification published by the World Wide Web Consortium that specifies how to increase the accessibility of web pages, in particular, dynamic content and user interface components developed with Ajax, HTML, JavaScript and related technologies. ● Ustawienie atrybutu alt w elementach html umozliwia programom dla osob niewidomych odczytywac poprawnie elementy strony ● Nie uzywac flasha bo utrudnia zycie niewidomym 32. Interfejs i funkcjonalność stron WWW 1. Nie bój się białego tła - czarne litery na białym tle są przyjemne dla oka i wyglądają po prostu ładnie. Alternatywnie, możesz stosować jasnożółte tło wkomponowne w czarne litery. 2. Używaj grafiki która nie zajmuje dużo miejsca na serwerze i nie ładuje się długo. Nic bardziej nie odstrasza odwiedzającego stronę niż długo ładująca się grafika. 3. Unikaj jaskrawych kolorów, zwłaszcza tam gdzie widnieje tekst. 4. Używaj wystarczająco dużych rozmiarów czcionek. Strona powinna być dobrze widoczna na każdym monitorze, a nie każdy posiada kineskop o przekątnej 21 cali :). 5. Jeśli nie jest to konieczne, nie upieraj się przy robieniu intro do swojej strony. Nawet najmilszy dla oka flash lub animacja staje się nudny (tym bardziej, jeśli klient musi obejrzeć taki flash przed wejściem na właściwą stronę). 6. Unikaj (lub całkowicie zrezygnuj) z pop-ups oraz z automatycznego otwierania okien. Takie praktyki mogą odstraszyć użytkownika równie dobrze jak błąd 404 (błąd nieistnienia strony). 7. Zawsze publikuj swój E-mail kontaktowy na stronie; nie polegaj wyłącznie na formularzu, gdyż nie jest to zawsze praktyczne. 8. Unikaj umieszczania banerów typu 'Wymiana linków' na stronie. Nie tylko wygląda to nieprofesjonalnie, ale zapala czerwone światło tak zwanym botom czyli 'pajączkom' wyszukiwarek. 9. Staraj się umieszczać przyciski nawigacyjne w tym samym miejscu na każdej stronie. Takie podejście sprawia, że użytkownik szybko zapoznaje się z daną stroną i nabiera do niej większego zaufania (nikt kto nie wie gdzie się znajduje nie czuje się pewnie). 10. Nigdy nie idź 'na łatwiznę' i nie kopiuj treści z innych stron. Nie tylko jest to bezprawne, ale nie przyniesie Ci to pożytku na dłuższą metę. Większość klientów, którzy zamierzają nabyć produkt lub usługę przegląda i porównuje oferty różnych stron. Jeżeli Twoja strona nie posiada oryginalnej treści, Twój potencjalny klient szybko to wyłapie i nie wzbudzi to w nim/jej dużego zaufania w stosunku do Twojej oferty. Na koniec - traktuj swoją stronę nie tylko jako miejsce, które od razu wzbudzi zaufanie u 12 odwiedzającego, ale także jako miejsce które pomoże w odnalezieniu wspólnego porozumienia jeszcze przed jakąkolwiek negocjacją handlową. 36. subtraktywne vs addytywne mieszanie barw subtraktywne mieszaniebarw, nakładanie się barw pozostałych po wyeliminowaniu ze światła białego (np. w wyniku pochłaniania przez barwniki) fal o pewnych długościach; Wynikiem subtraktywnego mieszania barw są na ogół barwy występujące w przyrodzie; przez subtraktywne mieszanie barw: niebieskozielonej C, purpurowej Mi żółtej Y , można uzyskać dowolny kolor — efekt ten wykorzystuje się np. w wydrukach barwnych fotografii (stosuje się dodatkowo kolor czarny K; CMYK). Addytywne mieszaniebarw zachodzi, gdy jedną wiązkę światła o pewnej barwie zmieszamy z drugą o odmiennej barwie, w wyniku czego powstaje wrażenie barwy trzeciej. Kolor jest światłem, do takiego odkrycia doszedł trzy wieki temu Isaac Newton rozszczepiając promień światła w trójkątnym pryzmacie. W oparciu o addytywne mieszanie barw działają monitory, emitujące wiązki świateł w kolorze czerwonym ( z ang. RED), zielonym ( GREEN),oraz niebieskim (BLUE), stąd pochodzi skrót RGB. 13
Enter the password to open this PDF file:
-
-
-
-
-
-
-
-
-
-
-
-