Für diesen speziellen Fall hat Swift ein leeres Protocol “Error”, welches dem Programm einen Fehler repräsentiert. Diese können am besten mit einer Enumeration (Enum) umgesetzt werden. Unsere kleine Applikation soll eine SmS oder Email an einen Kontakt schicken können. Die Logik werden wir aber nicht implementieren. Für unseren Fall schaut die Error Enumeration wie folgt aus:

enum ContactError: Error { 
   case NumberNotAvailable
   case EmailNotAvailable
}

Man könnte hier wie bei einer zusätzlichen Variable anschließen und dieser dann zum Beispiel einen String beim aufrufen übergeben.

enum ContactError: Error {
   case NumberNotAvailable(description: String)
}

Um eine Funktion jetzt abfangen zu können, müssen wir einer Funktion sagen, dass sie fehlschlagen kann. Dies passiert mittels dem Keyword “throws” und wird nach den Parametern aber vor dem Rückgabewert geschrieben.

func someFunction(someParameter: someType) throws -> someReturnType {}

In dieser Funktion haben wir nun die Möglichkeit, einen Fehler auszulösen und dann einem case aus unserer ContactError Enumeration zuzuweisen.

throw ContactError.NumberNotAvailable

// Wenn eine zusätzliche Variable vorhanden ist (wie oben definiert) dann wie folgt:
throw ContactError.NumberNotAvailable(description: "Leider ist keine Nummer angeben")

Schauen wir uns das Beispiel bis jetzt im Ganzen an:

struct Contact {
    let name: String
    let tel: Int?
    let email: String?
    func send(message: String, to contact: Contact) throws -> Message {
        guard let telNumber = contact.tel else {
            throw ContactError.NumberNotAvailable
        }
        return Message(message: message, tel: telNumber, email: nil)
    }
    func send(email: String, to contact: Contact) throws -> Message {
        guard let email = contact.email else {
            throw ContactError.EmailNotAvailable
        }
        return Message(message: email, tel: nil, email: email)
    }
}

Um eine Funktion, welche mit “throws” gekennzeichnet ist, ausführen zu können, brauchen wir auch wieder eine spezielle Syntax. Wir erstellen uns also zuerst zwei Instanzen dieser Struktur “contactA” und “contactB” und geben “contactB” nur eine E-Mail aber keine Telefonnummer. Jetzt benötigen wir einen “do-catch-block”. Im do-Block wird mittels dem Keyword “try” die Funktion aufgerufen. Wird die Funktion nicht mittels try ausgeführt dann bekommen wir einen Error in Xcode. Wenn ein Fehler gefunden wird, wird der do-block sofort abgebrochen und nach dem ansprechenden Fehler, welcher in der Funktion im Contact Struct geworfen wurde, gesucht. Es ist also möglich einen einzelnen catch-Block zu machen oder wirklich nach den verschiedenen Fehlern aus unserer ContactError-Enumeration zu suchen.

do {
    let newMessage = try contactA.send(message: "hello via textmessage", to: contactB)
} catch ContactError.NumberNotAvailable {
    print("Your contact has no number provided")
} catch ContactError.EmailNotAvailable {
    print("Your contact has no email provided")
}

In diesem Fall wird unser NumberNotAvailable Error geworfen, weil “contactB” keine Telefonnummer angegeben hat. Würden wir die Funktion

func send(email: String, to contact: Contact)

ausführen, würde diese ohne Probleme funktionieren, da bei “contactB” eine E-Mail angegeben ist. Im catch-Block ist es dann Möglich den Error entsprechend zu behandelt und zum Beispiel eine Error-Meldung anzuzeigen. Wenn kein Fehler erkannt wird, bleiben wir im do-Block und führen weitere Schritte für den Ablauf des Programmes aus.

The post Error Handling in Swift 3 appeared first on Mobile USTP MKL.

AlfredApp gibt es in einer kostenlosen Variante, welche bereits einige nette Features enthält, aber auch in einer kostenpflichtigen Variante als „Powerpack“ Erweiterung. Dieses schlägt mit 19£ als Einzellizenz, 29£ als Familienlizenz oder als 35£ Mega Supporter mit kostenlosen Lifetime Updates zu buche.

Schauen wir uns einmal die kostenlose Variante an. Unter den „General“-Settings können wir zunächst unser Shortcut einstellen. Ich habe die Spotlight suche auf Option (Alt) + Space geändert und Alfred auf ⌘+Space eingestellt, um meinen alten Workflow beizubehalten. Weiters sollte man die Location auf das jeweilige Land setzen damit zum Beispiel in unserem Fall www.google.at aufgerufen wird und nicht www.google.com. Das wars auch wieder für den „General“-Tab.

Unter den Features wird es nun spannender. In den Default Results haben wir die Möglichkeit einzustellen, welche Daten Alfred überhaupt suchen darf. Zusätzlich können wir auch den Search Scope eingrenzen. Dies funktioniert in Spotlight zwar auch, aber nicht so genau.

Unter File Search haben wir die Möglichkeit unsere Suchen zu definieren. Mit Stichworten, und dem nachfolgendem Suchbegriff, wie open, find, in, tags können wir Files öffnen, nach Files mit gewissem Textinhalt suchen, Files im Finder darstellen sowie nach Files mit gewissen Tags suchen. Die Suche kann auch hier wieder auf bestimmte File-Arten begrenzt werden. Ein weiteres sehr angenehmes Feature ist, dass man direkt aus der Suche mittels der Taste Shift ein Preview öffnen kann, um somit das File näher zu betrachten bevor man es öffnet. Eine eher für Programmierer interessante Variante ist die Möglichkeit, den Pfad des Files so zu kopieren, sodass er bereits für das Terminal „escaped“ ist.

