Projektowanie aplikacji internetowych

Wielkość: px
Rozpocząć pokaz od strony:

Download "Projektowanie aplikacji internetowych"

Transkrypt

1 Projektowanie aplikacji internetowych dr inż. Agnieszka Bołtud Wykład 3 Plan wykładu Reklama w Internecie Typografia Fonty Formatowanie tekstu Formatowanie akapitów Kolory Dostępnośd Narzędzia Projektowanie obsługi błędów Projektowanie formularzy Reklama w Internecie Ślepota na banery Skutecznośd reklamy w Internecie (wg D. Świerka, dyrektor ds. strategii WP): CTR (Clickthrough Rate) zależy od czytelności reklamy dla oka i umysłu, dobry kontrast, czytelnośd taka, że użytkownik wie o co chodzi w nie więcej niż 1.5 sekundy, według badao 45% użytkowników skupiało wzrok na bannerze średnio przez 1.44 sekundy, Bannery które zawierają kliknij tutaj, wejdź mają CTR nawet kilkakrotnie większe niż pozostałe, Obecnośd ruchu i animacji powiększa oddźwięk, CTR zależy silnie od grupy docelowej, która ogląda banner, Zjawisko opisane około 10 lat temu, polega na nieświadomym ignorowaniu reklam przez użytkowników, Powoduje, że zyskują np. linki kontekstowe w porównaniu z tradycyjnymi banerami, Badania prowadzone w latach 1997, 1998 pokazały, że użytkownicy maja problem z znalezieniem ważnych informacji umieszczonych w banerach, także animowanych, Przeprowadzono badania w których użytkowników proszono o znalezienie 24 informacji na stronie, niektórych z nich mogło nie byd, użytkownicy mieli wskazad co udało im się znaleźd i ocenid stopieo trudności w skali 5-punktowej, Badania podzielono na kontrolne informacje można znaleźd za pomocą menu oraz eksperymentalne poprzez link w banerze, 1

2 Ślepota na banery Typografia Wyniki: Znaleziono około 94% informacji kontrolnych, Znaleziono 58% informacji eksperymentalnych, Informacje eksperymentalne znajdowano dłużej, oceniono je jako trudniejsze do znalezienia, Inne testy polegały na umieszczeniu hasła do znalezienia na banerze, ale i innych obiektach nie przypominających powierzchni reklamowej, Okazało się, że wszystkie te obiekty były tak samo słabo zauważalne, co daje wskazówkę, że użytkownicy Internetu podświadomie filtrują obiekty, które przypominają swoim wyglądem reklamy, Rodziny fontów szeryfowe vs bezszeryfowe Fonty szeryfowe Charakteryzują się poprzecznymi lub ukośnymi zakooczeniami z kresek, Korzenie sięgają starożytnego Rzymu, Badania udowodniły, że poprawiają czytelnośd dużych bloków pisma, gdyż tworzą coś w rodzaju linii po której wzrok porusza się jak po torze, Fonty Takie rozwiązanie sprawdza się mniej przy czytaniu z ekranu monitora ze względu na dużo niższą rozdzielczośd, Najbardziej znany font szeryfowy to Times New Roman i Times (Apple), Inne często wykorzystywane w sieci to: Georgia, Baskerwille, Garamond, Lucida, Fonty bezszeryfowe Pojawiały się dosyd późno około XIX wieku, Charakteryzują się nowoczesnym wyglądem w stosunku do szeryfowych i są lepsze w zastosowaniach digitalnych, gdyż tekst taki jest znacznie czytelniejszy, Najpopularniejsze to Arial, Verdana i Helvetica (Apple), Fonty zastosowania Szeryfowe: Wykorzystuje się je w nagłówkach i tytułach, Ze względu na drukowy charakter nadają się do redagowania stron tytułów prasowych, Bezszeryfowe: Do tekstów drukowanych czy składanych w formie.pdf z zamiarem drukowania, Do dokumentów o charakterze technicznym katalogi, prospekty, informatory, 2

3 Pozostałe fonty monospaced: font o stałej szerokości znaków (każdy ze znaków zajmuje tyle samo miejsca), na przykład: Courier, Courier New, Elite, itd. stosowane w tekstach literackich i serwisach WWW o charakterze technicznym (kod programów), cursive: upodobniający się do pisma odręcznego; charakteryzuje się pochyloną czcionką, w której litery są ze sobą przynajmniej częściowo połączone, na przykład: Adobe Poetica, Brush Script, Vivaldi, itd. mało czytelne, stosowane do tekstów historycznych albo o charakterze literackim fantasy: font ozdobny, na przykład: Alpha Geometrique, Critter, FB Reactor mało czytelna, do serwisów o charakterze np. ślubnym Fonty w Internecie Core Fonts for the Web projekt stworzenia pakietu czcionek do Internetu, firma Microsoft, Adobe Web Type projekt pakietu dwunastu fontów firmy Adobe, komercyjny, zmarginalizowany, Monotype ESQ Fonts pakiet firmy Agfa, stale rozbudowywany, użycie ograniczone ze względu na brak własnej przeglądarki i programów do projektowania, Pangramy Są to zdania tak ułożone, że występują w nich wszystkie litery danego alfabetu, aby sprawdzid jak będzie wyglądał w projekcie Język polski Pójdźże, kio tę chmurnośd w głąb flaszy! Filmuj rzeź żądao, pośd gnęb chłystków! Łacina Sic surgens, dux, zelotypos quam karus haberis. Język angielski A quick movement of the enemy will jeopardize six gunboats. Język niemiecki Victor jagt zwolf Boxkampfer quer uben den groben Sylter Deich. Dostępność fontów Użycie grafiki niepolecane, obniżona czytelnośd czcionek, brak skalowalności co jest wadą dla ludzi niedowidzących, Dołączenie plików z fontami do witryny kiedyś nieefektywne i rzadko stosowane, sifr - czyli Scalable Inman Flash Replacement, metoda oparta na technologiach Flash i JavaScript. Jej twórcą jest Shaun Inman. Wykorzystał on fakt, że w plikach Flash można osadzad fonty, a za pomocą JavaScript zastąpid obiekty HTML-a plikami Flash. 3

4 Dostępność fontów Najpopularniejsze fonty Google Font API - to nowy sposób dołączania niestandardowych fontów do stron internetowych. Nie wymaga stosowania dodatkowych skryptów, zamiany tekstu na grafikę ani innych skomplikowanych sztuczek. Dołączenie fontu do projektu polega na dodaniu jednej linijki do kodu strony: <link rel="stylesheet" type="text/css" href="http://fonts.googl Umożliwia nam osadzenie praktycznie każdej czcionki na stronie jest regułą CSS, przy pomocy, której możesz ściągnąd, potrzebną do prawidłowego wyświetlania strony czcionkę, jeżeli jest ona nieobecna na komputerze użytkownika Arial Koń i żółw grali w kości z piękną ćmą u źródła. nbcdefghijklmnoprstuvwxyz [] () {} A <>? Rodzina: bezszeryfowy. Opis: zaprojektowany w 1982 roku przez Robina Nicholasa i Patricię unders Arial to najpopularniejszy font bezszeryfowy o nowoczesym wyglądzie, jednak dla niektórych niezbyt wygodny do czytania ze względu na wąskie litery. Czytelnośd: czytelny, jeśli ma wysokośd powyżej 10 punktów. Charakterystyka: nowoczesny, prosty u podstawy, uproszczony. Ogólnie lubiany przez ludzi w różnym wieku. Najpopularniejsze fonty Najpopularniejsze fonty Georgia Koń i żółw grali w kości z piękną ćmą u źródła. abcdefghijklmnoprstuvwxyzoi o, [] () {} A <>? Rodzina: szeryfowy. Opis: kształt liter i szeryfów zoptymalizowano tak, by napisy były również czytelne w niskich rozdzielczościach. Font Georgia został zaprojektowany na zamówienie Microsoft w 1991 roku przez Matthew Cartera. Czytelnośd: najlepszy font szeryfowy do wykorzystania w internecie. Ogólnie dobry, jeśli nie mniejszy niż 10 punktów. Charakterystyka: tradycyjny wygląd, chod nowocześniejsza i czytelniejsza forma od Times New Roman. Świetna alternatywa dla fontów szeryfowych w sieci. Helvetica Koń i żółw grali w kości z piękną ćmą u źródła. abcdefghijklmnoprstuvwxyzoi o, [] () {} A <>? Rodzina: bezszeryfowy. Opis: zaprojektowany przez Maksa Miedingera w 1957 roku dla firmy ze Szwajcarii. Nazwa pochodzi od słowa Helwecja, rzymskiej nazwy obecnych terenów Szwajcarii. Czytelnośd: bardzo dobra. 4

5 Najpopularniejsze fonty Najpopularniejsze fonty Lucida, Lucida Grande Koń i żółw grali w kości z piękną ćmą u źródła. abcdefghijklmnoprstuvwxyz [] () {} /\? Opis: Lucida jest grupą fontów zaprojektowaną przez Charlesa Biegelowa i Krisa Holmesa w 1985 roku. O wielkości tej grupy niech zaświadczy fakt, że Lucida w systemie Windows występuje pod postaciami: Lucida Bright (font szeryfowy), Caligraphy (kursywa) czy Lucida Console (font bezszeryfowy). Lucida Grande to główny font występujący w systemie Mac OS X, Czytelnośd: bardzo dobra. Charakterystyka: font nowoczesny. Verdana Koń i żółw grali w kości z piękną ćmą u źródła. abcdefghijklmnoprstuvwxyz [] () {} A <>? Rodzina: bezszeryfowy. Opis: font nadal często stosowany ze względu na swoją wysoką czytelnośd, miał premierę 8 lipca 1996 roku. Jest szerszy od fontu Arial, ma poszerzone odstępy międzyliterowe, co zapobiega optycznemu zlewaniu się liter na ekranie. Czytelnośd: najczytelniejszy font do wykorzystania w sieci. Sprawdza się nawet przy stosunkowo małej wielkości. Charakterystyka: nowoczesny, prosty. Zalecany przez większośd projektantów do bloków tekstu zasadniczego, w których czytelnośd jest czynnikiem nadrzędnym. Dośd wysokie noty w ramach preferencji użytkowników. Najpopularniejsze fonty Użycie fontów Times New Roman Koń i żółw grali w kości z piękną ćmą u źródła. abcdefghijklmnoprstuvwxyz [] () {} A<>? Rodzina: szeryfowy. Opis: czcionka zaprojektowana na potrzeby angielskiego tygodnika Times" (stąd jego nazwa) w latach 20 ubiegłego wieku. Do dzisiaj stosowana w większości gazet. Jak każdy font szeryfowy, niezbyt czytelny na ekranie, szczególnie jako kursywa. Font Times (odpowiednik Times New Roman dla komputerów Apple Macintosh) nie ma kursywy, więc litery są sztucznie pochylane przez przeglądarkę, co daje wręcz fatalny efekt i dodatkowo obniża czytelnośd. Czytelnośd: dobry do druku. Czytelnośd na ekranach spada wraz ze zmniejszeniem rozmiaru. Dobry w wielkości co najmniej 12 punktów, Charakterystyka: font o wyglądzie tradycyjnym, nieposiadający żadnej osobowości, mdły i nijaki. Swoje zrobiła też jego popularnośd - do niedawna był on wszechobecny. Niezalecany do zastosowao profesjonalnych. Ogólnie nie jest preferowany przez użytkowników w różnym wieku. Najpopularniejsze fonty: Arial, Verdana, Helvetica, Times i Times New Roman, Georgia, Tahoma, Trebuchet MS, Lucida Grande, Geneva, Courier i Courier New, W 2008 zbadano 10 najpopularniejszych katalogów stron WWW, 70% stron tam zgromadzonych wykorzystywało font Lucida, dużą popularnośd zyskała też Georgia, Na stronie powinno byd nie więcej niż 4-5 czcionek, inaczej słaba czytelnośd, 5

