spletna stran › raziskovalne › 4201203861.pdfspletna stran stran 3 2 uvod pridobivanje...

SPLETNA STRAN Stran 0

Šolski center Celje

Srednja šola za kemijo, elektrotehniko in računalništvo

SPLETNA STRAN Zaključna naloga

Avtorji: Mentor:

Žiga Pušnik Mojmir KLOVAR univ. dipl. inž. Matic Peternel Žiga Skaza

Celje, 2012


Kazalo

1 POVZETEK _____________________________________________________________ 2

2 UVOD _________________________________________________________________ 3

3 SPLETNA STRAN _________________________________________________________ 4

3.1 Branje podatkov ___________________________________________________________ 4 3.1.1 Branje podatkov iz binarne .wlk datoteke _____________________________________________ 4 3.1.2 Branje podatkov s COM portom ____________________________________________________ 5 3.1.3 Branje podatkov iz .txt in .html tekstovnih datotek _____________________________________ 9

3.2 Prikazovanje podatkov ____________________________________________________ 11 3.2.1 Prikazovanje trenutnih podatkov ___________________________________________________ 11 3.2.2 Prikazovanje statistike in generiranje grafikonov ______________________________________ 13 3.2.3 Smer vetra ponazorjena z kompasom _______________________________________________ 17

3.3 Podatkovna baza _________________________________________________________ 18

3.4 Oblika in CSS _____________________________________________________________ 19

4 NADGRADNJA IN BODOČI CILJI ____________________________________________ 20

5 RAZPRAVA ____________________________________________________________ 21

6 ZAKLJUČEK ____________________________________________________________ 22

7 VIRI IN LITERATURA _____________________________________________________ 23

8 ZAHVALA _____________________________________________________________ 24

9 KAZALO SLIK ___________________________________________________________ 25

10PRILOGE ________________________________________________________________ 26


1 POVZETEK

Ljudje večkrat potrebujemo različne informacije. Da pa bi nam bile te informacije na voljo takrat, ko jih potrebujemo, vse podatke zbiramo, hranimo ter čim bolje organiziramo. Te podatke torej zberemo v bazi podatkov. Podatke torej imamo, vendar potrebujemo za predstavitev želene informacije še pripomočke in metode s katerimi bomo to informacijo obdelali.

V tej raziskovalni nalogi smo raziskovali kako na najboljši in najlažji način preberemo podatke iz vremenske postaje ter kako te informacije predelati oz. predstaviti tako, da bodo razumljivi ljudem, ki se ne spoznajo na meteorologijo.

Dlje ko smo raziskovali več načinov branja podatkov smo odkrili, a smo se na koncu odločili le za eno in sicer za branje podatkov iztxt in html tekstovnih datotek. Ugotavljali smo tudi kako te podatke pridobljene iz vremenske postaje predstaviti v spletni aplikaciji.


2 UVOD

Pridobivanje informacij je v informacijski družbi ključnega pomena, saj brez informacij ni podatkov in brez podatkov ni znanja. Če pa imamo informacije oz. podatke, ki so prikazani na takšen način, ki jih ne razumemo, je slabše kot to, da jih sploh ne bi imeli. Nekateri podatki oz. informacije nam brez predznanja nič ne pomenijo in to nas lahko moti, zato bi bilo potrebno vse podatke prikazovati na človeku prijazen način. Podatki s katerimi se še nikoli nismo srečali bi bilo potrebno razložiti in prikazovati na takšen način, da bi jih lahko razumeli ljudje z minimalnim predznanjem o tej temi.

Ljudje se pogovarjamo in družimo, ko gre za splošne teme se vsi več ali manj razumemo vendar, ko pa kdo začne govoriti o svoji stroki pa nas ostali iz druge stroke ne razumejo in zaradi tega lahko nastanejo problemi. Zamislimo si torej nekoga, ki nam začne govoriti o temi, ki je ne razumemo in nimamo predznanja o tem in se zato počutimo neprijetno. Če pa nam bi razložili podatke tako, da bi jih razumeli brez nekakšnega predznanja bi bilo vse lažje.

