Tvorba web stránok

1. Tvorba web stránok

2. Tvorba web stránok Cieľ: • Oboznámenie s problematikou tvorby WWW stránok z pohľadu tvorcu a zároveň aj z pohľadu zadávateľa. • Základné pojmy používané pri návrhu a tvorbe WWW stránok • Súčasné technológie a programy pre návrh a tvorbu vlastnej WWW stránky.

3. Prezentácia firmy na webe Účel prezentácie • Informácie o firme • Reklama na internete • Komunikácia zo zákazníkom • Predaj tovaru zákazníkovi

4. Úspešnosť prezentácie Pre úspech firmy na Internete je dôležité: • Ako nájsť firmu – kontakt, mapka • Kvalitný a správne napísaný obsah • Prehľadný dizajn bez zbytočností Dobrá a kvalitná web prezentácia musí zákazníka zaujať, musí udržať jeho pozornosť na web stránke a prinútiť ho, aby klikol na ďalšie odkazy, ktoré sú na web stránke prítomné.

5. Úspešnosť prezentácie Kritériá: • Vysoko kvalitný obsah – „content is king“, čiže mať správne informácie na správnom mieste a v pravý čas. • Jednoduché použitie – jasná a jednoduchá navigácia uľahčujúca využívanie webstránky. • Rýchle otváranie a sťahovanie informácií na stránke – návštevníci neradi čakajú! • Pravidelná aktualizácia – pravidelné aktualizovanie obsahu stránky.

6. Priority pre tvorbu webstránky Môžu sa líšiť medzi firmami, avšak medzi hlavné ciele a úlohy existencie webstránky patrí budovanie vzťahu so zákazníkmi založené na týchto krokoch: • Získanie zákazníka – návštevník stránky sa stane vašim zákazníkom. • Udržanie zákazníka – zabezpečenia opakovaných nákupov. • Zvýšenie predaja (cross-selling) – zákazník kupuje aj iné vaše produkty.

7. Prístupnosť web stránok Prístupnosť web stránok znamená, že musíme počítať z možnosťou, že nie všetci návštevníci našej web stránky majú technické či zdravotné možnosti také, aby sa mohli oboznámiť s kompletným obsahom našej prezentácie. Príklady: • FLASH, prístup pre mobilné telefóny, vreckové počítače, ... • Pruchy zraku – veľkosť písma, kontrastné farby, myslieť na použitie čítačiek textu, lúp, ...

8. Podklady pre web prezentáciu • Vhodne a správne použitá webová prezentácia môže byť pre firmu veľkým plus. Treba si však vždy dopredu premyslieť, pre akú cieľovú skupinu zákazníkov má byť naša web prezentácia určená. • Príprava podkladov pre web prezentáciu je tiež dôležitým medzistupňom ku kvalitnej a navštevovanej web stránke. Treba počítať s tým, že návštevníka web stránky musíme zaujať, nesmieme ho znechutiť predkladaním dlhého a nezáživného textu. • Napríklad zoznam výrobkov by mal byť doplnený vždy obrázkom a stručnou informáciou o cene výrobku a niekoľkými najdôležitejšími parametrami. • K web stránke patrí neodmysliteľne aj vizuálna časť. Podrobné informácie (väčšia fotografia, či viac fotografií, podrobné parametre výrobku atď.), môžu byť uložené na samostatnej web stránke.

9. Podklady pre web prezentáciu • Profil firmy Tu umiestnime základné informácie o firme, prípadne ďalšie informácie o štruktúre firmy a jej hospodárení (ktoré by mohli byť zaujímavé pre potencionálneho obchodného partnera). • Výrobný program/Produkty/Predmet obchodovania/Služby Informácie o výrobkoch, ktoré firma vyrába, či s ktorými obchoduje, prípadne o službách, ktoré firma poskytuje. • Kontakt Informácie o možnostiach kontaktu – kde je možné nájsť firmu, jej pobočky, kontaktné telefónne či faxové čísla, e-mail adresy a podobne. Túto časť je vhodné doplniť mapkou.

