Opiekun : dr Piotr Gronek Tomasz Kawęcki 1 Temat pracy

Cele i zadania pracy magisterskiej ( przypomnienie ) Schemat budowy aplikacji strona głowna działy technologiczne moduły dodatkowe przykłady zastosowań w fizyce Zrealizowane przykłady Podsumowanie Plan prezentacji 2

Pomoc dydaktyczna Proste, podstawowe kursy omawianych technologii, pomoc dla wykładowców fizyki oraz przedmiotów związanych z omawianymi technologiami, dodatkowe źródło wiedzy dla studenta Pokazanie możliwości technologii WWW ( client side ) Odpowiednio dobrane i przygotowane przykłady pokazujące możliwości omawianych technologii, zorientowanie aplikacji na wykonywanie po stronie klienta, wykorzystanie niekomercyjnych technologii. Fizyka może być ciekawa … Dobrane przykłady pokazują nie tylko możliwości technologii, ale przede wszystkim możliwość wykorzystywania ich do pokazywania fizyki na stronach WWW w sposób ciekawy, ładny i zachęcający do bliższego jej poznawania. Cele i zadania pracy magisterskiej 3 Cele i zagadnienia

Wybrane technologie 4 Java/ ECMA Script XHTML MathML ( Scalable Vector Graphics) – uniwersalny format dwuwymiarowej, statycznej i animowanej grafiki wektorowej. SVG (Mathematical Markup Language) to język znaczników będący zastosowaniem XML-a, służący do opisywania wzorów i symboli matematycznych. (ang. Extensible HyperText Markup Language, rozszerzalny hipertekstowy język znaczników) jest to język służący do tworzenia stron WWW ogólnego przeznaczenia. XHTML jest następcą nierozwijanego już języka HTML. (JS) to stworzony przez firmę Netscape zorientowany obiektowo skryptowy język programowania, najczęściej stosowany na stronach WWW.

Schemat aplikacji – strona www 5 Strona główna przykłady zastosowań w fizyce prezentacja technologii www moduły dodatkowe jak to jest zrobione porady, ciekawostki wyszukiwanie opis wykonania dodatkowe przykłady Schemat aplikacji

Strona główna 6 Schemat aplikacji: strona główna

Działy przedstawiające technologie 7 XHTML, MATHML, Java Script, SVG Te technologie będą prezentowane każda w osobnym dziale, czyli każda technologia przykłady, oraz krótkie kursy będą znajdowały się na osobnych podstronach dostępnych ze strony głownej. Dział : XHTML Schemat aplikacji: działy technologiczne cz.1

Przykłady dodatkowe 8 Każdy dział przedstawiający daną technologie będzie zawierał również dodatkowe przykładowe realizacje tych technologii, które będą najlepiej obrazowały ich możliwości oraz będą pomagać lepiej zrozumieć daną technologie. Schemat aplikacji: działy technologiczne cz.2

moduły dodatkowe 9 Moduły to pomocne dodatkowe elementy strony, które przede wszystkim pokazują wszechstronne możliwości prezentowanych technologii i są ułatwieniem dla korzystających z serwisu. Moduły te można traktować jak wtyczki i dodawać je do głównej strony serwisu. Schemat aplikacji: moduły dodatkowe

moduły dodatkowe- wyszukiwanie 10 Wyszukiwanie jest wykonane przy pomocy serwisu Google. Dzięki temu modułowi możemy szybko przeszukiwać zarówno Internet jak i prezentowaną aplikacje w poszukiwaniu interesujących nas informacji związanych z prezentowanymi technologiami czy fizyką. <form id="google" method="get" action=" class="draggable" > WWW na tej stronie Schemat aplikacji: moduły cz.1

moduły dodatkowe – wskazówki, ciekawostki 11 Prezentowany moduł ma za zadanie zaciekawić odwiedzającego jak i nauczyć czegoś nowego. Krótkie ciekawostki czy zwięzłe wskazówki dotyczące prezentowanych technologii znajdują się w dokumencie XML i są wyświetlane w module dzięki wykorzystaniu mechanizmu AJAX( asynchroniczny JavaScript i XML ), Interfejs XMLHttpRequest pobiera odpowiednie dane z dokumentu XML i po odpowiednich modyfikacjach wyświetlany jest w module. Jak używać formy <br> w XHTML Ze względu na kompatybilność wstecz lepiej jest używać formy ze spacją przed końcowym ukośnikiem: <br />. W celu zapewnienia kompatybilności zaleca się też nie używać formy zminimalizowanej, a tradycyjnej metody dla znaczników, których zamykanie w HTML 4 było opcjonalne, tzn. np. tak: <p&gt </p>. a nie tak: <p />. Schemat aplikacji: moduły cz.2

moduły dodatkowe – wskazówki, ciekawostki 12 Fragment kodu żródłowego skryptu JS realizującego połaczenie i przetworzenie danych z dokumentu XML: function start(){ // start the XMLHttpRequest var myXMLHTTPRequest = new XMLHttpRequest(); // load the xml file, ciekawostki.xml myXMLHTTPRequest.open("GET", "ciekawostki.xml", false); myXMLHTTPRequest.send(null); var xmlDoc = myXMLHTTPRequest.responseXML; x = xmlDoc.getElementsByTagName('tytul'); if(licz > x.length) licz = 0; nowa(xmlDoc,licz); } function nowa(doc,x){ document.getElementById("tytul1").innerHTML = doc.getElementsByTagName('tytul')[x].childNodes[0].data.replace(/ /g,'>').replace(/\n/g,' '); var temp = document.getElementById("tresc1"); var ooo = doc.getElementsByTagName('tresc')[x].childNodes[0].data; temp.innerHTML = ooo.replace(/ /g,'>').replace(/\n/g,' '); } Schemat aplikacji: moduły cz.3

13 Dodatkowy moduł mający na celu zapoznanie odwiedzającego ze sposobem wykonania wszystkich elementów znajdujących się na stronie, również a może przede wszystkim modułów dodatkowych. Tak, aby osoba zainteresowana mogła sama pokusić się o stworzenie podobnych modułów. moduły dodatkowe – jak to jest zrobione? Schemat aplikacji: moduły cz.4

Jak wykorzystać technologie w fizyce 14 Przedstawione przykłady, zrealizowane posługując się prezentowanymi technologiami, mają za zadanie pokazanie możliwości tych technologii w prezentowaniu fizyki na stronach. Analizując te przykłady można zobaczyć jak bardzo przydatne mogą być prezentowane technologie do zastosowań fizyki. Zrealizowane przykłady

Dodawanie wektorów w płaszczyźnie 15 function showVec(id,a,b,t){ var y=150-b; var x=a-250; var alfa = Math.atan(y/x); var r = 90-Math.round(alfa*180/Math.PI); if ( x < 0 ) r= r+180; var a1= a-5; var b1= b-5; var c1= a+5; var c = 'rotate('+r+','+a+','+b+')'; var p = c1+','+b+' '+a+','+b1+' '+a1+','+b; document.getElementById(id).setAttributeNS(null,'x2',a); document.getElementById(id).setAttributeNS(null,'y2',b); document.getElementById(t).setAttributeNS(null,'points',p); document.getElementById(t).setAttributeNS(null,'transform',c); } function vector(id){ this.id = id; this.a1 = 0; this.a2 = 0; } Zrealizowane przykłady: dodawanie wektorów cz.1

16 function dodaj(){ var wektorC = new vector('c'); var wektorA = new vector('a'); var wektorB = new vector('b'); wektorA.a1 = parseInt(document.getElementById('a1').value); wektorA.a2 = parseInt(document.getElementById('a2').value); wektorB.a1 = parseInt(document.getElementById('b1').value); wektorB.a2 = parseInt(document.getElementById('b2').value); wektorC.a1 = wektorA.a1+wektorB.a1; wektorC.a2 = wektorA.a2+wektorB.a2; showVec('vectA',wektorA.a1+250,150-wektorA.a2,'s1'); showVec('vectB',wektorB.a1+250,150-wektorB.a2,'s2'); showVec('vectC',wektorC.a1+250,150-wektorC.a2,'s3'); } Dodawanie wektorów w płaszczyźnie Zrealizowane przykłady: dodawanie wektorów cz.2

Zderzenia 2D 17 Zrealizowane przykłady: zderzenia 2 D

Ruch rakiety ze zmienną masą 18 Zrealizowane przykłady: ruch rakiety ze zmienną masą

Podsumowanie Praca jest witryną internetową, która ma na celu zaznajomienie odwiedzającego z prezentowanymi technologiami oraz pomoc w nauczaniu prezentując wybrane teorie fizyczne wraz z przykładami. Przykłady będą odpowiednio wyjaśniane nie tylko od strony teorii fizycznej, ale przede wszystkim od strony programistycznej w taki sposób, aby odwiedzający korzystając z podanych przykładów realizacji zagadnienia, mógł przerabiać lub napisać nową aplikacje według własnego pomysłu podnosząc w ten sposób swoje umiejętności. Dodatkowymi celami będzie rozpowszechnianie fizyki, nie tylko wśród studentów, ale również wśród wszystkich odwiedzających. Pokazanie im, że fizyka może być ciekawa i podana w odpowiedniej formie lepiej rozumiana. Wykorzystanie niekomercyjnych, szeroko dostępnych technologii, które realizowane są po stronie klienta to dodatkowe atuty pomocne przy rozpowszechnianiu i nauczaniu fizyki bez zbędnego obciążania serwerów wydziałowych. 19 Podsumowanie

Tomasz Kawęcki 20