O documento apresenta um curso sobre o framework Bootstrap, abordando tópicos como grids responsivos, componentes, customização e boas práticas de design responsivo. O curso ensina como utilizar os recursos do Bootstrap para criar interfaces adaptáveis a diferentes telas de forma fácil e rápida.

1. Mobile First, Responsive Design, Grids and Others
@cristofersousa

2. <h1> Olá! </h1>
@cristofersousa | cristofersousa.com.br
Tecnólogo em Análise e Desenvolvimento de Sistemas – IFSP São Carlos
Cursando Pós-Graduação Desenvolvimento de Software para Web - UFSCar
Fundador Ecogarbage | Co-fundador Opensanca
Front-End Developer
& UX Designer
job/

3. Ementa
- O que é Bootstrap
- Bootstrap no mercado de trabalho
- Instalação
- Conhecendo os grids
- Entendendo os componentes
- Customizando minha UI
- and more...

4. "Bootstrap é um poderoso framework front-end voltado para
o desenvolvimento rápido e fácil de sites e aplicações web
responsivos e alinhados com a filosofia mobile-first.
É indicado para dispositivos e projetos de todos os
tamanhos e destinado a desenvolvedores com qualquer
nível de conhecimento."
- Maurício Samy Silva

5. Begin

6. Cross Browser

7. Devemos fazer que os elementos mudem de posição, escondendo ou aparecendo
dentro conforme a necessidade do display, ou seja é preciso que seu Design se ajuste.
Media Queries

8. Media Querie
http://mediaqueri.es/

9. 100% Responsive
& Mobile First.

10. Grids
“Todo trabalho de design envolve a solução de
problemas em níveis visuais e organizativos.
figuras, símbolos, massa de textos, títulos e
tabelas devem se reunir para transmitir
informação. O grid é uma maneira de juntar
esses elementos.” - SAMARA, Timothy. Grid:
Construção e Desconstrução. São Paulo:
Cosacnaify, 2007.

11. Fonte: http://erskinedesign.com/media/blog/maintainable-responsive-layouts/big/1.png

12. Os grids funcionam como guias para distribuição de
elementos em um formato. Todo grid possui as mesmas
partes básicas, por mais complexo que seja.
Vantagens do grid:
❑ Clareza
❑ Eficiência
❑ Economia
❑ Identidade
Tipos de grid:
❑ Retangular
❑ Hierárquico
❑ Colunas
❑ Modular

13. Para web, adotamos o grid hierárquico, é
uma abordagem orgânica da ordenação
dos elementos e da informação, a largura
das colunas e entre colunas podem variar.

14. Dados Relevantes sobre Responsive Web Design - RWD
▪ 91 % de todas as pessoas na Terra tem um celular;
▪ 56 % das pessoas possuem um telefone inteligente;
▪ 50% dos usuários de telefonia móvel, utiliza-o como sua fonte primária
internet.
▪ 80% do tempo no celular é gasto dentro de aplicativos
▪ 72% dos proprietários realizam compra online, através de tablets a cada
semana.

16. "O desenvolvimento de apps envolve
muito esforço de manutenção e
escalabilidade por que você precisa
desenvolver em diferentes tecnologias,
entre elas iOS e Android, se for Hibrído
ajuda, mas o trabalho ainda é grande! "

17. Extra small
devicesPhones
(<768px)
Small
devices Tablets
(≥768px)
Medium
devices Desktops
(≥992px)
Large
devices Desktops
(≥1200px)
Grid behavior Horizontal at all
times
Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Column width Auto 60px 78px 95px
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes

18. Hands onhttps://github.com/opensanca/hello-bootstrap/
● Baixar Bootstrap v3.3.6
● Baixar jQuery v1.9.1
● Editores de Texto ( Atom, Notepad++, Sublime e etc).

21. Componentes & CSS
http://getbootstrap.com/components/

22. Tabelas, Panels, Wells, Forms,
Buttons e muito mais...
Componentes & CSS
http://getbootstrap.com/components/

23. Modal, Tabs e Dropdown....
http://getbootstrap.com/javascript/
JavaScript

24. http://fontawesome.io/

25. https://www.google.com/fonts
Google Fonts

26. ScoreFm Wireframe

27. CustomizeColors, Icons and Fonts

28. https://bootswatch.com/
Bootswatch

29. http://bootsnipp.com/
BootsnippDesign elements, playground and code snippets for Bootstrap
HTML/CSS/JS framework

30. Bootstrap components written in pure
AngularJS by the AngularUI Team
https://angular-ui.github.io

31. http://usablica.github.io/front-end-frameworks/compare.html
Others Frameworks

32. http://v4-alpha.getbootstrap.com/
FlexBox

33. Dúvidas?
${“.p”}.append("<strong>Help</strong>”);

34. Obrigado
</end>
twitter @cristofersousa
www cristofersousa.com.br
email cristofersousa@gmail.com