Ko smo v šoli izvedeli, da je na šolski strehi postavljena vremenska postaja smo se z mentorjem pogovorili kaj bi lahko naredili s podatki, ki nam jih ponuja ta vremenska postaja. Zato smo se s skupnimi močmi odločili, da bo naša skupina naredila spletno aplikacijo oz. spletno stran, ki bo prikazovala meteorološke podatke na človeku prijazen način, tako, da jih bodo razumeli vsi, mladi in tudi malo starejši, kot tudi ljudje z minimalnim znanjem o meteorologiji. Da pa bi lahko prikazovali meteorološke podatke tako, da bi jih vsi razumeli smo jih seveda morali razumeti mi, ki bomo to spletno stran postavili. Morali smo se naučiti, kaj vse potrebujemo za prikazovanje teh podatkov, da bodo podatki kar se da točni in da jih bodo razumeli vsi.


3 SPLETNA STRAN

3.1 Branje podatkov

V vsakdanjem jeziku pogosta izraza podatek in informacija predstavljata sopomenki, se pravi da ju uporabljamo za enak pomen. V informatiki pa je med njima bistvena razlika. Podatek v informatiki pomeni obdelovalna surovina. Iz podatkov v postopku obdelave dobimo informacijo. Podatki so kodirani, to pomedi da so zapisani s kodo. V sodobnih digitalnih napravah so podatki kodirani dvojiško oziroma binarno.

Če nam podatek v razumljivi obliki sporočijo in se iz tega nekaj novega naučimo smo prejeli informacijo. Informacija torej pomeni prirastek znanja. Iz enega podatka pa lahko dobimo različne informacije, odvisno pač od prejemnikovega predznanja.

Pred izdelavo spletne strani, smo se morali odločiti, kako bi brali podatke. Možnosti za branje podatkov je veliko.

3.1.1 Branje podatkov iz binarne .wlk datoteke

Za prvi način branja podatkov smo uporabili binarno datoteko Weatherlink. Za branje podatkov iz te datoteke smo napisali program, ki bi bral binarne podatke. Binarna datoteka WeatherLinka je razdeljena na več delov. Predenpridemo do potrebnih podatkov, kot so zapisi o temperaturi, vetru in ostalo, je potrebno izpustiti kar precej bitov. Prvih 18 bitov sestavlja naziv in verzija. Sledita dva dnevna zapisa, ki sta oba velika po 88 bitov in šele nato pridemo do potrebnih podatkov. Vse te potrebne korake smo zapisali v Microsoft Visual Studio v programskem jeziku C#.

Vendar pa takšen pristop ni bil primeren in je tudi zelo okoren, saj se datoteka posodobi vsako uro. Za vsak mesec se ustvari nova datoteka z imenom meseca in leta. Potrebno pa bi bilo razviti zelo zapleten algoritem, ki bi datoteko sproti dekodiral, shranjeval zapise, se pomikal med datotekami in računal povprečje nekaterih podatkov.

Z našim programom smo uspeli pridobiti le ključne podatke, kot so temperatura, pritisk, rosišče in podobno. Za pravilno delovanje in funkcionalnost pa to ni dovolj. Zato smo raziskali še druge načine branja podatkov. Ena izmed njih je COM port, ki je predstavljen v naslednjem poglavju.


3.1.2 Branje podatkov s COMportom

Že prej omenjeni program WeatherLink bere potrebne podatke direktno iz COMporta, zato smo analizirali tudi možnost takšnega načina pridobivanja podatkov. Najprej je bilo potrebno analizirati delovanje prenosa, podatkovni niz, ki pa je velik 95 bajtov. Nato smo morali ugotoviti še ostale nastavitve prenosa podatkov, kot je hitrost prenosa in kdaj se predpomnilnik porta počisti, če sploh se. Pomagali smo si z originalnim programom WeatherLink. Na srečo smo našli originalne nastavitve v čarovniku in tako pridobili vse potrebne informacije za izdelavo konzolne aplikacije, ki bi potrebne podatke brala vsako minuto in bi jih shranjevala v tekstovno datoteko.

Slika 1: Datoteka WetherLink s končnico .wlk

Slika 2: Nastavitve COM porta


Sprogramirati je bilo potrebno tudi ostale nastavitve, kot je izpraznitev predpomnilnika, ki se mora počistiti potem ko zahtevamo podatkovni niz. To nam je uspelo z ukazoma počisti vhodni in izhodni predpomnilnik.

Ob prejetju podatkovnega niza pa smo podatke morali nekako pretvoriti in shraniti. Ker smo že dekodirali .wlk format datoteke, nam ta del ni povzročal preglavic, saj je zaporedje podatkov skoraj identičen. Nekaj težav pa smo imeli z pretvarjanjem ameriških enot, kot so milje na uro, količina dežja v inčih, temperatura v fahrenheitih in podobno. Vsem je znano, da se pri pretvorbi merskih enot izgubi natančnost, rezultat pa so velikokrat dolga decimalna števila, ki pa jih je potrebno zaokrožiti. Mi smo podatke zaokrožili na dve decimalni vejici.

