Sonntag, 2. Dezember 2012

Ein Paradies für Webworker: Hochauflösende Bilder zoombar in Webseiten einbinden.

Wie kann ich große Bilder, Bildercollagen, hunderte von Bildern oder eben auch einzelne aber eben extrem große Bilder in meine Webseite oder Blog einbinden? Mit dieser Einleitung beginnt ein Aufsatz des Microsoft-Mitarbeiters Kay Giza aus dem Jahre 2010, den ich zufällig entdeckte. Und der mir viele neue Wege aufzeigte, wie ich meine Blog-Artikel-Projekte vorantreiben kann.

Die Lösung ist ein kostenloser Service von Microsoft:

  Zoom.it früher bekannt als Seadragon.com.


Mit Zoom.it können Sie nun stufenlos in Fotos hinein- und herauszoomen, diese umherschwenken oder im Vollbild-Modus betrachten.

Es ist super einfach:
  1. Man trägt die Bild-URL bzw. Internet-Adresse auf http://zoom.it in das Eingabefeld ein:
  2. Das Bild wird bearbeitet und man bekommt einen Embed-Code für die eigene Seite zurück:
  3. Und man bekommt einen einfachen Link, wenn man das Ganze auf zoom.it ansehen will (volle Monitorbreite): http://zoom.it/STK4
Der Code ist wirklich kurz:
(script src="http://zoom.it/STK4.js?width=auto&height=400px")  (/script)

(natürlich mit spitzen Klammern)

Im obigen Beispiel habe ich ein Gemälde von Pieter Bruegel gewählt. Das Originalbild fand ich über Wikipedia auf wikicommons - ich musste ein bisschen suchen, bis ich eine hochauflösende Version fand.






Ein Beispiel mit einem eigenen Bild, das ich vor längerer Zeit auf Dropbox hochgeladen hatte, wo ich noch Speicherplatz freihabe: Die Ratisbona-Galaktie (im Zusammenhang mit dem Blog-Projekt regensburger-tagebuch.de):


Trick mit dem Rahmen

Problem ist, dass dieses Javascript-Snippet bei der HTML-Vorschau im Editor nicht angezeigt wird, und man beim Editieren immer aufpassen muss, dass man es nicht versehentlich löscht. Das ist aber ein allgemeines Problem beim Einbinden von Javascript-Code. Ich helfe mir damit weiter, indem ich einen DIV-Container um jedes zoom.it-Bild lege, mit einer vordefinierten Höhe und einem grauen Rand:


(div style="border: 1px solid gray; height: 410px;")
(script src="http://zoom.it/STK4.js?width=auto&height=400px")(/script)
(/div)



Anleitung auf Microsoft.com

Ein Aufsatz befindet sich dann noch auf den Microsoft-Seiten:
"Schluss mit zum Vergrößern klicken": http://www.microsoft.com/web/solutions/zoomit.aspx

Dort wird zwar viel von Microsoft Silverlight und Windows Azure die Rede, aber keine Angst. Man muss sich mit keinem dieser dinge auseinandersetzen, benötigt kein spezielles Programm, weder auf dem Server noch auf dem PC des Betrachters. Sofern er Silverlight installiert hat, wird auf die Technologie zugegriffen, unterstützend sozusagen.



Tipp: Webseiten-Screenshot

Aber eine Anwendungsmöglichkeit geht fast ein bisschen unter: Die Möglichkeit, auch PDF-Seiten oder ganze Webseiten auf diese Weise darzustellen. Ich habe diesen versteckten Hinweis umgesetzt und festgestellt:

Gebe ich bei zoom.it eine URL zu einer normalen Webseite ein (nicht zu einer Grafikdatei), dann erstellt der Service einen Screenshot und stellt ihn zoombar zur Verfügung:

Damit habe ich fast sowas wie einen Screenshot-Dienst. Ich kann meine Webseiten oder Webseiten von Kunden präsentieren. Ich kann aber auch Rechtsverstöße auf Webseiten dokumentieren und später einfach auf den zoom.it-Link verweisen (Allerdings fehlt die Datumsangabe!).

Da der Screenshot statisch ist, erscheint nicht immer die jeweils aktuelle Version der Webseite, sondern diejenige, die am Tag bei der Eingabe in zoom.it erfolgt.

aus http://v-mag.net wird http://zoom.it/U3Jw


Screenshot zu sd42.de, gleichzeitig Anwendungsbeispiel von zoom.it im Bereich Bildung

Link: zoom.it/Sq31

Das obige Beispiel zeigt gleichzeitig einen Nachteil auf, wenn man auf diese Weise mit Screenshots arbeitet. Denn durch die Höhe von 400 px (die man ändern könnte), wird eine lange Seite im ersten Moment unleserlich. Der Screenshot geht die ganze Seite durch.

Man könnte entweder die Höhenangabe im Script ändern, und/oder im umgebenden DIV-Container einen overflow einbauen. Aber ob das zu befriedigenden Ergebnissen führt, soll dahingestellt bleiben.Da arbeite ich dann doch schneller mit der Software Skitch



Tipp: Link notieren

Es ist empfehlenswert, sich jeden generierten Link sofort zu notieren, weil man sich sonst später nicht mehr auskennt. Offenbar gibt es kein Archiv der selbst generierten Links.



Für Fortgeschrittene

Auf oben genannter Microsoft-Seite fand ich noch folgenden Hinweis, der für Programmierer interessant sein dürfte:

Eine automatisierte Nutzung der Angebote der Zoom.it-Seite (Eingabe der Bild-URL und Generierung des Sourcecodes) sowie ein programmiertechnischer Zugriff auf den Zoom.it-Service und das darunterliegende Deep Zoom-Bild sind über das Zoom.it API möglich.
Wenn Sie den Zoom.it-Service gerne ändern würden (z.B. die User Experience, eigene Erstellung der Bildteile, etc.) können Sie eine ähnliche Anwendung mit den Deep Zoom Tools selbst erstellen:

  © Blogger template 'Fly Away' by Ourblogtemplates.com 2008

Back to TOP