Hoje, aparelhos como o iPhone, que tem um browser com um bom suporte a HTML 5 e CSS 3, possibilitam criar sistemas e aplicativos baseados em web, com características, designs e comportamentos idênticos aos de aplicações instaláveis nos aparelhos. E o melhor, podem ser utilizados de qualquer lugar, pela web. Outro ponto negativo é que desenvolver para iPhone/iPod Touch é um bocado burocrático. Você precisa ter o SDK que só funciona no OS X, e você precisa aprender Objective C para programar os Apps para Apple. Em contrapartida, para fazer um App baseado em Web, onde seus clientes acessarão o sistema diretamente pelo browser do aparelho, é preciso saber Javascript, HTML 5 e CSS 3. Se você já é desenvolvedor Web, você já sabe desenvolver para iPhone, iPod Touch, Android e qualquer outro dispositivo similar.

Se você gosta dos efeitos de transição dos aparelhos, você pode fazê-los sem problemas utilizando JQuery ou CSS 3. Há até um plugin de JQuery chamado JQTouch, que permite fazer efeitos idênticos ao do iPhone. Esse plugin foi pensado exatamente para funcionar em Mobile Safari e outros aparelhos com browsers avançados, como no Android.

Um caso sobre o que estamos falando é a aplicação do Itaú. Se você tem um iPhone, baixe o aplicativo pela AppStore. Ao abrir o aplicativo, perceba que o sistema não faz nada além de mostrar o site do Itaú. É muito mais interessante e barato ensinar o usuário a visitar o site em vez de procurar um aplicativo e instalar. Não é necessário nem divulgar um endereço mobile do site – esse aliás é outra discussão.

Obviamente, há exceções. A maioria dos jogos, se não todos, e alguns sistemas disponíveis funcionam melhor (ainda) se forem instalados no aparelho. Mas a grande maioria dos sistemas, principalmente aqueles que o usuário simplesmente insere ou verifca informações e dados, podem ser servidos diretamente pela web.

No caso do iPhone, os sistemas que utilizam recursos do aparelho, como por exemplo fazer o aparelho vibrar, bluetooth, bateria, GPS e etc, precisam ser instalados. Isso não se aplica a alguns mobiles da Nokia que são baseados na plataforma WRT.
A plataforma WRT permite que você desenvolva aplicativos utilizando Javascript, HTML e CSS. E por meio de Javascript, você pode ativar os recursos que ter utilizar no aparelho. Nesse caso, há uma vantagem em cima do iPhone: você não precisa aprender Objective C. Basta saber Javascript, CSS e HTML.

O cenário de hoje é interessante. Tudo o que o desenvolvedor sempre sonhou em utilizar de HTML 5 e CSS 3 pode ser aplicado no desenvolvimento para web mobile. Os browsers estão mais espertos e a cada dia trazem novidades interessantes para melhorar o desenvolvimento dos padrões e da web. Realmente, daqui pra frente, é um novo mundo que se forma. Um mundo tão ou mais complexo que o desenvolvimento web para desktops como conhecemos hoje. Pra mim, é mais apaixonante.

• Guidelines de User Experience da Apple.
• Forum Nokia – Web Runtime

Posts Relacionados

• Ah, o maravilhoso mundo real
• O que é Tableless?
• Especificação para touch screens
• Bem vindo a Xangri-lá – Parte 2
• 6 dicas para evitar problemas de incompatibilidade entre browsers.

O Android é o novo sistema operacional para mobiles do Google. Até para um AppleBoy, como eu, o sistema é interessante. Tem a interface bem acabada, app’s amigáveis e etc. Ele faz muito bem o papel dele. O Engine de renderização do browser dele é WebKit. O mesmo engine que o Safari Mobile utiliza. E não estou falando de versões antigas do Webkit como alguns outros celulares utilizam. O Android utiliza as versões mais atuais do Webkit, com suporte extenso a CSS e HTML. Portanto, um site que teoricamente foi feito apenas para iPhone, pode ser visualizado da mesma maneira pelos usuários de Android.

Aí entra outra questão: provavelmente você deve ter pensado que seria apenas fazer um script de detecção de browser, capturando as visitas de Safari Mobile e Android e pronto. É aí que você se engana. Já há vários outros aparelhos que estão utilizando engines parecidas e que podem renderizar sua “versão de iphone”. Exatamente por isso, que você precisa fazer um filtro por características e não por browser. Fazemos isso utilizando Media Queries.

