quinta-feira, 2 de abril de 2015
Preparando um Poster
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/
sexta-feira, 20 de julho de 2012
eScanner
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.
quarta-feira, 9 de novembro de 2011
Nem só de cliente-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;
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;
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.
terça-feira, 8 de novembro de 2011
quarta-feira, 12 de outubro de 2011
Efeito de brilho com jQuery
domingo, 2 de outubro de 2011
Sprite com CSS
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:
Rollover com Sprite
terça-feira, 4 de janeiro de 2011
VLUZRMOS
Com os apertos de final de semestre e a chegada das "férias" fiquei sem tempo de postar algo novo no blog, mas hoje ao acessar minha página no Orkut aceitei a solicitação de amizade de um rapaz chamado Vagner que estuda na mesma universidade que eu, tem experiência com desenvolvimento web e um blog muito interessante que eu desconhecia. No blog ele apresenta seu portfólio e alguns comentários sobre estruturas de dados, programação em C e jQuery. Vale a pena dar uma olhadinha e comentar.
http://vluzrmos.wordpress.com/
domingo, 31 de outubro de 2010
Geradores de Conteúdo CSS
Utilizadas em conjunto com pseudo-elementos, essas propriedades permitem adiconar informações antes ou depois da apresentação de elementos. Se você não sabe o que são pseudo-elementos dê uma olhadinha antes no tópico Pseudo-Elementos CSS.
Content
A propriedade content é utilizada para a geração de conteúdo no momento da renderização. Os possíveis valores para content são:
inherit - herda o valor atribuido ao elemento-pai;
[string] - define uma string a ser incluída no documento;
[url] - define uma URL de um documento que será incluído;
counter([nome-contador]) - define um contador cujo valor será inserido no documento;
open/close-quote - insere aspas.
Se para o mesmo elemento for usado o valor open-quote para a propriedade content, tanto antes quanto após o elemento selecionado, irá aparecer primeiro aspas duplas e a seguir aspas simples. Além disso o close-quote só tem efeito se o valor open-quote já tiver sido atribuído antes.
Counter-increment
Usado para a numeração de sessões, é utilizada em conjuto com a propriedade counter. Os possíveis valores para counter-increment:
inherit - herda o valor atribuido ao elemento-pai;
none - não incrementa;
[contador] - nome do contador que será incrementado;
[número] - define quanto se deverá incrementar.
Counter-reset
Deve ser usado em conjunto com a propriedade counter e serve para zerar o contador. Os possíveis valores para counter-reset:
inherit - herda o valor atribuido ao elemento-pai;
none - não zera;
[contador] - nome do contador que será zerado;
Pronto, agora para testar estas três propriedades vamos escrever um documento HTML contendo vários parágrafos:
<p>Parágrafo</p><p>Parágrafo</p><p>Parágrafo</p><p>Parágrafo</p>A seguir definimos as seguintes regras na filha de estilos deste documento:
body{counter-reset: cont;}
p:before{
counter-increment:cont 1;
content:counter(cont) " - ";
}
/* Primeiro o contador "cont" é zerado na sessão body. A cada parágrafo é incrementado com uma unidade o contador "cont" e esse valor é adicionado no início de cada parágrafo com a propriedade content. */
O resultado:
1 - Parágrafo
2 - Parágrafo
3 - Parágrafo
4 - Parágrafo
Ainda existe a propriedade quotes que define que tipo de aspas o documento utilizará.
Pseudo-Elementos CSS
São eles:
Before - Usado com a propriedade content para adicionar conteúdo antes de um elemento:
[elemento]:before { [bloco-de-declarações] }
Ex: a:before { content: "Teste"; }
/* Adiciona a strig "Teste" antes das ocorrências do elemento a */
After - Usado com a propriedade content para adicionar conteúdo após um elemento:
[elemento]:after { [bloco-de-declarações] }
Ex: a:after { content: "Teste"; }
/* Adiciona a strig "Teste" depois das ocorrências do elemento a */
First-letter - Permite aplicar propriedades ao primeiro caractere do texto de um elemento:
[elemento]:first-letter { [bloco-de-declarações] }
Ex: p:first-letter { font-weight:bold; }
/* Coloca a primeira letra de todo parágrafo em negrito */
First-line - Permite aplicar propriedades aos caracteres da primeira linha do texto de um elemento:
[elemento]:first-line { [bloco-de-declarações] }
Ex: p:first-line { font-weight:bold; }
/* Coloca a primeira linha de todo parágrafo em negrito */
sexta-feira, 29 de outubro de 2010
Blog do Talisson
Recentemente descobri que ele tem um blog onde se propõe a escrever, entre outras coisas, sobre tecnologia. Está começando, mas já gostei muito dos primeiros textos. Dêem uma olhada, vale a pena conferir. http://talissonfagundes.blogspot.com/
quarta-feira, 13 de outubro de 2010
Utilizando o jQuery
Algumas pessoas me perguntaram como começar a mecher com jQuery. Bem, para começar é necessário primeiro ir ao site http://jquery.com/ e fazer o download do arquivo contendo o código javascript. Para isso é só clicar no botão do lado direito
O arquivo se chama "jquery-1.4.2.min.js". Esse arquivo deve ser ligado ao documento através de uma tag link no head da página html,assim:
<script type="text/javascript" src="jquery-1.4.2.min.js"> </script>
Pronto. Agora é só usar. Como eu disse no tópico anterior, o site jquery.com tem uma documentação que você pode usar para fazer os testes e aprender a usar essa biblioteca. Você pode começar pelos seletores e depois passar para os atributos, manipulação, CSS, eventos, efeitos e assim por diante.
Bons estudos.
quarta-feira, 29 de setembro de 2010
Aprendendo jQuery
segunda-feira, 27 de setembro de 2010
Pseudo-Classes CSS
terça-feira, 21 de setembro de 2010
De volta!!
Mas para tirar as teias do blog toma aí o link da minha última criação, o site da X SINFORM:
http://cacicuesc.com.br/sinform2010/
segunda-feira, 16 de novembro de 2009
Amor é coisa de louco
Então porque insistimos em compor e cantar canções, escrever poemas, cartas e fazer declarações a alguém, querendo que nos compreenda, entenda nossas motivações? Porque não nos cansamos desse vício, desse sentimento cativante mas massacrante que esgota as nossas forças e nos faz parecer indefesos? Porque?
Acho que a resposta está na primeira linha; Isso que se chama AMOR.
quinta-feira, 1 de outubro de 2009
Cheio de dedos
Ora, todos nós temos defeitos e quando convivemos muito de perto com alguém passamos a notar esses defeitos. Acho que é assim que amadurecemos nossos relacionamentos. Sem conviver com alguém você não poderá conhecê-la de fato a ponto de dizer que gosta dessa pessoa. Mas quando convivemos o amor aumenta, a admiração também e até mesmo a raiva, conhecemos e portanto podemos dizer algo a respeito dessa pessoa.
Amo muito mais minha prima por causa dessa convivência e admiro muito mais minha tia e não porque elas são perfeitas, mas porque agora as conheço bem melhor.
sexta-feira, 7 de agosto de 2009
sábado, 1 de agosto de 2009
Grandes Exemplos
Em 2008 trabalhei ao lado de vários estudantes, alguns veteranos e outros calouros, como eu. Aprendi logo de cara muitas coisas sobre a universidade, sobre empresas juniores e novas tecnologias. Realmente foi muito bom e não esquecerei daquela turma, mas não poderia deixar de expressar minha adimiração por três grandes exemplos que encontrei na TecnoJr. Carine, Francislon e Orlando Júnior, três grandes jovens que tive a honra de conhecer. Com toda certeza, eles me influenciaram positivamente e lhes desejo todo sucesso que merecem.






