Neste Post vamos voltar a abordar o t\u00e3o esperado HTML 5. T\u00e3o esperado por qu\u00ea? Simplesmente porque ele permitir\u00e1 reunir diversos recursos que hoje s\u00f3 funcionam com diversos plugins (Flash, centenas de jquerys e ajax em geral) e deixam as p\u00e1ginas pesadas e demoradas pra serem carregadas. Sem falar da incompatibilidade existente entre plataformas e at\u00e9 mesmo entre diferentes navegadores. Todo mundo que tem um Ipad t\u00e1 chateado por n\u00e3o conseguir assistir v\u00eddeos ou anima\u00e7\u00f5es em Flash.<\/p>\n
Com isso o HTML 5 n\u00e3o ser\u00e1 apenas uma atualiza\u00e7\u00e3o da linguagem, esta vers\u00e3o passar\u00e1 a oferecer recursos que eram imposs\u00edveis de se programar apenas em HTML puro. Quem acompanhou o come\u00e7o da web deve lembrar-se de como eram feias as p\u00e1ginas naquela \u00e9poca, sites repletos de frames, tabelas (com aquelas bordas ris\u00f3rias..) e claro, n\u00e3o podemos nos esquecer das anima\u00e7\u00f5es, os velhos e simp\u00e1ticos Gifs! Naquele tempo s\u00f3 restava ao webmaster fazer gra\u00e7a com scripts in\u00fateis. (Nessa \u00e9poca praticamente todo site tinha uma frase ou uma imagem passando pela tela. - Tag <marquee> do HTML)<\/p>\n
O HTML 5 ainda est\u00e1 na incubadora, faltam alguns detalhes e normas \u00e0 serem definidas. Mas aos poucos estamos tendo acesso a suas novas funcionalidades. Sua previs\u00e3o de lan\u00e7amento \u00e9 para o segundo semestre de 2012. Atualmente temos apenas 2 navegadores que est\u00e3o rodando bem os scripts nesta vers\u00e3o, trata-se do Google Chrome e do Safari. Os demais ainda precisam melhorar e muito no trabalho.<\/p>\n
Em posts anteriores eu j\u00e1 citei alguns recursos que estar\u00e3o presentes nesta nova vers\u00e3o. Hoje vou listar as principais novidades que est\u00e3o prontas para entrar na ativa.<\/p>\n
- Multim\u00eddia sem Plugin:<\/strong><\/p>\n Hoje para reproduzirmos um v\u00eddeo numa pagina da Internet precisamos ativar algum plugin. Em larga escala, o mais utilizado \u00e9 o Flash da Adobe. (Menos no mundo da Apple onde o QuickTime \u00e9 mais legal). No entanto, esta necessidade ser\u00e1 extinta, o HTML 5 oferecer\u00e1 tag pr\u00f3prias para inclus\u00e3o de conte\u00fado multim\u00eddia, tratam-se das tags <video> e <audio>. Abaixo vou deixar um exemplo de como publicar um video com esta nova tag:<\/p>\n <video src=\"video.mp4\" width=\"320\" height=\"240\" controls><\/video><\/p>\n Mole n\u00e9? Vai ficar t\u00e3o f\u00e1cil como colocar uma foto nos dias atuais. para testar este recurso voc\u00ea pode acessar a p\u00e1gina do Youtube confeccionada em HTML 5, siga o link: www.youtube.com\/html5\u00a0 -- (lembre-se de acessar o site usando um navegador compat\u00edvel).<\/p>\n - Agora o CSS vai ficar legal<\/strong><\/p>\n Agora \u00e9 pra valer! Tudo indica que finalmente as tabelas e frames ser\u00e3o aposentados com o novo HTML. Pois ele ter\u00e1 tags para facilitar a organiza\u00e7\u00e3o e consequentemente para formatar o conte\u00fado. Ser\u00e3o as seguintes:<\/p>\n <header> <footer> <article> <section> <nav> <aside><\/p>\n - Gr\u00e1ficos sem gambiarra<\/strong><\/p>\n Sem d\u00favida os gr\u00e1ficos nos ajudam (e muito) a compreender informa\u00e7\u00f5es mais complexas, como pesquisas ou mesmo estat\u00edsticas. S\u00f3 que hoje em dia, fica dif\u00edcil oferecer um gr\u00e1fico din\u00e2mico nos sites que desenvolvemos. A solu\u00e7\u00e3o mais pratica \u00e9 criar o visual dele em Flash e a ponte dos dados com o banco atrav\u00e9s do XML. Assim quando um dado for atualizado no banco as barrinhas do gr\u00e1fico se alteram, (igualzinho o Excel). Logo, logo, teremos a tag <canvas> que possibilitar\u00e1 a exibi\u00e7\u00e3o de gr\u00e1ficos din\u00e2micos sem a mesma complexidade de se fazer entend\u00ea-las.<\/p>\n - Calend\u00e1rios<\/strong><\/p>\n Qual \u00e9 a data a se entender quando se l\u00ea: 8\/3\/2011?<\/p>\n Pode ser 8 de Mar\u00e7o no padr\u00e3o brasileiro, e ao mesmo tempo 3 de Agosto no padr\u00e3o americano. Se pode confundir at\u00e9 a gente imagine explicar isso para os seus c\u00f3digos?<\/p>\n Particularmente, quando trabalho com datas costumo criar fun\u00e7\u00f5es em PHP ou Asp para trat\u00e1-las de maneira uniforme. Tem gente que prefere o JavaScript.<\/p>\n Mas o HTML sozinho ser\u00e1 capaz de driblar este problema, teremos a tag <time> que poder\u00e1 identificar informa\u00e7\u00f5es do navegador e mostrar a data correta no padr\u00e3o do usu\u00e1rio.<\/p>\n - Aplica\u00e7\u00f5es Off-line<\/strong><\/p>\n Em tempos de computa\u00e7\u00e3o em nuvem (Cloud Computing). Ainda tem espa\u00e7o para sistemas que rodam diretamente no HD do computador. Futuramente esta demanda ser\u00e1 apenas para emerg\u00eancias, como a queda da conex\u00e3o da Internet (lembrei do speedy agora, rs). Assim ser\u00e1 poss\u00edvel que o usu\u00e1rio tenha salvo em seu micro uma c\u00f3pia do sistema e possa continuar trabalhando mesmo sem estar ON para seus amigos do Messenger.<\/p>\n Hoje j\u00e1 temos o Google Gears que trabalha com o DOM Storage, Por\u00e9m os navegadores precisam melhorar neste quesito, atualmente o Firefox oferece apenas 5 mb de espa\u00e7o para isso e o Internet Explorer o valor sobe para 10 Mb.<\/p>\n - Quem disse que Internet \u00e9 s\u00f3 clicar?<\/strong><\/p>\n Sabe aquele joguinhos em Flash onde as crian\u00e7as vestem animaizinhos com chap\u00e9us, roupinhas e tudo mais? Este recurso hoje \u00e9 feito em 99% dos casos em Flash, pois o usu\u00e1rio (no caso a crian\u00e7a ou algum adulto com s\u00e9rios problemas) precisa clicar na roupinha e arrastar at\u00e9 o bichinho para vesti-lo.<\/p>\n Teremos comandos para interagir com JavaScript, assim facilitando a cria\u00e7\u00e3o do recurso \"Arrastar e Soltar\". S\u00e3o eles dragenter, dragover e drop. Para dizermos ao c\u00f3digo que objeto ser\u00e1 \"arrast\u00e1vel\", bastar\u00e1 aplicar o atributo: draggable=\"true\".<\/p>\n Bem, resta-nos esperar por ele, torcer para que os navegadores acompanhem a tecnologia, e o mais importante, que nossos queridos usu\u00e1rios tenham a ci\u00eancia de que \u00e9 necess\u00e1rio atualizarem seus browsers sempre que tiverem uma vers\u00e3o nova dispon\u00edvel.<\/p>\n","protected":false},"excerpt":{"rendered":" Neste Post vamos voltar a abordar o t\u00e3o esperado HTML 5. T\u00e3o esperado por qu\u00ea? Simplesmente porque ele permitir\u00e1 reunir<\/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-206","post","type-post","status-publish","format-standard","hentry","category-novidades","category-web"],"_links":{"self":[{"href":"https:\/\/marcomapa.com\/artigos\/wp-json\/wp\/v2\/posts\/206","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=206"}],"version-history":[{"count":3,"href":"https:\/\/marcomapa.com\/artigos\/wp-json\/wp\/v2\/posts\/206\/revisions"}],"predecessor-version":[{"id":210,"href":"https:\/\/marcomapa.com\/artigos\/wp-json\/wp\/v2\/posts\/206\/revisions\/210"}],"wp:attachment":[{"href":"https:\/\/marcomapa.com\/artigos\/wp-json\/wp\/v2\/media?parent=206"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marcomapa.com\/artigos\/wp-json\/wp\/v2\/categories?post=206"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marcomapa.com\/artigos\/wp-json\/wp\/v2\/tags?post=206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}