denhartenweg - Webdesign - Usability - Zukunft » Webentwicklung

RSS-Feed Probleme und eine Notlösung

denhartenchris — Sat, 19 Sep 2009 08:47:14 +0000

Bei einigen meiner Blogs nutze ich seit Jahren den Dienst Feedburner, der mittlerweile von Google betrieben wird. Probleme hatte ich bissher nie. Bissher. Kürzlich ist mir aufgefallen, dass mein Feed von digitalkamera-guide.de nicht auf dem neuesten Stand war. Genauer gesagt fehlten die letzten drei veröffentlichten Beiträge.

Ich habe erstmal versucht den Feed neu zu synchronisieren und auch nach mehreren Anläufen gab es immer wieder einen Timeout-Fehler. Auch ein versuch den RSS-Feed mit dem W3C Feed Validator zu prüfen, scheiterte an dem Fehler “Server returned timed out”.

Notlösung

Damit meine Feed-Abonnenten wieder die aktuellsten Beiträge sehen können, habe ich mich entschlossen Feedburner nicht weiter zu nutzen. Zumindest für dieses eine WordPress Blog.

Bei Feedburner findest du die Option “Delete Feed”. Damit löschst du den Feed und die angesammelte Statistik aus der Feedburner Datenbank. Aus Kulanz wird die Feedburner-Feedadresse die ersten 30 Tage auf die ursprüngliche Adresse weitergeleitet. Danach gibt es einen HTTP 404 Error, sollte noch jemand die Feedburner Adresse aufrufen.

Der Feed ist jetzt aktuell, bringt beim Validator aber immer noch den Timeout-Fehler. Woran das liegt muss ich noch herausfinden. Ruft man die URL direkt auf, erscheinen die Inhalte sofort und ohne Verzögerung. Es werden auch nur die letzten 10 Artikel ausgegeben, daran kann es also auch nicht liegen. Hat jemand noch einen Lösungsvorschlag?

Tipp: Du möchtest also Feedburner nicht mehr nutzen, auf eine Statistik aber nicht verzichten? Mit dem Worpdress Plugin FeedStats bekommst du eine Feed Statistik direkt in deinem Worpdress Admin-Bereich. Das Plugin Subscribe2 ermöglicht es schließlich, dass Besucher die neuesten Artikel auch per Email abonnieren können.

HTML und CSS lernen mit dem Buch Little Boxes

denhartenchris — Wed, 15 Jul 2009 20:28:06 +0000

Du möchtest deine erste Homepage bauen aber weißt nicht wie? Du hast schon Erfahrungen mit HTML und CSS aber bleibst immer wieder an schwierigen Stellen stecken? Dann ist das Buch Little Boxes von Peter Müller eindeutig das richtige Buch für dich. Aber auch für erfahrenere Webentwickler bietet dieses Buch Refferenz und Hintergrundwissen.

Die Welt des HTML bzw. XHTML und CSS ist für Neueinsteiger erstmal gar nicht so leicht durchschaubar. Sicher liegt das zu einem Großteil daran, dass nicht alle Lernquellen (Bücher, Webartikel) auf dem Neuesten Stand der Technik sind und teilweise überholtes Wissen verbreiten.

Ganz anders dagegen das Buch Little Boxes von Peter Müller, es erklärt die Grundlagen moderner Webtechnikenund achtet dabei besonders auf die Einhaltung von Webstandards. Jetzt ist das beliebte Buch in der zweiten Auflage erschienen und ich möchte kurz aufzeigen was es zu bieten hat:

Inhalt von Little Boxes 1

Zu Beginn macht der Autor erstmal klar, dass das Web nicht aus Papier besteht. Anschließend erklärt er die Grundlagen von HTML und räumt mit einigen Vorurteilen und Fehlinformationen auf.

Nachdem viel über alle wichtigen HTML-Elemente gesagt wurde, geht es weiter mit den Grundlagen von CSS (ohne das heute keine zeitgemäße Website mehr erstellt werden kann). Gefolgt von ausführlichen Erklärungen und Beispielen zum Aufbau einer CSS-Regel, zur Verwendung von Klassen und Selektoren. Schön ist hier, dass der Autor auch auf die CSS-Strukturierung eingeht und erklärt warum man Ordnung im CSS halten sollte.

