norbat.de – Seite 7 – rock your blog

14. Mai 201529. September 2015

WP MobileWebAppViewer Plugin

Aufbau und Funktionsweise des Plugins

Funktion des WP-MobileWebAppViewer Plugins (SVG 7 kByte)

Mit dem Plugin lassen sich mobile Webapplikationen auf Seiten oder in Beiträge deines WordPress Blogs mittels Shortcode einfügen. Den Shortcode habe ich mit mehreren Attributen versehen. Wenn du überhaupt keine Attribute in den Shortcode [[webappviewer]] eingibst, wird nur ein Beispiel mit einem meiner kleinen WebAppSpiele angezeigt. Daher solltest du mindestens das Attribut src=“deineurl.xyz“ verwenden um deine gewünschte Seite in den Viewer zu laden.

Prezi Präsentation zum Plugin

Downloadmöglichkeiten

Download lokal Download GitHub

Beispiel mit src-Attribut

Jeder Shortcode wird mit dem Namen des Shortcodes webappviewer in eckigen Klammern aufgerufen.

[[webappviewer src="http://m.mesch.de"]]

Beispiel mit outerstyle- und innerstyle-Attributen

Mit den outer- und innerstyle-Attributen kannst du über CSS verschiedene Layouts laden bzw. eigene Layouts erstellen. Bisher habe ich vier Styles erstellt. Das Flat Style ist das Standard-Layout und wird verwendet, wenn du kein outerstyle- und innerstyle-Attribut in deinem Shortcode verwendest.

Flat Style: outerstyle=“deviceholderflat“, innerstyle=“devicedisplayflat“ (Standard)
iPhone 6 Style: outerstyle=“deviceholderip6″, innerstyle=“devicedisplayip6″
iPhone 5 Style: outerstyle=“deviceholderip5″, innerstyle=“devicedisplayip5″
Samsung S6 Style: outerstyle=“deviceholders6″, innerstyle=“devicedisplays6″

[[webappviewer outerstyle="deviceholderip6" innerstyle="devicedisplayip6" src="http://m.mesch.de"]]

Beispiel mit width- und height-Attributen

Mit Hilfe der width- und height-Attribute kannst du die Breite und Höhe des iframe-Elements im Displaybereich (DIV-Element mit der Class innerstyle) angeben. Die Standardwerte sind: width=“375px“ und height=“667px“.

[[webappviewer width="320px" height="568px" outerstyle="deviceholderip5" innerstyle="devicedisplayip5" src="http://m.mesch.de"]]

Beispiel im iPhone 5 Mockup

[[webappviewer width="320" height="568" src="https://norbat.de/m3/" outerstyle="deviceholderip5" innerstyle="devicedisplayip5"]]

Beispiel im Samsung S6 Mockup

[[webappviewer width="380px" height="670px" outerstyle="deviceholders6" innerstyle="devicedisplays6" src="http://kamerunschaf.de"]]

Beispiel im iPhone 6 Mockup

[[webappviewer width="375px" height="667px" outerstyle="deviceholderip6" innerstyle="devicedisplayip6" src="http://getbootstrap.com"]]

13. Mai 201527. Juli 2015

Anzeige mobiler WebApps in WordPress

In diesem Beitrag zeige ich dir, wie du eine mobile WebApp in WordPress mittels DIV-Container und iFrame-Element darstellen kannst.

Grafik für das Mobilgerät

Du benötigst lediglich eine PNG-Grafik deines Smartphones oder Tablets mit transparentem Displaybereich. Ich habe hier mal ein Flat Mobile Mockup mit Illustrator erstellt. Der transparente Displaybereich ist 375px breit und 667px hoch.

Hier kannst du das Flat Mobile Mockup herunterladen.

Illustrator Datei

Kopieren der PNG-Datei und anpassen der style.css

Bevor du die style.css anpasst solltest du die PNG-Datei (hier bei mir FMM.png) auf deinen Webserver laden. Ich habe dazu in meinem eigenen Theme einen eigenen Ordner mit dem Namen img angelegt. Du kannst aber auch bei den Standard Themes (z.B. Twenty Thirteen) den images Ordner verwenden.

Die style.css deines Themes ergänzt du jetzt um folgende Klassen:

.mobileviewer{
 display: block;
 background: url("./img/FMM.png") no-repeat left top;
 width: 428px; /*Breite deiner PNG-Datei*/
 height: 854px; /*Höhe deiner PNG-Datei*/
 margin-bottom: 50px;
 padding-top: 21px;
}

.mobiledisplay{
 display: block;
 background: #FFFFFF;
 width: 375px;
 height: 667px;
 margin-top: 100px;
}

Einfügen der HTML-Elemente in den Beitrag

Im Textmodus deiner Seite oder deines Beitrages gibst du nun folgenden HTML-Code ein:

<center>
<div class="mobileviewer">
  <div class="mobiledisplay">
    <iframe style="width: 375px; height: 667px; border: none;" src="https://deine.url"></iframe>
  </div>
</div>
</center>

Speichere deine Seite oder deinen Beitrag und schaue ihn dir auf deiner Seite an. Ein Ergebnis siehst du hier oder mit einem fotorealistischen iPhone 6 von Dave Stadler auf Dribbble hier:

Falls die WebApp nicht angezeigt wird, kann das an den Sicherheitseinstellungen deines Browsers liegen. In Google Chrome kannst du am rechten Ende der Adresszeile die Inhalte laden.

Ich freue mich über deinen Kommentar!

1. Mai 201527. Juli 2015

My Book Studio – Western Digital

Die externe Festplatte My Book Studio (4TB) von WD® kommt im schicken, wärmeableitenden Aluminiumgehäuse daher und macht sich somit neben einem Mac optisch ganz gut. Beim Netzteil hat sich der Hersteller allerdings weniger am an Apple orientiert und spendiert der Festplatte „nur“ ein hässliches schwarzes Standardnetzteil.

Dateiformat

Western Digital bewirbt die Festplatte als Mac-kompatibel. Sie ist mit dem HFS+ Journaled System formatiert (Mac OS X 10.5 und höher) und lässt sich bei Bedarf auch für Windows neu formatieren, aber in diesem Fall könnte man beim Kauf besser gleich ein anderes Modell des Herstellers wählen.

Schnittstellen

Das My Book Studio ist mit USB 3.0 und USB 2.0 Schnittstelle ausgestattet und lieferte in meinen ersten Tests am USB 3.0 Anschluss des iMac gute Durchsatzraten. Ein VMWare Image mit gut 57 GB Dateigröße hat etwas weniger als 7 Minuten bei Kopiervorgang von der internen SSD auf die externe Festplatte benötigt.

Backup mit Apple® Time Machine®

Die Einrichtung der My Book Studio Festplatte als Backup Medium stellt kein Problem dar. Die Kompatibilität wird durch WD® gewährleistet. Ein erstes Backup von gut 400 GB hat 6 Stunden in Anspruch genommen, das kennt man eventuell schon von anderen Speichermedien. Für die Verschlüsselung des Backups hat Time Machine® ganze 30 Stunden benötigt.

Tipp zu VMWare Backups

Wenn du auch mit VMWare® auf deinem Mac arbeitest, empfehle ich dir, die virtuellen Maschinen aus dem Backup mit Time Machine® auszuschließen. Ein bloßes Öffnen der virtuellen Maschine setzt bereits das Flag, die gesamte virtuelle Maschine beim nächsten Time Machine® Backup mit einzuschließen. Bei größeren virtuellen Maschinen kann das schnell zu langen Backup Zeiten führen.

Über die Schaltfläche Optionen… in Time Machine kannst du Ordner oder ganze Laufwerke vom Backup ausschließen.

Fazit

Bei bisheriger Eindruck des My Book Studio ist gut. Mir gefällt das Design des Gehäuses und die Performance. Die lange Zeit zur Verschlüsselung des Time Machine Backups wird nicht durch die Festplatte verursacht. Der Datendurchsatz beim Lesen und Schreiben von Daten auf das Medium über USB 3.0 ist zufriedenstellend. Ein Backup vom MacBook Pro über USB 2.0 steht noch aus. Hier wäre auch einer meiner Kritikpunkte. Ich hätte mir gerne das My Book Thunderbolt Duo zugelegt. Leider hat diese Variante mit Thunderbolt Schnittstelle nur diese Schnittstelle und keine weitere(n) USB Schnittstelle(n). Damit sind alle Geräte ohne diese Schnittstelle von der Benutzung praktisch ausgeschlossen.

Weitere Informationen

Unter den folgenden Links findest du weitere Informationen zum My Book Studio von WD®:

Herstellerseite mit weiteren Informationen

Produkt mit Kundenrezensionen bei Amazon

30. April 201527. Juli 2015

TinyMCE Editor anpassen – Standard Schaltflächen entfernen

