Unplug: Esse addon faz a captura de video e audio de um site para download.
Como usar?
Para acessá-lo, basta clicar com o botão direito do mouse em uma área livre do site e clicar na opção Unplug, feito isso o Unplug irá escanear o site a proucura de alguma midia, caso encontre sugirá uma lista das midias, dai basta clicar em download.
DownThemAll! é um complemento para o Mozilla Firefox que funciona como um gerenciador e acelerador integrado de download ao navegador, permitindo aos usuários também pausar e continuar os downloads a qualquer momento.
Como usar?
Ao aparecer janela de confirmação ao iniciar um download, você terá a opção de escolher fazer o download normalmente ou utilizar o complemento DownThemAll!.
Olá pessoal neste post estarei mostrando como fazer uma galeria de imagem com CSS puro. Este exemplo foi baseado no exemplo do site http://www.dynamicdrive.com, neste site foi usado o pseudo-elemento :hover, porém eu usei o :active, fazendo com que a imagem só amplie de tamanho quando clicada, fiz também outras modificações para adaptar melhor ao IE6 e ao Opera. Falando em IE6(esta porcaria), o efeito do :active tem uma pequena diferença dos outros navegadores, no IE6 quando a imagem for clicada ela irá ampliar normal, mas quando o botão do mouse deixar de ser pressionado a imagem permanece ampliada e nos outros navegadores(Firefox, Opera, Safari, Chrome, IE7…) a imagem some para o usúario escolher outra, não consegui descobrir um jeito para consertar isso, se alguem descobrir é só falar ai nos comentários que eu adicionarei com os devidor créditos!
Bom vamos ao que interessa…
A estrutura do arquivo (X)HTML ficaria assim:
[...]
<div id="galeria">
<small>Clique na miniatura para aumentar a imagem</small><br /><br />
<a class="thumb" href="#thumb">
<img src="imagens/thumb_image1.jpg" alt="" />
<span>
<img src="imagens/1.jpg" alt="" />
</span>
</a>
</div>
[...]
Onde dentro do <a> vai ficar as duas imagens, o thumbnail(miniatura) e imagem com tamanho maior(recomendo 400×300, ou aproximado),o thumbnail será a imagem clicada que recebe um link “cego” a imagem maior fica dentro de um <span> onde será feito a “mágica” com css, para aparecer quando for chamada, segue a “mágica”
Arquivo CSS:
*{padding:0;margin:0;}/*deixar margem e padding dos elementos com padrão zerado*/
small{font-size:12px; font-weight:bold;color:#333;}/*formata a mensagem de como visualizar as imagens*/
#galeria{background-color:#9FCBFF;position:relative;width:720px;margin:25px auto;padding:10px;text-align:center;}/*div pai, que englobará as imagens*/
a.thumb img{background-color:#fff;border: 1px solid #999;padding:3px;}/*estiliza as miniaturas*/
a.thumb span{position:absolute;background-color: #000;padding: 10px;left:-10000px;visibility: hidden;color: black;text-decoration: none;}/*começa a mágica*/
a.thumb:active span{visibility:visible;top: 50px;left: 120px;z-index: 50;}/*termina a mágica!*/
As declarações CSS principais para o efeito são:
a.thumb span:
left:-10000px; – Joga as iamgens que estão sentro do <span> para -10000px do monitor, sendo assim esconde do campo de visão
visibility: hidden; – Simplesmente desaparece com a imagem
a.thumb:active span:
visibility: visible; - Faz a imagem aparecer quando a miniatura for clicada, ativando o pseudo-elemento :active
z-index: 50; – poe a imagem maior sobre as miniaturas
top: 50px; e left:120px; – posiciona a imagem maior na tela
Vira e mexe aparece uma campanha para acabar de vez com o IE6 (carinhosamente chamado de IEca 6), realmente são varias as campanhas, cito algumas como: http://www.stopie6.org/ , http://www.end6.org/ e a mais recente a do Imaters, os principais problemas do IE6 são na questão da segurança e no suporte aos Padrões Web, dificultando muito o desenvolvimento de layouts compativeis com os outros navegadores. o IE6 já tem 8 anos de vida e não suporta mais as técnologias atuais.
As campanhas vem dando efeito e deve ser mais divulgada, porque o número de úsuarios continua alto(cerca de 34%, fonte: http://www.thecounter.com/stats/2009/January/browser.php), esses úsuarios são pessoas leigas, que as vezes nem sabe que existem outros navegadores e/ou versões mais recentes do mesmo, mas com o tempo esses numeros vão diminuir involuntáriamente, pois os computadores de hoje já são vendidos com as versões novas dos navegadores, porém não podemos depender do tempo pra isso, então “mãos a massa”.
Infelismente e não vou poder colocar os scripts da campanha, por que o wordpres.com limita o uso de JavaScript(aliás poderiamos fazer uma campanha para liberar o uso de JavaScript aqui no WordPress.com, rs), mas como o foco da campanha visa os navegadores atuais e não o script da campanha em si, eu vou deixar os link para você que ainda vive no passado, atualizar seu navegador e usufluir melhor da web.
Continuando a “saga sem fim” dos addons para Firefox, nesse 4ª “episódio” mostrarei mais 3 complementos interessante para turbinar sua raposa, lá vai então:
Thumbstrips: Esse addon, armazena na parte inferior do seu Firefox todo o histórico de visitação das paginas com thumbnails(imagem em miniatura), ordenadas por tempo e com a opção de filtro, busca, bloqueio de site. Resumindo o Thumbstrips é como um historico, mas com a opção de pré-visualizar as ultimas páginas, com mais rapidez e precisão.
Como usar?
Para acessá-lo e/ou escondê-lo, basta clicar no icone que fica na parte direita da barra de status.
O Flashblock é muito utilpara usuários que não tem internet banda-larga, pois como o próprio nome diz, ele bloqueia todo conteudo em flash que está na página, evitando assim o carregamento desnecessário do mesmo, e consequentemete diminuindo o tempo de carregamento da página.
Como usar?
Para visualizar o conteudo basta clicar sobre o logotipo do flash, que se encontrará no lugar do flash bloqueado.
O ColorZilla permite capturar qualquer cor de uma página, ele disponibiliza o código em HSV, RGB e Hexadecimal, bem util para nós que sempre buscamos aquela tonalidade perfeita!
Como usar?
Para capturar a cor, basta clicar no icone do lado esquerdo da barra de status(onde tem um conta-gotas) e depois clicar no local desejado, feito isso clique 2 vezes novamente no icone, que aparecerá uma paleta com a cor selecionada e as cores semelhantes, além é claro dos códigos das cores.
