Mazakiem po WWW czyli kilka słów o obiekcie «canvas»

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

Download "Mazakiem po WWW czyli kilka słów o obiekcie «canvas»"

Transkrypt

1 Mazakiem po WWW czyli kilka słów o obiekcie «canvas» Robert BoBsoN Partyka Streszczenie: Rozwój informatyki to ciągły bieg za nowymi technologiami. Tendencja ta nie omija także globalnej pajęczyny stron WWW. Czasy, gdy serwisy internetowe składały się tylko z tekstu i hiperłączy minęły bezpowrotnie. Standardy, które wytyczają drogę rozbudowy przeglądarek, rozszerzane są o kolejne pomysły organizacji takich jak W3C, WHATWG oraz firm takich jak Nokia, Google czy Microsoft. Najnowsze wydania Firefox i Opery wprowadziły natywną obsługę strumieni video i dźwięku. W najbliższym czasie spodziewać się należy kolejnego przełomu w postrzeganiu narzędzia jakim jest WWW. Przyjrzyjmy się jednemu z elementów HTML5, które mogą przyczynić się do tego przełomu. Czym właściwie jest <canvas>? Z obiektami o działaniu podobnym do <canvas> spotkał się każdy, kto próbował swych sił w programowaniu w C/C++ czy Pascal (Delphi). Jest to nic innego jak płótno na ekranie, na której możemy narysować dowolną grafikę. Nic nadzwyczajnego, ale gdy dodamy do tego szereg wbudowanych funkcjonalności, otrzymujemy elastyczne i przydatne narzędzie, dzięki któremu możemy zmienić odbiór naszych stron WWW. <canvas> po raz pierwszy został wprowadzony przez firmę Apple dla Mac OS X Dashboard a następnie zaimplementowany w Safari. Implementacja tego obiektu została wykonana także w silniku Gecko, począwszy od wersji 1.8 oraz w przeglądarce Opera w związku z zawarciem tego obiektu w specyfikacji WHATWG Web application 1.0 znanej jako HTML5. Nie jest zaskakującym fakt, że firma Microsoft nie implementowała tego obiektu <canvas> w IE zawdzięczamy Google.

2 36 Robert BoBsoN Partyka Podstawy Tak, jak każdą zabawę z elementami HTML i tutaj zaczynamy od wstawienia obiektu w kod strony WWW. Przykładowo: <canvas id="mycanvas" width="400" height="300"> </canvas> wstawi obiekt o wymiarach 400 na 300 pikseli. Zaleca się stosowanie zamykającego tagu </canvas> ze względu na nieprawidłowe interpretowanie <canvas.../> przez niektóre przeglądarki. Tego typu konstrukcja pozwala także na zastosowanie kodu, który zostanie wyświetlony w przeglądarkach nie wspierających tego obiektu: <canvas id="mycanvas" width="400" height="300"> Twoja przeglądarka nie wspiera obiektu Canvas. </canvas> W efekcie interpretacji przez przeglądarkę takiego kodu naszym oczom ukaże się zachęcająca do dalszej pracy pustka. Mając już obiekt <canvas> w drzewie DOM strony, przystępujemy do manipulacji na tym obiekcie. W tym celu wykorzystujemy JavaScript. <canvas> obsługuje zdarzenia HTML, dzięki czemu możliwe jest oprogramowanie interakcji z użytkownikiem. Do rysowania obrazu wykorzystywane są konteksty rysowania. Może być ich więcej niż jeden, dzięki czemu zyskujemy dodatkowe możliwości, takie jak dostęp do OpenGL ES z poziomu JavaScript (o czym za chwilę). Podstawowym kontekstem jest 2d. var canvas = document.getelementbyid( MyCanvas ); var ctx = canvas.getcontext( 2d ); Po pobraniu kontekstu możemy przystąpić do rysowania na stworzonym przez nas płótnie, wykorzystując dostarczane przez obiekt metody. canvas obsługuje jedynie prostokąt jako wbudowany kształt. fillrect(x,y,szerokość,wysokość) rysuje wypełniony prostokąt, strokerect(x,y,width,height) rysuje obrys prostokąta, a clearrect(x,y,width,height) czyści dany obszar, czyniąc go całkowicie przeźroczystym Każda inna figura musi być zbudowana ze ścieżek. Tych na szczęście jest kilka rodzajów. Rysowanie figur przy użyciu ścieżek jest trochę bardziej skomplikowane wymaga wykorzystania więcej niż jednej metody. Dodatkowo ważnym elementem staje się kontrola nad położeniem pędzla. Ścieżkę rozpoczynamy od wydania beginpath(). Kolejne metody przesuwają i rysują pędzlem. Ostatnia zamyka ścieżkę i aktywuje jej wykonanie. Jest to albo:

3 Mazakiem po WWW czyli kilka słów o obiekcie «canvas» 37 fill() dla figur wypełnionych lub stroke() dla obrysów figur. Opcjonalna metoda closepath() służy do narysowania linii prostej z bieżącej pozycji pędzla do punktu początkowego ścieżki. Pierwszą metodą wywoływaną po beginpatch() w większości przypadków będzie moveto(x,y). Służy ona do przeniesienia pędzla bez pozostawiania śladu na płótnie w wybraną pozycję. W celu rysowania śladu ścieżki otrzymujemy całkiem pokaźny zestaw metod: lineto(x, y) rysuje linię prostą z aktualnej pozycji do podanej, arc(x, y, r, początkowykąt, końcowykąt, przeciwniedozegara) rysuje okrąg lub fragment okręgu od początkowego do końcowego końca, zgodnie lub przeciwnie do ruchu wskazówek zegara o promieniu r i środku w punkcie x,y. quadraticcurveto(cp1x, cp1y, x, y) oraz beziercurveto(cp1x, cp1y, cp2x, cp2y, x, y) służy do rysowania krzywych, oraz: rect(x,y, szerokość, wysokość) dodająca obrys prostokąta do aktualnej ścieżki. Pamiętać należy, że pozycją pędzla po wykonaniu którejkolwiek z tych metod, będzie pozycja ostatniego piksla zaplanowanego do narysowania. Wiemy już, jak poruszać pędzlem. Kolejny krok to dobór farb. Do dyspozycji mamy dwie własności obiektu kontekstu: fillstyle określa kolor wypełnienia, zaś: strokestyle określa kolor obrysu. Kolory te zapisane mogą być w jednym z czterech formatów: 1. słowna nazwa zgodna z nazewnictwem kolorów w CSS, 2. zapis #RRGGBB, 3. zapis z wykorzystaniem funkcji rgb(r,g,b) lub funkcji rgba(r,g,b,a) przykładowo: ctx.fillstyle = "orange"; ctx.fillstyle = "#FFA500"; ctx.fillstyle = "rgb(255,165,0)"; ctx.fillstyle = "rgba(255,165,0,1)"; Innymi słowy, jest to zapis zgodny ze specyfikacją zapisów kolorów w standardzie CSS3. Przeźroczystość (lub jak kto woli siłę nacisku) pędzla możemy określić przy pomocy globalnej własności globalalpha. Przyjmuje ona wartości zmiennoprzecinkowe z przedziału 0 do 1.

