HTML 5/ Notícias/ Open-source/ RIA

HTML 5 e Aplicações Web

Eu demorei muito para escrever esse post, primeiro queria ter certeza do que eu falava, depois queria ter a convicção que não iria influenciar ninguém. Então decidi escrever abaixo sobre o que todos estão falando à respeito do HTML 5 vs. Flash vs. resto do mundo. A única certeza que eu tenho quando escrevi isso é que alguns estarão discordando de pontos que coloquei, outros colocarão “Obrigado”. O que de fato eu espero é que você me ajude também a ver diferentes angulos e concluir minhas teorias a respeito disso, afinal de contas o que eu escrever aqui pode virar passado em 6 meses.

Parte Um

O mundo de IT não é diferente do mundo geral. As regras se baseiam em ações (início,meio e fim). A unica rápida mudança que temos é que as coisas andam em velocidade 2x mais que no geral. Ações de descoberta em uma área de medicina demora cerca de 5 anos para iniciar a aplição, depois mais 2 anos para aperfeiçoa-la e assim por diante. A nossa precisa apenas de um desconfortável humor de que não está perfeito e um computador para gerar resultados rápidos. Eu acredito que não mais que 6 meses e você faz estrago. Eu acho que o poder da internet e do boca-a-boca.
Então, vem a sequência disso, precisamos de uma revolução. Quando queremos dizer que algo está ruim e que não estamos mais afim de fazer aquilo, juntamos duas dúzias de pessoas e criamos uma revolução, assim por se dizer você junta a sua fome com a coragem coletiva. Eis que surge um novo “how to”, basta espalhar a informação e pessoas que estam em bem, bem distantes respondem, os chamados adeptos; Pronto você chegou onde você queria, proliferar uma idéia. Faltando apenas o toque final para que isso dê certo. Chamar nomes de peso e dividir a causa com você. Foi assim que Steve Jobs entrou como garoto propaganda do HTML 5 e CSS3.

Parte Dois

Tem aproximadamente 7 milhões de informações na internet segundo o Google. Muita coisa não? Eu acredito que não li nem 0,01% de tudo isso. Comecei a me preparar para a árdua tarefa de ler a respeito disso calmamente, sem muita pressa, primeiro passo feito foi ler no Wikipedia, depois na W3C, acredite lá tem mais informação e sem banners do que qualquer outro lugar que eu conheça. E os resultados não foram assustadores. É onde começa a terceira parte deste estudo que entitulo de “Evolução”.

Evolução

Desde que eu entrei na internet pela primeira vez em 1997, eu apenas percebia gifs, Frontpage code. JS, HTML. Hoje é um mix de tanta tecnologia que fez dela o que é. Eu acredito que o ponta pé inicial sempre tem que existir e é necessário você ter força para sobreviver nesse mundo mesmo sendo uma linguagem de programação voltada para web. O HTML veio para ajudar a cunhar a idéia. Então a idéia pegou, mudou-se muito rápido e talvez ele não tenha acompanhado tamanha revolução ocorrida, até que tentou arduamente com o HTML 4.0.1. Só que não é fácil você definir uma linguagem que rode em diversos sistemas operacionais, que seja plataforma e que tenha variações de navegabilidade, navegadores amigo, navegadores. Eles são um saco para o HTML. Cada um quer se comportar do seu jeito. Oras mais é natural que cada um queira se comportar diferente. Alguns brigam entre si, outros tentam boicotar, outros são os bons moços e poucos são vilões.
O HTML tem sido um mestre evolutivo nesse aspecto. Joga muito bem nesse meio de campo e está dando conta do recado. Então começo a perguntar onde e em quais navegadores ele está tão respeitado, é onde começo com a próxima parte chamada de “mudanças”.

Mudanças

As mudanças começaram em 2006 quando a Apple, Mozilla Fundation e Opera juntaram-se para melhorar a linguagem. Cada empresa seja ela seu foco lucros ou não. Tem um mútuo interesse em ser dominante na área, o que acaba sendo bom por um lado e muito pior por outro, eu já já explico isso. Voltando ao meu raciocínio, a Apple fez significantes doações para o Webkit, no qual ela usa em seus produtos Apple Safari, iOS, logicamente tais mudanças geram um preço que é cobrado pelos acionistas da empresa no balando trimestral sempre. E claro ela precisa defender isso, já que parte de seus produtos é baseado nessas significantes melhorias.

O HTML 4 para o 5 mudou assim:

Em HTML 4 você criava um documento .html da seguinte maneira.

1
2
3
4
5
6
7
8
9
10
11
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML 4.x e XHTML</title>
</head>
 
<body>
<p>Exemplo de HTML 4</p>
</body>
</html>

Com o HTML 5 você cria um documento HTML assim:

1
2
3
4
5
6
7
8
9
10
< !doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML 5</title>
  </meta></head>
  <body>
    <p>Exemplo de paragrafo</p>
  </body>
</html>

Significativa mudança em termos digitação. Mais simples de definir o charset da página, removeram a parte chata de definir DTD do documento e também para XHML removeram os tais namespaces.
A grande jogada do HTML 5 é de fato promover a web semantica, aquela história já velha e conhecida de todos do microformats. Só que em tese isso funciona perfeito, no mundo real e cruel provavelmente daqui alguns anos, hoje não.

Inline SVG (Colando código de SVG)
Outra promessa que pode ser muito interessante é vetorizar o que você tiver. Imagine suportar Tudo em Inline SVG, permitir que você use um editor SVG, copie o código e jogue no novo tag porém hoje não é possível em nenhum navegador existente. Quando existir você pode testar esse código abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< !doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML 5</title>
  </meta></head>
  <body>
    <p>Uso de SVG com HTML 5</p>
 
    <svg><rect x="136" y="170" fill="#29ABE2" width="24" height="119"/>
    <rect x="173" y="233" fill="#009245" width="24" height="56"/>
    <rect x="213" y="252" fill="#ED1C24" width="24" height="37"/>
    </svg>
  </body>
</html>

Bem fácil, não é? Uma repentina mudança para quem estava acostumado apenas a rendenizar SVG. Pois bem, continuando nossa investigação vimos que tem novos tags no HTML 5, que você pode ver na íntegra aqui.

Depois de ver todas as mudanças e novos tags cheguei a uma pequena conclusão das novidades. A grande bola da vez é o tag

Canvas

, ele é o principal responsável pelo que há de mais legal e que que levou o HTML 5 ao topo da discussão sobre o assunto. Segundo a documentação em suma, ele serve para rendenizar gráficos em tempo de execução muito usado em jogos, animações, só que rendeniza apenas em 2D.

Então como eu posso fazer um simples exemplo?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
< !doctype html>
<html>
  <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
	<script type="text/javascript">
 
	$(document).ready(function () {
			desenharBarras();
	});
 
	function desenharBarras()
	{
		cronometro = setInterval("incrementarX()",120);
	}
	var x = 5;
	function incrementarX()
	{
				var meuCanvas = document.getElementById('canvasContainer');
				if(meuCanvas && meuCanvas.getContext) {
					var context = meuCanvas.getContext('2d');
					context.beginPath();
					context.rect(x,meuCanvas.height >>> 1,3, (Math.random() *Math.pow(7,2)) - (meuCanvas.height >>>1) + 100);
					context.fillStyle = "#779AC4";
					context.closePath();
					context.fill();
				}
				if (x < meuCanvas.width){
				x += 5;
				}else{
					alert("completou o gráfico");
					clearInterval(cronometro);
				}
			}
	 </script>
    <meta charset="UTF-8">
    <title>HTML 5</title>
  </meta></script></head>
  <body>
    <p>Uso de Canvas para criar gráficos de barra</p>
 
	<canvas id="canvasContainer" width="700" height="500">
      <!-- Basicamente você vai usar Javascript igual como se usa a API do Flash para desenho -->
      <p>Você pode escrever isso caso seu usuário não tenha um navegador compatível e dizer que não suporta o Canvas</p>
    </canvas>
  </body>
</html>

O exemplo acima simula a criação de um gráfico de barra, podendo ai você colocar em um dashboard complementar que você venha a construir. Porém mesmo gastando pouco mais de 30min para fazer esse exemplo eu percebi que exitem diversos outros exemplos, que você pode usar como base para testar seus conhecimentos e ver o quanto burro você foi em não aprender trigonometria na escola.

Outra novidade interessante que o HTML 5 vai proporcionar para o pessoal de Web standards, é a possibilidade de se conectar com sockets, Existe um famoso chamado Node.js que faz isso bem fácil e pode te ajudar a entender muito bem como vai rolar, Eu sei como funciona conexão com sockets, então fui investigar e é 90% igual como é feito em qualquer linguagem de script, seja ela Js, Actionscript, AppleScript.

