Archiv rubriky: Webdesign

Jedním z mnoha aspektů, které musí CMS řešit, je uživatelské rozhraní. Konkrétně způsob, jakým lze vkládat nová data (texty novinek, kontakty do mailingových databází, obrázky do fotogalerie, apod.). V tomto článku se zaměřím především na možnosti, které pro vkládání dat nabízí běžný webový prohlížeč.

Formulářové stránky

S formuláři se na internetu střetáváme téměř na každém kroku. Od přihlašování na účet až po vyplňování osobních údajů v e-shopu. Jedná se o velice srozumitelný a jednoduchý způsob vkládání informací, který je snadno použitelný pro většinu běžných uživatelů. Jeho nevýhodou je zdlouhavé vyplňování, které činí formuláře s rostoucím objemem vkládaných dat prakticky nepoužitelné. Při vysokém počtu záznamů je tedy nutné zvážit jiné způsoby.

WYSIWYG editory

WYSIWYG editor by se dal označit za jakousi nadstavbu nad klasické formulářové prvky. Narozdíl od formulářů umožňuje WYSIWYG editor přímé vizuální formátování textu, bez znalosti značkovacího jazyka (např. HTML). Práci s ním lze přirovnat např. k textovému editoru. Vkládání dat je však až na formátování obdobné, jako je tomu u klasických formulářů.

Vkládání přes schránku (clipboard)

Pro mnoho uživatelů je, a pravděpodobně i v budoucnu stále bude nejpohodlnější připravovat obsah v důvěrně známém prostředí ověřených programů (nejčastěji v textovém či tabulkovém editoru) a následně jej překopírovat do redakčního systému (resp. do CMS). Tento přenos dat obvykle probíhá prostřednictvím schránky (clipboardu).

Jedná–li se nám pouze o zobrazení vkládaných dat, bude nám tento způsobe patrně vyhovovat. Složitější situace nastává, pokud bychom chtěli data do systému vložit strukturovaně, aby je bylo možné následně využít. Za tímto účelem je nutné vytvořit zvláštní importní filtr, který v okamžiku vkládání přes schránku do CMS provede s daty předem definované operace. To se může hodit např. v případě vkládání tabulek z Excelu tak, aby data z jednotlivých buněk skončila v příslušných „kolonkách“ CMS.

Import připravených formátů

V případě většího objemu dat může být výhodnější přesunout zpracování dat z klientského počítače na server. To ovšem vyžaduje přípravu dat v konkrétním závazném formátu (nejčastěji CSV – Comma Separated Value, hodnoty oddělené čárkami) a jejich umístění na server pomocí formuláře. Pokud se jedná o CSV, konverzi dokáže jednoduše provést i Excel, případně obdobný program. U jiných formátů je nutné optimálně vyřešit postup přípravy dat tak, aby byl jednoduchý a spolehlivý.

Výměna dat přes XML

S použitím stále oblíbenějšího formátu XML se posouváme v možnostech importu dat ještě dále. V porovnání s CSV můžeme v XML dokumentu zachytit velké množství doplňujících informací. Je například možné popsat a naimportovat celou databázi, což by s CSV bylo velmi obtížné, ne-li nemožné.

Další výhoda XML spočívá v jeho rostoucí rozšířenosti a možnosti spolupráce se zdroji dat třetích stran. Představte si například situaci, kdy bude možné vyměňovat si data ve formátu XML mezi Vaší webovou aplikací (např. elektronickým obchodem) a skladovým systémem dodavatelů. Úspora času a peněz může být s rostoucím počtem transakcí značná.

Přímé napojení na CMS (datová pumpa)

Na závěr zmíním plně automatickou variantu, která je vhodná pouze ve specifických případech. Jedná se o přímé napojení (jedno- či obousměrné) na databázi prezentace. Toto řešení vyžaduje umístění speciální aplikace u klienta, která dle naprogramovaných pravidel provádí aktualizace obsahu. Například aktualizace stavu skladů u internetového obchodu podle stavu v účetním programu je ideálním kandidátem pro využití datové pumpy.

Závěr

Při výběru vhodného CMS je nutné zvážit především praktické hledisko. Soustřeďte se především na to, zda daný produkt splňuje Vaše představy ohledně předpokládaného množství zpracovávaných dat a uživatelského komfortu. Je třeba si uvědomit, že CMS slouží především k redukci času a nákladů, které jsou spojeny s opakujícími se činnostmi. Vyšší investice v počátcích proto může v budoucnu přinést několikanásobně vyšší úspory při správě Vašeho webu.

Článek přebrán s laskavým svolením ze stránek Symbio.cz.

Pro většinu z vás není asi novinkou, že obsah vaší internetové prezentace můžete měnit vlastními silami, aniž byste k tomu museli umět takové prezentace vytvářet. Slouží k tomu nástroje, kterým se souhrnně říká systémy pro správu obsahu, či nepřesně ve zúženém významu redakční systémy. Je pravděpodobné, že podobnou aplikaci používáte na svých stránkách také. Jedná se však o plnohodnotný a efektivní nástroj? Podívejme se, co všechno můžete od kvalitního systému pro správu obsahu
očekávat.

Máte-li rozsáhlejší prezentaci, jistě víte jak je náročná její údržba. Nemusím připomínat, že pro návštěvníka stránek je velice důležité aby obsah prezentace byl aktuální, zajímavý a přesný. Web se zastaralým nebo dokonce chybným
obsahem je pak nejen zbytečný, ale vyvolává i dosti negativní obraz o dané firmě. Často se lze setkat se starými telefonními čísly, špatnými kontakty nebo neplatnými ceníky. Příčiny mohou být různé:

• nezájem o webovou prezentaci
• podceňování významu webové prezentace
• komplikovanost nebo náročnost správy webu
• velký počet stránek, které webmaster nestíhá spravovat

První dva případy není třeba komentovat. Ve druhých dvou by bylo vhodné situaci zhodnotit a zvážit koupi některého z nástrojů, který by správu webu usnadnil. Jak už jsme si řekli, nemusí být v současnosti publikování informací na webu zdlouhavý proces, který si vyžaduje znalost HTML. K dispozici jsou aplikace, které dokáží převést dokumenty do HTML za vás. Jejich publikování na webu pak zachovává jednotný vzhled stránek. Autor se tak může plně soustředit na obsah bez toho, aby musel něco vědět o tvorbě WWW stránek.

Co je CMS?

CMS je zkratka anglického výrazu Content Management System, neboli systém pro správu obsahu. Dnes se běžně užívá také zkratka WCM z anglického Web Content Management a značí tu část CMS, která přímo souvisí s publikováním na webu. CMS slouží totiž kromě zveřejňování informací na internetu i ke správě firemních dat, např. e-mailových adres klientů. S
takovým nástrojem je potom hračka rozeslat všem klientům e-mail oznamující nový výrobek, slevu či jinou akci. Jediná správná definice CMS vlastně neexistuje a rovněž nároky uživatelů jsou značně odlišné. Některým stačí možnost vkládat na web pouze novinky, jiní očekávají i správu firemních dokumentů, multimédií nebo dokonce softwaru. Neexistuje ani žádný standardní systém, který by splňoval všechny požadavky. V tomto článku se budeme věnovat hlavně možnosti publikování
na webu a správě firemních webů, tzn. oblasti středně rozsáhlých WCM či CMS.

Jak funguje CMS (WCM)?

Nejdůležitejší věc, kterou
přinesly aplikace CMS pro publikování na webu, je oddělení grafické úpravy a obsahu. Obsah stránek je uložen v databázi, kdežto grafická úprava a struktura stránek jsou uloženy zvlášť v šablonách. Šablony jsou vzorové HTML dokumenty, do kterých se vkládá na předem označená místa obsah z databáze.

Drtivá většina CMS se skládá z částí,
tzv. modulů. Po přihlášení do CMS si vyberete modul, prostřednictvím kterého vložíte váš článek nebo informaci (např. modul volná místa, modul novinky atd.). Samotný článek přitom může být vytvořen mimo CMS nebo v editoru, který bývá součástí CMS. Obsah článku se po uložení (publikaci) naplní do šablon a zobrazí návštěvníkům stránek. Výhodou šablon není jen to, že zaručují stejný vzhled všech stránek, ale
významně také zjednodušují údržbu webu. Když je třeba provést úpravu na všech stránkách, např. výměna loga, stačí ji provést v jedné šabloně namísto úpravy všech stránek. Některé CMS umožňují zobrazovat stejný obsah přes různé šablony a tak ho publikovat v různých formátech. Lze tak provozovat kromě standardní HTML verze i verze pro přenosná zařízení či exportovat data do XML pro další zpracování.

Jak Vám může CMS pomoci?

Hlavní benefity nasazení kvalitního CMS lze vymezit na základě nejčastějších problémů při správě a aktualizaci WWW stránek:

• obsah webu je neaktuální/nepřesný,
• nekonzistentní design nebo navigace stránek,
• nemáte vlastního správce webu, ale přesto chcete vlastními silami komunikovat jeho prostřednictvím se zákazníky a partnery,
• máte vlastního webmastera ale ten je přetížen požadavky na aktualizaci stránek,
• lidé mají problém najít na stránkách požadované informace,
• autoři nebo přispěvovatelé webu občas náhodně přepíší obsah nebo soubory,
• autoři si nemohou připravit obsah dopředu aby se zobrazil v zadaném čase,
• nedá se zabezpečit přístup k obsahu podle uživatelských práv,
• marketingoví a produktoví manažeři nemohou přizpůsobit obsah pro klienty a partnery,
• pracovníci ve firmě se nepodílejí na publikování obsahu webu.

CMS
jako takový ovšem nepředstavuje řešení obsahu webu. Nedokáže sám o sobě zaručit, že jsou údaje na stránkách aktuální. Na to je třeba systematická práce pracovníků. CMS je však nástroj, který tuto práci značně ulehčí a zrychlí.

Požadavky na CMS

Před
rozhodnutím jaký CMS je vhodné nasadit na Váš web je podstatné si ujasnit, co chcete a co můžete od systému očekávat. Následující vlastnosti tvoří základ, který by měl CMS systém nabízet:

• Decentralizovaná správa obsahu musí umožnit více pracovníkům aktualizovat web. Plnění webu nebude záležitostí jednoho člověka, ale budou ho plnit přímo pracovníci firmy.
• Publikování bez znalosti HTML
  – i pracovníci bez zvláštních počítačových znalostí by měli být schopni
  publikovat. Znalost HTML by při práci s CMS neměla být nutná. Součásti
  CMS je většinou i jednoduchý HTML editor, který umožňuje snadné
  editování textů podobně jako v bežném textovém editoru.
• Přístupová práva a autentifikace rozdělí správu webu mezi více uživatelů. Někdo může mít práva jen na přidávání článků, někdo může měnit celý web.
• Přístup přes webový prohlížeč
  zaručí, že půjde stránky spravovat odkudkoliv, kde je připojení k
  internetu. Nemusí se instalovat žádné speciální aplikace. Funkcionalita
  občas může záviset na typu a verzi prohlížeče.
• Proces publikování
  je u zpravodajských serverů velice důležitý. Články by měli projít
  redakčním cyklem, tj. autor napíše článek, redaktor ho zkontroluje a
  upraví a šéfredaktor rozhodne o jeho uveřejnění.
