Category Archives: /create

So richtest du deine Entwicklungsumgebung für die Entwicklung mit Cordova ein.

Im ersten Artikel wurde der Rechner komplett für die Entwicklung einer hybriden Android App eingerichtet. Im zweiten Teil wurde die App mit Crosswalk und Cordova aufgesetzt und ein Emulator (AVD) zum Test der App eingerichtet. Nachdem du dort die Lauffähigkeit überprüft hast, können wir uns jetzt der Entwicklungsumegebung zuwenden. Continue reading

So erstellst du eine hybride App mit Cordova + Crosswalk.

Im ersten Teil der Serie haben wir unseren Rechner für die Erstellung von hybriden MobileApps vorbereitet; alles installiert und heruntergeladen was nötig ist um eine Android App mit Webtechnologie zu erstellen.

Jetzt geht es an die Erstellung der App. Wir setzen die Cordova App mit Crosswalk auf, richten ein erstes Testdevice ein und schauen mal, wie unsere App so flimmert. Continue reading

Was benötige ich für die Entwicklung einer hybriden App?

Der Plan

Ich möchte mal wieder ein neues Projekt umsetzen. Da dachte ich mir, ich nutze die Gelegenheit und fange noch einmal ganz frisch an. So schreibe ich wirklich jeden Schritt mit und du solltest am Ende definitiv auf dem gleichen Stand sein wie ich. Alles natürlich mit Screenshots unterlegt.

Es wird eine App; zunächst kümmere ich mich um Android, ggf. folgt später noch die Auslieferung auf iOS Smartphones und vielleicht sogar Windows Phones. Eine Ausweitung auf Tablets als Endgeräte wäre auch denkbar. Dank der hybriden Entwicklung der App dürfte vor allem die Auslieferung auf iOS keine großen Extra-Aufwände in der Entwicklung bedeuten.

Die ersten Überlegungen: Welches Framework?

Für die Entwicklung von hybriden Apps mit Webtechnologie greift man am Besten auf eines der vielen Frameworks zurück. Initial stellte sich mir also die Frage ob ich PhoneGap, Cordova, Intel XDK, Titanium oder eine der vielen anderen Möglichkeiten nehmen soll. Ich habe mich sehr schnell auf PhoneGap oder Cordova eingeschränkt, weil ich diese als (Industrie-)Standard erachte. Die Entscheidung zwischen diesen beiden Kandidaten war zunächst darauf beschränkt, die Unterschiede heraus zu finden. Continue reading

Tutorial: Ghost Blog Installation

Ghost-Logo

Die Blogging-Plattform Ghost kann mal eine sehr gute Alternative für Blogger zu WordPress werden. WordPress ist mittlerweile viel mehr als nur für das Bloggen gedacht, dass kann aber auch Nachteile haben. Kompromisse müssen eingegangen werden, es schwirren für viele Nutzer unnötige Funktionen rum, das System wird langsamer und vielleicht noch der ein oder andere Punkt mehr.

Ghost will wirklich nur für das Bloggen gedacht sein, setzt auf node.js und hat sich über Kickstarter finanziert – ist aber kostenfrei erhältlich.

Continue reading

(HTML5 Canvas-)Bilder hochauflösend (Retina) darstellen

Vor guten zehn Monaten ist der letzte Artikel in der Kategorie “Leicht und klar erklärt” erschienen und so gab mir heute (mal wieder) ein Thema in der Firma eine perfekte Vorlage für einen Artikel.

Wie stelle ich HTML5 Canvas Grafiken auf einem iPad mit Retina-Display scharf dar? Folgende Erklärung gilt aber nicht nur für das Canvas-Element, auf Bilder/Fotos trifft dies ebenso zu. Fast alle Tablets haben mittlerweile hochauflösende Displays (High DPI – HiDPI) und so wird es immer wichtiger, dass du das folgende beachtest – zumindest wenn du deinen Besuchern Qualität bieten möchtest. Die vernünftige Darstellung von Bildern auf allen Geräten kann man als Teildisziplin von Responsive Webdesign bezeichnen. Auf zur Theorie:
Continue reading

Alle hassen deine Mobile-Website!?

Samsung GS2 by Alvin Pingol - CC BY-SA 3.0 - 2011

Samsung GS2 by Alvin PingolCC BY-SA 3.0 – 2011

Ich hasse es wirklich. Ich bin in der Bahn, will www.supertolleseite.de aufrufen, habe schlechten Empfang. Er lädt und lädt, meine Hoffnung steigt, endlich die Seite zu sehen, auf einmal; zack Redirect auf m.supertolleseite.de und das Laden beginnt von vorne. So ein MIST!

Und jetzt rate mal was? Nicht nur den Benny in der Bahn nervt das, auch Google findet das gar nicht mal so geil. Du verteilst die ganze schöne SEO Power von Google auf deine Subdomains. Richtig schlimm wird’s, wenn noch eine Subdomain für Tablets existiert, etwa t.supertolleseite.de. Mit “Pech” ist in der mobil-optimierten Version nicht jeder Content verfügbar. Was passiert also, wenn ich über einen Link direkt an einen fehlenden Content angesurft komme? Hoffentlich ein Redirect auf die Desktop-Seite und keine mobil-optimierte 404. Letzteres straft Google ab.

*** Update: 24.11.2013
Die Qualität deiner Website auf mobilen Endgeräten hat, wie beschrieben, immer stärkeren Einfluss auf das Ranking in Google. Ein detaillierter Artikel (englisch) gibt es in Google’s Webmaster Central Blog unter der Überschrift: Changes in rankings of smartphone search results.

OK, jetzt bin ich also auf m.supertolleseite.de/304862/tollerContentZumSharen und will den Link twittern (oder anderweitig sharen). Wie oft hab’ ich’s erlebt, dass ich so einem Link dann auf dem Desktop geklickt habe und anschließend mit dem Desktop-Browser in der mobilen Version rumgeirrt bin. Selbst Facebook macht diesen Fehler.

Und um all das zu versauen, gibst du auch noch extra Kohle aus. Den gleichen Content zweimal darzustellen, kostet dich nur Zeit und Nerven. Lass es sein.

Wenn du dich also fragst: Sollte ich meine Website für mobile Endgeräte optimieren? Dann lautet die Antwort: “Ja, unbedingt, aber bitte richtig.” Responsive Design, keine Redirects und alle werden happy sein.

Disable Tap-Highlighting in Safari / iOS / Android / WebKit

Beim entwickeln von WebApps und hybrid Apps benötigt man viele kleine Workarounds um das native Feeling so gut wie möglich zu simulieren. Links werden im mobilen Safari / WebKit bei einem Tap mit typischen, leicht durchsichtigen, “Apple”-Blau gehighlightet.

-webkit-tap-highlight-color: rgba(0,0,0,0);

Neben dem Entfernen gibt es natürlich auch die Möglichkeit per rgba dieses Highlighting in CI-Farben darzustellen. Dabei sollte darauf geachtet werden, dass der letzte Wert nicht 1 ist, dann ist das Highlighting nicht mehr durchsichtig und würde das getapte Element verdecken.

HTTP Digest Authentication & verschlüsselte (md5) Ablage des Passworts in der DB

Bei einer kürzlich geschriebenen WebApp benutzte ich die HTTP Digest Auth für die Authentifizierung der User. Das einzige Problem hierbei ist, dass das Passwort des Nutzers im Klartext vorhanden sein muss. Ich wollte das Passwort aber nicht als Klartext in der Datenbank haben (obvious). Die kleine aber feine Lösung:

Den ersten Part der Digest-Checksum (A1), siehe Wikipedia, in der Datenbank ablegen. Dieser ist der md5-Hash des kombinierten Strings aus UserID, Realm (beliebiger Name) und Passwort: A1 = md5(uid:realm:pass)

Semikolon Wars

Semikolon

Dank der Automatic Semicolon Insertion (ASI) muss man in JavaScript nicht jede Angabe mit einem Semikolon beenden. In fast allen Fällen wird bei einem Zeilenumbruch automatisch durch den JavaScript-Interpreter ein Semikolon eingefügt.

