Blog do TreinaWeb

Posts com a Tag ‘HTML5’

• Engine para criação de jogos com HTML5 e Javascript

  
  22 de abril de 2010
  

  Os inesquecíveis jogos de Arcade dos anos 80 e das plataformas 8-bits nunca perdem o estilo e continuam sendo fonte de algumas horas perdidas no entretenimento pela internet afora, principalmente para aqueles que gostam de jogos casuais.

  É comum encontrar muitos desse jogos em Flash, no entanto, muitas iniciativas para tornar a Web padronizada e livre de plugins levem o desenvolvimento de alternativas que objetivam a necessidade somente de um navegador para execução de aplicativos. E isto também está sendo aplicados ao jogos e animações, com o uso de Javascript e com os recursos, ainda não completamente especificados do HTML 5.

  Como a engine Akihabara, que utiliza alguns recursos do HTML 5 e de algumas bibliotecas Javascript para construção de jogos estilo 8-bits, sem a necessidade de nenhum plugin, mas funciona só nos navegadores atuais.

  Embora a documentação da engine não esteja completa, podemos notar nos demos que existem muitos recursos interessantes para a realização de jogos simples, que já estão disponíveis, como detecção de colisão, animação por sprites e captação de eventos do teclado.

  Abaixo alguns exemplos de jogos rodando no HTML 5:

  

  Leave Me Alone

  

  The Legend Of Sadness

  

  T-Spin

  Fonte: JavaFree

  Tags: engine, HTML5, Javascript, Jogo
  Publicado em Fazendo hora | 4 Comentários »

• Google Demonstra QuakeII no browser apenas com HTML5 e WebGl

  
  5 de abril de 2010
  

  Para tentar evitar um pouco o IPad, que foi lançado no sábado, vamos falar de algo surpreendente que o time do Google fez. Com os 20% do tempo livre que o Google disponibiliza para os seus funcionários nerds, alguns engenheiros portaram o jogo Quake II para o HTML5, usando o Google Web Toolkit.

  Para rodar no browser, o Quake II utiliza a tecnologia WebGl em conjunto com a API Canvas, elementos de áudio HTML5, API de armazenamento local e WebSockets. Os navegadores modernos, como Chrome e o Safari, são capazes de roda-lo, atingindo até mesmo 60 quadros por segundo.

  Não acredita? Veja o vídeo:

  Fonte: MacMagazine

  Tags: Google, HTML5
  Publicado em Notícias | Nenhum comentário »

• Como utilizar o HTML5, atualmente?

  
  30 de janeiro de 2010
  

  Infelizmente nenhum dos maiores navegadores atuais suportam todas as novas tags inseridas no HTML5, como: article; section, header, hgroup, etc.

  Então é necessário simular estas tags com a ajuda de hacks em CSS e JavaScript. Basicamente para estas tags, a única coisa que você precisa fazer é setá-las como display:block. Veja abaixo um exemplo de css hack para aticle, footer, section e header:

  <style>
  article, footer, section, header {
  display:block
  }
  </style>

  Simples assim. Primeiramente, nós adicionamos as tags que não são suportadas pelos navegadores, então setamos os atributos display para block.

  Ok, o hack de CSS é realmente bem simples, mas infelizmente não funciona em todos os navegadores, como por exemplo o Internet Explorer. Para solucionar este problema também no IE, precisamos criar também um hack em JavaScript.

  Vamos ao código:

  <script type="text/javascript">
    (function () {
      var elements = [
        'article', 'content', 'footer', 'header', 'nav', 'section'
      ];
   
      for (var i = 0, j = elements.length; i < j; i++) {
        document.createElement(elements[i]);
      }
    })();
   
  </script>

  Note que o código acima deve ser adicionado logo abaixo às tags <link> e <style>. Caso contrário, não irá funcionar.

  Basicamente é isto, agora você pode utilizar o HTML5 em todos os principais browsers.

  Tags: HTML5
  Publicado em Boas práticas, Desenv. Web | 3 Comentários »