luminescente

Aqui vão algumas notas soltas sobre a web a um nível técnico.

Coisas que vejo no dia a dia no trabalho ou vou vendo nos sites que visito (claro que vou cuscar o source). Alguns problemas fundamentais, outros detalhes menores, mas que se podem encontrar sem ser preciso procurar muito.

Sem pretender ofender o trabalho de ninguém que também tenho a minha quota de azelhices (podem começar neste blog) e uma pessoa vai aprendendo com o tempo, não é verdade?

Inicialmente este texto era focado naquilo que se faz em Portugal, mas cedo abandonei a ideia. Há por aí HTML+CSS com muita qualidade a ser debitado por portugueses e também muita asneira feita por estrangeiros. Nem todos os bifes são o [http://en.wikipedia.org/wiki/Zeldman](Jeffrey_Zeldman) assim como nem todos os portugueses são o Chico que vende sites feitos no Frontpage.

#### HTML

- As tabelas continuam vivas e de saúde, infelizmente. Os velhos hábitos custam a morrer mesmo com soluções melhores. Há efeitos que é complicado fazer sem tabelas (alinhamentos verticais, por exemplo), mas não há desculpa para ainda se usar tabelas.
- Atributos das tags não delimitados, estruturas inválidas (elementos block dentro de elementos inline).
- Divitis: Quando o DIV é a resposta para todos os problemas, a pergunta não foi compreendida.

#### CSS

- Usa-se CSS, mas mal. Muitas vezes apenas para FAC (Fonts And Colors), ou corre-se tudo a DIVs com classes de nome “bold”, “titulo”, “link”.
- Não é necessário definir para todas as tags o font-family/font-size. Define-se uma vez para o body e basta para a maior parte das situações. Pelo menos façam uma regra “p, div, span, a, table, td, th” para aplicar num único sítio a fonte predominante em vez de repetir as propriedades da fonte para cada tag/id/classe.
- Selectores de contexto. Em vez de definir que os links dentro de um determinado elemento têm uma determinada formatação, corre-se tudo com classes e IDs compostos (a.sidebarContentGroupLink {}). O IE é muito mau, mas pelo menos compreende selectores de contexto simples (para o exemplo anterior, algo como #sidebar .group a {} ).
- IDs repetidos (hint: é para isso que as classes existem).

#### Flash

- Recurso a Flash e Javascript para coisas simples como menus e links de navegação, quando não mesmo para sites inteiros.
- Scrolling do conteúdo feito em Flash, cada qual com a sua implementação, usualmente avariada, em que as coisas não funcionam como se esperam normalmente.

#### Javascript

- Javascript da idade da pedra. window.layers, document.nomedoform.field, doc.write() em XHTML. O Google é vosso amigo, mas neste tema afastem-se dos primeiros resultados da pesquisa, a não ser que sejam um link para o [http://www.jquery.com](jQuery).
- Tal como indicado para Flash, as inúmeras macaquices que se vêem com o scrolling do conteúdo em Javascript, que não funciona, ou não funciona de forma intuitiva ou com lacunas (não suportar scrolling com a roda do rato, por exemplo).

#### Vários

- Frames! Argh!!!
- Confusão com o encoding dos caracteres. Envia-se latin1 quando o o header ou a metatag indicam UTF-8. Strings que são processadas por funções que não compreendem as sequências UTF-8 e e mutilam caracteres (hint: em php usar as funções mb_* em vez das simples como o substr, strlen, etc).
- site.com deve ir ter ao mesmo sítio que www.site.com. Acontece mais vezes do que julgam.
- Usar XHTML por tudo e por nada, sem se perceber o que se ganha em relação ao HTML4.
- Há várias tags que não são muito utilizadas mas são importantes. Label, optgroup, fieldset+legend, até mesmo os h1..h6.
- Não se usam [sprites](http://www.alistapart.com/articles/sprites). Continua-a a recorer ao velho script de pre-load de imagens (copiado do *I feel lucky* do Google…), ou deixa-se o utilizador esperar o carregamento da imagem do menu quando passa o rato por cima.
- UPDATE: em páginas com mais do que um formulário, carregar em Enter após se preencher os dados faz o submit do formulário errado, normalmente o primeiro da página.

Três coisas relacionadas com impressão, vagamente relacionadas:

- Segundo o post aqui do colega no Planeta, a Epson meteu em tribunal fabricantes de tinteiros compatíveis. Por acaso até tenho Epson (uma C62 com uns aninhos), e sempre usei tinteiros de marca branca. São baratos, funcionam, e não há chip para chatear. Que raio de coisas inventam. Afinal de contas, é tinta, não é Chanel nº5 . Nem se vê gasolina da BMW ou da Ferrari…
- Spam postal do Carrefour tinha um multifunções Lexmark (com leitor de cartões) por 25 euros. Não, obrigado. Lexmark nem para esquartejar para peças.
- Pessoal, estamos em 2007. Para imprimir conteúdo de páginas HTML também se pode usar CSS. Leiam como no sempre actual A List Apart. Apenas com CSS (e a função normal de imprimir do browser) desliga-se o que não interessa aparecer na versão impresa (menus, navegação), além de redimensionar containers, aplicar um tipo de letra melhor para o papel, “ligar” secções escondidas na versão normal do site. E se o browser for decente (ie: não-IE), até se fazem malabarismos como meter o URL de um link a seguir ao próprio link e coisas ainda mais catitas. Poupa-se o servidor, cliente e o utilizador que tem menos um popup para gerir.

Arghhhh!!!!

Why do designers insist on writing their CSS rules on the same line like

.someRandomClass { width: 320px; height: 200px; background-color: red; color: white; }

It drives me nuts!

Here is a new CSS/Javascript hack of mine: transparent image reflection, like it can be seen on the image on the left.
Been toying with this for the last few days and after some testing here it is. It’s slow, not fully tested, and probably not good enough to be used, but this can be something to improve and build on.

The idea itself is not original, as it can be seen in lots of places, from websites to software, but this implementation is as far as I know unique, in the sense it does not require browser support for the Canvas tag, like this implementation.

It’s working with Safari, IE and Firefox. IE and Firefox support animated gifs as background, so if the source image is a animated GIF so is the reflection.

Here it is, play with it, check the source and let me know if you liked!