Wireframing-Tools – so viel will ich doch gar nicht …

Wireframes. Machen wir alle. Irgendwie. Immer mal wieder. Vornehmlich sind sie natürlich das alltägliche Werkzeug von UX’lern. Aber auch viele andere, an Softwareentwicklung beteiligte Personen nutzen sie. Gerne als kurze Skizze auf Papier, um im Gespräch einen Sachverhalt zu erläutern. Oder in irgendeiner Form schnell und rough digital erstellt und anschließend per Mail oder Skype verschickt, um z.B. den Kunden während eines Telefonats ein Problem besser verständlich machen zu können. Oder mit etwas mehr Muße erstellt (und damit auch über den Gesprächskontext hinaus noch verständlich) und benutzbar, um im Termin mit dem Kunden über die detaillierte Umsetzung eines Features zu sprechen. Oder, oder, oder …

Was ich mir wünsche

Wenn man Wireframes produzieren möchte, die langfristig verständlich und wertvoll sind, braucht man dafür meist ein geeignetes, digitales Tool, mit dem man sie nicht nur erstellen, sondern auch nachträglich editieren und exportieren kann. Nur so lässt es sich mit den produzierten Wireframes kontinuierlich arbeiten und man kann sie als Kommunikationsmittel nutzen.  Weiterlesen

Buchvorstellung: Titanium-Mobile – Multi Platform Apps mit JavaScript

Titanium Mobile eBook - Multi Platform Apps mit JavaScriptDank der Webtechnologien stehen Ihnen viele Möglichkeiten bereit, auf dem mobilen Markt präsent zu sein. Da sind unter anderem W3C Widgets, mobile Webseiten, Webapplikationen und als native App verpackte Webapplikationen. Eine weitere Möglichkeit stellt das Titanium-Mobile-SDK dar. Das besondere: Mit Titanium erstellte Apps sind nativ. Aus nur einer Codebasis können Sie eine native Anwendung für iOS, Android, BlackBerry und Tizen generieren, sowie eine Webapplikation. Nativ bedeutet, die Apps werden nicht nur sehr schnell ausgeführt, sondern es stehen Ihnen für eine optimale Usability auch native UI Widgets zur Verfügung. Interessant ist das SDK daher nicht nur für Webentwickler, sondern auch für Entwickler, die ihre Apps bisher aufwändig individuell nativ entwickelt haben. Mit Titanium benötigen Sie lediglich JavaScript-Kenntnisse. Weiterlesen

Impressionen von der OOP 2013

In der letzten Woche konnte ich zwei Tage an der OOP 2013 teilnehmen. Die einwöchige IT-Konferenz bietet jährlich eine große Auswahl von Vorträgen in den unterschiedlichsten Bereichen.
Die Vorträge, an denen ich teilgenommen habe, waren von sehr guter Qualität – sowohl inhaltlich als auch didaktisch. In diesem Artikel möchte ich ein paar Worte zu drei der Vorträge verlieren, die ich besonders positiv wahrgenommen habe.

Weiterlesen

Android-Apps mit dem Samsung Remote Test Lab testen

Als Android-Developer hat man zwangsweise mit der Fragmentierung der Geräte und Versionen zu kämpfen. Gerade für Open-Source-Developer wie mich, die nicht über ein großes Sortiment an Geräten verfügen, ist das ein Problem. Um dennoch auf ein breites Angebot an Testhardware zurückgreifen zu können, kann man nun Bekannten grundsätzlich Geräte empfehlen, die noch kein anderer Bekannter hat, oder sich Services suchen, über die sich Geräte via Internetverbindung fernsteuern lassen. In dem Fall liegt die Hardware beim Serviceanbieter und ist quasi bedienbar, als hätte man sie selbst in der Hand. Die Ausgabe des Gerätes sieht man auf dem eigenen Bildschirm. Dieser Artikel wird den kostenlosen Service der Samsung Remote Test Labs vorstellen. Weiterlesen

Mayflower Mobile Hackday: Erste Schritte in der App-Entwicklung

Mit einem kleinen Hackathon hat die Mayflower am vergangenen Samstag das Wochenende ausklingen lassen. Organisiert von unserem Mobile-Experten hatten wir auf einen netten Hackday eingeladen, bei dem Interessierte sich gemeinsam an eigenen App-Projekten probieren konnten.

