Podręcznik użytkownika

Transkrypt

1 Podręcznik użytkownika (administracja systemem redakcyjnym) Implementacja dla: 1

2 Dokumentacja techniczna systemu, instrukcja obsługi oraz pomoc techniczna dotycząca systemu dostępne są on-line, pod adresami: Wsparcie techniczne / telefonicznie oraz via Kontakt telefoniczny z Działem Technologicznym Visual Media, możliwy jest w każdy dzień roboczy od godz. 9:30 do 17:00 tel wew. 27, 2

3 Spis treści 1. Dostęp do panelu administracyjnego Podstawowe funkcje panelu administracyjnego Menu główne Menu kontekstowe (toolbar) Lista pozycji Artykuły - edycja treści stron 4. Kategorie artykułów Menu Media Moduły strony Użytkownicy Akcje FAQ - rozwijane listy Filmy Galerie Aktualności i Centrum prasowe Logo partnerów Publikacje Newsletter Płatności Sprawozdania i raporty Manager bannerów Definicje klas edytora Wymiary serwisu Odblokowywanie treści (dostęp tylko dla konta typu Super Administrator) Format, rozdzielczość, rozmiar oraz waga grafiki na potrzeby stron 1. Format Rozdzielczość Rozmiar Wielkość Optymalizacja grafiki za pomocą darmowego programu GIMP

4 1. Dostęp do panelu administracyjnego. Dostęp do panelu administracyjnego znajduje się pod adresem: 4

5 2. Podstawowe funkcje panelu administracyjnego 1. Menu główne Wszystkie funkcje systemu CMS dostępne są z poziomu głównego menu. 2. Menu kontekstowe (toolbar) Z każdą funkcją/składnikiem aplikacji związane jest menu kontekstowe, pozwalające na wykonanie operacji związanych konkretnie z daną częścią systemu. Pojawia się ono w prawej górnej części okna w postaci graficznych ikon. Ponad ikonami znajduje się dodatkowo klawisz umożliwiający wylogowanie z systemu. 5

6 3. Lista pozycji Wywołując kolejne składniki systemu (np. artykuły, komponenty, moduły) na ekranie prezentowana jest lista elementów danego typu znajdujących się w systemie. Bez względu na rodzaj, pozycji lista zawiera pewne elementy wspólne. Na górze listy znajduje się formularz umożliwiający ograniczenie listy elementów (filtr). 6

7 3. Artykuły - edycja treści stron WWW W systemie CMS poszczególne strony serwisu internetowego - nazywają się artykułami. Aby przejść do listy artykułów należy kliknąć na ikonę Artykuły w menu głównym. Artykuły dzielone są na sekcje odpowiadające odpowiednim częścią strony (serwis, sklep). W ramach każdej sekcji artykuły dzielą się na kategorie odzwierciedlające działy serwisu. Aby ograniczyć ilość wyświetlanych artykułów na stronie, w prawym górnym rogu można ustawić filtr powodujący zawężenie liczby artykułów. 7

8 W celu edycji artykułu, należy wybrać interesującą nas pozycję z listy i kliknąć na nią. Po kliknięciu otworzy się ekran umożliwiający edycję parametrów strony. Jego główną część stanowi okno tekstowe z edytorem WYSWIG umożliwiającym edycję treści strony WWW. Opis pól do wypełnienia: Tytuł nawa artykułu Alias tekst zastępczy wypełniany automatycznie Opublikowane artykuł będzie widoczny w serwisie Strona startowa pole nieużywane Sekcja wybór sekcji, do wyboru serwis lub sklep Kategoria wybór kategorii 8

