Edição das 10h44min de 4 de junho de 2014

Interfaces para o Baobáxia

Considerando que o Baobáxia compõe-se de distintos níveis estruturais de aplicação, do mais estrutural ao mais aparente, temos:

• Base: estrutura de arquivos nos servidores locais, servidor de sincronização (git annex + sistema de arquivos), (arquivos propriamente ditos e metadados)
• Intermediário: aplicativo de servidor para gerenciar o upload, organização e preenchimento de metadados, requisição de conteúdos de outros repositórios etc (django + [banco de dados]; possivelmente outros sistemas, no futuro)
• Superior/interface: visualização/ções construídas em cima da aplicação intermediária, destinadas a prover a visualização (html, jquery etc)

Telas novas da Nara (fim de maio/2014)

https://github.com/RedeMocambos/baobaxia/raw/d8f81815b442cffadf16583839e662a11112343b/doc/layout/telas/pgCONTEUDO.png?raw=true

https://github.com/RedeMocambos/baobaxia/raw/d8f81815b442cffadf16583839e662a11112343b/doc/layout/telas/pgMUCUA.png?raw=true

https://github.com/RedeMocambos/baobaxia/raw/d8f81815b442cffadf16583839e662a11112343b/doc/layout/telas/pgREDE.png?raw=true

https://github.com/RedeMocambos/baobaxia/raw/d8f81815b442cffadf16583839e662a11112343b/doc/layout/telas/pgREDEbusca.png?raw=true

Estudo para composição do wireframe / layout

Caminhos de navegação

- [PAG] login
 -> esqueci a senha
    [lista repositórios]
    [lista mucuas]

BUSCA / CONTEÚDO

- [PAG] interface de busca
 -> busca por termos, tipo de arquivo, mucua
    -> termo + termo + termo
    -> limpar termo (quando vc passa o mouse em cima, mostra botao de [x] fechar)
 -> grid / lista -> diferentes exibicoes
    -> grid: imagens em quadrados
    -> lista (texto|miniatura): lista com colunas ordenáveis
       -> permite solicitação de conteúdo
    -> padrão: lista com miniatura

- [PAG] página do conteúdo
 -> local ou rede
 -> exibição dos metadados (local|rede)
 -> exibição do conteúdo (local)
 -> exibição de preview/thumb (local|rede)
 -> caixa de solicitação (rede)
 -> marcador caso conteúdo já tenha sido solicitado
   -> conteúdos relacionados (rede)
 -> listar quem tem o arquivo / rastro
 -> bloco lateral com informações sobre a mucua em uso
    -> avatar/foto da mucua
    -> nome da mucua
    -> + info
 -> sempre que łøentra num conteudo em mucua externa, exibir barra de status da mucua local
    [dados usuário]
    [dados mucua]
    [nuvem mucua]
    [dados conteúdo]
      [proriedades]
      [quem tem o arquivo]
    [local|remoto|solicitado]
    [artigos relacionados]
    [recursos da mucua / interação]

- [PAG] página de edição de conteúdo
- [PAG] página de upload de conteúdo

USUÁRIO

- perfil
    [dados usuário]
    [lista conteúdos usuário]
    [dados mucua]
    [recursos da mucua / interação]

REDE

    [dados usuário]
    [dados mucua]
    [nuvem rede ]
    [recursos da mucua / interação]
    [listar nomes das mucuas]
    [novidades na rede]
    [filtragem]

MUCUA

- [PAG] tela home da mucua
 -> conteúdo recente local
 -> conteúdo recente rede (última sincronizacao)
 -> conteúdos destacados
 -> data da última sincronizacao
 -> informações sobre a mucua
 -> nuvem de tags da mucua
 -> busca
 -> navegação
    [dados usuário]
    [lista conteúdos usuário]
    [dados mucua]
    [destaques mucua]
    [novidades mucua]
    [novidades rede]
    [recursos da mucua]
    [filtros]       

- [PAG] histórico de syncs
- [PAG] informações sobre sync específico (hash)
- [PAG] informações sobre sync pendente
- [PAG] informações sobre a mucua
 -> tags da mucua
 -> espaço utilizado - atual / previsto / total
 -> conteúdo requisitado / aguardando sincronização
 -> estatística - por tipo de conteúdo etc
 -> navegação
 -> [se não for mucuaLocal] definir como mucua vizinha [FUNC]
 -> informacoes sobre a mucua, telefone, endereco etc
    [dados usuário]
    [lista conteúdos usuário]
    [dados mucua]
    [git annex info]

