Google Font Directory – test-drive de fontes para web

Colaboração de Márcio Sartor

Google Font Directory é uma nova ferramenta da Google que permite que desenvolvedores e designers testem algumas fontes antes de utilizá-las na internet. O Font Directory permite editar o texto, alterar o tamanho da letra, altura da linha, espaçamento, etc. Após configurar o texto, basta copiar o código gerado para utilizar a fonte, e sua formatação, no seu site através da Font API. Todas as fontes possuem licença de uso aberta, e são servidas direto dos servidores do Google.

Artigos Relacionados

• Google Font Previewer (blogoscoped.com)
• Google Font Directory (mt-soft.com.ar)
• Google Webfont Directory (code.google.com)
• Google Font Directory & API (saadkamal.com)
• Google Font Directory: Another Custom WebFonts Typography Kit (shoutmeloud.com)
• Getting Started – Google Font API – Google Code (code.google.com)
• Google Launches New Preview Feature for Font Directory (webpronews.com)

Mouse 2.0 – o multitoque encontra o mouse

O Microsoft Applied Science Group apresenta um trabalho mostrando novos dispositivos de entrada que combinam as capacidades conhecidas de um mouse de computador com sensor multitoque. Com isso pretendem enriquecer as tradicionais interações através de um ponteiro com toques e gestos. São apresentadas cinco diferentes implementações, cada uma explorando diferentes estratégias e possibilidades de interação. O estudo nos traz descrições detalhadas do hardware e especificações de implementação de software nos protótipos, bem como discussão de pontos fortes e limitações dos aartefatos.

Artigos Relacionados

• Is Morgan Stanley underestimating UI changes? (blogs.msdn.com)
• Sneak Peak: Is this Apple’s new desktop touch pad? (thenextweb.com)
• Pen and Finger Input Multi-touch is possible (touchuserinterface.com)
• Input This (whatever.scalzi.com)
• Magic Mouse Patents Revealed (macstories.net)

EZFlar – gere suas próprias realidades aumentadas

EZFlar é um gerador automática online de realidades aumentadas desenvolvido por infografistas do jornal “O Estado de São Paulo”. O código-fonte do EZFlar é open source em Actionscript 3.0 mas não requer conhecimentos de programação para gerar projetos mais simples. Segundo seus autores, a realidade aumentada deverá trazer grandes transformações no design de interfaces pois, a partir do momento que adicionamos mais uma camada de informação, uma nova dimensão é aberta e as possibilidades ficam infinitas. Atualmente o EZFlar está em fase de analisar as experiências dos usuários. Para o futuro pretende-se desenvolver novos pedaços, como a possibilidade de “embebbed” o Flash criado pelo gerador para postar em blogs e trabalhos, criando um gadget interessante. Clique aqui para testar o R.A. generator. Se o seu computador tiver webcam, você pode testar essa ou essa realidade aumentada.

Artigos Relacionados

• Augmented Reality Makes It Into The Fashion Scene (ubergizmo.com)
• (Augmented) Reality Bites: Augmented reality! If you’ve used, say,… (ny.curbed.com)
• Qualcomm Opens A R&D Center To Focus On Augmented Reality (ubergizmo.com)
• Now Silverlight Does Augmented Reality Too (readwriteweb.com)
• British design house launches augmented reality fashion show (dvice.com)

inPreso Screens – usabilidade direto do navegador

inPreso Screens é um aplicativo Adobe AIR que permite a criação de wireframes e mock-ups que ajudam a visualizar idéias ou conceitos de design para um site ou aplicativo. O serviço permite que você modele telas de websites, aplicativos para computador – com visualizações para Windows XP e Vista, Mac OS X e também aparências genéricas – e para celular, com gráficos de iPhone e Android disponíveis em suas bibliotecas. Para outras plataformas, é possível carregar arquivos locais. Edição de texto, gráficos e elementos ativos como botões e campos de entrada de dados estão disponíveis, e cada tela pode ser trabalhada como em uma apresentação de slides. A interface é simples e fácil de usar, bastando arrastar e soltar os elementos requeridos. Muito bom para designers e desenvolvedores que precisam economizar tempo.

Artigos Relacionados

• Adobe AIR 2.0, full-featured Flash Player coming to smartphones (infoworld.com)
• Adobe ships critical update (robbiz1978.blogspot.com)

iPad – mudando a maneira de desenhar websites

