Kategorie: Open Web

Hier geht es um Webdesign, Microformats, (X)HTML und CSS, Web2.0, usw.

  • So, ich hatte jetzt genug Zeit die zwei Plugins für den Firefox zu testen…

    Tails Plugin

    Tails Firefox Extension von Calvin Yu war mein erstes Plugin. Es unterstützt eine Menge Formate, wie z.B. hCard, hCalendar, hReview, hAtom, xFolk, hResume und geo ist aber von der Handhabung eher bedürftig. Tails zeigt zwar alle Formate schön an, nimmt aber eine ganze menge Platz ein, da es als Layer über der Webseite liegt…

    Operator von Michael Kaply ist eine Firefox Toolbar und somit wesentlich übersichtlicher. Das schöne an dieser Toolbar ist, dass man die gefundenen Formate gleich exportieren (z.B. hCard als vCard) oder die gefundenen Tags bei z.B. Technorati oder Flickr suchen kann. Leider unterstützt das Plugin nur hCard, hCalendar, GEO, hReviews und Tags.

    Eine detaillierte Beschreibung und Screenshots findet ihr bei Pixelsebi

    Fazit: Beide Plugins haben ihre Vor- und Nachteile… Tails ist zu wuchtig, zeigt aber mehr Formate an wie Operator, Operator bietet dagegen die Möglichkeiten zu suchen und zu exportieren.

    Meiner Meinung nach ist es am Sinnvollsten beide Plugins zu verwenden bis eines der Beiden einen wesentlichen Vorteil bietet… Trotzdem viel Spaß beim ausprobieren.

    Keine Kommentare

  • Da mir die neuen XFN Icons von Wolfgang Bartelme und Chris Messina recht gut gefallen, hab ich sie mal in mein CSS eingebaut. Das schwierige daran war, kombinationen von XFN Beziehungen mit CSS abzubilden. Ein Beispiel:

    <a href="https://notiz.blog" rel="friend met colleague">...</a>Code-Sprache: HTML, XML (xml)

    Deshalb hab ich für mich die Hierarchie festgelegt:

    • me
    • professional: co-worker, colleague
    • friendship (at most one): friend, acquaintance, contact
    • romantic: muse crush date sweetheart

    Das heißt im Klartext: Wenn ich einen rel-tag wie z.B. rel="friend met colleague" wird nur friend und met berücksichtigt weil das für mich höherwertig is. Wenn ihr ne andere Reihenfolge wollt, könnt ihr das ganze einfach in der CSS Datei umstellen (das Wichtigste unten).

    Ich habe das ganze mit den in CSS 2.1 definierten Selectors realisiert und mit Firefox 2.0 und IE7 getestet.

    Beispiel CSS Code:

    a:hover[rel~="me"] {
  background: url(images/xfn-me.png) no-repeat right; padding-right: 25px;
}

a:hover[rel~="co-worker"], a:hover[rel~="colleague"] {
  background: url(images/xfn-colleague.png) no-repeat right; padding-right: 25px;
}

a:hover[rel~="co-worker"][rel~="met"], a:hover[rel~="colleague"][rel~="met"] {
  background: url(images/xfn-colleague.png) no-repeat right; padding-right: 25px;
}Code-Sprache: CSS (css)

    Komplette CSS Datei runterladen

    Beispiele: ME, FRIEND COLLEAGUE, COLLEAGUE, COLLEAGUE MET, FRIEND MUSE, FRIEND MUSE MET.

    Würde mich sehr über Kommentare und Anregungen freuen…

    2 Kommentare

  • Wer braucht schon das blöde www vor der URL, sieht doch ohne viel schöner aus…
    Das ganze hat aber auch noch einen wirtschaftlichen Aspekt (SEO). Um einen guten Pagerank bei Google zu erreichen sollte man nur unter einer URL gelistet (Canonical URL Problem) sein (z.B. https://notiz.blog und http://www.notiz.blog).

    Google empfielt einen 301 Redirect einzurichten, hierzu 2 Vorschläge:

    HTACCESS 

    RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.domain\.com$ [NC]
RewriteRule ^(.*)$ http://domain.com/$1 [R=301,L]Code-Sprache: JavaScript (javascript)

    Mehr Infos auf no-www.org

    PHP 

    <?php
Header( "HTTP/1.1 301 Moved Permanently" );
Header( "Location: http://www.domain.de" );
?>Code-Sprache: HTML, XML (xml)

    Wer WordPress benutzt und zu faul das ganze selber zu machen, der sollte das no-www Plugin von Matt einsetzen.

    Keine Kommentare

  • Wer zu faul ist seine Blog-Posts im richtigen Microformat zu formatieren oder es in sein Theme zu implementieren, der bekommt hier ein paar Erleichterungen.

    Plugins

    hReview WordPress Plugin ist ein simples Plugin um hReviews in normalen Einträgen zu erstellen. Nach dem aktivieren erscheint in „Write Posts“ ein neuer Butten über dem Textfeld. Also zuerst den normalen Text schreiben, dann hReview Knopf drücken Formular ausfüllen und ab damit. Andrew E. Scott hatte gerne Rückmeldung ob alles sauber funktioniert, also macht ihm doch den gefallen.

    WP Microformatted Blogroll 0.2 lässt euch Linklisten (Blogrollen), gekennzeichnet durch XOXO, hCard und XFN erstellen.

    MicroID Plugin for WordPress Von MicroID hatte ich bisher noch nicht gehört, aber es ist ziemlich simpel. Es erstellt einen Hash-Wert aus der E-Mail Adresse und der eigenen URL, welchen man zur Identifizierung verwenden kann. Also im Prinzip so ähnlich wie die Gravatare. Meiner z.B. ist 9198c94d942fa09454fa84b2ce447362d70abc1a. Das Plugin, schreibt diesen Wert in die Metatags von WordPress

    <meta name="microid" content="9198c94d942fa09454fa84b2ce447362d70abc1a" />Code-Sprache: HTML, XML (xml)

    zum Kennzeichnen des Blogs oder von Autoren eines einzelnen Eintrags.

    Und zu GEO-Informationen gibt es ne ganze Menge Plugins.

    Themes

    Folgende Themes unterstützen hAtom:

    Das K2 Theme von Michael Heilemann zeigt die Autoren aller Einträge im hCard Format an und das Datum in Form der abbr-design-pattern.

    Oder für die, die ihre Microformats mit einem StyleSheet selbst formatieren wollen gibt es unter mindgarden.de ein schönes CSS Template.

    Abschließend noch: Die Technorati Microformats-Suche funktioniert mittlerweile einwandfrei.

    Keine Kommentare

  • microformats.jpg

    Nachdem ich mich die letzte Zeit etwas mehr mit Microformats beschäftigt habe, ist mir aufgefallen wie weit verbreitet das ganze schon ist. Die einfachste Methode um zu testen auf welcher Seite sich solche Formate befinden, ist die Test-Suche von Technorati, welche aber noch nicht ganz so einwandfrei funktioniert.

    Benutzt man z.B. www.notiz.blog erhält man Ergebniss, lässt man dass „www“ weg, ist die Suche ergebnislos. Bei diesem Versuch habe ich entdeckt dass das WordPress Theme „K2„, welches ich benutze, die Autoren im hCard Format angiebt und das Datum in Form der Abbr design pattern.

    Aber auch große Firmen wie Apple und Yahoo benutzen solche für Formate wie man in der Folgenden Liste sieht:

    Komplette Liste unter http://microformats.org/wiki/implementations

    Man sieht es steckt ne menge Potential dahinter und was die ganz Großen benutzen kann ja nicht falsch sein 😉

    Keine Kommentare

  • microformats.jpg

    Wenn man in letzter Zeit durchs Internet surft, stolpert man immer häufiger über den Begriff „Microformats“ oder sieht das grüne Symbol auf Kontaktseiten. Aber was genau sind Microformats und für was sind sie gut?

    Wikipedia meint dazu:

    Ein Mikroformat ist ein Markup-Format zur semantischen Annotation von HTML oder XHTML. Mikroformat-Annotationen können leicht aus Webseiten extrahiert werden und machen weiteren Programmen (etwa Suchmaschinen) die Bedeutung des Seiteninhalts verständlich.

    Das heißt, es werden vorhantenen Attributen (class, rel, rev) von (X)HTML verwendet um neue Formate zu speziellen Themen- oder Wissensgebieten zu erstellen.

    (mehr …)
    2 Kommentare

  • HowTo get a linklog like Kottkes remaindered links or something like the asides hack from Matt using wordpress, the K2 theme and some CSS.

    First of all you have to create a category you want to use, for example „linkdump“, then create your own custom style (K2 page structure).

    Add the following code to your custom css…

    CSS code to hide the title (header), the noteworthy-link and the entry meta:

    .category-linkdump .entry-title, .category-linkdump .noteworthyLink, .category-linkdump .entry-meta {
    display: none;
}Code-Sprache: CSS (css)

    Example code to format the new linkdump category:

    .category-linkdump .entry-content a, .category-linkdump .entry-content a:hover {
    border-bottom: 1px dotted #CCC; text-decoration: none !important;
}Code-Sprache: CSS (css)
    .category-linkdump .entry-content {
    /*background-color: #F8F8F8;*/
    border-top: 1px dotted #CCC;
    border-bottom: 1px dotted #CCC;
    padding: 15px; font-size: 10px;
}Code-Sprache: CSS (css)

    Demo: https://notiz.blog/category/links/

    If you want to use your del.icio.us account for the linkdump/linklog try „Yet Another Weekly del.icio.us„

    2 Kommentare

  • Irgendwie ist der original Code von YouTube zum Einbinden von Videos nicht XHTML konform, aber mit dem folgenden Code den ich bei wildbits.de gefunden habe sollte es funktionieren.

    <object type="application/x-shockwave-flash" 
  style="width:425px; height:350px" 
  data="http://www.youtube.com/v/DEINE_VIDEO_ID">
    <param name="movie" 
    value="http://www.youtube.com/v/DEINE_VIDEO_ID">
    </param>
</object>Code-Sprache: HTML, XML (xml)

    Als OnlineMedien Student muß man einfach valide Seiten erstellen 🙂

    1 Kommentar

  • opml-icon-128x128.png

    Wie beim RSS Icon (feed-icon-14x14.png) versucht man sich jetzt auch bei dem OPML Icon auf einen Standard zu einigen.

    Der Aufruf ein solches Icon zu entwickeln kam von Dave Winer auf OPML.org.

    Einer der Vorschläge ist auf der Seite des OPML Icon Project zu finden (inspiriert von Feed Icons), ich bin mal gespannt ob es sich letztendlich auch durchsetzt, es passt auf alle fälle gut zum Feed-Icon 😉

    Keine Kommentare

  • So, ich hab mal wieder bissle an dem Theme gebastelt, ich hoffe es wird langsam fertig, wenn ihr noch neue Ideen habt, schreibt mir…

    Neues:

    • FAMFAMFAM Silk Icons… Danke an die Macher vom K2 Theme für die Idee
    • Schrift von „Georgia“ in „Trebuchet MS“ geändert
    • Und noch ne ganze Menge am Aufbau
    1 Kommentar