• Možnost náhledu je pomůckou pro uživatele, aby si mohl ověřit, jak bude článek vypadat na webu.
• Indexování a vyhledávání je nevyhnutelná součást systému pro správu velkých webů. Kvalitní vyhledávání je důležité především pro návštěvníky stránek.
• Personalizace
  umožňuje individuální zobrazení webu pro různé návštěvníky. Také se
  využívá při komunikaci s klienty, např. pro dosazení oslovení v
  hromadných e-mailových zprávách.
• Export do jiných formátů
  umožňuje dostat obsah ze systému a zpracovávat jej v jiných (např. MS
  Excel apod.). U větších či moderních webů by měl systém podporovat
  možnost publikace pro systémy WAP, a PDA. Samozřejmostí je export dat
  do formátu XML.
• Propojení s e-commerce systémy bývá obvyklé u profesionálních CMS. Systém by měl být otevřený a umožnit spolupráci s jinými aplikacemi.
• Uchovávání verzí obsahu je možností jak se vrátit k předchozím verzím obsahu.

Naprogramovat, koupit nebo pronajmout?

Otázka naprogramování, nákupu či pronajatí CMS patří k těm nejtěžším v IT oddělení. Všechny možnosti mají své výhody a nevýhody.

Naprogramovat

Výhoda
vlastního systému je, že bude fungovat přesně podle vašich představ.
Jeho podoba není omezená jako u kupovaného produktu. Vyvinout vlastní
CMS je však složitý a dlouhodobý úkol. Samotnou přípravou a
naprogramováním celý proces pouze začíná. Problémy se obvykle ukáží až
časem a jakákoliv změna si vyžádá další vývoj. Proto je třeba ihned
počítat s vývojem dalších verzí a nelehkými opravami chyb. Vlastní CMS
bývá ideální zejména pro menší a střední prezentace.

Koupit

Výhody
kupovaného (někdy se uvádí pojem „krabicového“) řešení jsou zřejmé.
Zákazník získává vyzkoušený a otestovaný produkt, u něhož lze očekávat
minimální výskyt chyb. Řešení je k dispozici ihned a není třeba na něj
čekat. Hlavní nevýhodou je komplikované přizpůsobení specifickým
požadavkům. Tyto případy si obvykle vyžádají další vývoj a také čas.
Nevýhodou u větších CMS je také cena a v některých případech náročnější
obsluha. Koupit osvědčený systém se zpravidla vyplatí pro velké weby.

Pronajmout

Pronajmutí
systému pro správu webu je v podstatě služba typu ASP (Application
Service Providing). Jedná se o případ, kdy pronajímatel provozuje
aplikaci na svém serveru a většinou balík služeb zahrnuje také
webhosting, zálohování, hotline apod. Náklady na pronájem jsou menší
než na koupi, instalaci a implementaci kupovaného produktu nebo vývoj
vlastního. Ne všechny weby se však hodí na správu na pronajatých
systémech. ASP řešení se například nevyplatí na správu extranetu, kde
je většina obsahu generována z firemního systému.

Kombinace naprogramování a koupě

Kromě
výše uvedených variant existují také systémy, které spojují výhody
individuálně naprogramovaných a nakupovaných aplikací. Jejich podstata
tkví v předpřipravených komponentách, jejichž provedení umožňuje velice
rychlé a relativně levné přizpůsobení potřebám klienta. Mezi takové CMS
se řadí např. OrangeGate od SYMBIA.

Rady pro výběr

Požadavky
na CMS jsou pro každého různé. Systém by vždy měl dodržovat dříve
zmíněné základní vlastnosti. Při hledání vhodného CMS je třeba
respektovat specifické požadavky firmy. nenaleznete-li vhodný CMS
můžete se pustit do vývoje vlastního nebo vyzkoušet kombinované řešení.
Pokud hledáte již hotový produkt, pak je třeba věnovat pozronost
následujícím charakteristikám:

• operační systém (Windows, Linux, …),
• typy uživatelů (administrátor, autor, …),
• čas implementace,
• integrace s jinými produkty,
• specifické moduly,
• licence a ceník.

V
podstatě se jedná o tentýž postup, jako u jiného softwarového produktu.
Tzn. nezapomeňte se podívat po referencích, partnerech, kontaktech na
zákazníky, manuál apod. Důležité je pořádně si přečíst licenci a
zjistit, zda je v ceně i školení a technická podpora. Někdy při výběru
rozhoduje i lepší uživatelské rozhraní.

Závěr

Oblast CMS
se neustále vyvíjí a proto nelze předpovědět, jak budou v budoucnu
systémy vypadat. V současnosti se CMS soustředí spíše na práci s
obsahem webu. Publikace je pak záležitostí samostatné aplikace. Jasný
trend lze také pozorovat v používaní formátu XML, z něhož lze dále
generovat nespočetně dalších formátů (HTML, PDF, PostScript, …).

Přeji vám při výběru vhodného CMS hodně štěstí a hlavně co nejméně problémů.

Od dob Aristotela víme, že věci kolem nás se skládají z látky a formy. Forma látku
konkretizuje, dává jí tvar a pomáhá nám tak věci nahlédnout. Pak už je jen na nás a
našich schopnostech, jak celou věc vnímáme. Minule jsme se zabývali dílčí částí formy –
barvou. Nyní se podíváme na neméně důležitý TVAR, který ve spolupráci s barvou umocňuje
působení objektu.

Grafika na internetu je ochuzena o reálný trojrozměrný prostor. Ve skutečném světě můžeme tvary ohmatat, prohlédnout z více stran a mít tak ucelený zážitek. Přesto i na webu můžeme při tvorbě grafiky využít některých obecných principů pro působení tvarů. Pokud dokáže grafik vhodně zkombinovat tvarové proporce a barevnost webu s ohledem na cílovou skupinu, má jeho práce větší šanci na úspěch.