4 38 Robert BoBsoN Partyka Sposób rysowania pędzla po płótnie określają kolejne cztery własności: linewidth określająca szerokość linii rysowanej przez pędzel, linecap określająca sposób rozpoczęcia i zakończenia rysowanej linii (możliwe wartości to: butt, round i square), linejoin określa sposób, w jaki będą łączone kolejne elementy ścieżki rysowanej przez pędzel (możliwe wartości to: round, bevel i miter), oraz miterlimit określająca, jak daleko mogą znajdować się od siebie punkty połączenia rysowanych linii (dotyczy linii szerszych niż 1px). Nie samymi kreskami i krzywymi jednak obraz żyje. Czasami przydatne jest wykorzystanie grafiki stworzonej np. w GiMP-ie. Jest to możliwe dzięki obiektowi Image() i metodzie drawimage(). Pierwszym krokiem jest załadowanie obrazka z pliku: var img = new Image(); img.src = jesien2009.png ; lub przez zakodowany tekst: img.src = data:image/gif;base64,r0lgo... trochę base64... Ow== ; Do umieszczenia załadowanego obrazka na obszarze płótna obiektu <canvas> używamy metody drawimage(). Występuje ona w trzech wersjach: drawimage(img, x, y) kopiuje obrazek w obszar o początkowej pozycji x,y na obiekcie <canvas>, drawimage(image, x, y, szerokość, wysokość) kopiuje obrazek w obszar o początkowej pozycji x,y z równoczesnym przeskalowaniem do nowych wymiarów, oraz drawimage(image, sx, sy, sszerokość, swysokość, dx, dy, dszerokość, dwysokość) kopiuje fragment obrazka od pozycji sx,sy i wymiarach zdanych w dwóch kolejnych parametrach na pozycję dx,dy w obszarze płótna obiektu canvas z równoczesnym przeskalowaniem do nowych wymiarów podanych w kolejnych dwóch parametrach. Oprócz prostego przerysowywania obrazka na płaszczyznę <canvas>, istnieje możliwość użycia go jako wzoru dla wypełnienia. Umożliwia to metoda createpattern(), która przyjmuje dwa parametry: obiekt obrazka jako pierwszy i określenie sposobu powtarzania wzorca (repeat, repeat-x, repeat-y, no-repeat). W chili obecnej wspierane jest tylko repeat. var img = new Image(); img.src = fajne_wypelnienie.png ; img.onload = function(){

5 Mazakiem po WWW czyli kilka słów o obiekcie «canvas» 39 } var ptrn = ctx.createpattern(img, repeat ); ctx.fillstyle = ptrn; ctx.fillrect(0,0,150,150); Tryb kopiowania obrazu lub rysowania po nim na zasadzie dokładnego przykrywania nowym wzorcem, nie zawsze jest tym, czego potrzebujemy. Kolejny raz z pomocą przychodzą własności obiektu kontekstu. globalcompositeoperation pozwala określić, w jaki sposób łączone ze sobą będą źródło i elementy istniejące już na płótnie. Wtym miejscu otwiera się bogactwo możliwości wyboru: source-over domyślny tryb, w którym źródło przykrywa dokładnie piksle miejsca przeznaczenia; destination-over tryb, w którym nowe elementy umieszczane są poniżej istniejącego obrazu widoczne tylko w miejscach przeźroczystości aktualnego obrazu; source-in oraz destination-in tryb części wspólnej; na płaszczyźnie umieszczony zostanie obszar wspólny pochodzący z źródła lub płótna zależnie od wybranego trybu; source-out oraz destination-out tryby wycięcia, na płaszczyźnie umieszczona zostanie albo część źródła nie pokrywająca elementów w miejscu przeznaczenia, albo część elementów na płaszczyźnie nie przykryta przez element źródła (część wspólna zostanie zamieniona na przeźroczystość); source-atop oraz destination-atop tryby wycięcia z równoczesnym połączeniem części wspólnych. W pierwszym przypadku tylko fragment źródła pokrywający się z elementami w miejscu przeznaczenia będzie pozostawiony i narysowany, w drugim przypadku pozostawiona zostanie tylko część elementów z miejsca przeznaczenia, która pokrywa się z źródłem (źródło umieszczane jest pod spodem ); lighter w części wspólnej nastąpi zsumowanie kolorów źródła i elementów w miejscu przeznaczenia; darker w części wspólnej nastąpi odjęcie wartości koloru źródła od koloru przeznaczenia; xor część wspólna źródła i elementów w miejscu przeznaczenia zostanie usunięta; copy tylko źródło zostanie narysowane, wszystkie inne elementy z zadanego obszaru zostaną usunięte. Oprócz trybów rysowania, istnieje możliwość zdefiniowania ścieżki przycięcia obrazu na płaszczyźnie płótna. Oznacza to, że wszystko, co znajduje się poza obszarem wyznaczonym przez ścieżkę, zostanie usunięte. Ścieżkę taką deklarujemy w identyczny

6 40 Robert BoBsoN Partyka sposób, jak ścieżkę elementu rysowanego na powierzchni obiektu canvas zmienia się jedynie metoda zamykająca: ctx.beginpath(); ctx.arc(0,0,60,0,math.pi*2,true); ctx.clip(); Transformacje Możliwości obiektu <canvas> nie kończą się na rysowaniu ścieżek, czy też kopiowaniu obrazków. Kolejny zestaw metod dodaje obsługę transformacji. O ile opisywane wcześniej metody odnosiły się do sterowania pędzlem, nakładania obrazków ogólnie rysowania po płótnie transformacje odnoszą się do samej powierzchni tworzonego obrazu. Nie należy mylić tego z manipulacją istniejącym obrazem. Transformacje zmieniają tylko układ siatki punktów poprzez przemieszczenie jej punktu zerowego, obrót, zmianę skalowania bez uszczerbku dla już istniejących fragmentów obrazu. Skomplikowane? Spójrzmy na przykład: Na płaszczyźnie umieśćmy kwadrat o boku 20px w pozycji (10,10). ctx.strokerect(10,10,20,20); Następnie narzućmy translację: ctx.translate(100, 100); Komenda ta przenosi punkt zerowy siatki odniesienia w nowe koordynaty. Jak widzimy już narysowany prostokąt pozostał nietknięty. Narysujmy go jeszcze raz dla pewności. ctx.strokerect(10,10,20,20); Prostokąt pojawił się... w nowym miejscu. Tak właśnie działają transformacje. Sposób widzenia płaszczyzny bez uszczerbku dla już narysowanych elementów. Sprawdźmy kolejne metody. ctx.scale(0.5, 0.5); ctx.strokerect(10,10,20,20); Odpowiada za przeskalowanie płaszczyzny. Parametry odpowiednio dla osi X i Y przyjmują wartości zmiennoprzecinkowe równe lub większe niż zero. Wartości z przedziału 0 do 1 oznaczają zgniatanie obrazu, większe od jedynki jego rozciąganie. Jak widzimy narysowany prostokąt jest połowę mniejszy, a dodatkowym efektem jest zmiana jego pozycji. To dlatego, że przeskalowaliśmy siatkę punktów odniesienia obiektu a nie sposób rysowania obiektu. Kolejna metoda pozwoli na obrócenie siatki o zadany w radianach kąt zgodnie z ruchem wskazówek zegara.

7 Mazakiem po WWW czyli kilka słów o obiekcie «canvas» 41 ctx.rotate(math.pi*0.25); ctx.strokerect(10,10,20,20); Istnieje jeszcze dwie metody, które pozwalają na manipulację bezpośrednio na macierzy przekształceń. transform(m 11, m 12, m 21, m 22, dx, dy) mnożąca aktualną macierz przekształceń przez macierz: m 11 m 21 dx m 12 m 22 dy 0 oraz 0 1 settransform(m 11, m 12, m 21, m 22, dx, dy) która ustawia nowe wartości macierzy przekształceń na: m 11 m 21 dx m 12 m 22 dy Gdzie można wykorzystać transformacje? Głównie przy rysowaniu skomplikowanych elementów, takich jak np. hipotrochoida czy epicykloida. Dodawanie wyliczeń transformacji do funkcji rysującej taki element zwiększałoby jej złożoność i drastycznie zmniejszało czytelność kodu. Dzięki transformacjom siatki odniesienia obiektu <canvas> możemy tego uniknąć. Narzucanie kolejnych transformacji wiąże się z ryzykiem utraty panowania nad aktualnym stanem siatki odniesienia. Dodatkowym czynnikiem chaosu jest zmiana barw, sposobu łączenia elementów, wartości opisujących pędzel. W złożonym programie łatwo doprowadzić do sytuacji, w której przez drobną pomyłkę, część obrazu ląduje poza krawędziami obiektu <canvas>. Aby temu zapobiec, stosujemy metodę save(), która zapisuje aktualny stan obiektu <canvas> na stos. Stan przywracamy metodą restore(). Jako, że save() zapamiętuje informacje na stosie możliwe jest zapamiętanie kilku kolejnych stanów, a następnie cofanie się po nich do stanu pierwotnego. Rysowanie tekstu Obiekt <canvas> nie tylko pozwala na rysowanie obrazu. Kontekst 2d posiada także funkcje odpowiedzialne za narzucanie tekstu na obraz. Najprostszą metodą rysowania tekstu jest filltext(), która przyjmuje następujące parametry: tekst do wyświetlenia, koordynaty kolejno x i y początku rysowania tekstu, oraz opcjonalnie maksymalną szerokość (w tym przypadku silnik renderujący będzie starał się użyć fontu o większej gęstości lub mniejszej czcionce w przypadku, gdy treść nie mieści się w zadanej szerokości). measuretext() zwraca informację o szerokości zadanego tekstu w pikslach, mozpathtext() dodaje obrys tekstu do aktualnie przygotowywanej ścieżki. Pozwala to na wrysowanie w obraz tekstu, który będzie posiadał obrys. Najciekawszą z metod rysujących tekst wydaje się moztextalongpath(), która wpisuje tekst wzdłuż utworzonej ścieżki. Sama grafika nie jest skalowana lub poddawana

