A idéia deste post é dar algumas dicas de como montar um site otimizado para que possa ter um bom desempenho e agradar o maior número de pessoas possível, são dicas simples onde procuro esclarecer alguns pontos que com certeza irá tornar seu site mais agradável a quem o está visitando.

Vamos lá

Crie um código (x)HTML válido

É importante que o site possua um código (X)HTML válido, organize seu código de maneira que facilite a leitura tanto de máquinas quanto de humanos, ter um site bem estruturado e organizado é muito importante e ajudará muito a deixar seu conteúdo mais acessível nas buscas pela web, isso nada mais é que Web Semântica. Você pode conferir se seu site é válido ou não, verificar e acertar os possíveis erros através do serviço de validação oferecido pela W3C.

Folhas de Estilo

São importantíssimas, elas definem o layout do site, procure criar todos os estilos em um arquivo separado de extensão “css”, evite também criar várias folhas, o ideal é criar apenas uma para todo o site

Páginas Splash

Alguns webdesigners costumam criar uma página de “entrada” para o site, chamada de página splash, geralmente com uma mensagem de boas vindas ou com um botão estilo “clique aqui para entrar”, bem, eu aconselho evitar esse tipo de página, isso pode acabar confundindo o usuário que pode simplesmente deixar seu site sem nem mesmo acessá-lo e também criar confusão nos Robots de rastreio de conteúdo, eles podem entender que aquela é uma página de “Site em construção” e acabar não indexando seu conteúdo.

Navegação

Preocupe-se com a navegação que o usuário terá ao acessar o seu site, as páginas que vai percorrer, crie uma navegação clara e fácil, com botões para voltar á página anterior, o caminho da página atual, em alguns casos com sites que possuem muitas páginas é importante criar uma página com o mapa do site, isso facilita muito e evita que o usuário se perca dentro do site e acabe saindo para procurar o que deseja em outro site.

 Menus

Minha dica quanto a menus é: crie menus simples e diretos, se for o caso pode utilizar flash, mais se controle nos efeitos, evite efeitos mirabolantes, evite também aqueles menus com vários sub-menus que vão se abrindo conforme você vai passando o mouse sobre algum item, menus suspensos, enfim, em usuários com pouca experiência em internet isso pode acabar causando confusão o que vai fatalmente fazer esse usuário abandonar seu site e ir para outro por que simplesmente não conseguiu entender seu menu.

Conteúdos claros

Exponha de maneira clara e direta o assunto no qual se trata seu site, seja produtos ou serviços, procure sempre deixar claro ao usuário do que se trata seu site, o que você está vendendo, destaque os principais produtos ou serviços oferecidos e deixe de maneira acessível os demais para que o usuário ache mais facilmente o que procura e obtenha as informações que esta buscando.

Exemplo de imagem esticada

Imagens

Coloque as imagens do tamanho certo, evite esticar as imagens isso acaba distorcendo-as e deixando o site com um aspecto feio e pouco profissional.

Banners publicitários

 Procure evitar banners publicitários em seu site a menos que você tenha um e-commerce ou algum tipo de revista eletrônica ou portal, mesmo assim procure usar com moderação, o excesso pode acabar ocasionando confusão no visual e acaba tirando o foco do usuário para o que realmente interessa, o conteúdo. Utilize esses espaços com algum conteúdo relevante ou links para outras sessões relacionadas, enfim, procure aproveitar o máximo os espaços do seu site com informações úteis ao usuário.

Músicas

Bem, esta questão de músicas no site é complicado, dependendo do caso em um primeiro momento é até legal, mais quando você voltar no site outras vezes vai acabar se enchendo daquela musiquinha e abandonando o site, enfim, o que sugiro é evitar musicas no site, isso acaba incomodando seus usuários fazendo com que eles deixem o site e não voltem mais, porém, em casos onde não tem jeito o que eu aconselho é colocar controles para desligar o som e controles de volume também.

Bem galera essas são algumas dicas que estou passando aqui para vocês e espero que possa ajudá-los.

Até a próxima pessoal.  

Bem galera essas são algumas dicas que estou passando aqui para vocês e espero que possa ajudá-los.

Até a próxima pessoal.

Bem pessoal desta vez vou escrever sobre navegadores, o que causa dor de cabeça em muito webdesigner e programadores que trabalham com CSS por aí…

