One of the publication types you can create with Opus Pro is HTML5 which allow you to take advantage of this new, and more sophisticated, version of HTML for more interesting and effective web pages.
Publications of this type can be published as single pages, as a connected series of pages or as an element to go into a section of an existing page (for example in a <DIV>).
In all cases the output will only be displayed properly if the visitor’s browser is compatible with HTML5 which most modern browsers now are. (Opus output automatically includes a test to display a message and image if HTML5 is not supported).
As Mac, iPad and Android browsers support HTML5 this is a great way to provide material for those technologies as well as PC systems. Like any web page, HTML5 can also be displayed locally – it does not have to be viewed across an internet connection.
Note about Automatic Playback of Audio and Video
At the current time several browsers, including Chrome, actively prevent audio and video being played automatically when on mobile devices. This is to prevent extensive data usage without the user’s permission. This means audio and video can only be started by user interaction and will not play via timelines or On Show triggers. The limitation does not apply to HTML5 installed as Android apps using the APK packager.
This is currently under review buy Google and others so please check our website for further updates or follow the technical discussions on Chrome development online.
HTML5 is a very different format to standard Opus publications so it is represented as a different publication type.
To create an HTML5 publication, simply select the HTML5 option in the Startup Wizard that appears whenever you want to create a new publication. Alternatively you can go to the Type tab on Publication Properties although we recommend you do this as early as possible in the development process as problems may arise (see below).
When you decide to create an HTML5 publication, certain functions and features in the Opus Pro environment are disabled or hidden. That means they are greyed-out on the screen or do not appear as options that you can normally select from the Triggers or Actions tabs in the Actions dialog. For example, the DocView tool is greyed-out on the Tools toolbar and the right-mouse click triggers are hidden in the Triggers tab of the Actions dialog.
You can convert existing publications to HTML5 publications by switching the publication type via the Type tab on Publication Properties from the Publication menu. However, some features of other publication types may not be supported and it is possible you have already used a feature which is not available which means it will appear to work when previewed but will not when finally published. Therefore we always recommend you begin working in the HTML5 publication type.
If you are upgrading publications made in earlier versions of Opus you may prefer to start with a fresh publication and either rebuild using the existing resources or copy and paste material into the new format and test as you go to ensure that the conversion works as expected.
As with any multimedia publications you create, you should plan your project before you start. This is particularly true when creating an HTML5 publication and this should include whether you are planning to produce a web page or an element to go in the section (or DIV) of another web page.
Important Note
Most importantly you should test your published file regularly in a browser not simply preview it. Opus Preview is an approximation of the final publication and should not be seen as a definitive test of HTML5. Publish the file and view it in as many different browsers as possible both locally and online where connection speeds may have an impact.
If something is a key part of your HTML5 publication test that with a simple prototype first. There’s nothing more frustrating than building a finished, polished publication only to find something doesn’t quite work the way you thought it did.
The HTML5 export from Opus Pro includes some powerful and sophisticated features such as timelines, multiframes and tween animation which are not directly supported by HTML5 and add an extra dimension to your website.
However, it is worth noting that while these features are supported individually, they may not be successful in combinations, or they may more control of the order in which they occur than in a standard Opus publication.
Using a timeline to show and hide complex animations on a multiframe while playing multiple audio files and playing an overlapping video may not export successfully to HTML5 for example.
Remember that there are usually several ways to achieve a desired activity in Opus so test your ideas regularly in as many browsers as you can and try an alternative if one combination of features does not succeed.
OpusScirpt is an extended version of javascript but it is designed for desktop use and some functions are not supported in HTML5 or may produce different results. In addition the Javascript Action allows you to run any javascript which may not be covered.
The HTM file created by Opus is a standard text file so you can edit it in a text editor. If you understand HTML you can amend or add to the standard HTML elements of the file – though obviously you should not attempt to change the Opus content itself.
Opus checks to see if the visitor has a browser which is compatible with HTML5 and brings up a message if this is not the case. You can edit this message using a text editor. For example, you may wish to add a link to an alternate page or redirect to a page with a Flash version of your publication on.
The section which includes the message is clearly separated towards the top of the HTM file.
The lack of HTML5 support will trigger the display of a special DIV labelled __NoHTML5. You will notice that this contains an option to display a fallback image for users who do not see the active content. The image is called NoHTML5fallback.jpg by default but you can change this by editing the HTM in a text editor or you can replace our fallback.jpg with your own. In many cases you will want to create a screenshot or replacement image which gives some indication of the content This should then be uploaded in place of the default fallback.jpg image.
Also note that the default output from Opus contains a sentence allowing you to set up a link to allow the user to move to another page. This is for users with some understanding of HTML. For obvious reasons this will be specific to your requirements so has been commented out. You will need to remove the commenting marks (<!—at the beginning and the --> at the end) and then put your own url in the href section.
One of the limitations of HTML is the restrictions on designing text because of the lack of consistent fonts. Opus solves this with a number of ways to use different fonts.
The text which appears on websites will be displayed using the fonts you have on your system unless they are converted to graphics (rendered) or use a technology called webfonts. Opus allows you full control over this via the Web Font Manager which means your website can really look its best.. But it does mean you may have to organise fonts in advance of creating the HTML. See Using Web Fonts
HTML5 can have several different "types" of text depending on the use of the text. The most important distinction is between static and dynamic text (see below). Where you want text to be dynamic you should not use a font which is set to be rendered.
When Opus exports to HTML5 it can treat text in two ways:
Dynamic – it can be changed while the page is displayed
Static – the text is fixed and cannot be changed.
This means that any text which contains variables should be set to be dynamic.
These options can be set in the Text Mode panel on the Text tab of the Properties for the object concerned. Opus will attempt to assign the text mode automatically using the Auto setting or you can set it explicitly using the other options.
Note that this text setting is separate to the option to treat fonts as rendered or not.
When you want to publish the HTML5 publication, the Settings which appear in the Publish Wizard are different and allow you to set several options specific to the HTML output..
Note:
Publish Settings are now available at any time from the Publication menu as well as during the publish process.
These include whether the publication is produced as a single page, whether each page of your publications becomes a separate HTML5 page or whether it is published as a piece of HTML5 to be included in another page as explained below.
All the pages of your publication will be included in a single HTML5 page with a single address and that page will allow you to jump around between those pages. It does not mean all your pages will be visible at once.
Essentially this means your "website" is made up of one large page with different sections displayed as required. As a result it can mean the HTML file is very large if the publication has a lot of pages.
You cannot link to individual pages from external weblinks.
This creates a single HTML5 page as above but each page is marked with a hashtag so that you can link to that particular page from external webpages by using the syntax: mypublication.htm#pagetitle.
This create a separate HTML page for each page in your publication. This is the more traditional format for a website but it can end up making the whole project a little larger although individual HTML pages will be smaller and therefore quicker to load.
This is the recommended option for larger publications.
Note:
Always test this kind of publication online and with different browsers as performance can vary from browser to browser. You may even wish to have different versions of particular pages for different browsers. You can find details of how to check for different browser by searching the internet.
A DIV is a section of a webpage usually outlined in the style sheet (CSS) for that page. This option allows you to create material which can be included in other webpages rather create the whole page in Opus.
Note:
The HTML5 material still requires a compatible browser even if it is displayed within a standard HTML page
This is useful for banners, games and animations which will appear in other pages. Publications output like this do not have to go in a DIV, they could also be used in the cell of a table but you will find it easier to manage the final result if the Opus output is clearly separated from the other elements of the page.
Once published the html file will need to be opened in a text editor or HTML editor so that the content can be cut and pasted into another HTML file.
Note:
The output from Opus includes a standard HTML header and footer so it can be previewed. This should be ignored when pasting into another HTML page. The start and end of the material you should cut and paste is marked with the comment Begin Opus Content and End Opus Content respectively.
If you use custom or Google webfonts when publishing to a single DIV the font styling and instructions are included within the Opus content as defined above. You will still need to upload any supporting font files required.
However, you may wish to copy the web font instructions from the DIV output to the header of the HTML page you are using your Opus content in, which is where it is more usually found. This is particularly relevant if you use more than one Opus DIV on the same page as this will duplicate content unnecessarily.
The header section of the HTML page will be several lines of code between <HEAD> and </HEAD>.
For Google fonts the code you need to cut and paste will be something similar to the following (for the font NotoSans).
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Noto+Sans">
For custom web fonts the code you need to cut and paste will be something similar to this (for the font Goto Round Regular):
<style type="text/css">@font-face {font-family:'GoTo Round';src:url('goto_round_regular-webfont.woff') format('woff'),url('goto_round_regular-webfont.ttf') format('truetype'),url('goto_round_regular-webfont.svg#GoTo Round') format('svg');font-weight:normal;font-style:normal;}</style>
You also need to remember to upload the various files required for the webfont (see Web Fonts above)
If your Opus content is quite lengthy and you want to use it in a standard HTML page, (not HTML5) you can short circuit the cut and paste process by keeping it as a separate file and using the include directive in your host html page.
In a text editor open your Opus output and delete all the text before <Begin Opus Content> and all the text after <End Opus Content>
Save the file (you will not be able to view it independently after this).
Open your host HTML page. Wherever you want the Opus content to appear type the following:
<!-- #include file="OpusContent.htm">
where OpusContent.htm is the name of the file generated by Opus. The include directive tells the browser to automatically insert another piece of html at the point you indicated and so saves you having to do it.
Save your host HTML page as <filename>.shtml to show that it is a dynamic page.
Upload your Opus content to the same location as your host page (including the images and opus.js file) and preview in a browser.
You can set the content of your DIV to be resizable using the settings in Chapter Properties.
This will allow your material to adapt to the size of the DIV it is in. But note that it requires a wrapper DIV to set the dimensions. What this means is that your content can be used on different pages at different szies and can fit into any size DIV the designer produces and not just be fixed to your design size.
Furthermore if the website is designed to resize DIVs according to the screen-size of the device it is being displayed on, then your content will be resized. This is a very powerful option for responsive web design.
In order for your resizable DIV to be previewed as a standlone piece (primarily for your testing) Opus automatically wraps the DIV with an HTML header and a wrapper DIV highlighted in the image below.
Once you have tested your DIV content fully, you can delete all these elements by removing the content before an after the <BEGIN OPUS CONTENT> section as described above.
This option aligns your HTML5 to the top of the browser window. This is the usual position for websites and is important if you HTML includes pages of different heights.
Switching this off will cause the content to be centred vertically in the window – which may be best for games or similar stand-alone items.
All HTML allows for a set of data about the webpage , which is used particularly for search engines to understand the content of the page better. This data is called metadata and includes metadata element called "title" which is taken automatically from the title of your publication.
More importantly it includes the element called "description". The description for your website is important as this is often the snippet Google and other search engines use when it displays your site in the search results.
Opus provides an edit box for you to enter the text you want to use for your description. There are lots of recommendations and considerations to take into account when optimising your website for search engines. This is beyond the scope of this help file – search the internet for metadata description, Google snippets and SEO.
There are a number of other options available when publishing to HTML5. Again these are provided via the Publish Settings.
Allows all the script in the publication to be included in a separate javascript (.js) file rather than included within the publication. Javascript programmers can then use this script to extend the functionality of the page more easily.
This option formats the final HTML with line breaks and tabs to make it easier to read if you want to edit. Otherwise Opus publishes all the code as a single block of text.
This option will show how quickly material is being displayed by the HTML5. It will appear in the top right of the page and displays frames-per-second. This is really for technical review purposes and probably should not be displayed to the public unless on a special page for them to test their speed or similar.
This provides the facility to display a window for debug messages placed in script and is therefore not relevant to Opus Pro.
With this option on the images will remain at a fixed size when the browser is resized. This can be useful to avoid small images being enlarged too much.
This option disables the right click on your page making it more difficult for users to simply copy and paste images from your site.
With this option on the images in your publication will be embedded into the actual HTML using 64-bit encoding. This makes them more secure but means the page may take longer to appear.
This option on the Advanced tab allows you to type or paste in any additional HTML which you need to appear in the header of your output. This might be a link to a style sheet, a javascript function you are using via the javascript action, or code to specify the document type or settings for your hosting and browser requirements.
Note:
The content must be properly-formed HTML. Opus does not check this content for syntax and if it has errors it can stop the whole page from working.
Content which is published as a single DIV does not include a header section as it is designed to be embedded in a page which already has one so this will be ignored for material published as to a Single DIV
This option on the Advanced tab allows you to type or paste in any additional HTML which you need to appear to add at the beginning of the body of your output. This might be a link to a style sheet, a javascript function you are using via the javascript action. It is similar to the option above but
Note:
The content must be properly-formed HTML. Opus does not check this content for syntax and if it has errors it can stop the whole page from working.
This content will be included in the output of material published as a Single DIV.
When published to HTML5 the Exit action in Opus will attempt to close the browser window but this is often blocked by the browser security settings. Instead it can be more useful to program an Exit button to launch a particular web page instead – perhaps a blank page with a message something like "You May Now Close Your Browser" or return to a previous webpage.
As with other publication types, HTML5 publications can be set to be resizable. This option is set in the Chapter Properties where you can determine the minimum and maximum vertical and horizontal sizes for the publication.
However, please note that Opus publications are not designed to flow dynamically and therefore resizing the publication may the material to be squashed or stretched. We recommend that you design the publication at a page size between the maximum and minimum you expect t to be viewed at, and try to keep the aspect ratio for all three the same.
Note:
This setting also allows Opus Pro to resize the content to fit the different screen sizes of different devices based on the width setting. Setting the Minimum Width to a lower figure will allow it to display fully on smartphone screens but will be reduced in size.
The print action in HTML5 has no additional options and can only print the current page. If you want to print an individual object then create a special page which has only that object on with an On Show action to print it and then return to the page which has just linked to it.
The standard HTML protocol for email is to use mailto: and you can still use this in Opus Pro by simply putting the mailto details in the Launch Web Page action.
However, mailto relies on the user having a mail program installed on their computer and set up to accept mailto. It will not work with online email programs and therefore can be unreliable unless being used in a controlled circumstances.
Many visitors to your site will be using online email services and you cannot access these via mailto. Again, if you are working in a controlled corporate environment where, for example, everyone uses Google Mail it is possible to use the Launch Web Page action with a URL to access the mail as you would use in the URL bar of a browser.
For more general email we recommend using a simple php or asp email script on your server and then connecting an email form in your Opus publication using Post Web Data. A tutorial is avialble on the Digital Workshop website for more detailed description and some examples.
HTML5 supports the HP264 codec of .MP4 video for video playback , so other formats will need to be converted. There are a number of utilities available via the internet which can do this.
You cannot use the Video actions with HTML5 video. The user will have control using the default HTML5 controls which will be provided automatically by the browser.
Shaped borders and other graphical effects are also not possible as the video will always appear on top of other elements.
Some browsers (e.g: Opera) support HTML5 do not yet support MP4 and so require a separate video file. An option is provided on the Video tab of the properties dialog to allow you to specify an alternative to the MP4 file. You need to ensure this is uploaded to your website with the other resources
Note:
You may need to ensure that your web server includes MP4 as one of the file types it is set to deliver. If you video does not play when your material is placed online this is the likely culprit. Check with your web hosting support team to arrange this if necessary,
You can embed YouTube video in HTML5 publications but again it will use the default YouTube controls and no other control from Opus is possible.
HTML5 uses both MP3 and OGG formats for audio depending on the browser. Opus will automatically convert the audio in your publication when publishing so you can use any format you like and only need to be concerned with these formats if you are not happy with the final files for some reason.
As with any HTML page, all resources in an HTML5 publication are included independently of the HTML5 – including pictures and any script. This means that all files in the final publication directory should be uploaded to the website location.
Note that Opus Pro HTML5 pages remain a fixed size as set in Chapter properties. If you want to have some longer pages in a website then use a different chapter for those pages.
Note:
Resizing pages of different widths and heights may cause any consistent elements such as a top menu to change position slightly as the page is scaled to fit. This is not good practice so you should set all chapters in such a publication to stay at a fixed size. This will not effect Opus Pro’s resizing the whole site to fit whatever device is viewing it.
Unlike Flash, HTML5 is supported by browsers on almost all devices including Windows, Android phones and tablets and iPads. However the extent to which HTML5 is supported can vary with the browser being used and even differs between the default browser and other browser available for the same system.
The key thing therefore is to keep it simple when publishing for these devices. Tablets can be very fast and can handle most of what Opus can produce but smartphones are slower at doing animation or loading audio. Try to do things separately and have audio and video in small chunks if possible, and use YouTube video where possible rather than embedded video as this will be displayed more efficiently.
However, the capabilities of these devices and the support of the browsers for more and more HTML5 functionality will mean compatibility and features will continue to increase.
Note:
HTML5 is only supported by Android v4.x and later.
Technical developers may be interested to know that Opus uses the SVG format instead of relying on the HTML5 Canvas element. This gives much more versatility across all the elements of the whole page rather than compartmentalising your content. It also makes your content more search-engine friendly.