8 42 Robert BoBsoN Partyka Rys 1 Praktyczny przykład (Pełen opis znajdziesz pod adresem: https://developer.mozilla.org/en/manipulating_video_using_canvas) zniekształceniom. Proces polega na traktowaniu ścieżki jako linii bazowej pod daną literą. Pozwala to na uzyskanie ciekawych efektów, takich jak pofalowany czy spiralny tekst. Możliwe też jest ułożenie tekstu wzdłuż ścieżki utworzonej z... tekstu. Sterowanie stylem rysowanego tekstu, podobnie jak w poprzednich przypadkach, odbywa się poprzez globalne własności obiektu odpowiadającego za kontekst. font określa rozmiar i nazwę aktualnie używanej czcionki, zgodnie ze standardem zapisu wykorzystywanym w CSS, textalign definiuje sposób ułożenia tekstu względem np. ścieżki; możliwe wartości to left, right, center, start oraz end (domyślnie: start), textbaseline ustala położenie linii bazowej tekstu; aktualnie wspierane wartości to: top, hanging, middle, alphabetic, bottom (domyślnie: alphabetic). Praktyczne wykorzystane obiektu <canvas> można przedstawić implementując blue box dla obrazu video. Przypomnijmy czym jest efekt blue box jest to zastąpienie wybranego koloru tła obrazem pochodzącym z innego źródła. W efekcie uzyskujemy złudzenie przebywania osoby w innym miejscu niż jest faktycznie. Efekt ten znany jest także pod nazwami: bluescreen, greenscreen czy też chroma key. Jedyne co potrzebujemy, to obiekt <video>, z którego pobierać będziemy kolejne klatki oraz dwa obiekty <canvas>. W drugim z tych obiektów ustawiamy tło na obrazek, który ma być tłem sceny. Algorytm działania jest prosty. Po załadowaniu strony, zdarzeniem onload inicjujemy wszystkie potrzebne nam zmienne oraz inicjujemy przeliczanie widocznych klatek w funkcji settimeout(). Funkcja uruchomiona przez settimeout() każdorazowo na koniec swojego działania ustawia ponowne wywołanie samej siebie z opóźnieniem 0. W praktyce powinno ustawiać się opóźnienie, wyliczając czas na podstawie framerate filmu. Skupimy się na obliczeniach efektu chroma key. W tym celu najpierw kopiujemy zawartość obrazu z <video> do pierwszego z posiadanych obiektów <canvas>. ctx1.drawimage(myvideo, 0, 0, mywidth, myheight);

9 Mazakiem po WWW czyli kilka słów o obiekcie «canvas» 43 Następnie pobieramy macierz obrazu (dane o kolorach w każdym pikslu w postaci tablicy) let frame = ctx1.getimagedata(0, 0, mywidth, myheight); let l = frame.data.length / 4; Przeliczamy w iteracji wszystkie piksle jeżeli kolor któregoś z nich zgadza się z określonym przez nas tłem ustawiamy jego alpha na zero. for (let i = 0; i < l; i++) { let r = frame.data[i * 4 + 0]; let g = frame.data[i * 4 + 1]; let b = frame.data[i * 4 + 2]; if (g > 100 && r > 100 && b < 43) frame.data[i * 4 + 3] = 0; } W ostatnim kroku umieszczamy przetworzoną macierz obrazu w drugim obiekcie <canvas>: ctx2.putimagedata(frame, 0, 0); Powyższy przykład umieszcza obraz video na statycznym tle. Przy niewielkiej modyfikacji (kopiowanie z dwóch źródeł, narzucanie na trzeci obiekt <canvas>) możliwe jest uzyskanie efektu nałożenia dwóch obrazów video. Kontekst 3D Peter Drucker powiedział kiedyś, że najlepszą metodą przewidywania przyszłości jest jej tworzenie. Nie wiadomo, czy ta sentencja przyświecała Vladimirowi Vukićevićowi, gdy rozpoczynał prace nad kontekstem 3d. Jej celem było wprowadzenie możliwości wykorzystania OpenGL ES (z sprzętową akceleracją) poprzez komendy JavaScript dostępne w ramach kontekstu graficznego obiektu <canvas>. W chwili obecnej dostępne jest rozszerzenie dla Firefox 3.5, które wprowadza dostęp do kontekstów 3d. Jego prace nie zostały bez echa. Inna grupa ludzi rozpoczęła prace nad biblioteką JS, która miała ułatwić tworzenie aplikacji w trzecim wymiarze, czego efektem jest C3D Library. Biblioteka ta wprowadza szereg udogodnień, takich jak obsługa scen, światła, system cząsteczek, kamerę czy też możliwość importu modeli z kilku formatów plików. 25 marca podczas Game Developers Conference w San Francisco fundacja Mozilla oraz grupa Khronos ogłosiły podjęcie wspólnych działań na rzecz wprowadzenia akceleracji 3D do przeglądarek internetowych. Wsparcie dla projektu zadeklarowało także Google co wraz z istnieniem przeglądarki Chrome wydaje się przesądzać o przyszłym sukcesie tego projektu. Pozostaje jedynie uzbroić się w cierpliwość i testować kolejne wersje rozszerzenia Canvas:3D.

10 44 Robert BoBsoN Partyka Powyższy artykuł nie wyczerpuje wszystkich zagadnień związanych z obiektem <canvas>. Mam nadzieję, że udało mi się zachęcić was do bliższego przyjrzenia się temu elementowi. Czas pokaże, czy czeka nas wysyp graficznych aplikacji on-line. Źródła: https://developer.mozilla.org https://developer.mozilla.org/en/canvas_tutorial/transformations https://wiki.mozilla.org/canvas:3d https://labs.mozilla.com/forum/?categoryid=9 https://developer.mozilla.org/en/manipulating_video_using_canvas

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

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

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

narzędzie Linia. 2. W polu koloru kliknij kolor, którego chcesz użyć. 3. Aby coś narysować, przeciągnij wskaźnikiem w obszarze rysowania.

narzędzie Linia. 2. W polu koloru kliknij kolor, którego chcesz użyć. 3. Aby coś narysować, przeciągnij wskaźnikiem w obszarze rysowania. Elementy programu Paint Aby otworzyć program Paint, należy kliknąć przycisk Start i Paint., Wszystkie programy, Akcesoria Po uruchomieniu programu Paint jest wyświetlane okno, które jest w większej części

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

Sieciowe Technologie Mobilne. Laboratorium 2

Sieciowe Technologie Mobilne. Laboratorium 2 Sieciowe Technologie Mobilne Laboratorium 2 Tworzenie wieloplatformowych aplikacji mobilnych przy użyciu biblioteki PhoneGap. Łukasz Kamiński Laboratorium 2 Na dzisiejszym laboratorium skupimy się na implementacji

Bardziej szczegółowo

Sieciowe Technologie Mobilne. Laboratorium 4

Sieciowe Technologie Mobilne. Laboratorium 4 Sieciowe Technologie Mobilne Laboratorium 4 Tworzenie wieloplatformowych aplikacji mobilnych przy użyciu biblioteki PhoneGap. Łukasz Kamiński Laboratorium 4 Urozmaicone zostaną animacje potworów, aby odpowiadały

Bardziej szczegółowo

Dokumentacja WebMaster ver 1.0

Dokumentacja WebMaster ver 1.0 1 Wstęp Dokumentacja WebMaster ver 1.0 Dokumentacja ta przeznaczona jest dla webmasterów, grafików, programistów. Przedstawia ona strukturę aplikacji SOTEeSKLEP, opisuje działanie oraz wyjaśnia m.in. jak

Bardziej szczegółowo

Z CSS3 szybciej i przyjemniej

Z CSS3 szybciej i przyjemniej 1 Z CSS3 szybciej i przyjemniej Marta Piasecka, 2 Zaokraglone--narozniki - 3 lub 4 elementy rysują tło - więcej kodu html - obrazki z narożnikami lub częściami tła - użytkownik widzi stronę bez tła dopóki

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

Animacje cz. 2. Rysujemy koło zębate

Animacje cz. 2. Rysujemy koło zębate Animacje cz. 2 1. Do wykonania poniższej animacji będziemy potrzebować dodatkowego desenia. Znajduje się on w folderze z instrukcją, żeby program Gimp mógł z niego skorzystać musimy wskazać mu ścieżkę

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

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

Allegro5 3/x. Przykład wklejamy go do dev'a zamiast kodu domyślnego dal programu z allegro i kompilujemy.

Allegro5 3/x. Przykład wklejamy go do dev'a zamiast kodu domyślnego dal programu z allegro i kompilujemy. Allegro5 3/x. Przykład wklejamy go do dev'a zamiast kodu domyślnego dal programu z allegro i kompilujemy. #include #include #include #include

Bardziej szczegółowo

INSTRUKCJA UŻYTKOWNIKA. Spis treści. I. Wprowadzenie... 2. II. Tworzenie nowej karty pracy... 3. a. Obiekty... 4. b. Nauka pisania...

INSTRUKCJA UŻYTKOWNIKA. Spis treści. I. Wprowadzenie... 2. II. Tworzenie nowej karty pracy... 3. a. Obiekty... 4. b. Nauka pisania... INSTRUKCJA UŻYTKOWNIKA Spis treści I. Wprowadzenie... 2 II. Tworzenie nowej karty pracy... 3 a. Obiekty... 4 b. Nauka pisania... 5 c. Piktogramy komunikacyjne... 5 d. Warstwy... 5 e. Zapis... 6 III. Galeria...

Bardziej szczegółowo

Projekt K.I.K. Podręcznik użytkownika. Paweł Kieliszczyk, Bartłomiej Kucharczyk, Michał Skrzypkowski, Szymon Wilczek

Projekt K.I.K. Podręcznik użytkownika. Paweł Kieliszczyk, Bartłomiej Kucharczyk, Michał Skrzypkowski, Szymon Wilczek Projekt K.I.K. Podręcznik użytkownika Paweł Kieliszczyk, Bartłomiej Kucharczyk, Michał Skrzypkowski, Szymon Wilczek 18 stycznia 2010 2 Rozdział 1 Wstęp 1.1 Wprowadzenie Dziękujemy za wybór naszego produktu!

Bardziej szczegółowo

Skalowanie i ustawianie arkuszy/układów wydruku w AutoCAD autor: M. Motylewicz, 2012

Skalowanie i ustawianie arkuszy/układów wydruku w AutoCAD autor: M. Motylewicz, 2012 1 z 72 Rysunek rysujemy w skali rzeczywistej tzn. jeżeli pas ruchu ma szerokość 3,5m to wpisujemy w AutoCAD: 3,5 jednostki (mapa oczywiście również musi być wstawiona w skali 1:1). Opisany w dalszym ciągu

Bardziej szczegółowo

Scenariusz lekcji opartej na programie Program nauczania informatyki w gimnazjum DKW-4014-87/99

Scenariusz lekcji opartej na programie Program nauczania informatyki w gimnazjum DKW-4014-87/99 Scenariusz lekcji opartej na programie Program nauczania informatyki w gimnazjum DKW-4014-87/99 Techniki algorytmiczne realizowane przy pomocy grafiki żółwia w programie ELI 2,0. Przedmiot: Informatyka

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

Systemy wirtualnej rzeczywistości. Komponenty i serwisy

Systemy wirtualnej rzeczywistości. Komponenty i serwisy Uniwersytet Zielonogórski Instytut Sterowania i Systemów Informatycznych Systemy wirtualnej rzeczywistości Laboratorium Komponenty i serwisy Wstęp: W trzeciej części przedstawione zostaną podstawowe techniki

Bardziej szczegółowo

CSS + HTML. Front end publikacji internetowej. Cięcie grafiki i CSS Ćwiczenia z CSS Typografia CSS image sprites

CSS + HTML. Front end publikacji internetowej. Cięcie grafiki i CSS Ćwiczenia z CSS Typografia CSS image sprites CSS + HTML Front end publikacji internetowej Cięcie grafiki i CSS Ćwiczenia z CSS Typografia CSS image sprites 1 CSS + pocięcie grafiki Struktura folderów reset.css Cięcie grafiki w Photoshopie 2 Nasza

Bardziej szczegółowo

PyX jest pakietem Pythona do grafiki wektorowej. Pozawala zatem tworzyd pliki EPS oraz PDF.

PyX jest pakietem Pythona do grafiki wektorowej. Pozawala zatem tworzyd pliki EPS oraz PDF. PyX jest pakietem Pythona do grafiki wektorowej. Pozawala zatem tworzyd pliki EPS oraz PDF. Aby go zainstalowad należy rozpakowad pakiet o nazwie PyX-0.10 do odpowiedniego katalogu. Będzie on dostępny

Bardziej szczegółowo

Pokażę w jaki sposób można zrobić prostą grafikę programem GIMP. 1. Uruchom aplikację GIMP klikając w ikonę na pulpicie.

Pokażę w jaki sposób można zrobić prostą grafikę programem GIMP. 1. Uruchom aplikację GIMP klikając w ikonę na pulpicie. Tworzenie grafiki Jest wiele oprogramowania służącego tworzeniu grafiki. Wiele z nich daje tylko podstawowe możliwości (np. Paint). Są też programy o rozbudowanych możliwościach przeznaczone do robienia

Bardziej szczegółowo

Obsługa grafiki w Delphi, rysowanie na płótnie, obsługa myszki, zapisywanie obrazków do plików, bitmapy pozaekranowe.

Obsługa grafiki w Delphi, rysowanie na płótnie, obsługa myszki, zapisywanie obrazków do plików, bitmapy pozaekranowe. Programowanie Wizualno-Obiektowe (studia zaoczne - inżynieria komputerowa) Zajęcia z Delphi 5, program 1 Temat: Zadanie: Obsługa grafiki w Delphi, rysowanie na płótnie, obsługa myszki, zapisywanie obrazków

Bardziej szczegółowo

Ćwiczenie: JavaScript Cookies (3x45 minut)

Ćwiczenie: JavaScript Cookies (3x45 minut) Ćwiczenie: JavaScript Cookies (3x45 minut) Cookies niewielkie porcje danych tekstowych, które mogą być przesyłane między serwerem a przeglądarką. Przeglądarka przechowuje te dane przez określony czas.

Bardziej szczegółowo

Tematy lekcji zajęć komputerowych klasa 5b grupa 1 i grupa 2

Tematy lekcji zajęć komputerowych klasa 5b grupa 1 i grupa 2 Tematy lekcji zajęć komputerowych klasa 5b grupa 1 i grupa 2 1 Program nauczania. Przedmiotowy system oceniania. Regulamin pracowni komputerowej. - 7 punktów regulaminu potrafi powiedzieć, czego się będzie

Bardziej szczegółowo

która metoda jest najlepsza

która metoda jest najlepsza która metoda jest najlepsza dr inż. Marek Żabka Instytut Matematyki Wydział Matematyki Stosowanej Politechnika Śląska 20 września 2012r Nowa metoda tworzenia grafiki na stronie internetowej: element,,canvas

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

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

Politechnika Warszawska Wydział Mechatroniki Instytut Automatyki i Robotyki

Politechnika Warszawska Wydział Mechatroniki Instytut Automatyki i Robotyki Politechnika Warszawska Wydział Mechatroniki Instytut Automatyki i Robotyki Ćwiczenie laboratoryjne 2 Temat: Modelowanie powierzchni swobodnych 3D przy użyciu programu Autodesk Inventor Spis treści 1.

Bardziej szczegółowo

Jarosław Kuchta Podstawy Programowania Obiektowego. Podstawy grafiki obiektowej

Jarosław Kuchta Podstawy Programowania Obiektowego. Podstawy grafiki obiektowej Jarosław Kuchta Podstawy Programowania Obiektowego Podstawy grafiki obiektowej Zagadnienia Grafika proceduralna grafika obiektowa Grafika WPF dualizm XAML C# Właściwości obiektów graficznych edycja właściwości

Bardziej szczegółowo

Wstęp do GIMP wycinanie obiektu z obrazka, projekt napisu. Rozpoczynamy prace w GIMP-e

Wstęp do GIMP wycinanie obiektu z obrazka, projekt napisu. Rozpoczynamy prace w GIMP-e Rozpoczynamy prace w GIMP-e 1. Odpalamy program GIMP szukamy go albo na pulpicie albo w programach (ikonka programu widoczna w prawym górnym rogu). 2. Program uruchamia się na początku widzimy tzw. Pulpit

Bardziej szczegółowo

TWORZENIE OBIEKTÓW GRAFICZNYCH

TWORZENIE OBIEKTÓW GRAFICZNYCH R O Z D Z I A Ł 2 TWORZENIE OBIEKTÓW GRAFICZNYCH Rozdział ten poświęcony będzie dokładnemu wyjaśnieniu, w jaki sposób działają polecenia służące do rysowania różnych obiektów oraz jak z nich korzystać.

Bardziej szczegółowo

Microsoft PowerPoint 2003 efektywne tworzenie i prezentacji multimedialnych

Microsoft PowerPoint 2003 efektywne tworzenie i prezentacji multimedialnych Microsoft PowerPoint 2003 efektywne tworzenie i prezentacji multimedialnych Projekt: Wdrożenie strategii szkoleniowej prowadzony przez KancelarięPrezesa Rady Ministrów Projekt współfinansowany przez Unię

Bardziej szczegółowo

Ćwiczenie 4 - Podstawy materiałów i tekstur. Renderowanie obrazu i animacji

Ćwiczenie 4 - Podstawy materiałów i tekstur. Renderowanie obrazu i animacji Ćwiczenie 4 - Podstawy materiałów i tekstur. Renderowanie obrazu i animacji Materiał jest zbiorem informacji o właściwościach powierzchni. Składa się na niego kolor, sposób odbijania światła i sposób nakładania

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

Maskowanie i selekcja

Maskowanie i selekcja Maskowanie i selekcja Maska prostokątna Grafika bitmapowa - Corel PHOTO-PAINT Pozwala definiować prostokątne obszary edytowalne. Kiedy chcemy wykonać operacje nie na całym obrazku, lecz na jego części,

Bardziej szczegółowo

FORMATY PLIKÓW GRAFICZNYCH

FORMATY PLIKÓW GRAFICZNYCH FORMATY PLIKÓW GRAFICZNYCH Różnice między nimi. Ich wady i zalety. Marta Łukasik Plan prezentacji Formaty plików graficznych Grafika wektorowa Grafika rastrowa GIF PNG JPG SAV FORMATY PLIKÓW GRAFICZNYCH

Bardziej szczegółowo

4. Rysowanie krzywych

4. Rysowanie krzywych 1. Operator plot y x \begin{tikzpicture} \draw[->] (-0.2,0) -- (4.2,0) node[right] {$x$}; \draw[->] (0,-1.2) -- (0,4.2) node[above] {$y$}; \draw (3,4) -- (3,3) plot coordinates{(2,3) (3,0) (4,3)}; \end{tikzpicture}

Bardziej szczegółowo

Grażyna Koba. Grafika komputerowa. materiały dodatkowe do podręcznika. Informatyka dla gimnazjum

Grażyna Koba. Grafika komputerowa. materiały dodatkowe do podręcznika. Informatyka dla gimnazjum Grażyna Koba Grafika komputerowa materiały dodatkowe do podręcznika Informatyka dla gimnazjum Rysunki i animacje w Edytorze postaci 1. Rysunek w Edytorze postaci Edytor postaci (rys. 1.) jest częścią programu

Bardziej szczegółowo

KGGiBM GRAFIKA INŻYNIERSKA Rok III, sem. VI, sem IV SN WILiŚ Rok akademicki 2011/2012

KGGiBM GRAFIKA INŻYNIERSKA Rok III, sem. VI, sem IV SN WILiŚ Rok akademicki 2011/2012 Rysowanie precyzyjne 7 W ćwiczeniu tym pokazane zostaną wybrane techniki bardzo dokładnego rysowania obiektów w programie AutoCAD 2012, między innymi wykorzystanie punktów charakterystycznych. Narysować

Bardziej szczegółowo

Wykład VII PASCAL - grafika;

Wykład VII PASCAL - grafika; Podstawy programowania Wykład VII PASCAL - grafika; 1 Procedura InitGraph() InitGraph ( var sterownik,tryb:integer; katalog:string ); biblioteka: GRAPH Służy do włączenia trybu graficznego. Możliwe sterowniki

Bardziej szczegółowo

Rysowanie precyzyjne. Polecenie:

Rysowanie precyzyjne. Polecenie: 7 Rysowanie precyzyjne W ćwiczeniu tym pokazane zostaną różne techniki bardzo dokładnego rysowania obiektów w programie AutoCAD 2010, między innymi wykorzystanie punktów charakterystycznych. Z uwagi na

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

Microsoft Small Basic

Microsoft Small Basic Microsoft Small Basic Obiekty Flickr, ImageList i Network Szacowany czas trwania lekcji: 1 godzina Obiekty Flickr, ImageList i Network Podczas tej lekcji dowiesz się, jak: Używać różnych operacji na obiekcie

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

Jak uzyskać efekt 3D na zdjęciach z wykorzystaniem programu InkScape

Jak uzyskać efekt 3D na zdjęciach z wykorzystaniem programu InkScape Jak uzyskać efekt 3D na zdjęciach z wykorzystaniem programu InkScape Program InkScape jest bezpłatnym polskojęzycznym programem grafiki wektorowej do pobrania ze strony http://www.dobreprogramy.pl/inkscape,program,windows,12218.html.

Bardziej szczegółowo

CSS. Kaskadowe Arkusze Stylów

CSS. Kaskadowe Arkusze Stylów CSS Kaskadowe Arkusze Stylów CSS CSS = Cascading Style Sheets Style określają sposób wyświetlania zawartości elementów HTML Arkusz stylów jest zbiorem takich reguł Pojawiły się w HTML 4.0 by rozwiązać

Bardziej szczegółowo

Pascal - grafika. Uruchomienie trybu graficznego. Moduł graph. Domyślny tryb graficzny

Pascal - grafika. Uruchomienie trybu graficznego. Moduł graph. Domyślny tryb graficzny Moduł graph Pascal - grafika Pascal zawiera standardowy moduł do tworzenia obiektów graficznych linii, punktów, figur geometrycznych itp. Chcąc go użyć należy w programie (w nagłówku) wstawić deklarację:

Bardziej szczegółowo

Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie

Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie Justyna Klimczyk j_klimczyk@poczta.onet.pl Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie Scenariusz lekcji informatyki klasa II gimnazjum Temat : Strona WWW pierwsze

Bardziej szczegółowo

Janusz Ganczarski. OpenGL Pierwszy program

Janusz Ganczarski. OpenGL Pierwszy program Janusz Ganczarski OpenGL Pierwszy program Spis treści Spis treści..................................... 1 1. Pierwszy program.............................. 1 1.1. Rysowanie sceny 3D...........................

Bardziej szczegółowo

PyGame Gra w Ponga. Spis treści

PyGame Gra w Ponga. Spis treści - 1 - PyGame Gra w Ponga Opis implementacji: Używając biblioteki PyGame oraz języka Python, stworzymy prostą grę Pong. Autorzy: Łukasz Zarzecki, Robert Bednarz Czas realizacji: 90 min Poziom trudności:

Bardziej szczegółowo

BACKUP BAZ DANYCH FIREBIRD

BACKUP BAZ DANYCH FIREBIRD BACKUP BAZ DANYCH FIREBIRD SPIS TREŚCI Informacje ogólne... 2 Tworzenie projektu... 2 Krok 1: Informacje podstawowe... 2 Krok 2: Dane... 3 Backup bazy umieszczonej na serwerze... 3 Bezpośredni backup pliku

Bardziej szczegółowo

Spis treści. Księgarnia PWN: Roland Zimek - SWiSH Max2 i SWiSH Max3. Wprowadzenie... 9

Spis treści. Księgarnia PWN: Roland Zimek - SWiSH Max2 i SWiSH Max3. Wprowadzenie... 9 Księgarnia PWN: Roland Zimek - SWiSH Max2 i SWiSH Max3 Spis treści Wprowadzenie... 9 1. Opis programu i instalacja... 13 1.1. Nowości w SWiSH Max2... 13 1.1.1. Wygląd okna programu... 13 1.1.2. Język skryptowy...

Bardziej szczegółowo

Specyfikacja techniczna dot. mailingów HTML

Specyfikacja techniczna dot. mailingów HTML Specyfikacja techniczna dot. mailingów HTML Informacje wstępne Wszystkie składniki mailingu (pliki graficzne, teksty, pliki HTML) muszą być przekazane do melog.com dwa dni albo maksymalnie dzień wcześniej

Bardziej szczegółowo

Programowanie gier 3D w HTML5. Andrzej P.Urbański Politechnika Poznańska

Programowanie gier 3D w HTML5. Andrzej P.Urbański Politechnika Poznańska Programowanie gier 3D w HTML5 Andrzej P.Urbański Politechnika Poznańska Moje marzenie Od dawna jest znany pakiet Open GL napisany w C++ i bardzo ułatwiający tworzenie gier 3D Zaproponowałem kiedyś jako

Bardziej szczegółowo

Kolejną czynnością będzie wyświetlenie dwóch pasków narzędzi, które służą do obsługi układów współrzędnych, o nazwach LUW i LUW II.

Kolejną czynnością będzie wyświetlenie dwóch pasków narzędzi, które służą do obsługi układów współrzędnych, o nazwach LUW i LUW II. Przestrzeń AutoCAD-a jest zbudowana wokół kartezjańskiego układu współrzędnych. Oznacza to, że każdy punkt w przestrzeni posiada trzy współrzędne (X,Y,Z). Do tej pory wszystkie rysowane przez nas projekty

Bardziej szczegółowo

Kod źródłowy programu: program Grafika1; uses crt, graph; (1) var sterownik, tryb:smallint; (2)

Kod źródłowy programu: program Grafika1; uses crt, graph; (1) var sterownik, tryb:smallint; (2) Grafika w Pascalu. Do tej pory, tworząc programy w Pascalu, wykorzystywaliśmy jedynie tryb tekstowy. Jednak Pascal, tak jak i inne języki programowania, umoŝliwia korzystanie równieŝ z trybu graficznego.

Bardziej szczegółowo

HTML (HyperText Markup Language) hipertekstowy język znaczników

HTML (HyperText Markup Language) hipertekstowy język znaczników HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony

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

STRONY INTERNETOWE mgr inż. Adrian Zapała

STRONY INTERNETOWE mgr inż. Adrian Zapała 1 STRONY INTERNETOWE mgr inż. Adrian Zapała STRONY INTERNETOWE Rodzaje stron internetowych statyczne (statyczny HTML + CSS) dynamiczne (PHP, ASP, technologie Flash) 2 JĘZYKI STRON WWW HTML (ang. HyperText

Bardziej szczegółowo

Specyfikacja techniczna

Specyfikacja techniczna Specyfikacja techniczna Informacje wstępne Grupa Melog.com sp. z o.o Morizon SA nie ponosi odpowiedzialności finansowej w przypadku gdy klient nie dostarczy poprawionej wersji kreacji lub nie spełnia ona

Bardziej szczegółowo

Tworzenie grafiki na potrzeby WWW

Tworzenie grafiki na potrzeby WWW Tworzenie grafiki na potrzeby WWW Kluczem do opanowania GIMPa jest biegłe posługiwanie się selekcjami, ścieżkami oraz warstwami. Każde z tych narzędzi znajduje swoje zastosowanie podczas tworzenia witryn

Bardziej szczegółowo

Projekt witryny pt. Oko

Projekt witryny pt. Oko Strona 1 Projekt witryny pt. Oko Włodzimierz Gajda Gdy znamy podstawowe cechy GIMP-a, umiemy pracować z warstwami, wprawnie operujemy selekcjami oraz wybranymi narzędziami moŝemy przystąpić do pracy nad

Bardziej szczegółowo

WSTĘP; NARZĘDZIA DO RYSOWANIA

WSTĘP; NARZĘDZIA DO RYSOWANIA 1 z 5 Link do instalacji Gimpa Gimp WSTĘP; NARZĘDZIA DO RYSOWANIA Menu w Gimpie znajduje się w oknie głównym Gimpa i w oknie obrazu. Dostępne jest również po kliknięciu prawym klawiszem myszy na obraz.

Bardziej szczegółowo

Kurs Adobe Photoshop Elements 11

Kurs Adobe Photoshop Elements 11 Kurs Adobe Photoshop Elements 11 Gladiatorx1 Kształty, kształty własne 2015-01- 01 Spis treści Wstęp... 2 Kształty... 2 Opcje narzędzia... 2 Rysujemy kształty... 5 Opcje dodawania, odejmowania obszaru

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

Wymagania na poszczególne oceny w klasach 3 gimnazjum

Wymagania na poszczególne oceny w klasach 3 gimnazjum Wymagania na poszczególne oceny w klasach 3 gimnazjum Znaczenie komputera we współczesnym świecie Przypomnienie wiadomości na temat języka HTML Wstawianie tabeli na stronę WWW Wstawianie listy punktowanej

Bardziej szczegółowo

Za pomocą atrybutu ROWS moŝemy dokonać podziału ekranu w poziomie. Odpowiedni kod powinien wyglądać następująco:

Za pomocą atrybutu ROWS moŝemy dokonać podziału ekranu w poziomie. Odpowiedni kod powinien wyglądać następująco: 1 1. Ramki Najbardziej elastycznym sposobem budowania stron jest uŝycie ramek. Ułatwiają one nawigowanie w wielostronicowych dokumentach HTML, poprzez podział ekranu na kilka obszarów. KaŜdy z nich zawiera

Bardziej szczegółowo

Cykl lekcji informatyki w klasie IV szkoły podstawowej. Wstęp

Cykl lekcji informatyki w klasie IV szkoły podstawowej. Wstęp Cykl lekcji informatyki w klasie IV szkoły podstawowej Wstęp Poniżej przedstawiam cykl początkowych lekcji informatyki poświęconym programowi Paint. Nie są to scenariusze lekcji, lecz coś w rodzaju kart

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

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

AUTOCAD MIERZENIE I PODZIAŁ

AUTOCAD MIERZENIE I PODZIAŁ AUTOCAD MIERZENIE I PODZIAŁ Czasami konieczne jest rozmieszczenie na obiekcie punktów lub bloków, w równych odstępach. Na przykład, moŝe zachodzić konieczność zlokalizowania na obiekcie punktów oddalonych

Bardziej szczegółowo

CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów).

CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów). Co to jest CSS? CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów). Co mogę zrobić z CSS? CSS jest językiem stylu określającego układ graficzny dokumentów HTML. Na przykład, CSS

