Month: October 2013

Categories
2. Triobo editor

Online objects

Online object may be inserted with the Text box tool, you can drag the page or click (see Objects inserting). A common feature of online objects is that they require the reader to be connected to the Internet because they are offering the most actual content.

Online object setting

Depending on the type you can set the additional properties:

  • Youtube – Enter the video ID on the YouTube.com server – this is a string of letters and numbers and is usually in a video address after the characters ?v=. Example: video at the web page http://www.youtube.com/watch?v=5BZzSoXIDZc has the ID * 5BZzSoXIDZc*. Using the 16:9 and 4:3 buttons you can adjust the frame height so that the side aspect ratio of matches the desired value.

  • Vimeo – enter the video ID on the Vimeo.com server – this is a number with which the video address ends. Example: a video at the address http://vimeo.com/22439234 has the ID 22439234. Using the 16:9 and 4:3 buttons you can adjust the height depending on the desired ratio at given width.

  • Twitter – Enter the Widget id. Widget must be first created at the web page https://twitter.com/settings/widgets. Load a new Widget with the Create new button, to configure everything you need and save. Subsequently the widget-id is displayed in the address bar as a long number. So if you see such address https://twitter.com/settings/widgets/376778312434978817/edit, then the widget-id is 376778312434978817.

  • Facebook – You can display information from your fan pages: enter the address of your site that follows after the http://www.facebook.com/, for example, thus trioboCZ. Mark this box if you want to display beside the information box also header stream of messages (states), icons of your fans. In addition to assumed implementation of light background you can also use the color scheme requiring the dark background – remember that with the online object you can set background color in the same way as with any other object.

  • WWW – you can put any web page in the article. We recommend a simple text page of type m.zive.cz or m.ihned.cz

  • Google Maps – Google maps can be embedded using previous option WWW, however there exists even easier way if you know the coordinates of the place you want to show on maps. Go to https://maps.google.com, find the desired location and click on it with the right mouse button. Select the “What is here?* item – then coordinates are displayed in the search box. Copy and paste them into Triobo. Next select the zoom: 1 is the entire globe, 16 are detailed streets 20 and above is applicable only to high-quality aerial photographs. You may also choose the map type.

Note: We do not recommend to insert more online objects of YouTube and Vimeo types into one article, they may mutually interfere with each other. Do not insert more online Twitter objects into one article, only one of them will be functional.

During online editing of an object a preview will be displayed on the right side. (With the exception of Twitter, which you’ll see once you start the preview of the entire article).

Note: The functionality of online objects depends on the external companies it cannot be guaranteed that all modules will be always working.

We recommend

Remember that on-line objects are dependent on the internet connection. Read how to solve this problem with elegance.

Categories
2. Editor Triobo

Online objekty

Online objekt vložíte nástrojem Text box, můžete použít tažení ve stránce nebo klepnutí (viz Vkládání objektů). Společnou vlastností online objektů je, že vyžadují, aby čtenář byl připojen k internetu, protože nabízejí aktuální obsah.

Nastavení online objektu

