O que é SEO - search engine optimization

SEO (search engine optimization) em português significa otimizar o site nos mecanismos de busca (Google, Bing...). O que seria isso?

Os mecanismos de busca possuem robôs ou spiders (aranhas) que percorrem os sites com o objetivo  de indexar seus devidos conteúdos, ou seja, armazenar em uma base de dados, todos os textos, imagens (nome da imagem, atributos alt e tittle) e arquivos. Com esses dados armazenados, os mecanismos de busca fazem com que através de uma consulta por palavras-chave, seja retornado um resultado relevante ao que está sendo pesquisado.

O papel do SEO é facilitar, ajudar e promover o conteúdo contido no site a ser entendido e indexado pelos mecanismos de busca. Para que isso seja realizado de maneira eficaz, existem várias técnicas que facilitam esse objetivo.
Essas técnicas podem ser divididas em fatores ONPAGE e OFFPAGE.

SEO ONPAGE

Caracteriza-se especificamente no conteúdo do site. Fazer com que determinadas “palavras-chave” sejam mais significativas e possam ser frutos de visitas através de consultas nos mecanismos de busca.
Utilizar um bom título da página juntamente com algumas tags como meta title, meta description, h1, h2,h3, strong a(link) entre outras, já fazem parte de uma estratégia SEO.
Os links são muito importantes principalmente quando o texto dele corresponde ao conteúdo que será apresentado após a visualização do mesmo.

SEO OFFPAGE

Esse fator corresponde ao que será “ligado” ao seu site através de outros. Um exemplo bem claro seria a quantidade de links de outros sites apontando para o seu site. Porém não basta apenas ter links para seu site e sim ter links relevantes.
Essa relevância parte de alguns princípios como tempo que o link existe, Page rank da URL, texto contido nele entre outros.

Em breve especificarei melhor os fatores ONPAGE e OFFPAGE e serei mais profundo nas técnicas de SEO.

Como deixar o menu selecionado - php e codeigniter

Olá, hoje vou mostrar como fazer com que o link da página atual do site fique diferente, ou seja aplicar uma classe CSS para que o usuário perceba que está na página daquele link.

Vamos usar a class URI do Codeigniter.

Essa classe não é necessário ser chamada pelo controller ou pelo autoload, ela é carregada automaticamente.

A principal função a ser usada será $this->uri->segment(n).  Onde "n" corresponde ao número do segmento.

Vou aproveitar e ir mais profundo na questão dos links e vou fazer a função funcionar com sublinks. Vamos Lá:

Uma hierarquia da seguinte forma:

1. Criação de sites
1. Dinâmico
2. Estático
2. Web Marketing 
1. SEO
2. SEM

Primeiramente teríamos que criar 2 controllers, um para criação de sites com o nome "criacao" e para web marketing "webmarketing"

Se não houver parâmetros nas funções ficaria assim:

Controller criacao:

class Criacao extends Controller{

function Criacao()
       {
            parent::Controller();

       }

function Index(){

      $this->load->view("nome_da_view");

      }

function site_dinamico(){

      $this->load->view("nome_da_view");

      }

function site_estatico(){

      $this->load->view("nome_da_view");

      }

}

---------------------------------------------------------------------------

Controller webmarketing:

class Webmarketing extends Controller{

function webmarkting()
       {
            parent::Controller();

       }

function Index(){

      $this->load->view("nome_da_view");

      }

function seo(){

      $this->load->view("nome_da_view");

      }

function sem(){

      $this->load->view("nome_da_view");

      }

}



OK. Depois dos controllers, vamos agora para o menu em HTML, que de preferência seria um include, que é chamado através da página da seguinte forma:

 


Esse arquivo seria "menu.php", vamos para ele com o print em Web Marketing:

Vamos as explicações... Antes de mais nada, foi definida uma variável $sel = ""; no topo do include.
Ela servirá para fazer a verificação das páginas e definir uma class do css nomeada de "select" caso estejamos nela.

Normalmente o $this->uri->segment(1) pega o nome do controller o $this->uri->segment(2) pega o nome da função  e respectivamente os demais números pegarão os argumentos das funções. No nosso caso, sem argumento.

Existe um Link "Web Marketing"  e os sublinks Práticas SEO e SEM. No link a verificação é um pouco mais complexa, pois temos que saber a quantidades de segmentos que existe na URL e consequentemente evitar que o link e sunlinks fiquem selecionados.


O if da linha 82, verifica se o controller é webmarketing e se existe apenas 1 segmento na URL, ou seja o Index do controller. Caso seja o controller e apenas 1 segmento, é aplicado o valor com o nome da class CSS na variável, se não, a variável fica em branco.

Nos sublinks a verificação é mais simples, a condição é apenas no o segmento 2, ou seja, a função, correspondente a página.


Lembrando que nessa estrutura a index.php da URL já foi removida. Caso queria saber como remover veja http://imarlus.blogspot.com/2009/12/como-remover-o-indexphp-da-url-no.html

Qualquer dúvida ou melhora do código... estamos aqui!


 

CMS Sistema de gestão de Conteúdos

Já a algum tempo venho estudando outras maneiras de se criar site. O principal objetivo é ganhar tempo e desenvolver algo de qualidade. Nesses estudos descobrir plataformas bem eficazis e hoje em dia utilizo elas em sites instiucionais ou até mesmo alguns dinâmicos onde os CMS disponibilizavam plugins, como para Imobiliárias, galeria de imagens, entre outros, inclusive e-commerce.

Todo o sistema pode ser gerenciado online, ou seja, de qualquer lugar que possua conexão com a internet. Para manipular os conteúdos como notícias, eventos, imagens, entre outros, não é necessário conhecimento em HTML, linguagem de programação, ou termos técnicos, basta apenas ser familiarizado com os editores de texto comum (Microsoft Word, por exemplo).

Os layouts, conhecidos também como "Templates", podem ser inseridos e alterados com muita facilidade. Porém o ideal é uma customização de cores e padrões de acordo com a marca, ou seja, a identidade visual de sua empresa.

A maioria deles também tem poderosas ferramentas para SEO (search engine optimized), e podem ajudar em muito nas indexções para o Google.

Existem vários CMS muito bons, alguns que se destacam é o wordpress, Joomla e blogger.

Quanto mais estudos sobre o assunto, mais opções temos para desenvolvermos algo.

SEO - Search Engine Optimization

Olá.

Através de várias leituras na internet sobre SEO (Search Engine Optimization), vou expressar um pouco do que aprendi e o que pratiquei sobre esse termo que está sendo cada vez mais importante para os sites.

Antes de mais nada, SEO significa otimizar o site e suas devidas páginas nos mecanismos de busca, na minha opinião, otimizar o site para o Google. Todos sabemos que exitem outros mecanismos (Yahoo, Bing...), porém na minha opnião, o Google é o principal foco, tanto por qualidade quanto por resultados.

Em breve vou escrever algumas táticas e experiências que obtive com  o SEO.

Grande abraço a todos.

T+.

Guia do usuário codeigniter em português

Olá pessoal.

Sei que é facil encontrar, mas para quem queira ter uma referência, segue o guia do codeigntier traduzido para português.


Sei que ainda existe alguns tópicos em inglês, mas o pessoal está aos poucos concluindo.

T+.

Galeria de foto simples com jquery

Hoje vou mostrar como fazer uma galeria de imagens simples com jquery. Basicamente vamos apenas alterar o SRC da imagem e transporlá-la para outra imagem.

Existem várias formas diferentes para trabalhar com o 'SRC' das imagens. Caso esteja chamando as imagens através de um banco de dados, onde existe a imagem original e a miniatura, podemos colocar o caminho da imagem original em um input hidden para que esse input seja enviado para o 'SRC', além de colocar ou no atributo 'title' ou no 'alt' o id da imagem. Caso seja apenas um imagem (sem miniatura) fica ainda mais fácil, pois pegamos o 'SRC' da imagem clicada e enviamos para ser mostrada maior e alimentamos o 'alt' ou 'title' com os valores manuais.

Obs: as linha em laranja serão usadas apenas em caso de miniatura/amplianda, no caso uma imagem maior e outra menor, caso usem a mesma imagem tanto em miniatura quanto a ampliada, desconsiderem essas linhas.

Vamos para o HTML:

<img src='primeira-a-ser-exibida.jpg' id='foto_ampliada'  >

<img src='caminho' class='mini' alt='1' title='1' >

 <input type="hidden" size="1" value="caminho-da-imagem-grande" id="mini1" />

<img src='caminho' class='mini' alt='2' title='2' > 

<input type="hidden" size="1" value="caminho-da-imagem-grande" id="mini2" /> 

<img src='caminho' class='mini' alt='3' title='3' >  

<input type="hidden" size="1" value="caminho-da-imagem-grande" id="mini3" /> 

<img src='caminho' class='mini' alt='4' title='4' > 

<input type="hidden" size="1" value="caminho-da-imagem-grande" id="mini4" />  

Vamos para o Jquery

$(document).ready(function(){
                           $(".mini").click(function(){
                                                   

                                                     var cam = $(this).attr('src');
                                                    

                                                     var id = $(this).attr('alt');
                                                     var cam = $("#mini"+id).val();

                                                     $("#foto_ampliada").attr('src',cam);                                                     
                                                     })
}) // x ready


Após chamar a função ready (padrão), vamos as funções:

A as miniaturas vão conter a classe 'mini' que ao serem clicadas, caso seja através do banco de dados será pego o valor do atributo 'alt' e através dele vamos pegar o valor do input hidden.

Simples não?

Através desse princípio podemos ir mais fundo nessa função.


Podemos colocar um preload em jquery para que enquanto o 'SRC' é alterado informar algo para o usuário.

Grande Abraço!

Validação simples de formulário com Jquery utilizando classes do CSS

Olá pessoal.

Confesso que uma das piores etápas que considero para fazer formulário é a validação. Após alguns estudos desenvolvi uma maneira bem simples de evitar que os campos não sejão enviados em branco.

Vou mostrar um maneira bem simples de validar (fazer com que os campos não sejam enviados em branco) formulário em jquery.

Vamos começar pelo formulário:

Reparem que coloquei um id na tag form, isso para aproveitá-lo atrevés do jquery.
Nos campos que serão obrigatórios é necessário definir o atributo 'title', que será usado no alert caso o campo esteja em branco e a class 'val', na qual o jquery irá varrer para a validação.

Vamos agora analisar o arquivo js:

Depois das funções básica do ready, vamos usar o id configurado no formulário para após submeter o formulário ele fazer as verificações.
Na linha 6 defino a variável que irá contar quantas classes 'val' existem no formulário. Através dela crio um laço 'for' para varrer uma por uma.
Na linha 9 a variável 'len' é responsável por verificar a quantidade de caracteres no input. para quem não conhece a função eq() do jquery, é como se os elementos definidos por ela se tornacem um array. Por exemplo: dentro de uma div(class='prg') existem duas tags P. Para selecionar a primeira tag utilizamos

$(".prg p").eq(1).html(); // esse exemplo pegaria o html dentro da 1º tag p da class prg;

Na linha 10, como citei, é reponsável por pegar o title do input para mostrar no alert caso esteja em branco.
Após a verificação através do if e ocorrer tudo certo, o formulário é enviado.

Espero que ajude no corre-corre do dia-dia.

;D