Design de aplicativo móvel / Navegação de desenvolvimento de desenvolvimento com jQuery

Os smartphones agora estão equipados com alguns navegadores da web muito eficientes. O JavaScript é mais poderoso do que nunca e pode ser estendido com a ajuda de bibliotecas de código como o jQuery. Quando você adiciona as especificações mais recentes de HTML5 / CSS3, é possível criar aplicativos da Web para dispositivos móveis muito ágeis com algum código de frontend básico.

Neste tutorial, mostrarei como você pode criar um website / webapp baseado em dispositivos móveis. Usaremos as consultas de mídia CSS3 para segmentar dispositivos específicos e resoluções de tela. Mais um pouco de jQuery ajuda a animar o menu e carregar o conteúdo da página externa usando chamadas Ajax. Melhor ainda, o layout pode até ser expandido para ser exibido corretamente em navegadores de desktop comuns, como o Chrome ou o Firefox.

Demonstração ao vivo
Código fonte

Definindo a estrutura da página

Vamos começar passando por cima da página HTML primeiro e estilizá-la usando algumas regras CSS. Vou pular a maioria das meta tags incomuns no cabeçalho, pois elas não afetam diretamente o aplicativo da web. No entanto, existem alguns que devo mencionar, nomeadamente a partir do fragmento abaixo:

X-UA-Compatible é usado para descrever como seu documento deve ser renderizado em determinados navegadores. É um cenário interessante ao codificar em HTML5, então eu não me preocuparia muito com isso. No entanto, o meta janela de exibição tag é muito importante. Define a janela do navegador móvel como 100% em vez do efeito de zoom padrão.

Também é possível desativar o zoom do usuário com o valor do conteúdo escalável pelo usuário = não. Mas neste caso, só queremos definir a largura da tela inteira como a largura do nosso dispositivo. As tags do aplicativo da web da Apple permitirão que o website seja salvo como um ícone da tela inicial no iPhone ou no iPod Touch. Não totalmente necessário, mas certamente vale a pena ter.

Conteúdo Corporal Interno

Dentro da tag body, eu configurei um wrapper div com o ID #W. Por dentro, quebrei o layout em mais duas divs usando IDs #pagebody e #navmenu. A largura total da página é limitada a 640px por opção, para que o layout seja dimensionado para um número restrito.

   HK Mobile
 
  Bem-vindo ao site móvel!
 
 
   Links de menu
 
  Casa
 Sobre nós
 Anunciar
 Escreva para nós
 Contatos
 Política de Privacidade

O menu de navegação recebe um valor de z-index mais baixo #pagebody está sempre no topo. Isso é crucial, pois o código JavaScript deslizará sobre o corpo da página um certo número de pixels para revelar a navegação abaixo.

