Todos são bons exemplos de como tirar o máximo do HTML5, Javascript e do CSS, enquanto se evita as duras verdades de depender de tecnologias Web para entregar seu valioso aplicativo aos usuários.
O HTML5 já tem alguns anos de idade e não é mais uma curiosidade. Espera-se que páginas web que costumavam simplesmente emular uma folha de papel, agora, façam algo sofisticado para justificar sua existência. Graças ao HTML5, junto com inovações no JavaScript e CSS, a lógica interativa é uma estratégia padrão para a programação Web, aplicativos bem desenvolvidos estão em todos os lugares. Tudo o que é necessário são algumas tags extras para reescrever o software em forma de página Web.
Pelo menos essa é a visão. E as pessoas têm aceitado ela. Gerentes de TI adoram a promessa do HTML5 e da nuvem, pois isso significa instalar um aplicativo no desktop – o navegador – e esquecer todo o resto. Os programadores o amam porque o HTML5 é, muitas vezes, tão simples como colocar algumas tags nos locais corretos, apesar de que o CSS pode, ocasionalmente, nos enlouquecer. Os contadores o adoram porque os Web Designers são mais baratos e mais abundantes do que os programadores C++. Administradores estratégicos o adoram, pois eles não precisam pedir permissão aos fabricantes de smartphones a fim de entrarem na loja Web deles.
É claro que todos nós sabemos que esta visão nasceu muito antes do burburinho do HTML5. Apenas levamos mais tempo para compreender o sonho que os criadores originais do JavaScript criaram, no qual todas as páginas Web seriam aplicativos interativos. E as técnicas em utilização são uma mistura do que há de novo, e do que já existia muito antes de o padrão HTML5 crescer tanto. O resultado são aplicativos, e suítes de aplicativos, que oferecem a maior parte das funcionalidades que um negócio iria querer.
Vejamos, a seguir, como sete poderosos aplicativos estão implementando a visão do HTML5 e como um famoso caluniador perdeu seu amor pela coisa mais importante da Web. Todos são bons exemplos de como tirar o máximo do HTML5, Javascript e do CSS, enquanto se evita as duras verdades de depender de tecnologias Web para entregar seu valioso aplicativo aos usuários.
1 – Zoho
Existem pelo menos 33 aplicativos na coleção Zoho. Alguns são aplicativos básicos de produtividade, como um processador de texto, e outros, como o aplicativo Zoho CRM, são mais semelhantes a bases de dados estruturadas para armazenar informações sobre clientes e usuários. O Zoho encontrou de forma sábia um caminho para trabalhar com o Google Apps, assim você pode utilizar o melhor de ambas coleções.
As ferramentas do Zoho dependem em muitas partes da especificação HTML5, mas não tanto quanto você imagina. As ferramentas de edição fazem a maior parte do trabalho de layout, utilizando regras CSS cuidadosamente criadas. A lógica de edição é toda tratada pelo código do Zoho, e eu não consegui encontrar a nova tag de conteúdo HTML5 editável em nenhum dos documentos que olhei. Se o conjunto de características é complexo, pode ser mais fácil não confiar no navegador para lidar com a edição.
Vários aplicativos Zoho abrem bases de dados utilizando o armazenamento local ou a API de armazenamento de sessão. Eles podem empurrar pares de chave/valor para utilização posterior.
Outras partes do conjunto de ferramentas do HTML5 são óbvias. O criador de formato lhe permite arrastar e soltar elementos nos locais desejados. Os dados, no entanto, parecem estar utilizando seus próprios ganchos internos em vez das novas ferramentas para validação de formulários.
2 – Google Docs
Para mim, o momento de definição veio quando editei um documento concorrentemente com alguém em algum lugar distante. Nossas mudanças fluíram entre nós e o trabalho foi feito. O Google Docs não oferece tantas ferramentas como o Microsoft Office, mas sua integração com o Gmail agiliza o inicio da utilização da alternativa online do Google ao Office.
A maior parte do aplicativo parece utilizar HTML básico para fazer todo o trabalho. As tabelas, textos e figuras são dispostos com o HTML, e cliques do mouse controlam as ações. O armazenamento local é alocado, mas não houve muitos pares de chaves/valores que pude encontrar na base de dados de meu navegador após uma utilização extensiva.
A Google é conhecida por construir muitas de suas ferramentas baseadas em Web com o Google Web Toolkit (Kit de Ferramentas Google Web), que traduz todo o conteúdo Java em JavaScript. Ela é bem focada para trabalhar com muitos navegadores, incluindo alguns de gerações anteriores. Ainda pode demorar até que o Google comece a depender do HTML5. Isto é um pouco irônico, dado que o Google Chrome, muitas vezes, possui uma das melhores pontuações no HTML5Test (Teste HTML5), uma página de internet que verifica o desempenho de um navegador.
3 – Presentation.js e outros aplicativos para slides
Existem mais de meia dúzia de bibliotecas HTML5 para criar conjuntos de slides em HTML, em vez de utilizar o PowerPoint, incluindo a Presentation.js, Impress.js, Fathom.js, reveal.js e o CSSS. As imagens e textos são exibidos e rotacionados pela tela, fazendo com que slides comuns do PowerPoint tenham uma aparência entediante e fora de moda. Se seu público dormir, será sua culpa.
O núcleo do programa utiliza HTML básico para exibir seus slides em DIVs, dando coordenadas absolutas. À medida que você navega através do programa, ele utilizará as transformações do WebKit para modificar o ponto de vista desses DIVs por meio do deslocamento, giro ou até mesmo da rotação em 3D. Todas as novas adições HTML5 ao motor de layout do CSS e ao objeto de tela estão disponíveis para utilização na criação de seus slides.
A abordagem é surpreendentemente simples para algo que aparenta ser tão impressionante. Caso você possa escrever sua mensagem em HTML utilizando as fontes e tags padrão, o JavaScript fará o resto.
4 – Aviary
Criar um bom editor de texto em JavaScript e HTML é algo desafiador, mas criar um editor de fotos é algo ainda mais impressionante. Muitas das ferramentas importantes para correção de fotos estão disponíveis como botões em um aplicativo que simplesmente é executado em seu navegador. O Photoshop pode custar centenas de dólares, mas o Aviary possibilita a maior parte das ferramentas que uma pessoa normal utiliza, por quase nada.
O Aviary utiliza o objeto de tela do HTML5, uma adição surpreendentemente complicada ao HTML. O padrão oferece as formas básicas de escrever textos ou linhas, e vários aplicativos web utilizam essas características para desenhar gráficos. Mas, debaixo de tudo isso, existe uma vasta coleção de ferramentas para trabalhar com pixels individualmente. Isto é o que o Aviary utiliza para algumas das melhorias mais sofisticadas.
5 – Scribd
O Scribd começou como um elaborado aplicativo em Flash para exibir documentos. Seu objetivo era tornar-se o repositório líder mundial para documentos na internet, e apenas o Flash deu a ele o suporte de fonte e a precisa colocação necessária para renderizar de forma precisa a vasta gama de documentos que o mundo já produziu.
Duas características principais possibilitaram que o Scribd duplicasse muito disso através da tela e fonte do HTML5. As melhorias de fontes web possibilitaram que o Scribd capturasse melhor as fontes utilizadas nos documentos. Até recentemente, a maior parte dos navegadores tinha acesso apenas a alguns exemplos básicos de fontes do tipo serif, sans serif e mono espaçadas.
A tela melhorada do HTML5 possibilita que o Scribd desenhe essas letras e outros bitmaps em posições arbitrárias na tela. A versão em HTML5 do Scribd hoje é mais simples devido às incompatibilidades causadas pelo fato de que ter de utilizar um complemento Flash está fora de moda. As outras características do navegador também se aplicam aos documentos – o que não iria ocorrer ao depender do complemento Flash. Você pode, por exemplo, selecionar sentenças ou palavras diretamente com os cliques do mouse. Voilá. Documentos complexos agora são tratados como outros sites normais.
6 – HootSuite
Quando o grupo do HootSuite começou a construir uma plataforma para unir todas as redes sociais em nossas vidas, ele reconheceu que o HTML5 era a plataforma natural. O HootSuite utilizaria a Web para agregar a Web. A ferramenta resultante permite que você observe todas as suas redes sociais em apenas um site central, uma ferramenta que o HootSuite presenteia aos usuários normais e vende para empresas e usuários corporativos.
Os servidores do HootSuite coletam todos os seus dados sociais após utilizarem a autenticação OAuth para conectar com suas contas sociais. Os servidores enviam isto para seu navegador utilizando chamadas AJAX, e o layout do navegador faz o resto.
O aplicativo Web utiliza extensivamente a base de dados local de armazenamento de chaves/valores do HTML5 para guardar informações e limitar a quantidade de tráfego web. Isto é mais útil para usuários móveis ou qualquer um que esteja em um plano medido para conectar-se à internet.
7 – Angry Birds
Nós o conhecemos e o amamos como um aplicativo para seu iPad, mas você pode obter uma cópia de Angry Birds a partir do Google Chrome e pode executá-lo em seu desktop, por meio de um navegador. Existem até mesmo anúncios na parte superior da tela, igual a qualquer outro site normal.
Agora você pode brincar com seu navegador da mesma forma que faria com seu smartphone.
A envenenada tag de tela do HTML5 e suas várias linhas de operação são o coração do Angry Birds, assim como em muitos outros jogos HTML5, como o Atari Arcade, feito pela Microsoft. A rotina dá aos programadores tudo o que eles precisam para desenhar as artes do jogo. Muitas das antigas bibliotecas (tais como a biblioteca de física) no núcleo do Angry Birds que foram criadas para o Flash, estão sendo reescritas para possibilitar que aplicativos HTML5 desenhem na tela.
Tirar o Flash do jogo promete eliminar todos os glitches que apareceram quando o plugin Flash e o navegador não eram compatíveis.
E qual o problema com o aplicativo móvel do Facebook?
Alguns que investiram pesadamente no HTML5 estão recuando.
O CEO do Facebook, Mark Zuckeberg, chamou de um grande erro estratégico criar os produtos móveis do Facebook utilizando o HTML5. As soluções funcionaram, mas eram lentas e cheias de problemas, pois os navegadores simplesmente não eram rápidos o suficiente para lidar com todos os dados. Aplicativos nativos eram muito mais rápidos na tarefa de limitar a utilização de memória e, isso é, muitas vezes, a limitação mais importante para um programador trabalhando em uma plataforma móvel.
Os fãs do HTML5 reconhecem essas queixas, mas não é como se os aplicativos nativos sejam perfeitos, fáceis de criar e portáteis. A solução, eles dizem, é manter suas aspirações em xeque e utilizar o melhor das novas ferramentas. Não tente exibir milhares de triângulos em um jogo de tiro em primeira pessoa que funciona a partir do navegador. Trabalhe com as novas tags e melhorias de fundo tais como a base de dados local. Comece através de um editor simples e construa lentamente.
A vantagem do HTML5 é que você pode lançar novas ferramentas, uma por vez, sem pedir que o usuário passe por toda a celeuma de uma atualização.
