Let’s Encrypt

Beim Einrichten eines SSL-Zertifikats mittels Let’s Encrypt kann der ACME Server eine bestimmte Datei im Ordner .well-known/acme-challenge nicht erreichen. Zertifikate, dienen der Sicherheit und dem Datenschutz, machen den Webentwicklern und Softwareentwicklern aber auch immer wieder das Leben schwer. In meinem Fall war es folgende Problemstellung, die mich ein paar Stunden Recherche und Fehlersuche kostete.

weiterlesen

DA-FormMaker 4.2 mit Unterschriftenfeld und FTP-Upload

Neues vom DA-FormMaker. Ab sofort steht die neue Version 4.2 zum Download bereit. Für Käufer der Vorversionen wie immer kostenlos. Ansonsten schaut euch die Testversion. In der neuen Version gibt es zwei große Neuerungen. So gibt es nun ein Zeichen- bzw. Unterschriftenfeld. Damit können Anwender mit der Maus oder auf dem Touchscreen Eingaben vornehmen. Dies kann man für Unterschriften oder für Skizzen oder Zeichnungen nutzen.

weiterlesen

Einfach bloggen mit Wix.com

blog_wixEs gibt viele Gründe im Internet präsent zu sein. Oft möchte man nur aktuelle Informationen beliebiger Art bereitstellen, die ähnlich wie News chronologisch dem Leserkreis zur Verfügung gestellt werden. Das können zum Beispiel die aktuellen Vereinsinformationen sein zum nächsten Anglertreffen. Oder vielleicht die persönlichen Urlaubserlebnisse. Oder die erfolgreichen Fortschritte bei einem Abnehm-Projekt á la SlimFast. Für diese Art der Informationsbereitstellung eignet sich am besten ein eigener Blog. Denn ein Blog, welcher eine kreative Wortschöpfung aus Web und Log, also Weblog (kurz: Blog) ist, dient mehr oder weniger der Darstellung von Inhalten in zeitlich sortierter Reihenfolge. Gut geeignet, um aktuelle Meinungen oder Aspekte des eigenen Lebens oder persönlicher Projekte darzustellen.

weiterlesen

Neu auf eKiwi.de: Homepagebau in Eigenregie

Es tut sich etwas auf unserer Webseite eKiwi.de. Unsere neue Rubrik: Schritt für Schritt zur eigenen Homepage ist online. Die Rubrik richtet sich an alle Leute, welche ihre Homepage selbst ins Internet bringen wollen.

Oft weiß man nicht so richtig wie man starten soll, welche Inhalte man online bringen sollte oder welche technischen Hürden zu nehmen sind. Wir erklären, welche Möglichkeiten es gibt. Will man ein fertiges WordPress-Blog verwenden, einen Homepagebaukasten oder lieber alles von Hand machen? Wo bekomme ich Webspace her und wie lade ich die Homepage hoch.

Homepagebau in Eigenregie

Auch andere Themen, wie Grafikbearbeitung, Usability und Optimierung der Homepage finden Sie in der neuen Rubrik.

Noch ist nicht alles fertig, was wir für die neue Rubrik geplant haben. Diese wird in der nächsten Zeit weiter ausgebaut und kontinuierlich mit neuen Inhalten gefüllt.

Link: Homepagebau Schritt für Schritt.

Caching und Komprimierung in Apache aktivieren

Heutige Webseiten sind mittlerweile recht groß, jede Menge Grafiken, Java-Scripte und CSS-Bibliotheken müssen geladen werden. Da sich diese recht wenig ändern, macht es Sinn, dass diese gecacht werden und nicht bei jedem Aufruf neu geladen werden. Gerade auf mobilen Geräten, erspart man seinen Nutzern damit nicht nur Datenvolumen, sondern auch Zeit. Das gleiche gilt für die Komprimierung. Die Dateien werden vor der Auslieferung an den Client komprimiert.

Wer einen Apache Webserver nutzt, kann Caching und Komprimierung mit einer .htaccess Datei aktivieren. Dies ist meist auch bei “normalem” Webspace möglich. Im Zweifelsfall sollte man beim Provider nachfragen, ob es unterstützt wird.

Caching aktivieren

Die .htaccess Datei hat den folgenden Inhalt:

<IfModule mod_expires.c>

ExpiresActive On

ExpiresDefault “access plus 1 seconds”

ExpiresByType image/jpeg “access plus 4592000 seconds”

ExpiresByType image/x-icon “access plus 4592000 seconds”

ExpiresByType image/jpg “access plus 4592000 seconds”

ExpiresByType image/png “access plus 4592000 seconds”

ExpiresByType image/gif “access plus 4592000 seconds”

ExpiresByType application/x-shockwave-flash “access plus 2592000 seconds”

ExpiresByType text/css “access plus 2592000 seconds”

ExpiresByType text/javascript “access plus 2592000 seconds”

ExpiresByType application/x-javascript “access plus 4592000 seconds”

ExpiresByType text/html “access plus 6000 seconds”

ExpiresByType application/xhtml+xml “access plus 6000 seconds”

</IfModule>

Wenn wir uns eine Zeile anschauen, so sehen wir, dass wir das Caching für jeden Dateityp extra konfigurieren können:

ExpiresByType image/jpeg “access plus 4592000 seconds”

In diesem Fall werden JPG-Bilder für ca. 125h gecacht. Für jeden Dateityp sollte man sich in etwa überlegen, wie lange das Caching sinnvoll ist. Werden Bilder öfter mal aktualisiert, oder an den Java-Scripten öfter mal geschraubt wird, muss der Wert natürlich sehr viel niedriger ausfallen.

Neben Angaben in Sekunden, kann man dies auch in Wochen angeben:

ExpiresByType image/jpg “access plus 60 days”
ExpiresByType text/css “access plus 2 weeks”
ExpiresByType application/pdf “access plus 1 month”

Komprimierung

Als nächstes aktivieren wir die Komprimierung:

<IfModule mod_deflate.c>

AddOutputFilterByType DEFLATE text/html text/xml text/css text/plain

AddOutputFilterByType DEFLATE image/svg+xml application/xhtml+xml application/xml

AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml

AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript

AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-otf

AddOutputFilterByType DEFLATE font/truetype font/opentype

</IfModule>

Auch hier legen wir wieder die Dateitypen fest, welche komprimiert werden soll. Bilder, ZIP-Dateien und andere bereits komprimierte Datenformate werden hier außen vor gelassen. Hier macht eine Komprimierung keinen Sinn und würde Server und Client nur unnötig belasten.

Ein Hinweis zur Komprimierung, nicht bei allen Webhostern ist das Modul im Apache-Server aktiv. Hier wendet man sich im Zweifelsfall an den Support des Webhosters. Unterstützt der Provider die Komprimierung nicht über .htaccess, gibt es hier einen Workaround, welcher z.B. auch bei 1und1 funktioniert.

Überprüfung

Die Frage die sich jetzt stellt ist natürlich, ob unsere Anpassungen nun etwas bewirken. Netterweise stellt Google ein Online Tool hierfür bereit. “PageSpeed Insights”. Einfach die URL der Webseite angeben.

Machen wir einen Voher- und Nachher-Vergleich:

image

Wie man sieht, fällt die Bewertung nicht so gut aus. Unterschieden wird zwischen mobiler Seite und Desktop-Version.

Nach der Optmierung fällt die Bewertung schon besser aus:

image

image

Wie man sieht, gibt es immer noch etwas zu tun. Das Online-Tool von Google gibt jede Menge Tipps wie man die Webseite noch weiter optimieren kann. Aber fürs Erste haben wir schonmal einen Schritt in die richige Richtung getan.

Bilder responsive einbinden

Bilder die man in die Webseite einbindet haben eine feste Breite und Höhe. Damit der Benutzer auf dem mobilen Endgerät nicht hin und her scrollen muss, ist es sinnvoll diese “responsive” zu machen. Zum Glück geht dies recht einfach mit etwas CSS:

img {
max-width: 100%;
height: auto;
}

Ist genug Platz vorhanden, werden die Bilder in der originalen Bildgröße angezeigt, aber nicht größer. Steht weniger Platz zur Verfügung werden die Bilder automatisch verkleiner.

Neues Online-Tool: Base64 Bild Konverter – Bilder direkt in HTML einbetten

Es gibt ein neues Online-Tool auf eKiwi.de, den Base64 Bild Konverter. Damit lassen sich Bilder in das Base64-Format konvertieren. Wozu braucht man das? Ganz einfach, die Bilder lassen sich direkt in den Quelltext der Webseite einbauen. In diesem Artikel wird erklärt wie das funktioniert.

Image

View Source – Quelltext von Webseiten unter IOS anzeigen

Den Seitenquelltext von Webseiten anzeigen zu lassen gehört zu den Funktionen im Browser welche ich oft benötige. Gerade bei Supportanfragen zu unseren Produkten verrät ein Blick in den Quelltext der HTML-Seite oft schnell was falsch läuft. 

Leider fehlt diese Funktion im Browser von IOS auf dem iPhone und iPad. Doch diese Funktion lässt sich unter IOS 8 mit einer kleinen App für 89 Cent nachrüsten: View Source.

View Source

Die App klingt sich direkt in Safari ein. Neben der Anzeige des Quelltextes lässt sich zum Beispiel die Dokumentenstruktur anzeigen. Der Info-Tab zeigt an, wann die Webseite zuletzt aktualisiert wurde und welche Cookies gesetzt worden sind. Der Assets-Tab zeigt Bilder, ausgehende Links, Stylesheets und eingebundene Scripte an. Diese kann man sich ebenfalls in der App im Quelltext anzeigen lassen.

Für echte Poweruser kann man zudem eigenes Java-Script schreiben und in die Webseite injizieren und ausführen. Inwieweit dies auf eine Touch-Screen Spaß macht sei mal dahingestellt. 🙂

Ansonsten eine feine App. Sicher werde ich keinen ausführlichen Support direkt auf meinem Telefon leisten, aber für einen schnellen Überblick im Quelltext reicht es allemal. 

CSS Shapes Editor für Google Chrome

Mittels CSS-Shapes lassen sich zum Beispiel Bilder besser in den Textfluss integrieren, bzw. man kann selbst festlegen, wie der Text eine Grafik umfließt. Hier ein Beispiel:

Shape1

Im Code sieht das obere Beispiel so aus:

<img src="remote.png" align="left” style="shape-outside: polygon(0px 0px, 180px 16px, 365px 501px, 0px 506px);">

Die CSS-Shape ist als Polygon definiert. Allerdings ist es nicht gerade einfach die Werte von Hand festzulegen und im Code festzulegen. Eine Hilfestellung bietet sich hier in Form eines Google Chrome-Plugins an, dem “CSS Shapes Editor”. 

Nachdem das Plugin installiert ist, klickt man mit rechter Maustaste auf das gewünschte Element und wählt den Menüpunkt “Inspect Element” aus:

Inspect Element

Es öffnen sich die Entwickler-Tools. Durch Klicken auf den >> Button kann man den “Shapes”-Editor auswählen und durch Klick auf das Plus Icon dem Element die gewünschte Shape-Form hinzufügen. Zur Auswahl stehen Kreis, Ellipse und das Polygon:

Entwickler-Tools

Hat man die gewünschte Form hinzugefügt, klickt man auf den Zeiger (Pointer) neben dem Plus. Anschließend kann man die Form im Browser-Fenster bearbeiten.

Form bearbeiten

Änderungen werden direkt sichtbar. Ist das Ergebnis wie man es sich wünscht, kopiert man nur noch den Quelltext heraus. Eine Besonderheit gibt es zu beachten, bei mir hat der Editor nur funktioniert mit Dateien die auf einem Webserver lagen. Mit einer lokalen Datei funktionierte der Editor nicht. Also ggf. die HTML-Dateien einfach schonmal auf den Webspace kopieren.

Ich habe noch ein kleines Video erstellt, welches die Bedienung beschreibt:

Obwohl CSS-Shapes eine super Sache sind, funktionieren diese derzeit nicht in allen Browser. Google Chrome und Opera unterstützen diese. Firefox, Safari und Internet Explorer ignorieren diese bisher. 

HTML-Formulare mit abhängigen Auswahlfelder

Da des öfteren Anfragen von DA-FormMaker Kunden kamen, habe ich ein neues Tutorial auf eKiwi.de geschrieben: Erstellen von abhängigen Combo-Boxen, bzw. Auswahlfeldern in HTML. 

Worum geht es? Der Benutzer wählt in einem Auswahlfeld etwas aus und passend dazu werden in einem zweiten Auswahlfeld die Elemente angepasst:

ComboDas ganze funktioniert natürlich nicht nur in DA-FormMaker Formularen, sondern auch in ganz normalen selbst erstellten HTML-Formularen. 

Hier geht es zum Tutorial.