Einholen der Zustimmung zur Datennutzung

Google und Facebook müssen User zukünftig Fragen, ob sie Daten verwenden dürfen. Somit stimmen die Nutzer selbst zu, dass ihre Daten ausgewertet werden. Zudem müssen Unternehmen ihre Produkte datenschutzfreundlich voreinstellen.

Einfacherer Zugang zu eigenen Daten

Internetnutzer erhalten mehr Informationen darüber, wie ihre Daten verarbeitet und verwendet werden. Diese Informationen müssen klar und verständlich formuliert sein.

Datenportabilität

Die EU will das User künftig ihre Daten einfach von einem Social Network zu einem anderen transferieren können, die dort dann auf Anfrage gelöscht werden. Voraussetzung dafür ist ein Standard, wie er bereits beim Facebook-Login vorhanden ist.

Verständigung wenn eigene Daten gehackt werden

Die User müssen so schnell wie möglich verständigt werden, wenn ihre Daten gehackt wurden, damit sie notwendige Maßnahmen ergreifen können.

Anlaufstellen für Bürger

EU-Bürger können sich bei Verstoß gegen die Datenschutzrichtlinien in Zukunft an die Datenschutzbehörde ihres Landes wenden und nicht wie zuvor zu jener in dem europäischen Firmensitz des Unternehmens. Im Falle von Facebook musste man beispielsweise nach Irland reisen, um Anklage gegen das Unternehmen zu erheben.

Altersbeschränkung

EU-Mitgliedsstaaten dürfen jeweils selbst bestimmen ab welchem Alter Soziale Netzwerke genutzt werden dürfen. Die EU sieht im Allgemeinen 16 Jahre vor, aber dies kann von nationalen Bestimmungen überschrieben werden. Das bestimmte Mindestalter darf allerdings nicht unter 13 Jahren liegen.

Kritik an Altersbeschränkung

– aus derstandard.at Kommentar Rainer Schüller

Der Vorschlag der EU-Kommission zur Altersbeschränkung ist nicht nur absurd sonder auch schwer umsetzbar. Was wirklich helfen würde ist, wenn man ab dem Kindergartenalter gefahrenfreie Internetnutzung schult. Am effektivsten wäre es, wenn die Eltern sich mehr darum kümmern würden was ihre Kinder egal welches Alters tun und für ihr eigenes soziales Netzwerk daheim mehr Zeit aufbringen würden.

Beispiel

Hier ein Beispiel einer Umsetzung dieser Richtlinie, die völlig ab Ziel vorbei führen würde:
Sind Sie schon 16 Jahre alt? Falls nicht, holen Sie sich die Bestätigung Ihrer Eltern oder drehen Sie sofort das Internet ab! Falls doch, sind Sie theoretisch berechtigt, diesen Text weiterzulesen, außer sie befinden sich in einem Land, in dem Sie schon unter 13 Jahren die Zustimmung Ihrer Eltern zum Zutritt brauchen. Wenn Sie über 16 sind, können Sie bedenkenlos weiterlesen.

Recht auf Vergessenwerden

Unternehmen müssen auf Wunsch eines EU-Bürgers seine Daten löschen. Google machte das bereits möglich und strich hunderttausende Links aus den Suchergebnissen.

Statistik zu Link-Löschungen durch Google

In der Abbildung darunter ist klar zu erkennen, dass Facebook am häufigsten von Link-Löschungen betroffen ist.

Statistik zu Link-Löschungen durch Google

Folgen bei Nichteinhaltung der EU-Datenschutz-Grundverordnung

Die Verantwortung für die Einhaltung der EU-Datenschutz-Grundverordnung liegt ausschließlich bei den einzelnen Unternehmen, die bei Verstoß mit Geldstrafen belegt werden. Dies gilt unabhängig davon, ob Sie bei Ihren Datenanforderungen mit einem IT-Partner oder Cloud-Dienstleister zusammenarbeiten.
Unternehmen drohen Strafzahlungen von vier Prozent des Gesamtumsatzes. Bei Facebook wäre das eine Strafe in Milliardenhöhe. Diese Strafzahlungen betreffen nicht nur europäische Unternehmen, sondern auch Firmen außerhalb der EU. Wer Probleme mit Anbieter aus dem EU-Ausland hat kann sich in eigener Sprache an die heimische Datenschutzbehörde wenden.

Klarnamenpflicht

Von der Verordnung wird das Thema Klarnamenpflicht jedoch nicht erfasst.
Facebook besteht darauf, dass Nutzer einen “authentischen” Namen verwenden. Jedoch hat das Unternehmen die Regelung nun etwas gelockert. User dürfen unter Angaben eines Grundes auch einen anderen Namen, als ihren gesetzlichen verwenden. Das Unternehmen will damit unter anderem Transgender-Personen entgegenkommen.

Hasspostings

Generell werden noch weitere Änderungen auf Unternehmen zukommen. In Deutschland wurde vor kurzem beschlossen, dass Hasspostings binnen 24 Stunden gelöscht werden müssen. In Österreich gibt es derzeit noch keine spezielle Vorgehensweise. Da es aber in den letzten Monaten sehr oft zu Hetze gegen Flüchtlinge gekommen ist, tritt ab Jänner 2016 ein neuer Verhetzungsparagraph in Kraft.

Reaktion der Unternehmen

Unternehmen fürchten sich vor strengen Fesseln für die Firmen im Gegensatz zu jenen in den USA. Der Fokus auf den Datenschutz der Bürger behindert ihrer Meinung nach Innovationsprozesse, die internationale Geschäftstätigkeit und die Zusammenarbeit von Unternehmen. Sie warnen vor einen Hemmschuh für die europäischen Industrie und Forschung.

Wie beurteilen die Experten die Verordnung?

Da es sehr viele schwammig formulierte Detailregelungen gibt, wird es in der Praxis zu vielen Rechtsunsicherheiten kommen und der EuGH gebraucht, um zu klären ob es sich um eine unmissverständliche Zustimmung zur Datenverarbeitung handelt. Massives Lobbying der Konzerne hat für einige Schlupflöcher gesorgt. Außerdem kann die Datenschutzverordnung nur durch nationales Recht umgesetzt werden und es wird weiterhin zu starken Unterschieden von Land zu Land kommen.

Nach der Einigung der EU-Staaten, EU-Kommission und Parlament müssen die Datenschutzrichtlinien nun vom Ministerrat vor dem Parlament angenommen werden. Dabei handelt es sich aber nur noch um eine Formalie.

Quellen

https://www.trendingtopics.at/x-fragen-antworten-das-bringt-der-neue-datenschutz-in-der-eu-ab-dm-jahr-2018/

http://www.nachrichten.at/nachrichten/web/Neue-Datenschutzregeln-Das-aendert-sich-fuer-Internet-Nutzer;art122,2060459

http://www.zeit.de/digital/datenschutz/2015-12/eu-reform-datenschutz-beschlossen

http://www.spiegel.de/netzwelt/netzpolitik/datenschutz-einigung-auf-neue-eu-regeln-a-1068046.html

http://futurezone.at/netzpolitik/was-bringen-die-neuen-eu-datenschutzregeln/169.982.331

http://derstandard.at/2000027640007/Facebook-und-Google-Mehr-Datenschutz-weniger-Hasspostings

http://www.searchsecurity.de/meinung/Ist-Ihr-Unternehmen-bereit-fuer-die-EU-Datenschutz-Grundverordnung

http://europa.eu/rapid/press-release_IP-15-6321_en.htm?locale=en

Beispiel Kritik der Altersbeschränkung:
http://derstandard.at/2000027625989/An-der-Realitaet-der-sozialen-Netzwerke-vorbei?_articlePage=1

Titelbild:
http://3.f.ix.de/scale/geometry/695/q75/imgs/18/1/4/9/0/0/4/3/urn-newsml-dpa-com-20090101-140409-99-06612_large_4_3-a6c100037ba9e115.jpeg

Grafik:
https://www.trendingtopics.at/recht-auf-vergessen-google-hat-bisher-518-318-links-aus-seiner-suche-geloescht-die-meisten-richtung-facebook/

The post Das bringt die EU-Datenschutzverordnung ab dem Jahr 2018 appeared first on Mobile USTP MKL.

Wie bereits von Suchmaschinen bekannt sind Rich Snippets einer Webseite wichtig um den Usern (oder den Suchmaschinen), in wenigen Worten und Zeichen den Inhalt zu verraten. Was Rich Snippets sind und wie sie funktionieren wird in der folgenden Grafik erklärt:

Abbildung 1: Rich-Snippets-Guide

