Projektowanie Aplikacji Internetowych Artur Niewiarowski Wydział Fizyki, Matematyki i Informatyki Politechnika Krakowska.

Prezentacja na temat: "Projektowanie Aplikacji Internetowych Artur Niewiarowski Wydział Fizyki, Matematyki i Informatyki Politechnika Krakowska."— Zapis prezentacji:

1 Projektowanie Aplikacji Internetowych Artur Niewiarowski Wydział Fizyki, Matematyki i Informatyki Politechnika Krakowska

2 PHP, MVC, MVC(B)L

3 Czym jest model MVC

4 wzorzec MVC – skrót od Model View Controller - Model Widok Kontroler wymyślony został w laboratoriach PARC (Palo Alto Research Centre) firmy Xerox w latach '70 MVC został wykorzystany do zaprojektowania interfejsu użytkownika w języku Smalltalk pierwszego zastosowania MVC w aplikacjach internetowych dokonała firma Sun na potrzeby Javy Model View Controller

5 MVC przedstawiany jest jako dobra architektura aplikacji internetowej jest sposobem na oddzielenie poszczególnych części składowych aplikacji definiuje trzy podstawowe elementy aplikacji, które są od siebie niezależne i pozwalają na dużą elastyczność. Model View Controller

6 Wzorzec MVC pozwala na: oddzielenie od siebie logiki biznesowej (jak i gdzie dane są przechowywane, kto ma do nich dostęp, jak dane są przetwarzane), logiki prezentacyjnej oraz sterowania aplikacją, dużą elastyczność podczas budowania, użytkowania i rozszerzania aplikacji Model View Controller

7 Wzorca Model View Controller powinniśmy używać jeżeli: aplikacja ma być rozbudowana i skomplikowana aplikacja musi być elastyczna, mieć możliwość rozbudowy pracuje nad nią wielu programistów, dzięki temu możemy w łatwy sposób podzielić odpowiedzialność za poszczególne moduły składowe Model View Controller

8 Model jest odpowiedzialny za tzw. logikę biznesową. Jest odpowiedzialny za przechowywanie danych. Udostępnia on spójny interfejs i ukrywa właściwą implementację, więc obiekt używający modelu nie musi wiedzieć, czy dane przechowywane są w bazie danych czy w plikach. Dla obiektu ważne jest, aby model miał API, które on zna. Model Logika biznesowa występuje zwykle w dużych systemach gdzie dane są dostarczane przez inne systemy funkcjonujące w organizacji. Jest spójna z procesami zachodzącymi w organizacji i niejako odzwierciedla je.

9 Cechą charakterystyczną jego funkcjonalności jest to, że jeżeli będziemy mieli dwie klasy modelu, jedną operując na bazie, drugą na plikach i obie będą miały ten sam interfejs, możemy je wymieniać, bez obawy, że program przestanie działać. Model

10 Model powinien być jedyną częścią aplikacji, która przechowuje dane w sposób trwały. Sposób przechowywania tych danych jest tutaj zupełnie obojętny - może to być baza danych, pliki tekstowe, itd. Ważne jest, aby szczegóły implementacyjne związane ze sposobem, w jaki model przechowuje dane, były ukryte przed resztą aplikacji. Model powinien dostarczać innym komponentom spójnego interfejsu do przetwarzania tych danych i ukrywać implementację - np. zapytania SQL. Model - podsumowanie

11 Widok jest częścią aplikacji odpowiedzialną za wyświetlenie danych. Wymieniając widok możemy zmieniać sposób wyświetlania danych, np. pomiędzy HTML, RSS, XML, flash, pdf, doc, itd. Widok

12 Widok powinien pobierać dane z modelu i formatować je do pożądanego formatu Widok nie posiada informacji o sposobie przechowywania danych Widok nie może w żaden sposób zmieniać danych - może je wyłącznie wyświetlać Widok powinien utworzyć instancje klas modelu i wywołać metody odpowiedzialne za pobranie odpowiednich danych Widok to przede wszystkim kod, który "wyciąga" z modelu potrzebne dane Widok

