Aleksander Kieliński. Galeria internetowa z wykorzystaniem języków skryptowych

Transkrypt

1 Aleksander Kieliński Galeria internetowa z wykorzystam języków skryptowych Bydgoszcz 2007

2 Spis treści Wstęp 3 1. Projekt strony Picasa Web Albums - aplikacja web do zamieszczania zdjęć Porta - generowa galerii do umieszczenia na własnym serwerze Picasa zarządza, edycja i generowa galerii Skrypt php wyświetlający galerię Skrypt konwertujący zdjęcia Podsumowa Literatura 32

3 Wstęp W latach 90-tych Tim Berners-Lee stworzył dokument hipertekstowy WWW, dzięki któremu naukowcy z całego świata mogli wymieniać się między sobą wynikami badań. Narzędziem służącym do tego był internet. Wkrótce internet okazał się najszybciej rozwijającą się technologią w historii ludzkości. Pierwsza generacja stron internetowych to ubogo wyglądające dokumenty tworzone przez naukowców. Większość z nich składała się w całości z tekstu. Rzadko pojawiały się obrazki. Był to zwykły dokument, który użytkownik mógł przeczytać. Następna generacja stron internetowych była już tylko prostym tekstem, ale została rówż wzbogacona o popularne w rozrastających się stronach WWW obrazki i animacje. Gdy do grona użytkowników internetu dołączyli ludzie spoza kręgów naukowych, zaczął się on bardzo szybko rozwijać. Jednak olbrzymi rozmiar plików graficznych i animacji, a co za tym idzie związany z tym długi czas ich pobierania, sprawiły, że internet nazywano rówż ogólnoświatowym czekam World Wide Wait". Trzeci etap rozwoju stron internetowych, to strony internetowe pełniące rolę narzędzi do prowadzenia działalności gospodarczej. Dziś strona jest tylko obiektem do oglądania jest środkiem służącym do osiągania wyznaczonych celów. Gwałtowny i kontrolowany choć bardzo entuzjastyczny rozwój nowej technologii pociągnął za sobą masową produkcję różnego rodzaju serwisów. Wynikiem tego jest mnóstwo błęd zaprojektowanych stron internetowych, które służą żadnemu celowi. Efektem tego podejścia jest bezużyteczna informacja składająca się na ogarniający użytkowników internetu szum informacyjny Worid Wide Noise. Obec popularyzacja szerokopasmowego dostępu do internetu umożliwia swobodne umieszcza w sieci materiałów multimedialnych. Szerokopasmowy dostęp wraz z popularyzacją aparatów cyfrowych spowodował gwałtowny wzrost popularności materiałów zdjęciowych. Powstały liczne galerie internetowe umożliwiające zamieszcza swoich zdjęć i grafik np. plfoto.com, digart.pl itp., programy do tworzenia galerii na swoich stronach domowych. Celem nijszej pracy jest stworze galerii zdjęć na stro szkolnej Praca składa się z trzech rozdziałów. W rozdziale pierwszym przedstawiam rozwiązania stosowane przez wybrane serwisy internetowe oraz programy do generowania galerii. W rozdziale drugim omówiłem założenia projektu oraz działa stworzonej na potrzeby strony galerii. W rozdziale trzecim omówiłem automatyzacje umieszczania zdjęć na serwerze. 3/32

4 1. Projekt strony Grupą docelową odbiorców strony internetowej szkoły są uczniowie, absolwenci oraz rodzice. Biorąc pod uwagę często małe zaawansowa użytkowników w pracy z komputerem i internetem projekt strony powin spełniać następujące założenia: przejrzysty i łatwy w nawigowaniu interfejs strony, zgodność z różnymi przeglądarkami i systemami operacyjnymi, mały rozmiar strony, estetyka nawiązująca do obecnych rozwiązań. W związku z faktem, że prowadze strony jest dodatkowym obowiązkiem, projekt powin zakładać łatwość i szybkość aktualizacji, aby odciągać nauczyciela od procesu dydaktycznego i wychowawczego. Udało się to zrealizować poprzez wykorzysta kaskadowych arkuszy stylów CSS oraz wielkich elementów języka PHP. Struktura strony jest następująca: index.php główny plik strony odpowiedzialny za interfejs a php pliki zawierające aktualności zamieszczane na a php stro szkola-dokumenty.php pliki zawierające informacje o szkole szkola-nauczyciele.php szkola-patron.php szkola-szkola.php -<dokumenty> folder z dokumentami w formacie PDF np. regulaminy -<fotogaleia> -foto php pliki zawierające spis wydarzeń zawartych -foto php w dziale fotogaleria -galeria.php -<images> grafika wykorzystana do budowy menu strony -<obrazki> grafika tematyczna wykorzystywana regular na stro np. Wigilia Nawigacja na stro odbywa się poprzez odnośniki do pliku index.php z odpowiednim 4/32

5 parametrem np. index.php?strona=szkola co spowoduje wyświetle na głównej stro informacji na stro znajdujących się w pliku szkola-szkola.php, dzięki zastosowaniu elementów języka php możliwe jest dołącze do pliku inde.php za pomocą funkcji include. Rozwiąza to ma następujące zalety: cały wygląd strony jest opisany w pliku index.php, nawigacja menu znajduje sie w jednym pliku. Jakiekolwiek modyfikacje wystarczy dokonać w pliku index.php a zmiany będą dotyczyć wszystkich podstron serwisu dzięki temu, że pozostałe podstrony wchodzą jako integralna część tego pliku w zależności od zmiennej strona przekazywanej w linkach nawigacyjnych. Rysunek: Strona wyświetlona w przeglądarce Mozilla Firefox system Windows XP 5/32

6 1.1 Picasa Web Albums - aplikacja web do zamieszczania zdjęć W internecie możemy zamieścić swoją galerię ze zdjęciami nawet w przypadku gdy posiadamy własnego serwera dzięki powstaniu wielu serwisów zajmujących sie hostingiem zdjęć, które oferują określoną powierzchnię. W przypadku gdy decydujemy się na umieszcze galerii w takim serwisie musimy wziąć pod uwagę kilka parametrów: rozmiar przestrzeni, którą udostępnia serwis, maksymalny rozmiar pojedynczego zdjęcia, czy serwis umożliwia obróbkę fotografii, możliwość tworzenia galerii publicznych i prywatnych, możliwość komentowania przez odwiedzających, możliwość oceniania przez odwiedzających, wygodę interfejsu, obsługiwane formaty graficzne, szybkość działania serwisu. Jednym z bardziej popularnych serwisów do zamieszczania zdjęć jest Picasa Web Albums firmy Google znanej z doskonałej wyszukiwarki inteternetowej. Aplikacja ma bardzo przyjazny interfejs dzięki temu, że poszczególne podstrony zawierają tylko te opcje, które są w danej chwili potrzebne. W obsłudze przypomina bardzo program okienkowy mimo iż jest stroną wyświetloną w przeglądarce. Osiągnięto to dzięki zastosowaniu technologii AJAX. W bezpłatnej wersji Picasa Web Albums otrzymujemy 1GB przestrzeni dyskowej dla naszej galerii. Dodatkowym atutem jest brak limitu dla pojedynczego zdjęcia. Picasa Web Albums to tylko hosting zdjęć. Umieszczone pliki można grupować w albumy. Każdy z takich albumów możemy udostępnić jako publiczny dla wszystkich internautów lub jako prywatny widoczny tylko dla autora i zaproszonych osób. Fotografie mogą być podpisywane i komentowane przez odwiedzających. Możemy rówż podlinkowywać wybrane zdjęcia z własnej strony. Do wad Picasy Web Album możemy zaliczyć męczące dodawa większej ilości zdjęć poważ aplikacja przewiduje jednorazowe umieszcze do 5 zdjęć. W przypadku chęci zamieszczenia większej ilości zdjęć czynność tę musimy powtarzać kilkukrot. 6/32

7 Rysunek: Picasa Web Albums w takcie dodawania zdjęć przez interfejs WWW. Rysunek: Picasa Web Albums podgląd albumu jako miniaturek. 7/32

8 Rysunek: Picasa Web Albums podgląd wybranego zdjęcia Picasa Web Albums jest oczywiście jedynym tego typu serwisem. W sieci znajdziemy wiele tego typu stron, ich zestawie prezentuje poniższa tabela. Nazwa serwisu Adres ( Akceptowane formaty Wielkość konta Maksymalny rozmiar jednego pliku Limit transferu Pliki ZIP JPG, JPEG 1 MB 1 MB, pliki ZIP 30 MB tak 512 kb, pliki ZIP 10 MB 5GB/ miesiąc tak 1 MB 10MB/ miesiąc Uwagi Picasa Web Albums picasaweb.google.pl 1 GB Rejestracja obowiązkowa. Można linkować do obrazów z zewnętrznych stron WWW Onet Foto foto.onet.pl JPG, JPEG Rejestracja obowiązkowa. Maksymalna rozdzielczość zdjęcia to 1600x1600 pikseli. The ImageHosting JPG, JPEG, GIF, PNG, SWF Rejestracja obowiązkowa. Ograniczem jest zakaz linkowania do obrazów z zewnętrznych stron WWW. FileHigh JPG, JPEG, GIF, BMP, 100 MB PNG, TIF, TIFF, Można linkować do obrazów z zewnętrznych stron WWW. ImageHosting.US JPEG, JPG, PNG, GIF 25 MB Można linkować do obrazów z zewnętrznych stron WWW. Rejestracja obowiązkowa, ale umożliwia administrowa plikami na serwerze. SuprFile GIF, JPEG, PNG 1 MB Rejestracja obowiązkowa. Pliki są usuwane po 6 miesiącach od ostatgo wyświetlania. Można linkować do obrazów z zewnętrznych źródeł. Image-Upload.net JPG, JPEG, PNG, GIF, 100 MB BMP 1 MB 1 GB/ miesiąc Rejestracja obowiązkowa. Można tworzyć galerie publiczne (dostęp dla wszystkich) lub prywatne (wejście wymaga podania hasła). FreeShare freeshare.us JPEG, GIF, PNG Niezarejestrowani 8/32

9 Nazwa serwisu Adres ( Akceptowane formaty Wielkość konta Maksymalny rozmiar jednego pliku Limit transferu Pliki ZIP 5 GB/ miesiąc tak Uwagi 2 MB, zarejestrowani 5 MB Można linkować do obrazów z innych stron WWW. FileDen JPEG, JPG, GIF, PNG, 500 MB BMP 50 MB Po zarejestrowaniu można także wgrywać pliki z archiwami ZIP (są rozpakowywane na serwerze i przekształcane w galerie). Do plików można linkować z innych stron WWW. ElectronicFiles.net JPEG, JPG, GIF, PNG, 1 GB BMP 10 MB 1 GB/ miesiąc Rejestracja obowiązkowa. Do plików można linkować z innych stron WWW. Można tworzyć galerie publiczne i prywatne. T3rbo JPEG, JPG, GIF, PNG, 100 MB BMP 1,5 MB 10 MB 10 GB 10 MB 5 GB/ miesiąc Do plików można linkować z innych stron WWW. Po 60 dniach obejrzane pliki są usuwane. Files.bz JPEG, JPG, GIF, PNG, 100 MB BMP Rejestracja obowiązkowa. Do plików można linkować z innych stron WWW. GigaFiles JPEG, JPG, GIF, PNG, 5 GB BMP, TIF, TIFF Możliwość tworzenia galerii publicznych i prywatnych. Do plików można linkować z innych serwisów WWW. FreeFileHosting JPEG, JPG, GIF, PNG, 50 MB BMP 5 GB/ miesiąc tak JPEG, JPG, GIF, PNG, 500 zdjęć BMP, TIF, TIFF 1,5 MB 550 MB/ miesiąc Do plików można linkować z innych serwisów WWW. Xs.to xs.to Do plików można linkować z innych stron WWW. Można tworzyć galerie publiczne i prywatne. Host-A host-a.net JPEG, JPG, GIF, PNG, 20 MB BMP 2 MB Każda osoba, która zapisze się za pośrednictwem linku zwiększa transfer konta o 100 MB. Można zakładać galerie publiczne i prywatne. Nie można linkować do plików z innych stron WWW. LetMeHost letmehost.com JPEG, JPG, GIF, PNG, BMP, SWF 2 MB dla JPG, BMP, PNG i 0,5 MB dla formatu GIF i SWF Kilka TB/ miesiąc Nie Do plików można linkować z zewnętrznych serwisów WWW. Wszystkie pliki w formacie BMP są automatycz konwertowane na format JPG. PhotoHosting.info JPEG, JPG, GIF 2 MB Rejestracja obowiązkowa, ale umożliwia organizowa plików w galerie zdjęć. Nie można linkować do plików na innych stronach WWW. ImageCave JPEG, JPG, GIF, PNG, BMP 10 MB 1 GB/ miesiąc Rejestracja w serwiscie obowiązkowa. Można tworzyć galerie publiczne i prywatne. Zdjęcia można poddać przekształceniom: zmienić rozmiar, obrócić, przekonwertować do innego formatu. Wszystkie pliki w formacie BMP są automatycz konwertowane do formatu JPG. Pliki można linkować na innych serwisach WWW. MyOnlineImages JPEG, JPG, GIF, PNG, 50 MB BMP, SWF, TIF, TIFF 12 MB 1,5 GB/ miesiąc Rejestracja obowiązkowa. Zdjęcia można poddać przekształceniom: zmienić rozmiar, obrócić, odbić lub skopiować. Do plików można linkować z innych stron WWW. PicsPlace.to picsplace.to JPEG, JPG, GIF, PNG, BMP 1,5 MB Po 30 dniach obejrzane pliki są automatycz usuwane. Do plików można linkować z innych stron WWW. ImgFreeHost JPEG, JPG, GIF, PNG 250 KB Po 60 dniach pliki są automatycz usuwane. Do plików można linkować z innych serwisów WWW. PicTiger JPEG, JPG, GIF, PNG, SWF 1 MB 9/32

10 Nazwa serwisu Adres ( Akceptowane formaty Wielkość konta Maksymalny rozmiar jednego pliku Limit transferu Pliki ZIP Uwagi Nieobejrzane pliki są usuwane po 3 miesiącach. Serwer umożliwia tworze galerii. Do plików można linkować z innych serwisów WWW. YouREP JPEG, JPG, GIF, PNG, 2 GB TIF, TIFF brak ograniczeń/ 50 MB pliki ZIP tak Rejestracja obowiązkowa. W serwisie można tworzyć galerie zdjęć. Pliki po 60 dniach od ostatgo wyświetlania są usuwane. ImageFiasco JPEG, JPG, GIF, PNG, BMP, SWF, TIF, TIFF 2,5 MB tak JPEG, JPG, PNG, BMP, SWF, TIF, TIFF 50 MB tak JPEG, JPG, JPE, GIF, PNG, SWF, TIF, TIFF 1 MB 5 GB/ miesiąc Do plików można linkować z innych serwisów. PhotoJerk Rejestracja obowiązkowa. SimpLoad Pliki przechowywane są na serwerze 1 miesiąc dla użytkownika zarejestrowanego, 6 miesięcy dla zarejestrowanego. Po zarejestrowaniu można określić czas przechowywania plików. Cool_Image_Hosting JPEG, JPG, GIF, PNG 250 KB Rejestracja obowiązkowa. Pliki są usuwane po 60 dniach. Do plików można linkować z innych serwisów WWW. HostMyPic.info JPEG, JPG, GIF, PNG, BMP, TIF, TIFF 1 MB Pliki są usuwane po 60 dniach od ostatgo wyświetlania. Do obrazów można linkować z innych serwisów WWW. HostMyLife.info JPEG, JPG, GIF, PNG, 150 MB BMP 100 MB 10 GB/ miesiąc tak JPEG, JPG, GIF, PNG, BMP 1 MB Do plików można linkować z innych serwisów WWW. PicVault.info Rejestracja obowiązkowa. Pliki są usuwane po 30 dniach od ostatgo wyświetlania. Do obrazów można linkować z innych stron WWW. Tabela: Zestawie galerii internetowych 10/32

11 1.2. Porta - generowa galerii do umieszczenia na własnym serwerze Porta jest darmowym programem, który potrafi na podstawie zdjęć znajdujących się w jednym katalogu wygenerować galerie w formacie html lub flash. Do najważjszych zalet programu możemy zaliczyć: szybkość generowania galerii, łatwość obsługi, mały rozmiar programu, kod html tworzony przez program jest zgodny z obowiązującymi standardami, dzięki czemu jest prawidłowo wyświetlany przez wszystkie nowoczesne przeglądarki, umożliwia tworze rówż galerii w technologi flash dzięki wykorzystaniu darmowej galerii SIMPLEVIEWER, dokonuje skalowania zamieszczanych zdjęć do wybranego rozmiaru, generuje miniaturki zdjęć. W przypadku jednak naszej strony internetowej do największej wady możemy zaliczyć to, że galerie generowane przez program mieszczą się w osobnych katalogach włącz z plikami HTML przez co jakiekolwiek zmiany wyglądu wymagałyby ponownego generowania galerii lub ręcznej edycji plików we wszystkich katalogach. Zatem program jest najbardziej przydatny gdy mamy kilka galerii tematycznych, które zmieniają sie i są aktualizowane. Etapy tworzenia galerii w programie porta przedstawiają poniższe ilustracje: Rysunek: Główny ekran programu Porta. W ok Title wpisany tytuł, ok footer czyli stopka wpisana data wydarzenia. Pole Destination określa miejsce docelowe wygenerowanej galerii. 11/32

12 Rysunek: Opcje programu Porta. Tutaj możemy ustalić takie opcje jak format galerii flash/html, rozmiar miniaturek i zdjęć, wyostrza po przeskalowaniu itp. Rysunek: Porta w trakcie generowania galerii, zwraca uwagę szybkość programu. Na ekra widzimy czas 24 sekundy w którym dokonano przeskalowania 104 obrazków z aparatu 6MPix, na komputerze z procesorem AMD Sempron 1800 Mhz. 12/32

13 Rysunek: Gotowa galeria w wersji Flash wyświetlona w przeglądarce. Rysunek: Galeria w wersji HTML wyświetlana w przypadku gdy na komputerze odbiorcy jest zainstalowany player flash. 13/32

14 1.3. Picasa zarządza, edycja i generowa galerii. Bardzo ciekawym programem jest Picasa stworzona przez Google. Jest to darmowy program stworzony z myślą o użytkownikach domowych do zarządzania zbiorem fotografii na dysku komputera. Posiada też podstawowe możliwości edycji zdjęć. Przy pierwszym uruchomieniu programu program przeszukuje wskazane miejsce w poszukiwaniu zdjęć w celu dodania ich do swojej bazy. Możemy samodziel określić jak poszczególne dyski lub foldery maja być traktowane przez program. Każdy z folderów/dysków może być przez program monitorowany i w razie dodania w nim nowych zdjęć zostaną automatycz dodane do bazy zgromadzonych zdjęć, możemy też dodać zdjęcia bez monitorowania pojawienia sie nowych plików lub całkowicie wyłączyć folder z obserwacji w programie. Po umieszczeniu zdjęć w programie możemy organizować, edytować, dzielić się zdjęciami, tworzyć kopie zapasowe, drukować itp. Rysunek: Ekran programu Picasa w trakcie organizowania zdjęć widok miniaturek. 14/32

15 Organizowa kolekcji zdjęć: przenosić między istjącymi folderami oraz usuwać, zmieniać nazwy wybranych plików, dodawać opisy dla zdjęć, wyróżniać wybrane zdjęcia dodając gwiazdkę, usuwać, kopiować, zabezpieczać hasłem wybrane foldery, Rysunek: Ekran programu Picasa w trakcie wycinania fragmentu zdjęcia. Edycja zdjęć: wycina wybranego fragmentu zdjęcia, prostowa przekrzywionych zdjęć, usuwa czerwonych oczu, korekcja kontrastu, korekcja koloru, filtry typu sepia, zdjęcia czarno-białe, korekcja nasycenia, wyostrze, doda ziarna, selektywne rozmycie itp. 15/32

16 Największa zaletą edycji w programie jest to, że wszystkie zmiany możemy cofnąć w dowolnym momencie. Uzyskano to poprzez to, że Picasa edytuje bezpośrednio plików jedy w specjalnym pliku picasa.ini umieszcza spis czynności edycyjnych dla wszystkich plików danego folderu. Zmiany do zdjęć nanoszone są w momencie eksportu. Rysunek: Picasa w trakcie zmiany zdjęcia na czarno-białe. Dziele się zdjęciami: wysyła zdjęć em z automatycznym zmjszem oraz nasiem poprawek do zdjęć w wybranym rozmiarze oraz dołączem ich jako załączników, eksport do wybranego folderu w wybranym rozmiarze, drukowa zdjęć oraz plakatów, tworze płyt CD z pokazem zdjęć dla systemów Windows, wysyła zdjęć do programu Picasa Web Albums, tworze galerii internetowych w formacie HTML. 16/32

17 Rysunek: Okno progarmu Picasa eksport do wybranego folderu. Rysunek: Eksport zestawu zdjęć jako stronę HTML. 17/32

18 Rysunek: Przykładowa galeria WWW utworzona w programie Picasa. Rysunek: Okno programu Picasa eksport do Picasa Web Albums 18/32

19 2. Skrypt php wyświetlający galerię W trakcie wyboru rozwiązania prezentacji zdjęć w internecie główny nacisk został położony na kompatybilność rozwiązania z różnymi systemami operacyjnymi oraz przeglądarkami internetowymi stosownymi po stro klienta. Starłem się uniknąć potrzeby instalowania na komputerach klienckich dodatkowych programów typu: Flash, Java itp. Zastosowa technologi PHP pozwoliło sprostać temu wymaganiu dzięki temu, że kod PHP wykonuje się po stro serwera, a na komputerze klienckim otrzymujemy czysty kod HTML. Na serwerze w katalogu fotogaleria umieszczamy skrypt galerii galeria.php w tym samym katalogu umieszczamy kolejne foldery ze zdjęciami wg. Następującego schematu: <fotogaleia> --galeria.php --< > --<duze> --zdjecie.jpg --miniaturka.jpg < > --<duze> --zdjecie.jpg --miniaturka.jpg Wyświetle odpowiedj galerii odbywa się poprzez wywoła odnośnika do pliku galeria.php z podam nazwy katalogu w którym znajduje się galeria np. galeria.php? dir= &nr=1 co spowoduje wyświetle 1 zdjęcia z folderu /32

20 Rysunek. Skrypt wyświetlający zdjęcie. Przeglądarka Firefox, system Ubuntu Linux. Rysunek: Skrypt wyświetlający miniaturki. Przeglądarka Firefox, system Ubuntu Linux. 20/32

21 Rysunek: Skrypt wyświetlający błąd. Przeglądarka Firefox, system Ubuntu Linux. Kod źródłowy skryptu: 1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " 2. <html> 3. <head> 4. <title>oficjalna strona Gimnazjum nr 1 w Tucholi im. dra Kazimierza Karasiewicza</title> 5. <meta http-equiv="content-type" content="text/html; charset=iso "> 6. <meta name="description" content="oficjalna strona Gimnazjum nr 1 w Tucholi im. dra Kazimierza Karasiewicza"> 7. <meta name="keywords" content="tuchola, Gimnazjum, Galeria, Fotogaleria, Zdjęcia"> <meta name="generator" content="bluefish"> </head> <body bgcolor="#ddd" text="black" link="#1853be" alink="#1853be" vlink="#1853be"> <?php 14. #Galeria w katalogu np umiescić miniaturki, zdjecia w kataogu ' /duze' 21/32

22 15. #Wywoła galeria.php?dir= &nr= #odczyt zawartosci katalogu 18. $katalog = opendir ($dir); 19. $i=1; 20. while ($plik = readdir ($katalog)) 21. { 22. if (ereg (".gif$.jpg$", $plik)) { $zdjecia[$i++] = $plik; } } closedir ($katalog); #wyswietle duzego zdjecia if (($nr>0) && ($nr<=count($zdjecia))) 28. { 29. $nazwapliku = $dir.'/duze/'.$zdjecia[$nr]; 30. if (file_exists($nazwapliku)) 31. { 32. $ilosc=(count($zdjecia)); 33. $rozmiar = getimagesize($nazwapliku); 34. print '<div align="center"><font size="2" face="arial CE, Arial, Helvetica">'; 35. #print '<p><b>'.$data.' - '; 36. print ' <b>zdjęcie nr - '. $nr.'/'.$ilosc.'</b><br>'; 37. print '<IMG SRC="'.$nazwapliku.'" '.$rozmiar[3]; 38. print ' BORDER=2><br>'; } else #brak zdjecia { print '<div align="center"><font size="4" face="arial CE, Arial, Helvetica"><a href="mailto:dgjm@wp.pl?subject=brak-zdjecia22/32

23 nr'.$nr.'-'.$dir.'">brak dużego zdjecia nr'.$nr.'<br>kliknij - POWIADOM AUTORA STRONY!</a><br><hr size="1"></font>'; } #wyswietle odnosnikow do nawigacji if ($nr>1) 48. { 49. print '<A HREF="galeria.php? dir='.$dir.'&nr='.($nr1).'">poprzed</a>'; 50. } 51. print ' <A dir='.$dir.'">miniaturki</a> HREF="galeria.php? '; if ($nr<count($zdjecia)) 54. { 55. print '<A dir='.$dir.'&nr='.($nr+1).'"> 56. } 57. print "</P></font></div>"; 58. } HREF="galeria.php? Następne</A>'; #wyswietle miniaturek elseif (count($zdjecia)>0) 63. #jest przynajmj jedno zdjęcie 64. { 65. $ilosc=(count($zdjecia)); 66. print '<div align="center"><font size="2" face="arial CE, Arial, Helvetica">'; 67. print '<p><b>galeria zdjęć - '.$data.' Ilo ć zdjęć '.$ilosc.'<br>'; #print '. Zdjęcie nr - '.$nr.'/'.$ilosc.'</b><br>'; for ($i=1; $i<=count($zdjecia); $i++) 23/32

24 70. { 71. $nazwapliku = $dir.'/'.$zdjecia[$i]; 72. $rozmiar = getimagesize($nazwapliku); 73. print "<A HREF=\"galeria.php?dir=$dir&nr=$i\">"; 74. print "<IMG SRC=\"$nazwapliku\" ".$rozmiar[3]; 75. print "BORDER=1 HSPACE=5 VSPACE=5 ALIGN=absmiddle></A>"; 76. } 77. print "</p></div>"; 78. } else 81. {//w katalogu ma zdjec 82. print '<div align="center"><font size="4" face="arial CE, Arial, Helvetica"><a href="mailto:dgjm@wp.pl?subject=katalog-pusty-brakminiaturek-'.$dir.'">katalog jest pusty<br>kliknij POWIADOM AUTORA STRONY!</a><br><hr size="1"></font>'; }?> </BODY> 87. </HTML> 24/32

25 3. Skrypt konwertujący zdjęcia Dużym ułatwiem było używa skryptu php generującego on-line po stro serwera kod galerii. Jednak nadal pozostawało żmudne skalowa zdjęć do odpowiedgo rozmiaru skopiowa do odpowiednich folderów i wysła na serwer ftp. Pewnym ułatwiem było korzysta z programów do seryjnego skalowania grafiki, jednak nadal pozostawało ręczne tworze katalogów i kopiowa na serwer. Linux ma wbudowanych wiele kompilatorów różnych języków programowania, zaletą Linuksa jest rówż to, że można pisać skrypty w jego powłoce (shell), które możemy traktować jako programy wsadowe *.bat stosowane w systemie DOS. Dodatkowo większość programów pracujących w systemie Linux ma możliwość pracowania w trybie tekstowym dzięki czemu można łatwo użyć ich w skryptach.[kowal] Pisa skryptów w powłoce linuksowej jest bardzo pożyteczną rzeczą. Jest w pewnym sensie ułatwiem, poważ zamiast wpisywania szeregu poleceń, możemy wywołać skrypt, który zrobi to za nas. Mam tu na myśli np. sekwencje poleceń które możemy uruchomić wpisując nazwę skryptu. Skrypty mogą wyglądać bardzo róż, mogą ograniczać się do kilku linii lub mogą używać skomplikowanych pętli i warunków. Do pisania skryptów wystarczy edytor tekstowy np. gedit. Skrypt w pierwszej linii zawiera polece "*#!/bin/bash*" jest to odnośnik do shella w jakim piszemy. Skrypty uruchamiamy tak jak każdy inny program, aby go uruchomić należy mu nadać prawo wykonywalności (*chmod +x skrypt*). Tak jak w każdym języku programowania tak i w tym przypadku mamy do czynia ze zmiennymi, funkcjami, pętlami itp. [Kowal] W celu konwersji grafiki do mjszych rozmiarów wykorzystałem pakiet imagemagick, który umożliwia wykonywa różnych operacji na grafice typu skalowa, zmiana formatu itp. w trybie tekstowym. Napisany przeze m skrypt wykonuje następujące czynności: 1. Wyświetla zawartość zdefiniowanego katalogu www-fotki-duze, 2. W folderze www-gimnazjum/fotogaleria tworzy folder 'data/duze' 3. Otwiera plik zawierający spis galerii w celu dopisania nowej daty np. 'foto php', 4. Skaluje zdjęcia do rozmiaru 640x480 px, 5. Tworzy miniaturki o rozmiarze 96x72 px, 6. Prosi o hasło do serwera ftp, 7. Na serwerze tworzy odpowied katalogi, 8. Kopiuje przeskalowane zdjęcia do katalogu /fotogaleria/data/duze/, 25/32

26 9. Kopiuje miniaturki do katalogu /fotogaleria/data/, 10.Kopiuje plik ze spisem imprez 'foto php'. 11.Czeka na wciśnięcie klawisza enter aby użytkownik mógł zapoznać się z wyjściem konsoli, czy było błędów w trakcie działania skryptu. Uruchomiony skrypt wygląda następująco: Rysunek: Terminal z uruchomionym skryptem. System Ubuntu /32

27 Kod źródłowy skryptu: 1. #!/bin/bash 2. echo "#skrypt konwertuje zdjecia do rozmiaru 640x480 oraz miniaturki w rozmiarze 96x72" 3. echo "#skonwertowane zdjecia umieszcza na serwerze ftp" 4. echo "#przed pierwszym uruchomiem skryptu ustaw parametry!!!" 5. echo "#do poprwnej pracy wymaga pakietu 'imagemagick'" 6. echo "#w dystrybucji Ubuntu instalujemy polecem 'sudo aptget install imagemagick'" #katalog domowy 9. dom="/home/olek" 10. #nazwa pliku ze spisem imprez 11. plik="f php" 12. #nazwa serwera 13. host="alpha.tuchola.pl" 14. #nazwa uzytkownika 15. user="wwwgim" cd / 19. cd $home 20. cd www-fotki-duze 21. echo " " 22. echo "==> DOSTEPNE PODKATALOGI" 23. ls 24. echo " " 25. echo "==> PODAJ NAZWE KATALOGU: " read katalog echo "==> KATALOG:" 31. cd / 27/32

28 32. cd $home 33. cd www-gimnazjum/fotogaleria 34. mkdir $katalog 35. cd $katalog 36. pwd 37. mkdir duze cd / 40. cd $home 41. cd www-fotki-duze 42. cd $katalog echo "==> PLIKI DO SKONWERTOWANIA I SKOPIOWANIA:" 45. ls *.jpg -sh echo "==> DOPISZ ODNOSNIKI DO NOWEJ GALERII W PLIKU $plik" 48. gedit $dom/www-gimnazjum/fotogaleria/$plik echo "==> ABY KONTYNUOWAC NACISNIJ ENTER" 51. read pauza echo "==> TWORZENIE DUZYCH ZDJEC:" 54. for nazwa in *.jpg ; 55. do nice -5 convert $nazwa -verbose -strip -resize 640x480 $dom/www-gimnazjum/fotogaleria/$katalog/duze/$nazwa ; 56. done echo "==> TWORZENIE MINIATUREK:" 59. for nazwa in *.jpg ; 60. do nice -5 convert $nazwa -verbose -strip -resize 96x72 $dom/www-gimnazjum/fotogaleria/$katalog/$nazwa ; 61. done cd / 64. cd $home 28/32

29 65. cd www-gimnazjum/fotogaleria 66. cd $katalog echo "==> PODAJ HASLO DO SERWERA FTP, UWAGA BEDZIE WIDOCZNE!!" 69. read haslo echo "==> KOPIOWANIE MINIATUREK ZDJEC NA SERWER FTP: alpha.tuchola.pl" echo "open $host 74. user $user $haslo 75. cd /virt/gimnazjum.tuchola.pl/www/fotogaleria 76. mkdir $katalog 77. cd $katalog 78. mput *.* 79. bye 80. " ftp -n -i -v cd / 83. cd $home 84. cd www-gimnazjum/fotogaleria 85. cd $katalog 86. cd duze echo "==> KOPIOWANIE DUZYCH ZDJEC NA SERWER FTP: ftp alpha.tuchola.pl" echo "open $host 91. user $user $haslo 92. cd /virt/gimnazjum.tuchola.pl/www/fotogaleria/$katalog 93. mkdir duze 94. cd duze 95. mput *.* 96. bye 97. " ftp -n -i -v 29/32

30 cd / 100. cd $home 101. cd www-gimnazjum/fotogaleria echo "==> KOPIOWANIE PLIKU $plik NA SERWER FTP: alpha.tuchola.pl " echo "open $host 106. user $user $haslo 107. cd /virt/gimnazjum.tuchola.pl/www/fotogaleria/ 108. put $plik 109. bye 110. " ftp -n -i -v echo "==> KONIEC SKRYPTU! NACISNIJ ENTER" 113. read koc 30/32

31 4. Podsumowa Obec strony internetowe rozwijają się bardzo szybko. W chwili obecnej bardzo ciężko wyszukać wśród milionów stron potrzebne informacje. Szalone tempo tworzenia i publikowania w internecie stron WWW sprawia, że wiele z nich jest źle zaprojektowanych i spełnia swego podstawowego zadania, jakim jest prawidłowe funkcjonowa. Źle zaprojektowana strona WWW jest z jednej strony denerwująca dla użytkownika, z drugiej zaś źle świadczy o firmie, która ją wykonał oraz o jej właścicielu. Najczęściej strona funkcjonalna kojarzy się ze stroną brzydką, nudną, pozbawioną grafiki i animacji. Znalezie złotego środka między wyglądem strony a jej funkcjonalnością jest jak najbardziej możliwe. Najlepsze strony internetowe w doskonały sposób łączą ze sobą formę i treść, dzięki czemu strona jest jednocześ estetyczna i funkcjonalna. 31/32

32 5. Literatura 1. Mark Pearrow Funkcjonalność stron internetowych Wydawnictwo Helion Gliwice Joe Sklar Zasady tworzenia stron WWW Wydawnictwo RM 3. Jonathan Price, Lisa Price Profesjonalny serwis WWW Wydawnictwo Helion Gliwice Julie Adair King Grafika w sieci WWW. Proste rozwiązania Wydawnictwo Mikom Warszawa Jakob Nielsen Projektowa funkcjonalnych serwisów internetowych Wydawnictwo Helion Gliwice Edward Gaziński Liternictwo Wydawnictwo empi2 Poznań Andrzej Kierzkowski PHP 4 Ćwiczenia praktyczne Wydawnictwo Helion Gliwice Włodzimierz Macewicz "Język składu dokumentu hipertekstowego", Wydawnictwo Mikom, Warszawa CHIP SPECJAL Strony WWW bez tajemnic Grudzień CHIP SPECJAL Strony WWW bez sekretów Październik Marek Kuchciak Geneza i rozwój internetu Tomasz Kapelak Własna galeria w internecie Magazyn Internet Maj Radosław Przychoda Bash programowa w powłoce - dokument pdf 14.Artur Kowal - Wprowadze do programowania w bash-u 32/32