Mostrando postagens com marcador Dicas. Mostrar todas as postagens
Mostrando postagens com marcador Dicas. Mostrar todas as postagens

AutoRefresh nas páginas: Evite essa chatisse



Diversos sites adotam a técnica: adicionar uma pequena metatag no código da página para que, de tempos em tempos, o navegador automaticamente recarregue o conteúdo por completo. Podem ser dez minutos, bem como dois minutos, isso depende do proprietário do site. O AutoRefresh incomoda muita gente, mas tem seu motivo de existir, como eu explico mais abaixo – e também explico como desativá-lo em alguns navegadores, então fique ligado.

Por Thássius Veloso, do Tecnoblog


Eu vejo dois motivos para que um site adote o recarregamento automático das páginas. Primeiro e mais provável de todos, para gerar novos pageviews e assim inflar as estatísticas do domínio. A maioria dos sites vive de publicidade, inclusive este aqui que você está lendo. Vendemos espaços em nossas páginas para os anunciantes, que compram impressões (de anúncios). A cada vez que a página é carregada, conta mais uma exibição de anúncio.

Não é tão simples assim. A publicidade na rede depende de outros fatores, como tempo de navegação, taxa de rejeição e daí por diante. Anunciantes tentam combinar esses fatores na hora de escolher em que veículo colocam suas propagandas. Pageviews entram na conta – quanto mais, melhor para o site.

O outro motivo, dessa vez mais idealista, é manter o conteúdo sempre atualizado. Digamos que você está num site de jornal e quer as notícias frescas. Se esquecer o navegador aberto enquanto executa outra tarefa (Trabalhar, que tal?), ao voltar nele depois de duas horas é bem provável que você queira ver as notícias atualizadas. O AutoRefresh dá uma mãozinha nessa aspecto. Por outro lado, pode ser usado também em páginas de matérias – quem nunca se perdeu em uma leitura depois que o browser recarregou sozinho? Aí incomoda mesmo.

Desativar o AutoRefresh

Para nossa alegria, desativar o AutoRefresh é moleza em diversos navegadores. Eles vêm de fábrica com ajustes para evitar o carregamento forçado. Pena que o Chrome, justo aquele que mais leitores do Tecnoblog utilizam, não oferece a tal opção. Começando pelo browser do Google, a dica é instalar a extensão Stop AutoRefresh, criada por um espanhol. Já que o Chrome não oferece um jeito fácil de desativar a metatag do carregamento, foi preciso interceptar algumas chamadas, verificar se elas vêm do AutoRefresh, para em seguida rodar um pequeno código que evita o primeiro AutoRefresh. Os demais também são evitados.

Extensão Stop AutoRefresh no Chrome

Extensão Stop AutoRefresh no Chrome

No Firefox (versão 14.0), o segundo navegador mais usado por aqui, é simples: vá em Ferramentas > Opções > Avançado. Marque a opção “Alertar se sites tentarem redirecionar ou recarregar a página”.

Firefox

Simples de fazer

E agora no Internet Explorer (versão 9), o navegador da Microsoft que muita gente continua usando: clique no botão de configurações (fica ao lado da “estrela” que indica favoritos) > Opções da Internet > Segurança > Nível Personalizado > procure por “Permitir META REFRESH” e marque a opção “Desabilitar”.

Internet Explorer: também simples

Internet Explorer: também simples

Quem utiliza o Opera , da Opera Software, vá no botão Opera > Configurações > Avançado > Rede > desmarque a opção “Habilitar redirecionamento automático”.

Opera

Opera

Aqui a nossa intenção não é demonizar os sites que adotam o AutoRefresh, qualquer que seja o motivo alegado para isso. O internauta tem a possibilidade de desativar a metatag que permite o carregamento automático.

Curso de Corel Draw online

Você gostaria de saber fazer no computador desenhos artísticos e publicitários?
Quer criar estampas para camisetas, logotipos, capas de revistas, livros, CDs e DVDs?
Precisa desenvolver cartazes, folders, flyers e banners?
E que tal criar botões, ícones e animações gráficas para aplicar em páginas da Internet?
Você sabia que tudo isso se faz com um programa chamado Corel Draw, que revolucionou o setor desde que foi lançado pela Corel Corporation?
Profissionais bem qualificados no uso do Corel Draw são raros no mercado e normalmente muito bem remunerados.
O Curso de Corel Draw é feito de forma passo-a-passo para que mesmo os iniciantes possam aprender a usar esta poderosa ferramenta.
De bônus, totalmente grátis, ao final do curso você aprende a fazer uma home-page com o Corel Draw.
O curso é inteiramente online, com muitos exemplos e acompanhamento de tutores para tirar dúvidas.

Os principais tópicos do Curso de Corel Draw são:
  • Introdução
  • Tela de Apresentação
  • Desenhando figuras simples
  • Linhas curvas
  • Figuras geométricas
  • Configurando Páginas
  • Desenhando e tranformando
  • Usando a ferramenta forma
  • Preenchimentos e Contornos
  • Comandos interativos
  • Efeitos sobre o objeto
  • Girando e Inclinando
  • Espelhando objetos
  • Duplicar e Clonar
  • Ordenando Objetos
  • Alinhando e distribuindo
  • Editando Texto
  • Correção Ortográfica
  • Texto artístico
  • Texto com figuras
  • Texto 3D
  • Efeitos especiais
  • Efeito contorno
  • Efeito envelope
  • Efeito extrusão
  • Efeito lente
  • Efeito misturar
  • Efeito Powerclip
  • Adicionar perspectivas
  • Combinação de efeitos
  • Figuras e Símbolos
  • Efeitos sobre imagens de Bitmap
  • Efeitos 3D
  • Diversos outros efeitos
Bônus: Utilize o Corel Draw para criar um site na internet
  • Utilizando Corel Draw para Internet
  • Criando uma Home-Page


Depoimentos de quem já concluiu este curso



"O curso me ajudou a entender a utilização de muitas ferramentas do Corel Draw. Achei muito interessante o fato de poder armazenar o material do curso no computador, pois agora posso consultá-lo sempre que precisar para tirar dúvidas."

Fernando Odilon Lopes Santos - Vitória da Conquista/BA

 

Sexy Lightbox e Color Box - Dois clones do Lightbox clássico

 

Vamos falar nesse post sobre dois plugins de jQuery para utilização de exibição de imagens e galerias.
 São eles o Sexy lightbox e o Bolor Box. Eu utilizo na maioria das vezes em meus projetos o Color Box pois é praticamente uma cópia identica do Lightbox clássico...Vamos às apresentações:

Sexy Lightbox

Esse plugin é uma versão mais leve e mais 'sexy', -como o próprio nome diz- do Lightbox clássico. 
Podemos considerar sua simples instalação uma grande vantagem para nós Webdesigners. Além disso esse plugin jQuery é compatível com HTML, isso significa que podemos exibir elementos, páginas, vídeos, etc... enfim, tudo que quisermos!!

Veja como são exibidos os elementos com Sexy Lightbox:





Imagens grandes são ajustadas automaticamente para a janela. Lightbox Sexy  requer Mootools 1.2.3 ou  jQuery 1.3.2, e é compatível com todos os navegadores modernos (e Internet Explorer!...)

Gostou?  
Licença : MIT License

Color Box 

Agora vamos falar do Color Box que também se parece muito com o Lightbox.
Ele suporta imagens, galerias, agrupamento de imagens, ajax, conteúdo e também iFrames.
Podemos controlar sua aparência via CSS modificando a janela de exibição.
Imagens de fundo Preloads, e pode carregar imagens programadas em um grupo de fotos. 
Liberado sob a licença MIT.


Testado em: Firefox 3 +, Safari 3 +, Opera 9 +, Chrome, Internet Explorer 6, 7, 8.
 
Legal não é?


Bom pessoal, mais uma dica do Blogão do Design, espero que gostem e aproveitem!!
Abraços

Documentação Visual jQuery



Para voce desenvolvedor jQuery que ainda não conhece a documentação Visual jQuery, vale a pena conferir! Você pode salvar a página em seu computador e acessar também localmente, vendo inclusive os exemplos funcionando!

Acesse http://visualjquery.com/ e bons estudos!! Um Webdesigner hoje precisa saber jQuery para se destacar no mercado!!