13 Kontroler jest sercem całej aplikacji Odpowiedzialny jest za przetwarzanie zadań i wywoływanie właściwej akcji lub widoku Sterownik powinien być częścią świadomą żądania HTTP Na podstawie analizy żądania Sterownik powinien zdecydować, jakie akcje należy wykonać i jaki widok wyświetlić Kontroler = sterownik

14 Jeżeli aplikacja ma wyświetlić pewne dane, wywoływany jest widok W celu oprogramowania możliwości modyfikacji danych, należy do sterownika wprowadzić akcje Akcja jest to pojedyncza czynność wykonywana przez aplikacje. W najczęstszym przypadku akcja jest klasą, która wywołana przez kontroler zwraca nazwę widoku do wyświetlenia. Przykłady akcji to:  Dodaj użytkownika()  Wyświetl artykuły()  Dodaj produkt do koszyka() Kontroler = sterownik

15 Sterownik używa parametrów zawartych w URLu lub w danych POST, aby wybrać widok. Typowy adres URL będzie miał postać: index.php?widok=ListaUżytkowników Kontroler = sterownik

16 Wzorzec MVC można implementować na wiele sposobów.

17 Przykład klasy modelu

18 Przykład klasy widoku

19 Przykład klasy kontrolera, cz.1.

20 Przykład klasy kontrolera, cz. 2.

21 Uruchomienie MVC

22 Czym jest model MVC(B)L

23 Kontroler => sterownik przepływu Model => emanacja źródła danych, np. bazy danych Widok => prezentacja danych użytkownikowi MVC(B)L => Model View Controller (Business) Logic Logika biznesowa => algorytmy modelujące procesy zachodzące w firmie, organizacji, itp., np.:  obliczanie podatków  składanie i sprawdzanie zamówienia  obliczanie raty kredytu  itd. Logika biznesowa => osobne klasy, osobna warstwa http://webmastah.pl/bye-bye-mvc/

24 JavaScript

25 function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } JavaScript in Head A Paragraph. Try it document.getElementById

26 My First Web Page My first paragraph. document.write(5 + 6); document.write

27 Activate debugging in your browser (Chrome, IE, Firefox) with F12, and select "Console" in the debugger menu. console.log(5 + 6); console.log

28 JavaScript Statements Statements are separated by semicolons. The variables x, y, and z are assigned the values 5, 6, and 11: var x = 5; var y = 6; var z = x + y; document.getElementById("demo").innerHTML = z; var ;

29 var pi = 3.14; var person = "John Doe"; var answer = 'Yes I am!'; var person = "John Doe", carName = "Volvo", price = 200; Zmienne

30 Comments are NOT Executed var x = 5; // var x = 6; I will not be executed document.getElementById("demo").innerHTML = x; Komentarze

31 /* The code below will change the heading with id = "myH" and the paragraph with id = "myp" in my web page: */ document.getElementById("myH").innerHTML = "My First Page"; document.getElementById("myP").innerHTML = "My first paragraph."; Note: The comment block is not executed. Komentarze

32 JavaScript is Case Sensitive Try change lastName to lastname. var lastName = "Doe"; var lastname = "Peterson"; document.getElementById("demo").innerHTML = lastName; Rozróżnianie wielkości liter

33 Słowa kluczowe

34 Poniższych słów kluczowych nie powinno się używać w nazewnictwie: zmiennych, funkcji i obiektów

35 Słowa kluczowe Poniższych słów kluczowych nie powinno się używać w nazewnictwie: obiektów, właściwości i metod

36 Słowa kluczowe plus wiele innych: http://www.w3schools.com/js/js_reserved.asp

37 JavaScript Numbers Number can be written with or without decimals. document.getElementById("demo").innerHTML = 10.50; Wartości liczbowe

38 var x1 = 34.00; var x2 = 34; var y = 123e5; var z = 123e-5; document.getElementById("demo").innerHTML = x1 + " " + x2 + " " + y + " " + z Wartości liczbowe

39 var myNumber = 128; myNumber.toString(16); // returns 80 myNumber.toString(8); // returns 200 myNumber.toString(2); // returns 10000000 Wybrane operacje na liczbach var x = 2 / 0; // x will be Infinity var y = -2 / 0; // y will be -Infinity var x = 100 / "Apple"; // x will be NaN (Not a Number)

40 var x = 9.656; x.toExponential(2); // returns 9.66e+0 x.toExponential(4); // returns 9.6560e+0 x.toExponential(6); // returns 9.656000e+0 Wybrane operacje na liczbach var x = 9.656; x.toFixed(0); // returns 10 x.toFixed(2); // returns 9.66 x.toFixed(4); // returns 9.6560 x.toFixed(6); // returns 9.656000

41 parseInt("10"); // returns 10 parseInt("10.33"); // returns 10 parseInt("10 20 30"); // returns 10 parseInt("10 years"); // returns 10 parseInt("years 10"); // returns NaN Wybrane operacje na liczbach parseFloat("10"); // returns 10 parseFloat("10.33"); // returns 10.33 parseFloat("10 20 30"); // returns 10 parseFloat("10 years"); // returns 10 parseFloat("years 10"); // returns NaN

42 Math.random() returns a random number betwween 0 and 1. Try it function myFunction() { document.getElementById("demo").innerHTML += Math.random() + " "; } Obiekt Math Math.random()

43 Math.min(0, 150, 30, 20, -8); // returns -8 Math.max(0, 150, 30, 20, -8); // returns 150 Obiekt Math Math.min() and Math.max() Math.round(4.7); // returns 5 Math.round(4.4); // returns 4 Math.round() Math.ceil(4.4); // returns 5 Math.ceil() Math.floor(4.7); // returns 4 Math.floor(Math.random() * 11); // returns a random number between 0 and 10 Math.floor()

44 Math.E; // returns Euler's number Math.PI; // returns PI Math.SQRT2; // returns the square root of 2 Math.SQRT1_2; // returns the square root of 1/2 Math.LN2; // returns the natural logarithm of 2 Math.LN10; // returns the natural logarithm of 10 Math.LOG2E; // returns base 2 logarithm of E Math.LOG10E; // returns base 10 logarithm of E Obiekt Math Stałe

45 Obiekt Math Popularne funkcje

46 Operatory przypisania

47 var x = true; var y = false; document.getElementById("demo").innerHTML = x + " "; document.getElementById("demo").innerHTML += x + y - x; Wartości boolowskie

48 Operatory porównania

49 Operatory logiczne

50 Warunki Try it function myFunction() { var greeting; var time = new Date().getHours(); if (time < 10) { greeting = "Good morning"; } else if (time < 20) { greeting = "Good day"; } else { greeting = "Good evening"; } document.getElementById("demo").innerHTML = greeting; }

51 Wybory Kliknij function myFunction() { var text; switch (new Date().getDay()) { case 6: text = "Dzisiaj jest sobota"; break; case 0: text = "Dzisiaj jest niedziela"; break; default: text = "Czekamy na weekend :)"; } document.getElementById("demo").innerHTML = text; }

52 var cars = ["Saab","Volvo","BMW"]; document.getElementById("demo").innerHTML = cars[0]; Tablice

53 var num = [[1,2,3],[4,5,6],[7,8,9]]; document.getElementById("demo").innerHTML = num[0][0]; document.getElementById("demo").innerHTML += num[1][1]; Tablice

54 var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.getElementById("demo").innerHTML = fruits + " "; document.getElementById("demo").innerHTML += fruits.sort() + " "; document.getElementById("demo").innerHTML += fruits; document.writeln(fruits.length); document.writeln(fruits.indexOf("Orange")); document.writeln(fruits.join(" * ")); Tablice – wybrane operacje na tablicach

55 Try it var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.getElementById("demo").innerHTML = fruits; function myFunction() { fruits[fruits.length] = "Kiwi"; document.getElementById("demo").innerHTML = fruits; } Tablice – dodawanie elementów do tablicy var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.push("Kiwi"); var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.unshift("Lemon"); var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.splice(2, 0, "Lemon", "Kiwi"); var arr1 = ["Cecilie", "Lone"]; var arr2 = ["Emil", "Tobias","Linus"]; var arr3 = ["Robin", "Morgan"]; var arr4 = arr1.concat(arr2, arr3);

56 http://linqjs.codeplex.com/ JavaScript – LINQ

57 for (i = 0; i "; } for (i = 0, len = cars.length, text = ""; i "; } Pętla for var i = 0; var len = cars.length; for (; i "; i++; } var suma = 0; var liczby = [1,2,3,4]; for (var x in liczby) { suma+=liczby[x]; } document.writeln( suma);

58 while (i < 10) { text += "The number is " + i; i++; } Pętla while do { text += "The number is " + i; i++; } while (i < 10);

59 JavaScript Strings Strings can be written with double or single quotes. document.getElementById("demo").innerHTML = 'John Doe'; Ciągi tekstowe

60 JavaScript Variables Add "John" + " " + "Doe": var x = "John" + " " + "Doe" ; document.getElementById("demo").innerHTML = x; Ciągi tekstowe

61 JavaScript Variables Add "5" + 2 + 3. and display the result: var x = "5" + 2 + 3; document.getElementById("demo").innerHTML = x; Ciągi tekstowe

62 var txt="ABCDEFGHIJKLMNOPQRSTUVWXYZ"; document.writeln(txt.length); document.writeln(txt.charAt(1)); document.writeln(txt.charCodeAt(1)); document.writeln(txt.concat("0", "1", "2")); document.writeln(txt.toLowerCase().indexOf("b")); document.writeln(txt.replace("A","=")); document.writeln(txt.substr(1,3)); document.writeln(txt.substring(1,3)); document.writeln(txt.replace("b","=").replace("M","=").split("=")[1]); document.writeln(["a", "b"].toString().replace(",","")); document.writeln(String.fromCharCode(97,98,99).toUpperCase()); Wybrane operacje na ciągach tekstowych

63 document.getElementById("demo").innerHTML = Date(); Data i czas

64 new Date() new Date(milliseconds) new Date(dateString) new Date(year, month, day, hours, minutes, seconds, milliseconds) Data i czas var d = new Date("October 13, 2014 11:13:00"); document.getElementById("demo").innerHTML = d; var d = new Date(86400000); document.getElementById("demo").innerHTML = d; var d = new Date(99,5,24,11,33,30,0); document.getElementById("demo").innerHTML = d;

65 var d = new Date(); document.getElementById("demo").innerHTML = d.toString() + " "; document.getElementById("demo").innerHTML += d.toUTCString()+ " "; document.getElementById("demo").innerHTML += d.toDateString(); Data i czas

66

67 var d = new Date(); document.writeln( d.getFullYear()); document.writeln( d.getSeconds()); var days = ["Niedziela","Poniedziałek","Wtorek","Środa","Czwartek","Piątek","Sobota"]; document.writeln("Dzisiaj jest " + days[d.getDay()].toLowerCase()); Data i czas

68 var today, someday, text; today = new Date(); someday = new Date(); someday.setFullYear(2100, 0, 14); if (someday > today) { text = "Today is before January 14, 2100."; } else { text = "Today is after January 14, 2100."; } document.getElementById("demo").innerHTML = text; Data i czas – porównywanie dat

69 var person = { firstName : "John", lastName : "Doe", age : 50, eyeColor : "blue" }; document.getElementById("demo").innerHTML = person.firstName + " is " + person.age + " years old."; Obiekty

70 var person = { firstName : "John", lastName : "Doe", age : 50, eyeColor : "blue", info : function() {return this.firstName + ' ' + this.lastName;} }; document.getElementById("demo").innerHTML = person.info(); Obiekty

71 The typeof operator returns the type of a variable or an expression. document.getElementById("demo").innerHTML = typeof "john" + " " + typeof 3.14 + " " + typeof false + " " + typeof [1,2,3,4] + " " + typeof {name:'john', age:34}; Operator typeof typeof function () {} // function typeof myCar // undefined (if myCar is not declared) typeof null // object

72 Accessing a function without (), will return the function definition: function toCelsius(f) { return (5/9) * (f-32); } document.getElementById("demo").innerHTML = toCelsius; document.getElementById("demo").innerHTML += " " + toCelsius(32); Funkcje

73 A local variable can only be accessed from within the function where it was declared. myFunction(); document.getElementById("demo").innerHTML = "I can display " + typeof carName; function myFunction() { var carName = "Volvo"; } Zasięg zmiennych w funkcjach – zmienna lokalna

74 A GLOBAL variable can be accessed from any script or function. var carName = "Volvo"; myFunction(); function myFunction() { document.getElementById("demo").innerHTML = "I can display " + carName; } Zasięg zmiennych w funkcjach – zmienna globalna

75 If you assign a value to a variable that has not been declared, it will automatically become a GLOBAL variable: myFunction(); document.getElementById("demo").innerHTML = "I can display " + carName; function myFunction() { carName = "Volvo"; } Zasięg zmiennych w funkcjach – zmienna automatycznie globalna

76 function suma(x, y) { if (y === undefined) { y = 0; } return x + y; } licz Funkcje – parametry opcjonalne

77 function suma(x, y) { y = y || 0; return x + y; } licz Funkcje – parametry opcjonalne

78 function suma_elem_tabl() { var suma=0; for (var i=0; i<arguments.length; i++){ suma+=arguments[i]; } return suma; } alert(suma_elem_tabl(1, 2, 3, 0)); Funkcje – niezdefiniowana liczba parametrów wejściowych

79 Wyjątki try { Block of code to try } catch(err) { Block of code to handle errors } finally { Block of code to be executed regardless of the try / catch result }

80 try { pokaz_wiadomosc("Welcome guest!"); } catch(err) { document.getElementById("demo").innerHTML = "Błąd!! " + err.message; } Wyjątki

81 Please input a number between 5 and 10: Test Input function myFunction() { var message, x; message = document.getElementById("message"); message.innerHTML = ""; x = document.getElementById("demo").value; try { x = Number(x); if(x == "") throw "is empty"; if(isNaN(x)) throw "is not a number"; if(x > 10) throw "is too high"; if(x < 5) throw "is too low"; message.innerHTML = "Your number is: " + x; } catch(err) { message.innerHTML = "Input " + err; } finally { document.getElementById("demo").value = ""; } Wyjątki

82 function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } Zdarzenia dot. przeciągnięcia i upuszczenia elementu http://www.w3schools.com/html/html5_draganddrop.asp

83 function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } Zdarzenia dot. przeciągnięcia i upuszczenia elementu http://www.w3schools.com/html/html5_draganddrop.asp

84 http://www.w3schools.com/jquery/default.asp http://www.w3schools.com/bootstrap/default.asp

85 Element CANVAS

86 Element ten jest nowością wprowadzoną w HTML5 Działa wyłącznie w przeglądarkach kompatybilnych z HTML5 Umożliwia wyświetlanie plików graficznych oraz ich obróbkę Umożliwia rysowanie

87 Element CANVAS Brak obsługi elementu canvas

88 Kontekst renderowania i proste rysowanie Element CANVAS

89 Kontekst renderowania moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); Element CANVAS

90 Rysowanie Element CANVAS Brak obsługi elementu canvas moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); //pobieranie kontekstu 2d kontekst.fillStyle='red'; //styl wypełniania kontekst.fillRect(5,20,100,100); //tworzenie wypełnionego prostokąta kontekst.fillStyle='blue'; kontekst.fillRect(15,40,120,50); kontekst.fill(); //proces wypełnienia

91 Rysowanie Element CANVAS Brak obsługi elementu canvas moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); kontekst.fillStyle='red'; kontekst.fillRect(5,20,100,100); kontekst.strokeStyle='blue'; //kolor linii kontekst.lineWidth=5; //grubość linii kontekst.strokeRect(15,40,120,50); //rysowanie kwadratu bez wypełnienia

