Blog do TreinaWeb!

Blog do TreinaWeb

Dicas, notícias e informações sobre cursos, programação, webstandards e desenvolvimento web.

Posts com a Tag ‘html 5’



  • Google e Arcade Fire lançam videoclipe em HTML5


    31 de August de 2010

    O papo sobre HTML5 e o futuro da web tem se esfriado um pouco nos últimos meses, mas nos sabemos que ele vai revolucionar a web. E quem é muito bom em mostrar o poder dessa futura web é o Google, aproveitando isto, o cineasta Chris Milk, o chefe do Chorme Experiments, Aaron Koblin, e a banca canadense Arcade Fire, criaram uma experiência dentro do browser.

    O Google e o Arcade Fire chamam a experiência de “filme interativo feito em HTML5″, mas eu não tenho certeza se só isso explica esse experimento disponível no site “The Wilderness Downtown”.

    O filme interativo pede que você coloque o endereço de onde você cresceu – infelizmente ele diz que não há informações suficientes para criar o filme em endereços brasileiros por conta da ausência do Street View, mas vale colocar qualquer endereço americano apenas para acompanhar a experiência. Depois de um minuto carregando, o filme começa.

    Usando a música “We Used to Wait”, do novo CD da banda canadense Arcade Fire, o filme começa abrindo algumas janelas, e com um rapaz correndo. O que parece ser óbvio começa a ficar interessante com um jogo de telas do personagem correndo, e o uso do Google Maps e do Google Earth para criar interatividade com o local que você escolheu. Uma animação de pequenos pássaros voa com o movimento dos mouses usando HTML5 3D Canvas. E eles voam pelo céu da cidade também. Logo, a tela é tomada por várias janelas, com cenas de vídeos, mapas, ruas das cidades. Uma caixa de mensagem para seus amigos abre, pássaros voam por ela. E tudo acaba com árvores surgindo do nada em cenários imaginários e em sua cidade natal (novamente, uma pena não funcionar por aqui). Não há como explicar em muitas palavras, é preciso gastar alguns minutos na experiência. Entre no site e veja a novidade.

    Fonte: Gizmodo

  • Diferença entre HTML 4 e HTML 5


    4 de June de 2009

    Continuando o tema de terça-feira, resolvemos exemplificar as diferenças entre o html 5 e o html 4 e vocês verão que não existem grandes diferenças e que os novos elementos só vieram para facilitar.

    Por exemplos, vamos ver uma simples página de um blog, com o cabeçalho na parte superior, o rodapé na parte inferior, alguns posts, uma seção de navegação, e uma barra lateral, com mostra o código abaixo:

    <html>  <head>
    <title>BLOG - TreinaWeb: Webstandards e programação WEB e Desktop</title>
    </head>
    <body>
    <div id="page">
    <div id="header">
    <h1><a href="/blog/">Blog TreinaWeb: Webstandards e programação WEB e Desktop</a></h1>
    </div>
    <div id="container">
    <div id="center" class="column">
    <div class="post" id="post-102">
    <h2><a href="/page-test-2/">
    Page Test 2</a></h2>        <div class="entry">
    <p>Texto Aqui</p>
    </div>
    </div>
    <div class="post" id="post-101">
    <h2><a href="/page-test/">
    Teste 1</a></h2>
    <div class="entry">
    <p>Texto Aqui</p>
    </div>
    </div>
    </div>
    <div class="navigation">
    <div class="alignleft">
    <a href="/blog/page/2/">« Posts antigos</a>
    </div>
    <div class="alignright"></div>
    </div>
    </div>
    <div id="right" class="column">
    <ul id="sidebar">
    <li><h2>Informações</h2>
    <ul>
    <li><a href="/blog/politica/">Politica</a></li>
    <li><a href="/blog/listas/">Listas</a></li>
    </ul></li>
    <li><h2>Arquivos</h2>
    <ul>
    <li><a href='/blog/2009/04/'>Abril 2009</a></li>
    <li><a href='/blog/2009/03/'>Março 2009</a></li>
    <li><a href='/blog/2009/02/'>Fevereiro 2009</a></li>
    <li><a href='/blog/2009/01/'>Janeiro 2009</a></li>
    </ul>
    </li>
    </ul>
    </div>
    <div id="footer"><p>BLOG - TreinaWeb © 2009</p>
    </div>
    </div>
    </body>
    </html>

    Aqui a mesma página nas regras da W3C para o HTML 5:

    <html> <head>
    <title>BLOG - TreinaWeb: Webstandards e programação WEB e Desktop</title>
    </head>
    <body>
    <header>
    <h1><a href="/blog/">Blog TreinaWeb: Webstandards e programação WEB e Desktop</a></h1>
    </header>
    <section>
    <article>
    <h2><a href="/page-test-2/">
    Page Test 2</a></h2>        <p>Texto Aqui</p>
    </article>
    <article>
    <h2><a href="/page-test/">
    Teste 1</a></h2>
    <p>Texto Aqui</p>
    </article>
    <nav>
    <a href="/blog/page/2/">« Posts antigos</a>
    </nav>
    </section>
    <nav>
    <ul>
    <li><h2>Informações</h2>
    <ul>
    <li><a href="/blog/politica/">Politica</a></li>
    <li><a href="/blog/listas/">Listas</a></li>
    </ul></li>
    <li><h2>Arquivos</h2>
    <ul>
    <li><a href='/blog/2009/04/'>Abril 2009</a></li>
    <li><a href='/blog/2009/03/'>Março 2009</a></li>
    <li><a href='/blog/2009/02/'>Fevereiro 2009</a></li>
    <li><a href='/blog/2009/01/'>Janeiro 2009</a></li>
    </ul>
    </li>
    </ul>
    </nav>
    <footer>
    <p>BLOG - TreinaWeb © 2009</p>
    </footer>
    </body>
    </html>

    Notou que o código ficou mais limpo e mais compreensível?

    Foram acrescentados alguns elementos e com isto não precisamos mais colocar as divs e o layout ficou bem mais compreensível. Se você não conseguiu notar os elementos que foram acrescentados, estão listados abaixo, com uma breve explicação:

    • section: Uma seção, como um capítulo ou parte de um livro.
    • header: O cabeçalho da página mostrada.
    • footer: O rodapé da página mostrada, como uma assinatura de e-mail.
    • nav: Uma coleção de links.
    • article: Um artigo, uma entrada independente, em um blog, revista, jornal, e assim por diante.

    Como não saiu a versão final do html 5, isto foi apenas um esboço, a versão definitiva pode ter algumas diferenças (esperamos que não)

    Até a próxima!

    Fonte: Hobo Blog

  • HTML 5 e o futuro da internet (Web semântica)


    2 de June de 2009

    Hoje vamos falar sobre o futuro da internet. Antes que vocês lancem pedras ou nos chamem de videntes. Hoje vamos falar sobre Web Semântica e HTML5.

    Como todos já devem estar cansados de saber, o futuro da internet é a Web Semântica. O Google já tem pretensões e planos de criar uma busca mais semântica, na verdade ele já fez algumas coisas neste sentido. E para não ficar atrás a Microsoft lançou o “bing” (não foi nós que escolhemos este nome XD), seu novo buscador que já está disponível desde ontem. E o Stephen Wolfram lançou no mês passado o novo buscador Wolfram|Alpha, onde o intuito não é destronar o Google, mas criar um novo conceito em busca.

    Com todos estes investimentos, não estamos errados em prever que o futuro da internet é a Web Semântica. E não foi só nos que pensamos assim (Obvio!), desde 2004 a W3C, criou com algumas empresas, como Apple, Mozilla, Opera, e vários desenvolvedores, o WHATWG (Web Hypertext Application technology Working Group). O intuito do WHATWG é criar as especificações do HTML 5, já que o HTML 4 estava ultrapassado, por que sua última versão é datada de 1999.

    De 2004 até hoje já saíram alguns rascunhos do HTML 5, o que se pode notar é que ele será focado na semântica, onde todas as tags terão significados, não será necessário criar vários divs, por que teremos tags para cada elemento da página. Para entender melhor o que estamos dizendo aqui, tem um exemplo que ilustra as diferenças entre o html4 e o html 5.

    Com as tags mais intuitivas, também é esperado que o desenvolvimento web se torne mais simples e rápido. Ainda é cedo para vermos todo o potencial deste novo HTML, mas vamos ficar atentos, qualquer coisa nova lhe avisamos.

    Até a próxima!