HTML5 GOLDEN RULES
HTML5 GOLDEN RULES
MI Application Version: 10.0.0
Document Revision: 1.0
Publication Date: April 24, 2015
Prepared for: e-Content Partners
Prepared by: CLM Services
HTML5 Golden Rules
1
HTML5 GOLDEN RULES
TABLE OF CONTENTS
1. Version Control ....................................................................................... 3
2. HTML5 Golden Rules ............................................................................. 4
2.1 Zip Structure .......................................................................................................... 4
2.2 Manage gestures and areas .................................................................................. 7
2.3 Personalize presentation with CRM data ............................................................. 12
2.4 Capture data during the presentation .................................................................. 15
2.5 Make dynamic presentation ................................................................................. 22
2.6 Display data elements captured during the presentation ..................................... 23
2.7 Include different types of contents ....................................................................... 25
2.8 Send presentation by e-mail ................................................................................ 30
3. Best Practices ....................................................................................... 39
4. Frequently Asked Questions? ............................................................... 39
5. References ........................................................................................... 46
5.1 Document References ......................................................................................... 46
6. Glosssary .............................................................................................. 47
HTML5 Golden Rules
2
HTML5 GOLDEN RULES
1. VERSION CONTROL
Author Date Version Description
CLM-Services 24/04/2015 1.0 First Version
HTML5 Golden Rules
3
HTML5 GOLDEN RULES
2. HTML5 GOLDEN RULES
This section of the document will provide additional details on building e-content with
examples, screens and step-by-step information.
2.1 Zip Structure
This additional information refers to Agenda / Section item #3 “How to structure the content” in
“MI Touch - CLM Content Guidelines”.
Zip structure must not contain sub-folder. Example: If you unzip “Sequence1.zip” it should not
contain a folder name “Sequence1”.
Follow the below steps to zip the content correctly
1. Go inside the folder:
2. Select all the files:
HTML5 Golden Rules
4
HTML5 GOLDEN RULES
3. Right click and then select “Add to archive”:
4. Then, select “ZIP” in the Archive format section.
HTML5 Golden Rules
5
HTML5 GOLDEN RULES
5. Then, click “OK” button.
6. Then, you will get a zip folder. You will be able to upload this folder successfully now using MI
PC Online. Only HO user has the right to import sequence.
HTML5 Golden Rules
6
HTML5 GOLDEN RULES
2.2 Manage gestures and areas
This additional information refers to Agenda / Section item #4 “How to customize gestures” in “MI
Touch - CLM Content Guidelines”.
In order to customize gesture, we need to atleast override any one of the 5 gestures available in
MI CLM by default. This can be done by following the below code.
Override Gesture – Tap
<div data-prevent-tap="true">
...
</div>
Override Gesture – Override Left & Right Swipe
<body data-prevent-left-swipe="true">
...
</body>
There are five areas in the screen and each area is defined by its properties: top, bottom, left,
right. These properties are defined in pixels as shown:
This can be defined in the .css file.
In order to show the five areas, see the screen shot shown below.
HTML5 Golden Rules
7
HTML5 GOLDEN RULES
The calculation and examples are shown below.
Bottom (Width) -> Xmax -> 1024 pixel
Top (Height) -> Ymax -> 768 pixel
Area 1: Header (Top: 8% Ymax, Bottom: 99.41% Xmax)
Top (height) = 8% Ymax = 8/100 * 768 = 61.44px
Bottom (width) = 99.41% Xmax = 99.41/100 * 1024 = 1018px
HTML5 Golden Rules
8
HTML5 GOLDEN RULES
#header
{
height: 61.44px;
width: 1018px;
color: white;
font-size: 24px;
text-align: center;
font-weight:bold;
display:block;
}
.header_color1
{
height: 61.44px;
width: 1018px;
background: rgb(22,157,218);
color: black;
font-size: 16px;
text-align: center;
font-weight:bold;
display:block;
border-style:solid;
border-color:rgb(22,157,218) rgb(22,157,218) white rgb(22,157,218);
}
Example:
<div id="header" class='header_color1'>
…
</div>
Area 2: Feedback recording (Top: 83.2% Ymax, Bottom: 9.82% Xmax)
Top (height) = 83.2% Ymax = 83.2/100 * 768 = 639px
Bottom (width) =9.82% Xmax = 9.82/100 * 1024 = 100.55px
#section-navigation
{
float: left;
margin-top: 0px;
height:639px;
width: 100.51px;
}
.section-navigation_color1
{
float: left;
margin-top: 0px;
height:639px;
HTML5 Golden Rules
9
HTML5 GOLDEN RULES
width: 100.51px;
background: rgb(22,157,218);
border-style:solid;
border-color:rgb(22,157,218) white rgb(22,157,218) rgb(22,157,218);
}
Example:
<div id="section-navigation" class='section-navigation_color1'>
…
</div>
Area 3: Feedback recording (Top: 83.2% Ymax, Bottom: 9.8% Xmax)
Top (height) = 83.2% Ymax = 83.2/100 * 768 = 639px
Bottom (width) =9.8% Xmax = 9.8/100 * 1024 = 100.4px
#aside
{
margin-top: 0px;
float: right;
width: 100.4px;
height: 639px;
}
.aside_color1
{
margin-top: 0px;
float: right;
width: 100.4px;
height: 639px;
background: rgb(22,157,218);
border-style:solid;
border-color: rgb(22,157,218) rgb(22,157,218) rgb(22,157,218) white;
background: rgb(22,157,218);
}
Example:
<div id="aside" class="aside_color1">
…
</div>
Area 4: Swipe left/right, pinching and double tap (Top: 84% Ymax, Bottom:
79.19% Xmax)
Top (height) = 84% Ymax = 84/100 * 768 = 645px
Bottom (width) = 79.19% Xmax = 79.19/100 * 1024 = 811px
HTML5 Golden Rules
10
HTML5 GOLDEN RULES
#content
{
float:left;
width: 811px;
height:645px;
margin: 0px;
padding: 0px;
overflow: hidden;
}
.content_color1
{
float:left;
width: 810px;
height:645px;
background: rgb(22,157,218);
margin: 0px;
padding: 0px;
overflow: hidden;
background: rgb(22,157,218);
}
Example:
<div id="content" class="content_color1">
…
</div>
Area 5: Footer (Top: 8% Ymax, Bottom: 99.41% Xmax)
Top (height) = 8% Ymax = 8/100 * 768 = 61.44px
Bottom (width) = 99.41% Xmax = 99.41/100 * 1024 = 1018px
#footer
{
clear: left;
height: 61.44px;
width:1018px;
}
.footer_color1
{
clear: left;
background: rgb(22,157,218);
height: 61.44px;
width:1018px;
border-style:solid;
border-color:white rgb(22,157,218) rgb(22,157,218) rgb(22,157,218);
background: rgb(22,157,218);
}
HTML5 Golden Rules
11
HTML5 GOLDEN RULES
Example:
<div id="footer" class='footer_color1'>
…
</div>
2.3 Personalize presentation with CRM data
This additional information refers to Agenda / Section item #7 “How to insert MI data” in “MI
Touch - CLM Content Guidelines”.
Inorder to personalize the presentation, customer’s information can be shown in the presentation
and this can be achieved by referring the above screen shot on Json structure.
In the html file, we can add the below code i.e.
The presentation has to be opened from the customer search page in MI Touch Offline, to show
the customer details inside the presentation. See the screen shots below.
HTML5 Golden Rules
12
HTML5 GOLDEN RULES
Screen Shot – 1: Customer search page – Before tapping the presentation icon
against the customer Abrams, Dominic.
HTML5 Golden Rules
13
HTML5 GOLDEN RULES
Screen Shot – 2: Showing list of presentations after tapping on the presentation icon
highlighted against the customer Abrams, Dominic
HTML5 Golden Rules
14
HTML5 GOLDEN RULES
2.4 Capture data during the presentation
This additional information refers to Agenda / Section item #8 “How to update MI data” in “MI
Touch - CLM Content Guidelines”.
Provide questions and answers in parameters/parameters.xml file. Refer below example.
HTML5 Golden Rules
15
HTML5 GOLDEN RULES
Design the sequence with questions and answers
HTML5 Golden Rules
16
HTML5 GOLDEN RULES
Screen Shot – 1: Call Dialog
HTML5 Golden Rules
17
HTML5 GOLDEN RULES
In order to save the call dialog to MI, the user needs to post the call by tapping
“PostCall” button. Please see the screen shots below.
HTML5 Golden Rules
18
HTML5 GOLDEN RULES
Screen Shot – 2: Tap on “PostCall” button to post the call
HTML5 Golden Rules
19
HTML5 GOLDEN RULES
Screen Shot – 3: Tap on the presentation showing under Call Dialogue
HTML5 Golden Rules
20
HTML5 GOLDEN RULES
Screen Shot – 4: Records the questions and answers from the presentation in the call.
HTML5 Golden Rules
21
HTML5 GOLDEN RULES
While creating presentation, HO user has to activate the call dialog. See the screen shot
below for already activated call dialog. In case, it is not activated, link “Activate Call
Dialogue” is available.
2.5 Make dynamic presentation
This additional information refers to Agenda / Section item #9 “Sequence Parameters” in “MI
Touch - CLM Content Guidelines”.
In order to make a dynamic presentation, create a sequence like below and if user taps on ‘Yes’
option, it will navigate to one sequence and ‘No’, it will navigate to another sequence. This is
done through window.parent.navigateToSequence(id) function, where ‘id’ represents
‘Sequence Id’.
Also, in parameters/parameters.xml file, include <Links> tag like shown below. This is to establish
links between the sequences inorder to make it dynamic. Also, each of these sequences, should
have one unique Sequence Id
HTML5 Golden Rules
22
HTML5 GOLDEN RULES
2.6 Display data elements captured during the presentation
This additional information refers to Agenda / Section item #8 “How to update MI data” in “MI
Touch - CLM Content Guidelines”.
This is to display the answers captured in the call dialog sequence to another sequence. This can
be done using the code window.parent.addData(id, value) function in the onclick or onchange
event.
HTML5 Golden Rules
23
HTML5 GOLDEN RULES
For example:
HTML5 Golden Rules
24
HTML5 GOLDEN RULES
2.7 Include different types of contents
This is additional information on how different types of contents such 3D Effects, Video and PDF
can be included in your presentation.
3D Effects
See sample 3D effects in the screen shot below.
HTML5 Golden Rules
25
HTML5 GOLDEN RULES
Html5 coding
CSS3 coding
HTML5 Golden Rules
26
HTML5 GOLDEN RULES
HTML5 Golden Rules
27
HTML5 GOLDEN RULES
Video
PDF
This additional information refers to Agenda / Section item #5 “How to manage PDF” in in “MI
Touch - CLM Content Guidelines”.
In order to open pdf in the presentation, can use openPDF() function like shown below. This
function can be called on tapping a button or link.
HTML5 Golden Rules
28
HTML5 GOLDEN RULES
HTML5 Golden Rules
29
HTML5 GOLDEN RULES
2.8 Send presentation by e-mail
This additional information refers to Agenda / Section item #3 “How to structure the content” in
“MI Touch - CLM Content Guidelines”
In order to send an e-mail from each sequence, export/export.pdf should be present in the
sequence zip structure i.e. for email functionality, agency has to provide export.pdf.
By default, sample email template will be loaded to the tenant of all agencies. This is done
through "Compliant Field Email" module, which is used to provide covering letter while
sending email. Refer the screen shot below to see the "Compliant Field Email" module
from MI Touch and the sample email template.
HTML5 Golden Rules
30
HTML5 GOLDEN RULES
The sample email template has to be linked to the presentation in order to send emails. Refer
the screen shots below to see on how to link email template with presentation. Tap on the
arrow icon highlighted in the screen shot and tap on "Email" button. It will navigate to the
sample email template.
HTML5 Golden Rules
31
HTML5 GOLDEN RULES
HTML5 Golden Rules
32
HTML5 GOLDEN RULES
HTML5 Golden Rules
33
HTML5 GOLDEN RULES
Then, after opening the presentation from the customer search page, tap on the arrow icon
and then tap on the "Email" button to send email as shown in the screen shot below.
HTML5 Golden Rules
34
HTML5 GOLDEN RULES
It will navigate to the email template screen where the Rep user can see the Customer’s name,
Presentation name, Rep user’s name, date etc. making it a personalized covering letter. The
Rep user can tap on the "Envelope" icon, highlighted in the below screen shot to attach pdf
from each sequence and finally send email.
HTML5 Golden Rules
35
HTML5 GOLDEN RULES
Tap on the attachment text box as shown in the below screen shot to attach pdf from each
sequence. The Rep user can select the sequences, so that it will send pdf from only those
sequences, which are being selected. Inorder to enter email address of the customer, the
same can be done by entering email address below the customer name as shown below.
Finally tap on the "Done" button to send email.
HTML5 Golden Rules
36
HTML5 GOLDEN RULES
HTML5 Golden Rules
37
HTML5 GOLDEN RULES
HTML5 Golden Rules
38
HTML5 GOLDEN RULES
3. BEST PRACTICES
1. While developing pages, it’s advisable not to hard-code height or width values in pixels. Use
% as much as possible.
2. Never hard-code % for images, always use pixel.
3. Prefer converting images to PNG format for less file size.
4. Remove all unwanted images and JS files.
5. Make sure to add jQuery libraries only if required and also try to decrease its usage
6. Don’t call any scripts from the website directly; always copy the required scripts or libraries
in your JS folder.
7. Don’t write any inline styles in the HTML page.
8. Remove the empty <div> tags, if present.
9. Follow the naming convention for creating the sequences.
10. Make sure sequences are less in size.
11. Recommend to use Safari browser for testing, if you are developing for iOS
4. FREQUENTLY ASKED QUESTIONS?
1. If page ids are defined in a sequence having multiple pages, is it mandatory to
associate key messages to each page in order to record feedback on each page?
Answer: Yes, it is mandatory to associate key-message in order to capture feedback. Please
see the description below from FDD (Functional Description Document) available in Agency
Portal
4.2.5. Recording Customer Reactions
While playing a presentation, the hidden Reaction Bar is used to enter the customer's
reaction to the current sequence. This applies only if the Home Office user associated a key
message and activated the feedback option for the sequence in MI PC.
2. Which are the video formats supported by the CLM module?
Answer: MI supports all the video formats which are supported by HTML5. Most of them
have used .mp4 format.
The video file should be part of the sequence zip structure. It is recommended to be
included under media/video folder. Please see the screen shot below from the “MI Touch –
CLM Content Guideline” for your reference.
HTML5 Golden Rules
39
HTML5 GOLDEN RULES
3. Is it possible to jump from sequence 1 to say 3rd slide of sequence 2?
Answer: No, it is not currently possible in MI.
4. Is it possible to disable timeout label from MI Touch?
Answer: In the partner environment i.e. https://partner-
mi.cegedim.com/MobileIntelligence/login.aspx, it is not possible to remove/disable timeout
label as it is a test environment where agencies would be using it to test presentations. So,
configuration changes are not allowed in the partner environment and removing/disabling
timeout label is a configuration change. But in the client environment, configuration changes
would be possible.
5. What is the maximum size of a PDF file that can be sent as attachment?
Answer: There is a limit of 10MB of attachment from server side.
6. What is the recommended image size per sequence?
HTML5 Golden Rules
40
HTML5 GOLDEN RULES
Answer: It is recommended not to exceed 5MB of images per sequence
due to performance issues on iPad.
7. What is addAsset() function ?
Answer: If user wants to track number of button clicks in a sequence, this can be achieved
by using addAsset() function. The results can be retrieved from the predefined list "Event
presentation and product message". The HO user can see the predefined list by clicking
"List Builder" button in the Home page.
To call addAsset(), use:
window.parent.addAsset(description, start_date_time, duration, external_id)
description: string (200): Description of the asset
start_date_time: datetime : Start time of the asset
duration: number (9): Duration of the asset
external_id: string(200) : External Id of the asset
This will update the event_presentation_asset table in the MI Database.
In the javascript file, the below code can be used to call addAsset() function.
The information will be captured in the predefined list. Refer see the screen shot below.
HTML5 Golden Rules
41
HTML5 GOLDEN RULES
8. Why are the presentations not appearing in MI Touch Offline?
Answer: You should use synchronize button on the iPad.
9. I am continually receiving the same error when attempting to upload my sequences:
"media/images/thumbnails/200x150.jpg missing”. What should I do?
Answer: You should place 200x150.jpg thumbnail image in media/images/thumbnails folder.
10. When we have a button on the Zone 5 in presentation, we are not able to navigate to
the sequences using the MI bottom bar?
Answer: This is a known issue, you can use the below code as workaround.
$(function(){
//navigate to a different sequence
$('[data-sequence]').bind('click touchstart', function(e){
e.preventDefault();
window.parent.navigateToSequence($(this).attr('data-sequence'));
});
//show next sequence
$('[data-next]').bind('click touchstart', function(e){
e.preventDefault();
window.parent.goNextSequence();
});
});
HTML5 Golden Rules
42
HTML5 GOLDEN RULES
$(function(){
//navigate to a different sequence
$('[data-sequence]').bind('touchend mouseleave', function(e){
e.preventDefault();
window.parent.navigateToSequence($(this).attr('data-sequence'));
});
//show next sequence
$('[data-next]').bind('touchend mouseleave', function(e){
e.preventDefault();
window.parent.goNextSequence();
});
});
11. I have installed the MI app and received the following message when syncing
‘Synchronization completed, your database is being created. Please connect later to
download’
Answer: This means that your Database is getting created, you need to wait for 20 minutes
and click on sync button again to download the DB and finish the process.
12. Can we make a link from one presentation to another presentation?
Answer: No, it is not possible. Only linking between one sequence to another sequence is
possible. MI will load only sequences, which are related to the current presentation into iPad
memory.
13. What could be the maximum recommended video size for MI platform?
Answer: There is no maximum size specified for MI platform. We use streaming so the full
video is not loaded into memory. Long videos should be avoided since time will not permit to
watch them and their size will unnecessarily overload the device memory.
14. Whether it is possible to reopen a presentation in a call that is not still finished?
Answer: Yes, it is possible to reopen a presentation if saved as incomplete call. In order to
open the presentation, go to “Incomplete call”, open the call and tap on Edit button and go to
presentation tap. There you will be able to see the incomplete presentation with the play
icon.
HTML5 Golden Rules
43
HTML5 GOLDEN RULES
15. How to do tracking in a mono-sequence presentation having multiple pages?
Answer:
The pages are defined as a child of the sequence node in the parameters.xml file
To start tracking on a page, use
window.parent.onEnterPage(pageid)
pageid: string (200)
Example
window.parent.onEnterPage('page_2');
HO user has to associate each page-id with a key-message in the sequence screen
like shown in the below screen shot.
HTML5 Golden Rules
44
HTML5 GOLDEN RULES
If the rep has visited the pages, then it will get tracked in the MI Touch call page
once the user post the call from the presentation as shown in the below screen shot.
HTML5 Golden Rules
45
HTML5 GOLDEN RULES
5. REFERENCES
5.1 Document References
MI Touch - CLM Content Guidelines Version 1.5
Functional Description - CLM MI Touch Version 3.0
Functional Description - CLM MI PC Version 2.0
HTML5 Golden Rules
46
HTML5 GOLDEN RULES
6. GLOSSSARY
Terms Explanation
Presentation Grouping of one or more sequences that can be downloaded, presented,
and emailed in MI Touch.
Sequence A .pdf file or an HTML5 .zip file that supports various multimedia formats
(images, videos) and animations. A sequence could be a single piece of
content or multiple pieces of content.
Key Message Significant point about a product that can be associated with a sequence or
a page within a sequence
Call Dialogue Questions and answers specified within the sequence file.
List Builder Enables the user to create a variety of customized lists and to use these
lists to effectively target customers.
Predefined lists Extension of List Builder to allow users to create lists based on specifically
written SQL queries.
HTML5 Golden Rules
47