(Quelle: https://moz.com/blog/a-visual-guide-to-rich-snippets)

Und genau hier setzen auch die Social Media Snippets an – diese verwenden etwa ein Open Graph Protocol (Facebook), Twitter Cards (Twitter), oder schema.org (Google+).. Hier ein Beispiel für das Open Graph Protocol:

<html prefix="og: http://ogp.me/ns#">
    <head>
        <title>The Rock (1996)</title>
        <meta property="og:title" content="The Rock" />
        <meta property="og:type" content="video.movie" /> <meta property="og:url" content="http://www.imdb.com/title/tt0117500/" /> <meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
        ...
    </head>
    ...
</html>

Tags für unterschiedliche Inhalte

Im Wesentlichen haben Social Media Snippets unterschiedliche Tags für verschiedenste Kategorien/Inhalte (Title, Description, Type, Image, Music),
die wenn sie gesetzt sind die entsprechenden Informationen ausgeben. Mithilfe dieser unterschiedlichen Tags wie z.B.: og:image lässt sich genau festlegen welches Image im Falle eines Facebook Shares angezeigt wird. Um Fehler zu vermeiden wird der Open Graph Debugger von Facebook zur Verfügung gestellt, mit jenen man die Ausgabe nochmals überprüfen kann. Twitter bietet ein Testtool unter cards-dev.twitter.com/validator an und Google stellt einen Validator unter https://developers.google.com/structured-data/testing-tool/ zur Verfügung. Welche Kategorien bei Open Graph zu Verfügung stehen kann man unter folgenden Link nachlesen: http://ogp.me. Alle Twitter-Metatags sind unter diesem Link zu finden: https://dev.twitter.com/cards/markup.

Anatomie eines Social Media Snippets

In Abbildung 2 wird der Aufbau eines Social Media-Snippets erklärt.

Abbildung 2: Anatomie eines Social Media Snippets

(Quelle: https://moz.com/blog/rock-your-seo-with-structured-social-sharing-mozcon-presentation)

A. Share Blurb – Beschreibung über den Contents.
B. Title – Page-Title
C. Description – kurze Beschreibung der Website
D. Image – Thumbnail-Bild
E. URL – Verlinkt den Titel zur jeweiligen Website

Einschränkungen der Plattformen

Wichtig zu beachten sind die Angaben der einzelnen Plattformen. So dürfen Title bei Twitter (twitter:title) nicht mehr als 70 Zeichen enthalten, oder ein Bild nicht größer als 1 MB sein. Bei Facebook gibt es keine Zeichenbegrenzungen und der Beschreibungstext (og:description) wird unter Umständen wenn nur wenig Platz zur Verfügung steht abgeschnitten. Jedoch Bilder sollten 1200 x 630 Pixel oder notfalls 600 x 315 Pixel Größe aufweisen. Da die Likes und Shares nur von der angegeben URL getrackt werden, sollte die reine URL der Seite ohne Session-ID angegeben werden (og:url). Die Anzahl der Likes und Shares kann ebenfalls im Open Graph Debugger verfolgt werden. Derartige Einschränkungen sind aber leicht im Internet zu finden und nachzulesen.

Fehler

Die Basic-Tags, die unbedingt ausgefüllt werden sollten sind title, description, image und url. Diese Felder werden bei jedem Share angezeigt und sollten daher nicht leer gelassen werden, da sich sonst die jeweilige Social Media Plattform ihre Informationen selbst sucht. Facebook holt sich Informationen wie title und description aus den Meta-Angaben oder wenn dort nicht vorhanden aus den ersten paar Zeichen im Text auf der jeweiligen Website. Das geht aber nicht immer gut. Bei Abbildung 3 wird das Logo von funny-frisch.de nicht richtig angezeigt. Die Beschreibung darunter passt zufälligerweise ganz gut, tatsächlich ist es aber der erste Absatz der auf der Website zu finden ist. Auf Abbildung 4 wird das Bild von snickers.de zwar richtig ausgegeben, aber die Beschreibung darunter handelt von Mars nicht von Snickers. Burger King erzeugt in Abbildung 5 ein leeres Bild.

Abbildung 3: funnyfrisch.de

Abbildung 4: snickers.de

burgerking.de

Google geht in seinem sozialen Netzwerk am flexibelsten mit den Metadaten um und greift ebenfalls auf die Open-Graph-Daten zu, falls die Mikrodaten im Format schema.org nicht vorhanden sind. Sind die Open-Graph-Daten ebenfalls nicht vorhanden nutzt Google den HTML-title und die description der Seite. Wenn alle drei Varianten nicht vorhanden sind, versucht Google die relevanten Informationen aus der Website herauszulesen.

Fazit

Für heutige Webseiten Betreiber, welche im Social Media Bereich vertreten sind ist es mittlerweile Pflicht Social Media Snippets richtig zu verwenden, da es weder einen großen Aufwand darstellt, noch eine technische Herausforderung ist. Bei größeren Content Management Systemen gibt es auch inzwischen unzählige Plugins, die einem hierbei helfen.

The post Benefits von Social Media Snippets appeared first on Mobile USTP MKL.

SVG-Export mit Adobe Illustrator

In einfachen SVG Grafiken wie dieses Beispiel hier gibt es drei Grundformen: Quadrat, Dreieck und Kreis.

drei einfache Grundformen

Jedoch ist der Export aus Adobe Illustrator gar nicht so leicht, da es sechs unterschiedliche Möglichkeiten gibt um SVGs abzuspeichern. Folgende Profile werden im Adobe Illustrator angeboten:

• SVG 1.0 und SVG 1.1: für SVG-Dateien, die auf einem Desktop-Computer angezeigt werden.
• SVG Basic 1.1: für Geräte mit mittlerer Leistung
• SVG Tiny 1.1 und SVG Tiny 1.1+: für kleine Geräte wie Mobiltelefone, Wichtig: SVG Tiny und SVG Tiny Plus wird nicht von allen Mobiltelefonen unterstützt.
• SVG Tiny 1.2: für SVG-Dateien, die auf einer Reihe von unterschiedlichen Geräten angezeigt werden sollen, von PDAs und Mobiltelefonen bis hin zu Laptops und Desktopcomputern.

Diese verschiedenen Profile sind eigentlich ein Widerspruch in sich selbst, da es bei Vektorgrafiken darum geht dass sie verlustfrei skaliert werden können und deshalb auf allen Geräten sauber angezeigt werden sollen. Wichtig ist hier, dass nicht alle Formate alle Eigenschaften von SVGs unterstützen. Im Allgemeinen ist es am besten mit der Vollversion SVG 1.1 zu arbeiten.

Ein Beispiel für einen SVG-Export ist folgendes:

<?xml version=“1.0“ encoding=“utf-8“?>
<!—Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC „-//W3C//DTD SVG 1.1//EN“ „http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd“>
<svg version=“1.1“ id=“Ebene_1“ xmlns=“http://www.w3.org/2000/svg“ xmlns:xlink=“http://www.w3.org/1999/xlink“ x=“0px“ y=“0px“ viewBox=“0 0 300 100“ enable-background=“new 0 0 300 100“ xml:space=“preserve“>
<rect fill=“#21B4AE“ width=“100“ height=“100“/>
<polygon fill=“EDBA4B“ points=“100,0 200,50 100,100“/>
<circle fill=“#E3493A“ cx=“250“ cy=“50“ r=“50“/>
</svg>

Die ersten drei Zeilen in dem Beispiel sind für die Darstellung nicht relevant. Wichtig sind nur die Daten im svg-Element, jedoch sind auch einige Attribute im svg-Element nicht notwendig für die Anzeige. Daher kann das exportierte File noch gekürzt werden:

<svg version=“1.1“ id=“Ebene_1“ xmlns=“http://www.w3.org/2000/svg“ xmlns:xlink=“http://www.w3.org/1999/xlink“ x=“0px“ y=“0px“ viewBox=“0 0 300 100“>
<rect fill=“#21B4AE“ width=“100“ height=“100“/>
<polygon fill=“EDBA4B“ points=“100,0 200,50 100,100“/>
<circle fill=“#E3493A“ cx=“250“ cy=“50“ r=“50“/>
</svg>

Wird dieser Code im HTML-Dokument eingesetzt wird er von den Browsern unterschiedlich interpretiert. Obwohl die Viewbox die gewünschten Maße enthält skalieren Chrome, Firefox, Opera und Safari das SVG auf die gesamte Breite des Viewports. Der Internetexplorer (ab IE9) stellt es in den gewünschten Maßen 300×100 Pixeln dar. Fügt man das Bild mittels eines img-Elements mit der gewünschten Höhe und Breite ein ergibt sich ein anderes Problem und das Bild wird im Safari unter Windows verzerrt angezeigt.

<img src=“illustrator-svg.svg“ width=“300“ height=“100“>

Das eigentliche Problem ist, dass Illustrator kein width- und height-Attribut mit exportiert. Damit werden Darstellungsfehler vermieden. Man kann sie entweder im Nachhinein im Code hinzufügen oder im Illustrator beim Speichern unter „Mehr Optionen“ und den Haken bei „interaktiv“ herausnehmen. Nun wird die Grafik in allen Browsern mit der richtigen Höhe und Breite angezeigt.

<svg version=“1.1“ id=“Ebene_1“ xmlns=“http://www.w3.org/2000/svg“ xmlns:xlink=“http://www.w3.org/1999/xlink“ x=“0px“ y=“0px“ viewBox=“0 0 300 100“ width=“300px“ height=“100px“>

SVG-Export mit Inkscape

In Inkscape gibt es zwei Möglichkeiten ein SVG zu exportieren: Inkscape-SVG oder normales SVG. Während das aus Illustrator erzeugte File 611 Bytes, gekürzt und korrigiert 250 Bytes benötigt, kommt das Inkscape-SVG auf stolze 2,8Kilobyte, da viele unnötige Metadaten enthalten sind.

<sodipodi:namedview id=“base“ pagecolor=“#ffffff“ bordercolor=“#666666“ borderopacity=“1.0“ inkscape:pageopacity=“0.0“ inkscape:pageshadow=“2“ inkscape:zoom=“2.5527972“ inkscape:cx=“89.269963“ inkscape:cy=“47.142857“ inkscape:document-units=“px“ inkscape:current-layer=“layer1“ showgrid=“false“ inkscaape:window-width=“1507“ inkscape:window-height=“842“ inkscape:window-x=“2095“ inkscape: window-y=“91“ inkscape:window-maximized=“0“ />
	<metadata id = „metadata7“>
		<rdf:RDF>
			<cc:Work rdf:about=““>
				<dc:format> image/svg+xml</dc:format>
				<dc:type rdf:resource=“http://purl.org/dc/dcmitype/StillImage“ />
				<dc:title></dc:title>
			</cc:Work>
		</rdf:RDF>
	</metadata>

Beim Export als normales SVG fallen einiger dieser Metadaten weg und der benötigte Speicherplatz beträgt nur noch 1,49 Kilobyte. Jedoch gibt es hier den großen Nachteil, dass die Grafik nicht durch Grundformen sondern durch ein path-Element beschrieben wird. Dadurch können die unterschiedlichen Formen nachträglich nur noch schwer unterschieden werden (gerade noch durch die Farbe) und das nachträgliche Editieren der Formen ist um einiges schwerer. Folglich ist der benötigte Speicherplatz bei komplizierten Formen sehr groß, da sich diese ineffiziente Schreibweise summiert.

<path d=“m -68.12602, 73.684960,-48.113123 -10e-7,-48.11312 L -26.458834,1.5152781 15.208351,25.571838 -26.458836,49.6284 z“ transform=“matrix(1.199985,0,0,1.0392175,181.75021, 975.78748)“ id=“path3755“ style=“fill:#e3493a; fill-opacity:1;stroke:none“ />

Fazit dieses Vergleichs ist, dass es effizienter ist die benötigten SVGs im Adobe Illustrator zu speichern. Arbeitet man mit anderen Programmen sollte man unbedingt einen Blick in den erzeugten Code werfen.

Grafik komprimieren

Wenn man SVG-Grafiken nicht manuell durchgehen will kann man zur Komprimierung auch ein Tool nutzen. Dabei sollte man einen genauen Blick auf die Ergebnisse werfen, denn nicht jedes Tool liefert vernünftige Ergebnisse.

Schickt man ein SVG in Compressor.io wird aus dem originalen Illustrator-SVG-File mit 611 Bytes eine Datei mit 617 Bytes. Die ersten drei Zeilen bleiben enthalten und es wird sogar ein unnötiges Attribut hinzugefügt. Das Inkscape-SVG wird von 2,8 auf 1,04 Kilobyte reduziert. Aber auch hier werden nicht alle unnötigen Metadaten entfernt.

Der SVG Optimiser von Peter Collingridge liefert da schon bessere Ergebnisse. Er entfernt die ersten drei Zeilen aus dem Illustrator-File und schreibt den Code in eine Zeile. Somit verbleiben nur noch 432 Bytes (vorher 611 Bytes). Jedoch werden nicht alle überflüssigen Metadaten aus dem Inkscape-SVG entfernt. Dadurch ist das Ergebnis mit 1,25 Kilobyte etwas größer als bei Compressor.io.

In Bezug auf die Dateigröße arbeitet SVGO am effektivsten. Die Illustrator-Datei wird auf 245 Bytes reduziert und die Inkscape-Datei auf 366 Bytes. Aber alle Grundformen werden hier in ein path-Element umgewandelt, wodurch ein paar Zeichen eingespart werden. Dieser Schritt lohnt sich also erst ganz am Schluss wenn keine Änderungen mehr durchgeführt werden.

SVGs planen

Will man SVGs später effizient verwenden kann das Planen einer Grafik sehr sinnvoll sein. Beispielsweise können die vier Ringe in der Grafik darunter mit vier separaten Kreisen beschreiben werden oder aus zwei Kreisen mit Umrandung/Stroke erstellt werden. Außerdem müssen die Kreise nicht fünf Mal neu erstellt werden, sondern der Kreis kann einmal gruppiert und mit use wiederverwendet werden.

wiederholende Elemente sollten wiederverwendet werden

Die kleinste manuell geschriebene Version zu dieser Grafik kann also folgendermaßen aussehen:

<svg version=“1.1“ xmlns=“http://www.w3.org/2000/svg“ xmlns:xlink=“http://www.w3.org/1999/xlink“ x=“0px“ y=“0px“ viewBox=“0 0 500 200“ width=“500“ height=“200“>
<g id=“kreise“>
	<circle fill=“#E3493A“ cx=“50“ cy=“50“ r=“45“ stroke=“#EDBA4B“ stroke-width=“10“ />
	<circle fill=“#FFF“ cx=“50“ cy=“50“ r=“25“ stroke=“#21B4AE“ stroke-width=“10“ />
</g>
<use x=“100“ y=“100“ xlink:href=“#kreise“ />
<use x=“200“ y=“0“ xlink:href=“#kreise“ />
<use x=“300“ y=“100“ xlink:href=“#kreise“ />
<use x=“400“ y=“0“ xlink:href=“#kreise“ />
</svg>

Diese Datei benötigt 558 Bytes, im Gegensatz einer im Adobe Illustrator regulär erstellten Datei mit 3,6 Kilobytes. Das Gruppieren macht sich vor allem bei großen Infografiken bezahlt, in jenen zum Beispiel Hochhäuser oder Bäume einmal gruppiert und immer wiederverwendet werden.

Weiters ist auf nicht sichtbare Ebenen zu achten. Diese sind zwar im Moment ausgeblendet, aber werden trotzdem mit dem Attribut display=“none“ exportiert. Falls nicht verschiedene Ebenen innerhalb des SVGs ein- oder ausgeschaltet werden sollen, sollten nicht benötigte Ebenen entfernt werden.

Zusammenfassend lässt sich sagen, dass ein Blick in den Quellcode der SVG-Dateien bei einem Webprojekt, in dem viele SVG-Grafiken verwendet werden wichtig ist, um diese zu optimieren. Folglich wird die Größe der Files verringern und die Performance der Website verbessert.

Quellen:

Schwarz, N. (2014, November). SVG: Tücken im Detail. Screenguide, (24), 76–79.

The post Effizienter und optimierter Einsatz von SVG Grafiken appeared first on Mobile USTP MKL.

Wenn man sich einmal so eine Kalender-App ansieht wird einem schnell klar, was die großen Probleme herkömmlicher Kalender-Applikationen sind. Auch wenn die Smartphones immer größer werden, steht sehr wenig Platz zur Verfügung, um die große Menge an Kalendereinträgen übersichtlich darzustellen. Wünschenswert wäre eine Ansicht, in der auf einem Blick erkennbar ist, was in der jeweiligen Woche zu tun ist. Will man auch noch die Aufgaben, die für jeden Termin fällig sind, auf einem kleinen Screen anzeigen, stößt man bei vielen Smartphone-Applikationen scheinbar auf ein Ding der Unmöglichkeit.

Any.do Cal

Start der Applikation

Gleich beim ersten Start der Applikation werden alle meine Kalender-Konten erkannt und eingespielt und es war kein Login nötig. Das ist meiner Meinung nach ein sehr großer Pluspunkt, denn keiner hat so viel Zeit, sich um Konfigurationen eines Kalenders zu kümmern, der einem das Zeitmanagement erleichtern und somit schlussendlich Zeit einsparen soll. Außerdem fragt mich die Applikation , ob ich Geburtstage von Freunden in Facebook importieren möchte. Weiters bietet er mir die zugehörige Smartphone App Any.do Todo an, die gleichzeitig meine täglichen Aufgaben verwaltet und in meinen Kalender einbindet. Wie man sieht ist gleich zu Beginn erkennbar, dass sich viele Applikationen mit Any.do Cal automatisch verbinden können.

Hauptscreen

Der Hauptscreen der Kalender-App ist sehr übersichtlich gestaltet. Links oben wird das Monat und direkt darunter wie weit der jeweilige Tag von heute entfernt liegt angezeigt. Zusätzlich gibt es eine Leiste mit Wochentagen und dem zugehörigen Datum, unter der die Termine nach Uhrzeit sortiert ausgegeben. Neben jedem Termin steht ein kleiner farbiger Punkt der die Kalenderzugehörigkeit kennzeichnet, trotzdem können die einzelnen Kalender nur schwer auseinander gehalten werden. Folglich ist das ein klarer Minuspunkt für die Übersichtlichkeit der App, da jederzeit klar sein sollte zu welchem Kalender welcher Termin zugehörig ist, vor allem wenn es sich um die Trennung von Terminen in der Freizeit und in der Arbeit oder Studium handelt. Ein weiterer Nachteil ist das Fehlen der Ortsangabe direkt bei dem Termin. Erst durch Auswahl des Events kann der User erfahren, wo der Termin stattfindet.

Gesten

Durch Swipe nach unten im oberen Bereich der Anzeige vergrößert sich die bereits erwähnte Leiste in der Höhe und das gesamte Monat wir angezeigt. In dieser Anzeige befinden sich Balken unter jedem Datum, die die Terminauslastung an den jeweiligen Tagen veranschaulicht. Tätigt man wieder einen Swipe nach oben, verringert sich die Höhe der Leiste wieder auf eine Woche. Diese Funktion ist vor allem nützlich, wenn man auf einem Blick sehen möchte, wo man in dem jeweiligen Monat noch Freizeit hat und wo man schon komplett verplant ist. In diesem oberen Bereich ist ebenfalls ein Swipe nach links oder rechts möglich, der mich zwischen den Wochen wechseln lässt. Im unteren Bereich, in dem sich die jeweiligen Termine eines Tages befinden kann man durch Swipe nach links oder rechts zwischen den Tagen hin und her wechseln.

Neuer Termin

Durch Berühren des +-Icons rechts oben, kann ein neues Event erstellt werden. Im angezeigten Textfeld wird der Name des Termins eingegeben und die Uhrzeit wird ebenfalls gesetzt. Der Datepicker zu Angabe der Uhrzeit gefällt mir sehr gut und es ist unübersehbar, dass in dieser Applikation besonderes Augenmerk auf Design gelegt wurde. Der Termin kann nachträglich in der Detailansicht durch Berührung des Events editiert werden.

Einstellungen

Rechts unten befinden sich das Menü, über das entweder Feedback zur App gegeben werden kann bzw. der User zu den Einstellungen gelangt. Die Position des Menü-Icons finde ich suboptimal, da man sich das Menü eher oben erwartet. Unter den Einstellungen können einige Konfigurationen festgelegt werden, aber es gibt wenige Personalisierungsmöglichkeiten. Das Thema kann ausgewählt werden, das sich aber nur auf die Bilder auswirkt, die im Hintergrund angezeigt werden. Unter anderem kann festgelegt werden, ob der Kalender mit Facebook verbunden werden, welche Kalenderkonten angezeigt werden sollen, der erste Tag der Woche kann ausgewählt und der Default-Kalender bzw. Default-Reminder festgelegt werden.

Fazit

Zusammenfassend lässt sich sagen, dass die Kalender App Any.do Cal besonders für User entwickelt wurde, die Wert auf Design legen. Die Gestaltung der Applikation hebt sich sehr von anderen ab und ist auch sehr übersichtlich. Besonders hat mir der Anzeige der Terminauslastung gefallen, da ich das zuvor noch nicht in einer anderen Kalender-Applikation gesehen habe. Die Synchronisation mit anderen Applikationen funktioniert einfach und schnell. Im Gegensatz dazu fällt allerdings die fehlende Personalisierbarkeit auf und dass keine verschiedenen Kalender-Ansichten zur Auswahl stehen. Außerdem dauert es sehr lange, wenn Kalenderkonten ein und wieder ausblendet werden bis diese wieder korrekt angezeigt werden und es gibt nur die Sprache Englisch zur Auswahl. Die Todos sind nicht direkt in die Applikation integriert, sondern es muss eine extra Applikation installiert werden, die die Verwaltung der Aufgaben ermöglicht. In einem Satz lässt sich die App als schön, übersichtlich, aber leider als kaum personalisierbar zusammenfassen.

Sunrise Calendar

Start der Applikation

Zu Beginn muss man sich im Gegensatz zu Any.do Cal mit seinem Facebook-Login oder Google-Konto einloggen und es können verschiedene externe Kalender oder Applikationen hinzugefügt und eingebunden werden. Anschließend kommt ein Dialog zur Auswahl der angezeigten Kalender. Wie man sieht ist hier der erste Start der App schon etwas zeitaufwendiger und komplizierter, da hier nicht alle Konten automatisch erkannt und eingebunden werden. In Any.do Cal war kein Google-Login von Nöten, um meine Kalenderkonten einbinden zu können.

Hauptscreen

Beim Sunrise Calendar gibt es zwei verschiedene Ansichten zur Auswahl: die Listen- und Balkenansicht.

Ganz oben werden die Wochentage von 2 Wochen mit ihrem zugehörigen Datum angezeigt. Klickt man auf ein Datum werden darunter die angezeigten Termine auf das aktuell ausgewählte Datum aktualisiert, die übersichtlich in Listenform nach Uhrzeit sortiert dargestellt werden. Anders als im Any.do Cal wird der Ort direkt unter dem Termin ausgegeben und man muss nicht erst auf die Detailansicht des Termins navigieren, um den Ort des Termins zu erfahren. Außerdem wird die Kalenderzugehörigkeit links neben dem Event durch einen farbigen Punkt gekennzeichnet, der größer und markanter als in der vorherigen App angezeigt wird. Durch Swipe nach rechts oder durch Berührung des dritten Icons von rechts kann die Ansicht auf die Balkenansicht gewechselt werden.
In dieser Ansicht werden immer drei Tage nebeneinander angezeigt und entlang einer vertikalen Zeitleiste die Termine in Form von Balken aufgetragen. Im Vergleich zur Listenansicht wird hier nicht der Ort direkt unter dem Event angezeigt und wenn es mehrere Kalenderkonten gibt, in denen sich die Termine überschneiden, wird dieser Ansicht schnell sehr unübersichtlich, da die Balken immer dünner werden. Die Termin-Balken werden in der Farbe der jeweiligen Kalenderzugehörigkeit eingefärbt.

Gesten

In der Listenansicht, kann innerhalb der oberen Leiste durch Swipe nach unten die Höhe dieser zur der Anzeige von vier Wochen vergrößert und zwischen den Monaten gescrollt werden. Durch aufgelisteten Termine kann durch Swipe-Gesten nach oben oder unten zwischen den Terminen der verschiedenen Tage gescrollt werden. Wie schon oben erwähnt wird durch Swipe nach links oder rechts die Ansicht auf Listen oder Balkenansicht geändert.
In der Balkenansicht kann zwischen den Tagen hin und her gewechselt werden, indem ein Swipe nach links oder rechts getätigt wird. Swiped man nach oben oder unten bewegt man sich entlang der senkrechten Zeitleiste. Ein hübsches Zusatzfeature ist der kleine Pfeil links unten in beiden Ansichten, der immer in die Richtung zeigt wo sich der heutige Tag befindet. Berührt man diesen gelangt man zum jetzigen Zeitpunkt.

Neuer Termin

Wie in der vorherigen Applikation kann auch hier durch Berührung des großen „+“-Icons rechts oben ein neuer Termin erstellt werden.

Im folgenden Dialog können Kalendertitel, Uhrzeit oder ganztägiges Event, Ort, Zeitzone, Kalenderzugehörigkeit , Erinnerung, Eventwiederholungen und Einladungen von anderen Personen zu diesem Termin eingestellt werden. Editieren und Löschen des Termins ist wie in der Any.so Cal-App in der Detailansicht des Termins möglich. Vergleicht man den Erstellungs-Dialog mit der oben erwähnten Kalender-Applikation, ist diese um einiges umfangreicher. Diese Einstellungen zu einem Termin können bei Any.do Cal erst in der Detailansicht des Events bearbeitet werden. Der große Unterschied ist, dass sich Any.do Cal auf die möglichst schnelle und einfache Erstellung eines Events konzentriert und nur die wichtigsten Einstellungen bei der Erstellung eingibt. Nachträglich kann dieser noch genauer editiert werden. Sunrise hingegen bietet die gesamten Konfigurationen schon bei der Erstellung an und ist daher etwas unübersichtlicher und komplizierter wenn es um das schnelle Eintragen eines Termins geht.

Einstellungen

Angezeigte Kalenderkonten, Notifications, also Einladungen zu Terminen, erster Tag der Woche, die Wetteranzeige, die Refresh-Rate, der Default-Kalender können hier eingestellt werden und Ausloggen ist hier möglich. Zu den Einstellungen gelangt man über das Zahnrad rechts oben in der Anzeige. Im Unterschied zu Any.do Cal kann hier die Refresh-Rate des Kalenders konfiguriert werden und eine Wetteranzeige neben dem Termin ist möglich.

Fazit

Die hilfreiche Auslastungsanzeige der vorherigen Applikation fehlt hier, aber es gibt eine Wetteranzeige zu jedem Termin, der Pfeil links unten zeigt, wie ein Kompass zum heutigen Tag und kommen bestimmte Keywords wie zum Beispiel „Zahnarzt“ oder „Urlaub“ im Termin-Titel vor gibt die Applikation ein passendes Icon zum Termin im Punkt davor an. Diese drei Dinge, sind nette Ideen, die die App grafisch aufwerten und sie von anderen Kalender-Apps unterscheiden. Außerdem sind im Gegensatz zu Any.do Cal zwei verschiedene Ansichten möglich und die Kalenderzugehörigkeit ist hier besser gekennzeichnet. Weiters ist die Einstellung der Refresh-Rate möglich. Leider ist auch der Sunrise Calender nicht an den Benutzer anpassbar und zu Beginn ist ein Login erforderlich, der bei Any.Do cal automatisch erfolgt. Die Erstellung eines neuen Ereignisses und die Anzeige des Kalenders ist zwar etwas unübersichtlicher als bei der vorherigen App, aber dafür stehen unterschiedliche Ansichten zur Verfügung. Sowie bei Any.do Cal ist diese Applikation nur in der Sprache Englisch erhältlich. Zusammenfassend lässt sich sagen, dass es sich hierbei um ein klassisches flaches Design handelt mit kleinen hübschen Features (Icons, die sich anpassen), zwei verschiedene Ansichten je nach Geschmack zur Verfügung stehen und leider nur wenig bis gar kein Spielraum in der Personaliserbarkeit der Applikation geboten wird.

Google Kalender

Start der Applikation

Auch hier ist keine Anmeldung notwendig und mein Google Konto wird automatisch erkannt und synchronisiert. Besonders gut finde ich die kurze Einführung in die Funktionen der App beim ersten Start.

Hauptscreen

Der Google Kalender stellt mit Abstand die meisten Ansichten zur Verfügung. Man kann zwischen einer Tagesansicht, einer Terminübersicht und einer 5-Tages-Ansicht wählen. Die gewünschte Ansicht kann rechts oben über das Icon mit den drei Punkten geändert werden. Wählt man den Pfeil neben dem Monat aus, wird das jeweilige Monat aufgeklappt. In dieser Anzeige gibt eine Übersicht, an welchen Tagen schon Termine eingetragen sind und an welchen nicht. Befindet sich ein Kreis um das Datum, sind an jenem schon Termine eingetragen, bei uneingekreisten nicht. Der heutige Tag wird blau gekennzeichnet, der gerade ausgewählte grau markiert. Der Monat kann in jeder Ansicht aufgeklappt werden.
In der Tagesansicht, werden die Termine, wie schon ein paar Mal vorher erwähnt, in Balken dargestellt, die je nach Kalenderzugehörigkeit unterschiedlich eingefärbt sind. Hier wird der Termintitel und der zugehörige Ort ausgegeben. Die Ansicht bietet genug Platz um mehrere überschneidende Termine in anderen Kalenderkonten nebeneinander anzuzeigen, allerdings hat man keinerlei Übersicht über die Ereignisse an den umliegenden Tagen. Um einen Überblick zu erhalten, kann man in diesem Fall aber auf die Listenansicht wechseln.

Termine innerhalb einer Woche, die nach Uhrzeit sortiert sind, werden in der Terminübersicht untereinander angezeigt. Aber Tage, an denen keinerlei Ereignisse eingetragen sind, werden ausgelassen, was diese Ansicht meiner Meinung nach etwas verwirrend macht. Zum Termin ist auf einen Blick ersichtlich, wann und wo dieser stattfindet.

In der 5-Tages-Ansicht hingegen werden die Termine von 5 Tagen in Form von Balken nebeneinander angezeigt, die je nach Kalenderzugehörigkeit unterschiedlich eingefärbt sind. Die 5-Tages-Ansicht finde ich unbrauchbar, wenn man sehr viele Termine eingetragen hat, da dann die Balken immer schmäler und die Ansicht immer unübersichtlicher wird.

Gesten

Durch Swipe nach oben und unten kann in der Tagesansicht der Zeitleiste entlang gescrollt werden. Nach links oder rechts wird zwischen den Tagen gewechselt. In der Terminübersicht sind nur Gesten nach oben oder unten möglich und lässt einen durch die Termine scrollen. In der 5-Tages-Ansicht stehen die gleichen Gesten wie in der Tagesansicht zur Verfügung. Allgemein ist das Menü in jeder Ansicht durch einen Swipe nach rechts am linken Rand des Screens ausklappbar.

Neuer Termin

Auch in der Google Kalender-App ist es möglich, über das große „+“-Icon ein neues Ereignis zu erstellen. Dieser Button befindet sich in diesem Fall rechts unten. Auch hier gibt es die Möglichkeit die üblichen Eigenschaften eines Termins einzugeben, im gleichen Umfang wie bei der Sunrise Calendar-App. Der einzige Unterschied liegt darin, dass ich selbst die Farbe des Termins auswählen kann. Editieren und löschen des Termins ist ebenfalls wieder über die Detail-Ansicht des Events möglich.

Einstellungen

Bei der Google Kalender-App sind die Einstellungen über das einklappbare Menü erreichbar. Hier ist es im Gegensatz zu den anderen vorgestellten Applikationen dem User erlaubt, die Kalenderfarben zu bestimmen und somit ist ein höherer Grad an Personalisierbarkeit möglich. Auch hier sind die gleichen Einstellungen wie bei dem vorher vorgestellten Kalender möglich, mit dem Unterschied, dass die angezeigten Kalender sofort über das Menü, das sich einklappt auswählbar sind und man dafür nicht extra in die Einstellungen navigieren muss.

Fazit

Für mich ist der Google Kalender der klare Testsieger, da er mehrere Ansichten ermöglicht und den höchsten Grad an Personalisierung zur Verfügung stellt. Außerdem ist eine Termin-Suche möglich, die sonst bei keiner anderen vorgestellten Applikation angeboten wurde. Weiters kann ein Standard für die Termindauer eingegeben werde, dass man oft, wenn man schnell etwas eingegeben möchte, schon eine feste Dauer angegeben hat, die später noch editierbar ist. Das Design ist eher schlicht und flach gehalten, aber ist daher auch sehr übersichtlich.

Allgemeines Fazit

Es ist natürlich Geschmackssache für welche Kalender-App man sich entscheidet. Ich habe versucht diese drei Kalender-Applikation so genau und detailreich wie möglich zu erklären, damit sich jeder selbst ein Bild davon machen kann, ohne sie selbst getestet zu haben.
Abschließend würde ich sagen, dass jene User, die sehr viel Wert auf ein individuelleres Kalender-Design legen, sich wahrscheinlich für die Any.do Cal-App entscheiden werden. Jene, die es lieber schlicht mögen und dafür den Vorteil mehrerer Ansichten und eines höheren Grad an Personalisierbarkeit nutzen wollen, sollten den Google Kalender in Erwägung ziehen.

Quelle Beitragsbild: http://www.fsgbmhs.eu/wp-content/uploads/kal1.jpg

The post 3 Kalender-Apps im Test appeared first on Mobile USTP MKL.

Verwendete Einheiten

Der auffälligste Unterschied zwischen den beiden Frameworks sind wohl die Einheiten im CSS. Während Bootstrap Pixel verwendet, baut Foundation auf rem (root em). Rem ist so ähnlich wie em, nur bezieht sich rem immer auf das root-Element, nicht auf die Schriftgröße des direkten Eltern-Elements. Außerdem basiert Bootstrap auf LESS und Foundation auf SASS.

Browsersupport

Was die Browserunterstützung der beiden Frameworks betrifft, wird Internet Explorer 8 und niedriger von Foundation 5 nicht mehr unterstützt. Bootstrap hingegen bietet noch eingeschränkten Support für den Internet Explorer 8. Um aber das responsive Layout mit all seinen Funktionen unterstützen zu können wird ein Polyfill benötigt z.B.: respond.js. Mit CSS3-Attributen kann IE 8 auch nicht umgehen und auf Transitions sollte bis einschließlich IE 9 verzichtet werden. Bei allen anderen auch mobilen Browsern werden die Frameworks aber sauber unterstützt.

Responsivität

Bootstrap hat bei der Responsivität einen adaptiven Ansatz. Das heißt im mobilen Bereich bis zu einer Breite von 798 Pixel wird das Design stufenlos mitskaliert, danach wechselt das Verhalten aber auf fest definierte Ausmaße. Im Gegensatz dazu verfolgt Foundation einen fluiden Ansatz und bleibt für jede Screengröße übergangslos flexibel. Der adaptive Ansatz ist zwar aus gestalterischer Sicht oft einfacher zu bedienen, da es eine überschaubare Anzahl an Layout-Breiten gibt, die Fluide Lösung akzeptiert aber, dass es keine Definition von optimalen Ausmaßen geben kann und passt sich daher an jede Gerätedimension an. Um Bootstrap ein fluides Layout zu verpassen sind Korrekturen an drei Zeilen notwendig.

@media (min-width: 768px) {
    .container {width: 90%;}
}
@media (min-width: 992px) {
    .container {width: 90%;}
}
@media (min-width: 1200px) {
    .container {width: 90%;}
}

User-Interface-Elemente

Fast jedes User-Interface-Element lässt sich durch Einsatz von Klassen in Bootstrap als auch in Foundation realisieren. Jedoch werden die User-Interface-Elemente von Bootstrap in mehreren Versionen in Farbe, Größe, Ausrichtung angeboten, während Foundation eher dazu einlädt die Änderungen des Standardstils selbst zu übernehmen.

Dokumentation

Die Online-Dokumentation der beiden Frameworks ist sehr umfangreich. Bootstrap ist etwas umständlicher in „Getting started“, „CSS“, „Components“ und „JavaScript“ strukturiert. Foundation gliedert ihre Dokumentation nach Einsatzzweck und Bedeutung der Tools. Daher bietet Foundation eine übersichtlichere Nachschlagmöglichkeit.

Standardpaket

So umfangreich der Einsatz von Bootstrap auch ist, das Download-Paket ist etwas mager ausgefallen. Es ist kein Beispiel-Mark-up enthalten und das Zip-Archiv beinhaltet die bootstrap.css und bootstrap-theme.css sowie die Javascript-Funktionen. Die Einbindung von bootstrap-theme.css ist nicht von Nöten, sie reichert die bootstrap.css lediglich mit zusätzlichen Styles an. Außerdem liefert Bootstrap eine eigenen Icon-Font mit im Paket, namens Glyphicons, die 200 verschiedene Icons beinhaltet. Diese können mit einfachen Klassen in das Mark-up eingebunden werden. Der Foundation-Download ist in diesem Zusammenhang um einiges umfangreicher. Neben der foundation.css gibt es die normalize.css , die eine gute Grundlage für fast jedes Webprojekt darstellt und die Unterschiede in den Browser-Stylesheets normalisiert. Weiters enthält das Paket eine zusammenfassende foundation.min.js. Jedes darin enthaltene Plug-in gibt es auch einzeln, somit können Entwickler nur ein Set an Plug-ins zusammenstellen, das benötigt wird und folglich Platz sparen. Zusätzlich gibt es jQuery, Modernizr und einige weitere Nicht-Foundation-Plug-ins mit im Paket. Im Gegensatz zu Bootstrap wird hier auch ein Beispiel-Mark-up in der index.html mitgeliefert, das fast alle Layout- und UI-Elemente von Foundation darstellt.

Grid-Raster

Das Raster des Grid-Systems der beiden Frameworks besteht aus zwölf Spalten, deren Steg zwischen den Spalten eine fixe Breite von 30 Pixel beziehungsweise 1,875 rem hat. Die Breite der Spalten ist flexibel und passt sich an der Breite des Browserfensters (oder Viewports) an. Beide Systeme haben einen ähnlichen Aufbau im HTML-Mark-up. Folgendes Beispiel zeigt ein Layout mit zwei nebeneinander platzierten Containern.
Bootstrap

<div class=“row“>
    <div class=“col-md-8“>
        Zwei drittel Spalte
    </div>
    <div class=“col-md-4“>
        Ein drittel Spalte
    </div>
</div>

Foundation

<div class=“row“>
    <div class=“large-8 columns“>
        Zwei Drittel Spalte
    </div>
    <div class=“large-4 columns“>
        Ein drittel Spalte
    </div>
</div>

Bootstrap benötigt zusätzlich ein all umfassendes Block-Element mit der Klasse „container“, damit auch an den Seitengrenzen ein Mindestabstand zum Rand des Browserfensters bestehen bleibt. Bei Foundation bestimmen die Schlüsselbegriffe small, medium und large, bei welcher Viewport-Breite ein Element wie viele Spalten überspannt. Bei Foundation gibt es folgende Bereiche:

• small-*: für Viewports über 0 Pixel Breite
• medium-*: für Viewports über 640 Pixel Breite
• large-*: für Viewports über 1024 Pixel Breite

Beispiel: Container, der auf großen Bildschirmen drei, auf kleinen sechs Spalten umfasst

<div class=“medium-6 large-3 columns“>Inhalt</div>

Die Mobile Darstellung steht bei Bootstrap, sowie Foundation im Mittelpunkt. Die Klasse die ab einer bestimmten Viewport-Breite greift überschreibt die vorherige Klasse. Das bedeutet im Bezug auf das obere Beispiel, dass Bildschirmgrößen unter 641 Pixeln die volle Breite einnehmen würden. Umgekehrt würde ein Container , der nur die Klasse „small-3“ erhält, auch bei großem Viewport drei Spalten einnehmen.

Die Syntax von Bootstrap ist ähnlich zu Foundation. Im Gegensatz dazu, ist die Aufteilung einmal öfter unterteilt und die entscheidenden Kürzel sind xs, sm, md und lg. Für folgende Aufteilung hat sich Bootstrap entschieden:

• col-xs-*: für Viewports ab 0 Pixel Breite
• col-sm-*: für Viewports ab 768 Pixel Breite
• col-md-*: für Viewports ab 992 Pixel Breite
• col-lg-*: für Viewports ab 1.200 Pixel Breite

Im Vergleich zum Foundation Beispiel: ein Container der bei mittleren Viewport drei und bei einem kleinen Viewport sechs Rasterspalten einnehmen soll:

<div class=“col-sm-6 col-md-3“>Inhalt</div>

Obwohl Bootstrap um einen Breakpoint mehr bietet, sieht die Aufteilung unter 768 Pixel etwas mager aus. Foundation nimmt hier weniger Rücksicht auf Gerätestandards und formuliert ihre Breakpoint allgemeingültiger.

Zur Positionierung der Spalten nebeneinander setzen beide Frameworks auf die float-Eigenschaft, da inline-block in bestimmten Kontexten zu ungewollten Abständen führen und das CSS3-Flexbox-Model erst in Zukunft eine ausreichende Browserunterstützung mitbringen kann. Mit dem Css-Standard Box-Model , bei dem sich border und padding auf die Gesamtmaße des Objektes aufaddieren, machen Boostrap und Foundation kurzen Prozess. Mit den Zeilen werden alle Elemente einer neuen Berechnungsgrundlage unterzogen und nach dem Border-Box-Model interpretiert. Nur so lassen sich die Breitenangaben der Spalten in Prozent in Kombination mit den Innenabständen (padding) umsetzen. Das Box-Modell wirkt sich also auf alle Elemente aus.

*,
*:before,
*:after {
    -webkit-box-sizing_ border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Außerdem sind in beiden Frameworks Verschachtelungen möglich. Mit einer neuen Klasse „row“ kann ein neues in einem bestehenden Element eröffnet werden. Hier können wieder neue Elemente verteilt werden. Grundlage des Spaltenrasters ist in diesem Fall die neue „row“ mit ihrem zwölf-Spalten-Raster. Wenn man aus dem vorgegeben Raster ausbrechen will, können die Container ebenfalls um Spalten verschoben werden.

Bootstrap

<div class=“col-md-4 col-md-offset-2“>Bootstrap</div>

Foundation

<div class=“large-4 large-offset-2 columns“>Foundation</div>

Wie man sieht ist das Aufbauen von Layouts intuitiv umsetzbar, aber nur solange man sich in dem zwölf-Spalten-Raster bewegt. Ein eigenes Grid mit alternativer Spaltenanzahl und Steg-Breite ist mit der Standard-Version nicht möglich.

LESS- und SASS-Variante

Für Entwickler, die mit LESS und SASS umgehen können, bietet Bootstrap und Foundation die unkomprimierten Less- und SASS-Dateien zum Download an. Somit ergeben sich einige Vorteile.

Spaltenanzahl im Spaltenraster

Über den Customizer lässt sich zwar die gewünscht Spaltenanzahl definieren, aber an eine spätere Änderung dieser ist nicht zu denken. Im Gegensatz dazu hat die LESS- und SASS-Variante diese Werte in Klassen hinterlegt und diese können an einen zentralen Punkt editiert und angepasst werden.

Breakpoints

Dies gilt auch für die Definition der Breakpoints. In den SASS- und LESS-Files lassen sich diese leicht editieren. Im Standard-Download ist das zwar auch möglich, aber nur durch Suchen im Code und Bearbeitungen an mehreren Stellen.

Semantisches CSS

Da Maschinen das CSS nicht semantisch auswerten können, wird oft darüber gestritten, ob es so etwas wie Semantik im CSS überhaupt geben kann. Trotzdem wichtig dabei ist, dass keine Grid-Klassennamen direkt in das Mark-up geschrieben werden sollten. Stattdessen sollte eine sprechende Klasse vergeben werden, die die Funktion und den Kontext des Elements beschreibt. Dann kann diese Klasse anschließend mit Hilfe von Mixins, diese Funktionen aus dem Pool an Framework-Funktionen erhalten. Somit kommt es zu weniger Wiederholung von Klassennamen, ein aufgeräumtes Mark-up, und eine saubere Trennung von Framework- und eigenen Elementen. Außerdem lässt sich somit theoretisch das Framework auf jedes bestehende Projekt münzen.

Upgrade

In der Vergangenheit hat sich gezeigt, dass sich Funktionennamen oder Klassennamen aufgrund eines Updates manchmal ändern. Durch Berücksichtigung eines semantischen CSS müssen diese Änderungen nur an zentralen Stellen in den LESS- oder SASS-Files, anstatt im ganzen Projekt mit jedem einzelnen Einsatz im HTML geändert werden.

Anpassen von fertigen Elementen

Wenn der Standard-Stil eines UI-Elements nicht ausreicht und aufgrund des projektspezifischen Designs abgeändert werden muss, sollte das nicht in der Bootstrap-Klasse passieren. Das heißt wenn beispielsweise das Aussehen des Standard-Buttons abgeändert wird, sollte eine neue Klasse erstellt werden, die auf den Stil des Standard-Buttons aufbaut. Mit zum Beispiel einer Klasse „btn-mystyle“, können nun Eigenschaften in nur wenigen CSS-Zeilen überschrieben und ergänzt werden. So wird auch in Bootstrap intern bei den verschiedenen Variationen eines Buttons gearbeitet, wie beispielsweise „btn-primary“, „btn-sucess“ etc.

<button class=“btn btn-mystyle“>Mein Button</button>

Foundation funktioniert nach dem gleichen Prinzip, motiviert aber in der Dokumentation sehr früh eine Element-Klasse (z.B. einen Button) nach eigenen Parametern mit Hilfe der Mixins von SASS zu erstellen.

Je nach Design-Anforderungen des Projektes, kann es vorkommen, dass zahlreiche Attribute immer wieder ergänzt oder überschrieben werden müssen, manchmal so viel, dass sich die Verwendung der Basisklasse kaum noch lohnt. Hier sind die Grenzen des Frameworks spürbar, an die jedes Framework einmal stoßen muss. In diesem Fall ist das Ummodeln der UI-Elemente oft mühsamer, als selbst ein neues Element zu erstellen. Im Netz haben schon einige Entwickler das Standard-Layout von Bootstrap angepasst und neue Themes entwickelt, die sie zum Download zur Verfügung stellen. Auf bootswatch.com findet man einige Alternativen zum Standard-Layout und auf blacktie.co erreichen die Themes Qualitäten von vollständigen Webseiten. Im Gegensatz dazu sind solche Angebote für Foundation schwer zu finden, was wohl auf die Philosophie des Frameworks zurückzuführen ist.

Javascript

Bootstrap und Foundation haben aber nicht nur in CSS viel zu bieten, sie enthalten auch einige hilfreiche Javascript-Tools, von denen hier einige erwähnt werden:

Foundation: Interchange:

Qualität und Performance im Responsive Design treffen irgendwann einmal auf das Problem der Bildgrößen. Auf einem Smartphone müssen die Bilder nicht in voller Größe geladen werden, oder auf einem Retina Display müssen die Bilder doppelt oder sogar dreifach so große als die Anzeige ausgespielt werden etc. Obwohl sich viele Quellen im Internet mit diesen Problem befassen und es noch immer keine perfekte Lösung gibt, befasst sich auch Foundation mit diesen Thema und bietet mit „Interchange“ eine Lösung. Auf der Grundlage der gerade zutreffenden Media Queries lädt Foundation die entsprechend passende der zuvor im „data-interchange“-Attribut angegebenen Bildquelle.

Bootstrap: Affix:

Manchmal sollen Elemente fix positioniert werden. Mit position:fixed; ist dieses Szenario umsetzbar , aber das Problem ist, dass diese Elemente oft Objekte überdecken oder überdeckt werden sobald gescrollt wird. Affix bietet eine Lösung dieses Problems mit einer bedingten Fixierung via Javascript.

Foundation: Offcanvas-Menu:

Das Seitenmenü, das in mobiler Ansicht durch einen Touch auf ein Symbol oben rechts oder links seitlich hereinflattert wird hier umgesetzt. Bootcamp bietet dieses simple Tool nicht.

Foundation: Formular-Validation:

Foundation bietet eine Inline-Formular-Validierung. Zwar kümmert sich dieses Tool keineswegs um die nachträgliche Servervalidierung aber sie verbessert die Usability.

Bootstrap und Foundation: Diashow:

In Foundation “Orbit“ und in Bootstrap „Carousel“ genannt. Die Anwendung ist in beiden Fällen simpel, jedoch unterstützt nur Foundation Swipe-Gesten durch den eingebauten Touch-Screen-Support.

Foundation: Fastclick:

Standard-Klick-Ereignisse unterliegen auf Touch-Screens einer gewissen Verzögerung, die beseitigt und somit die Nutzungserfahrung verbessert wird.

Foundation: Joyride:

Mit diesem Tool können „Touren“ erstellt werde, die zum Beipiel neue Funktionen erklären. Mithilfe von Scrolling, Tooltips und Fading werden dabei einzelne Elemente hervorgehoben und erörtert.

Über diese Javascript-Utilities hinaus bietet Bootstrap und Foundation eine Menge an Standard-Interface-Elementen: Modal-Window (Pop-ups), Dropdowns, Tab-Navigation, Tooltips uns ebenfalls Scrollposition-Abhängige Navigationslösungen.

Fazit

Foundation liegt eine komplett andere Philosophie zugrunde als Bootstrap, die sich aber trotzdem gegen den Riesen durchsetzen kann. Besonders auffällig ist die konsequente Ausrichtung an die Zukunft des Internets. Bootstrap hingegen sticht durch eine größere Variation an Userinterface-Elementen hervor und durch Out-of-the-Box-Erweiterungen aus dritter Hand.

Für schnelle Mockups , die nahe an der Funktionalität von Twitter-Frameworks liegen, eignet sich Bootstrap hervorragend. Für andere Anwendungen ist Foundation ein guter Tipp. Beide Frameworks bieten erst bei Verwendung der LESS- bzw. SASS-Variante ihren vollen Funktionalitätsumfang.

Quellen:

Lemme, M. (2014, Juni). Bootstrap vs. Foundation. Screenguide, (21), 60–66.
http://getbootstrap.com/
http://foundation.zurb.com/

The post Bootstrap vs. Foundation appeared first on Mobile USTP MKL.

So sieht die Nutzung von gridspezifischen Klassen normaler weise aus:

<div class="“col-sm2">

Hier werden Klassennamen mit semantischem Hintergrund genutzt, um die Übersicht zu bewahren und die Funktion eine Elements sofort ersichtlich zu machen. So schlägt es auch das W3C vor.

Getrennte Präsentation & Deklaration

Flint, Singularity, Jeet & Co. stützen sich auf semantic.gs und verwenden eine konsequente Trennung von Präsentation und Deklaration.

Somit wird aus:

<div class=“col-sm2 col-md3, col lg4 usp-list“>

das hier:

<div class =“usp-list“>

Auf jeet.gs wurde man vor Kurzem aufmerksam, da die eigene Seite bei Awwwards zur Site of the Day gekürt wurde. In diesem Blogbeitrag werden wir uns näher mit jeet.gs beschäftigen und Flint und Singularity hier nur kurz erwähnen. Neben unterschiedlicher Syntax kommt in Flint unter anderem eine Config-Datei zum Einsatz, in der sich das Grid im Vorfeld auf die eigenen Anforderungen und Bedürfnisse anpassen lässt. Singularity wird zum Beispiel von „The Verge“ verwendet und kann durch Plugins beliebig erweitert werden. Außerdem gibt es dazu eine ausführliche Wiki auf Github. Für beide Systeme wird SASS ab Version 3 und Compass benötigt. Hingegen jeets.gs basiert auf Css-Präprozessoren wie Stylus und SASS/SCSS und setzt auf vordefinierte Mixins, mit denen flexible, seitenspezifische Raster erstellt werden können.

Basics von jeet.gs

Bei jeet.gs gibt es keine fixen Spaltenbreiten. Das Grundgerüst hinter jeet.gs bieten Mixins, die die mathematischen Berechnungen im Hintergrund für das Gridsystem ausführen. Spalten werden in jeet.gs mit col() bzw. span() erstellt:

aside {
    @include col(1/3);
}
main {
    @include col(2/3);
}

Hier nimmt aside ein Drittel der Breite des Elternelements ein und main füllt den Rest aus. Das System kümmert sich von selbst welcher Seitenrand per margin-right angefügt wird und um einen Steg zwischen den einzelnen Elementen der standardmäßig 3% beträgt, aber simpel userspezifisch verändert werden kann, indem man Jeet mit der Variable $gutter einen neuen Wert übergibt:

Main{
    // Der Wert 2 steht für 2.5%
    @include col(2/3, $gutter: 2.5);
}

Wenn kein Seitenrand benötigt wird, kann man das Mixin span() benutzen. Dabei liegen die Elemente ohne Abstand direkt nebeneinander:

aside {
    @include span(2/3);
}
main {
    @include span(2/3);
}

Mithilfe des Mixins center() kann man das Layout anschließend zentrieren:

section {
    @include center(960px);
}

center() definiert gleichzeitig die Breite des Elements und muss nicht pixelbasiert sein, sondern kann auch in % oder em angegeben werden. Außerdem gibt es den Parameter $pad mit dem man noch ein wenig padding hinzufügen kann:

section {
    @include center(75%, $pad: 1em);
}

Selbstverständlich ist jeet.gs auch responsive und die Spaltenaufteilung kann sich mit der Verwendung von Media Queries je nach Bildschirmgröße verändern.

vorher:

.teaser1 {
    @include col(1/2);
}
.teaser2 {
    @include col(1/2);
}

nachher:

.teaser1 {
    @include col(1/2);
}
.teaser2 {
    @include col(1/2);
}
@media (min-width: 35em) {
    .teaser1 {
        @include col(2/3);
    }
    .teaser2 {
        @include col(1/3);
    }
}

Erweiterte Funktionen

Die oben beschriebenen Parameter von jeet.gs sind nur die Basics. Jeet.gs bietet noch weitere Parameter an, um das Grid noch flexibler zu gestalten. Zwei davon sind $cycle() und $uncycle(). Vor allem im eCommerce werden Produkte oft in Rasteransichten dargestellt. Bei unterschiedlichen Bildschirmgrößen variiert auch die Anzahl der Produkte in einer Zeile. Das heißt werden in der Desktop-Ansicht zum Beispiel drei Produkte angezeigt, werden in kleineren Ansichten nur 2 Produkte in einer Zeile ausgespielt. Das Problem, das hier besteht ist folgendes: Bei jedem letzten Produkt in einer Zeile (in der Desktop-Ansicht das 3. Produkt, in kleineren Ansichten das 2.) entsteht ein unschöner und unerwünschter Umbruch, da hier ein Abstand nach rechts eingefügt wird. Damit die gewünschte Anzahl der Produkte noch in eine Reihe passen schaffen $cycle und $uncycle Abhilfe. Damit wird bestimmt bei welchem Produkt ein rechter Rand eingefügt werden soll und bei welchem nicht.

Hier nehmen die Produkte ca. 50 % der Breite ein (abzüglich des Stegs) und jedes 2. Produkt bekommt keinen rechten Rand, damit alles schön sauber in eine Reihe passt:

ul li {
    @include col(1/2, $cycle: 2);
}

Anschließend werden 3 Produkte in der Desktop-Ansicht in einer Reihe ausgegeben:

@media (min-width: 58em) {
    ul li {
        @include col(1/3, $cycle: 3, $uncycle: 2);
    }
}

Hier nimmt nun jedes Produkt 33% der Breite ein. Mit $cycle: 3, weist man Jeet an bei jedem 3. Produkt den rechten Seitenrand zu entfernen. Hingegen mit $uncycle: 2, gibt man Jeet die Anweisung den rechten Seitenrand bei jedem 2. Produkt wieder hinzuzufügen und ein „float: left“ an jene Produkte zu vergeben. Ohne $uncycle würde jedes zweite und dritte Produkt keinen Seitenrand mehr besitzen und den „float-Befehl“ aufheben. Ein durcheinander gewürfeltes Layout wäre die Folge.

Somit kann schnell und sauber zwischen verschiedenen Anzahlen von Produkten in einer Zeile gewechselt werden.

Auch Source-Ordering wir in Jeet unterstützt. Das heißt das Arrangieren von Elementen an verschiedenen Positionen. Dabei nutzt man relative Positionierungen und verschiebt die Elemente um einen gegebenen Faktor entweder nach links oder rechts.

<article>
    Hauptinhalt
</article>
<aside>
    Inhalte der Seitenspalte
</aside>

Seitenleiste und Inhalt sollten nun in der Desktop-Ansicht nebeneinander stehen.

@media (min-width: 58em) {
    article {
        @include col(2/3);
    }
    aside {
        @include col(1/3);
    }
}

Jetzt wäre es aber noch optimal die Seitenleiste nicht rechts vom Inhalt sondern links davon zu positionieren. Das funktioniert mit dem Mixin shift():

@media (min-width: 58em) {
    article {
        @include col(2/3);
        @ include shift(1/3);
    }
    aside {
        @include col(1/3);
        @include shift (-2/3);
    }
}

Hier wird der Inhaltsbereich um ein Drittel nach rechts und die Seitenleiste um zwei Drittel nach links verschoben. Dieses Beispiel kann natürlich auch auf andere Wege gelöst werden, soll aber trotzdem die Flexibilität von Jeet.gs zeigen.

Ein weiteres nützliches Mixin bietet align(). Es positioniert die Elemente mittig horizontal, wie auch vertikal. Hier wird ein Header, der ein Logo links und eine Navigation rechts enthält ausgespielt. Die Navigation soll aber nun nicht am oberen Rand des Header kleben, sondern vertikal zentriert ausgegeben werden.

header {
    position: relative;
    @include center(58em, $pad: 1em);
}
#logo {
    @include col(1/3);
}
nav {
    @include col(2/3);
    @include align(vertical);
}

Last but not least, bietet Jeet.gs eine Art Debug-Modus. Wenn man @include edit() in das SASS/SCSS einbindet, vergibt Jeet.gs jedem einzelnen Element verschiedene Grauabstufungen um Abstände und Größenverhältnisse optisch darzustellen.

Erstellung eines individuellen Gridsystems

Jeet.gs hilft ein sauberes semantisches Mark-up zu erstellen. Jede Funktion oder Regel die mit dem Grid zu tun hat wird in Mixins umgesetzt und direkt mit dem jeweiligen Element verankert. Es kann aber auch ein eigenes, individuelles Grid basierend auf Jeet.gs erstellt werden. Anstatt aber alle Spaltenbreiten separat in einer Klasse zu deklarieren, sollte man sich nur auf häufig wiederkehrende Spaltengrößen spezialisieren und die Ausnahmen durch Mixins von Jeet.gs umsetzen. Der Name der Klassen ist einem selbst überlassen.

/* Beispiel für Grid-Klassen um ein mobile-first System mit zwei Breakpoints zu erstellen */
.col-small-full {
    width: 100%;
}
...
@media (min-width: 35em) {
    .col-medium-half {
    @include col(1/2);
    }
...
}
@media (min-width: 58em) {
    .col-large-third {
    @include col(1/3);
    }
...
}

<div class=“col-small-full col-medium-half col-large-third“> ... </div>

Häufig auftretende Verhaltensmuster können in einer Klasse zusammengefasst werden. Daher können volle Breite im Smartphone, halbe Breite für Tablets und drei Spalten für größere Bildschirme hier bei diesem Beispiel zusammengefasst werden.

.col-1-2-3 {
    width: 100%;
    @media (min-width: 35em) {
        @include col(1/2);
    }
    @media (min-width: 58em) {
        @include col(1/3);
    }
}

<div class=“col-1-2-3“> ... </div>

So kann mit Hilfe von Jeet.gs ein flexibles und sauberes Gridsystem erstellt werden.

Browserunterstützung

Jeet.gs kann mit allen modernen Browsern genutzt werden. Sogar der Internet Explorer 9 unterstützt es. Um es mit Internet Explorer 8 verwenden zu können wird ein Polyfill benötigt wie selectivizr.com, da der IE8 zum Beispiel den CSS3-Selektor “nth-Child” nicht unterstützt, den Jeet.gs aber benutzt.

Die Dokumentation ist noch sehr dürftig. Auf der Website www.jeets.js wird die API nur anhand der eigenen Seite erklärt. Auch andere Hilfestellungen und Tutorials sind sehr wenig vorhanden. Allerdings ist es sehr leicht zu verstehen. Im Gegensatz zu Foundation oder Bootstrap ist Jeet.gs ein reines Grid und bietet keinerlei Komponenten für Button-Design oder Javascript-Module. Das heißt, wenn rein nur ein Grid benötigt wird, ist Jeet.js genau das richtige.

Quellen

Henkhaus, M. (2014, September). Schöne neue Grid-Welt. Screenguide, (23), 58–62.

http://jeet.gs/

The post Flexible Gridsysteme mit jeet.gs appeared first on Mobile USTP MKL.

Als Initialprojekt für den Masterstudiengang Mobiles Internet, sollten wir eine mobile Webapplikation umsetzen. Ziel dieser Applikation war es möglichst viele Leute zu motivieren ohne Eintippen einer URL diese aufzurufen. Da ich sehr gerne koche und mich durch meine Fruktoseintoleranz schon sehr viel mit Nahrungsmittelunverträglichkeiten auseinandergesetzt habe, wollte ich eine responsive Website erstellen, die viele Rezepte für Menschen mit Nahrungsmittelunverträglichkeiten beinhaltet. Mit dem Menü kann ich die Rezepte nach Fruktose oder Laktose-Intoleranz filtern.

Umsetzung Design

Zu Beginn erstellte ich ein Logo und überlegte mir einen Namen für meine Webapplikation in Adobe Illustrator. „Happy Stomach“ schien mir passend, da der Magen durch falsche Ernährung besonders in Bezug auf Intoleranzen oft mit Bauchschmerzen reagiert und gar nicht „happy“ ist. Danach überlegte ich mir, wie ich Bauchschmerzen mit Kochen in einem Logo verbinden konnte und ich kombinierte eine Wärmeflasche mit einem Kochlöffel. Dabei achtete ich besonders darauf, dass das Logo halbwegs einer rechteckigen Form entspricht und somit vielseitig und einfach einsetzbar ist. Außerdem mussten die Elemente (Text und Bild) und Farben miteinander harmonieren.

Als Printprodukt entschied ich mich für ein T-Shirt, dass ich bei shirtinator (www.shirtinator.at) drucken lies.

Im Anschluss an das Logodesign und den T-Shirt-Druck kümmerte ich mich um das Webdesign in Adobe InDesign. Adobe Indesign ist zwar ein auf Druck spezialisiertes Programm, ich benutzte es aber trotzdem für die Umsetzung des Webdesigns, da man hier gut die verschiedenen Breiten der Endgeräte abbilden kann. Ich entschied mich für folgenden Breakpoints im Design: 320px (20em, Smartphone, 1. & 2. Abbildung), 480px (30em, Smartphone Landscape, 3. Abbildung), 600px (37.5em, Tablet, 4. Abbildung), 1024px (64em, Tablet Landscape, 5. Abbildung), 1280px (80 em, Desktop, 6. Abbildung), 1600px (100em, Desktop Large, 7. Abbildung). Wie man sieht, habe ich nicht nur mobile Geräte berücksichtigt, falls sich jemand die Rezepte am PC anschauen möchte. Weiters wählte ich das 960 Grid System (http://960.gs/) mit 12 Spalten als hinter dem Design liegendes Grid. Um ein Farbschema für meine Website zu finden lies ich mich von den Colorpatterns auf colorlovers.com inspirieren und als Schrift verwendete ich „Lane Narrow“ von fontsquirrel.com.

Verwendete Technologien

Ich verwendete jQuery um die jeweiligen Inhalte anzuzeigen oder zu verstecken. Außerdem benötigte ich dadurch keine Datenbank und die Seite musste nie neu geladen werden.

Fazit

Bei der Umsetzung des Projektes ist mir aufgefallen, dass ich kein Fan von der Verwendung eines vorgefertigten Grids bin. Ich bin der Meinung man sollte entweder das Grid selbst zusammenbauen oder einfach mit der Angabe von %-Werten und Media-Queries arbeiten.

Durch den ersten Testdurchlauf der Webapplikation in der Übung Mobile Anwendungen erkannte ich, dass der QR-Code, den ich auf das T-Shirt gedruckt habe, viel zu groß war, da er durch die leichte Krümmung meines Rückens nicht mehr lesbar für den QR-Scanner war. Außerdem sollte man bei der Verwendung eines QR-Codes unbedingt auf eine verkürzte URL verlinken.

Im Bezug auf Usability der Website, wurde die Sinnhaftigkeit die Navigation „Menü“ zu nennen in Frage gestellt. Viel mehr sollte das Element „Filter“ heißen, da bei der Auswahl einer der Navigations-Punkte, die angezeigten Elemente gefiltert werden. Außerdem konnte man die Auswirkungen des Filters auf den ersten Blick gar nicht wahrnehmen, da die Toggle-Navigation sehr viel Platz des Bildschirms einnahm und die Veränderung der Anzeige erst durch scrollen klar wurde.

Die Webapplikation weist noch einige kleine Fehler auf, aber den Sinn einer Webapplikation, die Rezepte zum Thema Nahrungsmittelunverträglichkeiten anzeigt und Ideen zum Kochen liefert erfüllt sie vollkommen und ist in der Hinsicht sehr nützlich.

Das Projekt ist unter folgender URL erreichbar: Happy Stomach-Webapplikation

The post Initialprojekt: Happy Stomach appeared first on Mobile USTP MKL.