silber-und-blei.com

Unsere Website von Silber & Blei ist online.

Link zur Seite: Silber & Blei

Screenshot silber-und-blei.com 2 Responsive-Stufen

Webdesign

Das Webdesign ist von uns, genau wie die Umsetzung. Wir haben dabei auf aktuelle Technologie gesetzt und eine gediegene Seite gestaltet. Es sind schöne Webfonts im Einsatz und die Seite ist responsive. Sie passt sich an die Größe des Browserfensters an, sodass sie mit auf dem Smartphone sowie auf dem Desktop optimal lesbar bleibt.

Statisch generiert mit Hyde/Python

Auf dem Server liegt eine komplett statische Seite, nur HTML-Dateien. Der Trick: die Seite wird mit dem statischen Websitegenerator Hyde generiert und dann hochgeladen. Das hat enorme Vorteile: die Seite ist schnell, sicher, wartungsarm und trotzdem noch komfortabel bedienbar. Auf einen Newsfeed wollten wir nicht verzichten, der wird von Hyde im ATOM-Format generiert. Hyde haben wir mit einem Plugin für unsere Bildergalerien erweitert, dazu aber gleich mehr.

Die Bildergalerie

Da wir unsere Bilder besonders schön präsentieren wollen, haben wir uns mit der Bildergalerie große Mühe gegeben. Das Kernstück der Galerie ist der Albumbetrachter. Ich habe hier ein paar beachtlichen Eigenschaften des Sliders zusammengefasst.

Hier eingebettet das Album »Neuste Bilder« von Silber und Blei:

responsive

Der Albumbetrachter ist komplett responsive und stellt sich voll auf die Bildschirmgröße ein. Das könnt ihr auf einer Albumseite gerne ausprobieren. Einfach an der Größe des Browserfensters spielen und sehen, was passiert.

vielseitig

Es gibt verschiedene Fälle, in denen ein Album eingebunden werden kann. Einerseits die Seite des Albums selbst, andererseits kann ein Album auch immer auf anderen Seiten eingebunden werden. Zusätzlich haben die Alben eine eigene Adresse um sie als Iframe auf anderen Websites einzubetten. Sofern es der Browser unterstützt kann bei uns ein Album sogar in den Vollbildmodus versetzt werden.

einbettbar

Wie hier auf der Seite zu sehen ist, kann ein Album auf einer anderen Website einebettet werden. Dafür werden spezielle html Seiten generiert. Ein Album kennt die Adresse seiner Embed-Version und bietet einen kleinen Code-Generator an. Dank der großen Anpassungsfähigkeit des Sliders in Sachen Format haben wir darauf verzichtet, feste Größen vorzuschreiben. Der Autor der fremden Seite hat dadurch die Möglichkeit, das Album genau richtig einzupassen. Wir hoffen natürlich, mit dieser Funktion eine größere Reichweite zu erzielen, und würden uns sehr über Sichtungen unserer Alben in der freien Wildbahn freuen.

universell

Jede Instanz eines Albums verwendet den gleichen Code, sei es nun im Iframe oder auf der Albumwebsite. Er ist eine Weiterentwicklung des Codes von das Auto. Magazine. Die Thumbnails und die große Ansicht der Bilder werden von der gleichen Basis betrieben. Durch Erweiterung der Objekte und unterschiedliche Konfiguration kommen die verschiedenen Erscheinungsformen zustande. Für den Wechsel in den Vollbild-Modus muss nicht einmal das Album neu initialisiert werden.

einfach

Für die Bildverwaltung haben wir ein Plugin für Hyde in Python geschrieben. Das Plugin generiert Thumbnails und die großen Bilder eines Albums beim Erstellen der Seite. Bei einem Album handelt es sich um eine Konfigurationsdatei, in der die Liste der Bilder zu finden ist. Um ein Album einzubetten reicht es, den internen Namen zu kennen: {{make_album( 'Neueste_Bilder', ['autoplay', 'no-thumbs']) }}. Das Beispiel ist dierekt von unserer Startseite entnommen.

Dienstag, 12. November 2013 18:50:43 Europe/Berlin