Klaus Paiva

Um vídeo bastante interessante que mostra vários recursos provenientes do HTML 5: canvas e SVG, <video>, geolocation, app cache e banco de dados local, e web workers. (aliás, eu já falei sobre web workers aqui no blog )

Have fun! Vi aqui.

Hoje saiu a versão 3.5 do Firefox. A lista de novidades é bastante extensa e empolgante. Dentre as novidades está o suporte para a tag <video>, para exibição nativa de vídeos num documento HTML.

Se você quiser ver uma versão, digamos, alto nível das novidades, acesse esta página.

Se você está interessado em ver as novidades da versão 3.5 para nós, desenvolvedores, veja esta página.

Fica a dica!

Tudo começou quando eu vi um jornal na rua e nele eu vi um passatempo que era bastante comum no jornal que meu pai comprava quando eu era criança. Esse passatempo consiste numa imagem /semi-?completa/ em que alguns pontos devem ser conectados para formar a imagem final.

Diante dessa lembrança eu pensei em usar o objeto Canvas do HTML 5 que eu havia comentado anteriormente para, digamos, "reviver" essa brincadeira numa formato digital.

Procurei uma imagem para fazer os testes e acabei encontrando um site bem legal, com várias imagens no estilo "ligue os pontos". Dentre as várias opções, escolhi a imagem abaixo:

Ligue os pontos e ganhe um pato (ou cisne, ou ganso, ou marreco)

A partir daí comecei a pesquisar um pouco mais sobre os métodos de desenho disponíveis para codificar algo que permitisse desenhar umas linhas sobre a imagem acima. O tutorial de Canvas no MDC foi bastante importante nesse sentido.

Bom, mas chega de enrolação e deixe-me mostrar esse tal "ligue os pontos digital". =) Basta sair clicando para ver o resultado. Há também alguns comandos de teclado disponíveis mas eu vou deixar que você descubra (espero) intuitivamente (ou por associação).

O código-fonte está bem simples  o que permite entender relativamente fácil o que foi feito. E falando sobre o código, vale lembrar que o código em si é mais uma prova de conceito do que um exemplo de código bem estruturado. Ah, e detalhe importante é a imagem no canto superior direito na página.

Pra ficar mais legal ainda, embora o tempo não me permita, seria legal colocar junto do código algum algoritmo para descobrir quando a imagem foi desenhada corretamente.

E por fim, o "liga pontos" acima foi testado (e funcionou) em Firefox 3.0.10, Opera 9.64, Safari 3.2.3 e Chrome 2.0.172. No IE 8, nativamente, não funciona.

Update! Enquanto eu "jogava" eu estive pensando e cheguei a conclusão que esse tipo de jogo pode ser interessante para pessoas que estão iniciando no mundo da informática, principalmente para adquirir destreza ao usar um mouse. Interessante!

Este é um dica de CSS, tão simples e tão prática, que se você não conhecia, vai adorar conhecer. Sabe aquela margem padrão (margin ou padding) que os muitos dos elementos (X)HTML possuem? Vamos remover essas margens!

O que há de errado com a margem padrão?

A questão aqui é muito simples: ela é inconsistente entre alguns navegadores. Alguns elementos aparecem com padding num navegador, outros usam margin, em alguns o valor é X, em outros o valor é Y... Aí já viu, bobeou e é um festival de pequenas diferenças nos seus layouts.

A solução para este problema é bastante simples, para não dizer óbvia:

* {
margin: 0;
padding: 0;
}

Usando o seletor universal "*" zeramos os valores de margin e padding em todos os elementos da página

Desta forma, um elemento só vai ter margem (interna ou externa) se você especificar, o que no final das contas facilita sua vida pois você não vai precisar ficar lembrando onde estão as inconsistências de cada elemento em cada navegador.

Não gostei desse seletor universal aí...

É, nem todo mundo se sente confortável com um seletor universal na página. Se você preferir, o Tantek Çelik tem uma solução alternativa também muito boa. É o undohtml.css. Coloquei abaixo uma cópia do original:

/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved. */
/* http://creativecommons.org/licenses/by/2.0 */
/* This style sheet is licensed under a Creative Commons License. */

/* Purpose: undo some of the default styling of common (X)HTML browsers */

/* link underlines tend to make hypertext less readable,
because underlines obscure the shapes of the lower halves of words */
:link,:visited { text-decoration:none }

/* no list-markers by default, since lists are used more often for semantics */
ul,ol { list-style:none }

/* avoid browser default inconsistent heading font-sizes */
/* and pre/code too */
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }

/* remove the inconsistent (among browsers) default ul,ol padding or margin */
/* the default spacing on headings does not match nor align with
normal interline spacing at all, so let's get rid of it. */
/* zero out the spacing around pre, form, body, html, p, blockquote as well */
/* form elements are oddly inconsistent, and not quite CSS emulatable. */
/* nonetheless strip their margin and padding as well */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }

/* whoever thought blue linked image borders were a good idea? */
a img,:link img,:visited img { border:none }

/* de-italicize address */
address { font-style:normal }

/* more varnish stripping as necessary... */

Um CSS com seletores básicos, bem fácil de ser entendido.

Faça o teste!

Experimente começar um novo projeto usando umas das duas formas propostas acima. Posso te garantir que você não vai se arrepender!