9 Okno edytora posiada menu, za pomocą którego można określać podstawowe właściwości wprowadzanego tekstu. Opis każdej ikony edytora można uzyskać przytrzymując nad nią kursor. Ikony edytora można pogrupować ze względu na funkcję, jaką spełniają. Górne ikony służą do formatowania tekstu. Ikony poniżej służą do wstawiania i formatowania tabel. W dolnej części znajdują się ikony do wstawiania i edytowania multimediów. Aby wstawić zdjęcie do treści artykułu należy kliknąć na ikonę (oznaczoną poniżej). 9

10 Następnie otworzy się okno Okno edytora obrazów jest podzielone na trzy części: 1. W tej części można, np. ustawić położenie zdjęcia w artykule, względem tekstu wybierając opcje z listy Wyrównanie, a także jaki ma być odstęp zdjęcia od tekstu (Margines). Po prawej stronie zlokalizowany jest podgląd opcji, która została wybrana. 2. Tutaj zlokalizowany jest manager plików jznajdujących się na serwerze. 3. W tej części - ikony w prawym górnym rogu służą do: zmiany widoku plików (lista, miniatury), utworzenie nowego folderu, upload pliku na serwer z lokalnego dysku, pomoc. Pod ikonami wyświetlają się szczegóły aktualnie wybranego zdjęcia. Ikony po prawej dają możliwość np.: zmianę nazwy pliku, zmianę wielkości pliku, utworzenie miniatury zdjęcia. 10

11 Podczas uploadu pliku na serwer, edytor daje możliwość dokonanie szeregu zmian (na zdjęciu): zmiana rozmiaru, rotację zdjęcia, utworzenie miniatury zdjęcia. Chcąc umieścić inny typ pliku, niż zdjęcie (pdf, doc) - należy kliknąć na ikonę (oznaczoną poniżej). Procedura postępowania jest analogiczna, jak w przypadku plików graficznych. 11

12 4. Kategorie artykułów Kategorie artykułów służą do grupowania treści, które znajdują się w serwisie. Przy dużej ilości artykułów jest to funkcja bardzo praktyczna i często stosowana przez użytkowników. 5. Menu Jest to jeden z ważniejszych komponentów znajdujący się w panelu administracyjnym. W tym miejscu jest zdefiniowana struktura strony. 12

13 Chcąc dodać nową pozycję np. w Serwis Menu Stopka należy kliknąć najpierw na ikonę w kolumnie Pozycje Menu (ikona poniżej). a następnie Utwórz Do dyspozycji są cztery rodzaje linków: 13

14 1. Łącze wewnętrzne Pozycja menu może wskazywać na dowolny komponent, jaki znajduje się na liście. Po kliknięciu w nazwę komponentu wyświetlą się dostępne widoki. Chcąc wyświetlić np. Publikacje na stronie, należy kliknąć na Publikacje. 14

15 Do wyboru są dwa widoki: Publications standardowy widok publikacji Publicationslist widok publikacji z podziałem na podkategorie Po kliknięciu, np. w Publications Default układ graficzny, który się znajduje pod Publications należy wypełnić pola: Tytuł nazwa nowej pozycji menu Tekst zastępczy pole wypełniane automatycznie Z prawej strony w polu Parametry: podstawowe należy z listy rozwijanej wybrać Kategorie publikacji Klikając na Parametry: komponentu można zmienić ilość publikacji na stronie. Domyślnie jest wpisane 6. Pola dotyczące ścieżek do plików są już zdefiniowane i nie należy nic wpisywać. Na koniec należy kliknąć w Zapisz lub Zastosuj. Aby utworzyć link do nowego artykułu należy najpierw przejść do komponentu artykuły i dodać nowy artykuł, następnie wróć do komponentu menu i dodając nową pozycję w menu, kliknąć na Artykuły Artykuł 15

16 W dalszej kolejności należy wybrać, jaki to ma być artykuł klikając na Wybierz Po wyborze artykułu, należy jeszcze wpisać nazwę pozycji menu w pole Tytuł oraz zapisać. 1. Łącze zewnętrzne Tutaj można zdefiniować pozycję menu kierującą na zewnątrz serwisu. Link zewnętrzny należy wpisać w pole Łącze. 16

