{"id":86,"date":"2018-10-31T16:35:29","date_gmt":"2018-10-31T15:35:29","guid":{"rendered":"http:\/\/johannes-funk.de\/blog\/?p=86"},"modified":"2018-10-31T16:35:29","modified_gmt":"2018-10-31T15:35:29","slug":"axure-widget-library-checkliste-fuer-neue-widgets","status":"publish","type":"post","link":"https:\/\/johannes-funk.de\/blog\/axure-widget-library-checkliste-fuer-neue-widgets\/","title":{"rendered":"Axure Widget Library &#8211; Checkliste f\u00fcr neue Widgets"},"content":{"rendered":"\n<p><em><\/em><\/p>\n\n\n\n<p><em><em>Im nachfolgenden wird der Begriff Widget und Komponente synonym verwendet.<\/em> <\/em><\/p>\n\n\n\n<p>Die folgende Checkliste dient zur Qualit\u00e4tssicherung von zentralen Widgets in einer Axure Widget Library. Insbesondere wenn diese Library von mehreren Personen gepflegt wird, entstehen oft unterschiedliche Ausbaust\u00e4nde in der Endversion. Meist erf\u00fcllen alle Widgets ihren Zweck und Verhalten sich wie gew\u00fcnscht, jedoch gibt es einige Kniffe, die wenn beachtet den Kollegen einige Zeit und Frust bei der Verwendung der Widgets ersparen.<\/p>\n\n\n\n<p>Mit diesem Hintergrund ist folgende Checkliste entstanden.<br\/><\/p>\n\n\n\n<p>Folgende Punkte sollten erf\u00fcllt sein, bevor eine Komponente in einer Axure Widget Library freigegeben ist.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Eine Komponente hat einen eindeutigen und sprechenden Namen<\/li><li>Eine Komponente ist einer beschreibenden Gruppe zugeordnet (Beispiele: Basiselemente, funktionale Elemente, zusammengesetzte Komponenten)<br\/><\/li><li>Alle Elemente der Komponente sind zusammen gruppiert, die Gruppe ist gleichnamig zum Widget. Diese Ma\u00dfnahme erleichtert es im sp\u00e4teren Projekt das Widget\/die Komponente wiederzufinden bzw. zu suchen. Gleichzeitig bleiben die zusammengeh\u00f6rigen Elemente gruppiert und es entsteht kein &#8222;Salat&#8220; aus Bausteinen, welche auf der Projekt-Prototypenseite zusammengew\u00fcrfelt sind.  Besteht das Widget aus einem dynamischen Panel, so ist das dynamische Panel trotzdem zu gruppieren. <br\/><\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/johannes-funk.de\/blog\/wp-content\/uploads\/2018\/10\/axure-outline-name-widget-and-elements.png\" alt=\"Beispiel f\u00fcr eine Gruppierung\" class=\"wp-image-87\" width=\"300\" height=\"320\"\/><figcaption>Axure Elemente sind gruppiert und die Gruppierung ist gleichnamig zur Komponente.<\/figcaption><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li>Die Komponente ist in sich funktional &#8211;\u00a0 bei einer Auswahlliste (Dropdown) klappt zum Beispiel die Liste aus wenn auf das Icon f\u00fcr &#8222;Erweitern&#8220; gedr\u00fcckt wird und verschwindet wieder wenn das Icon f\u00fcr &#8222;Zusammenklappen&#8220; gedr\u00fcckt wird.<br\/><\/li><li>Alle Elemente des Widgets sind sauber benannt.<\/li><li>Das Widget verwendet nach M\u00f6glichkeit nur die eigenen Styles (bspw.: &#8222;<em>IF_Icon Farbe F\u00fcllung<\/em>&#8222;) oder eigens f\u00fcr das Widget definierte Styles (bspw.: &#8222;<em>Dropdown Iconfarbe<\/em>&#8222;). Dies erm\u00f6glicht es sp\u00e4ter in Projekten Farb\u00e4nderungen einfacher umzusetzen und genau abzugrenzen.<br\/><\/li><li>Das Widget hat <strong>alle adaptiven Ansichten<\/strong> definiert, sofern dieses Feature verwendet wird. Widgets, die in einer bestimmten Ansicht keinen Sinn machen, werden aus der entsprechenden Ansicht gel\u00f6scht. Das Fehlen der mobilen Variante wird in der Seitennotiz &#8222;Mobiles Verhalten&#8220; begr\u00fcndet und vermerkt, ebenso wie andere Verhaltens\u00e4nderungen.<br\/><\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/johannes-funk.de\/blog\/wp-content\/uploads\/2018\/10\/Axure-explain-mobile-behaviour-in-note.png\" alt=\"\" class=\"wp-image-88\" width=\"300\" height=\"300\" srcset=\"https:\/\/johannes-funk.de\/blog\/wp-content\/uploads\/2018\/10\/Axure-explain-mobile-behaviour-in-note.png 300w, https:\/\/johannes-funk.de\/blog\/wp-content\/uploads\/2018\/10\/Axure-explain-mobile-behaviour-in-note-150x150.png 150w, https:\/\/johannes-funk.de\/blog\/wp-content\/uploads\/2018\/10\/Axure-explain-mobile-behaviour-in-note-100x100.png 100w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><figcaption>Die mobile Ansicht ist durch eine Notiz erkl\u00e4rt.<\/figcaption><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li>Das Widget verwendet keine globalen Variablen.<\/li><li>Es ist ein Icon hinterlegt f\u00fcr beide Icon-Felder (28 x 28 px &amp; 56 x 56 px)<br\/><\/li><li>Die Check In-Notiz enth\u00e4lt eine explizite Auflistung aller erstellten Komponenten (eigene Sektion innerhalb der Nachricht).<br\/><\/li><\/ul>\n\n\n\n<pre class=\"wp-block-verse\" style=\"text-align:left\">Erstellt:<br\/>\n#Drowdown 1\/1\n\n<br\/>\n#Dropdown 1\/3<br\/>\nim Rahmen von <em>TICKET-123<\/em>.\n\n<br\/>----<br\/>Ver\u00e4ndert:<br\/>..<br\/>....<br\/>----<br\/>Gel\u00f6scht:<br\/>....<br\/><\/pre>\n\n\n\n<p>Eine \u00e4hnliche Form dieser Checkliste verwenden wir um im Rahmen des Prototypings von Oberfl\u00e4chen, um zu gew\u00e4hrleisten, dass alle Widgets grundlegende Standards einhalten, was das Arbeiten deutlich vereinfacht. Da die Komponenten einer zentralen Komponentenbibliothek jedoch in vielen Projekten zum Einsatz kommen, ist es wichtig diese Standards zu forcieren, um das Arbeiten mit diesen Widgets erheblich zu vereinfachen und nacharbeiten zu verringern. <br\/>Jeder Planer kann sich somit sicher sein, dass wenn er beispielsweise die zum Widget hinterlegten Styles bearbeitet, er auch wirklich nur f\u00fcr diese Widgets Farb-\/Stilanpassungen vornimmt. W\u00fcrde das Widget beispielsweise Axure Default-Styles (Box1, Linie, &#8230;) verwenden, so k\u00f6nnte eine Farb\u00e4nderung in allen m\u00f6glichen Komponenten seines Projektes &#8222;durchschlagen&#8220;, was unn\u00f6tige Nacharbeiten nach sich ziehen k\u00f6nnte. <br\/><\/p>\n\n\n\n<p> Durch die Bereitstellung und Abarbeitung dieser Checkliste wird geholfen, diesen Mindeststandard zu dokumentieren und nachzuhalten. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Im nachfolgenden wird der Begriff Widget und Komponente synonym verwendet. Die folgende Checkliste dient zur Qualit\u00e4tssicherung von zentralen Widgets in einer Axure Widget Library. Insbesondere wenn diese Library von mehreren Personen gepflegt wird, entstehen oft unterschiedliche Ausbaust\u00e4nde in der Endversion. Meist erf\u00fcllen alle Widgets ihren Zweck und Verhalten sich wie gew\u00fcnscht, jedoch gibt es einige &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/johannes-funk.de\/blog\/axure-widget-library-checkliste-fuer-neue-widgets\/\" class=\"more-link\"><span class=\"screen-reader-text\">\u201eAxure Widget Library &#8211; Checkliste f\u00fcr neue Widgets\u201c<\/span> weiterlesen<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[12,15,13,14],"class_list":["post-86","post","type-post","status-publish","format-standard","hentry","category-axure","tag-axure","tag-checkliste","tag-widget-library","tag-widgets"],"_links":{"self":[{"href":"https:\/\/johannes-funk.de\/blog\/wp-json\/wp\/v2\/posts\/86","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/johannes-funk.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/johannes-funk.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/johannes-funk.de\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/johannes-funk.de\/blog\/wp-json\/wp\/v2\/comments?post=86"}],"version-history":[{"count":3,"href":"https:\/\/johannes-funk.de\/blog\/wp-json\/wp\/v2\/posts\/86\/revisions"}],"predecessor-version":[{"id":92,"href":"https:\/\/johannes-funk.de\/blog\/wp-json\/wp\/v2\/posts\/86\/revisions\/92"}],"wp:attachment":[{"href":"https:\/\/johannes-funk.de\/blog\/wp-json\/wp\/v2\/media?parent=86"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/johannes-funk.de\/blog\/wp-json\/wp\/v2\/categories?post=86"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/johannes-funk.de\/blog\/wp-json\/wp\/v2\/tags?post=86"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}