Avaliação de código

[Daniel Lemes 0]

Olá pessoal,

 

Tenho um site que desenvolvemos aqui e como somos novos nesse negócios de Webstandards, gostaria de saber se está correto sugestões e criticas.

 

www.dlemes.com/sites/caca

 

[]'s

[Giovani 104]

Daniel Lemes, vou tentar ajudar um pouco:

 

:seta: Geral

 

Achei que suas imagens foram recortadas da maneira incorreta. Veja só, você poderia colocar essa imagem como fundo do body e esta imagem como fundo da #container. Ambas com 1px de largura e repetindo no eixo-x.

 

body { background: url(../imagens/body-fundo.jpg) #fff left top repeat-x }
#container { background: url(../imagens/container-fundo.jpg) left bottom repeat-x }

 

 

:seta: Topo

Precisa de tantas div's? Principalmente sem nada dentro. Acho que ficaria melhor assim:

#header{
background: url(../imagens/topo.jpg) left bottom repeat-x;
height: ..px;
}

Depois:

<div id="header">
           	<img src="suamarca.jpg" alt="Marca" />
           	<ul>
           		<li><a href="http://">Link 01</a></li>
           		<li><a href="http://">Link 02</a></li>
           		<li><a href="http://">Link 03</a></li>
           		<li><a href="http://">Link 04</a></li>
           		<li><a href="http://">Link 05</a></li>
           		<li><a href="http://">Link 06</a></li>
           		<li><a href="http://">Link 07</a></li>
           		<li><a href="http://">Link 08</a></li>
           	</ul>
           </div>

Ou assim:

<div id="header">
           	<h1>Marca</h1>
           	<ul>
           		<li><a href="http://">Link 01</a></li>
           		<li><a href="http://">Link 02</a></li>
           		<li><a href="http://">Link 03</a></li>
           		<li><a href="http://">Link 04</a></li>
           		<li><a href="http://">Link 05</a></li>
           		<li><a href="http://">Link 06</a></li>
           		<li><a href="http://">Link 07</a></li>
           		<li><a href="http://">Link 08</a></li>
           	</ul>
           </div>

Essa questão de img ou h1 no topo para marca é um pouco divergente, alguns gostam alguns não, mas ai vai de cada um.

 

Ainda no topo, a lista pode ser colocada com um ul > li direto definindo uma largura e centralizando.

#header ul{
height: ..;
margin: 0 auto;
width: ..px;
}

 

Os li's podem ser feitos sem imagens, utilizando a própria fonte. Se ficar interessado pesquise sobre font-face. Esse link ajuda bastante: http://www.fontsquirrel.com/fontface/generator

 

Acho que do topo é isso :thumbsup:

 

 

:seta: Conteúdo

 

Novamente muitas divs desnecessárias. Pensei em algo menor, tipo:

<div id="content">

           	<div id="banner">
           		<img src="" alt="" />
           	</div>

           	<ul>
           		<li> ... </li>
           		<li> ... </li>
           		<li> ... </li>
           	</ul>

           </div>

 

 

Sobre o que tem hoje, o banner não precisa ser com uma imagem de fundo, você deve saber disso.

 

No conteúdo, propriamente dito, pode variar um pouco de desenvolvedor para desenvolvedor. Vou dar minha sugestão, é provável que outras pessoas discordem, mas :yay:

 

Isso é o que você tem:

<div id="left">
                       <div class="titulo">Aconteceu</div>
                       <div id="left_img"></div>
                       <div class="texto">
                           <span>
                               Montados em suas bicicletas, de megafone na mão, e com um baú de criatividade nas costas, 
                               esses agentes de leitura são a prova de que a arte de contar histórias vem renascendo...
                           </span>
                           <div class="link"><a href="#">Leia Completo</a></div>
                       </div>
                   </div>

Errado!

Existe uma tag específica para título, outra para parágrafo ... e assim vai.

 

Nesse caso específico faria com uma lista:

<ul>
<li>
	<h2>Título</h2>
	<img src="suaimagem.jpg" alt="Imagem" />
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis massa lorem. Quisque id congue libero. Praesent bibendum felis sit amet erat hendrerit fringilla
	<a href="http://">Leia Completo</a>
</li>

<li>
	<h2>Título</h2>
	<img src="suaimagem.jpg" alt="Imagem" />
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis massa lorem. Quisque id congue libero. Praesent bibendum felis sit amet erat hendrerit fringilla
	<a href="http://">Leia Completo</a>
</li>

<li>
	<h2>Título</h2>
	<img src="suaimagem.jpg" alt="Imagem" />
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis massa lorem. Quisque id congue libero. Praesent bibendum felis sit amet erat hendrerit fringilla
	<a href="http://">Leia Completo</a>
</li>
</ul>

Fica bem mais elegante :thumbsup:

Além de ficar mais fácil para trabalhar as css.

 

 

:seta: Rodapé

 

Nesse caso nem tem muito o que explicar:

<div id="footer">
<ul>
	<li> ... </li>
	<li> ... </li>
	<li> ... </li>
</ul>
</div>

 

#footer{
background: url(../imagens/rodape.jpg) no-repeat center;
padding: para-ajustar-o-texto-com-o-fundo;
}

#footer ul{
height: ..;
margin: 0 auto;
width: ..px;
}

 

----

 

Juntando tudo ficaria assim:

<div id="container">

<div id="header">
    <h1>Marca</h1>
    <ul>
            <li><a href="http://">Link 01</a></li>
            <li><a href="http://">Link 02</a></li>
            <li><a href="http://">Link 03</a></li>
            <li><a href="http://">Link 04</a></li>
            <li><a href="http://">Link 05</a></li>
            <li><a href="http://">Link 06</a></li>
            <li><a href="http://">Link 07</a></li>
            <li><a href="http://">Link 08</a></li>
    </ul>
</div>

<div id="content">

    <div id="banner">
            <img src="" alt="" />
    </div>

    <ul>
           <li>
               <h2>Título</h2>
               <img src="suaimagem.jpg" alt="Imagem" />
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis massa lorem. Quisque id congue libero. Praesent bibendum felis sit amet erat hendrerit fringilla
               <a href="http://">Leia Completo</a>
           </li>

           <li>
               <h2>Título</h2>
               <img src="suaimagem.jpg" alt="Imagem" />
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis massa lorem. Quisque id congue libero. Praesent bibendum felis sit amet erat hendrerit fringilla
               <a href="http://">Leia Completo</a>
           </li>

           <li>
               <h2>Título</h2>
               <img src="suaimagem.jpg" alt="Imagem" />
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis massa lorem. Quisque id congue libero. Praesent bibendum felis sit amet erat hendrerit fringilla
               <a href="http://">Leia Completo</a>
           </li>
    </ul>

</div>

<div id="footer">
	<ul>
	        <li><a href="http://">Link 01</a></li>
	        <li><a href="http://">Link 02</a></li>
	        <li><a href="http://">Link 03</a></li>
	</ul>
</div>

</div>

 

Essas são minhas sugestões, espero que ajude você :thumbsup:

[Bruno Augusto 417]

:clap:

 

Análise impressionante Giovani.

[Giovani 104]

Obrigado Bruno Augusto :thumbsup:

[André do Vale 76]

Essa questão de img ou h1 no topo para marca é um pouco divergente, alguns gostam alguns não, mas ai vai de cada um.

 

Ou então fica no meio termo, como faço por aqui. :D

 

Nas minhas páginas iniciais utilizo h1 (um span escondendo o texto, e a imagem de fundo) na logo, pois normalmente não tenho conteúdo direto nessa página: ou são posts, cada um com seu "h2", ou são caixas que apontam para outro lugar, também cabendo uso de h2 ou menor.

 

Já nas páginas, como há conteúdo específico, então atribuo o h1 ao nome do conteúdo, e altero minha logo para um link normal.

[Giovani 104]

Quando adiciono o h1 no topo trabalho com image replacement :thumbsup:

Nas minhas páginas iniciais utilizo h1 (um span escondendo o texto, e a imagem de fundo) na logo, pois normalmente não tenho conteúdo direto nessa página: ou são posts, cada um com seu "h2", ou são caixas que apontam para outro lugar, também cabendo uso de h2 ou menor.

[JCMais 75]

Quando adiciono o h1 no topo trabalho com image replacement :thumbsup:

 

Se tiver imagem como heading, ao meu ver isto é melhor do que image replacement:

<h1><img alt="O Texto" src="a/imagem.jpg" /></h1>

 

SEO do site agradece. =)

[Giovani 104]

Olha JC, não sei até que ponto pode ser melhor, mas é uma boa contribuição para esse tópico :thumbsup:

Se tiver imagem como heading, ao meu ver isto é melhor do que image replacement:

<h1><img alt="O Texto" src="a/imagem.jpg" /></h1>

 

SEO do site agradece. =)

[André do Vale 76]

Se tiver imagem como heading, ao meu ver isto é melhor do que image replacement:

<h1><img alt="O Texto" src="a/imagem.jpg" /></h1>

 

SEO do site agradece. =)

 

Mas alt é diretamente relacionado a descrição da imagem, e não do H1. Mesmo que a imagem seja somente o nome do site. Mesmo usando imagem, o atributo "title" não cabe melhor nesse caso?

[JCMais 75]

Mas alt é diretamente relacionado a descrição da imagem, e não do H1. Mesmo que a imagem seja somente o nome do site. Mesmo usando imagem, o atributo "title" não cabe melhor nesse caso?

 

Não, o atributo title seria conveniente caso você tivesse um link:

<h1>
  <a href="/" title="Página Inicial">
     <img src="logo.png" alt="Minha Empresa" />
  </a>
</h1>

 

O alt você está passando um texto alternativo para determinada imagem, se de alguma forma o User Agent não consegui carregar a imagem, ele deve exibir este texto, esse atributo também é usado como forma de adicionar contexto à uma imagem, assim quando os spiders de indexadores, do Google por exemplo, encontrarem essa imagem, eles irão ligar a mesma ao conteúdo presente nesse atributo.