Manual de Desenvolvimento

Transcrição

1 Manual de Desenvolvimento

2 Índice Download Template Estrutura da apresentação Estrutura do HTML Funções úteis Usando Vídeo Testes Android Testes ipad Usando Scroll Upload Template Compatibilidade Boas práticas Observações Manual Versão Última Atualizacão: 15/04/2013 1

3 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 2

4 Estrutura da apresentação Assets CSS 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; Diretório com todas as folhas de estilo globais do projeto; Javascript Media Diretório com todos os scripts globais do projeto; 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

5 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

6 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

7 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

8 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

9 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(' 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

10 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

11 Testes Android Usando mac baixe: 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

12 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

13 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

14 Testes ipad Baixe o 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

15 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

16 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

17 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

18 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

19 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: 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. Usar somente os scripts baseados em: jquery e javascripts versões exclusivas p/ mobile e scritps comprimidos (Minified); 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

20 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

21 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

22 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

23 Observações 1 Manter a estrutura de pastas idêntica a enviada como exemplo e detalhada neste manual. 2 Não implementar script JQuery, pois o mesmo já é realizado pela aplicação e sua versão é 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. 6 O teste nos navegadores não reproduzem fielmente como no Sales Driver, pode 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