Antes de mais nada quero informar que isso é uma analise pessoal, o sentimento que tenho quanto aos navegadores web que existem hoje e que costumo usar. Por tanto isso não é regra, é apenas uma opinião pessoal, ok?

Nos dias de hoje com o crescimento e popularização da internet no mundo e principalmente aqui no Brasil, segundo estudos da UOL (www.amidiaquemaiscresce.com.br), é muito comum a existência de diversos browsers para navegação, atualizações de versões, criação de ferramentas novas e tal. Bem, em que isso afeta os webdesigners? Simples, há alguns anos atrás reinava quase que absoluto o famoso IE (Internet Explorer) do Windows, praticamente quase todos utilizavam este navegador, era raro se encontrar alguém utilizando Mozilla Firefox ou Mac com seu Apple Safari.

Hoje a coisa é bem diferente, o Microsoft Internet Explorer que atualizou sua versão 6.0 para 7.0 e recentemente para a versão 8.0 perdeu muito mercado com o crescimento do Mozilla FireFox que hoje está na sua versão 3.5, com a chegada do Google Chrome, a “popularização” dos Macs que vem com seu navegador Apple Safari e outros browsers como o Opera por exemplo, ou seja, antes o webdesigner precisava se preocupar mais com a adequação do site para o IE 6.0, já que ele era o que reinava quase que absoluto, hoje ele tem que se virar para colocar o site para rodar em IE, Firefox, Safari, Chrome, Opera, Netscape… :/

Como sou um webdesigner também tenho que passar por essa situação, hoje tenho instalado em minha maquina o IE6.0 e 7.0, Firefox, Safari, Chrome, Opera e Netscape, por esse motivo acabo utilizando os mesmos para testar o correto funcionamento dos sites que desenvolvo, a acabo também utilizando-os para navegação. O que vou fazer aqui é uma analise pessoal sobre o comportamento desses navegadores.

Na minha opinião:

IE 6.0 – É, ainda tem muita gente que utiliza esse navegador, acho que é o causador de boa parte da dor de cabeça dos webdesigners, falo isso por experiência própria, existe na internet até campanhas para as pessoas atualizarem seu Browser para pelo menos a versão 7.0. Na minha opinião, é um navegador que ficou ultrapassado, não sei, mas acredito que a Microsoft não faz mais atualizações para esse navegador.

IE7.0 – É fácil você ouvir ou até mesmo fazer criticas a este browser, realmente, a impressão que me passa na sua utilização é de instabilidade, com muitos travamentos, acredito que seu sistema de Abas não funcione individualmente, pois sempre que trava uma aba trava tudo, a saída quase sempre é finalizar tarefa, os prós são: de uma maneira geral consome pouca memória e é bem rápido para iniciar.

FireFox – Instalei a nova versão 3.5 e realmente achei bem mais rápida que a anterior, possui diversos plugin que facilita bastante em determinadas tarefas, percebi também uma melhora nas cores para a versão anterior, é bastante estável e não costuma travar, o que tenho a reclamar desse navegador é que consome muita memória, menos que a versão anterior, porém, ainda mais que o IE 7.0 e a demora na inicialização.

Chrome – Apesar de não utilizá-lo tanto quanto o IE e o FireFox, eu o acho bem rápido tanto para navegar quanto para iniciar, não consome muita memória, é bem leve, só sinto falta de alguns detalhes como por exemplo a barra de ferramentas do Google (Meio controverso isso).

Safari – Fiz uma atualização recente para a versão 4.0, não utilizei muito ainda nessa nova versão, porém minha impressão quanto a versão anterior é de um bom navegador, rápido para iniciar, rápido também para navegar, não tanto quanto o FF e o Chrome e é também bem estável.

Opera – Utilizo muito pouco, mesmo para testar os sites, quase não utilizo para navegação, mesmo assim achei bastante interessante algumas ferramentas, principalmente os modos de exibição dos sites.

Netscape – Parece mentira, mas me surpreendi quando fui atender um cliente e o cara usava esse navegador como browser principal, particularmente eu nunca tinha utilizado este browser, mais tive que instalá-lo para conhecer e também testar o site dele para ver se não ia “dar pau” e o site ficar todo torto, enfim, o site ficou legal, certinho, porém essa foi a única vez que o utilizei, não tenho nem como falar nada por esse motivo.

Bem galerinha, esses são os browsers que eu utilizo aqui, alguns só para teste, outros para navegar mesmo, outros nem tanto…

Quanto ao IE 8.0 eu o instalei mais não gostei muito, achei até que estava pior que o IE 7.0, como poucas pessoas, pelo menos aqui no Brasil, não o estão utilizando muito, e o 7.0 é o que tem mais usuários, vou esperar um tempo até substituir meu 7.0 pelo 8.0 ou encontrar alguma ferramenta que faça com que eu utilize os dois em simultâneo.

É isso, como falei no inicio tudo aí é apenas minha opinião, minha impressão na utilização dos mesmos, sinta-se a vontade para concordar, discordar ou dar sua opinião.

Ate a próxima galera.

O blog esta no inicio mais como falei pretendo com este Blog passar a você um pouco do que venho aprendendo com desenvolvimento de sites, veja que eu disse “aprendendo”, pois nesta área surgem coisas novas a todo tempo, então é sempre bom estar se atualizando para não ficar p/ trás.

Bem nessa semana que passou tive que desenvolver um álbum de fotos, nada muito diferente, coisa simples mesmo, é claro que nada impede trabalhar em cima da idéia para incrementar mais o código. Digamos que o que vou passar aqui é algo básico mesmo para vocês irem incrementando da maneira de vocês.

Vamos lá, para a criação deste álbum de fotos eu utilizarei PHP 5 e banco de dados MySQL, depois vou usar um LightBox só p/ dar um charme na exibição das fotos.

Para começar vamos criar o banco de dados, crie a seguinte tabela em seu MySQL:

Tabela MySQ

Agora vamos criar um arquivo que vai fazer a conexão com o bando de dados, vamos chama-lo de conecta.php.

Conexão com o banco de dados

 Agora vou criar um arquivo com o formulário para subir a foto e adicionando uma leganda para a mesma, para isso segue o eguinte código:

Formulário de cadastro

Blz, até aqui tudo certo??? Esse formulário aí em cima vai pegar os valores do arquivo e da legenda e envia via POST para o arquivo “galeria_grava.php” que é responsável pela gravação no banco de dados.

Vamos ao arquivo “galeria_grava.php” ele esta todo comentado para facilitar o entendimento.

Código para gravar informações no banco de dados

Exibindo as imagens cadastradas

Bem, decidi criar este post para falar sobre um erro que me aconteceu ontem com o Dreamweaver CS3, estava trabalhando normalmente e derrepente quando fui salvar meu trabalho aparceu um erro na tela:

while executing onLoad in _beforeSave.htm, a JavaScript error occurred

Entendi nada, o fato é que toda vez que eu salvava o trabalho dava esse erro chato na tela, imaginei logo que teria que reinstalar o DW para resolver o problema, só que não tinha muito tempo para fazer isso, até encontrar o CD do DW aqui ia demorar muuuuuuito!!! rs

Fiz uma pesquisa rápida pela internet e encontrei uma solução simples e o mais importante, rápida.

É o seguinte, caso ocorra esse tipo de erro com você basta apenas deletar um arquivo chamado FileCache.dat, WinFileCache-7A9586CB.dat ou MacFileCache-BFE7CE2E.dat das configurações do Dreamweaver. A localização do arquivo difere de acordo com o sistema operacional e da versão do dreamweaver que se esta usando, segue abaixo alguns caminhos:

Dreamweaver CS3 on Windows Vista:
C:\Users\[username]\AppData\Roaming\Adobe\Dreamweaver 9\Configuration

Dreamweaver CS3 on Windows XP:
C:\Documents and Settings\[username]\Application Data\Adobe\Dreamweaver 9\Configuration

Dreamweaver 8 on Windows XP:
C:\Documents and Settings\[username]\Application Data\Macromedia\Dreamweaver 8\Configuration

Dreamweaver 8 on Windows Vista:
C:\Users\[username]\AppData\Roaming\Macromedia\Dreamweaver 8\Configuration

Dreamweaver CS3 on Macintosh:
Mac HD/Users/[user]/Library/Application Support/Adobe/Dreamweaver 9/

Dreamweaver 8 on Macintosh:
Mac HD/Users/[user]/Library/Application Support/Macromedia/Dreamweaver 8/

Pronto, feito isso é só reiniciar seu DW e o problema vai estar resolvido.

Estou escrevendo este port para informar os clientes e amigos sobre um golpe que esta rolando na internet, trata-se de um boleto da host.inf.br, se você recebeu este boleto NAO PAGUE cheguei a receber este boleto no ano passado mais desconsiderei pensado se tratar de um engano ou mesmo de alguem tentando jogar um verde p/ colher maduro.

