{"id":41,"date":"2010-05-25T11:54:00","date_gmt":"2010-05-25T11:54:00","guid":{"rendered":"http:\/\/artigos.marcomapa.com\/?p=41"},"modified":"2011-09-11T19:31:36","modified_gmt":"2011-09-11T19:31:36","slug":"html-5-nova-tecnologia","status":"publish","type":"post","link":"https:\/\/marcomapa.com\/artigos\/html-5-nova-tecnologia\/","title":{"rendered":"HTML 5 – Nova tecnologia"},"content":{"rendered":"

Muito se fala sobre as novidades do HTML5 e o que ela ir\u00e1 representar para as novas aplica\u00e7\u00f5es WEB. Este post tem a proposta de apresentar o que est\u00e1 sendo discutido na atual especifica\u00e7\u00e3o, o que j\u00e1 est\u00e1 efetivamente sendo suportado por alguns browsers, bem como analisar o impacto destas novidades no futuro das aplica\u00e7\u00f5es web.<\/p>\n

O HTML5 foi criado pelo WHATWG (Web Hypertext Application Tecnhology Working Group), grupo formado por desenvolvedores de diversas empresas, como Opera, Mozilla e Apple, que estavam descontentes com o rumo que a W3C estava dando ao XHTML. A proposta do HTML5 \u00e9 ser uma linguagem melhor preparada para constru\u00e7\u00e3o de aplica\u00e7\u00f5es WEB, bem como ser independente de plugins, al\u00e9m de ter novos elementos que d\u00e3o mais sem\u00e2ntica ao conte\u00fado. Atualmente o WHATWG e o W3C trabalham em conjunto no desenvolvimento do HTML5.<\/p>\n

Embora a vers\u00e3o final do HTML5 esteja previsto para 2012, muitos browsers j\u00e1 est\u00e3o suportando algumas das principais novidades do HTML5, e a cada dia aparecem exemplos de bom uso dos novos recursos da linguagem na WEB. O Youtube, por exemplo, j\u00e1 possui uma vers\u00e3o experimental do portal em HTML5. http:\/\/www.youtube.com\/html5<\/p>\n

De acordo com a avalia\u00e7\u00e3o do HTML5Test, que classifica de 1 a 160 pontos o suporte dos browsers ao HTML5, temos:<\/p>\n

1- Google Chrome 4.1 \u2013 118 pontos<\/p>\n

2- Opera 10.51 \u2013 102 pontos<\/p>\n

3- Firefox 3.6.3 \u2013 101 pontos<\/p>\n

4- Internet Explorer 7\/8 \u2013 19 pontos<\/p>\n

Como podemos perceber a Microsoft \u2013 em suas atuais vers\u00f5es de browsers \u2013 n\u00e3o tem um bom suporte ao HTML5, por\u00e9m j\u00e1 anunciou que suportar\u00e1 integralmente o HTML5 em seu novo browser, o IE 9 \u2013 com expectativa de lan\u00e7amento no segundo semestre de 2010.<\/p>\n

Um DOCTYPE de f\u00e1cil memoriza\u00e7\u00e3o<\/p>\n

O DOCTYPE possui uma nobre fun\u00e7\u00e3o: orientar o browser como ele deve renderizar o seu conte\u00fado, por\u00e9m a memoriza\u00e7\u00e3o da sintaxe dos DOCTYPEs n\u00e3o \u00e9 tarefa das mais f\u00e1ceis, principalmente quando lembramos que s\u00e3o tr\u00eas as vers\u00f5es para o HTML 4.01\/xHTML (transational, frameset e strict). Geralmente recorremos ao \u201ccopy+paste\u201d para inseri-los na p\u00e1gina. No HTML5, a declara\u00e7\u00e3o \u00e9 feita em uma linha com 15 caracteres:<\/p>\n

<\/p>\n

Gr\u00e1fico nativo com canvas<\/p>\n

Uma das principais novidades do HTML5 \u00e9 o elemento canvas, que atrav\u00e9s do javascript permite a cria\u00e7\u00e3o de anima\u00e7\u00f5es e jogos bem interessantes e, junto com o SVG, promete substituir tecnologias que exigem instala\u00e7\u00e3o de plugins, como o Flash, Silverlight e JavaFx.<\/p>\n

Vamos utilizar como exemplo a cria\u00e7\u00e3o de um gr\u00e1fico simples. Veja a sintaxe do canvas:<\/p>\n

<.canvas id=\u201delementoCanvas\u201d width=\u201d900px\u201d height=\u201d200px\u201d.><\/p>\n

Seu browser n\u00e3o suporta elemento canvas <\/p>\n

<.\/canvas.> <\/p>\n

<.script type=\u201dtext\/javascript\u201d.> <\/p>\n

var canvas=document.getElementById(\u2019elementoCanvas\u2019); <\/p>\n

var ctx=canvas.getContext(\u20192d\u2019); <\/p>\n

\/\/ desenha um ret\u00e2ngulo 100px X 100px, com cor vermelha, 50% de transpar\u00eancia <\/p>\n

ctx.fillStyle=\u2019rgba(255,0,0,0.5)\u2019; <\/p>\n

ctx.fillRect (20, 20, 100, 100); <\/p>\n

\/\/ desenha um ret\u00e2ngulo 100px X 100px, com cor verde, 50% de transpar\u00eancia <\/p>\n

ctx.fillStyle=\u2019rgba(0,255,0,0.5)\u2019; <\/p>\n

ctx.fillRect (40, 40, 100, 100); <\/p>\n

\/\/ desenha um ret\u00e2ngulo 100px X 100px, com cor blue, 50% de transpar\u00eancia <\/p>\n

ctx.fillStyle=\u2019rgba(0,0,255,0.5)\u2019; <\/p>\n

ctx.fillRect (60, 60, 100, 100); <\/p>\n

\/\/ Escreve no gr\u00e1fico <\/p>\n

ctx.fillStyle = \u2018#000\u2032; <\/p>\n

ctx.fillText (\u2019Gr\u00e1fico em Canvas, sensacional!\u2019, 15, 15); <\/p>\n

<.\/script><\/p>\n

Resultado:<\/p>\n

<\/a><\/div>\n

Obs.: Al\u00e9m do atributo \u201cid\u201d (utilizado para identifica\u00e7\u00e3o via DOM), o elemento canvas s\u00f3 permite dois atributos (largura e altura), quando n\u00e3o   especificados, temos por padr\u00e3o: 300\u00d7150px.<\/p>\n

Edi\u00e7\u00e3o de textos em tempo real com o contentEditable<\/p>\n

O atributo \u201ccontentEditable\u201d foi criado pela Microsoft e incorporado no HTML5. Ele permite deixar \u201cqualquer tag\u201d do documento edit\u00e1vel, os valores poss\u00edveis s\u00e3o \u201ctrue\u201d ou \u201cfalse\u201d.<\/p>\n

<.p contenteditable=\u201dtrue\u201d class=\u201dcontentEditable\u201d>Voc\u00ea pode editar este texto, para isto, d\u00ea duplo clique sob o texto<\/p>\n

\u201cDatabase\u201d client-side<\/p>\n

Um dos objetivos do HTML5 \u00e9 melhorar a experi\u00eancia do uso de Aplica\u00e7\u00f5es Web quando o usu\u00e1rio estiver off-line. Para isto, foi disponibilizada uma API para setar\/capturar dados exclusivamente no browser. Uma esp\u00e9cie de \u201csess\u00e3o\u201d off-line em que o valor n\u00e3o pode ser capturado pelo servidor.<\/p>\n

localStorage.setItem(\u2019chave\u2019,'valor\u2019); \/\/ Setar o valor no \u2018banco de dados local\u2019<\/p>\n

localStorage.getItem(\u2019chave\u2019) \/\/ capturar o valor; <\/p>\n

localStorage.clear() \/\/ limpar o valor do banco de dados local;<\/p>\n

Formul\u00e1rios \u2013 Novos campos de formul\u00e1rio<\/p>\n

Muitas necessidades que os desenvolvedores possu\u00edam e s\u00f3 preenchiam atrav\u00e9s do javascript foram implementadas no HTML5. Em apenas algumas linhas \u00e9 poss\u00edvel disponibilizar componentes como: slider, autocomplete, campo data, al\u00e9m de valida\u00e7\u00f5es de diversos campos. Veja algumas destas op\u00e7\u00f5es para formul\u00e1rios:<\/p>\n

Telefone \u2013 <.input name=tel type=tel> - Utilizado para entrada de dados de telefones<\/p>\n

<\/a><\/div>\n

URL \u2013 <.input name=url type=url> \u2013 Utilizado para entrada de variadas URLs. Por padr\u00e3o o browser ir\u00e1 inserir o http:\/\/ como protocolo padr\u00e3o<\/p>\n

<\/a><\/div>\n

E-mail \u2013 <.input name=email type=email> \u2013 Caso opte por valida\u00e7\u00e3o, automaticamente o browser valida se o valor for um e-mail v\u00e1lido<\/p>\n

<\/a><\/div>\n

Data e hora \u2013 <.input name=horario type=datetime> \u2013 Utilizado para agendamento de eventos, reuni\u00f5es, etc.<\/p>\n

<\/a><\/div>\n

N\u00famero \u2013 <.input name=numero type=number> \u2013 Com os atributos \u201cmin\u201d e \u201cMax\u201d \u00e9 poss\u00edvel entrar com um intervalo de valores poss\u00edveis e com o \u201cstep\u201d \u00e9 poss\u00edvel definir o valor para cada incremento<\/p>\n

<\/a><\/div>\n

Tempo \u2013 <.input name=tempo type=time><\/p>\n

<\/a><\/div>\n

Semana \u2013 <.input name=semana type=week><\/p>\n

<\/a><\/div>\n

Slider \u2013 <.input name=slider type=range min=2 max=30 step=2 ><\/p>\n

<\/a><\/div>\n

Atributo autofocus<\/p>\n

Uma boa recomenda\u00e7\u00e3o para melhorar a acessibilidade e usabilidade de uma p\u00e1gina \u00e9 j\u00e1 deixar o campo principal do cursor selecionado (focus no campo). Normalmente utilizamos a linha de javascript (document.getElementById(\u2019nome_capo\u2019).focus()) para deixar o campo focado. <\/p>\n

<.input maxlength=\u201d256\u2033 name=\u201dq\u201d value=\u201d\" autofocus><\/p>\n

Valida\u00e7\u00f5es de Formul\u00e1rios<\/p>\n

N\u00e3o ser\u00e1 mais necess\u00e1rio a utiliza\u00e7\u00e3o de javascript para valida\u00e7\u00e3o de formul\u00e1rios, no HTML5 existe o atributo \u201crequired\u201d, que dentro de um elemento input torna o campo obrigat\u00f3rio e transfere para o browser a tarefa da valida\u00e7\u00e3o do campo.<\/p>\n

<.p><.label>Nome: <.input name=name required><\/label><\/p>\n

<.p><.label>Tel: <.input name=tel type=tel required><\/label><\/p>\n

<.p><.label>E-mail: <.input name=email type=email required><\/label><\/p>\n

<.p><.label>URL: <.input name=url type=url required><\/label><\/p>\n

<.button>Enviar<.\/button> <\/p>\n

Valida\u00e7\u00e3o por express\u00e3o regular<\/p>\n

Al\u00e9m de deixar o campo apenas como obrigat\u00f3rio, \u00e9 poss\u00edvel colocar um padr\u00e3o de entrada para aquele determinado campo, que ser\u00e1 validado pelo browser.<\/p>\n

Por exemplo, em um campo em que s\u00f3 possa entrar valores num\u00e9ricos com 3 d\u00edgitos: <\/p>\n

<.input pattern=\u201d[0-9]{3}\u201d <\/p>\n

name=\u201ddigito\u201d<\/p>\n

required<\/p>\n

title=\u201dValida\u00e7\u00e3o apenas para 3 d\u00edgitos\u201d\/><\/p>\n

Observe que o atributo pattern aceita express\u00f5es regulares.<\/p>\n

Valida\u00e7\u00e3o por range de valores<\/p>\n

No tipo de campo \u201cnum\u00e9rico\u201d, \u00e9 poss\u00edvel fazer uma valida\u00e7\u00e3o dos valores poss\u00edveis de entrada utilizando os atributos min e max.<\/p>\n

<.input type=number min=2 max=10 \/><\/p>\n

Autocomplete<\/p>\n

Com HTML5 \u00e9 simples exibir um input com \u201cautocompletar\u201d, este recurso \u00e9 bem interessante, pois melhora significativamente a experi\u00eancia do usu\u00e1rio no preenchimento do formul\u00e1rio \u2013 quando bem utilizado.
\"
<.label>Homepage: <.input name=hp type=url list=hpurls><\/label><\/p>\n

<.datalist id=hpurls><\/p>\n

<.option value=\u201dhttp:\/\/www.uol.com.br\/\u201d label=\u201dUOL\u201d><\/p>\n

<\/p>\n

<\/p>\n

<.\/datalist>
\"<\/p>\n

Novos elementos<\/p>\n

O HTML5 inclui novos elementos para melhorar a sem\u00e2ntica dos documentos e minimizar o excesso de utiliza\u00e7\u00e3o de DIVS e SPANS (tags sem sem\u00e2ntica). Alguns dos novos elementos s\u00e3o:<\/p>\n

Header \u2013 define o cabe\u00e7alho de uma se\u00e7\u00e3o<\/p>\n

Article \u2013 define que o conte\u00fado \u00e9 um artigo<\/p>\n

Nav \u2013 define um menu de navega\u00e7\u00e3o<\/p>\n

Footer \u2013 define um rodap\u00e9 para a se\u00e7\u00e3o<\/p>\n

Details \u2013 detalhes sobre alguma informa\u00e7\u00e3o, caso tenha o atributo \u201copen\u201d, exibe o conte\u00fado, caso contr\u00e1rio esconde.<\/p>\n

Figure \u2013 conjunto de imagens e legendas<\/p>\n

Conclus\u00e3o:<\/p>\n

Em portais e websites de larga audi\u00eancia, com p\u00fablico variado, ainda \u00e9 cedo para utilizar HTML5 (sobretudo pelo baixo suporte dos navegores l\u00edderes de mercado), por\u00e9m, em Portais ou Webapplications, cujo o ambiente \u00e9 conhecido (uma intranet por exemplo), j\u00e1 \u00e9 poss\u00edvel e recomendado que utilizem os novos recursos.<\/p>\n

Por\u00e9m, antes de utilizar recursos do HTML5, pense exatamente qual ser\u00e1 o benef\u00edcio para o seu usu\u00e1rio, usar por usar apenas pelo hype (e se vangloriar para os amigos que voc\u00ea j\u00e1 utiliza html5), e n\u00e3o pensar na experi\u00eancia do usu\u00e1rio ser\u00e1 um erro.<\/p>\n

Ter um bom discernimento de \u201conde usar\u201d e \u201cquando usar\u201d HTML5 ser\u00e1 fundamental para o sucesso do seu projeto.<\/p>\n

Os usu\u00e1rios de Internet agradecem!<\/p>\n

O Autor <\/p>\n

Esta publica\u00e7\u00e3o foi feita com base no artigo preparado por Marcelo Linhares. Marcelo \u00e9 analista de sistemas do UOL HOST.<\/p>\n","protected":false},"excerpt":{"rendered":"

Muito se fala sobre as novidades do HTML5 e o que ela ir\u00e1 representar para as novas aplica\u00e7\u00f5es WEB. Este<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,5],"tags":[],"class_list":["post-41","post","type-post","status-publish","format-standard","hentry","category-novidades","category-web"],"_links":{"self":[{"href":"https:\/\/marcomapa.com\/artigos\/wp-json\/wp\/v2\/posts\/41","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marcomapa.com\/artigos\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marcomapa.com\/artigos\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marcomapa.com\/artigos\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marcomapa.com\/artigos\/wp-json\/wp\/v2\/comments?post=41"}],"version-history":[{"count":1,"href":"https:\/\/marcomapa.com\/artigos\/wp-json\/wp\/v2\/posts\/41\/revisions"}],"predecessor-version":[{"id":152,"href":"https:\/\/marcomapa.com\/artigos\/wp-json\/wp\/v2\/posts\/41\/revisions\/152"}],"wp:attachment":[{"href":"https:\/\/marcomapa.com\/artigos\/wp-json\/wp\/v2\/media?parent=41"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marcomapa.com\/artigos\/wp-json\/wp\/v2\/categories?post=41"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marcomapa.com\/artigos\/wp-json\/wp\/v2\/tags?post=41"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}