In dem Web-Search Tab gibt es bereits einige vordefinierte Möglichkeiten, wie man das Internet durchsuchen kann. Verschiedene Suchmaschinen sind voreingestellt. Natürlich können wir einige  Funktionen deaktivieren, aber auch eigene hinzufügen. So kann man mit den vordefinierten Befehlen wie „google >Searchterm<“ nach Begriffen  oder mit „images >Imagename< nach Bildern in Google suchen. Mittels „amazon >Searchterm<„ kann man nach Produkten in Amazon suchen. Das nette an dem Ganzen ist, dass man sich eigene Befehle definieren kann. So haben wir zum Beispiel die Möglichkeit, einen Befehl für die Suche in Stackoverflow zu definieren. Bei Stackoverflow setzt sich der Suchbefehl wie folgt zusammen: „http://stackoverflow.com/search?q=Searchterm”. Wir erstellen somit ein custom Search und geben als URL „http://stackoverflow.com/search?q={query}“ an. Zusätzlich definieren wir ein Keyword, welches wir eintippen um die Suche zu starten.

Auch das Rechnen ist in Alfred möglich. Der einzige Unterschied zu Spotlight ist, dass man nach einer Rechnung über die Enter-Taste das Ergebnis kopiert. In Spotlight öffnet die Enter-Taste den Taschenrechner. Man müsste das Ergebnis in Spotlight mittels ⌘+c kopieren. Rechnungen wie sin, cos, etc. müssen in Alfred mittels = vorgestellt werden.

Mittels define oder spell hat man die Möglichkeit nach Definitionen für ein Wort oder die Schreibweise für ein Wort während des Tippens zu erhalten

Im letzten Feature der Gratisversion kann man bequem über die Alfred Suche Systemcommands durchführen. Die Befehle lock, restart, shutdown, sleepl, etc. sprechen für sich selbst und ersparen einzige Mausklicks. Auch den Papierkorb kann man mittels Trash öffnen.

Im Tab Appearance gibt es einige vorgefertigte Themes für die Alfredsuche, aus welchen man wählen kann. Auf den Tab Advanced gibt es noch weitere Einstellungen, welche ich selber nicht verändert habe, somit gehe ich nicht weiter auf diese ein.

Da ich das AlfredApp Powerpack noch nicht vollständig getestet habe, gebe ich nur einen kürzen Überblick über die verfügbaren Features.

Zum einen kann man direkt Terminalbefehle über AlfredApp ausführen. Dafür verwendet man nur das größer Symbol “>” und anschließend den Terminalbefehl wie z.B. “>mkdir Fotos”.

1Password Nutzer können können über AlfredApp die zu öffnende URL mit vorstehendem “1p” eintippen . Man muss sich dann natürlich in 1Password authentifizieren, aber es wird sofort die URL geöffnet und der User eingeloggt. Hierfür muss die entsprechende URL in 1Password hinterlegt sein. Damit das
ganze funktioniert muss man in den 1Password Einstellungen die 3rd-Party-Integration aktivieren.
Im Punkt File Search gibt es noch weitere Unterpunkte wie File Navigation, File Buffer und Actions. AlfredApp ermöglicht das Navigieren durch die Ordnerstruktur ohne Maus. Man gibt also einen Pfad ein und erhält dann alle Unterordner in diesem. Die Auswahl kann man mittels der Pfeiltasten oder dem Shortcut (⌘+Zahl) Treffen.

Im sogenannten Filebuffer von AlfredApp kann man mehrere Files über die Suchfunktion auswählen und danach verschiedene Befehle auf die komplette Auswahl ausführen. Diese File Actions umfassen unter anderem open with, email to, copy to, move to, etc.

Auch Kontakte kann man bequem über AlfredApp suchen und gleich die relevanten Daten kopieren. Zudem kann man wieder eigene Actions definieren wobei mit “Call >Name<” diese Person direkt über Facetime angerufen werden kann.

Ein weiteres nettes Feature ist die Clipboard History. Hier kann man die zuletzt kopierten Elemente (sowohl Text als auch Bild – konfigurierbar) einsehen. Diese kann man mittels “⌘+Zahl”, wie bei den File Actions, auswählen. Es ist also angenehm, zwischen den letzt kopierten Elementen hin und her zu springen. Zudem hat man hat die Möglichkeit, Applikationen, wie zum Beispiel 1Password, auszuschließen.

Textshortcuts sind am Mac bereits bekannt. So kann man über die Tastatureinstellungen Abkürzungen definieren, welche dann z.B in einen Satz umgewandelt werden. Dies funktioniert mit AlfredApp auch, jedoch ist das Ganze ein wenig schöner gestaltet und man hat die Möglichkeit dynamischen Snippets zu verwenden. So kann man zum Beispiel ein Snippet für Datum erstellen, welcher dann das aktuelle Datum ausfüllt. Wenn man nicht mehr alle Snippets in Erinnerung hat, kann man diese im Snippets Viewer darstellen und wieder mittels “⌘+Zahl” auswählen.

Eine der größten Stärken von AlfredApp sind custom Workflows. Hier kann man über einen definierten Befehl mehrere Aktionen gleichzeitig ausführen. So kann man zum Beispiel 2 Applikationen gleichzeitig öffnen oder weit kompliziertere Aktionen ausführen. Allein für diese Funktion könnte man einen eigenen Blogpost verfassen.

Das letzte Feature beinhaltet die Steuerung von iTunes. So kann man ohne in iTunes zu wechseln, die wichtigsten Interaktionen durchführen, welche mehr können als play, pause und weiter. Doch auch diese 3 Befehle sind vorhanden.

Zusammenfassend lässt sich sagen, dass AlfredApp ein sehr gutes und Preiswertes Programm ist, welches den Workflow sehr erleichtert.

The post AlfredApp – Das bessere Spotlight? appeared first on Mobile USTP MKL.

Bei der Entwicklung eines Projektes für die Plattform IOS suchte ich eine Möglichkeit, angenehm Content als auch User verwalten zu können.Natürlich wäre es möglich, ein eigenes System zu entwickeln. Dies wäre jedoch wahrscheinlich genauso zeitraubend wie die eigentliche Entwicklung der Applikation.

Mein erster Gedanke war es, WordPress auf einem Server aufzusetzen und somit meinen Content zu verwalten. Dies wäre in Verbindung mit einem JSON Plugin, welches die WordPress-Inhalte über JSON abrufbar macht, durchaus denkbar, erschien mir aber als eine etwas unelegante Lösung, da ich hierfür extra einen Server benötige, auf dem eine leere WordPress Seite laufen würde. Wenn man jedoch zusätzlich seinen Content über eine Webseite ausgeben möchte, ist dies eine Variante welche man in Betracht ziehen kann.

Bei der weiteren Suche stieß ich auf den Service Parse (https://www.parse.com). Parse ist ein Dienst, für welchen es ein Framework für verschiedene Programmiersprachen gibt. Es ermöglicht das Verwalten von Usern, Content, Notifications, etc. Leider stellte sich heraus, dass der von Facebook entwickelte Dienst eingestellt wird und nur mehr auf einem eigenen Server betrieben werden kann, aber nicht mehr weiterentwickelt wird.

Als Alternative fand ich Firebase, Googles Pendant zu Facebooks Firebase (https://firebase.google.com/). Die kostenlose Variante erlaubt bis zu 100 Zugriffe gleichzeitig, 1GB Speicher und 10GB Downloads für die Datenbank pro Monat. Zusätzlich 5GB Datenspeicher für Bilder oder ähnliches. Genauer kann man sich die Preise unter https://firebase.google.com/pricing/ ansehen. Auch die kostenpflichtige Variante ist leistbar und hat für den Anfang sicher genug Inhalt.

Eine gute Dokumentation für verschiedene Programmiersprachen macht es einfach, Firebase zu verwenden. Ein großer Punkt hierbei ist, dass sich schon jemand um die Sicherheit der Daten Gedanken macht.

Das einzige was mich hier gestört hat war, dass es keine intuitive Möglichkeit gibt, Content zu verwalten, wie man es eben aus einem CMS wie WordPress, etc. gewohnt ist. Der Grund ist, dass es eben kein CMS sondern ein sogenanntes MBAAS (Mobile Backend as a Service) ist.

Mobile backend as a service (MBaaS), also known as “backend as a service” (BaaS), is a model for providing web app and mobile app developers with a way to link their applications to backend cloud storage and APIs exposed by back end applications while also providing features such as user management, push notifications, and integration with social networking services. – https://en.wikipedia.org/wiki/Mobile_backend_as_a_service

Es wäre zwar auch möglich, den Teil der Contentverwaltung, in Verbindung mit Firebase, selber zu programmieren. Dies wäre aber, wie bereits gesagt, ein größerer Aufwand, wenn man eigentlich eine Applikation entwickeln will.

Auf der weiteren Suche habe ich noch einen dritten Service names Kinney (https://www.kinvey.com) gefunden. Wer seine Daten, und die seiner Kunden, nicht an Google geben möchte, kann sich diesen Dienst ansehen. Im Großen und Ganzen ist dieser Dienst gleich dem von Google. Verwaltung von Usern, inkl Userlogin über Facebook, Twitter, etc. (auch bei Firebase möglich), Push-Notifications, etc. Aber auch hier ist es wieder nur eine Datenbank und hat keine intuitive Variante der Contenverwaltung. Für uns ist dies wahrscheinlich kein Problem, ein paar Felder in eine Datenbank einzutragen. Man muss sich aber im Klaren sein, dass oft weniger technik-fffine Personen das Betreuen von Inhalten übernehmen. Aus diesem Grund habe ich die Suche nicht aufgegeben und fand Contentful (https://www.contentful.com).

Contentful ist genau das, was ich noch gesucht habe. Man kann sich im Backend eigene Felder zusammenstellen wie zb. Text, Image, etc. Danach braucht man nur mehr auf „New“ drücken, füllt die Felder aus und erstellt einen Eintrag. Contentful ist eine RESTful JSON API. Der Zugriff auf die Daten ist somit einfach und schnell. Es gibt wie immer eine kostenlose und kostenpflichtige Variante (https://www.contentful.com/pricing/).

Das nette ist, dass alle vorgestellten Dienste eine kostenlose Variante zum Testen anbieten, welche auch bei den meisten für den Anfang reicht. Auch die kostenpflichtigen Varianten sind leistbar. Wenn man genug User hat, sollten diese dann sowieso kein Problem sein.

In einem weiteren Artikel werde ich genauer auf die Dienste eingehen und ein paar Beispiele zeigen. Ansonsten viel Spaß beim Ausprobieren.

The post Backends und Contentverwaltung für Applikationen appeared first on Mobile USTP MKL.

Design

Unter dem Motto „Weiß ist das neue Schwarz“ wurde dem Blog ein sehr minimalistisches und übersichtliches Aussehen verliehen. Die eher „drückenden“ dunklen Farben wurden durch Farben aus der flat-color Palette ersetzt. Die dominierende „Farbe“ ist weiß, durch blau wurden farbliche Akzente gesetzt. Während das Design für den/die ein oder andere/n vielleicht „zu“ weiß sein mag, finden andere wiederum einen Gefallen daran. Geschmäcker sind bekanntlich verschieden, und so darf sich jeder seine eigene Meinung dazu bilden
Die Sidebar wurde beibehalten und enthält einige kleine Veränderungen. Neu sind hier Social Media Buttons, Testimonials und eine kurze Information über die mobile Forschungsgruppe (früher im Footer aufzufinden). Eine größere Veränderung hat die Darstellung der jeweiligen Blogbeiträge erfahren. In der Vorgängerversion wurden diese untereinander dargestellt, und haben recht viel Platz auf der Seite eingenommen. Von nun an werden diese durch die berüchtigten Card UI Patterns dargestellt, auf der Desktop und Tablet Version jeweils 2 Beiträge pro Zeile. Ob auf Pinterest, Facebook oder Twitter, Card UIs können heutzutage auf einer Vielzahl von Websites vorgefunden werden und erfreuen sich äußerster Beliebtheit. Durch deren Einsatz kann ein klares und übersichtliches Layout sichergestellt werden. Außerdem kann dieses Muster sehr gut auf mobile Geräte übersetzt werden, was unter anderem der Hauptzweck des Re-Designs war. In jeder Card liegt das Hauptaugenmerk nun, genauso wie in der Detailansicht jedes Beitrags, auf dem Beitragsbild und dem sich darunter befindlichen Titel.

Auf Tags wurde im neuen Design verzichtet, die jeweilige(n) Kategorie(n) befinden sich nun auf der Unterseite des Containers. Ähnliche Beiträge zum Artikel befinden sich im Vergleich zur Vorgängerversion nun in der Sidebar.

Um euch das ewige Scrollen am Ende der Seite zurück zum Anfang zu ersparen, wurde im Footer ein Button eingebaut, welcher euch diese Arbeit abnimmt und sofort zum Beginn der Seite springt. Allgemein wurde verstärkt auf eine übersichtlichere Gliederung der Inhalte geachtet.

Programmierung

Die Website wurde mittels CMS WordPress umgesetzt und aufgrund des spezifischen Deisgns, unter Zuhilfenahme des Frontend Frameworks Bootstrap, von null auf, programmiert. Um die Verwaltung, von Abschlussarbeiten, Testimonials und den Geräten im Open Device Lab, zu vereinfachen wurden die Plugins Custom Post Types UI (CTP UI) und Advanced Custom Fields verwendet. Mittels CTP UI ist es möglich, im Backend einen eigenen Reiter wie Posts oder Pages zu erstellen. Advanced Custom Fields erweitern diese, oder auch bereits vorhandene Post Types, mit Feldern für Texteingabe oder einer Möglichkeit Bilder hinzuzufügen, etc.

Wichtig war uns auch die Performance der Seite, gerade weil sie viele Bilder enthält. Hierfür haben wir zum einen die Library Unveil.js (https://github.com/luis-almeida/unveil) verwenden, als auch das Plugin WP Fastest Cache.
Unveil.js ist eine lazy load library, welche es ermöglicht, Bilder erst dann zu laden, wenn sie wirklich im Viewport sind. Zusätzlich gibt es die Möglichkeit ein Bild für normale Bildschirm Auflösung bereitzustellen als auch für hochauflösende Displays. Um dem Benutzer während der Ladezeit trotzdem ein Bild zeigen zu können, wird ein Placeholderbild gleich zu Beginn geladen und danach durch ein Bild mit der entsprechenden Auflösung ersetzt.

WP Fastest Cache hingegen hat mehrere Einstellmöglichkeiten. Zum einen schreibt das Plugin automatisch die entsprechenden Cachemöglichkeit in die htaccess Datei und zum anderen ermöglicht es das Javascript und CSS Dateien zusammenzufassen als auch alle Abstände zu entfernen (Combine, Minify). Weiters haben wir das Plugin EWWW Image Optimizer verwenden, welches alle Bilder die über das Backend hochgeladen werden, optimiert anstatt dies selber über z.b.: tinypng machen zu müssen.
Abschließend wurden noch kleine Sicherheitsaspekte berücksichtigt. Zum einen wurden alle Anzeichen zu der aktuell installierten WordPress Version entfernt, als auch die Fehlermeldungen im Login-Bereich. Zusätzlich wurde das „Plugin Limit Login Attempts“ verwendet, um die Anzahl der Login Versuche minimieren zu können, als auch User oder IP-Adressen sperren zu können und Warnungen an den Administrator der Website zu schicken.

The post Blog Re-Design appeared first on Mobile USTP MKL.

Dies ist wiederum aus SEO und Accessibility Gründen nicht vorteilhaft, da Bilder, welche den Inhalt bilden, auch wirklich als Inhalt, also mittels <img>-Element, eingebunden werden sollen um auch einen alt-tag definieren zu können. Für wirkliche Backgroundimages ist dies natürlich die perfekte Variante. Eine weitere Variante wäre die Einbindung mittels JavaScript. Dies ist in manchen Fällen auch notwendig, sollte aber so gut wie möglich vermieden werden da Javascript fehleranfälliger ist als HTML. Um die folgenden zukunftsorientierten Varianten für so gut wie alle Browser zu Verfügung stellen zu können, benötigen wir trotzdem die Hilfe von JavaScript in Form eines sogenannten Polifills. Wir verwenden hierfür Picturefill, um alle Browser, welche die Spezifikation nicht von Haus aus können, zu unterstützen. Picturefill könnt ihr ganz einfach unter dem Link herunterladen und mittels <script>-Tag einbinden. Entweder ihr bindet es vor dem schließenden body tag ein oder im head tag. Im head tag ist es sinnvoll, das async attribut zu verwenden, welches dem Browser sagt, dass dieses File asynchron geladen werden soll, um den restlichen Seitenaufbau nicht zu stören. Wichtig bei dem async attribut ist, dass kein anderes File von diesem abhängig ist, da sonst Probleme auftreten. Hier findet ihr, welche Browser async unterstützen.

Images mit srcset und sizes

Zunächst sehen wir uns die HTML5 Erweiterung des <img>-Elements an. Mit dem srcset-Attribut alleine können wir zwei Sachen bestimmen. Entweder wir übergeben den Parameter für die Pixeldichte wie im Codebeispiel 1 oder wir übergeben den Parameter für die Breite des Bilder wie im Codebeispiel 2.

<img srcset=“photo-@2x.jpg 2x, photo-@1x.jpg 1x“ src=“photo1-@1x.jpg“ alt=“Alternative Text“ />

Unser src-attribut gilt hier immer als Fallback wenn die Browser srcset nicht verstehen und unser polyfill nicht funktioniert. Im srcset übergeben wir die eigentlichen Bilder. Den Wert für normale Pixeldichte, also 1x, könnte man theoretisch weglassen, da dies der Defaultwert ist. Mit 2x sagen wir, dass dieses Bild die doppelte Pixeldichte besitzt. Der Browser entscheidet nun also von alleine, welches Bild ausgeliefert werden soll. Sinnvollerweise benennen wir unsere Bilder auch mit -@1x oder -@2x.

<img srcset=“photo-larger.jpg 1400w, photo-medium.jpg 700w, photo-small.jpg 400w“ src=“photo-medium.jpg“ alt=“Alternative Text“ />

Bei dieser Variante geben wir dem Browser eine größere Entscheidungsfreiheit. Nach dem Bild schreiben wir zusätzlich die wirkliche Breite des Bildes (zb. aus Photoshop) an. Der Browser entscheidet somit wieder für sich, wann er welches Bild nimmt. Natürlich hat man hier nicht die genaue Kontrolle und muss den Browserherstellern vertrauen, dass das optimale Bild verwendet wird. Beim Testen mit dem Google Chrome Browser müsst ihr jedoch beachten, dass ihr in den Dev Tools unter dem Reiter Network das Caching deaktiviert. Google Chrome nimmt als einziger Browser immer das Größte gecachte Bild. Beim Entwickeln ist das natürlich ein Nachteil. Für den Kunden selber ist es dann gut.

Zusätzlich ist es möglich, noch das sizes Attribut anzugeben. Den ersten Wert, den wir übergeben, ist die media query. Dieser sollte mit den verwendeten media queries im Layout zusammenhängen. Der zweite Wert is die Breite, die das Bild einnehmen soll. Der letzte Wert is der Default Wert. Diese Werte sind immer relativ zum Viewport. 100vw entspricht somit den 100% des Viewports. Mit unserem sizes Attribut sagen wir also, dass unser Bild immer 100% des Viewports hat, außer wir erreichen die 700px. Dann wird das Bild mit 700px festgelegt. Kurz gesagt, teilen wir mit dem srcset Attribut dem Browser mit, wie groß das Bild in Pixel ist, und mit dem sizes Attribut wie viel Platz das Bild im Layout einnehmen wird.

<img sizes=“(min-width: 700px) 700px, 100vw“ srcset=“photo-larger.jpg 1400w, photo-medium.jpg 700w, photo-small.jpg 400w“ src=“photo-medium.jpg“ alt=“Alternative Text“ />

Weitere Infos für diese Variante könnt ihr der Mozilla Developer Spezifikations für das img-Element entnehmen.

Images mit dem Picture Element

Wenn man genauer bestimmten möchte, wann welches Bild genommen wird, ist das picture-Element die sinnvollere Variante, auch wenn diese nur von wenigen Browsern unterstützt wird. Mit dem polifill sollte es aber keine Probleme geben. Beim picture-Element haben wir zusätzlich innen das source-Element. Diesem Element übergeben wir, wie bereits vorher, die Bilder mittels srcset und den Pixeln. Zusätzlich können wir hier aber über das media-Attribut auch die Orientation, wie bei Codebeispiel 3, oder einen Mediaquery, wie bei Beispiel 4, übergeben. Man kann also wesentlich genauere Angaben machen, wann welches Bild verwendet wird.

<picture>
 <source media=“(orientation: landscape)“ srcset=“photo-large.jpg 2048w, photo-medium.jpg 1400w, photo-small.jpg 800w“ />
 <source srcset=“photo-square-large.jpg 1000w, photo- square-medium.jpg 800w />
 <img src=“photo-medium.jpg“ alt=“Alternative Text“ />
</picture>

 
<picture> 
 <source media="(min-width: 45em)" srcset="photo-large.jpg "> 
 <source media="(min-width: 32em)" srcset="photo-medium.jpg "> 
 <img src="photo-small.jpg" alt=" Alternative Text"> 
</picture> 

Weitere Informationen wieder in der Mozilla Developer Network Spezifikation für das picture Element.

Fazit

Das srcset und sizes attribut des img-Elementes wird von den Browser wesentlich besser unterstützt als das picture-Element. Wie es aussieht, wird sich ersters auch in der Zukunft mehr durchsetzen. Auch ist es in den meisten Fällen ausreichend, um die passenden Bilder für die Auflösung ausliefern zu können. Wenn man jedoch wirklich für spezielle Viewports passende Bilder ausliefern muss, bietet sich das picture-Element besser an.

The post Responsive Images appeared first on Mobile USTP MKL.

Verwendung von SVGs

SVGs bestehen zur Gänze aus Pfaden. Sie können in professionellen Programmen wie Adobe Illustrator, Sketch, etc. erstellt werden. Der größte Vorteil von SVGs ist, dass sie bei jeder Auflösung, in jeder Größe und auf jedem Gerät gestochen scharf aussehen. Man kann sie somit unbegrenzt skalieren und muss sich keine Sorgen machen, dass sie unscharf werden. Speziell bei hochauflösenden Displays ist dies ein großer Vorteil, da man hier kein zusätzliches Bild am Server haben muss. Doch wofür eigenen sich eigentlich SVGs. Grundsätzlich für alles was man auf Pfaden zaubern kann, wie zum Beispiel Logos. Auch komplexere Animationen sind möglich wie zum Beispiel http://svg-wow.org/camera/camera.xhtml oder verschiedene Projekte der Agentur Gardenestudio. Nicht geeignet sind SVGs wiederum für Bilder, welche eine hohe Anzahl an Variation in den Pixel haben, wie zum Beispiel Fotografien. Da SVGs im Hintergrund aus der Markup Language XML bestehen, können diese im Texteditor angesehen und verändert werden. Auch ist es möglich, diese mit CSS zu verändern und genau das ist die Stärke von SVGs. Um ein SVGs bearbeiten zu können muss das komplette XML Markup in das HTML Dokument eingefügt werden. Möchte man jedoch nur ein gestochen scharfes Icon haben und keine besonderen Variationen damit machen, reicht der Import über das alt bekannte <img>– Element. Wir schauen uns jetzt in zwei kleinen einfachen Beispielen an, wie das funktioniert. Für genauere Informationen wie man SVGs verändern kann, könnt ihr euch die Mozilla Developer Network Referenz für SVGs ansehen.

Beispiel 1

Ihr könnt euch beide Beispiele zur Veranschaulichung im Anhang herunterladen.

Was wir beim ersten Beispiel machen wollen ist, das MFG-Logo bis zum Viewport von 767px kleiner dazustellen und zusätzlich den Text „Mobile Forschungsgruppe“ auszublenden, da dieser sowieso nicht leserlich ist. Wir schauen uns also zuerst das SVG im Editor an und kommentieren uns einzeln die verschiedenen <path>-Elemente aus, um zu sehen welche davon unseren Text darstellen. Wenn wir dies haben, geben wir jedem path den wir ausblenden wollen die Klasse „hide“. Der Rest sollte für jeden bekannt sein. Mit einem mediaquery setzen wir die Klasse hide bis zu einer max-width von 767px auf display none. Zusätzlich verändern wir die Größe des SVGs auf 70px.

@media (max-width: 767px) {
 .hide {
  display: none;
 }
 svg {
  width: 70px;
  height: 70px;
 }
}

Wenn wir nun die Browsergröße verändern, sehen wir unser Ergebnis. Wenn ich dieses SVG Logo mit einem PNG vergleiche, sehe ich auch einen zusätzlichen benefit. Das SVG Logo is lediglich 18kb groß. Im Vergleich dazu das PNG Logo mit 38kb. Zusätzlich müsste ich eine zweite Variante machen ohne dem „Mobile Forschungsgruppe“- Schriftzug. Auch bräuchte ich das Logo für verschiedene Auflösungen. Zusätzlich habe ich einen HTTP Request weniger. Überall wo es Vorteile gibt, gibt es aber auch Nachteile. Wenn man das SVG über das Markup anstatt über das <img>-Element einbindet, kann das Logo nicht gecached werden. Eine Möglichkeit dies zu umgehen wäre mit dem HTML Object Element. Dieses kann gecached und zusätzlich gestyled werden. Dafür müssen die jeweiligen Stylesheet speziell eingebunden werden und jedes svg benötigt sein eigenes Stylesheet.

Beispiel 2

Bei unserem zweiten Beispiel widmen wir uns den Animationen. Wie bereits gezeigt, sind komplizierte Animationen möglich. Für den größten Teil sind aber kleine Icon Animationen ausreichend.  SVGs können auf verschiedene Arten animiert werden. Eine Variante wäre mit JavaScript, wobei man sehr viel Kontrolle über die Animation selbst hat. Da man hierfür fortgeschrittene JavaScript Kenntnisse benötigt, kann man sich auch der Hilfe von Libraries wie snap.svg oder velocity.js bedienen. Die einfachere und weniger Fehleranfällige Variante ist mittels CSS Animation welche wir uns kurz ansehen. Auch dieses Beispiel ist im Zip im Anhang vorhanden.

Wir verwenden ein kleines Rad als Einstellungs-Icon welches wir bei hover vergrößern und drehen wollen. Um bestimmte Teile eines SVGs gemeinsam animieren zu können, kann man diese mit dem <g>-Element gruppieren.  Wir vergeben dem Element die Klasse gear damit wir diese bei hover ansprechen können. Das eigentliche Icon bekommt die Klasse gear-icon. Mittels transition: transform .4s ease-out; sagen wir das wir die transofrm property animieren wollen in 0.4s und einem ease out (Wir fangen schnell an und werden zum Ende der Animation langsamer). Weiteres könnt ihr der Mozilla Developer Network Transition Spezifikation entnehmen. Wir wollen die Animation durchführen, sobald wir über das komplette Icon mit der Maus fahren. Wir sprechen somit unser <g> Element mit der Klasse gear bei hover an, setzten aber die transform property auf die Klasse gear-icon. Mittels transform: rotate(45deg) scale(1.3); sagen wir, dass wir eine Drehung um 45 Grad und eine 1.3 Fache Skalierung haben wollen. Wenn wir dies jetzt so ausführen würden, hätten wir noch ein Problem. Die Animation würde nämlich nicht um die eigene Achse durchgeführt werden, sondern eher schwingen. Versucht es also, indem ihr die transform-origin property auskommentiert. Dies liegt daran, weil SVGs als Ausgangspunkt die linke obere Ecke von sich selbst nehmen. Wir müssen also die transform-origin property auf 50% 50% setzen. Diese Angabe führt jedoch beim Firefox Browser zu Problemen da er %-Angaben im Bezug auf SVGs nicht versteht. Um jeden Browser unterstützen zu können suchen wir uns aus dem SVG die Werte für cx und cy heraus. Wenn wir diese dann in die Property eingeben kommen wir zu unserem erwünschten Ergebnis.

Daten zur Übung herunterladen

The post Scalable Vector Graphics appeared first on Mobile USTP MKL.

Die Digital Visions ist eine Konferenz für User Experience und Frontendwebentwicklung. Der Konferenztag konzentriert sich auf qualitative Themen rund um User Experience, Screendesign, Usability und HTML Trends.

Copyright Liechtenecker.at

The UX of Speed – Stefan Baumgartner

Der Vormittag startete mit dem ersten Vortrag um 9:00 und handelte von „The UX of Speed“. In diesem Vortrag wurde die Thematik der Performance einer Website von Stefan Baumgartner näher beleuchtet. Viele Studien haben bereits gezeigt, dass die Ladezeit einer Website nicht nur für die UX ausschlaggebend ist, sondern vielmehr eine Auswirkung auf Einnahmen hat. So erhöhte z.B. eine Einsparung von einer Sekunde die Einnahmen von Firmen wie Amazon (1 second -> 1.6 billion USD / yr less)  oder Walmart um ein Vielfaches. Zudem reiht Google schnellere Seiten auch besser in der Google Suche.

Um die Performance zu steigern, sollen in erster Linie Metriken definiert und Ziele gesetzt werden. Hier wurden unter anderem folgende Richtwerte genannt:

• Speed Index unter 1000ms (Zeit in der sichtbare Elemente der Site angezeigt werden – above the fold)
• die wichtigsten Informationen sollten innerhalb 1 Sekunde geladen werden
• Page Speed Score über 85 (https://developers.google.com/speed/pagespeed/)
• Seitengröße unter 1,5MB

Um diese Ziele zu erreichen, empfiehlt Baumgartner, sich um das Critical CSS zu kümmern, welches nötig ist, um wichtige erste Inhalte (above the fold) darzustellen. Diese können dazu durchaus inline geladen werden. Auch können WebFonts im Local Storage gespeichert werden, um ein erneutes Laden zu verhindern. Den größten Teil einer Website nehmen aber weiterhin Bilder ein. Auch jedes abgespeckte CSS und JS File bringt nichts wenn Bilder nicht optimiert werden.

Die Folien zur Präsentation:
https://speakerdeck.com/ddprrt/the-ux-of-speed

How to be the UX-Designer of tomorrow – David Höller

Copyright Liechtenecker.at

Mit dieser Thematik setzte sich der zweite Vortragende, David Höller, Gründer der User Experience Agentur Illustree, auseinander. Anhand des von ihnen durchgeführten Projekts (ÖBB-App) teilte er seine Erfahrungen mit uns.

Um gute Lösungen zu finden, ist es in erster Linie wichtig, die Probleme des Kunden zu kennen. Hilfreich sind hier Definitionen von Personas und entsprechende Szenarien, um die zugrundeliegende Thematik zu verstehen und ensprechend Lösungsansätze zu erarbeiten. Denn Designer sind Problemlöser. Dabei ist es auch notwendig, sich als UX Designer den Programmierern anzunähern, um Muster zu erkennen und sich mittels Teamarbeit austauschen zu können. Sie sind immer von Anfang an im Projekt involviert und müssen die Probleme erkennen und auch schon in einer einfachen Form lösen.

Nach einer kurzen Frühstückspause mit Brioche-Kipferl und Schoko-Croissants ging es etwas wissenschaftlicher weiter.

Gender Expericence – Marc Busch

Marc Busch, ein Wissenschaftler, welcher sich mit Gender Experience beschäftigt, erklärte uns, dass sich eine Gruppe gleichen Geschlechts häufig stärker unterscheidet, als Personen unterschiedlichen Geschlechts, also Mann und Frau. Das Geschlecht gebe jedoch Hinweise auf soziale Rollen der Personen.

Seine Annahmen basierten auf Studien bezogen auf das Gaming-Verhalten. Er teilte die jeweiligen Spielerpersönlichkeiten folgendermaßen auf: Conquerer, Seeker, Survivor, Socializer, Daredevil, Achiever und Mastermind.

Frauen sehen sich hier vermehrt als Socializer, wobei hier nicht ganz eindeutig ist, ob dieses Zugehörigkeitsgefühl auf das Geschlecht zurückzuführen ist, oder aus sozialen Normen entstanden ist.

Nach einer Mittagspause, in der wir uns mit Chili con Carne und Gemüsecurry stärken konnten, setzte sich der Nachmittag mit weiteren spannenden Vorträgen fort.

AI is the new UI: The shape of things to come – Jeremy Abbett

Jeremy Abbett ist ein amerikanischer Designer, Unternehmer, inspirierender Redner und kreativer Evangelist bei Google. Sein Vortrag handelte von der Zukunft und damit verbundenen Technologien wie Artificial Intelligence – künstliche Intelligenz.

Ein großer Teil seines Vortags beschäftigte sich mit den heutigen Technologien des Smartphones.  Als Beispiel nannte er moderne Sprachsteuerungen wie Microsofts Cortana, Apples Siri und Google now. Filme wie Terminator sind häufig der Grund für Ängste und Zweifel gegenüber diesen neuen Technologien, da hier gezeigt wird, wie künstliche Intelligenz zum Feind des Menschen wird.  Abbett ist jedoch davon überzeugt, dass diese Ängste überwunden werden müssen, um den Fortschritt vorantreiben und Innovationen schaffen zu können.

Er erzählte uns z.B. von seinem Face-Tracking Programm, welches durch Zucken der Augenbrauen Tweets verschicken kann. Wir sollen also viel experimentieren, denn wir haben heutzutage alle Möglichkeiten und Tools zur Verfügung. Am Beispiel des Films Interstellar zeigte er uns, wie künstliche Intelligenz ein großer Teil unserer Zukunft werden könnte.

Copyright Liechtenecker.at

Webseiten modular entwickeln – Jens Grochtdreis

Ein sehr spannendes Thema rund um CSS brachte uns Jens Grochtdreis. An einigen Beispielen zeigte er uns, dass jede Website eigentlich aus mehreren verschiedenen, sich aber immer wiederholenden Elementen zusammensetzt. Es sollte also hier wichtig sein, dass jedes Element für sich selber stehen kann und nicht abhängig von einem anderen ist. So sollte man zum Beispiel eine Hauptnavigation aus dem Header entfernen und in den Footer stecken können und sie sollte trotzdem gut aussehen und funktionieren. Jens Grochtdreis selbst verwendet eine eigene Ansammlung von Elementen (Styleguides), die er nur in seine Projekte einfügen muss und gegeben falls die Farbe zu ändern hat. Ein wichtiger Punkt war auch die richtige Verwendung von CSS Klassen. Anhand mehreren Beispielen zeigte er, dass Selektoren oft unnötig lang sind und eigentlich keinen Sinn ergeben.

Copyright Jens Grochtdreis

Als Abschluss zeigte er uns noch einige Arten, wie man CSS übersichtlicher schreiben kann. Hier war die Rede von Object Oriented CSS, Scalable and Modular Architecture for CSS,  BEM und NCSS. BEM, zum Beispiel, steht für Block, Element, Modifier und gibt bestimmte Namenskonventionen vor:

.person {} /* Block */

.person__hand {} /* Element */

.person—female {} /* Modifier */

.person—female__hand {} /* Modifier with Element */

.person__hand—left {} /* Element with Modifier */

Bei großen Websites kann diese Art natürlich zu sehr langen CSS Selektoren im Markup führen, ist aber dafür im CSS für Entwickler leicht verständlich.

Die Folien zur Präsentation:
https://speakerdeck.com/flocke/modulare-webentwicklung

Empathisches Design – Andrea Egger

Empathie beschreibt die Fähigkeit und Bereitschaft, Gedanken, Emotionen, Motive und Persönlichkeitsmerkmale einer anderen Person zu erkennen und zu verstehen. Für einen guten Designer ist es daher sehr wichtig, nicht nur an sich selbst zu denken sondern in den User hineinfühlen zu können und das Design dementsprechend an seine Bedürfnisse anzupassen. „Emphatie ist das Fühlen mit Menschen“ – Brené Brown. Es sollten Produkte erstellt werden welche beim benutzen Glücksgefühle erzeugen. Es ist hilfreich, wenn der Designer emphatisch ist und Verhaltensmuster interpretieren und analysieren kann. Laut Andrea sollte jeder Designer eigentlich ein zusätzliches Psychologiestudium absolvieren um bessere Designs kreieren zu können. Zudem sollte ein großes Ziel eines Designers sein, Bedürfnisse zu erzeugen, wo noch keine sind. Als Beispiel hierfür nannte Sie das Apple iPad. Auch wenden einige Unternehmen bereits diese Form des Designs an. Mister Spex erlaubt es zum Beispiel das der Benutzer von zu Hause aus Brillen anprobieren kann. Auch L’oreal hat eine ähnliche Art für Makeup Produkte.

Die Folien zur Präsentation:
http://de.slideshare.net/_Liechtenecker_/empathisches-design-54169642

Responsive by Design! Successful by Chance? – Thomas Piribauer, Björn Ganslandt

Copyright Liechtenecker.at

Heutzutage muss eine Website responsive sein um an alle User ausgeliefert werden zu können. Viele der heute verfügbaren Seiten sehen aber gleich aus und basieren zum großen Teil auf Frameworks wie Bootstrap oder Foundation. Aus diesem Grund sehen die Beiden die große Problematik darin, etwas anderes und originelleres umzusetzen, denn die Abänderungen des Frameworks bringt oft einen enormen Aufwand mit sich. Besser ist es daher, für eigene Projekte von vorne zu beginnen und keine Frameworks zu verwenden.

Ein großes Thema war auch das Planen und Entwickeln. Die beiden empfinden das Erstellen von Mockups auf Papier und anschließendes Prototyping im Code als sinnvoller und schneller. Über die Entwicklertools im Browser ist es dadurch rasch möglich, Styles zu ändern und somit gleich die Änderungen zu sehen. Mobile First Entwicklung ist heutzutage Standard, jedoch wird die Planung immer noch Desktop First durchgeführt da viele Kunden und Designer in großen Screens denken. Dies führt dann oft wieder zu endlos langen Websites die sich auf UX und Performance negativ auswirken. Laut Thomas und Björn sollte das Ganze „Gleichzeitig First“ heißen, denn sowohl Desktop als auch Mobile sind wichtig. Wie bereits im ersten Vortrag besprochen, sind auch sie der Meinung, dass Content das Wichtigste auf einer Website ist. Alles andere kann danach hinzugeladen werden.

Zuletzt haben sie noch ein Thema mit viel Potenzial angesprochen, nämlich „Offline First“. Oft hat man zum Beispiel im Zug keine Internetverbindung und kann dadurch nicht arbeiten. Mit einem Beispiel von Wunderlist und dem Offline Dinosaurier Jump-and-Run Game von Google Chrome haben sie gezeigt, wie es eigentlich funktionieren sollte. Bei Wunderlist werden Dinge, welche Offline passiert sind automatisch abgespeichert, sobald man wieder Internetverbindung hat.

Fazit

Um 17 Uhr neigte sich auch dieser lange Tag langsam dem Ende zu. Wir haben viele interessante Präsentation gehört und viele neue und zukunftsweisende Dinge erfahren. Jetzt geht es ran die Dinge auch in die Praxis umzusetzen. Mit einem Bier verabschiedeten wir uns von dieser Konferenz und freuen uns auf das nächste Jahr.

The post Digital Visions 2015 appeared first on Mobile USTP MKL.