6 Formatowanie tekstu Wielkośd czcionki Jedną z największych wad monitorów jest ich niska rozdzielczośd. Szczególnie w przypadku małego rozmiaru fontu i aktywnego antyaliasingu może dochodzid do zlewania się poszczególnych znaków. W przypadku standardowej odległości między naszymi oczami a czytanym tekstem (30-40 cm) optymalna wielkośd czcionki powinna się wahad pomiędzy 9 a 11 punktów, Oficjalnie zaleca się, by wielkośd czcionki w tekście zasadniczym wynosiła punktów, Formatowanie tekstu Należy wielkośd czcionki dostosowad do wieku Wiek Wielkośd czcionki Zalecenia Dzieci punktów punktów Młodzież punktów 8-10 punktów Standardowo punktów 8-10 punktów Osoby starsze oraz z wadą wzroku punktów punktów źródłó: M. Kasperski, A. Boguska-Torbicz, Projektowanie Formatowanie tekstu Pamiętaj że każda czcionka będzie różniła się wielkością źródłó: M. Kasperski, A. Boguska-Torbicz, Projektowanie Formatowanie tekstu Kolor zachowanie odpowiedniego kontrastu między tłem strony a kolorem tekstu, najczęściej stosuje się czarną czcionkę na białym tle, jest to zasadne ze względu na czytelnośd takiego układu, Odwrotna sytuacja tzw. kontrast negatywowy powoduje obniżenie czytelnośd od 10 do nawet 40%, oko, śledząc białe znaki na czarnym tle, wykonuje znacznie więcej fiksacji niż w przypadku czarnego tekstu na białym, Na czytelnośd czcionek innych niż czarne wpływają też układy wykorzystujące tzw. skład w kontrze. Kontra to wszelki druk jasny na ciemnym tle - powoduje spadek czytelności o co najmniej 10% względem układu czarny tekst białe tło 6

7 Formatowanie tekstu w składzie w kontrze źle wypadają pod względem czytelności fonty szeryfowe, gdyż mają tendencję do zanikania, Zabiegiem zwiększającym czytelnośd jest stosowanie barw pastelowych. Kolory o dużej jasności i zdecydowane mają tendencję do mienienia się i pozostawiania iluminacji, Formatowanie tekstu Narzędzia do sprawdzania koloru Color Check (http://www.etre.com/tools/colourcheck/) W skrajnych przypadkach, podczas przeładowywania stron z kolorowymi tłami, można uzyskad efekt powidoku, co jest związano z wrażliwością fotoreceptorów układu wzrokowego, nieprzyjemne dla człowieka, Formatowanie tekstu Colour Contrast Analyser Formatowanie tekstu Wykorzystany algorytm Określanie stopnia widoczności koloru bazuje na algorytmach proponowanych przez W3C: Dwa kolory są uważane za zapewniające wystarczający kontrast, gdy różnica jasności i różnica odcieni między dwoma kolorami jest większa, niż określone wartości. Wartości zalecane przez W3C to > 125 dla różnicy jasności kolorów oraz > 500 dla różnicy odcieni 7

8 Formatowanie tekstu Formuła Różnicy Jasności - ((wartośd koloru czerwonego (Red) X 299) + (wartośd koloru zielonego (Green) X 587) + (wartośd koloru niebieskiego (Blue) X 114)) / 1000 Formuła Różnicy Odcieni (maximum (wartośd koloru czerwonego (Red) 1, wartośd koloru czerwonego (Red) 2) minimum (wartośd koloru czerwonego (Red) 1, wartośd koloru czerwonego (Red) 2)) + (maximum (wartośd koloru zielonego (Green) 1, wartośd koloru zielonego (Green) 2) minimum (wartośd koloru zielonego (Green) 1, wartośd koloru zielonego (Green) 2)) + (maximum (wartośd koloru niebieskiego (Blue) 1, wartośd koloru niebieskiego (Blue) 2) minimum (wartośd koloru niebieskiego (Blue) 1, wartośd koloru niebieskiego (Blue) 2)) Formatowanie tekstu Access Color Tool (http://www.accesskeys.org/tools/colorcontrast.html) Wyróżnienia Wyróżnienia Kursywa stosowanie kursywy na ekranie utrudnia czytanie tekstu, stosunkowo niska rozdzielczośd monitorów względem tekstu drukowanego powoduje odkształcanie się liter pisanych kursywą i ich schodkowanie, oko patrzące na migający monitor szybciej się męczy i wykonuje więcej fiksacji, co wpływa na proces słabego dostrzegania wyrazów pisanych kursywą, Wytłuszczenie Służy układowi wzrokowemu za punkty nawigacyjne, po których oko się porusza, skanując w poszukiwaniu interesujących treści, Podkreślenia Podkreślanie wyrazów, które nie są hiperłączami, wprowadza użytkowników w błąd, KAPITALIKI Wielkie litery gubią naturalny kształt a to znacznie obniża czytelnośd tekstu, Badania przeprowadzone przez profesora B. Zachrissona, ujawniły, że w przypadku tekstów pisanych wersalikami głównym powodem spadku czytelności jest brak charakterystycznych kształtów słów. Bloki tekstu o jednakowej podstawie i jednakowej wysokości poszczególnych liter nie pozwalają stwierdzid, z jakim kształtem słowa mamy do czynienia, a proces ten jest podstawą czytania jako takiego 8

9 Liczby Formatowanie akapitów Liczebniki złożone słabo się rozpoznaje: Duże liczby warto dzielid na mniejsze porcje Jednak czasem dana strona wymaga takiego zaprojektowania, by utrudnid rozpoznawanie liczb np. strony banków, M. Kasperski przygotowywał architekturę informacji dla strony jednego z polskich banków, specjalnie zbił ciąg cyfr tak, by ostateczna liczba stała się mało czytelna. Potem, gdy podczas testów zadawał pytanie, jaka to liczba, ludzie odpowiadali po prostu duża. badania z użyciem metody eyetrackingu pokazują, że wzrok człowieka ignoruje w dużym stopniu źle sformatowane, zbite bloki tekstu, Zasady poprawiania czytelności: Dziel na akapity - akapity z przeznaczeniem reklamowoinformacyjnym nie więcej niż 5-10 wersów; tekst o funkcji wyjaśniającej powinien mied maksymalnie 5 wersów - najlepiej nie więcej niż dwa zdania, podstawą wyróżnieo bloków powinien byd znacznik <p></p>, a nie: <p><br> - światło między akapitami uczytelnia tekst, Dodatkowym sposobem dzielenia tekstu na mniejsze bloki jest metoda wykorzystująca punktowanie i numerowanie. Dzięki zastosowaniu układu wciętego, a rozpoczynającego się od jakiegoś wystającego elementu ludzkie szybciej przemieszcza się między poszczególnymi blokami tekstu. Formatowanie akapitów Formatowanie akapitów Szerokośd kolumny optymalna szerokośd kolumny tekstu to 8-10 cm, Stwierdzono, że wiersze dłuższe niż 70 znaków oraz krótsze niż 40 znaków powodują znaczne obniżenie jakości czytanego tekstu i spowalniają czytanie, Wyrównanie tekstu często popełnianym błędem jest justowanie, nie sprawdza się, zwłaszcza gdy kolumna jest wąska bądź wielkośd czcionki znaczna, W układach o wąskich kolumnach sprawdza się zatem układ chorągiewkowy, czyli z wyrównaniem tekstu do lewej strony, jest to układ naturalny, światła międzywyrazowe (uzyskane przez spacje) nadają jeden rytm tekstowi przez co oko ludzkie sprawniej się po nim porusza, Są też inni użytkownicy, którzy uważają ten układ za mało profesjonalny oraz badania, które mówią że brak jest znaczących różnic w szybkości czytania obu układów Światło światło to zachowanie odpowiednich odstępów między literami, wyrazami w jednym wersie oraz liniami tekstu w obrębie jednego akapitu, odstępy międzyliterowe w ramach jednego wyrazu - stwierdzono tylko, że nie mogą byd one ani zbyt małe, ani zbyt duże; zakłócony zostaje bowiem proces rozpoznania wyrazu. Ustalono, że optymalna odległośd między literami powinna wynosid 0,2-0,3 ich szerokości, Istotna jest tu także szerokośd oczek (linii w ramach kształtu Iiter). Przy wytłuszczeniu szerokośd ta najczęściej zostaje pomniejszona, to wpływa na wypełnienie wewnętrznej pustej przestrzeni rysunku litery. Fonty takie jak Arial Black czy Impact są mniej czytelne, 9

10 Formatowanie akapitów odstępy między wierszami grają istotną rolę podczas procesu czytania; wiersze bardzo ściśnięte znacznie obniżają poziom czytelności, zwłaszcza gdy są bardzo krótkie (poniżej 40 znaków) bądź bardzo długie (powyżej 100 znaków), w zależności od wysokości fontu, dla określenia najbardziej optymalnego odstępu międzywierszowego stosuje się współczynnik proporcji: 1:1-1:1,2 wysokości litery do odległości między wierszami, Mówi się, że dobry poziom czytelności układu typograficznego oraz dobry efekt estetyczny otrzymujemy, gdy około 50% powierzchni strony zajmuje przestrzeo z tekstem, a pozostałą częśd - marginesy, Czytanie z ekranu - badania Wg Adama Sydora Tekst złożony krojem szeryfowym jest przeciętnie gorzej odczytywany niż składany krojem bezszeryfowym. Krój Verdana optymalizowany do wyświetlania na ekranie monitora pozwala na szybsze odczytanie komunikatu niż krój optymalizowany do druku. Wygładzanie krawędzi pisma wyświetlanego na ekranie monitora wpływa ujemnie na jego czytelnośd - zmniejszenie kontrastu między tłem i literą, przez co krawędź staje się mniej wyraźna, Zmniejszenie kontrastu między tłem i znakiem ujemnie wpływa na czytelnośd tekstu. Wysokie czytelnictwo książek dodatnio wpływa na szybkośd odczytywania tekstów z ekranu (szczególnie krojem szeryfowym) Czytanie z ekranu - badania Czytanie z ekranu - badania Częste korzystanie z komputera dodatnio wpływa na szybkośd odczytywania tekstów z ekranu (szczególnie kroje bezszeryfowe), Długoletnie korzystanie z komputera dodatnio wpływa na szybkośd odczytywania tekstów wyświetlanych na ekranie monitora, złożonych różnego rodzaju krojami, Teksty składane krojem szeryfowym są lepiej zapamiętywane niż składane krojem bezszeryfowym, Jeśli użytkownik przez wiele lat korzysta z komputera, zacierają się różnice między szybkością czytania różnych krojów pisma. Wg Zbigniewa Szczęcha: szybkośd czytania znacznie się zmniejszy, gdy napotkamy słowo, którego obrysu nie posiadamy w swoim pamięciowym magazynie. Wówczas mamy do czynienia z literowaniem, oko widzi głównie kontury liter, przy czym znacznie większą uwagę poświęca ich górnej połowie, gdy napotyka się cyfry, szybkośd czytania spada trzykrotnie, Szybkośd czytania tekstu zapisanego wersalikami zmniejsza się o 12%, Dokładne badania wykazały jednak, że punkty fiksacji oka skupiają się dośd często na odstępach międzywyrazowych, a w przypadku gdy są one zbyt duże, jeden skok oka może nie objąd leżących obok siebie liter, 10

11 Narzędzia Narzędzia Lorem ipsum... - klasyczny, napisany w języku łacioskim tekst służący do sprawdzania krojów pism i układu graficznego, podstawą takiego wykorzystania jest fakt, że tekst w obcym języku przez to, że pozostaje niezrozumiały dla odbiorcy, pozwala skoncentrowad uwagę na wizualnych aspektach, a nie na znaczeniu słów, Typetester Tekst własny lub Lorem ipsum Dobór fontu z podziałem na systemy, wielkością, Szczegółowe formatowanie kolumny: odstępy, wyrównania, dekoracje, Badanie kontrastu pomiędzy tłem a tekstem źródło: źródło: Kolory Kolory wykorzystywane są jako nośnik informacji związanej z identyfikacją danej marki, Używane by dopasowad przekaz do grupy użytkowników, dla których jest budowana, By zaakcentowad temat przewodni witryny, wykorzystywane także przez projektantów interfejsów ze względu na możliwośd kodowania za ich pomocą dodatkowych informacji, Ponadto wykorzystanie kolorów w interfejsie pozwala zwiększyd pojemnośd pamięci krótkoterminowej, 96% informacji ze świata zyskujemy dzięki percepcji wzrokowej, Zaburzenia w widzeniu koloru ludzkie oko wyposażone jest w czopki wypełnione odpowiednim pigmentem dającym możliwośd widzenia jednej z trzech podstawowych barw, jeśli brakuje nam któregoś z nich mamy zaburzenia w widzeniu, Zaburzenia te bada się najczęściej za pomocą kart Ishihary, na których wypisana jest liczba widoczna dla wszystkich oprócz tych, którzy ciepią na barwoślepotę, źródło: M. Kasperski, A. Boguska-Torbicz, Projektowanie 11

12 Zaburzenia w widzeniu koloru Zaburzenia w widzeniu koloru Barwoślepota jest genetyczna i dotyka 15% mężczyzn oraz 0.5% kobiet, z całej populacji barwoślepotą dotkniętych jest 10% ludzi, Podstawowe zaburzenia w ramach barwoślepoty: protanopia - nierozpoznawanie barwy czerwonej (lub mylenie jej z barwą zieloną), dotyka 1% mężczyzn i 0,02% kobiet; deuteranopia (tzw. daltonizm) nierozpoznawanie barwy zielonej (lub mylenie jej z barwą czerwoną), dotyka 1% mężczyzn i 0,02% kobiet; tritanopia nierozpoznawanie barw żółtej i niebieskiej, dotyka 0,002% mężczyzn i 0,001% kobiet. Inne schorzenie to niedowidzenie barw (wynika m.in. z koloru oczu): protanomalia - obniżona percepcja nasycenia i jaskrawości czerwieni, dotyka 1% mężczyzn; deuteranomalia - obniżona percepcja na nasycenie (ale nie jaskrawośd) zieleni, dotyka 6% mężczyzn i 0,4% kobiet; tritanomalia - występująca nad wyraz rzadko obniżona percepcja barwy niebieskiej, Istnieją także bardzo rzadkie przypadki całkowitej ślepoty na barwy. Zjawisko to określa się mianem monochromatyzmu i dotyka około 0,005% całej populacji. Zaburzenia w widzeniu koloru Zaburzenia w widzeniu koloru Przy projektowaniu należy uwzględnid testy i badania sprawdzające czytelnośd strony dla osób dotkniętych barwoślepotą. Ma to znaczenie zwłaszcza w dwóch przypadkach: gdy używamy jako barw podstawowych kolorów z podstawowej palety; gdy wymagany jest odpowiedni kontrast między tłem a kolorem zapisanego na nim tekstu. źródło: M. Kasperski, A. Boguska-Torbicz, Projektowanie 12

13 Narzędzia Vischeck (http://www.vischeck.com) Narzędzia Colorblind Web Page Filter (http://colorfilter.wickline.org) protanopia deutanopia tritanopia Narzędzia Visual Impairment Simulator (http://vis.cita.uiuc.edu/downld.php) Symuluje takie zaburzenia wzroku jak: Katarakta, Ślepota na barwy, Jaskra, Dalekowzrocznośd, Zwyrodnienie plamki żółtej 8.8% populacji, po 75 roku 28%, Znaczenie kolorów źródło: M. Kasperski, A. Boguska-Torbicz, Projektowanie Kolor Czerwony Różowy Pomaraoczowy Żółty Brązowy Zielony Znaczenie Sita, władza, pasja, niebezpieczeostwo, błąd, stop, ostrzeżenie, agresja, ogieo, odwaga, gorący, luksusowy, namiętnośd, bogactwo, śmiałośd Kobiecośd, kolor słodki i cukierkowy, kiczowatośd, popkultura Ciepło, jesieo, Halloween, energia, żywotnośd, świeżośd, nowoczesnośd, ostrożnośd. Zadowolenie, ostrożnośd, słonecznośd, pogoda ducha, optymizm, radośd, dostatek, zawiśd, zazdrośd Zabrudzenie, zaufanie, przyjaźo, pewnośd, jesieo, klasyka Zazdrośd, sielska atmosfera, wiosna, natura, wzrost, żyznośd, nowośd, nadzieja, przyjaźo, niedoświadczenie, sukces, uzdrawiania, ochrona środowiska 13

14 Znaczenie kolorów Znaczenie kolorów Kolor Niebieski Fioletowy Czarny Szary, srebrny Biały Znaczenie Męskośd, woda, smutek, bezpieczeostwo, niebo, spokój ducha, wzniosłośd uczud Tajemnica, kolor królewski, mądrośd, duchowe poznanie, wtajemniczenie Zło, noc, upiorny, śmierd, żałoba, powaga, autorytet, strach, siła Czystośd, rozsądek, niewinnośd, szlachetnośd, stare czasy (czarno-białe filmy); w zależności od jasności: radośd, pochmurny, mrok Niewinnośd, czysty, zimny, nieskazitelny, niewinny, chłodny, zima źródło: M. Kasperski, A. Boguska-Torbicz, Projektowanie Znaczenie kolorów Kolory wpływają na samopoczucie co wykorzystują specjaliści od marketingu oraz ergonomii. I tak: różowy, szary, biały, jasny zielony, pastelowy błękit - serwisy kobiece; fiolet, granat, srebrny, czarny serwisy astrologiczne, z horoskopami; czarny ze złotym, ale także czarny ze srebrnym - sklep z luksusową biżuterią, ciemny zielony, khaki, szary militaria, survival; jasny zielony ogrodnictwo; brązowy, czarny - producent galanterii skórzanej; żółty, pomaraoczowy, piaskowe brązy, błękitny serwis turystyczny z podróżami do ciepłych krajów; granatowy, szary: strony dla menadżerów; żółty, pomaraoczowy, czarny, szary - sprzęt budowlany, urządzenia techniczne Dobór kolorystyki Kierując się zbiorem przyjętych zasad można stworzyd tzw. schematy kolorów harmonijnych: monochromatyczne pastelowe kontrastowe Do tworzenia zestawów harmonijnych wykorzystuje się m.in. zasady: Zasada kompletności: dwa kolory leżące naprzeciw siebie w kole barw, Zasada triady: trzy kolory leżące na kole barw w jednakowych odległościach od siebie, tworząc trójkąt, Cztery barwy z koła barw, które leżą tak, że tworzą narożniki prostokąta, 14

15 Dobór kolorystyki Dobór kolorystyki Zestawy monochromatyczne: weź dowolny kolor, z jednej strony dodawaj do niego +20%, +40%, + 60%, +80% białego, z drugiej strony +20%, +40%, +60%, +80% koloru czarnego, Zestawy kolorów pastelowych: uzyskujemy z odległych od siebie barw, ale posiadających podobne cechy, na przykład niski stopieo nasycenia, Zestawy kontrastowe: wystarczy połączyd ze sobą barwy dopełniające się. Sposoby czerpania zestawów kolorystycznych: Z dowolnej grafiki, Czerpanie kolorów z palety wielkich malarzy, pozwala na zdobycie wysmakowanych i sprawdzonych zestawów, Kolorystyka natury, przyrody, która jest bardzo dobrze odbierana przez układ nerwowy człowieka, jako piękna i harmonijna, Color Palette Generator (http://www.degraeve.com/colorpalette) źródło: Dobór kolorystyki Narzędzia Programy łapacze kolorów Colour Spy (http://www.silveragesoftware.com) ColSel (http://www.colsel.prv.pl) Grab Website Colors (http://www.colorcombos.com) 15

16 Narzędzia Kuler Adobe Pozwala na tworzenie własnych zestawów kolorystycznych Pozwala na korzystanie ze stworzonych zestawów przez innych użytkowników Narzędzia Color Jack (http://www.colorjack.com/sphere/) deuteranopia protanopia Narzędzia Color Fields Colr Pickr (http://www.krazydad.com/colrpickr/) Dobieranie grafiki do koloru Narzędzia Strony WWW z filtrowaniem kolorów

17 Projektowanie obsługi błędów Projektując serwis należy opracowad strategię działania w sytuacjach krytycznych, Od dobrego projektu obsługi błędów zależy jak użytkownik sobie z nimi poradzi, Najczęściej występujące błędy: błąd serwera (500), błąd Page not found (404), brak możliwości połączenia ze stroną, błędny wynik wyszukiwania, błędnie uzupełniony formularz, brak produktu. Projektowanie obsługi błędów Badania przeprowadzone przez Czytodziala.pl, badania objęły 150 dni w 2007 roku i analizę serwisów czołowych dostarczycieli hostingu w Polsce źródło: M. Kasperski, A. Boguska-Torbicz, Projektowanie Projektowanie obsługi błędów Komunikaty o błędzie Badania El-Monito.pl z roku , udział wzięło około 650 serwisów; wnioski: średnio przestój 35h miesięcznie, dwa dni w miesiącu (10%) problematyka komunikatów o błędach jest wielopłaszczyznowa. Dotyczy zarówno sfery wizualnej (wygląd komunikatu, kolor, czcionka itd.), gramatycznej (odpowiednie sformułowanie przekazu) oraz ideologicznej (jakie informacje powinien zawierad). źródło: M. Kasperski, A. Boguska-Torbicz, Projektowanie źródło: M. Kasperski, A. Boguska-Torbicz, Projektowanie 17

18 Komunikaty o błędzie Komunikaty o błędzie zawsze, gdy na stronie wystąpi błąd, powinien pojawid się komunikat o jego wystąpieniu, który musi byd: widoczny, zrozumiały, wskazujący dalszą drogę postępowania, Widocznośd komunikatu powinien pojawid się w miejscu, w którym występuje problem; powinien wyróżniad się od pozostałej części strony ; może byd poprzedzony widoczną ikoną alertu. źródło: M. Kasperski, A. Boguska-Torbicz, Projektowanie Miejsce komunikatu Informacje o błędzie warto umieszczad na górze strony i w miejscu, w którym wystąpił błąd. Jeśli takie informacje wyświetlą się jedynie na górze strony, użytkownik będzie musiał sam odnaleźd miejsce, w którym on wystąpił, Miejsce komunikatu 18

19 Wyróżnienie komunikatu komunikaty o błędach powinny mied swój własny styl. Mogą odróżniad się od pozostałej części strony kolorem czcionki, pogrubieniem lub ramką. Widocznośd takich komunikatów można dodatkowo zwiększyd, poprzedzając je ikoną błędu. Wyróżnienie komunikatu Spójność komunikatów Warto aby oznaczenie komunikatów na stronie było spójne, Jeśli komunikaty zawsze będą miały ten sam styl, witryna zostanie odebrana jako spójna i jednorodna, a użytkownik szybciej rozpozna kolejny błąd i natychmiast rozpocznie rozwiązywanie problemu, Dobrze sformułowany komunikat o błędzie powinien odpowiadad na pytanie: jaki błąd wystąpił gdzie wystąpił jak należy dalej postępowad oraz byd napisany prostym zrozumiałym dla wszystkich językiem (bez określeo ściśle technicznych). Redagowanie komunikatów Przy redagowaniu komunikatów warto pamiętad o poniższych regułach: Na początku powinien znajdowad się nagłówek z informacją o wystąpieniu błędu i o jego rodzaju, W treści należy umieścid krótkie wskazówki dotyczące rozwiązania problemu, Dłuższy tekst powinien byd rozbity na kilka zwięzłych i czytelnych podpunktów. Istotnym informacjom warto nadad inny styl (pogrubienie, zmiana koloru tekstu na jeden z kolorów ostrzegawczych czerwony, pomaraoczowy, żółty). Nie należy tworzyd zbyt długich tekstów. 19

20 Redagowanie komunikatów Formularze Właściwie sformatowany formularz charakteryzuje się: zredukowaną do minimum liczbą pól obowiązkowych; jasnym i klarownym zaznaczeniem pól obowiązkowych; długością pól dopasowaną do wymaganych informacji; odpowiednimi odstępami między pomiędzy polami; Opisami po lewej stronie pól których dotyczą; Polami pogrupowanymi według treści; Liczba pól w formularzu W formularzu starajmy się umieścid jak najmniej pól, gdyż internauci zwykle niechętnie ujawniają różne dane. Należy je projektowad tak, by formularze były jak najbardziej przyjazne użytkownikowi, dobrze sformatowane, a przede wszystkim krótkie i zwięzłe, Pola obowiązkowe Należy zminimalizowad liczbę pól obowiązkowych w formularzach; Wymaganie niektórych danych może budzid w użytkowniku lęk i opór; Odczucia użytkownika w stosunku do podawania danych zależą od rodzaju serwisu; Dajmy użytkownikowi możliwośd wyboru, jeśli go przymusimy to wywoła mechanizm tzw. reaktancji psychologicznej (wg autora teorii Jacka Brehma (1966) polega na dążeniu jednostki do przywrócenia wolności wyboru, zagrożonej przez narzucenie jej jakiegoś ograniczenia lub zakazu. Jednocześnie w jednostce budzi się niechęd wobec źródła przeszkód oraz motywacja do przywrócenia stanu swobody); 20

21 Pola obowiązkowe Wymagane pola przyjęło się oznaczad: kolorową gwiazdką przy opisie pola, opisem pola jako obowiązkowego, pogrubieniem lub zmianą koloru tekstu w opisie pola, Długości pól Pola w formularzu powinny byd dopasowane do długości wpisywanego w nie tekstu, Nie powinno byd identycznej długości pól, gdyż odpowiedni rozmiar pola usprawnia i przyspiesza wypełnianie formularza, Jeśli pole będzie zbyt długie lub za krótkie, użytkownik może się zastanawiad, czy dane właściwie, Odstępy pomiędzy polami formularz będzie łatwiej wypełnid, jeśli zachowane zostaną odpowiednie odstępy między polami, Między polami powinna byd przestrzeo, a samo pole wraz z opisem stanowid musi osobny wizualny element. Opisy pól opisy pól powinny się znajdowad z lewej strony pola, gdy są gdzie indziej (nad polami lub w ich środku), czyta się je znacznie trudniej, warto umieszczad opisy tuż obok pól, których dotyczą, i wyrównad tekst do pola, czyli najczęściej do prawej, a nie klasycznie do lewej strony, każde pole wraz z opisem powinno stanowid osobny element. 21

22 Grupowanie pól Niewłaściwe dane Jeśli pól w formularzu musi byd rzeczywiście dużo podziel je na grupy logiczne z podtytułami lub nawet na podstrony (tzw. forma wizard), Nie umieszczaj zbyt dużo podstron, jeśli już to pokazuj ile kroków jeszcze zostało, Jeśli chcesz, aby użytkownik rzadziej popełniał błędy przy uzupełnianiu formularza to przestrzegaj następujących zasad: Formularz powinien przyjmowad wszystkie używane formaty danych określonego typu, na przykład różną pisownię dat, Podane zostały przykłady właściwego formatowania, Znalazła się w nich informacja o maksymalnej liczbie pozycji i znaków, System sam sprawdzał pola zaraz po ich wypełnieniu przez użytkownika (walidacja), Na stronie formularza nie było reklam i innych elementów rozpraszających. Niewłaściwe dane Ograniczenie wyboru i natychmiastowe sprawdzanie Stosuj takie elementy jak listy rozwijane, check boxy, radio buttony, Jeśli dużo opcji korzystniej jest zaoferowad użytkownikom autouzupełnianie pól, Szybsze i bezbłędne uzupełnianie formularza ułatwi funkcja natychmiastowego sprawdzania danych. Zaraz po wprowadzeniu błędnych danych wyświetlana jest informacja o wystąpieniu błędu. 22

23 Jak zachęcić do wypełniania formularzy? Cel zbierania danych z formularza musi byd jasno sprecyzowany, Formularz powinien zawierad elementy motywujące do wypełnienia go, Należy stosowad podział na kroki oraz dad możliwośd rezygnacji na każdym etapie, Przygotowano na podstawie M. Kaperski, A. Boguska-Torbicz Projektowanie stron WWW. Uzytecznośd w praktyce, Helion, 2008 T. Karwatka, Efektywne i intuicyjne serwisy WWW Materiały z WUD'09 World Usability Day - Tour de Pologne 2009 Wysłanie wypełnionego formularza powinno byd potwierdzone stosownym komunikatem. 23

Zasady tworzenia prezentacji multimedialnych

Zasady tworzenia prezentacji multimedialnych Zasady tworzenia prezentacji multimedialnych I. Główne zasady: prezentacja multimedialna powinna być ilustracją (uzupełnieniem) treści prezentowanych werbalnie; informacje zawarte na pojedynczym slajdzie

Bardziej szczegółowo

Skuteczna prezentacja PowerPoint. Opracowanie: Anna Walkowiak

Skuteczna prezentacja PowerPoint. Opracowanie: Anna Walkowiak Skuteczna prezentacja PowerPoint Opracowanie: Anna Walkowiak Pomoce wizualne Pomoc wizualna jest dobra gdy: treść i obraz pomocy wizualnej są łatwo zrozumiałe, jest ona czytelna, przekazuje pojedynczą

Bardziej szczegółowo

I. Formatowanie tekstu i wygląd strony

I. Formatowanie tekstu i wygląd strony I. Formatowanie tekstu i wygląd strony Akapit: ... aby wyrównać tekst do lewego marginesu aby wyrównać tekst do prawego marginesu:

Bardziej szczegółowo

Podstawy edycji tekstu

Podstawy edycji tekstu Podstawy edycji tekstu Edytor tekstu (ang. word processor) to program umożliwiający wprowadzanie, redagowanie, formatowanie oraz drukowanie dokumentów tekstowych. Wyliczmy możliwości dzisiejszych aplikacji

Bardziej szczegółowo

Komunikacja człowiek-komputer. dr Artur Bartoszewski

Komunikacja człowiek-komputer. dr Artur Bartoszewski Komunikacja człowiek-komputer dr Artur Bartoszewski Typografia Typografia Przejrzystość nadal stanowi poważny problem dzisiejszych stron internetowych. Nieważne, jak dobrze wygląda serwis. Jeżeli ludzie

Bardziej szczegółowo

Tworzenie i edycja dokumentów w aplikacji Word.

Tworzenie i edycja dokumentów w aplikacji Word. Tworzenie i edycja dokumentów w aplikacji Word. Polskie litery, czyli ąłóęśźżń, itd. uzyskujemy naciskając prawy klawisz Alt i jednocześnie literę najbardziej zbliżoną wyglądem do szukanej. Np. ł uzyskujemy

Bardziej szczegółowo

KREACJA DOOH Projektowanie kreacji na ekrany Digital Out Of Home rządzi się swoimi prawami. Przedstawiamy zbiór wskazówek i porad, które pomogą Ci

KREACJA DOOH Projektowanie kreacji na ekrany Digital Out Of Home rządzi się swoimi prawami. Przedstawiamy zbiór wskazówek i porad, które pomogą Ci KREACJA DOOH Projektowanie kreacji na ekrany Digital Out Of Home rządzi się swoimi prawami. Przedstawiamy zbiór wskazówek i porad, które pomogą Ci stworzyć atrakcyjną i efektywną reklamę na nośniki cyfrowego

Bardziej szczegółowo

1. Narzędzia główne: WORD 2010 INTERFEJS UŻYTKOWNIKA. wycinamy tekst, grafikę

1. Narzędzia główne: WORD 2010 INTERFEJS UŻYTKOWNIKA. wycinamy tekst, grafikę 1. Narzędzia główne: wycinamy tekst, grafikę stosowanie formatowania tekstu i niektórych podstawowych elementów graficznych umieszczane są wszystkie kopiowane i wycinane pliki wklejenie zawartości schowka

Bardziej szczegółowo

Komunikacja człowiek-komputer. Wykład 4

Komunikacja człowiek-komputer. Wykład 4 Komunikacja człowiek-komputer Wykład 4 Typografia Typografia sztuka użytkowa mająca na celu graficzną interpretację drukowanej informacji, a więc ukształtowanie i układ elementów graficznych całej publikacji.

Bardziej szczegółowo

Załącznik do zarządzenia kanclerza nr 6 z dnia 8 maja 2013 r. KSIĘGA ZNAKU SGH

Załącznik do zarządzenia kanclerza nr 6 z dnia 8 maja 2013 r. KSIĘGA ZNAKU SGH Załącznik do zarządzenia kanclerza nr 6 z dnia 8 maja 2013 r. KSIĘGA ZNAKU SGH Spis treści 1. Godło i logo opis. 2. Godło i logo konstrukcja. 3. Logo pole ochronne. 4. Logotyp i jego warianty. 5. Logotyp

Bardziej szczegółowo

OKNO NA ŚWIAT - PRZECIWDZIAŁANIE WYKLUCZENIU CYFROWEMU W MIEŚCIE BRZEZINY

OKNO NA ŚWIAT - PRZECIWDZIAŁANIE WYKLUCZENIU CYFROWEMU W MIEŚCIE BRZEZINY Projekt OKNO NA ŚWIAT - PRZECIWDZIAŁANIE WYKLUCZENIU CYFROWEMU W MIEŚCIE BRZEZINY współfinansowany przez Unię Europejską ze środków Europejskiego Funduszu Rozwoju Regionalnego w ramach Programu Operacyjnego

Bardziej szczegółowo

Leonardo da Vinci KSIĘGA IDENTYFIKACJI WIZUALNEJ

Leonardo da Vinci KSIĘGA IDENTYFIKACJI WIZUALNEJ Leonardo da Vinci KSIĘGA IDENTYFIKACJI WIZUALNEJ 1. } logotyp, kolorystyka i typografia } 4 1.1. } logotyp Logotyp jest najważniejszym elementem identyfikacji wizualnej programu Leonardo da Vinci, dlatego

Bardziej szczegółowo

WORDPRESS INSTRUKCJA OBSŁUGI

WORDPRESS INSTRUKCJA OBSŁUGI WORDPRESS INSTRUKCJA OBSŁUGI Zapraszamy do zapoznania się z Instrukcją obsługi panelu CMS Wordpress, która w krótkim czasie i bez większego kłopotu pozwoli na edycję treści i zawartości strony, w tym:

Bardziej szczegółowo

Jak dobrze budować strony www.

Jak dobrze budować strony www. Jak dobrze budować strony www. W procesie projektowania stron www, kierujemy się różnymi zasadami, wytycznymi, badaniami użytkowników, doświadczeniem, opiniami itp. Wszystko to tworzy pewien zestaw przykazań

Bardziej szczegółowo

Prezentacja multimedialna MS PowerPoint 2010 (podstawy)

Prezentacja multimedialna MS PowerPoint 2010 (podstawy) Prezentacja multimedialna MS PowerPoint 2010 (podstawy) Cz. 1. Tworzenie slajdów MS PowerPoint 2010 to najnowsza wersja popularnego programu do tworzenia prezentacji multimedialnych. Wygląd programu w

Bardziej szczegółowo

Wymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr 351203)

Wymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr 351203) Wymagania edukacyjne: Statyczne witryny internetowe (na podstawie programu nr 351203) Technikum - kl. 3 Td, semestr 5 i 6 Ocena niedostateczna dopuszczająca Wymagania edukacyjne wobec ucznia: Uczeń nie

Bardziej szczegółowo

Podręcznik Identyfikacji Wizualnej

Podręcznik Identyfikacji Wizualnej Podręcznik Identyfikacji Wizualnej 1. ZESTAWIENIE ZNAKÓW 1 Znak RDC występuje w wersji pełnej z dopiskiem: Polskie Radio. Podstawowa wersja znaku składa się z symbolu graficznego RDC. Znak jako podstawowy

Bardziej szczegółowo

15 ZALECEŃ dla dostępności serwisów internetowych i dokumentów

15 ZALECEŃ dla dostępności serwisów internetowych i dokumentów Zgodnie z Rozporządzeniem Rady Ministrów z dnia 12 kwietnia 2012 r. w sprawie Krajowych Ram Interoperacyjności, minimalnych wymagań dla rejestrów publicznych i wymiany informacji w postaci elektronicznej

Bardziej szczegółowo

EDYCJA TEKSTU MS WORDPAD

EDYCJA TEKSTU MS WORDPAD EDYCJA TEKSTU MS WORDPAD EDYCJA TEKSTU - MS WORDPAD WordPad (ryc. 1 ang. miejsce na słowa) to bardzo przydatny program do edycji i pisania tekstów, który dodatkowo dostępny jest w każdym systemie z rodziny

Bardziej szczegółowo

