Já tem algum tempo que o HTML5 esta ai, nenhum browser ainda suporta todas as suas funcionalidades, mas mesmo assim o desenvolvimento em HTML5 já esta começando a ameaçar o Flash Player.

A Apple decidiu comprar uma briga (na minha opinião não justificada) com a Adobe ao decidir que o IOS não teria suporte ao Flash e deu um empurrãozinho no HTML5, antes disso pouca gente realmente já estava antenado no assunto.

Na minha opinião, o Flash é superior em vários aspectos ao HTML5, começando pela orientação a objetos e a integração do AS3 com diversas outras linguagens e tecnologias, sejam da Adobe ou não. O AS3 vai muito alem de fazer sites e o HTML5 tem seus pontos fortes também, a verdade é que o HTML5 não vai substituir o Flash totalmente como a Apple gostaria e os dois vão continuar existindo por um bom tempo.

Para me manter atualizado decidi dar uma olhada no HTML5 e gostei bastante, sempre gostei de bibliotecas gráficas, e decidi escrever um tutorial misturando um pouco do meu gosto por desenvolvimento de jogos.

Este tutorial será dividido em vários posts curtos, conforme eu for fazendo o jogo vou postando as partes do código, minha intenção é manter os posts rápidos e frequentes, para facilitar a leitura de todos os posts estou criando a categoria Tutoriais / HTML 5.

O jogo criado será relativamente simples, um clone de Paciência Spider, onde tentarei usar o minimo de imagens possíveis e explorar o poder do canvas, novo recurso do HTML 5.
Como eu escreverei o jogo junto com os posts e conforme eu for estudando HTML5 talvez em algum momento eu decida mudar boa parte do que já foi feito.

Read more

Domo Arigato Python!!!

Se você trabalha com html provavelmente já está acostumado com vários padrões pessoais de estruturas que utiliza sempre e as vezes faz um copy/paste de algum outro arquivo aberto para ganhar tempo, afinal escrever tags similares repetidamente não é a tarefa mais agradável do mundo.

O Zencoding é um plugin para editores de texto escrito em python que torna a escrita do html incrivelmente mais rápida, trata-se de uma forma de abreviar o código, que com o pressionar de um atalho se transforma em um gigantesco bloco de código identado e correto, pronto para você por o seu conteúdo.

Abstrato demais? Se você conhece bem html o entendimento da sintaxe deve ser trivial, então vamos aos exemplos…

A linha abaixo:

div#header>div.menu>ul>li.selected+li*5

Resulta em:

<div id="header">
<div class="menu">
<ul>
<li class="selected"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>

(Devia estar identado mas o WP me sacaneia)
Muito legal, não é? Vamos sofisticar um pouco mais:

div#leftmenu>img.logo+h1+(ul.menu$*3>li#item$*6)+p.copyright

Se transforma em:

<div id="leftmenu">
<img src="" alt="" class="logo" />
<h1></h1>
</div>
<ul class="menu1">
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
<li id="item6"></li>
</ul>
<ul class="menu2">
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
<li id="item6"></li>
</ul>
<ul class="menu3">
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
<li id="item6"></li>
</ul>
<p class="copyright"></p>

Mais exemplos estão disponíveis no vídeo abaixo. Os fontes e detalhes de instalação estão no site oficial: http://code.google.com/p/zen-coding/

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.