O Que É Um Sitemap?

Basicamente, Sitemap ou Mapa do Site é uma lista das páginas do seu site, atualmente existem dois tipos de sitemap, um deles é uma página HTML Tradicional onde é mostrado de forma mais clara, utilizando links, como funciona a organização do site, sua hierarquia de sessões e páginas internas, é mais utilizado por humanos para chegar com maior facilidade aonde se deseja no site, porém também serve para os robôs durante o processo de indexação do site, veja um exemplo de sitemap HTML aqui.

O outro tipo é chamado de XML Sitemap e tem praticamente e mesma idéia do anterior, porém é destinado aos mecanismos de busca. Este tipo de sitemap consiste em um arquivo .xml onde estão relacionandos as URL’s do site, porém não estarão em forma de links como no Sitemap em HTML e juntamente com os endereços estarão outras informações chamadas de metadados. Confira um exemplo de XML Sitemap aqui.

Para Que Serve o XML Sitemap?

O XML Sitemap é um recurso que auxilia na indexação do site, criar um sitemap e divulgar para os mecanismos de busca aumenta a garantia de que eles terão conhecimento de todas as páginas do seu site, isso é bastante útil ainda se o seu site é novo ou não possui muitos links apontando para ele, pois os robôs indexadores chegam ao seu site através de links que encontram pela internet e através das URL’s especificadas no XML Sitemap.

Os XML Sitemap também dão maiores informações sobre as páginas relacionadas dentro dele, pois além do endereço eles especifição a relevância das páginas em relação ao seu site, a data da última modificação e também de quanto em quanto tempo esta página é atualizada. O XML Sitemap não subistitui o trabalho normal do mecanismo de busca, ele apenas adiciona mais este recurso.

Como Fazer um XML Sitemap?

Você tem duas opções na hora de fazer um XML Sitemap, podendo fazê-lo manualmente seguindo o protocolo do Sitemap ou então optar por escolher um gerador automático.

Fazendo Manualmente: para fazê-lo manualmente é necessário seguir o formato do protocolo do sitemap que é composto por tags em XML, este formato está completamente documentado no site do próprio sitemaps.org.

Fazendo Automaticamente: para fazer um XML Sitemap automaticamente eu vejo uma diversidade de ferramentas que geram o código pronto por aí, porém uma que eu uso, gosto bastante e é muito boa chama-se xml-sitemap.com (a ferramenta é GRATUITA, porém tem um limite de até 500 páginas por site).

Para começar a gerar o seu Sitemap automaticamente no generator, você tem de:

• Inserir a URL do seu site;
• Escolha a freqüencia da qual o site é atualizado:
  None: não irá aparecer este atributo no .xml;
  Always: atualizado sempre;
  Hourly: atualizado toda hora;
  Daily: atualizado diariamente;
  Weekly: atualizado semanalmente;
  Monthly: atualizado mensalmente;
  Yearly: atualizado anualmente;
  Never: nunca mais será atualizado, ideal para páginas arquivadas.
• Escolher a Última Modificação:
  None: para opção de não aparecer no arquivo .xml;
  Use Server’s Response: Utilizar os dados do servidor;
  Use This Time: Colocar a data e hora desejada igual ao formato exemplificado.
• Escolher a Prioridade:
  None: para ignorar esta opção do arquivo .xml;
  Automatic Priority: o gerador irá decidir sozinho a prioridade da página.
• Clicar no botão START.

Iniciado o processo ele fará uma varredura procurando por páginas internas e no final ele te dá a opção de fazer o download do arquivo .xml e se preferir compactado com gzip. Eu acredito que nenhuma das ferramentas até hoje seja capaz de gerar um XML Sitemap perfeitamente, então eu indico que após você fazer o download do .xml que foi gerado, abra-o e verifique se realmente é dessa maneira que você pretendia que ele ficasse, caso não for, edite-o (seguindo o padrão) para que fique exatamente como você quiser. Lembrando que o generator não irá colocar no arquivo .xml as páginas que não tem link interno para ela.

Obs: É altamente recomendado que o arquivo sitemap.xml esteja localizado no diretório raiz do seu site e que você coloque no seu arquivo robots.txt o endereço onde está localizado o XML Sitemap, dessa maneira:

Sitemap: http://www.recoha.com/sitemap.xml

Obrigado e até a próxima ;].

O Que o Pessoal Está Fazendo?

