kulturbanause® blog » HTML

Schnellerer PNG-, JPG- und Base64-Export aus Photoshop – Enigma64

Jonas Hellwig — Sat, 16 Mar 2013 12:05:25 +0000

Moderne Websites nutzen unterschiedliche Lösungen um grafische Elemente darzustellen. Neben klassischen Bildformaten wie JPG und PNG werden auch Grafiken auf Basis von CSS3-Code und Base64-Code immer populärer. Welche Variante sich am ehesten anbietet muss je nach Motiv entschieden werden.
Im heutigen Workflow arbeiten wir parallel an Design und Code einer Website und springen regelmäßig zwischen Photoshop und Code-Editor hin und her. Mit Enigma64 haben die Macher von CSS Hat nun ein weiteres Photoshop-Plugin veröffentlicht, dass unsere Arbeit spürbar beschleunigt. Ich habe eine Lizenz zur Verfügung gestellt bekommen und möchte euch das Tool gerne vorstellen.

Was macht Enigma64?

Enigma64 exportiert einzelne Ebenen, Auswahlen oder ganze Dokumente mit nur einem Klick nach JPG, PNG und Base64. Zunächst werden der Pfad und die Kompressionsstufe angegeben, anschließend lassen sich die grafischen Elemente der Website viel schneller speichern als das bisher der Fall war. In Kombination mit CSS Hat stehen in Photoshop somit alle Export-Möglichkeiten zur Verfügung, die wir heute für die Web-Entwicklung brauchen:

JPG – Enigma64
PNG – Enigma64
Base64-Code – Enigma64
CSS3-Code – CSS Hat

Enigma64 Icon und Logo

PNG und JPG-Grafiken exportieren

Um Grafiken zu exportieren sind nur wenige Punkte zu beachten. Zunächst müsst ihr mit dem großen Button ganz oben bestimmen, dass Grafiken exportiert werden sollen. In den Einstellungen könnt ihr festlegen in welcher Kompression die JPG-Grafiken gespeichert werden sollen und ob es sich um progressive JPGs handeln soll.

Das Bedienfeld von Enigma64 nach erfolgreichem Export ins PNG-Format

Darüber hinaus könnt ihr bestimmen wohin die Grafiken gespeichert werden, und ob ihr den Namen der Ebene als Dateinamen verwenden wollt. Wenn ihr einen individuellen Dateinamen vergeben wollt, aktiviert einfach die entsprechende Checkbox. Ein Haken bei „Trim“ beschneidet die Grafik, sollte die Ebene kleiner sein als der ausgewählte Bereich.

Die Einstellungen von Enigma64

Nun müsst ihr nur noch bestimmen ob ihr PNG- oder JPG-Grafiken erstellen wollt. Anschließend klickt ihr auf „Visible Canvas“ um die gesamte Bühne zu exportieren. Ihr könnt alternativ auch einfach eine oder mehrere Ebenen auswählen und über „Selected layers“ exportieren. In diesem Fall werden jedoch nicht mehrere Dateien erstellt, sondern ein Dokument mit dem sichtbaren Inhalt aller markierten Ebenen.
Wenn ihr lieber mit einer Auswahl arbeitet, markiert zunächst einen Bereich und klickt anschließend auf „Selection“. Hierbei wird der sichtbare Inhalt der Auswahl durch alle Ebenen hinweg kopiert.

Base64-Code exportieren

Wenn ihr Base64-Code exportieren wollt, müsst ihr den Bereich zunächst ganz oben aktivieren. Wählt aus welches Dateiformat (PNG, JPG) als Grundlage für den Base64-Code dienen soll, anschließend reicht ein Klick auf einen der Export-Buttons und der Code befindet sich in der Zwischenablage. ~~Etwas verwirrend ist hier, dass ganz unten noch Optionen für den Bildexport angezeigt werden.~~ Wurde in Version 1.1.0 behoben.

Die Vorteile von Base64 habe ich in meinem Artikel „Grafiken mit Data URIs (Base 64) erzeugen“ ausführlich erklärt.

Base64-Export mit Enigma64

Enigma 1.1.0

Enigma ist in Version 1.1.0 erschienen. Neben einigen Fehlerkorrekturen ist die wohl wichtigste Verbesserung der Export nach PNG8. In den Optionen kann zwischen PNG24 und PNG8 gewechselt werden. Alternativ reicht ein Klick auf die PNG-Schaltfläche um zwischen den beiden Varianten von PNG zu wechseln.

PNG8- und PNG24-Export in Enigma24

Videos zu Enigma64

Links / Quellen:

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Grafiken mit Data URIs (Base 64) erzeugen

Jonas Hellwig — Mon, 04 Mar 2013 09:56:49 +0000

Data URIs sind komplexe Zeichenfolgen (Base 64 Code) mit deren Hilfe sich u.a. Grafiken erstellen lassen. Der erzeugte Code kann mit CSS als Hintergrundgrafik oder als HTML-Tag eingefügt werden. Im Gegensatz zu Pixelgrafiken muss keine externe Datei eingebunden werden. Im Gegensatz zu Grafiken auf Basis von CSS3 sind mit Data URIs auch komplexe Darstellungen möglich.

CSS-Hintergrundgestaltung mit Data URI

Der Base64-Code wird in CSS wie folgt verwendet. Wie bei der Arbeit mit Pixelbildern wird der Code als background eingefügt und kann auch gekachelt werden.

.selector {
   background:url( /* Base64-Code */ ) repeat;
}

Das folgende Beispiel zeigt die Hintergrundgestaltung einer Website auf Grundlage einer Data URI. Der Code ist bereits bei kleinen Grafiken sehr umfangreich. Ich möchte ihn dennoch zumindest einmal in diesem Artikel vollständig abbilden.

Beispiel anzeigen

body {
	background: white url(data:image/png;base64,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) repeat;
}

HTML-Tags mit Data URI

Ihr könnt auch img-Tags verwenden um Base64-Grafiken einzubinden. Der Syntax sieht dann so aus:

" />

Das folgende Beispiel zeigt die Einbindung als HTML-Tag.

Beispiel anzeigen

Bilder in Data URIs umwandeln

Data URIs sind recht komplex. Der einfachste Weg zu Base64-Bildern führt daher über Hilfsmittel zur Konvertierung. In diesen Online-Tools ladet ihr eine Grafik hoch und erhaltet den entsprechenden Code als Ausgabe. Je größer und komplexer die Grafik ist, desto länger wird auch die Zeichenkette.

