Arquivo da tag: apple

projetando para o ipad


por Jin, 04-12-10
I decided a while back that I wasn’t going to get an iPad. Instead, I’d wait for the second generation iPad next year. This has been my approach when it comes to new Apple products. Yes, I’m scared of the early adopter regret. As the launch date neared, my mind changed a bit. My wife is an avid book reader, and I thought it’d be a perfect device for her. But more importantly, I think the iPad will have a significant impact on how us web designers approach interaction design for this medium and the coding behind it. I need one to tinker with.

I bought one on Saturday. I love it. I won’t get into the philosophical aspects that have been debated by many recently, instead I’ll focus the rest of this post on web design/development for iPad’s Mobile Safari. Creating web sites that look and behave consistently on different browsers and versions have been the bane of us web designers’ existence since Mosaic/Netscape days. While I’m happy with the experience surfing on the iPad, I can’t help but to think, “argh another browser.” Even though Mobile Safari on the iPad is identical to iPhone’s, but the term “optimized for mobile” means differently for each device. The iPhone optimized sites are often minified version of the desktop sites, for speed and better use of screen real estate. The iPad’s browser offers the desktop experience, so it should be treated as one. I divided the rest of this post to two sections: iPad ready and iPad optimized, depending on how far you want to customize your site for iPad.

ipad ready

In my opinion, for a site to be “iPad ready” simply means that all the content and functionality are accessible via the iPad. Sites that were written according to the web standard are in a good shape already. A few things to consider:

  • Flash – It’s unlikely that Apple will allow Flash on its mobile devices anytime soon, or ever. Sites that are done entirely in Flash will have to have a HTML alternative(as they should anyways). I embed Youtube and Vimeo videos on this site sometimes. Even though they both support HTML5 <video> on their sites, unfortunately as of now they do not generate embed codes in HTML5. I recently discovered Video for Everyone by Kroc Camen. It’s a great code snippet that plays hosted or embedded videos as HTML5, with Flash/Quicktime as fallback. html5media also has a Javascript file that enables <video> and <audio> for major browsers.P.S. I can’t figure out how this embedded Youtube video is being displayed properly without any HTML5 embedding code. Please let me know if you know the answer.
  • Mouse Events – Make sure your site’s functionality does not rely purely on mouse events (mousemove, mouseover, mouseout, and CSS :hover) . Mobile Safari can trigger onMouseover, but it involves quite a bit of timing and effort on the user. You need to press down on the element that has the onMouseOver event and release fairly fast. To make it easier for the user, either remove unnecessary mouse events or have a visible link that reveals the hidden elements. A good example of inaccessible functionality is twitter’s web interface. You cannot hover therefore you lose the ability to retweet or reply.
  • Scrolling Content – The default one-finger swipe on iPhone/iPad triggers window.scroll(). Two-finger swipe has the same effect as the mouse scroll wheel. Not a lot of users may know this, therefore I think it’s best not to have content in scrolling in fixed sized block elements such as <div>s. The Safari Reference Library has good documentation on handling events.
  • Fixed Positioning – In short, don’t use it:

    Safari on iPad and Safari on iPhone do not have resizable windows. In Safari on iPhone and iPad, the window size is set to the size of the screen (minus Safari user interface controls), and cannot be changed by the user. To move around a webpage, the user changes the zoom level and position of the viewport as they double tap or pinch to zoom in or out, or by touching and dragging to pan the page. As a user changes the zoom level and position of the viewport they are doing so within a viewable content area of fixed size (that is, the window). This means that webpage elements that have their position “fixed” to the viewport can end up outside the viewable content area, offscreen.

    But if you must, Richard Herrera has a work around.

  • contenteditable – Mobile Safari currently does not support contenteditable attribute. Use a styledtextarea instead.
  • Disabling Cut/Copy/Paste Dialog – Pressing down on a text block or image brings up the Cut/Copy/Paste dialog box by default. Sometimes this behavior is not desired. For example, when pressing the top link of a navigation menu. To disable this, use -webkit-user-select: none.

ipad optimized

Fortunately, Safari is one of the leading browsers to support HTML5 and CSS3. If you want to take advantage of all iPad’s mobile Safari has to offer, here is some useful info:

  • User-agent StringMozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10

    David Walsh’s recent post shows how to detect iPad using Javascript, PHP and .htaccess redirection.

  • Media Query – In a way, designing for iPad is a bit easier since the screen is fixed to two sizes(portrait and landscape). We can take advantage of this by using Media Query.<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
    <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

    Please keep in mind, just because you can, doesn’t mean you have to. I don’t recommend making the two sets of styles drastically different from each other because it’d make the users relearn the UI. One case where I can see it’d be useful is when in portrait mode, show only the main content of the site; when in landscape, display more meta info. For example, on a blog site, show just the post body in portrait, and unhide the meta navigation, Ads blocks when in landscape.

    Jason Grigsby has a simple demo page to display different CSS styling depending on the orientation.

  • Format Detection – On iPhone, Safari automatically renders telephone numbers as a link to call. On the iPad the default action is to add the number phone to Contacts. You can disable this by:<meta name="format-detection" content="telephone=no">
  • Viewport setting – Do not use hard-coded pixel for view port dimensions. Use device-width instead.<meta name="viewport" content="width=device-width" />
  • Disable Automatic Format – Automatic Correction and Automatic Capitalization are default behaviorsfor text input. But sometimes you may not want inputs to be auto formatted. For example, inputting user name and passwords. To disable them:<input type="password" autocorrect="off" autocapitalize="off">
    <textarea rows="4" cols="50" autocapitalize="off"> </textarea">
  • Keyboard Types – You can make make it easier for the users by presenting content appropriate keyboards by using the new HTML5 attributes:Text: <input type="text" />
    Telephone: <input type="tel" /> 
    URL: <input type="url" /> 
    Email: <input type="email" /> 
    Zip Code: <input type="text" pattern="[0-9]*" />
  • Multi-Touch Event Handling – You can bind a touch event to mimic any other event. For example, make one finger swipe to mimic a two finger swipe on a DOM object. There are cases where you may want to override the defaults. For example, wouldn’t it be nice if you can swipe navigate an Image/content slider box than having to press the next/prev links? If you’re interested, you may find these JQuery plugins helpful: jQuery SwipeMultiswipe and JQTouch.



Google anuncia nova ferramenta para criar apresentações

Novidades no Google Docs. A gigante da web apresentou nessa terça-feira (18) uma nova versão da ferramenta para criar apresentações no melhor estilo PowerPoint, sem ser necessário sair do navegador. Utilizando recursos do HTML5, finalmente os usuários têm uma maneira mais completa de criar slideshows sem recorrer ao concorrente da Microsoft ou ao Keynote da Apple.

Numa primeira olhada, o internauta percebe que o visual da ferramenta de apresentações do Docs segue o padrão estabelecido dos outros produtos do Google. No entanto, ficou mais limpo e agradável de usar. Fora o visual, o Google aposta principalmente na colaboração como recurso matador da ferramenta.

Assim como acontece na criação de textos e planilhas, os usuários podem trabalhar numa mesma apresentação simultaneamente, realizando alterações e adicionando novos itens. Cada internauta ganha um marcador individual baseado em cores para determinar que, naquele momento, ele está mexendo em certo trecho do documento.

Transições e animações compõem a ferramenta renovada. Dá para definir animações específicas para cada item adicionado ao slideshow, inclusive as formas criadas a partir do recurso de desenho livre. O mesmo vale para as transições entre slides, que seguem as diretrizes definidas pelo HTML5.

Justamente por depender do HTML5, a ferramenta de apresentações mostrada hoje só funciona em navegadores mais modernos. Se for o Chrome, criação do Google para concorrer com Firefox, Opera e outros browsers, – a compatibilidade é garantida.

Os usuários vão perceber um aviso informando sobre a nova versão da ferramenta na próxima vez que entrarem no Docs. Basta confirmar que querem ver as novidades para terem a ferramenta devidamente habilitada.

Originalmente publicado em The Official Google Blog

Fonte: TechTudo

Adobe admite: HTML5 é o futuro

Após a Adobe anunciar que o Flash Player 11.1 pode ser a última versão do Flash para navegadores móveis, Mike Chambers, chefe dos desenvolvedores da Adobe, publicou uma explicação sobre o motivo que levou a empresa a tomar essa decisão.

“A decisão é parte de uma grande mudança estratégica da Adobe”, escreveu Chambers. “Uma dessas mudanças é focar no HTML5, assimm como no Adobe Creative Cloud e nos serviços que ele pode prover”.

Ele ainda listou as cinco razões principais que levou a empresa a se decidir por esse caminho:

  1. O Flash nunca ganhará muita visibilidade em dispositivos móveis, já que a Apple não quis adotar a tecnologia no iPhone e no iPad. “Não importa o que fizéssemos, que o Flash não estaria disponível no iOS da Apple”, disse ele.
  2. Entretanto, o HTML5 é onipresente. “Em dispositivos móveis, o HTML5 oferece um nível similar de presença que o Flash Player oferece ao desktop”, afirmou.
  3. Os usuários não costumam consumir conteúdo em aparelhos móveis do mesmo jeito que o fazem em desktops. As diferenças do tamanho das telas, os problemas com redes sem fio e a disseminação das lojas de aplicativos fizeram do Flash irrelevante em mobiles.
  4. Desenvolver plugins para mobile é mais desafiador do que para desktop. Isso requer mais parcerias com desenvolvedores de OS, de hardware para mobiles e de componentes manufaturados. “Desenvolver o Flash Player para mobile mostrou que é preciso muito mais recursos do que imaginávamos”, admitiu.
  5. A Adobe quis mudar mais recursos para HTML5, e liberando o Flash gratuitamente para dispositivos móveis, e que eles façam o mesmo.

Depois, Chambers assegurou aos desenvolvedorees que o Flash é seguro, e explicou que a Adobe fez um termo de compromisso com o Flash Player para desktops, que tem o foco em permitir que desenvolvedores criem aplicativos móveis através da plataforma Adobe AIR.

Ao final, Chambers disse que cada vez mais o HTML5 vai ocupar as funcionalidades do Flash. “Se um recurso Flash é bem sucedido, ele será integrado ao navegador, e se os desenvolvedores e usuários vão acessá-lo cada vez mais pelo navegador, e não pelo Flash”.

“Muitas das coisas que você já fez usando o Flash, fará com o HTML5 e o CSS3 diretamente no navegador”, concluiu.

Com informações de Mashable

Fonte: IMasters

iTunes 10.5 beta 9 está disponível para desenvolvedores

A Apple disponibilizou hoje o beta 9 do iTunes 10.5, que chega três semanas após a liberação da oitava versão. A atualização é necessária para desenvolvedores que pretendem continuar testando o iTunes Match.

Entretanto, ela apresenta alguns problemas, como a função Scan and Match, que ainda não está completa. Além disso, algumas músicas do usuário também poderão não ser reconhecidas, mesmo estando no acervo da iTunes Music Store, fazendo com que elas sejam enviadas para os servidores do iCloud sem necessidade; outras faixas podem ser reconhecidas erroneamente, e os arquivos só podem ser enviados para o iCloud através de um computador por vez.

Outro problema apresentado é que músicas podem deixar de tocar se o desenvolvedor estiver usando o iOS beta 7. Para corrigi-lo, basta desligar e ligar novamente o iTunes Match, restaurando as funcionalidades do serviço.

As bibliotecas virtuais serão apagadas ao fim dos testes, ou seja, quem estiver usando o serviço deve sempre manter as músicas localmente para não correr o risco de perdê-las.

Fonte publicada originalmente em MacMagazine

Fonte: IMaster

Novo build do Mac OS X Lion está disponível para desenvolvedores

A Apple liberou ontem um novo beta do OS X 10.7.2 para os desenvolvedores. Chamado de Build 11C62, ele foi lançado seis dias após o mais recente.

De acordo com a empresa, não há problemas conhecidos com a versão. Ela pediu foco em Agenda, drivers gráficos, iCal, iChat, iCloud, Mac App Store, Mail, MobileMe, Safari, Sportlight e Time Machine.

Assim como os outros builds, o iCloud está integrado ao OS X 10.7.2 e não precisa ser baixado separadamente.

A segunda atualização do Lion deve ser lançada em outubro, junto com o novo iOS, com o iCloud e com o iPhone 5.

Fonte: Geek

Você quer um bom designer ou um “designer de blábláblá”?

Tenho ouvido muitas pessoas ultimamente perguntando sobre tipos específicos de designers. Eles querem “Android Designers” ou “Blog Designers” ou “OSX Designers”.

Isso é ridículo.

Apenas contrate bons designers.

