Funktionen
Hauptaugenmerk bei der App Adaptype ist die Funktion zur Messung vom Abstand zwischen Smartphone und Gesicht. Diese Funktion wird benötigt um, je nach Abstand die Schriftgröße automatisch anzupassen. Basis meiner Programmierung war das Paper und das GitHub Repository von Ivan Ludvig Tereshko. Hierbei werden Gesicht und Augen erkannt, und anhand des Abstands zwischen den Augen wird der Abstand zwischen Smartphone und Gesicht berechnet. Dieser Wert wird in Android erfasst und berechnet, und an den WebContainer weitergegeben, welche auf Chrome basiert.
Eine zweite Hauptfunktion wird die Weitergabe des Werts vom Lichtsensor, um damit das visuelle Erscheinungsbild der App zu verändern. Da diese Funktionalität sehr verbreitet ist, wurde mit der anderen Funktion begonnen. Im aktuellen Prototyp ist sie noch nicht vollständig ausprogrammiert.

Probleme
Da Java und Android für mich völlig neu waren, entstand eine erhebliche Einstiegshürde. Die Idee, die gesamte App nur mit Android zu programmieren wurde somit nach einigen Versuchen, wieder verworfen. Die Umsetzung mit dem WebContainer bringt somit einen prinzipiellen Vorteil: Jede „Normale“ Website läuft in diesem Container und die Variable mit dem Abstand zwischen Handy und Gesicht kann relativ einfach an Html / Js übergeben werden.
SvelteKit
Das Framework SvelteKit ist relativ neu und noch im Beta Stadium. Dementsprechend sind auch Dokumentation, Tutorials bzw. StackOverflow nocht nicht so weit wie beispielsweise bei VueJS. Prinzipiell war das nicht schlimm. Bei der Übergabe vom Wert von Android zu SvelteKit war es ein bisschen mühsamer. Im Vergleich dazu funktionierte es mit der Svelte Version ohne „KIT“ auf eine andere weise, was mir anfangs nicht klar war. Im Nachhinein ist man immer schlauer

Future Todos
Da Teile der App für meine Masterarbeit verwendet werden, wird die Entwicklung noch etwas weiter gehen. Die Funktion mit dem Lichtsensor ist auf jeden Fall noch ein Must-have. Des Weiteren wäre es gut, wenn nach der Veränderung der Schriftgröße, der letzte gelesene Satz wieder automatisch in den Viewport springt. Diese Funktion ist bereits begonnen, aber noch nicht ganz fertig.

Quellen
https://www.techrxiv.org/articles/preprint/Calculating_screen_to_face_distance/12951320
https://github.com/IvanLudvig/Screen-to-face-distance

The post App Adaptype appeared first on Mobile USTP MKL.

Der englische Begriff „Svelte“ bedeutet so viel wie schlank, grazil, anmutig, elegant oder vornehm. So ungefähr kann man sich auch das Konzept des gleichnamigen JavaScript Compilers SvelteJS vorstellen, welchen ich hier vorstelle.

Die Idee

Vater von SvelteJS ist ein gewisser Rich Harris, welcher bei der New York Times beschäftigt ist. Er hat vor SvelteJS schon die Libraries „Reactive“, „Rollup“ und „Bublé“ programmiert. Er kritisierte an etablierten Frameworks wie React, Vue und Angular, dass diese von der Datenmenge zu groß sind, langsam im Bezug auf die Performance und dass die Kompatibilität zu anderen JavaScript Libraries nicht einwandfrei funktioniere.

Geschichte

Die Version eins wurde im Jahr 2016 veröffentlicht. Zwei Jahre später, also 2018 die Version zwei. Ab Version drei ist SvelteJS in TypeScript geschrieben – diese wurde 2019 veröffentlicht. Eine große Neuerung war die Veröffentlichung von SvelteKit im Jahr 2021. Näheres dazu folgt später, also weiterlesen zahlt sich aus ????

Warum sollte man SvelteJS verwenden?

• SvelteJS ist ein Compiler, keine Library oder Framework
• Dieser Comiler erzeugt hoch optimierten JavaScript Code
• Das heißt auch, dass kein Virtual DOM verwendet wird.
• Laut eigenen Angaben ist SvelteJS 30% schneller als die Konkurenz.
• Megacoole Animationen und Transitions, welche Out-Off-The-Box funktioniern.
• Mit SvelteKit kann man Router und Store gleich mitverwenden.
• SvelteNative als Möglichkeit für Mobile Anwendugen.
• Und zum Schluss mein persönlicher Hauptgrund: SvelteJS ist wirklich einfach zu erlernen.

Verwendung

