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
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
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.
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
Web 1.0 brachte Information zum Benutzer, im nächsten Schritt brachte der Benutzer Information in das Web 2.0 ein. Nun ist es soweit und das Web 3.1* ist aus dem Browser herausgewachsen und überall verfügbar.
Irgendwann stellt sich immer die Frage: Was kommt als nächstes? Was ist also der Nachfolger des Web 2.0? In Internet-Jahren gesprochen, existiert Web 2.0 schon seit 100 Jahren. Von Web 1.0 (1991) zu Web 2.0 (2003) dauerte es ~10 Jahre und nun haben wir schon 2014, es sind also weitere 11 Jahre vergangen. Wo bleibt der Nachfolger, zumal sich doch alles immer schneller, beinnahe täglich, ändert? Continue reading
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.
Wenn du das möchtest und gerade begonnen hast zu lernen, dann kann ich dir wärmstens http://speakingjs.com/es5/ ans Herz legen. In dieser HTML-Edition des Print-Books findet man eine sehr gute Einführung in JavaScript plus vielen weiteren Informationen, weit über die reine Syntax der Sprache hinaus. So werden unter anderem die wichtigsten Libraries vorgestellt, aber auch wie man die Code-Qualiät verbessern kann und wie die Geschichte von JavaScript ist.
Aber auch für Nicht-Anfänger ist es eine tolle Lektüre. Viele Sachen wird man überspringen können, einiges wird wieder in Erinnerung gerufen und alles kennt man nie.
Ich bin eher ein Fan von Low-Scope und flexiblen Frameworks, also nicht unbedingt von EmberJS (auch wenn es ein tolles Framework ist!):
@youyuxi @fivetanley @substack of course not. As I keep saying, if you are a person who prefers flexibility, don't use Ember.
— Yehuda Katz (@wycats) 20. März 2014
In Quick-Hints #11 hatte ich bereits seinen tollen Artikel zu Transitional Interfaces vorgestellt. In einem weiteren tollen Artikel von Pasquale D’Silva auf Medium stellt er ein paar nette Tools für die Darstellung / Prototypisierung von Interaktionsdesign vor. Besonders Framer hat es mir angetan und ich werden es demnächst einsetzen, wenn ich eine Idee kurz ausprobieren oder vorstellen möchte. Mit Framer können Prototypen von Animationen und Interaktionen mit JavaScript erstellt werden.
Für die statische Darstellung (oder vielleicht auch dynamisch in Verbindung mit Framer) gibt es auf http://awesomekit.me ein tolles Grafikpaket zum kostenlosen Download. Hiermit gelingen jedem schöne iOS7 Wireframes.
Nein, GridStyleSheets ist mehr. Basierend auf dem gleichen Algorithmus, den Apple für sein natives Layout benutzt, will GSS das CSS der Zukunft sein.
Mit dem nötigen Talent oder dank einer engen Zusammenarbeit mit Grafiker, können dank Clipping Mask sehr einfach sehr coole Animationen mit SVG entstehen. So wird in folgender Demo ein iPhone 5C nach und nach aufgebaut, alles im puren SVG: http://www.pencilscoop.com/demos/animating-svg-clipping-masks/; dort findet ihr auch das entsprechende Tutorial.
Für die Web Components (W3C Working Draft) gibt es mit customelements.io eine Sammlung von vielen netten Custom HTML-Elementen. Das ganze ist ähnlich einem NPM (Node) oder Nexus (Java) aufgebaut. Die Web Components bieten (dank Polyfill auch heute schon), die Möglichkeit – wie es der ein oder andere von euch (in ähnlicher Form) schon aus AngularJS kennt -, das Spektrum an HTML-Elementen zu erweitern. So findet sich auf der Website zum Beispiel ein Calendar-Element, welches durch einfache Benutzung des Tags
<x-calendar view="2013-06-09"></x-calendar>
einen Kalendender in eure Website zaubert. Natürlich ganz normal mit CSS stylebar. Viele weitere Elemente und Informationen könnt ihr auch unter x-tags.org finden.
Performance im Front-end ist immer wieder ein Thema auf meinem Blog. Vor allem beim Scrollen von Webseiten gilt immer wieder die Herausforderung, die 60 FPS zu halten. Mittlerweile gibt es sehr viele Kniffe und Hinweise, wie einem das gelingen kann. Ein guter Artikel zu diesem Thema ist hier zu finden: Continue reading
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
http://rupl.github.io/unfold/ – Unfolding the Box Model: Exploring CSS 3D Transformation
Eine sehr sehr schöne Präsentation zu 3D-Transformationen mit CSS. Der Einstieg wird hier anschaulich und dadurch leicht gemacht.
Seit der Version 29 von Firefox ist es möglich, Variablen in CSS zu verwenden. Du kennst wahrscheinlich LESS, SCSS und Co. und hast vielleicht auch schon die Möglichkeit, Farben global zu deklarieren, zu schätzen gelernt. Nun braucht man nicht mehr Zwangsweise einen CSS-Preprocessor um Variablen für z.B. Farben und Margins anzugeben; siehe auch: http://mcc.id.au/blog/2013/12/variables
CSS Variables in Firefox 29