Eine Liste an Tools zum Thema Data URI findet ihr hier.

Base64 Pattern online erstellen

Mit Patternify, einem Tool das ich schon vor langer Zeit vorgestellt habe, ist es möglich Endlosmuster online zu erstellen. Diese Endlosmuster können auch als Base 64 Code ausgegeben werden.

Base64-Code mit Patternify erzeugen

Performance als Design-Faktor

Die Performance einer Website ist wichtiger denn je. Mit dem Einsatz von Data URIs spart ihr HTTP-Requests was den Seitenaufbau beschleunigen kann. Man sollte nur darauf achten, dass der sehr umfangreiche Base64-Code nicht inperformanter wird als eine Pixelgrafik.

Photoshop-Plugin für Base64-Export – Enigma64

Enigma64 ist ein kostenpflichtiges Photoshop-Plugin mit dessen Hilfe ihr u.a. auch Base64-Code aus Photoshop exportieren könnt. Darüber hinaus beschleunigt das Tool den Webdesign-Wrokflow erheblich. Einen ausführlichen Artikel zu Enigma findet ihr hier.

Base64-Export mit Enigma64

Quellen / Links

Photoshop-Plugin Enigma64
Browser-Support von Data URIs – Can I Use
Data URIs – CSS Tricks

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Die neue Quelle für Webentwickler – WebPlatform.org

Jonas Hellwig — Wed, 10 Oct 2012 06:49:23 +0000

Mit der Website webplatform.org wurde eine neue Anlaufstelle für Webworker geschafften. Angefangen bei den Klassikern HTML5 und CSS3 über thematische Schwerpunkte wie Animationen, Media Queries und Medienformate deckt das Projekt diverse Bereiche der modernen Webentwicklung ab. Die Community steht dabei ganz klar im Mittelpunkt. Die Inhalte werden in Form eines Blogs, diverser Foren, Tutorials und Frage/Antwort-Seiten vermittelt und von der Community ergänzt. Unterstützt wird das Projekt von den ganz Großen der Szene: Adobe, Facebook, Google, HP, Microsoft, Nokia, Mozilla, Opera und das W3C sind mit von der Partie.

Startseite von webplatform.org

Links zum Thema / Quellen

WebPlatform.org
Gefunden auf Matthias Schütz Blog
One small Step - erster Blog-Post auf WebPlatform.org

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Höhe von Facebook iframe-Tabs anpassen

Jonas Hellwig — Fri, 17 Aug 2012 08:08:27 +0000

Aus aktuellem Anlass (und da ich bereits diverse Mails erhalten habe) ein kurzer Hinweis. Um den Scrollbalken in langen Facebook-Tabs zu deaktivieren und die Höhe des Tabs an den Inhalt anzupassen, wird ein kleines JavaScript benötigt. Das bisherige Snippet funktioniert seit einigen Tagen nicht mehr! Ich habe den entsprechenden Beitrag hier im Blog aktualisiert. Ersetzt einfach das alte Snippet mit dem neuen Code und tragt eure App-ID und die Höhe des Inhalts ein.

Scrollbalken in Facebook-iFrame-Tabs deaktivieren →

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Syntax Highlighting mit Prism

Jonas Hellwig — Mon, 06 Aug 2012 06:37:12 +0000

Plugins und Scripte zum farbigen Strukturieren von Quellcode gibt es einige. Mit Prism ist ein weiteres Script erschienen, das im Vergleich zu den anderen mir bekannten Methoden einige Vorteile bietet. Ihr müsst beispielsweise keinen für das Plugin angepassten Quellcode verwenden, sondern werdet vielmehr gezwungen semantisch korrektes HTML5-Markup zu schreiben. Das Script lässt sich darüber hinaus kinderleicht anpassen, kommt in drei Designs daher und ist gerade einmal 1.5KB groß.

Wenn Ihr Prism verwenden möchtet müsst ihr lediglich das JavaScript- und das CSS-File im head einbinden. Anschließend definiert ihr die Sprache des jeweiligen Code-Snippets über das HTML5-Language-Attribut.

p { color: red }

Screenshot der Prism-Website.

Prism
Introducing Prism – lea.verou.me

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Responsive Images mit ‹figure› oder ‹picture›-Tag: jQuery Picture

Jonas Hellwig — Mon, 02 Jul 2012 09:15:18 +0000

Im Responsive Design ist es zwar möglich identische Inhalte unterschiedlich darzustellen, es ist jedoch nicht ohne weiteres möglich Inhalte auszutauschen. Daher werden auf kleinen Bildschirmen meist viel zu große Bilder geladen die lediglich über CSS auf die Abmessung des Displays skaliert sind.
Im Moment gibt es für dieses Problem keine standardisierte Lösung, nur diverse Scripte die den Bildaustausch übernehmen. jQuery Picture ist ein solches Script. Es lässt sich einfach in die Website integrieren, ist gerade einmal 2KB groß und nutzt entweder das valide

- oder das experimentelle -Element.

Basis-Konfiguration

Zunächst müssen jQuery und das Plugin im Quellcode eingebettet werden, anschließend wird das Plugin initialisiert. Je nachdem ob ihr die

- oder die -Methode verwendet, sieht der Code etwas anders aus. Hier das Beispiel für den validen Ansatz.

$(function(){
    $('figure.responsive').picture();
});

Einbindung über ‹figure›-Tag und Data-Attributes

Wenn ihr Bilder über

einbinden wollt, sieht der Syntax in etwa so aus. Die verschiedenen Bildquellen werden über Data-Attributes angegeben.

Einbindung über ‹picture›-Element

Die Einbindung über sieht etwas anders aus. Hier werden - ähnlich der Einbindung von Videos oder Audiodateien in HTML - die verschiedenen Quellen über das -Element angegeben.

Komfortable Form-Validierung ohne Änderungen am HTML-Code: jQuery Walidate

Jonas Hellwig — Tue, 26 Jun 2012 09:53:27 +0000

Um Website-Formulare auf Fehleingaben zu prüfen existieren unzählige Validierungs-Plugins und Tools. Leider sind viele dieser Tools kompliziert zu implementieren und erfordern zudem Anpassungen am HTML-Quellcode des Formulars.
Wenn das Formular allerdings dynamisch generiert wird oder über ein Plugin erstellt wurde, ist es häufig nicht möglich den HTML-Code anzupassen. Hier eilt das jQuery-Plugin „jQuery Walidate“ zur Hilfe und ermöglicht die Validierung bestehender HTML-Formulare ohne Änderungen am Quellcode vornehmen zu müssen. Neben einer einfachen Integration des Plugins in die Website stehen umfangreiche Funktionen wie individuelle Fehlermeldungen etc. zur Verfügung.

Wie funktioniert jQuery Walidate?

jQuery Walidate lässt sich sehr einfach in jede Website implementieren. Zunächst werden jQuery und das Plugin aufgerufen und ihr müsst festlegen welcher Selektor (hier: das form-Element) als Container für die Validierung dienen soll. Im zweiten Schritt definiert ihr alle Eingabefelder über ihren jeweiligen Selektor. Das war auch schon die unbedingt notwendige Basis-Konfiguration. Wird das Formular nun abgeschickt, prüft das Plugin die festgelegten Felder auf Fehleingaben.

Umfangreiche Anpassungsmöglichkeiten

Das oben gezeigte Beispiel nutzt die Standard-Konfiguration zur Validierung des Formulars. Ihr könnt das Plugin sehr detailliert an eure Bedürfnisse anpassen und beispielsweise eigene Fehlermeldungen ausgeben, Eingaben per Regular Expressions auf Gültigkeit prüfen oder einen Dateianhang zur Bedingung für den Versand des Formulars machen.

Online-Dokumentation des Plugins

Auf der Website des Plugins findet ihr dazu eine umfangreiche und leicht verständliche Dokumentation, sowie eine Live-Demo auf jsFiddle.

Links zum Thema

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Turn.js – Page-Flip-Effekt mit jQuery und HTML5 (und ohne Flash)

Jonas Hellwig — Tue, 20 Mar 2012 08:10:18 +0000

Vor einigen Jahren war der sog. Page-Flip-Effekt sehr populär um mit Hilfe von Flash digitale und realistisch anmutende Bücher zu erstellen. Der Trend flaute in den letzten Jahren zunächst ein wenig ab um dann mit der zunehmenden Verbreitung von Tablets und eBooks wieder an Beliebtheit zu gewinnen.
Und ganz in Sinne moderner Webentwicklung lässt sich der Effekt heute mit jQuery, CSS3 und HTML5 umsetzen.

turn.js einsetzen

Ein großer Vorteil von turn.js ist die einfache Syntax. Nachdem das jQuery-Plugin eingebunden wurde muss lediglich noch eine ID zugewiesen und aufgerufen werden.

Wenn ihr euch für ein Tutorial und eine ansehnliche Demo interessiert, besucht auch das Beispiel auf Tutorialzine.com.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Stylesheets aus HTML-Markup generieren: Bear CSS

Jonas Hellwig — Tue, 14 Feb 2012 08:50:57 +0000

Die meisten Webdesigner werden beim Coding einer Seite ähnlich vorgehen. Sofern nicht direkt ein Template (z.B. Boilerplate) zum Einsatz kommt, schreibt man zunächst das HTML-Markup. Wenn die HTML-Struktur steht, wird die CSS-Datei angelegt und alles über das Stylesheet gestaltet.
Wenn auch ihr Websites nach diesem Muster umsetzt, kann Bear CSS euren Workflow spürbar beschleunigen.

Was macht Bear CSS?

Bear CSS generiert CSS-Dokumente auf Grundlage einer HTML-Struktur. Nachdem Ihr das HTML-Gerüst erstellt habt, ladet ihr die Datei nach Bear CSS hoch und erhaltet als Ergebnis eine CSS-Datei, die alle notwendigen Selektoren bereits beinhaltet.

Wenn Ihr diese Beispiel-Datei verwendet:





Titel der Seite

Erhaltet ihr im Austausch folgendes CSS-Dokument:

html { }

body { }

/*******************************************************************
LAYOUT
*******************************************************************/

div { }

#container { }

header { }

footer { }

article { }

.content { }

Bear CSS

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Welche HTML5-Features kann ich heute schon nutzen? HTML5 please!

Jonas Hellwig — Thu, 26 Jan 2012 18:19:13 +0000

HTML5 und CSS3 bieten uns umfangreiche und spannende neue Funktionen, nur leider ist man sich häufig nicht sicher welcher Browser welchen Befehl wie interpretiert. Vor einiger Zeit habe ich euch bereits das Tool Can I Use vorgestellt, mit dem ihr prüfen könnt ob ein Befehl unterstützt wird und ob ihr Vendor-Prefixes benutzen müsst. HTML Please ist ein weiteres Tool dieser Art. Auch hier gebt ihr einen Befehl ein und erhaltet Informationen über die Einsatzmöglichkeiten. Im Gegensatz zu vielen anderen Diensten findet ihr hier jedoch auch sehr detaillierte Informationen über notwendige Fallbacks, Polyfills oder Prefixes.

HTML5 Please

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Klasse zum hinzufügen wenn JavaScript (jQuery) aktiv ist

Jonas Hellwig — Mon, 16 Jan 2012 07:33:05 +0000

Mit diesem winzigen Snippet könnt ihr dem body-Tag eures HTML-Dokuments eine Klasse zuweisen, sofern JavaScript beim Besucher aktiv ist. Das Prinzip ist denkbar einfach: Wir fügen die entsprechende Klasse per jQuery hinzu. Wenn JavaScript deaktiviert ist, wird folglich auch keine Klasse zugewiesen.

Kopiert das nachfolgende Snippet in den head oder footer eurer Website. Wenn JavaScript aktiv ist, wird dem body die Klasse "js" zugewiesen.
jQuery wird übrigens über Google eingebunden. Wenn das Framework bei euch bereits aktiv ist, könnt ihr die obere Zeile also weglassen.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

E-Mail-Links (mailto) mit Betreff, Kopie (CC), Blindkopie (BCC) und Nachrichteninhalt

Jonas Hellwig — Sat, 07 Jan 2012 18:43:57 +0000

Eine Kontaktmöglichkeit gehört zu jeder guten Website, doch muss es immer gleich ein komplexes Formular sein? Häufig reicht auch der Link auf eine E-Mail-Adresse. Klickt der Besucher diesen Link an, öffnet sich das Standard-Mailprogramm. Und mit ein paar Zeichen mehr, kann sogar der Betreff oder der Nachrichtentext vordefiniert werden. Selbst mehrere Empfänger sind möglich.

E-Mail

