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 2) ciśnienie 3) długość 4) masa 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 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 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 gram - podstawowa jednostka, którą obrałem do obliczeń
5) moc 6) objętość 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 koń mechaniczny - podstawowa jednostka, którą obrałem do obliczeń kilowat na podstawie http://pl.wikipedia.org/wiki/kilowat 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 8) prędkość 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 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