Upload
rafael-franca
View
292
Download
5
Embed Size (px)
DESCRIPTION
Workshop sobre Design Responsivo ministrado na FEUCTEC 2013
Citation preview
Design ResponsivoRafael França
Apresentação
• Há 10 anos no mercado• Vestibular da UFRRJ 2003 – 2007
(HTML)• Sistema Acadêmico (Front-
End / .Net)• RJHost (Front-End)• UFRRJ (Front-End / PHP)• Casa da Moeda (Front-End / PHP /
JAVA)• e freelas (Front-End / PHP)
… e para não esquecer
Moderador do Fórum do Tableless
O Que Você Sente ao Navegar pelo Celular?
… E em um aplicativo?
O Que é Design Responsivo?
É um conceito utilizado para adaptar seu leiaute a cada dispositivo, sem perda de navegação ou conteúdo.
Algumas Formas de Tratar um Dispositivo
• Types– All– Braille– Embossed– Handheld– Print– Projection– Screen– Speech– Tty– Tv
Types• all
– Para todos os dispositivos.• braille
– Para dispositivos táteis.• embossed
– Para dispositivos que “imprimem” em braille.
• handheld– Para dispositivos de mão. Normalmente
com telas pequenas e banda limitada.• print
– Para impressão em papel.• projection
– Para apresentações, como PowerPoint.• screen
– Para monitores ou outros dispositivos com
telas coloridas e com resolução adequada.• speech
– Para sintetizadores de voz. O CSS 2 tem uma especificação de CSS chamada Aural, onde podemos “formatar” a voz dos sintetizadores.
• tty– Para dispositivos que utilizam uma grade
fixa para exibição de caracteres, como por exemplo, teletypes, terminais, dispositivos portáteis com display limitado.
• tv– Para dispositivos como televisores, ou
seja, com baixa resolução, quantidade de cores e scroll limitado.
Todos os nomes das medias são case-sensitive.
Por Que Media Queries?
Escrevemos queries no atributo media.
@media (min-width: 768px) {/* DECLARAÇÕES */
}@media (min-width: 600px) and (max-width: 1140px) {
/* DECLARAÇÕES */}@media (max-width: 600px) {
/* DECLARAÇÕES */}
Mas como vou saber o tamanho certo?
Talk is cheap!
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%; }
… e para não esquecer
Sorteio de mais uma caneca! ;-)
Bugs? Não, Não…
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/)
Obrigado pela Paciência!
• Rafael França– [email protected]– @euconectei– fb/euconectei– 21 8106 7464