Este documento fornece uma introdução ao framework Bootstrap, incluindo: 1) Uma explicação do que é Bootstrap e quais são seus principais componentes. 2) Detalhes sobre como configurar e implementar Bootstrap na criação de sites. 3) Exemplos de como utilizar o sistema de grade responsivo e outros componentes como tipografia, botões e cards.

1. Bootstrap
Como criar sites atrativos com o

2. Olá! meu
nome é
Ocupação
Professora de Sistemas de Informação no IFRN
Pedrina
Graduação
Tecnóloga em Análise e Desenvolvimento de Sistemas, pelo
IFRN
Especialização
Especialista Web, pelo Daytona State College
Mestrado
Em Inovação em Tecnologias Educacionais, pelo IMD/UFRN

3. 06
PRINCÍPIOS BÁSICOS DE DESIGN
Reconhecendo padrões de design em um layout
web
TWITTER BOOTSTRAP
O que é e quais são seus componentes básicos
HANDS ON
Configurando e implementando o Bootstrap na
criação de um site
O que
vamos
aprender
hoje

4. A Internet
em
ascensão
Entre os serviços mais utilizados da
Internet está a web (World Wide
Web).
Ela consiste em um grande conjunto interligado de páginas
web criadas com a linguagem HTML.
Fonte: Centro Regional de Estudos para o Desenvolvimento da Sociedade da Informação (Cetic.br), 2021

5. Toda webpage é
constituída de
3 camadas
E é produto de um web design que
define sua arquitetura de informação

6. 11
Informação
Corresponde a todo conteúdo visíveldo site

7. 11
Apresentação
Torna o conteúdodo site mais atraente

8. 11
Lógica
Corresponde as regras e diretrizes comportamentais do site.

9. Arquitetura
de
Informação
CONTEÚDO
textos, imagens, gráficos, conteúdo em áudio
etc.; mapeamento das páginas ou telas; estrutura;
taxonomia; volume de informações.
USUÁRIOS
persona; necessidades; comportamento de
busca pela informação; experiência de uso;
tarefas que pretende executar na sua aplicação.
CONTEXTO
modelo de negócios; objetivos do projeto;
tecnologias e metodologias de desenvolvimento;
recursos (capital, pessoas, equipamentos, entre
outros); restrições.
A arquitetura da informação é a prática de decidir como
organizar as partes de alguma coisa de modo a torná-la
compreensível.

10. Antes Depois

11. Princípios de Design
O design é uma atividade técnica e criativa que busca a concepção,
elaboração, especificação e configuração de uma composição.
EQUILÍBRIO
Refere-se à distribuição de
pesos e forças dentro da
composição da página. O
posicionamento, o tamanho,
a proporção e a direção dos
elementos são alguns dos
fatores que influenciam no
equilíbrio.
DOMINÂNCIA
Ocorre quando um elemento
visual chama mais atenção
que outro. Por contraste é
possível realçar
determinadas áreas da
página, tornando-a dominante
na composição.
PROPORÇÃO
Ela auxilia na atribuição de
importância elementos uma
página. Elementos
proporcionalmente
dimensionados atribuem uma
hierarquia visual e o significado
aos elementos da página.
RITMO
Sensação de movimento
entre os elementos da
página que quando
articulados, são capazes
de guiar o movimento do
olho do usuário.
UNIDADE
Diz respeito a harmonia
dos elementos.
Sentimento de coesão em
uma obra formada por
diferentes partes.

12. Pode-se imaginar uma linha no centro da página e organizando os elementos de forma que o peso visual seja igual
em ambos os lados. Existem dois tipos de equilíbrio: equilíbrio simétrico e equilíbrio assimétrico.
Equilíbrio

13. Nem todos os elementos do site são iguais. Se houver algo em sua página que os visitantes devem notar primeiro,
a aplicação do princípio da dominância deve ser aplicado pelo uso de cores brilhantes, animação, tamanho ou
forma dos elementos
Dominância

14. Escolher o tamanho certo para os elementos vai além de simplesmente selecionar um tamanho legível para o corpo do
conteúdo. Deve-se levar o equilíbrio e dominância, baseados nas proporções de certos objeto
Proporção

15. Diz respeito ao movimento gerado pela repetição dos elementos. A repetição de características como a logo, as cores,
o uso do mesmo tipo de fonte fortalecerá a identidade e o ritmo do site.
Rítmo

16. Diz respeito ao movimento gerado pela repetição dos elementos. A repetição de características como a logo, as cores,
o uso do mesmo tipo de fonte fortalecerá a identidade e o ritmo do site.
Unidade

17. Leis de Gestalt
Estuda como o ser humano percebe as coisas ao seu redor
PROXIMIDADE
Diz respeito a forma que
os elementos são
agrupados. Elementos
próximos dão uma
sensação de
unidade/relação.
ALINHAMENTO
Os elementos de uma
página não devem ser
posicionados
arbitrariamente. O
alinhamento de um
elemento indica seu
relacionamento com os
outros.
SEMELHANÇA
Objetos semelhantes
tendem a se agrupar,
podendo essa semelhança
ser na cor, forma ou
tamanho.
PREGNÂNCIA
Diz que nossa experiência
passada favorece a
compreensão e associação de
objetos incompletos, desde
que nossa consciência tenha
conhecimento de sua
existência.
FECHAMENTO
Diz que nossa mente
interpreta um objeto
completo simplesmente se
os elementos parecerem
se agrupar

18. Elementos que estão próximos uns dos outros se agrupam entre si, são percebidos como uma unidade
Proximidade

19. Elementos semelhantes se agrupam entre si, são percebidos como uma unidade
Semelhança

20. O alinhamento vertical e horizontal dos elementos produz um conjunto harmônico e passa a impressão de que os
elementos estão relacionados.
Alinhamento

21. Diz que nossa mente interpreta um objeto completo simplesmente se os elementos parecerem se agrupar.
Fechamento

22. É também chamado de lei da simplicidade. Ela dita que objetos em um ambiente são vistos da forma mais simples
possíveis. Quanto mais simples, mais facilmente é assimilada
Pregnância

23. 11
Dicas importantes
para Layout de sites
CONHEÇA SEU PÚBLICO E
OBJETIVO DO SITE
O layout deve ser pensado juntamente
com o objetivo do negócio e o seu
público alvo. Se negócio é voltada
para e-commerce, então o layout terá
algumas particularidades relacionadas
a esse segmento.
01
UM LAYOUT DEVE
TRANSMITIR A IDENTIDADE
DA EMPRESA
Se empresa for de tecnologia e seu
site tiver uma aparência
ultrapassada ou não estiver de
acordo com as últimas tendências a
credibilidade do seu negócio pode
ficar abalada.
02
SIGA UM
STYLE GUIDE
Para seu site ficar padronizado, é fundamental
seu projeto se inicie com um guia de estilos,
onde são definidas no máximo 2 ou 3
tipografias, a paleta de cores, estilos de
botões, ícones e outros elementos essenciais
que ajudarão a seguir um padrão durante o
desenvolvimento do site.
03

25. Twitter Bootstrap
O que é e quais são seus componentes básicos
15

30. Configurando Bootstrap
11
Acesse o site https://getbootstrap.com/docs/5.2/getting-started/introduction/ e faça download dos
arquivos de css e js do framework.

31. Projeto
index.html
img/
logo.png
favicon.icon
js/
bootstrap.bundle.min.js
script.js
css/
bootstrap.min.css
estilo.css

32. Estrutura Básica HTML
Na pagina web adicionar uma <link> referenciando o bootstra.min.css e uma <script> referenciando o
bootstrao.bundle.min.js

38. Sistema de Grid
11
O sistema grid Bootstrap usa vários containers, linhas e colunas para arranjar e alinhar conteúdo. Ele é
feito com flexbox e é, totalmente, responsivo.

39. Sistema de Grid
11
O sistema grid Bootstrap usa vários containers, linhas e colunas para arranjar e alinhar conteúdo. Ele é
feito com flexbox e é, totalmente, responsivo.
Containers
criam meios para centralizar horizontalmente e
verticalmente o conteúdo do site. Podendo ser
.container, .container-fluid ou .container-{breakpoint}
Rows
são elementos para
envolver colunas
Cols
elementos que envolvem o conteúdo do site. Elas
indicam o espaço do grid utilizado, dentro de uma
possibilidade de 12 colunas por linha;

41. Para fazer o grid responsivo, existem cinco breakpoints, um para cada dimensão máxima do dispositivo:
extra small (implícito), small, medium, large e extra large;
col-1 a col-12
As classes de coluna indicam o número de colunas a
serem expandidas podendo ela ser de 1 a 12. Quando
utilizadas sem o breakpoint assume a largura do
extra pequeno.
Layout Responsivo
11

42. Para fazer o grid responsivo, existem cinco breakpoints, um para cada dimensão máxima do dispositivo:
extra small (implícito), small, medium, large e extra large;
col-sm-1 a col-sm-12
Quando utilizadas col-sm-* a largura assume o
breakpoint de tamanho small.
Layout Responsivo
11

43. Para fazer o grid responsivo, existem cinco breakpoints, um para cada dimensão máxima do dispositivo:
extra small (implícito), small, medium, large e extra large;
Layout Responsivo
11
container-fluid
contêiner de largura total, abrange toda a largura do dispostivo.

45. index.html
estilo.css

46. Conteúdo Tipografia
11

47. Conteúdo Botões
11

48. Conteúdo Alerts e Border
11

49. Conteúdo Listas
11

50. Conteúdo Navs
11

51. Conteúdo Navbars
11

52. Conteúdo Accordions
11
Elemento "dobrável" utilizado para
renderizar um grupo de elementos em
forma de acordeon, expandindo e
ocultando conteúdo.

53. Conteúdo Cards
11

55. Alinhando Colunas
11

56. Alinhando Colunas
11

57. Hands ON
11
shorturl.at/cekl9

59. Conselhos
finais
As lições mais importantes para
você começar hoje
SEJA PACIENTE COM OS RESULTADOS
LEIA A DOCUMENTAÇÃO
UTILIZE CONTEÚDO DE QUALIDADE