Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Layout Fluido

2,837 views

Published on

Criação de páginas com layout fluido

Published in: Technology
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Layout Fluido

  1. 1. LAYOUT FLUIDO
  2. 2. Layout Fluido • É a grande estrela hoje do Web Design Responsivo • Com a quantidade de dispositivos que renderizam página web hoje, não é possível simplesmente copiar medidas diretas do layout • O Layout Fluido utiliza medidas flexíveis
  3. 3. Layout Fixo • O layout fixo é aquele que utiliza pixels para determinar as larguras dos elementos do design • Não se adapta às alterações do campo de visão do dispositivo que o renderiza
  4. 4. Layout fixo
  5. 5. Layout fixo
  6. 6. Layout Fluido • Layouts fluidos utilizam unidades flexíveis (% , em) para larguras ao invés de pixels • Permite que haja fidelidade do design inicial da página • Layout se adapta de acordo com o campo de visão • Desafio • Se desapegar das medidas do projeto inicial
  7. 7. Medidas flexíveis • As mais utilizadas • % • em
  8. 8. Medidas Flexíveis • % • Utilizado para determinar as larguras dos elementos • A porcentagem é em relação ao tamanho do elemento pai • Pode ser utilizado para fontes • Tamanho relativo ao tamanho da fonte do elemento pai
  9. 9. % body { /* largura total da tela */ width: 100%; } section { /* 1/3 da página */ width: 33.33333%; /* padding de 10% do pai */ padding: 10%; }
  10. 10. Medidas Flexíveis • em • Normalmente utilizado para fontes • Medida sempre está relacionado à fonte base • Um font-size implícito equivale a 16px na maioria dos navegadores • 1em = 100% • 2em = 200%
  11. 11. em html { /* font-size base implícito equivalente a 16px */ } p{ /* 16px * 1.125 = 18px */ font-size: 1.125em; } h1 { /*dobro da fonte base */ font-size: 2em; } h2 { /* 50% maior do que o valor base */ font-size: 150%; /* 1.5em */ }
  12. 12. em • Pode ser usado em qualquer propriedade mas sempre significar uma relação com o tamanho da fonte • Útil quando a medida de algum elemento tem relação com texto, uma medida tipográfica • Ex: Espaçamento entre parágrafos p { margin: 0 1em; } p { margin: 0 5%; }
  13. 13. Flexibilidade nos elementos filhos • Vantagem • As medidas flexíveis afetam os elementos filhos (aninhados) • Cenário: • Quando o usuário aumenta a fonte no navegador pra ler melhor • todo o layout baseado em em é afetado
  14. 14. Os filhos herdam o tamanho base <html> <body> <article> <h1>Desenvolvimento Mobile</h1> <p>Ipsum lorum, ipsum lorum, ipsum lorum.</p> </article> </body> </html> article { font-size: 1.25em; } h1 { font-size: 2em; } p { font-size: 0.9em; }
  15. 15. Quais os valores reais article { font-size: 1.25em; } h1 { font-size: 2em; } p { font-size: 0.9em; }
  16. 16. rem • Nova medida • Como o em é relativo ao elemento pai, o gerenciamento do tamanho das fontes pode ficar complexo caso existam muitos niveis. • O rem sempre é relativo ao tamanho base do elemento root, o <html> • Para alterar tudo, altere o tamanho do font-size do elemento html
  17. 17. Quais os valores reais article { font-size: 1.25rem; } h1 { font-size: 2rem; } p { font-size: 0.9rem; }
  18. 18. No caso anterior • html e o body vão ter os 16 px base • O article terá 16px * 1.25 = 20px • O h1 tem 16px * 2 = 32px • O p vai ter 16px * 0.9 = 14px
  19. 19. viewport-units: vw e vh • Flexibiliza o tamanho de forma proporcional ao tamanho do navegador • 1vh -> 1% da largura da janela do navegador • h2 { font-size: 2vw; } • Pouco suporte dos navegadores
  20. 20. Utilizando o layout fluido
  21. 21. Utilizando o layout fluido • Mudança de paradigma • Pode ser uma tarefa árdua quando já se está acostumado a medidas fixas • O segredo é se concentrar nas proporções dos elementos do layout • Enxergar os as relações entre os elementos do layout ao invés de seus tamanhos fixos
  22. 22. Layout .olhar { width: 25%; float: left; }
  23. 23. Sobre boxes css • Suponha que existam 2 sections definidas pelas regras abaixo, eu teria um linha com 2 colunas? section { float: left; padding: 5%; width: 50%; }
  24. 24. Sobre boxes css • Cada section vai ter 60% da largura da página • Ficará uma embaixo da outra • Causa: o padding não é considerado no width • Isso é um efeito do box model
  25. 25. Box model • Não é o width que determina a largura final • O tamanho final de cada elemento é section { float: left; padding: 5%; width: 40%; }
  26. 26. Alterando o box-sizing • Fazer com o width já inclua os valores do padding e do border-width section { float: left; padding: 5%; width: 50%; } box-sizing: border-box;
  27. 27. Alteração do box-sizing • Cenário: O width do elemento está definido em relação ao elemento pai, mas você gostaria que o padding fosse uma relação com o font-size do elemento
  28. 28. Alteração do box-sizing section { box-sizing: border-box; float: left; padding: 1em; width: 50%; }
  29. 29. Alterando todo *{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
  30. 30. Utilizando o layout fluido
  31. 31. Utilizando layout fluido • Para converter um layout baseado em pixels para um baseado em proporções:
  32. 32. Utilizando layout fluido
  33. 33. Utilizando layout fluido
  34. 34. Utilizando layout fluido
  35. 35. Utilizando layout fluido
  36. 36. Utilizando layout fluido
  37. 37. Novos valores • 960/960 = 1 (100%) • 240/960 = 0,25 (25%) • 250/960 = 26,041667% • 260/960 = 27,083333% #principal {! margin: 10px 260px 0px 250px;! }! ! #principal {! margin: 10px 27.083333% 0px 26.041667%;! }! !
  38. 38. Para tudo funcionar como você espera <meta name="viewport” content="width=device-width, initial-scale=1" /> Evite: <meta name="viewport” content="width=device-width, user-scalable=no" /> <meta name="viewport” content="width=device-width, minimum-scale=1, maximum-scale=1" />
  39. 39. Restrição ao layout fluido
  40. 40. Restrição ao layout fluido • O layout fluido é a maneira de endereçar uma página aos vários dispositivos de tamanhos diferentes do dia de hoje • Mas, em certas situações, pode não ser a melhor opção deixar o layout fluir 100% sobre uma tela
  41. 41. Restrição ao Layout Fluido • Imagine este design em uma tela muito grande
  42. 42. Restrição ao layout fluido • Em telas muito grandes, alguns layouts fluidos podem ficar muito “esticados” • espaçamentos entre elementos muito grandes • É interessante pensar em um limite mínimo e máximo de tela em px • max-width • min-width
  43. 43. Restrição ao Layout Fluido body { max-width: 2000px; margin-left: auto; margin-right: auto; width: 100%; }
  44. 44. Imagens flexíveis
  45. 45. Imagens flexíveis • As imagens também precisam se adequar ao espaços de acordo com a resolução do aparelho • Regra CSS img { max-width: 100%; } limita a largura das imagens à largura do elemento que as contém
  46. 46. Recursos flexíveis • É possível aplicar a mesma ideia para outros recursos img, iframe, object, embed, video { height: auto; max-width: 100%; }
  47. 47. Imagens responsivas • Uma parte bem complicada de um bom design responsivo • As imagens possuem um número fixo de pixels • Mas e max-width: 100%; ??? • A imagem aumentar e diminui de acordo com o tamanho da tela • A imagem pode perder qualidade quando esticada
  48. 48. Imagens responsivas • Existem vários cenários onde a imagem deve responder ao contexto • Utilizar imagens diferentes, otimizadas para cada cenário: • Imagens grandes utilizadas em versão Desktop • Imagens bem definidas em telas de retina de alta resolução • Zoom nas imagens • Imagens diferentes para versões Desktop e Mobile devido ao layout
  49. 49. Por que? • Economia de bytes utilizando a imagem adequada à cada tamanho de tela • Qualidade visual na renderização de acordo com a resolução • Imagens de conteúdos diferentes para adaptação do design
  50. 50. Prefira CSS • Uma alternativa para evitar imagens responsivas é utilizar CSS • Quando possível recriar aspectos visuais do layout com técnicas que podem substituir imagens • Efeitos CSS3 • bordas arredondadas, sombras, gradientes
  51. 51. Prefira CSS • Vantagens • renderizado no navegador do cliente • ajustado para o tamanho da tela • ajustado para a resolução • facilita manutenções futuras
  52. 52. Bordas arredondadas • Utiliza-se através da regra border-radius
  53. 53. Bordas arredondadas
  54. 54. Texto e imagens • Quando possível não adicione texto às imagens • Texto é fluido e pode configurado facilmente através de CSS • Texto em imagens • não podem ser indexados no Google • não tem como alterar a posição de acordo com a resolução
  55. 55. Icon Fonts • Hoje é possível através do @font-face carregar para sua página fontes customizadas • Uma alternativa para o uso de imagens é a utilização de família de fontes de ícones • Vantagens • fontes são bem renderizadas nas telas • um arquivo só de fonte pode conter vários ícones juntos • você pode customizar cor e tamanho
  56. 56. http://icomoon.io/app/
  57. 57. Imagens e Media Queries • Na maioria dos casos é preciso utilizar imagens nos formatos clássicos (PNG, JPEG) • Cenários • Enviar imagens nos tamanhos ideais para cada tela • backgrounds • <img>
  58. 58. Imagens ideais para cada resolução • Uma imagem de 960px para Desktop, mas que não faz sentido ser enviada para o mobile
  59. 59. Imagens ideais para cada resolução • Caso de imagem de fundo .banner { background-image: url(banner-mobile.jpg); } @media (min-width: 400px) { .banner { background-image: url(banner-medio.jpg); } } @media (min-width: 700px) { .banner { background-image: url(banner-grande.jpg); } }
  60. 60. Imagem seletiva com <img> • Ainda não existe uma flexibilidade com media queries • Alternativas • Rertirar todas as tags <img> e colocar todas as imagens via CSS • Algumas imagens possuem significado semântico, não são apenas peças do layout • Utilizar JS para alterar o src da imagem de acordo com a resolução da tela • Pode haver o carregamento de todas as imagens
  61. 61. Futuro • Responsividade com HTML5 • Novo atributo srcset para a tag <img> que permite listar um conjunto de arquivos de acordo com o viewport <img srcset="mobile.jpg 400w, medio.jpg 700px, grande.jpg"> .banner { background: image-set(url(mobile.jpg) 400w, url(grande.jpg)); }
  62. 62. Futuro • <picture> <picture> <source src="mobile.jpg"> <source src="grande.jpg” media="(min-width: 700px)”> <img src="fallback.jpg”> </picture>
  63. 63. PictureFill • Semelhante a especificação de <picture>, utiliza JS e os elementos atuais do HTML5 para carregar a imagem responsivamente <div data-picture> <div data-src="mobile.jpg"></div> <div data-src="grande.jpg” data-media="(min-width: 700px)"></div> <noscript><img src="fallback.jpg"></noscript> </div> https://github.com/scottjehl/picturefill http://scottjehl.github.io/picturefill/
  64. 64. Exemplo PictureFill http://www.fa7.edu.br/webmobile/picturefill.zip
  65. 65. PictureFill
  66. 66. Soluções de servidor • Uma estratégia em que se coloca apenas uma imagem grande com boa definição um servidor externo redimensiona a imagem dinamicamente • Sencha IoSrc • http://www.sencha.com/products/io) • ReSrc • http: //www.resrc.it/ • Thumbor • https: //github.com/globocom/thumbor
  67. 67. Sencha IoSRC <img src='http://sencha.com/files/u.jpg' alt='My large image' />
  68. 68. Sencha IoSrc <img src='http://src.sencha.io/http://sencha.com/files/u.jpg' alt='My smaller image' />
  69. 69. Sencha IoSrc <img src='http://src.sencha.io/320/200/http://sencha.com/files/u.jpg' alt='My constrained image' width='320' height='200' />

×