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!