Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Bootstrap, desenvolvendo uma interface responsiva na prática!

4,853 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
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • -- DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT -- ......................................................................................................................... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... (Unlimited)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • -- DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT -- ......................................................................................................................... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... (Unlimited)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ACCESS that WEBSITE Over for All Ebooks (Unlimited) ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... DOWNLOAD FULL EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you want to download or read this book, copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×