Manuel-Bieh.de – Web-Development & Consulting

I created a small jQuery plugin which acts as a simplification of the Geolocation API.

Instead of using navigator.geolocation.getCurrentPosition you can now just use the jQuery methods $.geolocation.get() or $.geolocation.watch().

Contrary to the standard API the only parameter the functions expect is a JSON object with three properties in no particular order: success, error, options. For success and error you can also use their alias properties „win“ and „fail“:
$.geolocation.get({win: function() {}, fail: function() {}, options);

You can also use $.geolocation.getCurrentPosition(success, error, options) to get native API feeling if this makes you happier. In conjunction with my Geolocation API polyfill script this also works with some non-standard Geolocation APIs like Google Gears or Blackberry Location.

Usage

$.geolocation.clearWatch(watchID)

Stops tracking of the user for the according watchID.

watchID (Integer)

$.geolocation.get(options)

Get the current position of the user

options (Object)

• error
  Function to call if geolocation request failed
• fail
  Alias for error
• options
  Options for the geolocation request
  • enableHighAccuracy
  • maximumAge
  • timeout
• success
  Function to call if geolocation request was successful
• win
  Alias for success

$.geolocation.getCurrentPosition(success, error, options)

Get the current position of the user (API standard behavior)

success Function to call if geolocation request was successful

error Function to call if geolocation request failed

options Options for the geolocation request

• enableHighAccuracy
• maximumAge
• timeout

$.geolocation.stop(watchID)

Stops tracking of the user for the according watchID.

watchID (Integer)

$.geolocation.stopAll()

Stops all watchPosition callbacks.

$.geolocation.watch(options)

Track the movement of the user

Returns: watchID (Integer)

options (Object)

• error
  Function to call if geolocation request failed
• fail
  Alias for error
• options
  Options for the geolocation request
  • enableHighAccuracy
  • maximumAge
  • timeout
• success
  Function to call if geolocation request was successful
• win
  Alias for success

$.geolocation.watchPosition(success, error, options)

Track the movement of the user (API standard behavior)

Returns: watchID (Integer)

success Function to call if geolocation request was successful

error Function to call if geolocation request failed

options Options for the geolocation request

• enableHighAccuracy
• maximumAge
• timeout

Examples

function alertMyPosition(position) {
	alert("Your position is " + position.coords.latitude + ", " + position.coords.longitude);
}
 
function noLocation(error) {
	alert("No location info available. Error code: " + error.code);
}
 
$('#getPositionButton').bind('click', function() {
	$.geolocation.get({win: alertMyPosition, fail: noLocation});
});
 
$('#watchPositionButton').bind('click', function() {
	// alertMyPosition is called each time the user's position changes
	myPosition = $.geolocation.watch({win: alertMyPosition}); 
});
 
$('#stopButton').bind('click', function() {
	$.geolocation.stop(myPosition);
});

Demo

http://manuel-bieh.de/publikationen/scripts/jquery/geolocation/

Download

https://github.com/manuelbieh/jQuery-Geolocation

[English version below!]

Mit diesem Plugin ist es möglich Checkboxen und Radiobuttons zu stylen.

Anwendung:

Einfach jedem Form-Element dessen Checkboxen und Radiobuttons gestyled werden sollen die Klasse „styleform“ anhängen. Alternativ kann das Styling auf alle oder nur ausgewählte Formulare angewandt werden:
$('form').styleForm();
$('#myForm').styleForm();

Styling:

Es kann entweder ein eigenes Stylesheet erstellt werden mit eigenen Eigenschaften für die klassen .styleRadio und .styleCheckbox was allerdings recht kompliziert ist, da es kein sauberes Standard-Stylesheet ist das angewandt werden kann. Daher empfiehlt es sich, einfach die mitgelieferten Bilder im images-Ordner so zu bearbeiten wie man es wünscht.

Bonus!

Ein iPhone Theme wird in drei größen mitgeliefert.

Bekannte Probleme:

• Opera ignoriert die disabled Eigenschaft komplett

Wünsche:

• Styling von select Elementen ermöglichen

Demo

http://www.manuel-bieh.de/publikationen/scripts/jquery/styleform
http://www.manuel-bieh.de/publikationen/scripts/jquery/styleform/iphone.html

Download

http://plugins.jquery.com/project/Styleform

English description

You can use this plugin if you want to change the default look of checkboxes and radiobuttons.

Usage:

Just add the class „styleform“ (all lowercase) to any form you want to be styled. Or you can alternatively use:
$('form').styleForm();
to apply the styling of checkboxes and radiobuttons in all forms inside a document.

Styling:

You can either create a new stylesheet with your own properties styling the .styleRadio and .styleCheckbox classes which is however quite complicated since there is no default stylesheet that can be applied yet. Or you can (the easy way) use the provided themes and edit the files inside the images folder the way you want it.

Bonus:

iPhone theme included in three different sizes (small, normal, big)!

Known issues:

• Opera ignores the disabled state completely

Wishes:

• Add styling of select elements

Demo

http://www.manuel-bieh.de/publikationen/scripts/jquery/styleform
http://www.manuel-bieh.de/publikationen/scripts/jquery/styleform/iphone.html

Download

http://plugins.jquery.com/project/Styleform

Das folgende Interview wurde in der Ausgabe 2/2011 der Internet Intern veröffentlicht.

Mobiles Webdesign bedeutet in der Praxis, dass man eine für Desktop-PCs gestaltete Webseite für die kleinen Screens der Smartphones oder Tablets umgestaltet. Oder nicht?
Mobiles Webdesign bedeutet in der Praxis im Grunde genommen mehr, als der Begriff Webdesign vermuten lassen würde. Bei einer mobilen Website stehen neben dem eigentlichen Design an sich bei der Adaption einer bestehenden Website vor allem wohl konzeptionelle Gedanken an erster Stelle.

Mit welchen Konsequenzen?
Wie auch bei einer gewöhnlichen Website für Desktop-PCs werden eine ganze Reihe Vorüberlegungen notwendig. Welche Inhalte werden von der bestehenden Website übernommen? Gibt es mobil spezifische Inhalte, die sich auf dem Handy aufgrund der gegebenen Umstände besonders anbieten? In der Hauptsache dürften das wohl standortbezogene Dienste sein wie z. B. der klassische Tankstellen- oder Restaurantfinder. Grob lässt sich der Prozess des mobilen Webdesigns aber tatsächlich so wie von Ihnen genannt beschreiben: nämlich die Adaption der für Desktop-PCs gestalteten Website für kleinere Screens.

Gilt heute nicht eher Handys und Smartphones zuerst, wenn es um das Design einer Seite geht?
Das kann so sein, muss aber nicht unbedingt. Zwar gibt es diverse Studien und Hochrechnungen von Expertengruppen, die besagen, dass in einigen Jahren bis zu 90 Prozent des Internettraffics über Handys und Smartphones abgewickelt werden wird. Doch davon sind wir immer noch ziemlich weit entfernt. Im Grunde genommen kann man sagen, dass in der heutigen Zeit sowohl die Desktop-Version als auch die mobile Version einer Website allmählich eine ähnlich hohe Priorität genießen sollten.

Für welche mobilen Plattformen (OS) muss das mobile Design angeboten werden?
Die Fragmentierung der Plattformen erstreckt sich hier nicht, wie am Desktop, über 3 bis 4 große Browser, sondern über diverse Geräte mit diversen Betriebssystem-Versionen und entsprechend unterschiedlichen Browsern, die alle ihre Eigenarten haben. Ein aktuelles Must-have in Sachen mobile Plattformabdeckung sind, und das wird sich wohl auch in der nächsten Zeit erst einmal nicht ändern, natürlich die Platzhirsche Apples iOS und Android. Aber auch neue Systeme wie das Palm WebOS oder das neue BlackBerry OS 6 sollte man unbedingt im Auge behalten.

Welche Schriftarten können mobile Geräte darstellen?
Neuere Browsergenerationen auf Smartphones unterstützen die Schrifteinbettung von CSS3 und könnten somit theoretisch jede beliebige Schrift darstellen. Bei älteren Geräten hatte man oft nur die Wahl zwischen serif und non-serif. Bei noch älteren gab es oft sogar nichtproportionale Monospace-Schriften. Die Zeiten haben wir inzwischen längst hinter uns gelassen. Mittlerweile sollte man ganz gut fahren, indem man auf die bekannten Desktop-Fonts setzt und als Fallback im CSS eben „serif“ oder „non-serif“ angibt. Das Thema Schrift ist dank CSS3 ein sehr komplexes.

Mobil sein, heißt auch oft, auf das heimische schnelle WLAN verzichten zu müssen. Was sollte man weglassen an Ballast für mobile Seiten?
Der hier wohl sinnvollste Tipp ist, dass man große Bilder möglichst bereits serverseitig auf die Displaygröße des Geräts kleinskalieren sollte. Dabei helfen Dienste wie die eben bereits angesprochenen oder auch TinySrc (www.tinysrc.net). Wer dann noch auf einen sauberen und validen XHTML- oder HTML5-Quelltext achtet, der sollte mit einer langsamen Verbindung keine Probleme bekommen.

Ist es überhaupt nötig, Websites an die Darstellung auf dem Smartphone anzupassen?
Ja. Auch wenn bspw. Apple damit wirbt, auch herkömmliche Websites komfortabel auf dem iPhone benutzen zu können, ist die Auslegung dieser Website doch immer eine andere. Nicht nur das Display ist kleiner, sondern auch die Bedienung und dadurch die komplette Usability. Das größte Problem beim Betrachten einer herkömmlichen Desktop-Website auf dem Handy ist gar nicht mal die Auflösung der Seite, sondern vielmehr die mangelhafte Bedienung. Es muss umständlich in die verschiedenen Seitenbereiche gezoomt werden, um den Text vernünftig lesen zu können, verlinkte Inhalte sind oft von der Klickfläche her zu klein, als dass man die Seite komfortabel bedienen kann.

Bitte geben Sie unseren Lesern eine Checkliste, was sie unbedingt bei mobilen Seiten
beachten sollten. Gerne auch technische Dinge.
Bei der Konzeption und Erstellung einer Seite für mobile Geräte sollte man sich einige Fragen
stellen die hilfreich für den Erfolg der Seite sind:

1. Wer wird wann, wo und aus welchem Grund meine Seite besuchen?
2. Welche Inhalte wird sich mein Besucher auf seinem kleinen Handydisplay tatsächlich
   anschauen oder durchlesen wollen?
3. Welchen Mehrwert kann ich meinem mobilen Besucher bieten? (Standortbezogene
   Zusatzdienste, automatisch verlinkte Telefonnummern, …).
4. Welche Geräte nutzt meine Zielgruppe überwiegend? (Im Nachgang hilfreich ist hier z.B.
   das Tracking von mobilen Besuchern in den ersten Wochen und Monaten nach dem
   Launch).

Darüber hinaus sollte man darauf achten, dass man dem mobilen Benutzer immer die
Möglichkeit bietet von einer mobilen Version auf die herkömmliche Desktop-Version navigieren
zu können und von dieser auch immer wieder zurück auf die mobile Seite gelangt.