Preparando um Poster

Se você precisa apresentar seu trabalho científico em formato de poster, eu espero que esse conselhos lhe sejam úteis.

Requisitos: procure saber antes de qualquer coisa os parâmetros que o seu poster deverá obrigatoriamente seguir: como tamanho e identidade visual (no caso do evento disponibilizar um template). Isso pode definir que IDE você irá usar, já que alguns templates podem vir em formato LaTex ou PowerPoint. Se você precisar criar o poster do zero você ainda pode usar o PowerPoint ou mesmo alguma ferramenta de edição de imagens (nesse caso dê preferência a formatos vetoriais).

Rascunho: Liste as informações que você gostaria de colocar no poster. Destaque conteúdos que sejam fundamentais para que a audiência possa compreender seu trabalho: motivação, métodos, resultados... Depois disso, imagine como essas informações deverão estar distribuídas na página considerando o fluxo que você espera que o leitor siga. A ordem das informações também contribui para a boa compreensão do trabalho.

Texto e Imagens: Não escreva textos grandes, não copie parágrafos do artigo. Apresente o conteúdo em tópicos. Isso facilita a rápida compreensão dos pontos mais importantes do trabalho apresentado. Sumarize informações importantes usando títulos mais expressivos. O mesmo com imagens. Selecione imagens que sumarizem tópicos do trabalho apresentado. Imagens icônicas ajudam a atrair a atenção dos ouvintes. Elas também permitem que a audiência retenha melhor a informação, se lembre e referencie seu trabalho com mais facilidade posteriormente.

Fontes e Cores: O tipo, tamanho e cor das fontes influenciam grandemente a estética do poster, a hierarquia das informações e o contraste entre conteúdo e background. Diferentes tamanhos de fonte permite que os usuários compreendam melhor o fluxo das informações. Use as cores a seu favor. Elas devem ajudar a reforçar contraste entre background e conteúdo, favorecer a estética e destacar conteúdos importantes. Não exagere.

Grid: Confere ordem e equilíbrio ao poster. Não subestime o valor de espaços em branco. Eles ajudam o layout a respirar. Respeitar dimensões e margens confere organização ao poster e um aspecto mais profissional.

Impressão: Cuidado com a resolução da imagem e com o material. Depois de tanto cuidado na edição, não deixe que a gráfica coloque tudo por água abaixo. Verifique outros trabalhos impressos na mesma gráfica para antever como ficará o seu. Não imprima várias folhas A4 até compor seu poster. Isso reflete descuido.

Material adicional: Agora que você se certificou de fazer um poster com qualidade para atrair a atenção da sua audiência e ajuda-la a compreender mais facilmente os seus resultados, faça com que a audiência leve consigo alguma informação que a ajude a encontrar seu trabalho no futuro. Entregar um cartão pessoal, flyers ou folders, e colocar um QrCode no poster que sirva como link para a webpage da sua aplicação, do seu projeto ou para a sua pagina pessoal são algumas das possibilidades.

Por fim, há bastante espaço para a criatividade quando a questão é divulgar seu trabalho e fazer com que as pessoas se interessem por ele. Afinal de contas, nem só de publicação vive o pesquisador. Seu trabalho precisa ser conhecido e referenciado por outros também.

Logo, você pode produzir um material interativo, bonito e atraente, mas deve se certificar que haja equilíbrio entre o criativo e o funcional. Não apresente uma demo a menos que funcione de modo apropriado. Não encha o poster de imagens e cores que não contribuam para a boa compreensão do material.

A apresentação do poster te oferece a oportunidade de ter um bate-papo mais informal e sem restrições de tempo. Isso te permite fazer contatos mais facilmente. Então não deixe as oportunidades escaparem. Se alguém passar timidamente olhando para o seu trabalho o convide para se aproximar. Se você estiver no meio de uma explicação, você pode lhe entregar um panfleto enquanto continua a falar. Se tiver oportunidade, pergunte sobre seu trabalho também, pegue seu cartão. Você pode acabar aprendendo algo, recebendo um feedback útil sobre seu trabalho, fazendo amizade ou conhecendo um futuro colaborador.

