Que tal dar um charme ao seu aplicativo? Imagine que na primeira execução do App o usuário veja um tour explicativo sobre os recursos do App e dicas de utilização.
Isso é possível usando a biblioteca TinySlider.JS que oferece uma grande varidades de efeitos de slides, vamos lá;
- Faça o download da bilbioteca gratuita TinySlider.JS no GitHub https://github.com/ganlanyuan/tiny-slider. Se você estiver utilizando Visual Studio, pode fazer o download via Bower;
- Descompacte a pasta do TinySlider.JS e copie para dentro da pasta www do seu projeto.
- Crie um arquivo tour.html.
- Utilize o código a seguir como modelo;
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <title>Apresentação App Hidrosense</title> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> <link rel="stylesheet" href="tiny-slider/dist/tiny-slider.css"> <link rel="stylesheet" href="tiny-slider/dist/theme.css"> <script src="tiny-slider/dist/tiny-slider.js"></script> <link rel="stylesheet" href="framework7-icons-master/css/framework7-icons.css"> <style> .button { background-color: #2196F3; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; width: 100%; vertical-align: middle; } </style> </head> <body style="background-color: azure"> <div class="my-slider" align="center"> <div id="div0" style="padding-right: 20px; padding-left: 20px;"> <a href="index.html"> <button class="button">Pular introdução <i class="f7-icons">arrow_right_fill</i></button> </a> <h3><strong><i class="fa fa-map-marker" aria-hidden="true"></i> BEM VINDO AO MEU APLICATIVO</strong> </h3> texto de apresentação aqui.... <p></p> </div> <div id="div1" style="padding-right: 20px; padding-left: 20px;"> <h3><strong><i class="fa fa-map-marker" aria-hidden="true"></i> PASSO 1</strong> </h3> texto de apresentação aqui.... <p></p> </div> <div id="div2" style="padding-right: 20px; padding-left: 20px;"> <h3><strong><i class="fa fa-thermometer-quarter" aria-hidden="true"></i> PASSO 2</strong> </h3> texto de apresentação aqui.... <p></p> </div> <div id="div3" style="padding-right: 20px; padding-left: 20px;"> <h3><strong><i class="fa fa-tachometer" aria-hidden="true"></i> PASSO 3</strong> </h3> texto de apresentação aqui.... <p></p> </div> <div id="div4" style="padding-right: 20px; padding-left: 20px;"> <h3><strong><i class="fa fa-users" aria-hidden="true"></i> PASSO 4</strong> </h3> texto de apresentação aqui.... <p></p>. </div> <div id="div5" style="padding-right: 20px; padding-left: 20px;"> <h3><strong><i class="fa fa-check-circle" aria-hidden="true"></i> VAMOS COMEÇAR?</strong> </h3> Viu só como o <strong>MEU APLICATIVO</strong> é fácil? Agora é só começar a usar. <p></p> <a href="index.html"> <button class="button">Começar <i class="f7-icons">check_round_fill</i></button> </a> </div> </div> <script> var slider = tns({ container: '.my-slider', items: 1, slideBy: 'page', mouseDrag: true, controls: false, nav: true }); var alturaTela = screen.height - 150; document.getElementById("div0").style.height = alturaTela + "px"; document.getElementById("div1").style.height = alturaTela + "px"; document.getElementById("div2").style.height = alturaTela + "px"; document.getElementById("div3").style.height = alturaTela + "px"; document.getElementById("div4").style.height = alturaTela + "px"; document.getElementById("div5").style.height = alturaTela + "px"; </script> </body> </html>
Salvando e testando o arquivo teremos o seguinte resultado;
Importante
- Perceba que cada bloco de DIV é uma tela do tour.
- O código JS no final da página é responsável por deixar as DIVs com a altura da tela do dispositivo. Então, caso crie novas DIVs ou remova algumas das existentes, não se esqueça de atualizar o código JS
Como fazer com o tour seja exibido apenas na primeira execução do aplicativo?
Podemos resolver isso com localStorage, mas este é um assunto para a próxima aula. Aguarde!