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. Základní koncepty
2. Jazyk HTML
3. Další značkovací jazyky
4. Tvorba webových stránek

Základní koncepty

1. Přenosová síť ­– přenos dat pomocí komunikačních protokolů
2. Adresování zdrojů dat – URI/URL
3. Datové formáty pro popis obsahu – HTML, JPG, JSON, ...

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řívětivý: předpokládá grafické uživatelské rozhraní (GUI) → snadné a intuitivní používání
• nezávislý na platformě: stejný obsah lze zobrazit na libovolném zařízení

Jak pracuje WWW

Model klient-server:

• klient = program, který posílá dotazy pro získání dat a zobrazuje výsledky
  • prohlížeč (browser) – interaguje s uživatelem a zobrazuje výsledky graficky
• server = počítač, který poskytuje data, zpracovává dotazy 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. Po zpracování dotazu server odešle zpět příslušný dokument, který klient analyzuje a zobrazí uživateli.

Dokumenty v síti Internet

Typ obsahu v síti Internet určuje tzv. media type (česky "typ internetového média"), např.:

• text/plain – prostý, neformátovaný text
• text/html – text formátovaný pomocí značkovacího jazyka HTML
• text/css, text/javascript, text/xml, ...
• image/jpeg, image/png, audio/ogg, video/mp4, ...
• application/zip, ...

Media type určuje způsob, jakým by měl prohlížeč obsah zformátovat a zobrazit.

Poznámka: Vnějším znakem HTML souborů je přípona .html (resp. .htm). Přípony ale neurčují typ obsahu, mohou být jiné/nestandardní nebo zcela chybět.

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 pro 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, ...
• jiné: JSON, YAML, Markdown

Identifikace zdrojů dat

Potřeba jednoznačně identifikovat různé druhy objektů vedla ke specifikaci URI (uniform resource identifier). URI má dva podtypy:

• URL (uniform resource locator) – určuje umístění daného zdroje
  např. https://ksi.fjfi.cvut.cz/o-katedre/lide/jakub-klinkovsky
  např. mailto:kdosi@kdesi.cz
  např. file:///srv/http/root/static/base.css
• URN (uniform resource name) – určuje identitu daného zdroje
  např. urn:issn:1873-7668 – časopis Computers & Mathematics with Applications

Jazyk HTML

Vývoj HTML I

• 1989 vznik WWW (distribuovaný hypertextový systém) – CERN, Švýcarsko
• 1991-1997 neoficiální verze HTML 0.9-3.0 (postupně přibývají nové značky)
• současně vznikají první webové prohlížeče (Nexus, Mosaic, Netscape, IE, Opera)
• 1997 první standardizované verze HTML 3.2 a 4.0 organizace W3C
• 1999 poslední oficiální verze jazyka HTML 4.01, poté je vývoj ukončen

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.

• snaha oddělit strukturu dokumentu (HTML) od formátování vzhledu (CSS)
• nástupce měl být jazyk XHTML – ten se však mezi vývojáři příliš neujal...

Vývoj HTML II

• 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í webové 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 dokumentu

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

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

• Značka !DOCTYPE pochází z XML a obsahuje definici typu dokumentu (DTD). Pro HTML5 má jednoduchý tvar. Pro jiné typy dokumentů je komplikovanější, viz W3C.
• Značka html smí přímo obsahovat právě značky head a body.

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. Význam této značky ale postupně klesá.

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

Příklad – nastavení viewportu pro responsivní web na mobilních zařízeních:

<meta name="viewport" content="width=device-width, initial-scale=1">

Příklad – deklarace znakové sady dokumentu (vhodné uvést před title):

<meta charset="utf-8">

Znaková sada

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

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

Značka meta – obecné použití

Obecné použití:

<meta name="jmeno_klíče" content="obsah_klíče">

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 HTML 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ářů (form, input, select, label, legend, ...), 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; přidání prezentační informace do struktury dokumentu, když to nelze udělat pomocí CSS).

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.

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)
• 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
• dohledat použití méně známých značek v dokumentaci

Další značkovací jazyky

Jaké znáte další značkovací jazyky používané na webu pro formátování textu?

HTML vs jiné značkovací jazyky

Jazyk HTML je v současnosti vhodný jako přenosový formát pro zobrazení finálního dokumentu uživateli, ale kvůli své složitosti není příliš vhodný pro tvorbu obsahu.

Existují značkovací jazyky, které jsou jednodušší než HTML a přímo určené pro efektivní psaní textu a tvorbu obsahu. Specializované nástroje potom zajistí konverzi do HTML a propojení s definicí vzhledu dle zvolených kritérií.

Značkovací jazyky potkáte na mnoha místech:

• dynamické webové aplikace (Wikipedia, StackOverflow, HedgeDoc, Drupal, Wordpress, Facebook, X (formerly Twitter), ...)
• statické webové stránky (viz dále)
• technické dokumenty, softwarové projekty (dokumentace, specifikace, ...)

Generátory statických stránek

Konverze do HTML z jednodušších značkovacích jazyků nebo šablon.

