Windows Store Apps com JavaScript

Veja como dar os primeiros passos na construção de apps vendáveis para a Windows Store usando JavaScript.

Fique por dentro

Este artigo é muito útil para desenvolvedores que precisam desenvolver soluções para a Windows Store, utilizando a linguagem universal da web: o JavaScript. Aliado ao poder do HTML5 e do CSS3, você será capaz de dar seus primeiros passos no desenvolvimento de aplicativos que executam tanto no seu computador quanto nas plataformas móveis da Microsoft para Windows 8.1 ou superiores.

Veremos, através de exemplos práticos, como configurar nossos projetos, entender as estruturas de arquivos e diretórios, dinamizar nossas páginas, bem como importar bibliotecas externas, como o jQuery, e tirar proveito das mesmas.

Quando o iPhone foi lançado, em meados de 2007, seus aplicativos e a própria plataforma em si trouxeram uma série de inovações na forma como os usuários poderiam interagir com os smartphones (já comuns naquela época). Passamos a poder não só ter um mundo inteiro em nossas mãos, mas também ter um mundo que entende nossas próprias leis, fornecendo, por exemplo, feedbacks autoexplicativos aos usuários. Como exemplos desses feedbacks podemos citar um e-mail sendo sugado para lixeira (em efeito animado) quando excluído ou a tela saltando levemente ao passar dos dedos quando realizamos um scroll.

Quando o iPhone foi lançado, em meados de 2007, seus aplicativos e a própria plataforma em si trouxeram uma série de inovações na forma como os usuários poderiam interagir com os smartphones (já comuns naquela época). Passamos a poder não só ter um mundo inteiro em nossas mãos, mas também ter um mundo que entende nossas próprias leis, fornecendo, por exemplo, feedbacks autoexplicativos aos usuários. Como exemplos desses feedbacks podemos citar um e-mail sendo sugado para lixeira (em efeito animado) quando excluído ou a tela saltando levemente ao passar dos dedos quando realizamos um scroll.

Para os usuários mais jovens, que experienciam hoje altas tecnologias, essa progressão inicial pode não lhes ser comum, mas ela foi extremamente importante para definir os rumos que as tecnologias mobile atuais seguem no mercado, cada uma a seu modo, com propostas que visam atender os conceitos de design, usabilidade (UX), métricas, performance, entre outros.

O Windows, por grande tempo fora do mercado móvel, nunca apresentou nada semelhante, já que estivera focado em soluções de back-end, no próprio sistema operacional (e nas sucessivas tentativas de melhoria do mesmo), além de lidar com os primórdios do movimento de cloud computing. Hoje, com os aplicativos disponibilizados de forma convencional em uma loja, a Windows Store, podemos utilizar os seus apps em dispositivos móveis e também no próprio computador. A Microsoft finalmente constatou que a experiência do usuário importa, e muito. Por isso, foi criado um conjunto de princípios para a experiência final do usuário batizado de “Microsoft design style principles”, usado até hoje para diversas soluções visuais da empresa. Esses princípios de design, por sua vez, podem ser usados para construir aplicações para Windows Phone, Xbox Live, para o antigo Zune (para mídias digitais) e para os próprios websites da empresa, como o portal do Windows Azure. Vejamos a lista dos princípios em detalhes:

  1. Show pride in craftsmanship (mostre orgulho na excelência)
    a. Devote tempo e energia para coisas pequenas, que são, com frequência, vistas por muitos como meros detalhes, como o estilo usado em uma aplicação ou um efeito de transição de telas mais suaves, a fim de melhorar a usabilidade;
    b. Desenvolva a experiência do usuário para ser completa e polida em cada estágio.
  2. Do more with less (faça mais com menos)
    a. Resolva os problemas das distrações, não das novas descobertas. Deixe que as pessoas trabalhem no que elas amam fazer, pois assim irão explorar o resto;
    b. Crie uma experiência limpa e com propósito deixando apenas os elementos mais relevantes na pauta, assim as pessoas podem ser imersas no conteúdo.
  3. Be fast and fluid (seja rápido e fluido)
    a. Deixe que as pessoas interajam diretamente com o conteúdo e respondam a ações de forma rápida;
    b. Traga a vida para a experiência, crie um senso de continuidade e conte a história através do uso significativo do movimento.
  4. Be authentically digital (seja autenticamente digital)
    a. Tire o máximo de proveito sobre o meio digital. Remova as barreiras físicas para criar experiências que são mais eficientes e fáceis do que a realidade;
    b. Abrace o fato de que somos pixels numa tela. Desenhe com cores fortes, vibrantes e quebradiças e com imagens que vão além do mundo material.
  5. Win as one (vençam como um)
    a. Alavanque o ecossistema e trabalhem juntos com outros apps, dispositivos e sistemas para completar cenários para as pessoas;
    b. Encaixe-se no modelo UI para reduzir redundância. Tire vantagem do que as pessoas já sabem para prover um senso de familiaridade, controle e confidência.
Os princípios de design e estilo da Microsoft também são comumente chamados de Metro design principles.

Ao observar tais princípios de primeiro relance, tudo que podemos imaginar é o quão abstratos os mesmos podem parecer em alusão a outras metodologias de mercado. Porém, quando analisamos os mesmos à luz da prática, desenvolvendo apps para a Windows Store, é que percebemos sua real importância e aplicabilidade. Por exemplo, tomemos como base o segundo princípio (faça mais com menos): uma das funcionalidades mais distintas dos apps da Windows Store é a ausência de bordas e barras que rodeiam o corpo dos mesmos. Ironicamente, um app da Windows Store é um app Windows sem as janelas, já que os apps são sempre criados e apresentados em modo full-screen no Windows 8. Essa ausência de cromo facilita o trabalho de concentração no conteúdo da aplicação. Outro exemplo são as duas versões do Internet Explorer presentes no Windows 8: uma versão desktop (como já tínhamos) e uma versão para Windows 8 que segue os princípios de design e estilo da Microsoft. Ao usar essa última, tudo que vemos é a página web, que é o foco da aplicação antes de mais nada.

Funcionalidades dos apps da Windows Store

Os apps da Windows Store são aplicações que são desenhadas para executar no Windows 8 (e superiores) ou no sistema operacional Windows RT. Todas elas têm um conjunto comum de funcionalidades, a saber:

  • Suporte a teclado, mouse, touch e stylus: umas das características mais interessantes desses apps são seus tiles (blocos) autorredimensionáveis, botões e o uso generoso de espaços em branco, de modo que toda a sua UI seja criada para tornar os apps amigáveis ao toque de dedos grandes." [...] continue lendo...

Artigos relacionados