Guilherme Oderdenge 42 Denunciar post Postado Fevereiro 5, 2012 Trabalhando com camadas É sabido que muitos iniciantes que começam a trabalhar com HTML utilizam a prática do tal do table para estruturar os seus sites. Isso é errado - e acho que (quase) todo mundo já sabe. Pois bem, mas não estou aqui para reparar o(s) erro(s) de desenvolvimento utilizando o table, mas vou tentar explicar como trabalhar com divs da maneira mais correta possível, utilizando um pseudo-paradigma que eu gosto de chamar de layout orientado a camada (qualquer semelhança é mera coincidência, hehe...). Entendendo o pseudo-paradigma Aos que já trabalham com divs: será que vocês fazem isso da maneira mais coesa possível? Aos que não trabalham: primeiro, larguem o table (ou seja lá qual método você utilize para estruturar seu layout) e aprendam a trabalhar com divs. O pseudo-paradigma de "Layout orientado a camada" representa a maneira mais válida e suficiente de se trabalhar com divs, pois ele trata a estrutura de um layout em camadas, atingindo a integridade, validez e sustentabilidade necessária para se ter um código de qualidade. Veja um exemplo de layout incorreto: Mas por que "incorreto"? Ora, se você quiser manipular de uma só vez todas camadas (divs) do seu layout, você deverá operar na regra body (corpo), e uma vez que você mexe no body, a tendência é que todo o corpo siga este padrão. E é isso que você quer? É isso? Você quer ter camadas idênticas, estragando a integridade e a beleza natural do seu layout? Não, não é isso que você quer. Tenho certeza que você quer o layout mais inteligente, mais fácil de modificar e mais sexy possível, não é? Pois bem. Tenho a solução para vocês: trabalhar com camadas. :thumbsup: Na prática Finja que a estrutura que exibida anteriormente era um pedaço de papel - um rascunho seu, quem sabe - e você não gostou do que desenhou. Então você amassa, e joga fora. Em outras palavras, esqueça aquele layout por agora. Você deverá desamassá-lo na sua mente só depois, para comparar e rir do tempo que você estava perdendo trabalhando da maneira não-uniforme que você trabalhava. Agora, veja este novo esboço de estrutura: O código dela, por sua vez: <body> <div id="wrapper"> <div id="header"></div> <div id="menu"></div> <div id="content"></div> <div id="footer"></div> </div> </body> Em código, no exemplo anterior, teríamos ganhado uma camada a mais - isso porque o wrapper (empacotador) ainda não existia. Veja que a função do #wrapper é "empacotador"/"agregar" todo o conteúdo dentro dele. Ele torna tudo mais flexível. Digamos que você tenha essa mesma estrutura de layout (header, menu, content, footer) e queira centralizá-las na tela. Certo, sem o #wrapper você teria que fazer algo assim: <body> <div class="centralizer"> <div id="header"></div> </div> <div class="centralizer"> <div id="menu"></div> </div> <div class="centralizer"> <div id="content"></div> </div> <div class="centralizer"> <div id="footer"></div> </div> </body> Onde: .centralizer { width: 950px; position: relative; margin-left: -475px; left: 50%; } Mas por quê diabos alguém faria isso? Acho que mesmo um iniciante saberia que também dá pra fazer assim: <body> <div id="header"></div> <div id="menu"></div> <div id="content"></div> <div id="footer"></div> </body> Onde: #header { width: 950px; position: relative; margin-left: -475px; left: 50%; ] #menu { width: 950px; position: relative; margin-left: -475px; left: 50%; } #content { width: 950px; position: relative; margin-left: -475px; left: 50%; } #footer { width: 950px; position: relative; margin-left: -475px; left: 50%; } Ambos os métodos funcionam, mas não são recomendados. Por quê? Imagine que você queira aumentar a largura das suas camadas para 975px, e aí? Mudar um por um? Sim, é um processo rápido, mas torna-se repetitivo, e quando é repetitivo, torna-se chato. Pode parecer que tudo o que eu falo aqui é óbvio - talvez seja mesmo -, mas se faço este artigo é porque estes erros já foram cometidos diante dos meus olhos. E o pior: se todos tivessem bom senso e/ou paciência de seguir paradigmas de maneira natural, então eles não existiriam, não é? Pois bem, veja novamente o código com o empacotador: <body> <div id="wrapper"> <div id="header"></div> <div id="menu"></div> <div id="content"></div> <div id="footer"></div> </div> </body> Onde: #wrapper { width: 950px; position: relative; margin-left: -475px; left: 50%; } Percebeu a mágica? O empacotador cuidou de tudo. Se quiser modificar qualquer coisa nas camadas filhas, basta utilizar o wrapper. A ideologia extendida O que eu acabei de lhes dar foi a base, mas o trabalho com camadas funciona pra tudo. Veja um exemplo seletor onde o paradigma se aplica: h1, h2, h3, h4 { color: #0000ff; } Isso vai fazer com que os seletores h1, h2, h3 e h4 comportem a mesma cor, sem ter que definir a propriedade em camadas/seletores específicos. Quando trabalhamos com camadas, sempre devemos lembrar de agregação. O paradigma é basicamente isso: agregação. Entenda que sempre é, e sempre vai ser conveniente a utilização de camadas e agregadores. Isso sempre condensa e deixa o código mais legível e utilização. Tanto isso é verdade que mesmo os veteranos em CSS podem se perder em um código com implementações proprietárias distintas. Conclusão Agregue. Você não tem nada a perder. Vai tornar o seu código mais reutilizável, limpo, sexy e bem arquitetado. Ah, e só um lembrete: classes não devem ser utilizadas para a criação de camadas únicas. Só utiliza-se classe quando você for trabalhar com classes dinâmicas ou que possam se repetir. Entendido?! ;) Quem quiser, @chiefgui. E por hoje é isso. Abraço! Compartilhar este post Link para o post Compartilhar em outros sites
Andrey Knupp Vital 136 Denunciar post Postado Fevereiro 5, 2012 Parabéns Guilherme, ótimo tutorial ! Compartilhar este post Link para o post Compartilhar em outros sites
