Como usar ajax para fazer um aplicativo para html5 e css3 programação

Todo mundo quer fazer aplicativos móveis estes dias. Aqui está o grande segredo. Muitos aplicativos são realmente escrito em HTML5, CSS e javascript. Você já sabe tudo o que você precisa para fazer aplicativos que funcionam em dispositivos móveis. Melhor ainda, você não precisa de aprender uma nova língua ou obter permissão do app store ou comprar uma licença, como você faz para aplicativos nativos.

Há um par de truques maravilhosas que você pode fazer para usuários de iOS. Você pode projetar seu programa de modo que o usuário pode adicionar um ícone diretamente para o desktop. O usuário pode, em seguida, iniciar o programa como qualquer outro aplicativo. Você também pode fazer o navegador ocultar o navegador normal de apetrechos para que o seu programa não pareça que está sendo executado em um navegador!

Acontece que estes efeitos são muito fáceis de fazer.

Video: Tutorial - Criar jogo em javascript e html 5

Adicionar um ícone para o seu programa

versões modernas de iOS (sistema operacional do iPhone / iPad) já tem a capacidade de armazenar qualquer página da web no ambiente de trabalho. Apenas visualizar a página web no Safari e clique no botão Compartilhar. Você vai encontrar uma opção para salvar a página web para o desktop. Você pode instruir seus usuários a fazer isso, e eles vão ser capazes de lançar o seu programa como um aplicativo normal.

No entanto, o ícone padrão para um aplicativo salva é muito feio. Se você quer um ícone de boa aparência, você pode salvar uma pequena imagem como um arquivo .jpg e colocá-lo no mesmo diretório que o seu programa. Depois, você pode adicionar esta linha para sua página (no cabeçalho) e que imagem aparecerá na área de trabalho quando o usuário salva o seu programa:

Como um bônus adicional, o iPhone ou iPad ajustar automaticamente a imagem para olhar como um ícone da Apple, adicionando os efeitos apropriadas para a versão instalada do iOS (arredondado e vidrados no iOS6, apartamento em iOS7.)

Video: Como Criar Um Aplicativo Basíco RApidamente Com HTML E CSS- Parte 1

Claro, este ícone truque é único da Apple mecanismo. Com a maioria das versões do Android, qualquer marcador que você tenha designado com o seu navegador principal pode ser adicionado à área de trabalho, mas não há nenhuma opção de ícone personalizado. o apple-touch-icon directiva será simplesmente ignorado se você estiver usando algum outro OS.

Remova a barra de ferramentas do Safari

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

Este código não vai fazer nada diferente, a menos que o programa é chamado a partir do desktop. No entanto, nesse caso, ele esconde a barra de ferramentas, tornando o visual do programa e se sentir como um aplicativo completo. Como um bônus adicional, este executa o programa em um modo de tela cheia, dando-lhe um pouco mais de espaço para o jogo.

Mais uma vez, esta é uma solução específica de Apple. Não há uma maneira fácil de conseguir o mesmo efeito sobre os dispositivos Android.

Armazenar seu programa desligada

Agora o programa está olhando muito como um aplicativo, exceto que ele só funciona quando você está conectado à Internet. HTML5 tem uma característica maravilhosa que lhe permite armazenar uma página web inteira localmente a primeira vez que é executado.

Então, se o usuário tenta acessar o programa e o sistema não pode ficar online, a cópia local do jogo é executado em seu lugar. Em essência, o programa é baixado a primeira vez que é ativado e permanece no dispositivo local.

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

• Faça o seu programa de estabilidade: Antes de usar o mecanismo de armazenamento off-line, você vai querer certificar-se de seu programa está perto de lançar-pronto. No mínimo, você vai precisar para assegurar que você sabe todos os arquivos externos necessários pelo jogo.

• Use somente recursos locais: Para este tipo de projeto, você não pode confiar na Internet externo, então você precisa ter todos os seus arquivos locais. Isto significa que você não pode realmente usar PHP ou arquivos externos. Você precisa ter uma cópia local de tudo no servidor.

  Video: Veja como criar aplicativos HTML5 nativo para Android com cocoon io

• Criar um arquivo cahce.manifest: Olhe para o diretório que contém o seu jogo, e criar um novo arquivo de texto chamado.

  Video: Desenvolvendo um aplicativo HTML5 e Thunkable)

• Escreva a primeira linha: A primeira linha do arquivo cache.manifest deve conter apenas o texto CACHE MANIFEST (Tudo em 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 a sua capitalização e ortografia.

• Adicione o atributo manifesto: o tag tem um novo atributo chamado manifesto. Utilize-o para descrever para o servidor onde o manifesto de cache podem ser encontrados:

• Carregar a página normalmente: Você vai precisar para carregar a página web uma vez na maneira normal. Se tudo estiver configurado corretamente, o navegador irá tranquilamente fazer uma cópia do arquivo.

• Teste off-line: A melhor maneira de testar o armazenamento offline é para desligar temporariamente o acesso sem fio em sua máquina e, em seguida, tentar acessar o arquivo. Se as coisas deram certo, você deve ser capaz de ver a sua página como se você ainda estavam online.

• Verifique as configurações do servidor: Se o armazenamento off-line não está funcionando, você pode precisar verificar com seu administração do servidor. A / tipo MIME manifesto texto precisa ser configurado no servidor. Você pode ter que pedir ao seu administrador do servidor para definir esta opção no arquivo .htaccess para a sua conta:

  texto AddType / manifest cache-manifesto

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