Artykuł pochodzi z czasopisma PHP Solutions. Do ściągnięcia bezpłatnie ze strony:

Wielkość: px
Rozpocząć pokaz od strony:

Download "Artykuł pochodzi z czasopisma PHP Solutions. Do ściągnięcia bezpłatnie ze strony: www.phpsolmag.org"

Transkrypt

1 Artykuł pochodzi z czasopisma PHP Solutions. Do ściągnięcia bezpłatnie ze strony: Bezpłatne kopiowanie i rozpowszechanie artykułu dozwolone pod warunkiem zachowania jego obecnej formy i treści.

2 Marcin Makarewicz Wykorzystanie biblioteki GD do generowania grafiki Automatyczne przygotowywanie grafik w alternatywnych rozmiarach czy dynamiczne generowanie wykresów to tylko niektóre z możliwości, jakie kryje w sobie biblioteka GD. Listingi zostały zamieszczone na płycie CD. Generowanie grafiki na stronach WWW daje wiele korzyści. Wszelkiego rodzaju wykresy umożliwiają o wiele lepszą interpretację przedstawionych danych niż np. tabele. Możliwości takiej prezentacji danych w formie graficznej oferuje między innymi biblioteka GD. Dzięki niej bez trudu możemy wygenerować wykres lub narysować figurę czy bryłę. Jeśli chcemy na naszych stronach umieszczać dynamicznie generowane rysunki, np. miniatury obrazków z możliwością wyboru ich rozmiarów czy statystki odwiedzin, to najlepiej i najprościej skorzystać właśnie z GD. Niestety trudno znaleźć w sieci, nie wspominając już o książkach, dobre opracowania, które przybliżałyby tę tematykę. Mamy nadzieje, że ten artykuł to ułatwi. Konfiguracja PHP i GD W systemie Windows musimy zadbać o to, żeby plik z biblioteką php_gd.dll znajdował się w katalogu, gdzie PHP trzyma swoje rozszerzenia, czyli w katalogu extensions, który generalnie umiejscowiony jest tam, gdzie zainstalowane zostało PHP. Następnie dokonujemy odpowiedniego wpisu w pliku php.ini: extension=php _ gd.dll.(od wersji PHP bibliotekę GD zastąpiła GD2 plik php_gd2.dll). W systemie Linux najlepiej Co należy wiedzieć? Czytelnik powinien posiadać podstawową znajomości PHP, w tym również obiektowych cech tego języka. Co obiecujemy? Z artykułu dowiesz się jak dokonywać operacji na obrazkach (rysowanie, zmiana wielkości) oraz w jaki sposób generować wykresy słupkowe PHP Solutions 3/2004

3 Listing 1. Osadzenie dynamicznie generowanego obrazka w kodzie HTML <HTML> <BODY> <IMG SRC="image.php? caption=caption" width="400" height="300" border="0"> </BODY> </HTML> wybrać pakiet GD podczas instalacji systemu. Jeśli kompilujemy PHP ręcznie, to podczas konfiguracji należy dodać:./configure --with-gd (oprócz --with-gd występują tu jeszcze inne, opcjonalne składniki, w zależności od wybranych przez nas opcji). Następnie kompilujemy PHP poleceniami make oraz make install. Na czym polega dynamiczne generowanie grafiki? Być może nie każdy wie, ale tak jak strona HTML może być dynamicznie generowana przez PHP, tak samo może być generowany każdy inny plik dowolnego formatu. Zamiast określać w kodzie HTML znaczniki odpowiadające obrazkom ze ścieżkami do plików graficznych na serwerze równie dobrze możemy umieścić zastępczo ścieżkę do skryptu PHP, który wygeneruje dane odpowiadające obrazkowi konkretnego formatu. Przeglądarce nie zrobi to większej różnicy. Tak więc obrazki będą generowane dynamicznie przez skrypt PHP, a wyświetlać je będzie przeglądarka internetowa. Jeśli obrazki mamy zamiar umieścić na stronie HTML (która może być oczywiście wygenerowana przez PHP), element IMG będzie posiadał przypisaną atrybutowi SRC ścieżkę do skryptu generującego grafikę. W ścieżce możemy Listing 2. Napis i rysunek na obrazku stworzone za pomocą GD plik image.php //odczytujemy obrazek z pliku jpg $image = imagecreatefromjpeg('images/civic_full.jpg'); //alokujemy kolory które wykorzystamy dalej $white = ImageColorAllocate($image, 255, 255, 255); $black = ImageColorAllocate($image, 0, 0, 0); $red = ImageColorAllocate($image, 255, 0, 0); //określamy treść napisu na obrazku $caption = $_GET['caption']?$_GET['caption']:"civic"; //odczytujemy rozmiary obrazka $width = imagesx($image); $height = imagesy($image); //rysujemy na całej szerokości poziomą linię imageline($image, 0, $height/2, $width, $height/2, $red); $count = 10; //pętla odpowiedzialna za rysowanie czworokątów for($i=1; $i<$count; $i++) //tablica współrzędnych wierzchołków (x0, y0, x1, y1,...) $points = Array($width*(1-$i/$count)/2, $height*(1-$i/$count)/2, $width*(1-$i/$count)/2, $height*(1+$i/$count)/2, $width*(1+$i/$count)/2, $height*(1+$i/$count)/2, $width*(1+$i/$count)/2, $height*(1-$i/$count)/2); ); //rysujemy wielokąt na podstawie współrzędnych punktów w tablicy imagepolygon($image, $points, sizeof($points)/2, $black); //umieszczamy tekst w centralnej części obrazka imagestring($image, 10, $width/2, $height/2, $caption, $white); //definiujemy nagłówek, określając typ danych wyjściowych header("content-type: image/png"); //generujemy obrazek imagepng($image); //zwalniamy pamięć zajętą przez obrazek imagedestroy($image);?> Rysunek 1. Zmodyfikowany obrazek Listing 2 PHP Solutions 3/

4 Techniki Listing 3. Wczytanie obrazka źródłowego z odpowiednim skalowaniem plik thumb.php (1/2) if($_get['width'] > 0) $width = $_GET['width']; else $width = 200; if($_get['height'] > 0) $height = $_GET['height']; else $height = 200; if($_get['filename']) $filename = $_GET['filename']; else $filename = 'civic.jpg'; //obrazek z pliku jpg $src_image = imagecreatefromjpeg($filename); $image = imagecreate($width, $height); //alokujemy kolory, które wykorzystamy dalej $bg = imagecolorallocate($image, 200, 200, 200); $white = imagecolorallocate($image, 255, 255, 255); $black = imagecolorallocate($image, 0, 0, 0); $margin_x = 10; $margin_y = 10; $w = $width-2*$margin_x; $h = $height-2*$margin_y; $src_w = imagesx($src_image); $src_h = imagesy($src_image); //czy wyświetlamy w oryginalnych rozmiarach if(($w > $src_w) && ($h > $src_h)) $dst_w = $src_w; $dst_h = $src_h; else //czy skalujemy względem wymiaru poziomego if(($w/$h) < ($src_w/$src_h)) $dst_w = $w; $dst_h = $w*$src_h/$src_w; else... Rysunek 2. Katalog obrazków Listing 4. Plik thumb.php (2/2)...?> //czy skalujemy względem wymiaru //pionowego $dst_w = $h*$src_w/$src_h; $dst_h = $h; imagecopyresized($image, $src_image, ($width-$dst_w)/2, ($height-$dst_h)/2, 0, 0, $dst_w, $dst_h, $src_w, $src_h); //umieszczamy tekst na obrazku imagestring($image, 0,$margin_x, ($height-$margin_y), $filename, $white); //odpowiedni nagłówek dla danych //wyjściowych header("content-type: image/jpeg"); //generujemy obrazek imagejpeg($image); //zwalniamy pamięć imagedestroy($image); oczywiście określić zmienne, od których może zależeć wyświetlany obrazek patrz Listing 1. GD umożliwia tworzenie obrazka o z góry zadanej rozdzielczości funkcja imagecreate(), jak również pozwala na wczytanie określonego formatu obrazka z pliku odpowiednio (w zależności od formatu pliku graficznego) funkcje imagecreatefromjpeg(), imagecreatefrompng() itp. Obsługiwane formaty obrazków zależą od wersji biblioteki GD oraz PHP. Na początek przedstawimy kilka podstawowych funkcji. Wczytamy obrazek z pliku, a następnie narysujemy na nim pewne elementy graficzne. Wykorzystując funkcję do rysowania linii imageline(), umieścimy kreskę o wcześniej ustalonej grubości imagesetthickness(). Dodatkowo na obrazku zamieścimy tekst za pomocą funkcji imagestring(). Funkcji do pisania tekstów jest kilka, odpowiadają za wykorzystanie różnych formatów czcionek. Aby obrazek został poprawnie wyświetlony określamy nagłówek odpowiednio do generowanego formatu obrazka header("content-type: image/ png"). W przypadku systemu Linux, odpowiednie typy plików możemy znaleźć najczęściej w pliku /etc/mime.types. Jeśli udało się nam napisać skrypt bezbłędnie, obrazek powinien ukazać 60 PHP Solutions 3/2004