Na maioria dos softwares utilizados para o desenvolvimento web seja ele WYSIWYG ou TEXTUAL, quando se pede para criar um novo documento HTML o programa gera uma página padrão com os códigos básicos para iniciar a construção do site, o que muita gente acaba fazendo é ignorando a linha do DOCTYPE sem saber ao certo a sua função, alguns nem se dão ao trabalho de procurar saber o que significa ou ao menos pensar qual será o DTD mais conveniente para o documento que ele irá criar e no piores casos chegam ao extremo de apagar a linha, achando ser inútil.

O Que é o DOCTYPE?

DOCTYPE, Document Type, DTD e Document Type Definition, são as mesmas coisas e na tradução para o português quer dizer: Declaração do Tipo de Documento. Uma DTD declara qual o tipo de sintaxe e quais as regras que se aplicam na marcação utilizada no desenvolvimento do site, assim como o conjunto de tags e atributos válidos para aquela linguagem.

Existem vários tipos de DOCTYPE, tanto para o HTML quanto para o XHTML sendo todos definidos pela W3C, abaixo você confere alguns tipos de DOCTYPE do XHTML.

DOCTYPE XHTML 1.0 Strict: Esta DTD não aceita elementos considerados deprecated (em desuso), é o mais rigoroso, pois exige que os padrões web sejam seguidos corretamente. É o DOCTYPE indicado para quem vai escrever código sem formatação e e irá utilizar as folhas de estilo (CSS) para isso.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

DOCTYPE XHTML 1.0 Transitional: Esta DTD é mais flexível quanto ao que pode e o que não pode ser utilizado no código, pois, como o próprio nome já diz, é uma DTD de transição que permite elementos deprecated. Indicado para os sites que não fazem a formatação através do CSS, justamente por aceitar atributos e tags de formatação considerados em desuso.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

DOCTYPE XHTML 1.0 Frameset: Esta DTD é indicada para quem utiliza frames, pois além de aceitar os elementos que a transitional aceita ele ainda permite elementos específicos utilizados nos frames.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Estas são as três DTD’s mais conhecidas do XHTML, mas existe ainda uma série de outras DTD’s para serem utilizados em documentos web, que você pode conferir no próprio site da W3C.

Por Que Utilizar o DOCTYPE?

O DOCTYPE não existe somente para declarar a sintaxe da linguagem usada no site, ele também é utilizado por navegadores para determinar como eles irão se comportar no momento de renderizá-los. Você provavelmente já deve ter feito algo que não foi exibido exatamente igual em todos os navegadores, isto pode ter ocorrido pela falta da declaração do DOCTYPE, pois os browsers tem modos particulares de interpretar e calcular as medidas do site, além de perderem tempo tentando “adivinhar” como renderizá-lo. Existem dois tipos de modos com que o navegador pode trabalhar, o mais antigo chamado de “Quirks Mode” e o mais atual chamado de “Strict Mode” ou “Standard Mode”, caso o DOCTYPE não seja encontrado alguns navegadores funcionarão em Quirks Mode (mais antigo) enquanto outros funcionarão em Standard Mode (mais atual), podendo trazer enormes dores de cabeça no desenvolvimento front-end.

Bom, isso é tudo que eu gostaria de ter escrito, espero ter contribuído com algo, obrigato e até mais. Abraços!

O Que É e Para Que Serve?

É um arquivo no formato texto (.txt) que funciona como uma espécie de filtro para os sistemas de busca, ou seja,  donos de websites utilizam este arquivo para dar instruções do que será permitido ou bloqueado de certas áreas ou sessões do seu site durante a indexação. O robots.txt é um arquivo de texto simples e nada complicado que precisa estar hospedado no diretório raiz do seu site, podendo ser criado em qualquer editor, até mesmo no bloco de notas ou com a ajuda de geradores on-line de robots.txt.

Logo abaixo temos um exemplo básico do conteúdo de um arquivo robots.txt. O User-Agent do exemplo é aonde declaramos para qual bot indexador as regras daquele bloco estarão valendo.

User-Agent: *
Disallow: /

Você pode especificar as mesmas regras para todos os bots colocando um * (asterisco) no User-Agent ou se você preferir pode escrever regras para um determinado tipo de indexador em particular já que cada um tem seu nome próprio. Por exemplo, indexadores de texto temos o bot do Google que é chamado de Googlebot, o do Yahoo! é o Slurp e o do MSN Busca é o MSNBot. Temos também indexadores de imagem que são chamados de Googlebot-Image para o agente do Google, yahoo-mmcrawler o do Yahoo e o da MSN o psbot.

Como Fazer Um robots.txt

Como eu disse é muito simples fazer um arquivo deste, basta você saber o que precisa e o que não precisa ser indexado do seu site, por exemplo, eu tenho um site e dentro deste site tenho algumas pastas pessoais de arquivos da faculdade, programas e fotos pessoais e também uma parte para o administrador do site onde somente eu tenho acesso, claro não gostaria que o google indexasse os arquivos destes diretórios. Veja o exemplo:

User-Agent: *
Crawl-delay: 10
Disallow: /facul
Disallow: /programas
Disallow: /fotos
Disallow: /admin
Sitemap: http://www.recoha.com/sitemap.xml


Este exemplo está dizendo para todos (*) os mecanismos de busca que todo o site pode ser indexado excluindo-se as pastas facul, programas, fotos e admin. No exemplo acima encontramos a instrução Crawl-delay que não é muito utilizada, mas que determina o tempo de indexação da página, ou seja, alguns bots indexam os sites tão rapidamente que causam lentidão no site e consequentemente na navegação dos usuários que estiverem visitando o site neste momento. O Google, por exemplo, faz o seu serviço mais lentamente que os demais mecanismos e por isso não necessita de instrução específica. Esta instrução é necessária apenas em sites muito grandes que tenham enorme quantidade de páginas. O número a frente da instrução é medido em segundos e de um modo geral, 10 segundos é tempo suficiente.  [update] Utilizando o exemplo acima e após eu ter escrito como fazer um XML Sitemap, eu acrescento na última linha, como especificar o endereço do sitemap no arquivo robots.txt, fazendo isso você ajuda a garantir que o seu arquivo sitemap.xml será encontrado na hora da indexação [/update].

Geradores de Robots.txt on-line

• Google Webmasters Tools
  
• Marketing de Busca
• mCanerin
• MestreSEO

Bom, isso é tudo que gostaria de ter abordado, espero que eu tenha esclarecido algumas dúvidas e contribuído com algo. Abraços e até mais.

Eu estou disponibilizando os arquivos em PDF abaixo direto do servidor do recoha.com, mas obviamente não foi eu quem os escreveu, os créditos são todos do site Added Bytes mantido pelo Dave Child, que inclusive você irá encontrar diversos outros Cheat Sheet (folha de trapaças) que é como ele chama por lá.

Você pode realizar o download clicando em HTML, CSS e JavaScript. Tá aí a dica, abraços e até mais.

O Que É e Como Funciona o PageRank?

PageRank é o sistema de classificação de páginas desenvolvido em 1995 na Universidade de Stanford por Larry Page e Sergey Brin, daí a origem do nome. Esse sistema funciona contabilizando “votos” pela internet, todos nós sabemos que a web funciona através de hiperlinks e esses votos na verdade são links de uma página para outra, o algoritmo do PageRank tem diversos outros detalhes que causam variação na pontuação, mas de acordo com a relevância e a quantidade de votos um número de 1 a 10 será atruibuído para o site sendo 10 o mais importante.

Apenas ter alguns links para sua página não significa que sua classificação será boa, por exemplo, o Google considera um link da página A para a página B como um voto, porém ele não contabiliza só o volume de links que uma página recebe, ele analisa também a página que está dando o voto, ou seja, votos dados por sites mais importantes e de alta qualidade tem maior peso em relação a sites menores. Exemplificando, se você tem um link para o seu site de uma página popular e com o PageRank alto ele irá contar muito mais do que outros links que você tenha, vindo de sites menores com PageRank baixo e pouco relevante.

No Que Influencia Um PageRank Alto?

O PageRank é o coração do Google, sendo a base para todas as ferramentas de busca dele e quando uma pesquisa é realizada, o Googe faz uma combinação do PageRank ao resultado das buscas para que seja mostrado o site mais relevante possível com o termo desejado, ou seja, se o seu site tem as palavras pela qual a pessoa realizou a busca e ainda tem um PageRank alto, então ela será um dos primeiros na lista de resultados a serem exibidos para o usuário. Acompanhe o exemplo abaixo.

