Advitum.de auf Google+

Google-Map richtig auf der eigenen Internetseite einfügen

Google-Map richtig auf der eigenen Internetseite einfügen
Von am
Kategorien: Arbeit, CSS, Design, JavaScript, Programmieren, Tutorials

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. Artikel weiterlesen

Typo3 Tutorial: Schulhomepage mit Typo3 erstellen — Gastbeitrag auf Schulhomepage.de

Typo3 Tutorial: Schulhomepage mit Typo3 erstellen — Gastbeitrag auf Schulhomepage.de
Von am
Kategorien: Content Management Systeme, Design, PHP, Programmieren, Tutorials, Typo3

In meiner (bisher) zweiteiligen Artikelserie habe ich Schritt für Schritt gezeigt, wie man mit Typo3 eine Internetseite aufbaut. Im ersten Teil ging es darum, von einem Photoshop-Entwurf zu dem HTML-Design zu kommen. Im zweiten Teil entwickelte ich aus diesem Design dann die Typo3-Seite.

Aufgrund zahlreicher weiterführender Fragen von Lesern und auf die Bitte eines guten Kollegen habe ich jetzt einen dritten Teil zum Artikel geschrieben, in welchem ich detailliert darauf eingehe, wie man jetzt diese Typo3-Rohseite vernünftig einrichtet und zum Laufen bringt. Ich wünsche euch viel Spaß beim Lesen!

Das Schweigen brechen…

Das Schweigen brechen…
Von am
Kategorien: Arbeit

Lange Zeit war es viel zu still auf meinem Blog – bis auf ein paar Kommentare hat sich hier nicht viel getan in den letzten Wochen. Aber das hat auch einen Grund. Naja, eigentlich sind es mehrere Gründe.

Zum einen habe ich einen Artikel für das t3n-Magazin gelesen geschrieben (danke René), was am 1. September in die Kioske kommt – man findet ihn auf Seite 166 und es geht um die HTML5 History API. An diesem Artikel habe ich lange gefeilt, denn ich wollte natürlich, das mein allererster Print-Artikel gut ist. Ich finde ihn gelungen, kauft euch also das t3n-Magazin und lest ihn, es lohnt sich. Außerdem sind dort noch viele andere tolle und gute Artikel abgedruckt, wie eigentlich immer im t3n.

Es gibt allerdings noch einen zweiten Grund für meine Schreibpause. Ich habe in den letzten vier Wochen ein Praktikum in der Werbeagentur David&Goliath absolviert, welches meine ganze Zeit verschlungen hat. Morgen geht das Praktikum allerdings zu Ende und ich habe wieder Zeit, mich ein wenig meinem Blog zu widmen.

Aus der Arbeit in der Agentur habe ich viele Eindrücke und Erfahrungen mitgenommen und habe viele neue Themen gefunden, über die ich Artikel schreiben will. Ihr könnt euch also freuen auf ein paar frische Artikel, zumindest wenn ihr mich noch nicht aus eurem Feedreader verbannt habt.

Bis dahin wünsche ich euch viel Spaß beim Lesen des t3n-Magazins, welches ihr euch jetzt hoffentlich alle sofort kauft!

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

Howto: Photoshop-Entwurf mit HTML & CSS umsetzen – ein Gastbeitrag auf t3n.de
Von am
Kategorien: Arbeit, CSS, Design, Photoshop, Programmieren, Tutorials

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.

Natürlich wäre es möglich, dass der Webdesigner jetzt sofort loslegt und seine Ideen codet, wahrscheinlicher ist aber, dass zunächst ein ganz anderes Programm sich auf seinem Desktop öffnet – Photoshop. Dank Photoshop können Designer und Kreative ihre Ideen vollständig auf das Papier beziehungsweise den Bildschirm bringen, im Grunde müssen sie dafür weder HTML noch CSS beherrschen. Der Designprozess kann also komplett vom Coding abgekoppelt werden, der Designer muss nicht zwingend auch der Coder sein.

Der kreative Kopf hinter einer Internetseite ist also immer der Designer — in diesem Artikel wollen wir uns aber dem Prozess des Codings zuwenden. Wie wird aus einem Photoshop-Entwurf das fertige Design in HTML & CSS?

Hier könnt ihr den ganzen Artikel lesen: Howto: Photoshop-Entwurf mit HTML & CSS umsetzen Artikel weiterlesen

Wie eine einfache Tagcloud zur schlafraubenen Hürde wird

Wie eine einfache Tagcloud zur schlafraubenen Hürde wird
Von am
Kategorien: Arbeit, Design, JavaScript, jQuery, Programmieren

Letzte Woche bekam ich von einem Designer ein Design für eine Internetseite vorgelegt, in der er ein Wordle zur Darstellung der häufigsten Suchbegriffe benutzt wurde. Ein Wordle zu erstellen ist im Grunde ganz einfach, gibt es dafür doch eine einfache Online-Anwendung. Einziger Nachteil: jedes Mal, wenn sich die Begriffe ändern, muss das Wordle von Hand neu erzeugt werden. Da in meinem Fall die Wörter jedoch dynamisch erzeugt werden, stellt dies eine echte Hürde dar.

Auf den ersten Blick erschien mir JavaScript für diese Aufgabe am geeignetsten, auf den zweiten Blick auch, also machte ich mich an die Arbeit und schrieb ein kleines jQuery-Plugin – zumindest dachte ich, es würde ein kleines Plugin werden. Doch schnell tauchten die ersten Probleme auf. Ich konnte zwar recht einfach mit outerWidth() und outerHeight() die Größe, die das Wort brauchen würde, ermitteln, aber wie sollte der Algorithmus aussehen, der diese dann platziert? Artikel weiterlesen