spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

Peter Druska 8.12.2010, článok je súčasťou seriálu Modelovanie webového sídla
Hodnoť článok:
0 0

Modelovanie webového sídla: HTML pre PHP-čkára

Prečo by každý PHP programátor sa mal naučiť aspoň základy HTML? Čo, o čom točíme? O tom, prečo by sa každý PHP programátor mal naučiť aspoň základy HTML. Poriadneho HTML.

Webovým technológiám na pozadí dnes vládne PHP. Časom sa to môže zmeniť, možnože aj zmení, ale nechajme to teraz tak. Dnes si pohovoríme o tom, čo pre tvorcu PHP znamená výstup jeho práce a prečo by to malo byť kompletné HTML, nie len jeho časť. Naviac, tento krátky výťah by mal byť aj ako edukačný materiál, ktorý by chcel pomôcť každému tvorcovi PHP naučiť sa základ HTML – základ vo svojej maximálnej jednoduchosti. Taký základ, že každý bude mať chuť k tomu niečo povedať, čo je len a len dobre.

Mnohokrát som sa stretol s tým, že tvorca PHP (a myslím ľudí, ktorí sa zameriavajú len na túto oblasť webových technológií, prípadne ešte dazabázy) vie robiť výstup svojej práce len do HTML tabuliek. To znamená elementov table, tr, td. Žiaľ už nemusí poznať elementy thead, tbody, tfoot, th, col, colgroup. Prípadne do tzv. div tabuliek.

Mám jeden argument, prečo to tak, ako to je, nemá byť: sémantika.

Nedá sa urobiť štandard, čo sa týka dizajnu. Môžeme hovoriť o spoločných prvkoch a vlastnostiach, ktoré musia byť dodržané, o princípe. No existuje oblasť, ktorá štandardom je v zmysle použitia obsahu: sémantika. Práve s týmto výrazom sa budeme stretávať v tejto časti a možno aj ďalších vo väčšom množstve. So sémantikou sa stretávame už od narodenia v hovorenej reči: niečo je zvýraznené v prejave, niečo nie, niečo je povedané potichu, k niečomu si ešte zasvietime sviečku. Všetko záleží od obsahu a kontextu. Takto isto je nutné pracovať aj vo sfére dizajnu webového – dávať význam tomu, čo je výstupom niekoho práce.

Aby bola spolupráca s tvorcom PHP pohodlná, mal by vedieť, kedy použiť aký HTML prvok. A naviac, nemal by sa sám snažiť usporiadať svoj výstup tak, ako si myslí, že je správne. Mal by vedieť pracovať s čistým HTML. Mal by byť schopný urobiť stránku čitateľnú a použiteľnú bez CSS, obrázkov a JS. Mal by. Prax však býva iná, pretože význam prvku ostane po návrhu nepochopený, skladba štruktúry zmenená len preto, lebo iná cesta sa zdá jednoduchšia. Toto všetko a ešte niečo naviac môže mať za následok fatálne zmeny v dizajne a o niekoľko hodín dlhšiu prácu.

Pokračovaním tejto série nech je rozprávanie o sémantike, ktorú tvorca PHP musí vedieť. Jeho výstupom musí byť kód, ktorý sa s malými zmenami naštýluje pomocou CSS. Keďže HTML je súťasťou webového dizajnu, táto časť procesu tvorby by nemala byť zanedbaná. Často býva. Budem sa snažiť vysvetliť základné princípy použitia správnych značiek.

HTML je materiál, CSS je nástroj na opracúvanie materiálu. Ktokoľvek v procese tvorby webového sídla by nemal rozhodovať o tom, čo je správne z hľadiska dizajnu (=funkčnosti). O tom by mali rozhodovať používateľské testy (prípadne aj tie z minulosti, pretože správanie ľudí sa v základných črtách nemení rýchlo). Tieto testy by mali byť príčinou grafického vzhľadu sídla. Preto je čisté sémantícké HTML pre tvorcu PHP vyťahujúcom databázové dáta ten najlepší nástroj na výstup jeho práce.

S použitím tohto prístupu odpadne výhovorka: „ešte neviem, ako to bude vyzerať, tak nemám čo robiť“. Je pravdou, že nižšie popísaný prístup sa dá aplikovať v tíme vtedy, keď si to všetci medzi sebou prekonzultujú a dohodnú na pravidlách.

Dáta s iným významom

Každý výstup môže mať iný význam v danom kontexte a ten je vhodné zachovať, pretože:

  1. jednoduché nastavovanie pomocou CSS,
  2. dáta sú pochopiteľné vo svojom surovom stave

Naviac, tvorca PHP kódov by nemal pozerať na to, že odsadenie medzi dvomi odsekmi neexistuje (a nemal by tam pridávať zbytočné br značky). O túto stránku veci sa postará CSS. Ak naviac nechce robiť výstup do tabuľky, nemal by urobiť tabuľku ani z div elementov ako znak toho, že už odišiel od tabuliek:

<div class="table">
	<div class="tr">
		<div class="td">…</div>
		<div class="td">…</div>
		<div class="td">…</div>
		<div class="td">…</div>
	</div>
	<div class="tr">
		<div class="td">…</div>
		<div class="td">…</div>
		<div class="td">…</div>
		<div class="td">…</div>
	</div>
</div>

Nie je to správne. Poďme si ukázať použitie značiek podľa významu. Tento článok treba brať ako stručný pohľad tam, kam by sa každý tvorca PHP mal pozrieť hlbšie. Ak z nejakých dôvodov odmietne konkrétny článok, môže po vedomostiach siahnuť na w3.org, alebo akýkoľvek iný relevantný zdroj.

Prístup k zisteniu, aký význam má daný výstup do HTML, bude pohľadom, akoby to bolo vytlačené v knihe.

Nadpisy

Začiatok novej sekcie sa označuje nadpisom. Býva to stručný opis toho, čo bude nasledovať. Platí, že ak je človek schopný časť textu nazvať nadpisom: „toto by som vytlačil ako nadpis,“ treba na to použiť značku nadpisu:

<h1>…</h1>
<h2>…</h2>
<h3>…</h3>
<h4>…</h4>
<h5>…</h5>
<h6>…</h6>

Chybná interpretácia často býva takáto:

<p>
	<a href="#"><strong>Nadpis sekcie</strong></a>
</p>

, ale to je nesprávne, je to aj nevhodné a nevkusné. Takže používajte značky pre nadpisy tam, kde sa patrí. Uľahčí to prácu, nakoľko nájsť element v štruktúre p>a>strong nie je jednoduché, ak to má byť nadpis. Nájsť však h2 je zrýchlenie práce ako pre tvorcu PHP, tak i pre webového dizajnéra.

Odseky

Väčšia časť textu, za ktorou je potreba urobiť zalomenie na nový riadok bez použitia značky br. Odsek by mal určovať významovo ucelenú časť oddelenú od okolia. Toto oddelenie sa robí značkou p, do ktorej sa obsah uzatvára:

<p>…</p>

Odsek sa používa aj pri rozsiahlych textoch, ktoré chceme členiť na menšie celky. Naproti tomu značka br slúži pre tzv. veršovaný obsah. Veršovaným obsahom nazývam všetko, čo sa dá významovo uzatvoriť do jedného odseku, no potrebujeme v ňom vynútiť zlomenie riadkov.

Toto je nesprávna implementácia členenia textu na stránke:

<div class="clanok">
	RIADOK<br>
	<br>
	RIADOK 2<br>
	<br> …
</div>

Žiaľ aj Zajtra.sk zatiaľ používa miesto odsekov, <br>, takže si z nás neberte v tomto príklad. Dúfam, že sa to čoskoro u nás zmení. Takže prípadné sťažnosti posielajte osobe za to zodpovednej

Zoznamy

Veľmi špecifický prvok webového dizajnu, aj ľudskej existencie vôbec. O zoznamoch existujú knihy, čo svedčí o tom, že sa nejedná o hocijaký prvok. Má význam a svoje miesto. Ak vieme o obsahu prehlásiť: „je to zoznam“, treba použiť zoznam ul s položkami li:

<ul>
	<li>…</li>
	<li>…</li>
	<li>…</li>
	<li>…</li>
</ul>

Položky zoznamu sú buď neusporiadané ul, alebo usporiadené ol. Prípadne existuje jeden špeciálny zoznam: dl, ktorý sa dá použiť ako zoznam definícií alebo ako rozhovor ľudí:

<dl>
	<dt>…</dt>
	<dd>…</dd>
	<dt>…</dt>
	<dd>…</dd>
	<dt>…</dt>
	<dd>…</dd>
</dl>

Možno sa zdá, že tieto slová boli povedané už mnohokrát. Je to pravda. Moja snaha je povedať to tak, aby HTML značka bola presne zviazaná s daným význanom a kontextom, v akom by sa mala používať. Presne takto by ich mal chápať každý tvorca PHP kódov. Chybná interpretácia a nepochopenie zoznamu:

<p>
- múka,<br>
- maslo,<br>
- rožky.
</p>

Odkazy

Odkazy sú väčšinou pochopené a použité správne a nestretol som sa s človekom od webových technológií, ktorý by spochybňoval odkaz a používal ho na iný účel. Zaujímavým použitím je odkaz bez atribútu href:

<a>odkaz</a>

Je to skvelé vtedy, keď vieme, že na danom mieste z daného obsahu v istej chvíli odkaz bude. Častokrát sa to rieši značkou span, ktorá je v správnom čase nahradená značkou a s atribútom href. Toto nahrádzanie by malo byť nahradené odkazom bez atribútu href.

Audiovizuálny obsah

Audiovizuálnym obsahom myslím:

  • obrázky,
  • video,
  • audio.

Obrázky img bývajú pochopené korektne a nie je s nimi problém. Pri použití vyššie spomínanej sémantiky autor PHP kódu bude môcť vypísať obrázok, buď do zoznamu odseku, nadpisu, odkazu, alebo akéhokoľvek iného významovo špecifického elementu…

Audio a video prichádza spoločne s podporou HTML 5. Kým doteraz sa na prehratie používal flash-ový prehrávač, ten je postupne nahrádzaný HTML prehrávačom. Na to sú značky audio a video s tým, že ako alternatívu pre tých, ktorí nepodporujú tento nový formát, poskytneme prehrávač, ktorý podporujú (väčšinou flash-ový).

<video src="ZDROJ" width="320" height="240" preload controls>
	ALTERNATÍVNY PREHRÁVAČ, AK ZARIADENIE NEPODPORUJE HTML 5: VIDEO
</video>
<audio src="ZDROJ" controls>
	ALTERNATÍVNY PREHRÁVAČ, AK ZARIADENIE NEPODPORUJE HTML 5: AUDIO
</audio>

Formuláre

Formuláre sú časti stránok, ktoré používateľovi umožňujú odosielať údaje želaným smerom. Často som sa stretol s ich zvláštnym pochopením a implementáciou, kde na pohľad jeden formulár boli v skutočnosti formuláre tri. Len kvôli tomu, aby sa dali použiť tri odosielacie tlačidlá s atribútom a hodnotou type="submit", kde každý z nich odosielal iný údaj z rovnakej rodiny (pohlavie, prístupové práva, …). To je chyba. Toto je možné elegantne vyriešiť elementom select.

Ak má používateľ zapisovať text (krátky, dlhý), použije sa input typu text alebo textarea. Pre výber z viacerých možností sa použije input typu radio alebo select. Pre oddelenie skupiny formulárových prvkov, ktoré spolu súvisia, ale treba ich odlíšiť od ostatných prvkov vo formulári, sa používa fieldset.

<form action="#" method="#">
	<fieldset>
		SUVISIACE FORMULAROVE PRVKY 1
	</fieldset>
	<fieldset>
		SUVISIACE FORMULAROVE PRVKY 2
	</fieldset>
</form>

Takto poskladaný formulár je následne veľmi jednoduché upravovať. Či už pridaním tried, identifikátora, alebo HTML kódom, ktorý je potrebný na ďalšie akcie.

Tabuľky

Tabuľka je veľmi zaujímavý element, ktorý sa v minulosti používal na rozloženie celého sídla. Dnes je táto téma mŕtva, prirodzenou cestou tento prístup vymrel. Tabuľky sa dnes z istej miery používajú len vo svojej strohej podobe: table, tr, td a zabúda sa na ďalšie jej súčasti, ktoré sú silným nástrojom: thead, tfoot, tbody, th, col, colgroup. Spoločne s atribútmi colspan a rowspan sa dajú robiť krásne tabuľkové výpisy. Práve s daným strohým prístupom sa dnes stretávam často, keď tvorca PHP chce zobraziť prvky vedľa seba, aby to preňho vyzeralo dobre hneď pri vytvorení.

Ešte raz podotýkam: nie je dôležité, ako to vyzerá na výstupe PHP tvorcu „za surova“, oveľa dôležitejší je fakt, že čistý HTML prístup a použitie sémantiky dá veľký priestor webovému dizajnérovi, ktorý tento výstup „uhladí“. Iba tento spôsob tímovej práce je správny, pretože inak môže vznikať kód, ktorý je neovládateľný.

Pochopiť tabuľkové dáta nie je jednoduché, lebo nie vždy je jasné, čo to vôbec je. Z pohľadu sémantiky sa to dá určiť veľmi ľahko. Do tabuľky treba vložiť tie dáta, o ktorých by sme s istotou prehlásili: „toto je tabuľka“, prípadne ešte lepšie: „túto tabuľku potrebujem vytlačiť“, „podobnú tabuľku som videl v knihe“. Vytlačenie dokumentu (kniha, papier, …) urobí zaujímavý filter myslenia, pretože každý gramotný človek sa v nejakej knihe (šlabikár+) stretol s tabuľkou a bolo mu jasné, aké údaje v nej sú. Takto by bolo dobré k tabuľkám pristupovať aj na strane tvorcov PHP kódu.

Nebudem tu uvádzať „kompletnú“ HTML tabuľku, pretože to netreba. Stačí, keď tvorca PHP kódov zobrazí tabuľkové dáta v základnej štruktúre, akú pozná. Ak bude treba, doplnenie značiek col, prípadne th alebo tbody už nebude bolestivé.

Ak sa nevie, čo s tým

Značky span a div je dobré použiť vtedy, ak autor PHP kódu nevie, čo s daným výstupom, a ten nemá žiadnu použiteľnosť vo vyššie popísanych významoch. Značka div sa použije pre blok, span pre riadok. Uvediem príklad:

<div id="laktibrada">
	… <span class="klinec">…</span> …
</div>

Pridal som na ukážku aj identifikátor a triedu, aby bolo vidno zmysel tohto prístupu. V tomto prípade daným elementom nevieme priradiť žiadnu sémantiku z HTML, preto je vhodné použiť práve div a span.

Neuvedené

Naschvál neuvádzam značky ako header, footer, section, article, time, progress a ostatné z HTML 5, pretože:

  1. By to bol dlhý zoznam.
  2. Momentálne nejestvuje žiadna dobrá spätná náhrada za tieto značky, ak nejaké zariadenie tieto nepozná (ak sa používa JS emulácia, tak s jeho vypnutým nie je šanca na korektné zobrazenie – na čo treba myslieť). Za video a audio náhrada jestvuje. Toto však závisí od základne používateľov. Niekde sa HTML 5 dá použiť v širšej miere, niekde v užšej.

Navyše neuvádzam značky ako b, strong, i, em, samp, code a ostatné prítomné už v HTML 4. S týmito značkami nebýva problém. Ak nejakú bude treba, stačí uvedený span nahradiť ňou alebo ju len doplniť, kam treba.

Naviac, ak už autor PHP kódu vyrobil daný div, dá sa veľmi ľahko zmeniť za header, pre, … ak toto bude vhodné.

Pohľad z druhej strany

Platí aj opačný prístup: každý webový grafik, webový dizajnér alebo aj produktový manažér by mal prejsť základom PHP, databáz, prípadne iných jazykov, aby nevznikali nezmyselné požiadavky a návrhy. Inými slovami, pri vytváraní sídla by každý z tímu mal poznať technológie, s ktorými sa pracuje v tomto duchu:

  1. na profesionálnej úrovni svoje primárne zameranie,
  2. na základnej úrovni všetko ostatné, čo nie je náplňou jeho práce (tvorca PHP by mal vedieť, ako zarovnať text doprava pomocou CSS s použitím iných zdrojov a webový dizajnér by mal vedieť urobiť cyklus v PHP).

Inými slovami, každý člen tímu nech vie veľmi kvalitne svoju oblasť zamerania a úplne základy (alebo aspoň kde hľadať) oblastí ostatných. Práve akademická obec by mohla zaručovať toto široké teoretické zázemie každého, kto sa chce začleniť do procesu webového dizajnu a tvorby.

Peter Druska Peter Druska

Vyše 13 rokov som robil CSS/HTML šablóny webových sídiel ako Pokec.sk, Azet.sk a iných. Robil som vlastné iOS appky, neskôr som prešiel programovať najskôr do Starbug.eu, neskôr do Inloop.eu. Pomedzi to som učil chvíľu na gymnáziu, no odišiel som, pretože som bol myslením nekompatibilný. Po inloope som prešiel do firmy become.sk, kde mám za úlohu vybudovať oddelenie mobilného vývoja. Tomu sa teraz venujem naplno, popri tom robím aj vývoj pre iOS. Tu sme založili značku Bedots.eu.


Hodnoť článok:
0 0

2 komentáre k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

0 0 Michal Belianský 25.8.2011 09:22:04
odkaz na PHP nefunguje ;)
0 0 Tomáš Drozda 7.8.2011 12:28:58
pekný článok :)
Zajtra.sk > Programovanie > PHP > Modelovanie webového sídla: HTML pre PHP-čkára


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama