Rapha Santos

Olá.

Novamente após um bom tempo sem postar estou de volta, agora para dar algumas dicas básicas de SEO(Search Engine Optimization). Essas dicas são utéis para você colocar o seu site em uma melhor posição nos buscadores, principalmente no Google, alcançando um número de visitas cada vez maior. São dicas simples, porém se forem bem utilizadas podem trazer um otimo resultado para o seu site ou do seu cliente.

Título do Site

A primeira dica é utilizar bem as tags <H> do html, ou seja,  a tag de título.  Os buscadores consideram a tag <H1> a mais importante, por tanto ela deve ser utilizada com as principais palavras chaves do seu site, sendo que o ideal é que ela seja utilizada no título do site. Devemos também colocar o restante das palavras chaves em tags <H2>,<H3>, etc. assim os motores de buscas entenderão mais facilmente o conteúdo do seu site.

Título do navegador

O título da pagina<title> também de ser utilizado com as palavras chaves dela. O mais correto é que cada pagina do seu site tenha um título diferente,  tomando como base o conteúdo da pagina. No meu site (www.raphaelsantos.com.br), você pode ver que para cada página eu tenho um título diferente, porém eu mantenho o meu nome e o que faço, como por exemplo na página de portfolio onde vemos “Portfolio - Rapha Santos - Sites e Sistemas para Web”.

Domínio Fácil

Procure registrar um dominio que contenha palavras chaves fortes do seu site, pois fica fácil de os usuários lembrarem dele e também dos buscadores o localizarem.

Sitemap

Envie um Sitemap do seu site para o Google, Yahoo, Msn e outros sites de busca. Sitemap nada mais é do que os caminhos que o usuário pode percorrer no seu site, ele deve conter todas as paginas do seu site e deve ser enviado em formato Xml. Ele irá ajudar os motores de busca encontrarem mais facilmente todas as páginas de seu site.

Metatags

Utilize as principais metatags no seu site. Elas fornecem aos motores de buscas todas as informações do seu site, como conteúdo, autor, palavras chaves, e até com que frequência o seu site deve ser visitado novamente por eles. Veja algumas metatags abaixo:

<META NAME=”author” CONTENT=”Raphael Santos”>
<META NAME=”description” CONTENT=”Dicas básicas de SEO”>
<META NAME=”keywords” CONTENT=”SEO, Google, primeiro”>

Não faça como eu, atualize seu site frequentemente! (rsrsrs)

Para finalizar,  seu site deve ser atualizado diariamente, ou frequentemente, claro, com conteudo relevante a ele, novos conteúdos aumentam as chances de seu site ser indexado mais rapidamente. Procure escrever coisas que não são faceis de encontrar pois isso aumenta a chance de seus textos virarem referência, ou seja, seu site poderá passar a ser indicado por outros sites aumentando o número de visitas por pessoas e também pelos motores de busca.

Bom, essas foram as primeiras dicas basicas de SEO, em breve irei apresentar muito mais a vocês.

Depois de muita correria, venho postar pela primeira vez no ano!

Queria compartilhar com vocês algumas novidades, como por exemplo o meu novo portfolio que pode ser visto em www.raphaelsantos.com.br. Nele irei apresentar todos os trabalhos realizados por mim, desde trabalhos acadêmicos como trabalhos profissionais. Através do portfolio também é possivel me localizar em sites como Facebook, MySpace, Twitter e Delicious.

Atualmente o principal trabalho que você encontra em meu portfolio é o Portal Guia dos Contadores. O trabalho foi desenvolvido como trabalho de conclusão de curso (TCC) na Faculdade de Tecnologia Opet onde cursei Tecnologia em Webdesign. O nosso cliente aprovou o projeto e resolveu implantar.

O Portal foi todo elaborado com base em teorias que aprendemos no nosso curso, como Gestalt, Semiótica, Teoria das Cores entre outras utilizando no desenvolvimento recursos como Html, Css, Php, JavaScript, Ajax e MySql.

Além de mim, participaram desse projeto André Ricardo, Leonel Bader, Renan Daré e Rodolfo.

Feliz 2009 a todos, e em breve postarei mais artigos com dicas, tutorias e muito mais sobre desenvolvimento web.

Olá pessoal.

Hoje irei falar um pouco sobre dicas de como criar uma Newsletter ou E-mail Marketing que realmente traga resultados positivos para sua empresa, produto ou serviço.

Primeiramente devemos fazer um levantamento sobre o nosso público alvo. É importante saber dados como Idade, Sexo, Classe Social, Região entre outras coisas. Quanto mais informações soubermos, mais facil será preparar o conteúdo dessa Newsletter e adequá-lo ao nosso público.

Através do estudo sobre esse público também conseguiremos saber o horário mais adequado para o envio da newsletter. Geralmente pessoas que trabalham costumam ler e-mails quando chegam para trabalhar e na hora do almoço, portanto o ideal seria enviar de madrugada, ou antes do almoço. Já os jovens não tem muito horário, mas geralmente olham seus e-mails a noite, madrugada e fora do horário das aulas. Hoje em dia todo mundo recebe diversos e-mails por dia, e se o seu e-mail não for um dos primeiros a aparecer na caixa de entrada do usuário, você corre o risco de ele não ler, por isso a importância do horário.

O endereço de e-mail que iremos utilizar para o envio deve ser claro e confiável e o assunto da mensagem também. Esse assunto deve ser curto e que de certa forma consiga atrair o leitor fazendo com que ele abra a mensagem.

Já na composição do e-mail marketing, devemos pensar em como utilizar os pontos de maiores destaques, que seriam o topo e a lateral direita, de forma com que o que seja mostrado se relacione com o titulo e desperte a curiosidade do leitor em clicar e visitar o site para ver as informações completas. Quando uma Newsletter gera muitos cliques ou seja muitas visitas ao site, significa que ela está cumprindo o seu objetivo.

Precisamos nos preocupar também com a formatação do nosso e-mail. Não devemos utilizar elementos muito complexos na formatação do design para não corrermos o risco de que a estrutura da nossa newsletter seja afetada de forma com que o usuário não consiga ler. A forma que menos danifica a estrutura do layout, ainda é fazendo em tabelas, pois são elementos simples, suportados pela maioria dos browsers e pelos gerenciadores de e-mail também. É ideal criarmos um link apontando para uma versão dessa newsletter disponível na web para que, caso o usuário não consiga visualizar no e-mail, ele consiga acessar no seu navegador.

Devemos enviar esse e-mail marketing somente para pessoas realmente interessadas em nosso conteúdo e sempre temos que nos preocupar em deixar uma forma clara para ela passar a não receber mais os e-mails, pois os usuários podem considerar as mensagens como spam, informando os seus provedores de e-mail. Se o seu endereço de e-mail passar a ser considerado com spam pelos provedores, dificilmente alguem irá receber esses e-mails mesmo estando interessado no assunto.

Para garantir que a newsletter chegue para todos os interessados, devemos também contratar um bom serviço de envio, ou investir dinheiro em um software ou ferramenta para que nós mesmos possamos enviar.

Espero que tenham gostado. Dúvidas, críticas e sugestões são sempre bem aceitas, basta comentar!

Abraços

Recentemente foi divulgado em pesquisas que o número de aparelhos portáteis é três vezes maior do que o número de pcs, o que acaba abrindo novas oportunidades para nós que trabalhamos com desenvolvimento web. Nesse post vou falar sobre como poderiamos estar adaptando nossos projetos para essa nova realidade.

O primeiro passo é entender que estamos em um meio totalmente diferente e que não basta apenas alterar a resolução do site para ter sucesso com ele. Devemos ter em mente que os recursos que temos disponíveis nesses aparelhos não são os mesmos que encontramos em navegadores como internet explorer e Firefox para os pcs e notebooks. Também temos um público diferente, ou seja, o conteúdo deve ser adaptado para esse público.

Os aparelhos móveis possuem uma resolução menor, uma baixa velocidade de conexão e ainda o fato de a bateria ser limitada. Porém também temos as vantagens como a compatibilidade com camêra e voz.