O iPad vem recebendo inúmeras críticas. Enquanto geeks o olham com certo desprezo por ser apenas o que se esperava, o mercado editorial o tem visto como a verdadeira salvação. O fato é que, mais cedo ou mais tarde, teremos que fazer webdesign considerando esse tipo de dispositivo móvel. Para tanto temos que nos ater a alguns pontos fundamentais. O primeiro deles é o fato de podermos visualizar a tela tanto no formato retrato quanto paisagem, ou seja, teremos obrigatoriamente que usar um design fluido inteligente na largura ou, Smart Fluid Width Design. Uma combinação de CSS e Javascript pode melhorar em muito a experiência do usuário. Em alguns casos essa pode não ser a melhor solução e tenhamos que partir para a utilização de vários estilos de CSS para diferentes configurações e dispositivos ou, o chamado adaptive CSS. Em outra situação, poderemos partir para um conteúdo que se adapta à resolução da tela. Uma coisa, entretanto, nos parece certa. O website não precisa aparecer da mesma maneira em todas as plataformas. Para alguns, a solução vertical será mais indicada enquanto, para outros, em que se deseje uma melhor visualização horizontal, usar o tablet em landscape vai ser mais agradável. A mesma solução de não dobrar (no fold) utilizada no iPhone, deverá ser transferida para os novos dispositivos. Não podemos também esquecer que o principal método de interação do usuário serão seus dedos. Logo os links terão que ser repensados e redimensionados. Os atuais efeitos de mouse over desenhados para dispositivos de apontar ou mesmo, links em textos, acabarão se tornando obstáculos para a experiência do usuário. Outro paradigma, é a não utilização do Flash mas, com a Google adotando abertamente o HTML5 para o Youtube , nos parece claro o caminho a ser trilhado. Designers precisam entender essa mudança e dedicar esforços no aprendizado do HTML5 porque, parece que a coisa vai rolar por aí. Aspectos de tipografia e webkit também precisam ser avaliados e testados.

Recursos Relacionados

• Fixed vs. Fluid vs. Elastic Layout: What’s The Right For You (smashing magazine)
• Adaptive CSS Layouts: New Era in Fluid Layouts (smashing magazine)
• Progressive Enhancement with CSS (a list apart)
• iPad: A Saviour for Web Design, Too! (fast company)
• Life Below 600 Pixels (iampaddy)
• Can Flash Be Saved? (scoblazer)
• Apple’s iPad – a Broken Link (adobe blog)

Artigos Realcionados

• Designing Websites for the iPad (domainmacher.com)
• Adobe defends Flash against HTML assault (news.cnet.com)
• Use CSS Media Queries to target the iPhone. (creativetechs.com)
• What I Want in a Tablet (mikebrittain.com)

Pearltrees – mudando o design de interação

Pearltrees é um bookmark com uma maneira diferente de organizar a informação. Além disso, é também um novo conceito de interface, já vislumbrando na internet, a interação multitoque. Uma nova forma de explorar e contextualizar a web. Os usuários criam visualizações no estilo mindmap (árvore) onde as informações são colocadas em “pearls” (pérolas) ou nós de mídia, que possuem ramificações, dependendo de como se deseja organizar as informações. Essas pérolas podem ser expandidas, contraídas, ligadas, agrupadas ou desagrupadas em uma hierarquia não linear. As informações contidas podem ser compartilhadas com outros usuários que gravitam ao seu redor e visualizam suas coleções. A partir daí você pode escolher o seu conteúdo favorito e omitir o ruído. Então pode-se enviar as pérolas, incorporá-las no seu blog ou transmití-las ao Twitter e Facebook. Assista a um vídeo tutorial do Pearltrees.

Artigos Relacionados

• How the iPad is Changing Interaction Design (readwriteweb.com)
• Apple’s approach to iPad e-books could create confusion: Which software will open which book? (taragana.com)

Johnny Holland – é tudo interação

Johnny Holland é um espaço coletivo para a troca de idéias, compartilhamento e respostas sobre os mais diversos aspectos do design da interação. Tem como objetivos estabelecer um compartilhamento coletivo, fonte de conhecimento para profissionais e estudantes e preencher lacunas entre as diversas áreas envolvidas no tema como design de interação, experiência do usuário, arquitetura de informação, etnografia, etc. O formato é o de uma revista online contendo artigos, dicas, calendário de eventos, podcasts e palestras. Johnny não afirma que ele tenha todas as respostas, mas ele tem um monte de perguntas.

Artigos Relacionados

• Designing Exceptional Mobile Experiences (tc.eserver.org)
• User Experience Design in context of Graphic Design (slideshare.net)
• Evantage Consulting Announces Publication of “The iPhone is Not Easy to Use: A New Direction For User Experience Design” (prweb.com)
• Agile Design, O RLY? (obiefernandez.com)
• UX Design vs UI Development (tc.eserver.org)
• Readings in Digital Design (downes.ca)

Axure – wireframes transformando a maneira de trabalhar

Axure é um software para criação rápida de wireframes, protótipos funcionais e especificações de aplicativos e sites de internet. Excelente ferramenta para arquitetos de informação, designers, gerentes de projeto, etc. O programa reúne diversas opções de forma a facilitar ao máximo o desenvolvimento deste tipo de projeto. Com isso podemos testar idéias, gerar feedbacks das experiências de usuários, automatizar especificações, testar usabilidade, fazer anotações e colaborar no design de uma maneira simples e rápida. Pode-se testar o produto gratuitamente por 30 dias. Assista a um tour do Axure. Para aqueles que preferirem um aplicativo online, sugerimos o iPlotz, o Balsamiq Mockups e o MockFlow.

Artigos Relacionados

• At last, a sketchy Axure widget library (90percentofeverything.com)
• Axure RP Pro Mac Alpha (konigi.com)
• Collaboration Tips for Designers Working with Developers (sixrevisions.com)
• Employing the Power of Less (web2expo.com)
• Importance of a Good Web Design for Websites (blogperfume.com)

My Machine – educação e empreendedorismo

MyMachine é um projeto educacional online que estabelece relações com três níveis de ensino: fundamental, superior e médio. Através de um site atraente e interativo, as crianças produzem idéias para a construção de suas máquinas dos sonhos, orientadas para a imaginação, criatividade e uso funcional. Então, estudantes do ensino superior de design e engenharia, traduzem essas idéias infantis em projetos viáveis. Os projetos são publicados em uma comunidade virtual online. O ciclo é completado por estudantes do ensino médio de escolas técnicas que produzem protótipos reais das máquinas. Durante todo o processo, as crianças e os estudantes podem colaborar online e solicitar apoio em know-how para parceiros. O projeto é desenvolvido em Flandres, na Belgica, conta com a aprovação do governo e já estabeleceu parcerias corporativas com diversas empresas. Este ano teve a participação de 50 escolas. Excelente exemplo de união de educação com empreendedorismo focando criatividade e inovação. Visite a galeria infantil. Veja as impressões da espanhola Indigo BrainMedia nesta apresentação.

My Machine – Showtime! de bart noels em Vimeo.

Artigos Relacionados

• Careers advice for 10-year-olds (news.bbc.co.uk)
• ‘Make primaries academies too’ (guardian.co.uk)
• One Problem with Entrepreurship Education (myventurepad.com)

Ommwriter – editor de textos inspirador

Ommwriter é um editor de textos que se propõe a restabelaecer a concentração e a inspiração de quem escreve. Para tanto, a interface abre em tela cheia e é bastante minimalista, visando não distrair o autor. São poucas as opções de tipos de fontes e outros tipos de ajustes no texto. Pode-se mudar a imagem de fundo e o áudio zen tem opções e pode ser desligado. Os aspectos negativos são o fato de só poder ser baixado para Mac e as opções para salvar os textos são o formato proprietário do Ommwriter ou txt.

Artigos Relacionados:

• Ommwriter: a Mac writing app that helps you concentrate (downloadsquad.com)
• Ommwriter: Be Alone with Your Thoughts (readwriteweb.com)
• Count Words & Analyze A Document’s Readability With Word Counter [Mac] (makeuseof.com)
• Free writing apps to help you relax (en.onsoftware.com)

Mir:ror – dando poderes aos objetos

Mir:ror é um dispositivo desenvolvido pela Violet que detecta objetos e lhes atribui poderes. Coloca-se o objeto sobre o espelho conectado na USB e díspar-se aplicativos ou conteúdos multimídia. Através da identificação de ondas rádio freqüência (RFID) colocados em outros dispositivos nos objetos, podemos incluir comandos para o computador. Esses outros dispositivos podem ser o Ztamps que são selos coloridos que podem ser colados nos objetos ou através do Nabaztag, um coelhinho que, conectado na internet, pode enviar qualquer informação do ambiente desde sons e luzes até informação verbal. Com esses dispositivos podemos abrir arquivos no computador, conectar sites, tocar músicas, vídeos e podcasts, ver imagens. memorandos, ler livros e muito mais.

[ratings]

Artigos relacionados:

• Mir:ror: A Glimpse Into The Future of an RFID World (readwriteweb.com)
• RFID tags for medicine control at home. (mobilewellbeing.info)
• Top 5 Web Trends of 2009: Internet of Things (readwriteweb.com)
• Nabaztag can’t make RFID cool, has to file for bankruptcy (engadget.com)