10. Rozvrhnutie obsahu na WWW stránke Usporiadanie jednotlivých prvkov na web stránke je dôležité z hľadiska prehľadnosti a prístupnosti. • umiestnenie navigačného menu, • grafických prvkov, • obsahu. Pred samotnou realizáciou web stránky by sme si mali urobiť niekoľko náčrtov, ako si predstavujeme rozloženie obsahu na web stránke.

11. Webdizajn • Webový dizajn alebo webový design alebo webdesign je súhrnom výsledných spracovaní návrhov a požiadaviek pre koncept, funkčné riešenie a vzhľad webovej lokality, ktorý má byť funkčne spôsobilý pre zobrazenie a interpretáciu webovými prehliadačmi, alebo inými grafickými užívateľskými rozhraniami (skr.: GUI - "graphicaluserinterface"). • Prvé čo si návštevník stránky všimne je prirodzene vzhľad stránky: rozvrhnutie jednotlivých častí, farebnosť, obrázky, animácie, atď. - jedným slovom webdizajn. Práve toto vytvára prvý – najdôležitejší dojem.

12. Dizajn webstránky Úvod do web dizajnuPri tvorbe webstránky vychádzame z hlavných komponentov, ktoré budú bližšie vysvetlené. • Dizajn webstránky = Funkčnosť + Obsah + Forma + Usporiadanie + Interakcia

13. Dôležité postupy • Jednotný dizajn Hoci úlohou webstránky nie je len komunikácia so zákazníkom, jej obsah musí byť jednotný s ostatnými komunikačnými nástrojmi vašej spoločnosti, on-line ako aj offline. Nakoľko vaši zákazníci môžu nakupovať obidvoma spôsobmi, vaša marketingová komunikácia to musí zohľadniť. Veľakrát sa stáva, že zákazník získava informácie o vašom produkte na internete a nákup uskutoční v kamennom obchode.

14. Dôležité postupy • Personalizáciawebstránky Už DaleCarnegie opakoval starú múdrosť, že: „Slovo, ktoré nám najkrajšie znie, je naše meno,“ preto pamätať si meno zákazníka a jeho potreby je osobná vec, ktorá pomáha budovať zákaznícke vzťahy. V offline marketingu vzťahov, kde sme s klientom v osobnom kontakte, sa to zdá byť jednoduchšie, avšak pomocou personalizácie na webstránke to vieme taktiež docieliť. Takáto personalizáciawebstránky sa dá dosiahnuť tak, že každý návštevník bude mať zobrazené iné informácie ako: • Meno zákazníka alebo spoločnosti (oslovenie po vstupe na stránku) • Dátum a čas • Krajina pôvodu • Zákaznícke preferencie (zákazník si zadefinuje, ktoré informácie chce zobrazovať) • Novinky a posledné udalosti

15. Dôležité postupy • Vizuálny dizajn webstránky Samotný dizajn sa skladá z niekoľkých častí, ktoré by sme mali brať do úvahy, pokiaľ chceme vytvoriť skutočne atraktívnu stránku. • Estetika = Grafika + Farebnosť + Štýl + Rozvrhnutie a typografia Pri tvorbe webstránky si tvorca musí uvedomiť, že všetky tieto časti majú spolu vytvárať nerušený a estetický obraz. Príliš veľa grafiky spomaľuje načítavanie stránky, príliš veľa textu nezaujme a nezladená farebnosť pôsobí rušivo. Štýl a celkové rozvrhnutie webstránky (text, grafika) môže návštevníka ihneď upútať, a to ešte predtým, ako získal samotnú hľadanú informáciu, ale platí to aj opačne. Typ písma je veľmi dôležitý pre čitateľnosť obsahu stránky, pričom sa vyberá zo základných tzv. systémových fontov (Arial, Verdana, Tahoma) a kvôli čitateľnosti je nutné zamyslieť sa aj nad ich veľkosťami v rôznych rezoch (tenké, kurzíva, tučné, úzke, veľmi tučné).Samotná grafika nie je samoúčelná, má zaujať, ale nie odpútať pozornosť od odovzdávanej informácie.

