{"id":230197,"date":"2022-11-22T15:36:00","date_gmt":"2022-11-22T12:36:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230197"},"modified":"2022-11-09T20:33:23","modified_gmt":"2022-11-09T17:33:23","slug":"iterando-no-design-da-tela-de-administracao-do-wordpress","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/iterando-no-design-da-tela-de-administracao-do-wordpress\/","title":{"rendered":"Iterando no design da tela de administra\u00e7\u00e3o do WordPress"},"content":{"rendered":"\n<p>A ideia de um &#8220;processo iterativo&quot; n\u00e3o \u00e9 novidade no desenvolvimento de software. Est\u00e1 presente em v\u00e1rias metodologias diferentes e provavelmente porque funciona bem principalmente quando se obt\u00e9m feedback do cliente.<\/p>\n<p>Um dos lugares que tamb\u00e9m acho \u00fatil \u00e9 ao construir interfaces de administra\u00e7\u00e3o para plugins do WordPress.<\/p>\n<p>Para ser claro, n\u00e3o sou designer, ent\u00e3o quando se trata de trabalho de front-end, sempre me refiro ao guia de estilo e aos modelos que o designer me fornece desde o in\u00edcio do projeto. (S\u00f3 menciono isso porque acho que \u00e9 uma pr\u00e1tica que qualquer pessoa que n\u00e3o seja designer deve seguir, mas discordo).<\/p>\n<p>Mas quando se trata de trabalhar em telas de administra\u00e7\u00e3o ou telas de back-end para WordPress, costumo seguir uma regra estrita: certifique-se de que pare\u00e7a o mais natural poss\u00edvel.<\/p>\n<p>Como, ent\u00e3o, o desenvolvimento iterativo e a interface das telas de administra\u00e7\u00e3o do WordPress t\u00eam algo a ver um com o outro?<\/p>\n<h2>Design da tela de administra\u00e7\u00e3o do WordPress<\/h2>\n<p>Este artigo em particular deixa de falar sobre coisas que s\u00e3o esperadas para salvar informa\u00e7\u00f5es. Ou seja, estou assumindo tudo:<\/p>\n<ul>\n<li>higieniza\u00e7\u00e3o,<\/li>\n<li>valida\u00e7\u00e3o,<\/li>\n<li>cheques nonce,<\/li>\n<li>verifica\u00e7\u00f5es de permiss\u00e3o,<\/li>\n<\/ul>\n<p>E semelhantes s\u00e3o compreendidos e tratados.<\/p>\n<p>Para este post, vou mant\u00ea-lo simples. Digamos que queremos ter:<\/p>\n<ul>\n<li>alguns campos de texto,<\/li>\n<li>um bot\u00e3o salvar,<\/li>\n<li>um bot\u00e3o de reset,<\/li>\n<li>e talvez algo extra no final.<\/li>\n<\/ul>\n<p>Como isso pode acontecer por meio de um processo iterativo ao projet\u00e1-lo?<\/p>\n<h3>1 Esbo\u00e7ando<\/h3>\n<p>Digamos que voc\u00ea esteja trabalhando em algo e planejando como ser\u00e1 a tela administrativa. Dado o que tivemos acima, talvez um esbo\u00e7o inicial possa ser assim:<\/p>\n<p>F\u00e1cil o suficiente, certo? Ele representa o que o projeto precisa manter e exibe tudo o que precisamos para essa tela de administra\u00e7\u00e3o espec\u00edfica.<\/p>\n<h3>2 Construindo<\/h3>\n<p>Uma vez montado, deve parecer o mais nativo poss\u00edvel. Dados os estilos que temos dispon\u00edveis no WordPress, \u00e9 relativamente f\u00e1cil construir isso com as APIs e marca\u00e7\u00f5es dispon\u00edveis:<\/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 no design da tela de administra\u00e7\u00e3o do WordPress\" ><\/a><\/p>\n<p>E o que cada campo e bot\u00e3o fazem?<\/p>\n<h3>3 Refinando<\/h3>\n<p>\u00c9 aqui que entra o refinamento da funcionalidade. Por exemplo:<\/p>\n<ul>\n<li>N\u00e3o acho que o bot\u00e3o <strong>Salvar<\/strong> deva ser ativado at\u00e9 que os campos obrigat\u00f3rios sejam preenchidos,<\/li>\n<li>Acho que o bot\u00e3o <strong>Redefinir<\/strong> deve limpar o que est\u00e1 presente,<\/li>\n<li>Deve haver um certo grau de mensagens de erro, todas representando o que precisamos fazer quando algo falha, quando algo pode n\u00e3o estar certo ou algo est\u00e1 completamente errado.<\/li>\n<\/ul>\n<p>Obviamente, \u00e9 muito mais f\u00e1cil falar sobre isso quando n\u00e3o est\u00e1 se referindo a um projeto espec\u00edfico, mas talvez algumas das ideias sejam aplic\u00e1veis \u200b\u200bem qualquer coisa que voc\u00ea esteja fazendo.<\/p>\n<h2>Melhorias ass\u00edncronas?<\/h2>\n<p>Uma das coisas com as quais nos acostumamos com dispositivos como nossos telefones e certas partes de nossos sistemas operacionais \u00e9 que, quando alternamos um bot\u00e3o ou fazemos uma pequena altera\u00e7\u00e3o, os dados s\u00e3o salvos.<\/p>\n<p>Ou seja, nenhuma a\u00e7\u00e3o de confirma\u00e7\u00e3o (al\u00e9m de algo destrutivo como excluir um arquivo, \u00e9 claro) \u00e9 necess\u00e1ria. Os dados s\u00e3o simplesmente salvos e a op\u00e7\u00e3o funciona.<\/p>\n<p>No entanto, ainda vemos muitos bot\u00f5es <strong>Salvar<\/strong> no WordPress, n\u00e3o \u00e9? Que tal salvar entradas via Ajax ou outro m\u00e9todo ass\u00edncrono? Isso \u00e9 algo que eu ainda tenho que implementar, mas eu certamente considerei isso.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ao trabalhar no design da tela de administra\u00e7\u00e3o do WordPress, h\u00e1 um processo iterativo que podemos seguir para fins de qualidade.<\/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":[846,867],"tags":[1170],"class_list":["post-230197","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriais","category-wordpress-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/230197","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=230197"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/230197\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/223984"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=230197"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=230197"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=230197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}