Então, terminei hoje  a primeira etapa de projetinho que estive desenvolvendo há alguns dias.

Nas últimas noites troquei algumas horas de sono pra bolar alguma coisa que colocasse em prática o que eu andei estudando sobre iPhones, Androids, Windows Phones, CSS, HTML e etc. No fim das contas, o que saiu foi uma versão do site da Ufes para iPhone/iPod Touch.

Para visualizar o site o recomendado é utilizar um iPhone ou iPod Touch. No entanto, caso você não tenha um desses aparelhinhos você pode acessar usando o Safari ou o Firefox do seu computador.

Se liga, o endereço para acessar é: www.diasnormais.com/iphone/ufes

Os planos de dominação mundial são de adicionar novas features aos poucos à medida que a coisa for rolando MAAAS antes de entrar em qualquer detalhe acho legal mostrar procês um pouco do processo de desenvolvimento.

Do wireframe ao mainframe

Os rafes, rascunhos, rabiscos, garranchos e tal são meio que menosprezados, né? Pois não deviam, pequeno gafanhoto. Wireframes esses desenhos toscões que você vê aí em baixo são importantíssimos! Eles são uma forma simples e em baixíssima resolução do desenho da interface. Pode parecer que não, mas eles tem mil e uma utilidades: ajudam a acelerar o desenvolvimento, permitem documentar todo o processo, facilitam a comunicação entre membros de uma equipe, indispensáveis para arquitetos de informação e por aí vai! Acho que agora dá pra entender pra que serviam aqueles exercícios de layout no papel que a professora Sandra Medeiros passava nas aulas de Gráfica II e III. :D

É a mesma coisa que meu brother Manoel Lemos já vinha me falando há um tempo atrás. Um personagem, ou uma história em quadrinhos, não nasce linda, maravilhosa, colorida, tchubiruba e finalizada de uma hora pra outra. É preciso camadas e mais camadas de tinta, e de criação, pra um garrancho torto se tornar uma linha nítida.

Depois de delimitar um pouco as informações básicas que eu tinha na cabeça e de rabiscar algumas ideias no papel, achei que tava na hora de refinar um pouco mais os desenhos.

É lógico que não tava na hora, ainda. Pensando melhor agora eu acho que eu deveria ter continuado um pouco mais no papel e esgotado outras alternativas. Por isso, sempre pense duas vezes antes de sair do papel pro computador. Se puder, pense três.

Saindo do papel, fui pro Axure RP Pro — um programinha bem bacana que, dentre outras coisas, é excelente para criar layouts de baixa resolução de forma bem simples e rápida.

Geralmente os wireframes não são muito mais complexos que boxes cinzas com texto de preenchimento mas neste caso eu resolvi detalhar um pouco mais o layout no próprio Axure para que eu não precisasse refazer o layout no Fireworks, por exemplo. Inclusive, lá no site do Axure (pronuncia-se a.cshúr) tem disponível várias bibliotecas com os elementos de interface mais comuns para download, inclusive os do iPhone.

É válido mencionar que muito do CSS, do HTML e do Javascript que eu utilizei foi encontrado por aí, em exemplos e tutoriais.

No início, meu plano era de utilizar o jQTouch — praticamente uma extensão do jQuery especialmente criada para desenvolver sites para iPhone — com todas as funções para lidar com efeitos de transição que imitam as dos apps nativos e também com suporte a geo-localização, acelerômetro e tudo mais. Além disso, ele também vem com várias imagens, stylesheet e demos de utilização pra você poder estudar.

Acontece que a minha pressa de meter a mão na massa — ou no código — falou mais alto e o que eu acabei fazendo foi um recorte de várias partes de um CSS daqui, de um Javascript alí e foi indo, indo, até acabar.

O código php que puxa as notícias do feed do portal da Ufes, por exemplo, é um que eu já havia utilizado em outro site.

Teve muita coisa feita no olhômetro mesmo. Adiciona pixel, subtrai pixel, reseta e declara. Coisa linda.

Não descarto utilizar o jQTouch no futuro, de jeito nenhum. O que você gasta a mais pra aprender a lidar com ele no começo você acaba ganhando em dobro lá na frente com menos tempo gasto resolvendo pepinos e desuniformidades, além de ter um código mais enxuto e muitas outras vantagens incluídas.

É beeeeeta!

Nem todas as funcionalidades puderam entrar nessa primeira versão. As razões, claro, são várias: prazo, complexidade, prioridade e etc. O importante nessa etapa foi: com um funcionalidade escolhida, torná-la utilizável da melhor forma possível.

Acho que isso eu consegui fazer.

A ideia então é que novas funcionalidades sejam adicionadas aos poucos para tornar o site mais completo. Nisso, a listinha de coisas a serem adicionadas só tende a crescer, mas por enquanto:

• Lista de telefones úteis
• Cardápio do RU
• Filmes em cartaz no Cine Metrópolis

Além dessa parte toda de funcionalidade, haveriam também mudanças, adaptações e melhorias na interface, acompanhando a evolução do site. Dá pra notar que várias coisas estão diferentes entre o wireframe e o site funcionando. Umas ficaram melhores, outras piores, outras ficaram pra trás por diversos motivos.

Pessoalmente, acho que um dos desafios à frente seria o de criar uma interface que oferecesse uma experiência comum para qualquer dispositivo touch — seja ele Android, HTC, Apple, Nokia e Microsoft — não baseada na estética e convenções de uma plataforma específica, como a do iPhone, por exemplo.

E nesse momento eu acho que já começo a falar demais, pois é. Ainda não viu o site funcionando? Então vai lá ver e depois volta aqui nos comentários pra contar o que achou!

O que mudou?

Pro caso desse projeto ser atualizado, aqui fica registradas as mudanças.

• 1.0.0 — release inicial (15/07/2010)

Referências

• jQTouch — A jQuery plugin for mobile web development.
• Building iPhone Apps with HTML, CSS, and JavaScript
• iPhone Samples
• Web Design Inspiration for the iPhone

Observações

• O projeto é beta e totalmente pessoal, não tendo nenhum vínculo com a Ufes.
• Dúvidas ou sugestões? Use os comentários abaixo ou me mande um email.