netzphilosophieren

Und noch eine Online-Bildbearbeitung.

PXN8 bringt jedoch mehr andere Bearbeitungsmöglichekeiten mit als das zuvor vorgestellte Pixoh. (Wie ich gerade gesehen habe, bietet auch Pixoh inzwischen das Verändern von z.B. Farbeinstellungen an, nur die Art und Weise, wie dies bei beiden Anwendungen geschieht ist etwas unterschiedlich).

Neben den Standart-Tools wie Zurechtschneiden, Drehen oder Größe ändern gibt es hier die Möglichkeit z.B. an Farbe, Helligkeit oder Schärfe zu basteln. Es gibt sogar eine “Rote Augen”-Funktion.

Genauso wie bei Pixoh wird das direkte hochladen zu flickr unterstützt. Also, ein weitere nützliche web2.0-Anwendung ;): PXN8

Gerade entdeckt: Ein weiteres praktisches Online-Tool, Pixoh

Es handelt sich hierbei um eine einfache Bildbearbeitungs-Online-Application. Es stehen die Basis-Operationen Schneiden von Bildern, Größe ändern oder sie in 90° Schritten drehen zur Verfügung. Nicht viel, aber dennoch nützlich, wenn man mal eben schnell z.B. ein Foto drehen oder verkleinern möchte und der Computer erst nach einem passenden Programm durchsucht werden müsste.

Bilder können direkt aus dem Web (Flickr-Unterstützung vorhanden) oder aber von der Festplatte benutzt werden. Beim Schneiden oder Verkleinern/-größern der Bilder wird praktischerweise die Größe in Pixeln angegeben. Dies ist z.B. sehr nützlich wenn man ein Bild zur Verwendung in einem Forum bearbeiten mag.

Es wird sicherlich Situationen geben, in denen ich auf diesen kostenfreien Dienst zurückgreifen werde. Er ist schnell, selbsterklären und erfüllt Basis-Aufgaben.

Selbst ausrpobieren? Pixoh

Squidfingers ist eine kleine, schön gestaltete Seite, eine Art Portfolio, auf der eine große Anzahl an relativ schlichten und dennoch effektvollen Hintergrund-Kacheln kostenlos angeboten werden.

Die Verwendung der Hintergrundbilder ist kostenlos, einzig ein Backlink wird gewünscht.

Zusätzlich zu den Graphiken, erhällt man auf dieser Seite auch nützliche Code-Snipplets und Inspiration :). Ich finde sie zumindest sehr inspirativ…

Vorbeischauen? squidfingers.com

Listible, die Liste der Linklisten. Momentan noch in einer beta Version, sieht allerdings schon sehr vielversprechend aus.

Eine Art del.icio.us für Linklisten ;). Sehr praktisch.

Ansehen? Listible.

Ich bin verliebt, so ein Tool mag ich auch für den PC haben!!! Ich hatte hier immer das Problem Bilder schnell und einfach für das Web zurechtzustutzen. Mit ImageWell ist dies überhaupt kein Problem.

Screenshots, Ausschnitte des Bildschirmes abphotographieren, importieren von PDF’s oder diversen anderen Bildformaten via Drag&Drop, einfach und schnelles Verkleinern, grundlegende Editierfunktionen, wie das Ausschneiden von Bildteilen oder das Einfügen von Texten oder Pfeilen – alles ganze einfach mit dieser kleinen Freeware!

Und das beste habe ich glatt vergessen ^-^”. Ftp beherscht es nämlich auch noch, d.h. man kann die für’s Web bearbeiteten Bilder direkt aus dem Programm heraus auf seinen Server hochladen. Hierbei kann man beliebig viele Adressen eingeben und dann mittels eines Drag-Down-Menus darauf zugreifen.

Must-Have für Mac OsX: ImageWell. Ich will sowas für den PC!!!

Online-Farbtools gibt es wie Sand am Meer. Ein paar davon habe ich gerade eben besonders in mein Herz geschlossen.

Zum einen Colormixers.

Man hat die Möglichkeit, Hex-Codes einzugeben und kann dann mit Hilfe von RGB-Reglern herumspielen. Zusätzlich werden zu der eingestellten 8 weitere Farben vorgeschlagen. Solche Farbschemata kann man dann auf verschiedene Arten exportieren.

Und dann der Color Scheme Generator.

Bei ihm bekommt man immer drei Farben vorgeschlagen, die zu der eingegebenen passen. Dabei kann man auswählen, wie die Farben sich anpassen sollen, ob kontrastreich oder Ton-in-Ton.

Das dritte Tool ist das 4096 Color Wheel.

Hier kann man sieben Farben auswählen, welche dann “gespeichert” werden. Kleiner Nachteil ist, dass die erste Farbe überschrieben wird, wenn man eine achte Farbe anklickt usw.

Ansonsten gibt es natürlich noch ColorMatch 5k und dieser Seite nachempfunden Traumwind 6-Colormatch. Auch Colorblender liefert passende Farben zu einer mit einem RGB-Regler eingestellten Farbe. Eine schöne Liste über solche Tools findet sich in den Bookmarks for Web-Designers and Web-Developers und im WebDevelopers Handbook.

Eigentlich mag ich gerne auf den aktuellen Artikel des Selfhtml aktuell Weblogs hinweisen. Ziemlich ausführlich beschäftigen sich die Autoren mit Grundlagen für Spaltenlayouts mit CSS. Ein längerer Artikel, der Methoden wie float: oder auch Tabelllen-Verhalten anspricht. Natürlich mit Beispielen, wie man es von Selfhtml gewöhnt ist und einer Analyse des “wie die Browser reagieren”.

Ich weiß nicht, in wie fern Opera da mitmacht, der Internet Explorer kann es auf jeden Fall noch nicht. Mit CSS generierter Content bei Pseudo-Elementen.

Hööö, Bahnhof?
Also, bei CSS gibt es Pseudo-Elemente, diese erkennt man an den Doppelpünktchen. So sind :hover und :visited bekanntere Pseudo-Elemente (diese funktionieren sogar im IE ;))  :before und :after, :first-child, :last-child, :first-letter, :first-line eher unbekanntere. Es gibt auch noch andere, dafür bitte hier nachlesen ;).

Mit den Pseudo-Klassen kann man richtig schöne Formatierungen erstellen. Eine Möglichkeit wäre z.B., dass der erste Buchstabe eines Eintrages richtig groß sein soll, wie es in alten Büchern der Fall ist. Aber was ich gerne machen mag, ist extra Inhalt einfügen. Und zwar bei Links.

CSS generierten Inhalt einfügen
geht ganz einfach. Angenommen, vor jedem Link soll ein Kringel auftauchen, dann füge ich eine Definition für das Pseudo-Element a:before ein und erzeuge das Kringelchen mit content: ‘°’a:before {
 content: '° ';
}So einfach geht das ;). Hier kann beliebiger Text eingefügt werden, welcher natürlich auch mit Hilfe von CSS formatiert werden kann (z.B. die Farbe kann geändert werden, die größe, die Zeilenhöhe…). Und es geht noch besser. Mit dem passenden Unicode-Code könnt ihr auch jedes Sonderzeichen einfügen lassen, mezzoblue erklärt es sehr schön und liefert ein paar schöne Glyphen ;).

Um beliebige Zeichen darzustellen, benötigt ihr den Unicode (z.B. über die Windows Zeichentabelle (nur die Zahl nach U+) oder direkt über die Unicode Seite). Diese wird dann hinter einem Backslash eingefügt.
a:before {
 content: "\123";
}Und wenn der Browser es kann, taucht dann vor jedem Link das ausgewählte Zeichen auf. Eine Andwendungsmöglichkeit ist z.B. auch einen besuchten Link “abzuhacken”. Hierfür fügt man nach jedem besuchten Link ein Häckchen ein:
a:visited:before {
 content: "\2713";
}

Mal eben schnell einen Screenshot von einer Webseite machen? Am besten noch von der kompletten Seite, nicht nur dem Ausschnitt, den man im Browserfenster sieht? Kein Problem mit der Firefox Erweiterung ScreenGrab!

Nach dem man die Erweiterung installiert und Firefox einmal neugestartet hat, befindet sich im Kontext-Menu (rechte Maustaste) das Menu ScreenGrab!, welches drei verschiedene Aufnahmemodi anbietet:

• Save document as image…: Aufnahme der kompletten Seite, also auch das, was außerhalb des
  Browserfensters liegt. Beim Abphotographieren der Seite scrollt ScreenGrab! diese einmal komplett durch.
• Save viewport as image…: Screenshot der Seite, Inhalt des Browserfenster
• Save window as image…: Aufnahme des Browserfenster (also inklusive der Firefoxmenus)

Das so “geschossene” Bild wird dann in einer *.png Datei gespeichert. Der Speicherort wird nach der Aufnahme abgefragt.

Damit ScreenGrab! funktioniert, muss Java installiert und angestellt sein. Und bei zu langen Seiten, kann es sein, dass das Abphotographieren der kompletten Seite nicht funktioniert, denn diese Funktion ist speicherbegrenzt.

Neugierig geworden? ScreenGrab!

Du bist Dir nicht sicher, welche Schrift dir am besten gefällt? Oder Du magst wissen, worin sich die Schriten unterscheiden? Typetester ist eine kleine Seite, die in solchen Fällen hilft.

Drei verschiedene Schriftarten können direkt online verglichen werden. Auswählen kannst Du alle bei dir auf dem System installierten Schriftarten.

Ausprobieren?: Typetester.

Warum? Weil es ein interessanter Blog ist, der von Zeit zu Zeit richtige Leckerbissen bietet. 

So hat Veerle u.A. ein interessantes Tutorial zum Thema “Von der Skizze bis zur Illustration” geschrieben oder berichtet über interessante Details zum Thema Webdesign oder Arbeiten mit Illustrator oder Photoshop – natürlich nicht nur ;).

Am besten ihr macht euch selbst ein Bild: Veerle’s Blog.

Bilder automatisch zentrieren lassen? Bis vor kurzem habe ich mir nur mit einem zusätzlichen Absatz helfen können. Bis ich auf einer Seite (leider weiß ich nicht mehr wo), die wunderbare Eigenschaft auto für Ränder (margin) entdeckt habe. Mit Hilfe dieser Eigenschaft, kann man beliebige ‘Block’-Elemente zentrieren.

Was sind Block-Elemente?
Was bedeutet das jetzt? ‘Block’-Elemente sind z.B. Layer oder Absätze. Sie sind abgeschlossen und nach ihnen wird automatisch die Zeile umgebrochen. Für genauere Beschreibungen verweise ich einfach mal auf einschlägige Literatur und begnünge mich mit Beispielen: <div>,<p> und <ul> oder <ol> sind ‘Block’-Elemente, während z.B. <b>,<i> oder besser <strong>,<em> oder aber auch <img>-Elemente es nicht sind. Sie sind ‘inline‘, das heißt, hinter ihnen geht es ganz normal, ohne einen Textumbruch, weiter.

Nun bietet CSS die Möglichkeiten, Elementen eine Anzeige-Eigenschaft (z.B. block oder inline) zuzuweisen. Dies geschieht mit der Angabe:display:block; bzw.display:inline;

Automatisches Zentrieren der Bilder via CSS
Für das automatisch zentrierte Bild, muss man dem <img>-Tag die Anzeigart block zuweisen, zentriert wird danach mit margin:auto:.storycontent img {
 display:block;
 margin-left:auto;
 margin-right:auto;
}
.storycontent  habe ich vor img gesetzt, da ich nur die Bilder innerhalb meines Postings ansprechen möchte. Und  das Posting befindet sich in einer Box der Klasse .stroycontent. Mit obrigem Code wirkt die CSS-Definition nur auf alle Bilder innerhalb dieser Boxen.

Jetzt kann man das Bild beliebig formatieren. Z.B. einen Bilderrahmen darum setzten. Hierfür benötigt man einen inneren Randabstand (padding), und einen Rahmen (border) und kann z.B. auch noch die Hintergrundfarbe (background) ändern.

Beispielcode
Ein Beispiel für solch einen Code ist: .storycontent img {
 display:block;
 margin:2px auto;
 padding:4px;
 border:1px dotted blue;
 background: white;
}

Nachtrag:
Diese Art zu zentrieren funktioniert natürlich auch mit jedem anderen Blockelement. Somit ist es z.B. die einfachste Möglichkeit, eine komplette Seite mit fester Breite, im Browser-Fenster zu zentrieren (Im Template Lavender habe ich noch meine alte und wesentlich umständlichere Methode verwendet, so als Vergleich ;)).