Tag: IFRAME

Řekněme, že díky Triobo máte webovou čtečku své digitální publikace a chcete jí udělat promo na jiném webu.

Můžete k tomu využít IFRAME a zobrazit plnohodnotnou webovou čtečku na jiné adrese jako součást jiných stránek, jak jsme podrobněji popsali v jiném článku. Tato varianta IFRAME čtečky se hodí více pro bezplatné publikace, protože placené stránky překryje šrafováním.

Druhou možnost představuje triviálnější IFRAME čtečka, která nabídne jednoduché prolistování konkrétního vydání/publikace na jiném webu. Stránky jsou menší a nejsou překryty šrafováním. Zároveň pracujeme s méně kvalitním (nečitelným) náhledem, aby nemohlo dojít ke zneužití u placených médií.

Výsledek může vypadat třeba takto:

Odpovídající plnohodnotná webová čtečka přitom stále běží na samostatné adrese.

Jak na to

Opět využijeme IFRAME (tedy krátký HTML kód, který vložíte do jiné webové stránky) a novou sadu parametrů, která je použitelná pro publikace založené na PDF. Ukázka výše používá následující kód:

<iframe src="https://info.eduard.com/en?action=newestissue&embed=1&arrows=1&bg=ddd&color=d00&title=i&applinks=1&weblink=1&barbg=d00&barcolor=fff&bottomweblink=Otev%C5%99%C3%ADt%20v%20nov%C3%A9m%20okn%C4%9B#" scrolling="no" style="width:650px;height:480px;"></iframe>

Rozeberme si jednotlivé parametry. Podle potřeby je můžete ubírat (resp. není třeba použít všechny) a lze tak nastavit design “listovačky” podle vašeho přání.

info.eduard.com/en – adresa vaší plnohodnotné webové čtečky Triobo. Pokud použijete parametr “action” (viz další bod), uveďte jen domovskou adresu. Pokud parametr “action” nepoužijete, vložte URL na konkrétní vydání nebo přímo na konkrétní stranu.

action=newestissue – díky tomuto parametru se zobrazí vždy nejaktuálnější vydání

embed=1 – klíčový parametr, který čtečce říká, že má publikaci zobrazit v triviální listovací podobě, pouze s malými náhledy atd.

arrows=1 – pokud je tento parametr přítomný, zobrazí se po stranách magazínu šipky pro listování. Pozn.: listovat lze i bez šipek, prostým klikáním na jednotlivé strany.

bg=xxx – díky tomuto parametru si můžete nastavit barvu pozadí. Barva se zadává v hexa zápisu obvyklém v HTML, např. ddd nebo ff8800, vždy bez # na začátku.

color=xxx – barva šipek, opět v hexa zápisu obvyklém na webu, bez # na začátku.

title=x – místo “x” použijte jednu z uvedených variant: “i” pro název vydání, “p” pro název publikace, “pi” název publikace i vydání. Nebo můžete vložit libovolný text. Ovšem pozor, nestačí jej napsat jednoduše, je třeba jej zakódovat, například pomocí služby https://www.urlencoder.org. Pak např. místo “Nejnovější vydání” získáte “Nejnov%C4%9Bj%C5%A1%C3%AD%20vyd%C3%A1n%C3%AD” a to můžete v parametru použít.

applinks=1 – zda se ukazují ikony pro stažení vaší mobilní aplikace (nakousnuté jablko, android)

weblink=1 – zda se ukazuje ikona pro otevření plnohodnotné webové čtečky v novém okně prohlížeče

bottomweblink= – můžete si ještě nastavit vlastní textový odkaz pod publikací. Text musíte nejprve zakódovat, například pomocí služby https://www.urlencoder.org. Příklad: místo “Otevřít v novém okně” získáte “Otev%C5%99%C3%ADt%20v%20nov%C3%A9m%20okn%C4%9B” a to lze v parametru použít.

Pokud je nastaven parametr title nebo applinks nebo weblink (alespoň jeden z nich), zobrazuje se nahoře pruh záhlaví, který lze obarvit:

barbg=xxx – barva pozadí pruhu, opět v hexa ve webovém standardu bez # na začátku.

barcolor=xxx – barva textu v pruhu

Velikost okna (v pixelech) upravujete zde: style=”width:650px;height:480px;”.

Tip: pod okno s IFRAME listovačkou si nezapomeňte dát odkazy do eshopu s možnosti nakoupit předplatné nebo konkrétní digitální (a/nebo tištěné) tituly.

Kvalita náhledů

Vydavatel se může rozhodnout pro použití náhledů jednotlivých stránek ve vyšší kvalitě – ovšem s tím rizikem, že takové stránky již jsou na hraně běžné čitelnosti a tedy hrozí riziko zneužití u placených titulů. Z bezpečnostních důvodů tato volba podléhá autorizaci ze strany Triobo, je třeba o ni požádat.

Pozn.: Tato možnost je dostupná jen pro tituly, které vznikly importem z PDF souborů.

Statistiky

I tato zjednodušená verze čtečky pro marketingové účely pracuje s vašimi statistikami Google Analytics, máte tedy přehled o využití.

Ukázka odkazu na konkrétní stranu magazínu

Ukázka, kde chybí parametr “action” a nezobrazujeme šipky pro listování.

<iframe src="https://kiosek.epublishing.cz/tajemstvi-vesmiru/7-8-2019/strana-12?embed=1&bg=000&title=pi&applinks=1&weblink=1&barbg=404&barcolor=ddd" style="width:650px;height:480px;" scrolling="no"></iframe>

Lze použít i pro originální digitální sazbu

Nemusíte pracovat jen s publikacemi založenými na PDF, listovačka zvládne (v náhledech) i publikace tvořené s originálním layoutem pro digitální prostředí, které obsahují animace, interaktivitu apod.

Bonus pro pokročilé – “plně responzivní IFRAME”

Pro ideální přizpůsobení IFRAME listovačky aktuální velikosti okna prohlížeče (viz typicky rozdíl mezi velkým monitorem a displejem telefonu), je dobré zajistit takovou responzivitu, aby se IFRAME zmenšoval při zachování poměru jeho stran. Postup následuje:

Nejdřív je třeba nadefinovat styl pro “box” a trikem přes “padding-bottom” vykreslit obdélník 100 % široký a v požadovaném poměru vysoký. Následně se IFRAME umístí dovnitř s absolutní pozicí 0, 0 a rozměry 100% x 100%.

Odpovídající kus kódu:

<style>
.box {
position: relative;
width: 100%;
padding-bottom: 75%; /* tato hodnota určuje poměr, 4:3 = 75%, 3:2 = 66%, 16:9 = 56.25% */
}
.box iframe {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
</style>


Do HTML kódu stránky pak použijete tuto konstrukci

<div class='box'><iframe src='xxxxxx'></iframe></div>