Bem não sou desses que reclama por qualquer coisa, mas 90% dos sites e blogs que acesso possuem essa "falha" inclusive o meu (ta ta ... ja vou corrigir), quando você clica no link ele é envolto por uma linha pontilhada, isso ocorre somente no firefox, não se é uma falha de renderização ou é proposital mas acontece e me encomoda (mais alguém ai?).

Os links ficam assim:

A solução para isso é simples, no CSS onde você estiliza a tag a de links existe a propriedade a:focus que deve receber o valor de outline como none ficando assim:

Isso é o suficiente para sumir com o pontilhado.

Este é um problema que interfere na navegação e visualização do design do site, tenho ficado atento a detalhes como este ultimamente e tenho buscado correções para os mesmos, quando achar mais "errinhos" como este posto aqui.

Bom, devido ao meu problema com Visual Studio resolvi testar o trial do Microsoft Expression WEB. Até que estou satisfeito, tem o que preciso e gosto, até melhor que o Dreamweaver se não fosse a falta de suporte a PHP, pois o MEW é para desenvolvimento de interfaces, não para programação (mesmo que fosse acho que só suportaria linguagens Microsoftianas).

O software tem tudo que os outros tem, ou seja: Folder List, Tag Properties, CSS Properties, ToolBox e uma coisa legal que gostei muito, o Aplly Styles, uma janelinha que te mostra como está ficando seu estilo CSS e mostra todo o código com tooltip.

O recurso de intellisense é muito bom, muito melhorado e bem semelhante ao Dreamweaver, atualizado para xHTML e CSS padronizados, muito diferente do VS. Isto realmente ajuda na hora do desenvolvimento tableless e WEBStandards.

Suporte a documentos HTML e ASPX são um diferencial também, enfim a Microsoft lhe permite escolher que formato quer usar e possibilita o uso de componentes HTML e controles especificos do ASP .NET, porém com as mesmas falhas que citem ontem.

Resumindo: Se eu não preferisse PHP ou a ferramenta tivesse suporte a ele, migraria com certeza, apesar que faço tudo na mão e dificilmente uso algo mais da ferramenta além do intellisense para autocompletar e me mostrar a lista de parâmetros dos métodos. Não é nada novo e espetacular, porém acho que para a Microsoft é um grande passo já que a ferramenta é otimizada para desenvolvimento semântico e padronizado.

Vale a pena conferir.

Pois é, depois da introdução vem a produção e nada melhor do que meter logo a mão na massa para ir aquecendo os neurônios, então..... vamos lá.

Utilizaremos a seguinte estrutura:

Dentro de um diretório teremos o arquivo (x)html com nossa estrutura que por sua vez utiliza-se dos arquivos layout.css para definir o layout e o arquivo style.css para estilização de fontes, cores e menus.

index.html

A estrutura inicial do arquivo index.html deve ser igual a esta, claro que você não precisa digitar tudo na mão, o Dreamweaver por exemplo faz isso pra você ao criar uma nova página HTML, a unica coisa que adicionamos foram os links para os arquivos .css, tendo esses links a página HTML "enxerga" os estilos e propriedades criadas para nossa implementação.

Nosso próximo passo é criar a separação do layout em partes onde serão contidos o cabeçalho, menu, conteúdo principal e um rodapé, mas este é assunto para um outro post que em breve estará no ar.

Obrigado pela atenção de todos e continuem a acompanhar esta jornada.

Apesar da discussão entre o uso de HTML e XHTML eu prefiro XHTML, concordo que o que usamos é apenas HTML, porém mantenho meu XHTML válido para minizar futuros problemas, definiremos todo o layout e estilos em CSS utilizando somente a estrutura da linguagem de marcação.

Para essa nossa jornada criaremos um template de blog semelhante a este aqui que uso com um modelo que podemos chamar de elástico (olhe aqui), sendo assim ele se adapta de acordo com o tamanho da janela sem quebrar ou distorcer conteúdo.

A idéia é simples e não utilizaremos imagem nenhuma, apenas texto estilizado e posicionado de acordo com o proposto, é hora de colocar em prática alguns conceitos que ja tinha no subconciente mas só fui me dar conta no curso online de design web do Bruno Ávila (recomendo).

Eu particularmente construo meus layouts na mão, linha por linha, sem utilizar modo gráfico, claro que utilizo editores com coloração de sintaxe e até auto-complete, prefiro assim pois tenho total controle e conciência de como está meu código, um pouco trabalhoso concordo, mas vale a pena na hora da manutenção ou alterações.

Bom pessoal no nosso próximo capitulo entraremos de cabeça na confecção do layout criando a estrutura dos arquivos.

Até a próxima.

Criar layouts para a web pode parecer simples e intuitivo quando utilizamos um software de edição HTML em modo gráfico como Dreamweaver, MVU, etc. Porém existem pessoas que se preocupam com a quantidade de código (lixo) gerada desnecessáriamente e completamente sem padrão ou ainda com as dúzias de tabelas geradas quando fatiamos um layout no Photoshop ou Fireworks, muito prazer sou uma delas.

Em meus projetos tento refletir algo que não tenho na vida real (organização) e sou extremamente chato neste ponto, principalmente quanto a validação dos padrões (W3C) utilizados (quase obrigatóriamente), se padrões existem é porque há uma tendência de segui-los e confesso que fico muito feliz vendo meu trabalho pronto e validado corretamente.

Pensando nisso decidi começar esta jornada onde o foco é a criação de layouts, passando pela teoria do design aplicado, aplicação de conceitos, estruturação do formato, cores, bordas, links, estilizações css, semântica e validações. Não sou designer, minha atuação é como desenvolvedor, e justamente por ser desenvolvedor me obrigo muitas vezes a me virar sozinho e estas situações são grandes escolas onde se aprende muita coisa.

Nas próximas partes desta jornada muita ação e porque não diversão, afinal eu relaxo dos momentos de stress de programação gerando meus css's.

Em breve mais....