Blog

Nachdem wir im letzten Artikel der Artikelserie ein Linien-Diagramm erstellt haben, kümmern wir uns in diesem Artikel darum, das Diagramm für den Nutzer interaktiv zu gestalten. Hier punktet ein SVG-Diagramm gegenüber einem Canvas oder gar einer Bilddatei: Wir können dem Nutzer recht einfach die Möglichkeit geben, mit dem Diagramm zu interagieren, um zum Beispiel genaue Werte abzulesen oder in eine tiefere Detail-Ansicht zu gelangen.

Im Folgenden gehe ich die Änderungen Schritt für Schritt durch.

Qualitativ hochwertige Texte sind nach wie vor die beste Möglichkeit sich im Web eine dauerhafte Leserschaft aufzubauen. Doch was helfen gute Inhalte, wenn die Optik nicht stimmt? Mit diesen 7 einfachen Tipps kannst Du die Typografie Deiner Website verbessern.

Diagramme sind ein wichtiges Werkzeug, um Daten zu visualisieren. Sie können komplexe Zusammenhänge sichtbar machen. Auch im Web bietet sich der Einsatz von Diagrammen an – zum Beispiel zur Visualisierung von Nutzer- oder Verkaufszahlen, in wissenschaftlichen Artikeln etc.

Es gibt bereits einige Tools und Bibliotheken, die uns bei der Nutzung von Diagrammen unterstützen können. Wer neugierig ist, gerne selbst experimentiert oder einfach nicht die passende Bibliothek findet, kann trotzdem mit JavaScript und SVG sehr einfach eigene Diagramme erstellen. In diesem Artikel erfährst Du, wie Du Linien-Diagramme aus Deinen Daten generieren kannst.

Laut Wordpress.org nutzen über 60 Millionen Menschen Wordpress für Ihre Webseite – kein Wunder! Denn in einem Bereich gehört es zu den Besten seiner Klasse: Blogging. Aber Wordpress wird immer häufiger als Wunder-Allzweck-Waffe eingesetzt, wird zu einem Schweizer Taschenmesser der Webseite-Pflege aufgebohrt.

Am Ende entsteht oft ein Backend, durch das kein Redakteur wirklich durchsteigt, 20 Plugins verlangsamen das ganze System und im Menü finden sich dutzende ungenutzter Menüpunkte. Das riesige Angebot von so genannten Multi-Purpose-Themes begünstigt diesen Trend noch.

In diesem Artikel zeige ich auf, für welche Webseiten Wordpress eine gute Wahl ist – und welche Webseiten besser nicht auf Wordpress bauen sollten.

Vor ein paar Tagen habe ich ein interessantes Gif gesehen, eine Animation einiger konzentrischer Halbkreise, die unterschiedlich schnell rotieren. Ich war drauf und dran, den gleichen Effekt mit ein bisschen JavaScript nachzubauen, als ich bemerkte, dass der gleiche Effekt sehr einfach mit CSS erzielt werden kann.

In diesem Artikel wende ich CSS-Animationen an, um einen interessanten Effekt zu erzielen.

Seit einiger Zeit arbeite ich an einem eigenen Content Management System: Content MarkDown. Dieses CMS basiert, wie der Name vermuten lässt, auf Markdown, einer Text-Auszeichnungs-Sprache. Markdown ist darauf ausgelegt, schon im Text-Editor strukturiert auszusehen, so ist auch in Content MarkDown die Pflege der Inhalte direkt im Text-Editor sehr übersichtlich.

In diesem Artikel erkläre ich die Grundlagen von Content MarkDown und zeige, wie mit dem CMS schnell und einfach eine eigene Webseite erstellt und gepflegt werden kann.

In meinem letzten Artikel habe ich beschrieben, wie man mit ein wenig Physik, JavaScript und dem Canvas einen interaktiven Effekt erstellen kann. In diesem Artikel möchte ich einen neuen Effekt vorstellen, der diesmal zwar nicht interaktiv, aber nicht weniger interessant ist.

Achtung: Physik und Mathematik voraus! In diesem Artikel zeige ich Dir, wie man mit Physik und ein wenig JavaScript einem Canvas Leben einhauchen kann. Der entstandene Effekt kann, in abgewandelter Form, sehr schön in eine Webseite eingebunden werden.

Im letzten Artikel dieser Serie hast Du gelernt, Blocksatz in FPDF zu generieren. Was uns jetzt für eine Rechnung noch fehlt, sind die Rechnungs-Posten. Diese wollen wir nun in zwei Spalten darstellen. Links wird der Artikel oder das Produkt aufgelistet und rechts der Preis. So können wir am Ende die Summe der Rechnung übersichtlich darstellen.

Jetzt aber los!

Im ersten Artikel dieser Serie haben wir angefangen, eine Rechnung automatisch mit PHP zu erstellen. Dazu benutzen wir FPDF. Du weißt jetzt schon, wie man grundsätzlich Text auf die Rechnung bringt. Als nächstes werden wir uns anschauen, wie wir Fließtext auf die Rechnung schreiben können. Im nächsten Artikel werden wir damit beginnnen, die Rechnungsposten anzuzeigen.

Mit FPDF kann man sehr flexibel automatisch PDF-Dateien generieren. Damit lassen sich viele Aufgaben automatisieren, wie zum Beispiel die Generierung von Rechnungen und anderen Dokumenten. FPDF ist sehr flexibel und kompliziert, was aber dazu führt, dass beliebig komplexe PDFs erstellt werden können.

In diesem Artikel möchte ich Dir am Beispiel einer Rechnung zeigen, wie Du mit FPDF arbeiten kannst. In den folgenden Artikeln werde ich immer komplexere Anwendungsbeispiele durchgehen, sodass immer neue Probleme gelöst werden. Nun beginnen wir aber zur Einführung mit einer einfachen Rechnung.

Wer großen Wert darauf legt, das Content Management System bis ins kleinste Detail anpassen zu können, hat mit Typo3 die richtige Wahl getroffen. Hier kann wirklich sehr penibele definiert werden, wie die Elemente im Frontend angezeigt werden. Doch nicht nur das Frontend von Typo3 ist sehr flexibel, auch im Backend kann sehr viel angepasst werden.

In diesem Artikel zeige ich Dir, wie Du ganz einfach das Layout der Inhalts-Spalten im Backend mit Backend-Layouts verändern kannst.

Lange ist es her, dass ich hier ein Photoshop-Tutorial veröffentlich habe. In meinem Alltag als Programmierer gibt es einfach viel mehr Inspirationen zum Programmieren als für ein Photoshop-Tutorial. Aber beim Stöbern durch verschiedene Font-Sammlungen kam mir plötzlich die Inspiration zu diesem Effekt.

In diesem Tutorial werden wir den Text »New York« mit der New Yorker Skyline und verschiedenen Brushes in Szene setzen. Also öffne jetzt Photoshop und los gehts!

