Kapitola 6

Úvod do tvorby www stránek
Tvorba www 4
Práce s formuláři
• Lze rozdělit na dvě části: návrhovou a programovací (tj. vývoji skriptu).
• Pomocí formulářů provádíme reálnou interaktivitu stránky s uživatelem.
• Slouží k zadání/zapsání a odeslání dat/informací uživatelem.
• Poskytují množství různých ovládacích prvků, které lze na www stránce použít.
• Není možné je navzájem vnořovat.
• Obsah formuláře je možné kontrolovat pomocí skriptu ještě před odesláním.
• Odeslaný formulář je zpracován na straně serveru k následujícímu účelu.
Interaktivní = umožňující vzájemnou komunikaci, tj. přímý vstup do činnosti stroje nebo
programu.
Pro vytvoření formuláře se použije párový tag: <form> </form>, který má tyto atributy:
action
method
accept
enctype
onsubmit
URL adresa stránky, na kterou je formulář posílán pro
zpracování
metoda odeslání dat – GET / POST (implicitně GET), určuje
způsob jakým, budou data odesílána
formát souborů, který bude při zpracování akceptován, seznam
více formátů oddělený čárkou "image/gif,image/jpg"
kódování (formát) odchozích dat:
application/x-www-form-urlencoded, multipart/form-data
událost v okamžiku odeslání dat
Pro validaci stránky použijte: <form action="">
Metody odesílání formuláře
get (krátké formuláře, bez diakritiky v názvech a hodnotách)
• implicitní metoda (základní),
• hodnoty odesílá jako součást URL adresy (vše se odehrává v jednom přenosovém
kroku, hodnoty jsou přímo viditelné v URL adrese – NEBEZPEČNÉ, možné zneužití),
• vhodná pro krátké formuláře, pokud v názvech a hodnotách není diakritika a nejedná
se o citlivé údaje.
post (rozsáhlé formuláře, odesílání souborů, hesel)
• hodnoty odesílá na server v samostatném přenosu, tj. jako samostatná HTTP objekt,
• vhodné pro rozsáhlé formuláře nebo soubory,
• transakci, v níž se přenášejí parametry lze zabezpečit.
Ovládací prvky
• Různé prvky jsou vhodné pro různé činnosti a typy informací.
• Každý ovládací prvek má jedinečné jméno v rámci formuláře.
• Atribut id je na jménu nezávislý.
• Ovládací prvek má vždy nějakou aktuální hodnotu.
•
•
Prvek může mít zadanou i nějakou výchozí hodnotu.
Práce s ovládacími prvky často spočívá ve využití skriptů na straně klienta (validace,
spolupráce mezi prvky) nebo na serveru (nastavování hodnot a plnění nabídek např.
hodnotami z databáze).
Vstupní prvek – input (vždy nepárový element), očekává vstup od uživatele.
<input type="text" name="jmeno" value="Vaše jméno" size="15" maxlength="20" />
type
name
id
value
disabled
size
maxlength
typ ovládacího prvku
text, password, checkbox, radio, submit, reset, button, image,
hidden, file
název prvku, pouze pro účely odesílání formuláře
identifikátor prvku, identifikace ve stylech, skriptech
implicitní (výchozí) hodnota ovládacího prvku
„znepřístupnění“ prvku, nelze měnit jeho hodnotu
velikost prvku, tj. délka políčka ve znacích
max. velikost prvku, tj. max. délka políčka ve znacích
Textové pole
Základním prvkem formuláře je textové políčko, do něhož se vepisují požadované informace.
Políčku můžete také navolit jeho velikost, která se zadává parametrem size="délka". Pokud
nezadáte velikost políčka, bude nastavena standardní délka zhruba 20 písmen.
Protože můžete psát do políčka text delší, než je jeho velikost, lze nastavit i maximální počet
znaků, které lze do políčka vepsat: maxlength="počet slov". Do políčka pak nelze zapsat text
delší, než jste zadali.
Příklady
Zadejte své příjmení:
<input type="text" name="Příjmení" size="25" maxlength="100" align="left"
title="Příjmení" />
Zadejte své jméno:
<input type="text" name="Jméno" size="25" maxlength="100" align="left" title="Jméno" />
title – popisek ve žlutém rámečku
value
Doplňkem definice textového políčka je možnost přednastavit text, který bude v políčku
vepsán již při příchodu uživatele na zadanou stránku, a sice parametrem:
value="přednastavený text".
Zdejte své příjmení
<input type="text" name="prijmeni" value="Vaše příjmení" size="30" maxlength="50" />
2
Zdejte své jméno
<input type="text" name="jmeno" value="Vaše křestní jméno" size="20" maxlength="50" />
password
Chcete−li použít políčka např. pro nastavení hesla, kdy nechcete, aby někdo mohl text do
políčka napsaný (heslo) opsat, použijte:
input type="password"
To, co píšete, se bude zobrazovat jako série hvězdiček. I zde je možné dodat implicitní text,
ten se také zobrazí jako hvězdičky.
Pro přihlášení zadejte heslo:
<input type="password" name="Heslo" size="10" value="50" />
checkbox
Používaným prvkem formulářů jsou zatrhávací políčka. Ta se používají především tam, kde
stačí pouze souhlasit nebo nesouhlasit s daným tvrzením, Pro zobrazení zatržítka se používá
značka input, pouze s jinou hodnotou parametru type:
<input type="checkbox">
Parametr checked určuje, zda má být políčko implicitně zatrhnuto či nikoliv. Je−li parametr
přítomen, bude zaškrtnuto, jinak ne.
<input type ="checkbox" checked="checked" >
Zatrhnutí políčka není nevratné; pokud je jednou zaškrtnete, lze jej opět odškrtnout a naopak.
K snídani si přeji:<br />
kávu: <input type="checkbox" name="Vyber"/> <br />
čaj: <input type="checkbox" name="Vyber"/> <br />
juice: <input type="checkbox" name="Vyber" checked="checked" /> <br />
jogurt: <input type="checkbox" name="Vyber"/> <br />
máslo: <input type="checkbox" name="Vyber"/> <br />
chléb: <input type="checkbox" name="Vyber" checked="checked"/> <br />
radio
Druhým typem zaškrtávacích tlačítek je tzv. radiobutton, který podobně jako checkbox může
mít dva stavy: zaškrtnuto a nezaškrtnuto. Používá se však odlišně: jako výběr jednoho
z mnoha. Pokud necháte pomocí radiobuttonů tento výběr zobrazit na stránce, může pak
3
uživatel klepnutím myši na kolečko zatrhnout jeden z výběrů, výběrem jiného rozmezí se
původní výběr zruší. Nelze tedy zaškrtnout více výběrů naráz.
<input type="radio">
Každý jeden takový řádek vytvoří jedno „kolečko“, tedy jednu možnou volbu z celého
seznamu. Pokud je takových voleb více, je nutné použít odpovídající počet značek input.
U každé značky nesmí chybět parametr name se stejnou hodnotou, aby prohlížeč poznal, že
všechny výběry patří k sobě.
Pokud chcete vytvořit nějaké implicitní nastavení, přidejte k některé značce input parametr
checked, který má stejný význam jako u zatrhávacích políček. Radiobuttony se
hodí tam, kde zvýší přehlednost, a není mnoho možností na výběr.
K obědu si přeji: <br />
<input type="radio" name="Obed" value="veprove" /> veřové maso
<input type="radio" name="Obed" value="kureci" checked="checked" /> kuřecí maso
<input type="radio" name="Obed" value="ryba" /> rybu
<input type="radio" name="Obed" value="vegetarian" /> vegetariánské
<br /><br />
Tlačítko
Po vyplnění formuláře musí dát uživatel na vědomí prohlížeči, že může s obsahem formuláře
dále pracovat. Buďto obsah odeslat serveru nebo předat nějakému řídicímu skriptu. To
zpravidla provádí klepnutím na tlačítko, které bývá umístěno na konci formuláře. To se
definuje opět klasickým způsobem, značkou input:
<input type="button" value="tlačítko">
Velikost tlačítka se přizpůsobí velikost textu, který je uveden jako hodnota parametru value.
Pokud ji napíšete třeba takto:
<input type="button" value="
Tlačítko
">
zvětší se zároveň i velikost tohoto tlačítka.
Tlačítka, vytvořená elementem input mají svá omezení. Jsou tvořena buď pouze textem, nebo
pouze obrázkem.
<input type="submit" name="Odeslani" value="Odeslat formular" />
4
type
name
disabled
value
funkce tlačítka:
• submit – předání všech hodnot ve formuláři skriptu,
odesílá veškeré vyplněné hodnoty formuláře na server
• reset – vymaže prvky formuláře a nastaví implicitní
hodnoty
• button – spustí požadovaný skript
název elementu, jméno tlačítka, na které se odkazují skripty,
které jsou s tlačítkem provázány
znepřístupnění tlačítka, tlačítko nepůjde použít, bude zašedlé a
nepůjde na ně klepnout myší
výchozí hodnota, která je předána skriptu
Příklad
Pro odeslání vyplněného formuláře použijte tlačítko:
<input type="submit" name="Odeslani" title="Odeslání" value="Tlačítko k odeslání"/>
Příklad
Tlačítko – button
Chcete pokračovat?
<br />
<input type="button" name="Volba1" value="ANO" />
<input type="button" name="Volba2" value="NE" />
<input type="button" name="Volba3" value="Nevím" />
Další možnosti tlačítek jsou následující:
•
type="reset"
Tlačítko, které se používá při resetování (vymazávání, nastavení na původní hodnotu)
všech prvků formuláře.
•
type="submit"
Tlačítko, po jehož stisknutí se obsah vyplněného formuláře odesílá směrem k serveru.
Rozbalovací nabídka (roletka) – select
Ohraničuje vysunovací nabídku – roletka s výběrem možných voleb. Vedle textového políčka
se objeví malá šipka ukazující směrem dolů. Pokud na ni klepnete myší, ukáže se seznam
možných hodnot, z nichž lze jednu vybrat.
K tomu slouží značka
<select name="jméno výběru">
Následuje seznam položek, které lze ze seznamu vybrat; ty jsou definovány další značkou,
a to ve sledu, v jakém budou zobrazeny. Obsahem jsou jednotlivé položky, každá
reprezentovaná jedním elementem option.
5
<select name="jméno výběru">
<option>výběr 1</option>
<option>výběr 2</option>
<option>výběr 3</option>
</select>
Odesílá se vždy hodnota (value) vybrané položky.
size
multiple
optgroup
počet viditelných položek nabídky (bez vysunutí)
umožňuje označení (výběr) více položek současně
vytvoření skupin uvnitř vysunovací nabídky, skupiny nelze
navzájem vnořovat
Příklad
Příloha k obědu:
<select name="ovoce">
<option value="jb">jablko</option>
<option value="hs">hruška</option>
<option value="sv">švestka</option>
<option value="an">ananas</option>
<option value="br">broskev</option>
</select>
Parametr multiple určuje, že půjde vybrat více položek seznamu současně (přidržením
klávesy CTRL nebo SHIFT, podle standardu Windows). V praxi se však tento parametr moc
nepoužívá, pokud chcete nabídnout uživateli více možností, použijte raději zatrhávací políčka,
tzv. checkboxy.
size="n": počet řádků, které jsou v roletce implicitně zobrazeny
Roletka tak má předem danou velikost a je−li počet položek větší, vytvoří se v pravé části
roletky posuvník, kterým můžete seznamem rolovat. Z vysouvací roletky se tak vytvoří
roletka se stálou velikostí.
Vyberte si dva dny v týdnu, kdy se semináře účastníte:
<select name="Den" size="5" multiple="multiple" title="Vyberte den v týdnu">
<option value="po">pondělí</option>
<option value="ut">úterý</option>
<option value="st">středa</option>
<option value="ct">čtvrtek</option>
<option value="pa">pátek</option>
</select>
6
Příklad
<select name="vyber_polozek" size="3" multiple>
<option value="1" selected="selected">Volba 1</option>
<option value="2">Volba 2</option>
<option value="3">Volba 3</option>
<option value="4">Volba 4</option>
<option value="5">Volba 5</option>
</select>
Textová oblast – textarea (párový element)
Umožňuje vytvořit pole o libovolném počtu řádku. To se hodí např. tehdy, když chcete, aby
vám uživatel napsal svůj názor, vyslovil kritiku nebo naopak pochvalu. Psát delší text do
jednořádkového pole je nepřehledné. Na rozdíl od značky input, která je nepárová,
je textarea značkou párovou.
Značka textarea má podobné parametry jako jednořádkové políčko, nezadává se však typ
prvku; ten je totiž přímo určen značkou. Stejně jako u políčka má víceřádkové pole svoje
jméno (name) a velikost. Zadává trošku jiným způsobem – parametry:
cols ="počet sloupců"
rows ="počet řádků"
<textarea cols="50" rows="5" name="jmeno"> </textarea>
rows
cols
readonly
disabled
počet viditelných řádků
šířka, vyjádřená počtem znaků na jednom řádku
obsah elementu je pouze pro čtení (odesílá se)
deaktivuje element (nelze měnit obsah, neodesílá se)
Při psaní textu delšího než je jeden řádek, se text automaticky zalamuje. To je dáno
implicitním nastavením parametru
wrap="on"
Pokud byste potřebovali (výjimečně) zalamování vypnout, zadejte jako hodnotu parametru
wrap ="off".
Příklad
Připomínky ke konání semináře vložte zde:
<textarea name="Pripominka" rows="3" cols="40" title="Připomínky k semináři">
</textarea>
7
Popisek – label
Slouží pro vytváření popisku u formulářového prvku.
<label>Jméno: <input name="jmeno"/> </label>
<label for="prvek">Jméno:</label>
<input name="prvek1" id="prvek"/>
Skupina ovládacích prvků: <fieldset> </fieldset>
• Vizuální seskupení ovládacích prvků s podobným účelem.
• Napomáhá zpřehlednění a lepšímu vzhledu formuláře.
Pojmenování skupiny prvků: <legend> </legend>
• Vytváří nadpis skupiny, vytvořené pomocí fieldset.
<form action="akce" method="post">
<fieldset>
<legend>Přihlášení do systému</legend>
<input type="text" name= "login" size="10" />
<input type="password" name= "heslo" size="10" />
<input type="submit" value="Odeslat údaje" />
</fieldset>
</form>
Příklad
Pro dokončení práce stiskněte tlačítko:
<input type="image" name="Obrazek" title="Tlačítko pro odeslání" src="tlacitko.gif" />
Ukázky tlačítek
http://agamabuttons.wz.cz/packages.html
Formuláře
http://www.jakpsatweb.cz/html/formulare.html
Validátor 2
Pokud je váš dokument HTM validní, na konci stránky s úspěšnou validací je umístěna ikona
a kód, který vložíte na svou stránku.
8
Tato ikona informuje ostatní uživatele, kteří zobrazí vaše www stránky, že dokument
dodržuje pravidla dané normy.
<p>
<a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0
Transitional" height="31" width="88" />
</a>
</p>
Webhosting
Základní body realizace vlastních www stránek a jejich publikování na internetu
• Název domény
• Zajištění/výběr webhostingu
• Vyplnění meta-informací do www stránek, základní SEO
o Stanovení stručného avšak výstižného popisu www stránek
o Sepsání klíčových slov
o Další informace pro vyhledávače a jiné roboty
• Navrhnout design stránek a strukturu webu
• Zvolit si programovací jazyky, techniky
• Vytvořit logo/slogan/trademark/banner
• Sepsat si „výplň“, textový obsah stránek
• Zřízení kontaktů
• Registrace v katalozích firem a vyhledávačích
• Nastavení statistiky
• Neustálé zlepšování
Název domény
• „Vymyšlení“ názvu domény, tj. vybrání vhodného názvu a přípony 0. řádu. (.cz, .sk,
.com, .org, .eu, .net, apod.)
např.: www.nasweb.cz, www.osu.com, www.mujwebik.eu, www.web.cz
9
•
•
•
Je důležité vybrat název tak, aby odpovídal a charakterizoval www stránky
publikované na vybrané doméně.
Nesmí kolidovat již s existujícími stránkami.
např.:
o www.web.cz (již existující),
o www.web.cz (který chcete založit), v tomto případně nepůjde, můžete si, ale
vybrat možnost jiné přípony 0. řádu,
o www.web.sk (pokud je s příponou .sk volný).
Kontrola/ověření „volnosti“ domén s příponou .cz u CZ.NIC
CZ.NIC, z. s. p. o. – zájmové sdružení právnických osob, www.nic.cz, hlavní činností
sdružení je provozování registru doménových jmen .cz.
ENUM, zabezpečení provozu domény, nejvyšší úrovně CZ a osvěta v oblasti doménových
jmen.
Jiné přípony (.sk, .com, .net apod.) u jiných registrátorů.
Zajištění/výběr webhostingu
Máte možnost z výběru z volného (free) hostingu a placeného hostingu.
„vlastnost“
vlastní název a výběr celé
domény (jméno + přípona)
doména 1. a 2. řádu (určitý
počet)
velikost web prostoru
rychlost UP/DOWN loadu
vlastní pošta
zálohování
garance dostupnosti webu
podpora jiných
programovacích
jazyků/skriptů, rozšíření
doplňkové služby
cena
•
•
free hosting
NE
placený hosting
ANO
NE
ANO
v řádu MB (max. GB)
v řádu kbit/Mbit
NE/omezená
omezené
NE
omezená
v řádu GB
v řádu Mbit/Gbit
ANO
různé stupně záloh
ANO
rozšířená, volitelná – složena
na míru potřeb
NE
zdarma
ANO – široký výběr
v řádu stovek korun
Výběr na základě dostupných informací, doporučení, vlastní zkušenosti
Vyhodnocení plusů a mínusů pro aktuální potřebu www stránek
Např. Free Hosting
Vyplnění meta-informací do www stránek
• Stanovení stručného avšak výstižného popisu www stránek – popis vašeho webu na
150 znaků, typicky o čem jsou www stránky, za jakým účelem je stvořen tento web a
k čemu slouží apod.
Například Web společnosti www.jurimedical.cz má popis: Společnost Jurimedical
poskytuje právně – ekonomicko – organizační a informační servis lékařům a
zdravotnickým pracovníkům v různých medicín. oblastech.
• Sepsání klíčových slov webu (max. 4–15, doporučeno 10 slov), tzn. slova, slovní spojení,
která vystihují zaměření webu a které „budou“zadávat lidé ve vyhledávačích.
10
Například web www.jurimedical.cz má klíčová slova: jurimedical, juri medical, právní
konzultace, právník, máte právo, ekonomické poradenství, zdravotnické zařízení,
lékařství, poradenství lékařům, organizační servis, školení, prezentace, akce.
Pro základní SEO (Search Engine Optimizatio), optimalizace pro vyhledávače
Další informace pro vyhledávače a jiné roboty – je potřeba vkládat tyto informace do www
stránek v podobě metadat. (Metadata jsou to strukturovaná data o datech.)
Na základní stránce (většinou index.html) se nastaví do hlavičky mezi párový tag
<head> </head> metadata ve formátu:
<meta name = "keywords" content = "JURIMEDICAL, juri medical, právní konzultace,
právník, máte právo, ekonomické poradenství, zdravotnické zařízení, lékařství, poradenství
lékařům, organizační servis, školení, prezentace, akce" />
// seznam klíčových slov, které vystihují web
<meta name = "robots" content = "all, follow" />
// informace pro robota, že má indexovat a prohledávat vše
<meta name = "author" kontent = "Vladimír Vávra, konan/zavinac/email/tecka/cz" />
// informace o autorovi, možnost uvedení kontaktu
<meta name = "description" kontent = "Společnost Jurimedical poskytuje právně –
ekonomicko – organizační a informační servis lékařům a zdravotnickým pracovníkům v
různých medicín. oblastech" />
// Stručný popis webu
<meta name = "copyright" kontent = "JURIMEDICAL s.r.o." />
// Stanovení copyrightu
<base href = "http://jurimedical.cz" />
//stanovení základní URL adresy webu, pomáhající relativnímu odkazování.
Uveden byl pouze příklad, jsou i jiné metadata pro následné zpracování roboty nebo
vyhledávači.
Navržení designu stránek
Především se jedná o vizuální dojem stránek na návštěvníka.
Grafičtí návrháři (částečně kodéři stránek) se zaměřují na:
• rozložení částí, celků na stránce,
• volbou fontů, barvy písma a pozadí,
• cílený design pro určitou skupinu zákazníků, návštěvníků (-náctiletí, dospělí, různé
zájmové skupiny apod.),
• design by měl vystihovat zaměření, účel webu,
• originalitu řešení jedinečnost, upozornění na sebe,
• celkovému sladění, vizuální dojem.
11
Zákazník
Měli byste mít představu o struktuře webu (tj. jak bude jednotlivé rozmístění částí webu
vypadat, tj. hlavní nabídka, menu, hlavní textová část, části pro obrázky, reklamu, aktuality
apod.). Představu interpretovat grafikovi, který vytvoří grafickou podobu stránek.
Základní struktura webové prezentace
Zdroj: http://info.spsnome.cz/WWW/Prezentace
Soubory na webu
http://www.jakpsatweb.cz/soubory.html
Každý server má nastavené jméno startovního souboru. Na většině serverů se to dá nastavit
(dokonce i pro ten který adresář), ale málokdy se to mění. To znamená, že si od správce
vašeho serveru musíte zjistit, jak se ten startovní soubor má jmenovat. Nejčastěji se používá
název index.html. Takto pojmenujte soubor se svou hlavní stránkou.
Vzhled webové stránky
• WWW stránka prezentuje informace
• Důležitý není jen obsah, ale i vizuální forma
• Vizuální ztvárnění je ovlivněno
o Typem a určením webové prezentace
o Použitými nástroji, prvky, technologiemi
o Informační strukturou a rozsahem
o Specifickými požadavky (rychlost, bezpečnost, specifická přístupnost)
o Módními trendy
Moderní trendy
• maximálně korektní a validní stránky,
• jednoduchý XHTML kód,
• znovupoužitelnost kódu (modularita),
• oddělení obsahu a formy,
• přehlednost, optimální granularita informací,
• uspořádanost (logické členění, intuitivnost),
• přístupnost (pozor na nestandardní a nepodporované prvky!),
• rychlost (optimalizace grafiky, animací),
12
•
alternativní navigace (hierarchické menu, mapa webu).
Layout
• Pojmem layout rozumíme vizuální rozvržení a vzhled stránky, interpretované
v prohlížeči.
• Vyžaduje kreativitu a grafické cítění autora.
• Moderním trendem je oddělení práce programátora stránek a tvůrce layoutu a
jakýchkoliv vizuálních změn.
• Layout se vytváří kombinací elementů jazyka XHTML, obrázků, grafických motivů a
doplňků.
Zdroj:
http://lide.uhk.cz/fim/ucitel/freylva1/prednasky/tnpw1-6.ppt#264,3,Vzhled webové stránky
Layout stránky
http://www.fit.vutbr.cz/~burgetr/tws/prednasky/p06/slide0900.html
Tvorba webových stránek
http://www.fit.vutbr.cz/~burgetr/tws/prednasky/p06/seznam.html
Existuje mnoho konstrukcí webu, graficky jsou tyto weby odlišné, jejich základ je velice
podobný – místo pro obsah, hlavičku, záhlaví.
První rozvržení spočívá v jednoduchém obsahu. Design čítá hlavičku, která by měla být na
každém webu, protože je to hlavní prvek, který ukazuje, na kterém webu se právě návštěvník
nachází, ideálně navíc informuje o zaměření webu. Dále je zde menu, nacházející se napravo
či nalevo. Vedle menu pak obsah stránek. Stránku dole může dotvářet i patička, která ale
v následující ukázce chybí. Tento první příklad se často používá pro blogy pro svou
jednoduchost.
Další příkladem je web s vodorovným menu. Navigace je přehledná a bývá většinou vkusně
členěna. Tento typ webu není přesto určen pro drastické změny v menu, neboť v případě
dalšího přidávání položek by mohl nastat problém v rozmístnění.
13
Pata na webech je povětšinou estetická záležitost, bývá v ní uveden copyright, autor stránek,
informace o použitých technologiích na webu, další navigace atd.
Dalším typem je třísloupcový layout, kde obsah je umístněn v centru, a po stranách jsou dva
sloupce. V levém sloupci může být umístněna navigace stránek, v pravé uživatelská
nastavení, bannery nebo poslední komentáře.
Zvolení programovacích jazyků, techniky
• Předem si ujasnit účel stránek a požadované funkce na stránkách.
• Zvolit vhodný programovací jazyk, techniku, podporu vývoje, testování apod.
o Jazyky: HTML /XHTML + CSS, JS – JavaScript, AJAX, FLASH, PHP,
JAVA, .NET.
o Nástroje: grafické a programovací prostředí, editory, apod.
• Rozlišení free a komerčních licencí pro užívání k vaší tvorbě www stránek.
• NE všechny nástroje a jazyky jsou vhodné pro všechno, tj. nic není dokonalé ani zcela
univerzální!
Vytvoření loga, sloganu, trademark, banneru
• Logo – charakterizuje web stránky, firmu apod. Pozor na ochranné známky, ať
náhodou nepoužijete (i nevědomky) podobné logo, které je již chráněno.
• Slogan – heslo či motto, které pomáhá upoutávat pozornost ke společnosti či k jejímu
produktu. Vystihuje účel stránek, firmy, krátký výstižný, lehce zapamatovatelný (není
vždy podmínkou).
• Trademark – obchodní značka je označení, pomocí kterého firmy identifikují samy
sebe, své výrobky a služby; viditelné umístění a vhodné umístění na stránce (není
vždy podmínkou).
14
•
Banner – upoutávka se využívá pro reklamu na jiných serverech (vzájemná spolupráce
na propagaci webu, produktů apod. Vhodné vytvořit několik variant velikostí.
Připravit text do www stránek a zřídit kontakty
Text pro jednotlivé stránky
• Připravit si text pro jednotlivé stránky, obrázky, dokumenty, tabulky apod.
• Při tvorbě www nemusí být text již předem připravený a může se měnit, proto se
doporučuje používat jazyk LIPSUM.
• Typicky: Úvodní text, Hlavní text, Kontaktní informace, Portfolio (fotogalerie),
Reference, Dotazy, FAQ, Formulář.
• Možnost jazykových mutací (CZ, GB/US, DE, apod.)
Zřízení kontaktů
• Uvést na stránkách kontakty (např. kontaktní osobu, adresu, mapu, telefon, emaily
apod.).
• Uvést tvůrce stránek (pokud se chcete prezentovat).
Registrování v katalozích a vyhledávačích
Vyhledávače
• Google, Yahoo, MSN Live (Bing), Seznam, Centrum, Atlas aj.
• Někteří umožňují registraci, někteří používají své vyhledávací a registrační techniky.
Katalogy firem
• Najisto, Mapy, aj.
• Možnost uvedení vašich „správných“ informací, ne pouze na základě robotů.
Nastavení statistiky
• Stanovit kritéria sledování
• Stanovit vyhodnocení sledovaných kritérií
• Reagovat a provést případné změny
Neustálé zlepšování
• Sledovat vývoj aktuálních informací na www stránkách,
• Sledovat trendy v oblasti IT, webu,
• Sledovat preference zákazníků, uživatelů www,
• Následně na tyto body reagovat a přizpůsobit web, který není „mrtvý“, ale díváme se
na něj jako na „živý“ organismus. (Ne vždy to bohužel jde.)
Odkazy pro realizaci www stránek
Zjištění dostupnosti CZ domény
www.nic.cz
Otestování stránek na validitu (HTML a CSS validátor)
http://validator.w3.org/
Otestování SEO stránek (komerční web zaměřený na otestování webů)
http://seo-servis.cz/
15
Lorem Ipsum
Lorem Ipsum je demonstrativní výplňový text používaný v tiskařském a knihařském
průmyslu, text pro naplnění stránek.
http://cs.lipsum.com
Jak na webhosting
http://www.tvorba-webu.cz/webhosting/
Vytvořte si Webové stránky zdarma
http://www.webnode.cz/
Publikování na WWW – Přístupnost webu
http://info.spsnome.cz/WWW/Seo
Interval.cz
www.interval.cz
Web tvorba
http://www.webtvorba.cz/
Typografie
http://typografie.dero.name/index.html
Šablony a rozložení
http://design.stranek.cz/
http://templater.cz/
http://www.dotemplate.com/
http://www.emag.cz/dejte-webu-zadarmo-novou-tvar/
http://www.freesitetemplates.com/
http://www.free-templates-layouts.com/
http://www.interspire.com/templates/
http://www.mastertemplates.com/
http://www.styleshout.com/
http://www.templates.cz/
http://www.templatesbox.com/
http://www.webove-sablony.cz/webove-sablony/zdarma/
http://www.web-sablony.com/
16
Webhosting a FTP připojení – praktická část
• Vhodný výběr webhostingu
• Nastavení webhostingu
• Příprava webové struktury
• Nastavení FTP připojení
• Nahrání testovacích stránek
Výběr webhostingu
Máte možnost z výběru z volného (Free) hostingu a placeného hostingu.
• Výběr na základě dostupných informací, doporučení, vlastní zkušenosti.
• Vyhodnocení plusů a mínusů pro aktuální potřebu www stránek
Např. Free Hosting
Nastavení webhostingu
• Po obdržené registraci dostanete nezbytné údaje pro nalogování k doméně a její
správě.
• Většina poskytovatelů webhostingu nabízí již automaticky základní nastavení pro
www stránky a doplňky kolem (databáze, free-mail, apod.)
• Přístup k doméně většinou přes webové rozhraní a FTP spojení.
• Pozor na nastavení přístupu (práv) k jednotlivým adresářům!
17
Přihlašování
Po přihlášení – úvodní stránka s obsahem domény
Příprava webové struktury
• Vhodné pro lepší orientaci na doméně. Nezbytností, pro větší webové projekty apod.
• Adresářová struktura by měla rozlišovat mezi vlastními webovými stránkami, CSS,
Java skripty, obrázky (ikonky, avatary, malé a velké obrázky apod.), ostatními daty
(tzv. pro download), aj.
18
Nastavení FTP připojení
Nastavení FTP připojení přes PSPad editor
Záložka FTP spojení
19
Vytvoření FTP spojení
20
Vyplnění FTP spojení
Připojování k FTP (stav červeně)
21
Připojeno k FTP (stav zeleně) a vytvoření adresářů
Uložení souboru přes FTP na doménu
Úkol č. 3 (Moodle)
Zřiďte si www hosting. Vytvořte 3 vzájemně propojené www stránky, na které vložíte prvky,
které jste se během výuky naučili udělat – obrázky, tabulky, odkazy, prvky formuláře.
Stránky zaměřte na jedno společné téma – životopis, www stránky fiktivní firmy, www
stránky zájmového sdružení, pozvánka na akci a informace o ní atd.
URL adresu (odkaz) na vaše stránky vložte jako text.
22