Drei Teams hatten sich eingefunden, um unter anderem an einer mobilen Oberfläche für den Zugriff auf das quelloffene Continuous-Integration-System Travis-CI und das FAQ-System phpMyFAQ zu arbeiten. Verschiedene Modelle und Frameworks wurden dabei durchgespielt (unter anderem Sencha Touch und The-M-Project). Dem Team um phpMyFAQ gelang es schließlich auf Grundlage der App-Plattform Appcelerator einen funktionsfähigen Proof-of-Concept zu erstellen. Ein schöner Erfolg für die Gruppe, die bisher noch keine Erfahrung bei der Entwicklung von iOS-Apps hatte.

Der Code des experimentellen Clients hat das Team inzwischen auf GitHub veröffentlicht.

Bunte Eindrücke vom Mobile Hackday haben wir für Sie auch in unserer öffentlichen Facebook-Galerie zusammengestellt (kein Login erforderlich).

10.12. Lösungen für Debugging von Mobile Web Apps

Webkit Web Inspector (Remote)

Dass Firebug in JavaScript programmiert wurde dürfte den meisten bekannt sein. Das gleiche gilt für den WebInspector von WebKit, wie er in Safari oder Google Chrome zu finden ist. Es dürfte also nicht wundern, dass für mobile Geräte mit Weinre von Patrick Mueller bereits 2010 eine Portierung des WebInspectors geschaffen wurde, die über eine JS-Include auf der im Website-Header im Mobilen Browser Remote Debugging Funktionalität zur Verfügung stellt. Somit kann bequem über dem Desktop eine Mobile Webseite debugged werden. Weinre läuft heute als PhoneGap Projekt, ist sozusagen Standard und ist natürlich auf GitHub zu finden.

Das Ganze hat aber leider eben leider Grenzen, was Features wie Breakpoints, Backtraces und Profiling angeht, d.h. genau die nützlichen Features, die normalerweis unter dem “Script”-Tab im Debugger-Panel zu finden sind.

JavaScript Remote Debugging mit WebKit/Chrome

Der nächste konsequente Schritt war also, den Debugger direkt in den Browser Runtime zu heben und eine Remote API anzubieten bzw. eine Verbindung zu dem ohnehin schon existierenden V8 DebuggerProtocol zu schaffen, dass sich allerdings nur auf JavaScript Debugging beschränkt. Das Gesamtpaket nennt sich dann WebKit Remote Debugging Protocol. Währenddessen arbeitete Google auch am ChromeDevToolsProtocol was aber mittlerweile deprecated ist.

Seit Frühjahr diesen Jahres bietet nun WebKit sein Remote Debugging Feature an, welcher praktisch alle bekannten WebInspector Features unterstützt – dazu zählen:

  • JavaScript Console & JS Debugger
  • CSS Debugging & Live Änderungen
  • DOM Manipulation & Debugging – z.B. DOM Knoten auf Änderungen durch JS Events überwachen (DOM Mutation Events)
  • Netzwerk & Timeline – Verfolgung von Netzwerk-Aktivitäten auf der Seite (HTTP, WebSocket, Timings)
  • Resourcen – LocalStorage, ApplicationCache, Cookies

Das Feature kann bereits seit einigen Chrome Versionen getestet werden. Eine aktuelle Chrome Version bevorzugt kann eine Debugger-Instanz mit chrome --remote-debugging-port=9222 gestartet wird.

Sodann ist eine zweite Browserinstanz für den Remote Web Inspector nötig – diese muss jedoch Ihr eigenes Nutzerprofil verwenden, um Probleme zu vermeiden: chrome –user-data-dir=<existierendes Verzeichnis>

Mit Navigation auf http://localhost:9222 im zweiten Browserfenster findet sich nun eine Thumbnail-Übersicht der geöffneten Tabs des zu debuggenden Browsers. Ein weiterer Klick auf das ein Thumbnail lädt nun den Debugger auf die komplette Seite, mit dem wie gewohnt gearbeitet werden kann.

