Html5 Super Powers

Html quê??

Sim html5, está a tornar-se o padrão de desenvolvimento web dado que a maior parte dos principais browsers já oferecem suporte à maior parte dos elementos do HTML5, no entanto ressalva-se que ainda temos muitos acessos a partir de browsers que não trabalham com html5.

Novos elementos foram introduzidos no HTML5, todos com a finalidade de facilitar a compreensão e a manutenção do código. Alguns são uma evolução natural do elemento <div> com foco na semântica;
Outros surgiram da necessidade de padronizar a maneira de se publicar conteúdo, como acontece hoje com as imagens.
Os principais elementos dessa nova versão são:

Estrutura do documento:

<header> – cabeçalho da página ou de uma seção(não confundir com a tag <head>);

<section> – cada seção do conteúdo;

<article> – um item do conteúdo dentro da página ou da seção;

<footer> – o rodapé da página ou de uma seção;

<nav> – o conjunto de links que formam a navegação, seja o menu principal do site ou links relacionados ao conteúdo da página;

<aside> – conteúdo relacionado ao artigo (como arquivos e posts relacionados em um blog, por exemplo).

estrutura html5
Estrutura de documento html5

Elementos de conteúdo

<figure> – associa uma legenda a uma imagem, video, arquivo de áudio, objeto ou iframe:

<figure id="figura03">
      <legend>Figura 3. Esquema de página em HTML5</legend>
      <img src="html5.png" border="0" width="200" height="300"
	  alt="Estrutura de uma página escrita com os novos elementos do HTML5" />
      </figure>

<canvas> – renderiza imagens 2D que podem ser usadas em jogos, gráficos, etc, por meio de uma API gráfica;

<audio> e <video> – usados para streaming de áudio e vídeo. É uma tentativa de criar um padrão em todos os navegadores como acontece com as imagens:

<audio src="musica1.mp3" autoplay="autoplay" loop="20000" /> 
  
    <video src="filme.mov" width="400" height="360" />

<dialog> – junto com as tags <dt> e <dd> criado para formatar um diálogo:

<dialog> 
        <dt> Oh Zé! Queres uma cerveja? 
        <dd> Opá! Maravilha! Quero sim!
        <dt> Ok! Sai uma frequinha para o Zé!
        <dd> Fixe! Põe na conta do Manuel! 
        <dt> Do Manuel? A sério? 
        <dd> ...Sim! Mais uma, menos uma ele sabe lá!. 
    </dialog>

<time> – representa data e/ou hora;

<meter> – representa medidas, que podem ser de distância, de armazenagem em disco, etc.

Doctype

Com o HTML5 usamos apenas uma declaração doctype:

    <!DOCTYPE html>

Transição do XHTML

A semelhança entre o HTML5 e seus antecessores, HTML 4.01 e XHTML 1.0, é muito grande. Quem está familiarizado com as versões anteriores não sentirá nenhuma dificuldade na transição, e para quem ainda vai aprender a linguagem, os novos elementos simplificam o processo.

A sintaxe dos elementos é como no HTML 4.01, que não exigia que elementos como <img> e <input> fossem “fechados”:

    <input type="text" id="nome">

mas, para aqueles que seguem uma norma XHTML, a barra que fecha um elemento continua a ser aceite:

    <input type="text" id="nome" />

Assim…

Com o HTML5 estamos perante uma nova era no desenvolvimento de páginas para a internet, onde o utilizador e a sua mobilidade e versatilidade de acessos são as palavras-chave.
Assistimos agora à criação de aplicações web melhores, mais ricas e com maior integração de conteúdo on e off-line.
Fica a ressalva, que deve ser ponderada a compatibilidade de fall-back.

Workshop

Existindo aqui muito para explorar, vamos ter algumas sessões de workshops disponibilizadas para quem se quizer inscrever e saber mais sobre o tema, aprofundar técnicas ou tão simplesmente conhecer esta realidade. Datas e locais a comunicar.

 

Para informações técnicas mais detalhadas sobre o HTML5, consulte a documentação oficial do W3C e a listagem de diferenças entre o HTML5 e sua versão anterior.

Leave a Reply

Your email address will not be published. Required fields are marked *