Layout para a página de APIs

[everton137]

Pessoal, temos que adaptar nosso Swagger para ficar parecido com esse daqui http://docs.apis.is/.

@sibigauer podemos ter uma versão para isso? @isisrf vou criar uma tarefa para o conteúdo dessa página.

[aivuk]

Importante marcar essa tarefa como "Iniciar" e Sibi, marque-a como "em progresso" assim que começar o trabalho nela, ok?

Seria legal pensar se faz sentido a separação em quatro partes no design como no site da Islândia, contendo um texto curto introdutório, um texto mais longo aprofundado, depois uma seção possuindo apenas os ícones pras grandes áreas da nossa API, que no caso seriam "Contratos", "Execução" e "Receitas", e finalmente a seção final mais abaixo, que seria uma versão visualmente melhorada do que já possuímos em http://api.gastosabertos.org

[sibigauer]

Link para a versão para revisão

Sugiro uma instância no mesmo box (com slide, flip ou fade, como no layout) ou lightbox na linha abaixo(como as fotos do google, se achar que vale layout para lightbox me avisem) para as infos se elas forem muito grandes para caber no box, não jogar o cursor lá para baixo em uma lista. O site das apis é bonitinho, mas é cheio de redundância na navegação e isso de clicar num ícone que pisca e ser jogado longe não acrescenta muito. A gente não precisa repicar isso.

[sibigauer]

@everton137 , @aivuk , segue exemplos com lightbox carregando no meio e carregando sobre:

https://drive.google.com/file/d/0BwlESUhjI_hibjVNaDhSU2s0RE0/view https://drive.google.com/file/d/0BwlESUhjI_hiQjdzUzNRQ3BJQ0E/view

[everton137]

@sibigauer eu gostaria de uma divisão muito semelhante ao exemplo, só mudando as cores.

1ª parte: Ao abrir a página da API, vai aparer ago grande APIs dos Gastos Públicos, com um texto abaixo 'Nosso objetivo é tornar os dados dos gastos públicos disponíveis para qualquer um interessado'. E logo abaixo um e-mail para contato e um link para o repositório de APIs.

2ª parte: uma estrutura de texto dividida em duas colunas, com fontes e tamanhos muito parecidos com o do site do exemplo.

3ª parte: Como temos apenas 3 APIs, talvez faça sentido termos 3 colunas (3 bloquinhos por linha). Mas pensando se começarem a criar APIs para dados de outras cidades, talvez mais colunas serão necessárias - ficou boa a versão com 4.

4º De fato, jogar lá para baixo não é algo muito bom, apesar do efeito bonito. Eu gostei desse exemplo que você deu.

Só gostaria desses ajustes na 2 primeiras partes (algo bem clean como no site, mas com nossas cores) e uma versão com três colunas.

@isisrf para já irmos pensando no texto da segunda parte na tarefa #113. Me parece que o @aivuk já deu boas dicas, né? Qualquer coisa, dê um ping no grupo do Telegram já com o link pra tarefa aqui!

[sibigauer]

@everton137 , acho válido aproveitarmos o que formos encontrando de bom, mas devemos manter uma consistência.

Se colocarmos uma section full height com teaser no meio do nosso site (na página de API), é possível que nunca vejam o que tem abaixo, que é o conteúdo. Por quê? Porque o resto do nosso site não funciona assim. Um usuário que navegue desde a home pelo menu e chega na API vai ter o primeiro pensamento de que ali só tem uma frase. Então colocaríamos um ícone ou uma seta piscando para ele ver que precisa ir para baixo. Aí teríamos uma página completamente diferente dentro de um site. Um outro site dentro de um site, como se fossem duas coisas distintas que foram misturadas. Porque na página http://docs.apis.is, esse é o site inteiro, o começo, meio e fim da coisa. Não é o nosso caso.

Não é só visualmente e UXmente que não combina. Estruturalmente também. O site deles tem conteúdo full width, e o nosso não. Como as coisas funcionam no deles não é como vão funcionar no nosso, nas 3 primeiras sections. @LuizArmesto

Mudar essa navegação dessa página acho válido se repensarmos o site por inteiro. O sistema de navegação inteiro. Esquecer o menu com todas aquelas páginas. Transformar Faça Parte e ferramentas no grande menu principal e a Home inteira ser nosso menuzão para outras áreas. Usar navegação lateral hide/show como primária, menu principal e não perdido numa página interna, como no exemplo http://pormibarrio.cr. @isisrf @FAngelico @everton137 @aivuk

Não estou dizendo que não vai ficar bonito, e nem que vai ficar ruim. Só que não deve ser feito assim agora, por esses motivos. Ou motivo, o básico, de que é inconsistente com o resto do site.

