Angular & Onsen.io

Nahezu drei Tage brachte ich es einfach nicht hin, dass meine Angular Applikation mit onsen.io macht, was sie sollte. ng-repeat waren im DOM-Baum auskommentiert, ng-click reagierten nicht.
Nun endlich ist mir das Problem aufgefallen und bewusst geworden. Die ng-controller dürfen nicht auf einem angewendet werden, sondern dürfen frühestens bei der als Attribut gesetzt werden. Ich hoffe ich kann mit dieser Beobachtung anderen solch schweres Kopfzerbrechen verhindern.

spaceMaster – mein erstes Game für iOs & Android

Das Spiel, das von mir ursprünglich als Projekt im EF Informatik entwickelt wurde, ist jetzt für Android und iOs verfügbar.

Im Spiel geht es darum, dass Sie mit Ihrer Rakete durch das All fliegen und die Goldmünzen einsammeln, die Sie auf Ihrem Weg finden. Doch Vorsicht: Das All ist voll mit gefährlichen Meteoriten und feindlichen Ufos, die Ihre Münzen klauen und Sie vernichten wollen! Weichen Sie ihnen aus, um den Highscore zu knacken.

Das Spiel ist sehr einfach aufgebaut und erinnert, hauptsächlich aufgrund der Schwierigkeitsstufe, ein wenig an Flappy Bird. Auch wenn hohe Highscores auf den ersten paar Versuchen unmöglich scheinen, ist das Spiel für die eine oder andere Gelegenheit sehr zu empfehlen! Ausgetauscht werden die Highscores auf iOs mit dem GameCenter und auf Android mit Swarm.

Leider ist das Anbieten von Apps im iTunes Store nicht kostenlos, so dass ich das Spiel auch nicht gratis anbieten kann. Der Preis von CHF 1.- ist jedoch vergleichsweise sehr tief, so dass diese Kosten Sie hoffentlich nicht daran hindern, die App herunterzuladen.

Wie viele Punkte haben Sie erreicht? Schreiben Sie die Antwort in die Kommentare!

Weitere Infos zum Spiel: http://bernhard-webstudio.ch/spacemaster

Cortana vs. Siri #2: Desktop

Seit Siri das erste Mal vorgestellt wurde, sind schon einige Jahre ins Land gezogen. Mit ihnen kamen viele Gerüchte – wird Siri auch auf OS X verfügbar sein? Und nach all diesen Jahren ist die ernüchternde Antwort noch immer: “vermutlich eines Tages, aber bisher ist noch nichts definitiv!”
Bei Cortana sieht das anders aus. Schon eine der ersten Technical Preview von Windows 10 kam mit Cortana ausgeliefert. Der Funktionsumfang entspricht dem von Windows Phone, logischerweise, da Microsoft ja für alle Geräte das selbe OS ausliefern möchte. Und wer Cortana sowohl auf dem Smartphone wie auch auf dem Desktoprechner mit dem selben Microsoft-Konto nutzt, dem werden die Daten über die Cloud selbstverständlich von einem Gerät zum anderen synchronisiert.
Ob das jetzt von Vorteil ist, wenn die gleiche Sprachsteuerung vom Handy auch auf dem Desktopcomputer verfügbar ist, sei dahingestellt. Es ist aber ein Punkt mehr, der an Cortana geht. Doch das Spiel ist noch nicht aus.

Geistesblitz: gesamter localStorage auslesen

Für eine HTML5 Applikation hatte ich die Idee, einige Elemente im localStorage anstatt zu löschen bloss umzubenennen. Da dies mehrfach geschiehen würde, musste die Umbenennung eindeutig erfolgen, damit die anderen Elemente nicht überschrieben werden. Und was eignet sich für die eindeutige Identifikation besser als die aktuelle Uhrzeit mit Datum, Millisekunden und allem?

Nun gut; die Idee mag zwar gut klingen, aber wie kriegt man das Element eines Tages wieder aus dem Speicher raus? Wie kann ich ein Element mit nahezu zufälligem Schlüssel aufrufen?

Ja, lieber Leser, genau diese Frage habe ich mir gestellt. Bestimmt haben Sie schon nach dem Titel gedacht “Pah, das weiss ich…”. Und damit haben Sie natürlich Recht, doch da nach einer kurzen Internetrecherche meinerseits keine Lösungen auffindbar waren, möchte ich hier zwei vorstellen.

Die eine Lösung ist wohl die elegantere: jedes mal wenn man ein neues “Zufallselement” in den Storage schreibt, den entsprechenden Schlüssel in ein Array schreiben, das ebenfalls in den localStorage geschrieben wird.

Die andere Lösung ist jene, die zum Titel “Geistesblitz” geführt hat. Obwohl die Idee sehr naheliegend ist und ich früher hätte auf die Idee kommen sollen, ist sie mir halt eben als Geistesblitz gekommen. Der entscheidende Gedanke ist dieser: localStorage ist ein Objekt wie jedes andere. Also kann man es mit einer einfachen for-Schlaufe durchlaufen. Das geht zum Beispiel so, wenn alle Elemente untereinander aufgelistet werden sollen:

function listItems () {
	var string = "";
	for (var key in localStorage) {
		string += key + ": " + localStorage.getItem(key);
		string += "<br />";
	}
	document.getElementById("target").innerHTML = string;
}

JavaScript: Windows Phone Hardware Backbutton abfangen

Bei der Programmierung einer Windows Phone Applikation mit JavaScript kann der “zurück”-Button unten links am Smartphone natürlich auch abgefangen werden, um eine alternative Tätigkeit als zum Beispiel das Beenden der Applikation herbeizuführen. Im folgenden möchte ich die Vorgehensweise erklären.

In der entscheidenden HTML-Seite muss ein WinJS Application Control Element mit den Parameter onbackclick : meineFunktion erstellt werden, wobei meineFunktion der Funktion entspricht, die aufgerufen wird, wenn der Backbutton angeklickt wird. Dies sollte ungefähr folgendermassen aussehen:

<div data-win-control="WinJS.Application." data-win-options="{onbackclick : meineFunktion}" />

Anschliessed kann der EventHandler “backclick” verwendet werden. Zum Beispiel so:

document.addEventListener("backclick", meineFunktion);

Um jedoch das Standardverhalten, das Beenden der Applikation, zu unterdrücken, muss true zurückgegeben werden. Eine empfehlenswerte Verwendung ist folgende, in der Datei default.js:

<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><code class="language-javascript">app.onbackclick = function (evt) {
   meineFunktion();
   return true;
}

CSS: Windows Phone Akzentfarbe

Mit Windows (Phone) 8 gab Microsoft den Entwicklern die Möglichkeit, ihre Apps für Windows & Windows Phone mit HTML, CSS und JavaScript zu entwickeln. So ist es besonders für Webentwickler wie mich verlockend, die Web App auf jene Geräte zu portieren.

Gerade Windows Phone brilliert mit einer grossen Personalisierbarkeit; neben der Flexibilität des Sperrbildschirms, dem Hintergrundbild das den Startbildschirm vervollständigt ist auch die Akzentfarbe ein oft genanntes Argument, weshalb Windows Phone besser personalisierbar ist.

Doch wie ist es nun möglich, wenn man die App mit HTML und CSS entwickelt, auf die Akzentfarbe zuzugreifen? Die Antwort ist simpel, wenn man sie einmal gefunden hat: über die Farbe mit dem Namen Highlight. Die passende Textfarbe kann man, sehr naheliegend, mit HighlightText anwenden.

JavaScript – die schlechten Seiten

Haben Sie mal versucht, in JavaScript 1 + 2 mit 3 zu vergleichen? Oder undefined einen Wert zuzuordnen?
Versuchen Sie es jetzt. Sind die Ergebnisse befriedigend?

JavaScript ist eine sehr kontroverse Programmiersprache. Sie bietet zwar Ansätze einer Objektorientierten Programmiersprache, ist schlussendlich aber bloss prototypenbasiert.

Das Problem von JavaScript sind wohl die vielen Köche, die den Brei verderben, um es metaphorisch auszudrücken.

Im folgenden möchte ich nicht JavaScript bashen oder so – Ihre Meinung dürfen Sie sich selber bilden. Ich möchte Ihnen jedoch einige weitere Beispiele von meiner Meinung nach abnormalen Möglichkeiten nennen.

  • Zählen Sie “4” und 4 zusammen.
  • Ziehen Sie 4 von “4” ab.
  • Vergleichen Sie parseInt(“06”) mit parseInt(“09”)
  • Kontrollieren Sie 0 == “”, false == “0”, und Varationen

Ich wünsche Ihnen viel Spass damit – wenn Ihnen weitere Beispiele einfallen, die Ihrer Meinung nach Wert sind, in diese Liste aufgenommen zu werden, so schreiben Sie sie in die Kommentare!

Update:
Weitere unterhaltende Beispiele finden sich auch in folgenden Video: https://www.youtube.com/watch?v=2pL28CcEijU (wobei ich nicht jedes WTF als solches bezeichnen würde)

cortanas emotionen

Cortana vs. Siri #1: Emotionen

Auch wenn Microsofts Sprachassistent noch immer in der Beta-phase ist, hat Cortana bereits jetzt viele Features, die bei der älteren Schwester Siri von Apple nicht zu finden sind.

Das Feature, mit dem ich heute mit diesem Artikel beginnen möchte, sind die Emotionen. Siri könnte man als violett leuchtendes Mikrofon bezeichnen. Sie beantwortet die Fragen unter Umständen tatsächlich mit einem emotionalen Inhalt (fragen Sie Siri mal, ob sie Sie heiraten möge); eine optische oder akustische Veränderung tritt jedoch nicht auf. Das Mikrofon bleibt violett und Siri spricht noch immer so monoton wie anhin.

Bei Cortana ist das anders. Gerüchte sprechen von 6 verschiedenen Tonlagen für ihre Stimme: rücksichtsvoll, einfühlsam, erfüllt (aufgeregt), beschämt (peinlich), nachdenklich, und entschuldigend. Bei der optischen Rückmeldung sind es bereits jetzt 18: ruhig, opimistisch 1 & 2, erinnern, “tile flip”, empfindlich V1 & V2, beschämt, Alarm, springend, mehr verlangend, zurückhaltend, erfüllt, nachdenklich, Musik erkennend, zuhörend, sprechend und denkend. Vergleichen Sie dazu obiges animiertes gif, um die verschiedenen Zustände zu sehen.

Was halten Sie von diesen Emotionen? Sind sie bloss eine kleine Spielerei oder wird derartiges Cortana zum Durchbruch verhelfen? Schreiben Sie Ihre Meinung in die Kommentare!

Formatierter Source Code in Indesign und Co. einbinden

Sei es eine Bachelor-, Doktor- oder bloss eine kleine Schularbeit im Bereich Informatik: ohne Code kommt sie kaum aus. Doch wie kann man den Code, so schön wie er in Eclipse und Co. formatiert wird, ohne LaTeX-Kenntnisse in Word oder InDesign einbinden?

Einen Screenshot aufzuzeichnen ist die eine Möglichkeit. Dies geht entweder mit den Tastaturkürzeln cmd + shift + 3 bzw. cmd + shift + 4 auf dem Mac oder auf dem Windows-PC mit folgender Anleitung: http://windows.microsoft.com/de-CH/windows-xp/help/setup/take-a-screen-shot

Doch für längeren Code, der den Bildschirm sprengt, lohnt sich diese Herangehensweise nicht. Doch zum Glück gibt es noch mindestens eine andere Lösung: Exportieren Sie den Code mit file -> print -> adobe pdf bzw. datei -> drucken -> adobe pdf aus eclipse oder ähnlich zu einem pdf, das sie problemlos einbinden können. Falls die Auswahl Adobe pdf als Drucker nicht verfügbar ist, können Sie die freeware CutePDF Writer herunterladen und im Druckdialog auswählen. Doch Vorsicht wenn Sie dieses Programm wählen, dass Sie nicht aus Versehen die ask-toolbar installieren.
Je nach Druckdialog ist es auch gar nicht nötig, Adobe PDF als Drucker auszuwählen, und der Druckdialog bietet eine eigene Möglichkeit, den Code als PDF zu exportieren (vgl. folgender Screenshot).
Druckdialog TextWrangler

Element mit CSS in der Mitte positionieren

Um ein Element in der Mitte eines anderen Elements mit CSS zu positionieren muss man unter Umständen etwas improvisieren.

Für die horizontale Mitte ist es keine Schwierigkeiten. Folgendermassen mache ich es jeweils:

.container {
  display: block;
  text-align: center;
  width: 100%;
}

.child {
  position: relative;
  margin: auto;
}

Um aber die vertikale Mitte zu erreichen, ist es leider ein wenig schwieriger und vor allem kontextabhängig.

Wenn das Layout aus Tabellen besteht, so reicht vertical-align : middle;. Leider funktioniert dies nicht mit anderen Elementen wie zum Beispiel einem p in einem div.
Diese könnte man per CSS mit

.container {display: table;}

.child {
    display: table-cell;
    vertical-align: middle;
}

zu einer Tabelle machen.

Wenn bloss eine einzelne Zeile Text zentriert werden soll, so kann man dies mit line-height: Irgendwieviele px; erreichen.

Für block Elemente, die man nicht zu einer Tabelle machen möchte, gibt es noch die Möglichkeit von negativem margin und absoluter positionierung. Das sähe zum Beispiel folgendermassen aus:

.container {
  position: relative;
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
}

Diese Lösungen funktionieren in den meisten Browsern, jedoch leider nicht mit allen HTML Tags. Es gibt ausserdem noch weitere Lösungen, mit denen ich jedoch noch keine Erfahrungen gemacht habe. Was haben Sie für Erfahrungen gemacht? Welche Lösung bevorzugen Sie? Schreiben Sie Ihre Antwort in die Kommentare oder senden Sie sie mir per e-Mail.

Website in PowerPoint einbinden

Wenn Sie eine Microsoft PowerPoint Präsentation vorzeigen, so haben Sie bestimmt auch schon die Vorteile der Referenztools genossen. Ob die Notizen, der Laserpointer oder die Stoppuhr – auch ich bevorzuge diese Ansicht zum präsentieren. PowerPoint wechselt dabei, wenn man den Computer an einen Beamer angeschlossen hat, von “Die Anzeige duplizieren” auf “Die Anzeige erweitern”, so dass der Beamer als zweite Anzeige, eben für die Präsentation, dient.

Durch diesen automatischen Wechsel kann man anschliessend nicht einfach so ein anderes Programm wie z. B. einen Browser öffnen und es auf dem Beamer anzeigen. Das verschwert bedauerlicherweise das anzeigen von Websites während einer Präsentation. Es gibt zum Glück einige Lösungen.

Lösung #1

Screenshots: lassen Sie durch ein Programm wie z. B. Softmatic Weblayers einen Screenshot einer Website machen und binden Sie diesen wie ein anderes Bild in die Präsentation ein.

Lösung #2

Wenn sie Ihre Website über https aufrufen können, so können Sie unter Einfügen -> Apps -> Store nach “Web Viewer” suchen und installieren. Das Einfügen funktioniert ganz intuitiv wie mit jedem anderen Element auch.

Lösung #3

Aktivieren Sie unter den Optionen -> Menüband anpassen die Entwicklertools. Nach dem Speichern der Einstellungen öffnen Sie diesen neuen Bereich und klicken dort auf Weitere Steuerelemente. Wählen Sie das Element Microsoft Web Browser und platzieren Sie es Ihren Bedürfnissen entsprechend. Doppelklicken Sie auf das Element, um den Code Editor aufzurufen. Ersetzen Sie den Code durch folgende Zeilen:
Private Sub WebBrowser1_DocumentComplete(ByVal pDisp As Object, URL As Variant)
If URL = "" Then WebBrowser1.Navigate "http://www.genieblog.ch/"
End Sub

http://www.genieblog.ch/ müssen Sie durch die von Ihnen gewählte URL ersetzen. Damit sollte Ihr Frame funktionieren.
Hinweis: Wenn folgende Fehlermeldung kommt: “Dieses ActiveX-Steuerelement kann nicht eingefügt werden”, konsultieren Sie folgende Support-Seite: http://support.microsoft.com/kb/2793374/de

Cubietruck

Cubietruck mit Lubuntu: Tastaturlayout anpassen

Nach dem Aufsetzen von Lubuntu auf dem Cubietruck fällt auf, dass man nie nach dem Tastaturlayout gefragt wurde. Da es mühsam ist, immer die passenden Tasten zu suchen, ist es naheliegend, dass man das Tastaturlayout wechseln möchte. Nur wie?

Der Cubie sollte mit dem internet verbunden sein für die nächsten Schritte.
Starten Sie zunächst das Terminal / die Konsole.

Suchen Sie nach möglichen Sprach-Paketen mit folgenden Befehlen:
$ apt-cache search xfonts-intl
$ apt-cache search language-pack

Wenn Sie ein Paket sehen, das Sie installieren möchten, können Sie es mit $ sudo apt-get install xfonts-intl-european
$ sudo apt-get install language-pack-de language-pack-gnome-de
installieren, wobei de durch die von Ihnen verwendete Sprache ersetzt werden muss (z. B. en für Englisch).

Nach der Installation der Sprachpakete können Sie das Tastaturlayout auf zwei verschiedene Arten anpassen.

Anpassen des Tastaturlayouts für die momentane Session

Wenn Sie das Tastaturlayout nur für die Momentane Session ändern möchten, verwenden Sie $ setxkbmap -layout ch wobei ch der Ländercode ist. Ersetzen Sie ihn z. B. durch de für Deutschland.

Anpassen des Standardtastaturlayouts

Um das Standardtastaturlayout zu ändern, verwenden Sie folgende Befehle:
$ sudo nano /etc/default/keyboard
um die Datei /etc/default/keyboard zu bearbeiten. Ändern Sie hier XKBLAYOUT="us" zu z. B. XKBLAYOUT="ch" wobei ch wiederum der Ländercode ist.
Nun müssen Sie bloss noch mit sudo reboot Ihren Cubietruck neu starten und schon verwenden Sie das gewünschte Tastaturlayout.