Infrmácie prjekte 33. rčník súťaže ZENIT v prgramvaní Krajské kl - zadanie kategórie Web Zadaním prjektu je naprgramvanie maléh realitnéh prtálu pre firmu BestReal pdľa zadania. Realitný prtál bsahuje jednduchú administráciu (väčšinu údajv zadávate priam d MySQL tabuliek) a verejnú časť webu, kde sa prezentujú bjekty z pnuky a t Pnuka (dmv, bytv), Predaj a Prenájm. Dôležitu súčasťu je pdrbné vyhľadávanie v pnukách. Nižšie v zadaní máte ppísané pžiadavky na jedntlivých členv súťažných tímv grafika a prgramátra. Pžiadavky na súťažné práce: Web dizajnéri (grafik aj prgramátr) sú zdpvední za uspriadanie, vzhľad a pužiteľnsť webvých stránk. Ich práca (s pužitím kmbinácie grafických zručnstí a technických znalstí tvrby webvých stránk) zahŕňa: pchpenie cieľv a pžiadaviek klienta, vytvrenie dizajnu, ktrý bude atraktívny pre cieľvéh zákazníka, s lgickým navigačným systémm a s všetkými pžadvanými funkciami, vhdné pužitie call t actin prvku (prvk, ktrý vyzýva klienta na webe nieč urbiť, napr. bjednať). Je vhdné navrhvať web tak, aby pžadvaná akcia (nákup, bjednávka, kntakt) bla dsiahnuteľná na č najmenej kliknutí, štandardne d 3 klikv, napísanie webvých stránk pmcu rôznych prgramvacích jazykv, rzhdnutie tm, ak budú brázky a ďalšie materiály digitálne ptimalizvané a prezentvané na stránke, testvanie funkčnsti stránky v rôznych prehliadačch a na rôznych rzlíšeniach. Prces tvrby výslednej práce pzstáva z: kncepcia/myšlienka, návrh dizajnu, prgramvanie na strane klienta: návrh webvých stránk pmcu HTML, XML, DHTML, JavaScript, XHTML, využitie CSS, ptimalizvanie stránky pre dva rôzne prehliadače (psledné aktualizvané verzie), uprednstnené respnzívne stránky ptimalizvanie aj pre rôzne mbilné zaradenia, ddržiavanie W3C štandardv (http://www.w3.rg), práca s brázkami: vkladanie a úprava brázkv v administračnej časti webu, ptimalizácia brázkv pre web (grafik, aleb na strane servera), prgramvanie na strane servera: ukladanie a načítanie údajv pmcu PHP, MySQL. 1
Ppis súťažnej úlhy Prjekt pzstáva z jednej praktickej úlhy vytvrenie webvej stránky, ktrá má byť dknčená v stanvenm čase. Tát úlha je rzdelená d dvch častí. 1. Grafik A) Dizajn úvdnej stránky B) Firemné lg C) Príprava materiálv 2. Prgramátr A) Implementácia administračnej časti webu Prihlásenie + správa bjektv B) Spracvanie pdkladv d grafika Prevd grafiky d HTML/CSS C) Implementácia verejnej časti webu Obsah webu + zbrazvacia lgika Pdklady k súťažnej práci: K práci máte predpripravené pdklady, ktré môžete, ale nemusíte pužiť. Nie je nutné pužiť všetky infrmácie a pskytnuté médiá. Musíte sa rzhdnúť, ktré z týcht infrmácií a médií sú ptrebné pre dknčenie Vášh prjektu. Môžete tiež vytvriť vlastné brázky a texty tak, aby pdprili Váš dizajn a funkčnsť stránky. Všetky infrmácie zahŕňajúce text, brázky a dkumenty sú pripravené a sú k dispzícii v Vašm priečinku na pracvnej plche. Vyžadvaný bsah stránky: Všetky stránky majú mať rvnaký dizajn/štruktúru, pričm budú bsahvať nasledujúce prvky: Lg aktívny dkaz, ktrý vždy smeruje na úvdnú stránku Hlavné menu Hlavný bsah webu pdľa Vášh pchpenia knceptu/myšlienky Pätu s infrmáciami autrských právach Obsah Hlavnéh menu 1. Úvd úvdná stránka s infrmáciami a najbľúbenejšími bjektmi 2. Pnuka bude bsahvať pmcné menu a zznam bjektv v danej kategórii 3. Dpyt bude bsahvať pmcné menu a zznam bjektv v danej kategórii 4. Prenájm bude bsahvať pmcné menu a zznam bjektv v danej kategórii 5. Vyhľadávanie bude bsahvať vyhľadávací frmulár a bjekty, ktré vyhvujú pdmienkam vyhľadávania 2
Zadanie pre Grafika (celkvý pčet bdv 400) Časť A Dizajn stránky (210 bdv) Musíte vytvriť grafický návrh úvdnej webvej stránky. Návrh bude bsahvať: hlavičku lg a názv prjektu, hlavné menu s jednu aktívnu plžku Pnuka (hver efekt pri prechde myšku) a viditeľným rzbaľvacím menu s pdkategóriami (submenu) danej kategórie (dm, byt,...), pätu stránky s infrmáciami autrch, rzmiestnenie textu a nadpisv, kntaktné infrmácie, krátky infrmačný text, aspň 2 bjekty (dm, byt,...), pričm každý z nich bude bsahvať: názv, krátky ppis, brázk, cenu, tlačidl/dkaz na zbrazenie celej pnuky, zaradenie d hlavnej kategórie (pnuka, dpyt, prenájm), v zdrjvých súbrch bude jasne ddelená časť hlavička, bsah, pätička (napr. budú v samstatnej vrstve, aleb v skupine vrstiev), názv exprtvanéh súbru bude: dizajn.jpg (prípadne.png), názv zdrjvéh súbru bude: dizajn.psd (prípadne.xcf,... pdľa zvlenéh sftvéru). Aby bl mžné hdntiť návrh, musíte vytvriť snímku dizajn.jpg (png) a ulžiť ju d priečinka grafik na pracvnej plche. Zdrjvý súbr dizajn.psd (xcf) tiež ulžte d priečinka grafik na pracvnej plche. V návrhu nemusíte pužiť knkrétne texty a brázky (súvisiace s tému), len je nutné jasne značiť nadpis, brázky, texty a bjekty. Miesta pre animácie (ak ich váš dizajn vyžaduje) môžete nahradiť napríklad šedým bdĺžnikm (miesta pre animácie, nie namiest brázkv a textv!). Návrh treba vytvriť tak, aby ddržiaval kncepciu zameranú na cieľvú skupinu a cieľ webvej stránky. Zákazník v budúcnsti predpkladá pužitie Vášh dizajnu aj na reklamné účely, pret je nutné vytvárať dizajny v vyššm rzlíšení (aspň 300 ppi). Časť B Lg (120 bdv) Musíte vytvriť lg firmy pmcu vektrvej grafiky. Lg bude vytvrené v dvch variáciách: farebné lg, ktré bude pužité na webvých stránkach. Názv exprtvanéh súbru bude: lg.jpg (png). čiern-biele lg (dtiene šedej), ktré sa bude pužívať v rôznych tlačvých dkumentch. 3
Názv exprtvanéh súbru: bude lg_tlac.jpg (png). Názv zdrjvéh súbru bude lg.ai (prípadne svg,... pdľa zvlenéh sftvéru). Jedntlivé snímky a zdrjvý súbr ulžte d priečinka grafik na pracvnej plche. Pzn. : V prípade, že vami navrhnuté lg je už čiern-biele (dtiene šedej), tak vytvrte jeh inverznú kópiu (tčené farby) a tú následne ulžte ak lg_tlac.jpg. Časť C Príprava materiálv grafikm pre prgramátra (70 bdv) Váš prgramátr má veľa práce a pret je dôležité, aby ste pripravili materiály, na ktrých ste pracvali tak, aby ich mhl ihneď pužiť. Pdklady pre webvú stránku: Pdklady pre web stránku: nastrihať jedntlivé sekcie návrhu tak, aby bli pužiteľné pčas tvrby a upraviť veľksti pužitých brázkv (napr. pzadie stránky, tlačidlá, brázky, lg...). Ulžte ich d priečinka grafik/brazky na pracvnej plche, vytvriť dizajn manuál, ktrý bude bsahvať: rezy písma fnty, ktré bli pužité pri grafickm návrhu a ich pužitie, veľksti písma pre jedntlivé sekcie farebnsť zznam farieb pužitých pri návrhu (v tvare RGB aleb hexa zápise), chranné zóny veľksti dsadenia medzi jedntlivými bjektmi a sekciami na stránke (hdnty pre margin, padding, line-height a pd.), dizajn manuál ulžte d priečinka grafik na pracvnej plche. Môžete h vytvriť: buď ak textvý súbr a ulžiť h pd názvm manual.txt, aleb ak brázk, pričm môžete pužiť kópiu Vášh návrhu na ppis jedntlivých plžiek a nazvite h manual.jpg (png). Pklady pre Firemné lg: vytvriť dizajn manuál, ktrý bude bsahvať rzmery / pmery strán, farebnsť zznam farieb pužitých v návrhu lga (v RGB tvare aleb v hexa zápise), dsadenie textu, bjektv d lga, dizajn manuál ulžte d priečinka grafik na pracvnej plche pd názvm manual_lg.txt (prípadne manula_lg.jpg, ak sa rzhdnete pužiť grafické znázrnenie). 4
Zadanie pre Prgramátra (celkvý pčet bdv 600) Časť A Implementácia administračnej časti webu (120 bdv) Administrátrská sekcia bude viditeľná až p prihlásení. V prípade, že užívateľ nebude prihlásený, systém vypíše chybu. Upzrnenie: Administrácia v pdstate bsahuje len prihlasvaciu stránku a stránku Objektv, kde sa zbrazuje tabuľka všetkých bjektv (zznam stĺpcv nižšie) a editvať/meniť je mžné len stav bjektu (ppis nižšie). Administráciu užívateľv, kategórií, vlastnstí a iných údajv nie je nutné vytvárať, všetky údaje zadávate natvrd d tabuliek. Prihlásenie d administrácie: bude dstupné na adrese http://vasa_stranka/admin (dvlené je aj /admin.php), bsahuje prihlasvací frmulár, ktrý bude bsahvať plia: užívateľské men, užívateľské hesl, v prípade, že nie sú zadané krektné údaje, zbrazí sa chybvá správa, údaje užívateľch budú ulžené v MySQL tabuľke s názvm users, p úspešnm prihlásení sa rvn zbrazí stránka s bjektmi. Stránka Objektv - tát stránka bude bsahvať: zznam všetkých bjektv ulžených v tabuľke bjects, pre jeden záznam (riadk tabuľky) sa bude zbrazvať: názv kategórie, názv pdkategórie, názv bjektu, cena bjektu, men makléra, ktrý spravuje daný bjekt, čas vytvrenia pnuky v tvare: dd.m.m.yyyy hh:mm (napr. 15.05.2016 09:43), stav bjektu s mžnsťu h zmeniť: ak je aktívny mžnsť zmeniť na neaktívny, ak je neaktívny mžnsť nastaviť bjekt ak aktívny, meniť stav bjektu môže iba maklér, ktrý h spravuje, v prípade zmeny stavu sa zmení čas aktualizácie bjektu, dkaz na zbrazenie bjektu na stránke tvrenie v nvm kne, bjekty budú uspriadané d najnvšieh p najstaršie. Uspriadajte pdľa času aktualizácie, ak nie je zadaný, tak sa berie čas vytvrenia bjektu. 5
Štruktúra DB tabuliek: zznam užívateľv bude ulžený v tabuľke users, ktrá bude bsahvať: identifikátr makléra, užívateľské men maximálne 32 znakv, užívateľské hesl bude v databáze zahashvané, celé men makléra maximálne 128 znakv, telefón na makléra 15 znakv, email na makléra maximálne 128 znakv, stav účtu príznak aktívny/neaktívny, neaktívny užívateľ by sa nemal dať prihlásiť, časvé razítk prideľuje sa autmaticky, pridaný aspň jeden záznam s prihlasvacími údajmi: men: makler hesl: tajne-hesl a vyplnenými všetkými pliami. Maklér musí mať nastavenú ftgrafiu, zznam bjektv bude ulžený v tabuľke bjects, ktrá bude bsahvať: identifikátr bjektu, názv bjektu maximálne 128 znakv, identifikátr na hlavnú kategóriu prepjenie na tabuľku categries, identifikátr na pdkategóriu prepjenie na tabuľku categries, identifikátr na makléra prepjenie na tabuľku users, ppis bjektu text ľubvľnej dĺžky, krátky ppis bjektu maximálne 64 znakv cenu bjektu 8 miestne celé, nezáprné čísl, kľúčvé slvá text ľubvľnej dĺžky, kraj 2 znaky (zadávajte znaky z tabuľky r_kraj, viď upzrnenie nižšie!), kres 2 znaky (zadávajte znaky z tabuľky r_kres, viď upzrnenie nižšie! Dbajte na t, aby kres bl v danm kraji, inak vám nebude správne fungvať verejná časť webu, tabuľky kraj a kres sú na sebe závislé/prepjené, lkalita maximálne 64 znakv, čas pridania bjektu časvé razítk, prideľuje sa autmaticky, čas aktualizácie bjektu, stav bjektu 0 = skrytý bjekt, 1 = aktívny bjekt, názv hlavnéh brázka (napr. brazk012.jpg), pridaných minimálne 21 záznamv, zznam dstupných vlastnstí a špecifikácií bude ulžený v tabuľke prperties, ktrá bude bsahvať: identifikátr vlastnsti, názv maximálne 32 znakv, metrika (napr. m 2,...) maximálne 32 znakv, príznak, či bude nadbúdať blean hdntu (án/nie), aleb zadanú (čísl, ppis,...), pradie určuje, v akm pradí sa majú zbrazvať v náhľade bjektu, 6
pridaných minimálne 5 definícií vlastnstí: napr: pzemk, rzlha, výťah,..., hdnty vlastnstí pre jedntlivé bjekty budú ulžené v tabuľke bject_prperties, ktrá bude bsahvať: identifikátr, identifikátr bjektu prepjenie na tabuľku bjects, identifikátr vlastnstí prepjenie na tabuľku prperties, hdnta maximálne 32 znakv, pridaných minimálne 10 vlastnstí na aspň 5 bjektv, zznam kategórií bude ulžený v tabuľke categries, ktrá bude bsahvať: identifikátr kategórie, názv kategórie maximálne 32 znakv, identifikátr rdičvskej kategórie v prípade hlavnej kategórie nastaviť na nulvú hdntu (Null, 0, ), pridané 3 záznamy pre hlavné kategórie s názvm: Pnuka, Dpyt, Prenájm, pridaná aspň 1 pdkategória pre každú kategóriu: Byt, Dm, Chata, Pzemk, Upzrnenie: Aplikácia využíva aj dve ďalšie tabuľky r_kraj a r_kres, pužívané na verejnej prezentačnej časti webu a v administrácii pre plia kraj a kres. SQL súbr pre ich imprt nájdete v vašm priečinku. Každý bjekt môže mať 0 až N vlastnstí. Zznam nastavených vlastnstí je ulžený v tabuľke bject_prperties, pričm v tej tabuľke sú ulžené iba hdnty k danej vlastnsti (napr. 0, 1, 100,...). Názvy vlastnstí a ich metrika je ulžená v tabuľke prperties. Pčet záznamv v tabuľke prperties určuje maximálny pčet vlastnstí pre ľubvľný bjekt. Vzťahy medzi tabuľkami bjects, bject_prperties a prperties znázrňuje nasledujúci graf (červený bdĺžnik reprezentuje jeden záznam v tabuľke): bjects bject_prperties prperties Pzn.: V prípade lkálneh pužitia MySQL servera je nutné pužiť nasledujúce údaje na prihlásenie sa d databázy: databáza: zenitreal, prihlasvacie men: zenitadm, prihlasvacie hesl: zenitpass. Výnimku z tht pravidla predstavuje prípad, keď Vám prihlasvacie údaje pridelil administrátr/rganizátr krajskéh kla. 7
MySQL tabuľky môžete vytvárať cez PHP, aleb pmcu PhpMyAdmin/Adminer. Časť B Spracvanie pdkladv d grafika (HTML/CSS) Zadanie: Stránky budú vytvrené: (180 bdv) na základe grafickéh návrhu, užívateľsky prívetivé a intuitívne (ľahk pužiteľné), s dstatčným kntrastm medzi textm a pzadím, s ptimalizvanými brázkami, s URL vhdnu pre vyhľadávače (user-friendly URL): nevhdná url: http://stranka.dev?index.php?p=pnuka vhdná url: http://stranka.dev/pnuka aleb http://stranka.dev/pnuka/2 aleb http://stranka.dev/pnuka.php Pznámka: pužívajte vhdné medzery medzi jedntlivými bsahvými blasťami a elementmi na stránke na zlepšenie vzhľadu a djmu z dizajnu (pekný vzdušný dizajn). Pžiadavky na verejnú/prezentačnú časť web stránky: Všetky stránky budú mať jedntný dizajn/štruktúru pdľa grafickéh návrhu, pričm majú bsahvať nasledujúce prvky: hlavičku, lg aktívny dkaz, ktrý vždy smeruje na úvdnú stránku, stabilné navigačné menu s plžkami pdľa zadania (Úvd, Pnuka, Dpyt, Prenájm, Vyhľadávanie) a rzbaľvacie/ppup submenu pre pdkategórie, bsah samtnéh webu, pätu s infrmáciami firme a autrch stránky, unikátny názv (title tag). Zdrjvý kód stránky bude v jazyku HTML5, t znamená: bude bsahvať validný kód HTML5, bude bsahvať validný kód CSS, správne sémantické pužitie HTML5 tagv, pužitie Alt a Title atribútv (brázky, dkazy), pužitie unikátnych a SEO ptimalizvaných title a meta descriptin pre každú stránku webu, pužitie CSS na frmátvanie grafickej štruktúry a zbrazenia. Element Table sa pužíva iba na zbrazvanie údajv, nie na vytváranie štruktúry. Pzn.: ak sa vypne CSS, stránka by si mala zachvať lgickú štruktúru (ak bežný čitateľný dkument). v prípade pužitia tabuľky, by mala byť hlavička riadkv (prípadne stĺpcv) jasne identifikvaná (správnym tagm aj graficky), pužitie elementv Label pre ppísanie vstupv z frmulára, ddržiavanie W3C štandardv (http://www.w3.rg), nastavenie kódvania znakvej sady na UTF-8 (Unicde), 8
využívanie kmentárv na ppis PHP, HTML, CSS a JavaScriptu. Stránka bude pčas hdntenia testvaná na kmpatibilitu: pd prehliadačmi Firefx, Chrme, IE9+ a musí vyzerať identicky, pd rôznymi zariadeniami (zabezpečte respnzívnsť stránk): desktp (rzlíšenie 1920x1080), Mbilné zariadenie ( rzlíšenie 540x960). Časť C Implementácia verejnej časti webu Obsah stránk (300 bdv) Stránka Úvd kmbinácia dynamickéh a statickéh bsahu. Na úvdnej stránke sa budú zbrazvať: kntaktné infrmácie na firmu a krátky infrmačný text, minimálne 2 a maximálne 10 bjektv, pričm každý bjekt bude bsahvať: nadpis bude zárveň dkazm na detail bjektu, krátky ppis, brázk, cenu, tlačidl / dkaz na zbrazenie detailu bjektu, zaradenie bjektu d hlavnej kategórie (pnuka, dpyt, prenájm), zbrazujú sa vždy najnvšie bjekty na základe času aktualizvania. Ak nie je čas aktualizácie zadaný, berie sa čas vytvrenia bjektu. Stránka Pnuka/Dpyt/Prenájm dynamický zznam bjektv. Stránka Pnuka bude identická s stránkami Dpyt a Prenájm vrátane pdkategórií. Stránky budú bsahvať: bjekty, ktré patria d kategórie pnuka (dpyt, prenájm), a budú sa načítavať z databázy, pčet zbrazvaných pnúk bude 5 až 20 na jednu stranu, každá pnuka bude bsahvať: názv (ak dkaz), krátky ppis, cenu, hlavný brázk a tlačidl/dkaz na zbrazenie bjektu, bjekty budú zradené d najnvšieh p najstarší, stránkvanie zbrazuje sa iba v prípade, ak sa v databáze nachádza viac bjektv, ak je mžné zbraziť na jednej strane, p kliknutí na nadpis aleb tlačidl, sa zbrazí stránka detailu bjektu. Stránka Detail bjektu - bude bsahvať: názv bjektu, zaradenie bjektu d hlavnej kategórie, zaradenie bjektu d pdkategórie, hlavný brázk, úplný ppis bjektu, 9
galériu prislúchajúcu k bjektu p kliknutí na ftgrafiu sa zbrazí v mdálnm kne, galéria brázkv sa načítava z priečinka galleries/id_bjektu/ zznam vlastnstí a špecifikácií danéh bjektu, ak vlastnsť bsahuje metriku, musí sa zbraziť za hdntu, ak vlastnsť má príznak blean, zbrazuje sa iba ÁNO/NIE, ak nemá príznak, zbrazuje sa knkrétna hdnta, makléra, ktrý vybavuje daný bjekt: men makléra, kntakt na makléra (telefón a email, ak existujú), ftgrafiu makléra ak existuje cesta k súbru je: maklers/id_maklera.jpg. Stránka Vyhľadávanie stránka, ktrá bude bsahvať: frmulár, pmcu ktréh bude môcť užívateľ vyhľadávať v bjektch pdľa zadaných kritérií, zznam bjektv, ktré vyhvujú vyhľadávaniu, je nutné určiť si pčet bjektv na stranu v rzsahu minimálne 5 a maximálne 20 bjektv na stranu. V prípade, že vyhľadávaniu zdpvedá viac než stanvený pčet bjektv na stranu, je nutné zbraziť aj stránkvanie, v prípade, že sa ešte nespustil vyhľadávanie (prvé načítanie stránky), zbrazujú sa všetky pnuky. Frmulár bude bsahvať: hlavná kategória výbervé ple, načítané z tabuľky categries, pdkategóriu výbervé ple genervané pmcu JS na základe výberu hlavnej kategórie, načítané z tabuľky categries, vyhľadávacie ple vyhľadáva v kľúčvých slvách, minimálne 2 znaky, maximálne 128 znakv, cena d celé nezáprné čísl, cena d celé nezáprné čísl, výber kraja výbervé ple, načítané z tabuľky r_kraj, výber kresu výbervé ple genervané na základe výberu kraja, načítané z tabuľky r_kres, ple by sa mal aktualizvať pmcu JS pri zmene kraja, lkalita minimálne 3 znaky, maximálne 64 znakv. Vyhľadávajú sa aj čiastkvé výskyty napr. reťazcu br vyhvuje Bratislava, Brezn, všetky dstupné vlastnsti: ak vlastnsť bsahuje metriku, tak sa zbrazí, ak má príznak blean, tak sa zbrazuje pri názve vlastnsti namiest inputu zaškrtávacie plíčk, výber spôsbu triedenia nájdených bjektv: pdľa ceny d najnižšej, pdľa ceny d najvyššej, pdľa aktuálnsti najnvšie prvé, pdľa aktuálnsti najstaršie prvé. Validácia plí (ak je definvaná) sa uskutčňuje na strane servera pmcu PHP. V prípade, že 10
dslané údaje bsahujú validačné chyby, je nutné ich zbraziť. Odprúčanie: Zreteľne ddeľte prezentačný a aplikačný kód na strane servera pmcu mdulárnej štruktúry (HTML šablóny ddeľte d kódu aplikácie a práce s databázu, napr. pmcu MVC návrhu apd.). Hdntenie Obj. Sub. Bdv Dizajn úvdnej stránky 45 165 210 Grafik Dizajn lga 30 90 120 Prgramátr Príprava materiálv 59 11 70 Implementácia administračnej časti webu Prihlásenie + správa bjektv Spracvanie pdkladv d grafika (HTML/CSS) Implementácia verejnej časti webu Obsah webu + zbrazvacia lgika 83 37 120 110 70 180 275 25 300 Maximálny pčet bdv 1000 11