News
Dieses Blog-System kommt ganz ohne Datenbank aus und besteht nur aus einer „Handvoll“ PHP-Dateien. Es lässt sich leicht installieren und bei Bedarf auch leicht und ohne aufwendige Migration zu einem anderen Webspace-Anbieter „umziehen“.
Schon krass, wie "laut" die Natur im Ultraschall-Bereich ist, während mit bloßem Ohr absolut nichts zu hören ist! Auf freien Feld mit Gras tut sich nicht viel, aber sobald man sich Büschen oder Bäumen nähert, steigt der "Lärmpegel" merklich an...
Diese einfache Web-Anwendung tut nix anderes als das aktuelle Tagesdatum, die Kalenderwoche, die Uhrzeit sowie die Auf- und Untergangszeiten von Sonne und Mond für den aktuellen Standort anzuzeigen. Sie lässt sich auf Mobilgeräten als "App" installieren und funktioniert auch ohne Internetverbindung (z.B. im Flugmodus).
TrayMenu erstellt aus Inhalten beliebiger Ordner ein hierarchisches Menü für den schnellen Zugriff auf Anwendungen, Dateien, Skripte usw. Das Menü, das dem klassischen ordnerbasierten Startmenü früherer Windows-Versionen nachempfunden ist, kann über ein Icon in der Taskleiste aufgerufen werden. Zur Installation sind keine Administrator-Rechte erforderlich, wodurch der Einsatz auf Rechnern mit eingeschränkten Benutzerrechten ermöglicht wird.
TrayMenu wurde "aus der Not geboren", nachdem Microsoft mit Windows 11 auch die letzte Möglichkeit eliminiert hat, individuelle Auswahlmenüs für die Taskleiste zu erstellen...
Die Rechenmaschine von Blaise Pascal (1623-1662) in JavaScript, erstellt anlässlich des 400. Geburtstages von Blaise Pascal am 19.06.2023. Die JavaScript-Anwendung lässt sich auch über den Browser als Web-App (PWA) installieren.
Dark Mode
Wenn das Betriebssystem und damit auch der Browser in den Dunkel-Modus geschaltet sind, wird nun auch die Website in dunklen Farben dargestellt. Vereinzelt kann es hierbei noch zu Darstellungsfehlern kommen, etwa bei Bildern mit Transparenz, die ursprünglich für einen hellen Hintergrund erstellt wurden. Erfolgreich getestet habe ich den Dark Mode in Google Chrome, Vivaldi, Microsoft Edge und Firefox.
Zwei Beispielseiten (Screenshots anklicken zum Vergrößern):
Zum Vergleich der bisherige helle Modus:
Ich muss sagen, dass mir das dunkle Design fast schon besser gefällt als das helle...😎
Für technisch Interessierte: Die CSS-Angaben für den Dark Mode werden im Stylesheet (styles.css) folgendermaßen notiert:
@media (prefers-color-scheme: dark) {
Hier kommen die CSS-Angaben für den Dark mode hin...
}Wenn auf einzelnen Webseiten Bilder automatisch gegen speziell für den Dark Mode optimierte Versionen ausgetauscht werden sollen, geht das mit dem <picture>-Element:
<picture> <source srcset="bild_dark.png " media="(prefers-color-scheme: dark)"> <img src="bild.png "> </picture>
Was man mit Buchstaben und Texten so alles machen kann, wenn man gerade sonst nix zu tun hat...
Ich habe mal wieder ein bisschen gecodet:
Dieses kleine Tool verhindert, dass der Windows-Rechner nach einer bestimmten Zeit der Inaktivität automatisch gesperrt wird, auch wenn dies vom Administrator so festgelegt worden ist und vom Benutzer nicht geändert werden kann.
OpenMenu hat ein neues Programm-Icon bekommen und wurde dahingehend erweitert, dass Fensterposition und -größe jetzt für jeden Dateityp individuell gespeichert werden und nicht mehr global. Außerdem kann beim Bearbeiten einer zugeordneten Anwendung nun auch der Progammpfad geändert und zusätzliche Kommandozeilenparameter angegeben werden. Ach ja, und wo ich schonmal dabei war: Die Benutzeroberfläche ist jetzt zweisprachig (Deutsch/Englisch), und Anwendungs-Icons werden jetzt mit korrekter Transparenz angezeigt.
Der per Strg+Mausrad eingestellte Zoom-Faktor wird nun automatisch gespeichert und wird beim nächsten Programmstart wiederhergestellt. Außerdem kann beim Aufruf nun ein Zoom-Faktor angegeben werden, um die Webseite vergrößert oder verkleinert darzustellen.
Zudem wurden alle Programme mit "Visual Studio 2019 Community" erstellt bzw. neu compiliert.
Optimierung der Website für kleine Bildschirme von Mobilgeräten (Smartphones)
Als ich diese Website 1997 ins Leben gerufen habe, da gab noch keine Smartphones. Die Seiten wurden von vorn herein für große Computerbildschirme konzipiert – wozu damals allerdings schon Auflösungen von 800 x 600 Pixeln gehörten. Zwar habe ich Webseiten immer schon so erstellt, dass sie nicht an eine bestimmte Bildschirmauflösung gebunden waren, sondern sich flexibel an verschiedene Fensterbreiten anpassten (heute nennt man das neudeutsch "responsive"), doch stellen die schmalen Smartphone-Displays mit z.B. gerade mal 360 Pixeln Breite noch einmal eine besondere Herausforderung an das Seiten-Layout dar. Da müssen schonmal Elemente, die bisher starr nebeneinander angeordnet waren, dynamisch (d.h. abhängig von der Breite des Viewports, untereinander angeordnet werden, etc. Aber mit CSS lässt sich das ja alles schön machen...
Die Seiten sollten nun alle problemlos und gut lesbar auch auf kleinen Displays dargestellt werden. Einige wenige Seiten enthalten allerdings Tabellen, die aufgrund ihrer Breite über so ein kleines Smartphone-Display hinausragen. Der Einfachheit halber habe ich solche breiten Tabellen in ein DIV gesteckt, das man horizontal scrollen kann. Das ist zwar nicht die schönste Lösung, war aber am leichtesten umzusetzen. Immerhin kann man so alle Inhalte sehen. Manchmal hilft es auch, das Smartphone quer statt hochkant zu halten.
Zur Veranschaulichung zwei Screenshots (anklicken zum Vergrößern):
Links die Darstellung bei einer Bildschirmbreite von 1000 Pixeln, rechts bei 500 Pixeln. Bei der rechten Darstellung wurden die Bildchen über dem Beschreibungstext angeordnet, und der Beschreibungstext selbst wird im Blocksatz angezeigt.
Bei welcher Bildschirmbreite man die Umschaltung macht, ist Ermessenssache und hängt auch vom Layout ab. Ich habe 600 Pixel als Grenze festgelegt. Man kann auch noch weitere Breiten festlegen, z.B. für mittelgroße oder riesige Bildschirme, aber mir genügt es, wenn die Website auch auf Smartphone-Displays gut lesbar angezeigt wird.
Für technisch Interessierte: Die CSS-Angaben für kleine Bildschirme werden im Stylesheet (styles.css) folgendermaßen notiert:
@media only screen and (max-width: 600px) {
Hier kommen die CSS-Angaben für Bildschirmbreiten bis 600 Pixel hin...
}Im Header jeder Webseite (zwischen <head> und </head>) müssen folgende Angaben gemacht werden:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Die Schwarzweiß-Fotos von Schloss Krickenbeck im Herbst 1983 wurden in einem größeren Format neu eingescannt und die Seite umgestaltet (keine Frames mehr).
Die Webseite wurde etwas "entschlackt", d.h. einige Themen sind entfernt worden.
Außerdem wurde die Startseite umstrukturiert: Alle Beiträge sind nun nach dem Erstellungsdatum sortiert, wobei die neueren Beiträge weiter oben stehen. Die bisherige Unterteilung der Startseite in thematische Rubriken (Erstaunliches, Tierisches, Anschauliches, Computriges, Vermischtes, Sinnfreies) gibt es nicht mehr. Stattdessen gehört jeder Beitrag nun einer oder mehrerer Kategorien (Bilder, Töne, Natur, Technik, Software, Mampf, Just4Fun) an. Über ein Auswahlmenü können die Beiträge nach diesen Kategorien gefiltert werden. Durch Auswahl der Kategorie "Software" beispielsweise werden nur diejenigen Beiträge aufgelistet, die etwas mit Software zu tun haben. Standardmäßig werden alle Beiträge aufgelistet.
Ältere Browser wie Internet Explorer 8 könnten Probleme bei der Darstellung des Layouts einiger Seiten haben. In einigermaßen aktuellen Browser-Versionen sollte aber eigentlich alles richtig aussehen.
Homepage > News