Aus dieser Tatsache ergbit sich ein Streit darum, ob man JavaScript nun mit oder ohne Nutzung der ASI programmieren soll. Sprich: Dürfen wir faul sein; trägt es der Lesbarkeit zu, wenn wir JavaScript-Statements ohne Semikolon, nur mit einem Zeilenumbruch, beenden. Ob es mit einer Diskussion auf Github gestartet ist oder es nur der erste richtige öffentliche Streit war, weiss ich nicht, aber der Entwickler “fat” verhilt sich nicht sonderlich klug (aus meiner Sicht). Er ist einer der Entwickler von Bootstrap und bei Twitter angestellt. Anstelle auf Wünsche der Community einzugehen oder diese zumindest vernünftig Begründet abzulehnen, legt er sich mit einem bekannten JS-Guru (Douglas Crockford) und einem großen Teil der restlichen Nutzer in einer ungeschickten Art und Weise an.

Es gibt Gründe für und Gründe gegen das Nutzen von Semikolons in JavaScript. Der Erfinder der Programmiersprache, Brendan Eich, hatte sich dazu auch in seinem Blog geäußert. Meiner Meinung nach gibt es aber ein Argument, was alle anderen aussticht: Das Weglassen von Semikolons kann in wenigen Fällen Bugs verursachen, das Benutzen hingegen nicht.

PS: Mittlerweile scheinen übrigens einige Kommentare von “fat” gelöscht worden zu sein, was der Reputation seines Arbeitsgebers und seiner selbst sicher entgegen kommt.

Was macht das “new” Keyword in JavaScript?

new Keyword JavaScriptIn meinem Post zum Versuch soetwas wie Klassen in JavaScript zu ermöglichen, hatte ich geschrieben, dass “new” in JavaScript irreführend ist. Nehmen wir folgendes Beispiel:

function Example( a ) { this.a = 2 }
Example.prototype = {
  a: 1,
  b: function() { console.log(this.a); }
};

var test = new Example();
test.b();

“New” kann man eigentlich als Funktion betrachten und was in dieser, quasi hinter den Kulissen, passiert ist folgendes:

  1. Erstelle ein neues (JavaScript-)Objekt
  2. Setze den Typ des neuen Objektes auf “Object
  3. Setze die Eigenschaften (Properties) des Prototyp-Objekts als die Eigenschaften des Prototypes des neu erstellten Objekts.
  4. Führe die Funktion Example aus. Übergebe dieser Funktion hierfür das neu erstellte Objekt als “this” und sofern vorhanden übergebe die restlichen Parameter.
  5. Gebe das erstellte Objekt zurück.

Als Code sieht das dann in etwa so aus:

function new( func ) {
  var NewObject = {};
  NewObject.__proto__ = func.prototype;
  func.apply(NewObject, func.arguments);
  return NewObject;
}

function Example( a ) { this.a = 2 }
Example.prototype = {
  a: 1,
  b: function() { console.log(this.a); }
};

var test = new(Example());
test.b();

Das Beispiel ist sehr flach gehalten und soll wirklich nur der groben Veranschaulichung dienen. Genau nachlesen könnt ihr die Ausführung von “new” hier:

“New” ist also eher eine Art Kopiervorgang gepaart mit der Ausführung einer (Initial-)Funktion. Es ist somit nicht zu verwechseln mit dem “new” in Java oder ähnlichen Sprachen. Was ich in dem Zusammenhang mit irreführend meine ist, dass das “new” in JavaScript eigentlich eingeführt wurde, damit sich Java- und andere Entwickler wohler fühlen, es aber eigentlich etwas ganz anderes macht, als es ein Java-Entwickler erwartet.

Wenn ich in diesem Artikel von Prototyp sprach, meinte ich immer den Function-Prototype in JavaScript. Natürlich ist es nicht möglich eine Funktion “new” zu bennen, das Wort ist reserviert und dient im Beispiel nur der Veranschaulichung.