<< Späť

10 -- SEO, sémantika, rozloženie stránky

SEO

Článok od kolegyne p. Bosákovej o tom, ako prakticky zvýšiť svoju viditeľnosť stránky vo vyhľadávači. Je potrebné si ho prečítať (ide o súčasť lekcie) 😊:

link Search engine optimalization

Sémantika

Pri pohľade na ľubovoľnú webstránku vieme jednoducho identifikovať jej logické časti, ako hlavička, navigácia, bočný panel a pod. Podobným spôsobom sa pri tvorbe webstránky snažíme zariadiť, aby na tieto sémantické časti vedel rozdeliť stránku aj samotný prehliadač. Dosiahneme to použitím tzv. sémantických tagov, ktoré jasne definujú obsah, ktorý sa v nich bude nachádzať.

Skôr, než sa pustíme do prehliadky sémantických tagov, treba určite spomenúť nesémantické tagy -- také, ktoré nehovoria nič o tom, aký obsah v nich nachádza -- s ktorými sme sa už stretli:

Sémantické tagy

header -- ide o kontajner (vymedzená časť stránky, v ktorej sa nachádza nejaký obsah), v ktorom sa nachádza úvodný obsah -- zvyčajne ide o logo a názov.

nav -- reprezentuje navigáciu na stránke. V praxi ho najčastejšie používame na tvorbu (výhradne) hlavného menu, kde sú odkazy na ostatné podstránky. V kontajneri nav nemusia byť všetky linky nachádzajúce sa na stránke. Kvôli tomu by sa mal na každej stránke vyskytovať tento tag len raz.

section -- definuje sekciu v dokumente. Presnejšie, je tematické odčlenenie obsahu, ktoré máva nejaký nadpis (napr. na stránke máme prezentáciu 5 produktov, pričom pri každom je uvedený názov produktu (nadpis), stručný opis (odstavec) a obrázok. Pre každý takýto produkt môžeme použiť osobitný section).

article -- je kontajner na zobrazenie samostatného obsahu (napr. spravodajský článok (nadpis + perex + text), blogový príspevok, príspevok vo fóre a pod.). Významom article je, že jeho obsah je prezentovateľný nezávisle od ostatného obsahu stránky -- čo je hlavný kontrast so section, ktorý reprezentuje časť stránky.

aside -- slúži na zobrazenie vedľajšieho obsahu, t. j. ako bočný panel. Mal by byť nepriamo previazaný s obklopujúcim obsahom (podobne ako bývajú formátované niektoré knihy, najmä encyklopédie).

footer -- je pätička dokumentu. Obsahuje často prvky ako sú základné informácie o stránke (produkte/firme/značke), kontaktné údaje, mapu stránok a pod. Je štandardnou súčasťou väčšiny publikovaných webov.

Je zaujímavé si všimnúť, že niektoré kontajnery svojou funkciou pripomínajú formátovanie tlačených kníh (napr. article, aside). Ďalším takýmto typickým prvkom je figure. Tento tag slúži na definovanie opísaného obrázku, čiže vo svojom vnútri by mal obsahovať tag img, kde načítame obrázok a tag figcaption, v ktorom uvedieme opis obrázku, ktorý sa zobrazí pod ním.

Ak chceme ešte väčšmi podporiť tlačiarenský štýl formátovania, môžeme využiť CSS vlastnosť float, ktorá nám určí obtekanie obrázku -- t. j. hodnota left hovorí, že obrázok sa nachádza vľavo a obsah, ktorý nasleduje je na pravej strane, hodnota right naopak (vyskúšajte si to tak, že si otvoríte ukážku na novej karte, a pomocou RMB -> Preskúmať vyberte riadok, kde začína figure a následne v karte "Styles" prepíšete hodnotu float na right):

Otvoriť ukážku na novej karte

Poučenie -- pokiaľ je možné, snažíme sa používať sémantické tagy, kde sa dá. Samozrejme to neznamená, že divy treba zavrhnúť, ale je nevhodné používať ich namiesto elementov, ktoré majú dedikované sémantické tagy.

