Tvorba webových stránek školy

  • Published on
    05-Feb-2017

  • View
    212

  • Download
    0

Embed Size (px)

Transcript

<ul><li><p>SStteeddookkoollsskk tteecchhnniikkaa 22001155 </p><p>SSeettkknn aa pprreezzeennttaaccee pprraacc sstteeddookkoollsskkcchh ssttuuddeenntt nnaa </p><p>VVUUTT </p><p>TVORBA WEBOVCH STRNEK KOLY </p><p>Jakub Englick, imon Polan </p><p>Gymnzium Zikmunda Wintra, Rakovnk </p><p>Nmst Jana iky 186, 269 01 Rakovnk </p></li><li><p>2 </p><p>Prohlen </p><p>Prohlaujeme, e jsme svou prci vypracovali a pouili jsme pouze podklady </p><p>(literaturu, projekty, SW atd.) uveden v seznamu vloenm v prci. </p><p>Prohlaujeme, e titn verze a elektronick verze soutn prce jsou identick. </p><p>Nemm zvan dvod proti zpstupovn tto prce v souladu se zkonem </p><p>. 121/2000 Sb., o prvu autorskm, o prvech souvisejcch s prvem autorskm </p><p>a o zmn nkterch zkon (autorsk zkon) v platnm znn. </p><p>V Rakovnku dne 11. 5. 2015 </p></li><li><p>3 </p><p>Podkovn </p><p>Dkujeme Mgr. Martin Vokov za pomoc pi tvorb na prce. </p></li><li><p>4 </p><p>Anotace </p><p>V teoretick sti, kter je dlena na 7 kapitol jeden nebo druh popisujeme </p><p>kompletn tvorbu webovch strnek koly od prvotnho npadu a po finln realizaci. </p><p>Krom samotnho popisu tvorby vysvtlujeme jednotliv monosti tvorby webu pro </p><p>zatenky a popisujeme jednotliv postupy, programovac a kdovac jazyky. </p><p>Jako praktick st na prce nm poslouil ji fungujc web koly. </p><p>Klov slova </p><p>Tvorba webu, koln webov strnky, postup vvoje webu, web vzdlvac instituce, </p><p>technologie webovch strnek </p></li><li><p>5 </p><p>Dlen prce </p><p>Nvrh a vbr postupu tvorby webu.Jakub Englick </p><p>Uivatelsk prosted webov strnky. Jakub Englick </p><p>Technick st webov strnky....imon Polan </p><p>Administrace webu..imon Polan </p><p>ast problmy pi vvoji webu.imon Polan </p><p>Finln ladn a pprava startu..Jakub Englick </p><p>SEO optimalizace.imon Polan </p></li><li><p>6 </p><p>Obsah </p><p>1 VOD ................................................................................................................... 8 </p><p>2 NVRH A VBR POSTUPU TVORBY WEBU ................................................. 9 </p><p>3 UIVATELSK PROSTED WEBOV STRNKY ......................................... 10 </p><p>3.1 WEBDESIGN .................................................................................................. 10 </p><p>3.1.1 Grafik .................................................................................................... 11 </p><p>3.1.2 Kodr .................................................................................................... 12 </p><p>3.2 ZNAKOVAC A PROGRAMOVAC JAZYKY ........................................................... 13 </p><p>3.2.1 HyperText Markup Language ................................................................ 13 </p><p>3.2.2 Cascading Style Sheets ........................................................................ 14 </p><p>3.2.3 JavaScript ............................................................................................. 15 </p><p>3.2.4 jQuery ................................................................................................... 15 </p><p>3.2.4.1 jQuery UI ........................................................................................... 16 </p><p>3.2.4.2 jQuery Mobile .................................................................................... 16 </p><p>3.3 IMPLEMENTACE STYL A KNIHOVEN DO WEBOV STRNKY ................................. 18 </p><p>3.4 POSTUP TVORBY DESIGNU WEBOVCH STRNEK KOLY .................................... 18 </p><p>4 TECHNICK ST WEBOV STRNKY ........................................................ 19 </p><p>4.1 ODLIEN TECHNICK STI OD DESIGNU .......................................................... 19 </p><p>4.2 TECHNOLOGIE ............................................................................................... 19 </p><p>4.2.1 Jazyk PHP ............................................................................................ 19 </p><p>4.2.2 Jazyk SQL............................................................................................. 23 </p><p>4.2.3 HTACCESS .......................................................................................... 24 </p><p>4.2.4 Frameworky .......................................................................................... 24 </p><p>4.3 ZABEZPEEN ................................................................................................ 25 </p><p>4.4 ZKLADN STAVEBN KAMENY ........................................................................ 26 </p><p>4.4.1 Hlavika webu ....................................................................................... 26 </p><p>4.4.2 Bon panel ........................................................................................... 26 </p><p>4.4.3 Menu ..................................................................................................... 27 </p><p>4.4.4 lnky ................................................................................................... 28 </p><p>5 ADMINISTRACE WEBU .................................................................................... 29 </p><p>5.1 PSTUP DO ADMINISTRACE ............................................................................ 30 </p></li><li><p>7 </p><p>5.2 SEZNMEN S ADMINISTRAC ........................................................................... 33 </p><p>5.3 OBSAH ADMINISTRACE .................................................................................... 34 </p><p>5.3.1 Menu ..................................................................................................... 36 </p><p>6 AST PROBLMY PI VVOJI WEBU ......................................................... 39 </p><p>6.1 OPTIMALIZACE PRO WEBOV PROHLEE ........................................................ 39 </p><p>6.2 ODLIN VERZE A NASTAVEN SERVERU ........................................................... 40 </p><p>6.3 OPTIMALIZACE WEBU ...................................................................................... 40 </p><p>7 FINLN LADN A PPRAVA STARTU ........................................................ 41 </p><p>7.1 PPRAVA PROSTORU PRO HOTOV PROJEKT ................................................... 41 </p><p>7.2 PESUN A START WEBU .................................................................................. 42 </p><p>7.3 GOOGLE ANALYTICS....................................................................................... 44 </p><p>8 SEO OPTIMALIZACE ........................................................................................ 45 </p><p>8.1 CO JE SEO OPTIMALIZACE? ............................................................................ 45 </p><p>8.2 REGISTRACE DO VYHLEDVA ....................................................................... 46 </p><p>9 ZVR ............................................................................................................... 47 </p><p>10 SEZNAM POUIT LITERATURY A ZDROJ ............................................. 48 </p></li><li><p>8 </p><p>1 vod </p><p>Nae kola mla mnoho let webov strnky na zastaralm redaknm systmu </p><p>Joomla, kter byl pro kolu velmi nevyhovujc. Vdli jsme, e se chyst web nov. </p><p>Msce utkaly, ale nov web stle nebyl na svt. V tom ns oslovili pedagogov </p><p>na koly, zdali bychom nepebrali prci po lovku, kter nem as a chu web </p><p>koly dokonit. Vdli jsme, e web je velk vzva, kterou jsme si nechtli nechat ujt </p><p>a tak jsme chtli bt u toho. Seli jsme se s vedenm koly a dosavadnm tvrcem </p><p>webu a probrali dal postup prce. Byly nm nabdnuty vechny kdy, kter </p><p>doposud byly napsny, a my jsme v nich mohli pokraovat. Nelenili jsme ani okamik </p><p>a tto nabdky jsme se chopili s velkm nadenm. </p></li><li><p>9 </p><p>2 Nvrh a vbr postupu tvorby webu </p><p>Pebrat po nkom kd nen tak jednoduch, jak by si laik mohl myslet, kad </p><p>programtor m svj styl psan i postupy pi pojmenovvn promnnch. Pvodn </p><p>jsme zamleli pouze pokraovat v zapoat prci, nicmn v moment, kdy jsme </p><p>vidli dosavadn prci, jsme si uvdomili, e porozumn ji napsanmu kdu by nm </p><p>zabralo vce prce ne napsn vlastnho. </p><p>Veden koly souhlasilo s nam novm zmrem -nepout pvodn kd, ale vytvoit </p><p>kd vlastn. Bhem krtkho asovho seku jsme pak pepsali kd podle svch </p><p>pedstav a po konzultaci s vedenm a doladn poslednch poadavk jsme se pustili </p><p>do kompletn realizace webovch strnek. </p></li><li><p>10 </p><p>3 Uivatelsk prosted webov strnky </p><p>3.1 Webdesign </p><p>Anglick slovo design je odvozeno z latinskho de-signare, oznait, vyznait, </p><p>a postupn dostalo tak vznamy navrhnout i nvrh..1 Webdesign neboli design </p><p>webu je grafick podoba webovch strnek ili to, co vid koncov uivatel. O design </p><p>se nejastji staraj dva lid - grafik a kodr. Dal monost je, e se lovk rozhodne </p><p>udlat si design webov strnky sm. Zde m dv monosti. Me navtvit njak </p><p>portl, kter se zabv tvorbou webovch strnek a tam pomoc prvodce vytvoit </p><p>ablonov webov strnky. Jednm takovm portlem je webnode.cz. Pokud ale </p><p>tvrce m vy cle, me se pokusit vytvoit web svpomoc. K tomu slou </p><p>specializovan programy jako je napklad Microsoft Publisher. Je mon tak vyut </p><p>rzn online genertory webdesignu. </p><p> 1 Design: Wikipedia.org [aktualizovno: 25. 8. 2014 v 20:42, cit. 8. 12. 2014] dostupn z: http://cs.wikipedia.org/wiki/Design </p></li><li><p>11 </p><p>3.1.1 Grafik </p><p>Grafik na zklad zadn udl grafick nvrh webu. Vytvo vechny obrzky </p><p>a grafick komponenty webu, eho vznikne kompletn design, kter je nsledn </p><p>rozezn na jednotliv sti a pedn kodrovi. Nejrozenjm nstrojem pro tuto </p><p>prci je Adobe Photoshop, ale zkladn prvky designu lze udlat i v malovn, ovem </p><p>vae monosti na kvalitn design jsou omezen funkcemi programu. </p><p>Obr. 1: Ukzka programu Adobe Photoshop </p></li><li><p>12 </p><p>3.1.2 Kodr </p><p>Kodr za pomoci jazyk HTML a CSS vytvo z st, kter mu poskytl grafik, zase </p><p>jeden celek, kter u ale me slouit jako webov strnka, tud je mono dosadit </p><p>text i odkazy. Kodr uzpsob web tak, aby ho bylo mono sledovat na vech </p><p>zazench, jako jsou stolnch PC, notebooky nebo teba chytr telefony i tablety. </p><p>Tato innost zabere nejvce asu a stejn nemus splnit pvodn zmr, protoe </p><p>kad prohle reaguje jinak, a proto je takka nemon optimalizovat web pro </p><p>vechny typy zazen. Ke kdovn webu je tak mon pout mnoho specifickch </p><p>program jako nap. PSPad, opt lze vyut zkladn program Microsoft Windows, </p><p>a to Notepad. </p><p>Obr. 2: Ukzka programu PSPad </p></li><li><p>13 </p><p>3.2 Znakovac a programovac jazyky </p><p>3.2.1 HyperText Markup Language </p><p>HyperText Markup Language neboli HTML je znakovac jazyk, kter slou k tvorb </p><p>webovch strnek. Jeho potky se datuj od roku 1991. V souasn dob je </p><p>k dispozici verze 5, ale ji se chyst verze 5.1 a 5.2. Jazyk se skld z velkho potu </p><p>znak tag. Znaky se dl na dv zkladn skupiny tag, prov a neprov. </p><p>Prov maj dva znaky a to pro oteven a uzaven njak operace, napklad tun </p><p>text. Forma zpisu je nsledujc: tun text. S tm, e je otevrac znak </p><p>a je uzavrac znak. Neprov znak m jen jednu st napklad nebo </p><p>. Nsleduje tabulka, kter obsahuje vpis vech zkladnch HTML tag, kter by </p><p>i zanajc kodr ml znt. </p><p>Obr. 3: Tabulka HTML tag2 </p><p> 2 Obrzek ze serveru: http://www.jakpsatweb.cz/html/nejdulezitejsi.html </p></li><li><p>14 </p><p>3.2.2 Cascading Style Sheets </p><p>Cascading Style Sheets ve zkratce CSS se v etin nazv kaskdov styly. Jedn </p><p>se o kdovac jazyk, kterm se provd zpis vzhledu a definice umstn prvk na </p><p>webov strnce a je pln provzn s jazykem HTML. K zpisu CSS lze pout </p><p>3 zpsoby do hlaviky dokumentu, pmo k prvku, kter hodlme stylovat nebo do </p><p>externho souboru. Tento zpsob je nejpouvanj, protoe lze pout na vce </p><p>strnkch tent styl. V souasn dob mme k dispozici 3 verze CSS </p><p>(CSS1, CSS2, CSS3). CSS3 ji um zkladn prvky animace, a proto meme webu </p><p>uetit zt JavaScriptem. </p><p>Obr. 4: Zpis CSS stylu do hlaviky HTML dokumentu </p><p>Obr. 5: Zpis CSS stylu pmo k prvku, na kter m mt vliv </p></li><li><p>15 </p><p>3.2.3 JavaScript </p><p>JavaScript neboli JS je programovac jazyk, kter slou k oiven webov strnky. </p><p>Na zklad tohoto jazyka mohou na strnce vyjdt rzn panely nebo vyskakovat </p><p>rychl okna s dleitmi informacemi. V dnen dob je propojen HTML, CSS a JS </p><p>nezbytn pro atraktivn webov strnky, kter zadavatel vyaduj. JavaScript jako </p><p>takov se na rozshlejch projektech nepouv, ale pouvaj se frameworky, kter </p><p>jsou na JS postaveny, napklad jQuery nebo Angular. JavaScript a jQuery se li </p><p>v zpisu syntaxe. </p><p>Obr. 6: Zpis pro ohranien prvku normlnm JavaScriptem </p><p>3.2.4 jQuery </p><p>jQuery je rodina tzv. framework zaloench na programovacm jazyku JavaScript. </p><p>Jedn se o knihovny s mnoha funkcemi, kter velmi uleh prce s JavaScriptem na </p><p>webov strnce a dopln strnku o nov funkce, kter by jen s prostm JavaScriptem </p><p>byly o dost sloitj, nap.: animace, Ajax nebo zmnu strnky bez obnoven. Do </p><p>rodiny jQuery pat mnoho podprnch knihoven, a to napklad jQuery UI, jQuery </p><p>Mobile, Sizzle, QUnit. </p><p>Obr. 7: Zpis pro ohranien prvku pomoc knihovny jQuery </p></li><li><p>16 </p><p>3.2.4.1 jQuery UI </p><p>jQueryUI je modifikace knihovny jQuery a slou ke grafickmu zpesten cel </p><p>webov prezentace. Nejastji se s n shledme v administraci webu, kde se daj </p><p>vyut jej funkce pesouvn, seazovn objekt nebo vyskakovn rznch </p><p>informanch oken o probhlch konech. jQueryUI je stejn jako jQuery velmi </p><p>rychl, intuitivn a zpjemn jak chvle strven na webov strnce, tak uet </p><p>i mnoho asu programtorovi pi tvoen webu. Vtinou se funkce tchto knihoven </p><p>spojuje a tm se cel proces tvorby webu pesouv pln na jinou rove. </p><p>Obr. 8: Monost seazen objekt dky jQuery UI3 </p><p>3.2.4.2 jQuery Mobile </p><p>Pi psan webov strnky je poteba brt v vahu vechny monosti, ktermi me </p><p>uivatel webovou strnku sledovat. V dnen dob pln chytrch telefon je </p><p>podstatn se zamit na to, aby i uivatel tchto zazen mohli neruen prohlet </p><p>vtinu web. To znamen pizpsobit web pro n. Je nkolik monost, jak se </p><p>k danmu problmu postavit. Prvn monost je to neeit a spolhat na to, e si </p><p>uivatel porad. Tuto monost vol spousta webovch strnek na dnenm internetu. </p><p> 3 Obrzek ze serveru: http://jqueryui.com/sortable/ </p></li><li><p>17 </p><p>Druh monost je zanechat vzhled webu pro normln prohlee, ale pomoc </p><p>kaskdovch styl nastavit napklad, jak prvky se maj objevit a jak nikoliv. To u </p><p>je lep, ale stle jsme nedoshli maxima, kter meme uivateli poskytnout. To </p><p>nabz tet monost, a to speciln pro mobiln zazen nebo tablet naprogramovat </p><p>pln jin web. K tomuto kroku me hodn pomoci prv knihovna z rodiny jQuery, </p><p>a to jQuery Mobile. Tato knihovna je speciln upraven pro pouvn v chytrch </p><p>telefonech. Jej pouit zv komfort pi prochzen webov strnky. </p><p>Obr. 9: Ukzka speciln upraven webov strnky pro chytr telefony </p></li><li><p>18 </p><p>3.3 Implementace styl a knihoven do webov strnky </p><p>V kapitolch ve jsme si popsali, jak funguj jednotliv programovac a znakovac </p><p>jazyky, ale zajist vs napadlo, jak e on ten prohle pozn, e m dan kd </p><p>chpat jako jQuery nebo kde m hledat extern soubor pro kaskdov styly. To je </p><p>sprvn otzka. Prohle to samozejm nev, ale my mu to ekneme. Tyto </p><p>informace mu sdlme v tzv. hlavice webu tj. mezi tagy . </p><p>Obr. 10: Ukzka kdu pro implementaci soubor kaskdovch styl </p><p>Obr. 11: Ukzka kdu pro implementaci soubor knihoven jQuery </p><p>3.4 Postup tvorby designu webovch strnek koly </p><p>Na rozdl od technickho zpracovn, kter jsme cel po pvodnm tvrci pedlali, </p><p>pvodn design jsme pouili jako koncept a se souhlasem jsme ho pepsali do </p><p>naeho podn HTML a CSS. Vsledn grafika mla pvodn podobu, ale byla </p><p>nakdovna nmi. Respektovali jsme tedy nvrh pvodnho tvrce, ten jsme </p><p>zpracovali v naem podn, nebo i v ppad designu je velmi nron se orientovat </p><p>v ji napsanm kdu. Kad kodr nebo programtor pouv specifick formtovn </p><p>kdu, aby jemu piel nejsrozumitelnj. Neznamen to vak, e kdy je </p><p>srozumiteln pro jednoho, bude srozumiteln pro vechny. </p></li><li><p>19 </p><p>4 Technick st webov strnky </p><p>4.1 Odlien technick st...</p></li></ul>