Pessoas que compreendem a experiência do usuário, a psicologia do usuário e o design de interação irão criar ótimas interfaces em qualquer mídia. Não há nada de especial na web que faz com que seja mais ou menos desafiador criar para ela do que criar para o iPad. São apenas situações diferentes. E bons designers sabem as diferenças, compreendem as limitações e irão criar algo incrível para ambos.

Bons designers são difíceis de encontrar. Todo bom designer que conheço tem um trabalho que ama. Eles são recrutados o tempo todo. Não estou dizendo que será fácil encontrá-los. Estou apenas dizendo que contratar alguém que se considera um “iPhone designer” irá terminar mal. As chances de que você precisará de algo feito na web são grandes. Se o seu app é incrível, você vai querer que ele esteja também no Android.

Não contrate alguém que é bom em replicar a estética do design da Apple. Novidade: isso não é muito difícil de fazer.

Não procure por um WordPress designer. Qualquer pessoa que pré-seleciona sua ferramenta porque é a única coisa que eles sabem usar é um tolo.

Procure por pessoas que amam o que fazem são boas nisso, e querem usar suas habilidades para resolver os seus problemas.

Texto original em inglês de Ben Bleikamp, disponível em

Fonte: IMaster

Comentário SWX

Na teoria é muito bonito. Na prática, nem tanto. Um bom profissional (designer ou não) é qualificado o suficiente para aprender qualquer coisa na sua área, mas não tem que estar preparado para fazer bem qualquer coisa. Para quase todos os pobres mortais, aprender muuuitas coisas exige uma quantidade muito grande de um recurso precioso chamado tempo, por isto sempre existirão especialistas ( bons ou ruins ). Como diz o velho ditado: “Na prática, a teoria é diferente”.

Vinicius Castro

Apple pode ser unir à Microsoft e à Amazon para lançar iCloud

Neste ano, a Apple anunciou planos para lançar o iCloud, serviço de streaming de arquivos de áudio e vídeo que está na fase beta de testes e deve chegar ainda em 2011. Segundo uma reportagem do The Register, citando fontes não identificadas, os direitos de hospedagem do iCloud estão sendo tratados conjuntamente por dois dos maiores rivais da Apple: a Microsoft, através da sua plataforma Azure, e a Amazon, através do Amazon Web Services (AWS).

As duas empresas dizem que o acordo feito com a Apple também as impede de falar publicamente sobre a parceria. A reportagem alega que a Apple tomou a decisão de terceirizar recursos de hospedagem do iCloud porque queria se concentrar em “construir uma ótima experiência de consumo”.

A Microsoft e a Amazon irão dividir a hospedagem porque a Apple não quer contar apenas com uma empresa para as necessidades de seu servidor. O lançamento do iCloud poderia ser um problema para a Microsoft. Eles lançaram o Azure em fevereiro de 2010 e vêm tentando mostrar às empresas que podem suprir suas necessidade de computação em nuvem.

É possível que o acordo com a Microsoft e a Amazon seja temporário, apenas para que o iCloud seja lançado o mais rápido possível. A Apple recentemente concluiu a construção de uma instalação de servidor maciço em Maiden, na Carolina do Norte. Os 500 mil metros quadrados de construção, que custou a Apple US$ 500 milhões, será usado para hospedar o iCloud futuramente.

Fonte: Neowin

OS X Lion da Mac App Store já está agora na versão 10.7.1 Leia mais: OS X Lion da Mac App Store já está agora na versão 10.7.1

O OS X Lion tem uma grande particularidade: seu instalador é vendido pela Mac App Store, mas depois de instalado os updates vêm pela Atualização de Software (Software Update) — coisas da Apple, nada grave, mas não deixa de ser um pouco inconsistente (e, imagino eu, pode confundir certos usuários).

Demorou um pouquinho, mas uma semana exata após a liberação do Mac OS X 10.7.1 a Apple atualizou o Lion da MAS para essa nova versão:

Assim, quem comprar o sistema a partir de agora já a instalará diretamente, sem a necessidade de rodar o SU logo em seguida. O preço, é claro, continua o mesmo: US$30 (bem como o seu peso, 3,5GB).

A Apple também costumava fazer isso de vez em quando com as antigas versões em caixa do Mac OS X, porém mais uma vez o meio digital se mostra superágil e prático nesse sentido.

Fonte: MacMagazine

Apple libera sexta versão beta do iOS 5 para desenvolvedores Leia mais: Apple libera sexta versão beta do iOS 5 para desenvolvedores

