Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

willwalker

Dicas de Programação XHTML

Por , em Desenvolvimento frontend

Recommended Posts

willwalker    2

willwalker
Postado

Pessoal, quero a ajuda de vocês para melhorar meus arquivos HTML. Sempre que pego uma página para fazer eu uso sempre 3 elementos: h1, div e ul. Quero umas dicas de vocês para melhorar o desenvolvimento Front End aonde trabalho. Segue uma página que eu fiz, podem analisar e comentar ?

 

Abraços Walker

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Zahil - Vinho tratado com respeito</title>
<link href="App_Themes/Zahil/reset.css" rel="stylesheet" type="text/css">
<link href="App_Themes/Zahil/styles.css" rel="stylesheet" type="text/css">
<!--[if IE 7]>
<link href="App_Themes/Zahil/styles-ie7.css" rel="stylesheet" type="text/css">
<![endif]-->
<link rel="shortcut icon" href="imagens/favicon.png" />
</head>

<body>
<div id="main">

	<div id="topo">
		<div id="intro">Olá, Sr. Usuário</div>

		<div id="logo"><a href="index.html"><img src="imagens/logo.png" border="0" alt="logo" /></a></div>

		<ul id="menu">
			<li class="ajuda"><a href="ajuda.html" class="ativo">Ajuda</a></li>
			<li class="carrinho"><a href="carrinho.html">Carrinho</a></li>
			<li class="minha_conta"><a href="javascript: void(0);">Minha Conta</a>
			<ul>
				<li><img src="imagens/seta-d.png" /></li>
				<li class="dados_do_cadastro-menu"><a href="dados_do_cadastro.html">Dados do Cadastro</a></li>
				<li class="historico_de_pedidos-menu"><a href="historico_de_pedidos.html">Histórico de Pedidos</a></li>
			</ul>
			</li>
			<li class="produtos"><a href="produtos.html">Produtos</a>
			<ul>
				<li><img src="imagens/seta-d.png" width="12" height="11" /></li>
				<li class="lista_de_precos-menu"><a href="lista_de_precos.html">Lista de Preços</a></li>
				<li class="papelaria-menu"><a href="papelaria.html">Papelaria</a></li>
				<li class="material_promocional-menu"><a href="material_promocional.html">Material Promocional</a></li>
				<li class="mala_direta-menu"><a href="mala_direta.html">Mala Direta</a></li>
			</ul>
			</li>
		</ul>
	</div>

	<div id="conteudo">
		<div id="index">
			<ul id="login">
				<li class="texto">Login:</li>
				<li class="texto">Senha:</li>
				<li class="input"><input name="" type="text" /></li>
				<li class="input"><input name="" type="password" /></li>
				<li> </li>
				<li class="enviar"><input name="" type="submit" value="Enviar" /></li>
			</ul>

			<ul id="intro">
				<li class="descricao">
				Bem vindo ao portal de personalização Zahil.
				<br />
				<br />
				Agora sua comunicação com o cliente direto e a ambientação de loja estão a um clique de distância.
				<br />
				<br />
				Veja as principais peças que separamos para você customizar e solicitar sob demanda, com a facilidade e a qualidade que você exige e merece.
				<br />
				<br />
				Fique à vontade, e faça bons negócios.
				</li>
				<li class="icones"><img src="imagens/icones.png" /></li>
				<li class="espaco"> </li>
				<li class="titulo">SELECIONE O PRODUTO</li>
				<li class="texto">Escolha um dos produtos listados a esquerda.</li>
				<li class="titulo">CUSTOMIZE</li>
				<li class="texto">Personalize o documento com<br />a oferta apropriada.</li>
				<li class="titulo">COMPRE</li>
				<li class="texto">Especifique a quandtidade e local.</li>
				<li class="titulo">ENTREGA</li>
				<li class="texto">Adicione diversos itens e receba<br />No local indicado.</li>
			</ul>
		</div>
	</div>

	<br clear="all" />

	<div id="rodape">
		<ul>
			<li class="linha"></li>
			<li class="email"><a href="mailto:contato@zahil.com.br">contato@zahil.com.br</a></li>
			<li class="sair"><a href="javascript: void(0);">Sair</a></li>
		</ul>
	</div>

</div>

<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/masked.js"></script>
<script language="javascript" type="text/javascript" src="js/scripts.js"></script>
</body>
</html>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Começa por aqui, valide:

http://validator.w3.org/

 

porém use Strict:

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

 

vamos ao código agora:

<div id="intro">Olá, Sr. Usuário</div>

sem semântica isso hein?!

é um texto, então pq não usar uma tag <p> ?

 

 

 

 <div id="logo"><a href="index.html"><img src="imagens/logo.png" border="0" alt="logo" /></a></div>

precisava da div? a tag a, e a tag img tb aceitam ID:

<a href="index.html"><img src="imagens/logo.png" border="0" alt="logo" id="logo" /></a>

 

 

essa imagem:

 <li><img src="imagens/seta-d.png" /></li>

remete alguma informação textual ? ou apenas de design?

 

sendo apenas layout, considere codifica-la como background

 

 

                                <ul id="login">
                                       <li class="texto">Login:</li>
                                       <li class="texto">Senha:</li>
                                       <li class="input"><input name="" type="text" /></li>
                                       <li class="input"><input name="" type="password" /></li>
                                       <li> </li>
                                       <li class="enviar"><input name="" type="submit" value="Enviar" /></li>
                               </ul>

cadê o formulário, e pq usar lista ?

vejo ai um grupo de campos ( <fieldset> ), e textos para os campos ( <label> ), mas não vejo isso como uma lista, ainda mais não ordenada, já que existe sim uma ordem lógica e ela é importante.

 

                                        Bem vindo ao portal de personalização Zahil.
                                       <br />
                                       <br />

esqueça os <br />.

cadê os parágrafos ? <p> ?

 

se você precisa de espaçamento, espaçamento deve te lembrar estilização, logo deve ficar a cargo do css. (margin-bottom)

 

 

                                       <li class="titulo">
                                       <li class="texto">
                                       <li class="titulo">
                                       <li class="texto">
                                       <li class="titulo">
                                       <li class="texto">
                                       <li class="titulo">
                                       <li class="texto">

desperdício de classes.

 

 

se é titulo, então existem tags de titulo: h1, h2, h3, h4, h5, h6, strong

 

o teu foco deve ser a informação que você quer transmitir ao usuário. E não um vício de programação, onde você usa UL, LI em tudo.

 

você não queria transmitir uma LISTA, mas sim um texto com vários titulos e parágrafos.

 

 

 

 

 

language="javascript"

não use o atributo language, está em desuso e é completamente desnecessário !

 

                                </ul>
                       </div>
               </div>

e ai ? quem tava fechando quem ?

 

boa prática comentar:

                                </ul><!-- /login -->
                       </div><!-- /index -->
               </div><!-- /conteudo -->

 

seu rodapé não é uma lista.

 

 

existem muitos outros elementos fora div, h1, e ul. Use-os também.

Compartilhar este post

Link para o post
Compartilhar em outros sites

douglash    0

douglash
Postado

Olá, a minha dica para codar um html corratemente é pensar sempre na semântica dada aos elementos, um exemplo, como o william bruno falou, na li com a class descrição você utilizou varios <br /> para quebrar a linha, mas isso é semântico? Qual o sentido que aquele item deve passar? É realmente uma lista não ordenada? Através da tela que você tem, você deve codifica-la pensando no sentido dado ao código e não no visual, o correto é primeiro você gerar todo o html sem nada de estilo e depois partir para o css, pois você deve pensar em acessibilidade também, veja como o seu site fica sem estilo algum e veja se você identifica corretamente cada elemento e sua função semântica na página.

 

E uma correção apenas, crf_h0m3r o correto é deixar sempre os scripts no final da página, assim como willwalker fez, pois a última requisição a ser processada é o JS, o usuário deverá ver a página carregada mesmo sem o JS, assim que a página for carregada o js será carregado pois se você adicionar no inicio da página e tiver algo que leve digamos 15 segundos para processar, o usuário deverá esperar 15 segundos para poder ver a página carregada.

Compartilhar este post

Link para o post
Compartilhar em outros sites

willwalker    2

willwalker
Postado

Valeu William Bruno. Com suas dicas com certeza vou melhorar esses arquivos XHTML. Hoje fiz uma página usando mais elementos e meu CSS ficou bem menor. Aos poucos chego a perfeição. Quando eu achar que eu tenha feita uma página com semânticas corretas e tudo bem estruturado. Eu posto aqui para você e eu ver se entendi em como fazer uma boa página XHTML.

 

Uma dúvida, porque usar Strict ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

e pq usar Transitional ?

 

transitional é de transição, qndo você ta saindo do errado, e entrando nas webstandards.

se vai fazer, e realmente quer fazer certo, use o Strict, que é bem mais rígido.

 

Cara, refaça esse mesmo documento, e poste novamente. vamos trabalhar em cima dele como exemplo.

e não se esqueça de validar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

willwalker    2

willwalker
Postado 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Consulting House</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</head>

<body>
<div id="main">
	<div id="topo">
		<div class="linha_azul_topo"></div>
		<div class="menu">
			<a href="index.html" class="logo"><img src="imagens/logo.png" /></a>
			<a href="sobre_a_consulting_house.html" class="links_menu">Sobre a Consulting House</a>
			<a href="depoimentos.html" class="links_menu">Depoimentos</a>
			<a href="galeria.html" class="links_menu">Galeria</a>
			<a href="atualize_seus_dados.html" class="links_menu">Atualize seus dados</a>
			<a href="meus_eventos.html" class="links_menu ativo">Meus eventos</a>
		</div>
		<div class="linha_cinza"></div>
		<div class="banner">
			<h1>Meeting</h1>
			<img src="imagens/banners/banner_1.jpg" name="Meeting" class="banner_ativo" />
			<img src="imagens/banners/banner_2.jpg" name="Exchange" />
			<img src="imagens/banners/banner_3.jpg" name="Relationship" />
			<img src="imagens/banners/banner_4.jpg" name="Lunch" />
		</div>
		<div class="breadcrumb">
			<ul>
				<li><a href="meus_eventos.html">Meus eventos</a></li>
				<li><img src="imagens/seta_breadcrumb.png" /></li>
				<li>Meeting</li>
			</ul>
		</div>
	</div>
	<div id="conteudo">
		<div class="paginas">
			<div class="menu_eventos">
				<ul>
					<li><a href="meeting.html" class="menu_eventos_ativo">Meeting</a></li>
					<li class="spc"><img src="imagens/spacer.gif" /></li>
					<li><a href="relationship.html" style="width: 214px;">Relationship</a></li>
					<li class="spc"><img src="imagens/spacer.gif" /></li>
					<li><a href="exchange.html" style="width: 214px;">Exchange</a></li>
					<li class="spc"><img src="imagens/spacer.gif" /></li>
					<li><a href="lunch.html">Lunch</a></li>
				</ul>
				<div class="linha_cinza_claro"></div>
				<dl>
					<dt id="info_Meeting">
						<div class="status status_ativo"><img src="imagens/icn_aguardando-reserva_h.png" /><i>1</i>evento aguardando reserva</div>
						<div class="status status_ativo"><img src="imagens/icn_reservado_h.png" /><i>1</i>evento reservado</div>
						<div class="status status_ativo"><img src="imagens/icn_cancelado_h.png" /><i>1</i>reserva cancelada</div>
						<div class="status status_ativo"><img src="imagens/icn_confirmado_h.png" /><i>1</i>reserva confirmada</div>
					</dt>
					<dt class="spc"><img src="" /></dt>
					<dt id="info_Relationship" style="width: 216px;">
						<div class="status"><img src="imagens/icn_nao_ha_n.png" />Não há eventos no momento</div>
					</dt>
					<dt class="spc"><img src="" /></dt>
					<dt id="info_Exchange" style="width: 216px;">
						<div class="status"><img src="imagens/icn_nao_ha_n.png" />Não há eventos no momento</div>
					</dt>
					<dt class="spc"><img src="" /></dt>
					<dt id="info_Lunch">
						<div class="status"><img src="imagens/icn_nao_ha_n.png" />Não há eventos no momento</div>
					</dt>
				</dl>
				<div style="clear: both; visibility: hidden;"></div>
			</div>
		</div>
	</div>
	<div class="linha_cinza"></div>
	<div id="rodape">
		<ul>
			<li>Desenvolvido por</li>
			<li><a href="http://www.agdirect.com.br/" target="_blank"><img src="imagens/agdirect.png" /></a></li>
		</ul>
	</div>
</div>
</body>
</html>

 

Acho que dei uma melhorada, o que acha?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

<img src="imagens/spacer.gif" />

 

=X

 

se é um efeito visual, então você deve tratar no css, e não com os temiveis spacers.gif das <tables>

não entendi pq você usou dl na lista de eventos.. não vejo nada sendo definido ali..

 

estude semântica.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito