Tvorba internetových aplikací

Jakub Klinkovský

:: České vysoké učení technické v Praze
:: Fakulta jaderná a fyzikálně inženýrská
:: Katedra softwarového inženýrství

Obsah přednášky

1. WWW
2. Jazyk HTML
3. Tvorba WWW stránek

WWW

WWW (World-Wide Web)

WWW je služba počítačové sítě Internet, která změnila jeho tvář i strukturu jeho uživatelů („obal prodává“). Spolu s e-mailem patří k nejvyužívanějším službám.

Vlastnosti WWW:

• hypertextový: dokument může obsahovat odkazy na jiné dokumenty (i z jiných serverů) a může zpřístupnit i jiné služby Internetu (FTP, e-mail, VoIP, ...)
• multimediální: do dokumentu lze kromě textu začlenit také obrázky, zvuk, animace, ... (vše, co se dá digitalizovat)
• uživatelsky přátelský: předpokládá grafické uživatelské rozhraní (GUI) → snadné a intuitivní používání

Jak pracuje WWW

Model klient-server:

• klient = speciální program (tzv. prohlížeč, browser), který převádí pokyny uživatele na dotazy serveru a zobrazuje výsledky
• server = počítač (s příslušným softwarem, tzv. web serverem), který je stále připojen k Internetu, zpracovává dotazy klientů a odesílá odpovědi

Pravidla komunikace mezi klientem a serverem na Internetu definují určité protokoly. Pro WWW se používají protokoly HTTP a HTTPS. V klientově dotazu musí být určen cílový dokument → jednoznačná adresa dokumentu je zapsána ve formě URL. Server většinou odpovídá odesláním příslušného dokumentu, který je zapsán ve značkovacím jazyce (např. HTML, XHTML). Klient odpověď analyzuje (např. zformátuje dokument a zobrazí jej uživateli).

WWW dokument

WWW dokument je textový soubor (plain text), který obsahuje „příkazy“ (tzv. značky) některého značkovacího jazyka – např. jazyka HTML. Samotný obsah dokumentu je pak strukturován a zobrazen prohlížečem pouze na základě značek.

Vnějším znakem HTML souborů je přípona .html (resp. .htm). (Pokud WWW stránku generuje server dynamicky, bývá přípona jiná – nebo žádná.)

HTML soubory můžete vytvářet v jakémkoli (plain-)textovém editoru (ne MS Word), ale výhodnější je použít pokročilejší editor nebo IDE zvýrazňující syntaxi (např. PSPad nebo NetBeans).

Značkovací jazyky

Značkovací jazyk (markup language) je nástrojem pro popis formátování textu, tj. pro definici struktury dokumentu. Chová se tedy podobně jako typografické jazyky TeX či LaTeX, ale používá jinou syntaxi (skupinu značek).

Značkovací jazyky související s WWW:

• SGML (Standard Generalized Markup Language) je obecný standard pro specifikaci značkovacích jazyků:
  • HTML (HyperText Markup Language) – označuje poslední verzi 4.01
    • XHTML (Extensible HyperText Markup Language) – vývoj nepokračuje
    • HTML5 – rozšiřující specifikace HTML (aktuální living standard)
  • XML – obecný jazyk pro reprezentaci libovolných dat
    • další podmnožiny: SVG, RSS, Atom, MathML, XSLT, XHTML, ...

Základní pojmy

• hypertext, odkaz, multimediálnost
• nezávislost na platformě
• WWW servery + WWW klienti (prohlížeče)
• dokument neboli WWW stránka (web page)
• značkovací jazyk (HTML, XHTML, XML, ...)
• HTTP – HyperText Transfer Protocol (přenosový protokol)
• URL – Uniform Resource Locator (identifikace zdrojů)

Jazyk HTML

Vývoj jazyka HTML

HTML byl prvním jazykem pro definici struktury WWW dokumentů. Z historických důvodů však byly během jeho vývoje v 90. letech 20. století zavedeny také značky a atributy pro definování vzhledu konkrétních částí stránky.

W3C se proto rozhodlo v roce 1999 jeho vývoj ukončit (ve verzi HTML 4.01) a za nástupce HTML prohlásilo jazyk XHTML. Ten se však mezi vývojáři příliš neujal a místo něj od roku 2007 vznikal jazyk HTML5, který je od roku 2014 (verze 5.0) oficiálním pokračovatelem jazyka HTML.

Oficiální specifikace jednotlivých verzí naleznete na webu https://www.w3.org.

Vývoj HTML I

• 1989 CERN (Švýcarsko): zahájen projekt WWW (distribuovaný hypertextový systém) – Tim Berners-Lee;
• 1990 prosinec: první grafický prohlížeč a současně editor HTML – WorldWideWeb (později Nexus), pro počítače NeXT v CERNu;
• 1991 neformální specifikace jazyka HTML (HTML 0.9);
• 1992 slavnostní připojení ČSFR k Internetu (13. února), první veřejně dostupná verze prohlížeče (řádkový režim, ne grafický);
• 1993 počátkem roku pracovalo na světě již cca 50 serverů, v polovině roku první grafický klient (NCSA Mosaic), v létě návrh jazyka HTML verze 2.0;

Vývoj HTML II

• 1994 v březnu uspořádána 1. mezinárodní konference pouze systému WWW,

  září: založena nekomerční organizace WWWC (World Wide Web Consortium),

  koncem roku přestává být CERN centrem vývoje WWW a předává vývoj do francouzského institutu INRIA$^\star$

• 1995 počátek boomu systému WWW, vznikla specifikace HTML 2.0 a neoficiální rozšíření označované jako HTML 3.0

$^\star$ Institut national de recherche en informatique et en automatique

Vývoj HTML III

• 1996 květen: oficiální$^\star$ specifikace HTML 3.2 (HTML 2.0 + tabulky), Microsoft vypouští svůj první prohlížeč (zdarma!)

• 1997 WWW známé prakticky v celém světě, specifikace HTML 4.0 (HTML 3.2 + rozšířené tabulky a formuláře, rámy (i plovoucí), kaskádové styly, skriptování, objekty, internacionalizace)

• 1999 poslední oficiální verze jazyka HTML (HTML 4.01), poté je standardizace na několik let ukončena (snaha o nástupce – XHTML)

$^\star$ Oficiální verze jazyka je chudší než neoficiální verze HTML 3.0.

Vývoj HTML IV

• 2007 začínají práce na HTML 5 (od roku 2008 jsou vydávány pracovní návrhy), podpora v prohlížečích přichází postupně
• 2012 zahájeny práce na HTML 5.1
• 2014 Recommendation pro specifikaci HTML 5.0
• 2016 HTML 5.1 (Recommendation)
• 2017 HTML 5.2 (W3C Recommendation)
• 2018 HTML 5.3 (Working Draft)
• aktuálně: HTML – Living Standard (dle definice nikdy nebude kompletní)

Prohlížeče bez podpory HTML5 již prakticky neexistují, viz
https://www.w3schools.com/tags/ref_html_browsersupport.asp

Značky v HTML

HTML je case-insensitive jazyk (tj. nezáleží na velikosti písmen v názvech značek a jejich atributů). Konvence: vše malými.

Značky (tags) definují strukturu dokumentu (např. nadpis, odstavec). Značky v HTML jsou nepárové nebo párové (tj. značka má otevírací a uzavírací část obalující obsah), případně nepovinně párové. Značky mohou být do sebe vnořené, ale nesmí se překrývat.
Příklad: párová značka: <h1>Nějaký nadpis</h1>, nepárová značka: <br> (lze psát i jako <br/>).

Zobrazení WWW stránky v prohlížeči probíhá podle významu značek v HTML dokumentu a dodatečných pravidel ovlivňujících vzhled (např. kaskádové styly – CSS).

Struktura WWW dokumentu

Základní struktura dokumentu (WWW stránky) je sestavena pomocí značek !DOCTYPE, html, head a body:

<!DOCTYPE deklarace_DTD>
<html>
  <head>
    značky patřící do hlavičky dokumentu
  </head>
  <body>
    tělo dokumentu
  </body>
</html>

Značka html smí přímo obsahovat právě značky head a body.

Značka !DOCTYPE – Definice typu dokumentu (DTD)

DTD uvedená na začátku WWW dokumentu je značka jazyka XML, která definuje typ značkovacího jazyka, který je použitý v následujícím dokumentu (např. HTML 4.01, XHTML 1.1, nebo HTML5). Jejím smyslem je zabránit formátování dokumentu podle nekompatibilní specifikace (pro kterou nebyl dokument sestaven).

Pro HTML5 má jednoduchý tvar:

<!DOCTYPE html>

Pro jiné typy dokumentů je komplikovanější, viz W3C.

Značka head – Záhlaví dokumentu

Záhlaví vymezené párovou značkou head obsahuje dodatečné informace o dokumentu, které jsou určeny pro prohlížeč a ne pro čtenáře. Žádný z údajů zde uvedených není prohlížečem zobrazován, s výjimkou obsahu značky title (jméno stránky se objeví v titulkovém pruhu okna prohlížeče).

Záhlaví smí obsahovat pouze tyto značky:

• title pro text titulku stránky (nejvýše 1)
• meta pro deklaraci pomocných informací (např. znaková sada stránky)
• link pro připojení externích souborů (např. CSS, ikony, fonty)
• style pro definici kaskádových stylů uvnitř dokumentu
• script pro definici/připojení skriptů (např. JavaScript)
• base (nejvýše 1), noscript

Značka title – Titulek dokumentu

Párová značka title definuje titulek stránky neboli název zobrazovaný v titulkovém pruhu okna prohlížeče. Pokud není uveden, pak prohlížeč zobrazuje jen URL adresu stránky.

Titulek využívají všechny vyhledávací programy při indexování webu, a také jej používají prohlížeče (navigace uživatele mezi jednotlivými navštívenými stránkami, text pro záložky a historii), a proto:

• Nevynechávejte titulek dokumentu!
• Titulek naplňte promyšleným a výstižným textem (max. 64 znaků).

Značka meta – Specifické informace o dokumentu

Nepárová značka meta slouží jako „sběrná“ značka: obsahuje nejrůznější „pomocné“ informace, např. informace o znakové sadě dokumentu, klíčová slova, popis stránky nebo informace o autorovi.

Další informace: https://www.jakpsatweb.cz/meta-tagy.html

Příklad – deklarace znakové sady stránky v HTML5 (vhodné uvést před title):

<meta charset="utf-8">

Značka meta – obecné použití

Obecné použití (syntaxe HTML):

<meta name="typ_info" content="obsah_info">

Příklad – uvedení autora:

<meta name="author" content="Jakub Klinkovský">

Příklad – popisek stránky:

<meta name="description" content="popisek stránky">

Příklad – klíčová slova (oddělit čárkou, bez mezer) – vyhledávače je ale ignorují:

<meta name="keywords" content="slovo1,dvě slova,slovo3">

Značka link – Připojení externího souboru

Nepárová značka link realizuje vazbu na jiný dokument.

Příklad – přidání externího souboru s kaskádovými styly (CSS):

<link rel="stylesheet" href="soubor.css" type="text/css">

Příklad – přidání vlastní ikony (objeví se vedle titulku stránky title):

<link rel="icon" href="favicon.ico" type="image/x-icon">

Značka script

Párová značka script se používá pro definici spustitelného kódu (klientských skriptů) nebo libovolných dat (např. CSS, JSON) uvnitř dokumentu. Místo interní definice lze použít atribut src pro vazbu na externí soubor (analogie k tagu link).

Poznámka: může se vyskytovat uvnitř značky head, ale i v body.

Příklad – přidání externího souboru s JavaScriptem:

<script src="soubor.js" type="text/javascript"></script>

Příklad – interní definice JavaScriptu:

<script>alert("Hello World!");</script>

Většinou je ale výhodnější připojit externí soubory (sdílení pro různé dokumenty).

Značka body – Tělo dokumentu (obsah)

Párová značka body obsahuje hlavní část WWW dokumentu, která má být zobrazena uživatelům (návštěvníkům) stránky.

<body nepovinné atributy>
  obsah dokumentu
</body>

Připomenutí: V HTML5 slouží značky uvnitř body pro popis struktury „viditelné“ části WWW stránky. Definice vzhledu je oddělena, k tomu slouží kaskádové styly (cascading style sheets, CSS).

Strukturování obsahu v HTML

Přehled všech značek v HTML:
w3schools.com, MDN Web Docs

Nejpoužívanější:

• Sémantické: main, article, section, aside, header, footer, nav, ...
• article může být uvnitř section, nebo opačně (není určeno specifikací HTML5)
• Nesémantické: div (oddíl), span (úsek textu – inline)
• Preferujte sémantické značky pro přesnější popis struktury dokumentu

Další nejpoužívanější značky v HTML

A dále značky pro tvorbu seznamů (ul, ol + li; dl + dt, dd), formulářů (viz Formuláře) nebo tabulek (table, tr, th, td, ...).

Atributy značek v HTML

Atributy se používají pro bližší popis obsahu značky. Uvádějí se bud’ jako dvojice jméno="hodnota", anebo se uvede jen jméno atributu (tj. atribut je „zapnut“), například <img src="obr.jpg"> nebo <select size="5" multiple>.

HTML5 umožňuje uživateli používat vlastní datové atributy, které začínají předponou data- (validátor W3 je ignoruje). Lze je využít u všech značek a přistupuje se k nim JavaScriptem. Mají mnoho využití (např. zobrazení data a času v časovém pásmu uživatele; určení, zda se má formulář zpracovat AJAXem; přidání prezentační informace do struktury dokumentu, když to nelze udělat pomocí CSS – např. velikost JavaScriptem otevíraného okna s nápovědou).

Nové datové atributy (včetně data-) jsou podporované prohlížeči vydávanými po roce 2015. Pokud prohlížeč atributu nerozumí, ignoruje ho.

Globální atributy id a class

Tyto atributy lze použít s libovolnou značkou:

1. id slouží k označení elementů pro linkování, skriptování, nebo stylování
   • identifikátory musí být unikátní v rámci celého dokumentu
2. class slouží k pojmenování tříd/kategorií elementů pro skriptování a stylování
   • argument je seznam tříd oddělených mezerami
   • každý element může patřit několika tříd a každá třída může obsahovat několik elementů

Příklad:

<h2 id="nadpis-nejake-sekce">Nadpis nějaké sekce</h2>
...
<h2>Jiná sekce</h2>
<a href="#nadpis-nejake-sekce">Odkaz na předchozí sekci</a>

