Stefan Wienert.net

Heute grad gefunden: commoncraft.com. Eine Firma, die Videos anbietet, die in jeweils 3 min ein meist technisches Thema sehr visuell erklärt.

Angucken ist kostenlos, Verwenden muss dann lizensiert werden.

Auf eine Anfrage hin, wie ich einige der Bilder, die hier in der Galerie austell’, erzeugt habe, will ich mal eine kleine Einführung in die digitale HDRI-Fotografie geben.

HDRI ist eine Technik um aus (mehreren) Eingabebildern ein Ausgabebild mit einem hohen Dynamik- sprich Kontrastumfang zu erhalten.
Klarer: Viele Eingabebilder führen zu einem Bild, was Details aus allen Lichtstärken abbildet.
z.B. bei einer Landschaftsfotografie sowohl Wolken (heller Himmel) als auch die Kiesel im Vordergrund (dunkel).

Mit Einzelbildern sind solche Motive recht schwierig, da man entweder den Himmel als weiße Fläche hat, oder der Vordergrund zu dunkel erscheint.

Was liegt also näher, als einfach alle Lichstärken zu fotografieren und den Rechenknecht die Übereinanderlegung überlässt?

Die Hardware

Für alle von mir geschossenen HDR-Bilder hatte ich nur folgende (unterirdische) Ausstattung zur Verfügung:

• Eine ältere Canon Kompaktkamera
• Irgendeine Form von Stativ (meistens aber eh nicht dabei, und dann muss ein Stein, eine Mauer, Stuhl, … herhalten)

Wichtig für die Kamera sind meines Erachtens nur folgende Funktionen:

• Ein “manueller” Modus, in dem Blende und Belichtungszeit selbst eingestellt werden können
• Eine Auslöseverzögerung, da ansonsten beim Abdrücken fast immer verwackelt wird
• Bonuspunkte gibt es, wenn man eine skriptbare Kamera hat. Die meisten billig- und mittelklasse Canon haben z.B. das CHDK (Oder hier ein deutsches Forum). später folgenden Prozess komplett zu automatisieren

Das Vorgehen:

Wenn wir dieses haben, dann kann es schon losgehen: Einen Ort suchen, am besten mit wenig Bewegung (wenig Passanten, relativ Windstill, außer man will genau sowas im Bild haben).
Im Manuellem Modus stellen wir unsere Kamera auf eine Blende ein. Blende ist bei den meisten Kameras ein Wert zwischen ca. 3 und 8 (abhängig vom Objektiv) und bestimmt den Lichteinfall “Wenn die Sonne lacht, nimm Blende acht”: Wenn wir schönes Wetter haben kann es ruhig etwas höher sein (6+).
Am besten ein paar Probefotos schießen (Faustregel: Wenig Licht, wenig Blende, viel Licht, hohe Blende).

Die Belichtungszeit:
Beim HD-Fotografieren ist sie die Variable: Wir wollen eine Fotoserie von einem Motiv machen, welches jeweils dieselbe Blende, aber unterschiedliche Belichtungszeiten hat. Mindestens 2, besser 4-10 Bilder desselben Motivs: Von fast komplett dunkel, bis überbelichtet. Damit sind wir sicher, alle Details eingefangen zu haben (Insbesondere bei Bildern mit hellem Himmel erkennt man hier einen deutlichen Unterschied).

Der Algorithmus

1. Blende einstellen, Startbelichtungszeit so klein einstellen (1/1000s z.B.), dass das Bild fast komplett Schwarz ist
2. Kamera aufstellen, Auslöseverzögerung von 1s, damit wir nicht beim Abdrücken verwackeln
3. Von 1 bis … tue:
   1. Vorsichtig Abdrücken
   2. Abbrechen, wenn aktuelles Vorschaubild überbelichtet
   3. Vorsichtig die Belichtungszeit verdoppeln (Wenn man weniger Fotos schießen will/muss, kann man auch mehr einen höheren Faktor z.B. 3 nehmen)

Wenn man wie oben beschrieben, eine Skriptfunktion hat, dann erleichtert sich der Schritt 3 zum einfachem:

• Drücken der Abschusstaste und Warten bis die Fotos im Kasten sind :)

Am besten gleich noch einmal, eventuell mit anderer Blende…? Immer mehr als ein Bild machen, in der Regel ist doch etwas leicht verwackelt, aufgrund des nicht vorhandenen Equipments :)

Die Software