K dispozici máme poměrně velké množství různých tvarů:

• Geometrické tvary jsou (na rozdíl od negeometrických – organických) názornými a logickými abstrakcemi, které nám v podstatě usnadňují vnímání.
• Otevřené tvary (např. půlkruh) mají tendenci být v těsnější interakci s okolím a jakoby naznačují neukončenost.
• Uzavřené tvary jsou vnímány jako více soběstačné, izolované, relativně dokonalé, s ukončeným děním.
• Aktivní tvary směřují do výše, jsou napodobením pohybu nebo pohyb evokují.
• Pasivní tvary se rozvíjejí do šíře, vykazují stabilitu a nehybnost.
• Statické a dynamické tvary mohou vyvolávat dojem síly a energie. Pasivita a statičnost je nejčastěji výrazem lineárního pojetí, zatímco aktivita a dynamika jsou vlastní tvarům vycházejícím z křivek. Dynamismus tvarů se zvyšuje nepravidelností, nevyvážeností a rytmizováním.
• Tvrdost a měkkost tvarů vychází z charakteru jeho kontur, které mohou být ostré, lomené nebo měkce zakřivené, oblé. K mužským prvkům jsou přiřazovány linie ostré, lomené. Naopak k ženským prvkům patří linie měkké, zaoblené, kulaté, nezraňující. Tvary vyvážené, pravidelné a symetrické působí pasivně a staticky.
• Naopak tvarová nevyváženost, asymetrie a nepravidelnost jsou zdrojem pohybu a dynamiky.

Při pohledu na většinu webových stránek zjistíme, jaké jsou ty nejčastěji používané tvary.

Čtverec, obdélník, mírně zkosený rovnoběžník a lichoběžník

Publikováno 12. 8. 2004

Uživatelé na webu nečtou!

Návrh internetovej stránky je väčšinou najzložitejšou fázou tvorby webu.
Dôvodov na to je naozaj mnoho, tími najznámejšími sú asi výber cieľovej
skupiny, návrh štruktúry stránky, grafický návrh, návrh XHTML šablóny či návrh
serverovej implementácie. Zabezpečiť však aby bol návrh naozaj dobrý nieje vôbec
ľahké. Vyžaduje to väčšinou veľa kompromisov a času. Najväčším skokom vpred
bude zmena pohľadu na stránky ako také. Týmto novým pohľadom bude paradigma účelového
návrhu.

Filozofia, výhody a nevýhody čisto účelového návrhu
stránok.

Filozofia paradigmy

Základná myšlienka paradigmy sa dá zhrnúť do jednej krátkej vety:

Všetko musí plniť účel.

V praxi to asi znamená asi toľko, že každý kus textu, kódu či grafiky musí
plniť určitú funkciu. Všetko ostatné by bolo pre používateľa mätúce a preto
zbytočné.

Predstavme si však, že dáme na osobnú stránku krásne interaktívne hodiny.
Účel majú jasný: informovať návštevníka o čase. Problém tu však nastáva s účelom
celej stránky. Účelom osobnej stránky totiž nieje informovať návštevníka o čase,
ale väčšinou poskytnúť informácie o živote a súkromí vlastníka stránky. Hodiny
teda na takejto stránke síce plnia svoj účel (zobrazovanie aktuálneho času), ale
neplnia účel stránky (informovať o vlastníkovi) a preto sú mätúce a
zbytočné.

To čo je naozaj dôležité je teda účel stránky a nie účel daného prvku. Naučiť
sa v tomto rozpoznať rozdiel je pre čisto účelový návrh nevyhnutné. Ak potom
vieme aký účel má mať stránka, tak všetko ostatné už bude len logickým dôsledkom
snahy naplniť tento účel čo najlepšie.

Výhody

Takýto účelový návrh šetrí čas Vám (tvorcovi stránky), návštevníkom a
prípadne aj zakázníkom. Toto platí pre fázu implementácie ako aj reálnej
prevádzky.

Pri implementácii sa celé Vaše snaženie totiž koncentruje na prvky, ktoré sú
pre plnenie daného účelu stránky potrebné. Nemusíte sa tak zaoberať vecami,
ktoré by pri zavedení do prevádzky nikto nevyužil alebo by návštevníkov len
zbytočne miatli (viď prípad s interaktívnymi hodinkami).

V reálnom nasadení sa zase návštevníci koncentrujú na to čo chcete Vy a
nestrácajú tak zbytočne čas nad prvkami, ktoré neplnia účel stránky. Takéto
prvky totiž pre Vás nemajú žiadny význam.

Nevýhody

Takýto prístup k návrhu stránky však môže byť pre začínajúcich alebo
neskúsených webdizajnérov značne kontraproduktívny. Existujú totiž skryté a v
istých prípadoch veľmi dôležité „účely“, ktoré nemusia poznať. Takto niektoré
prvky na stránke nepoužijú len preto, lebo nevidia ich logickú súvislosť s
hlavným účelom stránky. Takého skryté účely, môžu byť napríklad použitelnosť,
prístupnosť stránky, optimalizácia pre vyhľadávače či atraktivita pre cieľovú
skupinu.

V tomto článku nájdete ukážky sémanticky správnych XHTML konštrukcii, ktoré sa bežne využívajú v kóderskej praxi – logická štruktúra dokumentu, nadpisy, odstavce, zoznamy a citácie.

Všetky konštrukcie sú zapísané v XHTML
1.0 Strict, čo je v súčastnosti asi najčastejšie používaný štandard medzi
kódermi, ktorí sémantike venujú nejakú pozornosť.

Logická štruktúra dokumentu a nadpisy

Každému sa bude zdať samozrejmé keď otvorí knihu o webdesigne, že v nej nájde
informácie o webdesigne. Je taktiež samozrejmé, že keď si nalistuje kapitolu o
použiteľnosti tak sa tam bude písať o použiteľnosti. Prečo to píšem? No predsa
každá internetová stránka s vypnutými štýlmi, JavaScriptom, … je v podstate
kniha a preto pre ňu musí platiť to isté.

Pod každým nadpisom teda musia byť informácie, ktoré sa ho týkajú. Toto však
platí pre celý strom nadpisov ako aj strom dokumentu, na čo naozaj veľa kóderov
zabúda. Ukážme si teda ako by mal taký správny strom nadpisov vyzerať.

Nadpis serveru
 +- Webdesign: Základné pojmy
 |  +- SEO — Optimalizácia pre vyhľadávače

 |  +- CSS — Kaskádové štýly
 |  +- XHTML
 |  +- Validita — Syntaktická správnosť
 |  +- Sémantika — Významová správnosť

 |  +- Prístupnosť — Accessibility
 |
 +- Staršie zápisy
 +- Novšie zápisy

Jediné čo ostáva je zadefinovať tieto nadpisy tak aby spĺňali zadefinovanú
štruktúru. Slúžia nám na to elementy <h1> až
<h6> pričom <h1> je v strome nadpisov
najvyššie a žiadnu úroveň nesmieme preskočiť. Vždy teda začíname s

<h1> a postupne sa dostávame k nižším úrovniam.

Výsledný kód bude vyzerať takto:

<h1>johno#blog</h1>
<h2>Webdesign: Základné pojmy</h2>
<h3>SEO — Optimalizácia pre vyhľadávače</h3>

<h3>CSS — Kaskádové štýly</h3>
<h3>XHTML</h3>
<h3>Validita — Syntaktická správnosť</h3>
<h3>Sémantika — Významová správnosť</h3>

<h3>Prístupnosť — Accessibility</h3>
<h2>Staršie zápisy</h2>
<h2>Novšie zápisy</h2>

Odstavce

Aj keď to možno znie neuveriteľne, tak práve tu sa robia najväčšie chyby.
Veľa kóderov používa na nové odstavce dvojnásobné zariadkovanie elementom
<br />. Aj keď výsledok môže vyzerať rovnako sémantika
odstavca sa vytráca.

Na definovanie odstavca nám slúži párový element <p>. Pozrite sa na
teda túto jednoduchú ukážku správneho použitia odstavcov. Aby ste aj tu
nezabudli na dôležitosť logickej štruktúry dokumentu pripojil som k ukážke
nadpis.

<h3>Prístupnosť — Accessibility</h3>
<p>Každá stránka alebo aspoň jej obsah…</p>

<p>Menej prístupné stránky strácajú…</p>

Nezabúdajte na to, že samostatné odstavce by mali obsahovať ucelenú myšlienku
a nielen slúžiť na prevzdušnenie dlhého textu.

Usporiadané a neusporiadané (odrážkové) zoznamy

Zo zoznamami si väčšina začínajúcich kóderov komplikuje život. Snažia sa
napodobniť odrážky rôznymi znakmi a mnohonásobnými medzerami, no pritom je to
úplne jednoduché.

Pokiaľ máme nejaký zoznam, v ktorom rozhoduje poradie položiek použijeme
element <ol> definujúci usporiadaný zoznam. Typickým
príkladom môže byť nejaký návod alebo obsah knihy.

<ol>
 <li>Do hrnčeka dáme vodu a jedno vajce.</li>
 <li>Po zovretí vody varíme 7 minút.</li>
 <li>Podávame s osoleným chlebom.</li>
</ol>

Naopak keď na poradí položiek nezáleží je ideálne použiť element
<ul> pre odrážkový zoznam. Príkladom neusporiadaného zoznamu
môže byť napríklad zoznam vecí, ktoré treba nakúpiť alebo aj menu rozsiahlejšej
internetovej stránky.

<ul>
 <li>hrnček</li>
 <li>vajce</li>
 <li>chlieb</li>

 <li>soľ</li>
</ul>

Citácie

Citovanie rôznych zdrojov sa na internete rozmohlo hlavne na blogoch ale
najbežnejšie s ním stretávame v novinách. Pri citáciach však treba rozlišovať
citácie na dva druhy. Blokové a riadkové.

Na dlhé citácie je ideálne použiť párový element <blockquote>, ktorý
môže obsahovať aj celé časti iných stránok. Napríklad:

<blockquote>

 <p>Môj počítač je:</p>
 <ul>
  <li>600MHz procesor</li>
  <li>256MB RAM</li>
 </ul>
</blockquote>

Naopak na krátke citácie sa využíva element <q>.

<p>Platí tu výrok <q>Sýty hladnému neverí.</q></p>

Oba elementy obsahujú nepovinný atribút cite, ktorý má obsahovať
odkaz na citovanú stránku. Tento atribút sa však skoro vôbec nevyužíva pretože v
momentálnych prehliadačoch je bez klientského skriptovania pre bežného užívateľa
takmer nepoužiteľný.

Podrobnejšie informácie

Pokiaľ Vás zaujíma sémantika nespomínaných elementov či atribútov odporúčam
Vám prebehnúť si DTD XHTML
1.0 Strict. Sú tam popísané významy naozaj všetkých tagov a ich
atribútov.

Co by měl obsahovat takový ideální publikační systém? Univerzální redakční systém pro všechny typy on-line médií, využitelný pro klub mladých liberálů, Základní školu Dolní Lhota, Akademii Věd, město Prahu, obec u břehu Berounky, firmu Mountfield, osobní stránky Britney Spears, internetový obchod Vltava i pro webzine typu Lupa.cz a weblog Honzy Jedlíka?

Mít takový univerzální publikační systém, jsem už buď milionář a nebo totální hlupák. Opravdu si nemyslím, že by něco tak jedinečného mohlo existovat. Přesto v tomto článku zkusím vymezit nejdůležitější vlastnosti a funkce, které by výborný systém pro správu obsahu měl mít. Tím „správu obsahu“ jsem vyřadil několik typů webů, které náš systém prostě využít nemohou. Publikační systém zaměřím „pouze“ na webziny, weblogy, firemní stránky, weby organizací, měst, obcí a škol.

Jádro systému

Naše spektrum přesto zůstalo dosti široké. Proto bude nejdůležitější kvalitní jádro. Tím jádrem nemůže být „vybrání nejaktuálnějších článků z databáze a jejich následné vypsání“. Musíme vymyslet něco univerzálního. Musíme dát uživateli možnost jednoduchého a přitom kompletního a komplexního nastavení systému. Ten už si poté zvolí, zda-li na hlavní stránce chce nechat vypsat 20 nejaktuálnějších článků nebo spotů, zda-li chce jenom představení o firmě nebo přehled obsahu celého webu. A stejným způsobem nastavení dalších stránek webu – článků, kategorií a podkategorií, možnost přidávání jednoduchých statických stránek, download sekcí, fotogalerií, speciální databáze…

Tím je jasné, že takový systém bude muset v sobě obsahovat několik typů aplikací, které byly do této doby distribuovány samostatně. Velikost naprogramovaných dat se značně rozšíří, ale co je dnes 10 – 20 MB prostoru, když i ty základní hostingové programy nabízí prostor megabajtů v řádů stovek. Chci jen poukázat na to, že na velikosti nezáleží. Na čem jedině záleží je rychlost. Ať systém umožňuje klidně spustit jedním tlačítkem internetový obchod, který zabírá 5MB dat, ale pokud já obchodovat nechci, tak ať mi tyto data nezpomalují činnost zbytku webu.

Nesmí nás rozhodit, že firma z Dolní Horní bude chtít na svém webu provozovat funkci X a firmě z Horní Dolní bude funkce Y nevyhovovat v některých detailech. Naše propracované jádro umožní přidat specifickou funkci X a přidáním dalšího objektu pozměnit funkci Y. Musíme umět vyhovět požadavkům na dynamické části webu i generované statické soubory.

Tím se dostáváme k prioritám:

1. Rychlé jádro systému
2. Propracovaná administrace, možnost detailního nastavení
3. Jednoduché přidávání plug-inů, rozšířování

Tři nejhlavnější body celého projektu.

Rozdělení práce v týmu

Jelikož náš redakční systém bude určen jak pro tzv. one-man show, tak i pro rozsáhlé zpravodajské týmy, musíme nabídnout možnost práce na projektu lidem zároveň. S tím nezbytně souvisí oddělení obsahu od vzhledu. Z toho vyplývá šablonovací systém. Nechme grafiky a html kodéry v jedné místnosti, redakční tým ve druhé. Je opravdu nezbytné, a ani si nedokážu představit jinou možnost, než aby byl vzhled upravován pomocí šablon.

Redakční část musí obsahovat několikastupňové práva uživatelů. Nejlepším řešením je právo administrátora, jenž může přidávat další editory a každému z nich umožnit jiné role. Ať už podle přidávání článků do různých sekcí nebo možnost schvalování a upravování článků. Jistě si dokážete představit spoustu rolí, které bude možno redaktorům přiřazovat.

Rozsáhlé týmy budou vyžadovat nějakou formu komunikace mezi sebou. K tomu může sloužit interní weblog, fórum nebo emailová diskuse.

Důležitým zádrhelem, který je nutno dořešit, je způsob publikování článků. Formulářová textarea nenabízí dostatečný komfort. Musíme také předpokládat, že redaktoři nebudou zvládat pravidla jazyka HTML, proto musí být pro ně připravena nějaká forma WYSIWYG editoru nebo speciálního zjednodušeného značkovacího jazyka.

Podrobnější funkcionalita

Nejširší otázkou zůstává vlastní funkcionalita systému. Co by ale v žádném případě nemělo chybět? Jazykové rozhraní, reklamní systém, kešování dynamických stránek, propracované fulltextové vyhledávání, zobrazování souvisejících, posledních článků, možnost zakládání diskusí a komentářů pod články, rozesílání newsletterů, automatické generování rejstříků, editace anket a průzkumů, webové statistiky, archivace obsahu…

Určitě vás napadne miliony dalších možností, jak webový projekt rozšířit a obohatit. Za provozu každého webu se začnou objevovat potřeby, na které by na začátku nikdo nepomyslel, přesto jsou nyní nezbytné. Tato část bude zdaleka největší a nejrozšířenější a naprogramování všech „fičůrek“ zabere určitě nejvíce času. Funkce a vlastnosti také budou vyžadovány specifické pro každý projekt. Proto je především důležité, jak jsme se již na začátku zmínili, jednoduché začleňování nových funkcí do jádra systému.

Webové rozhraní

Jak jste si určitě všimli, nezabýval jsem se platformou, technickým zázemím, programovacím jazykem ani databázemi. Jediné co bych po systému požadoval, je webové rozhraní. Možnost připojit se do redakční části z domova i z práce, z kavárny i ze zahraničí.

Závěr a pokračování

Dnes jsem vám chtěl nastínit nejdůležitější vlastnost publikačního systému – samotné jádro. Od příště opustíme suchou teorii a postupně si budeme představovat některé redakční systémy, které jsou volně k dispozici. Podíváme se na jejich specifické vlastnosti, funkce, výhody a nevýhody.

