Campanha: Atualize seu navegador
Campanha para eliminar browsers antigos do mercado

Desenvolvedores ainda perdem muito em produtividade devido a navegadores desatualizados, sem suporte às funcionalidades e tecnologias atuais para alcançar seus clientes, limitando soluções e criando dores de cabeça desnecessárias.
O Internet Explorer 6.0 (lançado em 2001) ainda participa de 34% do mercado de navegadores*. É um browser que não acompanha o estágio atual da Internet, possui falhas de segurança e limita todo o potencial de uma Internet melhor para todos nós.
Esta campanha é uma iniciativa para excluir navegadores desatualizados do mapa da internet do Brasil. Basta inserir o código abaixo em todos os seus sites e de seus clientes. Desta forma, para todo usuário que acessá-los utilizando navegadores desatualizados, será exibida uma barra simples, sem marcas, orientando o usuário a atualizar o seu navegador e falando da importância desta atitude. Mais segurança para o usuário, mais liberdade aos desenvolvedores.
Lembre-se que a barra só é exibida para navegadores antigos.
Para ir a página da campanha clique aqui
Drag and Drop com jQuery e PHP
Você já precisou em algum momento criar uma lista de itens que poderia ser organizada apenas arrastando-os? Já bateu cabeça pra criar este tipo de funcionalidade sozinho?
Pois bem, bem-vindo ao grupo
Bom, me bati um pouco e pensei: "Já deve existir isso pronto na web. Pra que reinventar a roda?!". Neste momento fui Googlar para encontrar algo desenvolvido em jQuery e PHP que suprisse a necessidade.
Encontrei e testei vários scripts e hoje lhes apresento um que achei interessante e que pode lhes ajudar assim como me ajudou

Sem mais delongas, acesse o demo da funcionalidade e saiba como implementá-la aqui. Se desejar, baixe o pacote diretamente aqui.
Se você conhece outro script mais completo, menor, e etc, deixe seu comentário!
Até mais.
Fazendo Backup do banco MySQL via PHP
O ideal seria usar o mysqldump (http://www.mysql.com/doc/en/mysqldump.html) para isso.
Porém vamos à dica.
No exemplo abaixo ao final será criado um arquivo BANCO.sql com o código SQL necessário para recriar as tabelas.
Se você quiser que saia no browser, basta trocar os fwrite por echo!
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 | <? // Conecta ao banco $servidor = "localhost"; $usuario = "aquiousuario"; $senha = "aquiasenha"; $banco = "nomedobanco"; mysql_connect($servidor, $usuario, $senha) or die(mysql_error()); mysql_select_db($banco) or die(mysql_error()); $abre = fopen("BANCO.sql", "w"); // nome do arquivo que será salvo o backup $sql1 = mysql_list_tables($banco) or die(mysql_error()); while ($ver=mysql_fetch_row($sql1)) { $tabela = $ver[0]; $sql2 = mysql_query("SHOW CREATE TABLE $tabela"); while ($ver2=mysql_fetch_row($sql2)) { fwrite($abre, "-- Criando tabela: $tabela\n"); $pp = fwrite($abre, "$ver2[1]\n\n-- Salva os dados\n"); $sql3 = mysql_query("SELECT * FROM $tabela"); while($ver3=mysql_fetch_row($sql3)) { $grava = "INSERT INTO $tabela VALUES ('"; $grava .= implode("', '", $ver3); $grava .= "')\n"; fwrite($abre, $grava); } fwrite($abre, "\n\n"); } } $finaliza = fclose($abre); if($finaliza) { echo "Prontim! :)"; } ?> |
Espero que aproveitem esta dica!
Borda interna em imagens
O efeito de borda interna nas imagens é muito utilizado pelo portal Globo.com. Neste post vou mostrar como é simples aplicar esse efeito em suas imagens usando poucas linhas de CSS.
HTML
Montamos uma lista inserindo um link para cada imagem:
1 2 3 4 5 6 | <ul> <li><a href="#"><img src="imagem.gif" /></a></li> <li><a href="#"><img src="imagem.gif" /></a></li> <li><a href="#"><img src="imagem.gif" /></a></li> <li><a href="#"><img src="imagem.gif" /></a></li> </ul> |
CSS
O uso do “overflow:hidden” é obrigatório para as imagens se manterem fixas. No “a:hover” definimos a espessura da borda e no “a:hover img” deslocamos negativamente as margens da imagem:
1 2 3 4 5 | *{ margin: 0; padding: 0; border: 0; outline: 0; list-style: none; text-decoration: none; } ul li { float: left; margin-right: 5px; } ul li a,ul li a img { overflow: hidden; float: left; } ul li a:hover { border:5px solid #999; } ul li a:hover img { margin:-5px; } |
Notepad++: Editor de Texto

Ótimo editor de textos e códigos-fontes que suporta várias linguagens como C, C++, Java, C#, XML, HTML, PHP, Javascript, ASCII art, doxygen, ASP, VB/VBS, SQL, Objective-C, CSS, Pascal, Perl, Python, Lua, TeX, TCL, Assembler, Ruby, Lisp, Scheme, Properties, Diff, Smalltalk, Postscript, VHDL, Ada, Caml, AutoIt, KiXtart, Matlab, Verilog, Haskell e InnoSetup.
Você também pode modificar o estilo das linguagens como cor de comentários, variáveis, etc.
Caso a linguagem que você desenvolve não está adicionada no Notepad++, nem precisa se preocupar, adicione ela e configure os parâmetros nativos dela, simples e fácil de usar!
Mais informações no site do Notepad++ (BR)
Baixe agora seu Notepad++ aqui
Marcar vários CheckBox com JavaScript
Código simples para uma grande funcionalidade:
script.js
1 2 3 4 5 6 7 8 9 10 11 | function marcarCheck() { var campo = document.Form; var contaForm = campo.elements.length; var i; for(i=0; i<contaForm; i++) { if(campo.elements[i].id == "Marcados") { campo.elements[i].checked = campo.CheckTodos.checked; } } } |
index.html
1 2 3 4 5 6 7 8 9 10 | <script language="javascript" src="script.js"></script> <form name="Form"> Marcar Todos: <input type="checkbox" name="CheckTodos" onClick="marcarCheck();" /> <br><br> 1. <input type="checkbox" id="Marcados" /><br> 2. <input type="checkbox" id="Marcados" /><br> 3. <input type="checkbox" id="Marcados" /><br> 4. <input type="checkbox" id="Marcados" /><br> 5. <input type="checkbox" id="Marcados" /> </form> |
CSS Reset – O que é e como usar?
Aprenda como funciona, como usar, pra que serve e o que é o CSS Reset, uma ótima artimanha para ser usada em todos os seus sites e garantir o básico para um site que seja igual em todos os navegadores.
Hoje vou falar sobre uma coisa simples, rápida e MUUITO útil… o CSS Reset ou CSS Reseter.
Há um grande problema quando implementamos um layout em HTML e CSS e vamos testar em outros browsers como o Internet Explorer ou Safari… Alguns elementos não se comportam da mesma forma, mesmo que esse comportamento não tenha sido definido/sobrescrito por você… por exemplo o H1, H2 e H3… Eles têm tamanhos diferentes em cada browser, mesmo usando a mesma fonte eles vão aparecer – se você não definir esse tamanho – com tamanhos diferentes.
O que é?
O CSS Reset é – basicamente – um arquivo que “limpa” os estilos padrões de todos os elementos HTML que já possuem uma formatação padrão. Ele tira cores, tamanhos de fonte, margins, paddins, efeitos e decorações… Quase tudo de quase todos os elementos vira “padrão”, como um texto sem formatação/alteração nenhuma.
Como usar?
Da forma mais simples do mundo: inserindo o arquivo no seu site como um CSS normal, antes de qualquer outro CSS que seu site usar.
Se você inserir em um site pronto você pode ver seu site se desfigurar todo, isso vai significar que você se baseou em estilos padrões de alguns elementos, o que é errado… Já que esse estilo pode mudar entre navegadores/futuras versões.
É altamente recomendável que você insira/use esse arquivo sempre que for começar a implementar um site.
E como é esse arquivo?
Existem vários CSS Reset rolando pela Internet… Todos funcionam da mesma forma mas alguns atingem mais elementos que outros… Mas teoricamente não há diferença.
Esse aqui é o que eu uso no meu site pessoal:
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 38 39 40 41 42 43 44 | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; } |
Espero que tenham gostado!
Cantos arredondados com jQuery Corner
Aprenda a criar efeitos de canto (arredondado, cortado, chanfrado e etc.) nos seus elementos HTML sem precisar usar imagens ou CSS para isso… É o poder do jQuery + jQuery Corners!
Quem nunca quis colocar um elemento com cantos arredondados em um site?
Existem dezenas de formas de fazer isso, a maioria delas implica no uso de imagens (o que não é errado), mas muitas vezes queremos algo mais rápido, mais dinâmico e se possível, mais leve… E é aí que entra o nosso grande – e poderoso – amigo jQuery!
Existe um plugin do jQuery chamado jQuery Corner que faz o trabalho de arredondar os cantos de um elemento pra você… Se o seu navegador suporta regras de CSS pra isso, ele vai usá-las, se o navegador não suportar (IE6 por exemplo) ele dá o jeito dele e você obtem o mesmo resultado sem precisar criar nenhuma imagem ou hack de CSS.
Exemplo de uso:
Veja um exemplo do HTML completo da página de exemplo, aqui:
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 38 39 40 41 42 43 44 45 46 47 48 49 50 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery Corner | Cantos Arredondados - Pedro Caires /blog</title> <meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" /> <!-- JAVASCRIPT --> <script language="JavaScript" src="Scripts/jquery.js" type="text/javascript"></script> <script language="JavaScript" src="Scripts/jquery.corner.js" type="text/javascript"></script> <script language="JavaScript" type="text/javascript"> $(function() { $(".canto1").corner("rounded 10px"); $(".canto2").corner("bevel 10px"); $(".canto3").corner("notch 5px"); $(".canto4").corner("bite 10px"); }); </script> <!-- CSS --> <style type="text/css"> div.canto1 { background: #FFCC00; height: 100px; width: 400px; margin: 30px } div.canto2 { background: #FFCC00; height: 100px; width: 400px; margin: 30px } div.canto3 { background: #FFCC00; height: 100px; width: 400px; margin: 30px } div.canto4 { background: #FFCC00; height: 100px; width: 400px; margin: 30px } </style> </head> <body> <div class="canto1"> <p>Conteúdo</p> <p>Conteúdo novo</p> </div> <div class="canto2"> <p>Conteúdo</p> <p>Conteúdo novo</p> </div> <div class="canto3"> <p>Conteúdo</p> <p>Conteúdo novo</p> </div> <div class="canto4"> <p>Conteúdo</p> <p>Conteúdo novo</p> </div> </body> </html> |
A mágica toda acontece ali, entre a linha 13 e 16.
Veja o exemplo funcionando: Clique aqui
Faça download dos arquivos: Clique aqui
Espero que tenham gostado!
Trocando o texto quando dar foco em campo
Script simples:
1 2 3 4 5 6 7 8 9 10 11 12 | <script type="text/javascript"> function limpar(campo) { if (campo.value==campo.defaultValue) { campo.value = ""; } } function escrever(campo) { if (campo.value=="") { campo.value = campo.defaultValue; } } </script> |
Como ficará no campo de texto:
1 | <input type="text" name="nome_campo" id="nome_campo" value="Clique Aqui para o texto sair!" onfocus="limpar(this);" onblur="escrever(this);" /> |
Simples, não?
Veja o exemplo funcionando: Clique aqui