Blog: PedroAC

Para aplicar efeitos com sobreposição de apontador, usa-se a pseudo-classe hover. Por exemplo, neste blog ao sobrepor o apontador num botão (como na pesquisa), esse parece ser pressionado.

Tive de fazer alterações no design do site ao descobrir problemas com o IE (como costume) e limitações do serviço (que espero serem ultrapassadas pelo suporte técnico do serviço). Já estava a pensar em mudar o visual para algo mais organizado, elegante e personalizado (espero que gostem).

Neste artigo mostro algumas medidas que usei para refazer o visual do site, com dicas, sugestões e problemas encontrados que podem ajudar a personalizar e melhorar os vossos sites. Não vou escrever sobre tudo o que fiz (o texto já vai longo...), e mais tarde farei artigos sobre temas específicos aqui tratados, aprofundando melhor.

Também espero receber críticas, sugestões e textos sobre experiências, que podem ajudar-me e aos webdesigners.

Teste offline

Visualizei o código fonte da página (em XHTML), gravei num ficheiro e procurei pela ligação do ficheiro CSS:

Portanto, o ficheiro CSS encontra-se em http://pedroac.blog.com/css. Guardei uma cópia, num ficheiro "pedro.css" e substituí a referência da ligação ao ficheiro CSS, no código XHTML, deste modo:

Isto vai permitir testar as modificações realizadas no computador que uso, isto é, em offline, publicando o código quando tiver testado previamente.

Com o Mozilla Firefox é possível ver os resultados de edição CSS em tempo real, usando o editor de CSS do plugin Web Developer. Basta aceder a Web Developer > CSS > Editar CSS, fixar o editor, para não perder os dados ao mudar de separador ou link, e mudar o código directamente. Depois de ficar satisfeito com os resultados, grava-se num ficheiro.

Muitos autores de blogs não personalizam as suas aparências, talvez por desconhecerem a linguagem CSS (Cascading Style Sheets). Para separar o conteúdo de documentos Web e o seu formato, utiliza-se as CSS. É uma linguagem fácil de usar, apesar de algumas inconsistências entre navegadores Web.

Infelizmente existem problemas com o IE quanto a tamanhos relativos em layouts. Desde que descobri isso, passei a usar valores absolutos (ex: pixels) para não ter demasiado trabalho a testar no Firefox e no IE, mas tenho preferência por layouts fluidos.