As Media Queries permitem fazer um pequeno filtro, onde definimos as características do dispositivo que acessará a página. Com isso, podemos definir um CSS específico para aquele grupo de dispositivos que se encaixaram no seu filtro. Veja um exemplo abaixo:

A media que fiz é muito simples de ser entendida. A primeira linha engloba dispositivos que tem tela colorida, com uma resolução de largura mínima de 481px, isso inclui seu monitor, notebook e etc. A outra linha engloba dispositivos com uma largura máxima de 480px, ou seja, iPhones, Androids e dispositivos que seguem esse mesmo esquema de resolução e etc.

Dessa forma, você filtra os dispositivos e não os browsers dos aparelhos. Isso previne que algum celular, tão bom quanto o iPhone e o Android fiquem de fora de ter uma boa experiência de uso. Quer fazer um teste interessante? Se você estiver utilizando um browser que aceita media queries, redimensione a janela para uma largura menor que 480px. Você verá o Tableless chaveando os estilos automaticamente. Perceba que alguns elementos são reformatados e outros retirados do layout.

O filtro ainda não está completo porque não estamos contemplando os aparelhos que não aceitam meda queries, mas são mobiles. Para isso, usaríamos os Media Types, com valor de handheld. Embora celulares que aceitem os Media Types não tenham um bom suporte de CSS, podemos fazer pelo menos uma formatação de texto, cor e background. Celulares que utilizam Opera Mini, terão uma ótima experiência.

É sempre aquela mesma velha idéia: dar a melhor experiência para todos os meios de acesso. Sempre.

Posts Relacionados

• Porque é a web que comanda
• Introdução sobre Media Queries
• Sites para Dispositivos Móveis – MediaType
• Sobre Internet Explorer para Mobile – Breve impressão
• O que são Media Types do CSS?

As Media Types definem para qual tipo de media o CSS será direcionado.
O HTML foi criado para ser portável, ou seja, ele deve ser lido e interpretado por qualquer tipo de dispositivo. Cada dispositivo exibe o HTML de uma maneira. A forma que este HTML é formatado em cada dispositivo é diferente. Logo, o código CSS será diferente para cada um destes dispositivos.
Por exemplo, se você visita um site por um computador, ele não terá a mesma caso você o visite por um dispositivo móvel.
São dispositivos diferentes, com formas totalmente diferentes de navegação.
O exemplo acima é o mais comum. Mesmo assim, existem outras medias que podemos controlar, como por exemplo, impressão.
Abaixo segue uma lista das medias:

all

Para todos os dispositivos.

braille

Para dispositivos táteis.

embossed

Para dispositivos que “imprimem” em braille.

handheld

Para dispositivos de mão. Normalmente com telas pequenas e banda limitada.

print

Para impressão em papel.

projection

Para apresentações, como PowerPoint.

screen

Para monitores ou outros dispositivos com telas coloridas e com resolução adequada.

speech

Para sintetizadores de voz. O CSS 2 tem uma especificação de CSS chamada Aural, onde podemos “formatar” a voz dos sintetizadores.

tty

Para dispositivos que utilizam uma grade fixa para exibição de caracteres, como por exemplo, teletypes, terminais, dispositivos portáteis com display limitado.

tv

Para dispositivos como televisores, ou seja, com baixa resolução, quantidade de cores e scroll limitado.

Todos os nomes das medias são case-sensitive.

A utilização dessas medias são feitas como o código abaixo:

Note a tag LINK. Estou linkando um arquivo de CSS, com o nome de estilo.css. Esse código CSS está destinado para funcionar em dispositivos de media HANDHELD, ou seja, aparelhos móveis, celulares com tela pequena ou aparelhos parecidos. Esse CSS não será aplicado por exemplo, quando o usuário visitar o site utilizando um desktop, por exemplo. Para tanto, teríamos que utilizar media SCREEN.

O Problema

Cada vez mais surgem dispositivos de diversos tamanhos com hardwares bem parecidos com os desktops. Isso faz com que a navegação destes aparelhos tenha uma experiência muito próxima de desktop. Um exemplo atual é o iPhone. Sua tela tem boa qualidade e seu navegador renderiza as páginas como um navegador normal de desktop. Logo, não tem motivo para prepararmos um layout e um CSS com media type HANDHELD para o iPhone. Apesar de ele ser um handheld, ele não trabalha como um. Contudo, ele também não trabalha como um desktop. Mesmo a renderização do MobileSafari sendo identica a de um desktop, o comportamento do usuário e a forma de navegação é diferente. Logo temos um meio termo. Não podemos disponibilizar um CSS para HANDHELD, nem um CSS totalmente SCREEN.

