Integração em HTML5
Um dos grandes problemas no envio de arquivos pela web (upload) foi finalmente resolvido com o chamado xmlHttpRequest2: ao se enviar arquivos muito grandes, não se tinha uma ideia de progresso deste envio. O mérito é de um novo evento incluído na API, “onprogress”, incluído no atributo upload. Ele recebe um objeto que possui o atributo lengthComputable e este traz informações de progresso que podem ser exibidas em uma barra de progresso (é novidade, também, a tag <progress>, específica para este fim). Vejamos um exemplo de código upload.php para receber o arquivo enviado em funcionamento:
01 <?php
02 move_uploaded_file ($_FILES[‘arquivo’][‘tmp_name’] , $_FILES[‘arquivo’]
03 [‘name’]);
04 ?>
Ele traz um pequeno trecho em PHP, necessário para receber o arquivo enviado. Abaixo, o código apresenta o JavaScript que manipula e gerencia o upload com barra de progresso.
01 <DOCTYPE HTML>
02 <html lang=”pt-br”>
03 <head>
04 <meta charset=”UTF-8″>
05 <title>Exemplo de Upload</title>
06 </head>
07 <body>
08 <form id=”formulario_upload”>
09 <input type=”file” name=”arquivo” id=”arquivo” />
10 <input type=”button” id=”botao_upload” value=”Upload” />
11 </form>
12 <progress min=”0″ max=”100″ value=”0″>0% complete</progress>
13 </body>
14 </html>
15 <script type=”text/JavaScript”>
16 var botao = document.getElementById(“botao_upload”);
17
18 botao.onclick = function()
19 {
20 var xhr2 = new XMLHttpRequest();
21 xhr2.open(‘POST’, ‘upload.php’, true);
22 var arquivoInput = document.getElementById(‘arquivo’);
23 //files[0] o elemento pode receber de um arquivo
24 var arquivo = arquivoInput.files[0];
25 // É carregado em um formulário FormData(), outra novidade
26 var formulario = new FormData();
27 formulario.append(‘arquivo’, arquivo);
28 var progressBar = document.querySelector(‘progress’);
29 xhr2.upload.onprogress = function(e)
30 {
31 // Verifica se o atributo lengthComputable existe
32 if (e.lengthComputable)
33 {
34 // Calcula percentual e carrega <progress>
35 progressBar.value = (e.loaded / e.total) * 100;
36 }
37 };
38 // Envia o formulário com o arquivo anexo.
39 xhr2.send(formulario);
40 };
41 </script>
O exemplo demonstra algumas novidades: o uso de FormData, que possibilita criar ou complementar formulários de maneira muito mais fácil e simples. Além disso, o uso do xmlHttpRequest 2 (com o atributo upload) específico para este tipo de operação. Ele retorna em seu evento onprogress um objeto com atributos lengthComputable, loaded e total, que trazem informações relevantes da operação, entre elas suas parciais. Como resultado, temos a imagem abaixo – upload com barra de progresso, de acordo com os códigos acima:
A integração homem-máquina também recebeu novidades. O recurso de Drag ‘n Drop (arrastar-e-soltar), tão utilizado em interfaces gráficas dos sistemas operacionais, agora pode ser utilizado em páginas e aplicações web. Um elemento pode ser considerado dragable (“arrastável”), podendo, até mesmo, transportar informações contidas nele para outros elementos (que chamaremos aqui de “alvo”). Vejamos um exemplo de recurso Drag ‘n Drop (códigos e resultado em funcionamento):
01 <!DOCTYPE HTML>
02 <html lang=”pt-br”>
03 <head>
04 <meta charset=”UTF-8″>
05 <title>Exemplo Drag and Drop</title>
06 <style>
07 #arrastavel
08 {
09 position:relative; width:150px; height:90px;
10 background-color:blue;
11 text-align: center; font-size: 25px; color: white;
12 padding-top: 60px;
13 }
14
15 #alvo
16 {
17 position:relative; width:500px; height:300px;
18 border-color:black; border-style:solid;
19 font-size: 25px; text-align: center;
20 }
21 </style>
22 </head>
23 <body>
24 <!– Elemento arrastável –>
25 <div id=”arrastavel” draggable=”true”>DevMedia</div>
26 <!– Elemento Alvo –>
27 <div id=”alvo”></div>
28 </body>
29 </html>
30 <script type=”text/javascript”>
31 //Elemento arrastável
32 var arrastavel = document.getElementById(“arrastavel”);
33 // Evento ondragstart – Posso definir informações a serem transferidas
34 arrastavel.ondragstart = function(event) {
35 event.dataTransfer.setData(“Info”, “HTML5 é demais!”);
36 }
37 // Evento ondragend – Ao terminar de arrastar
38 //mudar o posicionamento do objeto
39 arrastavel.ondragend = function(event){
40 this.style.left = event.pageX + “px”;
41 this.style.top = event.pageY-150 + “px”;
42 }
43 //Elemento alvo
44 var alvo = document.getElementById(“alvo”);
45
46 //Evento ondragenter – pinta a borda do alvo de azul ao adentrar
47 alvo.ondragenter = function(event) {
48 this.style.borderColor = “blue”;
49 }
50 //Evento ondragleave – devolve a coloração original da borda a sair
51 alvo.ondragleave = function(event) {
52 this.style.borderColor = “”;
53 }
54 //Evento ondragover – preventDefault()
55 alvo.ondragover = function(event) {
56 event.preventDefault();
57 }
58 //Evento ondrop – Transfere a informação para dentro do alvo
59 alvo.ondrop = function(event) {
60 this.innerHTML = event.dataTransfer.getData(“Info”);
61 }
62 </script>
Muitos são os recursos trazidos pela tecnologia HTML5 e pela nova geração de navegadores web. Portanto, muitas são as oportunidades de seu uso, que podem ir desde experiências mais ricas de navegação e interatividade em um website até avançadíssimos jogos eletrônicos baseados em web. Animações e streaming de áudio e vídeo, antes possíveis apenas pelo plugin proprietário Adobe Flash, agora são realidade de forma nativa.
Tratando em particular dos jogos eletrônicos, WebSockets ou SSE trazem uma troca de informações ágil, essencial para partidas com múltiplos jogadores. Animações realizadas usando Canvas, webGL ou recursos do CSS3, acompanhados por uma envolvente trilha sonora reproduzida pelo novo suporte de streaming de áudio, utilizando-se dos eventos de toque em tela, acelerômetro e recurso de Drag ‘n Drop farão os jogos eletrônicos baseados em web alcançarem patamares possíveis antes apenas por jogos instaláveis em sistemas operacionais.
Fallbacks e condicionais verificando a existência da API (como em muitos exemplos dos últimos artigos) farão com que, até mesmo, visitantes oriundos de navegadores mais antigos possam visitar sua página ou aplicação, embora não tenham a mesma experiência. Frameworks (como o Modernizr) auxiliam nos fallbacks e podem providenciar polyfills – que são a possibilidade de preencher a falta de suporte a alguns recursos do HTML5 por recursos mais antigos ou plugins.
Os novos recursos podem ser muito úteis em Layout Responsivo – criar versões do website planejadas para vários tamanhos de tela e processadores. Ou seja: em um único código criar páginas que se adaptem às telas que vão desde pequenos smartphones até televisores de muitas polegadas.
Henrique Poyatos é coordenador pedagógico de EAD e professor dos cursos de graduação e MBA da FIAP. Pós-graduado em Gerenciamento de Projetos e tecnólogo em Processamento de Dados (FIAP). Atua no mercado de desenvolvimento para Internet desde 1996 e coordenou projetos de tecnologia para empresas como Caixa Econômica Federal, Nossa Caixa, McDonalds, Metrô de São Paulo e clientes internacionais.
