Há um crescimento gigantesco do número de pessoas que acessam a internet através de seu smartphone ou tablet, isso faz com que cada vez mais estas pessoas busquem por soluções que possam ser utilizadas através do próprio celular ou tablet. Esta nova geração de usuários preferem sistemas ou mesmo sites que possam ser visualizados de forma adequada em seus dispositivos, fazendo com tempo seja economizado e o acesso seja realmente móvel, hoje iremos dar início ao desenvolvimento de um formulário completo em HTML totalmente otimizado e desenvolvido para que seja bem visualizado e totalmente operacionalizável através de um smartphone ou mesmo um tablet.

TECNOLOGIAS UTILIZADAS

Há muitas formas de criar aplicativos que rodem diretamente no smartphone, mas a abordagem de se produzir aplicativos nativos é sempre um pouco complicado, pois você deverá criar um aplicativo para cada plataforma que se deseja executar o aplicativo, caso queira aprender a desenvolver aplicativos nativos para Android, temos uma série completa produzida aqui no Escola Criatividade, alguns destes artigos são listados abaixo:

No artigo de hoje iremos aprender uma nova abordagem que é a de construir aplicativos mais genéricos, ou seja, eles poderão ser executados em qualquer plataforma móvel moderna, sem muitas alterações, já que o mesmo utilizará tecnologias que são comuns a estes dispositivos tais como o HTML, CSS e o JavaScript.

Na construção de aplicativos para dispositivos móveis há um grande foco na construção dos códigos JavaScript, sejam eles JQuery ou não, estes códigos JavaScript são o que darão mais vida ao nosso aplicativo, realizando validações, efeitos visuais tornando o aplicativo o mais próximo de um aplicativo nativo. Além das técnicas de desenvolvimento web utilizadas em um aplicativo comum, executado no navegador de um computador temos de encontrar formas de fazer com que nosso aplicativo seja bem interativo e tenha uma ótima qualidade.

html5

PREPARANDO O AMBIENTE DE DESENVOLVIMENTO

Para o desenvolvimento de aplicativos baseados em HTML preparados ou não para dispositivos móveis é recomendado ter um servidor web para tal tarefa, também é possível realizar testes apenas acessando os arquivos diretamente no computador hospedeiro mas esta não é a melhor estratégia. Eu sempre recomendo o uso do pacote WAMP Server pois o mesmo já instala de uma só vez um servidor web, no caso o Apache, o PHP e também o MySQL que usaremos lá na frente para salvar dados em um banco de dados. Se quiser mais detalhes sobre este pacote, escrevi um pouco sobre ele no artigo sobre o Yii Framework e pode ser acessado neste link: PHP Orientado a Objetos: Introdução ao Yii Framework.

Além de ter um servidor web para rodar a sua aplicação também será necessário ter um dispositivo móvel, é preferível que o mesmo seja Android ou rode o iOS da Apple. Este dispositivo deve compartilhar alguma rede com o computador hospedeiro, a melhor forma de se ter um ambiente como este é conectando ambos a uma rede wifi. Depois disso apenas verifique o IP do servidor e insira no navegador do seu dispositivo.

UTILIZANDO HTML EM DISPOSITIVOS MÓVEIS

Se você já está acostumado a desenvolver sites, sistemas web certamente não terá dificuldades para criar aplicativos para dispositivos móveis utilizando o HTML, isso porque praticamente todo o código utilizando em um sistema web convencional será utilizado em um sistema dedicado aos celulares ou tablets, temos apenas de ter alguns detalhes em mente. O primeiro de todos é que um dispositivo móvel não possui, geralmente, toda a largura de banda encontrada em um computador conectado a uma rede local. Muitas vezes estes aplicativo serão executados no trânsito, no trabalho, em um passeio, isso faz com que a preocupação com performance que já deve ocorrer em aplicativos convencionais seja redobrada neste caso.

Para a construção destes aplicativos iremos utilizar o HTML 5, que possui uma linguagem de marcação muito mais limpa fazendo com que o código resultante seja muito mais leve e rápido. Depois disso é necessário adicionar algumas tags especiais que farão toda a diferença no momento da renderização,fazendo com que o dispositivo não trate a página HTML como uma página comum e sim como uma página preparada para ser executada em um dispositivo móvel.

TESTANDO O FUNCIONAMENTO DO AMBIENTE

Antes de continuar o desenvolvimento é muito importante fazer um pequeno teste para vermos se o dispositivo que iremos testar os aplicativos consegue acessar adequadamente o computador hospedeiro. Para isso você terá que saber o IP do computador que irá hospedar a aplicação. Geralmente para acessar a aplicação podemos acessar pelo endereço: http://ip-do-servidor/nome-da-aplicacao. Aproveitando este momento em que iremos testar uma aplicação aproveitaremos para verificar como uma página HTML se comporta se não fizermos as adaptações necessárias para que elas fiquem otimizadas para os mecanismos de busca. Crie uma pasta na raiz de seu servidor web, no caso do wamp é a pasta www, você pode usar qualquer IDE para facilitar o seu desenvolvimento, por aqui usamos o Aptana, que é um fantástico ambiente baseado no Eclipse que é bastante otimizado para o desenvolvimento de páginas HTML e folhas de estilo CSS.

Dentro da pasta crie uma página HTML com o nome pagina-nao-otimizada.html e insira o seguinte conteúdo:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Aplicativo Web para Dispositivos móveis</title>
    </head>
    <body>
        <h1>Aplicativo Web para Dispositivos móveis</h1>
        <p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos,
        	e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja
        	de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não
        	só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente
        	inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens
        	de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.</p>
    </body>
</html>

Depois de acessar a página e ter a convicção de que a aplicação está disponível para visualização e testes podemos constatar alguns fatos:

  • O navegador até conseguiu renderizar a página corretamente, mas o texto está muito pequeno, sendo praticamente impossível ler a primeira vista. Isso acontece porque o navegador do dispositivo assumiu a verdade que esta página foi feita para um computador convencional, desta forma ele apresentou a página de uma maneira muito reduzida para exibir a página com o máximo de conteúdo possível.
  • Também é possível perceber que há opções de aumentar o zoom e diminuir bem como barra de rolagens que possibilitam navegar entre as páginas.

TAG VIEWPORT

A tag ViewPort é uma tag não normalizada pela W3C mas muito usado quando o assunto é desenvolvimento de aplicativos web para dispositivos móveis, ela foi inicialmente intriduzida pela Apple em seu navegador Safari para que as páginas fosse corretamente exibidas nos dispositivos menores tais como iPhone, iPod e mesmo os iPad’s. Mesmo não sendo uma tag normalizada ela é muito difundida e quase todos os navegadores móveis conseguem reconhecer os valores passados nesta tag, Opera, Mozilla, Chrome e navegadores padrão do Android reconhecem normalmente esta tag. Sem o uso desta tag especificamente o navegador é induzido a acreditar que a página é uma página convencional e irá renderizar da maneira que observamos no exemplo anterior.

Para inserir a tag viewport você fará a inclusão do seguinte código:

<meta name="viewport" content="height= device-height; width: device-width; user-scalable=0;" />

Com a inclusão desta tag estamos informando basicamente 3 dados para o navegador móvel, são elas:

  • Width: Estamos informando o valor device-width, ou seja, o navegador irá assumir como largura da tela o tamanho da tela do dispositivo, outros valores podem ser informados, absolutos ou não;
  • Height: Estamos informando o valor device-height, ou seja, o navegador irá assumir como altura da tela o tamanho da tela do dispositivo;
  • User-scalable: Caso seja marcado com zero não permite ao usuário utilizar escalas na tela, caso o valor seja 1 é permitido.

Depois de incluir a tag viewport, volte a acessar a página através da URL, perceba que o navegador renderizou a página de uma maneira totalmente diferente, agora não é mais necessário realizar qualquer aumentar de zoom, pois o texto está em um tamanho de acordo com o tamanho do dispositivo. Perceba tambem que não é possível aumentar e diminuir o zoom já que definimos o valor da variável responsável por esta opção como sendo false (0).

COM A CARA DE UM APLICATIVO

O objetivo desta série é criar aplicativos web que sejam totalmente preparados para serem executados a partir de dispositivos móveis, pensando nisso não seria nada elegante ter uma barra de endereços sendo mostrada juntamente com nossa página HTML, isso além de não apresentar uma boa estética pode fazer com que o usuário seja levado ao erro, alterando o conteúdo da barra de endereço fazendo com que saia da página que estamos acessando no momento. Para isso iremos inserir o seguinte código na página:
<body onload="window.scrollTo(0, 1);">

Coloque isto no lugar do <body> e torne a visualizar o conteúdo da página, verá que não mais é possível visualizar a barra de endereços.

Neste artigo tivemos a introdução do desenvolvimento web para dispositivos móveis, em breve teremos mais artigos aprofundando este assunto que certamente fará com que você tenha outros olhos quando o assunto é desenvolvimento web, certamente desenvolver nesta perspectiva fará você economizar muito tempo, já que você não terá que aprender muitos dos aspectos da API do Android, até lá!

Abraços,

 

Autor: Jair Rebello

Blog do Autor | Artigos do Autor:

Analista de Sistemas, empreendedor e blogueiro que dedica parte de seu tempo para a partilha de material de grande qualidade relacionados a Wordpress, SEO, Tableless, JQuery, PHP, Android e outras tecnologias mais. Pode me encontrar no Escola Sites ou O Android.

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. Eugenia Soares
    17 de dezembro de 2012

    Ola. Adorei o artigo.
    Gostaria de saber se vcs jah conhecem as novas ferramentas da Adobe, o Adobe Edge. Eu entrei no cloud, estou usando e é impressionante. Facilitou a vida de todos nos. Fazemos o design e o HTML5 e CSS entram automaticamente. É simplesmente fantastico.



    • Douglas Mendes
      19 de dezembro de 2012

      Realmente Eugenia, essa ferramenta da adobe e impressionante mesmo, eu ainda não esto utizando ela mais pelo que vi vale a pena usar.



      • Jair Rebello
        26 de dezembro de 2012

        Douglas, de fato parece ser uma boa ferramenta irei olhar com mais calma e trazer, se possível mais detalhes.

        Abraços,



    • Jair Rebello
      26 de dezembro de 2012

      Eugenia, irei olhar a ferramenta e quem sabe trazer mais detalhes sobre a mesma em um futuro artigo, obrigado pela colaboração.

      Abraços,



  2. Fernando Guedes
    18 de dezembro de 2012

    Como faço para acessar o localhost do meu computador apartir do dispositivo android?
    Desde já agradeço.



    • Jair Rebello
      26 de dezembro de 2012

      Fernando, como falado no artigo você deve estar em uma rede wifi, com isso você consegue acessar o computador através do ip do computador.

      Abraços,



  3. cadu
    25 de dezembro de 2012

    Ola, fiz o testes aqui no Galaxy S3 e nao sumiu a barra e nem mudou nada com a TAG VIEWPORT. … sabe me dizer pq?
    abracos



    • Jair Rebello
      26 de dezembro de 2012

      Cadu, possui a certeza de ter feito tudo corretamente?



  4. Anderson
    5 de janeiro de 2013

    Recentemente criei meu primeiro site responsivo, foi só de uma página por isso foi bem fácil e é bem legal ver o resultado final! Ainda tenho algumas dúvidas sobre o uso do HTML5, já vi sites que usam o mais de uma vez na mesma página… isso é permitido?



  5. Desenvolvimento Software
    8 de janeiro de 2013

    Com o avanço do mobile, muitos programadores estão migrando seus sistemas para aplicativos moveis, eu estou planejando um aplicativo e seu artigo é de imensa ajuda. Parabéns!!



  6. julio cesar são paulo - capital
    28 de outubro de 2013

    adorei seu blog,jair tenho muita vontade de aprender html5, queria aprender em casa(autodidata),na sua opinião qual livro é o melhor para aprender html5.fuiiiiiiiiiiiiii blog nota 10.



  7. Leandro Sousa Azevedo
    14 de março de 2014

    Olá amigo, estou iniciando no Jquery Mobile e me deparei com algo que ainda não consegui achar uma alternativa, seguinte, possuo uma lista:


    TESTE DE NOME MUITO GRANDE QUE NAO CABE NA TELA DE ALGUNS DISPOSITIVOS

    Neste caso em qualquer smartphone com tela de aproximadamente 4 polegadas, o texto apareceria mais ou menos assim: “TESTE DE NOME MUITO GRAN…”, ao invés de fazer a quebra de linha…

    Gostaria de saber se você conhece alguma forma que eu possa forçar a quebra de linha.

    Agradeço a Atenção!



  8. Carla Bonelar
    28 de novembro de 2014

    Gostei muito desse artigo.. mas queria saber se utilizando esse método teria como construir uma interface para desktop???


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz