12. Tvorba www stránky
(→CSS) |
(→XML) |
||
| (Není zobrazeno 11 mezilehlých verzí od 1 uživatele.) | |||
| Řádka 92: | Řádka 92: | ||
Přímý styl''' |
Přímý styl''' |
||
vepisuje se přímo do tagu. |
vepisuje se přímo do tagu. |
||
| − | <p style="color: red">Tento odstavec bude červený.</p> |
+ | <nowiki><p style="color: red">Tento odstavec bude červený.</p></nowiki> |
Stylování |
Stylování |
||
| Řádka 106: | Řádka 106: | ||
} ; |
} ; |
||
| − | Nástin možností CSS |
+ | ====Nástin možností CSS==== |
| − | Opravdu jenom nástin. (Kdyžtak vizte kompletní přehled.) Tak co třeba CSS dovedou: |
+ | *Opravdu jenom nástin. (Kdyžtak vizte kompletní přehled.) Tak co třeba CSS dovedou: |
| − | Nastavit libovolnou a přesnou velikost písma, prokládání, kapitálky |
+ | *Nastavit libovolnou a přesnou velikost písma, prokládání, kapitálky |
| − | Udělat odsazení prvního řádku odstavce, zvětšit řádkování |
+ | *Udělat odsazení prvního řádku odstavce, zvětšit řádkování |
| − | Zrušit nebo zvětšit prázdný prostor po odstavci |
+ | *Zrušit nebo zvětšit prázdný prostor po odstavci |
| − | Automaticky formátovat nadpisy (například je všechny udělat zelené) |
+ | *Automaticky formátovat nadpisy (například je všechny udělat zelené) |
| − | Zvýrazňovat odkazy po přejetí myší |
+ | *Zvýrazňovat odkazy po přejetí myší |
| − | Udělat automaticky grafické odrážky |
+ | *Udělat automaticky grafické odrážky |
| − | Určité části textu zneviditelnit, zprůhlednit nebo nezobrazit |
+ | *Určité části textu zneviditelnit, zprůhlednit nebo nezobrazit |
| − | Předefinovat grafický význam běžných tagů (například všechno, co je kurzívou, udělat i tučně) |
+ | *Předefinovat grafický význam běžných tagů (například všechno, co je kurzívou, udělat i tučně) |
| − | Nastavit pozadí čehokoliv, stránky, tabulky ale třeba i odstavce; pozadí se nemusí opakovat a může mít přesnou pozici! |
+ | *Nastavit pozadí čehokoliv, stránky, tabulky ale třeba i odstavce; pozadí se nemusí opakovat a může mít přesnou pozici! |
| − | Umístit nějaký objekt (třeba kus textu) kamkoliv do stránky, může se to i překrývat |
+ | *Umístit nějaký objekt (třeba kus textu) kamkoliv do stránky, může se to i překrývat |
| − | Přidat k čemukoli rolovací lišty, oříznout to, orámovat, nastavit okraje |
+ | *Přidat k čemukoli rolovací lišty, oříznout to, orámovat, nastavit okraje |
| − | V kombinaci se skripty je dnes CSS nejmocnější zbraň pro "rozhýbání" stránek. |
+ | *V kombinaci se skripty je dnes CSS nejmocnější zbraň pro "rozhýbání" stránek. |
| − | Hlavní význam CSS spočívá v tom, že fungují hodně automaticky, přečemž se vzhled celého webu deklaruje jedním souborem. |
+ | *Hlavní význam CSS spočívá v tom, že fungují hodně automaticky, přečemž se vzhled celého webu deklaruje jedním souborem. |
| − | XHTML |
+ | ===XHTML === |
| − | je novější alternativní forma HTML. X na začátku znamená eXtensible. Byl vytvořen pro flexibilnější možnosti zobrazování tagů. Je to rozšířený HTML a začal se vyvíjet, protože se zastavil vývoj HTML 4.1 a čekalo se že bude nahrazen. Nesetkal s příliš velkou odezvou a nadále html převažuje. V současné době se vyvíjí jak XTHML tak HTML. |
+ | je novější alternativní forma HTML. X na začátku znamená eXtensible. Byl vytvořen pro '''flexibilnější možnosti''' zobrazování tagů. Je to rozšířený HTML a začal se vyvíjet, protože se zastavil vývoj HTML 4.1 a čekalo se že bude nahrazen. Nesetkal s příliš velkou odezvou a nadále html převažuje. V současné době se '''vyvíjí jak XTHML tak HTML'''. |
| − | XML |
+ | ===XML=== |
| − | je zkratka pro Rozšířitelný značkovací jazyk (Extensible Markup Language). Je zajímavý tím, že neobsahuje žádné konkrétní značky, kdokoliv si tedy může vymyslet vlastní značky, např. <barva>zelená</barva>. To umožňuje velice dobře definovat přesnou strukturu každého XML dokumentu podle aktuální potřeby. XML je tak jakýmsi předělem mezi databázovou strukturou a textovým dokumentem. |
+ | je zkratka pro Rozšířitelný značkovací jazyk (Extensible Markup Language). Je zajímavý tím, že neobsahuje žádné konkrétní značky, kdokoliv si tedy může vymyslet vlastní značky, např. <code><barva>zelená</barva></code>. To umožňuje velice dobře definovat přesnou strukturu každého XML dokumentu podle aktuální potřeby. XML je tak jakýmsi '''předělem mezi databázovou strukturou a textovým dokumentem'''. |
XML na rozdíl od známějšího jazyka HTML vůbec neobsahuje informace o způsobu zobrazení, dochází tak k naprostému oddělení formy od obsahu. Díky tomu je XML mnohem flexibilnější, umožňuje vlastní volbu zobrazení každé aplikaci, která s XML dokumentem pracuje. Pokud je přesto potřeba jednotný vzhled, lze ho definovat pomocí speciálních stylesheetů , které jsou připojeny v záhlaví XML dokumentu. |
XML na rozdíl od známějšího jazyka HTML vůbec neobsahuje informace o způsobu zobrazení, dochází tak k naprostému oddělení formy od obsahu. Díky tomu je XML mnohem flexibilnější, umožňuje vlastní volbu zobrazení každé aplikaci, která s XML dokumentem pracuje. Pokud je přesto potřeba jednotný vzhled, lze ho definovat pomocí speciálních stylesheetů , které jsou připojeny v záhlaví XML dokumentu. |
||
| − | Má jednoduchý převod na jiné formáty. XML se dnes používá především pro snadnou výměnu informací (např. výměnu faktur) a komunikaci nezávislou na konkrétní aplikaci či platformě. Hlavními výhodami XML oproti jiným formátům používaným pro přenos informací je jeho nezávislost, standardizace, poměrně malá velikost, podpora národních kódování a jednoduchý převod na jiné formáty. |
+ | Má jednoduchý převod na jiné formáty. XML se dnes používá především pro snadnou výměnu informací (např. výměnu faktur) a komunikaci nezávislou na konkrétní aplikaci či platformě. Hlavními výhodami XML oproti jiným formátům používaným pro přenos informací je jeho nezávislost, standardizace, poměrně malá velikost, '''podpora národních kódování''' a jednoduchý převod na jiné formáty. |
| − | Dynamcké HTML |
+ | |
| + | ===Dynamcké HTML=== |
||
Lze říci, že DHTML je spojení JavaScriptu (JScriptu) a CSS v prohlížečích Internet Explorer verze 4, 5 a 6: |
Lze říci, že DHTML je spojení JavaScriptu (JScriptu) a CSS v prohlížečích Internet Explorer verze 4, 5 a 6: |
||
| − | JavaScript + CSS + MS IE 4|5|6 = DHTML |
+ | '''JavaScript + CSS + MS IE 4|5|6 = DHTML''' |
Jiné prohlížeče DHTML nezavádějí jako pojem, níže uvedené příklady v nich ale fungují (jde v zásadě o aplikace javascriptu). |
Jiné prohlížeče DHTML nezavádějí jako pojem, níže uvedené příklady v nich ale fungují (jde v zásadě o aplikace javascriptu). |
||
| − | Dynamické HTML je protiklad ke statickému HTML, které se jednou načetlo do stránky a pak už se s ním nedalo nic dělat. A právě dynamické HTML umožňuje obsah stránky měnit i po načtení. Klasicky jsou to různé animace, změny barev, automatické psaní textu, změny textu, problikávání, vyskakování oken a podobné vylomeniny. Pokud si říkáte, že to je to samé, co JavaScripty, tak máte pravdu. Microsoft k JavaScriptu dopsal pár věcí a nazval to JScript. |
+ | Dynamické HTML je protiklad ke statickému HTML, které se jednou načetlo do stránky a pak už se s ním nedalo nic dělat. A právě dynamické HTML '''umožňuje obsah stránky měnit i po načtení'''. Klasicky jsou to různé animace, změny barev, automatické psaní textu, změny textu, problikávání, vyskakování oken a podobné vylomeniny. Pokud si říkáte, že to '''je to samé, co JavaScripty''', tak máte pravdu. Microsoft k JavaScriptu dopsal pár věcí a nazval to JScript. |
| − | Užitečnost DHTML: |
+ | |
| − | Nevíme, jaký má čtenář prohlížeč, proto se na skript nemůžu spolehnout. |
+ | ====Užitečnost DHTML==== |
| − | DHTML zřídka poskytují nějakou informaci, většinou jde jen o efekt. |
+ | *Nevíme, jaký má čtenář prohlížeč, proto se na skript nemůžu spolehnout. |
| − | Programovací úsilí je zpravidla silně neadekvátní výsledku, protože je třeba skript odladit na mnoha různých platformách. |
+ | *DHTML zřídka poskytují nějakou informaci, většinou jde jen o efekt. |
| − | nedokáže ukládat data (z bezpečnostních důvodů) |
+ | *Programovací úsilí je zpravidla silně neadekvátní výsledku, protože je třeba skript odladit na mnoha různých platformách. |
| − | Co je z DHTML použitelné: |
+ | *nedokáže ukládat data (z bezpečnostních důvodů) |
| − | Reklamy |
+ | |
| − | Vyskakující menu |
+ | ====Co je z DHTML použitelné==== |
| − | Veselé matení čtenáře |
+ | *Reklamy |
| − | Částečná kontrola ovládání formulářů |
+ | *Vyskakující menu |
| − | Vpisování společných hlaviček do mnoha souborů |
+ | *Veselé matení čtenáře |
| − | Přizpůsobení vzhledu dokumentu podle volby čtenáře |
+ | *Částečná kontrola ovládání formulářů |
| − | Java Script |
+ | *Vpisování společných hlaviček do mnoha souborů |
| − | JavaScript je objektově orientovaný programovací jazyk, využívaný při tvorbě webových stránek. Na rozdíl od serverových programovacích jazyků (například ) sloužících ke generování kódu samotné stránky, JavaScript běží na straně klienta, tedy v prohlížeči až po stažení do vašeho počítače. |
+ | *Přizpůsobení vzhledu dokumentu podle volby čtenáře |
| − | JavaScript se používá především pro vytváření interaktivních webových stránek. Příkladem použití mohou být nejrůznější kontroly správného vyplnění formulářů, obrázky měnící se po přejetí myší, rozbalovací menu atd. JavaScript se také často používá k měření statistik návštěvnosti. |
+ | |
| − | JavaScript je jazyk |
+ | ===Java Script=== |
| − | interpretovaný -- nemusí se kompilovat |
+ | JavaScript je objektově orientovaný programovací jazyk, využívaný při tvorbě webových stránek. Na rozdíl od serverových programovacích jazyků (například ) sloužících ke generování kódu samotné stránky, JavaScript '''běží na straně klienta''', tedy v prohlížeči '''až po stažení do vašeho počítače'''. |
| − | objektový -- využívá objektů prohlížeče a zabudovaných objektů |
+ | JavaScript se používá především pro vytváření interaktivních webových stránek. Příkladem použití mohou být nejrůznější '''kontroly správného vyplnění formulářů, obrázky měnící se po přejetí myší, rozbalovací menu atd'''. JavaScript se také často používá k měření statistik návštěvnosti. |
| − | závislý na prohlížeči -- funguje ale ve většině prohlížečů |
+ | |
| − | case sensitivní -- záleží na velikosti písem v zápisu |
+ | ====JavaScript je jazyk==== |
| − | syntaxí podobný jazykům C, Java a podobným |
+ | *interpretovaný -- nemusí se kompilovat |
| − | Omezení jazyka |
+ | *objektový -- využívá objektů prohlížeče a zabudovaných objektů |
| − | JavaScript funguje pouze v prohlížeči. |
+ | *závislý na prohlížeči -- funguje ale ve většině prohlížečů |
| − | Uživatel může JavaScript zakázat |
+ | *case sensitivní -- záleží na velikosti písem v zápisu |
| − | Existují různé odlišné verze jazyka i prohlížečů, což vede k častým chybám. |
+ | *syntaxí podobný jazykům C, Java a podobným |
| − | Neumí přistupovat k souborům (kromě cookies) ani k žádným systémovým objektům. |
+ | |
| − | Neumí žádná data uložit (kromě cookies). |
+ | ====Omezení jazyka==== |
| − | To vše z něj dělá pouze jazyk druhořadý, účelově použitelný pouze v HTML stránkách. |
+ | *JavaScript funguje pouze v prohlížeči. |
| − | Flash |
+ | *Uživatel může JavaScript zakázat |
| − | Flash byl původně technologií určenou k vytváření složitých animací. Ve svých počátcích býval Flash používán pouze při tvorbě reklamních bannerů, pro což je vhodný i díky malé velikosti souborů (využívá vektorovou grafiku). Dnes má však Flash mnohem rozsáhlejší možnosti využití – hodí se ke stavbě celých prezentací, vytváření on-line her či interaktivních aplikací. |
+ | *Existují různé odlišné verze jazyka i prohlížečů, což vede k častým chybám. |
| − | Významnou výhodou technologie Flash je možnost uložit hotovou aplikaci i jako spustitelný soubor a distribuovat ji tak i offline např. na CD-ROM. Stále větší význam dostává také Flash Lite, mladší a mírně odlehčený bratříček určený pro mobilní zařízení. |
+ | *Neumí přistupovat k souborům (kromě cookies) ani k žádným systémovým objektům. |
| − | Tím však přednosti technologie Flash zdaleka nekončí. Podobně jako technologie AJAX bývá Flash používán k vytváření tzv. RIA aplikací, těží zde ze schopnosti přehrávat audio a video, pracovat s databázemi a dalšími pokročilými nástroji. |
+ | *Neumí žádná data uložit (kromě cookies). |
| − | Prohlížeče neumí Flash zobrazovat automaticky, je nutné mít instalovaný tzv. Flash plugin. V současnosti to však již není velkým problémem, podle statistik má Flash plugin instalován přes 90 % české internetové populace. V některých případech jde naopak o výhodu, neboť není nutné Flash aplikaci testovat na různých prohlížečích. |
+ | *To vše z něj dělá pouze jazyk druhořadý, účelově použitelný pouze v HTML stránkách. |
| − | Action script |
+ | |
| − | je programovací jazyk podobný JavaScriptu. Je součástí technologie Flash, kde jeho využití významně zvyšuje interaktivnost animací. Právě ActionScript stojí za schopností vytvářet rozsáhlé flashové prezentace, on-line hry či složité flashové aplikace. |
+ | ===Flash=== |
| − | ActionScript je tedy hlavním motorem technologie Flash, umožňuje nejen tvorbu základních prvků sloužících k dynamickému ovládání stránek (např. tlačítka, menu…), ActionScript funguje například i jako prostředník při komunikaci s externími zdroji dat, dokáže přehrávat hudbu či video a vykonávat další funkce potřebné při vytváření RIA aplikací. |
+ | Flash byl původně technologií určenou '''k vytváření složitých animací.''' Ve svých počátcích býval Flash používán pouze při '''tvorbě reklamních bannerů''', pro což je vhodný i díky malé velikosti souborů ('''využívá vektorovou grafiku'''). Dnes má však Flash mnohem rozsáhlejší možnosti využití – hodí se ke''' stavbě celých prezentací, vytváření on-line her či interaktivních aplikací'''. |
| + | |||
| + | Významnou výhodou technologie Flash je možnost uložit hotovou aplikaci i jako '''spustitelný soubor a distribuovat ji tak i offline''' např. na CD-ROM. Stále větší význam dostává také Flash Lite, mladší a mírně odlehčený bratříček určený pro mobilní zařízení. |
||
| + | |||
| + | Tím však přednosti technologie Flash zdaleka nekončí. Podobně jako technologie AJAX bývá Flash používán k vytváření tzv. RIA aplikací, těží zde ze '''schopnosti přehrávat audio a video, pracovat s databázemi''' a dalšími pokročilými nástroji. |
||
| + | |||
| + | Prohlížeče neumí Flash zobrazovat automaticky, je nutné mít instalovaný tzv.''' Flash plugin'''. V současnosti to však již není velkým problémem, podle statistik má Flash plugin instalován přes 90 % české internetové populace. V některých případech jde naopak o výhodu, neboť '''není nutné Flash aplikaci testovat na různých prohlížečích'''. |
||
| + | |||
| + | ===Action script=== |
||
| + | je programovací jazyk podobný JavaScriptu. Je '''součástí technologie Flash''', kde jeho využití významně zvyšuje''' interaktivnost animací'''. Právě ActionScript stojí za schopností vytvářet rozsáhlé '''flashové prezentace, on-line hry či složité flashové aplikace'''. |
||
| + | ActionScript je tedy hlavním motorem technologie Flash, umožňuje nejen tvorbu základních prvků sloužících k dynamickému ovládání stránek (např. tlačítka, menu…), ActionScript funguje například i jako''' prostředník při komunikaci s externími zdroji dat''', dokáže přehrávat hudbu či video a vykonávat další funkce potřebné při vytváření RIA aplikací. |
||
ActionScript byl vyvinut v roce 2000 z ECMA scriptu a patří k objektově orientovaným programovacím jazykům. |
ActionScript byl vyvinut v roce 2000 z ECMA scriptu a patří k objektově orientovaným programovacím jazykům. |
||
| − | Podporované formáty souborů |
+ | ==Podporované formáty souborů== |
Zobrazení obrázku, či přehrávání videa je omezeno na určité spektrum formátů. S instalací přídavných softwarů nebo addonů není problém zobrazovat mnoho dalších formátů přímo v okně prohlížeče. |
Zobrazení obrázku, či přehrávání videa je omezeno na určité spektrum formátů. S instalací přídavných softwarů nebo addonů není problém zobrazovat mnoho dalších formátů přímo v okně prohlížeče. |
||
| − | Obrázky |
||
| − | BMP – Dnes již nepoužívaný formát. Velká datová velikost bez komprimace. |
||
| − | JPG/JPEG – Nejběžněji používaný soubor. Výhodný kvůli jeho nízké datové velikosti, která však ovlivňuje kvalitu souborů . Nepodporuje pruhledný kanál. |
||
| − | GIF – Podporuje průhledný kanál. Malá velikost, ale nízká barevná hloubka. Pouze 256 barev. Podporuje i jednoduchou animaci. |
||
| − | PNG – Asi nejvýhodnější formát pro webové stránky. Je komprimovaný a podporuje i průhledný kanál. |
||
| − | Zvuk |
||
| − | MID – Nejstarší zvukový formát, dnes již skoro nepoužívaný. |
||
| − | WAV – Nekomprimovaný zvukový formát. Pro web nevhodný kvůli datové velikosti. Je však podporován všemi prohlížeči. |
||
| − | MP3 – Nejrozšířenější zvukjový formát ideálni pro jakékoliv použití. |
||
| − | WMA – Streamový zvukový formát. Používá se především v internetových rádiích. |
||
| − | OGG – Komprimovaný zvukový soubor, který má dobrou kvalitu i při nízkem datovém objemu. |
||
| − | RM, RAM – real media audio formát. Používá se pro stream. |
||
| − | Video |
||
| − | FLV – Využívá technologíí flashe. Momentálně jeden z nejrozšířenějších formátů. Přehrává video i bez jeho celého načtení. |
||
| − | WMV – Formát, firmy Microsoft. Není multiplatformní. Malý datový objem. |
||
| − | MOV – Formát firmy Apple. |
||
| − | RM, RAM – real media audio formát. Používá se pro stream. |
||
| − | Ostatní |
||
| − | SWF – soubor pro Flash. Jedná se o kompilovaný soubor. Pro jeho spuštění je nutné mít nainstalovaný flash player. |
||
| − | Optimalizace stránek |
||
| − | Validace www stránky |
||
| − | Zobrazení stránky je závislé na tom, jak daný prohlížeč kód vykreslí. V minulosti byly komplikace se správným zobrazením stránky na různých prohlížečích. Kvůli lepšímu zobrazení stránek vznikly určité standardy pro psaní a vykreslování kódu. Jsou popisovány organizací W3C. |
||
| − | Metadata |
||
| − | Správně vyplněná metadata jsou nezbytnou součástí každé webové stránky. Říkají prohlížeči kdo je autorem stránky, jaké kódování je použito, obsahují klíčová slova a popisek stránky, jenž je nesmírně důležitý pro vyhladávače, dále informace pro roboty a další. Umisťují se do hlavičky a jsou někdy velice rozsáhlé. |
||
| − | Copywriting |
||
| − | je označení pro činnost, zabývající se obecně tvorbou úspěšných a vhodně cílených textů. V oblasti marketingu a firemní komunikace se zákazníky a partnery, kam spadá i příprava obsahu webových prezentací (dále například tištěných katalogů a prospektů, newsletterů, e-mailových oslovení i dopisů), je nanejvýš vhodné koncipovat veškeré texty s ohledem na jejich skutečný efekt, cílovou skupinu oslovených i přínos pro podporu obchodu či jiného stanoveného cíle. |
||
| − | Jak poznáte kvalitní výsledek práce copywritera: |
+ | ===Obrázky=== |
| − | text je strukturovaný, čtivý a jazykově na úrovni, |
+ | ;BMP :Dnes již nepoužívaný formát. Velká datová velikost bez komprimace. |
| − | vhodně cílí na požadovanou skupinu čtenářů, |
+ | ;JPG/JPEG :Nejběžněji používaný soubor. Výhodný kvůli jeho nízké datové velikosti, která však ovlivňuje kvalitu souborů . Nepodporuje pruhledný kanál. |
| − | přináší zajímavé a pravdivé informace přehlednou a korektní formou, |
+ | ;GIF :Podporuje průhledný kanál. Malá velikost, ale nízká barevná hloubka. Pouze 256 barev. Podporuje i jednoduchou animaci. |
| − | respektuje hlavní zásady pro podporu SEO (optimalizace pro vyhledávače). |
+ | ;PNG :Asi nejvýhodnější formát pro webové stránky. Je komprimovaný a podporuje i průhledný kanál. |
| + | ===Zvuk=== |
||
| + | ;MID :Nejstarší zvukový formát, dnes již skoro nepoužívaný. |
||
| + | ;WAV :Nekomprimovaný zvukový formát. Pro web nevhodný kvůli datové velikosti. Je však podporován všemi prohlížeči. |
||
| + | ;MP3 :Nejrozšířenější zvukjový formát ideálni pro jakékoliv použití. |
||
| + | ;WMA :Streamový zvukový formát. Používá se především v internetových rádiích. |
||
| + | ;OGG :Komprimovaný zvukový soubor, který má dobrou kvalitu i při nízkem datovém objemu. |
||
| + | ;RM/RAM :real media audio formát. Používá se pro stream. |
||
| − | Zásadní podmínkou pro vznik každého kvalitního obsahu webu je dostatek relevantních podkladů, stejně jako následná zkušenost copywritera při jejich uchopení. Dobrý text má předpoklad přinášet obchodní úspěchy a plnit stanovené komunikační cíle. |
+ | ===Video=== |
| − | SEO optimalizace |
+ | ;FLV :Využívá technologíí flashe. Momentálně jeden z nejrozšířenějších formátů. Přehrává video i bez jeho celého načtení. |
| − | je zkratka z anglického Search Engine Optimization, tedy optimalizace pro vyhledávače. Základem SEO je jakýsi neohraničený soubor pravidel, jejichž dodržení zajistí stránkám dobré umístění ve výsledcích vyhledávání (tzv. SERP). Tato pravidla vznikla (a stále se trochu mění) praktickým pozorováním činnosti vyhledávačů, jejich algoritmů a hodnocení výsledků vyhledávání. |
+ | ;WMV :Formát, firmy Microsoft. Není multiplatformní. Malý datový objem. |
| − | Obvykle zahrnuje SEO analýzu, jejímž výsledkem je optimální SEO strategie, výběr vhodných klíčových slov, různé SEO taktiky, změny v informační architektuře webu, SEO úpravy textů, budování zpětných odkazů a další činnosti. |
+ | ;MOV :Formát firmy Apple. |
| + | ;RM, RAM :real media audio formát. Používá se pro stream. |
||
| + | |||
| + | ===Ostatní=== |
||
| + | ;SWF :soubor pro Flash. Jedná se o kompilovaný soubor. Pro jeho spuštění je nutné mít nainstalovaný flash player. |
||
| + | |||
| + | ==Optimalizace stránek== |
||
| + | |||
| + | ===Validace www stránky=== |
||
| + | Zobrazení stránky je závislé na tom, jak daný '''prohlížeč kód vykreslí'''. V minulosti byly komplikace se správným zobrazením stránky na různých prohlížečích. Kvůli lepšímu zobrazení stránek vznikly určité''' standardy pro psaní a vykreslování kódu'''. Jsou popisovány organizací''' W3C'''. |
||
| + | |||
| + | ===Metadata=== |
||
| + | Správně vyplněná metadata jsou '''nezbytnou součástí každé webové stránky'''. Říkají prohlížeči kdo je autorem stránky, jaké kódování je použito,''' obsahují klíčová slova a popisek stránky''', jenž je nesmírně '''důležitý pro vyhladávače''', dále informace pro roboty a další. Umisťují se do hlavičky a jsou někdy velice rozsáhlé. |
||
| + | |||
| + | ===Copywriting=== |
||
| + | Je označení pro činnost, zabývající se obecně tvorbou úspěšných a '''vhodně cílených textů.''' V oblasti marketingu a firemní komunikace se zákazníky a partnery, kam spadá i '''příprava obsahu webových prezentací''' (dále například tištěných katalogů a prospektů, newsletterů, e-mailových oslovení i dopisů), je nanejvýš vhodné koncipovat veškeré texty s ohledem na jejich skutečný efekt, cílovou skupinu oslovených i přínos pro podporu obchodu či jiného stanoveného cíle. |
||
| + | |||
| + | ====Jak poznáte kvalitní výsledek práce copywritera==== |
||
| + | *text je strukturovaný, čtivý a jazykově na úrovni, |
||
| + | *vhodně cílí na požadovanou skupinu čtenářů, |
||
| + | *přináší zajímavé a pravdivé informace přehlednou a korektní formou, |
||
| + | *respektuje hlavní zásady pro podporu SEO (optimalizace pro vyhledávače). |
||
| + | |||
| + | Zásadní podmínkou pro vznik každého kvalitního obsahu webu je '''dostatek relevantních podkladů''', stejně jako následná zkušenost copywritera při jejich uchopení. Dobrý text má předpoklad přinášet obchodní úspěchy a plnit stanovené komunikační cíle. |
||
| + | |||
| + | ===SEO optimalizace=== |
||
| + | Je zkratka z anglického Search Engine Optimization, tedy''' optimalizace pro vyhledávače'''. Základem SEO je jakýsi''' neohraničený soubor pravidel''', jejichž dodržení zajistí stránkám dobré''' umístění ve výsledcích vyhledávání''' (tzv. SERP). Tato pravidla vznikla (a stále se trochu mění) praktickým pozorováním činnosti vyhledávačů, jejich algoritmů a hodnocení výsledků vyhledávání. |
||
| + | Obvykle zahrnuje '''SEO analýzu''', jejímž výsledkem je optimální '''SEO strategi'''e, výběr vhodných klíčových slov, různé SEO taktiky, změny v informační architektuře webu, SEO úpravy textů, budování zpětných odkazů a další činnosti. |
||
http://www.adaptic.cz/znalosti/slovnicek/ |
http://www.adaptic.cz/znalosti/slovnicek/ |
||
| + | |||
http://www.jakpsatweb.cz/css/css-uvod.html |
http://www.jakpsatweb.cz/css/css-uvod.html |
||
| + | |||
http://www.jakpsatweb.cz/zaklady-html.html |
http://www.jakpsatweb.cz/zaklady-html.html |
||
| + | |||
http://www.jakpsatweb.cz/dhtml.html |
http://www.jakpsatweb.cz/dhtml.html |
||
| + | |||
http://www.adaptic.cz/znalosti/slovnicek/flash.htm |
http://www.adaptic.cz/znalosti/slovnicek/flash.htm |
||
| + | |||
http://www.amadeo.cz/cs/aktuality/co-je-to-copywriting.html |
http://www.amadeo.cz/cs/aktuality/co-je-to-copywriting.html |
||
| + | |||
http://www.w3schools.com/media/media_videoformats.asp |
http://www.w3schools.com/media/media_videoformats.asp |
||
| + | |||
http://www.w3schools.com/media/media_videoformats.asp |
http://www.w3schools.com/media/media_videoformats.asp |
||
Aktuální verze z 22. 5. 2010, 20:20
Obsah |
[editovat] Jak se tvoří html
Html lze tvořit v jakémkoliv jednoduchém textovém editoru a pak uložit s koncovkou html. Toto se nazývá strukturní vytváření. Můžeme použití aplikaci pro tvorbu stránek, kde se obsah edituje graficky WYSIWYG editory.
[editovat] Jak pracují prohlížeče
Stránky jsou umístěny na serveru na páteřní síti s velkou propustností dat do internetu. Uživatel který chce procházet stránky musí zadat ve svém počítači ip nebo www adresu, která ho přesměruje na patřičný server. Server pošle uživateli kód, který se jmenuje HTML. Tento kód je dekódován internetovým prohlížečem (Mozzila Firefox, Opera, Chrome, Safari a taky i internet Explorer) a následně zobrazen jako internetová stránka.
[editovat] Strukturní editory
Je mnoho aplikací, ve kterých můžeme psát html. Například notepad++, Pspad, Gedit atd. Používání textového editoru je výhodou třeba u dynamického rozsáhlejšího webu, kdy je potřeba mít absolutní přehled o celé struktuře stránky.
[editovat] WYSIWYG editory
je zkratka od anglického „What you see is what you get“, v překladu „Co vidíš, to dostaneš“. Je to viditelný náhled při editaci například stránek nebo dokumentů. Editory zobrazují stránku už při psaní tak, jak bude vypadat v prohlížeči a kód generuje automaticky, žádná znalost jazyka není potřeba. Například Adobe Dreamweaver, nebo Front page. Editory umožňují snadnější propojení html s databází a obsahují i pokročilejší funkce php jazyka a javascriptu.
[editovat] Jazyky a technologie
[editovat] HTML
HTML je HyperText Markup Language, neboli hypertextový jazyk značek (tagů). Jazyk byl navržen v roce 1990 ve Švýcarskkém Cernu společně s koncepcí WWW. Autorem je Tim Berners-Lee. Postupně se vyvíjel a do nedávna se používala verze HTML 4.1.
- HTML 1.0 - jen pár značek které se používají i dnes .
- HTML 2.0 - Vydán v roce 1994. Obsahuje foruláře a mnoho nových tagů
- HTML 3.0 – 3.2 Podpora všech barev, tabulek a pozadí stránek. Používal se prohlížeč
Netscape Navigátor a Internet Explorer. Měl podporu javascriptu.
- HTML 4.0 – 4.1 Vznik 4.0 v roce 1997 a 4.1 v roce 1999. Přibyly tagy div a span a pokročilé tabulky. Podporovala kaskádové styly CSS a zavrhla používaní některých tagů přímo v html . Jazyk už umožňoval vytvářet už prakticky cokoliv.
- HTML 5.0 – V současnosti přichází nová verze HTML, která poskytuje uživateli mnoho nových funkcí a možností, které do teď byly možné jen prostřednictvím Adobe Flash.
[editovat] Tagy neboli formátovací značky
Máme dva typy tagů. Párové a nepárové. Každý tag začíná a končí hranatými závorkami <img>. Pokud je tag párový druhý tag je tzv uzavírací a píše se do něj lomítko.Struktura Html vypadá následovně.
<html> <head> <title>Má první stránka</title> </head>
<body> Moje první html stránka. A nějaké další texty. </body> </htm>
[editovat] Základní tagy
<html> </html> začíná dokument a končí kód
<head> a </head> začíná a končí hlavičku, která se sice nezobrazuje, ale obsahuje některé důležité údaje, například
<title> a </title> vymezující název dokumentu (může se lišit od jména souboru)
<body> </body> Co je mezi <body> a </body>, se bude zobrazovat. <body> je tag, kterým začíná vlastní tělo dokumentu (angl. body = tělo).
<h1>, </h1> vymezení nadpisu první úrovně.
<h2>, </h2> nadpis druhé úrovně (mezinadpis, nadpis kapitoly). Dá se použít až šest úrovní nadpisů (tedy <h1>, <h2> až <h6>). Vykreslují se různě velké podle důležitosti.
<p>, </p> vymezení odstavce. Možná vůbec nejpoužívanější tag. Po jeho konci prohlížeč automaticky zalomí řádek a udělá vertikální mezeru.
<b>, </b> text mezi těmito tagy bude tučný.
<i>, </i> kurzíva,
, dvojice tagů vymezující nějak odlišný text.
<span style="color: red">, </span> V tomto případě má obalený kus textu červenou barvu písma. Jde o první příklad tagu, který má tak zvaný atribut. Atributem je "style" a má hodnotu "color: red" (angl. barva: červená). Pomocí tohoto atributu style= se dá detailně nadefinovat vzhled textu, obaleného libovolným tagem. V praxi má většina tagů nějaký atribut, zatím jsem se tomu vyhýbal.
<br> zalomení řádky, takzvaný měkký enter. Text po tomto tagu bude vždy začínat na novém řádku, ale není to nový odstavec. Pozor, tento tag je nepárový, to znamená, že žádné </br> neexistuje!
<a href="adresa">text odkazu </a> text (nebo obrázek) mezi těmito dvěma tagy se zobrazí jako text odkazu ("a" jako angl. "anchor" = odkaz). Po kliknutí na něj se prohlížeč přepne na adresu, která je zadaná atributem HREF. Atribut tagu "a" se rovná cestě k odkazovanému souboru. Používá se zde buď relativní, nebo absolutní adresa.
absolutní adresa používá se ve formě http://www.atakdále.cz. V příkladu je takto použita adresa Seznamu.
relativní cesta pokud se chci odkázat na jiný svůj soubor, je zbytečné vypisovat tam to http:// a celou cestu. Nejlepší je, když je odkazovaný soubor ve stejném adresáři jako ten aktuální. Pak se na něj dá ukázat relativně. Stačí zapsat jenom jméno souboru a prohlížeč to pochopí. Jestliže je ten cílový soubor v jiném blízkém adresáři, stačí napsat href="adresář/soubor.htm".
[editovat] Zásady html
- Nezáleží na velikosti písem, <body> je totéž co <BODY>
- V adresách a jménech souborů záleží na velikosti písmen, nesmějí tam být mezery a čeština.
- Tagy, které prohlížeč nezná, jako by nebyly.
- Na začátku tagu nesmí být mezera, třeba < br> je špatně.
- Dvě mezery po sobě (nebo víc) mají stejný význam jako jedna mezera.
- Konec řádku ve zdroji se chápe jako mezera.
- Jména atributů je dobré dávat vždy do uvozovek, ale není to úplně nutné, pokud uvnitř nejsou mezery.
- Speciální znaky typu © se do zdroje zadávají jako posloupnost znaků &něco; například © , pevná mezera je
- Poznámka se do zdroje vkládá mezi značky
[editovat] CSS
CSS je zkratka slov Cascading Style Sheets. Do češtiny bychom to přeložili jako Tabulky kaskádových stylů. Většinou se jedná o externí soubor s příponou css ale informace o stylech můžeme umístit i do hlavičky, nebo přímo do tagu tzv přímý styl. Nejvýhodnější je však volit externí soubor z důvodů snadné editace všech stránek. Ten musí být nadefinován v hlavičce stránky. Css obsahuje informace o barvě, velikosti, pozici, pozadí atd.. objektu ke kterém bude styl přiřazen. Přímý styl vepisuje se přímo do tagu.
<p style="color: red">Tento odstavec bude červený.</p>
Stylování Tag umístěný v html a připojeným stylem bude mít velikost 300pixelů a červené pozadí
<div style=“horizontalMenu“>
Styl v externím css
horizontalMenu
{
background-color:red;
width:300px;
} ;
[editovat] Nástin možností CSS
- Opravdu jenom nástin. (Kdyžtak vizte kompletní přehled.) Tak co třeba CSS dovedou:
- Nastavit libovolnou a přesnou velikost písma, prokládání, kapitálky
- Udělat odsazení prvního řádku odstavce, zvětšit řádkování
- Zrušit nebo zvětšit prázdný prostor po odstavci
- Automaticky formátovat nadpisy (například je všechny udělat zelené)
- Zvýrazňovat odkazy po přejetí myší
- Udělat automaticky grafické odrážky
- Určité části textu zneviditelnit, zprůhlednit nebo nezobrazit
- Předefinovat grafický význam běžných tagů (například všechno, co je kurzívou, udělat i tučně)
- Nastavit pozadí čehokoliv, stránky, tabulky ale třeba i odstavce; pozadí se nemusí opakovat a může mít přesnou pozici!
- Umístit nějaký objekt (třeba kus textu) kamkoliv do stránky, může se to i překrývat
- Přidat k čemukoli rolovací lišty, oříznout to, orámovat, nastavit okraje
- V kombinaci se skripty je dnes CSS nejmocnější zbraň pro "rozhýbání" stránek.
- Hlavní význam CSS spočívá v tom, že fungují hodně automaticky, přečemž se vzhled celého webu deklaruje jedním souborem.
[editovat] XHTML
je novější alternativní forma HTML. X na začátku znamená eXtensible. Byl vytvořen pro flexibilnější možnosti zobrazování tagů. Je to rozšířený HTML a začal se vyvíjet, protože se zastavil vývoj HTML 4.1 a čekalo se že bude nahrazen. Nesetkal s příliš velkou odezvou a nadále html převažuje. V současné době se vyvíjí jak XTHML tak HTML.
[editovat] XML
je zkratka pro Rozšířitelný značkovací jazyk (Extensible Markup Language). Je zajímavý tím, že neobsahuje žádné konkrétní značky, kdokoliv si tedy může vymyslet vlastní značky, např. <barva>zelená</barva>. To umožňuje velice dobře definovat přesnou strukturu každého XML dokumentu podle aktuální potřeby. XML je tak jakýmsi předělem mezi databázovou strukturou a textovým dokumentem.
XML na rozdíl od známějšího jazyka HTML vůbec neobsahuje informace o způsobu zobrazení, dochází tak k naprostému oddělení formy od obsahu. Díky tomu je XML mnohem flexibilnější, umožňuje vlastní volbu zobrazení každé aplikaci, která s XML dokumentem pracuje. Pokud je přesto potřeba jednotný vzhled, lze ho definovat pomocí speciálních stylesheetů , které jsou připojeny v záhlaví XML dokumentu.
Má jednoduchý převod na jiné formáty. XML se dnes používá především pro snadnou výměnu informací (např. výměnu faktur) a komunikaci nezávislou na konkrétní aplikaci či platformě. Hlavními výhodami XML oproti jiným formátům používaným pro přenos informací je jeho nezávislost, standardizace, poměrně malá velikost, podpora národních kódování a jednoduchý převod na jiné formáty.
[editovat] Dynamcké HTML
Lze říci, že DHTML je spojení JavaScriptu (JScriptu) a CSS v prohlížečích Internet Explorer verze 4, 5 a 6: JavaScript + CSS + MS IE 4|5|6 = DHTML Jiné prohlížeče DHTML nezavádějí jako pojem, níže uvedené příklady v nich ale fungují (jde v zásadě o aplikace javascriptu). Dynamické HTML je protiklad ke statickému HTML, které se jednou načetlo do stránky a pak už se s ním nedalo nic dělat. A právě dynamické HTML umožňuje obsah stránky měnit i po načtení. Klasicky jsou to různé animace, změny barev, automatické psaní textu, změny textu, problikávání, vyskakování oken a podobné vylomeniny. Pokud si říkáte, že to je to samé, co JavaScripty, tak máte pravdu. Microsoft k JavaScriptu dopsal pár věcí a nazval to JScript.
[editovat] Užitečnost DHTML
- Nevíme, jaký má čtenář prohlížeč, proto se na skript nemůžu spolehnout.
- DHTML zřídka poskytují nějakou informaci, většinou jde jen o efekt.
- Programovací úsilí je zpravidla silně neadekvátní výsledku, protože je třeba skript odladit na mnoha různých platformách.
- nedokáže ukládat data (z bezpečnostních důvodů)
[editovat] Co je z DHTML použitelné
- Reklamy
- Vyskakující menu
- Veselé matení čtenáře
- Částečná kontrola ovládání formulářů
- Vpisování společných hlaviček do mnoha souborů
- Přizpůsobení vzhledu dokumentu podle volby čtenáře
[editovat] Java Script
JavaScript je objektově orientovaný programovací jazyk, využívaný při tvorbě webových stránek. Na rozdíl od serverových programovacích jazyků (například ) sloužících ke generování kódu samotné stránky, JavaScript běží na straně klienta, tedy v prohlížeči až po stažení do vašeho počítače. JavaScript se používá především pro vytváření interaktivních webových stránek. Příkladem použití mohou být nejrůznější kontroly správného vyplnění formulářů, obrázky měnící se po přejetí myší, rozbalovací menu atd. JavaScript se také často používá k měření statistik návštěvnosti.
[editovat] JavaScript je jazyk
- interpretovaný -- nemusí se kompilovat
- objektový -- využívá objektů prohlížeče a zabudovaných objektů
- závislý na prohlížeči -- funguje ale ve většině prohlížečů
- case sensitivní -- záleží na velikosti písem v zápisu
- syntaxí podobný jazykům C, Java a podobným
[editovat] Omezení jazyka
- JavaScript funguje pouze v prohlížeči.
- Uživatel může JavaScript zakázat
- Existují různé odlišné verze jazyka i prohlížečů, což vede k častým chybám.
- Neumí přistupovat k souborům (kromě cookies) ani k žádným systémovým objektům.
- Neumí žádná data uložit (kromě cookies).
- To vše z něj dělá pouze jazyk druhořadý, účelově použitelný pouze v HTML stránkách.
[editovat] Flash
Flash byl původně technologií určenou k vytváření složitých animací. Ve svých počátcích býval Flash používán pouze při tvorbě reklamních bannerů, pro což je vhodný i díky malé velikosti souborů (využívá vektorovou grafiku). Dnes má však Flash mnohem rozsáhlejší možnosti využití – hodí se ke stavbě celých prezentací, vytváření on-line her či interaktivních aplikací.
Významnou výhodou technologie Flash je možnost uložit hotovou aplikaci i jako spustitelný soubor a distribuovat ji tak i offline např. na CD-ROM. Stále větší význam dostává také Flash Lite, mladší a mírně odlehčený bratříček určený pro mobilní zařízení.
Tím však přednosti technologie Flash zdaleka nekončí. Podobně jako technologie AJAX bývá Flash používán k vytváření tzv. RIA aplikací, těží zde ze schopnosti přehrávat audio a video, pracovat s databázemi a dalšími pokročilými nástroji.
Prohlížeče neumí Flash zobrazovat automaticky, je nutné mít instalovaný tzv. Flash plugin. V současnosti to však již není velkým problémem, podle statistik má Flash plugin instalován přes 90 % české internetové populace. V některých případech jde naopak o výhodu, neboť není nutné Flash aplikaci testovat na různých prohlížečích.
[editovat] Action script
je programovací jazyk podobný JavaScriptu. Je součástí technologie Flash, kde jeho využití významně zvyšuje interaktivnost animací. Právě ActionScript stojí za schopností vytvářet rozsáhlé flashové prezentace, on-line hry či složité flashové aplikace. ActionScript je tedy hlavním motorem technologie Flash, umožňuje nejen tvorbu základních prvků sloužících k dynamickému ovládání stránek (např. tlačítka, menu…), ActionScript funguje například i jako prostředník při komunikaci s externími zdroji dat, dokáže přehrávat hudbu či video a vykonávat další funkce potřebné při vytváření RIA aplikací. ActionScript byl vyvinut v roce 2000 z ECMA scriptu a patří k objektově orientovaným programovacím jazykům.
[editovat] Podporované formáty souborů
Zobrazení obrázku, či přehrávání videa je omezeno na určité spektrum formátů. S instalací přídavných softwarů nebo addonů není problém zobrazovat mnoho dalších formátů přímo v okně prohlížeče.
[editovat] Obrázky
- BMP
- Dnes již nepoužívaný formát. Velká datová velikost bez komprimace.
- JPG/JPEG
- Nejběžněji používaný soubor. Výhodný kvůli jeho nízké datové velikosti, která však ovlivňuje kvalitu souborů . Nepodporuje pruhledný kanál.
- GIF
- Podporuje průhledný kanál. Malá velikost, ale nízká barevná hloubka. Pouze 256 barev. Podporuje i jednoduchou animaci.
- PNG
- Asi nejvýhodnější formát pro webové stránky. Je komprimovaný a podporuje i průhledný kanál.
[editovat] Zvuk
- MID
- Nejstarší zvukový formát, dnes již skoro nepoužívaný.
- WAV
- Nekomprimovaný zvukový formát. Pro web nevhodný kvůli datové velikosti. Je však podporován všemi prohlížeči.
- MP3
- Nejrozšířenější zvukjový formát ideálni pro jakékoliv použití.
- WMA
- Streamový zvukový formát. Používá se především v internetových rádiích.
- OGG
- Komprimovaný zvukový soubor, který má dobrou kvalitu i při nízkem datovém objemu.
- RM/RAM
- real media audio formát. Používá se pro stream.
[editovat] Video
- FLV
- Využívá technologíí flashe. Momentálně jeden z nejrozšířenějších formátů. Přehrává video i bez jeho celého načtení.
- WMV
- Formát, firmy Microsoft. Není multiplatformní. Malý datový objem.
- MOV
- Formát firmy Apple.
- RM, RAM
- real media audio formát. Používá se pro stream.
[editovat] Ostatní
- SWF
- soubor pro Flash. Jedná se o kompilovaný soubor. Pro jeho spuštění je nutné mít nainstalovaný flash player.
[editovat] Optimalizace stránek
[editovat] Validace www stránky
Zobrazení stránky je závislé na tom, jak daný prohlížeč kód vykreslí. V minulosti byly komplikace se správným zobrazením stránky na různých prohlížečích. Kvůli lepšímu zobrazení stránek vznikly určité standardy pro psaní a vykreslování kódu. Jsou popisovány organizací W3C.
[editovat] Metadata
Správně vyplněná metadata jsou nezbytnou součástí každé webové stránky. Říkají prohlížeči kdo je autorem stránky, jaké kódování je použito, obsahují klíčová slova a popisek stránky, jenž je nesmírně důležitý pro vyhladávače, dále informace pro roboty a další. Umisťují se do hlavičky a jsou někdy velice rozsáhlé.
[editovat] Copywriting
Je označení pro činnost, zabývající se obecně tvorbou úspěšných a vhodně cílených textů. V oblasti marketingu a firemní komunikace se zákazníky a partnery, kam spadá i příprava obsahu webových prezentací (dále například tištěných katalogů a prospektů, newsletterů, e-mailových oslovení i dopisů), je nanejvýš vhodné koncipovat veškeré texty s ohledem na jejich skutečný efekt, cílovou skupinu oslovených i přínos pro podporu obchodu či jiného stanoveného cíle.
[editovat] Jak poznáte kvalitní výsledek práce copywritera
- text je strukturovaný, čtivý a jazykově na úrovni,
- vhodně cílí na požadovanou skupinu čtenářů,
- přináší zajímavé a pravdivé informace přehlednou a korektní formou,
- respektuje hlavní zásady pro podporu SEO (optimalizace pro vyhledávače).
Zásadní podmínkou pro vznik každého kvalitního obsahu webu je dostatek relevantních podkladů, stejně jako následná zkušenost copywritera při jejich uchopení. Dobrý text má předpoklad přinášet obchodní úspěchy a plnit stanovené komunikační cíle.
[editovat] SEO optimalizace
Je zkratka z anglického Search Engine Optimization, tedy optimalizace pro vyhledávače. Základem SEO je jakýsi neohraničený soubor pravidel, jejichž dodržení zajistí stránkám dobré umístění ve výsledcích vyhledávání (tzv. SERP). Tato pravidla vznikla (a stále se trochu mění) praktickým pozorováním činnosti vyhledávačů, jejich algoritmů a hodnocení výsledků vyhledávání. Obvykle zahrnuje SEO analýzu, jejímž výsledkem je optimální SEO strategie, výběr vhodných klíčových slov, různé SEO taktiky, změny v informační architektuře webu, SEO úpravy textů, budování zpětných odkazů a další činnosti.
http://www.adaptic.cz/znalosti/slovnicek/
http://www.jakpsatweb.cz/css/css-uvod.html
http://www.jakpsatweb.cz/zaklady-html.html
http://www.jakpsatweb.cz/dhtml.html
http://www.adaptic.cz/znalosti/slovnicek/flash.htm
http://www.amadeo.cz/cs/aktuality/co-je-to-copywriting.html