Ein weiteres wichtiges Kapitel handelt vom CSS Box-Modell, es bildet die Grundlage um Elemente einer Website zu positionieren und ein Layout ohne HTML-Tabellen erzeugen zu können. Viele Praxistipps gibt es im Kapitel Horizontale Navigation und Kontaktformular, wo der Autor viele Beispiele zu Themen wie Tabbed-Navigation, Rollover-Effekt und der Erstellung eines kompletten Kontaktformulars gibt.

Nun wird es spannend für Fortgeschrittene: Peter Müller erklärt im Kapitel CSS und der Browser: Kaskade, Vererbung oder
Standardwert das DOM (Document Object Model) und die Kaskade. Hier konnte auch ich noch viel nützliches Wissen abgreifen und das obwohl ich schon viele Jahre an Internetseiten arbeite.

Natürlich darf in so einem Buch auch das Floaten und die Erstellung mehrspaltiger Layouts nicht fehlen. Tun sie auch nicht. Zum Schluß gibt es noch fertige Layoutvorlagen und ein Kapitel über Nützliche Werkzeuge.

Extras

In der Neuauflage findest du jetzt auch eine CD mit vielen Beispieldaten aus dem Buch, Ausschnitte aus dem Little Boxes Videotraining und nützliche Tools. Zusätzlich gibt es eine faltbare Einlegekarte mit dem kompletten CSS Box-Model und einer HTML und CSS Kurzrefferenz. Diese Karte ist mein persönliches Highlight am Buch, da ich Sie immer direkt am Arbeitsplatz griffbereit haben kann.

Zweite Auflage von Little Boxes 1

Mehr Informationen zur zweiten Auflage gibt es im Blog zum Buch. Dort findest du auch das komplette Inhaltsverzeichnis und Kapitel 3 zum kostenlosen Probelesen.

Fazit

Little Boxes, Teil 1: Webseiten gestalten mit CSS. Grundlagen, so der komplette Titel, ist und bleibt das deutsche Refferenzwerk für HTML-, CSS- und Webdesigneinsteiger. Denn ohne diese Grundlagen, kann keine moderne Website mehr entstehen. Möchte man über den Anfängerstatus hinaus kommen, ist es unverzichtbar Webstandards zu lernen und zu verstehen. Du solltest dir also die Zeit nehmen, lernen und vor allem viel ausprobieren. Dieses Buch ist der ideale Begleiter dafür.

Weitere Little Boxes Bücher

Außer dem vorgestellten Buch gibt es noch zwei weitere Werke vom gleichen Autor. Das währen einmal Little Boxes Teil 0: Was Sie wissen sollten, bevor Sie eine Website bauen und zum zweiten Little Boxes, Teil 2. Webseiten gestalten mit CSS. Navigation, Inhalte, YAML & mehr. Beide ergänzen das oben besprochene Buch sehr gut und sind gut geeignet für Jeden, der Lust auf mehr bekommen hat und eine richtige, nütliche und informative Website bauen möchte.

Weitere Links zum Thema:

Gedanken über eine bessere Navigation

denhartenchris — Wed, 22 Oct 2008 15:11:16 +0000

Die Navigation einer Webseite sollte so logisch und einfach wie möglich sein. Der Besucher möchte nicht erst darüber nachdenken, worauf er klicken muss um zu finden was er sucht. Er sollte möglichst mit einem Blick den richtigen Link finden.

Auf meiner im April gestarteten Digitalkamera Webseite zum Thema Fotografieren lernen war die Navigation nicht so schlüssig wie ich mir das eigentlich gewünscht hatte.

Die Aufteilung in “Artikel, Themen, Ausrüstung und Ressourcen” war doch ein wenig zu Abstrakt. Dazu kam noch das diese Hauptnavigationspunkte zu extra angelegten Seiten führten, auf denen ich von Hand die besten Artikel sammeln wollte. Eine schlechte Idee.

Viel besser: Die abstrakten Begriffe habe ich rausgeschmissen und statt dessen die Hauptkategorien in die Navigation gesetzt. Dadurch kann sich der Besucher intuitiver durch die Kategorien hangeln anstadt sich zu fragen was sich denn hinter “Themen” verbirgt. Denn wie Nielsen herausgefunden hat, werden Links, deren Ziel unklar ist, einfach nicht geklickt.

Das selbe Navigationsprinzip gibt es auch bei meinem neuen Webprojekt, der Spartippsammlung, zu sehen. Ist man da beispielsweise auf dem Artikel Dinge geregelt kriegen und Zeit sparen, wird im Hauptmenü die zugehörige Kategorie Zeit hervorgehoben.

CSS-Trick: Gepunkteten Rahmen um Links entfernen

denhartenchris — Tue, 21 Oct 2008 14:08:30 +0000

Dieser kleine Tipp hilft dir, den lästigen, gepunkteten Rahmen um Links zu entfernen.

Sicher ist dir der gepunktete Rahmen bereist aufgefallen. Er erscheint genau in dem Moment des Mausklicks und bleibt bei gedrückter Maus so lange sichtbar, bis die Seite gewechselt hat.

Den Effekt kann man bei den Browsern Firefox sowie InternetExplorer beobachten. Mit einem kleinen CSS-Trick kann man diesen Rahmen abschalten:

CSS-Code

a:active, a:focus {outline: none;}

Du musst den CSS-Beispielcode eventuell an deine eigenen Klassen und ID’s anpassen. Er sollte dem störenden Treiben jedenfalls ein Ende bereiten. Aber denke auch daran, das Benutzer die mit Hilfe der Tabulatortaste durch deine Seite browsen, einen anderen optischen Hinweis brauchen, das ein Link im Fokus steht.

CSS-Trick: Vertikal zentrierter Text neben einem Bild

denhartenchris — Fri, 10 Oct 2008 13:59:04 +0000

Wer Webstandards einhalten möchte, verzichtet auf Tabellen als Layoutmittel. Damit verabschiedet man sich aber auch von dem praktischen valign, dass man nur in Tabellenzellen anwenden darf. Es bewirkt, dass sich Text in einer Tabellenzelle vertikal zentriert darstellen lässt.

Um genau das mit CSS zu erreichen muss man einen kleinen Trick anwenden:

Das Bild wird mit float nach rechts oder links gestellt, der direkt darauf folgende Text bekommt eine Zeilenhöhe zugewiesen, die größer als normal ist. Den exakten Wert musst du selber herausfinden, denn je nach Bildgröße variiert dieser. Im Beispiel habe ich eine Zeilenhöhe von 50 Pixeln genommen.

Beispielcode

Dieser Text ist vertikal zentriert


Dieses Beispiel funktioniert nur mit einzeiligem Text. Es gibt auch Lösungen für mehrzeiligen Text, diese erfordern aber deutlich mehr CSS-Code und DIV-Blöcke. Wer das unbedingt braucht, kann sich hier ein Beispiel ansehen.



Verhindern das Firefox den Hintergrund verschachtelter Ebenen falsch darstellt
denhartenchris — Mon, 11 Jun 2007 10:49:22 +0000
Ein kleines HTML / CSS Problem für mehrspaltige Layouts, welches sicher schon uralt ist, mir aber erst gestern begegnete.



Problem:




Defektes Layout bei werbespotsongs.de

Auf meinem grauen Seitenhintergrund befindet sich ein DIV-Bereich (div id="content) mit der Hintergrundfarbe weiß. Dieser Container enthält wiederum zwei DIV-Bereiche, welche nebeneinander stehen und ein zweispaltiges Layout bilden. Beide DIV Elemente sind transparent, denn es soll das weiß das content-DIVs durchscheinen.
Das alles wird im Internet Explorer und Opera korrekt angezeigt, Der Firefox zeigt jedoch für beide transparente Spalte nicht etwa die weiße Farbe des umgebenden Containers, sondern das grau des Bodys an.
Die Lösung:




Zweispalten Layout mit Extra-DIV

In dem umschließenden DIV-Element muss am Ende ein zusätzliches DIV eingesetzt werden. Dieses stellt ausdrücklich den normalen Dokumentfluß, float, wieder her.
Hier ein Beispiel, dass DIV muss aber nicht leer bleiben sondern eignet sich ideal für einen Hinweis oder sogar einen Footer.