tutaj - Dawid Grochowski

Sprawozdanie
z przedmiotu:
Języki Internetowe
Temat:
„Przelicznik miar”
Wykonał:
Dawid Grochowski, w50009
Prowadzący:
mgr Pawel Cudek
2014
Cel projektu
Celem projektu było utworzenie strony internetowej opartej o technologie Html, css, jQuery oraz PHP.
Strona internetowa wykorzystując jQuery miała w założeniu przeliczać dynamicznie różne wartości, np.
ciśnienie, moc, objętość, temperaturę.
Założenia
•
Stworzenie struktury plików. Pliki oparte o HTML.
•
Podział każdego pliku na nagłówek, menu, zawartość oraz stopkę, zapis ich w plikach php.
•
Utworzenie przelicznika czasu, ciśnienia, długości, masy, mocy, objętości, powierzchni,
prędkości, temperatury. Skrypt przeliczający przy pomocy biblioteki jQuery.
•
Tworzenie ciasteczka przechowującego dane o ostatnio odwiedzonej przez nas podstronie z
wykorzystaniem PHP oraz stworzenie przekierowania.
Zewnętrzne biblioteki/skrypty
jQuery - biblioteka jQuery jest frameworkiem do języka Java Script. Dzięki jQuery kod jest bardziej
czytelny niż w czystym Java Script, wiele instrukcji jest uproszczonych, np. zamiast pisać
"GetElementById" wystarczy napisać znak "$". Źródło: http://jquery.com/
jQuery UI - gotowy zestaw elementów interfejsu użytkownika do implementacji na własnej stronie
www. JQuery UI jak sama nazwa wskazuje oparty jest na bibliotece jQuery. Dzięki UI możemy w
krótkim czasie dodać ciekawe elementy interaktywne do naszej strony. Źródło: https://jqueryui.com/
Zebra Cookie - biblioteka odpowiedzialna za tworzenie ciasteczek do przechowywania danych u klienta
odwiedzającego
stronę.
Cookies
są
tworzone
przy
użyciu
jQuery.
Źródło:
http://stefangabos.ro/jquery/zebra-cookie/
Jq Tiles - plugin galerii utworzony w jQuery. Dzięki temu skryptowi wyświetlane są obrazy, możemy
dodać także opis do każdego z nich oraz zmienić efekty przejść pomiędzy zdjęciami. Źródło:
http://elclanrs.github.io/jq-tiles/
Opis podstron
Strona została utworzona jako przelicznik miar. Do tego celu utworzono podstrony, w których
zaimplementowano uniwersalny skrypt jQuery, dzięki któremu po wpisaniu w jednym polu danej
wartości, w wszystkich innych polach natychmiastowo pojawi się przeliczona wartość. Dzięki temu, że
skrypt jest uniwersalny, większość podstron takich jak czas, moc lub objętość zastosowano to samo
rozwiązanie, co w dużym stopniu ułatwia dokonywanie zmian oraz zmniejsza poziom skomplikowania
całego projektu. Skrypt przeliczający za każdym razem sprowadza obliczenia do jednej postaci, z której
przelicza po odpowiednich "wagach" na inne wartości. Wyjątkiem jest przeliczanie temperatury, tam
skrypt stosuje odpowiednie wzory do przeliczeń. Struktura podstron jest także podzielona, dzięki czemu
wszystkie podstrony korzystają z jednego nagłówka, jednego menu i jednej stopki, zmienia się jedynie
główna zawartość. Jedynie ostatnia kategoria, tj. UI/PLUGIN nie wykorzystuje skryptu przeliczania, bo
zawarta w niej jest galeria oraz datapicker.
Wykorzystane wzory
Podczas realizacji projektu korzystałem z wzorów, na podstawie których utworzyłem skrypty obliczające
dane wartości.
1) czas
•
sekunda - podstawowa jednostka, którą obrałem do obliczeń
•
nano-, mikro-, mili- sekunda na podstawie http://pl.wikipedia.org/wiki/Sekunda
•
minuta na podstawie http://pl.wikipedia.org/wiki/Minuta
•
godzina i dzień na podstawie http://pl.wikipedia.org/wiki/Godzina
•
tydzień, miesiąc, rok na podstawie wcześniej utworzonych wzorów
2) ciśnienie
•
bar - podstawowa jednostka, którą obrałem do obliczeń
•
paskal, psi, newton/milimetr, kilogram/milimetr, atmosfera techniczna, atmosfera
fizyczna, tor na podstawie http://pl.wikipedia.org/wiki/Ci%C5%9Bnienie
•
hektopaskal na podstawie http://pl.wikipedia.org/wiki/Hektopaskal
3) długość
•
metr - podstawowa jednostka, którą obrałem do obliczeń
•
mili-, centy-, decy-, kilo- metry na podstawie http://pl.wikipedia.org/wiki/Metr
•
cal, stopa, jard na podstawie http://www.przelicznikmiar.pl/dlugosci.html
•
mila, mila morska na podstawie http://pl.wikipedia.org/wiki/Mila
4) masa
•
gram - podstawowa jednostka, którą obrałem do obliczeń
•
mili-, deka-, kilo- gram na podstawie http://pl.wikipedia.org/wiki/Kilogram
•
tona na podstawie http://pl.wikipedia.org/wiki/Tona
•
funt, stone (UK), uncja, karat na podstawie http://www.przelicznikmiar.pl/masy.html
5) moc
•
koń mechaniczny - podstawowa jednostka, którą obrałem do obliczeń
•
kilowat na podstawie http://pl.wikipedia.org/wiki/Kilowat
6) objętość
•
litr - podstawowa jednostka, którą obrałem do obliczeń
•
mili-, hekto- litr na podstawie http://pl.wikipedia.org/wiki/Litr
•
kubik, baryłka, pinta (US), pinta (UK) na podstawie
http://www.przelicznikmiar.pl/objetosci.html
•
galon (US), galon (UK) na podstawie
http://pl.wikipedia.org/wiki/Obj%C4%99to%C5%9B%C4%87
7) powierzchnia
•
metr kw. - podstawowa jednostka, którą obrałem do obliczeń
•
centy-, kilo- metr kwadratowy, hektar, ar na podstawie
http://pl.wikipedia.org/wiki/Metr_kwadratowy
•
akr na podstawie http://pl.wikipedia.org/wiki/Akr
•
mila, cal, jard, stopa kwadratowa na podstawie
http://www.przelicznikmiar.pl/powierzchni.html
8) prędkość
•
kilometry/godzinę - podstawowa jednostka, którą obrałem do obliczeń
•
mila/godzinę na podstawie http://pl.wikipedia.org/wiki/Mila_na_godzin%C4%99
9) temperatura
•
stopnie Celsjusza - podstawowa jednostka, którą obrałem do obliczeń
•
stopnie Kelvina, Fahrenheita na podstawie http://pl.wikipedia.org/wiki/Skala_Celsjusza
•
stopnie Rankine'a na podstawie http://pl.wikipedia.org/wiki/Skala_Rankine%27a
•
stopnie Réaumura na podstawie http://pl.wikipedia.org/wiki/Skala_R%C3%A9aumura
•
stopnie Rømera na podstawie http://pl.wikipedia.org/wiki/Skala_R%C3%B8mera
•
stopnie Newtona na podstawie http://pl.wikipedia.org/wiki/Skala_Newtona
•
stopnie Delisle'a na podstawie http://pl.wikipedia.org/wiki/Skala_Delisle%27a
Napotkane problemy
Podczas pracy z polami wprowadzania danych (input) napotkałem na problem, który pojawiał się podczas
wpisywania wartości innej, niż wartość numeryczna w polu (inne znaki, niż liczby oraz wartość pusta).
Podczas wprowadzania niepoprawnych wartości naszym oczom ukazywał się komunikat NaN we
wszystkich polach.
Problem został rozwiązany poprzez wprowadzenie warunku, który sprawdza, czy wpisane w danym polu
wartości są numerami i wykonuje skrypt tylko wtedy, jeśli warunek jest spełniony. Po wpisaniu wartości
innych, niż liczby- skrypt nie wykonuje żadnej widocznej dla użytkownika akcji.
Kolejnym problemem było aktualizowanie się aktywnego pola (czyli tego, w którym użytkownik właśnie
wpisuje wartości). Podczas wpisywania wartości dany input przeliczał sam siebie, co powodowało
aktualizowanie się wartości w aktywnym polu, a co za tym idzie - mogło to powodować cofanie się
usuwanych liczb lub przeskakiwanie kursora. Po próbie wpisania na przykład liczby 2 w polu
odpowiadającym za skalę Fahrenheita automatycznie do pola zostawała wpisana następująca wartość:
To samo działo się przy próbie usuwania pojedynczych znaków. Rozwiązanie zastosowane przeze mnie
polega na sprawdzeniu, czy aktualne pole, które skrypt zamierza aktualizować jest polem aktywnym
(tym, w którym użytkownik właśnie wprowadził zmianę). Jeśli warunek jest spełniony, to skrypt pomija
linię, w której ma za zadanie przypisać nową wartość do pola.
Wnioski
Realizacja projektu przebiegła sprawnie, ponieważ od początku miałem pomysł na rozwiązanie problemu
przeliczania wartości. Wybranie biblioteki jQuery było dobrym posunięciem. Zaimplementowanie
dynamicznie zmieniających się wartości, czyli przeliczania miar bez konieczności przeładowania strony
w znacznym stopniu ułatwia korzystanie z skryptu.
Napisany przeze mnie skrypt pozwolił na zrealizowanie przeliczania miar takich, jak czas, ciśnienie,
długość, masa, moc, objętość, powierzchnia, prędkość oraz temperatura.
Skrypt przeliczania posiada dwie drogi. W zależności od tego, czy ma przeliczać temperaturę, czy inne
wartości - wybiera odpowiednią metodę.
Przeliczanie wartości innych, niż temperatura polega na sprowadzeniu danych do pewnej ustalonej,
podstawowej wartości. Dzieje się to po przemnożeniu naszych danych przez odpowiednią wagę. Na
przykład dla czasu podstawową wartością będzie sekunda, czyli sekunda będzie miała wagę 1. Wartością
mniejszą będzie w tym wypadku milisekunda, czyli 1000 sekund, stąd wynika, że waga milisekundy, to
1000. Głównym polem będzie to, w które aktualnie wpisaliśmy wartość. Dzieląc to pole przez jego wagę
otrzymamy wartość podstawową, teraz posiadając wartość podstawową możemy wyznaczyć wartości
pozostałych pól mnożąc przez ich wagi. Jeśli w polu milisekunda wpiszemy 5, to skrypt wykona dzielenie
tej wartości przez 1000, co da wynik 0.005. Jest to wartość podstawowa, w tym momencie przystąpi do
obliczania pozostałych pól, czyli odpowiednio przemnoży tę wartość przez 1000000 dla mikrosekundy
oraz przez 1 dla sekundy. W ten prosty sposób możemy obliczać większość wartości fizycznych,
wystarczy tylko wcześniej zadeklarować ich wagi.
Przeliczanie wartości temperatury polega na sprowadzeniu aktualnie aktywnego pola do wartości
zapisanej w skali Celsjusza. Po wykonaniu tego zadania skrypt przelicza wszystkie inne pola na
odpowiadające im skale według odpowiednio ustalonych wcześniej wzorów.
Skrypt posiada także możliwość zaokrąglania wartości, co jest oparte na gotowym rozwiązaniu
dostępnym w jQuery, czyli zaokrąglanie do wybranego miejsca po przecinku. Zaimplementowanie
zaokrąglania wartości ma na celu poprawę czytelności wyników. Oczywiście korzystanie z tego
rozwiązania jest dobrowolne, wedle preferencji użytkownika.
Strona główna przelicznika jest pusta, posiada jedynie menu. Po pierwszym wejściu na witrynę
użytkownik zapewne wybierze pewien element z menu nawigacyjnego, a jego wybór zostanie zapisany
do ciasteczka. Po każdym kolejnym wejściu na stronę główną użytkownik zostanie domyślnie
przeniesiony na ostatnio odwiedzaną na przeliczniku podstronę. Ma to na celu ułatwienie korzystania z
przelicznika. Osoby korzystające ze skryptu po ostatniej wizycie mogą chcieć skorzystać z przeliczania
tych samych miar fizycznych, z których korzystały przed wyjściem. Automatyczne przeniesienie ich na
ostatnio odwiedzaną podstronę może zniwelować ich czas szukania odpowiedniej kategorii w menu.
Przekierowanie nie wpływa negatywnie na korzystanie z przelicznika, ponieważ w każdej chwili
użytkownik może za pomocą menu nawigacyjnego przejść do innej podstrony.
Dawid Grochowski,
4IID, w50009