Algumas vezes precisamos forçar a navegação de nosso aplicativo usando JavaScript. Por exemplo; supondo que você tenha criado uma página de login em seu aplicativo e após o login o usuário deverá ser redirecionado para outra página. No entanto, não podemos criar estes redirecionamentos com JS Nativo, conforme já vimos a troca de páginas no Framework7 é feita através de rotas definidas no my-app.js. Eu ensino como criar as páginas […]
Desenvolvimento de aplicativos
60 posts
Wireframe é um protótipo usado em design de interface para sugerir a estrutura de um site, aplicativo ou sistema de informação. Um wireframe é uma ilustração semelhante ao layout e elementos fundamentais da interface. Normalmente, wireframes são concluídos antes que qualquer trabalho artístico seja desenvolvido, tendo como principal objetivo a navegação e disposição do conteúdo, assim como demonstrar as preferências de um cliente quanto aos requisitos funcionais de um sistema. […]
Oi! Esta aula é apenas um complemento da aula Como ler uma estrutura jSON com JQuery de forma fácil., basicamente maior da parte do código é igual. Ao invés de usarmos o selet $.get do jQuery, no DOM 7 usamos request.json. Importante! Você deve estar com o seu webService funcionando, se você ainda não criou seu webservice, ou está com dificuldades com ele, acesse a aula JSON – Criando o […]
A API accuweather A API da accuweather oferece uma forma simples de colocar dados da condição climática e temperatura da sua cidade em seu site. A API utiliza de uma estrutura jSON. Para ter acesso aos dados jSon da cidade de Atibaia por exemplo, acesse o endereço; http://apidev.accuweather.com/currentconditions/v1/36728.json?language=pt&apikey=hoArfRosT1215 Você verá estas informações; Como obter dados de outras cidades? Note que a url, é o nome do arquivo .json que define […]
Para ler um arquivo ou uma estrutura de dados jSON usando jQuery é muito fácil. Aprenda a usar o $.get do jQuery De acordo com a Documentação do jQuery, uma das formas de ober valores de uma saída jSON externa a sua aplicação WEB é usando o seletor $.get, sua sintaxe é a seguinte; $.get( "http://endereco-da-estrutura-json/", function(data) { // códigos a serem executados aqui... }); Exemplo – Como ler uma […]
É comum situações na qual uma determinada função JS, DOM 7 ou jQuery só devem ser executadas quando o usuário acessa determinada página do aplicativo, logo, não podemos carregar estas funções de imediato no index, pois dependem da ação do usuário. Podemos carregar qualquer função diretamente no arquivo my-app.js, dentro do bloco routes. No modelo padrão disponibilizado na documentação do Framework 7 e visto nas aulas de Como criar uma […]
As vezes precisamos que o nosso aplicativo abra páginas externas mas não queremos que o usuário tenha que sair do aplicativo para poder navegar. O plugin cordova-plugin-inappbrowser resolve esta paradinha para você. A função abaixo deve ser utilizada junto com a função que verifica a conectividade com a Internet. Se você ainda não sabe como verificar se o usuário está conectado na internet ou não, então veja a aula aqui […]
Se em seu aplicativo você precisar checar a conexão com a Internet, o plugin cordova-plugin-network-information resolve esta paradinha para você. A função a seguir retorna se o dispositivo possuiu uma conexão com a internet. internet = 'No'; /* Verifica Conexão com a Internet */ function verificaInternet() { var networkState = navigator.connection.type; var states = {}; states[Connection.UNKNOWN] = 'Unknown'; states[Connection.ETHERNET] = 'Ethernet'; states[Connection.WIFI] = 'WiFi'; states[Connection.CELL_2G] = '2G'; states[Connection.CELL_3G] = '3G'; […]
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; […]
Pacote de ícones do Framework 7 Faça o download do pacote de ícones no GitHub; https://github.com/framework7io/framework7-icons Descompacte o arquivo Copie a pasta framework7-icons-master para dentro do seu projeto, cole dentro da pasta www. Como usar os ícones do Framework 7 Edite o arquivo index.html, acrescente a seguinte linha <link rel="stylesheet" href="framework7-icons-master/css/framework7-icons.css"> dentro do bloco <head> Agora você pode usar os ícones aonde quiser usando a sintaxe <i class="f7-icons">nome-do-icone</i>. O nome […]
Para criar um menu lateral no Framework 7 é bem simples, basicamente precisamos de dois códigos; código do painel lateral (side panel) No index.html, utilize o código abaixo logo após a linha <div id="app">. <div class="panel panel-left panel-reveal"> <div class="block"> <div class="list simple-list"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div> </div> </div> Código do link do menu O código abaixo deve ser colocado dentro da NAVBAR; <div class="right"> […]
Nesta aula eu ensino como criar as páginas internas do App – Como criar uma interface para seu aplicativo mobile usando Framework 7. O código a seguir acrescenta um botão voltar dentro das páginas internas e deve ser colocado dentro da DIV da NAVBAR. <div class="left"> <a href="#" class="back link"> <i class="icon icon-back"></i> </a> </div> O código inserido na NAVBAR ficará assim; <!-- Top Navbar --> <div class="navbar"> <div class="navbar-inner"> […]
Este é um exemplo bem legal de um código fornecido pelo site viacep.com.br que oferece gratuitamente uma API quer permite fazer consultas em uma cópia da base de dados dos Correios em busca de um determinado CEP. Troca a troca de dados com o site é feta via jSon. Exemplo funcionando Você pode ver a página estilizada com BootStrap aqui; https://www.blogson.com.br/exemplos/busca-cep/busca-cep.html Download do código – Busca Cep com JQuery e […]
Um servidor da WEB é considerado um ambiente de produção, ou seja, usamos um servidor da WEB quando já temos uma aplicação devidamente testada e funcionando. Muitos desenvolvedores fazem uso de softwares WAMP (Windows, Apache, MySQL/MariaBD, PHP), os famosos servidores localhost para simular um servidor de internet em seu próprio computador para depois então passar a utilizar um servidor de produção. Internal Server Error 500 No entanto, quando enviamos um […]
Hoje vamos aprender a resolver um problema comum em aplicações front-end e também em aplicativos híbridos quando precisamos ler parâmetros de uma página para outra sem utilizar linguagens de back-end, como PHP por exemplo. Conhecendo as funções JS Capturar o endereço da url com JavaScript Para capturar o endereço da url usamos a função window.location.href do JS. Esta função retorna o caminha completo da url, incluindo o http:// e […]
O HTML 5 possui uma lista de entities (caracteres especiais) na qual inclui algumas figuras semelhantes aos conhecidos ícones de emojis. O site que mais gosto de consultar é este: https://apps.timwhitlock.info/emoji/tables/unicode Outro site bem legal é esse outro aqui: https://getemoji.com/ Ao acessar a página você irá perceber o quanto extensa é a lista de entities. Com base nesta lista vamos criar um caixa de texto que aceite estes caracteres […]
Atenção: Se você é preguiçoso e não gosta de ler, então não me peça ajuda!!!! Aprenda a ler textos e documentos técnicos, compreender e interpretar passo-a-passos. Rotina esta que faz parte da carreira de qualquer profissional de tecnologia, não importando a área. O F7 foi introduzido no PhoneGap em 2015 e deste então se tornou um popular framework para desenvolvimento mobile, talvez seja um dos mais organizados frameworks para aplicativos […]
Recentemente publiquei um artigo sobre como criar um aplicativo utilizando apenas o Brackets, um tutorial bem legal para quem está começando e para aqueles que gostam de desenvolver usando linhas de comando no prompt (leia-se Linux nas entrelinhas). Hoje vamos usar o Visual Studio 2017 para criar aplicativos baseados em HTML 5, JavaScript e Cordova. O Visual Studio 2017 atualmente a IDE perfeita para quem quer aprender a desenvolver para mobile. […]
A nova versão 3 do FancyBox está ainda mais fácil de usar. FancyBox é um aclamando plugin jQuery que acabou virando uma biblioteca em função da sua popularidade. Você pode usar esta galeria tanto em web sites como em aplicativos baseados em HTML 5. O FancyBox inclusive tem um site novo; acesse: http://fancyapps.com/fancybox/3/ Assim como toda boa biblioteca, podemos utilizar os endereços CDNs para adicioná-la a nossa página Web. FancyBox também […]
Com a descontinuação do Intel XDK, estou criando um novo cronograma de aulas. Sobre o novo curso de desenvolvimento mobile O aluno deverá ter conhecimentos básicos de desenvolvimento web. As tecnologias abordadas neste curso são; Editor de códigos Brackets HTML 5 CSS 3 JavaScript Cordova e seus plugins Troca de Dados com servidores usando jSON PHP e MySQL para criação dos web services. Android SDK Aprenda a desenvolver aplicativos […]
Neste tutorial vou usar apenas o editor Brackets para criar o aplicativo a nada mais… nada de PhoneGap, Intel XDK, Atom, Visual Studio ou Android Studio, nada disso. A ideia aqui é usar o mínimo de ferramentas possíveis para resolver os mesmos problemas, então, mãos na massa. Preparando seu computador para desenvolver para mobile Instalando o NodeJS e NPM para criar seu primeiro aplicativo Para facilitar a criação de aplicativos […]
Esta é uma dica bem legal para sistemas web e também para aplicativos. Durante o carregamento de uma página podemos exibir um gif para entreter o usuário, além de informar visualmente que dados estão sendo carregados na página (lembre-se dos conceitos de UX). Isso se torna ainda mais eficiente quando precisamos carregar um volume grande de dados na página, o tempo excessivo do carregando pode fazer com que usuário abandone […]
Dando continuidade na aula anterior (clique aqui para ver a aula anterior) onde criamos a página HTML para um sistema de rating. Agora vamos incrementar um pouco mais este sistema. Evitando que o usuário avalie duas vezes. Temos que garantir que o usuário não avalie a mesma página duas vezes. Podemos resolver isso usando o localstorage do navegador que irá funcionar como um cache. Dentro a função Avaliar() criada na […]
Sistema de rating são aquelas populares estrelinhas pelas quais o usuários avaliam determinado conteúdo de um site ou aplicativo. Este artigo será divido em três partes, a primeira ensina a fazer os cliques das estrelinhas, a segunda ensinará a acumular a quantidade de avaliações em um banco de dados usando AJAX e a terceira irá tirar a média das avaliações, gerar um bloco schema.org e exibir os dados na página. Então… […]