Participe deste Projeto

Criando meu primeiro Web App para Dispositivos Móveis – 1

Publicado em março 2nd, 2011 |

tutorial criando meu primeiro webapp para dispositivos moveis Criando meu primeiro Web App para Dispositivos Móveis 1

Tutorial Especial: Criando meu primeiro Web App para Dispositivos Móveis

Olá amigos e amigas como estão?
Bem, hoje iremos dar um grande passo em nosso Blog para ajudar você que sempre desejou ou mesmo quer entender como é feito os famosos Web App (site adaptado para dispositivos móveis).
-
Neste momento estaremos focando nos seguintes aparelhos: iPhone/iPodTouch/iPad por ser atualmente a grande referência para desenvolvimento destas aplicações web, mas como todo Web App ele roda em todos os tipos de aparelhos Smartphones só que com algumas diferenças que ao longo dos tutoriais você irá notar!
-
O que um Web App?

Web App ou (Web application), é uma aplicação web de um aplicativo que é acessado através de um aparelho móvel, mas não entrando no termo Notebook. O termo também pode significar uma aplicação de software de computador que está hospedado em um ambiente controlado pelo navegador ou codificados em uma linguagem suportada pelo mesmo (como JavaScript, HTML e Css) e é dependente de um browser comum para processar este aplicativo.

Outra coisa importante salientar é que um Web App não um aplicativo nativo de aparelhos móveis, ou seja, ele roda na web e adapta seu conteúdo para esse aparelhos e o que chamamos de “App nativos” são aqueles que você pode encontrar na App Store da Apple, no Android Market Store do Google ou mesmo na Ovi Loja da Nokia.
-
Agora que já foi explicado esta parte importante vamos começar!

Preparando o ambiente:
É importante que você já saiba trabalhar com HTML já que ela será a responsável de 98% de todo nosso trabalho.
Abra seu editor preferencial, copie e cole a estrutura abaixo:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN""http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html>
<head>
<meta content="yes" name="apple-mobile-web-app-capable" />
<title>TÍTULO DO SITE</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="apple-touch-icon.png" rel="apple-touch-icon" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />
<link href="png/startup.png" rel="apple-touch-startup-image" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>
<body>
CONTEUDO DO SITE
</body>
</html>

-
Explicando o código a cima:

  • 1º DOCTYPE: É para dizer ao navegador que aqui existe conteúdo específico para Mobile!
  • 2º Meta name apple-mobile-web-app-capable: Quer dizer esse conteúdo é criado para Apple Mobile!
  • 3º Meta name text/html; charset=utf-8: Ela passa ao navegador qual é o padrão de acentuação!
  • 4º Link rel apple-touch-icon: Quando você salvar o App em seu iPhone uma imagem irá aparecer customizada no Dock!
  • 5º Meta name viewport: Acredito que essa é a parte mais importante, porque é ela que trata de todas as funções no Web App como largura/altura dinâmica e etc…
  • 6º Link rel apple-touch-startup-image: Depois q o App for salvo no aparelho quando iniciado ele carrega uma imagem de abertura!
  • 7º Meta name apple-mobile-web-app-status-bar-style: Fazer com que a barra do topo do aparelho seja customizada!

-
Bem essa é a 1º Parte, na próxima semana trataremos do tamanho do Web App e sua formatação em CSS!
Abraço!



Tags:  |  |  |  |  |  |  |  | 

Ei, psi!! Convidamos você a visitar esses links também.

Rafael Hernandez

Sou Profissional Web com mais de 10 anos de carreira. Atualmente Palestrante, Instrutor e Coordenador de Projetos voltados a SEO e Social Media em São Paulo como também administrador do Blog Rafael Designer.



Comentários

  1. Publicado por zeustecnologia on março 2nd, 2011, 10:33

    Criando meu primeiro Web App para Dispositivos Móveis – 1: Tutorial Especial: Criando meu primeiro Web App para … http://bit.ly/ea7JvO

    [Responder ao Comentário]
  2. Publicado por Kleverson Neves on março 2nd, 2011, 10:46

    Rafael Designer Criando meu primeiro Web App para Dispositivos Móveis – 1: Olá amigos e amigas como estão?
    Bem, … http://bit.ly/fWocWu

    [Responder ao Comentário]
  3. Publicado por Marcelo Andrade on março 15th, 2011, 16:36

    Nossaaa Animal esse tutorial cara!
    Já tinha dias que eu estava procurando informações sobre Web App e não achava lugar nenhum em portugues…

    Parabéns ai e fico no aguardo do próximos.
    Valewwwwwwwwwwww

    [Responder ao Comentário]
  4. Publicado por Cynthia Hermanny on março 16th, 2011, 09:25

    Estou aguardando a segunda parte do tutorial ansiosa, porque esta primeira parte foi muito pequenininha.

    [Responder ao Comentário]
  5. Publicado por Rodrigo Costa on março 21st, 2011, 17:44

    RT @rafaeldesigner: Criando meu primeiro Web App para Dispositivos Móveis – 1: http://bit.ly/hYOymK #webapp

    [Responder ao Comentário]
  6. Publicado por Gil Christiano Guedes on setembro 23rd, 2011, 15:23

    Valeu!!!
    Muito interessante esse tutorial!
    Estou aguardando a segunda parte dele!!!

    [Responder ao Comentário]

Deixeu seu Comentário

Atenção:
Qualquer opinião publicada aqui no Blog Rafael Designer pelo nosso sistema de comentários, não reflete necessariamente, o pensamento e opinião de nossos Colaboradores. Os comentários publicados e aceitos pelo nosso sistema automático são de total responsabilidade e autoria dos leitores de nosso blog.

Sendo assim, reservamos o direito de excluir ou mesmo alterar opiniões que sejam de caráter ofensivo, calunioso, difamatório e preconceituoso como também leitores que publicarem somente links de forma a tentar ganhar Backlinks autênticos.