{"id":31543,"date":"2025-06-16T06:17:45","date_gmt":"2025-06-16T08:17:45","guid":{"rendered":"https:\/\/bernhardherzog.com\/de\/?p=31543"},"modified":"2025-06-16T19:55:44","modified_gmt":"2025-06-16T21:55:44","slug":"coloring","status":"publish","type":"post","link":"https:\/\/bernhardherzog.com\/de\/coloring\/","title":{"rendered":"Malbuch &#8211; online und offline"},"content":{"rendered":"\n<p>Ich habe ein interaktives Malbuch f\u00fcr Kinder entwickelt, das sowohl online als auch offline verf\u00fcgbar ist. Die <strong>Online-Version<\/strong> erm\u00f6glicht mehreren Personen das gleichzeitige Ausmalen eines Bildes \u2013 ideal f\u00fcr gemeinsames Zeichnen mit Freunden oder Eltern. Die <strong>Offline-Version<\/strong> ist als digitales PDF-Produkt konzipiert und eignet sich besonders f\u00fcr kleinere Kinder, bei denen Bildschirmzeit vermieden werden soll.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">Online-Version<\/h2>\n\n\n\n<p>Die Online-Version steht auf der Website <a href=\"https:\/\/stadtpiraten.at\" target=\"_blank\" rel=\"noreferrer noopener\">stadtpiraten.at<\/a> zur Verf\u00fcgung.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e52236d76ae&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e52236d76ae\" class=\"wp-block-image size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"908\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/bernhardherzog.com\/de\/wp-content\/uploads\/sites\/2\/2025\/06\/1000140685-1024x908.jpg\" alt=\"\" class=\"wp-image-31557\" srcset=\"https:\/\/bernhardherzog.com\/de\/wp-content\/uploads\/sites\/2\/2025\/06\/1000140685-1024x908.jpg 1024w, https:\/\/bernhardherzog.com\/de\/wp-content\/uploads\/sites\/2\/2025\/06\/1000140685-300x266.jpg 300w, https:\/\/bernhardherzog.com\/de\/wp-content\/uploads\/sites\/2\/2025\/06\/1000140685-768x681.jpg 768w, https:\/\/bernhardherzog.com\/de\/wp-content\/uploads\/sites\/2\/2025\/06\/1000140685.jpg 1440w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Vergr\u00f6\u00dfern\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>Sie ist f\u00fcr mobile Endger\u00e4te optimiert (responsiv) und l\u00e4sst sich mit Stift, Finger oder Maus bedienen.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e52236d7ae1&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e52236d7ae1\" class=\"wp-block-image alignwide size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"371\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/bernhardherzog.com\/de\/wp-content\/uploads\/sites\/2\/2025\/06\/1000140683-1024x371.jpg\" alt=\"\" class=\"wp-image-31558\" srcset=\"https:\/\/bernhardherzog.com\/de\/wp-content\/uploads\/sites\/2\/2025\/06\/1000140683-1024x371.jpg 1024w, https:\/\/bernhardherzog.com\/de\/wp-content\/uploads\/sites\/2\/2025\/06\/1000140683-300x109.jpg 300w, https:\/\/bernhardherzog.com\/de\/wp-content\/uploads\/sites\/2\/2025\/06\/1000140683-768x278.jpg 768w, https:\/\/bernhardherzog.com\/de\/wp-content\/uploads\/sites\/2\/2025\/06\/1000140683-1536x556.jpg 1536w, https:\/\/bernhardherzog.com\/de\/wp-content\/uploads\/sites\/2\/2025\/06\/1000140683-2048x742.jpg 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Vergr\u00f6\u00dfern\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>Hauptfunktionen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Gleichzeitiges Ausmalen durch mehrere Personen in Echtzeit: Bild teilen f\u00fcr gemeinsames Zeichnen<\/li>\n\n\n\n<li>Ausmalhilfe durch automatische Maskierung einzelner Bereiche<\/li>\n\n\n\n<li>Pinch-to-Zoom f\u00fcr einfaches Vergr\u00f6\u00dfern<\/li>\n\n\n\n<li>Vollbildmodus f\u00fcr konzentriertes Arbeiten<\/li>\n\n\n\n<li>Info-Modus mit Titel, Beschreibung und farbigem Beispielbild<\/li>\n\n\n\n<li>Pipette, um Farben direkt aus dem Bild aufzunehmen<\/li>\n\n\n\n<li>Farbpalette basierend auf der Vorlage, eigene Farben werden erg\u00e4nzt<\/li>\n\n\n\n<li>HSV-Farbw\u00e4hler<\/li>\n\n\n\n<li>Bearbeitungen werden automatisch am Server gespeichert<\/li>\n\n\n\n<li>Speichern und Schlie\u00dfen<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Offline-Version<\/h2>\n\n\n\n<p>Die Offline-Version ist als druckbares PDF erh\u00e4ltlich. Sie enth\u00e4lt die gleichen Ausmalbilder in Schwarz-Wei\u00df und kann beliebig oft gedruckt werden \u2013 ideal, wenn Kinder ein Bild mehrfach ausmalen m\u00f6chten.<\/p>\n\n\n\n<figure class=\"wp-block-video alignwide\"><video autoplay loop muted src=\"\/resources\/flipbook.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Technisches Realisierung<\/h2>\n\n\n\n<p>Online-Version:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Frontend: HTML5 mit Canvas (zum Malen) und SVG (f\u00fcr die Vorlagen) zum verlustfreien Vergr\u00f6\u00dfern <\/li>\n\n\n\n<li>Build-Tool: Vite f\u00fcr effiziente Entwicklung und kompakte Auslieferung<\/li>\n\n\n\n<li>Backend: Node.js mit WebSockets f\u00fcr Echtzeit-Kommunikation<\/li>\n\n\n\n<li>Integration: Einbindung via Reverse Proxy in die bestehende WordPress-Seite<\/li>\n\n\n\n<li>Admin Interface: Authentifizierung \u00fcber WordPress (als Proxy)<\/li>\n\n\n\n<li>Illustrationen: mit Adobe Illustrator realisiert<\/li>\n<\/ul>\n\n\n\n<p>Umsetzung der Offline-Version (Malbuch)<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>PDF-Generierung aus Bild-Metadaten (Titel, Beschreibung) und Vorlagen<\/li>\n\n\n\n<li>Automatisierte Mockup-Erstellung mit Python und Blender aus Einzelbildern<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Fazit<\/h2>\n\n\n\n<p>Was denkt ihr \u00fcber dieses Projekt? Postet in den Kommentaren!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ich habe ein interaktives Malbuch f\u00fcr Kinder entwickelt, das sowohl online als auch offline verf\u00fcgbar ist. Die Online-Version erm\u00f6glicht mehreren Personen das gleichzeitige Ausmalen eines Bildes \u2013 ideal f\u00fcr gemeinsames Zeichnen mit Freunden oder Eltern. Die Offline-Version ist als digitales PDF-Produkt konzipiert und eignet sich besonders f\u00fcr kleinere Kinder, bei denen Bildschirmzeit vermieden werden soll.<\/p>\n","protected":false},"author":1,"featured_media":31562,"comment_status":"open","ping_status":"open","sticky":true,"template":"job","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[39],"tags":[],"class_list":["post-31543","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-intern"],"_links":{"self":[{"href":"https:\/\/bernhardherzog.com\/de\/wp-json\/wp\/v2\/posts\/31543","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bernhardherzog.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bernhardherzog.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bernhardherzog.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bernhardherzog.com\/de\/wp-json\/wp\/v2\/comments?post=31543"}],"version-history":[{"count":22,"href":"https:\/\/bernhardherzog.com\/de\/wp-json\/wp\/v2\/posts\/31543\/revisions"}],"predecessor-version":[{"id":31572,"href":"https:\/\/bernhardherzog.com\/de\/wp-json\/wp\/v2\/posts\/31543\/revisions\/31572"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bernhardherzog.com\/de\/wp-json\/wp\/v2\/media\/31562"}],"wp:attachment":[{"href":"https:\/\/bernhardherzog.com\/de\/wp-json\/wp\/v2\/media?parent=31543"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bernhardherzog.com\/de\/wp-json\/wp\/v2\/categories?post=31543"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bernhardherzog.com\/de\/wp-json\/wp\/v2\/tags?post=31543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}