17 2. Separator Jest to nieklikalna pozycja menu. Jest ona użyta w serwisie w zakładce Szkoły i Uczelnie. Pozwala podzielić jedno menu na kilka części. 3. Alias Pozycja ta pozwala zdefiniować link do już istniejącej pozycji menu 17

18 Każda pozycja w menu musi na coś wskazywać (akrtykuł, komponent, itp.). Aby zobaczyć, na co wskazują już istniejące pozycję menu, np. z menu górnego serwisu - należy kliknąć ikonę w kolumnie Pozycje menu - na wysokości Serwis Menu Górne. Kolumna Nazwa informuje, do jakiego miejsca odnosi się dana pozycji menu, np. pozycja Misja wskazuje na artykuł. Aby zobaczyć, na który artykuł wskazuje pozycja Misja należy kliknąć na nazwę pozycji. Po przejściu do edycji elementu informacja ta znajduje się po prawej stronie okna. Pozycja Akcje natomiast wskazuje na komponent Akcje. Aby wyłączyć publikacje danej pozycji z menu, należy kliknąć na ikonę w kolumnie Opublikowane. Kolumna Porządek służy do zmiany kolejności wyświetlania pozycji menu. 18

19 6. Media Biblioteka mediów jest narzędziem pozwalającym na zbiorcze zarządzanie plikami publikowanymi w serwie WWW. Za jego pomocą można przeglądać, dodawać i usuwać pliki. 19

20 7. Moduły strony Moduły są to elementy w serwisie takie jak: menu banery reklamowe skrótowe informacje o aktualnościach i akcjach na stronie głównej okna od newslettera okno wyszukiwarki lista logotypów partnerów ze strony głównej, itp. Po przejściu do zarządzania modułami, prezentowana jest lista dostępnych modułów z informacją, jakiego typu jest dany moduł i jakie jest jego położenie na stronie. Po wybraniu odpowiedniego modułu otwiera się okno z parametrami. Po lewej stronie znajduje się list pól do wypełnienia, które są standardowe dla każdego modułu. Po prawej stronie znajduje się lista parametrów charakterystycznych dla danego typu modułu. Po lewej stronie na dole, lista stron serwisu z zaznaczonymi pozycjami, na których dany moduł ma się wyświetlać. Aby dodać moduł do nowej podstrony wystarczy trzymając wciśnięty klawisz CTRL zaznaczyć kolejną stronę na liście i nacisnąć klawisz Zapisz w prawym górnym menu strony. 20

21 8. Użytkownicy W tym komponencie zebrane są wszystkie informację na temat aktywności użytkowników w serwisie, którzy: posiadają konto zapisali się do newslettera dokonali darowizny on-line wydrukowali przekaz pocztowy Klikając na znak plus po lewej stronie Każdy administrator może indywidualnie wybrać, które kolumny mają być widoczne i będą eksportowane. Aby zamknąć powyższe okno bez zapisywania należy kliknąć na znak minus. Kolumna Newsletter posiada przycisk, dzięki któremu można ręcznie wyłączyć lub włączyć akceptację newslettera. Jest on aktywny tylko dla użytkowników, którzy posiadają adres oraz znajduje się on w tablicy newsletter w bazie. Jeżeli kolumna grupa newslettera jest pusta to oznacza że adres danego użytkownika nie znajduje się w tablicy newsletter. Komponent ten posiada zaawansowany filtr do zarządzania danymi. 21

22 Pole zakres w górnej części filtru służy do ustawienia zakresu wspólnego dla zakupów i płatności (on-line, druk przekazu pocztowego). Istnieje również możliwość sortowania danych po każdej kolumnie (oprócz kolumn o nazwach Dane użytkownika oraz Dane do faktury). Aby wyeksportować dane należy kliknąć na ikonę Export do csv, która znajduje się w prawym górnym rogu. Klikając w adres użytkownika lub w nazwę (jeżeli nie ma adresu) otwiera się widok, w którym pokazane są szczegółowe dane na temat użytkownika (lista zakupów, lista płatności). 22

