{"id":514,"date":"2023-08-24T11:05:17","date_gmt":"2023-08-24T14:05:17","guid":{"rendered":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/?p=514"},"modified":"2023-08-24T11:05:18","modified_gmt":"2023-08-24T14:05:18","slug":"disenar-pensando-en-el-desarrollador-como-un-usuario","status":"publish","type":"post","link":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/disenar-pensando-en-el-desarrollador-como-un-usuario\/","title":{"rendered":"Dise\u00f1ar pensando en el desarrollador como un usuario."},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Equipo de dise\u00f1o versus equipo de desarrollo. Son muchas las instancias de conflicto y desencuentro entre estos dos grupos. En la diaria, en el conflicto cotidiano de trabajo, se genera una interacci\u00f3n constante no siempre prospera. Pero encontrar un punto de conexi\u00f3n entre ambos, eso s\u00ed es un desaf\u00edo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Al pensar en los entornos de trabajo de los equipos de desarrollo y en el \u00e1mbito de la programaci\u00f3n surge el nombre de Visual Studio Code, o m\u00e1s conocido como VS Code. Un software de edici\u00f3n de c\u00f3digo fuente lanzado por Microsoft en 2015, luego de haber presentado m\u00e1s de 25 a\u00f1os antes la primera versi\u00f3n de Microsoft Visual Studio. Esta nueva plataforma propone una navegaci\u00f3n simplificada, con algunas herramientas limitadas, pero sin dejar de ser completamente funcional para quienes requieran de este tipo de editores. Al breve tiempo se convirti\u00f3 en uno de los programas m\u00e1s utilizados por desarrolladores, y ubic\u00e1ndose tambi\u00e9n entre uno de los elegidos para los espacios educativos, por su simpleza y facilidad de uso.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Otro de los aspectos que lo vuelve uno de los m\u00e1s elegidos es el hecho de ser un software de c\u00f3digo abierto. Es decir, que permite su personalizaci\u00f3n y el agregado de funcionalidades a partir de la modificaci\u00f3n de su c\u00f3digo. Aunque esta funcionalidad es propia de cada desarrollador, y simplemente editar\u00e1 las funcionalidades del software en su dispositivo, se ofrece la posibilidad de compartir esas alteraciones para que el resto de personas usuarias de la comunidad puedan apropi\u00e1rselas. Sumado a una gran variedad de herramientas dentro del programa para personalizar las funcionalidades y la interfaz del programa: disposici\u00f3n de los elementos, integraciones, tipograf\u00edas utilizadas, tama\u00f1os, lenguajes de programaci\u00f3n, etc.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Analizando esto desde una mirada de dise\u00f1o, se vuelve un desaf\u00edo el pensar y dise\u00f1ar una plataforma que permita tal grado de personalizaci\u00f3n y alteraci\u00f3n, buscando una consistencia del sistema identitario y funcional, y sin dejar de lado que toda esta personalizaci\u00f3n no afecte negativamente a la navegaci\u00f3n y a la experiencia de personas usuarias.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Investigando sobre la historia de Visual Studio Code, e indagando sobre el dise\u00f1o del programa, haciendo hincapi\u00e9 sobre la tipograf\u00eda nos encontramos con familias tipogr\u00e1ficas que cumplen un rol crucial en una interfaz como la de VSCode que se compone en su gran mayor\u00eda por texto. Por un lado, con el uso de Segoe UI una tipograf\u00eda sans serif de clasificaci\u00f3n human\u00edstica, con trazo constante y cortes rectos en sus extremos. Ideada por Monotype, y registrada posteriormente por Microsoft, es la tipograf\u00eda elegida para todo el sistema marcario de Microsoft (incluyendo su logotipo). Generando una fuerte consistencia con el resto de programas de la empresa. Y por otro lado Cascadia Code, una familia tipogr\u00e1fica serif monoespaciada de trazo constante, pensada espec\u00edficamente para el uso en c\u00f3digo, con ligaduras de programaci\u00f3n. Es decir, desde su inicio, la funcionalidad de esta tipograf\u00eda estuvo orientada a la lectura de largos c\u00f3digos de texto, buscando siempre simplificar el entendimiento de estos textos de c\u00f3digo fuente. Una particularidad no menor, es que al igual que VS Code, Cascadia es una tipograf\u00eda de c\u00f3digo abierto, es decir que de forma similar a lo que sucede con el software, permite su personalizaci\u00f3n y edici\u00f3n, con desaf\u00edos parecidos a los que se le presentan al programa.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"726\" height=\"670\" src=\"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-content\/uploads\/2023\/08\/Ligatures.png\" alt=\"\" class=\"wp-image-516\" srcset=\"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-content\/uploads\/2023\/08\/Ligatures.png 726w, https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-content\/uploads\/2023\/08\/Ligatures-300x277.png 300w\" sizes=\"auto, (max-width: 726px) 100vw, 726px\" \/><figcaption class=\"wp-element-caption\">Caracteres y ligaduras propios de la familia tipogr\u00e1fica Cascadia Code.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Dos familias con distintos usos dentro de la interfaz, permitiendo entender qu\u00e9 parte de lo que se ve est\u00e1 dedicado al c\u00f3digo fuente, su trabajo y edici\u00f3n, delimitada por la Cascadia Code. Y la porci\u00f3n de la pantalla, que bajo el uso de la Segoe UI, ofrece las diversas funcionalidades propias de Visual Studio Code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Resulta interesante pensar en c\u00f3mo dise\u00f1adores y dise\u00f1adoras pensaron e idearon interfaces y tipograf\u00edas, para que luego desarrolladores y desarrolladoras puedan agilizar y simplificar su tarea diaria. Desde el dise\u00f1o de pantallas personalizables en su totalidad, la creaci\u00f3n de tipograf\u00edas que agilicen la lectura de c\u00f3digo, la codificaci\u00f3n de color de estos c\u00f3digos (buscando diferenciar entre las diferentes funcionalidades de cada parte del c\u00f3digo), hasta la aparici\u00f3n de ciertos elementos no-tipogr\u00e1ficos o miscelaneas como cuadrados de color o \u00edconos que tambi\u00e9n sirvan de ayuda para la lectura.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"141\" src=\"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-content\/uploads\/2023\/08\/Screen.png\" alt=\"\" class=\"wp-image-517\" srcset=\"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-content\/uploads\/2023\/08\/Screen.png 768w, https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-content\/uploads\/2023\/08\/Screen-300x55.png 300w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><figcaption class=\"wp-element-caption\">Porci\u00f3n de la pantalla de Visual Studio Code que permite evidenciar la combinaci\u00f3n de las distintas tipograf\u00edas y elementos no-tipogr\u00e1ficos.<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">El anterior enfrentamiento resulta \u00ednfimo, comparado con todo el trabajo de dise\u00f1adores y dise\u00f1adoras pensando en la funci\u00f3n final de sus interfaces y tipograf\u00edas, y conociendo a fondo a las futuras personas usuarias. Ese es el real desaf\u00edo del dise\u00f1o de interfaces.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Fuentes:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.yurishwedoff.com\/the-history-of-segoe-ui\/\">https:\/\/www.yurishwedoff.com\/the-history-of-segoe-ui\/<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/learn.microsoft.com\/es-es\/typography\/font-list\/segoe-ui\">https:\/\/learn.microsoft.com\/es-es\/typography\/font-list\/segoe-ui<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/learn.microsoft.com\/es-es\/shows\/one-dev-minute\/why-did-you-make-cascadia-code--one-dev-question\">https:\/\/learn.microsoft.com\/es-es\/shows\/one-dev-minute\/why-did-you-make-cascadia-code&#8211;one-dev-question<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.softzone.es\/noticias\/open-source\/cascadia-code-fuente-microsoft-windows\/\">https:\/\/www.softzone.es\/noticias\/open-source\/cascadia-code-fuente-microsoft-windows\/<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/microsoft\/cascadia-code\/releases\">https:\/\/github.com\/microsoft\/cascadia-code\/releases<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/microsoft\/cascadia-code\/releases\">https:\/\/github.com\/microsoft\/cascadia-code\/releases<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/caracol.com.co\/radio\/2015\/12\/30\/tecnologia\/1451513646_639871.html\">https:\/\/caracol.com.co\/radio\/2015\/12\/30\/tecnologia\/1451513646_639871.html<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/es.wikipedia.org\/wiki\/Visual_Studio_Code\">https:\/\/es.wikipedia.org\/wiki\/Visual_Studio_Code<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/es.wikipedia.org\/wiki\/Microsoft_Visual_Studio\">https:\/\/es.wikipedia.org\/wiki\/Microsoft_Visual_Studio<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.arimetrics.com\/glosario-digital\/visual-studio\">https:\/\/www.arimetrics.com\/glosario-digital\/visual-studio<\/a>&nbsp;<a href=\"https:\/\/es.wikipedia.org\/wiki\/Build_(conferencia_desarrolladores)\">https:\/\/es.wikipedia.org\/wiki\/Build_(conferencia_desarrolladores)<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Equipo de dise\u00f1o versus equipo de desarrollo. Son muchas las instancias de conflicto y desencuentro entre estos dos grupos. En la diaria, en el conflicto cotidiano de trabajo, se genera una interacci\u00f3n constante no siempre prospera. Pero encontrar un punto de conexi\u00f3n entre ambos, eso s\u00ed es un desaf\u00edo. Al pensar en los entornos de [&hellip;]<\/p>\n","protected":false},"author":25,"featured_media":520,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[24,27,21,25,26],"comision":[13],"eje":[3],"class_list":["post-514","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sin-categoria","tag-cascadia-code","tag-ligaduras","tag-programacion","tag-segoe-ui","tag-ux-ui","comision-pato-majo","eje-experiencia-lectura-uso"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/posts\/514","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/comments?post=514"}],"version-history":[{"count":3,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/posts\/514\/revisions"}],"predecessor-version":[{"id":523,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/posts\/514\/revisions\/523"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/media\/520"}],"wp:attachment":[{"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/media?parent=514"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/categories?post=514"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/tags?post=514"},{"taxonomy":"comision","embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/comision?post=514"},{"taxonomy":"eje","embeddable":true,"href":"https:\/\/www.catedracosgaya.com.ar\/tipoblog\/2023\/wp-json\/wp\/v2\/eje?post=514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}