Último Post deste Blog!

Não, não se assuste, isso não significa que o InsideWebDev acabou!

Acontece que mudamos para o sistema wordpress, para que o blog fique melhor e com mais opções, o novo blog pode ser acessado no endereço:

http://insidegui.freehostia.com/insidewebdev/

Performancing

Conheci hoje, através do Fecha Tag a ferramenta Performancing, um add-in para o Firefox que permite a você postar para seu blog diretamente do browser, através de um editor, sem a necessidade de entrar no sistema de administração do blog.

Entre os sistemas de blog suportados estão o Wordpress, Windows Live Spaces, Blogger, Live Journal, entre outros...

Este post está sendo escrito através da mesma, se ele chegar ao ar significa que o sistema funciona ^^

Recomendo à todos os blogueiros, vale a pena a instalação, e se você ainda não tem Firefox, o que está esperando para instalar?

Abraços e até mais!

powered by performancing firefox

Video #2 - Implementação de layout CSS

Como estou trabalhando em ritmo de produção aqui no meu estúdio, já que esta todo o equipamento montado, aproveitei pra fazer mais um video, dessa vez um pouco mais avançado e comprido.

Nesse video eu mostro toda a implementação de um layout, apenas o css, vale a pena esperar o download e conferir.

No tutorial você pode conferir ainda algumas técnicas de css, como image replacement, também utilizei na pratica a tecnica de css sprites que espliquei no ultimo video, como solucionar o problema da margem duplicada no IE6 e como fazer elementos com float aumentarem o elemento pai.

Duração - 45:14 min

Tamanho - 57 mb(é grande mas a qualidade está boa)

Formato: AVI(compactado num RAR)

Para baixar o tutorial, click aqui.

Quem estiver tendo problemas para ver o video, experimente baixar esse codec: http://download.techsmith.com/tscc/tscc.exe

Vídeo #1 - CSS Sprites

No primeiro video-tutorial do Inside.Web.Dev, vou mostrar esta tecnica que muita gente nem conhece, mas que é bastante útil: CSS Sprites.

Vamos fazer no tutorial um botão com 2 estados apenas para demonstrar a tecnica.

Não reparem minha locução "perfeita"(rsrs) , mas é o primeiro tutorial com narração que faço.

Apesar de tudo, acredito que tenha ficado bom e explicativo.

Abraços e até mais!

Duração - 04:01

Tamanho: 6.1mb

Formato: AVI(COMPACTADO NUM RAR)

Para baixar o tutorial: CLICK AQUI

Quem estiver tendo problemas ao ver o video, experimente baixar esse codec: http://download.techsmith.com/tscc/tscc.exe

Google suspende pagamento do Google AdSense a webmasters brasileiros

"O Google suspendeu temporariamente o pagamento a webmaster no Brasil por seu sistema de propaganda online Google AdSense, graças a suspostos problemas do buscador com o governo brasileiro na emissão do dinheiro."

LER NOTÍCIA COMPLETA

Graças á isso vocês tem agora um blog totalmente livre de propagandas, até voltarem os pagamentos ^^

Bloquear o YouTube virou moda?

Vejam esta notícia: http://tecnologia.terra.com.br/interna/0,,OI1347167-EI4795,00.html
A minha pergunta é? Bloquear YouTube.com virou mania mundial?

Na minha sincera opinião, bloquear um site por motivos religiosos, ou por motivos idiotas(cicarelli) é..... IDIOTICE!

Deixe aqui a sua opinião sobre esses fatos. O que você pensa da censura? Acha que o YouTube vai sair do ar?

Teh Mais!

Como deixar png transparente no IE6

Olá gente, estou aqui hoje para solucionar um mistério! Muita gente insere png's com fundos transparentes em suas páginas, porém, no Internet Explorer 6, estas imagens são exibidas com um fundo cinza, ao invés da transparência esperada.

Então o Guilherme Medeiros me passou um link que ensinava a deixar as png's transparentes mesmo no IE6, trata-se de um tutorial em inglês, que muita gente não consegue entender, e confesso que eu mesmo tive uma certa dificuldade para realizá-lo.

Então entendam esse meu tutorial não como uma tradução, e sim uma adaptação do original, pois eu li, entendi, acrescentei algumas coisinhas a mais, e estou repassando esse conhecimento.

Vamos lá, antes de mais nada, observe o resultado desse tutorial. Observe que há duas imagens, uma está inserida pelo css(com o filtro que faz ficar transparente), e a outra está normal, com um elemento "img". Se você abre esta pagina no Firefox, por exemplo, as duas imagens aparecem normalmente, porque o firefox tem suporte ao png transparente sem a necessidade de filtros, ja abrindo no IE6 você vê que a imagem com o filtro está normal, já a imagem diretamente com o "img" está apresentando o fundo cinza. Vamos ver então como fazer isso.

O código é o seguinte:

<h1>PNG com o filtro:</h1>
<div id="imagem"></div>
<h1>PNG adicionada como imagem normal:</h1>
<img src="png.png" alt="Png normal" />

Vamos esplicar então, aquela div ali com o id #imagem é a div onde nós iremos aplicar o png com o filtro via css, então no caso, faça de conta que ela é uma "img especial" ^^

Após temos apenas a inserção da imagem diretamente com o elemento img, que no IE6 será apresentada com aquele fundo cinza.

Agora vou mostrar qual é o css que faz a mágica do png transparente:

div#imagem {
background:url(png.png) no-repeat center center;
_background:none!important;
width:250px;
height:250px;
position:relative;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='png.png',sizingMethod='scale');
}

Vamos entender este css, na primeira linha estou colocando o png de fundo na div, porém esse background naum deve ser exibido no IE6, esse background é só para os outros browsers, que exibem o png normalmente e não necessitam de filtro, é com o filtro que nós iremos inserir o png no IE6, por isso que logo após o background temos um _background(hack), que somente será interpretado pelo IE6.

As próximas 3 linhas são apenas definição de posição e dimensões, a última linha é a que mostra o png transparente no IE6, ela é que faz toda a mágica.

É isso pessoal, espero que não tenham ficado dúvidas, qualquer coisa me perguntem! Abraços