A Solução – Media Queries

As Media Queries definem condições para a utilização de um CSS específico. Se essas condições forem aprovadas, ou seja, se o dispositivo de adequar a todas as condições, o CSS será aplicado.

Neste código, por exemplo, o CSS será aplicado em dispositivos de media screen, que tenham uma característica color.
Logo, este CSS não será aplicado em aparelhos Monocromáticos. Simples, ahn?

Operadores Lógicos

Os Operadores Lógicos te possibilitarão criar media queries diversas. Os operadores são: not, and e only.

O not irá fazer uma sentença de negação. Por exemplo:

Sentenção verdadeira para dispositivos monocromáticos.

O only irá esconder os estilos de browsers que não reconhecem media queries. Antes da sentença, você coloca o only:

É possível também agrupar várias media queries separando-os com , (vírgula). Se qualquer uma das queries forem verdadeiras, o CSS será aplicado. Então a vírgula funciona como um operador or.

Media features

Para então distinguir um dispositivo do outro, você utilizará as características de cada um. Veja o exemplo:

Estou especificando neste código, que o arquivo estilo.css, será aplicado para dispositivos que se enquadram em screen com telas que tenham uma resolução máxima de 480px.

Há uma lista de características que você pode utilizar aqui para selecionar os dispositivos que você quiser.

• width
• height
• device-width
• device-height
• orientation
• aspect-ratio
• device-aspect-ratio
• color
• color-index
• monochrome
• resolution
• scan
• grid

As media queries também são case-sensitive.

Não são todos os browsers que suportam media queries. Hoje em dia, isso é muito utilizado para separar o CSS para iPhone. O MobileSafari reconhece essas media queries, o que possibilita que você faça uma versão do CSS para iPhone. Mesmo assim, muitos por aí preferem fazer uma versão do site inteiro para estes dispositivos. Como já conversamos, isso depende das suas necessidades, público e tamanho do site.

Direto da fonte

• Media Types
• CSS Aural
• Media Queries

Posts Relacionados

• O que são Media Types do CSS?
• Introdução ao CSS 3D – Flip Card
• CSS3 – Animation e regra keyframe
• Múltiplos backgrounds com CSS
• CSS3 – Abas com a pseudo-classe :target

Suporte da Apple

A Apple tem uma característica muito interessante: ela cuida do que é dela.
Melhor: ela não deixa você fazer besteira. Ela te dá informação para que você saiba exatamente como fazer algo para os sistemas e aparelhos dela.

Quando migrei para o mac, a primeira coisa que percebi foi a beleza do sistema. Os ícones são belos, agradáveis de ver. A área de trabalho do Mac, mesmo com uma infinidade de arquivos, fica bonita. Ao contrário dos ícones do Windows, eles são feios, e os de programas de terceiros, são piores ainda.
Já os ícones de programas de terceiros da Apple são lindos. Não, não é só porque eles querem um ícone bonitinho, mas é porque a Apple dá suporte aos designers. A Apple publica artigos, guias e manuais sobre como fazer um ícone para o Mac OSX. Isso faz a diferença. Se você quiser fazer um ícone para a Apple, você vai encontrar bastante material para fazer um ícone bonito, padronizado. Claro que um bocado de talento também conta.

A Apple está fazendo a mesma coisa para o desenvolvimento web. Você tem toda a informação que precisa sobre a plataforma, dispostivo, sistema instalado no aparelho, etc…
Por exemplo, você tem informações detalhadas sobre o Safari para desktop e para o iPhone. Tem detalhes sobre quanto eles conhecem de CSS e Javascript. Você sabe que o AJAX vai funcionar e que o Flash não. E todas os outros pequenos detalhes importantes para desenvolver um site para Internet Móvel.

Até hoje o Internet Explorer para o Windows Mobile é um segredo para mim. Eu não sei ao certo o que ele entende de verdade de CSS e quais os seus bugs. Diferente do MobileSafari. A Apple disponibilizou informações essenciais sobre o browser. E ainda mais, ela publicou exemplos, bibliotecas de javascript, exemplos de designs, scripts, css, tudo. E isso é ótimo, porque você não tem que ficar quebrando a cabeça. Não precisa fazer testes e mais testes para descobrir o que o browser aceita ou ignora.

O MobileSafari

Já falei sobre o MobileSafari aqui. A Apple fez um grande trabalho com o MobileSafari. Ele é um browser incrível, suporta coisas que nós, desenvolvedores, queremos fazer em sites para desktops, mas não podemos por causa do IE. Borda arredondada? Background em Checkbox? Customização de Selects (combobox)? Tudo isso é possível fazer com o MobileSafari.

Os browsers para dispositivos móveis são poucos hoje. Se resumem em: Opera, Internet Explorer e MobileSafari. O miniMO da Mozilla está andando devagar. E foi lançado à pouco um browser chamado SkyFire. Parece que esse browser tem futuro, tem um bom suporte a Flash, CSS e etc… Mas é pesado. Está em fase beta e tem um futuro muito promissor.

O Opera hoje é um dos browsers mais usados e quem tem WinMo sempre utiliza o Opera Mobile. Fora do iPhone, ele é o melhor browser para o seu dispositivo.

O interessante de desenvolver para iPhone é que você está desenvolvendo para apenas um dispositivo. Você não precisa se preocupar com uma infinidade de browsers, dispositivos e tudo mais. Você precisa se preocupar em fazer funcionar no MobileSafari. Isso é fantástico. Mesmo assim, você tem que pensar nos outros públicos que utilizam outros sistemas e browsers.

Um assunto interessante é estudar sobre o motor de renderização do seu browser. Você sabe qual o motor de renderização do IE? E do Opera?
O motor de renderização do Safari é o WebKit, que é utilizado também em browsers da Nokia e no Konqueror do KDE. Logo, você sabe que esses browsers tem um bom suporte a CSS, JS, Ajax. Mas esse é assunto para outro post.

Posts Relacionados

• Porque é a web que comanda
• Ah, o maravilhoso mundo real
• Browsers para Mobile – Nova era
• O que é Tableless?
• Performance do seu CSS

Um pouco de História

Por volta de 1997, os computadores da Apple traziam por padrão o Netscape. Naquele tempo o mercado de browsers não era tão acirrado como hoje e os concorrentes eram poucos. O Internet Explorer estava em sua versão 2/3. Mesmo assim, o Internet Explorer para Mac era também distribuído com o MacOS durante os 5 anos de acordo entre Apple e Microsoft. A Microsoft laçou 3 versões principais do seu navegador para o Mac, parando na versão 5 em março de 2000.

Em 2003, a Apple anunciou que eles estavam desenvolvendo seu próprio browser baseado no motor de renderização KHTML. A versão 1.0 foi lançado como browser padrão do MacOS por volta de Junho de 2003. O Internet Explorer ainda era distribuido no sistema, mas agora como um navegador alternativo, até Abril de 2005.

Motor de Renderização WebKit

O Safari utiliza um motor de renderização chamado WebKit. O WebKit tem dois motores de renderização: o WebCore, que é o motor de renderização baseado no KTHML do Konqueror. E o JavaScriptCore, baseado no motor de javascript KDE chamado KJS. Esses motores estão sob Licensa GNU.

A Apple, ao fazer o Safari fez muitas atualizações e modificações no motor KHTML, deixando-o mais maduro e robusto. Essas modificações foram devolvidas para a comunidade e incorporadas no Konqueror.

MobileSafari e Safari para Desktop

A idéia é que o usuário tenha uma experiência muito próxima a experiência que ele tem no desktop. Por isso o Safari para iPhone (MobileSafari) foi feito sob o mesmo motor de renderização WebKit do Safari para Windows e Mac. Diferenças: 1) Se o site não foi feito para iPhone, ele renderiza a página da mesma forma como renderiza em um Safari para desktop, mas miniaturizada. 2) A interação do usuário.

Padrões Suportados

Para que a renderização do MobileSafari seja fiel ao Safari para desktop, ele tem grande suporte aos Padrões Web.

• HMTML 4.01
• HTML 5
• XHTML 1.0
• CSS 2.1
• Parte do CSS 3
• Javascript 1.4
• Ajax
• DOM

É interessante notar que temos uma certa liberdade de desenvolvimento web no iPhone. Há facilidades como cantos arredondados que não podemos contar no desenvolvimento focado para desktops. Isso tráz vantagens pra você, desenvolvedor, porque facilitará seu trabalho, e para o usuário porque ele terá uma experiência mais rica.

Limites dos recursos

Embora o iPhone suporte as tecnologias mais atuais de desenvolvimento web, não podemos esquecer de que ele é um dispositivo móvel, com capacidade de processamento muito menor que a de um desktop. Por isso, há algumas limitações de recursos que devemos nos atentar.

Para códigos:

