JavaScript Frameworks für Mobile MoBI Expertenrunde Usability, 1. März 2012 doctima GmbH JavaScript Frameworks für Mobile MoBI 1.3.2012 Edgar Hellfritsch
Inhalt Native App-Entwicklung Klassische Web-Entwicklung Javascript-Klassenbibliotheken, Jquery Mobile Bibliotheken, Jquery Mobile, Sencha Touch, PhoneGap Seite 2
Native App-Entwicklung ios, Android, Seite 3
Native App-Entwicklung am Beispiel Apple ios Sie brauchen Einen Mac mit OS X Einen Entwickler-Account bei Apple Einen Distributions-Account bei Apple Zertifikate für Entwickler, Distributor, jede App, jedes Testgerät Entwicklungsumgebung XCode mit ios SDK Programmier-Knowhow XCode/Objective C Freigabe durch Apple Seite 4
Native App-Entwicklung am Beispiel Android Sie brauchen Entwicklungsumgebung Eclipse Android Plugin Programmier-Know-How Java Ca. 25 Testgeräte und Simulatoren (Pixeldichte, OS-Version) Optional: Distributor-Account Seite 5
Vor- und Nachteile der nativen Entwicklung Performance Optimale Integration Zugriff auf alle Systemfunktionen Für den Anwender gefühlsecht Lernkurve Proprietär > Mehrfachentwicklung pro Plattform Distributionsweg teilweise restringiert Seite 6
Klassische Web-Entwicklung HTML, CSS, Javascript Seite 7
Web-Entwicklung für mobile Geräte Sie brauchen Entwicklungsumgebung (Eclipse, Visual Studio, Dashcode, vi, Dreamweaver, ) Programmier-Know-How HTML, CSS, Javascript, ggf. PHP, ASP, J2EE, Browser-Kompatiblitäts-Tabellen Ca. 25 Test-Geräte und Simulatoren Sie sind frei! Fast jede Entwicklungsumgebung wählbar Jedes Oberflächenelement selbst gestalten Jegliche Funktionalität selbst ausprogrammieren Freedom s just another word Seite 8
Vor- und Nachteile der klassischen Webentwicklung Freie Auswahl Entwicklungsumgebung Programmiersprache (irgendwas mit HTML ) Gestaltung Eigenverantwortung Usability Performance Security Sandbox Kein Zugriff auf Geräte-Schnittstellen Seite 9
HTML5 und Javascript- Bibliotheken Jquery, Mootools, dojo, Ext.JS, Seite 10
HTML 5 und CSS 3 Semantisch strukturierende Tags Erleichterung für Suchmaschinen Leichtgewichtiges Seitenlayout Medien: Videos, Zeichnungsflächen (analog Flash) Erweitertes Layout spart Hilfskonstruktionen: Schatten, Verläufe, Lokaler Datenspeicher Freies Attribut Data-* ermöglicht Erweiterungen Verfügbarkeit in Browsern: Siehe z.b. http://caniuse.com/ Seite 11
Ziele und Eigenschaften von Javascript-Frameworks Standardisierter (Browser-unabhängiger) Zugriff auf DOM (Seiteninhalte, u.a. via data-* Attribut) Events (Klicks, ) Daten (JSON, RSS, AJAX, ) Erleichterter Zugriff auf Elemente und -Listen Typisch: Pauschale Zuweisung von Maus-Events auf alle Elemente vom Typ x (Navigationselemente, Teaserlisten, ) Typisch: Generierung solcher Listen aus nachgeladenen Daten Standardisierte Oberflächenelemente analog zu proprietären Interface Buildern Typisch: Buttons und Formularfelder Typisch: Klickbare Listen Seite 12
Mobile Frameworks Weitgehend systemunabhängig (HTML 5, CSS 3, Javascript) Oberflächen-Elemente für mobile Displays Unterstützung der Kartenstapel-Navigationslogik Seitenübergänge Zugriff auf Geräte-Schnittstellen, soweit möglich Quasi-natives Look&Feel Distribution: online Optional: Offline: teils mit Packaging Native Distribution erfordert Umgebung, Zertifikate, Accounts Performance Programmierunterstützung, Debugging Seite 13
Mobile Frameworks: Beispiele JQuery Mobile Arbeitet stark mit Attribut data-* HTML-Code wird mit Funktionalität angereichert Quasi-Nachfolger von JQ Touch Sencha Touch Programmatischer Ansatz: HTML wird komplett generiert Packaging in neuestem Release, Zugriff auf Geräte-Schnittstellen PhoneGap Hersteller Nitobi gehört seit Oktober 2011 Adobe Stellt Web-Anwendungen native Geräte-Schnittstellen zur Verfügung Native Packaging, Build-Service, Distribution Seite 14
Fazit und Ausblick Seite 15
Fazit und Ausblick Chancen der mobilen Entwicklung Kontextualität Konnektivität Direkter, sofortiger Zugang immer und überall Hemmschuh der mobilen Entwicklung Konkurrierende, gleichrangige Marktführer Google und Apple Diverse kleinere Anbieter wie Microsoft, RIM, Samsung, Nokia Inkompatibel, also Einschränkung oder Mehrfachentwicklung Mobile Javascript-Frameworks Erlauben systemunabhängig zu entwickeln Verwenden (z.b. über PhoneGap) Geräte-Schnittstellen Natürlich: Grenzen der Integration Seite 16
Mobile Usability Überleitung zur Diskussion Mein Verhältnis zur Usability, bzw. User Experience: Seite 17
Kontakt doctima GmbH Edgar Hellfritsch Melli-Beese-Str. 19 D - 90768 Fürth Tel.: +49 911 975670-123 Fax: +49 911 975670-188 Edgar.hellfritsch@doctima.de www.doctima.de Twitter: @aidegare Seite 18
2002: HTML Tabellenlayout table table Transparent.gif width=180 table Seite table 80% des HTML sind Tabellen und Spacer
2007: HTML + CSS div div div div Seite div div ul div div 50% des HTML sind DIVs und SPANs div
2012: HTML 5 div header hgroup Seite nav article aside ul Semantische Strukturierung footer
2012: HTML 5 mobil header hgroup Seite article nav ul footer aside Linearisierte Darstellung