Apresentando o

Bootstrap Studio
Um aplicativo desktop para criar websites responsivos utilizando o framework
Bootstrap.

Resumo
Este material tem como objetivo apresentar as funções básicas da ferramenta
bootstrap studio tais como menus, atalhos, etc.

Matheus Lima
matxeyclima@gmail.com
 1

Sumário
1- Identificação ...................................................................................................................... 2
2- A licença ............................................................................................................................. 2
2.1- Benefícios ........................................................................................................................ 2
3- Demo online ....................................................................................................................... 3
4- Apresentação da Tela Inicial ......................................................................................... 3
4.1- Opções de Inicialização................................................................................................. 4
5- Novo Design ...................................................................................................................... 5
6- Tela Principal ..................................................................................................................... 6
6.1- Barra de acesso rápido.................................................................................................. 7
6.2- Preview............................................................................................................................. 8
6.3- Publish .............................................................................................................................. 9
6.4- Painel de componentes ................................................................................................... 11
6.4.1- Como utilizar os componentes ............................................................................ 12
6.4.2- Sequencia para inserir um componente ............................................................ 13
6.5- Opção de componentes online................................................................................... 14
6.6- Painel de Overview (Visão Geral) .............................................................................. 15
6.7- Painel de opções .......................................................................................................... 16
6.8- Painel Design ................................................................................................................ 17
6.9- Editor .............................................................................................................................. 18
 2

1- Identificação

Bootstrap Studio é um aplicativo de desktop que ajuda a criar

belos sites. Ele vem com um grande número de componentes internos, que
você pode arrastar e soltar para montar páginas da Web responsivas. Ele é
construído em cima da estrutura Bootstrap extremamente popular, e exporta
HTML limpo e semântico. Milhares de desenvolvedores e designers usam
todos os dias.

2- A licença

Bootstrap Studio é um aplicativo de desktop que funciona

totalmente offline. Não há pagamentos mensais, limites de uso ou taxas
contínuas. Você compra-o uma vez e possui-o para sempre.

Uma

2.1- Benefícios
O aplicativo é multiplataforma, então você
pode usá-lo em qualquer sistema
operacional

Use uma única licença para até 3

computadores que você possui

1 ano de upgrades gratuitos

25 Dólares
:

Universidade Estadual da Paraíba

Centro de Ciências e Tecnologia
Departamento de Computação
 3

3- Demo online
Você pode acessar um demo online através do seguinte link:

https://bootstrapstudio.io/

4- Apresentação da Tela Inicial

Ao clicar no aplicativo a seguinte tela será apresentada, esta tela irá

disponibilizar três opções de inicialização.

Opções de
Inicialização

Figura 1. Tela Inicial

Universidade Estadual da Paraíba

Centro de Ciências e Tecnologia
Departamento de Computação
 4

4.1- Opções de Inicialização

Guia de
introdução

Opções
Inicialização

Abrir um
Criar novo
Design
Design
existente

Diagrama 1. Opções de Inicialização

Getting Started Guide: Fornece ao usuário um guia de inicialização onde irá

demonstrar funcionalidades da ferramenta Bootstrap Studio

Create new Design: Permite que o usuário crie um projeto de forma

personalizada ou escolha um modelo preexistente

Open Existing: Caso o usuário já tenha feito algum trabalho está opções
permite que ele abra este projeto existente

Universidade Estadual da Paraíba

Centro de Ciências e Tecnologia
Departamento de Computação
 5

5- Novo Design
Ao escolher a opção New Design a tela abaixo será apresentada onde o
usuário deverá definir um nome para o seu projeto e escolher o template
desejado o Bootstrap Studio oferece, além da criação padrão de um Design,
templates predefinidos com o intuito de facilitar e agilizar o trabalho do
desenvolvedor.

Nome do projeto

Modelos
predefinidos

Figura 2. Criar novo Design

Name: O usuário pode informar o nome que será dado ao seu projeto.

Template: Permite ao usuário escolher entre iniciar um projeto em branco ou

escolher um modelo predefinido.

Universidade Estadual da Paraíba

Centro de Ciências e Tecnologia
Departamento de Computação
 6

6- Tela Principal

O Bootstrap Studio fornece ao usuário um ambiente de trabalho bem

sofisticado com diversas ferramentas e uma ótima disposição de componentes
na tela de forma que preze pela agilidade e comodidade na hora de
desenvolver seus websites.

