Design responsivo

  • View
    284

  • Download
    5

Embed Size (px)

DESCRIPTION

Workshop sobre Design Responsivo ministrado na FEUCTEC 2013

Text of Design responsivo

  • 1. Design Responsivo Rafael Frana

2. Apresentao H 10 anos no mercado Vestibular da UFRRJ 2003 2007 (HTML) Sistema Acadmico (Front-End / .Net) RJHost (Front-End) UFRRJ (Front-End / PHP) Casa da Moeda (Front-End / PHP / JAVA) e freelas (Front-End / PHP) 3. e para no esquecer Moderador do Frum do Tableless 4. O Que Voc Sente ao Navegar pelo Celular? 5. E em um aplicativo? 6. O Que Design Responsivo? um conceito utilizado para adaptar seu leiaute a cada dispositivo, sem perda de navegao ou contedo. 7. Algumas Formas de Tratar um Dispositivo Types All Braille Embossed Handheld Print Projection Screen Speech Tty Tv 8. Types all Para todos os dispositivos. Para sintetizadores de voz. O CSS 2 tem uma especificao de CSS chamada Aural, onde podemos formatar a voz dos sintetizadores.braille Para dispositivos tteis.embossed Para dispositivos que imprimem em braille. print Para impresso em papel.projectiontty Para dispositivos que utilizam uma grade fixa para exibio de caracteres, como por exemplo, teletypes, terminais, dispositivos portteis com display limitado.handheld Para dispositivos de mo. Normalmente com telas pequenas e banda limitada.speechtv Para dispositivos como televisores, ou seja, com baixa resoluo, quantidade de cores e scroll limitado. Para apresentaes, como PowerPoint.screen Para monitores ou outros dispositivos com telas coloridas e com resoluo adequada.Todos os nomes das medias so case-sensitive. 9. Por Que Media Queries? Escrevemos queries no atributo media. @media (min-width: 768px) { /* DECLARAES */ } @media (min-width: 600px) and (max-width: 1140px) { /* DECLARAES */ } @media (max-width: 600px) { /* DECLARAES */ } 10. Mas como vou saber o tamanho certo? 11. Talk is cheap! 12. Ok, Vamos Analisar! @media (min-width: 768px) { html, body { height: 100%; } .wrapper { min-height: 100%; height: auto; height: 100%; margin: 0 auto -120px; } .footer, .push { height: 120px; } } @media (min-width: 600px) and (max-width: 1140px) { #cities { width: 560px; } } @media (max-width: 600px) { #cities { width: 300px; } } body { background-image: url("../img/body-bg.png"); padding: 0; } header { background: url("../img/header-bg.png") repeat-x; padding-top: 50px; width: 100%; } 13. e para no esquecer Sorteio de mais uma caneca! ;-) 14. Bugs? No, No 15. Frameworks Foundation (http://foundation.zurb.com/) Boostrap (http://twitter.github.com/bootstrap/) Semantic Grid System (http://semantic.gs/) Frameless (http://framelessgrid.com/) Skeleton (http://www.getskeleton.com/) Golden Grid (http://goldengridsystem.com/) Fluid Baseline (http://fluidbaselinegrid.com/) Initializr (http://www.initializr.com/) 16. Obrigado pela Pacincia! Rafael Frana rafaelfms@gmail.com @euconectei fb/euconectei 21 8106 7464