SlideShare uma empresa Scribd logo
1 de 38
Bootstrap, 
desenvolvendo uma 
interface responsiva 
para aplicações web! 
@cristofersousa
<h1> Olá!</h1> 
@cristofersousa 
@rafaelperatello 
Engineer Front-End Development Back-end 
Técnologo em Análise e Desenvolvimento de Sistemas – IFSP São Carlos 
Skills {UI & UX , Hardware (Arduino & Raspebery} 
Pizza, Cerveja e Catuaba!
Okay, vamos para a base!
Cross-Browser
Media-Types, hãm!? 
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.
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.”
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
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.
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. 
Fonte: Forbes -2013
Design Adaptativo vs Design Liquído
Responsive Web Design || RWD 
Atualização do Google força lojas virtuais a investirem 
em design responsivo 
img[http://revistaw.com.br/blog/atualizacao-do-google-forca-lojas-virtuais-a-investirem-em-design-responsivo/]
Boot quem? 
Bootstrap é um framework voltado para Front-End.
Bootstrap tem Grids <3
O que podemos fazer com 
Bootstrap? 
O Bootstrap é utilizado para desenhar telas em 
HTML, que serão acessadas via navegador 
web ou dispositivo mobile.
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.
Quem adota o bootstrap?
Start! 
 Editor de código: Download Sublime3[ww.sublimetext.com/3] 
 Bootstrap - Download Bootstrap 3[www.getboostrap.com] 
 jQuery - Download latest ersion[http://jquery.com/download/] 
 Descompactando como fica no diretório:
AgoMraã ao ps onhaa mvaai sfiscaar! sXé)ria!
http://modernizr.com/
http://meyerweb.com/eric/tools/css/reset/
http://html5boilerplate.com/
http://responsive-nav.com/
Mobile First 
“Para o infinito e além!” 
Lightyear, Buzz. 
<meta name="viewport“ content="width=device-width, initial-scale=1"> 
@cristofersousa
Media Queries(Breakpoint) no Bootstrap 
/* 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) { ... }
Entendendo as Grids 
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
Customize – Além do Azul e da font-family: Helvetica Neue 
http://bootswatch.com/
Customize – font generator 
https://www.web-font-generator.com/
Prototipação
Etapas - Vai Rubinho? 
• Modelo de Processo 
• Projeto rápido da interface e das funcionalidades 
• Concepção de fragmentos do sistema 
• Artefato construído iterativamente 
• Engenharia de Software 
• Representação dos requisitos 
• Interação Humano-Computador 
• Modelo de Interação entre usuário final e sistema 
Foco: avaliar resultados obtidos com o protótipo 
(Brown, 1996; Pressman, 2007; Spinelli; Rei, 2011)
Por que prototipar interfaces?
Modelos de IHC e prototipação 
(Brown, 1996; da Silva et al., 2005)
Ferramentas de Prototipação 
• SketchFlow (Microsoft Blend) 
• Mockinbird 
• BalsamiqMockups 
• Cacoo 
• Mockflow - <http://www.mockflow.com/> 
• Microsoft Office Visio 
• OmniGraffle 
• Axure 
• PowerPoint 
• HTML+CSS
Bora Fazer?
Com que roupa eu vou? 
http://usablica.github.io/front-end-frameworks/compare.html
Answers?Dúvidas? 
${“.p”}.append("<strong>Help</strong>”);
Obrigado 
</end>
Referências 
• 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/3cac1948eabda6e7a458fc1875a 
1a25c217e82af/presentationfrontendfromscratcheventials.pdf 
• https://dlq8vi77lxj74.cloudfront.net/media/e55e91b2cc22ba117ba8d1546537f7a4c037cf67/4a8e62743fa9073d3d0eacbcca 
2813966f87b1e5/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.

Mais conteúdo relacionado

Mais procurados

Apresentacao FISL14 - Entendendo o Twitter bootstrap
Apresentacao FISL14 - Entendendo o Twitter  bootstrapApresentacao FISL14 - Entendendo o Twitter  bootstrap
Apresentacao FISL14 - Entendendo o Twitter bootstrap
Alexandre Magno Teles Zimerer
 
Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)
Sérgio Vilar
 

Mais procurados (20)

Desenvolvendo com Bootstrap: um framework front-end que vale a pena!
Desenvolvendo com Bootstrap: um framework front-end que vale a pena!Desenvolvendo com Bootstrap: um framework front-end que vale a pena!
Desenvolvendo com Bootstrap: um framework front-end que vale a pena!
 
Apresentacao FISL14 - Entendendo o Twitter bootstrap
Apresentacao FISL14 - Entendendo o Twitter  bootstrapApresentacao FISL14 - Entendendo o Twitter  bootstrap
Apresentacao FISL14 - Entendendo o Twitter bootstrap
 
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 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
 
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
 
Formulários Responsivos com Bootstrap
Formulários Responsivos com BootstrapFormulários Responsivos com Bootstrap
Formulários Responsivos com Bootstrap
 
Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)Estrutura de um Front-End eficiente (para iniciantes)
Estrutura de um Front-End eficiente (para iniciantes)
 
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
 
Design Responsivo
Design ResponsivoDesign Responsivo
Design Responsivo
 
Bootstrap 4
Bootstrap 4Bootstrap 4
Bootstrap 4
 
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
 
Como eu aprendo WordPress?
Como eu aprendo WordPress?Como eu aprendo WordPress?
Como eu aprendo WordPress?
 
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
 
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
 
Responsive Design - Introdução
Responsive Design - IntroduçãoResponsive Design - Introdução
Responsive Design - Introdução
 
Dicas e truques para desenvolver projetos web utilizando WordPress
Dicas e truques para desenvolver projetos web utilizando WordPressDicas e truques para desenvolver projetos web utilizando WordPress
Dicas e truques para desenvolver projetos web utilizando WordPress
 
Construindo seu framework CSS
Construindo seu framework CSSConstruindo seu framework CSS
Construindo seu framework CSS
 
Primeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-endPrimeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-end
 
Jetpack, um Canivete Suíço no seu WordPress (WordCamp São Paulo 2014)​
Jetpack, um Canivete Suíço no seu WordPress (WordCamp São Paulo 2014)​Jetpack, um Canivete Suíço no seu WordPress (WordCamp São Paulo 2014)​
Jetpack, um Canivete Suíço no seu WordPress (WordCamp São Paulo 2014)​
 

Destaque

Java Web - MVC básico com JSP e Servlets
Java Web - MVC básico com JSP e ServletsJava Web - MVC básico com JSP e Servlets
Java Web - MVC básico com JSP e Servlets
Eduardo Mendes
 

Destaque (10)

Entendendo os microframeworks em PHP
Entendendo os microframeworks em PHPEntendendo os microframeworks em PHP
Entendendo os microframeworks em PHP
 
Desenvolvendo aplicações Web escaláveis com PHP
Desenvolvendo aplicações Web escaláveis com PHPDesenvolvendo aplicações Web escaláveis com PHP
Desenvolvendo aplicações Web escaláveis com PHP
 
Bootstrap: a bias minimization technique of an estimator
Bootstrap: a bias minimization technique of an estimatorBootstrap: a bias minimization technique of an estimator
Bootstrap: a bias minimization technique of an estimator
 
IHC - Trabalho de Prototipação - Eduardo Bertolucci e Colegas e Classe - UNOP...
IHC - Trabalho de Prototipação - Eduardo Bertolucci e Colegas e Classe - UNOP...IHC - Trabalho de Prototipação - Eduardo Bertolucci e Colegas e Classe - UNOP...
IHC - Trabalho de Prototipação - Eduardo Bertolucci e Colegas e Classe - UNOP...
 
MVC Frameworks for building PHP Web Applications
MVC Frameworks for building PHP Web ApplicationsMVC Frameworks for building PHP Web Applications
MVC Frameworks for building PHP Web Applications
 
Arquitetura MVC, JavaBeans e DAO
Arquitetura MVC, JavaBeans e DAOArquitetura MVC, JavaBeans e DAO
Arquitetura MVC, JavaBeans e DAO
 
PHP MVC
PHP MVCPHP MVC
PHP MVC
 
Java Web - MVC básico com JSP e Servlets
Java Web - MVC básico com JSP e ServletsJava Web - MVC básico com JSP e Servlets
Java Web - MVC básico com JSP e Servlets
 
Desenvolvimento em Três Camadas com PHP, MVC e Ajax
Desenvolvimento em Três Camadas com PHP, MVC e AjaxDesenvolvimento em Três Camadas com PHP, MVC e Ajax
Desenvolvimento em Três Camadas com PHP, MVC e Ajax
 
PHP Jedi - Boas Práticas e Alta Performance
PHP Jedi - Boas Práticas e Alta PerformancePHP Jedi - Boas Práticas e Alta Performance
PHP Jedi - Boas Práticas e Alta Performance
 

Semelhante a Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos conceitos de prototipagem para web.

Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
thiagolima
 
Palestra urutai-mobile
Palestra urutai-mobilePalestra urutai-mobile
Palestra urutai-mobile
Rogerio Fontes
 

Semelhante a Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos conceitos de prototipagem para web. (20)

Hello Bootstrap!
Hello Bootstrap!Hello Bootstrap!
Hello Bootstrap!
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
 
Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_Desenvolvendo aplicacoes mobile_com_html_css_
Desenvolvendo aplicacoes mobile_com_html_css_
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
 
Google IO 2017 Extended - Cuiaba - Progressive Web Apps
Google IO 2017 Extended - Cuiaba - Progressive Web AppsGoogle IO 2017 Extended - Cuiaba - Progressive Web Apps
Google IO 2017 Extended - Cuiaba - Progressive Web Apps
 
Curso Marketing Digital Ana Paula Coelho
Curso Marketing Digital Ana Paula CoelhoCurso Marketing Digital Ana Paula Coelho
Curso Marketing Digital Ana Paula Coelho
 
Sites responsivos
Sites responsivosSites responsivos
Sites responsivos
 
Dica fundao-sites-responsivos-140528101304-phpapp02
Dica fundao-sites-responsivos-140528101304-phpapp02Dica fundao-sites-responsivos-140528101304-phpapp02
Dica fundao-sites-responsivos-140528101304-phpapp02
 
O papel do Front-End na UX
O papel do Front-End na UXO papel do Front-End na UX
O papel do Front-End na UX
 
Palestra urutai-mobile
Palestra urutai-mobilePalestra urutai-mobile
Palestra urutai-mobile
 
Marketing digital tecnologia da informação
Marketing digital   tecnologia da informaçãoMarketing digital   tecnologia da informação
Marketing digital tecnologia da informação
 
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
 
CV Alexandre R. de Castro
CV Alexandre R. de CastroCV Alexandre R. de Castro
CV Alexandre R. de Castro
 
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
 
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaSeminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec Cafelândia
 
Responsive Web Design - Introdução
Responsive Web Design - IntroduçãoResponsive Web Design - Introdução
Responsive Web Design - Introdução
 
Joomla daydf construindo um templare 2.0
Joomla daydf   construindo um templare 2.0Joomla daydf   construindo um templare 2.0
Joomla daydf construindo um templare 2.0
 
Um front end entre nós
Um front end entre nósUm front end entre nós
Um front end entre nós
 
Jquery Mobile
Jquery MobileJquery Mobile
Jquery Mobile
 
Cv alexandre rezendedecastro
Cv alexandre rezendedecastroCv alexandre rezendedecastro
Cv alexandre rezendedecastro
 

Último

Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Dirceu Resende
 

Último (6)

[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
 
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
 
Certificado - Data Analytics - CoderHouse.pdf
Certificado - Data Analytics - CoderHouse.pdfCertificado - Data Analytics - CoderHouse.pdf
Certificado - Data Analytics - CoderHouse.pdf
 
Concurso Caixa TI - Imersão Final - Rogério Araújo.pdf
Concurso Caixa TI - Imersão Final - Rogério Araújo.pdfConcurso Caixa TI - Imersão Final - Rogério Araújo.pdf
Concurso Caixa TI - Imersão Final - Rogério Araújo.pdf
 
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdfFrom_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
 
Apresentação Comercial VITAL DATA 2024.pdf
Apresentação Comercial VITAL DATA 2024.pdfApresentação Comercial VITAL DATA 2024.pdf
Apresentação Comercial VITAL DATA 2024.pdf
 

Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos conceitos de prototipagem para web.

  • 1. Bootstrap, desenvolvendo uma interface responsiva para aplicações web! @cristofersousa
  • 2. <h1> Olá!</h1> @cristofersousa @rafaelperatello Engineer Front-End Development Back-end Técnologo em Análise e Desenvolvimento de Sistemas – IFSP São Carlos Skills {UI & UX , Hardware (Arduino & Raspebery} Pizza, Cerveja e Catuaba!
  • 5. Media-Types, hãm!? 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.
  • 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.”
  • 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
  • 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.
  • 10. 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. Fonte: Forbes -2013
  • 11. Design Adaptativo vs Design Liquído
  • 12. Responsive Web Design || RWD Atualização do Google força lojas virtuais a investirem em design responsivo img[http://revistaw.com.br/blog/atualizacao-do-google-forca-lojas-virtuais-a-investirem-em-design-responsivo/]
  • 13. Boot quem? Bootstrap é um framework voltado para Front-End.
  • 15. O que podemos fazer com Bootstrap? O Bootstrap é utilizado para desenhar telas em HTML, que serão acessadas via navegador web ou dispositivo mobile.
  • 16. 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.
  • 17. Quem adota o bootstrap?
  • 18. Start!  Editor de código: Download Sublime3[ww.sublimetext.com/3]  Bootstrap - Download Bootstrap 3[www.getboostrap.com]  jQuery - Download latest ersion[http://jquery.com/download/]  Descompactando como fica no diretório:
  • 19. AgoMraã ao ps onhaa mvaai sfiscaar! sXé)ria!
  • 24. Mobile First “Para o infinito e além!” Lightyear, Buzz. <meta name="viewport“ content="width=device-width, initial-scale=1"> @cristofersousa
  • 25. Media Queries(Breakpoint) no Bootstrap /* 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) { ... }
  • 26. Entendendo as Grids 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
  • 27. Customize – Além do Azul e da font-family: Helvetica Neue http://bootswatch.com/
  • 28. Customize – font generator https://www.web-font-generator.com/
  • 30. Etapas - Vai Rubinho? • Modelo de Processo • Projeto rápido da interface e das funcionalidades • Concepção de fragmentos do sistema • Artefato construído iterativamente • Engenharia de Software • Representação dos requisitos • Interação Humano-Computador • Modelo de Interação entre usuário final e sistema Foco: avaliar resultados obtidos com o protótipo (Brown, 1996; Pressman, 2007; Spinelli; Rei, 2011)
  • 31. Por que prototipar interfaces?
  • 32. Modelos de IHC e prototipação (Brown, 1996; da Silva et al., 2005)
  • 33. Ferramentas de Prototipação • SketchFlow (Microsoft Blend) • Mockinbird • BalsamiqMockups • Cacoo • Mockflow - <http://www.mockflow.com/> • Microsoft Office Visio • OmniGraffle • Axure • PowerPoint • HTML+CSS
  • 35. Com que roupa eu vou? http://usablica.github.io/front-end-frameworks/compare.html
  • 38. Referências • 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/3cac1948eabda6e7a458fc1875a 1a25c217e82af/presentationfrontendfromscratcheventials.pdf • https://dlq8vi77lxj74.cloudfront.net/media/e55e91b2cc22ba117ba8d1546537f7a4c037cf67/4a8e62743fa9073d3d0eacbcca 2813966f87b1e5/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.