Letzte Woche habe ich auf Pixeltuner.de die Epsilon-Greedy-Methode zur Optimierung von Landingpages vorgestellt. Epsilon-Greedy-Tests sind im Grunde modifizierte A/B-Tests. In diesem Artikel möchte ich Dir zeigen, wie Du ein CakePHP-Plugin schreiben kannst. Als Beispiel erstellen wir ein CakePHP-Tutorial, mit dem wir Epsilon-Greedy-Tests durchführen können.

Obwohl ich zwar auf dem Ergebnis der letzten Artikel dieser Serie aufbaue, brauchst Du diese nicht unbedingt gelesen haben, denn das Plugin wird sich automatisch in diese und jede andere CakePHP-App einfügen. Viel wichtiger ist, dass du meinen Artikel über Epsilon-Greedy-Tests gelesen hast, damit du weißt, was ein Epsilon-Greedy-Test ist und wie er funktioniert.

Das Redesign einer Webseite ist immer eine große Entscheidung und eine schwierige Aufgabe. Auf Advitum.de gibt es auch seit einigen Wochen ein neues Design, darum ist dieser Artikel um so passender! »Wechseln oder nicht wechseln«, diese Frage stellt sich Nataly von TemplateMonster.com in diesem Gastartikel. Sie gib 9 echt hilfreiche Tipps zum Wechsel des WordPress Themes. Danke dafür!

Seit vorletzter Woche stellen Benutzer der Twitter-API v1 fest, dass die Schnittstelle plötzlich nicht mehr funktioniert. Warum? Twitter unterstützt die API nicht mehr und fordert alle Entwickler auf, nun die API v1.1 zu nutzen. Damit wird das Auslesen der Tweets in Zukunft etwas komplizierter. Damit du auch in Zukunft auf deiner Webseite deine Tweets anzeigen kannst, zeige ich dir in diesem Artikel, wie du die API v1.1 nutzt.

Na also. So langsam kommt hier wieder Leben in die Bude! Das wird auch Zeit, denn am 22. Juli 2013 wird Advitum.de genau 3 Jahre alt! Am 22. Juli 2010 schrieb ich den ersten Artikel mit dem Titel »Webseiten in mehreren Browsern testen«. Danach habe ich mehr oder weniger regelmäßig weitere Artikel veröffentlicht, sodass dies nun bereits Artikel 82 ist.

Ich möchte allen meinen treuen Lesern ein riesiges Dankeschön aussprechen, und zusätzlich auch etwas an meine Leser zurückgeben. Ohne euch wären die letzten drei Jahre nicht möglich gewesen!

Aus diesem Anlass (und weil ich das schon länger vorhatte) starte ich heute auf Advitum.de ein kleines Gewinnspiel.

Im letzten Teil dieser Artikelserie haben wir ein einfaches Gästebuch programmiert. Unsere Nutzer können nun einfache Einträge hinterlassen und diese werden auf der Gästebuch-Seite aufgelistet. In diesem Artikel wollen wir uns nun darum kümmern, dem Admin der Webseite eine Gästebuch-Verwaltung bereitzustellen. Dank CakePHP ist das mit relativ wenig Aufwand sehr schön möglich.

Wichtig: Dieser Artikel baut inhaltlich auf den letzten Artikel auf, wenn du den Rest der Artikelserie noch nicht gelesen hast, tu dies am besten jetzt!

Seit dem letzen Teil der Artikelserie haben wir eine funktionierende statische Webseite, die auf CakePHP aufbaut. Bis jetzt ist dies jedoch noch nicht sonderlich spektakulär—interessant wird es erst, wenn wir nun etwas Dynamik ins Spiel bringen. Um uns mit den grundlegenden Funktionen von Modeln und Conrollern vertraut zu machen, beginnen wir mit einem einfachen Beispiel, nämlich der Programmierung eines Gästebuchs.

Am Ende dieses Artikels werden wir dann ein sehr einfaches und unkompliziertes Gästebuch haben, dass wir später noch weiter erweitern werden. Vorerst sollen uns aber ein möglichst einfaches Gästebuch reichen.

Worauf warten wir noch? Legen wir los!

Im letzten Teil dieser Artikelserie haben wir uns mit den Grundfunktionen von CakePHP vertraut gemacht. Nun wollen wir uns etwas tiefer in die Höhle des Löwen wagen und uns mit Views, Layouts und Helpers beschäftigen. Dazu bauen wir in diesem Artikel eine kleine, statische Webseite auf. Am Ende sollten wir eine solide Grundlage für den Schritt in die Dynamik der Applikation haben.

Wir schauen uns zuerst das HTML-Design an, woraus wir dann ein Layout machen, dann fügen wir mit Views den Inhalt hinzu und zuletzt erstellen wir noch einen Helper für die Navigation. Viel Spaß!

Mit Extbase für Typo3 rückt das MVC-Prinzip etwas in den Fokus dieses Blogs. Die neue Basis für Typo3-Extensions zwingt uns Programmierer, unsere Extensions ab sofort nach dem MVC-Prinzip aufzubauen. MVC rein theoretisch zu erklären finde ich zu trocken, weshalb ich euch in dieser Artikelserie anhand von praktischen Beispielen sowohl MVC als auch CakePHP näherbringen möchte.

CakePHP ist das PHP-Framework, für das ich mich entschieden habe, da es sehr viele praktische und coole Funktionen bietet und die Programmierung von Webseiten wesentlich vereinfacht.

Im ersten Teil der Artikelserie wollen wir uns die Grundzüge von MVC und CakePHP anschauen, außerdem erstellen wir—natürlich—als erstes ein Hallo Welt!

Oft wollen Kunden auf Ihrer eigenen Webseite auch regelmäßig kurze Neuigkeiten einpflegen. Ein Content Management System ist hier oft schon zu viel des Guten. Ein kleiner Trick, um die News für den Kunden sehr einfach pflegbar zu machen und ganz nebenbei noch dafür zu sorgen, dass die Facebook-Seite auch gefüllt wird: Einfach den Facebook-Feed auf der Webseite anzeigen. Wie das am besten geht, zeige ich euch in diesem Artikel

Ich habe mich lange Zeit um Extbase gedrückt—wie immer bei Typo3 findet man zu Extbase keine wirklich guten Tutorials und der Einstieg fällt leider ziemlich schwer. Wenn man dann doch ein Tutorial findet, sind viele Dinge im Tutorial schon wieder veraltet und funktionieren nicht wie erwartet. Das ist für einen Anfänger natürlich immer besonder schlecht.

Jetzt kam ich allerdings nicht mehr drum herum, den Einstieg zu wagen. Als ich eine Webseite mit Typo3 v6 aufsetzen wollte, stellte ich fest, dass viele meiner eigenen Extensions nicht mehr wie gewünscht funktionieren. Also werde ich diese jetzt nach und nach auf Extbase umstellen und dabei hoffentlich einiges lernen.