In diesem Beispiel zeige ich dir, wie du deinem WordPress Theme Standard Schaltflächen des TinyMCE Editors entfernen kannst.

Eine Liste aller Standard Schaltflächen findest du hier TinyMCE – Buttons/controls

Wenn du ein eigenes Theme oder ein Child-Theme eines Standard WordPress Themes verwendest, hast du in deinem Theme Ordner die Datei functions.php. Ist diese Datei in deinem eigenen Theme noch nicht vorhanden, legst du sie einfach in deinem Theme Ordner, in dem sich auch die styles.css befindet, an.

Entfernen der Standard Schaltfläche Unterstreichen

1: function nme_hide_tinymce_button($buttons)
2: {
3: $remove = array('underline');
4: return array_diff($buttons,$remove);
5: }
6: add_filter('mce_buttons_2','nme_hide_tinymce_button');

Um mehrere Schaltflächen zu entfernen kannst du einfach das Array $remove in Zeile 3 ergänzen.

3: $remove = array('underline','forecolor','pastetext');

Diese Zeile würde zusätzlich zu Unterstreichen noch die Standard Schaltfläche Textfarbe und Als Text einfügen entfernen.

30. April 201527. Juli 2015

TinyMCE Editor anpassen – Standard Schaltflächen hinzufügen

In diesem Beispiel zeige ich dir, wie du deinem WordPress Theme Standard Schaltflächen des TinyMCE Editors hinzufügen kannst.

Eine Liste aller Standard Schaltflächen findest du hier TinyMCE – Buttons/controls

Standard Schaltflächen Hochgestellt u. Tiefgestellt hinzufügen

0:  <?php
1: 
2:  function nme_mce_buttons_2($buttons) { 
3:  /* ausgeblendete Standardschaltflächen einblenden */
4:  $buttons[] = 'superscript';
5:  $buttons[] = 'subscript';
6: 
7:  return $buttons;
8:  }
9:  add_filter('mce_buttons_2', 'nme_mce_buttons_2');
10:
11: ?>

In Zeile 2 beginnt die Funktion mit dem Namen nme_mce_buttons_2, die etwas später in Zeile 9 mit einem Hook des Typs Filter in deine WordPress Installation implementiert wird. mce_buttons_2 ist einer von vier möglichen Filter Hooks für den TinyMCE Editor (siehe WordPress Codex ).

Dem Array $buttons[] wird in Zeile 4 und 5 jeweils eine Standard Schaltfläche hinzugefügt.

In Zeile 7 wird der Rückgabewert der Funktion definiert, hier das Array $buttons.

Möchtest du zum Beispiel die Standard Schaltfläche für die Hintergrundfarbe deinem Editor hinzufügen, kannst du in Zeile 6 einfach folgende Zuweisung an das Array ergänzen:

6: $buttons[] = 'backcolor';

Ergebnis:

27. März 201515. Mai 2015

LaTeX in WordPress

Vielleicht hat dich auch schon mal die Frage beschäftigt, wie du vernünftig mathematische Formeln und Funktionen in deinem WordPress Blog anzeigen kannst. Die Antwort könnte das Plugin WP LaTeX sein.

Du musst lediglich deinen LaTeX Code zwischen die Shorcodes $ latex ... $ setzen:

Beispiel: Der folgende Code erzeugt die abgebildete Formel. $ latex \left(\frac{x^2}{y^3}\right)&s=3$

$\left(\frac{x^2}{y^3}\right)$

oder für den Kreisumfang $ latex \displaystyle U=2\cdot r\cdot\pi$

$U=2\cdot r\cdot\pi$

Achtung! Bitte entferne in deinem Code das Leerzeichen zwischen dem $-Zeichen und dem Wort latex.

Eine Hilfestellung beim Erstellen der Formeln ist z.B. der Daum Equation Editor. Weitere Infos findest du in dem du auf das Symbol klickst (iTunes), oder im Chrome Web Store.

8. März 201527. Juli 2015

Digitaltechnik – Quiz

Digitaltechnik ist die Grundlage moderner Informationsverarbeitung. Mit dem DigiQuiz im Memory Stil kannst du dir einfache Verknüpfungsschaltungen (UND, ODER, NAND, NOR, XOR und XNOR) auf spielerische Art erarbeiten oder dein bestehendes Wissen überprüfen.

Memory – Digitaltechnik

DigiMemoryQuiz — Ein Memoryspiel mit Verknüpfungsschaltungen