News, Stories & Inspiration zu unserer Multimedia-Software

Widgets – Was ist das und wie peppe ich meine Homepage damit auf?

Widget, wieder eines dieser Worte, das jeder irgendwie kennt aber niemand richtig erklären kann. Was ist also ein Widget? Das Wort allein ist eine künstlerische Wortneuschöpfung aus Wi(ndow) und (Ga)dget, also Fenster und Zubehör, aber diese Begriffserklärung hilft noch nicht wirklich, oder? Ein Widget ist eine dynamische Komponente eines grafischen Fenstersystems, also ein Miniprogramm für Webseiten. Viele kennen diese Google-Maps, Uhren, Wetteranzeigen oder Besuchszähler auf Webseiten. Sie aktualisieren sich von selbst und in einigen Fällen kann man mit ihnen arbeiten.  Da Widgets sehr individuell gestaltet werden können und eine interessante Alternative darstellen, dachte ich mir, warum nicht ein Widget in meine Homepage einbauen und ihr so den letzten Schliff verleihen?
Natürlich stellt sich auch hier die Frage, wie das ganze funktioniert. Zum Glück kenne ich mich ein wenig mit dem MAGIX Web Designer 7 aus, da sollten wir diese Wissenslücke doch eigentlich füllen können.

Zwei einfache Wege zum Einpflegen von Widgets in eure Website

Wenn ihr euren MAGIX Web Designer gestartet habt (bei mir aktuell in Version 7), könnt ihr unter „Datei/Neu/Webseite“ eine neue Webseite öffnen. Hier startet ihr allerdings mit einem leeren Blatt, das ohne Vorerfahrung schwer zu füllen ist. Daher empfiehlt es sich eher, in der Design-Galerie (befindet sich am rechten Bildschirmrand an oberster Stelle der Galerien) unter „Themen“ eine Website-Vorlage zu wähle und diese nach euren Wünschen zu veränder. Macht dazu einfach einen Doppelklick auf die Vorlage oder zieht sie auf die leere Seite. In meinem Fall habe ich mir das „Schnappschuss Thema“ ausgesucht und eine beliebige Seitenvorlage in meine Webseite gezogen. Ihr könnt nun alle Texte und Bilder ganz einfach austauschen, indem ihr direkt in den Text klickt oder die Bilder markiert.

Ich habe nun die Überschrift geändert und möchte eine Karte von Google Maps einfügen, um auf der Webseite zu zeigen, wo man „Florentines Fotoladen“ findet. In diesem Fall geht ihr in der Design-Galerie auf „Widgets, Formulare und mehr“, „Andere Widgets“ und dann auf „Google Maps“. Dort gebe ich nun meinen Standort ein, beispielsweise Berlin und lasse die Berlin-Karte aufrufen.Klickt auf den Verlinken-Button, der einer Kettenmasche ähnlich ist. Nun öffnet sich ein Fenster, in dem ihr unter anderem lesen könnt: „HTML-Code zum Einbetten in eine Website“. Markiert den dazugehörigen HTML-Code, kopiert diesen und klickt anschließend auf „einfügen“. Nach einigen Sekunden erscheint die Karte auf eurer Webseite. Ihr könnt sie nun frei bewegen und der gewünschten Größe anpassen. Das Tolle an diesem interaktiven Widget ist, dass ihr in der Webseitenvorschau schon in die Ansicht der Karte eingreifen könnt. Ihr könnt sie vergrößern und auch innerhalb des Fensters verschieben. Dieses Beispiel erklärt meiner Meinung nach sehr gut, was Widgets ausmacht. Es sind kleine Programme, die zuallererst eure Seite aufpeppen, aber auch selbstständig funktionieren. Ihr könnt ins Widget, wie zum Beispiel die Ansicht von Berlin, ohne Probleme eingreifen.

Für die, die noch Konzentration übrig haben, eine weitere Methode

Die zweite Variante, Widgets in die Webseiten einzubauen, ist etwas spezieller, macht aber meiner Meinung nach sogar mehr Spaß, sobald man weiß wie es funktioniert. Hierbei geht ihr auf Internetseiten, auf denen ihr euch eigene Widgets erstellen könnt. Ich habe mich für mein vereinfachtes Beispiel, für eine Wetterseite, entschieden. Ich möchte auf meiner Seite also anzeigen, wie das Wetter in meinem Bezirk ist. Für solche Widgets gibt es viele verschiedene Anbieter. Sucht euch also am Besten einen aus, der kostenfrei ist, dann freut man sich umso mehr.
Sobald ihr den HTML-Code für euer individuelles Widget habt, wählt ihr eine Fläche auf eurer Webseite aus und markiert diese. Klickt nun auf „Extras/Webeigenschaften“ oder den Short- Cut „Umschalt+STRG+W“ und wartet, bis sich das Fenster für „Webeigenschaften“ öffnet.

Das Einfügen von eigens erstellten Widgets funktioniert beim MAGIX Web Designer 7, wie auch beim Xara Designer Pro X, über Platzhalter-Technologie.


Geht also auf „Platzhalter“:

1 markiert „Mit HTML-Code ersetzen“
2 fügt euren HTML-Code bei „HTML code (body)“ ein
3 setzt ein Häkchen bei „Platzhalter-Bild automatisch neu
erstellen“
4 geht auf „Ok“ …und fertig ist das Widget.

Ich hoffe euch haben diese Zwei Varianten geholfen und ihr habt nun viel Spaß beim Aufpeppen Eurer Homepage. Zum erstellen eines WordPress-Blogs geht es hier weiter.

 

 

 

 

One comment

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *