O documento discute o desenvolvimento de interfaces responsivas usando Bootstrap. Apresenta conceitos como grids, media queries e responsive web design. Explica como Bootstrap pode ser usado para criar sites adaptáveis a diferentes telas de forma fácil e rápida.

1. Responsive Web Design
com
Bootstrap, desenvolvendo
uma interface responsiva
na prática, para One-Site.
@cristofersousa

2. <h1>Olá!</h1>
@cristofersousa
@cristofersousa | cristofersousa.wordpress.com
Engineer Front-End
Técnologo em Análise e Desenvolvimento de Sistemas – IFSP São Carlos
Skills {Desenvolvimento de E-commerce | User Interface}

3. Okay, vamos para a base!
@cristofersousa

4. .tags {!important;}
@cristofersousa

5. Media-Types, hãm!?
. container{width: 100%;}
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.
• e muito mais....

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

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
@cristofersousa

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.
@cristofersousa

10. Responsive Web Design || RWD
Dados Relevantes sobre RWD {!important}
 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.
@cristofersousa

11. Responsive Web Design || RWD
@cristofersousa

12. Boot quem?
"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. "
Bootstrap é um framework voltado para o front-end!
A tela larga enfatiza os gráficos e as imagens.
@cristofersousa

13. Bootstrap <3
@cristofersousa

14. O que podemos fazer com Bootstrap?
O Bootstrap é utilizado para desenhar telas em html, que
serão acessadas via navegador web ou dispositivo mobile.
Tudo que você precisa saber sobre Bootstrap é, na verdade,
HTML. Com ele, podemos criar sites inteiros e estruturas
complexas, mas que podem ser acessadas facilmente em
diferentes dispositivos. Também podemos criar telas com
tabelas, formulários, janelas e controles complexos. Pode-se
facilmente criar um sistema web, apenas utilizando este
framework, tomando as devidas precauções.
@cristofersousa

15. 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.
@cristofersousa

16. Quem adota o bootstrap?
@cristofersousa

17. E no Brasil?
@cristofersousa

18. Start!
 Editor de código: Download Sublime3[ww.sublimetext.com/3]
 Bootstrap - Download Bootstrap 3[www.getboostrap.com]
 jQuery - Download latest version[http://jquery.com/download/]
 Holder.js – Download[http://imsky.github.io/holder/]
 Descompactando como fica no diretório:
@cristofersousa

19. Mãos na massa! X)
@cristofersousa

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

21. Media Queries
/* 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) { ... }
@cristofersousa

22. Grid Options
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
@cristofersousa

23. Customize
http://bootswatch.com/
@cristofersousa

24. Oficina
@cristofersousa

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

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

27. Obrigado
</end>
twitter @cristofersousa
www cristofersousa.com.br
@cristofersousa

28. Referencias
• 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/3cac1948eabda6e7a458fc1875a1a25c217e82af/presen
tationfrontendfromscratcheventials.pdf
• https://dlq8vi77lxj74.cloudfront.net/media/e55e91b2cc22ba117ba8d1546537f7a4c037cf67/4a8e62743fa9073d3d0eacbcca2813966f87b1e5/guiad
eestilos.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.
@cristofersousa