5 Generowanie grafiki się w oknie przeglądarki po wpisaniu adresu URL skryptu. Ważne jest, aby skrypt zwrócił przeglądarce tylko to, co wygeneruje w naszym przypadku funkcja imagepng(). Warto zwrócić uwagę na to, żeby znaczniki oraz?> były umieszczone odpowiednio na samym początku skryptu i na jego końcu, a poza nimi nie było żadnych znaków (znaków końca linii czy spacji). W przeciwnym razie przeglądarka otrzyma dodatkowe dane, przez co format nie będzie poprawnie zinterpretowany. Na Rysunku 1 widać efekt działania skryptu, którego kod znajduje się na Listingu 2. Katalog obrazków miniatury Na stronach WWW często spotyka się miniatury obrazków. Przeważnie stanowią one łącze do analogicznego obrazu w pełnej rozdzielczości. Zastosowanie miniatur jako obrazków przeglądowych ma wiele zalet. Jest nieodzownym elementem w przypadku katalogów obrazków czy galerii zdjęć. Wyszukanie konkretnego obrazka jest łatwiejsze, aniżeli przeglądanie kolejno zdjęć w pełnej rozdzielczości, w szczególności dla użytkowników Internetu korzystających z łącza o małej przepustowości. W przypadku stron prezentujących informacje, metoda taka pozwala na estetyczne wkomponowanie miniatur w treści serwisów, których czytelnicy mogą nie być w ogóle zainteresowani zdjęciami. Przygotowanie grafik w alternatywnych rozmiarach z wykorzystaniem programów graficznych może być bardzo pracochłonne. Z wykorzystaniem biblioteki GD możemy to zrobić automatycznie. Zdjęcia mogą mieć oczywiście różne proporcje i rozmiary. Nasz przykład tworzy miniaturki obrazków o określonych rozmiarach, zachowując przy tym proporcje obrazów źródłowych. Przyjęte zostały przy tym założenia: skala obrazka określana jest tak, aby cały był widoczny (nie był przycinany), jeśli obrazek źródłowy jest mniejszy od wybranych rozmiarów nie jest skalowany (powiększany). Zacznijmy od wczytania obrazka źródłowego Listing 3 (thumb.php). Funkcje imagesx(), imagesy() pozwalają na odczytanie jego rozmiarów. Następ- Listing 5. Plik catalog.php <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD><TITLE> Images </TITLE></HEAD><BODY> //określamy nazwę skryptu generującego obrazki $image = 'thumb.php'; //określamy szerokość obrazków na podstawie parametru width if($_get['width'] > 0) $width = $_GET['width']; else $width = 200; //określamy wysokość obrazków na podstawie parametru height if($_get['height'] > 0) $height = $_GET['height']; else $height = 200; //generujemy formularz wyboru rozmiarów grafik przeglądowych echo '<FORM ACTION="'.$_SERVER['SCRIPT_NAME'].'" METHOD="GET">'; echo '<SELECT NAME="width">'; echo '<OPTION VALUE="">-- width --</OPTION>'; for($i=100; $i<700; $i+=100) echo '<OPTION VALUE="'.$i.'"'; if($i == $width) echo ' SELECTED'; echo '>'.$i.'</option>'; echo '</SELECT>'; echo '<SELECT NAME="height">'; echo '<OPTION VALUE="">-- height --</OPTION>'; for($i=100; $i<700; $i+=100) echo '<OPTION VALUE="'.$i.'"'; if($i == $height) echo ' SELECTED'; echo '>'.$i.'</option>'; echo '</SELECT>'; echo '<INPUT TY PE="SUBMIT" VALUE=" SHOW ">'; echo '</FORM>'; //definiujemy nazwę katalogu, w którym znajdują się obrazki $path = 'images/'; $dir = opendir('images'); //czytamy zawartość katalogu while ($file = readdir($dir)) //wybieramy tylko pliki z rozszerzeniem.jpg if(is_file($path.$file) && preg_match("/\.jpg$/i", $file)) //generujemy link do oryginalnego obrazka echo '<A HREF="'.$path.$file.'" TARGET="_blank">'; //osadzamy obrazek ze sciezką do skryptu generującego //grafiki przeglądowe echo '<IMG SRC="'.$image.'?filename='.$path.$file.' &width='.$width.'&height='.$height.'" WIDTH="'.$width.'" HEIGHT="'.$height.'" BORDER="1" HSPACE="8" VSPACE="8">'; echo '</A>'; //zamykamy deskryptor closedir($dir);?></body></html> PHP Solutions 3/

6 Techniki Listing 6. Plik Chart.class.php (1/2)... class Chart var $image; //identyfikator obrazka var $title = 'Chart'; //tytuł wykresu var $width = 800; //szerokość obrazka wynikowego var $height = 600; //wysokość obrazka wynikowego var $margin_x = 40; //margines poziomy var $margin_y = 40; //margines pionowy var $bar_w = 0.8; //stosunek szerokości kolumn do odległości między nimi var $bar_color = Array(100, 160, 200); //kolor kolumn var $text_color = Array(0, 0, 0); //kolor tekstu var $grid_color = Array(240, 240, 200); //kolor siatki var $_x_min; //minimalna wartość x przestrzeni wykresu var $_x_max; //maksymalna wartość x przestrzeni wykresu var $_y_min; //minimalna wartość y przestrzeni wykresu var $_y_max; //maksymalna wartość y przestrzeni wykresu var $_range_w; //szerokość przestrzeni wykresu var $_range_h; //wysokość przestrzeni wykresu //Metoda draw - generuje obrazek //jako argument przekazujemy tablice wartosci function draw($series) //tworzymy obrazek o zadanej szerokości i wysokości $this->image = imagecreate($this->width, $this->height); //alokacja koloru, który stanie się kolorem tła $this->translatecolor(); //wyznaczamy przestrzeń wykresu $this->calcrange($series); //rysujemy siatkę $this->drawgrid(); //nanosimy kolejne wartości na wykres foreach($series as $x=>$y) $this->setvalue($x, $y); //umieszczamy tytuł wykresu imagestring($this->image, 5, $this->margin_x/2, $this->margin_y/2, $this->title, $this->translatecolor($this->text_color)); header("content-type: image/png"); imagepng($this->image); imagedestroy($this->image); exit; //Metoda drawgrid - rysuje siatkę na obrazku //argumentem może być odległość pomiędzy //kolejnymi liniami function drawgrid($size = 20) $y = $size*round($this->_y_min/$size) - $size; while($y < ($this->_y_max + $size)) // wyliczamy kolejne wartości y $y0 = $this->translatecoordy($y); // rysujemy poziome linie imageline($this->image, 0, $y0, $this->width, $y0, $this->translatecolor($this->grid_color)); $y += $size; //Metoda setvalue - rysuje prostokąt na podstawie //zadanych wartości //argumenty to wartości x i y function setvalue($x, $y) nie tworzymy nowy obrazek, którego rozmiary będą odpowiadać grafice wynikowej. Na podstawie rozmiarów obrazka źródłowego decydujemy, czy obrazek będzie skalowany, a jeśli tak to względem którego wymiaru. Nie skalujemy obrazka w sytuacji, kiedy jego szerokość i wysokość są mniejsze niż rozmiary pola, w jakim zostanie umieszczony. W przeciwnym razie przy powiększeniu powstałby nieprzyjemny efekt wielkich pikseli. W przypadku galerii zdjęć, możemy wykorzystać nasze umiejętności nie tylko do tworzenia grafik przeglądowych, ale również do prostych modyfikacji obrazków. Możemy stworzyć swego rodzaju szablon, według którego każdy obrazek w naszym serwisie będzie posiadał charakterystyczną ramkę lub zostanie oznaczony naszym logo. Ale to już zostawiamy do eksperymentów czytelników. Efekt widoczny na Rysunku 2 jest wynikiem działania skryptów thumb.php oraz catalog.php. Skrypt catalog.php (patrz Listing 5) generuje HTML z formularzem do wyboru rozmiarów miniatur oraz obrazki przeglądowe. Generowanie wykresów Generalnie najczęściej przyjętymi formami zestawiania danych są tabele oraz wykresy. Zestawienie danych na wykresie pozwala na ich niewątpliwie łatwiejszą interpretację. Trudno wyobrazić sobie lepszy sposób na wizualizację dużej ilości danych i różnego rodzaju zależności (np. kształtowania się kursów walut) niż dynamicznie generowane wykresy. W naszym przykładzie zajmiemy się tworzeniem wykresu słupkowego. Na Listingu 6 przedstawiona została klasa, umożliwiająca tworzenie wykresu na podstawie danych umieszczonych w tablicy. Po tym pokażemy jak można ją rozszerzyć, aby wykresy miały bardziej atrakcyjną formę. Tworzenie klasy Chart zaczniemy do zdefiniowania właściwości: image identyfikator obrazka, width, height rozmiary wynikowej grafiki, margin _ x, margin _ y marginesy, _ x _ min, _ x _ max, _ y _ min, _ y _ max ograniczenia przestrzeni wykresu, _ range _ w, _ range _ h szerokość i wysokość przestrzeni wykresu PHP Solutions 3/2004

7 Generowanie grafiki Podstawową metodą będzie draw(), której wywołanie pozwoli wygenerować grafikę. Argumentem jej wywołania będzie tablica zawierająca serię danych do prezentacji. Aby odpowiednio rozmieścić wartości na wykresie, stworzymy metodę wyznaczającą ich zakres calcrange() oraz metody, które pozwolą rzutować punkty przestrzeni wykresu na określony obszar obrazka wynikowego translatecoordx() i translatecoordy(). Zabiegi te zagwarantują prezentację serii danych w stosownym miejscu, bez potrzeby uprzedniego ich dostosowywania. Metoda setvalue() posłuży do naniesienia konkretnej wartości na wykres przez narysowanie słupka o określonej wysokości. Do wyboru koloru wykorzystamy metodę translatecolor(), która będzie odpowiedzialna za jego alokację. Na Listingu 8 (chart.php) został przedstawiony przykład wykorzystania klasy Chart., a efekt zobrazowany jest Rysunku 3. W przykładzie utworzony został obiekt Chart, następnie wypełniono tablicę danych losowymi wartościami z przedziału (-200, 200). Wykres został narysowany przez wywołanie metody draw(). Możemy również w bardziej efektowny sposób wykorzystać naszą klasę Chart i narysować podobny, ale bardziej zaawansowany wykres patrz Listing 9. Efekt działania skryptu chart2.php widzimy na Rysunku 4. W pliku chart2.php dodatkowo rozszerzymy klasę Chart przeciążając przy tym metody setvalue() i translatecolor(). W tym wypadku dla lepszych efektów wizualizacji posłużymy się cieniami i odpowiednio rozjaśnionymi kolorami. Słupki narysujemy z obwódkami, aby były bardziej rozróżnialne. Metody klasy Chart Metoda draw(). Jak już wcześniej wspomniano, argumentem wywołania tej metody jest seria danych tablica wartości. Na początku tworzymy obrazek o szerokości width i wysokości height. Wybieramy kolor, który będzie kolorem tła obrazka translatecolor(), przy czym bez podania argumentu otrzymujemy kolor biały. Następnie wyznaczona jest przestrzeń wykresu metoda calcrange(). Siatka zostaje naniesiona przez wywołanie metody drawgrid(). Słupki odpowiadające wartościom są rysowane przez wywołanie metody setva- Listing 7. Plik Chart.class.php (2/2)... //określamy wszystkie współrzędne prostokąta o szerokości bar_w $p = Array( ($x-$this->bar_w/2), $y, ($x+$this->bar_w/2), $y, ($x+$this->bar_w/2), 0, ($x-$this->bar_w/2), 0 ); //przekształcamy je na współrzędne obrazka $r = $this->translatepoly($p); //rysujemy prostokąt imagefilledpolygon($this->image, $r, sizeof($r)/2, $this->translatecolor($this->bar_color)); //Metoda calcrange - wyznacza przestrzeń wykresu //argumentem jest tablica wartości function calcrange($series) //zaczynamy od początku układu współrzędnych $this->_x_min = 0; $this->_y_min = 0; $this->_x_max = 1; $this->_y_max = 1; foreach($series as $x=>$y) //zmieniamy zakres w zależności od wartości if($x >= $this->_x_max) $this->_x_max = $x; if($x < $this->_x_min) $this->_x_min = $x; if($y >= $this->_y_max) $this->_y_max = $y; if($y < $this->_y_min) $this->_y_min = $y; //określamy szerokość i wysokość wykresu $this->_range_w = $this->_x_max-$this->_x_min; $this->_range_h = $this->_y_max-$this->_y_min; //Metoda translatepoly - rzutuje punkty przestrzeni //wykresu na obszar obrazka, //argumentem jest tablica kolejnych punktów x, y function translatepoly($p) $r = Array(); for($i=0; $i<sizeof($p); $i+=2) //przekształcamy kolejno punkty $r[] = $this->translatecoordx($p[$i]); $r[] = $this->translatecoordy($p[$i+1]); return $r; //Metody translatecoordx i translatecoordy przekształcają //odpowiednio współrzędne wykresu //argumentem jest wartość odpowiednio x i y //metoda zwraca wartość współrzędnej dla obszaru obrazka function translatecoordx($x) return round($this->margin_x+($this->width-2* $this->margin_x)*($x-$this->_x_min)/ $this->_range_w); function translatecoordy($y) return round($this->margin_y-($this->height-2* $this->margin_y)*($y-$this->_y_max)/ $this->_range_h); //Metoda translatecolor - pozwala uzyskać identyfikator //koloru, argumentem jest tablica składowych odpowiednio //RGB, metoda zwraca identyfikator koloru function translatecolor($rgb = Array(255, 255, 255)) return imagecolorallocate($this->image, $rgb[0], $rgb[1], $rgb[2]);?> PHP Solutions 3/

8 Listing 8. Plik chart.php require('chart.class.php'); //liczba wartości $count = 32; //obiekt Chart $chart = new Chart(); //tworzymy tablice kolejnych //wartości losowych $array = Array(); for($i=0; $i<$count; $i++) $array[] = rand(-200, 200); //nanosimy wartości //i generujemy obraz $chart->draw($array);?> Rysunek 3. Efekt działania skryptu chart.php Techniki Rysunek 4. Efekt działania skryptu chart2.php lue() w pętli, przy czym argumentami są odpowiednio klucz i wartość elementów tablicy danych. Dalej umieszczany jest tytuł wykresu w określonym kolorze. Na koniec wysyłany jest nagłówek i wygenerowany zostaje obrazek do wyświetlenia. Przed zakończeniem skryptu zwalniany jest obszar pamięci zajmowany przez obrazek. Metoda calcrange(). Niniejsza metoda pozwala wyznaczyć zakres danych. Jako, że przestrzeń wykresu nie może być pusta zaczynamy od przyjęcia, że pole ma rozmiary 1 na 1. W pętli analizujemy kolejne wartości i odpowiednio rozszerzamy tę przestrzeń. Po wyznaczeniu minimalnych i maksymalnych wartości określamy szerokość i wysokość tej przestrzeni. Metody translatecoordx() i translatecoordy(). Metody te służą do określenia współrzędnych piksela na obrazku dla określonego elementu tablicy danych, czyli dla odpowiedniego klucza i wartości otrzymujemy współrzędną x i y punktu. Jest to pewnego rodzaju odwzorowanie, dzięki któremu możemy rzutować punkty z przestrzeni wykresu na ograniczony obszar obrazka. Uwzględniamy przy tym przypisane obrazkowi marginesy. Metoda translatepoly(). Jest to pomocnicza metoda, która ułatwia rzutowanie na obszar obrazka wielu kolejnych punktów. Wartości x i y pierwszego punktu są pierwszym i drugim elementem w tablicy, trzecim i czwartym elementem są współrzędne kolejnego punktu itd. Metoda została wprowadzona z myślą o rysowaniu wieloboków (imagepolygon() i imagefilledpolygon()), gdzie jest identyczna konwencja zapisu współrzędnych punktów. Metoda translatecolor(). Argumentem wywołania metody jest tablica trzech elementów składowych R (czerwony), G (zielony), B (niebieski) koloru. Zwracany jest identyfikator odpowiadającego koloru. Metoda drawgrid(). Opcjonalnym argumentem wywołania tej metody jest wartość, co którą ma być umieszczona pozioma linia. Linie są nanoszone w pętli w ten sposób, aby pierwsza znajdowała się poniżej najmniejszej wartości słupka, a ostatnia powyżej poziomu słupka o największej wartości. Oczywiście pomiędzy nimi musi się znaleźć linia odpowiadająca poziomej osi wykresu. Linie rozciągają się na całą szerokość obrazka. Metoda setvalue(). Jest to metoda odpowiedzialna za rysowanie słupków odpowiadających kolejnym wartościom wykresu. Słupek jest prostokątem o szerokości zdefiniowanej przez właściwość bar _ w. Pozycja x i poziom y jest zależny od klucza i wartości elementu w tablicy zawierają PHP Solutions 3/2004

