Pomoc dydaktyki fizyki

1. Temat pracy Opiekun : dr Piotr Gronek Pomoc dydaktyki fizyki Tomasz Kawęcki

2. Plan prezentacji Plan prezentacji • 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

3. Cele i zagadnienia Cele i zadania pracy magisterskiej • 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 ( clientside ) • 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.

4. Wybrane technologie Wybrane technologie Java/ ECMA Script (JS) to stworzony przez firmę Netscape zorientowany obiektowo skryptowy język programowania, najczęściej stosowany na stronach WWW. XHTML (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. SVG ( Scalable Vector Graphics) – uniwersalny format dwuwymiarowej, statycznej i animowanej grafiki wektorowej. MathML (Mathematical Markup Language) to język znaczników będący zastosowaniem XML-a, służący do opisywania wzorów i symboli matematycznych.

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

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

7. Schemat aplikacji: działy technologiczne cz.1 Działy przedstawiające technologie 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

8. Schemat aplikacji: działy technologiczne cz.2 Przykłady dodatkowe 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.

9. Schemat aplikacji: moduły dodatkowe moduły dodatkowe 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.

10. moduły dodatkowe- wyszukiwanie Schemat aplikacji: moduły cz.1 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="http://www.google.com/search" class="draggable" > <!-- Pole tekstowe --> <input type="text" name="q" size="20" maxlength="255”/> <!-- Przycisk 'Szukaj' --> <input type="submit" name="btnG" value="Szukaj"/> <br /> <!-- Nasza strona --> <input type="hidden" name="domains" value="http://adres.strony.pl" /> <!-- Kodowanie znaków --> <input type="hidden" name="ie" value="iso-8859-2" /> <input type="hidden" name="oe" value="iso-8859-2" /> <!-- Pole wyboru (gdzie wyszukiwać) --> <input type="radio" name="sitesearch" value="" style="margin-left:25px;"/> <label>WWW</label> <input type="radio" name="sitesearch" value="http://adres.strony.pl" checked="checked"/> <label>na tej stronie</label> </form>

11. moduły dodatkowe – wskazówki, ciekawostki Schemat aplikacji: moduły cz.2 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. <ciekawostka> <tytul> Jak używać formy &lt;br&gt; w XHTML </tytul> <tresc> Ze względu na kompatybilność wstecz lepiej jest używać formy ze spacją przed końcowym ukośnikiem: &lt;br /&gt;. 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: &lt;p&gt &lt;/p&gt;. a nie tak: &lt;p /&gt;. </tresc> </ciekawostka>

12. moduły dodatkowe – wskazówki, ciekawostki Schemat aplikacji: moduły cz.3 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,'&lt;').replace(/>/g,'&gt;').replace(/\n/g,'<br />'); var temp = document.getElementById("tresc1"); var ooo = doc.getElementsByTagName('tresc')[x].childNodes[0].data; temp.innerHTML = ooo.replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/\n/g,'<br />'); }

13. Schemat aplikacji: moduły cz.4 moduły dodatkowe – jak to jest zrobione? 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.

14. Zrealizowane przykłady Jak wykorzystać technologie w fizyce 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.

15. Zrealizowane przykłady: dodawanie wektorów cz.1 Dodawanie wektorów w płaszczyźnie function vector(id){ this.id = id; this.a1 = 0; this.a2 = 0; } 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); }

16. Zrealizowane przykłady: dodawanie wektorów cz.2 Dodawanie wektorów w płaszczyźnie 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'); }

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

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

19. Podsumowanie 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.

20. Dziękuje za uwagę Tomasz Kawęcki