{"id":229850,"date":"2022-11-22T14:55:00","date_gmt":"2022-11-22T11:55:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229850"},"modified":"2022-11-09T16:39:43","modified_gmt":"2022-11-09T13:39:43","slug":"iterando-en-el-diseno-de-la-pantalla-de-administracion-de-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/iterando-en-el-diseno-de-la-pantalla-de-administracion-de-wordpress\/","title":{"rendered":"Iterando en el dise\u00f1o de la pantalla de administraci\u00f3n de WordPress"},"content":{"rendered":"\n<p>La idea de un &quot;proceso iterativo&quot; no es nada nuevo en el desarrollo de software. Est\u00e1 presente en varias metodolog\u00edas diferentes y probablemente porque funciona bien, especialmente cuando se obtienen comentarios de los clientes.<\/p>\n<p>Uno de los lugares en los que tambi\u00e9n lo encuentro \u00fatil es cuando construyo interfaces de administraci\u00f3n para complementos de WordPress.<\/p>\n<p>Para ser claros, no soy dise\u00f1ador, as\u00ed que cuando se trata de trabajo de front-end, siempre me remito a la gu\u00eda de estilo y las maquetas que el dise\u00f1ador me proporciona desde el principio del proyecto. (Solo menciono esto porque creo que es una pr\u00e1ctica que cualquiera que no sea dise\u00f1ador deber\u00eda seguir, pero estoy divagando).<\/p>\n<p>Pero cuando se trata de trabajar en pantallas de administraci\u00f3n o pantallas de back-end para WordPress, tiendo a seguir una regla estricta: aseg\u00farese de que se vea lo m\u00e1s natural posible.<\/p>\n<p>Entonces, \u00bfc\u00f3mo tienen que ver el desarrollo iterativo y la interfaz de las pantallas de administraci\u00f3n de WordPress?<\/p>\n<h2>Dise\u00f1o de pantalla de administraci\u00f3n de WordPress<\/h2>\n<p>Este art\u00edculo en particular no habla de las cosas que se esperan para guardar informaci\u00f3n. Es decir, estoy asumiendo todo:<\/p>\n<ul>\n<li>desinfecci\u00f3n,<\/li>\n<li>validaci\u00f3n,<\/li>\n<li>cheques instant\u00e1neos,<\/li>\n<li>verificaciones de permisos,<\/li>\n<\/ul>\n<p>Y los similares son entendidos y manejados.<\/p>\n<p>Para esta publicaci\u00f3n, voy a mantenerlo simple. Digamos que queremos tener:<\/p>\n<ul>\n<li>un par de campos de texto,<\/li>\n<li>un bot\u00f3n de guardar,<\/li>\n<li>un bot\u00f3n de reinicio,<\/li>\n<li>y tal vez algo extra al final.<\/li>\n<\/ul>\n<p>\u00bfC\u00f3mo podr\u00eda desarrollarse esto a trav\u00e9s de un proceso iterativo al dise\u00f1arlo?<\/p>\n<h3>1 Bocet\u00e1ndolo<\/h3>\n<p>Digamos que est\u00e1 trabajando en algo y est\u00e1 planeando c\u00f3mo se ver\u00e1 la pantalla administrativa. Dado lo que ten\u00edamos arriba, tal vez un boceto inicial podr\u00eda verse as\u00ed:<\/p>\n<p>Bastante f\u00e1cil, \u00bfverdad? Representa lo que el proyecto necesita mantener y muestra todo lo que necesitamos para esta pantalla de administraci\u00f3n en particular.<\/p>\n<h3>2 Construy\u00e9ndolo<\/h3>\n<p>Una vez ensamblado, debe verse lo m\u00e1s nativo posible. Dados los estilos que tenemos disponibles en WordPress, es relativamente f\u00e1cil crear esto con las API y el marcado disponibles:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164847-61e76fc6c5f0d.jpg\" data-rel=\"lightbox\" ><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164847-61e76fc6c5f0d.jpg\" alt=\"Iterando en el dise\u00f1o de la pantalla de administraci\u00f3n de WordPress\" ><\/a><\/p>\n<p>\u00bfY qu\u00e9 hace cada campo y bot\u00f3n?<\/p>\n<h3>3 Refin\u00e1ndolo<\/h3>\n<p>Aqu\u00ed es donde entra en juego el perfeccionamiento de la funcionalidad. Por ejemplo:<\/p>\n<ul>\n<li>No creo que el bot\u00f3n <strong>Guardar<\/strong> deba habilitarse hasta que se completen los campos obligatorios,<\/li>\n<li>Creo que el bot\u00f3n <strong>Restablecer<\/strong> deber\u00eda borrar lo que est\u00e1 presente,<\/li>\n<li>Deber\u00eda haber un cierto grado de mensajes de error que representen lo que debemos hacer cuando algo falla, cuando algo puede no estar bien o algo est\u00e1 completamente mal.<\/li>\n<\/ul>\n<p>Obviamente, es mucho m\u00e1s f\u00e1cil hablar de esto cuando no se refiere a un proyecto espec\u00edfico, pero tal vez algunas de las ideas sean aplicables a lo que sea que est\u00e9s haciendo.<\/p>\n<h2>\u00bfMejoras asincr\u00f3nicas?<\/h2>\n<p>Una de las cosas a las que nos hemos acostumbrado con dispositivos como nuestros tel\u00e9fonos y ciertas partes de nuestros sistemas operativos es que cuando activamos un interruptor o hacemos un peque\u00f1o cambio, los datos se guardan.<\/p>\n<p>Es decir, no se requiere ninguna acci\u00f3n de confirmaci\u00f3n (aparte de algo destructivo como eliminar un archivo, por supuesto). Los datos simplemente se guardan y la opci\u00f3n funciona.<\/p>\n<p>Sin embargo, todav\u00eda vemos muchos botones <strong>Guardar<\/strong> en WordPress, \u00bfno es as\u00ed? \u00bfQu\u00e9 hay de guardar las entradas a trav\u00e9s de Ajax u otro m\u00e9todo asincr\u00f3nico? Esto es algo que a\u00fan tengo que implementar, pero ciertamente lo he considerado.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cuando trabajamos en el dise\u00f1o de la pantalla de administraci\u00f3n de WordPress, hay un proceso iterativo que podemos seguir con el prop\u00f3sito de mejorar la calidad.<\/p>\n","protected":false},"author":1,"featured_media":223984,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[840,861],"tags":[1172],"class_list":["post-229850","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriales","category-wordpress-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/229850","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=229850"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/229850\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/223984"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=229850"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=229850"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=229850"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}