Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos conceitos de prototipagem para web.
Transferir como PPTX, PDF2 gostaram1,661 visualizações
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.
![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/]](https://image.slidesharecdn.com/bootstrap-cristofersousaerafaelperatello-141015080208-conversion-gate01/85/Bootstrap-desenvolvendo-e-customizando-interfaces-para-web-introduzindo-aos-conceitos-de-prototipagem-para-web-12-320.jpg)
![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:](https://image.slidesharecdn.com/bootstrap-cristofersousaerafaelperatello-141015080208-conversion-gate01/85/Bootstrap-desenvolvendo-e-customizando-interfaces-para-web-introduzindo-aos-conceitos-de-prototipagem-para-web-18-320.jpg)
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos conceitos de prototipagem para web.
- 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!
- 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!
- 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
- 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.