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

Peter Druska 18.1.2011
Hodnoť článok:
0 0

TV program na webe: Rôzne prístupy k zobrazeniu rovnakých dát

Televízny program na webe nemusí vyzerať rovnako ako televízny program v novinách či Eurotelevízií. Pozrite sa na rôzne prístupy k zobrazovaniu tv programu na webe.

Argumenty o tom, že ľudia sú zvyknutí na nejaký typ webového výpisu televízneho programu sú na mieste, no treba povedať aj to, že techniky jeho zobrazovania sú nevhodné preto, že sú prevzaté z tlačovín. Neodsudzujem tlačoviny a ich dizajn. Ich funkčnosť je jasná a preto vyzerajú presne tak, ako je to najlepšie. Sú optimálne vyladené. To ale neznamená, že sa v budúcnosti niekedy nezmenia radikálnym spôsobom. Je to však ale nepravdepodobné.

Webová stránka, ako relatívne nové médium, sa musela popasovať s mnohými nástrahami, ktoré na ňu čakali, a na ktoré nebola pripravená. Spravodajské služby išli na web a najrýchlejším spôsobom zobrazenia ich obsahu, napríklad aj televízneho programu bolo prevzatie tejto techniky z ich predtým primárneho nosiča informácií.

Preto bolo prevzaté radenie TV programu s vertikálnou časovou osou a horizontálnym rozložením staníc. Presne toto rozloženie ponúkajú programy v tlačovinách. Ako už bolo spomínané v skoršom článku, toto radenie je prísne podmienené fyzickým obmedzeniami a snahou zobraziť čo najviac, ktoré tlač so sebou nesie. Poďme ale postupne a rozoberme si jednotlivé zobrazenia, v čom sú ich výhody i nevýhody.

Vertikálny TV program

Zobrazenie staníc vedľa seba s vertikálnym programom - typ 1

Prvý typ zobrazenia staníc vedľa seba s vertikálnym výpisom programu je so zarovnanými istými hraničnými časmi. Napríklad sú to časy 8.00, 16.00, 20.00, 00.00. Ale môžu byť aj iné, to záleží od implementácie. Problém nastáva, keď je staníc vedľa seba veľa s programom presahujúcim vertikálny priestor okna prehliadača.

TV program - vertikálny program

Posúvanie programu vybratých staníc sa uskutočňovalo vertikálne i horizontálne. Je pravda, že držiac v ruke tablet, hladkadlo (Magic Trackpad), magickú myšku alebo Shift+koliesko myši posúva obsah veľmi pohodlne aj horizontálne. Ale nie každý tie zariadenia a skratky používa a dovolil by som si tvrdiť, že väčšina používa posúvanie posuvníkmi, kolieskom myši, prípadne klávesovými šípkami hore a dole. Tento výpis je nevhodný, lebo obťažuje používateľa k prílišnému posúvaniu obsahu, keď sa to dá urobiť aj inak a lepšie.

Zobrazenie staníc vedľa seba s vertikálnym programom – typ 2

Tento typ výpisu programu staníc je typ 1, ktorý nezarovnáva časy v horizontálnych rovinách v snahe vmestiť všetko nad 600 pixlov. Dôvod? Strach, že používateľ neposúva obsah. Dôležité je si uvedomiť, že ak chce používateľ niečo vedome dosiahnuť, tak si obsah posunie. Niekedy sa môže stať, že obsah používateľ neposúva vôbec. Jedná sa o veľmi špecifický typ používateľa.

Výsledkom býva program staníc nečitateľný nielen horizontálne, ale i vertikálne.

Zobrazenie staníc vedľa seba i pod seba s vertikálnym programom – typ 3

Tento typ ide ešte ďalej ako typ 2, a aby sa nemusel obsah posúvať horizontálne, tak jednotlivé stanice vyskladá pod seba, takže získať informácie z 8-mich rôznych staníc v tú istú hodinu (napr. 20.00) dá zabrať. Skúste si to.

TV program - vertikálny program
TV program - vertikálny program

Akákoľvek snaha o inováciu zlyháva, pretože to, čo používateľ chce vedieť, je program v danú hodinu jeho preferovaných televíznych staníc. Ak sa zamyslíme nad zobrazením, čo momentálne beží vo vysielaní, tak zistíme, že zistenie stavu každej stanice je dosť obtiažne v ktoromkoľvek vyššie spomínanom type výpisu.

Horizontálny TV program

Zobrazenie staníc pod seba s časovo zarovnaným horizontálne vypísaným programom – typ 4

Tento výpis počíta s tým, že používateľ si chce pozrieť program v danom čase pre viacej TV staníc a vybrať si, čo bude sledovať. Je teda vhodné, aby v danom čase bolo pri sebe viacej relácií/filmov vysielania zo všetkých z nich. Tento problém z časti rieši len prvý typ spomedzi vyššie spomínaných. Keby sme sa chceli zbaviť horizontálneho posuvníka, buď by sme museli zalomiť text do nevhodne malej šírky. Z tohto pohľadu je lepší typ 4, vypísať popis danej relácie/filmu na väčšiu šírku a na výšku ho obmedziť s tým, že pod sebou bude viacej staníc v ten istý čas.

Premýšľal som, ako takýto TV program vyrobiť tak,

  1. aby to bolo dobre zobraziteľné aj bez CSS,
  2. aby to fungovalo aj bez JS,
  3. aby to bolo sémantické,
  4. aby to bolo flexibilné,
  5. aby to bolo zobraziteľné na displeji akejkoľvek veľkosti.

Hlavná časová os je rozdelená po hodinách, kde každá z nich je rozdelená do päťminútových blokov, do ktorých by sa mali zobrazovať začiatky a konce jednotlivých vysielaných častí. Predpokladám, že žiadne vysielanie nezačína 13.37, ale môže začínať 13.35 alebo 13.40. Presnosť tohto údaju na strane vysielania už neovplyvníme.

Aby bol TV program dobre zobraziteľný aj bez CSS, mal som dve možnosti, ako to urobiť. Buď cez vnorené zoznamy, čo som zavrhol z dôvodu až priliš veľkej náročnosti štýlovania, keď sa to dá urobiť jednoduchšie, alebo pomocou tabuľky s použitím atribútu colspan. Táto verzia je významovo výhodnejšia ako zoznam z jedného prostého dôvodu: televízny program v skutočnosti je tabuľkou. Program jedinej stanice môžeme chápať ako zoznam, ale celý TV program je už tabuľka.

Vráťme sa k časovej osi. Každú hodinu, ako som už vyššie spomínal, som rozdelil na 12 častí po šírke 0.66em. To znamená, že primárnym hodinovým blokom bude:

<th colspan=12>16.00</th>

Ak je vysielaná jednotka dlhá 60 minút, tak použijeme analogicky td:

<td colspan=12>…</td>

Ak vysielané jednotky presahujú jednotlivé hodinové hranice, použije sa atribút colspan s menšou alebo väčšou hodnotou podľa potreby (súčet musí byť deliteľný bezo zvyšku číslom 12):

<td colspan=7>…</td>
<td colspan=17>…</td>

Počítanie je to jednoduché, pretože časovú dĺžku vysielanej jednotky v minútach vieme celočíselne podeliť 5-timi. Dostaneme hodnotu colspan atribútu. Pri zohľadnení začiatku a konca vysielania a ich vpasovania na správne miesta máme vhodný HTML základ pre CSS. Spomínal som, že každá bunka bude široká 0.66em, teda napríklad td s colspan o hodnote 12 bude mať šírku 7.92em. Relatívne jednotky volím v každom rozmere (výška, šírka, veľkosť písma, okraje, …). Práve relatívnosť nám umožní TV program zmenšovať a zväčšovať tak, aby dobre bolo zmenou jednej jedinej hodnoty sfont-size.

Ale naspäť k šírke buniek. V CSS proporcionálne k hodnote 0.66em nastavíme napríklad:

table [colspan=12]{width:7.92em;}

Tento prístup zopakujeme pre všetky hodnoty atribútu colspan, ktoré potrebujeme. Výhodou je konečná množina hodnôt, ktorých zadefinovaním v CSS získame funkčný model. Pre prehliadače, ktoré atribútový selektor nerozpoznajú môžeme použiť triedy. To je v tomto prípade zanedbané. Ešte lepšie by bolo použiť definíciu šírky použitím s hodnotou calc() takto:

