33. ročník súťaže ZENIT v programovaní

Transkript

1 Infrmácie prjekte 33. rčník súťaže ZENIT v prgramvaní Šklské kl - zadanie kategórie Web Cestvná kancelária TravelTEurpe sa špecializuje na dvlenky v európskych letviskách. Je t nvvzniknutá firma a ak taká si uvedmuje veľkú knkurenciu na súčasnm trhu. Aj pret sa rzhdla vytvriť si webvé stránky, ktré by jej pskytli verejnú reklamu. Cieľm súťažnej práce je vytvriť webvú stránku, ktrá bude bsahvať úvdnú stránku a galériu pnúkaných destinácií s mžnsťu ich aktualizácie. Presné zadanie a pdrbnsti nájdete ďalej v tmt zadaní. 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, 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. 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), ddržiavanie W3C štandardv ( práca s brázkami: vkladanie a úprava brázkv, ptimalizácia brázkv pre web, prgramvanie na strane servera: ukladanie a načítanie údajv pmcu PHP, MySQL. 1

2 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) Dizajn galérie C) Príprava materiálv 2. Prgramátr A) Spracvanie pdkladv d grafika Prevd grafiky d HTML/CSS B) Implementácia verejnej časti webu Obsah webu + zbrazvacia lgika C) Implementácia administračnej časti webu Prihlásenie + správa galérie 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 (text, brázk,...) 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 2. Galéria ftgaléria z rôznych akcií 2

3 Zadanie pre Grafika (celkvý pčet bdv 450) Časť A Dizajn úvdnej stránky (260 bdv) Musíte vytvriť grafický návrh úvdnej webvej stránky. Návrh bude bsahvať: hlavičku lg / názv prjektu, hlavné menu s jednu aktívnu plžku Galéria (efekt pri prechde myšku), pätu stránky s infrmáciami autrch, rzmiestnenie textu a nadpisv, aspň jeden brázk, 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: hmepage.jpg (prípadne.png), názv zdrjvéh súbru bude: hmepage.psd (prípadne.xcf,... pdľa zvlenéh sftvéru). Časť B Dizajn galérie (120 bdv) Musíte vytvriť grafický návrh dstupných galérií/kategórií. Návrh bude bsahvať: hlavičku a pätu stránky, zznam dstupných kategórií (minimálne 3), každá kategória bude reprezentvaná: názvm, brázkm, krátkym ppism, názv exprtvanéh súbru bude: gallery.jpg (prípadne.png), názv zdrjvéh súbru bude: gallery.psd (prípadne.xcf,... pdľa zvlenéh sftvéru). Časť A + Časť B Aby bl mžné hdntiť návrhy, musíte vytvriť snímky hmepage.jpg a gallery.jpg (png) a ulžiť ich d priečinka grafik na pracvnej plche. Zdrjvé súbry hmepage.psd a gallery.psd (xcf,...) tiež ulžte d priečinka grafik na pracvnej plche. V návrhch 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. 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). 3

4 Č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: nastrihať jedntlivé sekcie 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/images 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 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ť priam Váš návrh na ppis jedntlivých plžiek a nazvite h manual.jpg (png). 4

