Bootstrap, desenvolvendo uma interface responsiva na prática!
-
Upload
cristofer-sousa -
Category
Technology
-
view
1.377 -
download
0
description
Transcript of Bootstrap, desenvolvendo uma interface responsiva na prática!
Responsive Web Design com Bootstrap,
desenvolvendo uma interface responsiva na prática, para One-Site.
@cristofersousa
<h1>Olá! </h1>
@cristofersousa
@cristofersousa | cristofersousa.wordpress.com
Engineer Front-End
Técnologo em Análise e Desenvolvimento de Sistemas – IFSP São CarlosSkills {Desenvolvimento de E-commerce | User Interface}
Okay, vamos para a base!
@cristofersousa
.tags {!important;}
@cristofersousa
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 diferentedentro 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....
Media-Queries, wtf?Devemos fazer que os elementos mudem de posição , escondendoOu aparecendo dentro conforme a necessidade do display, ou seja é preciso que seu Design se ajuste.
Exemplo de media-queries: http://mediaqueri.es/
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
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
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
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
Responsive Web Design || RWD
@cristofersousa
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
Bootstrap <3
@cristofersousa
O que podemos fazer com Bootstrap?O Bootstrap é utilizado para desenhar telas em html, queserã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 estruturascomplexas, mas que podem ser acessadas facilmente emdiferentes dispositivos. Também podemos criar telas comtabelas, formulários, janelas e controles complexos. Pode-sefacilmente criar um sistema web, apenas utilizando esteframework, tomando as devidas precauções.
@cristofersousa
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
Quem adota o bootstrap?
@cristofersousa
E no Brasil?
@cristofersousa
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
Mãos na massa! X)
@cristofersousa
Mobile First
<meta name="viewport“ content="width=device-width, initial-scale=1">
“Para o infinito e além!” Lightyear, Buzz.
@cristofersousa
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
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 1170pxClass prefix .col-xs- .col-sm- .col-md- .col-lg-# of columns 12Column width Auto 60px 78px 95pxGutter width 30px (15px on each side of a column)Nestable YesOffsets YesColumn ordering Yes
@cristofersousa
Customize
http://bootswatch.com/@cristofersousa
Oficina
@cristofersousa
Com que roupa eu vou?
http://usablica.github.io/front-end-frameworks/compare.html @cristofersousa
Answers?Dúvidas? ${“.p”}.append("<strong>Help</strong>”);
@cristofersousa
Obrigado</end>
twitter @cristofersousawww cristofersousa.com.br
@cristofersousa
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/
presentationfrontendfromscratcheventials.pdf• https://dlq8vi77lxj74.cloudfront.net/media/
e55e91b2cc22ba117ba8d1546537f7a4c037cf67/4a8e62743fa9073d3d0eacbcca2813966f87b1e5/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.
@cristofersousa