V závislosti na typu můžete nastavit další vlastnosti:

  • Youtube – zadejte ID videa na serveru YouTube.com – jedná se řetězec písmen a číslic a bývá v adrese videa zpravidla za znaky ?v=. Příklad: video na stránce http://www.youtube.com/watch?v=5BZzSoXIDZc má identifikátor 5BZzSoXIDZc. Tlačítky 16:9 a 4:3 můžete upravit výšku rámu tak, aby poměr stran odpovídal požadované hodnotě.

  • Vimeo – zadejte ID videa na serveru Vimeo.com – jedná se o číslo, kterým je zakončena adresa videa. Příklad: video na adrese http://vimeo.com/22439234 má identifikátor 22439234. Tlačítky 16:9 a 4:3 upravit výšku v závislosti na požadovaném poměru a dané šířce

  • Twitter – Zadejte widget id. Widget musíte nejdříve vytvořit na webové adrese https://twitter.com/settings/widgets. Založte nový Widget tlačítkem Create new, nakonfigurujte vše potřebné a uložte. Následně se widget-id zobrazí v adresním řádku jako dlouhé číslo. Pokud tedy vidíte např. adresu https://twitter.com/settings/widgets/376778312434978817/edit, pak widget-id je 376778312434978817.

  • Facebook – můžete zobrazovat informace z vaší fanouškovské stránky: zadejte část adresy vaší stránky, která následuje za http://www.facebook.com/, např. tedy trioboCZ. Zaškrtněte, zda chcete zobrazovat kromě informačního boxu také záhlaví, proud zpráv (stavů), ikony vašich fanoušků. Kromě provedení předpokládajícího světlé pozadí můžete také použít barevné schéma předpokládající tmavé pozadí – nezapomeňte, že online objektu můžete nastavit barvu pozadí stejně, jako objektu jakémukoli jinému.

  • WWW – do článku můžete vložit libovolnou internetovou stránku. Doporučujeme například jednoduché textové stránky typu m.zive.cz nebo m.ihned.cz

  • Google Maps – mapy Google můžete vkládat pomocí předchozí volby WWW, nicméně existuje ještě jednodušší způsob, pokud znáte souřadnice místa, které chcete na mapách ukázat. Přejděte na https://maps.google.com, najděte požadované místo a klepněte na něj pravým tlačítkem myši. Zvolte položku „Co je tady?“ – následně se ve vyhledávacím poli objeví souřadnice. Ty zkopírujte a vložte do Triobo. Dále zvolte přiblížení: 1 je celá zeměkoule, 16 jsou detailní ulice, 20 a výš už je použitelné jen pro kvalitní letecké fotografie. Můžete také zvolit typ mapy.

Upozornění: Nedoporučujeme do jednoho článku vkládat více online objektů typu YouTube a Vimeo, mohou se vzájemně rušit. Nevkládejte do jednoho článku více online objektů Twitter, funkční bude vždy pouze jeden z nich.

Během úprav online objektu se vpravo ukazuje náhled. (S výjimkou Twitteru, ten uvidíte až po spuštění náhledu celého článku).

Upozornění: Funkčnost online objektů závisí na externích firmách, nelze zaručit, že všechny moduly budou vždy funkční.

Doporučujeme

Nezapomínejte na to, že on-line objekty jsou závislé na připojení k internetu. Přečtěte si, jak tento problém elegantně vyřešit.

Categories
2. Triobo editor

Colors and their settings

The dialog for color setting appears whenever you set the background color of the object, its margins, font color, etc. Triobo is additionally using the opacity beside the hue, saturation and brightness. In previews opacity is indicated by transparent square grid – in reality the transparent color shows in such way that you can partially see the background beneath the color.

Mixing colors

The dialog for color selection contains three sections. The middle section contains two tabs. Color mixing makes the color selection easier in the HSB color model: you just select the hue value (H = hue) as an angle from 0 to 359 °, saturation (S = saturation) and color brightness (B = brightness), both values from 0-100%. The color spectrum also corresponds to this model: clicking with mouse you select hue (horizontal) and saturation (vertical). The change of brightness (B) will also change the brightness on color spectrum for better indication.

The second tab of Triobo Palette is used for quick selection of 90 preset colors. By clicking the color you immediately select it.

The right section displays two previews at the top: on the left it shows color before changes, the right one displays currently selected color. Then the settings of RGB model are displayed, where you set the brightness in values from 0 to 255 of each light component of color (R = red, G = green, B = blue). The CMYK model is set correspondingly to four printing colors (C = Cyan, M = Magenta, Y = Yellow and K = Black).

The section Web is used for entering of values as used in HTML. You can either specify six characters (equivalent to three two-digit hexadecimal data) or only three of them which will be automatically translated to six characters by duplicating individual characters. (example 75a is overwritten to 7755aa)

The last pull bar sets color opacity. In some cases, this option can be disabled.

All pull bars can be controlled with mouse or by entering their numeric value. If the cursor is in a numeric field, you can change the values with up and down arrows. If you hold down the Alt key, the value will change by 8.

Issue palette

