[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"9_t0YFtO844PW3-iCfPxRTbw8yv0-2zzu2bChZFenjo":3,"btz8hO-MXSFLpybqvfjYVBre4OvrEJO1wFySe3Zmv-s":49,"WBH5DUOOm4uxbLTwBVfsMtcgkzaQal7CQJCSN9EfZvA":75,"ZPWCHa5QEvQgT-mhUh0H9DFyDda6PMqB3sfer-j3fyY":170,"_apollo:default":215},{"menu":4},{"__typename":5,"id":6,"name":7,"items":8},"Menu","nuxt-main-menu","Nuxt Hauptmenü",[9,24,29,34,39,44],{"__typename":10,"id":11,"title":12,"description":13,"url":14,"langcode":15,"internal":20,"expanded":21,"attributes":22},"MenuItem","9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1","Blog",null,"/know-how",{"__typename":16,"id":17,"name":18,"direction":19},"Language","de","German","ltr",true,false,{"__typename":23,"class":13},"MenuItemAttributes",{"__typename":10,"id":25,"title":26,"description":13,"url":27,"langcode":15,"internal":20,"expanded":21,"attributes":28},"1c7a5430-8a42-4b24-9544-252adabc2f4c","Projekte","/projekte",{"__typename":23,"class":13},{"__typename":10,"id":30,"title":31,"description":13,"url":32,"langcode":15,"internal":20,"expanded":21,"attributes":33},"9c4feedc-79e4-4fbf-b68c-065f33ebfe4c","Sparring","/workshop-ux-sparring-fuer-unternehmen",{"__typename":23,"class":13},{"__typename":10,"id":35,"title":36,"description":13,"url":37,"langcode":15,"internal":20,"expanded":21,"attributes":38},"3b77a27b-272a-489f-843e-53e23ed07741","Trainings","/liechtenecker-ux-academy",{"__typename":23,"class":13},{"__typename":10,"id":40,"title":41,"description":13,"url":42,"langcode":15,"internal":20,"expanded":21,"attributes":43},"ce0bb82b-e1ee-4036-be95-f693a62e9f4a","Über uns","/about",{"__typename":23,"class":13},{"__typename":10,"id":45,"title":46,"description":13,"url":47,"langcode":15,"internal":20,"expanded":21,"attributes":48},"04a19381-81a9-4694-8653-182d8855d2b5","Kontakt","/kontakt",{"__typename":23,"class":13},{"menu":50},{"__typename":5,"id":51,"name":52,"items":53},"footer","Fußzeile",[54,60,65,70],{"__typename":10,"id":55,"title":56,"description":13,"url":57,"langcode":58,"internal":20,"expanded":21,"attributes":59},"e2873307-b50a-4aab-b6b2-1950fd99c72e","Impressum","/impressum",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":23,"class":13},{"__typename":10,"id":61,"title":62,"description":13,"url":63,"langcode":58,"internal":20,"expanded":21,"attributes":64},"2cd9b7c9-142a-4ea3-b898-a0952c54a195","Datenschutz","/datenschutz",{"__typename":23,"class":13},{"__typename":10,"id":66,"title":67,"description":13,"url":68,"langcode":58,"internal":20,"expanded":21,"attributes":69},"a5effba3-5a8c-4125-8d78-0cdba09824db","AGB","/agb",{"__typename":23,"class":13},{"__typename":10,"id":71,"title":72,"description":13,"url":73,"langcode":58,"internal":21,"expanded":21,"attributes":74},"114bf071-bdbb-44cf-85c1-69e9d9e0777d","Newsletter","https://liechtenecker.at/newsletter-subscribe",{"__typename":23,"class":13},{"route":76},{"__typename":77,"entity":78},"RouteInternal",{"__typename":79,"id":80,"title":81,"changed":82,"created":88,"langcode":91,"path":92,"promote":21,"status":20,"sticky":21,"metatag":93,"postCategory":113,"postContentElements":13,"evergreen":13,"tags":138,"postWpBody":160,"wpHeaderImage":13,"wpHeaderImageOld":13,"wpHeaderImageOldSmall":13,"wpOgImage":13,"wpPromotedTeaserImage":13,"wpShareDescription":13,"wpShareTitle":13,"wpTeaserText":13,"wpYoastHead":163,"author":164},"NodeWpPost","863","Animationen - die neuen Features von Angular 4.2",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},"DateTime",1554795999,"UTC","+00:00","2019-04-09T07:46:39+00:00",{"__typename":83,"timestamp":89,"timezone":85,"offset":86,"time":90},1496914951,"2017-06-08T09:42:31+00:00",{"__typename":16,"id":17,"name":18,"direction":19},"/blog/animationen-neue-features-von-angular-4-2",[94,101,108],{"__typename":95,"tag":96,"attributes":97},"MetaTagValue","meta",{"__typename":98,"name":99,"content":100},"MetaTagValueAttributes","title","Animationen - die neuen Features von Angular 4.2 | Liechtenecker UX Design Studio",{"__typename":102,"tag":103,"attributes":104},"MetaTagLink","link",{"__typename":105,"href":106,"hreflang":13,"rel":107,"media":13,"sizes":13,"type":13},"MetaTagLinkAttributes","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/blog/animationen-neue-features-von-angular-4-2","canonical",{"__typename":109,"tag":96,"attributes":110},"MetaTagProperty",{"__typename":111,"property":112,"content":81},"MetaTagPropertyAttributes","og:title",{"__typename":114,"id":115,"name":116,"path":117,"status":20,"weight":118,"description":119,"langcode":123,"changed":124,"metatag":127},"TermCategories","7","Technologie","/kategorie/technologie",0,{"__typename":120,"processed":121,"format":122},"Text","Development Themen sowie zukünftige Technologien, mit denen wir uns auseinandersetzen. ","wp_html",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":83,"timestamp":125,"timezone":85,"offset":86,"time":126},1713772777,"2024-04-22T07:59:37+00:00",[128,131,135],{"__typename":95,"tag":96,"attributes":129},{"__typename":98,"name":99,"content":130},"Technologie | Liechtenecker UX Design Studio",{"__typename":95,"tag":96,"attributes":132},{"__typename":98,"name":133,"content":134},"description","Development Themen sowie zukünftige Technologien, mit denen wir uns auseinandersetzen.",{"__typename":102,"tag":103,"attributes":136},{"__typename":105,"href":137,"hreflang":13,"rel":107,"media":13,"sizes":13,"type":13},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/kategorie/technologie",[139,144,148,152,156],{"__typename":140,"id":141,"name":142,"path":143,"weight":118},"TermTags","80","angular","/tag/angular",{"__typename":140,"id":145,"name":146,"path":147,"weight":118},"82","Animation","/tag/animation",{"__typename":140,"id":149,"name":150,"path":151,"weight":118},"460","Features","/tag/features",{"__typename":140,"id":153,"name":154,"path":155,"weight":118},"506","front-end","/tag/front-end",{"__typename":140,"id":157,"name":158,"path":159,"weight":118},"1405","UX","/tag/ux",{"__typename":161,"processed":162,"format":122,"summary":13},"TextSummary","\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Animationen gehören zum Frontend wie die Butter aufs Brot. Sie machen ein wunderschönes Design zu einem lebendigen, reagierenden Gegenüber und sind damit aus einer erfolgreichen User Experience nicht wegzudenken. \u003C/span>\u003C/p>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Früher wurden Animationen, die über den Hover-State hinausgingen, mit Flash umgesetzt, gleichzeitig wurde aber auch Javascript (und dessen Libraries, zb jQuery) immer beliebter. 2011 begannen die Browser, CSS-Animationen zu unterstützen. Eine Vielzahl an Eigenschaften wurde so animierbar; ganz einfach von einem Wert zum anderen, oder gar als Keyframe-Animation, die bis in die Unendlichkeit loopen kann. Und Javascript spielte hier stets eine nicht unwesentliche Rolle: es kann in den DOM eingreifen, Klassen vergeben, Eigenschaften verändern. Libraries und Frameworks bieten dazu noch recht mächtige und einfach zu bedienende Konzepte.\u003C/span>\u003C/p>\n\u003Ch2>\u003Cspan style=\"font-weight: 400;\">Angular\u003C/span>\u003C/h2>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Als AngularJS (Version 1) kam, waren die Animationen noch recht übersichtlich.\u003C/span>\u003C/p>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Auf Änderungen, die AngularJS im DOM veranlasste, konnte im CSS reagiert werden. Wurde zb. ein Element hinzugefügt, so konnte man dieses Element gezielt animieren. Dazu wurden von AngularJS ein paar Klassen vergeben, wenn ein Element mit \u003C/span>\u003Cspan style=\"font-weight: 400;\">ng-show \u003C/span>\u003Cspan style=\"font-weight: 400;\">angezeigt wurde: \u003C/span>\u003Cem>\u003Cspan style=\"font-weight: 400;\">.ng-hide\u003C/span>\u003C/em>\u003Cspan style=\"font-weight: 400;\"> gleich zu Beginn, \u003C/span>\u003Cem>\u003Cspan style=\"font-weight: 400;\">.ng-hide-remove\u003C/span>\u003C/em>\u003Cspan style=\"font-weight: 400;\"> für die Dauer der Animation, und \u003C/span>\u003Cem>\u003Cspan style=\"font-weight: 400;\">.ng-hide-remove-active\u003C/span>\u003C/em>\u003Cspan style=\"font-weight: 400;\"> wenn die Animation abgeschlossen war. Das war zwar manchmal semantisch nicht ganz nachvollziehbar (warum \u003Cem>ng-hide-remove\u003C/em>, wenn es doch auch beispielsweise \u003Cem>ng-show\u003C/em> sein hätte können), aber im Großen und Ganzen schon recht praktikabel.\u003C/span>\u003C/p>\n\u003Cp> \u003Cbr>\n\u003Cspan style=\"font-weight: 400;\">Nun ist AngularJS nicht mehr aktuell. 2016 kam Angular 2 – und bei diesem Release blieb kein Stein auf dem anderen. Natürlich auch bei den Animationen nicht. Man kann noch dynamisch Klassen vergeben und Elemente dadurch zum Leben erwecken, die neuen Komponenten haben allerdings eine eigene Animations-DSL (Domain Specific Language) erhalten, die sich fundamental zu den bisherigen Konzepten unterscheidet.\u003C/span>\u003C/p>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Jedes Element einer Komponente kann mit einem Animationstrigger ausgestattet bzw. diesem zugeordnet werden. Diese Trigger beinhalten \u003C/span>\u003Cem>\u003Cspan style=\"font-weight: 400;\">states\u003C/span>\u003C/em>\u003Cspan style=\"font-weight: 400;\"> (mit Styling-Anweisungen), und sobald der \u003C/span>\u003Cem>\u003Cspan style=\"font-weight: 400;\">state\u003C/span>\u003C/em>\u003Cspan style=\"font-weight: 400;\"> geändert wird (zb. ‘inactive’ zu ‘active’) , kommt es zur entsprechenden Animation (leicht verkürzt dargestellt). Hier gibt es jedoch einige Einschränkungen in dieser Art der Animation, die in vielen Fällen den Rückweg zu klassischen Klassen-getriggerten Animationen gefordert haben. Auch der Release von Angular 4 hat hier noch nicht die erhofften Änderungen gebracht.\u003C/span>\u003C/p>\n\u003Ch2>\u003Cspan style=\"font-weight: 400;\">ng-conf 2017\u003C/span>\u003C/h2>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Auf der diesjährigen ng-conf hat Matias Niemela (Angular Developer für den Bereich Animation) einige \u003Ca href=\"https://www.youtube.com/watch?v=Oh9wj-1p2BM&feature=youtu.be\" data-rel=\"lightbox-video-0\">Features vorgestellt\u003C/a>\u003C/span>\u003Cspan style=\"font-weight: 400;\">, die die Funktionalität der Animationsmöglichkeiten enorm stärken. Wir haben uns den Release-Candidate der Version 4.2 mal näher angesehen und die einige Aspekte durchprobiert. (Achtung – Die im Video gezeigten Konzepte sind im RC 4.2 teilweise etwas anders umgesetzt)\u003C/span>\u003C/p>\n\u003Cp> \u003C/p>\n\u003Ch3>\u003Cspan style=\"font-weight: 400;\">Wiederverwendbare Animationen mit dynamischen Werten\u003C/span>\u003C/h3>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Bisher konnte man, wenn man Animationen wiederverwenden wollte, die Animationen in extra Files auslagern und bei Bedarf wieder importieren. Die neuen, wiederverwendbaren Animationen funktionieren ähnlich, man erstellt die Animation, und kann diese dann in den jeweiligen Triggern ausführen:\u003C/span>\u003C/p>\n\u003Cp>Die Fade-In-Animation wird angelegt:\u003C/p>\n\u003Cpre style=\"font-size: 0.8em;\">//animations.ts\nexport let fadeIn = animation([\n  style({opacity:0}),\n  animate(1000', style({opacity:1}))\n]);\u003C/pre>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Mit der Funktion \u003C/span>\u003Cspan style=\"font-weight: 400;\">\u003Ci>useAnimation\u003C/i> kann die importierte Animation ausgeführt werden:\u003C/span>\u003C/p>\n\u003Cpre style=\"font-size: 0.8em;\">//app.animations.component.ts\nimport {fadeIn} from './animations';\nexport const myAnimations = trigger('fade', [\n  transition('* => in', [\n    useAnimation(fadeIn)\n  ])\n]);\n\u003C/pre>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Diese Art der Animations-Wiederverwendung ist schon ganz praktisch, ihre wahre Stärke spielt sie aber aus, wenn es um dynamische Werte geht: Man kann dieser Animation nämlich Parameter mitgeben, sowohl Werte, die den Element-Eigenschaften zugeordnet werden, als auch die Dauer der Animation.\u003C/span>\u003C/p>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Die Fade-In-Animation wird mit Variablen versehen, am Ende können Standardwerte vergeben werden.\u003C/span>\u003C/p>\n\u003Cpre style=\"font-size: 0.8em;\">//animations.ts\nexport let fadeIn = animation([\n  style({opacity:'{{ start }}'}),\n  animate('{{time}}', style({opacity:'{{ end }}'}))\n], { params: { time: '1000ms', start: 0, end: 1 }});\u003C/pre>\n\u003Cp>Die Parameter werden als Objekt der \u003Cem>useAnimation\u003C/em>-Funktion übergeben.\u003C/p>\n\u003Cpre style=\"font-size: 0.8em;\">//app.animations.component.ts\nimport {fadeIn} from './animations';\nexport const myAnimations = trigger('fade', [\n  transition('* => in', [\n    useAnimation(fadeIn,{ params: { time: '500ms', start: 0.3, end: 0.9 }})\n  ])\n]);\u003C/pre>\n\u003Cp>Sub-Elemente animieren\u003Cbr>\n\u003Cspan style=\"font-weight: 400;\">Bisher war es nicht möglich, über die Angular Animations-DSL Kindelemente eigens zu animieren. Das, und die fehlende Möglichkeit, Werte dynamisch zu übergeben, haben uns in den meisten Fällen zu den Klassen-basierten Animationen getrieben, da uns oftmals der Mehrwert fehlte. Das ändert sich jetzt. Das langersehnte \u003C/span>\u003Cem>\u003Cspan style=\"font-weight: 400;\">query\u003C/span>\u003C/em>\u003Cspan style=\"font-weight: 400;\"> hat es in den Release-Candidate geschafft! Und gemeinsam mit \u003C/span>\u003Cem>\u003Cspan style=\"font-weight: 400;\">group\u003C/span>\u003C/em>\u003Cspan style=\"font-weight: 400;\"> ist das schon ziemlich fein für Animationen, die mehrere Elemente betreffen. Das Beispiel zeigt eine Animation die folgendermaßen abläuft: Der Basis-Container wird auf \u003Cem>height:0\u003C/em> und \u003Cem>overflow:hidden\u003C/em> gesetzt, damit nichts von ihm oder seinen Kindern zu sehen ist. Der \u003Cem>inner-container\u003C/em> wird 50px nach links versetzt, der \u003Cem>.text-container\u003C/em> um 20px nach unten. Danach geht’s schon ans Animieren: die Höhe des Basis-Containers wird automatisch errechnet, der inner-container wird sichtbar und kommt von links zur Zielposition – mit einem Delay von 300ms. Danach wird der text-container von unten ein-animiert.\u003C/span>\u003C/p>\n\u003Cp> \u003Cbr>\n\u003Cspan style=\"font-weight: 400;\">Mithilfe des \u003Cem>query\u003C/em>-Selectors können auf Kindelemente (zb .inner-container, .text) zugegriffen werden, und mit \u003Cem>group\u003C/em> werden dann verschiedene Animationen gleichzeitig ausgeführt:\u003C/span>\u003C/p>\n\u003Cpre style=\"font-size: 0.8em;\">transition(':enter', [\n  style({overflow:'hidden', height:'0'}),\n  query('.inner-container', style({opacity:0, transform:'translateX(-50px)'})),\n  query('.text', style({transform:'translateY(20px)'})),\n  group([\n    animate('600ms ease-out', style({height:'*'})),\n    query('.inner-container', animate('500ms 300ms ease-out', style({opacity:1, transform:'translateX(0px)'}))),\n  ]),\n  query('.text', animate('300ms ease-out', style({transform:'translateY(0px)'}))),\n])\u003C/pre>\n\u003Ch2>\u003Cspan style=\"font-weight: 400;\">Ausblick\u003C/span>\u003C/h2>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Es gibt noch einige weitere Neuerungen, wie beispielsweise neue Funktionen für Routen-Animationen, oder programmatische Animationen. Letztere dürften ihre Stärke wohl dann ausspielen, wenn die Animationsdauer und -werte von externen Quellen abhängen, wie dies beispielsweise bei einem Fortschrittsbalken eines Uploads der Fall sein könnte. \u003C/span>\u003C/p>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Aber jetzt warten wir mal auf den offiziellen Release (und eine offizielle Dokumentation), da zwischen der angesprochenen Keynote und 4.2-rc.1 schon diverse Unterschiede festzustellen sind. Wir sind jedenfalls euphorisch und freuen uns auf die neuen Features! \u003C/span>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n","\u003C!-- This site is optimized with the Yoast SEO plugin v15.7 - https://yoast.com/wordpress/plugins/seo/ -->\n\u003Cmeta name=\"description\" content=\"Animationen gehören zum Frontend wie die Butter aufs Brot. Angular 4.2 bringt einige Änderungen, die den Umgang mit Animationen verändern werden.\" />\n\u003Cmeta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n\u003Clink rel=\"canonical\" href=\"https://legacy.liechtenecker.dev/blog/animationen-neue-features-von-angular-4-2/\" />\n\u003Cmeta property=\"og:locale\" content=\"de_DE\" />\n\u003Cmeta property=\"og:type\" content=\"article\" />\n\u003Cmeta property=\"og:title\" content=\"Animationen - die neuen Features von Angular 4.2 - Liechtenecker\" />\n\u003Cmeta property=\"og:description\" content=\"Animationen gehören zum Frontend wie die Butter aufs Brot. Angular 4.2 bringt einige Änderungen, die den Umgang mit Animationen verändern werden.\" />\n\u003Cmeta property=\"og:url\" content=\"https://legacy.liechtenecker.dev/blog/animationen-neue-features-von-angular-4-2/\" />\n\u003Cmeta property=\"og:site_name\" content=\"Liechtenecker\" />\n\u003Cmeta property=\"article:published_time\" content=\"2017-06-08T11:42:31+00:00\" />\n\u003Cmeta property=\"article:modified_time\" content=\"2019-04-09T09:46:39+00:00\" />\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" />\n\u003Cmeta name=\"twitter:label1\" content=\"Geschätzte Lesezeit\">\n\t\u003Cmeta name=\"twitter:data1\" content=\"5 Minuten\">\n\u003Cscript type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https://legacy.liechtenecker.dev/#website\",\"url\":\"https://legacy.liechtenecker.dev/\",\"name\":\"Liechtenecker\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https://legacy.liechtenecker.dev/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"WebPage\",\"@id\":\"https://legacy.liechtenecker.dev/blog/animationen-neue-features-von-angular-4-2/#webpage\",\"url\":\"https://legacy.liechtenecker.dev/blog/animationen-neue-features-von-angular-4-2/\",\"name\":\"Animationen - die neuen Features von Angular 4.2 - Liechtenecker\",\"isPartOf\":{\"@id\":\"https://legacy.liechtenecker.dev/#website\"},\"datePublished\":\"2017-06-08T11:42:31+00:00\",\"dateModified\":\"2019-04-09T09:46:39+00:00\",\"author\":{\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/0cb8cf424fe0fc1943e1a09a426032c4\"},\"description\":\"Animationen geh\\u00f6ren zum Frontend wie die Butter aufs Brot. Angular 4.2 bringt einige \\u00c4nderungen, die den Umgang mit Animationen ver\\u00e4ndern werden.\",\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://legacy.liechtenecker.dev/blog/animationen-neue-features-von-angular-4-2/\"]}]},{\"@type\":\"Person\",\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/0cb8cf424fe0fc1943e1a09a426032c4\",\"name\":\"Lukas Kindermann\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https://legacy.liechtenecker.dev/#personlogo\",\"inLanguage\":\"de-DE\",\"url\":\"https://secure.gravatar.com/avatar/116fdcda3e1d9ad0d3b65dd2e1d2dd40?s=96&d=mm&r=g\",\"caption\":\"Lukas Kindermann\"}}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"__typename":165,"id":166,"myRole":167,"name":168,"nickname":169},"User","8","Omnom-Fanboy","lukas","Lukas Kindermann",{"latestKnowhow":171},[172,190,203],{"__typename":79,"id":173,"title":174,"path":175,"wpTeaserText":176,"wpPromotedTeaserImage":13,"wpHeaderImage":177},"1619","Behind the scenes: Ein Barrierefreiheits-Audit","/blog/behind-scenes-ein-barrierefreiheits-audit","”Entspricht unsere Website den gesetzlichen Anforderungen und wenn nicht, was genau müssen wir ändern?”\r\nDiese Frage lieben wir. Echt! Und so sieht unsere Antwort aus.",{"__typename":178,"id":179,"excludeFromScreenreader":13,"mediaImage":180,"name":188,"path":189,"status":20},"MediaImage","3364",{"__typename":181,"url":182,"width":183,"height":184,"alt":185,"title":13,"size":186,"mime":187},"Image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-04/Headerbilder%20Blogartikel%20Behind%20the%20scene%20Accessibility%20Audit.jpg",2880,1300,"Headline mit Sujet: Tastatur mit Symbolen für Barrierefreiheit im Fokus auf hellem  Hintergrund",838204,"image/jpeg","Headerbilder Blogartikel Behind the scene Accessibility Audit.jpg","/media/3364/edit",{"__typename":79,"id":191,"title":192,"path":193,"wpTeaserText":194,"wpPromotedTeaserImage":13,"wpHeaderImage":195},"1616","Agentic KI trifft Design-System: Wie unser Presentation Maker entstand.","/blog/agentic-ki-trifft-design-system-wie-unser-presentation-maker-entstand","Nein, wir wollen euch jetzt nicht erzählen, was KI alles kann. Aber wir möchten euch zeigen, wie wir mit KI umgehen. \r\n",{"__typename":178,"id":196,"excludeFromScreenreader":13,"mediaImage":197,"name":201,"path":202,"status":20},"3355",{"__typename":181,"url":198,"width":183,"height":184,"alt":199,"title":13,"size":200,"mime":187},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-03/BLOG_Presentation%20Tool_TITEL-2880x1300px_1.jpg","Lukas und Daniel  arbeiten an Computern im Büro.",2621988,"BLOG_Presentation Tool_TITEL-2880x1300px.jpg","/media/3355/edit",{"__typename":79,"id":204,"title":205,"path":206,"wpTeaserText":13,"wpPromotedTeaserImage":13,"wpHeaderImage":207},"1606","UI Trends 2026","/blog/ui-trends-2026",{"__typename":178,"id":208,"excludeFromScreenreader":21,"mediaImage":209,"name":213,"path":214,"status":20},"3303",{"__typename":181,"url":210,"width":183,"height":184,"alt":211,"title":13,"size":212,"mime":187},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-01/BLOG_Trendbericht%202026.jpg","UI Trends 2026, gelber Hintergrund, schwarze Schrift.",4700748,"BLOG_Trendbericht 2026.jpg","/media/3303/edit",{"Language:de":216,"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1":217,"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c":221,"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c":224,"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741":227,"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a":230,"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5":233,"Menu:nuxt-main-menu":236,"ROOT_QUERY":250,"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e":266,"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195":269,"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db":272,"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d":275,"Menu:footer":278,"TermCategories:7":288,"TermTags:80":299,"TermTags:82":300,"TermTags:460":301,"TermTags:506":302,"TermTags:1405":303,"User:8":304,"NodeWpPost:863":305,"MediaImage:3364":332,"NodeWpPost:1619":334,"MediaImage:3355":337,"NodeWpPost:1616":339,"MediaImage:3303":342,"NodeWpPost:1606":344},["null","__typename",16,"id",17,"name",18,"direction",19],["null","__typename",10,"id",11,"title",12,"description",13,"url",14,"langcode",218,"internal",20,"expanded",21,"attributes",220],{"__ref":219},"Language:de",["null","__typename",23,"class",13],["null","__typename",10,"id",25,"title",26,"description",13,"url",27,"langcode",222,"internal",20,"expanded",21,"attributes",223],{"__ref":219},["null","__typename",23,"class",13],["null","__typename",10,"id",30,"title",31,"description",13,"url",32,"langcode",225,"internal",20,"expanded",21,"attributes",226],{"__ref":219},["null","__typename",23,"class",13],["null","__typename",10,"id",35,"title",36,"description",13,"url",37,"langcode",228,"internal",20,"expanded",21,"attributes",229],{"__ref":219},["null","__typename",23,"class",13],["null","__typename",10,"id",40,"title",41,"description",13,"url",42,"langcode",231,"internal",20,"expanded",21,"attributes",232],{"__ref":219},["null","__typename",23,"class",13],["null","__typename",10,"id",45,"title",46,"description",13,"url",47,"langcode",234,"internal",20,"expanded",21,"attributes",235],{"__ref":219},["null","__typename",23,"class",13],["null","__typename",5,"id",6,"name",7,"items",237],[238,240,242,244,246,248],{"__ref":239},"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1",{"__ref":241},"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c",{"__ref":243},"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c",{"__ref":245},"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741",{"__ref":247},"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a",{"__ref":249},"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5",["null","__typename",251,"menu({\"name\":\"NUXT_MAIN_MENU\"})",252,"menu({\"name\":\"FOOTER\"})",254,"route({\"path\":\"/blog/animationen-neue-features-von-angular-4-2\"})",256,"latestKnowhow({\"excludeId\":\"863\",\"limit\":3})",259],"Query",{"__ref":253},"Menu:nuxt-main-menu",{"__ref":255},"Menu:footer",["null","__typename",77,"entity",257],{"__ref":258},"NodeWpPost:863",[260,262,264],{"__ref":261},"NodeWpPost:1619",{"__ref":263},"NodeWpPost:1616",{"__ref":265},"NodeWpPost:1606",["null","__typename",10,"id",55,"title",56,"description",13,"url",57,"langcode",267,"internal",20,"expanded",21,"attributes",268],{"__ref":219},["null","__typename",23,"class",13],["null","__typename",10,"id",61,"title",62,"description",13,"url",63,"langcode",270,"internal",20,"expanded",21,"attributes",271],{"__ref":219},["null","__typename",23,"class",13],["null","__typename",10,"id",66,"title",67,"description",13,"url",68,"langcode",273,"internal",20,"expanded",21,"attributes",274],{"__ref":219},["null","__typename",23,"class",13],["null","__typename",10,"id",71,"title",72,"description",13,"url",73,"langcode",276,"internal",21,"expanded",21,"attributes",277],{"__ref":219},["null","__typename",23,"class",13],["null","__typename",5,"id",51,"name",52,"items",279],[280,282,284,286],{"__ref":281},"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e",{"__ref":283},"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195",{"__ref":285},"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db",{"__ref":287},"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d",["null","__typename",114,"id",115,"name",116,"path",117,"status",20,"weight",118,"description",289,"langcode",290,"changed",291,"metatag",292],["null","__typename",120,"processed",121,"format",122],{"__ref":219},["null","__typename",83,"timestamp",125,"timezone",85,"offset",86,"time",126],[293,295,297],["null","__typename",95,"tag",96,"attributes",294],["null","__typename",98,"name",99,"content",130],["null","__typename",95,"tag",96,"attributes",296],["null","__typename",98,"name",133,"content",134],["null","__typename",102,"tag",103,"attributes",298],["null","__typename",105,"href",137,"hreflang",13,"rel",107,"media",13,"sizes",13,"type",13],["null","__typename",140,"id",141,"name",142,"path",143,"weight",118],["null","__typename",140,"id",145,"name",146,"path",147,"weight",118],["null","__typename",140,"id",149,"name",150,"path",151,"weight",118],["null","__typename",140,"id",153,"name",154,"path",155,"weight",118],["null","__typename",140,"id",157,"name",158,"path",159,"weight",118],["null","__typename",165,"id",166,"myRole",167,"name",168,"nickname",169],["null","__typename",79,"id",80,"title",81,"changed",306,"created",307,"langcode",308,"path",92,"promote",21,"status",20,"sticky",21,"metatag",309,"category",316,"contentElements",13,"evergreen",13,"tags",318,"wpBody",329,"wpHeaderImage",13,"wpHeaderImageOld",13,"wpHeaderImageOldSmall",13,"wpOgImage",13,"wpPromotedTeaserImage",13,"wpShareDescription",13,"wpShareTitle",13,"wpTeaserText",13,"wpYoastHead",163,"author",330],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],["null","__typename",83,"timestamp",89,"timezone",85,"offset",86,"time",90],{"__ref":219},[310,312,314],["null","__typename",95,"tag",96,"attributes",311],["null","__typename",98,"name",99,"content",100],["null","__typename",102,"tag",103,"attributes",313],["null","__typename",105,"href",106,"hreflang",13,"rel",107,"media",13,"sizes",13,"type",13],["null","__typename",109,"tag",96,"attributes",315],["null","__typename",111,"property",112,"content",81],{"__ref":317},"TermCategories:7",[319,321,323,325,327],{"__ref":320},"TermTags:80",{"__ref":322},"TermTags:82",{"__ref":324},"TermTags:460",{"__ref":326},"TermTags:506",{"__ref":328},"TermTags:1405",["null","__typename",161,"processed",162,"format",122,"summary",13],{"__ref":331},"User:8",["null","__typename",178,"id",179,"excludeFromScreenreader",13,"mediaImage",333,"name",188,"path",189,"status",20],["null","__typename",181,"url",182,"width",183,"height",184,"alt",185,"title",13,"size",186,"mime",187],["null","__typename",79,"id",173,"title",174,"path",175,"wpTeaserText",176,"wpPromotedTeaserImage",13,"wpHeaderImage",335],{"__ref":336},"MediaImage:3364",["null","__typename",178,"id",196,"excludeFromScreenreader",13,"mediaImage",338,"name",201,"path",202,"status",20],["null","__typename",181,"url",198,"width",183,"height",184,"alt",199,"title",13,"size",200,"mime",187],["null","__typename",79,"id",191,"title",192,"path",193,"wpTeaserText",194,"wpPromotedTeaserImage",13,"wpHeaderImage",340],{"__ref":341},"MediaImage:3355",["null","__typename",178,"id",208,"excludeFromScreenreader",21,"mediaImage",343,"name",213,"path",214,"status",20],["null","__typename",181,"url",210,"width",183,"height",184,"alt",211,"title",13,"size",212,"mime",187],["null","__typename",79,"id",204,"title",205,"path",206,"wpTeaserText",13,"wpPromotedTeaserImage",13,"wpHeaderImage",345],{"__ref":346},"MediaImage:3303"]