1 Jihočeská univerzita v Českých Budějovicích Pedagogická fakulta Katedra informatiky BAKALÁŘSKÁ PRÁCE Interaktivní webové stránky pro testování žáků ...
Jihočeská univerzita v Českých Budějovicích Pedagogická fakulta Katedra informatiky
BAKALÁŘSKÁ PRÁCE
Interaktivní webové stránky pro testování žáků z matematiky na ZŠ
Vypracoval: Václav Kandus Vedoucí práce: PaedDr. Petr Pexa, Ph.D. České Budějovice 2014
Prohl´ aˇ sen´ı
Prohlaˇsuji, ˇze svoji bakal´aˇrskou pr´aci na t´ema Interaktivn´ı webov´e str´anky pro tesˇ jsem vypracoval samostatnˇe pouze s pouˇzit´ım tov´an´ı ˇza´k˚ u z matematiky na ZS pramen˚ u a literatury uveden´ ych v seznamu citovan´e literatury.
Prohlaˇsuji, ˇze v souladu s § 47b z´akona ˇc. 111/1998 Sb. v platn´em znˇen´ı souhlas´ım se zveˇrejnˇen´ım sv´e bakal´aˇrsk´e pr´ace, a to v nezkr´acen´e podobˇe, elektronickou cestou ve veˇrejnˇe pˇr´ıstupn´e ˇca´sti datab´aze STAG provozovan´e Jihoˇceskou univerzitou ˇ ych Budˇejovic´ıch na jej´ıch internetov´ v Cesk´ ych str´ank´ach, a to se zachov´an´ım m´eho autorsk´eho pr´ava k odevzdan´emu textu t´eto kvalifikaˇcn´ı pr´ace. Souhlas´ım d´ale s t´ım, aby tout´eˇz elektronickou cestou byly v souladu s uveden´ ym ustanoven´ım z´akona ˇc. 111/1998 Sb. zveˇrejnˇeny posudky ˇskolitele a oponent˚ u pr´ace i z´aznam o pr˚ ubˇehu a v´ ysledku obhajoby kvalifikaˇcn´ı pr´ace. Rovnˇeˇz souhlas´ım s porovn´an´ım textu m´e kvalifikaˇcn´ı pr´ace s datab´az´ı kvalifikaˇcn´ıch prac´ı Theses.cz provozovanou N´arodn´ım registrem vysokoˇskolsk´ ych kvalifikaˇcn´ıch prac´ı a syst´emem na odhalov´an´ı plagi´at˚ u. ˇ ych Budˇejovic´ıch 27. 7. 2014 V Cesk´
.....................
Dˇekuji t´ımto panu PaedDr. Petru Pexovi, Ph.D. za odborn´e veden´ı m´e pr´ace, cenn´e pˇripom´ınky a ˇcas, kter´ y mi pˇri zpracov´an´ı bakal´aˇrsk´e pr´ace vˇenoval.
Abstrakt C´ılem t´eto bakal´aˇrsk´e pr´ace je vytvoˇren´ı interaktivn´ıch webov´ ych str´anek, jeˇz budou zamˇeˇreny na procviˇcov´an´ı a testov´an´ı ˇza´k˚ u z´akladn´ıch ˇskol z vybran´ ych parti´ı matematiky. Webov´a aplikace jim d´av´a prostor nejen k procviˇcov´an´ı sv´ ych dovednost´ı v patn´acti kategori´ıch o tˇrech obt´ıˇznostech a pˇrihlaˇsov´an´ı se do pracovn´ıch skupin, ale d´ale i k vypracov´av´an´ı a sledov´an´ı u ´spˇeˇsnosti v testech, kter´e pro nˇe vytvoˇril jejich vyuˇcuj´ıc´ı. Uˇcitel˚ um aplikace umoˇzn ˇuje od jiˇz zm´ınˇen´eho vytv´aˇren´ı test˚ u a skupin i vkl´ad´an´ı vlastn´ıch pˇr´ıklad˚ u a monitorov´an´ı nˇekter´ ych statistick´ ych ukazatel˚ u, jako napˇr´ıklad toho, jak si ˇz´aci pˇri jimi zadan´ ych u ´kolech vedli. Prvn´ı ˇca´st pr´ace se zab´ yv´a anal´ yzou obdobnˇe zamˇeˇren´ ych str´anek a jejich porovn´av´an´ım. Druh´a ˇca´st je pot´e zamˇeˇrena na anal´ yzu a n´avrh samotn´e aplikace a popisuje stˇeˇzejn´ı ˇc´asti jej´ıho v´ yvoje. N´asleduj´ıc´ı ˇca´st se vˇenuje moˇzn´ ym bezpeˇcnostn´ım hrozb´am a zp˚ usob˚ um, jak jim pˇredej´ıt. Ve ˇctvrt´e ˇca´sti pr´ace je pops´ana implementace syst´emu, jeˇz struˇcnˇe charakterizuje pouˇzit´e technologie a n´astroje pˇri vytv´aˇren´ı webov´e aplikace. Z´avˇereˇcn´a ˇc´ast pr´ace popisuje ovˇeˇren´ı vytvoˇren´e aplikace na vybran´ ych z´akladn´ıch ˇskol´ach a v´ıcelet´ ych gymn´azi´ıch.
Kl´ıˇ cov´ a slova Interaktivn´ı webov´a aplikace, Online procviˇcov´an´ı a testov´an´ı matematiky, Anal´ yza, n´avrh a implementace syst´emu
Abstract The aim of this bachelor thesis is to create particular interactive web pages that would be focused on both the practice and the testing of elementary school pupils in selected areas of mathematics. This web application enables the pupils not only to practise their skills in 15 different categories comprising three levels of difficulty and to access their work groups, but also to complete assigned tests created by their teacher and to follow their progress in them as well. Apart from the test and the group creation, the application also enables the teachers to put in their own tasks and exercises and to monitor certain statistic indexes, for instance how well the pupils performed the assigned tasks. The first part of the thesis deals with the analysis of similar web pages and their comparison. The second part is then focused on the analysis and the design of the application itself and further describes the crucial parts of its development. The following, i.e. the third, part is devoted to possible security thrests and how to prevent them. The system implementation is described in the fourth part which also briefly characterizes all of the used technologies and tools when creating the web application. The final part discusses the use of this application at selected elementary and grammar schools.
Kl´ıˇ cov´ a slova Interactive web pages, Online practising and testing exercises from mathematics, Analysis, design and implementation of web application
V posledn´ıch letech se zvyˇsuje poˇcet v´ yukov´ ych program˚ u a webov´ ych aplikac´ı, kter´e lze vyuˇz´ıt pˇr´ımo ve vyuˇcovac´ıch hodin´ach r˚ uzn´ ych pˇredmˇet˚ u, jenˇz mohou pˇrisp´ıvat ke zv´ yˇsen´ı efektivnosti v´ ykladu uˇcitele ˇci k z´ısk´an´ı vˇetˇs´ı pozornosti ˇza´k˚ u. Praktickou ˇca´st´ı t´eto pr´ace je pr´avˇe vytvoˇren´ı takov´eto aplikace ve formˇe interaktivn´ıch webov´ ych str´anek pro procviˇcov´an´ı a zkouˇsen´ı matematiky na u ´rovni 2. stupnˇe z´akladn´ı ˇskoly. Webov´a aplikace je um´ıstˇena na adrese http://www.vypoctito.cz. Prvn´ı ˇca´st pr´ace se vˇenuje anal´ yze a porovn´an´ı webov´ ych str´anek, jeˇz umoˇzn ˇuj´ı online procviˇcov´an´ı matematiky. Pro zaˇrazen´ı do tohoto porovn´av´an´ı musely nalezen´e webov´e str´anky splnit nˇekolik z´akladn´ıch krit´eri´ı - zamˇeˇren´ı obsahu str´anek na ˇza´ky 2. stupnˇe z´akladn´ı ˇskoly, v´ıce variant zad´an´ı jednoho cviˇcen´ı, obsah str´anek v ˇcesk´em jazyce a dostupnost zdarma. U kaˇzd´e aplikace je pops´ano jej´ı uˇzivatelsk´e rozhran´ı, nab´ıdka funkc´ı a technick´e zpracov´an´ı. Druh´a ˇca´st pr´ace se zab´ yv´a anal´ yzou a n´avrhem syst´emu prostˇrednictv´ım objektovˇe orientovan´eho jazyka UML. Pˇri n´avrhu syst´emu bylo vyuˇzito n´asleduj´ıc´ıch diagram˚ u jazyka UML – diagram pˇr´ıpadu uˇzit´ı a diagram tˇr´ıd, jenˇz jsou d´ale doplnˇeny specifikac´ı syst´emov´ ych poˇzadavk˚ u a diagramy aktivit. Popis v´ yvoje aplikace je nav´ıc doplnˇen o dr´atov´e modely jednotliv´ ych webov´ ych str´anek a popis datab´azov´e struktury syst´emu. N´asleduj´ıc´ı ˇca´st pr´ace popisuje bezpeˇcnostn´ı rizika webov´e aplikace, se kter´ ymi bylo zapotˇreb´ı se vypoˇra´dat, a struˇcnˇe pˇredstavuje technologie, jeˇz byly pouˇzity pˇri tvorbˇe a testov´an´ı funkˇcnosti aplikace. V samotn´em z´avˇeru pr´ace je pops´an pr˚ ubˇeh ovˇeˇrov´an´ı webov´e aplikace v hodin´ach matematiky na z´akladn´ıch ˇskol´ach, respektive v´ıcelet´ ych gymn´azi´ıch. Toto t´ema jsem si zvolil z d˚ uvodu osobn´ıho z´ajmu o matematiku, a tak´e z d˚ uvodu moˇznosti vyuˇz´ıt modern´ı webov´e technologie k vytvoˇren´ı aplikace, jenˇz by mohla b´ yt uˇziteˇcn´a v r´amci v´ yuky ˇci samostatn´eho procviˇcov´an´ı.
12
1.1
C´ıle pr´ ace
C´ılem bakal´aˇrsk´e pr´ace bylo vyhled´an´ı, analyzov´an´ı a porovn´an´ı webov´ ych str´anek umoˇzn ˇuj´ıc´ıch procviˇcov´an´ı pˇr´ıklad˚ u nebo testov´an´ı ˇza´k˚ u z matematiky na u ´rovni 2. stupnˇe z´akladn´ı ˇskoly. D´ale navrhnout a implementovat webovou aplikaci slouˇz´ıc´ı k procviˇcov´an´ı pˇr´ıklad˚ u a testov´an´ı ˇza´k˚ u z vybran´ ych parti´ı matematiky na u ´rovni z´akladn´ı ˇskoly, kter´a bude prospˇeˇsn´a i uˇcitel˚ um a naplnit ji samotn´ ym obsahem. Webov´e str´anky rozliˇsuj´ı mezi rolemi ˇza´ka, uˇcitele a administr´atora. Uˇcitel´e mohou vytv´aˇret skupiny, testy ˇ aci si budou moci procviˇcovat jednotliv´e a vkl´adat vlastn´ı pˇr´ıklady do syst´emu. Z´ pˇr´ıklady v´ ybˇerem z nab´ızen´ ych kategori´ı, vstupovat do r˚ uzn´ ych skupin, v r´amci tˇechto skupin absolvovat testy a prohl´ıˇzet si sv´e v´ ysledky z procviˇcov´an´ı a testov´an´ı. Mezi c´ıle t´eˇz patˇrilo otestov´an´ı aplikace na nˇekolika z´akladn´ıch ˇskol´ach, respektive v´ıcelet´ ych gymn´azi´ıch.
1.2
Metody pr´ ace
Nejprve byl proveden pr˚ uzkum zamˇeˇren´ y na webov´e str´anky umoˇzn ˇuj´ıc´ı testov´an´ı ˇza´k˚ u z matematiky. Z mnoˇziny nalezen´ ych str´anek byly vybr´any takov´e, kter´e splˇ novaly stanoven´a krit´eria, mezi nˇeˇz patˇrila napˇr. dostupnost zdarma ˇci zamˇeˇren´ı na 2. stupeˇ n z´akladn´ı ˇskoly, a tyto str´anky byly podrobnˇeji analyzov´any a porovn´any. Pˇred samotnou implementac´ı webov´e aplikace byla provedena potˇrebn´a anal´ yza, n´avrh a otestov´an´ı jednotliv´ ych ˇca´st´ı. K tomu byly vyuˇzity n´astroje jazyka UML a tyto informace byly zobrazeny pomoc´ı jednotliv´ ych diagram˚ u. Souˇc´ast´ı n´avrhu je i datab´azov´a struktura aplikace a prvotn´ı zobrazen´ı grafick´eho rozhran´ı jednotliv´ ych str´anek prostˇrednictv´ım wireframe. Po t´eto ˇca´sti byly zvoleny vhodn´e technologie a naprogramov´ana dan´a aplikace. Neˇz byla samotn´a aplikace odzkouˇsena v praxi, byly potˇrebn´e kategorie naplnˇeny dostateˇcn´ ym mnoˇzstv´ım pˇr´ıklad˚ u a ˇra´dnˇe odcitov´any. Na z´avˇer byla webov´a aplikace ovˇeˇrena v hodin´ach matematiky na nˇekolika z´akladn´ıch ˇskol´ach a v´ıcelet´ ych gymn´azi´ıch a z´ısk´ana zpˇetn´a vazba od uˇcitel˚ u, kteˇr´ı tak´e zprostˇredkovali dojmy sv´ ych ˇza´k˚ u.
13
2
Anal´ yza webov´ ych str´ anek
Tato ˇca´sti pr´ace je zamˇeˇrena na anal´ yzu a porovn´an´ı ˇcesk´ ych web˚ u, kter´e se vˇenuj´ı online procviˇcov´an´ı a testov´an´ı znalost´ı z matematiky na u ´rovni 2. stupnˇe z´akladn´ı ˇskoly. N´ıˇze je analyzov´ano pˇet webov´ ych str´anek, jenˇz se zobrazily1 na pˇredn´ıch pozic´ıch ve vyhled´avaˇci Google po zad´an´ı kombinac´ı kl´ıˇcov´ ych slov matematika, procviˇcov´an´ı, testy, pˇr´ıklady, online. Pro vybr´an´ı web˚ u k anal´ yze byly stanoveny minim´aln´ı poˇzadavky, kter´e mˇela webov´a str´anka splˇ novat: • zamˇeˇren´ı na 2. stupeˇ n z´akladn´ı ˇskoly, • v´ıce variant zad´an´ı jednoho cviˇcen´ı, • obsah str´anek v ˇcesk´em jazyce, • dostupnost zdarma. Bohuˇzel tˇemito krit´erii proˇslo pouze nˇekolik webov´ ych port´al˚ u. Ve vˇetˇsinˇe pˇr´ıpad˚ u nesplnily druh´ y poˇzadavek. Testy nebo cviˇcen´ı obsahovaly pouze jednu variantu zad´an´ı, se kterou si ˇz´ak sv´e znalosti moc nezdokonal´ı. Pro pˇredstavu m˚ uˇzeme uv´est pˇr´ıklad webov´ ych str´anek O ˇskole 2 . Nˇekter´e podobn´e weby byly vytvoˇreny pˇr´ımo uˇciteli a jsou k dispozici ˇz´ak˚ um na domovsk´ ych str´ank´ach ˇskoly. Jelikoˇz nen´ı potˇreba se pˇrihlaˇsovat, mohou toto procviˇcov´an´ı vyuˇz´ıt i ˇza´ci mimo danou ˇskolu. Pro pˇredstavu si uvedeme webov´e str´anky z´akladn´ı ˇskoly Dobˇrichovice3 . Vyhled´avaˇc zobrazoval ve v´ ysledc´ıch vyhled´av´an´ı velmi ˇcasto weby zamˇeˇren´e na jinou vˇekovou skupinu ˇza´k˚ u. Pˇrevl´adaly webov´e str´anky se zamˇeˇren´ım na ˇz´aky prvn´ıho stupnˇe z´akladn´ı ˇskoly. V tomto pˇr´ıpadˇe si m˚ uˇzeme uv´est pˇr´ıklad str´anek Matematika online: V´yuka a douˇcov´an´ı zdarma 4 . ˇ Casto se mezi v´ ysledky zobrazovaly tak´e webov´e str´anky, kter´e se nevˇenovaly online procviˇcov´an´ı a testov´an´ı matematiky, ale obsahovaly v´ yklad l´atky a uk´azkovˇe 1
ˇreˇsen´e pˇr´ıklady nebo pouze uk´azkovˇe ˇreˇsen´e pˇr´ıklady. I zde si pro n´azornost uvedeme napˇr´ıklad webov´e str´anky E-matematika.cz 5 . U kaˇzd´eho v´ yukov´eho webu si uvedeme nab´ıdku funkc´ı, moˇznosti uˇzivatele, technick´e a grafick´e zpracov´an´ı. Pro hodnocen´ı byla zvolena n´asleduj´ıc´ı krit´eria: • pˇrehlednost webu, • mnoˇzstv´ı reklam, • posledn´ı aktualizace obsahu webu, • mnoˇzstv´ı variant pˇr´ıklad˚ u k jednomu t´ematu, • zpˇetn´a vazba, • statistika v´ ysledk˚ u – zobrazen´ı poˇctu spr´avn´ ych, resp. chybn´ ych odpovˇed´ı ve cviˇcen´ı, • moˇznost pˇrihl´aˇsen´ı a vytvoˇren´ı sv´eho u ´ˇctu, • moˇznost vytv´aˇret skupiny uˇzivatel˚ u, • grafick´e a technick´e zpracov´an´ı – dostateˇcn´e rozliˇsen´ı obr´azk˚ u, • validita zdrojov´eho k´odu, • pˇr´ıstupnost webu. Pˇri kontrole validnosti a pˇr´ıstupnosti str´anek byly pouˇzity kromˇe osobn´ı kontroly tak´e webov´e str´anky SEO Servis 6 zab´ yvaj´ıc´ı se optimalizac´ı webu a W3C valid´ator 7 . Pro testov´an´ı funkc´ı analyzovan´ ych web˚ u bylo dle potˇreby vytvoˇreno nˇekolik fiktivn´ıch uˇzivatelsk´ ych u ´ˇct˚ u. Datum posledn´ı aktualizace webov´ ych str´anek je uv´adˇeno z doby 6. – 11. 3. 2014. 5
Provozovatel/spr´ avce/autor: VEREA, s.r.o. ˇ Zamˇ eˇ ren´ı: 1. a 2. stupeˇ n ZS Posledn´ı aktualizace: bˇrezen 2014 URL adresa: http://www.onlinecviceni.cz/exc/list sel topics.php Webov´a str´anka www.onlinecviceni.cz je urˇcena pro ˇza´ky prvn´ıho a druh´eho stupnˇe z´akladn´ı ˇskoly. Kromˇe matematiky nab´ız´ı tak´e procviˇcov´an´ı ˇcesk´eho jazyka. ˇ aci maj´ı na v´ Z´ ybˇer z pˇr´ıklad˚ u na procviˇcen´ı, kter´e jsou ˇclenˇeny nejprve podle roˇcn´ıku a pot´e podle t´ematu. Tato nab´ıdka je dostupn´a jak pˇrihl´aˇsen´ ym, tak nepˇrihl´aˇsen´ ym uˇzivatel˚ um. U nˇekter´ ych t´emat je moˇzn´e vyb´ırat z v´ıce variant test˚ u. ˇ siteli se pˇri poˇc´ıt´an´ı ukazuje ubˇehl´ Reˇ y ˇcas. Pokud by tato ˇcasom´ıra mohla ˇz´aka rozptylovat nebo stresovat, lze ji pˇri vyplˇ nov´an´ı testu skr´ yt. Po ukonˇcen´ı poˇc´ıt´an´ı uˇzivatel vid´ı vˇsechny pˇr´ıklady se sv´ ymi odpovˇed’mi, u kter´ ych je naps´ano, zda byl pˇr´ıklad spr´avnˇe nebo chybnˇe vyˇreˇsen. Ve druh´em pˇr´ıpadˇe jsou zobrazena i spr´avn´a ˇreˇsen´ı. D´ale uˇzivatel vid´ı sv˚ uj celkov´ y ˇcas, za kter´ y cviˇcen´ı vyˇreˇsil, poˇcet spr´avnˇe a chybnˇe ˇreˇsen´ ych pˇr´ıklad˚ u a procentu´aln´ı u ´spˇeˇsnost. Str´anky umoˇzn ˇuj´ı vytvoˇren´ı uˇzivatelsk´ ych skupin. Zakladatel skupiny se st´av´a jej´ım administr´atorem a rozhoduje o tom, kdo se stane jej´ım ˇclenem. Tˇemto uˇzivatel˚ um m˚ uˇze n´aslednˇe zad´avat a kontrolovat priv´atn´ı u ´koly, resp. testy v r´amci t´eto skupiny podobn´e veˇrejn´ ym soutˇeˇz´ım. Dalˇs´ı sekce – u ´koly, soutˇeˇze, skupiny a v´ ysledky – jsou dostupn´e pouze pˇrihl´aˇsen´emu uˇzivateli. Vˇsichni pˇrihl´aˇsen´ı uˇzivatel´e maj´ı stejn´a pr´ava a vid´ı stejnou nab´ıdku funkc´ı. Nerozliˇsuje se tedy, zda jste v roli ˇza´ka, uˇcitele nebo rodiˇce. Pod volbou Skupiny najdeme pˇrehled zde vytvoˇren´ ych skupin a m˚ uˇzeme poˇz´adat o pˇriˇrazen´ı do nˇekter´e z nich. D´ale jsou tu sekce Zaloˇzit skupinu, Moje skupiny ´ a Zadat test. Testy m˚ uˇzeme zad´avat pouze v r´amci naˇsich skupin. V sekci Ukoly je zobrazen seznam test˚ u vytvoˇren´ ych v r´amci skupin, do kter´ ych se uˇzivatel pˇrihl´asil. V t´eto ˇca´sti si m˚ uˇzeme z´aroveˇ n prohl´ednout aktu´alnˇe bˇeˇz´ıc´ı soutˇeˇze a zapojit se do nich. Uˇzivatel se m˚ uˇze z´ uˇcastnit vypsan´ ych veˇrejn´ ych soutˇeˇz´ı, kter´a jsou na r˚ uzn´a t´emata a prob´ıhaj´ı obvykle nˇekolik dn´ı. Soutˇeˇz´ıc´ımu se pˇriˇc´ıtaj´ı body za um´ıstˇen´ı 16
na prvn´ıch tˇrech m´ıstech a za bezchybn´e vyˇreˇsen´ı. Bˇehem i po ukonˇcen´ı soutˇeˇze je k dispozici ˇzebˇr´ıˇcek s um´ıstˇen´ım v jednotliv´ ych soutˇeˇz´ıc´ıch.
´ Obr´azek 1: Uvodn´ ı strana webov´ ych str´anek www.onlinecviceni.cz. V ˇca´sti V´ysledky si m˚ uˇze uˇzivatel prohl´ednout svou osobn´ı statistiku ze cviˇcen´ı, z u ´kol˚ u a ze soutˇeˇz´ı. U v´ ysledk˚ u soutˇeˇze si m˚ uˇze zobrazit i celkov´e poˇrad´ı vˇsech u ´ˇcastn´ık˚ u v soutˇeˇz´ıch. Na u ´vodn´ı str´ance jsme ihned informov´ani o nej´ uspˇeˇsnˇejˇs´ıch ˇreˇsitel´ıch v r´amci soutˇeˇz´ı a v poˇctu vyˇreˇsen´ ych r˚ uzn´ ych cviˇcen´ı bez chyb. Zpracov´an´ı pˇr´ıklad˚ u je jednoduch´e, srozumiteln´e a v´ ystiˇzn´e. Obt´ıˇznost pˇr´ıklad˚ u je pˇrev´aˇznˇe na z´akladn´ı u ´rovni a obdobn´a u vˇsech deseti zobrazen´ ych pˇr´ıklad˚ u jednoho cviˇcen´ı. Na prvn´ı pohled str´anka zaujme sv´ ym v´ yrazn´ ym pozad´ım, jeˇz m˚ uˇze na nˇekoho p˚ usobit aˇz pˇr´ıliˇs dˇetinsky. Grafika se mˇen´ı podle toho, v jak´e ˇca´sti se nach´az´ıme – u ´vodn´ı strana, matematika, ˇcesk´ y jazyk. Webov´e str´anky je moˇzn´e pˇrepnout do anglick´eho jazyka. Pˇreklad je v souˇcasn´e dobˇe jen ˇc´asteˇcn´ y. Tituln´ı strana je pˇreloˇzena, ale napˇr´ıklad t´emata lekc´ı v rozcestn´ıku uˇz ne.
17
Jako velk´e plus bych hodnotil absenci r˚ uzn´ ych reklam. Str´anka p˚ usob´ı pˇrehlednˇe a nen´ı tˇreba pˇrem´ yˇslet nad t´ım, zda dan´e okno je jeˇstˇe souˇca´st´ı webu nebo jen dalˇs´ı reklamn´ı upout´avka. D´ale velkou pˇrednost´ı tˇechto str´anek je nab´ıdka r˚ uzn´ ych soutˇeˇz´ı, u ´kol˚ u a ˇclenˇen´ı do skupin, o kter´ ych jsme se jiˇz zm´ınili. Naopak jako pomˇernˇe velk´ y nedostatek bych oznaˇcil to, ˇze nev´ıme, kdo je autorem nebo provozovatelem webov´ ych str´anek. Nikde na u ´vodn´ı str´ance nen´ı k nalezen´ı odkaz O n´as ˇci uveden autor. K t´eto informaci se dostaneme netradiˇcn´ı cestou – pˇres odkaz na novinky. Na t´eto str´ance je kromˇe oˇcek´avan´ ych novinek i kontakt na brnˇenskou spoleˇcnost VEREA, s.r.o. D´ale nikde na u ´vodn´ı str´ance nen´ı naps´ano u ´vodn´ı slovo, kter´e by uv´adˇelo, co je c´ılem a pˇredmˇetem tˇechto str´anek a co od nich uˇzivatel´e mohou oˇcek´avat. Tuto informaci opˇet nalezneme aˇz po kliknut´ı na novinky, kde se m˚ uˇzeme sezn´amit tak´e se zp˚ usobem registrace, jak soutˇeˇzit, jak vytv´aˇret skupiny a jak z´ıskat emailov´e zpr´avy s v´ ysledky a bonusov´a cviˇcen´ı. Emailov´e zpr´avy, ve kter´ ych se uˇzivatel dozv´ı sv´e denn´ı souhrnn´e v´ ysledky z absolvovan´ ych cviˇcen´ı, patˇr´ı jiˇz mezi placen´e sluˇzby. Tento doplnˇek je moˇzn´e zakoupit za sto korun za jednoho uˇzivatele. Tak´e bonusov´a cviˇcen´ı jsou zpoplatnˇena a nab´ızej´ı cviˇcen´ı nav´ıc nebo anglicky namluven´a cviˇcen´ı. Bal´ıˇcek bonusov´ ych cviˇcen´ı stoj´ı sto korun. Dalˇs´ı v´ ytku bych uvedl k ovl´ad´an´ı webu (pohybu po str´ank´ach). Po zvolen´ı nˇekter´eho z t´emat nen´ı zˇrejm´e, jak se dostat zp´atky na pˇredchoz´ı v´ ybˇer. Jasnˇe viditeln´e a oznaˇcen´e tlaˇc´ıtko je zde pouze Dom˚ u, jeˇz n´as odk´aˇze na u ´vodn´ı str´anku webu. Existuje tu sice tlaˇc´ıtko pro zobrazen´ı t´emat zvolen´eho roˇcn´ıku, to ale nen´ı dostateˇcnˇe oznaˇceno a snadno se pˇrehl´edne. Kv˚ uli lepˇs´ı orientaci by bylo vhodn´e, kdyby str´anky obsahovaly drobeˇckovou n´apovˇedu. Z hlediska kvality zdrojov´eho k´odu a pˇr´ıstupnosti webu jsou na tom webov´e str´anky Online cviˇcen´ı velmi ˇspatnˇe. Z nejv´ yznamnˇejˇs´ıch chyb bych uvedl: • absence mapy webu, • absence nˇekter´ ych alternativn´ıch text˚ u u netextov´ ych prvk˚ u, • absence atributu title u odkaz˚ u, • definice CSS styl˚ u a JavaScriptov´ ych funkc´ı nejsou v extern´ım souboru, 18
• ˇca´st textu je pouze ve formˇe obr´azku, • n´ızk´a kvalita obr´azk˚ u – viditeln´a zubatost“ ˇcar, ” • absence standardn´ıch kl´avesov´ ych zkratek, • zdrojov´ y k´od nen´ı validn´ı.
2.2
Matematika hrou
Provozovatel/spr´ avce/autor: Jiˇr´ı Dobr´ y Spolupracovn´ık autora: Petra Janoˇskov´a ˇ Zamˇ eˇ ren´ı: 1. a 2. stupeˇ n ZS Posledn´ı aktualizace: z´aˇr´ı 2013 URL adresa: http://matematika.hrou.cz/ Webov´e str´anky Matematika hrou jsou urˇceny pro ˇza´ky z´akladn´ıch ˇskol 1. aˇz 9. roˇcn´ıku. Jiˇz n´azev dom´eny napov´ıd´a, ˇze se str´anky zamˇeˇruj´ı pouze na matematiku. Hru m˚ uˇzeme zvolit bud’ podle t´ematu, nebo dle tˇr´ıdy, kde kaˇzd´ y roˇcn´ık obsahuje nˇekolik t´emat. Autor uv´ad´ı, ˇze pˇr´ıklady jsou ˇrazeny podle doporuˇcen´ı osnov matematiky, ale ˇze m˚ uˇze doch´azet k r˚ uzn´ ym odchylk´am u jednotliv´ ych ˇskol. Pˇri kaˇzd´em poˇc´ıt´an´ı se n´am zobraz´ı vˇzdy deset pˇr´ıklad˚ u. Pˇred zah´ajen´ım kaˇzd´e hry jsme informov´ani, za jak´ y ˇcas mus´ıme hru splnit, abychom dos´ahli na zn´amku v´ ybornˇe. Bohuˇzel bˇehem poˇc´ıt´an´ı nejsme informov´ani o z´akladn´ıch ukazatel´ıch (ˇcas, ˇc´ıslo pˇr´ıkladu). Kontrola ˇreˇsen´ı jednotliv´ ych pˇr´ıklad˚ u prob´ıh´a automaticky po kaˇzd´em zad´an´ı v´ ysledku, aniˇz by bylo potˇreba tuto kontrolu potvrdit. Pokud zad´ame spr´avn´ y v´ ysledek, naˇcte se n´am automaticky nov´ y pˇr´ıklad. Pokud zad´ame ˇspatn´ y v´ ysledek, tak se nic nestane, nezobraz´ı se ˇz´adn´e ozn´amen´ı o chybˇe, pouze se nem˚ uˇzeme posunout na nov´ y pˇr´ıklad. Nezobrazen´ı hl´aˇsen´ı o chybˇe bych oznaˇcil jako nedostatek ˇ ak si nemus´ı uvˇedomit, ˇze udˇelal chybu, a proto se mu neuk´aˇze dalˇs´ı tˇechto str´anek. Z´ pˇr´ıklad. M˚ uˇze si myslet, ˇze se napˇr´ıklad pouze nenaˇc´ıt´a str´anka ˇci str´anky nefunguj´ı. U nˇekter´ ych t´emat je k dispozici v´ıce variant pˇr´ıklad˚ u, kter´e se n´ahodnˇe generuj´ı. Obt´ıˇznost pˇr´ıklad˚ u bychom mohli oznaˇcit jako z´akladn´ı, coˇz m˚ uˇze souviset s t´ım,
19
´ Obr´azek 2: Uvodn´ ı strana webov´ ych str´anek www.matematika.hrou.cz. ˇze autor tˇechto str´anek nen´ı ani uˇcitel, ani matematik. C´ılem tˇechto str´anek je pravdˇepodobnˇe sp´ıˇse zaujmout ˇza´ky pro matematiku neˇz procviˇcit vˇsechny oblasti prob´ıran´e matematiky na z´akladn´ı ˇskole. Str´anky obsahuj´ı minimum reklam, u ´vodn´ı strana dokonce ˇza´dn´e, coˇz pˇrisp´ıv´a k pˇrehlednosti webu. Str´anky n´am umoˇzn ˇuj´ı zaregistrovat se jako ˇza´k ˇci jako uˇcitel. Uˇcitel m˚ uˇze zakl´adat tˇr´ıdy a pos´ılat vzkazy ˇza´k˚ um, jenˇz se zobraz´ı na jejich n´astˇence po pˇrihl´aˇsen´ı do port´alu. Uˇciteli se zobrazuj´ı aktivity vˇsech ˇza´k˚ u, kteˇr´ı se zaˇradili do jeho tˇr´ıd. ˇ ak si m˚ Z´ uˇze vybrat, do jak´e tˇr´ıdy se zaˇrad´ı. Jako nedostatek bych zde uvedl to, ˇze uˇcitel nem´a ˇz´adn´a pr´ava pro omezen´ı vstupu nˇejak´eho ˇz´aka do sv´e tˇr´ıdy. D´ale ˇz´ak vid´ı svoje nejl´epe hodnocen´a cviˇcen´ı, ale bohuˇzel pouze n´azev t´ematu, datum a ˇcas, za kter´ y cviˇcen´ı splnil. Nejsou zde uvedeny ˇz´adn´e informace o poˇctu chyb. Z hlediska kvality zdrojov´eho k´odu a pˇr´ıstupnosti webu jsou na tom webov´e str´anky Matematika hrou pomˇernˇe dobˇre. Text a nadpisy jsou spr´avnˇe strukturo-
20
van´e, netextov´e prvky obsahuj´ı alternativn´ı text, titulek str´anek je vyplnˇen. Pˇresto i zde se vyskytuj´ı nˇekter´e z´asadn´ı nedostatky ve zdrojov´em k´odu a pˇr´ıstupnosti, uvedeme si nˇekolik z nich: • absence mapy webu, • absence kl´ıˇcov´ ych slov, • definice CSS styl˚ u a JavaScriptov´ ych funkc´ı nejsou v extern´ım souboru, • absence atributu title u odkaz˚ u, • absence standardn´ıch kl´avesov´ ych zkratek, • zdrojov´ y k´od nen´ı validn´ı.
2.3
Pocitejme.cz
Provozovatel/spr´ avce/autor: Michal N. ˇ SS ˇ Zamˇ eˇ ren´ı: 1. a 2. stupeˇ n ZS, Posledn´ı aktualizace: 2014 URL adresa: http://www.pocitejme.cz/ Webov´e str´anky Pocitejme.cz se zamˇeˇruj´ı pouze na pˇr´ıklady z matematiky a jsou urˇceny pro ˇz´aky z´akladn´ıch i stˇredn´ıch ˇskol. Pˇr´ıklady jsou ˇclenˇeny nejprve podle vˇeku ˇza´ka – prvn´ı stupeˇ n, druh´ y stupeˇ n, stˇredn´ı ˇskola a pokroˇcil´ı. Sekci Pokroˇcil´ı bychom mohli ch´apat jako bonusov´e u ´lohy – stejn´e typy pˇr´ıklad˚ u jako v ostatn´ıch ˇc´astech, jen s vˇetˇs´ı obt´ıˇznost´ı. V kaˇzd´e u ´rovni si m˚ uˇzeme vybrat z nˇekolika t´emat. Existuje v´ıce variant test˚ u, pˇr´ıklady jsou n´ahodnˇe generov´any a pˇred spuˇstˇen´ım kaˇzd´eho cviˇcen´ı si ˇz´ak m˚ uˇze zvolit poˇcet pˇr´ıklad˚ u v testu. Po vyhodnocen´ı testu se n´am zobraz´ı v´ ysledn´a zn´amka, n´ahodnˇe generovan´ y obr´azek a seznam spr´avn´ ych a ˇspatn´ ych v´ ysledk˚ u. Tak´e je n´am nab´ıdnuta moˇznost napsat si test znovu ze stejn´eho t´ematu, ale s jin´ ym zad´an´ım pˇr´ıklad˚ u. Uˇziteˇcnou funkc´ı tˇechto str´anek je virtu´aln´ı kalkulaˇcka, kterou si m˚ uˇzeme pˇri poˇc´ıt´an´ı otevˇr´ıt a pomoci si pˇri v´ ypoˇctech.
21
Jako nev´ yhodu tˇechto str´anek bych uvedl to, ˇze zde nen´ı moˇznost vytvoˇren´ı uˇzivatelsk´eho u ´ˇctu a t´ım uchov´av´an´ı v´ ysledk˚ u z absolvovan´ ych cviˇcen´ı. Za to tv˚ urce nab´ız´ı moˇznost pˇrepnout tyto str´anky do dev´ıti jazyk˚ u, napˇr´ıklad slovenˇstina, polˇstina, ruˇstina a angliˇctina, a st´ale hled´a nov´e kolegy pro pˇreklad str´anek do dalˇs´ıch jazyk˚ u, aby se pouˇz´ıv´an´ı str´anek mohlo rozˇs´ıˇrit do co nejvˇetˇs´ıho poˇctu zem´ı.
´ Obr´azek 3: Uvodn´ ı strana webov´ ych str´anek www.pocitejme.cz. Web p˚ usob´ı pˇrehlednˇe a jednotn´ ym dojmem, i kdyˇz obsahuje nˇekolik reklam. Zad´an´ı pˇr´ıklad˚ u je sice velmi struˇcn´e, ale i tak je na prvn´ı pohled zˇrejm´e, co je naˇs´ım u ´kolem. Z hlediska kvality zdrojov´eho k´odu jsou na tom webov´e str´anky Pocitejme.cz velmi dobˇre. Nadpisy jsou spr´avnˇe strukturovan´e, netextov´e prvky obsahuj´ı alternativn´ı text, je vyplnˇen titulek str´anek. Pˇresto i zde se vyskytuje nˇekolik nedostatk˚ u ve zdrojov´em k´odu a v pˇr´ıstupnosti webu, uvedeme si nˇekolik z nich:
22
• absence mapy webu, • definice JavaScriptov´ ych funkc´ı nejsou v extern´ım souboru, • absence standardn´ıch kl´avesov´ ych zkratek, • text nen´ı strukturovan´ y do odstavc˚ u, • zdrojov´ y k´od nen´ı validn´ı.
2.4
Procviˇ cuj.cz
Administr´ ator: Petr Ehler Matematika: Eva Ehlerov´a ˇ (nen´ı pˇresnˇe specifikov´ano) Zamˇ eˇ ren´ı: 1. a 2. stupeˇ n ZS Posledn´ı aktualizace: listopad 2011 URL adresa: http://nove.procvicuj.cz/www/ Port´al Procviˇcuj.cz se kromˇe matematiky zamˇeˇruje i na procviˇcen´ı chemie a ˇceˇstiny na u ´rovni z´akladn´ı ˇskoly. Stupeˇ n nebo roˇcn´ıky z´akladn´ı ˇskoly nejsou pˇresnˇe specifikov´any. Pˇr´ıklady jsou tedy ˇclenˇeny pouze podle t´ematu, kter´a obsahuj´ı nˇekolik podkategori´ı. Existuje v´ıce variant test˚ u a pˇr´ıklady jsou n´ahodnˇe generov´any. U kaˇzd´e kategorie m˚ uˇzeme vˇzdy urˇcit poˇcet pˇr´ıklad˚ u v testu, kter´ y se pohybuje mezi 10 – 50 pˇr´ıklady. D´ale m˚ uˇzeme navolit jeˇstˇe nˇekolik parametr˚ u testu, kter´e se liˇs´ı podle t´ematu. Napˇr´ıklad u kategorie Opakov´an´ı desetinn´ych ˇc´ısel m˚ uˇzeme nav´ıc nastavit poˇcet ˇclen˚ u v pˇr´ıkladu, zda se budou pouˇz´ıvat pouze kladn´a ˇc´ısla a horn´ı hranici pouˇz´ıvan´ ych ˇc´ısel. Bohuˇzel nab´ıdka t´emat nen´ı nijak rozs´ahl´a a svou n´aroˇcnost´ı jsou urˇcena sp´ıˇse mladˇs´ım ˇz´ak˚ um 5. – 7. roˇcn´ık˚ u. Po spuˇstˇen´ı testu je n´am nab´ıdnuta volba Vytisknout zad´an´ı, kter´a n´am aktu´alnˇe vygenerovan´e zad´an´ı pˇr´ıklad˚ u zobraz´ı na dalˇs´ı webov´e str´ance jen jako obyˇcejn´ y text bez pouˇzit´ı formul´aˇr˚ u. Pokud nem´ame vyplnˇeny vˇsechny odpovˇedi a i pˇresto chceme test vyhodnotit, jsme dot´az´ani, zda tak skuteˇcnˇe chceme uˇcinit a zv´ yrazn´ı se pr´azdn´e poloˇzky v testu. Po vyhodnocen´ı testu se n´am zobraz´ı naˇse odpovˇedi, spr´avn´e odpovˇedi, poˇcet spr´avn´ ych a chybn´ ych odpovˇed´ı a zn´amka. 23
´ Obr´azek 4: Uvodn´ ı strana webov´ ych str´anek www.procvicuj.cz Pˇr´ıklady jsou dostupn´e zdarma, bez nutnosti pˇrihl´aˇsen´ı. Pˇri registraci kromˇe bˇeˇzn´ ych u ´daj˚ u vyplˇ nujeme, zda jsme ˇz´ak nebo uˇcitel a ID ˇskoly, ke kter´e patˇr´ıme. Pˇr´ısluˇsnou ˇskolu vyb´ır´ame ze seznamu jiˇz zaregistrovan´ ych ˇskol nebo souˇcasnˇe pˇri vlastn´ı registraci novou ˇskolu zaevidujeme zad´an´ım ID ˇskoly, adresy, mˇesta a URL adresy webu ˇskoly. Pokud se zaregistrujeme jako ˇza´k, m˚ uˇzeme si prohl´ıˇzet v´ ysledky vyplnˇen´ ych test˚ u. D´ale si m˚ uˇzeme prohl´ednout souhrnnou statistiku test˚ u, ve kter´e se dozv´ıme, jak´e a kolik zn´amek jsme za jednotliv´e testy z´ıskali, zn´amkov´ y pr˚ umˇer, kolik test˚ u jsme vyˇreˇsili z matematiky, chemie a ˇceˇstiny. Z´ıskan´e zn´amky m´ame zobrazeny tak´e pomoc´ı v´ yseˇcov´eho grafu. V roli uˇcitele m´ame k dispozici stejnou nab´ıdku funkc´ı jako ˇza´k, ale nav´ıc vid´ıme vˇsechny tˇr´ıdy s ˇza´ky, kter´e jsou na port´ale vedeny pod stejnou ˇskolou jako uˇcitel. Vyuˇcuj´ıc´ı si m˚ uˇze prohl´ednout souhrnnou statistiku vˇsech test˚ u ˇza´k˚ u i odpovˇedi 24
u jejich jednotliv´ ych test˚ u. Uˇcitel m´a tak´e moˇznost smazat z´aznamy o ˇza´kov´ ych vypoˇc´ıtan´ ych testech. Jako nev´ yhodu tohoto syst´emu bych uvedl to, ˇze nikdo neschvaluje, kdo se pˇridal do jak´e ˇskoly, a to jak z pohledu ˇza´ka, tak z pohledu uˇcitele. Nen´ı potˇreba povolen´ı administr´atora ˇci nˇejak´e jin´e odpovˇedn´e osoby za danou ˇskolu. Webov´e str´anky p˚ usob´ı pˇrehlednˇe a rychle se v nich orientuje, i kdyˇz obsahuj´ı v doln´ı ˇca´sti reklamy. Na u ´vodn´ı str´ance se v kr´atk´em pov´ıd´an´ı ihned sezn´am´ıme s obsahem webu a s nab´ızen´ ymi funkcemi. Z hlediska kvality zdrojov´eho k´odu a pˇr´ıstupnosti webu jsou webov´e str´anky Procviˇcuj.cz na vysok´e u ´rovni. Str´anky maj´ı vyplnˇen´ y titulek, strukturovan´ y text, jsou uvedena kl´ıˇcov´a slova, mapa webu. Pˇresto i zde se vyskytuj´ı nˇekter´e nedostatky a nˇekolik z nich si nyn´ı uvedeme: • absence atributu title u odkaz˚ u, • str´anka obsahuje dva nadpisy prvn´ı u ´rovnˇe, • definice CSS styl˚ u a JavaScriptov´ ych funkc´ı nejsou v extern´ım souboru, • absence standardn´ıch kl´avesov´ ych zkratek, • zdrojov´ y k´od nen´ı validn´ı.
2.5
Testy a kv´ızy on-line
Provozovatel/spr´ avce/autor: neuvedeno ˇ (nen´ı pˇresnˇe specifikov´ano) Zamˇ eˇ ren´ı: 1. a 2. stupeˇ n ZS Posledn´ı aktualizace: 2013 URL adresa: http://1quiz.jirpa.cz/ Webov´e str´anky Testy a kv´ızy on-line obsahuj´ı testy kromˇe matematiky i z jin´ ych pˇredmˇet˚ u, napˇr´ıklad angliˇctina, dˇejepis, chemie. Bohuˇzel nikde nen´ı uvedeno, pro jak´ y stupeˇ n ˇskoly jsou str´anky urˇceny. Ze zamˇeˇren´ı nab´ızen´ ych t´emat lze odhadnout, ˇze str´anky maj´ı slouˇzit ˇz´ak˚ um z´akladn´ı ˇskoly. U kategorie matematika bychom mohli ˇr´ıci, ˇze jsou urˇceny pro ˇza´ky prvn´ıho stupnˇe a pro ˇza´ky 5. – 7. roˇcn´ıku druh´eho stupnˇe. 25
´ Obr´azek 5: Uvodn´ ı strana webov´e str´anky www.1quiz.jirpa.cz/index.php. Testy jsou rozdˇeleny podle t´emat a ty se d´ale dˇel´ı na jednotliv´a podt´emata. Tˇechto podkategori´ı nen´ı v souˇcasn´e dobˇe mnoho, ale autoˇri podle informac´ı na tituln´ı str´ance chystaj´ı rozˇs´ıˇren´ı. Str´anky jsou zdarma a lze je pouˇz´ıvat i bez registrace. Nepˇrihl´aˇsen´ y uˇzivatel m´a ale velmi omezen´e moˇznosti – vid´ı pouze jednu variantu testu k dan´emu t´ematu. Kaˇzd´ y test obsahuje deset pˇr´ıklad˚ u. Zad´an´ı je velmi struˇcn´e, ale postaˇcuj´ıc´ı k vyˇreˇsen´ı pˇr´ıklad˚ u. Po vyhodnocen´ı testu se n´am zobraz´ı spr´avn´e odpovˇedi, poˇcet naˇsich spr´avn´ ych odpovˇed´ı a procentu´aln´ı u ´spˇeˇsnost. Pˇrihl´aˇsen´ y uˇzivatel m´a k dispozici v´ıce variant test˚ u k jednomu t´ematu, nav´ıc se mu zpˇr´ıstupn´ı dalˇs´ı pˇr´ıklady na procviˇcen´ı. V t´eto nov´e ˇc´asti je na v´ ybˇer ze stejn´ ych t´emat jako u test˚ u, ale pˇr´ıklady se zobrazuj´ı po jednom a m˚ uˇzeme zvolit obt´ıˇznost n´asleduj´ıc´ıho pˇr´ıkladu (1 – 3). Pˇr´ıklady jsou obdobn´e jako m´ame k dispozici v testu. Dle ˇc´ıslov´an´ı jednotliv´ ych pˇr´ıklad˚ u, kter´e se pohybuj´ı ˇra´dovˇe ve stovk´ach, m˚ uˇzeme ˇr´ıci, ˇze velikost datab´aze zad´an´ı pˇr´ıklad˚ u je pomˇernˇe rozs´ahl´a. Zad´an´ı se generuje v n´ahodn´em poˇrad´ı. Po vyhodnocen´ı kaˇzd´eho pˇr´ıkladu vid´ıme, jak´a mˇela 26
b´ yt spr´avn´a odpovˇed’ a zda jsme odpovˇedˇeli spr´avnˇe. Souˇcasnˇe pˇri poˇc´ıt´an´ı neust´ale vid´ıme pr˚ ubˇeˇznou statistiku - procentu´aln´ı u ´spˇeˇsnost, poˇcet dobr´ ych a ˇspatn´ ych odpovˇed´ı a celkov´ y poˇcet zat´ım ˇreˇsen´ ych pˇr´ıklad˚ u. Do t´eto statistiky se zapoˇc´ıt´avaj´ı i ˇreˇsen´e pˇr´ıklady z test˚ u, coˇz nemus´ı b´ yt na prvn´ı pohled zˇrejm´e, jelikoˇz se tato statistika u test˚ u nezobrazuje. Toto bych oznaˇcil jako nedostatek str´anek. Vhodnˇejˇs´ı by bylo pro tyto dvˇe ˇca´sti zobrazovat oddˇelenou statistiku. V r´amci sv´eho u ´ˇctu si pˇrihl´aˇsen´ y uˇzivatel m˚ uˇze prohl´ednout svoji statistiku. V t´e je uveden celkov´ y poˇcet zodpovˇezen´ ych pˇr´ıklad˚ u, kolik z nich bylo spr´avnˇe, kolik chybnˇe, kolik z nich nebylo vyplnˇeno a procentu´aln´ı u ´spˇeˇsnost. Tato statistika je vedena dohromady za pˇr´ıklady z procviˇcov´an´ı a z test˚ u. Nev´ yhodou je, ˇze si uˇzivatel nem˚ uˇze prohl´ednout svou u ´spˇeˇsnost v jednotliv´ ych testech. Pˇri registraci se nerozliˇsuje, zda uˇzivatel je ˇz´ak ˇci uˇcitel. Vˇsichni uˇzivatel´e maj´ı stejn´a pr´ava. Port´al neumoˇzn ˇuje, aby uˇzivatel´e vytv´aˇreli r˚ uzn´e skupiny. Dalˇs´ı rozd´ıl mezi pˇrihl´aˇsen´ ym a nepˇrihl´aˇsen´ ym uˇzivatelem je v mnoˇzstv´ı reklam. Pˇrihl´aˇsen´emu uˇzivateli se ˇza´dn´e nezobrazuj´ı. I tak str´anky obsahuj´ı jen minimum reklamy, jeˇz nezasahuj´ı do zad´an´ı pˇr´ıklad˚ u. Web p˚ usob´ı pomˇernˇe skromn´ ym dojmem, neobsahuje t´emˇeˇr ˇza´dn´e grafick´e prvky. Na tituln´ı stranˇe jsme informov´ani o v´ yhod´ach registrace a jak´a vylepˇsen´ı str´anek jsou v pl´anu, nikde vˇsak nevid´ıme pozn´amku o autorovi, tv˚ urci str´anek, ani p´ar slov o tomto projektu. Z hlediska kvality zdrojov´eho k´odu a pˇr´ıstupnosti webu jsou webov´e str´anky Testy a kv´ızy on-line na pomˇernˇe dobr´e u ´rovni. Str´anky maj´ı vyplnˇen´ y titulek, nadpis prvn´ı u ´rovnˇe a spr´avnˇe strukturovan´e dalˇs´ı u ´rovnˇe, jsou uvedena kl´ıˇcov´a slova. Pˇresto i zde se vyskytuj´ı nˇekter´e z´asadn´ı nedostatky, kter´e by bylo radno odstranit. Nyn´ı si uvedeme nˇekolik z nich: • absence mapy webu, • absence atributu title u odkaz˚ u, • text nen´ı strukturovan do odstavc˚ u, • nˇekter´e definice CSS styl˚ u nejsou v extern´ım souboru, 27
Z v´ yˇse uveden´eho pˇrehledu je zˇrejm´e, ˇze ˇcesk´ ych port´al˚ u, vˇenovan´ ych online testov´an´ı a procviˇcov´an´ı znalost´ı z matematiky, zat´ım pˇr´ıliˇs nen´ı. St´ale pˇrevl´adaj´ı webov´e str´anky, kter´e se vˇenuj´ı pouze v´ ykladu matematiky, ˇreˇsen´ım uk´azkov´ ych pˇr´ıklad˚ u nebo kombinaci tˇechto dvou zamˇeˇren´ı. Pozitivn´ım zjiˇstˇen´ım ale je, ˇze nˇekter´e analyzovan´e str´anky jsou ve velk´em poˇctu prakticky vyuˇz´ıv´any ˇz´aky a uˇciteli r˚ uzn´ ych ˇskol, coˇz lze usuzovat z poˇctu zaregistrovan´ ych ˇskol na nˇekter´ ych str´ank´ach, z poˇctu uˇzivatel˚ uu ´ˇcastn´ıc´ıch se soutˇeˇz´ı apod. Nˇekter´e v´ yˇse analyzovan´e webov´e str´anky pˇredstavuj´ı pˇeknou uk´azku toho, jak´ ym smˇerem by se weby, vˇenuj´ıc´ı se online procviˇcov´an´ı, mohly ub´ırat. Pˇresto ani jeden port´al neobsahoval vˇsechny funkce, jeˇz by dle m´eho n´azoru mˇely obsahovat. Mezi nˇe m˚ uˇzeme zahrnout vytvoˇren´ı uˇzivatelsk´eho u ´ˇctu, rozliˇsov´an´ı rol´ı pˇrihl´aˇsen´ ych uˇzivatel˚ u, vytv´aˇren´ı vlastn´ıch skupin, soutˇeˇze, moˇznost vkl´adat vlastn´ı pˇr´ıklady, zobrazen´ı statistiky u ´spˇeˇsnosti. Nejbl´ıˇze ke splnˇen´ı vˇsech tˇechto poˇzadavk˚ u byly weby Online cviˇcen´ı a Matematika hrou. Pˇrehled funkc´ı vˇsech analyzovan´ ych webov´ ych str´anek je zobrazen v pˇr´ıloze v tabulce 1. Pˇri n´avrhu webov´ ych str´anek Vypoctito.cz jsem se proto zamˇeˇril na vˇsechny v´ yˇse zm´ınˇen´e funkce a na kvalitu zpracov´an´ı zdrojov´eho k´odu, kter´ y je u analyzovan´ ych port´al˚ u velmi ˇcasto odbyt, a na pˇr´ıstupnost webu, jeˇz je u vˇsech zcela opom´ıjena. D´ale jsem se zamˇeˇril na vˇetˇs´ı rozsah nab´ızen´ ych t´emat, jenˇz u nˇekter´ ych porovn´avan´ ych web˚ u byl pomˇernˇe nedostaˇcuj´ıc´ı.
28
3
Anal´ yza a n´ avrh syst´ emu
V t´eto kapitole se budeme zab´ yvat tvorbou analytick´eho modelu, kter´ y n´am popisuje, co vˇse by mˇel syst´em umˇet, avˇsak uˇz se nezab´ yv´a ot´azkou, jak toho dos´ahne. Do t´eto f´aze n´aleˇz´ı stanoven´ı poˇzadavk˚ u na syst´em, pˇr´ıpady uˇzit´ı a diagramy aktivit. Zbyl´a ˇca´st kapitoly se vˇenuje n´avrhu syst´emu, kter´ y se jiˇz zab´ yv´a ot´azkou, jak´ ym zp˚ usobem dos´ahnout poˇzadovan´e funkˇcnosti. C´ılem je vytvoˇrit model syst´emu, kter´ y jiˇz n´aslednˇe bude moˇzn´e implementovat. Zde se budeme zab´ yvat n´avrhov´ ym modelem tˇr´ıd, datab´azov´ ym n´avrhem a dr´atov´ ym modelem aplikace.
3.1
Specifikace syst´ emov´ ych poˇ zadavk˚ u
V pr˚ ubˇehu specifikace poˇzadavk˚ u sestavujeme prvotn´ı poˇzadavky na realizaci syst´emu. Pojmem poˇzadavky ch´apeme vˇse, co by syst´em mˇel obsahovat a umoˇzn ˇovat uˇzivateli. V t´eto chv´ıli se tedy nezamˇeˇrujeme na to, jak´ ym zp˚ usobem t´eto funkˇcnosti chceme dos´ahnout, ale pouze na to, jak´e funkce od syst´emu poˇzadujeme. Rozliˇsujeme dva typy poˇzadavk˚ u: • funkˇcn´ı poˇzadavky, tj. jak´e funkce bude syst´em obsahovat, • nefunkˇcn´ı poˇzadavky, tj. vlastnosti, omezen´ı a n´aroky na syst´em apod. [3] 3.1.1
Popis syst´ emu
Webov´e str´anky VypoˇctiTo budou zamˇeˇreny na online procviˇcov´an´ı a testov´an´ı ˇz´ak˚ u z´akladn´ı ˇskoly. Z obsahu pˇredmˇetu matematika pro 2. stupeˇ n z´akladn´ı ˇskoly jsou vybr´ana nˇekter´a t´emata, jeˇz jsou rozdˇelena do 15 z´akladn´ıch okruh˚ u a 3 obt´ıˇznost´ı. Do tˇechto kategori´ı jsou zaˇrazeny jednotliv´e pˇr´ıklady pro procviˇcov´an´ı, vytv´aˇren´ı test˚ u a soutˇeˇz´ı. Syst´em mohou vyuˇz´ıvat uˇzivatel´e i bez pˇrihl´aˇsen´ı, maj´ı vˇsak omezen´e moˇznosti. Nepˇrihl´aˇsen´ y uˇzivatel m˚ uˇze pouze procviˇcovat a vyb´ır´a si z dan´ ych 15 t´emat. ˇ ak m˚ Uˇzivatel se m˚ uˇze zaregistrovat v roli uˇcitele nebo v roli ˇza´ka. Z´ uˇze spravovat sv˚ uj u ´ˇcet, procviˇcovat pˇr´ıklady, z´ uˇcastnit se vypsan´ ych soutˇeˇz´ı, zapsat se do skupin a odepsat se z n´ı, vyplnit testy (zadan´e v r´amci ˇza´kov´ ych skupin) ˇci si prohl´ıˇzet 29
svou statistiku u ´spˇeˇsnosti. Uˇcitel m˚ uˇze mˇenit sv´e osobn´ı u ´daje, spravovat skupiny (vytv´aˇret, ruˇsit), sestavovat a spravovat testy (editovat, smazat) a rozˇsiˇrovat datab´azi syst´emu o vlastn´ı pˇr´ıklady. Spr´avu syst´emu zajiˇst’uje administr´ator, kter´ y spravuje pˇr´ıklady (vkl´ad´a, edituje, ruˇs´ı a schvaluje pˇr´ıklady vloˇzen´e uˇcitelem), spravuje uˇzivatelsk´e u ´ˇcty (m˚ uˇze smazat uˇzivatele, skupinu nebo test) a vytv´aˇr´ı soutˇeˇze (vˇcetnˇe editace). Pro tento syst´em definujeme n´asleduj´ıc´ı role: • nepˇrihl´aˇsen´ y uˇzivatel, • ˇza´k, • uˇcitel, • administr´ator. 3.1.2
Funkˇ cn´ı poˇ zadavky na syst´ em
Funkˇcn´ı poˇzadavky pˇredstavuj´ı funkci syst´emu, zamˇeˇrujeme se na to, co syst´em dˇel´a. Pro n´aˇs syst´em si definujeme n´asleduj´ıc´ı typy poˇzadavk˚ u: 1. Registrace, pˇrihl´aˇsen´ı a evidence uˇzivatel˚ u. Syst´em bude evidovat ˇz´aky a uˇcitele, kteˇr´ı se do nˇeho zaregistruj´ı. Kaˇzd´ y uˇzivatel bude m´ıt pouze jednu roli, se kterou jsou spojena urˇcit´a pr´ava k pouˇz´ıv´an´ı syst´emu. Kaˇzd´ y uˇzivatel bude m´ıt ve sv´em u ´ˇctu uvedeno uˇzivatelsk´e jm´eno, heslo, jm´eno, pohlav´ı, ˇskolu a email. 2. Vkl´ad´an´ı nov´ ych pˇr´ıklad˚ u. Nov´e pˇr´ıklady bude moci zad´avat do syst´emu pouze administr´ator nebo uˇcitel. U kaˇzd´eho pˇr´ıkladu bude uvedeno zad´an´ı, ˇreˇsen´ı, obt´ıˇznost pˇr´ıkladu, autor, zdroj (odkud byl pˇr´ıklad pˇrevzat) a okruh, do kter´eho tematicky zapad´a. Podle potˇreby lze pˇriloˇzit k zad´an´ı obr´azek. V pˇr´ıpadˇe uˇcitele lze jeˇstˇe nastavit, zda nov´ y pˇr´ıklad bude veˇrejn´ y (dostupn´ y vˇsem) ˇci nikoli (tj. bude ho vyuˇz´ıvat pouze dan´ y uˇcitel). Pokud pˇr´ıklad vkl´ad´a uˇcitel a nastav´ı jej jako veˇrejn´ y, mus´ı ˇcekat, zda ho schv´al´ı administr´ator, a teprve pot´e se zobraz´ı i ve veˇrejn´e ˇca´sti syst´emu. 30
3. Procviˇcov´an´ı. Procviˇcovat pˇr´ıklady m˚ uˇze nepˇrihl´aˇsen´ y uˇzivatel a ˇz´ak. Uˇzivatel nejprve vybere t´ema, kter´e chce procviˇcit, n´aslednˇe zvol´ı poˇcet a obt´ıˇznost pˇr´ıklad˚ u. Po vyhodnocen´ı pˇr´ıklad˚ u se uˇzivateli zobraz´ı poˇcet spr´avn´ ych, chybn´ ych a nezodpovˇezen´ ych odpovˇed´ı a jeho procentu´aln´ı u ´spˇeˇsnost. Obˇe role maj´ı v tomto pˇr´ıpadˇe stejn´e podm´ınky v nastaven´ı funkc´ı, liˇs´ı se pouze v tom, ˇze pˇrihl´aˇsen´ y ˇza´k si m˚ uˇze zobrazen´e statistiky prohl´ednout i pozdˇeji ve sv´em profilu. 4. Vytvoˇren´ı soutˇeˇze. Soutˇeˇze bude do syst´emu pˇrid´avat pouze administr´ator. U zad´an´ı kaˇzd´e soutˇeˇze bude uveden datum spuˇstˇen´ı a ukonˇcen´ı soutˇeˇze a n´azev (oznaˇcen´ı soutˇeˇze). ˇ sen´ı soutˇeˇze. 5. Reˇ ˇ sitelem soutˇeˇze m˚ ˇ ak Reˇ uˇze b´ yt pouze uˇzivatel v roli zaregistrovan´eho ˇza´ka. Z´ m´a u kaˇzd´e soutˇeˇze informace o datu spuˇstˇen´ı a ukonˇcen´ı soutˇeˇze, o jej´ım n´azvu, a pokud je umoˇznˇeno, m˚ uˇze vidˇet i pr˚ ubˇeˇzn´e, respektive z´avˇereˇcn´e v´ ysledky. Ve v´ ysledc´ıch je uvedeno poˇrad´ı ˇz´ak˚ u od prvn´ıho m´ısta, jm´ena ˇreˇsitel˚ u a jejich procentu´aln´ı u ´spˇeˇsnost. 6. Vytvoˇren´ı skupiny. Skupinu vytv´aˇr´ı uˇcitel a pˇri jej´ım zakl´ad´an´ı uv´ad´ı n´azev skupiny a nech´a automaticky vygenerovat ID skupiny, kter´e slouˇz´ı k zajiˇstˇen´ı jednoznaˇcn´e identifikace dan´e skupiny. Administr´ator m´a pr´avo libovolnou skupinu smazat. 7. Vstup a pˇrehled skupin. ˇ aci se mohou zaˇcleˇ Z´ novat do skupin (m˚ uˇze jich b´ yt v´ıce). Danou skupinu vyhledaj´ı pomoc´ı jej´ıho ID. O zaˇclenˇen´ı do skupiny mus´ı ˇza´ci zaˇza´dat a ˇcekat na potvrzen´ı od uˇcitele. V pˇrehledu ˇz´akov´ ych skupin je u kaˇzd´e z nich uveden datum vzniku, n´azev, zakladatel a informace, zda m´a ˇz´ak jiˇz potvrzenou reˇ ak m˚ gistraci ˇci nikoli. Z´ uˇze kdykoli libovolnou skupinu opustit nebo m˚ uˇze b´ yt vylouˇcen ze strany uˇcitele. 8. Vytvoˇren´ı testu. Testy v syst´emu vytv´aˇr´ı uˇcitel´e pro ˇza´ky v r´amci sv´ ych skupin. Uˇcitel zad´av´a 31
n´azev (oznaˇcen´ı) testu, skupinu, resp. skupiny, pro kter´ y je test urˇcen, t´ema, zda bude moˇzn´e test opakovat, datum spuˇstˇen´ı a ukonˇcen´ı testu a n´aslednˇe vyb´ır´a jednotliv´e pˇr´ıklady. Administr´ator m´a pr´avo libovoln´ y test smazat. 9. Prohl´ıˇzen´ı a editace testu. Uˇcitel si vytvoˇren´e testy m˚ uˇze prohl´ednout, smazat je nebo editovat. U kaˇzd´eho testu si m˚ uˇze nechat zobrazit v´ ysledky ˇza´k˚ u, kteˇr´ı ho jiˇz absolvovali. Pˇri editaci m˚ uˇze uˇcitel zmˇenit vˇsechny parametry popsan´e v bodˇe 8 kromˇe v´ ybˇeru zamˇeˇren´ı pˇr´ıklad˚ u – t´ematu. Pokud test jiˇz absolvoval nˇejak´ y ˇz´ak, nelze pozmˇenit ˇza´dn´e parametry testu. ˇ sen´ı testu. 10. Reˇ Test m˚ uˇze ˇreˇsit ˇz´ak a to pouze pokud je pˇrihl´aˇsen a schv´alen ve skupinˇe, do kter´e byl dan´ y test zaˇrazen. 11. Zobrazen´ı statistik. ˇ ak si m˚ Z´ uˇze ve sv´em profilu nechat zobrazit statistiku u ´spˇeˇsnosti z procviˇcov´an´ı, test˚ u, nebo soutˇeˇz´ı. U kaˇzd´eho cviˇcen´ı, resp. testu je uveden n´azev t´ematu, resp. n´azev testu, poˇcet pˇr´ıklad˚ u, poˇcet spr´avn´ ych, chybn´ ych a nezodpovˇezen´ ych odpovˇed´ı a procentu´aln´ı u ´spˇeˇsnost. U testu se nav´ıc zobrazuje datum, kdy ho ˇz´ak absolvoval. Ve v´ ysledc´ıch soutˇeˇze je uveden n´azev soutˇeˇze a sestupnˇe seˇrazen´ı ˇreˇsitel´e soutˇeˇze podle jejich u ´spˇeˇsnosti. 3.1.3
Nefunkˇ cn´ı poˇ zadavky na syst´ em
Nefunkˇcn´ı poˇzadavky charakterizuj´ı r˚ uzn´a omezen´ı a nastaven´ı syst´emu. Pro syst´em online procviˇcov´an´ı matematiky VypoˇctiTo jsou n´asleduj´ıc´ı: • dostupnost pˇres webov´ y prohl´ıˇzeˇc, • implementace pomoc´ı PHP a MySQL, • postaven´ı na validn´ıch a pˇr´ıstupn´ ych webov´ ych str´ank´ach, • volnˇe dostupn´ y, • pˇrehledn´ y a jednoduch´ y na ovl´ad´an´ı. 32
3.2
Pˇ r´ıpady uˇ zit´ı
Pˇr´ıpady uˇzit´ı (z anglick´eho origin´alu Use Cases) se zab´ yvaj´ı stanoven´ım funkˇcn´ıch poˇzadavk˚ u kladen´ ych na informaˇcn´ı syst´em. Pˇr´ıpady uˇzit´ı mus´ı pokr´ yt celkov´ y rozsah moˇznost´ı a n´astroj˚ u informaˇcn´ıho syst´emu. V t´eto f´azi tvorby se nezab´ yv´ame jak´ ym zp˚ usobem budou jednotliv´e funkce realizov´any. Zaj´ım´a n´as pouze, co bude syst´em umoˇzn ˇovat. Tyto vlastnosti syst´emu graficky zn´azorˇ nujeme do diagramu pˇr´ıpadu uˇzit´ı (Use Case Diagram), kter´ y zobrazuje syst´em z pohledu uˇzivatele. Pˇri tvorbˇe diagramu je potˇreba urˇcit nˇekolik prvk˚ u – hranice syst´emu, akt´ery, pˇr´ıpady uˇzit´ı a relace. [1] 3.2.1
Popis prvk˚ u diagramu
Pˇri n´avrhu diagramu mus´ıme nejprve urˇcit hranice syst´emu (System boundary), kter´e urˇcuj´ı, co patˇr´ı, respektive nepatˇr´ı do naˇseho syst´emu. Od verze UML 2 se hranice syst´emu naz´ yvaj´ı tak´e subjekt. Vnˇe tyto hranice se nach´azej´ı akt´eˇri a uvnitˇr syst´emu jsou jednotliv´e pˇr´ıpady uˇzit´ı. V diagramu se hranice syst´emu znaˇc´ı r´ameˇckem s popisem n´azvu syst´emu. Symboly akt´er˚ u se zakresluj´ı vnˇe obd´eln´ıku a pˇr´ıpady uˇzit´ı uvnitˇr hranic. Pˇr´ıkladem n´azvu hranic syst´emu m˚ uˇze b´ yt N´apojov´y automat. [3] Oznaˇcen´ı akt´er (Actor) pˇredstavuje roli, kter´a zastupuje skupinu uˇzivatel˚ u, kteˇr´ı maj´ı v informaˇcn´ım syst´emu stejn´a pr´ava a pˇr´ıstup ke stejn´ ym funkc´ım. Oznaˇcen´ı akt´era m˚ uˇze b´ yt napˇr´ıklad Prodavaˇc. Je to obecn´a role, kter´a v sobˇe zahrnuje v´ıce konkr´etn´ıch jedinc˚ u. Jeden uˇzivatel m˚ uˇze pˇredstavovat v´ıce rol´ı, napˇr´ıklad m˚ uˇze b´ yt souˇcasnˇe Prodavaˇc a Vedouc´ı prodejny. Vˇsechny akce v syst´emu jsou vyvol´any akt´ery. Jeden akt´er m˚ uˇze prov´adˇet nˇekolik pˇr´ıpad˚ u uˇzit´ı a jeden pˇr´ıpad uˇzit´ı m˚ uˇze b´ yt prov´adˇen v´ıce akt´ery v jednom modelu. V pozici akt´era se kromˇe lid´ı m˚ uˇze objevit i extern´ı syst´em, kter´ y pˇr´ımo komunikuje s naˇs´ım syst´emem, nebo i ˇcas, spouˇstˇej´ıc´ı napl´anovan´e u ´lohy, napˇr´ıklad z´aloha syst´emu. [1][2] Pro zn´azornˇen´ı akt´era v diagramu pˇr´ıpadu uˇzit´ı se pouˇz´ıv´a symbol postaviˇcky, pod kterou se zapisuje n´azev role, kterou pˇredstavuje. Druh´ y zp˚ usob zobrazen´ı akt´era je obd´eln´ık. [3] 33
Pˇr´ıpady uˇzit´ı (Use Cases) si m˚ uˇzeme pˇrestavit jako sled jednotliv´ ych ud´alost´ı (tzv. sc´en´aˇre), kter´e syst´em postupnˇe vykon´a na z´akladˇe podnˇetu od jednoho nebo v´ıce akt´er˚ u. Tato posloupnost akc´ı jednoho pˇr´ıpadu uˇzit´ı vede vˇzdy na spoleˇcn´ y c´ıl. Pˇr´ıpady uˇzit´ı ch´apeme jako souˇc´ast syst´emu a vytv´aˇr´ıme je z pohledu akt´era, kter´ y danou sekvenci inicializoval. Pˇr´ıpad uˇzit´ı vyjadˇruje, co budouc´ı syst´em nab´ıdne uˇzivateli, tedy v´ ysledkem pˇr´ıpadu uˇzit´ı mus´ı b´ yt nˇeco, co pouˇz´ıv´a nˇekter´ y z akt´er˚ u. Tvorba pˇr´ıpad˚ u uˇzit´ı prob´ıh´a v nˇekolika opakov´an´ı, dokud nejsou zahrnuty vˇsechny vztahy mezi akt´ery a syst´emem. [2] Jak konkr´etnˇe bychom mˇeli pojmenov´avat pˇr´ıpady uˇzit´ı, nestanovuje ˇza´dn´ y standart jazyka UML. Pˇresto se v praxi osvˇedˇcilo, aby n´azev pˇr´ıpadu uˇzit´ı tvoˇrila slovesn´a vazba, jelikoˇz pˇredstavuje nˇejakou akci v syst´emu, napˇr´ıklad Zaloˇzit novou objedn´avku, Editovat osobn´ı u ´daje. N´azev by mˇel b´ yt d´ale kr´atk´ y, v´ ystiˇzn´ y a jedineˇcn´ y v r´amci popisu jednoho informaˇcn´ıho syst´emu. V diagramu se pro pˇr´ıpad uˇzit´ı pouˇz´ıv´a symbol elipsy, ve kter´e je n´azev pˇr´ıpadu uˇzit´ı. Vztah mezi akt´erem a pˇr´ıpadem uˇzit´ı znaˇc´ıme jednoduchou spojnic´ı. [1] Kromˇe z´akladn´ıch vztah˚ u mezi akt´ery a pˇr´ıpady uˇzit´ı m˚ uˇzeme pouˇz´ıt i pokroˇcil´e typy relac´ı (Relationships). Tyto nov´e vztahy slouˇz´ı k definov´an´ı dalˇs´ıch funkcionalit syst´emu nebo k vˇetˇs´ı pˇrehlednosti diagramu pˇr´ıpadu uˇzit´ı d´ıky pouˇzit´ı menˇs´ıho mnoˇzstv´ı symbol˚ u. Mezi tyto relace patˇr´ı [1][3]: • relace include – pouˇz´ıv´a se u pˇr´ıpad˚ u uˇzit´ı, kter´e jsou spoleˇcn´e nebo podobn´e pro v´ıce pˇr´ıpad˚ u uˇzit´ı, – vyˇclen´ı se t´ım spoleˇcn´e vlastnosti ze z´akladn´ıch pˇr´ıpad˚ u uˇzit´ı do nov´eho samostatn´eho pˇr´ıpadu uˇzit´ı, – z´akladn´ı pˇr´ıpad uˇzit´ı jiˇz po tomto vyˇclenˇen´ı nen´ı bez rozˇsiˇruj´ıc´ıho pˇr´ıpadu kompletn´ı, – znaˇc´ı se orientovanou ˇca´rkovanou ˇcarou, kter´a vede od z´avisl´eho pˇr´ıpadu uˇzit´ı k pˇr´ıpadu uˇzit´ı, na n´ıˇz z´avis´ı, a je pops´ana n´azvem include uzavˇren´ ym do dvojit´ ych lomen´ ych z´avorek, 34
• relace extend – rozˇsiˇruje z´akladn´ı pˇr´ıpad uˇzit´ı o novou funkˇcnost, chov´an´ı, – prim´arn´ı pˇr´ıpad uˇzit´ı nez´avisl´ y na doplˇ nuj´ıc´ıch informac´ıch, – lze pouˇz´ıt jen na urˇcit´ ych m´ıstech, tzv. bodech rozˇs´ıˇren´ı (extension points), kter´e poukazuj´ı na moˇzn´e rozˇs´ıˇren´ı funkˇcnosti syst´emu, – znaˇc´ı se orientovanou ˇca´rkovanou ˇcarou, kter´a vede smˇerem od doplˇ nuj´ıc´ıho pˇr´ıpadu uˇzit´ı k z´akladn´ımu a je pops´ana n´azvem extend uzavˇren´ ym do dvojit´ ych lomen´ ych z´avorek, • generalizace pˇr´ıpadu uˇzit´ı – pˇredstavuje zobecnˇen´ı vztahu mezi obecnˇejˇs´ım a konkr´etn´ım pˇr´ıpadem uˇzit´ı, – seskupuje souvisej´ıc´ı pˇr´ıpady uˇzit´ı do jednoho pˇredka. 3.2.2
Diagramy pˇ r´ıpadu uˇ zit´ı syst´ emu
Pomoc´ı v´ yˇse zm´ınˇen´ ych symbol˚ u diagramu pˇr´ıpadu uˇzit´ı zn´azorn´ıme tento diagram pro vyv´ıjen´ y syst´em urˇcen´ y pro online cviˇcen´ı a testov´an´ı matematiky. Diagramy pˇr´ıpadu uˇzit´ı byly vytvoˇreny v programu Enterprise Architect. Modely pˇr´ıpad˚ u uˇzit´ı si zobraz´ıme v nˇekolika pohledech. Na obr´azku 6 je nejprve zobrazen abstraktn´ı pohled na pˇr´ıpady uˇzit´ı, ve kter´em jsou zn´azornˇeni vˇsichni akt´eˇri syst´emu souˇcasnˇe. Pˇredvedeme si, jak jsme pˇri modelov´an´ı tohoto diagramu postupovali. Nejprve je potˇreba stanovit hranice syst´emu, jimiˇz jsou webov´e str´anky VypoˇctiTo pro online procviˇcov´an´ı a testov´an´ı z matematiky ˇza´k˚ u z´akladn´ıch ˇskol. Hranice syst´emu zobraz´ıme jako pr´azdn´ y obd´eln´ık s n´azvem syst´emu. V dalˇs´ım kroku urˇc´ıme akt´ery ze specifikace syst´emu, kter´ ymi jsou: nepˇrihl´aˇsen´ y uˇzivatel, ˇz´ak, uˇcitel a administr´ator. Symboly pro tyto akt´ery um´ıst´ıme vnˇe hranice syst´emu. Abychom v dalˇs´ı kroku spr´avnˇe identifikovali vˇsechny pˇr´ıpady uˇzit´ı, pop´ıˇseme si jednotliv´a pr´ava akt´er˚ u v syst´emu.
35
Popis akt´er˚ u: • nepˇrihl´aˇsen´ y uˇzivatel – procviˇcuje pˇr´ıklady rozdˇelen´e podle t´emat, – vol´ı si poˇcet a obt´ıˇznost pˇr´ıklad˚ u v procviˇcov´an´ı, – zobraz´ı se mu statistika u ´spˇeˇsnosti po vyhodnocen´ı cviˇcen´ı, • ˇza´k – pˇrihlaˇsuje se do syst´emu a odhlaˇsuje se z nˇej, – edituje sv´e osobn´ı u ´daje, – procviˇcuje pˇr´ıklady rozdˇelen´e podle t´emat, – vol´ı si poˇcet a obt´ıˇznost pˇr´ıklad˚ u v procviˇcov´an´ı, – zaˇrazuje se do nˇekter´e skupiny, resp. skupin, – skl´ad´a testy, kter´e jsou dostupn´e v jeho skupin´ach, – u ´ˇcastn´ı se soutˇeˇz´ı, – zobraz´ı se mu jeho statistika u ´spˇeˇsnosti za dˇr´ıve splnˇen´e cviˇcen´ı, resp. testy, • uˇcitel – pˇrihlaˇsuje se do syst´emu a odhlaˇsuje se z nˇej, – edituje sv´e osobn´ı u ´daje, – vytv´aˇr´ı nov´e skupiny, – spravuje skupiny, tj. potvrzuje zaˇrazen´ı ˇza´k˚ u do skupin, maˇze ˇza´ky ze sv´ ych skupin, edituje skupiny (vˇcetnˇe maz´an´ı), – spravuje sv´e testy, tj. vytv´aˇr´ı nov´e testy z pˇr´ıklad˚ u v syst´emu, edituje (vˇcetnˇe maz´an´ı) testy, – prohl´ıˇz´ı si v´ ysledky jednotliv´ ych ˇz´ak˚ u z tˇechto test˚ u, – pˇrid´av´a nov´ y pˇr´ıklad do syst´emu, 36
– edituje (vˇcetnˇe maz´an´ı) sv´e pˇr´ıklady, • administr´ator – pˇrihlaˇsuje se do syst´emu a odhlaˇsuje se z nˇej, – pˇrid´av´a nov´e pˇr´ıklady do t´emat, – schvaluje novˇe vloˇzen´e pˇr´ıklady od uˇcitele, kter´e uˇcitel povolil zveˇrejnit, – edituje (vˇcetnˇe maz´an´ı) jiˇz vloˇzen´e pˇr´ıklady v syst´emu, – vytv´aˇr´ı a edituje (vˇcetnˇe maz´an´ı) soutˇeˇze, – maˇze u ´ˇcet registrovan´eho uˇzivatele – ˇza´ka, uˇcitele, – maˇze vytvoˇren´e skupiny, – maˇze vytvoˇren´e testy.
Obr´azek 6: Abstraktn´ı pohled na pˇr´ıpady uˇzit´ı syst´emu.
37
Podle v´ yˇse uveden´eho popisu akt´er˚ u byly identifikov´any jednotliv´e pˇr´ıpady uˇzit´ı a zakresleny uvnitˇr hranic syst´emu. Nyn´ı zb´ yv´a pouze vytvoˇrit relace mezi akt´ery a pˇr´ıpady uˇzit´ı. V diagramu si m˚ uˇzeme vˇsimnout, ˇze nˇekter´e ˇcinnosti se opakuj´ı u v´ıce akt´er˚ u, a proto je zakresl´ıme do n´avrhu pouze jednou a spoj´ıme je s dan´ ymi akt´ery (napˇr. pˇr´ıpad uˇzit´ı pˇrihl´asit se do syst´emu“ je spoleˇcn´ y pro akt´ery ˇz´ak, ” uˇcitel a administr´ator). V abstraktn´ım pohledu jsou vyuˇzity pouze jednoduch´e vazby a specializovan´e relace (include, extend, generalizace pˇr´ıpad˚ u uˇzit´ı) jsou kv˚ uli pˇrehlednosti pouˇzity aˇz v podrobnˇejˇs´ıch modelech.
Obr´azek 7: Diagram pˇr´ıpadu uˇzit´ı z pohledu nepˇrihl´aˇsen´eho uˇzivatele. Na n´asleduj´ıc´ıch obr´azc´ıch jsou postupnˇe zn´azornˇeny rozpracovan´e pohledy na pˇr´ıpady uˇzit´ı jednotliv´ ych akt´er˚ u syst´emu – nepˇrihl´aˇsen´y uˇzivatel, ˇz´ak, uˇcitel a administr´ator. Je zˇrejm´e, ˇze nepˇrihl´aˇsen´ y uˇzivatel bude moci vyuˇz´ıvat pouze minimum z nab´ıdky aplikace. Tento diagram obsahuje pouze dva hlavn´ı pˇr´ıpady uˇzit´ı. Nav´ıc pˇred procviˇcov´an´ım pˇr´ıklad˚ u je tˇreba vˇzdy vybrat kategorii, kter´a se bude procviˇcovat a zvolit poˇcet a obt´ıˇznost pˇr´ıklad˚ u. V tuto chv´ıli je vhodn´e pouˇz´ıt relaci include. Na obr´azku 8 je zobrazen rozpracovan´ y pohled na pˇr´ıpady uˇzit´ı z pozice ˇza´ka. Tento akt´er m´a urˇceny stejn´e pˇr´ıpady uˇzit´ı pro procviˇcov´an´ı pˇr´ıklad˚ u jako nepˇrihl´aˇsen´ y uˇzivatel. Tentokr´at ale nez˚ ust´av´a pouze u t´eto ˇcinnosti, m˚ uˇze se pˇrihl´asit do syst´emu, odhl´asit se z nˇeho, zmˇenit sv´e osobn´ı u ´daje atd. Kromˇe z´akladn´ıch relac´ı 38
jsou zde pouˇzity relace include, extend a generalizace pˇr´ıpadu uˇzit´ı. Poslednˇe jmenovan´ y vztah je pouˇzit u zobrazen´ı statistiky u ´spˇeˇsnosti, kter´a pˇredstavuje zobecnˇen´ı dvou typ˚ u statistik, kter´e jsou si velmi podobn´e, ale v nˇekolika prvc´ıch se odliˇsuj´ı (napˇr. rozliˇsov´an´ı stupnˇe obt´ıˇznosti pˇr´ıklad˚ u). Jedn´a se o statistiku u ´spˇeˇsnosti z procviˇcov´an´ı a statistiku u ´spˇeˇsnosti z test˚ u.
Obr´azek 8: Diagram pˇr´ıpadu uˇzit´ı z pohledu ˇza´ka. Na obr´azku 9 vid´ıme n´ahled diagramu z pozice uˇcitele. Tento akt´er m´a nˇekolik shodn´ ych pˇr´ıpad˚ u uˇzit´ı jako akt´er ˇza´k (pˇrihl´asit se, odhl´asit se ze syst´emu a zmˇena osobn´ıch u ´daj˚ u). Dalˇs´ımi obecn´ ymi pˇr´ıpady uˇzit´ı jsou spravovat pˇr´ıklady, spravovat skupiny a spravovat testy, kter´e m˚ uˇzeme d´ale upˇresnit na editaci a vytvoˇren´ı nov´eho 39
pˇr´ıkladu, respektive skupiny, testu. Tento vztah je vyj´adˇren pomoc´ı generalizace pˇr´ıpad˚ u uˇzit´ı. V pˇr´ıpadˇe vloˇzen´ı nov´eho pˇr´ıkladu do syst´emu mus´ı uˇcitel ˇcekat na jeho schv´alen´ı od administr´atora. Tato vazba je zn´azornˇena prostˇrednictv´ım relace include, jeˇz mus´ı b´ yt vˇzdy vykon´ana.
Obr´azek 9: Diagram pˇr´ıpad˚ u uˇzit´ı z pohledu uˇcitele. Posledn´ım akt´erem syst´emu, kter´ y je podrobnˇeji zobrazen na obr´azku 10, je administr´ator. Je zˇrejm´e, ˇze tento akt´er m´a pˇridˇeleny nejvyˇsˇs´ı pr´ava ke spr´avˇe cel´eho syst´emu. Z toho vypl´ yvaj´ı pˇr´ıpady uˇzit´ı smazat uˇzivatele, smazat skupinu a smazat test. K podrobnˇejˇs´ımu popisu pˇr´ıpad˚ u uˇzit´ı spravovat pˇr´ıklady a spravovat soutˇeˇze je opˇet pouˇzita generalizace pˇr´ıpad˚ u uˇzit´ı.
40
Obr´azek 10: Diagram pˇr´ıpadu uˇzit´ı z pohledu administr´atora.
3.3
Diagram aktivit
J. Arlow a I. Neustadt ([3], str. 285) definuj´ı diagram aktivity n´asledovnˇe: Diagramy aktivit (z anglick´eho origin´alu Activity Diagram) jsou objektovˇe orien” tovan´ymi v´yvojov´ymi diagramy“. Umoˇzn ˇuj´ı modelov´an´ı procesu jako aktivity, kter´ a se skl´ad´a z kolekc´ı uzl˚ u spojen´ych hranami. Podle UML 2 se diagramy aktivit zakresluj´ı zcela podle nov´e s´emantiky, jeˇz je zaloˇzena na s´emantice Petriho s´ıt´ı. Diagram aktivit slouˇz´ı k modelov´an´ı chov´an´ı syst´emu a lze ho pouˇz´ıt v r˚ uzn´ ych f´az´ıch v´ yvoje. Nejˇcastˇeji se vˇsak pouˇz´ıv´a ve f´azi anal´ yzy, kde je vyuˇz´ıv´an k modelov´an´ı cest mezi pˇr´ıpady uˇzit´ı. Diagram pˇr´ıpadu uˇzit´ı zn´azorˇ nuje, co lze se syst´emem vykon´avat a diagram aktivit specifikuje postupy, kter´ ymi toho dos´ahneme. [3] Chov´an´ı v diagramu aktivit modelujeme pomoc´ı imagin´arn´ıho prvku – tokenu. Token cestuje“ v s´ıti uzl˚ u a hran, kter´e se ˇr´ıd´ı urˇcit´ ymi pravidly. Token m˚ uˇze ” reprezentovat postup ˇr´ızen´ı, objekt ˇci urˇcit´a data. [3]
41
V diagramu lze rozliˇsovat nˇekolik rol´ı, kter´e se u ´ˇcastn´ı dan´e aktivity. Jednotliv´e role rozdˇel´ı diagram na odd´ıly – tzv. paraleln´ı dr´ahy. Nˇekdy se odd´ıly aktivit naz´ yvaj´ı tak´e z´onami odpovˇednost´ı nebo plaveck´ ymi dr´ahami. Kaˇzd´a dr´aha je nadepsan´a jm´enem role a obsahuje aktivity vykon´avan´e danou rol´ı. Postup od jedn´e aktivity ke druh´e m˚ uˇze nast´avat i mezi r˚ uzn´ ymi dr´ahami. Odd´ıly jsou oddˇeleny svisl´ ymi nebo vodorovn´ ymi ˇcarami, pˇr´ıpadnˇe kˇrivkami. [2][3] Aktivity se skl´adaj´ı ze dvou prvk˚ u – uzl˚ u a hran. Tyto prvky se d´ale ˇclen´ı podle pravidel pouˇzit´ı. Uzly mohou b´ yt akˇcn´ı, ˇr´ıd´ıc´ı nebo objektov´e. Hrany ˇclen´ıme na ˇr´ıd´ıc´ı a objektov´e. Akˇcn´ı uzel iniciuje nˇejakou ˇcinnost (aktivita, chov´an´ı nebo operace), u n´ıˇz nen´ı potˇreba d´ale ji ˇclenit. Akˇcn´ı uzel se aktivuje pouze v pˇr´ıpadˇe, ˇze token projde z´aroveˇ n vˇsemi vstupn´ımi hranami uzlu a pokud splˇ nuje vˇsechny vstupn´ı podm´ınky dan´eho uzlu. Akˇcn´ı uzel se obvykle pojmenov´av´a slovesem nebo slovesn´ ym spojen´ım, i kdyˇz UML 2 neuv´ad´ı ˇz´adn´ y pevnˇe stanoven´ y standard. [3] ˇ ıd´ıc´ı uzel ˇr´ıd´ı cestu v r´amci aktivity. Cestu mezi uzly zn´azorˇ R´ nujeme pomoc´ı ˇr´ıd´ıc´ıho toku. Rozliˇsujeme nˇekolik z´akladn´ı typ˚ u ˇr´ıd´ıc´ıch uzl˚ u: • poˇca´teˇcn´ı uzel – pˇredstavuje poˇca´tek aktivity, kter´ y aktivuje prvotn´ı postup tokenu, • koncov´ y uzel aktivity – ukonˇcuje celou aktivitu, • koncov´ y uzel cesty – ukonˇcuje jednu specifickou cestu v r´amci aktivit, – zbyl´e cesty v aktivitˇe jsou st´ale aktivn´ı, • uzel rozhodnut´ı – uzel obsahuje v´ıce v´ ystupn´ıch hran, – token pokraˇcuje pˇres tu hranu, jej´ıˇz kontroln´ı podm´ınku splnil,
42
– jednotliv´e podm´ınky hran mus´ı m´ıt pr´azdn´ y pr˚ unik, tj. existuje pouze jedna cesta, kterou token m˚ uˇze pokraˇcovat, • uzel slouˇcen´ı – uzel obsahuje v´ıce vstupn´ıch hran, – vstupn´ı tokeny se zkop´ıruj´ı do jedn´e v´ ystupn´ı hrany, • uzel rozvˇetven´ı – rozvˇetv´ı vstupn´ı token do nˇekolika paraleln´ıch v´ ystupn´ıch cest (hran), • uzel spojen´ı – synchronizuje nˇekolik paraleln´ıch cest. [3] Objektov´ y uzel zastupuje objekt v r´amci aktivity. Cestu objektu, tj. vstupn´ı a v´ ystupn´ı hrany tohoto uzlu, oznaˇcujeme jako objektov´ y tok (cesty objektu). 3.3.1
Diagramy aktivit aplikace
Na obr´azku 11 je zobrazen diagram aktivit t´ ykaj´ıc´ı se registrace uˇzivatele. Skl´ad´a se z nˇekolika krok˚ u – vyplnˇen´ı vˇsech poˇzadovan´ ych u ´daj˚ u, kontrola tˇechto u ´daj˚ u (napˇr. tvar emailov´e adresy) a v pˇr´ıpadˇe nˇejak´ ych nesrovnalost´ı je uˇzivatel vyzv´an k opravˇe ˇci doplnˇen´ı chybn´ ych u ´daj˚ u. Obr´azek 19 v pˇr´ıloze zobrazuje zaloˇzen´ı nov´e skupiny z pohledu uˇcitele. Ve Spr´ avˇe skupin zvol´ı volbu zaloˇzit novou skupinu, zad´a potˇrebn´e u ´daje a jestliˇze jsou vyplnˇeny vˇsechny povinn´e prvky formul´aˇre, vytvoˇr´ı se nov´a skupina. Diagram na obr´azku 20 v pˇr´ıloze popisuje procviˇcov´an´ı pˇr´ıklad˚ u z pohledu ˇz´aka a skl´ad´a se z logick´e posloupnosti akc´ı, jeˇz bude stejn´a pro pˇrihl´aˇsen´eho ˇz´aka i nepˇrihl´aˇsen´eho uˇzivatele, a zaˇc´ın´a vybr´an´ım jedn´e z nab´ızen´ ych kategori´ı. N´aslednˇe mus´ı uˇzivatel zadat poˇcet pˇr´ıklad˚ u a obt´ıˇznost, kter´e bude cht´ıt poˇc´ıtat. Pokud zadal vyˇsˇs´ı poˇcet pˇr´ıklad˚ u, neˇz je moˇzn´e zobrazit, je vyzv´an, aby zadal nov´ yu ´daj. Pot´e syst´em zobraz´ı prvn´ı zad´an´ı a uˇzivatel se m˚ uˇze pustit do poˇc´ıt´an´ı. Po potvrzen´ı odpovˇedi syst´em zobraz´ı, zda ˇza´k poˇc´ıtal spr´avnˇe ˇci nikoli. N´aslednˇe se ˇza´kovi zobraz´ı
43
Obr´azek 11: Diagram aktivit - registrace uˇzivatele. dalˇs´ı pˇr´ıklad a aˇz do vyˇcerp´an´ı zadan´eho poˇctu u ´loh. Na z´avˇer se zobraz´ı statistika u ´spˇeˇsnosti.
3.4
Diagram tˇ r´ıd
Diagram tˇr´ıd modeluje strukturu syst´emu pomoc´ı objekt˚ u, jeˇz se v syst´emu vyskytuj´ı, a jejich vz´ajemn´ ych vztah˚ u. Kromˇe tˇr´ıd m˚ uˇze diagram obsahovat tak´e rozhran´ı ˇci v´ yˇctov´e tˇr´ıdy. Diagram tˇr´ıd lze vytv´aˇret na nˇekolika u ´rovn´ıch – dom´enov´ y, analytick´ y, n´avrhov´ y a implementaˇcn´ı model, kter´e se liˇs´ı v zobrazen´ı podrobnost´ı o jednotliv´ ych tˇr´ıd´ach.
44
Dom´enov´ y model pˇredstavuje z´akladn´ı logickou strukturu syst´emu a je sestaven podle poˇzadavk˚ u na syst´em. Z nˇeho vych´az´ı analytick´ y model tˇr´ıd, kter´ y rozˇsiˇruje diagram o dalˇs´ı kandid´atn´ı tˇr´ıdy a upˇresˇ nuje vztahy mezi jednotliv´ ymi entitami. Tˇr´ıdy mohou obsahovat n´azvy stˇeˇzejn´ıch atribut˚ u a operace, jeˇz vyjadˇruj´ı hlavn´ı u ´ˇcel tˇr´ıdy. [3] Dalˇs´ı u ´rovn´ı je n´avrhov´ y model, kter´ y vznik´a z dom´enov´eho modelu doplnˇen´ım implementaˇcn´ıch detail˚ u. Specifikujeme podrobnˇeji atributy t´ım, ˇze dopln´ıme informaci o datov´em typu, pˇr´ıpadnˇe viditelnost a implicitn´ı hodnoty. D´ale sestav´ıme vˇsechny metody specifikov´an´ım operac´ı z dom´enov´eho modelu. Pˇri doplˇ nov´an´ı tˇechto detail˚ u m˚ uˇze nastat situace, ˇze bude potˇreba jednu tˇr´ıdu dekomponovat na nˇekolik podrobn´ ych n´avrhov´ ych tˇr´ıd. D´ale v t´eto ˇca´sti zpˇresˇ nujeme vztahy mezi tˇr´ıdami. Tvorbu diagramu tˇr´ıd zavrˇsuje implementaˇcn´ı model, kter´ y jiˇz mus´ı obsahovat veˇsker´e podrobnosti struktury syst´emu. S touto u ´rovn´ı pracuj´ı vˇetˇsinou v´ yvoj´aˇri syst´emu. Pˇri pouˇzit´ı objektovˇe orientovan´eho jazyka je moˇzn´e pˇrev´est diagram pˇr´ımo na k´od. N´avrhov´ y model rozˇsiˇrujeme o operace, kter´e nastavuj´ı a vrac´ı hodnoty atribut˚ u, tzv. gettery a settery. D´ale m˚ uˇzeme tˇr´ıdy sluˇcovat do bal´ık˚ u. [3] Pˇri tvorbˇe diagramu tˇr´ıd pouˇz´ıv´ame n´asleduj´ıc´ı vazby: • dˇediˇcnost – hierarchick´ y vztah rodiˇc (pˇredek) – potomek, – podˇr´ızen´a tˇr´ıda obsahuje sv´e atributy a metody a z´aroveˇ n dˇed´ı vˇsechny atributy a operace sv´e nadˇr´ızen´e tˇr´ıdy, • asociace – modeluje vztah mezi dvˇema tˇr´ıdami, • agregace (seskupen´ı) – speci´aln´ı druh asociace, – modeluje vztah celek – ˇca´st, – sloˇzen´ y objekt (celek) m˚ uˇze existovat bez sv´ ych komponent (ˇca´st´ı),
45
• kompozice (sloˇzen´ı) – speci´aln´ı druh asociace, – modeluje vztah celek – ˇca´st, – sloˇzen´ y objekt (celek) nem˚ uˇze existovat bez sv´ ych komponent (ˇca´st´ı), • n´asobnost (kardinalita) – pˇredstavuje poˇcet vz´ajemn´ ych v´ yskyt˚ u objekt˚ u prov´azan´ ych tˇr´ıd v dan´em okamˇziku. [4] 3.4.1
Diagram tˇ r´ıd aplikace
Z anal´ yzy poˇzadavk˚ u, kter´a je pops´ana v kapitole 3.1, byl vytvoˇren prvotn´ı dom´enov´ y model ilustruj´ıc´ı fungov´an´ı aplikace. Tento model je zobrazen na n´ıˇze zobrazen´em obr´azku.
Obr´azek 12: Dom´enov´ y model aplikace. Uˇzivatel syst´emu m˚ uˇze nab´ yvat tˇr´ı rol´ı – ˇza´k, uˇcitel a administr´ator. Administr´ator spravuje cel´ y syst´em, proto je mu pˇridˇelen nejvˇetˇs´ı mnoˇzstv´ı funkc´ı. Uˇcitel´e ˇ ak m˚ mohou spravovat testy, vkl´adat nov´e pˇr´ıklady a skupiny a spravovat je. Z´ uˇze procviˇcovat pˇr´ıklady, prohl´ıˇzet si statistiku z poˇc´ıt´an´ı, vstoupit do r˚ uzn´ ych skupin nebo se poˇc´ıtat testy (soutˇeˇz je ch´ap´ana jako druh testu).
46
Detailnˇejˇs´ı pohled diagramu tˇr´ıd zobrazen´ y prostˇrednictv´ım analytick´eho modelu je kv˚ uli sv´e rozs´ahlosti k dispozici v pˇr´ıloze na obr´azku 21.
3.5
Datov´ y model
Pojem datab´aze m˚ uˇzeme struˇcnˇe popsat jako kolekci souvisej´ıc´ıch dat shrom´aˇzdˇen´ ych za urˇcit´ ym u ´ˇcelem. V nˇekter´e literatuˇre se datab´aze definuj´ı v ˇsirˇs´ım smyslu i se softwarov´ ym syst´emem, jenˇz umoˇzn ˇuje definovat, vytv´aˇret a udrˇzovat datab´azi a poskytuje ˇr´ızen´ y pˇr´ıstup k uloˇzen´ ym dat˚ um. Tento syst´em se naz´ yv´a syst´em ˇr´ızen´ı b´aze ˇ dat (SRBD). K n´avrhu datab´azov´e struktury se nejˇcastˇeji pouˇz´ıv´a entitnˇe – relaˇcn´ı model (ER model). Tento model se skl´ad´a ze dvou z´akladn´ıch prvk˚ u – entit a relac´ı. Entita pˇredstavuje urˇcitou mnoˇzinu re´aln´ ych objekt˚ u, kter´e maj´ı shodn´e vlastnosti (napˇr. vozidlo, zboˇz´ı, osoba) a je urˇcena sv´ ym jm´enem a seznamem vlastnost´ı neboli atribut˚ u. Skupina atribut˚ u, jeˇz jednoznaˇcnˇe identifikuj´ı pˇr´ısluˇsnou entitu, se naz´ yv´a prim´arn´ı kl´ıˇc. Entity se zobrazuj´ı jako obd´eln´ık se jm´enem entity uvnitˇr. Relace (vztahy) si lze pˇredstavit jako mnoˇzinu spojen´ı mezi z´ uˇcastnˇen´ ymi entitami. Kaˇzd´a vazba obsahuje popisek, jenˇz vystihuje jej´ı funkci, a zn´azorˇ nuje se pomoc´ı ˇca´ry, kter´a spojuje potˇrebn´e entity. Tak´e relace mohou b´ yt doplnˇeny o atributy. [22] 3.5.1
Entitnˇ e – relaˇ cn´ı model aplikace
Pˇri n´avrhu aplikace VypoˇctiTo byl vyuˇzit v´ yˇse popsan´ y entitnˇe – relaˇcn´ı model. Pˇri n´avrhu datab´aze bylo db´ano na to, aby byla splnˇena tˇret´ı norm´aln´ı forma (3NF). To znamen´a, ˇze mus´ı b´ yt zajiˇstˇena atomicita hodnot, pln´a funkˇcn´ı z´avislost atribut˚ u na prim´arn´ım kl´ıˇci a neexistence tranzitivn´ıho vztahu mezi neprim´arn´ımi kl´ıˇcov´ ymi atributy. Datab´aze byla navrˇzena programu Navicat for MySQL8 . Na obr´azku 13 je zobrazen pˇrehled tabulek datab´aze aplikace.
8
http://www.navicat.com/products/navicat-for-mysql
47
Obr´azek 13: Pˇrehled tabulek v datab´azi. Popis entitn´ıch mnoˇzin: • kategorie Objekty entity jsou vˇsechna t´emata, do kter´ ych jsou rozdˇeleny jednotliv´e pˇr´ıklady v aplikaci. Tato entita obsahuje pouze dva atributy – id a n´azev kategorie, jeˇz jsou z´aroveˇ n i prim´arn´ım kl´ıˇcem. • priklady Tabulka obsahuje zad´an´ı a dalˇs´ı potˇrebn´e informace o jednotliv´ ych pˇr´ıkladech. 48
Prim´arn´ım kl´ıˇcem je zde atribut id. Entita obsahuje atribut obtiznost, kde m´ame na v´ ybˇer ze tˇr´ı moˇznost´ı, kategorie, do kter´e je pˇr´ıklad zaˇrazen, zdroj, ze kter´eho je pˇr´ıklad pˇrevzat, a obrazek, pokud je potˇreba k pochopen´ı zad´an´ı. Atribut autor obsahuje jm´eno uˇzivatele, kter´ y dan´ y pˇr´ıklad do datab´aze vloˇzil, a ten m˚ uˇze prostˇrednictv´ım verejne nastavit, zda tento pˇr´ıklad bude viditeln´ y ve veˇrejn´e ˇca´sti syst´emu. Atribut schvalen obsahuje informaci o tom, zda proˇsel pˇr´ıklad kontrolou administr´atora. Atribut typ ulohy uchov´av´a druh u ´lohy pro zobrazen´ı odpovˇedi ve spr´avn´em stylu. Entita obsahuje ciz´ı kl´ıˇc id odpoved odkazuj´ıc´ı se na spr´avnou odpovˇed’ k pˇr´ıkladu. • prikladyVKategori Jedn´a se o asociaˇcn´ı tabulku, jeˇz slouˇz´ı ke spojen´ı tabulky kategorie a v n´ı um´ıstˇen´e priklady. Prim´arn´ı kl´ıˇc je tvoˇren´ y atributy kategorie a priklad. • obtiznost Tabulka obsahuje druhy obt´ıˇznosti, kterou si m˚ uˇzeme pˇri poˇc´ıt´an´ı zvolit. Prim´arn´ı kl´ıˇc je zde opˇet id. • odpovedi Prvky mnoˇziny jsou spr´avn´e odpovˇedi, kter´e jsou sv´az´any s priklady. Prim´arn´ım kl´ıˇcem je id priklad. • uzivatel Objekty entity jsou vˇsichni uˇzivatel´e, kteˇr´ı jsou evidov´ani v syst´emu. Prim´arn´ım kl´ıˇcem je atribut login. Heslo je uloˇzeno zabezpeˇceno pomoc´ı hashovac´ı funkce se sol´ı“. Atribut prava obsahuje informaci, zda je uˇzivatel veden jako ˇza´k, ” uˇcitel ˇci admin. V´ yznam ostatn´ıch atribut˚ u je zˇrejm´ y z pojmenov´an´ı. • prava Tabulka obsahuje typy rol´ı, ze kter´ ych si m˚ uˇze uˇzivatel vybrat, a je propojena s tabulkou uzivatel. Prim´arn´ım kl´ıˇcem je atribut id. • pohlavi Tabulka obsahuje doplˇ nuj´ıc´ı informaci o pohlav´ı uˇzivatele, je spojena s tabulkou uzivatel a je urˇcena prim´arn´ım kl´ıˇcem id. 49
• statistikaProcvicovani Zde nalezneme souhrnn´e informace o v´ ysledc´ıch uˇzivatele z procviˇcov´an´ı pˇr´ıklad˚ u. Tabulka obsahuje sloˇzen´ y prim´arn´ı kl´ıˇc, kter´ y je tvoˇren z atribut˚ u login, id kategorie a obtiznost, a je propojena s uzivatelem. Vlastnost entity pocet procvicovani n´am ˇr´ık´a, kolikr´at jsme poˇc´ıtali pˇr´ıklady z dan´e kategorie a s urˇcitou obt´ıˇznost´ı. • skupina Objekty jsou skupiny, kter´e vytvoˇrili uˇzivatel´e v roli uˇcitele. Jm´eno uˇcitele obsahuje atribut zakladatel a odkazuje se na tabulku uzivatel. Prim´arn´ım kl´ıˇcem tabulky je atribut id. • uzivateleSkupiny Objekty entity jsou jednotliv´ı uˇzivatel´e, kteˇr´ı se zaˇradili do urˇcit´e skupiny. Pˇredstavuje asociaˇcn´ı tabulku mezi tabulkami uzivatel a skupina. Prim´arn´ım kl´ıˇcem jsou atributy id skupiny a uzivatel. • test Podle hodnoty atributu typ jsou prvky mnoˇziny bud’ testy vytvoˇren´e uˇcitelem, nebo soutˇeˇze zadan´e administr´atorem. Prim´arn´ım kl´ıˇcem je atribut id. D´ale obsahuje jiˇz pouze atribut nazev. • testyVeSkupine Pˇredstavuje asociaˇcn´ı tabulku, jeˇz propojuje tabulky test a skupina. Obsahuje atribut opakovani, kter´ y urˇcuje, zda bude moˇzn´e test spustit v´ıcekr´at. Atribut zverejneni, respektive uzavreni obsahuje u ´daje o ˇcase a datu, kdy bude test ˇza´k˚ um k dispozici (kdy se jim zpˇr´ıstupn´ı), respektive kdy se uzavˇre. • prikladyVTestu Pˇredstavuje asociaˇcn´ı tabulku, jeˇz propojuje tabulky test a priklady. • odpovediTest Prvky mnoˇziny pˇredstavuj´ı odpovˇedi na pˇr´ıklady v dan´em testu. Prim´arn´ım kl´ıˇcem je zde login, id test a id priklad. Jedn´a se o asociaˇcn´ı tabulku mezi entitou test a odpovedi. 50
• statistikaTest Zde nalezneme souhrnn´e informace o v´ ysledc´ıch uˇzivatele z test˚ u. Tabulka obsahuje sloˇzen´ y prim´arn´ı kl´ıˇc, kter´ y tvoˇr´ı login a id test, a je propojena s tabulkou uzivatel a test. Hodnota pokus n´am ˇr´ık´a, kolikr´at jiˇz uˇzivatel ´ test spustil. Udaje o spuˇstˇen´ı a dokonˇcen´ı testu obsahuj´ı atributy zapocato a ukonceno. Zbyl´e atributy obsahuj´ı informace o poˇctu spr´avn´ ych, chybn´ ych a nevyplnˇen´ ych odpovˇed´ı. • zprava Zde jsou uloˇzeny emailov´e zpr´avy, jeˇz byly zasl´any prostˇrednictv´ım kontaktn´ıho formul´aˇre na webov´ ych str´ank´ach. Prim´arn´ım kl´ıˇcem je atribut id, v´ yznam ostatn´ıch atribut˚ u je zˇrejm´ y z jejich n´azv˚ u. Na obr´azku 14 je zobrazena z´akladn´ı tabulka uzivatel, kter´a uchov´av´a informace o uˇzivatel´ıch. Dalˇs´ımi d˚ uleˇzit´ ymi tabulkami jsou ty, kter´e se staraj´ı o nastaven´ı opr´avnˇen´ı a pˇriˇrazen´ı uˇzivatele do skupin. Tabulka uzivateleSkupiny slouˇz´ı jako asociaˇcn´ı tabulka pro spojen´ı tabulek uzivatel a skupina, kdy byl vztah N:M nahrazen vztahem 1:N. Z´aroveˇ n jsou tabulky uzivatel a skupina spojeny ve vztahu 1:1, kdy jeden uˇzivatel pˇredstavuje zakladatele jedn´e skupiny. Doplˇ nuj´ıc´ı informaci o pohlav´ı uˇzivatele obsahuje tabulka pohlavi.
51
Obr´azek 14: Pr´ava uˇzivatele a jeho pˇriˇrazen´ı do skupiny. D˚ uleˇzit´ ymi tabulkami jsou zde ty, kter´e se staraj´ı o spr´avu pˇr´ıklad˚ u v syst´emu. Ty ´ redn´ı tabulkou je zde tabulka priklady, kter´a je jsou zobrazeny na obr´azku 15. Ustˇ d´ale propojena vztahem 1: N s tabulkami odpovedi a prikladyVKategorii a vztahem 1:1 je nastaven atribut obtiznost z tabulky obtiznost. Tabulka s n´azvem statistikaProcvicovani uchov´av´a informace o u ´spˇeˇs´ıch ˇci ne´ uspˇeˇs´ıch ˇza´k˚ u pˇri poˇc´ıt´an´ı a je jednoznaˇcnˇe urˇcena atributy login, id kategorie a obtiznost, proto je tak´e spojena vztahy 1:N, respektive N:1 s tabulkami, kter´e jsou pojmenov´any uzivatel, kategorie a obtiznost.
52
Obr´azek 15: Procviˇcov´an´ı pˇr´ıklad˚ u.
3.6
Dr´ atov´ y model
Dr´atov´ y model, tzv. wireframe, se vyuˇz´ıv´a pˇri n´avrhu struktury webov´ ych str´anek. Tyto modely nast´ın´ı, jak by mˇel web pˇresnˇe vypadat a fungovat, aniˇz by bylo potˇreba pracnˇe vytv´aˇret grafiku ˇci dokonce programovat. Pomoc´ı dr´atov´ ych model˚ u si m˚ uˇzeme udˇelat jasnou pˇredstavu o v´ ysledn´em projektu a v pˇr´ıpadˇe nespokojenosti nˇekter´e ˇc´asti rychle a bez dalˇs´ıch n´aklad˚ u pozmˇenit. Pˇred vytv´aˇren´ım samotn´eho dr´atov´eho modelu je vhodn´e zakreslit jednoduchou mapu str´anek, ze kter´e bude zˇrejm´e, kter´e str´anky jsou spolu propojeny. K tomu postaˇc´ı jednoduch´e symboly obd´eln´ık˚ u popsan´e n´azvy str´anek, kter´e pˇredstavuj´ı, a spojit je jednoduch´ ymi vazbami. [5] Pˇri vytv´aˇren´ı dr´atov´eho modelu m˚ uˇzeme postupovat do r˚ uzn´ ych u ´rovn´ı detail˚ u. Nejprve webovou str´anku rozdˇel´ıme pouze na logick´e bloky (z´ahlav´ı, z´apat´ı, menu, hlavn´ı obsah) a pot´e doplˇ nujeme dalˇs´ı elementy (napˇr. nadpisy, tlaˇc´ıtka, obr´azky, 53
text apod.). St´ale ale mus´ı platit, ˇze v´ ysledkem bude pouze kostra str´anek bez designu. Jednotliv´e elementy, napˇr. tlaˇc´ıtka, nadpisy, mohou obsahovat jiˇz fin´aln´ı popisky nebo mohou z˚ ustat pr´azdn´e, resp. obecn´e a slouˇzit pouze pro pˇredstavu rozloˇzen´ı prvk˚ u na str´ance. [6] Dr´atov´e modely je moˇzn´e vytv´aˇret pomoc´ı tuˇzky a pap´ıru. Existuje vˇsak ˇrada sofistikovanˇejˇs´ıch n´astroj˚ u, napˇr. Axure RP, Visio atd. Modely webov´e str´anky Vypoctito.cz byly vytvoˇreny v programu GUI Design Studio9 . 3.6.1
N´ avrh webu
Tituln´ı strana webov´ ych str´anek obsahuje jednotliv´e kategorie, ze kter´ ych m˚ uˇze uˇzivatel vyb´ırat t´ema pro procviˇcov´an´ı. D´ale se str´anka skl´ad´a z hlaviˇcky, jeˇz obsahuje n´azev webu, logo a komponenty potˇrebn´e pro pˇrihl´aˇsen´ı ˇci registraci uˇzivatele, z menu a patiˇcky, jeˇz obsahuje z´akladn´ı navigaˇcn´ı prvky a formul´aˇr pro zas´ıl´an´ı zpr´av. Hlavn´ı obsah str´anky se po pˇrihl´aˇsen´ı zcela zmˇen´ı podle role uˇzivatele, hlaviˇcka se zmˇen´ı ˇca´steˇcnˇe, menu a patiˇcka z˚ ust´avaj´ı st´ale stejn´e. V pˇr´ıloze je vloˇzen dr´atov´ y model tituln´ı strany webu, n´ahled obrazovky po pˇrihl´aˇsen´ı ˇza´ka a po pˇrihl´aˇsen´ı uˇcitele.
9
http://www.carettasoftware.com/guidesignstudio/
54
4
Zabezpeˇ cen´ı
Pˇri tvorbˇe webov´e aplikace nesm´ıme zapomenout na zajiˇstˇen´ı jej´ı bezpeˇcnosti. Tato ot´azka je v posledn´ıch letech ˇc´ım d´al aktu´alnˇejˇs´ı a nemˇela by se podceˇ novat. Proto je d˚ uleˇzit´e pˇri vytv´aˇren´ı webov´ ych str´anek dodrˇzovat urˇcit´e z´asady, kter´e sniˇzuj´ı rizika napaden´ı str´anek. Mezi takov´e z´asady patˇr´ı pouˇz´ıv´an´ı apostrof˚ u m´ısto uvozovek, protoˇze apostrofy zabraˇ nuj´ı interpretaci promˇenn´ ych a ˇr´ıd´ıc´ıch znak˚ u. Pro vkl´ad´an´ı soubor˚ u do aplikace by se mˇel pouˇz´ıvat pˇr´ıkaz require() m´ısto include(), jelikoˇz se t´ım vyhneme nepˇredv´ıdateln´ ym situac´ım. Kdyˇz pˇr´ıkaz require() selˇze, vykon´av´an´ı skriptu se zastav´ı (pˇri vypnut´ı chybov´ ych hl´aˇsen´ı se zobraz´ı napˇr. pouze b´ıl´a str´anka), zat´ımco v pˇr´ıpadˇe pˇr´ıkazu include() se m˚ uˇze pokraˇcovat d´al. Pokud na vstupu od uˇzivatele pˇrij´ım´ame ˇc´ıslo, je potˇreba ho explicitnˇe pˇretypov´avat napˇr. pˇr´ıkazem $cislo = (int) $GET[’cislo’]; nebo kontrolovat, zda se opravdu jedn´a o ˇc´ıslo. K tomu slouˇz´ı funkce is numeric, jeˇz je pouˇzita i ve webov´e aplikaci. [7] V n´asleduj´ıc´ıch kapitol´ach jsou uvedeny dalˇs´ı z´asady, jeˇz byly dodrˇzeny v aplikaci VypoˇctiTo, a z´avaˇzn´e hrozby, kter´e by mohly nastat pˇri pouˇz´ıv´an´ı aplikace napsan´e v jazyce PHP a vyuˇz´ıvaj´ıc´ı datab´azi.
4.1
Hl´ aˇ sen´ı chyb
Nezbytnou souˇca´st´ı v´ yvoje aplikace a jej´ıho ladˇen´ı je pouˇz´ıv´an´ı chybov´ ych hl´aˇsen´ı. Jazyk PHP vypisuje informace o chybˇe do okna webov´eho prohl´ıˇzeˇce. Proto v pˇr´ıpadˇe selh´an´ı skriptu m˚ uˇze tyto informace o aplikaci ˇci konfiguraci serveru vidˇet i bˇeˇzn´ y n´avˇstˇevn´ık str´anek a m˚ uˇze je pot´e snadno zneuˇz´ıt k nepovolen´emu pˇr´ıstupu do syst´emu. Je tedy potˇreba, aby pˇri ostr´em spuˇstˇen´ı aplikace na webu byla tato direktiva vypnuta. Toho doc´ıl´ıme t´ım, ˇze v souboru php.ini nastav´ıme direktivu error reporting = 0. Druhou moˇznost´ı, jak vypnout zobrazov´an´ı chyb, je pouˇzit´ı direktivy display errors = Off.
55
O chybov´e zpr´avy jsme se t´ımto nastaven´ım ale u ´plnˇe nepˇripravili. M˚ uˇzeme je nechat protokolovat do logovac´ıho souboru, kter´ y specifikujeme v direktivˇe error log. Tuto funkci aktivujeme zapnut´ım direktivy log errors. [7]
4.2
Zak´ az´ an´ı nebezpeˇ cn´ ych funkc´ı
Jazyk PHP nab´ız´ı program´ator˚ um celou ˇradu funkc´ı, nˇekter´e z nich se mohou st´at bezpeˇcnostn´ım rizikem. Proto je vhodn´e tyto funkce z preventivn´ıch d˚ uvod˚ u uˇzivatel˚ um znepˇr´ıstupnit. Toho dos´ahneme t´ım, ˇze v souboru php.ini nap´ıˇseme direktivu disable functions a za n´ı seznam dan´ ych funkc´ı oddˇelen´ ych ˇca´rkou. Mezi takov´e funkce patˇr´ı (a kter´e byly v aplikaci vypnuty) napˇr´ıklad: • phpinfo() – zobraz´ı komplexn´ı informace o konfiguraci PHP – pouˇz´ıvan´a verze PHP, operaˇcn´ı syst´em, verze j´adra atd. • fopen() – slouˇz´ı k otev´ır´an´ı soubor˚ u a URL adres. [17]
4.3
Ukl´ ad´ an´ı hesel
Jedn´ım z hlavn´ıch prvk˚ u slouˇz´ıc´ıch k zajiˇstˇen´ı bezpeˇcnosti webov´e aplikace, ve kter´e se mohou uˇzivatel´e zaregistrovat, je ochrana pˇrihlaˇsovac´ıho hesla. Ukl´ad´an´ı hesla ve stejn´e podobˇe, v jak´e jej zadal uˇzivatel, tj. bez jak´ekoli ochrany, je v souˇcasn´e dobˇe povaˇzov´ano za hrubou chybu. Proto se k ukl´ad´an´ı hesla vyuˇz´ıvaj´ı hashovac´ı funkce, kter´e zadan´ y ˇretˇezec pˇrevedou na hash pevn´e d´elky. D´elka hashe je ovlivnˇena pouˇzit´ ym typem hashovac´ı funkce. Heslo uˇzivatele by se nemˇel dozvˇedˇet ani spr´avce aplikace, kter´ y m´a pˇr´ıstup k algoritmu hashovac´ı funkce. Proto se do datab´aze ukl´ad´a otisk (hash) hesla a pouˇzit´a funkce je pouze jednosmˇern´a, tj. z hashe nelze v rozumn´e ˇcase sloˇzit p˚ uvodn´ı heslo. Kdyˇz se pot´e uˇzivatel chce pˇrihl´asit do syst´emu, zad´a sv´e heslo a aplikace ho stejnou funkc´ı zmˇen´ı na hash, kter´ y porovn´av´a s hodnotou otisku uloˇzenou v datab´azi. [13]
56
Pro zv´ yˇsen´ı bezpeˇcnosti syst´emu se kromˇe samotn´e hashovac´ı funkce pouˇz´ıv´a s˚ ul“. S˚ ul je jedineˇcn´ y ˇretˇezec pˇriloˇzen´ y k heslu uˇzivatele. Teprve takto rozˇs´ıˇren´e ” heslo se zahashov´av´a. Je to z toho d˚ uvodu, aby v pˇr´ıpadˇe v´ yskytu v´ıce uˇzivatel˚ u se stejn´ ym heslem, se zabr´anilo situaci, ˇze u ´toˇcn´ık prolom´ı jedno heslo a t´ım z´ısk´a hesla i vˇsech ostatn´ıch uˇzivatel˚ u. Heslo m˚ uˇzeme osolit“ napˇr´ıklad jm´enem uˇzivatele, ” datem registrace uˇzivatele nebo nˇejak´ ym speci´aln´ım ˇretˇezcem, kter´ y vˇsak nebude uloˇzen v datab´azi aplikace. Mezi nejˇcastˇeji pouˇz´ıvan´e hashovan´ı funkce patˇr´ı MD5 a SHA1. V´ ysledkem funkce MD5 je 32 znakov´e ˇc´ıslo v hexadecim´aln´ım tvaru a v´ ysledkem SHA1 je 40 znakov´e ˇc´ıslo tak´e v hexadecim´aln´ım tvaru. Velkou nev´ yhodou hashovac´ı funkce MD5 je, ˇze u n´ı byly objeveny bezpeˇcnostn´ı trhliny. Doch´az´ı k tomu, ˇze k r˚ uzn´ ym hesl˚ um je vytvoˇren stejn´ y hash. Tyto kolize jsou napˇr. v digit´aln´ıch podpisech nepˇr´ıpustn´e. Pro v´ yvoj´aˇre je tedy vhodn´e, aby pouˇz´ıvali dokonalejˇs´ı algoritmy napˇr. SHA2, SHA3 nebo v´ yˇse zm´ınˇen´ y SHA1. [13][14] V aplikaci VypoˇctiTo je pouˇzita hashavac´ı funkce rozˇs´ıˇren´a o s˚ ul“ k utajen´ı hesla ” uˇzivatele. Z d˚ uvodu bezpeˇcnosti si zde nebudeme uv´adˇet pˇresn´ y n´azev pouˇzit´eho algoritmu. D´ale aplikace obsahuje dvoj´ı kontrolu hesla, to znamen´a, ˇze pˇri zmˇenˇe hesla mus´ı uˇzivatel zadat nov´e i p˚ uvodn´ı heslo. T´ım zabr´an´ıme tomu, aby pˇrihl´aˇsen´emu uˇzivateli mohl nˇekdo ciz´ı zmˇenit heslo (kdyˇz si napˇr. na chv´ıli odbˇehne od poˇc´ıtaˇce a neodhl´as´ı se) a mohl tak z´ıskat snadn´ y pˇr´ıstup k dan´emu u ´ˇctu. Tak´e pˇri registraci mus´ı uˇzivatel vyplˇ novat heslo dvakr´at a kontroluje se, zda si hesla odpov´ıdaj´ı. V tomto pˇr´ıpadˇe je tak zajiˇstˇeno, ˇze se uˇzivatel pˇri zad´av´an´ı nedopust´ı nˇejak´eho pˇreklepu, kter´eho si nen´ı vˇedom, coˇz by zp˚ usobilo, ˇze se na novˇe vytvoˇren´ y u ´ˇcet nebude moci do syst´emu pˇrihl´asit.
4.4
SQL Injection
SQL Injection (naruˇsen´ı SQL dotazu) je oznaˇcen´ı bezpeˇcnostn´ı chyby, d´ıky kter´e m´a u ´toˇcn´ık moˇznost vkl´adat vlastn´ı SQL dotazy a manipulovat tak s daty v datab´azi. Ukaˇzme si jednoduch´ y pˇr´ıklad dotazu: $dotaz="SELECT * FROM uˇ zivatel WHERE login=’admin’ OR 1=1"; 57
Tento dotaz se vykon´a pokaˇzd´e, protoˇze kv˚ uli logick´emu oper´atoru OR je podm´ınka vˇzdy vyhodnocena jako pravdiv´a (true). Proto uˇzivatel bude vˇzdy do syst´emu pˇrihl´aˇsen a nav´ıc se pˇrihl´as´ı na prvn´ı u ´ˇcet v tabulce, jenˇz obvykle b´ yv´a pouˇz´ıv´an pˇr´ımo administr´atorem nebo nˇejak´ ym testovac´ım u ´ˇctem se stejn´ ymi pr´avy jako m´a administr´ator. Br´anit se proti takov´emu z´asahu do k´odu m˚ uˇzeme validac´ı vstupn´ıch dat nebo napˇr´ıklad oˇsetˇr´ıme-li vstupn´ı data funkc´ı mysql real escape string. [19]
4.5
XSS
XSS (Cross-Site Scripting) neboli skriptov´an´ı pˇres weby pˇredstavuje z´avaˇzn´e pochyben´ı ve filtraci dat od uˇzivatele. Pˇri tomto u ´toku nedoch´az´ı k u ´pravˇe k´odu uloˇzen´eho na serveru, ale zp˚ usobuje pˇri n´avˇstˇevˇe uˇzivatele napaden´e str´anky odes´ıl´an´ı dat tˇret´ı stranˇe. To m˚ uˇze v´est k tomu, ˇze u ´toˇcn´ık odciz´ı nic netuˇs´ıc´ımu uˇzivateli jeho identitu a m˚ uˇze se za nˇeho vyd´avat. Zabr´anit tˇemto u ´tok˚ um lze v jazyce PHP hned nˇekolika funkcemi: escapeshellarg(), escapeshellcmd(), htmlentities() a strip tags(). Od verze PHP 5.2 m´a program´ator pˇr´ıstup k nativn´ımu rozˇs´ıˇren´ı Filter, jenˇz nab´ız´ı ˇsirokou ˇsk´alu r˚ uzn´ ych druh˚ u filtr˚ u. V aplikaci VypoˇctiTo je pouˇzita funkce filter var, kter´a rozpozn´a v zadan´em ˇretˇezci speci´aln´ı symboly a nahrad´ı je jejich znakov´ ymi entitami. [7] Jedn´ım z nejˇcastˇejˇs´ıch probl´em˚ u na vstupu je v´ yskyt uvozovek a apostrof˚ u. Tento probl´em je moˇzn´e ˇreˇsit (vˇcetnˇe jiˇz v´ yˇse zm´ınˇen´ ych funkc´ı) napˇr´ıklad t´ım, ˇze znaky nahrad´ıme tzv. escape sekvenc´ı (k tomu slouˇz´ı funkce addslashes()). [7]
4.6
Direktiva registr globals
K pˇrenosu dat od uˇzivatele jsou urˇceny tˇri metody – GET, POST a COOKIE. Pokud je zapnuta direktiva register globals, zobraz´ı se promˇenn´e pˇred´avan´e v´ yˇse uveden´ ymi metodami jako glob´aln´ı promˇenn´e v dan´em skriptu. To m˚ uˇze v´est k tomu, ˇze pˇr´ıpadn´ yu ´toˇcn´ık vloˇz´ı do skriptu sv´e promˇenn´e s potˇrebn´ ymi hodnotami a prolom´ı tak zabezpeˇcen´ı cel´e aplikace. Aby tato situace nenastala, je nutn´e pouˇz´ıvat superglob´aln´ı promˇenn´e $ POST, $ GET a $ COOKIE. D´ale je zapotˇreb´ı m´ıt vy-
58
pnutou direktivu register globals, kterou m´ıvaj´ı poskytovatel´e webhostingu jiˇz implicitnˇe vypnutu. Nav´ıc od verze PHP 5.4 tato direktiva jiˇz ani neexistuje a nelze ji tedy povolit. [18]
4.7
Soubor .htaccess
Jedn´ım z dalˇs´ıch v´aˇzn´ ych bezpeˇcnostn´ıch rizik je nekontrolovan´e prohl´ıˇzen´ı adres´aˇrov´e struktury aplikace prostˇrednictv´ım webov´eho prohl´ıˇzeˇce. Uˇzivateli postaˇc´ı bliˇzˇs´ı prozkoum´an´ı adresn´eho ˇra´dku a jiˇz si m˚ uˇze dle libosti prohl´ıˇzet obsah jednotliv´ ych sloˇzek. T´eto situaci zamez´ıme pouˇzit´ım souboru .htaccess. Postaˇc´ı, kdyˇz do souboru zap´ıˇseme n´asleduj´ıc´ı ˇr´adek: Options –Indexes .htaccess je textov´ y soubor, kter´ y m˚ uˇzeme vytvoˇrit v obyˇcejn´em textov´em editoru (napˇr. v Pozn´amkov´em bloku). V operaˇcn´ım syst´emu Windows mohou nastat menˇs´ı probl´emy pˇri vytv´aˇren´ı tohoto souboru, protoˇze obsahuje pouze pˇr´ıponu bez n´azvu. Kromˇe v´ yˇse uveden´e funkce, kter´a je pouˇzita i ve webov´e aplikaci VypoˇctiTo, m˚ uˇzeme v souboru .htaccess nastavit: • v´ ypis chybov´eho ozn´amen´ı, • blokov´an´ı pˇr´ıstupu ke str´ank´am pro urˇcit´e IP adresy, • heslo pro ochranu ˇca´sti nebo cel´ ych str´anek, • uˇzivatelsk´e skupiny, • pˇresmˇerov´an´ı na jinou adresu, • apod. [15][16]
59
5
Implementace
N´asleduj´ıc´ı kapitoly struˇcnˇe popisuj´ı n´astroje, postupy a technologie, kter´e byly pouˇzity pˇri tvorbˇe interaktivn´ıch webov´ ych str´anek VypoˇctiTo, jenˇz jsou dostupn´e na adrese http://www.vypoctito.cz. Veˇsker´e zdrojov´e k´ody byly naps´any v programu PhpStorm10 a pro usnadnˇen´ı pr´ace s datab´az´ı byl pouˇzit program Navicat for MySQL11 .
5.1
Pouˇ zit´ e technologie
Pro implementaci webov´e aplikace byl zvolen jazyk PHP, ˇsablonovac´ı syst´em Smarty, datab´azov´ y syst´em MySQL, znaˇckovac´ı jazyk HTML5 a kask´adov´e styly CSS3. Tuto kombinaci jsem zvolil kv˚ uli ˇsirok´e nab´ıdce funkc´ı, kter´e v´ yˇse zm´ınˇen´e technologie nab´ızej´ı a tak´e vysok´e podpoˇre tˇechto n´astroj˚ u ze strany poskytovatel˚ u hostingu. Dalˇs´ı technologie, kter´a byla pouˇzita pˇri tvorbˇe webu, avˇsak v menˇs´ı m´ıˇre, je JavaScript. Webov´e str´anky, jak je jiˇz ze zad´an´ı patrn´e, obsahuj´ı ˇradu matematick´ ych z´apis˚ u, se kter´ ymi si jazyk HTML, resp. XHTML nedok´aˇze poradit. Pro zobrazen´ı tˇechto prvk˚ u proto byla pouˇzita javascriptov´a knihovna MathJax. Veˇsker´e v´ yˇse zm´ınˇen´e technologie budou v n´asleduj´ıc´ıch ˇr´adk´ach struˇcnˇe charakterizov´any. 5.1.1
HTML
HTML je zkratka z anglick´eho n´azvu HyperText Markup Language, jenˇz znamen´a hypertextov´ y znaˇckovac´ı jazyk. HTML je jedn´ım z pˇredn´ıch jazyk˚ u pouˇz´ıvan´ ych pro vytv´aˇren´ı webov´ ych str´anek. Zdrojov´ y k´od je vytv´aˇren pomoc´ı HTML znaˇcek, neboli tagu, podle kter´ ych prohl´ıˇzeˇc rozpozn´a, jak m´a dan´e ˇc´asti str´anky zobrazit. Tagy mohou b´ yt p´arov´e a obsah je mezi nimi uzavˇren (napˇr. pro zobrazen´ı odstavce) nebo nep´arov´e (napˇr. pro zobrazen´ı obr´azku). Nˇekter´e elementy mohou obsahovat atributy, kter´e nastavuj´ı 10 11
vlastnosti dan´eho prvku. [12] Dokument obsahuj´ıc´ı HTML k´od m´a pˇr´ıponu .html nebo .htm. Kaˇzd´ y dokument mus´ı obsahovat informace o pouˇzit´em typu dokumentu (specifikace DTD). Z´akladn´ı strukturu dokumentu tvoˇr´ı n´asleduj´ıc´ı elementy: • html – uvozuje a zakonˇcuje celou webovou str´anku, • head – vymezuje hlaviˇcku dokumentu, jeˇz obsahuje informace o str´ance (tzv. metadata), • title – titulek str´anky, zobrazuje se v horn´ım pruhu prohl´ıˇzeˇce, • body – vymezuje tˇelo str´anky, do kter´eho se zapisuje veˇsker´ y obsah HTML str´anky. [12] 5.1.2
CSS
CSS je akronym ze slov Cascading Style Sheets a do ˇceˇstiny je pˇrekl´ad´an jako kask´adov´e styly. Tento jazyk byl vytvoˇren organizac´ı W3C a je urˇcen pro grafickou u ´pravu webov´ ych str´anek. Vyuˇz´ıv´a se zejm´ena ve spojen´ı s technologiemi HTML, XHTML a XML. Posledn´ı verz´ı jazyka je CSS3. D´ıky tomuto jazyku je moˇzn´e oddˇelit nastaven´ı vzhledu od obsahu samotn´eho dokumentu, coˇz umoˇzn ˇuje jednoduˇsˇs´ı u ´drˇzbu webov´e prezentace. Vlastnosti tag˚ u v HTML dokumentu lze nastavit bud’ glob´alnˇe pro vˇsechny tagy stejn´eho typu, nebo pouze jednomu konkr´etn´ımu prostˇrednictv´ım n´avˇeˇst´ı. [10] Pomoc´ı pouze jedin´eho souboru, kter´ y obsahuje pravidla pro vzhled str´anky, m˚ uˇzeme nastylovat cel´ y web. Existuje nˇekolik zp˚ usob˚ u, jak pˇripojit extern´ı CSS soubor (s pˇr´ıponou .css) do HTML dokumentu. Uk´aˇzeme si dva nejˇcastˇejˇs´ı zp˚ usoby: • pouˇzit´ı elementu link • pouˇzit´ı direktivy import @import url(style.css) screen;
61
CSS styly lze v HTML dokumentu pouˇz´ıt i pˇr´ımo vloˇzen´ım atributu style. T´ım se vˇsak poruˇs´ı hlavn´ı v´ yhoda kask´adov´ ych styl˚ u – oddˇelenost vzhledu od obsahu. Pomoc´ı vˇsech v´ yˇse uveden´ ych vloˇzen´ı CSS m˚ uˇzeme nastavit r˚ uzn´e zp˚ usoby zobrazen´ı webu pro prohl´ıˇzeˇc, tisk, mobily apod. [10] 5.1.3
PHP
PHP je rekurzivn´ı akronym pro Hypertext Preprocessor. P˚ uvodnˇe ale akronym PHP vznikl z anglick´eho spojen´ı Personal Home Page. PHP je skriptovac´ı jazyk, kter´ y je urˇcen pˇredevˇs´ım pro programov´an´ı dynamick´ ych webov´ ych str´anek. Zdrojov´e k´ody jsou zpracov´av´any na stranˇe serveru a uˇzivateli (napˇr. webov´emu prohl´ıˇzeˇci) je vr´acena v´ ysledn´a odpovˇed’ v urˇcit´em form´atu (napˇr. HTML, JSON, XML). K´od jazyka PHP se vkl´ad´a pˇr´ımo do HTML dokumentu, kde mus´ı b´ yt oddˇelen od ostatn´ıch HTML prvk˚ u pomoc´ı znaˇcek nebo . Jazyk PHP podporuje ˇradu knihoven – pro pˇr´ıstup do datab´aze, pro zpracov´an´ı textu, grafiky apod. Podporuje tak´e ˇradu internetov´ ych protokol˚ u – HTTP, SMTP, POP3, FTP apod., protokol http vyuˇz´ıv´a ke komunikaci mezi webov´ ym serverem a prohl´ıˇzeˇcem. Mezi v´ yhody jazyka PHP bychom mohli zaˇradit nez´avislost na platformˇe, existenci velk´eho mnoˇzstv´ı funkc´ı a podporu mnoha datab´azov´ ych syst´em˚ u (napˇr. MySQL, Oracle, ODBC, MSSQL), je t´emˇeˇr standardem v hostingov´ ych sluˇzb´ach apod. [7][8] 5.1.4
Smarty
ˇ Smarty je ˇsablonovac´ı syst´em pro jazyk PHP. Sablonovac´ ı syst´em (emplating engine) slouˇz´ı k oddˇelen´ı aplikaˇcn´ı (samotn´ y k´od PHP) a prezentaˇcn´ı (klasick´e HTML) logiky aplikace. Syst´em vytvoˇrili Andrei Zmievski a Monte Orte a byl uvolnˇen pod licenc´ı GNU Lesser General Public License (LGPL). Hlavn´ı v´ yhody pouˇzit´ı ˇsablon jsou: • Grafik m˚ uˇze pracovat na aplikaci t´emˇeˇr nez´avisle na v´ yvoj´aˇri. Nen´ı nutn´e, aby byl z´aroveˇ n zdatn´ ym program´atorem, protoˇze syntaxe pouˇz´ıvan´a v ˇsablonovac´ıch syst´emech, b´ yv´a obvykle jednoduˇsˇs´ı neˇz syntaxe programovac´ıho jazyka, kter´ y pouˇz´ıv´a v´ yvoj´aˇr. 62
• Sniˇzuje redundanci k´odu a komplikovanost u ´drˇzby, kter´a by mohla vzniknout, pokud bychom chtˇeli ˇc´ast k´odu modifikovat pro v´ıce si podobn´ ych, ale z´aroveˇ n r˚ uzn´ ych pouˇzit´ı (napˇr. generov´an´ı dat pro tisk, web, zpr´avy elektronick´e poˇcty apod.). [7] Mezi pˇrednosti syst´emu Smarty patˇr´ı moˇznost pouˇzit´ı ˇr´ıd´ıc´ıch struktur, cykl˚ u, pr˚ uchod v´ıcerozmˇern´ ymi poli apod. Dalˇs´ı v´ yhodou tohoto syst´emu je jeho rychlost, kter´e dosahuje d´ıky tomu, ˇze jednotliv´e ˇsablony kompiluje a vytv´aˇr´ı z nich srovnateln´e skripty PHP, jeˇz se pot´e ukl´adaj´ı do mezipamˇeti a odtud se n´aslednˇe naˇc´ıtaj´ı, pokud nedoˇslo k ˇza´dn´e zmˇenˇe ˇsablony. [8] {$title}
Tady je {$name}. V´ ıtejte v b´ ajeˇ cn´ em svˇ etˇ e Smarty.
Obr´azek 16: N´avrhov´a ˇsablona Smarty (welcome.tpl). [7, str. 390] assign(\name", \Jason Gilmore"); $smarty->assign(\title", \ˇ Sablonovac´ ı system Smarty!"); //z´ ısk´ a a vyp´ ıˇ se ˇ sablonu $smarty->display(\welcome.tpl"); ?>
V´ yˇse je vidˇet jednoduch´ y pˇr´ıklad ˇsablony, kter´a obsahuje dvˇe promˇenn´e - $title a $name. Promˇenn´e jsou uzavˇreny do sloˇzen´ ych z´avorek, kter´e funguj´ı v syst´emu Smarty jako oddˇelovaˇce a upozorˇ nuj´ı syst´em, ˇze m´a s obsahem uvnitˇr d´ale pracovat. V zobrazen´em pˇr´ıkladu se tyto promˇenn´e nahrad´ı skuteˇcn´ ymi hodnotami, coˇz je pouze jedna ze z´akladn´ıch moˇznost´ı vyuˇzit´ı syst´emu Smarty. Pod n´avrhovou ˇsablonou je zobrazena aplikaˇcn´ı logika ˇsablony, kde jsou uvedeny hodnoty, kter´e se budou dosazovat za v´ yˇse zm´ınˇen´e promˇenn´e. [7] 5.1.5
MySQL
MySQL (My Structured Query Language) je relaˇcn´ı datab´azov´ y syst´em. MySQL pˇredstavuje jednu z nejrozˇs´ıˇrenˇejˇs´ıch multiplatformn´ıch datab´az´ı, jeˇz povoluje v´ıceuˇzivatelsk´ y pˇr´ıstup a pˇr´ıstup k dat˚ um je realizov´an prostˇrednictv´ım jazyka SQL (Structured Query Language). Syst´em je vyv´ıjen spoleˇcnost´ı Oracle a je nab´ızen pod dvˇema licencemi – GNU General Public License a pod komerˇcn´ı licenc´ı. Jako open source nese n´azev MySQL Community Server a komerˇcn´ı verze nese oznaˇcen´ı MySQL Enterprise Server. Placen´a verze obsahuje nav´ıc pˇridan´e nˇekter´e aplikace a sluˇzby. Mezi v´ yhody tohoto syst´emu m˚ uˇzeme uv´est: cenu, stabilitu, jednoduchost, funkˇcn´ı v´ ybavu a modul´arnost. [7] 5.1.6
JavaScript
JavaScript je skriptovac´ı jazyk, kter´ y je urˇcen pro zpracov´an´ı dat na stranˇe klienta a interakci s webov´ ymi str´ankami. Jazyk vyvinula v roce 1995 spoleˇcnost Netscape. JavaScript je nejˇcastˇeji pouˇz´ıv´an pro tvorbu dynamick´eho webu. Tento jazyk se skl´ad´a ze tˇr´ı hlavn´ıch ˇc´ast´ı: • j´adra (ECMAScript) – poskytuje z´akladn´ı funkˇcn´ı prvky, – jazyk ECMAScript je definov´an ve standardu ECMA – 262, • objektov´ y model dokumentu (DOM – Document Object Model)
64
– je urˇcen pro pr´aci s obsahem webov´e str´anky, – umoˇzn ˇuje mˇenit obsah str´anky, aniˇz by bylo potˇreba ji nechat znovu celou naˇc´ıst, – model byl standardizov´an asociac´ı W3C, • objektov´ y model prohl´ıˇzeˇce (BOM – Browser Object Model) – slouˇz´ı k interakci s prohl´ıˇzeˇcem, – jedin´a ˇca´st jazyka, kter´a nen´ı standardizovan´a. [9] K´od napsan´ y v JavaScriptu se naz´ yv´a skript. V HTML k´odu vytvoˇr´ıme odkaz na dan´ y skript a str´anka si samotn´ y JavaScript sama st´ahne. Soubory obsahuj´ıc´ı JavaScript mus´ı m´ıt pˇr´ıponu .js. V dneˇsn´ı dobˇe je podporov´an snad vˇsemi pˇredn´ımi webov´ ymi prohl´ıˇzeˇci (Internet Explorer, Firefox, Chrome, Opera a Safari), i kdyˇz v r˚ uzn´em rozsahu. [9] 5.1.7
MathJax
MathJax je javascriptov´a knihovna pro zobrazov´an´ı matematick´ ych symbol˚ u na internetov´ ych str´ank´ach vyuˇz´ıvaj´ıc´ı notaci LaTeXu, MathML nebo AsciiMath. Jedn´a se o multiplatformn´ı a otevˇren´ y software. Vznikl z dˇr´ıvˇejˇs´ı javascriptov´eho syst´emu jsMath, kter´ y vyvinuly spoleˇcnosti American Mathematical Society (AMS), Design Science a Society for Industrial and Applied Mathematics (SIAM). V roce 2009 vytvoˇrily tyto spoleˇcnosti MathJax Consorcium, jenˇz se skl´ad´a z ˇrady odborn´ık˚ u, spoleˇcnost´ı a je podporov´ano ˇradou sponzor˚ u. Pro vyuˇz´ıv´an´ı MathJaxu nen´ı nutno instalovat ˇz´adn´e pluginy. Jedin´e co je vyˇzadov´ano je podpora JavaScriptu v prohl´ıˇzeˇci. V souˇcasn´e dobˇe MathJax podporuj´ı vˇsechny pˇredn´ıch webov´e prohl´ıˇzeˇce (Internet Explorer, Firefox, Chrome, Opera a Safari), mobiln´ı zaˇr´ızen´ı a tablety. [11] K zobrazen´ı matematick´eho textu a symbol˚ u pouˇz´ıv´a MathJax webov´a p´ısma. V pˇr´ıpadˇe, ˇze tato sluˇzba nen´ı prohl´ıˇzeˇcem podporov´ana, hled´a MathJax pouˇziteln´a p´ısma v uˇzivatelovˇe syst´emu. Pokud se nepodaˇr´ı naj´ıt vhodn´e p´ısmo ani t´ımto zp˚ usobem, zobraz´ı MathJax matematick´e symboly jako obr´azek. 65
Pˇri pouˇz´ıv´an´ı MathJaxu se tv˚ urce webu nemus´ı ob´avat rozbit´ı vhledu str´anky, nebot’ MathJax vyuˇz´ıv´a modern´ı CSS a webov´e fonty, kter´e umoˇzn ˇuj´ı zobrazit matematick´ y text ve stejn´em mˇeˇr´ıtku jako okoln´ı text, a to i pˇri zvˇetˇsov´an´ı str´anky. Velkou pˇrednost´ı t´eto knihovny je, ˇze takto zobrazen´e p´ısmo rozpoznaj´ı i ˇctec´ı zaˇr´ızen´ı zrakovˇe postiˇzen´ ych a lze ho zvˇetˇsovat pomoc´ı bˇeˇzn´ ych n´astroj˚ u prohl´ıˇzeˇc˚ u bez u ´jmy na kvalitˇe zobrazen´ı. Dalˇs´ı v´ yhodou je moˇznost bˇeˇznˇe kop´ırovat matematick´ y text do textov´ ych dokument˚ u (napˇr. MS Word), LaTeX dokument˚ u, matematick´ ych program˚ u (napˇr. Maple, Mathematica) apod. D´ıky tomu, ˇze jsou matematick´e prvky s MathJax zaloˇzeny v´ıce na principu textu neˇz na obr´azku, nebr´an´ı nic vyhled´avaˇc˚ um k jejich nalezen´ı. [11] Ukaˇzme si jednoduch´ y pˇr´ıklad - z´apis vztahu pro binomick´e rozdˇelen´ı pomoc´ı jazyka LaTex. Pro spr´avn´e zobrazen´ı MathJaxem je potˇreba, aby byl pˇr´ıkaz uzavˇren mezi symboly \ [ a \] nebo \ ( a \). Na obr´azku n´ıˇze vid´ıme, jak si s n´asleduj´ıc´ım vzorcem poradil MathJax. \[P(E) = {n \choose k} p^k (1-p)^{ n-k}\] !
n k P (E) = p (1 − p)n−k k Obr´azek 18: Zobrazen´ı vzorce pro binomick´e rozdˇelen´ı pomoc´ı MathJaxu. (zdroj: http://www.mathjax.org/demos/tex-samples/)
5.2
Jednotkov´ e testov´ an´ı
Jednotkov´e testy slouˇz´ı k ovˇeˇren´ı, zda jednotliv´e komponenty (jednotky) programu dˇelaj´ı pˇresnˇe to, co se od nich oˇcek´av´a. Jednotky pˇredstavuj´ı nejmenˇs´ı testovatelnou ˇca´st aplikace. V tomto pˇr´ıpadˇe m´ame na mysli tˇr´ıdy a metody, kter´e je potˇreba testovat izolovanˇe od dalˇs´ıch ˇc´ast´ı k´odu ˇci syst´em˚ u, tj. nemˇely bychom pˇristupovat k Internetu, pouˇz´ıvat datab´azi, komunikovat s dalˇs´ımi tˇr´ıdami apod. Jednotkov´e testy lze vyuˇz´ıvat jiˇz v poˇc´atc´ıch v´ yvoje aplikace a pr˚ ubˇeˇznˇe se k nim vracet. Je zˇrejm´e, ˇze ani pomoc´ı opakovan´eho testov´an´ı nelze odhalit veˇsker´e chyby, obzvl´aˇstˇe nˇekter´e integraˇcn´ı chyby nebo ˇsirˇs´ı syst´emov´e chyby. Pro snadnˇejˇs´ı pr´aci s tˇemito testy se pouˇz´ıv´a tzv. xUnit Framework. V aplikac´ıch vyv´ıjen´ ych v jazyce 66
PHP se pouˇz´ıv´a framework PHPUnit, kter´ y si podrobnˇeji pop´ıˇseme v n´asleduj´ıc´ı podkapitole. [20] 5.2.1
PHPUnit
PHPUnit je framework pro jednotkov´e testov´an´ı, kter´ y je dostupn´ y zdarma z repozit´aˇre PEAR. Framework poch´az´ı z d´ılny Sebastiana Bergmanna. Kaˇzd´ y test pˇredstavuje samostatnou tˇr´ıdu, jeˇz dˇed´ı od PHPUnit Framework TestCase. Kaˇzd´a z tˇechto tˇr´ıd obsahuje metody (testovac´ı pˇr´ıpady) urˇcen´e k testov´an´ı dan´ ych jednotek. Pokud budeme cht´ıt dan´ y test spustit, staˇc´ı zavolat pˇr´ıkaz phpunit a jako parametr uv´est cestu ke sloˇzce s testy. Je dobr´ ym zvykem v n´azvu metody uv´adˇet prefix test“, coˇz umoˇzn´ı, aby si ” tyto metody PHPUnit s´am zavolal. Dalˇs´ı zp˚ usob, jak m˚ uˇzeme metodu oznaˇcit, je pouˇzit´ım anotace @test. D´ale je vhodn´e za slovo test“ uv´est n´azev odpov´ıdaj´ıc´ı ” metody, jeˇz je testov´ana. Naopak u testovac´ı tˇr´ıdy je dobr´ ym zvykem slovo test“ ” ps´at v n´azvu jako postfix. Tento tvar pojmenov´an´ı opˇet zajist´ı, ˇze si je PHPUnit s´am vyhled´a. Testovac´ı tˇr´ıda se oznaˇcuje jako sada test˚ u a testovac´ı pˇr´ıpad (metoda) se oznaˇcuje pojmem test case“. [8] ” Aplikace VypoˇctiTo byla otestov´ana z hlediska funkˇcnosti automatick´ ymi testy na u ´rovni k´odu pomoc´ı frameworku PHPUnit ve v´ yvojov´em prostˇred´ı PhpStorm.
5.3
Verzov´ an´ı
Syst´em spr´avy verz´ı (zkr´acenˇe VCS z anglick´eho origin´alu Version Control System) je vyuˇz´ıv´an v´ yvoj´aˇri ke spr´avˇe zmˇen, respektive obsahu. Pˇri v´ yvoji urˇcit´eho projektu je vhodn´e m´ıt k dispozici pˇredeˇsl´e verze, jestliˇze by napˇr´ıklad souˇcasn´a verze projektu nevedla ke zd´arn´emu v´ ysledku. Scott Chacon ([21], str. 17) definuje spr´avu verz´ı n´asledovnˇe: Spr´ava verz´ı je syst´em, kter´y zaznamen´av´a zmˇeny souboru nebo sady soubor˚ u ” v pr˚ ubˇehu ˇcasu, a uˇzivatel tak m˚ uˇze kdykoli obnovit jeho/jejich konkr´etn´ı verzi (tzv. verzov´an´ı).“ Rozliˇsujeme n´asleduj´ıc´ı tˇri typy syst´em˚ u spr´avy verz´ı: [21]
67
• lok´aln´ı – nejjednoduˇsˇs´ı zp˚ usob je vytvoˇrit kopii soubor˚ u v jin´em adres´aˇri, – pokroˇcilejˇs´ı zp˚ usob je pouˇzit´ı nˇekter´eho lok´aln´ıho syst´emu VCS s jednoduchou datab´az´ı, ve kter´e jsou uloˇzeny jednotliv´e verze soubor˚ u, – napˇr. n´astroj rcs, • centralizovan´e – zkr´acenˇe CVCS z anglick´eho origin´alu Centralized Version Control System, – syst´em je vhodn´ y pro projekty, na nichˇz se pod´ıl´ı v´ıce osob (kaˇzd´ y m´a pˇrehled o pr´aci ostatn´ıch v t´ ymu), – data (verzovan´e soubory) jsou uloˇzena pouze na centr´aln´ım serveru, jejˇz sd´ılej´ı v´ yvoj´aˇri (nelze tedy pracovat jinak neˇz online), – uˇzivatel si st´ahne pouze nejnovˇejˇs´ı verzi souboru (tzv. sn´ımku), – dojde-li k v´ ypadku serveru, jdou vˇsichni uˇzivatel´e odˇr´ıznuti od centr´aln´ı datab´aze, v nejhorˇs´ım pˇr´ıpadˇe m˚ uˇze doj´ıt ke ztr´atˇe dat, – vzhledem ke sd´ılen´ı dat mezi v´ıce osob doch´az´ı ke zpomalen´ı cel´eho syst´emu, – je potˇreba pˇridˇelit pr´ava z´apisu do centr´aln´ıho repozit´aˇre, – napˇr. n´astroje CVS, Subversion, Perforce, • distribuovan´e – zkr´acenˇe DVCS z anglick´eho origin´alu Distributed Version Control System, – i tento syst´em je vhodn´ y pro projekty ˇreˇsen´e v t´ ymech, – oproti centralizovan´emu syst´emu spr´avy verz´ı si uˇzivatel´e stahuj´ı kompletn´ı kopii datab´aze a syst´em je takto chr´anˇen pˇred nechtˇenou ztr´atou dat napˇr. kv˚ uli v´ ypadku,
68
– spolupracuj´ı i s jin´ ymi vzd´alen´ ymi repozit´aˇri, – napˇr. n´astroje Git, Mercurial, Bazaar, Darcs. V n´asleduj´ıc´ı kapitole si bl´ıˇze pop´ıˇseme zˇrejmˇe nejzn´amˇejˇs´ı distribuovan´ y syst´em spr´avy verz´ı – Git, jenˇz byl pouˇzit pˇri tvorbˇe aplikace VypoˇctiTo, s grafickou nadstavbou SmartGit12 . 5.3.1
Git
N´astroj Git vytvoˇrila komunita v´ yvoj´aˇr˚ u Linuxu (pˇrev´aˇznˇe Linus Torvalds) v roce 2005 kv˚ uli licenˇcn´ım neshod´am u jin´eho verzovac´ıho syst´emu BitKeeper. V´ yvoj´aˇri pouˇz´ıvali BitKeeper ke spr´avˇe v´ yvoje j´adra Linuxu. Proto musela komunita Linuxu vytvoˇrit takov´ y DVCS syst´em, kter´ y by byl velmi rychl´ y, mˇel jednoduch´e ovl´ad´an´ı, umˇel spravovat i rozs´ahl´e projekty apod. Git pracuje na jin´em principu neˇz ostatn´ı syst´emy VCS. VCS syst´emy obvykle uchov´avaj´ı z´akladn´ı verzi soubor˚ u a seznam zmˇen, jeˇz byly provedeny za dan´ y ˇcas. Oproti tomu Git uchov´av´a kromˇe z´akladn´ı verze soubor˚ u tak´e i novˇe zmˇenˇen´e soubory, z nichˇz vytvoˇr´ı tzv. sn´ımek. Pokud se soubor oproti pˇredchoz´ı verzi nijak nezmˇenil, uloˇz´ı Git kv˚ uli u ´spoˇre m´ısta pouze referenci na origin´aln´ı soubor. Soubory se uchov´avaj´ı v komprimovan´e podobˇe. D´ıky tomu, ˇze uˇzivatel m´a na lok´aln´ım disku vˇsechny potˇrebn´e soubory, m˚ uˇze pracovat kdykoli a kdekoli, aniˇz by bylo potˇreba pˇripojen´ı k s´ıti. Uˇzivatel pracuje offline a jakmile se pˇripoj´ı k s´ıti, aktualizuj´ı se soubory v repozit´aˇri. Z tohoto d˚ uvodu je syst´em Git i velmi rychl´ y. Zobrazuje historii projektu nebo prov´ad´ı lok´aln´ı v´ ypoˇcty t´emˇeˇr neprodlenˇe. [21]
12
http://www.syntevo.com/smartgithg/
69
6
Ovˇ eˇ ren´ı v praxi
Vytvoˇren´a aplikace VypoˇctiTo byla vyzkouˇsena na dvou z´akladn´ıch ˇskol´ach a dvou osmilet´ ych gymn´azi´ıch v hodin´ach matematiky. C´ılem testov´an´ı bylo zjistit, zda jsou webov´e str´anky plnˇe funkˇcn´ı, zda je jejich ovl´ad´an´ı pro ˇza´ky i uˇcitele srozumiteln´e a intuitivn´ı.
6.1
Gymn´ azium Strakonice
Ovˇeˇren´ı webov´ ych str´anek prob´ıhalo na osmilet´em gymn´aziu ve Strakonic´ıch prostˇrednictv´ım uˇcitelky matematiky Mgr. Petry Babkov´e ve dvou vyuˇcovac´ıch hodin´ach matematiky, konkr´etnˇe v sekundˇe. Pan´ı uˇcitelka chtˇela aplikaci vyuˇz´ıt k celkov´emu opakov´an´ı uˇciva sedm´eho roˇcn´ıku, tj. procenta, zlomky, pomˇer, pˇr´ım´a a nepˇr´ım´a u ´mˇernost, obsah a obvod obrazc˚ u, objem a povrh hranol˚ u. Vzhledem k ˇcasov´emu rozmez´ı, kter´e mohlo b´ yt na vyzkouˇsen´ı uvolnˇeno, pan´ı uˇcitelka nakonec vybrala dvˇe t´emata – procenta, obvody a obsahy – kaˇzd´e na jednu vyuˇcovac´ı hodinu. Pan´ı uˇcitelka zajistila na obˇe potˇrebn´e hodiny poˇc´ıtaˇcovou uˇcebnu. Kv˚ uli vyˇsˇs´ımu poˇctu ˇza´k˚ u neˇz je poˇc´ıtaˇc˚ u v uˇcebnˇe, vˇsak sedˇeli ˇza´ci po dvojic´ıch. V u ´vodu hodiny byli ˇza´ci nejprve sezn´ameni s c´ılem hodiny a t´ematem, kter´e si na webov´ ych ˇ ak˚ str´ank´ach maj´ı zvolit. Z´ um bylo umoˇznˇeno, aby si zvolili, zda si pˇred zah´ajen´ım pr´ace chtˇej´ı vytvoˇrit sv˚ uj uˇzivatelsk´ yu ´ˇcet nebo pˇr´ımo poˇc´ıtat. Z celkov´eho poˇctu tˇrin´acti dvojic si sv˚ uj u ´ˇcet vytvoˇrili ˇctyˇri. Pro prvn´ı vyuˇcovac´ı hodinu byla vybr´ana kategorie Procenta a pro druhou hodinu kategorie Obsahy a obvody obrazc˚ u. Pan´ı uˇcitelka pˇri hodin´ach ˇza´ky obch´azela a pozorovala, jak se jim daˇr´ı spr´avnˇe poˇc´ıtat ˇ aci mˇeli urˇcen poˇcet pˇr´ıklad˚ zadan´e u ´lohy r˚ uzn´e obt´ıˇznosti. Z´ u a obt´ıˇznost (stˇredn´ı), kterou maj´ı poˇc´ıtat.
6.2
ˇ Gymn´ azium J. V. Jirs´ıka v Cesk´ ych Budˇ ejovic´ıch
ˇ ych Budˇejovic´ıch probˇehlo ve Nasazen´ı aplikace na Gymn´aziu J. V. Jirs´ıka v Cesk´ spolupr´aci s uˇcitelem matematiky Mgr. Petrem Jan´aˇckem ve v´ yuce matematiky tˇr´ıdy tercie. Testov´an´ı prob´ıhalo v r´amci jedn´e vyuˇcovac´ı hodiny a pˇr´ıtomno bylo 27 ˇza´k˚ u. Pan uˇcitel umoˇznil ˇza´k˚ um, aby si sami vybrali t´ema, kter´e prob´ırali v letoˇsn´ım roce 70
ˇ aci zvolili kategorii Povrchy a objemy a je mezi nab´ızen´ ymi patn´acti kategoriemi. Z´ tˇeles. Vyuˇcovac´ı hodina neprob´ıhala v poˇc´ıtaˇcov´e uˇcebnˇe, ale v klasick´e uˇcebnˇe a pro ˇ aci si k poˇc´ıt´an´ı sami zvolili zobrazen´ı aplikace byla vyuˇzita interaktivn´ı tabule. Z´ nejtˇeˇzˇs´ı obt´ıˇznost. Vˇsichni ˇz´aci pracovali samostatnˇe v lavic´ıch na jednom stejn´em zad´an´ı pˇr´ıkladu, pot´e pan uˇcitel vybral jednoho ˇza´ka, aby ˇsel k tabuli pˇr´ıklad vyˇreˇsit. Pˇred potvrzen´ım odpovˇedi mˇeli ˇza´ci ˇr´ıkat, zda se spoluˇza´kov´ ym v´ ysledkem souhlas´ı ˇci nikoli, a aˇz pot´e teprve vybran´ y ˇza´k dal svou odpovˇed’ zkontrolovat. V pˇr´ıpadˇe ne´ uspˇechu mˇel ˇz´ak popsat, jak´ ym zp˚ usobem postupoval, a uˇcitel ho upozornil na chybu, kter´e se ve v´ ypoˇctu dopustil.
6.3
´ ı Z´ akladn´ı ˇ skola 9.kvˇ etna v Sezimovˇ e Ust´
´ ı v hoTestov´an´ı aplikace prob´ıhalo na Z´akladn´ı ˇskole 9. kvˇetna v Sezimovˇe Ust´ din´ach matematiky tˇr´ıdy 6. A za veden´ı pan´ı uˇcitelky Mgr. Andreji Smetanov´e. K vyzkouˇsen´ı aplikace byla vyhrazena jedna vyuˇcovac´ı hodina, kter´e se u ´ˇcastnilo 18 ˇza´k˚ u. Pan´ı uˇcitelka z nab´ızen´ ych kategori´ı zvolila Dˇelitelnost pˇrirozen´ych ˇc´ısel, kterou prob´ırali v ned´avn´e dobˇe a chtˇela ji takto zopakovat. Hodina prob´ıhala za veden´ı pan´ı uˇcitelky, kter´a str´anky prom´ıtala ˇz´ak˚ um pˇres dataprojektor. Pˇri navolen´e obt´ıˇznosti stˇredn´ı poˇc´ıtali ˇza´ci zobrazen´e pˇr´ıklady samostatnˇe, pan´ı uˇcitelce nahlaˇsovali z´avˇery, ke kter´ ym doˇsli, a pan´ı uˇcitelka zadala do syst´emu nejˇcastˇeji se opakuj´ıc´ı ˇreˇsen´ı. Pˇr´ıklady z obt´ıˇznosti tˇeˇzk´a jiˇz poˇc´ıtali vˇsichni dohromady za pomoci pan´ı uˇcitelky, kter´a je usmˇerˇ novala ke spr´avn´emu ˇreˇsen´ı.
6.4
Z´ akladn´ı ˇ skola a mateˇ rsk´ aˇ skola Domaˇ zlice
Pan´ı uˇcitelka Mgr. Hana Brad´aˇcov´a umoˇznila ovˇeˇren´ı aplikace na Z´akladn´ı ˇskole a mateˇrsk´e ˇskole v Domaˇzlic´ıch, jeˇz probˇehlo ve dvou tˇr´ıd´ach – 6. B a 7. A. V obou tˇr´ıd´ach probˇehlo testov´an´ı v r´amci jedn´e vyuˇcovac´ı hodiny. V ˇsest´e tˇr´ıdˇe se ho u ´ˇcastnilo 20 ˇza´k˚ u a v sedm´e 24 ˇza´k˚ u. V ˇsest´e tˇr´ıdˇe poˇc´ıtali pˇr´ıklady z kategorie Dˇelitelnost pˇrirozen´ych ˇc´ısel a v sedm´e tˇr´ıdˇe vybrali kategorii Pomˇer, pˇr´ım´ a a nepˇr´ım´a u ´mˇernost.
71
Ve tˇr´ıdˇe 6. B pan´ı uˇcitelka zorganizovala hodinu tak, ˇze ˇza´k˚ um zobrazovala aplikace pˇres dataprojektor. Pan´ı uˇcitelka vˇzdy vybrala jednoho ˇza´ka, kter´ y mˇel nahlas ˇr´ıkat, jak by dan´ y pˇr´ıklad ˇreˇsil. Pot´e pan´ı uˇcitelka zadala v´ ysledek do syst´emu a odeslala ke kontrole. Tˇr´ıda poˇc´ıtala vˇetˇsinu pˇr´ıklad˚ u z obt´ıˇznosti lehk´a a v z´avˇeru hodiny nˇekolik pˇr´ıklad˚ u z obt´ıˇznosti stˇredn´ı. V sedm´em roˇcn´ıku pouˇzila pan´ı uˇcitelka pro zobrazen´ı webov´e aplikace opˇet ˇ aci pracovali samostatnˇe v lavic´ıch a do syst´emu zapisoval v´ dataprojektor. Z´ ysledek ten ˇz´ak, kter´ y dan´ y pˇr´ıklad vypoˇc´ıtal jako prvn´ı. Pan´ı uˇcitelka nejprve v u ´vodu hodiny zvolila nˇekolik pˇr´ıklad˚ u z lehk´e obt´ıˇznosti, aby si ˇz´aci uˇcivo pˇripomenuli, pot´e pokraˇcovali v poˇc´ıt´an´ı pˇr´ıklad˚ u z obt´ıˇznosti stˇredn´ı.
6.5
Shrnut´ı
Pˇri testov´an´ı nebyly odhaleny ˇz´adn´e z´avaˇzn´e nedostatky, reakce syst´emu byla vˇzdy odpov´ıdaj´ıc´ı a t´emˇer okamˇzit´a. Vˇsichni u ´ˇcastn´ıci hodnotili testov´an´ı aplikace vesmˇes stejnˇe – pouˇzit´ı str´anek v hodinˇe bylo zaj´ımav´e a netradiˇcn´ı, nˇekteˇr´ı ˇza´ci se snaˇzili i v´ıce poˇc´ıtat, v syst´emu se rychle zorientovali a nenastal ˇz´adn´ y z´avaˇzn´ y probl´em. Uˇcitel´e mˇeli nˇekolik podnˇetn´ ych pˇripom´ınek, kter´e byly pˇr´ınosem v m´e dalˇs´ı pr´aci. Napˇr´ıklad vyuˇcuj´ıc´ı kladnˇe hodnotili rozdˇelen´ı pˇr´ıklad˚ u do kategori´ı a n´aslednˇe jeˇstˇe do r˚ uzn´ ych u ´rovn´ı obt´ıˇznosti, jenˇz umoˇzn ˇuje vyuˇzit´ı webov´ ych str´anek v r˚ uzn´ ych f´az´ıch v´ ykladu. Naopak nˇekteˇr´ı z nich jako nev´ yhodu uvedli nutnost pouˇzit´ı poˇc´ıtaˇc˚ u, coˇz nen´ı ve v´ yuce vˇzdy moˇzn´e, a proto vid´ı vˇetˇs´ı potenci´al t´eto aplikace ve vyuˇz´ıv´an´ı pro dom´ac´ı pˇr´ıpravu ˇza´k˚ u ˇci pro zad´av´an´ı dom´ac´ıch u ´kol˚ u. Nˇekteˇr´ı ˇza´ci uvedli, ˇze se na str´anky chtˇej´ı doma znovu pod´ıvat a vyzkouˇset si i jin´e kategorie.
72
7
Z´ avˇ er
C´ılem t´eto pr´ace bylo vytvoˇrit interaktivn´ı webov´e str´anky pro procviˇcov´an´ı a testov´an´ı ˇza´k˚ u z matematiky na u ´rovni z´akladn´ı ˇskoly z vybran´ ych parti´ı matematiky. Z´amˇerem bylo vytvoˇrit str´anky, kter´e ˇz´aky zaujmou, budou jednoduch´e na ovl´ad´an´ı a budou obsahovat veˇsker´e informace potˇrebn´e k jejich pouˇz´ıv´an´ı. Domn´ıv´am se, ˇze tohoto c´ıle bylo zd´arnˇe dosaˇzeno. Webov´e str´anky jsou dostupn´e na internetov´e adrese www.vypoctito.cz. Souˇc´ast´ı pr´ace bylo tak´e pilotn´ı ovˇeˇren´ı na nˇekolika z´akladn´ıch ˇskol´ach, respektive v´ıcelet´ ych gymn´azi´ıch. Z tohoto d˚ uvodu obsahovaly str´anky jiˇz v t´eto f´azi stovky pˇr´ıklad˚ u rozdˇelen´ ych do pˇr´ısluˇsn´ ych kategori´ı a obt´ıˇznost´ı. Pˇr´ıklady, kter´e jsou pˇrevzaty z literatury, jsou ˇr´adnˇe citov´any kv˚ uli zachov´an´ı autorsk´ ych pr´av. Obr´azky vloˇzen´e u nˇekter´ ych zad´an´ı byly vytvoˇreny v programu GeoGebra ˇci v Cabri 3D v2. Aplikace je urˇcena pro ˇz´aky a jejich uˇcitele, lze vˇsak pˇredpokl´adat, ˇze jej´ımi prim´arn´ımi uˇzivateli budou ˇza´ci, kteˇr´ı ji mohou pouˇz´ıvat napˇr´ıklad pro pˇr´ıpravu na pˇrij´ımac´ı zkouˇsky na stˇredn´ı ˇskolu. Relevantnost a spr´avnost vkl´adan´ ych dat uˇciteli bude i nad´ale kontrolov´ana administr´atorem. Pˇri tvorbˇe aplikace nebylo opomenuto ani zajiˇstˇen´ı jej´ıho zabezpeˇcen´ı proti r˚ uzn´ ym u ´tok˚ um (at’ jednotliv´ ych u ´ˇct˚ u uˇzivatel˚ u, tak cel´e struktury webu). D´ale struktura webu byla navrˇzena tak, aby bylo moˇzn´e jej´ı dalˇs´ı rozˇs´ıˇren´ı. N´amˇetem pro dalˇs´ı rozˇs´ıˇren´ı webov´ ych str´anek VypoˇctiTo by mohlo b´ yt napˇr´ıklad nav´ yˇsen´ı z patn´acti kategori´ı o dalˇs´ı oblasti matematiky (napˇr. r˚ uzn´e matematick´e hlavolamy), pˇrid´an´ım podkategori´ı do jednotliv´ ych t´emat ˇci propojen´ı s komplement´arn´ımi projekty.
73
Pouˇ zit´ a literatura a zdroje ´ Hana a Miroslav MULLER. ¨ [1] KANISOVA, UML srozumitelnˇe. 2. aktualiz. vyd. Brno, 2006, 176 s. ISBN 80-251-1083-4. [2] SCHMULLER, Joseph. Mysl´ıme v jazyku UML. Vyd. 1. Grada, 2001, 360 s. ISBN 80-247-0029-8. [3] ARLOW, Jim a Ila NEUSTADT. UML 2 a unifikovan´y proces v´yvoje aplikac´ı: objektovˇe orientovan´a anal´yza a n´avrh prakticky. Vyd. 1. Pˇreklad Bogdan Kiszka. Brno: Computer Press, 2011, 567 s. ISBN 978-80-251-1503-9. [4] JONES, Meilir. Z´aklady objektovˇe orientovan´eho n´avrhu v UML. Vyd. 1. Praha: Grada, 2001, 367 s. ISBN 80-247-0210-X. c 2000 – 2014 [5] BEACH, Matt. Wire Frame Your Site Article. Sitepoint [online]. [cit. 2014-04-22]. Dostupn´e z: http://www.sitepoint.com/wire-frame-your-site/ ´ Pavel. Jak vytvoˇrit spr´avn´ [6] NOVOTNY, y wireframe. Web consultants c 2008 - 2013 [cit. 2014-04-22]. Dostupn´e z:http://www.web[online]. consultants.cz/jak-vytvorit-spravny-wireframe/ [7] GILMORE, W. Velk´a kniha PHP 5 a MySQL: kompendium znalost´ı pro zaˇc´ateˇcn´ıky i profesion´aly. Nov´e, 3. vyd. Pˇreklad Jan Pokorn´ y. Brno: Zoner Press, 2011, 736 s. Encyklopedie Zoner Press. ISBN 978-80-7413-163-9. [8] LECKY-THOMPSON, Ed a Steven D NOWICKI. PHP 6: programujeme profesion´alnˇe. Vyd. 1. Pˇreklad Ondˇrej Gibl. Brno: Computer Press, 2010, 718 s. Programujeme profesion´alnˇe. ISBN 978-80-251-3127-5. [9] ZAKAS, Nicholas C. JavaScript pro webov´e v´yvoj´aˇre: programujeme profesion´alnˇe. Vyd. 1. Pˇreklad Luk´aˇs Krejˇc´ı. Brno: Computer Press, 2009, 832 s. ISBN 978-80-251-2509-0. [10] MEYER, Eric A. Eric Meyer o CSS: kompletn´ı pr˚ uvodce. Vyd. 1. Pˇreklad Jan Pokorn´ y. Brno: Zoner Press, 2007, 560 s. ISBN 978-80-86815-64-0.
74
c 2011 [cit. 2014-04-23]. Do[11] MathJax: Beautiful math in all browsers [online]. stupn´e z: http://www.mathjax.org/ [12] HTML4 and HTML5 Tutorial. W3Schools [online]. 1999-2014 [cit. 2014-05-03]. Dostupn´e z: http://www.w3schools.com/html/default.asp ´ c 2005-2014 [cit. 2014[13] Ukl´ad´an´ı hesel. VRANA, Jakub. PHP triky [online]. 04-30]. Dostupn´e z: http://php.vrana.cz/ukladani-hesel.php [14] Crypto-World: Informaˇcn´ı seˇsit GCUCMP [online]. 2013 [cit. 2014-04-30]. Dostupn´e z: http://crypto-world.info/casop15/crypto0910 13.pdf [15] .htaccess ter
