Bei Berni...
Tipps und Tricks für den PC und die eigene Homepage. Erstellt mit dem Homepage-Designer der Telekom.

Hier gebe ich Beispiele und Tipps für Nutzer des Telekom Homepage Designer.

Es wird immer wieder einmal nach Hintergrundmusik für die Homepage gefragt, das zu bewerkstelligen, ist recht einfach, ob es aber auch sehr schlau ist, sei dahin gestellt. Ich finde es jedenfalls nicht sehr schön, wenn ich ohne Vorwarnung mit Musik berieselt werde, die nicht immer meinen Geschmack trifft und oftmals auch zu laut ist. Ich habe es hier auch nur zur Demo und als Beispiel, um zu zeigen wie es geht und gebe auch die Möglichkeit, es abzuschalten. Wie geht es also? Den Musiktitel lädt man als Erstes auf sein WEBSpace. An die gewünschte Position seiner Homepage setzt man ein Widget und gibt folgendes als Code ein:
(bei "songadresse.mp3" kommt die Adresse des Songs)

<audio src="songadresse.mp3" controls preload="auto" autobuffer></audio>

Besucher werden sich freuen, wenn die MP3-Datei nicht allzu groß ist, sonst drohen mitunter sehr lange Ladezeiten. Ansonsten läßt es sich beim FireFox, Edge und IE auch oben im TAB ausschalten.

Hier kann man den Sound abschalten


Möchte man das Ganze mit Kontroller und ohne automatischen Start, nimmt man diesen Code:

<audio id="audio_with_controls" controls>
      <source src="songadresse.mp3" type="audio/mpeg" />
       Ihr Browser kennt das HTML5-audio-Element noch nicht.
    </audio>

Des Weiteren, sollte man darauf achten, dass man auch berechtigt ist den Musiktitel auf seiner Seite zu spielen. Die GEMA und auch andere Rechteinhaber, sind da verständlicher Weise nicht sehr erfreut wenn man die Musik als Werbemittel benutzt. Ich habe meine Beispielmusik von http://www.terrasound.de/ . Dort bekommt man günstig GEMA-freie Musik und für private Zwecke sogar kostenlos. Genaueres findet man auf der Seite von Dag Reinbott.

Letztendlich bleibt noch die Möglichkeit, die Musik automatisch und mit Player starten zu lassen:

<audio id="audio_with_controls" controls autoplay>
      <source src="songadresse.mp3" type="audio/mpeg" autoplay="true" />
       Ihr Browser kennt das HTML5-audio-Element noch nicht.
    </audio>

Der aufmerksame Leser, wird bemerkt haben, dass ich im Code das Audioformat in audio/mpeg geändert habe. Das machte ich, weil der Browser Edge mit dem audio/mp4 nichts anfangen konnte und das Abspielen mit einer Fehlermeldung verweigerte. Da sieht man mal wieder, dass man sich seine Seiten wirklich mit verschiedenen Browsern anschauen sollte, damit solche Fehler nicht passieren. Den Hinweis auf eine Optimierung der Seiten für den Firefox halte ich weiterhin für nicht sehr Besucherfreundlich. Ich kann nicht erwarten, dass meine Besucher nur wegen meiner Seiten den Browser wechseln. Vielmehr muss ich darauf achten, dass jeder meiner Besucher das Gleiche zu sehen und hören bekommt.


Das Gleiche wie mit der Musik, kann man natürlich auch mit Videos machen. Dazu lädt man eine Videodatei ins Webspace und gibt in einem Widget den folenden HTML 5 Code ein:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

Zieht das Widget dann an die gewünschte Stelle und schon hat man ein Video auf seiner Seite. HTML 5 funktioniert in allen aktuellen Browsern und mit Rechtsklick ins Bild, können weitere Einstellungen gemacht werden.

Ein YouTube-Video einbinden

Ein YouTube-Video einzubinden und damit seine Arbeiten öffentlich zu machen, ist eigentlich keine große Sache. Man holt sich den Einbettcode, kopiert ihn in ein Widget und fertig.

YouTube Video


Die Galerie

Als Galerie nutze ich, wie schon an anderer Stelle ausgewiesen, die "Coppermine Photo Gallery". Auch sie gefällt mir einfach besser, als die im Designer gegebene Möglichkeit. Ich kann uneingeschränkt viele Bilder in die Galerie laden, sie nach meinen Wünschen sortieren und die Bilder in drei verschiedenen Größen anbieten. Selbstverständlich ist auch die Darstellung als Dia-Show möglich und auch dies mit allen Bildern. Außerdem benutze ich die Vollbilddarstellung der Galerie auch zum Verlinken von Bildern auf meiner Homepage. So kann durch Anklicken des relativ kleinen Bildes, ein weit größeres aufgerufen werden, das dann mit einem weiteren Klick einfach wieder geschlossen wird. Das ist einfacher als der Aufruf über den Designer, der dann ein Bild in festgelegter Größe öffnet, das dann erst wieder umständlich geschlossen werden muss.

Eingebunden in meine Homepage habe ich das Ganze dann wieder als i-frame, den ich in ein Widget eingebunden habe. Man könnte das auch direkt im Widget machen, das ist aber Geschmackssache. Ich mag es nicht, wenn sich Scrollleisten am rechten Rand und unten öffnen, damit man die ganze Seite der Galerie darstellen kann und das unterbinde ich mit dem i-frame einfach und gebe dafür eine feste Größe an. Für die Galerie habe ich ein Design gewählt, das relativ klein ist und sich leicht an die Größe meiner Homepage anpassen läßt, dann noch die Farbgebung an meine Seite angepaßt und fertig ist eine Seite, in meiner Seite, die sich wunderbar an die Gegebenheiten anpaßt.

Ich habe die Galerie jetzt auch wieder hier bei der Telekom eingefügt. Im Homepage Designer braucht man dazu keinen i-frame mehr. Man gibt einfach die Adresse ein und fertig. Danach nur noch den Frame in die gewünschte Position und Größe bringen.

Der Blog (Serendipity 2.0)

Auf der Seite Gelsenkirchen habe ich meinen Blog. Auch ihn habe ich in meine Homepage integriert. Der Blog, der im Telekom Designer angeboten wird, ist mir zu umständlich und hat einfach viel zu wenig Möglichkeiten. Ich benutze den Serendipity 2.0 weil er sich leicht an meine Seiten anpassen läßt und einfach zu bedienen ist. Schon die Eingabe eines neuen Artikels ist mit dem eingebundenen grafischen WYSIWYG-Editor ein Vergnügen. Man hat alle nur erdenklichen Möglichkeiten Text, Grafiken, Bilder oder Videos einzubinden und alles nur mit einem Klick. Für Bilder und Videos hat man eine eigene Mediendatenbank, in der man die Bilder lädt und sie dadurch jeder Zeit zur Verfügung hat. Natürlich kann man Grafiken und Bilder auch bearbeiten, in der Größe anpassen etc.

Der WYSIWYG-Editor in Serendipity


Mit diesen Möglichkeiten, konnte der Blog im Creator leider überhaupt nicht mithalten und auch die im Designer verfügbare Variante, tut sich schwer damit. Als weiteres "Schmankerl" kann man den Spamschutz hervorheben. Er schätzt die Kommentare selbständig ein und ab einer einstellbaren Prozentzahl, wird der Kommentar automatisch moderiert, das heißt er wird erst nach Freigabe durch den Admin auch veröffentlicht. Der Spamschutz ist lernfähig und funktioniert wirklich ausgezeichnet.

Die Übersicht zum Bearbeiten der Kommentare


Den Blog kann man mit diversen Plugins auf seine Bedürfnisse anpassen. Ob es nun ein Plugin zum einfachen Einfügen von Youtube-Videos ist oder eins für das automatische Update, alles funktioniert kinderleicht. Das automatische Update zeigt beim Programmstart an, ob es ein Update gibt und mit einem Klick kann man es dann ausführen. Das ist für das Programm selbst so aber auch für alle Plugins, einfacher geht es kaum. Natürlich bekommt man bei jedem Kommentar auch eine Nachricht per E-Mail, bei der man dann, je nach Einstellung, die Möglichkeit hat, den Kommentar freizugeben oder zu löschen und das auch wieder mit einem Klick. Das ist zum Beispiel gut, wenn man mal länger außer Haus ist und das Ganze über das Smartphone verwaltet. Wer will, kann einzelne Gruppen öffnen und eine ausgeklügelte Benutzer-Verwaltung verwenden. Die Möglichkeiten sind also wirklich riesig und lassen kaum einen Wunsch offen. Die Creator-Variante, kann da auf keinen Fall mithalten, deshalb kann ich es eigentlich nur empfehlen. Das Einfügen in die vorhandene Homepage, ist genauso einfach, wie bei der Galerie und wird auch auf gleicher Weise gehandhabt. Bei eventuellen Fragen stehe ich auch hier jeder Zeit gerne zur Verfügung.

Berni...

Startmenü im Blog