Design Responsivo Para WEB Com Bootstrap

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

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