por José Carlos Joaquim
Wednesday, 30 de May de 2007 | 1 comentário
Se precisa de criar tabelas de dados com funcionalidades avançadas, como edição inline e ordenação, a Smashing Magazine publicou uma lista que vai concerteza solucionar muito problemas. Chama-se Data Grids with AJAX, DHTML and JavaScript.
Thursday, 26 de April de 2007 | 2 comentários
Esta é a conclusão do anterior Tabelas “às riscas” I – HTML/PHP.
Para quem não leu, o resultado que se pretende alcançar é este:
No post anterior falei em duas formas de alternar a cor de fundo das linhas de uma tabela de dados. A primeira, manualmente, atribuindo a class .odd às linhas ímpares, directamente no código HTML. Como esta solução se torna mais difícil à medida que o número de linhas vai aumentando, utilizei a versão PHP para obter o mesmo resultado, automaticamente, e com menor probabilidade da ocorrência de erros.
Neste artigo vamos utilizar os mesmos ficheiros base:
A diferença é que vamos utilizar DOM Scripting e a jQuery para obter o mesmo resultado.
Tuesday, 17 de April de 2007 | 4 comentários
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:
Vamos utilizar os seguintes ficheiros base:
Thursday, 12 de April de 2007 | 1 comentário
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:
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:
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.
Wednesday, 14 de March de 2007 | Sem comentários
A Smashing Magazine criou mais uma excelente lista. Neste caso com 53 menus de navegação baseados em CSS.
São menus bonitos e que pertencem a sites conhecidos (uns mais que outros), pelo que alguns poderão ser familiares.
Olá, chamo-me José Carlos Joaquim e sou iOS e Ruby Developer em Paris. Este é o meu site pessoal.