Tvorba web stránok

Tvorba web stránok

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.

Prezentácia firmy na webe

Účel prezentácie

Informácie o firmeReklama na interneteKomunikácia zo zákazníkomPredaj tovaru zákazníkovi

Úspešnosť prezentácie

Pre úspech firmy na Internete je dôležité:

Ako nájsť firmu – kontakt, mapkaKvalitný a správne napísaný obsahPrehľ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é.

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

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.

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, ...

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.

Podklady pre web prezentáciu

Profil firmyTu 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žbyInformácie o výrobkoch, ktoré firma vyrába, či s ktorými obchoduje, prípadne o službách, ktoré firma poskytuje.

KontaktInformá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.

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.

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 - "graphical user interface").

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.

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

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.

Dôležité postupy

Personalizácia webstránky

Už Dale Carnegie 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ácia webstrá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

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.

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ď.

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.

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ť (keep it simple) – nepoužívajte príliš veľa

tlačidiel, odporúča sa maximálne sedem položiek. Konzistentnosť (be consistent)– 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.

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.

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“.

Príklady štandardne používaných rozvrhnutí 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

Trojstĺpcové rozvrhnutie web stránky:


Dvojstĺpcové rozvrhnutie web stránky (menu môže byť aj napravo):



Ľavé menu Obsah web stránky (alebo tiež telo web stránky)


Jednostĺpcové rozvrhnutie web stránky (menu môže byť aj napravo):



Menu

Obsah web stránky (alebo tiež telo web stránky)

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

Prostriedky

Pri tvorbe webového dizajnu využívame:

Značkovacie jazyky [Markup languages] (napríklad HTML, XHTML a XML)

Webové štýly [Style sheet languages] (napríklad CSS a XSL) Skriptovanie na strane klienta [Client-side scripting] (napríklad

JavaScript) Skriptovanie na strane servera [Server-side scripting] (napríklad

PHP a ASP) Databázy [Database technologies] (napríklad MySQL a

PostgreSQL) Multimédia [Multimedia technologies] (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.

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.

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ť.)

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...“

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>

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.

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!


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.


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:

<img src=”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!


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!

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>

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.

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>

<meta http-equiv=“content-type“ content=“text/html; charset=windows-1250“ />

<meta http-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.

Š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 toposkytuje zaujímavé možnosti pre stavbu web stránky),

ďalšie možnosti...

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.


Vkladanie CSS do hlavičky dokumentu (X)HTML

<head>...<style type="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.


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>

...<link rel="stylesheet" type="text/css"

href="styl_stranky.css" /></head>

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 – World Wide 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 Slavoj Písek, vás uvedie do sveta tvorby web stránok. Kniha CSS pro zelenáč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í.

Optimalizácia pre vyhľadávače - SEO

Optimalizácia pre vyhľadávače alebo SEO (z ang. search engine optimization) 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, social media 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. White hat SEO a techniky, ktoré zakazujú, tzv. Black hat SEO. Vyhľadávacie služby sa snažia Black hat SEO zamedzovať.

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

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. black hat).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á banom PageRanku teda napr. stránka mala PR4 a po neetických technikách má PR0. Takéto bany Google niekedy robí aj na stránkach, ktoré zobrazujú reklamu naposledy spoločnoť Directo global 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 tagov HTML, XHTML a/alebo XML.

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ď.

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

Ako skutočne získať pravidelných zákazníkov pomocou webu - zhrnutie

Kvalitný obsahJasná a jednoduchá navigáciaPrístupnosť web stránkyRýchle otváranie a sťahovanie informácií na

stránke Pravidelná aktualizáciaPersonifikácia

Otestované fakty pre úspešnosť webu:http://tvorbawwwstranok.com/robite-tychto-5-

trapnych-chyb-vo-vasom-internetovom-marketingu/

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/

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.

Programy pre tvorbu web stránok

Pre tvorbu web stránok existujú aj špecializované nástroje – editory web stránok. V podstate je možné vytvoriť web stránku bez akejkoľvek znalosti HTML. To je však veľmi zjednodušený pohľad na vec. Aby sme web stránku dokázali naozaj efektívne vytvoriť, potrebujeme poznať množstvo vecí, ktoré s tvorbou web stránok súvisia. Príkladom môže byť napríklad využitie formulárov. Áno, v editore web stránok dokážete naklikať pekný formulár, ale aby sa dal naozaj používať, musíte poznať spôsob, akým treba jednotlivé formulárové prvky pomenovať, poslať, nehovoriac o ich spracovaní. V každom prípade aj pri použití niektorého z editorov web stránok je nutné, aby sme poznali základné princípy a pravidlá tvorby web stránok – základné HTML značky, spôsob ich zápisu, ich parametre a podobne.

Programy pre tvorbu web stránok

Dá sa povedať, že web stránky sa dajú tvoriť v akomkoľvek jednoduchom textovom editore. Klasickým príkladom je Windows Notepad. Samozrejme je však ďaleko efektívnejšie použiť nástroj, ktorý je určený priamo ako pomôcka pre tvorbu web stránok.

Editory

Poznáme dva základné typy editorov:editory zdrojového kódu web stránok,WYSIWYG (What You See Is What You Get –

to, čo vidíš aj dostaneš) editory.

Editory zdrojového kódu

