{"id":4990,"date":"2020-07-06T14:02:40","date_gmt":"2020-07-06T13:02:40","guid":{"rendered":"http:\/\/www.workflowblog.de\/?p=4990"},"modified":"2020-09-15T10:09:09","modified_gmt":"2020-09-15T09:09:09","slug":"smart-dank-schnittstellen-ein-plaedoyer-fuer-vernetzte-und-strukturierte-informationen","status":"publish","type":"post","link":"https:\/\/www.workflowblog.de\/?p=4990","title":{"rendered":"Smart dank Schnittstellen &#8211; Ein Pl\u00e4doyer f\u00fcr vernetzte und strukturierte Informationen"},"content":{"rendered":"<div>\n<p><em>Ein Blogbeitrag von <a href=\"https:\/\/blog.c-rex.net\/posts\/3.html\">Frau Maxi Fetsch<\/a> &#8211; c-rex.net:<\/em><\/p>\n<blockquote>\n<h2 class=\"sectiontitle\">Mit Technik zum Ziel<\/h2>\n<p>\u201e<b style=\"color: #18eaeb;\">Smart-Information<\/b> ist f\u00fcr jeden Nutzer zu jeder Zeit an jedem Ort f\u00fcr jeden Kontext verwertbar, ohne dass der Informationslieferant das bei der Erstellung ber\u00fccksichtigt hat.\u201c lautet das erkl\u00e4rte Ziel. Wie man dabei allen rechtlichen und normativen Vorgaben entspricht, haben wir im letzten Beitrag unserer Blog-Serie gesehen. Doch wie wird man dem Ziel der st\u00e4ndigen Verf\u00fcgbarkeit von Informationen sowie ihrer sinnvollen Vernetzung technologisch gesehen gerecht?<\/p>\n<\/blockquote>\n<p><!--more--><img decoding=\"async\" src=\"http:\/\/www.workflowblog.de\/wp-content\/uploads\/2020\/06\/IMG_2432_near_392px.png\" alt=\"Smart Information mit SVG\"><\/p>\n<blockquote>\n<p>Wie und wo sammelt man Informationen \u2013 und viel wichtiger: wie findet man sie wieder? Viele Informationen liegen schon verstreut in verschiedenen IT-Systemen \u2013 wie vernetzt man diese? Wir wollen in diesem Beitrag [<a href=\"https:\/\/blog.c-rex.net\/posts\/3.html\">&#8230;mehr<\/a>]<\/p>\n<\/blockquote>\n<h3>SQUIDDS &#8211; ein Beispiel<\/h3>\n<p>Wir wollen anhand der Firma SENNHEISER, die bereits den Weg zur Smart-Information eingeschlagen hat, aufzeigen, wie strukturierte und vernetzte Informationen mit Hilfe von SVG in eine responsive HTML5- Ausgabe f\u00fcr die firmeneigene App eingebettet wurde.<\/p>\n<h3>Smart-Information mit SVG<\/h3>\n<p>Anhand der Verwendung von SVG (Scalable Vector Graphics) soll aufgezeigt werden, wie komplexer werdende Prozesse zu einer sehr komfortablen und einfachen Bedienung des Anwenders f\u00fchren.<br>Was bedeutet SVG, welche Funktionen beinhaltet es, wie damit umgehen, informieren Sie sich <a href=\"http:\/\/bit.ly\/wasisteinsvg\">hier<\/a>.<\/p>\n<h3>Hintergrund<\/h3>\n<p>Fr\u00fchere Grafik-Formate (EPS, AI, \u2026) kennen keine mehrsprachige Beschriftung. Als Resultat verwaltet der Redakteur die Sprachausgaben der Grafik in so vielen Dateien, wie es Sprachen gibt. Ein umst\u00e4ndliches Handling in der Verwaltung und im \u00c4nderungsdienst ist die Folge. Diese gro\u00dfe Menge unterschiedlicher, einzigartiger Grafik-Dateien, die meist auch noch vom aktuellen Stand der Konstruktion unabh\u00e4ngig gespeichert wurden, werden in hierarchischen Ordnern mit kryptischen Bezeichnungen verwaltet und getrennt nach AI oder 3D konvertiert, je nach Output.<\/p>\n<p>In der Grafik ein Beispiel f\u00fcr verschiedene Ausgaben f\u00fcr den Druck, drei&nbsp; Sprachen und mehreren Versionen.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-5040 size-full\" src=\"http:\/\/www.workflowblog.de\/wp-content\/uploads\/2020\/07\/eps.png\" alt=\"\" width=\"742\" height=\"397\" srcset=\"https:\/\/www.workflowblog.de\/wp-content\/uploads\/2020\/07\/eps.png 742w, https:\/\/www.workflowblog.de\/wp-content\/uploads\/2020\/07\/eps-300x161.png 300w, https:\/\/www.workflowblog.de\/wp-content\/uploads\/2020\/07\/eps-500x268.png 500w\" sizes=\"(max-width: 742px) 100vw, 742px\" \/><\/p>\n<p><span style=\"display: inline !important; float: none; background-color: #ffffff; color: #191e23; font-family: 'Noto Serif'; font-size: inherit; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; line-height: inherit; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: pre-wrap; word-spacing: 0px;\"><strong>FAZIT<\/strong>: Zwei Grafikformate zur Erstellung und f\u00fcr die Ausgabe zu pflegen und das in verschiedenen Sprachen, Versionen und Aktualisierungszust\u00e4nden zu verwalten und abzulegen, bedarf es eines enormen Aufwandes mit nicht unerheblichen Zeitfaktor.<\/span><br data-rich-text-line-break=\"true\"><span style=\"display: inline !important; float: none; background-color: #ffffff; color: #191e23; font-family: 'Noto Serif'; font-size: inherit; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; line-height: inherit; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: pre-wrap; word-spacing: 0px;\">Daher ist es notwendig diese Informationen zusammenzuf\u00fchren und mit Metadaten zu versehen.<\/span><\/p>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Mehrsprachigkeit und Meta-Information<\/h3>\n\n\n\n<p>Von der Anwendersicht aus betrachtet, gerade bei mobilen Anwendungen, haben wir mit Smart-Information zwei wichtige Schnittstellen f\u00fcr die Anwendung von SVG identifiziert:<br>Das ist zum einen die <strong>Sprachverwaltung <\/strong>und neu dazu kommen Funktionen, die mit <strong>Aktionen <\/strong>verkn\u00fcpft sind.<\/p>\n\n\n\n<p>Denn, das Ziel der Anwendungen muss es sein, den Nutzer einfach und schneller reagieren und verstehen zu lassen. Und diese Ansicht bedeutet auch, bisherige Prozesse umfassend neu zu \u00fcberdenken. Ja, die Dokumentation soll auch ganz neu aufgestellt werden.<\/p>\n\n\n\n<p>F\u00fcr diese Vielfalt an Informationen ist das SVG-Format bestens geeignet:<\/p>\n\n\n\n<ol type=\"1\"><li><strong>SVG<\/strong> wird <strong>f\u00fcr alle Vektorgrafikformate<\/strong> eingef\u00fchrt.<br>Das bedeutet, es gibt <strong>EINE Datei<\/strong> f\u00fcr die Grafikerstellung und die Ausgabe (z.B. Druckausgabe).<\/li><li><strong>Sprache <\/strong>wird in der SVG-Grafik <strong>in Layern<\/strong> verwaltet.<br>Das bedeutet, alle ben\u00f6tigten Sprachen werden in einer Datei hinterlegt.<\/li><li>SVG-Grafiken k\u00f6nnen <strong>per Hotspot Aktionen<\/strong> ausf\u00fchren.<br>Das bedeutet, aktive Bereiche (oder auch die komplette Grafik) verbinden kontextsensitiv zu weiteren Informationsquellen oder f\u00fchren Funktionen aus, die lokal erscheinen.<br>Die Grafik zeigt eine lokale Aktion nach Klick auf ein Bildbestandteil.<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"377\" height=\"346\" src=\"http:\/\/www.workflowblog.de\/wp-content\/uploads\/2020\/07\/image-9.png\" alt=\"\" class=\"wp-image-5042\" srcset=\"https:\/\/www.workflowblog.de\/wp-content\/uploads\/2020\/07\/image-9.png 377w, https:\/\/www.workflowblog.de\/wp-content\/uploads\/2020\/07\/image-9-300x275.png 300w, https:\/\/www.workflowblog.de\/wp-content\/uploads\/2020\/07\/image-9-327x300.png 327w\" sizes=\"(max-width: 377px) 100vw, 377px\" \/><\/figure>\n\n\n\n<p><a href=\"http:\/\/sennheiser-sites.com\/responsive-manuals\/XSWD\/EN\/index.html#page\/XSW-D\/XSW_Digital_02_Lavalier_Set_EN.03.1.html#ww1061195\">Hier<\/a> geht es zum LIVE-Beispiel.<\/p>\n\n\n\n<p><strong>FAZIT<\/strong>: Durch das XML-basierte SVG-Format lassen sich eine Reihe von Schnittstellen verbinden, die dem Anweder gro\u00dfe Vorteile bieten.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Zusammenfassung: Was macht ein SVG intelligent?<\/h3>\n\n\n\n<ul><li>Nachdem sich in den letzten Jahren HTML5-f\u00e4hige Browser durchgesetzt haben, k\u00f6nnen Sie die <strong>SVG direkt in HTML-Code einbetten<\/strong>.<br>Mit verschiedenen Elementen (img und object) oder \u00fcber CSS k\u00f6nnen <strong>SVG-Grafiken je nach Funktion eingebunden und formatiert werden<\/strong>.<\/li><li>Durch die Verwendung von Elementen wie title und desc k\u00f6nnen <strong>Metadaten hinterlegt werden<\/strong>, die Screenreadern semantische Hinweise zu den Grafiken geben k\u00f6nnen und so die Zug\u00e4nglichkeit erh\u00f6hen.<\/li><li>Es ist in SVG m\u00f6glich, fremde <strong>Multimedia-Objekte und andere XML-<\/strong>Dialekte einzubinden und dann als Grafik-Objekte zu transformieren, zu animieren oder mit Filtern zu ver\u00e4ndern.<\/li><li><strong>SVG-Inhalte sind durchsuchbar<\/strong>. Benutzt ein Anwender die Volltextsuche werden ihm die richtigen Informationen aus der Grafik sofort angezeigt.<\/li><li>Zusatzinformationen, also <strong>Metadaten<\/strong>, wie Version, Beschriftung, Sprachen werden getrennt zur eigentlichen 2D- Geometrie verwaltet. Zur Laufzeit der Ver\u00f6ffentlichung werden im Backend die mehrsprachigen SVG zusammengef\u00fchrt.<\/li><\/ul>\n\n\n\n<p><strong>FAZIT<\/strong>: Entscheiden wir uns \u00dcbermorgen sogar f\u00fcr 3D-Dateien anstelle von SVG, sind wir in der Lage noch mehr Schnittstellen im Backend zu verkn\u00fcpfen, was f\u00fcr den Anwender noch mehr Vorteile bei der Bedienung und im Informationsgehalt haben wird.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ein Blogbeitrag von Frau Maxi Fetsch &#8211; c-rex.net: Mit Technik zum Ziel \u201eSmart-Information ist f\u00fcr jeden Nutzer zu jeder Zeit an jedem Ort f\u00fcr jeden Kontext verwertbar, ohne dass der Informationslieferant das bei der Erstellung ber\u00fccksichtigt hat.\u201c lautet das erkl\u00e4rte &hellip; <a href=\"https:\/\/www.workflowblog.de\/?p=4990\">Weiterlesen <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":5,"featured_media":4964,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_s2mail":"","jetpack_post_was_ever_published":false,"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true},"categories":[517],"tags":[542,590,567,591,526,569,486],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.workflowblog.de\/wp-content\/uploads\/2020\/04\/Logo_final_92x92px.png","jetpack_shortlink":"https:\/\/wp.me\/p3kBRH-1iu","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=\/wp\/v2\/posts\/4990"}],"collection":[{"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4990"}],"version-history":[{"count":24,"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=\/wp\/v2\/posts\/4990\/revisions"}],"predecessor-version":[{"id":5053,"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=\/wp\/v2\/posts\/4990\/revisions\/5053"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=\/wp\/v2\/media\/4964"}],"wp:attachment":[{"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4990"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4990"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4990"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}