Webdesign

Vítej­te na webo­vých strán­kách před­mě­tu Web­de­sign na Střed­ní prů­mys­lo­vé ško­le Emi­la Kol­be­na v Rakovníku!

Na tom­to mís­tě najde­te výu­ko­vé pod­kla­dy k pro­bí­ra­né lát­ce i kon­krét­ní zadá­ní pro samo­stat­né pro­cvi­čo­vá­ní. Během dru­hé­ho, tře­tí­ho a čtvr­té­ho roč­ní­ku spo­leč­ně pro­jde­me celou ces­tu od úpl­ných zákla­dů až po vývoj kom­plex­ních webo­vých apli­ka­cí. Nako­nec se s web­de­signem potká­te u prak­tic­ké čás­ti matu­rit­ní zkoušky.

Druhý ročník

Ve dru­hém roč­ní­ku polo­ží­me pev­né zákla­dy. Nej­pr­ve si vysvět­lí­me teo­rii – jak fun­gu­jí webo­vé strán­ky, co je to domé­na, hos­ting a jak pro­bí­há komu­ni­ka­ce mezi kli­en­tem a ser­ve­rem. Násled­ně se pře­su­ne­me k samot­né­mu kódování:

• HTML – tvo­ří struk­tu­ru a obsah webo­vé strán­ky (kost­ru webu).
• CSS – sta­rá se o vzhled, roz­vr­že­ní prv­ků a gra­fic­ký styl.
• JavaScript – dodá­vá strán­kám inter­ak­ti­vi­tu a dyna­mič­nost pří­mo v prohlížeči.

Třetí ročník

Ve tře­tím roč­ní­ku posu­ne­me naše zna­los­ti dále a podí­vá­me se pod kapo­tu webo­vých ser­ve­rů. Nau­čí­me se tvo­řit webo­vé apli­ka­ce, kte­ré doká­ží pra­co­vat s daty uživatelů:

• PHP – ser­ve­ro­vý jazyk, kte­rý zpra­co­vá­vá poža­dav­ky, řídí logi­ku apli­ka­ce a gene­ru­je dyna­mic­ký obsah.
• MySQL – relati­o­nal­ní data­bá­ze, do kte­ré bude­me uklá­dat a ze kte­ré bude­me načí­tat data (např. uži­va­te­le, člán­ky či produkty).

Čtvrtý ročník

Ve čtvr­tém roč­ní­ku pro­po­jí­me všech­ny dosud zís­ka­né doved­nos­ti a zamě­ří­me se na praxi.

• Wor­d­Press – vyzkou­ší­me si prá­ci s nej­roz­ší­ře­něj­ším redakč­ním sys­té­mem na svě­tě. Bude­me pro něj vytvá­řet vlast­ní šab­lo­ny a plu­gi­ny na míru.

Praktická maturitní zkouška

Web­de­sign je jed­ním ze tří před­mě­tů, kte­ré tvo­ří prak­tic­kou část matu­rit­ní zkouš­ky. Matu­rit­ní zadá­ní pro­vě­ří vaše kom­plex­ní zna­los­ti a schop­nost samo­stat­ně vytvo­řit funkč­ní a este­tic­ký web.

Používané nástroje

Pro barev­nou pale­tu může­te vyu­žít služ­bu napří­klad coolors.co.

Wirefra­me i gra­fic­ký návrh pro­sím při­pra­vuj­te v nástro­ji figma.com.

Ke kódo­vá­ní strá­nek vyu­ží­vej­te pro­gram Visu­al Stu­dio Code.

Pro nahrá­ní strá­nek na web­ser­ver pou­ží­vá­me FTP kli­en­ta File­Zil­la, pří­pad­ně Win­SCP.

Jak se při­po­jit na škol­ní ser­ver nalez­ne­te zde.

Validátor

Správ­nost HTML kódu lze ově­řit pomo­cí služ­by kon­sor­cia W3C dostup­né na URL: https://validator.w3.org/. Vali­dá­tor potom strán­ku ana­ly­zu­je a vypi­su­je pří­pad­né chy­by a upo­zor­ně­ní, napří­klad nespráv­ně uza­vře­né tagy, nezná­mé nebo zasta­ra­lé znač­ky, chy­bě­jí­cí atri­bu­ty, špat­nou struk­tu­ru doku­men­tu či pro­blémy s dekla­ra­cí zna­ko­vé sady. Díky tomu mohou vývo­já­ři snad­no odha­lit a opra­vit nedo­stat­ky, kte­ré by moh­ly způ­so­bit chyb­nou inter­pre­ta­ci strán­ky v růz­ných prohlížečích.

HTML strán­ku je nej­pr­ve zapo­tře­bí nahrát na web­ser­ver dostup­ný z internetu. 

Ode­vzda­né úko­ly a prá­ce v hodi­ně je nut­né před ode­vzdá­ním zkon­t­ro­lo­vat vali­dá­to­rem, nesmí se zde obje­vit žád­ná varo­vá­ní (žlu­tě ozna­če­né hláš­ky) a kri­tic­ké chy­by (čer­ve­né hlášky).

Stránky na procvičování

• Selek­to­ry – CSS Din­ner, CSS Selec­tor Practice
• Flex­box – Flex­box Fro­ggy, Flex Box Adventure
• Gri­d­box – Grid Gar­den, Grid Attack

Písma

V zadá­ních jsou vyu­ží­vá­na písma Nuni­to, Pop­pins, Mont­serrat, Arial, Open Sans a Robo­to, pokud není uve­de­no jinak. Pod­le před­lo­hy úko­lu vyhle­dej­te správ­né písmo na Goo­gle Fonts a vyu­žij­te ho v úko­lu. Iko­ny vyu­žij­te z webu Goo­gle Icons.

Z bez­peč­nost­ních důvo­dů došlo ke změ­ně čís­la por­tu, kte­rým se při­po­ju­je­me ke škol­ní­mu webo­vé­mu a data­bá­zo­vé­mu ser­ve­ru.
Nově je čís­lo por­tu 67.

Dal­ší podklady

Školní barvy

Pur­pu­ro­vá: #f142af

Azu­ro­vá: #33a6d7

Žlu­tá: #ffe82c

Zele­ná: #02AF54

Oran­žo­vá: #ED6D1D

Školní logo

logoStáh­nout pro svět­lé pozadí

logoStáh­nout pro tma­vé pozadí