Tvorba webových stránek školy

Embed Size (px)

Text of Tvorba webových stránek školy

  • SStteeddookkoollsskk tteecchhnniikkaa 22001155

    SSeettkknn aa pprreezzeennttaaccee pprraacc sstteeddookkoollsskkcchh ssttuuddeenntt nnaa

    VVUUTT

    TVORBA WEBOVCH STRNEK KOLY

    Jakub Englick, imon Polan

    Gymnzium Zikmunda Wintra, Rakovnk

    Nmst Jana iky 186, 269 01 Rakovnk

  • 2

    Prohlen

    Prohlaujeme, e jsme svou prci vypracovali a pouili jsme pouze podklady

    (literaturu, projekty, SW atd.) uveden v seznamu vloenm v prci.

    Prohlaujeme, e titn verze a elektronick verze soutn prce jsou identick.

    Nemm zvan dvod proti zpstupovn tto prce v souladu se zkonem

    . 121/2000 Sb., o prvu autorskm, o prvech souvisejcch s prvem autorskm

    a o zmn nkterch zkon (autorsk zkon) v platnm znn.

    V Rakovnku dne 11. 5. 2015

  • 3

    Podkovn

    Dkujeme Mgr. Martin Vokov za pomoc pi tvorb na prce.

  • 4

    Anotace

    V teoretick sti, kter je dlena na 7 kapitol jeden nebo druh popisujeme

    kompletn tvorbu webovch strnek koly od prvotnho npadu a po finln realizaci.

    Krom samotnho popisu tvorby vysvtlujeme jednotliv monosti tvorby webu pro

    zatenky a popisujeme jednotliv postupy, programovac a kdovac jazyky.

    Jako praktick st na prce nm poslouil ji fungujc web koly.

    Klov slova

    Tvorba webu, koln webov strnky, postup vvoje webu, web vzdlvac instituce,

    technologie webovch strnek

  • 5

    Dlen prce

    Nvrh a vbr postupu tvorby webu.Jakub Englick

    Uivatelsk prosted webov strnky. Jakub Englick

    Technick st webov strnky....imon Polan

    Administrace webu..imon Polan

    ast problmy pi vvoji webu.imon Polan

    Finln ladn a pprava startu..Jakub Englick

    SEO optimalizace.imon Polan

  • 6

    Obsah

    1 VOD ................................................................................................................... 8

    2 NVRH A VBR POSTUPU TVORBY WEBU ................................................. 9

    3 UIVATELSK PROSTED WEBOV STRNKY ......................................... 10

    3.1 WEBDESIGN .................................................................................................. 10

    3.1.1 Grafik .................................................................................................... 11

    3.1.2 Kodr .................................................................................................... 12

    3.2 ZNAKOVAC A PROGRAMOVAC JAZYKY ........................................................... 13

    3.2.1 HyperText Markup Language ................................................................ 13

    3.2.2 Cascading Style Sheets ........................................................................ 14

    3.2.3 JavaScript ............................................................................................. 15

    3.2.4 jQuery ................................................................................................... 15

    3.2.4.1 jQuery UI ........................................................................................... 16

    3.2.4.2 jQuery Mobile .................................................................................... 16

    3.3 IMPLEMENTACE STYL A KNIHOVEN DO WEBOV STRNKY ................................. 18

    3.4 POSTUP TVORBY DESIGNU WEBOVCH STRNEK KOLY .................................... 18

    4 TECHNICK ST WEBOV STRNKY ........................................................ 19

    4.1 ODLIEN TECHNICK STI OD DESIGNU .......................................................... 19

    4.2 TECHNOLOGIE ............................................................................................... 19

    4.2.1 Jazyk PHP ............................................................................................ 19

    4.2.2 Jazyk SQL............................................................................................. 23

    4.2.3 HTACCESS .......................................................................................... 24

    4.2.4 Frameworky .......................................................................................... 24

    4.3 ZABEZPEEN ................................................................................................ 25

    4.4 ZKLADN STAVEBN KAMENY ........................................................................ 26

    4.4.1 Hlavika webu ....................................................................................... 26

    4.4.2 Bon panel ........................................................................................... 26

    4.4.3 Menu ..................................................................................................... 27

    4.4.4 lnky ................................................................................................... 28

    5 ADMINISTRACE WEBU .................................................................................... 29

    5.1 PSTUP DO ADMINISTRACE ............................................................................ 30

  • 7

    5.2 SEZNMEN S ADMINISTRAC ........................................................................... 33

    5.3 OBSAH ADMINISTRACE .................................................................................... 34

    5.3.1 Menu ..................................................................................................... 36

    6 AST PROBLMY PI VVOJI WEBU ......................................................... 39

    6.1 OPTIMALIZACE PRO WEBOV PROHLEE ........................................................ 39

    6.2 ODLIN VERZE A NASTAVEN SERVERU ........................................................... 40

    6.3 OPTIMALIZACE WEBU ...................................................................................... 40

    7 FINLN LADN A PPRAVA STARTU ........................................................ 41

    7.1 PPRAVA PROSTORU PRO HOTOV PROJEKT ................................................... 41

    7.2 PESUN A START WEBU .................................................................................. 42

    7.3 GOOGLE ANALYTICS....................................................................................... 44

    8 SEO OPTIMALIZACE ........................................................................................ 45

    8.1 CO JE SEO OPTIMALIZACE? ............................................................................ 45

    8.2 REGISTRACE DO VYHLEDVA ....................................................................... 46

    9 ZVR ............................................................................................................... 47

    10 SEZNAM POUIT LITERATURY A ZDROJ ............................................. 48

  • 8

    1 vod

    Nae kola mla mnoho let webov strnky na zastaralm redaknm systmu

    Joomla, kter byl pro kolu velmi nevyhovujc. Vdli jsme, e se chyst web nov.

    Msce utkaly, ale nov web stle nebyl na svt. V tom ns oslovili pedagogov

    na koly, zdali bychom nepebrali prci po lovku, kter nem as a chu web

    koly dokonit. Vdli jsme, e web je velk vzva, kterou jsme si nechtli nechat ujt

    a tak jsme chtli bt u toho. Seli jsme se s vedenm koly a dosavadnm tvrcem

    webu a probrali dal postup prce. Byly nm nabdnuty vechny kdy, kter

    doposud byly napsny, a my jsme v nich mohli pokraovat. Nelenili jsme ani okamik

    a tto nabdky jsme se chopili s velkm nadenm.

  • 9

    2 Nvrh a vbr postupu tvorby webu

    Pebrat po nkom kd nen tak jednoduch, jak by si laik mohl myslet, kad

    programtor m svj styl psan i postupy pi pojmenovvn promnnch. Pvodn

    jsme zamleli pouze pokraovat v zapoat prci, nicmn v moment, kdy jsme

    vidli dosavadn prci, jsme si uvdomili, e porozumn ji napsanmu kdu by nm

    zabralo vce prce ne napsn vlastnho.

    Veden koly souhlasilo s nam novm zmrem -nepout pvodn kd, ale vytvoit

    kd vlastn. Bhem krtkho asovho seku jsme pak pepsali kd podle svch

    pedstav a po konzultaci s vedenm a doladn poslednch poadavk jsme se pustili

    do kompletn realizace webovch strnek.

  • 10

    3 Uivatelsk prosted webov strnky

    3.1 Webdesign

    Anglick slovo design je odvozeno z latinskho de-signare, oznait, vyznait,

    a postupn dostalo tak vznamy navrhnout i nvrh..1 Webdesign neboli design

    webu je grafick podoba webovch strnek ili to, co vid koncov uivatel. O design

    se nejastji staraj dva lid - grafik a kodr. Dal monost je, e se lovk rozhodne

    udlat si design webov strnky sm. Zde m dv monosti. Me navtvit njak

    portl, kter se zabv tvorbou webovch strnek a tam pomoc prvodce vytvoit

    ablonov webov strnky. Jednm takovm portlem je webnode.cz. Pokud ale

    tvrce m vy cle, me se pokusit vytvoit web svpomoc. K tomu slou

    specializovan programy jako je napklad Microsoft Publisher. Je mon tak vyut

    rzn online genertory webdesignu.

    1 Design: Wikipedia.org [aktualizovno: 25. 8. 2014 v 20:42, cit. 8. 12. 2014] dostupn z: http://cs.wikipedia.org/wiki/Design

  • 11

    3.1.1 Grafik

    Grafik na zklad zadn udl grafick nvrh webu. Vytvo vechny obrzky

    a grafick komponenty webu, eho vznikne kompletn design, kter je nsledn

    rozezn na jednotliv sti a pedn kodrovi. Nejrozenjm nstrojem pro tuto

    prci je Adobe Photoshop, ale zkladn prvky designu lze udlat i v malovn, ovem

    vae monosti na kvalitn design jsou omezen funkcemi programu.

    Obr. 1: Ukzka programu Adobe Photoshop

  • 12

    3.1.2 Kodr

    Kodr za pomoci jazyk HTML a CSS vy