Wiki   

Tec-Infos zu dieser Seite

zurück

Auf dieser Seite habe ich die technischen Infos zur gesamten Website zusammengetragen, die vorher auf den Startseiten offen oder verborgen, angezeigt werden konnten. Die Infos sind neben Nutzern auch für technisch an Webprogrammierung interessierte Menschen gedacht, die eine eigene Website betreiben und evtl. für Optimierungsinformationen dankbar sind.

Diese Website existiert seit ca. 2006. Da sich die Entwicklung des html-Systems (Internet) seitdem erheblich verändert und weiterentwickelt hat, musste ich die Seiten permanent anpassen. Insbesondere die Etablierung der mobilen Browser wie Smartphones/Tablets haben hier eine wesentliche Umprogrammierung der Seiten erfordert. Da die gesamte Webdomain mittlerweile aus über 1000 Einzelseiten, mehr als 12000 Links zu Ressourcen und Fremdseiten, mehr als. 10.000 Fotos und vielen anderen Elementen besteht kannst du dir leicht vorstellen wie aufwändig das ist und, dass ich kaum Lust dazu habe alles nach neuesten Richtlinien komplett zu erneuern (das wäre eigentlich das Optimum aber eben praktisch undurchführbar). Bisher ist es mir auch gut gelungen das bestehende System durch Anpassungen aktuell und anschaubar zu halten.

Ein riesiges Problem der Anpassung war, dass ich zu Beginn alle Inhalte wie Bilder, Texte, Links durch Tabellen in Form gebracht hatte. Damals, 2006, war das völlig normal, da gab es kaum css-Formatierung (cascading stylesheets). Aber als dann, durch die diversen mobilen Geräte, die Notwendigkeit der variablen Seitenbreiten aufkamen, musste ich feststellen, dass Tabellen dafür wirklich ungeeignet waren da sie sich nicht besonders gut den variablen Bildschirmbreiten anpassen können. Der Ausdruck "responsiv-Design" beschreibt die Tatsache, dass eine moderne Website den "viewport" des Anzeigegerätes ausliest und an Hand der darin mitgeteilten Seitenbreite den dargestellten Inhalt so formatiert, dass die Elemente in ausreichender Größe dargestellt werden, die Seitenbreite durch den Inhalt nicht überschritten wird und einiges mehr. Die Funktion "Viewport" ist notwendig denn es existieren gravierende Unterschiede in der Darstellungsgröße bei den diversen Displays von z.B. Full-HD, das ist 1920x1080 Pixeln, wenn diese beim Smartphone 5-7 Zoll, beim Tablet 8-12 Zoll und beim Desktopbildschirm 13-27 Zoll (und größer) betragen. Die Schriftgröße, Elementgröße von Links, Bildern etc.,  kann dabei eben nicht gleich behandelt werden sonst könnte man einen 5 Zoll-Bildschirm nicht lesen und nicht bedienen auch wenn er die gleiche Auflösung anzeigen kann wie ein 27 Zoll Desktop-Bildschirm.

Diese Änderungen an einer vorhandenen alten Website kann nur durch manuelles Kopieren der Tabelleninhalte in neue Textblöcke geschehen, die dann eben responsive reagieren, Bilder sich evtl. verkleinern und Bilder/Texte zusammenfließen damit die Seitenbreite nicht den Inhalt verdeckt. Das Herauskopieren der Inhalte aus den Tabellen in ein Flex-Design mit css ist wirklich sehr viel Handarbeit. Manches habe ich genau so ausgeführt aber nicht bei allen Seiten und nicht in allen Text-blöcken. Die nachfolgende Änderungen habe ich unter Anderem im Laufe der langen Zeit vorgenommen:

Darstellung auf mobile devices


Um das WanderreiterWeb für Smartphones mit Ihren kleinen Bildschirmen optimal anzuzeigen sind die Hauptmenü Seiten eigens für Smartphones programmiert, eine Umleitung erfolgt automatisch wenn das Display eine bestimmte Größe unterschreitet. So ist eine gute Übersichtlichkeit über die vielen Inhalte gegeben und die Links sind besser aufrufbar. Tablets oder große Smartphones im Querformat werden, je nach Bildschirmbreite, meist nicht automatisch umgeleitet können die Seiten aber anzeigen. Dazu die Website über m.WanderreiterWeb.de aufrufen. Tablets können die mobile Menuseite wieder verlassen, jeweils über den letzten Menupunkt des Ausklappmenus "Desktopversion (Tablets)", das funktioniert meist nur im Querformat.

