quarta-feira, 27 de junho de 2012

Download - Ares Galaxy 2.1.8.3042



O Ares Galaxy é um compartilhador de arquivos que trabalha em rede descentralizada (P2P), permitindo a troca direta entre usuários. Com ele você pode buscar e copiar qualquer arquivo disponibilizado por outras pessoas, como músicas e vídeos.
Considerado por muitos como um dos melhores compartilhadores da internet, o Ares Galaxy fornece buscas rápidas a uma enorme quantidade de arquivos. Em uma interface muito intuitiva e que pode ser traduzida para o português, você digita palavras-chave e obtém em instantes o resultado dessa pesquisa.

Novidades - FIFA 13 confirmar lançamento em 24/09




imagem



A EA SPORTS revelou o lançamento oficial do game nos Estados Unidos no dia 24 de Setembro e na Europa 28 de Setembro

Além da confirmação das datas foi revelado também a edição especial de pré-vendaFIFA 13 Ultimate Edition que vai fornecer aos fãs 24 pacotes de FIFA Ultimate Gold Team para o começo de temporada, esse será a maior incentivo na história da franquia FIFA em pré-vendas. 

FIFA 13 Ultimate Edition estará disponível para pré-venda a partir do dia 29 de Junho ou para compra nas lojas de varejo em um único dia, 28 de Setembro. 

Download - Combat Arms 2.1204.04





Sente falta do sangue frio correndo em suas veias enquanto você mira na cabeça do seu adversário? Pois então chegou a hora de você conhecer a evolução do estilo Counter-Strike e aprender a usar novas armas. Combat Arms marca um novo passo nos jogos de tiro em um game em que seu jogador se torna mais forte a cada inimigo abatido.


Download - Google Chrome 20.0.1132.43


Faz algum tempo que o foco das atualizações do Google Chrome tem sido a sua velocidade de utilização – com ênfase não só em navegação, mas também na execução de conteúdos gráficos.
Contudo, a nova versão estável do navegador da gigante de Mountain View, que acabou de sair do forno, priorizou melhorias na sincronização de informações. Dessa vez, o browser apresenta uma ferramenta capaz de compartilhar as abas abertas em um computador com outras máquinas e até aparelhos portáteis, como smartphones e tablets.

sexta-feira, 30 de março de 2012

Plugin para criar ícone (.ICO) no Photoshop


Abuse da criatividade e crie seu próprios ícones no Photoshop


Os ícones são pequenas imagens usadas em sites, blogs, programas e diversas outras ferramentas. Estas imagens são utilizadas não só para deixar o projeto com um melhor visual, os ícones são utilizados para descrever os links ou serviços que serão linkados por eles, visando economizar espaço no ambiente do projeto, por esse motivo, muitas vezes os links em forma de texto são substituídos por uma imagem.

Para criar ícones, é necessário a utilização de um programa editor de imagens, como o Photoshop, por exemplo. Mas apenas possuir o programa não significa que o usuário já está apto a criar ícones, é necessário um bom conhecimento técnico para isso.
Pensando em melhorar a produtividade de usuários com pouca experiência e que desejam criar seus ícones personalizados, o site sibcode.com está disponibilizando um plugin para Photoshop, que possibilita a criação de ícones de forma rápida e fácil. Além dos ícones em formato padrão do Windows, ou seja, em formato .ICO, é possível exportá-los em outros formatos e diversos tamanhos.
Outra funcionalidade interessante é a geração de ícones com transparências, ideal para dar um visual mais elegante e profissional aos seus trabalhos.Tutorial muito bom aqui no Tutors de Tudo  , Plugin para criar ícone no Photoshop

Blogger - Criando seu Banner


 Neste artigo, vou mostrar como criar um banner (ou “selo”) para seu site, que poderá ser utilizado com mais eficiência nessa modalidade de divulgação.
O banner nada mais é do que uma figura representando seu blog, contendo um link para ele, e que será publicada em outros sites. A principal vantagem em divulgar seu site através de um banner é que uma imagem costuma chamar mais a atenção do visitante do que um simples link.
Além disso, é uma possibilidade de escapar do “nofollow”, mesmo que ele esteja ativado no outro site. Como você já deixará pronto o link para o seu blog, este será um link sem o “nofollow”, e seguido pelo Google.
O processo de criação e divulgação do seu banner é bastante simples. Vou dividi-lo em etapas para facilitar seu trabalho.

