O App Designer, parte do Intel® XDK NEW, é uma ferramenta WYSIWYG para edição de layouts, focada na criação de interfaces de usuário. As suas principais características são:
- Múltiplos frameworks de UI - O App Designer atualmente suporta App Framework, Bootstrap 3, jQuery Mobile, e Topcoat.
- Ciclo completo de edição - Inicie a criação dos seus apps no App Designer, alterne para o editor (na aba DEVELOP do Intel XDK) para modificar seu código diretamente, e volte ao App Designer.
- Design responsivo - Crie designs para seus apps que se adaptam automaticamente para serem utilizados em diversos tipos de dispositivos com tamanhos diferentes de tela.
- Containers Animados - Aproveite as sidebars e crossbars animadas em seus apps. Mais controles animados chegando em breve.
Vídeo para início rápido
Este vídeo curto mostra como o App Designer se encaixa no workflow do Intel® XDK NEW, e mostra como:
- Criar um novo projeto no Intel XDK.
- Selecionar um framework de UI.
- Ciclo completo de edição entre o App Designer e o editor de código.
- Como fazer alterações no CSS do seu app.
Você também pode abrir diretamente o vídeo, independente dos tutoriais.
Tutorial e vídeo sobre controles
Depois que você completar este tutorial, você será saberá como:
- Inserir controles no workspace.
- Configurar as propriedades dos controles.
- Mover os controles de uma área no workspace para outra.
O tutorial conta com um vídeo. Caso você queira assistir ao vídeo sem seguir o tutorial, clique aqui.
Tutorial e vídeo sobre layout de linhas e colunas
Depois que você completar este tutorial, você saberá como:
- Inserir colunas no workspace e ajustar sua largura.
- Remover colunas do workspace e mover colunas de uma área do workspace para outra.
- Adicionar linhas ao workspace e mover controles de uma linha para outra.
Este tutorial contém um vídeo. Você pode assistir ao vídeo sem seguir o tutorial.
Tutorial e vídeo sobre design de layouts responsivos
Depois que você completar este tutorial, você saberá como:
- Alterar o formato e orientação do workspace.
- Inserir pontos de corte para criar design de apps que automaticamente se adaptam a diversos tipos de dispositivos e formatos de tela.
- Ajustar e remover pontos de corte.
Este tutorial contém um vídeo. Você pode assistir ao vídeo sem seguir o tutorial.
Tutorial e vídeo sobre estilos
Depois que você completar este tutorial, você saberá como:
- Criar e configurar estilos para alinhar o texto de um label em diferentes controles com tamanhos de texto distintos.
- Aplicar estilos existentes a outros controles.
- Criar e configurar estilos que alteram o look-and-feel dos elementos de corpo e página.
Este tutorial contém um vídeo. Você pode assistir ao vídeo sem seguir o tutorial.
Tutorial e vídeo sobre media queries
Depois que você completar este tutorial, você saberá como:
- Inserir pontos de corte.
- Criar media queries para produzir estilos adaptativos que personalizam seu app para diversos tamanhos de tela.
Este tutorial contém um vídeo. Você pode assistir ao vídeo sem seguir o tutorial.
Tutorial e vídeo sobre containters animados
Depois que você completar este tutorial, você saberá como:
- Adicionar containers animados ao workspace, configurar seu estado inicial (aberto/fechado) e populá-los com outros controles.
- Definir gatilhos para disparar a animação.
- Inserir uma borda visível e configurável nos containers animados para que o containter animado possa ser aberto quando estiver fechado.
Este tutorial contém um vídeo. Você pode assistir ao vídeo sem seguir o tutorial.
Vídeo de posicionamento de layout
Este vídeo curto mostra como utilizar wrapping, centralização, margens, padding, espaçamento, barras laterais fixas e cabeçalhos e rodapés fixos para fazer os ajustes finos no layout do seu app.
Você pode abrir diretamente o vídeo independentemente dos tutoriais.
Vídeo sobre imagens
Este vídeo curto mostra como:
- Aplicar os ícones built-in do framework de UI aos controles.
- Criar botões e botões sprite através de imagens.
- Colocar imagens diretamente no fluxo do layout.
- Adicionar, alinhar e ajustar legenda em imagens.
- Adicionar e posicionar imagens de fundo.
Você pode abrir diretamente o vídeo independentemente dos tutoriais.
Playlist de vídeos
Clique aqui para uma lista completa e acesse todos os vídeos do App Designer que estão disponíveis.