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