Portal GSTI
Portal GSTI

PublicarCadastre-seLogin
Menu
foto de
Fernando Palma

Tutorial Google Web Design

Saiba como Utilizar o Google Web Designer e Assista um Vídeo Tutorial

O Google Web Designer é uma ferramentafree para Design

A possibilidade de usar serviços e ferramentas gratuitas é com certeza algo que todo mundo gosta. Usar serviços e ferramentas de qualidade também!

Quando estas duas características se juntam então, é maravilhoso! Não é nenhuma novidade que este é o caso dos serviços e ferramentas que são disponibilizados hoje pela empresa Google: muito do que é desenvolvido é livre e de excelente performance / qualidade.

Neste post apresento uma das ferramentas da Google: o Google Web Designer. A seguir, falo um pouco sobre a o aplicativo, sobre suas funcionalidades básicas, e indicamos um video tutorial bem objetivo (cerca de 26 minutos).

Sobre o Google Web Designer

Este software de Web Design foi lançado em Setembro de 2013 pela Google, a princípio para a criação de anúncios dinâmicos usando HTML5 , CSS3 e JavaScript .

Apesar de ter este objetivo específico (criar anúncios), a ferramenta está sendo aproveitada por seus usuários para criar sites dinâmicos com animações e elementos 3D . No vídeo que disponibilizamos a seguir, o instrutor explica que o software permite a customização das dimensões dos arquivos, garantindo a flexibilidade de seu uso, apesar de algumas limitações.

O software pode ser usado tanto por quem não tem intimidade com programação e deseja criar conteúdos interativos como também profissionais experientes com programação, graças a possibilidade de trabalhar com códigos HTML5 , CSS3 e Javascript .

Obs.: apestar de poder ser utilizado para criar páginas, o Google Web Designer parece não abrir páginas que não foram criadas pelo próprio aplicativo.

Download da ferramenta

Antes de começar a ler sobre as funcionalidades e aprender com o vídeo tutorial, é importante que instale a ferramenta:

Como Usar Google Web Designer: Tutorial Resumido

Instalação do Google Web Designer

O processo de instalação é simples. O link disponibilizado na página do Google Web Designer faz a instalação automaticamente e cria o atalho na área de Trabalho (no caso do Sistema Operacional Windows).

Acessando o Software

Ao acessar o programa e criar um novo arquivo, você irá visualizar alguns padrões que devem ser escolhidos. Caso Você deseje criar realmente um anúncio, deve escolher o formato, tais como: Banner , Ampliável e Intersticial.

  • Banner : este padrão permite que você crie um banner com qualquer dimensão padrão de anúncios do Google, ou mesmo customize a dimensão pretendida.
  • Ampliável : escolha este padrão cado deseje criar um anúncio com tamanho ajustável, o que é interessante para que o anúncio se ajuste a dispositivos móveis.
  • Intersticial : caso deseje criar anúncios com animações.

Caso deseje criar uma página qualquer em vez de um anúncio , deve escolher a opção "Outros" para criar um arquivo em branco. Existem as opções #HTML, #JavaScript, XML e #CSS.

Perceba que você pode escolher onde irá salvar seu arquivo e optar entre modo de animação rápido ao avançado (este segundo, habilita todas as funcionalidades).

Menus e Funcionalidades

  • Em Editar , as funções básicas de edição, tais como copiar, recortar, colar, além de alguns recursos de animação.
  • Em Visualizar , você pode conferir alguns recursos especiais, tais como:
    • Visualizar circunscritos, para uma área específica que você delimitou
    • Ajustar a grade e objetos
    • Exibir grade 3D
    • Visualizações: frontal, superior e lateral para ver o trabalho que você está criando sob diversas perspectivas
  • Tópicos de Ajuda, para consultar o uso das funções e conhecer atalhos

    Além do menu principal, você terá a disposição:

    • Uma barra de Funções na parte superior da tela, com as opções:
      • Alinhar (aresta superior, centro vertical, etc.).
      • Distribuir (aresta superior, aresta inferior, etc.)
      • Mover (a diante, para trás, etc.)
    • À direita, você encontra os painéis:
      • Um painel de cores
      • Propriedades, onde você pode selecionar diversos elementos (body, div, field), e trabalhar suas atribuições, tais como posição, tamanho e estilos)
      • Componentes, onde você pode atribuir a interatividade do usuário com o elemento criado: como irá reagir, qual será a área de toque, definir uma navegação de galeria, áudio , entre outros componentes.
      • CSS: onde poderá trabalhar estilos.
    • Na barra inferior, poderá optar pela visualização da página (visualização do Desing), Visualização do Código, e poderá testar a visualização em diferentes navegadores: Chrome, Firefox e Internet Explorer.
    • Abaixo desta barra inferior, você visualiza o painel de animação, onde pode adicionar quadros ou remover quadros e ter as opções de "reproduzir" e "parar" para conferir como está ficando a sua animação. Perceba que existe a opção de "modo avançado" com mais alternativas.
    • Na esquerda, você encontra uma barra de ferramentas: seleção, alternar objetos 3D, converter objetos 3D, tags, caneta , texto, retângulo, alternar cenário 3D, preencher, traço, ferramenta de mão e ferramenta de zoom.

    Alguns destaques da Ferramenta

    Apesar de não disponibilizar todos elementos que são utilizados por profissionais em Web Design, a ferramenta pode ser considerada impressionante, por disponibilizar desde a versão beta propriedades como sliders para imagens e àreas de toque.

    Sliders para imagens : é possível criar tanto anúncios quanto páginas que apresentam desverias imagens de forma interativa.

    Áreas de toque : funcionalidade é essencial para criação de banners, páginas ou aplicativos que usam touchscreen .

    Vantagens e Desvantagens

    Vantagens :

    • É grátis.
    • Fácil de criar animações
    • Ótimo para quem precisa criar algo de forma prática, rápida e sem perder a qualidade

    Desvantagens :

    • Não é uma aplicação completa para web design profissional
    • Não é possível abrir e editar arquivos HTML não criados na própria ferramenta

    Exemplo de Utilização

    No vídeo a seguir, disponibilizado pelo HX Tutors , você pode ver um exemplo de utilização, onde o autor cria um elemento e faz a demonstração da ferramenta, alternando entre a visualização do design e a visualização do código.

    Vídeo Tutorial Google Web Designer por HX Tutors

    Continue estudando web design e ferramentas relacionadas:

    Links Externos:

    COMPARTILHE

    Fernando Palma
    Fernando Palma207 Seguidores 574 Publicações Consultor de TI, CEO
    Seguir
    Sou fundador e CEO do Portal GSTI, Consultor, professor e instrutor em Governança de TI e Gestão TI. Graduado em SI, mestrando em administração, Certificado ITIL Expert, ITIL Manager, COBIT, OCEB, ISO 20k, e ISO 27k.

    Comentários