Poznámky, fakty a riešenia problémov prístupnosti internetových stránok, ktoré vznikli na základe stretnutia a testovania stránok s nevidiacim človekom.
Môj starší článok o zásadách prístupných stránok je založený na teoretických znalostiach, testovaní v textových prehliadačoch a (dúfam) zdravom rozume. Nedávno som však mal tú česť otestovať a skonzultovať si tieto pravidlá ako aj konkrétne riešenia s niekým koho sa to týka asi najviac — s nevidiacim človekom.

Musím povedať, že mnohé veci sú v dokumentoch ako

<p class=“non-visual“>
<a href=“#content“ accesskey=“1″>skočiť na obsah</a>
<a href=“#menu“>skočiť na menu</a>
</p>

Tu však músim poznamenať, že často používaná metóda na schovávanie týchto navigačných odkazov pomocou display: none; je pre čítačku JAWS nevhodná. Ideálne sa preto zdá použitie kombinácie pravidiel:

.non-visual {
position: absolute;
width: 100px;
left: -200px;
}

Takto zadefinované elementy budú pre bežné prehliadače neviditeľné ale čítačky ich bez problémov prečítajú.

Navigačné menu

Navigačné menu by malo byť tvorené výhradne odrážkovými zoznamami <ul> aby nevidiaci získali zrozumiteľný obraz o hierarchickom rozdelení stránky.

<ul id=“menu“>
<li><a href=“…“>Produkty</a>
<ul id=“menu-1″>

<li><a href=“…“>CMS</li>
<li><a href=“…“>DMS</li>
</ul>

</li>
<li><a href=“…“>Služby</a>
<ul id=“menu-2″>
<li><a href=“…“>Webaplikácie</a></li>

<li><a href=“…“>Webhosting</a></li>
</ul>
</li>
</ul>

Pokiaľ ide o JavaScriptom ovládané vysúvacie menu je dobré aby boli položky na prvej úrovni taktiež odkazmi. Vysúvacie menu je totiž pre nevidiacich mätúce a tak skôr volia cestu cez hlavné položky v menu.

V takomto prípade sa zdá byť dokonca rozumné pre nevidiacich úplne schovať ostané úrovne menu a poskytnúť im namiesto toho pri načítaní stránky odkaz na práve rozbalenú položku. Teda nadväzujúc na ukážku kódu vyššie je napríklad vhodné na začiatok stránky so službami dať odkaz na práve rozbalenú položku menu.

<a href=“#menu-2″>skočiť na rozbalenú položku Služby</a>

Otvárenie nových okien prehliadača

Otvorenie nového okna prehliadača dokáže zmiasť nejedného priemerného používateľa. Nevidiaci to majú ešte tažšie. Čítačka JAWS síce ohlási otvorenie nového okna ale nevidiaci tak stráca do istej miery prehľad o tom čo sa deje. Nevidiaci totiž málokedy používajú viacero okien prehliadača súčastne. Ak ide napríklad o reklamné okno je vhodné aby bolo hneď z titulku stránky jasné, že ide o reklamu.

Sémantika

Nevidiaci prehliadajú stránku skákaním kurzoru po nadpisoch, odstavcoch a linkách. Preto je dôležité aby sme nadpisy a odstavce používali tam kde naozaj majú tento význam. Napríklad použitie tagu <h3> len kvôli veľkosti fontu je neprípustné. A ak navyše z kontextu nie je zrejmé, že nejde o nadpis tak nevidiaci ľudia strácajú orientáciu. To isté platí aj pre ostatné tagy.

Formuláre

Pri formulárových elementoch je pre správnu orientáciu nutné naučiť sa správne používať tag <label>. Sú dve možné použitia:

<label for=“name“>Meno</label> <input type=“text“ id=“name“>

<label>Meno <input type=“text“ id=“name“></label>

Čítačka JAWS takto zviaže konkrétny text s daným formulárovým elementom. Obsah elementu label sa potom prečíta až keď je nevidiaci kurzorom na formulárovom elemente.

Autor píše svůj web johno#blog

Štyri základné pravidlá, ktorých sa treba držať pri tvorbe prístupných stránok.Prístupnosť stránok (accessibility) je snaha umožniť ľudom či vyhľadávacím robotom prehliadať obsah stránky bez ohľadu na to aký prehliadač, operačný systém či platformu používajú. Aby však stránka bola prístupná treba dodržať prinajmenšom zopár základných pravidiel.

Syntakticky správny kód

V opačnom prípade bude každý prehliadač nútený improvizovať a výsledný efekt pravdepodobne nebude spĺňať očakávania. To, že jeden prehliadač zobrazí chybne zapísaný kód správne neznamená, že tak spravia aj všetky ostatné prehliadače. Treba si uvedomiť, že funkciou prehliadača nieje chybný kód opravovať, ale kód a teda obsah užívateľovi sprostredkovávať.

Odmenou za syntakticky správny kód je záruka kompatibility v súčastných a budúcich prehliadačoch ako aj rýchlejšie spracovanie stránky čo určite ocení každý užívateľ či návštevník.

Správná sémantika

Používajte tagy a atribúty sémanticky správne. Jedine tak môžete zaručiť správnosť sprostredkovania obsahu uživateľovi aj v alternatívnych zariadeniach ako sú textové prehliadače, PDA, mobily, čítačky, …

Používajte tagy podľa toho, na čo sú určené a nie podľa toho, ako vyzerajú. Napríklad tagy ako <em> či <strong> neslúžia — ako sa niektorí ľudia stále domnievajú — na určenie kurzívy či tučného textu. Tým pravým a sémantickým účelom týchto tagov je vyjadrenie dôrazu.

Logická štruktúra dokumentu

Dokument bez logickej štruktúry je ako kniha, v ktorej sme pomiešali strany. Takýto dokument sa pre užívateľov stáva takmer nepoužiteľný a jeho informačná hodnota rapídne klesne.

Stránky s dlhším obsahom by mali obsahovať rýchlu navigáciu pomocou vnútorných odkazov poprípade aj klávesové skratky pomocou atribútu accesskey. Umožníte tak užívateľom nevizuálnych a textových prehliadačov ľahšie prehliadať stránky.

Neočakávajte nič

Nespoliehajte sa na to aké rozlíšenie, prehliadač či pluginy používa väčšina ľudí.

Zabudnite na čisto javascriptové, javové, flashové odkazy a presmerovania. Používajte odkazy <a href=“…“>. Jedine tie určite pozná každý prehliadač a vie ich použiť. Preto by — aspoň ako alternatíva — nemali nikdy chýbať.

Veľa ľudí má pomalé linky a tak prehliadajú stránky bez obrázkov. Preto nezabudnite pridať každému obrázku správny alt atribút. Tých zopár znakov kódu naviac užívatelia určite ocenia.

Jaký je důvod toho, že spousta tvůrců webu považuje Javascript za
prasárnu? Tak takto nějak položil otázku do emailové konference WebSites@pandora.cz pan Pavel Juška. Je opravdu JavaScript prasárna? V jaké míře ho máme používat? Má vůbec cenu myslet na nějaké „zaostalce“, co si neumí ani nainstalovat novější prohlížeč?

S JavaScriptem je to jako s ohněm: Dobrý sluha, zlý pán.

JavaScript by měl být v každém případě používán pouze jako doplněk, bez kterého stránka neztrácí na funkčnosti a použitelnosti. Vhodným příkladem mohou být formuláře, kde se uživatel ještě před odesláním dozví, co zapomněl vyplnit. V takovém případě však nesmí chybět kontrola na straně serveru, která už musí být funkční stoprocentně a bez výjimky. Nápovědy zobrazené po najetí myši (nesmí chybět verze nápovědy bez použití JavaScriptu), vysouvací menu (opět musí být použitelné i bez JavaScriptu) nebo formátování textu pomocí on-line wysiwig editorů. Takovýchto podobných příkladů bych mohl vyjmenovat spoustu.

Dokonce JavaScript může návštěvníkům používání stránky zpříjemnit a ti, kteří používají JavaScript vypnutý nebo jejich prohlížeč toto zobrazování nepodporuje, budou o tento přídavek ochuzeni. Samozřejmě na ně tvůrci webu nesmí zapomenout a musí pro ně připravit alternativní možnost. Přesto se jim používání tohoto webu stane obtížnějším.

Z toho vyplývá, že JavaScript sám o sobě prasárna není.

Na internetu se však nachází mnoho webů, které na JavaScriptu staví a to je v každém případě chyba. Například používání pouze JavaScriptového menu je blbost. Nejen že návštěvníci bez JavaScriptu nemohou web používat a nedostanou se na žádné jiné podstránky, ale web se stává neindexovatelný také pro vyhledávače a tudíž jako by na internetu vůbec neexistoval. V tomto případě je použítí JavaScriptu prasárna.

Důležité je také, pro koho stránky tvoříte. Pokud je web určen pro interní firemní síť a vy víte, že všichni lidé v kancelářích mají prohlížeč Microsoft Internet Explorer 6 a podporu JavaScriptu zapnutou, neexistuje důvod, proč by jste se JavaScriptu měli vyhýbat. Na internetu však takovouto přesnou cílovou skupinu vymezit nelze, takže bohužel (bohudík) musíte tvořit stránky s ohledem na všechny uživatele.

Před použitím JavaScriptu si také pořádně spočítejte jeho velikost. Některé JavaScriptové kódy bývají dosti objemné, a místo toho aby práci zpříjemňovaly, od práce zdržují. Zamyslete se nad tím, jestli doba za kterou operaci vykoná JavaScript se vyplatí a přinese uživatelům takové zjednodušení, že se jim vyplatí počkat.

V již zmíněné konferenci se objevil názor:

„Stránky nemusí být zobrazitelné kdekoliv. Nevidím důvod, proč psát stránky, které si bude číst nějaký linuxář na lynksu, pokud jsou stránky obsahem určené pro grafické zobrazení (video, obrázky). V době MSIE 6.0, Mozzily a Konqueroru nevidím důvod, proč se „patlat“ podporou všeho a všude. Vyberu si 2 majoritní prohlížeče na Windows, 2 pod Linux (grafické) a konec. Není přeci moje chyba, že má někdo prohlížeč, který zastaral před dekádou.“

Minulý odstavec, co jste si přečetli, rychle zapomeňte. Naopak. Dnes je doba, kdy majoritní podíl IE klesá a na trh přichází další spousta prohlížečů pro různé OS. Existují lidé, kteří surfují bez zapnutých obrázků a přesto využívají vaše stránky, přinášejí vám zisk a nakupují u vás. A vy se kvůli nim nebudete patlat? To je jako kdyby jste prodávali auta pouze mužům.

Internetové stránky musí být zobrazitelné kdekoliv a na jakémkoli prohlížeči. Nejde jen o nějaké staré textové prohlížeče, musíte myslet také na ty, kteří si prohlížejí stránky v jiném zařízení (PDA,…), ale nezapomínejme na handicapované (čtečky pro nevidomé), kterým takováto stránka může způsobit nepřekonatelný problém.

Raději ať díky nějakému JavaScriptu přijdete o validitu stránek, než aby jste kvůli nějakému opovrhování prohlížečů snížili přístupnost webu.

Přitom udělat použitelný web v HTML + CSS pro „všechny“ není složité a tímto postupem máte (skoro) zaručené, že tento web bude stoprocentně přístupný a zobrazitelný. A požitek té největší části publika můžete s klidným srdcem zpříjemnit JavaScriptem.