Para conseguirmos fazer um site que de bons resultados, devemos colocar na versão móvel apenas o que é fundamental para o usuário, tentando tornar a navegação dele nesse conteúdo o mais agradável possível, ou seja, aquela mesma história de que quanto menos cliques melhor, os links e menus devem ser intuitivos, etc.

Podemos definir algumas estratégias para começar a estruturar o nosso projeto. Uma delas seria fazer um design onde usariamos os recursos mais simples possíveis de códigos html e css. Assim conseguiriamos fazer com que o design do site se comporte da mesma forma na maioria dos celulares. Devemos escolher no maximo cinco modelos de celulares para testar os nossos projetos mobile, pois senão acabariamos limitando muito a nossa criativade.

Um outra estratégia seria montar o layout em tabelas, apesar de parecer que estariamos regressando, conseguiriamos garantir que o nosso design funcionaria corretamente na maioria dos browsers. A maioria dos sites que disponibilizam conteúdo para esses dispositivos móveis, utilizam tabelas em seus layouts.

Também poderiamos trabalhar em cima dos aparelhos mais avançados, como o Iphone, os pdas, smartphones. Esses aparelhos possuem navegadores como o Opera por exemplo, que possuem recursos muito próximos aos navegadores de pcs e notebooks. Particularmente, prefiro trabalhar nessa ultima estratégia, já que os dispositivos móveis estão avançando muito rápido e o seu custo não é tão alto. Logo a maioria dos celulares teram suporte a navagadores com recursos semelhantes aos dos navegadores de pcs.

Segue agora algumas referências de sites que falam sobre o desenvolvimento para dispositivos móveis:

dotMobi Mobile Web Developers Guide
Site com uma série de livros sobre desenvolvimento de sites móveis.(inglês)

W3C
Site indispensável para quem quer começar a desenvolver sites para celular(inglês)

Mobile Web Design Book
Ponto de vista de Cameron Moll dos padrões web, trazendo diversos exemplos(inglês)

Apple
Site da apple, mais voltado para o iphone porem algumas coisas também servem para outros aparelhos.(inglês)

Mobile Life
Blog que fala de tudo sobre dispositivos móveis.(Português)

Infelizmente não encontrei ótimas referências sobre desenvolvimento para celular em português, seria interessante vocês desenvolvedores, comentarem colocando links de referências sobre sites para dispositivos móveis.

Esse post foi baseado na Matéria “Converta seu site para o celular” da Revista WWW.COM.BR - ANO 8 - N° 99 - Editora Europa.

Obrigado a todos, Boa noite!

Em um grande evento que ocorre em Los Angeles nos Estados unidos, o PDC( Conferência de Desenvolvedores Profissionais), a Microsoft apresentou um protótipo do seu sistema operacional voltado para simplificar o desenvolvimento de aplicativos na web. Esse sistema Operacional deve ser lançado comercialmente em 2010.

Esse sistema está sendo chamado de Azure e está em fase de testes para uma pequena quantidade de especialistas que irão fazer sugestões de melhorias antes de o sistema operacional ser lançado.

Segundo o site do Terra(www.terra.com.br), O Azure nasceu com a idéia de revolucionar o mundo de aplicativos e serviços na web, a fim de automatizar as relações entre empresas e clientes e aumentar a conectividade.

Podemos perceber que cada vez mais a Microsoft se volta para a Web, para tentar aumentar suas forças e diminuir a força do seu principal rival, o Google. Podemos esperar muito dessa briga entre essas duas grandes empresas, que com certeza acabará trazendo diversas melhorias para gente, principalmente em termos de custos, já que para acessarmos os novos aplicativos não será necessário máquinas potentes, e também se falando em mobilidade já que os dispositivos móveis como celulares, smartphones e pdas conseguiram executar também esses aplicativos através da web. Tudo ficará na web, o que provavelmente acabará gerando discussões sobre a segurança dessas informações armazenadas na internet.

Fonte:

Terra - http://tecnologia.terra.com.br/interna/0,,OI3287782-EI4801,00.html

IDG Now - http://idgnow.uol.com.br/computacao_pessoal/2008/10/28/windows-7-e-azure-entenda-a-tatica-da-microsoft-com-novos-sistemas/

