26 anos. Publicitário, diretor de arte web e flash designer pelo Infnet. Atualmente focado em estudos de usabilidade, otimização SEO e na implementação de soluções web que usem jquery, ajax e similares.
// maio 14th, 2009 // 1 Comentário » // Plugins Wordpress, Tutorials & Dicas, WordPress, WordPress Tutorials
Pessoal,
atendendo a um pedido de um ilustre visitante do blog, vim aqui explicar a vocês como inserir esses ícones de links sociais, iguais os que ficam no final dos meus posts. Continue lendo…
// maio 11th, 2009 // 12 Comentários » // Tutorials & Dicas
As empresas comuns normalmente têm dificuldade de contratar uma pessoa para criar seus sites, ou até mesmo para contratar alguém para trabalhar na área de desenvolvimento e criação interna da empresa.
Isto é normal. O empresário não tem obrigação de entender de tudo. Quando a questão é mais técnica a decisão pode ser complicada e arriscada. Saber identificar o que é um profissional qualificado e atualizado é importante para não perder tempo e dinheiro com amadores.
Se ao ler o texto abaixo você se identificar, não sinta-se ofendido. É apenas um sinal de que vocêcaiu na história de um amador e que precisa urgente se atualizar e mudar a sua postura com relação a contratação de serviços e profissionais para sua empresa. Afinal, as idéias abaixo já são percebidas e entendidas por muitos dos seus clientes finais. Mas nunca é tarde para refazer e melhorar. E caso precise de ajude, conheça nosso portfolio online, e solicite um orçamento para criação de sites! 
1) Seu site tem um texto do tipo: melhor visualizado na resolução tal, ou no navegador tal.
Se seu site contém um texto assim, comece a ficar preocupado. Profissionais de verdade sabem desenvolver sites capazes de funcionar em qualquer navegador e em qualquer resolução. Mas a preocupação é ainda maior: geralmente sites que tem essas mensagens NÃO funcionam em todos os navegadores e o site da sua empresa pode estar sendo visualizado todo desconfigurado por muitos dos seus clientes. Lembre que o Internet Explorer NÃO é o único meio que as pessoas utilizam para navegar na internet. Existem outros programas FORTES concorrentes como o Firefox, Opera, Chrome… Então, seu site PRECISA ser visto igualmente em todos eles, e o nome dessa técnica é crossbrowser. Bons profissionais sabem fazer isso.
2. O nome da sua página é Untitled Document ou Documento sem título
Se você está navegando na página da sua empresa e lá em cima, na barrinha azul do navegador, está escrito Untitled Documento ou Documento sem título… Xiiiiiiiiiiiii! Você está com um problemão.
Seus clientes ao buscar sua empresa no google, por exemplo, terão grande dificuldade em achá-lo, ou melhor, é quase 100% de chances de ninguém te achar nunca! Afinal, sabe qual é o nome da sua empresa na internet? Untitled Document!
Experimente escrever “documento sem título” no google e você descobrirá empresas que nunca devem ter tido nenhum acesso expontâneo ao site.
3) Ele diz que vai enviar seu site para centenas de sites de busca.
Isto funcionava a 5 ou 10 anos atrás. Atualmente os 3 principais sites de busca do mundo são o Google, Yahoo e Live da Microsoft. Estes sites até permitem o envio de sua URL manualmente, mas na prática o processo de cadastramento é automático, feito através de programas que são “robôs de busca” que vasculham toda a internet mundial constantemente.
Um profissional de verdade pode até lhe informará que o desenvolvimento do seu site utilizará técnicas de SEO para que fique bem indexado nos sites de busca. Ou lhe oferecerá um serviço a parte chamado Otimização SEO, que consiste em usar estratégias de programação e webmarketing para posionar seu site nos primeiros lugares dos sites de busca, relacionando a certas palavras-chave do seu nicho de mercado.
4) Ele disse que vai fazer o site todo em Flash
Se a pessoa chega com a proposta de desenvolver o site completo utilizando Flash, ou sugeriu colocar uma bela página na entrada do site com uma animação flash cheia de movimento, música e muita interação, saia correndo. Este definitivamente não entende nada de desenvolvimento de sites.
Falando estratégicamente e em uma frase resumida, o Flash impossibilita a divulgação do seu site ou da sua marca!
Se você nunca teve um site, ou se tem um público restrito e pretende justamente aumentar a quantidade de clientes e vendas através da internet, fuja de sites em flash. Isso não significa que seu site não pode ter um banner em flash, ou um menu interativo em flash, mas significa apenas que ele não deve ser DESENVOLVIDO em flash.
Profissionais de webdesign e webmarketing sabem que sites só devem ser feitos 100% em flash caso a sua empresa e sua marca já seja conhecida mundialmente pelo seu público, pois não existe a necessidade inicial de torná-la conhecida na internet, justamente porque ela já é conhecida então tanto faz ter um site em flash, html, java ou qualquer outra tecnologia.
5 ) Ele disse que é especialista em HTML, PHP, Banco de dados, Jquery, Otimização, Joomla, Blog WordPress, etc.
Todo mundo sabe que quem é especialista em TUDO, na verdade não é bom em NADA direito. Você precisa de alguém que saiba criar uma ferramenta de marketing e negócios da sua empresa na Internet, então o profissional de verdade deve analisar o seu caso específico e escrever um projeto, explicando que tipos de idéias e tecnologias deverão ser utilizadas para execução do mesmo.
E para isso geralmente é feito uma reunião com uma equipe parceira do designer. Cada profissional especializada em cada tecnologia, ou em um conjunto de tecnologias similares, definirá um valor/hora de projeto e quantas horas serão gastas naquela funcionalidade do projeto, para que o webdesigner que está lhe prestando atendimento possa lhe passar um orçamento final.
6) Ele tenta te impressionar dizendo que sabe html, php, java, ou seja, as coisas citadas acima…
Se ele sabe isso, aquilo e aquilo mais, o que importa para mim, que não entendo “lhufas” do que ele está falando?!?
Quando contrato um engenheiro não me importa que técnicas ele sabe ou deixa de saber. O que me importa é se ele sabe projetar e conduzir a construção da minha fábrica ou da minha loja da melhor forma possível.
O mesmo deve acontecer com o profissional webdesigner. Ele não tem que dizer que teconlogias ele sabe, quantas técnicas ele sabe… ele tem que lhe informar como poderá concretizar seu projeto de site e o porquê que a solução dle irá funcionar.
7) Eles se classificam como webmasters.
O termo webmaster atualmente está bem associado ao profissional web que sabe fazer um pouco de tudo. Esse mesmo ai que falei na dica acima… É um pau para toda obra. Com o tempo o termo webmaster vem se tornando sinonimo de amadorismo.
8 ) Ele se diz expert no Microsoft Frontpage
Quem é profissional da área sabe que o Microsoft Frontpage não é uma ferramenta profissional de desenvolvimento de sites. Ela é uma ferramenta desenvolvida pela Microsoft para que sua vó seja capaz de desenvolver algumas páginas simples para colocar na Internet.
9) Ele disse que vai colocar um contador de acessos no site.
Contadores de acesso são coisas do tempo das cavernas. Era utilizado no início da Internet. Qualquer profissional da área sabe que contadores são bregas e inúteis pois não fornecem informação que merece credibilidade. Contadores são facilmente burlados.
Hoje existem tecnologias mais avançadas com relatórios completos, cheio de informações realmente úteis sobre os acessos do seu site, o tipo de público, o que estavam buscando, entre outras coisas.
10) Ele disse ter feito diversos sites para amigos e parentes, e pior: pro tio dele!
Pergunte a ele o endereço do site de empresas que ele desenvolveu nos últimos meses. Criar sites para amigos, parentes e para seus hobbys preferidos não significam experiência necessária para criar sites profissionais de empresas. Esse amador é chamado pelos profissionais de “sobrinho”.
Por causa da famosa frase “Ah, eu tenho um sobrinho que faz site, preciso contratar ninguém não…”
Bom, se o seu sobrinho for um profissional, espero que você não tenho se identificado com NENHUMA das dicas acima! heheheh
// abril 30th, 2009 // 4 Comentários » // Photoshop, Tutorials & Dicas
Patterns são pequenas imagens que são repetidas infinitas vezes, inseridas lado a lado automaticamente, formando aqueles backgrounds(fundos) que utilizamos nos documentos criados.
Vou ensiar-lhes a fazer um pattern simples, que servirá como ponto de partida para os seus próprios patterns personalizados.
1. Crie um novo arquivo no photoshop com 3 x 3 pixels e 72 pixels/inch, com fundo transparente e em RGB.
// abril 30th, 2009 // Nenhum comentário » // Download & Tools, Photoshop
Wood Style (ASL) & Pattern (PAT) for Photoshop
1 ASL + 1 PAT | RAR ~ 37,4 Mb
DOWNLOAD
EASY-SHARE
// abril 16th, 2009 // 21 Comentários » // Tutorials & Dicas, jQuery
» Artigo retirado do Blog do Maujor (Vale apena acompanhar!)
Tutorial: técnica para criar uma janela modal com jQuery. O script desse efeito, seleciona todos os elementos a (links) cujo atributo name tenha sido definido com valor “modal” e mostra em uma janela modal(estilo lightbox) o conteúdo do DIV cujo id tenha sido definido no atributo href do link. jQuery realmente simplifica e torna fácil as coisas. Dê uma olhada nos exemplos que eu desenvolvi para demonstrar a técnica. Eles me parecem bem interessantes. 
Caso você não saiba o que é uma janela modal, você pode visualizá-la na página de demonstração que eu desenvolvi.
O autor usa no seu website o facebox (inspirado no facebook). Outros, tais como, lightbox, thickbox, multibox, litebox…… e muitos outros destinam-se a obter a janela modal, cada um deles com suas funcionalidades particulares.
Vamos ao nosso exemplo. Eu mostrarei como criar uma janela modal para apresentar o conteúdo do div cujo id é definido no atributo href do link, conforme dito anteriomente.
Os objetivos são :
a (link) com o atributo name="modal"e a ele(s) atribuir o evento click para disparar a ação de mostrar, em uma janela modal, o conteúdo do div cujo id é definido no atributo href do link.a<!-- #dialog é o id do DIV definido como mostrado a seguir --> <a href="#dialog" name="modal">Janela Modal Simples</a> <div id="boxes"> <!-- #personalize sua janela modal aqui --> <div id="dialog" class="window"> <b>Teste de Janela Modal</b> <!-- Botão para fechar a janela tem class="close" --> <a href="#" class="close">Fechar [X]</a><br />Janela Modal Simples<br /> Aqui vai o conteúdo da sua Janela Modal Simples.</div> <!-- Não remova o div#mask, pois ele é necessário para preencher toda a janela --> <div id="mask"></div> </div>
<style>/* O z-index do div#mask deve ser menor que do div#boxes e do div.window */
#mask {position:absolute;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:absolute;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
/* Personalize a janela modal aqui. Você pode adicionar uma imagem de fundo. */
#boxes #dialog {
width:375px;
height:203px;
</style>
}
/* posiciona o link para fechar a janela */
.close {
display:block;
text-align:right;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
//seleciona os elementos a com atributo name="modal"
$('a[name=modal]').click(function(e) {
//cancela o comportamento padrão do link
e.preventDefault();
//armazena o atributo href do link
var id = $(this).attr('href');
//armazena a largura e a altura da tela
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Define largura e altura do div#mask iguais ás dimensçoes da tela
$('#mask').css({'width':maskWidth,'height':maskHeight});
//efeito de transição
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//armazena a largura e a altura da janela
var winH = $(window).height();
var winW = $(window).width();
//centraliza na tela a janela popup
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//efeito de transição
$(id).fadeIn(2000);
});
//se o botãoo fechar for clicado
$('.window .close').click(function (e) {
//cancela o comportamento padrão do link
e.preventDefault();
$('#mask, .window').hide();
});
//se div#mask for clicado
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>
Os códigos são diretos e de fácil entendimento. Não se esqueça de linkar para a biblioteca jQuery ao documento.
É isso, e somente isso, que você precisa saber para criar uma janela modal simples. Neste tutorial eu ensinei como apresentar o conteúdo de um div dentro de uma janela modal. Você pode aplicar os conceitos aqui mostrados para criar o efeito de mostrar uma galeria de imagens dentro de um iframe.
Para aqueles que estão em busca de uma janela modal totalmente personalizável, esta técnica que eu mostrei é perfeita. Dúvidas e contribuições? Poste nos comentários. Obrigado por ler.
Créditos: Author: Kevin Liew | Tradução: Maujor
URL do artigo original em inglês: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
WP Cumulus Flash tag cloud by Roy Tanck requires Flash Player 9 or better.
Copyright © 2010 RHOdesign: Criação de Sites. All rights reserved.
