MANUAL DE INTEGRAÇÃO Versão 1.0

MANUAL DE INTEGRAÇÃO Versão 1.0

Criando um VA Dentro do sistema do valogi.co, ao tentar subir qualquer aplicativo, o sistema exige que sejam passados dois arquivos: um do tipo imagem e o outro do tipo zip. O arquivo do tipo imagem, nada mais é do que o thumbnail que irá ser mostrado na capa do VA, este arquivo tem que ser em png. O arquivo do tipo zip, é o VA em si, neste arquivo deve conter uma estrutura parecida com a abaixo definida, vale ressaltar que: o que deve ser compactado são os arquivos e não a pasta, ou seja, selecione todos os arquivos que deseja compactar e em seguida os adicione a uma pasta do tipo zip. Onde: CSS = Irá conter todos os arquivos de estilo (.css) IMAGES = Irá conter todas as imagens suportadas (jpg, png, gif...) JS = Irá conter javascripts e librarys javascript (.js) SHARED = Irá conter qualquer outro tipo de arquivo não abordado nas pastas padrões (pdf, mp4, mp3...) THUMB = miniaturas de cada página do material (1.png, 2.png, 3.png...)

Como deverá ser o Html Os arquivos HTML deverão seguir o seguinte padrão: 1. Cria- se uma pasta em ordem sequencial começando pela pasta de número 1. 2. Dentro da pasta criada deverá haver um arquivo chamado index.html. 3. Dentro da pasta pode haver outros arquivos html, estes, não precisam seguir nenhum padrão de nomenclatura. 4. Dentro de todos os arquivos, deverão conter caminhos relativos ao html desejado. O Valogico somente navegará nos htmls contidos na pasta. Vamos imaginar que nosso index.html esteja dentro da pasta 1, dentro dele, temos o seguinte link: <a href= 3.html >Clique aqui</a> Neste exemplo, teremos a navegação até o html chamado 3 que estiver dentro da pasta 1. Já no exemplo abaixo: <a href= /5/3.html >Clique aqui</a> O Valogico irá procurar uma pasta chamada 5 dentro da estrutura da pasta selecionada, ou seja: irá procurar por 1/5/3.html, sendo assim, não irá pular para a pasta 5 da raiz do aplicativo. Animações feitas em javascript dentro do HTML Todas as animações feitas em javascript, deverão ser iniciadas dentro da função ready(). Recomendamos não se utilizar muito deste tipo de recurso pois o ipad está sujeito a não trabalhar da melhor forma. Conforme o código abaixo: function ready(){ //código de animações aqui }

Testes O teste do material pode ser feito no desktop usando: Safari(PC ou MAC) ou Chrome, como também no próprio tablet, usando Adobe Shadow para a realização do teste em tempo real das telas, possiblitando editar o CSS e verificar a velocidade das animações no navegador: http://labs.adobe.com/downloads/shadow.html 1 - Faça o download do Adobe Shadow (Windows ou Mac). 2 - Faça o download do APP Adobe Shadow (Android ou ipad). 3 - Faça o download da extensão do GOOGLE CHROME. 4 - Certifique- se que as telas estejam em um ambiente online(www) ou localhost. 5 - Faça a conexão Tablet X Chrome via: cabo ou wifi. Faça os testes em tempo real, atualizando os códigos e efetuando refresh no tablet, ou usando <> para abrir o developer tools. Veja como funciona o Adobe Shadow: Compatibilidade O Valogico é compatível com todas as ferramentas de conversão em html5 atuais do mercado (Wallaby, Edge, etc.), porém, com algumas exceções: 1 - Sempre manter a estrutura padrão do index.html; 2 - Remover bibliotecas em javascript que contenham alguma interação gestual para não conflitar com as nativas; 3 - Testar o material na aplicação dentro do ipad e constatar que todas as funções nativas estejam funcionando.

Boas práticas Abaixo, seguem algumas dicas que fornecem a vocês melhores práticas para o desenvolvimento de conteúdo de e- detailing. Hábitos que devemos deixar para trás. Não se esqueça que 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. Utilize um símbolo para indicar onde há 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 paraque esse aprendizado ocorra da maneira mais rápida e efetiva possível. Uma ótima 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 explicar aos representantes que onde houver este símbolo, haverá uma animação esperando para ser disparada através de um clique na tela. 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. 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 dia- a- 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. 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. Cuidados 1 - Manter a estrutura de pastas idêntica como nos exemplos deste manual. 2 - Evitar o uso de eventos em toda a tela, somente em elementos específicos. 3 - O uso do Safari como ambiente de teste é recomendado por ser o mesmo utilizado pelo ipad.