23 9. Akcje Komponent Akcje zawiera dwie zakładki: Akcje - lista wszystkich akcji zamieszonych w serwisie Kategorie - ponieważ akcje występują w różnych miejscach, w serwisie zostały podzielone na kategorie Opis pól jakie należy wypełnić podczas dodawania nowej akcji. Tytuł Tekst zastępczy nazwa akcji jest to ciąg znaków używany do budowy przyjaznych linków, pole wypełniane automatycznie, możliwa ręczna zmiana wartości pola Kod akcji oznaczenie numeryczne akcji Kategoria kategoria, w jakiej ma się wyświetlić akcja (lista wyboru) Galeria galeria jaka ma się wyświetlić pod opisem akcji (lista wyboru) Opublikowane czy dana akcja ma być widoczna w serwisie W darowiznach czy dana akcja ma być dostępna w darowiznach Aktywna pole informujące czy dana akcja jest przeniesiona do archiwum Czy formularz czy pod akcją ma się wyświetlić formularz zgłoszeniowy (dotyczy tylko akcji w szkole) Zebrana wartość liczba wyświetlana we flashu Nagłówek do zebranych tekst wyświetlany we flashu Zebrana jednostka jednostka wyświetlana we flashu, po polu Zebrana wartość (lista wyboru) Procent (zebrane) procentowa wartość informująca o ilości zebranych środków w ramach akcji (flash) Opcje wsparcia jaki typ wsparcia ma być w akcji (lista wyboru) Publikacje wybór publikacji, które mogą pojawić się z zakładce Publikacje pod opisem akcji (lista wyboru) Numer konta numer konta - drukowany na formularzu wpłaty w darowiznach Link do filmu z Youtube Grafiki film z serwisu YouTube zamiast głównego zdjęcia akcji zdjęcia podpinane do akcji (listy wyboru). Chcąc dodać nowe zdjęcie, które ma być dostępne w akcjach należy je umieścić 23

24 w katalogu akcje w mediach. Należy pamiętać, aby przy dodawaniu nowego zdjęcia utworzyć miniaturę. W katalogu homepage należy umieszczać zdjęcia, które mają być opublikowane przy akcji na stronie głównej. Rozmiary zdjęć są pokazane w dziale Rozmiary serwisu. Listy wyboru: po lewej stronie główne zdjęcie akcji oraz odpowiadająca mu miniatura po prawej stronie zdjęcie, które ma się pojawić na stronie głównej serwisu przy danej akcji Tekst do wpłat informacja wyświetlana przy danej akcji we wpłatach Nagłówek tekstu tekst pokazywany na stronie, gdzie wyświetlone są wszystkie akcje z danej kategorii (skrócone informacje o akcjach). Pełen tekst pełna informacja wyświetlana na stronie o danej akcji Zakładki w akacji możliwość dodania do czterech zakładek do każdej akcji, które wyświetlają się pod głównym opisem. Należy podać nazwę zakładki oraz opis. Zakładka Darowizny boksy wyświetlają się w darowiznach przy danej akcji. Należy podać kwotę, opis oraz zdjęcie. Edytując istniejącą Kategorię lub dodając nową, należy pamiętać aby tekst zastępczy kategorii... był taki sam, jak tekst zastępczy w menu odwołującym się, do akcji z danej kategorii. 24

25 Istnieje również możliwość podpięcia do akcji aktualności, ale tę czynność należy wykonać z komponentu aktualności. 25

26 10. FAQ - rozwijane listy Listy rozwijane, zostały podzielone na kategorie, które odpowiadają pozycjom w serwisie. Aby utworzyć nowe pytanie należy kliknąć przycisk Nowe pytanie oraz wypełnić formularz: Treść pytania wyświetlane na stronie pytanie Kategoria wybór kategorii FAQ (lista wyboru) Treść odpowiedzi odpowiedź na wpisane wcześniej pytanie Edytując istniejącą Kategorię lub dodając nową należy pamiętać aby tekst zastępczy kategorii był taki sam, jak tekst zastępczy w menu odwołującym się do list rozwijanych z danej kategorii 11. Filmy Komponent odpowiedzialny za wyświetlanie filmów w dziale Co robimy Filmy. Aby dodać nowy filmy należy kliknąć przycisk Nowa pozycja oraz wpisać tytuł filmu i link do filmu w serwisie Youtube. 26

27 12. Galerie Komponent Galerie posiada dwie zakładki: Galeria, Kategorie. Kategorie służą do podziału galerii w zależności od miejsca gdzie mają się wyświetlać. Aby dodać nową galerię, należy kliknąć na przycisk Utwórz i następnie wypełnić formularz (poniżej prezentowany). Nazwa galerii pole identyfikujące galerie na liście Tytuł galerii tekst wyświetlany na głównym zdjęciu - jako tytuł Tekst zastępczy pole wypełniane automatycznie Kategoria wybór w jakiej części serwisu galeria ma się pojawiać Opis opis galerii wyświetlany na głównym zdjęciu Zdjęcie domyślne galerii główne zdjęcie galerii 27

28 Po kliknięciu przycisku Zapisz, następuje przejście do zakładki Lista zdjęć gdzie można dodawać zdjęcia do galerii oraz ich opisy. 28

29 13. Aktualności i Centrum prasowe Komponent Aktualności i Centrum prasowe posiada dwie zakładki: Lista aktualności lista wszystkich aktualności w serwisie. W tej zakładce można ustawiać, które aktualności mają się pojawiać na stronie głównej. Kategorie podział aktualności ze względu na miejsce wyświetlania w serwisie Dodając nową aktualność, należy wypełnić następujące pola: Zakładka Dane podstawowe: Tytuł Tekst zastępczy Opublikowane nazwa aktualności tekst generowany automatycznie czy aktualność ma się pojawiać w serwisie Strona startowa czy aktualność ma się wyświetlać na stronie głównej Kategoria wybór kategorii, do której ma zostać przypisana aktualność Akcje wybór akcji w jakich ma się pojawiać aktualność (aby wybrać więcej niż jedną akcję należ przytrzymać klawisz CTRL, a następnie klikać myszką) Nagłówek tekstu Pełen tekst Pokazuj zdjęcie/film skrócona informacja pełna informacja lista wyboru umieszczona z prawej strony w boksie Parametry treści wybór czy nad opisem aktualności ma się pokazywać grafikę, film czy ma pozostać puste. Zakładka Zdjęcia (zdjęcie będzie się pojawiało, gdy zostanie wybrana Grafika z listy Pokazuj zdjęcie/film) Plik ze zdjęciem należy wskazać zdjęcie z dysku lokalnego. Zdjęcie to jest zapisywane w dwóch wersjach: małe o rozmiarach 130px x 109px, duże o rozmiarach 500px x 230px Autor zdjęcia opis pod zdjęciem Zakładka Film (film będzie się pojawiał, gdy zostanie wybrany Film z listy Pokazuj zdjęcie/film) Link do filmu (YouTube) należy podać link do filmu w serwisie YouTube 29

30 14. Logo partnerów Komponent służy do zarządzania logotypami partnerów zlokalizowanych na stronie głównej. Dodając nowe logo partnera jest ono automatycznie zmniejszane tak aby wymiary pasowały do strony oraz jest wykonywana jego kopia w skali szarości. 30

31 15. Publikacje Komponent Publikacje posiada trzy zakładki: Publikacje lista publikacji Kategorie podział publikacji na miejsce wyświetlania w serwisie Podkategorie daje możliwość podziału kategorii na podkategorie Widok podkategorii w serwisie: Dodając nową publikację należy wypełnić następujące pola: Tytuł nazwa publikacji Co nowego? - dana publikacja wyświetla się pod opisem, jako nowość (dotyczy tylko materiałów dydaktycznych) Kategoria wybór kategorii, do jakiej ma być przypisana publikacja Podkategoria wybór podkategorii (dotyczy tylko kategorii Materiały dydaktyczne) Treść opis publikacji 31

32 Zdjęcie wybór zdjęcia. Lista dostępnych zdjęć, jest zależna od wyboru kategorii. Zdjęcia do poszczególnych kategorii należy umieszczać w odpowiednich katalogach. Nazwa katalogu musi być taka sama, jak tekst zastępczy danej kategorii publikacji. Przykładowo zdjęcia dla kategorii Forum klimatyczne powinny się znajdować: Root/publikacje/forum-klimatyczne/thumbnails Szerokość zdjęcia nie może być większa nić 120px. PDF lista plików pdf. Podobnie jak przy zdjęciach, jest ona uzależniona od wybranej kategorii. Pliki powinny być umieszczane podobnie jak zdjęcia: Root/publikacje/forum-klimatyczne/pdfs Niebieskie strzałki przy listach wyboru; służą do odświeżania list plików. Opcja ta jest przydatna - gdyby zdjęcie lub plik pdf był dodany z poziomu edytora i bez przeładowania strony, nowy plik nie pojawiłby się na liście. Edytując istniejącą Kategorię lub dodając nową, należy pamiętać aby tekst zastępczy kategorii był taki sam, jak tekst zastępczy w menu odwołującym się do publikacji z danej kategorii. 16. Newsletter W tym komponencie są wyświetlane informacje o użytkownikach, którzy zapisali się 32

33 do newslettera. Komponent daje możliwość wyeksportowania bazy adresów do pliku CSV, który można otworzyć, m.in. w programie Excel. 17. Płatności Komponent wyświetla listę płatności, które zostały dokonane na stronie wpłaty serwisu. Istnieje możliwość wyeksportowania zebranych informacji do pliku CSV. 33

34 18. Sprawozdania i raporty Komponent Sprawozdania i raporty posiada dwie zakładki: Sprawozdania lista wszystkich sprawozdań Kategorie podział ze względu na miejsce, gdzie mają się wyświetlać w serwisie Dodając nowe sprawozdanie należy wypełnić następujące pola: Tytuł nazwa sprawozdania Tekst zastępczy - pole wypełniane automatycznie Kategoria - lista wyboru kategorii Opublikowane czy dane sprawozdanie ma się wyświetlać w serwisie Opis opis sprawozdania 34

35 19. Manager bannerów Po wejściu w menadżer bannerów do wyboru są cztery zakładki: Reklamy lista wszystkich dostępnych bannerów Kategorie podział bannerów ze względu na kategorie (kategoria odpowiada miejscu w serwisie/sklepie gdzie będzie znajdował się banner) Rozkład bannerów zawiera makiety serwisu/sklepu z oznaczonymi miejscami na bannery Przykład dodawania bannera na stronie głównej serwisu dla klienta UNICEf Wgrywamy plik z nowym bannerem: - będąc w głównym panelu administracyjnym klikamy przycisk Media 35

36 klikamy w katalog Bannery za pomocą przycisku Przeglądaj wybieramy interesujący nas plik oraz wczytujemy go na serwer Wracamy na stronę główną panelu administracyjnego Klikamy w przycisk Menadżer bannerów Sprawdzamy nazwę kategorii, która jest na głównej stronie serwisu. - wchodzimy w zakładkę Rozkład bannerów, interesuje nas box z kategorii: Box cms banner 01 Dodawanie reklamy w kategorii Box cms banner 01 - wchodzimy w zakładkę Reklamy - klikamy button Utwórz - wpisujemy nazwę własną - wybieramy nazwę kategorii Box cms banner 01 - wybieramy nazwę klienta UNICEF - jeżeli jest to plik typu jpg, gif, png - możemy określić adres URL na który zostaniemy przeniesieni po kliknięciu w banner - z pola Wybór grafiki typu select wybieramy wczytany przez nas plik. Ważne: jeżeli jest to animacja flash należy podać jej szerokość oraz wysokość. - klikamy zapisz Banner został dodany 36

37 20. Definicje klas edytora Edytor tekstu jest wyposażony w definicje klas, które umożliwiają zmianę formatowania wprowadzanego tekstu. Poniżej przedstawiono wygląd poszczególnych klas: abox1 tekst w ramce z tłem articlebox1 pogrubiony tekst w ramce z tłem articlebox2 tekst w ramce z tłem articletext2 niebieski tekst articletitle pogrubiony niebieski tekst, używany jako tytuł arykułu subtitle pogrubiony niebieski tekst copyright używane przy prawach autorski zdjęć Dla dzieci klasa wyświetlająca obrazek, używane w zakładce Prawa Dziecka Dla dzieci 37

38 lista1 lista wypunktowana bez bulletów lista2 lista wypunktowana lista3 lista wypunktowana tresc_bok_faq lista wypunktowana z większym odstępem od lewej strony niebieski niebieski tekst niebieski_foto niebieska ramka używana do zdjęć pdf jako link ze wskazaniem na plik pdf pobierz wygląd linku podpis tekst kursywą przerywnik1 linia przerywana rozciągnięta na 100% strony pokaz wyglad linku rozwin wygląd linku rozwin1 wygląd linku zwin wygląd linku zwin1 - wygląd linku 38

39 21. Wymiary serwisu Poniżej przedstawione są rozmiary poszczególnych części serwisu w pikselach. 39

40 40

41 22. Odblokowywanie treści (dostęp tylko dla konta typu Super Administrator) Podczas pracy z systemem zdarza się, że część elementów strony zostaje zablokowana przez system. Wówczas w pobliżu zablokowanego elementu systemu pojawia się poniższa ikona. Blokada ta oznacza, że inny administrator aktualnie edytuje dany element. Zdarza się, że administrator wyłączy przeglądarkę w trakcie edycji treści i system nie usunie blokady. W celu awaryjnego odblokowania wszystkich elementów serwisu należy z zakładki Narzędzia wybrać polecenie Odblokuj wszystkie. 41

42 23. Format, rozdzielczość, rozmiar oraz waga grafiki na potrzeby stron WWW Cechą każdego poprawnie przygotowanego serwisu, oprócz atrakcyjnego wyglądu i łatwego dotarcia do interesujących informacji jest szybkość ładowania strony oraz minimalizacja ilości pobieranych przez użytkownika danych. Cechy te uzyskuje się m.in. przez optymalizację wszystkich grafik, obrazków i zdjęć opublikowanych na stronach WWW. Zdjęcia/obrazki, które są przygotowane do wydruku, lub zdjęcia wykonane aparatem cyfrowym posiadają bardzo dużą rozdzielczość i rozmiar, znacznie przekraczający potrzeby związane z serwisem www. Odpowiednio dobierając parametry zdjęcia można zmniejszyć jego rozmiar nieraz kilkukrotnie, przy okazji nie tracąc jakości podczas wyświetlania go na monitorze. 1. Format W serwisach internetowych w większości przypadków stosuje się trzy rodzaje plików graficznych (jpg, gif, png). Każda przeglądarka internetowa musi poprawnie wyświetlać pliki graficzne zapisane w jednym z tych formatów. Formaty te różnią się sposobem kompresji i zapisu obrazu na dysku komputera. Oznacza to, że ten sam plik zapisany w każdym z tych formatów będzie się różnił wielkością i jakością. JPEG (JPG) i PNG bardzo dobre przy zapisywaniu wszelkiego rodzaju zdjęć i grafik ze znaczną ilością kolorów i skomplikowanym kształtem (cienie, gradienty itp.). GIF - zapisuje pliki za pomocą innego algorytmu kompresji. Dodatkowo obsługuje standardowo paletę tylko 256 kolorów. Jednakże w przypadku obrazów o małej ilości detali, wykresów, grafiki pliki wynikowe są nieraz kilkukrotnie mniejsze niż w przypadku plików JPG. Dodatkowo pliki GIF moga obsługiwać przezroczystość. 42

43 2. Rozdzielczość Rozdzielczość obrazka podawana jest w DPI (ang. punkty na cal) i oznacza dokładność z jaką obraz został zapisany. W przypadku dokumentów drukowanych i w poligrafi wymagane są rozdzielczości rzędu 300 DPI i więcej. W przypadku serwisów www wystarcza 75 DPI. Jest to rozdzielczośc pozwalająca na poprawnie wyświetlenie zdjęcia na ekranie moniotra. Przy okazji rozdzielczość ta praktycznie uniemożliwia wykorzystanie zapisanego ze strony www obrazka w innym celu (na przykład w DTP). 3. Rozmiar Rozmiar zdjęcia podaje się w postaci dwóch liczb określających szerokośc i wysokość zdjęcia w pixelach. Pixel oznacza pojedynczy punkt na monitorze. Informacja ile pixeli mieści się na monitorze, określa tzw. rozdzielczości monitora i zależy od typu monitora. Nowoczesne monitory obsługują rozdzielczości 1280x1024px i większe. Jednak ze względu na użytkowników starszych komputerów i monitorów w dalszym ciągu projektowane są serwisu poprawnie wyświetlające się w rozdzielczościach 1024x768px. Publikując duże zdjęcie o rozmiarze 800x600px uzyskujemy pewność, że poprawnie wyświetli się ono na wszyskich monitorach. 4. Wielkość Wielość zdjęcia to rozmiar jaki zdjęcie/obraz zajmuje na dysku po zapisaniu. Im mniejsza wielkość tym szybciej pobierany jest z sieci odpowiedni zasów i tym szybciej użytkownik zobaczy grafikę na swoim ekranie. Zoptymalizowane na potzreby www duże zdjęcie powinno zajmować nie więcej niż Kb. 43

44 24. Optymalizacja grafiki za pomocą darmowego programu GIMP Wszystkie parametry zdjęcia można określać za pomocą dowolnego programu graficznego (Photoshop, Corel Photopaint itp). Ze względu na łatwość edycji i dostępność oprogramowania proponujemy Państwu edycję za pomocą bezpłatnego programu GIMP. Gimp jest oprogramowaniem typu Open Source: Po uruchomieniu programu otwiera się okno narzędziowe do edycji grafiki. W górnym menu z zakładki Plik należy wybrać zakładkę Otwórz i wybrać zdjęcie które będzie edytowane. Po jego wybraniu otworzy się kolejne okno zawierające edytowany obrazek: 44

45 Skalowanie obrazu, zmiana rozdzielczości oraz rozmiaru odbywa się za pomocą menu kontekstowego w górnej belce okna z otwartym obrazkiem. Wybierając Obraz->Skaluj obraz otwiera się okno pozwalające na zmianę rozdzielczości i rozmiaru zdjęcia. Wykadrować zdjęcie (wybrać fragment obrazka) można wybierając z menu Obraz -> Wymiary płótna Wybór formatu w jakim ma zostać zapisany obraz następuje w momencie zapisywania pliku na dysk. Podając nazwę pliku należy podać pełną nazwę z rozszerzeniem (np. logo.jpg). System automatycznie zastosuje wtedy odpowiednią kompresję. 45