Artigos
Boas práticas na estruturação de interfaces.
O planejamento estrutural de seu código html é também de grande importância para organização de tags e propriedades css, para o trabalho em equipe e para uma manutenção facilitada.
Por Thaiana Poplade
Ao iniciar um novo projeto, precisamos estabelecer um planejamento de tempo de trabalho X modelo de trabalho. Em geral, não há uma regra estabelecida, pois muitos desenvolvedores Front-End acabam por utilizar suas próprias lógicas de estruturação de códigos levando em consideração qualidade em menor tempo.
Conforme vamos adquirido experiência na área, acabamos assimilando e adotando os métodos utilizados na empresa ou agência em que trabalhamos somados à troca de experiência com os outros profissionais. Ainda assim, existem boas práticas, percebidas por profissionais que já estão no mercado há algum tempo, que podem colaborar para que qualidade e velocidade sejam pontos primordiais no desenvolvimento de um website.
Identificando os 3 principais elementos de uma interface
O primeiro passo é identificar os 3 principais elementos do projeto – topo, conteúdo e rodapé. Esses elementos são comuns à maioria das estruturas que temos na web, trazem as principais informações do website e tendem a repetir-se em todas as páginas internas com as mesmas características visuais estabelecidas na “home”.
Ao identificá-los – ainda no arquivos de layout – é importante já observar propriedades básicas desses elementos como: altura, largura e tipo de propriedade que será utilizada para o background desta interface, levando em consideração principalmente a versatilidade deste projeto à diferentes resolução de tela.
Identificadas essas informações, inicie a estruturação da interface pelo código html criando estes 3 elementos:
| HTML 4 | HTML5 |
| <body> <div id=”header”>conteúdo topo</div> <div id=”content”>conteúdo corpo</div> <div id=”footer”>conteúdo rodapé</div> </body> |
<body> <header>conteúdo topo</header> <div id=”content”>conteúdo corpo</div> <footer>conteúdo rodapé<footer> </body> |
Folhas de estilo externas
O uso de folhas de estilos externas para declaração de propriedades css é uma das práticas que incansavelmente vem sendo ressaltada e com objetivo: propriedades declaradas de forma “inline” dificultam a manutenção de website, deixam o código carregado de informações não relevantes para mecanismos de busca e para leitores de tela além de, devido este tipo de declaração ter maior relevância na renderização realizada pelos browsers, o que é declarado “inline” vai sobrescrever o que foi declarado nas folhas externas, fazendo com que você se obrigue a utilizar hacks, ou seja, um “conserto” atrás de outro.
Reforçado o recado continuamos, para estruturação inicial de uma interface, podemos criar uma folha de estilos com as propriedades básicas (diagramação de sustentação dos 3 principais elementos), reset nas pré-formatações de alguns elementos (já comentado em outro artigo) e declaração dos estilos dos elementos de repetição do projeto (elementos de topo, menus, breadcrumbs, etc). Esta folha de estilo, por exemplo, chamaremos de: estrutura.css.
Para as demais páginas, além da “home”, caso seu projeto seja um projeto de médio a grande porte (websites institucionais, e-commerces e portais) uma dica é o uso de, além da folha de estruturação, uma folha para cada página com suas respectivas propriedades. Por exemplo: home.css, noticias.css, empresa.css, etc.
Visualize a interface em blocos
Após estabelecer os principais elementos e determinar as folhas de estilos externas que serão criadas, as primeiras declarações css serão feitas a fim de criar uma estrutura de sustentação do website e com a estrutura principal pronta, podemos iniciar a inserção das demais informações que estão atreladas à estes elementos, por exemplo, no elemento topo podemos ter um menu, mas só iniciaremos sua codificação após diagramar o topo do website e verificá-lo em todos os browsers possíveis. Esta prática facilita a visualização da interface em blocos e a hierarquia que pode ser criada entre eles; hierarquia esta que pode ser traduzida nas folhas de estilo que permitem propriedades herdadas entre classes e ID’s, traduzindo esta prática em velocidade na determinação das características visuais do projeto.
Outras pessoas podem fazer a manutenção de seu código?
Iniciada a codificação da interface, esta última prática servirá principalmente para os casos de trabalho em equipe. Se sua resposta foi “sim” para a pergunta acima, reforçamos o uso de comentários tanto nas estruturas html quanto nas estruturas css, separação de imagens por pastas, folhas de estilos diferenciadas e etc. Se sua resposta foi “não”, ainda assim reforçamos o uso das possibilidades citadas acima, em prol das boas práticas entre profissionais Front-End.
Portanto, comente seus código, se organize para estruturar informações e crie métodos, pois você com certeza perceberá, mais velocidade, facilidade de manutenção e mostrará a diferença entre profissionais Front-End e o “amigo do sobrinho que faz sites”.
Pingback: Tweets that mention Boas práticas na estruturação de interfaces. | Tableless - Desenvolvimento com Padrões Web -- Topsy.com
Pingback: Boas práticas na estruturação de interfaces | Blog do Expert
Pingback: Quer ser bla bla bla? | Fabricio Sites
Pingback: Quero ser Desenvolvedor FrontEnd | Fabricio Sites