TechKnow

Článok

Domovská stránka
Návody
Testy
Aplikácie
Moje poznámky
pozadie úvodného obrázka
úvodný obrázok

Vývoj kvalitných webstránok

Posledná zmena:

INFO: V tomto článku sa nebudeme zaoberať webdizajnom, samotnou štruktúrou HTML ani pravidlami v CSS.

Tvoriť stránky nie je ťažké. Tvoriť svižné stránky bez chýb tiež nemusí byť náročné. Napriek tomu je dnes časté tvoriť stránky plné zbytočného kódu a závislostí.

Ja osobne odmietam tvoriť stránky, ktoré používajú stack plný zbytočných závislostí. Tie zväčšujú množstvo dát potrebných na načítanie stránky a zároveň komplikujú prispôsobenie výsledku mojim predstavám.

Framework nie je problém. Problém je používať ho bez pochopenia toho, čo sa deje pod ním. Vývojári postupne strácajú kontakt s čistým HTML, CSS a JS a keď neovládajú poriadne základy, neovládajú ani prácu s framework-om. Tvorba stránky nie je len o krásnom dizajne a rýchlej publikácii. Dôležité je dbať na SEO (Search Engine Optimalisation), na ľudí so zrakovým postihnutím a na výkon stránky.

INFO: Tento článok je zameraný na vývoj stránok na operačnom systéme Debian.

Štruktúra webového projektu

Nie je nutné tvoriť stránky práve takto. Určite by sa našli vývojári, ktorí by s niektorými výrokmi z tohto článku nesúhlasili. Je to môj osobný postup a nikomu ho nenútim. Každý webový projekt by mal mať prehľadnú štruktúru. Táto štruktúra bola navrhnutá pre webový server Apache.

POZOR: web/ musí byť skutočne nastavený ako DocumentRoot v Apache. Obsah mimo DocumentRoot nesmie byť dostupný prostredníctvom HTTP. Takže https://example.com/ musí smerovať na obsah web/.

example.com/
├── private/   - mimo webu
│   ├── .env   - citlive udaje
│   ├── db-config.php
│   ├── functions.php
│   └── ...
│
└── web/       - DOCUMENT ROOT
    ├── .htaccess
    ├── robots.txt
    ├── sitemap.xml
    │
    ├── favicon.ico
    ├── 403.html
    ├── 404.html
    │
    ├── assets/
    │   ├── css/
    │   ├── js/
    │   ├── img/
    │   │   ├── logo.svg
    │   │   └── favicon.svg
    │   └── fonts/
    │
    ├── domov/
    │   ├── index.php
    │   └── ...
    │
    ├── stranka-1/
    │   ├── index.php
    │   └── ...
    ├── stranka-2/
    │   ├── index.php
    │   └── ...
    │
    └── gdpr/
    	└── index.php

Ako sa spoľahlivo dostanem do private/?

Stačí jednoducho pridať na začiatok PHP skriptu, v ktorom potrebujeme napr. prihlásenie do databázy, pridať nasledujúci riadok.

require_once __DIR__ . '/../private/db-config.php';

UPOZORNENIE: .env nie je bezpečný kvôli svojmu názvu, ale preto, lebo nie je dostupný cez HTTP protokol vďaka umiestneniu mimo DOCUMENT ROOT webového servera Apache.

.htaccess

.htaccess môže byť umiestnený aj v podadresároch web/, pretože sa v ňom dá nastaviť viac než len presmerovanie a zobrazenie chybových hlásení. 

ErrorDocument 404 /404.html
ErrorDocument 403 /403.html

# interne prepisanie / na /domov
RewriteEngine On
RewriteRule ^$ domov/index.php [L]

Interné prepísanie nie je presmerovanie. Interné prepísanie je v tomto prípade to, že na example.com/ sa zobrazí obsah /domov/index.php

robots.txt

Sem patria pravidlá pre crawlerov (robotov vyhľadávačov), ktoré určujú, ku ktorým častiam webu majú alebo nemajú pristupovať. Niektorí crawleri to ignorujú, ale je dobrá prax robots.txt používať. Predvolene ak nemám niečo, čo nechcem, aby čítali, povoľujem všetko. Okrem toho odporúčam doň explicitne crawlerom oznámiť, kde sa nachádza sitemap.xml.

User-agent: *
Disallow:
Sitemap: https://example.com/sitemap.xml

sitemap.xml

Patria doň url, ktoré chceme, aby vyhľadávače indexovali. Pomáha to crawlerom rýchlejšie indexovať web a objaviť jeho stránky.

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

    <url>
        <loc>https://example.com/domov/</loc>
    </url>

    <url>
        <loc>https://example.com/stranka-1/</loc>
    </url>

    <url>
        <loc>https://example.com/stranka-2/</loc>
    </url>

</urlset>

HTML - čo áno a čo nie

Aj keď prehliadače nie sú prísne na 100 % správne používanie HTML tagov - je veľmi vhodné vyvarovať sa niektorým častým chybám.

Metadáta

Metadáta sú dôležitou súčasťou SEO, pretože poskytujú vyhľadávačom informácie o obsahu webovej stránky. Pomáhajú im lepšie pochopiť, o čom stránka je, a správne ju zaradiť medzi výsledky vyhľadávania. Niektoré metadáta sa môžu zobrazovať aj priamo vo výsledkoch vyhľadávania a ovplyvniť, či používateľ na stránku klikne.

<title>Názov Firmy - skúsený predajca nábytku</title>
<meta name="description" content="Vitajte na tejto stránke, máme toto, ponúkame aj toto.">
<link rel="canonical" href="https://example.com/stranka-1/">

<meta property="og:title" content="Názov Firmy - skúsený predajca nábytku">
<meta property="og:description" content="Vitajte na tejto stránke, máme toto, ponúkame aj toto.">
<meta property="og:image" content="https://example.com/image.webp">
<meta property="og:url" content="https://example.com/stranka-1/">

Farby

TIP: nástroj na výber palety farieb Color Palette Generator – Color Wheel Tool | Adobe Express​

Nie je dobré používať kontrast čistej čiernej a čistej bielej. Je to síce super pre slabozrakých ľudí, ale pri dlhom čítaní väčšina ľudí preferuje miernejší kontrast. Fajn voľby sú nasledovné, no nie sú to jediné možnosti.

body {
    color: #222;
    background: #fff;
}
body {
    color: #e6e6e6;
    background: #000;
}

Namiesto rovnakých hodnôt farieb, veľkostí a rozostupov na desiatkach miest je šikovné používať CSS custom properties:

:root {
    --primary: #1a2b3c;
    --secondary: #a1b2c3;
    --radius: 0.5em;
}

používajú sa nasledovne:

.upozornenie {
    color: var(--secondary);
    background-color: var(--varovna_oranzova);
    border-radius: var(--radius);
}

Základ CSS

Toto nie je povinné, nie sú to ani pravidlá, je to však podľa mňa veľmi rozumné základné nastavenie so základnou responzivitou médií a nadpisov.

/* PRIKLAD NASTAVENIA FONTU */
@font-face {
    font-family: "National Park";
    src: url("/assets/fonts/NationalPark.woff2") format("woff2");
    font-display: swap;
}

body {
    margin: 0;
    font-family: "National Park", sans-serif;
    line-height: 1.5;
}

/* Obrazky a media */
img, video, canvas, svg {
    display: block;
    max-width: 100%;
}
img {
    height: auto;
}

/* Nadpisy */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
}
/* minimum 2rem, plynule zvacsovanie podla viewportu, maximum 4rem. */
h1 {
    font-size: clamp(2rem, 4vw, 4rem);
}
h2 {
    font-size: clamp(1.75rem, 3vw, 3rem);
}
h3 {
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
}
h4 {
    font-size: clamp(1.25rem, 2vw, 1.75rem);
}
h5 {
    font-size: 1.25rem;
}
h6 {
    font-size: 1rem;
}

/* Formulare */
button,
input,
textarea,
select {
    font: inherit;
}

/* Tlacidla */
button {
    cursor: pointer;
}

font-family: "National Park", sans-serif; - sans-serif - bezpätková rodina fontov sa použije ak National Park nie je dostupný. Sans-serif teda nie je konkrétny font, ale skupina. Je na prehliadači, aký dostupný font zvolí, ale určite bude bezpätkový.

font-display: swap; - umožní okamžité zobrazenie pomocou dostupného fontu a keď sa vlastný font stiahne, nahradí sa ním

font: inherit; - nastaví font na taký, aký je použitý u rodiča - pri prvkoch formulára prehliadače často volia bez tohto nastavenia predvolené systémové fonty.

Hlavný obsah napr. samotný článok by mohol mať napr.:

article {
    max-width: 100ch;
}

Nemusí to byť práve element article. Podstatný je efekt. Ľudia neradi čítajú zľava doprava po celej šírke obrazovky. Text vtedy býva rozletený a udržať čitateľa je vtedy ťažké, zároveň by mohol ľahko preskočiť riadok pri čítaní. ch - character - je jednotka založená na šírke znaku 0 použitého fontu.

Optimalizácia a korekcia webu po technickej stránke

poznámka: nemusí byť všetko na 100 % optimalizované ani na 100 % korektné - aj keď to by malo...

Taký ideálny postup ako vytvoriť kvalitnú stránku, čo sa týka HTML a rýchlosti načítania, môže vyzerať nasledovne:

Validácia HTML

The Nu Html Checker (vnu)

Kontroluje správnosť HTML kódu, odhaľuje syntaktické chyby a nezrovnalosti, ktoré môžu ovplyvniť kompatibilitu s prehliadačmi.

Pre prehľadnosť som napísal skript, ktorý zefektívni prácu s VNU - pred tým je nutné vnu.jar vložiť do /opt/:

#!/bin/bash

java -jar /opt/vnu.jar "$@" 2>&1 | awk '
/error:/ {
    error++
    print "\033[31m■\033[0m " $0
    next
}
/warning:/ {
    warning++
    print "\033[33m■\033[0m " $0
    next
}
/info:/ {
    info++
    print "\033[36m■\033[0m " $0
    next
}
{
    print
}
END {
    print ""
    print "--------------------"
    print "\033[31mError:\033[0m   " error+0
    print "\033[33mWarning:\033[0m " warning+0
    print "\033[36mInfo:\033[0m    " info+0
    print "--------------------"
    print "Total:    " error+warning+info
}

Je dobré nastaviť si alias napr.:

# ~/bash_aliases
alias vnu="/opt/vnu-color.sh"

Dá sa použiť aj na dynamické stránky pomocou príkazu curl napr.:

curl -sL localhost:8080/ | vnu -
curl -sL https://example.com/ | vnu -

https://validator.w3.org/nu/ - stále aktuálny vnu bez potreby inštalácie s krajším výstupom, avšak je závislý na pripojení k internetu.

Optimalizácia a zlepšenie dostupnosti

https://pagespeed.web.dev/

Hodnotí výkon a technické aspekty stránky. Zameriava sa na:

https://wave.webaim.org/

Nástroj pomáha odhaľovať problémy s prístupnosťou webu.

Kontrola nefunkčných linkov

https://www.deadlinkchecker.com/

Kontroluje nefunkčné odkazy na webe, pomáha udržiavať web bez chýbajúcich odkazov, čo je dôležité predovšetkým pre používateľov a technickú kvalitu webu. Nefunkčné interné odkazy zhoršujú používateľský zážitok a komplikujú prehľadávanie webu.

Kontrola zobrazenia v rôznych prehliadačoch

Treba to vedieť preto, lebo vývojár stránky musí zabezpečiť, aby sa stránka zobrazovala na podporovaných prehliadačoch správne a použiteľne.

Pochopenie spracovania HTML a CSS

HTML a CSS spracováva vykresľovací engine. 3 najznámejšie sú Blink, Gecko a WebKit. Ak ste počuli o Chromium, to je jadro/základ prehliadača, ktorý používa vykresľovací engine Blink. Prakticky každý prehliadač, ktorý poháňa Blink, je postavený na jadre Chromium.

                             WEB
                              │
             ┌────────────────┴──┬─────────────┐
             │                   │             │
           Blink               Gecko         WebKit
             │                   │             │
   ┌─────┬───┴───┬──────┐        │        ┌────┴────┐
   │     │       │      │        │        │         │
Chrome  Edge   Brave  Opera   Firefox   Safari  GNOME Web

Pri bežnom webe je užitočné otestovať aspoň jeden reprezentatívny prehliadač založený na každom z troch hlavných renderovacích enginov. Napr. Brave (Blink), Firefox (Gecko) a GNOME Web (WebKit) alebo WebKitGTK MiniBrowser.

Inštalácia GNOME Web

$ sudo apt update
$ sudo apt install epiphany-browser

POZOR: GNOME Web nie je Safari. Oba používajú WebKit, ale Safari používa implementáciu Apple WebKit a GNOME Web používa implementáciu WebKitGTK. Nejde o úplne identické prostredie a teda sa stránka nemusí zobraziť identicky. Prakticky sa však GNOME Web alebo WEBKitGTK MiniBrowser dá použiť na kontrolu pre Safari.

Pri kontrole zobrazenia je vhodné skontrolovať, či v konzole javascriptu sú nejaké chyby (Ctrl + Shift + I).

Formáty súborov vhodné a určené pre web

Zabudnite na JPG a PNG na webe. Zaberajú veľa miesta a spôsobujú pomalé načítanie stránky. Svoje miesto majú, ale nie v prípade obrázkov, ktoré sa reálne budú zobrazovať priamo na stránke. Samozrejme sa môžu používať a ak sú použité na vhodné obrázky s dostatočnou kompresiou, tak to vôbec nevadí.

Typ Starý formát Moderný formát
Logo, ikona, favicon PNG SVG
Obrázok, fotka PNG, JPG WebP
Animácia GIF WebP
Font TTF WOFF2
Video AVI (DivX/Xvid + MP3) WebM (VP9 + Opus)
Zvuk mp3 Opus a AAC

Favicon je dobré uložiť aj ako ICO do koreňového adresára webu kvôli niektorým nástrojom a klientom, ktorí ho tam stále hľadajú. Na tento účel stačí ICO 32×32 px. zaujímavosť: ICO dokáže obsahovať aj viac veľkostí naraz

Okrem WebP existuje aj formát obrázkov AVIF, ktorý má ešte lepšiu kompresiu, avšak má pomalé kódovanie. V budúcnosti bude pravdepodobne vďaka rýchlejším počítačom populárnejší, avšak dnes je menej efektívny.

TIP: Na konverziu obrázkov používam balík webp - príkazy cwebp a gif2webp a pre fonty balík woff2 - príkaz woff2_convert

WebM je dnes široko podporovaný formát. Bežná kombinácia videa VP9 a zvuku Opus funguje v moderných verziách populárnych prehliadačov od roku 2021. To znamená, že už nie je nutné vkladať video takýmto spôsobom:

<video controls>
    <source src="/video.webm" type="video/webm">
    <source src="/video.mp4" type="video/mp4">
</video>

Stále to však môže pomôcť zopár užívateľom. Robilo sa to tak, aby si starší prehliadač vedel vybrať kompatibilné MP4 (H.264 + AAC) ak nepodporuje WebM. Ak vás trápi nízke úložisko vo vašom webhostingu, stačí použiť:

<video controls preload="metadata" poster="./video-poster.webp">
    <source src="./video.webm" type="video/webm">
</video>

Na konverziu videí do WebM sa dá využiť napr. populárny ffmpeg:

ffmpeg -i video.mp4 -c:v libvpx-vp9 -c:a libopus video.webm

Podpora indexovania

Okrem toho, že stránky majú mať aspoň základné metadáta a sitemap.xml a robots.txt majú byť správne nastavené, indexovanie sa dá podporiť aj pomocou nástrojov vyhľadávačov. Nie každý vyhľadávač ponúka takú možnosť.

V týchto nástrojoch je nutné overiť vlastníctvo domény. Potom sa začnú zhromažďovať dáta a po určitom čase uvidíte, ako často ľudia klikajú na vašu stránku z vyhľadávania. Je možné aj priamo zadať adresu sitemap.xml, čím zaistíte, že stránky, ktoré sitemap.xml obsahuje budú objavené vyhľadávačom a urýchlite indexovanie. Okrem toho uvidíte prípadné chyby ohľadom SEO, presmerovaní, neexistujúca alebo neurčená kanonická adresa a mnoho štatistík.

Tento článok možno stiahnuť vo formáte markdown.

Otestuj sa

TechKnow admin@techknow.sk
© 2022-2026
Ochrana súkromia
ikona - šípka hore