View
220
Download
0
Embed Size (px)
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.htm8/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