• 10Mb para arquivos Javascripts e XML
• O tempo de execução de um Javascript é limitado a 10 segundos. Se passar de 10 segundos, o Safari pára a execução em algum lugar aleatório do seu código.
• Javascripts alocados limitados a 10Mb
• Máximo de 8 documentos abertos de uma vez

Para imagens:

• Limite máximo do tamanho de GIF, PNG e TIFF são 2 Megapixels
• A decodificação máxima dos tamanhos de JPGs são 32 Megapixels. Utilizando SubSampling
• O tamanho máximo de GIFs animados deve ser menor que 2MB. Para arquivos animados maiores, só é mostrado o primeiro frame.

Verifique sempre o tamanho final de sua página. Normalmente o sites com 30Mb para menos funcionam muito bem no iPhone.

Posts Relacionados

• Sobre Internet Explorer para Mobile – Breve impressão
• Sites para Dispositivos Móveis – MediaType
• Navegação em mobiles
• Mobilidade na cabeça
• Breve introdução: XHTML Mobile Profile

Naveguei um pouco pelo Safari do iPhone, e enquanto me adaptava, me perguntava várias vezes sobre a real necessidade de haver uma versão para mobiles. O iPhone tem uma maneira diferente de tratar os sites. Ele renderiza como se fosse um browser para desktop: o site aparece em miniatura na tela. Assim você tem uma visão geral do site e com apenas dois toques você aumenta o zoom no local que você gostaria de ler.

O interessante do iPhone, é que a Apple ensina e mostra exatamente como fazer um site que possa ser bem visto em um iPhone. Nunca vi nenhuma outra fabricante de celular fazer algo parecido. Eles te mostram características e formas de fazer um site bem feito com características úteis para o visitante e usuário de iPhone.

iPhone SDK for Web Developers de iphonedevel no Vimeo.

Juntamente com o iPhone, o Opera Mini 4, também utiliza esse tipo de navegação por miniatura e zoom. Esse método de navegação para celulares com tela pequena se mostrou muito mais confortável que o modo convencional.

Na minha opinião, essa maneira de renderizar, dispensa a criação de uma outra folha de estilo para mobiles. Como não existe apenas o iPhone no mundo, e nem todo mundo utiliza o Opera Mini para navegar, ainda precisamos criar uma versão mobile do nosso CSS para que os sites sejam acessados decentemente a partir de mobiles com navegação convencional.

Opera mini 4 – iPhone Killer! Part 1 de Kiran Konathala no Vimeo.

O W3C acabou de lançar um teste parecido com o Acid para testar a compatibilidade dos browsers para mobiles.

A guerra dos browsers para mobiles vai ser diferente. O Internet Explorer ainda não prevalece nesta área, e sistemas realmente bons, utilizam o Opera como navegador padrão. Uma boa notícia é que o Internet Explorer para mobiles não é tão terrível quanto o IE para desktops.

A Visie irá ministrar uma palestra rápida sobre o Internet Móvel no dia 07/07 em São Paulo por R$30.
Enquanto isso, leia algo antes de começar a fazer a versões mobiles por aí:

• Sites para dispositivos móveis – Breve Introdução
• Sites para dispositivos móveis – SSR
• Sites para dispositivos móveis – MediaTypes
• Breve Introdução: XHTML Mobile Profile
• Browsers para dispositivos móveis
• 2.7 Bilhões de Celulares
• Curso de Internet Móvel
• Web Development for the iphone

Posts Relacionados

• Porque só para o iPhone?
• O Chrome não quer dizer muita coisa
• Browsers – Guerra Fria
• Navegação em mobiles
• Experiência deve ter começo, meio e fim

• Se você usa Mac ou qualquer outro sistema operacional, você sabe que é meio difícil testar seus projetos no IE. Se quiser fazer testes rápidos, sem perder tempo, tente usar o Ie NetRenderer.
• Em qual versão a tag ABBR foi implementada no HTML? E a BLOCKQUOTE?
  O HTML Elements Index uma tabela de tags, onde você consegue saber em qual versão do HTML a tag foi implementada e se a tag ainda existe nas versões atuais do HTML/XHTML.
• Artigo interessante sobre o design feito pela Apple: The Secret of Apple Design.
  E para se inspirar algumas imagens do iPhone para vermos como é a interface do usuário.

Posts Relacionados

• Versionamento inteligente para mobiles
• Porque só para o iPhone?
• Sobre Internet Explorer para Mobile – Breve impressão
• ePub: Aprenda a criar um livro digital
• Boas práticas de Acessibilidade