Der klassische E-Mail-Link ohne besondere Funktionen.

E-Mail schreiben

E-Mail an mehrere Haupt-Empfänger

Der klassische E-Mail-Link, diesmal wird die Nachricht allerdings an mehrere Adressen versendet.

E-Mail an zwei Personen schreiben

E-Mail mit Betreff

Ein Mail-Link mit vordefinierter Betreff-Zeile.

E-Mail mit Betreff

E-Mail mit sichtbarer Kopie (CC)

E-Mail-Link mit einem sichtbareren Kopie-Empfänger.

E-Mail mit Kopie

E-Mail mit Blindkopie (BCC)

E-Mail mit Blindkopie

E-Mail mit Nachricht

E-Mail-Link mit vorformuliertem Nachrichtentext. Der Inhalt muss codiert angegeben werden.

E-Mail schreiben

Alle Attribute lassen sich auch kombinieren. So kann selbst mit einem simplen mailto-Link eine komfortable E-Mail-Vorlage erstellt werden.

Demo anzeigen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Responsive Webdesign & CSS3 Media Queries

Jonas Hellwig — Wed, 04 Jan 2012 10:12:50 +0000

Das so genannte "Responsive Webdesign" und die CSS3-Technologie "Media Queries" gehören aktuell zu den heißesten Trends der Webentwicklung. Beide Begriffe beschreiben die Möglichkeit das Layout einer Website für mobile Endgeräte wie Smartphones und Tablet-Computer anzupassen. Wenn ihr euch umfassend über mobiles Webdesign informieren wollt, seid ihr hier genau richtig. Auf dieser Seite findet ihr eine inhaltlich aufbereitete und strukturierte Zusammenfassung aller Beiträge die ich zu diesem Thema veröffentlicht habe.

Wenn ihr Fragen zum responsive Webdesign habt die hier nicht geklärt werden können, schreibt mir einfach eine Mail (info@kulturbanause.de) oder nutzt die Kommentarfunktion. Ich werde schnellstmöglich antworten oder einen Beitrag zu diesem Thema veröffentlichen.

Was ist responsive Webdesign?

Unter responsive Webdesign versteht man die optische Anpassung einer Website an verschiedene Ausgabemedien. Moderne Websites werden längst nicht mehr nur für die Bildschirmansicht erstellt - die Darstellung muss auch auf iPad, iPhone und Co. übersichtlich und benutzerfreundlich bleiben. Nun gibt es unterschiedliche Ansätze eine Website für verschiedene Endgeräte zu optimieren. Eine dieser Möglichkeiten ist die CSS3-Technologie Media Queries die lediglich die Darstellung einer Website anpasst, aber die identischen Inhalte nutzt. Der große Vorteil dieser Variante ist, dass alle Versionen auf einen technologischen Kern zugreifen und daher auch nur an einer Stelle gepflegt werden müssen. Das ist einfach und spart Zeit.

Zwei Beispiele für Responsive Webdesign

Es gibt auch andere Lösungen wie native Apps oder "echte" mobile Websites. Diese Lösungen werden meist dann gewählt, wenn die mobile Version gänzlich andere Inhalte bieten soll als die eigentliche Website oder auf die Hardware-Funktionen des Endgeräts (beispielsweise GPS oder die Kamera) zugegriffen werden soll. Beide zuletzt genannten Varianten sind in der Regel eigenständige Projekte die unabhängig von der eigentlichen Website funktionieren, häufig technologisch völlig anders umgesetzt sind und separat gepflegt werden müssen.

Auf dieser Seite wird das Thema responsive Web behandelt. Einen guten Einstieg in die Materie bieten euch die folgenden Beiträge.

Getting started: Media Queries & Responsive Webdesign

Der folgende Artikel erklärt anhand eines in sich abgeschlossenen Mini-Tutorials die Verwendung von Media Queries.

Websites mit CSS3 Media Queries für iPhone, iPad, Android & Co. optimieren

Dieser Artikel ist schon einige Zeit älter, ergänzt das Thema in meinen Augen allerdings trotzdem gut, da ein konkretes Endgerät - in diesem Fall ein iPhone - angesprochen werden soll. Neben der reinen Darstellung werden auch gerätespezifische Eigenschaften (z.B. der Zoom) angesprochen.

Websites für das iPhone erstellen und optimieren

Tools, Frameworks und Hilfsmittel

Es existieren eine Menge Tools um die Arbeit mit mobilen Websites zu vereinfachen. Folgende Tools habe ich bereits vorgestellt.

Häufige Probleme im responsive Design lösen und vermeiden

Sobald ihr die erste mobile Website online gestellt habt, werdet ihr schnell merken, dass bestimmte Inhaltstypen oder Browser besonders gerne Ärger machen. Zu diesem Zweck findet ihr hier ein paar praxisnahe Tipps um auch anspruchsvolle Inhalte und den Internet Explorer "responsive" zu halten.

Inspiration

Zuletzt noch ein wenig Inspiration für eigene Projekte. Der Media-Queries-Showcase zeigt beeindruckende Beispiele aus dem responsive Web.

Media Queries Showcase

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

W3Clove

Jonas Hellwig — Mon, 02 Jan 2012 13:16:16 +0000

Die Markup-Validierung gehört zu den absoluten Standard-Aufgaben bei der formellen Überprüfung einer Website. Sei es nun bei der Fertigstellung eines neuen Webprodukts, bei einer Aktualisierungen oder einfach aus Interesse - validiert wird ständig. Lästig ist allerdings, dass in den gängigen W3C-Validatoren jede URL einzeln überprüft werden muss. Bei umfangreichen oder gar dynamischen Projekten wie Blogs kann der Vorgang daher sehr zeitaufwändig werden. W3Clove überprüft alle Unterseiten einer Website mit nur einem Klick.

Umfangreiche Überprüfung über Domain oder Sitemap.xml

Ihr könnt den Dienst mit der Domain oder der Sitemap.xml eurer Website füttern. Anschließend beginnt W3Clove mit der Arbeit und überprüft der Reihe nach alle Unterseiten. Zuletzt erhaltet ihr einen ausführlichen Report mit allen Seiten und ggf. aufgetretenen Fehlern.

w3clove.com

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

HTML-Elemente per JavaScript (jQuery) ersetzen

Jonas Hellwig — Thu, 01 Dec 2011 09:21:22 +0000