16. Základný dizajn stránky Hlavné prvky, ktoré by nemali chýbať na každej stránke, tvoriace základné rozvrhnutie (layout) stránky: • Názov spoločnosti a logo (v pravom alebo ľavom hornom rohu) • Hlavné menu (top menu) pre základnú navigáciu • Päta stránky (spodná časť ) – informácie o autorstve, právne vyhlásenia, identifikácia tvorcov, administrátorský kontakt atď.

17. Hlavné menu Položky hlavného menu musia mať jasný názov (napr. informácia o produkte), ktorý sa opakuje v samotnej textovej časti webstránky, nasledovaný konkrétnym textom, obrázkami. Je len na nás, ako sa rozhodneme usporiadať tieto prvky, ale prehľadnosť, čitateľnosť a samotná ergonómia stránky by mali mať prednosť pred ľúbivou grafikou, ktorá však potlačí informačnú hodnotu.

18. Pohyb na stránke a jej štruktúra • Cieľom je, aby sa návštevníci opätovne vracali na vašu webstránku. Tento cieľ sa vám podarí zabezpečiť pomocou jednoduchej a prehľadnej štruktúry. Pohyb (navigácia) na stránkach je uľahčená, pokiaľ sú jednotlivé prvky usporiadané logicky a prehľadne dodávajú záujemcovi informácie. Medzi základné pravidlá navigácie (pohybu) zákazníka po stránke patrí: • Jednoduchosť (keepitsimple) – nepoužívajte príliš veľa tlačidiel, odporúča sa maximálne sedem položiek. • Konzistentnosť (beconsistent)– rovnaké menu a štruktúra na všetkých podstránkach – hlavné časti webstránky musia zostať zachované. • Orientačné body (signposts) – návštevník musí vždy vedieť, kde v štruktúre podstránok sa nachádza, a ako sa jednoducho dostane na hlavnú stránku.

19. Korporátny dizajn • Rovnako ako tlačové materiály aj Vaša web stránka by mala byť v štýle Vašej spoločnosti. Preto pri tvorbe web stránok dbáme na striktné dodržanie corporate identity. • Korporátna identita je marketingový nástroj. • Korporátna identita je komplexný prístup, ktorý zahŕňa korporátne správanie sa zainteresovaných, korporátnu komunikáciu a korporátny dizajn. • Korporátny dizajn je tiež označovaný ako jednotný vizuálny štýl.

20. Korporátny dizajn - l o g o t y p L o g o t y p je základným prostriedkom vizuálneho štýlu, aj keď sám o sebe je viac estetickým ako funkčným a praktickým prvkom. Svoju primárnu funkciu jasne, zrozumiteľne a dôstojne reprezentovať nadobúda počas svojej existencie, kedy ho obohacujú príbehy a skúsenosti. Tomuto procesu „udomácnenia sa“ logotypu v povedomí širšej verejnosti výrazne napomáha dizajn manuál. Dizajn manuál je návod na použitie, návod ako s logotypom pracovať a spravidla tak trochu aj „šlabikár grafickej gramotnosti“.

21. Príklady štandardne používaných rozvrhnutí web stránky Trojstĺpcové rozvrhnutie web stránky: Pätička web stránky (v angličtine footer) Hlavička web stránky (v angličtine header) Ľavé menu Obsah web stránky (alebo tiež telo web stránky) Pravé menu

22. Hlavička web stránky (v angličtine header) Ľavé menu Obsah web stránky (alebo tiež telo web stránky) Pätička web stránky (v angličtine footer) Príklady štandardne používaných rozvrhnutí web stránky Dvojstĺpcové rozvrhnutie web stránky (menu môže byť aj napravo):

23. Hlavička web stránky (v angličtine header) Menu Obsah web stránky (alebo tiež telo web stránky) Pätička web stránky (v angličtine footer) Príklady štandardne používaných rozvrhnutí web stránky Jednostĺpcové rozvrhnutie web stránky (menu môže byť aj napravo):

24. Zdroje • http://www.estranky.sk/galeriavzhladov#galerie • http://www.tvorbawebstranok.net/sk/Blog-o-webdizajne/Ako-usporiadat-vrstvy-a-skupiny-vo-Photoshope-pri-vyrobe-webstranky.alej?ind=2