Slika 4: Ukazi za čišcenje predpomnilnika

Slika 3: Ukazi za čiščenje predpomnilnika


Ko smo program zapisali, smo ga morali še testirali. Konzolna aplikacija je pravilno delovala že v prvem poskusu, kar je rezultat dobre analize načina prenosa podatkov.

Program bi nato tudi uporabili in ga razvijali, dokler ne bi bil popolnoma funkcionalen in uporaben, vendar smo naleteli na težavo, katere pravzaprav nismo pričakovali. Do COM porta lahko dostopa samo en proces naenkrat, to je najverjetneje narejeno iz varnostnih razlogov. Se pravi, če smo želeli brati z našo aplikacijo, potem WeatherLink ne bi smel biti zagnan.

Slika 5: Shranjevanje in pretvorba podatkov

Slika 6: Konzolska aplikacija z zaprtim programom WeatherLink


Zato smo se zaradi prej omenjene težave dogovorili, da takšen način branja opustimo in raziščemo druge metode in pristope. K temu je pripomoglo dejstvo, da je WeatherLink zelo močno orodje, ki omogoča prikazovanje napredne statistike, s katero si pomagajo tudi meteorologi, naša spletna stran pa mora prikazovati podatke na uporabniku preprost način, ki takšnih in podobnih izpisov ne vsebuje. Na kratko povedano, škoda bi bilo zavreči WeatherLink, samo zaradi naše aplikacije, ker je dovolj potencialen, da bodo lahko z njegovo pomočjo to temo raziskovali še druge generacije za nami. Zato smo našli in uporabili nov pristop pri branju podatkov.

Slika 7: Konzolska aplikacija z odprtim programom WeatherLink

Slika 8: Prikaz napredne statistike v WeatherLinku


3.1.3 Branje podatkov iz .txt in .html tekstovnih datotek

WeatherLink ima takšno možnost konfiguracije, da generira in posodablja tekstovne datoteke z meteorološkimi podatki. Ustvarja lahko minutne ter dnevne zapise. Minutni zapisi se posodabljajo, zato datoteka vsebuje samo eno vrstico, to je trenutno stanje, medtem ko večdnevni zapisi vsebujejo več tisoč vrstic minutnih zapisov za zadnjih osem dni.

Slika 9: Prikaz datotek v raziskovalcu

Datoteka data.html vsebuje samo trenuten zapis podatkov, velika prednost te datoteke pa je, da v .xml datoteki nastavimo kateri podatki naj se shranjujemo. Na ta način se močno poveča uporabnost in pa enostavnost programiranja, saj v datoteki ni nepotrebnih podatkov, ki splošnega uporabnika ne zanimajo. XML datoteka vsebuje niz, ki ga lahko poljubno spreminjamo. Ker pa data.html datoteko uporabljajo tudi druge skupine, smo se morali dogovoriti in sestaviti takšen niz, ki bo zadostoval vsem skupinam. Če bi na lastno pest spreminjali ta niz, bi morali spremeniti najprej kodo v naši aplikaciji, prav tako pa bi to morale storiti tudi druge skupine. Kako je ta niz sestavljen pa prikazuje besedilo spodaj.

<!‐‐date‐‐>;<!‐‐time‐‐>;<!‐‐sunriseTime‐‐>;<!‐‐sunsetTime‐‐>;<!‐‐outsideTemp‐‐>;<!‐‐windChill‐‐>;<!‐‐hiOutsideTemp‐‐>;<!‐‐lowOutsideTemp‐‐>;<!‐‐outsideHumidity‐‐>;<!‐‐barometer‐‐>;<!‐‐barTrend‐‐>;<!‐‐windDir‐‐>;<!‐‐windDirection‐‐>;<!‐‐windSpeed‐‐>;<!‐‐wind10Avg‐‐>;<!‐‐rainRate‐‐>;<!‐‐solarRad‐‐>;<!‐‐uv‐‐>

Slika spodaj prikazuje način vpisa podatkov v data.html datoteki.

Slika 10: Način vpisa podatkov v data.html

