Neues aus dem Jahr 2013 sind Animationen und Reiseberichte

  1. Zum Inhalt springen
Monika  &  Klaus

www.klamonfra.de

Neues aus dem Jahr 2013 von Monika und Klaus sind Animationen und Reiseberichte

18Dez2013

Webdesign: Datumsanzeige


Auf den Seiten "Hilfe für Bediener" und "Wissenswertes" haben wir das Datum der Veröffentlichung beigefügt. Dadurch ist es für uns einfacher nachzuvollziehen, wann wir welche größeren Veränderungen vorgenommen haben.

Und für die jeweilige Datumsanzeige haben wir als Hintergrund ein kleines Bild mit einem Kalenderblatt genommen.


30Nov2013

Webseiten: Adventskalender 2013


Unser Adventskalender ist schon Tradition. Hinter den Türchen verstecken sich einige unserer schönsten Bilder aus dem diesjährigen Irlandurlaub.

Eine schöne Adventszeit wünschen Monika und Klaus.


02Jul2013

Webdesign: Seit sechs Jahren online!


Im vergangenen Jahr haben wir einige neue Animationen auf unsere Website eingestellt. Dazu kamen der animierte Banner, das animierte Logo, schräge Texte und viele Optimierungen, die unseren Webauftritt auch bedienerfreundlicher gestalten. Natürlich sind auch neue Bilder von Irland und Ibiza in unsere Fotogalerie gewandert. Und unsere Monatsbilder werden nun in einer eigenen Galerie gesammelt und können in einer 3-D-Umgebung durchgeblättert werden.

Als letztes haben wir dann die Seite "Reiseberichte" eröffnet. Diese wird nach unserem diesjährigen Irland-Urlaub mit weiteren Informationen und den dazugehörigen Bildern ergänzt. Unser Webauftritt wird damit noch vielfältiger und für unsere Besucher hoffentlich interessanter.

Die 40.000 haben wir übertroffen, insgesamt hatten wir schon 40.030 Besucher und 437 Gästebucheinträge.

Herzlichen Dank für die zahlreichen Kommentare und Besuche und für das nächste Jahr wünschen wir weiterhin viel Spaß auf unserer Website!

Monika und Klaus


31Mai2013

Webseiten: Reiseberichte


Mit unseren "Reiseberichten" möchten wir Ihnen ein paar Erfahrungen und Tipps für Ihre eigene Urlaubsplanung geben.

Wo kann man gut essen, an welchen Orten lohnt sich die Mitnahme einer Kamera, und was es in dem Urlaubsland sonst noch zu sehen gibt.

Als Erstes berichten wir von unseren Urlauben auf die grüne Insel - Irland.


16Apr2013

Webseiten: Anfangsbuchstaben bei Über uns


Die Anfangsbuchstaben der einzelnen Kapitel auf der Seite "Über uns" werden mit der gleichen Schrift wie bei unserem Logo dargestellt. Hierfür ist lediglich im CSS (Cascading Style Sheet) der Seite "Über uns" die folgende Zeile zu ergänzen: ".rahmen p:first-letter { font: italic 4em 'Tangerine', serif ; padding: 0 .1em 0 0 }".

Für den Internet Explorer musste allerdings der Schriftschatten entfernt werden, da sonst der Internet Explorer abstürzt!


14Apr2013

Webdesign: Unser Logo


Wir haben unseren Schriftzug "Monika & Klaus" im Kopf jeder Seite ein wenig verschönert und animiert. Gehen Sie mit dem Mauszeiger über den Schriftzug um den Effekt zu sehen.

Wie wir das realisiert haben beschreiben wir unter "Bewegung von einzelnen Buchstaben".


13Apr2013

Webseiten: Zeilenumbruch erzwingen


Auf unserer Startseite befindet sich auf der rechten Seite ein Hinweis zu den Neuigkeiten bei unserem Webauftritt. Surft man aber mit einem kleinen Monitor im Internet ging das Wort "Aktuelles" über den Rand hinaus. Durch eine kleine Ergänzung im CSS (Cascading Style Sheet) sorgen wir für den passenden Textumbruch. Genau erklärt wird es unter "Wie erzwinge ich einen Zeilenumbruch bei einem langen Wort?".


12Apr2013

Webseiten: Galerie der Monatsbilder


Die "Monatsbilder" der vergangenen Jahre werden ab heute in einer eigenen Galerie präsentiert.

In dieser Galerie werden die Bilder in einer virtuellen 3-D-Umgebung dargestellt, auch bekannt unter dem Begriff "Cover-Flow-Effekt", und wurde unter anderem bei Apples iTunes eingesetzt. Die grundlegende Idee ist das animierte Durchblättern eines Bilderstapels.

Das Blättern in dem Bilderstapel funktioniert mit den Pfeil-Tasten "Vor" und "Zurück" auf Ihrer Tastatur, mit den Schaltflächen "Bild zurück" und "nächstes Bild" in der Galerie, durch Klicken auf ein Bild am Rand, oder mit dem Mausrad.

Viel Vergnügen wünschen Monika und Klaus.


04Apr2013

Website: Optimierungen


Solange die Syntax der CSS (Cascading Style Sheet)-Eigenschaften für zum Beispiel Farbverläufe oder Schatten noch nicht endgültig feststehen, ist es den Herstellern der Browser möglich diese CSS (Cascading Style Sheet)-Eigenschaften mit zusätzlichen Vendor-Prefixe (Lieferanten-Vorsatzcode oder -Vorzeichen) (Lieferanten-Vorzeichen) zu versehen. Dadurch entsteht für den Webdesigner ein sehr großer Aufwand die CSS (Cascading Style Sheet)-Formate entsprechend zu definieren, da es für die verschiedenen Browsern unterschiedliche Präfixe gibt und diese noch nicht einmal valide sind! Die gängigen Vendor-Prefixe (Lieferanten-Vorsatzcode oder -Vorzeichen) sind:

Durch den Einsatz eines kleinen JavaScript (objektorientierte Programmiersprache) von Lea Verou kann man auf diese zusätzlichen Deklarationen verzichten, und wir konnten die Vendor-Prefixe (Lieferanten-Vorsatzcode oder -Vorzeichen) bei den Farbverläufen, den Schatten und den Rundungen löschen. Durch diese Maßnahme haben wir die Größe unserer Haupt-CSS (Cascading Style Sheet)-Datei für die Startseite um 4,2 kB (Kilo Byte) und bei den anderen Seiten um 7,3 kB (Kilo Byte) verringert.

Das JavaScript (objektorientierte Programmiersprache) selber wird im Kopf-Bereich einer Seite eingebunden. Es ermittelt den Browser mit dem man im Internet ist, sucht die CSS3 (Cascading Style Sheet)-Formate raus und setzt die benötigten Präfixe voran.


30Mär2013

Webseiten: Bilder auf Startseite


Auf unserer Startseite hatten wir bis heute ein Bild für die Suchfunktion, ein Bild für den RSS-Feed (Really Simple Syndication) und ein Bild für das "Ökoportal". Das sind drei zusätzliche HTTP (Hypertext Transfer Protocol, deutsch: Hypertext-Übertragungsprotokoll)-Anfragen zur Übertragung der Bilder vom Server.

Mit Hilfe der Technik eines CSS (Cascading Style Sheet)-Sprites lässt sich, wie in unserem Fall, die Anzahl der Server-Anfragen für die Anzeige der Bilder auf eine reduzieren. CSS (Cascading Style Sheet)-Sprites bezeichnet dabei eine Bilddatei in der alle drei Einzelbilder enthalten sind. Die einzelnen Bildausschnitte dieser Gesamtgrafik werden dann mit der CSS (Cascading Style Sheet)-Eigenschaft background-position den jeweiligen Bildelementen zugewiesen. Der Browser lädt diese Gesamtgrafik mit einer Größe von 4 kB (Kilo Byte) wesentlich schneller als die drei Einzelbilder mit der insgesamt gleichen Größe, weil die HTTP (Hypertext Transfer Protocol, deutsch: Hypertext-Übertragungsprotokoll)-Anfrage keine zusätzlichen parallelen Download-Vorgänge vornehmen muss.

Wir haben unsere Bilder mit diesem CSS-Sprite-Generator (de.spritegen.website-performance.org: Bemerkung am 11.06.2018: leider ist diese Seite nicht mehr online) zusammengesetzt.


29Mär2013

Webdesign: suchmaschinenfreundliche URL (Uniform Resource Locator (world wide web address))


Adressen von dynamischen Webseiten, zum Beispiel bei unserem Grußkartenversand, können durch einen Befehl in der .htaccess-Datei auf einfache Weise suchmaschinenfreundlich umgewandelt werden.

Ein interner Querverweis in der Form "http://www.klamonfra.de/grusskarte/grusskarteschreiben.php?pic=blutpflaume.JPG" ist für Suchmaschinen, wenn überhaupt, nur schwer zu lesen. Aus diesem Grund haben wir unsere Adresspfade für den Grußkartenversand, für die einzelnen Gästebuchseiten und für die Übersicht unserer Fotogalerie umgeschrieben.

Mit welcher Regel wir das umgesetzt haben wird unter "Wissenswertes" auf der Seite "Codeschnipsel" erklärt.


28Mär2013

Webseiten: Startseite


Auf unserer Startseite können nun die Verweise unter "Aktuelles" im ganzen Bereich angeklickt werden und sind damit anwenderfreundlicher gestaltet.

Mit welcher Technik das realisiert wird erfahren Sie unter "Wissenswertes" auf der Seite "Bedienungen".


17Mär2013

Webseiten: Animation hinter einem Vorhang


Eine neue Animation finden Sie auf der Seite "Intro für eine Diashow". Hier verbirgt sich etwas hinter einem Vorhang.


10Mär2013

Webdesign: Qualidator


Bei der Bewertung unserer Website durch den Qualidator hatten wir bereits im Dezember 2011 erstaunliche 97,9% erreicht. Heute haben wir zwei weitere Punkte erledigt und kommen in der Gesamtbewertung auf 99,3%.

Wie wir heraus gefunden haben, wird auch das Anbieten eines Newsletters bewertet und eine Seite sollte die Nutzungsbedingungen aufführen. Dies war bis jetzt im Disclaimer beschrieben und so brauchten wir diese Seite nur umzubenennen.


09Mär2013

Webdesign: RSS-Feed


Unser RSS-Feed (Really Simple Syndication) erhält ein neues Design. Die neuen Einträge werden mit Überschriften, Absätzen und dem Datum der Aktualisierung angezeigt.

Durch das Schreiben der Texte in der Form "<![CDATA[<h1>Überschrift.</h1> <p>Und irgendein Text.</p>]]" hat man alle Möglichkeiten bei der Gestaltung der Einträge. Über diesen Querverweis können Sie sich das neue Design direkt ansehen.


22Feb2013

Webdesign: Favicon


Ein Favicon, die Kurzform für "favorite icon" (Favoriten-Symbol), ist ein kleines Bild oder Logo, das in Ihrem Browser links von der Webseitenadresse angezeigt wird. Dieses Logo wird ebenfalls bei den Registerkarten und in Ihrer Favoriten-Lesezeichenleiste angezeigt und damit unsere Website auf wiedererkennbare Weise gekennzeichnet.

So ein Favicon hatten wir von Anfang an auf unserer Website eingebunden, aber es wurde Zeit unserem Favicon ein neues Design zu geben.

Das neue Logo stellt die Strahlen einer Sonne dar und ist ebenfalls mit unserem Kurzzeichen versehen.


08Feb2013

Webseiten: Animationen mit einer Lupe


Einige Bilder können auf der Seite "Mit dem Lupeneffekt Bilder einer Webseite vergrößern" vergrößert werden. Zieht man die Maus auf ein Bild, wird eine Lupe eingeblendet und der Ausschnitt des Bildes wird vergrößert.


02Feb2013

Webseiten: Spielerei


Und eine weitere Spielerei mit einem unserer Bilder finden Sie wieder auf der Seite Animationen 6. Hier können Sie das Bild eines Hundekopfes zusammen stauchen.


05Jan2013

Webseiten: Banner


Der Werbebanner von "Gonzalez Musica Latina" auf der Seite Musik wird beim Überfahren mit der Maus gedreht und zeigt einen Werbetext. Das Drehen wird allerdings nur von Browsern mit 3D-Unterstützung angezeigt.

Die Technik die dahinter steckt wird auf der Seite Tutorial unter "Werbebanner" beschrieben.


02Jan2013

Webseiten: Animationen


Einen kleinen Gimmick zum neuen Jahr finden Sie auf der Seite Animationen 5. Hier können Sie einen Wollkopfgeier aus der Adlerwarte in Kintzheim in einen Gummiadler verwandeln.


01Jan2013

Webseiten: Über uns


Die erste Veränderung im neuen Jahr betrifft das Überblenden von einem "schwarz/weiß-Bild" zu einem "Farbbild" durch Überfahren mit der Maus und ist auf der Seite "Über uns" realisiert. Dabei wird das "schwarz/weiß-Bild" langsam ausgeblendet.

Wie das genau realisiert wird, ist auf der Seite Optimierung beschrieben. Dort kann man auch den Vergleich zu der bisherigen Version testen.

Zum Seitenanfang springen