Outra mudança significativa foi a possibilidade de sincronização offline, você como desenvolvedor pode deixar o usuário preenchendo o cadastro mesmo que a conexão tenha caído e depois quando ele entrar no site, sincronizar o que ele havia deixado em aberto. O que me preocupa nesse sentido é a especificação de segurança nesse ponto. Coisa que ainda não está totalmente definida e tem pouco assunto sobre o mesmo.

Se você pensa que jamais será localizado quando navegar na internet, você se engana, o futuro é hoje nesse quesito, você pode visitar um site e ele pode pedir sua localização, igual como é feito com seu Android, iphone, Nokia phone, blackberry, só que agora é mais uma função nova do navegador do que em sí uma função do HTML 5. Já era hora deles terem soltado uma especificação nesse sentido para os fabricantes de navegadores. O grande problema é que a precisão disso está ligado apenas ao seu ISP e não ao seu IP. Eu acredito que isso possa ir amadurecendo com futuras versões.

Integrando também recursos de multimidia como simples sintaxe para vídeos e audio. Por enquanto para audio os formatos aceitos são mp3 e ogg. E o tag de video apenas suporta videos com padrão MPEG-layer 4 (.mp4), H.264, Speex, AC,etc. O que para mim é um ponto bem complicado quando se tem diversos codecs e diversos navegadores, atualmente apenas o Chrome suporta MPEG-layer4 já o firefox e opera apenas ogg, speex etc. O que torna a vida de quem vai criar o video complicada por que terá que ainda criar javascripts para detectar o navegador e para nao criar 2 tipos de videos, fazer o swap entre um player nativo ou um player de video com Flash.

Aqui é um exemplo típico de player HTML 5 nativo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< !doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML 5</title>
  </meta></head>
  <body>
    <p>Uso de vídeo com HTML 5</p>
 
  	<video width="854" height="480" preload controls >
    <source src="meuvideo.mp4" type='video/mp4'/>
    </video>
  </body>
</html>

E para o audio, a mesma coisa me preocupa, atualmente apenas mp3 é suportado pelo Chrome, no firefox suporta apenas ogg vorbis. Tem algumas técnicas que voce adiciona ou faz o transcode nativo para ogg, mais para usuário final, ninguém vai querer fazer transcode de cada musica para ouvi-la. Ele se preocupa apenas em dar o play.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< !doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML 5</title>
  </meta></head>
  <body>
    <p>Uso de musica com HTML 5</p>
 
  	<audio controls="controls">
    <source src="musica.mp3" type='audio/mp3'/>
 
  </audio></body>
</html>

Por fim, chegamos a parte de mudanças. Eu abreviei ao máximo para não ficar cansativo, se você chegou até aqui, parabéns, você é meu leitor preferido. A próxima parte eu chamo de “Competitividade”.

Competitividade
Embora o HTML 5 tenha trazido recursos interativos para o usuário final e coisas bem legais para o desenvolvedor eu ainda vejo que tem muito caminho pela frente, que na situação atual já se pode fazer coisas legais com ele, não tão avançadas como outras tecnologias já conhecidas e competitivas dele o SilverLight e o Flash.

Então, como eu vejo isso na competitividade atual e daqui para os próximos 5 anos? Eu vejo que tanto para o lado do desenvolvedor quanto para o lado do usuário, teremos coisas boas. Por que entre eles HTML 5, Silverlight, Flash e outros, eu percebo que a parte que falei evolutiva desse artigo vem a encaixar perfeitamente no que escrevo agora. Você poderá ver exemplos como o “Muro” um aplicativo feito pela DeviantArt, lhe chocando, porém se você for ver outros concorrentes como o que o pessoal da Aviary.com faz, você fica na dúvida de qual é o melhor e qual deles vai vencer na concorrência.
Eu tenho certeza que nenhum vai ganhar do outro. Todas as tecnologias vão ser alternativas, não terá mais essa preferência de “só flash”,”só silverlight”,”só html5″, quem vai decidir o que usar no final ou é o cliente ou é o usuário final. A web precisa de diversificação de espécimes como essas, não dá para ter apenas uma tecnologia predominante, tem que existir várias, onde-se é possivel manter em armonia ambos os ninchos existentes. É ai onde eu entro com o próximo tópico que chamo de “Vendedores”.

Vendedores

Cada um sempre quer vender seu peixe, e por mais que você do time do web standard queira ver por outro lado da moeda, você deve concordar comigo a segregação de cada um dos vendedores em uma especificação ainda em andamento e a fragmentação das implementações. Empresas que tem 100% de suas ações voltadas para produção de conteúdo web como o Google vão sempre sair na frente em consolidação das implementações, tanto é que o Chrome é o único navegador existente que suporta todas as especificações já definidas, coisa que outros até mesmo a Apple ainda não suporta.

