Manual de Desenvolvimento

Manual de
Desenvolvimento
Índice
Download Template........................................ 02
Estrutura da apresentação................................ 03
Estrutura do HTML.......................................... 07
Funções úteis.................................................. 08
Usando Vídeo................................................. 09
Testes Android................................................ 10
Testes iPad...................................................... 13
Usando Scroll................................................. 16
Upload Template............................................ 17
Compatibilidade............................................. 18
Boas práticas ................................................. 19
Observações ................................................. 22
Manual Versão 3.0.4
Última Atualizacão: 15/04/2013
1
Download template
O Primeiro passo para desenvolvimento da apresentação é o download do
template referente a apresentação cadastrada no sistema.
1. Efetue o Login em app.salesdriver.com.br
2. No menu geral acesse o link APRESENTAÇÃO um sub-menu deverá aparecer
com 2 opções, clique em “Cad. Apresentação”, para efetuar o download do
template.
3. Efetue o download do template clicando sobre o ícone de download.
4. Após efetuar o download do template copie o TemplateApresentacao para a pasta
Presentations dentro da estrutura SalesDriver, conforme mostra imagem abaixo.
Este passo é necessário para efetuar o teste do material na aplicação offline, para a
publicação do material, deverá seguir os passos descritos no manual na seção Upload
Template.
Estrutura padrão SalesDriver está disponível em www.salesdriver.com.br/manual
2
Estrutura da apresentação
Assets
Diretório com todas as telas de uma apresentação.
Ex: va00, va01, va02...ou nomprod01, nomprod02, nomprod03...
Diretórios com as telas deve conter o nome do produto mais o numero
da apresentação;
CSS
Diretório com todas as folhas de estilo globais do projeto;
Javascript
Diretório com todos os scripts globais do projeto;
Media
Arquivos de mídia do projeto, como: imagens, videos, fonts,
etc…;
script.json
Arquivo responsável pela configuração do projeto, este deve ser alterado
para o funcionamento e teste dentro do device compatível.
Estrutura padrão de um projeto Sales Driver, ex: Template apresentação.
3
Arquivo de configuração script.json
cuid: id referente a apresentação e pasta.
brand: Nome da empresa.
indication: Nome do Produto
version: Versão da apresentação
assets: Área responsável pela segmentação das
apresentações e quantas apresentações
irão conter no projeto. Serão apresentadas na REEL*
na ordem que foi inserido como no exemplo ao lado.
id: id de cada tela, seguindo em ordem numérica.
nome: nome da pasta onde está a apresentação
contendo index.html
flows: Área responsável pela apresentação de cada tela
no formato de menu fluxo. Serão apresentadas no FLOW#
na ordem que foi inserido como no exemplo ao lado.
name: Nome do grupo de apresentação..
flow: Basta inserir os id’s cadastrados em assets.
Todos os slides devem estar cadastrados no FLOW para
que a função gotoSlide funcione, caso não estejam para efetuar
links entre as telas use a função href.
#FLOW
*REEL
4
Configuração diretório assets:
Estrutura padrão de um projeto Sales Driver, ex: slide de uma apresentação.
A pasta assets é o repositório de todas as telas da apresentação.
Toda apresentação contém a mesma estrutura de pastas
(css, javascript e media, thumbs), estas devem ser referenciadas no arquivo
index.html que é o arquivo padrão e seu nome não pode ser alterado.
Cada index.html dentro da pasta corresponde a uma tela e todo código
produzido dentro do seu html é independente de outros, sendo assim,
cada slide de sua apresentação terá elementos específicos de formatação
e design que ficam dentro deste diretório.
index.html
Arquivo padrão da apresentação. Seu nome não pode ser alterado e sua
estrutura deve seguir os padrões apresentados na imagem acima.
placeholder.png
Fundo temporário de tela para transição entre uma tela e outra, pode ser usado
como plano de fundo.
- Seu tamanho é de 1024px por 768px, iPad
- Seu tamanho é de 1280px por 752px, Android
thumb.png
Thumbnail de cada tela para ser usado no FLOW e REEL
Seu tamanho é de 120px por 90px, iPad e Android.
é obrigatório desenvolver a thumb referente a cada tela do projeto e
inserir na pasta thumbs conforme imagem acima.
5
O arquivo SCRIPT.JSON configura a apresentação com a sequência correta
das telas e suas divisões por conteúdo. Em assets temos todas as telas cada
uma com um ID sequencial começando do número 1, e a referencia da tela
em NAME que é a ligação com a pasta assets.
Em FLOWS temos as divisões por conteúdo agrupados com seus ID’s
e o nome do grupo.
BRAND é o título (empresa) da apresentação e INDICATION, subtítulo
(produto ou material).
PRECALL_LOGO é o local e o nome do ícone que irá aparecer no
precall da aplicação. Seu tamanho é de 120px por 90px.
É obrigatório desenvolver a imagem principal de sua apresentação para que ela
possa aparecer na tela principal da aplicação, seu diretório padrão:
[apresentação]/media/images/
Implementação ROTATION - IPAD
arquivo script.json
ROTATION: quando definido, seu valor é YES,
assim o material fica na orientação vertical, aplicando
ao id referente a tela.
Omitindo esta configuração seu padrão é horizontal.
6
Estrutura do html
Exemplo de estrutura do index.html, suas referencias para folhas de estilos e scripts
global SalesDriver são obrigatórios:
Dentro da body codificação é livre. Os elementos de formatação e design
podem ser globais e divididos por tela, portanto, todo arquivo dentro do slide
se refere a tela atual.
Elementos que estão fora da pasta assets, são globais e podem ser referenciados
em todas as telas usando ../../
7
Funções úteis
$.salesdriver_core.gotoSlide(‘va01 ou nomprod01‘);
Função para navegar entre telas; (iPad - Android)
$.salesdriver_core.showFullScreenMovie(‘/caminho do vídeo’);
Função para abertura de vídeo em FullScreen. (Android)*
$.salesdriver_core.showHTMLViewer('www.google.com.br');
Função para abertura página web. (Android)
$.salesdriver_core.showPDFViewer('../../caminho do arquivo pdf');
Função para abertura página web. (Android)
href: A função href deve ser usada apenas para carregar uma página dentro do
mesmo slide, evite o uso de href para navegar entre as telas, se o mesmo for
utilizado não será possível a realização do tracking do slide, ou seja, o tempo
de visualização computado para o slide.
* No iPad o vídeo abre normalmente na página sem a necessidade do scritp
showFullScreenMovie, basta usar os recurso de vídeo do HTML5. (Vide pág. 8)
Para sobrescrever as funções de gestos de uma apresentação em
telas específicas, copiar o arquivo jquery.salesdriver_gesture_conf.js
na pasta /global/js/core/, inserir o arquivo na pasta da tela correspondente,
carregando o arquivo .js.
jquery.salesdriver_gesture_conf.js original:
jquery.salesdriver_gesture_conf.js modificado (gestures substituídos):
jquery.salesdriver_gesture_conf.js modificado (gestures anulados):
8
Usando Vídeo
iPad
Para iPad o Vídeo é reproduzido na própria página, pois por padrão já
é implementado no sistema:
- Poderá usar uma div com carregamento do vídeo.
- Poderá implementar qualquer resolução até 1024x768.
<script type='text/javascript'>
$(document).ready(function(){ $("#video_intro").bind('ended', function(){
$.salesdriver_core.gotoSlide('tela1'); });
}); </script>
Android
Já em sistemas Android não é possível a reprodução do vídeo direto nas telas,
será necessário o uso do recurso: showFullScreenMovie, chamando o player
de vídeo do Android, neste exemplo carregando automaticamente:
ou poderá usar a imagem de um player e inserir o link:
<div id="videoplay" class="box"
onClick="$.salesdriver_core.showFullScreenMovie('media/videos/video.mp4');">
</div>
* é obrigatório no android o uso da resolução do vídeo em: 1280x752.
9
Testes Android
Usando mac baixe: http://www.android.com/filetransfer/ para transferir os arquivos
para a pasta .SalesDriver.
Via Windows acessar via Explorer normalmente.
Caso não visualize a pasta, crie a pasta (.SalesDriver) e transfira as apresentações
conforme mostra a imagem acima.
.SalesDriver/
Config.json
Presentations/
Habilite no programa de gerenciador de arquivos para visualizar pastas
ocultas.
10
Não efetue o sincronismo, nem altere as configurações, estas opções
são de utilização quando a apresentação esta online, não via USB.
11
Entrando no SalesDriver a apresentação deve aparecer...
Arquivo de configuração Android
Arquivo de configuração config.json
Arquivo config.json, usado para que a aplicação possa carregar as
apresentações, segmentadas em suas respectivas pastas.
12
Testes iPad
Baixe o DiskAid http://www.digidna.net/products/diskaid, (Windows ou MAC)
para acessar os arquivos internos do iPad e acessar a pasta SalesDriver
Faça o envio de sua apresentacão para dentro do Aplicativo SalesDriver
na aba Apps/SalesDriver...
Envie os arquivos, eles tem que ficar com a hierarquia como no imagem.
13
Não efetue o sincronismo, nem altere as configurações, estas opções
são de utilização quando a apresentação esta online, não via USB.
Acessando o SalesDriver a apresentação deverá aparecer
na tela inicial (Precall)...
14
Arquivo de configuração iPad
Arquivo de configuração config.json
Arquivo config.json, usado para que a aplicação possa carregar as
apresentações, segmentadas em suas respectivas pastas.
15
Usando Scroll
Para o uso de textos ou imagens com scroll na página será necessário
substituir a biblioteca padrão do Sales Driver (jquery.salesdriver_include.js)
deverá substituir no index.html a chamada do arquivo jquery.salesdriver:
Usando a chamada abaixo:
Na página as funções do salesdriver_include serão substituídas usando as funções
do jquery.salesdriver modificado para funcionar quando determinada tela
conter scroll.
Nos arquivos de demonstração contem a pasta: VAS_COM_SCROLL contendo
os scripts para alteração das páginas com scroll e o código para substituir
o framework padrão.
16
Upload template
Após efetuar o enriquecimento do template e efetuados testes para certificar que a
apresentação funcione corretamente no Sales Driver, a apresentação estará disponível
para ser enviada para o sitema.
1. Efetue o Login em app.salesdriver.com.br
2. No menu geral acesse o link APRESENTAÇÃO um sub-menu deverá aparecer
com 2 opções, clique em “Upload Apresentação”, para efetuar o upload do template.
3. Efetue o upload do template clicando sobre o ícone de upload.
4. Efetue a compressão apenas dos arquivos: (/assets /css /javascript /media script.json)
5. Efetuado a compressão dos arquivos na janela "upload de apresentação" clique em
"Arquivo" para selecionar o template comprimido, em "Desc versão" insira a versão da
apresentação Ex: Versão 1, clique em IMPORTAR para efetuar o upload do arquivo
para o sistema.
6. A Mensagem "importando arquivo, aguarde" será apresentada, aguarde até que o
sistema informe "Processamento Concluído!" Após esta mensagem a apresentação
estará carregada no sistema, bastando apenas informar a empresa sobre sobre a
conclusão do envio.
17
Compatibilidade
A aplicação Sales Driver é compatível com as principais ferramentas de
programação em html5 atuais do mercado, porém com algumas ressalvas:
1
2
3
4
5
Manter sempre a estrutura padrão do index.html como mencionado
na página 6, manter ORGANIZADO os arquivos em seus respectivos diretórios,
limpar qualquer arquivo ou script que não está sendo usado na apresentação.
Remover bibliotecas em javascript que contenha alguma interação
gestual para não conflitar com as nativas e que causam lentidão;
Remover as chamadas da biblioteca JQuery, qualquer que seja
sua versão, pois o sistema já implementa nativamente, remover arquivos
do tipo temporários (Thumbs.db, .DS_Store, __MACOSX) ou qualquer arquivo
que não seja usando na apresentação, não usar acentos ou nomear os arquivos
com caracteres inválidos ou especiais.
O teste do material apenas em browsers no desktop não garante 100% das
funcionalidades implementadas em sua apresentação dentro do SalesDriver,
para garantir, o teste deverá ser realizado dentro do SalesDriver.
Todos os recursos do SalesDriver são baseados nos recursos do proprio
equipamento, para saber se algum scritp ou funcionalidade irá funcionar
verifique se a webview (android) ou UIwebview (iPad) do equipamento suporta.
6
Usar somente os scripts baseados em: jQuery e javascripts versões
exclusivas p/ mobile e scritps comprimidos (Minified);
7
Todas as funcionalidades foram testadas e aprovadas nas versões
IOS 6 e Android 4.0 ICS, acima destas vesões não nos responsabilizamos.
18
Boas práticas
As dicas abaixo visam fornecer a vocês melhores práticas para o desenvolvimento de conteúdo de e-detailing. Enquanto sabemos que não
há certo ou errado – pois nesse âmbito tudo é uma questão de preferência – a experiência do time Sales Driver na relação com agências
nos dá uma excelente noção sobre medidas que contribuem para uma
ótima usabilidade vs. Hábitos que devemos deixar para trás.
Lembre-se: o desenvolvimento de conteúdo para e-detailing deve sempre ter como objetivo principal contribuir ao máximo para a dinâmica
de uso em campo do representante comercial.
Evite usar menu em formato piano (abas)
Tradicional do VA impresso, o menu em abas – ou o famoso ``piano``,
como é conhecido na linguagem de agência – faz todo o sentido quando estamos criando um material físico a ser usado pelos representantes. No formato digital, a solução Sales Driver já foi concebida com
funcionalidades de navegação (Biblioteca e Rolo de Filme) especificamente desenhadas para que o representante farmacêutico possa ter
acesso a qualquer um dos slides, a qualquer momento.
Busque sempre fazer uso da estrutura de navegação nativa da ferramenta, pois assim estará contribuindo para uma otimização da usabilidade do material por conta do representante, e evite ao máximo criar
navegações paralelas.
Utilize um símbolo para indicar onde existe
uma ação
É esperado que todo representante explore o material digital a ele enviado ANTES de utilizá-lo no campo em uma visita, com o objetivo de
acostumar-se ao mesmo. Mesmo assim, é nosso papel contribuir para
que esse aprendizado ocorra da maneira mais rápida e efetiva possível. Uma excelente prática é sinalizar os pontos de toque que geram
ação em seu material com um símbolo – uma lâmpada minúscula, uma
pequena mão, etc. Assim, no treinamento da força de vendas, basta
explicarmos aos representantes que onde houver este símbolo, haverá
uma animação esperando para ser disparada através de um tap na
tela.
19
Deixe a programação em HTML5 como último
passo do processo
Sabemos que o core business de uma agência se dá no âmbito da
arte, e não da programação. Assim sendo, uma medida que se mostrou muito efetiva em projetos anteriores é deixar a produção do conteúdo em linguagem HTML5 como último passo do processo. Neste
caso, a aprovação se dá em um material feito em formato Adobe Flash
(.SWF), uma tecnologia com a qual as agências estão mais habituadas. Você pode enviar para o seu cliente um arquivo .SWF para que
ele visualize na tela do computador, experimente as interações com o
mouse e faça alterações. Quando tiverem chegado a um consenso,
basta você fornecer esse ´´roteiro´´em Flash para o seu programador
HTML5, para que ele o siga com a maior fidelidade possível na criação
do conteúdo final. Dessa maneira, você estará otimizando o seu tempo, pois fazer alterações diretamente no material final em linguagem de
programação HTML5 pode ocupar mais tempo quando comparado à
interface gráfica do Adobe Flash.
Cuide para que as informações científicas do
seu conteúdo estejam legíveis à distância
Este parece um ponto óbvio, porém na prática e na correria do diaa-dia frequentemente esquecemos. Tenha em mente que as informações-chave de cada slide devem, preferencialmente, ser legíveis a
uma distância de segurança de 1 metro. Essa é a distância média entre
o representante e o médico. Muita atenção ao tamanho de fontes, gráficos, bullets, etc. Lembre-se: o que diferencia um produto farmacêutico de seu competidor estará sempre expresso em dados científicos. É
necessário dar o destaque correto para eles também no formato digital, considerando uma área menor quando comparada às tradicionais
páginas de um V.A. Impresso.
20
Tempo de duração e quantidade de
animações
É consenso que, a cada ano, o representante possui menos tempo
para fazer sua exposição de conteúdo ao médico. Salvo produtos
específicos, de alta complexidade – onde uma visita pode demorar até
15 minutos – o tempo médio de visita gira em torno dos 2 minutos,
provavelmente menos. Assim sendo, assegure-se que as animações
do seu conteúdo se resolvam rapidamente, evitando que o tempo
seja investido em contemplar uma transição – o que pode prejudicar a
dinâmica da visita médica.Da mesma maneira, evita um grande número
de animações por slide (3 ou 4 por slide são suficientes para imprimir
classe ao material sem torná-lo demorado).
21
Observações
1
2
3
Manter a estrutura de pastas idêntica a enviada como exemplo
e detalhada neste manual.
Não implementar script JQuery, pois o mesmo já é realizado pela
aplicação e sua versão é 1.7.2.
Evitar o uso de eventos em toda a tela, somente em elementos
específicos.
4 Evitar o uso de override ou funções que subscrevam os gestos
padrão da aplicação.
5
Evitar o uso de scripts de scroll não compatíveis com a webview
dos aparelhos.
teste nos navegadores não reproduzem fielmente como no Sales Driver,
6 Opode
acontecer de algo funcionar no navegador e não funcionar no SD,
mesmo que seja testado no navegador do próprio tablet, Pois o sistema
usa recursos predefinidos do tablet para visualização do conteúdo.
22