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.

Hoje é apenas o segundo dia do evento, mas muitas coisas legais já aconteceram por aqui. Vou resumir algumas delas:

A viagem

A caravana do Espírito Santo saiu no domingo 21h30 mas só fomos chegar no Imigrantes perto das 16h da segunda. Viagem um pouco demorada, mas tranquila. Fora os apertos no coração que eu imaginava o estado do meu querido CPU toda vez toda vez que o ônibus trepidava alucinadamente nas estradas capixabas como uma carroça desgovernada descendo uma ribanceira.

Felizmente, o computador chegou intacto e pudemos descarregar as malas.

O evento

A Campus Party é absolutamente impressionante. Não exatamente impressionante pelas últimas tecnologias, nem pela mega-boga conexão de 10gbps e nem pelas minas gostosas dos stands, mas sim pela quantidade de pessoas reunidas, trocando informações e se divertindo ao mesmo tempo.

É claro que são MILHARES de computadores, milhares de barracas. Milhares de casemods bizarros, um mais interessante que o outro e tudo mais. Mas são as pessoas e essa ATMOSFERA NERD que tornam o evento o mais legal do mundo!

A galera

Ah sim, se não fosse pela galera que conheci por aqui, o evento não seria nada a não ser uma feira nerd para se baixar filmes e seriados. Conheci muita gente bacana e figuras que já conhecia pela internet, como os camaradas @elrodriguez, @frangossauro e @serpa. Sem falar na queridíssima @shuberry que me acompanhou na minha modesta apresentação do projeto do Localizador de Amigos no CP Labs!

Abre parenteses: não consigo nem descrever o que foi o meu nervosismo antes da apresentação, mas posso falar da alegria posterior. Foi um momento muito bacana, que com certeza pode levar a várias oportunidades e que, acima de tudo, me deu uma vontade de querer mais, de criar mais e de participar mais.

A programação

Definitivamente coisas para se fazer aqui não faltam. Há dezenas de palestras, oficinas e desconferências acontecendo ao mesmo tempo. Tanta coisa que fica impossível participar de tudo.

Mas pra tentar ficar por dentro do que tá acontecendo é só ficar de olho no Livestream do Campus Party. Lá você fica atualizado sobre tudo que publicam sobre o evento em tempo real.

As ferramentas

Definitivamente uma das características da Campus Party é a democracia. Dando uma volta pela área principal da campus você verá desde uma galera jogando Counter Strike até quatro caras jogando Uno nos iPhone/iTouch via rede Wi-Fi.

Há espaço pra todo mundo: pros modders, gamers, designers, blogueiros, desenvolvedores, empreendedores, ativistas e até mesmo socialites do mundo internético e tecnológico. Mas um interesse é comum: o uso de ferramentas online.

E as ferramentas são muitas: Twitter, Flickr, Livestream, YouTube, Ustream, WordPress, Videolog e etc, todas essas que conhecemos estão por aí sendo utilizadas por todos os cantos do Imigrantes. As pessoas estão gravando, escrevendo, fotografando, enfim, documentando e compartilhando com o mundo seu ponto de vista sobre o evento.

Depois de uma certa enrolação da minha parte para tentar converter o vídeo e tirar a porcaria do letterboxing, aí está o vídeo final do trabalho de Multimídia I da faculdade, do mesmo jeito que foi exportado do Premiere.

Não vou me extender muito neste momento, então, resumidamente, o Localizador de amigos é um conceito de aplicativo para iPhone que utiliza a integração com redes sociais e tecnologia GPS para encontrar amigos que estejam próximos de você por meio de palavras-chave e outras variáveis.

É óbvio que o vídeo não está 100% e tudo precisaria ser retrabalhado para se chegar num protótipo funcional utilizável. Quem estiver interessado e quiser ajudar, entre em contato, por favor.