92 Rysowanie – czyszczenie obszaru Element CANVAS moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); function wyczysc() { kontekst.clearRect(0,0,moj_canvas.width,moj_canvas.height); }

93 Rysowanie – prosta animacja Element CANVAS moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); moj_canvas.style.position='absolute'; moj_canvas.style.top=0; moj_canvas.style.left=0; function wyczysc() { kontekst.clearRect(0,0,moj_canvas.width,moj_canvas.height); } //(...)

94 Rysowanie – prosta animacja Element CANVAS //(...) function koloruj(){ kontekst.fillStyle="rgb(" + Math.round(Math.random()*255) + "," + Math.round(Math.random()*255) + "," + Math.round(Math.random()*255) + ")"; kontekst.fillRect(Math.random()* moj_canvas.width/2,Math.random()* moj_canvas.height/2,Math.random()* moj_canvas.width,Math.random()* moj_canvas.height); } //(...)

95 Rysowanie – prosta animacja Element CANVAS //(...) function animacja() { moj_canvas.width=window.innerWidth; moj_canvas.height=window.innerHeight; wyczysc(); koloruj(); setTimeout("animacja()", 200); } animacja(); //(...)

96 Ładowanie obrazków w elemencie canvas Element CANVAS

97 Ładowanie obrazków Element CANVAS Brak obsługi elementu canvas pic = new Image(); pic.src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/b1/C racow_University_of_Technology_-_Politechnika_Krakowska.jpg/240px- Cracow_University_of_Technology_-_Politechnika_Krakowska.jpg'; moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); kontekst.drawImage(pic, 0,0); // (obiekt typu obrazek, wsp. X, wsp. Y)

98 Ładowanie obrazków – dodanie cienia Element CANVAS pic = new Image(); pic.src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/b1/C racow_University_of_Technology_-_Politechnika_Krakowska.jpg/240px- Cracow_University_of_Technology_-_Politechnika_Krakowska.jpg'; moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); kontekst.shadowColor='black'; kontekst.shadowOffsetX=0; kontekst.shadowOffsetY=0; kontekst.shadowBlur=10; //rozmycie kontekst.drawImage(pic, 10,10); // (obiekt typu obrazek, wsp. X, wsp. Y)

99 Ładowanie obrazków – zapis obrazka na dysk Element CANVAS

100 Ładowanie obrazków – kiedy brak obsługi elementu canvas Element CANVAS

101 Proste filtrowanie do nadawania odcieni obrazkom Element CANVAS

102 Proste filtrowanie – użycie funkcji rgba Element CANVAS pic = new Image(); pic.src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/b1/C racow_University_of_Technology_-_Politechnika_Krakowska.jpg/240px- Cracow_University_of_Technology_-_Politechnika_Krakowska.jpg'; moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); kontekst.drawImage(pic, 0,0); kontekst.fillStyle='rgba(0,255,0, 0.2)'; kontekst.fillRect(0,0,pic.width,pic.height); kontekst.fill();

103 Proste filtrowanie – użycie funkcji rgba Element CANVAS pic = new Image(); pic.src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/b1/C racow_University_of_Technology_-_Politechnika_Krakowska.jpg/240px- Cracow_University_of_Technology_-_Politechnika_Krakowska.jpg'; moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); kontekst.drawImage(pic, 0,0); kontekst.fillStyle='rgba(0,255,0, 0.2)'; kontekst.fillRect(0,0,pic.width/2,pic.height); kontekst.fillStyle='rgba(255,0,0, 0.2)'; kontekst.fillRect(pic.width/2,0, pic.width/2, pic.height); kontekst.fill();

104 Animacja filtrami / 1 Element CANVAS pic = new Image(); pic.src='http://upload.wikimedia.org/wikipedia/commons/thumb/b/b1/Cracow_Univ ersity_of_Technology_-_Politechnika_Krakowska.jpg/240px- Cracow_University_of_Technology_-_Politechnika_Krakowska.jpg'; moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); moj_canvas.width=pic.width; moj_canvas.height=pic.height; pozf1left=2; //pozycja filtru pierwszego od lewej strony pozf1top=2; //pozycja filtru pierwszego od góry pozf2left=pic.width/2; pozf2top=0; pozxf1=1; //kierunek poruszania sie na x pozyf1=1; pozxf2=-1; pozyf2=-1;

105 Animacja filtrami / 2 Element CANVAS function animacja2() { kontekst.drawImage(pic, 0,0); kontekst.fillStyle='rgba(0,255,0, 0.5)'; if (pozf1left+100 >= moj_canvas.width) {pozxf1 = -1;} if (pozf1top+100 >= moj_canvas.height) {pozyf1 = -1;} if (pozf1left <= 0) {pozxf1 = 1;} if (pozf1top <= 0) {pozyf1 = 1;} if (pozf2left+100 >= moj_canvas.width) {pozxf2 = -1;} if (pozf2top+100 >= moj_canvas.height) {pozyf2 = -1;} if (pozf2left <= 0) {pozxf2 = 1;} if (pozf2top <= 0) {pozyf2 = 1;}

106 Animacja filtrami / 3 Element CANVAS pozf1left= pozf1left + 10*pozxf1; pozf1top= pozf1top + 10*pozyf1; pozf2left= pozf2left + 10*pozxf2; pozf2top= pozf2top + 10*pozyf2; kontekst.fillRect(pozf1left,pozf1top,100,100); kontekst.fillStyle='rgba(255,0,0, 0.5)'; kontekst.fillRect(pozf2left,pozf2top, 100, 100); kontekst.fill(); setTimeout("animacja2()",200); } animacja2();

107 Rysowanie bardziej złożone Element CANVAS

108 Rysowanie – linie Element CANVAS moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); kontekst.beginPath(); kontekst.moveTo(10,10); kontekst.lineTo(100,10); kontekst.closePath(); kontekst.strokeStyle='red'; kontekst.stroke();

109 Rysowanie – linie – wypełnienie narysowanego kształtu, tekst Element CANVAS moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); kontekst.beginPath(); kontekst.moveTo(10,10); kontekst.lineTo(100,10); kontekst.lineTo(150,60); kontekst.lineTo(100,150); kontekst.lineTo(10,10); kontekst.closePath(); kontekst.strokeStyle='red'; kontekst.stroke(); kontekst.fillStyle='blue'; kontekst.fill(); kontekst.font = "20px Arial"; kontekst.fillText("Dziwny kształt", 10,170);

110 Rysowanie – łuki Element CANVAS moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); //kontekst.arc(x środka,y środka, promień,kąt startowy, kąt końcowy, czy zgodnie z ruchem wskazówek zegara);

111 Rysowanie – łuki Element CANVAS moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); //radiany = (Math.PI / 180) * stopnie w = Math.PI / 180; kontekst.beginPath(); kontekst.arc(250,250, 100,0, w*90, false); kontekst.stroke(); kontekst.closePath();

112 Rysowanie – łuki Element CANVAS moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); //radiany = (Math.PI / 180) * stopnie w = Math.PI / 180; kontekst.beginPath(); kontekst.arc(250,250, 100,0, w*180, false); kontekst.stroke(); kontekst.closePath();

113 Rysowanie – łuki Element CANVAS moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); //radiany = (Math.PI / 180) * stopnie w = Math.PI / 180; kontekst.beginPath(); kontekst.arc(250,250, 100,0, w*180, false); kontekst.stroke(); kontekst.closePath(); kontekst.fillStyle='red'; kontekst.fill();

114 Rysowanie – łuki – animacja / 1 Element CANVAS moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); kontekst.lineWidth=5; w = Math.PI / 180; kat= 0; ikat=15; function animacja3(){ kat=kat+ikat;

115 Rysowanie – łuki – animacja / 2 Element CANVAS if (kat>=360 + ikat) { kat=0; kontekst.strokeStyle="rgb(" + Math.round(Math.random()*255) + "," + Math.round(Math.random()*255) + "," + Math.round(Math.random()*255) + ")"; } document.title=kat; //kontekst.clearRect(0,0,moj_canvas.width, moj_canvas.height); kontekst.beginPath(); kontekst.arc(250,250, 100,0, w*kat, false); kontekst.stroke(); kontekst.closePath(); setTimeout("animacja3()", 100); } animacja3();

116 Rysowanie – zadanie Element CANVAS

117 Rysowanie – krzywa Beziera Element CANVAS moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); kontekst.beginPath(); kontekst.moveTo(20,20); kontekst.bezierCurveTo(20,100,200,100,200,20); kontekst.stroke();

118 Rysowanie – krzywa Beziera Element CANVAS moj_canvas = document.getElementById("foto"); kontekst = moj_canvas.getContext('2d'); kontekst.fillStyle = 'red'; kontekst.beginPath(); kontekst.moveTo(75,40); kontekst.bezierCurveTo(75,37,70,25,50,25); kontekst.bezierCurveTo(20,25,20,62.5,20,62.5); kontekst.bezierCurveTo(20,80,40,102,75,120); kontekst.bezierCurveTo(110,102,130,80,130,62.5); kontekst.bezierCurveTo(130,62.5,130,25,100,25); kontekst.bezierCurveTo(85,25,75,37,75,40); kontekst.fill();

119 Element AUDIO Umieszczanie dźwięków na stronie internetowej

120 autoplay Element AUDIO

121 controls Element AUDIO

122 preload Element AUDIO

123 preload Ładowanie wyłącznie metadanych Brak wstępnego ładowania Ładowanie całości pliku Element AUDIO

124 loop Element AUDIO

125 source Element AUDIO

126 parametr type Element AUDIO

127 parametr type - kodeki Element AUDIO

128 JavaScript Element AUDIO

129 Element VIDEO Umieszczanie filmów na stronie internetowej

130 Element VIDEO

131 source Element VIDEO

132 type i codecs Element VIDEO

133 poster Element VIDEO

134 preload, loop, autoplay Element VIDEO

135 HTML 5 SVG (Scalable Vector Graphics)

136 HTML 5 SVG Główna cecha: są to obiekty graficzne, zapamiętywane jako obiekty przez przeglądarkę (w CANVAS ma miejsce renderowanie piksel po pikselu). SVG zalecane jest do renderowania dużych przestrzeni – np. Google Maps

137 HTML 5 SVG - KOŁO <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"> Sorry, your browser does not support inline SVG.

138 HTML 5 SVG - PROSTOKĄT

139 HTML 5 SVG – ZAOKRĄGLONY PROSTOKĄT

140 HTML 5 SVG – GWIAZDA

141 HTML 5 SVG – LOGO SVG Sorry, your browser does not support inline SVG.

142 C. D. N.