• Markdown: Hugo, Jekyll, mdBook, GitBook, Pelican, Publish, Hyde, Nikola, ...
• AsciiDoc: AsciiDoc, Asciidoctor
• reStructuredText: Sphinx, Docutils
• MkDocs, Doxygen, ...

Viz také Top 5 Static Site Generators in 2023 (and When to Use Them)

Znalost HTML je pro nás ale stále důležitá, protože v INTA chceme programovat

Tvorba webových stránek

Zásady pro tvorbu webového obsahu

Následující část prezentace shrnuje předmět 18PW (Prostředí webu a popisné jazyky).

Před zahájením tvorby libovolného obsahu je dobré si promyslet:

• Co chcete vytvořit a k čemu je to dobré?
• Pro koho je obsah určený?
• Jaká bude struktura obsahu? (rozdělení na stránky/kapitoly/sekce)
• Jaká bude vizuální stránka tvořeného obsahu?
• Jaké nástroje budou potřeba? Bude potřeba doplnit nějaké pokročilé funkce?
• Kolik to bude stát peněz, času a úsilí?
• Bude to stát za to?

Agilní vývoj webu

Pro vývoj webového obsahu a aplikací se hodí techniky agilního vývoje:

• adaptivní přístup, ne prediktivní
• fáze plánování, analýza, návrh, implementace, testování a ověření
• iterativní a inkrementální proces: fáze se opakují v krátkých sprintech
• včasný feedback a reakce na chyby
• efektivní face-to-face komunikace ve větších týmech

What is agile web development? Eveerything you need to know

Agilní vývoj webu

Komunikace je klíčem k úspěchu.

Agilní vývoj webu

Komunikace je klíčem k úspěchu.

Kritéria kvality webu

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

• použitelnost,
• přístupnost,
• příjemný grafický vzhled,
• rychlost načítání,
• kvalitní obsah.

Po vytvoření je důležité pravidelně zajišťovat aktuálnost obsahu.

Použitelnost

Použitelnost (usability) spočívá v tom, že nový návštěvník se na webu rychle zorientuje, je schopen rychle najít cílovou informaci, nedělá zbytečné chyby a z používání webu má příjemný zážitek.

Jak toho docílit?

• Přehlednost je lepší než přeplácanost.
• Ovládání a navigace by měly být jednoduché a logické.
• Nenuťte uživatele přemýšlet.

Další zdroje:   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. 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,
   • zkopírováním obsahu stránky do formuláře.
2. Používejte sémantické značky HTML v souladu s jejich významem.
3. Text by měl být přehledný a dobře čitelný, dostatečně prokládaný nadpisy.
4. Vhodný grafický vzhled definovaný pomocí CSS (vhodné barevné palety pro text a pozadí, vhodná velikost a typ písma, atd.)
5. 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“.
6. Každý netextový prvek obsahuje textový popis. Např. <img alt="popis" ...>.

Přístupnost III

Podrobnější informace a rady:

• pristupnost.cz (projekt Dobrý web)
  • pro tvůrce webu
• 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

Grafický vzhled

Některé rady:

1. Snažte se o jednoduchost a jednotnost.
2. Preferujte vektorovou grafiku (např. SVG) oproti rastrové (JPG, PNG, apod.)
   Ještě lepší je definovat grafiku pomocí CSS
3. Pozor na autorský zákon! Můžete využít galerie volně šiřitelných obrázků/ikonek.
4. 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ě.
5. Dodržujte typografická pravidla.

Více informací: 10 effective web design principles every designer should know apod.

Pro tvorbu obrázků: The comprehensive guide to saving images for the web.

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 (<em>), nikoli tučně (<strong>)
• 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

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

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

• datová velikost stránek, rychlost připojení (načítání obrázků a multimédií) a "fyzická" vzdálenost serveru od klienta,
• množství externích požadavků,
• ukládání stránek na klientovi (cache),
• struktura stránek (nevhodné prvky před textem, 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),
• moderní technologie (např. verze protokolu HTTP(S)).

Rychlost II

Optimalizace rychlosti načítání stránek:

1. Minimalizujte velikost stránky (včetně grafiky).
2. Místo rastrových obrázků preferujte vektorové formáty nebo CSS.
3. Oddělení obsahu a vzhledu (základní princip WWW). CSS v externích souborech jsou použitelné opakovaně a lze cachovat na straně klienta.
4. Zvyšte rychlost a kapacitu serveru (jste-li jeho správcem).
5. Využívejte moderní technologie (přenosové protokoly, skriptovací techniky, atd.)

Další rady:

• 10 Tips for Optimizing Your Website’s Speed
• 15 Tips to Speed Up Your Website
• Best Practices for Speeding Up Your Web Site

Obsah webu 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. informativní, srozumitelný, stručný,
2. strukturovaný pomocí sémantických značek (nadpisy, odrážky, seznamy, tabulky, obrázky, odkazy),
3. bez pravopisných chyb (viz Internetová jazyková příručka, Grammarly),
4. pravidelně aktualizovaný – neaktuální informace vedou až ke ztrátě důvěry.

Obsah webu II

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)

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 několik kopií vašich webových stránek.