Como podemos produzir código semântico utilizando HTML5? Essa é a pergunta que toda a comunidade de desenvolvedores gostaria de obter a resposta. Abaixo você vai encontrar um exemplo de código em HTML 5 onde o objetivo é tornar o código mais “usável”, acessível, utilizando poucas classes e ID’s.
Para algumas pessoas isso com certeza pode ser o fim do mundo, pois com a chegada do HTML5 e o formato de vídeo aberto ogg poderíamos criar facilmente vídeo players na web sem a utilização de Flash. O Youtube já provou que isso é possível com sua página teste desenvolvida em HTML5, você só precisa de um browser capaz de entender corretamente as tags <audio> e <video> para ver o funcionamento da página.
Se ainda está curioso para saber mais sobre o poder das tags <audio> e <video>, veja abaixo o vídeo do site TechCruch onde o diretor do Mozilla Firefox mostra o que poderá ser feito em relação a áudio e vídeo quando o HTML5 for lançado:
Uma das novidades que o HTML5 promete é a possibilidade de uma base de dados do lado cliente. Por esse motivo, os browsers que queiram seguir esse padrão já devem ir colocando essa funcionalidade em sua lista de pendências, ou então dependerão do Google Gears para essa funcionalidade.
WebKit é o primeiro a dar o passo em relação a isso, depois de implementar o suporte correto a @font-face, agora dão suporte a base de dados com uma API assíncrona para trabalhar com ela. A linguagem escolhida para trabalhar com a base de dados será JavaScript já que está do lado cliente e é a linguagem mais apropriada para isso, usando SQL para interagir com a base de dados.
var database = openDatabase("Database Name", "Database Version");
database.executeSql("SELECT * FROM test", function(result1) {
// do something with the results
database.executeSql("DROP TABLE test", function(result2) {
// do some more stuff
alert("My second database query finished executing!");
});
});
Aproveitando que o WebInspector é uma ferrameta muito úil para os desenvolvedores com WebKit, foi criada uma versão modificada para possuir a possibilidade de administrar as bases de dados locais a partir do browser.
Os desenvolvedores do WebKit estão trabalhando para que seu browser tenha suporte as tags HTML5 <audio /> e <video />. O código HTML com a integração de Java Script seria da seguinte forma:
//HTML
<video src=sample.mov autoplay></video>
//javascript
<script>
function playPause() {
var myVideo = document.getElementsByTagName('video')[0];
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
//Aqui é onde controlamos onde o vídeo termina
myVideo.addEventListener(’ended’, function () {
alert(’video playback finished’)
} );</script>
<input type=button onclick=”playPause()” value=”Play/Pause”>
var audio = new Audio("song.mp3");
audio.play();
