Blog

Neuste Blog Beiträge

Blog Kategorien

Ist die Webseite aktuell ?

10. April 2024, CAPCom WebTeam - Internet Trends, Tipps & Tricks

Wie kannst du herausfinden, ob eine Webseite aktuell ist oder schon etwas in die Jahre gekommen ist. Wir zeigen Dir ein paar kleine Tricks, die dir verraten, ob eine Webseite und ihr Design veraltet ist und unbedingt überarbeitet werden sollte oder ob es aktuell ist. Verschaffe dir schnell einen Überblick über die Webseite und Ihren Status.

Betrachte als erstes die Webseite aufmerksam und achte schon beim Aufrufen der Seite auf die Ladezeiten. Schau dir die Webseite aufmerksam und genau an. Veraltetes Webdesign erkennst du beispielsweise an eintöniger Farbgebung, verschachtelten grauen Tabellen, fehlender Zentrierung der Inhalte, falsch umbrechende Inhalte oder Inhalte, die aus Ihrem Container herauslaufen. Ein weiterer Hinweis sind auch ältere Standardschriftarten wie Times New Roman und Comic Sans. Die Verwendung von starken Farben, die wild miteinander kombiniert werden wie zum Beispiel blau und rot, grün und pink etc. Wenn interaktive Elemente oder Grafiken gänzlich fehlen, kann das ebenso ein Indikator sein. Auf folgende Punkte solltest du auch unbedingt achten:

Hat die Webseite ein responsives Design?
Eine Webseite, die nicht für verschiedene Bildschirmgrößen und -geräte optimiert ist, könnte veraltet wirken. In der heutigen Zeit, in der die Nutzung von Smartphones und Tablets weit verbreitet ist, ist responsives Design entscheidend.
Nutzt die Webseite Flash?
Die Verwendung von Adobe Flash wird zunehmend veraltet, da viele moderne Browser und Mobilgeräte Flash nicht mehr unterstützen. Websites, die immer noch stark auf Flash basieren, könnten veraltet erscheinen oder auch nicht mehr richtig gelesen werden.
Beinhaltet die Webseite veraltete Technologien?
Wenn eine Website Technologien wie veraltete HTML-Tags, Framesets oder Tabellenlayouts verwendet, könnte dies auf veraltetes Design hinweisen. Moderne Webdesign-Praktiken bevorzugen semantischen HTML5-Code und CSS für das Layout.
Hat die Webseite langsame Ladezeiten?
Veraltete Websites können langsam laden, insbesondere wenn sie nicht für Effizienz optimiert sind. Moderne Websites streben in der Regel schnelle Ladezeiten an, um die Benutzererfahrung zu verbessern.
Gibt es auf der Webseite Interaktivität?
Moderne Websites bieten oft interaktive Elemente wie Animationen, eingebettete Videos oder benutzerdefinierte JavaScript-Funktionen. Eine Website, die solche Interaktionen nicht bietet, könnte als veraltet wahrgenommen werden.
Sind auf der Webseite veraltete visuelle Elemente sichtbar?
Design-Trends ändern sich im Laufe der Zeit, daher können visuelle Elemente wie Farbschemata, Schriftarten und Grafiken, die veraltet wirken, auf eine veraltete Website hinweisen.
Ist die Navigation der Webseite verständlich und übersichtlich?
Eine unübersichtliche oder verwirrende Navigation kann darauf hinweisen, dass eine Website nicht auf dem neuesten Stand ist. Moderne Websites streben eine klare und intuitive Navigation an.
Gibt es auf der Webseite Sicherheitsmaßnahmen?
Websites ohne SSL-Verschlüsselung (erkennbar an "https://" anstelle von "http://") könnten als veraltet angesehen werden, da Sicherheit im modernen Webdesign von großer Bedeutung ist.
Ist die Webseite kompatibel mit modernen Browsern?
Eine Website, die nicht korrekt in modernen Webbrowsern gerendert wird oder in älteren Browsern fehlerhaft angezeigt wird, könnte veraltet sein.

Wenn die Webseite mehr als drei der oben genannten Punkte erfüllt, sollte sie höchstwahrscheinlich überarbeitet werden damit sie wieder zeitgemäß und gewinnbringend ist.

0 comments

Routenplaner mit Leaflet

23. February 2024, CAPCom WebTeam - Tipps & Tricks

Eine immer wieder nachgefragte Komponente für Webseiten ist eine Wegbeschreibung mit Routenplanung. Die Einbindung von Dienstleistern wie Google oder Bing erfordert jedoch die Einwilligung der Besucher zur Nutzung dieser Dienste unter Berücksichtigung der DSGVO. Bei der Verwendung von Leaflet mit OpenStreetMap, der Leaflet Routing Machine und Nominatim kann dies vermieden werden. Alle verwendeten Dienste können dank OpenSource auf Wunsch auch lokal installiert werden.

Diese Anleitung zeigt nur einen sehr kleinen und reduzierten Ausschnitt der Möglichkeiten, um einen schnellen Einstieg zu ermöglichen, aber auch den der am häufigsten auf Webseiten Verwendung findet: die Kartendarstellung des Standortes mit der Möglichkeit der Routenplanung von der Adresse des Besuchers (einzugeben) und dem Standort des Webseitenbetreibers (vorgegeben).

Die verwendeten Bibliotheken können hier heruntergeladen werden und liegen bei unserem Beispiel auch lokal auf unserem Filesystem bzw. Webserver:

Leaflet https://leafletjs.com/download.html
Leaflet ist eine freie JavaScript-Bibliothek, mit der WebGIS-Anwendungen erstellt werden können.
OpenStreetMap https://www.openstreetmap.org/
OpenStreetMap ist ein freies Projekt, das frei nutzbare Geodaten sammelt, strukturiert und für die Nutzung durch jedermann in einer Datenbank vorhält.
Leaflet Routing Machine https://github.com/perliedman/leaflet-routing-machine/releases
Leaflet Routing Machine ist eine einfache, flexible und erweiterbare Möglichkeit, einer Leaflet-Karte Routing hinzuzufügen.
Leaflet Control Geocoder https://github.com/perliedman/leaflet-control-geocoder/releases
Ein einfacher Geocoder für Leaflet, der standardmäßig OSM/Nominatim verwendet.
Nominatim https://nominatim.org/
Nominatim verwendet OpenStreetMap-Daten, um Orte auf der Erde nach Namen und Adresse zu finden (Geokodierung).

Der erste Teil unserer HTML-Seite lädt die Bibliotheken und die zugehörigen Stylesheets. Diesen Teil erklären wir in diesem Artikel nicht.

<!DOCTYPE HTML>
<html>
<head>
<title>Routenplaner Mini</title>
<meta charset="utf-8" /> 
<link rel="stylesheet" href="leaflet.css" />
<script src="leaflet.js"></script>
<link rel="stylesheet" href="Control.Geocoder.css" />
<script src="Control.Geocoder.js"></script>
<link rel="stylesheet" href="leaflet-routing-machine.css" />
<script src="leaflet-routing-machine.js"></script>
<style>
.karte {
   position: relative;
   width: 100%;
   aspect-ratio: 4 / 3;
}
</style>
</head>

Den zweiten Teil unserer HTML-Seite erklären wir jetzt detaillierter. Alle Abschnitte folgen dem ersten Teil, natürlich ohne die Erläuterungen.
Wir bauen uns einen Abschnitt (div) im body der HTML-Seite zur Aufnahme unserer Karte.

<body>
<div id="karte" class="karte"></div>

Unser Script-Teil beginnt mit der Initialisierung der Kartenvariable. Durch das 'setView' setzen wir den primär sichtbaren Bereich der Karte durch Angabe des geographischen Mittelpunktes ( 49.87133, 8.624618) und des Zoomfaktors (19). Das muss natürlich auf die gewünschten Werte angepasst werden.

<script>
var karte = L.map('karte').setView([49.87164, 8.6243], 19);

Der Zielmarker (der entspricht hier dem Mittelpunkt der Karte vom Anfang) wird gesetzt und um eine zugehörige Beschriftung ergänzt.

var marker = L.marker([49.87164, 8.6243]).addTo(karte);
marker.bindPopup("<b>CAPCom AG</b>Ihre Webagentur").openPopup();

Wir konfigurieren hier den zu verwendeten Web Map Tile Service (WMTS), in diesem Fall den von OpenStreetMap angebotenen Demo-Service. Für den produktiven Betrieb benötigen sie entweder einen Link von einem der verfügbaren kommerziellen Dienstleister oder einen eigenen WMTS. Die Daten der Kacheln (Tiles) von OpenStreetMap sind frei verfügbar. Ergänzt wird auch der notwendige Copyright-Hinweis.

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(karte);

Jetzt konfigurieren wir die Navigation. Dazu nutzen die Funktion 'L.Routing.control'. Wir definieren den Beginn und das Ziel der Route. Den Beginn lassen wir allerdings offen, damit der Besucher seine eigene Adresse eintragen kann. Als Ziel wird der Ort des Zielmarkers, den wir schon konfiguriert haben, verwendet.

L.Routing.control({   
    waypoints: [
                L.latLng(),
                L.latLng(marker.getLatLng())
               ],

Weitere Optionen betreffen das Verhalten der Routing-Funktionalität, das Aussehen der Linie (lineOptions), ob das Routing auch beim Verschieben der Marker aktiv sein soll (routeWhileDragging), ob die Karte entsprechend der angezeigten Route gezoomt und positioniert werden soll (fitSelectedRoutes) und die angezeigte Sprache (language).

lineOptions: { styles: [{color: 'blue', opacity: 1,weight: 5}] },
routeWhileDragging: true,
fitSelectedRoutes: true,
language: 'de' ,

Jetzt aktivieren wir den Geocoder Nominatim. Mit diesem wandeln wir die Texteingaben in Längen- und Breitengrade um, die auf der Karte dargestellt werden können. Das funktioniert auch in die andere Richtung. Dies erkennt man daran, dass in der Routingeingabe unser Zielmarker als Adresse dargestellt wird.

geocoder: L.Control.Geocoder.nominatim()
}).addTo(karte);
</script>
</body>
</html>

Damit ist der Routenplaner fertiggestellt. Er enthält natürlich keine Anpassungen an den Stil der Website oder eine Integration in ein CMS, wo es manchmal einfacher ist, mit entsprechenden Extensions oder Plugins zu arbeiten.

Das komplette Beispiel kann hier heruntergeladen werden. Das Abrufen der Kacheln bei OpenStreetMap und das Umwandeln der Adressen via Nominatim erfordern in unserem Beispiel Internetzugriff.

0 comments

Unsere neuen Webseiten Pakete sind da!

23. January 2024, CAPCom WebTeam - E-Commerce

Unsere Webseiten Pakete reichen von schlichten HTML/CSS-Webseiten bis hin zu dynamischen Lösungen mit Content Management Systemen wie TYPO3 oder WordPress. Sie können selbst entscheiden, was am besten zu Ihnen passt. Ihre individuelle Webseite aus dem Basic Paket erhalten Sie schon zum Beispiel ab nur 650 Euro.

In der digitalen Welt von heute ist eine starke Online-Präsenz unerlässlich. Egal ob Kleinunternehmer, Freiberufler oder mittelständisches Unternehmen. Es könnte für das weitere Wachstum und die Benutzerfreundlichkeit Ihrer Webseite von Vorteil sein, dass die technische Umsetzung und das Design immer auf dem aktuellen Standard gehalten wird. Nur so gewährleisten Sie auch damit jeder die Möglichkeit hat Ihre mühevoll zusammengestellten Inhalte auf verschiedenen Endgeräten (PC/Tablet/Handy) lesen zu können.

Eine Webseite ist mehr als nur eine digitale Visitenkarte – sie ist Ihr Tor zur Welt. Zeigen Sie, was Sie zu bieten haben, erreichen Sie mehr Kunden und wachsen Sie online.

Schauen Sie sich gerne auf unserer Webseite die verschiedenen Webseiten Pakete HIER an.

Unsicher welches Webseiten Paket für Sie das Richtige ist?
Gerne stehen wir Ihnen auch für ein kostenloses Beratungsgespräch zur Verfügung und finden mit Ihnen gemeinsam das für Sie passende Webseiten Paket heraus.

Wir freuen uns auf Sie! Bei weiteren Fragen oder Anmerkungen stehen wir Ihnen gerne zur Verfügung.

0 comments