Agora aqui na praia o clima está congelante, então as fotos de surfe deram uma esfriada (que trocadilho infame). Com dias de frio, cinza e chuva não tem como escapar, a nerdice ressurge.
Lembra que uns tempos atrás eu estava com planos de aprender SVG e Javascript para fazer joguinhos? Bem, o pontapé inicial foi dado.
Não consigo aprender algo somente lendo ou fazendo exemplos. Tem que codificar, fazer um programinha simples, ver o treco funcionando. Como já tinha brincado de fazer aquele joguinho do Campo Minado em CSS, resolvi fazer outras duas versões, uma em Javascript e outra em SVG.
Sendo 100% leigo em ambos, comecei timidamente com o Javascript. Baixa uns guias daqui, vê uns códigos dali e é impressionante como é muito fácil. A linguagem tem acesso direto tanto à árvore de elementos da página HTML (parágrafos, tabelas, listas) quanto à sua aparência (CSS). Aí foi só aprender a sintaxe e meter ficha.
Em tempo, Javascript não tem nada a ver com Java. Colocaram esse nome por questões marketológicas (vai entender…)
Já o SVG foi mais complicado… Fiz o tabuleiro no Inkscape e então voltei para o bom e velho VI para editar o XML.
O Inkscape é um editor gráfico que salva como SVG. É tipo um Corel Draw. Mas é leve, livre, gratuito e funciona no Windows, Linux e Mac. Tem um tempo? Baixe-o agora e faça uns desenhos, tenho certeza que você vai se impressionar. De repente até pode limpar a consciência e desinstalar esse Corel pirata aí :)
Demorei um tempo para pescar o funcionamento de tudo, mas então vi a luz. É só encarar o XML como se fosse um HTML normal. Você usa o CSS para a aparência e o Javascript para manipulação da mesma maneira! Fica tudo lá no XML, três linguagens diferentes. Só muda que ao invés de lidar com <P>, <TABLE> e <UL>, você lida com <rect>, <text>, <circle> e amigos. Mas de resto é tudo igual.
Foi muito divertido conhecer e brincar com essas tecnologias, fica tudo bem separado, cada uma fazendo sua parte:
- HTML/SVG: estrutura
- CSS: aparência
- Javascript: manipulação
Não são todos os navegadores que entendem SVG. Firefox e Opera sim, Safari ainda não e Internet Explorer precisa de um plug-in da Adobe. Mas é uma questão de tempo até isso ficar universal.
O que, você quer o link para o joguinho? :) Ah tá, lá vai: Campo Minado versões CSS, Javascript e SVG. Lembrando que esse é o resultado de um estudo, o objetivo principal é o aprendizado e não a jogabilidade.
Veja o código fonte de cada um, estude, aprenda. Os códigos estão comentados e tentei deixar da maneira mais simples e limpa que consegui, para ficar fácil de entender. Baixe os arquivos, edite, experimente. Depois me mostre teus próprios joguinhos! :)
O que é SVG?
Sabe o Corel Draw? Nele você faz teus desenhos e ele salva os arquivos em um formato binário (.cdr), que só ele entende. Quem quiser ver teu desenho vai ter que possuir um Corel Draw também. O SVG é um formato alternativo, que usa um arquivo de texto normal (XML) e seu desenho pode ser visto no próprio navegador e até mesmo em celulares! Hoje o Corel Draw e o Adobe Illustrator (além de vários outros) já exportam o desenho para SVG. O bom de ser um formato textual, é que uma vez feito o desenho, você pode editá-lo em qualquer editor de textos fuleiro! Sua empresa mudou de nome e você precisa mudar a logomarca? Fácil, abra o arquivo SVG da logo no Bloco de Notas e troque o nome antigo pelo novo. Pronto!
Oi! Sou o
Aur