Bardziej szczegółowo

2 Podstawy tworzenia stron internetowych

2 Podstawy tworzenia stron internetowych 2 Podstawy tworzenia stron internetowych 2.1. HTML5 i struktura dokumentu Podstawą działania wszystkich stron internetowych jest język HTML (Hypertext Markup Language) hipertekstowy język znaczników. Dokument

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

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

1. Narzędzia główne: WORD 2010 INTERFEJS UŻYTKOWNIKA. wycinamy tekst, grafikę

1. Narzędzia główne: WORD 2010 INTERFEJS UŻYTKOWNIKA. wycinamy tekst, grafikę 1. Narzędzia główne: wycinamy tekst, grafikę stosowanie formatowania tekstu i niektórych podstawowych elementów graficznych umieszczane są wszystkie kopiowane i wycinane pliki wklejenie zawartości schowka

Bardziej szczegółowo

Uzyskanie podkładu topograficznego z Geoportalu przy użyciu biblioteki GDAL. Krzysztof Kochan

Uzyskanie podkładu topograficznego z Geoportalu przy użyciu biblioteki GDAL. Krzysztof Kochan Uzyskanie podkładu topograficznego z Geoportalu przy użyciu biblioteki GDAL Krzysztof Kochan Cel zadania Uzyskanie zgeoreferencjowanego podkładu topograficznego z Geoportalu, o określonych granicach,przy

