1
2
3
4
5

#PHP VS  JAVA
//JAVA VS PYTHON
/*C++ VS JAVA*/
'JAVA VS .NET
out.println("EU NAO SEI PROGRAMAR NADA!");

Você já deve ter ouvido falar que a tag BR está marcada como obsoleta (deprecated) pela W3C, assim como a b, font, i etc. Cada tem seus motivos.

Agora o HTML é separado em 3 camadas, HTML (conteúdo), CSS (estilo), JS (parte dinâmica). Todas as tags ficam dentro do arquivo HTML e cada tag trás alguma informação, algum conteúdo. Porém BR é uma tag de estilo e não de conteúdo. Br significa pular uma linha, e isso é forma e estilo e não tem significado algum pro documento, então não é o lugar dele no HTML. Para pular a linha, deve-se usar o css pois é no css que tem todas as informações de como o conteúdo deverá aparecer.

Vou supor que você já tenha um conhecimento básico de CSS. Oras, se você quer pular uma linha numa lista, é fácil. Basta usar ul e li que cada item irá aparecer numa nova linha. Isto é tranquilo.

Se você estiver usando componentes com float, você pode usar o clear (clear:left, clear:right, etc) e isso fará o elemento ser desenhado na linha debaixo.

Se é uma parágrafo, ok também. Por padrão, todos os navegadores pulam uma linha para a tag P.

Mas nem tudo são flores, veja o exemplo abaixo:

1
2
3
4
5

<div>
    <label id="teste1">teste</label><input>
    <label id="teste2">teste</label><input>
    <label id="teste3">teste</label><input>
</div>

Digamos que tenho a intenção de fazer o label vir antes do input e pular uma linha antes de cada label. Não é um parágrafo, não quero usar float (até porque usar float no site inteiro muitas vezes é perigoso) e óbviamente não quero usar a tag BR.

Como ficaria o CSS ?

1
2
3
4
5

div label:before
{
    content: '\a' ;
    white-space: pre;
}

Simples assim. O significado é, antes da label coloca-se uma quebra de linha ‘\a’. Para saber sobre outros caracteres de scapes, veja o texto Introduction to css escape sequences.

Para ver funcionando, e testar:
teste

Abaixo o fonte para download (e nem é necessário dizer que precisa ter JQuery para rodá-lo):
jquery-snow

Para usar o plugin, basta :

1
2
3
4
5

                        $(document).ready(init);
			function init()
			{
				$.fn.snow();
			}

durante a minha vida de analista de sistemas eu já vi muita coisa bizarra e mal feita. Muitas feitas até por mim mesmo no início de carreira =)

Outras feitas por amigos e colegas de profissão, estagiários (que deveriam estar aprendendo e não mexendo em código) e programadores Jr.

O que eu nunca tinha pensado em fazer era juntar todas estas pérolas, e quando comecei a juntar vi que não eram poucas, ainda mais quando comecei a receber contribuições. Então montei um site apenas com estas preciosidades, espero que a comunidade nerd aproveite :

http://gambiarra.evonblogs.com.br/

mysql

max_allowed_packet=16M

Se mesmo assim não resolver, experimente aumentar para 32M e assim por diante.

Agora o erro mudou

Começou a dar timeout? Server has gone away?
Fácil, significa que estamos no caminho certo. Esta mensagem significa que de tão grande o pacote, deu timeout na comunicação. Experimente adicionar mais estes parâmetros embaixo da linha max_allowed_packet.

wait_timeout=60000
connect_timeout=60000
net_read_timeout=60000

Se mesmo assim não resolver, experimente aumentar ainda mais o limite.

Agora o erro mudou de novo

Chame um padre!

mysql

Mas como fazer pra saber o que está acontecendo no seu banco de dados, tal como fazemos no SQL Server e outros bancos de grande porte?

Muitas vezes precisamos acompanhar o que está sendo enviado pro banco para termos uma idéia do problema. Vou ensinar algumas maneiras e a primeira é via arquivo de configuração.

Arquivo de configuração

O mysql tem um arquivo de configuração chamado mysql.ini, e uma configuração que nem sempre vem no arquivo é a de poder logar tudo que ocorre no seu database. A sintaxe é:

mysql.ini

1

general_log_file=\seucaminhoparaolog\generalLog.txt

Information_Scheme

Outra maneira é consultando na tabela de meta-dados do mysql, a Information_Scheme. Para tal use a seguinte consulta:

1

SELECT TABLE_NAME, CREATE_TIME, UPDATE_TIME FROM information_schema.tables WHERE TABLE_SCHEMA = 'nomedasuabase' ORDER BY `tables`.`UPDATE_TIME` DESC

Onde nomedasuabase é, obviamente, o nome da sua base.

Wraper

Digamos que você não tem este controle todo sobre o seu servidor, você não tem acesso ao mysql.ini e nem ao database scheme. Então a saída seria usar um wraper.

Wrapper é quando você adapta uma classe para uma determinada interface, não sei se o termo é um bom caso aqui mas é como eu chamo. Vou usar o Java como exemplo mas funciona com qualquer linguagem.

O objetivo é criar uma classe de conexão que você vai usar no lugar da classe original, para tal, cada método você irá rechamar a classe original de conexão, exemplo:

1
2
3
4
5
6
7
8
9
10
11
12

 
public class ConexaoFake
{
    private Conexao = conexao;
 
....
   public void open()
  {
        conexao.open();
   }
....
}

Faça isto com todos os métodos e funcionalidades, depois as que receberem parâmetros você loga:

1
2
3
4
5
6
7
8

 
   public Resultset execute (String sql)
  {
        System.out.println(sql);
        conexao.execute(sql);
   }
....
}

Claro, em vez de imprimir no console você irá imprimir no seu modelo de log preferido. Pronto, usando esta classe de conexão tudo será logado. Você pode até colocar um parâmetro de configuração para o log ser condicional, ficando algo semelhante a:

1
2
3
4
5
6
7
8
9
10
11

 
   public Resultset execute (String sql)
  {
        if(logEnabled)
        {
           System.out.println(sql);
         }
        conexao.execute(sql);
   }
....
}

A vantagem desta solução é que funciona com qualquer banco de dados.

Conclusão

Difícil? Bom, você tem pelo menos 3 motivos para dizer que não =)

Bom, supondo que você saiba o que seja esse palavrão, muitos usuários do site me perguntaram como fiz o efeito de terremoto na brincadeira de 1º de Abril do Taulukko

Alguns até me perguntaram se era um plugin de Word Press.

Não, tudo feito na unha =), ou quase pois usei o auxílio do JQuery

Importando o JQuery

Bom, se você utiliza um site feito por você mesmo, para usar o JQuery basta utilizar as seguintes linhas no cabeçalho do site:

1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Outra forma é baixar do site do JQuery da página de download e referenciar pro seu próprio servidor em vez do servidor do Google (exemplo acima).

E se eu realmente uso Wordpress?

NÃO ENTRE EM PÂNICO!!! O JQuery é muito popular entre os desenvolvedores de sites, e óbviamente o Wordpress faz uso dele. Para utilizar o jquery no WP ou você altera o header do teu site incluindo o script acima. OU você faz uso do JQuery que já está nativo no WP como ensina o site Tudo Para Wordpress.

Tá, importei o JQuery e agora?

O resto vai depender da importação de plugins, alguns criados por mim e outros não.

• Animate CSS Rotation and Scale


• CSS Transform


• Broken (plugin meu mas pode usar a vontade, licença Creative Commons do Taulukko)


• Shake (plugin meu mas pode usar a vontade, licença Creative Commons do Taulukko)

A tua tag head vai ficar +ou- assim :

1
2
3
4
5
6
7

     <head>
                        <script src="js/jquery-1.5.js" type="text/javascript"></script>
			<script src="js/jquery-css-transform.js" type="text/javascript"></script>			
			<script src="js/jquery-animate-css-rotate-scale.js" type="text/javascript"></script>
			<script src="js/jquery-broken.js" type="text/javascript"></script>
			<script src="js/jquery-shake.js" type="text/javascript"></script>
     </head>

Pronto, está feito a importação das bibliotecas que você vai usar não somente pra fazer o efeito de terremoto como pra outras coisas em seu site. Ok e pra fazer o tal de terremoto agora que já importei as bibliotecas?

O terremoto

Bom, chega de conversa fiada e vamos à mágica.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

			<script>
 
				if( $.browser.msie)
				{
 
					$(document).ready(
						function ()
						{
							$('body').shake();
							$('#menuTop').broken();
						}
					);
				}
			</script>

Reparem que primeiro eu fiz o comando shake na tag body e depois fiz o comando broken (que quebra o elemento com efeito de gravidade) no elemento com id menuTop , veja parte do meu código pra entender o que é um id:

1
2

<UL id="menuTop">
<LI>...

Por padrão ele quebra o elemento a esquerda, funciona com menus ( UL ), divs ou qualquer elemento que tenha posição absoluta na tela (creio que não absoluto também mas ai é bom testar). E se quiser quebrar a direita?

1

	$('#quickLogin').broken({fixed:"right"});

Espero que tenham curtido, abaixo um zip com um demo =)

1
2
3
4
5

#PHP VS  JAVA
//JAVA VS PYTHON
/*C++ VS JAVA*/
'JAVA VS .NET
out.println("EU NAO SEI PROGRAMAR NADA!");

HTML Exemplo

Para todo este artigo iremos usar o código HTML abaixo de exemplo. Iremos selecionar, alterar, judiar do código abaixo usando javascript e JQuery então sempre recorra a ele pra entender os códigos ou copie ele num arquivo a parte pra fácil referência.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

 
<INPUT type="text" value="5" id="txtNome" class="input"/>
<INPUT type="text" value="5" id="txtNome2" class="input"/>
<INPUT type="text" value="5" id="txtNome3" class="input"/>
 
<INPUT type="button" value="OK" id="cmdOK" class='botao'/>
<INPUT type="button" value="Cancelar" id="cmdCancel" class='botao'/>
<SELECT id="cmbCidades">
	<OPTION value='1' selected='selected' id="cidade1">Curitiba</OPTION>
	<OPTION value='2' id="cidade2">São Paulo</OPTION>
	<OPTION value='3' id="cidade3">Santana de Parnaíba</OPTION>
	<OPTION value='4' id="cidade4">São José dos Pinhais</OPTION>
</SELECT>
<P id="frase" class="paragrafo">Isto é uma frase</P>
<P id="frase2" class="paragrafo">Isto é uma frase</P>
<P id="frase3" class="paragrafo">Isto é uma frase</P>

Selecionando objetos

Em Javascript fazemos:

1

var txtNome = document.getElementById("txtNome");

ou algo semelhante a :

1

var txtNome = document.forms[0].txtNome;

O problema que este tipo de operação pode funcionar em um navegador e não em outro, ou ao menos se comportar de maneira inapropriada, ou simplesmente ele não é crossbrowser#. Com o JQuery além de ser crossbrowser.

No JQuery o mesmo comando ficaria assim:

1

var txtNome = $("#txtNome")[0];

Repare agora nos seguintes pontos:

1. O comando é mais curto, após “decorar o comando” você evita digitação e torna a codificação mais ágil.


2. O pedaço $(…) é conhecido no JQuery e outros frameworks como seletor, ele tem este nome pois ele ajuda a selecionar objetos da página.


3. No JQuery ele sempre retorna um array, mesmo quando só tem um objeto e este é o motivo de ser necessário usar o index no final [0] se você insistir trabalhar com o objeto HTML


4. Como veremos adiante você não precisa trabalhar diretamente com o objeto HTML, então você pode não precisará usar o index [0] e poderá trabalhar diretamente com o array retornado (pelo menos 99% das vezes).


5. Repare que para selecionar o id txtNome ele usou #txtNome, exatamente igual ao CSS. No CSS quando você deseja alterar as propriedades do elemento com id txtNome você faz: #txtNome{…}. Não é uma coincidência, o JQuery aceita praticamente todos os seletores CSS, então se você tem familiaridade com CSS você sabe o poder que você obterá ao usar o seletor do JQuery

Outra situação, digamos que você queira selecionar um objeto pela sua classe, no nosso HTML de exemplo vou selecionar os elementos com class igual a “botao” . O código em Javascript seria :

1
2
3
4
5
6
7
8
9

var elementos[];
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
   var classes = elem[i].className;
   if (classes.indexOf("botao")>1)
   {
      elementos[] =  elem[i];
   }
}

No JQuery o mesmo comando ficaria assim:

1

var elementos = $(".botao");

Inacreditável né? Além disso o código em javascript tem alguns bugs, por exemplo; se um elemento tiver uma classe chamada “botao2″ ele selecionará o elemento, com JQuery além de mais simples ele evita muitos erros de programação.

Outro cenário: ainda usando nosso exemplo HTML, digamos que você quer obter apenas o option selecionado pelo usuário num combobox. No Javascript ficaria :

1
2
3
4
5
6
7
8
9

var combo = document.getElementById("cmbCidades");
var selecionado = "";
for(var cont=0; cont < combo.options; cont++)
{
	if(combo.options[cont].selected)
	{
		selecionado = combo.options[cont];
	}
}

No Jquery:

1

var selecionado = $("#cmbCidades option:selected");

Lembrando que sempre volta um array, então se você quiser usar o elemento HTML mesmo você deve adicionar sempre [0] no final. Embora eu repito, você pode fazer praticamente tudo usando apenas o array. Mas este é o assunto dos próximos tópicos:

Pegando valores

1
2
3
4

var txt = document.getElementById('txtNome').value;
var cmb = document.getElementById('cmbCidades').value;
var p = document.getElementById('cmbCidades').innerHTML;
var text = document.getElementById('frase').innerHTML;

No JQuery não podia ser diferente:

1
2
3
4

var txt = $('#txtNome').val();
var cmb = $('#cmbCidades').val();
var p = $('#cmbCidades').html();
var text = $('#frase').html();

Repare que apesar da diferença, os comandos são razoavelmente mais curtos. Além de como já foi dito, ele é crossbrowser.

Substituindo valores

1

document.getElementById('frase').innerHTML = "Valor alterado";

E no JQuery:

1

   $('#frase').html('Valor alterado');

Agora imagine que você tenha que alterar todos os valores de todos os paragrafos, ou todos que usam uma determinada classe?

Bom no Javascript:

1
2
3
4
5
6
7
8

var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
   var classes = elem[i].className;
   if (classes.indexOf("frase")>1)
   {
       elem[i].innerHTML = 'Valor alterado';
   }
}

No JQuery :

1

   $('.paragrafo').html('Valor alterado');

Repare a vantagem de trabalhar com o objeto array retornado do JQuery, você manda alterar todos os elementos com um único comando.

E se o objeto for uma caixa de texto? Com propriedade value?

Basta fazer:

1

   $('.input').val('Valor alterado');

Adicionando e removendo classes

1

   document.getElementById('txtNome').className = 'classe2';

Certo? Errado, no código acima acabamos de matar as classes anteriormente adicionadas. O certo seria :

1

   document.getElementById('txtNome').className = document.getElementById('txtNome').className + ' classe2';

Certo? Errado, no código acima (apenas em alguns navegadores ) se o elemento não tivesse classe ficaria com as classes “classe2″ e “nothing”. Adicionar uma classe em javascript pode ser a chance de injetar erros. Abaixo no JQuery :

1

   $('#txtNome').addClass('txtNome');

E para remover?

1

   $('#txtNome').removeClass('txtNome');

Com JQuery pode-se até juntar dois comandos, exemplo:

1

   $('#txtNome').removeClass('input').addClass('txtNome');

Pegou?

Alterando atributos

1

   document.getElementById('txtNome').maxlength = 35;

No JQuery:

1

   $('#txtNome').attr('maxlength', 35);

E para remover?

No JQuery:

1

   $('#txtNome').removeAttr('maxlength');

Alterando o CSS

1

   document.getElementById('txtNome').style.backgroundColor = '#ff0000';

No JQuery:

1

   $('#txtNome').css('backgroundColor','#ff0000');

Adicionando elementos

1
2

   var combo = document.getElementById('cmbCidades');
   combo.innerHTML =   combo.innerHTML + "<OPTION id='opcaoExtra'>Extra</OPTION>";

ou usando XML DOM com appendChild. Com JQuery é extremamente simples:

1

  $('#cmbCidades').append("<OPTION id='opcaoExtra'>Extra</OPTION>");

O append adiciona no final (o option incluído será virá depois de todos os outros option dentro do select). Mas ainda existem outros métodos como o prepend que adiciona no começo, e mais. Vale a pena consultar a documentação do JQuery.

Escondendo objetos

1

   document.getElementById('txtNome').style.display = 'none';

No JQuery:

1

  $('#cmbCidades').hide();

Com a vantagem de você poder passar como parâmetro a velocidade da animação de esconder, caso você queira animar:

1

  $('#cmbCidades').hide('slow'); //opções slow, normal, fast e não passar parâmetro (imediato)

No JQuery ainda é possivel dizer quanto tempo ele deve esperar antes de efetuar o comando, por exemplo 5 segundos (5mil milisegundos):

1

  $('#cmbCidades').delay(5000).hide('slow'); //opções slow, normal, fast e não passar parâmetro (imediato)

Exibindo objetos

1

   document.getElementById('txtNome').style.display = 'visible';

No JQuery:

1

  $('#cmbCidades').show('slow'); //opções slow, normal, fast e não passar parâmetro (imediato)

Conclusão

Existem outros frameworks bons como o Prototype que fazem a mesma coisa, usei o JQuery como exemplo pois é atualmente o framework mais usado.

O bom é que assim consigo desafogar um pouco a lista infinitas de tarefas do Gan. Uma delas eu já consegui tirar da fila: a ficha de personagem de Old Dragon para o Taulukko!

A ficha versão Pocket Dragon já está no ar e logo mais teremos as versões completa e fast play, além de fichas para outros sistemas de regras de RPG. \o/

Logo logo, também vou ajudar o Edson nos posts do “Laboratório Nerd”. Aguardem… rs.

1
2
3
4
5

#PHP VS  JAVA
//JAVA VS PYTHON
/*C++ VS JAVA*/
'JAVA VS .NET
out.println("EU NAO SEI PROGRAMAR NADA!");

Ola,
hoje vou dividir com vocês alguns exemplos bem maneiros de html 5. E principalmente sobre o Image Preview (mas este não é o único, fuce no zip e verá coisas beeeem legais, algumas bem simples de serem aplicadas e que já funcionam na maioria dos navegadores).

Image Preview

HTML5

O HTML5 adiciona a possibilidade do renderizador HTML, diversas características que estavam vindo sendo resolvidas (quase que na forma de gambiarra) pelo flash, silverlight, javafx, java applet e afins. Por exemplo execução de sons, vídeos, manipulação de arquivos, comunicação e afins. Na realidade cada navegador já vinha tentando resolver de sua forma, porém o html5 cria uma linha, um meio de padronizar. Agora o programador não precisará mais fazer algo que funciona de um jeito no IE, outro no firefox e não funciona nos demais. Mas claro, pra isto os navegadores tem que implementar o padrão html5, alguns como o IE infelizmente não implementa 100% nem o html4.

OK, mas com o HTML5 funcionando o flash morre? Duvido, o html5 vai implementar apenas as coisas mais comuns, as necessidades mais comuns. Ainda vai ficar a cargo de plugins as façanhas mais baixo nível. O que vai acabar de vez é aquele flash morto que não tem aspecto a não ser rodar um vídeo ou som, ou então aqule menu animado em flash. Isto esta com os dias contados, aplicações mais robustas podem ainda usar o plugin que lhe te der o que o html5 e javascript não resolver.

Bom, agora voltando ao tema. O código do Marcelo fazia o que o HTML5 faz, porém a maneira microsoft. O firefox tinha sua maneira também mas só funcionaria em firefox. O código que vou apresentar a vocês utiliza o padrão html5 e, apesar de só funcioanr hoje em firefox, vai passar a funcionar em todos os navegadors que tiverem suporte a html5.

Eis o código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

<HTML>
<BODY>
<H1>File API</H1>
<INPUT type="file" id="fileImg"/><BR/>
<INPUT type="button" value="Calcular Tamanho" onClick="preSizeCalc()"/><BR/>
<P>Preview:</P>
<img id="imgPreview"/>
</div>
<LABEL id="output"/><BR/>
<SCRIPT>
var reader = new FileReader();
 
reader.onload = onLoadFile;
 
 
function onLoadFile(e)
{
	var img = document.getElementById("imgPreview");  
	img.src = e.target.result;
        img.onload = onLoadImage;
}
 
function onLoadImage(e)
{
	var img = document.getElementById("imgPreview");  
       	var strOut =  "As dimensões da imagem são " +  img.clientWidth + "x" + img.clientHeight + "<BR/>" ;
        log(strOut);
 
}
 
 
function preSizeCalc()
{
	var img = document.getElementById("imgPreview");
	var file = document.getElementById("fileImg");  
	if(reader)
	{
		reader.readAsDataURL(file.files[0]);
	}
	else
	{
		log("Seu navegador não tem suporte a HTML5, troque por um mais recente");
	}
}
 
function log(value)
{
  var output = document.getElementById("output");
  output.innerHTML = value;
}
</SCRIPT>
</BODY>
</HTML>

Exemplos de HTML5

File API – Image Preview
Canvas API
Atributos Customisáveis
Sistema Color hsla (no html4 era apenas o padrão rgb)
Alpha por cor e não apenas por componente
CSS Linhas Ímpares – Novas Formas de seleção
Nova TAG DL
Drag and Drop
Tag tipo Figure
Novas Fontes (tipos para letras)- Fontes Remotas
Geoposition
Mode Offline
Tags novas
Storage
Texto Editável
Outline Text
Reflect Text
Resize Text
Sombra em texto
Work (Threads)
Controles Com Cantos arredondados

Downloads:

HTML 5 Exemplos

Updates:

Links úteis:

• html5 rocks
• Seleção do melhor de html5 rocks

Antes para dividir um layout a gente usava, e muito, de div(s). Agora a coisa mudou, veja abaixo como ficou:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

<HTML>
  <HEAD>
  </HEAD>
   <BODY>
      <DIV id="div1">
            <SECTION>
               <HEADER>
               <H1>Cabeça, corpo e pés</H1>
               </HEADER>
               <ARTICLE>
                   <H2>A Cabeça</H2>
                   <P>A cabeça é o membro .....</P>
               </ARTICLE>
               <ARTICLE>
                   <H2>O Corpo</H2>
                   <P>O corpo é a parte que....</P>
               </ARTICLE>
               <ARTICLE>
                   <H2>Os Pés</H2>
                   <P>Os pés tem importância fundamental ....</P>
               </ARTICLE>
               <FOOTER><P>Deixe um comentário <a href="...">aqui</a>.</FOOTER>
            </SECTION>
            <SECTION>
               <HEADER>
               <H1>Minha visita a Europa</H1>
               </HEADER>
               <ARTICLE>
                   <H2>Roma</H2>
                   <P>Meu primeiro ponto de parada foi em Roma ....</P>
                   <H2>Despedida</H2>
                   <P>O que me marcou foi ....</P>
               </ARTICLE>
               <ARTICLE>
                   <H2>Suiça</H2>
                   <P>De todos os....</P>
               </ARTICLE>
               <ARTICLE>
                   <H2>Itália</H2>
                   <P>Meus ancestrais estavam ....</P>
                   <H2>Pizza</H2>
                   <P>Não, não vou....</P>
               </ARTICLE>
               <FOOTER><P>Deixe um comentário <a href="...">aqui</a>.</FOOTER>
            </SECTION>
      </DIV>
   </BODY>
<HTML>

Antes era:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

<HTML>
  <HEAD>
  </HEAD>
   <BODY>
      <DIV id="div1">
            <div class="section">
                <div class="header">
                  <H1>Cabeça, corpo e pés</H1>
                </div>
               <div class="article">
                   <H2>A Cabeça</H2>
                   <P>A cabeça é o membro .....</P>
                </div>
               <div class="article">
                   <H2>O Corpo</H2>
                   <P>O corpo é a parte que....</P>
                </div>
               <div class="article">
                   <H2>Os Pés</H2>
                   <P>Os pés tem importância fundamental ....</P>
                </div>
               <div class="footer"><P>Deixe um comentário <a href="...">aqui</a>.</div>
            </div>
            <div class="section">
               <div class="header">
               <H1>Minha visita a Europa</H1>
               </div>
               <div class="article">
                   <H2>Roma</H2>
                   <P>Meu primeiro ponto de parada foi em Roma ....</P>
                   <H2>Despedida</H2>
                   <P>O que me marcou foi ....</P>
                </div>
               <div class="article">
                   <H2>Suiça</H2>
                   <P>De todos os....</P>
                </div>
               <div class="article">
                   <H2>Itália</H2>
                   <P>Meus ancestrais estavam ....</P>
                   <H2>Pizza</H2>
                   <P>Não, não vou....</P>
                </div>
               <div class="footer"><P>Deixe um comentário <a href="...">aqui</a>.</div>
                </div>
      </DIV>
   </BODY>
<HTML>

Repare que antes o div não significava muita coisa, por isto agora o HTML está mais semântico.

Como podem ver no exemplo acima, além do div existem agora outras tags de divisão quando se trata de conteúdo. Div é mais genérico, serve pra qualquer coisa. Estes, Section, Article, Header e Footer são específicos para conteúdo. Podem ser utilizados desde um template de um blog até um widget.

Espero que tenha ajudado a entender, e que gostem ^^

Até a próxima!