CHR Designer » Indexação http://chrdesigner.com/blog Sat, 27 Mar 2010 12:04:08 +0000 en hourly 1 http://wordpress.org/?v=3.0 Tabela Semântica http://chrdesigner.com/blog/index.php/tabela-semantica/ http://chrdesigner.com/blog/index.php/tabela-semantica/#comments Sat, 10 Oct 2009 19:20:03 +0000 CHR Designer http://chrdesigner.com/blog/?p=597 Olá pessoal… hoje eu vou explicar um pouco sobre Tabela Semântica, esse post vai ajudar muito o meu amigo Alex que trabalha comigo lá na Mundo Click e também espero ajudar muitas pessoas que tem a mesma dúvida que a dele, então chega de papo e vamos começar o que interessa.

Bom primeiro eu vou mostrar como era uma tabela antiga sem semântica:





TITULO 1
TITULO 3
TITULO 3




TEXTO 1
TEXTO 2
TEXTO 3




RODAPÉ 1
RODAPÉ 2
RODAPÉ 3

Como vocês podem ver eu fiz uma tabela muito simples de 3 colunas , só para quem ainda não conhece eu vou explicar para que serve cada TAG.

<table> – A tag TABLE é o corpo da tabela dentro dela que vocês colocam todos os dados, ainda nele tem varias propriedades que podem ser integradas como cellpadding e cellspacing essas duas propriedades servem para tirar o espaçamento padrão que vem na TAG table e ainda tem várias propriedades que podem ser utilizadas.

<tr> – A tag TR ela sempre vem depois da TABLE porque ela é responsável de criar as colulas da tabela.

<td> – A tag TD ela é a celula da tabela é o lugar onde você o conteudos.

Agora é montar uma tabela seguindo as regras de semântica:





TITULO 1
TITULO 3
TITULO 3






RODAPÉ 1
RODAPÉ 2
RODAPÉ 3






TEXTO 1
TEXTO 2
TEXTO 3

Dá para ver como muda bastante mas estruturamente é a mesma mesma tabela somente o “ROPAPÉ” que mudou de lugar para ficar mais simples de entender eu vou explicar cada uma. As tags TABLE, TR, TD continuam mas agora adicionamos mais 4 tags e uma propriedade na tag TABLE.

SUMMARY – Essa propriedade serve para colocar “nome/titulo” da sua tabela.

<THEAD> -  essa tag é muito importânte porque nela que vai o cabeçalho da sua tabela.

<TFOOT> -  essa tag também é importate mesmo colocando ela abaixo da THEAD ela sempre vai ficar no rodapé da sua tabela.

<TH> -  essa th só funciona dentro da THEAD e TFOOT e o padrão dessa tag é negrito e centralizado.

<TBODY> – como o nome dela já diz ela é o corpo da sua tabela dentro dela podem ser colocadas as tags TR e TD.

Espero ter ajudado mas se vocês tiverem muitas dúvidas é só deixar um comentário ou mandar um email “chrdesigner@chrdesigner.com” que eu respondo até a proxima.

- Visualizar Exemplo

- Download do Arquivo

]]> http://chrdesigner.com/blog/index.php/tabela-semantica/feed/ 1 Como iniciar um recorte em Tableless http://chrdesigner.com/blog/index.php/como-iniciar-um-recorte-em-tableless/ http://chrdesigner.com/blog/index.php/como-iniciar-um-recorte-em-tableless/#comments Sun, 31 May 2009 01:01:39 +0000 CHR Designer http://chrdesigner.com/blog/?p=411 E ai pessoal, esse post vai ser dedicado ao Alex um amigo meu que trabalha comigo na Lógica Digital,  sempre que vai começar um recorte do zero ele tem muitas dúvidas de como iniciar. Ele não sabe como as DIVs tem que ficar e toda vez eu explico mas agora se ele perguntar para mim eu vou mandar esse link para ele…hahahaha….

Vamos lá então primeiro tem que ter algum editor de HTML eu uso o Aptana aqui em casa mas na Lógica eu uso o Dreamweaver mas se vocês não quiserem instalar nenhum desse software pode usar o NotePad do Windows mesmo.

Abaixo tem um modelo de HTML crú:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>COMO INICIAR UM RECORTE EM TABLELESS</title>
</head>
<body>

