Projetando para o iPhone: Recursos

37 Signals disse uma vez sobre o projeto para o iPhone:

Projetando para o iPhone é como um híbrido de impressão e web design.

A web todos sabemos está cheio de incertezas. Nós não sabemos o tamanho do visor de tela ou resolução, não sabemos o gamma da tela de alguém, não sabemos se eles têm um certo tipo de letra e / ou exatamente como aquele rosto torna em suas browser, nós não sabem o navegador que vai usar, etc

Mas o papel, por outro lado, está cheio de controles. Tamanho fixo, faces fixas, cores fixas. O que você imprime é exatamente o que alguém vê (supondo que você tenha feito sua lição de casa na cor e papel, etc).

Assim, o iPhone é uma mistura estranha. É a web, e as coisas podem rolar, e os dados são extraídos de servidores remotos, mas é também uma largura fixa, um navegador fixo, fontes fixas, etc É muito legal e um exercício de design muito refrescante.

É muito verdadeiro. Chegar ao projeto para o iPhone é apenas diversão. Não se preocupa com cross-browser testes, não se preocupe em ter que atender a tecnologias obsoletas. O que você projeta é o que você tem!

Aqui estão alguns recursos para você ir com o seu projeto de design do iPhone.

Arquivos do Photoshop

IPhone livre de arquivos PSD para ícones / snapshots / whatever

iPhone GUI PSD

iPhone interface arquivo PSD

Ícone de estilo iPhone. psd Kit

Recursos oficial da Apple

iPhone Dev Center
Vídeo: Introdução ao iPhone SDK (as)
Graphics & Animation Coding How-To do

Tutoriais

Aprenda a desenvolver para o iPhone

Projetando para o iPhone (quando você não está segurando um)

Criar um iPhone Slick / Interface Celular a partir de qualquer Feed RSS

Projetando para iPhone (lista de vários sites com interfaces iPhone)

Pergunte ET: design de interface do iPhone (vídeo incluído)

ECommerce prático: Web Design para o iPhone

Ícones para iPhone

Projetando para o iPhone (parte 1) (favicon)

Como criar um ícone personalizado iPhone da Apple para o seu site

Como criar um ícone iPhone WebClip usando o Photoshop

Evolução do Ícone de status de entrega (animação muito legal do seu progresso)

Útil trechos de código

Detectar o iPhone com JavaScript:

<script type="text/javascript"> if (navigator.userAgent.indexOf('iPhone') != -1) { { // Do something iPhone Specific! } </script> 

Definir o tamanho da viewport iPhone:

 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> 

Coloque isso em sua seção head web páginas. Se você quiser forçar uma largura de estática, a mudança "device-width" para um tamanho específico. Dimensões do iPhone na tela são 320 x 480px.

Role para baixo para esconder a barra de menu no carregamento da página:

 <script type="application/x-javascript"> addEventListener('load', function() { setTimeout(hideAddressBar, 0); }, false); function hideAddressBar() { window.scrollTo(0, 1); } </script> 

Para mais notícias iPhone e opiniões sobre os mais recentes aplicativos para iPhone , confira AppCraver .