9 Generowanie grafiki Listing 9. Plik chart2.php (1/2)... require('chart.class.php'); class CChart extends Chart var $shadow_color = Array(0, 0, 0); // kolor cienia var $shadow_size = 2; //przesunięcie cienia //Metoda setvalue - rysuje prostokąt na podstawie //zadanych wartości, argumenty to wartości x i y function setvalue($x, $y) //określamy wszystkie współrzędne prostokąta $x0 = $this->translatecoordx($x-$this->bar_w/2); $y0 = $this->translatecoordy($y); $x1 = $this->translatecoordx($x+$this->bar_w/2); $y1 = $this->translatecoordy(0); //przesuwamy współrzędne dla uzyskania efektu cienia $r = Array( $x0+$this->shadow_size, $y0+$this->shadow_size, $x0+$this->shadow_size, $y1, $x1+$this->shadow_size, $y1, $x1+$this->shadow_size, $y0+$this->shadow_size ); //rysujemy cień imagefilledpolygon($this->image, $r, sizeof($r)/2, $this->translatecolor($this->shadow_color)); //określamy kolor o jasności zależnej od wartości //i barwie zależnej od położenia względem osi if($y < 0) $bar_color_id = $this->translatecolor (Array(170, 255, 0), 1-$y/$this->_y_min); else $bar_color_id = $this->translatecolor (Array(0, 135, 200), 1-$y/$this->_y_max); $r = Array($x0, $y0, $x0, $y1, $x1, $y1, $x1, $y0); //rysujemy wypełniony prostokąt imagefilledpolygon($this->image, $r, sizeof($r)/2, $bar_color_id); //rysujemy ramkę na prostokącie imagepolygon($this->image, $r, sizeof($r)/2, $this->translatecolor($this->shadow_color)); //opisujemy wartość uwzględniając położenie if($y < 0) imagestring($this->image, 0, $x0, $y0+4, $y, $this->translatecolor($this->text_color)); else imagestring($this->image, 0, $x0, $y0-10, $y, $this->translatecolor($this->text_color)); cej serię danych. Zdefiniowane współrzędne są rzutowane na obszar obrazka, po czym naniesiony zostaje wielokąt co w naszym przypadku odpowiada prostokątowi. Rozszerzenie klasy Chart CChart Klasa CChart jest rozszerzeniem klasy Chart polegającym na zmianie sposobu nanoszenia słupków, dodającym Listing 10. Plik chart2.php (2/2)... //Metoda translatecolor - //pozwala uzyskać identyfikator //koloru odpowiednio //rozjaśnionego //argumentem jest tablica //składowych RGB koloru i //stopień rozjaśnienia koloru //metoda zwraca identyfikator //koloru function translatecolor($rgb = Array(255, 255, 255), $p=0) if($p>255) $p = 255; else if($p<0) $p = 0; //wyliczamy wartości //poszczególnych składowych //koloru $r = round($rgb[0]+ (255-$rgb[0])*$p); $g = round($rgb[1]+ (255-$rgb[1])*$p); $b = round($rgb[2]+ (255-$rgb[2])*$p); return imagecolorallocate ($this->image, $r, $g, $b); //liczba wartości $count = 32; //obiekt Chart $chart = new CChart(); //tworzymy tablice kolejnych //wartości losowych $array = Array(); for($i=0; $i<$count; $i++) $array[] = rand(-200, 200); //nanosimy wartości i generujemy //obraz $chart->draw($array);?> przy tym zmianę odcienia koloru w zależności od odpowiadającej mu wartości. Zostały tutaj przeciążone metody setvalue() i translatecolor(). Dodane zostały również dwie nowe właściwości shadow _ color oraz shadow _ size. Metoda translatecolor(). Metoda jest zmodyfikowana w stosunku do jej pierwotnej wersji. Różnica polega na wprowadzeniu wagi, będącej drugim argumentem wywołania metody. Waga określa stopień rozjaśnienia koloru, przy czym wartość 1 da nam kolor biały, zaś wartość 0 nie wpłynie na kolor. PHP Solutions 3/

10 wego prostokąta, uwzględniając przy tym odpowiadającą słupkowi wartość. W zależności od tego czy wartość jest dodatnia czy ujemna wybieramy jeden z dwóch kolorów, po czym rozjaśniamy go mniej dla wartości większych, bardziej dla wartości mniejszych. Do tego rysujemy jeszcze ramkę wyróżniającą krawędzie. Na koniec umieszczamy stosownie nad lub pod słupkiem wartość w postaci liczbowej. Rysunek 5. Rzutowanie punktów przestrzeni na obszar obrazka Metoda setvalue(). Na początku wyznaczamy współrzędne punktów odpowiadających wierzchołkom słupka. Odpowiednio je modyfikując rysujemy prostokąt dający efekt cienia. Następnie wyznaczamy kolor właści- Podsumowanie Opisane przykłady generowania grafiki pokazują jak efektownie można zaprezentować dane, czy przeprowadzać modyfikacje na gotowych obrazkach. Artykuł nie zamyka tematu i mamy nadzieję, że zaciekawił czytelników na tyle, aby część z nich pokusiła się o eksperymentowanie we własnym zakresie. Wykorzystanie GD nie jest trudne, a daje ogromne możliwości uzyskania ciekawych efektów na własnej stronie WWW PHP Solutions 3/2004

Być może jesteś doświadczonym programistą, biegle programujesz w Javie,

Być może jesteś doświadczonym programistą, biegle programujesz w Javie, Kompendium PHP 01 Być może jesteś doświadczonym programistą, biegle programujesz w Javie, C++, Pythonie lub jakimś innym języku programowania, których jak myślę, powstało już tyle, że chyba nie ma osoby,

Bardziej szczegółowo

I. Wstawianie rysunków

I. Wstawianie rysunków I. Wstawianie rysunków Wstawiane rysunku Bez parametrów: Tekst alternatywny Tytuł obrazka

Bardziej szczegółowo

7. Dynamiczne generowanie grafiki

7. Dynamiczne generowanie grafiki 7. Dynamiczne generowanie grafiki 7.1. Biblioteka GD Dynamiczne generowanie kodu HTML to podstawowe zastosowanie języka PHP. Często jednak to nie wystarczy i mieszanka: dynamiczny HTML plus statyczna grafika,

Bardziej szczegółowo

Ćwiczenie 1 Galeria zdjęć

Ćwiczenie 1 Galeria zdjęć Galeria zdjęć Pobierz przykład (http://jsekulska.kis.p.lodz.pl/studia.htm). Krok 1 Ustawienie stołu montażowego Otwieramy nowy plik i nazywamy go (np. gallery.fla). Ustawiamy wielkość pola roboczego na

Bardziej szczegółowo

Sigplus. Galeria w Joomla

Sigplus. Galeria w Joomla Sigplus Galeria w Joomla Cel prezentacji Pokazanie że Sigplus jest prosty w konfiguracji; Metody konfiguracji Sigplusa; Jest jednym z najczęściej używanych dodatków w tworzeniu galerii na stronie internetowej

Bardziej szczegółowo

Kurs WWW. Paweł Rajba. pawel@ii.uni.wroc.pl http://pawel.ii.uni.wroc.pl/

Kurs WWW. Paweł Rajba. pawel@ii.uni.wroc.pl http://pawel.ii.uni.wroc.pl/ Paweł Rajba pawel@ii.uni.wroc.pl http://pawel.ii.uni.wroc.pl/ Spis treści Obsługa obrazków w PHP Wprowadzenie Tworzenie i niszczenie obrazka Kolory Funkcje od obsługi obrazków - 1 - Wprowadzenie Przygotowanie

Bardziej szczegółowo

Tworzenie prezentacji w MS PowerPoint

Tworzenie prezentacji w MS PowerPoint Tworzenie prezentacji w MS PowerPoint Program PowerPoint dostarczany jest w pakiecie Office i daje nam możliwość stworzenia prezentacji oraz uatrakcyjnienia materiału, który chcemy przedstawić. Prezentacje

Bardziej szczegółowo

Instrukcja obsługi funkcji specjalnych szablonu C01 v.1.0

Instrukcja obsługi funkcji specjalnych szablonu C01 v.1.0 Instrukcja obsługi funkcji specjalnych szablonu C01 v.1.0 UWAGA 1: Przed dokonaniem jakichkolwiek zmian, zalecamy skopiować wcześniej kod html modułu do pliku na lokalnym dysku. W przypadku problemów ułatwi

Bardziej szczegółowo

Laboratorium 7 Blog: dodawanie i edycja wpisów

Laboratorium 7 Blog: dodawanie i edycja wpisów Laboratorium 7 Blog: dodawanie i edycja wpisów Dodawanie nowych wpisów Tworzenie formularza Za obsługę formularzy odpowiada klasa Zend_Form. Dla każdego formularza w projekcie tworzymy klasę dziedziczącą

Bardziej szczegółowo

Zajęcia 10 obsługa formularzy w PHP

Zajęcia 10 obsługa formularzy w PHP Zajęcia 10 obsługa formularzy w PHP Przekazywanie danych ze strony do skryptu PHP Dane ze strony WWW do skryptu PHP przekazujemy za pomocą formularzy. W tym celu musimy stworzyć formularz (znacznik ),

Bardziej szczegółowo

Rys.2.1. Drzewo modelu DOM [1]

Rys.2.1. Drzewo modelu DOM [1] 1. CEL ĆWICZENIA Celem ćwiczenia jest przedstawienie możliwości wykorzystania języka JavaScript do tworzenia interaktywnych aplikacji działających po stronie klienta. 2. MATERIAŁ NAUCZANIA 2.1. DOM model

Bardziej szczegółowo

Tworzenie szablonów użytkownika

Tworzenie szablonów użytkownika Poradnik Inżyniera Nr 40 Aktualizacja: 12/2018 Tworzenie szablonów użytkownika Program: Plik powiązany: Stratygrafia 3D - karty otworów Demo_manual_40.gsg Głównym celem niniejszego Przewodnika Inżyniera

Bardziej szczegółowo

WIZUALIZACJA INFORMACJI TEKSTOWEJ WSTĘP DO HTML 5 CANVAS

WIZUALIZACJA INFORMACJI TEKSTOWEJ WSTĘP DO HTML 5 CANVAS WIZUALIZACJA INFORMACJI TEKSTOWEJ WSTĘP DO HTML 5 CANVAS Autor prezentacji: Michał Kołkowski Promotor: prof dr. hb. Włodzisław Duch SPIS TREŚCI 1. Ogólnie o Canvasie 2. Utworzenie szablonu do pracy z Canvas

Bardziej szczegółowo

Wprowadzenie do języka HTML

Wprowadzenie do języka HTML Radosław Rudnicki (joix@mat.umk.pl) 05.09.2009 r. Wprowadzenie do języka HTML Do tworzenia stron internetowych wystarczy użyd zwykłego Notatnika oferowanego przez system Windows, czy dowolny inny system

Bardziej szczegółowo

Laboratorium 6 Tworzenie bloga w Zend Framework

Laboratorium 6 Tworzenie bloga w Zend Framework Laboratorium 6 Tworzenie bloga w Zend Framework Przygotowanie bazy danych 1. Wykonaj skrypt blog.sql, który założy w bazie danych dwie tabele oraz wpisze do nich przykładowe dane. Tabela blog_uzytkownicy

Bardziej szczegółowo

Tabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER="1"> <TR>

Tabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER=1> <TR> Tabele Autorem niniejszego skryptu jest dr inż. Robert Kolud Tabele w HTML to nie tylko praktyczny sposób na przedstawianie zestawień informacji. Znacznie częściej jednak tabele są wygodnym narzędziem

Bardziej szczegółowo

Jak ustawić cele kampanii?

Jak ustawić cele kampanii? Jak ustawić cele kampanii? Czym są cele? Jest to funkcjonalność pozwalająca w łatwy sposób śledzić konwersje wygenerowane na Twojej stronie www poprzez wiadomości email wysłane z systemu GetResponse. Mierzenie

Bardziej szczegółowo

Podstawy technologii WWW

Podstawy technologii WWW Podstawy technologii WWW Ćwiczenie 8 PHP, czyli poczatki nowej, dynamicznej znajomosci Na dzisiejszych zajęciach rozpoczniemy programowanie po stronie serwera w języku PHP. Po otrzymaniu żądania serwer

Bardziej szczegółowo

Grafika PHP dla początkujących

Grafika PHP dla początkujących Instrukcja numer 03 Grafika PHP dla początkujących Zaawansowane techniki tworzenie stron WWW Dynamiczne tworzenie obrazków w PHP zadanie_10.php

Bardziej szczegółowo

Tekst na mapach. Teksty na mapie. Ustawienia mapy. W tej instrukcji zostanie opisany sposób w jaki można na mapach wyświetlać teksty

Tekst na mapach. Teksty na mapie. Ustawienia mapy. W tej instrukcji zostanie opisany sposób w jaki można na mapach wyświetlać teksty Teksty na mapie W tej instrukcji zostanie opisany sposób w jaki można na mapach wyświetlać teksty Dane z programu Agrinavia Field Na mapach utworzonych w Agrinavia Map możemy wyświetlać informacje z programu

Bardziej szczegółowo

Multimedia i interfejsy. Ćwiczenie 5 HTML5

Multimedia i interfejsy. Ćwiczenie 5 HTML5 Multimedia i interfejsy Ćwiczenie 5 HTML5 Celem ćwiczenia jest poznanie nowych elementów wprowadzonych w HTML 5, do których należą m.in. video oraz canvas. Poniższy opis przedstawia sposób użycia tych

Bardziej szczegółowo

Dodawanie grafiki i obiektów

Dodawanie grafiki i obiektów Dodawanie grafiki i obiektów Word nie jest edytorem obiektów graficznych, ale oferuje kilka opcji, dzięki którym można dokonywać niewielkich zmian w rysunku. W Wordzie możesz zmieniać rozmiar obiektu graficznego,

Bardziej szczegółowo

Część II Wyświetlanie obrazów

Część II Wyświetlanie obrazów Tło fragmentu ABA-X Display jest wyposażony w mechanizm automatycznego tworzenia tła fragmentu. Najprościej można to wykonać za pomocą skryptu tlo.sh: Składnia: tlo.sh numer oznacza numer

Bardziej szczegółowo

autor poradnika - KS Jak zamieszczać i edytować artykuły na szkolnej stronie internetowej

autor poradnika - KS Jak zamieszczać i edytować artykuły na szkolnej stronie internetowej Jak zamieszczać i edytować artykuły na szkolnej stronie internetowej adres naszej strony: www.zs3.wroc.pl logo liceum 1. Aby dodać artykuł należy się zalogować: System pokaże nazwę zalogowanego użytkownika

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 9

Tworzenie Stron Internetowych. odcinek 9 Tworzenie Stron Internetowych odcinek 9 Prosta galeria oparta na HTML Najprostszym sposobem zbudowania galerii zdjęć jest wykorzystanie tylko HTML i CSS. Strona główna galerii składa się miniatur zdjęć,

Bardziej szczegółowo

I. Menu oparte o listę

I. Menu oparte o listę I. Menu oparte o listę We wcześniejszych przykładach założyliśmy, że menu posiada tylko jeden poziom nawigacji. Czasem jednak jeden poziom nie wystarczy za pomocą list elementów oraz kaskadowych arkuszy

Bardziej szczegółowo

Zajęcia nr 15 JavaScript wprowadzenie do JavaScript

Zajęcia nr 15 JavaScript wprowadzenie do JavaScript Zajęcia nr 15 JavaScript wprowadzenie do JavaScript Prowadzący: Andrzej Gąsienica-Samek, strona kółka www.atinea.pl/kolko Wprowadzenie do jsfiddle.net Uruchom Chrome i wejdź na stronę http://jsfiddle.net.

Bardziej szczegółowo

Test z przedmiotu. Witryny i aplikacje internetowe

Test z przedmiotu. Witryny i aplikacje internetowe Test z przedmiotu Witryny i aplikacje internetowe Tylko jedna odpowiedź jest poprawna!!! Zadanie 1 Kod języka HTML przedstawi tabelę składającą się z dwóch

Bardziej szczegółowo

HTML 1. Gimnazjum nr 1 w Barcinie gimbarcin.pl

HTML 1. Gimnazjum nr 1 w Barcinie gimbarcin.pl HTML 1 Gimnazjum nr 1 w Barcinie UWAGA: UTWÓRZ FOLDER HTML, a w nim HTML-1 dla pierwszego ćwiczenia. Imię_ nazwisko_html-1.html z dysku J: w folderze HTML 1. Tło strony - Jednolity kolor:

Bardziej szczegółowo

Grafika PHP dla początkujących

Grafika PHP dla początkujących Instrukcja numer 02 Grafika PHP dla początkujących Zaawansowane techniki tworzenie stron WWW Dynamiczne tworzenie obrazków w PHP zadanie_01.php to jest dynamicznie stworzony obrazek

Bardziej szczegółowo

Wstęp 7 Rozdział 1. OpenOffice.ux.pl Writer środowisko pracy 9

Wstęp 7 Rozdział 1. OpenOffice.ux.pl Writer środowisko pracy 9 Wstęp 7 Rozdział 1. OpenOffice.ux.pl Writer środowisko pracy 9 Uruchamianie edytora OpenOffice.ux.pl Writer 9 Dostosowywanie środowiska pracy 11 Menu Widok 14 Ustawienia dokumentu 16 Rozdział 2. OpenOffice

Bardziej szczegółowo

Szybkie tworzenie grafiki w GcIde

Szybkie tworzenie grafiki w GcIde Szybkie tworzenie grafiki w GcIde Opracował: Ryszard Olchawa Poniższy opis dotyczy aplikacji okienkowej w systemie Windows lub Linux bazującej na obiektowej bibliotece rofrm stworzonej w środowisku GcIde.

Bardziej szczegółowo

8. Dynamiczne generowanie grafiki, cz. 2

8. Dynamiczne generowanie grafiki, cz. 2 8. Dynamiczne generowanie grafiki, cz. 2 8.1. Generowanie tekstu Chociaż tekst można umieścić na grafice korzystając z HTML (używając grafiki jako tła obiektu), często wygodniej jest umieścić tekst bezpośrednio

Bardziej szczegółowo

Zalogowanie generuje nowe menu: okno do wysyłania plików oraz dodatkowe menu Pomoc

Zalogowanie generuje nowe menu: okno do wysyłania plików oraz dodatkowe menu Pomoc Jak zamieszczać i edytować artykuły na szkolnej stronie internetowej autor poradnika - KS 1. Aby dodać artykuł należy się zalogować: System pokaże nazwę zalogowanego użytkownika (lewy dół strony) Zalogowanie

Bardziej szczegółowo

Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów Aplikacje internetowe KL. III Rok szkolny: 011/01 Nr programu: 31[01]/T,SP/MENIS/004.06.14 Okres kształcenia: łącznie ok. 180 godz. lekcyjne Wojciech Borzyszkowski Zenon Kreft Moduł Bok wprowadzający Podstawy

Bardziej szczegółowo

Przewodnik... Tworzenie Landing Page

Przewodnik... Tworzenie Landing Page Przewodnik... Tworzenie Landing Page Spis treści Kreator strony landing page Stwórz stronę Zarządzaj stronami 2 Kreator strony landing page Kreator pozwala stworzyć własną stronę internetową z unikalnym

Bardziej szczegółowo

5-6. Struktura dokumentu html. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

5-6. Struktura dokumentu html. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów Aplikacje internetowe KL. III Rok szkolny: 013/01 Nr programu: 31[01]/T,SP/MENIS/00.06.1 Okres kształcenia: łącznie ok. 170 godz. lekcyjne Moduł Bok wprowadzający 1. Zapoznanie z programem nauczania i

Bardziej szczegółowo

Ćwiczenie 4 - Tabele

Ćwiczenie 4 - Tabele Ćwiczenie 4 - Tabele W ćwiczeniu tym zajmujemy się tabelami. Tabele moŝna wykorzystywać do róŝnych celów. W tabelach moŝna prezentować dane i je wyliczać, moŝna ustalić określony układ treści i stworzyć

Bardziej szczegółowo

Wprowadzenie do rysowania w 3D. Praca w środowisku 3D

Wprowadzenie do rysowania w 3D. Praca w środowisku 3D Wprowadzenie do rysowania w 3D 13 Praca w środowisku 3D Pierwszym krokiem niezbędnym do rozpoczęcia pracy w środowisku 3D programu AutoCad 2010 jest wybór odpowiedniego obszaru roboczego. Można tego dokonać

Bardziej szczegółowo

GRAFIKA. Rodzaje grafiki i odpowiadające im edytory

GRAFIKA. Rodzaje grafiki i odpowiadające im edytory GRAFIKA Rodzaje grafiki i odpowiadające im edytory Obraz graficzny w komputerze Może być: utworzony automatycznie przez wybrany program (np. jako wykres w arkuszu kalkulacyjnym) lub urządzenie (np. zdjęcie

Bardziej szczegółowo

Proste kody html do szybkiego stosowania.

Proste kody html do szybkiego stosowania. Proste kody html do szybkiego stosowania. Często, w trakcie pracy z blogiem czy portalem zachodzi potrzeba umieszczenia grafiki, linku zaszytego w grafice czy innych podobnych. Szczególnie w widgetach

Bardziej szczegółowo

Pokaz slajdów na stronie internetowej

Pokaz slajdów na stronie internetowej Pokaz slajdów na stronie internetowej... 1 Podpisy pod zdjęciami... 3 Publikacja pokazu slajdów w Internecie... 4 Generator strony Uczelni... 4 Funkcje dla zaawansowanych użytkowników... 5 Zmiana kolorów

Bardziej szczegółowo

Grafika w aplikacjach lp. Jak zmienić kolor tła?

Grafika w aplikacjach lp. Jak zmienić kolor tła? Grafika w aplikacjach lp W tym rozdziale znajdziesz informacje jak osadzić w tworzonym programie zdjęcia, rysunki, wykresy i inne elementy graficzne. W środowisku lp autor ma dostęp do następujących obiektów

Bardziej szczegółowo

Microsoft Small Basic

Microsoft Small Basic Microsoft Small Basic Okno grafiki Szacowany czas trwania lekcji: 1 godzina Okno grafiki Podczas tej lekcji uzyskasz informacje na temat: Instrukcji używających obiektu GraphicsWindow. Właściwości obiektu

Bardziej szczegółowo

Rysowanie punktów na powierzchni graficznej

Rysowanie punktów na powierzchni graficznej Rysowanie punktów na powierzchni graficznej Tworzenie biblioteki rozpoczniemy od podstawowej funkcji graficznej gfxplot() - rysowania pojedynczego punktu na zadanych współrzędnych i o zadanym kolorze RGB.

Bardziej szczegółowo

Spis treści CZĘŚĆ I JĘZYK SIECI 17. Wstęp 13. Rozdział 1 Wprowadzenie do HTML5 19. Rozdział 2 Znajomość znaczników HTML5 37

Spis treści CZĘŚĆ I JĘZYK SIECI 17. Wstęp 13. Rozdział 1 Wprowadzenie do HTML5 19. Rozdział 2 Znajomość znaczników HTML5 37 Spis treści Wstęp 13 CZĘŚĆ I JĘZYK SIECI 17 Rozdział 1 Wprowadzenie do HTML5 19 Tworzenie przy pomocy znaczników: przegląd 20.Wprowadzanie nowych elementów HTML5 21 Korzystanie z kontynuowanych znaczników

Bardziej szczegółowo

Kurs obsługi systemu CMS. Prawie wszystkie treści wyświetlające się na stronie są zlokalizowane w dziale artykuły.

Kurs obsługi systemu CMS. Prawie wszystkie treści wyświetlające się na stronie są zlokalizowane w dziale artykuły. Kurs obsługi systemu CMS Zaczynając przygodę z systemem zarządzania treścią Joomla 2.5 należy przedstawić główny panel administratora. Całość zaprojektowana jest w kombinacji dwóch systemów nawigacyjnych.

Bardziej szczegółowo

Podstawowe znaczniki języka HTML.

Podstawowe znaczniki języka HTML. Podstawowe znaczniki języka HTML. Struktura dokumentu. Sposób użycia i dokumentu. Między nimi umieszczana jest cała treść dokumentu. Sposób użycia Sekcja HEAD zawiera podstawowe

Bardziej szczegółowo

Excel wykresy niestandardowe

Excel wykresy niestandardowe Excel wykresy niestandardowe Uwaga Przy robieniu zadań zadbaj by każde zadanie było na kolejnym arkuszu, zadanie na jednym, wykres na drugim, kolejne zadanie na trzecim itd.: Tworzenie wykresów Gantta

Bardziej szczegółowo

Tworzenie infografik za pomocą narzędzia Canva

Tworzenie infografik za pomocą narzędzia Canva Tworzenie infografik za pomocą narzędzia Canva Spis treści Wstęp... 1 Układy... 3 Zmiana tekstu... 4 Obrazki... 5 Elementy... 6 Zdjęcia - Gratis... 6 Siatki... 8 Ramki... 10 Kształty... 12 Linie... 12

Bardziej szczegółowo

Jak posługiwać się edytorem treści

Jak posługiwać się edytorem treści Jak posługiwać się edytorem treści Edytor CKE jest bardzo prostym narzędziem pomagającym osobom niezaznajomionym z językiem HTML w tworzeniu interaktywnych treści stron internetowych. Razem z praktyka

Bardziej szczegółowo

Ćwiczenie nr 10 Style wydruku, wydruk

Ćwiczenie nr 10 Style wydruku, wydruk Ćwiczenie nr 10 Style wydruku, wydruk Materiały do kursu Skrypt CAD AutoCAD 2D strony: 111-134 skryptu. Wprowadzenie Końcowym etapem wykonywania dokumentacji technicznej po przygotowaniu arkusza wydruku

Bardziej szczegółowo

I. Spis treści I. Spis treści... 2 II. Kreator szablonów... 3 1. Tworzenie szablonu... 3 2. Menu... 4 a. Opis ikon... 5 3. Dodanie nowego elementu...

I. Spis treści I. Spis treści... 2 II. Kreator szablonów... 3 1. Tworzenie szablonu... 3 2. Menu... 4 a. Opis ikon... 5 3. Dodanie nowego elementu... Kreator szablonów I. Spis treści I. Spis treści... 2 II. Kreator szablonów... 3 1. Tworzenie szablonu... 3 2. Menu... 4 a. Opis ikon... 5 3. Dodanie nowego elementu... 7 a. Grafika... 7 b. Tekst... 7 c.

Bardziej szczegółowo

INSTRUKCJA OBSŁUGI SYSTEM ZARZĄDZANIA TREŚCIĄ

INSTRUKCJA OBSŁUGI SYSTEM ZARZĄDZANIA TREŚCIĄ INSTRUKCJA OBSŁUGI SYSTEM ZARZĄDZANIA TREŚCIĄ Spis treści: 1 Logowanie do panelu administracyjnego 2 Dodawanie obiektów na stronie 2.1 Wybór podstrony 2.2 Wybór obiektu 2.2.1 Dodawanie obiektów tekstowych

Bardziej szczegółowo

C Biblioteka G2. C.1 Koncepcja biblioteki G2.

C Biblioteka G2. C.1 Koncepcja biblioteki G2. C Biblioteka G2. J a c e k Ta r a s i u k C.1 Koncepcja biblioteki G2. Biblioteka graficzna G2 umożliwia tworzenie rysunków 2D z wykorzystaniem prostych funkcji rysujących. Niezwykle użyteczną cechą biblioteki

Bardziej szczegółowo

MasterEdytor. Podprogram pomocniczy do programu mpfotoalbum 1.2 INSTRUKCJA

MasterEdytor. Podprogram pomocniczy do programu mpfotoalbum 1.2 INSTRUKCJA MasterEdytor Podprogram pomocniczy do programu mpfotoalbum 1.2 INSTRUKCJA 1. Przeznaczenie Program MasterEdytor przeznaczony jest do skonfigurowania wszystkich parametrów pracy programu mpfotoalbum. 2.

Bardziej szczegółowo

Programowanie w Sieci Internet Blok 2 - PHP. Kraków, 09 listopada 2012 mgr Piotr Rytko Wydział Matematyki i Informatyki

Programowanie w Sieci Internet Blok 2 - PHP. Kraków, 09 listopada 2012 mgr Piotr Rytko Wydział Matematyki i Informatyki Programowanie w Sieci Internet Blok 2 - PHP Kraków, 09 listopada 2012 mgr Piotr Rytko Wydział Matematyki i Informatyki Co dziś będziemy robić Podstawy podstaw, czyli małe wprowadzenie do PHP, Podstawy

Bardziej szczegółowo

TWORZENIE PREZENTACJI MS POWERPOINT

TWORZENIE PREZENTACJI MS POWERPOINT TWORZENIE PREZENTACJI MS POWERPOINT Wstęp TWORZENIE PREZENTACJI MS POWERPOINT Czasami zdarza się, że zostajemy poproszeni o poprowadzenia spotkania czy szkolenia w firmie, w której pracujemy lub po prostu

Bardziej szczegółowo

ECDL/ICDL Zaawansowana grafika menedżerska i prezentacyjna Sylabus, wersja 2.0

ECDL/ICDL Zaawansowana grafika menedżerska i prezentacyjna Sylabus, wersja 2.0 ECDL/ICDL Zaawansowana grafika menedżerska i prezentacyjna Sylabus, wersja 2.0 Przeznaczenie sylabusa Dokument ten zawiera szczegółowy sylabus dla modułu ECDL/ICDL Zaawansowana grafika menedżerska i prezentacyjna.

Bardziej szczegółowo

Programowanie obiektowe

Programowanie obiektowe Programowanie obiektowe Laboratorium 1. Wstęp do programowania w języku Java. Narzędzia 1. Aby móc tworzyć programy w języku Java, potrzebny jest zestaw narzędzi Java Development Kit, który można ściągnąć

Bardziej szczegółowo

Instrukcja wprowadzania graficznych harmonogramów pracy w SZOI Wg stanu na 21.06.2010 r.

Instrukcja wprowadzania graficznych harmonogramów pracy w SZOI Wg stanu na 21.06.2010 r. Instrukcja wprowadzania graficznych harmonogramów pracy w SZOI Wg stanu na 21.06.2010 r. W systemie SZOI została wprowadzona nowa funkcjonalność umożliwiająca tworzenie graficznych harmonogramów pracy.

Bardziej szczegółowo

JAVA. Java jest wszechstronnym językiem programowania, zorientowanym. apletów oraz samodzielnych aplikacji.

JAVA. Java jest wszechstronnym językiem programowania, zorientowanym. apletów oraz samodzielnych aplikacji. JAVA Java jest wszechstronnym językiem programowania, zorientowanym obiektowo, dostarczającym możliwość uruchamiania apletów oraz samodzielnych aplikacji. Java nie jest typowym kompilatorem. Źródłowy kod

Bardziej szczegółowo

1. Dockbar, CMS + wyszukiwarka aplikacji Dodawanie portletów Widok zawartości stron... 3

1. Dockbar, CMS + wyszukiwarka aplikacji Dodawanie portletów Widok zawartości stron... 3 DODAJEMY TREŚĆ DO STRONY 1. Dockbar, CMS + wyszukiwarka aplikacji... 2 2. Dodawanie portletów... 3 Widok zawartości stron... 3 Omówienie zawartości portletu (usunięcie ramki itd.)... 4 3. Ikonki wybierz

Bardziej szczegółowo

Grafika rastrowa (bitmapa)-

Grafika rastrowa (bitmapa)- Grafika komputerowa Grafika rastrowa Grafika rastrowa (bitmapa)- sposób zapisu obrazów w postaci prostokątnej tablicy wartości, opisujących kolory poszczególnych punktów obrazu (prostokątów składowych).

Bardziej szczegółowo

Program szkoleniowy. 16 h dydaktycznych (12 h zegarowych) NAZWA SZCZEGÓŁY CZAS. Skróty dostępu do narzędzi

Program szkoleniowy. 16 h dydaktycznych (12 h zegarowych) NAZWA SZCZEGÓŁY CZAS. Skróty dostępu do narzędzi Program szkoleniowy Microsoft Excel Poziom Podstawowy 16 h dydaktycznych (12 h zegarowych) NAZWA SZCZEGÓŁY CZAS 1. Skróty klawiszowe Skróty do przeglądania arkusza Skróty dostępu do narzędzi Skróty dotyczące

Bardziej szczegółowo

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop. 2012 Spis treści Wstęp 9 1 HTML 5 i XHTML w pytaniach i odpowiedziach 13 Co to jest HTML 5? 13 Co to jest XHTML? 15 Czy strony utworzone w HTML

Bardziej szczegółowo

Zawartość specyfikacji:

Zawartość specyfikacji: Zawartość specyfikacji: Wielkość, waga i kodowanie Umieszczanie obrazków w kreacji Elementy niedopuszczalne Nazewnictwo plików Stopka mailingu Nie spełniam wymagań pracodawcy Waga, wielkość i kodowanie

Bardziej szczegółowo

DODAJEMY TREŚĆ DO STRONY

DODAJEMY TREŚĆ DO STRONY DODAJEMY TREŚĆ DO STRONY SPIS TREŚCI Pasek narzędzi i wyszukiwarka aplikacji... 2 Dodawanie portletów... 3 Widok zawartości stron... 4 Zawartość portletu... 5 Ikonki wybierz oraz dodaj zawartość stron...

Bardziej szczegółowo

PHP: bloki kodu, tablice, obiekty i formularze

PHP: bloki kodu, tablice, obiekty i formularze 1 PHP: bloki kodu, tablice, obiekty i formularze SYSTEMY SIECIOWE Michał Simiński 2 Bloki kodu Blok if-else Switch Pętle Funkcje Blok if-else 3 W PHP blok if i blok if-else wyglądają tak samo i funkcjonują

Bardziej szczegółowo

Prezentacja multimedialna MS PowerPoint 2010 (podstawy)

Prezentacja multimedialna MS PowerPoint 2010 (podstawy) Prezentacja multimedialna MS PowerPoint 2010 (podstawy) Cz. 1. Tworzenie slajdów MS PowerPoint 2010 to najnowsza wersja popularnego programu do tworzenia prezentacji multimedialnych. Wygląd programu w

Bardziej szczegółowo

Jak dodać własny szablon ramki w programie dibudka i dilustro

Jak dodać własny szablon ramki w programie dibudka i dilustro Aby dodać własną ramkę otwórz moduł administracyjny dibudkaadmin.exe, wejdź do zakładki Ramki, tła, id i następnie Edycja. 1. Kliknij przycisk Dodaj ramkę 2. Określ wymiary nowej ramki Jeżeli dodajesz

Bardziej szczegółowo

Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.

Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1. Widżety KIWIPortal tworzenie umieszczanie na stronach internetowych opcje zaawansowane Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.3 Strona 1 z 17 1 SPIS TREŚCI 2 Metody osadzania widżetów... 3 2.1

Bardziej szczegółowo

1. Opis okna podstawowego programu TPrezenter.

1. Opis okna podstawowego programu TPrezenter. OPIS PROGRAMU TPREZENTER. Program TPrezenter przeznaczony jest do pełnej graficznej prezentacji danych bieżących lub archiwalnych dla systemów serii AL154. Umożliwia wygodną i dokładną analizę na monitorze

Bardziej szczegółowo

Wprowadzenie do Scilab: funkcje i wykresy

Wprowadzenie do Scilab: funkcje i wykresy Wprowadzenie do Scilab: funkcje i wykresy Magdalena Deckert, Izabela Szczęch, Barbara Wołyńska, Bartłomiej Prędki Politechnika Poznańska, Instytut Informatyki Narzędzia Informatyki Narzędzia Informatyki

Bardziej szczegółowo

37. Podstawy techniki bloków

37. Podstawy techniki bloków 37 37. Podstawy techniki bloków Bloki stosujemy w przypadku projektów zawierających powtarzające się identyczne złożone obiekty. Przykłady bloków pokazano na rysunku. Zacieniowane kwadraty to tzw. punkty

Bardziej szczegółowo

Aplikacje WWW - laboratorium

Aplikacje WWW - laboratorium Aplikacje WWW - laboratorium PHP. Celem ćwiczenia jest przygotowanie prostej aplikacji internetowej wykorzystującej technologię PHP. Aplikacja pokazuje takie aspekty, obsługa formularzy oraz zmiennych

Bardziej szczegółowo

Druga aplikacja Prymitywy, alpha blending, obracanie bitmap oraz mały zestaw przydatnych funkcji wyświetlających własnej roboty.

Druga aplikacja Prymitywy, alpha blending, obracanie bitmap oraz mały zestaw przydatnych funkcji wyświetlających własnej roboty. Przyszedł czas na rysowanie własnych figur, czyli prymitywy, obracanie bitmap, oraz alpha blending-czyli półprzezroczystość. Będę opisywał tylko rzeczy nowe-nie ma potrzeby abym się powtarzał. Zaczynajmny

Bardziej szczegółowo

Przekształcanie wykresów.

Przekształcanie wykresów. Sławomir Jemielity Przekształcanie wykresów. Pokażemy tu, jak zmiana we wzorze funkcji wpływa na wygląd jej wykresu. A. Mamy wykres funkcji f(). Jak będzie wyglądał wykres f ( ) + a, a stała? ( ) f ( )

Bardziej szczegółowo

Wartości x-ów : Wartości x ów można w Scilabie zdefiniować na kilka sposobów, wpisując odpowiednie polecenie na konsoli.

Wartości x-ów : Wartości x ów można w Scilabie zdefiniować na kilka sposobów, wpisując odpowiednie polecenie na konsoli. Notatki z sesji Scilaba Istnieje możliwość dokładnego zapisu przebiegu aktualnej sesji pracy ze Scilabem: polecenie diary('nazwa_pliku.txt') powoduje zapis do podanego pliku tekstowego wszystkich wpisywanych

Bardziej szczegółowo

Zmiana logo. Dziękujemy za wybór naszych rozwiązań. apjoo od Apláuz. Wspólnie przebrniemy przez proces konfiguracji strony www i wstawiania treści.

Zmiana logo. Dziękujemy za wybór naszych rozwiązań. apjoo od Apláuz. Wspólnie przebrniemy przez proces konfiguracji strony www i wstawiania treści. Użytkownicy i hasła Dostęp do zaplecza umożliwia rozbudowany system zarządzania użytkownikami. 1. Konta użytkowników tworzy się wybierając z menu Użytkownicy > Menedżer użytkowników na stronie głownej

Bardziej szczegółowo

Wykład 03 JavaScript. Michał Drabik

Wykład 03 JavaScript. Michał Drabik Wykład 03 JavaScript Michał Drabik Język programowania wykorzystywany na stronach internetowych głównie w celu umożliwienia interakcji z użytkownikiem. Kod JavaScript może być umieszczany w kodzie XHTML

Bardziej szczegółowo

enova Systemowe Kolorowanie list

enova Systemowe Kolorowanie list enova Systemowe Kolorowanie list Sebastian Wabnik Narzędzie kolorowania list Od wersji enova 7.6 dodano do organizatora listy możliwości konfigurowania kolorowania wierszy (zapisów/rekordów) oraz poszczególnych

Bardziej szczegółowo

Konfiguracja szablonu i wystawienie pierwszej aukcji allegro

Konfiguracja szablonu i wystawienie pierwszej aukcji allegro Konfiguracja szablonu i wystawienie pierwszej aukcji allegro Metod na wystawienie aukcji na allegro jest co najmniej 2. W pierwszej przechodzimy do zakładki MOJA SPRZEDAŻ, w USTAWIENIACH SPRZEDAŻY odnajdujemy

Bardziej szczegółowo

Zadanie Wstaw wykres i dokonaj jego edycji dla poniższych danych. 8a 3,54 8b 5,25 8c 4,21 8d 4,85

Zadanie Wstaw wykres i dokonaj jego edycji dla poniższych danych. 8a 3,54 8b 5,25 8c 4,21 8d 4,85 Zadanie Wstaw wykres i dokonaj jego edycji dla poniższych danych Klasa Średnia 8a 3,54 8b 5,25 8c 4,21 8d 4,85 Do wstawienia wykresu w edytorze tekstu nie potrzebujemy mieć wykonanej tabeli jest ona tylko

Bardziej szczegółowo

Przewodnik po soczewkach

Przewodnik po soczewkach Przewodnik po soczewkach 1. Wchodzimy w program Corel Draw 11 następnie klikamy Plik /Nowy => Nowy Rysunek. Następnie wchodzi w Okno/Okno dokowane /Teczka podręczna/ Przeglądaj/i wybieramy plik w którym

Bardziej szczegółowo

Instrukcja - blogi OK zeszyt Logowanie

Instrukcja - blogi OK zeszyt Logowanie Instrukcja - blogi OK zeszyt Logowanie 1. Proszę wejść na stronę http://okblogi.ceo.org.pl/ 2. Po prawej stronie znajduje się link do logowania: 3. Proszę wpisać dane logowania: Nazwa Twojego bloga Twój

Bardziej szczegółowo

Politechnika Gdańska Wydział Elektrotechniki i Automatyki Katedra Inżynierii Systemów Sterowania KOMPUTEROWE SYSTEMY STEROWANIA (KSS)

Politechnika Gdańska Wydział Elektrotechniki i Automatyki Katedra Inżynierii Systemów Sterowania KOMPUTEROWE SYSTEMY STEROWANIA (KSS) Politechnika Gdańska Wydział Elektrotechniki i Automatyki Katedra Inżynierii Systemów Sterowania KOMPUTEROWE SYSTEMY STEROWANIA (KSS) Temat: Platforma Systemowa Wonderware cz. 2 przemysłowa baza danych,

Bardziej szczegółowo

Praktyka programowania projekt

Praktyka programowania projekt Praktyka programowania projekt Zadanie projektowe nr. 2 Gra PacMan K. M. Ocetkiewicz, T Goluch 19 listopada 2012 Plan prezentacji Opis 2 zadania projektowego Plan prezentacji Opis 2 zadania projektowego

Bardziej szczegółowo

darmowe zdjęcia - allegro.pl

darmowe zdjęcia - allegro.pl darmowe zdjęcia - allegro.pl 1 Darmowe zdjęcia w Twoich aukcjach allegro? Tak to możliwe. Wielu sprzedających robi to od dawna i wbrew pozorom jest to bardzo proste. Serwis allegro oczywiście umożliwia

Bardziej szczegółowo

Projektowanie graficzne. Wykład 2. Open Office Draw

Projektowanie graficzne. Wykład 2. Open Office Draw Projektowanie graficzne Wykład 2 Open Office Draw Opis programu OpenOffice Draw OpenOffice Draw umożliwia tworzenie prostych oraz złożonych rysunków. Posiada możliwość eksportowania rysunków do wielu różnych

Bardziej szczegółowo

CMS - INFORMACJE. *** Mirosław Kuduk E mail: tel. kom DODATKOWE FUNKCJE - PANEL ADMINISTRATORA

CMS - INFORMACJE. *** Mirosław Kuduk E mail: tel. kom DODATKOWE FUNKCJE - PANEL ADMINISTRATORA CMS - INFORMACJE *** Mirosław Kuduk E mail: mkuduk@interia.pl tel. kom. 663-755-428 DODATKOWE FUNKCJE - PANEL ADMINISTRATORA Panel Dodatkowe funkcje Autoryzacja Publikacje Nowa publikacja, edycja Pokazy

Bardziej szczegółowo

Dokumentacja imapliteapi

Dokumentacja imapliteapi Dokumentacja imapliteapi Urząd Marszałkowski Województwa Małopolskiego 30.06.2014 Spis treści: 1. Wprowadzenie... 3 2. Sposób użycia biblioteki imapliteapi... 3 3. Metody API... 5 4. Lista gotowych kompozycji

Bardziej szczegółowo

Programowanie WEB PODSTAWY HTML

Programowanie WEB PODSTAWY HTML Programowanie WEB PODSTAWY HTML Najprostsza strona HTML tytuł strony To jest moja pierwsza strona WWW. tytuł strony

Bardziej szczegółowo

Pasek menu. Ustawienia drukowania

Pasek menu. Ustawienia drukowania Polecenie Ustawienia drukowania... z menu Plik pozwala określić urządzenie drukujące poprzez jego wybór z pola kombi. Urządzenie można skonfigurować poprzez przycisk właściwości. Otwiera się wówczas okno

Bardziej szczegółowo

Wprowadzenie do Python

Wprowadzenie do Python Wprowadzenie do Python Marcin Orchel 1 Środowisko Python Zalecane korzystanie z dystrybucji Anaconda. W systemie linux może być już dostępny Python. Sprawdzenie wersji Pythona, python -V. Uruchomienie

Bardziej szczegółowo

Wstawianie nowej strony

Wstawianie nowej strony Wstawianie nowej strony W obszernych dokumentach będziemy spotykali się z potrzebą dzielenia dokumentu na części. Czynność tę wykorzystujemy np.. do rozpoczęcia pisania nowego rozdziału na kolejnej stronie.

Bardziej szczegółowo

Programowanie: grafika w SciLab Slajd 1. Programowanie: grafika w SciLab

Programowanie: grafika w SciLab Slajd 1. Programowanie: grafika w SciLab Programowanie: grafika w SciLab Slajd 1 Programowanie: grafika w SciLab Programowanie: grafika w SciLab Slajd 2 Plan zajęć 1. Wprowadzenie 2. Wykresy 2-D 3. Wykresy 3-D 4. Rysowanie figur geometrycznych

Bardziej szczegółowo

1. Przypisy, indeks i spisy.

1. Przypisy, indeks i spisy. 1. Przypisy, indeks i spisy. (Wstaw Odwołanie Przypis dolny - ) (Wstaw Odwołanie Indeks i spisy - ) Przypisy dolne i końcowe w drukowanych dokumentach umożliwiają umieszczanie w dokumencie objaśnień, komentarzy

Bardziej szczegółowo

na podstawie modelu 3D

na podstawie modelu 3D Przygotowanie dokumentacji technicznej 2D na podstawie modelu 3D SST-2013/2014 Przygotowanie dokumentacji technicznej 2D 1 Wydruk rysunku z AutoCAD 2D można przygotować na dwa sposoby 1. na zakładce Model

Bardziej szczegółowo