iPod School

Tutorial: Fazendo WebApps

iPod SchooliPod School

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)

Perfil usado para mensagens do blog ou posts publicitários.

  • Mateus’

    Ótimo post Humberto ! Vale lembrar também que existem SDKs para webapps que já são meio caminho andados, tal como o iWebKit (http://iwebkit.net/) e o jqTouch (http://www.jqtouch.com/).

    Abraços.

    • Bem eu olhei os dois link que você colocou e vi que não são SDK mas são paginas feitas com WebKit, pronta para você edita-la, porem você pode usar os CSS e as Imagens, pois o CSS que eu coloquei no post é 100% compatível com o iWebKit e o jqTouch

  • pauloexgame

    Pessoal assistam esse video que encontrei no Youtube, muito ilário http://www.youtube.com/watch?v=h5W_yQqLrjQ

  • Vinicius

    Olá
    Eu n gostei do Tutorial porque está muito mal explicado….não q esteja ruim mas algumas informaçoes deveriam ser mais detalhadas para os iniciantes
    Abraço

  • Luck Strike

    Parabenizo o iPod School pela iniciativa (acho que é o único blog que postou algo do tipo).

    Como sou iniciante, estou tendo uma enorme dificuldade para compreender. De qualquer forma vou continuar futucando, é um assunto que me interessa. A propósito, vcs indicariam algum curso?

    [ ]s

  • Para os que tem dificuldade com a HTML olhem isso, é um curso de HTML online da W3 http://www.w3schools.com/html/default.asp

  • Não entendi como coloca o CSS
    não sei mecher com html 🙁

  • ia ser legal se fosse video tutorial

  • Victor

    Que coisa horrivel nao da de se entender nada professor…

    • Esse tutorial mostra as tags HTML porem você precisa saber HTML, já que o post foca a organização do documento .HTML, e quem sabe HTML não tem dificuldade

  • Marcos Tanaka

    Seria interessante disponibilizar o HTML completo com todos os códigos, assim a pessoa pode analisar a estrutura já pronta.

    • Concordo! Assim quem tem menos conhecimento poderia somente editar os textos e imagens sem mecher com códigos HTML.

  • Vejjeta

    Nossa show de bola. Pena eu nao levar o menor jeito pra isso.

  • Pra quem ta pedindo essa é a HTML http://www.mediafire.com/?h0zq05ztnwl

  • iMateus

    O tutorial esta maid ou memos eu ja entendo de HTML e consegui entender em falar nisso estou estudando isso para desenvolver um web site compatível com iPhones e iPods
    eu acho Humberto que você poderia separar também o código do post ou utilizar uma tabela no blog aqui para não misturar o codigo com o site ipodschool, se você quiser eu posso fazer um post de html e CSS do basico ate o “avançado”

    • Acho melhor que os leitores aprendam HTML em um site externo para não desviar muito o iPodSchool do assunto principal

  • Bruno Armanelli

    Programar HTML??

  • Marcos

    Programar HTML? &sup2;