Monthly Archives: Dezember 2012

Schwerkraft-Lampe und eine erhellende Idee

Wer zur Weihnachtszeit noch schnell etwas Gutes tun will, findet bei beim Projekt Gravity Light von Deciwatt vielleicht eine passende Anlaufstelle. Das Projekt will eine Lampe realisieren, die lediglich von Schwerkraft betrieben wird. Schon aus ökologischen Gedanken keine schlechte Idee, die auch bei Spiegel Online unter der Netzwelt-Rubrik Gadgets vorgestellt wurde.

Noch erhellender wird’s aber, wenn das ursprüngliche Ziel der Entwickler in die Tat umgesetzt werden kann: Licht in die Dritte Welt bringen. Dort gibt’s zu wenig Elektrizität, Licht wird oft mit Petroleumlampen erzeugt. Mit der Schwerkraft-Lampe lassen sich Räume mit der Schwerkraft erleuchten. Beziehungsweise mit Muskelkraft, denn zunächst muss ein mit Wasser oder Sand gefüllter Sack hochgehoben werden. Dieser sinkt anschließend langsam Richtung Boden, die entstehende Energie wird in Elektrizität umgewandelt. Es wird hell.

In den Kommentaren von Spiegel Online wird die Effizienz einer Schwerkraft-Lampe angezweifelt. Aufgrund andersweitiger Priorisierungen während des Physik-Unterrichts kann ich das leider nicht beurteilen. Dennoch ist die Schwerkraft-Lampe eine prima Idee, die sowohl der Umwelt als auch den Menschen in Entwicklungsländern helfen kann.

Das Projekt sucht über das Startup-Portal Indiegogo noch Unterstützer und Helfer. Laut neuerdings.com kostet eine Lampe 45 Euro – ein Gravity Light geht dabei in Entwicklungsländer, gleichzeitig bekommt man eine Lampe nach Hause geschickt.

Ein (sehr, sehr) einfacher Slider für Bilder mit CSS

Zugegeben, der Begriff „Slider“ in der Überschrift ist irreführend. Denn in diesem Fall geht es nur darum, innerhalb einer Box mit festgelegter Breite viele Bilder nebeneinander darzustellen. Unter dem Stichwort „Karussell“ oder eben „Slider“ gibt es dafür etliche Lösungen, die zum Beispiel auf jQuery basieren. Sie kommen mit wunderbaren Effekten daher, sind hübsch anzuschauen und in der Regel recht leicht in die eigene Webseite implementierbar.

Manchmal wird aber aber eine puristische Lösung gänzlich ohne Effekte benötigt. Früher, zur Zeit der Jahrtausendwende, hätte man dafür ein iFrame in die Seite gebaut. Das wäre natürlich heute auch noch möglich. Ein iFrame hat aber eine etwas grobschlächtige Anmutung. Genauso gut könnte versuchen, eine Stecknadel mit einem Vorschlaghammer in ein Kissen zu rammen. Eine simple und elegante Lösung lässt sich statt dessen prima mit CSS finden. Benötigt werden lediglich zwei div-Container. Das Zauberwort heißt overflow.

Die erste div-Box bildet lediglich den Rahmen für den Bilder-„Slider“ und hat eine festgelegte Größe. In diesem Beispiel nimmt sie 90 Prozent der eigentliche Webseite ein. Möglich ist natürlich auch eine pixelgenaue Angabe.

#wrapper { // das ist die Breite der Webseite
  width: 960px;
}
#bildbox_rahmen { // die Box für den Silder
  width: 90%;
  height: 300px;
  overflow: auto;
}

Overflow sorgt dafür, dass ein Scrollbalken eingeblendet wird, wenn Inhalte nicht mehr in die Box passen. Nun brauchen wir noch eine Box, in der die Bilder abgelegt werden:

#bildbox {
  width: auto;
  white-space: nowrap;
}

Diese Box muss natürlich breiter sein als die Rahmen-Box, damit der Scroll-Effekt sichtbar wird. Da wir beliebig viele Bilder einfügen möchten, die horizontal dargestellt werden, bekommt die Box dennoch nur die Breitenangabe auto. Sollte jedes Bild eine Breite von 200 Pixeln haben, wird die Scrollbar also ab dem fünften Bild sichtbar.

Im Grunde war’s das in Sachen CSS. white-space: nowrap sorgt dafür, dass Leerzeichen im Quellcode keinen Abstand bzw. Umbruch verursachen. So können wir die Bilder im HTML-Quellcode untereinander auflisten, ohne Abstände zwischen den Bildern zu erzeugen. Weitaus eleganter wäre es natürlich, die Bilder innerhalb von Listen-Elementen zu platzieren. Dann müssten wir, ebenfalls über CSS, dafür sorgen, dass die Elemente mittels float: left; nebeneinander positioniert werden. Die entsprechende Klasse könnte so aussehen:

.bildauflistung {
  list-style: none;
  float: left;
}

Nun wird das HTML-Dokument angepasst:

<html>
<body>

<div id="wrapper">
	<h1>Ein sehr einfacher Bilder-Slider</h1>
	<div id="bildbox_rahmen">
		<div id="bildbox">
			<ul class="bildauflistung">
				<li><img src="pic1.jpg"></li>
				<li><img src="pic2.jpg"></li>
				<li><img src="pic3.jpg"></li>
				<li><img src="pic4.jpg"></li>
				<li><img src="pic5.jpg"></li>
				<li><img src="pic6.jpg"></li>
			</ul>
		</div>
	</div>
	
</div>

</body>
</html>

Das Ergebnis ist, wie bereits erwähnt, sehr puristisch: Ein einfacher Scrollbalken innerhalb der Seite. Aber selbst wenn diese Art der Darstellung nicht für das endgültige Aussehen der Webseite in Frage kommt, kann sie während der Produktion prima als Platzhalter für später kommende js-Spielereien genutzt werden.

Die perfekte Pressemitteilung

Nehmen wir mal an, Sie arbeiten in der Pressestelle Ihrer Stadt, organisieren Kulturveranstaltungen und haben einen bekannten Kabarettisten für einen Auftritt im örtlichen Theater verpflichten können. Jetzt wollen Sie natürlich, dass die Presse (ob nun Print oder Online oder Radio) für den Kulturabend die Werbetrommel rührt. Sie verschicken deshalb eine Pressemitteilung.

Aber Vorsicht, dabei können viele Fehler gemacht werden. Wenn Sie wollen, dass in den gehetzten Redaktionen Ihre Mitteilung beachtet, bearbeitet und im besten Falle sogar veröffentlicht wird, müssen Sie sich an ein paar Regeln halten. Wie es zu fast 100 Prozent richtig gemacht wird, soll am Beispiel einer heute frisch eingetroffenen Pressemitteilung gezeigt werden:

  1. Schreiben Sie in den Betreff der E-Mail auf keinen Fall, worum es geht. Am besten schreiben Sie nur „Pressemitteilung“ in die Betreffzeile, besser sogar  „Wichtige Pressemitteilung“. Die Redaktionen sollen ja wissen, dass es eine Pressemitteilung ist, und sogar eine wichtige dazu. Optional lassen Sie die Betreffzeile leer. Das weckt das Interesse der Redakteure.
  2. Machen Sie in der eigentlichen E-Mail-Nachricht zunächst ganz viele Leerzeilen. Der Redakteur soll scrollen müssen, bevor er etwas erfährt. Das macht die Sache noch spannender.
  3. Bitten Sie als erstes um „schnellstmögliche Veröffentlichung“.
  4. Schreiben Sie zunächst, wie toll der Kabarettist XY ist. Zitieren Sie ausführlich aus seiner Vita. Geben Sie keine Hinweise, warum Sie das alles schreiben. Die Empfänger der E-Mail sollen sich in Ruhe über den Protagonisten informieren können.
  5. Um Ihren Empfängern das Lesen zu vereinfachen, wählen Sie eine große Schriftart und erhöhen Sie die Zeilenhöhe deutlich. Machen Sie so oft es nur möglich ist Absätze.
  6. Nutzen Sie intensiv die Möglichkeiten der Auflistung. Geben Sie viele Stichpunkte. Verzichten Sie wann immer möglich auf ganze Sätze.
  7. Wenn Sie schließlich schreiben, dass XY in Ihrem Stadttheater auftritt, lassen Sie das Datum und auch die Uhrzeit unerwähnt. Verweisen Sie statt dessen für weitere Informationen auf eine angehängte PDF-Datei.
  8. In dieser PDF-Datei listen Sie lediglich die tabellarische Vita des Künstlers auf. Erwähnen Sie immer noch kein Datum und keine Uhrzeit. Fügen Sie dem PDF eine ausführliche Beschreibung des aktuellen Programms hinzu, das Sie von der Agentur des Künstlers bekommen haben.
  9. Wenn Sie Bilder zur Verfügung stellen möchten, hängen Sie diese auf keinen Fall als normale jpg-Dateien an. Das mag in den Redaktionen niemand. Betten Sie lieber die Bilder in ein Word-Dokument ein und hängen Sie es der E-Mail an.
  10. Erwähnen Sie weder in der E-Mail noch in den angehängten Dokumenten Eintrittspreise. Das könnte abschrecken.
  11. Bieten Sie in Ihrer E-Mail-Nachricht eine Kontaktmöglichkeit für weitere Informationen an, indem Sie auf Telefonnummer und Internet-Adresse in der E-Mail-Signatur verweisen. Geben Sie Telefonnummern nicht im Haupttext an.
  12. Lassen Sie zwischen E-Mail-Nachricht und Signatur ausreichend Luft. Das Scrollen wird entspannend bei den Empfängern.
  13. Geben Sie auf keinen Fall einen Direktlink für die Veranstaltung auf Ihrer Webseite an. Die Suche auf der verschachtelten städtischen Seite regt den Recherche-Trieb der Redakteure an.
  14. Optimalerweise haben Sie auf Ihrer Webseite gar keine Suchfunktion. Dann müssen sich die Interessenten durch die Menüs klicken. Das gibt ordentlich Klicks und zudem bekommen die Besucher spannende Informationen, nach denen sie gar nicht gesucht haben.
  15. Auf der Internetseite, die über Ihre Veranstaltung informiert, können Sie Datum und Uhrzeit angeben. Verzichten Sie aber auf genaue Adressen, schreiben Sie lediglich „im Stadttheater“.
  16. Mach Sie auch im Internet keine Angaben über Eintrittspreise. Verweisen Sie statt dessen auf die Geschäftsstelle des Kulturbüros, ohne aber Telefonnummern oder Adressen oder gar Öffnungszeiten zu nennen.
  17. Sie können auch auf Eventim verweisen. Um es in diesem letzten Schritt noch etwas spannender zu machen, verlinken Sie nicht auf die konkrete Veranstaltungsseite auf Eventim. Verlinken Sie am besten gar nicht. Schreiben Sie nur „Karten auf eventim“ als reinen Text.

Der Erfolg wird Ihrer sein. Ganz sicher.