No exemplo, as bolinhas representam um site, o site  de maior PageRank é a bolinha amarela que recebe vários votos dos outros sites, tanto sites pequenos quanto médios e grandes. O segundo maior PageRank é o da bolinha azul que tem vários votos assim como a bolinha amarela, porém os sites de que ele recebe voto são de PageRank menor e por isso ele não é tão quanto o amarelo. O terceiro maior PageRank é o da bolinha vermelha superior, ela recebe apenas um voto e tem uma classificação alta, mas esse voto da qual ela recebe é do site com maior PageRank de todos. Depois temos a bolinha verde maior da direita e a vermelha menor da esquerda empatados com o mesmo PageRank, justamente por receberem apenas um voto cada e do mesmo site. A bolinha verde da esquerda é a próxima da classificação, ela recebe apenas um voto da bolinha vermelha que não tem um PageRank muito alto, mas mesmo assim a bolinha verde da esquerda é considerada mais importante que as últimas bolinhas menores que não recebem nenhum link.

Bom, isso é tudo que tinha para escrever sobre o PageRank do Google. Não tinha a pretenção de abordar completamente o conteúdo mais acho que escrareci bastante dúvidas. Obrigado e até a próxima.

O Que São Meta Tags e Para Que Servem?

Meta Tags ou Meta Dados são informações sobre os dados que contém no site, ou seja, é uma pequena descrição do conteúdo da página, tipo de codificação usada no desenvolvimento, idioma do site assim como seu seu autor e outras informações.

Servem para que seu site seja melhor encontrado em pesquisas realizadas em sites de busca, pois muitos sistemas de busca dão elevada importancia a elas para classificarem o site, a maioria deles indexa os dados das meta tags de descrição e palavras chaves (description e keywords respectivamente) como sumários da página.

O uso dos meta dados deve obviamente ser moderado, você não precisa utilizar todas as meta tags existentes no seu site, utilize aquelas que realmente são importantes.

Aonde Colocar e Quais Utilizar?

Todas as meta tags devem estar localizadas dentro das tags de cabeçalho <head> e </head>. Eu considero indispensável a utilização das tags de codificação do site, de palavras chave e de descrição do site, mas claro existem as outras não menos importantes que devem ser utilizadas como a de linguagem natural do site e a de indexação por sistemas de busca. Confira abaixo uma listagem e explicação mais precisa de cada uma das meta tags.

Content-type: Define o tipo de codificação de caracteres em que o site está escrito, considero a tag mais importante de um documento web e sempre deve ser usada para que os visitantes do seu site possam facilmente mapear a codificação para Unicode. Eu costumo definir os documentos que eu desenvolvo com o UTF-8 por ser a melhor escolha para mim e para a maioria dos propósitos dos documentos, porém não é a única possibilidade, você pode ficar por dentro da lista completa segundo especificação da IANA - Internet Assigned Numbers Authority.

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

Keywords: É nesta meta tag que você coloca as palavras-chave do seu site, ela é muito utilizada por sistemas de busca para indexar o site. Para inserir as keywords você deve separá-las por vírgula, eu não sei exatamente se há um limite de palavras-chave, mas eu costumo utilizar o bom senso, coloco palavras realmente coerentes com o conteúdo do site sem se preocupar com a quantidade e no máximo colocar uma ou outra palavra no singular e plural, por exemplo: site, sites, servidor, servidores, etc… Lembrando que o uso exessivo de keywords pode ser considerado como uma técnica de Black Hat (fraude) por buscadores e seu site será penalizado.

<meta name="keywords" content="palavras, chave, separadas, por, virgulas" />

Description: É a meta tag que contém a descrição do site, é o conteúdo desta tag que o buscador mostrará como resumo do conteúdo do seu site. Evite frases muito grandes e utilize palavras das suas keywords na frase. Não faça um texto, seja direto.

<meta name="description" content="Breve descrição do site" />

Content-language: É o idioma utilizado no site, essa meta tag pode ser utilizada por sistemas de busca para classificar conteúdos por idiomas. Confira alguns exemplos:

• pt : Português
• pt-BR : Português do Brasil
• en : Inglês
• en-US : Inglês dos EUA
• en-GB : Inglês Britânico
• fr : Francês
• de : Alemão
• es : Espanhol
• ja : Japonês

<meta http-equiv="content-language" content="pr-BR" />

Robots: Esta meta tag é utilizada pelos sistemas de busca para saber as informações de indexação da página. Veja a lista de valores que podem ser escritos.

• all : é o valor padrão, com ele o sistema de busca não recebe nenhuma informação.
• index : com esse valor os sistemas de busca podem indexar o site normalmente.
• follow : quer dizer que os robôs podem indexar e ainda seguir os links contidos no site.
• noindex : com este valor os links do site podem ser seguidos porém o site não é indexado.
• nofollow : assim a página será indexada e os links não serão seguidos.
• none : os sistemas de busca podem ignorar a página sem realizar nenhuma tarefa.

