Embed Size (px)
Citation preview
Mobile First, Responsive Design, Grids and Others @cristofersousa
<h1> Olá! </h1>
@cristofersousa | cristofersousa.com.br
Tecnólogo em Análise e Desenvolvimento de Sistemas – IFSP São CarlosCursando Pós-Graduação Desenvolvimento de Software para Web - UFSCar
Fundador Ecogarbage | Co-fundador Opensanca
Front-End Developer & UX Designer
job/
Ementa- O que é Bootstrap- Bootstrap no mercado de trabalho- Instalação- Conhecendo os grids- Entendendo os componentes- Customizando minha UI- and more...
"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
Begin
Cross Browser
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
Media Querie
http://mediaqueri.es/
100% Responsive & Mobile First.
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.
Fonte: http://erskinedesign.com/media/blog/maintainable-responsive-layouts/big/1.png
Os grids funcionam como guias para distribuição de elementos em um formato. Todo grid possui as mesmaspartes básicas, por mais complexo que seja.
Vantagens do grid:
❑ Clareza❑ Eficiência❑ Economia❑ Identidade
Tipos de grid:
❑ Retangular❑ Hierárquico❑ Colunas❑ Modular
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.
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.
"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! "
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
Hands onhttps://github.com/opensanca/hello-bootstrap/
● Baixar Bootstrap v3.3.6
● Baixar jQuery v1.9.1
● Editores de Texto ( Atom, Notepad++, Sublime e etc).
Componentes & CSS
http://getbootstrap.com/components/
Tabelas, Panels, Wells, Forms, Buttons e muito mais...
Componentes & CSS
http://getbootstrap.com/components/
Modal, Tabs e Dropdown....
http://getbootstrap.com/javascript/
JavaScript
http://fontawesome.io/
https://www.google.com/fonts
Google Fonts
ScoreFm Wireframe
CustomizeColors, Icons and Fonts
https://bootswatch.com/
Bootswatch
http://bootsnipp.com/
BootsnippDesign elements, playground and code snippets for Bootstrap HTML/CSS/JS framework
Bootstrap components written in pure AngularJS by the AngularUI Team
https://angular-ui.github.io
http://usablica.github.io/front-end-frameworks/compare.html
Others Frameworks
http://v4-alpha.getbootstrap.com/
FlexBox
Dúvidas?
${“.p”}.append("<strong>Help</strong>”);
