HTML5. Jhonny R. S. Frischembruder

Tamanho: px

Começar a partir da página:

Download "HTML5. Jhonny R. S. Frischembruder"

Sebastião Clementino da Conceição
8 Há anos
Visualizações:

1 HTML5 Jhonny R. S. Frischembruder RESUMO O HTML5 surgiu com o intuíto de preencher a lacuna de necessidades da programação com HTML de sua versão antecessora 4.01 que foi congelada em Dificuldades ou impossibilidades de tratamento de elementos como formulários em HTML nesta nova versão foram reformulados adicionando ações comuns como HTTP update e delete, suporte a validação nativa sem ter a necessidade de JAVASCRIPT, utilização de máscaras, também foram incluídos suporte nativo a audio e vídeo, incluíndo forma menos trabalhoso para armazenamento de informações através de Banco de Dados.

2 HTML5 INTRODUÇÃO Este artigo tem como objetivo mostrar um pouco da história do HTML bem como alguns fundamentos, novos elementos para formulários, suporte a máscara, vídeo, audio, armazenamento e uma abordagem geral de como manipular estes dados armazenados. 1 Porque o HTML5 demorou quase 10 anos para ser lançado O W3C congelou a versão do HTML na 4.01 pois acreditava que o futuro deste seria o XML. Através desta aposta, foi criado uma nova especificação o XHTML que consistia num HTML com todas as regas do XML. Um pequeno grupo começou a trabalhar em paralelo a esta tecnologia pois não acreditavam na unanimidade do XHTML para todos os desenvolvedores. Reconhecendo a falha na otimista adoção do XML, o W3C adotou a versão deste pequeno grupo denotado como WHATWG para a nova versão do HTML, o HTML5. 2 Principais Fundamentos do HTML5 Alguns pilares de fundamentação sobre o HTML5 são listados como: Deve funcionar da mesma forma em todo browser Como os browsers devem reagir perante a erros Otimizar a linguagem sem abolir a facilidade de criação 3 Novos elementos para formulários Nesta nova versão do HTML, há suporte nativo para validação de formulários o que desvincula a necessidade de utilização de JAVASCRIPT para este fim. Como por exemplo ocorre na validação de um formulário de . Nesta nova versão do HTML, o código ficaria assim: <input type= required> Ou seja, este formulário irá validar se o foi informado e o dado informado tem que haver uma semelhança com a sintase de um endereço de .

01 pois acreditava que o futuro deste seria o XML. Através desta aposta, foi criado uma nova especificação o XHTML que consistia num HTML com todas as regas do XML.

3 exemplos: Foram incluídas também data, mês, semana e hora como um tipo nativo. Eis alguns <input type=date> cria entrada de datas; <input type=time> cria entrada de hora; <input type=month> <input type=week> O elemento date ficou assim no chrome: Suporte a máscaras também foi incluso: <input pattern="[0-9]{5}(\-[0-9]{3})?" title="cep"> A máscara para este form será de um CEP no estilo Para adicionar um vídeo em HTML5 o código ficaria assim: 1 <video src=demo.mp4 autoplay controls> 2 Download <a href=demo.mp4>a demo video!</a> 3 </video> O controlador de vídeo no chrome ficou assim: Além do vídeo, o HTML5 também tem suporte a audio: 1 <!doctype html> 2 <meta charset=utf-8> 3 <audio src=loureed_perfectday.mp3 autoplay controls> 4 Download <a href=loureed_perfectday.mp3>video!</a> 5 </audio> 4 Armazenamento no lado cliente através do HTML5 Há duas formas de se armazenar dados: Web Storage que é suportado por todos os browsers e Web SQL Databases que ainda não é suportada por todos os browsers. O Web Storage é mais simples(não precisa conhecer de SQL para manipula-lo) de se utilizar mas possui limitação como por exemplo no Safari, de 5 MB. Já o Web SQL Databases já está contiduo em seu nome, a manipulação é através de SQL. Web Storage: Para salvar uma determinada informação através deste recurso ituliza-se o seguinte comando:

$incluso: <input pattern="[0-9]{5}(\-[0-9]{3})?" title="cep"> A máscara para este form será de um CEP no estilo 99999-999. Para adicionar um vídeo em HTML5 o código ficaria assim: 1 <video src=demo.$

4 1 sessionstorage.setitem("twitter", Para recuperar algum dado: localstorage.getitem( twitter ); Para remover informações: removeitem( twitter ); Web SQL Databases: Ao contrário do Web Storage, precisamos nos preocupar onde armazenar tais informações. Para isto, precisamos primeiramente criar/abrir um BD: 1 var db = opendatabase( 2 'meubanco', 3 '1.0', 4 'My database', 5 2 * 1024 * ); Tendo o BD criado, vamos para as tabelas: 1 var db = opendatabase( 2 'meubanco', 3 '1.0', 4 'My database', 5 2 * 1024 * ); 7 8 db.transaction( function (tx) { 9 tx.executesql('create TABLE contacts (id, name)'); 10 }); Bom, o BD foi criado, a tabela também, mas e agora, como consultar, excluir, modificar Consulta: 22 db.transaction( function (tx) { 23 tx.executesql( 24 'SELECT * FROM contacts', 25 [], 26 function (tx, results) 27 { 28 var len = results.rows.length; 29 alert('existem ' + len + ' registros!'); 30 for (var i = 0; i < len; i++) 31 { 32 var row = results.rows.item(i); 33 alert(row.id + ': ' + row.name); 34 } 35 }, 36 function (tx, error) 37 { 38 alert('ooops ' + error.message); 39 } 40 ); 41 }); 42 Exclusão: 43 db.transaction( function (tx) { 44 tx.executesql( 45 'DROP TABLE contacts', 46 [], 47 function (tx, results) 48 { 49 alert('tabela excluída');

Para isto, precisamos primeiramente criar/abrir um BD: 1 var db = opendatabase( 2 'meubanco', 3 '1.

5 50 }, 51 function (tx, error) 52 { 53 alert('ooops ' + error.message); 54 } 55 ); 56 }); E assim sucessivamente. 8 CONSIDERAÇÕES FINAIS Apesar do W3C ter apostado na linguagem menos apropriada para a web o XML, o HTML voltou depois de quase 10 anos congelados graças a um grupo que enxergou mais além. Graças ao WHATWG o HTML não se estagnou. O HTML5 tem um potencial enorme para simplificar a programação web, tão necessária nos tempos atuais reduzindo quase a zero a preocupação dos programadores com aplicativos compatíveis com determinadas plataformas de browsers. 10 BIBLIOGRAFIA

Graças ao WHATWG o HTML não se estagnou.

7 Introdução Ferramentas proprietárias foram desenvolvidas para suprir deficiências do HTML

8 Fundamentos HTML5 Deve funcionar da mesma forma em todo browser Como os browsers devem reagir perante a erros Otimizar a linguagem sem abolir a facilidade de criação

9 Suporte nativo para validação de formulário <input type= required> O formulário irá validar se o foi informado e o dado informado tem que haver uma semelhança com a sintase de um endereço de

email foi informado e o dado informado tem que

10 Foram incluídas data, mês, semana e hora como um tipo nativo: <input type=date> cria entrada de datas; <input type=time> cria entrada de hora; <input type=month> <input type=week>

11 O elemento date no chrome:

12 Suporte a máscaras: <input pattern="[0-9]{5}(\-[0-9]{3})?" title="cep"> Vídeo: <video src=demo.mp4 autoplay controls> Download <a href=demo.mp4>a demo video!</a> </video>

13 O controlador de vídeo no chrome:

14 Audio: <!doctype html> <meta charset=utf-8> <audio src=loureed_perfectday.mp3 autoplay controls> Download <a href=loureed_perfectday.mp3>video!</a> </audio>

15 Armazenamento: Web Storage, suportada por todos os navegadores e a forma mais simples de armazenamento. Porém com limitação de armazenamento de 5 MB(Safari) Salvar registro: sessionstorage.setitem("twitter", "@elemarjr");

Porém com limitação de armazenamento de 5 MB(Safari)

16 Recuperar registro: localstorage.getitem( twitter ); Remover: removeitem( twitter );

17 Web SQL Databases: Ao contrário do Web Storage, precisamos nos preocupar onde armazenar tais informações. Para isto, precisamos primeiramente criar/abrir um BD: var db = opendatabase( 'meubanco', '1.0', 'My database', 2 * 1024 * 1024 );

Para isto, precisamos primeiramente criar/abrir um BD: var

18 Tendo o BD criado, vamos para as tabelas: var db = opendatabase( 'meubanco', '1.0', 'My database', 2 * 1024 * 1024 ); db.transaction( function (tx) { tx.executesql('create TABLE contacts (id, name)'); });

19 Tendo o BD criado, vamos para as tabelas: var db = opendatabase( 'meubanco', '1.0', 'My database', 2 * 1024 * 1024 ); db.transaction( function (tx) { tx.executesql('create TABLE contacts (id, name)'); });

20 CRUD em Web SQL Databases: Consulta: db.transaction( function (tx) { tx.executesql( 'SELECT * FROM contacts', [], function (tx, results) { var len = results.rows.length; alert('existem ' + len + ' registros!'); for (var i = 0; i < len; i++) { var row = results.rows.item(i); alert(row.id + ': ' + row.name); } }, function (tx, error) { alert('ooops ' + error.message); }; }); Novidades da versão 5

length; alert('existem ' + len + ' registros!'); for (var i = 0; i < len; i++) { var row = results.

21 CRUD em Web SQL Databases: Exclusão: db.transaction( function (tx) { tx.executesql( 'DROP TABLE contacts', [], function (tx, results) { alert('tabela excluída'); }, function (tx, error) { alert('ooops ' + error.message); } ); }); Novidades da versão 5

Documentos relacionados

PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS -HTML 5: ARMAZENAMENTO DE DADOS (CLIENTE) Prof. Angelo Augusto Frozza, M.Sc. http://about.

PROGRAMAÇÃO PARA DISPOSITIVOS MÓVEIS -HTML 5: ARMAZENAMENTO DE DADOS (CLIENTE) Prof. Angelo Augusto Frozza, M.Sc. http://about.me/tilfrozza ROTEIRO Introdução Compatibilidade Principais características