JavaScript / CSS / HTML – Seite 3

TYPO3 Fluid > POST-Parameter in Paginate-ViewHelper übernehmen

Manchmal benötigt man für eine Pagination zusätzliche Übergabeparameter. Zum Beispiel, wenn man für eine Listenansicht zuvor ausgewählte Filter, Sortierungen oder sonstige Parameter verwendet. Mit Hilfe des Standard-ViewHelpers Paginate von TYPO3, lässt sich das kinderleicht umsetzen:

View Code HTML5

<f:widget.paginate objects="{myObjects}" as="paginatedObjects" configuration="{itemsPerPage: 5, addQueryStringMethod: 'POST,GET'}">
...
</f:widget.paginate>

Wie man sieht, braucht man dem Konfigurations-Attribut lediglich den Wert „POST,GET“ für addQueryStringMethod hinzuzufügen, damit Fluid alle vorhandenen Parameter aus POST und GET an die Seitenlinks anhängt.

Im Übrigens lässt sich das auch bei eigenen Widgets anwenden. Dafür gibt man das addQueryStringMethod-Attribut an den Link-Widget-ViewHelper:

View Code HTML5

<f:widget.link arguments="{page: 1}" addQueryStringMethod="POST,GET">Seite 1</f:widget.link>

OpenLayers 3 > Zoom per Maus-Scroll deaktivieren

Wer das Zoomen per Maus-Scroll deaktivieren möchte, braucht seinem Map-Objekt lediglich eine zusätzliche Code-Zeile hinzufügen:
interactions: ol.interaction.defaults({mouseWheelZoom:false})
Die Steuerung über die Zoom-Buttons sowie per Touch bleiben davon unberührt.

Hier noch mal ein komplettes Beispiel:

View Code JAVASCRIPT

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.9.0/ol.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.9.0/ol.min.css" type="text/css" media="all" />
<div id="map"></div>
<script type="text/javascript">
	var map = new ol.Map({
		layers: [
			new ol.layer.Tile({
				source: new ol.source.OSM()
			})
		],
		interactions: ol.interaction.defaults({mouseWheelZoom:false}),
		target: 'map',
		view: new ol.View({
			center: ol.proj.fromLonLat([9.0, 51.0], 'EPSG:3857'),
			projection: ol.proj.get('EPSG:3857'),
			zoom: 7
		})
	});
</script>

7 Tipps für eine verbesserte User Experience und Usability deiner Web-Anwendung

Usability und User Experience – Worte, die jeder in der Software-Entwicklung schon mal gehört haben sollte, aber nur die wenigsten verstehen die wahre Bedeutung dahinter. Mit diesen einfachen Tipps lässt sich die User Experience und die Usability deiner Web-Anwendung entscheidend verbessern – auch wenn du kein Experte auf dem Gebiet ist.

Tipp #1 – Sicherheitsabfrage vor dem Löschen

Es ist nur eine winzige Fingerbewegung, die aber schnell zum Ärgernis werden kann: Der Klick auf den Löschen-Button. Mit nur einem falschen Klick kann die Arbeit von Stunden, Tagen oder sogar Wochen zunichte gemacht werden. Deshalb: Immer eine Sicherheitsabfrage vor dem Löschen einrichten. Es mag vielleicht auf den ersten Blick nervig sein, aber im Ernstfall kann es einem richtig viel Ärger ersparen.

Tipp #2 – Elemente erst aktivieren, wenn man mit ihnen interagieren kann

Ein einfaches Beispiel: Ich habe ein Kontaktformular mit einem Eingabefeld für die E-Mail-Adresse und einer Textarea für meine Nachricht. Darunter ist ein Button zum Absenden des Formulars. Damit das Formular abgesendet werden kann, müssen beide Formularfelder korrekt ausgefüllt werden. Im Normalfall würde man dies einfach lösen, indem man nach dem Klick auf den Absenden-Button eine Fehlermeldung mit einem entsprechenden Hinweis ausgibt. Viel bessere wäre es aber, wenn der Button erst dann klickbar wird, wenn die Felder auch tatsächlich richtig ausgefüllt wurden. So merkt der Benutzer: „Ah, das Formular ist noch nicht vollständig ausgefüllt“, und er muss keine blöden Fehlermeldungen lesen.

Tipp #3 – Elemente deaktivieren, wenn man nicht mehr mit ihnen interagieren soll

Das Pondon aus Tipp #2: Deaktiviert den Absende-Button, sobald der Nutzer ihn betätigt hat. So weiß der Nutzer sofort, dass das Formular verschickt wurde und versendet es nicht aus Versehen ein zweites Mal.

Tipp #4 – Rückmeldung geben

„Hat er das jetzt gespeichert?“ – Diese (oder eine ähnliche) Frage habt ihr euch während der Arbeit am PC sicher auch schonmal gestellt. Ein kurzer Hinweis hätte gereicht und ihr hättet eure wertvolle Zeit nicht mit so einer unnötigen Frage vergeudet. Also: Wann immer der Nutzer etwas speichert, aktualisiert, löscht oder versendet, gebt ihm eine Rückmeldung, ob alles geklappt hat.

Tipp #5 – Mouse-over für klickbare Elemente

In einer Anwendung kann es schnell vorkommen, dass viele klickbare Elemente, die ähnlich aussehen, sehr nah beieinander stehen. Wenn der Nutzer dann mit seiner Maus über die Elemente fährt, hat er schnell Probleme damit zu erkennen, wo sich jetzt sein Mauszeiger befindet. Daher sollten klickbare Elemente sich bei Mouse-over immer hervorheben, um so das Auge bei der Suche des Zeigers zu unterstützen.

Tipp #6 – Labels in Formularen verwenden

Checkboxen und Radio-Buttons sind leider sehr klein und für manch einen ist es eine Qual sie mit dem genauso kleinen Mauszeiger zu treffen. Verbindet man sie jedoch mit einem Label, ist auch der dazugehörige Text klickbar und vergrößert so die Klickfläche.

View Code HTML5

<label>
    <input type="checkbox" name="agb" value="1"/> Ich akzeptiere die AGB.
</label>

Tipp #7 – Titel-Attribut für Icons

Ein Bild sagt mehr als tausend Worte – klingt romantisch, stimmt aber in der Software-Entwicklung nicht immer. Oft trifft man im Web auf Icons, bei denen nicht sofort ersichtlich ist, was sie eigentlich bedeuten sollen. Was zum Beispiel wollen uns dieses Icons sagen?:

Natürlich hat Google hier vorgesorgt und bei Mouse-over einen schicken Tooltip integriert, der den Button erklärt, aber so aufwendig muss es gar nicht sein. Es reicht, wenn dem Icon ein Title-Attribut mit einem kurzen, erklärenden Text hinzugefügt wird.