WordPress – Wie blendet man ein Menü auf Mobile Devices aus?

WorpressIn einem früheren Beitrag habe ich gezeigt, wie man das Menü im Twenty Seventeen Theme optisch etwas verbessert.
Aber man ist ja nie zufrieden. Ich finde es chic, wenn auf Smartphones beim Scrollen das Menü verschwindet und Platz für den Content macht, um dann bei einem Wisch nach oben wieder zu erscheinen. Also wollte ich das auch haben und so geht es:


1. Mit Javascript die Scrollrichtung feststellen

Als Erstes müssen wir feststellen, in welche Richtung die Seite gescrollt wird. Findet der Seitenlauf nach oben statt, soll das Menü ausgeblendet werden. Und wieder eingeblendet, wenn die Seite wieder nach unten gezogen wird. Das folgende Javascript Snippet erzeugt eine CSS-Klasse und bindet diese an den body-Tag. Diese Klasse kann dann in CSS-Regeln als Diskriminator genutzt werden.

jQuery(document).ready(function( $ ) {
  var lastScrollTop = 0;
 
  $(window).scroll(function(event) {
    var st = $(this).scrollTop();
 
    if (st > lastScrollTop) {
      if (!$(‚body‘).hasClass(‚down‘)) {
        $(‚body‘).addClass(‚down‘);
      }
    } else {
      $(‚body‘).removeClass(‚down‘);
    }
 
    lastScrollTop = st;
 
    if ($(this).scrollTop() <= 0) {       $('body').removeClass('down');
    };
  });
});

 

2. Mit CSS-Regeln das Menü beim Scrollen ein- und ausblenden

Im CSS des Twenty Seventeen Themes liegt bei 30em der Breakpoint für Tablets. Die erste Regel lässt das Menü weich ein- und ausblenden und die zweite lässt es bei einem Seitenlauf nach unten verschwinden.

/* Menü ausblenden auf kleinen Devices… */
@media screen and (min-width: 20em) and (max-width: 29.99em) {
  .navigation-top {
    transition: transform .25s .1s ease-in-out;
  }
 
  .down .navigation-top {
    transform: translate3d(0, -80px, 0);
  }
}

 
Das ist es schon gewesen. Wie fast immer, ist die Menge an Code überschaubar. Allerdings dauert es eine Zeit, bis man die Zusammenhänge erkennt und die Lösung für eine Aufgabe offensichtlich wird.

Interstellar Spaceships – Prinzipien des Designs


Raumschiffe gibt es in der Science Fiction in allen Formen und Größen. Gerade in letzter Zeit nehmen im zunehmenden Gigantismus Hollywoods die Mutterschiffe manchmal die Ausmaße ganzer Planeten an und auch die Landefähren sind groß wie Städte. Im Design schlägt sich also vor allem die kreative Fantasie des Autors oder der Filmemacher nieder. Auch die Formen sind äußerst fantasievoll – von monsterhaft stachelig bis aerodynamisch stromlinienförmig ist alles dabei.
Wenn man Google bemüht und nach Raumschiff Größenvergleich sucht, findet man sehr schnell akribisch ausgearbeitete Plakate, auf denen alle bisher bekannten Schiffe maßstabsgerecht gegenübergestellt werden.

Empfehlenswert ist auch das sehr bekannte Video des spanischen Studios MBS. Es zeigt die Größenverhältnisse einiger Raumschiff-Designs anschaulich im direkten Größenvergleich.


Aber welche Formen und Größen erfüllen denn nun abseits der Science Fiction am besten die Anforderungen eines interstellaren und bemannten Raumflugs? Das ist gar nicht so leicht zu beantworten, denn die Menschheit hat offensichtlich noch wenig praktische Erfahrung auf diesem Gebiet und Besucher von außerhalb unseres Sonnensystems, mit denen man das Thema mal intensiv diskutieren könnte, sind jetzt gerade auch nicht bei der Hand. In indischen Sanskrit-Texten, insb. im Mahabharata wird zwar von Städten am Firmament und Kriegen, die zwischen den Göttern am Himmel tobten, berichtet, jedoch sind diese Berichte eher der Mythologie zuzuordnen. Und die vielen mutmaßlichen Sichtungen der sogenannten fliegenden Untertassen helfen auch nicht wirklich weiter.

Allerdings kann man einige theoretische Überlegungen anstellen, die schnell ein paar grundlegende Designprinzipien nahe legen bzw. ausschließen.

  • Im Weltraum spielt jedwede aerodynamische Form keine Rolle. Stromlinienförmige Strukturen und Tragflächen bieten also keine Vorteile. Im Gegenteil, diese Elemente stellen vor allen Dingen Materialverschwendung dar.
    Dies ist anders bei Landefähren und Explorationsfahrzeugen, hier haben aerodynamische Körper klare Vorteile, denn die meisten Planeten, auf dem sich eine Landung lohnt, sollten auch eine Atmosphäre besitzen.
  • Wenn wir einmal davon ausgehen, dass ein effizienter Materialeinsatz wertvoll ist, dann ist die Kugel die optimale Form, denn sie bietet das beste Verhältnis aus Oberfläche und umbauten Raum. Bevor jetzt jemand vor Langeweile aufstöhnt, kann ich beruhigen. Auch die Kugel ist nicht optimal, aber aus anderen Gründen. Dazu gleich mehr.
  • Obwohl im Weltraum Schwerelosigkeit herrscht, spielt die Masse eines Schiffs eine große Rolle. Wenn wir einmal Wurmlöcher, Warp-Antriebe und andere hochgradig spekulative Technologien außen vor lassen, dann muss ein Raumschiff konventionell beschleunigt werden. Die dazu notwendige Energie steigt exponentiell mit der Masse des Schiffs an. Und das Raumschiff muss den Energieträger mitschleppen, was die Masse noch weiter erhöht. Da dieser Effekt – wie gerade gesagt – exponentiell wirkt, gibt es eine praktikable Grenzmasse. Größe ist also ein Problem.
  • Ebenfalls relevant ist die Stirnfläche eines Raumschiffs, denn auf der langen Reise zwischen den Sternen besteht eine nicht geringe Wahrscheinlichkeit für Kollisionen mit kleinsten Asteroiden und Staubteilchen. Deswegen hat auch die Kugel Nachteile, denn die Stirnfläche einer Kugel ist sehr groß. Schutzschildtechnologien wie im Film Passengers könnten zwar eine Lösung für dieses Problem bieten, allerdings benötigt ein solches Schutzschild ebenfalls immense Energiemengen, womit wir wieder bei dem Masse-Paradoxon wären.

Wenn man all diese Überlegungen zusammennimmt, dann eignen sich für interstellare Reisen zylinderförmige, langgezogene Raumschiffe mit einer abgerundeten oder angeschrägten Spitze am besten. Die Größe wird zwischen 100 Metern und einem Kilometer liegen, wenn man noch in endlicher Zeit beschleunigen und abbremsen will. Interessanterweise durchquert zurzeit ein solches Objekt unser Sonnensystem.
A/2017 U1 is most likely of interstellar origin.
Das Omuamua getaufte, ungefähr 400 Meter lange, zigarrenförmige Objekt trat mit ca. 28 km/sec aus dem Sternbild Leier kommend in unser Sonnensystem ein und verlässt es derzeit nach einem SwingBy-Manöver an unserer Sonne wieder. Auch wenn die meisten Astronomen von einem normalen, wenn auch ungewöhnlich geformten Asteroiden ausgehen, hat die Form und die Flugbahn doch einige Wissenschaftler aufgeschreckt und das Objekt soll jetzt belauscht werden.


Sozusagen als Bonus habe ich gerade noch einen wunderbar skurrilen Artikel aus dem NASA Archiv von 1996 für Euch gefunden. Besonders das groß geschriebene Requirement BE COST EFFECTIVE ist beachtenswert.

WordPress – Responsive Header Video

Responsive DesignDas WordPress Twenty Seventeen Theme unterstützt von Haus aus die Einbindung von Videos in den Header. Ich nutze dies ja schon länger und präsentiere die schönsten Bilder des Hubble Space Teleskops. Was mich allerdings immer gestört hat, war die Tatsache, dass sich der Header zwar responsive der Fenster- bzw. Bildschirmgröße anpasst, die Größe des Videos aber nicht in allen Fällen folgt. Das liegt daran, dass der Videoplayer als iFrame eingebunden wird und das Seitenverhältnis des Videos beibehält. Schwarze Streifen an den Seiten oder am oberen und unteren Rand sind die Folge.

Aber natürlich gibt es hierfür Lösungen. Es gibt einige Plugins aus der Kategorie Slider, die diesen Punkt adressieren und auch optisch ansprechende Lösungen implementieren. Allerdings ist der Footprint dieser Plugins teilweise immens und da ich auf die Geschwindigkeit der Webseite zu meinem Buch großen Wert lege – und daher auch eine sehr schlankes Theme nutze – ist der Einsatz eines Slider-Plugins auf der Startseite für mich keine Option. Zum Glück bietet sowohl CSS als auch Javascript genug Möglichkeiten direkt einzugreifen und den eingebetteten iFrame in die kaskadierte Größenanpassung einzubinden.

Schauen wir uns zwei mögliche Lösungsansätze einmal etwas genauer an.


Browser Detection mit Javascript

Leider wird die weiter unten vorgestellte CSS-basierte Lösung nicht von allen Browsern unterstützt. Daher müssen wir erst einmal feststellen, in welchem Browser die Webseite aktuell gerendert wird, um die CSS-Regeln browserspezifisch zu gestalten – ja, sollte man eigentlich nicht machen.
Anyway, die Detektion des Browsers geht am besten mit einem kurzen Javascript-Snippet. Sodann wird der detektierte Browser als Klasse an das Root-Element – also den html-Tag – gebunden und kann damit in CSS-Selektoren als Diskriminator genutzt werden.

function isChrome() {
  var isChromium = window.chrome,
      winNav = window.navigator,
      vendorName = winNav.vendor,
      ua = winNav.userAgent;
      isIOSChrome = ua.match(„CriOS“);

  return (isIOSChrome || (ua.indexOf(‚Chrome‘) > -1) ||
          (isChromium !== null &&
           typeof isChromium !== „undefined“ &&
           vendorName === „Google Inc.“));
}

function detectBrowser() {
  var ua = window.navigator.userAgent;
  var is_explorer10 = ua.indexOf(‚MSIE‘) > -1;
  var is_explorer11 = ua.indexOf(‚Trident/‘) > -1;
  var is_edge = ua.indexOf(‚Edge/‘) > -1;
  var is_firefox = ua.indexOf(‚Firefox‘) > -1;
  var is_safari = ua.indexOf(„Safari“) > -1;
  var is_opera = ua.toLowerCase().indexOf(„opr“) > -1;
  var is_chrome = isChrome();

  if (is_chrome && is_safari) { is_safari = false; }
  if (is_chrome && (is_opera || is_edge)) { is_chrome = false; }

  var root = document.getElementsByTagName( ‚html‘ )[0];

  root.className +=
    (is_explorer10) ? ‚ browserIExplorer iexplorer10‘ :
    (is_explorer11) ? ‚ browserIExplorer iexplorer11‘ :
    (is_edge) ? ‚ browserEdge edge‘ :
    (is_chrome) ? ‚ browserChrome chrome‘ :
    (is_firefox) ? ‚ browserFireFox firefox‘ :
    (is_safari) ? ‚ browserSafari safari‘ :
    (is_opera) ? ‚ browserOpera opera‘ : “;
}

detectBrowser();

 
Dieses Skript muss unbedingt in den Head eingebunden werden, damit die generierten CSS-Klassen auch beim Rendern zur Verfügung stehen.

Alternative 1: Kopplung des iFrame-Containers mittels CSS

Nun definieren wir die CSS-Regeln, die den iFrame-Container an des Resizing des übergeordneten div-Elements koppeln. Dies geschieht natürlich nur für die unterstützten Browser.

Hinweis: Im vorliegenden Beispiel wird das Verhalten nur für den Desktop-Breakpoint implementiert. Das ist aber willkürlich und von Theme zu Theme verschieden. Für Mobile Devices sollte man grundsätzlich auf Videos verzichten, sonst ist das Bandbreitenguthaben schnell verbraucht.

@media screen and (min-width: 48em) {
  .chrome #wp-custom-header,
  .firefox #wp-custom-header,
  .safari #wp-custom-header,
  .opera #wp-custom-header {
    position: relative;
    padding-bottom: 56.25%; /* Video size ratio 16:9 */
    padding-top: 10px;
    height: 0;
  }

  .chrome #wp-custom-header iframe,
  .firefox #wp-custom-header iframe,
  .safari #wp-custom-header iframe,
  .opera #wp-custom-header iframe {
    position: absolute;
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;
  }
}

 
Mit der letzten Regel implementiere ich einen armseligen Ersatz für die im CSS fehlende cover -Positionierung von eingebetteten Elementen. Diese äußerst praktische Form der Positionierung eingebetteter Elemente wird imho leider nur für Bilder unterstützt.

Alternative 2: Resizing des iFrame-Containers mittels Javascript

Alternativ zur CSS-Lösung kann auch eine Javascript Funktion genutzt werden. Dies hat allerdings den Nachteil, dass bei Größenänderung des Browser-Fensters je nach Rechnerleistung störende Effekte wie Flackern auftreten können.

jQuery(document).ready(function( $ ) {
  var vContainer = $(„#wp-custom-header-video“);

  if (typeof vContainer == „object“) {
    $(window).resize(function() {
      var vRatio = 9.0 / 16.0; // Video size ratio 16:9;
      var vHeight = $(window).height();
      var vWidth = $(window).width();

      if (vRatio > (vHeight / vWidth)) {
        vContainer.width(vWidth);
        vContainer.height(vWidth * vRatio);
      } else {
        vContainer.height(vHeight);
        vContainer.width(vHeight / vRatio);
      }
    });
  }
});

 


Erfolgreich getestet habe ich die CSS-Variante auf aktuellen Versionen von Chrome, FireFox, Safari und Opera. Leider funktionieren diese Lösungen nicht auf Microsoft Browsern. Wenn jemand einen Tipp für mich hat, wie ich auch IE 10-11 und Edge unterstützen kann, bedanke ich mich mit einem E-Book.

Es gibt noch einige weitere Tipps rund um WordPress in diesem Blog. Bei Interesse findet Ihr die hier.

Rezensionen – der Lohn des Autors

Seien wir doch mal ehrlich, wir werden alle gerne gestreichelt und gelobt. Natürlich soll sich die eigene Arbeit auch im Portemonnaie niederschlagen, aber noch viel wertvoller und motivierender ist die Anerkennung für das Ergebnis der vielen Mühen und Entbehrungen, die der Künstler auf dem Weg zum fertigen Werk auf sich nimmt. Und in Zeiten sozialer Netzwerke, virtueller Gruppen und Foren fällt dieses Lob ebenso virtuell in Form eines Likes oder des allgegenwärtigen Sternchens einer Produktbewertung aus.
Ganz in diesem Sinne habe ich – unbescheiden wie ich nun mal bin – für Euch eine Kompilation der besten Aussagen aus den bisherigen Rezensionen zu Der Kristall zusammengestellt. Sozusagen ein Best Of Eurer Bewertungen…


„Deswegen lese ich es schon zum zweiten Mal. Wieder fasziniert mich die Darstellung der unterschiedlichen Charaktere, die Schauplätze und die Thematik an sich.“
Silke – 2. August 2017

„Die Mischung und Beziehungen der sich im Laufe des Buches zusammenfügenden Stories aus Vorzeiten (12.000 Jahren) und den aktuellen Geschehnissen macht den besonderen Reiz des Buches aus.“
Jens Droit – 2. August 2017

„Da den zahlreichen, originellen Ideen des Autors stets ein hervorragend recherchierter, wissenschaftlich fundierter Kern zugrunde liegt, macht das Buch darüber hinaus Lust, sich weiter mit der Materie zu beschäftigen.“
Frank Kastenholz – 3. September 2017

„Allerdings hat mich die spannende Erzählung über mehrere Ebenen und mit zahlreichen, parallel laufenden Handlungsträngen in Verbindung mit fundierten, wissenschaftlichen Fakten derart in ihren Bann gezogen, dass ich regelrecht traurig war, als ich nach über 800 Seiten das Buch nach seinem Ende beiseite legen musste.“
Lothar Meiers – 16. August 2017

„Ein fesselndes Buch, welches nicht nur einen hohen Unterhaltungswert bietet, sondern, sofern man so will, auch zum Nachdenken anregt.“
Nicco – 7. August 2017

„Jeder der unterschiedlichen Handlungsstränge ist so interessant, dass man am Ende jedes Kapitels bedauert, die Szene für eine Weile verlassen zu müssen. … Der Kristall ist ein wirklich gelungenes Romandebut, bei dem ich von Anfang bis Ende mitgefiebert und oft auch herzlich gelacht habe.“
Julia Deike – 14. Oktober 2017

„Diejenigen Leser, bei denen Qualität vor Quantität kommt, werden ihre wahre Freude an der spannenden Geschichte und ebenso spannenden Erzählweise haben.“
Stefan Blasius – 3. Dezember 2017

„Ich habe selten ein so inhaltsreiches und vielseitiges Buch gelesen. Es erwartet den Leser bis zum Ende hinter fast jeder Ecke eine Überraschung. So bleibt die Spannung auf Höchstniveau.“
Jens Becker – 7. Dezember 2017

„Dieses Werk gehört in jede anständige SciFi-Sammlung. Absolute Lese-Empfehlung!“
Marcus Dietze – 8. Dezember 2017

„Dieses Buch ist zugleich Thriller, Sci-Fi-Roman und eine Verknüpfung verschiedenster Theorien der „Randwissenschaften“. Ob der Osiris-Mythos, Geheimgesellschaften oder Raumschiffe, ob Astrophysik, Waffentechnologie oder Atlantis: Es ist für jeden etwas dabei!!!!“
Marco Rost – 17. Dezember 2017


Bewertungen

So, das soll an dieser Stelle erst mal genügen. Die vollständigen Bewertungen findet Ihr hier. Abschließend möchte ich noch all meinen Lesern herzlich für ihr Interesse an meinem Buch und die wirklich netten Worte in ihren Bewertungen danken. Ich hoffe, es werden noch viele, viele mehr…

Prolog

MeteoriteneinschlagIch habe länger überlegt, ob ich den Prolog der Geschichte hier veröffentlichen soll, denn zusammen mit einigen anderen Beiträgen hier ist das schon ein ganz schöner Spoiler. Aber der Prolog ist für Euch vielleicht eine noch größere Entscheidungshilfe als der Klappentext, wird hier doch bereits das Monster enthüllt, dass die ganze Geschichte antreibt.

Bitte beachten: Im Prolog ist der Sprachstil im Vergleich zum Rest des Buches absichtlich etwas tragender gewählt, um den historischen Charakter zu unterstreichen.
Prolog

 


Prolog

Zum Ende des Pleistozäns vor nun fast zwölftausend Jahren er­wärmte sich das Klima und die lange Eiszeit endete. Die mächtigen Gletscher, die sich über die letzten hunderttausend Jahre immer tiefer in die gemäßigten Breiten der Erde geschoben hatten, begannen zu schmelzen und die Meeresspiegel stiegen wieder an. Riesige Eisstauseen, die die Land­schaft Westsibiriens und Nord­amerikas beherrschten, wurden durch die ab­schmel­zenden Eis­mas­sen bis zum Überlaufen gefüllt und die ansteigenden Tempe­raturen ließen die Eismauern immer dünner und brüchi­ger werden. Eine globale Katastrophe bereitete sich vor.

Zu dieser Zeit näherte sich aus der Tiefe des Raums mit vier­hundert Kilometern pro Sekunde unaufhaltsam ein Unheil der Erde auf seiner elliptischen Bahn um die Sonne. Das Objekt, trotz seiner zerstörerischen Kraft nicht größer als eine Orange, riss ein feuriges Loch in die dünne Atmosphäre der Erde, bevor es im Norden des heutigen Kasachstan auf den vereisten Boden traf. Es durch­schlug die Erde wie eine Gewehrkugel ein Blatt Papier und trat nach knapp einer halben Minute ungebremst in Nordamerika in der Nähe des heutigen Toronto wieder aus. Die verheerenden Schock­wellen dieser globalen Katastrophe durch­eilten die Erdkruste und erreichten eine Stärke von zwölf und mehr auf der heutigen Richter­skala.

Die Eisbarrieren, die die aufgestauten Seen umgaben, brachen und über Jahrtausende angesammelte Wasser­mas­sen bahnten sich ihren alles vernichtenden Weg. Der nordameri­kanische Eissee ergoss sich in den Atlantik und mehrere hundert Meter hohe Flutwellen trafen auf die Küsten Europas, Afrikas und Südamerikas. Der riesige Glet­schersee, der sich über tausende von Kilometern im west­sibirischen Tiefland erstreckt hatte, brandete über den Aralsee, überflutete das Kaspische und das Schwarze Meer, bis sich die Wassermassen schließlich unauf­haltsam ins Mittelmeer ergossen.

Die große Zivilisation, die zu dieser Zeit den fruchtbaren Norden des afrikanischen Kontinents besiedelte, fand in den sich gegenseitig verstärkenden Flut­wellen, die aus dem Atlantik und aus dem Schwar­zen Meer in das Mittel­meer hereinbrachen, ein jähes, wenn auch weder uner­wartetes noch unvorbereitetes Ende.


Die Kakerlake
Nach dem Prolog beginnt die eigentliche Geschichte und im ersten Kapitel begegnet Ihr René und Lucas. Die beiden jungen Forscher der Universität Berkeley besuchen in ihren Wintersemesterferien die große Pyramide in Gizeh, um dort mit einem Mikroroboter nach versteckten Geheimnissen zu suchen.