Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive web design

Responsive web design

Workshop sobre responsive web design

Avatar for zuriñe menendez

zuriñe menendez

November 27, 2012
Tweet

Other Decks in Technology

Transcript

  1. R WD “ ” e v e r y t

    h i n g b a t h e d i n l i g h t , a r e c s s “ ” r e s p o n s i v e w e b d e s i g n “ p a r a mo r t a l e s ”
  2. R WD S o b r e mi @z me

    n c a y e n t wi t t e r a ma n t e d e l c ó d i g o l i mp i o s p e a k e r f r u s t a d a x D · · ·
  3. R WD ¿ Q u é e s ? E

    t h a n Ma r c o t t e D i s e ñ o mu l t i me d i a y fl e x i b l e c o n i má g e n e s a d a p t a b l e s R e s p o n s i v e = = Mo v i l + T V + P C R WD + Me d i a Q u e r i e s ! = A d a p t a t i v e We b D e s i g n · · ·
  4. R WD H T ML 5 N u e v

    a s e t i q u e t a s : < h e a d > , < h g r o u p > , < a r t i c l e > , < s e c t i o n > , < n a v > , < f o o t e r > , < s v g > , < fi g u r e > , < fi g u r e c a p t i o n > P r o p i e d a d e s n u e v a s e n F o r m: p l a c e h o l d e r , t y p e = ʼ e ma i l ʼ , . . . a t r i b u t o s p r o p i o s + c s s : d a t a - d e fi n i t i o n = " L O Q U E Q U E R A MO S " , d a t a - a c t i o n = ” L O Q U E Q U E R A MO S ” · · ·
  5. R WD C S S 3 N u e v

    a s p s e u d o c l a s e s : : n t h - c h i l d ( ) , : a f t e r , : b e f o r e A t r i b u t o s n u e v o s : t r a n s i t i o n , t r a n s f o r m, t e x t - s h a d o w , b o x - s h a d o w a n i ma t i o n s Me d i a Q u e r y : @me d i a o n l y s c r e e n a n d ( ma x - w i d t h : 9 6 e m) { } @me d i a s c r e e n a n d ( mi n - w i d t h : 3 4 e m) { } · · ·
  6. R WD A p l i c a c i

    ó n D i s e ñ o y e s t r u c t u r a fl e x i b l e : v a l o r e s p r o p o r c i o n a l e s ( % o e m) , ma x - w i d t h , ma x - h e i g h t Mu l t i me d i a fl e x i b l e : I má g e n e s a d a p t a b l e s , f e e d b a c k p o r p a r t e d e b a c k e n d Me d i a Q u e r Me d i a Q u e r y : me d i a n t e e l u s o d e l a s C S S 3 p a r a q u e s e a d a p t e · · ·
  7. R WD V i e w p o r t

    d e c l a r a c i ó n < me t a n a me = " v i e w p o r t " c o n t e n t = " w i d t h = d e v i c e - w i d t h , i n i t i a l - s c a l e = 1 " / > p a r a me t r o s : c o n t e n t = " w i d t h = d e v i c e - w i d t h , ( c o n t r o l a e l t a ma ñ o d e l d i s p o s i t i v o ) i n i t i a l - s c a l e = 1 , ( c o n t r o l a e l n i v e l d e z o o m c u a n d o e s c a r g a d o p o r p r i me r a v e z ) ma x i mu m- s c a l e , mi n i mu m- s c a l e , y u s e r - s c a l a b l e ( c o n t r o l a n l o s p e r mi s o s d e l u s u a r i o ) " e l p i x e l n o e s u n p i x e l : d i s p o s i t i v o s ! = p c · · ·
  8. R WD Me d i a Q u e r

    i e s d e c l a r a c i ó n e n n u e s t r a c s s , a c o n s e j a b l e a r c h i v o a p a r t e b r e a k i n g p o i n t s : n o r ma l me n t e u n a p o r c a d a t i p o d e d i s p o s i t i v o , l o s c o mu n e s : @me d i a o n l y s c r e e n a n d ( ma x - w i d t h : 1 0 7 0 p x ) { } ( p o r t a t i l ) @me d i a o n l y s c r e e n a n d ( ma x - w i d t h : 8 0 0 p x ) { } ( t a b l e t ) @me d i a o n l y s c r e e n a n d ( ma x - w i d t h : 5 7 0 p x ) { } ( p o r t r a i t ) @me d i a o n l y s c r e e n a n d ( ma x - w i d t h : 4 5 0 p x ) { } ( l a n d s c a p e ) · ·
  9. R WD C u i d a d o E

    s t r u c t u r a fl e x i b l e : d e fi n i r f u e n t e p o r c e n t u a l p a r a e m g e n é r i c o s S o p o r t e H T ML 5 p a r a n a v e g a d o r e s : < ! - - [ i f l t I E 9 ] > < s c r i p t s r c = " h t t p : / / h t ml 5 s h i v . g o o g l e c o d e . c o m/ s v n / t r u n k / h t ml 5 . j s " > < / s c r i p t > < ! [ e n d i f ] - - > P e s o d e l o s j s : P e s o d e l o s j s : j q u e r y v s . q u o . j s · · ·
  10. R WD P r o b l e ma s

    Me n ú : ¿ d o n d e c o l o c a r l o ? I má g e n e s ma x - w i d t h : 1 0 0 %; ma x - h e i g h t : 1 0 0 %; c u i d a d o c o n e l d i s p l a y : n o n e ; I ma g e B a c k g r o u n d s : b a c k g r o u n d - s i z e : a u t o , c o v e r , c o n t a i n ; · · ·
  11. R WD S o l u c i o n

    e s h t t p : / / www . t i me . c o m/ ·
  12. R WD S o l u c i o n

    e s h t t p : / / www . s t a r b u c k s . e s / ·
  13. R WD S o l u c i o n

    e s h t t p : / / www . i s o . o r g ·
  14. R WD R e f e r e n c

    i a s h t t p : / / me d i a q u e r i . e s / ·
  15. R WD E j e mp l o s h

    t t p : / / www . s t a r b u c k s . e s / ·
  16. R WD U t i l i d a d

    e s h t t p : / / c a n i u s e . c o m/ h t t p : / / d a b b l e t . c o m/ h t t p : / / c o d e p e n . i o / h t t p : / / fi t t e x t j s . c o m/ h t t p : / / a d a p t i v e - i ma g e s . c o m/ ( p h p ) · · · · ·
  17. R WD r e s p o n s i

    v e w e b d e s i g n ma y b e p o s s i b l e www . u n e x p e n d a b l e s . c o m