Rozloženie stránky

Jednotlivé (sémantické) časti stránky chceme vedieť modifikovať, t. j. uložiť ich na svoje miesto a formátovať. V poslednej dobe môžeme na stránkach badať mnoho podobných prístupov k rozloženiu stránky -- vrchný "riadok" zaberá logo, názov, za ním nasleduje hlavné menu, následne hlavný obsah a nakoniec pätička.

Historicky sa k tvorbe rozloženia (angl. layout) pristupovalo nasledovne:

V súčasnosti sa na tvorbu layoutu používajú nástroje, ktoré sú v podstate analógiou tabuliek a floatov, avšak zostrojené výhradne pre účely rozloženia (častí) dokumentu. Jedná sa o hodnoty CSS vlastnosti display, ktoré nesú názov grid (dvojrozmerný layout) a flex (jednorozmerný/lineárny layout). Layout pomocou týchto vlastností budeme tvoriť aj na tomto predmete.

Poznámka: v súčasnosti existuje aj množstvo frameworkov, ktoré nám uľahčujú tvorbu layoutu (napr. Bootstrap). Ich použitie je však na tomto predmete zakázané, nakoľko našim cieľom je vytvárať projekty, kde definujeme celé grafické vyhotovenie od základu!

Grid

Jedná sa o nástroj na tvorbu dvojrozmerného rozloženia stránky. Presnejšie povedané, ide o tabuľku (tvorenú riadkami a stĺpcami), ktorá je špeciálne vyvinutá na to, aby sme do nej "povkladali" jednotlivé časti stránky. Hlavnými výhodami vlastnosti grid sú:

Gridy sa nastavujú na dvoch úrovniach. Prvú nastavujeme v kontajneri, ktorý sa má zobraziť ako mriežka -- zvyčajne chceme celú stránku napasovať do gridu, čiže za tento kontajner považujeme samotné body -- a to pomocou vloženia vlastnosti do CSS display: grid;. Navyše, na tejto úrovni nastavujeme aj ďalšie globálne nastavenia -- šírky stĺpcov a výšky riadkov. Teda konkrétne kontajner body musí obsahovať minimálne tieto nastavenia:

03.jpg

Ako si môžeme všimnúť, pri vlastnostiach grid-template-columns a grid-template-rows môžeme vkladať viacero hodnôt, oddelených medzerami, pričom každá nová hodnota znamená nový stĺpec/riadok s uvedenou šírkou/výškou (čiže grid uvedený hore má 3 riadky a 5 stĺpcov). Obrovskou výhodou je, že všetky stĺpce, resp. riadky nemusia uvedený rozmer v rovnakých jednotkách, čiže napríklad, mriežka ktorá má stĺpce zadané ako grid-template-columns: 20vw auto 180px; sa zobrazí tak, že prvý stĺpec zaberie 20% so šírky okna, posledný stĺpec bude mať vždy 180 pixel a stredný stĺpec vyplní miesto medzi prvým a posledným. Vyskúšajte si na nasledovnej podstránke pomocou možnosti Preskúmať v prehliadači meniť jednotlivé veľkosti a sledujte ako sa rozloženie stránky.

Otvoriť ukážku na novej karte

Druhá úroveň, v ktorej nastavujeme gridy sú samotné kontajnery, kde nastavujeme, ktorú časť mriežky má kontajner zaberať. Dá sa to urobiť dvomi spôsobmi.

Spôsob 1

Pre každý dcérsky kontajner nastavíme pozíciu pre ľavý horný roh a pravý dolný roh (keďže kontajnery sú obdĺžniky). Dôležité je poznamenať, že pozície stĺpcov a riadku číslujeme od 1 a číslujú sa čiary, ktoré ohraničujú jednotlivé obdĺžniky mriežky tak, ako je uvedené na obrázku:

05
Mriežka 2x3 má riadky očíslované zhora 1, 2, 3 a stĺpce zľava 1, 2, 3, 4.

Následne pre každý kontajner vieme jeho umiestnenie a rozmer v rámci mriežky zapísať štyrmi ekvivalentnými spôsobmi (oddelené svorkami):

06
V prvom spôsobe zadáme ručne hodnoty pre začiatočný + koncový stĺpec a začiatočný + koncový riadok.
Druhý spôsob je zredukovaním prvého, kde začiatok a koniec je oddelený znakom /.
Tretí spôsob je alternatíva druhého, avšak zadávame len začiatok a výraz span označuje, koľko buniek má kontajner zabrať.
Štvrtý spôsob je redukciou druhého, kde za sebou píšeme začiatočný riadok + stĺpec a koncový riadok + stĺpec (vždy v tomto poradí).

Vyskúšajte si meniť umiestnenie prvkov v mriežke na nasledovnom príklade pomocou možnosti Preskúmať:

Otvoriť ukážku na novej karte

Spôsob 2

Namiesto vypisovania akýchsi súradnic, môžeme priamo načrtnúť šablónu v materskom kontajneri (body), pričom každý dcérsky kontajner si označíme špeciálnym identifikátorom prostredníctvom vlastnosti grid-area, ktorej priradíme ľubovoľný jednoslovný názov (napr. v príklade to je container-A. Následne v materskom kontajneri nastavíme vlastnosť grid-template-areas, kde schematicky zapíšeme riadky (každý riadok je ohraničený " " a stĺpce v rámci riadku sú oddelené medzerami. Každej bunke priradíme kontajner tak, že odpíšeme názov vlastnosti grid-area. Je dôležité aby bunky s rovnakým názvom vždy vytvárali obdĺžnik a každá bunka bola niečim obsadená (počet stĺpcov a riadkov musí korenšpodovať s tým, čo sme si definovali na začiatku). Pokiaľ chceme, aby sa v niektorej bunke nezobrazoval žiadny kontajner, vložíme do nej jednoducho bodku . . Prakticky si to pozrite na nasledovnom príklade, kde je to isté rozloženie zo spôsobu 1 zapísané spôsobom 2 (otvorte si zdrojové súbory a porovnajte a taktiež skúste meniť rozloženie).

Otvoriť ukážku na novej karte

Poučenie

Nemožno povedať, ktorý zo spôsobov na tvorbu gridu je praktickejší. Do veľkej miery je to vec vkusu, čiže používajte, to čo sa vám najviac pozdáva. Ja osobne preferujem spôsob 2, nakoľko pri vypisovaní buniek v grid-template-areas si hodnoty môžem naformátovať tak, aby to pripomínalo tabuľku a tým pádom sa vyhnem prípadným nechceným prekrytiam a ľahšie sa hľadajú chyby ako prechádzať jednotlivé dcérske kontajnery jeden za druhým.

Práca na cvičení

Vytvorte nasledovnú webstránku prostredníctvom týchto podkladov (html + css súbory vytvárate sami). Stránka musí byť rozložená do mriežky tak, ako je znázornené na obrázku (druhý a tretí stĺpec majú rovnakú šírku):

uloha

Okrem umiestnenia do mriežky, každú logickú časť stránky zaraďte do niektorej zo sémantických tried (treba použiť príslušné tagy). Taktiež, dodržte uloženie obrázkov v rámci textu (aj s voľným okrajom okolo nich).

Použitie fontov a farieb je na vašej ľubovôli, ja som v príklade využil font Arial a farby pozadia #e1daf0, #947eb4, #d7c8bc, #e8dfd9. Taktiež vhodne nastavte ohraničenia/odsadenia jednotlivých kontajnerov, aby stránka pôsobila čo najprehľadnejšie.

Výsledná stránka bez mriežky by mala vyzerať nasledovne:

uloha
file_upload Odovzdať vypracovanie (súbory skomprimujte do formátu .zip).