É isso aí pessoal #ficadica

Abraços

@junim_ramos

Modelos de logotipos em vetor



Uma empresa sem logotipo é como um site sem domínio. É bom deixa claro que é fundamental que sua empresa tenha ambos para ser reconhecida nos dias de hoje.

A ferramenta SeekLogo é um grande banco de dados com modelos gratuitos (mais de 200 mil) de logotipos para você usar livremente e sem pagar nada. Uma característica interessante é que o site disponibiliza o download em vários formatos diferentes (inclusive em vetor). Vale a pena conferir...




Acesse o site http://www.seeklogo.com

Como centralizar uma DIV com CSS



Ainda surgem dúvidas quanto a essa questão: "Como centralizo minha div com css para que dê certo em todos os navagadores??"
Essa perguntinha fica martelando na cabeça de quem está começando com HTML/CSS, mas temos a solução!!
Veja abaixo, é tiro e queda e funciona em todos os nabegadores atuais, até no temido IE6...
Dúvidas? Posem nos comentários.... abraço a todos!


Bom, primeiramente vamos entender a teoria:

Afaste o objeto 50% do topo e da lateral esquerda. Feito isso recue a margem (topo e lateral esquerda) em metade de seu tamanho.
Confuso? Vamos à prática:
Supondo que você tenha uma div principal nesse exemplo denominada de geral, onde todos os objetos estarão dentro dela:

#geral {
position:absolute;
top:50%;
left:50%;
width:500px;
height:300px;
margin-left:-250px;
margin-top:-150px;
text-align:center;
}
O comprimento (width) e a altura (height) são variáveis, depende do tamanho da sua página. Deve-se ficar atento que em margin-left e margin-top é metade do valor negativo.
IMPORTANTE: Recebi vários e-mails de pessoas dizendo que o código margin:0 auto realiza a mesma função do que o código que descrevemos a cima. Mas lembrando que o margin:0 auto centraliza a página apenas horizontalmente. Já o código que vimos à cima centraliza tanto horizontalmente como verticalmente.

Aplicação:

<html>
<head>
<style>
#geral {
position:absolute;
top:50%;
left:50%;
width:500px;
height:300px;
margin-left:-250px;
margin-top:-150px;
text-align:center;
}
</style>
<body>
<div id="geral">TESTE</div>
</body>
</html>

Fonte: Sonaweb.com.br 

Piecemaker 3D Flash Slide: Como funciona?



Vimos por aí na internet muitos slides de imagens bem legais em jquery e outros...
Mas um slide em especial me chamou muito a atenção: O slide The Piecemaker2, um slide open source em Flash e xml que tem plugin até para Wordpress...

Andei estudando o código-fonte desse slide e gostei muito do seu funcionamento.

No site modularweb.net você confere o demo do slide além da documentação e tutorial de como usá-lo no seu código HTML, até mesmo no wordpress...

Para dar água na boca, confira o que o Piecemaker Flash 3D Slide nos oferece:

     * Ilimitados efeitos de transição
     * A capacidade de incluir arquivos SWF e vídeos
     * Melhor navegação (usando as dicas)
     * Sombras animadas

Também é inteiramente baseado em XML, HTML e o CSS foi melhorado em relação ao primeiro, permitindo que os caracteres especiais possam ser utilizados. Além disso, as imagens agora podem conter links para outros websites.

 
E no WordPress?

Muitos leitores queriam usar a galeria Piecemaker original em seus blogs WordPress - tanto que o site NETTUTS + publicou um tutorial (em inglês) explicando como fazer exatamente isso.

O Piecemaker 2 é open source, fique à vontade para baixá-lo, usá-lo em qualquer projeto que você gosta, aprender com ele, modificá-lo e melhorá-lo se você puder. Gostaríamos de ver o que você faz com ele.




