Google-Map richtig auf der eigenen Internetseite einfügen

Es gibt ein paar Seitenelemente, die meine Kunden eigentlich immer auf ihrer Internetseite haben wollen—ein Beispiel hierfür ist eine Karte. Dank Google ist das Einbetten von Karten in Internetseite fast lächerlich einfach: Google-Maps öffnen, Position wählen und Code kopieren, so einfach kann das Leben sein—zumindest, wenn man keine besonderen Anforderungen hat.

Das Problem ist aber, das der durchschnittliche Kunde immer irgendwelche Extrawünsche hat—das fängt schon beim eigenen Firmenlogo als Marker-Icon an. Hier stößt das Kopieren und Einfügen des Embed-Codes von Google an seine Grenzen und nach einer kurzen Recherche ist klar: Wir müssen das mit der Google-Maps-API machen, das kann ja nicht so schwer sein—ist es aber doch.

Ich weiß nicht, ob es nur mir so geht, aber meiner Meinung nach ist das Referenzhandbuch der Google-Maps-API v3 extrem unübersichtlich. Ich musste stundenlang rumsuchen und rumprobieren, bis alles so war, wie ich es wollte. Deshalb will ich in diesem Artikel anhand eines Beispiels zeigen, was ich gefunden habe. weiterlesen…

jQueryUI Slider auf feste Werte begrenzen

In meinem letzten Artikel habe ich gezeigt, wie man die jQueryUI-Silder auch auf dem iPad zum laufen bringen kann. Auf ähnliche Weise kann man die Slider-Funktion auch auf andere mobile Geräte portieren und mit der dritten Betaversion von jQuery Mobile halten intuitive und einfache Bedienung von Web-Apps weiter Einzug auf die Handys.

Das nehme ich zum Anlass, um einen weiteren Artikel über Slider zu schreiben, diesmal geht es aber darum, wie man einen Schieberegler auf feste Werte festlegen kann. Der Nutzer soll also nicht stufenlos Werte wählen, sondern nur zum Beispiel die Werte 0, 5, 10, 20, 100 und 150 wählen können. Standardmäßig ist diese Funktion nicht vorgesehen, deshalb muss man den normalen Slider etwas »aufbohren«. weiterlesen…

Typo3 Tutorial: Wie wird aus einem Design eine fertige Typo3-Seite?

Content Management Systeme sind ein geniales Konzept — einmal eingerichtet und gut konfiguriert, brauchen die Editoren und Redakteure keinerlei technisches Know-How, um die Seite mit Inhalten zu füttern. Ich baue alle Seiten für meine Kunden auf einem CMS auf, denn der Kunde kann dann die Seite selbst verwalten.

Schaut man sich im Internet nach einem guten CMS um, so wird einem eine lange Liste angeboten, aus der man wählen muss. Meine Erfahrungen zur Wahl des richtigen Content Management Systems habe ich in dem Artikel Welches Content Management System nutzt ihr? geschildert.

Je besser ein CMS am Anfang vom Profi eingerichtet und konfiguriert wird, desto einfacher kann der Laie hinterher die Seite verwalten. Ein CMS-Riese, der dieses Prinzip perfektioniert hat und der deshalb immer wieder genannt wird, ist Typo3. Einmal eingerichtet, macht die Verwaltung und Änderung der Inhalte nahezu keine Arbeit mehr. Die Einrichtung des Systems selbst ist allerdings kompliziert, wobei die lückenhafte, schwer verständliche und über Hunderte von Webseiten verteilte Dokumentation von Typo3 und die meisten Tutorials keine große Unterstützung bieten. weiterlesen…

Howto: Photoshop-Entwurf mit HTML & CSS umsetzen – ein Gastbeitrag auf t3n.de

Auf t3n.de ist ein neuer Artikel von mir veröffentlicht worden. Hier eine kurze Artikel-Vorschau:

Photoshop-Entwurf mit HTML & CSS umsetzen

