 ¿Si Jorge deja de pasar por el frente del Proyector? ¿Se escuchan? No. ¿Si? No. No, pero el audio de la gente igual no. No, no. Pues, si lo suben mucho, apetan. Hola, hola. Hola. Si no, no hablo, ¿eh? Estoy castigando. Hola, hola. Ahora, ahora. ¿No te acertes? ¡Dipa Cantauria! ¿Qué tal? Bueno, voy a presentaros. Ya se apagó un micrófono más. Marta Torre, Nora Ferreiros. Ayer nos contaron en la mitad cómo trabajar juntas y no morir en el intento. Y hoy entrarán al detalle de cómo crear un WordPress a medida. Marta es una cantabra o novense desarrolladora full-stack. No, no, la cantabra, la cantabra, por favor. Y no eras una gallega barcelonesa diseñadora UXui. Ya acepto ambos. Realmente, su idea era juntarse en Pontevedra para montar un campeonato de Mario Kart, pero hemos aprovechado para arrastrarlas hasta este escenario y que compartan su experiencia, así que un aplauso doble. Gracias por escoger nuestro track. Es importante para nosotras que hayáis venido al nuestro track. Bueno, continuando un poco con la línea del trabajo en equipo, vamos a hablar de una cosa que mucha gente nos pregunta, que es el desarrollo desde cero, desde que el cliente llegue a nosotros de un WordPress a medida. Es decir, a medida a medida, desde cero, ¿vale? Bueno, primero, agradecer a la organización por imitarnos y también por hacer un esfuerzo en aumentar la visibilización de la mujer en eventos que lo ha conseguido. Un aplauso, por favor. Muchas gracias a todos por venir. Quería que era bastante importante, así que nada. Bueno, me presento. Soy Marta, desarrolladora web Fullstack, especializada en WordPress y en desarrollo de aplicaciones móviles. Tengo un estudio pequeño, donde, junto con Nora, diseñamos y desarrollamos proyectos para clientes. También soy fundadora con ella de WordPress. WordPress es un proyecto para visibilizar a las mujeres en eventos de la comunidad de WordPress en España. Y también organizo eventos en Andalucía para las desarrolladoras y tal, estoy un poco nerviosa, perdona. Y ya está, me me ha pasado esto. Bueno, yo, un poco más de decir que lo que he dicho Marta y Juan, pero si soy diseñadora, voy a dejar de moverme. Bueno, yo tengo mi propio proyecto, aparte de ayudarla a ella, que es Nora Adriana, que yo soy freelance y colaboro con ella en WordPress. Sólo quería decir una cosa, esta presentación se me ha olvidado de poner aquí, que la foto la ha hecho Roberto Hueco. Y, de paso, digo que es importante cuando utilicéis cosas de otras personas que, sobre todo, si no habéis pagado por ellas, que digáis quién las ha hecho, siempre os hacéis un favor. Y ahora vamos un poco a Leo. ¿Qué aporta tener un proceso de trabajo definido? ¿Qué quiere decir con definido? Quiere decir que no empezamos y hacemos cosas, sino que nosotros, en este momento, cuando empezamos a trabajar juntas no, por desgracia, tenemos, digamos, un protocolo, ¿vale? Es decir, el proceso es uno, se hace así, se revisa, se cambia, pero ahí estás, como una plantilla, ¿vale? Y de qué vale el esfuerzo que lleva a hacerte una plantilla de tu proceso de trabajo. Lo primero es la escalabilidad. Si tú haces tu proceso de manera que crees como bloques, te permite adaptarlo a diferentes tamaños de proyectos. Pues, por ejemplo, en este caso, los Wordpress a medida, pues, hay gente que quiere un Wordpress a medida, pero en verdad es pequeño, desde una landing, que la quieran a medida en Wordpress por lo que sea, hasta una aplicación, oye, perdónimo, hasta una web que puede tener 30 páginas, o sea, ¿vale? Entonces, el proyecto, el proceso nos permite un poco acomodar donde van todas esas cosas y crecer o hacerlo más pequeño. Sobre todo la utilización, la optimización del tiempo. Tú siempre sabes que va a pasar después, porque ya lo has decidido antes, entonces eso te permite repartir el proceso en los días o en los meses y sobre todo focalizarte en que sabes que va después, no tienes que pararte todo el tiempo en cada proyecto pensar que tienes que hacer luego. Registro es porque en el proceso siempre va a haber errores o algo en concreto. Entonces, si hay un registro de algo, siempre vamos a saber dónde nos hemos equivocado, ¿vale? Entonces, está bien saberlo, pero después pasa tener un control de todo el proceso, ¿vale? Si hay algún error de algo en concreto, podemos verlo y controlarlo, y después plantear una solución del problema. Bueno, siendo un poco la que siempre mira por lo que puede ser mal, tener un registro en vuestro proceso también nos ayuda a que si hay algún problema, sobre todo con los clientes, tú lo tienes todo registrado, lo tienes todo sin emails o documentos y esto te permite si hay un problema en algún momento, decir, mira, esto pasó así, se hizo así, y preferiblemente que no pase nada, pero siempre pasan cosas y... Siempre, siempre. Y ahora les vamos a explicar lo que es el proceso en sí y las fases que tiene. La fase previa es la que va antes de comenzar, digamos, a crear la web, que al principio en verdad es la que no le damos mucha importancia porque, bueno, pues hablar con el cliente y empezar. Pero luego nos pareció que la mayor parte de los problemas que teníamos en los proyectos es la primera parte, que en verdad son cosas obvias, pero si las tienes controladas, tira mejor. Lo primero que nosotros hacemos es lo que hicimos es crear un formulario de briefing, esto nos permite tomar todas las decisiones posibles antes de comenzar, eso te ahorra... Perdónad, pero es que me disfrutaré mucho la cumple y por eso hablo un poco raro, ¿vale? Tomar las decisiones antes de empezar y ahorra cambios, ¿vale? ¿Qué pasa? Cuando un cliente llega a ti lo que te dices, hola, se oye no sé quién, quiere una web. Gracias, bueno, si te dicen gracias ya es bastante, pero entonces te dices, ¿qué web quieres? Hay un montón de preguntas que nos dábamos cuenta, que necesitamos en todos los proyectos que las hacíamos una y otra vez, que nos olvidábamos de muchas, porque si se las cada vez que tiene un cliente las vuelves a escribir, se te olvidan. Entonces dijimos, vamos a romerlas todas en un formulario y... es muy largo, pero se hace rápido, ¿vale? Entonces aquí con diferentes... con condicionales y diferentes cosas, según lo que la persona quiera, tanto si quiere una tienda online, como si quiere branding como si quiere una plataforma de formación una aplicación móvil, aquí lo puede responder prácticamente todo. Y también nos da una idea de... a veces esforzamos al cliente al que haga esto y se dé cuenta que a lo mejor no era una web lo que quería, ¿vale? Que a lo mejor no quería nada o quería una aplicación o lo que sea. Entonces, en este primer paso se arregla bastante el proyecto. Lo siguiente es decidir si aceptamos el proyecto. Como os decía, el formulario nos sirve mucho para entender al cliente qué es lo que realmente quiere. Y muchas veces nos hace darnos cuenta que ese cliente o bien no tiene el presupuesto que le hace falta para lo que te está pidiendo o... bueno ser muy poco de análisis psicológico también para saber si es un tipo de cliente que por lo que sea no nos conviene o si directamente es un proyecto que nosotros no podemos hacer o no sabemos hacer, ¿vale? Entonces decidimos si lo aceptamos o no antes de decirle que nada y entonces es cuando generamos el presupuesto a partir de ese briefing. Como os decía, recordado del registro, ¿qué pasa con todo esto? Esa persona ha dejado registrado en un formulario de sus peticiones. Si más adelante, cuando estamos a hacer el proyecto de repente dices que yo quería tal cosa ya pero en el briefing no lo pone. Y entonces el presupuesto va a estar hecho a medida del briefing. Lo que has puesto en el briefing es lo que esté presupuesto. Cualquier otra cosa pues habrá que presupuestar la parte. Entonces nosotros tenemos un programa bueno, una plataforma que nos permite tener un diseño bastante aceptable y sobre todo usable, que es fácil de leer y permite firmar que esa es una cosa que nos interesa mucho, ¿vale? que los clientes se comprometieran, ¿vale? Es decir es un poco el tema. Si no los he leído es tu problema pero ya lo has firmado. Porque no se lee nadie nada. Normalmente está muy bien porque tiene estadísticas de las páginas a las que va aquí no sé si se lee muy bien, pero bueno está toda la parafernal y las frases y hay una pestaña que pone presupuesto que es básicamente la única que se mira todo el mundo antes de firmar. Pero una vez más el registro te permite que ese no sea tu problema. Registrado está, así que... Luego llega la respuesta del presupuesto, ¿vale? Bueno, se hace si no, pues nada y si es que si pues nada, felices todos, ¿no? Ahí estamos. Bueno, aunque sea que no intentamos preguntarle al cliente, ¿por qué no? ¿Sabes? Aunque que no le contestamos siempre el mail y le decimos que gracias y tal, si es que si pues ya la otra fase, ¿vale? El contrato y la primera factura, ¿vale? En el contrato tenemos un montón de páginas y de cláusulas de errores por clientes. Cada cláusula de nuestro contrato es un error con un cliente, ¿vale? No sé cuántos están ahora pero creo que son 13 páginas de contrato algo así. Hay que ponerlo todo y cerrarlo todo porque si no va a haber problemas siempre. Os recomendamos también una plataforma que os permita firmarlo, que nosotros usamos la misma y la gente cuando le hace firmarse a veces sí que se las mira. Y luego hacemos la primera factura, ¿vale? Y ya luego nos pagan y empezamos el proyecto. Si está bien, nos lo preguntaban nos lo preguntó antes, por ahí alguien Nosotras cobramos por adelantado y si no no empieza el proyecto. Entonces, yo soy la que empieza, ¿vale? Según el proyecto pueden pasar muchas cosas si puede haber cosas que aquí yo no haga o incluso puede haber cosas que aquí no he puesto que se se hacen, pero esto es un poco lo que se suele hacer, ¿vale? Paso a hacer lo que se llama un briefing de diseño. El briefing de antes era más un briefing de funcionalidades, ¿vale? Saber qué páginas hay, el contenido saber un poco la estructura de la empresa o lo que se hace. El briefing de diseño lleva más dedicado al resultado que yo le voy a dar, ¿vale? Saber un poco pues el estilo que quiere cuáles son su público objetivo lo que va a definir realmente lo que yo voy a crear. Lo primero que hago si la persona tiene los contenidos hechos y la arquitectura hecha y el flujo hecho es hacer los wireframes, ¿vale? Si no estáis familiarizados con el término es básicamente como una esquema, ¿vale? Una colocación de los elementos así un poco en frío, es una esquemita en la que dices aquí van fotos, aquí va un botón aquí va un texto, puede ser tan detallado como quieras, a mí me gusta hacerlos bastante detallados porque el cliente es más fácil imaginarse el final y porque así yo tengo que currar menos luego lo que más haga aquí, menos haré después pero también puede ser incluso a mano, ¿vale? Entonces sobre el wireframe es más fácil decidir sobre todo el tema de estructura de las secciones qué orden quieren que tengan en las secciones cuánto quieren que ocupe y demás y así me ahorró el tiempo de hacer el diseño visual y corregir sobre diseño visual Entonces una vez están aprobados los wireframes nosotros tenemos una especie de ley que dice que cualquier elemento aprobado nunca puede cambiarse, al menos dentro del mismo presupuesto o del mismo proyecto, ¿vale? Entonces una vez los wireframes son importantes porque se aprueban una vez aprueban tú no puedes cambiar nada de la estructura al menos en ese presupuesto, ¿vale? Entonces pasa diseño visual y aquí ya sí que es darle el aspecto que va a tener al final todos los cambios de diseño, ya sea estructura estilo o incluso las imágenes que quieres poner se deciden aquí en desarrollo no se decide nada en desarrollo pues sí, todo bien Entonces antes de enseñárselo al aprobación de diseño hay dos partes en la aprobación de diseño, la primera parte es antes de que el cliente vea nada se pasa en este caso producción y vemos que esto también sucede en los wireframes pero vemos que a ver, que yo haya diseñado algo que entre el presupuesto por ejemplo, porque puedo haber pensado una interacción o un flujo de navegación o cualquier cosa que luego ella me diga es que esto, si hacemos esto se va del presupuesto o va a cargar mucha la web o no compensa por la razón que sea, entonces antes de que el cliente vea nada, siempre pasa primero por ella para que me diga si, si esto está de acuerdo a lo que pidió el cliente o a veces diseño algo que me dice es que el cliente no quiere eso esto es en cuanto a cosas técnicas funcionalidades que yo no sé y entonces si que luego pasa al cliente y el cliente tiene que aprobar es muy importante el tema de la aprobación que sea por escrito, que sea un e-mail y te digan, si, si, me parece bien lo que decía el registro una vez que yo acabo y se aprueba el diseño, es decir, ahí no va a haber más cambios, se hace un pago antes de empezar el desarrollo otro porcentaje y entonces yo preparo ya los materiales para que ella pueda empezar a desarrollar la web aquí empieza la fase os queremos explicar también aquí que tanto ella como yo, estamos en las dos fases, aunque ella diseñe, yo estoy viendo lo que está haciendo y lo que está en continuo comunicación con el cliente siempre tanto ella como yo estamos en las dos fases lo primero es la instalación y configuración de WordPress yo en este caso lo hago en local todo después paso la maquetación lo que me pasa en hora lo paso todo a HTML toda la parte de maquetación nada funcional a HTML ya lo voy pasando todo a WordPress todas las funciones y todo lo demás toda la parte estática y luego voy haciendo todas las funcionalidades la parte funcional, me refiero a ningún plugin simplemente el blog que es dinámico y tal y luego ahí sí entran las funcionalidades extras los custom post types los plugins que hay que hacer cualquier cosa que requiera funcionalidad y ahí esta parte de la que nos encantan las dos que aquí tiemblan un poco nuestra colaboración siempre que es cuando me revisan ahora todo lo que he hecho los enlineados los espacios que nunca veo y esas cosas hasta que ya no me he visto bueno hasta que ya no me he visto bueno de todo no se lo envío al cliente hasta que no esté todo súper comprobado y sin ningún fallo según ella una vez se manda bueno, se le enseña al cliente y nos lo apruebe de más y se hacen todos los cambios del mundo aquí os ponemos como lo guay en el medio imaginado es que hay 100.000 cambios le presentamos la web y está el periodo de ajustes nosotros nos comprometemos a que la web sea exactamente como yo hice el diseño por eso es muy importante lo de aprobación sucede algo que si alguien lo puede explicar porque lo sabe porque yo no lo sé, cuando vemos un diseño luego se exacta exactamente igual en web lo vemos en web y de repente ya no nos convence tanto algo vemos diferente que es como ahora que lo veo en web pero si antes también lo veis en una pantalla llegas el momento de decir ahora lo que te dije que sí ya no me parece tan que sí pero claro con todo el proceso que teníamos antes es como ahora cerramos proyecto y si quieres cambiar cosas se cambia más adelante pero periodo de ajustes es que a lo mejor pues en un dispositivo y una cosa es que le faltan acentos y cosas por el estilo y pequeñas cosas de este tipo pues ya hay fallos o lo que sea pero que no es de cambio de diseño se aprueba la web de que el cliente te vuelve a decir sí, sí, por escrito que te la acuerdo y entonces ya procedemos al pago final perdón era yo pero bueno y salte el pago final y ahí es cuando ya está todo conforme y tal pues nos paga es mucho más que yo expliqué y ahí es cuando se hace entrega la entrega quiere decir que ya migros yo si no nos pagan no migro nada a ningún lado ni a ningún servidor esto es ley profunda y hasta la muerte ahí hago la optimización el VPO y la migración y luego en cada proyecto las dos nos reunimos siempre porque siempre ha habido algún fallo o igual hay hay que mejorar algo o lo que sea, siempre las dos nos reunimos y vemos a ver que hemos fallado para poder mejorar para los siguientes proyectos entonces contamos también que es algo que le da mucha curiosidad a la gente las herramientas que utilizamos, ¿vale? la gestión es súper importante como os decía antes realmente que un proyecto falle casi nunca falla en desarrollo en diseño o lo que sea algo culpable el problema siempre suele venir de la gestión del inicio o de la gestión general entonces nosotros hablamos mucho muchísimo y estos son los problemas que utilizamos para comunicarnos, a sana para poner las tareas, bueno eso lo usa ella y yo lo uso menos no lo usa, hay que decirlo yo te voy a decir, mira algo de la sana, por favor pero bueno, eso está ahí el Better Proposals es el con el que hacemos los presupuestos y los contratos, pues si os da la atención pues no es como eso y luego pues nada, a Meily We'll Drive tenemos todo compartido en la nube bueno yo utilizo por ahora, utilizo Sketch para hacer tanto los Wifers como el diseño visual digo por ahora porque hay otras alternativas que están ahí bastante bien, pero bueno, yo por ahora utilizo Sketch y este es la pregunta que nos hacen siempre, cómo conseguimos o sea, cómo ella hace para saber lo que yo he diseñado qué tiene que poner, bueno, utilizamos esta plataforma puente, por decirlo de alguna manera yo importo mis páginas de Sketch a Zeplin, ella no tiene que hacer nada no tiene que tener ningún programa ni nada y entonces Zeplin coge la configuración de Sketch todas las medidas, todos los elementos todas las fuentes todo lo que hay y se las enseña ella esto mide tanto, las distancias todo y así es como ella consigue hacer mi diseño correctamente yo utilizo Visual Studio Code antes hasta hace no mucho, usaba solo entes tres pero me cambié pues sobre todo por la integración me parece algo bastante útil y de momento compro Visual Studio Code este es la interfaz de Zeplin para que os hagáis una idea, esto es lo que ve ella entra en un enlace yo se lo comparto, entra por navegador también se lo podría descargar, pero no hace falta y entonces por ejemplo aquí os enseño estas líneas rojas te dicen pues esto mide tanto y la distancia de aquí hasta arriba es tanto y aquí el código es una basura, pero bueno hay otra página en la que están todos los colores que yo he usado ordenados todos los estilos de todas las tipografías y todo e incluso se puede descargar las imágenes en los SVG y todo y esta es la manera que lo bueno de esto es que yo no me tengo que instalar nada, vale siempre yo cuando trabajo con otros diseñadores me obligaban a instalarme cosas de diseño que no tengo por qué me obligan a usar Illustrator o a usar un Photoshop o no sé qué leches entonces esto lo bueno que tienes que yo no me tengo que instalar nada lo abro en web y ya está, no tengo que instalar nada y bueno por último esta es nuestra herramienta favorita esa que muchos desean oír pero no, es con lo que usamos los audios nosotros nos comunicamos un montón por audio estuviste en la charla de ayer la comunicación nos parece como a la base del tribu y aquí hay nosotros tenemos un podcast, vosotros no lo sabéis no lo sabe nadie, está aquí el podcast audios de 10 minutos, de 15, de 20 o sea que... ha habido de 20 también así que nada, espero que os haya servido y que os haya despejado un poco la ciudad los audios de tribu si intento si me llevas micrófono es en la parte de desarrollo que usas cuando pasas de html WordPress ¿usas el underscore o un tema depende del proyecto en algunos momentos he usado genesis framework y en algunos uso un discord y en otros de 0 totalmente lo he hecho también de 0 depende del proyecto gracias yo para Nora estabas hablando de sketch para diseñar, pero como te inspiras antes para el diseño, tienes el brief del cliente es claro, esta parte tan esotérica casi nunca... no tiene nada de esotérico es una buena pregunta lo que yo hago cuando hago la fase de briefing yo hago preguntas preguntas muy típicas para saber quiénes son los usuarios la historia de la empresa competidores, todo eso yo funciono a partir de ejemplos yo también tengo un background a hacerlo muchas veces entonces y tú mides, pues yo estoy un abogado de una gran ciudad especializado en inmobiliaria vale hay una serie de colores, una serie de tipografías que es un poco práctica pero es combinar un poco ejemplos de cosas similares o cosas que le puedan servir que cumplan la función es decir, llegar al usuario tipo etcétera y un poco de cultura visual de saber que hay algún que cosas que funcionan para unos sectores no haría una web para niños en color negro, quizás ese tipo de cosas no es tanta inspiración sino ejemplos muchos ejemplos y entonces yo le enseño al cliente el cliente me dice no, eso no es lo que yo me espero o eso sí, o lo otro y así es como lo hago, ejemplos yo ejemplos a tu pe ¿le enseñas ejemplos o haces algo mood board si yo hago mood boards normalmente hago de todo lo específico que sea y entonces le explico lo que yo he visto, es decir dejándole muy claro que no es que yo vaya a copiar eso que he puesto, que eso me ha pasado a veces en plan, no, vas a hacer eso, no intento que sea en una reunión pero si no hago mood board con los ejemplos de todo, puede ser ejemplos de webs enteras o a veces hay secciones concretas que he visto en algún sitio y digo mira pues esto aquí tal entonces hago un documento el formulario de briefing hasta que punto sirve porque claro, yo me encuentro que los clientes se van a venir muy perdidos y que luego a nivel creativo la historia puede cambiar totalmente el proyecto entonces a nivel creativo es muy necesario encontrarte cara a cara tener una buena charla y ver escuchar lo que no te dice esa intuición ese contacto tú a tú es para mí es básico para poder saber si acepto el trabajo que ustedes pueden tener entonces este formulario que utilizáis exactamente cuál es el propósito cuál es el propósito o sea, os sirve para decir si aceptáis o no el proyecto pero no para presupuestarlo no para cerrarlo a nivel de números hay una cosa que nos hemos dicho que es que nosotros tenemos reuniones con los clientes no funciona todo pure mail entonces, bueno contesto yo no si quieres contestar tú no contesto tú ¿qué te gusta hablar? el briefing nos sirve para cosas técnicas hay cosas que sobre todo ella yo no tanto pero hay cosas que tiene que saber pero yo quiero una pasarela de pago quieres eso sí a nivel digamos psicológico vale te sirve para obligar al cliente a sentarse y a él mismo darse cuenta de que quizá no tienen idea de lo que quiere entonces te dice oye mira no he entendido el briefing o no sé responder o yo mismo a veces o sea tenemos las respuestas y decimos no tiene ni idea de lo que está poniendo claro pero yo ya tengo una reunión con él o con ella que ya no es o la cuéntame no porque muchas veces esa persona ni siquiera sabe qué contarte pero el briefing es un ejercicio para él, para ella luego nos reunimos y le decimos oye mira el briefing has dicho esto y entonces ahí lo vas tirando, vas preguntando y vas viendo si hace falta otra reunión o repetir el briefing o añadir preguntas que no hay al briefing y eso no suele pasar, el briefing no cubre todo se hace más reuniones o lo que sea pero funciona así mi parte por ejemplo sí que es más las funcionalidades la necesito saber de principio nosotros en el briefing tenemos condicionales si quieren un servicio o otro les ponemos otra serie de preguntas entonces ahí yo más o menos sé qué funcionalidades van a necesitar ese cliente y de ahí vamos casi de todo y es lo que dicen ahora al final es un esfuerzo que hace el cliente por su proyecto si quieres sí y si no pues nada a nivel diseño has visto que hay un briefing de diseño, es decir ese es el briefing que va orientado mi trabajo solo y esa parte es otra reunión, yo ahí no tengo ningún formulario es una cosa que hago yo con el cliente cara a cara pero esto es para eso, también nos vale mucho para cribar, la idea inicial del briefing era filtrar clientes para no hacer el esfuerzo hacer un presupuesto que ese cliente ya sabe que no va a aceptar pues nos vale para todo esto muchas gracias muchas gracias