5 Zadanie pre Prgramátra (celkvý pčet bdv 550) Časť A Spracvanie pdkladv d grafika (HTML/CSS) (250 bdv) Zadanie: Stránky budú vytvrené: 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 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 návrhu grafika, 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, Galéria), 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 meta tagv s vhdnými infrmáciami (napr. descriptin a keywrds), 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 ( nastavenie kódvania znakvej sady na UTF-8 (Unicde), 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, 5

6 Časť B Implementácia verejnej časti webu Obsah stránk (150 bdv) Stránka Úvd statický bsah. Na úvdnej stránke sa budú zbrazvať: nadpis, text, minimálne 1 brázk. Stránka Galéria dynamický zznam galérií/kategórií. Všetky brázky a súbry galérie budú ulžené v priečinku vas_web/gallery. V hlavnm priečinku gallery sa budú nachádzať ďalšie priečinky, pričm každý bude reprezentvať práve jednu kategóriu v galérii (bsah priečinka pre jedntlivé kategórie nájdete nižšie). Stránka Galéria bude bsahvať: zznam dstupných kategórií, ktrý bude vygenervaný na základe bsahu priečinka gallery, minimálne 3 kategórie, každá kategória bude bsahvať: názv kategórie načítaný z súbru header.txt, ktrý sa nachádza v príslušnej kategórii/priečinku, titulný brázk brázk s názvm thumb.jpg, ktrý sa nachádza v príslušnej kategórii/priečinku, krátky ppis načítaný z súbru descriptin.txt, ktrý sa nachádza v príslušnej kategórii/priečinku, v prípade výberu kategórie (kliknutie na kategóriu) sa zbrazia ftgrafie prislúchajúce k danej kategórii. Stránka pre jednu kategóriu bude bsahvať: názv kategórie, krátky ppis, zznam všetkých brázkv, ktré sa nachádzajú v príslušnej kategórii/priečinku, brázky budú uspriadané na základe času ich nahratia na server. Psledný pridaný brázk sa bude zbrazvať ak prvý, v prípade výberu brázka (kliknutie na brázk) sa zbrazí ftgrafia v plnm rzlíšení. Príklad hierarchickej štruktúry priečinka gallery: kategria_01/ header.txt bsahuje 1 riadk s názvm kategórie thumb.jpg hlavný brázk pre danú kategóriu descriptin.txt bsahuje krátky textvý ppis kategórie image001.jpg image002.jpg image003.jpg kategria_02/ header.txt, thumb.jpg, descriptin.txt, img1.jpg, img2.jpg,... 6

7 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.). Časť C Implementácia administračnej časti webu (150 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. Prihlásenie d administrácie: bude dstupné na adrese (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 administrátrvi budú ulžené v knfiguračnm súbre adm_lgin.php, ktrý bsahuje definvané knštanty ADMLOGIN a ADMPASS. Súbr je súčasťu dstupných materiálv a nachádza sa v Vašm priečinku, p úspešnm prihlásení sa zbrazí frmulár na vytvrenie nvej kategórie, frmulár na pridanie brázkv d už existujúcej kategórie. Frmulár na vytvrenie nvej kategórie bude bsahvať: identifikátr kategórie pvinná plžka, minimálne 2 znaky, maximálne 8 znakv, pvlené znaky [a...za...z_0...9], názv kategórie pvinná plžka, minimálne 3 znaky, maximálne 32 znakv, ppis kategórie pvinná plžka, minimálne 5 znakv, maximálne 128 znakv, brázk pvinná plžka, validácie (pvinné plia,...) splnené vytvrí sa nvá kategória, nesplnené vypíše sa chybvá správa. Ak sú validácie splnené, vyknajú sa nasledujúce akcie: vytvrí sa nvý priečink v priečinku vas_web/gallery s názvm, ktrý bl zadaný v pli identifikátr kategórie (ďalej iba id_cat), vytvrí sa súbr header.txt v priečinku id_cat, d ktréh sa ulží názv kategórie, vytvrí sa súbr descriptin.txt v priečinku id_cat, d ktréh sa ulží ppis kategórie, na server sa nahrá brázk z pľa brázk a ulží sa d priečinka id_cat pd názvm thumb.jpg. 7

8 Frmulár na pridanie brázkv d existujúcej kategórie bude bsahvať: identifikátr kategórie výbervé menu, ktréh bsah sa načíta na základe bsahu priečinka vas_web/gallery, brázk ple na nahratie brázku na server, ak je brázk zadaný a je vybratá kategória, tak sa brázk ulží d príslušnej kategórie. Pznámka: môžete predpkladať, že sa nahrávajú iba brázky typu JPG Hdntenie Obj. Sub. Bdv Dizajn úvdnej stránky Grafik Dizajn galérie Príprava materiálv Spracvanie pdkladv d grafika (HTML/CSS) Prgramátr Implementácia verejnej časti webu Obsah webu + zbrazvacia lgika Implementácia administračnej časti webu Prihlásenie + správa galérie Maximálny pčet bdv