Archive for the ‘Programação’ Category
Imagens .png no IE6 com Transparência
Qualquer um que já teve alguma experiência na área de desenvolvimento web conhece o grande vilão dos desenvolvedores: o Internet Explorer 6. Por ser um navegador totalmente ultrapassado e que não segue os padrões web, o trabalho muitas vezes é dobrado para se ter um site ou aplicativo web cross-browser. O pior de tudo é saber que o IE6 ainda é amplamente utilizado, ou seja, não há como fugir dele.
Um dos “fails” que o IE6 tem é o fato de não conseguir renderizar imagens .png quando essas possui transparências. Elas acabam num “elegante” fundo cinza, arrebentando com o design do site. Felizmente, há solução para isso, através de javascripts.
Depois de experimentar vários scripts o melhor que encontrei foi o DD_belatedPNG, que resolve o problema de imagens .png tanto nas tags html de imagem, quanto no uso de imagens de fundo em classes CSS (inclusive com repetições).
Vejamos os dois casos como são simples:
Primeiro, fazemos a chamada do script entre as tags <head> e </head>:
<!--[if lt IE 7]>
<script type="text/javascript" src="DD_belatedPNG_0.0.8a-min.js"></script>
<script>
DD_belatedPNG.fix('.pngFix, img');
</script>
<![endif]-->
Observe que há uma condicional que detecta o browser do usuário e faz a leitura do script (baixe-o aqui!) somente se ele estiver utilizando o Internet Explorer 6 ou inferior. Na linha 4, aplicamos o script para todas as tags de imagem <img> e a todos os elementos que tiverem a classe pngFix.
Desta forma você pode utilizar imagens .png a vontade, e caso precise utilizar como imagens de fundo de algum elemento, basta adicionar a este a classe pngFix, conforme mostrado abaixo:
HTML:
<div class="pngFix"> conteúdo... </div>
CSS:
div {
background: url("bg-div.png") top left repeat;
width: 55%;
padding: 20px;
border: 2px solid #006633;
margin: 0 0 20px 0;
}
Uma demonstração pode ser vista clicando no link abaixo (abra no IE6 e repare que o comportamento é o mesmo dos outros browsers):
Quaisquer dúvidas ou sugestões deixe seu comentário!
Como tirar âncora de Links em HTML
Passei por uma situação esses dias em que precisava criar links sem destino e sem âncora para um script que estava desenvolvendo. O problema é que se você criar um link com o atributo href vazio, ele fica sem destino, porêm com uma âncora padrão levando para o topo da página. A solução é simples:
O padrão, com âncora:
<a href="">Link</a>
Para tirar a âncora, basta adicionar onclick="return false;":
<a href="" onclick="return false;">Link sem Âncora</a>
Simples assim. Use o seu link "morto" como desejar agora!
5 Ferramentas Online para Web Designers/Developers
Um bom desenvolvedor web que se preze sabe que não param de surgir por aí ferramentas que facilitam (e muito) a vida, principalmente no quesito design.
Muitas dessas ferramentas são online, acessadas diretamente pelo navegador, e facilitam em aspectos básicos de design, que normalmente tomariam um tempo que seria melhor gasto em aspectos mais complexos.
Vou listar e descrever abaixo algumas que eu uso. Caso conheça alguma outra, compartilhe nos comentários! 
Form style generator: Esta é uma ferramenta bem útil para gerar o CSS de campos de formulário. Você pode personalizar o fundo do campo com degradê, colocar borda de vários tipos e tamanhos, configurar a fonte e efeitos de hover e focus. Depois de configurar do jeito que você quer, basta clicar em “Your CSS” e todo o código CSS será gerado automaticamente para você.
Genfavicon: Excelente para criar o favicon de seu site (ícone que aparece na “aba” em que seu site está aberto e na barra de endereço). Escolha a imagem que você deseja utilizar por uma URL ou por upload, escolha o tamanho desejado, defina a área de corte e pronto! Seu arquivo favicon será gerado com o formato e o tamanho correto.
Spiffy Corners: Essa é realmente muito útil! Sabe aqueles quadros com borda arredondada que você fazia utilizando imagens no atributo “background” do CSS ou utilizando o border-radius (que não funciona no IE)? Então, essa ferramenta faz todo o trabalho sujo pra você sem utilizar imagens nem border-radius, tornando seus quadros cross-browser. Defina o nome da classe, a cor do fundo, a cor do quadro e pronto! Você terá em mãos o HTML e CSS no ponto para serem usados.
Ajaxload: Indispensável para quem precisa de uma animação de loading, principalmente para requisições ajax. Você escolhe uma animação entre dezenas de possibilidades, personaliza a cor de fundo (ou deixa transparente) e a cor da animação. Depois é só clicar em “Generate It” e você terá sua animação personalizada em .gif, pronta para ser usada.
Stripe Generator: Ferramente perfeita pra criar backgrounds de sites com listras. Você pode configurar o tamanho, o espaçamento, as cores e a orientação das listras, além de definir o estilo do fundo (opaco ou com degradê). Também é possível colocar sombreamento nas listras. A imagem gerada é de 40×40, bastando você repetí-la através do CSS para obter o efeito de listras no fundo do site.
Chrome Experiments: O que está por vir na web!
Com certeza uma das coisas mais aguardadas pelos desenvolvedores web é a chegada do HTML 5 e seus novos recursos e firulas.
Para demonstrar o potencial da junção do HTML 5, com o avanço do javascript e diversas outras tecnologias novas que não param de pipocar, como o Canvas e o SVG, o Google mantém um site chamado Chrome Experiments, que tem por objetivo demonstrar experimentos criados por designers e desenvolvedores espalhados pelo mundo, que utilizam essas novas tecnologias.
Os experimentos são fantásticos, e já da pra perceber que teremos em um futuro breve um novo conceito de navegação e interatividade nos sites.
Pra você conseguir abrir os experimentos com perfeição, você tem que utilizar o Google Chrome, que é o navegador que possui a maior compatibilidade com o HTML 5 e essas novas tecnologias. Com o Chrome em mãos, divirta-se!
Ruby on Rails: O framework do momento em desenvolvimento web
Quem gosta de programação para web já deve ter ouvido falar desse framework que está conquistando cada vez mais adeptos, o Ruby on Rails. Confesso que conheci há pouco tempo, mas já estou extremamente interessado e disposto a estudá-lo.
Como o próprio nome já diz, o Ruby on Rails é baseado em Ruby, uma linguagem de script, interpretada, orientada a objetos, simples, direta e extensível, com versões para diversos ambientes como Mac, Linux, Windows, Java, etc.
Os interpretadores são totalmente gratuitos e open source, dando liberdade ao desenvolvedor para fazer o que bem entender.
Voltando a falar do framework em si, ele foi criado em 2003 por David Heinemeier Hansson e desde então está em constante expansão. Cito um trecho retirado do site oficial brasileiro, que resume bem o que é o Ruby on Rails:
“Ruby on Rails é um framework de desenvolvimento web (gratuito e de código aberto) otimizado para a produtividade sustentável e a diversão do programador. Ele permite que você escreva código de forma elegante, favorecendo a convenção ao invés da configuração.”
Ok, mas quem usa esse framework? O principal caso de sucesso acredito ser o twitter, a rede social que é a febre do momento. No cenário brasileiro destaca-se o BlogBlogs que trabalha com indexação e rankeamento de blogs brasileiros.
 |
 |
