Transferir como PDF, PPTX
Carregado porCristofer Sousa
Hello Bootstrap!
O documento apresenta um curso sobre o framework Bootstrap, abordando tópicos como grids responsivos, componentes, customização e boas práticas de design responsivo. O curso ensina como utilizar os recursos do Bootstrap para criar interfaces adaptáveis a diferentes telas de forma fácil e rápida.
Hello Bootstrap!
- 1. Mobile First, ResponsiveDesign, 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 é umpoderoso 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.
- 6.
- 7. Devemos fazer queos 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.
- 9. 100% Responsive & MobileFirst.
- 10. Grids “Todo trabalho dedesign 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.
- 12. Os grids funcionamcomo 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, adotamoso 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 sobreResponsive 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 deapps 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 devicesDesktops (≥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 onhttps://github.com/opensanca/hello-bootstrap/ ● BaixarBootstrap v3.3.6 ● Baixar jQuery v1.9.1 ● Editores de Texto ( Atom, Notepad++, Sublime e etc).
- 21.
- 22. Tabelas, Panels, Wells,Forms, Buttons e muito mais... Componentes & CSS http://getbootstrap.com/components/
- 23. Modal, Tabs eDropdown.... http://getbootstrap.com/javascript/ JavaScript
- 24.
- 25.
- 26.
- 27.
- 28.
- 29. http://bootsnipp.com/ BootsnippDesign elements, playgroundand code snippets for Bootstrap HTML/CSS/JS framework
- 30. Bootstrap components writtenin pure AngularJS by the AngularUI Team https://angular-ui.github.io
- 31.
- 32.
- 33.
- 34. Obrigado </end> twitter @cristofersousa www cristofersousa.com.br emailcristofersousa@gmail.com