home home

o bbburp! o bbburp!

artigos artigos

categorias categorias

d um al! d um al!

Buscar

O Cenrio do Web Design Responsivo Site responsivo muito mais que media queries, O Cenrio do Web breakpoints e redimensionamento de imagens. Na Site responsivo muito mais que media queries, Design Smashing Magazine, Responsivo Stphanie Walter mostra o breakpoints e redimensionamento de imagens. Na
que , o que ser possvel, e o que precisa ser Smashing Magazine, Stphanie Walter mostra o melhorado no RWD. que , o que ser possvel, e o que precisa ser
DESENVOLVIMENTO DESIGN melhorado no RWD. DESENVOLVIMENTO DESIGN
17 17

EXPERINCIA DO USURIO EXPERINCIA DO USURIO

MOBILE MOBILE

02
jul

6 6

02 jul

Publicado em 02 Julho 2013 Publicado em responsivo 02 Julho 2013 O Web design est por a h alguns anos, e foi destaque
em 2012. Muitas estrelas da web, como Brad Frost e Luke Wroblewski, O Web design responsivo est por a h alguns anos, e foi destaque possuem vasta experincia neste tema e tm nos ajudado a fazer em 2012. Muitas estrelas da web, como Brad Frost e Luke Wroblewski, grandes melhorias. Mesmo assim, ainda h muito a ser feito. possuem vasta experincia neste tema e tm nos ajudado a fazer grandes melhorias. assim, hfazer muito a ser Neste artigo, vamosMesmo ver o que j ainda possvel hoje, o feito que .ser possvel no futuro - usando propriedades ainda no padronizadas Neste artigo, vamos ver o que j possvel fazer hoje, o que ser (como CSS nvel 4 e API's do HTML5) - e o que ainda precisa ser possvel no futuro - usando propriedades ainda no padronizadas melhorado. Este no um artigo to completo, por isso no (como CSS nvel 4 e API's do HTML5) - e o que ainda precisa ser entraremos a fundo em cada tcnica, entretanto, voc ter links e melhorado. Este no um artigo to completo, por isso no referncias para explorar por conta prpria. entraremos a fundo em cada tcnica, entretanto, voc ter links e referncias para explorar por conta prpria.

Newsletters
Acompanhe o bbburp! e receba notificaes dos novos posts por Newsletters email! Acompanhe o bbburp! e receba notificaes dos novos posts por cadastre cadastre seu e-mail... email!
6 6 17 17

Bbburp
Curtir 275 pessoas curtiram Bbburp.

O CENRIO DAS IMAGENS NO WEB DESIGN RESPONSIVO

H um aspecto melhor para comear a falar no web design responsivo O CENRIO DAS IMAGENS NO WEB DESIGN RESPONSIVO que no seja imagens? Este at agora tem sido o tpico principal. E H um aspecto melhor para comear a falar no web design responsivo fica cada vez mais importante com a chegada das telas de alta que no seja imagens? Este at agora tem sido o tpico principal. E densidade. E quando digo alta densidade, quero dizer telas com uma fica cada vez mais importante com a chegada das telas de alta proporo de pixel maior que 2; esses dispositivos so chamados pela densidade. E quando digo alta densidade, quero dizer telas com uma Apple de tela retina, e pelo Google de XHDPI. No web design proporo de pixel maior que 2; esses dispositivos so chamados pela responsivo, as imagens vem relacionadas a dois grandes desafios: Apple de tela retina, e pelo Google de XHDPI. No web design responsivo, as imagens vem relacionadas a dois grandes desafios:

@bbburp

Seguir

"Sendo Criativo com Usabilidade". Artigo @bbburp da @DesignerDepot traduzido no "Sendo Criativo com Usabilidade". Artigo @bbburp http://t.co/TnT9D9YsQP da @DesignerDepot traduzido no 3 days ago @bbburp http://t.co/TnT9D9YsQP 3 days ago

tamanho e desempenho. tamanho desempenho. A maioria e dos designers buscam a perfeio no pixel, porm imagens de tamanho "normal" em dispositivos de alta densidade aparecem A maioria dos designers buscam a perfeio no pixel, porm imagens pixeladas e borradas. Servir imagens com o dobro do tamanho a esses de tamanho "normal" em dispositivos de alta densidade aparecem dispositivos parece ser tentador no mesmo? No entanto, isso pode pixeladas e borradas. Servir imagens com o dobro do tamanho a esses criar um problema de performance, pois imagens com o dobro do dispositivos parece ser tentador no mesmo? No entanto, isso pode tamanho levam mais tempo para carregar, e usurios de dispositivos criar um problema de performance, pois imagens com o dobro do com alta densidade de pixels nem sempre tem a largura de banda tamanho levam mais tempo para carregar, e usurios de dispositivos necessria para fazer o download dessas imagens. Alm disso, com alta densidade de pixels nem sempre tem a largura de banda dependendo do pas em que o usurio vive, esta largura de banda necessria para fazer o download dessas imagens. Alm disso, pode ser bem cara. dependendo do pas em que o usurio vive, esta largura de banda pode ser bem cara. afeta dispositivos menores: Por que um O segundo problema dispositivo teria que fazer o download de uma imagem de 700 pixels O segundo problema afeta dispositivos menores: Por que um quando ele s necessita de uma de 300? Teramos uma maneira de dispositivo teria que fazer o download de uma imagem de 700 pixels "cropar" essas imagens para que usurios de dispositivos menores quando ele s necessita de uma de 300? Teramos uma maneira de possam focar no que realmente importa a eles? "cropar" essas imagens para que usurios de dispositivos menores possam focar no que realmente a eles? Duas solues de marcao: O importa elemento <picture> e o atributo srcset Duas solues de marcao: O elemento <picture> e o atributo srcset O primeiro passo para resolver o desafio de imagens responsivas mudar a marcao das imagens embutidas em uma pgina HTML. O primeiro passo para resolver o desafio de imagens responsivas mudar a marcao das imagens embutidas uma pgina HTML. O "Responsive Images Community Group" em apoia a proposta de um elemento novo e mais flexvel, o elemento picture. O conceito usar O "Responsive Images Community Group" apoia a proposta de um as j to conhecidas media queries para servir imagens diferentes a elemento novo e mais flexvel, o elemento picture. O conceito usar diferentes dispositivos. Assim, dispositivos menores receberiam as j to conhecidas media queries para servir imagens diferentes a imagens menores. Funciona um pouco como a marcao para vdeo, diferentes dispositivos. Assim, dispositivos menores receberiam mas com imagens diferentes sendo refenciadas no elemento de imagens menores. Funciona um pouco como a marcao para vdeo, origem. mas com imagens diferentes sendo refenciadas no elemento de origem. O cdigo na especificao proposta fica da seguinte forma: O1 cdigo na especificao proposta fica . < p i c t u r e w i d t h = " 5 0 0 " h e i g h t = " 5 0 0 " > da seguinte forma:
2 . < s o u r c e m e d i a = " ( m i n w i d t h :4 5 e m ) "s r c = " l a r g e . j p g " > p i c t e w i d t h = " 5 0 0 " h e g h t = " 5 0 0 " > 3 . < < s o u r c e m e d i a = " ( m i n w i d t h : 1 8 e m ) "s r c = " m e d . j p g " > s o u r c e s < m e d i a = " ( m i n w i d t h :4 5 e m ) "s r c = " l a r g e . j p g " > 4 . s o u r c e r c = " s m a l l . j p g " > s o u r c e m e d i = " ( m i n w i d h : 1 8 e m ) "s r c = " m e d . j p g " > 5 . < i m g s r c = " s m a l l . j p g " a l t = " " > s o u r c e < s r c = " s m a l l . j p g " > 6 . p > A c c e s s i b l e t e x t < / > i m g < s r c = " s m a l l . j p g "a l t = " " > 7 . < / p i c t u r e > p p < > A c c e s s i b l e t e x t < / > < / p i c t u r e >

RT @tableless: Padres Complexos de Navegao no Design Responsivo RT @tableless: Padres Complexos de http://t.co/wWR8MmRClw Uma Navegao no Design Responsivo traduo do @bbburp para o Tableless. http://t.co/wWR8MmRClw Uma 4 days ago traduo do @bbburp para o Tableless. RT @tableless 4 days ago : Survey do Tableless - A pesquisa dos desenvolvedores web para RT @tableless: Survey do Tableless - A conhecermos melhor nosso mercado! pesquisa dos desenvolvedores web para DIVULGUE! http://t.co/ZfN2aI conhecermos melhor nosso mercado! 4 days ago DIVULGUE! http://t.co/ZfN2aI 4 days ago

+ Categorias + Categorias Ns adoramos!

A List Apart Ns adoramos! Behance A List Apart Brad Frost Behance Dribbble Brad Frost Mailchimp Dribbble Smashing Magazine Mailchimp Tableless Smashing Magazine Tuts+Hub Tableless Web Designer Depot Tuts+Hub Web Designer Depot
escolha uma categoria...

Se oferecer fontes diferentes para imagens possvel, poderamos tambm imaginar o fornecimento de imagens com recortes diferentes Se oferecer fontes diferentes para imagens possvel, poderamos e focar naquilo que realmente importa aos dispositivos menores. O tambm imaginar o fornecimento de imagens com recortes diferentes tpico "Art Direction" da W3C mostra um belo exemplo do que e focar naquilo que realmente importa aos dispositivos menores. O poderia ser feito. tpico "Art Direction" da W3C mostra um belo exemplo do que poderia ser feito. (Imagem: Egor Pasko) (Imagem: A soluo Egor vem Pasko sendo) discutida pelo W3C Responsive Images Community Group mas, at onde sabemos, ainda no utilizvel por A soluo vem sendo discutida pelo W3C Responsive Images Community Group mas, at onde sabemos, ainda no utilizvel por

nenhum browser. Um polyfill chamado Picturefill est disponvel, e faz praticamente a mesma coisa. Utiliza uma div e um atributo na sintaxe nenhum browser. Um polyfill chamado Picturefill est disponvel, e faz por questes de segurana. praticamente a mesma coisa. Utiliza uma div e um atributo na sintaxe por questes de segurana. A segunda proposta para a marcao de imagens responsivas foi feita pela Apple para a W3C e chamada de "atributo srcset"; Ela A segunda proposta para a marcao de imagens responsivas foi feita equivalente ao image-set() (propriedade CSS nvel 4). A proposta deste pela Apple para a W3C e chamada de "atributo srcset"; Ela atributo forar os navegadores a selecionar um recurso apropriado equivalente ao image-set() (propriedade CSS nvel 4). A proposta deste do set, ao invs de baixar o conjunto. atributo forar os navegadores a selecionar um recurso apropriado do set, aoHTML invs de baixar o conjunto. A sintaxe para esta proposta se baseia na prpria tag img, e o exemplo na especificao fica desta forma: A sintaxe HTML para esta proposta se baseia na prpria tag img, e o exemplo na especificao fica desta 1 . < i m g a l t = " T h eB r e a k f a s tC o m b o " forma:
2 . s r c = " b a n n e r . j p e g " i m g a l t = " T h e B r e a k f a s tC o m b o " 3 . < s r c s e t = " b a n n e r H D . j p e g 2 x , s r c = " b a n n e r . j p e g " 4 . b a n n e r p h o n e . j p e g1 0 0 w , s r c s e t = " H D . j p e g 2 x , 5 . b a n n e r p h o n e H D . j p e g1 0 0 w2 x " > b a n n e r p h o n e . j p e g1 0 0 w , b a n n e r p h o n e H D . j p e g1 0 0 w2 x " >

Como voc pode ver a sintaxe no no to intuitiva. Os valores da tag consistem em uma string separada por vrgulas. Os valores do Como voc pode ver a sintaxe no no to intuitiva. Os valores da atributo so os nomes ou URL's de vrias imagens, a densidade de tag consistem em uma string separada por vrgulas. Os valores do pixels do dispositivo e o tamanho mximo da viewport a que se atributo so os nomes ou URL's de vrias imagens, a densidade de destina. pixels do dispositivo e o tamanho mximo da viewport a que se destina. Numa linguagem clara, o que o trecho acima diz : Numa linguagem clara, o que o trecho acima diz : A imagem padro banner.jpeg . O dispositivo que tiver um pixel ratio maior do que 2 deve usar A padro o imagem banner-HD.jpeg . banner.jpeg. O dispositivo queum tiver um pixel ratio maior do que 2 deve usar Dispositivos com tamanho mximo da viewport de 100w o banner-HD.jpeg. deve utilizar o banner-phone.jpeg. Dispositivos com um tamanho mximo da viewport de 100w Dispositivos com um tamanho mximo da viewport de 100w e deve utilizar o banner-phone.jpeg. um pixel ratio maior que 2 devem utilizar o banner-phoneDispositivos com um tamanho mximo da viewport de 100w e um pixel ratio maior que 2 devem utilizar o banner-phone-