Bardziej szczegółowo

Co to jest NODE.JS? Nowoczesne środowisko programistyczne

Co to jest NODE.JS? Nowoczesne środowisko programistyczne Node.js Co to jest NODE.JS? Nowoczesne środowisko programistyczne Środowisko programistyczne w sensie zestawu gotowych klas i metod których można używać do przygotowania własnych skalowalnych i wydajnych

Bardziej szczegółowo

1. OPEN OFFICE RYSUNKI

1. OPEN OFFICE RYSUNKI 1. 1 1. OPEN OFFICE RYSUNKI 1.1 Wiadomości podstawowe Po uruchomieniu programu Draw okno aplikacji wygląda jak na poniższym rysunku. Składa się ono z głównego okna, w którym edytuje się rysunek oraz czterech

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

Edycja strony: W edycję danej strony wchodzimy poprzez naciśnięcie opcji

Edycja strony: W edycję danej strony wchodzimy poprzez naciśnięcie opcji Edycja strony: W edycję danej strony wchodzimy poprzez naciśnięcie opcji uzyskujemy widok: a. Wstawianie tekstów Tekst możemy wpisywać bezpośrednio w panelu lub wklejać do edytora. Jeśli wklejamy tekst

Bardziej szczegółowo

ECDL/ICDL CAD 2D Moduł S8 Sylabus - wersja 1.5

ECDL/ICDL CAD 2D Moduł S8 Sylabus - wersja 1.5 ECDL/ICDL CAD 2D Moduł S8 Sylabus - wersja 1.5 Przeznaczenie Sylabusa Dokument ten zawiera szczegółowy Sylabus dla modułu ECDL/ICDL CAD 2D. Sylabus opisuje zakres wiedzy i umiejętności, jakie musi opanować

Bardziej szczegółowo

Odbicie na szkłach okularów

Odbicie na szkłach okularów Odbicie na szkłach okularów Jedna z wad fotografii studyjnych polega na tym, że w okularach sfotografowanych modeli odbija się oświetlenie i wyposażenie studio. W takich sytuacjach bardzo często stosuje

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

Poprzednia wersja HTML, HTML 4.01, pochodzi z 1999. Sieć od tego czasu zmieniła się znacznie.

Poprzednia wersja HTML, HTML 4.01, pochodzi z 1999. Sieć od tego czasu zmieniła się znacznie. Co to jest HTML5? HTML5 będzie nowym standardem dla HTML. Poprzednia wersja HTML, HTML 4.01, pochodzi z 1999. Sieć od tego czasu zmieniła się znacznie. HTML5 jest ciągle w stadium tworzenia i konkretyzacji.

Bardziej szczegółowo

POLITYKA COOKIES. Definicje. Rodzaje wykorzystywanych Cookies

POLITYKA COOKIES. Definicje. Rodzaje wykorzystywanych Cookies POLITYKA COOKIES Niniejsza Polityka Cookies określa zasady przechowywania i dostępu do informacji na urządzeniach Użytkownika za pomocą plików Cookies, służących realizacji usług świadczonych drogą elektroniczną

Bardziej szczegółowo

Photoshop. Podstawy budowy obrazu komputerowego

Photoshop. Podstawy budowy obrazu komputerowego Photoshop Podstawy budowy obrazu komputerowego Wykład 1 Autor: Elżbieta Fedko O czym dzisiaj będziemy mówić? Co to jest grafika komputerowa? Budowa obrazu w grafice wektorowej i rastrowej. Zastosowanie

Bardziej szczegółowo

Widoczność zmiennych Czy wartości każdej zmiennej można zmieniać w dowolnym miejscu kodu? Czy można zadeklarować dwie zmienne o takich samych nazwach?

Widoczność zmiennych Czy wartości każdej zmiennej można zmieniać w dowolnym miejscu kodu? Czy można zadeklarować dwie zmienne o takich samych nazwach? Część XVIII C++ Funkcje Widoczność zmiennych Czy wartości każdej zmiennej można zmieniać w dowolnym miejscu kodu? Czy można zadeklarować dwie zmienne o takich samych nazwach? Umiemy już podzielić nasz

Bardziej szczegółowo

Przetwarzanie grafiki rastrowej na wektorową

Przetwarzanie grafiki rastrowej na wektorową Przetwarzanie grafiki rastrowej na wektorową Inaczej wektoryzacja, lub trasowanie, czyli zastąpienie rysunku rastrowego rysunkiem wektorowym. Wykonanie: Piotr Dróżdż Podstawowe różnice między grafiką wektorową,

Bardziej szczegółowo

KATEGORIA OBSZAR WIEDZY

KATEGORIA OBSZAR WIEDZY Moduł 6 - Grafika menedżerska i prezentacyjna - od kandydata wymaga się umiejętności posługiwania się programem komputerowym do tworzenia. Zdający powinien posiadać umiejętności wykonania następujących

Bardziej szczegółowo

OpenGL przezroczystość

OpenGL przezroczystość OpenGL przezroczystość W standardzie OpenGL efekty przezroczystości uzyskuje się poprzez zezwolenie na łączenie kolorów: Kolor piksela tworzy się na podstawie kolorów obiektu przesłanianego i przesłaniającego

Bardziej szczegółowo

Bootstrap. Tworzenie serwisów Web 2.0. dr inż. Robert Perliński rperlinski@icis.pcz.pl

Bootstrap. Tworzenie serwisów Web 2.0. dr inż. Robert Perliński rperlinski@icis.pcz.pl ootstrap 1/15 Bootstrap Tworzenie serwisów Web 2.0 dr inż. Robert Perliński rperlinski@icis.pcz.pl Politechnika Częstochowska Instytut Informatyki Teoretycznej i Stosowanej 11 kwietnia 2015 Bootstrap 2/15

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

Rozmiar i wielkość dokumentu

Rozmiar i wielkość dokumentu Rozmiar i wielkość dokumentu I. Organizacja dokumentu 1. Otwórz dokument 01_Jesien.jpg 2. Zapisz go pod nazwą 01_Jesien_TwojeNazwiskoTwojeImie_SlowoDiO.xcf jako macierzysty dokument programu Gimp. Rysunek

Bardziej szczegółowo

Przewodnik po obszarze roboczym

Przewodnik po obszarze roboczym Przewodnik po obszarze roboczym Witamy w programie CorelDRAW, wszechstronnym programie do tworzenia rysunków wektorowych i projektów graficznych przeznaczonym dla profesjonalnych grafików. Projekty tworzone

Bardziej szczegółowo

P R OGRA M OW A N I E KOMPUTERÓW Ćwiczenia laboratoryjne. TEMAT 8: Moduły standardowe

P R OGRA M OW A N I E KOMPUTERÓW Ćwiczenia laboratoryjne. TEMAT 8: Moduły standardowe Pakiet crt zawiera procedury i funkcje, które pozwalają na sterowanie trybem ekranu, kolorami, oknami i dźwiękiem. Opisy procedur są zawarte w pliku pomocy, można je wyświetlić z menu Help Standard units

Bardziej szczegółowo

Przekształcenie danych przestrzennych w interaktywne mapy dostępne na stronach www (WARSZTATY, poziom zaawansowany)

Przekształcenie danych przestrzennych w interaktywne mapy dostępne na stronach www (WARSZTATY, poziom zaawansowany) Wrocławski Instytut Zastosowań Informacji Przestrzennej i Sztucznej Inteligencji Przekształcenie danych przestrzennych w interaktywne mapy dostępne na stronach www (WARSZTATY, poziom zaawansowany) Szkolenia

Bardziej szczegółowo