Photo by: Leo Reynolds

Realizou-se hoje a edição de Paris da iPhone Tech Talk World Tour 2009, um conjunto de apresentações onde os gurus do iPhone partilham com os developers alguns segredos e truques que permitem melhorar as qualidade geral das suas aplicações. O evento teve lugar na Maison internationale, Cité internationale universitaire de Paris, um espaço muito bonito e bastante agradável.

O dia foi passado na companhia dos meus colegas Basile e Romain, estando os três em representação da Clicmobile que nos proporcionou a participação num evento ímpar.

Com três salas para as sessões e uma sala, Lab, em que nós, meros mortais, podíamos ver as nossas dúvidas esclarecidas por alguns dos criadores das ferramentas que utilizamos diariamente.

Houve sessões para todos os gostos:

• Effective iPhone App Development 1 & 2;
• Audio Development Tips for iPhone;
• iPhone User Interface Design Essentials;
• Preparing and Delivering Video for iPhone;
• Adding In App Purchase to your App;
• Working with Core Data;
• Mastering OpenGL ES for iPhone 1 & 2;
• Integrating Web Content into iPhone Apps;
• Testing and Debugging Your iPhone Application;
• Finding your way with Location and Maps;
• Maximizing iPhone App Performance;
• Networking: From Sockets to GameKit;
• Implementing Push Notification;

Infelizmente havia sempre três sessões em paralelo, o que impossibilitou a presença em todas, escolhendo aquelas que achamos mais interessantes.

Em todas as apresentações foram faladas e/ou demonstradas formas e métodos de implementar algumas soluções que não só simplificam como aceleram sobremaneira as aplicações a desenvolver.

Foi bom conhecer outros developers, não apenas franceses mas de muitas outras nacionalidades, bem como poder falar com os apresentadores que estavam sempre disponível para qualquer dúvida ou esclarecimento que lhes era colocado.

Foi também um dia para perceber o quão pouco sabemos comparado com todas as possibilidades do iPhone SDK.

Fez por estes dias um ano que me mudei para Paris, para trabalhar na Clicmobile.

Durante este último ano tiver oportunidade de conhecer a cidade bastante bem e confesso que ainda tenho bastantes coisas para ver. Há recantos fantásticos, para lá daqueles que aparecem nos postais. Terei tempo para o fazer.

Deixando a parte da cidade, falo agora das pessoas. A ideia que tinha dos franceses era má e mudou apenas no seguinte: os franceses são simpáticos, os parisienses, esses sim, têm a mania. Outra coisa que me apercebi é que a comida francesa — a do dia-a-dia — está over-rated. Muito. Digo isto na perspectiva da pessoa que almoça perto do emprego durante a semana e se depara com o problema da escolha, enorme, de tipos de comida. Abundam as massas, as pizzas, os japoneses (não me queixo desta parte), as sanduíches de todo o feitio, mas nada daquilo que estava habituado: em qualquer esquina há um sítio em que servem um prato do dia, que muda diariamente, e que permite fazer uma alimentação minimamente equilibrada. Solução? Comer qualquer coisa a correr e em casa comer em condições.

O alojamento foi outra das coisas que me deixou estupefacto. Para se conseguir alugar uma casa são precisos milhentos papéis, garantias, contratos e quase levar meia família. Os preços são de arrepiar, ainda mais se atendermos à relação preço/tamanho de muitas das ofertas existentes.

Sobre o trabalho, nada a declarar. No início as minhas funções eram apenas e só de Web Developer (PHP, CSS, HTML e Javascript) mas com o avançar do tempo acabei por me envolver em diferentes projectos e iniciei-me na programação em Objective-C para iPhone. Foi uma mudança bastante mais rápida daquilo que pensava. A aprendizagem continua.

A Clicmobile é uma empresa jovem, fundada em 2003, onde a baixa média de idades, a diversidade e o tamanho de projectos e clientes contribuem para um ambiente descontraído, mas muito profissional.