Die Seiten haben ein mobilfreundliches Layout mit großem Hauptmenu, großer Schrift, "fetten" Linkbuttons, haben alle eine Suchleiste für die Volltextsuche auf der gesamten Website und vermeiden Javascriptmenus und Mouseover-Aktionen, die zwar eine feine und übersichtliche Bedienung erlauben aber bei Touchscreens nicht funktionieren können.

Wanderritte: Die Content (Inhalts) -seiten sind bis etwa Mitte 2018 lediglich im Seitenkopf angepasste Desktopseiten. Das Menu am Seitenkopf incl. der OSM-Karte mit Tracks und Wegpunkten ist responsive (für Mobilgeräte optimiert). Die Rittbeschreibung danach ist es nicht. Die Technik und die Größe der Smartphones lässt nur eine eingeschränkte Darstellung dieser Seiten zu, sie sind jedoch gut anzusehen da man verkleinern/vergrößern/scrollen kann. Ein Tipp: kleine Displays stellen die Seiten im Querformat in der Regel gut dar. Tablets zeigen die Seite, auf Grund der größeren Displayfläche, wesentlich besser an und werden meist auch nicht auf die mobilen Seiten umgeleitet, zumindest im Querformat nicht. Alle neueren Inhaltsseiten der Sektion Wanderritte, (ab Veröffentlichung Mitte 2018) sind nun responsive und lassen sich uneingeschränkt auf Smartphones anzeigen.

Einbindung von Topografischen Karten:: Auf den Wanderrittseiten gibt es zu Beginn immer eine interaktive Karte auf der die Tracks und evtl. Marker für Wegpunkte auf einer OSM-Graustufenkarte dargestellt sind. Über ein Ebenenmenu in der Karte kann man zur Wanderreitkarte, einer Open-Topo und einer Satellitenansicht wechseln. Auch diese Karte ist durchgängig auf smartphones darstellbar. 

Trailritte: Diese sind ebenfalls nur an mobile Geräte angepasst. Auf Grund der überbreiten Bilder (900/1200 pixel) der Fotobücher macht es aber keinen großen Sinn diese Seiten in Smartphones aufzurufen da die Bilder auf Bildschrirmbreite skaliert werden, auch wenn sie manuell wieder größer skaliert werden können. Auf Tablets ist die Ansicht perfekt. Allerdings werden die Trailseiten seit einiger Zeit nicht mehr erweitert, ich habe zwar noch 1-2 Ritte nicht veröffentlicht - es ist mir aber zu viel Arbeit. Es ist leider inzwischen eine schiere Katastrophe mit Bildern von anderen Rittteilnehmern da viel zu viele Smartphones viel zu beschissene Bilder in viel zu vielen Formaten und Farbtönen fabrizieren und ein Anpassen aller Bilder an ein durchgängiges Layout ist wohl möglich aber extrem aufwändig und unbefriedigend.

Zur Navigation: Auf allen Hauptmenü Seiten findest du am Anfang das Main-Menu und auf den meisten Hauptseiten eine Suchfunktion (Volltextsuche mit Google). In den Ergebnissen der Google-Suche kommen am Anfang manchmal ein paar Anzeigen von google (das ist der Preis für die kostenlose Nutzung) nach den Anzeigen findest du die Ergebnisse auf WanderreiterWeb. Vom Main-Menu aus erreichst du fast alle Sektionen und Inhaltsseiten. Alle Menus sind auf breiten Seiten oben fixiert damit man von jeder Seitenstelle weiter/zurückblättern kann, bei Bildschirmbreiten unter 1100 pixel scrollt es jedoch nach oben weg. Weiter gibt es, am linken unteren Rand fixiert, auf allen Seiten einen "Menu"-Link (springt zum Seitenanfang), sowie einen Link auf die Datenschutzerklärung.

Alle neuen Seiten seit 2019 werden nun responsive (für Mobilgeräte optimiert) erstellt. Responsiv heißt, dass die Elemente auf den Seiten beim schmäler machen des Browsers zusammenfließen können. Bilder und Textblöcke bei breiten Displays werden 2 nebeneinander platziert, sie fließen bei schmäleren Displays untereinander und/oder verändern ihre Größe. Eine Umprogrammierung aller "alten" Contentseiten  (annähernd 900 Seiten) ist mir aus zeitlichen Gründen nicht möglich und ich halte sie auch für nicht so wichtig da viele Funktionen wie der Download von GPS-Tracks und anderen Hilfsdateien auf kleinen Mobilgeräten nicht wirklich viel Sinn machen. Es gibt daneben die Facebookseite, in der eine Auswahl der Informationen und Bilder zu sehen ist. Wer sich mit, in der Darstellung eingeschränkten, Geräten im Internet informieren möchte muss das halt in Kauf nehmen. Ich arbeite von Zeit zu Zeit dennoch weiterhin an der Umprogrammierung "alter" Seiten aber - Reiten ist mir lieber !


DSGVO (DatenSchutzGrundVerordnung)

Auf Grund der DSGVO habe ich etliche Änderungen an der Website vorgenommen. Die Datenschutzerklärung aktualisiert, einen Link zu dieser auf alle Seiten gestellt und ein Cookie-Banner implementiert, das vor der Nutzung der Website die Erlaubnis oder Verweigerung von Cookies und/oder Datenweitergabe an Dritte abfragt, dies aber nur auf einigen wenigen Seiten, die Dienste von Drittseiten (Facebook, Google, Youtube) implementiert haben. Das Cookie-Banner  funktioniert auf neueren Seiten optimal, auf älteren Seiten unter Umständen nicht so gut, da die Seitenbreite breiter als das Display sein kann und dadurch das Banner unter Umständen nicht sofort beim Aufruf der jeweiligen Seite sichtbar ist. Ohne eine komplette manuelle Umprogrammierung (aufwändig von Hand) ist das nicht machbar. Nachträgliche Änderungen der DSGVO-Einstellungen hier:

Einstellungs-Icon
im Impressum

Auch wenn WanderreiterWeb.de keine eigenen Cookies einsetzt (außer für das Cookie-Banner !?! - ein Schmunzeln über das Symbol zum nachträglichen Aufruf dieses Cookie-Consent-Tools ist erlaubt! - normalerweise sind Plätzchen lecker), habe ich dieses Tool auf allen Seiten eingesetzt die Fremddienste implementieren und damit fremde Skripte aufrufen. Es ist für mich nicht sicher, dass diese keine Cookies setzen auch wenn ich es bei der Installation der Dienste nach Möglichkeit ausgeschlossen und es zu Beginn getestet habe. Aber ich bin nicht in der Lage dies ständig zu überwachen. Die Skripte die zum Aufruf der Kartenimplementierung auf allen Wanderreitseiten (z.B.:hier) dienen sind auf WanderreiterWeb.de gespeichert. Die Kartendaten kommen natürlich von den entsprechenden Servern, aber eben keine Skripte!

Alle Facebook-plugins (like-buttons) habe ich aus Datenschutzgründen durch reine Bild-Links ersetzt, die keine Cookies speichern und keine Daten weitergeben, es sei denn man klickt sie an und verlässt damit WanderreiterWeb.de. Ausnahme: Home, Wanderreit-Startseite und Instagram-Seite, dort ist jeweils ein IFrame zur Facebookseite "WanderreiterWeb" platziert.

Moderne Browser sind durchaus in der Lage Cookies von Drittseiten zu blockieren, dies muss nur in den Einstellungen der Browser angeklickt werden. Wenn allerdings die Seite WanderreiterWeb über einen Link verlassen wird ist das nicht mehr gewährleistet, da es dann keine Drittseiten mehr sind.

Grundsätzliches dazu

Man sollte, bezüglich der Nutzung der Daten, die manche Seitenbetreiber wie Youtube oder Facebook erheben immer bedenken: Schließlich ist auch die bezogene Leistung, diese Inhalte, Videos, o.ä. bereitzustellen, mit Kosten verbunden und ich finde es nicht verwerflich, diese Kosten in Maßen durch Werbung zu erwirtschaften. Wer dies grundsätzlich ablehnt, darf solche Seiten im Internet, auch meine Seite WanderreiterWeb.de, eben nicht nutzen. Ich kann es mir leisten diese Dienste gratis anzubieten, es ist mir sogar ein Bedürfnis dies zu tun, aber die Kosten sind auch überschaubar, nicht zuletzt, aber auch, und gerade durch die "böse" Werbung/Datennutzung im Internet. Durch diese, oft kostenlose Leistung, fallen auch meine Kosten gering aus. Das ist meine persönliche Meinung dazu!

Die gegenwärtige Regelung nach dem DSGVO ist nahezu schwachsinnig, da sie nur dazu führt, dass sich jeder Nutzer auf jeder aufgerufenen Seite über die permanent aufpoppenden Cookie-Banner ärgert und fast ausschließlich auf "alle annehmen" klickt, was ja praktisch immer hervorgehoben dargestellt wird, um nicht noch mehr aufgehalten zu werden - also kontraproduktiv im Sinne des DSGVO. Gerade beim "sich informieren" über mehrere Seiten hinweg ist das eine schiere Katastrophe. Und das witzige/makabre Detail: Das Cookie-Banner, welches dem Nutzer die Entscheidung abverlangt, zu wählen ob und welche Cookies er speichern will, funktioniert nur durch ein Abspeichern eines weiteren oder mehrerer weiterer Cookies. Ohne diese würde der Aufruf JEDER Seite eines Webs wiederum das Banner erzeugen und das ist selbst den Datenschützern zu heftig. Löscht man konsequent und regelmäßig alle Cookies im Browser dann steht man bei jeder bekannten Seite wieder auf "noch nie dagewesen". Das einzige, auf WanderreiterWeb gespeicherte Cookie kommt von der Cookie-Abfrage-Software - ist das alles nicht irrsinnig?

Das ist ein Bürokratiemonster PUR, verordnet durch die EU - sorry da hat niemand mehr Verständnis zu und das kostet die Wirtschaft bald mehr als der Unterhalt der Onlinefunktionen.

Es gibt übrigens für praktisch alle Browser ein plugin, das sehr viele der automatisch aufpoppenden Cookie-Banner wegklickt. Suche nach: I don't care about cookies. Das funktioniert nicht bei allen Seiten/Bannern, aber ausreichend. Nichts ist nervender als beim Suchen über mehrere Webseiten hinweg ständig diese blöden Cookie-Banner zu sehen. Das zerstört sämtliche Vorteile die uns das Internet bietet, aber leider sind die Seitenbetreiber dazu verpflichtet diese Warnung anzeigen zu lassen. Andernfalls drohen horrende Strafsummen (bis zu 300.000€) sowie Abmahnkanzleien, die diese Abmahnungen zum Geschäftskonzept erhoben haben oder ähnliches.

Weiterhin gibt es Tools, die in der Lage sind Werbung und Datenübermittlung effektiv zu verhindern. Das mir bekannteste Tool ist das kostenpflichtige ADGUARD. Eine lebenslange Lizenz für 3 Geräte kostet zwar etwa 75,-€ (2022), das Tool blockt aber effektiv Werbung, selbst auf sozialen Medien, weil es systemweit (also nicht nur in einem Browser sondern im Betriebssystem) installiert werden kann. Dazu gibt es die Möglichkeit die Filterung kurzzeitig zu unterbrechen, da ja manchmal auch nützliche Einblendungen geblockt werden. Es kann nämlich sämtliche auf Drittseiten verweisende Links und somit auch den Datenverkehr blockieren. So wird z.B. das Anzeigen des  Facebook-Applets auf der Startseite blockiert, was in einem InlineFrame die Facebookseite WanderreiterWeb in Echtzeit darstellt, aber eben auch Informationen über dein Bewegungsprofil an Facebook übermittelt.

SSL-Zugriff über "https://"

Die Domain ist jetzt konsequent auf HTTPS umgestellt. Jeglicher Zugriff auf "WanderreiterWeb.de" erfolgt nur noch SSL-verschlüsselt. Nun ergaben sich bei etlichen externen Links Zugriffsfehler auf nicht verschlüsselte "http://"-Seiten die ich einfach umgangen habe. Und zwar über Kurzlinks der Domain "t1p.de". Diese überwacht die Zielseiten auch ohne, dass diese SSL-verschlüsselt aufgerufen werden auf Schadfaktoren und der erzeugte Kurzlink kann mit "https://" aufgerufen werden! Leider kann man jetzt den Link nicht mehr identifizieren denn er lautet in der Satusleiste des Browsers z.B.:" Bernina-Trail, er erscheint also als "https://t1p.de/zkug". Wer sich nicht sicher ist wohin der Link führt kann diesen testen. Mit der Eingabe von "https://t1p.de/zkug+" (+ am Ende), erscheint eine Erklärung wohin der Link tatsächlich führt!

Das ist ein wenig unschön, liegt aber daran, dass ganz viele Betreiber von "kleineren" Webseiten ihre Domains nicht vernünftig warten. Dazu müssen z.B. beim Provider neben der http://Domain.de auch die http://www.Domain.de in den DNS-Einstellungen eingetragen werden und es muss eine zwingende Umleitung des Seitenaufrufes vorgenommen werden.

Automatische Umleitung der Websiteaufrufe

Es ist z.B. leicht möglich die Aufrufe der Domain auf nur eine Version zu beschränken und das sollte aus mehreren Gründen auch immer vorgenommen werden. Nicht
1. "http://www.domain.de"
2. "http://domain.de"
3. "https://www.domain.de" und
4."https://domain.de" (also 4 Versionen der gleichen Domain)
sondern eben nur eine dieser 4 Versionen. Diese 4 Versionen können von den Suchbots, die die Internet-Domains permanent durchsuchen, als Duplikate erkannt werden und Duplikate verschlechtern das Ranking der Domain, welches zwangsläufig eine Position in den Suchergebnissen nach hinten schieben würde. Außerdem kann es passieren, dass die Trefferhäufigkeit für jede Version einzeln gezählt wird und die Website dadurch unscheinbarer erscheint als sie tatsächlich ist.

Ein einfacher Eintrag in einer Textdatei im Root-Verzeichnis der Domain leitet dann alle Anfragen automatisch auf diese eine Version um. Die Datei heißt ".htaccess" und der Eintrag in dieser Textdatei, um nur noch "https://domain.de" zuzulassen lautet folgendermaßen.

Gibt es für die Internetdomain einen SSL-Zugang über https://:

RewriteEngine on
startet das "Rewrite"
RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC] entfernt das www aus dem Seitenaufruf  und erzwingt https ohne www
RewriteRule ^(.*)$ https://%1/$1 [R=301,L]
RewriteCond %{HTTPS} !on erzwingt sicheren SSL-Aufruf
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

Natürlich ist die Verknüpfung eines SSL-Zertifikates, welches vom Provider gestellt werden muss, Voraussetzung für diese Umleitung.

Ist kein SSL-Zertifikat vorhanden, könnte die Umleitung auf "http://www.domain.de" folgendermaßen aussehen:
Durch diese Zeilen (linke Spalte) würden Aufrufe von "https://domain.de" auf "http://www.domain.de" umgeleitet werden ohne einen Fehlercode zurückzugeben.

RewriteEngine On muss nur einmal in der .htaccess angegeben werden
RewriteCond %{HTTP_HOST} ^domain.de erzwingt Aufruf über http://www... 
RewriteRule (.*) http://www.domain.de/$1 [R=301,L]


(domain.de ist natürlich mit dem eigenen Domainnamen zu ersetzen. Die Option "R=301" erzeugt eine permanente Umleitung, so dass auch die Suchfunktionen von Google oder anderen Bots diese dauerhaft notieren und es keine scheinbaren Duplikatseiten gibt, die das Ranking der Domain in der Suche verschlechtern würden.)

 In CMS-Seiten (Wordpress, Joomla u.a.) kann oftmals nicht auf die Datei ".htaccess" zugegriffen werden. Diese Systeme beherrschen jedoch andere Umstellungsmöglichkeiten über das Einstellungen-Menu. Diese Umleitung auf nur eine Version der Domain erzeugen automatisch eine Häufung der Zugriffe auf deine Domain, verbessern damit das Ranking.

zurück