1. Crie a figura para usar em seu banner

Para criar a figura que representará o seu banner, basta utilizar um editor de imagens. Você não precisa ter intimidade com programas complexos: até mesmo o Paint, que já vem instalado com o Windows, pode fazer o trabalho. O importante é seguir as orientações abaixo:
  • O banner do seu site deve seguir sua identidade visual. Assim, busque usar as mesmas cores e fontes do seu site, para que as pessoas possam identificá-lo ao olhar para seu banner.
  • O tamanho mais utilizado para o banner é 120 pixels de largura por 60 pixels de altura. Se você criar uma figura fora dessas dimensões, o outro site pode cortar ou deformar sua figura ao redimensioná-la.
  • Um GIF animado pode chamar mais a atenção do que uma figura estática – desde que seja bem feito. Mas, se decidir fazer um, tome o cuidado para não fazer algo extravagante demais.
  • Mesmo que você decida criar uma figura estática, salve-a no formato GIF. Caso você queira futuramente trocá-la por um GIF animado, basta substituir a figura atual onde ela está hospedada, e sua imagem anterior será substituída pela animação nos sites em que ela estiver publicada.
O banner do  Tutors de Tudo está abaixo, como exemplo:

2. Hospedando sua figura

Após ter criado sua figura, é necessário hospedá-la em algum local, para que fique disponível para todos os sites que desejem publicá-la. Se você já possui um serviço de hospedagem pago para seu blog, este passo é bem simples: basta fazer upload da imagem para uma pasta conhecida.
Caso você hospede seu blog numa plataforma gratuita, como o Blogger, é necessário hospedá-la em outro site. Até o possível hospedá-la no próprio Blogger, mas o endereço para a figura será extremamente longo e complicado para se divulgado.
Existem diversos serviços gratuitos para hospedagem de imagens na internet, como o Imageshack e o Photo Bucket. No entanto, não gosto desses serviços por um motivo simples: uma vez feito o upload da imagem, não é possível colocar uma nova imagem em seu lugar. Isso significa que, se um dia você quiser trocar a imagem de seu banner, precisará pedir a todos os seus parceiros para que alterem o link para ela.
Entre todos os serviços gratuitos que testei, minha escolha foi o http://www.webs.com. Nele, você pode criar um site e fazer upload das imagens. O ideal é que você o crie com o próprio nome do seu site ou blog original. Para fazer o upload da imagem que você criou, é só entrar na opção “File Manager” e acessar “Single File Uploader”. 

3. Criando o código para divulgação do banner

O próximo passo é criar o código que você colocará em seu blog para divulgação do seu banner. O código irá criar dois elementos: na parte superior será exibido seu banner e na parte inferior uma caixa onde os seus parceiros copiarão o seu código.
Abaixo está o código que uso no Tutors de Tudo, que você pode tomar como base para criar o seu:
<p align="center"> 
<img vspace="2" hspace="2" title="Tutors de Tudo" alt="Tutors de Tudo" src="http://gerenciandoblog.webs.com/Gerenciando.gif"/><br/> 
<textarea onfocus="this.select()" style="margin: 2px; width: 180px; height: 50px" onmouseover="this.focus()" name="textarea"><a href=http://www.tutorsdetudo.blogspot.com target="_blank"> 
<img border="0" title="Gerenciando Blog" alt="Gerenciando Blog
src=http://tutorsdetudo.webs.com/logo.gif /></a></textarea></p>
Os trechos que você precisa alterar estão colorido:
  • http://tutorsdetudo.webs.com/logo.gif – Endereço em que você hospedou sua figura (item 2).
  • http://tutorsdetudo.webs.com/logo.gif – Endereço do seu blog.
  • Tutors de Tudo– Texto alternativo que aparecerá ao colocar o mouse sobre seu banner.
  • 180 x 50 – Tamanho da caixa que será exibida com o código do seu banner.
O resultado ficará similar ao abaixo:
 

4. Publicando o código de divulgação