V podstate jestvuje niekoľko desiatok nástrojov určených ako pomôcka k editovaniu zdrojového kódu web stránok (HTML a CSS). Niektoré sú univerzálne editory, umožňujúce editovať nielen web stránky, ale aj množstvo ďalších typov súborov. V čom nám dokáže taký editor vlastne pomôcť? Tieto editory používajú na zvýšenie efektívnosti práce niekoľko nástrojov:

zvýraznenie farebnej syntaxe zdrojového kódu (syntax color

highlighting), automatické dopĺňanie značiek a ponuka parametrov značiek, klávesové skratky (napríklad na hrubé, šikmé písmo či vloženie

tzv. tvrdej medzery ktorá slúži na typografické spojenie predložky so slovom),

otvorenie a editovanie súboru priamo zo vzdialeného web serveru, a množstvo ďalších nástrojov.

Príklady na v praxi používané editory

Homesite – starší, ale stále veľmi obľúbený editor

špecializovaný na tvorbu web stránok,PSPad – univerzálny textový editor s množstvom

nástrojov a pomôcok pre tvorbu web stránok (http://www.pspad.com/sk/) – je ho možné používať zdarma,

a množstvo ďalších... (množstvo príkladov nájdete na serveri http://www.slunecnice.cz/ v sekcii Grafika-a-webdesign/Nastroje-webdesign/Editory-HTML/).

WYSIWYG editory

Výhodou WYSIWYG editorov je spôsob práce rovnaký ako napríklad v MS Word. Jednoducho píšete, zvýrazňujete text, nastavujete veľkosť písma, farby, vytvárate tabuľky – to všetko za pomoci výberov z menu. Každá zmena, ktorú urobíte, sa hneď zobrazí tak, ako bude vo výsledku zobrazená v prehliadačoch web stránok. Všetky zápisy do HTML kódu sa odohrávajú na pozadí – editor sám určí, ktorú značku má použiť pre požadované zobrazenie.

WYSIWYG editory

Pre profesionála je v oblasti WYSIWYG editorov výber jasný. Asi najdokonalejším nástrojom, spájajúcim všetky výhody textových editorov zdrojového kódu a WYSIWYG editorov s dokonalým zobrazením editovanej stránky je Macromedia (Adobe) Dreamweaver (v aktuálnej verzii 8).

Microsoft ponúka ako konkurenciu pre Dreamweaver program Microsoft Expression Web Designer (predtým MS FrontPage). Tento program je celkom dôstojným súperom pre Dreamveawer a môže vám tiež celkom efektívne pri tvorbe web stránok pomôcť.

WYSIWYG editory

Dreamweaver a Microsoft Expression Web Designer nie sú jedinými predstaviteľmi WYSIWYG editorov. Dokonca aj MS Word umožňuje uložiť editovaný dokument ako HTML – čím sa dá povedať, že dokáže podobné veci ako špecializované editory. Je to však naozaj núdzové riešenie. MS Word nedokáže pracovať so štýlmi a ním vytvorené stránky obsahujú veľmi neefektívny HTML kód – pre ďalšie úpravy v inom editore ako je MS Word nepoužiteľný.

V tejto kategórii samozrejme tiež existujú ďalšie

nástroje, ale v tejto kapitole sme si chceli ukázať tie najlepšie a najdôležitejšie.

Zdroje

[URL1] WIKIPEDIA – Hypertext markup languagehttp://sk.wikipedia.org/wiki/HTML

[URL2] WIKIPEDIA – Extensible Hypertext Markup Languagehttp://sk.wikipedia.org/wiki/XHTML

[URL3] WIKIPEDIA – Cascading Style Sheetshttp://sk.wikipedia.org/wiki/Kaskádové_štýly

[URL4] Quirksmode.ORG - The position declarationhttp://www.quirksmode.org/css/position.html

[URL5] Jak psát webhttp://www.jakpsatweb.cz/

[URL6] Kurz Internet a tvorba www stránokhttp://www.hmw.sk/kurz-ke/index.html

[URL7] Interval.CZ – XHTML - kompletní průvodcehttp://interval.cz/serialy/xhtml-kompletni-pruvodce/

[URL8] Interval.CZ – Kaskádové styly - kompletní průvodce začátečníka http://interval.cz/serialy/kaskadove-styly-kompletni-pruvodce-zacatecnika/

[URL9] Interval.CZ – CSS2 - kaskádové styly druhé generacehttp://interval.cz/serialy/css2-kaskadove-styly-druhe-generace/

[URL10] World Wide Web Consortium (W3C)http://www.w3.org/ (v angličtine)

[1] PÍSEK, S: HTML a XHTML, začínáme programovat. Praha : GRADA Publishing, 2003. 256 s. ISBN 80-247-0571-0

[2] SNÍŽEK, M.: CSS pro zelenáče. Praha : Neocortex, 2004. 295 s. ISBN 80-86330-14-1[3] MIKLE, P.: XDHTML – HTML, XHTML, DHTML – úplná přesná referenční příručka. Brno :

Zoner Press, 2004. 208 s. ISBN 80-86815-01-3[4] MIKLE, P.: XCSS – CSS1, CSS2, CSS3 – úplná přesná referenční příručka. Brno : Zoner Press,

2004. 232 s. ISBN 80-86815-13-7

Documents

Tvorba web stránok