Pesando todos os factores, o familiar é discutido a seguir, esta foi uma mudança excelente em todos aspectos.

O grande ponto negativo de todo este ano é a ausência da família. Estamos a tratar das coisas para que até final de Outubro a Sandra e o André me venham fazer companhia. Depois da mudança, já em Janeiro, iremos contribuir para a taxa de natalidade cá do sítio com mais um rapaz.

Como devem imaginar é com muito gosto falo aqui do projecto Soundwalk da qual a empresa onde trabalho, a Clicmobile, é parte integrante. Depois de muitas horas de trabalho está finalmente acessível para todos. Espero que se divirtam tanto ao utilizar nós nos divertimos ao criá-los.

Os Soundwalks começam agora a ser transformados em aplicações iPhone e contam já com 8 aplicações (4 em inglês e 4 em francês). Tratam-se de guias áudio, em bairros famosos das cidades, que lhes dão o nome, e são narrados por artistas de algum relevo dos respectivos cidades. Há muitos programados e entre as cidades - Paris, Nova Yorque, Londres, Beijing, Berlim, etc… - encontra-se Lisboa cujo Soundwalk será narrado por John Malkovich. É, por todas as razões, e mais algumas, aquele cujo resultado mais aguardo.

Estão já em andamento as correcções e melhoramentos às aplicações já submetidas e dentro em breve novas versões sairão, com novidades interessantes.

Vão e deixem a vossa opinião. Eu gostei.

Mark Boulton é designer gráfico e já trabalhou em empresas como a BBC, a T-Mobile e a British Airways. Lançou recentemente o livro A Pratical Guide to Designing for the Web que recomendo vivamente a quem quiser saber mais sobre o design para a web, da tipografia à teoria da cor, passando pelas grelhas, está lá tudo. A apresentação de Mark Boulton foi sobre um dos temas quentes do momento, Font Embedding. E também sobre Tipografia, é verdade.

Apaixonado pela tipografia há muitos anos, Mark explicou que um dos trabalhos que teve, ainda na faculdade, foi descrever as suas memórias passadas recorrendo à tipografia. Pode parecer estranho à primeira leitura mas para ele faz todo o sentido, uma vez que cada tipo de letra, bem como as suas propriedades, pode transmitir diferentes sensações e estímulos a quem lê.

Como humanos criamos estruturas para nos ajudar a lidar com as coisas. Na web acontece a mesma coisa. A organização permite criar uma lógica nos sites que os tornam mais simples e fáceis de utilizar.

Os tipógrafos eram os Arquitectos de Informação antes estes aparecerem.

Actualmente durante a concepção da maioria dos sites a tipografia apenas é considerada nas etapas finais do projecto. Na opinião de Mark a tipografia devia ser incluída em todas as fases dos projectos, pois é esta que vai transmitir a mensagem. É como subir o Evereste, mas de forma estruturada, uma coisa de cada vez. A escolha errada do tipo de letra vai afectar o resto da estrutura.

Na web os designers não controlam os tipos de letra utilizados pois estes variam consoante o dispositivo a partir do qual se acede aos sites. Solução? Font Embedding! Mas este é um assunto delicado já que as fundições detêm os direitos sobre a maioria dos tipos de letra existentes e são corporações enormes e com processos de licenciamento demasiado complexos e demorados para satisfazer as necessidades actuais dos designers.

Comics Sans: a culpa não é tua! Foste vítima de abuso!

Depois do almoço, com o Rich Clark, um dos membros do HTML5 Doctor, o Darren Bailey e alguns elementos da ClearLeft foi a vez de Dan Rubin, User Interface Designer para a Sidebar Creative apresentar Designing Virtual Realism.

A apresentação focou-se essecialmente no design de interfaces e de como as texturas que conhecemos do nosso dia-a-dia podem ajudar a melhorar a qualidade geral dos nossos sites, bem como a forma como os utilizadores se servem deles.