Es liegt nahe, dass SvelteJS von der New York Times verwendet wird, da Rich Harris dort wirkt. Aber auch andere prominente Beispiele gesellen sich zu dieser Aufzählung hinzu: Apple, Spotify, Rakuten, Bloomberg, Ikea, derStandard.at.

Die allseits beliebte Website „Stack Overflow“ kam bei einer Abstimmung ihrer User:innen, zum Thema „Most Loved Web Framework“ ebenfalls auf SvelteJS. Auch bei StateofJS ist SvelteJS auf Platz eins bei „Most Satisfaction“.

Frontend Battle

Vergleich

Popularität

Team oder Organisation

Quelle: Max Schwarzmüller https://www.youtube.com/watch?v=DZyWNS4fVE0

Syntax

Klammern

Variablen werden mit einfachen Klammern geschrieben, also so: {dasIstMeineVariable}
Ebenfalls lässt sich innerhalb der Klammer JavaScript Code ausführen.

CSS

In SvelteJS ist automatisch das geschriebene Stylesheet scoped für das jeweilige File, oder die jeweilige Komponente.

Filename

Die Dateien haben die wunderschöne Dateiendung MyFile.svelte

Aufbau

Der Aufbau lässt sich einfach Erklären: es sollen ein Script Tag, ein Tag für alle Html Elemente, zum Beispiel Main, und ein Style Tag vorhanden sein.

Das sieht dann ca. so aus:

<script></script>

<h1>Headline</h1>
<p>Paragraph<p>

<style></style>

Syntax Beispiele

Wie kann man eine Variable mit dem Inhalt
„Hello Masterklasse Mobile“ rendern?

<script>
	let hello = 'hello masterklasse mobile';
</script>

<h1>{hello}</h1>

Wie schreibt man eine For-Schleife?

<script>
  let cats = [
    { id: 1, name: 'Garfield' },
    { id: 2, name: 'Simons Cat' },
    { id: 3, name: ‘Minki’ }
  ];
</script>

<h1>Best Cats</h1>

{#each cats as cat}
  <p>{cat.name}</p>
{/each}

Wie kann man einen Html String rendern/parsen?

<script>
	let string = `here is my <strong>Bold Text</strong>`;
</script>

<p>{@html string}</p>

Wie kann man das aktuelle Datum
in einem <p> Tag ausgeben?

<script>
</script>

<p>
{new Date()}
</p>

Wie kann man beim Click auf einen Button
eine Funktion ausführen?

<script>
	let count = 0;

	function incrementCount() {
		count += 1;
	}
</script>

<button on:click={incrementCount}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

Wie kann man eine Nested Component
importieren und aufrufen?

<script>
	import Nested from './Nested.svelte';
</script>

<Nested/>

Wie kann man props an eine Component übergeben?

<script>
import Nested from './Nested.svelte';
</script>

<Nested answer={42}/>


// Nested.svelte
<script>
	export let answer;
</script>

<p>The answer is {answer}</p>


//The anwer is 42

Wie kann man eine Computed Property benutzen?

<script>
	let count = 5;
	$: doubled = count * 2;
</script>

<p>{count} doubled is {doubled}</p>

Wie schreibt man IF Conditions?

{#if user.loggedIn}
	<p>hello!</p>
{/if}

{#if !user.loggedIn}
	<p>go to hell!</p>
{/if}

Wie schreibt man einen Else Block?

{#if user.loggedIn}
	<p>hello!</p>
{:else}
	<p>go to hell!</p>
{/if}



// A # character always indicates a block opening tag. 
// A / character always indicates a block closing tag. 
// A : character, as in {:else}, indicates a block continuation tag.

So schaut Else If aus:

{#if x > 10}
  <p>{x} is greater than 10</p>
{:else if 5 > x}
  <p>{x} is less than 5</p>
{:else}
  <p>{x} is between 5 and 10</p>
{/if}

Wie kann man Statements mit $ benutzen?

<script>
	let count = 5;
		
	$: if (count >= 10) {
	   alert(`count is dangerously high!`);
	}	
</script>

Wie kann man ‚object of properties‘ an eine Component übergeben?

<script>
	import Info from './Info.svelte';

	const pkg = {
		name: 'Florian',
		workshop: 'Svelte'
	};
</script>

<Info name={pkg.name} workshop={pkg.workshop}/>

Welche Lifecycle Events gibt es in Svelte?

onMount
onDestroy
beforeUpdate
afterUpdate
tick

Noch mehr Syntax?!

Hier eine kleine Auswahl an spezielleren Lösungen:

Await Blocks

{#await promise}
  <p>...waiting</p>
{:then number}
  <p>The number is {number}</p>
{:catch error}
  <p style="color: red">{error.message}</p>
{/await}

DOM Events

<div on:mousemove={handleMousemove}>
	The mouse position is {m.x} x {m.y}
</div>

Bindings

<script>
  let name = 'world';
</script>

<input bind:value={name}>

<h1>Hello {name}!</h1>


//__________________________

<script>
  let toggle = false;
</script>

<label>
  <input type=checkbox bind:checked={toggle}>
  Newsletter abonieren?
</label>

{#if toggle}
  <p>Ich schicke dir 1000 Mails am Tag</p>
{:else}
  <p>Bitte Bitte Bitte</p>
{/if}

Spezial Elements

<svelte:head>
  <link rel="stylesheet" href="tutorial/dark-theme.css">
  <title>das ist meine Headline {My Value}</title>
</svelte:head>

Was ist SvelteKit?

Die Eigendefinition lautet: „SvelteKit is a framework for building extremely high-performance web apps.”

Also ein Framework für einen Compiler? Ja, ganz genau! Grob gesagt verhält sich SvelteKit zu SvelteJS ähnlich wie Next zu React oder Nuxt zu VueJS.

Routing ist eingebaut, und ersetzt damit „Sapper“. Praktisch finde ich auch Folder Based Routing, welches ebenfalls dabei ist.

Ein weiterer Vorteil von SvelteKit ist Server Side Rendering, welches ebenfalls dadurch möglich ist.

Hands On! Worauf wartest du?

npm init svelte@next my-app
cd my-app 
npm install 
npm run dev

==> Localhost:3000 

Fazit

Nach einigen kleinen Projekten und einer umgesetzen Firmenwebsite kann ich sagen: Ich bin noch immer begeistert.

SvelteJS ist wirklich einfach zu erlernen und auch zu verwenden. Je nach Komplexität der Webanwendung würde ich es auf jeden Fall empfehlen, sich es zumindest anzusehen.

Ein kleines Manko ist jedoch festzustellen: sucht man, in Österreich nach Stellenausschreibungen, wo das Wort Svelte vorkommt, wird man leider enttäuscht (Stand Februar 2022). Es ist schon klar, dass nicht jede Firma sobald ein neues Tool am Markt erscheint, den Gesamten Sourcecode wegschmeißt, und sofort auf das neueste Ding umsteigt – dennoch wäre es wünschenswert, wenn man zum einen von großen Firmen (Angular = Google, React = Facebook) wegkommt, und zum anderen eine unabhängige, schnelle und einfache Lösung wie SvelteJS verwendet.

Der Autor wurde übrigens nicht von SvelteJS bezahlt ????

Im Repository findest du ein Beispiel für eine simple Webapp, welche eine Filterfunktion für eine Liste beinhaltet und natürlich eine Todo Liste welche auch auf den Store zugreift – Viel Spaß damit!

https://git.nwt.fhstp.ac.at/it201505/svelte.git

Quellen

Max Schwarzmüller: https://www.youtube.com/watch?v=DZyWNS4fVE0

Official Docs: https://svelte.dev

SvelteKit: https://kit.svelte.dev/

The post Einstieg in Svelte appeared first on Mobile USTP MKL.

Der Plan

Wir planten welche Aufgaben ich übernehmen könnte, sodass ich etwas lerne und auch die junge Firma unterstützen kann. Im Frühjahr 2021 wurde der Shop mit Shopify als Backend und einem Shopify Theme als Frontend umgesetzt. Da die Anforderungen an den Webshop ständig steigen war der Wunsch nach einem Custom Framework im Frontend da. Aus diesem Grund viel die Wahl auf VueStorefront welches eine gute Anbindung zu Shopify versprach. Zusätzlich wurde die Lieferkettendarstellung mit einem zweitem Backend, nämlich Squidex gelöst. Bei jedem Produkt sind die einzelnen Schritte in der Produktion nun darstellbar und für die Konsumenten klar ersichtlich. Diese Darstellung ist ein besonderes Feature welches Ikonity im Vergleich zur Konkurrenz bietet – einer der USP sozusagen.

Geplanter Stack

Frontend: VueStorefront inkl. NuxtJS
Backend: Shopify
Backend Nr.2: Squidex oder Storyblok

Hands On!

Nach vielen Stunden Brainstorming, Recherche, Design begann der Prozess bei der Umsetzung des Shops. Die Umsetzung der Lieferkettendarstellung (oder Supply-Chain) erfolgte zu Beginn, da diese auch in der bestehenden Website implementiert wurde.
Beispiel: https://ikonity.at/pages/krxln

Die VueStorefront bietet einiges an Dokumentation und auch an Tutorials. Ein richtiger Durchbruch war, als die Kommunikation zu Shopify funktionierte und auch das Einkaufen möglich war. Dafür stellten sich andere Dinge wiederum als schwierig dar. Zum Beispiel die Navigation. Eine etwas aufwendigere Navigation wäre schon machbar gewesen, doch nur statisch und ohne Anbindung ans Backend. Andere Dinge wie auch die Suchfunktion gestalteten sich ebenfalls als mühsam umzusetzen.

Abbruch VueStorefront

Die oben genannten Erschwernisse wären bestimmt noch zu Verkraften gewesen, und für manche Tasks hätte sich abseits von VueStorefront noch eine Lösung finden lassen. Jetzt kommt das große aber. Im Sommer wurde von Shopify der Online Store 2.0 vorgestellt, der viele out-of-the-box Lösungen bietet die sonnst nur langwierig umsetzbar gewesen wären. Ebenfalls kam hinzu, dass einer der neuen Modedesigner ein Plugin zur individuellen Bestickung der Kleidung benötigte welches ebenfalls sehr mühsam umzusetzen gewesen wäre.

meine Learnings

• erstes Projekt mit Nuxt.js
• erstes eCommerce Projekt
• einblick in Shopify
• einblick GraphQl
• übersicht Squidex
• übersicht VueStorefront

Fazit

Technologische Möglichkeiten ändern sich laufend, und sehr kurzfristig. Hier am Laufenden zu bleiben und zu betrachten welche Lösung für das (realworld) Produkt, die Entwickler:innen und vor allem für die Konsument:innen am besten ist, macht einerseits Freude andererseits Kopfzerbrechen. Eine 100% optimale Lösung kann es wohl nie geben, doch durch Recherche sowie „Trial and Error“ lassen sich auch zufriedenstellende Lösungen finden.

App Anniv

Als für mich die Entwicklung beim Webshop endete, nahm ich mir vor, an einer eigenen Idee für eine App weiterzumachen. Schon seit langem wollte ich eine App programmieren, die in der Basisversion ein simpler Geburtstagskalender ist, und modular erweitert werden kann. Die erste Überlegung war wie ich den Datensatz so sortieren kann, dass es wie auf einem typischen Geburtstagskalender (oder wie auf Facebook) aussieht. Die von mir angewendete Lösung legt einen eigenen Eintrag in der Datenbank an, welcher das Geburtsjahr mit dem Jahr 2000 überschreibt. So kann ich im Frontend den Datensatz sehr einfach sortieren.

Als das erledigt war musste ich mich für ein Framework entscheiden. Da die verfügbare Zeit schon dem Ende zuging, habe ich mich für VueJS entschieden welches ich bereits mehrmals verwendet haben. Als Backend sprang mir Firebase ins Auge, da ich nicht sehr viele Funktionen benötige und ich Firebase schon immer einmal ausprobieren wollte.

Bei der Verbindung von Frontend und Backend half mir eines der vielen „Vue Firebase Crud“ Tutorials die im Netzt angeboten werden.  

Meine Learnings

• Firebase erstmals verwendet
• Crud App
• Konzeption / Design / Programmierung

Future Todos

• App mit Ionic oder React Native neu Programmieren
• Features wie Push Notifications, Favoriten, automatische Nachrichten

The post Webshop Ikonity & App Anniv appeared first on Mobile USTP MKL.

Nuxt JS ist eine Library für VueJs. Aber was ist VueJs?

VueJs ist ein Frontend JavaScript Framework welches in der letzten Zeit immer mehr an Beliebtheit gewinnt. VueJs wurde von Evan You, einem Entwickler, der damals an Angular-Projekten arbeitete, entwickelt. Angular empfand er für kleine und mittlere Projekte zu komplex. VueJs war zuerst ein Nebenprojekt welches Ähnlichkeiten zu Angular hat. Später wurden Teile von React wie Routing und State Management übernommen.

Okay das wäre geklärt, aber was ist jetzt NuxtJs, und warum brauche ich ein Framework (oder besser gesagt eine Library) für ein Framework?

NuxtJs vereinfacht die Entwicklung von VueJs Applikationen besonders im Bezug auf Server Side Rendering. NuxtJs verhält sich zu VueJs etwa so wie NextJs für React. Also NuxtJs ist ein Generator für statische und serverseitig gerenderte Anwendungen und hat zusätzlich dazu noch einige kleinere Vorteile. Bei der Verwendung von NuxtJs ist das manuelle Anlegen von Routes und Store nicht mehr notwendig, diese Aufgabe übernimmt NuxtJs für uns automatisch oder zumindest einfacher als in VueJs.

Universal Apps

Was ist eine „Universal App“?
Eine Universal App wird beschrieben als JavaScript Code, der am Client und am Server ausgeführt werden kann. 

Moderne JavaScript Frameworks wie Vue ermöglichen das Erstellen von Single Page Applikationen, welche viele Vorteile bieten. Nachteile von SPAs sind mögliche lange Ladezeiten und dass die Seiten anfangs leer sind. Die Seiten werden mit JavaScript befüllt, was für Probleme bei Googles Webcrawlern sorgt und somit für SEO nicht optimal ist.

Eine Universal App soll genau das verbessern. Statt eine leere index.html zu senden, wird die Applikation am Server „preloaded“ und „prerendered“. 

NuxtJs und Universal Apps

In NuxtJs können Properties wie „isServer“ und „isClient“ gesetzt werden und damit einfach definiert, wie und wo diese Komponenten der Seite gerendert werden. Ebenfalls interessant ist die „asyncData method“ welche die aus Vue bekannte „Data“ quasi ersetzt und Daten vorab von anderen Quellen abruft.

https://nuxtjs.org/docs/concepts/context-helpers

Statisches rendern von Vue Apps

Ebenfalls interessant an NuxtJs ist „nuxt generate“ welche im File „nuxt.config“ eingestellt bzw. aufgerufen wird. Dieser Befehl generiert eine komplette statischer Version der Website. 

Automatisches Code Splitting

NuxtJs erstellt für jede Page die statisch generiert ist auch ein eigenes JavaScript File mit nur dem Code, der auch wirklich benötigt wird. Das kann ebenfalls ein Vorteil sein für die Geschwindigkeit der App. 

Struktur

Nuxt bietet standardmäßig eine übersichtliche Struktur, welche es einfach macht, damit zu arbeiten. Einige der üblichen Verzeichnisse sind:

• Components: wie der Name schon sagt, werden hier die Vue Komponenten abgelegt. 
• Layouts: Das Grundlayout für alle Pages wird hier festgelegt.
• Pages: Jede Site und SubSite ist hier zu finden. Anhand der Ordnerstruktur und des Datenamens wird daraus das Routerfile generiert.
• Store: Hier ist alles vom Vuex Store abzulegen.

Automatisch erstelltes Router File

Durch das (richtige) erstellen der oben genannten Ordnerstruktur wird das Routerfile automatisch angelegt. NuxtJs bietet die Möglichkeit für jede Page einen Ordner anzulegen, in dem dann die Pages wieder mit index.vue benannt werden. Dynamische Pages werden ganz einfach mit einem Unterstrich „_“ benannt und so wird automatisch der Pfad so gesetzt.   

Fonts

Auch für das Einbinden von Fonts hat sich jemand etwas überlegt. Jedoch ist das anfangs umständlicher als erwartet. Eine mögliche Methode, welche bei mir funktioniert hat, ist über eine eigene Dependency.

Erster Schritt
npm install --save-dev @nuxtjs/google-fonts

dann gibt es einen eigenen Bereich in der nuxt.config.js wo das Modul importiert werden muss:
{
  buildModules: [
    '@nuxtjs/google-fonts'
  ],
}

Jetzt kann der gewünschte Font hinzugefügt werde:
googleFonts: {
  families: {
    Roboto: true,
    'Josefin+Sans': true,
    Lato: [100, 300],
    Raleway: {
      wght: [100, 400],
      ital: [100]
    },
  }
}

https://google-fonts.nuxtjs.org/setup

Fazit

Der Einstieg in NuxtJs hat mir viel Freude bereitet, besonders die einfachen Möglichkeiten, welche standardmäßig zur Verfügung stehen. Bei meiner persönlichen Portfolio Website konnte ich mir somit einiges an Arbeit ersparen, um eine schnelle und halbwegs SEO optimierte Website zu haben. Ab wann sich der Umstieg zu NuxtJs bei einer typischen Smartphone App oder Webanwendung auszahlt, ist mir noch nicht ganz klar. Ebenso finde ich es noch nicht ganz einleuchtend, wann ich welche Funktionen von NuxtJs verwenden soll, und wann SSR wirklich notwendig sind. 

Quellen

https://www.vuemastery.com/courses/scaling-vue-with-nuxt-js/creating-a-nuxt-app

https://medium.com/vue-mastery/10-reasons-to-use-nuxt-js-for-your-next-web-application-522397c9366b

https://www.youtube.com/watch?v=nteDXuqBfn0

https://www.tarcgn.de/warum-nuxt-js-und-nicht-pures-vue-js/

https://evanyou.me/

https://www.bornfight.com/blog/nuxt-js-over-vue-js-when-should-you-use-it-and-why/

The post Einstieg in NuxtJS appeared first on Mobile USTP MKL.

Einleitung

Der Begriff „Mobile First“ wurde unter anderem von Luke Wroblewski geprägt und bezeichnet die Idee bei Applikationen und Websiten die mobile Version, also für das Smartphone oder Tablet, zu priorisieren und als Erstes zu entwickeln und zu designen.¹

Der ehemalige Google Chairman Eric Schmidt sagte dazu:

„The simple guideline is whatever you are doing—do mobile first”

² was auf Deutsch so viel bedeutet wie: „Die einfache Regel ist, egal was du machst mach es zuerst für mobile Geräte“.

Obwohl das Buch und die dazugehörige Forschung bereits im Jahr 2011 erschienen sind, gelten viele der grundlegenden Überlegungen nach wie vor. Der folgende Artikel ist ein Versuch die Überlegungen aus 2011 mit dem Stand der Technik vom Jahr 2021 zu vergleichen.

Mobile Internetnutzung

Das Smartphone ist im Jahr 2021 nicht mehr wegzudenken und omnipräsent in der Gesellschaft vertreten. Seit 2007³ das iPhone der Firma Apple vorgestellt wurde, entwickeln sich Smartphones nicht nur zum „schlauen Telefon“, sondern haben längst zusätzlich zum Telefonieren unzählige andere Funktionen übernommen. Die häufigsten Anwendungen (in Österreich und im Jahr 2019) waren zum Beispiel: Instant Messaging, fotografieren und filmen, Emails, zum Surfen im World Wide Web sowie die Verwendung als Wecker.⁴

Auch für den Bereich E-Commerce wird das Smartphone immer bedeutsamer. So gaben im Jahr 2013 nur 9% der Befragten in Österreich an, Waren über das Smartphone gekauft zu haben. Im Jahr 2019 gaben 32% an Waren via Smartphone gekauft zu haben.⁵ Zudem gaben 80% der Befragten in Österreich an, ein Smartphone für die Nutzung des Internets zu verwenden.⁶ Europaweit liegen Mobiltelefone bei rund 52% der Seitenaufrufe und in Südamerika, Afrika und Asien liegt der Prozentsatz mobiler Aufrufe bereits bei über 60%.⁷

Diese, und weitere Gründe legen nahe, sich mit dem Design und der Entwicklung von mobilen Websiten und Applikationen zu beschäftigen und auch zu priorisieren da diese, unter Anbetracht der beschriebenen Tatsachen, stetig wichtiger werden.

Einschränkungen auf mobilen Geräten

Bildschirmgröße

Eine offensichtliche Einschränkung von Smartphones im Vergleich zu Desktop Computern ist die Größe des Displays, die nur einem Bruchteil eines „großen“ Bildschirms entspricht.

Im Ansatz Mobile First wird die Einschränkung des kleineren Displays nicht negativ gesehen, sondern als Grund, sich in der Website oder App auf das Wesentliche zu beschränken. Am Beispiel von Flickr wurde das im Buch illustriert: von mehr als 60 Optionen in der Navigation wurde auf sechs Optionen reduziert. Konzipiert man die Mobile Site als Erstes so ist es erforderlich sich zu überlegen, wo die Prioritäten liegen. Die Struktur wird dann vom „kleinen“ zum „großen“ übertragen, so der Denkansatz.

Leistung

Mobile Geräte werden an allen möglichen Plätzen benutzt und oft reicht die Netzqualität nicht aus, um ohne Wartezeit die verschiedenen Services zu benutzen. Luke Wroblewski schreibt dazu: „Designing for mobile means designing for this reality“. Er führt weiter aus, dass alles was zur Verbesserung der Leistung beigetragen werden kann, getan werden sollte.⁸ Teil des Konzepts ist, die Anzahl der zu downloadenen Dateien und der abgesendeten HTTP requests zu reduzieren.⁹

33,8% der Befragten gaben an, dass eine lange Ladezeit ein Grund für Unzufriedenheit beim mobilen Internetsurfen ist.¹⁰ Beim Konzept Mobile First wird davon ausgegangen, dass wenn eine Anwendung auf dem Smartphone schnell und flüssig läuft, auch bei der Anwendung auf dem Desktop Rechner sich die Geschwindigkeit erhöht.

Zeit und Raum

Wie der Name „Mobile Phone“ schon sagt sind Smartphones mobil anwendbar und werden von ihren Userinnen und Usern an unterschiedlichsten Plätzen, zu unterschiedlichsten Zeiten und unter den unterschiedlichsten Umständen verwendet.

Der Umstand, dass Userinnen und User ihre Devices nicht nur in ruhiger Umgebung zu den besten Bedingungen benutzen sollten auf jeden Fall bedacht werden. Unter Umständen wird das Smartphone nur mit einer Hand, also einem Daumen und auch nur nebenbei quasi mit einem Auge bedient.

Laut Googles „Mobile User Experience Strategy“ gibt es drei grundsätzliche Verhaltensgruppen

A. „Repetitive now“ – diese Userinnen und User rufen die gleiche Information immer wieder ab, wie zum Beispiel die Wetterdaten oder Aktienkurse.

B. „Bored now“ – diese Userinnen und User möchten sich die Zeit mit dem Smartphone vertreiben, zum Beispiel die Wartezeit am Bahnhof oder am Flughafen.

C. „Urgent now“ – diese Gruppe möchte schnell etwas Bestimmtes finden.¹¹

Mobile Vorteile

Zu den diversen Einschränkungen die Mobile Devices aufweisen kommen jedoch auch einige Vorteile, wie die Vielzahl an Sensoren und technischen Features welche zur Standardausstattung geworden sind.

So geben 47% der Befragten in Österreich an, dass Fotografieren mit dem Smartphone eine Aktivität des täglichen Lebens ist und 75%, dass sie mit das Smartphone zum Fotografieren nutzen. ¹² Ebenso geben 52% der Befragten an, ihr Smartphone zur Navigation und Routenplanung zu nutzen. ¹³

Touchdisplay

Der wohl offensichtlichste Unterschied zwischen Desktop Computer und Smartphone ist wohl die primäre Eingabe. Während an Desktop Computern und Laptops die Eingabe mit Tastatur und Maus Standard ist, basiert die Eingabe bei Smartphones und Tablets auf der Eingabe via Touchdisplay.

Die menschlichen Finger sind nicht die besten Eingabewerkzeuge. So fand eine Studie heraus, dass fast die Hälfte der Userinnen und User nicht absichtlich auf eine Anzeige tippt, sondern aus Versehen.¹⁴

Um für die Userinnen und User eine komfortable Eingabemöglichkeit zu ermöglichen, empfiehlt es sich an die Mindestgrößen wie zum Beispiel der Human Interface Guidelines von Apple zu halten.¹⁵ Hier wird eine Mindestgröße von 44×44 pt vorgegeben. Google empfiehlt eine Größe für Touchscreen-Objekte von 7–10mm. ¹⁶

Entwicklung

Das Buch „Mobile First“ von Luke Wroblewski ist im Jahr 2011 erschienen und wurde 2020 frei verfügbar ins Web gestellt. Da sich besonders Smartphones rasant weiterentwickeln haben sich einige Dinge in den letzten neun Jahren geändert. Die grundsätzliche Bedienung von Smartphones jedoch nicht.

Displaygröße

Die am Markt verfügbaren Smartphones wurden in den letzen Jahren immer größer.¹⁷ Dieser Umstand verändert mitunter auch die Usability von Websites und Apps. Eine Studie zeigte dass, 49% ihr Smartphone mit einer Hand halten und mit dem Daumen der gleichen Hand das Display zur Interaktion berühren. 36% halten das Gerät mit einer Hand und berühren das Display mit Fingern der anderen Hand und 15% benutzen das Device mit beiden Händen. Daraus ergibt sich das einige Positionen die weiter oben liegen schwieriger zur erreichen sind und mehr Anstrengung für die Nutzerinnen und Nutzer bei der Verwendung bedeuten.¹⁸

Mobilfunk schneller

Beim Konzept „Mobile First“ wurde die eingeschränkte Bandbreite bei Mobilfunknetzen als Einschränkung betrachtet. Da sich die Internetgeschwindigkeit laufend erhöht wird die Einschränkung weniger bedeutend. ¹⁹

Fazit

Auch wenn sich mobile Geräte verbessern, und die Bandbreite ständig steigt verändern sich Grundlegende Benutzungskonzepte von Smartphones nicht stark. Mobile First ist bestimmt kein Allheilmittel sondern nur ein Ansatz wie über Software- und Webentwicklung nachgedacht werden kann. Der beschriebene Grundansatz im Buch, welches 2011 erschienen ist, geht noch nicht auf Technologien wie Smartwatches, Audiosteuerung, Internet of Things und Virtual Assistants ein.

The post appeared first on Mobile USTP MKL.

Typografie 

Mit dem Wort Typografie ist die Kunst beziehungsweise die Lehre der grafischen Gestaltung, die auf irgendeine Weise mit Schriftzeichen zusammenhängt. 

Typedesign 

Typedesign ist die Kunst und der Prozess der Schriftgestaltung. 

Kalligrafie 

Kalligrafie bezeichnet die Kunst des „Schönschreibens“. 

Lettering 

Beim Lettering werden Buchstaben oder Wörter einzeln gezeichnet, gemalt, gesprüht, graviert, in Holz geschnitten, in Stein gehauen etc. 

Typografische Grundlagen 

Klassifizierungen

Grundsätzlich dienen Schriftklassifizierungen zur Ordnung und zum Katalogisieren von verschiedensten Schriften. Die verschiedenen Kategorien sind nicht nur für das Visuelle Erscheinungsbild, die Semantik und Bedeutung, sondern auch für die Lesbarkeit verantwortlich. Hier eine Übersicht der häufigsten Kategorien:

• Serifenlose Schriften, auch Groteskschriften genannt
• Serifenschriften, auch Antiquaschriften genannt
• Slabserif
• Klassizistische Antiqua
• Schreibschriften
• Handschriften
• Monospaced
• gebrochene Schriften

weiter Informationen unter https://www.typolexikon.de/schriftklassifikation

Semantik 

Vielen Schriften verbindet man mit einer visuellen Aussage, ähnlich wie bei Bauwerken. Das ist bestimmt kein Zufall! Zum üblichen Baustil einer Epoche gab es oft auch eine passende Schriftklassifizierung. Hier stechen Gothik, mit gebrochenen Schriften, der Klassizismus mit klassizistischen Antiquaschriften und das Bauhaus mit Groteskschriften hervor.

Besonders gefährlich ist es, einer Schrift nachzusagen sie sei „neutral“. So könnte man auf die Idee kommen und diese für alles erdenkliche Nutzen. Hier am Beispiel von Helvetica:

Interessanter für die Leserin und den Leser wird es, wenn ein größeres Spektrum an typografischen Möglichkeiten verwendet wird. Bei einer „Allerweltsschrift“ wie Helvetica ist die Verwechsulungsgefahr außerdem sehr hoch.

Ohhhh das sieht doch gleich viel Nachvollziehbarer aus, und die Zuordnung fällt viel leichter.
Vertauscht man diese Zuordnungen, entsteht etwas das wie eine Parodie wirkt. Der Schriftzug des Steuerberaters wirkt wohl nicht sehr vertrauenswürdig, und der Kindergarten wirkt nicht sehr Kindgerecht.

Schriftmischung

Werden verschiedene Schriften in verschiedenen Schriftgraden verwendet, so entsteht automatisch eine Art Hierachie, welche sich auf das Leseverhalten auswirkt. Bei der praktischen Anwendung empfiehlt es sich ebenfalls, sich an gewisse handwerkliche Grundregeln zu halten.

Lesbarkeitstipps 

Schriftgröße am Endgerät testen
Human Interface Guide oder Material Design
Versalien sind schlechter lesbar
nicht mehr als 60 – 72 Zeichen pro Zeile
der Zeilenabstand darf auch vergrößert werden

Text im Userinterface 

Beantworte: Wo, woher, wohin ?
Beschrifte immer alles !
Signalisiere Interaktivität eindeutig !
Vermeide die Antwortern ja & nein und ok im Dialog

Typografische Hierarchie 

Schriftwahl

Keine Display Schriften für Fließtext
Je langweiliger, desto besser
Sans und Serif sind beide in Ordnung
Unterscheidbare Buchstabenformen sind wichtig

Mikrotypografie

Durch verschiedene historische Geräte, wie die Schreibmaschine wurde die Eingabe von zum Beispiel Anführungszeichen erschwert bzw. komplett ignoriert. Korrekte Typografische Anführungszeichen haben es auch nicht auf Moderne Tastaturen geschafft, hier muss meistens Software Abhilfe schaffen.

Quellen und Inspiration

https://frankrausch.com/
www.zeichenschatz.net/speaker
https://typografie.de
https://typefacts.com/
https://spiekermann.com

The post Digitale Typografie appeared first on Mobile USTP MKL.

Folgende Problemstellung tritt meiner Meinung dabei auf:
Warum sollte man der Userin oder dem User am Abend die Frühstückskarte zeigen durch diese er oder sie durchscrollen muss, beziehungsweise warum sollte sich jemand der bestimmte Lebensmittel nicht essen kann oder will, Gerichte ansehen wo diese enthalten sind?

Meine App löst dieses Problem durch eine einfache Filterfunktion. Die Userin und der User können aus verschiedenen Kategorien wählen wie zum Beispiel „Hauptspeisen“ und einen zweiten Filter setzten wie zum Beispiel „Vegetarisch“.

Technische Umsetzung:
Die Daten habe ich als simples Array angelegt in einem vue.js Framework. Jedes Gericht hat eine ID, einen Namen, eine Beschreibung und verschiedene Tags.
Die vue.js Komponente lest das Array ein und Filtert es entsprechend.

https://florian-mayr.at/master/speisekarte

The post Initialprojekt QR Speisekarte appeared first on Mobile USTP MKL.