Joanna Brzozowska doradcazawodowy@onet.eu

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 Joanna Brzozowska doradcazawodowy@onet.eu

Joanna Brzozowska doradcazawodowy@onet.eu

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 Joanna Brzozowska doradcazawodowy@onet.eu

Joanna Brzozowska doradcazawodowy@onet.eu

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ę. Joanna Brzozowska doradcazawodowy@onet.eu

Percepcja bezpośrednia Na monitor światło zawsze pada z góry (kilogramy w TV) Joanna Brzozowska doradcazawodowy@onet.eu

Postrzeganie konturów Joanna Brzozowska doradcazawodowy@onet.eu

Kolejność czytania Ten tekst będzie przeczytany jako pierwszy Tego tekstu nikt nie przeczyta To zostanie przeczytane ale później Joanna Brzozowska doradcazawodowy@onet.eu

Kontekst postrzegania Joanna Brzozowska doradcazawodowy@onet.eu

Ograniczenia ekranu Joanna Brzozowska doradcazawodowy@onet.eu

Joanna Brzozowska doradcazawodowy@onet.eu

Model barw system wartości liczbowych, za pomocą których definiowane są barwy złożone z określonych kolorów podstawowych Joanna Brzozowska doradcazawodowy@onet.eu

CMY K "trójkolorowy" model barw: Barwy dopełniają się niebieskozielonej (Cyan) purpurowej (Magenta) żółtej (Yellow) czarneJ (blacK) Barwy dopełniają się Joanna Brzozowska doradcazawodowy@onet.eu

RGB model operujący trzema barwami podstawowymi: Kolory są mieszane czerwoną (Red) zieloną (Green) niebieską (Blue) Kolory są mieszane addytywnie (sumowane) Od 0 do 256 0 – czarny, 256 – biały Joanna Brzozowska doradcazawodowy@onet.eu

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” Joanna Brzozowska doradcazawodowy@onet.eu

Kolory Żółty: na Zachodzie oznacza radość i szczęście, kolor święty i cesarski w wielu krajach Azji Joanna Brzozowska doradcazawodowy@onet.eu

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ść. Joanna Brzozowska doradcazawodowy@onet.eu

Kolory Zielony: kolor islamu; we Francji ogólnie źle się kojarzy; w Chinach kolor kapelusza oznaczający niewierną żonę Joanna Brzozowska doradcazawodowy@onet.eu

Kolory Pomarańczowy Joanna Brzozowska doradcazawodowy@onet.eu

Kolory Czarny: kultury zachodu – żałoba, śmierć, ale także elegancja, styl. Joanna Brzozowska doradcazawodowy@onet.eu

Kolory Biały: kultura zachodu – czystość; kultury wschodu – żałoba, symbol śmierci; Joanna Brzozowska doradcazawodowy@onet.eu

Kolory Czarny: kultury zachodu – żałoba, śmierć, ale także elegancja, styl. Joanna Brzozowska doradcazawodowy@onet.eu

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ść Joanna Brzozowska doradcazawodowy@onet.eu

Kolor – odcienie Joanna Brzozowska doradcazawodowy@onet.eu

Kolory – kontrast Joanna Brzozowska doradcazawodowy@onet.eu

Kolory – wielkość Joanna Brzozowska doradcazawodowy@onet.eu

Joanna Brzozowska doradcazawodowy@onet.eu

Kolorystyka Joanna Brzozowska doradcazawodowy@onet.eu

Dopasowanie – temat Joanna Brzozowska doradcazawodowy@onet.eu

Dopasowanie – odbiorca Joanna Brzozowska doradcazawodowy@onet.eu

Dopasowanie – gust Joanna Brzozowska doradcazawodowy@onet.eu

Dopasowanie – … Joanna Brzozowska doradcazawodowy@onet.eu

Ć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/?foto=1985 - dowolne zdjęcie http://www.krajobrazy.pl/galeria.php?kat=33 - zimowy krajobraz http://rheme.net/desktops/ - dowolny obraz Czy 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 Joanna Brzozowska doradcazawodowy@onet.eu

Joanna Brzozowska doradcazawodowy@onet.eu

Wyodrębnianie całości Układ wyjściowy – nic nie jest wyodrębnione Joanna Brzozowska doradcazawodowy@onet.eu

Wyodrębnianie całości Bliskość przestrzenna Joanna Brzozowska doradcazawodowy@onet.eu

Wyodrębnianie całości Podobieństwo Joanna Brzozowska doradcazawodowy@onet.eu

Wyodrębnianie całości Dobra kontynuacja Joanna Brzozowska doradcazawodowy@onet.eu

Wyodrębnianie całości Niewielkie rozmiary Joanna Brzozowska doradcazawodowy@onet.eu

Wyodrębnianie całości Zgodność z chwilowym nastawieniem Joanna Brzozowska doradcazawodowy@onet.eu

Wyodrębnianie całości Joanna Brzozowska doradcazawodowy@onet.eu

