Quando menos se espera, o Google anuncia algum app ou software no mercado que promete revolucionar algumas áreas. Desta vez, a novidade é o Google Web Designer, uma ferramenta voltada para designers e para programadores, que serve como um auxílio para criação de códigos em HTML5. Com ele, o usuário pode gerar códigos html e visualizar o seu resultado imediatamente. Por outro lado, designers também podem utilizar a ferramenta para a elaboração de banners e de páginas, uma vez que o Google Web Designer gera todo o código automaticamente.
Afinal, o que é HTML5?
Já faz um tempo que o HTML5 foi determinado como o futuro padrão da W3C – órgão responsável por gerenciar as regras para websites. A mais nova versão da linguagem de marcação de hipertexto altera o modo como os usuários e desenvolvedores visualizam páginas e aplicativos para web.
Infelizmente, alguns navegadores ainda não oferecem total compatibilidade com os recursos do HTML5, o que distancia a efetivação desta versão como a principal ferramenta dos desenvolvedores e esse é um dos pontos focados pelo novo software da Google.
Com versões para Windows e Mac, o Google Web Designer promete dar um novo passo para o desenvolvimento de páginas e de banners utilizando HTML5. Apesar de estar em fase beta, ele suporta todos os novos recursos da linguagem, como o suporte a mídias – evitando que músicas e vídeos sejam carregados por plugins extras em páginas web, por exemplo – e a canvas, fazendo com que retângulos e outros objetos sejam gerados apenas através do código html.
Google Web Designer para Windows
Como instalar o Google Web Designer para Windows
O processo de instalação do Google Web Designer em sua versão para Windows é bem simples. O arquivo disponibilizado serve como um downloader, baixando todos os arquivos referentes ao Web Designer e realizando a instalação automaticamente. Depois que o processo for finalizado, basta buscar pelo atalho do programa criado no Menu Iniciar – ou Painel, no caso do Windows 8.
Como usar o Google Web Designer
Todas as funções do software funcionam de forma idêntica nas versões para Mac e Windows. O programa ainda está em fase de testes e alguns erros podem ser encontrados durante sua utilização. Com o programa carregado, clique na área central para ter acesso à janela de edição, sendo necessário criar um novo arquivo para iniciar o processo de edição de sua página ou de um banner.
Para isso, utilize o atalho Ctrl + N do teclado, ou selecione a opção "Novo Arquivo", localizada na opção "Arquivo" do Menu Superior. Uma nova janela será exibida, com tipos de arquivo sendo exibidos na aba lateral, separados em duas categorias. A primeira categoria – Anúncios do Google – é voltada para usuários que desejam utilizar HTML5 para confeccionar os seus anúncios feitos através do Adwords – ferramenta de publicidade do Google.
Nesta área, você pode escolher entre Banner, poderá definir todas as dimensões padrões de anúncios do Google – assim como customizar sua própria dimensão. "Ampliável", permite a idealização de um banner com tamanho ajustável, ideal para quem deseja fazer apenas um banner padrão que irá se adaptar a outras dimensões em telas distintas. Por fim, existe a opção de um Anúncio Intersticial, com a possibilidade de realizar animações.
HTML, CSS, JavaScript e XML
A outra categoria disponibilizada nesta janela se chama “Arquivo em Branco”. Esta parte é voltada para Web Designers e programadores, onde é possível selecionar entre as opções HTML, CSS, Javascript e XML. Em HTML, assim como nas opções relacionadas a anúncios, é possível idealizar a arte da página para que o código HTML5 da mesma seja gerado, ideal para web designers com conhecimento restrito na linguagem de marcação.
Já as outras opções – CSS, JavaScript e XML – já são específicos para os que possuem conhecimento nessas linguagens e desejam utilizar o Google Web Designer como um editor de códigos para Web – talvez como um substituto mais simples para outros nomes do mercado. Infelizmente, ele não oferece recursos especiais para estas opções, permitindo no máximo que o usuário comente uma área.
Modelos de sites para HTML5
O Google Web Designer disponibiliza as principais ferramentas artísticas para a idealização de um projeto, destacando-se a ferramenta caneta, bastante conhecida daqueles que utilizam programas como o Photoshop ou o Illustrator. Através dela é possível desenhar formas sem nenhum tipo de limite, já que todas serão exibidas como código, uma vez que o HTML5 suporta canvas.
As ferramentas básicas estão disponibilizadas na lateral esquerda do software, sendo importante focar também na modelagem 3D que pode ser feita dentro do Web Designer, ferramenta que pode ser utilizada largamente por aqueles que pretendem idealizar jogos e aplicativo um pouco mais complexos, mesmo que usando apenas HTML5 e alguns elementos JavaScript.
Animações com HTML5
Outra ferramenta de grande importância para quem está começando a trabalhar com o Google Web Designer é a ferramenta de animação. Este é um ponto bastante focado pelos defensores da nova versão da linguagem, já que isso pode dispensar a utilização do Flash – ou mesmo do Silverlight e da plataforma Unity – para a utilização desse tipo de recurso.
HTML5 para Web Designers
Em suma, o Google Web Designer é realmente uma ferramenta para web designers com pouco – ou nenhum – conhecimento em HTML. Ainda em fase beta, nota-se a ausência de alguns recursos para aqueles que já estão familiarizados com outros softwares gráficos, como as famosas linhas guia, que ajudam bastante no processo de diagramação de uma página, embora ele possua ferramentas para alinhamento de objetos.
Um ponto interessante pode ser visualizado quando a ferramenta de etiqueta é escolhida, já que ela disponibiliza recursos específicos de HTML – acessados através de um menu superior. Entre as opções, você poderá incluir DIVs, imagens e vídeos, além de definir o raio de “curvatura” dos cantos de um elemento – o border-radius.
Avaliação Zigg
Mesmo para uma versão de testes, o Google Web Designer já se apresenta como uma ferramenta impressionante, trazendo propriedades como Sliders para imagens, mapas e até áreas de toque – para os que idealizam aplicativos touchscreen. Estas ferramentas juntas – e após aperfeiçoadas – podem desbancar muitos outros apps do tipo, embora o Web Designer ainda não tenha elementos voltados para aqueles que já são profissionais na área.