Angeklebte Kopfzeile

Zur Erreichung einer intuitiven Bedienbarkeit der Webseiten kann es hilfreich sein, bestimmte Elemente im angezeigten Bereich zu fixieren. Dabei geht allerdings ein Teil des verfügbaren Anzeigebereiches für den Inhalt verloren.

Je nach Größe des Kofbereiches und der darin enthaltenen Elemente, wie z.B. Logo, Seitenname, Menü, Service- oder Hilfebuttons, kann beim Herunterscrollen der Seite der Kopfbereich so verkleinert werden, dass zumindest die wichtigsten Bedienelemente vorhanden sind.

Diese Technik bezeichnet man auch als „sticky header“. Sticky header bedeutet auf deutsch: angeklebte Kopfzeile.

Für die Umsetzung allein mit CSS-Styles unter Verwendung von position: sticky [1] ist eswohl noch zu früh. Über die Webseite Kann ich das verwenden? (caniuse.com) kann man prüfen, inwieweit neue Techniken bereits umgesetzt sind und bei wieviel Prozent der potentielle Besucher und Kunden diese Technik bereits unterstützt wird.

Aktuell beträgt der Wert nur 18.67 %!

Zuwenig, um darauf eine Lösung für eine produktive Seite aufzubauen.

Die Umsetzung erfolgt somit mit Css3 und JavaScript.

Im Sinne einer schnellen Seitenladezeit ist es nicht immer sinnvoll ganze Frameworks zu laden, um z.B. eine Css-Klasse oder eine Css-Style anzupassen. Es funktioniert auch mit purem JavaScript!

Allerdings ist der Programmieraufwand bei den verschiedenen Frameworks durchaus geringer und wenn diese ohnehin geladen werden, weil sie an anderer Stelle gebraucht werden, spricht nichts dagegen diese auch zu verwenden.

(function($)
{
$(window).scroll(function () {
if ($(this).scrollTop() > 1) {
$('#overcard').addClass('sticky');
} else {
$('#overcard').removeClass('sticky');
}
});

})(jQuery);

 

Quellen:

  1. maddesignsde – Css3 Position Sticky Artikel vom 16.05.2014
  2. callmenick.com – js css-Klassen

Responsive Webdesign – aber nicht so!

Nachdem Designer Webseiten in Druckformate gezwängt haben und anschließend feststellen mussten, dass nun die Anzeige auf einigen Bildschirmen nicht mehr gut aussieht, soll „Responsive Webdesign“ alles richten.

Dank der vielen Frameworks ist dies auch kein Problem. Die Webseite bekommt den Twitter-Bootstrap übergestülpt, ein paar Anpassungen am CSS und in JavaScript, fertig!

In einigen Fällen sieht es auch so aus, als könnte es funktionieren, aber die Stoplersteine liegen im Verborgenem.

 

positiver erster Eindruck
Eine Webseite hat ca. 3 Sekunden um zu überzeugen: Eins – Zwei – Drei – Chance vorbei!
Die Besucher wollen schnelle Informationen. Wenn innerhalb der ersten Sekunden nicht das Gesuchte angezeigt wird, ist der Besucher schnell wieder weg.

Das Laden der JavaScript-Bibliotheken und umfangreicher CSS-Style-Definitionen kann je nach Gerät und Anbindung an Internet mehrere Sekunden benötigen.

Da hilft es auch wenig, dass der Besucher beim 2. Besuch die Seite schneller angezeigt bekommt, wenn diese Dateien vom Browser gecacht werden.

Wenn die schönen Designelemente in den ersten Sekunden noch gar nicht vorhanden sind, können Sie den neuen Besucher nicht überzeugen.

 

Intuitive Bedienbarkeit
Die intuitive Bedienbarkeit ist Voraussetzung für jede Webseite, unabhängig davon, ob diese „responsive“ gestaltet werden soll oder nicht.

Dafür ist es wichtig, dass weiterführende Links und Buttons als solche erkannt werden.

 

Download-Volumen
Bei getakteten Verbindungen, ist das Download-Volumen ein wichtiger Aspekt. Je nach Tarif wird das Surfen teurer oder die Übertragungsgeschwindigkeit nach Erreichen der Obergrenze gedrosselt.

In beiden Fällen ist es ärgerlich, wenn das Volumen für unnötigen Ballast verbraucht wird.

Dies gilt im Übrigen auch für Werbung. Wer unbedingt ungefragt Werbung einblendet, der sollte zumindest so fair sein, dass er nicht unnötig viel Volumen verbraucht. Es muss nicht gleich das ganze Werbevideo aufgedrängt werden, ein Vorschaubild mit entsprechendem Text reicht durchaus.

Es ist also sinnvoll bereits auf dem Server zu unterscheiden, ob z.B. hochauflösende Grafiken benötigt werden.
Leider gibt es dafür vom W3C und den Browserherstellern keine geeigneten Vorgaben.

Trigger

Trigger werden schon sehr lange in Oracle eingesetzt, insbesondere dann, wenn verschiedene Programme auf die gleichen Tabellen zugreifen ist es sinnvoll Funktionen zur Sicherung der Datenkonsitenz durch die Datenbank selbst durchzuführen.

Trigger werden durch Ereignisse (INSERT, DELETE) ausgelöst und werden zum definierten Zeitpunkt (BEFORE, AFTER) durchgeführt.

Beispiel:
Jeweils bevor ein Datensatz angelegt wird, wird der Wert für das Feld Ident aus dem aktuellem Zeitstempel mit einer vorangestellten eins erstellt.

CREATE TRIGGER `set_helper_ident` BEFORE INSERT ON `jm_drkhelper`
FOR EACH ROW SET NEW.ident = concat('1',DATE_FORMAT(NOW(), '%Y%m%d%H%i%s%f'))

xfriend

Bei meiner Recherche bin ich auf „x-friend“ eine Suchmaschine in der Art von Google für die Dateien auf dem eigenem Rechner gestoßen.

Das Angebot zum Download dieser Software auf www.soft-ware.net stand in der Google-Suche ganz weit oben, also habe icj es mir angesehen.

Dabei können sie auf ihrem Rechner oder im Netzwerk Verzeichnisse festlegen, die durch x-friend indiziert werden sollen, und anschließend wie bei Google in Bruchteilen von Sekunden nach Dateien auf ihrem eigenen Rechner oder im Netzwerk über eine Webseite im Browser suchen, genau wie sie es von Google gewohnt sind.

Dabei werden nicht nur die Dateinamen indiziert, sondern auch die Texte in Office-Dokumenten, E-Mails, in PDF-Dateien oder sonstigen Textdokumenten, die ID3-Tags von MP3-Dateien oder die EXIF-Header von Bildern der Digitalkamera. …

Quelle: www.soft-ware.net/xfriend

Der AVG-Antivirus hat den Download als gefährlich eingestuft.

Plan B: Download beim Hersteller

Dort gibt es xfriend nicht mehr zum Download, dafür den Nachfolger „xdotsearch“. Diesen kann man aber nicht einfach mal so ausprobieren.

„xdotsearch“ entspricht auch nicht einem kleinem Tool, welches ich gesucht hätte.

Plan C: chip.de
Voila, das Programm ist auf chip.de verfügbar. Bei der Installation gibt es allerdings Probleme, denn es wird zwangsweise mein E-Mail abgefragt. Ich bin nicht bereit für einen Softwaretest, der nur lokal auf meinem Rechner suchen soll meine E-Mail-Daten einzutragen. Außerdem hat sich der AVG-Antivirus erneut eingeschaltet und vorgeschlagen diese Software zu entfernen.

Gute Idee, und weg damit.
Das geht allerdings nicht mit einem Mausklick, denn auch der UnInstall wird von AVG-Antivirus blockiert.

Fazit: Schade um die schöne Zeit.
Mein Unmut richtet sich nicht gegen der Hersteller, sondern gegen die bei der Googlesuche ganz oben stehenden Seiten, die mir diese Programm empfohlen haben.

Wie kann es sein, dass Artikel über Softwareempfehlungen die es nicht mehr gibt in den Suchergebnissen ganz oben angezeigt werden?

Allerdings wundert es mich auch, dass selbst chip.de derart veraltete Artikel nicht ins Archiv verschiebt und einen entsprechende Hinweis ausgibt?

Natürlich hätte ich stutzig werden müssen, wenn ich auf das Ausgabedatum des Artikels 2005! geachtet hätte. Das hätte mir nicht passieren dürfen.

Schade um die schöne Zeit.

Dateiverzeichnis erstellen

Mein erster PC hatte noch keine Festplatte, alle Programme und Dateien waren noch auf Diskette. Der maximale Speicherplatz auf der 5 1/4 Zoll – Diskette war 720 kB!

Mein erster Rechner, war auch nicht meiner, sondern gehörte der Firma in der ich gearbeitet habe …

Nun sind ein paar Jahre bzw. Jahrzehnte vergangen, die Speichermedien können immer mehr Bytes bzw kilo- Mega- Giga- und TerraBytes speichern und verwalten.

Klar geht dabei einwenig die Übersicht verloren und somit war die Idee wenigsten meine Multimedia-Dateien, wie Fotos, Musik und Videos in einer Datenbank zu katalogisieren entstanden.

Wegen der durchaus großen Menge an Daten wäre es schön diese automatisch einzulesen.

Geht das?
Wenn ja, wie?

Pengiun Jump

„Penguin Jump“ ein Online-Spiel und zugleich eine Demo für die verschiedenen neuen Browsertechniken.

Mit Klick auf den Pinguin springt der Pinguin nach oben, Doppelklick für eine „großen“ Sprung. Einfach loshüpfen, damit der Pinguin nicht in Nichts herunterfällt.

verwendete Technik:

  • JavaScript
  • HTML5
  • Local Storage
  • CSS3
  • Audio
  • XMLHttpRequest

verwendete Bibliotheken und Engines:

  • Crafty – JS – Gameengine

Browsertest:

  • Mozilla Firefox
  • IE 11
  • Opera 26.0
  • Google Chrome 39

Anmerkung:
Die Demo ist eklusiv für Mozilla umgesetzt, so wird z.B.

screen.mozLockOrientation("portrait");

verwendet.

Somit kann die Demo in den anderen Browsern nicht funktionieren. Eine entsprechende Erweiterung ist ggf. möglich.

Quelle: Mozilla Developper Network – Demos

Verwendung in eigenen Projekten:
Die Demo steht unter der Public Domain Lizenz 1.0 zur Verfügung.
Das bedeutet man kann und darf sich den Quelltext anschauen und weiterentwickeln. Der Download steht auf der Entwicklerseite zur Verfügung.