Wyodrębnianie całości W obrazie czarno-białym mamy tendencję do szukania figury w obszarze czarnym. Wyszukiwanie w obszarze białym jest trudniejsze Joanna Brzozowska doradcazawodowy@onet.eu

Złudzenia Joanna Brzozowska doradcazawodowy@onet.eu

Złudzenia Joanna Brzozowska doradcazawodowy@onet.eu

Joanna Brzozowska doradcazawodowy@onet.eu

Joanna Brzozowska doradcazawodowy@onet.eu

Przerwa Joanna Brzozowska doradcazawodowy@onet.eu

Joanna Brzozowska doradcazawodowy@onet.eu

Dziel treść na najmniejsze jednostki logiczne. Forma treści Dziel treść na najmniejsze jednostki logiczne. Podział sprzyja strukturze hipertekstu. Lepiej pasuje do ekranu komputera Ułatwia zachowanie jednolitej struktury Joanna Brzozowska doradcazawodowy@onet.eu

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. Joanna Brzozowska doradcazawodowy@onet.eu

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. Joanna Brzozowska doradcazawodowy@onet.eu

Siedem plus minus dwa siedem – to wiele. Za wiele, aby efektywnie posługiwać się takim zbiorem elementów. Siedem można podzielić na dwa... Joanna Brzozowska doradcazawodowy@onet.eu

Proste rozwiązanie jest najlepsze Brzytwa OKHAMA Non 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 Joanna Brzozowska doradcazawodowy@onet.eu

Inne brzytwy Reguła DRY Don't Repeat Yourself czyli: nie powtarzaj się Reguła KISS Keep It Simple, Stupid czyli: to ma być proste, głupcze Reguła BUZI (studenci) Bez udziwnień zapisuj, i… Joanna Brzozowska doradcazawodowy@onet.eu

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.) Joanna Brzozowska doradcazawodowy@onet.eu

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 Joanna Brzozowska doradcazawodowy@onet.eu

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 Joanna Brzozowska doradcazawodowy@onet.eu

Joanna Brzozowska doradcazawodowy@onet.eu

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 Joanna Brzozowska doradcazawodowy@onet.eu 61

Położenie „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. Joanna Brzozowska doradcazawodowy@onet.eu 62

Podział 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. Joanna Brzozowska doradcazawodowy@onet.eu 63

Asymetria 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. Joanna Brzozowska doradcazawodowy@onet.eu 64

Rysunek wart tysiąca słów przysłowie chińskie Joanna Brzozowska doradcazawodowy@onet.eu

Schemat Trzeba stworzyć ilustrację samemu! 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”. Joanna Brzozowska doradcazawodowy@onet.eu 66

Schemat Koń jaki jest... Szkoła rysowania i malowania, praca zbiorowa, Delta. Joanna Brzozowska doradcazawodowy@onet.eu 67

Schemat Joanna Brzozowska doradcazawodowy@onet.eu 68

Z książki Ołówek opowiada, Pal Kocmaros, Corvina, Budapeszt, 1968 Schemat Z książki Ołówek opowiada, Pal Kocmaros, Corvina, Budapeszt, 1968 Joanna Brzozowska doradcazawodowy@onet.eu 69

Ć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? Joanna Brzozowska doradcazawodowy@onet.eu

Animacja Joanna Brzozowska doradcazawodowy@onet.eu

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 Joanna Brzozowska doradcazawodowy@onet.eu

Joanna Brzozowska doradcazawodowy@onet.eu

Projektowanie Pozycjonowanie elementów na stronie ma istotny wpływ na efekt wizualny i skuteczność przekazywania informacji czytelnikowi / widzowi Layout Pozycjonowanie elementów na stronie ma istotny wpływ na efekt wizualny i skuteczność przekazywania informacji czytelnikowi/widzowi Joanna Brzozowska doradcazawodowy@onet.eu

Layout przejrzysta forma czytelny tekst intuicyjna obsługa szybkie załadowanie łatwość wprowadzania zmian Pozycjonowanie elementów na stronie ma istotny wpływ na efekt wizualny i skuteczność przekazywania informacji czytelnikowi/widzowi Joanna Brzozowska doradcazawodowy@onet.eu

Ć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. Joanna Brzozowska doradcazawodowy@onet.eu

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 Joanna Brzozowska doradcazawodowy@onet.eu

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 Joanna Brzozowska doradcazawodowy@onet.eu

Intuicyjna obsługa kluczowy element strony internetowej przemyślana nawigacja skomponowana z szatą graficzną Joanna Brzozowska doradcazawodowy@onet.eu

Szybkość załadowania zoptymalizowana grafika dobranie odpowiedniej ilości kolorów, wielkość oraz formatu formaty graficzne do zastosowań internetowych: JPG, PNG, GIF Joanna Brzozowska doradcazawodowy@onet.eu

Ł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 Joanna Brzozowska doradcazawodowy@onet.eu

Praca domowa Moduł E2 Ankieta Pytania do ankiety ... Joanna Brzozowska doradcazawodowy@onet.eu