Falou no facto de o design estar presente em todos os produtos que utilizamos diariamente e que as nossas experiências passadas determinam a forma como nos relaccionamos com eles e como os utilizamos. O ambiente providencia contexto às coisas, ou seja, cada objecto pode ter diferentes utilizações e/ou interpretações consoante o local ou situação em que se encontra.

A forma com que utilizamos os diversos dispositivos faz com que a interacção com eles exija muito pouco da nossa mente. Utilizamos instintivamente, porque parece a melhor forma de o fazer, ou porque somos levados a isso? Se acha o os seus utilizadores são estúpidos, possivelmente o seu site/produto está mal concebido em termos de experiência para o utilizador. Devemos dar pistas visuais para os casos em que é possível a interacção. Os utilizadores agradecem, utilizando.

Aconselhou a utilização de texturas da vida real nos sites, para uma sentimento de maior familiaridade e explicou a forma como criou um dos temas Wordpress disponível na WooThemes. Utilizou o scanner para passar para formato digital a textura de uma caixa de máquina fotográfica, uma embalagem a que achou piada e uma carteira. O resultado pode ser encontrado em New Theme Concept by Dan Rubin.

Na natureza tudo tem textura. Porque não no web design?

• O design está presente em todas as coisas;
• As experiências passadas afectam a forma de pensar sobre as diversas coisas;
• O ambiente providencia contexto, ou seja, interpretamos as mesmas coisas de maneira diferente consoante o local onde estamos e/ou interagimos com elas;
• Os dispositivos são encarados com extensões do corpo, ou seja, utilizamo-los sem termos de dispender grande esforço mental para o fazer;
• Acha o que os seus utilizadores são estúpidos? Possivelmente o seu design é que tem falhas graves;

O terceiro orador foi Jon Hicks, conhecido designer. Trabalha actualmente para a Opera Software como Senior Designer.

Na sua apresentação tentou apresentar a utilização de ícones de forma a melhorar a interacção entre os utilizadores e as páginas e não apenas como decoração. Falou da omnipresença dos ícones na nossa vida, desde a pré-história e de como a sua forma e modo de apresentação foi variando ao longo dos tempos e dos meios nos quais eram utilizados.

Alguns pontos essenciais da apresentação:

• A utilidade dos ícones para transmitir o estado actual de um elemento (mouse over, activo, inactivo, etc.);
• A facilidade dos ícones de produzir, imediatamente, uma reacção no utilizador (mediante a familiaridade com os mesmos);
• A utilização de convenções, também no ícones, permite que as mesmas definições sejam utilizadas em sites distintos;

Devemos utilizar ícones para:

• Resumir texto;
• Atrair a atenção;
• Explicar acções e comportamentos;
• Transpor diferenças de linguagem;
• Ajudar a navegação;
• … e adiccionar interesse!

Passou depois a descrever alguns dos seus processos na criação de ícones, actualmente o seu trabalho diário, desde a escolha da “metáfora” correcta para cada um dos ícones consoante o significado que se pretende obter, à existência, ou não, de convenções para determinados tipos de ícone, a recolha de inspiração dos mais variados sítios.

A parte da criação contempla o desenho de vários ícones, inicialmente com papel e lápis e depois transpondo-os para o computador que permite criar os ícones e testar as variadas combinações por forma a fazerem sentido e testar se, realmente, o significado que transmitem é o adequado à finalidade do mesmo.

Falou da necessidade de utilizar ícones que as pessoas facilmente reconheçam sem ter de haver explicação adicional, já que isso iria contra o principal factor que leva à utilização de ícones: a simplificação dos interfaces. A consistência dos ícones, as cores utilizadas consoante se pretende que chame a atenção ou que se mantenha discreto.

Finalmente falou dos diversos tipos de ficheiro utilizados os ícones, bem como dos prós e contras de cada um deles.

Podem encontrar os slides (pdf) e o post sobre a presentação em Icons for Interaction.

O segundo orador foi Simon Collison, fundador da Erskine Design e falou sobre aquilo que Andy Clarke apelidou de “The Ultimate Package - Traditional Techniques with a Twist”.

Os pontos-chave do “The Ultimate Package”:

1. Project Backbone
2. Collaboration
3. Audience Grouping & Actions
4. Project Methodology
5. Roadmap
6. Inspiring Creativity
7. Conventions
8. Prototyping
9. Single Focused Design Path
10. Conclusion

Na apresentação Simon falou dos processos que utiliza no seu trabalho diário para uma melhor colaboração com Greg Wood.

Falou na necessidade de ter um pacote básico de ferramentas disponível no início de qualquer trabalho. De realizar o trabalho tendo sempre em conta qual o objectivo final.

Destacou o aspecto fundamental que a colaboração representa, de forma quer a um melhor resultado final, quer a um melhor ambiente de trabalho. Neste ponto do seu “Ultimate Package” salientou a importância da comunicação entre os diferentes intervenientes do processo de comunicação: entre designer e developer, entre estes dois e o cliente e entre os três e o público-alvo do projecto.

Uma das formas para melhor entender as necessidades de cada um destes elementos e por fim do público-alvo é a utilização dos pequenos hexágonos coloridos que podem ver no pdf e que servem para mostrar a forma como as diferentes pessoas acham que seria a estrutura final do trabalho em mãos. No fundo, diferentes pessoas criaram diferentes concentrações de hexágonos, mantendo entre todas pequenos pontos comuns.

Além das escolhas individuais é importante ter em conta também as necessidades dos diferentes grupos de utilizadores, executivos, pessoas com conhecimentos técnicos, sem conhecimentos técnicos, etc., fazendo os possíveis para atender à expectativa quer dos grupos quer dos indivíduos.

Falou depois nas diferentes metodologias possíveis para obter os melhores resultados finais: Waterfall, Agile, Sprint, ou qualquer outra. Destacou que, essencialmente, a metodologia poderá, e deverá, variar mediante o projecto pois cada uma tem vantagens e desvantagens próprias que as farão mais ou menos apropriadas.

Passou depois à importância de ter um caminho bem definido entre o início do processo de criação e o resultado final, para que cada um dos envolvidos saiba em que parte do processo se encontra e quais as suas responsabilidades na fase actual.

A necessidade de inspirar a criatividade e formas de o fazer foi o ponto seguinte. Desde objectos do dia-a-dia, a grupos de fotos no Flickr, screenshots de páginas, até ao factor positivo que representa um espaço físico de trabalho, com materiais relativos ao trabalho. Este espaço é, para ele, essencial no processo criativo.

No sétimo ponto, Convenções, falou nas vantagens que a utilização de convenções trará quer ao andamento de um trabalho, ao tempo necessário para o concretizar e ao resultado final. As convenções permitem uma maior rapidez a detectar possíveis erros e na sua posterior correcção. Desde convenções nos ficheiros CSS e na sua organização, até à convenção na estrutura das pastas existentes em cada projecto.

A importância da criação de protótipos detalhados daquilo que se pretende produzir permite testar diferentes formas de interacção ainda antes de as transportar para HTML e CSS. Destacou particularmente os protótipos em papel pela facilidade e rapidez de criação. A criação de protótipos HTML e CSS permite então testar todas, ou quase todas, as interacções possíveis no ambiente natural do site, o browser.

A definição de um caminho directo e bem documentado durante todo o processo de trabalho é essencial para maior rapidez, melhor ambiente de trabalho, melhor entendimento entre todos os envolvidos, melhor qualidade e, mais importante que tudo, uma maior satisfação dos utilizadores do trabalho final.

Podem encontrar os slides em @Media2009: The Process Toolbox

Começou por falar na situação actual, de crise, e da forma como ela nos afecta, seja qual for a nossa profissão. Passou depois a descrever algumas mudanças que podemos fazer para melhorar os nossos processos de trabalho.

Destacou a importância de manter um pensamento positivo em tempos de crise e recessão, pois as recessões podem ser muito estimulantes para a criatividade. Uma forma diferente de “a necessidade aguça o engenho”. E somos nós, os profissionais da web, que precisamos de fazer estas mudanças, não os nossos clientes. Nós temos o conhecimento e precisamos de encontrar formas de o tornar mais rentável. Nisto, a criatividade é um ingrediente essencial.

Utilizamos métodos e processos ultrapassados. Precisamos de encontrar novas maneiras de ser criativos, mudar a ideia que os clientes têm sobre o nosso trabalho.

Tempo de descartar hábitos antigos.

O habitual processo de Design - Visuals - Cliente - Developer - Tests consome demasiado tempo e é extremamente ineficiente. Precisamos de um workflow baseado na criatividade: Design (CSS e HTML) - Pequenos ciclos de trabalho - Design Interactivo torna todo o processo de criação mais rápido, mais interactivo e com um maior retorno sobre o investimento para o cliente.

O browser como uma ferramenta de design

Para quê utilizar aplicações de edição gráfica, como o Photoshop, para fazer algo para a Web? Estas falham nesse propósito pois não permitem uma reprodução exacta do comportamento de um layout no browser. Redimensionar a janela, aumentar o tamanho do tipo de letra, o movimentar do rato sobre os diferentes elementos.

Para quê mostrar aos clientes designs estáticos de uma coisa que se pretende interactiva? Isso torna as interacções dos diferentes elementos mais dificeis de explicar.

O design utilizando HTML e CSS é interactivo. Torna-se táctil. É tempo de parar de mostrar layouts estáticos aos clientes. Esta é uma das principais razões para que grande parte dos sites tenham uma largura fixa e sejam centrados. Designs estáticos reforçam a noção de que “os sites deviam parecer exactamente iguais em todos os browsers”.

Utilizando o browser como a sua principal ferramenta de design conseguiu no processo de redesign do New Internationalist criar 30 templates em cerca de 3 semanas de trabalho.

Diferente não significa defeituoso.

Utilizar elementos alternativos como os pseudo-elementos que faltam no Internet Explorer 6 são coisas com as quais podemos viver. Esta foi uma das ideias que o levou a criar o Universal IE6 CSS.

Uma citação de Dan Cederholm sobre a utilização de Sobre RGBa:

The a stands for awesome

A interacção torna-se natural com o design no browser. Alguns dos pontos a ter em conta:

• Pode-se testar durante o design e começa-se a testar logo desde o início;
• Criar um sistema e não uma página, para uma maior rentabilização do tempo e menor quantidade de código;
• Desenhar sobre uma grelha flexível, para acomodar eventuais modificações;
• Criar do conteúdo para fora, ou seja, começar com o conteúdo e não o colocar apenas no final do design criado;
• Utilizar convenções de código, para maior uniformidade e facilidade de manutenção futura;

A utilização de sistemas flexíveis gera um maior retorno sobre o investimento, menos problemas e deixa mais tempo para comunicar.

O que fazer com o tempo extra que a mudança de processo nos proporciona?

Os clientes não nos pagam pelas nossas horas de trabalho, mas sim pelo conhecimento que fomos acumulando ao longo dos anos, utilizem o tempo que ganharam para aprender ou aprofundar os vossos conhecimentos.

Podem encontrar os slides da apresentação e a transcrição em For a Beautiful Web

Chegámos a Londres ao final da tarde e aproveitámos o facto de termos ganho uma hora com a mudança de fuso horário para passear pelos arredores do hotel. O hotel estava situado a escassos 3 minutos a pé do local da conferência o que facilitava ainda mais as coisas. Ainda mais perto, nas costas do hotel, ficava o London Eye.

Depois do jantar, acabei por me deslocar até ao bar sugerido pela organização, The Mulberry Bush, para beber uma cerveja. Acabei por encontrar outras pessoas que iriam estar na conferência no dia seguinte, entre elas o Peter Paul Koch que contava aparecessem mais que os 9 presentes.

Os posts seguintes são representam o meu resumo de cada uma das apresentações.