Edição das 13h43min de 5 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=truelistagem

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

mapeamento de funcionalidades / interface

04/06/2014 - 05/06/2014

(legenda)

-> funcionalidadeAcessada()     # o que ela retorna
<--> #link_para_outra_pagina    # comentário sobre o link
=> ação / form POST
[* include]

Comum a todos

-> checkAuth()

autenticação / usuário

LOGIN

-> getRepositories()            # retorna lista de repositórios
-> getDefaultRepository()       # retorna repositório padrão da mucua
-> getMucuas()                  # retorna lista de mucuas
-> getMyMucua()                 # retorna minha mucua / mucua atual
<--> #esqueci_a_senha
<--> #registrar
=> autenticação

REGISTRAR

-> getRepositories()            # retorna lista de repositórios
-> getDefaultRepository()       # retorna repositório padrão da mucua
-> getMucuas()                  # retorna lista de mucuas
-> getMyMucua()                 # retorna minha mucua / mucua atual
=> registrar_usuário

LOGOUT

-> doLogout()                   # faz o logout

ESQUECI A SENHA

=> verifica_usuario/envia_senha

PÁGINA DO MOCAMBOLA / PROFILE

-> getDefaultRepository()       # retorna repositório padrão da mucua
-> getMyMucua()                 # retorna minha mucua / mucua atual
-> mocambola.getFullData()      # retorna objeto com todos os dados do mocambola
-> media.getContentByMocambola(mocambola) # retorna lista de conteúdos do mocambola
-> mucua.getData()              # retorna lista de dados gerais da mucua
-> mucua.getResources()         # retorna infos sobre os recursos da mucua
-> medua.getTagCloudByMocambola(mocambola)  # retorna nuvem de tag do mocambola
<--> acessar conteúdo           # listagem
=> media.filter()               # 
[* cabeçalho]

Mucua

HOME MUCUA

-> getDefaultRepository()       # retorna repositório padrão da mucua
-> getMyMucua()                 # retorna minha mucua / mucua atual
-> mocambola.getBaseData()      # retorna dados básicos do mocambola (nome, username, avatar)
-> media.getContentByMucua(mucua) # retorna lista de conteúdos da mucua
-> mucua.getData()              # retorna lista de dados gerais da mucua
-> mucua.getResources()         # retorna infos sobre os recursos da mucua
-> media.getTagCloudByMucua(mucua)  # retorna nuvem de tag da mucua
-> media.getDestaquesMucua(mucua) # retorna lista de destaques por mucua
-> media.getNovidadesMucua(mucua) # retorna lista de novidades por mucua
-> media.getNovidadesRede() # retorna lista de novidades da rede
-> media.checkFunctionalTag     # verifica por tags funcionais
<--> acessar conteúdo           # listagem
<--> mais info sobre mucua      # dados sobre a mucua
=> media.filter()               # 
[* cabeçalho]

EDIÇÃO MUCUA

-> getDefaultRepository()       # retorna repositório padrão da mucua
-> getMyMucua()                 # retorna minha mucua / mucua atual
-> mocambola.getBaseData()      # retorna dados básicos do mocambola (nome, username, avatar)
-> media.getContentByMucua(mucua) # retorna lista de conteúdos da mucua
-> mucua.getData()              # retorna lista de dados gerais da mucua
=> mucua.setDestaques()         # define destaques da mucua ---> definir por filtragem destacada 
=> mucua.setGlobalDestaques()   # define destaques globais

INFOS MUCUA

LISTA DE REQUISIÇÕES

-> getDefaultRepository()       # retorna repositório padrão da mucua
-> getMyMucua()                 # retorna minha mucua / mucua atual
-> mocambola.getBaseData()      # retorna dados básicos do mocambola (nome, username, avatar)
-> mucua.getMediaRequests()     # retorna lista de media solicitada
[* cabeçalho]

Rede

HOME REDE

