Alle Beiträge von Michael Wowro

WordPress

Tendenziell gescheitert: Bootstrap-Slider manuell in WordPress einbauen

Inzwischen nutze ich das WordPress Plugin Slider Revolution.

JSSOR sah für mich erstmal vielversprechend aus. Dort kann man einen Slider online konfigurieren und hosten. Ich habe ihn ausprobiert und bin beim Importieren eines Bildes leider schon gegen einen Fehler gelaufen. Außerdem handhabt sich der Konfigurator doch ziemlich umständlich.

Zuerstmal muss man die Bilder selbst für den Slider vorbereiten. Erstmal alle auf die gleiche Höhe zuschneiden (weil sonst der Slider von Bild zu Bild in der Höhe springt und das nicht gut aussieht) – die minimale Breite für meine WordPress-Seite sollte 750px – sonst füllt das Bild den Slider-Rahmen nicht aus. Das geht am schnellsten mit Paint. Und dann noch mal die Bilder für’s Web komprimieren.

Diese Anleitung beschreibt also den Weg mit bootstrap carousel. Mit w3schools kann man den Code gleich online editieren, sieht die Änderungen sofort im Fenster rechts. Da das Editieren dort so komfortabel ist, macht man so lange, bis der Slider aussieht wie gewünscht. Die Bilder lädt man dazu in die WordPress-Mediathek und trägt die entsprechenden URLs dann in den HTML-Code ein.

Damit Bootstrap auf Deiner WordPress-Instanz laufen kann, musst Du es einmalig in der functions.php (Sidebar -> Design -> Editor) einbinden, und zwar ganz am Ende der Datei:


wp_register_style( 'bootstrap_css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
wp_enqueue_style('bootstrap_css');
wp_register_script( 'jQuery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js', null, null, true );
wp_enqueue_script('jQuery');
wp_register_script( 'bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', null, null, true );
wp_enqueue_script('bootstrap');

Zu guter letzt copy den kompletten äußersten div-Block vom w3schools-Editor und paste ihn an die gewünschte Stelle Deines WordPress-Post (natürlich im Text-Modus).

CSS-Gefummel

Irgendwie scheint das unvermeidlich – dieses CSS-Gefummel, obwohl doch eigentlich in der Theorie schon alles passen sollte. Bei WordPress muss man den äußersten div noch von container in container-fluid umwandeln, damit er sich in sein umgebendes div einfügt. Auch hat WordPress die dumme Angewohnheit aus Linebreaks im Text-Editor ein br zu machen und aus zwei Linebreaks ein p. Dies führt natürlich zu unerwarteten Layout-Ergebnissen und zu noch mehr CSS-Gefummel. Abstellen kann man die sog. wpautop-Funktion für jede Seite/Post separat mit dem Plugin: toggle-wpautop. Dann noch bei jedem einfügen:
style="display: block; margin: 0 auto;"
damit die Bilder auch schön zentriert sind.

Ergebnis

Das manuelle Integrieren von Bootstrap in WordPress war irgendwie ein Gefummel. Die einzelnen Sliderelemente waren am Ende ungleich hoch, sodass beim sliden der Rahmen gesprungen ist. Bei der mobilen Version hat ein zusätzlich eingefügtes Zitat das komplette Bild verdeckt – an sich hätte ich erwartet, dass bei der mobilen Version aus Platzgründen der Text automatisch nicht angezeigt wird. Beim letzten WordPress oder template-update war meine Einbindung von bootstraß in meine WordPress-Instanz verschwunden, ohne dass ich es tagelang gemerkt habe. Alles in allem kein sauberes Ergebnis.

Ohne Schublade

htmltidy.net

Leider gibt’s aktuell einen Bug in diesem Tool, der eine sinnvolle Benutzung des indents unmöglich macht. Ein solcher Code, wenn zwei mal eingerückt erzeugt aus heiterem Himmel ein neues unpassendes Leerzeichen zwischen dem letzten Buchstaben des Linktextes und einem darauffolgenden Punkt:

<p><a href=“http://www.it-freelancer-magazin.de/index.php/it-freelancer-des-jahres/“>IT Freelancer des Jahres</a>. Mit 2017 kamen viele neue tollen Features hinzu.</p>

Daher meine Empfehlung weiterhin Tidy2 in notepad++ zu verwenden.

Um Deinen HTML Sourcecode online aufzuräumen, bietet sich http://htmltidy.net/ an. Einfach Deinen schmutzigen HTML-Code ins rechte Fenster copy&pasten.
Ganz nützlich ist die Anzeige der Anzahl der Zeichen:

Nachdem man nun Komprimieren geklickt hat, sollte sich diese sichtbar reduzieren:

Um Dir einen Überblick zu verschaffen, erstmal ein oder mehrmals ‚Indent text‘ klicken:
.

Wenn irgendwo die schließenden Tags fehlen, wird das in rot signalisiert. Wenn Du Änderungen am Code durchführst, werden diese simultan im linken Fenster sichtbar. Zusätzlich kann man den dort befindlichen WYSIWYG-Editor nutzen. Dort kann man beispielsweise mit View -> Show Blocks die div’s optisch anzeigen.

Mit der Tidy-Toolbox hat man ein Bündel weiterer HTML-Optimierungen an der Hand:

Z.B. Inline styles: Wer HTML-Code von einer fremden Seite in die eigene einbetten will, findet dort oft inline-styles drinnen, die die Optik der alten Seite repräsentieren. So könnten z.B. per inline style bestimmte Links pink dargestellt werden, wobei Du eigentlich diese ganz normal in blau haben möchtest.

Testautomatisierung

Organize-Tab in Microsoft Test Manager


Im Testing Center von Microsoft Test Manager findet sich der Tab ‚Organize‘ unter dem sich vier Sub-Tabs finden.
Obwohl man sich laut den Breadcrumps in einem bestimmten Testplan befindet, werden in den vier Sub-Tabs per default alle Entitäten (Test Pläne, Test Konfigurationen, Testfälle, Shared Steps) innerhalb des TFS Team Projekts angezeigt, was einigermaßen verwirrend ist.
Grundsätzlich kann man sagen, dass die Spaltenbenutzung nicht ganz so intuitiv ist, wie man es sich wünschen würde:

  • Zu den sichtbaren Spalten kann man mit einem `Geheimtrick` noch weitere hinzufügen. Rechtsklick auf die Spaltenüberschriften-Leiste und zahlreiche zusätzliche Spalten können zum Anzeigen ausgewählt werden.
  • Auch kann man die Spalten aufsteigend/absteigend sortieren, indem man ein bzw. zwei Mal auf die entsprechende Spaltenüberschrift klickt.
  • Einige Spalten kann man noch filtern. Wenn man mit der Maus über die rechte Ecke fliegt, erscheint aus dem Nichts ein Pfeil. Bleibt er grau, kann man nicht nach den Spaltenwerten filtern – wird er schwarz, kann man es.

Was noch sinnvoll gewesen wäre, wenn man die Tabs schon ‚Manager‘ nennt, wäre noch ein Zähler aller aufgeführten Entitäten in den einzelnen Sub-Tabs.
 
Test Plan Manager
In diesem Tab finden sich alle Testpläne eines TFS Teamprojekts aufgelistet. Eine Besonderheit stellt noch der Button ‚Edit run settings‘ dar, wohinter man die Datensammlung beim Testen erweitern kann – nähere Erläuterungen: hier.
 
Test Configuration Manager
Was es mit den Testkonfigurationen auf sich hat, kann man am besten an konkreten Beispielen verdeutlichen. Eine Konfigurationsvariable für einen Test ist beispielsweise das Betriebssystem – die einzelnen Werte der Konfigurationsvariable können also beispielsweise Windows, Linux oder MacOS sein. Eine weitere Konfigurationsvariable für das Testen von Webanwendungen ist beispielsweise der Browser. Diese Konfigurationsvariable kann die Werte Firefox, Chrome, Internet Explorer, Safari oder Opera annehmen. Eine Konfiguration ist eine mögliche Kombination aus den Werten der Konfigurationsvariablen, z.B. (Windows, Firefox). Legt der Testmanager also diese Konfiguration für den kommenden Testdurchlauf fest, dann teste ich den Testplan gegen die Anwendung auf Firefox auf einem Windows-Rechner. Genau das kann man im Sub-Tab Test Configuration Manager einstellen.
 
Test Case Manager
Bei einer Testsuite mit sehr vielen Testfällen friert MTM erstmal für ein paar Sekunden ein, bevor man weiterarbeiten kann. Man kann die Auswahl der Testfälle nun einschränken, indem man sich der üblichen Spaltenfilter oder eines erweiterten Filters bedient; letzteres indem man auf ‚Unfiltered‘ klickt. Jetzt kommt die nächste kleine Verwirrung, denn obwohl das Dropdown-Menü ‚Unfiltered‘ angezeigt hat, erscheint ein Filter, den man nun editieren kann. Z.B. kann man diesen default-Filter nun weiter einschränken, indem man noch eine weitere Teilbedingung hinzufügt, z.B. zur Ausgabe ausschließlich automatisierter Testfälle:

Mittels Run-Query kann die vorläufige Auswahl ermittelt werden und mittels ‚Save query‘ wird die Auswahl schließlich gespeichert. Ob diese nette Funktion ausreicht, um den Tab mit dem Begriff ‚Manager‘ zu adeln sei einmal dahingestellt.
 
Shared Steps Manager
Shared Steps sind zusammengefasste Testschritte, die in einem Testfall wiederverwendet werden können (das gern genommene Standardbeispiel ist ja der Login). Der Sub-Tab Shared Step Manager funktioniert analog zu dem Sub-Tab Test Case Manager. Zusätzlich gibt’s noch den Button “Create action recording“ – hier steht, was es damit auf sich hat. Warum es einen solchen im Shared Steps Manager gibt, nicht jedoch einen analogen im Test Case Manager bleibt wohl für immer das Geheimnis der Erbauer dieses Tools.