Bootstrap, desenvolvendo uma interface responsiva na prática!

4,507 views

Published on

Nessa apresentação explico um pouco o que envolve o desenvolvimento de uma interface responsiva, alguns conceitos sobre media-queries, grids e como utilizar o Bootstrap de forma eficiente e rápida.

Published in: Technology

Bootstrap, desenvolvendo uma interface responsiva na prática!

  1. 1. Responsive Web Design com Bootstrap, desenvolvendo uma interface responsiva na prática, para One-Site. @cristofersousa
  2. 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. 3. Okay, vamos para a base! @cristofersousa
  4. 4. .tags {!important;} @cristofersousa
  5. 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. 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. 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. 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. 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. 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. 11. Responsive Web Design || RWD @cristofersousa
  12. 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. 13. Bootstrap <3 @cristofersousa
  14. 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. 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. 16. Quem adota o bootstrap? @cristofersousa
  17. 17. E no Brasil? @cristofersousa
  18. 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. 19. Mãos na massa! X) @cristofersousa
  20. 20. Mobile First <meta name="viewport“ content="width=device-width, initial-scale=1"> “Para o infinito e além!” Lightyear, Buzz. @cristofersousa
  21. 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. 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. 23. Customize http://bootswatch.com/ @cristofersousa
  24. 24. Oficina @cristofersousa
  25. 25. Com que roupa eu vou? http://usablica.github.io/front-end-frameworks/compare.html @cristofersousa
  26. 26. Answers?Dúvidas? ${“.p”}.append("<strong>Help</strong>”); @cristofersousa
  27. 27. Obrigado </end> twitter @cristofersousa www cristofersousa.com.br @cristofersousa
  28. 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

×