50.
Tabellenzauber - wie präsentieren Sie Ihre Tabelle mit Diagrammen im
Internet?
Tabellen
sind das Wissen unserer Welt - in übersichtlicher Form dargestellt in
Diagrammen. Grund genug für Homepagebesitzer sich zu überlegen, wie Sie
Ihre Daten ansprechend repräsetieren. Der Sternenhimmelstuermer stellt
hier mehrere Möglichkeiten vor. Die einfachsten Möglichkeiten zuerst,
dann wird es experimentiell.
Inhaltsangabe
1.
Uralt und bewährt - Diagramm als Image einbinden
1. a. Wird oft vergessen: Powerpoint kann´s auch
2. Google Charts - Es gibt zur Zeit nichts
besseres im Freewarebereich
3.
Für Bastler - Plotr mit ein wenig js-Kenntnissen o. k.
4. Canvas
5. Mit
Corel Draw oder Corel Rave ohne Programmierkenntnisse
1.
Uralt und bewährt - Tabelle als Image einbinden
Vorraussetzung:
Software wie Microsoft Office oder Open Office: Da heute schon Schüler
das Erstellen von Diagrammen lernen, eigentlich kein Problem:
Dennoch
einmal kurze Beschreibung: Das Grundprogramm zur Erstellung lautet bei
Microsoft Excel. Einige User sagen jetzt bereits -das ist mir zu
kopliziert:
Nein, im Vergleich zu anderen hier beschriebenen
Möglichkeiten ist das echt easy und dauert bei einer anspruchslosen
Tabelle nur Sekunden:
Anleitung in drei Schritten
a.
Excel öffnen - und wie unten angegeben die Datein eintragen
Partei | Stimmen |
Partei1 | 20 |
Partei2
| 20 |
Partei3 | 60 |
Bei
Wahl kommen 20+20+60 = 100 (%) heraus. Zahlen mit Kommawerten sind
erlaubt. Zuerst die Partei, dann die Zahlen!
b.
Danach alles Markieren:
Einfügen - Diagramme in der Menüleiste
auswählen
c.
Danach wählen Sie den Diagrammtyp im Assistenten. Links die
Darstellungsart - rechts die Form. Dann unten den Button weiter im
Diagrammassistenten.
Dann Spalten auswählen bzw.
die Grundeinstellung so belassen - mit weiter bestätigen.
Im
nächsten Fenster Titel , Legende und Datenbeschriftungen in den
Registerkarten festlegen. Bei Datenbeschriftungen müssen Sie im Fall
von % Prozentsatz ankreuzen.
zweimal weiter und
das war es!
Danach kann man das ganze anpassen - probieren Sie ruhig alles mal aus:
klicken Sie einzelne Bereiche ruhig an, skalieren Sie das Diagramm an
den Anfasspunkten oder gehen Sie mit der rechten Maustaste auf das
Diagramm und wählen: Diagrammfläche formatieren. Hier können
professionell in allen Registerkarten Einstellungen wie z. B. Schrift,
Größe und Typ festgelegt werden.
Viele User wissen
gar nicht, welches Potential bei der normalen Erstellung von Diagrammen
in Excel liegt...
Danach gibt es mehre Möglichkeiten
das Diagramm ins Internet zu stellen:
-
schlechteste Möglichkeit: ins PDF umwandeln oder in ein Worddokument
mit copy und past einfügen. Sorry, aber das ist einfach abtörnend.
-
Ins HTM-Format konvertieren im Speichern unter Dialogfeld - besser,
aber der Code ist grausam (bei Excel, dann lieber mit Open Office..):
Effekte
für Image in Html hinzufügen
Der offizielle Tipp zur
Erstellung eines
GIF-Images eines Diagrammes geht so:
Wenn Sie das
Diagramm als HTML speichern wird ein
gerade mal 4KB großes Bild für das Diagramm im gleichnamigen Ordner
erstellt.
Das GIF-Format kann mit Programmen wie
Animake durch Einfügen mehrerer Grafiken als "Film" genutzt werden....
Mit
Programmen wie Corel Draw können Sie präzise Mouseovereffekte erstellen
(Javascript!), ohne von Programmiersprachen Ahnung zu haben!
FastImage
zum Erstellen von Verweissensitiven Grafiken (Das Programm lädt
Grafiken, denen per anpassbaren Masken
verweissensitive
Flächen zugeordnet werden. Danach wird der Quellcode ausgegeben). Daher
eignet sich dieses Programm
wirklich für jeden.
Nachteil: eben nur
beschränkte Animationsmöglichkeiten. Die Crowler von Suchmaschinen
bevorzugen auslesbare Formate!
zurück
----
1. a. Wird oft vergessen: Powerpoint
kann´s auch!
Sie können natürlich auch im Rahmen von
Powerpoint eine Präsentation erstellen und diese als html ausgeben. Bei
Office 2010 wird dann direkt mit Excelmaske gearbeitet. In den älteren
Versionen ist das seperat oder eben durch einfügen eines Images möglich.
Der
Vorteil ist, dass Sie in Powerpoint Animationen erstellen
können (einblenden, ausblenden...), die Sie z. B. mit der Freeware ISpring ins Flashformat
konvertieren können.
Da sind tolle Möglichkeiten für eine
ganze animierte Präsentation drinnen - alles per Freewre - nebenbei
können Sie dann noch einen You Tube-Film einbinden und haben dann eine
individuelle Präsentation, die keine Wünsche offen lässt und ohne ein
Wort Porgrammiersprache erstellt wurde - für einen Designer oder
ambitionierten Homepagebesitzer die sauberste Lösung - Leider wird das
Flashformat nur durch Browserplugins unterstützt - viele Firmen
verbieten inzwischen Flash af dem PC - kostet Performance und die
Sicherheit...Schade, hätte Adobe ein wenig Konkurent gestattet, so wäre
Canvas und Html 5 in weiten Teilen nicht nötig - so die
subjektive Meinung des Sternenhimmelstuermers: Weitere solche Monopole
mit eigenen Cookiemanagement und verdeckten Datenschutzmanagern
gehören abgeschafft!
-----
2. Google Charts - Es gibt zur Zeit
nichts besseres im Freewarebereich
Die
nächste Methode ist die zur Zeit beste und wird von Google angeboten.
Bereits in der Einleitung wurde darauf hingewiesen, dass in Tabellen
und Diagrammen das Wissen unserer Welt zusammengefast wird.
Der
Deal ist dabei folgender: Sie bauen eine Zeile Programmcode in
Ihrer Homepage ein (die Daten für die Erstellung einer Tabelle) und die
Server von Google generieren Ihnen ein Diagrammbild. Ihr Server
benötigt keinen Webspace. Ihr Diagramm wird bei Suchen besser
berücksichtigt.
Dafür erhält Google die Daten.
Skeptiker
werden sagen: Meine kostbaren Daten gehören mir! Aber mal ehrlich, da
wohl niemand interne Daten ins Internet stellt (?) ist dieses Argument
eher mies. Umgekehrt sind die Daten verfügbar und so können
beispielsweise wie im Fall von Grippeepedemien schnell Verläufe einer
Seuche analysiert werden. Das bringt das WEB eher weiter und nur durch
Abgleichen mehrerer Tabellen werden Ergebnisse valide.
Selbst
wenn Google mit Datensammlungen dann Geld macht, so steht im Gegenzug
dann die kostenlose Leistung für Sie eher im Vordergrund. Oder würden
Sie eine Tabelle ins Internet stellen, wenn Sie sie auch gewinnbringend
verkaufen würden?
Den Code für das Diagramm können
Sie sich in einem englischsprachigen
Generator generieren lassen oder selbst zusammenbasteln (englische
Referenz von Google - aber easy und vollständig).
Geben
Sie doch die folgende Zeile einfach in ihr Browserfenster ein: (copy
and past):
http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World
Das
Beispiel zeigt Ihnen ein Kreisdiagramm mit den Flächen 60 % Hello und
40 % World mit Beschriftung.
Das Bild wird übrigens als PNG
angezeigt und kann abgespeichert werden.
Bei
größeren und komplexeren Tabellen wird der Generator Pflicht, da die
Codezeile sonst sehr lang und fehlerträchtig werden kann.
Vorteile
und Nachteile zusammengefast:
Vorteile
-
absolute Browserkompatibilität
- traffic wird gespart
-
Suchmaschinenbewertung optimiert
- relativ leichte Erstellung
-
Wissenschaft wird weiter entwickelt
- keine Anmeldung
Tipp:
Hm, Sie sollten zur Sicherheit ein erstelltes Diagrammbild abspeichern.
Ansonsten ist bei einer Umstellung oder Beendung des Dienstes ihre
Tabelle verloren - man weiß ja nie....
Negativ:
-
extra Erstellung des Codes
- Fällt der Googleserver aus, sind
Sie auch betroffen
- Google erfährt zuverlässig inderekt den
Zugriff (Traffic) auf ihre Seite - mit jedem Aufruf des Codes
zurück
----------
3. Für Bastler - Plotr
mit ein wenig js-Kenntnissen o. k.
Die
folgenden zwei Methoden bereiten dem Sternenhimmelstuermer ein wenig
Bauchschmerzen, da Sie alle etwas gemeinsam haben: mangelnde
Kompatibilität und zur Zeit relativ schwierige Bearbeitung.
Im
Falle des eingestellten Projektes Plotr wird Javascript
zum Zeichnen
verwendet. Da dieses Projekt funktioniert und der freien BSD-Lizenz
funktioniert, hier als Vorschlag zum Download. Bei Plotr handelt sich
um ein Framework, dass ausschließlich anderer programmiersprachen als
Javascript arbeitet. Einfach den Zipordner extrahieren und ohne
Installation sofort einsatzbereit. Als Webmaster brauchen Sie nur noch
sich die Demoseiten (examples) anschauen, den Quellcode anschauen,
anpassen und mit der entsprechenden Javascriptdatei (, die Sie wie auf
der Example-Seite sehen,) verlinken und hochladen. Im ZIP-Archive sind
bereits sämtliche Javascripts einschließlich Prototype enthalten. Also
wirklich nur dieses Archiv herunterladen!
Der Ansatz
ist Klasse - Es gibt verschiedene Diagrammtypen...bitte nicht mit flotr
verwechseln. Für Bastler ist Plotr o. k.
Im
Internet eplorer wird das leider nicht angezeigt werden, so dass eine
sogenannte Fallbacklösung (Einbindung eines Bildes) zum Zuge kommt -
also für den normalsterblichen User: Wollen Sie wirklich alle User mit
dem Internetexplorer und aktivierten No Script in Firefox mit Javascipt
zu unsicheren Handlungen oder Umstellung des Browsers nötigen?
Andere
Ansätze (deutsche Seite) finden Sie hier - auch die Kaufvarianten...
Daher
hier keine weiteren Ausführungen
zurück
----------
4. Canvas
Canvas wird
die Alternative zu Flash werden und von Firefox ,
Chrome, Safari und Opera in den neuesten Versionen
weitgehend unterstützt. Die Microsoft Cooperation zögert
noch, aber wenn die nicht weiterhin Marktanteile verlieren wollen, dann
heißt es: Unterstützt dieses Projekt und setzt euch an die Spitze!
Mit
Canvas wird man in Zukunft Tabellen erstellen können. Erste Ansätze
finden Sie z. B. hier. Nicht uninteressant ist der
Verweis eines Kommentators, dass die Präsentation auch mit einer
Tabelle und css bei einem Säulendiagramm geht. Der Link von der o. a.
Seite ist valide, da dort politischer Inhalt und quasi Werbung für ein
Massenverdummungs- , meinte natürlich Verbreitungs-system gemacht wird,
kein direkter Link.
Diagramme sind quasi ein
Abfallprodukt von Canvas - wie Sie an der animierte rafik sehen können,
aber eine mächtge Alternative
zurück
------
5.
Flash oder Html mit Mouseovereffekten - Mit Corel Draw oder Corel Rave
ohne Programmierkenntnisse
Der Sternenhimmelstuermer
verwies bereits bei der Flash-Erstellung bei den Umweg über Powerpoint
und ispring (freeware), auf die Möglichkeit ohne Quellcode eine Tabelle
mit Effekten auszustatten.
Mit Corel Draw in
Versionen der Grafiksuite unter 11 (einschließlich 11) ist
Corel R. A. V. E. Bestandteil. Damit können Sie Flash - und noch viel
wichtiger GIF-Animationen erstellen.
In den
neueren Versionen bleibt immer noch die Möglichkeit (wie in den alten
Versionen) eine Tabelle zu Zeichnen (oder eine bestehende durch
Vektorisierung zu übernehmen) und danach mit Mousovereffekten zu
versehen.
Die einzelnen ebenen Zeichnen Sie dann,
in dem Sie ein Objekt anklicken und mit Effekt - Rollover in
der Menüleiste die einzelnen Zustände nacheinander bearbeiten:
Dazu
holen Sie sich mit Effekt - Rollover - Rollover bearbeiten
erstmal eine weitere Bearbeitungsleiste hervor.
Sie
haben nun drei neue Zeichenfenster, von denen jeweils eines angezeigt
wird: normal, darüber und angeklickt. Die Registerkarte
werden links unten in der Leiste angezeigt, wo ansonsten ihre Seiten
stehen - dazu kommt der Punkt: Objektbearbeitung beenden.
Zeichnen
Sie einmal ein Quadrat. Klicken es einmal an (Auswählen des Objektes)
und bearbeiten Sie die drei Zustände. Indem Sie einfach dem Dreieck
verschiedene Farben oder Größen zuweisen - Sie können auch ein anderes
Objekt oder Image einbinden. Hinterher vergeben Sie eine absolute
Adressierung mit http....das ist wichtig! Relative Pfade funktionieren
nicht!
Achten Sie beim Mouseovereffekt dabei darauf,
dass sich Objekte nicht mit regulären Objekten auf der Zeichenebene
überschneiden - wenn doch, so können Sie die Grafik immer noch als
Flashanimation verwenden. Corel Draw kann ihr Ergebnis als Flash oder
Html exportieren.
Bei einer Flashanimation ist der
Vorteil, das Sie z. B. für ein Tortendiagramm die einzelnen
Kuchenstücke punktgenau animieren können, um z. B. beim herüberfahren
einen Farbwechsel oder Anklicken einen Sprungpunkt - Hyperlink zu einer
Seite zu setzen.
Das geht beim Rollovereffekt leider
nicht. Hier werden Images verwendet, die bekanntlich quadratisch sind -
so dass beim Herüberfahren mit der Maus nur quadratische Flächen
"ausgetauscht" werden können (das Bild 1 wechselt zu Bild 2 beim
herüberfahren mit der Maus. Nein, auch Corel ist eben nicht
die Quadratur des Kreises gelungen.
Auf sensitive
Grafiken mit Fastimage ging der Sternenhimmelstuermer schon ein. Der
Quellcode bzw. Die Bilder in einer HTML-Seite, die von Corel Draw
erstellt wurde, ist gut bearbeitbar....
Mit ein
wenig Html-Kenntnissen ein animiertes Rollover zu erstellen ist eine
der leichteren Aufgaben und kann mit vielen Programmen oder Handarbeit
mehr oder weniger bequem realisiert werden.
zurück
------
Dann
gibt es diverse diverse Programme wie z. B. 1st chart (deutsch, freeware, nur
Tortendiagramme, keine Installation, Ergebnis nur JPG), die Diagramme
zeichnen und in einem Bildformat abspeichern. Mit ein wenig Suchen
finden Sie schon die passende Software - ohne mehrer hundert Dollar zu
zahlen - was Angesichts der Möglichkeiten von Open Office und Microsoft
Office einfach mal ein wenig übertrieben ist...
Für
professionelle geschäftliche und wissenschaftliche Lösungen
lohnt sich dann schon SPSS - damit meint der Sternenhimmelstuermer
Betriebe, die weltweit agieren oder komplexe wissenschaftliche
Forschungen mit riesigen Datenmengen bewältigen müssen - das ist aber
für den Privatanwender und Kleine Betriebe in der Regel
übertrieben...