In diesem Artikel möchte ich versuchen, euch den Einstieg in Extbase so einfach wie möglich zu machen. Dies ist keineswegs ein allumfassendes Tutorial, denn ich bin selbst noch dabei, mich einzuarbeiten. Dieser Artikel ist quasi ein Wegweiser für alle, die wie ich vor der großen Herausforderung mit Namen Extbase stehen.

In letzter Zeit wurde ich oft von Webdesignern gefragt, was beim Gestalten einer Typo3-Layouts beachtet werden muss. Meine Antwort lautete immer, dass der Inhalt der einzelnen Seiten, den man per Typo3 pflegt, möglichst einfach gehalten sein sollte. Doch neulich viel es mir auf, dass es absurd ist, das Layout an Typo3 anzupassen. Sollte es nicht—grade bei einem so mächtigen CMS—genau anders herum sein? Sollte Typo3 sich nicht genau so konfigurieren lassen, dass sich jedes beliebige Layout und Design darstellen lässt?

Also startete ich ein Experiment: Bei meinem nächsten Auftrag verschwieg ich dem Designer, dass die Seite pflegbar sein sollte und bekam ein Design, bei dem der Inhalt jeder Unterseite individuell aufgebaut war. Ziel des Experimentes sollte es sein, den Spagat zwischen möglichst leichter Pflegbarkeit und möglichst individuellem Design zu finden. Das Ergebnis war sowohl überraschend einfach also auch überraschend gut. Wie immer bei Typo3 muss man nur wissen, wie es geht!

Irgendwie ist das alles anders gelaufen als geplant. Vor über acht Monaten endschied ich mich dafür, das Tempo etwas runter zu schrauben. Bis dahin hatte ich jede Woche einen neuen Artikel veröffentlicht, was mich zum Schluss ziemlich unter Druck gesetzt und gestresst hat. Deshalb beschloss ich, die Notbremse zu ziehen und meine Artikel nicht mehr so regelmäßig zu schreiben. In einer kurzen Ankündigung im Blog kündigte ich dass damals an, betonte aber, dass dies nicht das Ende von Advitum.de sei.

Leider war nach dieser Ankündigung aber tatsächlich monatelang Schicht im Schacht. Was war passiert? Befreit von dem Zwang, jede Woche einen Artikel schreiben zu müssen, schob ich das Schreiben immer weiter vor mir her und andere Aufgaben nahmen mich voll in Anspruch. Allerdings war mir immer klar, dass ich noch nicht fertig mit meinem Blog bin. So werkelte ich in den letzten Monaten ziemlich gemächlich an einem Redesign für Advitum.de herum. Da aber trotzdem noch viele andere Dinge mich in Anspruch nahmen, zog sich auch dieser Prozess ziemlich in die Länge. Nun arbeite ich seit gut fünf Monaten an dem neuen Design und an neuen Artikeln, kam aber irgendwie nie zu einem Ende.

Doch jetzt geht es endlich weiter! Der Ehrgeiz, endlich wieder bloggen zu wollen und eine Woche Urlaub machten es möglich: Advitum.de 2.0 ist fertig und die ersten neuen Artikel sind schon fertig und werden in den nächsten Wochen veröffentlicht, angefangen mit diesem hier.

Ich werde vermutlich einige Zeit brauchen, bis ich mich wieder in einen regelmäßigen Schreibrythmus einpendel und ich weiß auch noch nicht so genau, wie oft es in Zukunft neue Artikel geben wird.

In den letzten Wochen hat es sich bereits abgezeichnet: meine Artikel wurden immer kürzer und schließlich ist auch das ein oder andere Mal erst gar kein Artikel am Montag-Morgen erschienen. Deshalb habe ich beschlossen, mir den Druck zu nehmen und nicht wie bisher jeden Montag einen Artikel zu veröffentlichen.

Bisher war ich immer darauf bedacht, dass meine Artikel wöchentlich erscheinen - das hatte ich eingeführt, nachdem ich aus Faulheit mehrere Monate gar keinen Artikel geschrieben hatte. Doch jetzt hat sich in meinem Leben einiges geändert, unter Anderem habe ich Anfang August eine Berufsausbildung begonnen. Deshalb werden ab sofort nicht mehr jeden Montag Artikel auf advitum.de erscheinen.

Letzte Woche gab es hier aus Zeitmangel nur einen kleinen animierten Ninja als Demo meiner Animationsbibliothek ani.js zu sehen. Diese Woche will ich nun ein kleines Tutorial nachliefern, mit dem du selbst die Animationsbibliothek ani.js nutzen kannst.

Als erstes solltest du jQuery und Ani.js downloaden und die beiden Dateien in deine HTML-Datei einbinden.

In deinem HTML-Dokument brauchst du nur ein (Div-)Element anlegen, in welchem sich die Animation befinden soll.

Nun kannst du mit der Animation beginnen! Lege dazu eine neue JS-Datei an und binde sie nach jQuery und Ani.js ein! In dieser Datei wird später der Code für die Animation stehen.

Heute gibt es statt eines »normalen« Artikels mal etwas zum Spielen, nämlich einen kleinen animierten Ninja, den ich mit JavaScript gecodet habe. Ich habe nämlich übers Wochenende eine kleine, simple Animations-Bibliothek geschrieben, die ich anhand dieses Ninjas ausproberen wollte. Ich hoffe, ich finde bald die Zeit, eine detaillierte Beschreibung der Bibliothek zu schreiben, denn dann könnt ihr sie nach belieben nutzen.

Als leidenschaftlicher Transformations-Nutzer habe ich diese Woche einen großen Schrecken bekommen, als plötzlich die CSS-Transformation skew nicht mehr funktionierte. Des Rätsels Lösung: Skew wurde aus dem CSS-Transform-Draft entfernt und wird deshalb in Firefox 14 plötzlich nicht mehr unterstützt. Doof nur, dass viele visuelle Tricks, die im Internet verwendet werden, ohne das Scheren eines Elementes nicht mehr funktionieren.

Auf meiner Suche nach einer Alternative stieß ich darauf, dass man in der Transformation auch direkt mit einer Matrix vollziehen kann. Leider ist das nicht ganz so einfach wie bisher, aber wenn man weiß wie es geht, ist die Transformations-Matrix sehr flexibel. Ich zeige Dir in diesem Artikel die gängigsten Transformation, die man mit einer Matrix vollziehen kann.

Auf vielen Seiten hängt externen Links das Attribut target="_blank" an, was bewirkt, dass sich diese Links in einem neuen Fenster oder Tab öffnen. Bis heute ist diese Vorgehenweise von den einen bejubelt und von den anderen verpöhnt, denn es gibt sowohl Vor- als auch Nachteile.

In diesem Artikel will ich Dir deshalb eine schöne Alternative dazu präsentieren. Wir werden einfach alle externen Links visuell von den internen unterscheiden.

Zunächst ist vielleicht interessant, warum die Verwendung von target="_blank" so umstritten ist. Auf der einen Seite steht der klare Vorteil, dass der Nutzer so unsere Seite nicht so schnell verlässt. Wenn ein Besucher auf einen externen Link klickt und ihm der externe Inhalt gefällt, ist die Wahrscheinlichkeit, dass er zurück auf unsere Seite kommt, sehr gering. Wurde die externe Seite jedoch in einem neuen Fenster geöffnet, kehrt der Nutzer automatisch wieder auf unsere Seite zurück, wenn er die externe Seite schließt.

Vor kurzem bin ich umgezogen. Was hat das mit diesem Artikel zu tun? Nun ja, ich habe in der neuen Wohnung einen PVC-Boden in Parkett-Optik verlegt und das hat mich zu diesem Artikel inspiriert. Überhaupt ist ein Umzug eine geniale Quelle der Inspiration — die neue Stadt, die neue Umgebung — all diese Eindrücke haben mir viele Ideen für neue Artikel und Projekte gegeben, ich werde also viel zu tun haben.

Nun aber zurück zum Thema. In diesem Artikel zeige ich Dir, wie man mit Photoshop eine nahtlos kachelbare Parkett-Textur erstellt.

Wir beginnen mit einem neuen Dokument, die Größe ist hier egal. Ich habe mich deshalb für das Standard-Format von Photoshop entschieden. Den Hintergrund füllen wir mit weiß.

Als nächstes färbe ich auf einer neuen Ebene einen horizontalen Streifen mit schwarzer Farbe. Eigentlich ist die Farbe egal, wir verwenden diese Ebene bloß als virtuelle Schnittvorlage. Drücken wir mit gehaltener Strg-Taste auf die Ebene, erhalten wir eine Auswahl in Form der Ebene. Diese werden wir später verwenden, um aus einer Holz-Textur Planken auszuschneiden.

Es ist wichtig, dass der schwarze Bereich genau so Breit wie das Dokument ist, nur so lässt sich die Textur hinterher lückenlos kacheln.

In diesem Artikel zeige ich Dir an einem konkreten Beispiel, wie man eine Typo3-Extension von Anfang an entwickelt. Am Ende dieses Artikels hast Du eine Extension, die deine neuesten Tweets auf Deiner Seite darstellt.

Dieser Artikel baut auf den ersten vier Teilen der Artikelserie »Typo3: Extension selbst erstellen« auf, Du solltest also vielleicht vorher die ersten Artikel der Serie lesen!

Ich habe neulich irgendwo ein Produktdesign gesehen und war von der Typografie absolut begeistert. Das hat mich dazu inspiriert, diesen Artikel zu schreiben.

Oben siehst Du schon das Endergebnis dieses Tutorials, so oder so ähnlich kann Dein Resultat aussehen. Ich zeige dir insbesondere, wie du Text mit ein paar Grunge-Brushes aufwerten oder verändern kannst. Also viel Spaß!

Wir beginnen mit einem kleinen Ausflug auf eine meiner Lieblings-Seiten für kostenlose Schriftarten, nämlich dafont.com. Hier suchen wir uns eine schöne Stencil-Schriftart aus, die wir für unsere Typografie verwenden wollen. Ich habe für euch schon fünf verschiedene Schriften ausgewählt, die ihr benutzen könnt, ich habe jedenfalls Disparador Stencil benutzt.

Unsere Extension bietet seit dem letzten Teil der Artikelserie schon eine recht gute Konfiguration über TypoScript. In diesem Artikel will ich dir zeigen, wie du dem Nutzer die Möglichkeit gebt, direkt beim Einfügen des Plugins Einstellungen zu definieren. Dazu benutzen wir FlexForms.

Außerdem lernst du, wie man die Extension in mehreren Sprachen anbieten kann.

Den heutigen Artikel möchte ich gerne Nutzen, um euch mein neuestes Projekt, den Kreuzworträtsel-Generator XWords vorzustellen. Damit könnt ihr direkt im Browser eigene Kreuzworträtsel erstellen.

Momentan befindet sich XWords noch in einer frühen Alpha-Version, leider sind noch nicht alle geplanten Funktionen, wie zum Beispiel das Teilen von Kreuzworträtseln auf Facebook oder das Lösen des Rätsels direkt im Browser, umgesetzt. Ich habe mich aber trotzdem dafür entschieden, euch das Zwischenergebnis schon einmal zu präsentieren.

Bisher war Photoshop CS6 nur als öffentliche Vorserienversion verfügbar. Nun hat Hersteller eine endgültige Fassung der Bildbearbeitungssoftware auf den Markt gebracht. Es wurden diverse Besserungen an der Software vorgenommen, die von der Retuschetechnik bis hin zu den Verzerrungskorrekturen reichen.

Durch mehrere neue Filter werden dir neue gestalterischen Möglichkeiten in Photoshop CS6 ermöglicht. So kannst du Kissen- und tonnenförmige Verzerrungen in Weitwinkel- und Fisheye-Aufnahmen deutlich besser entfernen. Dabei bleibt es dir selber überlassen, ob du dies automatisch auf Basis der Kamera- beziehungsweise Objektivdaten oder fein gesteuert per Hand vornehmen möchtest. Ein weiteres neues Feature ist die Weichzeichnergalerie, mit der du Unschärfe um Hauptmotive herum oder eine Weichzeichnung mit Miniatureffekt erzeugen kannst. Es werden dabei auf Wunsch ansehnliche Unschärfe-Effekte errechnet.

Bisher habe ich die Typografie in Photoshop meist ziemlich stiefmütterlich behandelt, deshalb werde ich nun mal wieder einen Typografie-Effekt präsentieren.

Wir starten mit einem Dokument in beliebiger Größe, ich habe mich zum Beispiel für 1920x1080 Pixel entschieden, damit ich das Ergebnis hinterher als Wallpaper nutzen kann.

Immer wieder stolpere ich im Netz über Ajax-OnePages, also Seiten, bei denen, sobald man auf einen internen Link klickt, der gewünschte Inhalt per Ajax nachgeladen wird. Dadurch werden oft interessante Animationen, wie zum Beispiel Diashow-Übergänge oder Ähnliches möglich. Leider führt das Nachladen von Inhalten per Ajax, wenn man es nicht richtig macht, zu einer riesigen Katastrophe: keine Suchmaschine indiziert den nachgeladenen Inhalt und ohne JavaScript wird die Seite gänzlich unbrauchbar für den Nutzer.

In diesem Artikel will ich deshalb zeigen, wie man eine Ajax-OnePage richtig umsetzt und die zahlreichen Stolpersteine umgeht.

Der Schlüssel zum Erfolg liegt im Progressive Enhancement. Ohne JavaScript und Ajax funktioniert die Seite ganz normal, erst mit dem JavaScript kommen Animationen und OnePage-Charakteristika hinzu. So ist die Seite für jeden nutzbar und auch Suchmaschinen können den gesamten Inhalt indizieren.

Photoshop ist das mächtigste Foto-Software, die es gibt — die Möglichkeiten sind praktisch unbegrenzt. So wird Photoshop auch ausgiebig zur Ausbesserung kleiner Schönheits-Fehler im Gesicht genutzt. Meiner Meinung nach ist die Schönheits-Nachhilfe absolut unnötig, besonders wenn sie so ausgiebig missbraucht wird, dass man das Gesicht nicht wiedererkennt. Spätestens wenn schon Position von Mund, Augen und Nase verändert wird, sollte man innehalten und sich überlegen, ob der Mensch auf dem Foto überhaupt noch echt ist.

Etwas ganz anderes ist für mich das Betonen oder Einfärben von Augen — zumindest setzte ich dies nicht zur Schönheits-Verbesserung, sondern als kreatives und künstlerisches Mittel ein. Deshalb färbe ich die Augen auch nur so, dass man dies am Ende auch sehen kann, das Bild aber trotzdem beeindruckend aussieht.

In diesem Tutorial will ich euch zeigen, wie man mit Photoshop Augen einfärben kann.

Im letzten Teil der Artikelserie »Typo3: Exension selbst erstellen« haben wir begonnen, ein kleines Kontaktformular für Typo3 zu programmieren. Die Extension funktioniert zwar, doch kann man noch vieles verbessern. Deshalb fügen wir in diesem Artikel nun HTML-Templates, CSS-Styles und TypoScript-Konfiguration ein.

Aus Grundlage dient uns hier die Kontaktformular-Extension, die wir im letzten Artikel erstellt haben.

Seit einigen Monaten quälte mich ein Problem. Ich hatte angefangen, Wordles in Javscript zu implementieren, um diese dann auf einer Seite dynamisch einzubinden. Doch leider scheiterte ich an der Performance. Doch endlich habe ich eine Lösung gefunden, denn Jason Davies hat es geschafft, Word Clouds mit JavaScript zu rendern.

Das ist wunderbar, denn diese sind mit ein paar JavaScript-Kenntnissen sehr flexibel in eine Seite einbindbar. Doch gibt es dabei einiges zu beachten. Damit der Einstieg auch gut gelingt, schreibe ich hier ein kleines Tutorial, wie man einfach mit Word Cloud d3 eine Tagcloud erstellt.

Seit meinem letzten Artikel kannst du einfaches »Hello World«-Frontend-Plugin für Typo3 programmieren. Als nächstes werde ich dir zeigen, wie man ein etwas komplexeres Plugin entwickelt. Am Ende dieses Artikels wirst du in deinen Plugins Formulare und POST- und GET-Variablen verarbeiten können und aus Typo3 heraus Mails verschicken können. Zudem hast du dann die Basis für dein eigenes Kontaktformular-Plugin, dass du später beliebig erweitern und in deinen eigenen Projekten verwenden kannst.

Typo3 ist mächtig — aber nicht wegen des riesigen Funktionsumfangs, sondern wegen der riesigen Menge an Extensions, die für das Content Management System verfügbar sind. Doch oft braucht man nur eine kleine Funktion und muss dafür eine riesige, total überladene Erweiterung installieren, oder man findet einfach nicht die richtige Erweiterung für den eigenen Bedarf. Dann heißt es: selber Hand anlegen und eine eigene Extension schreiben.

Nachdem ich schon gezeigt habe, wie aus einem Design eine fertige Typo3-Seite wird, will ich in dieser Artikelserie zeigen, wie man eine Erweiterung für Typo3 schreibt und welche Erfahrungen ich auf diesem Gebiet schon gemacht habe.

Wenn man sich erst einmal mit der Entwicklung von Extensions für Typo3 auskennt, hat man ein sehr mächtiges Werkzeug an der Hand. Denn jede noch so komplizierte oder ausgefallene Funktion kann man nun in eine einfach zu bedienende Extension schreiben und in allen Projekten wieder verwenden.

Am Anfang war der Frame. Und mit dem Frame kamen die Scollbars innerhalb der Seite. Und der Programmierer sah, dass es gut war.

Jahrelang war auch alles gut, bis dann schließlich die Designer die unendlichen Weiten des Webs unsicher machten. Alles wollten die Designer verändern, alles sollte schöner werden. Doch an Scrollbars bissen sie sich die Zähne aus. Scollbars ließen sich leider nicht ohne weiteres anpassen.

In diesem Artikel zeige ich, wie man trotzdem, übrigens ganz ohne iFrames, Scollbars erstellen kann, die auch noch toll aussehen.

Heutzutage findet man alles und jeden im Netz. Daher ist es nur verständlich, wenn man sich dazu entscheidet, auch online aktiv zu werden. Ein Webdesigner ist meist nicht mit im Budget enthalten. Daher beginnen die meisten mit einem Blog, um so einen leichten Einstieg zu haben. Doch egal ob Blog oder Webseite, einige wichtige Punkte sollten immer beachten werden, wenn man sich an die Gestaltung wagt. Hier ein paar Tipps, damit es anfangs leichter geht.

Mein vorletzter Artikel über Zeiteinteilung verschiedener Blogger war der 50. Artikel dieses Blogs. Gleichzeitig »durfte« ich ein weiteres Jubiläum feiern: meinen 1500. Spam-Kommentar:

We are official Burberry outlet that always releases kinds of Burberry sale to feedback our customers. You will get the biggest discount if you order from our … burberry

Das ist Grund genug, mich noch einmal mit diesem Thema auseinanderzusetzen. Zu Beginn meiner Blogging-Karriere schrieb ich den Artikel Captchas – Spambots den Kampf ansagen. Damals vertrat ich die Meinung, das Posten von Spam einfach mit einem Captcha zu unterbinden. Auf die Nachteile bin ich jedoch damals nicht eingegangen.

Natürlich hab ich es mir nicht nehmen lassen, letzten Samstag die CeBIT-Messe 2012 in Hannover zu besuchen. Vier Stunden lang lief ich auf der »wichtigsten Kongress-Messe der IKT-Branche« hin und her, bis ich schließlich (fast) alles gesehen hatte. Wie immer Samstags war die Messe ziemlich überfüllt, doch als Schüler blieb mir keine andere Wahl als der Samstag. Für alle Interessierten und für die, die nicht auf der Messe waren, schildere ich hier meine Eindrücke von der Messe.

René Winkelmann fragte in seinem Artikel »Ist die CeBIT noch eine relevante Messe?« Auch von anderen Quellen bekam ich eher eine durchschnittliche Vorschau auf die Messe. Deshalb war ich bei Reiseantritt nicht sicher, was mich erwarten würde.

Einmal am Messegelände angekommen, zeigte sich der Vorteil eines eTickets: Während alle »regulären« Besucher lange an der Kasse anstehen mussten, kamen wir mit unseren vorab registrierten eTickets innerhalb weniger Sekunden aufs Messe-Gelände, ganz ohne nerviges Anstehen in der Schlange.

In den einzelnen Hallen wurde man dann erschlagen von den vielen Sinneseindrücken – überall blinkende Bildschirme und bunte Messestände. Insgesamt wirkte die Anordnung der einzelnen Stände etwas planlos, wirklich zu wissen, wo es als nächstes hingeht oder worum es in dieser Halle geht, war eine Seltenheit.

