Aprendendo a desenvolver e a customizar uma interface responsiva com Bootstrap.

Nessa apresentação, ministrei um workshop no IFSP - São Carlos demonstrando os conceitos básicos de grids e como funcionam os componentes do Bootstrap e a como utilizar o framework para criar protótipos rápidos.

Transcript

1. Bootstrap, desenvolvendo uma interface responsiva para aplicações web! @cristofersousa  
2. <h1>   Olá!   </h1>   @cristofersousa     Técnologo em Análise e Desenvolvimento de Sistemas – IFSP São Carlos Skills {UI & UX , Hardware (Arduino & Raspebery} Pizza, Cerveja e Catuaba! @rafaelperatello Engineer Front-End Development Back-end
3. Okay, vamos para a base!
4. Cross-Browser
5. Media-Types, hãm!? M e d i a Ty p e s é u m a r e c o m e n d a ç ã o d a W 3 C ( 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 sej é preciso que seu design se ajuste. Exemplo  de  media-­‐queries:    h;p://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  informaLvas  do  conteúdo.         Vantagens  do  grid:       q   Clareza   q   Eficiência   q   Economia   q   IdenLdade   Tipos  de  grid:       q   Retangular   q   Hierárquico   q   Colunas   q   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 img[h;p://revistaw.com.br/blog/atualizacao-­‐do-­‐google-­‐forca-­‐lojas-­‐virtuais-­‐a-­‐invesLrem-­‐em-­‐design-­‐responsivo/]   Atualização  do  Google  força  lojas  virtuais  a  invesLrem     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. Mãos  na  massa!  X)   Agora a poha vai ficar séria!
20. h;p://modernizr.com/  
21.   h;p://meyerweb.com/eric/tools/css/reset/  
22. h;p://html5boilerplate.com/  
23. h;p://responsive-­‐nav.com/  
24. Mobile First     <meta  name="viewport“  content="width=device-­‐width,  ini6al-­‐scale=1">   “Para o infinito e além!” Lightyear, Buzz.   @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   Lmes   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   Gu;er  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 h;p://bootswatch.com/  
28. Customize – font generator h;ps://www.web-­‐font-­‐generator.com/  
29. ProtoLpaçã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  iteraLvamente    •  Engenharia  de  Sorware    •  Representação  dos  requisitos    •  Interação  Humano-­‐Computador    •  Modelo  de  Interação  entre  usuário  final  e  sistema      Foco:  avaliar  resultados  obLdos  com  o  protóLpo   (Brown,  1996;  Pressman,  2007;  Spinelli;  Rei,  2011)  
31. Por  que  protoLpar  interfaces?  
32. Modelos  de  IHC  e  protoLpação   (Brown,  1996;  da  Silva  et  al.,  2005)  
33. Ferramentas  de  ProtoLpação     •  SketchFlow  (Microsor  Blend)     •  Mockinbird     •  BalsamiqMockups     •  Cacoo     •  Mockflow    -­‐  <h;p://www.mockflow.com/>   •  Microsor  Office  Visio     •  OmniGraffle     •  Axure     •  PowerPoint     •  HTML+CSS    
34. Bora  Fazer?  
35. Com que roupa eu vou? h;p://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/3cac1948eabda6e7a458fc1875a1a25c217e82af/ presentationfrontendfromscratcheventials.pdf •  https://dlq8vi77lxj74.cloudfront.net/media/ e55e91b2cc22ba117ba8d1546537f7a4c037cf67/4a8e62743fa9073d3d0eacbcca2813966f87b1e5/ 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.