Feito isso, o passo mais simples: basta adicionar um gadget de HTML/JavaScript em seu blog, adicionando o código criado no item 3. Quanto maior o destaque que você der ao banner, maior a chance dele ser visto e publicado em outro site.

5. Criando uma Política de Parcerias

Outra dica que dou – embora não seja obrigatória – é que você crie e divulgue uma Política de Parcerias para seu site ou blog. Por exemplo: qualquer site pode ser seu parceiro ou você evitará conteúdo ilegal? É interessante deixar todos os pontos claros, para evitar parcerias que não sejam interessantes para você.
Como exemplo, leia a Política de parcerias do Tutors de Tudo

Pronto! Se você seguiu os passos, já tem um banner para o seu site. No início, a procura por parcerias pode demorar a aparecer. Com o tempo – e se você tem um site de qualidade – é natural que elas surjam. Outra possibilidade é você propor parcerias a outros blogs. É uma escolha pessoal.
Agora, se você achou este processo complicado, é possível fazer todo esse trabalho automaticamente em um site, embora haja algumas limitações. Para saber como fazer isso, leia o artigo Um banner para seu site de forma fácil.
E você, já tem um banner em seu blog? Como tem sido a troca de parcerias ou o uso dele? Deixe seu comentário!

quarta-feira, 28 de março de 2012

CSS - Contruindo um menu horizontal

Se você não quiser ler, mas ver como fazer, assista um vídeo. Neste vídeo é mostrado como fazer um menu horizontal com CSS. E se quiser aprender mais, visite o Campus Online e cadastre-se grátis para ver vídeos sobre desenvolvimento web.
Para fazer um menu horizontal que seja fácil de personalizar e de fazer manutenção?
Siga os passos abaixo e descubra como é fácil.

Estrutura:
Primeiramente faça um elemento NAV (antigamente usaríamos a tag DIV) e atribua um ID. Neste exemplo nossa NAV se chamará “menu”. Dentro desta NAV, faça uma lista com as opções do menu.
1
2
3
4
5
6
7
8
9
<nav id="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Produtos</a></li>
        <li><a href="#">Missão</a></li>
        <li><a href="#">Links</a></li>
        <li><a href="#">Contato</a></li>
    </ul>
</nav>
Começando a formatação:
Agora que já fizemos a estrutura do menu, vamos formatá-lo com css.
Primeiro, para podermos trabalhar melhor, vamos tirar o margin (margin:0px;), o padding (padding:0px;) e os Bullets das opções (list-style:none;) da tag UL. Queremos que o UL seja uma barra de navegação certo? Então vamos fazer ele flutuar à esquerda (float:left), depois damos a ele a largura de 100% (width:100%;), isso fará com que ele vire uma bloco. Veja o código css atribuído à tag UL:
1
2
3
4
5
6
7
8
#menu ul {
    padding:0px;
    margin:0px;
    float: left;
    width: 100%;
    background-color:#EDEDED;
    list-style:none;
}
Terceiro:
Nosso menu ainda não está horizontal… agora é hora de resolver isso.
Para o nosso menu ficar horizontal, temos que fazer as suas opções ficarem uma ao lado da outra… para isso, basta atribuir um display:inline; para a tag LI… Isso fará todas as opções ficarem em uma linha horizontal:
1
#menu ul li { display: inline; }
Deixando o menu na horizontal:
Ótimo. Estamos quase acabando nosso menu horizontal, agora falta pouco.
Precisamos apenas formatar os links do menu para que eles não fiquem tão próximos um do outro. No css, faça que todos os links que estão dentro da tag LI (#menu ul li a) flutuem à esquerda (float:left;), isso é necessário para que os links se transformem em bloco. Agora, dê um espaço entre a borda do menu e o texto, para isso use o padding (padding: 2px 10px;).
Você pode aproveitar para definir o “visual” que deverá ter o link: cor de fundo, letra, etc…
Veja o código css que escrevemos neste passo.

1
2
3
4
5
6
7
8
9
#menu ul li a {
    padding: 2px 10px;
    float:left;
    /* visual do link */
    background-color:#EDEDED;
    color: #333;
    text-decoration: none;
    border-bottom:3px solid #EDEDED;
}