Hoje em dia para você que está começando na área de web, seja como freelancer ou pretende abrir uma empresa e não pretende ou não tem condições de gastar com licenças de software ou ainda já possui uma empresa e quer “enxutar” as despesas, é muito importante conhecer softwares gratuitos que podem nos ajudar no nosso cotidiano e que não deixam muito a desejar com relação aos sotwares pagos.

O objetivo desse post é fazer você profissional de desenvolvimento web, tanto programadores como webdesigners, ficar por dentro desses softwares diminuindo assim os seus custos aumentando a sua lucratividade em seus projetos. Você que está em uma situação irregular, pode aproveitar para conhecer esses softwares e passar a utilizá-los diminuindo a chance de ser pego numa fiscalização e ter que acabar arcando com uma grande multa.

Editores de texto:

Notepad ++:

“É uma espécie de bloco de notas bem mais avançado e com diversos recursos para edição de texto e programação. As linguagens de programação suportadas pelo aplicativo são: C, C++, Java, C#, XML, HTML, PHP, CSS, makefile, ASCII, doxygen, ini file, RC resource file, Javascript, ASP, VB/VBS, SQL, Objective- C, batch file, Pascal, Perl, Python, Lua, TeX, TCL, Assembler, ruby, Lisp, Scheme, Properties, Diff, Smaltalk, Postscript, VHDL, Ada, Caml, AutoIt, KiXtart, Matlab, Verilog, Haskell e InnoSetup.

Além disto, usuários podem definir suas próprias linguagens usando User Language Define System integrado, que faz do Notepad++ extensível, para ter colorização de sintaxe e folding de texto (compactação de trechos de código). Além da coloração do código-fonte, o programa suporta múltiplos documentos abertos (abas). É simples e direto, como todo programa deveria ser.” (fonte:Superdownloads)

Komodo:

“Komodo Edit é um editor de código-fonte, para linguagens de páginas dinâmicas e tecnologia Ajax, incluindo Perl, PHP, Python, Ruby e Tcl. Possui suporte também para linguagens client/side, como por exemplo JavaScript, CSS, HTML e XML. Possui recursos como destaque do código-fonte através de cores,análise de sintaxe, para verificar algum erro,etc. Além disso é gratuito,possui várias línguas e é multiplatforma.” (Fonte: Ziggi)

Aptana:

“Aptana Studio é um ambiente de desenvolvimento para web com funções de edição, debugging, sincronização e gerenciamento de projetos. Seu código-fonte é livre sob licença GPL e pode ser utilizado tanto integrado ao Eclipse SDK Bronze quanto independentemente.

O programa oferece ferramentas para edição Ajax incluindo edição e debug de HTML, CSS, DOM e JavaScript. Além disso, o programa pode ser expandido por meio de plugins para suporte a desenvolvimento em PHP, Ruby on Rails, Adobe Air e iPhone.“(Fonte: Superdownloads)

Editor de Imagem:

Gimp:

“Famoso editor gráfico para Linux em versão Windows, que está completando este ano 13 anos de história. Durante esse tempo todo o GIMP foi sendo desenvolvido e melhorado. Hoje em dia ele pode brigar de igual para igual com o Photoshop. Se você está precisando de uma alternativa ao Photoshop, use o GIMP. Pode ser usado tanto como um simples programa para pintura quanto para retocar fotos, renderizar e converter imagens. Se você gostou das funções do GIMP, mas prefere a cara do Photoshop, use o GIMPShop que transforma a interface do GIMP idêntica ao Photoshop.“(Fonte: Superdownloads)

FTP:

FileZilla:

“FileZilla é um cliente FTP bem rápido e prático, com diversos recursos e interface intuitiva. Apresenta todas as funções básicas encontradas em programa do gênero. Possui suporte para proxy, SSL, SFTP, SOCKS 4/5, HTTP 1.1, autenticação GSS, entre outras.

É possível gravar as informações de usuário e senha de diversos sites no gerenciador de sites do programa, incluindo opções de login e tipo de conexão. Em sua tela principal o programa exibe uma janela de navegação com pastas e arquivos locais lado a lado com a listagem de pastas e arquivos no servidor, acima das duas janelas fica uma tela que exibe todas as operações realizadas, com os comandos do programa e as respostas dos servidor. Na parte de baixo da tela fica a fila de transferência, que mostra quais transferências estão ativas e quais ainda vão começar.”(Fonte: Superdownloads)

CoffeeCup Free FTP:

“Cliente FTP com suporte para arrastar e soltar, facilitando as operações de upload e download. Permite a utilização de um número ilimitado de contas FTP, continua downloads interrompidos, transfere arquivos no modo binário, ASCII e modo automático.“(Fonte: Superdownloads)

Com esses softwares já podemos conseguir ótimos resultados em nossos projetos e ficar despreocupados com relação a uma possível multa que podemos levar por usar software pirata. O ideal seria só utilizar softwares gratuitos para diminuir os nossos custos, mas as vezes acabamos criando uma certa necessidade de alguns softwares específicos, mas mesmo assim podemos diminuir os nossos custos, pagando apenas a licença de um ou outro software que não temos como trocar e utilizando em combinação com esses gratuitos.

Os softwares citados no post são encontrados em qualquer site de downloads como por exemplo o Superdownloads(www.superdownloads.com.br) onde tirei a maioria das informações sobre eles.

Olá!
Hoje irei passar algumas referências para você que atua com desenvolvimento web, mas especificamente para os programadores. Esses sites na verdade são bancos de códigos em diversas linguagens para você utilizar no seu aprendizado ou até mesmo adaptar para algum sistema que você precise desenvolver.

Primeiramente os sites nacionais:

Código Livre
Segundo o site, conta com mais de 800 códigos divididos em 11 categorias em 11 linguagens diferentes.

Código Fonte.net
Além de contar com uma grande quantidade de códigos fonte, ainda possui tutoriais e artigos sobre diversas linguagens.

Código Fonte.com.br

Possui diversos códigos e também artigos, tutorias, vídeo-aulas e downloads de softwares relacionados a área.

Alguns internacionais:

Hot Scripts
Na minha opinião o melhor site de scripts para download. Possui mais de 41 mil códigos separados em mais de 1000 categorias.

InfoScripts
Possui mais de 5 mil códigos.

Your Free Scripts
Site com aproxidamente 20 mil códigos em diversas linguagens.

Advance Scripts
Site também com uma grande variedade de scripts.

Esses são os sites que utilizo como referências para meus trabalhos. Caso conheça mais algum interessante fique a vontade para comentar!

É cada vez mais comum ouvirmos falar em Cloud Computing, ou Computação nas nuvens, que siginica que cada vez mais iremos utilizar a internet para realizarmos tarefas comuns na nossa rotina diária. Também passaremos a utilizar dispositivos movéis, como celulares e pdas, para realizar essas tarefas.
Recentemente o jornal da globo fez uma matéria juntamente ao Google falando um pouco sobre o futuro da computação. Para ler a matéria no site do G1 clique aqui ou veja o vídeo abaixo.

A Microsoft não quer ficar para trás nessa nova tendência e deve anunciar ainda em outubro em uma conferência de desenvolvedores em Los Angeles o Windows Cloud que seria voltado para desenvolvedores de serviços e aplicações na web. Esse sistema não irá substituir o Windows 7.
Se tudo ocorrer como as empresas esperam, teremos em um futuro próximo uma inclusão digital cada vez maior já que os pcs não precisaram ter uma configuração muito forte para acessar as informações já que elas serão processadas em servidores web e retornadas para o usuário, tornando o preço dos equipamentos cada vez mais baixos.
Apesar de o Cloud Computing ainda ter muito o que avançar, nós desenvolvedores web devemos ficar atentos a essas mudanças, pois abrirá um espaço grande para que nós passemos a oferecer softwares como serviço na web. Basta ter uma idéia e começar a desenvolver.

Bom dia,

Hoje irei apresentar um exemplo completo de Ajax com Php, usando as funções do post Anterior. Apesar de ser um exemplo bem simples, partindo dele conseguimos fazer muitas coisas em Ajax.

No nosso exemplo teremos um campo texto que após digitarmos e tirarmos o foco do campo, esse texto irá aparecer em uma div. Primeiramente temos o arquivo index.php:

