SlideShare uma empresa Scribd logo
1 de 28
Baixar para ler offline
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 Carlos
Skills {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 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....
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/
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, 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
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 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
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 @cristofersousa
www 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/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

Mais conteúdo relacionado

Mais procurados

Desenvolvimento Ágil com Twitter Bootstrap
Desenvolvimento Ágil com Twitter BootstrapDesenvolvimento Ágil com Twitter Bootstrap
Desenvolvimento Ágil com Twitter BootstrapFlavio Souza
 
Introdução a Bootstrap 3
Introdução a Bootstrap 3Introdução a Bootstrap 3
Introdução a Bootstrap 3Iago Effting
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design ResponsivoVictor Melo
 
Responsive Design - Introdução
Responsive Design - IntroduçãoResponsive Design - Introdução
Responsive Design - IntroduçãoMarcos César
 
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignIntrodução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignGustavo Zimmermann
 
Introdução as práticas de desenvolvimento web com design responsivo
Introdução as práticas de desenvolvimento web com design responsivoIntrodução as práticas de desenvolvimento web com design responsivo
Introdução as práticas de desenvolvimento web com design responsivoRégis Eduardo Weizenmann Gregol
 
Introdução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX DesignIntrodução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX DesignGustavo Zimmermann
 
Web design responsivo - Criando um site adaptável
Web design responsivo - Criando um site adaptávelWeb design responsivo - Criando um site adaptável
Web design responsivo - Criando um site adaptávelGuto Xavier
 
Acessibilidade para web
Acessibilidade para webAcessibilidade para web
Acessibilidade para webDiego Eis
 
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web DesignOs cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web DesignDiego Eis
 
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...Augusto César Albuquerque
 
A 3ª Área do Design: Web Design
A 3ª Área do Design: Web DesignA 3ª Área do Design: Web Design
A 3ª Área do Design: Web DesignGustavo Zimmermann
 
Guia do Front-end das Galáxias
Guia do Front-end das GaláxiasGuia do Front-end das Galáxias
Guia do Front-end das GaláxiasDavidson Fellipe
 
O Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndO Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndRael Max
 
Construindo seu framework CSS
Construindo seu framework CSSConstruindo seu framework CSS
Construindo seu framework CSSDiego Eis
 
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render PathDOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render PathDiego Eis
 
O que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-endO que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-endDiego Eis
 

Mais procurados (20)

Desenvolvimento Ágil com Twitter Bootstrap
Desenvolvimento Ágil com Twitter BootstrapDesenvolvimento Ágil com Twitter Bootstrap
Desenvolvimento Ágil com Twitter Bootstrap
 
Introdução a Bootstrap 3
Introdução a Bootstrap 3Introdução a Bootstrap 3
Introdução a Bootstrap 3
 
Design Responsivo
Design ResponsivoDesign Responsivo
Design Responsivo
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
 
Design responsivo
Design responsivoDesign responsivo
Design responsivo
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
 
Responsive Design - Introdução
Responsive Design - IntroduçãoResponsive Design - Introdução
Responsive Design - Introdução
 
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignIntrodução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
 
Introdução as práticas de desenvolvimento web com design responsivo
Introdução as práticas de desenvolvimento web com design responsivoIntrodução as práticas de desenvolvimento web com design responsivo
Introdução as práticas de desenvolvimento web com design responsivo
 
Introdução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX DesignIntrodução ao Web Design: Aula 2 - IHC/UX Design
Introdução ao Web Design: Aula 2 - IHC/UX Design
 
Web design responsivo - Criando um site adaptável
Web design responsivo - Criando um site adaptávelWeb design responsivo - Criando um site adaptável
Web design responsivo - Criando um site adaptável
 
Acessibilidade para web
Acessibilidade para webAcessibilidade para web
Acessibilidade para web
 
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web DesignOs cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
 
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
 
A 3ª Área do Design: Web Design
A 3ª Área do Design: Web DesignA 3ª Área do Design: Web Design
A 3ª Área do Design: Web Design
 
Guia do Front-end das Galáxias
Guia do Front-end das GaláxiasGuia do Front-end das Galáxias
Guia do Front-end das Galáxias
 
O Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndO Papel do desenvolvedor Front End
O Papel do desenvolvedor Front End
 
Construindo seu framework CSS
Construindo seu framework CSSConstruindo seu framework CSS
Construindo seu framework CSS
 
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render PathDOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
 
O que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-endO que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-end
 

Semelhante a Bootstrap RWD desenvolvimento interface responsiva

Responsive Web Design - Introdução
Responsive Web Design - IntroduçãoResponsive Web Design - Introdução
Responsive Web Design - IntroduçãoVítor Teixeira
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sitesthiagolima
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxLuiz Antonio
 
O que você faz para ser Mobile? TDC2013
O que você faz para ser Mobile? TDC2013O que você faz para ser Mobile? TDC2013
O que você faz para ser Mobile? TDC2013Jackson F. de A. Mafra
 
Mobile, por onde começar
Mobile, por onde começarMobile, por onde começar
Mobile, por onde começarPaulo Afonso
 
Mobile First e Offline First
Mobile First e Offline FirstMobile First e Offline First
Mobile First e Offline FirstDan Vitoriano
 
Desmistificando Progressive Web Apps - PWA
Desmistificando Progressive Web Apps - PWADesmistificando Progressive Web Apps - PWA
Desmistificando Progressive Web Apps - PWAStefan Horochovec
 
Mobile First & Responsive Design
Mobile First & Responsive DesignMobile First & Responsive Design
Mobile First & Responsive DesignEdu Agni
 
Gestão de Ambientes Internet Webseriados
Gestão de Ambientes Internet   WebseriadosGestão de Ambientes Internet   Webseriados
Gestão de Ambientes Internet WebseriadosDurval Amorim
 
Laboratório Web 2013-2014 - Tendências no Desenho e Produção de Interfaces pa...
Laboratório Web 2013-2014 - Tendências no Desenho e Produção de Interfaces pa...Laboratório Web 2013-2014 - Tendências no Desenho e Produção de Interfaces pa...
Laboratório Web 2013-2014 - Tendências no Desenho e Produção de Interfaces pa...Ricardo Pereira Rodrigues
 
Progressive Web Apps - MeetUp MobileDevBH
Progressive Web Apps - MeetUp MobileDevBHProgressive Web Apps - MeetUp MobileDevBH
Progressive Web Apps - MeetUp MobileDevBHRafael Schettino
 
Aplicativos para dispositivos móveis
Aplicativos para dispositivos móveisAplicativos para dispositivos móveis
Aplicativos para dispositivos móveisYgor Castro
 

Semelhante a Bootstrap RWD desenvolvimento interface responsiva (20)

Hello Bootstrap!
Hello Bootstrap!Hello Bootstrap!
Hello Bootstrap!
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Responsive Web Design - Introdução
Responsive Web Design - IntroduçãoResponsive Web Design - Introdução
Responsive Web Design - Introdução
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
 
XHTML e CSS
XHTML e CSSXHTML e CSS
XHTML e CSS
 
Curso Marketing Digital Ana Paula Coelho
Curso Marketing Digital Ana Paula CoelhoCurso Marketing Digital Ana Paula Coelho
Curso Marketing Digital Ana Paula Coelho
 
O que você faz para ser Mobile? TDC2013
O que você faz para ser Mobile? TDC2013O que você faz para ser Mobile? TDC2013
O que você faz para ser Mobile? TDC2013
 
Mobile, por onde começar
Mobile, por onde começarMobile, por onde começar
Mobile, por onde começar
 
Android FREETEC
Android FREETECAndroid FREETEC
Android FREETEC
 
Mobile First e Offline First
Mobile First e Offline FirstMobile First e Offline First
Mobile First e Offline First
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
 
Desmistificando Progressive Web Apps - PWA
Desmistificando Progressive Web Apps - PWADesmistificando Progressive Web Apps - PWA
Desmistificando Progressive Web Apps - PWA
 
Mobile First & Responsive Design
Mobile First & Responsive DesignMobile First & Responsive Design
Mobile First & Responsive Design
 
Gestão de Ambientes Internet Webseriados
Gestão de Ambientes Internet   WebseriadosGestão de Ambientes Internet   Webseriados
Gestão de Ambientes Internet Webseriados
 
Laboratório Web 2013-2014 - Tendências no Desenho e Produção de Interfaces pa...
Laboratório Web 2013-2014 - Tendências no Desenho e Produção de Interfaces pa...Laboratório Web 2013-2014 - Tendências no Desenho e Produção de Interfaces pa...
Laboratório Web 2013-2014 - Tendências no Desenho e Produção de Interfaces pa...
 
Progressive Web Apps - MeetUp MobileDevBH
Progressive Web Apps - MeetUp MobileDevBHProgressive Web Apps - MeetUp MobileDevBH
Progressive Web Apps - MeetUp MobileDevBH
 
Webseriados
WebseriadosWebseriados
Webseriados
 
Aplicativos para dispositivos móveis
Aplicativos para dispositivos móveisAplicativos para dispositivos móveis
Aplicativos para dispositivos móveis
 

Bootstrap RWD desenvolvimento interface responsiva

  • 1. Responsive Web Design com Bootstrap, desenvolvendo uma interface responsiva na prática, para One-Site. @cristofersousa
  • 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. Okay, vamos para a base! @cristofersousa
  • 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. 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. 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. 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. 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. 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. Responsive Web Design || RWD @cristofersousa
  • 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
  • 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. 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. Quem adota o bootstrap? @cristofersousa
  • 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. Mãos na massa! X) @cristofersousa
  • 20. Mobile First <meta name="viewport“ content="width=device-width, initial-scale=1"> “Para o infinito e além!” Lightyear, Buzz. @cristofersousa
  • 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. 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
  • 25. Com que roupa eu vou? http://usablica.github.io/front-end-frameworks/compare.html @cristofersousa
  • 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