Exemplos de posters e flyers:
http://www.inf.ufrgs.br/~vajoliveira/portfolio-pposters.html

Se precisar de mais dicas:
http://academiamedica.com.br/como-fazer-um-poster-cientifico/
https://marcoarmello.wordpress.com/2012/03/13/poster/

eScanner

Em dezembro de 2011 eu comecei a desenvolver uma ferramenta de validação de acessibilidade usando como base o parser adaptado por Resig (Pure Javascript HTML Parser). Esse validador automático foi construído como uma extensão para o navegador Google Chrome e fornece uma análise da página aberta de acordo às normas do Modelo de Acessibilidade de Governo Eletrônico (e-MAG 3.0).


Essa ferramenta é destinada a todos aqueles que produzem conteúdo para a Web, visto que o e-MAG deve ser obrigatoriamente observado no desenvolvimento de sítios do Governo Brasileiro, financiados pelo Governo ou de interesse público (Decreto 5296; Portaria nº 3, de 7 de Maio de 2007). Apesar de não possuir a oficialidade de ferramentas como o ASES e o daSilva essa extensão pode ser utilizada para uma varredura rápida do código com o intuito de identificar os principais problemas que afetam a acessibildiade da página. Essa característica me levou a batizar a ferramenta como eScanner (Electronic Scanner), fazendo menção à varredura feita pelo validador e ao Departamento de Governo Eletrônico, responsável pelo desenvolvimento e aplicação do e-MAG.


O eScanner está disponível na Web Chrome Store para download gratuito. A ferramenta apresenta a descrição dos erros e alertas encontrados na página, suas ocorrências, a visualização do código-fonte, informações sobre o Departamento de Governo Eletrônico, o e-MAG, tutoriais e uma área de ajuda. Algumas melhorias já têm sido planejadas e aplicadas para próximas versões da extensão. Pretende-se também criar uma versão para o navegador Firefox.

Nem só de cliente-side vive um site

Esse artigo foi postado por Diego Eis no site da iniciativa Tableless. Eu simplesmente copiei seu artigo original que pode ser encontrado no endereço: http://tableless.com.br/nem-so-de-client-side-vive-um-site/

Estou feliz porque o mercado de client-side tem amadurecido de forma inteligente no Brasil. Empresas mais espertas entenderam a importância do código HTML/CSS/ JavaScript bem escrito. O problema é que grande parte das empresas, clientes e desenvolvedores acham que o trio HTML/CSS/JavaScript faz milagres. É certo pensar que um código bem escrito traz grandes vantagens para o projeto, mas ele sozinho não faz milages.
É errado pensar que apenas por que você escreveu código HTML semântico seu site aparecerá em primeiro no Google ou ficará mais acessível para deficientes visuais. O código client-side é apenas a porta de entrada para uma série de outras tarefas.

SEO

Para criar um projeto de SEO é preciso seguir uma série de etapas que formam um grande pacote e que só então é possível perceber as vantagens do trabalho do SEO.
O código client-side entrará como uma pequena parte do esforço. De forma bem simples, podemos listar alguns pontos importantes que precisamos tomar atenção além do HTML bem feito:

• Estudo de concorrentes;
• Definição de diagramação e quantidade de texto nas diversas partes do site;
• Estudo de palavras chave e termos de uso;
• Planejamento de landing pages, entradas e saídas;
• Criação de robot.txt e sitemap.xml;
• Monitoramento de palavras, visitação e buscadores;
• Estudo de funil e preparação de goals;

Eu não sou um especialista do Google nem nada do gênero, mas sei que estes tópicos são importantes ao manter ou criar um website otimizado. O HTML certamente faz parte destes tópicos, mas ele não invalida nenhum dos outros pontos.
Obviamente não adianta nada fazer um bom estudo de palavraschave e marcá-las de forma errada com HTML.

Acessibilidade

Como em projetos de SEO, o planejamento de Acessibilidade precisa de uma série de etapas funcionar corretamente. No caso da acessibilidade o HTML ocupa um grau de importância muito grande, contudo, há pequenos pontos que o HTML não pode resolver sozinho. Veja alguns exemplos:

• Contraste e cores do layout;
• Estudo de atalhos de teclado;
• Menu de navegação rápida;
• Textos em tooltips, titles, alts de imagens etc;
• Tamanho de botões e textos;
• Arquitetura de Informação sensata e simples;

Embora algumas das tarefas sejam resolvidas com HTML/CSS, as definições e metas são pensadas pelos desenvolvedores. Qual cor, tamanho de botões e etc são decididos pelo designer e não pelo HTML. Não é incomum acharmos que apenas porque o site tem um código bem estruturado e semântico ele será bem acessado por cegos com leitores de tela ou pessoas com outro tipo de necessidade. Há tópicos que se dependem meramente do bom senso.
Se analisarmos bem as disciplinas de Acessibilidade, Usabilidade e Arquitetura de Informação, perceberemos que elas comandam a forma com que o trio HTML/CSS/Javascript devem se comportar. Há várias etapas e decisões que tomamos antes de colocarmos a mão no código. Cada um tem sua importância. Muitos erros de HTML podem ser evitados com um planejamento de Arquitetura de Informação. Muito código CSS pode ser otimizado estudando os wireframes do projeto.
Lembre-se de que o HTML/CSS/Javascript serve o conteúdo e não contrário. Eles devem trabalhar para que a informação seja bem exibida, formatada e que chegue integralmente para o usuário.

True Story

Efeito de brilho com jQuery

A intenção é criar um efeito semelhante ao das abas do Chrome ou da barra de ferramentas do Windows 7, no qual um brilho se move sobre o botão acompanhando o cursor. Seguindo esse tutorial, nosso resultado será esse:

Vamos lá. O primeiro passo é baixar a biblioteca jQuery e ligá-la ao documento HTML. Se você não sabe como fazer eu já postei aqui no blog (Utilizando o jQuery). No nosso arquivo HTML nós teremos dois elementos div para cada botão, um para o botão em si (a depender da implementação pode ser um item de uma lista) e outro para o brilho. Vamos fazer três botões, então nosso código HTML ficará assim:

<html>

    <head>

        <script type="text/javascript" src="jquery.min.js"></script>

    </head>

    <body>

        <div class="botao twitter"><div class="brilho"></div></div>

        <div class="botao orkut"><div class="brilho"></div></div>

        <div class="botao facebook"><div class="brilho"></div></div>

    </body>

</html>

Agora o CSS. Você pode baixar as imagens aki: link. 

Para o elemento com a classe 'botão': definimos altura e largura, deixamos os elementos flutuando à esquerda (dessa forma o menu aparecerá como se estivesse inline), espaçamento de 10px à esquerda, overflow: hidden para esconder a parte do brilho que exceder o espaço do botão e borda arredondada na div para que a sombra fique da mesma forma e se adeque às imagens utilizadas.

(Atenção: certifique-se de ajeitar a sombra e as bordas porque são especificas do CSS3 e portanto sensíveis à inconsistências de renderização. Para esse exemplo usei o Chrome e não me preocupei com outros navegadores). 

Para o elemento com a classe 'brilho': definimos apenas altura e largura. Além disso, definimos o background de cada item. Nosso CSS ficará assim:

.botao{

    width:48px;

    height:48px;

    float:left;

    padding:0;

    margin-left:10px;

    overflow:hidden;

    border-radius: 8px;  

    box-shadow:3px 3px 5px #ddd;

}

.brilho{

    width:55px; 

    height:55px;

}

.twitter{

    background:url(images/twitter.png);

}

.orkut{

    background:url(images/orkut.png);

}

.facebook{

    background:url(images/facebook.png);

}

Por fim, o JavaScript utilizando jQuery. É nesse momento que adicionaremos a imagem do brilho ao elemento de classe 'brilho', para que não seja obstrutivo. Ou seja, caso o JavaScript não funcione não haverá o efeito, mas o menu continuará usável. Quando o mouse se mover sobre o botão o brilho aparecerá com uma margem à esquerda equivalente à distância do cursor subtraída da distância do botão, ambas a partir da borda esquerda do navegador. Para colocar a imagem exatamente no centro do cursor basta subtrair o valor anterior da metade do tamanho da imagem usada como brilho. Definimos a margem superior num processo semelhante. Ocultamos a imagem do brilho através do JavaScript e permitimos que ela apareça apenas quando o cursor estiver sobre o botão e torne a desaparecer caso contrário. Desse forma nosso código ficará assim:

$(document).ready(function() {

    var half = 27; // Metade do tamanho da imagem

    var pos; // Posição do botão

    $(".brilho").css("background","url(images/light.png)").hide();

    $(".botao").mousemove(function(mouse){

        pos = $(this).offset();

        $(this).find(".brilho").show();

        $(".brilho").css("margin-left",mouse.pageX - half - pos.left);

        $(".brilho").css("margin-top",mouse.pageY - half - pos.top);

    }).mouseout(function(){

        $(".brilho").hide();

    });

});

Nosso efeito está pronto. Veja o resultado: Demo.

Você pode substituir o show/hide do jQuery por fadeIn/fadeOut se quiser suavizar o efeito. Além disso a imagem que você criar para o brilho fará a diferença, essa que usei fiz às pressas. 

É isso aí, espero que tenham gostado.

Sprite com CSS

Para aqueles que se preocupam em otimizar seus sites uma boa técnica é juntar várias pequenas imagens em uma só, chamada Sprite, para diminuir a quantidade de requisições feitas ao servidor e o tempo de download da página. Através do CSS seleciona-se os pontos dessa imagem que devem ser mostrados. Já falei aqui no blog sobre como posicionar o Sprite (Rollover com Sprite), mas não falei sobre como produzir a imagem. Pelo menos não ainda.

Há outras opções além de fazer na unha usando ferramentas de edição de imagens. É possível fazer o Sprite de forma automática e on-line como no SpriteMe, Spritemapper, Sprite Cow, SmartSprites, Gerador de Sprites CSS e o CSS Sprites Generator. Aqui eu vou mostrar um pouquinho do SpriteMe funcionando.

Inicialmente é necessário instalar a ferramenta adicionando-a aos favoritos, como na imagem a seguir:

Basta ir à página web e abrir o SpriteMe. Ele ninjamente agrupa as imagens encontradas na página e então você pode gerar Sprites a partir desses grupos ou fazer seu próprio grupo clicando em "new sprite".

Na página acima o SpriteMe formou dois grupos: um com cinco imagens do rodapé e outro com a logo. Clicando em "make sprite" no primeiro grupo é gerado o Sprite com todas as imagens do rodapé:

É importante fazer o download da imagem e hospedá-la no servidor. Não tente usar o link gerado porque ele é apenas temporário.

Rollover com Sprite

O efeito rollover é criado no CSS mudando o background de um elemento, geralmente um botão ou item de um menu, ao passar o cursor do mouse sobre ele. O efeito pode não ficar muito legal usando imagens quando elas demoram de carregar. O botão some quando o cursor está sobre ele e só reaparece quando a segunda imagem carrega. Para evitar esse problema basta juntar as imagens em uma só para que todas as imagens utilizadas sejam carregadas de uma só vez, como nesse exemplo:

Ao invés de utilizar duas imagens, uma para o link normal e outra para quando o cursor do mouse estiver sobre o link, utilizamos uma só imagem e mostramos só a parte que interessa. Só para testar, podemos criar uma div com o tamanho exato de apenas uma imagem e setar a imagem como seu background:

<html> 

     <head> 

          <style type="text/css">

               div { 

                    height:48px;

                    width:48px;

                    background:url(twitter.png);

               }

          </style>

     </head>

     <body> 

          <div></div>

     </body> 

</html>

Para criar o efeito rollover basta mover a imagem usando o pseudo-elemento :hover e a propriedade background-position para alterar a posição da imagem em relação ao eixo x:

...

<head> 

     <style type="text/css">

          div { 

                height:48px;

               width:48px;

               background:url(twitter.png);

          }

          div:hover {

               background-position: -48px 0px;

          }

     </style>

</head>

...

Demo

A mesma solução pode ser aplicada a outros elementos HTML com sprites maiores, como esse: