Sempre que olhavamos para o site do ATI pensavamos “Que coisa de programador”. Apesar de não ser um site feio, ele era um site simples demais para algo que precisavamos chamar a atenção e ter mais informações dentro do site. Com isso veio a nossa aventura, minha e da Thais, de fazermos um site novo. A Thais ficou mais na parte pensante do projeto, tendo as idéias, vendo se o novo design ficaria agradavel e supervisionando pra ver se tava tudo certo. Eu já fiquei com o trabalho duro, afinal, como muitas mulheres gostam de dizer, homens servem pra isso. Fiz todo o layout e encaixei com o nosso antigo site.
Eu aceitei fazer isso, mesmo sabendo que não iria ser facil, pois eu sou programador Java e até nisso que é minha area, eu sou novo. Então imagine você para trabalhar com HTML, CSS e JSF (que utiliza XHTML) na construção de um layout. Apesar de já ter visto e conhecer, o conhecimento de HTML e CSS eram basico, vide o site anterior. E foi ai que começaram os problemas para fazer o novo layout e muitos fogem dos problemas, mas o que se aprende na area de tecnologia é que todo problema é um aprendizado novo (esse sou eu dando conselhos para os iniciantes).
Com isso eu aprendi que HTML e CSS não servem de nada. MENTIRA, serve e muito. Eu achava que o CSS era algo simples e fazia coisas mais simples ainda, e trabalhando com ele vi que é algo bem poderoso e faz algumas coisas bem legais mesmo, principalmente agora com o HTML 5 e CSS 3, que eu não cheguei a usar, mas como eu andei pesquisando sobre para fazer algumas coisas, acabei vendo outras coisas.
Bom com esse mês, trabalhando em todo o layout do ATI, posso falar um pouco sobre essas tecnologias. Uma coisa que facilitou em muito o trabalho, a seguir explico o porque, foi a utilização de um layout mesmo. Tenho nesse layout apenas as coisas que vão se repetir em todo o site, como exemplo o cabeçalho, o menu e o rodapé do site. Abaixo exemplificando apenas a pagina “layout.xhtml”:
[sourcecode language=”html”]
<html >
O div com id cabecalho, seria o div contendo o logo, redes sociais e telefone. O div com id menu, onde encontrasse o menu. O <ui:insert name=”body”/> diz que posso incluir outra pagina ali, naquele espaço, no caso em outra pagina vou colocar outra tag indicando que todo meu código vai ser escrito nessa pagina.
Nas paginas XHTML do site, a pagina vai começar com o tag html igual a outra. Porem as tags <head> e <body> não precisam. Só vão ser necessarios duas tags. Vou exemplificar abaixo como ficaria uma pagina index que vai utilizar o layout.
[sourcecode language=”html”]
<html>
<ui:composition template=”CAMINHO/layout.xhtml”>
<ui:define name=”body”/>
Aqui você escreve o código inteiro da pagina, ignorando tudo que tiver no layout.
</ui:define>
</ui:composition>
</html>
[/sourcecode]
Isso vai se repetir em todas as paginas e todas elas vão ser como se fossem a do layout, você apenas vai preencher a parte branca, no caso da imagem acima.
No final, qual a utilidade disso, já que você pode repetir o código todo em todas as paginas, não é? Bom, imagine que você tenha 20 paginas no seu site, caso você decida fazer uma mudança de layout, como eu fiz para o site do ATI, você teria que repetir essa mudança em 20 paginas diferentes. No final com isso te ajuda para qualquer mudança. Talvez depois você necessite alguns ajustes em algumas paginas, fica mais facil depois, pois as paginas ficam mais limpas, não tem toda a repetição do layout e para toda manutenção fica mais simples.
Clique aqui para conhecer as mudanças !
Dúvidas, sugestões? Deixe seu comentário?