Esse trabalho é um exercício acadêmico para a pós-graduação.
São documentos XHTML e CSS baseados nas especificações da W3C, validado, acessível e semântico.
O objetivo foi exercitar as técnicas aprendidas em sala, durante o período da disciplina CSS e linguagens de marcação (HTML e XHTML). Ministrado pelo professor André Melo.
O layout e a implementação foi desenvolvido por mim, Felipe de Albuquerque.
Topo ^
Vou descrever aqui algumas particularidades do meu XHTML.
A maior parte dos comentários é no fechamento das tags, pois geralmente no início do bloco, tem algum ID que indica a abertura (eu acho desnecessário colocar no início por que fica redundante já que tem um id indicando a abertura).
Declarei as meta tags que achei mais conveniente para esse projeto, com o objetivo de alcançar as quatro, solicitadas.
Não fiz hack para o ie 7 porque não ficou com anomalia, mas para o ie 6 foi necessário pequenas alterações. É no hack que eu coloquei o position que vc solicitou no exercício, posicionei a coluna 2.
Todos os linques, tem title e alguns como o menu tem teclas de atalho "accesskey" para portadores de necessidades especiais que vou ficar me referindo assim (PNEs).
No #logo eu utilizei a técnica do text-ident (para SEO), e coloquei um linque para ir direto ao conteúdo (para PNEs).
Quando o PNEs que navegar com o tab, vai ser a primeira opção, para ele ir direto ao conteúdo, e ainda tem uma tecla de atalho "accesskey=p", caso ele prefira usar.
O menu principal tem tecla de atalho (Ex: se você apertar Shift + alt + c. vai para a pagina de css. Se apartar a i vai para índex, x para xhtml e parai vai). Usei isso para ficar mais acessível para os PNEs.
Ainda no menu coloquei a tag, abbr, que é pra explicar que é uma abreviação (ex: CSS = Cascading Style Sheets).
Durante todo o documento, preservei a semântica e as boas práticas.
Como fiz o site todo, pode ter em algum lugar no código algo que poderia ser melhorado (Microformats), mas fiz o Maximo que pude com o tempo que tive e acredito que tenha ficado muito bom.
Nas paginas que tem códigos de exemplos utilizei a tag pre e code. Nessas partes (pre) a endentação não ficou boa porque a tag pre deixa o código da forma que a gente escrever, ai tem que ficar colado no canto e com as espaços corretos, porque ele fica da forma que é escrito. Mas é apenas nestas partes, porque realmente é para ser da forma que esta.
Usei sprite para os marcadores dos linques, a imagem muda de posição quando o mouse passa no link, no caso da a impressão de mudança de cor da imagem.
Em fim, acredito que seja isso, as demais observações estão no código.
Topo ^Felipe de Albuquerque é formado em Web Design pela Faculdade Marista Recife, atualmente está cursando pós-graduação em Front-End Engineer.