25. Prostriedky Pri tvorbe webového dizajnu využívame: • Značkovacie jazyky [Markuplanguages] (napríklad HTML, XHTMLa XML) • Webové štýly [Stylesheetlanguages] (napríklad CSS a XSL) • Skriptovanie na strane klienta [Client-sidescripting] (napríklad JavaScript) • Skriptovanie na strane servera [Server-sidescripting] (napríklad PHP a ASP) • Databázy [Databasetechnologies] (napríklad MySQL a PostgreSQL) • Multimédia [Multimediatechnologies] (napríklad Flash) • Samozrejme, existuje množstvo iných kódovaní, jazykov a možností ako zapísať stránku, no tieto sú asi najpoužívanejšie a najrozšírenejšie. • Webové stránky môžu byť statické, alebo môžu byť naprogramované ako dynamické stránky, ktoré sa automaticky prispôsobujú vzhľadom alebo obsahom, v závislosti na množstve faktorov.

26. Ako spracovať grafický návrh do podoby web stránky? • Človek, ktorý navrhuje grafický vzhľad (grafik), má odlišnú úlohu od človeka, ktorý grafický návrh spracúva do podoby (X)HTML a CSS (webdizajnér). Pre tvorbu grafického návrhu je nutný určitý talent, fantázia a samozrejme veľmi dobrá znalosť grafických editorov. Pre spracovanie grafického návrhu do výslednej podoby je nevyhnutná aspoň základná znalosť práce s niektorým z bitmapových grafických programov, umožňujúcich tvorbu a úpravu obrázkov. Predložený grafický návrh slúži v podstate len ako vzor. Z neho môže webdizajnér podľa vlastnej úvahy vyberať farby a grafické prvky, ktoré sa na výslednej web stránke opakujú a zapracovať ich do (X)HTML a CSS.

27. Jazyk XHTML a štýlové predpisy CSS • HTML – HyperText Markup Language – posledná oficiálna špecifikácia jazyka HTML je dostupná vo verzii 4.1, na stránkach organizácie World Wide Web Consortium (W3C) • XHTML – Extensible HyperText Markup Language – v prípade XHTML tu máme verziu 1.0, ktorá sa ďalej delí na 3 základné vetvy (ktoré sú určené pre prechod z HTML na XHTML) • XHTML 1.0 Strict – Túto verziu použijeme, pokiaľ chceme mať web založený na značkách určujúcich štruktúru stránky, bez použitia značiek, ktoré sú používané pre úpravu vzhľadu stránky. Miesto týchto značiek budeme používať jazyk pre popis vzhľadu značiek - Cascading Style Sheet (CSS), za pomoci ktorých budeme popisovať typy písma, farby a celkové usporiadanie jednotlivých prvkov web stránky. – Použitie tejto verzie je dnes odporúčané. • XHTML 1.0 Transitional – Túto verziu používajú ľudia, ktorí potrebujú rýchlo modernizovať staršie web stránky a doplniť do nich novú funkčnosť, ako sú napríklad CSS štýly. Táto verzia je prakticky totožná z HTML vo verzii 4.1 Pokiaľ chcete mať web stránku použiteľnú aj v starších prehliadačoch a pritom napísanú v XHTML, môžete použiť aj značky popisujúce vzhľad stránky. • XHTML 1.0 Frameset – Túto verziu použijete, pokiaľ chcete vo svojej web stránke použiť rámy (používať rámy sa už dnes neodporúča, keďže jestvuje množstvo efektívnejších metód, ako dosiahnuť na web stránke podobnú funkčnosť.)

28. XHTML • XHTML nie je programovací jazyk, ako sa mnohí mylne domnievajú. XHTML je jazyk, ktorý slúži na popis toho, ako má vyzerať výsledné zobrazenie textu v prehliadači internetových stránok. Značky jazyka XHTML, zapísané v texte, číta prehliadač takto: • „tu začni písať nadpis najvyššej úrovne, tu ukonči písanie nadpisu najvyššej úrovne, tu začni písať odstavec, tu začni písať šikmé písmo, tu ukonči písanie šikmého písma, tu choď na ďalší riadok, tu vlož obrázok s alternatívnym textom “Obrázok“, tu ukonči odstavec...“

29. XHTML V reálnom jazyku XHTML by predchádzajúci zápis vyzeral takto: <h1>nadpis najvyššej úrovne</h1> <p>odstavec <em>šikmé písmo</em><br /> <img src=“obrazok.jpg“ alt=“Obrázok“></p>

30. XHTML A zobrazený v prehliadači internetových stránok zasa takto: Tomuto spôsobu spracovávania jazyka XHTML hovoríme interpretácia (čítanie a spracúvanie), a tomu, ako prehliadač web stránku zobrazuje na svojej zobrazovacej ploche, hovoríme renderovanie (zobrazovanie). Toto nám hneď napovedá, že výsledné zobrazenie web stránky záleží len a len od toho, akým spôsobom prehliadač jednotlivé značky interpretuje a zobrazí. Každý prehliadač má vlastný spôsob, ktorým spracúva web stránku, a preto môžeme nájsť drobné rozdiely v zobrazení tej istej web stránky v rôznych prehliadačoch.

31. Základné pravidlá pre zápis značiek jazyka XHTML (HTML) Zápis párových značiek jazyka XHTML (HTML) Značka jazyka XHTML strong (dôraz na označený text, vizuálne vyjadrený hrubým písmom) použitá vo web stránke vyzerá takto: <strong>zdôraznený text</strong> Každá značka jazyka XHTML vždy začína znakom < (menší) a končí znakom > (väčší). Použitá značka strong je značka párová (jazyk XHTML obsahuje párové a nepárové značky) – to znamená, že len text, ktorý je medzi začiatočnou značkou <strong> a zakončovacou značkou </strong> (všetky párové zakončovacie značky sa začínajú </ a končia >) bude zdôraznený – zobrazený hrubým písmom. Toto platí pre všetky párové značky!

32. Základné pravidlá pre zápis značiek jazyka XHTML (HTML) Zápis nepárových značiek jazyka XHTML (HTML) V jazyku XHTML však existujú aj značky, ktoré sú nepárové. Sú to značky, ktoré neurčujú vzhľad nejakej časti textu, ale plnia inú úlohu. Tieto značky musíme v jazyku XHTML zapisovať trochu iným spôsobom. Príklad – značka br (break), ktorá určuje, kde má prejsť zobrazovanie textu v prehliadači na nový riadok: <br /> Ďalšími podobnými značkami sú img pre vloženie obrázku (image), hr pre vloženie vodorovnej oddeľovacej čiary (horizontal rule) a ďalšie.

33. Základné pravidlá pre zápis značiek jazyka XHTML (HTML) Zápis parametrov (atribútov) značiek jazyka XHTML (HTML) Ďalšou vecou, ktorú si musíme pri zápise značiek jazyka XHTML ukázať, sú parametre (atribúty) značky. Ako príklad si uvedieme značku pre vloženie obrázku – img: <imgsrc=”obrazok.jpg” alt=”Obrázok” title=”PLEASE ADOPT FIREFOX!” /> Značka img hovorí – sem sa vloží obrázok, parameter src (source) udáva zdroj, v ktorom sa uvádza meno obrázku a prípadne celá cesta k obrázku (kde, v ktorom adresári na vzdialenom web serveri sa nachádza obrázok). Značka jazyka XHTML môže mať aj viac parametrov ako jeden – v našom prípade sú to parametre alt (alternatívny text, ktorý sa použije v prípade, keď nie je možné zobraziť obrázok, alebo v prípade, keď stránku číta špeciálna čítačka pre zrakovo postihnutých) a title (text v tejto značke uvádza podrobnejší popis obsahu obrázku, ktorý sa zobrazí, keď podržíme kurzor na obrázku). Parameter musí byť vždy uvedený v úvodzovkách!

34. Základné pravidlá pre zápis značiek jazyka XHTML (HTML) Zanorenie párových značiek jazyka XHTML (HTML) Značky jazyka XHTML je možné vkladať jednu do druhej (zanoriť ich), ale treba pri tom dodržiavať určité pravidlá. Nesprávne:   <strong> <em>Tento text je zobrazený hrubým a šikmým písmom.</strong> </em> Správne: <strong> <em>Tento text je zobrazený hrubým a šikmým písmom.</em> </strong> Znamená to, že sa značky nesmú navzájom krížiť. Párové značky zanorené do seba sa musia zakončovať v opačnom poradí, než v akom sa začínali (čiže posledná vložená značka sa musí zakončiť prvá). Zle zapísané značky jazyka XHTML sťažujú prehliadaču proces čítania a zobrazovania web stránky!

35. Základná štruktúra XHTML (HTML) dokumentu Každý HTML dokument má predpísanú základnú štruktúru – kostru dokumentu. HTML dokument je celý ohraničený (zanorený) v párovej značke <html>...</html>, ktorá obsahuje hlavičku dokumentu <head>...</head> a telo dokumentu <body>...</body>. <!DOCTYPE html PUBLIC “-//IETF//DTD HTML 4.01//EN“> <html> <head> <title> ... titulka stránky ... </title> ... ostatné prvky hlavičky ... </head> <body> ... viditeľný obsah dokumentu (telo dokumentu) ... </body> </html>

36. Základná štruktúra XHTML (HTML) dokumentu • Aby boli spracovateľné aj staršie HTML dokumenty, tak značky <html>,</html> <head>,</head> <body>,</body> nemusia byť zapísané vždy – prehliadače si dokážu poradiť aj s dokumentom bez týchto značiek. Samozrejme, pokiaľ sa vytvára nový HTML dokument, je vhodné dodržiavať túto základnú štruktúru. • Jazyk HTML nie je citlivý na veľkosť písma – to znamená, že všetky značky by mohli byť zapísané aj veľkými písmenami (<html> ako <HTML> a pod.). V jazyku XHTML však už toto neplatí, a preto je jediný perspektívny spôsob, ako zapisovať značky jazyka HTML v použití malých písmen.

37. XHTML dokument Každý XHTML dokument má predpísanú základnú štruktúru – kostru dokumentu. XHTML dokument je celý ohraničený (zanorený) v párovej značke <html>...</html>, ktorá obsahuje hlavičku dokumentu <head>...</head> a telo dokumentu <body>...</body>. <?xml version=“1.0“ encoding=“windows-1250“?> <!DOCTYPE html PUBLIC “-//IETF//DTD XHTML 1.0 Strict//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“> <html xmlns=“http://www.w3.org/1999/xhtml“ xml:lang=“sk“ lang=“sk“> <head> <metahttp-equiv=“content-type“ content=“text/html; charset=windows-1250“ /> <metahttp-equiv=“content-language“ content=“sk“ /> <title> ... titulka stránky ... </title> ... ostatné prvky hlavičky ... </head> <body> ... viditeľný obsah dokumentu (telo dokumentu) ... </body> </html> Značky <html>,</html> <head>,</head> <body>,</body> musia byť zapísané vždy (to znamená, že nesmú byť vynechané). Značky musia byť zapísané malými písmenami.

38. Štýlové predpisy (štýly) CSS   Kaskádové štýly alebo CSS [URL3] (skratka z angl. Cascading Style Sheets) je všeobecné rozšírenie (X)HTML o možnosti opisu vzhľadu textu základnými parametrami bežného DTP (skratka z angl. Desktop publishing je označenie pre celý proces spracovania grafického návrhu na počítači až po export súboru pre tlač). Štýly umožňujú oddeliť štruktúru HTML alebo XHTML od vzhľadu stránky. Pomocou štýlov môžeme meniť tieto základné atribúty vzhľadu jednotlivých prvkov na stránke: • vonkajšie odsadenie od okraja (margin), • okraj (border) (jeho vzhľad, farbu, hrúbku...), • vnútorné odsadenie od okraja (padding), • písmo (font) (jeho typ, veľkosť, hrúbku...), • pozadie (background) (farbu, obrázok a jeho umiestnenie na pozadí...), • pozíciu prvku v stránke (position) (spolu s určením rozmerov prvku to poskytuje zaujímavé možnosti pre stavbu web stránky), • ďalšie možnosti...

39. Základné pravidlá pre použitie CSS štýlov Štýlový predpis (popis vzhľadu (X)HTML prvku na stránke) je možné vložiť do (X)HTML tromi rôznymi spôsobmi. Vkladanie CSS ako parametru značky (X)HTML Do každej značky jazyka (X)HTML môžeme za pomoci parametru style doplniť jej štýlový predpis. <h1 style=”color : blue;”>Nadpis odstavca</h1> <p style=”color : green;”>Odstavec…</p> V je použité CSS pre nastavenie farby nadpisu na modrú a pre nastavenie farby písma v odstavci na zelenú. CSS sa dá používať aj týmto spôsobom, ale je to ten najmenej efektívny spôsob. Ďalej si popíšeme efektívnejšie (a správnejšie) spôsoby použitia CSS.

40. Základné pravidlá pre použitie CSS štýlov Vkladanie CSS do hlavičky dokumentu (X)HTML <head> ... <styletype="text/css"> h1 { color : blue; } p { color : green; } </style> </head> V príklade sme použili CSS pre rovnaký účel ako v predchádzajúcom príklade (vkladanie CSS ako parametru značky (X)HTML) s tým rozdielom, že takýto zápis predpisuje všetkým nadpisom h1 a všetkým odstavcom p, ktoré sa nachádzajú v tele stránky rovnaký štýl – farbu písma.

41. Základné pravidlá pre použitie CSS štýlov Vkladanie CSS z externého súboru Obsah externého súboru styl_stranky.css: /* externy CSS subor */ h1 { color : blue; } p { color : green; } Aby sme tento štýlový predpis mohli v stránke použiť, musíme v hlavičke web stránky zapísať: <head> ... <linkrel="stylesheet" type="text/css" href="styl_stranky.css" /> </head>

42. Zdroje(z ktorých je možné vychádzať pri štúdiu CSS a (X)HTML) Online zdroje WEB stránka Jak psát web [URL5], je vhodným zdrojom informácií pre začiatočníkov, čo sa týka práce s (X)HTML a CSS, ale aj v ďalších oblastiach. Mgr. Ľuboš Kmeťko zasa vypracoval a dal k dispozícii kurz Internet a tvorba www stránok [URL6]. Ďalšie tri odkazy na seriály pochádzajú zo servera Interval, ktorý sa tematicky zameriava práve na tvorbu web stránok [URL7], [URL8], [URL9]. Posledný odkaz je priamo od tvorcov štandardov (X)HTML a CSS – WorldWide Web Consortium [URL10] – organizácie, ktorá zastrešuje štandardizáciu a ďalší vývoj web technológií. Odporučená literatúra Kniha HTML a XHTML, začíname programovat [1], ktorú napísal SlavojPísek, vás uvedie do sveta tvorby web stránok. Kniha CSS prozelenáče [2] od Martina Snížka je vhodná pre začiatočníkov, ktorý ešte len do tajov CSS prenikajú. Knihy XDHTML [3] a XCSS [4], ktoré napísal Pavol Mikle sú veľmi vhodným zdrojom informácií pre toho, kto už vie s (X)HTML a CSS pracovať a potrebuje doplňujúci zdroj informácií.

43. Optimalizácia pre vyhľadávače - SEO • Optimalizácia pre vyhľadávače alebo SEO (z ang.searchengineoptimization) je súbor techník na zlepšenie pozície, na ktorej sa optimalizovaná webstránka zobrazí vo výsledkoch vyhľadávania v internetových vyhľadávačoch. SEO zahŕňa linkbuilding, linkbaiting, socialmedia marketing, virálny marketing, on-line PR v kombinácii so sémantickým kódovaním webu. • Kľúčové slová sú najdôležitejšou časťou SEO, postup ako optimalizovať konkrétne webové stránky pre vyhľadávače. SEO sa klasifikuje na techniky, ktoré spoločnosti prevádzkujúce vyhľadávače odporúčajú na vylepšenie svojej pozície, tzv. Whitehat SEO a techniky, ktoré zakazujú, tzv. Blackhat SEO. Vyhľadávacie služby sa snažia Blackhat SEO zamedzovať.

44. SEO • ON PAGE faktory: • kvalitný názov web stránky • meta riadky: popis, kľúčové slová, iné meta riadky • použitie kľúčových slov na stránke • kód web stránky, odkazová stránka • architektúra stránky a obsahu • textové odkazy, popularita odkazov, popularita obrázkových odkazov • telo web stránky • odkazy v anchor texte, popularita externých odkazov • rozmanitosť odkazových zdrojov • použitie: Frames, JavaScript a Flash • OFF PAGE faktory: • kvalita domény / URL • Mapa stránok, PageRank • kvalitné spätné odkazy • návštevnosť stránky

45. Etická a neetická optimalizácia • Niektoré metódy optimalizácie vyhľadávače penalizujú znižovaním pozície webovej stránky vo výsledkoch, pretože používajú neetické metódy, ako spamdexovanie, alebo techniky nazývané čierny klobúk (z ang.blackhat).Napríklad použijú biely text na bielom pozadí, za účelom zvýšenia pozície vo vyhľadávaní. No Google takéto techniky nemá rád, a preto tieto weby potrestá banomPageRanku teda napr. stránka mala PR4 a po neetických technikách má PR0. Takéto banyGoogle niekedy robí aj na stránkach, ktoré zobrazujú reklamu naposledy spoločnoťDirectoglobal a na tých, ktoré predávajú odkazy. Ale iba niekedy. • Etická optimalizácia zahrňuje použitie legitímnych techník na zlepšenie čitateľnosti stránky, jej správna a logická štrukturalizácia a správne použitie tagovHTML, XHTML a/alebo XML.

46. Redakčné systémy - CMS CMS – administračné rozhranie na správu obsahu web stránky. V ňom je možné upravovať štruktúru web stránky, texty, obrázky. CMS sa vyznačuje najmä: • vždy aktuálnymi informáciami, • jednoduchým vkladaním, upravovaním textov, vkladaním obrázkov a tvorbou on-line katalógov, • možnosťou vytvorenia kompletnej fotogalérie pre každý produkt, • možnosťou správy produktov v internetových obchodoch, • neobmedzeným počtom podstránok, • hromadným oslovovaním zákazníkov, atď.

47. CMS Redakčný systém je možné použiť pre • firemné prezentácie • internetový obchod • internetové aplikácie • portálové riešenia • intranetové informačné riešenia Vlastnosti CMS systému • je šetrný - neplatíte za aktualizácie, obsah si viete zmeniť sami • je efektívny - šetrí váš čas, obsah viete zmeniť okamžite • je prispôsobivý - systém sa prispôsobuje vašej stránke, nie stránka systému • je pohodlný - prístup k systému máte kdekoľvek a kedykoľvek • je bezpečný - zabezpečenie prístupu k údajom • je progresívny - posunie pozíciu web stránky do popredia

48. Ako skutočne získať pravidelných zákazníkov pomocou webu - zhrnutie • Kvalitný obsah • Jasná a jednoduchá navigácia • Prístupnosť web stránky • Rýchle otváranie a sťahovanie informácií na stránke • Pravidelná aktualizácia • Personifikácia Otestované fakty pre úspešnosť webu: • http://tvorbawwwstranok.com/robite-tychto-5-trapnych-chyb-vo-vasom-internetovom-marketingu/

49. Rady pre začiatočníkov • Verešovský Marcel: Dizajn webstránky. URL: http://www.eprogress.sk/post/dizajn-webstranky-477/ • Marika Schvarczová: Seriál Ako sa dostať na web 1. časť, 28. 4. 2010. URL: http://www.websalon.sk/2010/04/serial-ako-sa-dostat-na-web-1-cast/

50. Umiestnenie web stránok Pre umiestnenie hotovej web stránky existuje viacero možností: • poskytovatelia web priestoru zdarma (http://www.web-zadarmo.sk/, http://www.estranky.sk/, ...) • platení poskytovatelia web priestoru, • vlastný web server.