Press "Enter" to skip to content

Tutorial: Fazendo WebApps

Olá, hoje eu passarei a dar “aulas” de programação em HTML para desenvolvedores (ou não) criarem WebApps.

Esse tutorial é focado nas pessoas que não possuem um Mac e querem programar para iPhone, porem pode ser feito em qualquer sistema. Esse tutorial foi criado para pessoas com um conhecimento no mínimo básico de HTML.

Antes de tudo, fazer um WebApp é difícil, logo você deve usar um editor de textos bom ou ótimo, eu recomendo o Notepad ++ para Windows e para Mac o AquaMacs.

Você também deve baixar uma folha de estilo e suas respectivas imagens (Baixe aqui!)

http://sites.google.com/a/superarts.org/soft/_/rsrc/1227063443164/Home/WebApps.tif?height=420&width=420

Comecemos então com a estrutura básica da tag <head>

<link href=”source/style.css” rel=”stylesheet” type=”text/css” />

Aqui você coloca o link para o Style.css que foi baixado.

<meta name=”apple-mobile-web-app-capable” content=”yes” />

Isso indica que o seu WebApp, se salvo na tela de inicio, não precisará do campo de endereço, busca e a MenuBar do Safari.

<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />

Isso indica que a StatusBar será preta e não branca, caso queira ela branca não ponha essa tag.

<meta name=”viewport” content=”width=device-width, user-scalable=no” />

Esse dá as medidas máximas do seu WebApp, por exemplo se for colocado content=”width=device-380, user-scalable=no” o seu WebApp ficará com a largura exata do seu GadGet

<link rel=”apple-touch-icon-precomposed” href=”http://icone.png” />

Esse indica que o ícone será predeterminado e precisa ter (57.57)

<meta name=”apple-touch-startup-image” content=”http://imagem.png”>

Esse define a tela “Default” quando o seu WebApp estive sendo carregado será exibida essa imagem (320.480)

Perceba que se for usado o Style.css que eu coloquei o resultado será de uma APP normal como o Ajustes.app

Agora vamos ao corpo:

<div id=”topbar”>

<div id=”title”>iBlack Icons</div>

<br > <br >

<div id=”content”>

<!– Opções –>

<span class=”graytitle”>Instruções</span>

<ul class=”pageitem”>

<p> Clique no botão +</p>

<p> Selecione “Adicionar à tela de inicio”</p>

<p> Não modifique nada, apenas clique em “Adicionar”</p>

<p> Um ícone transparente será adicionado na sua ‘HomeScreem'</p>

</ul>

<div id=”footer”>

<br>

<p class=”noeffect” >É simples !</p>

</div>

E agora decifrar:

div id=”topbar” > É a barra superior;

div id=”title” > É o título que estará na TopBar;

div id=”content” > Tudo o que ficaria abaixo da topbar;

span class=”graytitle” > Tópico de uma PageItem;

ul class=”pageitem” > É a área branca onde ficam os “menu”;

li class=”menu” > É a divisão da pageitem, sempre que ela é fechada e aberta na mesma pageitem é gerada uma linha preta no estilo <hr/>;

div id=”footer” > Você só pode colocar dentro dessa div as tags: <p> e <a>, já que o footer possui somente textos. Porem em ambos os casos (<p> e <a>), deve-se colocar class=”noeffect”

Bem essa foi a primeira aula, nas próximas vocês irão escolher o Tópico, através dos comentários.

Só lembrando eu irei selecionar do nível mais fácil para o mais avançado como por exemplo: ‘formulários para sites? Como ajusta-los ao WebApp?’

Se você não tiver um servidor use o Sentenza para testar os apps (precisa de Jailbreak)