- [PAG] listagem das mucuas (incluída na home da rede)
 -> listar nomes das mucuas
 -> mucuas relacionadas / mucuas vizinhas (definidas pelos usuários)

- [NAV]
- Navegação entre páginas. exemplos:
 -> busca
    -> conteúdo
       -> voltar para resultados da busca

- [NAV] modo de destaque entre abas atual e rede

FUNCIONALIDADES

- [FUNC] interface personalizável
 -> interface diferente por mucua ou por tag
    -> substituir o template por nome da página. 
    -> tipo: formato etc
    -> tag: [tags]
    Ex:
       - page-tipo-jpg.tpl

- page-home.tpl - page-tag-radio.tpl

- [FUNC] Interface personalizável: gravar filtros como abas
 -> abas AND (+) e OR (|)
    -> VIDEO | IMAGEM | ÁUDIO
    -> VÍDEO + DOCUMENTÁRIO 
    -> RÁDIO | VINHETA | MÚSICA

- [FUNC] tags funcionais para layout 
- [FUNC] conteúdos relacionados: caixa que puxa conteúdo relacionado ao conteúdo atual

Wireframe

c

Proposta inicial de interface de visualização

Um protótipo de visualização, baseada exclusivamente nas tags, prevê que estas sejam usadas para filtrar cada tipo de conteúdo, cumulativamente. A visualização poderia ser definida de acordo com os usos / tags de cada servidor local, e permitiria na mesma ferramenta o acesso aos conteúdos remotos, que poderiam por esta mesma ser solicitados. Para que o sistema mantenha-se dentro das suas capacidades de armazenamento, a indicação do espaço em disco utilizado e previsão de uso será apresentada diretamente na interface de visualização do conteúdo externo.

São apenas rascunhos de interfaces, pensadas para serem criadas como filtragens a partir da tag (presente no metadado), tanto de forma fixa (como visualização padrão) como por busca. (são apenas para fins ilustrativos das funcionalidades)

Na primeira, há apenas a distinção de ambientes (local ou rede). Como está no local, exibe todo o conteúdo, sem mais filtragens. Note que é possível adicionar filtragens no campo +:

No caso abaixo, há uma listagem filtrada pela tag 'história', cujos resultados estão organizados por tipos (igualmente tags) para ser exibidos em determinado contexto local, como 'vídeos', 'música', 'programas de rádio'. Novamente, é possível adicionar filtragens.

Note que não necessariamente os conteúdos tem que ser filtrados por essas etiquetas; é possível adicionar etiqueta do assunto e na sub-janela do tipo de conteúdo.

Abaixo, trata-se duma tela de consulta dos arquivos da rede como um todo. Para uma busca, são exibidos os resultados bem como a localização das cópias. Note que é possível também adicionar a filtragem dos resultados de acordo com os servidores da rede (ex: vou viajar para Casa Tainã, logo filtrar somente pelos arquivos da Casa Tainã)

Interface textual/terminal

Baobáxia

* Usuário:
* Senha:

> Publicar um conteúdo
> Alterar/remover um conteúdo
> Sincronizar pela internet
> Sincronizar por media
> Configuração

Publicar um conteúdo

* Escolher arquivo (caminho/path)
* Etiquetas [local, publico, urgente (max. 30 MB)]
* Comentário de publicação

(linha curl para publicar um conteúdo)
 # $ curl -F "name=teste123" -F "tags=entrevista" -F "note=" -F "license=" -F "date=2013/06/07" -F "type=imagem" -F "mediafile=@img_0001.jpg" -X POST http://localhost:8000/redemocambos/dandara/media/ > /tmp/x.html

Alterar/remover um conteúdo

* Escolher arquivo (caminho/path)
* Etiquetas [local, publico, urgente (max. 30 MB)]
* Comentário de publicação
* Remover localmente [ ]
* Marcar para remover definitivamente [ ]

Sincronizar pela internet

* Iniciar a sincronização pelo: padrão ou [lista dos remotes]
* Status da sincronização 

Sincronizar por media

* Iniciar a sincronização pelo: padrão ou [lista dos remotes]
* Status da sincronização 

Configuração

* Nome da Mucua: 
* Inicializar o Baobáxia

Proposta da Silia Moan

Baobáxia: Confluências entre Redes Quilombolas e Software Livre

Monografia desenvolvida no Istituto Europeo di Design (IED): Arquivo:Monografia SILIA 11 dezembro.pdf

Algumas telas da proposta de interface:

• 

  Instalação

• 

  Entrar

• 

  Selecionar pastas

• 

  Entrar 2

• 

  Compartilhar/etiquetar