<html>
<head>
<title>Exemplo Ajax</title>
<script language = “javascript”>
function openAjax()
{
var ajax;

try
{
ajax = new XMLHttpRequest();
}
catch(ee)
{
try
{
ajax = new ActiveXObject(”Msxml2.XMLHTTP”);
}
catch(e)
{
try
{
ajax = new ActiveXObject(”Microsoft.XMLHTTP”);
}
catch(E)
{
ajax = false;
}
}
}
return ajax;
}

function AbrePagina(texto,div)
{
if(document.getElementById)
{
var exibeResultado = document.getElementById(div);
var ajax = openAjax();
pagina = “ajax.php?texto=” + document.getElementById(texto).value;
ajax.open(”GET”, pagina , true);
ajax.onreadystatechange = function()
{
if(ajax.readyState == 4)
{
if(ajax.status == 200)
{
var resultado = ajax.responseText;
exibeResultado.innerHTML = resultado;
} else
exibeResultado.innerHTML = “Erro..”;

}
}
ajax.send(null);
}
}

</script>

</head>
<body>
<form name = “form1″ action = “”>
Texto: <input type = “text” name = “texto” id = “texto” onblur =”AbrePagina(’texto’,'divTexto’);” >
</form>
<div id = “divTexto”>Digite o texto no campo acima!</div>
<br>
Raphael Santos<br>
<a href = “http://www.raphaelsantos.com.br”>www.raphaelsantos.com.br</a> <br>
<a href = “http://www.raphaelsantos.com.br/blog”>www.raphaelsantos.com.br/blog</a>
</body>
</html>

Nesse arquivo temos um campo texto de formulário com o nome de “texto” que no onBlur dele chamamos a nossa função AbrePagina. Abaixo desse campo temos a div que exibirá o nosso texto. Podemos notar que entre as tags <head> temos as nossas funções Ajax do post anterior.

ajax.php:

<?
$texto = $_GET["texto"];
print “<B>” . $texto . “</B>”;

?>

Esse arquivo é bem simples. Na primeira linha estamos recebendo o texto digitado e na segunda linha estamos exibindo o nosso texto em negrito.

Apesar de ser um exemplo básico, adaptando ele poderiamos fazer uma validação de cpf/cnpj, verificação de senha, dizer se ela é fraca, média ou forte, validar e-mail e até fazer algum cadastro em uma base de dados.

Baixe aqui o nosso exemplo completo.

Visualize o nosso exemplo aqui.

Para quem atua com desenvolvimento web é muito comum precisar trabalhar com Ajax. Nesse post irei passar um exemplo de função que utilizo nos meus trabalhos.

Primeiramente temos a função openAjax(), essa função inicia o Ajax no navegador do usuario

function openAjax()
{
var ajax;

try
{
ajax = new XMLHttpRequest();
}
catch(ee)
{
try
{
ajax = new ActiveXObject(”Msxml2.XMLHTTP”);
}
catch(e)
{
try
{
ajax = new ActiveXObject(”Microsoft.XMLHTTP”);
}
catch(E)
{
ajax = false;
}
}
}
return ajax;
}

A seguir temos a função que executá a ação a AbrePagina():

function AbrePagina(campo,div)
{
if(document.getElementById)
{
var exibeResultado = document.getElementById(div);
var ajax = openAjax();
pagina = “ajax.php?campo=” + document.getElementById(campo).value;
ajax.open(”GET”, pagina , true);
ajax.onreadystatechange = function()
{
if(ajax.readyState == 4)
{
if(ajax.status == 200)
{
var resultado = ajax.responseText;
exibeResultado.innerHTML = resultado;
} else
exibeResultado.innerHTML = “Erro..”;

}
}
ajax.send(null);
}
}

Lembrando que a nossa pagina de Ação poderia ser tanto em Asp como em php. Para utilizar essa função bastaria chamar ela em algum botão ou até mesmo dentro de outra função da seguinte maneira:

buscaAjax(’campo’,'DivAjax’);

Sendo que campo seria o parametro que iriamos passar para a pagina processar e DivAjax seria onde o resultado do Ajax iria aparecer.

No Próximo post irei mostrar um Exemplo mais completo de ajax com php.

Até lá!