Figura 3. Tela Inicial

A tela principal do Bootstrap Studio é dividida em 5 (cinco)

partes. Você tem dois painéis à esquerda - Componentes e Visão Geral; Dois
painéis à direita - Opções e Design, área central, que detém a área de ação e
abaixo o editor que permite editar os arquivos html, css e js.

Universidade Estadual da Paraíba

Centro de Ciências e Tecnologia
Departamento de Computação
 7

6.1- Barra de acesso rápido

Figura 4. Barra de acesso Rápido

New: Cria um novo Design

Open: Abre um projeto existente

Save: Salva o projeto atual

Export: Permite a exportação do projeto.

Settings: Permite configurar o Design

Undo: Retrocede a última alteração

Redo: Refazer uma alteração apagada recentemente

Preview: Permite visualizar uma prévia da página em desenvolvimento

Publish: Permite o usuário publicar o seu projeto

Universidade Estadual da Paraíba

Centro de Ciências e Tecnologia
Departamento de Computação
 8

6.2- Preview

O Bootstrap Studio tem um recurso poderoso chamado Preview. Com

ele, você pode abrir seu projeto em vários navegadores e dispositivos da web,
e todas as alterações feitas no aplicativo serão mostradas instantaneamente
em qualquer lugar.

Figura 5. Ilustração do preview

Universidade Estadual da Paraíba

Centro de Ciências e Tecnologia
Departamento de Computação
 9

6.3- Publish

Um recurso bastante útil é o publish(publicar) você pode publicar seu

site em um servidor disponibilizado pela equipe bootstrap.

Figura 6. Tela de gerenciamento dos Websites

Figura 7. Tela de criação de um domínio

Universidade Estadual da Paraíba

Centro de Ciências e Tecnologia
Departamento de Computação
 10

Figura 8. Tela de configurações de websites

Universidade Estadual da Paraíba

Centro de Ciências e Tecnologia
Departamento de Computação
 11

6.4- Painel de componentes

No painel de componentes o usuário tem acesso aos componentes visuais os

quais iram montar toda a página HTML.

Figura 9. Tela de componentes

Universidade Estadual da Paraíba

Centro de Ciências e Tecnologia
Departamento de Computação
 12

6.4.1- Como utilizar os componentes

Selecionar o
componente
desejado

Figura 10. Painel de componentes

Pré-vizualização

Universidade Estadual da Paraíba

Centro de Ciências e Tecnologia
Departamento de Computação
 13

6.4.2- Sequencia para inserir um componente

• Clique no componente e
1 mantenha-o pressionado.

• Arraste-o para a área central.

2

• Solte-o na área central desejada.

3

Diagrama 2. Sequência de inserção de componentes

Universidade Estadual da Paraíba

Centro de Ciências e Tecnologia
Departamento de Computação
 14

6.5- Opção de componentes online

Nesta guia o usuário poderá pesquisar diversos componentes online e realizar

o download onde ficaram disponíveis para o uso em qualquer projeto.

Figura 11. Painel de componentes online

Universidade Estadual da Paraíba

Centro de Ciências e Tecnologia
Departamento de Computação
 15

6.6- Painel de Overview (Visão Geral)

Este painel permite que o desenvolvedor visualize toda a estrutura da

páginaHTML do seu projeto.

Figura 12. Painel Overview

Estrutura da
página HTML

Universidade Estadual da Paraíba

Centro de Ciências e Tecnologia
Departamento de Computação
 16

6.7- Painel de opções

Este painel permite ao usuário visualizar opções e fazer alterações no

componente selecionado.

Figura 13. Painel de Opções

Universidade Estadual da Paraíba

Centro de Ciências e Tecnologia
Departamento de Computação
 17

6.8- Painel Design

Este painel permite visualizar todos os arquivos que fazem parte do website tais como páginas
HTML, folhas de estilo, arquivos JavaScript, fontes extras e imagens utilizadas.

Figura 14. Painel Design

Universidade Estadual da Paraíba

Centro de Ciências e Tecnologia
Departamento de Computação
 18

6.9- Editor
Este é o painel do editor. Isto é onde os editores para css, js e html são
mostrados.Você pode arrastar as guias ao redor para reordená-los.

Figura 15 - Editor

Universidade Estadual da Paraíba

Centro de Ciências e Tecnologia
Departamento de Computação