Als Freelancer kann man sich seine Zeit einteilen, wie man will. Arbeitszeiten können beliebig gekürzt oder verlängert werden und jederzeit kann man sich auch mal einen Tag frei nehmen. So habe ich mir das gedacht, als ich beschloss, selbstständiger Programmierer und Webdesigner zu werden. Doch leider ist eher das Gegenteil der Fall. Als Freelancer muss man sich seine Zeit streng einteilen und mit viel Selbstdisziplin arbeiten, sonst bleibt die Arbeit irgendwann einfach auf der Strecke.

Ihr habt sicherlich bemerkt, das meine Artikel längst nicht so regelmäßig erscheinen, wie ich mir das wünschen würde. Warum? Weil ich einfach nicht genug Zeit habe. Mittlerweile stapeln sich bei mir die Aufgaben, und um noch ein Sozialleben zu haben, muss ich eben meine Artikel von Zeit zu Zeit ruhen lassen. Ich habe die Wahl, wo investiere ich meine Zeit und wo nicht? Ich muss zugeben, mein Zeit-Management ist nicht immer perfekt, deshalb kommt bei mir meist irgendwas viel zu kurz.

Doch wie schaffen andere Programmierer und Designer es eigentlich, sich die Zeit einzuteilen, sodass nichts zu kurz kommt? Ich habe einige Blogger gefragt: Wie teilst du dir deine Zeit ein, sodass weder deine Arbeit, dein Blog oder das soziale Umfeld darunter leiden?

Immer wenn mir die nötige Inspiration fehlt, um einen Artikel zu schreiben, gehe ich ins Kino. Naja, so ganz stimmt das nicht, dann wäre ich längst pleite, aber ab und an mach ich das wirklich. Denn im Kino sehe ich immer tolle Filmplakate für noch tollere Filme und sehe mich berufen, ein Photoshop Tutorial zu schreiben, um der Welt die Möglichkeit zu geben, das Poster mit eigenen Bildern nachzubauen. Diesmal sprang mir bei meinem Kinobesuch das Plakat des dritten Teils »Men in Black« ins Auge. Der Effekt ist sehr raffiniert und doch sehr einfach zu erreichen.

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.

Nun ist das Jahr wieder einmal vorbei. Irgendwie bin ich in letzter Zeit viel zu selten zum Schreiben gekommen, das ärgert mich. Deshalb ist auch einer meiner Vorsätze fürs neue Jahr, mich wieder intensiv um dieses Blog zu kümmern. Beispielsweise steht diesen Sommer ein frisches Design an und ich will die Artikel regelmäßiger schreiben.

Jetzt aber zum eigentlichen Thema des Artikels, ich möchte euch kurz die drei besten Artikel des vergangenen Jahres zeigen.

Ich halte gerade das Webstandards-Magazin in der Hand - naja, eigentlich nicht, denn mit vollen Händen könnte ich ja nicht diesen Artikel tippen. Aber sagen wir mal so, das Magazin liegt auf meinem Schreibtisch und wartet darauf, gelesen zu werden. Heute morgen flatterte es in meinen Briefkasten, das erste Magazin meines kostenlosen Abonnements, das ich bei dem Forums-Gewinnspiel bei der Webbi gewonnen habe. Das nehme ich jetzt einfach mal als Vorwand, einen kleinen Artikel über der Webbi und den Macher der Seite, René Winkelmann, zu schreiben.

Aber warum sollte ich lange über der Webbi oder René Winkelmann schreiben? Viel besser kann er das selbst tun, weshalb ich ihn um ein Interview gebeten habe.

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«.

Mittlerweile sollte ja bekannt sein das ich ein jQuery-Junkie bin. Und mit »Junkie« meine ich, dass ich alles nur noch mit jQuery mache - dynamische Nutzeroberflächen, Webanwendungen ohne ein einziges Neuladen der Seite oder eben auch intuitive Bedienelemente wie zum Beispiel Slider. Für Nutzeroberflächen und Slider benutze ich, ganz konkret gesagt, das jQuery-Plugin jQuery UI. Wer jQuery kennt kennt vermutlich auch jQuery UI - das soll ja auch nicht das Thema des Artikels werden - ein paar Links zum Thema findet ihr am Ende aber trotzdem dazu.

Vor einiger Zeit habe ich in einem Artikel einen Farbverlauf-Generator empfohlen, den ich damals benutzte. Aber mittlerweile benutze ich einen anderen Generator, den Ultimate CSS Gradient Generator von Colorzilla.

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.

Dabei ist das System hinter Typo3 — einmal verstanden — im Grunde sehr einfach und logisch aufgebaut.

Dieser Artikel richtet sich deshalb an alle Interessierten, die auf der Suche nach einem Einsteigertutorial sind und gerne das Prinzip von Typo3 verstehen wollen. Ich schreibe diesen Artikel in der Hoffnung, das ihr, wenn ihr diesen Artikel gelesen habt, euch nicht in den Irrwegen von Typo3 verstrickt, wie ich es anfangs getan habe.

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

Seit den letzten Versionen von Photoshop wurden die 3D-Features extrem verbessert. Es ist nicht mehr länger nötig, 3D-Komponenten von Illustrationen in einem 3D-Programm zu erzeugen, viele Funktionen bringt Photoshop jetzt selbst mit.

In diesem Tutorial möchte ich euch zeigen, wie man mit Photoshop Scrabble-Spielsteine erstellen kann. Die Inspiration kam mir — wie kann es auch anders sein — bei einer Partie Scrabble. Wir werden in diesem Tutorial, alleine mit Photoshop Scrabble-Steine zu einem Wort zusammensetzen. Wie das Resultat aussieht, seht ihr oben.

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?

Mit jQuery sind Ajax-Aufrufe wirklich kinderleicht. So kann man zum Beispiel ganz einfach auf folgende Weise Daten vom Server per Get-Request bekommen:

$.get('data.php', function(data) {
  //do something
});

In der Variable data steht dann die Antwort des Servers, im Normalfall also der Inhalt der Seite oder das, was vom PHP-Script ausgegeben wird.

Immer wieder steht man als Webentwickler vor dem Problem, dem Nutzer eine Formularoberfläche anbieten zu müssen. Natürlich sollte diese Möglichst benutzerfreundlich sein, denn der Nutzer soll das Formular ja auch ausfüllen. Oft sind einzelne Komponenten des Formulars aber unnötigerweise auf mehrere Formularfelder verteilt. Wie weit sollte man hier bei dem Zusammenfassen von Formularfeldern gehen?

Momentan arbeite ich an einem Formular, in dem relativ viele Informationen vom Nutzer gefragt werden. Als Beispiel nehme ich jetzt einfach mal die Adresse. Mein erster Gedanke war, es so zu machen, wie ich es gewohnt bin.

Mit CSS3 wurden viele Webdesign-Träume wahr. Angefangen bei box-shadow für Schlagschatten, hört die lange Liste von neuen CSS-Eigenschaften auch nicht bei border-radius für runde Ecken auf. Eine weitere neue Eigenschaft, die ich erst vor kurzem entdeckte, die mir aber so hilfreich war wie keine zweite, ist die Eigenschaft border-image. Wie der Name schon vermuten lässt, kann man damit ganze Bilder als Rahmen definieren.

Diesen Artikel habe ich auf t3n.de veröffentlicht. Hier könnt ihr den ganzen Artikel lesen: Erweiterte Rahmen mit CSS3 - border-image

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.

Vor einigen Tagen schickte mir ein Leser ein interessantes Filmplakat des Filmes »Cracks« mit der Frage zu, wie man den gezeigten Effekt erstellen kann. Ich habe einige Zeit herumexperimentiert und bin zu einem ziemlich einfachen Weg gekommen. Diesen möchte ich im Folgenden darstellen.

Einen ähnlichen Effekt habe ich übrigens schon einmal in dem Artikel »“8 Blickwinkel”-Wallpaper in Photoshop erstellen« gezeigt.

Bei meinem letzten Kinobesuch sah ich mir den Film »Black Swan« an. Der Film war großartig und irgendwie verstörend, aber das Plakat von dem Film geistert mir noch immer im Kopf herum. Deshalb will ich es in Photoshop nachbauen.

Es gibt mal wieder einen Gastbeitrag von mir auf t3n.de zu lesen. Hier ein kurzer Auszug:

Nutzeroberflächen müssen intuitiver werden

Heute schreibe ich einen Artikel, den man nicht nur auf Webanwendungen, sondern im Grunde auf jedes Programm und jede digitale Nutzeroberfläche beziehen kann. Warum? Weil mir das Thema seit langem auf der Seele brennt. Es geht um die Kommunikation zwischen Mensch und Maschine.

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.

Nachdem der Artikel »CSS3-Buttons ohne Grafiken erstellen«, den ich für t3n geschrieben habe, dort so viel Anklang gefunden hat, wird jetzt ein weiterer Artikel von mit dort veröffentlicht. Ein Auszug:

@font-face kann mehr, als man denkt

Mittlerweile sollte jeder das Wunder namens @font-face benutzen oder zumindest davon gehört haben. Aber leider werden die Funktionen von @font-face noch nicht voll ausgenutzt. In diesem Artikel will ich zeigen, wie man Schriften am besten in das Projekt einbinden kann.

Ich verstehe nicht, warum auf FontSquirrel ein angeblich fertiges Kit angeboten wird, dass so viel falsch macht. Dabei ist es so einfach, @font-face richtig zu benutzen, wenn man erst einmal weiß, wie. Deshalb habe ich diesen Artikel geschrieben, damit @font-face Neulinge nicht den gleichen Fehler machen, wie ich und bestimmt auch viele andere.

In diesem Artikel geht es um einen Texteffekt, den ich neulich auf einem Plakat für den Film »Chaos« gesehen habe. Der Effekt hat mich dazu inspiriert, ein wenig mit Texturen und Masken zu experimentieren, das Ergebnis möchte ich euch in diesem Artikel zeigen.

Ich als Coder benutze für meine eigene Seite kein Content Management System, weil ich die Seiten viel lieber selbst erstelle. Aber wenn ein Kunde gerne seine Seiten selbst mit Inhalt füllen will, ist ein Content Management System die beste Lösung. Die Frage ist aber, welches CMS man nutzen sollte.

Also frage ich euch: Welche Content Management Systeme werden bei euch verwendet und warum?

Natürlich will ich euch nicht vorenthalten, welche CMS ich liebe und welche nicht!

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.

Viele neuere Browser unterstützen schon viele neue Funktionen, die mit CSS3 eingeführt wurden. Die schönsten und wichtigsten werde ich in diesem Artikel vorstellen und zeigen, wie man sie anwenden kann. Ich hoffe, dass dieser Artikel euch zum experimentieren anregt, denn je mehr mit neuen Technologien experimentiert wird, desto besser werden die Ergebnisse.

Beim Webdesign sind es oft die kleinen Details, die den Unterschied zwischen einem durchschnittlichen Design und einem außergewöhnlichen Design ausmachen. In diesem Artikel gehe ich auf Aufzählungen ein, deren Design leider viel zu oft vergessen oder vernachlässigt wird.

Im Grunde kann es so einfach sein, eine Internetseite mit ein wenig Arbeit an den Aufzählungen zu verbessern. Vielleicht werden solche Details nicht jedem Nutzer auffallen, aber wie schon gesagt, sind Details für ein Design sehr wichtig und können es verbessern.

Usability gehört zu den wichtigsten Kriterien für gutes Webdesign. Egal wie toll eine Internetseite aussieht, wenn der Benutzer die Navigation nicht versteht oder es nicht schafft, seine Bestellung abzuschicken, hat die Seite ihren Zweck verfehlt.

Mithilfe von JavaScript lassen sich viele Aufgaben für den Nutzer drastisch vereinfachen. In diesem Artikel geht es darum, wie man mit jQuery UI intuitive und einfach zu bedienende Benutzeroberflächen schaffen kann.

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.

Den kompletten Artikel findet Ihr hier, dort könnt ihr auch Kommentare hinterlassen. Viel Spaß beim Lesen!

Bei meiner Arbeit als Webentwickler und Webdesigner habe ich einige Tools und Webanwendungen, die mir die Arbeit etwas erleichtern. Ich habe diese im Laufe der Zeit zusammen getragen, getestet und die Besten ausgewählt. In diesem Artikel möchte ich eine handvoll dieser Webanwendungen und welche Rolle sie in der Entstehung einer Webseite haben, vorstellen.

Das Ende naht - zumindest des Jahres. 2,08 Tage sind alles, was noch übrig ist von 2010. Silvester steht also vor der Tür, das nehme ich zum Anlass, um die meistgelesenen Artikel des Jahres zu präsentieren.

Hier kommen sie also, die »Top 5« für 2010.

Es gibt viele verschiedene Möglichkeiten, um seine Referenzen zu präsentieren. In diesem Fall wollte ich auf der Startseite drei zufällig ausgewählte Bilder eines zufällig ausgewählten Klienten zeigen. Meiner Meinung nach wird der Besucher der Seite nicht so sehr mit Eindrücken überhäuft, als wenn alle Referenzen auf einmal gezeigt würden. Außerdem können gleichzeitig mehrere Aspekte eines Projektes hervorgehoben werden.

Ich verwende diese Technik, um auf der Seite Weevo.de die Referenzen anzuzeigen. Um die zufällige Darstellung von Referenzen wie dort gezeigt zu realisieren, brauchte ich nur ein wenig PHP zur Auswahl der Bilder und CSS zur Darstellung.

jQuery hat das Leben vieler Web Entwickler drastisch vereinfacht. Das JavaScript-Framework bietet die wichtigsten Funktionen für eine gute Benutzeroberfläche.

In diesem Artikel möchte ich euch die Umsetzung von Drag & Drop anhand eines einfachen Beispiels verdeutlichen.

Ich habe mich schon oft gefragt, wie der optimale Workflow für einen Webdesigner aussieht. Sollte man sofort Photoshop öffnen und einfach das Layout erstellen oder macht man sich vorher besser einen Plan? Für mich war das immer eine schwierige Frage.

Allerdings habe ich begriffen, dass es im Grunde ganz egal ist, wie man anfängt und wie man vorgeht. Hauptsache ist, man kommt auf eine Weise zum Ziel, die einem selbst gefällt.

Aber wie sieht mein Workflow eigentlich aus?

Mit @font-face kann man einfach neue Schriftarten in eine Internetseite einbinden. Es würde mich interessieren, wo ihr nach Schriften sucht.

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. Mit diesem Plugin ist es ganz einfach, Quellcode anzuzeigen. Und das Plugin kümmert sich sogar um Farben für verschiedene Befehle.

Bei vielen Foren gibt es über dem Textfeld, in dem man einen Beitrag verfasst, eine Buttonbar, mit der automatisch BBCodes in den Text eingefügt werden können. Ich habe lange gesucht, wie man so etwas am Besten machen kann. Und bis vor kurzem war das Beste, was ging, den Code an das Ende des Textfeldes zu hängen. Sehr unpraktisch! Ich wollte eigentlich, dass sich zum Beispiel der BBCode [b] direkt um den Text legt, der in dem Textfeld ausgewählt ist. Aber das schien unmöglich.

Doch das Wunderwerkzeug jQuery lieferte mir, wie immer, alle Werkzeuge an die Hand, die ich dafür brauchte. Ich stieß per Zufall auf das Plugin jCaret. Was macht dieses Plugin? Im Grunde kann man, einfach gesagt, die Auswahlposition in einem Textfeld auslesen. Naja, jCaret kann noch ein bisschen mehr, aber dies war für mich das Wichtigste.

Neulich habe ich mir den Film »8 Blickwinkel« angesehen. Ich war auf den Film nur wegen des Covers gestoßen und beschloss, den Effekt nach zu bauen. In diesem Tutorial möchte ich euch einen Einblick in das Vorgehen verschaffen.

Die Suchergebnisse einer Suche schon beim Eintippen des Suchbegriffes anzeigen? Das kann nur Google? Falsch!

Ich zeige euch heute, wie ihr eine solche Suchvorschau nachbauen könnt. Dazu braucht ihr nur jQuery und ein bisschen PHP. Natürlich wären ein paar Daten, die Durchsucht werden sollten, von Vorteil. Aber auch die sind nicht nötig, ich habe meine auch extra für dieses Tutorial angelegt.

Kürzlich stand ich vor der Aufgabe, ein Nachrichtenformular zu programmieren. Mir stellte sich die Frage, wie man den Nutzer möglichst komfortabel einen Nutzernamen als Empfänger auszuwählen.

Zuerst schien es mir am sinnvollsten, eine einfache Dropdown-Liste mit allen Nutzern anzuzeigen. Dies klappte zunächst ganz gut, allerdings wurde es immer langwieriger, einen Empfänger auszuwählen, je mehr Nutzer sich registrierten. Also entschied ich mich, ein Textfeld mit Auto-Vervollständigung zu erstellen.

In diesem Artikel erfahrt ihr, wie ihr ein solches Feld mit jQuery erstellt und wie ihr die Eingaben später auswertet.

Der Funktionsumfang von Photoshop beinhaltet seit der CreativeSuite 3 auch einige 3D-Funktionen. Diese können für einige interessante Effekte verwendet werden. Die Tipps und Tricks in diesem Artikel sollen ein paar dieser Effekte beschreiben, vor allem aber zum Experimentieren anregen.

In diesem Beitrag erstelle ich einen einfachen und schnellen Facetteneffekt, den man zum Beispiel für einen interessanten Hintergrund verwenden kann, in Photoshop.

Heute möchte ich euch zeigen, wie ihr ein Poster für den Film "Twilight - New Moon" erstellen könnt. Ich wünsche viel Spaß beim Durchlesen.

Texturen sind wichtige Elemente im Designprozess. Sie geben dem Werk den letzten Schliff oder geben der Arbeit ein  Richtung. Aber egal, an welcher Stelle und zu welchem Zweck eine Textur eingesetzt werden soll, stellt sich die Frage: Woher nehmen, wenn nicht stehlen?

Es gibt mittlerweile eine Vielzahl an Image-Stock Seiten, auf denen man sich Bilder herunterladen kann, mal kostenlos, mal gegen Bezahlung. Aber ich persönlich finde eine eigene kleine Texturen-Sammlung wesentlich besser. Man ist nicht auf Werke anderer angewiesen und kann in die Sammlung nur Texturen aufnehmen, die einem wirklich gefallen. Dies beschleunigt meiner Meinung nach die Suche nach einer geeigneten Textur erheblich.

Ich mache gerade Urlaub auf dem Land und möchte euch ein paar Fotos präsentieren. Vielleicht können sie euch ja Inspirieren. Ihr könnt die Fotos gerne verwenden, auf Anfrage sende ich euch eine hochauflösende Version.

In diesem Tutorial möchte ich euch zeigen, wie man einen Splash-Effekt für Texte oder ähnliches erstellt. Man kann mit wenig Aufwand zu einem überraschend guten Ergebnis kommen.

Es gibt Sicherheitslücken, mit denen hält man Hackern die Tür geradezu sperrangelweit auf. Ich möchte hier die fünf Sicherheitslücken aufgreifen, die am häufigsten vorhanden sind.

Jeder, der ein Gästebuch, ein Forum oder sonst eine Webanwendung programmiert, in der Nutzereingaben gespeichert werden oder Traffic verursacht wird, muss sich darüber im Klaren sein, dass diese Nutzereingaben auch von Spambots generiert werden können. Ich habe es einmal erlebt, das ein Spambot über Nacht in einem von mir programmierten Forum hunderte neuer Benutzer mit Spamnamen anlegte.

So etwas ist nicht nur ärgerlich und viel Arbeit für den Administrator, das kann auch teuer werden! Denn jeder Aufruf der Seite erzeugt Traffic, und wenn ein Bot mal eben 1000 Aufrufe sendet, kommt eine Menge Traffic zusammen.

Doch was kann man bitte dagegen tun?

Nicht jeder Browser stellt eine Seite korrekt da. Deshalb sollte man die Seite in möglichst vielen Browsern testen.

Das ist ein Problem, mit dem ich jedes mal kämpfe. Firefox und der IE sind ja eine Sache, die hat man als Firefoxuser sowieso installiert. Aber wie steht es mit dem ganzen Rest?

Natürlich, man könnte sich einfach(?) alle anderen Browser auch noch installieren. Aber was ist mit Browsern, die auf dem eigenen System nicht laufen? Was ist mit Browsern, die nur auf einem Mac bzw. nur unter Windows laufen? Und was, wenn jemand mit einer veralteten Browserversion sich die Seite anschauen will.