<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Beiträge von Manuel Hecht - Mobile USTP MKL</title>
	<atom:link href="https://mobile.fhstp.ac.at/author/it221515/feed/" rel="self" type="application/rss+xml" />
	<link>https://mobile.fhstp.ac.at/author/it221515/</link>
	<description>Die &#34;Mobile Forschungsgruppe&#34; der USTP, sie  sammelt hier alles zu den Themen Design, UX und Entwicklung mobiler Applikationen</description>
	<lastBuildDate>Mon, 16 Oct 2023 04:56:13 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	

<image>
	<url>https://mobile.fhstp.ac.at/wp-content/uploads/2025/03/icon-120x120.webp</url>
	<title>Beiträge von Manuel Hecht - Mobile USTP MKL</title>
	<link>https://mobile.fhstp.ac.at/author/it221515/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>ARFoundation mit Unity</title>
		<link>https://mobile.fhstp.ac.at/allgemein/arfoundation-mit-unity/</link>
		
		<dc:creator><![CDATA[Manuel Hecht]]></dc:creator>
		<pubDate>Mon, 16 Oct 2023 04:56:12 +0000</pubDate>
				<category><![CDATA[Allgemein]]></category>
		<guid isPermaLink="false">https://akirchknopf-21110.php.fhstp.cc/?p=11450</guid>

					<description><![CDATA[<p>Augmented Reality (AR) hat sich in raschem Tempo zu einer transformative Technologie entwickelt, die die Grenzen zwischen der digitalen und physischen Welt verwischt. Egal, ob Sie sich immersive Spielerlebnisse, interaktive Bildungs-Apps oder praktische Lösungen für Branchen wie Architektur und Gesundheitswesen vorstellen – AR hat das Potenzial, sie alle zu revolutionieren. Ein entscheidendes Werkzeug, um Entwickler <a class="read-more" href="https://mobile.fhstp.ac.at/allgemein/arfoundation-mit-unity/">[...]</a></p>
<p>The post <a href="https://mobile.fhstp.ac.at/allgemein/arfoundation-mit-unity/">ARFoundation mit Unity</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p></p>



<p></p>



<p>Augmented Reality (AR) hat sich in raschem Tempo zu einer transformative Technologie entwickelt, die die Grenzen zwischen der digitalen und physischen Welt verwischt. Egal, ob Sie sich immersive Spielerlebnisse, interaktive Bildungs-Apps oder praktische Lösungen für Branchen wie Architektur und Gesundheitswesen vorstellen – AR hat das Potenzial, sie alle zu revolutionieren. Ein entscheidendes Werkzeug, um Entwickler bei der Erstellung von AR-Anwendungen zu unterstützen, ist ARFoundation in Unity. In diesem Blogbeitrag werden wir uns mit der Welt von ARFoundation und Unity beschäftigen und deren Fähigkeiten, Vorteile und das unglaubliche Potenzial, das sie für die AR-Entwicklung bieten, erkunden.</p>



<p>Was ist ARFoundation?</p>



<p>ARFoundation ist ein leistungsstarkes Framework, das von Unity Technologies entwickelt wurde und Entwicklern ermöglicht, plattformübergreifende AR-Anwendungen sowohl für iOS- als auch für Android-Geräte zu erstellen. Es dient als Brücke zwischen der robusten Spieleentwicklungsumgebung von Unity und AR-Plattformen wie ARKit (iOS) und ARCore (Android). Durch die Nutzung von ARFoundation können Entwickler AR-Erlebnisse erstellen, die nahtlos auf verschiedenen Geräten funktionieren und die Fragmentierung, die oft mit der AR-App-Entwicklung verbunden ist, reduzieren.</p>



<p>Hauptmerkmale von ARFoundation</p>



<ol class="wp-block-list">
<li>Plattformübergreifende Kompatibilität:<br>ARFoundation abstrahiert die Unterschiede zwischen ARKit und ARCore und erleichtert so die Entwicklung von AR-Anwendungen, die auf beiden iOS- und Android-Geräten konsistent funktionieren. Diese plattformübergreifende Kompatibilität reduziert die Entwicklungszeit und ermöglicht es Entwicklern, ein breiteres Publikum zu erreichen.</li>



<li>Tracking der realen Welt:<br>ARFoundation bietet Zugriff auf Funktionen wie Bewegungsverfolgung, Umgebungserkennung und Ebenenerkennung. Dadurch können AR-Anwendungen virtuelle Objekte an die reale Welt anheften, sodass Benutzer mit ihnen interagieren können, als wären sie physisch vorhanden.</li>



<li>Geräteunterstützung:<br>ARFoundation unterstützt eine breite Palette von Geräten, von den neuesten Flaggschiff-Smartphones bis hin zu älteren Modellen. Dadurch wird sichergestellt, dass Ihre AR-App eine breite Benutzerbasis erreichen kann, was ihr Marktpotenzial erhöht.</li>



<li>Erweiterbarkeit:<br>Unity&#8217;s ARFoundation ist sehr erweiterbar und ermöglicht es Entwicklern, benutzerdefinierte AR-Lösungen zu erstellen, die ihren spezifischen Projektanforderungen entsprechen. Diese Flexibilität fördert Innovation und Kreativität in der AR-App-Entwicklung.</li>
</ol>



<p>Vorteile der Verwendung von ARFoundation mit Unity</p>



<ol class="wp-block-list">
<li>Bekannte Entwicklungsumgebung:<br>Unity ist eine beliebte Spieleentwicklungsumgebung, und viele Entwickler sind bereits mit ihrer Benutzeroberfläche und ihren Werkzeugen vertraut. Durch die Verwendung von ARFoundation innerhalb von Unity können Entwickler ihre vorhandenen Fähigkeiten nutzen, um AR-Erlebnisse zu erstellen, was die Einarbeitungszeit reduziert.</li>



<li>Reiche Ökosystem:<br>Unity verfügt über ein umfangreiches Ökosystem von Assets, Plugins und Ressourcen, die nahtlos in AR-Projekte integriert werden können. Dies erleichtert den Entwicklungsprozess und verbessert die Qualität von AR-Anwendungen.</li>



<li>Schnelle Prototypenerstellung:<br>Die Echtzeit-Rendering-Fähigkeiten von Unity ermöglichen es Entwicklern, AR-Konzepte schnell zu erstellen und zu überarbeiten, was den Entwicklungszyklus verkürzt und die Time-to-Market reduziert.</li>



<li>Gemeinschaftsunterstützung:<br>Unity verfügt über eine blühende Entwicklergemeinschaft, die ihr Wissen, Tutorials und Lösungen teilt. Dieses Unterstützungsnetzwerk kann unschätzbar sein, wenn Herausforderungen bei der AR-Entwicklung auftreten.</li>
</ol>



<p>Beispiele für ARFoundation-Anwendungen</p>



<ol class="wp-block-list">
<li>Spiele: Erstellen Sie immersive, standortbasierte AR-Spiele, die digitale Inhalte in die reale Welt einblenden.</li>



<li>Bildung: Entwickeln Sie interaktive Bildungs-Apps, die Geschichte, Wissenschaft und Kunst durch erweiterte Erlebnisse zum Leben erwecken.</li>



<li>Einzelhandel: Ermöglichen Sie es Kunden, Produkte in ihrer realen Umgebung zu visualisieren, bevor sie einen Kauf tätigen.</li>



<li>Gesundheitswesen: Bauen Sie AR-Anwendungen für medizinische Schulungen, Operationssimulationen und Patientenaufklärung.</li>
</ol>



<p></p>



<figure class="wp-block-image size-large is-resized"><img fetchpriority="high" decoding="async" width="1540" height="800" src="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/10/image-1540x800.jpg" alt="" class="wp-image-11452" style="aspect-ratio:1.925;width:840px;height:auto" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2023/10/image-1540x800.jpg 1540w, https://mobile.fhstp.ac.at/wp-content/uploads/2023/10/image-770x400.jpg 770w" sizes="(max-width: 1540px) 100vw, 1540px" /><figcaption class="wp-element-caption">Copyright Andreas Jakl (2021) &#8211; https://www.andreasjakl.com/ar-foundation-fundamentals-with-unity-part-1/</figcaption></figure>



<p><strong>Verständnis der AR Foundation in Unity</strong></p>



<p>Das Diagramm zeigt die Architektur der Entwicklung von Augmented und Virtual Reality (AR/VR) innerhalb des Unity-Frameworks und konzentriert sich dabei auf die AR Foundation.</p>



<ul class="wp-block-list">
<li><strong>Mixed and Augmented Reality Studio (MARS)</strong>:</li>
</ul>



<p>Ein fortschrittlicher Werkzeugkasten, der die Erstellung von AR-Erfahrungen erleichtert, die intelligent mit der realen Welt interagieren. MARS vereinfacht die Entwicklung von AR-Apps und stellt sicher, dass sie in einer Vielzahl von realen Szenarien funktionieren.</p>



<ul class="wp-block-list">
<li><strong>AR Foundation</strong>:</li>
</ul>



<p>Dient als Grundlage für die AR-Entwicklung in Unity. Sie bietet eine gemeinsame API, die auf mehreren AR-Geräten funktioniert, sodass Entwickler ihre AR-Apps einmal schreiben und auf verschiedenen Plattformen bereitstellen können.</p>



<ul class="wp-block-list">
<li><strong>XR Interaction Toolkit</strong>:</li>
</ul>



<p>Hierbei handelt es sich um einen Satz von Werkzeugen und Funktionalitäten, die es Entwicklern erleichtern, Interaktivität in AR/VR-Erlebnisse zu implementieren.</p>



<ul class="wp-block-list">
<li><strong>Developer Tools (Entwicklungswerkzeuge)</strong>:</li>
</ul>



<p>Dies sind zusätzliche Dienstprogramme und Tools, die Entwicklern helfen, ihre AR/VR-Anwendungen zu erstellen, zu testen und zu debuggen.</p>



<ul class="wp-block-list">
<li><strong>XR Subsystems</strong>:</li>
</ul>



<p>Dies sind die Kernfunktionen, die für AR/VR-Erlebnisse erforderlich sind:</p>



<ul class="wp-block-list">
<li><strong>Display &amp; Input</strong>: Die Grundlagen von visueller Ausgabe und Benutzereingabe.</li>



<li><strong>Environment (Umgebung)</strong>: Erkennt und interagiert mit der realen Umgebung.</li>



<li><strong>Faces (Gesichter)</strong>: Erkennt und verfolgt menschliche Gesichter.</li>



<li><strong>Raycast</strong>: Sendet Strahlen aus, um Schnittpunkte mit realen Objekten zu erkennen.</li>



<li><strong>Kamera, Ebenen, Bildverfolgung, Objektverfolgung und Netzwerk</strong>: Wesentliche Funktionen, damit AR mit der realen Welt und virtuellen Objekten interagieren kann.</li>
</ul>



<ul class="wp-block-list">
<li><strong>Unity XR SDK</strong>:</li>
</ul>



<ul class="wp-block-list">
<li>Die Softwareentwicklungs-Kits speziell für verschiedene AR-Plattformen. Sie ermöglichen es, AR Foundation Apps auf verschiedenen Geräten bereitzustellen.
<ul class="wp-block-list">
<li><strong>ARCore XR und ARKit XR</strong>: SDKs für Android- bzw. iOS-Plattformen.</li>



<li><strong>Oculus XR</strong>: Für Oculus-Geräte.</li>



<li><strong>Windows XR</strong>: Für Windows Mixed Reality-Geräte.</li>



<li><strong>Magic Leap</strong>: SDK für die Magic Leap-Plattform.</li>



<li><strong>VSP/3rd</strong>: Stellt Drittanbieter- oder andere benutzerdefinierte SDKs dar.</li>
</ul>
</li>
</ul>



<ol class="wp-block-list">
<li><strong>XR Plugin Framework und Anbieter (Provider)</strong>:</li>
</ol>



<ul class="wp-block-list">
<li>Dies ermöglicht Erweiterbarkeit und stellt sicher, dass Unity neue Funktionen oder Plattformen unterstützen kann, sobald sie auftauchen.</li>
</ul>



<p>Kurz gesagt, die AR Foundation fungiert als Brücke und ermöglicht es Entwicklern, AR-Erfahrungen zu schaffen, die auf verschiedenen Geräten und Plattformen bereitgestellt werden können, ohne ihre Anwendungen für jede einzelne Plattform neu schreiben zu müssen. Sie rationalisiert die AR-Entwicklung in Unity und gewährleistet einen effizienteren und einheitlichen Arbeitsablauf.</p>



<p>Fazit</p>



<p>ARFoundation in Unity ist ein Game-Changer für Entwickler, die die aufregende Welt der Augmented Reality erkunden möchten. Mit seiner plattformübergreifenden Kompatibilität, seinen Fähigkeiten zur Verfolgung der realen Welt und der Integration in das umfangreiche Ökosystem von Unity ermöglicht ARFoundation Entwicklern die Schaffung innovativer und fesselnder AR-Anwendungen, die Benutzer auf verschiedenen Geräten und Plattformen begeistern können. Da die AR-Technologie weiterhin fortschreitet, bieten ARFoundation und Unity die Werkzeuge, um die Zukunft der AR-Erlebnisse zu gestalten, was diesen Bereich für Entwickler zu einem spannenden Raum macht, den sie erkunden und gestalten können.</p>
<p>The post <a href="https://mobile.fhstp.ac.at/allgemein/arfoundation-mit-unity/">ARFoundation mit Unity</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Pingo-Websockets Implementierung mit socket.io</title>
		<link>https://mobile.fhstp.ac.at/allgemein/pingo-websockets-implementierung-mit-socket-io/</link>
		
		<dc:creator><![CDATA[Manuel Hecht]]></dc:creator>
		<pubDate>Fri, 29 Sep 2023 07:07:24 +0000</pubDate>
				<category><![CDATA[Allgemein]]></category>
		<guid isPermaLink="false">https://akirchknopf-21110.php.fhstp.cc/?p=11063</guid>

					<description><![CDATA[<p>1. Einführung in WebSockets: Was sind WebSockets? WebSockets repräsentieren eine fortschrittliche Technologie, die es ermöglicht, eine interaktive Kommunikation zwischen dem Client und einem Server zu erstellen. Im Gegensatz zu herkömmlichen HTTP-Verbindungen, bei denen der Client (z. B. ein Webbrowser) eine Anfrage an den Server sendet und auf eine Antwort wartet, ermöglichen WebSockets eine bidirektionale Kommunikation. <a class="read-more" href="https://mobile.fhstp.ac.at/allgemein/pingo-websockets-implementierung-mit-socket-io/">[...]</a></p>
<p>The post <a href="https://mobile.fhstp.ac.at/allgemein/pingo-websockets-implementierung-mit-socket-io/">Pingo-Websockets Implementierung mit socket.io</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p></p>



<h2 class="wp-block-heading"><strong>1. Einführung in WebSockets:</strong></h2>



<h3 class="wp-block-heading"><strong>Was sind WebSockets?</strong></h3>



<p>WebSockets repräsentieren eine fortschrittliche Technologie, die es ermöglicht, eine interaktive Kommunikation zwischen dem Client und einem Server zu erstellen. Im Gegensatz zu herkömmlichen HTTP-Verbindungen, bei denen der Client (z. B. ein Webbrowser) eine Anfrage an den Server sendet und auf eine Antwort wartet, ermöglichen WebSockets eine bidirektionale Kommunikation. Das bedeutet, dass sowohl der Server als auch der Client Daten initiieren und senden können, ohne auf eine Anfrage zu warten.</p>



<h3 class="wp-block-heading"><strong>Warum sind sie nützlich?</strong></h3>



<p>Traditionelle HTTP-Anfragen sind zustandslos und nicht dauerhaft. Jede Anfrage öffnet eine neue Verbindung, und nachdem die Daten übertragen wurden, wird diese Verbindung geschlossen. Dieser Prozess kann ineffizient sein, insbesondere wenn Echtzeitdaten oder häufige Updates erforderlich sind.</p>



<p>WebSockets hingegen bieten eine dauerhafte Verbindung, die nach dem initialen Handshake offen bleibt. Dies ermöglicht eine schnellere Datenübertragung, da der Overhead des ständigen Verbindungsaufbaus und -abbaus entfällt. Dies ist besonders nützlich für Anwendungen wie Online-Spiele, Chat-Anwendungen, Finanz-Dashboards und andere Echtzeitanwendungen.</p>



<h3 class="wp-block-heading"><strong>Anwendungsfälle für WebSockets:</strong></h3>



<p>Einige gängige Anwendungsfälle für WebSockets sind:</p>



<ul class="wp-block-list">
<li>Chat-Anwendungen</li>



<li>Online-Multiplayer-Spiele</li>



<li>Live-Sportergebnisse oder Börsenticker</li>



<li>Kollaborative Tools wie gemeinsame Dokumentenbearbeitung</li>



<li>Benachrichtigungen in Echtzeit</li>
</ul>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading"><strong>2. Einführung in socket.io:</strong></h2>



<h3 class="wp-block-heading"><strong>Was ist <code>socket.io</code>?</strong></h3>



<p><code>socket.io</code> ist eine JavaScript-Bibliothek, die es Entwicklern erleichtert, Echtzeit-Webanwendungen zu erstellen. Sie bietet Abstraktionen für WebSockets und viele Fallbacks für ältere Technologien, falls WebSockets nicht verfügbar sind. Dies macht sie zu einer robusten Lösung für unterschiedliche Umgebungen und Browser-Kompatibilitäten.</p>



<h3 class="wp-block-heading"><strong>Vorteile von <code>socket.io</code> gegenüber reinen WebSockets:</strong></h3>



<ul class="wp-block-list">
<li><strong>Kompatibilität:</strong> <code>socket.io</code> funktioniert nicht nur mit WebSockets, sondern bietet auch Fallbacks für ältere Technologien, was die Kompatibilität mit älteren Browsern sicherstellt.</li>



<li><strong>Einfachheit:</strong> Die API von <code>socket.io</code> ist einfach und intuitiv, was den Einstieg erleichtert.</li>



<li><strong>Erweiterte Funktionen:</strong> <code>socket.io</code> bietet zusätzliche Funktionen, die über reine WebSockets hinausgehen, wie z. B. Räume, Namensräume und Broadcasting.</li>



<li><strong>Wiederverbindung:</strong> <code>socket.io</code> versucht automatisch, die Verbindung wiederherzustellen, wenn sie unterbrochen wird.</li>
</ul>



<h3 class="wp-block-heading"><strong>Hauptkomponenten: Client- und Serverbibliothek:</strong></h3>



<p><code>socket.io</code> besteht aus zwei Hauptkomponenten:</p>



<ol class="wp-block-list">
<li><strong>Serverbibliothek:</strong> Typischerweise in einer Node.js-Anwendung verwendet. Sie ermöglicht es dem Server, Verbindungen von Clients zu akzeptieren und mit ihnen zu kommunizieren.</li>



<li><strong>Clientbibliothek:</strong> Diese wird in der Webanwendung des Benutzers ausgeführt und ermöglicht es dem Client, sich mit dem Server zu verbinden und Nachrichten auszutauschen.</li>
</ol>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading"><strong>3. Frontend-Implementierung mit Angular und socket.io:</strong></h2>



<p>In modernen Webanwendungen wie Pingo ist es üblich, Frameworks wie Angular zu verwenden, um die Entwicklung zu erleichtern und den Code zu strukturieren. In diesem Kapitel werden wir uns ansehen, wie <code>socket.io</code> in eine Angular-Anwendung integriert werden kann.</p>



<h3 class="wp-block-heading"><strong>Einrichtung und Abhängigkeiten:</strong></h3>



<p>Zunächst müssen Sie die <code>socket.io-client</code>-Bibliothek zu Ihrem Angular-Projekt hinzufügen. Dies kann mit npm oder einem anderen Paketmanager erfolgen:</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: plain; title: ; notranslate">
npm install socket.io-client
</pre></div>


<h3 class="wp-block-heading"><strong>WebsocketService:</strong></h3>



<p>Der <code>WebsocketService</code> ist ein zentraler Dienst, der die gesamte Logik für die Kommunikation mit dem <code>socket.io</code>-Server kapselt. Hier ist eine kurze Übersicht über den bereitgestellten Code:</p>



<ul class="wp-block-list">
<li><strong>Initialisierung:</strong> Beim Erstellen des Dienstes wird eine Verbindung zum <code>socket.io</code>-Server hergestellt, welcher in diesem Fall das Pingo-Backend darstellt.</li>



<li><strong>Räume betreten und verlassen:</strong> Die Methoden <code>joinRoom</code> und <code>leaveRoom</code> ermöglichen es dem Client, einem bestimmten Raum beizutreten oder ihn zu verlassen. Dies ist nützlich, wenn Sie Chaträume oder andere segmentierte Kommunikationskanäle haben.</li>



<li><strong>Nachrichten senden:</strong> Die Methode <code>sendMessage</code> ermöglicht es dem Client, eine Nachricht (in diesem Fall ein <code>Chat</code>-Objekt) an den Server zu senden.</li>



<li><strong>Nachrichten empfangen:</strong> Die Methode <code>onMessageReceived</code> gibt ein Observable zurück, das jedes Mal einen Wert ausgibt, wenn eine Nachricht vom Server empfangen wird. Dies ermöglicht es anderen Teilen Ihrer Angular-Anwendung, auf eingehende Nachrichten zu reagieren.</li>
</ul>



<h3 class="wp-block-heading"><strong>Integration in Komponenten:</strong></h3>



<p>Mit dem <code>WebsocketService</code> können Sie nun in Ihren Angular-Komponenten auf <code>socket.io</code>-Funktionen zugreifen. Zum Beispiel könnten Sie eine Chat-Komponente haben, die den <code>WebsocketService</code> verwendet, um Nachrichten zu senden und zu empfangen.</p>


<div class="wp-block-syntaxhighlighter-code "><pre class="brush: plain; title: ; notranslate">
@Component({
  selector: &#039;app-chat&#039;,
  templateUrl: &#039;./chat.component.html&#039;,
  styleUrls: &#x5B;&#039;./chat.component.css&#039;]
})
export class ChatComponent implements OnInit {
  public messages: Chat&#x5B;] = &#x5B;];

  constructor(private websocketService: WebsocketService) {}

  ngOnInit(): void {
    this.websocketService.onMessageReceived().subscribe((chat: Chat) =&gt; {
      this.messages.push(chat);
    });
  }

  send(message: string): void {
    const chatMessage: Chat = {
    };
    this.websocketService.sendMessage(chatMessage);
  }
}
</pre></div>


<hr class="wp-block-separator has-alpha-channel-opacity"/>



<p></p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading"><strong>4. Backend-Implementierung mit NestJS und socket.io:</strong></h2>



<p>NestJS ist ein progressives Node.js-Framework zum Erstellen effizienter, zuverlässiger und skalierbarer Serverseitenanwendungen. Es verwendet moderne JavaScript, ist auf TypeScript aufgebaut und kombiniert Elemente von OOP (Objektorientierte Programmierung), FP (Funktionale Programmierung) und FRP (Funktionale Reaktive Programmierung).</p>



<h3 class="wp-block-heading"><strong>ChatGateway:</strong></h3>



<p>Der <code>ChatGateway</code> ist ein zentrales Element, das die WebSocket-Kommunikation mit dem Frontend steuert. Hier sind einige der Hauptfunktionen und -methoden:</p>



<ul class="wp-block-list">
<li><strong>WebSocketServer:</strong> Dieser Dekorator wird verwendet, um eine Instanz des <code>socket.io</code>-Servers zu erstellen.</li>



<li><strong>handleConnection:</strong> Diese Methode wird aufgerufen, wenn ein neuer Client eine Verbindung herstellt. Hier werden auch verschiedene Ereignishandler für den Client definiert, wie z.B. das Senden von Nachrichten und das Betreten oder Verlassen von Räumen.</li>



<li><strong>handleDisconnect:</strong> Diese Methode wird aufgerufen, wenn ein Client die Verbindung trennt. Hier können Sie jegliche Aufräumarbeiten oder Benachrichtigungen durchführen.</li>



<li><strong>afterInit:</strong> Diese Methode wird aufgerufen, nachdem der WebSocket-Server initialisiert wurde. Sie können hier jegliche Initialisierungslogik hinzufügen.</li>
</ul>



<h3 class="wp-block-heading"><strong>ChatService:</strong></h3>



<p>Der <code>ChatService</code> ist verantwortlich für die Logik rund um den Chat. Er interagiert mit dem Datenbank-Repository, um Chats zu speichern und abzurufen, und verwendet den Mapper, um zwischen DTOs (Data Transfer Objects) und Entitäten zu konvertieren.</p>



<ul class="wp-block-list">
<li><strong>newChat:</strong> Diese Methode erstellt einen neuen Chat-Eintrag in der Datenbank. Sie nimmt ein <code>ChatDto</code> entgegen, konvertiert es in eine <code>Chat</code>-Entität und speichert es dann über das Repository.</li>



<li><strong>getChatByRoom:</strong> Diese Methode ruft alle Chats für einen bestimmten Raum ab. Wenn keine Chats gefunden werden, wird eine <code>NotFoundException</code> ausgelöst.</li>
</ul>



<h3 class="wp-block-heading"><strong>Zusätzliche Komponenten:</strong></h3>



<p>Sie haben auch erwähnt, dass es zusätzliche Komponenten wie eine Entity, ein Repository, ein DTO und einen Mapper gibt. Auch wenn sie hier nicht im Detail beschrieben sind, spielen sie eine entscheidende Rolle:</p>



<ul class="wp-block-list">
<li><strong>Entity:</strong> Definiert die Struktur und Beziehungen der Chat-Daten in der Datenbank.</li>



<li><strong>Repository:</strong> Bietet Methoden zum Abrufen und Speichern von Daten in der Datenbank.</li>



<li><strong>DTO:</strong> Ein Objekt, das Daten zwischen Client und Server überträgt, oft mit einer etwas anderen Struktur als die Datenbank-Entity.</li>



<li><strong>Mapper:</strong> Ein Tool, das die Konvertierung zwischen DTOs und Entitäten erleichtert.</li>
</ul>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<p>Mit dieser Backend-Implementierung habe ich die Chat-Funktion in Pingo implementiert. Die Kombination von NestJS und <code>socket.io</code> bietet eine leistungsstarke und flexible Lösung für moderne Webanwendungen.</p>
<p>The post <a href="https://mobile.fhstp.ac.at/allgemein/pingo-websockets-implementierung-mit-socket-io/">Pingo-Websockets Implementierung mit socket.io</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Transfer Learning</title>
		<link>https://mobile.fhstp.ac.at/allgemein/transfer-learning/</link>
		
		<dc:creator><![CDATA[Manuel Hecht]]></dc:creator>
		<pubDate>Fri, 03 Mar 2023 08:38:55 +0000</pubDate>
				<category><![CDATA[Allgemein]]></category>
		<guid isPermaLink="false">https://akirchknopf-21110.php.fhstp.cc/?p=10814</guid>

					<description><![CDATA[<p>Natural Language Processing in Jupyter Notebooks mit FARM Mit den jüngsten Fortschritten im auf Deep Learning basierenden NLP ist es einfacher denn je geworden, modernste Modelle auf Ihre eigenen Texte anzuwenden. In diesem Artikel stelle Ich euch die Methode des Transfer Learning vor. Mit der fortschreitenden Digitalisierung von Unternehmen wächst die Datenmenge rasant. Während einige Daten in <a class="read-more" href="https://mobile.fhstp.ac.at/allgemein/transfer-learning/">[...]</a></p>
<p>The post <a href="https://mobile.fhstp.ac.at/allgemein/transfer-learning/">&lt;strong&gt;Transfer Learning&lt;/strong&gt;</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<h2 class="wp-block-heading">Natural Language Processing in Jupyter Notebooks mit FARM</h2>



<p><em>Mit den jüngsten Fortschritten im auf Deep Learning basierenden NLP ist es einfacher denn je geworden, modernste Modelle auf Ihre eigenen Texte anzuwenden. In diesem Artikel stelle Ich euch die Methode des Transfer Learning vo</em>r.</p>



<p>Mit der fortschreitenden Digitalisierung von Unternehmen wächst die Datenmenge rasant. Während einige Daten in sorgfältig ausgewählten Formaten in hervorragend konstruierten relationalen Datenbanken gespeichert werden, handelt es sich bei den meisten tatsächlich um unstrukturierte Daten wie Text, Video und Bild. Das Sammeln von Informationen aus dieser Art von Dateien wurde erst in den letzten Jahren dank großer Fortschritte im Deep Learning möglich. Natural Language Processing (NLP) ist eine Disziplin im Bereich des maschinellen Lernens, die sich auf alle Arten von Textdaten konzentriert. Es ist heutzutage ein besonders spannendes Feld, weil wir wöchentlich neue Veröffentlichungen sehen, eine sehr aktive Open-Source-Community und gleichzeitig unzählige Möglichkeiten, NLP-Modelle in der realen Welt zu platzieren.</p>



<h2 class="wp-block-heading"><strong>Transfer Learning: Den Weg vom Gewächshaus aufs Feld vereinfachen</strong></h2>



<p>Transfer Learning ist die Idee, an einer Art von Problem zu lernen (Pre-Training) und das erworbene Wissen auf ein neues Problem zu übertragen, wo es als Grundlage für weiteres verfeinertes Lernen verwendet werden kann (Fine-Tuning). Die Modelle können mit weniger Trainingsdaten an spezifische Geschäftsprobleme angepasst werden und erzielen sogar eine bessere Leistung. Diese Idee ist nicht neu und wurde erfolgreich auf viele Computer-Vision-Probleme angewendet.</p>



<figure class="wp-block-image size-full"><img decoding="async" width="945" height="749" src="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/image.png" alt="" class="wp-image-10869"/><figcaption class="wp-element-caption">Konzept des Transferlernens</figcaption></figure>



<p>Das Transfer-Learning für NLP ist jedoch sehr herausfordernd, da das Modell das Erlernen eines grundlegenden, aber allgemeinen Sprachverständnisses erfordern würde. Aber wie können wir einem Computer beibringen, was ein Wort bedeutet? Diese Aufgabe ist zentral für das Gebiet des NLP, und seit ihrer Veröffentlichung waren word2vec und GloVe die Algorithmen der Wahl zur Generierung von Wortvektoren .In den letzten Jahren gab es eine ganze Reihe neuer Sprachmodelle, die genau dieses Problem angegangen sind und deren erlerntes Wissen auf nachgelagerte Aufgaben übertragen hat, was zu erheblichen Leistungsverbesserungen geführt hat. </p>



<p>Zum Glück gibt es ein paar Open-Source-Pakete, die Sie bei diesem Prozess unterstützen. Das ursprüngliche Tensorflow-Repository verfügt über verschiedene BERT-Modelle für verschiedene Sprachen und bietet grundlegende Skripte, um die Ergebnisse in der Arbeit zu replizieren. Der pytorch-pretrained-bert von Huggingface hat einige nette Ergänzungen, darunter mehr Modellarchitekturen, erweiterte Multi-GPU-Unterstützung und zusätzliche Skripte für die Feinabstimmung von Sprachmodellen. Sein Zweck ist jedoch immer noch eher die Replikation von Forschungsergebnissen und ein Ausgangspunkt für eigene Modelle. In dem <strong>Framework</strong> für <strong>Adapting Representation Models</strong> ( <a href="https://github.com/deepset-ai/FARM" target="_blank" rel="noreferrer noopener">FARM</a> ) soll das verwändert werden durch:</p>



<ul class="wp-block-list">
<li>einfache &amp; schnelle Anpassung vortrainierter Modelle an Ihr Zielproblem</li>



<li>leistungsstarke Protokollierung und Verfolgung von Modellen</li>



<li>Persistierende Modellparameter und -konfigurationen für Reproduzierbarkeit</li>



<li>einfache Visualisierung und Bereitstellung zur Präsentation Ihres Prototyps</li>
</ul>



<p>Nachdem ich es für meine Bachelor-Arbeit sehr nützlich fand, entschied ich mich, es mit der euch zu teilen. Der Bau eucres eigenen hochmodernen Modells mit FARM erfordert nur wenige Schritte:</p>



<ul class="wp-block-list">
<li>1) Wählt ein vortrainiertes Modell aus</li>
</ul>



<figure class="wp-block-image size-full"><img decoding="async" width="945" height="83" src="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/image-2.png" alt="" class="wp-image-10871"/></figure>



<ul class="wp-block-list">
<li>2) Fügt einen Prediction-Head hinzu, der zu Ihrem Zielproblem passt</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="945" height="251" src="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/image-3.png" alt="" class="wp-image-10872"/></figure>



<ul class="wp-block-list">
<li>3) Erstellt einen Datenprocessor, der Ihre Dateien einliest und die Daten in das geeignete Format für das Modell konvertiert</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="945" height="149" src="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/image-4.png" alt="" class="wp-image-10873"/></figure>



<ul class="wp-block-list">
<li>4) Trainiert das Modell</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="945" height="116" src="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/image-5.png" alt="" class="wp-image-10874"/></figure>



<p><a href="https://github.com/deepset-ai/FARM/blob/master/tutorials/1_farm_building_blocks.ipynb" target="_blank" rel="noreferrer noopener">In diesem Jupyter-Notebook</a> gibt es von den Entwicklern ein eigenes Tutorial in einem Jupyter Notebook. Achtung, bei den Package-Dependencies wird es wahrscheinlich zu Problemen kommen&#8230;</p>
<p>The post <a href="https://mobile.fhstp.ac.at/allgemein/transfer-learning/">&lt;strong&gt;Transfer Learning&lt;/strong&gt;</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Flimmerkiste &#124; Semesterprojekt</title>
		<link>https://mobile.fhstp.ac.at/allgemein/flimmerkiste-semesterprojekt/</link>
		
		<dc:creator><![CDATA[Manuel Hecht]]></dc:creator>
		<pubDate>Wed, 01 Mar 2023 11:54:39 +0000</pubDate>
				<category><![CDATA[Allgemein]]></category>
		<category><![CDATA[Semesterprojekt]]></category>
		<guid isPermaLink="false">https://akirchknopf-21110.php.fhstp.cc/?p=10690</guid>

					<description><![CDATA[<p>Im Rahmen unseres Semesterprojekts (1. Semester) für die Masterklassen-LV &#124; Mobile haben wir eine Android-App mit dem Namen flimmerkiste entwickelt. Das Video-Angebot der großen TV-Sender ist in den letzten Jahren beachtlich gestiegen, dabei verwaltet jeder Sender seine eigene Mediathek.Wir wollen in diesem Mediatheken-Dschungel Orientierung &#38; einen einfachen TV-Konsum schaffen und haben dabei flimmerkiste kreiert. Mit <a class="read-more" href="https://mobile.fhstp.ac.at/allgemein/flimmerkiste-semesterprojekt/">[...]</a></p>
<p>The post <a href="https://mobile.fhstp.ac.at/allgemein/flimmerkiste-semesterprojekt/">Flimmerkiste | Semesterprojekt</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p>Im Rahmen unseres Semesterprojekts (1. Semester) für die Masterklassen-LV | Mobile haben wir eine Android-App mit dem Namen flimmerkiste entwickelt. Das Video-Angebot der großen TV-Sender ist in den letzten Jahren beachtlich gestiegen, dabei verwaltet jeder Sender seine eigene Mediathek.<br>Wir wollen in diesem Mediatheken-Dschungel Orientierung &amp; einen einfachen TV-Konsum schaffen und haben dabei flimmerkiste kreiert. Mit flimmerkiste ist es möglich mit nur einer App die Mediatheken der deutschsprachigen öffentlich-rechtlichen Sender zur durchforsten und die einzelnen Videos der Sender abzuspielen.</p>



<p>Im 1. Semester haben wir uns auf die Entwicklung der Android-App konzentriert.</p>



<h2 class="wp-block-heading">Team | Rollen</h2>



<ul class="wp-block-list">
<li>Manuel Hecht<ul><li>Mediathek API (Backend)</li></ul><ul><li>Home Screen mit Sendungsübersicht</li></ul><ul><li>Sendungssuche</li></ul>
<ul class="wp-block-list">
<li>Testen</li>
</ul>
</li>



<li>Mohamed Abd-El-Rehim<ul><li>Userverwaltung | Login &amp; Registrierung</li></ul><ul><li>Firebase Verwaltung</li></ul>
<ul class="wp-block-list">
<li>Testen</li>
</ul>
</li>
</ul>



<ul class="wp-block-list">
<li>Florian Bauer<ul><li>UI-Design der App</li></ul><ul><li>Videoplayer-Integration</li></ul>
<ul class="wp-block-list">
<li>Testen</li>
</ul>
</li>
</ul>



<h2 class="wp-block-heading">Projektorganisation</h2>



<p>Wir verwenden für unsere Projekt GitLab auf dem FH-internen Server.</p>



<p><a href="https://git.nwt.fhstp.ac.at/teledevs/flimmerkiste">GitLab | Flimmerkiste (Link)</a></p>



<p></p>



<h2 class="wp-block-heading">Entwicklung</h2>



<p>Für die Umsetzung von unserem Semesterprojekt haben wir uns für Flutter, das Entwicklungs-Kit von Google entschieden.</p>



<p><strong>Flutter</strong></p>



<p>Flutter ist ein Open-Source-Framework für die Entwicklung mobiler Anwendungen, mit dem Entwickler hochwertige, plattformübergreifende mobile Anwendungen mit einer einzigen Codebasis erstellen können. Das Hauptmerkmal von Flutter ist die Fähigkeit, schöne, reaktionsfähige und schnelle Anwendungen zu erstellen, die einfach zu warten sind.</p>



<p>Wir wollen unsere Anwendung für möglichst viele Plattformen in Zukunft anbieten, diese sollen von Semester zu Semester ergänzt werden.</p>



<p>Das Erlernen einer Cross-Platform-Entwicklungsumgebung war ein wichtiger Entscheidungsgrund für alle Projektmitglieder. Bis vor Projektbeginn hatte kein Mitglied Berührungspunkte mit so einer All-in-One Umgebung.</p>



<p>Der klare Nachteil war die längere Einschulungsphase bei allen Teammitglieder, ein Flutter-Workshop wäre hier hilfreich gewesen. Zum Beispiel konnten gewisse Verhaltensweisen von Flutter nicht nachvollzogen (z.B. States) werden.</p>



<h2 class="wp-block-heading">Design</h2>



<p>Fokussierung des Designs erfolgte fürs 1. Semester auf die Android Variante.</p>



<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" src="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/figma-flimmerkiste_v2.png" alt="" class="wp-image-10757" width="847" height="313"/><figcaption class="wp-element-caption">Figma |  App Design V1</figcaption></figure>



<p><a href="https://www.figma.com/file/19xa2KyqRajSP30BZGQpEa/flimmerkiste?node-id=0%3A1&amp;t=xnQuSn3OtmFcX5Is-1">Figma-Designentwurf V1</a></p>



<h2 class="wp-block-heading">Backend</h2>



<h3 class="wp-block-heading">Datenbank | Google Firebase</h3>



<p>Für unsere Benutzerverwaltung verwenden wir Google Firebase als Datenbank. Derzeit werden folgende Tabelle/Daten gespeichert:</p>



<ul class="wp-block-list">
<li>Benutzer:innen
<ul class="wp-block-list">
<li>Mail, Name</li>
</ul>
</li>
</ul>



<ul class="wp-block-list">
<li>Favoriten = Sendungen
<ul class="wp-block-list">
<li>Kanal, Sendungstitel</li>
</ul>
</li>
</ul>



<h3 class="wp-block-heading">MediathekView API</h3>



<p>Als Datenquelle verwenden wir die API von MediathekView. Diese darf aus rechtlichen Gründen leider nicht auf unserer Seite in einem eigenen Backend abgespeichert werden Aus diesem Grund holen wir uns nur temporär per API-Abfage die jeweiligen benötigten Daten.</p>



<p>MediathekView durchsucht die Online-Mediatheken verschiedener öffentlich-rechtlicher Sender und listet diese gefundenen Sendungen auf. Es werden die Videobeiträge aus den Mediatheken direkt verwendet, das heißt das Hosting findet bei den jeweiligen Sendern statt.</p>



<p>MediathekView kann aus diesem Grund nur Sendungen anzeigen, die in den Mediatheken der Sender selbst noch als Videos angeboten werden.</p>



<p>Die Sendungen vom ORF sind aus rechtlichen Gründen nur aus den letzten sieben Tagen verwendbar.</p>



<p><a href="https://mediathekviewweb.de/">Mediathek View Web (Link)</a></p>



<p></p>



<p>Derzeit werden die Mediatheken der folgenden Sender unterstützt:</p>



<ul class="wp-block-list">
<li>ARD (Das Erste)</li>



<li>Arte (deutsch, englisch, französisch, spanisch, italienisch und polnisch)</li>



<li>alpha</li>



<li>BR (Bayerischer Rundfunk)</li>



<li>HR (Hessischer Rundfunk)</li>



<li>MDR (Mitteldeutscher Rundfunk)</li>



<li>NDR (Norddeutscher Rundfunk)</li>



<li>RBB (Rundfunk Berlin-Brandenburg)</li>



<li>rbtv (radiobremen)</li>



<li>SR (Saarländischer Rundfunk)</li>



<li>SWR (Südwestrundfunk)</li>



<li>WDR (Westdeutscher Rundfunk)</li>



<li>ZDF (Zweites Deutsches Fernsehen)</li>



<li>ZDFinfo</li>



<li>ZDFneo</li>



<li>zdf-tivi</li>



<li>Gemeinschaftsprogramme von ARD und ZDF</li>



<li>3Sat</li>



<li>Funk</li>



<li>Kika (Kinderkanal von ARD und ZDF)</li>



<li>Phoenix</li>



<li>DW TV (Deutsche Welle)</li>



<li>ORF (Österreichischer Rundfunk)</li>



<li>SRF (Schweizer Rundfunk) inkl. Podcasts</li>
</ul>



<p>Eine Abfrage an die MediathekViewWeb API liefert folgende Infos:</p>



<ul class="wp-block-list">
<li>Kanalname (channel)</li>



<li>Sendungsname (topic)</li>



<li>Sendungstitle (title)</li>



<li>Sendungsbeschreibung (description)</li>



<li>Zeitstempel (timestamp,filmlisteTimestamp)</li>



<li>Sendungsdauer (duration)</li>



<li>Dateigröße (size)</li>



<li>Sendungslink auf die Website des jeweiligen Senders (url_website)</li>



<li>Untertitel zur Sendung (url_subtitle)</li>



<li>Videolink in mittlerer Qualität (url_video)</li>



<li>Videolink in niedrigster Qualität (url_video_low)</li>



<li>Videolink in hoher Qualität (url_video_high)</li>



<li>MediathekView-ID (id)</li>
</ul>



<p>Ein Beispiel aus der ARD-Mediathek:</p>



<figure class="wp-block-image size-large is-resized"><img loading="lazy" decoding="async" src="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/mediathekview-blog_01-1540x309.png" alt="" class="wp-image-10758" width="945" height="189" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2023/03/mediathekview-blog_01-1540x309.png 1540w, https://mobile.fhstp.ac.at/wp-content/uploads/2023/03/mediathekview-blog_01-1536x306.png 1536w, https://mobile.fhstp.ac.at/wp-content/uploads/2023/03/mediathekview-blog_01.png 1553w" sizes="auto, (max-width: 945px) 100vw, 945px" /></figure>



<p><a href="https://gist.github.com/bagbag/a2888478d27de0e989cf777f81fb33de">MediathekViewWeb API Samplecode (Link)</a></p>



<p>Für unsere jetzige Implementierung verwenden wir zwei verschiedene Queries:</p>



<ul class="wp-block-list">
<li>Query für den Home Screen<ul><li>Abfrage nach allen Videos eines Senders (channel).</li></ul>
<ul class="wp-block-list">
<li>Es werden die aktuellsten 10 Sendungen (DESC) des Kanals als Ergebnis geliefert.</li>
</ul>
</li>
</ul>



<ul class="wp-block-list">
<li>Query für die Suche nach einer Sendung<ul><li>Abfrage erfolgt nach dem Sendungstitle (title).</li></ul>
<ul class="wp-block-list">
<li>Es werden die aktuellsten 10 Sendungen (DESC) mit einer Übereinstimmung des Suchwortes als Ergebnis geliefert.</li>
</ul>
</li>
</ul>



<p>Folgende Felder erhalten wir als Antwort (JSON), die wir für das Frontend weiterverarbeiten.</p>



<ul class="wp-block-list">
<li>Feld &#8220;topic&#8221;:</li>



<li>Feld &#8220;title&#8221;:</li>



<li>Feld &#8220;channel&#8221;:</li>



<li>Feld &#8220;url_video&#8221;:</li>



<li>feld &#8220;filmlisteTimestamp&#8221;:</li>



<li>feld &#8220;duration&#8221;</li>



<li>feld &#8220;description&#8221;</li>
</ul>



<h2 class="wp-block-heading">Funktionen</h2>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" src="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/Screenshot_20230226_152933.jpg" alt="" class="wp-image-10760" width="252" height="561" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2023/03/Screenshot_20230226_152933.jpg 1080w, https://mobile.fhstp.ac.at/wp-content/uploads/2023/03/Screenshot_20230226_152933-691x1536.jpg 691w, https://mobile.fhstp.ac.at/wp-content/uploads/2023/03/Screenshot_20230226_152933-922x2048.jpg 922w" sizes="auto, (max-width: 252px) 100vw, 252px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p><strong>Home Screen</strong></p>



<p>Die aktuellsten zehn Sendungen ausgewählter Kanäle werden als scrollbare Listenzeile angezeigt.</p>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" src="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/Screenshot_20230226_153046.jpg" alt="" class="wp-image-10764" width="257" height="571" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2023/03/Screenshot_20230226_153046.jpg 1080w, https://mobile.fhstp.ac.at/wp-content/uploads/2023/03/Screenshot_20230226_153046-691x1536.jpg 691w, https://mobile.fhstp.ac.at/wp-content/uploads/2023/03/Screenshot_20230226_153046-922x2048.jpg 922w" sizes="auto, (max-width: 257px) 100vw, 257px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p><strong>Suche nach Sendungstitel</strong></p>



<p><span style="font-size: revert; color: initial;">Es werden die zehn neuesten Ergebnisse gezeigt.</span></p>



<p>Bei einem Ergebnisumfang größer zehn, können die Ergebnisse erweitert werden.</p>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" src="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/Screenshot_20230226_153702.jpg" alt="" class="wp-image-10765" width="270" height="600" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2023/03/Screenshot_20230226_153702.jpg 1080w, https://mobile.fhstp.ac.at/wp-content/uploads/2023/03/Screenshot_20230226_153702-691x1536.jpg 691w, https://mobile.fhstp.ac.at/wp-content/uploads/2023/03/Screenshot_20230226_153702-922x2048.jpg 922w" sizes="auto, (max-width: 270px) 100vw, 270px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p><strong>Benutzerprofil</strong></p>



<p><span style="font-size: revert; color: initial;">Die Flimmerkiste enthält eine Benutzerprofil-Funktion. Mit dieser Funktion kann man sein persönliches Konto in der App erstellen und verwalten. Mit einem Benutzerprofil kann man Lieblingssendungen speichern. Das Profil kann folgende Daten anpassen:</span></p>



<ul class="wp-block-list">
<li>Profilfoto</li>



<li>Mailadresse</li>



<li>Name</li>



<li>Passwort</li>
</ul>



<p>Und es können Sendungen favorisiert werden.</p>
</div>
</div>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow"></div>
</div>



<h2 class="wp-block-heading">Video-Player</h2>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" src="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/Screenshot_20230226_153258-1.jpg" alt="" class="wp-image-10781" width="280" height="622" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2023/03/Screenshot_20230226_153258-1.jpg 1080w, https://mobile.fhstp.ac.at/wp-content/uploads/2023/03/Screenshot_20230226_153258-1-691x1536.jpg 691w, https://mobile.fhstp.ac.at/wp-content/uploads/2023/03/Screenshot_20230226_153258-1-922x2048.jpg 922w" sizes="auto, (max-width: 280px) 100vw, 280px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<p>Der Hauptbestandteil von Flimmerkiste ist das Video-Player, welcher die jeweiligen Sendungsvideos des Kanals abspielt. Um auf die Anforderungen des Players einzugehen, wird zuerst eine Übersicht der Spezifikationen der abzuspielenden Videos aufgelistet.</p>



<p>Alle Videos aus den Mediatheken werden in zwei Varianten (MP4 &amp; HLS-Stream) angeboten.</p>



<p>Encodierung der Videos:</p>



<ul class="wp-block-list">
<li>Container: MPEG-4</li>



<li>Video: AVC (H264)</li>



<li>Audio: AAC LC (Stereo)</li>
</ul>
</div>
</div>



<p><strong>MP4</strong></p>



<p>Niedrige Qualität</p>



<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" src="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/ard-low.png" alt="" class="wp-image-10773" width="613" height="184"/></figure>



<p>Mittlere Qualität</p>



<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" src="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/ard-mid.png" alt="" class="wp-image-10774" width="613" height="195"/></figure>



<p>Höchste Qualität</p>



<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" src="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/ard-hi.png" alt="" class="wp-image-10775" width="623" height="208"/></figure>



<p><strong>HLS-Stream</strong></p>



<p>Videos von ORF und SRF werden nicht als *.mp4 angeboten, sondern nur als HLS-Stream zur Verfügung gestellt. Eine Manifest-Datei (*.m3u8) definiert in welcher Qualität das Video abgespielt wird.</p>



<p></p>



<p>ORF:</p>



<p>Niedrige Qualität</p>



<pre class="wp-block-code"><code>#EXT-X-STREAM-INF:BANDWIDTH=1089858,CODECS="avc1.100.30,mp4a.40.2",RESOLUTION=640x360</code></pre>



<p>Mittlere Qualität</p>



<pre class="wp-block-code"><code>#EXT-X-STREAM-INF:BANDWIDTH=2123246,CODECS="avc1.100.31,mp4a.40.2",RESOLUTION=960x540</code></pre>



<p>Höchste Qualität</p>



<pre class="wp-block-code"><code>#EXT-X-STREAM-INF:BANDWIDTH=3417151,CODECS="avc1.100.31,mp4a.40.2",RESOLUTION=1280x720</code></pre>



<p>SRF:</p>



<p>Die Manifest-Datei (*.m3u8) verweist auf die einzelnen Videosegmente (.ts) in der jeweiligen Qualitätsstufe (Low, Mid, High).</p>



<pre class="wp-block-code"><code>#EXTINF:4.840,

segment-1-f4-v1-a1.ts

#EXTINF:6.000,

segment-2-f4-v1-a1.ts</code></pre>



<p>Der Player muss folgenden Anforderungen in erster Phase erfüllen:</p>



<ul class="wp-block-list">
<li>Abspielen von Videos, die als *.mp4 und *.m3u8 gehostet sind.</li>



<li>Besitzt Basis-Steuerungselemente: Zeitleiste, Lautstärkeregelung, Play-/Pausefunktion und Vollbildmodus</li>



<li>Unterstützung für Android &amp; iOS, idealerweise auch Web</li>



<li>Anpassbare Playerelemente für zukünftige Features wie z.B. die Einstellung der Videoqualität per Steuerungselement, Untertiteleinblendung</li>
</ul>



<p>Die Flutter-Community hat bereits einige nützliche Player-Plugins für Flutter entwickelt. Diese wären:</p>



<p><strong>video_player</strong></p>



<ul class="wp-block-list">
<li><a href="https://pub.dev/packages/video_player">https://pub.dev/packages/video_player</a></li>



<li>Dieser Player ist der stabilste (Version 2.5.2) von allen getesteten Plugins.</li>



<li>Alle notwendigen Plattformen werden unterstützt.</li>



<li>Nur Basisfunktionen verfügbar, kaum angepasste Funktionen verfügbar.</li>



<li>Nur *.mp4 gehostete Videos abspielbar.</li>
</ul>



<p><strong>chewie</strong></p>



<ul class="wp-block-list">
<li><a href="https://pub.dev/packages/chewie">https://pub.dev/packages/video_player</a></li>



<li>Ein Video-Player mit erweiterten Steuerungselementen.</li>



<li>Alle notwendigen Plattformen werden unterstützt.</li>



<li>Erweiterbare Steuerungselemente verfügbar.</li>



<li>HLS-Videostream und MP4-Videos abspielbar.</li>



<li>Das Plugin basiert auf video_player.<br></li>
</ul>



<p><strong>better_player</strong></p>



<ul class="wp-block-list">
<li><a href="https://pub.dev/packages/better_player">https://pub.dev/packages/better_player</a></li>



<li>Instabiler Player-Plugin mit den umfangreichsten Funktionen.</li>



<li>Unterstützung von Android &amp; iOS</li>



<li>Alle Videoformate abspielbar.</li>



<li>Umfangreiches Set an Steuerungselementen.</li>



<li>Das Plugin basiert auf chewie.</li>
</ul>



<p></p>



<p><strong>chewie</strong> wurde als Video-Player für die erste Phase gewählt. Es konnten alle Use-Cases an Mediatheken-Videos damit problemlos abgespielt werden.</p>



<p>Plattform-Verhalten:</p>



<ul class="wp-block-list">
<li>Android: Reibungslose Verwendung</li>



<li>iOS: Konnte derzeit nicht getestet werden</li>



<li>Web: Problem mit Vollbildmodus, beim Verlassen wird Video wieder von Beginn abgespielt</li>
</ul>



<figure class="wp-block-video"><video controls poster="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/flimmerkiste_videoplayer_screen.jpg" src="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/flimmerkiste_suche_h264_crf18.mp4"></video></figure>



<h2 class="wp-block-heading">Learnings</h2>



<ul class="wp-block-list">
<li>Sammlung erster Erfahrungen mit Cross-Plattform-Entwicklung (Flutter)</li>



<li>Allgemeiner Einstieg in Programmiersprache Dart&nbsp;</li>



<li>State-Management in Flutter, zu Beginn einige Schwierigkeiten mit Verständnis</li>



<li>Vertiefung des Google Firebase Wissen (Auth &amp; Storage)</li>



<li>Videoplayer-Handling auf den verschiedenen Plattformen</li>
</ul>



<h2 class="wp-block-heading">Roadmap</h2>



<ul class="wp-block-list">
<li>Stabile Web-Version</li>



<li>iOS-Version</li>



<li>Videoqualität per Player einstellbar</li>



<li>Einbindungsmöglichkeiten von Untertiteln</li>



<li>Navigation Bar zu einer verbesserten Navigation</li>



<li>Code Abstraktionen</li>



<li>Angepasste Bilder für Sendungen</li>



<li>Auswahl der Sender für Home-Screen</li>



<li>Empfehlungen für Sendungen aufgrund von Favoriten</li>



<li>Erstellen von Playlisten (Watch-Listen)</li>



<li>Verbesserte Suche mit Filtermöglichkeiten</li>
</ul>



<h2 class="wp-block-heading">Fazit</h2>



<p>Die Flimmerkiste ist eine hervorragende Lösung für alle, die in einer App das Videoangebot aller deutschsprachigen öffentlich-rechtlichen TV-Sender sehen wollen. Die Funktionen der App, einschließlich der Wiedergabe eines Videos, eines Benutzerprofils und einer Liste von Kanälen in Kategorien, bietet ein umfassendes und personalisiertes Medienerlebnis. Mit der weiteren Entwicklung der App wird sie zu einem noch wertvolleren Werkzeug für Medienkonsumenten werden.</p>
<p>The post <a href="https://mobile.fhstp.ac.at/allgemein/flimmerkiste-semesterprojekt/">Flimmerkiste | Semesterprojekt</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></content:encoded>
					
		
		<enclosure url="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/03/flimmerkiste_suche_h264_crf18.mp4" length="36322495" type="video/mp4" />

			</item>
		<item>
		<title>Deep learning for deforestation detection. An insight into the state of the art.</title>
		<link>https://mobile.fhstp.ac.at/allgemein/deep-learning-for-deforestation-detection-an-insight-into-the-state-of-the-art/</link>
		
		<dc:creator><![CDATA[Manuel Hecht]]></dc:creator>
		<pubDate>Fri, 24 Feb 2023 15:55:46 +0000</pubDate>
				<category><![CDATA[Allgemein]]></category>
		<guid isPermaLink="false">https://akirchknopf-21110.php.fhstp.cc/?p=10721</guid>

					<description><![CDATA[<p>The latest ‘State of the World’s Forests’ report states the importance of forests as terrestrial ecosystems – providing a host for more than 75% of the world&#8217;s terrestrial biodiversity and absorbing the equivalent of billion tons of CO2 per year: “Forests and trees make vital contributions both to people and the planet, bolstering livelihoods, providing <a class="read-more" href="https://mobile.fhstp.ac.at/allgemein/deep-learning-for-deforestation-detection-an-insight-into-the-state-of-the-art/">[...]</a></p>
<p>The post <a href="https://mobile.fhstp.ac.at/allgemein/deep-learning-for-deforestation-detection-an-insight-into-the-state-of-the-art/">Deep learning for deforestation detection. An insight into the state of the art.</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p class="has-text-align-left">The latest ‘State of the World’s Forests’ report states the importance of forests as terrestrial ecosystems – providing a host for more than 75% of the world&#8217;s terrestrial biodiversity and absorbing the equivalent of billion tons of CO2 per year: “Forests and trees make vital contributions both to people and the planet, bolstering livelihoods, providing clean air and water, conserving biodiversity and responding to climate change”(p.10; FAO 2018).</p>



<h2 class="wp-block-heading">Background</h2>



<h3 class="wp-block-heading">Deforestation</h3>



<p>Deforestation claims to be the major source of greenhouse gas emissions in the world. Even outranking the burning of fossil fuels, deforestation is one of the primary sources of concern regarding climate change. Studies have shown that in connection with forest fires, deforestation within the region of the Brazilian Amazon makes up 48% of the total emissions. It impacts the conservation of biodiversity and the associated ecosystem within that region directly. Further implications of deforestation are the loss of species, the reductions in seasonal rainfall, and the organization of the environment. (Ortega et al. 2019).</p>



<h3 class="wp-block-heading">Remote Sensing</h3>



<p>The usage of remote sensing imagery has been essential to keep track of deforestation.<br>NASA defines remote sensing as &#8220;the acquiring of information from a distance via remote sensors on satellites and aircraft that detect, and record reflected or emitted energy&#8221; which further &#8220;enables data-informed decision making based on the current state of our planet&#8221; (NASA 2019) It covers a cost-reductive method in order to gain a broader spectrum of data, especially within hardly accessible areas. Additionally, remote sensing has proven to be well suited to represent the condition of the forests by generating spatial maps that serve as visualizations, helping outline the severity of damage (Xulu et al. 2019).</p>



<h3 class="wp-block-heading">Change Detection</h3>



<p>Change detection is a common task within the usage of remote sensing. It defines the process of analyzing the state of an object at different times. Therefore, it can be used for understanding and tackling deforestation. A major task of change detection is to minimize noise (variations in shadows or lighting) in order to get a clear map of unchanged and changed areas. Many different change detection methods based on Machine Learning have been proposed so far. Those experiments usually use classification, that have a set of stacked temporal images as input, and use complex algorithms to determine changes. Deep Learning has become more attention regarding the use within remote sensing data due to the fact that it can automatically extract features from the image dataset, high-level semantic segmentation, nonlinear problem modeling, and mapping in complex environments. Deep Learning methods have shown better results in comparison to classic machine learning methods regarding change detection techniques. The complexity of all three dimensions of the image (temporal, spectral and spatial) and the power of pattern recognition linked to deep learning has proven to be especially effective (de Bem et al. 2020).</p>



<p></p>



<p>Deep learning algorithms that use image-based change detection learn segmentation directly from bi-temporal image pairs, thus avoiding the negative effects associated with pixel patches. The convolutional neural network (CNN) is a leading architecture among DL algorithms. Through convolutional filters, CNNs can identify patterns within an n-dimensional context with multiple abstraction levels and use them for inference instead of traditional ML algorithms (de Bem et al. 2020).</p>



<h2 class="wp-block-heading">Change Detection with Deep Learning</h2>



<p>In this section, several deep learning methods for change detection will be presented. Those algorithms are being used in several remote sensing and spatial information studies lately.</p>



<h3 class="wp-block-heading">Convolutional Neural Network (CNN)</h3>



<p>The Convolutional Neural Network (CNN) is the most commonly used deep learning method in regard to computer vision. The CNN channels the pixel characteristics in a convolutional process and creates a feature map with characteristics by resizing and pooling of the input image. At the end of this process, a fully-connected layer is attached, that could be applied to a classifier (Lee et al. 2020).</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="813" height="251" src="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/02/EarlyFusionCNN.png" alt="" class="wp-image-10725"/><figcaption>Figure 1: Early Fusion architecture by Ortega et al. (2019)</figcaption></figure>



<h4 class="wp-block-heading">Early Fusion (EF)</h4>



<p>The Early Fusion approach is inspired by the CNN model created by Daudt et al. (2018), which demonstrated good results in the task of change detection within urban areas. The EF represents the concatenation of two image pairs from two different dates as the first step of the network. Subsequently, the input image will be processed by a series of seven convolutional layers and two fully connected layers. The softmax layer with two outputs carries out the final classification as shown in Figure 1. The dataset includes pairs of Landsat 8-OLI images from 2016 and 2017, by PRODES (Shimabukuro et al. 2006), that compares areas in the Brazilian Amazon where a significant deforestation process has been tracked. With the EF method an overall accuracy of 97% has been achieved Ortega et al. (2019).</p>



<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" src="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2023/02/LateFusionCNN.png" alt="" class="wp-image-10724" width="796" height="248"/><figcaption>Figure 2: Siamese Network architecture by Ortega et al. (2019)</figcaption></figure>



<h4 class="wp-block-heading">Siamese Network (S-CNN)</h4>



<p>The Siamese Convolutional Neural Network is an adaptation of a traditional CNN, that includes two identical branches that share the same hyperparameters and weights values (Zhang et al. 2018) as shown in Figure 2. Daudt et al. (2018) started to implement an S-CNN for change detection in urban areas. The idea is to process the input patches through four convolutional layers with shared weights in both branches and concatenating the outputs using fully connected layers. This leads to a final feature vector that is the input for a classifier that tells if there was deforestation or no deforestation in that time span. Ortega et al. (2019) used the same dataset for the S-CNN, as they did for the EF approach, in order to compare both methods. Overall, the S-CNN was consistently better in terms of F1-Score and accuracy than the Early Fusion method.</p>



<h3 class="wp-block-heading">Fully Convolutional Network (FCN)</h3>



<p>The Fully Convolutional Network (FCN) overcomes the limitation of the CNN, for example the missing image location information by replacing the dense layers with fully connected layers (Shelhamer et al. 2016). In this section, SegNet (Badrinarayanan et al. 2016) and U-Net (Ronneberger et al. 2015), both FCN-based, are compared in a study for classifying deforestation in Korean forests (Lee et al. 2020).</p>



<h4 class="wp-block-heading">U-Net</h4>



<p>U-Net is applied mainly for the segmentation of small numbers of medical related images and was developed based on the FCN architecture. It includes an encoder and a decoder path on the. The encoder path takes an image patch with multiple channels as input and performs sub-sampling by deploying convolutional layers, ReLU activation functions and max pooling. On the other side, U-Net has two distinctive characteristics in its expansive path: the copy-and-crop step, which converts source information into contracting information using a skip connection, and convolution layers without fully connected layers in the image restoration stage. The network predicts the boundary value of the patch by mirroring the input images. By using patch units instead of sliding windows, U-Net improves its speed over previous networks. It solves the FCN problem of localization by concatenating the image using the copy-and-crop function. U-Net classified forests and non-forests, with 98.4% and 88.5% accuracy, respectively.<br>The overall accuracy of the U-Net model was 74.8%, which was 11.5% higher than that of SegNet (63.3%) (Lee et al. 2020).</p>



<h4 class="wp-block-heading">SegNet</h4>



<p>Compared to other methods of learning, SegNet is effective both in terms of learning speed and accuracy. Both an encoder and decoder are included within the architecture of SegNet. As part of the encoder process, images are compressed and features are extracted using rectified linear units (ReLUs). Upon its completion, the decoder process restores the image. Due to the use of the same pooling layer as in the encoder process, spatial information is preserved during the decoding process. This feature of SegNet differentiates it from other FCNs. When image reconstruction is complete, the image is classified using a softmax function.The model results showed that SegNet outperformed U-Net in the classification of hardwood forest and bare land, but in all other items, U-Net showed a higher rate of accuracy than SegNet (Lee et al. 2020).</p>



<h2 class="wp-block-heading">Conclusion</h2>



<p>Convolutional Neural Networks (CNN) and Fully Convolutional Networks (FCN) are both state-of-the-art deep learning techniques, in order to detect deforestation. While CNNs, such as the Early Fusion (EF) method and the Siamese Network (S-CNN), struggle with the limitation of information loss. The FCN methods, U-Net and SegNet, bypass those limitations by an Encoder-Decoder architecture, that exchange the Dense Layer with more Convolutional Filters. All methods delivered promising results regarding the classification of areas suffering much deforestation. As deep learning is still an aspiring technology, especially in the remote sensing field, many large deep learning libraries such as Keras , last visited on 11.11.2022} or Tensorflow\footnote{\url{https://www.tensorflow.org/}, last visited on 11.11.2022} do not provide an implementation. Nevertheless using multi-band satellite imagery in combination with computer vision and deep learning methods will be a auspicious topic for future work.</p>



<p></p>
<p>The post <a href="https://mobile.fhstp.ac.at/allgemein/deep-learning-for-deforestation-detection-an-insight-into-the-state-of-the-art/">Deep learning for deforestation detection. An insight into the state of the art.</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Print2Mobile &#8211; WienMobil</title>
		<link>https://mobile.fhstp.ac.at/allgemein/print2mobile-wienmobil/</link>
		
		<dc:creator><![CDATA[Manuel Hecht]]></dc:creator>
		<pubDate>Tue, 18 Oct 2022 09:17:08 +0000</pubDate>
				<category><![CDATA[Allgemein]]></category>
		<guid isPermaLink="false">https://akirchknopf-21110.php.fhstp.cc/?p=10321</guid>

					<description><![CDATA[<p>Idee Schwarzfahren wird einem in Wien zu leicht gemacht. Kontrollen kommen äußerst selten und einsteigen kann ich auch ohne gültigem Ticket. Es wird viel auf das Vertrauen der Benutzer*innen gesetzt, welche allerdings nicht oft genug auf den Kauf eines Tickets hingewiesen werden. Hier kommt mein Print2Mobile Initialprojekt zur Geltung. Auf den offizielle Entwertern der Wiener <a class="read-more" href="https://mobile.fhstp.ac.at/allgemein/print2mobile-wienmobil/">[...]</a></p>
<p>The post <a href="https://mobile.fhstp.ac.at/allgemein/print2mobile-wienmobil/">Print2Mobile &#8211; WienMobil</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<h2 class="wp-block-heading">Idee</h2>



<p>Schwarzfahren wird einem in Wien zu leicht gemacht. Kontrollen kommen äußerst selten und  einsteigen kann ich auch ohne gültigem Ticket. Es wird viel auf das Vertrauen der Benutzer*innen gesetzt, welche allerdings nicht oft genug auf den Kauf eines Tickets hingewiesen werden. Hier kommt mein Print2Mobile Initialprojekt zur Geltung. Auf den offizielle Entwertern der Wiener Linien, sollen QR-Codes angebracht werden, welche die Öffi-nutzenden Menschen an den Kauf eines Ticket erinnern soll. Kurz das Handy aus der Hosentasche ziehen, scannen und schon wird der Kauf eines Ticket per responsive Website möglich gemacht. </p>



<h2 class="wp-block-heading"><strong>Technische Umsetzung</strong></h2>



<p>Weil meine bisherige Web-Programmierung schon einige Zeit her ist, wollte ich mir für dieses Projekt nicht all zu viel vornehmen und im Rahmen des realistischen bleiben. Ein Konstrukt mit HTML, Styles mit CSS und Animationen mit JavaScript. Zusätzlich habe ich auf Frameworks wie Bootstrap, Splide und AOS zurückgegriffen. </p>



<p>Es gelang mir ein guter Einstieg um wieder die Basics der Web-Programmierung aufzuschnappen. </p>



<h2 class="wp-block-heading">Der Prototyp</h2>



<p>Für den Prototypen (siehe unten) war es mir wichtig, den Use Case so realistisch wie möglich zu gestalten. Aus einem alten Karton, etwas Papier, Klebstoff und einem Edding, wurde ein selbstgebastelter Wiener Linien Entwerter wie man ihn aus jeder Ubahn-Station kennt. Ergänzt wurde er mit einem QR-Code plus Aufschrift &#8220;Kein Ticket?&#8221;.</p>


<div class="wp-block-image">
<figure class="aligncenter size-full is-resized"><img loading="lazy" decoding="async" src="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2022/10/prototyp-scaled.jpg" alt="" class="wp-image-10334" width="379" height="674" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2022/10/prototyp-scaled.jpg 1440w, https://mobile.fhstp.ac.at/wp-content/uploads/2022/10/prototyp-864x1536.jpg 864w, https://mobile.fhstp.ac.at/wp-content/uploads/2022/10/prototyp-1152x2048.jpg 1152w" sizes="auto, (max-width: 379px) 100vw, 379px" /></figure></div>


<h2 class="wp-block-heading">Die Landing Page</h2>



<p>Auf den Bildern ist die Landing Page zu sehen, welche unter it221515.students.fhstp.ac.at/wienmobil aufrufbar ist. Die Idee war es gleich auf den ersten Blick einen Bezug zum Prototypen herzustellen und dem/der User*in die Möglichkeit zu bieten das gewünschte Ticket zu kaufen. Weiter unten finden man noch eine Werbung der eigenen App von WienMobil. Im Footer gibt es die Möglichkeit zur Routenplanung und zum Ticketshop zu gelangen, sowie Hilfe anzufordern. </p>



<figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex">
<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1170" height="2532" data-id="10328" src="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2022/10/20221018_081844000_iOS-2.jpg" alt="" class="wp-image-10328" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2022/10/20221018_081844000_iOS-2.jpg 1170w, https://mobile.fhstp.ac.at/wp-content/uploads/2022/10/20221018_081844000_iOS-2-710x1536.jpg 710w, https://mobile.fhstp.ac.at/wp-content/uploads/2022/10/20221018_081844000_iOS-2-946x2048.jpg 946w" sizes="auto, (max-width: 1170px) 100vw, 1170px" /></figure>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1170" height="2532" data-id="10329" src="https://akirchknopf-21110.php.fhstp.cc/wp-content/uploads/2022/10/20221018_081849000_iOS-1.jpg" alt="" class="wp-image-10329" srcset="https://mobile.fhstp.ac.at/wp-content/uploads/2022/10/20221018_081849000_iOS-1.jpg 1170w, https://mobile.fhstp.ac.at/wp-content/uploads/2022/10/20221018_081849000_iOS-1-710x1536.jpg 710w, https://mobile.fhstp.ac.at/wp-content/uploads/2022/10/20221018_081849000_iOS-1-946x2048.jpg 946w" sizes="auto, (max-width: 1170px) 100vw, 1170px" /></figure>
</figure>
<p>The post <a href="https://mobile.fhstp.ac.at/allgemein/print2mobile-wienmobil/">Print2Mobile &#8211; WienMobil</a> appeared first on <a href="https://mobile.fhstp.ac.at">Mobile USTP MKL</a>.</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