Eu usei um símbolo de hash (#) na frente de cada página .html para impedir algum mau comportamento no Mobile Safari. Sempre que você clica em um link, a barra de URL aparece e empurra o conteúdo para baixo. Mas quando se faz referência a um ID, nada é recarregado, exceto através de chamadas JavaScript.

Posicionamento CSS

Não há muito conteúdo confuso dentro do nosso código CSS. A maior parte do posicionamento é feita manualmente e depois manipulada através do jQuery. Mas existem algumas peças interessantes no nosso documento.

/ ** @ core body body ** / #w #pagebody position: relative; esquerda: 0; max-width: 640px; min-width: 320px; índice z: 99999;  #w #navmenu fundo: # 475566; altura: 100%; display: bloco; posição: fixa; largura: 300px; esquerda: 0px; top: 0px; z-index: 0;

Este segmento superior define estilos para ambas as seções da página. Nosso menu de navegação tem apenas 300px de largura, então isso deixa um pouco de espaço para o conteúdo da página ainda ser visto. O botão de menu abrir / fechar também está localizado diretamente no lado esquerdo e sempre acessível. A parte importante aqui é o valor da propriedade z-index e usando posição: fixa; no nosso navmenu.

O cabeçalho da barra de ferramentas superior também é uma seção interessante. Isso é definido para uma posição fixa, então ele irá rolar com o conteúdo da página. Isso replica um efeito semelhante ao encontrado em qualquer barra de título do aplicativo iOS.

/ ** @ cabeçalho de grupo ** / #w #pagebody header # toolbarnav display: block; posição: fixa; esquerda: 0px; top: 0px; índice z: 9999; background: # 0b1851 url ('img / tabbar-solid-bg.png') superior esquerdo sem repetição; raio de fronteira: 5 px; -moz-border-radius: 5px; -webkit-border-radius: 5 px; -o-border-radius: 5px; border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; altura: 44px; largura: 100%; max-width: 640px;  #w #pagebody header # toolbarnav h1 text-align: center; top de preenchimento: 10px; preenchimento à direita: 40px; color: # e6e8f2; intensidade da fonte: Negrito; tamanho da fonte: 2.1em; text-shadow: 1px 1px 0px # 313131;

Regras para celular

É fácil perceber que também estou usando uma imagem de plano de fundo para a textura da barra de cabeçalho azul. Isso é dimensionado em 640 × 44 pixels para manter a estrutura de layout consistente. Mas eu também desenvolvi uma imagem @ 2x para telas de retina iPhone / iPad. Você pode ver as duas imagens abaixo ou pegá-las no meu código-fonte de demonstração.

System/demo/img/[email protected]
System/demo/img/[email protected]

Eu configurei o CSS móvel para essa funcionalidade em outro arquivo chamado responsive.css. Ele contém duas consultas de mídia que substituem a barra de título bg e o ícone do botão de menu para dispositivos de retina.

/ ** display retina ** / tela @media only e (-webkit-min-device-pixel-ratio: 2), somente tela e (min-moz-device-pixel-ratio: 1.5), somente tela e ( rácio mini- dispositivo-pixel: 1.5) #w #pagebody header background: # 0b1851 url ('img/[email protected] ') superior esquerdo sem repetição; tamanho de fundo: 640px 44px;  #w #pagebody header # menu-btn fundo: url ('img/[email protected] ') sem repetição; tamanho de fundo: 53px 30px;

Criando setas de menu

Na área de navegação, incluí também um pequeno ícone de seta para o lado direito de cada link de menu. Isso pode ser facilmente substituído por uma imagem de qualquer arte-final de creative commons. Mas principalmente todos os aficionados do CSS3 vão adorar testar este método.

#w #navmenu ul li a :: após content: "; display: block; width: 6px; altura: 6px; border-right: 3px sólido # d0d0d8; border-top: 3px sólido # d0d0d8; posição: absoluto; direito : 30px; top: 45%; -webkit-transform: girar (45deg); -moz-transform: girar (45deg); -o-transformar: girar (45deg); transformar: girar (45deg); #w #navmenu ul li a: hover :: após border-color: # cad0e6;

Estamos usando o transformar propriedade para criar uma pequena borda após o conteúdo. Eu também setup posição: absoluta; para que possamos mover livremente essas bordas em torno do item do link interno. É muito fácil alterar a cor da borda em um estado de foco, o que oferece uma sensação mais dinâmica. É incrível o que você pode realizar usando regras básicas de HTML5 e CSS3.

Mas agora vamos para os pedaços de código JavaScript. Lembre-se de que isso requer uma inclusão na biblioteca jQuery para que meu código seja executado corretamente.

jQuery Animated

Ao escrever esses códigos personalizados, criei um novo documento chamado script.js. Sinta-se à vontade para escrevê-los diretamente > tags ou faça o download do meu exemplo no código-fonte de demonstração.

 $ (document) .ready (function () var pagebody = $ ("# pagebody"); var themenu = $ ("# navmenu"); var topbar = $ ("# toolbarnav"); var conteudo = $ (" #content "); var viewport = largura: $ (window) .width (), height: $ (window) .height (); // recupera variáveis como // viewport.width / viewport.height 
 Para começar, configurei algumas variáveis de página, nas quais podemos fazer referência a elementos no documento com muito mais rapidez. O valor da viewport nunca é usado, mas pode ser útil se você desejar ajustar os estágios da animação. Por exemplo, você pode verificar a largura atual do navegador e abrir o menu menor ou mais amplo de acordo.
 function openme () $ (function () topbar.animate (esquerda: "290px", duration: 300, fila: false); pagebody.animate (left: "290px", duration: 300 fila: false););  função closeme () var closeme = $ (função () topbar.animate (left: "0px", duration: 180, fila: false); pagebody.animate (left: "0px", duration: 180, fila: false);); 
 Em seguida, defini duas funções importantes para abrir e fechar o menu. Isso poderia ter sido feito em uma única função e na alternância de retorno de chamada - exceto que, na verdade, precisamos animar dois elementos distintos ao mesmo tempo. Infelizmente este não é o comportamento padrão para o jQuery, então precisamos recorrer a uma sintaxe alternativa.
 Os dois elementos que estamos segmentando são nomeados Barra superior e pagebody. A área de conteúdo interno com um fundo branco é o corpo da página completo; no entanto, temos a posição da barra de título fixada no topo da página. Isso significa que ele não será naturalmente animado com a página e precisamos usar uma chamada separada. A abertura está configurada para empurrar 290px para a esquerda (quase a largura total de navega- ção de 300px) e a função de fechamento se retrai.
 Carregando conteúdo dinâmico
 O código acima é fácil o suficiente para cuidar da animação. E, teoricamente, é tudo o que você precisa para um website móvel tão simples - mas quero adicionar um pouquinho mais.
 Cada vez que o usuário clica em um link de menu, queremos fechar a navegação atual e exibir um gif de carregamento enquanto procuramos pelo conteúdo da página. Então, uma vez concluído, removemos a imagem gif e carregamos tudo dentro dela. Isso é fantástico porque podemos até usar páginas .html estáticas para o conteúdo. Não PHP ou Ruby ou Perl ou quaisquer idiomas backend para tornar as coisas bagunçadas.
 Gerenciando cliques
 Primeiramente, queremos testar quando nossos usuários clicam nos botões de navegação. Isso impedirá que o valor href normal seja carregado e, em vez disso, podemos usar nossas próprias funções para exibir conteúdo externo.
 // carregando o conteúdo da página para navegação $ ("a.navlink"). live ("clique", função (e) e.preventDefault (); var linkurl = $ (this) .attr ("href"); var linkhtmlurl = linkurl.substring (1, linkurl.length); var imgloader = ''; 
 Agora estamos abrindo um seletor para qualquer âncora com a classe navlink. Sempre que um usuário clica em um desses links, impedimos que ele carregue e configure uma variável para o URL completo. Eu também configurei uma variável para o conteúdo HTML para incluir um carregador de imagem padrão. Se você quiser personalizar o seu próprio eu recomendo altamente Ajaxload.
 Ajax .load ()
 Há duas peças diferentes para esse efeito que eu separei nitidamente. O código abaixo é o nosso primeiro bit que fecha o menu de navegação e desliza a janela total do documento até o topo. Queremos substituir o conteúdo do corpo interno por uma animação de carregador pequeno, e os usuários não podem ver isso se estiverem olhando a parte inferior da página.
 closeme (); $ (function () topbar.css ("top", "0px"); window.scrollTo (0, 1););
 Agora, finalmente, queremos substituir o conteúdo do corpo interno por nossa imagem e buscar a página externa para carregar. Normalmente, isso levará apenas algumas centenas de milissegundos ou até mais rápido, então defini uma função de tempo limite.
 content.html (imgloader); setTimeout (function () content.load (linkhtmlurl, função () / * sem retorno de chamada * /), 1200);
 Isso fará uma pausa de 1200 milissegundos antes de carregar novo conteúdo. Para minha demonstração, isso parece muito melhor e dá uma idéia de como o aplicativo se comportaria em conexões de Internet mais lentas.
 
 Conclusão
 Encorajo todos os desenvolvedores da Web a baixar o código-fonte do tutorial e brincar por conta própria. Este é um exemplo básico do que pode ser feito com HTML / CSS3 e um toque de efeitos JavaScript. Criar telas para dispositivos móveis é mais fácil do que nunca com consultas de mídia e navegadores da Web mais extensíveis.
 Veja se você pode aplicar qualquer um desses códigos em seus futuros projetos da web. Construir aplicativos móveis é uma arte, muito parecida com o design da web, e requer muita dedicação e prática. Espero que este tutorial possa ser um bom ponto de partida para apenas alguns desenvolvedores entusiastas. Se você tiver dúvidas ou pensamentos sobre o código, sinta-se à vontade para compartilhar conosco na área de discussão posterior.