{"id":8705,"date":"2019-03-27T12:20:41","date_gmt":"2019-03-27T12:20:41","guid":{"rendered":"https:\/\/pluspol-website-live.pluspol-networks.de\/?p=8705"},"modified":"2024-01-30T15:55:42","modified_gmt":"2024-01-30T15:55:42","slug":"enviam-smart-grid-intelligentes-stromnetz-mit-reactjs","status":"publish","type":"post","link":"https:\/\/www.pluspol-interactive.de\/artikel\/enviam-smart-grid-intelligentes-stromnetz-mit-reactjs\/","title":{"rendered":"Das enviaM Smart Grid: Visualisierung eines intelligenten Stromnetzes mit ReactJS"},"content":{"rendered":"[vc_row type=“in_container“ full_screen_row_position=“middle“ column_margin=“default“ column_direction=“default“ column_direction_tablet=“default“ column_direction_phone=“default“ scene_position=“center“ text_color=“dark“ text_align=“left“ row_border_radius=“none“ row_border_radius_applies=“bg“ overflow=“visible“ overlay_strength=“0.3″ gradient_direction=“left_to_right“ shape_divider_position=“bottom“ bg_image_animation=“none“][vc_column column_padding=“no-extra-padding“ column_padding_tablet=“inherit“ column_padding_phone=“inherit“ column_padding_position=“all“ column_element_direction_desktop=“default“ column_element_spacing=“default“ desktop_text_alignment=“default“ tablet_text_alignment=“default“ phone_text_alignment=“default“ background_color_opacity=“1″ background_hover_color_opacity=“1″ column_backdrop_filter=“none“ column_shadow=“none“ column_border_radius=“none“ column_link_target=“_self“ column_position=“default“ gradient_direction=“left_to_right“ overlay_strength=“0.3″ width=“1\/1″ tablet_width_inherit=“default“ animation_type=“default“ bg_image_animation=“none“ border_type=“simple“ column_border_width=“none“ column_border_style=“solid“][vc_column_text]F\u00fcr unseren Kunden enviaM haben wir mit ReactJS ein Smart Grid visualisiert, eine interaktive Infografik, die zeigt, wie ein Datenaustausch zwischen Energieerzeugern, Energieverbrauchern und Energiespeichern stattfindet. Unser Entwickler Stefan war an der Umsetzung beteiligt und erl\u00e4utert die inhaltlichen und technischen Hintergr\u00fcnde.[\/vc_column_text][\/vc_column][\/vc_row][vc_row type=“in_container“ full_screen_row_position=“middle“ column_margin=“default“ column_direction=“default“ column_direction_tablet=“default“ column_direction_phone=“default“ scene_position=“center“ text_color=“dark“ text_align=“left“ row_border_radius=“none“ row_border_radius_applies=“bg“ overflow=“visible“ overlay_strength=“0.3″ gradient_direction=“left_to_right“ shape_divider_position=“bottom“ bg_image_animation=“none“][vc_column column_padding=“no-extra-padding“ column_padding_tablet=“inherit“ column_padding_phone=“inherit“ column_padding_position=“all“ column_element_direction_desktop=“default“ column_element_spacing=“default“ desktop_text_alignment=“default“ tablet_text_alignment=“default“ phone_text_alignment=“default“ background_color_opacity=“1″ background_hover_color_opacity=“1″ column_backdrop_filter=“none“ column_shadow=“none“ column_border_radius=“none“ column_link_target=“_self“ column_position=“default“ gradient_direction=“left_to_right“ overlay_strength=“0.3″ width=“1\/1″ tablet_width_inherit=“default“ animation_type=“default“ bg_image_animation=“none“ border_type=“simple“ column_border_width=“none“ column_border_style=“solid“][vc_column_text]Neben weit verbreiteten Produkten wie TYPO3<\/a> und WordPress<\/a> bieten wir bei PLUSPOL auch eigene, teils hoch individualisierte L\u00f6sungen f\u00fcr unsere Kunden an. Das kann mal eine Messe-Anwendung, ein Spiel oder eine mobile App, aber auch ein Vertriebstool, eine Produktdatenbank oder eine interaktive Infografik sein. Ich m\u00f6chte an dieser Stelle eine L\u00f6sung vorstellen, die wir f\u00fcr unseren Kunden enviaM entwickelt haben.<\/p>\n

Mit moderner Energieversorgung wird h\u00e4ufig der Begriff\u00a0Smart Grid<\/em>\u00a0in Verbindung gebracht. Ein sogenanntes\u00a0Smart Grid\u00a0<\/em>ist ein intelligentes Stromnetz, in dem es verschiedene Erzeuger sowie Verbraucher und Speicher gibt. Die Art der Erzeuger reicht von gro\u00dfen Kraftwerken \u00fcber erneuerbare Energien bis hin zu Verbrauchern, die ihrerseits Strom z.B. \u00fcber eine Solaranlage erzeugen.\u00a0\u200d<\/strong><\/p>\n

Visualisierung des Smart Grids<\/strong>\u200d<\/h2>\n

Unser Beitrag f\u00fcr enviaM ist eine interaktive Infografik, die wir konzipiert, gestaltet und umgesetzt haben. Unser Ansatz war, das Smart Grid nicht kreis- oder sternf\u00f6rmig abzubilden, sondern wie ein richtiges Netz, dezentral mit gleichberechtigten Teilnehmern, \u00e4hnlich wie das Internet. Da wir in der Bedienung auf Zooms setzten und somit keine Pixelgrafiken verwenden wollten, wurden s\u00e4mtliche Grafiken im Adobe Illustrator als Vektorgrafiken gestaltet. Dadurch war es uns m\u00f6glich, die Grafiken als\u00a0SVGs<\/a>\u00a0zu integrieren. Binnen kurzer Zeit konnten wir daraus mit Hilfe von\u00a0ReactJS<\/a>\u00a0ein ansprechendes Ergebnis erzielen, das man sich im\u00a0Corporate Portal der enviaM-Gruppe<\/a>\u00a0anschauen kann.<\/p>\n

\"Illustration<\/a>

Illustration des enviaM Smart Grid. Die interaktive Grafik kann im Corporate Portal der enviaM-Gruppe eingesehen werden.<\/p><\/div>\n

Eingesetzte Web-Technologien und Werkzeuge<\/strong>\u200d<\/h2>\n

Das Endprodukt ist eine Kombination aus modernen Web-Technologien und Werkzeugen. Darunter z\u00e4hlen neben SVGs und ReactJS auch CSS-Animationen, TypeScript und Webpack. Sind die SVGs in geeigneter Form aus Illustrator exportiert, lassen sie sich sehr einfach mit Hilfe von Webpack in ReactJS integrieren. Webpack dient hier zur Zusammenf\u00fchrung der einzelnen Ressourcen. TypeScript hilft uns dabei, viele Programmierfehler schon im Voraus zu erkennen und zu beheben. Sobald alles strukturell und funktionell steht, kommen die CSS-Animationen hinzu. Dadurch, dass sich die SVGs sehr einfach inline (d.h. das komplette SVG-Markup wird im HTML-Baum abgebildet) einbinden lassen, k\u00f6nnen einzelne Bestandteile davon gezielt animiert werden.<\/p>\n

\"Mockup

Responsive Darstellung eines Ausschnitts aus der enviaM Smart Grid Visualisierung. Per Zoom-Funktion kann der User ein Element \u00f6ffnen und erh\u00e4lt weitere Informationen.<\/p><\/div>\n

Mit spannenden Infografiken und Animationen Nutzererlebnisse schaffen<\/strong><\/h2>\n

Mit dem Smart Grid konnten wir f\u00fcr enviaM einen attraktiven, nutzerfreundlichen Inhalt erstellen, der sich gut mit dem bestehenden Informationsangebot des Unternehmens erg\u00e4nzt. Dabei profitiert der Kunde von unserer langj\u00e4hrigen Erfahrung mit Web-Animationen. Dieser Ansatz und unsere Expertise sind f\u00fcr s\u00e4mtliche Infotainment Einsatzzwecke denkbar, in denen komplexe Zusammenh\u00e4nge oder einfach nur Wissen vermittelt werden muss, wie z.B. in der Medizin, Technik oder Beratung. Generell lassen sich Animationen nutzen, um Webseiten attraktiver zu gestalten, das Nutzererlebnis zu bereichern und somit die nachhaltige Verwendung der Web-Angebote unserer Kunden zu st\u00e4rken.<\/p>\n

Das von PLUSPOL interactive f\u00fcr enviaM visualisierte Smart Grid, sowie eine umfangreichere Erkl\u00e4rung zum Thema intelligente Netze finden sich im entsprechenden Artikel im\u00a0enviaM Corporate Portal<\/a>.<\/p>\n

Sollten Sie Interesse an einer Infografik oder einer anderen Individuall\u00f6sung haben, die die Inhalte Ihrer Website noch st\u00e4rker hervorhebt,\u00a0<\/strong>melden Sie sich einfach bei uns – wir beraten Sie gern<\/strong><\/a>!<\/strong>[\/vc_column_text][\/vc_column][\/vc_row]\n","protected":false},"excerpt":{"rendered":"

[vc_row type=“in_container“ full_screen_row_position=“middle“ column_margin=“default“ column_direction=“default“ column_direction_tablet=“default“ column_direction_phone=“default“ scene_position=“center“ text_color=“dark“ text_align=“left“ row_border_radius=“none“ row_border_radius_applies=“bg“ overflow=“visible“ overlay_strength=“0.3″ gradient_direction=“left_to_right“ shape_divider_position=“bottom“ bg_image_animation=“none“][vc_column column_padding=“no-extra-padding“ column_padding_tablet=“inherit“ column_padding_phone=“inherit“ column_padding_position=“all“ column_element_direction_desktop=“default“ column_element_spacing=“default“ desktop_text_alignment=“default“ tablet_text_alignment=“default“ phone_text_alignment=“default“ background_color_opacity=“1″ background_hover_color_opacity=“1″ column_backdrop_filter=“none“ column_shadow=“none“…<\/p>\n","protected":false},"author":3,"featured_media":8706,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[2],"tags":[],"acf":[],"yoast_head":"\nDas enviaM Smart Grid: Visualisierung eines intelligenten Stromnetzes mit ReactJS - PLUSPOL interactive<\/title>\n<meta name=\"description\" content=\"F\u00fcr unseren Kunden enviaM haben wir mit ReactJS ein Smart Grid visualisiert. Stefan erl\u00e4utert die inhaltlichen und technischen Hintergr\u00fcnde.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.pluspol-interactive.de\/artikel\/enviam-smart-grid-intelligentes-stromnetz-mit-reactjs\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Das enviaM Smart Grid: Visualisierung eines intelligenten Stromnetzes mit ReactJS - PLUSPOL interactive\" \/>\n<meta property=\"og:description\" content=\"F\u00fcr unseren Kunden enviaM haben wir mit ReactJS ein Smart Grid visualisiert. Stefan erl\u00e4utert die inhaltlichen und technischen Hintergr\u00fcnde.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.pluspol-interactive.de\/artikel\/enviam-smart-grid-intelligentes-stromnetz-mit-reactjs\/\" \/>\n<meta property=\"og:site_name\" content=\"PLUSPOL interactive\" \/>\n<meta property=\"article:published_time\" content=\"2019-03-27T12:20:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-30T15:55:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.pluspol-interactive.de\/wp-content\/uploads\/2023\/12\/enviaM-Smart-Grid.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"isensee\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"isensee\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.pluspol-interactive.de\/artikel\/enviam-smart-grid-intelligentes-stromnetz-mit-reactjs\/\",\"url\":\"https:\/\/www.pluspol-interactive.de\/artikel\/enviam-smart-grid-intelligentes-stromnetz-mit-reactjs\/\",\"name\":\"Das enviaM Smart Grid: Visualisierung eines intelligenten Stromnetzes mit ReactJS - PLUSPOL interactive\",\"isPartOf\":{\"@id\":\"https:\/\/www.pluspol-interactive.de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.pluspol-interactive.de\/artikel\/enviam-smart-grid-intelligentes-stromnetz-mit-reactjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.pluspol-interactive.de\/artikel\/enviam-smart-grid-intelligentes-stromnetz-mit-reactjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.pluspol-interactive.de\/wp-content\/uploads\/2023\/12\/enviaM-Smart-Grid.jpeg\",\"datePublished\":\"2019-03-27T12:20:41+00:00\",\"dateModified\":\"2024-01-30T15:55:42+00:00\",\"author\":{\"@id\":\"https:\/\/www.pluspol-interactive.de\/#\/schema\/person\/c69b0fe9d37233384a437523bf3d9d06\"},\"description\":\"F\u00fcr unseren Kunden enviaM haben wir mit ReactJS ein Smart Grid visualisiert. Stefan erl\u00e4utert die inhaltlichen und technischen Hintergr\u00fcnde.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.pluspol-interactive.de\/artikel\/enviam-smart-grid-intelligentes-stromnetz-mit-reactjs\/#breadcrumb\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.pluspol-interactive.de\/artikel\/enviam-smart-grid-intelligentes-stromnetz-mit-reactjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/www.pluspol-interactive.de\/artikel\/enviam-smart-grid-intelligentes-stromnetz-mit-reactjs\/#primaryimage\",\"url\":\"https:\/\/www.pluspol-interactive.de\/wp-content\/uploads\/2023\/12\/enviaM-Smart-Grid.jpeg\",\"contentUrl\":\"https:\/\/www.pluspol-interactive.de\/wp-content\/uploads\/2023\/12\/enviaM-Smart-Grid.jpeg\",\"width\":1100,\"height\":600,\"caption\":\"enviaM Smart Grid\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.pluspol-interactive.de\/artikel\/enviam-smart-grid-intelligentes-stromnetz-mit-reactjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\/\/www.pluspol-interactive.de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Das enviaM Smart Grid: Visualisierung eines intelligenten Stromnetzes mit ReactJS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.pluspol-interactive.de\/#website\",\"url\":\"https:\/\/www.pluspol-interactive.de\/\",\"name\":\"PLUSPOL interactive\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.pluspol-interactive.de\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.pluspol-interactive.de\/#\/schema\/person\/c69b0fe9d37233384a437523bf3d9d06\",\"name\":\"isensee\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Das enviaM Smart Grid: Visualisierung eines intelligenten Stromnetzes mit ReactJS - PLUSPOL interactive","description":"F\u00fcr unseren Kunden enviaM haben wir mit ReactJS ein Smart Grid visualisiert. Stefan erl\u00e4utert die inhaltlichen und technischen Hintergr\u00fcnde.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.pluspol-interactive.de\/artikel\/enviam-smart-grid-intelligentes-stromnetz-mit-reactjs\/","og_locale":"de_DE","og_type":"article","og_title":"Das enviaM Smart Grid: Visualisierung eines intelligenten Stromnetzes mit ReactJS - PLUSPOL interactive","og_description":"F\u00fcr unseren Kunden enviaM haben wir mit ReactJS ein Smart Grid visualisiert. Stefan erl\u00e4utert die inhaltlichen und technischen Hintergr\u00fcnde.","og_url":"https:\/\/www.pluspol-interactive.de\/artikel\/enviam-smart-grid-intelligentes-stromnetz-mit-reactjs\/","og_site_name":"PLUSPOL interactive","article_published_time":"2019-03-27T12:20:41+00:00","article_modified_time":"2024-01-30T15:55:42+00:00","og_image":[{"width":1100,"height":600,"url":"https:\/\/www.pluspol-interactive.de\/wp-content\/uploads\/2023\/12\/enviaM-Smart-Grid.jpeg","type":"image\/jpeg"}],"author":"isensee","twitter_card":"summary_large_image","twitter_misc":{"Verfasst von":"isensee","Gesch\u00e4tzte Lesezeit":"5 Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.pluspol-interactive.de\/artikel\/enviam-smart-grid-intelligentes-stromnetz-mit-reactjs\/","url":"https:\/\/www.pluspol-interactive.de\/artikel\/enviam-smart-grid-intelligentes-stromnetz-mit-reactjs\/","name":"Das enviaM Smart Grid: Visualisierung eines intelligenten Stromnetzes mit ReactJS - PLUSPOL interactive","isPartOf":{"@id":"https:\/\/www.pluspol-interactive.de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.pluspol-interactive.de\/artikel\/enviam-smart-grid-intelligentes-stromnetz-mit-reactjs\/#primaryimage"},"image":{"@id":"https:\/\/www.pluspol-interactive.de\/artikel\/enviam-smart-grid-intelligentes-stromnetz-mit-reactjs\/#primaryimage"},"thumbnailUrl":"https:\/\/www.pluspol-interactive.de\/wp-content\/uploads\/2023\/12\/enviaM-Smart-Grid.jpeg","datePublished":"2019-03-27T12:20:41+00:00","dateModified":"2024-01-30T15:55:42+00:00","author":{"@id":"https:\/\/www.pluspol-interactive.de\/#\/schema\/person\/c69b0fe9d37233384a437523bf3d9d06"},"description":"F\u00fcr unseren Kunden enviaM haben wir mit ReactJS ein Smart Grid visualisiert. Stefan erl\u00e4utert die inhaltlichen und technischen Hintergr\u00fcnde.","breadcrumb":{"@id":"https:\/\/www.pluspol-interactive.de\/artikel\/enviam-smart-grid-intelligentes-stromnetz-mit-reactjs\/#breadcrumb"},"inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.pluspol-interactive.de\/artikel\/enviam-smart-grid-intelligentes-stromnetz-mit-reactjs\/"]}]},{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/www.pluspol-interactive.de\/artikel\/enviam-smart-grid-intelligentes-stromnetz-mit-reactjs\/#primaryimage","url":"https:\/\/www.pluspol-interactive.de\/wp-content\/uploads\/2023\/12\/enviaM-Smart-Grid.jpeg","contentUrl":"https:\/\/www.pluspol-interactive.de\/wp-content\/uploads\/2023\/12\/enviaM-Smart-Grid.jpeg","width":1100,"height":600,"caption":"enviaM Smart Grid"},{"@type":"BreadcrumbList","@id":"https:\/\/www.pluspol-interactive.de\/artikel\/enviam-smart-grid-intelligentes-stromnetz-mit-reactjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/www.pluspol-interactive.de\/"},{"@type":"ListItem","position":2,"name":"Das enviaM Smart Grid: Visualisierung eines intelligenten Stromnetzes mit ReactJS"}]},{"@type":"WebSite","@id":"https:\/\/www.pluspol-interactive.de\/#website","url":"https:\/\/www.pluspol-interactive.de\/","name":"PLUSPOL interactive","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.pluspol-interactive.de\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de-DE"},{"@type":"Person","@id":"https:\/\/www.pluspol-interactive.de\/#\/schema\/person\/c69b0fe9d37233384a437523bf3d9d06","name":"isensee"}]}},"_links":{"self":[{"href":"https:\/\/www.pluspol-interactive.de\/wp-json\/wp\/v2\/posts\/8705"}],"collection":[{"href":"https:\/\/www.pluspol-interactive.de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pluspol-interactive.de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pluspol-interactive.de\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pluspol-interactive.de\/wp-json\/wp\/v2\/comments?post=8705"}],"version-history":[{"count":5,"href":"https:\/\/www.pluspol-interactive.de\/wp-json\/wp\/v2\/posts\/8705\/revisions"}],"predecessor-version":[{"id":9397,"href":"https:\/\/www.pluspol-interactive.de\/wp-json\/wp\/v2\/posts\/8705\/revisions\/9397"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.pluspol-interactive.de\/wp-json\/wp\/v2\/media\/8706"}],"wp:attachment":[{"href":"https:\/\/www.pluspol-interactive.de\/wp-json\/wp\/v2\/media?parent=8705"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pluspol-interactive.de\/wp-json\/wp\/v2\/categories?post=8705"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pluspol-interactive.de\/wp-json\/wp\/v2\/tags?post=8705"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}