Diversas outras aplicações que viraram sucesso no mundo todo foram desenvolvidas com Rails e a tendência é que este número cresça cada vez mais.
Para quem quer conhecer mais sobre Rails, assim como eu, recomendo o livro do Rodrigo Urubatan, que parece ser ideal para iniciantes. Eu o comprei e, apesar de estar no início da leitura, já percebi que será um bom pontapé inicial. Fica a dica!
Se você já conhece Rails, não deixe de comentar sobre sua experiência! Até a próxima!
Showcase: Sites com jQuery
Boa noite pessoal!
Depois de quase 2 semanas sem posts (o tempo anda curto), vamos falar mais um pouco sobre jQuery.
O que não falta por aí são sites que realmente impressionam, que ao bater o olho você jura que foi feito em Flash, mas que no fim das contas trata-se de grandes idéias implementadas utilizando jQuery.
Para mostrar o poder dessa biblioteca javascript, vou mostrar aqui alguns sites que vi nesses últimos dias e que me chamaram a atenção:
1 – Elliott Kember – freelancer web developer: Por ser um site de uma web designer, você estranha logo de cara por não ter um layout atrativo. Mas ao observar uns “quadradinhos” se movendo na tela você acaba percebendo que trata-se daquele joguinho clássico “snake”, e você ainda pode jogar controlando a “cobrinha” pelo teclado! Para completar, no canto superior esquerdo, a página está “descolada”, e ao puxá-la com o mouse você consegue ver o código fonte por trás! Criativo, não?
2 – youlove.us – Além de um layout muito bem feito, destaca-se o cabeçalho e o rodapé. Um efeito no fundo cria uma espécie de animação, mudando a tonalidade do fundo. No rodapé, onde se tem a imagem de uma cidade, cria-se um ciclo de noite e dia muito bonito!
3 – Durham Web Design – O interessante neste site é a área de navegação, que ocupa o site inteiro. Forma uma espécie de mosaico mostrando o portfolio do designer, que ao passar o mouse sobre suas partes indica que tipo de trabalho se trata. Vale destacar também o efeito de fade na transição de uma página para outra. Simples e elegante!
4 – slicemachine.com – O efeito do menu no topo apesar de simples é bonito, mas o destaque mesmo é o efeito utilizado nos 5 quadros. Este realmente dá a impressão de que é flash!
5 – arnaud-k.fr – O efeito nas divs do topo é muito interessante. Ao movimentar do mouse elas se deslocam em direções alternadas, dando a impressão de que o terreno, as nuvens e o avião estão se mexendo! O menu também possui um efeito que remete a flash, e os quadros no conteúdo são revelados com fade ao passar do mouse.
Enfim, existe uma infinidade de outros sites que utilizam jQuery neste nível, ou até em um nível superior. Estes eu encontrei no usejquery.com (excelente showcase de sites que utilizam jQuery). Fique a vontade para comentar e indicar outros sites (não vale sites em flash =P)!
Até a próxima!
jQuery: Mostrar/Esconder elementos da página com efeitos
Continuando os posts sobre jQuery, vou mostrar como mostrar/esconder elementos da página utilizando efeitos básicos. Este é um bom exemplo para mostrar como jQuery facilita sua vida, fornecendo funções prontas que fazem todo o trabalho pra você.
Lembre-se sempre de fazer a leitura do jQuery no cabeçalho de sua página (o script pode ser baixado na página oficial do jQuery):
1 2 3 | <head> <script language="javascript" src="jquery-1.3.2.min.js"></script> </head> |
O parâmetro callback presente em todas as funções mostradas abaixo é opcional, e representa o que será executado após o término do efeito. Pode ser declarada outra função neste parâmetro, criando efeitos em cadeia.
função hide(speed, callback):
1 | $("#conteudo").hide("normal"); |
Neste exemplo o elemento da página de id “conteudo” se esconderá a uma velocidade “normal”. Este parâmetro de velocidade também pode ser um valor inteiro, representando a velocidade em ms.
função show(speed, callback):
1 | $("#conteudo").show("slow"); |
Efeito contrário à função hide(), mostrando o elemento da página. Neste caso, a velocidade será lenta, e o elemento de id “conteudo” será mostrado a uma velocidade “slow”, ou seja, mais lento.
função slideDown(speed, callback):
1 | $("#conteudo").slideDown(); |
Com esta função, o elemento da página é mostrado com um efeito de “slide”. Neste exemplo, foi utilizada a velocidade padrão, mas assim como as outras funções pode-se configurar a velocidade do efeito com valores inteiros ou utilizando as strings “slow”, “normal” e “fast”.
função slideUp(speed, callback):
1 | $("#conteudo").slideUp(); |
Efeito contrário ao slideDown(), ao invés de mostrar o elemento da página com o efeito de “slide”, o esconde.
função fadeIn(speed, callback):
1 | $("#conteudo").fadeIn(); |
Com esta função, o elemento da página é mostrado com um efeito de “fade”. A velocidade é configurável como nas outras funções.
função fadeOut(speed, callback):
1 | $("#conteudo").fadeOut(); |
Efeito contrário ao fadeIn(), ao invés de mostrar o elemento da página com o efeito de “fade”, o esconde.
Veja aqui uma demonstração de todos os efeitos!
(Veja o código fonte dessa página para ajudar no entendimento).
Ainda há outros tipos de efeitos e também é possível criar efeitos personalizados, mas isto abordaremos em outro post.
Qualquer dúvida não deixe de perguntar!
Navegação por abas com jQuery e CSS
A navegação por abas é uma forma elegante e muito utilizada de organizar o conteúdo de um site. O que irei mostrar neste tutorial é como criar este efeito utilizando jQuery e CSS. A vantagem desta abordagem, é o fato de não haver o recarregamento da página na mudança de aba, tornando a navegação agradável para o usuário. Veja nesta demonstração o resultado obtido para facilitar o entendimento do código!
Agora vamos ver passo-a-passo como isto é feito:
1 – Carregue o script da biblioteca jQuery no cabeçalho de sua página (não se esqueça de indicar o caminho correto do arquivo no seu servidor):
1 2 3 | <head> <script language="javascript" src="jquery-1.3.2.min.js"></script> </head> |
2 – A estrutura do html ficará dessa forma (é essencial seguir essa estrutura para o script funcionar corretamente):
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div id="tabnav">
<h4>computeiro.com.br - Navegação por abas com jQuery e CSS</h4>
<div id="tabs">
<a href="#" onclick="opentab(1);">Aba 1</a>
<a href="#" onclick="opentab(2);">Aba 2</a>
<a href="#" onclick="opentab(3);">Aba 3</a>
</div>
<div id="content">
<div> conteúdo da aba 1 </div>
<div> conteúdo da aba 2 </div>
<div> conteúdo da aba 3 </div>
</div>
</div> |
- A div “tabs” contém os links que representarão as abas para o usuário clicar
- Caso queira adicionar mais abas, basta criar mais links na div “tabs” e associar ao evento onclick a chamada da função opentab(), passando como parâmetro a numeração de qual div encontrada em “content” deve ser mostrada (1 para a primeira div, 2 para a segunda e assim por diante).
3 – Para obtermos o visual de abas, estilizamos a estrutura acima utilizando CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | #tabnav { width: 80%; margin: 0 auto; } #tabs { height: 20px; position: relative; } #content { position: relative; padding: 20px; border: 2px solid #78bee2; } #content div p { font-family: Trebuchet MS, Arial, Verdana; font-size: 12px; } #tabs a, #tabs a:visited { background: url("tab.jpg") top left no-repeat; font-family: Trebuchet MS, Arial, Verdana; text-decoration: none; color: #FFFFFF; font-size: 12px; font-weight: bold; display: block; width: 70px; height: 17px; _height: 20px; margin: 0 10px 0 0; text-align: center; padding: 3px 0 0 0; float: left; } |
É importante observar que na linha 23 deve-se indicar o caminho correto para a imagem da aba no seu servidor.
4 – Pra finalizar, utilizamos o seguinte script em jQuery que será responsável por manipular os cliques nas abas, escondendo/mostrando as divs com os conteúdos:
1 2 3 4 5 6 7 8 9 10 11 12 | $(document).ready(function() { $("#content > div").hide(); $("#content > div:eq(0)").show(); $("#tabs > a:eq(0)").css("background", "url(tab-selected.jpg) top left no-repeat"); }); function opentab(num) { $("#content > div").hide(); $("#content > div:eq(" + (num-1) + ")").fadeIn(); $("#tabs > a").css("background", "url(tab.jpg) top left no-repeat"); $("#tabs > a:eq(" + (num-1) + ")").css("background", "url(tab-selected.jpg) top left no-repeat"); } |
- Na linha 1 é declarada a função que será executada quando a página for carregada.
- Na linha 2 escondemos todas as divs dentro de “content”, que são as divs com o conteúdo.
- Na linha 3 mostramos somente a primeira div dentro de “content”, que é o conteúdo da primeira aba.
- Na linha 4 mudamos a imagem da primeira aba, para dar o efeito dela estar selecionada.
- Na linha 7 declaramos a função opentab(), que será chamada sempre que uma aba for clicada, e recebe como parâmetro qual div de “content” será mostrada (1 para a primeira, 2 para a segunda e assim por diante)
- Na linha 8 escondemos todas as divs de conteúdo
- Na linha 9 mostramos a div indicada no parâmetro, utilizando um efeito de fade, através da função jQuery fadeIn().
- Na linha 10 alteramos a propriedade CSS background dos links, atribuindo a imagem da aba de quando ela não está selecionada.
- Finalmente, na linha 11 alteramos a propriedade CSS background somente da aba clicada, atribuindo a ela a imagem de quando a aba está selecionada.
Com essa abordagem fica fácil adicionar mais abas, pois não será necessário nenhuma mudança no CSS e no script, bastando adicionar o link para a nova aba e a div para seu respectivo conteúdo.
Qualquer dúvida ou sugestão, comente!
Como destacar campos de formulário com jQuery e CSS
Para debutar os posts sobre programação, vou mostrar como destacar campos de formulário utilizando a biblioteca de javascript jQuery. A primeira coisa a fazer é entrar no site do jQuery e baixá-lo. Marque a opção production e clique em Download (jQuery) como mostrado na imagem abaixo:
Você será levado a página de download da última versão, que neste momento está na 1.3.2. Baixe o arquivo (jquery-1.3.2.min.js) e o carregue entre as tags de cabeçalho (head) de sua página, como mostrado abaixo:
1 2 3 | <head> <script language="javascript" src="jquery-1.3.2.min.js"></script> </head> |
Agora iremos criar uma classe CSS para estilizar o campo do formulário para quando este estiver em destaque. A estilização é por sua conta e a mostrada abaixo é apenas um exemplo:
1 2 3 4 | input.marcado, textarea.marcado { border: 2px solid #000000; background: #FFFFCC; } |
Por fim, criaremos o script que adiciona a classe CSS no campo do formulário quando este entra em foco. Além disso, é preciso remover a classe do campo quando este sai de foco. É recomendado colocar o script em um arquivo .js e carregá-lo na página assim como foi feito com a biblioteca do jQuery. Veja o script e uma breve explicação sobre ele:
1 2 3 4 5 6 7 8 | $(document).ready(function() { $('input, textarea').focus(function() { $(this).addClass('marcado'); }); $('input, textarea').blur(function() { $(this).removeClass('marcado'); }); }); |
- Na linha 1, indica-se que o script só entrará em ação após a página ser carregada completamente.
- A linha 2 declara uma função que será chamada sempre que tags input e textarea entrarem em foco, ou seja, sejam marcadas para digitação.
- Na linha 3 a classe .marcado (estilizada logo acima no css) é adicionada a tag que entrou em foco, dando o efeito desejado.
- A linha 5 declara uma função que será chamada sempre que tags input e textarea saírem de foco.
- Na linha 6 retira-se a classe .marcado da tag que saiu de foco, fazendo-a voltar ao normal.
Pronto! Um código simples que dá um visual melhor para seus formulários e ainda aumenta a usabilidade. =D
