NPDD/Baobáxia/Interfaces

(Diferença entre revisões)
Ir para: navegação, pesquisa
(Estudo para composição do wireframe / layout)
Linha 11: Linha 11:
 
Caminhos de navegação
 
Caminhos de navegação
  
- [PAG] login
+
- [PAG] login
 
   -> esqueci a senha
 
   -> esqueci a senha
  
 
#### BUSCA / CONTEÚDO ####
 
#### BUSCA / CONTEÚDO ####
  
- [PAG] interface de busca
+
- [PAG] interface de busca
 
   -> busca por termos, tipo de arquivo, mucua
 
   -> busca por termos, tipo de arquivo, mucua
 
     -> termo + termo + termo
 
     -> termo + termo + termo
Linha 26: Linha 26:
 
     -> padrão: lista com miniatura
 
     -> padrão: lista com miniatura
  
- [PAG] página do conteúdo
+
- [PAG] página do conteúdo
 
   -> local ou rede
 
   -> local ou rede
 
   -> exibição dos metadados (local|rede)
 
   -> exibição dos metadados (local|rede)
Linha 41: Linha 41:
 
   -> sempre que entra num conteudo em mucua externa, exibir barra de status da mucua local
 
   -> sempre que entra num conteudo em mucua externa, exibir barra de status da mucua local
  
- [PAG] página de edição de conteúdo
+
- [PAG] página de edição de conteúdo
- [PAG] página de upload de conteúdo
+
- [PAG] página de upload de conteúdo
  
 
#### USUÁRIO ####
 
#### USUÁRIO ####
- perfil
+
- perfil
-
+
  
 
#### MUCUA ####
 
#### MUCUA ####
  
- [PAG] tela home da mucua
+
- [PAG] tela home da mucua
 
   -> conteúdo recente local
 
   -> conteúdo recente local
 
   -> conteúdo recente rede (última sincronizacao)
 
   -> conteúdo recente rede (última sincronizacao)
Linha 60: Linha 59:
 
   -> navegação
 
   -> navegação
  
- [PAG] histórico de syncs
+
- [PAG] histórico de syncs
 
+
- [PAG] informações sobre sync específico (hash)
- [PAG] informações sobre sync específico (hash)
+
- [PAG] informações sobre sync pendente
 
+
- [PAG] informações sobre a mucua
- [PAG] informações sobre sync pendente
+
 
+
- [PAG] informações sobre a mucua
+
 
   -> tags da mucua
 
   -> tags da mucua
 
   -> espaço utilizado - atual / previsto / total
 
   -> espaço utilizado - atual / previsto / total
Linha 75: Linha 71:
 
   -> informacoes sobre a mucua, telefone, endereco etc
 
   -> informacoes sobre a mucua, telefone, endereco etc
  
- [PAG] listagem das mucuas
+
- [PAG] listagem das mucuas
 
   -> listar nomes das mucuas
 
   -> listar nomes das mucuas
 
   -> mucuas relacionadas / mucuas vizinhas (definidas pelos usuários)
 
   -> mucuas relacionadas / mucuas vizinhas (definidas pelos usuários)
  
 
+
- [NAV]
 
+
- Navegação entre páginas. exemplos:
- [NAV]
+
- Navegação entre páginas. exemplos:
+
 
   -> busca
 
   -> busca
 
     -> conteúdo
 
     -> conteúdo
 
         -> voltar para resultados da busca
 
         -> voltar para resultados da busca
  
 
+
- [NAV] modo de destaque entre abas atual e rede
- [NAV] modo de destaque entre abas atual e rede
+
 
+
  
 
#### FUNCIONALIDADES ####
 
#### FUNCIONALIDADES ####
  
- [FUNC] interface personalizável
+
- [FUNC] interface personalizável
 
   -> interface diferente por mucua ou por tag
 
   -> interface diferente por mucua ou por tag
 
     -> substituir o template por nome da página.  
 
     -> substituir o template por nome da página.  
Linha 103: Linha 95:
 
- page-tag-radio.tpl
 
- page-tag-radio.tpl
  
- [FUNC] Interface personalizável: gravar filtros como abas
+
- [FUNC] Interface personalizável: gravar filtros como abas
 
   -> abas AND (+) e OR (|)
 
   -> abas AND (+) e OR (|)
 
     -> VIDEO | IMAGEM | ÁUDIO
 
     -> VIDEO | IMAGEM | ÁUDIO
Linha 109: Linha 101:
 
     -> RÁDIO | VINHETA | MÚSICA
 
     -> RÁDIO | VINHETA | MÚSICA
  
- [FUNC] tags funcionais para layout
+
- [FUNC] tags funcionais para layout  
 
+
- [FUNC] conteúdos relacionados: caixa que puxa conteúdo relacionado ao conteúdo atual
- [FUNC] conteúdos relacionados: caixa que puxa conteúdo relacionado ao conteúdo atual
+
 
+
 
+
  
 
== Wireframe ==
 
== Wireframe ==

Edição das 20h06min de 21 de maio de 2014

Conteúdo

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)

Estudo para composição do wireframe / layout

Caminhos de navegação

- [PAG] login
 -> esqueci a senha
        1. 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
- [PAG] página de edição de conteúdo
- [PAG] página de upload de conteúdo
        1. USUÁRIO ####
- perfil
        1. 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
- [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
- [PAG] listagem das mucuas
 -> 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
        1. 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 +:

Telas-local.png


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.

Telas-local-filmes.png

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ã)

Tela-rede.png

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:

Ferramentas pessoais
Espaços nominais
Variantes
Ações
Navegação
Ferramentas
Rede Mocambos