A Apple acaba de liberar a beta 6 do iOS 5, de build 9A5302b, para desenvolvedores. O update pode ser baixado diretamente de iPhones que estejam com a beta 5, pelo ar, num download de apenas 144MB — entretanto, a Apple recomenda que seja feito um backup completo, seja com o iTunes ou no iCloud.

A nova versão de testes do sistema operacional móvel da Maçã chega com versões específicas para iPhones (3GS, 4 GSM e 4 CDMA), iPods touch (3G e 4G), iPads (1 e 2, Wi-Fi e Wi-Fi+3G) e Apple TVs. Também foram liberadas atualizações para as betas do iTunes 10.5, do Xcode 4.2 e dos apps beta do iWork, compatíveis com o iCloud.

Esta liberação chega praticamente duas semanas após a chegada da beta 5. Atualizaremos este post mais tarde, caso apareçam novidades.


Designers têm manual HTML5 do W3C

O consórcio W3C – que trabalha no desenvolvimento de padrões da web – publicou uma edição das especificações do HTML5 para desenvolvedores web.

A promessa é de um documento mais palatável aos designers.

Especificações da linguagem já tinham saído, porém mirando os desenvolvedores de browsers, com linguagem altamente técnica, e às vezes cansativa para quem lida mais com o o que vai dentro da internet do que com as portas de acesso.

Segundo o blog Webmonkey, da revista Wired, com o lançamento da versão “oficial”, os programadores têm à disposição duas versões para designers – a do W3C e a do WHATWG (Web Hypertext Application Technology Working Group).

Formado em 2004, o WHATWG é formado por representantes da Apple, Mozilla e Opera, para trabalhar, também, no HTML.

Com a última chamada para colaborações em maio de 2011, na assembleia anual do W3C, o HTML5 está em processo de desenvolvimento de recomendação.

Ainda que não estejam “maduras”, as especificações já valem para as últimas versões dos navegadores mais populares – Internet Explorer, Firefox, Chrome, Safari e Opera.

Fonte: Baguete

Apple lança iCloud beta

A Apple liberou a versão beta do iCloud, seu sistema baseado na nuvem. O site permite que desenvolvedores que já possuem contas registradas possam acessar serviços como e-mail, contatos, calendário e a ferramenta “Find My iPhone”.

O serviço pode ser acessado através do site Os desenvolvedores com login já registrado podem acessar os serviços que serão oferecidos gratuitamente pelo iCloud como e-mail, calendário, agenda de contatos e a ferramenta “Find My iPhone” (que localiza dispositivos perdidos). Quem não possui uma conta de desenvolvedor, mas tem registro no MobileMe, poderá checar como migrar seus dados para o iCloud ao clicar na opção “Terms of Service”, localizado no canto inferior esquerdo da página.

Os preços para o uso do serviço também foram divulgados: os primeiros 5 GB serão gratuitos, mas os gigabytes adicionais terão um custo anual, que varia de US$ 20 para 10 GB a mais até US$ 100 dólares por 50 GB extras.

O acesso completo ao iCloud deverá ser liberado junto com o lançamento oficial do iOS 5, que deverá ocorrer em meados de setembro.

Fonte: Info Online

Chrome 13 traz Instant Pages

O Google Chrome recebeu mais uma versão estável ontem, que chega pouquíssimo tempo depois da versão anterior ser lançada. Ela funciona tanto em Windows, OS X da Apple e Linux. A atualização é recomendada para todos os usuários, pois traz recursos novos e – principalmente – corrige falhas de segurança detectadas nos últimos tempos.

O Chrome 13 conta pela primeira com o recurso de Instant Pages ativado por padrão. Com ele, o Google pode renderizar aqueles resultados de busca mais propensos de serem abertos em segundo plano. Quando o usuário clica, é como se a página estivesse ali o tempo todo – aparece quase instantaneamente. Embora o Google seja o primeiro buscador a tirar proveito do Instant Pages, esse recurso é baseado em padrões web, e qualquer concorrente pode desenvolver uma busca mais rápida em cima dele.

De acordo com a equipe responsável pelo browser, 13 correções consideradas como de alta prioridade foram aplicadas ao sistema. E, no total, o Google diz ter feito mais de 5.200 melhorias e correções no navegador.

Fonte: IMaster