Fato tal é que me preocupa nesse cenário, eu fico ainda cometendo os mesmos erros e com medos dos antigos fantasmas da web de 1997. Onde terei que ter jogo de cintura para lhe dar com a interoperabilidade das versões do navegador. Pergunto eu? Eles apenas se interessam na semântica da linguagem e não na semântica do navegador? Mesmo já tendo ouvido que navegador era coisa do passado. Eu acho que ainda teremos por muito tempo navegadores e por muito tempo vendedores implementando novas funções DOM para que facilite a vida do usuário e seu peixe venda mais rápido que o do vizinho. Assutador como desenvolvedor não?

Uma vez que eu tenho essa preocupação, você viu que em “mudanças”, grande parte é relacionada ao navegador, colocando mais poder ao DOM de interpretação e não na linguagem em si. Seria esse um calcanhar de aquiles que eu vejo em questões de compatibilidade? Eu só aposto nisso daqui à 10 anos para ver se realmente mudou ou se continua como está, já que não só de desktop vive mais a web.
É onde agora entro na última parte do artigo que falo sobre aplicações Web e HTML 5. Chamo ela de continuação.

Continuação

Depois de ter analisado, cansavelmente todos os exemplos que eu pude achar sobre o assunto, estudar e ver que ainda eu preciso esperar um pouco, quem sabe 1 ou 2 anos para ver realmente coisas prontas, eu falo isso por que minha vivência em mercado corporativo é grande, e se tem uma coisa que o pessoal que paga seu projeto odeia é algo como “working in progress” ou não homologado. Enquanto não for homologado seja aqui no Brasil ou lá fora o HTML 5 ainda não vai entrar nesse mercado, o que pode demorar a incomodar outras tecnologias do tipo como Flash/Flex.
Principalmente orgãos do governo que temem por segurança, e estabilidade de uso.
Terei a certeza que será amplamente usado em material de propaganda, start-up’s, aplicativos web para celulares como o Sencha onde o clico de vida de uma aplicação não tem tanta burocracia como os demais.

Posso investir nisso? Se você é curioso sem dúvida, você nunca sabe de onde a próxima oportunidade virá. Como você, eu sempre procuro estudar novidades e o HTML 5 como a plataforma Flash são as minhas preferidas, nem uma e nem outra ao meu ver competem em sí, ela trás apenas alternativas, tais alternativas me impressionaram.
O HTML 5 pode até ser aplicado atualmente em aplicações Web, mais eu prefiro por enquanto ficar com o JQuery. A parte mais dificil para mim escrever isso, podem apostar, foi não falar do Flash/Flex, não dizer quem é melhor que quem. Coloquei as diferenças ao lado e me posicionei como um novo desenvolvedor querendo aprender novidades.

E disponibilizo abaixo links da minha pesquisa, quero ouvir de você seu ponto de vista.

Links da pesquisa:

3 thoughts on “HTML 5 e Aplicações Web

  1. Muito bom o post =]

    ao meu ver o grande problema do HTML5 assim como digo ser o grande vilão e razão da minha afirmação que AJAX/JS é um lixo, consequentemente hoje o HTML5 também se enquadra nessa minha linha de raciocíneo: dependência de suporte da especificação do Web-Browser o que todos nós sabemos é um grande problema pois cada um implementa de uma maneira, como citado pelo Igor, hoje apenas o Chrome implementa um suporte completo ao HTML5 e a própria Apple que tá fazendo o maior falatorio da tecnologia não suporta completamente…

    o meu pensamento hoje ainda é o seguinte:

    HTML/AJAX/HTML5 usar para sites

    Adobe Flex/AIR, Silverlight e afins usar para sistemas

    o HTML5 até me possibilitar o que o Flex me possibilita hoje no quesito implementação de sistema, creio que ainda falta muito para evoluir

    bom esta é minha opinião do assunto =D

  2. Pra mim, quando você diz que as tecnologias não são concorrentes, são alternativas, sintetisa o pensamento de todo desenvolvedor que veste a sua própria camisa, e não a camisa dos outros. Hoje eu sou fã da plataforma flash, e a considero a melhor, mas amanhã… quem sabe né?

  3. O HTML 5 tem um longo caminho pela frente, ue o flash já cruzou. E não vejo grande futuro para o HTML 5 pelo menos por enquanto. Acho que ele apenas vai ser mais uma ferramenta de Design.

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *