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

Cómo lograr un flujo de trabajo exitoso entre programadores y diseñadores

Cómo lograr un flujo de trabajo exitoso entre programadores y diseñadores

Fernando Perales

August 16, 2016
Tweet

More Decks by Fernando Perales

Other Decks in Programming

Transcript

  1. #SGNEXT
    @FerPeralesM
    CÓMO LOGRAR UN FLUJO DE TRABAJO
    EXITOSO ENTRE PROGRAMADORES Y
    DISEÑADORES

    View Slide

  2. #SGNEXT
    @FerPeralesM
    CÓMO LOGRAR UN FLUJO DE TRABAJO
    EXITOSO ENTRE PROGRAMADORES Y
    DISEÑADORES
    FERNANDO PERALES

    View Slide

  3. #SGNEXT
    @FerPeralesM

    View Slide

  4. #SGNEXT
    @FerPeralesM
    Senior Consultant
    MagmaLabs

    View Slide

  5. #SGNEXT
    @FerPeralesM
    Promotor del FLOSS
    Apasionado del desarrollo web
    Conferencista en formación
    Estudiante de Bajo Eléctrico
    Fan: Heavy metal, cerveza, Twitter, Gregory Sallust, Ruby

    View Slide

  6. #SGNEXT
    @FerPeralesM

    View Slide

  7. #SGNEXT
    @FerPeralesM
    Programadores
    vs.
    Diseñadores

    View Slide

  8. @FerPeralesM #SGNEXT
    Programadores
    vs.
    Diseñadores
    http://sixrevisions.com/infographics/web-designers-vs-web-developers-infographic/

    View Slide

  9. @FerPeralesM #SGNEXT
    “NADIE NOS ENSEÑA A
    TRABAJAR JUNTOS”

    View Slide

  10. @FerPeralesM #SGNEXT
    Fer Perales
    “NADIE NOS ENSEÑA A
    TRABAJAR JUNTOS”

    View Slide

  11. #SGNEXT
    @FerPeralesM
    El proyecto

    View Slide

  12. @FerPeralesM #SGNEXT
    EL PROYECTO
    ▸ 6 temas para una plataforma de e-commerce
    ▸ Cada tema con 6 páginas: About Us, Cart, Categories,
    Contact Us, Home y PDP
    ▸ Sólo proporcionar el HTML y CSS necesario: un sitio estático
    ▸ Un mes
    ▸ 4 programadores y 4 diseñadores

    View Slide

  13. GOPRO.COM

    View Slide

  14. ABOUT US

    View Slide

  15. CART

    View Slide

  16. CATEGORIES

    View Slide

  17. CONTACT US

    View Slide

  18. HOME

    View Slide

  19. PDP

    View Slide

  20. @FerPeralesM #SGNEXT

    View Slide

  21. #SGNEXT
    @FerPeralesM
    Los problemas

    View Slide

  22. @FerPeralesM #SGNEXT
    REPARTICIÓN DEL TRABAJO

    View Slide

  23. @FerPeralesM #SGNEXT

    View Slide

  24. @FerPeralesM #SGNEXT
    POR VISTA

    View Slide

  25. @FerPeralesM #SGNEXT
    POR RESOLUCIÓN

    View Slide

  26. @FerPeralesM #SGNEXT
    POR COMPONENTE

    View Slide

  27. @FerPeralesM #SGNEXT

    View Slide

  28. @FerPeralesM #SGNEXT
    RESOLUCIONES A
    CONSIDERAR

    View Slide

  29. @FerPeralesM #SGNEXT

    View Slide

  30. @FerPeralesM #SGNEXT

    View Slide

  31. @FerPeralesM #SGNEXT
    ELECCIÓN DE LAS
    HERRAMIENTAS

    View Slide

  32. @FerPeralesM #SGNEXT
    ROTACIÓN DE
    DESARROLLADORES

    View Slide

  33. @FerPeralesM #SGNEXT
    FACTOR AUTOBÚS

    View Slide

  34. @FerPeralesM #SGNEXT
    https://adamprescott.files.wordpress.com/2012/12/busfactor1.png

    View Slide

  35. @FerPeralesM #SGNEXT
    ¿ORDEN DEL TRABAJO?

    View Slide

  36. @FerPeralesM #SGNEXT
    PRIMERO ERA NECESARIO EL DISEÑO
    ANTES DE LA IMPLEMENTACIÓN

    View Slide

  37. @FerPeralesM #SGNEXT
    NO PODEMOS HACER QUE LOS
    DISEÑADORES TRABAJEN MÁS RÁPIDO

    View Slide

  38. @FerPeralesM #SGNEXT
    PERO…

    View Slide

  39. @FerPeralesM #SGNEXT
    PODEMOS HACER QUE
    PIERDAN MENOS TIEMPO

    View Slide

  40. @FerPeralesM #SGNEXT
    GUIDELINES

    View Slide

  41. @FerPeralesM #SGNEXT

    View Slide

  42. @FerPeralesM #SGNEXT
    ¿SCRUM/AGILE NECESARIO?

    View Slide

  43. @FerPeralesM #SGNEXT
    ¿SCRUM/AGILE NECESARIO?
    R: NO

    View Slide

  44. @FerPeralesM #SGNEXT
    COMPONENTES COMUNES
    PARA TODOS LOS TEMAS

    View Slide

  45. @FerPeralesM #SGNEXT
    ¡REUTILIZAR!

    View Slide

  46. @FerPeralesM #SGNEXT
    PARCIALES + SMACSS

    View Slide

  47. @FerPeralesM #SGNEXT

    View Slide

  48. @FerPeralesM #SGNEXT
    “SCALABLE AND MODULAR
    ARCHITECTURE FOR CSS (SMACSS)
    ES EL LIBRO QUE LE DA SENTIDO A
    HACER CSS”

    View Slide

  49. @FerPeralesM #SGNEXT
    “SCALABLE AND MODULAR
    ARCHITECTURE FOR CSS (SMACSS)
    ES EL LIBRO QUE LE DA SENTIDO A
    HACER CSS”
    Fer Perales

    View Slide

  50. @FerPeralesM #SGNEXT
    ASUNCIONES

    View Slide

  51. @FerPeralesM #SGNEXT
    SISTEMA DE GRID VS.
    PIXEL PERFECT

    View Slide

  52. @FerPeralesM #SGNEXT
    DISEÑADORES HACIAN PIXEL
    PERFECT

    View Slide

  53. @FerPeralesM #SGNEXT
    PROGRAMADORES USABAN
    SISTEMA DE GRID

    View Slide

  54. @FerPeralesM #SGNEXT

    View Slide

  55. @FerPeralesM #SGNEXT
    ¡TODOS USAMOS SISTEMA DE
    GRID!

    View Slide

  56. @FerPeralesM #SGNEXT

    View Slide

  57. @FerPeralesM #SGNEXT
    ¿O NO?

    View Slide

  58. @FerPeralesM #SGNEXT
    GUTTER

    View Slide

  59. @FerPeralesM #SGNEXT
    ¿GUTTER?

    View Slide

  60. @FerPeralesM #SGNEXT

    View Slide

  61. @FerPeralesM #SGNEXT
    BEFORE, AFTER, SPLIT, INSIDE,
    INSIDE-STATIC

    View Slide

  62. @FerPeralesM #SGNEXT
    DISEÑADORES USABAN
    BEFORE

    View Slide

  63. @FerPeralesM #SGNEXT
    PROGRAMADORES USABAN
    AFTER

    View Slide

  64. @FerPeralesM #SGNEXT

    View Slide

  65. @FerPeralesM #SGNEXT

    View Slide

  66. @FerPeralesM #SGNEXT
    TODOS USAMOS BEFORE

    View Slide

  67. @FerPeralesM #SGNEXT
    ENTREGAS

    View Slide

  68. @FerPeralesM #SGNEXT

    View Slide

  69. @FerPeralesM #SGNEXT
    FACTOR AUTOBUS ATACA DE
    NUEVO

    View Slide

  70. @FerPeralesM #SGNEXT
    http://img07.deviantart.net/15bb/i/2009/102/f/5/killer_bus_by_wendieee.jpg

    View Slide

  71. @FerPeralesM #SGNEXT

    View Slide

  72. @FerPeralesM #SGNEXT

    View Slide

  73. #SGNEXT
    @FerPeralesM
    Las lecciones
    aprendidas

    View Slide

  74. #SGNEXT
    @FerPeralesM
    DETENERTE PARA PONER
    ORDEN ESTÁ BIEN

    View Slide

  75. #SGNEXT
    @FerPeralesM
    TOMARTE EL TIEMPO NECESARIO
    PARA ELEGIR TUS HERRAMIENTAS

    View Slide

  76. #SGNEXT
    @FerPeralesM
    EN PROCESOS REPETITIVOS, ELABORA
    UNA METODOLOGÍA Y DOCUMÉNTALA

    View Slide

  77. #SGNEXT
    @FerPeralesM
    REUTILIZA TODO LO QUE
    PUEDAS

    View Slide

  78. #SGNEXT
    @FerPeralesM
    COMUNICACIÓN

    View Slide

  79. #SGNEXT
    @FerPeralesM
    EMPATÍA Y RESPETO

    View Slide

  80. #SGNEXT
    @FerPeralesM
    CONFIANZA

    View Slide

  81. #SGNEXT
    @FerPeralesM
    PRÓXIMIDAD

    View Slide

  82. #SGNEXT
    @FerPeralesM
    DESASTE DE TODO LO
    INNECESARIO

    View Slide

  83. #SGNEXT
    @FerPeralesM
    EDUQUEN A SUS
    PROGRAMADORES
    DISEÑADORES:

    View Slide

  84. #SGNEXT
    @FerPeralesM
    http://cdn.skilledup.com/wp-content/uploads/2014/10/Web-Design-Vs-Web-Development-Feature_1290x688_KL-940x501.jpg

    View Slide

  85. #SGNEXT
    @FerPeralesM
    EDUQUEN A SUS
    DISEÑADORES
    PROGRAMADORES:

    View Slide

  86. #SGNEXT
    @FerPeralesM
    http://cdn.skilledup.com/wp-content/uploads/2014/10/Web-Design-Vs-Web-Development-Feature_1290x688_KL-940x501.jpg

    View Slide

  87. @FerPeralesM #SGNEXT
    AMBOS QUEREMOS
    HACER DE LA WEB
    UN LUGAR MEJOR
    http://designmodo.com/wp-content/uploads/2013/10/designervdeveloper.jpg

    View Slide

  88. @FerPeralesM #SGNEXT
    ¿PREGUNTAS?

    View Slide

  89. #SGNEXT
    @FerPeralesM
    ¡GRACIAS!
    [email protected]

    View Slide