Če dobro pogledamo lahko opazimo, da so podatki zapisani brez enot, vsi pa so ločeni z podpičjem. Ker pa naša spletna stran bere direktno iz te datoteke, je potrebno podatke ločiti in zapisati enote. Takšnega načina izpisa podatkov v naši aplikaciji si ne smemo dovoliti. Zato smo napisali algoritem, ki te podatke loči.Zapisan je v posebni metodi, ki jo kličemo vsako minuto, kadar je spletna stran generirana. Metodo kličemo v metodi Load().

Osnovni princip algoritma deluje tako, da odpremo datoteko, preberemo vsebino v nek niz, nato pa ta niz razbijemo v polje nizov z ukazom .Split().

Slika 11: Del programske kode


Downld.08.txt vsebuje minutne podatke zadnjih osem dni, ker pa smo se odločili, da naša spletna stran prikazuje samo podatke zadnjih petih dni ob 12.00 uri je ostalih več tisoč vrstic neuporabnih. Do želenih zapisov smo prišli tako, da smo napisali iskalni algoritem, ki se požene samo enkrat ob zagonu spletne strani. Princip delovanja pa je takšen.

Algoritem najprej odpre datoteko in prebere vsako vrstico, dokler ne pride do konca, natanko petkrat. Vsakič pa se nastavi želen datum, ki se od današnjega po dnevih pomakne za en dan nazaj. Ko prebere vrstico jo najprej razbije in preveri če ustreza datumu, nato pa preveri, če ustreza ura. Ko najdemo pravo vrstico shranimo niz in pokličemo metode za branje podatkov.

Način branja, je zelo zanimiv. Spodnja slika prikazuje problem branja podatkov, naslednji odstavek pa rešitev problema.

Težava je nastala zaradi tega, ker se zapisi podatkov ne začnejo vedno na istem mestu, ampak se na istem mestu končajo. Rešitev smo hitro našli in težavo prav tako hitro odpravili. Podatke beremo znak po znak in namesto, da bi jih brali naprej jih beremo nazaj dokler ne pridemo do praznega mesta, potem pa za toliko polj kot smo šli nazaj, ta podatek preberemo naprej, nato ga seveda še shranimo v objekt. Analizirana spodnja koda prikazuje klic ustreznih metod in shranjevanje v ustrezne objekte.

Slika 12: Način zapisa v datoteki downld08.txt


3.2 Prikazovanje podatkov

Prikaz podatkov na uporabniku preprost, zanimiv in praktičen način je zelo pomemben faktor, ki vpliva na priljubljenost vseh izdelkov, ki so namenjeni podajanju in predstavljanju informacij nekemu končnemu uporabniku. Prikaz podatkov je ključni element, ki obiskovalca pritegne in ga spremeni v uporabnika, ali pa ga odvrne in izdelka oz. storitve nikoli več ne bo uporabil.

Zato smo prikazu podatkov namenili precej časa. Najprej smo se morali odločiti katere podatke bomo sploh prikazovali, nato določili postavitev teh podatkov in izbrali najustreznejše načine prikaza. Vsi smo se strinjali, da bodo vse podatke spremljali slike in da bomo vodili nekakšno evidenco vseh zapisov. Za prikaz podatkov smo izbrali spletno aplikacijo.

3.2.1 Prikazovanje trenutnih podatkov

Spletna stran ima za trenutno vreme na razpolago prikazovanje desetih podatkov, za katere menimo, da so najpomembnejši. Ti podatki so: temperatura, pritisk, vlažnost, količina dežja, hitrost vetra, temperatura vetra, rosišče, sevanje, toplotni indeks in UV indeks. Vsi podatki so prikazovani v najprimernejših enotah. Na podlagi podatkov izbiramo sliko, ki nam prikazuje vreme in je prikazana nad podatki.

Prikazovanje podatkov za trenutno vreme je sestavljeno tako, da se pooblaščena oseba vpiše oziroma prijavi v že ustvarjen račun in samo on/a ima dovoljenje, da se odloči katere od desetih podatkov, želi prikazovati. To smo ustvarili tako, da pooblaščena oseba klikne na želene podatke in nato potrdi spremembe, kot prikazuje spodnja leva slika.

Slika 13: Klic metod in shranjevanje v ustrezne objekte


Vse shranjene spremembe shranimo v posebno datoteko. Vsak podatek ima svojo številko. Vse številke podatkov se shranjujejo v datoteko kot nizi, ki so med seboj ločeni, da jih je mogoče kasneje tudi prebrati. Datoteka je ustvarjena samo za branje, kar pomeni da ne moremo sami vpisati številk.

Zapisali smo program, ki preverja, kateri podatki so bili izbrani, pri čemer smo si pomagali s datoteko, ki smo jo ustvarili ravno s tem namenom. Program pa prav tako na podlagi zapisov v datoteki, izpiše oziroma prikaže potrebne podatke na spletno stran.

Ne prikazujemo pa samo podatke za trenutno vreme, ampak tudi vreme za prejšnjih pet dni, ki so prikazani na levi strani spletne strani. Za ta del, je bil ravno tako potreben program. Ta program vsebuje izpisovanje podatkov in sicer ne izpisujemo vse, kot smo to storili za prikazovanje trenutnega vremena, ampak samo podatke kot so: temperatura, pritisk, vlažnost, količina dežja, hitrost vetra in temperatura vetra. Poleg tega je bilo potrebno sprogramirati, da je prikazovalo dneve v pravilnem vrstnem redu, kot si sledijo v tednu.

Odločili smo se, da bomo prikazovali podatke tudi za zadnjih pet dni ob 12:00 uri, saj mnogo uporabnikov zanima vpogled v stanje preteklih nekaj dni, koristno pa je tudi za logično primerjavo. Poleg tega takšen prikaz aplikacijo dopolni in jo naredi bolj dinamično. Podatke prebere spletna stran iz datoteke downld08.txt samo enkrat ob zagonu, saj se za razliko od minutnih podatkov ti ne rabijo osveževati.

Slika 14: Izbira podatkov za prikaz


Ob strani je viden tudi vizualen prikaz takratnega stanja, saj si tako obiskovalci naše spletne strani lahko lažje predstavljajo prejšnje stanje. Prav tako takšen prikaz naredi spletno stran veliko bolj atraktivno, prijazno uporabniku in veliko bolj uporabno ter funkcionalno.

Iz podobnega razloga je tudi pri vsaki napovedi vizualna ponazoritev vremena. Te metode se meteorologi in tudi novinarji poslužujejo od samih začetkov napovedovanja vremena.

Stvar je tudi sprogramirana dovolj dinamično, da spletna stran oziroma algoritem sam določi prejšnje dneve na osnovi današnjega dne in poišče ustrezne zapise. Zaradi lažjega razumevanja so tudi dnevi predstavljeni z imenom v tednu namesto z konkretnim datumom.

3.2.2 Prikazovanje statistike in generiranje grafikonov

Odločili smo se, da uporabimo za izpis statistike grafikone in tabele. Ti so prikazani posebej, kar pomeni, da ko preverjamo statistiko na primer za nek dan prejšnjega meseca ob strani ne bodo prikazani trenutni in tedenski podatki, saj bi bila tako stran prenatrpana s podatki in informacijami, ki pa jih uporabnik niti ne bi mogel pregledati. Zato je statistika prikazana na svojih straneh spletne strani. Ker pa uporabnika ne zanima kakšno je bilo vreme prejšnji mesec neke minute, smo napisali aplikacijo, ki teče na strežniku, bere trenutne podatke, računa povprečje in nato to povprečje vsako uro shranjuje v bazo. V podatkovno bazo se shrani tudi datum in ura zapisa. Dinamičnost spletne strani pa ustvarjajo digitalna ura, datum in kompas, ki služi prikazovanju smeri vetra.

Slika 15: Vreme zadnjih 5 dni


3.2.2.1 Aplikacija za izračun povprečja in shranjevanja v podatkovno bazo

Aplikacija za izračun povprečja je prav tako zapisana v Visual Studio razvojnem okolju in sicer v jeziku C#. Je namizna aplikacija, njena sestava pa je dokaj preprosta. Vsebuje en timer, ki se proži vsako minuto. Ko se timer sproži, se pokliče metoda za izračun povprečja, nato pa program preveri ali je polna ura, če je ura recimo dvanajst popoldne, se bodo vsi povprečni zapisi shranili v podatkovno bazo. Aplikacija je uporabna, ker omogoča takšen način shranjevanja, ki pa je pogoj za prikaz mogoče malo naprednejše statistike in vizualnih ponazoritev, kot so grafikoni. Aplikacija prav tako bere trenutne podatke, vzame smer vetra v stopinjah, poišče sliko sever.png in jo obrne za toliko stopinj, kot je zapisano v datoteki. Nato pa sliko shrani pod imenom kurzor.png. To se zgodi vsako minuto.

Vizualna zgradba te aplikacije je zelo preprosta, saj vsebuje samo en gumb, ki sproži timer. Dostop do te aplikacije imajo samo skrbniki spletnega strežnika, ne pa tudi uporabniki in obiskovalci naše spletne strani.

Slika 16: Vizualna aplikacija


3.2.2.2 Prikaz statistike

Statistika je prikazana z tabelo, ki prikazuje povprečje enournih podatkov za en dan. Uporabnik lahko na koledarju sam izbere leto, mesec in pa dan. Stvar je dovolj dinamična, da če zapisov za tisti dani ni, se spletna stran ne poruši ampak se ne zgodi nič. V statistiki so prikazani vsi tipi podatkov, od temperature do pritiska. Maksimalno število zapisov za en dan pa je natanko 24, kolikor je tudi ur v dnevu.

S to metodo obiskovalca pritegnemo, saj dobi vpogled v celotno zgodovino zapisov, od kar je postavljena vremenarska postaja.

Slika 17:Koledar za izbiro želenega dneva

Slika 18: Prikaz podatkov želenega dneva


3.2.2.3 Prikaz grafikonov

Grafikoni so zelo pomemben element naše spletne strani, saj omogočajo preprost način prikaza naprednih podatkovnih struktur. Spletna stran od uporabnika zahteva katere vrste grafikonov želi uporabnik analizirati, oziroma dostopati do njih, nato klikne na želen datum in prikaže se stolpčni diagram. Prav tako na tej strani uporabnik nima vpogleda v trenutno stanje in pa stanje zadnjih pet dni. Grafikoni so dinamični, kar pomeni, da se diferenca med enotami prilagaja velikosti vnesenih podatkov in številu zapisov. To pomeni, da če so za današnji dan opravljeni šele trije zapisi, se bodo na grafikonu prikazali samo trije stolpci.

Slika 19: Prikaz grafikona


3.2.3 Smer vetra ponazorjena z kompasom

Ljudje, si lažje predstavljamo stvari v okolju, če jih vidimo, ali pa če nam nekdo neko stvar opiše, nariše ali razloži. Najboljši način prikaza nekih informacij je seveda vizualna predstavitev, zato smo tudi smer vetra, namesto, da bi jo zapisali kot število stopinj ali pa kot smeri neba, kot so sever, jug, vzhod in zahod, odločili za vizualno ponazoritev s kompasom.

V zgornjem desnem okvirčku naše spletne strani je ta element tudi viden. Gre za kompas, ki ima na sredini kurzor, ki se premika v tisto smer, v katero veter piha. Stvar zgleda zelo preprosta, a je bilo pravzaprav takšen dinamičen element zelo težko sprogramirati.

Težavo smo rešili po korakih. Razvojno okolje Visual Studio WebDeveloper ne vsebuje nikakršnih elementov, s katerimi bi lahko poljubno obračali slike. Zato smo uporabili že prej omenjeno namizno aplikacijo, ki vzame sliko sever.png, ki je pravzaprav kurzor z prozornim ozadjem in jo obrne za toliko stopinj, kot je zapisano v datoteki. To sliko shrani pod imenom kurzor.png. Šele to sliko prikaže naša spletna stran. Ker je slika prozorna, je v ozadju lepo viden kompas, ki je nastavljen kot ozadje celice v kateri se kurzor nahaja. Dalje je bilo potrebno tudi ugotoviti, kako sliko osveževati, ne da bi bilo potrebno posodobiti celo stran, saj se slika naloži samo enkrat. Naš brskalnik smo »prelisičili« tako, da smo v url slike napisali poizvedbo, ki vrne nič, ampak se vedno, ko se ta poizvedba izvede slika ponovno naloži. Ta koda je prikazana spodaj, ker je DateTime.Now vrednost vsakič različna, se poizvedba zažene vsakič, ko se posodobi update panel. Kar pomeni, da se slika posodobi vsako minuto in kurzor se obrne vedno, ko se smer vetra spremeni. Seveda to poteka na minutnih intervalih, saj se tudi podatki posodabljajo vsako minuto.

Image1.ImageUrl = "~/Slike/kurzor.png?myTime=" + DateTime.Now;

Slika 20: Smer vetra


3.3 Podatkovna baza

Podatkovna baza smo kreirali na podlagi podatkov, ki jih prejmemo iz vremenske postaje. Na podlagi teh podatkov smo tako izračunali povprečje, ki smo jih nato shranili v bazo. Podatki se shranjujejo preko aplikacije, ki smo jo zapisali v programskem jeziku C#, ti so tako zapisani v bazo vsako uro. Baza vsebuje eno tabelo, saj jo potrebujemo samo za prikaz podatkov v obliki grafov na spletni strani.

Za kreiranje baze smo uporabili pristop top-down, ki pa je bil rahlo okoren, glede na to, da imamo eno tabelo, zaradi česar tudi ni bila potrebna normalizacija. Za primarni ključ smo določili atribut ID, ki je tipa integer in se samodejno povečuje. Medtem ko se ostali podatki prenašajo iz aplikacije in so tipa float, izjemi sta Datum in Ura, ki nam povesta kdaj so bili podatki zapisani in kakšni so bili povprečni podatki.

Slika 21: E‐R diagram tabele


3.4 Oblika in CSS

Spletna stran je narejena v programskem razvojnem okolju Microsoft Visual‐Studio. MS Visual‐Studio ima na razpolago več programskih jezikov ( visualBasic, C++, C#, …). To razvojno okolje omogoča izdelovanje spletnih strani v asp.net v katerem je napisana koda za prikazovanje spletne strani. Programski del kode pa je napisan v Visual C#. Oblika je napisana s pomočjo CSS (CascadingStyleSheets).

Gradnja spletne strani se začne s tem, da postavimo tabelo na sredino spletne strani, ker ima Visual C# možnost MasterPage (nekakšna stran nad stranmi v kateri se prikazujejo podatki) naredimo obliko le enkrat in postavimo ContentPlaceHolder (orodje kjer se prikazujejo podatki iz

postrani) na sredino. Seveda ima tabela lahko več celic ampak dokler ne vemo koliko podatkov bomo prikazovali je za začetek tabela 3x3 zadosti velika. Tabelo pa zaradi oblike velikokrat postavimo na sredino strani.

Za obliko se uporablja CSS ki se lahko uporablja v zunanji datoteki,v glavi ali pa kar v tagu (oznaki). S CSS lahko definiramo stil HTML oz. XHTML elementov, kako naj se prikažejo na strani. Določamo lahko barve, velikosti, oblike, pozicije, … S CSS zmanjšamo količino kode, saj omogočimo več stranmi uporabo tega kar smo napisali v CSS, kar bistveno zmanjša količino kode, prav tako pa nam prihrani delo, saj moramo CSS napisati samo enkrat in ga nato lahko večkrat uporabimo.

Da na kratko opišem kodo CSS ki sem jo največkrat uporabil.

Ko smo ustvarili nov id in v njega lahko vpišemo kar želimo glede oblike. V tem primeru smo uporabili ukaz za ozadje katerega smo uporabili v naši spletni strani. V HTML oznaki potem samo uporabimo ta stil (<td id=''levo''>) in se nam ta slika ponovi horizontalno, saj smo napisali repeat‐y.

Ustvarimo nov id.

Pot do slike

Slika 22: Tabela v C#

Slika 23: CSS koda


4 NADGRADNJA IN BODOČI CILJI

Nadgradnja spletne strani je povsem odprte narave, vendar je priporočljiva. Potrebno je slediti trendom, saj nas v nasprotnem primeru povozi čas. Spletna stran ni nikoli zaključen projekt, saj jo je vedno mogoče izboljšati oz. obogatiti in s tem narediti posebno.

Naš bodoči cilj je izboljšava same spletne strani iz oblikovnega vidika in morda tudi iz vidika prikazovanja podatkov.


5 RAZPRAVA

Problematika podatkov, ki so prikazani na tak način, da jih ne razumemo bi bilo treba popraviti tako, da bi jih vsi razumeli zato smo se odločili, da bomo poskušali narediti spletno stran, ki bo prikazovala podatke iz vremenske postaje.

Iskali smo načine kako prebirati podatke iz vremenske postaje in smo na koncu našli pravo, najlažjo možnost, ki se nam je ponudila.

Podatki so bili shranjeni v podatkovno bazo, da lahko prikazujemo grafe in statistiko na spletni strani.

Oblikovana je bila spletna stran za prikazovanje podatkov iz vremenske postaje in izpostavili smo tudi, kako bi lahko spletno stran nadgradili, da bi bila spletna stran še bolj uporabna in razumljiva.


6 ZAKLJUČEK

Namen naše raziskovalne naloge je bila postavitev spletne strani s prikazom podatkov iz vremenske postaje. Najpomembnejše je bilo dobiti podatke iz vremenske postaje. Načinov za pridobitev teh podatkov je bilo več in nekaj izmed njih smo tudi bolj natančno navedli. Zatem jih je bilo potrebno prikazati oziroma izpisati na spletno stran. Skozi posamezne postopke, ki so navedeni in opisani v sami raziskovalni nalogi je tako nastal končni izdelek.

Med samo izdelavo smo naleteli tudi na težave, ki pa smo jih s skupnimi močmi uspeli odpraviti. Težave so se pojavile že kar pri prvem koraku, kako pridobiti podatke iz vremenske postaje, da jih bomo lahko prikazovani na naši spletni strani. S težavami smo se sproti ukvarjali, zato je bilo potrebno napisati program kako »prisluškovati« podatkom iz COM porta. Težava pa je tudi nastala ko smo dobili datoteko z končnico .wlk saj je še nismo nikoli uporabljali in je bilo potrebno pridobivati podatke iz nje, vendar je bilo za to več rešitev in smo morali razmisliti za katero odločitev se bomo odločili. Ko smo končno ugotovili kako prikazovati podatke na spletni strani se je bilo treba odločiti katere podatke bomo prikazovali, da ne bo prevelike nasičenosti s podatki in bo tako nastala samo še ena spletna stran s preveliko količino podatkov.


7 VIRI IN LITERATURA

• Spletna stran Codeproject / nazadnje preverjena 16.3.2012

http://www.codeproject.com/Articles/4416/Beginners‐guide‐to‐accessing‐SQL‐Server‐through‐C

• Spletna stran Microsoftovega razvojnega pomočnika / nazadnje preverjena 15.3.2012

http://msdn.microsoft.com/en‐us/default

• Spletna stran Microsoft ASP.NET /nazadnje preverjena 16.3.2012

http://www.asp.net/web‐pages

• Spletna stran w3school / nazadnje preverjena 14.3.2012

http://www.w3schools.com/sql/default.asp


8 ZAHVALA Naša delovna skupina bi se rada zahvalila mentorju MojmirjuKlovarju za pomoč pri izbiri teme za to nalogo in kasneje za pomoč pri uresničitvi naših želja. Seveda pa gre zahvala tudi osebju, ki so nam bili v veliko pomoč pri končni uresničitvi naših zamisli in želja.


9 KAZALO SLIK

Slika 1: Datoteka WetherLink s končnico .wlk ......................................................................................... 5 Slika 2: Nastavitve COM porta ................................................................................................................ 5 Slika 3: Odsek programske kode aplikacije v C# ...................................................................................... 5 Slika 4: Ukazi za čišcenje predpomnilnika ............................................................................................... 6 Slika 5: Shranjevanje in pretvorba podatkov ........................................................................................... 7 Slika 6: Konzolska aplikacija z zaprtim programom WeatherLink ........................................................... 7 Slika 7: Konzolska aplikacija z odprtim programom WeatherLink .......................................................... 8 Slika 8: Prikaz napredne statistike v WeatherLinku ................................................................................. 8 Slika 9: Prikaz datotek v raziskovalcu ...................................................................................................... 9 Slika 10: Način vpisa podatkov v data.html ............................................................................................ 9 Slika 11: Del programske kode ................................................................................................................ 9 Slika 12: Način zapisa v datoteki downld08.txt ..................................................................................... 10 Slika 13: Klic metod in shranjevanje v ustrezne objekte ........................................................................ 11 Slika 14: Izbira podatkov za prikaz ........................................................................................................ 12 Slika 15: Vreme zadnjih 5 dni ................................................................................................................ 13 Slika 16: Vizualna aplikacija .................................................................................................................. 14 Slika 17:Koledar za izbiro želenega dneva ............................................................................................. 15 Slika 18: Prikaz podatkov želenega dneva ............................................................................................. 15 Slika 19: Prikaz grafikona ...................................................................................................................... 16 Slika 20: Smer vetra ............................................................................................................................... 17 Slika 21: E‐R diagram tabele.................................................................................................................. 18 Slika 22: Tabela v C# .............................................................................................................................. 19 Slika 23: CSS koda .................................................................................................................................. 19 Slika 24: Končna spletna stran............................................................................................................... 26


10 PRILOGE

Slika 24: Končna spletna stran

spletna stran › raziskovalne › 4201203861.pdfspletna stran stran 3 2 uvod pridobivanje...

Documents