The Web Design Survey 2007 - A List Apart

24 Abril 2007
Categorias: Tech, Webdesign
Comentários(1)

Para os interessados em tentar ganhar uma entrada grátis para o An Event Apart, conferência sobre Web Standards e Best Pratices, realizada nos Estados Unidos, um iPod vídeo com 30GB, ou uma A List Apart T-shirt, a A List Apart está a realizar uma sondagem aos profissionais na área das Tecnologias de Informação. Aquilo que eles pretendem é quantificar, ou tentar, alguns dados pouco conhecidos sobre estas profissões, quem são, onde vivem, a designação do cargo e outras questões relacionadas com o tipo de trabalho efectuado.
Dependendo da forma como se responde há um máximo de 37 perguntas, a maioria de múltipla escolha.
A lista dos oradores da conferência torna o prémio extremamente aliciante. Ok, o iPod também, mas um pouco menos.
Habilitem-se!
Acham a sondagem uma perca de tempo? Queixem-se aqui.
Confirmação de preenchimento à sondagem

Coda!

23 Abril 2007
Categorias: Tech, Webdesign
Comentários(0)

Coda IconDepois do excelente Transmit, a Panic lança o Coda. Brilhante. Como o próprio site indica: “One window web development”, ou Text editor + Transmit + CSS editor + Terminal + Books + More = Whoah.
O site está muito bem feito, mas o Coda rapidamente faz esquecer isso. Janela com ficheiro CSS, outra com ficheiro html, outra com o terminal, remoto ou local, outra com a pré-visualização, seja de ficheiros locais, sejam remotos. Mesmo com isto tudo, consegue ser muito muito leve. Fantástico! Conquistou-me!

Agora com licença que vou ali fazer uma comprita!

Hoje passei a ser Geek

18 Abril 2007
Categorias: Tech
Comentários(5)

A convite do Mário Gamito sou agora membro do Planet Geek, um agregador de blogs sobre tecnologia.
Espero contribuir de forma positiva.

Tabelas “às riscas” I - HTML/PHP

17 Abril 2007
Categorias: CSS, HTML, PHP, Webdesign
Comentários(2)

Todos, ou quase todos, ao criar uma tabela já sentiram a necessidade de alternar a cor de fundo das linhas para facilitar a compreensão e a leitura da mesma. Vou, em 2 artigos, mostrar 4 formas de o fazer: no primeiro manualmente, utilizando HTML e automaticamente, com PHP. No segundo utilizando DOM Scripting e uma biblioteca Javscript, a jQuery.
O resultado pretendido é este:
Tabela "às riscas"
Vamos utilizar os seguintes ficheiros base:

(Ler o resto do artigo...)

Código nos posts e syntax Highlighting

Depois de, sem sucesso, procurar plugins para o wordpress (aqui e aqui), que “colorissem” o código inserido nos posts, resolvi deitar mãos à obra.
Eis o que pretendia:

  • Inserir código (qualquer linguagem) nos posts sem que o mesmo seja executado;
  • “Colorir” o código (syntax highlight);
  • Não adicionar elementos desnecessários ao código HTML da página apenas para motivos visuais;

O último ponto foi um factor de exclusão para a maioria dos plugins que encontrei. Acabei por utilizar o Code Markup que permite a inserção de código nos posts sem que este seja executado. O primeiro ponto estava ultrapassado.

Depois, precisava de colorir o código. Quase todos os plugins que encontrei utilizavam o GeSHi que realça código fonte (syntax highlight) atribuindo cores aos diversos componentes. Funciona com um grande número de linguagens, mas acrescenta elementos visuais à página e isso levou-me a não o utilizar. Virei-me então para uma solução com javascript.

Encontrei, no Google Code, o google-code-prettify que tem o mesmo efeito que os plugins que encontrei e não acrescenta elementos desnecessários ao código da página. Vencedor encontrado.
Socorrendo-me da fantástica jQuery criei um ficheiro javascript com o seguinte conteúdo:
$(document).ready(function() {
$("code").each(function(i){
this.className = "prettyprint";
});
prettyPrint();
});

ao qual acrescentei o código do google-code-prettify para evitar a inclusão de ainda mais um ficheiro. De notar que, na sua forma inicial, o google-code-prettify sugere que se invoque a função prettyPrint(); da seguinte maneira:
<body onload="prettyPrint()">
Chamado de inline events este método deve ser evitado, de forma a uma maior separação entre o conteúdo, a apresentação e a dinâmica das páginas.

O código faz o seguinte:

  1. assim que o documento esteja disponível, selecciona todas as tags code que não tenha a class plain;
  2. em cada um dos elementos seleccionados anteriormente atribui a class prettyprint, que é usada como alvo pelo google-code-prettify;
  3. depois de todos os elementos code correspondentes terem a class prettyprint atribuída, executa a função prettyPrint(); que vai alterar a cores do texto dentro dessas mesmas tags;

Bastou adicionar o ficheiro criado ao cabeçalho (head) da página, assim:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="highlight.js"></script>

E pronto, está a funcionar.

Caso o utilizador não tenha o javascript activo o efeito perde-se. É verdade, mas evita o adicionar de elementos com fins visuais, que era precisamente aquilo que pretendia.
Podem ver exemplos desta funcionalidade nas entradas de código neste post.