Podsumowanie pracy z 22.11

Joanna [email protected]


Podsumowanie pracy z 22.11 Portale – onet.pl; o2.pl Portale tematyczne – men.gov.pl, cogito.pl

Aktualność Strona główna – zachęcająca Przejrzyste menu = spis treści Ciekawa grafika – zoptymalizowana Kolorystyka strony Elementy przyciągające uwagę Stałe rubryki

przyzwyczajenie druga natura człowieka łatwość dostępu do informacji

Podstrony otwierane w nowym oknie

Opracowywanie materiałów

multimedialnych

Tworzenie stron www 3

Na podstawie wykładu dr. L. Rudaka

Joanna Brzozowska


Przebieg zajęć

Monitor komputera – ciekawostki Kolory Prezentacja Kompozycja Kolorystyka Projektowanie Layout Podsumowanie Modułu E2

Ankieta dla rodziców / uczniów Praca domowa


Monitor komputera

urządzenie rastrowe

wszystkie prezentowane na nim obiekty są opisane w postaci zbioru punktów (pikseli), mających określone położenie i barwę.


Percepcja bezpośredniaNa monitor światło zawsze pada z góry

(kilogramy w TV)


Postrzeganie konturów


Kolejność czytania

Ten tekst będzie przeczytany jako pierwszy

Teg

o t

eks

tu n

ikt

nie

prz

ecz

yta

To zostanie przeczytane ale później


Kontekst postrzegania


Ograniczenia ekranu


Model barw

system wartości liczbowych, za pomocą których definiowane są barwy złożone z określonych kolorów podstawowych


CMY K

"trójkolorowy" model barw: niebieskozielonej (Cyan) purpurowej (Magenta) żółtej (Yellow) czarneJ (blacK)

Barwy dopełniają się


RGB

model operujący trzema barwami podstawowymi: czerwoną (Red) zieloną (Green) niebieską (Blue)

Kolory są mieszane

addytywnie (sumowane) Od 0 do 256 0 – czarny, 256 – biały


Kolory Niebieski: święty kolor w judaizmie, kolor

nieśmiertelności w Chinach, Bliski Wschód –

ochrona, Kolumbia – mydło, cały świat – kolor

„bezpieczeństwa”


Kolory Żółty: na Zachodzie oznacza radość i szczęście,

kolor święty i cesarski w wielu krajach Azji


Kolory Czerwony: w kulturze zachodniej „niebezpieczeństwo”

i „stop”, a także miłość (Walentynki i Boże Narodzenie);

Indie – kolor sukni ślubnej, bo oznacza czystość;

w Chinach oznacza świętowanie i powodzenie;

z białym w kulturach wschodnich radość.


Kolory

Zielony: kolor islamu; we Francji ogólnie

źle się kojarzy; w Chinach kolor kapelusza

oznaczający niewierną żonę


Kolory

Pomarańczowy


Kolory

Czarny: kultury zachodu – żałoba, śmierć,

ale także elegancja, styl.


Kolory

Biały: kultura zachodu – czystość; kultury

wschodu – żałoba, symbol śmierci;


Kolory

Czarny: kultury zachodu – żałoba, śmierć,

ale także elegancja, styl.


Kolory – podświadomość

Czerwień – fizyczność Błękit – intelekt Żółć – emocje Zieleń – natura Fiolet – duchowość Pomarańcz – zabawa Biel – czystość Róż – kobiecość Szara – tłumienie Czerń – powaga Brąz – rzetelność


Kolor – odcienie


Kolory – kontrast


Kolory – wielkość


Kolorystyka


Dopasowanie – temat


Dopasowanie – odbiorca


Dopasowanie – gust


Dopasowanie – …


Ćwiczenie 1 Ściągnij 4 zdjęcia (po jednym z każdej ze stron):

http://staw.bieleccy.com.pl/str_gl.html - zdjęcie ważki http://www.fotoplatforma.pl/pl/cd/Zwierzetadomowe/?f

oto=1985 - dowolne zdjęcie

http://www.krajobrazy.pl/galeria.php?kat=33 - zimowy krajobraz

http://rheme.net/desktops/ - dowolny obrazCzy zawsze Ci się udało?Spróbuj wymyślić sposób na ściągnięcie zdjęć. Przygotuj collage z zebranych materiałów (program Paint), który

wyrazi twoje uczucia w tej chwili ;)

Zadanie *: Ściągnij ze strony http://www.zabawki-sklep.com/ - chłopca z sankami i bałwankiem


Wyodrębnianie całościUkład wyjściowy – nic nie jest wyodrębnione


Wyodrębnianie całościBliskość przestrzenna


Wyodrębnianie całościPodobieństwo


Wyodrębnianie całościDobra kontynuacja


Wyodrębnianie całościNiewielkie rozmiary


Wyodrębnianie całościZgodność z chwilowym nastawieniem


Wyodrębnianie całości


Wyodrębnianie całościW obrazie czarno-białym mamy tendencję do

szukania figury w obszarze czarnym.Wyszukiwanie w obszarze białym jest trudniejsze


Złudzenia


Przerwa


Forma treści

Dziel treść na najmniejsze jednostki logiczne.

Podział sprzyja strukturze

hipertekstu.

Lepiej pasuje do ekranu komputera

Ułatwia zachowanie jednolitej

struktury


Siedem plus minus dwa zero – to doskonałość. Coś, czego nie ma.

jeden – to jeden, skupia uwagę, której nie trzeba dzielić i zapewnia pełną koncentrację na najważniejszej sprawie.

dwa – to pierwsze rozróżnienie. Albo – albo. Sposób na wyrażenie doskonałej różnorodności (bez środkowego, nieokreślonego stanu).

trzy – to najprostsza złożoność. Już wiele ale to dopiero

pierwszy etap stopniowania.


Siedem plus minus dwa cztery – to kwadrat. Najprostsza macierz pozwalająca na

stopniowanie w dwóch wymiarach. Albo po prostu dwie pary.

pięć – to już wiele. Ale jeszcze tyle ile możemy ogarnąć jednym rzutem oka. I policzyć "bez liczenia" - po prostu widząc dwie, trzy, cztery lub pięć rzeczy wiemy od razu ile ich jest.

sześć – to o jeden więcej niż pięć. I na ogół o jeden za dużo.


Siedem plus minus dwa

siedem – to wiele. Za wiele, aby efektywnie posługiwać się takim zbiorem elementów. Siedem można podzielić na dwa...


Brzytwa OKHAMANon sunt multiplicanda entia sine necessitate

Czyli: nie należy mnożyć bytów ponad potrzebę

W praktyce zasadę tę stosujemy jako:

Proste rozwiązanie jest najlepsze


Inne brzytwyReguła DRY

Don't Repeat Yourself

czyli: nie powtarzaj sięReguła KISS

Keep It Simple, Stupid

czyli: to ma być proste, głupczeReguła BUZI (studenci)

Bez udziwnień zapisuj, i…


Teksty

Prawdziwe krasomówstwo polega na tym aby powiedzieć wszystko, co konieczne – i rzeczywiście powiedzieć tylko to, co

konieczne.

Francois de La Rochefoucauld (pisarz i filozof XVII w.)


Różnice druk – monitor Druk:

rozdzielczość 1200 – 1400 punktów na cal kolory CMYK (niebieskozielony, karmazyn, żółty,

czarny) jasność zależy od papieru i oświetlenia

Monitor: rozdzielczość 72 – 96 punktów na cal kolory RGB (czerwony, zielony, niebieski) jasność regulowana


Długie teksty

Nie mieści się na dwóch stronach A4: pismo 12 pt marginesy 2,5 cm z każdej strony Interlinia 1,5

Czyli ok. 700 słów lub 6000 znaków


Kompozycja

Kompozycja to kształtowanie obrazu poprzez odpowiedni układ jego elementów.

Takie rozmieszczenie poszczególnych elementów w dziele, dzięki któremu osiąga się harmonię i równowagę.

według: Stan Smith, The Complete Drawing Course, Collins & Brown Limited 1994 rysunki na następnych planszach także pochodzą z tej

książki


„Zasada sztuki”: kompozycja polegająca na umieszczeniu głównego tematu w centrum przestrzeni obrazu jest statyczna i nudna.

Tutaj najważniejszy element, spiętrzenie owoców, znajduje się w jednej trzeciej wysokości obrazu.

Położenie


Przestrzeń obrazu jest podzielona na 3 części w poziomie i 3 części w pionie. Obiekty umieszczone na przecięciach linii podziału szczególnie silnie przyciągają wzrok widza.

Podział


Postać z prawej jest na pierwszym planie i powinna dominować, ale dzięki perspektywie tylko poręcz jest równoległa do krawędzi obrazu. Zatem oko prowadzone jest po łuku od postaci dominującej przez środek aż do partii najdalszych.

Asymetria


Rysunek wart tysiąca słów

przysłowie chińskie


Co zrobić gdy trzeba, z powodów dydaktycznych zilustrować coś, a nie możemy skorzystać z pomocy profesjonalnego grafika?

Trzeba stworzyć ilustrację samemu!

W edukacji ważne są schematy – bo i tak przekazywanie wiedzy opiera się na pewnej, niepisanej umowie między uczniem a nauczycielem.

Schematyczny rysunek można utworzyć stosunkowo łatwo, korzystając z ogólnie dostępnych „dobrych rad”.

Schemat


Szkoła rysowania i malowania,

praca zbiorowa, Delta.

Schemat

Koń jaki jest...


Schemat


Z książki Ołówek opowiada, Pal Kocmaros, Corvina, Budapeszt, 1968

Schemat


Ćwiczenie 3

Narysuj konia w programie graficznym Paint na komputerze.

Swój rysunek zapisz po kolei: z rozszerzeniem bmp z rozszerzeniem jpg z rozszerzeniem gif

Jakie komunikaty pojawiają się na ekranie? Jaka jest różnica między obrazkami? Jaką ma wielkość każdy obrazek?


Animacja


Dźwięk Fala akustyczna: zachodzące z odpowiednią

częstością zmiany ciśnienia w ośrodku, na które reaguje organ słuchu.

Jednostki: częstotliwość (Hz); natężenie dźwięku (Bell) Decybel: 0,1 Bella, oznaczenie dB; poziom głośności (fon, 1 fon jest to poziom

głośności dźwięku słyszanego tak jak dźwięk o częstotliwości 1kHz i poziomie natężenia 1dB).

http://apin.bg.pwr.wroc.pl/download/rozszerzenia.htm


Projektowanie Pozycjonowanie elementów na stronie ma

istotny wpływ na efekt wizualny i skuteczność przekazywania informacji czytelnikowi / widzowi

Layout


Layout

przejrzysta forma czytelny tekst intuicyjna obsługa szybkie załadowanie łatwość wprowadzania zmian


Ćwiczenie 3

Otwórz dokument lista.rtf

Spróbuj dodać nowego uczestnika kursu, który nazywa się Leonard Cudotwórca, jest zatrudniony w Szkole Podstawowej nr 5 w Pruszkowie, przy ul. Żart 13.


Przejrzystość formy

wyeksponowanie logo firmy w widocznym miejscu slogan identyfikujący

firmę wyróżnienie tytułów i nagłówków rezygnacja z elementów odwracających

uwagę od treści


Czytelność tekstu

krój i rozmiar czcionki kontrastowy kolor tekstu w stosunku do tła

publikacji jednolite tło linie tekstu nie powinny być zbyt długie


Intuicyjna obsługa

kluczowy element strony internetowej przemyślana nawigacja skomponowana

z szatą graficzną


Szybkość załadowania

zoptymalizowana grafika dobranie odpowiedniej ilości kolorów,

wielkość oraz formatu formaty graficzne do zastosowań

internetowych: JPG, PNG, GIF


Łatwość wprowadzania zmian

dobrze zaprojektowana wewnętrzna struktura strony internetowej

dobra praktyka = rozdzielenie warstwy treści umieszczaną w HTML od warstwy prezentacji, którą umieszczamy w oddzielnym pliku CSS

wydzielenie ze strony nagłówka i / lub stopki oraz środka do osobnych plików


Praca domowa Moduł E2

Ankieta Pytania do ankiety

... ... ... ... ... ...

Podsumowanie pracy z 22.11

Documents

Transcript of Podsumowanie pracy z 22.11