Vamos ver no que deu!
Para finalizar, vamos apenas definir o que deverá acontecer com o link quando o usuário passar o mouse. Este passo dispensa explicações.

1
2
3
4
5
#menu ul li a:hover {
    background-color:#D6D6D6;
    color: #6D6D6D;
    border-bottom:3px solid #EA0000;
}

terça-feira, 27 de março de 2012

Dreamwaver - Galeria de fotos com Thumbnail


E aí pessoal! Tudo certo?
Conforme pedidos, sai do forno uma vídeo aula quentinha de Dreamweaver CS3 ensinando como criar uma galeria de fotos com thumbnail pelo Dreamweaver.
Conforme informei na vídeo aula, não testei esse processo com versões diferentes entre o DW e o FW, já que para o processo funcionar é imprescindível a existência do Fireworks em sua máquina. Outra coisa interessante informar é que no Dreamweaver mx e mx2004 não têm essa opção, sendo necessária a instalação de uma extensão, mas estou correndo atrás dela, ok?

Assista à vídeo aula
Outra coisa interessante dizer, é que o e-mail que você terá que cadastrar no gravatar.com deverá ser o mesmo que você usa para postar seus comentários no mxmastes, caso contrário, a imagem não aparecerá.
Bom, isso é tudo… Boa aula a todos!

sábado, 24 de março de 2012

Blogger - Inserindo artigos relacionados


Fazer com que o leitor visite o seu blog é uma coisa, agora fazer com que elecontinue por mais tempo, lendo mais postagens (a tal taxa de rejeição), é outra completamente diferente e por sinal, muito mais difícil. Uma boa forma de se conseguir isso no Blogger/Blogspot é entregando ao leitor mais daquilo que ele veio buscar, ou seja, mostrando à ele postagens relacionadas ao que ele está lendo. E não se preocupe, pois a lista só aparece na página individual da postagem.
Para inserir uma lista de Postagens Relacionadas no final da postagem, faça o seguinte:

Acesse o seu Painel do Blogger e selecione Layout, então clique emEditar HTML  para entrar no modo de edição do código do seu Template. Então marque a opção Expandir modelos de widgets.
ão se esqueça de  fazer o backup do seu template antes de realizar as alterações no código, clicando em Baixar modelo completo.

Encontre o seguinte código (utilizando o Ctrl+F  do seu navegador):
</head>

Então cole o seguinte código ANTES: 
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

Agora encontre este código:
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>

Então cole este código ANTES do </b:loop> (observe o contexto do</b:loop> para que seja igual ao apresentado acima, pois existem vários</b:loop> no código): 
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>
</b:if>
Altere o número “5” destacado em laranja do código acima pelo número de postagens relacionadas que você deseja que apareçam para cada categoria/marcador. Por exemplo, se a sua postagem possuir os marcadores “Notícias” e “Futebol”, aparecerão 10 postagens relacionadas no total, 5 para cada marcador.

Agora só mais uma vez, encontre este código:
<div class='post-footer-line post-footer-line-3'/>

Então cole o seguinte código DEPOIS: 
<b:if cond='data:blog.pageType == "item"'><h3>Postagens Relacionadas</h3></b:if>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
Altere a parte em laranja se quiser dar outro nome à lista de Postagens relacionadas. Talvez “Artigos Relacionados”? Você quem sabe.
Como esse hack funciona somente nas páginas individuais, não será possível visualizar diretamente o resultado. Então visualize apenas para checar se houve algum erro com o template e clique em Salvar Modelo. Em seguida abra uma postagem no seu blog para verificar o resultado.
Se o Hack não funcionar ou causar erros no seu template, desfaça as alterações clicando em Limpar Edições ou utilize o backup que você criou e clique em Fazer Upload, então refaça todo o processo.

Photoshop - Criando um topo pro seu web/site

Olá pessoal , hoje irei estar postando mais um video-tutorial , desta vez iremos estar ensinando a vocês umas das melhores formas de se criar um cabeçalho bonito , elegante e atrativo pro seu público alvo . 
Confira abaixo o video criado por leandro10371 confira o canal dele no youtube .




 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Eagle Belt Buckles