Avellar & Duarte, é uma empresa de design e consultoria do Rio de Janeiro. Criaram em seu site institucional um glossário e técnicas para quem deseja trabalhar com desenvolvimento web.

No portal é possível aprender muito sobre qual metodologia adotar na hora de começar a desenvolver um projeto, tudo passo-a-passo:

• Contextos de projeto (web)
• Iniciação e planejamento
• Conceituação
• Elaboração da estrutura
• Interface
• Características do conteúdo
• Recursos, técnicas
• Produção
• Lançamento
• Encerramento, manutenção
• Dispositivos móveis

Sem dúvida uma fonte excelente de consulta e aprimoramento.

Link: http://www.avellareduarte.com.br/

Sei que parece meio estranho o tema deste post, mas o assunto é simples.

Sabe quando você precisa fazer um link em sua página para um documento .doc, .pdf, .xls e outros? Pois é, como indicar para o usuário que aquele link é um documento tipo DOC ou um documento PDF?

Alguns usam duas colunas, onde colocam o ícone do tipo de documento de um lado e o link do outro, até funciona, mas não é nada prático. O ideal seria identificar o tipo de documento automaticamente, e assim já inserir o ícone apropriado.

Tendo como referência o artigo CSS 2.1 Selectors, e os mini-ícones do site famfamfam, é possível criar umas classes CSS para fazer isso, vejamos:

a[href$=’.pdf’] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(Images/PDF.gif) center left no-repeat;
}

Também é possível criar links com ícones personalizados para os tipos comuns:

a[href^=”http:”] {
display:inline-block;
padding-right:14px;
background:transparent url(/Images/link.gif) center right no-repeat;
}

a[href^=”mailto:”] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/email.gif) center left no-repeat;
}

a[href$=’.pdf’] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/pdf.gif) center left no-repeat;
}

a[href$=’.swf’], a[href$=’.fla’], a[href$=’.swd’] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/flash.gif) center left no-repeat;
}

a[href$=’.xls’], a[href$=’.csv’], a[href$=’.xlt’], a[href$=’.xlw’] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/excel.gif) center left no-repeat;
}

a[href$=’.ppt’], a[href$=’.pps’] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/PowerPointIcon.gif) center left no-repeat;
}

a[href$=’.doc’], a[href$=’.rtf’], a[href$=’.txt’], a[href$=’.wps’] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/WordDocIcon.gif) center left no-repeat;
}

a[href$=’.zip’], a[href$=’.gzip’], a[href$=’.rar’] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(/Images/ZIPIcon.gif) center left no-repeat;
}