tag:blogger.com,1999:blog-22846413250818398362024-03-23T14:50:29.473-03:0010calçoUnknownnoreply@blogger.comBlogger18125tag:blogger.com,1999:blog-2284641325081839836.post-14959338605056725022011-12-04T12:40:00.001-02:002015-01-29T08:42:26.445-02:00Opacidade com CSS e imagensNeste tutorial vamos aprender a manipular a opacidade de elementos html, utilizando a propriedade opacity das CSS3, e uma versão alternativa, em que utilizaremos um plano de fundo semitransparente.<br />
Mãos à obra!<br />
<br />
<h2>Propriedade Opacity - CSS:</h2><br />
Resultado:<br />
<br />
<img src='https://lh6.googleusercontent.com/-MXRzWALNUNI/TtkFA5GpQ-I/AAAAAAAABhY/ev43WIHcYCw/s199/opacity.jpg' alt='css opacity' title='css opacity'/><br />
<br />
<br />
HTML:<br />
<blockquote><code><div id="prim"><br />
</div><br />
<div id="seg"><br />
</div><br />
</code></blockquote><br />
CSS:<br />
<blockquote><code>#prim {<br />
width:100px;<br />
height:100px;<br />
background:red;<br />
<span style='color:blue;'>opacity:0.5;<br />
filter:alpha(opacity=50);</span><br />
}<br />
#seg {<br />
width:100px;<br />
height:100px;<br />
background:red;<br />
}<br />
</code></blockquote>As duas declarações em azul determinam 50% de transparência para a div prim, sendo, <code>filter:alpha</code> usada para IE8 ou anteriores e <code>opacity</code> usada pelos demais navegadores.<br />
<br />
Como perguntado nos comentários, se houver conteúdo dentro da div prim, ele também ficará transparente. Para evitar que isso aconteça podemos usar a solução tratada abaixo.<br />
<br />
<h2>Opacidade com png:</h2><br />
Resultado:<br />
<br />
<img src='https://lh6.googleusercontent.com/-yhAC6ikx0HY/TtkM_QjPdgI/AAAAAAAABhw/QL2r9MqTvTo/s200/opacityPNG.jpg' alt='opacity png' title='opacity png'/><br />
<br />
<br />
HTML:<br />
<blockquote><code><div id="container"><br />
<p><br />
Este quadrado está 50% transparente, mas este texto não.<br />
</p><br />
</div><br />
</code></blockquote><br />
CSS:<br />
<blockquote><code>#container {<br />
width:200px;<br />
height:200px;<br />
background-image:url("background_normal.jpg");<br />
}<br />
#container p {<br />
margin:20px;<br />
padding:20px;<br />
<span style='color:blue;'>background:url("background_semitransparente.png" repeat);</span><br />
}<br />
</code></blockquote><br />
Nesta segunda solução utilizamos uma imagem com 50% de transparência, feita em um editor de imagens e salvo no formato <code>.png</code>.<br />
A div <code>container</code> contém uma imagem de fundo para dar destaque à transparência do elemento <code>p</code>.<br />
O elemento <code>p</code> não dever conter cor de fundo.<br />
<br />
<h2>Extra - Transparência em menus:</h2><br />
Utilizando a propriedade opacity podemos dar um efeito interessante aos menus.<br />
Tomando como base o nosso <a href='http://10calco.blogspot.com/2011/03/menu-css-com-imagens-ao-lado-dos-links.html'>menu com imagens ao lado dos links</a>, procure o seguinte trecho e acrescente a parte em azul:<br />
<br />
<blockquote><code>ul#menuvert li a {<br />
<br />
... resto do código ...<br />
<br />
<span style='color:blue;'>opacity:.6;<br />
filter:alpha(opacity=60);</span><br />
}<br />
</code></blockquote><br />
<br />
Faça a mesma coisa com o seguinte trecho:<br />
<br />
<blockquote><code>ul#menuvert li a:hover {<br />
<br />
... resto do código ...<br />
<br />
<span style='color:blue;'>opacity:.1;<br />
filter:alpha(opacity=100);</span><br />
}<br />
</code></blockquote><br />
Salve e veja diferença. Qualquer dúvida poste nos comentários ou entre em <a href="http://10calco.blogspot.com/p/contato.html" alt='contato'>contato</a>.<br />
Até mais!Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2284641325081839836.post-82646702521834025532011-05-24T22:22:00.003-03:002015-01-29T09:16:10.186-02:00Youtube recarrega vídeo ao maximizar telaHá algum tempo notei um problema com os vídeos do Youtube, em que toda vez que eu alterava para o modo full screen eles recarregavam. Quando precisava ver um vídeo em tamanho maior e não queria esperar até carregar eu aumentava a fonte do navegador.<br />
Porém há um meio de consertar isso, ou melhor, configurar.<br />
<span class="hidepic"><img src='https://lh3.googleusercontent.com/_gkCCEPUJN58/TdxdmH5ybCI/AAAAAAAABeg/qvtzDmWWviQ/youtube.jpg' title='Youtube full screen' alt='Youtube full screen'/><br />
<span class='img-description'>Imagem por: <a href='http://www.flickr.com/photos/cheesepuff/2406468228/'>codenamecueball</a></span></span><br />
Por padrão o Youtube escolhe a qualidade do vídeo de acordo com a resolução da tela. Quando mudamos para tela cheia ele recarrega os vídeos para exibir em qualidade melhor.<br />
<br />
Se você tiver uma conta do Youtube acesse as <a href="http://www.youtube.com/account_playback">Configurações de reprodução</a> e altere a caixa <strong>Qualidade de reprodução do vídeo</strong> para <strong>"Tenho uma conexão lenta. Nunca reproduzir vídeos de alta qualidade."</strong><br />
Salve e pronto. Os vídeos não irão recarregar sozinhos e ainda podemos escolher a qualidade de exibição.Unknownnoreply@blogger.com5tag:blogger.com,1999:blog-2284641325081839836.post-88705994950012123702011-04-08T14:46:00.005-03:002015-01-29T09:17:06.041-02:00Imagem auto ajustável com CSSFazer com que uma imagem se ajuste automaticamente de acordo com o conteúdo é uma tarefa relativamente fácil se tratando de navegadores que suportam CSS3, para isso, basta dar uma olhada no tutorial sobre <a href="http://10calco.blogspot.com/2010/07/redimensionar-imagem-com-css-background.html">background-size</a>. Porém o nosso amigo Internet Explorer não reconhece essa propriedade, e para dar suporte a esse navegador precisamos recorrer a alguns macetes.<br />
<br />
<div class="hidepic">
<img alt="Porcentagem" src="https://lh6.googleusercontent.com/_gkCCEPUJN58/TZpmpDTz-HI/AAAAAAAABcU/4ub7pKfC5F8/percent.jpg" title="Porcentagem" style="width:550px;height:250px; "/><br />
<span class='img-description'>Imagem por: <a href="http://www.flickr.com/photos/ralphunden/1292179973/">ralphunden</a></span>
</div>
<br />
<br />
Para redimensionar imagens no IE podemos usar a técnica ensinada em <a href="http://10calco.blogspot.com/2011/03/redimensionar-imagem-no-ie-com-csshtml.html">redimensionar imagens no ie com css e html</a>, porém com esse macete, se deixarmos nossa imagem auto ajustável ( com as medidas em porcentagem ) ela funcionará apenas no IE, e ficará desconfigurada nos outros navegadores.<br />
Enfim, se realmente precisarmos de uma imagem auto ajustável "Cross Browser" ( que funcione também no IE ) podemos misturar CSS3 do primeiro tutorial com algumas técnicas do segundo.<br />
<br />
<h2>O código HTML.</h2>Para começar fazemos uma div e utilizando a tag "img src" colocamos a imagem antes do conteúdo:<br />
<blockquote><code><div id='test'><b><img src='Endereço da imagem'class='bg'/></b><br />
<p> ... conteúdo ... </p><br />
</div></code></blockquote><br />
<h2>O código CSS.</h2><blockquote><code><style type="text/css"><br />
#test {<br />
width:500px; /* Largura fixa para a div */<br />
min-height:200px; /* Altura mínima */<br />
height:auto !important; /* Altura ajustável de acordo com o conteúdo */<br />
height:200px; /* Altura mínima para IE */<br />
background-image: url("Endereço da imagem"); /* Aqui vai a mesma imagem que usamos acima */<br />
background-size:100% 100%; /* Imagem ocupando toda largura e altura da div */<br />
-webkit-background-size: 100%;<br />
-o-background-size: 100%;<br />
-khtml-background-size: 100%;<br />
-moz-background-size: 100% 100%;<br />
}<br />
#test img.bg {<br />
display:none; /* Escondemos a imagem que está no HTML dos navegadores que suportam CSS3 */<br />
}<br />
</style></code></blockquote><ul><li>-webkit-background-size, -o-background-size, -khtml-background-size e -moz-background-size tornam o código compatível com diferentes navegadores.</li>
<li>background-size e -moz-background-size tem largura e altura especificados para não ocorrer bug no firefox</li>
</ul><br />
<h2>Estilo para IE.</h2>Agora acrescentamos um código condicional exclusivo para IE.<br />
<blockquote><code> <!--[if IE]><br />
<style type="text/css"><br />
#test {<br />
background:none; /* Escondemos a imagem que está no CSS do IE */<br />
}<br />
#test img.bg {<br />
display:block; /* Mostramos a imagem que está no HTML */<br />
z-index:-1; /* Colocamos ela atrás do conteúdo */<br />
position:absolute; /* Fazemos a imagem não interferir no conteúdo */<br />
width:100%; /* Imagem ocupando toda largura da div */<br />
height:100%; /* Imagem ocupando toda altura da div */<br />
}<br />
</style><br />
<![endif]--></code></blockquote><br />
<h2>Exemplo.</h2><img alt='Imagem auto ajustável' src='https://lh3.googleusercontent.com/_gkCCEPUJN58/TZpxOGPs10I/AAAAAAAABcc/MvebIFKkmNM/imagem_auto_ajust%C3%A1vel.JPG' title='Imagem auto ajustável' /><br />
<span class="img-description">Imagem de fundo por: <a href='http://www.flickr.com/photos/nirufe/4384138797/'>Freidwall</a></span><br />
<br />
Se você conhece alguma outra técnica relacionada as CSS ou HTML, deixe um comentário ou entre em <a href="http://10calco.blogspot.com/p/contato.html">contato</a>. E bem-vindo ao mundo das gambiarras.Unknownnoreply@blogger.com10tag:blogger.com,1999:blog-2284641325081839836.post-61349906028278055302011-03-29T18:19:00.005-03:002015-01-29T09:17:41.923-02:00Menu CSS com imagens ao lado dos linksNeste tutorial vamos fazer um menu css e conhecer duas maneiras de colocar imagens ao lado dos links, uma utilizando "background-image" e outra a tag "img src".<br />
<h2>Criando o menu.</h2><img alt='Menu CSS' src='https://lh3.googleusercontent.com/_gkCCEPUJN58/TZihRmz8vlI/AAAAAAAABcQ/777ftQLhC-E/menu_css_vert1.JPG' title='Menu CSS sem imagem' /><br />
<br />
Código HTML:<br />
<blockquote><ul id='menuvert'><br />
<li><a href='#;'>Home</a></li><br />
<li><a href='#;'>Produtos</a></li><br />
<li><a href='#;'>Serviços</a></li><br />
<li><a href='#;'>Contato</a></li><br />
<li><a href='#;'>Sobre</a></li><br />
</ul></blockquote>Código CSS:<br />
<blockquote>ul#menuvert {<br />
width:150px;<br />
margin:0;<br />
padding:0;<br />
background:#000;<br />
list-style:none;<br />
}<br />
ul#menuvert li a {<br />
border-bottom:1px solid #ccc;<br />
color:#ccc;<br />
font:14px Tahoma, Arial, sans-serif;<br />
text-decoration:none;<br />
display:block;<br />
}<br />
ul#menuvert li a:hover {<br />
border-bottom:1px solid orange;<br />
color:orange;<br />
}</blockquote><br />
<h2>Colocar imagem ao lado dos links - Método 1 - "background-image".</h2>Nosso menu já está pronto, agora vamos colocar uma imagem ao lado dos links acrescentando a parte em negrito ao código.<br />
<blockquote>ul#menuvert li a {<br />
<strong>padding:5px 0 2px 20px;<br />
background-image: url('endereço da imagem');<br />
background-repeat:no-repeat;<br />
background-position:left center;</strong><br />
border-bottom:1px solid #ccc;<br />
color:#ccc;<br />
font:14px Tahoma, Arial, sans-serif;<br />
text-decoration:none;<br />
display:block;<br />
}</blockquote>Versão abreviada:<br />
<blockquote>ul#menuvert li a {<br />
padding:5px 0 2px 20px;<br />
background: url('endereço da imagem') no-repeat left center;<br />
border-bottom:1px solid #ccc;<br />
color:#ccc;<br />
font:14px Tahoma, Arial, sans-serif;<br />
text-decoration:none;<br />
display:block;<br />
}</blockquote>Com o padding definimos um espaço acima e abaixo dos links de 5 e 2px respectivamente. A esquerda definimos 20px que será onde nossa imagem ficará.<br />
Nas propriedades de background declaramos:<br />
background-image(endereço da imagem);<br />
background-repeat(no-repeat para a imagem não se repetir);<br />
background-position(colocamos nossa imagem a esquerda e alinhada no centro);<br />
<br />
<h2>Colocar imagem ao lado dos links - Método 2 - tag "img src".</h2>Nesse segundo método colocamos a imagem no html e não no css. Para isso acrescentamos o seguinte código em negrito dentro da tag <a href='#;'></a>.<br />
<br />
<blockquote><ul id='menuvert'><br />
<li><a href='#;'><span style="font-weight: bold;"><img src='endereço da imagem' /></span>Home</a></li><br />
<li><a href='#;'><span style="font-weight: bold;"><img src='endereço da imagem' /></span>Produtos</a></li><br />
<li><a href='#;'><span style="font-weight: bold;"><img src='endereço da imagem' /></span>Serviços</a></li><br />
<li><a href='#;'><span style="font-weight: bold;"><img src='endereço da imagem' /></span>Contato</a></li><br />
<li><a href='#;'><span style="font-weight: bold;"><img src='endereço da imagem' /></span>Sobre</a></li><br />
</ul></blockquote><br />
<span class="postnote">Note que com esse método podemos colocar imagens diferentes para cada link.</span><br />
<br />
No css vamos declarar uma pequena distância a direita da imagem para separá-la do texto e alinhá-la verticalmente ao centro:<br />
<blockquote>ul#menuvert li a img {<br />
padding-right:5px;<br />
vertical-align:middle;<br />
}</blockquote><br />
<img alt='Menu CSS' src='https://lh6.googleusercontent.com/_gkCCEPUJN58/TZifl182R5I/AAAAAAAABcM/WYaAQXLDJtE/menu_css_vert.JPG' title='Menu CSS com imagem' /><br />
<span style='font-size:9px;'><a href='http://www.iconseeker.com/search-icon/web-development-3/arrow-next-grey-thick.html'>Fonte do ícone.</a></span><br />
<br />
Para terminar seguem dois sites onde podemos encontrar ícones para personalizar nosso menu:<br />
<ul><li><a href="http://www.iconspedia.com/">Iconspedia</a></li>
<li><a href="http://www.iconseeker.com/search/arrow/">Iconseeker</a></li>
</ul>Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-2284641325081839836.post-80085832008912067982011-03-12T15:52:00.002-03:002015-01-29T09:17:56.791-02:00Ajustar a largura do blog - BloggerAntes de alterarmos as dimensões do blogger vamos conhecer como ele é estruturado e quanto de espaço vamos reservar para cada parte do layout.<br />
<br />
<h2>»Estrutura básica do blogger.</h2>Baseado no modelo Minima teremos a seguinte estrutura:<br />
(Clique para ampliar / Abre em outra janela)<br />
<br />
<a href='https://lh5.googleusercontent.com/_gkCCEPUJN58/TXqhdUNZexI/AAAAAAAABa8/68k2UAlk6cA/s720/estrutura_blog.JPG' target=_blank ><img alt='Estrutura do blog' src='https://lh5.googleusercontent.com/_gkCCEPUJN58/TXqhdUNZexI/AAAAAAAABa8/68k2UAlk6cA/s720/estrutura_blog.JPG' title='Estrutura do blog' width='550px' height='400px'/></a><br />
<blockquote>Legenda:<br />
<br />
<strong><span style="color:red;">outer-wrapper</span></strong>: Bloco principal que engloba todo conteúdo do blog. Dentro dele estão as demais partes citadas abaixo;<br />
<br />
<strong><span style="color:gray;">header-wrapper</span></strong>: Aqui fica o cabeçalho(título) da página;<br />
<br />
<strong><span style="color:blue;">main-wrapper</span></strong>: Aqui ficam as postagens e os comentários;<br />
<br />
<strong><span style="color:green;">sidebar-wrapper</span></strong>: Aqui fica a barra lateral;<br />
<span class='hide'>Créditos: 10calco.blogspot.com</span><br />
<strong><span style="color:#000;">footer-wrapper</span></strong>: E aqui fica o rodapé da página.<br />
</blockquote><br />
<h2>»Alterando os valores.</h2><br />
Para começar acessamos <strong>Design</strong> > <strong>Editar HTML</strong> > e localizamos o seguinte trecho:<br />
<blockquote>#outer-wrapper {<br />
<strong>width: 660px;</strong><br />
margin:0 auto;<br />
padding:10px;<br />
text-align:$startSide;<br />
font: $bodyfont;<br />
}<br />
<br />
#main-wrapper {<br />
<strong>width: 410px;</strong><br />
float: $startSide;<br />
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br />
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br />
}<br />
<br />
#sidebar-wrapper {<br />
<strong>width: 220px;</strong><br />
float: $endSide;<br />
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */<br />
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */<br />
}<span style='visibility:hidden;'>Créditos: 10calco.blogspot.com</span><br />
</blockquote><br />
Como já sabemos o que cada parte faz, para mudarmos sua largura basta alterarmos o valor <strong>width</strong> de cada seletor para os valores desejados.<br />
Lembrando que o valor do main e da sidebar juntos não devem ultrapassar o valor do outer-wrapper.<br />
<br />
<h2>»Exemplo</h2>Vamos deixar nosso blog compatível com resoluções de 1024px de largura para cima.<br />
<blockquote>#outer-wrapper {<br />
width: 980px;<br />
margin:0 auto;<br />
...<br />
}<br />
<br />
#main-wrapper {<br />
width: 650px;<br />
float: left;<br />
margin-right:10px;<br />
...<br />
}<br />
<br />
#sidebar-wrapper {<br />
width: 320px;<br />
float: right;<br />
...<br />
}<br />
</blockquote>Somando o valor do main-wrapper, mais a margin-right com o valor da sidebar obtemos o valor do outer-wrapper.<br />
<br />
Podemos ainda alterar a largura do cabeçalho com a seguinte parte do código:<br />
<blockquote>#header-wrapper {<br />
<strong>width:660px;</strong><br />
margin:0 auto 10px;<br />
border:1px solid $bordercolor;<br />
} <span class='hide'>/* Créditos: 10calco.blogspot.com */</span><br />
</blockquote><br />
<span class='postnote'>Nota: Nem todos os templates apresentam os mesmos nomes e valores. <br />
Baseado nas dicas passadas aqui cabe a você identificar cada parte e configurá-la como desejar.</span><br />
<br />
<br />
»Não esqueça de <a href='http://10calco.blogspot.com/2011/03/teste-seu-blog-em-varias-resolucoes.html'>testar seu blog em várias resoluções</a> após definir novos valores.Unknownnoreply@blogger.com7tag:blogger.com,1999:blog-2284641325081839836.post-56081726126956935632011-03-10T23:10:00.005-03:002015-01-29T09:18:22.351-02:00Teste seu blog em várias resoluçõesDe acordo com as estatísticas da <a href="http://www.w3schools.com/browsers/browsers_display.asp">w3schools</a> e do <a href="http://www.w3counter.com/globalstats.php">w3counter</a>, a maioria dos usuários utilizam resoluções de 1024x768 ou superior. Enquanto o velho 800x600, que já foi muito usado a tempos atrás vem caíndo consideravelmente, sendo utilizado atualmente por cerca de 2% do total de usuários.<span class='hide'>Créditos: 10calco.blogspot.com</span><br />
<h2>Qual a resolução mínima que seu blog ou site suporta?</h2>Se você nunca se preocupou com isso é uma boa hora para começar. Já imaginou entrar em um blog com o menu pela metade e a sidebar jogada abaixo das postagens? Aqui no 10calço me aconteceu mais ou menos isso, resolvi ver como o blog estava sendo apresentado em outras resoluções e para minha surpresa em 1024x728 a sidebar ficava colada no rodapé.<br />
<br />
<h2>Veja seu site em várias resoluções.</h2>Foi usando o <a href="http://viewlike.us/">Viewlike.us</a> que descobri o problema com a sidebar. Através dele podemos ver nosso site em 7 diferentes resoluções, desde 800x600 até 1920x1200!, sem contar a resolução para iPhone e Wii Browser.<br />
<br />
<span class="postnote">Nota: Digite a url que quiser verificar sem o <b>http://</b>.</span><br />
<span class='hide'>Créditos: 10calco.blogspot.com</span><br />
Outro serviço no mesmo estilo é o <a href="http://www.simures.com/">Simures</a>. Com a diferença que nele digitamos a largura e altura que queremos avaliar.<br />
<br />
<br />
E ai, já sabe como seu blog se comporta em outras resoluções? Será que a sua sidebar não anda "fugindo"?Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-2284641325081839836.post-81532223600269860532011-03-06T12:53:00.015-03:002015-01-29T09:18:33.741-02:00Redimensionar imagem no IE com CSS e HTMLDevido ao internet explorer não aceitar grande parte das propriedades CSS (como o background-size), vamos precisar fazer um macete para redimensionarmos imagens nele.<br />
<br />
<span class="postnote">Tutorial testado no IE 6, Firefox 3.6, Chrome 9 e Ópera 11.</span><br />
<br />
<img alt='CSS/HTML no ie' src='https://lh4.googleusercontent.com/_gkCCEPUJN58/Ta2g6dwBFKI/AAAAAAAABeE/sUApHb1DBp8/3899114449_ec210c67d5.jpg' title='CSS/HTML no ie' style='width:550px; height:300px;'/><span class='img-description'>Imagem por: <a href='http://www.flickr.com/photos/nikio/3899114449/in/photostream/'>Marjan Krebelj</a></span><br />
<br />
Caso queira redimensionar imagens usando CSS (background-size) acesse:<br />
<ul><li><a href='http://10calco.blogspot.com/2010/07/redimensionar-imagem-com-css-background.html'>redimensionar imagens com CSS3</a>.</li>
</ul><br />
Para começar vamos fazer uma div que conterá a imagem a ser redimensionada:<br />
<br />
<blockquote><span class='hide'>Créditos: 10calco.blogspot.com</span><br />
<div id='test'><br />
<ul><br />
<li><br />
Texto Texto Texto Texto Texto Texto<br />
</li><br />
</ul><br />
</div></blockquote><br />
Após a tag UL vamos acrescentar a imagem e vamos definir uma classe para ela através do seguinte código em negrito:<br />
<br />
<blockquote><div id='test'><br />
<ul><b><img class='bg' src='plano_de_fundo.jpg'/></b><br />
<li><br />
Texto Texto Texto Texto Texto Texto<br />
</li><br />
</ul><br />
</div></blockquote><br />
No CSS vamos definir o tamanho da div e aplicar z-index igual a 1 ao LI:<br />
<br />
<blockquote>#test {<br />
width:500px;<br />
height:100px;<br />
}<br />
<br />
#test ul li {<br />
z-index:1;<br />
}</blockquote><br />
Por último vamos colocar a imagem por trás do texto com z-index igual a -1, definir posição absoluta e deixar a imagem do mesmo tamanho da div:<br />
<br />
<blockquote>#test img.bg {<br />
z-index:-1;<br />
position:absolute;<br />
width:500px;<br />
height:100px;<span class='hide'>/* Créditos: 10calco.blogspot.com */</span><br />
}</blockquote><br />
<br />
<span class='postnote'><b>-Nota:</b> Se o tamanho da imagem estiver em porcentagem ela só ficará correta no IE.<br />
[Editado: 08/04/2011] Para resolver esse problema veja: <a href='http://10calco.blogspot.com/2011/04/imagem-auto-ajustavel-com-css.html'>Imagem auto ajustável com CSS.</a>[/Editado]</span><br />
<br />
Conhece algum outro macete ou algum aprimoramento para este? Então poste nos comentários ou entre em <a href='http://10calco.blogspot.com/p/contato.html'>contato</a>Unknownnoreply@blogger.com3tag:blogger.com,1999:blog-2284641325081839836.post-68777516521684969452011-03-01T11:20:00.021-03:002015-01-29T09:19:46.629-02:00Table e Tableless, quais as diferenças?Não é raro encontrarmos layouts formulados em tabelas, ou ainda layouts que misturam table e tableless. Mas afinal, qual a diferença e quando usar cada um? <br />
<div class="hidepic"><img alt="HTML" src="https://lh4.googleusercontent.com/_gkCCEPUJN58/TWwZDhwFzWI/AAAAAAAABXc/UQP9kECm2mg/html.jpg" title="HTML" /></div><br />
Vamos a uma breve explicação sobre essas duas técnicas:<br />
<h2>Table/tabelas.</h2>Técnica criada para <strong>apresentar dados tabulares</strong>, que passou a ser usada na estruturação de layouts. <br />
<br />
•<u>Código básico de uma tabela</u>:<br />
<blockquote><span class="hide">Créditos: 10calco.blogspot.com</span><br />
<pre><code><table>
<tr>
<td>Célula 1</td>
<td>Célula 2</td>
</tr>
<tr>
<td>Célula 3</td>
<td>Célula 4</td>
</tr>
</table></code></pre></blockquote>•<u>E como seria visto no navegador</u>: <br />
<blockquote><br />
<table><tbody>
<tr> <td>Célula 1</td> <td>Célula 2</td> </tr>
<tr> <td>Célula 3</td> <td>Célula 4</td> </tr>
</tbody></table><br />
</blockquote><br />
Com a evolução do <abbr title="HyperText Markup Language">HTML</abbr> e a individualidade dos browsers em interpretar os códigos, foram necessárias algumas mudanças na forma de estruturar layouts. <br />
<h2>Tableless/"sem tabelas".</h2>Consiste em dar maior semântica ao uso das tags HTML na construção de layouts. Uma das características do tableless é o fato de trabalhar com a linguagem de marcação (ex: HTML) separada da linguagem de estilo (<abbr title="Cascading Style Sheets">CSS</abbr>), o que permite maior controle e facilidade na hora de fazer alterações nos códigos.<br />
<br />
•<u>Código básico em tableless</u>: <br />
<blockquote><pre><code><div id='menu'>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</code></pre></blockquote>•<u>E como seria visto no navegador</u>: <br />
<blockquote><div id="menu"><ul><li>Item 1</li>
<li>Item 2</li>
</ul></div></blockquote><span class="hide">Créditos: 10calco.blogspot.com</span><br />
<h2>»Conclusão.</h2>Table já foi a principal ferramenta para criação de layouts, e ainda é muito defendida e utilizada por parte dos usuários. Porém após a criação do <abbr title="Normas para Web">Web standards</abbr>, juntamente com o Tableless e o CSS podemos criar layouts com maior acessibilidade, semântica e facilidade na sua manutenção.<br />
Isso não quer dizer fim ao table, ou condenar sua utilização, mas sim fazer uso racional dessas técnicas, utilizando cada uma para seu devido fim.<br />
<br />
Para finalizar deixo aqui um link muito interessante do blog Revolução Etc, de Henrique C. Pereira sobre <a href="http://revolucao.etc.br/archives/introducao-a-semantica-web/">Introdução a Semântica</a>.Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-2284641325081839836.post-7723359756421459072011-02-23T21:29:00.009-03:002015-01-29T09:20:06.890-02:00Descompactar urls com Long URL PleaseUrls compactadas tem como principal uso poupar espaço, principalmente em redes sociais, em que há um limite de carácteres por mensagem. Porém nem sempre esse artifício é utilizado com boas intenções, sendo muitas vezes arriscado clicar em qualquer link encontrado por ai.<br />
<br />
Long URL Please é um complemento para <a href="http://br.mozdev.org/download/">firefox</a> que tem a função de mostrar o endereço original escondido por trás da maioria desses links.<br />
<br />
<a href="https://lh3.googleusercontent.com/_gkCCEPUJN58/TWWddFylyJI/AAAAAAAABWo/QI5efrMzGyM/long-url.png"><img alt='Long URL Please' src="https://lh3.googleusercontent.com/_gkCCEPUJN58/TWWddFylyJI/AAAAAAAABWo/QI5efrMzGyM/long-url.png" width="560px;" height="400px" title='Long URL Please'/></a><br />
<br />
A sua utilização é bem simples, basta instalar que ele faz o resto sozinho.<br />
Para baixar o Long URL Please acesse:<br />
<ul><li><a href="https://addons.mozilla.org/pt-BR/firefox/addon/9549/">https://addons.mozilla.org/pt-BR/firefox/addon/9549/</a>.</li></ul><br />
<br />
Dica via: <a href="http://twitter.com/softonic_br">@softonic_br</a> em <a href="http://long-url-please.softonic.com.br/">http://long url-please.softonic.com.br/</a>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2284641325081839836.post-48306686195441616222011-02-07T16:39:00.012-02:002015-01-29T09:20:20.182-02:00Efeito mouse hover em Li pai de menu drop down<strong>-Nota:</strong> <em>"Este tutorial visa personalizar um menu drop down já pronto, fazendo com que o 'Li pai'(Menu Pai) dos submenus fique destacado quando estivermos com 'mouse hover' sobre os submenus"</em><br />
<br />
Para explicar melhor o que iremos fazer seguem duas imagens:<br />
<br />
A primeira é como geralmente se comporta esse tipo de menu. Note que o menu About não apresenta a imagem quando navegamos pelos seus submenus:<br />
<br />
<img alt='Efeito mouse hover menu pai' src="https://lh6.googleusercontent.com/_gkCCEPUJN58/TVAlTIvRJII/AAAAAAAABS8/rai8CZHYeZ0/Menu%20DD%20li%20hover1.JPG" /><br />
<br />
Já a segunda é o nosso objetivo, ou seja, o menu About(Li pai) mostra uma imagem quando navegamos pelos submenus:<br />
<br />
<img alt='Efeito mouse hover menu pai' src="https://lh3.googleusercontent.com/_gkCCEPUJN58/TVAlbqTAwwI/AAAAAAAABTA/Mtpql-REzSQ/Menu%20DD%20li%20hover2.JPG"><br />
<br />
Lembrando que esse tutorial foi baseado no modelo de <a href="http://maujor.com/tutorial/ddownmenu.php">menu drop down ensinado por Maujor.</a><br />
Mãos à obra!<br />
<br />
<strong>1-</strong>Na primeira parte definimos a imagem que aparecerá no estado mouse hover sobre todos os links do menu:<br />
<blockquote><span class='hide'>Créditos: 10calco.blogspot.com</span><br />
<br />
#drop-down ul li:hover a {<br />
background-image: url(...imagem do estado mouse hover...);<br />
}<br />
<br />
...<br />
...<br />
<br />
</blockquote><strong>2-</strong>Na segunda parte vamos enganar o css, fazendo com que a imagem acima não apareça nos submenus.<br />
Digamos que cada item do nosso menu apresente um degrade azul como background. Então no código abaixo vamos definir esse mesmo degrade aos submenus.<br />
Se não fizermos isso, quando colocarmos o mouse sobre o menu pai a imagem do estado mouse hover aparecerá sobre todos os itens do submenu:<br />
<blockquote><br />
#drop-down li ul a {<br />
background-image: url(Ex: degrade_azul.jpg) <u>!important</u>;<br />
}<br />
<br />
...<br />
...<br />
<br />
</blockquote><strong>3-</strong>Por último mostramos a imagem do estado mouse hover novamente, mas dessa vez ela aparecerá somente enquanto estivermos com o mouse sobre cada item do submenu:<br />
<blockquote><br />
#drop-down li ul a:hover {<br />
background-image: url(...imagem do estado mouse hover...) <u>!important</u>;<br />
}<br />
<br />
</blockquote><span class='hide'>Créditos: 10calco.blogspot.com</span><br />
O resultado será semelhante ao mostrado na segunda imagem postada nesse artigo.<br />
Note que foi declarado <u>!important</u> nas duas últimas partes do código, caso contrário ele não funcionará como previsto.<br />
<br />
Caso seja necessário redimensionar alguma das imagens usadas veja <a href='http://10calco.blogspot.com/2010/07/redimensionar-imagem-com-css-background.html'>Redimensionar imagens com CSS</a>.Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2284641325081839836.post-81383351131098444232010-08-09T14:26:00.017-03:002015-01-29T09:20:32.932-02:00Dividir plano de fundo da página - CSS 3Nesse post usaremos uma técnica de CSS3 chamada <u>multiplos backgrounds</u><span class="ref"><a href="http://10calco.blogspot.com/2010/08/dividir-plano-de-fundo-da-pagina-css-3.html#refdois">Ref[2]</a></span>, que permite definir mais de uma imagem como plano de fundo.<br />
<br />
<span class='postnote'>-Nota 1: Para essa técnica são <strong>necessários conhecimentos básicos de CSS</strong>.</span><br />
<br />
<span class='postnote'>-Nota 2: Apesar deste tutorial mostrar especificamente como dividir a página do blogger, <strong>essa técnica pode ser usada para dividir qualquer background que esteja em CSS.</strong></span><br />
<br />
Mãos à obra.<br />
<br />
Acesse Painel de Controle > Design > <b>Editar Html</b> e localize algo semelhante a isso:<br />
<blockquote><span class='hide'>/* Créditos: 10calco.blogspot.com */</span><br />
body {<br />
<b>background:$bgcolor;</b><br />
margin:0;<br />
color:$textcolor;<br />
font:x-small Georgia Serif;<br />
font-size/* */:/**/small;<br />
font-size: /**/small;<br />
text-align: center;<br />
}<br />
<br />
</blockquote>Altere a parte em negrito pelo seguinte código:<br />
<blockquote><br />
background-color:$bgcolor;<br />
background-image: url(Plano de fundo 01), url(Plano defundo 02);<br />
background-position: left top, left bottom;<br />
background-origin: border-box, border-box;<br />
background-repeat: no-repeat, repeat-x;<br />
background-size: 200px 50%, 100px 100px;<br />
-o-background-size: 200px 50%, 100px 100px;<br />
-moz-background-size: 200px 50%, 100px 100px;<br />
-webkit-background-size: 200px 50%, 100px 100px;<br />
background-attachment:fixed;<br />
<br />
</blockquote>Substituir "Plano de Fundo" pelo endereço das imagens a serem utilizadas.<br />
Esse é um código comum para background, porém note que há dois valores separados por vírgula em cada propriedade, cada um deles define sua respectiva imagem. Se quiser utilizar mais imagens basta separar os valores por vírgulas.<br />
O background-size define o tamanho de cada imagem, para mais informações sobre essa propriedade veja: <a href="http://10calco.blogspot.com/2010/07/redimensionar-imagem-com-css-background.html">Redimensionar imagem com CSS</a><br />
No mais é CSS básico. Divirtam-se.<br />
<br />
Meu exemplo ficou assim:<br />
<div style="text-align:center;"><a href="http://lh6.ggpht.com/_gkCCEPUJN58/TFGpul9KFUI/AAAAAAAABKI/mnEWknXFTio/s640/duo%20bg.JPG"><br />
<img alt="Background dividido com duas imagens" height="320px" src="http://lh6.ggpht.com/_gkCCEPUJN58/TFGpul9KFUI/AAAAAAAABKI/mnEWknXFTio/s640/duo%20bg.JPG" title="Background dividido" width="500px" /></a><br />
</div><br />
<strong>E o código usado:</strong><br />
<blockquote><br />
background-color:$bgcolor;<br />
background-image: url(<span style="color:blue;">http://lh5.ggpht.com/_gkCCEPUJN58/TFGLOGhDgTI/AAAAAAAABJ4/27IEt3o-a54/s640/lua-1919.jpg</span>), url(<span style="color:red;">http://lh5.ggpht.com/_gkCCEPUJN58/S7Hpx44wlaI/AAAAAAAAAag/zCmT7pYZlGQ/s640/chuva.jpg</span>);<br />
background-position: <span style="color:blue;">left top</span>, <span style="color:red;">left bottom;</span><br />
background-origin: <span style="color:blue;">border-box</span>, <span style="color:red;">border-box;</span><br />
background-repeat: <span style="color:blue;">no-repeat</span>, <span style="color:red;">repeat-x;</span><br />
background-size: <span style="color:blue;">100% 50%</span>, <span style="color:red;">100px 50px;</span><br />
-o-background-size: <span style="color:blue;">100% 50%</span>, <span style="color:red;">100px 50px;</span><br />
-moz-background-size: <span style="color:blue;">100% 50%</span>, <span style="color:red;">100px 50px;</span><br />
-webkit-background-size: <span style="color:blue;">100% 50%</span>, <span style="color:red;">100px 50px;</span><br />
background-attachment:fixed<span class='hide'>/* Créditos: 10calco.blogspot.com */</span><br />
<br />
</blockquote><span style="color:blue;">Azul</span>= <a href="http://www.melhorpapeldeparede.com/images/lua-1919.htm">Imagem de cima</a> com 100% de largura, ocupando 50% da altura da página e não se repete (no-repeat).<br />
<span style="color:red;">Vermelho</span>= Imagem do rodapé com 100px de largura, 50px de altura e repetindo horizontalmente (repeat-x).<br />
A propriedade background-origin como o próprio nome diz, define a origem do posicionamento do background, que no caso é a borda do elemento (border-box). Ver <span class="ref"><a href="#reftres">Ref[3]</a></span><br />
Ambas as imagens estão com position=fixed, ou seja, estão fixas na página mesmo com a rolagem da mesma, o que dá um efeito interessante ao fundo.<br />
A cor do background é preta para esconder o espaço entre as duas imagens.<br />
<br />
<br />
Links recomendados:<br />
<ul><li><span id="refum"><span class="ref">Ref[1]</span></span><a href="http://www.w3.org/TR/css3-background/">Guia W3C - Background</a></li>
<li><span id="refdois"><span class="ref">Ref[2]</span></span><a href="http://www.css3.info/preview/multiple-backgrounds/">Técnica de Multiplos Backgrounds - CSS3 Info</a></li>
<li><span id="reftres"><span class="ref">Ref[3]</span></span><a href="http://www.criarweb.com/artigos/propriedade-background-origin-de-css3.html">Criarweb - Background-origin</a></li></ul>Unknownnoreply@blogger.com4tag:blogger.com,1999:blog-2284641325081839836.post-56407872277840002122010-07-29T16:55:00.020-03:002015-01-29T09:21:02.389-02:00Redimensionar imagem com CSS - background-sizeNeste tutorial veremos como redimensionar imagens usando <abbr title='Cascading Style Sheets'>CSS</abbr>, através da propriedade "background-size".<br />
<br />
<div class="hidepic">
<img alt='CSS3 background-size' src='https://lh6.googleusercontent.com/_gkCCEPUJN58/Ta2lBDsUxVI/AAAAAAAABeM/RTqEHAqCO4I/pumpkin_css.jpg' title='CSS3 background-size' style='width:520px; height:250px;'/><br />
<span class='img-description'>Imagem por: <a href='http://www.flickr.com/photos/mauriz/4059476052/in/photostream/'>mauricesvay</a></span></div><br />
<br />
Se a imagem que será redimensionada estiver em uma tag html <img src="..."/>, utilizamos width e height na própria tag ou no CSS:<br />
<blockquote><span class='hide'>/* Créditos: 10calco.blogspot.com */</span><br />
seletor img {<br />
width:xx; /* largura */<br />
height:xx; /* altura */<br />
}<br />
<br />
</blockquote>Porém se a imagem estiver no CSS, como no exemplo abaixo:<br />
<blockquote><br />
#div {<br />
background-image: url(imagem.jpg);<br />
}<br />
<br />
</blockquote>Usaremos o <strong><em>background-size</em>.</strong> E nosso exemplo fica assim:<br />
<blockquote><br />
#div {<br />
background-image: url(imagem.jpg);<br />
<strong>background-size:100% 100%;<br />
-webkit-background-size: 100% 100%;<br />
-o-background-size: 100% 100%;<br />
-khtml-background-size: 100% 100%;<br />
-moz-background-size: 100% 100%;</strong><br />
}<br />
<span class='hide'>/* Créditos: 10calco.blogspot.com */</span><br />
</blockquote>Os valores 100% 100% representam respectivamente largura e altura, que devem ser alterados para os valores desejados nas cinco linhas.<br />
<br />
Lembrando que essa é uma técnica de CSS3 que ainda não está totalmente funcional, então por isso foram acrescentados os códigos "<u>-webkit-</u>", "<u>-o-</u>", "<u>-khtml-</u>" e "<u>-moz-</u>".<br />
<br />
<span class='postnote'>-09/09/2010: Acrescentado propriedade "-moz-background-size", o que torna o código funcional com Mozilla Firefox.</span><br />
<br />
<br />
Esta técnica não funciona no Internet Explorer, para isso veja:<br />
<ul><li><a href='http://10calco.blogspot.com/2011/03/redimensionar-imagem-no-ie-com-csshtml.html'>redimensionar imagens no ie com css e html.</a></li>
</ul><br />
Links recomendados:<br />
<ul><li><a href="http://www.css3.info/preview/background-size/">CSS3 Info - background-size</a></li>
<li><a href="http://www.w3.org/TR/css3-background/#the-background-size">W3C - background-size</a></li>
</ul>Unknownnoreply@blogger.com21tag:blogger.com,1999:blog-2284641325081839836.post-52806758333998338792010-07-06T16:45:00.011-03:002015-01-29T09:21:31.801-02:00Como colocar fundo degrade no bloggerAlterar o background do blogger é muito fácil mesmo para quem não conhece muito (ou nada) de html.<br />
<br />
Para começar acesse: Painel de Controle > Design > e clique em <b>Editar Html</b>.<br />
Em seguida localize o trecho:<br />
<blockquote><br />
body {<br />
<b>background:$bgcolor;</b><br />
margin:0;<br />
color:$textcolor;<br />
font:x-small Georgia Serif;<br />
font-size/* */:/**/small;<br />
font-size: /**/small;<br />
text-align: center;<br />
}<br />
<br />
</blockquote>O que nos interessa no momento é a parte em negrito, que deverá ser substituída pelo código a seguir:<br />
<blockquote><br />
background:#FFFFFF url("Endereço da imagem") <br />
top repeat-x fixed;<br />
<br />
</blockquote><strong>Onde:</strong><br />
#FFFFFF = cor de fundo;<br />
url("Endereço da imagem") = endereço da imagem (oh!);<br />
top= é a posição da imagem;<br />
repeat-x = indica que a imagem irá repetir horizontalmente;<br />
fixed = mantem a imagem fixa na página mesmo com o rolamento da mesma.<br />
<br />
<strong>» Exemplo 1, degradê horizontal:</strong><br />
<blockquote><br />
body {<br />
background:#FFFFFF url("http://lh4.ggpht.com/_gkCCEPUJN58/TDPHpL6QyKI/AAAAAAAABBU/NPdTPCr2WZ8/02.png") top repeat-x fixed;<br />
margin:0;<br />
...<br />
...<br />
}<br />
<br />
<div><img alt="Exemplo Degradê horizontal" height="200px" src="http://lh4.ggpht.com/_gkCCEPUJN58/TDPHpL6QyKI/AAAAAAAABBU/NPdTPCr2WZ8/02.png" title="Exemplo Degradê horizontal" width="200px" /></div><br />
</blockquote><br />
<strong>» Exemplo 2, degradê vertical(repeat-y), partindo da esquerda(left) para o centro:</strong><br />
<blockquote><br />
body {<br />
background:#000000 url("https://lh4.googleusercontent.com/_gkCCEPUJN58/TW5dFiezkNI/AAAAAAAABXw/VftXI7m7-iI/01.png") left repeat-y fixed;<br />
margin:0;<br />
...<br />
...<br />
}<br />
<br />
<div><img alt="Exemplo Degradê vertical" height="200px" src="https://lh5.googleusercontent.com/_gkCCEPUJN58/S8kBsUQmQLI/AAAAAAAAAow/4dd-I50IC6k/02.png" title="Exemplo Degradê vertical" width="200px" /></div><br />
</blockquote>Fácil não?<br />
<br />
<em>Essa dica foi baseada no tutorial do Maujor em: <a href="http://maujor.com/dicas/bgdegrade.php">http://maujor.com/dicas/bgdegrade.php</a></em>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2284641325081839836.post-92184618982917358552010-05-28T10:03:00.023-03:002015-01-29T09:21:58.732-02:00Tutorial Hijackthis: como instalar, gerar logs e eliminar itens maliciososHijackthis é um programa muito útil e prático para eliminar pragas que prejudicam o computador ou apenas fazer uma análise do sistema. Ele não é um antivírus mas sim uma ferramenta auxiliar.<br />
Sua principal utilidade é a geração de logs com os processos e registros executados no computador e a capacidade de eliminar os indesejáveis, como será tratado neste tutorial.<br />
<br />
<h1>1-Download e instalação.</h1><br />
Para baixar o programa <a href="http://free.antivirus.com/hijackthis/">clique aqui</a>. Você pode baixar o instalador ou apenas o executável.<br />
<span style="color: red; font-weight:bold;">ATENÇÃO!</span>: <u>o Hijackthis deve rodar em sua própria pasta para poder fazer backups de segurança</u>, caso baixe o executável crie uma pasta no diretório 'arquivos de programas' com o nome 'Hijackthis' e coloque o arquivo ai, se optar pelo instalador ele cria uma pasta automaticamente em '...\Arquivos de programas\Trend Micro'<br />
<br />
<h1>2-Gerar Log.</h1><br />
Para gerar o log execute o programa e clique em <strong>Main Menu</strong>;<br />
<br />
<img src="http://lh3.ggpht.com/_gkCCEPUJN58/S_-5qEBnTXI/AAAAAAAAA18/1o0ULaFSfCE/s576/hijackthis%201.JPG" alt='Hijackthis' /><br />
<br />
Em seguida em <strong>Do a system scan and save a logfile</strong>;<br />
<br />
<img src="http://lh4.ggpht.com/_gkCCEPUJN58/S_-5HqHG0eI/AAAAAAAAA14/kJ8i1mdhHtc/s576/hijackthis%202.JPG" alt='Hijackthis' /><br />
<br />
<h1>3-Eliminar possíveis problemas.</h1><br />
Após gerar o log se você tiver conhecimento sobre os processos pode enviá-lo para <a href="http://hijackthis.de/">http://hijackthis.de/</a> e se for preciso eliminar algum item basta selecioná-lo e clicar em <strong>Fix checked</strong>;<br />
<br />
<img src="http://lh5.ggpht.com/_gkCCEPUJN58/S__FSmj_RAI/AAAAAAAAA2A/nctpWMQKDRA/hijackthis%203.JPG" alt='Hijackthis' /><br />
<br />
Ou então envie o log para um dos vários fóruns sobre computadores na internet para um diagnóstico mais seguro.<br />
<br />
<br />
<a href="http://free.antivirus.com/hijackthis/">Download Hijackthis</a>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2284641325081839836.post-53102648615179343952010-04-13T20:07:00.021-03:002015-01-29T09:22:32.419-02:003 programas para melhorar o desempenho do seu computadorTrês sugestões de programas gratuitos para limpar e reparar seu computador, melhorando o desempenho e aumentando sua segurança.<br />
<br />
<h1>MV RegClean</h1><br />
<span class="postnote">- 27/07/2012: <strong>ATENÇÃO!</strong><br />
MV Reg Clean está temporariamente desrecomendado devido a causar possível corrompimento de registro.<br />
Vide links, além de experiência própria com o problema:<br />
<br />
<a href='http://forum.clubedohardware.com.br/resolvido-nao-consigo/912287#8'>http://forum.clubedohardware.com.br/resolvido-nao-consigo/912287#8</a><br />
<a href='http://forum.clubedohardware.com.br/resolvido-nao-consigo/945243'>http://forum.clubedohardware.com.br/resolvido-nao-consigo/945243</a><br />
</span><br />
<s><br />
Limpador de registros gratuito, uma excelente opção para limpar os "entulhos" que se acumulam no HD com o passar do tempo.</s><br />
<br />
<a href="http://velasco.com.br/velasco/html/produto.php?id=1"></a><br />
<br />
<h1>Ccleaner</h1><br />
Além de limpar os registros do windows ele também remove dados memorizados da internet como cache, coockies e histórico. O Ccleaner também conta com um desinstalador de programas e um gerenciador de programas que iniciam com o windows, além de ser gratuito e contar com uma interface agradável.<br />
<br />
<a href="http://www.piriform.com/ccleaner">Download Ccleaner</a><br />
<br />
<h1>Advanced SystemCare Free</h1><br />
Advanced SystemCare é um aplicativo com várias ferramentas que visam melhorar o desempenho do windows, limpar dados pessoais, eliminar spywares dentre outras funções. Ele é um programa gratuito, mas conta com uma versão paga caso o usuário queira algumas vantagens a mais.<br />
<a href="http://www.baixaki.com.br/info/1393-como-usar-o-advanced-systemcare.htm">Neste link</a> há um artigo feito pelo Baixaki sobre o Advanced SystemCare que explica algumas dessas funções. Vale lembrar que o artigo é sobre uma versão antiga do programa, mas da para ter uma idéia de como ele funciona.<br />
<br />
<a href="http://www.iobit.com/advancedwindowscareper.html">Download Advanced SystemCare</a>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-2284641325081839836.post-50582161937529439452010-04-06T20:47:00.020-03:002015-01-29T09:22:37.845-02:00Como transformar imagens em linksEsse é um dos primeiros códigos HTML que se aprende e um dos mais usados.<br />
A tag "<img src=>" pode ser utilizada para postar apenas imagens ou para ancorar uma imagem com um link, como visto nos exemplos abaixo.<br />
<br />
<h1>Postar somente imagens.</h1><blockquote><img src="<span style="color: blue;">'Endereço da imagem'</span>"/><br />
</blockquote>Exemplo:<br />
<blockquote><br />
Código:<br />
<br />
<img src='https://lh4.googleusercontent.com/_gkCCEPUJN58/TW5r1dUg2mI/AAAAAAAABX8/IItIvKacvs4/linkar.jpg'/><br />
<br />
Resultado:<br />
<br />
<img src='https://lh4.googleusercontent.com/_gkCCEPUJN58/TW5r1dUg2mI/AAAAAAAABX8/IItIvKacvs4/linkar.jpg' title='Linkar imagens' alt='Linkar imagens'/><br />
<br />
</blockquote><h1>Transformar uma imagem em link.</h1>Usamos a tag "<img src=>" junto com a tag "<a href=>" :<br />
<blockquote><a href="<span style="color: blue;">'Link Aqui'</span>"><img src="<span style="color: blue;">'Endereço da imagem'</span>"/></a><br />
</blockquote>Exemplo: (Link para a home do blog)<br />
<blockquote>Código:<br />
<br />
<a href='http://10calco.blogspot.com/'><img<br />
src='https://lh4.googleusercontent.com/_gkCCEPUJN58/TW5r1dUg2mI/AAAAAAAABX8/IItIvKacvs4/linkar.jpg'/></a><br />
<br />
Resultado:<br />
<br />
<a href='http://10calco.blogspot.com/'><img src='https://lh4.googleusercontent.com/_gkCCEPUJN58/TW5r1dUg2mI/AAAAAAAABX8/IItIvKacvs4/linkar.jpg' title='Imagem linkada' alt='Linkar imagens'/></a><br />
</blockquote><br />
Se quiser linkar um palavra ou escolher onde o link abrirá acesse: <a href='http://10calco.blogspot.com/2010/04/como-postar-palavras-e-imagens-com.html'>Como transformar palavras em links</a>.Unknownnoreply@blogger.com3tag:blogger.com,1999:blog-2284641325081839836.post-41406028926704869812010-04-06T20:46:00.026-03:002015-01-29T09:22:41.452-02:00Como transformar palavras em linksPara transformarmos palavras em links colocamos a palavra a ser linkada dentro da tag "<a href=></a>" da seguinte maneira:<br />
<br />
<blockquote><a href="<span style="color: blue;">Link Aqui</span>">"<span style="color: blue;">Palavra aqui</span>"</a><br />
</blockquote><br />
<h1>Escolher onde o link vai abrir.</h1><br />
Podemos escolher onde nosso link vai abrir usando a variável "<strong>target=_</strong>".<br />
Tratarei aqui dos dois principais atributos dessa variável: "_self" e "_blank".<br />
<br />
<strong>target=_self</strong>: faz o link abrir na mesma página. Mesmo efeito tem se não for utilizada a variável target=_.<br />
<br />
<strong>target=_blank</strong>: um dos atributos mais polêmicos dentre todos os códigos HTML, faz o link abrir em outra janela.<br />
<br />
<br />
-<strong>Exemplos:</strong><br />
<br />
Para abrir na mesma página:<br />
<blockquote><a href="<span style="color: blue;">http://www.google.com.br/</span>"<b> <span style="color: red;">target="_self"</span></b> ><span style="color: blue;">"Google"</span></a><br />
ou<br />
<a href="<span style="color: blue;">http://www.google.com.br/</span>"><span style="color: blue;">"Google"</span></a> <br />
<br />
=<br />
<br />
<a href="http://www.google.com.br/" target="_self" title='Abre na mesma página'>Google</a><br />
</blockquote><br />
Para abrir em outra página:<br />
<blockquote><a href="<span style="color: blue;">http://www.google.com.br/</span>"<b> <span style="color: red;">target="_blank"</span></b> ><span style="color: blue;">"Google"</span></a><br />
<br />
=<br />
<br />
<a href="http://www.google.com.br/" target="_blank" title='Abre em outra página'>Google</a><br />
</blockquote><br />
Se quiser linkar um imagem acesse <a href='http://10calco.blogspot.com/2010/04/como-transformar-imagens-em-links.html'>Como transformar imagens em links</a>.Unknownnoreply@blogger.com4tag:blogger.com,1999:blog-2284641325081839836.post-49268609455520586312010-04-02T01:01:00.016-03:002015-01-29T09:22:46.227-02:00Editor de Imagens onlineUma ótima opção para quem quer editar ou criar imagens sem baixar nenhum programa é o <b>Sumopaint</b>. Ele é um editor de imagens online, gratuito e o cadastro no site é opcional, tudo que você precisa é acesso a internet.<br />
<br />
Obs:<u> Há um bug ao utilizar o botão "desfazer",que as vezes apaga todo o trabalho feito, por isso é recomendável ir salvando sempre que possível.</u><br />
<br />
<a href="http://www.sumopaint.com/home/">Clique aqui para ir ao site do Sumopaint</a><br />
<br />
Imagens:<br />
<a href="http://4.bp.blogspot.com/_gkCCEPUJN58/S7VphBQbbyI/AAAAAAAAAfA/W9SOrb96Nlg/s1600-h/Sumopaint01.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img title="Sumopaint - Editor de Imagens online" src="http://4.bp.blogspot.com/_gkCCEPUJN58/S7VphBQbbyI/AAAAAAAAAfA/W9SOrb96Nlg/s400/Sumopaint01.jpg" border="2" height="250" width="400" alt="Sumopaint - Editor de Imagens online"/></a><br />
<p><a href="http://2.bp.blogspot.com/_gkCCEPUJN58/S7VphNRfl5I/AAAAAAAAAfE/sepivf1vrQk/s1600-h/Sumopaint02.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="2" height="250" src="http://2.bp.blogspot.com/_gkCCEPUJN58/S7VphNRfl5I/AAAAAAAAAfE/sepivf1vrQk/s400/Sumopaint02.jpg" width="400" title="Sumopaint - Interface"/ alt="Sumopaint - Interface"></a>Unknownnoreply@blogger.com0