BLOG - TreinaWeb » html 5 http://www.treinaweb.com.br/blog Webstandards e Programação Web e Desktop Fri, 30 Jul 2010 14:06:22 +0000 en hourly 1 http://wordpress.org/?v=3.1-alpha Diferença entre HTML 4 e HTML 5 http://www.treinaweb.com.br/blog/diferenca-entre-html-4-e-html-5/ http://www.treinaweb.com.br/blog/diferenca-entre-html-4-e-html-5/#comments Fri, 05 Jun 2009 01:16:49 +0000 admin http://www.treinaweb.com.br/blog/?p=284 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

]]> http://www.treinaweb.com.br/blog/diferenca-entre-html-4-e-html-5/feed/ 2 HTML 5 e o futuro da internet (Web semântica) http://www.treinaweb.com.br/blog/html-5-e-o-futuro-da-internet-web-semantica/ http://www.treinaweb.com.br/blog/html-5-e-o-futuro-da-internet-web-semantica/#comments Wed, 03 Jun 2009 01:29:51 +0000 admin http://www.treinaweb.com.br/blog/?p=275 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!

]]> http://www.treinaweb.com.br/blog/html-5-e-o-futuro-da-internet-web-semantica/feed/ 0