Mit diesem Beitrag möchte ich ein Code-Snippet archivieren das es euch ermöglicht, Website-Inhalte per jQuery durch andere Inhalte zu ersetzen. Hierbei nutze ich drei verschiedene jQuery-Funktionen, die sich je nach Anforderung mehr oder weniger gut anbieten. Habt bitte immer im Hinterkopf, dass Google es grundsätzlich nicht gerne sieht, wenn ihr dem User andere Inhalte anbietet als dem Googlebot; Stichwort Cloaking. Ihr solltet beim Content-Replacement also immer genau prüfen, was der User und was Google sieht.

Demo

Die folgende Demo-Datei zeigt drei unterschiedliche Möglichkeiten HTML-Elemente per JavaScript zu ersetzen.
Mit der jQuery-Funktion .text() wird der Inhalt eines bestimmten HTML-Elements durch einen alternativen Inhalt ersetzt. Mit .load() ersetzt ihr den Inhalt eines HTML-Elements durch den Inhalt einer externen Datei und .replaceWith() ersetzt nicht nur den Inhalt, sondern auch ausgewählte HTML-Elemente.
Ihr Browser unterstützt leider keine iframes.

Demo in neuem Fenster öffnen

Code

Und so sieht der Quellcode der oben gezeigten Demo-Datei aus. Ich habe alle Funktionen per Kommentar direkt im Code erklärt. Ihr könnt die Dateien der Demo auch herunterladen.

Demodateien herunterladen

Beachtet bitte, dass die Funktion .load() in einer lokalen Version u.U. nicht funktioniert.

...


  Inhalte per .text() ersetzen
  Inhalte per .load() ersetzen
  Inhalte per .replaceWith() ersetzen
  Demo neu laden



  Überschrift
  Inhalt




 


...

Wenn ihr euch weiter mit diesem Thema befassen möchtet, empfehle ich euch folgende weiterführende Links zu den hier beschriebenen Funktionen und Themen.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Theme Options Page für WordPress erstellen

Jonas Hellwig — Mon, 14 Nov 2011 08:00:06 +0000

Komplexe und hochwertige WordPress-Themes verfügen in der Regel über eine so genannte "Theme Options Page" - eine zusätzliche Seite im Dashboard anhand der ein Benutzer das Theme über die normalen Möglichkeiten hinaus anpassen kann. Das TwentyEleven-Theme von WordPress wird beispielsweise mit einer solchen Options-Page ausgeliefert. Hier könnt ihr u.a. auswählen ob das Theme schwarz oder weiß sein soll, in welcher Farbe Verlinkungen auf der Website dargestellt werden und ob ihr eine Sidebar anzeigen möchtet.
In diesem Beitrag möchte ich euch zeigen wie ihr selbst eine Theme-Options-Page erstellt. Anhand eines leicht verständlichen Beispiels werdet ihr das Prinzip sicher schnell auf eure eigenen Projekte übertragen können.

WordPress Theme-Options-Pages

Ich möchte einmal kurz zusammenfassen was wir jetzt vorhaben. Wir erstellen eine Theme Options Page für ein beliebiges WordPress-Theme auf der wir zwei Eingabefelder platzieren. Das erste Eingabefeld dient dazu das Copyright-Datum im Footer des Themes anzupassen, in das zweite Feld kann der Benutzer seinen Google Analytics Tracking Code eintragen. Beide Anpassungen sind normalerweise nur möglich indem der Code der Website bearbeitet und anschließend hochgeladen wird.

Theme-Options-Page im 2011-Theme von WordPress

Wir arbeiten mit der functions.php des Themes, mit dem WordPress-Dashboard und mit der footer.php. Zunächst erstellen wir über die functions.php die Options-Seite mit allen Inhalten. Über das Dashboard können dann die Daten eingetragen werden. Die Eingabewerte werden in der Options-Tabelle der Datenbank abgelegt. Im letzten Schritt lesen wir die eingetragenen Werte in der footer.php des Themes wieder aus.

Das klingt kompliziert? Ist es aber nicht. 2x Copy & Paste und alles läuft.

functions.php - Theme Options Page anlegen

Der folgende Code gehört in die functions.php eures Themes. Ich habe euch die einzelnen Bereiche der Datei im Code kommentiert.

/* ------------------ */ /* theme options page */ /* ------------------ */ add_action( 'admin_init', 'theme_options_init' ); add_action( 'admin_menu', 'theme_options_add_page' ); // Einstellungen registrieren (http://codex.wordpress.org/Function_Reference/register_setting) function theme_options_init(){ register_setting( 'kb_options', 'kb_theme_options', 'kb_validate_options' ); } // Seite in der Dashboard-Navigation erstellen function theme_options_add_page() { add_theme_page('Optionen', 'Optionen', 'edit_theme_options', 'theme-optionen', 'kb_theme_options_page' ); // Seitentitel, Titel in der Navi, Berechtigung zum Editieren (http://codex.wordpress.org/Roles_and_Capabilities) , Slug, Funktion } // Optionen-Seite erstellen function kb_theme_options_page() { global $select_options, $radio_options; if ( ! isset( $_REQUEST['settings-updated'] ) ) $_REQUEST['settings-updated'] = false; ?>

Theme-Optionen für

Einstellungen gespeichert!

Copyright
Google Analytics	<?php echo esc_textarea( $options['analytics'] ); ?>

Es besteht natürlich auch die Möglichkeit die Theme-Options-Page in einer eigenen Datei anzulegen und diese dann in die functions.php zu laden. Das macht vor allem dann Sinn, wenn die Options-Seite sehr umfangreich ist. Mit diesem Snippet ladet ihr eine externe Datei in die functions.php. Die Datei muss im gleichen Verzeichnis wie die functions.php abgelegt werden.

require_once ( get_stylesheet_directory() . '/theme-options-page.php' );

Theme-Options-Page im Dashboard

Im WordPress-Backend findet ihr die Theme-Options-Page nun im Bereich "Design".

Tragt in beide Felder nun einen Testinhalt ein und speichert die Änderung. Im letzten Schritt übertragen wir die Eingabe in das entsprechende Template.

footer.php - Eingaben im Template anzeigen

Alles was noch fehlt ist das Snippet um die gespeicherten Daten im Theme auszugeben. Für dieses Beispiel benutzt ihr dazu die footer.php.

Zunächst ruft ihr mit get_options (codex.wordpress.org/Function_Reference/get_option) die entsprechenden Werte aus der Datenbank ab. Anschließend stellt ihr die Inhalte über echo dar.

Das folgende Snippet gibt beide Inhalte direkt untereinander aus.

Das wars auch schon.

Weitere Links zum Thema

Wenn ihr euch eingehender mit der Erstellung von Theme-Options-Pages befassen wollt, schaut euch auch folgende empfehlenswerte Artikel und Tutorials an.

Außerordentlich lohnenswert ist auch diese Basis-Theme-Options-Page. Hier sind alle Arten von Eingabefeldern (Input, Select, Radio, Checkbox etc.) enthalten.

themeshaper.com/2010/06/03/sample-theme-options/

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Multimediatreff 28: Webtechnologien – HTML5, CSS3 & Co

Jonas Hellwig — Fri, 21 Oct 2011 06:50:44 +0000

Am 3. Dezember 2011 findet in Köln der 28. Multimediatreff (MMT) statt. Diesmal dreht sich das Event um die neuen Webstandards HTML5 und CSS3. Insgesamt sind acht vielversprechende Vorträge von Kollegen und Experten der Szene angekündigt. Neben dem sehr fairen Ticketpreis von 49,- Euro gibt es kostenlose Verpflegung.
Ich bin übrigens selbst am 3. Dezember vor Ort und werde die Veranstaltung besuchen. Wenn ihr also Lust auf ein Treffen habt - meldet euch!

Pressemitteilung

Der angehende Webstandard HTML5 ist in aller Munde - doch was lässt sich heute damit ernsthaft umsetzen? Was kann ich in Verbindung mit CSS3 und JavaScript jetzt schon realisieren? Kann ich demnächst auf Flash verzichten? Was kann Adobe Edge? Diese und weitere Fragen werden von den Experten der Szene beim MMT 28 beantwortet - natürlich wieder in entspannter Atmosphäre mit gratis Pizza und Kölsch!

Der 28. Multimediatreff lädt dieses Mal alle Webentwickler und -designer, wie auch Berater und Entscheider ein, sich über die aktuellen Technologien und Möglichkeiten umfassend zu informieren. Dabei spielen die Themen HTML5, CSS3 und JavaScript eine große Rolle. Neben bekannten Experten und Autoren, werden auch Größen, wie Patrick H. Lauke vom Opera-Team und Marco Zehe von der Mozilla Corporation Vorträge zum Thema halten.
Zudem wird Adobe sein neues Animationstool Edge sowie den Status Quo in Sachen Flash Platform vorstellen. Und Microsoft lässt die Teilnehmer ein wenig hinter die Kulissen von Windows 8 schauen und zeigt, wie man mit Visual Studio native Web Apps für Windows entwickelt.

Weitere Infos zur Veranstaltung und der Anmeldung finden Sie unter: http://multimediatreff.de/naechstestreffen.php

Die Teilnehmer zahlen einen Beitrag von 49 € – der Preis versteht sich inklusive Catering. Die Vergangenheit hat gezeigt, dass die Plätze beim Multimediatreff meist schnell vergeben sind - so gilt es sich rechtzeitig anzumelden: http://www.multimediatreff.de/reservieren.php

Über den Multimediatreff

»In entspannter Atmosphäre Fachwissen kommunizieren«, spiegelt in kurzen Worten das Anliegen des Multimediatreffs wieder. Gegründet 1999 in der Hochzeit der Multimedia-Szene veranstaltet der Multimediatreff zu aktuellen Entwicklungen und Technologien der Szene Thementage mit Workshops und Vorträgen von Experten.
Die Aufgabe der Veranstaltung ist es Überblick zu verschaffen und lädt dazu ein über "den Tellerrand hinwegzusehen" – so haben die Veranstaltungen jeweils ein Schwerpunktthema zu dem alle möglichen Lösungsansätze auf objektive Weise angeboten werden. Der Multimediatreff versteht sich zudem als "Non-Commercial-Event" – schlichte Produktwerbung wird den Teilnehmer eines Multimediatreffs nicht geboten.
Zudem funktioniert der Multimediatreff als Kontakt- und Jobbörse für Gleichgesinnte, die alte Bekannte treffen, neue Gesichter kennenlernen möchten oder sich mit Firmen vor Ort treffen um sich näher zu kommen.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Flexible Videos im Responsive Webdesign

Jonas Hellwig — Tue, 27 Sep 2011 18:10:47 +0000

Wenn Ihr eine Website mit Media Queries für mobile Endgeräte optimiert und eingebettete Videos von YouTube, Vimeo und Co. verwendet, werdet ihr recht schnell merken, dass es hier ein Problem gibt. Das Layout passt sich zwar flexibel der Breite des Displays bzw. des Monitors an, das Video reagiert auf die CSS-Angaben jedoch nicht und behält seine feste Größe. In der mobilen Version seht ihr dann entweder ein abgeschnittenes Video oder einen in die Breite gedrückten Inhaltsbereich.
Ich möchte euch zwei Lösungen zeigen die dieses Problem beheben.

Responsive Videos mit jQuery-Plugin: FitVids.js

Die erste Lösung die ich euch vorstellen möchte ist das auf jQuery basierende Script FitVids.js von Chris Coyer und Paravel.

Ladet euch das Download-Paket von GitHub herunter und bindet jQuery und FitVids.js in eure Seite ein. Anschließend müsst ihr nur noch den Container des Videos (z.B. .content) manuell angeben. Den Rest erledigt das Script automatisch, indem es jedes Video mit ein paar umschließende CSS-Containern ausstattet.

Das nachfolgende Demo-Video ist mit der Script-Lösung ausgestattet. Wenn ihr testen möchtet wie sich das Video verhält, ändert die Größe eures Browser-Fensters.

Responsive Videos ohne Plugin: Die manuelle CSS-Lösung

Wer kein Script benutzen möchte kann Videos natürlich auch manuell um das notwendige Markup erweitern. Nick La hat vor einiger Zeit einen Artikel zu diesem Thema verfasst den ich hier gerne aufgreifen möchte.

Zunächst einmal müsst ihr alle Videos im HTML-Quellcode mit einem div-Container umschließen.

Mit folgendem CSS-Code passt ihr das Video in der Breite immer dem umschließenden Container an. Also üblicherweise dem Content.

.responsive-video {
	position: relative;
	padding-bottom: 56%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.responsive-video iframe,  
.responsive-video object,  
.responsive-video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Wenn ihr das Video in der Breite begrenzen möchtet, müsst ihr einen weiteren, umschließenden Container mit fester Breite verwenden.

Ich habe eine simple Demo-Datei erstellt die beide Varianten enthält. Ihr könnt euch die Demo hier anschauen:

Demo anschauen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

HTML5 und CSS3 in der Praxis – welche Features lassen sich heute schon nutzen?

Jonas Hellwig — Wed, 14 Sep 2011 05:42:45 +0000

Wenn ihr HTML5 und CSS3 in aktuellen Projekten einsetzen möchtet, stellt sich häufig folgende Frage: In welchem Browser wird Funktion X oder Eigenschaft Y denn nun eigentlich schon unterstützt? Genau das ist ein Kernproblem bei der Nutzung der modernen Techniken und führt zu einiger Verunsicherung. Damit ihr die zukünftigen Standards ohne Kompatibilitätsprobleme verwenden könnt, solltet ihr unbedingt einen Blick auf die Website "Can I Use" werfen. Über eine Suchmaske könnt ihr nach HTML5-, CSS3- und SVG-Befehlen suchen und erhaltet als Ergebnis eine detaillierte Auflistung über die jeweilige Browser-Kompatibilität. Absolute Praxisempfehlung.

caniuse.com

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Facebook-Problem? Like-Button auch im IE7/IE8 anzeigen

Jonas Hellwig — Thu, 25 Aug 2011 05:58:03 +0000

Im Internet Explorer 7 bzw. im Internet Explorer 8 kann es vorkommen, dass der Like-Button von Facebook (»gefällt mir«-Button) trotz korrekter Einbindung nicht angezeigt wird. Im Internet Explorer 9, sowie in allen anderen gängigen Browsern funktioniert hingegen alles wie gewünscht. Woran liegt das? Und warum tritt dieses Problem nicht bei allen Seiten auf?

Facebook-API im Footer eingebunden?

Eine häufige Ursache ist die Einbindung der Facebook-JavaScript-API im Footer de Website. In den letzten Jahren haben wir eigentlich gelernt, bestimmte Scripte am Ende der Seite einzubinden um den visuellen Seitenaufbau nicht auszubremsen. Der Internet Explorer 7/8 mag das allerdings nicht und zeigt den Facebook-Like-Button nicht an.
Um dieses Problem zu beheben müsst ihr die Facebook-API vor dem Like-Button einbinden.

dieser Code:

Muss also vor diesem Code im Dokument eingebunden werden:

Bitte beachtet, dass beide Snippets je nach Bedarf noch individualisiert werden müssen. Mehr darüber erfahrt ihr hier.

Ob es sinnvoll ist die Scripte aus dem Footer zu entfernen, nur um den »gefällt mir«-Button auch im IE zu sehen muss natürlich jeder für sich selbst entscheiden.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Cutter.js: Textverkürzungen und “Weiterlesen”-Links per JavaScript

Jonas Hellwig — Tue, 16 Aug 2011 13:55:38 +0000

Moderne Websites werden häufig mit Teaser-Bereichen bestückt die einen bestimmten Inhalt mit einigen Zeilen einleiten, und anschließend einen "Weiterlesen"-Link anzeigen über den der Besucher den ungekürzten Inhalt angezeigt bekommt. Bei Blogs sind die Kategorie- und Übersichtsseiten größtenteils nach diesem Prinzip aufgebaut. Aber auch "normale" Websites setzen zunehmend auf dieses Prinzip und realisieren beispielsweise die Startseite oder lange Seiteninhalte über Teaser.
Wer WordPress als Rückgrat einer Website einsetzt, wird eine solche Funktion wohl meistens über die functions.php steuern; für kleine Websites, Portfolios oder andere statische Seiten muss jedoch eine andere Lösung her.

Cutter.js nimmt euch die Arbeit ab und kürzt Texte unter Berücksichtigung der enthaltenen HTML-Tags.

tcorral.github.com/Cutter.js

via tagdocs.de

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Google+ Profilbild in die Google-Suchergebnisse integrieren

Jonas Hellwig — Mon, 15 Aug 2011 06:25:10 +0000

Seit Google+ ins Leben gerufen wurde, integriert Google das Projekt nach und nach in alle bestehenden Dienste. Eine der neuen Integrationsmöglichkeiten ist die Verknüpfung eines Blogs (oder einer Website) sowie eines oder mehrerer Google+ Profile mit der Ergebnisliste von Google. Wenn alles richtig eingestellt wurde, erscheint in der Google-Suche das Profilbild des Autors neben dem entsprechenden Treffer in den Suchergebnissen. Das sieht dann so aus.

Google setzt auf Parameter zur Identifikation

Das Prinzip ist im Grunde genommen sehr einfach. Zunächst müsst ihr von eurer Website oder eurem Blog einen Link auf euer Google+ Profil setzen. Dieser Link wird dann einem Parameter (?rel=author) angereichert um die Beziehung zwischen Website und Google+ zu übertragen. Der entsprechende Link ist dann wie folgt aufgebaut:

Google+

Ein funktionierendes Beispiel für mein Profil sieht so aus:

Google+

Wichtig! Der Link-Text muss unbedingt mit + beginnen oder aufhören! Ein praktisches Tool zur Erzeugung eines Links inkl. G+-Logo bietet Google natürlich auch: google.com/webmasters/profilebutton

Inhalte testen und verifizieren

Sobald ihr die Verlinkung hinzugefügt und hochgeladen habt, solltet ihr einmal testen ob auch alles korrekt eingestellt wurde. Zu diesem Zweck hat Google eine entsprechendes Rich-Snippet-Testing-Tool ins Leben gerufen:

Rich-Snippet-Testing-Tool

Rich Snippet Testing Tool von Google

Wenn das Tool keine Fehler angezeigt, müsst ihr nun eine Verlinkungen von eurem Google+ Profil zu eurer Website bzw. zu einzelnen Beiträgen setzen. Das funktioniert innerhalb von Google+ über "Profil bearbeiten → Links". Damit verifiziert ihr den Content und euer Profil gegenüber Google.

Achtet zudem darauf, dass euer Profilbild ein Foto eurer Person zeigt. Ansonsten wird Google die Integration womöglich verweigern.

Your profile picture must be a photograph of yourself and of high quality in order to be eligible for be shown as a thumbnail in search results.

Als letztes müsst ihr dieses Formular ausfüllen und somit den entsprechenden Antrag bei Google stellen:

Authorship request

Das war's auch schon. Jetzt heißt es abwarten und hoffen, dass Google die Seite in die Suchergebnisse integriert. Ich hatte bisher keinen Erfolg - was aber auch an der Wahl meines Profilbildes oder am Standort Deutschland liegen kann. Wie gewohnt wird Google die Funktion vorerst nur in den USA testen und anschließend ausweiten. Ich werde die Sache auf jeden Fall im Auge behalten.

WordPress-Theme erweitern

Wenn ihr WordPress benutzt und vielleicht sogar mit mehreren Autoren an der Seite arbeitet, müsst ihr das Theme -bzw. die Benutzterprofile innerhalb des WordPress-Backends entsprechend modifizieren.
Es sollte jeder Autor die Möglichkeit haben innerhalb des eigenen Profils den Link zum Google-Profil anzugeben. Dafür muss das Profil erweitert werden. Wie das funktioniert habe ich bereits in einem anderen Artikel ausführlich erklärt:

WordPress-Benutzerprofil um Google+, Facebook, Twitter und andere Felder erweitern

Alternative Methode mit Microformaten

Die oben gezeigte Variante ist die neuere Möglichkeit Google+ in die Suchergebnisse zu integrieren. Eine alternative - jedoch überholte - Methode ist die Integration des rel="author"-Attributs in den Link. Wenn ihr diese Struktur bereits verwendet habt, so braucht ihr euch keine Sorgen zu machen. Laut Google wird auch dieses Format nach wie vor unterstützt.
Mehr Infos dazu findet ihr hier: google.com/support/webmasters/bin/answer.py?answer=1229920

Video

Google hat auch ein ausführliches Video zu diesem Thema veröffentlicht. Besonders schnell zur Sache kommen die Herren allerdings nicht.

Ausführliche Informationen zu diesem Thema findet ihr auch hier:

google.com/support/webmasters/bin/answer.py?answer=1408986

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Google +1-Button lädt jetzt auch asynchron (= schneller)

Jonas Hellwig — Sat, 30 Jul 2011 22:47:16 +0000

Google hat ein Update des +1-Buttons bereitgestellt. In den erweiterten Optionen kann nun festgelegt werden, dass die Scripte des Buttons asynchron geladen werden. Diese Option führt dazu, dass der Google-Button schneller geladen wird und nicht wie bisher den Seitenaufbau spürbar ausbremst.

Ich habe meinen früheren Artikel zur Integration des Buttons entsprechend angepasst. Solltet ihr das Snippet verwenden, so prüft bitte euren Code.

Google veröffentlicht “+1 Buttons” (PlusOne) für Websites

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Normalize statt CSS-Reset

Jonas Hellwig — Tue, 12 Jul 2011 06:27:17 +0000

Webbrowser haben ja bekanntlich die Eigenschaft CSS-Stile unterschiedlich zu rendern. Damit eine Website trotzdem in allen Browsern gleich - oder zumindest sehr ähnlich - aussieht, verwenden wir daher in der Regel einen so genannten CSS-Reset. Das Projekt Normalize.css geht einen etwas anderen Weg und bietet eine solide Ausgangsbasis für Webprojekte.

Was ist der Unterschied zum CSS-Reset?

Ein gewöhnlicher CSS-Reset wird an den Anfang des CSS-Dokuments gesetzt und dient dazu generell alle HTML-Eigenschaften auf Null zu setzen. Somit gelten für alle Browser erstmal die selben Grundvoraussetzungen. Anschließend müssen jedoch sehr viele Eigenschaften erneut vergeben werden, was Zeit kostet und den Quellcode aufbläst.

Normalize.css geht hier einen leicht abgewandelten Weg. Zwar werden ebenfalls diverse Eigenschaften genormt, allerdings werden auch die typischen Bugs verschiedener Browser behoben und so eine sehr geeignete Grundvoraussetzung für die CSS-Datei geschaffen. Normalize.css ist also eher ein Template für neue Projekte, das natürlich den individuellen Anforderungen noch angepasst werden muss. Es wird nicht wie ein CSS-Reset jedes Mal unverändert in den Code übernommen.

Ich selbst arbeite mit einem eigenen Template für meine Projekte. Nichts desto trotz macht es Sinn sich Normalize.css einmal genau anzuschauen und sinnvolle Bestandteile in das eigene Template zu übernehmen.

Live-Demo

Das Projekt wurde auf GitHub veröffentlicht und wird wohl auch regelmäßig aktualisiert bzw. ergänzt.

Ihr findet das Projekt auf

necolas.github.com/normalize.css/

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Scrollbalken in Facebook-iFrame-Tabs deaktivieren

Jonas Hellwig — Wed, 04 May 2011 05:30:26 +0000

Die iframe-Tabs von Facebook haben eine Begrenzung von maximal 800 Pixeln Höhe. Sobald der Inhalt der Seite, die ihr per iframe-Tab integriert, höher als diese 800 Pixel ist, schneidet Facebook den Inhalt ab und bindet einen Scrollbalken ein. Es entsteht also für gewöhnlich eine sehr benutzerunfreundliche Seite mit zwei verschiedenen Scrollbalken: Einem im iframe und einem im Browserfenster.
Mit folgendem Code-Snippet könnt ihr den Scroller entfernen und Facebook zwingen die volle Höhe der Seite anzuzeigen.

Scrollbalken deaktivieren

Alles was ihr benötigt um den Scroller auszublenden, ist folgendes Code-Snippet und die Application-ID eures iframe-Tabs. Die App-ID findet Ihr unter folgender Adresse: facebook.com/developers/apps.php

Kopiert folgendes Snippet in Eure HTML- bzw. PHP- Seite direkt hinter den öffnenden body-Tag:

Vergesst nicht, die App-ID eures Tabs einzutragen und die Höhe anzupassen. Anschließend könnt Ihr die Datei hochladen. Der Scrollbar sollte nun verschwunden sein.

Update:

Facebook hat den Code zur Entfernung von Scrollbalken zum 1. Januar 2012 verändert. Der oben abgebildete Code enthält jedoch bereits die Neuerungen. Details zu diesem Update könnt ihr auf AllFacebook nachlesen.

Update 2:

Facebook hat im August 2012 das Snippet erneut verändert. Das alte Script funktioniert nichtmehr und muss ausgetauscht werden. Das Snippet in diesem Beitrag ist bereits das neue, funktionsfähige Snippet.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.