Transcript Pomoc dydaktyki fizyki - Demonstrator technologii WWW

Temat pracy
Opiekun : dr Piotr Gronek
Tomasz Kawęcki
1
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
2
Cele i zagadnienia
• Pomoc dydaktyczna
Cele i zadania pracy magisterskiej
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.
3
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.
4
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
5
Schemat aplikacji: strona główna
Strona główna
6
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
7
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.
8
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.
9
Schemat aplikacji: moduły cz.1
moduły dodatkowe- wyszukiwanie
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>
10
Schemat aplikacji: moduły cz.2
moduły dodatkowe – wskazówki,
ciekawostki
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>
11
Schemat aplikacji: moduły cz.3
moduły dodatkowe – wskazówki,
ciekawostki
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 />');
}
12
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.
13
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.
14
Zrealizowane przykłady: dodawanie wektorów cz.1
Dodawanie wektorów w płaszczyźnie
function vector(id){
function showVec(id,a,b,t){
this.id = id;
this.a1 = 0;
this.a2 = 0;
}
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);
}
15
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');
}
16
Zrealizowane przykłady: zderzenia 2 D
Zderzenia 2D
17
Zrealizowane przykłady: ruch rakiety ze zmienną masą
Ruch rakiety ze zmienną masą
18
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.
19
Tomasz Kawęcki 20