Der Großteil des modernen Internets setzt sich aus HTML und CSS zusammen, den Grundbausteinen einer jeden Internetseite. Was man sieht, wenn man eine Internetseite öffnet, sind nichts weiter als viele Zeilen HTML-Markup und CSS-Code, aber am Anfang jeder Internetseite steht doch die Idee für das Design im Kopf irgendeines Webdesigners. weiterlesen…

jQuery: Bilder zuschneiden direkt im Browser

Für die meisten Bildergalerien hat es bisher ausgereicht, wenn ein zufälliger Bildausschnitt als Vorschaubild ausgeschnitten wird. Deshalb war es bisher nicht nötig, dem Nutzer die Möglichkeit zu geben, direkt im Browser einen Bildausschnitt zu wählen. Doch vor kurzem stand ich vor der Aufgabe, für eine junge Fotografin aus Iserlohn eine Bildergalerie zu programmieren. Da die Bilder auf der Internetseite im Vordergrund stehen sollten, mussten sie besser in Szene gesetzt werden.

In diesem Artikel soll es darum gehen, wie man eine Nutzeroberfläche zum Zuschneiden von Bildern realisieren kann. Mit dem JavaScript-Framework jQuery und ein wenig PHP ist dies tatsächlich nicht schwer. weiterlesen…

Automatische Bildskalierung mit PHP

In vielen meiner Webanwendungen spielen Bilder verschiedenster Größe eine große Rolle. Auf Advitum und Weevo sind es meine Referenzen, auf abi12 vom Nutzer hoch geladene Bilder. Um die Bilder zu präsentieren, sollte man eine flexible Kontrolle über die Bildgröße haben.

Zeigt man per HTML Bilder an, kann man zwar die Größe als Attribute übergeben, allerdings sind nicht alle Browser gleich gut darin, die Bilder auf die gewünschte Größe zu reduzieren, was oft zu unschönen Ergebnissen führt. Außerdem werden die Bilder erst beim Clienten skaliert, also in voller Größe übermittelt. Besser wäre es, die Bilder schon auf dem Server zu skalieren, damit der Traffic reduziert und die Qualität der Skalierung nicht dem Zufall überlassen wird. weiterlesen…

CSS3-Buttons ohne Grafiken erstellen – ein Gastartikel auf t3n.de

Nachdem ich für daswebdesignblog.de den Artikel »CSS3-Suchfeld – Verläufe und runde Ecken« geschrieben habe, wird jetzt ein Artikel von mir auf t3n.de veröffentlicht. Hier ein Auszug:

CSS3-Buttons ohne Grafiken erstellen

In diesem Artikel will ich zeigen, wie auch komplexe Buttons ohne Photoshop oder Grafiken nur mit CSS erstellt werden können. weiterlesen…

CSS3-Suchfeld – ein Gastartikel auf daswebdesignblog

Anfang der Woche konntet ihr es schon bei Twitter lesen, jetzt ist es so weit! Bei daswebdesignblog ist jetzt ein Artikel von mir zu lesen. Hier ein Auszug:

CSS3-Suchfeld – Verläufe und runde Ecken

Es ist nicht lange her, da habe ich für ein Suchfeld eine riesige Grafik erstellt und dann mit CSS das Suchfeld und den Submit-Button über die Grafik gelegt – alles sehr kompliziert.

Wieder einmal kann ich nur bewundern, wie schön die Web-Welt doch mit CSS3 geworden ist. Für das gleiche Suchfeld reichen jetzt ein paar Zeilen CSS und ein kleines Icon. weiterlesen…

Quellcode mit WP-CodeBox darstellen – Update

Ich habe es bisher gehasst, in meinen Artikeln Quellcode anzuzeigen. Permanent ging irgendetwas kaputt. Aber endlich habe ich eine Lösung gefunden: das WordPress-Plugin WP-CodeBox. weiterlesen…