value1

Desenvolvedores criam elemento HTML para acelerar internet

Acelerar a internet tem sido um dos principais desafios da tecnologia nos últimos anos. Ao que tudo indica, a web poderá finalmente ter um upgrade significativo na velocidade - não pelos gadgets ou provedores, mas graças a um novo elemento HTML.

Trata-se do Picture (ou), cotado para substituir o comando. O Picture foi criado por um grupo de desenvolvedores chamado Responsive Images Community Group (RICG) que percebeu que as fotos são o principal motivo para a lentidão no carregamento de uma página.

 

De acordo com pesquisa do HTTP Archive, o tamanho médio de uma página entre os 1.000 maiores sites na web é 1,7MB. Destes, 1MB é ocupado apenas por imagens.

A ideia é que as imagens funcionem como um site responsivo, modelo criado em 2010 como alternativa à versão móvel. No site responsivo, layout e texto se ajustam conforme a tela do usuário por conta de larguras flexíveis, isto é, funcionam da mesma forma se o acesso for feito em um smartphone, tablet ou desktop.

O problema é que, no site responsivo, as fotos são redimensionadas para caber em telas menores para preservar o layout do conteúdo, o que significava carregar imagens grandes com a intenção de nunca visualizá-las em resolução máxima.

Com o Picture, o navegador terá a oportunidade de avaliar o elemento de acordo com as regras que o desenvolvedor especificar e, só depois, escolher a melhor imagem seguindo os critérios. Assim, se o usuário estiver vendo um site pelo conexão 3G no celular, o browser poderá impedir que a foto seja carregada em alta resolução, aumentando a velocidade e consumindo menos banda. Além disso, a ideia é que o img continue disponível para, caso o browser seja antigo e não possa ler as regras, ele entenda o elemento como uma alternativa.

O Picture funciona por meio do motor Blink e foi desenvolvido via financiamento coletivo. Segundo o Ars Technica, o Picture estará disponível no Chrome e no Firefox até o final do ano. No Opera, ele deverá ser implementado num futuro próximo. Já a Apple vai adicionar o suporte por meio do WebKit, contudo, ele não deverá estar pronto a tempo do Safari 8. Por fim, a Microsoft estaria considerando o Picture numa próxima versão do Internet Explorer.

value1

Vamos Conhecer um pouco sobre a diferença entre HTML 4 e HTML 5

htmlContinuando 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"> <div id="post-102"> <h2><a href="/page-test-2/"> Page Test 2</a></h2>        <div> <p>Texto Aqui</p> </div> </div> <div id="post-101"> <h2><a href="/page-test/"> Teste 1</a></h2> <div> <p>Texto Aqui</p> </div> </div> </div> <div> <div> <a href="/blog/page/2/">« Posts antigos</a> </div> <div></div> </div> </div> <div id="right"> <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)