Introdução a Canvas do HTML5

De alguns anos para cá a tendência no desenvolvimento Web é gerar gráficos de relatórios diretamente no navegador do usuário e não mais no lado servidor. A vantagem é que todo o processamento fica no lado cliente e devido ao dinamismo do JavaScript é possível aplicar efeitos e animações… muito legal, não é?

Mas você já se perguntou que tecnologia é utilizada para desenhar esses gráficos via JavaScript? A resposta é Canvas do HTML5.

Com Canvas podemos desenhar gráficos, figuras geométricas, imagens, textos e animações diretamente no browser. Para você ter idéia do poder da tecnologia, com um pouco de JavaScript e Canvas nosso ex-estagiário criou em questão de minutos a logo da TriadWorks:

Logo da TriadWorks em Canvas do HTML5
Logo da TriadWorks em Canvas do HTML5

Não pára por aí… Se você conhecer um pouquinho de JavaScript e tiver uma boa lógica de programação você consegue criar um jogo sem muitas dificuldades! O melhor é que seu jogo rodará no navegador do seu desktop ou smartphone!

Para ajudá-lo a entender como o Canvas funciona e dar seus primeiros passos com a tecnologia nós postamos no blog uma introdução muito objetiva e didática do assunto:

>> HTML5: desenhando gráficos no browser com Canvas

No post de quebra ainda te damos algumas dicas sobre engines e framework para criação de jogos usando HTML5.

Como você já deve ter observado, a tendência do mercado é aproveitar melhor os recursos do HTML5 e dos navegadores a fim de criar interfaces de usuário mais ricas. O próprio JSF 2.2 investiu pesado na integração com HTML5!

Enfim, com Canvas + JavaScript você pode ir muito longe!

Controle fino do HTML gerado com Pass Through Attributes e Elements do JSF 2.2

Uma das maiores vantagens e também um dos problemas mais irritantes do JSF é o controle fino do HTML gerado pelo componentes. Em certas situações não temos a necessidade de nos preocupar com o HTML, CSS ou JavaScript gerado pelos componentes; noutras, por outro lado, precisamos fazer ajustes finos no código renderizado para o browser pelos componentes para fazer correções na página relacionados a cross-browser, responsividade ou simplesmente utilizar determinados plugins do jQuery.

Esse problema ficou mais critico com a chegado do HTML5, na qual trouxe vários atributos e elementos para simplificar e melhorar o desenvolvimento Web, como o atributo placeholder, que adiciona um texto em um input vazio. Se tentarmos adicionar estes atributos do HTML5 (ou mesmo customizados) diretamente no componente eles serão ignorados pelas classes renderer’s do JSF, como a seguir:

<h:inputText id="email" value="#{bean.email}" placeholder="placeholder" />

O código acima não renderizará o atributo placeholder para o browser. Ele simplesmente será ignorado pelo JSF. Até a versão 2.1 do JSF isso só se resolvia estendendo e alterando as classes renderizadores dos componentes, o que pode dar mais trabalho do que um desenvolvedor gostaria.

Mas com o JSF 2.2 este problema não mais existe, pois esta nova versão trouxe consigo o suporte HTML5 através do HTML Friendly Markup, na qual nos permite inserir e modificar atributos diretamente no componente (pass through attributes) e até mesmo escrever páginas 100% HTML na qual podem ter seus elementos ligados a componentes no lado servidor (pass through elements), o que é ótimo para tirar proveito das novidades do HTML5.