Tweet
Tweet

Slide 1

Slide 1 text

#DrupalCampMX @FerPeralesM QUÉ HACER Y QUÉ NO HACER PARA UN FLUJO DE TRABAJO EXITOSO ENTRE PROGRAMADORES Y DISEÑADORES LUZ ROJA, LUZ VERDE:

Slide 2

Slide 2 text

#DrupalCampMX @FerPeralesM

Slide 3

Slide 3 text

#DrupalCampMX @FerPeralesM Ingeniero de Software MagmaLabs

Slide 4

Slide 4 text

#DrupalCampMX @FerPeralesM Ingeniero de Software MagmaLabs ¡Psst! Estamos contratando careers.magmalabs.io

Slide 5

Slide 5 text

#DrupalCampMX @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

Slide 6

Slide 6 text

#DrupalCampMX @FerPeralesM

Slide 7

Slide 7 text

#DrupalCampMX @FerPeralesM Programadores vs. Diseñadores

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

#DrupalCampMX @FerPeralesM “NADIE NOS ENSEÑA A TRABAJAR JUNTOS”

Slide 10

Slide 10 text

#DrupalCampMX @FerPeralesM Fer Perales “NADIE NOS ENSEÑA A TRABAJAR JUNTOS”

Slide 11

Slide 11 text

#DrupalCampMX @FerPeralesM El proyecto

Slide 12

Slide 12 text

#DrupalCampMX @FerPeralesM 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

Slide 13

Slide 13 text

GOPRO.COM

Slide 14

Slide 14 text

ABOUT US

Slide 15

Slide 15 text

CART

Slide 16

Slide 16 text

CATEGORIES

Slide 17

Slide 17 text

CONTACT US

Slide 18

Slide 18 text

HOME

Slide 19

Slide 19 text

PDP

Slide 20

Slide 20 text

#DrupalCampMX @FerPeralesM

Slide 21

Slide 21 text

#DrupalCampMX @FerPeralesM Los problemas

Slide 22

Slide 22 text

#DrupalCampMX @FerPeralesM REPARTICIÓN DEL TRABAJO

Slide 23

Slide 23 text

#DrupalCampMX @FerPeralesM

Slide 24

Slide 24 text

#DrupalCampMX @FerPeralesM POR VISTA

Slide 25

Slide 25 text

#DrupalCampMX @FerPeralesM POR RESOLUCIÓN

Slide 26

Slide 26 text

#DrupalCampMX @FerPeralesM POR COMPONENTE

Slide 27

Slide 27 text

#DrupalCampMX @FerPeralesM

Slide 28

Slide 28 text

#DrupalCampMX @FerPeralesM RESOLUCIONES A CONSIDERAR

Slide 29

Slide 29 text

#DrupalCampMX @FerPeralesM

Slide 30

Slide 30 text

#DrupalCampMX @FerPeralesM

Slide 31

Slide 31 text

#DrupalCampMX @FerPeralesM ELECCIÓN DE LAS HERRAMIENTAS

Slide 32

Slide 32 text

#DrupalCampMX @FerPeralesM ROTACIÓN DE DESARROLLADORES

Slide 33

Slide 33 text

#DrupalCampMX @FerPeralesM FACTOR AUTOBÚS

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

#DrupalCampMX @FerPeralesM ¿ORDEN DEL TRABAJO?

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

#DrupalCampMX @FerPeralesM PERO…

Slide 39

Slide 39 text

#DrupalCampMX @FerPeralesM PODEMOS HACER QUE PIERDAN MENOS TIEMPO

Slide 40

Slide 40 text

#DrupalCampMX @FerPeralesM GUIDELINES

Slide 41

Slide 41 text

#DrupalCampMX @FerPeralesM

Slide 42

Slide 42 text

#DrupalCampMX @FerPeralesM ¿SCRUM/AGILE NECESARIO?

Slide 43

Slide 43 text

#DrupalCampMX @FerPeralesM ¿SCRUM/AGILE NECESARIO? R: NO

Slide 44

Slide 44 text

#DrupalCampMX @FerPeralesM COMPONENTES COMUNES PARA TODOS LOS TEMAS

Slide 45

Slide 45 text

#DrupalCampMX @FerPeralesM ¡REUTILIZAR!

Slide 46

Slide 46 text

#DrupalCampMX @FerPeralesM PARCIALES + SMACCS

Slide 47

Slide 47 text

#DrupalCampMX @FerPeralesM

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

#DrupalCampMX @FerPeralesM ASUNCIONES

Slide 51

Slide 51 text

#DrupalCampMX @FerPeralesM SISTEMA DE GRID VS. PIXEL PERFECT

Slide 52

Slide 52 text

#DrupalCampMX @FerPeralesM DISEÑADORES HACIAN PIXEL PERFECT

Slide 53

Slide 53 text

#DrupalCampMX @FerPeralesM PROGRAMADORES USABAN SISTEMA DE GRID

Slide 54

Slide 54 text

#DrupalCampMX @FerPeralesM

Slide 55

Slide 55 text

#DrupalCampMX @FerPeralesM ¡TODOS USAMOS SISTEMA DE GRID!

Slide 56

Slide 56 text

#DrupalCampMX @FerPeralesM

Slide 57

Slide 57 text

#DrupalCampMX @FerPeralesM ¿O NO?

Slide 58

Slide 58 text

#DrupalCampMX @FerPeralesM GUTTER

Slide 59

Slide 59 text

#DrupalCampMX @FerPeralesM ¿GUTTER?

Slide 60

Slide 60 text

#DrupalCampMX @FerPeralesM

Slide 61

Slide 61 text

#DrupalCampMX @FerPeralesM BEFORE, AFTER, SPLIT, INSIDE, INSIDE-STATIC

Slide 62

Slide 62 text

#DrupalCampMX @FerPeralesM DISEÑADORES USABAN BEFORE

Slide 63

Slide 63 text

#DrupalCampMX @FerPeralesM PROGRAMADORES USABAN AFTER

Slide 64

Slide 64 text

#DrupalCampMX @FerPeralesM

Slide 65

Slide 65 text

#DrupalCampMX @FerPeralesM …

Slide 66

Slide 66 text

#DrupalCampMX @FerPeralesM TODOS USAMOS BEFORE

Slide 67

Slide 67 text

#DrupalCampMX @FerPeralesM ENTREGAS

Slide 68

Slide 68 text

#DrupalCampMX @FerPeralesM

Slide 69

Slide 69 text

#DrupalCampMX @FerPeralesM FACTOR AUTOBUS ATACA DE NUEVO

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

#DrupalCampMX @FerPeralesM

Slide 72

Slide 72 text

#DrupalCampMX @FerPeralesM

Slide 73

Slide 73 text

#DrupalCampMX @FerPeralesM Las lecciones aprendidas

Slide 74

Slide 74 text

#DrupalCampMX @FerPeralesM DETENERTE PARA PONER ORDEN ESTÁ BIEN

Slide 75

Slide 75 text

#DrupalCampMX @FerPeralesM TOMARTE EL TIEMPO NECESARIO PARA ELEGIR TUS HERRAMIENTAS

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

#DrupalCampMX @FerPeralesM REUTILIZA TODO LO QUE PUEDAS

Slide 78

Slide 78 text

#DrupalCampMX @FerPeralesM COMUNICACIÓN

Slide 79

Slide 79 text

#DrupalCampMX @FerPeralesM EMPATÍA Y RESPETO

Slide 80

Slide 80 text

#DrupalCampMX @FerPeralesM CONFIANZA

Slide 81

Slide 81 text

#DrupalCampMX @FerPeralesM PRÓXIMIDAD

Slide 82

Slide 82 text

#DrupalCampMX @FerPeralesM DESASTE DE TODO LO INNECESARIO

Slide 83

Slide 83 text

#DrupalCampMX @FerPeralesM EDUQUEN A SUS PROGRAMADORES DISEÑADORES:

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

#DrupalCampMX @FerPeralesM EDUQUEN A SUS DISEÑADORES PROGRAMADORES:

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

#DrupalCampMX @FerPeralesM ¿PREGUNTAS?

Slide 89

Slide 89 text

#DrupalCampMX @FerPeralesM ¡GRACIAS! [email protected]