table [colspan]{width:calc(attr(colspan) * .66em);}

Čo by odstránilo množenie sa podobných definícií len s inou hodnotou pre šírku. Tento zápis by odčítal obsah atribútu colspan a vynásobil ho hodnotou 0.66em. Výsledok by mal byť totožný s priamou definíciou šírky. Zatiaľ to ale nefunguje ani vo Firefoxe, ktorý síce podporuje zápis -moz-calc().

Vyššie popísané bol teoretický model, ktorý by mal fungovať, no k tomu treba ešte ostatné nastavenia. Poďme si o nich povedať.

HTML pre TV program

Uveďme štruktúru HTML, nad ktorou budeme pracovať:

<table>
	<thead>
		<tr>
			<th></th>
			<th colspan=12>
				17.00
			</td>
			<th colspan=12>
				18.00
			</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>	</th>
			<th colspan="12">
				17.00
			</td>
			<th colspan="12">
				18.00
			</th>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<th>
				STV 1
			</th>
			<td colspan=7>…</td>
			<td colspan=17>…</td>
		</tr>
		<tr>
			<th>
				STV 2
			</th>
			<td colspan=12>…</td>
			<td colspan=12>…</td>
		</tr>
	</tbody>
</table>

Tabuľka bude rozdelená na tri hlavné časti: hlava (thead), päta (tfoot) a telo (tbody). Pätu pri zapnutých štýloch pre zobrazenie na displejoch nezobrazíme pomocou display:none. Zobraziť ju môžeme v prípade tlače, alebo v inej situácii, kde je vhodné ju uvádzať.

Posúvanie TV programu a CSS

Ďalším problémom na vyriešenie je posúvanie celého TV programu. Je možnosť ponechať tabuľku v plnej šírke a nechať používateľa posúvať ju horizontálne. To ale nechceme, preto treba vymyslieť lepšie riešenie, ktoré leží v nastavení tabuľky ako takej pomocou sCSS.

table, table thead, table tbody, table tr, table td, table th {
	display:block;
	position:relative;
}

Vyššie uvedená definícia spôsobí „rozpad“ tabuľky, z ktorej sa stane kôpka blokových elementov padnúcich pod seba. Je to dobrý začiatok (vypnutím CSS sa zobrazí plnohodnotná tabuľka). Ďalej nastavíme hlavu a pätu:

table thead th, table tfoot th {
	display:inline-block;
	float:left;
	padding-top:.26em;
	padding-bottom:.26em;
	font-weight:normal;
}

Bunky budú obtekať okolo seba, takže sa zobrazia do riadku. Definícia float:left použitá kvôli „nalepeniu“ buniek na seba bez zbytočnej medzery však spôsobí, že keď bunka, ktorá sa do aktuálnej šírky nevôjde, sa zalomí na nový riadok. To vyriešime nastavením šírky a pretekania elementu tr:

table tr {
	padding-left:4.6em;
	overflow:hidden;
	width:5000px;
}

Šírka je nastavená na bezpečných 5000 pixlov, ale odporúčal by som to robiť len ako poistku pre tých, ktorí nemajú zapnutý JS. So zapnutým JS sa dá šírka nastavovať dynamicky, ak je to potrebné. Nastavením pravého vnútorného okraju (padding) si pripravíme pôdu pre hlavičky riadkov, ktoré budú obsahovať názvy jednotlivých staníc, keďže tie budú poziciované absolútne. Orezávanie pretečeného obsahu je z praktických dôvodov – kvôli odstráneniu horizontálneho posúvania.

Nevyriešeným problémom ostáva posúvanie obsahu v tabuľke s vypnutým JS, ktorá pretekajúci obsah orezáva. Bez JS by sme sa nepohli, tak musíme vymyslieť niečo funkčné. Jedno z možných je pridať na základné CSS toto:

<noscript>
	<style type="text/css" media="screen">
		table {overflow-x:auto;}
	</style>
</noscript>

Inak povedané, pre tých, ktorí majú vypnutý JS zobrazíme danú tabuľku s TV programom s horizontálnym posuvníkom.

Pre riadky a bunky v tele tabuľky nastavme výšku:

table tbody tr, table tbody td, table tbody th {
	height:4em;
}

Riadkom preto, lebo počítame s pevnou výškou a to znamená, že nebudeme potrebovať prázdny element, ktorý má zadefinované clear:left. Ten by sme potrebovali, ak by sme počítali s rôznou výškou buniek.

Pre názvy TV staníc nastavme:

table tbody th, table thead th:first-of-type, table tfoot th:first-of-type {
	position:absolute;
	top:0;
	left:0;
	width:4.1em;
}

Použitie pseudo triedy :first-of-type je z dôvodu, že ukážku neoptimalizujeme. Keď sa počíta s reálnym nasadením, použije sa trieda. Spomínali sme to vyššie, že názvy staníc budú poziciované absolútne. Ostatné veci sú kozmetické úpravy, ktoré netreba vysvetľovať, a preto ich neuvádzam. Ak bude nutné, dodefinujeme ich neskôr.

Na rad prichádzajú bunky s vlastným výpisom programu staníc:

table tbody td {
	display:inline-block;
	float:left;
}

Je to analogické s nastavením buniek v hlave tabuľky, preto to nebudem vysvetľovať. Vo všeobecnosti pre všetky bunky tabuľky nastavíme:

table td, table th {
	width:.66em;
}

a tým zabezpečíme ich presné lícovanie vo vertikálnych osiach. Problém so šírkou sme popisovali vyššie v tomto článku.

Vďaka orezávaniu obsahu, absolútnym a relatívnym pozíciám môžeme obsah TV programu posúvať pomocou JS týmto spôsobom:

table tbody td:first-of-type, table thead th:nth-of-type(2), table tfoot th:nth-of-type(2) {
	margin-left:-4em;
}

Kalendár pre zobrazenie konkrétneho dňa a hodiny s funkčnými šípkami by mal byť na mieste, ktoré jasne zodpovedá tomuto ovládaniu. Navyše, malo by sa jednať o rovnocenný prvok k celému programu, pretože to bude hlavný spôsob navigácie v ňom. Posun vo vertikálnom smere stačí zabezpečiť posuvníkom aj v prípade zapnutéo JS, pretože ten používatelia poznajú veľmi dobre a sú naň zvyknutí z iných sídiel (babičky samozrejme ešte musíme naučiť posúvať obsah (keď každý naučí tú svoju, máme po probléme :-))).

V hotovej ukážke ma ospravedlňte za absenciu JS, ale nechcel som článok moc naťahovať. Niektoré prvky by si zaslúžili ďalší vývoj, to však treba ponechať na jednotlivých dizajnérskych tímoch.

Popísaná ukážka TV programu »

Horizontálne TV programy (typ 4) na internete

  1. TV program na upc.sk,
  2. tvp.cz (treba prepnúť na zobrazenie "mriežka")
  3. Magio TV

TV program - horizontálny program UPC
TV program - horizontálny program TVP.cz
TV program - horizontálny program Magio

Záhada na záver

Viete niekto vysvetliť absenciu pravej šípky, resp. inú veľkosť pravého trojuholníka v „unikóde“? Hľadal som, no márne. O dôvode, prečo sa tento znak v sade nenachádza, neviem. Trojuholník má tú zaujímavú vlastnosť, že ľavý a pravý majú navzájom rôzne veľkosti. Preto túto „záhadu“ v ukážke TV programu prosím ospravedlňte.

Šípky
Trojuholníky

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

3 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 Daniel Hutňan (fb) 18.1.2011 00:00:00
nechápem
0 0 Erika Novackova (fb) 18.1.2011 00:00:00
stranok s TV programom je dost, keby TV stanice vysielali nieco normalne bolo by ešte lepšie!
0 0 Andy Butkaj (fb) 18.1.2011 00:00:00
black rightwards arrow ➡, http://www.fileformat.info/info/unicode/char/27a1/index.htm - &#10145;
Zajtra.sk > Programovanie > CSS/HTML > TV program na webe: Rôzne prístupy k zobrazeniu rovnakých dát


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