-> getDefaultRepository()       # retorna repositório padrão da mucua
-> getMyMucua()                 # retorna minha mucua / mucua atual
-> mocambola.getBaseData()      # retorna dados básicos do mocambola (nome, username, avatar)
-> media.getNetworkContent()    # retorna lista de conteúdos da rede
-> repository.getData()         # retorna lista de dados gerais da rede
-> mucua.getResources()         # retorna infos sobre os recursos da mucua
-> medua.getTagCloudNetwork()   # retorna nuvem de tag da rede
-> media.getDestaquesRede()     # retorna lista de destaques da rede
-> media.getNovidadesRede()     # retorna lista de novidades da rede
-> media.parseSearchFilter      # retorna filtro aplicado atualmente
-> media.checkFunctionalTag     # verifica por tags funcionais
-> repository.getMucuas()       # retorna lista de mucuas do repositório
<--> acessar conteúdo           # listagem
<--> mais info sobre mucua      # dados sobre a mucua
=> media.filter()               # 
[* cabeçalho]

INFOS REDE

-> repository.getInfo()         # puxa dados gerais sobre o repositório/rede
-> repository.getResources()    # puxa uso de recursos do repositório
[* cabeçalho]

Conteúdo

LISTAGEM/BUSCA / LISTA FILTRADA

-> getDefaultRepository()       # retorna repositório padrão da mucua
-> getMyMucua()                 # retorna minha mucua / mucua atual
-> mocambola.getBaseData()      # retorna dados básicos do mocambola (nome, username, avatar)
-> media.getSearch(filter)      # retorna busca de acordo com filtros
-> media.parseSearchFilter()    # retorna filtro aplicado atualmente
-> media.checkFunctionalTag     # verifica por tags funcionais
<--> acessar conteúdo           # listagem
<--> mais info sobre mucua      # dados sobre a mucua
=> media.filter()               # 
=> alternar visao (listagem)   #
=> alternar visao (grid)   #

[* cabeçalho]

PÁGINA DO CONTEÚDO

-> getDefaultRepository()       # retorna repositório padrão da mucua
-> getMyMucua()                 # retorna minha mucua / mucua atual
-> mocambola.getBaseData()      # retorna dados básicos do mocambola (nome, username, avatar)
-> media.getData(hash)          # retorna dados da media requisitada
-> media.parseSearchFilter()    # retorna filtro aplicado atualmente
-> mucua.getData()              # retorna lista de dados gerais da mucua
-> mucua.getResources()         # retorna infos sobre os recursos da mucua
-> media.getTagCloudByMucua(mucua)  # retorna nuvem de tag da mucua
-> media.getWhoHasContent()     # retorna mucuas que tem o conteúdo
-> media.getRelatedContent()    # retorna conteúdo relacionado ao media
-> media.checkFunctionalTag     # verifica por tags funcionais
 <--> mais info sobre mucua     # dados sobre a mucua
=> [???].solicitContent()       # solicita conteúdo (mucua? media?)
=> editar o conteúdo
[* cabeçalho]

EDIÇÃO DO CONTEÚDO

-> getDefaultRepository()       # retorna repositório padrão da mucua
-> getMyMucua()                 # retorna minha mucua / mucua atual
-> mocambola.getBaseData()      # retorna dados básicos do mocambola (nome, username, avatar)
-> media.getData(hash)          # retorna dados da media requisitada
-> media.parseSearchFilter()    # retorna filtro aplicado atualmente
-> mucua.getData()              # retorna lista de dados gerais da mucua
=> media.update()               # atualiza dados
[* cabeçalho]

Cabeçalho

-> [???].getPlace()                   # retorna local atual
<--> filtragem mucua
<--> filtragem rede

Filtragem

-> filter.addTag()
-> filter.removeTag()
-> filter.parse()
-> filter.showNumResults()
=> media.filter()

Estudo de funcionalidades

21/05/2014

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