• Contato
  • Agni na mídia
  • Quem sou eu?
  • Agni.art

    Padrões Web, Design, Publicidade, Software Livre, e outras histórias!

    posts com a tag ‘interface’

    Instalando e testando o GIMP 2.7.1 no Ubuntu Lucid Lynx

    O Lucid Linx, recém lançada versão 10.04 do Ubuntu, não traz o GIMP como editor de imagens nativo em sua instalação. Em seu lugar entraram o editor de vídeos Pitivi e o gerenciador de imagens F-Spot, que ganhou novas funcionalidades de edição. Mas o GIMP ainda pode ser facilmente instalado a partir da Central de Programas do Ubuntu.

    Entre os argumentos da Canonical para a saída do GIMP está o fato de ele ser considerado uma aplicação mais “profissional”, com uma interface complexa demais para os usuários do Ubuntu. Apesar de ter alguns usuários mais antigos como adeptos, e até mesmo alguns usuários simpatizantes que aprenderam a editar imagens com o GIMP, fato é que um dos principais motivos para a pouca popularidade desta ferramenta sempre foi a sua interface em três janelas flutuantes, que causa estranheza e desconforto na grande maioria dos usuários que tentam migrar de outros editores como o Photoshop.

    Cedendo as incansáveis reclamações de usuários, os desenvolvedores da ferramenta decidiram implementar na próxima versão do GIMP o modo de “janela única”, mais parecido com outros editores, e que possibilitará uma migração mais confortável e uma curva de aprendizagem mais suave.

    O GIMP 2.8 será a próxima versão estável do editor. Enquanto isso, caso você queira conferir alguns dos novos recursos, é possível instalar e versão de desenvolvimento, que ainda é instável e pode conter alguns bugs, mas que vale a pena dar uma conferida!

    Instalando o GIMP 2.7.1

    Para fazer a instalação, vamos adicionar o repositório PPA Oficial do GIMP 2.7.1. Abra a janela do terminal e digite o comando abaixo:

    $ sudo sh -c "echo 'deb http://ppa.launchpad.net/matthaeus123/mrw-gimp-svn/ubuntu lucid main' >> /etc/apt/sources.list"

    Depois de adicionar o PPA, é preciso adicionar a chave GPG. Para isso, digite no Terminal o comando abaixo:

    $ sudo apt-key adv –recv-keys –keyserver keyserver.ubuntu.com 405A15CB

    Em seguida podemos atualizar os repositórios:

    $ sudo apt-get update

    Depois disso, estamos prontos para instalar o GIMP 2.7.1:

    $ sudo apt-get install gimp

    Atualizando: uma forma mais fácil

    Recebi dois comentários nesse post, dos usuários Rafael Raposo e Fabricio Biazzotto, sugerindo uma forma mais simples de fazer a instalação, adicionando o repositório já com a chave GPG. Segue abaixo:

    $ sudo add-apt-repository ppa:matthaeus123/mrw-gimp-svn
    $ sudo apt-get update
    $ sudo apt-get install gimp

    Agradeço ao Rafael e ao Fabricio pela colaboração ;)

    Janela Unificada

    Ao iniciar o GIMP 2.7.1 você vai perceber que ele ainda está com as três janelas flutuantes, além de um bug que faz com que a interface misture o Inglês com o Português.

    Para ativar a interface com janela unificada, basta ir até o menu Window e clicar na opção Single-window mode. Esse novo formato da interface faz com que várias imagens possam ser abertas para edição na mesma janela, sendo divididas em abas.

    Ainda existe um bug que faz com que tenhamos que ativar esse recurso a cada inicialização do GIMP.

    single-windows-mode

    Utilizando o GIMP com uma janela unificada

    Alguns dos novos recursos

    Agrupando camadas

    A nova possibilidade de agrupar camadas em pastas facilitará a tarefa de criar layouts mais complexos sem se perder. Podemos agrupar, mover ou ocultar várias camadas de uma só vez. Alguns recursos ainda precisam ser aprimorados, como a possibilidade de aplicar uma máscara ao grupo de camadas.

    Tageamento de recursos

    O GIMP se tornou ideal para quem trabalha com uma grande quantidade de pincéis, gradientes ou texturas, com a possibilidade de organizar esses recursos através de tags. Dessa forma, o usuário pode filtrar esses recursos através de uma tag específica.

    Salvar ou exportar

    Na nova versão, a opção de salvar arquivos se limita aos formatos nativos do GIMP, como o XCF. Foi adicionado ao menu uma opção para exportar as imagens para outros formatos como JPG ou PNG, o que para mim faz muito mais sentido.

    Pincéis dinâmicos e rotativos

    Agora os usuários poderão incrementar suas pinturas no GIMP aproveitando o suporte a pincéis rotativos, ou a possibilidades de alterar o aspecto de proporcionalidade e inclinação.

    Nova ferramenta de edição de textos

    Ferramenta de texto no GIMP

    Uma nova forma de se trabalhar com textos no GIMP

    Uma das novidades que mais me empolgaram é a possibilidade de trabalhar com textos diretamente na camada, sem que seja necessário edita-lo numa janela separada. Sobre o texto em edição ainda são exibidos atalhos para estilos como negrito e itálico. Porém a nova ferramenta ainda deixa a desejar em alguns aspectos, como a possibilidade de formatar apenas um trecho do texto dentro do bloco.

    1, 2… Testando!

    Todos esses novos recursos citados e outros mais ainda estão sendo testados e aprimorados. O GIMP 2.7.1 ainda é uma versão em desenvolvimento e instável, não recomendada para o trabalho de produção.

    Nos testes que eu realizei, apesar dos pequenos bugs a ferramenta se saiu muito bem, não apresentando problema algum nas edições feitas.

    Fique a vontade para testar e conferir por você mesmo a evolução dessa poderosa ferramenta, e ver que não vai demorar muito para termos uma alternativa livre totalmente a altura de qualquer tarefa de produção e edição de imagens :)

    Referências

    Design de Interfaces em CMS’s

    Design de Interfaces em CMS's

    Devemos ter os CMSs como soluções prontas também em questões de interface?

    Com a crescente demanda de fluxo de informação existente na Web, é imprescindível o uso de ferramentas que facilitem o processo de publicação e compartilhamento de conteúdo. A idéia de uma Web como plataforma colaborativa fez com que novos paradigmas sejam considerados no desenvolvimento dos projetos. Dentre os diferentes sites concorrentes nos diversos segmentos, a escolha do usuário se dará não só pela qualidade do conteúdo ou pela facilidade de uso, mas principalmente por aquele que lhe proporcionar uma melhor experiência.

    Seguindo essa linha de raciocínio, o trabalho de criação e de desenvolvimento de projetos digitais e interativos deve priorizar a experiência do usuário em sua concepção. Isso faz com que, em se tratando do sistema por trás da interface, não tenhamos que “reinventar a roda” a cada novo projeto, e sim trabalharmos com a idéia de sistemas pré-concebidos para a automatização de tarefas. O uso de ferramentas CMS’s proporciona uma maior qualidade aos sites, uma vez que dinamiza o desenvolvimento e permite uma maior atenção no projeto de Interface e na experiência do usuário.

    CMS’s podem limitar o Design de Interface?

    As interfaces devem ser projetadas de acordo com os objetivos do site e com o tipo de experiência que queremos proporcionar ao usuário. Para isso é imprescindível trabalhar-mos a hierarquia visual, para que ela forneça maior consistência nos elementos de navegação e maior facilidade de uso. Porém, devemos proporcionar muito mais que facilidade. Acredito que a estética tenha tanta importância quanto a usabilidade, pois é ela que irá cativar o usuário a consumir o conteúdo e interagir com o nosso produto, tornando a experiência mais agradável e interessante. Dessa forma, é essencial conhecermos bem os recursos que o CMS escolhido possui para possibilitar tais experiências de uso, assim como a flexibilidade de customização visual que a ferramenta fornece para atingirmos de forma integral a estética projetada.

    Acima de tudo, uma boa interface deve ser simples. Toda complexidade que possa existir para que os objetivos do usuário sejam atingidos deve ser possível de ser absorvida pelo sistema. Hoje existem inúmeras opções de CMS’s, algumas com finalidades específicas, outros escaláveis para diversas funcionalidades. É de extrema importância conhecermos bem as opções disponíveis, pois o que poderia limitar o design de uma interface nesse caso seria a escolha equivocada do CMS para o projeto.

    Pensando ainda na experiência do usuário, é essencial que na hora de projetar uma interface sejam definidos mapas mentais representando a forma que o usuário irá interagir com o produto, tanto no momento do lançamento quanto em futuras adequações. Dessa forma, no momento de definição dos fluxos de navegação e wireframes, assim como da criação de uma boa pregnância visual do projeto gráfico, devemos estar atentos tanto no que diz respeito a flexibilidade da interface quanto na escalabilidade do CMS. Na evolução natural que nosso projeto possa vir a ter, desde a inclusão de novos módulos de conteúdo, novas formas de orientação na navegação local e global, menus contextuais de acordo com o perfil do usuário ou outras ferramentas adaptativas, o maior desafio é manter uma sintonia entre as possíveis extensões da interface com a capacidade de implementação de novos portlet’s ou widget’s pelo CMS em uso, de forma que os diferentes objetivos do site sejam sempre facilmente atingidos pelo usuário.

    As interfaces prontas

    Normalmente as opções de CMS’s disponíveis possuem um painel administrativo pronto. Porém não há como projetar qualquer interface sem conhecer claramente as necessidades de quem irá utilizar o sistema, seja o usuário que irá navegar pelo site, ou a equipe que irá administrar o conteúdo. O WordPress, possui um painel administrativo relativamente simples, porém podemos encontrar dificuldades quanto a utilização de plugins que estendem suas funcionalidades, pois normalmente não seguem o mesmo padrão de interface administrativa. No Plone a administração do conteúdo é feita dentro da mesma interface de navegação utilizada pelos usuários, não havendo um painel de administração específico, o que divide opiniões quanto a facilidade ou confusão que isso pode gerar na administração dos conteúdos.

    Mesmo que a comunidade de alguns CMS’s venham demonstrando uma preocupação maior com a usabilidade e a experiência do usuário, como é o caso do Drupal para a sua versão 7, é essencial que haja uma avaliação do painel administrativo para cada projeto em específico, sendo feita um análise baseada em quem fará uso desta interface. Ao escolhermos um CMS para um projeto, devemos estar sempre atentos à flexibilidade que o sistema possui para a adaptação ou criação de um painel administrativo. O Django por exemplo, possui uma app de administração padrão, porém ela é opcional, havendo a possibilidade de a equipe desenvolver sua própria interface de administração.

    Evite equívocos no seu projeto

    Para a escolha adequada de qual ferramenta utilizar, é essencial a leitura das documentações dos principais sistemas disponíveis, assim como a troca de experiências em fóruns e listas de discussão, e a analise de outros sites baseados em gerenciadores de conteúdo. Assim, podemos conhecer melhor os recursos e possibilidades que cada CMS pode oferecer ao nosso projeto.

    Porém é sempre importante termos conciência de que além da escolha do CMS, outros fatores como a produção e gestão dos conteúdos, a arquitetura de informação, e até mesmo a veiculação de publicidade dentro do site, tem impactos diretos na concepção da interface, e vice-versa. A falta de comunicação e entendimento entre as equipes envolvidas em cada etapa do projeto podem acarretar os maiores equívocos dentro dos projetos de interface ;)

    Trechos desse artigo são mencionados na matéria “Design de Interfaces para CMS’s” publicada na edição 77 da Revista Webdesign nesse mês de maio, edição essa focada em Design de Interface. Confiram a revista nas bancas!

    Padrões “GUI”, “Ajax” e Arquitetura da Informação

    Por Ricardo Nogueira Maekawa

    No fim dos anos 1990, quando a internet passou a ser solicitada como mídia e começou a ser implantada no mundo todo de maneira sistemática e intensiva, as interfaces gráficas de usuário já estavam em nível avançado de desenvolvimento. Mac/Os e o Windows já estavam por ai e em edições relativamente avançadas. Afinal, já passara 20 anos desde a criação da interface Xerox PARC, que foi marco para o primeiro sistema operacional dotado de “GUI”. GUI” é abreviação para Graphical User Interface e traduz-se em uma interface que permite a interação humano-computador por meio de ícones e controles associados à texto. Um sistema dotado de GUI permite que um usuário utilize um “dispositivo ponteiro”, como o mouse por exemplo, para manipular esses icones e controles. Antes, o usuário era obrigado a interagir com o computador por meio de linhas de comando.

    20 anos de desenvolvimento é um tempo considerável. A área de desenvolvimento de software já usava e abusava dos “GUI” Design Patterns, onde três padrões tornaram-se capazes de atender a grande maioria das necessidades dos softwares que estavam sendo desenvolvidos. Esses três padrões ficaram conhecidos como “Multi-Document Interface”(MDI), “Single Document Interface” e “Tabbed Document Interface”(TDI).

    • O padrão MDI é um tipo de interface onde múltiplos documentos podem ser abertos dentro de uma única janela. Cada um desses documentos, por sua vez, abrem-se cada qual em uma janela, dentro da janela “pai”. Um exemplo de aplicação que usa um padrão desse tipo é o Adobe Photoshop.
    • O padrão SDI é um método de organização de interface gráfica onde cada documento que é aberto pela aplicação está sempre associado à inicialização de uma nova instancia da aplicação. Um exemplo bastante popular do uso desse tipo de interface é o Internet Explorer 6.0.
    • O padrão TDI é popularmente conhecido como navegação por “Abas”. Esse padrão permite que múltiplos documentos sejam abertos dentro de uma única janela do aplicativo onde é possível navegar entre eles por meio de um sistema de abas. Essa foi uma grande funcionalidade implementada na versão no Internet Explorer 7.0.

    Portanto, dá pra ver com certa facilidade que esses três padrões trabalham de maneira cruzada. Quer dizer, as novas versões de browsers, por exemplo, oferecem a possibilidade de abrir um novo documento em uma aba, ou em uma nova instância do aplicativo. Quer dizer, ele pode funcionar no modo MDI ou no modo SDI. Há também softwares que operam em modo MDI mas são capazes de implementar o padrão TDI dentro de determinadas janelas da composião MDI.
    Mas o que isso tem a ver com o que estamos falando? Isto é, com a Web, com a Arquitetura de Informação e seus termos para descrição de esquemas de navegação?

    Fator “Ajax”

    O que aconteceu no início da Internet até mais ou menos 2004, foi que todos esses conceitos das GUI eram totalmente inaplicáveis ao principal ambiente de interação gráfica da web, os browsers. A inaplicabilidade dos conceitos tinha três razões primordiais. Limitação de banda, o poder de processamento dos pcs e por conseguinte dos navegadores. Então, o ambiente de aplicação desktop lançava o navegador, que por sua vez usava o padrão SDI para lançar uma determinada página web. Mas essa página traduzia-se essencialmente em sistemas de hypertexto ( Ted Nelson – 1960), quase nada mais que conteúdos informacionais inter-relacionados por links. Não que aplicativos baseados na web eram inexistentes. Os webmails, por exemplo, já estavam em cena, mas era como se o desenvolvimento de software estivesse frente à uma estrada de terra esburacada, quase que totalmente diferente de suas vias tradicionais. Não havia perspectiva de mudança a curto prazo, uma vez que mudar não se tratava de uma questão de desenvolvimento de software apenas, mas sim de desenvolvimento de infra-estrutura. Não dava para usar os padrões GUI ali. As forças que regiam aquele ambiente eram totalmente diferentes. Soma-se à isso tudo, o fato da rede estar sendo solicitada como mídia.

    Esse novo contexto demandava novos paradigmas para o desenvolvimento de interfaces digitais em navegadores. Grande parte do esforço demandado estava na criação de esquemas de navegação para grupos de documentos informacionais e também para algumas aplicações simples Portanto, pista livre para o desenvolvimento da Arquitetura da Informação. E a missão dessa disciplina foi basicamente a de decompor as unidades que formavam os padrões para que as peças pudessem ser usadas de maneira independente. Quer dizer, sob certo aspecto, pode-se dizer que um GUI design pattern nada mais é que um agregado de sistemas de navegação, que permitem determinados tipos de navegação -dependendo da ocasião- e que atendem à um determinado caso-de uso .

    Era impensável falar em padrões GUI na web até um cara chamado Jesse James Garret escrever um artigo datado de fevereiro de 2005 chamado “Ajax: a New Approach to Web Aplications“. A partir dessa data, os navegadores passaram a ser encarados como plataformas de lançamento de aplicativos. E isso abriu precedente para a retomada do uso de toda linha de pesquisa dos GUI Design Patterns na web. Essa linha de pesquisa, somada à linha de pesquisa da Arquitetura da Informação são capazes de dar suporte ao desenvolvimento de todo tipo de aplicação na web, em todos os seus níveis.

    Return top