• 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 ‘arquitetura de informação’

    Oficina de Design para Web no CCJ

    “Design refere-se ao projeto visual e funcional de um produto, focando as necessidade dos seus usuários, cativando o seu uso através da estética, aplicando conceitos e usabilidade[bb] à sua forma. Para se trabalhar com Web Design, é necessário diversos conhecimentos conceituais e estratégicos, para que possamos transformar toda a informação publicada em uma comunicação direcionada ao público-alvo, conhecimentos que vão muito além da simples manipulação de um software”.

    Oficina ministrada por mim, oferecida pelo Centro Cultural da Juventude Ruth Cardoso (CCJ) de Design para Web: Projeto, GIMP e INKSCAPE. A Oficina de Design para Web tem como objetivo criar novo Layout para o blog do CCJ. Um núcleo será selecionado pelo Designer Agni que tem proposta de produção coletiva que será assianada pelos participantes.

    Inscrições

    Centro Cultural da Juventude

    Av.Deputado Emílio Carlos, 3641 (ao lado do terminal Cachoeirinha)
    Vila Nova Cachoeirinha – Zona Norte – São Paulo, SP

    +55 11 3984-2466

    Haverá entrevista para selecionar o grupo de trabalho.

    Cronograma das 16 aulas:

    1. Habilidades Online: Conhecendo o Ambiente Virtual[bb]
    2. Introdução ao Web Design: Etapas do Desenvolvimento de um Projeto
    3. Alfabetização Visual: Função das Letras, Cores e Formas
    4. Colhendo as informações: Os objetivos de um site e elaboração de um Briefing
    5. Arquitetura de Informação
    6. Interface Web: Interatividade, Usabilidade e Navegabilidade
    7. HTML e CSS: Conhecendo a estrutura da Web
    8. HTML e CSS: Criando um mini-projeto
    9. Conhecendo as Ferramentas de Desenvolvimento Web
    10. Introdução ao Gimp: Conceitos de Edição de Imagens
    11. Gimp: Tratamento e Montagem de imagens
    12. Introdução ao Inkscape: Conceitos de Desenho Vetorial
    13. Inkscape: Criando ilustrações, Logotipos e Layouts
    14. Projeto de criação de um Layout – parte 1
    15. Projeto de criação de um Layout – parte 2
    16. Publicando conteúdo na Web: Registro de Domínio, Hospedagem, Gerenciamento, Manutenção e Divulgação

    Horário das oficinas:
    Terças e Quintas. Início de 07 de abril até 28 de maio.

    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.

    Palestra “Conceitos de Design”

    Palestra ministrada nos dias 10/11 (Microcamp, São Bernardo) e 30/11 (Microcamp, Santo André) para o Workshop “Processo de Criação”, voltado principalmente para os alunos do curso de Web Design Developer.

    O conteúdo da palestra foi baseado no artigo “Conceitos de Design: Função, letras, cores e formas”

    Slides da Palestra

    Ver mais Slides de Eduardo Santos no SlideShare.

    Return top