Einfache Galerie in HTML aus der Shell

von Lennart Betz | Okt 20, 2011 | Development

Es gibt unzählige Webgalerien oder auch Werkzeuge mit graphischem Frontend die Galerien erzeugen. Hier wir von mir ein einfacher Weg aufgezeigt, fiffige Galerie-Seiten zu von der Kommandozeile aus zu erstellen. Das Tool convert aus dem ImageMagick-Projekt ist sicherlich dem ein oder anderen ein Begriff. Auch mit diesem ist die Erstellung einfacher HTML-Seiten schon möglich, aber ein weiteres Tool aus dem selben Projekt bietet jedoch noch weiter reichende Möglichkeiten. Mit montage sind nicht nur Rahmen, Beschriftungen und Schatten möglich, sondern auch mit der Option +polaroid die Darstelung als polaroidähnliches Thumbnail.
montage *.JPG -thumbnail 192×192 -background grey20 +polaroid -background white -geometry +1+1 -tile 5x -title „Wo ich schon mal war…“ index.html

Außerdem sorgt +polaroid auch für die hier zu sehende leichte zufällg erzeugte Drehehung. Mit tile wird die maximale Anahl von Bildern in eine Reihe angegeben, alle anderen Parameter sollten selbsterklärend sein. Einen Untertitel, hier den Datenamen ohne Endung, zu jedem Bild erhält man durch das Hinzufügen von der Option -set caption ‚%t‘. Möchte man z.B. zusätzlich noch die Größe des Orginalbildes in eine weiter Zeile des Untertitels anzeigen lassen, kann man dies durch ‚%t\n%b‘ erreichen.
In der heutigen Zeit der hochauflösenden Digitalkamaras, sind die Orginalbilder vorher noch mit beispielsweise convert -resize 800×800 *.JPG auf eine Angemessende Größe für die Anzeige auf Webseiten zu skalieren. Wobei hier das Seitenverhältnis erhalten bleibt und jeweils die längere Seite auf 800 Pixel reduziert wird.
Auch das Tool jhead sollte nicht unerwähnt bleiben, dies kann dazu verwendet werden die Bilder automatisch drehen. Hierfür ist jedoch erforderlich, dass die Orientierung in den Exif Dateien hinterlegt ist. Desweiteren ist mit jhead auch eine Manipulation dieser Daten möglich.

Lennart Betz

Senior Consultant

Der diplomierte Mathematiker arbeitet bei NETWAYS im Bereich Consulting und bereichert seine Kunden mit seinem Wissen zu Icinga, Nagios und anderen Open Source Administrationstools. Im Büro erleuchtet Lennart seine Kollegen mit fundierten geschichtlichen Vorträgen die seinesgleichen suchen.

Lies mehr von Lennart und triff unser Team

SASS – so macht CSS wieder Spaß

von Jannis Mosshammer | Jan 24, 2011 | Development

Keiner weiß, wie viele Entwickler schon aus dem Fenster gesprungen sind, weil sie „mal eben schnell“ alle Vorkommnisse eines Grautons und dessen Abstufungen leicht ins bläuliche Färben sollten. CSS wird zwar um viele Features erweitert, doch die Auzeichnungssprache an sich hat sich seit 1998 kaum geändert. Features wie Variablen sucht man vergebens, was einem bleibt ist viel doppelte Arbeit.
Doch bevor nun alle Entwicklungsabteilungen ins Erdgeschoß verlegt werden, möchte ich den Ausweg aus der misere Vorstellen: SASS.
*.sass Dateien sind spezielle Stylesheets, die über einen Compiler einfach in CSS umwandelt werden. Man kann so Variablen, verschachtelte Definitionen, Funktionen und vieles mehr in sein Stylesheet einbauen – der Compiler erstellt daraus dann eine valide CSS-Datei.
Und das beste: Wer CSS kann, muss kaum Neues lernen. Eigentlich kann man damit sofort produktiv loslegen.
Nehmen wir mal ein einfaches Stylesheet:

div.header {
   background-color: #ababab; /*dunkelgrauer Rand*/
   border: 1px solid #dedede; /*grauer Rand*/
}

Mit SASS würde dies wie folgt aussehen:

$theme_color1: rgb(222,222,222) /*Variable mit Farbwert*/
div.header
   background-color: darken($theme_color1, 20%) /*Rand, dank Funktion 20% dunkler als $theme_color*/
   border: $theme_color1 /*grauer Rand*/

Der Vorteil ist sofort ersichtlich: Muss man bei einem neuen Grauton das CSS an zwei Stellen ändern und sogar den neuen Farbwert des Randes per Hand ausrechen, reicht bei der .sass Datei lediglich eine Änderung in der Variable $theme_color – den Rest erledigt SASS.
Das CSS erstellt man einfach via

sass --watch %sass-quelle%:%ziel-datei%

Durch den –watch Parameter erkennt SASS, wenn sich Änderungen an der *.sass Datei ergeben haben und aktualisiert das CSS. So kann man direkt am SASS Entwurf arbeiten und sieht das Ergebnis sofort.
Natürlich ist das nur ein kleiner Einblick in die Möglichkeiten. Am besten einfach mal auf die Homepage gehen, ausprobieren und begeistert sein.

Next generation floating in HTML

von Marius Hein | Mrz 29, 2010 | Development

Wer floats in html mag, wird diese lieben.

Nach dem sich CSS2 mehr und mehr etabliert kann man gefloatete Seitenlayouts auf ganz neue Art und Weise durchführen.
Erstmal der Quelltext:
[code style=“css“]
.clearfix:after {
content: &amp;amp;quot;.&amp;amp;quot;;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.floatbox {
overflow: hidden;
}
.col {
float: left;
width: 200px;
}[/code]

<div class="floatbox clearfix">
	<div class="col"><p>LINKS</p></div>
	<div class="col">
		<p>Lorem ipsum dolor sit amet, consectetue.</p>
		<p> Donec quam felis, ultricies nec, pellentesque.</p>
		<p> In enim justo, rhoncus ut, imperdiet a!</p>
	</div>
</div>

Das wichtigste befindet sich in den Klassen ‚clearfix‘ und ‚floatbox‘. Mit ‚clearfix‘ bedienen wir uns CSS2 und fügen nach
einem float den clear gleich mit ein. Ein extra html Element, um den float abzuschließen,
wird hierfür nicht verwendet (die Pseudo-Klasse :after erledigt das für uns).
Als zweites schaffen wir uns einen neuen Anzeigekontext mit ‚overflow: hidden|auto‘. Dieser Kontext bewirkt das ein ‚clear‘ sich z.B. nicht Global auf die gesamte Seite auswirkt, sondern nur auf den gewollten Bereich. Auch richtet dieser Bereich die Inhalte neu aus. So muss ein float mit unterschiedlicher Länge, welcher auf der Folgeseite um fließt, nicht mit seltsamen margins auf Kurs gehalten werden (z.B. margin-left: 205px). Die weitere Positionierung und Abstandseinstellung verläuft so wie man es erwartet!
Mehr Informationen findet man hier:
Floats 1
Floats 2
Floats 3

Marius Hein

Head of IT Service Management

Marius Hein ist schon seit 2003 bei NETWAYS. Er hat hier seine Ausbildung zum Fachinformatiker absolviert und viele Jahre in der Softwareentwicklung gearbeitet. Mittlerweile ist er Herr über die interne IT und als Leiter von ITSM zuständig für die technische Schnittmenge der Abteilungen der NETWAYS Gruppe. Wenn er nicht gerade IPv6 IPSec Tunnel bohrt, sitzt er daheim am Schlagzeug und treibt seine Nachbarn in den Wahnsinn.

Lies mehr von Marius und triff unser Team

Nächste Einträge »