Durch die umfassende Dokumentation zu diesem Framework kann man relativ schnell erste Prototypen erstellen.

Während ich mit meiner Studienkollegin Theres-Sophie Scheucher an einer mobilen App basierend auf Ionic gearbeitet habe (restaurantApp), bin ich auf einige interessante Informationen gestoßen, die in diesem Artikel kurz beschrieben werden.

Getting Started

Der einfachste Weg, eine Ionic App mit dazu benötigtem Template zu erstellen, ist, die übersichtliche Anleitungen auf der Seite von Ionic „Getting Started“ zu befolgen.

Customizing Styles

Es gibt mehrere Möglichkeiten, das Styling der App zu definieren. Wichtig dabei ist, dass man die default Ionic Gulp Files nicht unnötig verändert, da diese beim nächsten update wieder verworfen werden.

Styles im www Ordner

Schnell und einfach kann man neue CSS Dateien in den WWW Ordner geben, und diese in der index.html referenzieren. Allerdings funktioniert das nicht sehr gut mit dem Ionic Gulp setup. Daher wird dies Methode eher nicht empfohlen.

Styles im ionic.app.scss

Im Ordner /scss gibt es die ionic.app.scss Datei, welche die Haupt SASS Datei ist, die alle Styles der Applikation kompiliert. Diese Methode wird auch von Ionic’s Gulp set up empfohlen. In dieser Datei können unzählige neue Styles hinzugefügt werden und funktionieren gut für kleine und einfache Applikationen mit wenig Anpassungen.

Eigene Datein

Aufgrund der Übersichtlichkeit habe ich für unsere restaurantApp ein eigenes File mit den jeweiligen Styles angelegt und dieses Datei anschließend mittels @import Statement in die sass Datei eingefügt.

Variablen überschreiben

Ionic verfügt über zahlreiche vordefinierte Variablen, die für das adaptieren des Designs genutzt werden können. Bevor selbst Variablen definiert werden, sollte ein Blick auf die Liste der Default Variablen geworfen und diese gegebenenfalls überschrieben werden.

Der korrekte Weg ,Variablen zu überschreiben, kann im File scss/ionic.app.scss nachgelesen werden. Diese Datei beinhaltet eine Anleitung, wie beziehungsweise wo diese überschrieben werden sollen. Diese Datei sieht folgendermaßen aus (Default)

/*
To customize the look and feel of Ionic, you can override the variables
in ionic's _variables.scss file.

For example, you might change some of the default colors:

$light:                           #fff !default;
$stable:                          #f8f8f8 !default;
$positive:                        #387ef5 !default;
$calm:                            #11c1f3 !default;
$balanced:                        #33cd5f !default;
$energized:                       #ffc900 !default;
$assertive:                       #ef473a !default;
$royal:                           #886aea !default;
$dark:                            #444 !default;
*/

// The path for our ionicons font files, relative to the built CSS in www/css
$ionicons-font-path: "../lib/ionic/fonts" !default;

// Include all of Ionic
@import "www/lib/ionic/scss/ionic";

Wichtig ist, dass das Überschrieben der Variablen vor dem ionic import geschieht, da ansonsten die Default Values von Ionic die eigenene Values überschreiben würden.

Unterschiedliche Icons bei iOS und Android

Ionic hat nützliche Funktionen wie ionic.Platform.isIOS(), ionic.Platform.isAndroid() und ionic.Platform.isWindowsPhone(), um festzustellen, welches Icon verwendet werden soll. Beispiel:

var icon;
 
if (ionic.Platform.isIOS()) {
  
  icon = 'ion-ios-arrow-back';
} else if (ionic.Platform.isAndroid()) { 
 
  icon = 'ion-android-arrow-back';
} else { 
 
  icon = 'ion-android-arrow-back';
}

The post Ionic appeared first on Mobile USTP MKL.

Übersicht

• Math
• Spread Operator
• Destructuring
• Parameters
• Klassen

Math

Ein paar neue Methoden sind zum Math Objekt hinzugekommen

• Math.sign: gibt das Vorzeigen einer Nummer als 1, -1 oder 0 aus.
• Math.trunc: gibt die Zahl ohne Nachkommerstellen zurück
• Math.cbrt: gibt die Kubikwurzel der Zahl zurück

Math.sign(5); // 1
Math.sign(-9); // -1

Math.trunc(5.9); // 5
Math.trunc(5.123); // 5

Math.cbrt(64); // 4

Spread Operator

Der Spread Operator (…) ist eine Syntax, um Elemente eines Arrays in speziellen Orten, wie zum Beispiel bei Argumenten in Funktionsaufrufen, zu erweitern.
So erweiterte man Elemente eines Arrays innerhalb eines anderen Arrays:

let values = [1, 2, 4];
let some = [...values, 8]; // [1, 2, 4, 8]
let more = [...values, 8, ...values]; // [1, 2, 4, 8, 1, 2, 4]

// ES5 equivalent:
let values = [1, 2, 4];
// Iterate, push, sweat, repeat...
// Iterate, push, sweat, repeat...

Diese Syntax ist auch bei Funktionsaufrufen mit Argumenten sehr nützlich

let values = [1, 2, 4];

doSomething(...values);

function doSomething(x, y, z) {
   // x = 1, y = 2, z = 4
}

// ES5 equivalent:
doSomething.apply(null, values);

Bislang wurden Beispiele gezeigt, bei dem der Spread Operator bei Arrays und Argumenten angewendet wurde. Allerdings kann er bei allen zählbaren Objekten wie zum Beispiel NodeList verwendet werden.

let form = document.querySelector('#my-form'),
   inputs = form.querySelectorAll('input'),
   selects = form.querySelectorAll('select');

let allTheThings = [form, ...inputs, ...selects];

Nun ist allTheThings ein Array, das sowohl das <form> Element als auch ihre Kindelemente <input> und <select> beinhaltet.

Destructuring

Destructuring bietet eine bequeme Möglichkeit, um Daten von Objekten oder Arrays zu extrahieren.

let [x, y] = [1, 2]; // x = 1, y = 2

// ES5 equivalent:
var arr = [1, 2];
var x = arr[0];
var y = arr[1];

Mit dieser Syntax können mehreren Variablen ein Value in einem Schritt zugeordnet werden. Ein schöner Nebeneffekt ist, dass man leicht Values der Variablen tauschen kann:

let x = 1,
   y = 2;

[x, y] = [y, x]; // x = 2, y = 1

Das Ganze funktioniert ebenfalls mit Objekten

let obj = {x: 1, y: 2};
let {x, y} = obj; // x = 1, y = 2

Es können auch mehrere Return-Values simuliert werden:

function doSomething() {
   return [1, 2]
}

let [x, y] = doSomething(); // x = 1, y = 2

Parameters

Default Values

In ES6 ist die Definierung von Default Values für Funktionsparameter möglich.

function doSomething(x, y = 2) {
   return x * y;
}

doSomething(5); // 10
doSomething(5, undefined); // 10
doSomething(5, 3); // 15

Der Default Value wird genommen, sobald entweder undefined oder kein Argument übergeben wurde.

Rest Parameters

Rest Parameters sind dem spread operator sehr ähnlich. Sie verwenden ebenfalls die … syntax und ermöglicht, nachkommende Argumente zu speichern.

function doSomething(x, ...remaining) {
   return x * remaining.length;
}

doSomething(5, 0, 0, 0); // 15

Klassen

Klassen sind ab sofort ein Teil von ES6. Sie werden mit den Keywords class und constructor gebaut:

class Vehicle {
   constructor(name) {
      this.name = name;
      this.kind = 'vehicle';
   }	
   getName() {
      return this.name;
   }   
}

// Create an instance
let myVehicle = new Vehicle('rocky');

Um eine Instanz von einer Klasse zu kreieren, wird das Keyword new verwendet. Um von einer Klasse zu erben, das Keyword extends:

class Car extends Vehicle {
   constructor(name) {
      super(name);
      this.kind = 'car'
   }		
}

let myCar = new Car('bumpy');

myCar.getName(); // 'bumpy'
myCar instanceof Car; // true
myCar instanceof Vehicle; //true

The post ECMAScript 6 (ES6): Was ist neu an der nächsten Version von JavaScript? Teil 2 appeared first on Mobile USTP MKL.

Übersicht

• Variablen
• Arrow Functions
• String
• Array

Variablen

Let

In JavaScript sind wir es gewohnt, eine Variable mit var zu deklarieren. Mit der neuen JavaScript Version kann auch let verwendet werden. Der Unterschied der beiden Deklarationen liegt im Scope. Während der Scope für Variablen, die mit var deklariert sind, für umgebende Funktionen gültig ist, ist der Scope für Variablen, die mit let deklariert worden sind, nur für den Block innerhalb der Deklaration gültig.

if(true) {
  let x = 1;
}

console.log(x); // undefined

Die Verwendung von let kann zu einer sauberen Codeschreibweise führen und verhindert „herumliegende“ Variablen.

for(let i = 0, l = list.length; i < l; i++) {
  // do something with list[i]
}

console.log(i); // undefined

Oft würde man für eine weitere Iteration in dem gleichen Scope, beispielsweise die Variable j verwenden. Aber mit let könnte man einfach und sicher die Variable i nochmals deklarieren, solange es nur innerhalb seines eigenen Blocks deklariert und verfügbar ist.

Const

Es gibt einen weiteren Weg, Variablen innerhalb eines Blocks zu deklarieren. Mit const deklariert man eine read-only Referenz zu einer Variable. Es muss eine Variable direkt zugewiesen werden. Wenn versucht wird, die Variable zu ändern oder kein Wert sofort gesetzt wird, wird eine Fehlermeldung geworfen:

const MY_CONSTANT = 1;
MY_CONSTANT = 2 // Error
const SOME_CONST; // Error

Allerdings können immer noch Objekteigenschaften oder Array Werte geändert werden:

const MY_OBJECT = {some: 1};
MY_OBJECT.some = 'body'; // Cool

Arrow Functions

Arrow Functions sind eine großartige Bereicherung für die JavaScript Sprache. Sie machen den den Code kurz und prägnant. Der folgende Code zeigt eine Arrow Function, und dieselbe Funktion nur im ES5 Stil verfasst:

let books = [{title: 'X', price: 10}, {title: 'Y', price: 15}];

let titles = books.map( item => item.title );

// ES5 equivalent:
var titles = books.map(function(item) {
   return item.title;
});

Wenn wir einen Blick auf die Syntax der Arrow Funktionen werfen, dann sehen wir kein Keyword function. Wir sehen nur 0 oder mehr Arguemte, den Pfeil (=>) und den Funktionsausdruck.

Bei 0 oder mehr als einem Argument müssen Klammern verwendet werden:

// No arguments
books.map( () => 1 ); // [1, 1]

// Multiple arguments
[1,2].map( (n, index) => n * index ); // [0, 2]

Wenn du logischen oder mehr Weißraum brauchst, setze den Funktionsausdruck in einem Block { … } :

let result = [1, 2, 3, 4, 5].map( n => {
   n = n % 3;
   return n;
});

Arrow Funktionen bedeuten nicht nur weniger zu tippen, sondern sie verhalten sich auch unterschiedlich zu den regulären Funktionen. Ein Arrow Funktionsausdruck erbt this und arguments vom umliegenden Kontext. Somit können hässliche Statements wie var that = this vermieden werden und es müssen keine Funktionen zum richtigen Kontext gebunden werden. Hier ist ein Beispiel (Hinweis: this.title vs. that.title in der ES5 Version):

let book = {
   title: 'X',
   sellers: ['A', 'B'],
   printSellers() {
      this.sellers.forEach(seller => console.log(seller + ' sells ' + this.title));
   }
}

// ES5 equivalent:
var book = {
   title: 'X',
   sellers: ['A', 'B'],
   printSellers: function() {
      var that = this;
      this.sellers.forEach(function(seller) {
         console.log(seller + ' sells ' + that.title)
      })
   }
}

String

Methoden

Einige Methoden sind zum String Protoyp hinzugefügt worden. Die meisten davon eliminieren den Workaround mit der indexOf() Methode.

'my string'.startsWith('my'); //true
'my string'.endsWith('my'); // false
'my string'.includes('str'); // true

Einfach aber sehr effektiv. Eine weitere bequeme Methode ist nun möglich, um einen sich wiederholenden String zu kreieren:

'my '.repeat(3); // 'my my my '

TEMPLATE LITERAL

Template Literale ermöglichen einen sauberen Weg, um einen String zu erstellen und String Interpolationen durchzuführen. Der Syntax dafür basiert auf dem Dollarzeichen und geschweiften Klammern $ {..}.

let name = 'John',
   apples = 5,
   pears = 7,
   bananas = function() { return 3; }

console.log(`This is ${name}.`);

console.log(`He carries ${apples} apples, ${pears} pears, and ${bananas()} bananas.`);

// ES5 equivalent:
console.log('He carries ' + apples + ' apples, ' + pears + ' pears, and ' + bananas() +' bananas.');

Im obigen Beispiel und im Vergleich zu ES5 sehen wir den einfachen Weg von String-Verkettungen. Allerdings können Template Literale auch für mehrzeilige Zeichenfolgen verwendet werden:

let x = `1...
2...
3 lines long!`; // Yay

// ES5 equivalents:
var x = "1...\n" + 
"2...\n" +
"3 lines long!";

var x = "1...\n2...\n3 lines long!";

Array

Ab sofort hat das Array Objekt neue statische Klassenmethoden, sowie neue Methoden des Array Protoypen. Array.form erstellt eine Array Instanz von Array ähnlichen und abzählbaren Objekten. Beispiele für Array ähnlichen Objekten:
• Argumente innerhalb einer Funktion
• Eine nodeList die bei document.getElementsByTagName() zurückgegeben wird
• Die neuen Map und Set Data Strukturen

let itemElements = document.querySelectorAll('.items');
let items = Array.from(itemElements);
items.forEach(function(element) {
    console.log(element.nodeType)
});		

// A workaround often used in ES5:
let items = Array.prototype.slice.call(itemElements);

Einige neue Methoden sind jetzt beim Array möglich:

• Find: Gibt das erste Element zurück, bei dem der Callback true zurückgibt
• findIndex: Gibt den Index des ersten Elements zurück, bei dem der Callback true zurückgibt
• fill: überschreibt das Element eines Arrays mit dem gegebenen Argument

[5, 1, 10, 8].find(n => n === 10) // 10

[5, 1, 10, 8].findIndex(n => n === 10) // 2

[0, 0, 0].fill(7) // [7, 7, 7]
[0, 0, 0, 0, 0].fill(7, 1, 3) // [0, 7, 7, 7, 0]

The post ECMAScript 6 (ES6): Was ist neu an der nächsten Version von JavaScript? Teil 1 appeared first on Mobile USTP MKL.

In diesem Beitrag werden sechs kostenlose Icon Schriftgeneratoren, mit denen du deine eigenen Icon Schrift erstellen kannst, beschrieben:

Fontello

Fontello ist eine sehr einfache Plattform, bei der man die SVG-Dateien vom Computer unter innerhalb der Fläche „Drag SVG Icons here“ ziehen muss, um eine eigene Icon-Schrift zu erzeugen. Außerdem können freie Icon-Sets zur Icon-Schrift aufgenommen werden.

IcoMoon App

IcoMoon App ermöglicht es eigene Icons zu integrieren und bietet zugleich eine Vielzahl an verfügbaren Icons.

Icon Vault

Um eine Icon Schrift mit Icon Vault erzeugen zu können, muss zuerst das Template-Paket heruntergeladen werden. Dann sollte man einfach der inkludierten Anleitung folgen. Sobald diese Schritte erfolgt sind, müssen die Icons auf Icon Vault upgeloadet werden.

Pictonic Fontbuilder

Pictonic Fontbuilder erlaubt es, aus kostenlosen sowie kostenpflichtigen Icons von Pictonic zu wählen. Pictonic verfügt über mehr als 2700 Symbolen, mehr als 300 davon sind kostenlos. Um Zugriff auf Pictonic Fontbuilder zu erhalten, ist eine Kontoerstellung notwendig.

Glyphter

Bei Glyphter sieht man auf der linken Seite ein Zeichen-Grid und auf der rechten Seite des Bildschirms, die so genannte „Icon Shelf“, bei der man nach kostenlosen Icons suchen kann. Die Icons aus der rechten Auswahl können per Drag & Drop in die einzelnen Felder innerhalb des Gitters gezogen werden. Es können auch eigene SVG Icon Dateien hochgeladen werden. Bis zu 88 Symbolen können kostenlos verwendet werden. Falls mehr Symbole gebraucht werden, kann ein Premium-Account erstellt werden.

Fontastic

Um eigene Icon Schrigt mit Fontastic zu generieren, müssen Symbole aus dem verfügbaren und kostenlosen Icon-Sets gewählt werden und/oder eigene SVG-Icons hochgeladen werden. Sobald die Auswahl erfolgt ist, geht man zur Registerkarte „Publish“, wo du die Option hast, die Icon Schrift innerhalb der Fontastic Icon Cloud zu hosten oder die Schrift downzuloaden. Ein Zugriff auf die Icons von Fontastic ist ein Konto Sign-Up erforderlich.

The post 6 Kostenlose Tools für die Erstellung eigener Icon Schrift appeared first on Mobile USTP MKL.

LESS ermöglicht es, im CSS mit Variablen, Mixins, Berechnungen und Funktionen zu arbeiten. Es läuft sowohl Server-Seitig, mit Node.js und Rhino, als auch Client-Seitig auf modernen Browsern.

Variablen

Mit Variablen können oft verwendete Werte definiert werden und im CSS Code verwendet werden. Dadurch muss bei Änderungen nur noch eine Zeile geändert werden. In meinen Projekten setze ich Variablen vorallem bei Farbdefinitionen, Bildschirmbreiten usw. ein.

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
color: @light-blue;
}

Output

#header {
color: #6c94be;
}

Tipp: Falls man keine kreativen Namen für Farben erfinden möchte, eignet sich diese Seite: http://name-of-color.com/.

Mixins

Mixins ermöglichen es, eine Reihe von Eigenschaften aus einer CSS Klasse in eine andere CSS Klasse zu inkludieren. Es können natürlich auch #IDs als Mixins verwendet werden.

.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}



#menu a {
color: #111;
.bordered;
}

.post a {
color: red;
.bordered;
}

Versteckte Mixins

Möchte man ein Mixin erstellen, es aber nicht im generierten CSS Code ausgeben, so können Klammern hinter einem Mixin gesetzt werden, und diesesr wird nicht im CSS Code gesetzt. Tipp: Das ist eine Möglichkeit, dass ungenutzter CSS Code die CSS-Datei nicht unnötig groß macht.

.my-mixin {
color: black;
}
.my-other-mixin() {
background: white;
}
.class {
.my-mixin;
.my-other-mixin;
}
Output

.my-mixin {
color: black;
}
.class {
color: black;
background: white;
}

Mixins als Funktionen

Mixins können sich unter anderem wie Funktionen verhalten und akzeptieren dadurch auch Parameter. Dem Parameter kann ein Default-Wert gesetzt werden.

.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}

#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
Output

#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#footer {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}


Verschachtelungen

In LESS können Selektoren ineinander verschachtelt werden. Dadurch können lange Schreibweisen von Vererbungen vermieden werden. Allerdings sollten Selektoren nur sofern es notwendig ist, verschachtelt werden, da ansonsten der CSS-Selektor zu „stark“ werden könnte und kein Überblick mehr besteht.


#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
Output

#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}
Das &-Zeichen ist ein Platzhalter für das Elternelement. Dies ist besonders nützlich bei Pseudoklassen wie :hover oder :focus.

Extend

Extend ist eine Less-Pseudo Klasse, die den gesetzten Selektor mit dem referenzierten Selektor zusammenfasst. Dadurch kann im generierten CSS Code gespart werden, da die Datei unnötig groß werden könnte.

nav ul {
&:extend(.inline);
background: blue;
}
.inline {
color: red;
}
Output

nav ul {
background: blue;
}
.inline,
nav ul {
color: red;
}

Kommentare

In CSS sind nur Blockkommentare möglich /* Some Code */. Durch die Verwendung von LESS sind auch Inline-Kommentare möglich, allerdings werden diese im generierten CSS nicht mehr angeführt.

Quellen

http://lesscss.org/

http://www.lesscss.de/

The post { Less – erste Erfahrungen } appeared first on Mobile USTP MKL.

Unter Parallax Scrolling versteht man den Effekt, bei dem der Vordergrund und der Hintergrund einer Webseite sich unterschiedlich schnell bewegen. Durch Parallax Scrolling können sich Elemente auf der Webseite bei unterschiedlichen Perspektiven und Geschwindigkeiten bewegen. Dadurch kann man unter anderem einen 3D Effekt beim Scrollen erzeugen.

Wie funktioniert Parallax Scrolling?

Der einfachste Weg Parallax Scrolling einzusetzten, wären die Properties background-position oder margin-top beim Scroll Event zu verwenden.

$(animation.selector)
.css('background-position', 'xPos yPos');

Allerdings sollte man diesen Weg aus Performance-Gründen vermeiden. Es sollten nur Properties verwendet werden, die im Browser leicht zu animieren sind. Solche Properties sind unter anderem: translate3d, scale, rotation und opacity.

$(animation.selector)
.css({ 'transform': 'translate3d(' + translateX +'px, ' +   translateY + 'px, 0) scale('+ scale +')',
'opacity' : opacity
})

Aus Performance-Gründen sollte auch beachtet werden, dass nur Elemente animiert werden, die sich im Viewport befinden. Weiters sollen die Animationswerte angemessen gerundet werden. Außerdem sollte die Animation nicht direkt am Scroll-Event gebunden sein. Außerdem sollte window.requestAnimationFrame verwendet werden, sobald Animationen durch JavaScript ausgelöst werden.

Codebeispiel für das Runden des Animationswertes

value = value.toFixed(2)

Codebeispiel für window.requestAnimationFrame

function draw() {
window.requestAnimationFrame(draw);
// Drawing code goes here
scrollEvent();
}
draw();


Parallax Scrolling auf mobilen Geräten

Parallax Scrolling war beziehungsweise ist auf mobilen Geräten teilweise eingeschränkt. Grund dafür war, dass auf älteren mobilen Betriebssystemen eine Manipulation von Dom-Elementen während dem Scroll-Event nicht zugelassen waren, solange das Scroll-Event nicht abgeschlossen ist.

Mit dem Betriebssystem Ice Cream änderte das Scrolling Verhalten, und es war ab diesem Zeitpunkt möglich während dem Scroll-Event das DOM zu manipulieren. IE Mobile und Windows Phone 8 kamen kurzer Zeit nach. Erst mit iOS 8 ist es auch auf Apple Geräten möglich, einen Parallax-Effekt zu erzielen.
Für ältere iOS Versionen gibt es einige populäre Bibliotheken wie iScroll library, die das Scrolling durch die Verwendung von CSS Translations nachbauen, um auch für diese Geräte einen Parallax-Effekt zu erreichen.

Beispiele für Parallax Scrolling

http://boy-coy.com/
http://www.sweez.com.br/#atendimento
http://www.sweez.com.br/#atendimento
http://hotdot.pro/en/

Quellen

http://www.creativebloq.com/web-design/parallax-4132336
http://www.creativebloq.com/web-design/parallax-scrolling-1131762
http://www.awwwards.com/20-best-websites-with-parallax-scrolling-of-2013.html
http://developer.telerik.com/featured/scroll-event-change-ios-8-big-deal/
http://morris-digital.co.uk/blog/super-simple-60-fps-parallax/
https://medium.com/@dhg/parallax-done-right-82ced812e61c

The post Parallax Scrolling im Web appeared first on Mobile USTP MKL.

Als Printprodukt habe ich ein T-Shirt gewählt. Als Aufdruck wurde ein Memory-Spiel kreiert, bei dem die einzig aufgedeckte Karte der QR-Code ist, der zur mobilen Applikation führt. Die mobile Applikation ist ein kleines Memory Spiel.

Design

Als Deckblatt wurde eine Bild, das einen Haufen voller Würfel –  betitelt mit „Memory“ – verwendet. Die Motive für das Spiel selbst haben alle etwas mit dem Thema Mobile zu tun. Daher wurden folgende Bilder zu folgenden Themen ausgewählt: Android, Apple, Games, Usability Testing, Responsive Design, Navigation und der Übertragungsstandard NFC.

Technologien

Das Memory Spiel wurde mittels HTML5, CSS3 und jQuery erstellt. In der index.html wurden nur zwei Container erstellt, in denen später die durch jQuery erstellten Bild-Container, hineingesetzt werden.

In der JavaScript Datei wurde ein Array mit allen möglichen Bildern erstellt, das durch eine Funktion bei jedem Start des Spieles random durgemischt wird. Beim Klick auf die Karte wurde die Klasse der Karte ausgelesen. Wurde zwei Karten umgedreht wurde gleichzeitig überprüft, ob es sich um die gleichen Klassen handelt. Waren es unterschiedliche Klassen wurden beide Bilder wieder zurückgedreht. Handelte es sich um zwei gleiche Klassen, sprich um dieselben Bilder blieben diese offen. Sobald man alle sieben Paare aufgedeckt hat, kam die Meldung „Super, du hast gewonnen“.

Fazit

Das Spiel diente hauptsächlich zur Auffrischung meiner jQuery Kenntnissen. Während der Entwicklung ärgerte ich mich hauptsächlich über die Verfügbarkeit und Erreichung von Variablen, die den aktuellen Spielstand speichert. Gelernt habe ich außerdem, dass man niemals ein Tester der eigenen Applikation sein darf, da man als Entwicklerin genau weiß, wie das Programm ablaufen soll. Bei der Präsentation der Applikation haben weitere Tester Bugs, die mir während dem Testen nicht aufgefallen sind, sofort gefunden.

Link zum Projekt:

http://dm141530.students.fhstp.ac.at/Mobile/memory/

The post Initialprojekt Memory appeared first on Mobile USTP MKL.