Scribd
Upload
17 views47 pages

HTML5 Development - Golden Rules

The document outlines the HTML5 Golden Rules for building e-content, detailing version control, best practices, and specific guidelines for structuring content, managing gestures, personalizing presentations with CRM data, capturing data, and including various content types. It provides step-by-step instructions and examples for each rule, ensuring effective implementation in MI applications. The document serves as a comprehensive guide for e-Content Partners to enhance their presentations using HTML5.

Uploaded by

juanmiguel801
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views47 pages

HTML5 Development - Golden Rules

The document outlines the HTML5 Golden Rules for building e-content, detailing version control, best practices, and specific guidelines for structuring content, managing gestures, personalizing presentations with CRM data, capturing data, and including various content types. It provides step-by-step instructions and examples for each rule, ensuring effective implementation in MI applications. The document serves as a comprehensive guide for e-Content Partners to enhance their presentations using HTML5.

Uploaded by

juanmiguel801
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 47

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

You might also like