Interaktivní = umožňující vzájemnou komunikaci, tj. přímý vstup do činnosti stroje nebo programu.

Transkript

1 Ú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.

2 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

3 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

4 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

5 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

6 <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

7 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

8 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 Formuláře 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

9 Tato ikona informuje ostatní uživatele, kteří zobrazí vaše www stránky, že dokument dodržuje pravidla dané normy. <p> <a href=" <img src=" 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ř.:

10 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 (již existující), o (který chcete založit), v tomto případně nepůjde, můžete si, ale vybrat možnost jiné přípony 0. řádu, o (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, 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 free hosting placený hosting vlastní název a výběr celé NE ANO domény (jméno + přípona) doména 1. a 2. řádu (určitý NE ANO počet) velikost web prostoru v řádu MB (max. GB) v řádu GB rychlost UP/DOWN loadu v řádu kbit/mbit v řádu Mbit/Gbit vlastní pošta NE/omezená ANO zálohování omezené různé stupně záloh garance dostupnosti webu NE ANO podpora jiných programovacích jazyků/skriptů, rozšíření omezená rozšířená, volitelná složena na míru potřeb doplňkové služby NE ANO široký výběr cena zdarma 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 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

11 Například web 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/ /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 = " /> //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

12 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: Soubory na webu 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

13 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: webové stránky Layout stránky Tvorba webových stránek 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

14 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

15 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, y 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 Otestování stránek na validitu (HTML a CSS validátor) Otestování SEO stránek (komerční web zaměřený na otestování webů) 15

16 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. Jak na webhosting Vytvořte si Webové stránky zdarma Publikování na WWW Přístupnost webu Interval.cz Web tvorba Typografie Šablony a rozložení

17 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, fre , 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

18 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

19 Nastavení FTP připojení Nastavení FTP připojení přes PSPad editor Záložka FTP spojení 19

20 Vytvoření FTP spojení 20

21 Vyplnění FTP spojení Připojování k FTP (stav červeně) 21

22 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