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

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!
    hola@ferperales.net
    

    View Slide