ECDL/ICDL Przetwarzanie tekstów Moduł B3 Sylabus - wersja 5.0

ECDL/ICDL Przetwarzanie tekstów Moduł B3 Sylabus - wersja 5.0 ECDL/ICDL Przetwarzanie tekstów Moduł B3 Sylabus - wersja 5.0 Przeznaczenie sylabusa Dokument ten zawiera szczegółowy sylabus dla modułu ECDL/ICDL Przetwarzanie tekstów. Sylabus opisuje zakres wiedzy i

Bardziej szczegółowo

Sylabus Moduł 2: Przetwarzanie tekstów

Sylabus Moduł 2: Przetwarzanie tekstów Sylabus Moduł 2: Przetwarzanie tekstów Niniejsze opracowanie przeznaczone jest dla osób zamierzających zdać egzamin ECDL (European Computer Driving Licence) na poziomie podstawowym. Publikacja zawiera

Bardziej szczegółowo

LOGO BUDOWA LOGO. Znak składa się z dwóch części - sygentu zbudowanego z trzech wielkoątów oraz logotypu - typograficznego zapisu nazwy firmy CDA.

LOGO BUDOWA LOGO. Znak składa się z dwóch części - sygentu zbudowanego z trzech wielkoątów oraz logotypu - typograficznego zapisu nazwy firmy CDA. LOGO FIRMOWE LOGO Logo jest głównym elementem identyfikacji wizualnej firmy. Dzięki oryginalnej formie i odpowiedniej kolorystyce jest ono łatwo rozpoznawane i zapamiętywane. BUDOWA LOGO Znak składa się

Bardziej szczegółowo

księga znaku fundacja równe szanse

księga znaku fundacja równe szanse księga znaku fundacja równe szanse spis treści: znak marki 3 sygnet - konstrukcja 4 logo - wersja podstawowa 5 logo - wymiarowanie 6 logo - skalowanie 7 kolorystyka - wersja pełnokolorowa 8 wersja monochromatyczna

Bardziej szczegółowo

CZEGO UNIKAĆ. tworząc prezentację multimedialną. Andrzej Kozdęba

CZEGO UNIKAĆ. tworząc prezentację multimedialną. Andrzej Kozdęba CZEGO UNIKAĆ tworząc prezentację multimedialną Andrzej Kozdęba UWAGA! Prezentacji, którą w tym momencie oglądasz, nie użyłbym podczas żadnego wystąpienia. Nie taki jest jej cel. W tej prezentacji jest

Bardziej szczegółowo

OLIMPIADA INFORMATYCZNA 2010 ROK ETAP SZKOLNY

OLIMPIADA INFORMATYCZNA 2010 ROK ETAP SZKOLNY KOD UCZNIA OLIMPIADA INFORMATYCZNA 2010 ROK ETAP SZKOLNY * Postaw znak x w okienku obok właściwej odpowiedzi. 1. Przybornik w programie Paint to element programu, w którym znajdują się: kolory przyciski

Bardziej szczegółowo

Ważne zasady redagowania tekstów

Ważne zasady redagowania tekstów Ważne zasady redagowania tekstów 1. Elementy typografii krój pisma, atrybuty tekstu, wielkość znaków. 2. Formatowanie i redagowanie tekstu. 3. Błędy redakcyjne w tekście, stosowanie słowniczka. 4. Spacje,

Bardziej szczegółowo

Prezentacje multimedialne w Powerpoint

Prezentacje multimedialne w Powerpoint Prezentacje multimedialne w Powerpoint Ćwiczenie 1. Tworzenie prezentacji multimedialnej. POMOC DO ĆWICZENIA Dostęp do pomocy w programie: menu Pomoc Microsoft Office PowerPoint Pomoc. Aby ustawić tło

Bardziej szczegółowo

1.Formatowanie tekstu z użyciem stylów

1.Formatowanie tekstu z użyciem stylów 1.Formatowanie tekstu z użyciem stylów Co to jest styl? Styl jest ciągiem znaków formatujących, które mogą być stosowane do tekstu w dokumencie w celu szybkiej zmiany jego wyglądu. Stosując styl, stosuje

Bardziej szczegółowo

Edytor tekstu MS Word 2010 - podstawy

Edytor tekstu MS Word 2010 - podstawy Edytor tekstu MS Word 2010 - podstawy Cz. 4. Rysunki w dokumencie Obiekt WordArt Jeżeli chcemy zamieścid w naszym dokumencie jakiś efektowny napis, na przykład hasło reklamowe, możemy wykorzystad galerię

Bardziej szczegółowo

Litery O wskazują pole ochronne, które nie może być mniejsze niż wielkość samej litery

Litery O wskazują pole ochronne, które nie może być mniejsze niż wielkość samej litery Księga znaku ROZDZIAŁ 02 znak MARKI Nowy znak naszej firmy składa się z nowej nazwy i skierowanej naprzód strzałki symbolizującej zdecydowanie i rozwój. To unikalne połączenie symbolu i tekstu to najistotniejszy

Bardziej szczegółowo

1.2 Logo Sonel podstawowe załoŝenia

1.2 Logo Sonel podstawowe załoŝenia 1.2 Logo Sonel podstawowe załoŝenia Logo czyli graficzna forma przedstawienia symbolu i nazwy firmy. Terminu logo uŝywamy dla całego znaku, składającego się z sygnetu (symbolu graficznego) i logotypu (tekstowego

Bardziej szczegółowo

OCHRONA PRAWNA ZNAKU TOWAROWEGO. Słowny i graficzny znak towarowy STEGU w Polsce i na świecie jest znakiem prawnie chronionym.

OCHRONA PRAWNA ZNAKU TOWAROWEGO. Słowny i graficzny znak towarowy STEGU w Polsce i na świecie jest znakiem prawnie chronionym. KSIĘGA ZNAKU KSIĘGA ZNAKU SPIS TREŚCI 01 02 03 04 05 06 07 08 09 10 EWOLUCJA LOGO STEGU LOGO I POLE OCHRONNE LOGO I SIATKA MODUŁOWA LOGO I KOLORYSTYKA LOGO I WERSJA MONOCHROMATYCZNA LOGO I WERSJA W KONTRZE

Bardziej szczegółowo

KILKA WSKAZÓWEK ZWIĄZANYCH ZE SKŁADEM TEKSTU PRACY LICENCJACKIEJ (MAGISTERSKIEJ) I KSIĄŻKI W PROGRAMIE MICROSOFT WORD 2010

KILKA WSKAZÓWEK ZWIĄZANYCH ZE SKŁADEM TEKSTU PRACY LICENCJACKIEJ (MAGISTERSKIEJ) I KSIĄŻKI W PROGRAMIE MICROSOFT WORD 2010 KILKA WSKAZÓWEK ZWIĄZANYCH ZE SKŁADEM TEKSTU PRACY LICENCJACKIEJ (MAGISTERSKIEJ) I KSIĄŻKI W PROGRAMIE MICROSOFT WORD 2010 Jeśli musisz samodzielnie złożyć swoją pracę licencjacką (magisterską) lub przygotować

Bardziej szczegółowo

Jak profesjonalnie pisać teksty w edytorach tekstu? Na jakie drobiazgi należałoby zwrócić szczególną uwagę?

Jak profesjonalnie pisać teksty w edytorach tekstu? Na jakie drobiazgi należałoby zwrócić szczególną uwagę? Jak profesjonalnie pisać teksty w edytorach tekstu? Na jakie drobiazgi należałoby zwrócić szczególną uwagę? Pamiętaj o celu pisania dokumentu. Dostosuj do tego format strony i jej układ (w pionie czy w

Bardziej szczegółowo

LOGO MANUAL Instrukcja poprawnego stosowania Logo BIKE COMPANY

LOGO MANUAL Instrukcja poprawnego stosowania Logo BIKE COMPANY LOGO MANUAL Instrukcja poprawnego stosowania Logo WSTĘP KELLYS LogoManual to dokument określający podstawowe zasady wykorzystania elementów graficznych logo i logotypu Kellys Bicycles przy zachowaniu jednolitego

Bardziej szczegółowo

Wytyczne do projektu strony WWW oraz obsługi Systemów CMS.

Wytyczne do projektu strony WWW oraz obsługi Systemów CMS. Wytyczne do projektu strony WWW oraz obsługi Systemów CMS. Informacje wstępne: Adres systemu w którym należy wykonać projekt: poczta.swspiz.edu.pl jest to interfejs oparty o technologię Gogle APPS dla

Bardziej szczegółowo

Komunikacja człowiek - komputer. Ćwiczenie 1. Temat: ocena funkcjonalności witryny internetowej. Wykonali:... ... ... ...

Komunikacja człowiek - komputer. Ćwiczenie 1. Temat: ocena funkcjonalności witryny internetowej. Wykonali:... ... ... ... Komunikacja człowiek - komputer Ćwiczenie 1 Temat: ocena funkcjonalności witryny internetowej Wykonali:............ Zadanie: należy ocenić wybrana witrynę internetową odpowiadając na pytania z tabeli.

Bardziej szczegółowo

Podstawy tworzenie prezentacji multimedialnej w programie. MS Power Point

Podstawy tworzenie prezentacji multimedialnej w programie. MS Power Point SCENARIUSZ ZAJĘĆ Osoba prowadząca: Temat zajęć: mgr Piotr Okłót Podstawy tworzenie prezentacji multimedialnej w programie Ilość godzin: 2 x 45 min Cel ogólny zajęć: MS Power Point Sprawna komunikacja z

Bardziej szczegółowo

KRYTERIA OCENIANIA Z ZAJĘĆ KOMPUTEROWYCH W KLASIE IV

KRYTERIA OCENIANIA Z ZAJĘĆ KOMPUTEROWYCH W KLASIE IV KRYTERIA OCENIANIA Z ZAJĘĆ KOMPUTEROWYCH W KLASIE IV I OKRES Sprawności 1. Komputery i programy konieczne (ocena: dopuszczający) wymienia z pomocą nauczyciela podstawowe zasady bezpiecznej pracy z komputerem;

Bardziej szczegółowo

Cel wykładu. Czcionka font. Wykład 3: MS Word cz. 2. WyŜsza Szkoła MenedŜerska w Legnicy. Informatyka w zarządzaniu Zarządzanie, zaoczne, sem.

Cel wykładu. Czcionka font. Wykład 3: MS Word cz. 2. WyŜsza Szkoła MenedŜerska w Legnicy. Informatyka w zarządzaniu Zarządzanie, zaoczne, sem. WyŜsza Szkoła MenedŜerska w Legnicy Informatyka w zarządzaniu Zarządzanie, zaoczne, sem. 3 Wykład 3: MS Word cz. 2 Grzegorz Bazydło Cel wykładu Celem wykładu jest omówienie podstawowych zagadnień związanych

Bardziej szczegółowo

STRONY INTERNETOWE mgr inż. Adrian Zapała

STRONY INTERNETOWE mgr inż. Adrian Zapała 1 STRONY INTERNETOWE mgr inż. Adrian Zapała STRONY INTERNETOWE Rodzaje stron internetowych statyczne (statyczny HTML + CSS) dynamiczne (PHP, ASP, technologie Flash) 2 JĘZYKI STRON WWW HTML (ang. HyperText

Bardziej szczegółowo

System Identyfikacji Wizualnej Księga znaku

System Identyfikacji Wizualnej Księga znaku Projekt współfinansowany przez Unię Europejską z Europejskiego Funduszu Rozwoju Regionalnego. Fundusze Europejskie dla rozwoju regionu łódzkiego. Projekt pn. Opracowanie Strategii Marki Miasta Bełchatowa

Bardziej szczegółowo

Pokaz slajdów na stronie internetowej

Pokaz slajdów na stronie internetowej Pokaz slajdów na stronie internetowej... 1 Podpisy pod zdjęciami... 3 Publikacja pokazu slajdów w Internecie... 4 Generator strony Uczelni... 4 Funkcje dla zaawansowanych użytkowników... 5 Zmiana kolorów

Bardziej szczegółowo

CAŁOŚĆ OPRACOWANIA POWINNA ZAWIERAĆ MAKSYMALNIE 10 STRON.

CAŁOŚĆ OPRACOWANIA POWINNA ZAWIERAĆ MAKSYMALNIE 10 STRON. CAŁOŚĆ OPRACOWANIA POWINNA ZAWIERAĆ MAKSYMALNIE 10 STRON. REDAKCJA NIE INGERUJE W ZAWARTOŚĆ MERYTORYCZNĄ NADESŁANYCH ARTYKUŁÓW I NIE DOKONUJE KOREKTY PISOWNI. REDAKCJA PRZYJMUJE PLIKI WYŁĄCZNIE W FORMACIE

Bardziej szczegółowo

KSIĘGA IDENTYFIKACJI WIZUALNEJ

KSIĘGA IDENTYFIKACJI WIZUALNEJ KSIĘGA IDENTYFIKACJI WIZUALNEJ to uproszczony dokument zawierający informacje o podstawowych elementach identyfikacji graficznej Stowarzyszenia KRD Dyliniarnia. Dokument porządkuje elementy wizualne w

Bardziej szczegółowo

Zasady adaptacji materiałów dydaktycznych dla uczniów słabowidzących. Donata Kończyk

Zasady adaptacji materiałów dydaktycznych dla uczniów słabowidzących. Donata Kończyk Zasady adaptacji materiałów dydaktycznych dla uczniów słabowidzących Donata Kończyk Geneza powstania / opracowania Zasad adaptacji materiałów dydaktycznych dla uczniów słabowidzących Anna Baszniak dr Joanna

Bardziej szczegółowo

Metody badawcze Marta Więckowska

Metody badawcze Marta Więckowska Metody badawcze Marta Więckowska Badania wizualne pozwalają zrozumieć proces postrzegania oraz obserwować jakie czynniki wpływają na postrzeganie obrazu. Czynniki wpływające na postrzeganie obrazu to:

Bardziej szczegółowo

Copyright wersji angielskiej: The European Computer Driving Licence Foundation Ltd. Copyright wersji polskiej: Polskie Towarzystwo Informatyczne

Copyright wersji angielskiej: The European Computer Driving Licence Foundation Ltd. Copyright wersji polskiej: Polskie Towarzystwo Informatyczne Syllabus WEBSTARTER wersja 1.0 Polskie Towarzystwo Informatyczne 2007 Copyright wersji angielskiej: The European Computer Driving Licence Foundation Ltd. Copyright wersji polskiej: Polskie Towarzystwo

Bardziej szczegółowo

ZASADY REDAGOWANIA PRACY LICENCJACKIEJ

ZASADY REDAGOWANIA PRACY LICENCJACKIEJ 1 ZASADY REDAGOWANIA PRACY LICENCJACKIEJ ZASADY OGÓLNE Praca licencjacka pisana jest samodzielnie przez studenta. Format papieru: A4. Objętość pracy: 40-90 stron. Praca drukowana jest dwustronnie. Oprawa:

Bardziej szczegółowo

EDTCJA TEKSTU MS WORD

EDTCJA TEKSTU MS WORD EDTCJA TEKSTU MS WORD EDYCJA TEKSTU - MS WORD ilu.1 Program Word 2007 Zaawansowanym edytorem tekstu jest Microsoft Word 2007 (ang. Word znaczy słowo). Tak jak w MS WordPad edycję tekstu zacznijmy od zmiany

Bardziej szczegółowo

Formatowanie komórek

Formatowanie komórek Formatowanie komórek 3.4 Formatowanie komórek Praca w MS Excel 2010 byłaby bardzo uciążliwa gdyby nie formatowanie. Duże ilości danych sprawiają, iż nasz arkusz staje się coraz pełniejszy, a my nie mamy

Bardziej szczegółowo

Ćwiczenie 8 Kolory i znaki specjalne

Ćwiczenie 8 Kolory i znaki specjalne Ćwiczenie 8 Kolory i znaki specjalne W ćwiczeniu 8 zajmować się będziemy kolorami i znakami specjalnymi. Barwę moŝna utworzyć mieszając w odpowiednich proporcjach trzy kolory podstawowe: czerwony, zielony

Bardziej szczegółowo

Księga znaku Bundeslogo

Księga znaku Bundeslogo 2 Zasady stosowania znaku 2. Wersja podstawowa znaku 3. Forma i budowa znaku 4. Drukowanie na kolorowych tłach 5. Pozytyw / negatyw - możliwości wykorzystania 6. Liternictwo w znaku 7. Rozmiary 8. Niedozwolone

Bardziej szczegółowo

budowa i zasady użycia logo Fundacji Orange

budowa i zasady użycia logo Fundacji Orange budowa i zasady użycia 1 budowa i kolorystyka 1.1 A B logo Orange deskryptor Podstawowy znak Fundacji Orange składa się z logotypu Orange i deskryptora: Fundacja Orange, umieszczonego z prawej strony.

Bardziej szczegółowo

Elektroniczny Urząd Podawczy

Elektroniczny Urząd Podawczy Elektroniczny Urząd Podawczy Dzięki Elektronicznemu Urzędowi Podawczemu Beneficjent może wypełnić i wysłać formularz wniosku o dofinansowanie projektów w ramach Regionalnego Programu Operacyjnego Województwa

Bardziej szczegółowo

POWERPOINT GRAFIKA, PREZENTACJE

POWERPOINT GRAFIKA, PREZENTACJE POWERPOINT GRAFIKA, PREZENTACJE Przy tworzeniu prezentacji w programie PowerPoint 2007 należy zwrócić uwagę na: 1. Wybór stylu graficznego (aby upiększyć naszą prezentację) Aby ustalić styl wybieramy menu

Bardziej szczegółowo

GRUPA EXPERTUS KSIĘGA ZNAKU EXPERTUS

GRUPA EXPERTUS KSIĘGA ZNAKU EXPERTUS GRUPA EXPERTUS Firma od 1999 roku specjalizuje się w windykacji i zarządzaniu wierzytelnościami, jednocześnie świadcząc usługi prawne. Wieloletnie doświadczenie oraz profesjonalna obsługa pozwala zapewnić

Bardziej szczegółowo

Wstępny raport użyteczności strony internetowej www.plus.pl. www.webadviser.pl tel. +48 602 508 043 marcin.gajewski@webadviser.pl

Wstępny raport użyteczności strony internetowej www.plus.pl. www.webadviser.pl tel. +48 602 508 043 marcin.gajewski@webadviser.pl Wstępny raport użyteczności strony internetowej www.plus.pl www.webadviser.pl tel. +48 602 508 043 marcin.gajewski@webadviser.pl Spis treści 1. O webadviser 2. Wstępny raport użyteczności Paostwa strony

Bardziej szczegółowo

MATERIAŁY SZKOLENIOWE WORD PODSTAWOWY

MATERIAŁY SZKOLENIOWE WORD PODSTAWOWY MATERIAŁY SZKOLENIOWE WORD PODSTAWOWY 2013 Klawiatura narzędzie do wpisywania tekstu. 1. Wielkie litery piszemy z wciśniętym klawiszem SHIFT albo z włączonym klawiszem CAPSLOCK. 2. Litery typowe dla języka

Bardziej szczegółowo

System Identyfikacji Wizualnej Ministerstwa Gospodarki. System identyfikacji wizualnej Ministerstwa Gospodarki

System Identyfikacji Wizualnej Ministerstwa Gospodarki. System identyfikacji wizualnej Ministerstwa Gospodarki System identyfikacji wizualnej Ministerstwa Gospodarki System identyfikacji wizualnej Spis treści A podstawowe elementy identyfikacji 1 kolorystyka 2 logotypy 3 logotypy na apli 4 logotypy w wersji bez

Bardziej szczegółowo

Edytor tekstu OpenOffice Writer Podstawy

Edytor tekstu OpenOffice Writer Podstawy Edytor tekstu OpenOffice Writer Podstawy OpenOffice to darmowy zaawansowany pakiet biurowy, w skład którego wchodzą następujące programy: edytor tekstu Writer, arkusz kalkulacyjny Calc, program do tworzenia

Bardziej szczegółowo

MS Word 2010. Długi dokument. Praca z długim dokumentem. Kinga Sorkowska 2011-12-30

MS Word 2010. Długi dokument. Praca z długim dokumentem. Kinga Sorkowska 2011-12-30 MS Word 2010 Długi dokument Praca z długim dokumentem Kinga Sorkowska 2011-12-30 Dodawanie strony tytułowej 1 W programie Microsoft Word udostępniono wygodną galerię wstępnie zdefiniowanych stron tytułowych.

Bardziej szczegółowo

Reklama na portalu Świata Przemysłu Farmaceutycznego specyfikacja techniczna

Reklama na portalu Świata Przemysłu Farmaceutycznego specyfikacja techniczna Reklama na portalu Świata Przemysłu Farmaceutycznego specyfikacja techniczna Formy reklamowe: 1. Billboard UP 1100zł netto Graficzny prostokąt reklamowy umieszczony centralnie w górnej części portalu,

Bardziej szczegółowo

Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów Aplikacje internetowe KL. III Rok szkolny: 011/01 Nr programu: 31[01]/T,SP/MENIS/004.06.14 Okres kształcenia: łącznie ok. 180 godz. lekcyjne Wojciech Borzyszkowski Zenon Kreft Moduł Bok wprowadzający Podstawy

Bardziej szczegółowo

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np.

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR> Język html to język znaczników inaczej tagów, czyli słów lub skrótów pochodzących z języka angielskiego ujętych w nawiasy ostrokątne , np.. . W większości przypadków spotykamy znaczniki początku (inaczej

Bardziej szczegółowo

Przewodnik Szybki start

Przewodnik Szybki start Przewodnik Szybki start Program Microsoft Publisher 2013 wygląda inaczej niż wcześniejsze wersje, dlatego przygotowaliśmy ten przewodnik, aby skrócić czas nauki jego obsługi. Pasek narzędzi Szybki dostęp

Bardziej szczegółowo

Katalog identyfikacji wizualnej Państwowego Funduszu Rehabilitacji Osób Niepełnosprawnych

Katalog identyfikacji wizualnej Państwowego Funduszu Rehabilitacji Osób Niepełnosprawnych Załącznik do uchwały nr 186 /2011 Zarządu PFRON z dnia 8 września 2011 r. Katalog identyfikacji wizualnej Państwowego Funduszu Rehabilitacji Osób Niepełnosprawnych Wstęp Misją Państwowego Funduszu Rehabilitacji

Bardziej szczegółowo

EXCEL. Diagramy i wykresy w arkuszu lekcja numer 6. Instrukcja. dla Gimnazjum 36 - Ryszard Rogacz Strona 20

EXCEL. Diagramy i wykresy w arkuszu lekcja numer 6. Instrukcja. dla Gimnazjum 36 - Ryszard Rogacz Strona 20 Diagramy i wykresy w arkuszu lekcja numer 6 Tworzenie diagramów w arkuszu Excel nie jest sprawą skomplikowaną. Najbardziej czasochłonne jest przygotowanie danych. Utworzymy następujący diagram (wszystko

Bardziej szczegółowo

Wykonawca: PIOTR DOMALEWSKI. Termin oddania sprawozdania: 30.08

Wykonawca: PIOTR DOMALEWSKI. Termin oddania sprawozdania: 30.08 SPRAWOZDANIE Z LABORATORIUM Przedmiot: KOMUNIKACJA CZŁOWIEK KOMPUTER Temat ćwiczenia: ZNACZENIE BARWY W PROJEKTOWANIU INTERFEJSU UŻYTKOWNIKA Kierunek: Informatyka Tryb / semestr: Zaoczne / VI Termin wykonania

Bardziej szczegółowo

Podręcznik edycji tekstu dla inteligentnych

Podręcznik edycji tekstu dla inteligentnych Podręcznik edycji tekstu dla inteligentnych Spis treści Ogólne zasady edycji tekstu...3 Struktura dokumentu tekstowego...3 Strona...3 Akapit...3 Znak...3 Znaki niedrukowane...4 Twarda spacja, miękki i

Bardziej szczegółowo

za pomocą: definiujemy:

za pomocą: definiujemy: HTML CSS za pomocą: języka HTML arkusza CSS definiujemy: szkielet strony wygląd strony Struktura dokumentu html - znaczniki Znaczniki wyznaczają rodzaj zawartości. element strony

Bardziej szczegółowo

Zmysły. Wzrok 250 000 000. Węch 40 000 000. Dotyk 2 500 000. Smak 1 000 000. Słuch 25 000. Równowaga?

Zmysły. Wzrok 250 000 000. Węch 40 000 000. Dotyk 2 500 000. Smak 1 000 000. Słuch 25 000. Równowaga? Zmysły Rodzaj zmysłu Liczba receptorów Wzrok 250 000 000 Węch 40 000 000 Dotyk 2 500 000 Smak 1 000 000 Słuch 25 000 Równowaga? Fale elektromagnetyczne Wzrok Informacje kształt zbliżony do podstawowych

Bardziej szczegółowo

2.1. Logo UMK Logo. System Identyfikacji Wizualnej UNIWERSYTETU MIKOŁAJA KOPERNIKA

2.1. Logo UMK Logo. System Identyfikacji Wizualnej UNIWERSYTETU MIKOŁAJA KOPERNIKA 2. 2.1 Logo Najważniejszym elementem systemu identyfikacji wizualnej Uniwersytetu Mikołaja Kopernika w Toruniu jest logo. Składa się ono z graficznego znaku (sygnet) oraz logotypu z pełną nazwą uczelni.

Bardziej szczegółowo

Edytor tekstu MS Office Word

Edytor tekstu MS Office Word Edytor tekstu program komputerowy ukierunkowany zasadniczo na samo wprowadzanie lub edycję tekstu, a nie na nadawanie mu zaawansowanych cech formatowania (do czego służy procesor tekstu). W zależności

Bardziej szczegółowo

AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ

AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ Poznań, 2012-10-04 AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ NAZWA ADRES STRONY ILOŚĆ BŁĘDÓW WCAG 33 ILOŚĆ OSTRZEŻEŃ WCAG 3 TYP DOKUMENTU UŻYTY FORMAT (X)HTML JĘZYK OWANIE STRONY Urząd Marszałkowski Województwa

Bardziej szczegółowo

STRONA WWW A LANDING PAGE

STRONA WWW A LANDING PAGE Zajęcia 9 Czym się różnią? Przykład: http://www.expander.pl/ http://f.expander.pl/lp/20140124_hipo_kal_zdoln/index.jsp?lpid=20140124_hipo_ka l_zdoln&formtype=google_kredyt_hipoteczny&product0=99&idpartner=98&gclid=c

Bardziej szczegółowo

ROZSZERZENIE DO PRZEGLĄDARKI FIREFOX. Ograniczenia i bariery osób starszych. Bartosz Skurczyński (PJWSTK)

ROZSZERZENIE DO PRZEGLĄDARKI FIREFOX. Ograniczenia i bariery osób starszych. Bartosz Skurczyński (PJWSTK) ROZSZERZENIE DO PRZEGLĄDARKI FIREFOX Ograniczenia i bariery osób starszych Bartosz Skurczyński (PJWSTK) CEL PRACY Stworzenie rozszerzenia do przeglądarki Stworzenie rozszerzenia do przeglądarki Firefox,

Bardziej szczegółowo

TWORZENIE PREZENTACJI MS POWERPOINT

TWORZENIE PREZENTACJI MS POWERPOINT TWORZENIE PREZENTACJI MS POWERPOINT Wstęp TWORZENIE PREZENTACJI MS POWERPOINT Czasami zdarza się, że zostajemy poproszeni o poprowadzenia spotkania czy szkolenia w firmie, w której pracujemy lub po prostu

Bardziej szczegółowo

Księga Logotypu Marki Radom

Księga Logotypu Marki Radom Księga Logotypu Marki Radom spis treści 1. LOGOTYP 1.01 forma podstawowa 1.02 znak graficzny 1.03 forma podstawowa z hasłem 1.04 forma podstawowa z hasłem w języku angielskim i rosyjskim 1.05 formy uzupełniające

Bardziej szczegółowo

Jak projektować dostępne strony

Jak projektować dostępne strony Jak projektować dostępne strony Przemysław Marcinkowski e-mail: przemek@iart.com.pl Plan prezentacji 1. Dlaczego powstał dokument WCAG? 2. Priorytety 3. Tworzenie tekstów 4. Linki 5. Nawigacja 6. Grafika

Bardziej szczegółowo

Andrzej Frydrych SWSPiZ 1/8

Andrzej Frydrych SWSPiZ 1/8 Kilka zasad: Czerwoną strzałką na zrzutach pokazuje w co warto kliknąć lub co zmieniłem oznacza kolejny wybierany element podczas poruszania się po menu Ustawienia strony: Menu PLIK (Rozwinąć żeby było

Bardziej szczegółowo

Czcionki. Rodzina czcionki [font-family]

Czcionki. Rodzina czcionki [font-family] Czcionki W tej lekcji nauczysz się o czcionkach i jak nimi manipulować przy pomocy CSS. Omówimy także pewien problem, gdzie wybrana czcionka jest przedstawiana na stronie tylko gdy jest ona zainstalowana

Bardziej szczegółowo

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css. Kaskadowe arkusze stylów CSS Geneza - oddzielenie struktury dokumentu HTML od reguł prezentacji - poszerzenie samego HTML Korzyści - przejrzystość dokumentów - łatwe zarządzanie stylem (wyglądem) serwisu

Bardziej szczegółowo

ECDL/ICDL Web Editing Moduł S6 Sylabus - wersja 2.0

ECDL/ICDL Web Editing Moduł S6 Sylabus - wersja 2.0 ECDL/ICDL Web Editing Moduł S6 Sylabus - wersja 2.0 Przeznaczenie Sylabusa Dokument ten zawiera szczegółowy Sylabus dla modułu ECDL/ICDL Web Editing. Sylabus opisuje zakres wiedzy i umiejętności, jakie

Bardziej szczegółowo

ZASADY STOSOWANIA ZNAKU, BUDOWANIA CIĄGU ZNAKÓW PROGRAMU OPERACYJNEGO INFRASTRUKTURA I ŚRODOWISKO

ZASADY STOSOWANIA ZNAKU, BUDOWANIA CIĄGU ZNAKÓW PROGRAMU OPERACYJNEGO INFRASTRUKTURA I ŚRODOWISKO ZASADY STOSOWANIA ZNAKU, BUDOWANIA CIĄGU ZNAKÓW ORAZ PROJEKTOWANIA TABLIC I NAKLEJEK W PROMOCJI PROJEKTÓW PROGRAMU OPERACYJNEGO INFRASTRUKTURA I ŚRODOWISKO Pole podstawowe i pole ochronne znaku Pole podstawowe

Bardziej szczegółowo

Tworzenie prezentacji w MS PowerPoint

Tworzenie prezentacji w MS PowerPoint Tworzenie prezentacji w MS PowerPoint Program PowerPoint dostarczany jest w pakiecie Office i daje nam możliwość stworzenia prezentacji oraz uatrakcyjnienia materiału, który chcemy przedstawić. Prezentacje

Bardziej szczegółowo

Aplikacje WWW - laboratorium

Aplikacje WWW - laboratorium Aplikacje WWW - laboratorium HTML + CSS Celem ćwiczenia jest przygotowanie prostej aplikacji internetowej składającej się z zestawu stron w języku HTML. Ćwiczenia można wykonać na dowolnym komputerze,

Bardziej szczegółowo

ERGODESIGN - Podręcznik użytkownika. Wersja 1.0 Warszawa 2010

ERGODESIGN - Podręcznik użytkownika. Wersja 1.0 Warszawa 2010 ERGODESIGN - Podręcznik użytkownika Wersja 1.0 Warszawa 2010 Spis treści Wstęp...3 Organizacja menu nawigacja...3 Górne menu nawigacyjne...3 Lewe menu robocze...4 Przestrzeń robocza...5 Stopka...5 Obsługa

Bardziej szczegółowo

Smacznego.rzeszow.pl. Instrukcja obsługi

Smacznego.rzeszow.pl. Instrukcja obsługi Smacznego.rzeszow.pl Instrukcja obsługi Ostatnia aktualizacja 13.01.2010 13:05 Spis treści 1. Rejestracja... 1 1.1. Rejestracja w portalu... 1 1.2. Zapomniałem hasła... 2 2. Logowanie... 0 2.1. Menu użytkownika...

Bardziej szczegółowo

01. BUDOWA ZNAKU I ROZMIAR MINIMALNY ZNAK LOGOTYP SYGNET. 4 mm / 60px. System identyfikacji wizualnej / Księga znaku

01. BUDOWA ZNAKU I ROZMIAR MINIMALNY ZNAK LOGOTYP SYGNET. 4 mm / 60px. System identyfikacji wizualnej / Księga znaku System identyfikacji identyfikacji wizualnej / Księga znaku wizualnej / Księga znaku 01. BUDOWA ZNAKU I ROZMIAR MINIMALNY ZNAK Znak BPX składa się z sygnetu i części typograficznej - akronimu BPX. Występuje

Bardziej szczegółowo

Praca z tekstem: WORD Listy numerowane, wstawianie grafiki do pliku

Praca z tekstem: WORD Listy numerowane, wstawianie grafiki do pliku Praca z tekstem: WORD Listy numerowane, wstawianie grafiki do pliku W swoim folderze utwórz folder o nazwie 29_10_2009, wszystkie dzisiejsze zadania wykonuj w tym folderze. Na dzisiejszych zajęciach nauczymy

Bardziej szczegółowo

W logotypie to zestawienie występuje zawsze razem, ale dopuszcza się wykorzystanie symbolu jako samodzielnego ozdobnika w materiałach reklamowych.

W logotypie to zestawienie występuje zawsze razem, ale dopuszcza się wykorzystanie symbolu jako samodzielnego ozdobnika w materiałach reklamowych. księga znaku KONSTRUKCJA SYMBOLU Symbolem logotypu jest biała strzałka odchylona od poziomu pod kątek 45 stopni. Strzałka znajduje się na niebieskim polu. Symbol stanowi literę O i jest wpleciony w nazwę

Bardziej szczegółowo

mgr Elżbieta Galant-Zielonka

mgr Elżbieta Galant-Zielonka Szkoła Podstawowa Nr 12 w Tczewie PRZYGOTOWANIE SZABLONU DYPLOMU W PROGRAMIE MICROSOFT WORD Z WYKORZYSTANIEM KORESPONDENCJI SERYJNEJ mgr Elżbieta Galant-Zielonka Tczew 2003 Wstęp Nowoczesny nauczyciel,

Bardziej szczegółowo

Logo wersja podstawowa logotyp i godło

Logo wersja podstawowa logotyp i godło Logo wersja podstawowa logotyp i godło Logo PARP Logo zawierające godło i akronim (skrót PARP) jest stosowane w większości sytuacji. W szczególności we wszystkich dokumentach obcojęzycznych. Logo zawierające

Bardziej szczegółowo

[Wersja: styczeń 2007 DRUK] Informacja Turystyczna Katalog identyfikacji wizualnej Część A. Standaryzacja

[Wersja: styczeń 2007 DRUK] Informacja Turystyczna Katalog identyfikacji wizualnej Część A. Standaryzacja [Wersja: styczeń 2007 DRUK] Informacja Turystyczna Katalog identyfikacji wizualnej Część A. Standaryzacja A.1 Informacja turystyczna. Standaryzacja logo Forma podstawowa Logo Śląskiego Systemu Informacji

Bardziej szczegółowo

URL: http://www.ecdl.pl

URL: http://www.ecdl.pl Syllabus WEBSTARTER wersja 1.0 Polskie Towarzystwo Informatyczne 2007 Copyright wersji angielskiej: Copyright wersji polskiej: The European Computer Driving Licence Foundation Ltd. Polskie Towarzystwo

Bardziej szczegółowo

Ćwiczenie 4 Konspekt numerowany

Ćwiczenie 4 Konspekt numerowany Ćwiczenie 4 Konspekt numerowany Celem ćwiczenia jest zastosowane automatycznej, wielopoziomowej numeracji nagłówków w wielostronicowym dokumencie. Warunkiem poprawnego wykonania tego ćwiczenia jest właściwe

Bardziej szczegółowo

Usługa Utilitia Korzystanie z Internetu przez Osoby Niepełnosprawne. Piotr Witek Utilitia.pl Kraków, 16 Lipca 2013 r.

Usługa Utilitia Korzystanie z Internetu przez Osoby Niepełnosprawne. Piotr Witek Utilitia.pl Kraków, 16 Lipca 2013 r. Usługa Utilitia Korzystanie z Internetu przez Osoby Niepełnosprawne Piotr Witek Utilitia.pl Kraków, 16 Lipca 2013 r. 1 Dostępność Informacji Dostępność informacji oznacza możliwość korzystania z treści

Bardziej szczegółowo

Edytor tekstu OpenOffice Writer Podstawy

Edytor tekstu OpenOffice Writer Podstawy Edytor tekstu OpenOffice Writer Podstawy Cz. 3. Rysunki w dokumencie Obiekt Fontwork Jeżeli chcemy zamieścić w naszym dokumencie jakiś efektowny napis, na przykład tytuł czy hasło promocyjne, możemy w

Bardziej szczegółowo