HTML – norbat.de

20. November 201618. Dezember 2016

Bilderrätsel für den Webbrowser

Das Bilderrätsel kannst du spielen indem du auf das Bild klickst oder als zip-Datei herunterladen und für nicht kommerzielle Zwecke auf deiner Website mit deinen eigenen Bilder veröffentlichen.

Demo auf YouTube

In diesem YouTube-Video kannst du dir das Spiel mit zwei Durchläufen ansehen.

Ändern der Bilder

filestructure-img Zum Ändern der Bilder speicherst du deine Bilder mit einer Auflösung von 200 x 200 px. Die sechs Bilder benennst du mit den Dateinamen in csn01.png bis csn06.png um und kopierst du sie in den Unterordner img. Die alten Bilder kannst du entweder vorher löschen oder beim kopieren einfach überschreiben.
Wenn du die Rückseite der Karten ändern möchtest, ersetzt du einfach im Verzeichnis img die Datei bg_fotomemo.png durch eine Datei deiner Wahl mit der Auflösung 200 x 200 px.

Anpassen der Farben

filestructure Wenn du die Farben deines Spiels verändern möchtest benötigst du nur wenige CSS-Kenntnisse. Öffne hierzu die Datei style.css aus den Wurzelverzeichnis und nehme die Änderungen deiner Wahl vor.

Du kannst zum Beispiel den Spielhintergrund im body-Tag über das Attribut background ändern.

body{
 background:#080808;
 font-family: 'Quicksand', sans-serif;
 }

Hier wird die Hintergrundfarbe in einen Rot-Ton geändert.

body{
 background:#850404;
 font-family: 'Quicksand', sans-serif;
 }

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!

12. November 20123. Oktober 2013

Impressionist

Hier findest du demnächst eine Einführung in das JavaScript Präsentationsframework impress.js. Das Framework wurde in der c’t Ausgabe 22/2012 kurz vorgestellt.

Das Framework nutzt die Möglichkeiten von Transformationen und Transitionen moderner Browser mit CSS3.

Du kannst dir den Quellcode bei github herunterladen.

Erste Gehversuche kannst du dir hier ansehen.

Startposition der Präsentation bestimmen

Und hier kannst du dir durch einen Klick auf die Grafik einen ganz bestimmten Schritt der Präsentation ansehen (…htm#/overview).

Automatisch laufende Präsentation

Ziemlich bald nach dem Studieren des Code-Beispiels hat mich interessiert, wie ich die Präsentation automatisch abspielen kann. Dazu findest du hier ein weiteres Beispiel. Im eingebetteten Script ist lediglich folgender Quelltext zu ergänzen.

Die Methode setInterval ruft hier die Funktion next() in einem festgelegten Zeitintervall von 5000 Millisekunden = 5 Sekunden auf.

setInterval ('impress().next()', 5000);