<meta name="robots" content="all" />

Author: Você pode colocar dentro dessa meta tag o nome de quem criou o site, ou seja, o autor do documento. Caso queira inserir mais de um nome separe-os por vírgula.

<meta name="author" content="Fulano da Silva, Ciclano dos Santos" />

Copyright: Com esta meta tag, você pode declarar os direitos autorais da página.

<meta name="copyright" content="© 2008 recoha.com" />

Pragma: Com esta meta tag, o navegador na hora que estiver carregando o site ele não irá armazenar seu site em cache. Existe outra tag parecida com essa que é o “cache-control:no-cache” porém ela é reconhecida somente pelo HTTP versão 1.1, enquanto o Pragma é reconhecida por qualquer versão.

<meta http-equiv="pragma" content="no-cache" />

Refresh: Esta meta tag é utilizada para especificar ao navegador em quanto tempo ele irá recarregar a página ou carregar uma nova página. O tempo é medido em segundos e você pode ou não especificar uma URL para ser redirecionado.

<meta http-equiv="refresh" content="15;url=http://www.thechessman.org" />

Generator: Nessa meta tag você pode dizer qual o software foi utilizado para construir o site, isso  é utilizado como forma de medir popularidade de cada produto.

<meta name="generator" content="Dreamweaver 8" />

Rating: Esta meta tag serve para indicar a classificação do conteúdo da página, ou seja, serve para classificar a censura. Pode ter os seguintes valores:

• general : significar que o conteúdo é para qualquer idade.
• 14 years : para dizer que a censura é de 14anos.
• mature : para pessoas com 18 anos ou mais.

<meta name="rating" content="general" />

Expires: Com a utilização desta meta tag, você estará dizendo a partir de quando seu site será considerado como expirado. Sistemas de busca ao visitarem seu site podem deletar referências da sua página em seus banco de dados caso percebam que esta meta tag informa que seu site está expirado.

<meta http-equiv="expires" content ="Sun, 20 jul 2008 12:00:00 GMT" />


Considerações Finais

Não abuse das meta tags, elas fornecem informações que muitas vezes são utilizadas para classificar e rankear seu site, por isso não exagere no uso das mesmas. Se usadas com conciência os pontos negativos serão praticamente anulados, visto que a inteçãos dos meta dados são focar benefícios. Abraço e até a próxima.

]]> http://www.recoha.com/2008/07/as-xhtml-meta-tags-significado-e-utilizacao/feed/ http://www.recoha.com/2008/06/projeto-irapida-telecom-primeiras-consideracoes/ http://www.recoha.com/2008/06/projeto-irapida-telecom-primeiras-consideracoes/#comments Mon, 30 Jun 2008 13:50:35 +0000 ReCoHa http://www.recoha.com/?p=15 Bom, como eu disse no primeiro post deste blog que iria escrever também sobre bons exemplos de projetos web da qual desenvolvo/participo, este que iniciarei hoje é um bom exemplo.

Acabo de ingressar no grupo Nabhan de Tecnologia, um grupo com 3 empresas: Irapida Telecom, Virtual Age e Infomark com sede em Cianorte no noroeste do Paraná. Lá dentro, eu assumi a função de Webdesign do setor de Marketing e minha primeira tarefa foi reformular o atual site da Irapida Telecom.

O Site Atual

Logo após ter recebido a tarefa fui visitar o site e fazer minha primeira análise. Conclusáo: logo na página inicial já existe um menu drop down para escolher qual a cidade da qual estaria recebendo as informações, logo me veio a cabeça “se a pessoa que não conheçe a empresa viu por aí alguma propaganda da Irapida e entrou no site para saber a respeito, terá de escolher a sua cidade caso ela esteja na lista ou pensar em uma cidade que fique mais próxima a sua ou então escolher qualquer cidade no menu somente para entrar no site e se informar sobre aquilo que procurava”, não é uma experiência muito boa para o usuário que talves queira apenas uma informação simples, como por exemplo, o telefone de contato da empresa ou saber o que a empresa oferece como serviço, entre outros.

Também não é uma boa opção o menu drop down para aquela pessoa que já é cliente da Irapida, mesmo que a cidade dele esteja listada no menu e já esteja desfrutando de um serviço oferecido pela empresa, ele terá de escolher a sua cidade pra simplesmente entrar na sua caixa de e-mail que tem o mesmo endereço para todos ou  então saber o telefone do suporte (que na verdade deveria dizer somente o da sua cidade já que o usuário teve obrigatóriamente de escolher na entrada do site a sua cidade).

Outro ponto negativo que apresenta esse menu drop down é a indexação por buscadores, procurando pelo conteúdo indexado do site da irapida, somente a página inicial está indexada em buscadores, ou seja, a empresa deixa de ganhar visitantes vindos deles e ainda perde de fazer um marketing gratuito e que tem bastante retorno.

Após escolher a cidade (verdadeira ou fictícia) para entrar realmente no site da irapida, eu percebi também um pouco de bagunça no conteúdo interno e um pouco de excesso na utilização de figuras, realmente como o meu gerente me disse é um site antigo, desatualizado e analizando-o com auxílio do Web Site Optimization eu comprovei com o resultado a consequência que o uso de muitas imagens trouxerãm para o site.

Tempo de download do site muito elevado, muitas requisições http e uma lista de recomendações a serem feitas para melhoria do site.

Finalizando, estamos no meio do processo de arquitetura da informação para reestruturar o conteúdo de forma a ser mais acessível e bem apresentado ao visitante, no próximo post eu escreverei sobre este processo e também como chegaremos ao novo layout do site. Obrigado e até a próxima.

Elementos de Bloco

Como o próprio nome já diz, elementos de bloco são aqueles que causam uma quebra de linha no fluxo da apresentação, que ocupam toda a largura da linha em que foi declarado, criando um linha antes e uma depois do local onde foi inserido. Elementos de bloco podem ter elementos de linha dentro deles e podem ser colocados dentro de outros elementos de bloco, porém não podem estar dentro de elementos de linha.

Lista de elementos definidos por padrão como bloco do XHTML Strict: address, blockquote, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, noscript, ol, p, pre, table e ul.
Esta lista de elementos é considerada de bloco, pois estes podem conter outros elementos de bloco dentro dele, sendo então considerados como tal: dd, dt, li, tbody, td, tfoot, th, thead e tr.

Elementos de Linha

Estes elementos diferentemente dos de bloco não ocupam a largura inteira da linha, eles se misturam com os elementos por perto, um bom exemplo disso pode ser visto quando exibimos o site e observamos que os elementos de linha não criam um quebra de linha. Elementos de linha podem ser colocados dentro de elementos tanto de bloco quanto de linha, porém só pode conter elementos de linha dentro deles.

Lista de elementos em linha do XHTML Strict: a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, input, kbd, label, q, samp, select, small, span, strong, sub, sup, textarea, tt e var.

Por padrão quando inserimos estas tags em nosso código XHTML, eles são mostrados no site seguindo as definições acima, mas você pode alterar como o elemento será exibido com a utilização do CSS, usando-se a propriedade display. Existem 3 tipos de exibições o bloco, a linha como já foi dito e também o hidden ou invisível na tradução que não exibirá o elemento na visualização do site, mas isso é assunto para outra hora, por enquanto é só e na próxima postagem estarei iniciando uma série de posts descrevendo os passos que eu realizei no projeto que estou trabalhando atualmente que descrevi no início deste post. Até mais e obrigado!

Novos Métodos de Desenvolvimento

No post anterior desta série eu disse que os métodos de desenvolvimento que utilizam tabelas e editores visuais, têm inúmeras desvantagens em relação aos Padrões Web, neste último post será abordado o que são os Web Standards, como funciona o método de desenvolvimento em camadas e quais as vantagens com a sua utilização.

Os Web Standards

Tim Berners-Lee o criador da World Wide Web, sonhava para sua invenção um espaço comunitário onde se pudesse compartilhar informações. Através da criação de sites corporativos, educacionais e sociais os desenvolvedores Web puderam tornar este sonho uma realidade, porém naquela época em que a Internet crescia exponencialmente em conteúdo e informações, havia uma necessidade de orientações para que a Web se desenvolvesse utilizando seu pleno potencial, criaram se então os Web Standards que pode ser definido como um conjunto de normas, diretrizes e recomendações feitas pelo World Wide Web Consortium (W3C), destinados a instruir fabricantes, projetistas e desenvolvedores para o uso de práticas que possibilitem uma Internet acessível a todos, independentemente dos dispositivos de acesso ou de suas necessidades especiais.

O Método de Desenvolvimento em Camadas

O método de desenvolvimento em camadas significa, basicamente, desenvolver sites e aplicações para Internet utilizando os Web Standards, pois os próprios Padrões Web recomendam usar cada tecnologia para o propósito único a qual ela foi criada, ou seja, o HTML é responsável pela camada de conteúdo, o CSS para a camada de apresentação e o JavaScript DOM para a camada de comportamento.

Camada de Conteúdo (HTML/XHTML)

Sem dúvida é a camada mais importante de todas, é aonde se encontra a parte mais preciosa do site, o conteúdo, aquilo que realmente faz a diferença. Para desenvolver esta camada são utilizadas as linguagens de marcação de hipertexto, o HTML/XHTML.
É na camada de conteúdo que o desenvolvedor se preocupará com a semântica das tags de marcação, pois um código limpo, bem estruturado e semanticamente correto é um excelente ponto de partida para a implementação das duas próximas camadas do desenvolvimento.

Camada de Apresentação (CSS)

Como o próprio nome já diz, é na camada de apresentação que o site ganha formatação e é estruturado, é com as Folhas de Estilos em Cascata (CSS) que o layout é aplicado ao conteúdo, onde se define as cores da fonte, fundos, posição dos elementos na página e todas as outras definições relacionadas à parte estética. É nesta camada que as imagens de cunho decorativo são inseridas e não mais na camada de conteúdo como nos antigos métodos.

Camada de Comportamento (JavaScript DOM)

A camada de comportamento deve ser vista como uma parte extra de uma página Web, é nessa camada que se usa o JavaScript juntamente com o padrão DOM (Document Object Model) para dinamizar o site, tornando-o mais interativo. Refere-se a esta camada de comportamento como extra justamente porque o site ou a aplicação deve funcionar perfeitamente na ausência dela ou caso não haja suporte ao JavaScript.

Novos Resultados

1. Código Simplificado
2. Ganhos Significativos no Download do Site
3. Facilidade Para Criar Versões de Layout
4. Melhor Visibilidade em Buscadores
5. Desenvolvimento Independente
6. Aumento de Produtividade
7. Redução de Custos
8. Maior Acessibilidade a Usuário, Inclusive Deficientes
9. Compatível com Tecnologias

Bom, termino aqui esta série “Os Benefícios do Desenvolvimento Web Utilizando Web Standards”, onde fiz um resumão da minha pesquisa científica para o Trabalho de Conclusão de Curso.

Gostaria de deixar claro aqui que este trabalho está devidamente referenciado aos seus legítimos autores, justamente por se tratar de uma pesquisa científica. Se alguém desejar o .pdf do Volume Final me mande um e-mail por favor e lhe enviarei. Segue aqui o link para o download de toda a referência bibliográfica utilizado no trabalho. LINK

Obrigado a todos e abraços!

Há algum tempo eu tive acesso as Diretrizes para Webmasters do Google, decidi escrever sobre elas aqui, pois é um conteúdo rico para os desenvolvedores que eu não tinha conhecimento até então e que talvez alguém também não teve ainda.

Diretrizes para Webmasters

As diretrizes foram criadas para auxiliar os webmasters a desenvolverem sites que sejam melhor encontrados, indexados e classificados pelo Google. Eles recomendam que estas diretrizes sejam lidas e compreendidas para que os sites não venham a sofrer prejuízos devido a utilização de algumas práticas ilícitas, visto que uma vez penalizado o site não irá aparecer nos resultados do Google ou qualquer site parceiro.

Quando o Site Estiver Pronto

• Envie a URL e o Sitemap do seu site para o Google.
• Consiga que os sites importantes tenham links para o seu site.
• Envie seu site para diretórios relevantes, como o Open Directory Project e o Yahoo!

Diretrizes de Conteúdo e Design

• Construa um site com uma hierarquia clara e simples de links.
• Mostre aos usuários um mapa do site que relacione o tópico às partes importantes de seu site.
• Crie um site útil, com conteúdo claro e preciso.
• Pense nas palavras que os usuários digitariam para encontrar seu site e certifique-se de usa-lás.
• Tente usar texto, em vez de imagens, para exibir nomes, conteúdo ou links importantes.
• Verifique se as tags “TITLE” e os atributos “ALT” são descritivos e precisos.
• Verifique se há links quebrados e corrija o código HTML.
• Utilize um número razoável de links por página (menos de cem).
• Procure não utilizar páginas dinâmicas (aquelas em que a URL contém um caractere “?”), nem todo mecanismo de busca rastreia páginas dinâmicas tão bem quanto faz com as estáticas.

Diretrizes Técnicas

• Examine seu site em um navegador de modo texto como o Lynx, pois assim como você enxerga seu site neles, será o modo com que um sistema de busca enxergará seu site.
• Faça um arquivo robots.txt e coloque-o no seu servidor web, este arquivo informa aos spiders (sistemas buscadores) quais diretórios do seu site podem ou não serem rastreados.
• Se você adquirir um sistema de gerenciamento de conteúdo, veja se há disponibilidade de exportar o conteúdo para que o seu site possa ser rastreados pelos spiders.
• Utilize o arquivo robots.txt para evitar a indexação de páginas de pesquisa ou páginas geradas automaticamente que não agregam valor ao usuário.

Diretrizes de Qualidade - Princípios Básicos

• Crie páginas sempre pensando no seus público alvo, não engane eles ou apresente outro conteúdo para os sistemas de busca diferente daquele que exibe aos usuários.
• Evite truques e não participe de esquemas em que os links são utilizados para melhorar a classificação de seu site nos mecanismos de busca. Evite principalmente links em seu site direcionado para autores de spam ou para mals vizinhos na internet, isso pode prejudicar sua classificação.
• Não utilize softwares não-autorizados para ajudar na melhoria de classificação do seu site.

Diretrizes de Qualidade - Específicos

1. Evite usar textos ou links ocultos: artimanhas para ocultar textos e links como utilizar letras da mesma cor do fundo, imagem por cima do texto, uso de CSS para ocultá-los e configurar a fonte para o tamanho zero, são prejudiciais ao site, pois se percebido pelo sistema de busca o mesmo pode ser removido do índice, consequentemente não irá mais aparecer nos resultados das buscas.
2. Não utilize técnicas de cloaking e não faça redirecionamentos não-autorizados: Cloaking é uma técnica de camuflagem do conteúdo, ou seja, apresentar para os usuários conteúdos ou URL’s diferentes das apresentadas para os sistemas de busca.
3. Não envie consultas automática ao Google: Utilizar softwares como o WebPosition Gold^TM para realizar consultas automáticas consome recursos de computação, os termos de serviço do Google não permitem qualquer envio desta natureza.
4. Não carregue seu site com palavras-chave irrelevantes: O uso execessivo de palavras-chave no site pode ser considerado como uma tentativa de manipular a classificação do mesmo em resultados de pesquisa. Encher o site com palavras-chave resulta em uma experiência negativa para o usuário, utilize sempre conteúdo útil e com palavras-chave apropriadas para eles.
5. Não crie páginas que instalem vírus, trojans, ou qualquer outro software nocivo: Sites que exploram brechas de segurança em navegadores para instalar qualquer tipo de software malicioso, violam as diretrizes de qualidade e consequentemente poderam ser removidos do índice do Google.
6. Não crie várias páginas, subdomínios ou domínios com conteúdo repetitivo: Seja consistente nos seus links internos, por exemplo não faça: http://www.seusite.com/sessao/ e http://www.seusite.com/sessao/index.html. Utilize também domínios de nível principal, ou seja, o Google está mais propenso a entender www.seusite.pt que reúne conteúdo com foco em Portugal, do que www.seusite.com/pt ou pt.seusite.com.
7. Evite usar páginas de entrada criadas apenas em função dos mecanismos de busca, com pouco ou nenhum conteúdo original: Alguns webmasters tentam melhorar a classificação e atrair visitantes para o seu site com páginas cheias de palavras irrelevantes e conteúdo não autêntico. O Google toma providências contra domínios que tentam melhorar sua classificação exibindo páginas copiadas ou autogeradas que não trazem nada de valor aos usuários.
8. Se o seu site participa de algum programa de afiliados, verifique se ele agraga valor: Forneça um conteúdo excluiso e relevante para os seus usuários, que atraia-os a visitarem seu site primeiro.

Como dito no início do post, este texto foi resumido a partir das Diretrizes para Webmasters criadas pelo Google, minha intenção foi apenas deixar de forma mais clara e curta as dicas que o próprio Google oferece para construir um site que será bem visto e classificado por ele.

Na minha humilde opinião, algumas dessas diretrizes como: criar sites que instalem software maliciosos, utilizar de técnicas ou esquemas não autorizados para atrair visitantes ou melhorar classificação do seu site, são extremamente óbvias e são conhecimentos mínimos para se saber antes de construir um site, mas claro que existem aquelas que são realmente importantes de se entender, como os passos a se fazer quando o site estiver pronto e as diretrizes técnicas de conteúdo e de design. Fica aí então para quem nunca leu dar uma olhada agora nessa versão resumida ou no original. Abraço!