FRONT-END BASICS  for developersCosas que deberías saber sobre Front-end, aunque te ganes el pan como Developer :)        ...
FRONT-END BASICS FOR DEVELOPERS 1.   Grid System 2.   Responsive Web Design (RWD) 3.   Sass (Syntactically Awesome Stylesh...
GRID SYSTEMSorry… ¿Grid qué?Sin retícula no hay películaVentajas / ¿Desventajas?Cómo usar el GridRecursos
SORRY… ¿GRID QUÉ?El concepto Grid System no es nuevo (diseño editorial).Se basa en una retícula (grid) como elemento para ...
SIN RETÍCULA NO HAY PELÍCULACualquier Diseñador y Front-end Developer debería usar un gridfrente a diseños complejos.Facil...
VENTAJAS / ¿DESVENTAJAS?
VENTAJASMejor organización de la información.Mayor control sobre la composición de página (ningún elementopuede desbordar*...
¿DESVENTAJAS? I DONT THINK SO…Puede generar mayor densidad de código HTML (más < i > y  dvsclasses).Nombres de classes "po...
CÓMO USAR EL GRID 1. Utiliza la class container_12 para el grid de 12 columnas y         container_16 para la versión de 1...
CÓMO USAR EL GRID2. Utiliza las classes grid_1, grid_2, grid_3, etc. para fijar los anchos decolumna. Para rellenar una fi...
CÓMO USAR EL GRID3. Utiliza push y pull para posicionar items en la página de forma         independiente, a pesar de su p...
CÓMO USAR EL GRID    4. Utiliza las classes prefix y suffix para crear espacios vacíos en el                              ...
CÓMO USAR EL GRID5. Utiliza las classes alpha ("first") y omega ("last") para eliminar los               márgenes de colum...
CÓMO USAR EL GRID (RESUMEN)1. Utiliza la class container_12 para el grid de 12 columnas y   container_16 para la versión d...
RECURSOS                               The Grid System                               The 960 Grid System Made Easy        ...
RESPONSIVE WEB DESIGN (RWD)      Responsive Architecture      ¿WTF is RWD?      Ingredientes para RWD      Recursos
RESPONSIVE ARCHITECTUREActualmente diseñamos para más dispositivos que nunca (mobile,desktop, tablet, smart tv…).Cada medi...
RESPONSIVE ARCHITECTURE                     ¿TIENE SENTIDO?“Fragmentar nuestro contenido a través de diferentes     experi...
¿WTF IS:NOT RWD?No es el nombre de la banda de moda, ni de ninguna revista detendencias.Una web con RWD no es una web móvi...
¿WTF IS RWD?              “Responsive Web Design = Diseño Web               Adaptable/Adaptativo/Responsivo”La finalidad d...
INGREDIENTES PARA RWD             1. Grid flexible             2. Imágenes flexibles *             3. CSS3 Media Queries* ...
GRID FLEXIBLE“Retícula fluida o elástica, que se adapta a cambios    de resolución de pantalla y dimensiones del          ...
GRID FLEXIBLE                         CARACTERÍSTICASFlexible Typesetting, o fuentes escalables en medidas relativas (em)....
GRID FLEXIBLE                          CARACTERÍSTICASGrid (columnas) y espacios horizontales (widths, margins, paddings) ...
GRID FLEXIBLE                 EN DEFINITIVA… THINK FLEXIBLE!Romper con el hábito de traducir los pixels de Photoshop a CSS...
GRID FLEXIBLEFlexible Grid (demo) *, en A List Apart      * Redimensiona la ventana del navegador            para ver como...
IMÁGENES FLEXIBLES“Imágenes elásticas, que se escalan según cambios   de resolución de pantalla y dimensiones del         ...
IMÁGENES FLEXIBLES               ¿CÓMO HACER UNA IMAGEN FLEXIBLE?Encapsular-la dentro de un contenedor de bloque (p.e. un ...
IMÁGENES FLEXIBLES     Ejemplo. En este caso la imagen flexible ocuparía el 25% de su contenedor padre:<pncas"lxm w2 fot" ...
IMÁGENES FLEXIBLESEjemplo. En este caso la imagen flexible ocuparía el 25% de su contenedor padre:
IMÁGENES FLEXIBLESSi necesitamos que la imagen sea un enlace podemos sustituir el tag < p n por un < >                    ...
IMÁGENES FLEXIBLES                    Ejemplos con tamaños de imagen distintos:                        Responsive Web Desi...
CSS3 MEDIA QUERIES“Ningún diseño, fijo o fluido, escala bien más allá del contexto para el que fue originalmente diseñado....
CSS3 MEDIA QUERIES            PROBLEMAS COMUNES LAYOUTS FLEXIBLESImágenes irreconocibles (demasiado pequeñas o recortadas ...
CSS3 MEDIA QUERIES¿Cómo crear un diseño que pueda adaptarse a cambios de resolución             de pantalla y dimensiones ...
CSS3 MEDIA QUERIES                     ¿QUÉ SON Y PARA QUÉ SIRVEN?Son un robusto mecanismo, creado por la W3C, para identi...
CSS3 MEDIA QUERIES                   DISTINTAS NOMENCLATURAS@ei sre ad(i-it:04x { mda cen n mnwdh12p)  bd {   oy     fn-ie...
CSS3 MEDIA QUERIESCAPACIDADES DE LOS DISPOSITIVOS A DETECTAR                  width                  height               ...
CSS3 MEDIA QUERIES                                         CONSIDERACIONESRecaudar información detallada sobre los disposi...
CSS3 MEDIA QUERIES                           COMPATIBILIDADAlgunos navegadores aún no las soportan*, aunque existen script...
CSS3 MEDIA QUERIES               EJEMPLO PRÁCTICO/ Salsre * * ml cen /@ei sre ad(a-it:0p) mda cen n mxwdh60x,sre ad(a-eiew...
CSS3 MEDIA QUERIES                                LO QUE NO MOLA :(       Según Jason Grigsby en su artículo CSS Media Que...
CSS3 MEDIA QUERIES     RESPONSIVE WEB DESIGN STILL ROCKS!“Planear el diseño para tamaños diferentes y pensar modularmente ...
RECURSOSResponsive Web Design , de Ethan Marcotte.Developing RWD With Opera Mobile Emulator , de SmashingMagazine.Opera Mo...
SASSFilosofía y definiciónSass vs. LESSSass básicoSass avanzadoCompassRecursos
SASS                       FILOSOFÍA PRINCIPAL             “ DRY—Dont Repeat Yourself  Reducir la repetición de código en ...
SASS… WHAT?                  SYNTACTICALLY AWESOME STYLESHEETSLenguaje de pre-procesado server-side, que añade reglas anid...
SASS                   OTRA GRAN VENTAJA “Tener una paleta de color con un número fijo deopciones a escoger ayuda a no vol...
SASS VS. LESS                        DIFERENCIAS“La mayor diferencia entre Sass y LESS* es el modo en   que son procesados...
SASS VS. LESS                                            ¿CUÁL ESCOGER?  Aunque Sass es mejor en unos cuantos aspectos, am...
SASS BÁSICO                          INSTALACIÓN        Para correr Sass, necesitas tener Ruby instalado.Windows: instalar...
SASS BÁSICO                        COMPILACIÓNCrear fichero Sass, con extensión . c s                                   ss...
SASS BÁSICO                          ALTERANDO LA SALIDA CSS  Al compilar nuestro Sass se generan los CSS. Estos se pueden...
SASS BÁSICO                                     COMPILANDO CON SCOUTScout es una GUI que nos permite importar nuestro proy...
SASS BÁSICO                            /* COMENTARIOS */    Usar comentarios de una sola linea para que aparezcan sólo en ...
SASS BÁSICO           ÁMBITO (SCOPE) DE LOS SELECTORES       Sass soluciona la repetición de código mediante el anidado (n...
SASS BÁSICO                                     DEFINIENDO VARIABLES           Las variables ($ a _ a e son útiles para ev...
SASS BÁSICO                   CALCULANDO UN LAYOUTSass permite hacer cáculos “al vuelo”, pudiéndose realizar las operacion...
SASS BÁSICO                  CREANDO THEMES CON COLORES AVANZADOSCambiar la paleta de color de un site entero siempre es u...
SASS BÁSICO                          @IMPORTANDOImportando centralizamos llamada a distintos ficheros.Lo hacemos con @ m o...
SASS BÁSICO                                 @IMPORTANDO                                Fichero _ o o s s s :              ...
SASS BÁSICO            CONSTRUYENDO UNA LIBRERÍA FONT FAMILYCon CSS tradicional hay que especificar una misma familia defu...
SASS BÁSICO       CONSTRUYENDO UNA LIBRERÍA FONT FAMILY                         Ejemplo                 Fichero f n _ a i ...
SASS AVANZADO                    MANTENIENDO LA SEMÁNTICA CON @EXTEND                Mantener la semántica es una filosofí...
SASS AVANZADO            MANTENIENDO LA SEMÁNTICA CON @EXTEND  Aquí es donde entra @ x e dque clona los atributos de una c...
SASS AVANZADO                MANTENIENDO LA SEMÁNTICA CON @EXTEND            e t n permite modificar los estilos clonados....
SASS AVANZADO         MANTENIENDO EL CÓDIGO LIMPIO CON LOS MIXINSUn mixin es un fragmento de Sass que puede ser fácilmente...
SASS AVANZADO     MANTENIENDO EL CÓDIGO LIMPIO CON LOS MIXINS         Un mixin se define de la siguiente forma (m x n t x ...
SASS AVANZADO        LLEVANDO LOS MIXINS MÁS ALLÁ CON VARIABLES Con @ x e d valores se mantienen, mientras que los mixins ...
SASS AVANZADO     LLEVANDO LOS MIXINS MÁS ALLÁ CON VARIABLES              Definir un mixin con un valor por defecto:@ii bu...
SASS AVANZADO     LLEVANDO LOS MIXINS MÁS ALLÁ CON VARIABLES          El ejemplo anterior se compila, respectivamente, com...
SASS AVANZADO                          INTERPOLACIÓN    Interpolación significa "pon esto aquí". Nos permite generardinámi...
SASS AVANZADO            SI TE REPITES MÁS QUE EL AJO, USA @EACHe c ayuda a mantener nuestro Sass DRY. Es un modo de copia...
SASS AVANZADO                DETERMINANDO CONDICIONES CON @IF  i permite escribir condiciones, muy útil cuando escribimos ...
SASS AVANZADO      CAMBIANDO EL ASPECTO CON @MEDIA ANIDADO        Cambiar el estilo en base al dispositivo.               ...
SASS AVANZADO      CAMBIANDO EL ASPECTO CON @MEDIA ANIDADO                Haciendo el site portrait-specific….an{ mi   clr...
COMPASS    Librería de mixins, funciones y otras extensiones                     útiles para Sass.           Una vez insta...
COMPASS                 CONFIGURACIÓN DE UN PROYECTOCompass configura ficheros y carpetas por defecto.Crear proyecto: $ c ...
COMPASS         LAS VENTAJAS DE "LA BRÚJULA"Facilita mucho el desarrollo, ahorrando tiempo           y esfuerzo en desarro...
RECURSOSPragmatic Guide to Sass , de Hampton Catlin y Michael LintornCatlin.Sass Language y Sass Script Functions , página...
DUDAS, PREGUNTAS, BOSTEZOS…         ☛ The End ☚
Front-end Basics for Developers
Upcoming SlideShare
Loading in...5
×

Front-end Basics for Developers

1,170

Published on

My slides -in spanish- about some Frontend Basics:

* Grid System
* Responsive Web Design
* Sass (Syntactically Awesome Stylesheets)

Published in: Technology
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,170
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
31
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

Front-end Basics for Developers

  1. 1. FRONT-END BASICS for developersCosas que deberías saber sobre Front-end, aunque te ganes el pan como Developer :) ♣ Nadal Soler / @nadalsol
  2. 2. FRONT-END BASICS FOR DEVELOPERS 1. Grid System 2. Responsive Web Design (RWD) 3. Sass (Syntactically Awesome Stylesheets) 4. Dudas, preguntas, bostezos…
  3. 3. GRID SYSTEMSorry… ¿Grid qué?Sin retícula no hay películaVentajas / ¿Desventajas?Cómo usar el GridRecursos
  4. 4. SORRY… ¿GRID QUÉ?El concepto Grid System no es nuevo (diseño editorial).Se basa en una retícula (grid) como elemento para mantener orden,proporción y composición.Esta estructura/base se conoce como Layout.
  5. 5. SIN RETÍCULA NO HAY PELÍCULACualquier Diseñador y Front-end Developer debería usar un gridfrente a diseños complejos.Facilita la composición y evita incoherencias al aplicar la Guía deEstilos. Inuit CSS , 960gs , Gumby Framework , 1140 Grid , Bootstrap , Zen Grids …
  6. 6. VENTAJAS / ¿DESVENTAJAS?
  7. 7. VENTAJASMejor organización de la información.Mayor control sobre la composición de página (ningún elementopuede desbordar* el grid acordado).Mayor versatilidad sobre el layout (2 cols, 3 cols…).Diseño más consistente entre páginas (homogeneidad = mejorexperiencia de usuario).Fácil implementación y mantenimiento (los diseños de nuevaspáginas/secciones deben ceñirse al grid).Pequeñas mejoras en SEO y accesibilidad, al poder "empujar"contenidos (classes p s y p l ). uh ul * Salvo contadas excepciones (algunos banners, fixed bars, modal windows, etc…).
  8. 8. ¿DESVENTAJAS? I DONT THINK SO…Puede generar mayor densidad de código HTML (más < i > y dvsclasses).Nombres de classes "poco semánticos", como c n a n r 1 , otie_6g i _ , s a 8r w rd8 pn, o…En proyectos pequeños, mucho código CSS que quizás nuncausaremos.¿Es esto grave? I dont think so… Los beneficios superan las"desventajas".
  9. 9. CÓMO USAR EL GRID 1. Utiliza la class container_12 para el grid de 12 columnas y container_16 para la versión de 16 columnas.<i cas"otie_2> dv ls=cnanr1" <i cas"rd4> dv ls=gi_" <> lk Fec Fis/> pI ie rnh re<p <dv /i> <i cas"rd4> dv ls=gi_" <>fcus,Ima FedmFis/> pO ore en reo re<p <dv /i> <i cas"rd4> dv ls=gi_" <>r Ptt i co!/> pM. oao s ol<p <dv /i><dv /i><i cas"otie_6> dv ls=cnanr1" <i cas"rd1" dv ls=gi_2> <> lk Fec Fis/> pI ie rnh re<p <dv /i> <i cas"rd4> dv ls=gi_" <>fcus,Ima FedmFis/> pO ore en reo re<p <dv /i><dv /i>
  10. 10. CÓMO USAR EL GRID2. Utiliza las classes grid_1, grid_2, grid_3, etc. para fijar los anchos decolumna. Para rellenar una fila completa, asegúrate que las columnas sumen 12 ó 16. <i cas"otie_6> dv ls=cnanr1" <i cas"rd1" dv ls=gi_2> <> lk Fec Fis/> pI ie rnh re<p <dv /i> <i cas"rd4> dv ls=gi_" <>fcus,Ima FedmFis/> pO ore en reo re<p <dv /i> <dv /i> ejemplo: grid_4 + grid_2 + grid_6 = 12
  11. 11. CÓMO USAR EL GRID3. Utiliza push y pull para posicionar items en la página de forma independiente, a pesar de su posición en el HTML.<i cas"otie_2> dv ls=cnanr1" <i cas"rd6ps_"<>oo/>/i> dv ls=gi_ uh3>plg<p<dv <i cas"rd3pl_"<>etclm<p<dv dv ls=gi_ ul6>ptx oun/>/i> <i cas"rd3>ptx clm<p<dv dv ls=gi_"<>et oun/>/i> <i cas"rd1"<>i bx/>/i> dv ls=gi_2>pbg o<p<dv<dv /i>
  12. 12. CÓMO USAR EL GRID 4. Utiliza las classes prefix y suffix para crear espacios vacíos en el layout. <i cas"otie_2> dv ls=cnanr1" <i cas"rd6sfi_" dv ls=gi_ ufx3> <>ls=gi_ sfi_"/> pcas"rd6 ufx3<p <dv /i> <i cas"rd3> dv ls=gi_" <>ls=gi_"/> pcas"rd3<p <dv /i> <i cas"rd1" dv ls=gi_2> <>i bx/> pbg o<p <dv /i> <dv /i>En este ejemplo podemos ver como crear un espacio vacío de tres columnas después de un elemento, mediante el uso de la class suffix_3.
  13. 13. CÓMO USAR EL GRID5. Utiliza las classes alpha ("first") y omega ("last") para eliminar los márgenes de columnas en grids anidados. <i cas"otie_6> dv ls=cnanr1" <i cas"rd8> dv ls=gi_" <i cas"rd4apa> dv ls=gi_ lh" <>rd4isd gi_ (lh)/> pgi_ nie rd8 apa<p <dv /i> <i cas"rd4oea> dv ls=gi_ mg" <>rd4isd gi_ (mg)/> pgi_ nie rd8 oea<p <dv /i> <dv /i> <i cas"rd8> dv ls=gi_" <>rd8/> pgi_<p <dv /i> <dv /i> En el ejemplo vemos como crear sub-divisiones dentro de columnas, anidando grids.
  14. 14. CÓMO USAR EL GRID (RESUMEN)1. Utiliza la class container_12 para el grid de 12 columnas y container_16 para la versión de 16 columnas.2. Utiliza las classes grid_1, grid_2, grid_3, etc. para fijar los anchos de columna. Para rellenar una fila completa, asegúrate que los anchos de columnas sumen 12 ó 16 (p.e. grid_4 + grid_2 + grid_6 = 12).3. Utiliza las classes push y pull para posicionar items en la página de forma independiente, a pesar de su posición en el HTML.4. Utiliza las classes prefix y suffix para crear espacios vacíos en el layout.5. Utiliza las classes alpha ("first") y omega ("last") para eliminar los márgenes de columnas en grids anidados.
  15. 15. RECURSOS The Grid System The 960 Grid System Made Easy 960gs Variable Grid System Fluid 960 Grid System mos-golden Grid SystemTodos los ejemplos vistos en esta presentación están basados en 960gs . Otros grid system pueden usar nombres de classes distintos.
  16. 16. RESPONSIVE WEB DESIGN (RWD) Responsive Architecture ¿WTF is RWD? Ingredientes para RWD Recursos
  17. 17. RESPONSIVE ARCHITECTUREActualmente diseñamos para más dispositivos que nunca (mobile,desktop, tablet, smart tv…).Cada medio es distinto (ancho mínimo de pantalla, densidad de pixel,n° de colores, fuentes, navegador…).
  18. 18. RESPONSIVE ARCHITECTURE ¿TIENE SENTIDO?“Fragmentar nuestro contenido a través de diferentes experiencias "dispositivo optimizadas" es unpropósito insostenible. La alternativa a esto se llama Responsive Architecture: crear sitios no sólo másflexibles, sino que también se adapten al medio que los renderiza.” Del libro "Responsive Web Design" , de Ethan Marcotte.
  19. 19. ¿WTF IS:NOT RWD?No es el nombre de la banda de moda, ni de ninguna revista detendencias.Una web con RWD no es una web móvil ya que los contenidos yperformance no están optimizados.Para hacer una web móvil deberíamos usar SSDDT *, para servir loscontenidos adecuados al medio: "copys" resumidos, imágenes máspequeñas y optimizadas, funcionalidad básica, etc… * Server-Side Device Detection Techniques.
  20. 20. ¿WTF IS RWD? “Responsive Web Design = Diseño Web Adaptable/Adaptativo/Responsivo”La finalidad del RWD es hacer que la web se visualicecorrectamente en distintos contextos (dispositivos), conindependencia del tamaño de pantalla o resolución del mismo,mejorando la experiencia de cada tipo de usuario (mobile, desktop,smart tv, whatever…).El RWD se puede combinar con las SSDDT para ofrecer unaexperiencia completa: diseño adaptable + contenido adecuado yoptimizado.
  21. 21. INGREDIENTES PARA RWD 1. Grid flexible 2. Imágenes flexibles * 3. CSS3 Media Queries* No sólo imágenes sino cualquier otro media: videos, flash, carousels…
  22. 22. GRID FLEXIBLE“Retícula fluida o elástica, que se adapta a cambios de resolución de pantalla y dimensiones del viewport.”
  23. 23. GRID FLEXIBLE CARACTERÍSTICASFlexible Typesetting, o fuentes escalables en medidas relativas (em). Evitar usar px!
  24. 24. GRID FLEXIBLE CARACTERÍSTICASGrid (columnas) y espacios horizontales (widths, margins, paddings) en porcentajes (%).
  25. 25. GRID FLEXIBLE EN DEFINITIVA… THINK FLEXIBLE!Romper con el hábito de traducir los pixels de Photoshop a CSS.Focalizar nuestra atención en las proporciones que hay trás undiseño.
  26. 26. GRID FLEXIBLEFlexible Grid (demo) *, en A List Apart * Redimensiona la ventana del navegador para ver como se comporta.
  27. 27. IMÁGENES FLEXIBLES“Imágenes elásticas, que se escalan según cambios de resolución de pantalla y dimensiones del viewport.”
  28. 28. IMÁGENES FLEXIBLES ¿CÓMO HACER UNA IMAGEN FLEXIBLE?Encapsular-la dentro de un contenedor de bloque (p.e. un <span> condisplay:block).Definir un ancho en porcentaje (%) a dicho contenedor, para que estesea flexible. El valor del porcentaje determinará su ancho en funciónde su padre.Opcionalmente el contenedor puede ir flotado.Establecer display:block y max-width:100% a la imagen. Dejar susatributos HTML width y height vacíos.
  29. 29. IMÁGENES FLEXIBLES Ejemplo. En este caso la imagen flexible ocuparía el 25% de su contenedor padre:<pncas"lxm w2 fot" sa ls=feIg p5 laR> <m sc"m/epniesml_.p"at""/ ig r=igrsosv_apeljg l= ><sa> /pn.lxm {/ Tefeil iaewapr cudb <>o <pn.Sol b cm feIg * h lxbe mg rpe, ol e a r sa> hud e obndwt apretg wdhcas* ie ih ecnae it ls / dslybok ipa:lc;}.lxm ig{ feIg m dslybok ipa:lc; mxwdh10; a-it:0%}.p5{ w2 wdh2% it:5;}.laR{ fot fotrgt la:ih;}
  30. 30. IMÁGENES FLEXIBLESEjemplo. En este caso la imagen flexible ocuparía el 25% de su contenedor padre:
  31. 31. IMÁGENES FLEXIBLESSi necesitamos que la imagen sea un enlace podemos sustituir el tag < p n por un < > sa> a (usando el mismo CSS que en el ejemplo anterior): < he=# cas"lxm w2 fot" a rf"" ls=feIg p5 laR> <m sc"m/epniesml_.p"at""/ ig r=igrsosv_apeljg l= > <a /> .lxm {/ Tefeil iaewapr cudb <>o <pn.Sol b cm feIg * h lxbe mg rpe, ol e a r sa> hud e o bndwt apretg wdhcas* ie ih ecnae it ls / dslybok ipa:lc; } .lxm ig{ feIg m dslybok ipa:lc; mxwdh10; a-it:0% } .p5{ w2 wdh2% it:5; } .laR{ fot fotrgt la:ih; }
  32. 32. IMÁGENES FLEXIBLES Ejemplos con tamaños de imagen distintos: Responsive Web Design (demo) ** Redimensiona la ventana del navegador para ver como se comporta el layout e imágenes flexibles, junto con los media queries.
  33. 33. CSS3 MEDIA QUERIES“Ningún diseño, fijo o fluido, escala bien más allá del contexto para el que fue originalmente diseñado.” Del libro "Responsive Web Design" , de Ethan Marcotte.
  34. 34. CSS3 MEDIA QUERIES PROBLEMAS COMUNES LAYOUTS FLEXIBLESImágenes irreconocibles (demasiado pequeñas o recortadas poroverflow:hidden).Márgenes demasiado grandes.Lineas de texto demasiado cortas (o demasiado largas).Elementos de navegación rotos dificultando legibilidad.Otros problemas…
  35. 35. CSS3 MEDIA QUERIES¿Cómo crear un diseño que pueda adaptarse a cambios de resolución de pantalla y dimensiones del viewport? ¿Cómo hacer diseños más responsive? LAYOUTS FLEXIBLES + MEDIA QUERIES
  36. 36. CSS3 MEDIA QUERIES ¿QUÉ SON Y PARA QUÉ SIRVEN?Son un robusto mecanismo, creado por la W3C, para identificar no sólo los tipos de media, sino también para inspeccionar las características físicas de los dispositivos y navegadores que renderizan el contenido. ¿Sigues sin saber de qué va esto? mediaqueri.es Robot or Not?
  37. 37. CSS3 MEDIA QUERIES DISTINTAS NOMENCLATURAS@ei sre ad(i-it:04x { mda cen n mnwdh12p) bd { oy fn-ie10; otsz:0% }}<ikrl"tlset he=wd.s"mda"cenad(i-it:04x"/ ln e=syehe" rf"iecs ei=sre n mnwdh12p) >@motul"iecs)sre ad(i-it:04x; ipr r(wd.s" cen n mnwdh12p) Se pueden encadenar múltiples queries juntas mediante la keyword “and”@ei sre ad(i-eiewdh40x ad(retto:adcp){…} mda cen n mndvc-it:8p) n oinainlnsae
  38. 38. CSS3 MEDIA QUERIESCAPACIDADES DE LOS DISPOSITIVOS A DETECTAR width height device-width device-height orientation and many more… Lista completa en W3C Media Queries - Features .
  39. 39. CSS3 MEDIA QUERIES CONSIDERACIONESRecaudar información detallada sobre los dispositivos ynavegadores de tu target, saber qué características de los mediaqueries soportan, y testear acorde.Width y height hacen referencia al viewport o ventana del navegador,mientras que device-width y device-height miden las dimensiones detoda la pantalla.Añadir este meta tag en el HTML: <eanm=vepr"cnet"nta-cl=.,wdhdvc-it"/ mt ae"iwot otn=iiilsae10 it=eiewdh >Esto hace que el ancho del viewport del navegador sea igual al ancho de la pantalla del dispositivo, y establece elnivel de zoom al 100%. Con esto logramos mayor consistencia con el tamaño actual del dispositivo.
  40. 40. CSS3 MEDIA QUERIES COMPATIBILIDADAlgunos navegadores aún no las soportan*, aunque existen scripts para solucionarlo: css3-mediaqueries-js respond.js * When can I use CSS3 Media Queries?
  41. 41. CSS3 MEDIA QUERIES EJEMPLO PRÁCTICO/ Salsre * * ml cen /@ei sre ad(a-it:0p) mda cen n mxwdh60x,sre ad(a-eiewdh40x { cen n mxdvc-it:8p) / orCShr..* * u S ee. /}/ Silsal(u saigu)* * tl ml bt cln p /@ei sre ad(i-it:0p){ mda cen n mnwdh60x / orCShr..* * u S ee. /}/ Dstp* * eko /@ei sre ad(i-it:6p){ mda cen n mnwdh80x / orCShr..* * u S ee. /}/ Wd sre * * ie cen /@ei sre ad(i-it:20x { mda cen n mnwdh10p) / orCShr..* * u S ee. /}
  42. 42. CSS3 MEDIA QUERIES LO QUE NO MOLA :( Según Jason Grigsby en su artículo CSS Media Query for Mobile is Fool’s Gold :Se añade más código CSS (en la web mobile la velocidad importa!).Dejar que el navegador escale las imágenes es una mala idea: Imágenes grandes = Grandes ficheros a descargar innecesariamente. El redimensionado es "CPU and memory intensive" por parte del navegador.Utilizar Media Queries para servir distintas imágenes no es lo ideal(aunque las escondamos vía CSS muchos navegadores las descargande todos modos).Las Media Queries no optimizan el HTML o el JavaScript.Las Media Queries no estan bien soportadas.Ignoran el contexto mobile.Tener una web mobile separada es bueno.
  43. 43. CSS3 MEDIA QUERIES RESPONSIVE WEB DESIGN STILL ROCKS!“Planear el diseño para tamaños diferentes y pensar modularmente acerca de bloques y como ubicarlos según tamaño de pantalla, es bueno.”
  44. 44. RECURSOSResponsive Web Design , de Ethan Marcotte.Developing RWD With Opera Mobile Emulator , de SmashingMagazine.Opera Mobile Emulator , de Opera Software.ProtoFluid . Rapid Prototyping of Fluid Layouts, Adaptive CSS andResponsive Design.CSS Media Query for Mobile is Fool’s Gold , de Jason Grigsby.50 fantastic tools for responsive web design , de Net Magazine.
  45. 45. SASSFilosofía y definiciónSass vs. LESSSass básicoSass avanzadoCompassRecursos
  46. 46. SASS FILOSOFÍA PRINCIPAL “ DRY—Dont Repeat Yourself Reducir la repetición de código en las hojas de estilo, ahorrando tiempo y esfuerzo. ”Del libro Pragmatic Guide to SASS , de Hampton Catlin y Michael Lintorn Catlin.
  47. 47. SASS… WHAT? SYNTACTICALLY AWESOME STYLESHEETSLenguaje de pre-procesado server-side, que añade reglas anidadas,variables, mixins,…Se traduce en CSS estándar, bien formateado*.Es un método alternativo de escribir CSS.El CSS tradicional puede ser complicado de leer: Sass soluciona esto.No reemplaza al CSS tradicional, pero nos ayuda a escribir hojas deestilo limpias y semánticas.Dos sintaxis distintas para escribir Sass: SCSS y SASS original. Noscentraremos en la primera (SCSS). * Para procesarlo se puede usar la línea de comandos (consola), algun web-framework plugin, o alguna GUI como Scout o CodeKit .
  48. 48. SASS OTRA GRAN VENTAJA “Tener una paleta de color con un número fijo deopciones a escoger ayuda a no volverse loco con los colores y a no desviarse del estilo marcado.” En definitiva, Sass ayuda a mantener un diseño consistente.
  49. 49. SASS VS. LESS DIFERENCIAS“La mayor diferencia entre Sass y LESS* es el modo en que son procesados. Sass corre sobre Ruby y es procesado server-side.” * LESS es una librería JavaScript (client-side).
  50. 50. SASS VS. LESS ¿CUÁL ESCOGER? Aunque Sass es mejor en unos cuantos aspectos, ambos presentan grandes similitudes. Ambos son pre-procesados. La documentación de LESS es mejor pero, por otro lado, Sass parece que está ganando terreno. Muchos desarrolladores no escogen LESS por su impacto negativo sobre la performance*.* Tiempo adicional requerido por el motor de JavaScript para procesar el código y volcar el CSS modificado hacia el navegador. Una solución es usar LESS solo en entorno de desarrollo y una vez terminado, copiar y pegar el código generado, minificarlo y meterlo en un fichero CSS.
  51. 51. SASS BÁSICO INSTALACIÓN Para correr Sass, necesitas tener Ruby instalado.Windows: instalar mediante Ruby Installer o similar.Mac: desde terminal: s d g m i s a l s s . uo e ntl asLinux: utilizar el package manager y desde linea de comandos: g m eisalss. ntl as
  52. 52. SASS BÁSICO COMPILACIÓNCrear fichero Sass, con extensión . c s ss.Compilar el directorio s s / CSS y printarlo por consola: s s as a asts.cs etssCompilar el directorio s s / CSS en un nuevo fichero . s : s s as a cs asts.csts.s etss etcsAlgunos frameworks, como Ruby on Rails , detectan cambios enficheros . c s los compilan automáticamente a . s . ss y csSi no usamos frameworks usar el comando w t hque detecta los ac,cambios en los ficheros de nuestra carpeta s s / los compila en as yficheros . s en la carpeta especificada (c s ): cs s/ss -wthsyehesss:tlset/s as -ac tlset/assyehescs
  53. 53. SASS BÁSICO ALTERANDO LA SALIDA CSS Al compilar nuestro Sass se generan los CSS. Estos se pueden formatear de distintos modos:ss -syense as -tl etd / aiao(eal) / ndd dfut.ss -syeepne as -tl xadd / sprlgbe / ue eil.ss -syecmat as -tl opc / uasl lnaprdcaain / n oa ie o elrcó.ss -syecmrse / sprcmat (iiid. as -tl opesd / ue opco mnfe) Ejemplo. Compilar el fichero Sass a CSS en un nuevo fichero CSS comprimido:ss ts.csts.s -syecmrse as etss etcs -tl opesd
  54. 54. SASS BÁSICO COMPILANDO CON SCOUTScout es una GUI que nos permite importar nuestro proyecto, especificando una carpeta de origen (p.e. "sass") y de salida (p.e. "css"). Scout detecta cualquier cambio en los ficheros . c sy actualiza los . s de salida. ss cs
  55. 55. SASS BÁSICO /* COMENTARIOS */ Usar comentarios de una sola linea para que aparezcan sólo en los ficheros Sass:/ Hl!Et cmnai sl aaeeáe e fceo.cs / oa se oetro óo prcr n l ihr ss Usar comentarios estándar de CSS para que estos se compilen en el CSS final:/ Aé!Et cmnai aaeeáe e .s fnl* * du se oetro prcr n l cs ia /
  56. 56. SASS BÁSICO ÁMBITO (SCOPE) DE LOS SELECTORES Sass soluciona la repetición de código mediante el anidado (nesting). CSS "scopeado":.noo ifbx {it:0p; wdh20x}.noo .esg ifbx msae {odr1xsldrd} bre:p oi e;.noo .esg .il ifbx msae tte {oo:e; clrrd}.noo .sr ifbx ue {odr2xsldbak} bre:p oi lc;.noo .sr.il ifbx ue tte {oo:lc; clrbak} Sass:.noo { ifbx wdh20x it:0p; .esg { msae bre:p sldrd odr1x oi e; .il { tte clrrd }} oo:e; .sr{ ue bre:p sldbak odr2x oi lc; .il { tte clrbak }}} oo:lc;
  57. 57. SASS BÁSICO DEFINIENDO VARIABLES Las variables ($ a _ a e son útiles para evitar la repetición de valores en nuestros CSS. vrnm) $rmr_oo:#6; piayclr 39 Las variables pueden ser globales o locales: Globales: se definen en su propia linea y se aplican a todas las hojas de estilos. Locales: se definen dentro de un selector y se aplican sólo dentro de dicho selector y sus hijos.Se pueden establecer variables por defecto con el tag ! e a l después de la asignación. Al usar una variable, se dfut usa la asignación por defecto si no hay otras asignaciones de esa variable.
  58. 58. SASS BÁSICO CALCULANDO UN LAYOUTSass permite hacer cáculos “al vuelo”, pudiéndose realizar las operaciones típicas mediante los operadores habituales de programación (+-*/ , , , ). Ejemplo:wdh 1p *05 it: 2x .; Otro ejemplo:$aewdh 50x pg_it: 0p;wdh $aewdh*01 it: pg_it .;
  59. 59. SASS BÁSICO CREANDO THEMES CON COLORES AVANZADOSCambiar la paleta de color de un site entero siempre es un engorro. Con Sass esto se puede hacer fácilmentemediante funciones para aclarar y oscurecer colores, saturar y desaturar, entre muchas otras… Ejemplos: Aclarar/Oscurecer colores: #ae{ pg clr lgtn#369 2%;} oo: ihe(369, 0) Saturar/Desaturar colores: $anclr #369 mi_oo: 369; #ae{ pg clr strt(mi_oo,3%;} oo: auae$anclr 0)
  60. 60. SASS BÁSICO @IMPORTANDOImportando centralizamos llamada a distintos ficheros.Lo hacemos con @ m o t i p r seguido por el nombre del fichero Sass quequeramos importar, p.e. @ m o t " e t (extensión . c s ipr ts" ss o. a s necesaria). s s noPara que un fichero Sass no genere el correspondiente fichero CSSescribiremos "_ delante del nombre del fichero (p.e. _ e t s s ). " ts.csCualquier variable o mixin que usemos en la hoja de estilos importadapodrá usarse en el fichero padre.
  61. 61. SASS BÁSICO @IMPORTANDO Fichero _ o o s s s : clr.cs$anclr #369 mi_oo: 369;/ ALTMR CLR G HR. / O OE OOS O EE Fichero w d h . c s itsss:$anwdh 70x mi_it: 2p;/ ALTMR WDH G HR. / O OE ITS O EE Imports en fichero principal*:@mot"oos; ipr clr"@mot"its; ipr wdh" * Al hacer @ m o t es necesario incluir el guión bajo ni la extensión de _ o o s s s . i p r no clr.cs
  62. 62. SASS BÁSICO CONSTRUYENDO UNA LIBRERÍA FONT FAMILYCon CSS tradicional hay que especificar una misma familia defuentes una y otra vez, o bién usar classes no semánticas(p.e.f n 1 ). ot4Con Sass podemos usar variables, en lugar de repetir la mismadeclaración de f n - a i y o t f m l una y otra vez.Podemos declarar estas variables al principio de nuestra hoja deestilos, o bién ponerlas en un fichero a parte e importarlas con ipr.@mot
  63. 63. SASS BÁSICO CONSTRUYENDO UNA LIBRERÍA FONT FAMILY Ejemplo Fichero f n _ a i y s s : otfml.cs$evtc:"evtc nu" ail hleia sn-ei; hleia hleia ee, ra, evtc, assrf$eea gnv,thm,sn-ei; gnv: eea aoa assrf$uia "uiagad" "uiasn uioe, lcd: lcd rne, lcd as ncd""uiasn" lcd,sn-ei; lcd as, uia assrf Import en fichero principal:@mot"otfml" ipr fn_aiy;
  64. 64. SASS AVANZADO MANTENIENDO LA SEMÁNTICA CON @EXTEND Mantener la semántica es una filosofía donde todo se nombra de forma lógica: .lebto bu_utn / icret (obesgnapco * * norco nmr eú set) / .hcotbto ceku_utn / cret (obesgnfnin * * orco nmr eú ucó) / ¿Qué ocurre si tenemos un grupo de atributos -por ejemplo un botón azul- que necesitamos aplicar a múltiples botones con distintas funciones?.hcotbto { ceku_utn / obé…* * in / bcgon-oo:le akrudclrbu; bre:p sldbak odr1x oi lc; .hcotbto, ceku_utn} .ee_utn rstbto,.ee_utn{ rstbto .edbto { sn_utn bcgon-oo:le akrudclrbu; bcgon-oo:le akrudclrbu; bre:p sldbak odr1x oi lc; bre:p sldbak odr1x oi lc;} }.edbto { sn_utn bcgon-oo:le akrudclrbu; bre:p sldbak odr1x oi lc;}
  65. 65. SASS AVANZADO MANTENIENDO LA SEMÁNTICA CON @EXTEND Aquí es donde entra @ x e dque clona los atributos de una c a s i y los añade a otro: etn, ls o d.lebto { bu_utn bcgon:#369 akrud 369; fn-egt bl; otwih: od clr wie oo: ht; pdig 5x } adn: p;.hcotbto { ceku_utn @xed.lebto;} etn bu_utn Esto se compila como:.lebto,.hcotbto { bu_utn ceku_utn bcgon:#369 akrud 369; fn-egt bl; otwih: od clr wie oo: ht; pdig 5x } adn: p;
  66. 66. SASS AVANZADO MANTENIENDO LA SEMÁNTICA CON @EXTEND e t n permite modificar los estilos clonados. @xedPor ejemplo, si necesitamos hacer que el c e k u _ u t n más oscuro que el b u _ u t n h c o t b t o sea l e b t o original hacemos: .hcotbto { ceku_utn @xed.lebto; etn bu_utn clr dre(369,1%; oo: akn#369 0) }
  67. 67. SASS AVANZADO MANTENIENDO EL CÓDIGO LIMPIO CON LOS MIXINSUn mixin es un fragmento de Sass que puede ser fácilmente aplicadoa otro selector, evitando la repetición de código.Ayudan a mantener el código semántico (p.e. podemos definir unmixin como b u _ e t luego aplicarlo a una c a s letx y l s con nombremás específico, como p o u t t t e r d c _ i l ).Es bueno tener los mixins en una hoja de estilos a parte, para luegoimportarlos desde la hoja principal.
  68. 68. SASS AVANZADO MANTENIENDO EL CÓDIGO LIMPIO CON LOS MIXINS Un mixin se define de la siguiente forma (m x n t x . c s i i _ e t s s ):@ii bu_et{ mxn letx clr #369 oo: 369; fn-aiy hleia ail sn-ei; otfml: evtc, ra, assrf fn-ie 2p;} otsz: 0x Para usarlo haremos (m x n u e s s ): ii_s.cs.rdc_il { pouttte @nld bu_et } icue letx; Esto se compila como:.rdc_il { pouttte clr #369 oo: 369; fn-aiy hleia ail sn-ei; otfml: evtc, ra, assrf fn-ie 2p;} otsz: 0x
  69. 69. SASS AVANZADO LLEVANDO LOS MIXINS MÁS ALLÁ CON VARIABLES Con @ x e d valores se mantienen, mientras que los mixins e t n lospueden incluir argumentos o parámetros que permiten variar los valores. Definir un mixin con atributos variables: @ii bu_et$ie { mxn letx(sz) clr #369 oo: 369; fn-aiy hleia ail sn-ei; otfml: evtc, ra, assrf fn-ie $ie otsz: sz; fn-ain:salcp;} otvrat ml-as .rdc_il { pouttte @nld bu_et(5x;} icue letx 1p)
  70. 70. SASS AVANZADO LLEVANDO LOS MIXINS MÁS ALLÁ CON VARIABLES Definir un mixin con un valor por defecto:@ii bu_et$ie 2p){ mxn letx(sz: 0x clr #369 oo: 369; fn-aiy hleia ail sn-ei; otfml: evtc, ra, assrf fn-ie $ie otsz: sz; fn-ain:salcp;} otvrat ml-as Usar el mixin con y sin valor por defecto:.rdc_il { pouttte @nld bu_et } icue letx;.rdc_il { pouttte @nld bu_et(0p) } icue letx 10x;
  71. 71. SASS AVANZADO LLEVANDO LOS MIXINS MÁS ALLÁ CON VARIABLES El ejemplo anterior se compila, respectivamente, como:.rdc_il { pouttte clr #369 oo: 369; fn-aiy hleia ail sn-ei; otfml: evtc, ra, assrf fn-ie 2p; otsz: 0x fn-ain:salcp;} otvrat ml-as.rdc_il { pouttte clr #369 oo: 369; fn-aiy hleia ail sn-ei; otfml: evtc, ra, assrf fn-ie 10x otsz: 0p; fn-ain:salcp;} otvrat ml-as
  72. 72. SASS AVANZADO INTERPOLACIÓN Interpolación significa "pon esto aquí". Nos permite generardinámicamente el nombre de una propiedad o selector, escribiendo la variable entre # } {. $anm:vlo crae ov; .e_{crae { rd#$anm} clr #0; oo: f0 } Esto se compila como: .e_ov { rdvlo clr #0; oo: f0 }
  73. 73. SASS AVANZADO SI TE REPITES MÁS QUE EL AJO, USA @EACHe c ayuda a mantener nuestro Sass DRY. Es un modo de copiar el@ah mismo estilo para un montón de variables. @ah$ebri to,jny cln pi { ec mme n hm on, oi, hl .{mme}pcue{ #$ebr_itr bcgon-mg:ul"iae#$ebr.p";}} akrudiae r(/mg/{mme}jg) Esto se compila como: .hmpcue{ to_itr bcgon-mg:ul"iaeto.p";} akrudiae r(/mg/hmjg) .on_itr { jnypcue bcgon-mg:ul"iaejnyjg) } akrudiae r(/mg/on.p"; .oi_itr { clnpcue bcgon-mg:ul"iaeclnjg) } akrudiae r(/mg/oi.p"; .hlpcue{ pi_itr bcgon-mg:ul"iaepi.p";} akrudiae r(/mg/hljg)
  74. 74. SASS AVANZADO DETERMINANDO CONDICIONES CON @IF i permite escribir condiciones, muy útil cuando escribimos mixins reusables y funciones. @f@ii cutyclr$onr){ mxn onr_oo(cuty @f$onr = fac { i cuty = rne clr bu;} oo: le @lei $onr = san{ es f cuty = pi clr ylo;} oo: elw @lei $onr = iay{ es f cuty = tl clr gen } oo: re; @le{ es clr rd }} oo: e;.nln {@nld cutyclregad;} egad icue onr_oo(nln).rne{@nld cutyclrfac) } fac icue onr_oo(rne; Esto se compila como:.nln {clr rd } egad oo: e;.rne{clr bu;} fac oo: le
  75. 75. SASS AVANZADO CAMBIANDO EL ASPECTO CON @MEDIA ANIDADO Cambiar el estilo en base al dispositivo. Usando @ e i en estilo anidado: mda.an{ mi clr #369 oo: 369; fn-ie 1p; otsz: 5x @ei pit{ mda rn fn-ie 1p;}} otsz: 0x Esto se compila como:.an{ mi clr #369 oo: 369; fn-ie 1p;} otsz: 5x @ei pit{ mda rn .an{ mi fn-ie 1p;}} otsz: 0x
  76. 76. SASS AVANZADO CAMBIANDO EL ASPECTO CON @MEDIA ANIDADO Haciendo el site portrait-specific….an{ mi clr #369 oo: 369; fn-ie 1p; otsz: 5x @ei sre ad(a-it:30x { mda cen n mxwdh 2p) fn-ie 3p;}} otsz: 5x …o landscape-specific..an{ mi clr #369 oo: 369; fn-ie 1p; otsz: 5x @ei sre ad(i-it:31x ad(a-it:40x { mda cen n mnwdh 2p) n mxwdh 8p) fn-ie 2p;}} otsz: 5x
  77. 77. COMPASS Librería de mixins, funciones y otras extensiones útiles para Sass. Una vez instalado Ruby, procedemos a instalar Compass:gmudt -sse e pae -ytmgmisalcmas e ntl ops Para compilar nuestras hojas de estilo usaremos - c m a s -ops:ss -cmasmfl.csmfl.s as -ops yiess yiecsss -cmas-wth as -ops -ac
  78. 78. COMPASS CONFIGURACIÓN DE UN PROYECTOCompass configura ficheros y carpetas por defecto.Crear proyecto: $ c m a s c e t p o e t n m > ops rae rjc_aeCompilar: $ c m a s c m i e p o e t n m > ops opl rjc_aeUna vez generado tu proyecto, coloca tus ficheros Sass en la carpetas s /El CSS compilado se coloca automáticamente en la carpeta as.cs. s/Cambiar configuración: editar fichero c n i . b ofgr.Vigilar cambios proyecto entero: c m a s w t h ops ac.
  79. 79. COMPASS LAS VENTAJAS DE "LA BRÚJULA"Facilita mucho el desarrollo, ahorrando tiempo y esfuerzo en desarrollo. Compass.app GUI de Compass, para los "no amantes" de la consola.
  80. 80. RECURSOSPragmatic Guide to Sass , de Hampton Catlin y Michael LintornCatlin.Sass Language y Sass Script Functions , página oficial.Sass vs. LESS , de CSS-Tricks.An Introduction To LESS, And Comparison To Sass , de SmashingMagazine.Compass, an open-source CSS Authoring Framework , página oficial.Sass, Compass, and Assetic in 10 minutes .mooxins: CSS3 mixins for Sass(scss) .
  81. 81. DUDAS, PREGUNTAS, BOSTEZOS… ☛ The End ☚
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×