design responsivo para web com bootstrap
TRANSCRIPT
-
8/9/2019 Design Responsivo Para WEB Com Bootstrap
1/35
Design responsivo pa
WEB com Bootstrap
Fernand
dovernan
Especialista em Gesto e Docncia Univers
-
8/9/2019 Design Responsivo Para WEB Com Bootstrap
2/35
Assunto de hoje...
Um pouco de Histria... Por que me preocupar com isso?
O que Web Design Responsivo (RWD)?
Conhecendo um pouco mais sobre RWD
Por onde comear?
O que Bootstrap
Relao SO x Browsers suportados
Recursos disponveis Vantagens de utilizar o Bootstrap
Desvantagens de utilizar o Bootstrap
Como funciona?
Alguns componentes...
Sites que utilizam bootstrap
-
8/9/2019 Design Responsivo Para WEB Com Bootstrap
3/35
Um pouco de histria...
Navegao web, em desktops e celulares jexiste h vrios anos...
Inicialmente, as resolues para sites webgiravam em torno de 1024 x 768 pixels e maisalguns ajustes entre os diversos browsers.
Por volta de 2006/2007 surgem os primeirosnavegadores p/ dispositivos mveis com suportea tecnologias como CSS, Javascript, etc.
Smartphones, Tablets, Netbooks, Notebooks,Ultrabooks e Smart TVs disseminam-se nomercado, com os mais diferentes tamanhos detela e resoluo.
Desenvolver um site que fique com um bomvisual em todos estes dispositivos torna-seimpossvel... Ser???
-
8/9/2019 Design Responsivo Para WEB Com Bootstrap
4/35
Por que me preocupar com isso
Fonte: http://www.cetic.br/usuarios/tic/2012/apresentacao-tic-domicilios-2012.pdf
-
8/9/2019 Design Responsivo Para WEB Com Bootstrap
5/35
Por que me preocupar com isso
Fonte: http://www.cetic.br/usuarios/tic/2012/apresentacao-tic-domicilios-2012.pdf
-
8/9/2019 Design Responsivo Para WEB Com Bootstrap
6/35
O que Web Design Responsivo (RW
O termo derivado da ideia do arquiteto e cientista Nicholaque definiu arquitetura responsiva como aquela no qual os aatravs de sensores so capazes de detectar variveis comotemperatura, entre outras e adequar-se de forma positiva.
No entanto foi Ethan Marcotte quem utilizou pela primeira ve
Responsive Web Design em seu artigo Responsive Web DesigA list Apart. Nesse artigo, Ethan compara o web design respoconceitos de Negroponte.
-
8/9/2019 Design Responsivo Para WEB Com Bootstrap
7/35
O que Web Design Responsivo (RW
Portanto, o termo web design responsivo refere se a uma tcestruturao HTML e CSS, que visa adaptar uma pgina webdiferentes dispositivos e resolues onde exibida.
-
8/9/2019 Design Responsivo Para WEB Com Bootstrap
8/35
Conhecendo um pouco mais sobre
A ideia que surge quando se fala em design responsivo, dedispositivo que est requisitando a pgina e com base nessafornecer uma pgina que seja melhor exibida.
Para identificar o dispositivo, precisamos entender a diferenTypes e Media Queries.
-
8/9/2019 Design Responsivo Para WEB Com Bootstrap
9/35
Conhecendo um pouco mais sobre
Media Types se baseiam em caractersticas fsicas dos dispositivotamanho da tela, nmero de cores, entre outras. Utilizadas desdCSS, permitiam fornecer o contedo com formataes especficdeterminado dispositivo.
Alguns tipos definidos pelo W3C so:
screen: computadores, ou qualquer dispositivocom bom nmero de cores.
print: impressoras
handheld: PDA e celulares com tela pequena
tv: para televises (resoluo muito menor que um monitor CRT)
Entre outras...
Por essa classificao dos tipos possvel notar que ela deixou dtornou-se obsoleta com o surgimento dos smartphones, tablets,
-
8/9/2019 Design Responsivo Para WEB Com Bootstrap
10/35
Conhecendo um pouco mais sobre
Media Queries a utilizao de Media Types com uma ou menvolvendo caractersticas para definir formataes para didispositivos.
Exemplo:
-
8/9/2019 Design Responsivo Para WEB Com Bootstrap
11/35
Conhecendo um pouco mais sobre
Outro conceito importante o de layout fludo, ou seja, o layser bem visualizado e se adequar as diferentes resolues utdispositivos existentes.
Exemplo de site com layout fludo
http://localhost/var/www/apps/conversion/tmp/scratch_8/exemplos/A%20Flexible%20Grid.htmhttp://localhost/var/www/apps/conversion/tmp/scratch_8/exemplos/A%20Flexible%20Grid.htmhttp://localhost/var/www/apps/conversion/tmp/scratch_8/exemplos/A%20Flexible%20Grid.htmhttp://localhost/var/www/apps/conversion/tmp/scratch_8/exemplos/A%20Flexible%20Grid.htmhttp://localhost/var/www/apps/conversion/tmp/scratch_8/exemplos/A%20Flexible%20Grid.htm -
8/9/2019 Design Responsivo Para WEB Com Bootstrap
12/35
Conhecendo um pouco mais sobre
Para obter esse layout fludo importante definir o ponto desite
-
8/9/2019 Design Responsivo Para WEB Com Bootstrap
13/35
Conhecendo um pouco mais sobre
Mas e agora, quais so os padres de resoluo adotados? 1280?
1024?
800?
600?
480?
Nenhuma das alternativas...
Infelizmente, no existe um padro de resoluo e isso gera enorme de combinaes, o que torna muito difcil a tarefa dlayout que fique perfeito em 100% dos dispositivos.
-
8/9/2019 Design Responsivo Para WEB Com Bootstrap
14/35
Conhecendo um pouco mais sobre
Por essa razo, comum trabalhar com grupos de resolueenglobar a maioria dos dispositivos. Exemplo:
Acima de 1200 pixelsDesktops com monitores widescreen
Entre 992 e 1199 pixelsMonitores antigos
Entre 768 e 991 pixelsTablets em formato paisagem
Entre 480 e 767 pixelsTablets em formato retrato
Entre 320 e 479 pixelsSmartphones em formato paisagem
Abaixo de 320 pixelsSmartphones em formato retrato
-
8/9/2019 Design Responsivo Para WEB Com Bootstrap
15/35
Por onde comear?
Primeiramente necessrio definir alguns pontos: Qual o pblico alvo?
Em quais dispositivos o site ser exibido?
Quais navegadores sero utilizados?
Qual o contedo do site?
Ter logomarca? Onde ficar?
Qual a localizao da navegao? Ter banner apresentando produtos e servios?
Ter blocos com imagens e textos curtos?
Exibir crditos?
Alguma parte do contedo pode ser ocultada ouagrupada em resolues menores?
-
8/9/2019 Design Responsivo Para WEB Com Bootstrap
16/35
Por onde comear?
J definidos estes pontos...
Evite:
Div's desnecessrias
Estilos CSS inlines(use sempre arquivos externos)
JS ou arquivos Flash sem plano B
Position absolute ou posicionamentos float desnecessrios
Cdigos redundantes ou cdigos que no so 100% teis
Que o usurio precise utilizar o zoom do dispositivo
-
8/9/2019 Design Responsivo Para WEB Com Bootstrap
17/35
Por onde comear?
Procure usar:
Doctype html5
Reset CSS
Cdigo simples e semntico
Tcnicas simples para elementos como barras de navegao, m
Grids flexveis, com colunas para organizar os contedos
Medidas em porcentagem
Lembre-se que os smartphones utilizam toucportanto procure manter um tamanho acess
-
8/9/2019 Design Responsivo Para WEB Com Bootstrap
18/35
Por onde comear?
Outro passo importante definir a meta tag viewport. Ela sepor informar ao navegador que a rea disponvel para o coest adaptada para dispositivos mveis, dispensando assim navegador reduza o site at que ele se encaixe na tela do Exemplo:
-
8/9/2019 Design Responsivo Para WEB Com Bootstrap
19/35
O que Bootstrap?
The most popular front-end framework for developing resmobile first projects on the web
(Site oficia
Desenvolvido pela equipe do Twitter, o Bootstrap um framesource compatvel com HTML5 e CSS3 que foi criado para au
desenvolvimento de web sites responsivos. Encontra-se atualmente na verso 3.1.1.
Disponvel para download em http://getbootstrap.com
-
8/9/2019 Design Responsivo Para WEB Com Bootstrap
20/35
Relao SO x Browser suportado
Fonte: Site oficial
Extra-oficialmente, o Bootstrap deve se comportar muito bem no CChrome e Firefox para Linux, assim como no Internet Explorer 7, emsejam oficialmente suportados. O mesmo ocorre com o Firefox pa
-
8/9/2019 Design Responsivo Para WEB Com Bootstrap
21/35
Recursos disponveis
Reset CSS
Estilo visual base pra maioria das tags
cones
Grids prontos pra uso
Componentes CSS
Plugins JavaScript Tudo responsivo e mobile-first
-
8/9/2019 Design Responsivo Para WEB Com Bootstrap
22/35
Vantagens de utilizar o Bootstra
Documentao simples e ampla
Feito para trabalhar com layouts responsivos
Inmeros componentes a disposio
Mantm padres
Funciona em todos os navegadores atuais (Chrome, Safari, FOpera).
-
8/9/2019 Design Responsivo Para WEB Com Bootstrap
23/35
Desvantagens de utilizar o Boots
Seu cdigo ter que se adequar aos padres do Bootstrap
Se nenhum ajuste visual for feito, seu site ter semelhanas ctambm usam bootstrap
-
8/9/2019 Design Responsivo Para WEB Com Bootstrap
24/35
Como funciona?
O Bootstrap trabalhJavascript e CSS qudevidamente orgapastas, empacotaddisponvel para dow
-
8/9/2019 Design Responsivo Para WEB Com Bootstrap
25/35
Como funciona?
Para organizar a disposio dos elementos no site, o Bootstragrid organizado em 12 colunas com larguras iguais e que pomescladas e combinadas de acordo com a necessidade dodesenvolvedor.
Fonte: NASCIMEN
-
8/9/2019 Design Responsivo Para WEB Com Bootstrap
26/35
Como funciona? Alm disso j disponibiliza classes prontas para trabalhar com a
resolues e com isso fornecer um design responsivo:
col-xs- : extra small. < 768px col-sm- : small (tablets). >= 768px
col-md- : medium (Desktops). >= 992px
col-lg- : large (Desktops). >= 1200px
Os sufixos xs, sm, md e lg tambm so usadvrios componentes do bootstrap.
-
8/9/2019 Design Responsivo Para WEB Com Bootstrap
27/35
Como funciona?
O mais interessante que uma tag pode receber vrias clascomportar de maneira diferente de acordo com a resoluo
-
8/9/2019 Design Responsivo Para WEB Com Bootstrap
28/35
Alguns componentes...
Glyphicons
Tabs
Dropdown
-
8/9/2019 Design Responsivo Para WEB Com Bootstrap
29/35
Alguns componentes...
Navbar
Breadcrumbs
Pagination
Labels
-
8/9/2019 Design Responsivo Para WEB Com Bootstrap
30/35
Alguns componentes...
Thumbnails
Progress bars
-
8/9/2019 Design Responsivo Para WEB Com Bootstrap
31/35
Alguns componentes...
Alerts
-
8/9/2019 Design Responsivo Para WEB Com Bootstrap
32/35
Alguns componentes...
Media Object
Entre outros...
-
8/9/2019 Design Responsivo Para WEB Com Bootstrap
33/35
Sites que utilizam o Bootstrap
Entre outras...
-
8/9/2019 Design Responsivo Para WEB Com Bootstrap
34/35
Mas minha apresentao termina
-
8/9/2019 Design Responsivo Para WEB Com Bootstrap
35/35
Referncias ALTERMANN, Dennis. Design Responsivo: Entenda o que a tcnica e como e
Disponvel em: http://www.midiatismo.com.br/o-mobile/design-responsivo-enttecnica-e-como-ela-funciona
ARRIGONI, Ricardo. Responsive Design: dicas para tornar seu site acessvel emresoluo. Disponvel em: http://www.devmedia.com.br/responsive-design-diseu-site-acessivel-em-qualquer-resolucao/28316#ixzz31amuMv2j
CAELUM. Bootstrap e formulrios HTML5. Disponvel em: http://www.caelum.cohtml-css-javascript/bootstrap-e-formularios-html5/#11-1-bootstrap-e-framewor
EIS, Diego. Introduo ao Responsive Web Design. Disponvel em:http://tableless.com.br/introducao-ao-responsive-web-design/
EIS, Diego. O que so Media Types do CSS?. Disponvel em: http://tableless.comedia-types/
GUERRATO, Dani. Design Responsivo na prtica: do rascunho ao digital. Dispo
http://tableless.com.br/design-responsivo-na-pratica-do-rascunho-ao-digita/ NASCIMENTO, Thiago. Desenvolvendo com Bootstrap 3: um framework front-e
pena!. Disponvel em: http://thiagonasc.com/desenvolvimento-web/desenvobootstrap-3-um-framework-front-end-que-vale-a-pena
Site oficial do Bootstrap. Disponvel em: http://getbootstrap.com
STAVARENGO. O que e como criar um Design Responsive. Disponvel em:http://stavarengo.com/public/post/O+que+%C3%A9+e+como+criar+um+Des
http://www.midiatismo.com.br/o-mobile/design-responsivo-entenda-o-que-e-a-tecnica-e-como-ela-funcionahttp://www.midiatismo.com.br/o-mobile/design-responsivo-entenda-o-que-e-a-tecnica-e-como-ela-funcionahttp://www.midiatismo.com.br/o-mobile/design-responsivo-entenda-o-que-e-a-tecnica-e-como-ela-funcionahttp://www.midiatismo.com.br/o-mobile/design-responsivo-entenda-o-que-e-a-tecnica-e-como-ela-funcionahttp://www.devmedia.com.br/responsive-design-dicas-para-tornar-seu-site-acessivel-em-qualquer-resolucao/28316#ixzz31amuMv2jhttp://www.devmedia.com.br/responsive-design-dicas-para-tornar-seu-site-acessivel-em-qualquer-resolucao/28316#ixzz31amuMv2jhttp://www.devmedia.com.br/responsive-design-dicas-para-tornar-seu-site-acessivel-em-qualquer-resolucao/28316#ixzz31amuMv2jhttp://www.devmedia.com.br/responsive-design-dicas-para-tornar-seu-site-acessivel-em-qualquer-resolucao/28316#ixzz31amuMv2jhttp://www.devmedia.com.br/responsive-design-dicas-para-tornar-seu-site-acessivel-em-qualquer-resolucao/28316#ixzz31amuMv2jhttp://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-1-bootstrap-e-frameworks-de-csshttp://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-1-bootstrap-e-frameworks-de-csshttp://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-1-bootstrap-e-frameworks-de-csshttp://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-1-bootstrap-e-frameworks-de-csshttp://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-1-bootstrap-e-frameworks-de-csshttp://tableless.com.br/introducao-ao-responsive-web-design/http://tableless.com.br/o-que-sao-media-types/http://tableless.com.br/o-que-sao-media-types/http://tableless.com.br/o-que-sao-media-types/http://tableless.com.br/o-que-sao-media-types/http://tableless.com.br/o-que-sao-media-types/http://tableless.com.br/design-responsivo-na-pratica-do-rascunho-ao-digita/http://thiagonasc.com/desenvolvimento-web/desenvolvendo-com-bootstrap-3-um-framework-front-end-que-vale-a-penahttp://thiagonasc.com/desenvolvimento-web/desenvolvendo-com-bootstrap-3-um-framework-front-end-que-vale-a-penahttp://thiagonasc.com/desenvolvimento-web/desenvolvendo-com-bootstrap-3-um-framework-front-end-que-vale-a-penahttp://thiagonasc.com/desenvolvimento-web/desenvolvendo-com-bootstrap-3-um-framework-front-end-que-vale-a-penahttp://thiagonasc.com/desenvolvimento-web/desenvolvendo-com-bootstrap-3-um-framework-front-end-que-vale-a-penahttp://getbootstrap.com/http://stavarengo.com/public/post/O+que+%C3%A9+e+como+criar+um+Design+Responsivehttp://stavarengo.com/public/post/O+que+%C3%A9+e+como+criar+um+Design+Responsivehttp://getbootstrap.com/http://thiagonasc.com/desenvolvimento-web/desenvolvendo-com-bootstrap-3-um-framework-front-end-que-vale-a-penahttp://tableless.com.br/design-responsivo-na-pratica-do-rascunho-ao-digita/http://tableless.com.br/o-que-sao-media-types/http://tableless.com.br/introducao-ao-responsive-web-design/http://www.caelum.com.br/apostila-html-css-javascript/bootstrap-e-formularios-html5/#11-1-bootstrap-e-frameworks-de-csshttp://www.devmedia.com.br/responsive-design-dicas-para-tornar-seu-site-acessivel-em-qualquer-resolucao/28316#ixzz31amuMv2jhttp://www.midiatismo.com.br/o-mobile/design-responsivo-entenda-o-que-e-a-tecnica-e-como-ela-funciona