{"id":229673,"date":"2022-11-22T14:56:00","date_gmt":"2022-11-22T11:56:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229673"},"modified":"2022-11-09T15:53:12","modified_gmt":"2022-11-09T12:53:12","slug":"iteration-paa-wordpress-administration-screen-design","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/iteration-paa-wordpress-administration-screen-design\/","title":{"rendered":"Iteration p\u00e5 WordPress Administration Screen Design"},"content":{"rendered":"\n<p>Id\u00e9n med en &quot;iterativ process&quot; \u00e4r inget nytt inom mjukvaruutveckling. Den finns i ett antal olika metoder och troligen f\u00f6r att den fungerar bra, s\u00e4rskilt n\u00e4r man f\u00e5r feedback fr\u00e5n kunder.<\/p>\n<p>En av de st\u00e4llen som jag ocks\u00e5 tycker \u00e4r anv\u00e4ndbar \u00e4r n\u00e4r jag bygger administrationsgr\u00e4nssnitt f\u00f6r WordPress-plugins.<\/p>\n<p>F\u00f6r att vara tydlig, jag \u00e4r ingen designer, s\u00e5 n\u00e4r det kommer till front-end-arbete, h\u00e4nvisar jag alltid till stilguiden och de modeller som designern ger mig fr\u00e5n b\u00f6rjan av projektet. (Jag n\u00e4mner detta bara f\u00f6r att jag tycker att det \u00e4r en praxis som alla som inte \u00e4r designer b\u00f6r f\u00f6lja, men jag avviker).<\/p>\n<p>Men n\u00e4r det kommer till att arbeta med administrationssk\u00e4rmar eller back-end-sk\u00e4rmar f\u00f6r WordPress, tenderar jag att f\u00f6lja en strikt regel: Se till att det ser s\u00e5 naturligt ut som m\u00f6jligt.<\/p>\n<p>Hur har iterativ utveckling och gr\u00e4nssnittet f\u00f6r WordPress administrationssk\u00e4rmar n\u00e5got med varandra att g\u00f6ra?<\/p>\n<h2>WordPress administration sk\u00e4rmdesign<\/h2>\n<p>Denna speciella artikel avst\u00e5r fr\u00e5n att prata om saker som f\u00f6rv\u00e4ntas f\u00f6r att spara information. Det vill s\u00e4ga, jag antar alla:<\/p>\n<ul>\n<li>sanering,<\/li>\n<li>godk\u00e4nnande,<\/li>\n<li>icke-kontroller,<\/li>\n<li>tillst\u00e5ndskontroller,<\/li>\n<\/ul>\n<p>Och liknande f\u00f6rst\u00e5s och hanteras.<\/p>\n<p>F\u00f6r det h\u00e4r inl\u00e4gget ska jag h\u00e5lla det enkelt. L\u00e5t oss s\u00e4ga att vi vill ha:<\/p>\n<ul>\n<li>ett par textf\u00e4lt,<\/li>\n<li>en spara-knapp,<\/li>\n<li>en \u00e5terst\u00e4llningsknapp,<\/li>\n<li>och kanske n\u00e5got extra p\u00e5 slutet.<\/li>\n<\/ul>\n<p>Hur kan detta utspela sig genom en iterativ process n\u00e4r man designar den?<\/p>\n<h3>1 Skissa det<\/h3>\n<p>S\u00e4g att du h\u00e5ller p\u00e5 med n\u00e5got och planerar hur den administrativa sk\u00e4rmen ska se ut. Med tanke p\u00e5 vad vi hade ovan kanske en f\u00f6rsta skiss kan se ut s\u00e5 h\u00e4r:<\/p>\n<p>L\u00e4tt nog, eller hur? Det representerar vad projektet beh\u00f6ver underh\u00e5lla, och det visar allt vi beh\u00f6ver f\u00f6r just den h\u00e4r administrationssk\u00e4rmen.<\/p>\n<h3>2 Bygga det<\/h3>\n<p>N\u00e4r den v\u00e4l har satts ihop ska den se s\u00e5 naturlig ut som m\u00f6jligt. Med tanke p\u00e5 de stilar vi har tillg\u00e4ngliga i WordPress \u00e4r det relativt enkelt att bygga detta med tillg\u00e4ngliga API:er och uppm\u00e4rkning:<\/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=\"Iteration p\u00e5 WordPress Administration Screen Design\" ><\/a><\/p>\n<p>Och vad g\u00f6r varje f\u00e4lt och knapp?<\/p>\n<h3>3 F\u00f6rfina det<\/h3>\n<p>Det \u00e4r h\u00e4r f\u00f6rfining av funktionaliteten kommer in i bilden. Till exempel:<\/p>\n<ul>\n<li>Jag tror inte att knappen <strong>Spara<\/strong> ska aktiveras f\u00f6rr\u00e4n de obligatoriska f\u00e4lten \u00e4r ifyllda,<\/li>\n<li>Jag tror att <strong>\u00e5terst\u00e4llningsknappen<\/strong> borde ta bort det som finns,<\/li>\n<li>Det b\u00f6r finnas en viss grad av felmeddelanden som alla representerar vad det \u00e4r vi beh\u00f6ver g\u00f6ra n\u00e4r n\u00e5got misslyckas, n\u00e4r n\u00e5got kanske inte st\u00e4mmer eller n\u00e5got \u00e4r helt fel.<\/li>\n<\/ul>\n<p>Uppenbarligen \u00e4r det mycket l\u00e4ttare att prata om detta n\u00e4r det inte h\u00e4nvisar till ett specifikt projekt men kanske n\u00e5gra av id\u00e9erna \u00e4r till\u00e4mpliga i vad det \u00e4n \u00e4r du har p\u00e5 g\u00e5ng.<\/p>\n<h2>Asynkrona f\u00f6rb\u00e4ttringar?<\/h2>\n<p>En av de saker vi har vant oss vid med enheter som v\u00e5ra telefoner och vissa delar av v\u00e5ra operativsystem \u00e4r att n\u00e4r vi v\u00e4xlar eller g\u00f6r en liten f\u00f6r\u00e4ndring sparas data.<\/p>\n<p>Det vill s\u00e4ga, ingen bekr\u00e4ftelse\u00e5tg\u00e4rd (annat \u00e4n n\u00e5got destruktivt som att ta bort en fil, naturligtvis) kr\u00e4vs. Data sparas helt enkelt och alternativet fungerar.<\/p>\n<p>\u00c4nd\u00e5 ser vi fortfarande m\u00e5nga <strong>Spara<\/strong> -knappar i WordPress, eller hur? Vad s\u00e4gs om att spara ing\u00e5ngar via Ajax eller annan asynkron metod? Det h\u00e4r \u00e4r n\u00e5got jag \u00e4nnu inte har implementerat men jag har verkligen \u00f6verv\u00e4gt det.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>N\u00e4r du arbetar med WordPress-administrationssk\u00e4rmdesign finns det en iterativ process som vi kan f\u00f6lja f\u00f6r kvalitetssyfte.<\/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":[848,868],"tags":[1173],"class_list":["post-229673","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-handledningar","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/229673","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=229673"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/229673\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/223984"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=229673"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=229673"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=229673"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}