O documento discute o framework Bootstrap e design responsivo para aplicações web. Aborda conceitos como grids, media queries, prototipação e ferramentas como Bootstrap, jQuery e outras bibliotecas front-end. Explica a importância do design responsivo e mobile first para se adaptar a diferentes dispositivos.

1. Bootstrap,
desenvolvendo uma
interface responsiva
para aplicações web!
@cristofersousa

2. <h1> Olá!</h1>
@cristofersousa
@rafaelperatello
Engineer Front-End Development Back-end
Técnologo em Análise e Desenvolvimento de Sistemas – IFSP São Carlos
Skills {UI & UX , Hardware (Arduino & Raspebery}
Pizza, Cerveja e Catuaba!

3. Okay, vamos para a base!

4. Cross-Browser

5. Media-Types, hãm!?
Media Types é uma recomendação da W3C(http://ow.ly/cQ3MF)
desde o CSS2, com ele é possivél apresentar o site de maneira
diferente dentro da nossa Media.
•all: A folha de estilo serve para todos os
dispositivos
•braille: Para dar feedback quando se usa
algum dispositivo tátil.
•embossed: Impressoras em braille paginadas.
•Handheld: Dispositivos móveis(tela pequena e
banda limitada)
•Print: Para material paginado ou aqueles que
são vistos em modo de impressão.

6. Media-Queries, wtf?
Devemos fazer que os elementos mudem de posição , escondendo
Ou aparecendo dentro conforme a necessidade do dysplay, ou seja
é preciso que seu design se ajuste.
Exemplo de media-queries: http://mediaqueri.es/

7. 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.”

8. Grids e o que mais?
Basicamente o grid funciona como guias para distribuição
de elementos em um formato. Todo grid possui as mesmas
partes básicas, por mais complexo que seja. O grid deve
atender as exigências informativas do conteúdo.
Vantagens do grid:
 Clareza
 Eficiência
 Economia
 Identidade
Tipos de grid:
 Retangular
 Hierárquico
 Colunas
 Modular

9. O que é relevante em grids?
Hierárquico: É uma abordagem orgânica da ordenação
dos elementos e da informação.
A largura das colunas e entrecolunas podem variar.

10. 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.
Fonte: Forbes -2013

11. Design Adaptativo vs Design Liquído

12. Responsive Web Design || RWD
Atualização do Google força lojas virtuais a investirem
em design responsivo
img[http://revistaw.com.br/blog/atualizacao-do-google-forca-lojas-virtuais-a-investirem-em-design-responsivo/]

13. Boot quem?
Bootstrap é um framework voltado para Front-End.

14. Bootstrap tem Grids <3

15. O que podemos fazer com
Bootstrap?
O Bootstrap é utilizado para desenhar telas em
HTML, que serão acessadas via navegador
web ou dispositivo mobile.

16. O que não é Bootstrap?
Isso envolve, por exemplo, realizar o bind entre variáveis javascript
e seus respectivos campos input, ou calcular datas ou fornecer
formas de validar algum processo. Tudo que não é visual ou não é
ligado ao html, o Bootstrap não tem domínio.
Qualquer tarefa que não envolva o
desenho da tela, não está
relacionado com Bootstrap.

17. Quem adota o bootstrap?

18. Start!
 Editor de código: Download Sublime3[ww.sublimetext.com/3]
 Bootstrap - Download Bootstrap 3[www.getboostrap.com]
 jQuery - Download latest ersion[http://jquery.com/download/]
 Descompactando como fica no diretório:

19. AgoMraã ao ps onhaa mvaai sfiscaar! sXé)ria!

20. http://modernizr.com/

21. http://meyerweb.com/eric/tools/css/reset/

22. http://html5boilerplate.com/

23. http://responsive-nav.com/

24. Mobile First
“Para o infinito e além!”
Lightyear, Buzz.
<meta name="viewport“ content="width=device-width, initial-scale=1">
@cristofersousa

25. Media Queries(Breakpoint) no Bootstrap
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... } /*
Medium devices (desktops, 992px and up)
*/ @media (min-width: @screen-md-min) { ... } /*
Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

26. Entendendo as Grids
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

27. Customize – Além do Azul e da font-family: Helvetica Neue
http://bootswatch.com/

28. Customize – font generator
https://www.web-font-generator.com/

29. Prototipação

30. Etapas - Vai Rubinho?
• Modelo de Processo
• Projeto rápido da interface e das funcionalidades
• Concepção de fragmentos do sistema
• Artefato construído iterativamente
• Engenharia de Software
• Representação dos requisitos
• Interação Humano-Computador
• Modelo de Interação entre usuário final e sistema
Foco: avaliar resultados obtidos com o protótipo
(Brown, 1996; Pressman, 2007; Spinelli; Rei, 2011)

31. Por que prototipar interfaces?

32. Modelos de IHC e prototipação
(Brown, 1996; da Silva et al., 2005)

33. Ferramentas de Prototipação
• SketchFlow (Microsoft Blend)
• Mockinbird
• BalsamiqMockups
• Cacoo
• Mockflow - <http://www.mockflow.com/>
• Microsoft Office Visio
• OmniGraffle
• Axure
• PowerPoint
• HTML+CSS

34. Bora Fazer?

35. Com que roupa eu vou?
http://usablica.github.io/front-end-frameworks/compare.html

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

37. Obrigado
</end>

38. Referências
• http://acadtec.com.br/site/guruprograms/21-frameworks-cms-e-lms/24-curso-de-bootstrap-twitter/168.html
• http://tableless.com.br/desafios-de-um-desenvolvedor-front-end/?
utm_source=Site+Tableless&utm_campaign=8803a116af-
_Tableless_Newsletter_9_Fev_2014&utm_medium=email&utm_term=0_26928da126-8803a116af-97338761
• http://tableless.com.br/mobile-first-a-arte-de-pensar-com-foco/
• http://blog.alexandremagno.net/en/2014/03/mobile-first-bootstrap-book-released/
• http://blog.alexandremagno.net/2012/08/globo-boostrap/
• https://dlq8vi77lxj74.cloudfront.net/media/e55e91b2cc22ba117ba8d1546537f7a4c037cf67/3cac1948eabda6e7a458fc1875a
1a25c217e82af/presentationfrontendfromscratcheventials.pdf
• https://dlq8vi77lxj74.cloudfront.net/media/e55e91b2cc22ba117ba8d1546537f7a4c037cf67/4a8e62743fa9073d3d0eacbcca
2813966f87b1e5/guiadeestilos.pdf
• http://pt.slideshare.net/eduardobrandao/a-importncia-do-grid-para-o-design-de-interfaces-web
• http://css.dzone.com/articles/please-stop-using-twitter
• http://blog.alexandremagno.net/2013/07/design-responsivo-e-mobile-first/
• http://getbootstrap.com/examples/starter-template/
• https://stripe.com/us/features
• Grids >> http://pt.slideshare.net/agner/a-construo-do-grid?qid=e027944b-aa6c-4c05-9fbb-
0a0365312f49&v=qf1&b=&from_search=1
• Dados: http://frickmarketing.com/blog/article/responsive-design
• http://maddesigns.de/rwd-process/#40
• http://www.html5rocks.com/en/mobile/responsivedesign
• http://bradfrostweb.com/blog/mobile/anatomy-of-a-mobile-first-responsive-web-design/
• http://www.okilla.com/939/plugin-responsive-images-picturefill/ )- imagem responsiva
• http://de.slideshare.net/pkattera/design-process-for-responsive-web-design
• Livro Design Responsivo , Zemel, Tacio 2013 – Casa Do Código.
• Livro Web Mobile- Lopes, Sergio 2013 – Casa do Código
• Livro Bootstrap Framework frontend para aplicações Web e Mobile, Schimitz Daniel, 2012.