Vale repensar o site para comportar essas idéias de navegação? Na minha opinião, após a versão de janeiro, sim, por que não? Precisamos ver se o site funciona legal nesse modelo proposto que tem hoje, e algumas coisas vão ser identificadas somente no uso (por exemplo se deve existir um form de contato porque vão perguntar coisas em lista que podem ser perdidas e nunca respondidas). Porque cursos, eventos, outras iniciativas e histórias funcionariam muito melhor no formato daquele outro exemplo que vc deu sobre ideias e projetos, esse aqui: https://hackdash.org . Porque Orçamento (Receitas, no caso) e Contratos funcionariam melhor com tour feature (aquela "ajuda" em foco que vai ensinando o usuário a usar a página) e é importante que haja correlações entre as ferramentas e os processos que envolvem a grana.

Vale colocar hoje assim e depois pensar no resto do site? Sim, se isso for em seguida. Não, se for ficar destoando do site por muito tempo.

Vale descartar a proposta e deixar tudo como está? Não, porque algumas coisas que definimos não sabemos se vai funcionar, e trabalhamos com o que tínhamos. Mudanças vão ser necessárias no futuro e idéias como hackdash, pormibarrio e apis.is são boas demais para serem postas de lado, e outras melhores também vão surgir. Talvez criadas por nós mesmos.

Vou fazer o layout para vc ver como fica com nossa identidade, mas não acho que deva ser usado neste momento.

[FAngelico]

Pessoal (principalmente @sibigauer), alguma novidade nessa issue, aqui? Se não houve outras discussoes, sugiro buscarmos um meio-termo. Entendo perfeitamente e convordo com a argumentaçao da @sibigauer de que é preciso manter a coerência com o resto do site. Mas talvez o site da Islandia possa nos inspirar em algo. Como avançamos aqui?

[everton137]

Passando o link aqui o que a @sibigauer fez bastante parecido com o exemplo sugerido: http://sibigauer.com/apichupinhada/

[FAngelico]

Eu achei muito bom! Quem está "assigned" para fazer a revisão?

[everton137]

@FAngelico eu estava batendo o martelo nas definições de layout, mas melhor deixar com o @aivuk ou você. Alinha com ele? Eu também achei muito bom, mas acho que tem que fazer uma modificaçãozinha para não virar plágio. Exceto se a licença dos caras de lá permitir isso.

[sibigauer]

@everton137 e @FAngelico , é plágio. E não está parecido, está copiado. Copiei o deles, copiei nosso header, e juntei os dois numa quimera para fortalecer o ponto de que é uma quimera. Vc quer aproveitar o site dos caras porque gostou e quer copiar e fazer um remendo no ga ou eles realmente deram uma solução para um problema semelhante ao nosso que deveríamos usar? Pra quê ID então? @isisrf , help!

[aivuk]

@everton137 @FAngelico Everton, concordo com o que a Sibi disse acima e que aparentemente você não leu. Copia por copiar por que você achou bonito é um problema. As versões que ela passou em:

https://drive.google.com/file/d/0BwlESUhjI_hibjVNaDhSU2s0RE0/view https://drive.google.com/file/d/0BwlESUhjI_hiQjdzUzNRQ3BJQ0E/view

Estão ótimas e segue o modelo anterior do site da Islândia. Acho melhor seguirmos nessa linha ao invés de cegamente simplesmente copiar e colar o outro site.

[aivuk]

@sibigauer

https://drive.google.com/file/d/0BwlESUhjI_hibjVNaDhSU2s0RE0/view

Vamos seguir essa, com olLightbox no meio, que atualmente será abaixo já que teremos apenas 3 blocos. Só não me parece fazer sentido o gráfico do TCM nesta página.

E podemos experimentar a transição como na página da Islândia, com as seções que você fez, a verde no topo, depois a que possui um texto seguido do gráfico ao lado e finalmente os endpoints abaixo.

[sibigauer]

Falamos no telegram e esqueci de adicionar aqui, mas o gráfico da segunda seção cai, não cai? Temos um espaço a mais para aproveitar com texto ou links. Ou toogle para um saiba mais detalhado, como a @isisrf sugeriu. @aivuk , no mouse over nas caixinhas dos endpoints, podemos em vez de aumentar o ícone, incluir nome/desc delas? Digamos que faremos outro endpoint de contratos, pra 2015. Ou para outro município. Os dois vão ter o mesmo ícone, precisamos diferenciar. Segue aquele exemplo de over que acho bacana: http://demos.artbees.net/jupiter/shortcodes/animated-columns/

[sibigauer]

@aivuk @LuizArmesto , precisam de assets específicos ou css para este desenvolvimento?

[LuizArmesto]

@sibigauer consegue exportar o computador com a seta e etc do B2?

[sibigauer]

@LuizArmesto , está na Assets da VBETA