</body>
</html>

Agora eu vou colocar as DIVs:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>COMO INICIAR UM RECORTE EM TABLELESS</title>
</head>
<body>

<div>TOPO</div>
<div”>LATERAL</div>
<div>CONTEUDO</div>
<div>RODAPE</div>

</body>
</html>

Agora para finalizar vou colocar as IDs nas DIVs e lembrando que nunca pode ter duas IDs com o mesmo nome senão não valida o seu código, vou colocar mais uma DIV que e a “container” que nele vai o css para determinar a largura do site e vou adicionar o css na pagina mesmo “<style type=”text/css”>”:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>COMO INICIAR UM RECORTE EM TABLELESS</title>


<style type=”text/css”>
*{margin:0; padding:0;}
#container{width:998px; margin:0 auto; text-align:center;}
#header{float:left; width:996px; height:40px; border:1px solid black;}
#nav{float:left; width:98px; height:100px; border:1px solid blue;}
#content{float:left; width:896px; height:100px; border:1px solid red;}
#footer{clear:both; height:40px; border:1px solid black;}
</style>


</head>
<body>


<div id=”container”>
<div id=”header”>TOPO</div>
<div id=”nav”>LATERAL</div>
<div id=”content”>CONTEUDO</div>
<div id=”footer”>RODAPE</div>
</div>


</body>
</html>

Visualizar o Exemplo
Download do Exemplo

]]> http://chrdesigner.com/blog/index.php/como-iniciar-um-recorte-em-tableless/feed/ 2 Como obter uma melhor indexação – Flash http://chrdesigner.com/blog/index.php/como-obter-uma-melhor-indexacao-flash/ http://chrdesigner.com/blog/index.php/como-obter-uma-melhor-indexacao-flash/#comments Tue, 05 May 2009 02:05:49 +0000 CHR Designer http://chrdesigner.com/blog/?p=254 Eu estava lendo no blog do Fabio Ricotta e vi esse artigo muito bom falando sobre como melhorar a indexação de Sites em Flash, na Produtora Web que eu trabalho “Lógica Digital” eu sempre converço com o responsável em flash “Fabio JR.” como nos podemos melhorar a indexação. Abaixo vai ter uma breve descrição como podemos melhorar isso.

A grande maioria sabe, o Flash é totalmente um recurso visual, e o Googlebot não possui olhos. O Googlebot pode ler os arquivos Flash e extrair texto e links contidos nele, mas a estrutura e o contexto é perdido. Além disso, o conteúdo textual é, em algumas vezes, armazenado de forma gráfica no Flash, e como o Googlebot não possui um algoritmo para o reconhecimento destes gráficos, estas importantes palavras-chave são perdidas. Tudo isso significa que mesmo que o seu conteúdo em Flash esteja na base de dados do Google, ele pode perder um pouco de texto, conteúdo, ou links. O agravante fica no seguinte ponto: o Googlebot pode entender alguma coisa dos arquivos Flash, mas muitos outros crawlers não podem.

Então, o que um web desginer deve fazer?

A única coisa que se deve fazer é prover ao Googlebot e a todos os crawlers, o mesmo conteúdo que é disponibilizado aos usuários. Se você não o fizer, o seu site ficará suspeitos através dos algortimos de busca dos buscadores.

Algumas sugestões foram feitas pelos engenheiros da gigante Google, para quem desenvolve em Flash:

  • Tente usar Flash onde é realmente necessário. Muitos sites como o Youtube, utilizam a tecnologia Flash para a exibição de vídeos, mas o restante do website é baseado em HTML para a perfeita estruturação.
  • sIFR: Muitos sites utilizam o Flash para forçar os browsers a apresentar textos em uma fonte que o usuário não possua. Técnicas como sIFR deixam browsers que não possuem suporte ao Flash, lerem o conteúdo normalmente ao invés de forçar a aparição do objeto.
  • Criar versões sem Flash: Um modo comum de contornar o problema de indexação de sites em Flash é a criação de uma página inicial para a seleção do tipo do site(com ou sem flash).
]]> http://chrdesigner.com/blog/index.php/como-obter-uma-melhor-indexacao-flash/feed/ 0