News

28.11.2021

Dark Mode

Wenn das Betriebssystem und damit auch der Browser in den Dunkel-Modus geschaltet sind, wird 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>

15.07.2021

Neu: Der Quatschtextkonverter

Was man mit Buchstaben und Texten so alles machen kann, wenn man gerade sonst nix zu tun hat...

01.07.2021

Ich habe mal wieder ein bisschen gecodet:

Neu: LassAn! – Automatische Bildschirmsperre deaktivieren

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.

Aktualisiert: OpenMenu – Das etwas bessere »Öffnen mit«-Menü

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.

Aktualisiert: HtmlWindow – Eine Alternative zum »Active Desktop«

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.

28.02.2021

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 mit 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">

02.12.2017

Die Schwarzweiß-Fotos von Schloss Krickenbeck im Herbst 1983 wurden in einem größeren Format neu eingescannt und die Seite umgestaltet (keine Frames mehr).

02.04.2017

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