Somit kann zusammenfassend folgendes zur Funktionsweise gesagt werden:

  • Der Web Inspector ist eine Web Application.
  • Der Debugger Server lieftert per HTTP HTML, JavaScript wie CSS aus.
  • Sobald die Application geladen ist wird ein WebSocket zu http://localhost:9222/json geöffnet
  • Der Debugging Port ist für jeden offen, insofern nicht durch Firewall geschützt.
  • Neue Remote Debugging Sessions ersetzen evtl. bereits laufende Debug-Sessions
  • Web Inspector Remote läuft derzeit nur in WebKit Browsern einwandfrei

In iPhone oder Android-WebKits sucht man den Debugger derzeit noch vergebens (about:debug), auch wenn es bereits einige ROMs für Android mit Web Inspector Support gibt. Blackberrys Playbook hingegen besitzt schon entsprechende WebKit Funktionalität.

Der Debugger bietet für den Browser eine vereinfachte, aber noch experimentelle JavaScript API, die z.B. auch durch Chrome Extensions angesprochen werden kann. Nach Google’s Vorstellungen sollen damit auch WebIDEs wie Cloud9 zum bereits integrierten JavaScript Debugger (lib-v8debug) einen vollwertigen “WebInspector” erhalten.

Google/Webkit sind nicht die ersten

Opera demonstrierte bereits 2008 mit DragonFly und Scope einen funktionierenden Remote Debugger, mit dem es möglich ist sich an an einen Opera Mobile oder auch Desktop Opera via TCP-Port ranzuhängen und nicht nur JavaScript zu debuggen. Nachteil an der ganzen Sache: Im Mobile Web dominiert derzeit WebKit.

Firebug Crossfire

Ein ähnliches Projekt existiert seit Anfang diesen Jahres mit Firebug Crossfire, was ähnliche Möglichkeiten bieten soll. Zudem unterstützen die JavaScript Development Tools (JSDT) für Eclipse bereits Crossfire. Derzeit befindet sich das Projekt jedoch noch in der Alpha-Phase, aber darf bereits getestet werden.

Weitere JavaScript Debugging Plugins

Für den, der nodejs debuggen muss, gibt es mit dem NodeInspector eine schicke Lösung, mit der es möglich ist, dies bequem im Browser zu erledigen. NodeInspector ist wie ebenfalls wie Weinre eine Adaption von WebInspector.

Für JavaScript Debugging in der IDE, d.h. bequem Breakpoints in den Quelldateien des geöffneten Projekts setzen, haben wir zum einen die ChromeDevTools als Eclipse-Plugin. Zum anderen hat IntelliJ mit IDEA 10.5 und PHPStorm 3 das V8 DebuggerProtocol bereits implementiert.

Eine weitere einfache JavaScript-Konsole stellt z.B. JSConsole bereit, dass zum Debuggen von iPhone oder Android-Mobile Apps benutzt werden kann.

Mobile Apps Cross-Platform – Webmontag

Am Montag, 10.08.2009, webmontagte es mal wieder in Frankfurt. Wie immer war die Veranstaltung perfekt organisiert (danke Darren, danke Thorsten!) und die Brotfabrik als Location vermittelt ein tolles Ambiente – aus diesem Grund sponsert Mayflower gerne den Webmontag Frankfurt.

 

Freunde der Mayflower Familie waren dabei auf der Durchreise und hielten einen Vortrag zum Thema Mobile Apps Cross Platform – wie sollte es anders sein, uxebus Wolfram Kriesing war der Vortragende. Das Thema ist unheimlich spannend… die Applikationsentwicklung für iPhone, Blackberry & Co. ist teilweise PITA, da verschiedene Programmiersprachen (Objective-C, Java, Symbian C, …) beherrscht werden müssen. Was liegt also näher, als auf das Bewährte XHTML, CSS, JavaScript in einem Package zurückzugreifen? Möglich machen es (Open Source) Entwicklungen wie PhoneGap, die dabei einen Container auf den unterschiedlichen mobilen Plattformen schaffen, in dem XHTML/JS/CSS ablaufen kann. Es bleibt abzuwarten, wie sich der Mobile Widget Bereich entwickeln wird. Die Slides von Wolfram: