Como usar o AJAX para fazer uma aplicação para programação HTML5 e CSS3 - manequins

Todo mundo quer fazer aplicativos para celular nos dias de hoje. Aqui está o grande segredo. Muitos aplicativos são realmente escritos em HTML5, CSS e JavaScript. Você já sabe tudo o que precisa para fazer aplicativos que funcionam em dispositivos móveis. Melhor ainda, você não precisa aprender um novo idioma ou obter permissão da loja de aplicativos ou comprar uma licença, como você faz para aplicativos nativos.

Há alguns truques maravilhosos que você pode fazer para usuários do iOS. Você pode projetar seu programa para que o usuário possa adicionar um ícone diretamente à área de trabalho. O usuário pode então iniciar o programa como qualquer outro aplicativo. Você também pode fazer o navegador ocultar os acessos normais do navegador para que seu programa não pareça estar sendo executado em um navegador!

Acontece que esses efeitos são bastante fáceis de fazer.

Adicione um ícone ao seu programa

As versões modernas do iOS (o sistema operacional iPhone / iPad) já possuem a capacidade de armazenar qualquer página na área de trabalho. Basta ver a página da Web no Safari e clicar no botão Compartilhar. Você encontrará uma opção para salvar a página da web na área de trabalho. Você pode instruir seus usuários a fazer isso, e eles poderão iniciar seu programa como um aplicativo normal.

No entanto, o ícone padrão para um aplicativo salvo é bastante feio. Se você quiser um ícone bonito, você pode salvar uma pequena imagem como um. png e coloque-o no mesmo diretório do seu programa. Então, você pode adicionar essa linha à sua página (no cabeçalho) e essa imagem aparecerá na área de trabalho quando o usuário salva seu programa:

Como um bônus adicional, o iPhone ou o iPad ajustam automaticamente a imagem para se parecer com uma Ícone da Apple, adicionando os efeitos apropriados para a versão instalada do iOS (arredondado e vítreo no iOS6, plano no iOS7.)

Claro, esse truque de ícone é um mecanismo único para Apple. Com a maioria das versões do Android, qualquer marcador que você designou com seu navegador principal pode ser adicionado à área de trabalho, mas não há nenhuma opção de ícone personalizado. A diretiva apple-touch-icon simplesmente será ignorada se você estiver usando algum outro sistema operacional.

Remova a barra de ferramentas do Safari

Embora o seu programa pareça bom na tela principal, quando o usuário ativa o programa, ainda é óbvio que o programa faz parte do navegador da Web. Você pode ocultar facilmente a barra de ferramentas do navegador com outra linha no cabeçalho:

Este código não fará nada diferente, a menos que o programa seja chamado da área de trabalho. No entanto, nesse caso, esconde a barra de ferramentas, tornando o programa a se parecer com um aplicativo completo. Como um bônus adicional, isso executa o programa em modo de tela cheia, dando-lhe um pouco mais de espaço para o jogo.

Novamente, esta é uma solução específica da Apple. Não há uma maneira fácil de alcançar o mesmo efeito nos dispositivos Android.

Armazene o seu programa offline

Agora, o seu programa se parece muito com um aplicativo, exceto que ele só é executado quando você está conectado à Internet. O HTML5 possui um recurso maravilhoso que permite que você armazene uma página da Web inteira localmente a primeira vez que ela é executada.

Então, se o usuário tentar acessar o programa e o sistema não pode entrar online, a cópia local do jogo será executada. Em essência, o programa é baixado pela primeira vez que ele é ativado e permanece no dispositivo local.

Este é um efeito relativamente fácil de alcançar:

• Tornar o seu programa estável: Antes de poder usar o mecanismo de armazenamento off-line, você quer se certificar de que o seu programa está perto de estar pronto para a versão. No mínimo, você precisará garantir que você conheça todos os arquivos externos necessários ao jogo.

• Use apenas recursos locais: Para esse tipo de projeto, você não pode confiar na Internet externa, então você precisará ter todos os seus arquivos locais. Isso significa que você não pode realmente usar PHP ou arquivos externos. Você precisará ter uma cópia local de tudo no servidor.

• Construir um cahce. arquivo de manifesto: Veja o diretório que contém seu jogo e crie um novo arquivo de texto chamado.

• Escreva a primeira linha: A primeira linha do cache. O arquivo de manifesto só deve conter o texto CACHE MANIFEST (tudo em letras maiúsculas).

• Faça uma lista de todos os arquivos no diretório: Escreva o nome de cada arquivo no diretório, um arquivo por linha. Tenha cuidado com sua capitalização e ortografia.

• Adicionar o atributo de manifesto: A tag possui um novo atributo chamado manifesto. Use isso para descrever o servidor onde o manifesto do cache pode ser encontrado:

• Carregar a página normalmente: Você precisará carregar a página da Web uma vez na maneira normal. Se tudo estiver configurado corretamente, o navegador silenciosamente criará uma cópia do arquivo.

• Teste off-line: A melhor maneira de testar o armazenamento off-line é desativar temporariamente o acesso sem fio na sua máquina e depois tentar acessar o arquivo. Se as coisas funcionassem, você poderia ver sua página como se ainda estivesse online.

• Verifique as configurações do servidor: Se o armazenamento off-line não estiver funcionando, talvez seja necessário verificar com a administração do servidor. O tipo MIME de texto / manifesto precisa ser configurado no servidor. Talvez você precise solicitar ao administrador do servidor que defina esta opção no. arquivo htaccess para sua conta:

  addtype text / cache-manifesto. manifesto
  

Observe que pode levar o mecanismo do cache-manifesto várias horas para reconhecer mudanças, então, quando você faz alterações na sua página, essas alterações não são atualizadas automaticamente para o navegador local. É por isso que é melhor salvar o arquivamento off-line para o fim do seu ciclo de desenvolvimento de projetos.