Aqui vai um exemplo de arquivo HTML com o slide, tirado do site oficial:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>The Piecemaker by Modularweb</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="scripts/swfobject/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.cssSource = "piecemaker.css";
flashvars.xmlSource = "piecemaker.xml";
var params = {};
params.play = "true";
params.menu = "false";
params.scale = "showall";
params.wmode = "transparent";
params.allowfullscreen = "true";
params.allowscriptaccess = "always";
params.allownetworking = "all";
swfobject.embedSWF('piecemaker.swf', 'piecemaker', '1000', '600', '10', null, flashvars,
params, null);
</script>
</head>
<body>
<center>
<div id="piecemaker">
<p>Put your alternative Non Flash content here.</p>
</div>
</center>
</body>
</html>

Acesse o site oficial e faça o download...e divirta-se...



Como criar Texto Efeito Glass no Photoshop (inglês)




Tutotial bem legal que achei no site Designioustimes.com, que tem uma ampla variedade de tutoriais de Photoshop e Indesign...O site é em inglês, mas nada que o Google não faça ou se você entende um pouquinho já está de bom tamanho!!

Acesse o tutorial AQUI!

Abraços...

Alguns dos melhores plugins para menu com jQuery



Ei você que usa jQuery para seus projetos!!
Aqui vai uma dica bem legal que achei navegando por aí...

Uma lista com 10 dos melhores plugins para jQuery para menu de sites!!

"Escreva menos, faça mais."

jdMenu Hierarchical Menu Plugin for jQuery



O plugin jdMenu  para jQuery oferece uma solução limpa, simples e elegante para a criação de menus hierárquicos drop de sites para aplicações web.

Superfish – jQuery menu plugin by Joel Birch

 

Superfish jQuery é um menu melhorado estilo plugin que até da para criar com  CSSPuro drop-down.


jQuery Context Menu Plugin

 

 Um plugin de  menu de contexto para jQuery que apresenta facilidade de implementação, atalhos de teclado, estilo CSS, e métodos de controle.

jQuery Simple Drop-Down Menu Plugin

 

 


A peculiaridade deste menu são essas 20 linhas de código e ausência de vários eventos de mouse pesado dentro do código html.

LavaLamp jQuery mernu plugin

 

Este plugin implementa menu horizontal com um elegante efeito deslizante.  Esse, pra falar a verdade é o meu preferido entre todos desta lista!

jGlideMenu

 

jGlideMenu é um plugin jQuery que suporta as definições do menu embutido com AJAX e utiliza uma sintaxe mais fácil do que a versão original. Este também, muito interessante...

Emenu


 

Emenu foi projetado para criar uma largura fixa, uma queda de altura fixa no menu contido dentro de uma imagem de cabeçalho.

jQuery iPod-style Drilldown Menu

 

menu de pesquisa estilo iPod para ajudar os usuários a percorrer dados hierárquicos rapidamente e com controle. É especialmente útil quando a organização de grandes estruturas de dados que não traduzem bem em menus dropdown tradicionais ou fly-out. Bem legal...

jQuery menu plugin

 

Um menu jQuery. É um menu drop-down, que se comporta como um menu do aplicativo (clique para abrir, clique em fechar, fica aberto mesmo depois de pairar em outro lugar). Ele suporta a criação de menus através de marcação HTML ou através de JavaScript. O plugin tenta a sua posição de submenus dentro da área visível quando não há espaço suficiente na direita ou borda inferior.

Bom pessoal, aqui postei alguns plugin fáceis de usar quando for necessário criar menus de sites...
Se vocês tiverem alguma dúvida ou mais plugin que conheçam, comentem, deixem suas sugestões que ficaremos felizes!!

Abraço forte a todos...Se gostoou desse artigo, siga-me @junim_ramos

Siga-me no Twitter

 




 

 

 


 

 

 

 

 

Efeito rollover com imagens para menu com CSS


Boa tarde galera ligada no blogao!!
Tá aí uma dica bem legal e fácil para você criar os menus do seu site ou do seu cliente...
É o efeiton de rolloverr com imagens, onde a imagem fica no seu estado normal e quando passado o mouse ela muda de cor etc...

Tutorial bem legal retirado do site Criar Web.

O rollover (iluminação ou mudança de cor ao passar o mouse por cima) é um feito muito simples, porém, pode dar idéias para dar maior dinamismo ao nosso site, sem que isto afete a complexidade do código.

Ademais, de passo, vamos responder uma pergunta habitual: como fazer para que os links ocupem todo o espaço da célula ou camada onde estão situados? Ou dito de outra forma: como fazer para que o link se mostre com todo o espaço disponível dentro do container no que está?

O que desejamos é que o lugar onde colocamos o link se comporte como o próprio link, assim, ao passar o mouse pelo container onde estiver situado o link (não necessariamente sobre o texto do link), se realize o efeito de iluminação.

O melhor que podemos fazer é ver o exemplo em funcionamento. Vale a pena prestar atenção a que o link muda de cor ao passar o mouse encima, porém, não faz falta se situar sobre o texto do link para que mude, e sim que serve ao posiciona-lo sobre a camada onde foi colocado o link.

O código HTML

Para realizar este efeito foi criado um código HTML como o seguinte:

<div class=navegador>
<p class=navlink><a href="#">Link 1</a></p>
<p class=navlink><a href="#">Link legal</a></p>
<p class=navlink><a href="#">Outras coisas</a></p>
</div>

Temos uma camada com estilo "class=navegador" e dentro desta, três parágrafos com estilo "class=navlink". A classe navegador conterá estilos gerais para toda a barra de navegação e os parágrafos, com classe navlink, conterão os estilos de cada linha do navegador.

Vimos que o HTML é bastante simples. Agora só temos que aplicar uns estilos bonitos para realizar o efeito buscado.

Estilos CSS

Comecemos pela camada geral, com classe "navegador", onde vamos utilizar uma declaração de estilos como esta:

.navegador{
   margin-left: 39%;
   margin-right: 42%;
}


Simplesmente, estamos lhe indicando umas margens, para que se situe onde nós quisermos, que é mais ou menos no centro da janela do navegador.

Agora vejamos a declaração do estilo da classe navlink, que é o estilo que damos a cada linha de link da barra de navegação.

.navlink {
   font-weight: bold;
   border: 1px solid #999999;
   margin:3 0 3 0px;
   padding: 2px;
}


Simplesmente indicamos em negrito, uma borda de 1 pixel, assim como uma margem e um padding.

Agora, para cada link definimos dois estilos. Um para os links em geral e outro para os links "hover", que são os que têm o mouse encima deles. Deste modo, os links sempre serão vistos de um mesmo modo e quando se colocar o mouse encima de um deles se ativará o estilo definido em hover.

.navlink a {
   background-image: url("nav-fundo2.gif");
   color: #666666;
   text-decoration: none;
   display: block;
   width: 100%;
}

.navlink a:hover {
   background-image: url("nav-fundo.gif");
   color: #ffffcc;
}


No primeiro caso (.navlink a) se indica o estilo para os links em geral. Simplesmente definimos uma imagem de fundo "nav-fundo2.gif" para os links, uma cor para o texto do link, que não apareçam sublinhados e, o mais importante, que se comportem como um bloco, que se indica com o atributo display: block;

Os links, ao se comportarem como um bloco se produzirá o efeito que estávamos buscando: que não precisa se posicionar sobre o texto do link para que mude o estilo, simplesmente o fará ao posicionar-se no container onde estão situados. Com isso, também conseguimos que o estilo dos links se transfira a todo o container. Além disso, também definimos a largura dos links a 100%, para certificarmos que ocupem todo o espaço do container onde estão situados.

No segundo caso (.navlink a:hover) simplesmente definimos um estilo distinto, utilizando uma imagem de fundo e uma cor diferente para os links. A imagem chamada "nav-fundo.gif" se mostrará como fundo do espaço onde está colocado o link. Só se modificará o estilo do link sobre o que tivermos colocado o mouse e não o dos outros links da barra de navegação.

Com isto já está feito tudo. É realmente simples. Foi provado no Internet Explorer e no Mozilla Firefox.

Agora queria comentar que também pode-se dar uma largura definida à camada onde estão todos os links, <div class=navegador>, utilizando o atributo width. Isto dá problemas no Internet Explorer na hora dos links se comportarem como um bloco, com o qual só se ativará se colocarmos o mouse no texto do link. A solução para Internet Explorer, é justamente atribuir o atributo width: 100% aos links, na classe "navlink". Este atributo width: 100% para Firefox é indiferente, com o qual o problema fica resolvido para os navegadores mais comuns.

