Help: Pomoc:Grafika

Edytuj
Komentarze              Archiwum wersji (wszystkie edycje)

Skopiowano ze stron roboczych projektu Wolne Podręczniki

Grafika

Streszczenie
Wolne Podręczniki nie będą kompletne bez różnego rodzaju materiałów wizualnych: zdjęć, map i infografik. Część z nich będziemy czerpać z zewnętrznych źródeł, część zaś stworzymy sami. Ten rozdział omawia jak ładować pliki z grafiką i zdjęciami na serwer Wolnych Podręczników i jak następnie umieszczać ten pliki w tekstach podręczników. Rozdział ten omawia też pokrótce prawne aspekty korzystania z grafik pobranych z zewnętrznych źródeł.

Spis treści


Zamawianie grafik

Jeśli potrzebujesz umieścić w tekście podręcznika zdjęcie lub grafikę, i potrafisz je sam wykonać, to problemu nie ma. Co jednak robić, gdy tego nie potrafisz? Musisz dać znać innym, którzy to potrafią, że potrzebujesz ich pomocy. Robisz to wypełniając odpowiedni formularz na stronie Pomoc:Zamówienie na grafikę.

Jakość materiałów graficznych

Większość zdjęć dostępnych w sieci ma jakość wytarczającą do przeglądania ich na stronach www, ale fatalnie wyglądającą w druku. Ponieważ Wolne Podręczniki będą rozpowszechniane w wielu różnych formach zakładamy, że wszystkie grafiki muszą mieć jakość przynajmniej 150dpi (zalecane - 300dpi). Jeśli nie wiesz, jak to sprawdzić, możesz wykonać wstępny test - kliknij na plik graficzny prawym przyciskiem myszy i spojrzyj w jego właściwości. Jeśli jego rozmiar nie przekracza kilkudziesięciu kilobajtów, prawdopodobnie nie nadaje się on do użytku.

Przesyłanie plików na serwer

Procedura przesyłu pliku rozpoczyna się od kliknięcia na link Prześlij plik' w menu po lewej stronie Oprogramowanie otworzy specjalną stronę z formularzem do ładowania plików (patrz rys. 1)

Rys. 1: Okno przesyłu pliku

Obsługa formularza wygląda następująco (rys. 1):

  1. klikamy na klawisz przeglądaj (1) i wyszukujemy na naszym twardym dysku plik, który chcemy przesłać, a następnie przyciskamy "OK" lub jakiś inny klawisz potwierdzający wybór
  2. w polu Oryginalna nazwa (2) powinna się automatycznie pojawić nazwa wybranego pliku wraz z jego ścieżką dostępu
  3. jeśli nasz oryginalny plik ma niewiele mówiącą nazwę (np: IMG12345678.PNG) - w okienku docelowa nazwa (3) wpisujemy jakąś bardziej opisową nazwę odnoszącą się do tego co na obrazku jest (np: "kosciol_w_Kamiennej_Gorze.png")
  4. dodajemy opis pliku w polu (4), w którym musimy w skrócie wyjaśnić co on przedstawia, kto i kiedy go wykonał i dlaczego możemy go wykorzystać legalnie w Wolnych Podręcznikach.
  5. dodajemy szablon odpowiedniej licencji, na której ten plik ma być w ramach Wolnych Podręczników udostępniony (5)
  6. klikamy na prześlij plik (6)
  7. po pewnym czasie, zależnym od rozmiaru pliku i szybkości łącza pokaże nam się strona z obrazkiem i jego opisem, co oznacza, że jest on załadowany poprawnie na serwer.

Na koniec, aby nie zapomnieć dokładnej nazwy tego pliku warto zostawić sobie otwartą stronę z jego opisem, do czasu umiejscowienia obrazka na odpowiedniej strony docelowej.


Kod grafiki

Kod służący do wstawiania grafiki przypomina swoją strukturą kod linków wewnętrznych. Tworzy się go za pomocą podwójnych, kwadratowych nawiasów. Jednak zamiast tworzyć link tekstowy, wyświetlają one obrazki w tekście strony.

Ogólna postać kodu

Kod ten ma ogólną postać:

[[Grafika:Nazwa_pliku|opcje|Opis]]
gdzie
  • Nazwa_pliku to dokładny tytuł pliku w którym zapisany jest obrazek na serwerze
  • dozowolone opcje to: thumb, frame, left, right, center i rozmiar obrazka w pikselach - przy czym można podać kilka niesprzecznych z sobą opcji na raz, jedna za drugą w dowolnej kolejności; kolejne opcje oddziela się znakiem "|" (pipe),
  • Opis to dowolny tekst, który będzie dołączony do obrazka, może on także zawierać linki wewnętrzne i zewnętrzne.

Podanie opcji i opisu nie jest wymagane przez oprogramowanie, choć zwykle jest zalecane.

Skalowanie obrazków

Najprostszy sposób wstawienia obrazka, np:

[[Grafika:Zamek krzyzacki w Malborku.jpg]]

nie daje zwykle zadowalających efektów, zwłaszcza gdy obrazek jest duży:

Zamek krzyzacki w Malborku.jpg

Aby zmniejszyć obrazek należy użyć opcji skalowania, czyli podać jego rozmiar w pikselach. Liczba ta oznacza maksymalną szerokość obrazka.

Przykład:

[[Grafika:Zamek krzyzacki w Malborku.jpg|150 px]]
[[Grafika:Zamek krzyzacki w Malborku.jpg|100 px]]
[[Grafika:Zamek krzyzacki w Malborku.jpg|50 px]]

co da taki efekt: 150 px: Zamek krzyzacki w Malborku.jpg 100 px: Zamek krzyzacki w Malborku.jpg 50 px: Zamek krzyzacki w Malborku.jpg

Pozycjonowanie obrazków

Jak widać, standardowo obrazek jest umieszczany w dość przypadkowym miejscu ekranu i trudno jest przewidzieć jak będzie opływany przez tekst. Opływanie tekstu i jednocześnie umiejscowienie obrazka kontroluje się przy pomocy opcji:

  • left - obrazek będzie się znajdował z lewej strony ekranu i będzie opływany przez tekst z prawej
  • right - obrazek będzie się znajdował z prawej strony ekranu i będzie opływany przez tekst z lewej
  • center - obrazek będzie wycentrowany i nie będzie opływany przez tekst

Przykłady:

[[Grafika:Felicidade A very happy boy.jpg|200 px|left]]
[[Grafika:Felicidade A very happy boy.jpg|200 px|right]]
[[Grafika:Felicidade A very happy boy.jpg|200 px|center]]

I rezultat:

Felicidade A very happy boy.jpg

To jest testowy tekst, który opływa obrazek z opcją left - czyli dosunięty do lewej strony i opływany z prawej. To jest testowy tekst, który opływa obrazek z opcją left - czyli dosunięty do lewej strony i opływany z prawej. To jest testowy tekst, który opływa obrazek z opcją left - czyli dosunięty do lewej strony i opływany z prawej.


Felicidade A very happy boy.jpg

To jest testowy tekst, który opływa obrazek z opcją right - czyli dosunięty do prawej strony i opływany z lewej. To jest testowy tekst, który opływa obrazek z opcją right - czyli dosunięty do prawej strony i opływany z lewej. To jest testowy tekst, który opływa obrazek z opcją right - czyli dosunięty do prawej strony i opływany z lewej.


To jest testowy tekst, który nie opływa obrazka z opcją center

Felicidade A very happy boy.jpg

lecz znajduje się pod nim lub nad nim.

Thumb i frame

Opcje thumb i frame powodują otoczenie obrazka szarą ramką z możliwością dodania tekstu pod zdjęciem w ramce. Thumb dodatkowo powoduje zmniejszenie obrazka do ustalonego z góry rozmiaru, który wynosi standardowo 180 pikseli. Zarówno z thumb jak i z frame można ustalić dowolny rozmiar obrazka podając jego rozmiar w pikselach. Obrazki z opcją thumb i frame domyślnie są umieszczane z opcją right - czyli są dosuwane do prawej strony ekranu i opływane z lewej. To jednak również można zmienić stosując opcję center i left.

Przykłady:

[[Grafika:Cyanocitta-cristata-004.jpg|thumb|Modrosójka błękitna]]
[[Grafika:Cyanocitta-cristata-004.jpg|thumb|left|250 px|Modrosójka błękitna]]
[[Grafika:Cyanocitta-cristata-004.jpg|thumb|center|400 px|[[Modrosójka błękitna]]]]

I rezultat:

Modrosójka błękitna

To jest testowy tekst, który opływa obrazek z opcją thumb - bez zmienionego rozmiaru i opływania. To jest testowy tekst, który opływa obrazek z opcją thumb - bez ustawionego rozmiaru i opływania. To jest testowy tekst, który opływa obrazek z opcją thumb - bez ustawionego rozmiaru i opływania.


Modrosójka błękitna

To jest testowy tekst, który opływa obrazek z opcją thumb z opcją opływania left i rozmiarem zmieniony na 250 px. To jest testowy tekst, który opływa obrazek z opcją thumb z opcją opływania "left" i rozmiarem zmieniony na 250 px. To jest testowy tekst, który opływa obrazek z opcją thumb z opcją opływania "left" i rozmiarem zmieniony na 250 px.


To jest testowy tekst, który nie opływa obrazka z opcją thumb, center i rozmiarem ustalonym na 400 pikseli.

Dodatkowo pokazano tu możliwość wstawienia do opisu obrazka linku do strony w Wikipedii.

dwukropek

Dwukropek na początku kodu obrazka powoduje przekształcenie go w zwykły link. Przydaje się to gdy nie chce się wyświetlać obrazka na stronie, ale chce się do niego skierować czytelnika, aby mógł go sobie obejrzeć po kliknięciu w link.

Przykład:

[[:Grafika:Fitz Roy framed trees (colour balans).jpg|Wielka Góra]]

i efekt:

Wielka Góra

Uwagi

Jakkolwiek pozornie wstawianie obrazków w MediaWiki wydaje się proste, przy braku wprawy prowadzi ono czasem do dziwnych, niespodziewanych efektów i problemów.

Problemy z nazwą obrazka

Częstym problemem jaki mają początkujący użytkownicy jest wpisanie poprawnej nazwy pliku, w którym jest obrazek. MediaWiki wymaga stuprocentowo ścisłego odnoszenia się do nazw plików. Oprogramowanie rozróżnia wielkość liter w nazwach oraz wszelkie znaki specjalne, takie jak spacje, myślniki, podkreślenia itd.

Przykład: Plik nazywa się: Fitz Roy framed trees (colour balans).jpg

[[Grafika:fitz roy framed trees (colour balans).JPG|thumb|Zła nazwa - różni się wielkością liter]]
[[Grafika:Fitz Roy framed trees(colour balans).jpg|thumb|Zła nazwa "- różnica polega tylko na braku spacji między "trees" i nawiasem]]
[[Grafika:Fitz Roy framed trees (colour balans).jpg|thumb|Wreszcie dobrze !]]

i efekt:

Plik:Fitz roy framed trees (colour balans).JPG
Zła nazwa - różni się wielkością liter
Plik:Fitz Roy framed trees(colour balans).jpg
Zła nazwa "- różnica polega tylko na braku spacji między "trees" i nawiasem
Wreszcie dobrze !

Najprostszym sposobem aby uniknąć kłopotów z nazwą pliku jest wyświetlić w osobnym oknie stronę opisu obrazka i skopiować jego nazwę z tytułu strony wprost do kodu pisanej strony.

"Kiszkowaty tekst"

Tzw. kiszkowaty tekst powstaje wtedy, kiedy stłoczy się zbyt wiele obrazków o zbyt dużych rozmiarach w jednym miejscu. Efekt "kiszkowatości" może być niedostrzegalny dla autora strony, jeśli pracuje on z ekranem ustawionym w wysokiej rozdzielczości, natomiast może on się pojawić na ekranie czytelnika, która używa mniejszą od autora rozdzielczość ekranu. Z tego względu warto po napisaniu strony sprawdzić jak ona wygląda przy mniejszych rozdzielczościach ekranu.

Przykład kiszkowatego tekstu:

Motylek

Zaraz pojawi się kiszkowaty tekst, który wygląda szczególnie brzydko, gdy wcześniej jest tekst normalny.

Światłocienie w lesie

To jest przykładowy tekst, który się robi kiszkowaty przy rozdzielczości poniżej 1280 px. To jest przykładowy tekst, który się robi kiszkowaty przy rozdzielczości poniżej 1280 px. To jest przykładowy tekst, który się robi kiszkowaty przy rozdzielczości poniżej 1280 px.


Aby uniknąć tego rodzaju efektów należy:

  • nie mieszać obrazków opływanych na lewo i prawo zbyt blisko siebie
  • nie stosować większej rozdzielczości obrazków niż 350-400 px

Nachodzenie list

Opływanie tekstu przez grafikę wygląda szczególnie nieładnie w przypadku stosowania opływania z prawej strony i wyliczanek tworzonych kodem "*" lub "#". gdyż wtedy znaki kolejnych podpunktów wchodzą na grafikę.

Np kod:

[[Grafika:SF Golden Gate Bridge splash CA.jpg|left|100 px]]
* tekst 1
* tekst 2
* tekst 3
* tekst 4
# lista 1
# lista 2
# lista 3

Wygląda tak:

SF Golden Gate Bridge splash CA.jpg
  • tekst 1
  • tekst 2
  • tekst 3
  • tekst 4
  • tekst 6
  1. lista 1
  2. lista 2
  3. lista 3


Prostym rozwiązaniem tego problemu jest użycie obrazka z opcją thumb:

SF Golden Gate Bridge splash CA.jpg
  • tekst 1
  • tekst 2
  • tekst 3
  • tekst 4
  • tekst 6
  1. lista 1
  2. lista 2
  3. lista 3


Jak uniknąć wchodzenia obrazków na dwie sekcje

Kolejnym, często spotykanym problemem jest wchodzenie obrazków na dwie lub więcej sekcji tekstu. Zdarza się to, gdy tekst w sekcji jest za krótki, a obrazek jest "za długi". Możliwość zaobserwowania tego efektu również jest zależna od rozdzielczości ekranu. W odróżnieniu jednak od poprzedniego przypadku, zdarza się on częściej przy większej rozdzielczości ekranu. W większej rozdzielczości ekranu tekst ma "więcej miejsca" a wysokość obrazka się nie zmienia.

Przykładowy kod:

==== Przykład 1 ====
[[Grafika:Fitz Roy framed trees (colour balans).jpg|thumb|150 px]]
To jest, testowy, krótki tekst.
==== Przykład wchodzenia obrazka na tytuł sekcji od prawej strony ====
[[Grafika:Fitz Roy framed trees (colour balans).jpg|thumb|left|150 px]]
To jest, testowy, krótki tekst.
==== To jest tytuł "zaatakowany" obrazkiem z lewej strony ====
To jest testowy, krótki tekst.

i rezultat:

Przykład 1

Fitz Roy framed trees (colour balans).jpg

To jest, testowy, krótki tekst.

Przykład wchodzenia obrazka na tytuł sekcji od prawej strony

Fitz Roy framed trees (colour balans).jpg

To jest, testowy, krótki tekst.

To jest tytuł "zaatakowany" obrazkiem z lewej strony

To jest testowy, krótki tekst.


Na ten problem nie ma prostego rozwiązania. Należy po prostu unikać krótkich sekcji z obrazkami. Pewnym rozwiązaniem jest tu używanie tagu XHTML o postaci:

<br clear="all"/>

który powoduje, że tytuł kolejnej sekcji pojawi się dopiero poniżej obrazka. Rozwiązanie to pozostawia jednak duże, puste pola na ekranie.

Przykładowy kod:

==== Przykład 2 ====
[[Grafika:Fitz Roy framed trees (colour balans).jpg|thumb|150 px]]
To jest, testowy, krótki tekst.
<br clear="all"/>
==== Teraz nie nachodzi z prawej ====
[[Grafika:Fitz Roy framed trees (colour balans).jpg|thumb|left|150 px]]
To jest, testowy, krótki tekst.
<br clear="all"/>
==== Teraz nie nachodzi z lewej ====
To jest testowy, krótki tekst.

i rezultat:

Przykład 2

Fitz Roy framed trees (colour balans).jpg

To jest, testowy, krótki tekst.

Teraz nie nachodzi z prawej

Fitz Roy framed trees (colour balans).jpg

To jest, testowy, krótki tekst.

Teraz nie nachodzi z lewej

To jest testowy, krótki tekst.


Prawne aspekty korzystania z plików pobranych z zewnętrznych źródłeł

do napisania (o licencjach, o kwestii zdobywania pozwoleń itp).

Licencje:

Udziela się zgody na kopiowanie, dystrybucję i/lub modyfikację tej grafiki na warunkach licencji GNU Free Documentation License w wersji 1.2 lub nowszej, opublikowanej przez Free Software Foundation. Zobacz tekst licencji: [1], i jego nieoficjalne, polskie tłumaczenie [2]
Grafika ta jest własnością publiczną, ponieważ prawa autorskie do niej wygasły.


Ten plik udostępniony jest na licencji Creative Commons Attribution ShareAlike 2.5.
Wszelkie prawa zastrzeżone
Prawo do tego logotypu lub innego znaku graficznego należy do {{{1}}}. Korzystanie z niego podlega ograniczeniom.

Wszelkie prawa zastrzeżone.

W ramach serwisu internetowego Wolnych Podręczników jest używany za pozwoleniem uprawnionego.


Źródła na wolnych licencjach:

flickr

Wikimedia Commons

inne ?

Tekst pochodzi z podręcznika Wikibooks: "MediaWiki w obrazkach": [3]. Autorzy: [4]