O lance é que este ano não apenas eu, mais boa parte de meus clientes receberam este boleto que ao meu ver trata-se de um golpe muito baixo de uma empresa que visa ganhar dinheiro a custa da inocência e do desconhecimento de terceiros. Em uma rápida pesquisa na internet pude comprovar que não apenas eu e meus clientes receberam este boleto, mas muitas pessoas também o receberam.

O boleto muito se parece com o boleto do RegistroBr (Nic.Br) o que pode causar confusão. O fato é que esta empresa chamada LINTEL – INTERNET E TELECOMUNICAÇÕES LTDA, esta mandando estes boletos do banco BANESE informando de um pagamento único e anual referente a hospedagem de site na internet, no valor de R$ 130,00 ,  repito, NÃO PAGUEM.

Alguns outros blogs como o EnterNauta e Tiago Floriano já vem alertando as pessoas sobre este assunto, o BloGzOne postou uma conversa com o pessoal do suporte tecnico da Host Brasil (que também é a mesma empresa) que alega se tratar de uma proposta e não de uma cobrança, enfim, o que me deixa mais aborrecido é que ninguem (governantes, autoridades) tomam uma providência com relação a este assunto.

Só para ficar registrado, os telefones que vem no boleto não atendem e o site da host.inf.br esta fora do ar.

Vamos lá, para este tutorial de swf externo vamos desenvolver primeiro um arquivo que eu chamo de base, ele vai servir para “receber” os arquivos externos.

Abra seu Flash, Arquivo/novo, este tutorial vai ser em AS 2.0, então se a sua versão do flash é a CS3 escolha “Flash file (ActionScript 2.0)“. Nas propriedades vamos alterar as dimensões para 400px de largura e 400px de altura, cor de fundo Branca, Frame Rate 24fps, Ok.

Agora no menu do programa clique em “Insert / New Symbol“, vai aparecer uma janela como esta:

Altere o nome para “recebe” e marque a opção “Movie Clip”, clique em Ok.

Clique em “Scene1″ para sair do Movie Clip, note que ele foi criado dentro da biblioteca (Ctrl+L), clique nele e arraste-o p/ palco. Coloque na posição X=0 e Y=0 conforme imagem abaixo:

Feito isso é preciso colocar um nome de instancia neste Movie Clip, clique nele e no painel de propriedades de o nome “recebe” no campo “instance name”

Agora vamos criar os botões, Faça um retângulo e transforme-o em Button conforme imagem:

Faça mais 2 botões iguais a este mudando apenas a cor.

 Pronto, o arquivo base esta pronto.

Vamos criar agora os 3 arquivos externos, o “Verde”, o “Vermelho” e o “Azul”. Abra um arquivo novo, 400 x 400 px, faça um quadrado do tamanho do palco (400 x 400px) e pinte de verde, exporte com o nome “verde.swf“, faça a mesma coisa nos outros 2.

Feito isso voltamos ao arquivo “base.fla“, vamos colocar as Actions para fazer a coisa funcionar.

Clique no primeiro Frame e depois digite a seguinte linha no painel de “Actions – Frame”.

_root.recebe.loadMovie(”verde.swf”);

Esta ação vai chamar o primeiro arquivo (verde) quando o filme for rodado.

Agora clique o primeiro botão (verde) e no painel de “Actions – Button” digite a seguinte linha:

on (release) {
_root.recebe.loadMovie(”verde.swf”);
}

Essa ação chama o arquivo verde.swf quando clicado no botão verde.

Repita esta ação nos demais botões mudando apenas o nome do arquivo para o botão correspondente (vermelho.swf para vermelho e azul.swf para azul) e pronto.

Para fazer o download dos arquivos clique aqui.

Qualquer dúvida é só deixar um comentário que estarei respondendo.

Abraço
Até o próximo tutorial!!!

Bem, decidi criar esse blog pessoal para poder expressar minhas idéias pessoais, publicar alguns tutoriais, alguns vídeos e vídeo-aulas interessantes, comentar algum assunto do momento, enfim, um espaço mais pessoal para vocês conhecerem um pouco mais sobre mim e onde eu possa também passar um pouco de minha pequena experiência sobre criação sites.

Espero que gostem dos futuros post, não vou poder atualizar com tanta freqüência, mais sempre que puder estarei postando algo legal para ajudar a galera iniciante em criação de sites.

Um abraço galera e até o próximo post