Google+
Google+
Facebook
Facebook
Linkedin
Linkedin
Twitter
Twitter
SlideShare
SlideShare
Homepage
Homepage

quinta-feira, 2 de abril de 2015

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/

sexta-feira, 20 de julho de 2012

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.

quarta-feira, 9 de novembro de 2011

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.

terça-feira, 8 de novembro de 2011

quarta-feira, 12 de outubro de 2011

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.

domingo, 2 de outubro de 2011

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>
...


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

terça-feira, 4 de janeiro de 2011

VLUZRMOS

Feliz 2011 a todos.
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

Fiquei fascinado com as propriedades geradoras de conteúdo do CSS. Visto que as folhas de estilo são essencialmente responsáveis por adicionar estilo a documentos escritos em uma linguagem de marcação, geradores de conteúdo é o que mais se assemelha à uma experiência de programação.
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

Eu falei anteriormente de Pseudo-Classes CSS (se você não viu clique aqui), agora veremos os Pseudo-Elementos. Os pseudo-elementos permitem que elementos lógicos sejam definidos sem estarem necessariamente declarados na árvore de elementos do documento. A única limitação no uso de pseudo-elementos é no tocante a sua declaração em style-sheets locais.

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

Um período muito bom foi o que passei trabalhando com desenvolvimento web na Imagine Mais. A empresa não chegou a se consolidar, mas o conhecimento prático que obtive em três meses foi bem maior do que tive em dois anos na universidade, ao menos no tocante a programação web. Tive que aprender algumas tecnologias rapidamente para acompanhar o ritmo da equipe e nesse período recebi muita ajuda de Talisson, um cara super gente boa que teve muita paciência comigo.
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

Quem quiser aprender a utilizar jQuery eu sugiro o site oficial: http://jquery.com/
Lá você encontra a documentação e várias demonstrações.
Não há melhor forma (e nem sei se há outra forma) de aprender uma tecnologia senão pesquisando e treinando. Uma boa alternativa é pensar em um projeto e implementá-lo usando a linguagem (ou nesse caso o framework) para fixar os conhecimentos.

Outro site interessante e que funciona como um guia para consultas rápidas é o http://remysharp.com/visual-jquery/

Depois de aprender a trabalhar com o jQuery você pode experimentar o jQuery UI que é uma ferramenta com várias soluções já implementadas em jQuery.
Em relação ao javascript, se o jQuery lhe oferece um maior nível de abstração o jQuery UI lhe distancia mais ainda daqueles códigos complicados. Em outras palavras já vem tudo pronto. Isso facilita e acelera o desenvolvimento web. A documentação do UI está no mesmo site (jquery.com).

Fica a dica.

segunda-feira, 27 de setembro de 2010

Pseudo-Classes CSS

Pseudo-Classes são utilizadas para empregar estilo a elementos em determinadas circunstâncias indicando um estado, por exemplo quando move-se o mouse sobre o elemento.
As pseudo-classes mais conhecidas são :link, :visited, :active e :hover, mas ainda existem a :focus, a :first-child e a :lang.

:link define o estilo para links que ainda não foram visitados pelo usuário:
a:link { color: #000; } /* define a cor preta para links que ainda não foram visitados */

:visited define estilo para links já visitados pelo usuário:
a:visited { color: #00F; } /* define a cor azul para links já visitados */

:active define estilo para um elemento quando este for ativado, por exemplo quando é clicado:
a:active { color: #F00; } /* define cor vermelha para o link durante o clique */

:hover define estilo para um elemento quando o move-se o mouse sobre ele:
a:hover { color: #0F0; } /* define cor verde para link quando o ponteiro do mouse está sobre ele */

:first-child define estilo para um elemento quando este for o primeiro de seu elemento pai:
a:first-child { color: #CCC; } /* define cor cinza para o primeiro link encontrado em algum outro elemento */

:focus define estilo para elemento quando este possuir foco no documento:
input:focus { background-color: #CCC; } /* define cor de fundo cinza para o input em foco */

:lang define estilo para elemento que possui o valor selecionado para o atributo lang:
span:lang(en) { font-weight: bold; } /* define o elemento span que possui o atributo lang com o valor "en" como negrito */

Não deve haver espaço entre os dois pontos e o restante do nome da pseudo-classe:
ERRADO - a: hover { ... }
CERTO - a:hover { ... }

Apesar de usarmos :hover para o elemento link ele não é restrito a esse elemento. Por exemplo, no exemplo abaixo ele é usado para as linhas de uma tabela:

tr:hover { color: #069; } /* define uma cor azul para a linha de uma tabela quando o ponteiro do mouse passar sobre*/

terça-feira, 21 de setembro de 2010

De volta!!

Passei um tempão sem escrever nada, mas agora tô de volta. A ideia inicial era escrever mais sobre mim, sobre o que faço e sobre tecnologia, mas o tempo é meio curto e às vezes não dá para se fazer o que gosta ^^.

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

O amor é mesmo muito confuso. Não adianta quantas canções, poemas, cartas, declarações foram cantadas, escritas ou ditas. Diante de um só erro tudo isso parece desmoronar.
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

Atualmente moro com minha tia e apesar de termos uma boa relação eu vivo constantemente "cheio de dedos". Essa expressão mostra exatamente o desconforto que sinto em qualquer coisa que faça na casa da minha tia. Mesmo tendo um bom relacionamento com alguém, e você que já morou com parentes ou amigos conhece bem essa situação, nós somos intrusos. Mesmo sem querer nós influenciamos na ordem, na cultura, na privacidade daquela família. Amo minha tia e primos e sou grato a Deus por essa oportunidade de conviver com eles mas espero não me tornar um fardo.
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.

sábado, 1 de agosto de 2009

Grandes Exemplos

Nesses meus 3 semestres na universidade tive oportunidade de conhecer pessoas incríveis. Logo no primeiro ano comecei a trabalhar em um projeto de extensão, a Associação Empresa Júnior de Computação (TecnoJr) que, como qualquer empresa júnior, é composta por alunos de graduação. Quando participei do processo seletivo para esse projeto ainda desconfiava da credibilidade da TecnoJr, justamente por ter estudantes na direção da empresa. No entanto, logo nas primeiras reuniões comecei a enxergar naquela equipe jovens competentes e extremamente profissionais.
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.