Camp Firefox

Die Firefox-Community

soeren-hentzschel.at 2.0 – die Highlights des neuen Blogs

Genau eine Woche ist vergangen seit dem großen Relauch dieser Seite. Mit diesem Artikel möchte ich auf ein paar Highlights der neuen Seite eingehen.

Mit der Ankündigung des Blog-Relaunch vor genau einer Woche wurde bereits einiges erzählt, ohne auf all die Details einzugehen, welche den neuen Blog ausmachen. Wer unter anderem etwas über das „die Timeline“ genannte Design-Konzept der Seite lesen möchte, sollte diesen Artikel unbedingt auch lesen.

Responsive Design – in beide Richtungen

Das neue Design ist responsive, das heißt, es passt sich dynamisch der Fensterbreite an, was vor allem Nutzern von Smartphones und Tablets zu Gute kommt. Während die meisten Webseiten mit Responsive Designs diese nur in eine Richtung denken, nämlich in Richtung immer kleinerer Bildschirme, wurde bei diesem Design auch in die andere Richtung gedacht: nicht nur Smartphones und Tablets werden immer häufiger genutzt, immer mehr Leute nutzen an ihrem Computer auch große Bildschirme, deren Platz auf gefühlt 99 Prozent aller Webseiten nicht ausgenutzt wird und zu viel leerem Platz links und rechts von der eigentlichen Seite führt. Nicht so hier. Wenn Platz vorhanden ist, wird dieser auch genutzt.

Das Navigations-Konzept

Bestmögliche Ausnutzung des Platzes bedeutet nicht nur eine Anpassung der Dimensionen, es bedeutet auch, bei vorhandenem Platz sinnvolle Informationen anzuzeigen, welche bei nur wenig vorhandenem Platz vermutlich verzichtbar sind. So besitzen in der „Desktop-Version“ die Navigationspunkte zusätzliche Beschreibungen, welche erklären, was einen bei einem Klick darauf erwartet.

Relaunch Navigation Desktop

Die Navigation in der mobilen Ansicht verzichtet auf die Beschreibungen. Hier kommt ein Konzept zum Einsatz, welches unter der Bezeichnung Off-Canvas bekannt ist: die Navigation befindet sich außerhalb des sichtbaren Bereichs und wird per Klick auf das Menüsymbol in den sichtbaren Bereich geschoben. Sichtbar ist dabei immer nur eine Navigationsebene. Bei Klick auf einen der Menüpunkte wird die darunter liegende Ebene sichtbar – oder per Klick auf den entsprechenden Eintrag wieder die darüberliegende Ebene.

Relaunch Navigation Mobil

Ein weiterer Kniff der Navigation ist der Folgende: Bekanntermaßen spielen nicht nur die Inhalte eine große Rolle, auch der zugrundeliegende Quellcode ist wichtig. Inhalt, der weit oben steht, wird bei der automatischen Verarbeitung, das heißt in erster Linie durch Suchmaschinen, als tendenziell wichtiger angesehen als Inhalt, der weit unten steht. Das ist ein Problem, wenn man die Navigation am oberen und nicht am unteren Fensterrand hat, wo doch der Inhalt das Wichtige ist und nicht die sich auf jeder Seite wiederholenden Links in der Navigation. Auf diesem Blog befindet sich die Navigation fast ganz am Ende des HTML-Codes – und wird dynamisch nach oben gesetzt.

Grafik-Optimierungen auf einem neuen Niveau

Grafiken sind ein wichtiges Element auf Webseiten. Sie veranschaulichen Dinge und machen Webseiten schöner. Der Preis sind entsprechend höhere Ladezeiten, so dass man darauf achten sollte, die Webseite dennoch nicht zu grafiklasting zu gestalten. Zumal die immer größere Verbreitung von HiDPI-Bildschirmen erfordert, Grafiken in mindestens doppelter Größe bereitzustellen, damit Nutzer keinen Pixelmatsch ertragen müssen. Darum wurde auf die entsprechende Optimierung allergrößten Wert gelegt. Hier kommen verschiedene Techniken zum Einsatz.

Grafiken, die keine sind

Eine Technik sind Grafiken, die in Wahrheit überhaupt keine sind. Diese Technik sieht man unter anderem in der Navigationsleiste. Seien es die Pfeile, welche bei geöffnetem Menü zu einem Kreuz werden, das Menü-Symbol in der mobilen Ansicht oder die Lupe – all das sind in Wahrheit überhaupt keine Grafiken, sondern pures CSS. Das ist nicht nur performant, sondern ermöglichte schließlich auch die Animationen bei Klick von einer „Grafik“ in die andere. Auch die Lupe bei in den Artikeln eingebundenen Bildern oder die Ladegrafik beim Klick auf diese Bilder sind reines CSS.

Symbol-Schrift

Eine andere Technik sieht man gehäuft in der Sidebar auf der rechten Seite. Bei den Grafiken dort handelt es sich um keine einzelnen Pixelgrafiken, sondern um eine Symbolschrift, was nicht nur den Vorteil hat, dass es für alle diese „Grafiken“ nur eine einzige Anfrage an den Server benötigt, auch skalieren diese Symbole ohne Qualitätsverlust, das heißt, es werden für HiDPI-Bildschirme keine eigenen Grafiken benötigt, und Dinge wie Farbe oder Größe lassen sich einfach per CSS verändern ohne die Grafiken austauschen zu müssen.

Neueste Webtechnologie

Und schließlich gibt es noch Stellen, wo tatsächlich echte Grafiken zum Einsatz kommen, wie die Kategoriegrafiken auf der linken Seite. Die einfache Lösung wäre es, eine Grafik auf konventionellem Wege einzubinden:

HTML

Firefox

Aber das wäre zu einfach und würde dem Anspruch dieser Seite nicht gerecht werden. Stattdessen werden hier tatsächlich vier (!) verschiedene Versionen für jede Kategoriegrafik ausgeliefert – natürlich an jeden nur die jeweils passende Version: Normale PNG-Grafiken, PNG-Grafiken in doppelter Größe für HiDPI-Bildschirme und für Chrome-Nutzer WebP-Grafiken anstelle von PNG-Grafiken, auch hier wieder normal oder HiDPI je nach Bildschirm. Das Beispiel von oben sieht damit wie folgt aus:

HTML


Firefox

Spürbar gesteigerte Performance

Mehr Geschwindigkeit und weniger Schwerfälligkeit, das war eines der wichtigsten Ziele des Relaunches. Die eben genannten Optimierungen tragen naheliegenderweise einen wesentlichen Teil dazu bei, wie auch die Auswahl einer spürbar leichtgewichtigeren Lightbox für Bilder in den Artikeln. Erwähnt sei in diesem Zusammenhang auch der Einsatz des Premium-Plugins WP-Rocket, der besten am Markt verfügbaren Caching-Lösung für WordPress-Systeme. Ergänzt zur Bildoptimierung wird dies in Kürze durch Imagify aus dem gleichen Haus.

Weniger Aufwand für die Veröffentlichung von Artikeln

Ein Ziel des Relaunches war es, die Veröffentlichung von Artikeln zu vereinfachen. Wenn Artikel in dieser Anzahl veröffentlicht werden, sollte die Hauptarbeit das Schreiben sein und nicht auch noch der Veröffentlichungsprozess viel Zeit beanspruchen. So musste beispielsweise das Artikelbild für jeden Artikel manuell festgelegt werden. Dies ist einer der Schritte, welcher automatisiert worden ist: sei es die Kategoriegrafik auf der linken Seite, das Bild für das Facebook-Sharing oder das Bild für das Twitter-Sharing – dieser Bilder werden nun vollkommen automatisch anhand der primären Kategorie (ein Feature, welches WordPress im Originalzustand übrigens auch nicht kennt) ausgewählt. Dies vereinfacht nicht nur den Ablauf der Veröffentlichung, man liest es bereits: je nach Anwendungfall kommen unterschiedliche Grafiken zum Einsatz. Vorher wurde für all die genannten Zwecke die jeweils gleiche Grafik verwendet, was zur Folge hatte, dass die Bilder für Facebook und Twitter alles andere als optimal waren, sprich sie wurden abgeschnitten angezeigt, was nun der Vergangenheit angehört.

Ein weiteres neues Feature dieses Blogs ist etwas, was für die meisten Blogs selbstverständlich ist: die Anzeige eines kurzen Artikel-Ausschnitts bereits auf der Startseite. Aber auch hier macht es dieser Blog wieder ganz anders als der Durchschnitts-Blog: der übliche Weg funktioniert entweder über eine definierte Länge (zeige die ersten x Wörter oder Zeichen auf der Startseite an) oder durch manuelle Eingabe durch den Artikel-Autor (verwende den Text bis hierhin für die Startseite). Ganz im Sinne des vorherigen Abschnittes wurde für diesen Blog auch dafür eine Lösung entwickelt, welche vollkommen automatisch den gewünschten Textbereich erkennt und für die Anzeige auf der Startseite auswählt. Die Definition fixer Workflows macht’s möglich.

Geschätzte Lesedauer

Automatisch findet auch die Berechnung der geschätzten Lesedauer dieser Artikel statt. Natürlich ist die tatsächliche Lesegeschwindigkeit individuell, nichtsdestominder lassen sich die Angaben in Relation zueinander setzen und so beurteilen, ob ein Artikel eher kurz oder lang ist. Auch wenn es zu diesem Zweck einige bereits fertige Plugins gibt, kommt auch hier wieder eine Eigenentwicklung mit einem eigens entwickelten Berechnungs-Algorithmus zum Einsatz. Dieser Algorithmus basiert auf der Grundlage wissenschaftlicher Erkenntnisse zur durchschnittlichen Lesedauer eines Menschen und berücksichtigt auch die Einbindung von Bildern und Code-Beispielen auf dieser Seite – etwas, was einem fertige Plugins normalerweise nicht liefern. Diese zählen in der Regel einfach nur die Wörter.

SEO und strukturierte Daten

Auch wenn es in erster Linie um die Benutzer und nicht um Suchmaschinen geht, so lässt sich nicht leugnen, dass der Großteil der Besucher nun einmal über Suchmaschinen den Weg auf diese Seite findet, was die Suchmaschinen-Optimierung zu einer Aufgabe macht, die von existenzieller Bedeutung für diesen Blog ist. Vergangene Updates der Google-Algorithmen haben den Blog teilweise schwer getroffen. Darum war klar, dass auch die SEO-Strategie Teil des Relaunches werden muss. In diesem Zusammenhang wurde das von Sergej Müller entwickelte wpSEO gegen das SEO-Plugin der Suchmaschinen-Experten von Yoast inklusive Google News-Erweiterung ausgetauscht, welches deutlich mehr Möglichkeiten der Optimierung bietet und im Gegensatz zur Vorgängerlösung auch aktiv bei der Content-Optimierung hilft.

Um Suchmaschinen die Inhalte noch begreiflicher zu machen, setzt diese Seite auf strukturierte Daten. Während für den Leser dieser Seite sofort klar ist, was Artikel-Inhalt, was Kommentar usw. ist, ist das für Suchmaschinen alles andere als eine triviale Aufgabe, denn diese besitzen (noch) nicht die notwendige Intelligenz, das zu erkennen. Dank strukturierter Daten wissen nun auch Suchmaschinen ganz genau, womit sie es zu tun haben. So sehen Suchmaschinen beispielsweise nicht nur den Zeitpunkt der Veröffentlichung eines Artikels, wie wir es lesen können, sondern bekommen dieses gleichzeitig auch in einem standardisierten Format mitgeteilt, welches es eindeutig macht, dass es sich a) um das Veröffentlichungsdatum und nicht um ein anderes Datum handelt und b) wie das Datum zu verstehen ist. Auch ist es nun eindeutig aus dem Quellcode interpretierbar, was Artikel und was Kommentare sind und noch exakter, was beispielsweise der Verfasser des Kommentars und was der Kommentar-Inhalt ist. Das sieht zum Beispiel so aus:

HTML


  • Sören Hentzschel


    schrieb am


    :

    Der Inhalt des Kommentars.

  • Bessere Code-Beispiele

    Nicht nur die Darstellung von Code-Beispielen wurde spürbar gegenüber dem alten Blog verbessert, sondern auch funktional erweitert. So ist es nun nicht mehr nur möglich, Code-Beispiele farblich hervorzuheben, sondern auch zu benennen und bestimmte Zeilen hervorzuheben. Diese Neuerung dürfte sich als sehr praktisch erweisen, wenn es in Zukunft wieder neue Tutorials zur Entwicklung von Add-ons auf diesem Blog gibt. Beispiel? Siehe Abschnitt darüber.

    Integration von Inhalten von firefoxosdevices.org

    Nachdem firefoxosdevices.org bereits die News von soeren-hentzschel.at integriert, war für den Relaunch des Blogs sowie firefoxosdevices.org 2.2 auch der umgekehrte Fall ein Schwerpunkt: die Integration von Inhalten von firefoxosdevices.org auf soeren-hentzschel.at.

    Einer der neuen Integrationspunkte ist die Anzeige eines zufällig ausgewählten Gerätes in der Sidebar des Blogs. Angezeigt werden hier die neben dem Namen des Gerätes und einem Bild außerdem der Zeitpunkt der Markteinführung sowie die Version von Firefox OS. Mit einem Klick gelangt man zur Detailansicht auf firefoxosdevices.org. Die Farbe der Boxen ist abhängig vom Typ des Geräts und entspricht exakt der Farbgebung von firefoxosdevices.org.

    firefoxosdevices.org

    Ein weiterer Integrationspunkt betrifft einzelne Artikel. Dazu sehr ähnlich gehaltene Infoboxen können direkt in den Artikel integriert werden. Auch wird berücksichtigt, ob es sich dabei um ein Gerät handelt, welches es nicht auf den Markt geschafft hat.

    firefoxosdevices.org

    Die Integration ist für den Autor des Artikels denkbar einfach: das entsprechende Gerät muss einfach nur aus einer Liste ausgewählt werden, fertig. Der Rest geschieht automatisch.

    firefoxosdevices.org

    Anpassbarkeit durch den Benutzer

    Um dem Nutzer mehr Kontrolle zu geben, kann dieser diverse Aspekte der Oberfläche anpassen. Das kann bedeuten, bestimmte Elemente wie die geschätzte Lesedauer auszublenden oder das sanfte Scrollen zugunsten eines normalen Scrollverhaltens zu deaktivieren. Für die Speicherung der Einstellungen kommt die Local Storage-Technologie zum Einsatz.

    sh-einstellungen

    Neuer Kommentar-Editor

    Um dem Leser mehr Komfort beim Schreiben von Kommentaren zu geben, kommt hier nun ein richtiger Texteditor zum Einsatz, welcher grundlegende Formatierungen erlaubt und diese direkt so anzeigt, wie sie später im Beitrag erscheinen.

    Relaunch Kommentar-Editor

    Mehr Konsistenz im Design

    Konsistenz im Design ist ein wichtiger Punkt für ein gutes Design. Und während die Social Media-Grafiken in der Vergangenheit zusammengewürfelt waren und überhaupt keine Konsistenz vorweisen konnten, ist dies nun anders.

    Social Media-Grafiken

    Sonstige Verbesserungen

    In diesem Relaunch steckt so viel Liebe zum Detail, dass gar nicht alles genannt werden kann. Ein paar Dinge wollen aber einfach noch erwähnt werden. Dazu gehört, dass die Suchfunktion nun wieder die Ergebnisse nach Datum sortiert. Standardmäßig sortiert WordPress Artikel seit einigen Jahren nach einer kalkulierten Relevanz, mit deren Ergebnis ich überhaupt nicht zufrieden war. Auch erwähnt sei, dass es nun eine brauchbare Druckansicht gibt. Im alten Design war die Druckansicht nicht nur schlecht, sie war schlicht und ergreifend nicht funktional.

    Mehr Funktionalität & dennoch weniger Drittanbieter-Plugins

    Obwohl der neue Blog deutlich mehr Funktionalität bietet, kommen weniger Drittanbieter-Plugins als im alten Blog zum Einsatz. Ein Ziel des Relaunch war es, die Abhängigkeit von Drittanbietern zu verringern und mehr Funktionalität selbst bereitzustellen. Das macht Updates der Software weniger zu einem Glücksspiel, da Abhängigkeiten von anderen immer ein gewisses Risiko mit sich bringen. Wo Drittanbieter-Plugins eingesetzt werden, wurden diese teilweise durch andere ersetzt, welche eine aktivere Entwicklung vorweisen können.

    Zukunftssichere Basis

    Fast am Wichtigsten ist die Tatsache, dass mit diesem Relaunch eine solide und zukunftssichere Grundlage geschaffen worden ist, welche es erlaubt, Änderungen schneller ausliefern zu können. Anders als bis zu diesem Relaunch wird es bis zum nächsten Update keine drei Jahre dauern.

    Der Beitrag soeren-hentzschel.at 2.0 – die Highlights des neuen Blogs erschien zuerst auf soeren-hentzschel.at.

    Programmiersprache: Rust 1.4 steht bereit

    Rust ist eine neue Programmiersprache, in welcher die ebenfalls sich in Entwicklung befindliche neue Rendering-Engine von Mozilla geschrieben wird, die auf den Namen Servo hört. Ab sofort steht Rust 1.4 bereit.

    Für die neue Programmiersprache Rust, in welcher auch Mozillas kommende Engine Servo entwickelt wird, ist ein Release-Zyklus vorgesehen, den man ähnlich auch von Firefox kennt: alle sechs Wochen erscheint eine neue Version und gleichzeitig eine erste Betaversion des Nachfolgers der neuen Version. Nachdem vor sechs Wochen Rust 1.3 erschienen ist, steht nun erwartungsgemäß Rust 1.4. Details zu den Neuerungen gibt es in der offiziellen Release-Ankündigung.

    Der Beitrag Programmiersprache: Rust 1.4 steht bereit erschien zuerst auf soeren-hentzschel.at.

    firefoxosdevices.org 2.2 online!

    Keine Woche nach dem großen Blog-Relaunch gibt es schon wieder Neuerungen: ab sofort ist Version 2.2 von firefoxosdevices.org mit neuen Features online.

    Nur vier Tage nach dem Relaunch von soeren-hentzschel.at wird hiermit die Aktualisierung auf firefoxosdevices.org 2.2 bekannt gegeben.

    Mehr Datenschutz-Transparenz

    Wie schon auf soeren-hentzschel.at wird nun auch auf firefoxosdevices.og ein Hinweis am unteren Fensterrand eingeblendet, welcher auf die Verwendung von Cookies aufmerksam macht. Die Datenschutzhinweise dieser Seite sind von dort nur einen Klick entfernt. Einen aktivierten Local Storage vorausgesetzt (Standard in jedem modernen Browser), kann dieser Hinweis vom Nutzer auch dauerhaft ausgeblendet werden.

    firefoxosdevices.org

    Angekündigte Geräte, welche nicht erscheinen werden

    Mitunter kann es vorkommen, dass ein Gerät mit Firefox OS angekündigt wird, welches dann doch nicht erscheint. So geschehen beispielsweise mit dem Geeksphone Peak+, dem Alcatel One Touch Fire S oder dem MatchStick. Bislang waren in einem solchen Fall die einzigen Optionen, die dazugehörige Seite unverändert online zu lassen oder komplett zu entfernen. Ab sofort bietet das System die Möglichkeit einer entsprechenden Markierung, womit bei Aufruf der Seite sofort klar wird, dass es dieses Gerät nicht auf den Markt geschafft hat, und bereits bestehende Verlinkungen auf diese Seite werden dadurch nicht ungültig. In der Auflistung aller Geräte auf der Startseite tauchen diese Geräte nicht auf.

    firefoxosdevices.org

    Integration auf soeren-hentzschel.at

    Nachdem firefoxosdevices.org bereits die News von soeren-hentzschel.at integriert, war für den Relaunch des Blogs sowie firefoxosdevices.org 2.2 auch der umgekehrte Fall ein Schwerpunkt: die Integration von Inhalten von firefoxosdevices.org auf soeren-hentzschel.at.

    Einer der neuen Integrationspunkte ist die Anzeige eines zufällig ausgewählten Gerätes in der Sidebar des Blogs. Angezeigt werden hier die neben dem Namen des Gerätes und einem Bild außerdem der Zeitpunkt der Markteinführung sowie die Version von Firefox OS. Mit einem Klick gelangt man zur Detailansicht auf firefoxosdevices.org. Die Farbe der Boxen ist abhängig vom Typ des Geräts und entspricht exakt der Farbgebung von firefoxosdevices.org.

    firefoxosdevices.org

    Ein weiterer Integrationspunkt betrifft einzelne Artikel. Dazu sehr ähnlich gehaltene Infoboxen können direkt in den Artikel integriert werden. Natürlich wird auch hier wieder berücksichtigt, ob es sich dabei um ein Gerät handelt, welches es nicht auf den Markt geschafft hat.

    firefoxosdevices.org

    Die Integration ist für den Autor des Artikels denkbar einfach: das entsprechende Gerät muss einfach nur aus einer Liste ausgewählt werden, fertig. Der Rest geschieht automatisch.

    firefoxosdevices.org

    Shopfunktionen entfernt

    Der Shop-Status wie beispielsweise, dass ein bestimmtes Gerät nicht mehr erhältlich ist oder momentan gekauft werden kann, sowie die Links zu Online-Shops, um die Geräte kaufen zu können, wurden von der Seite entfernt. Diese Funktionalität ist mit zunehmender Verbreitung von Firefox OS nicht mehr vernünftig wartbar.

    Sonstige Änderungen

    Der Zähler im Twitter-Button wurde mit der Twitter-Suche verlinkt. Nachdem mit MatchStick der einzige bislang mit Firefox OS angekündigte Streaming-Adapter nicht erscheinen wird, wurde der entsprechende mit firefoxosdevices.org 2.1 erst eingeführte Filter aus der Navigation entfernt. Ebenfalls entfernt wurde das „Neu“-Label vor dem Link zu den News über Firefox OS, einem anderen in Version 2.1 eingeführten Feature. Dazu kommen ein paar Datenaktualisierungen sowie diverse kleinere Verbesserungen unter der Haube.

    Der Beitrag firefoxosdevices.org 2.2 online! erschien zuerst auf soeren-hentzschel.at.

    Firefox Add-on: New Tab Override 1.1 veröffentlicht

    Mit Hilfe des Add-ons New Tab Override kann in Firefox die Seite festgelegt werden, welche erscheinen soll, wenn man einen neuen Tab öffnet. Nun steht ein Update für die Erweiterung bereit.

    Seit Firefox 41 ist es nicht länger möglich, die Seite anzupassen, welche beim Öffnen eines neuen Tabs erscheint, indem die Einstellung browser.newtab.url über about:config verändert wird. Da diese Einstellung – wie leider viele gute Dinge – in der Vergangenheit von Hijackern missbraucht worden ist, hat sich Mozilla dazu entschieden, diese Einstellung aus dem Firefox-Core zu entfernen (siehe Bug 1118285). Glücklicherweise hat Mozilla nicht einfach nur die Einstellung entfernt, sondern gleichzeitig auch eine neue API bereitgestellt, welche es Entwicklern von Add-ons erlaubt, diese Funktionalität in Form eines Add-ons zurück in Firefox zu bringen.

    New Tab Override 1.1

    Ab sofort steht auf addons.mozilla.org Version 1.1 von New Tab Override zum Download bereit. Bisherige Nutzer erhalten das Update bequem über den Add-on Manager von Firefox. Mit dem Update wird die Funktionalität des Add-ons in Firefox 44 und höher wiederhergestellt, nachdem eine Änderung in Firefox Auswirkungen auf die Kompatibilität aller JPM-basierten Add-ons hatte. Außerdem wird die Seite, die beim Öffnen eines neuen Tabs erscheint, nun ordnungsgemäß auf about:newtab zurückgesetzt, wenn das Add-on deaktiviert oder deinstalliert wird.

    Verwendungsweise

    Einfach die gewünschte URL in den Einstellungen des Add-ons eintragen. Änderungen werden umgehend übernommen. Es ist kein Neustart oder dergleichen notwendig. Wird das Feld leer gelassen, wird automatisch die Standard-Seite about:newtab angenommen.

    Screenshot

    New Tab Override 1.1

    Quelltext

    Quelltext auf git.agenedia.com

    Download

    Download auf addons.mozilla.org (deutsche Beschreibung)
    Download auf addons.mozilla.org (englische Beschreibung)

    Der Beitrag Firefox Add-on: New Tab Override 1.1 veröffentlicht erschien zuerst auf soeren-hentzschel.at.

    Firefox: Mozilla erwägt frühere Nicht-Unterstützung von SHA-1

    Eigentlich war geplant, dass Firefox ab Januar 2017 keine SHA-1-Zertifikate mehr unterstützt. Aus Sicherheitsgründen erwägt Mozilla nun, die Nicht-Unterstützung um ein halbes Jahr vorzuziehen.

    Seit Firefox 38 zeigt Mozillas Browser in der Webkonsole eine Warnung an, wenn das auf der Seite verwendete Zertifikat eine SHA-1-Signatur besitzt. Ab Firefox 43 (geplanter Erscheinungstermin: 15.12.2015) wird Firefox keine entsprechenden Zertifikate mehr akzeptieren, welche nach dem 01.01.2016 ausgestellt worden sind. Schließlich sollten ab Januar 2017 überhaupt keine SHA-1-Zertifikate mehr in Firefox akzeptiert werden.

    Aufgrund aktueller Attacken erwägt Mozilla nun, bereits ab Juli 2016 keine SHA-1-Zertifikate mehr in Firefox zu akzeptieren. Weitere Informationen gibt es auf Mozillas Sicherheits-Blog.

    Der Beitrag Firefox: Mozilla erwägt frühere Nicht-Unterstützung von SHA-1 erschien zuerst auf soeren-hentzschel.at.

    soeren-hentzschel.at: großer Blog-Relaunch

    Nach vielen Monaten der Arbeit ist es endlich geschafft: soeren-hentzschel.at erstrahlt in ganz neuem Glanz. Der Relaunch geht dabei weit über den Austausch eines Designs hinaus, auch unter der Haube hat sich einiges getan, kaum ein Stein wurde auf dem anderen gelassen. Dieser Tag stellt den wichtigsten Meilenstein dieser Seite seit der Gründung vor mehr als fünf Jahren dar.

    Der lange Weg zur neuen Seite – er begann bereits 2012

    Wenn man sagt was lange währt, wird endlich gut, wird dann besonders gut, was besonders lange währt? Das könnte der Gedanke gewesen sein, wenn man sieht, wann die ersten Überlegungen angestellt worden sind. Bereits Ende September 2012 hatte ich die Leser dieser Seite darum gebeten, online an einer detaillierten Userbefragung teilzunehmen, um Feedback für ein neues Design und zu anderen Dingen zu erhalten. Es ist unter anderem das Feedback von damals, das in den Relaunch eingeflossen ist. Natürlich neben all dem weiteren Feedback, welches ich im Laufe der letzten drei Jahre erhalten habe.

    Nach mehreren Monaten kam der Punkt, an dem das Feedback ausgewertet und ein Dokument mit Prioritäten der Leser erstellt worden ist. Danach wurden über einen längeren Zeitraum mehrere sehr unterschiedliche (aber nicht detaillierte) HTML-Prototypen erstellt, um mit verschiedenen Konzepten zu experimentieren. Was dann 2014 folgte, war eine der wichtigsten Phasen, obwohl in dieser Phase nicht eine Zeile Code für die Seite geschrieben worden ist: ein kreativer Findungsprozess. Mehrere Monate lang habe ich Eindrücke auf mich wirken lassen und eine Sammelmappe mit Design-Inspirationen und Ideen für einzelne Elemente erstellt. Hierbei kam es vor allem darauf an, das Web mit offenen Augen zu betrachten und nicht nur Inhalte wahrzunehmen.

    Ende 2014 habe ich mich auf ein Farbschema festgelegt und ein Logo für den Blog erstellt, welches seit dem auch schon überall außer auf der Seite selbst verwendet wird. Im Frühjahr 2015 schließlich wurde der Relaunch der Seite zu einem Projekt höchster Priorität erklärt und deutlich mehr Zeit-Ressourcen zugeteilt.

    soeren-hentzschel.at Logo
    Abbildung: Das Logo von soeren-hentzschel.at

    Zunächst wurde ein Styleguide erstellt, welcher verbindliche Regeln zur Gestaltung definiert hat. Der nächste Schritt war dann die Skizzierung des geplanten Designs zunächst auf Papier, dann die Erstellung eines diesmal detaillierten HTML-Prototyps und die Ausprogrammierung mehrerer Ansichten sowie erste Tests und Anpassungen auf und für Smartphones. Nachdem ein zufriedenstellender Qualitätsgrad erreicht worden ist, kam schließlich die Portierung für WordPress und von da an Weiterprogrammierung direkt in WordPress sowie die Programmierung von Plugins, um benötigte Funktionalität bereitzustellen.

    Design-Spezifikation
    Abbildung: Frühe Version des Styleguides

    Seit September ist das Design online installiert und befand sich seit dem im internen Betatest. Damit begann auch die Überarbeitung des Contents. Über 1.300 Artikel wurden überarbeitet*: Neukategorisierung, Formatierungskorrekturen, Neuhochladen und Einbinden aller Bilder, Neu-Umsetzung aller Code-Beispiele und mehr. Außerdem wurden ganz neue Seiten geschrieben, beispielsweise Hintergründe über die Philosophie der Seite oder wie das Projekt unterstützt werden kann.

    *) Zum Zeitpunkt des Artikels noch in Arbeit.

    Ziele des Relauchs

    Mit der Zeit hat sich immer stärker herauskristallisiert, dass ein frischer Anstrich alleine nicht ausreichend ist. Die Liste der Anforderungen wurde immer länger, weswegen das ganze Vorhaben am Ende auch einige Zeit beansprucht hat. Die Ziele lassen sich in etwa wie folgt zusammenfassen:

    • Schwächen des alten Designs aus der Welt schaffen und Umsetzung von Nutzerfeedback.
    • Ein helles, modernes und freundlicheres Design.
    • Ein schlichtes und nicht überladenes Design, aber dennoch mit Details gespickt, welche den Leser animieren, sich mit der Seite über die Artikel hinaus zu beschäftigen.
    • Bessere Lesbarkeit der Artikel.
    • Es muss eine Idee im Design erkennbar sein, keine blinde Zusammenwürfelung von Elementen.
    • Ein weniger schwerfälliges Design, spürbare Verbesserungen der Performance.
    • Responsive Design. Eine Webseite im Jahr 2015 muss auch auf Smartphones perfekt zu benutzen sein.
    • Ebenfalls wichtig im Jahr 2015 ist eine optimierte Darstellung für Nutzer mit HiDPI-Bildschirmen.
    • Stärkere Fokussierung auf Mozilla als Thema in der Navigation der Seite.
    • Bessere Optimierung für Suchmaschinen. Ein Großteil der Besucher dieser Seite kommt über Suchmaschinen. Wie viele andere Seiten hat auch diese spürbar unter diversen Änderungen der Google-Algorithmen gelitten, was diesen Relaunch für den Blog sehr wichtig macht.
    • Bessere Optimierung für Social Media. Ähnlich wichtig wie Suchmaschinen sind Plattformen wie Twitter, Facebook und Google Plus. Das Teilen von Inhalten über diese Plattformen sollte verbessert werden.
    • Veröffentlichung von Artikeln vereinfachen. Wenn beinahe jeden Tag ein Artikel veröffentlicht wird, sollte die Hauptarbeit das Schreiben sein und nicht auch noch der Veröffentlichungsprozess viel Zeit beanspruchen. Durch die Definition eines festen Workflows können Dinge automatisiert und der Veröffentlichungsprozess entsprechend abgekürzt werden.
    • Mehr Datenschutz-Transparenz („Cookie-Hinweis“).
    • Dem Nutzer einen einfachen Einstiegspunkt geben, um das Projekt zu unterstützen und damit die Zukunft dieser Seite zu sichern.
    • Integration von Inhalten von firefoxosdevices.org.
    • Angenehmeres Verfassen von Leser-Kommentaren.
    • Besserer Bildbetrachter, welcher Bilder schneller lädt, für Smartphones geeignet ist, im Feed keine Dummy-Bilder erzeugt, es einfacher macht, an die Bild-URLs zu kommen und nicht die URL des Artikels mit dem Aufruf des Bilds manipuliert.
    • Weniger Abhängigkeit von Drittanbieter-Plugins.
    • Eine Basis schaffen, um weitere Verbesserungen in der Zukunft schneller ausliefern zu können.

    Die „Timeline“ – das Design-Konzept der neuen Seite

    Der Strahl auf der linken Seite ist ein auffallendes Element im Design und repräsentiert einen ganz elementaren Gedanken: Von Artikeln mit Design-Entwürfen als Thema über Artikel, welche Neuerungen in Vorabversionen vorstellen, bis schließlich hin zu Artikeln über neue Versionen von Firefox & Co: die Inhalte stehen in einem zeitlichen Zusammenhang zueinander. Dieser Zusammenhang endet aber nicht mit dem jeweiligen Artikel, sondern wird vom Leser durch das Beitragen von Meinungen fortgeführt. Durch den Zeitstrahl wird die Verbindung von Blog, Artikel-Inhalten sowie Leser-Kommentaren symbolisch dargestellt und damit letztlich auch unterstrichen, wie wichtig die Meinung des Lesers für diesen Blog ist. Dadurch, dass es sich um ein wiederkehrendes Element auf allen Unterseiten handelt, wird außerdem eine Konsistenz im Design und ein Erkennungsmerkmal für den Blog geschaffen.

    Timeline Design-Konzept Startseite Timeline Design-Konzept Artikel Timeline Design-Konzept Artikel
    Abbildungen: Timeline Design-Konzept

    Anpassbarkeit durch den Benutzer

    Welche Bedeutung dem Leser der Seite beigemessen wird, zeigt sich auch anderer Stelle: Brotkrumen-Navigation, geschätzte Lesezeichen oder das zufällig ausgewählte Gerät mit Firefox OS in der Sidebar nervt? Sanftes Scrollen und einen Pfeil, um zum Seitenanfang zu scrollen, braucht niemand? Einfach dem Link rechts in der Sidebar folgen und abschalten. Die genannten  Benutzer-Einstellungen sind sogar nicht einmal alle Einstellungen, die es gibt. Alle geänderten Einstellungen werden umgehend umgesetzt, ein Neuladen der Seite ist nicht notwendig.

    sh-einstellungen
    Abbildung: Anpassbarkeit durch den Benutzer

    Philosophie

    Wer sich dafür interessiert, welche Philosophie auf diesem Blog vertreten wird, kann dies nun auf einer eigenen Seite nachlesen. Ergänzend dazu gibt es hier Hintergründe über mich und mein Mozilla-Engangement.

    Weitere Highlights

    Es gibt noch so viel mehr zu erzählen. Da dieser Artikel aber bereits eine ordentliche Länge erreicht hat und ich niemanden erschlagen will, soll es an dieser Stelle erst einmal genügen. In den nächsten Tagen wird ein weiterer Artikel erscheinen, in welchem ich ausführlicher auf die zahlreichen Verbesserungen eingehen werde. Nun würde mich aber erst einmal euer Feedback interessieren. :)

    Update 01.11.2015: Im Folge-Artikel soeren-hentzschel.at 2.0 – die Highlights des neuen Blogs gibt eines detaillierten Überblick über Neuerungen, welche der Relaunch bringt.

    Der Beitrag soeren-hentzschel.at: großer Blog-Relaunch erschien zuerst auf soeren-hentzschel.at.

    Mozilla: Eine Million Dollar für Open Source-Projekte

    Unter dem Projektnamen Mozilla Open Source Support hat Mozilla einen finanziellen Zuschuss für Open Source-Projekte von insgesamt zunächst einer Million Dollar angekündigt.

    Um andere Open Source-Projekte zu unterstützen, macht Mozilla finanzielle Mittel verfügbar, zunächst von einer Million Dollar, weitere finanzielle Mittel in der Zukunft werden in Aussicht gestellt. Als Organisation, welche als Teil der Open Source-Bewegung entstanden ist, möchte Mozilla damit zum einen Open Source-Projekten etwas zurückgeben, welche von Mozilla eingesetzt werden, zum anderen möchte Mozilla damit andere Projekte unterstützen, deren finanzielle Unterstützung der gesamten Community hilft. Zunächst möchte Mozilla den ersten Teil hiervon umsetzen und bis zum 12. Dezember bis zu zehn Projekte benennen, welche eine Unterstützung von Mozilla erhalten.

    Die Mozilla-Community wird dazu eingeladen, im Laufe der nächsten Woche Feedback zum MOSS-Programm (Mozilla Open Source Support) zu geben, ehe die Rahmenbedingungen dann für die erste Finanzierungsrunde finalisiert werden. Nach derzeitiger Planung kann die finanzielle Unterstützung für ein Projekt zwischen 10.000 und 250.000 Dollar liegen.

    Weitere Informationen

    Mitchell Baker: Mozilla Launches Open Source Support Program
    Mozilla Wiki: MOSS

    Der Beitrag Mozilla: Eine Million Dollar für Open Source-Projekte erschien zuerst auf soeren-hentzschel.at.

    Firefox 44 stellt HTTP-Seiten mit Loginfeld als unsicher dar

    Ab Version 44 kennzeichnet Firefox mittels Symbol in der Adressleiste Seiten mit Loginfeld als unsicher, die über HTTP und nicht über HTTPS erreichbar sind.

    Über HTTP aufgerufene Seiten stellt Firefox in der Adressleiste üblicherweise mit einer Weltkugel dar, über HTTPS aufgerufene Webseiten mit einem Schloss, im Falle von Mixed Content gibt es ein graues Warndreieck (ab Firefox 42 ein Schloss mit einem gelben Warndreieck). Für Seiten mit einem Loginfeld ergibt sich eine Änderung ab Firefox 44, sofern diese über eine unverschlüsselte HTTP-Verbindung aufgerufen werden: dann nämlich zeigt Firefox anstelle einer Weltkugel ein Schloss, welches mit einer roten Linie durchgestrichen ist. Per Klick darauf weist Firefox darauf hin, dass die auf dieser Seite eingegebenen Logindaten nicht sicher sind.

    Firefox 44 Loginfeld auf HTTP-Seite

    Der Beitrag Firefox 44 stellt HTTP-Seiten mit Loginfeld als unsicher dar erschien zuerst auf soeren-hentzschel.at.

    Let’s Encrypt: Zertifikate werden nun von allen Major-Browsern akzeptiert

    Let’s Encrypt ist eine von unter anderem Mozilla, der Electronic Frontier Foundation (EFF), Cisco, Akamai und IdenTrust gegründete Certificate Authority (CA). Die von Let’s Encrypt ausgestellten Zertifikate werden nun von allen wichtigen Browsern akzeptiert.

    Im September hat Let’s Encrypt sein erstes Zertifikat ausgestellt. Nun wurde der nächste wichtige Meilenstein erreicht: wie geplant ist die Cross-Signierung von IdenTrust in Kraft getreten, womit von Let’s Encrypt ausgestellte Zertifikate von jedem wichtigen Browser akzeptiert werden, ohne dass zunächst von Hand ein Root-Zertifikat im Browser installiert werden muss.

    Der Beitrag Let’s Encrypt: Zertifikate werden nun von allen Major-Browsern akzeptiert erschien zuerst auf soeren-hentzschel.at.

    Firefox 44 erlaubt Webseiten-Aufruf trotz schwacher Verschlüsselung

    Wenn es um die Sicherheit bei HTTPS-Verbindungen geht, dann gilt Firefox als besonders streng und verweigert unter Umständen sogar den Aufruf komplett. Mit Firefox 44 führt Mozilla die Möglichkeit ein, die Webseite in einem solchen Fall trotzdem zu besuchen.

    Wer eine Webseite über HTTPS aufruft, deren Verschlüsselung als unsicher gilt, hat als Firefox-Nutzer ein Problem: Während zum Beispiel Chrome die Webseite einfach darstellt, zeigt Firefox nur eine Fehlermeldung. Der Nutzer hat in dem Fall auch nicht wie bei anderen Zertifikatsproblemen die Möglichkeit, eine Ausnahme hinzuzufügen, Firefox verweigert den Zugriff komplett.

    SSL Verschlüsselungsfehler

    Während es aus Sicherheitsgründen sinnvoll ist, den Zugriff bei schwacher Verschlüsselung zu verweigern, und Firefox in einem solchen Fall auch weiterhin ausdrücklich warnen und die Verbindung zunächst verweigern wird, gibt Mozilla dem Nutzer ab Firefox 44 zumindest die Möglichkeit, die Webseite dennoch aufzurufen.

    SSL Verschlüsselungsfehler

    Der Beitrag Firefox 44 erlaubt Webseiten-Aufruf trotz schwacher Verschlüsselung erschien zuerst auf soeren-hentzschel.at.

    Seiten

    Camp Firefox RSS abonnieren