Neues von Monika und Klaus im Jahr 2014 waren schöne Tutorials

  1. Zum Inhalt springen
Monika  &  Klaus

www.klamonfra.de

Neues aus dem Jahr 2014 von Monika und Klaus auf www.klamonfra.de (Klaus und Monika Franz) sind schöne Tutorials

31Dez2014

Webdesign: Die englische Startseite und die Fotogalerie auf HTML5 (HyperText Markup Language)


Heute habe ich die englische Startseite auf HTML5 (HyperText Markup Language) umgesetzt und dabei sind einige Verbesserungen eingeflossen.
Die Anzeigen unter "News" sind übersichtlicher geschrieben und dadurch konnte auf drei Klassenangaben (datum, news, emboss) verzichtet werden. Außerdem ist der Sprung zu der beschriebenen Neuigkeit nun über den ganzen Block zu erreichen, also auch über das Datum.
Die Überschrift und das Bild des Monats haben einen Schatten erhalten. Und auch auf dieser Seite ist der Text auf dem Papierhintergrund freundlicher gestaltet und damit besser zu lesen.


Die Fotogalerie mit den einzelnen Unterseiten und der Galerie der Monatsbilder sind auf HTML5 (HyperText Markup Language) umgestellt. In dem Zuge wurde der HTML (HyperText Markup Language)-Code bei der Anzeige der einzelnen Bildern verringert, die Übersicht der einzelnen Untergalerien neu gestaltet und ebenfalls erheblich vereinfacht. Schließlich wurde auch die Technik der auffahrenden Garagentore auf CSS3 (Cascading Style Sheet) umgestellt. Dadurch konnte auf jQuery und JavaScript (objektorientierte Programmiersprache) für diese kleine Animation verzichtet werden.
Bei dem animierten Fotoplayer ist das Menü jetzt immer eingeblendet. Und beim Start der Foto-Show wird die Übersicht der "Neuen Bilder" eingeblendet. Hier hatte sich ein Fehler eingeschlichen, denn beim Aufruf des JavaScript (objektorientierte Programmiersprache) in der "index"-Datei fehlte hinter "NeueBilder/" der Schrägstrich.
In allen Dateien "photos.xml" wurde die Schriftgröße für die Bildbeschriftung auf "16" eingestellt. Damit ist der animierte Fotoplayer wieder voll funktionsfähig.


22Dez2014

Webdesign: Reiseberichte, das Bilderpaar-Such-Spiel und das Schiebe-Puzzle auf HTML5 (HyperText Markup Language)


Die Reiseberichte und die "Puzzlespiele", das Spiel "Finde die Paare" und das Online-Spiel "Schiebe-Puzzle" wurden alle auf HTML5 (HyperText Markup Language) umgestellt. Außerdem wurden die Spiele aus den Adventskalender 2013 und 2014 eingebunden.


19Dez2014

Webdesign: Animationen, englische Seiten und Grußkartenversand auf HTML5 (HyperText Markup Language)


Heute wurden die Animationen, alle Seiten des Grußkartenversands, die Seite der Diashows sowie die englischen Seiten "Diashows" und alle Seiten der "Neuigkeiten" auf HTML5 (HyperText Markup Language) umgestellt.
Bei dieser Umstellung konnten auch die ganzen div (division = Bereich)-Container für die einzelnen Bilder beim Grußkartenversand entfernt werden.

Damit aber auch die englischen Seiten korrekt angezeigt werden, wurden die englischen Seiten "Sitemap", "Contact" und "About us" umgestellt.


13Dez2014

Webdesign: Weitere Seiten auf HTML5 (HyperText Markup Language)


Die nächsten Seiten sind mit "Wissenswertes" und die zugehörigen Unterseiten, "Partnerseiten", "Musik in der Fotogalerie", "Unser Banner" und "Fotopartner" auf HTML5 (HyperText Markup Language) umgestellt, und auch auf diesen Seiten wurde der Hintergrund mit einem Blatt Papier umgesetzt.

Der Code für den rollenden Werbebanner wurde so umgeschrieben, dass der Banner auch im Internet Explorer funktioniert.


Die Seiten "Hilfe für Besucher" und die zugehörigen Unterseiten, "Datenschutz", "Nutzungsbedingungen", "Impressum", "Kontakt", "Sitemap" und "Über uns" sind nun ebenfalls auf HTML5 (HyperText Markup Language) und mit dem Papierhintergrund umgestellt.

Auf der Seite "Über uns" sind die Bilder nun optisch mit nach oben geknickten Ecken dargestellt. Beim Überfahren mit der Maus wird das Bild farbig und die Ecken werden wieder flacher. Wie das genau funktioniert wird unter gebogene Schatten und "Sanfte Überblendung" beschrieben.

Die weiteren Seiten der Neuigkeiten aus den einzelnen Jahren sind am 8 Dezember auch auf HTML5 (HyperText Markup Language) umgestellt.


06Dez2014

Webdesign: Umbau der Website auf HTML5 (HyperText Markup Language)


Im Laufe der nächsten Wochen werden die Seiten auf HTML5 (HyperText Markup Language) umgestellt. Zuerst wird hierfür die Seite "Neuigkeiten aus 2007" optimiert und umgebaut.

Die folgenden Details wurden dabei umgesetzt.

Als Folge all dieser Optimierungen wurde die Seite um einige kBytes kleiner und übersichtlicher.


27Nov2014

Webseiten: Adventskalender 2014


Unser Adventskalender ist schon Tradition. Hinter den Türchen verstecken sich einige unserer schönsten Bilder aus 2014 unter dem Motto "Malereien".

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


16Nov2014

Tutorial: Accordion-Image-Slider und 3D Slider mit CSS3 (Cascading Style Sheet)-Transitionen


Der Accordion-Image-Slider ist aus dem optimierten Accordion-Effekt aus dem Artikel "Accordion-Effekt mit einer interessanten Optik" entstanden, deren ausführliche Beschreibung man am Ende des genannten Artikels findet. Für den Accordion-Image-Slider müssen aber ein paar Dinge angepasst werden. Zum Beispiel werden die Buttons nicht in hell grau sondern dunkler dargestellt damit die Bilder besser zur Wirkung kommen.

Den Artikel über den "Accordion-Image-Slider" weiterlesen: Accordion-Image-Slider mit CSS3-Transitionen


Die 3D Slider auf dieser Seite sind eine Weiterentwicklung der zweidimensionalen Cycle Slider. Auch hierzu gibt es im Internet bereits viele Beispiele, die aber fast alle mit JavaScript (objektorientierte Programmiersprache) und jQuery-Plugins realisiert wurden. Der erste 3D-Slider soll dabei einer Bilderbox oder einem Würfel gleichen.

Den Artikel über den "3D-Slider" weiterlesen: 3D Slider mit CSS3 (Cascading Style Sheet)-Transitionen und Keyframe-Animationen


28Sep2014

Tutorial: Neue Tutorials


Mit einem animierten Cycle Slider kann man sehr stilvoll seine Bilder oder sein Portfolio präsentieren. Im Internet gibt es bereits sehr viele unterschiedliche Arten von Slider, die zum Teil mit Hilfe von jQuery-Plugins oder JavaScript (objektorientierte Programmiersprache) animiert werden. Es stehen dabei viele Varianten der Navigation und Überblendungseffekte zur Auswahl. Aber Dank CSS3 (Cascading Style Sheet) kann man einen solchen Slider auch völlig ohne JavaScript (objektorientierte Programmiersprache) und nur mit CSS3 (Cascading Style Sheet)-Transitionen und Keyframe-Animationen realisieren.

Den Artikel über den "Slider" weiterlesen: CSS3 Slider mit CSS3-Transitionen und Keyframe-Animationen


Einen fantastischen 3D-Effekt erzeugt man durch eine Bewegungsparallaxe. Bei diesem Effekt bewegen sich manche Elemente, beim Überfahren eines Bildes mit dem Mauszeiger, langsamer als andere und damit entsteht beim Betrachten des Bildes ein Gefühl der Tiefe. Das hier dargestellte Beispiel ist nur mit HTML5 (HyperText Markup Language) und CSS3 (Cascading Style Sheet) realisiert.

Die Umsetzung zum "3D-Effekt": Einfaches CSS3 mit 3D-Effekt und Bewegungsparallaxe


17Aug2014

Tutorial: Animierte Tag-Cloud oder Schlagwortwolke


Eine Schlagwortwolke ist eine Darstellung von wichtigen Worten die in einem Text oder wie hier auf einer Website vorkommen. Die wichtigsten Schlagwörter werden dabei durch eine größere oder dickere Schrift besonders hervorgehoben. Es gibt im Internet viele Generatoren für Tag-Clouds, Word Clouds oder Schlagwortwolken, aber ich werde mir selber eine Schlagwortwolke erstellen.

Wie eine Tag-Cloud realisiert wird finden Sie hier: Animierte Tag-Cloud oder Schlagwortwolke


So eine CSS3 (Cascading Style Sheet)-Animation wird mit @keyframes-Regeln erstellt. Eine Wolke, wie in diesem Beispiel, durchläuft in einer festgelegten Zeit verschiedene Zustände oder Schlüsselbilder, die sogenannten Keyframes. Jedem Bild können dabei unterschiedliche Eigenschaften, wie Größe oder Position, zugewiesen werden.

Was Sie über eine Wolkenanimation wissen müssen: CSS3-Animation mit mehreren Wolken


25Jul2014

Optimierung: Weiterleitungen in der .htaccess-Datei und suchmaschinenfreundliche URL (Uniform Resource Locator (world wide web address))'s


Die sogenannte .htaccess-Datei ist eine Server-Konfigurationsdatei, in der verzeichnisspezifische Einstellungen auf den Webservern vorgenommen werden können. Die Datei selber ist eine reine Textdatei, hat keinen Namen und muss die Endung .htaccess haben. Mit ihr lassen sich dann unter anderem Zugriffsberechtigungen für Dateien und Verzeichnisse oder automatische Weiterleitungen einstellen.

Den Artikel über eine eindeutige, sprechende URL (Uniform Resource Locator (world wide web address)) finden Sie jetzt auf: Wie wird eine HTTP-Weiterleitung eingerichtet?


02Jul2014

Webdesign: Seit sieben Jahren online!


Um unseren Webauftritt noch professioneller zu gestalten, werden wir in den nächsten Monaten diese Website auf HTML5 (HyperText Markup Language) umstellen.

Laut unserer Statistik hatten wir bis heute 48.451 Besucher und auch in diesem Jahr haben wieder ein paar Gäste einen netten Gruß in unser Gästebuch geschrieben, insgesamt haben wir damit 451 Einträge.

Wir sagen "Herzlichen Dank" für die zahlreichen Besuche und wünschen Ihnen für das nächste Jahr viel Vergnügen bei Monika und Klaus!


10Mai2014

Tutorial: Weitere Tutorials


Mit Hilfe von jQuery habe ich einen Lupeneffekt umgesetzt und betrachte die Bilder durch ein Vergrößerungsglas. In Wirklichkeit wird eine große Version des Vorschaubildes geladen und nur dort angezeigt, wo sich gerade die Lupe befindet. Somit entsteht der Effekt, dass die Lupe das dargestellte Bild vergrößert.


Funktioniert der Fade-Effekt auch bei einer größeren Diashow? Aufbauend auf den vorherigen Artikel "Kleine Diashow mit dem Fade-Effekt ohne JavaScript (objektorientierte Programmiersprache)" habe ich die Diashow auf dieser Seite mit 25 Bildern aufgebaut um die Performance zu testen und damit die Frage zu beantworten.


Ein Fade-Effekt für eine kleine Diashow ist mit CSS3 (Cascading Style Sheet) sehr einfach zu realisieren und sorgt für einen harmonischen und weichen Ablauf beim Überblenden von Elementen. Und der hier vorgestellte Effekt kommt dabei ganz ohne JavaScript (objektorientierte Programmiersprache) aus.

Auch diese Tutorials sind bei den Codeschnipsel abgelegt.


27Apr2014

Tutorial: Verschiedene Tutorials


Den sanften Wechsel zwischen zwei Bildern kann man sehr einfach mit der Eigenschaft ":hover" erreichen, während der Anwender mit dem Mauszeiger über ein Bild fährt.
Das wird immer mal benötigt und wie das geht lesen Sie bei den Tutorials


Beim Schreiben des alten Briefes nehme ich eine Feder zur Hand. Aber leider trocknet die Tusche sehr schnell aus und beim Schreiben passieren mir leider so einige Fehler.


Eine kreative Lösung um eine Werbung auf einer Webseite zu platzieren, ist ein Eselsohr zum Aufklappen, oft auch unter dem Namen Pagepeel oder Sexy Curls zu finden.


Ich möchte eine Diashow oder auch Slideshow im Kopf einer Website automatisch ablaufen lassen. Hierbei sollen beliebig viele Bilder einer Fotogalerie eingebunden werden können und eine sanfte Überblendung zwischen den einzelnen Bildern stattfinden.

Alle Tutorials finden Sie unter: Tutorials bei webdesign-klamonfra.de


08Apr2014

Webdesign: Breadcrumb Navigation als Navigationshilfe


Eine Brotkrümelnavigation (englisch: breadcrumb navigation) hilft hauptsächlich bei der Orientierung von tief verschachtelten Pfaden innerhalb einer Website. Solch eine Navigationshilfe zeigt dem Besucher die aktuelle Position in Bezug auf die übergeordneten Seiten und er kann darüber sehr schnell zur einer der höher gelegenen Ebenen/Seiten dieser Website wechseln.

Den Artikel über die "Breadcrumb Navigation" weiterlesen: Wie erstellt man eine Navigationshilfe mit PHP?


16Mär2014

Webdesign: Der Umgang mit externen Seitenaufrufe und etwas zum Thema "PIE"


Ein umstrittenes Thema bei der Gestaltung von Webseiten ist das Öffnen von externen Seiten in neuen Fenstern. Das Gremium zur Standardisierung der Techniken rund um das Internet, das W3C (World Wide Web Consortium), empfiehlt, dass es jedem Benutzer freigestellt ist wie er mit dem Aufruf zu einer anderen Webseite umgeht. Der Besucher kann sie im gleichen oder in einem neuen Fenster oder Tab öffnen.

Den Artikel zum "Umgang mit fremden Seitenaufrufen" finden Sie jetzt auf: Der Umgang mit externen Seitenaufrufe


Durch Schlagschatten, runde Ecken und Farbverläufen werden Webseiten durch einfache CSS3 (Cascading Style Sheet)-Anweisungen dekorativer gestaltet. Doch leider gibt es noch viele Besucher einer Website die sich mit älteren Browser im Internet tummeln und zu diesen, und häufig benutzten Browsern, gehört der Internet Explorer, der leider die CSS3 (Cascading Style Sheet)-Anweisungen nicht alle versteht.

Den Artikel zum Thema "PIE": PIE rüstet den Internet Explorer auf.


11Mär2014

Optimierung: Webseiten werden mit der gzip-Compression optimal komprimiert


Zu einer guten "Suchmaschinenoptimierung" gehört auch das schnelle Laden einer Webseite und dafür ist die Aktivierung der "gzip-Komprimierung" eine einfache und sehr wirkungsvolle Methode. Mit Hilfe dieser Kompression werden die Dateien, die der Webserver an den Browser des Besuchers sendet, automatisch komprimiert.

Den Artikel über die "gzip-Compression" finden Sie jetzt auf: Webseiten werden mit der gzip-Compression optimal komprimiert


Ein guter "title-Tag" gehört zu den "Suchmaschinen-Grundlagen" für jeden Webdesigner. Ich habe mehrere Tools und verschiedene Aussagen im Internet verglichen und das Fazit lautet: kleiner als 66 Zeichen wäre optimal. Der wichtigste Grund hierfür ist, dass in den Suchergebnissen der Suchmaschinen nur eine begrenzte Anzahl von Zeichen dargestellt wird.

Den Artikel über "h1-Überschrift und title-Tag" finden Sie jetzt auf: Gleicher Text der Überschrift wie im Titel einer Webseite


26Feb2014

Webdesign: Der Button-Effekt im Menü dieser Website und andere Erklärungen


Die Buttons auf dieser Website sind alleine mit CSS3 (Cascading Style Sheet)-Mitteln erstellt worden.


Mit der CSS3 (Cascading Style Sheet)-Eigenschaft background: gradient erzeugt man einen Farbverlauf ohne dass ein Hintergrundbild verwendet werden muss. Es gibt dabei zwei verschiedene Arten von Farbverläufen, den geraden Farbverlauf (linear) und den kreisförmigen Farbverlauf (radial).


Damit der Besucher darüber informiert wird, zum Beispiel hier auf dieser Seite, wann es etwas Neues gibt, möchte ich das Datum der Erstellung in die Artikel mit einbinden. Und damit das auch vernünftig aussieht, habe ich mir überlegt die Datumsanzeige ähnlich einem Kalenderblatt darzustellen.


Für die Besucher einer Website ist ein "Zurück-Button" sehr hilfreich um nicht nach dem Lesen eines Artikels wieder mühsam den Anfang einer Seite zu erreichen. Und durch eine Smooth-Scroll-Funktion kann der Bediener leicht verfolgen wohin die Reise nach dem Bedienen des Buttons geht.

Alle Artikel finden Sie wieder auf: Wissenswertes und Codeschnipsel


01Feb2014

Optimierung: Senkrechte Trennlinie und das aktuelle Änderungsdatum


Am Fuß jeder Seite sind noch Sprungziele zum Inhaltsverzeichnis, Disclaimer und Datenschutz notiert und für eine vernünftige Trennung zwischen den Linktexten sorgt eine senkrechte Linie.


Für einen Besucher ist es interessant zu wissen wann eine Webseite zum letzten Mal aktualisiert wurde. Dafür sollte man immer das letzte Änderungsdatum auf einer Webseite vermerken. Außerdem befindet sich in der Fußzeile auf jeder Seite der Copyright-Hinweis mit dem Jahres-Datum wann die Website gestartet ist und dem aktuellen Jahr.

Den Artikel über Pseudoklassen "Senkrechte Trennlinie zwischen Sprungziele mit einer Pseudo-Klasse" und den Artikel zum "Copyright-Hinweis" finden Sie jetzt bei den Tipps und Tricks für Webdesigner


31Jan2014

Webdesign: Die Codeschnipsel werden überarbeitet und auf webdesign-klamonfra neu eingestellt


Damit es übersichtlicher bleibt werden die Tipps für Webdesigner nach und nach überabreitet und auf der Seite Wissenswertes, Codeschnipsel, Tipps und Tricks für Webdesigner beim Optimieren Ihrer Webseite veröffentlicht. Damit bleibt auf dieser Website das Hauptaugenmerk auf Bilder.


Es gibt Webseiten die sind so kurz, dass kein Scroll-Balken notwendig ist um den Inhalt darzustellen. Das ist aber beim Blättern von einer langen auf eine kurze Seite störend, da die neu aufgerufene Unterseite dann um die halbe Breite eines Scroll-Balkens zur Seite springt.

Den Artikel zum Thema "Scroll-Balken bei kurzen Seiten" finden Sie jetzt auf: Scroll-Balken bei kurzen Seiten anzeigen

Zum Seitenanfang springen