Para finalizar, podemos ver o exemplo em uma página a parte.

Seu Layout: um site para baixar layouts em PNG



Você está sem criatividade para criar seus layouts?? Sem inspiração??
Seus problemas acabaram!!

Seu Layout é um site que disponibiliza layouts prontos em arquivo PNG, e o melhor: GRÁTIS!!
Você pode escolher entre várias categorias entre elas: Desin, empresarial, music, blog, hotel, hosting entre outras...

Vale a pena conferir!!

Designers X Clientes

Vídeo muito engraçado que mostra cenas que seriam absurdo em outros ramos de negócios, mas que são realidade e acontecem com frequência no dia-a-dia da nossa Profissão de Designers!!
Não deixem de comentar!!
Abraços a todos...




Galeria de imagens em Flash - Flash Gallery

Está procurando uma galeria de imagens legal para seu site?




Abaixo um script em flash para criar uma galeria bem interessante e usual.

Flash Gallery  é um script gratuito que permite criar  uma galeria de fotos em flash em nosso servidor.

Sua instalação é muito simples, basta copiar o script para nosso servidor fazer algumas configurações básicas e esta funcionando corretamente, é quase um plug and play.

As Facilidades de uma mesa digitalizadora



Se você usa constantemente softwares gráficos, trabalha diretamente com arte ou precisa de uma maneira prática e fácil de desenhar “a mão livre” no computador, então uma mesa digitalizadora poderá beneficiá-lo. Neste artigo, pretendo discutir os diferentes tipos de mesas digitalizadoras disponíveis no mercado e quais são suas vantagens. Também desejo ajudar o leitor a olhar alguns parâmetros importantes na hora de escolher seu produto.

Como não escolher um domínio para seu site!!



Ei você que pretende criar um site parta sua empresa, ou até mesmo um site pessoal para expressar suas idéias, tome cuidado na hora de escolher um registro para este site....
veja essa matéria bem interessante e comenta aí!!!!


Quando se cria um site, tal como quando se pensa em ter um filho, uma das primeiras coisas que nos vem à cabeça é o nome que lhe vamos chamar, porque será desta forma que ele será reconhecido pelo resto do mundo.

Muitas empresas no entanto, tal como certos pais, parecem que gostam de fazer o filho sofrer ao lhe darem um nome que, apesar de os tornar conhecidos, não abona muito em seu favor.
Para explicar esta teoria, apresentamos de seguida uma lista de nomes de sites que não foram os mais felizes:

Wireframe - Processos de criação de um site



Quem trabalha com design de sites sabe muito bem que existem vários processos na construção de um site, desde seu esboço até o acabamento e sua conclusão! Disponibilizo pra vocês uma apresentação de todo o processo, desde a conversa com o cliente, o tão famoso 'briefing' até o produto final: O SITE! no final da apresentação, coloco os sites de referência para que você possa buscar sempre mais e mais informação para sua carreira...Um abraço a todos e curtam muito, divirtam-se...

Criando um box 3D no Fireworks


Salve galerinha do Blogão do Design!! Hoje postei um tutorial bem legal e útil em muitos casos...Vamos criar um box em 3D no Fire ok??
Sigam o tuto e bom divertimento...

Software Livre: Programas grátis que são tão bons quanto os pagos


Hoje vou falar de software livre (Software livre, segundo a definição criada pela Free Software Foundation é qualquer programa de computador que pode ser usado, copiado, estudado e redistribuído sem restrições. O conceito de livre se opõe ao conceito de software restritivo (software proprietário), mas não ao software que é vendido almejando lucro (software comercial). A maneira usual de distribuição de software livre é anexar a este uma licença de software livre, e tornar o código fonte do programa disponível.)

Novidades do novo navegador 'Opera 10.61'


Fala galera, beleza pura? Bom, vou falar um pouco das novidades das novidades da atualização do Opera, que no dia 1° de julho anunciou a versão 10.60 e agora já está na sua versão 10.61!! Considerado por muitos (e particularmente por mim) o navegador mais rápido da atualidade, essa versão conta com váriaas melhorias em relação as anteriores.