Design Responsivo Para WEB Com Bootstrap

  • View
    219

  • Download
    0

Embed Size (px)

Text of 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

    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