Atribut lang

Slouží ke specifikaci jazyka pro obsah v dané značce.

Příklad – pro celý dokument:

<html lang="cs">

Příklad – pro sekci nebo odstavec:

<section lang="cs">
  český text
  <p lang="en">English paragraph</p>
</section>

Příklad – pro určitou frázi:

<p>The title is "<span lang="fr">Le Bon Usage</span>".</p>

Znakové entity

Znakové entity slouží k zobrazení znaků vyhrazených pro potřeby jazyka HTML:

Znakových entit je mnohem více (např. pro speciální znaky národních abeced).
Více na whatwg.org, webtvorba.cz, jakpsatweb.cz.

Mezery a bílé znaky

Text WWW dokumentu zobrazuje prohlížeč pouze podle značek HTML (případně přitom formátuje i jeho vzhled definovaný pomocí kaskádových stylů). Odtud plyne zajímavá vlastnost: jakékoli sekvence bílých znaků (mezery, konce řádků$^\star$, tabelátory) prohlížeč ignoruje a ve výsledku je zobrazí jako jedinou mezeru.
Důsledek: „shluk“ bílých znaků (např. vícenásobné mezery) zbytečně zabírá drahocennou přenosovou kapacitu.
Je-li potřeba použít nedělitelnou mezeru (viz Typografie), použijte znakovou entitu   (non-breaking space).

$^\star$ Poznámka: konvence pro zalamování řádků v textových souborech se liší podle operačního systému: ve Windows se řádky zalamují dvojicí znaků CRLF (#0D0A, \r\n), v prostředí Unix/Linux pouze znakem \n a v MacOS \r.

Tvorba formulářů I

Formuláře slouží pro zadání dat (uživatelem), která pak budou nějakým způsobem zpracována (skriptem na straně klienta nebo serveru). Každý formulář je uveden v párové značce form, jejíž atributy určují především to, jak se budou data odesílat na server (method) a který skript data zpracuje (action):

<form action="nějaký URL" method="post">...</form>

Poznámka: místo metody post lze využít get (vysvětlíme si později).

Uvnitř formuláře se definují jednotlivé prvky – podle typu informací, které má uživatel zadat (např. značky input, select – viz dále).

Je vhodné využívat značky label, legend, fieldset a optgroup, aby se uživatelé ve formuláři lépe orientovali.

Tvorba formulářů II

Prvky, které lze definovat uvnitř formuláře:

• „jednořádkový“ prvek formuláře input (nepárová značka) s různými typy: text pro zadání textu, password pro zadání hesla, radio pro volbu jediné z možností, checkbox pro „zaškrtávací políčko“, submit pro odeslání vyplněného formuláře, file pro odeslání souboru (+ spec. atribut u form!), hidden pro skrytý prvek a další typy z HTML5 (např. email)
• víceřádkový text textarea (párová značka)
• výběrový seznam („menu“) select (párová značka), jehož prvky se vkládají do nepovinně párových option

Všechny prvky musí mít uveden atribut name, jinak je nelze zpracovat!

Přehled značek naleznete např. na webu w3schools nebo JakPsatWeb.

Co byste měli umět

• definovat odkaz na jiné URL (značka a, atribut href) i do téhož dokumentu (atribut id u cílové značky)
• definovat logické části stránky pomocí sémantických značek, případně div
• definovat nadpisy různé úrovně (typicky h1, h2 a h3, další se používají zřídka)
• definovat odstavec (p) a případně umět odřádkovat (br)
• logicky zvýraznit část textu (em, strong)
• vytvořit formulář s různými prvky
• používat seznamy (číslovaný ol, nečíslovaný ul)
• vložit do stránky obrázek (img)
• vložit do stránky tabulku (table)
• znát základní HTML entity (<, >, &, "),
• u českých WWW dokumentů deklarovat kódování češtiny a jazyk dokumentu

Tvorba WWW stránek

Potřeby pro tvorbu a provozování webu

Základní:

• textový editor, nejlépe editor značkovacího jazyka (WYSIWYG, WYNIWYG). Např. PSPad, Notepad++, NetBeans,
• vhodně organizovaný úložný prostor (adresáře pro stránky, obrázky, ...),
• prohlížeč (Firefox, Chrome, Opera, ...).

Nadstavbové:

• lokální webserver (např. Apache) a nějakou databázi pro pokročilé aplikace,
• konverze z jiných formátů (např. Markdown, LaTeX, RTF),
• program pro tvorbu grafických materiálů (např. JPG, PNG, SVG).

Chcete-li stránky zveřejnit na internetu, budete potřebovat přístup na nějaký server nebo webhosting (dle typu webové stránky/aplikace).

Návrh webové prezentace I

Před vytvořením webu (web site) promyslete:

• Co je cílem webové prezentace? Co nabízíte? Jaký užitek nebo jakou zkušenost si má návštěvník odnést?
• Kdo je cílový návštěvník, čili pro koho je web určen?
• Přizpůsobte strukturu webu prezentovaným informacím: nakreslete si „strom stránek“. Jaká stránka bude titulní (rozcestník)? Které stránky budou patřit hned pod ni? Jaké obrázky použít? Jaké logo a/nebo jaký slogan použijete?
• Jaká bude vizuální struktura jednotlivých WWW stránek? Např. budou obsahovat logo, menu, zápatí...? Kde budou tyto prvky umístěny? Jak se budou jmenovat položky menu? Budou také podmenu?
• Bude web obsahovat další funkce? Např. ankety, diskusní fórum, e-shop, fotogalerie, reklamní bannery, rozšířené vyhledávání, RSS export, atd.

Návrh webové prezentace II

• Bude web respektovat zahraniční návštěvníky? Které jazykové mutace realizovat? Přeložit vše nebo udělat jazykové mutace nezávislé? Jak přepínat mezi jazyky (vždy přesun na úvodní stranu NEBO na mutaci každé stránky)?
• Bude web statický (jen stránky v HTML) nebo dynamický (skripty)? Použijete databázi pro generování obsahu stránek?
• Jaká bude adresářová struktura webu? Je vhodné, aby každý celek (soubory s HTML, obrázky, styly, jednotlivé jazykové mutace apod.) měl vlastní adresář.
• Zakoupíte vlastní doménu nebo využijete webhosting zdarma?
• Použijete již hotový redakční systém (resp. e-shop)?
• Bude web obsahovat administrátorskou sekci?

Návrh webové prezentace III

Před vytvořením každé nové webové stránky promyslete:

• Jaké informace bude stránka obsahovat (co je klíčovým úkolem stránky)?
• Jak stránku začlenit do stávajícího webu? Zařadit ji do menu? A s jakým názvem? Doplnit do ostatních stránek odkazy na ni?

Kritéria kvality webu

Při vytváření webu zohledněte:

• použitelnost webu,
• přístupnost stránek,
• příjemný grafický vzhled,
• rychlost načítání stránek,
• optimalizaci stránek pro vyhledávače,
• kvalitní obsah jednotlivých stránek.

Po vytvoření nezapomeňte pravidelně zajišťovat aktuálnost obsahu webu.

Použitelnost I

Použitelnost (usability) spočívá v tom, že nový návštěvník se na webu (resp. WWW stránce) rychle zorientuje, pochopí (a zapamatuje si pro příště) ovládání webu, je schopen rychle najít cílovou informaci, nedělá zbytečné chyby a z používání webu má příjemný zážitek. Nepoužitelné stránky návštěvník velmi rychle opouští.

Rady k použitelnosti:

1. Titulní stránka (home page) by měla obsahovat nejdůležitější informace o webu. Volte přehlednou formu, nikoli „přeplácanost“.
2. Ze všech podstránek by měl vést odkaz na titulní stránku.
3. Přidejte možnost (rozšířeného) vyhledávání.
4. Grafika by měla text doplňovat, nikoli zastiňovat.

Použitelnost II

5. Ovládání webu by mělo být jednoduché a logické. Odlište odkazy od textu. Nevymýšlejte komplikované navigační prvky. Přidejte mapu webu. Zvažte použití drobečkové navigace (breadcrumb navigation).
6. Přidejte kaskádový styl pro tisk stránek.
7. Nenuťte uživatele přemýšlet. Naslouchejte připomínkám návštěvníků a vylepšujte.

Další zdroje informací:

• Použitelnost stránek
• Accessibility, Usability, and Inclusion

Přístupnost I

Přístupnost (accessibility) znamená, že web mohou používat všichni návštěvníci, a to bez ohledu na jejich technické vybavení (např. alternativní software či nízké rozlišení zobrazovacího zařízení), jejich schopnosti, znalosti nebo aktuální zdravotní stav (např. lidé zrakově postižení či lidé s kognitivními poruchami).

Je téměř nemožné udělat stránku, která se zobrazí ve všech prohlížečích stejně. Ale je možné udělat stránku tak, aby její informace byly návštěvníkům přístupné.

Existují odborníky vytvořená pravidla, jejichž dodržování by mělo zajistit dostatečnou přístupnost webu. V české republice jsou lokalizovaná pravidla uvedena v zákoně (předpis č. 365/2000 Sb. + jeho novely, vyhláška č. 64/2008 Sb.) a jejich dodržování je pro státní správu povinností.

Přístupnost II

Některé zásady přístupnosti:

1. Pište validní kód HTML.
2. Sémantika: používejte značky HTML tak, aby odpovídaly významu každého prvku stránky. Pro popis vzhledu upřednostněte kaskádové styly.
3. Text by měl být přehledný a dobře čitelný, dostatečně prokládaný nadpisy. Pozadí musí kontrastovat s barvou písma a nemělo by obsahovat rušivý vzorek. Pro velikost písma nepoužívejte absolutní jednotky. Pokud určujete typ písma, uveďte také obecnou rodinu písem.
4. Na začátku stránky by měl být textový obsah, až poté různá menu apod. Např. pozici menu před textem lze zajistit pomocí kaskádových stylů.

Přístupnost III

5. Titulek stránky by měl být jednoznačný a výstižný.
6. Odkazy musí být jasně odlišené od ostatních prvků a jejich text musí evokovat, kam se návštěvník dostane. Nejčastější chyba: odkazy s textem „klikněte zde“.
7. Každý netextový prvek obsahuje textový popis. Např. <img alt="popis" ...>.
8. Práci se stránkou řídí uživatel. Např. se automaticky neotevírají okna, neodesílají formuláře, neaktivují položky menu, ...
9. Ovládání webu je jasné a pochopitelné na všech stránkách.
10. Používejte takové barevné palety, které vyhovují všem platformám (např. PC, Mac, Android). Viz např. P. Satrapa: Bezpečné barvy.
11. Použitou znakovou sadu webové stránky deklarujte v meta značkách (viz dále).

Přístupnost IV

Přínosy přístupných WWW stránek:

• Zvýšení návštěvnosti stránky.
• Lepší pozice ve výsledcích vyhledávání (stránka je u vyhledávacích robotů oblíbenější).
• Má-li stránka validní HTML kód, zobrazí se i na jiných zařízeních než monitor (např. tablet, smartphone, ...).
• Oddělením formy (kaskádové styly) od obsahu (kód HTML) stránek se zajistí jejich snadná správa.
• Zvýšení kladné publicity stránek – návštěvníci nejsou v přístupu k informacím omezováni a ocení to.
• Odstranění záporné publicity, dodržení zákonů.

Zdroj: tvorba-www-stranky.com

Přístupnost V

Podrobnější informace a rady:

• pristupnost.cz (projekt Dobrý web)
  • pro tvůrce webu
• přístupnost webu (P. Větrovská, konzultantka Dobrý web)
• tutoriály (projekt Blind Friendly Web)
• simulace zrakových vad (P. Staníček – pixy):
  Paletton – The ColorSchemeDesigner (anglicky)
• 5 Ways to Ensure Your Site Is Accessible to the Visually Impaired

Znaková sada stránky

... aneb jaké kódování češtiny zvolit?

Jelikož znaková sada ISO Latin-1 (používaná pro jazyky západní Evropy) neobsahuje některé české znaky (ě, ň, ...), vznikly pro češtinu nové sady. Bohužel je jich více, ale některé se již téměř nepoužívají. V současnosti se nejčastěji používají kódování:

• UTF-8, UCS/Unicode Transformation Format – proměnná délka (od 1 do 4 bajtů), je zpětně kompatibilní s ASCII
  • současné prohlížeče jej zvládají bez problémů, doporučuji používat
• ISO 8859-2 neboli Latin 2 (Unix/Linux) – jednobajtové
• CP 1250 (MS Windows) – jednobajtové

Ať už používáte kterékoliv kódování, deklarujte jej pomocí značky meta.
Pozor: nedává to záruku, že prohlížeče stránku zobrazí správně (ale „aspoň něco...“).

http://www.cestina.cz/kodovani/          https://www.jakpsatweb.cz/cestina.html

Grafický vzhled I

Grafický vzhled (webdesign) ovlivňuje zážitek návštěvníka z webu. Měl by zvýšit použitelnost webu, umožnit návštěvníkovi rychlejší a snadnější dosažení jeho cíle. Někdy je právě webdesign tím, co prodává produkt nebo motivuje návštěvníka k dalšímu návratu na web.

Některé rady:

1. Používejte jednoduchý webdesign. Méně je někdy více. Návštěvník především hledá informace. Příliš mnoho obrázků či animací jednak zpomaluje načtení stránky, jednak odvádí pozornost zákazníka jinam.
2. Udržujte jednotný grafický vzhled celého webu. Stránky typu „každý pes – jiná ves“ uživatelům pohyb po webu znepříjemňují.

Grafický vzhled II

3. Grafika musí mít co nejmenší objem. Každý kilobajt prodlužuje dobu načtení stránky. Návštěvník může web opustit předčasně, protože nechce čekat.
4. Zvolte správný grafický formát obrázků. JPG pro fotografie, PNG a GIF pro „čárovou“ grafiku (větší stejnobarevné plochy). Vybraný formát ještě optimalizujte.
5. Pro obrázky s vysokým rozlišením vytvořte „klikací“ náhledy.
6. Pozadí stránky by mělo být jednobarevné, v dostatečném kontrastu s barvou textu. Nepoužívejte obrázek jako podklad stránky – zpomaluje to načtení stránky, navíc bývá často část textu nečitelná.
7. Neplýtvejte barvami – pestrobarevné stránky působí rušivě. Vyberte dvě kontrastní barvy (pro pozadí a text), případně přidejte některé odstíny jedné z nich.

Grafický vzhled III

8. Nepoužívejte více než dvě rodiny písma na jedné stránce. Např. nadpisy bezpatkovým a text patkovým písmem.
9. Používejte pouze svoje nápady a vyhýbejte se „půjčování“ od jiných. Nezapomeňte na autorský zákon! Můžete využít galerie volně šiřitelných obrázků/ikonek, ale kdo chce vypadat jako ostatní?
10. Na stránce by nic nemělo blikat častěji než jednou za sekundu. Více animací na jedné stránce působí rušivě.
11. Titulní stránka (home page) je „výkladní skříní“ celého webu. Lze použít fotografie, logo, slogan, ... Nepřeplnit, udržet přehlednost.
12. Logo a obchodní značky firmy pomáhají budovat její identitu na internetu.

Grafický vzhled IV

Pro tvorbu obrázků (ikonek, tlačítek, apod.) či úpravu fotografií potřebujete editor bitmapové grafiky, např.:

• GIMP (freeware, GNU GPL),
• Adobe Photoshop (shareware),
• Corel Paint Shop Pro (shareware),
• v nouzi postačí i Malování v MS Windows...

Rady pro tvorbu obrázků: The Comprehensive Guide to Saving Images for the Web.

Tip: mnoho redakčních systémů nabízí profesionální grafické webové šablony. Díky nim můžete grafický vzhled webu libovolně měnit. Populární je např. Bootstrap (a jeho témata/šablony).

Rychlost I

Uživatelé internetu nechtějí čekat. Podle průzkumů opustí 57 % návštěvníků stránku před jejím načtením, pokud čekají déle než 3 vteřiny (a 80 % se už nikdy nevrátí).

Rychlost načtení WWW stránky má vliv na pozici webu ve výsledcích vyhledávání (Google, Seznam) a na návštěvnost webu.

Délku čekání na stránku ovlivňují (viz jakpsatweb.cz):

• datová velikost stránek a rychlost připojení (načítání obrázků a multimédií),
• množství externích požadavků před textem,
• ukládání stránek na klientovi (cache),
• struktura stránek (velké tabulky, seznamy, apod.),
• rychlost serveru (vykonávání serverových skriptů, HW a SW, vytíženost),
• rychlost klienta (JavaScript, typ prohlížeče, HW a SW konfigurace).

Rychlost II

Doporučení pro zvýšení rychlosti:

1. Minimalizujte velikost stránky (včetně grafiky). Snižte počet obrázků, odstraňte nepotřebná multimédia apod. V případě objemné grafiky (fotografie, videa) vytvořte miniatury s nižší kvalitou.
2. Nepoužívejte obrázky místo textu. Typický negativní příklad: obrázková menu. Obrázek má desítky kB, text jen několik bajtů a navíc lze dobře komprimovat. Nemluvě o přístupnosti. Rada: nastylujte text, aby vypadal jako obrázek.
3. Ujistěte se, že všechny obrázky jsou optimalizovány. Vytvářejte malé soubory. Omezte množství plnobarevných fotografických JPEG obrázků nebo jim snižte kvalitu. Pro „čárovou grafiku“ použijte optimalizovaný PNG nebo GIF s min. počtem barev. Některé obrázky lze nahradit kaskádovým stylem.

Rychlost III

4. Oddělte obsah od formy (kaskádové styly). Kaskádové styly uložte do externího souboru, který bude společný všem stránkám webu.
5. Nepoužívejte tabulky pro rozvržení stránky do sloupců. Tabulka se nezobrazí, dokud ji prohlížeč nenačte celou. „Sloupcový vzhled“ lze docílit pomocí kaskádových stylů.
6. Zvyšte rychlost a kapacitu serveru (jste-li jeho správcem).
7. Využijte asynchronní načítání částí stránky (AJAX).

Rychlost IV

Další rady:

• interval.cz
• zdroják.cz
• 10 Tips for Optimizing Your Website’s Speed
• 15 Tips to Speed Up Your Website
• Best Practices for Speeding Up Your Web Site

Obsah jednotlivých stránek I

Uživatelé internetu čtou jen to, co jim přinese nějakou hodnotu. Ostatní texty „skenují“ (všímají si hlavních bodů).

Dále pamatujte: při procházení webu návštěvník přeskakuje mezi jednotlivými stránkami a nečte text od začátku do konce.

Text má být:

1. informačně hodnotný,
2. srozumitelný – využijte nadpisy, rozdělte text do odrážek, doplňte jej vhodným obrázkem, grafem či tabulkou,
3. stručný (krátký), neboť čtení textu na monitoru je únavné – dlouhý text rozdělte na více stránek a provažte je pomocí hypertextových odkazů,

Obsah jednotlivých stránek II

4. přehledně strukturovaný, s výstižnými nadpisy,
5. barevně kontrastní s pozadím stránky,
6. typograficky správný (viz Typografie),
7. bez pravopisných chyb (viz Internetová jazyková příručka, Grammarly),
8. pravidelně aktualizovaný – neaktuální informace vedou až ke ztrátě důvěry.

Velký význam má titulní stránka – napoví návštěvníkovi, o čem web je. Dělá první dojem, proto by měla nabídnout nejdůležitější informace. Je také místem, kam se návštěvník vrací, když se na webu ztratil (ze všech podstránek na ni vede odkaz). Na titulní stránce lze využít např. logo, slogan, úvodní upoutávku, nadpisy, vysvětlivky a výstižné fotografie.

Obsah jednotlivých stránek III

Nadpisy by měly být stručné a výstižné. Jejich vzhled by měl být odlišný od ostatního textu, aby návštěvníka upoutaly.

Položky v menu by měly být krátké (nepusťte menu do šířky), s jednotným vzhledem (není cílem návštěvníka webu zmást) a jasné (kam odkaz vede?).
Nedělejte odkazy na stránky, kde je (prozatím) napsáno „stránka se připravuje“ nebo „zatím tu nic není“!

Reference: text byl zpracován na základě tvorba-www-stranky.com.

Doporučení: zálohujte si stránky pro případ selhání serveru a ztráty dat, resp. „setkání“ s počítačovými hackery. Vždy udržujte dvě kopie vašich webových stránek.

Obsah jednotlivých stránek IV

Další rady k obsahu:

• Jak psát texty na Internetu (jakpsatweb.cz)
• Obsah / forma (jakpsatweb.cz)
• Jak používat nadpisy (sovavsiti.cz)
• Jak psát nadpisy (sovavsiti.cz)
• Jak udělat z uživatelů čtenáře (interval.cz)

Typografická pravidla

Psané dokumenty (včetně webových) by měly dodržovat typografická pravidla, která jsou většinou specifická pro daný jazyk dokumentu. V češtině se snažte dodržovat alespoň tato:

• důležité pojmy zvýrazňovat kurzívou (nikoli tučně)
• nepoužívat více než dva druhy písma
• používat pevnou mezeru (non-breaking space,  ) na správných místech, např.: 15.␣dubna, 13␣kg, 10␣530, s.␣r.␣o., K.␣J.␣Erben
• svázat předložky k, o, s, u, v, z + spojky a, i (psané velkými i malými písmeny) s dalším slovem pomocí pevné mezery, např.: s␣firmou
• správné používání mezer u interpunkčních znamének: . , : ? ! – ( ) „ “ '

Typografie – knihy

• Beran, Vladimír. Typografický manuál. 5. vydání. Praha: Kafka design, 2007.
• Kočička, Pavel; Blažek, Filip. Praktická typografie. 2. vydání. Brno: Computer Press, 2004.
• Samara, Timothy. Grafický design. Základní pravidla a způsoby jejich porušování. Praha: Slovart, 2008.

Typografie na webu – odkazy

• typografie a sazba na webu (interval.cz)
• What is Typography? Elements and Rules for Beginners
• Web Typography: The Complete Guide for Designers

Search Engine Optimization (SEO)

optimalizace stránky pro vyhledávače (Google, Seznam, apod.)

Základní zásady:

• používat výstižný titulek (title),
• používat značky meta pro defování popisu stránky, klíčových slov, informací pro vyhledávací roboty,
• text stránky by měl být kvalitní, krátký, výstižný, strukturovaný, pravidelně aktualizovaný; kód musí být validní a neměl by obsahovat zbytečné značky (tagy),
• vzhled nastavit pomocí CSS (v externím souboru),
• používat přátelská URL (friendly URLs),
• využívat RSS kanál,
• využít zpětné odkazy – ale pozor na penalizaci ze strany vyhledávačů (komentářový spam, linkové farmy, ...)

Search Engine Optimization (SEO) – knihy

• Linhart, Jan; Kubíček, Michal. 333 tipů a triků pro SEO. Brno: Computer Press, 2010.
• Kubíček, Michal. Velký průvodce SEO. Jak dosáhnout nejlepších pozic ve vyhledávačích. Brno: Computer Press, 2008.
• Couzin, Gradiva; Grappone, Jennifer. SEO – Search Engine Optimization: Optimalizace pro vyhledávače. Praha: ZONER Press, 2008.
• Smička, Radim. Optimalizace pro vyhledávače – SEO. Dubany: Jaroslava Smičková, 2004. Dostupné též na http://seo.jasminka.cz/.
• King, Andrew B. Zrychlete své WWW stránky. Praha: ZONER Press, 2004.

Validace zdrojového kódu stránky

Validátor HTML: http://validator.w3.org/

Stránku lze validovat několika způsoby:

• zadáním URL (musí být tedy dostupná z internetu),
• nahráním souboru s kódem stránky na server W3,
• zkopírováním obsahu stránky do formuláře.

Je dobré mít nastaveno <!DOCTYPE ...>, případně lze před validací vybrat druh (a verzi) značkovacího jazyka.