On the left section you find issue palette. If you have already mixed color, you can save it to the palette by pressing the plus button. If you’ve previously selected the color from the palette and edited it, you can save it by pressing Save button. In both cases, a dialog for color name appears. When name colors you can click Automatic button, and color will be renamed according to its values ​​in the RGB color model. (next time when you change the value of automatically set name, the name will be again changed automatically according to its current color)

Up and down arrows change the order of colors, the cross is used to delete a color from the palette. Double-click the color name for immediate use.

Importance of translucent colors

The advantage of translucent colors is that they can be used for effects when you need the object itself to be completely covered, but to show the picture through its background. Typically it may be the black color with 70% opacity as a text box background with otherwise white letters. While the white letters (use 255, 255, 255, 100% color) will entirely cover the background and will be contrasting, the black color will only darken the picture behind the object.

Example of translucent color

Categories
2. Editor Triobo

Barvy a jejich nastavení

Dialog pro nastavení barvy se objeví kdykoli budete nastavovat barvu pozadí objektu, jeho okraje, barvu písma apod. Triobo používá vedle odstínu (hue), sytosti (saturation) a jasu (brightness) barvy také průhlednost (opacity). Tato průhlednost je naznačena v náhledech prosvítající čtvercovou mřížkou – reálně se pak průhlednost barvy projeví tak, že pod barvou je částečně vidět pozadí.

Mixování barev

Dialog pro volbu barvy obsahuje tři části. Prostřední část obsahuje dvě záložky. Míchání barev usnadňuje volbu barvy v barevném modelu HSB: volíte tedy odstín (H = hue) jako úhel od 0 do 359°, sytost (S = saturation) a jas (B = brightness) barvy, obojí od 0 do 100 %. Tomuto modelu odpovídá také spektrum barev v horní části: klepnutím myši zvolíte odstín (vodorovně) a sytost (svisle). Změna jasu (B) změní také jas spektra pro větší názornost.

Druhá záložka Paleta Triobo slouží k rychlé volbě 90 přednastavených barev. Poklepáním barvu ihned použijete.

Pravá část zobrazuje nahoře dvojicí náhledů: levý zobrazuje barvu tak, jak vypadala před změnami, pravý aktuálně vybranou barvu. Následuje nastavení modelu RGB, kde nastavujete v hodnotách od 0 do 255 jas jednotlivých barevných složek světla (R = red, červená, G = green, zelená, B = blue, modrá). Model CMYK je nastavení odpovídající čtyřem tiskovým barvám (C = Cyan, azurová, M = Magenta, purpurová, Y = Yellow, žlutá a K = Black, černá).

Pole Web slouží k zadání hodnot tak, jak se používají v HTML. Můžete zadat buď šestici znaků (odpovídá třem dvouciferným hexadecimálním údajům), nebo jen trojici, která bude automaticky doplněna na šest znaků zdvojením jednotlivých částí. (Např. 75a se přepíše na 7755aa.)

Poslední táhlo nastavuje průhlednost barvy. V některých případech může být tato volba neaktivní.

Všechna táhla jde ovládat buď myší, nebo zadáním číselné hodnoty. Pokud máte kurzor v číselném poli, můžete šipkami nahoru a dolů hodnotu měnit. Pokud podržíte klávesu Alt, budou se hodnoty měnit o 8.

Paleta vydání

Vlevo se nachází paleta vydání. Pokud máte namíchánu požadovanou barvu, můžete si ji do palety uložit stiskem ikony plus. Jestliže už jste předtím vybrali barvu z palety a upravili ji, můžete ji uložit stiskem ikony Uložit. V obou případech se objeví dialog pro pojmenování. Při pojmenovávání barvy můžete klepnout na tlačítko Automaticky a barva bude pojmenována podle svých hodnot v barevném modelu RGB. (Pokud napříště změníte hodnotu s automaticky pojmenovaným názvem, bude název opět automaticky změněn podle aktuální barvy)

Šipkami nahoru a dolů měníte pořadí barev, křížek slouží k smazání barvy z palety. Poklepání na název barvy v paletě ji ihned použijete.

Význam průsvitných barev

Průsvitné barvy můžete s výhodou použít na efekty, kdy potřebujete, aby objekt samotný byl zcela krycí, ale skrz jeho pozadí například prosvítal podklad. Typicky to může být černá s 70 % krytím, kterou použijete jako pozadí textového boxu s jinak bílým písmem. Zatímco bílé písmo (kde použijete barvu 255, 255, 255, 100 %) bude zcela překrývat pozadí a bude kontrastní, černá barva pouze ztmaví fotografii pod objektem.

Příklad průhledné barvy

Categories
2. Triobo editor

Lock the digital edition, issue information

When you click the icon Properties issue in the list of issues, you will see the issue release information and options for working with the issue.

The distribution of server publishing is described in the article Edition publishing.

In the upper right corner next to the issue name is the Delete Issue key. Caution – This will delete the entire issue from the Triobo system, all articles and resources will be deleted then. If the issue has beeb published, it will be removed first from the distribution server.

This action cannot be undone therefore before deleting them there is one more safeguard: you must write in the DELETE to the button, otherwise the delete option will not happen at all.

Do you really want to delete?

Using the button you may display a detailed analysis of an issue: you will see how many sources each article has (images, videos, sounds). If the issue has been published, you will also see how big is the actual description of the page (HTML5).

The button can lock the entire issue. In locked issue all the articles (or their layout) are considered to be locked, i.e. in reality only objects may be copied from them. Article layout cannot be unlocked, you must first unlock the whole issue.

Categories
2. Editor Triobo

Zamknutí digitálního vydání, informace o vydání

Pokud v seznamu vydání klepnete na ikonu Vlastnosti vydání, objeví se vám informace o vydání a další možnosti pro práci s vydáním.

Publikování na distribuční server je popsáno v článku Publikování vydání.

V pravém horním rohu vedle názvu vydání je tlačítko Delete Issue. Pozor – tímto odstraníte celé vydání ze systému Triobo, budou smazány všechny články a jejich zdroje. Pokud bylo vydání publikováno, bude z distribučního serveru nejdříve odebráno.

Tuto akci není možné vzít zpět, proto před vymazáním je ještě jedna pojistka: musíte vypsat tlačítko DELETE, jinak se volba pro smazání vůbec neobjeví.

Opravdu chcete smazat?

Pomocí tlačítka můžete zobrazit detailní rozbor vydání: uvidíte, kolik má který článek zdrojů (obrázky, videa, zvuky). Pokud bylo vydání publikováno, uvidíte také, jak velký je samotný popis stránky (HTML5).

Tlačítkem můžete zamknout celé vydání. V zamknutém vydání jsou všechny články (resp. jejich rozvržení) považovány za zamčené, tzn. reálně z nich lze pouze kopírovat objekty. Rozvržení článku nelze odemknout, je nutné nejdříve odemknout celé vydání.

Categories
2. Triobo editor

Embedded code HTML5 (iframe)

Publishing editor Triobo can handle embedded code in HTML5, see HTML object. If you know how to create such simple HTML5 animations, forms, or even games, nothing prevents you from using them on the page of magazine for tablet edition. Remember that the Apple iPad is using the WebKit rendering engine (like Safari or Chrome on your computer), thus observe the required syntax. Any sources that you refer to HTML code will be available in the same imaginary tablet folder, therefore do not enter any pathways there!

Simple example of a rotating logo.

Suppose you have an image named logo.png with dimensions of 180 x 80 px. Create the following HTML code in the folder with the article source on your computer:

<html>
  <head>
    <title>iframe</title>
      <style>
        body {margin:0;padding:0;}
        #plocha{
          display:block;
          width:200px;
          height:120px;
          overflow:hidden;
          -webkit-perspective: 300;
          -webkit-perspective-origin: 100px 75px;
        }
        #logo{
          position: relative;
          top: 20px;
          margin: 0 auto;
          height: 80px;
          width: 180px; 
          background: #ddd url(logo.png) no-repeat; /* do not enter any pathways nor slashes! */
          -webkit-transform-style: preserve-3d;
          -webkit-animation: spin 8s infinite linear;
        }
        @-webkit-keyframes spin {
          from { -webkit-transform: rotateY(0); }
          to   { -webkit-transform: rotateY(-360deg); }
        }
    </style>
  </head>
  <body>
    <div id="plocha"><div id="logo"></div></div>
  </body>
</html>
Categories
2. Editor Triobo

Vložený kód HTML5 (iframe)

Publikační řešení Triobo umí pracovat s vnořeným kódem v HTML5, viz HTML objekt. Pokud umíte v HTML5 vytvářet například jednoduché animace, formuláře, nebo dokonce hry, nic vám nebrání použít je na stránce časopisu pro tabletové vydaní. Pamatujte, že Apple iPad používá vykreslovací jádro WebKit (stejně jako Safari nebo Chrome na vašem počítači), dodržte tedy požadovanou syntaxi. Jakékoli zdroje, které odkážete v kódu HTML, budou dostupné ve stejné pomyslné složce v tabletu, nezadávejte tedy žádné cesty!

Jednoduchá ukázka rotujícího loga.

Předpokládejme, že máte k dispozici obrázek s názvem logo.png o rozměrech 180 x 80 px. Založte ve složce se zdroji článku u sebe na počítači následující kód HTML:

<html>
  <head>
    <title>iframe</title>
      <style>
        body {margin:0;padding:0;}
        #plocha{
          display:block;
          width:200px;
          height:120px;
          overflow:hidden;
          -webkit-perspective: 300;
          -webkit-perspective-origin: 100px 75px;
        }
        #logo{
          position: relative;
          top: 20px;
          margin: 0 auto;
          height: 80px;
          width: 180px; 
          background: #ddd url(logo.png) no-repeat; /* nezadávejte žádné cesty, ani lomítko! */
          -webkit-transform-style: preserve-3d;
          -webkit-animation: spin 8s infinite linear;
        }
        @-webkit-keyframes spin {
          from { -webkit-transform: rotateY(0); }
          to   { -webkit-transform: rotateY(-360deg); }
        }
    </style>
  </head>
  <body>
    <div id="plocha"><div id="logo"></div></div>
  </body>
</html>
Categories
2. Triobo editor

Issue publishing

It is required to publish your publication on the distribution server so that it is accessible to all reading devices. Each publication can be published in several “channels”, and thus accessible to different readers. At this moment we support three public channels and web:

  • iOS – your publication will be available to readers who are running the application on Apple iPad tablets or Apple iPhone smart phones
  • Android – your publications will also be available on devices running Android operating system, which meets the minimal requirements for running the Triobo reader
  • Amazon Kindle – your publication will be available to readers with Amazon Kindle
  • Webview – web preview of tablet publication, on your own internet domain

The fifth independent channel is the editing reader Triobo Reader. In that you need to enter your login information. Right here you can test that your publication looks exactly as you desire.

How to publish an issue

On the list of issues, click the icon Issue attribute. You will find basic information about the issue. Firstly, instead of an envelope there will be only the question mark icon, as the issue has not been yet released and thumbnails of individual pages were not generated:

In the upper part of a dialog you may choose whether the first page of your issue cover will be automatically generated during publishing (overview of issues in your Reader), or if you want to upload your own cover page in PNG format. If you select “custom cover” using drag and drop mode for working with files in PNG format (required) drop it into the frame box on the left.

The bottom part of the dialog contains switchable tabs: The first one is called Triobo Reader – this is the distribution channel to the Triobo Reader. Here you will publish your unfinished publications. You can also select a quick publication preview with no image optimizations. The second tab is called Public channels – here you will publish your finished publications. The third tab is called Webview – here your web content will be published (when you have agreed with web publishing). Each tab contains a color that immediately indicates the state.

Issue properties

  • Not published – (red color). There is a Publish button available. When pressed, the entire issue of your publications will be generated. Remember that in Triobo Reader the content will be visible only to those users who have the right to see the given publication. For public reading devices you must first select in which channels will be the issue visible (iOS, Android …).
  • Published, no changes in articles – (green color). It has been published but no changes were made to the articles. There is an Update button available which makes the update (even though there are no article changes, for example you may publish a revised description of an issue) or in the case of public reading devices to change the selection of channel iOS, Android …) and an Unpublish button for issue removing.
  • Published, ready to update X articles – (orange color) the issue has been published, but X articles were changed. With the Update button you may publish these changed articles. Press the Unpublish button to remove the issue again.

After pressing the Publish, Update or Un publish buttons wait until the the entire action is accomplished. You will be informed about the status and estimated time period during publishing and updating. It takes about one minute to publish an ordinary issue.

Categories
2. Editor Triobo

Publikování vydání

Aby byla vaše publikace dostupná ve čtečkách, je zapotřebí ji publikovat na distribuční server. Každá publikace může být zveřejněna v několika „kanálech“, a tedy dostupná různým čtenářům. V tuto chvíli podporujeme tři veřejné kanály a web:

  • iOS – vaše publikace bude dostupná čtenářům používajícím aplikaci na tabletech Apple iPad nebo telefonech Apple iPhone
  • Android – vaše publikace bude dostupná na zařízeních s operačním systémem Android, která splňují minimální požadavky pro běh čtečky Triobo
  • Amazon Kindle – vaše publikace bude dostupná čtenářům s tabletem Amazon Kindle
  • Webview – webový náhled tabletové publikace, na vaší doméně

Pátým, zcela samostatným kanálem je vydavatelská čtečka Triobo Reader. V té je zapotřebí zadat vaše přihlašovací údaje. Právě zde si můžete vyzkoušet, že vaše publikace vypadá přesně tak, jak požadujete.

Jak vypublikovat vydání

V seznamu vydání klepněte na ikonu Vlastnosti vydání. Dozvíte se základní informace o vydání. Poprvé zde bude místo obálky pouze ikona otazníku, neboť vydání dosud nebylo vydáno a nebyly vygenerovány náhledy jednotlivých stránek.

V horní části dialogu si můžete vybrat, zda se při publikování má použít (pro přehled vydání ve čtečce) automaticky vygenerovaná obálka z první strany vašeho vydání, nebo zda chcete nahrát obálku vlastní ve formátu PNG. Pokud vyberete možnost “vlastní obálka”, pomocí přetažení myší soubor ve formátu PNG (nutné) přetáhněte do rámečku vlevo.

Spodní část dialogu obsahuje přepínací záložky: První má název Triobo Reader – jedná se distribuční kanál do čtečky Triobo Reader. Sem budete publikovat svoje rozpracované publikace. Můžete zvolit rychlé publikování bez optimalizací. Druhá má název Public channels – sem budete publikovat hotová vydání. Třetí záložka má název Webview – zde se publikuje obsah pro web (pokud máte publikování pro web sjednáno). Každá záložka obsahuje barvu, která ihned signalizuje stav.

Velmi doporučujeme před prvním publikováním do veřejných čteček alespoň jednou vyzkoušet publikování do Triobo Readeru včetně optimalizací

Vlastnoti vydání

  • Not published – Není publikováno (červená barva). K dispozici je tlačítko Publish. Po jeho stisku bude vygenerováno celé vydání vaší publikace. Nezapomeňte, že v Triobo Readeru uvidí obsah jen ti uživatelé, kteří mají pro danou publikaci nastaveno právo ji vidět. Pro veřejné čtečky musíte nejdříve zvolit, v kterých kanálech bude vydání viditelné (iOS, Android…)
  • Published, no changes in articles (zelená barva) – Je publikováno a nebyly provedeny žádné změny ve článcích. K dispozici je tlačítko Update, které vyvolá aktualizaci (přestože nejsou změny ve článcích, můžete publikovat například změněný popis vydání, nebo v případě veřejných čteček výběr kanálů iOS, Android) a tlačítko Unpublish pro odebrání vydání z distribučního kanálu Triobo Reader
  • Published, ready to update X articles (oranžová barva) – Vydání je publikováno, ale bylo změněno X článků. Tlačítkem Update vydáte tyto změněné články. Tlačítkem Unpublish můžete vydání opět odebrat.

Po stisknutí tlačítka Publish, Update nebo Unpublish vyčkejte, až bude provedena celá akce. Během publikování a aktualizování budete informování o stavu a odhadovaném čase. Vydat běžné vydání trvá běžně okolo pěti minut (podle počtu zdrojů, zejména fotografií).