 Hola a todos los miembros de la Comunidad Workham, queremos agradecerles por invitarnos a dar esta charla y pues es un placer completo para ahora Lila y yo y bueno vamos a comenzar presentando el tema que dice que necesita saber el programador-enseñador para llevar al éxito un sitio web primero que nada vamos a presentar un poco nuestras trayectorias de quiénes somos rápidamente y luego por qué queremos introducirle esta charla. Soy ahora Lila, soy desarrollador de web de Manahuá Nicaragua, colaboró con la Comunidad Workham Nicaragua y actualmente estoy trabajando en SNIG Multimedia como desarrollador web. Bien, mi nombre es Juan Tijerino, mis amigos me dicen Juancho, soy diseñador gráfico senior y también soy UX designer, fundé el estudio en HOMO donde realizó consultorías personales de freelance, trabajo también como voluntario de WordPress Nicaragua aquí de Manahuá y también soy docente por la carrera de diseñor gráfico de la universidad del value. Entonces vamos a abrir esto de por qué esta presentación creemos que necesaria porque muchas veces cuando hablamos de lo que necesitamos para desarrollar un sitio web entre un desarrollador y un diseñador que creo que cada día es mucho más cotidiano esta combinación y de acuerdo pues a nuestra experiencia, nuestra vivencia, el cómo nosotros a lo mejor hemos encontrado algunas claves importantes para ir desarrollando durante todo este proceso. Vamos a mostrarles algunas pautas de cómo no tener tantos tropiezos en las fases del desarrollo del sitio, donde están involucrado el cliente, el diseñador y el desarrollador y donde los tres tienen que tener una constante comunicación para que el sitio vaya fluyendo el desarrollo bien en una misma línea, estén alineados todos. Vamos a aclarar que esto no pretende ser como una piedra en cuanto a paso a paso sino que tratamos que consideren o tomen en cuenta durante su manera de trabajar estos tips que a nosotros nos han dado bastante al embargo del trabajo, nosotros hemos trabajado juntos en varios proyectos y como que ya hemos desarrollado cierta complicidad al trabajar y eso es lo que queremos compartir con esta charla. Entonces como todo proyecto tiene un inicio y comenzamos con el siguiente, siempre todo proyecto tiene que comenzar con las reuniones previas de lo que serían los insumos del proyecto, sobre todo saber digamos así conocer al cliente, conocer su empresa, si es necesario tomar en cuenta añadir un brief para los cuestionarios que se puedan hacer es mejor. Es importante de parte del cliente obtener los requerimientos del proyecto así como sus objetivos principales. También tenemos estar involucrados los tres partes para sacar los objetivos del sitio realmente cuál va a ser la función que este sitio va a cumplir y lograr llevarlo a cabo porque podemos llegar a tener un sitio muy lindo, bien desarrollado y todo, pero puede ser que no sea lo que vaya a sufrir la necesidad del cliente o de negocios que él pretende revisar. Exactamente, las pautas siempre nos van a ayudar a saber cuáles van a hacer los alcances, así también como la parte de los insumos, los gastos que se van a realizar a lo largo del proyecto. Entonces nosotros vamos a dividir estos procesos en tres responsabilidades, uno cliente, dos diseñador y por último el desarrollador. Comenzamos con el cliente, es decir qué es lo que le correspondería al cliente dentro de lo que sería este proceso porque no podemos llevar a cabo el proyecto web sin el cliente, o sea entonces hay que involucrarlo también dentro del proceso de trabajo. Aquí lo más importante para el cliente es que le corresponde facilitar los insumos debido del proyecto ya sea como la información, la información es vital porque de acuerdo a eso nosotros podemos estructurar lo que sería la arquitectura de todo el diseño que va a tener el proyecto y sobre todo nos permite no improvisar mucho porque a veces estamos conscientes de que por la demanda del proyecto es probable que algunos insumos se go bien o bien se limiten, es decir a mí me ha tocado trabajar proyectos donde solo me dicen mirad es una ferretería y entonces ya como que solo vas con eso a diseñar todo el producto y claro a la hora de que el desarrollador llega a sus manos el diseño y le pasa la información correcta, supongo que es un gran problema. Tocar el diseño ya no está coplado con el contenido y los recursos que el cliente brindó hasta el momento en el que ya está en el proceso de desarrollo y entonces toca regresar a diseño para que modifique el bloque donde va a agregar mi contenido nuevo. Así es y así un sinumero de problemas que pueden surgir por la falta de información. También el tema de la identidad visual corporativa es algo que es algo que el cliente debería de tener, sabemos que no siempre pero por lo menos partió de lo que sería el logo en su versión editable y a lo mejor algunas claves necesarias como las líneas más básicas de la marca que pueden ser los códigos de colores principales y tienen una estructura en cuanto a nivel gráfico, sin embargo bueno estos insumos no nos corresponden digamos decir, una responsabilidad dentro del proyecto considero yo el tener que inventarlo o sea a veces cuando hace falta toca diseñarnos una propuesta de dineráfica sin embargo si hablamos de lo más efectivo sería de que en base al manual visual corporativo nosotros partimos para poder generar aquellas imágenes, aquella gráfico que vayan de la mano con la identidad de la marca. Entonces finalmente recursos, cuando hablamos de recursos nos referimos a lo que serían la fotografía, algunos elementos como video, como recursos que nos pueda servir para alimentar más el sitio a nivel gráfico, a nivel funcional. Bien, procedemos a lo que me correspondería a mí como diseñador que es lo que yo aporto al proyecto y aquí bueno he enumerado algunas cosas que me parecen esenciales quizás no todas no todas al detalle pero sí considerando dentro de lo que sería en un proceso de UX UI lo más correcto que detener este proyecto si tenemos a un diseñador debe ser el diseñador crearía lo que serían wireframes o esquemas de estructura preliminares de lo que va a ser el sitio. Esto a mí por ejemplo me permite establecer cómo va a ser construido todo el sistema de la página de la navegación la estructura las secciones que va a tener etcétera esta visión preliminar nos permite ahorrar tiempo para poder determinar si la desde ya o sea no determina la navegación la estructura las interacciones que podría llegar a tener es decir este wireframe aunque sea estructural es funcional para que te desunea de todo lo que va a contener el sitio generalmente en esta etapa hago bastante ensayo puede ser ahí ve de cómo se puede ver una digamos así para simular una sección si estamos experimentando en una funcionalidad entonces se puede hacer ahí como un preliminar igual esto siempre pasaría a consulta con el diseñador a mí siempre me gusta mostrar estos esqueletos porque ya el desde ahí al desarrollador mira cómo va a ser reestructura el sitio si es conveniente en es conveniente y puede darme cierta retroalimentación una vez teniendo el preliminar logrado entonces podemos proceder a un prototipo ya en alta calidad donde podemos ver que el diseño ya estamos hablando de el acabado o sea estamos hablando de la parte del uso de los colores los elementos gráficos que van a darle vida a lo que sería la página ahí es importante tomar en cuenta ir como construyendo una misma línea gráfica consistente en todo el proyecto los prototipos van a depender de los objetivos también del de lo que va a ser el producto entonces es decir hay sitio web donde la parte de trabajo principal se va a desarrollar en lo que sería en el panel de escritorio entonces es algo que se toma en cuenta sin embargo se estamos hablando de móvil first entonces en ese caso el diseño va a partir el prototipo de la versión en el teléfono y así sucesivamente pero aquí lo importante de la alta calidad es ya definir cómo se va a ver el sitio a nivel visual lo que sería el fron finalmente lo considero que para poder darle ahora la parte que le corresponde entre desarrollador y diseño están los lineamientos de la guía de estilo lo que va a contener el sitio web en este caso hay que ser bastante ordenado bastante organizado y es importante que es cierto que está construido a nivel de prototipo todo lo que serían las pantallas de navegación sin embargo es necesario que exista una guía de estilo porque probablemente van a haber detalles del sitio web que el desarrollador le va a tocar realizar y entonces para que pueda continuar esto de manera cohesionada teniendo la guía de estilo él puede procurar que vaya de la mano con el diseño planteado entonces la guía de estilo bueno que es lo que tiene es importante establecer lo que serían las jerarquías tipográficas las paletas de color y todos sus códigos hexadecimales los iconos tanto su variante en en overstay o ya sea en estático referidamente y lo que serían como la variedad de botones que van a ver en el sitio web así como su estado activo y pasivo ya podrán haber algunos detalles extras como estructuras de formulario colores de fondo y cosas a tomar en cuenta a la hora del desarrollo web y finalmente y lo menos importante estaríamos hablando de la navegación e interacciones hoy en día ya hay prototipo hay tecnologías que nos permiten crear estas simulaciones de cómo se va a ver ya la navegación en acción y eso ya nos permite como decía al principio no improvisar en el proyecto dentro de lo que sería la marcha del producto y así digamos así que la navegación teniendo un preliminar de navegación a que podemos hacer el ensayo las pruebas de cómo debería de verse no cómo va a pasar de esta página esta página de esta interacción es de interacción y entonces ya de hecho dentro del diseño yuex está también a los especialistas que se encargan de la parte de animación en las transiciones y le han vida a todo lo que es aspecto pero por lo menos a que sea a nivel básico si considero que debería de haber prototipo de acción al menos elemental en cuanto lo que es la navegación y cierto estado de interacción que puede ser que tengan un cambio digamos así más complejo dentro del sitio que el programador lo pueda ver lo puede entender para que esa manera a la hora de desarrollarlo bueno que de acuerdo a la expectativa no y bueno yo creo que eso sería lo que yo considero como las partes que nos corresponden a lo enseñaban ahora lo dejo con ahora lila que le va a hablar acerca de lo que le corresponde al desarrollador lo primero es un desarrollo basado en el diseño usted quiere decir de que vas a maquetar el sitio conforme al diseño que te brinde el diseñador que los colores sean que el te pasó que las imágenes los bloques las funcionalidades estén de acuerdo a lo planteado en el diseño siempre respetando todos los márgenes las dimensiones y todo en desarrollo enfocado en la calidad es tener buenas prácticas en la programación de comentar incluso en este momento puedes estar haciendo una función y luego olvidar que qué es lo que hace esta función o porque este código acá y eso te va a ayudar a tener comentado y también para que tus compañeros en un futuro te ayuden a modificar el código entonces ya con un comentario puedes ayudarte a saber. Optimización de código es muy importante hacer testing no esperar de que el sitio web pase a cuban sino que vos ya estés revisando de que sí que el botón te lleva a un enlace que no esté roto y que de todas las funciones cumplan y funcione en indos diferentes dispositivos incluso. Buen performance es optimizar el sitio web para que tenga una buena puntuación y que todo todo usuario que entra el sitio web y se tarda mucho en cargar ellos usualmente se van no esperan a que cargue entonces uno tiene que tener crear un sitio web que tenga una buena puntuación que se da rápido cargar no subir imágenes pesadas como el que te puede pasar un fotógrafo de 2GB una imagen no porque ni siquiera lo vas a necesitar de que sea en grandes dimensiones y resoluciones sino que dejar las imágenes a las dimensiones que te pase el diseñador optimizándolas creándoles el ancho y el alto de la imagen y estos son los plugin que yo recomiendo dole proctimize cuando yo hice ese sitio web es puntuada esta vez con 88 85 y con dole proctimize logre subirle la puntuación porque logre mejorar algunos aspectos que hacían falta y tiny png es una buena herramienta para minimizar las imágenes y smush también es otra buena herramienta para optimizar las imágenes las recomiendo ambas cualquiera de las dos pueden utilizar para ser un sitio web hoy en día hay más personas entrando a los sitios pues desde el celular al tabler que desde una computadora de escritorio es por eso de que hay que darle prioridad al desarrollo web esto quiere decir de que vas a iniciar con esto a ver qué funcione vienen estos dispositivos que todos te ha alineado que no rompa no se rompa y luego pues pasar a la parte de escritorio el seo es muy importante para lograrse posicionar y que las personas logren encontrar tu sitio web en en la búsqueda de los motores esto quiere decir que puedes necesitas que el sitio web esté entre los primeros y como y esto lo puedes lograr con yo haceos que es un plugin muy buenísimo que te ayude te lleva de la manito y te va mostrando cuál es el camino que tenés que llevar para eso que tenés que hacer para que tu sitio esté bien posicionado y los metas también son súper importante y es algo que trae yo es que te ayudan a que los robots sepan de que trata tu sitio y tal manera que cuando alguien hace una búsqueda logre encontrar esto de google search console es súper importante porque puedes saber dónde estás fallando te mantas notificaciones e y esta partidiana no funciona está roto y puedes mejorarlo y tener un mejor puntaje en esta parte incluso poder vincular yoas con google search console y poder manejarlo desde un solo lugar asesibilidad web todas las personas sin importar las capacidades que tengan deben de tener de poder acceder a tu sitio web y no solamente los que tengan discapacidad sino también las personas de la tercera edad o que no puedan leer una página que tenga una letra súper chiquita tamaño hormiga no tenés que hacerlo asesible para todos que tenga buen contraste los colores que se puede leer que las imágenes tengan un texto alternativo para que si no la pueden ver imagen pueden saber de qué trata es vídeo contra inscripción y seguir estos lineamientos te va a ayudar a que tu mercado sea mayor porque no solamente vas a poder hacer personas pueden hacer todos tipo de personas con diferentes discapacidades o edades en recomendación de hostin ser temes de recomendarlo de acuerdo a la finalidad del sitio no por ejemplo si es un sitio pequeño que solo va a tener el home la página de contacto de acerca de los servicios esta puede ser un hosting pequeño y que va a tener menos recursos que lo que va a solicitar un sitio grande como por ejemplo una revista que vas a necesitar tal vez una base de datos externa cdn realizar algunas configuraciones de la terminal y otros recursos más que no vas a tener con no vas a necesitar con una página pequeña entonces dependiendo del sitio web el enfoque que este va a tener y a qué público va a llegar y su finalidad eso depende cuál es la recomendación de bajar de hostin en seguridad tenemos que tener cuidado mucho con estos puntos porque los desarrolladores alguna vez nos evocamos como si voy a hacer un sitio web que es que tenga el diseño que me quedan de pasar y lo hago y ya después me olvido de la seguridad y crean que el cliente si el sitio web en algún momento deja de funcionar va a ser a vos que te va a contactar y te va a decir y si yo no está funcionando qué pasó acá y entonces uno tiene que tener también darle la seguridad al sitio de ver de que no tenga una contraseña fácil de cambiar los prefijos de la base de datos de que la del doble peano no ocultarlo de que los intentos para acceder al sitio no sean tantos y todo esto incluso las carpetas los permisos de todo esto lo pueden lograr con varias buenas prácticas de seguridad y ayudarse también de estos plugin como hay ten security y o lingüan security que es mi favorito que son dos herramientas muy buenas que te ayudan a facilitar este trabajo en la sinergia como le hemos estado mencionando son los tres personajes el desarrollo el diseño de cliente y estos tres siempre tienen que tener comunicación sin la comunicación no hay el sitio nunca va a estar listo siempre van a estar retrocediendo a paso van a estar reaciendo cosas y no tiene que haber siempre comunicación para que todos estemos alineados en el lugar así algo que solo hay disculparme pero sí es importante la opinión dentro de las partes del proyecto así que cada uno puede opinar desde su expertise ya sea del desarrollo verdad con el diseño o sea no tener miedo de poder realmente crear ese puente entre el proyecto claro no necesariamente me refiero a que en que en todo momento uno es decir lila pero no tengo años de conocerla entonces tenemos ya cierta confianza y complicidad para trabajar pero es decir que sea otro desarrollador independientemente poder mantener como esa retroalimentación constante entre el trabajo de uno y el otro porque eso va a ser como decía el principio más enriquecedor resultado así bueno el cliente tendrá su como decir su filtro de cómo él entiende las cosas y de cómo él transmite y obviamente pues va a ser de cierta manera una retroalimentación un poco diferente de acuerdo de los focos a quien él se dirige que vas a añadir en cuba es muy importante como desarrollador hacen como desarrollador uno tiene que tener en cuenta de que tenéis que ponerle bastante atención a que la cosa funcione en la que todo vaya bien y pues si el cliente siempre te van y es útil que el cliente te encuentre algún error porque es mejor encontrar un error en la fase en la que está desarrollando que en un sitio en vivo que ya esté para todos los usuarios así y aparte no necesariamente tomar que un señalamiento de un cambio o un error sea siempre desde un punto nativo no sino que el proyecto siempre debe de iterar a mejorar o se siempre tiene que ir a mejor por eso va a ser normal que en todo proyecto esto se tomé siempre en cuenta o sea no siempre bueno por lo menos yo no no he tenido el milagro de que un cliente acepte toda la primera que nos sucede no pasa así que uno tiene que ya ir aprendiendo no a tomar todo esto pero yo lo invito a hacerlo desde un punto de vista más positivo en cuanto a que estamos mejorando el diseño y también es útil tener un feedback de diseñador para el desarrollador de que tal vez yo interpreté mal este en una función que no era así que en la mirada distinta entonces es cool tener esa retroalimentación para tener un buen sitio así bueno para finalizar solamente queríamos mostrar rápido un caso el caso se llama bufe del cobar fue un proyecto que trabajamos el año pasado y de hecho nos sirvió como un punto de referencia para esta charla porque este proyecto digamos así de manera experimental para decirlo pudimos poner en práctica todo esto que decimos de hecho desde la creación del contenido de este proyecto que por suerte fue algo que se insistió mucho que se trabajara desde el inicio con el cliente y obviamente ya cuando pasaba al proceso de diseño lo que eran los bosquejos preliminares en lo que era que era lo que iba a contener entonces ya esto nos ayudó a ubicarnos mejor para hacer el sitio a medida y entonces bien solo mostrarles cómo se ve el resultado de lo que al final cuando aquí ya estamos viendo el resultado final de diseño prácticamente y solo aclarar el tema de la cohesión en cuanto a línea gráfica manejo de colores estructura que puedan ser bastante fáciles para los que serían los usuarios de este sitio y bueno con este partimo con este prototipo finalmente aprobado quizá habían algunos detalles que no estaban finiquitados en información que sabíamos que podían cambiarse pero procuramos que los cambios no fueran digamos así muy abrupto así que vamos a mostrar rápidamente cómo quedó el resultado de la página que desarrolló Lila de este diseño básicamente aquí podemos ver lo que es la misma estructura de home que yo había planteado claro obviamente siempre a nivel de desarrollo pues si hay sus cambios pero decir no son digamos así ni grave ni que distorsionen lo que se planteó desde un comienzo pero si podemos ver que si se aplicó lo que sería la toda la idea original desde el comienzo que se pudiera mostrar así como se planteó diseño se planteaba también el desarrollo y bueno y listo me creo que muchas gracias muchas gracias