Jetzt gilt es, den geschossenen Fotofundus in ein HDRI Bild zu gießen, wofür ein Programm benötigt wird. Gleichzeitig kann dies auch ein sehr kreativer Teil des Prozesses sein, da man durch unterschiedliche Transformationsparameter sehr unterschiedliche Ergebnisse erzielt: von einem surrealistischem Graubild, bis hin zu einem “überrealistischem” farb- und konstraststarkem Bild, frei nach dem Motto “besser als in echt”.

Für Windows ist das Referenzprogramm Photomatix (Pro), welches allerdings nicht kostenlos ist. Eine Vielzahl von Reglern und Schaltern ermöglichen aber eine sehr anpassbare HDR-Bearbeitung. Die Handhabung ist relativ leicht, und bringt einige coole Features mit wie z.B. automatisches Ausrichten der Bilder (mit kleinerem Qualitätsverlust)

Die etwas ältere 2.x Version scheint auch unter Wine zu laufen.
Weiterhin gibt es natürlich Photoshop, wobei ich hier mal in die Gelegenheit des Testens kam (CS2), und von dem Ergebnis nicht gerade überwältigt war.

Unter Linux/deb-basierten existiert qtpfsgui, ein Frontend, sowie pfstools als kommandobasiertes Programm derselben Bibliothek. Die verfügbaren Regler sind bei qtpfsgui etwas geringer als bei Photomatix und auch hatte ich einige merkwürdige Fehlermeldungen (Das letzte mal vor ca. 9 Monaten getestet) und es war mir überhaupt nur möglich, meine Quellfotos über die Kommandozeile einzulesen.
Das Ergebnis war aber trotzdem sehr brauchbar.
Mit pfstool habe ich mich nicht beschäftigt, da ich hier eine GUI sehr angebracht empfinde, um beim Verschieben der Regler sofort das Ergebnis zu sehen

Sowohl bei Photomatix, als auch bei qtpfsgui erstellt man erst ein “HD”-Bild aus seinen Bildern, was noch nicht grad vom Hocker reißt, und muss dieses dann “farbabbilden”. Dies ist notwendig, da ein HD-Bild einen höheren Dynamikumfang besitzt als die Monitore anzeigen können bzw. unser Auge sehen kann.

Im letzten Schritt folgt unabhängig von der HD Bearbeitung, das üblich Postprocessing: Cropping (Bildrandbeschneidung) eventuell Blendenkorrektur für herabstürzende Kanten.

Soviel zu einem Überblick. Am besten einfach selbst ausprobieren, z.B. an einem Stillleben in der eigenen Wohnung. Ein paar weitere HDRI-Bilder von mir habe ich in der Galerie auf dieser Seite bereitgestellt.

Dank Ruby on Rails (oder auch gerne Django oder jedes andere ausgereifte MVC) hat man schon einmal ein gutes Rückgrat für eigene Webprojekte.

Allerdings muss/darf man nach wie vor das Design in die eigene Hand nehmen, oder outsourcen.
Da ich als Informatikstudent nur sehr wenig in Kontakt komme mit Designregeln und Tools (wie z.B. das allseits bekannte Photoshop, inDesign und andere), hab ich hier mal ein paar hilfreiche Links, die ich in meinen letzten Projekten verwendet habe.

theorie

• 4 Principles of Good Design for Websites
  Sehr ausführliche und bebilderte Darstellung wichtiger Prinzipien, wie Kontrast und Wiederholung
• Smashing Magazine – 10 Principles Of Effective Web Design

css

• Drawter CSS Designer
  Hierbei lässt sich per Javascript ein Basis-Layout “malen” und der entsprechende CSS-Code generieren
• FreeCSS
  Diverse kostenlose (oft CreativeCommons) komplett fertige Templates.

graphics

• CoolText Button Generator
  Diverse Optionen um Buttons zu generieren… sollte das gefordert sein (Theoretisch ist es schlechter Stil, ein Bild als Link zu verwenden)
• Wikimedia – Creative Commons
  Bei Wikimedia sind eine Menge CreativeCommons lizensierte Icons, Cliparts usw. zu finden, wie z.B. dieses Crystal Clear Set.

finishing

• Performance Rules + Firebug plugin
  Interessante Performance Ansätze und Tipps um das Surferlebnis der Nutzer flexibler zu gestalten. z.B. Javascript ans Ende des Dokuments
• Silbentrennung – ­ generator
  Funktioniert zwar nicht 100%-ig, aber macht ein Blocklayout wesentlich blockiger :)
• Longtailvideo JW Flash Player
  Ein einbettbarer Flashplayer, zur privaten Nutzung kostenlos.
• Test everything
• Browsershots
  Ein Generator der zwar ewig braucht, aber dann Screenshots ausspuckt, wie die Website in verschiedenen Browsern aussieht
