ScribeFire - Nahtlose Integration in Firefox 3.0.4

Wer möchte von den HGB-Kursteilnehmern - Gäste sind eingeladen - mal in die Welt der Blogs schnuppern, Beiträge verfassen, strukturieren, “taggen” und veröffentlichen? Unabhängig vom Betriebssystem.

ScribeFire ist eine simple und kostenfreie Lösung, die sich als so genanntes Add-on in Firefox integriert. Prädikat: Easy & Cool. Mit kleineren Kinderkrankheiten …

Für Windows existieren nach meiner Ansicht derzeit zwei brauchbare Blogging Clients, BlogDesk und der Windows Live Writer (Link zum deutschsprachiges Blog mit Download-Link). Da ich aber kürzlich von Windows auf Linux umstiegen bin, fehlte mir nun ein guter Client, denn Blog Clients sind unter Linux eher spärlich und wenn, dann (noch) nicht besonders nutzerfreundlich (QTM, LIVE etc.).

Klein, handlich und im Alltag gut gebräuchlich: BlogDesk für Windows unterstützt mehrere Blogsysteme, u.a. Wordpress. Läuft aber nicht unter WINE mit Linux.

ScribeFire - Bloggen beim Browsen

Bei meinen Recherchen stieß ich auf den plattformunabhängigen Client ScribeFire, ein Add-on für Firefox. Es integriert sich nahtlos in Firefox, kann für Multiblogautoren mehrere Blogs verwalten, Beiträge aus dem Blog nachträglich bearbeiten, löschen u.a.

Ein dickes Plus: ScribeFire beherrscht ein echtes Preview im jeweiligen Blogdesign. Ein Manko: Bilder lassen sich nur durch eine URL-Angabe (in HTML) oder von Flickr in einen Beitrag einfügen.

Die Zugangsdaten zum Webmedia-Lernblog für Scribefire:

Blog-URL: http://lernblog.netzforum.de
Benutzername und Password wie bei der Kursregistrierung hier im Blog.

Das wars schon. Viel Freude beim Bloggen!

Ein sehr schönes und durchdachtes Beispiel für ein wenig CSS in Kombination mit ein wenig Javascript. Ich würde es als optische Verwirrung (nicht als Täuschung) bezeichnen, geniale Idee.

Um sie zu verstehen, den Seitenquelltext anschauen (-> rechte Maustaste -> Quelltext) oder für eine detaillierte Prüfung die HTML-Seite mit CSS und Grafiken auf der lokalen Festplatte speichern, dann die HTML-Seite und die CSS-Datei analysieren - und anschließend mal die fünf Einzelgrafiken ansehen.

Tick Tock - A CSS & JS Experiment

In den vergangenen Kurswochen haben wir uns CSS näher angeschaut und dabei etwas über Selektoren, deren Eigenschaften und Werte gelernt. Am vergangenen Freitag haben wir uns mehr mit CSS-basierten Layouts beschäftigt. Als theoretische Grundlage diente uns wieder der Online-Kurs Selfhtml, Kapitel ‘Stylesheets (CSS)‘, durch den ich als Moderator geführt habe. Zur Erinnerung:

selektor { eigenschaft: wert; }

Hier nun die Zusammenfassung mit Links zu den Fundstellen:

CSS und HTML: Verküpfung, Ausgabemedien, Formate

Wir haben gelernt, wie wir Stile in HTML einbinden und verschiedene Ausgabemedien wie Bildschirm, Drucker (screen, print) unterstützen. Und wie HTML-Elemente direkt in einer HTML-Seite formatiert werden, welche Formate existieren - HTML-Elemente, Autorenklassen und IDs sowie Pseudoelemente und Pseudoklassen - und wie diese Selektoren definiert werden und nach welcher Priorität sie im einzelnen verwendet werden. Und wie wir sie z.B. mit <div> und <span> in der HTML-Seite verwenden, welche Rolle dabei das DIV-Tag als “Container” spielt.

Das “Box-Modell” und der Internet Explorer

Über numerische Angaben und Maßeinheiten bei der Gestaltung für unterschiedliche Medien haben wir gesprochen, dabei gelernt, dass wir für ein Bildschirm-Stylesheet die Schriftgröße zunächst auf 100.01%. Und wenn wir ein unverzerrtes Layout wünschen, dass sich der Schriftgröße anpasst, wir Größenangaben am besten in Relation mit em machen. Mehr dazu im Kapitel “Das Box Modell” von Selfhtml.

Merke [1]: Die Gesamtbreite einer Box (eines Elements) entspricht der Summe von: Breite des Elementinhalts (width), Innenabstand (padding), Rahmenstärke (border-width) und Außenabstand (margin).

Und nebenbei auch gelernt: Der Internet Explorer hält sich nicht immer an Normen und erfordert für seine Nutzer stets eine Sonderbehandlung durch den Webautor. PS: Der IE-Browser ist immer noch weiter verbreitet als Firefox.

Was haben wir alles zu CSS gelernt?

Schriftformatierung, (Text-)Ausrichtung und Absatzkontrolle, Randabstände (margin), Innenabstände (padding), Rahmen (border), Hintergrundfarben und -Bilder (background), Listenformatierung (list-style), Einsatz von Listen zur Navigation sowie Pseudoklassen (und Pseudoelemente), die wir z.B. benötigen, um das Hyperlink-Verhalten zu ändern (:link, :hover, :focus, :active, :visited).

Merke [2]: Möchten wir die Angaben für margin, padding etc. in einer einzelnen Zeile angeben gilt folgende Reihenfolge: oben, rechts, unten, links. Oder: oben/unten und rechts/links. Beispiel:

padding: 5px 15px 10px 4px; <-- oben, rechts, unten, links

Zum Abschluss haben wir uns vergangenen Freitag mit mehrspaltigen, CSS-basierten Layouts beschäftigt. An diesen Online-Beispielen sollten Sie sich bei Ihren ersten Entwürfen des CSS-Layouts orientieren.

Kursende: Positionierungen am Bildschirm

Mit der Positionierung und Anzeige von HTML-Elementen (position, display) am konkreten Online-Beispiel beenden wir kommenden Freitag den theoretischen Teil im Kurs Webmedia Basics II.

Am Rande bemerkt: Eine inhaltlich durchdachte und stets aktualisierte Website benötigt nur wenig Suchmaschinenoptimierung.

Einziger Unterschied: Wir verwenden alle zentrale Stylesheets, die wir dann gemeinsam im Kurs anpassen:

Die HTML-Datei z.B. test.html nennen und auf dem Desktop speichern.

Wir basteln uns eine Website “from the Scratch”, also von Beginn an. Simpel. Mit HTML und CSS. Und CSS-basiertem Layout - ohne Tabellen und ähnliche Hilfskonstruktionen. Dazu habe ich ein Online-Beispiel vorbereitet. Über Entstehung und Details sprechen wir am kommenden Freitag.

Zum ersten Online-Beispiel hier die zugehörige erste HTML-Seite index.html und das erste CSS-Stylesheet stile.css. Wir tasten uns schrittweise an. Verschiedene Browser bleiben zunächst unberücksichtigt!

Und so sieht’s online aus …

Nachtrag:

Die Stile für die einzelnen DIV-Container page, header, content, navigation, usercontent und footer besprechen wir am kommenden Freitag ebenso wie deren Positionierung, grafische Hintergründe, Schriften etc. im HGB-Kurs Basics II.

Als Webentwickler benötigt man mehrere Versionen des IE-Browsers, um das Verhalten der Website zu testen, gerade mit IE7, IE6 und vielleicht noch IE5.5, weil ein Kunde noch IE5.5 nutzt.

zum Beitrag im Blog Webthreads

Soeben von meinem ersten barcamp aus Berlin zurück. Nennt sich community barcamp Berlin , lauter netter Menschen aus dem Web 2.0, bin voller neuer Eindrücke und mit neuen Impulsen wieder da und möchte Euch auf eine Veranstaltung hinweisen - als Ergänzung zum Webmedia-Kurs. Das artcamp in Berlin!

Was sich dahinter verbirgt, was ein barcamp ist …

Aus dem Text der Veranstalter:

Was ist das artcamp?

Das artcamp ist die Fusion aus der Mentalität des offenen Austausches von BarCamps, den Möglichkeiten des Internets und dem Zauber von Kunst.

Ob bildende Kunst, Musik, Theater, Magie, Literatur, Design oder eine der unzähligen freien Kunstformen - Ihr seid herzlich dazu eingeladen Euch und Euer Projekt vorzustellen - Kunst ist Definitionssache - zeigt uns was Kunst für Euch bedeutet!

Das artcamp ist ehrenamtlich organisert und kostenlos für alle Teilnehmer, lediglich eine Anmeldung ist erforderlich.

Unbedingt empfehlenswert! Mitfahrzentrale, Übernachtung, ja selbst die Vorträge organisieren die Teilnehmer selbst, WLAN und Internet natürlich vorhanden. Das ist die Grundlage eines BarCamps.

Hinter der Homepage des artcamps verbirgt sich keine Website. Es ist ein Netzwerk innerhalb des Netzwerk-Anbieters Mixxt, mit dem man sich ein kleines MySpace o.ä. aufbauen kann - ohne HTML-Kenntnisse Gastgeberin ist wieder Vivian Pein. Es sind bereits 119 Besucher (1.11.08) angemeldet.

Vielleicht machen wir ja im Sommersemester 2009 einen Exkurs dorthin ?