semântica

Juste · Março 26, 2012

Boa tarde,

Pessoal , estou aprendendo XHTML e CSS na "unha" afim de conseguir meu "ganha pão" e a maior dificuldade que estou tendo no momento é em como otimizar meu código e utilizar os recursos de maneira correta. Estou desenvolvendo um site (somente para o meu aprendizado)e gostaria que os colegas o avaliassem e me corrijam no que julgarem necessário.Segue abaixo o código em html e após a folha de estilo.

OBS: Eu praticamente não apliquei regras de estilo, somente a marcação e posicionamento dos elementos.

<!doctype html>
<html>

<head>
<title>Galeria de Arte</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="keywords" content="gravuras, pintores, galeria, relevo" />
<meta name="description" content="Gravuras - Artistas nacionais e internacionais" />

<base target="_blank" />

<link rel="stylesheet" type="text/css" href="estilo.css" media="screen" />

</head>

<body>

<!--container que comporta toda a página-->    
<div id="wrapper">

<!--cabecalho da página-->
<header id="header">

   <div id="logo">
       <a href="#"><img src="http://lorempixel.com/245/95/sports" alt="Logo da Galeria" /></a> 
   </div>


   <!-- formularios de pesquisa -->
   <form action="url" id="mainForm">
       <input type="text" placeholder="Artistas" name="procArt"/>
       <input type="submit" value="ok"/> 
       <input type="text" placeholder="Procurar Por" name="procPor"/>
       <input type="submit" value="ok"/> 
   </form>

   <nav id="nav">
       <a href="#">LINK 1</a>
       <a href="#">LINK 2</a>
       <a href="#">LINK 3</a>
       <a href="#">LINK 4</a>
   </nav>


   <!-- quadro com as formas de pagamento e entrega, no cabeçalho -->
   <div id="cards">
       Pagamento: <br />
       <img src="http://placehold.it/29x19" alt="Master Card" />
       <img src=" http://placehold.it/29x19" alt="Visa" />
       <img src=" http://placehold.it/29x19" alt="american" />
       <img src=" http://placehold.it/29x19" alt="PayPal" />
       <img src=" http://placehold.it/29x19" alt="Pague Seguro" /> <br />

       Entregas:<br />
       <img src=" http://placehold.it/30x30" alt="UPS" />
       <img src=" http://placehold.it/56x27" alt="fedex" />
       <img src="http://placehold.it/80x20" alt="correios" />

   </div>

</header>

<!-- Container para todas as colunas da página -->
<div id="content">


<!--coluna esquerda -->
<div id="left">

   <div  class="box" id="carrinho">
   <h2 class="title">Meu carrinho </h2>
   <span class="subtitle">   
   Voce tem:<br />
   total:<br />
   </span>
   <button type="button">Editar carrinho</button> <br />
   <button type="button">Finalizar compra</button>
   </div>


   <ul class="box">
       <li class="title">Artistas</li>
       <li> <a href="#">Nome Sobrenome</a></li>
       <li> <a href="#">Nome Sobrenome </a></li>
       <li> <a href="#">Nome Sobrenome </a></li>
       <li> <a href="#">Nome Sobrenome </a></li>
       <li> <a href="#">Nome Sobrenome </a></li>
       <li> <a href="#">Nome Sobrenome </a></li>
       <li> <a href="#">Nome Sobrenome </a></li>
       <li> <a href="#">Nome Sobrenome </a></li>
   </ul>

</div>

<!--coluna do meio -->
<div id="middle">



<div class="box">
   <p>IMAGENS EM DESTAQUE</p>
   Nome do Autor <br/>
   Descrição breve <br />
   preço <br />

   <button type="button">Ver Item</button>


<div id="displayIMG"> <!--Box que exibe os quadros em destaque -->
   <img src="http://placehold.it/450x340" />
       </div>

</div>

<!--galeria de imagens localizada abaixo do display -->
<div id="galery">
Galeria de Imagens
</div>

</div><!--fim da coluna do meio-->

<!-- coluna direita -->
<div id="right">



<ul class="box">
   <li class="title">Ultimas aquisicoes</li>
   <li><img src="http://placehold.it/70x110"</li>
   <li class="subtitle">Nome do autor</li>
   <li class="description">Descrição genérica</li>
   <li class="description">preço</li>

   <li><img src="http://placehold.it/70x110"</li>
   <li class="subtitle">Nome do autor</li>
   <li class="description">Descrição genérica</li>
   <li class="description">preço</li>

   <li><img src="http://placehold.it/70x110"</li>
    <li class="subtitle">Nome do autor</li>
   <li class="description">Descrição genérica</li>
   <li class="description">preço</li>
</ul>



<div class="box">
   <h4 class="title">Acompanhe-nos</h4>

<div>
    <img src="http://placehold.it/70x15"> 
    <br />
    <img src="http://placehold.it/70x15" >

</div>
</div>
   <div>
   Newsletter
</div>

</div><!--fim da coluna da direta -->

<!--conteudo do menu inferior acima do rodape -->
<div id="menuInf">
Menu Inferior
</div>

<!--rodape -->
<footer id="footer">
Rodape
</footer>

</div><!--fim da div content -->


</div><!--fim da div wrapper -->




</body>

</html>

Agora a folha de estilo.

html,body{
   margin:0px auto;
   height:100%;
}

li{
   list-style: none;
}


/*regras para os box que comportam conteudo das colunas*/
.box{
   border:1px solid #cccccc;
   padding-left:0px;
}

/*insere a borda inferior e formata o texto dos titulos dos boxes*/
.title{

   border-bottom: 1px solid #cccccc;
   font:15px arial ; 
   font-weight: bold;
}
/*utilizado nos subtitulos*/
.subtitle{
   font:12px arial;
   font-weight: bold;
   color:#666666;
}
/*para textos em geral*/
.description{
   font:12px arial;
   color:#666666;
}



#wrapper{ 
   width: 960px; 
   margin: auto; 
   margin-top:20px;
 }

/*--------------------regras do cabeçalho -------------------------------*/

/*container do cabeçalho*/
#header{
   position:relative;
   border:1px solid;

}

/*logotipo da empresa*/
id#logo{
 position:absolute;
 top:0px;
 left:0px;

}
/*formularios de pesquisa*/
#mainForm{
   position:absolute;
   top:20px;
   left:300px;
}

/*navigation menu*/
#nav{
   position:absolute;
   top:60px;
   left:300px;

}
/*formas de pagamento e entrega*/
#cards{
  position:absolute;
  top:0px;
  right:10px;
}

/*container para as colunas da pagina*/
#content{
   margin-top: 20px;
   border:1px solid;

}
/*coluna esquerda*/
#left {

   float:left;
   width: 220px;

}
/*box "meu carrinho"*/
#carrinho{
   background:url("http://placehold.it/23x18") no-repeat right top;

}
/*box artistas*/
#artistas{

   margin-top:20px;
}

/*coluna do meio*/
#middle{
   width: 520px;  
   margin-left:20px;
   float:left;
}

/*imagem em destaque do box do meio da pagina*/
#displayIMG img{
   border:10px solid #999999;
   margin:0px 0px 5px 25px; 
}

/*aqui vai entrar uma lista de imagens como no box da direta, mas na horizontal*/
#galery{
   background-color:#999900;
}

/*coluna direita*/
#right{
   width: 160px;

   float:right;
}

/*elementos fora da página (Outra opção de menu , recursos, etc)*/
#menuInf{
   clear:both;

}

#footer{
 background-color:#660066;
}

Para dar um exemplo sobre uma das minhas dúvidas: Nos boxes que estão na coluna e no cabeçalho ( <header> ) , não sei exatamente qual marcação utilizar.Elementos de bloco formam uma quebra de linha que não confere com o layout (e utilizar o display inline também não funciona).

NetBoy16 · Março 27, 2012

Nesse codigo:

    <nav id="nav">
       <a href="#">LINK 1</a>
       <a href="#">LINK 2</a>
       <a href="#">LINK 3</a>
       <a href="#">LINK 4</a>
   </nav>

Eu recomendaria fazer com <ul><li>:

<ul id="nav">
  <li><a href="#">LINK 1</a></li>
  <li><a href="#">LINK 2</a></li>
  <li><a href="#">LINK 3</a></li>
</ul>

No rodape coloca isso:

clear:both

isso impede que outros elementos fiquem ao lado do rodape.

E porque você usou <header> ao invés de <div> ? :ermm:

Edit: Percebi que você está usando html5, certo? se for entao ignore aquilo que disse do ul/li

William Bruno · Março 27, 2012

precisava da div ?

    <div id="logo">
       <a href="#"><img src="http://lorempixel.com/245/95/sports" alt="Logo da Galeria" /></a> 
   </div>

que tal:

<a href="#"><img src="http://lorempixel.com/245/95/sports" alt="Logo da Galeria" id="logo" /></a>

?

também notei que você não usou nenhuma <section>, e nem nenhum <article>, procure dar semântica ao teu documento.

Isto aqui:

<div id="right">

não é um bom nome de ID. Procure nomear seus atributos de forma que representem a função do elemento, e não o posicionamento, cor..

Cuidado com a tag <br />.

http://wbruno.com.br/2011/10/04/semantica-da-tag-br/

Tome um pouco de cuidado com esses position: absolute que você usou. Geralmente existe outra forma de fazer, e position qndo usado indiscriminadamente evidencia deficiências com conceitos de box model.

Juste · Março 27, 2012

Nesse codigo:
    <nav id="nav">
       <a href="#">LINK 1</a>
       <a href="#">LINK 2</a>
       <a href="#">LINK 3</a>
       <a href="#">LINK 4</a>
   </nav>
Eu recomendaria fazer com <ul><li>:
<ul id="nav">
  <li><a href="#">LINK 1</a></li>
  <li><a href="#">LINK 2</a></li>
  <li><a href="#">LINK 3</a></li>
</ul>
No rodape coloca isso:
clear:both
isso impede que outros elementos fiquem ao lado do rodape.

E porque você usou <header> ao invés de <div> ? :ermm:

Edit: Percebi que você está usando html5, certo? se for entao ignore aquilo que disse do ul/li

Sim, estou aprendendo a partir do HTML5.

Eu utilizei o <header> pq pensei da seguinte forma: Uma div não tem valor semântico, é utilizada somente para criar uma divisão, um contêiner propriamente dito e para o cabeçalho já temos a tag <header>, que faz o papel de conteiner para o cabeçalho e é semântico, logo achei que seria redundante utilizar uma div para o cabeçalho.

precisava da div ?
    <div id="logo">
       <a href="#"><img src="http://lorempixel.com/245/95/sports" alt="Logo da Galeria" /></a> 
   </div>
que tal:
<a href="#"><img src="http://lorempixel.com/245/95/sports" alt="Logo da Galeria" id="logo" /></a> 
?

também notei que você não usou nenhuma <section>, e nem nenhum <article>, procure dar semântica ao teu documento.

Isto aqui:
<div id="right">
não é um bom nome de ID. Procure nomear seus atributos de forma que representem a função do elemento, e não o posicionamento, cor..

Cuidado com a tag <br />.

http://wbruno.com.br/2011/10/04/semantica-da-tag-br/

Tome um pouco de cuidado com esses position: absolute que você usou. Geralmente existe outra forma de fazer, e position qndo usado indiscriminadamente evidencia deficiências com conceitos de box model.

Pois é, a semântica é minha maior preocupação agora.

Eu não utilizei a tag <article> pq sinceramente não achei que fosse ser aplicada, mas vou ler sobre a tag <section>

Sim, estou aprendendo a partir do HTML5.

Eu utilizei o <header> pq pensei da seguinte forma: Uma div não tem valor semântico, é utilizada somente para criar uma divisão, um contêiner propriamente dito e para o cabeçalho já temos a tag <header>, que faz o papel de conteiner para o cabeçalho e é semântico, logo achei que seria redundante utilizar uma div para o cabeçalho.

Pois é, a semântica é minha maior preocupação agora.

Eu não utilizei a tag <article> pq sinceramente não achei que fosse ser aplicada, mas vou ler sobre a tag <section>

Quanto ao posicionamento você pode me dizer qual seria a outra forma? Agora tudo é novidade pra mim, então posso me equivocar com alguns recursos.

No mais quero agradecer pela disposição de vocês, quero muito entrar nessa área e não tem nada melhor pra desenvolver o que foi estudado do que ter a avaliação de outros profissionais. Sem palavras mesmo, valeu.

Entrar

Arquivado

semântica

Recommended Posts

Juste 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Juste 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Consulta sem duplicação

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante