Zum Inhalt springen

Archiv

Kategorie: Webdesign

Google will uns das Web erklären oder wie Golem.de heute titelte: Google dokumentiert das Web

Google Doctype soll wie Wikipedia funktionieren und Wissen von Web-Entwicklern für andere bereit stellen. Es sind zur Zeit zwar noch nicht viele Artikel online und die Aktion läuft noch als Beta, aber die Idee finde ich gut! Wenn das noch etwas weiter ausgebaut wird, erhält man in Zukunft ein umfassendes Angebot und braucht nicht mehr als eine Seite ansurfen, wenn man mal wieder auf der Suche nach einer Lösung ist. :)

Etwas schade finde ich, dass es wohl erst mal nur englisch bleiben soll. O.K. als Web-Entickler sollte man das zwar können bzw. verstehen, aber schaden kann es IMHO auch nicht, wenn es auch in anderen Sprachen zur Verfügung gestellt werden würde.

PS. sicherlich denken jetzt wieder einige, Google ist eine böse Datenkrake, mit Vorsicht zu behandeln und sammelt so schon wieder Wissen, um somit erneut bzw. noch gezielter die User an sich zu binden. Dem sei aber auch gesagt, die anderen (Yahoo, Microsoft etc.) haben selber Schuld, denn Google war halt mal wieder nur schneller …

Jeder der seine Webseiten bereits etwas länger führt, kennt das Problem, dass einige Links ggf. nicht mehr erreichbar sind, es aber so gut wie nicht auffällt. Ich habe mir daher hier lokal mal webcheck (ehemals linbot) installiert. Dieses kleine Tool klappert jeden Link ab und stellt das Ergebnis gut und übersichtlich in Form einer Webseite dar.

Ubuntu: Die Installation ist ein Kinderspiel, da webcheck in Quellen enthalten ist. Einfach an der Konsole ein “sudo apt-get install webcheck” und es wird alles benötigte installiert.

Der Aufruf von webcheck erfolgt an der Konsole und es dauert je nach Anzahl der Links (hier im Blog sind das inkl. der internen eine extrem große Menge) auch mal etwas länger! Am einfachsten ist es, sich, ein Verzeichnis zu erstellen, aus dem webcheck heraus aufgerufen wird, da alle erstellten Dateien, sofern nichts weiter angegeben wird, dort landen, wo das Programm aufgerufen wurde. Ich handhabe pers. es hier so, dass ich mir für jeden Check ein Unterverzeichnis in “public_html/webcheck” erstelle und kann dann die Seiten bequem auf meinem lokalen Server ansurfen. ;)

webcheck http://DOMAIN

Man kann währenddessen gut zusehen, was das Tool gerade macht …

Firestats: Um die Datenbank nicht unnötig zu füllen, sollte man webcheck in die Botliste übernehmen.

Das Ergebnis ist dann nach Beendigung durch den Aufruf der vom webcheck erstellten “index.html” zu betrachten und man kann sich ans Fixen der erkannten Probleme machen.

Da ich pers. nur validen Source in diesem Blog haben möchte, war ich bisher immer den Umweg gegangen, Filme von YouTube nur mit einem Screenshot zu verlinken, anstatt sie direkt im Blog anzuzeigen. Das funktioniert natürlich einwandfrei, hat aber den dummer Weise den Nachteil, dass ich die Besucher somit von meinem Blog weggeschickt hatte. Also war ein Weg gefragt, wie man Flashvideos valide in WordPress ohne Plugin einbindet.

An sich stört nur der embed Tag, der leider immer noch von Seiten wie YouTube usw. als Codeschnipsel zum Einfügen angeboten wird und der in XHTML nicht erlaubt ist. Ergo muss der weg und das sähe dann hier z.B. so aus:

(ID_YOUTUBE durch die ID von YouTube ersetzen!)

<object
type="application/x-shockwave-flash"
width="425"
height="350"
data="http://www.youtube.com/v/ID_YOUTUBE">
<param
name="movie" value="http://www.youtube.com/v/ID_YOUTUBE">
</object>

Eigentlich sollte das schon reichen und zumindest der aktuelle 7′er iE und 2′er Firefox mit Flashplayer können den jetzt auch wie gewünscht und valide anzeigen. Aber einige Ausnahmen gibt es leider immer und sei es auch nur, dass der User kein Flash installiert hat. Also ist noch eine Alternative gefragt, die z.B. aus einem Textlink oder/und Bild bestehen kann:

<object
type="application/x-shockwave-flash"
width="425"
height="350"
data="http://www.youtube.com/v/ID_YOUTUBE">
<param
name="movie" value="http://www.youtube.com/v/ID_YOUTUBE">
<!-- Alternative -->
</object>

Voila, alle bekommen was zu sehen und der Source ist valide. :)

Wer es sich beim Einstellen von Beiträgen einfach machen möchte, der kann sich z.B. ein Muster mit dem Codeschnipsel in seinem Blog abspeichern, dann geht es mit dem Einfügen von Flashvideos auch ohne Plugins ganz fix.

WordPress: Achtung, wenn ihr den WYSIWYG-Editor verwendet, der bastelte hier gerne mal was dazu, das dort nichts zu suchen hatte!

iKA's Blog in websitesasgraphs

Eben im Beitrag Website als Grafik darstellen auf GreenSmilies das Angebot websitesasgraphs wiederentdeckt und gleich mal auf meine Blogadresse losgelassen.

Ich finde, das Ergebnis sieht richtig hübsch aus. :)

Die Grafik stellt über ein Applet, die verwendeten HTML-Tags eines Weblinks dar. Dabei sollen die Farben natürlich auch eine Bedeutung haben. Z.B. die orangen Punkte sind Umbrüche und Zitate, die grünen sind div-Elemente und die magenta Punkte sind Bilder …

Krulli war kreativ und hat ein Webspace-Stöckchen geschnitzt. Wohl auch etwas aus Eigennutz, um seinem Ärger etwas Luft zu machen, da er selbiges Problem wie ich mit seinem V-Server hat, dass der DNS des Providers ein paar mal am Tag schwächelt und der Server deswegen zeitweise nicht erreichbar ist. Naja, da muss ich mich dann ja wohl auch aufraffen. ;)

weiter lesen…

iTheme Screenshot

iTheme von N.Design Studio ist ein wirklich hübsch gemachtes Theme für WordPress, das nicht nur die Apfel-Fans begeistern könnte und das ich mir mal testweise installiert hatte. Neben der Optik ist die Seitenleiste, die komplett variabel ist, der Hammer. D.h. der Leser kann sich die Gruppen der Sidebar mit der Maus per Drag & Drop von oben nach unten so anordnen, wie er es möchte und der Browser merkt sich die Einstellungen per Cookie.

Probiert die Demo einfach mal aus, es lohnt sich! :)

Wer sich nur ab und zu mit Webdesign beschäftigt, für den ist Ajax wohl mehr ein Modewort, mit dem er so nicht gleich wirklich etwas anzufangen weiß, außer, dass er evtl. mal ein paar fertige Codeschnipsel in seinen Seiten verwendet.

Stefan Münz, bekannt durch SELFHTML, macht sich gerade daran dieses zu ändern. Zu diesem Thema erstellt er zurzeit ein Tutorial im Webkompetenz-Blog.

Der erste Artikel hierzu ist heute erschienen und stellt zwar erst mal nur eine Einleitung dar, die einem aber bereits etwas veranschaulicht, worin die Vorteile dieser gemeinsamen Verwendung der verschiendenen, bekannten Webtechnologien, wie HTML, DOM, JavaScript, XMLHttpRequest usw. zu finden sind. Ich bin schon gespannt, wann der nächste Teil veröffentlicht wird.

Ach ja, nur noch so als Randbemerkung, denn nicht alles was glänzt ist Gold: Ajax ist zwar zur Zeit extrem populär, hat aber durchaus auch einige gravierende Nachteile, die man, bevor man sich anschickt selbiges zu verwenden, unbedingt bedenken sollte! Wer z.B. User mit einer Sehschwäche nicht gleich komplett ausschließen will, wird erneut vor Probleme gestellt. Denn wenn die Ajaxanwendungen den WAI-Regeln entsprechen sollen, müssen oftmals Alternativen angeboten werden, da sonst IMHO viele Lösungen nur für grafische Webbrowser umgesetzt werden, die bei Verwendung eines Screenreaders nicht gerade sinnvoll sind. Ergo, auch diesbezüglich bin ich gespannt, wie weit Stefan Münz auf diese Themen in seinem Tutorial eingehen wird. ;)

Stefan Münz hat in seinem Webkompetenz-Blog ein wirklich sehr lesenswertes und interessantes Tutorial zu Microformaten (Auszeichnungssprachen für Webseiten) in neun Teilen veröffentlicht, das dort auch als PDF-File zu bekommen ist.

Es gibt zwar noch keinen offiziellen Standard für diese Formate, jedoch wird einem in diesem Tutorial die grundsätzliche Funktionsweise von Mikroformaten erklärt und es werden die am häufigsten verwendeten (hCard, hCalendar, hReview und für Hyperlinks) anhand von Beispielen gut und für jeden, der über HTML-Grundkenntnisse verfügt, leicht verständlich angesprochen. Wenn man dann Lust auf mehr bekommt, wird man dank der ebenfalls im Tutorial aufgeführten Links, nicht im Stich gelassen und kann noch weitaus tiefer in die Materie einsteigen.

BTW. ja, ich nutze sie hier auch noch nicht wirklich, aber einiges davon würde auch meinem Blog ganz gut stehen. ;)

Gut 15 Monate nach Veröffentlichung der letzten Version ist gestern SELFHTML in der neuen Version 8.1.2 (IMHO jetzt ohne die Mitarbeit von SelfHTML-Gründer Stefan Münz) released worden. Es sind neben 307 eingearbeiteten Bugtrackermeldungen u.a. Änderungen zum Thema Internet Explorer 7 bzw. aktuellen Browsern, CSS 2.1 und 3 eingeflossen, so dass das beliebte, umfangreiche Referenzwerk wieder recht aktuell sein sollte.

Ach ja, nur mal so am Rande. Gerade die Postanschrift vom Verein SELFHTML e.V. gesehen. Kein Wunder, dass es mir, als langjährigem Kieler, so gut gefällt. ;)

Nein, kein Bug! :) Firebug ist ein nicht ganz neues, aber absolut geniales Add-On für den Firefox und ein einfach zu bedienendes Werkzeug für Webentwickler.

install_firebug.gifFirebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Mit anderen Worten, ein OpenSource Editor mit aktueller Vorschau im Firefox (somit für Windows und Linux verwendbar), der nur einen Tastendruck (F12) entfernt ist und einen aktiv unterstützen kann, sauberen und validen Code in HTML, CSS und Javaskript zu schreiben.