Apresentando o

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

Resumo
Este material tem como objetivo apresentar as funes bsicas da ferramenta
bootstrap studio tais como menus, atalhos, etc.

Matheus Lima
matxeyclima@gmail.com
 1

Sumrio
1- Identificao ...................................................................................................................... 2
2- A licena ............................................................................................................................. 2
2.1- Benefcios ........................................................................................................................ 2
3- Demo online ....................................................................................................................... 3
4- Apresentao da Tela Inicial ......................................................................................... 3
4.1- Opes de Inicializao................................................................................................. 4
5- Novo Design ...................................................................................................................... 5
6- Tela Principal ..................................................................................................................... 6
6.1- Barra de acesso rpido.................................................................................................. 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- Opo de componentes online................................................................................... 14
6.6- Painel de Overview (Viso Geral) .............................................................................. 15
6.7- Painel de opes .......................................................................................................... 16
6.8- Painel Design ................................................................................................................ 17
6.9- Editor .............................................................................................................................. 18
 2

1- Identificao

Bootstrap Studio um aplicativo de desktop que ajuda a criar

belos sites. Ele vem com um grande nmero de componentes internos, que
voc pode arrastar e soltar para montar pginas da Web responsivas. Ele
construdo em cima da estrutura Bootstrap extremamente popular, e exporta
HTML limpo e semntico. Milhares de desenvolvedores e designers usam
todos os dias.

2- A licena

Bootstrap Studio um aplicativo de desktop que funciona

totalmente offline. No h pagamentos mensais, limites de uso ou taxas
contnuas. Voc compra-o uma vez e possui-o para sempre.

Uma

2.1- Benefcios
O aplicativo multiplataforma, ento voc
pode us-lo em qualquer sistema
operacional

Use uma nica licena para at 3

computadores que voc possui

1 ano de upgrades gratuitos

25 Dlares
:

Universidade Estadual da Paraba

Centro de Cincias e Tecnologia
Departamento de Computao
 3

3- Demo online
Voc pode acessar um demo online atravs do seguinte link:

https://bootstrapstudio.io/

4- Apresentao da Tela Inicial

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

disponibilizar trs opes de inicializao.

Opes de
Inicializao

Figura 1. Tela Inicial

Universidade Estadual da Paraba

Centro de Cincias e Tecnologia
Departamento de Computao
 4

4.1- Opes de Inicializao

Guia de
introduo

Opes
Inicializao

Abrir um
Criar novo
Design
Design
existente

Diagrama 1. Opes de Inicializao

Getting Started Guide: Fornece ao usurio um guia de inicializao onde ir

demonstrar funcionalidades da ferramenta Bootstrap Studio

Create new Design: Permite que o usurio crie um projeto de forma

personalizada ou escolha um modelo preexistente

Open Existing: Caso o usurio j tenha feito algum trabalho est opes
permite que ele abra este projeto existente

Universidade Estadual da Paraba

Centro de Cincias e Tecnologia
Departamento de Computao
 5

5- Novo Design
Ao escolher a opo New Design a tela abaixo ser apresentada onde o
usurio dever definir um nome para o seu projeto e escolher o template
desejado o Bootstrap Studio oferece, alm da criao padro 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 usurio pode informar o nome que ser dado ao seu projeto.

Template: Permite ao usurio escolher entre iniciar um projeto em branco ou

escolher um modelo predefinido.

Universidade Estadual da Paraba

Centro de Cincias e Tecnologia
Departamento de Computao
 6

6- Tela Principal

O Bootstrap Studio fornece ao usurio um ambiente de trabalho bem

sofisticado com diversas ferramentas e uma tima disposio 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 painis esquerda - Componentes e Viso Geral; Dois
painis direita - Opes e Design, rea central, que detm a rea de ao e
abaixo o editor que permite editar os arquivos html, css e js.

Universidade Estadual da Paraba

Centro de Cincias e Tecnologia
Departamento de Computao
 7

6.1- Barra de acesso rpido

Figura 4. Barra de acesso Rpido

New: Cria um novo Design

Open: Abre um projeto existente

Save: Salva o projeto atual

Export: Permite a exportao do projeto.

Settings: Permite configurar o Design

Undo: Retrocede a ltima alterao

Redo: Refazer uma alterao apagada recentemente

Preview: Permite visualizar uma prvia da pgina em desenvolvimento

Publish: Permite o usurio publicar o seu projeto

Universidade Estadual da Paraba

Centro de Cincias e Tecnologia
Departamento de Computao
 8

6.2- Preview

O Bootstrap Studio tem um recurso poderoso chamado Preview. Com

ele, voc pode abrir seu projeto em vrios navegadores e dispositivos da web,
e todas as alteraes feitas no aplicativo sero mostradas instantaneamente
em qualquer lugar.

Figura 5. Ilustrao do preview

Universidade Estadual da Paraba

Centro de Cincias e Tecnologia
Departamento de Computao
 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 criao de um domnio

Universidade Estadual da Paraba

Centro de Cincias e Tecnologia
Departamento de Computao
 10

Figura 8. Tela de configuraes de websites

Universidade Estadual da Paraba

Centro de Cincias e Tecnologia
Departamento de Computao
 11

6.4- Painel de componentes

No painel de componentes o usurio tem acesso aos componentes visuais os

quais iram montar toda a pgina HTML.

Figura 9. Tela de componentes

Universidade Estadual da Paraba

Centro de Cincias e Tecnologia
Departamento de Computao
 12

6.4.1- Como utilizar os componentes

Selecionar o
componente
desejado

Figura 10. Painel de componentes

Pr-vizualizao

Universidade Estadual da Paraba

Centro de Cincias e Tecnologia
Departamento de Computao
 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. Sequncia de insero de componentes

Universidade Estadual da Paraba

Centro de Cincias e Tecnologia
Departamento de Computao
 14

6.5- Opo de componentes online

Nesta guia o usurio poder pesquisar diversos componentes online e realizar

o download onde ficaram disponveis para o uso em qualquer projeto.

Figura 11. Painel de componentes online

Universidade Estadual da Paraba

Centro de Cincias e Tecnologia
Departamento de Computao
 15

6.6- Painel de Overview (Viso Geral)

Este painel permite que o desenvolvedor visualize toda a estrutura da

pginaHTML do seu projeto.

Figura 12. Painel Overview

Estrutura da
pgina HTML

Universidade Estadual da Paraba

Centro de Cincias e Tecnologia
Departamento de Computao
 16

6.7- Painel de opes

Este painel permite ao usurio visualizar opes e fazer alteraes no

componente selecionado.

Figura 13. Painel de Opes

Universidade Estadual da Paraba

Centro de Cincias e Tecnologia
Departamento de Computao
 17

6.8- Painel Design

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

Figura 14. Painel Design

Universidade Estadual da Paraba

Centro de Cincias e Tecnologia
Departamento de Computao
 18

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

Figura 15 - Editor

Universidade Estadual da Paraba

Centro de Cincias e Tecnologia
Departamento de Computao