HD.jpeg. HD.jpeg. Caso o atributo srcset no seja suportado, a primeira fonte a imagem padro. O sufixo 2x para o banner-HD.jpeg significa que esta imagem Caso o atributo srcset no seja suportado, a primeira fonte a imagem em particular deveria ser usada para dispositivos com um pixel ratio padro. O sufixo 2x para o banner-HD.jpeg significa que esta imagem maior que 2, e o 100w no banner-phone.jpeg representa o tamanho em particular deveria ser usada para dispositivos com um pixel ratio mnimo da viewport em que esta imagem deve ser utilizada. Devido a maior que 2, e o 100w no banner-phone.jpeg representa o tamanho sua complexidade, a sintaxe do atributo srcset ainda no foi mnimo da viewport em que esta imagem deve ser utilizada. Devido a implementada nos navegadores. sua complexidade, a sintaxe do atributo srcset ainda no foi implementada nos navegadores. A sintaxe da propriedade CSS image-set() funciona praticamente da mesma forma e permite que voc carregue uma determinada imagem A sintaxe da propriedade CSS image-set() funciona praticamente da de background tendo como base a resoluo da tela: mesma forma e permite que voc carregue uma determinada imagem de background tendo base resoluo da tela: 1 . b a c k g r o u n d i m a g e :como i m a g e s e t ( a " f o o . p n g "1 x ,
2 . " f o o 2 x . p n g " 2 x , a c k g r o u n d i m a g e : m a g e s e t ( f o o . p n g "1 x , 3 . b " f o o p r i n t . p n g "i 6 0 0 d p i ) ; " " f o o 2 x . p n g " 2 x , " f o o p r i n t . p n g " 6 0 0 d p i) ;

Esta proposta ainda esta em fase de projeto na W3C, e por enquanto funciona no Safari (6+) e no Chrome (21+). Esta proposta ainda esta em fase de projeto na W3C, e por enquanto funciona (6+)Compresso e no Chrome Formatosno de Safari Imagem, e(21+). SVG: A mudana de como trabalhamos com imagens na web. Formatos de Imagem, Compresso e SVG: A mudana de como trabalhamos Como podem com ver, imagens as tentativas na web. em encontrar um novo formato de marcao para imagens ainda so altamente experiementais.Isto por si Como podem ver, as tentativas em encontrar um novo formato de s levantou uma questo sobre formatos de imagens. Podemos marcao para imagens ainda so altamente experiementais.Isto por si conceber uma soluo responsiva para mudar a forma como lidamos s levantou uma questo sobre formatos de imagens. Podemos com eles? conceber uma soluo responsiva para mudar a forma como lidamos com eles? passo seria buscar formatos alternativos de imagens que O primeiro tenham uma melhor taxa de compresso. O Google, por exemplo, O primeiro passo seria buscar formatos alternativos de imagens que desenvolveu um novo formato de imagem chamado WebP, o qual tenham uma melhor taxa de compresso. O Google, por exemplo, 26% menor que o PNG e 25 a 34% menor que o JPEG. O formato desenvolveu um novo formato de imagem chamado WebP, o qual suportado pelo Chrome, Opera, Yandex, Android e Safari, e pode ser 26% menor que o PNG e 25 a 34% menor que o JPEG. O formato ativado no Internet Explorer usando o Google Chrome Frameplugin. suportado pelo Chrome, Opera, Yandex, Android e Safari, e pode ser O problema principal deste formato que o firefox no tem planos de ativado no Internet Explorer usando o Google Chrome Frameplugin. implement-lo. Sabendo disto, por enquanto, o seu uso generalizado O problema principal deste formato que o firefox no tem planos de improvvel. implement-lo. Sabendo disto, por enquanto, o seu uso generalizado improvvel. Outra ideia que est ganhando popularidade so as imagens JPEG progressivas. Estas imagens so, como o nome sugere, Outra ideia que est ganhando popularidade so as imagens JPEG progressivamente renderizadas. A primeira renderizao embaada, progressivas. Estas imagens so, como o nome sugere, ento a imagem vai progressivamente ganhando nitidez. J as imagens progressivamente renderizadas. A primeira renderizao embaada, JPEG no-progressivas so renderizadas de cima pra baixo. Em seu ento a imagem vai progressivamente ganhando nitidez. J as imagens artigo "JPEG's progressivos: Uma nova boa prtica", Ann Robson JPEG no-progressivas so renderizadas de cima pra baixo. Em seu afirma que o JPEG progressivo aparenta ser mais veloz que o JPEG artigo "JPEG's progressivos: Uma nova boa prtica", Ann Robson baseline. Um JPEG progressivo d ao usurio uma impresso geral afirma que o JPEG progressivo aparenta ser mais veloz que o JPEG sobre a imagem antes mesmo de ela ser totalmente carregada, o que baseline. Um JPEG progressivo d ao usurio uma impresso geral beneficia a experincia do usurio. sobre a imagem antes mesmo de ela ser totalmente carregada, o que beneficia a experincia do usurio.

Uma outra soluo aos problemas de performance e tamanho de imagem est em alterar a taxa de compresso das imagens. Durante Uma outra soluo aos problemas de performance e tamanho de muito tempo, pensamos que o alargamento da taxa de compresso de imagem est em alterar a taxa de compresso das imagens. Durante uma imagem prejudicaria a sua qualidade. Entretanto, Daan Jobsis fez muito tempo, pensamos que o alargamento da taxa de compresso de uma extensa pesquisa sobre o assunto e escreveu um artigo a respeito uma imagem prejudicaria a sua qualidade. Entretanto, Daan Jobsis fez chamado "Retina Revolution". Em seus experimentos, ele testou uma extensa pesquisa sobre o assunto e escreveu um artigo a respeito diferentes tamanhos de imagens e taxas de compresso, o que gerou chamado "Retina Revolution". Em seus experimentos, ele testou uma soluo muito interessante. Se voc dobrar o tamanho de uma diferentes tamanhos de imagens e taxas de compresso, o que gerou imagem, mas tambm usar uma taxa de compresso mais alta, a uma soluo muito interessante. Se voc dobrar o tamanho de uma imagem ter um arquivo com um tamanho menor que o original, mas imagem, mas tambm usar uma taxa de compresso mais alta, a ainda sero ntidas em telas normais e de alta densidade. Com esta imagem ter um arquivo com um tamanho menor que o original, mas tcnica, Jobsis reduziu em 75% o peso da imagem. ainda sero ntidas em telas normais e de alta densidade. Com esta tcnica, Jobsis reduziu em 75% o peso da imagem.

*Demonstrao de compresso de imagens por Daan Jobsis.

Dadas as dores de cabea das imagens responsivas, a ideia de ganhar a independncia do pixel a partir de imagens, sempre que possvel, Dadas as dores de cabea das imagens responsivas, a ideia de ganhar est seduzindo cada vez mais designers e desenvolvedores. O formato a independncia do pixel a partir de imagens, sempre que possvel, SVG, por exemplo, pode ser usado para criar todos os elementos da est seduzindo cada vez mais designers e desenvolvedores. O formato interface de um website independente da resoluo. Os elementos SVG, por exemplo, pode ser usado para criar todos os elementos da sero dimensionados para dispositivos menores e no ficaro interface de um website independente da resoluo. Os elementos pixelados nos dispositivos de alta densidade de pixels. Font icons so sero dimensionados para dispositivos menores e no ficaro outra tendncia crescente. Eles envolvem o uso de uma fonte, onde pixelados nos dispositivos de alta densidade de pixels. Font icons so os caracteres alfanumricos so substitudos por cones glifos, dando outra tendncia crescente. Eles envolvem o uso de uma fonte, onde a flexibilidade que uma fonte oferece. Infelizmente, esta soluo ainda os caracteres alfanumricos so substitudos por cones glifos, dando no funciona com imagens, o que faz com que seja ansiosamente a flexibilidade que uma fonte oferece. Infelizmente, esta soluo ainda esperado uma marcao ou formato de imagem vivel. no funciona com imagens, o que faz com que seja ansiosamente esperado uma marcao ou formato de imagem vivel.

*Demonstrao de compresso de imagens por Daan Jobsis.

O DESAFIO DO LAYOUT RESPONSIVO: REORGANIZAR E TRABALHAR O CONTEDO SEM TOCAR NO HTML? O DESAFIO DO LAYOUT RESPONSIVO: REORGANIZAR E Sejamos realistas, os grids fluidos usados atualmente, produzidos com TRABALHAR O CONTEDO SEM TOCAR NO HTML?
floats e blocos inline, so um pobre improviso aguardando uma Sejamos realistas, os grids fluidos usados atualmente, produzidos com soluo melhor. Trabalhar com o layout e rearranjar blocos numa floats e blocos inline, so um pobre improviso aguardando uma pgina mobile sem recorrer ao JavaScript hoje em dia um pesadelo, soluo melhor. Trabalhar com o layout e rearranjar blocos numa e no nem um pouco flexvel. Isto algo crucial a websites criados pgina mobile sem recorrer ao JavaScript hoje em dia um pesadelo, com CMS, onde o designer no pode alterar o HTML de cada pgina e no nem um pouco flexvel. Isto algo crucial a websites criados ou verso do site. com CMS, onde o designer no pode alterar o HTML de cada pgina ou verso site. E a, comodo isto pode ser melhorado? E a, como isto pode ser melhorado?

Quatro Solues com CSS3 que abordam o problema do Layout Flexvel Quatro Solues com CSS3 que abordam o problema do Layout Flexvel A soluo mais bvia possvel o modelo de box flexvel do CSS3 (ou flexbox). Seu status atual a de "candidato a recomendao" na W3C, A soluo mais bvia possvel o modelo de box flexvel do CSS3 (ou e suportado pela maioria dos browsers mobile e desktop (no IE flexbox). Seu status atual a de "candidato a recomendao" na W3C, comeou na verso 10). O model permite reorganizar facilmente os e suportado pela maioria dos browsers mobile e desktop (no IE elementos na tela, independente do HTML. Voc tambm pode alterar comeou na verso 10). O model permite reorganizar facilmente os o fluxo e a orientao do box, distribuir o espao e alinh-lo de elementos na tela, independente do HTML. Voc tambm pode alterar acordo com o contexto. Abaixo um exemplo de layout que poderia o fluxo e a orientao do box, distribuir o espao e alinh-lo de ser reorganizado para mobile. A sintaxe ficaria assim: acordo com o contexto. Abaixo um exemplo de layout que poderia ser reorganizado 1 . . p a r e n t { para mobile. A sintaxe ficaria assim:
2 . 3 . 4 . 5 . 6 . 7 . 8 . d i s p l a y :f l e x ; . p a r e n t { f l e x f l o w :c o l u m n ;/ *e x i b ei t e n sn ac o l u n a* / i s p l a y :f l e x ; } d f l e x f l o w :c o l u m n ;/ *e x i b ei t e n sn ac o l u n a* / } . c h i l d r e n{ o r d e r :1 ;/ *m u d aao r d e md o se l e m e n t o s* / . c h i l d r e n{ } o r d e r :1 ;/ *m u d aao r d e md o se l e m e n t o s* / }

O artigo "CSS3 Flexible Box Layout Explained" dar a voc uma compreenso mais profunda de como o flexbox funciona. (nota do O artigo "CSS3 Flexible Box Layout Explained" dar a voc uma tradutor: o bbburp traduziu um excelente artigo sobre flexbox) compreenso mais profunda de como o flexbox funciona. (nota do tradutor: o bbburp traduziu um excelente artigo sobre flexbox ) Outra soluo bastante prxima do conceito flexbox de reordenao de blocos na pgina, porm com JavaScript, o Relocate. Outra soluo bastante prxima do conceito flexbox de reordenao de blocos na tipo pgina, porm que comhoje JavaScript, Relocate . Um segundo de layout, em dia o bastante utilizado no design responsivo, o layout multiple-column do CSS3. O mdulo Um segundo tipo de layout, que hoje em dia bastante utilizado no est no estgio de "candidato a recomendao" na W3C, e funciona design responsivo, o layout multiple-column do CSS3. O mdulo muito bem na maioria dos browsers (aguardado para IE9 e abaixo). A est no estgio de "candidato a recomendao" na W3C, e funciona principal vantagem deste model que o contedo pode fluir de uma muito bem na maioria dos browsers (aguardado para IE9 e abaixo). A coluna a outra, proporcionando um ganho enorme na flexibilidade. No principal vantagem deste model que o contedo pode fluir de uma que diz respeito a responsividade, o nmero de colunas pode ser coluna a outra, proporcionando um ganho enorme na flexibilidade. No alterado de acordo com o tamanho da viewport. que diz respeito a responsividade, o nmero de colunas pode ser alterado de acordo com o viewport. possvel apenas ajustar o tamanho tamanho da das colunas e deixar com que o browser calcule o seu nmero de acordo com o espao disponvel. possvel apenas ajustar o tamanho das colunas e deixar com que o Tambm possvel ajustar o nmero de colunas, com gaps e regras browser calcule o seu nmero de acordo com o espao disponvel. entre elas, e deixar que o browser calcule a sua largura. Tambm possvel ajustar o nmero de colunas, com gaps e regras entre elas, e deixar que o browser calcule a sua largura.

A sintaxe se parece com isto: A1 sintaxe se parece . . c o n t a i n e r { com isto:

2 . 3 . 4 . 5 . 6 . 7 . 8 . 9 . 1 0 . 1 1 . 1 2 . c o l u m n w i d t h :1 0 e m; . c o n t a i n e { / * O b r o w s e rv a ic r i a ru m ac o l u n ad e1 0 e m . w i d t h c o l u n : 1 0 e m ; O n m e r o d e c o l u n a s v a id e p e n d e rd o se s p a od i s p o n v e l* / *Ob r o w s e rv a ic r i a ru m ac o l u n ad e1 0 e m . } / On m e r od ec o l u n a sv a id e p e n d e rd o se s p a od i s p o n v e l* / } . c o n t a i n e r{ c o l u m n s :5 ; . c o n t a i n e r { / * O b o w s e rv a ic r i a r5c o l u n a s . c o l u n s : 5 ; O t a m a n h o d a sc o l u n a sv a id e p e n d e rd oe s p a od i s p o n v e l .* / / * O b r o w s e r v a ic r i a r5c o l u n a s . c o l u m n g a p : 2 e m ; a m a n h od a sc o l u n a sv a id e p e n d e rd oe s p a od i s p o n v e l .* / } Ot c o l u m n g a p :2 e m ; }

Para aprender mais, leia o artigo de David Walsh: CSS Columns.

Para mais, leia o artigo de David . Uma aprender terceira propriedade CSS3 que podeWalsh: ganharCSS maisColumns ateno no futuro a CSS3 grid layout. Esta propriedade d a designers e Uma terceira propriedade CSS3 que pode ganhar mais ateno no desenvolvedores um grid flexvel, onde eles podem trabalhar com na futuro a CSS3 grid layout. Esta propriedade d a designers e criao de layouts diferentes. Ela permite que os elementos de desenvolvedores um grid flexvel, onde eles podem trabalhar com na contedo sejam exibidos nas linhas e colunas sem uma estrutura criao de layouts diferentes. Ela permite que os elementos de definida. Primeiro voc deve declarar um grid no container, e ento contedo sejam exibidos nas linhas e colunas sem uma estrutura colocar todos os elementos filhos neste grid virtual. Voc pode, ento, definida. Primeiro voc deve declarar um grid no container, e ento definir um grid diferente para dispositivos menores ou alterar a colocar todos os elementos filhos neste grid virtual. Voc pode, ento, posio dos elementos no grid. Isto gera uma enorme flexibilidade definir um grid diferente para dispositivos menores ou alterar a quando usado com media queries, em mudanas de orientao, etc. posio dos elementos no grid. Isto gera uma enorme flexibilidade quando usado com media queries, em mudanas de orientao, etc. A sintaxe para esta propriedade assim (projeto de trabalho no W3C working draft - a partir de 2 de abril de 2013): A sintaxe para esta propriedade assim (projeto de trabalho no W3C working draft - a partir de 2 de abril de 2013): 1 . . p a r e n t{
2 . 3 . 4 . 5 . 6 . 7 . 8 . 9 . 1 0 . 1 1 . 1 2 . 1 3 . 1 4 . 1 5 . d i s p l a y :g r i d ;/ *d e c l a r eog r i d* / . p a r e n t { g r i d d e f i n i t i o n c o l u m n s :1 s t g r i d s i z e 2 n d g r i d s i z e ; d i s p l a y : g r i d ; / * d e c l a r e o g r i d / g r i d d e f i n i t i o n r o w s : 1 s t r w s i z e* 2 n d r o w s i z e ; r i d d e f i n i t i o n c o l u m n s :1 s t g r i d s i z e 2 n d g r i d s i z e ; } g g r i d d e f i n i t i o n r o w s :1 s t r o w s i z e 2 n d r o w s i z e ; } . e l e m e n t{ g r i d c o l u m n :1 ; . e l e m e n t { g r i d r o w :1 ; r i d c o l u m n :1 ; } g g r i d r o w :1 ; } . e l e m e n t 2{ g r i d c o l u m n :1 ; . e l e m e n t 2 { g r i d r o w :3 ; r i d c o l u m n :1 ; } g g r i d r o w :3 ; }

Para definir o tamanho das linhas e colunas voc pode usar diversas unidades, conforme detalhado na especificao. Para posicionar os Para definir o tamanho das linhas e colunas voc pode usar diversas elementos, a especificao diz o seguinte: "Cada parte est unidades, conforme detalhado na especificao. Para posicionar os posicionada entre as linhas do grid, fazendo referncia a linha de grid elementos, a especificao diz o seguinte: "Cada parte est inicial e ento especificando, se houver mais de uma, o nmero de posicionada entre as linhas do grid, fazendo referncia a linha de grid linhas ou colunas distribudas para determinar a linha de grid final, inicial e ento especificando, se houver mais de uma, o nmero de delimitando a rea do layout". linhas ou colunas distribudas para determinar a linha de grid final, delimitando a rea com do layout". O maior problema esta propriedade que suportada apenas pelo IE10. Para aprender mais sobre este layout, leia o artigo "Giving O maior problema com esta propriedade que suportada apenas Content Priority With CSS3 Grid Layout" de Rachel Andrew. Alm pelo IE10. Para aprender mais sobre este layout, leia o artigo "Giving disso, note que a especificao e a sintaxe para grid layouts com CSS Content Priority With CSS3 Grid Layout" de Rachel Andrew. Alm foi alterada no dia 2 de abril de 2013. Andrew escreveu uma disso, note que a especificao e a sintaxe para grid layouts com CSS atualizao sobre a sintaxe, a qual foi intitulada de "CSS Grid Layout: foi alterada no dia 2 de abril de 2013. Andrew escreveu uma What Has Changed?" (CSS Grid Layout: O que mudou?). atualizao sobre a sintaxe, a qual foi intitulada de "CSS Grid Layout: What Has Changed?" (CSStornar-se Grid Layout: O que mudou?). O ltimo layout, que pode bastante til no futuro se implementado nos browsers, o CSS3 template layout. Este mdulo O ltimo layout, que pode tornar-se bastante til no futuro se CSS3 funciona associando um elemento ao "nome" do layout, e em implementado nos browsers, o CSS3 template layout. Este mdulo seguida ordenando os elementos num grid invisvel. O grid pode ser CSS3 funciona associando um elemento ao "nome" do layout, e em fixo ou flexvel, e pode ser alterado de acordo com o tamanho da seguida ordenando os elementos num grid invisvel. O grid pode ser viewport. fixo ou flexvel, e pode ser alterado de acordo com o tamanho da viewport. A sintaxe fica assim: A1 sintaxe fica assim: . . p a r e n t{
2 . 3 . 4 . 5 . 6 . 7 . 8 . 9 . 1 0 . 1 1 . 1 2 . 1 3 . 1 4 . 1 5 . 1 6 . 1 7 . 1 8 . 1 9 . 2 0 . d i s p l a y :" a b " . p a r e n t{ " c d " ;/ *c r i a n d ou mg r i di n v i s v e l* / i s p l a y :" a b " } d " c d " ;/ *c r i a n d ou mg r i di n v i s v e l* / } . c h i l d 1{ p o s i t i o n :a ; . c h i l d 1{ } p o s i t i o n :a ; } . c h i l d 2{ p o s i t i o n :b ; . c h i l d 2{ } p o s i t i o n :b ; } . c h i l d 3{ p o s i t i o n :c ; . c h i l d 3{ } p o s i t i o n :c ; } . c h i l d 4{ p o s i t i o n :d ; . c h i l d 4{ } p o s i t i o n :d ; }

E renderizado assim:

E renderizado assim: a navegadores para este mdulo Infelizmente, o suporte praticamente nulo. Talvez algum dia, se designers e desenvolvedores Infelizmente, o suporte a navegadores para este mdulo mostrarem interesse suficiente nesta especificao, algum fabricante praticamente nulo. Talvez algum dia, se designers e desenvolvedores de browser possa implement-lo. Por enquanto, voc pode test-lo mostrarem interesse suficiente nesta especificao, algum fabricante usando um polyfill. de browser possa implement-lo. Por enquanto, voc pode test-lo usando um polyfill. da Viewport e o fim do Layout baseado em pixels Unidades Relativas Unidadesde Medidas Relativas comprimento da Viewport baseadas e o fim na viewport do Layout - baseado vw, vh, vm em , vmin pixels e Medidas de comprimento baseadas na viewport - vw, vh, vm, vmin e

vmax - so unidades de medida relativa das dimenses da prpria viewport. vmax - so unidades de medida relativa das dimenses da prpria viewport. Uma unidade vw igual a 1% da largura do bloco inicial que a contm. Se a largura da viewport 320, ento 1vw 1 x 320/100 = 3.2 pixels. Uma unidade vw igual a 1% da largura do bloco inicial que a contm. Se a largura da viewport 320, ento 1vw mas 1 x 320/100 =a3.2 pixels. A unidade vh funciona da mesma maneira, relativa altura da viewport. Desta forma, 50 vh equivale a 50% da altura do documento. A unidade vh funciona da mesma maneira, mas relativa a altura da A esta altura voc pode se perguntar qual a diferena desta unidade viewport. Desta forma, 50 vh equivale a 50% da altura do documento. para a percentual. A diferena que enquanto a unidade percentual A esta altura voc pode se perguntar qual a diferena desta unidade relativa ao tamanho do elemento pai, as unidades vh e vw sero para a percentual. A diferena que enquanto a unidade percentual sempre relativas ao tamanho da viewport, independente do tamanho relativa ao tamanho do elemento pai, as unidades vh e vw sero dos seus elementos-pai. sempre relativas ao tamanho da viewport, independente do tamanho dos seus elementos-pai. Isso fica bem interessante quando voc quer, por exemplo, criar um container e ter a certeza de que ele nunca se extender abaixo da Isso fica bem interessante quando voc quer, por exemplo, criar um altura do viewport para que o usurio no precise rolar a pgina para container e ter a certeza de que ele nunca se extender abaixo da baixo para achar o contedo. Tambm possibilita que criemos um altura do viewport para que o usurio no precise rolar a pgina para elemento com 100% da altura sem alterar todos os containers pai. baixo para achar o contedo. Tambm possibilita que criemos um elemento da altura sem alterar os containers pai. A unidadecom vmin100% igualada ao menor valortodos da unidade vm ou vh ,e vmax ao maior valor; por isso, essas unidades tambm respondem A unidade vmin igualada ao menor valor da unidade vm ou vh, e perfeitamente s alteraes na orientao dos dispositivos. vmax ao maior valor; por isso, essas unidades tambm respondem Infelizmente, por enquanto, essas unidades no so suportadas pelo perfeitamente s alteraes na orientao dos dispositivos. browser do Android. Sendo assim, pode ser que voc ainda tenha que Infelizmente, por enquanto, essas unidades no so suportadas pelo aguardar um tempo para utiliz-las. browser do Android. Sendo assim, pode ser que voc ainda tenha que aguardar um tempo para utiliz-las. Uma Palavra sobre Tipografia Adaptvel (Adaptive Typography) Uma O layout Palavra de um sobre site Tipografia vai depender Adaptvel muito do (Adaptive contedo. Typography) No posso concluir uma seo que fala sobre as diversas possibilidades do layout O layout de um site vai depender muito do contedo. No posso responsivo sem abordar a tipografia. O CSS3 introduziu uma unidade concluir uma seo que fala sobre as diversas possibilidades do layout para fontes que pode ser bastante til a tipografia responsiva: a responsivo sem abordar a tipografia. O CSS3 introduziu uma unidade unidade rem. Enquanto as fontes medidas pela unidade em para fontes que pode ser bastante til a tipografia responsiva: a apresentam um tamanho herdado do seu elemento pai, a fonte unidade rem. Enquanto as fontes medidas pela unidade em medida pela unidade rem relativa ao tamanho da fonte do seu apresentam um tamanho herdado do seu elemento pai, a fonte elemento root (ou raiz). Para um site responsivo, voc poderia escrever medida pela unidade rem relativa ao tamanho da fonte do seu o CSS como o cdigo abaixo, e em seguida alterar o tamanho de elemento root (ou raiz). Para um site responsivo, voc poderia escrever o CSS como o cdigo abaixo, e em seguida alterar o tamanho de

todas as fontes simplesmente mudando o tamanho da fonte especificada no elemento html: todas as fontes simplesmente mudando o tamanho da fonte especificada 1 . h t m l { no elemento html:
2 . 3 . 4 . 5 . 6 . 7 . 8 . 9 . 1 0 . 1 1 . 1 2 . 1 3 . 1 4 . 1 5 . 1 6 . 1 7 . 1 8 . 1 9 . f o n t s i z e :1 4 p x ; h t m l{ } f o n t s i z e :1 4 p x ; }{ p f o n t s i z e :1 r e m/ *i s t ot e m1 4 p x* / p{ } f o n t s i z e :1 r e m/ *i s t ot e m1 4 p x* / } @ m e d i as c r e e na n d( m a x w i d t h : 3 8 0 p x ){ h t m l{ @ m e d i a s c r e e n a n d ( m a x w i d t h : 3 8 0 p x ){ f o n t s i z e : 1 2 p x ; h t m l { / * t o r n a n d oaf o n t em e n o rp a r ad i s p o s i t i v o sm o b i l e* / o n t s i z e :1 2 p x ; } f / *t o r n a n d oaf o n t em e n o rp a r ad i s p o s i t i v o sm o b i l e* / }{ p f o n t s i z e :1 r e m ; p{ / *i s t oa g o r ae q u i v a l ea1 2 p x* / o n t s i z e :1 r e m ; } f / *i s t oa g o r ae q u i v a l ea1 2 p x* / } } }

Com exceo do IE8 e do Opera mini, o suporte ao "rem" excelente. Para aprender mais sobre a unidade rem, leia o artigo de Matthew Com exceo do IE8 e do Opera mini, o suporte ao "rem" excelente. Lettini "In Defense of Rem Units". Para aprender mais sobre a unidade rem, leia o artigo de Matthew Lettini "In Defense of Rem Units".

A MELHOR MANEIRA DE TRABALHAR RESPONSIVAMENTE COM OUTROS CONTEDOS COMPLEXOS A MELHOR MANEIRA DE TRABALHAR RESPONSIVAMENTE Aos poucos vamos ficando cada vez melhor em lidar com imagens e COM OUTROS CONTEDOS COMPLEXOS

textos em layouts responsivos, embora ainda seja necessrio encontrar Aos poucos vamos ficando cada vez melhor em lidar com imagens e solues para outros tipos mais complexos de contedo textos em layouts responsivos, embora ainda seja necessrio encontrar solues para Formulrios outros tipos no mais complexos de contedo Lidando com Website Responsivo Lidando De um modo com geral, Formulrios lidar com no formulrios, Website Responsivo especialmente os muito grandes, no web design responsivo um enorme desafio! Quanto De um modo geral, lidar com formulrios, especialmente os muito maior o formulrio, mais complicado ser adapt-lo a dispositivos grandes, no web design responsivo um enorme desafio! Quanto menores. A adaptao fsica no to difcil; a maioria dos designers maior o formulrio, mais complicado ser adapt-lo a dispositivos simplesmente colocam os elementos do formulrio numa nica menores. A adaptao fsica no to difcil; a maioria dos designers coluna e esticam os inputs completando a largura da tela. Entretanto, simplesmente colocam os elementos do formulrio numa nica fazer formulrios visualmente atraentes no o bastante. Temos que coluna e esticam os inputs completando a largura da tela. Entretanto, torn-los fceis de usar tambm nos dispositivos mobile. fazer formulrios visualmente atraentes no o bastante. Temos que torn-los fceis de usar tambm aconselha nos dispositivos Para comear, Luke Wroblewski evitar mobile. inputs de texto, contando com checkboxes, radio buttons e menus drop-downs, e Para comear, Luke Wroblewski aconselha evitar inputs de texto, utilizando o select sempre que possvel. Desta forma, o usurio precisa contando com checkboxes, radio buttons e menus drop-downs, e digitar o mnimo de informao. Outra dica no fazer com que o utilizando o select sempre que possvel. Desta forma, o usurio precisa usurio aperte o boto "enviar" antes de obter um feedback sobre o digitar o mnimo de informao. Outra dica no fazer com que o contedo a ser submetido. A checagem de erros imediata usurio aperte o boto "enviar" antes de obter um feedback sobre o extremamente importante no mobile, onde a maioria dos formulrios contedo a ser submetido. A checagem de erros imediata ultrapassa a altura da tela. Se o usurio digitar um campo extremamente importante no mobile, onde a maioria dos formulrios incorretamente e tiver que enviar o formulrio para s assim perceber ultrapassa a altura da tela. Se o usurio digitar um campo o erro, provavelmente ele no ver onde o erro est. incorretamente e tiver que enviar o formulrio para s assim perceber o erro, provavelmente ele no ver onde o erro est.

No futuro, novos inputs e atributos HTML5 sero de grande ajuda na melhoria dos formulrios, e no haver a necessidade de utilizar tanto No futuro, novos inputs e atributos HTML5 sero de grande ajuda na JavaScript. Por exemplo, voc poderia usar o atributo required para melhoria dos formulrios, e no haver a necessidade de utilizar tanto dar feedback imediato sobre um campo especfico. Infelizmente, por JavaScript. Por exemplo, voc poderia usar o atributo required para enquanto, o suporte para dispositivos mobile ainda ruim. O atributo dar feedback imediato sobre um campo especfico. Infelizmente, por autocomplete tambm poderia ajudar a montar formulrios mais enquanto, o suporte para dispositivos mobile ainda ruim. O atributo responsivos. autocomplete tambm poderia ajudar a montar formulrios mais responsivos. Um smartphone um bem pessoal, por isso podemos assumir que dados como nome e endereo sero algo consistente. Usando o Um smartphone um bem pessoal, por isso podemos assumir que atributo autocomplete do HTML5 poderamos fazer um autodados como nome e endereo sero algo consistente. Usando o preenchimento dos campos sem que o usurio tivesse que digitar atributo autocomplete do HTML5 poderamos fazer um autotodas as informaes. H ainda uma lista inteira de novos inputs preenchimento dos campos sem que o usurio tivesse que digitar HTML5 que podem ser utilizados muito em breve, a fim de tornar os todas as informaes. H ainda uma lista inteira de novos inputs formulrios mais responsivos. HTML5 que podem ser utilizados muito em breve, a fim de tornar os formulrios mais responsivos. Datas em elementos de formulrio so um bom exemplo do que se pode melhorar com o HTML5. J estamos acostumados a contar com Datas em elementos de formulrio so um bom exemplo do que se JavaScript ao criar calendrios. Eles podem ser muito teis se pode melhorar com o HTML5. J estamos acostumados a contar com utilizados em grandes telas desktop, mas difceis de usar em JavaScript ao criar calendrios. Eles podem ser muito teis se dispositivos touch screen, pois selecionar a data certa com o dedo utilizados em grandes telas desktop, mas difceis de usar em difcil quando a rea sensvel ao toque muito pequena. dispositivos touch screen, pois selecionar a data certa com o dedo difcil quando a rea sensvel ao toque muito pequena.

*Como posso selecionar uma data se meu dedo est tocando trs ao mesmo tempo? *Como posso selecionar uma data se meu dedo est tocando trs ao mesmo

Uma soluo promissora est no novo input type="date" do HTML5 , que define uma string no formato de data. J o input type="datetime" Uma soluo promissora est no novo input type="date" do HTML5 , define uma string no formato de data e hora. A grande vantagem deste que define uma string no formato de data. J o input type="datetime" mtodo que deixamos o browser decidir qual UI utilizar. Desta define uma string no formato de data e hora. A grande vantagem deste forma, a UI automaticamente otimizada em dispositivos mobile. mtodo que deixamos o browser decidir qual UI utilizar. Desta Abaixo um exemplo da aparncia de um input type="date" no forma, a UI automaticamente otimizada em dispositivos mobile. desktop, em smartphone e tablet com Android (com o browser Abaixo um exemplo da aparncia de um input type="date" no Chrome), Iphone e Ipad. desktop, em smartphone e tablet com Android (com o browser Chrome), Iphone e Ipad.

tempo?

*Renderizao do input input type="date" em diferentes dispositivos.

Note que as screenshots foram feitas em meu browser e no Android phone, ento a linguagem foi automaticamente adaptada ao sistema Note que as screenshots foram feitas em meu browser e no Android de linguagem (Francs). Ao utilizar componentes nativos, voc no phone, ento a linguagem foi automaticamente adaptada ao sistema precisa mais adaptar a lingua para diferentes verses do site. de linguagem (Francs). Ao utilizar componentes nativos, voc no precisa mais adaptar a lingua do para diferentes verses do site. Por enquanto, com exceo Opera e do Chrome, no h suporte ao input type="date" para o desktop. Browsers nativos do Android Por enquanto, com exceo do Opera e do Chrome, no h suporte ainda no o suportam completamente, mas o Chrome Android sim, e ao input type="date" para o desktop. Browsers nativos do Android tambm o Safari para iOS. O fato que ainda h muito a ser ainda no o suportam completamente, mas o Chrome Android sim, e trabalhado para sermos capazes de utilizar esta soluo em sites tambm o Safari para iOS. O fato que ainda h muito a ser responsivos. Enquanto isto, voc pode usar um polyfill como o trabalhado para sermos capazes de utilizar esta soluo em sites Mobiscroll para browsers mobile que no suportarem o atributo responsivos. Enquanto isto, voc pode usar um polyfill como o nativamente. Mobiscroll para browsers mobile que no suportarem o atributo nativamente. Alm destas solues de inputs HTML5, foram feitas tentativas para melhorar outros padres de design, como as senhas do mobile e Alm destas solues de inputs HTML5, foram feitas tentativas para inputs complexos utilizando mscaras. Como voc pode notar, isto melhorar outros padres de design, como as senhas do mobile e tudo experimental. O formulrio responsivo perfeito no existe no inputs complexos utilizando mscaras. Como voc pode notar, isto momento; Muito ainda deve ser feito neste campo. tudo experimental. O formulrio responsivo perfeito no existe no momento; Muito ainda deve ser feito neste campo. Lidando com Tabelas em Sites Responsivos Lidando Outro tipo com de Tabelas contedo em que Sites fica Responsivos bastante confuso em sites mobile e responsivos so as tabelas. A maioria das tabelas so orientadas Outro tipo de contedo que fica bastante confuso em sites mobile e horizontalmente e apresentam uma grande quantidade de dados de responsivos so as tabelas. A maioria das tabelas so orientadas uma s vez. Imagine ento que exibi-las corretamente em small horizontalmente e apresentam uma grande quantidade de dados de screens seja bem complicado. Tabelas HTML so bastante flexveis uma s vez. Imagine ento que exibi-las corretamente em small voc pode usar porcentagens para mudar a largura das colunas - o screens seja bem complicado. Tabelas HTML so bastante flexveis que tambm pode rapidamente tornar o contedo ilegvel. voc pode usar porcentagens para mudar a largura das colunas - o que tambm pode rapidamente tornar o contedo ilegvel. Ainda no encontraram uma forma perfeita de mostrar tabelas, mas Ainda no encontraram uma forma perfeita de mostrar tabelas, mas

*Renderizao do input input type="date" em diferentes dispositivos.

algumas sugestes foram feitas: algumas sugestes foram feitas: Uma forma de abordagem esconder colunas consideradas "menos importantes", e oferecer checkboxes para que o usurio escolha quais Uma forma de abordagem esconder colunas consideradas "menos ele deseja ver. No desktop, todas as colunas seriam mostradas, importantes", e oferecer checkboxes para que o usurio escolha quais enquanto no mobile o nmero de colunas dependeria do tamanho da ele deseja ver. No desktop, todas as colunas seriam mostradas, tela. O Filament Group explica este mtodo e demonstra em um de enquanto no mobile o nmero de colunas dependeria do tamanho da seus artigos. A soluo tambm usada no table column toggle do tela. O Filament Group explica este mtodo e demonstra em um de jQuery Mobile. seus artigos. A soluo tambm usada no table column toggle do jQuery Mobile.

*Alguns exemplos de tabelas responsivas.

A segunda abordagem brinca com a ideia de scroll em tabelas. Voc poderia "fixar" uma nica coluna com tamanho fixo a esquerda, e A segunda abordagem brinca com a ideia de scroll em tabelas. Voc ento deixar uma scroll bar numa pequena parte da tabela a direita. poderia "fixar" uma nica coluna com tamanho fixo a esquerda, e David Bushell implementa esta ideia em um artigo usando CSS para ento deixar uma scroll bar numa pequena parte da tabela a direita. exibir todo o contedo da do lado esquerdo da tabela, deixando o David Bushell implementa esta ideia em um artigo usando CSS para usurio mover-se pelo contedo a direita atravs da scroll bar. Zurb exibir todo o contedo da do lado esquerdo da tabela, deixando o utiliza a mesma ideia, mas de um jeito diferente, neste plug in. Neste usurio mover-se pelo contedo a direita atravs da scroll bar. Zurb caso, as headers ficam no topo da tabela, e a tabela duplicada com utiliza a mesma ideia, mas de um jeito diferente, neste plug in. Neste JavaScript de modo que apenas a primeira coluna seja mostrada a caso, as headers ficam no topo da tabela, e a tabela duplicada com esquerda, e as demais colunas sejam mostradas do lado direito atravs JavaScript de modo que apenas a primeira coluna seja mostrada a da scroll bar. esquerda, e as demais colunas sejam mostradas do lado direito atravs da scroll bar.

*Alguns exemplos de tabelas responsivas.

*Dois exemplos de tabelas responsivas com scroll

A grande questo em utilizar scroll bars e propriedades CSS tais como overflow: auto que muitos dispositivos mobile e tablets A grande questo em utilizar scroll bars e propriedades CSS tais como simplesmente no exibem uma scroll bar visvel. A rea da direita da overflow: auto que muitos dispositivos mobile e tablets tabela permite a rolagem, mas o usurio no ter qualquer indcio simplesmente no exibem uma scroll bar visvel. A rea da direita da visual desta possibilidade. Precisamos encontrar uma maneira de tabela permite a rolagem, mas o usurio no ter qualquer indcio indicar que h mais contedo a ser exibido direita. visual desta possibilidade. Precisamos encontrar uma maneira de indicar que h mais contedo ser exibido a direita. Uma terceira abordagem em a reestruturar tabela e dividir as colunas em listas de itens com cabealhos. Esta tcnica utilizada no Uma terceira abordagem em reestruturar a tabela e dividir as "reflow mode" no jQuery Mobile e foi explicada por Chris Coyier em colunas em listas de itens com cabealhos. Esta tcnica utilizada no seu artigo Responsive Data Tables. "reflow mode" no jQuery Mobile e foi explicada por Chris Coyier em seu artigo Responsive Data Tables.

*Dois exemplos de tabelas responsivas com scroll

*Reestruturando uma tabela para dispositivos mveis

Existem diversas outras tcnicas, e qual usar depende muito do seu Existem diversas outras tcnicas, e qual usar depende muito do seu

*Reestruturando uma tabela para dispositivos mveis

projeto. No h dois projetos iguais, por isso s posso mostrar como outras pessoas esto lidando com isto. Se voc chegar a uma boa projeto. No h dois projetos iguais, por isso s posso mostrar como soluo, por favor compartilhe nos comentrios, no Twitter ou em outras pessoas esto lidando com isto. Se voc chegar a uma boa qualquer outro lugar. Estamos no mesmo barco, e exibir tabelas no soluo, por favor compartilhe nos comentrios, no Twitter ou em mobile est uma droga ( srio). Ento vamos melhor-las juntos! qualquer outro lugar. Estamos no mesmo barco, e exibir tabelas no mobile est uma droga ( srio). Ento vamos melhor-las juntos!

INCORPORANDO CONTEDO DE TERCEIROS: O PROBLEMA DO IFRAME RESPONSIVO INCORPORANDO CONTEDO DE TERCEIROS: O PROBLEMA Muitos dessesRESPONSIVO contedos, ao serem incorporados, fazem voc utilizar DO IFRAME

iframes. Mas vamos encarar: lidar com iframes no design responsivo Muitos desses contedos, ao serem incorporados, fazem voc utilizar doloroso. O grande problema que iframes exigem largura e altura iframes. Mas vamos encarar: lidar com iframes no design responsivo fixa diretamente no seu cdigo HTML. Forar uma largura de 100% no doloroso. O grande problema que iframes exigem largura e altura iframe deveria resolver, mas da voc perderia a proporo do fixa diretamente no seu cdigo HTML. Forar uma largura de 100% no contedo incorporado. Ento, para incorporar um vdeo ou slideshow iframe deveria resolver, mas da voc perderia a proporo do e preservar a proporo original, seria necessrio encontrar uma contedo incorporado. Ento, para incorporar um vdeo ou slideshow soluo alternativa. e preservar a proporo original, seria necessrio encontrar uma soluo alternativa. Uma soluo com HTML e CSS Uma soluo Thierry Koblentz com escreveu HTML eum CSS timo artigo chamado "Creating Intrinsic Ratios for Vdeo" (criando propores intrnsecas para vdeos), Thierry Koblentz escreveu um timo artigo chamado "Creating onde ele prope uma forma de incorporar vdeos responsivos usando Intrinsic Ratios for Vdeo" (criando propores intrnsecas para vdeos), uma proporo 16:9. Esta soluo pode ser estendida a outros tipos onde ele prope uma forma de incorporar vdeos responsivos usando de contedos, como apresentaes em SlideShare e Google Maps. uma proporo 16:9. Esta soluo pode ser estendida a outros tipos Koblentz envolve o iframe num container usando uma classe a qual de contedos, como apresentaes em SlideShare e Google Maps. podemos manipular no CSS. O container torna possvel o iframe ser Koblentz envolve o iframe num container usando uma classe a qual redimensionado fluidamente, mesmo tendo um valor fixo de pixels no podemos manipular no CSS. O container torna possvel o iframe ser HTML. O cdigo, adaptado por Anders M. Andersen, fica assim: redimensionado fluidamente, mesmo tendo um valor fixo de pixels no HTML. O cdigo, adaptado por Anders M. Andersen, fica assim: 1 . . e m b e d c o n t a i n e r {
2 . 3 . 4 . 5 . 6 . 7 . 8 . 9 . 1 0 . 1 1 . 1 2 . 1 3 . 1 4 . 1 5 . 1 6 . 1 7 . p o s i t i o n :r e l a t i v e ; . e m b e c o n t a i n e r { p a d d i n g b o t t o m : 5 6 . 2 5 % ;/ *1 6 : 9r a t i o* / p o s i t i o n : r e l a t i v e ; p a d d i n g t o p : 3 0 p x ; / *s o l u op a r aI E6* / p a d d i n g b o t t o m :5 6 . 2 5 % ;/ *1 6 : 9r a t i o* / h e i g h t : 0 ; p a d d i n g t o p : 3 0 p x ;/ *s o l u op a r aI E6* / o v e r f l o w : h i d d e n ; e i g h t :0 ; } h o v e r f l o w :h i d d e n ; } . e m b e d c o n t a i n e ri f r a m e , . e m b e d c o n t a i n e ro b j e c t , i f r a m e , . e m b e d c o n t a i n e re m b e d { . e m b e d c o n t a i n e r o b j c t , p o s i t i o n : a b s o l u t e ; . e m b e d c o n t a i n e re m b e d{ t o p : 0 ; p o s i t i o n :a b s o l u t e ; l e f t : 0 ; t o p : 0 ; w i d t h : 1 0 0 % ; l e f t : 0 ; h e i g h t : 1 0 0 % ; i d t h :1 0 0 % ; } w h e i g h t :1 0 0 % ; }

Isto vai funcionar em todos os iframes. O nico problema que voc ter que envolver todos os iframes de seu site em um elemento. Isto vai funcionar em todos os iframes. O nico problema que voc Enquanto esta tcnica funcionaria muito bem para desenvolvedores ter que envolver todos os iframes de seu site em um elemento. que tivessem controle total de seu cdigo, ou para clientes que Enquanto esta tcnica funcionaria muito bem para desenvolvedores estivessem razoavelmente familiarizados com HTML, no funcionaria que tivessem controle total de seu cdigo, ou para clientes que com clientes que no tivessem qualquer habilidade tcnica. Voc estivessem razoavelmente familiarizados com HTML, no funcionaria poderia, claro, usar JavaScript para detectar os elementos iframe e com clientes que no tivessem qualquer habilidade tcnica. Voc poderia, claro, usar JavaScript para detectar os elementos iframe e

automaticamente incorpor-los na classe, mas como podemos ver, seria uma grande soluo, mas no a soluo perfeita. automaticamente incorpor-los na classe, mas como podemos ver, seria uma grande soluo, mas no a soluo perfeita.

LIDANDO COM VDEOS RESPONSIVOS NO FUTURO

O HTML5 abre umVDEOS mundo de possibilidades para o vdeo LIDANDO COM RESPONSIVOS NO FUTURO particularmente com o elemento video. A grande notcia que o O HTML5 abre um mundo de possibilidades para o vdeo suporte a este elemento surpreendentemente bom em dispositivos particularmente com o elemento video. A grande notcia que o mobile! Com exceo do Opera Mini, a maioria dos browsers o suporte a este elemento surpreendentemente bom em dispositivos suportam. O elemento video tambm bastante flexvel, e apresentar mobile! Com exceo do Opera Mini, a maioria dos browsers o um vdeo responsivo to simples quanto isto: suportam. O elemento video tambm bastante flexvel, e apresentar um vdeo responsivo to simples quanto isto: 1 . v i d e o {
2 . m a x w i d t h :1 0 0 % ; i d e o { 3 . v h e i g h t :a u t o ; a x w i d t h :1 0 0 % ; 4 . } m h e i g h t :a u t o ; }

Voc provavelmente est se perguntando, "Ento, qual o problema?" Voc provavelmente est seYouTube perguntando, "Ento, qual oo problema?" O problema que, embora e Vimeo suportem elemento video, voc ainda precisa incorporar vdeos usando o tal mtodo do O problema que, embora YouTube e Vimeo suportem o elemento iframe. E isso meu amigo, uma droga. Sendo assim, at que YouTube video, voc ainda precisa incorporar vdeos usando o tal mtodo do e Vimeo ofeream um meio de incorporar vdeos em sites utilizando a iframe. E isso meu amigo, uma droga. Sendo assim, at que YouTube tag video do HTML5, teremos que descobrir solues para que e Vimeo ofeream um meio de incorporar vdeos em sites utilizando a incorporaes de vdeo trabalhem adequadamente em sites tag video do HTML5, teremos que descobrir solues para que responsivos. Pensando nisto, Chris Coyier criou uma soluo com um incorporaes de vdeo trabalhem adequadamente em sites plugin jQuery chamado FitVids.js. Ele usa a primeira tcnica responsivos. Pensando nisto, Chris Coyier criou uma soluo com um mencionada acima: cria um container em torno do iframe e preserva a plugin jQuery chamado FitVids.js. Ele usa a primeira tcnica sua proporo. mencionada acima: cria um container em torno do iframe e preserva a sua proporo.Google Maps Incorporando Incorporando Se voc incorporou Google um Maps Google Map em seu site, a tcnica descrita acima com container e CSS funcionar. Mas, de novo, um hackzinho Se voc incorporou um Google Map em seu site, a tcnica descrita sujo. Alm disso, o mapa vai redimensionar proporcionalmente e pode acima com container e CSS funcionar. Mas, de novo, um hackzinho ficar to pequeno, que poder perder a rea de foco que voc quer sujo. Alm disso, o mapa vai redimensionar proporcionalmente e pode mostrar ao usurio. A pgina do Google Maps para mobile diz que ficar to pequeno, que poder perder a rea de foco que voc quer voc pode utilizar uma API de mapas estticos para incorporaes mostrar ao usurio. A pgina do Google Maps para mobile diz que mobile. Usar um mapa esttico de fato eliminaria os problemas com voc pode utilizar uma API de mapas estticos para incorporaes iframe. Brad Frost escreveu um belo artigo a respeito, e criou uma mobile. Usar um mapa esttico de fato eliminaria os problemas com demo de mapas adaptveis (adaptive maps) onde utiliza a mesma iframe. Brad Frost escreveu um belo artigo a respeito, e criou uma tcnica. Um JavaScript detecta o tamanho da tela, em seguida o demo de mapas adaptveis (adaptive maps) onde utiliza a mesma iframe substitudo pelo mapa esttico em celulares. Como podemos tcnica. Um JavaScript detecta o tamanho da tela, em seguida o ver, temos novamente que recorrer a tcnicas que lidem com iframe substitudo pelo mapa esttico em celulares. Como podemos problemas de iframe, devido a ausncia de uma soluo nativa (ou ver, temos novamente que recorrer a tcnicas que lidem com seja, do Google). problemas de iframe, devido a ausncia de uma soluo nativa (ou seja, do Google). Precisamos de APIS Melhores Precisamos Agora a grande de APIS pergunta: Melhores H um jeito melhor? O maior problema em usar iframes para incorporar o contedo de terceiros responsivamente Agora a grande pergunta: H um jeito melhor? O maior problema em usar iframes para incorporar o contedo de terceiros responsivamente

 a falta de controle sobre o cdigo gerado. Desenvolvedores e designers so muito dependentes de contedo de terceiros e, por a falta de controle sobre o cdigo gerado. Desenvolvedores e extenso, o seu HTML gerado. E o nmero de sites que oferecem designers so muito dependentes de contedo de terceiros e, por contedo de outros sites cresce rapidamente. Precisamos de solues extenso, o seu HTML gerado. E o nmero de sites que oferecem muito melhores do que iframes para incorporar este contedo. contedo de outros sites cresce rapidamente. Precisamos de solues muito melhores do que iframes para incorporar este contedo. Agora, fale a verdade: incorporar iframes do Facebook um verdadeiro sofrimento. A falta de controle sobre o CSS pode fazer nosso trabalho Agora, fale a verdade: incorporar iframes do Facebook um verdadeiro parecer bem desleixado e algumas vezes arruinar o design. A web sofrimento. A falta de controle sobre o CSS pode fazer nosso trabalho um lugar aberto, por isso talvez fosse um bom momento em comear parecer bem desleixado e algumas vezes arruinar o design. A web a pensar em mais API's abertas! No futuro, vamos precisar de API's que um lugar aberto, por isso talvez fosse um bom momento em comear sejam melhores e mais simples de utilizar, de modo que qualquer a pensar em mais API's abertas! No futuro, vamos precisar de API's que pessoa possa incorporar um contedo de maneira flexvel, sem ter sejam melhores e mais simples de utilizar, de modo que qualquer que contar com iframes fixos no responsivos. No entanto, at que pessoa possa incorporar um contedo de maneira flexvel, sem ter decidam criar essas API's, estamos presos a iframes medocres, tendo que contar com iframes fixos no responsivos. No entanto, at que que recorrer a truques para torn-los viveis. decidam criar essas API's, estamos presos a iframes medocres, tendo que recorrer a truques para torn-los viveis.

NAVEGAO RESPONSIVA: UM PANORAMA PELAS SOLUES ATUAIS NAVEGAO RESPONSIVA: UM PANORAMA PELAS Outro grandeATUAIS desafio o que fazer com a navegao. Quanto mais SOLUES
complexa e profunda a arquitetura de um website, mais inventivos Outro grande desafio o que fazer com a navegao. Quanto mais precisamos ser. complexa e profunda a arquitetura de um website, mais inventivos precisamos ser. O bbburp! publicou uma traduo sobre menus (Nota do tradutor: complexos para navegao no web design responsivo. Confira o (Nota do tradutor: O bbburp! publicou uma traduo sobre menus artigo!) complexos para navegao no web design responsivo. Confira o artigo!) Uma das primeiras tentativas de lidar com isto de maneira simples foi converter a navegao em um menu dropdown para telas pequenas. Uma das primeiras tentativas de lidar com isto de maneira simples foi Infelizmente, esta forma no a ideal. Primeiro porque esta soluo converter a navegao em um menu dropdown para telas pequenas. fica terrivelmente complicada numa navegao multi-level, podendo Infelizmente, esta forma no a ideal. Primeiro porque esta soluo tambm causar problemas de acessibilidade. Eu recomendo o artigo fica terrivelmente complicada numa navegao multi-level, podendo "Stop Misusing Select Menus" para entender todos os problemas tambm causar problemas de acessibilidade. Eu recomendo o artigo consequentes desta tcnica. "Stop Misusing Select Menus" para entender todos os problemas consequentes desta tcnica. Algumas pessoas, incluindo Brad Frost e Luke Wroblewski, tm tentado resolver este problema. Brad Frost compilou algumas de suas Algumas pessoas, incluindo Brad Frost e Luke Wroblewski, tm tcnicas no site This Is Responsive, na seo de navegao. tentado resolver este problema. Brad Frost compilou algumas de suas tcnicas no site This Is (toggle Responsive , na seo de navegao. A navegao alternada navigation) envolve ocultar o menu nos dispositivos mobile, exibindo um nico link. Quando o usurio d um A navegao alternada (toggle navigation) envolve ocultar o menu nos clique todos os links aparecem como um bloco de elementos abaixo dispositivos mobile, exibindo um nico link. Quando o usurio d um do link, empurrando o contedo principal pra baixo da navegao. clique todos os links aparecem como um bloco de elementos abaixo do link, empurrando o contedo principal pra baixo da padres navegao. Uma variante deste tipo de menu, inspirado em alguns de aplicativos nativos, a navegao off-canvas. Essa navegao fica Uma variante deste tipo de menu, inspirado em alguns padres de escondida debaixo de um link no menu ou cone. Quano o usurio aplicativos nativos, a navegao off-canvas. Essa navegao fica clica, a navegao desliza em forma de painel pela esquerda ou direita, escondida debaixo de um link no menu ou cone. Quano o usurio empurrando o contedo principal. clica, a navegao desliza em forma de painel pela esquerda ou direita, empurrando o contedo principal.

*Alguns exemplos do toggle navigation

O problema com essas tcnicas que a navegao permanece no topo da tela. Neste artigo "Responsive Navigation: Optimizing for O problema com essas tcnicas que a navegao permanece no Touch Across Devices", Luke Wroblewski mostra quais zonas so topo da tela. Neste artigo "Responsive Navigation: Optimizing for facilmente acessveis aos diferentes tipos de dispositivos. A rea Touch Across Devices", Luke Wroblewski mostra quais zonas so superior esquerda a mais difcil de chegar num dispositivo mobile. facilmente acessveis aos diferentes tipos de dispositivos. A rea superior esquerda a mais difcil de chegar num dispositivo mobile.

*Alguns exemplos do toggle navigation

*reas facilmente acessveis na tela de celulares e tablets, de acordo com Luke Wroblewski. *reas facilmente acessveis na tela de celulares e tablets, de acordo com Luke

Com base nisto, Jason Weaver criou algumas demos com a navegao no bottom da tela. Uma soluo o footer anchor (ncora Com base nisto, Jason Weaver criou algumas demos com a de rodap), com a navegao fixada no bottom da pgina para navegao no bottom da tela. Uma soluo o footer anchor (ncora dispositivos menores, e um menu link que envia o usurio at l. Esta de rodap), com a navegao fixada no bottom da pgina para tcnica utiliza o sistema link ncora do HTML. dispositivos menores, e um menu link que envia o usurio at l. Esta tcnica utiliza o tentativas sistema link ncora do para HTML. Diversas outras foram feitas solucionar problemas de navegao no web design responsivo. Como voc pode ver, ainda no Diversas outras tentativas foram feitas para solucionar problemas de h uma soluo perfeita; isso realmente depende do projeto e da navegao no web design responsivo. Como voc pode ver, ainda no profundidade da navegao. Felizmente para ns, alguma pessoas h uma soluo perfeita; isso realmente depende do projeto e da esto tentando resolver esse problema e tm compartilhado suas profundidade da navegao. Felizmente para ns, alguma pessoas experincias com a comunidade. esto tentando resolver esse problema e tm compartilhado suas experincias com a comunidade. Outra questo no resolvida qual cone usar para dizer ao usurio "Ol! h um menu escondido aqui. Clique em mim!". Alguns websites Outra questo no resolvida qual cone usar para dizer ao usurio tem um smbolo de mais (+), outros uma grade de quadrados e alguns "Ol! h um menu escondido aqui. Clique em mim!". Alguns websites tm trs linhas (como um cone de hamburger). tem um smbolo de mais (+), outros uma grade de quadrados e alguns tm trs linhas (como um cone de hamburger).

Wroblewski.

Para ver esses cones usado em websites reais, d uma olhada no "We Need a Standard Show Navigation Icon for Responsive Web Design Para ver esses cones usado em websites reais, d uma olhada no "We (precisamos de um cone padro no web design responsivo para Need a Standard Show Navigation Icon for Responsive Web Design "mostrar a navegao"). (precisamos de um cone padro no web design responsivo para "mostrar a navegao"). O maior problema descobrir qual desses cones seria o mais reconhecvel a uma quantidade de usurios. Se todos O maior problema descobrir qual desses cones seria o mais concordssemos em usar um deles, os usurios seriam instrudos a reconhecvel a uma quantidade de usurios. Se todos reconhec-los. O problema , qual escolher? Eu realmente gostaria de concordssemos em usar um deles, os usurios seriam instrudos a saber qual cone vocs usam, ento no hesite em compartilhar nos reconhec-los. O problema , qual escolher? Eu realmente gostaria de comentrios 1 (1 - nota do tradutor: para deixar sua opinio sobre qual saber qual cone vocs usam, ento no hesite em compartilhar nos o cone voc utiliza, acesse o artigo original). comentrios 1 (1 - nota do tradutor: para deixar sua opinio sobre qual o cone voc utiliza, acesse o artigo original).

ESPECIFICIDADES MOBILE: "O USURIO EST COM UM DISPOSITIVO MOBILE? SE SIM, O QUE PODE SER FEITO?" ESPECIFICIDADES MOBILE: "O USURIO EST COM UM Dispositivos mobile e tablets so um mundo novo -SER longe dos DISPOSITIVO MOBILE? SE SIM, O QUE PODE FEITO?"

computadores desktops -, com suas prprias regras, comportamentos Dispositivos mobile e tablets so um mundo novo - longe dos e capacidades. Podemos querer adaptar nossos projetos a esta nova computadores desktops -, com suas prprias regras, comportamentos gama de capacidades. e capacidades. Podemos querer adaptar nossos projetos a esta nova gama de capacidades. Detectando Capacidades Touch com JavaScript Nativo Detectando Alm do tamanho Capacidades da tela, aposto Touch que comse JavaScript voc perguntasse Nativo qual a principal diferena entre mobiles (incluindo tablets) e desktops, a Alm do tamanho da tela, aposto que se voc perguntasse qual a maioria das pessoas diriam ser a capacidade touch. No h mouse principal diferena entre mobiles (incluindo tablets) e desktops, a num celular ( verdade!), e com exceo de alguns dispositivos maioria das pessoas diriam ser a capacidade touch. No h mouse hbridos raros, em que voc pode plugar um mouse, voc no vai num celular ( verdade!), e com exceo de alguns dispositivos poder realizar muitos eventos num tablet com um mouse. Isto hbridos raros, em que voc pode plugar um mouse, voc no vai significa que, dependendo do browser, a pseudo-classe :hover do poder realizar muitos eventos num tablet com um mouse. Isto CSS pode no funcionar. Alguns browsers so inteligentes o bastante significa que, dependendo do browser, a pseudo-classe :hover do para oferecer um fallback nativo ao evento do hover traduzindo em CSS pode no funcionar. Alguns browsers so inteligentes o bastante um evento touch. Infelizmente, nem todos os browsers so to para oferecer um fallback nativo ao evento do hover traduzindo em flexveis assim. Criar um design que no dependa de elementos um evento touch. Infelizmente, nem todos os browsers so to ocultos, a serem revelados sob eventos :hover, seria o mais sensato. flexveis assim. Criar um design que no dependa de elementos ocultos, a eventos serem revelados sob eventos :hover , seria o mais sensato. Capturar touch poderia tambm ser uma outra soluo. A W3C working group comeou a trabalhar numa especificao de Capturar eventos touch poderia tambm ser uma outra soluo. A eventos touch. Futuramente, seremos capazes de capturar eventos W3C working group comeou a trabalhar numa especificao de tais como touchstart, touchmove e toucheend. Seremos capazes de eventos touch. Futuramente, seremos capazes de capturar eventos lidar com esses eventos diretamente no JavaScript sem a necessidade tais como touchstart, touchmove e toucheend. Seremos capazes de de frameworks de terceiros como Hammer.js ou jGestures. Mas lidar com esses eventos diretamente no JavaScript sem a necessidade JavaScript uma coisa - E o que acontece com o CSS? de frameworks de terceiros como Hammer.js ou jGestures. Mas JavaScript uma coisa - E o que acontece com o CSS?

CSS nvel 4 - Media Query "Pointer" CSS O CSS nvel nvel 44Media especifica Query uma "Pointer" nova media querry chamada "pointer", que pode ser usada para capturar a existncia e preciso de um O CSS nvel 4 especifica uma nova media querry chamada "pointer", dispositivo apontador (pointing device), tal como um mouse. A media que pode ser usada para capturar a existncia e preciso de um query tem um dos trs valores: dispositivo apontador (pointing device), tal como um mouse. A media query tem um dos trs valores: none O dispositivo no tem nenhum pointing device. none coarse O nenhumdevice pointing device. O dispositivo dispositivo no tem tem um pointing com preciso limitada, coarse por exemplo, um celular ou tablet com capacidades touch, O dispositivo tem um pointing device com preciso limitada, onde o "pointer" seria um dedo. por fine exemplo, um celular ou tablet com capacidades touch, onde o "pointer" seria um dedo. O dispositivo tem um pointing device preciso, como um fine mouse, trackpad ou caneta (stylus). O dispositivo tem um pointing device preciso, como um mouse, trackpad ou caneta (stylus). Usando esta media query, ns podemos ampliar a maneira de utilizao de botes e links para dispositivos mveis: Usando esta media query, ns podemos ampliar a maneira de utilizao de botes e links para 1 . @ m e d i a ( p o i n t e r : c o a r s e ) { dispositivos mveis:
2 . i n p u t [ t y p e = " s u b m i t " ] , m e d i aa ( p o i n t e r : c o a r s e ){ 3 . @ . b u t t o n { i n p u t [ t y p e = " s u b m i t " ] , 4 . m i n w i d t h : 3 0 p x ; a . b u t t o n { 5 . m i n h e i g h t :4 0 p x ; m i n w i d t h : 3 0 p x ; 6 . b a c k g r o u n d : t r a n s p a r e n t ; i n h e i g h t :4 0 p x ; 7 . } m b a c k g r o u n d :t r a n s p a r e n t ; 8 . } } }

A media query pointer ainda no suportada - apenas sendo proposta. Todavia, ser potencial enorme, pois seria permitiria A media query pointer ainda no suportada - apenas sendo detectar dispositivos touch via CSS, sem a necessidade de uma proposta. Todavia, ser potencial enorme, pois seria permitiria bilbioteca, como Modernizr. detectar dispositivos touch via CSS, sem a necessidade de uma bilbioteca, como Modernizr. CSS nvel 4 - Media Query "Hover" CSS A especificao nvel 4 - Media CSS Query nvel 4"Hover" prope uma nova media query hover, que detecta se o sistema primrio do dispositivo d suporte ao hover. Ele A especificao CSS nvel 4 prope uma nova media query hover, que retorna valores boleanos: 1 se o dispositivo suporta hover, 0 se no detecta se o sistema primrio do dispositivo d suporte ao hover. Ele suporta. Note que isto no tem nada a ver com a pseudo-classe retorna valores boleanos: 1 se o dispositivo suporta hover, 0 se no :hover. suporta. Note que isto no tem nada a ver com a pseudo-classe :hover. a media query hover podemos melhorar a interface e ocultar Usando certas caractersticas dos dispositivos que o suportam. O cdigo fica Usando a media query hover podemos melhorar a interface e ocultar mais ou menos assim: certas caractersticas dos dispositivos que o suportam. O cdigo fica mais menos assim: 1 . ou @ m e d i a ( h o v e r ){
2 . . h o v e r c o n t e n t{d i s p l a y :n o n e ;} m e d i a ( h o v e r ) { 3 . @ / * o c u l t a o c o n t e d oa p e n a sp a r ad i s p o s i t i v o sc o ms u p o r t ea oh o v e r .* / d i s p l a y o { : n o n e ;b } 4 . . h v e r c o n t e n t : h o v e r { d i s p l a y : l o c k ;} *o c u l t aoc o n t e d oa p e n a sp a r ad i s p o s i t i v o sc o ms u p o r t ea oh o v e r .* / 5 . } / i s p l a y . h o v e r c o n t e n t : h o v e r{d :b l o c k ;} }

Pode tambm ser usado para criar menus dropdowns com hover; e o fallback para dispositivos mobile em CSS nativo, sem a necessidade Pode tambm ser usado para criar menus dropdowns com hover; e o fallback para dispositivos mobile em CSS nativo, sem a necessidade

de um framework que detecte a feature. de um framework que detecte a feature. CSS nvel 4 - Media Query Luminosity CSS nvel Outra capacidade 4 - Media dos Query dispositivos Luminosity mobile o sensor de luminosidade. A especificao CSS nvel 4 tem a media query luminosity, que nos d Outra capacidade dos dispositivos mobile o sensor de luminosidade. acesso ao sensor de luz dos dispositivos diretamente no CSS. Abaixo a A especificao CSS nvel 4 tem a media query luminosity, que nos d descrio da especificao. acesso ao sensor de luz dos dispositivos diretamente no CSS. Abaixo a descrio da especificao. A caracterstica da media "luminosity" usada para verificar a luminosidade do ambiente o qual o dispositivo est sendo usado, A caracterstica da media "luminosity" usada para verificar a e permitir que o autor ajuste o estilo do documento luminosidade do ambiente o qual o dispositivo est sendo usado, responsivamente. e permitir que o autor ajuste o estilo do documento responsivamente. No futuro, seremos capazes de criar websites que respondam a luminosidade do ambiente. Isto vai melhorar muito a experincia do No futuro, seremos capazes de criar websites que respondam a usurio. Seremos capazes de detectar, por exemplo, ambientes luminosidade do ambiente. Isto vai melhorar muito a experincia do extremamente brilhantes usando o valor washed, adaptando o usurio. Seremos capazes de detectar, por exemplo, ambientes contraste do site ao local. O valor dim usado para ambientes escuros extremamente brilhantes usando o valor washed, adaptando o (a noite por exemplo), e o valor normal para quando o nvel de contraste do site ao local. O valor dim usado para ambientes escuros luminosidade no necessita de qualquer tipo de adaptao. (a noite por exemplo), e o valor normal para quando o nvel de luminosidade necessita de qualquer tipo de adaptao. O cdigo fica no assim: O1 cdigo fica assim: . @ m e d i a ( l u m i n o s i t y :w a s h e d ){
2 . p{b a c k g r o u n d :w h i t e ;c o l o r :b l a c k ;f o n t s i z e :2 e m ;} @ m e d i a ( l u m i n o s i t y :w a s h e d ){ 3 . } a c k g r o u n d o l o r l a c k o n t s i z e p{b :w h i t e ;c :b ;f :2 e m ;} }

Como podemos ver, as CSS4 prometem um monte de coisas novas. Se voc est curioso em ver o que vem por a - no s para mobile Como podemos ver, as CSS4 prometem um monte de coisas novas. ento d uma olhada na "Sneak Peek Into the Future: Selectors, Level Se voc est curioso em ver o que vem por a - no s para mobile 4" ento d uma olhada na "Sneak Peek Into the Future: Selectors, Level 4" Mais Recursos Mobile para Detectar o Uso de API's e JavaScript Mais Recursos Muitas outras coisas Mobile poderiam para Detectar ser detectadas o Uso de para API's tornar e JavaScript a experincia do usurio surpreendente num site responsivo. Por exemplo, Muitas outras coisas poderiam ser detectadas para tornar a experincia poderamos ter acesso nativo ao giroscpio, bssola e acelermetro do usurio surpreendente num site responsivo. Por exemplo, para detectar a orientao do dispositivo usando o poderamos ter acesso nativo ao giroscpio, bssola e acelermetro DeviceOrientationEvent do HTML5. O suporte ao para detectar a orientao do dispositivo usando o DeviceOrientationEvent nos browsers do Android e iOS est ficando DeviceOrientationEvent do HTML5. O suporte ao cada vez melhor, mas a especificao ainda est em fase de rascunho. DeviceOrientationEvent nos browsers do Android e iOS est ficando No entanto, a API parece promissora. Imagine jogar jogos HTML5 cada vez melhor, mas a especificao ainda est em fase de rascunho. diretamente no browser! No entanto, a API parece promissora. Imagine jogar jogos HTML5 diretamente no browser! Outra API que seria particularmente utilizada por alguns usurios mobile a de geolocation. A boa notcia que ela j bem Outra API que seria particularmente utilizada por alguns usurios suportada. Esta API nos permite localizar geograficamente o usurio mobile a de geolocation. A boa notcia que ela j bem usando o GPS e inferir sua localizao a partir de sinais de rede, como suportada. Esta API nos permite localizar geograficamente o usurio IP, RFID, Wi-Fi e endereos MAC Bluetooth. Isto pode ser usado em usando o GPS e inferir sua localizao a partir de sinais de rede, como alguns sites responsivos para oferecer informaes contextuais aos IP, RFID, Wi-Fi e endereos MAC Bluetooth. Isto pode ser usado em usurios. Uma grande cadeia de restaurantes poderia melhorar sua alguns sites responsivos para oferecer informaes contextuais aos usurios. Uma grande cadeia de restaurantes poderia melhorar sua

experincia mobile mostrando aos usurios a localizao de seus restaurantes em sua rea. As possibilidades so infinitas. experincia mobile mostrando aos usurios a localizao de seus restaurantes em props sua rea. Asrascunho possibilidades so infinitas. A W3C tambm um para uma API de vibrao. Nele o browser pode oferecer um feedbacl ttil ao usurio em forma de A W3C tambm props um rascunho para uma API de vibrao. Nele vibrao. Isto, no entanto, ainda est engatinhando em campos mais o browser pode oferecer um feedbacl ttil ao usurio em forma de especficos de aplicaes Web and mobile games in the browser. vibrao. Isto, no entanto, ainda est engatinhando em campos mais especficos de tem aplicaes Web and mobile games in the browser. Outra API que sido altamente discutida a network information API. A possibilidade de medir a largura de banda do usurio, e otimizar Outra API que tem sido altamente discutida a network information conforme o resultado, tem seduzido muitos desenvolvedores. API. A possibilidade de medir a largura de banda do usurio, e otimizar Seriamos capazes de servir imagens com qualidade de alta definio conforme o resultado, tem seduzido muitos desenvolvedores. para usurios com alta largura de banda e imagens de baixa qualidade Seriamos capazes de servir imagens com qualidade de alta definio aos usurios com baixa largura de banda. Com o atributo bandwith da para usurios com alta largura de banda e imagens de baixa qualidade network API, seria possvel calcular a velocidade de download de um aos usurios com baixa largura de banda. Com o atributo bandwith da usurio em megabytes por segundo. O segundo atributo, metered, network API, seria possvel calcular a velocidade de download de um um booleano que nos diz se o usurio tem uma conexo aferida usurio em megabytes por segundo. O segundo atributo, metered, (como um carto pr-pago). Esses dois atributos so atualmente um booleano que nos diz se o usurio tem uma conexo aferida acessveis via JavaScript. (como um carto pr-pago). Esses dois atributos so atualmente acessveis via medir JavaScript. Infelizmente, a conexo de um usurio algo tecnicamente complicado, pois uma conexo poderia mudar de forma abrupta. O Infelizmente, medir a conexo de um usurio algo tecnicamente usurio poderia, por exemplo, entrar num tnel e perder sua conexo, complicado, pois uma conexo poderia mudar de forma abrupta. O ou sua velocidade poderia cair de repente. Sendo assim, a media usurio poderia, por exemplo, entrar num tnel e perder sua conexo, query mgica que mede a largura de banda parece ser hipottica no ou sua velocidade poderia cair de repente. Sendo assim, a media momento. Yoav Weiis escreveu um belo artigo sobre os problemas query mgica que mede a largura de banda parece ser hipottica no criados por essa media query e sobre medio de largura de banda momento. Yoav Weiis escreveu um belo artigo sobre os problemas chamado Bandwidth Media Queries? We Dont Need Em! (media criados por essa media query e sobre medio de largura de banda queries de largura de banda? No precisamos delas!") chamado Bandwidth Media Queries? We Dont Need Em! (media queriesoutras de largura banda? precisamos delas!") Muitas API'sde lidam comNo recursos mobile. Se voc estiver interessado em aprender mais, a Mozilla tem uma lista bem detalhada. Muitas outras API's lidam com recursos mobile. Se voc estiver A maioria ainda no est completamente disponvel ou padronizada, e interessado em aprender mais, a Mozilla tem uma lista bem detalhada. destinada mais a aplicaes web do que a sites responsivos. No A maioria ainda no est completamente disponvel ou padronizada, e entanto, um timo panorama de como grandes e complexos sites destinada mais a aplicaes web do que a sites responsivos. No mobile podem ser no futuro. entanto, um timo panorama de como grandes e complexos sites mobile podem ser no futuro.

REPENSANDO A MANEIRA COMO NS E O USURIO LIDAMOS COM O CONTEDO REPENSANDO A MANEIRA COMO NS E O USURIO Do ponto de vista O tcnico, ainda existem muitos desafios ao lidar com LIDAMOS COM CONTEDO

o contedo em grande escala. O mtodo mobile-first tem sido parte Do ponto de vista tcnico, ainda existem muitos desafios ao lidar com do processo de desenvolvimento e design j h algum tempo. o contedo em grande escala. O mtodo mobile-first tem sido parte Poderamos, por exemplo, servir a dispositivos mobile o mnimo de do processo de desenvolvimento e design j h algum tempo. dados necessrios, e ento usar JavaScript e AJAX para Poderamos, por exemplo, servir a dispositivos mobile o mnimo de condicionalmente carregar mais contedo e imagens para desktop e dados necessrios, e ento usar JavaScript e AJAX para tablets. No entanto, para isto, tambm teramos que repensar como condicionalmente carregar mais contedo e imagens para desktop e lidar com o contedo e ser capaz de priorizar uma forma de gerar um tablets. No entanto, para isto, tambm teramos que repensar como contedo suficientemente flexvel e adaptvel. Um bom exemplo disto lidar com o contedo e ser capaz de priorizar uma forma de gerar um contedo suficientemente flexvel e adaptvel. Um bom exemplo disto

 o mapa de soluo responsiva descrito acima: Carregamos uma imagem para mobile, e melhoramos a experincia com um mapa real o mapa de soluo responsiva descrito acima: Carregamos uma para desktops. Quanto mais responsivo o website, mais complexo ser imagem para mobile, e melhoramos a experincia com um mapa real lidar com o contedo. Um cdigo flexvel pode nos ajudar a formatar para desktops. Quanto mais responsivo o website, mais complexo ser um contedo adaptvel. lidar com o contedo. Um cdigo flexvel pode nos ajudar a formatar um contedo adaptvel. Uma forma sugerida por alguns criar frases responsivas e marc-las com spans que tenham classes, e ento exibi-los de acordo com o Uma forma sugerida por alguns criar frases responsivas e marc-las tamanho da tela. Aparar trechos das frases para dispositivos menores com spans que tenham classes, e ento exibi-los de acordo com o possvel com media querries. Voc pode ver esta tcnica no 37signals' tamanho da tela. Aparar trechos das frases para dispositivos menores Signal vs. Noise blog e no artigo de Frankie Roberto "Responsive Text". possvel com media querries. Voc pode ver esta tcnica no 37signals' Mesmo que tal tcnica pudesse ser usada para melhorar pequenas Signal vs. Noise blog e no artigo de Frankie Roberto "Responsive Text". partes de um website, tais como um slogan do footer, aplicando isto a Mesmo que tal tcnica pudesse ser usada para melhorar pequenas todos os textos de um site difcil de imaginar. partes de um website, tais como um slogan do footer, aplicando isto a todos os textos um site difcil de imaginar. Isto levanta umade questo no web design responsivo que se tornar mais e mais importante no futuro: a importncia de meta dados e a Isto levanta uma questo no web design responsivo que se tornar estrutura semntica de contedo. Se quisermos ser capazes de mais e mais importante no futuro: a importncia de meta dados e a reutilizar o contedo de outros websites automaticamente, eles estrutura semntica de contedo. Se quisermos ser capazes de devero estar bem estruturados e preparados para isto. Novas tags reutilizar o contedo de outros websites automaticamente, eles HTML5 como article e section so um bom comeo para ganhar devero estar bem estruturados e preparados para isto. Novas tags algum significado semntico. O objetivo pensar e estruturar o HTML5 como article e section so um bom comeo para ganhar contedo de modo que um nico item (por exemplo, um post em um algum significado semntico. O objetivo pensar e estruturar o blog), possa ser reutilizado e exibido em diferentes dispositivos, e em contedo de modo que um nico item (por exemplo, um post em um diferentes formatos. blog), possa ser reutilizado e exibido em diferentes dispositivos, e em diferentes formatos. O grande desafio ser fazer com que os metadados sejam facilmente compreendidos a todas as pessoas que fazem parte da criao de O grande desafio ser fazer com que os metadados sejam facilmente contedo do website. Teremos que explicar a todos eles como os compreendidos a todas as pessoas que fazem parte da criao de metadados podem ser utilizados para priorizar o contedo e contedo do website. Teremos que explicar a todos eles como os programaticamente reunir o contedo, sendo uma plataforma metadados podem ser utilizados para priorizar o contedo e independente. Um grande desafio ser o de ajud-los a pensar em programaticamente reunir o contedo, sendo uma plataforma blocos reutilizveis, em vez de um grande pedao de texto no qual independente. Um grande desafio ser o de ajud-los a pensar em eles copiam e colam contedo do Microsoft Word no seu sistema de blocos reutilizveis, em vez de um grande pedao de texto no qual gerenciamento de contedo WYSIWYG. Teremos que ajud-los a eles copiam e colam contedo do Microsoft Word no seu sistema de entender que contedo e estrutura so coisas distintas e gerenciamento de contedo WYSIWYG. Teremos que ajud-los a independentes, como quando os designers tiveram que entender que entender que contedo e estrutura so coisas distintas e o contedo (HTML) e a apresentao (CSS) eram mantidos melhor independentes, como quando os designers tiveram que entender que separados. o contedo (HTML) e a apresentao (CSS) eram mantidos melhor separados. No podemos nos dar ao luxo de escrever um contedo que seja orientado a uma nica plataforma. Quem sabe em qual dispositivo No podemos nos dar ao luxo de escrever um contedo que seja ele ser publicado daqui a seis meses, ou um ano? Precisamos orientado a uma nica plataforma. Quem sabe em qual dispositivo preparar nossos websites para o inesperado. Mas, para isto, ele ser publicado daqui a seis meses, ou um ano? Precisamos precisamos de ferramentas melhores de publicao tambm. Karen preparar nossos websites para o inesperado. Mas, para isto, McGrane deu uma palestra intitulada "Adapting Ourselves to Adaptive precisamos de ferramentas melhores de publicao tambm. Karen Content" (Nos Adaptando a um Contedo Adaptvel), com alguns McGrane deu uma palestra intitulada "Adapting Ourselves to Adaptive exemplos reais da indstria editorial. Ela fala sobre o processo de Content" (Nos Adaptando a um Contedo Adaptvel), com alguns criao de contedo reutilizvel e apresenta a ideia do COPE: create exemplos reais da indstria editorial. Ela fala sobre o processo de once and publish everywhere (Criar uma vez e publicar em todos os criao de contedo reutilizvel e apresenta a ideia do COPE: create once and publish everywhere (Criar uma vez e publicar em todos os

lugares). Precisamos construir CMS's melhores, que possam utilizar e gerar metadados para priorizar o contedo. Precisamos explicar s lugares). Precisamos construir CMS's melhores, que possam utilizar e pessoas como o sistema funciona e pensar em objetos de mdulos de gerar metadados para priorizar o contedo. Precisamos explicar s contedo reutilizveis em vez de pginas WYSIWYG. Como McGrane pessoas como o sistema funciona e pensar em objetos de mdulos de diz: contedo reutilizveis em vez de pginas WYSIWYG. Como McGrane diz: "Voc pode escrever trs verses diferentes de ttulo; voc pode escrever duas verses diferentes de resumos e anexar diversas "Voc pode escrever trs verses diferentes de ttulo; voc pode imagens para isto, com diferentes cortes e tamanhos, e voc escrever duas verses diferentes de resumos e anexar diversas pode no ser a pessoa responsvel em decidir qual imagem ou imagens para isto, com diferentes cortes e tamanhos, e voc qual ttulo ser exibido em uma determinada plataforma. Essa pode no ser a pessoa responsvel em decidir qual imagem ou deciso ser tomada pelos metadados. Ser feita pelas regras de qual ttulo ser exibido em uma determinada plataforma. Essa negcios. [...] Metadados a nova direo de arte." deciso ser tomada pelos metadados. Ser feita pelas regras de negcios. [...] Metadados a nova direo de arte." Truncar o contedo para dispositivos menores no uma estratgia de contedo " prova do futuro". Precisamos de CMS's que ofeream Truncar o contedo para dispositivos menores no uma estratgia a estrutura necessria para criar esse contedo reutilizvel. Precisamos de contedo " prova do futuro". Precisamos de CMS's que ofeream de melhores workflows de publicao em CMS's tambm. Interfaces a estrutura necessria para criar esse contedo reutilizvel. Precisamos desajeitadas assustam os usurios, e a maioria das pessoas que geram de melhores workflows de publicao em CMS's tambm. Interfaces contedo no esto particularmente confortveis com ferramentas desajeitadas assustam os usurios, e a maioria das pessoas que geram complicadas. Temos que oferecer a essas pessoas ferramentas mais contedo no esto particularmente confortveis com ferramentas fceis de entender e que lhe ajudem a publicar um contedo limpo e complicadas. Temos que oferecer a essas pessoas ferramentas mais semntico, independente da apresentao. fceis de entender e que lhe ajudem a publicar um contedo limpo e semntico, independente da apresentao.

CONCLUSO
Por mais longo que este artigo seja, ele s abrange o bsico. Mas CONCLUSO agora, a maioria dos leitores da Smashing Magazine entendem que o Por mais longo que este artigo seja, ele s abrange o bsico. Mas web design responsivo muito mais que usar media queries, escolher agora, a maioria dos leitores da Smashing Magazine entendem que o breakpoints certos e dobrar o tamanho das imagens para celulares de web design responsivo muito mais que usar media queries, escolher alta densidade. Como voc pode ver, o caminho longo e ainda no breakpoints certos e dobrar o tamanho das imagens para celulares de chegamos l. H ainda muitas questes no resolvidas, e a soluo alta densidade. Como voc pode ver, o caminho longo e ainda no responsiva perfeita ainda no existe. chegamos l. H ainda muitas questes no resolvidas, e a soluo responsiva perfeitapodem ainda no Solues tcnicas ser existe. descobertas no futuro usando alguma nova tecnologia apresentada neste artigo, com a ajuda da W3C, Solues tcnicas podem ser descobertas no futuro usando alguma WHATWG e organizaes como o Filament Group. nova tecnologia apresentada neste artigo, com a ajuda da W3C, WHATWG e organizaes como o Filament Group. Mais importante, ns web designers e desenvolvedores podemos ajudar a encontrar solues ainda melhores. Pessoas como Luke Mais importante, ns web designers e desenvolvedores podemos Wroblewski e Brad Frost, e todas as incrveis pessoas mencionadas ajudar a encontrar solues ainda melhores. Pessoas como Luke neste artigo esto experimentando uma srie de solues e tcnicas Wroblewski e Brad Frost, e todas as incrveis pessoas mencionadas diferentes. Se sero bem ou mal sucedidas, a coisa mais importante neste artigo esto experimentando uma srie de solues e tcnicas compartilhar o que ns - designers, desenvolvedores, estrategistas de diferentes. Se sero bem ou mal sucedidas, a coisa mais importante contedo e membros da comunidade web - estamos fazendo para compartilhar o que ns - designers, desenvolvedores, estrategistas de tentar resolver alguns dos desafios da comunidade do web design. contedo e membros da comunidade web - estamos fazendo para Afinal, estamos todos no mesmo barco, tentando tornar a web um tentar resolver alguns dos desafios da comunidade do web design. lugar melhor, no estamos? Afinal, estamos todos no mesmo barco, tentando tornar a web um lugar melhor, no estamos?

----Traduzido com autorizao da Smashing Magazine. Traduzido com autorizao da Smashing Magazine . Artigo original escrito por Stphanie Walter . Artigo original escrito por . Acesse o artigo original naStphanie SmashingWalter Magazine - "The State Of Responsive Web Design" - 29 de maio de 2013. Acesse o artigo original na Smashing Magazine - "The State Of Responsive Web Design" - 29 de maio de 2013. ----02
jul
6 6 17 17

02 jul

Will Sales
Trabalha e se diverte ao mesmo tempo com Design

Will Sales

Digital e Arquitetura de Informao na Sparkle e Fatec Trabalha e se diverte ao mesmo tempo com Design Barueri. graduando em desenvolvimento de Digital e Arquitetura de Informao na Sparkle e Fatec sistemas para a internet. Barueri. graduando em desenvolvimento de sistemas para a internet.

0 comentrios Deixar uma mensagem...

Mais votados Comunidade Compartilhar

Nenhum comentrio at o momento.

Fe e d d e co m e n t ri o s

In s cre ve r-s e vi a e m a i l

O bbburp! traduz os melhores artigos da web! O bbburp! traduz os melhores artigos da web!