• Random Passwort Generator
  Um ein CMS Passwort etwas schwieriger zu gestalten bevor es an den Kunden ausgeliefert wird

Nicht vergessen, der automatisierten Weitergabe der persönlichen Daten an Dritte zu widersprechen!

Leider habe ich selbst den Opt-Out-Day verpasst. Aber eine Ausweisverlängerung steht bald an…

Nach kurzer Suche fand ich das Formular auf sachsen.de. Dank Föderalismus gibt es für jedes Bundesland ein eigenes Formular. :D

Falls die Angestellten dort vom Opt-Out noch nicht gehört sagen, einfach kurz den Gesetztestext rezitieren.
Damit wird zwar nur die automatisierte Weitergabe per Internet untersagt, also eine persönliche (und telefonsiche?) Auskunft sollte noch immer möglich sein, aber das gegen Spam-Schleudern schon mal ein Anfang.

Falls mal Langeweile aufkommt, hier ein paar Vorlesungsaufzeichnungen, die ich mir momentan reinzieh :)

• Hasso Plattner Institut
  Vorlesungen des Hasso-Plattner-Instituts, qualitativ sehr gut und große Auswahl an Informatik-Vorlesungen

• Mustererkennung an der Uni Freiburg

• Auf dem FTP Server eines Dresdner Wohnheims findet man ein paar “Programming Methodology” Vorlesungsmitschnitte der Stanford University, die einen fast unterhaltsamen Einstieg in das Programmieren (mit Java) :). Geeignet für Einsteiger.

more to come…

Zur Zeit muss ich mich beruflich mit dem heißen Thema “Suchmaschinenoptimierung” herumschlagen. Dies ist keine richtige “Wissenschaft”, aber es haben sich ein paar Grundregeln herausgestellt, die, wenn man sie einhält, mit einer höheren Auffindung “belohnt” wird. Hier ein paar der wichtigsten:

• HTML/CSS valide gestalten → optimalerweise sogar noch strict:
  komplett externe Styledefinitionen
  alt-Tags bei IMGs
  titles bei Links
  → haben beide Keyword-Potenzial, hier kann man schon seine Keywords reinstopfen.
• Externe Links mit “nofollow”/“noindex”
• ein gesundes Verhältnis von Content zu Struktur zu haben (ab 30%)
• Keywords in den Überschriften, Meta-Tags, Webseitentitel und auch im Text
• Optimal, wenn die eigene Seite von anderen Seiten verlinkt wird, sogenannte Backlinks erhöhen den “Wert”
• Social Bookmarking direkt anbieten
• nicht zuletzt: Sinnvollen Content anbieten ;)

So, jetzt zu den Tools:

Websites mit Live-Auswertung

• seitenreport.de bietet eine sehr detailierte Übersicht über “Technik” (verwendeter Doctype, HTML-Validität), Keyword/Meta-Tag Analyse, und darauf basierend die Suchmaschinenränke), Social Bookmarks und noch vieles mehr.
• seitwert.de Im Gegensatz zu seitenreport nicht so detailiert, sondern eher für eine schnelle Übersicht; auch weniger technisch detailiert.
• w3c.org: Ja auch das ;) Erstmal sollte man seine Seite valide machen (am besten strict), bevor man sich an das High-Level Zeug macht.

Firefox-Addons

• google-Toolbar: Recht bekannt, ich nutze sie aber nicht
• SeoQuake Fügt u.a. eine Toolbar hinzu, die so allerlei Informationen anbietet: Von PageRank bis Yahoo-Links, SocialBookmarks, robots.txt/sitemap.xml vorhanden und und und. Weiterhein stellt es einen Link auf deren Analyse-Seite mit der aktuellen Website als Parameter bereit, auf der man ähnliche Informationen wie die beiden oben genannten Seiten erhält.
• SenSEO Ein auf die Keyword-Analyse fokussiertes Plugin, das sich zudem noch nett als Firebug-Tab eingliedert, sollte dieses vorhanden sein. SenSEO ist recht technisch ausgelegt, und hilft bei der Auffindung von fehlenden “a:title”, “img:alt” sowie bei der Analyse der einzelnen Keywords in den hierarchischen Elementen der Website (also was steht in den META-Tags, was in H2 usw.)

Mir gefällt SenSEO persönlich sehr gut, da ich aus dem PageRank usw. relativ wenig ableiten kann, was mir hilft, die Seite zu verbessern, während SenSEO mit Tipps gibt, wie ich Keywords und MetaTags verbessere.