Tag: how to do

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. Triobo editor

How to make a button with e-shop link

Follow these steps if you want to direct readers straight into your internet shop:

  1. Create a text object. Set the following internal margins 8 px from all sides. Use a light border color on the top and left, and dark on the right and bottom border, set a background color, make the Border radius e.g. 12 px. A rounded 3D button was created.
  2. Write in the BUY NOW text. Click on the icon to add a new image, set the dimensions to 40 x 40 px, select left wrapping, set right margins to 8 px, use a shopping cart image.
  3. Finish text box editing (by clicking off the page), but select it as On tap item again, enter the address to your internet shop: e.g. http://www.mystore.cz/goods.php?ID=123456

Categories
2. Triobo editor

Gallery of unpublished images

Certainly you have articles in your journal where you have left a lot of pictures that did not get to the final edition. If you do not want to think where you have put them all, follow these steps:

  1. Create an image object, place it to the desired place, use it as a source of some images. Mark the icon Gallery where you require placing photos to the gallery.
  2. Place a text box that says „Click for more photos“ near the object image
  3. Create a new image object outside of the page, for example with size of 32 x 32 pixels – the size does not really matter. As a source, use of one of the other images, and use the icon Gallery again.
  4. Duplicate this image with Duplicate button, slide it aside with mouse (still outside of the page), replace the source and repeat again for all additional photos.
  5. You may make the last step much faster with shortcut keys:
    • Ctrl + Shift + D (duplicate)
    • 3x Alt + right arrow, 1x Alt + down arrow (shift by 24 pixels to the right and by 8 down)
    • Ctrl + D (select source)

To save the article, press Preview icon (Preview) and test how the gallery works: your computer may simulate finger moves by dragging the mouse with mouse button pressed down.

Categories
2. Triobo editor

Large scrolling table

While the paper magazine often struggles with a lack of space, the scrolling content can be used on tablets: the reader will move one larger object. This is helpful with tables where we recommend the following procedure:

  1. Save the table as an image in double the resolution than what you plan to use your table for (because of the Retina displays)
  2. Lets assume that the table is very wide. Then cut off the entire first column from it, which consists of row names that will be always visible, and name this file e.g. tabLeft.png. Name the rest of the table as tabData.png
  3. Create a picture frame, place an image tabLeft.png inside of it and use the vertical stretching. Depending on how high you want the table to be, set the frame height, snap the right frame to edge so that the image fills the frame correctly (you can use the Fit button)
  4. Copy the object by using the Duplicate button (or use the keyboard shortcut Ctrl + Shift + D) and then with Shift key drag to the right so that it lies just to the right side of the first column of the table.
  5. For new object, use the source tabData.png. Spread the object to width to fit into the entire picture frame – never mind that you have left the blank page area here.
  6. Now click on the button Group to create a group – new object is then grouped with a picture tabData.png to one group.
  7. Set the group so it has to scroll in horizontal direction.
  8. Decrease the frame width so that it will fit into the page.

Save the article and test its functionality by clicking Preview button. When you simulate the finger dragging (click the left mouse key, hold it down and drag the cursor to left) on the table body, you will see that the table body moves, while the first column is still completely visible.

Categories
2. Triobo editor

Controll of variable objects

First, create a variable object. Then draw the first button – as a text frame. Set the action On tap to switching the variable object to state number 1.

Duplicate button, slide it aside (use keyboard shortcuts Alt + arrow), change the text and change the On tap action. In similar way you may create all buttons:

Categories
2. Triobo editor

Templates, layout, typesetting

Editor Triobo can simply copy articles not only within the same issue, but also between publications as well. When copying between publications Triobo behaves intelligently and transfers only new colors and new styles, old styles or colors will merge with final edition. This can be also elegantly used for creation of templates.

So, before you start preparing your magazine or other publication, you may start with article, which mostly represents all others. Start with magazine that is typically the main topic, with longest article that is full of other features, such as charts, tables, etc.

But first create a special edition that will never be published and name it for example Templates. Set the release date to 31/12/2999, so it will definitely be always at the end of the list and will be never published. In this edition create a article and name it “cover story” for example.

Prepare such article very faithfully, start with main text: prepare a long box and paste text across the packet (preferably with no formatting). You need not to insert it all, because this is only a template, so you need only the first few paragraphs (but with all the typical elements such as subtitles or author’s signature at the end of the article).

Styles

Set the default paragraph format (double-click a text box in the Paragraph Style and double click the No style). Choose script font, which can be most frequently found in the magazine (so called bread font). Define (using New Style button) other styles, such as indented text, subtitles, perex, the main title. Choose short descriptive names.

Take advantage of the possibility that the first ten styles can be controlled with keyboard, therefore name the most common styles by number at the beginning (they will be then sorted according to the desired position). For example, we recommend the following:

  • No style – always the first one is controlled by the keyboard shortcut Alt +0 (on the numeric keyboard)
  • 1.offset– text with indented first line, typically the square size, i.e. line spacing
  • 2.intert – inter-title in the main text
  • 3.box-txt – common text in information box
  • 4.box-ind – indented text in box
  • 5.box-title – box title
  • 6.capt – image caption
  • 7.autor – author name line
  • Heading – main heading of the article
  • Perex – perex article

In this case, you still have free styles for Alt+8 and Alt+9, the less frequently used styles (only one-time use) such as Title or Perex do not need a keyboard shortcut.

Other components

Continue with your first article by creation the box for heading, perex, main image. Place a page header or footer. In tablet magazines it is not common to number pages.

Create and possibly group other objects, such as picture with the image caption or “claim” – short trailer mostly written in large letters completely outside of the main text flow.

Create also such elements that are not present in the current article, but you will need them in the future: for example various boxes (single-column, multi-column, with image, with icon…) – these objects can be placed outside of the page.

Instead of the actual images we recommend you use only one substitute, name it for example 000.jpg (three zeros), thus it will always be placed at the beginning. Later, it will be quickly deleted from articles that are created as a copy of the template.

Work with templates

You can make more templates: just copy already created article and rename it, for example, to “Second topic” and make appropriate adjustments (smaller title, smaller image …). This work is more time consuming, but it will save you a lot of work in the future and thanks to correct template preparation you can reformat the entire magazine within a few hours from publication format to Triobo editor.

Preparing article typesetting

If you have prepared templates for different types of articles, leave Triobo editor for a while and prepare a folder where you gather all resources.

For each issue create a new folder and for each article subfolder. Save all necessary resources here, such as images, videos, HTML5 codes…

Use a simple source names to avoid confusion, the names should not contain blanks or Czech characters. Make sure the files has correct extensions especially on computers with OSX – for example an image with no jpg. extension will not be used correctly later.

Now adjust images to the correct size, you can use for example macros in your graphics editor. Adjust images that you will display to double the resolution before using them. For example, you want to place the logo of your company in the article, you expect that it will be 300 pixels wide but you need to adjust the size to 600 pixels wide: the reason is the third-generation of iPad with Retina display that displays all images at twice the resolution.

If you anticipate that you will use automatic gallery for viewing photos, edit the photos up to 1536 x 2048 – again, twice the resolution of current iPad and this resolution is recommended because of new iPads.

Note: Images can of course be both smaller and larger – in the first case, readers can experience worse quality, in the second case you will consequently transmit more data.

Article typesetting

From the publication Template copy all required article into the current issue, go to issue and open this article. Open any image (by double click). Place the Explorer window (the Finder on OS X computers) so that you can simply drag all article sources: in Explorer window, select all of them (Ctrl + A) and drag it into the Triobo editor window with sources (Sources). Images and other sources upload depends of course on the speed of your Internet connection and the size of sources. Wait until all sources are loaded (image preview will appear within a few seconds).

Now adjust article objects that were uploaded from template – substitute the original image000.jpg with your correct sources. image000.jpg can be then completely deleted from sources. Once the article is ready, do not forget also to delete objects around the page, because it is appropriate for the final article appearance to achieve the smallest amount of transmitted data.

Categories
2. Triobo editor

Variable object – pictures with captions

Variable object may be an interesting element to the reader, because you may choose what information is visible by yourself.

  1. First, using tool Image draw the image frame and select its source.
  2. Draw the text frame using Text tool, write the image caption and format it properly.
  3. Once you are happy with the look, group image with text using Group button (or Ctrl + Shift + G)
  4. Only then click the button Group for setting of variable objects
  5. Now click the button for the situation duplication of variable objects. A new state “State 2” is immediately created and labeled.
  6. Double-click the variable object and then once again to open a group with objects.
  7. Highlight the image and select another source.
  8. Double-click the text label and change it. You can also choose a different location.
  9. Do not forget to see variable object setting