Webdesign Tipps

Umlaute bei Schriftart Bebas Neue

Veröffentlicht in Webdesign spezial

bebas_neue.gifBei einem Joomla Webdesign-Projekt wurde für die Überschriften die Schriftart "Bebas Neue" ausgesucht. Diese serifenlose Open Type Schriftart besteht komplett aus Versalien und ist ziemlich schick. Sie kann auf der Website von FontSquirrel heruntergeladen werden.

Laut Character Map von FontSquirrel sollen in dieser Schriftart auch Zeichen für Umlaute enthalten sein. Umlaut-Darstellung ohne korrekt geladen ZeichensatzNur wurden diese auf unserer Projektseite online dann nicht korrekt angezeigt; das "ä" sieht doch sehr nach Kleinbuchstabe aus und hat wenig Ähnlichkeit mit den anderen "Bebas Neue"-Zeichen. So liegt also die Vermutung nahe, dass die Umlaute nicht geladen wurden.

Bei FontSquirrel unter @font-face Kit findet man eine Möglichket, das Font-Face-Kit für verschiedene Sprachen zu generieren und herunterzuladen; hier habe ich nun im Drop-Down "Don't Subset" ausgewählt, damit die Schriftzeichen inklusive Umlaute und Sonderzeichen für alle Sprachen eingebettet werden. Nach Klick auf den Button "Download @font-face Kit" wird die Font-Datei als zip-File heruntergeladen. Dieser muss lokal entpackt werden und die enthaltenen Dateien auf den Webserver geladen werden. In meinem Fall in das Verzeichnis root/template/meinTemplate/fonts/BebasNeue.

Umlaut-Darstellung mit korrekt geladen ZeichensatzNach Speicherung der Dateien auf dem Webserver und anschließender Aktualisierung der Browseransicht werden die Umlaute dann korrekt angezeigt; das "Ä" erscheint jetzt korrekt in Versalien und im kantigen Look der Bebas Neue.

 

Sie benötigen professionelle Ünterstützung bei Ihrem Webdesign-Projekt? Schreiben Sie mir einfach und ich berate Sie gerne!

.

Providerwechsel mit de-Domain

Veröffentlicht in Webdesign spezial

Als mein erster Providerwechsel für einen Webdesign-Kunden anstand habe ich mich erstmal schlau gelesen. Ist alles gar nicht schwer. Um Zeitverzögerungen und Unannehmlichkeiten zu vermeiden sollte man einige Dinge rechtzeitig bedenken.


KK-Antrag

Vom neuen Provider erhält man ein Formular für den KK-Antrag (KK=Konnektivitätskoordination). Hier trägt man den Namen der Domain ein, einige persönliche Daten zum Domaininhaber und den Namen des bisherigen Providers sowie die Kundennummer bei diesem. Soll das Providerwechsel-Passwort an eine bestimmte E-Mail-Adresse gesendet werden, so sollte dies hier ebenfalls notiert werden. Das Formular muss vom Domaininhaber unterschrieben werden und dann sowohl an den alten, als auch an den neuen Provider geschickt werden.

 

Bereits nach 4 Stunden (angekündigt war innerhalb von 24 Stunden) erhielt ich vom alten Provider das Providerwechselpasswort, dieses wird auch AuthInfo oder AuthInfo-Code genannt. Dieses Passwort ist 30 Tage gültig, danach muss der Providerwechsel erneut beantragt werden.

 

E-Mail-Verlusten vorbeugen

Da die Zugangsprovider erst alle Nameserver aktualisieren müssen (dies kann bis zu 48 Stunden dauern), kann es nach der Übernahme der Domain durch den neuen Provider passieren, dass Mails oder Seitenaufrufe noch beim alten Provider landen oder als unzustellbar zum Absender zurückgeschickt werden. Um dabei den Verlust von Emails zu vermeiden, gibt es die Möglichkeit, beim alten Provider einen MX Record (Mail Exchange Resource Record) auf den neuen Server einrichten zu lassen. Mit einem MX-Record wird festgelegt, welcher Server für eine bestimmte Domain E-Mail-technisch zuständig ist. Sind dort zwei (oder mehr) Server eingetragen, so werden Emails an den zweiten Server geleitet, wenn der erste Server nicht erreichbar ist. Über den Wert „preference“ wird die Priorität festgelegt. Der Server mit der höchsten Priorität wird als erstes angesprochen, der mit der geringsten Priorität erst dann, wenn alle anderen nicht erreichbar sind.

 

Für das Einrichten des MX-Records muss wieder ein Formular vom Domaininhaber ausgefüllt und unterschrieben werden, in dem dieses beantragt wird. Die Einrichtung erfolgt ziemlich schnell; in meinem Fall griff die Funktion schon nach ca. 1,5 Stunden. Dieser Dienst ist kostenpflichtig und schlug mit ca. 18 Euro zu buche.

 

Website beim neuen Provider einrichten

Schon bevor ich das Providerwechselpasswort beim alten Provider beantragt habe, habe ich auf dem Server des neuen Providers die neue Website eingerichtet. Auch alle bereits beim alten Provider verwendeten E-Mail-Adressen müssen beim neuen Provider wieder eingerichtet werden.

 

Umleitung von alten Seiten zu den Neuen

Um zu vermeiden, dass bestehende Links zur alten Homepage (z. B. Bookmarks bei Usern oder Links von Google und anderen Suchmaschinen) ins Leere laufen und damit neben der Verärgerung der User eine Negativbewertung bei den Suchmaschinen riskiert wird, müssen Umleitungen von den Einzelseiten der alten Homepage auf geeignete Seiten des neuen Webs gelegt werden. Dies geschieht bei Apache-Webservern am elegantesten durch Redirects in der Datei .htaccess.

 

Providerwechselpasswort an den neuen Provider schicken

Erst nachdem alle vorbereitenden Arbeiten abgeschlossen sind wird der AuthInfo-Code an den neuen Provider geschickt, bzw. selbst online eingetragen. Anschließend ist die Domain dann innerhalb von 24 bis 48 Stunden über den neuen Provider erreichbar. So lange dauert es, bis wirklich alle Nameserver auf den neuen Server umgestellt sind. Über unsere Internetverbindung war die Seite nach ca. 7 Stunden beim neuen Provider erreichbar.

 

Mehr Infos zum Providerwechsel gibts zum Beispiel bei Wikipedia.

 

 

 

Sie benötigen beim Providerwechsel Ünterstützung vom Webdesign-Experten? Schreiben Sie mir einfach und ich berate Sie gerne!

Doppelten Content vermeiden

Veröffentlicht in Webdesign spezial

Der Begriff "Doppelter Content" im Webdesign meint, dass Inhalte, die auf einer Homepage dargestellt sind in identischer Form noch einmal unter einer anderen Internetadresse im World Wide Web vorkommen
 

Doppelter Content kann verschiedene Ursachen haben:

  • Jemand hat die eigenen Inhalte "gestohlen" und auf seiner Website veröffentlicht. Hier hilft nur hartnäckiges Anschreiben, Ermahnen, Verklagen, ...
     
  • Man hat selbst auf einer anderen Website geklaut. Natürlich nicht wirklich, aber theoretisch ist dies natürlich auch eine Möglichkeit.
     
  • Eine häufige Ursache ist aber, dass die eigene Website sowohl mit www (http://www.Domainname.de) als auch ohne (http://Domainname.de) erreichbar ist. Google und Co sehen die Webseiten dann unabhängig voneinander. Abhilfe bei php-Webs mit mod_rewrite schafft hier die Festlegung der Standard-Domain.

    Dies geschieht durch einen Eintrag in der .htaccess Datei:

    RewriteCond %{HTTP_Host} ^Domainname\.de$ [NC]
    RewriteRule ^(.*)$ http://www.Domainname.de/$1 [R=301,L]


    Diese Zeilen müssen direkt unter der Zeile mit dem Eintrag "RewriteEngine On" stehen und bewirken, dass ein Aufruf ohne www auf die Webseite mit www umgeleitet wird.

 

Doppelter Content führt bei den Suchmaschinen zu einer Abwertung und im schlimmsten Fall zum Ausschluss. Ist die Webseite, die den Inhalt gestohlen hat SEO-technisch stärker als die eigene, so wird sie in den Suchergebnissen die eigene Webseite von den guten Plätzen "vertreiben".

 

 

 

Sie benötigen professionelle Ünterstützung beim Webdesign? Schreiben Sie mir einfach und ich berate Sie gerne!

Spam vermeiden

Veröffentlicht in Webdesign spezial

Als Spam-Mail bezeichnet man unerwünschte Email-Nachrichten, die dem Empfänger unverlangt zugestellt werden und die meistens Werbung enthalten. Spam ist ein leidiges Thema und nahezu jeder, der ein E-Mail-Postfach hat, war schon mal irgenwie davon betroffen. Wenn man auch noch eine eigene Website betreibt und nicht aufpasst, dann kann Spam zu einem echten Problem werden, das viel Zeit und Datenspeicher und damit Geld kostet.

Als Webdesigner und Homepage-Inhaber sollte man also vermeiden, seine Email-Adresse ungeschützt öffentlich bekannt zu geben, damit Webcrawler (Computerprogramm, das automatisch das www durchsucht) diese nicht sammeln können.

 

Möglichkeiten der Email-Verschleierung

Damit eine im Web angezeigte E-Mail-Adresse nur von Menschen, nicht aber von Maschinen ausgelesen und verwendet werden kann, gibt es die verschiedensten Möglichkeiten:

 

  • Die einfachste ist, das @-Zeichen in der Adresse durch einen anderen Text, z. B. "[at]" oder "[klammeraffe]" zu ersetzen. Eine Email-Adresse würde dann so aussehen: bb[at]webdesign-ostholstein.de. Nachteil bei dieser Methode ist, dass der User daraus die richtige Schreibweise erkennen muß und die Zeichen [at] durch das @-Zeichen ersetzen muß. Je nach technischer Bewandnis der User kann dies auch schon zu einer unlösbaren Aufgabe werden. Außerdem gibt es inzwischen Browser, die so eine Adresse erkennen und das [at] korrekt ersetzen.
     
  • Eine weitere Möglichkeit wäre, zusätzliche Zeichen in die E-Mailadresse einzufügen, die der User dann entfernen muss, z. B. so:
    Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein! (bitte ABC rauslöschen!)
    Auch hier ist der Nachteil, dass der User die Adresse erst bearbeiten muß. Außerdem besteht die Möglichkeit, dass die so veränderte Adresse real existiert und man dem Besitzer dieser Adresse damit Schaden zufügt und das ist auch nicht nett.
     
  • Man kann auch seine E-Mail-Adresse nur als Bild darstellen. Nachteile hier sind, dass die Adresse nicht klickbar ist und natürlich die mangelnde Barrierefreiheit. Denn Vorlesesoftware (Textreader), die häufig von sehbehinderten Menschen verwendet werden, können diese nicht entziffern.
     
  • Weiter besteht die Möglichkeit die E-Mail-Adresse mit Java-Script technisch zu verschleiern. Auf der Website wird die E-Mail-Adresse dann wie gewohnt dargestellt, im HTML-Quellcode wird sie jedoch verschlüsselt. So kann sie von einem Webcrawler nicht erfasst werden. Allerdings können User, die Java-Script deaktiviert haben diese dann auch nicht sehen.
     

Will man auf der sicheren Seite sein, so bleibt wohl nur, die E-Mail-Adresse gar nicht anzuzeigen. In diesem Fall kann man dann auf die Verwendung eines Kontaktformulares ausweichen.

 

Kontaktformular mit Captcha

CaptchaEin Captcha ist meist eine Grafik, in der eine Zeichenfolge dargestellt wird, die der User vor dem Absenden eines Formulares abtippen muss. Möglich ist auch, dass der User eine Rechenaufgabe oder ähnliches lösen muss. Da ein Webcrawler diese Aufgaben (bisher) nicht lösen kann, kann damit sichergestellt werden, dass das Formular tatsächlich von einem Menschen abgeschickt wurde. Nachteil hier ist wieder die mangelnde Barrierefreiheit für Menschen mit Seh-Handycap. Alternative könnte man parallel die Zeichenfolge in einer Audiodatei anbieten. Damit würden dann allerdings die Menschen ausgeschlossen die gleichzeitig ein Hör-Handycap haben.

 

Joomla! und Spam-Vermeidung

Für das Content Management System (CMS) Joomla! gibt es sowohl standardmäßig, als auch als Komponenten zahlreiche Möglichkeiten zur Spam-Vermeidung. E-Mail-Adressen in Beiträgen werden automatisch per JavaScript verschleiert und ein Captcha läßt sich auch einfach einbinden. Auf meinen und den Seiten meiner Kunden verwende ich beide Möglichkeiten, wobei ich neben der mit JavaScript verschleierten E-Mail-Adresse häufig diese zusätzlich selbst verschleiert ([klammeraffe]) anzeige.

 

 

 

Sie benötigen Ünterstützung? Schreiben Sie mir einfach und ich berate Sie gerne!

Favicon

Veröffentlicht in Webdesign spezial

Als Favicon bezeichnet man im Webdesign das kleine zumeist auffällige Symbol (Icon), welches im Browser in der Registerkarte sowie in der Favoritenliste angezeigt wird. Im Idealfall unterscheidet es sich von dem anderer Websites und ermöglicht dem User so eine schnelle Wiedererkennung der Seite. Der Name Favicon ist eine Kunstwort, das aus den englischen Worten Favorites (Favoriten) und Icon (Symbol) entstanden ist.

Favicon von webdesign-ostholstein.de

 Favicon von www.palustrishof.deFavicon von Joomla!

 

Favicon-Formate

Als Grafik für das Favicon dient eine 16 x 16 bzw. 32 x 32 Pixel große Grafik im Format .ico, .png oder .gif, wobei der Internet Explorer bis einschließlich Version 8 nur das ico-Format unterstützt.

 

Favicon einbinden

In der Regel wird das Favicon im Hauptverzeichnis des Webs abgelegt und dann mit einem entsprechenden Tag im Head der Seite platziert. Bei Verwendung eines Joomla-Webs wird es allerdings nicht dort, sondern im Hauptverzeichnis des verwendeten Templates abgelegt.

 

Man kann ein Favicon sowohl als statische Grafik, als auch als animiertes Gif einbinden:
 

  • Bei Verwendung des statischen Favicons erfolgt die Einbindung im HTML-Quellcode zwischen den Header-Tags <head> ... </head> in der Form

    <link rel="shortcut icon" href="/favicon.ico">.
     
  • Bei Verwendung eines animierten Favicons muss zwischen den Header-Tags außerdem die animierte Datei angegeben werden:

    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="icon" href="/animiertes_favicon.gif" type="image/gif">

     
  •  Genau so verfährt man auch, wenn man ein anderes als das ico-Format verwenden möchte (z. B. png):

    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="icon" href="/favicon.png" type="image/png">

 

Favicon erstellen

Um ein Favicon im ico-Format zu erstellen benötigt man entweder eine geeignete Software (Fotoschop kann das leider nicht) oder man nutzt einen Online-Anbieter wie z. B. den Favicon Generator bei WebMaster-Elite.de oder den Favicon Generator von Project Fondue.

 

Wer kein Favicon möchte, sollte Bedenken, dass der Internet Explorer 5 ohne Favicon eine Fehlermeldung in der Logdatei erzeugt. Für den guten Wegdesigner also ein Grund mehr, immer ein Favicon zu verwenden. Zur Not einfach ein durchsichtiges Favicon erzeugen.

 

 

 

Sie benötigen Ünterstützung? Schreiben Sie mir einfach und ich berate Sie gerne!