Hello Bootstrap!

Workshop que ministrei abordando sobre os conceitos de Grids, Design Responsive, Mobile First e Componentes do Bootstrap como fazer uma interface de forma rápida, adotando o Bootstrap, , o código do projeto pode ser acompanhado através do Github (https://github.com/opensanca/hello-bootstrap)

Transcript

1. Mobile First, Responsive Design, Grids and Others @cristofersousa
2. <h1> Olá! </h1> @cristofersousa | cristofersousa.com.br Tecnólogo em Análise e Desenvolvimento de Sistemas – IFSP São Carlos Cursando Pós-Graduação Desenvolvimento de Software para Web - UFSCar Fundador Ecogarbage | Co-fundador Opensanca Front-End Developer & UX Designer job/
3. Ementa - O que é Bootstrap - Bootstrap no mercado de trabalho - Instalação - Conhecendo os grids - Entendendo os componentes - Customizando minha UI - and more...
4. "Bootstrap é um poderoso framework front-end voltado para o desenvolvimento rápido e fácil de sites e aplicações web responsivos e alinhados com a filosofia mobile-first. É indicado para dispositivos e projetos de todos os tamanhos e destinado a desenvolvedores com qualquer nível de conhecimento." - Maurício Samy Silva
5. Begin
6. Cross Browser
7. Devemos fazer que os elementos mudem de posição, escondendo ou aparecendo dentro conforme a necessidade do display, ou seja é preciso que seu Design se ajuste. Media Queries
8. Media Querie http://mediaqueri.es/
9. 100% Responsive & Mobile First.
10. 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.” - SAMARA, Timothy. Grid: Construção e Desconstrução. São Paulo: Cosacnaify, 2007.
11. Fonte: http://erskinedesign.com/media/blog/maintainable-responsive-layouts/big/1.png
12. Os grids funcionam como guias para distribuição de elementos em um formato. Todo grid possui as mesmas partes básicas, por mais complexo que seja. Vantagens do grid: ❑ Clareza ❑ Eficiência ❑ Economia ❑ Identidade Tipos de grid: ❑ Retangular ❑ Hierárquico ❑ Colunas ❑ Modular
13. Para web, adotamos o grid hierárquico, é uma abordagem orgânica da ordenação dos elementos e da informação, a largura das colunas e entre colunas podem variar.
14. Dados Relevantes sobre 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.
16. "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, se for Hibrído ajuda, mas o trabalho ainda é grande! "
17. 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
18. Hands on https://github.com/opensanca/hello-bootstrap/ • Baixar Bootstrap v3.3.6 • Baixar jQuery v1.9.1 • Editores de Texto ( Atom, Notepad++, Sublime e etc).
21. Componentes & CSS http://getbootstrap.com/components/
22. Tabelas, Panels, Wells, Forms, Buttons e muito mais... Componentes & CSS http://getbootstrap.com/components/
23. Modal, Tabs e Dropdown.... http://getbootstrap.com/javascript/ JavaScript
24. http://fontawesome.io/
25. https://www.google.com/fonts Google Fonts
26. ScoreFm Wireframe
27. Customize Colors, Icons and Fonts
28. https://bootswatch.com/ Bootswatch
29. http://bootsnipp.com/ Bootsnipp Design elements, playground and code snippets for Bootstrap HTML/CSS/JS framework
30. Bootstrap components written in pure AngularJS by the AngularUI Team https://angular-ui.github.io
31. http://usablica.github.io/front-end-frameworks/compare.html Others Frameworks
32. http://v4-alpha.getbootstrap.com/ FlexBox
33. Dúvidas? ${“.p”}.append("<strong>Help</strong>”);
34. Obrigado </end> twitter @cristofersousa www cristofersousa.com.br email cristofersousa@gmail.com