Mobile Websites und (Web)-Apps mit jQuery Mobile Peter Hecker / GFU Cyrus AG Samstag, 5. Mai 12
Mobile Websites und (Web)-Apps mit
jQuery Mobile
Peter Hecker / GFU Cyrus AG
Samstag, 5. Mai 12
Suche:
» Home » Über die GFU
Die GFU Cyrus AGBereits 1980 als GFU Cyrus + Rölke mbH gegründet, zählt die GFU heute zu den renommiertestenIT-Schulungsunternehmen in Deutschland. Mehrere tausend IT-Fachleute aus der gesamtenBundesrepublik besuchen jedes Jahr Seminare bei der GFU.
Was bietet Ihnen die GFU?Das Seminarprogramm umfasst über 550 unterschiedliche Schulungen aus den Bereichen von A wie Administration überBetriebssysteme bis Z wie ZOPE. Mit ca. 50 Dozenten aus den verschiedensten IT-Bereichen verfügt die GFU über ein sehr großesPotential an Fachkompetenz. Dieses Know-how bieten wir Ihnen auch für Ihre Projektarbeit und zum Coaching an.
Die GFU-KundenZu den Kunden der GFU zählen Banken, Versicherungen, Handelskonzerne, Kommunen und öffentliche Einrichtungen. Werfen Siedoch mal einen Blick auf die GFU-Kundenliste.
Optimierte Themen & InhalteGemeinsam mit den Dozenten entwickelt die GFU ständig praxisorientierte Themen mit maximalem Nutzen für unsere Kundenweiter. Neue Themen werden rechtzeitig durch die GFU-Fachmitarbeiter analysiert und in das Portfolio aufgenommen.
Exzellente Referenten mit PraxiswissenDie GFU legt größten Wert darauf, da§ die Referenten ihren Erfahrungshorizont und ihr Wissen ständig in der Projektpraxiserweitern. Nur so ist Ihr Seminarerfolg wirklich garantiert. Die GFU-Dozenten vermitteln Ihnen kompakt das erforderliche Wissen.
Seminare im Wald und auf der Heide?
Ihr Partner für IT Schulung
Home Seminare Service Semicolon Die GFU Referenzen Kontakt
Kundenservice
Dozenten
Jobs
Fachbibliothek
Mediathek
Empfang der GFU
Seminarräume
Pausenraum
Restaurant
Samstag, 5. Mai 12
Suche:
» Home » Seminare
Ihr Partner für IT Schulung
Home Seminare Service Semicolon Die GFU Referenzen Kontakt
Seminar-Kategorien Alle Seminare Neue Seminare Schlagworte
Adobe
Andere Hochsprachen (C, C++, Perl, Prolog)
Crystal Reports
Datenbanken, DB-Sprachen und Design
ITIL
Internet (Design, Entwicklung, Sicherheit)
Java
Linux
MS .NET Programmierung
MS-Betriebssysteme
MS-Erweiterungen
MS-Office 2007 und Anwendungen
MS-Office 2010 und Anwendungen
MS-Office und Anwendungen
MS-Server-Software
MS-SharePoint 2010
Open Source Server-Software
Oracle, DB-Sprachen und Design
PC-Hardware & Netzwerke
Projektmanagement
Semicolon
TYPO3
VMware
Alle Kategorien anzeigen
Offene Schulungen
Über 550 verschiedene Seminarthemenbietet Ihnen die GFU Cyrus AG alsoffene Kurse zu festen, garantierten
Firmenschulungen
Jedes Seminarthema können Sie auchals Firmenschulung zu IhremWunschtermin, in Ihrem Haus oder im
Individualschulungen
Ein Maximum an Lernerfolg bringt Ihneneine Einzelschulung, wobei Sie dieSeminardauer, das Tempo und den
Lassen Sie sichindividuell beraten!
Seminare findenAlle SeminareKategorienSchlagworteTermine
Der GFU-ServiceDie GFU-PluspunkteAnreiseempfehlungHotelreservierungParkplatzreservierungShuttle-Service
Samstag, 5. Mai 12
Suche:
Lesezeichen als QR-Code:
» Home » Seminare » Kategorien » MS .NET Programmierung
Home | Impressum | Kontakt
Teilnehmer der folgenden Unternehmen sprachen der GFU Cyrus AG für ihre Schulungendas Vertrauen aus:ORGA-Support ... aus Bremen, IEM Fördertechnik ... aus Kastl, GSI-Ges. für Schweißtechnik Int. ...Niederlassung derSLV Duisburg aus Duisburg, DELI/Com/DPD ... aus Aschaffenburg, PEAGPersonalentwicklungs- und Arbeitsmarktagentur ... aus Dortmund, Stadtwerke Gengenbach aus Gengenbach,Stadt Korschenbroich -Der Bürgermeister- aus Korschenbroich, ITB-... aus Kamp-Lintfort, Intergraph SG&IDeutschland ... aus Ismaning, Ecolab ... & Co OHG aus Düsseldorf, Eigenbetrieb Gebäudewirtschaft desWetteraukreises aus Friedberg, DiesbachMedien ... aus Weinheim, Johanniter-Einrichtungen Radevormwald g...aus Radevormwald, NOK Nordostschweizerische Kraftwerke aus Baden, Haus Freudenberg ... aus Kleve,Steinhoff ... & Cie. oHG aus Dinslaken, Häfen und Güterverkehr Köln AG aus Köln, Siemens AG aus Karlsruhe,Westdeutsche Genossenschafts- Zentralbank eG aus Düsseldorf, ZIVIT aus Düsseldorf
Ihr Partner für IT Schulung
Home Seminare Service Semicolon Die GFU Referenzen Kontakt
= Durchführung garantiert = Durchführung auf Anfrage
Das perfekte IT-Seminar
finden
Finden Sie Ihre Schulung mit einem oder zwei Stichwörtern.
Seminar-Kategorien
Alle Seminare
Neue Seminare
Top Seminare des Monats
Schlagworte
MS .NET Programmierung Schulungen
Beliebte MS .NET Programmierung Schulungen
Seminar Tage Nächster Termin Seminar-ID
C# Komplett 5 11.06.2012 S858
C# Grundlagen 3 11.06.2012 S642
ASP.NET Komplett 5 21.05.2012 S363
Weitere MS .NET Programmierung Schulungen
Seminar Tage Nächster Termin Seminar-ID
Windows Phone 7 Training - Advanced - 3 20.06.2012 S1471
Windows Phone 7 Training - Jump Start - 2 11.10.2012 S1470
Clean Code Developer (CCD) - Grundlagen 1 01.10.2012 S1393
Visual Studio LightSwitch - Einstieg und Grundlagen 2 06.09.2012 S1368
VB.NET 2010 Komplett 5 09.07.2012 S1332
VB.NET 2008 Komplett 5 09.07.2012 S1331
VB.NET Komplett 5 09.07.2012 S1330
ASP.NET MVC - Professioneller Einstieg 3 13.08.2012 S1314
VB.NET 2010 für Visual Basic Programmierer 3 17.09.2012 S1302
VB.NET 2010 Einführung 3 09.07.2012 S1301
VB.NET 2010 Aufbau 2 12.07.2012 S1300
C# 2010 Komplett 5 11.06.2012 S1299
C# 2010 Grundlagen 3 11.06.2012 S1298
C# 2010 Aufbau 3 02.07.2012 S1297
Visual Studio 2010 und .NET Framework 4 - Komplett 5 17.09.2012 S1252
Mobile - Compact Framework 3 26.11.2012 S1135
WPF - Windows Presentation Foundation 2 28.06.2012 S1134
WCF/WF - Windows Communication Foundation/Windows Workflow 2 03.05.2012 S1133
VB.NET 2008 für Visual Basic Programmierer 3 17.09.2012 S1046
VB.NET 2008 Aufbau 2 12.07.2012 S1045
VB.NET 2008 Einführung 3 09.07.2012 S1044
C# 2008 Komplett 5 11.06.2012 S1043
C# 2008 Aufbau 3 02.07.2012 S1042
C# 2008 Grundlagen 3 11.06.2012 S1041
Silverlight Kompakt 2 06.09.2012 S998
Silverlight 4 und 5 - Einführung 3 05.11.2012 S997
C# Aufbau 3 02.07.2012 S708
VB.NET für Visual Basic Programmierer 3 17.09.2012 S643
.NET Einführung für Programmierer-Anfänger 5 05.11.2012 S620
VB.NET Aufbau 2 12.07.2012 S610
Asynchrone Programmierung und Remoting mit .NET 2 28.06.2012 S515
Windows Programmierung mit WinForms 2 29.10.2012 S513
ADO.NET 2 29.10.2012 S441
.NET Komplett 5 25.06.2012 S439
VB.NET Einführung 3 09.07.2012 S333
MS .NET Programmierung Firmenschulungen
Seminar Tage Nächster Termin Seminar-ID
Anwendungsentwicklung für Office 2007 mit Visual Studio 2008 2 a. A. S939
Einführung in Office Open XML 2 a. A. S938
Fortgeschrittene Windows-Programmierung mit GDI+ 2 a. A. S514
Haben Sie Fragen?
Gerne berate ich Siepersönlich per Mailoder Telefon.
Nicole Döhring
• Infoline 0221 82 80 90• Email an GFU
GFU-Service
Shuttle-ServiceHotelreservierungParkplätzeWeitere Serviceleistungen
Seminare finden
Alle SeminareKategorienSchlagworteTermine
• C#, VB.NET
• ADO.NET, WCF/WF
• WinForm, WPF, Silverlight
• Windows Phone
• ASP.NET Web Forms, ASP.NET MVC
• Pattern, Refactoring, TDD, CCD...
Samstag, 5. Mai 12
• Berater
• Softwareentwickler
• Trainer
• Seit 1995 vorzugsweise und am liebsten Web-Technologien!
Peter Hecker
Samstag, 5. Mai 12
Agenda
• Überblick und Einstieg in jQuery Mobile
• Mobile Website mit jQuery Mobile
• Hybride (Web)-App mit jQuery Mobile
Samstag, 5. Mai 12
Quelle: http://www.gartner.com/it/page.jsp?id=1848514
Weltweiter Smartphone-Verkauf 11/2010
Andere3 %Microsoft
3 %Bada1 % RIM
15 %
iOS17 %
Symbian36 %
Android25 %
AndroidSymbianiOSRIMBadaMicrosoftAndere
Samstag, 5. Mai 12
Quelle: http://www.gartner.com/it/page.jsp?id=1848514
Weltweiter Smartphone-Verkauf 11/2011
Andere1 %
Microsoft2 %Bada2 % RIM
11 %
iOS15 %
Symbian17 %
Android53 % Android
SymbianiOSRIMBadaMicrosoftAndere
Samstag, 5. Mai 12
0
15
30
45
60
Android Symbian iOS RIM Bada Microsoft Andere0,91,52,2
111516,9
52,5
2,52,71,1
15,416,6
36,6
25,3
Trends
2010 2011
Samstag, 5. Mai 12
Überblick und Einstieg in jQuery Mobile
Samstag, 5. Mai 12
jQuery Mobile - Überblick
Samstag, 5. Mai 12
Samstag, 5. Mai 12
DocsDocs DownloadDownload PlatformsPlatforms ThemesThemes ResourcesResources ForumForum BlogBlog
jQuery UI Mobile Plugins Meetups Forum Events About Donate
Seriously cross-platform with HTML5
jQuery mobile framework takes the "write less, do more" mantra to thenext level: Instead of writing unique apps for each mobile device or OS,the jQuery mobile framework allows you to design a single highly-branded web site or application that will work on all popularsmartphone, tablet, and desktop platforms. Device support
jQuery Mobile: Touch-Optimized WebjQuery Mobile: Touch-Optimized WebFramework for Smartphones & TabletsFramework for Smartphones & Tablets
A unified, HTML5-based user interface system for allA unified, HTML5-based user interface system for allpopular mobile device platforms, built on the rock-solidpopular mobile device platforms, built on the rock-solidjQuery and jQuery UI foundation. Its lightweight code isjQuery and jQuery UI foundation. Its lightweight code isbuilt with progressive enhancement, and has a flexible,built with progressive enhancement, and has a flexible,easily themeable design.easily themeable design.
Latest stable version - 1.1.0Latest stable version - 1.1.0Legacy version - 1.0.1Legacy version - 1.0.1
JQUERY MOBILE 1.1.0 FINAL RELEASED!JQUERY MOBILE 1.1.0 FINAL RELEASED!
Samstag, 5. Mai 12
http://www.netmagazine.com/features/net-awards-2011-pictures
Samstag, 5. Mai 12
Projektziele
• Unterschiedliche Plattformen
• Unterschiedliche Browser
• Eine Codebasis für alle Plattformen und Browser
Samstag, 5. Mai 12
DocsDocs DownloadDownload PlatformsPlatforms ThemesThemes ResourcesResources ForumForum BlogBlog
jQuery UI Mobile Plugins Meetups Forum Events About Donate
jQuery Mobile 1.1.0 Supported PlatformsjQuery Mobile has broad support for the vast majority of all modern desktop, smartphone, tablet, and e-readerplatforms. In addition, feature phones and older browsers are supported because of our progressive enhancementapproach. We’re very proud of our commitment to universal accessibility through our broad support for all popularplatforms.
A-grade – Full enhanced experience with Ajax-based animated page transitions.
Apple iOS 3.2-5.0 - Tested on the original iPad (4.3 / 5.0), iPad 2 (4.3), original iPhone (3.1), iPhone 3 (3.2),3GS (4.3), 4 (4.3 / 5.0), and 4S (5.0)Android 2.1-2.3 – Tested on the HTC Incredible (2.2), original Droid (2.2), HTC Aria (2.1), Google Nexus S (2.3).Functional on 1.5 & 1.6 but performance may be sluggish, tested on Google G1 (1.5)Android 3.1 (Honeycomb) – Tested on the Samsung Galaxy Tab 10.1 and Motorola XOOMAndroid 4.0 (ICS) – Tested on a Galaxy Nexus S. Note: transition performance can be poor on upgradeddevicesWindows Phone 7-7.5 – Tested on the HTC Surround (7.0) HTC Trophy (7.5), LG-E900 (7.5), Nokia Lumia 800Blackberry 6.0 – Tested on the Torch 9800 and Style 9670Blackberry 7 – Tested on BlackBerry® Torch 9810Blackberry Playbook (1.0-2.0) – Tested on PlayBookPalm WebOS (1.4-2.0) – Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)Palm WebOS 3.0 – Tested on HP TouchPadFirebox Mobile (10 Beta) – Tested on Android 2.3 deviceChrome for Android (Beta) – Tested on Android 4.0 deviceSkyfire 4.1 - Tested on Android 2.3 deviceOpera Mobile 11.5: Tested on Android 2.3Meego 1.2 – Tested on Nokia 950 and N9Samsung bada 2.0 – Tested on a Samsung Wave 3, Dolphin browserUC Browser – Tested on Android 2.3 deviceKindle 3 and Fire - Tested on the built-in WebKit browser for eachNook Color 1.4.1 – Tested on original Nook Color, not Nook TabletChrome Desktop 11-17 - Tested on OS X 10.7 and Windows 7Safari Desktop 4-5 - Tested on OS X 10.7 and Windows 7Firefox Desktop 4-9 – Tested on OS X 10.7 and Windows 7Internet Explorer 7-9 – Tested on Windows XP, Vista and 7Opera Desktop 10-11 - Tested on OS X 10.7 and Windows 7
B-grade – Enhanced experience except without Ajax navigation features.
Blackberry 5.0: Tested on the Storm 2 9550, Bold 9770Opera Mini (5.0-6.5) - Tested on iOS 3.2/4.3 and Android 2.3Nokia Symbian^3 - Tested on Nokia N8 (Symbian^3), C7 (Symbian^3), also works on N97 (Symbian^1)
C-grade – Basic, non-enhanced HTML experience that is still functional
Blackberry 4.x - Tested on the Curve 8330Windows Mobile - Tested on the HTC Leo (WinMo 5.2)All older smartphone platforms and featurephones – Any device that doesn’t support media queries willreceive the basic, C grade experience
More infoView the original graded device support matrix that was established at the start of the project. This has beenreplaced by the graded support levels above, but is useful as a reference to our initial research.
Presentation about the challenges crossed when testing mobile JavaScript, by John Resig:
Missing Plug-in
Mobile Graded Browser SupportMobile Graded Browser Support
© 2010-12 The jQuery Foundation
Sponsored by Media Temple, Mobile Project Sponsors and Others.
Samstag, 5. Mai 12
• Phones/Tablets
• Android 1.6+
• BlackBerry 5+
• iOS 3+
• Windows Phone 7
• WebOS 1.4+
• Symbian (Nokia S60)
• Firefox Mobile
• Opera Mobile 11+
• Opera Mini 5+
• Desktop Browsers
• Chrome 11+
• Firefox 3.6+
• Internet Explorer 7+
• Safari
• E-Readers
• Kindle
• Nook
Samstag, 5. Mai 12
http://gs.statcounter.com/#mobile_browser-DE-monthly-201104-201204-bar
Samstag, 5. Mai 12
CHAPTER 1: Why jQuery Mobile? 4
Unified UI Across All Mobile Platforms jQuery Mobile delivers a unified user interface by designing to HTML5 and CSS3
standards. Mobile users expect their user experience to be consistent across platforms
(see Figure 1E3, Figure 1E4, Figure 1E5). Conversely, compare the native Twitter apps
on both iPhone and Android. The experience is not unified. jQuery Mobile applications
remedy this inconsistency, providing a user experience that is familiar and expected,
regardless of the platform. Additionally, a unified user interface will provide consistent
documentation, screen shots, and training regardless of the end user platform. For
example, if your sales staff needs training on a new mobile app that is being deployed
the user documentation will contain consistent screen shots that apply to all platforms. If
half the team has iPhones and the other half has Android devices, the training
experience and documentation will be the same for all users.
Figure 1–3. iPhone Figure 1–4. Windows Phone Figure 1–5. Android
jQuery Mobile also helps eliminate the need for device-specific UI customizations. A
single jQuery Mobile code base will render consistently across all supported platforms
without customizations. This is a very cost-effective solution compared to an
organization supporting a native code base per OS. And supporting a single code base
is much more cost-effective long term in regards to support and maintenance costs (see
Figure 1E6).
Samstag, 5. Mai 12
CHAPTER 1: Why jQuery Mobile? 7
Figure 1–7. A-Grade Experience Figure 1–8. C-Grade Experience
jQuery Mobile renders the control with full CSS3 styling applied. Alternatively, Figure 1A8
is the same switch control rendered on a much older C-Grade browser.2 The C-grade
browser does not render the full CSS3 styling.
IMPORTANT: Although the C-Grade experience is not the most visual appealing it demonstrates the usefulness of graceful degradation. As users upgrade to newer devices, the C-Grade browser market will eventually diminish. Until this crossover takes place, C-Grade browsers will still receive a functional user experience when running a jQuery Mobile app.
Native applications do not always degrade as gracefully. In most cases, if your device
does not support a native app feature you will not even be allowed to download the app.
For instance, a new feature in iOS 5 is iCloud persistence. This new feature simplifies
data synchronization across multiple devices. For compatibility, if we create a new iOS
app that incorporates this new feature we will be required to set the Nminimum allowed
SDKQ for our app to 5.0. Now our app will only be visible in the App Store to users
running iOS 5.0 or greater. jQuery Mobile applications are more flexible in this regard.
2 A C-Grade browser does not support media queries and will not receive styling
enhancements from jQuery Mobile.
Samstag, 5. Mai 12
CHAPTER 1: Why jQuery Mobile? 8
Responsive Design A jQuery Mobile UI will render responsively across different display sizes. For example,
the same UI will display appropriately on phones (see Figure 1D9) or larger devices such
as tablets, desktops, or TVs (see Figure 1D10).
Figure 1–9. Phone Display
CHAPTER 1: Why jQuery Mobile? 9
Figure 1–10. Tablet/Desktop/TV Display
The Build Once, Run Anywhere Myth Is it possible to build a single application that is universally available for all consumers
(phones, desktops, tablets)? Yes, it is possible. The Web provides universal distribution.
jQuery Mobile provides cross-browser support. And with CSS media queries we can
begin tailoring our UI to best fit the form factor. For example, on small devices we can
serve small images with brief content whereas on larger devices we may serve up larger
images with detailed content. Today, most organizations with a mobile presence
typically support both a desktop Web and a mobile site. There is waste any time you
must support multiple distributions of an application. The rate at which organizations are
embracing mobile presences, combined with their need to avoid waste, will drive the
build once run anywhere myth to fruition.
Responsive Forms In certain situations, jQuery Mobile will create responsive designs for you. The
following figures show how well jQuery MobileMs responsive design applies to form
field positioning in portrait versus landscape mode. For instance, in the portrait view
(see Figure 1O11) the labels are positioned above the form fields. Alternatively, when
repositioning the device in landscape (see Figure 1O12) the form fields and labels
appear side-by-side. This responsive design provides the most usable experience
This
boo
k w
as p
urch
ased
by
heck
er@
gfu.
net
Samstag, 5. Mai 12
CHAPTER 1: Why jQuery Mobile? 10
based on the devices available to screen real estate. jQuery Mobile provides many of
these good UX principles for you without any effort on your part!
Figure 1–11. Responsive Design (portrait) Figure 1–12. Responsive Design (landscape)
Themable Styling jQuery Mobile supports a themable design that allows designers to quickly re-style their
UI. By default, jQuery Mobile provides five themable designs with the flexibility to
interchange themes for all components including page, header, content, and footer
components. The most useful tool for creating custom themes is ThemeRoller3.
Restyling a UI takes minimal effort. For example, I can quickly take a default themed
jQuery Mobile application (see Figure 1K13) and re-style it with another built-in theme in
seconds. In the case of my modified theme (see Figure 1K14), I chose an alternate theme
from the list. The only markup required was an addition of a data-theme attribute. We
will discuss themes in greater detail in Chapter 7.
<!-- Set the lists background to black --> <ul data-role="listview" data-inset="true" data-theme="a">
3 See http://jqueryui.com/themeroller/. ThemeRoller is a web-based tool that automates
the process of generating new CSS-based themes.
Samstag, 5. Mai 12
CHAPTER 1: Why jQuery Mobile? 11
Figure 1–13. Default Theme Figure 1–14. Alternate Theme
Accessible jQuery Mobile apps are 508 compliant by default, a characteristic that is valuable to
anyone.4
In particular, government or state agencies require their applications to be 100%
accessible. Furthermore, mobile screen reader usage is rising. According to WebAIM,5
66.7% of screen reader users use the screen reader on their mobile device.
4 508 Compliance is a federal law that requires applications to be accessible by users with
disabilities. The most commonly used assistive technologies on the mobile Web are screen
readers.
5 See http://webaim.org/projects/screenreadersurvey3/#mobileusage.
http://webaim.org/projects/screenreadersurvey3/#mobileusage
Samstag, 5. Mai 12
Samstag, 5. Mai 12
kanbanpadkanbanpad United Healthcare LUnited Healthcare L…… Fiat SpainFiat Spain Cisco Home NetworCisco Home Networ……
uSwitch BroadbanduSwitch Broadband CHECKOCHECKO RevierSportRevierSport DestakDestak
Gefällt mir
TweetTweet 4,991
96
345345
ShareShare
jQuery Mobile Gallery
About
Submit
Samstag, 5. Mai 12
jQuery Mobile - Einstieg
Samstag, 5. Mai 12
Samstag, 5. Mai 12
Samstag, 5. Mai 12
• Deklaration von HTML5 data-Attributen
• Automatisches „Styling“
• Ajaxifizierung von Links und Formularen
• Single Page App versus Multiple Page App
• Page Prefetching
• Page Transitions
jQuery Mobile Konzepte
Samstag, 5. Mai 12
Samstag, 5. Mai 12
Autostyling
Samstag, 5. Mai 12
Ajaxifizierung
Samstag, 5. Mai 12
Single Page App
Samstag, 5. Mai 12
Multiple Page App
Samstag, 5. Mai 12
Multiple Page App
Samstag, 5. Mai 12
Multiple Page App
Samstag, 5. Mai 12
Prefetching
Samstag, 5. Mai 12
Page Transition
Samstag, 5. Mai 12
Samstag, 5. Mai 12
Mobile Website mit jQuery Mobile
Samstag, 5. Mai 12
Website mit ASP.NET
• Ziel: Serverseitige Steuerung der Oberfläche
• Welche Methode?
• ASP.NET Web Pages
• ASP.NET Web Forms
• ASP.NET MVC
Samstag, 5. Mai 12
Samstag, 5. Mai 12
Samstag, 5. Mai 12
Samstag, 5. Mai 12
Samstag, 5. Mai 12
Fazit
• Web Pages sehr leicht gewichtig
• MVC mehr Kontrolle
• Web Forms im Prinzip ja, aber nicht die beste Methode
Samstag, 5. Mai 12
Hybride (Web)-App mit jQuery Mobile
Samstag, 5. Mai 12
Hybride (Web)-App
• Ziel: Entkoppeln von Server und Client
• Welche Methode?
• ASP.NET MVC
• ASP.NET WebServices
• ASP.NET Web-API
Samstag, 5. Mai 12
Samstag, 5. Mai 12
Samstag, 5. Mai 12
Samstag, 5. Mai 12
Samstag, 5. Mai 12
Samstag, 5. Mai 12
Hybride Web-App mit Phonegap
Samstag, 5. Mai 12
PhoneGap
• Erstellt von der Firma Nitobi
• Open Source (MIT Lizenz)
• Native App-Wrapper
• Mehrere Plattformen
• Wurde 10/2011 von Adobe gekauft
• ab 02/2012 ein Apache Projekt
Samstag, 5. Mai 12
About Developers Community Support DownloadPhoneGap 1.7.0
PhoneGap is an HTML5 app platform that allows you to author native applications with web
technologies and get access to APIs and app stores. PhoneGap leverages web technologies
developers already know best... HTML and JavaScript. Learn More »
PhoneGap 1.7.0 PhoneGap Build PhoneGap Book PhoneGap + DW PhoneGap Shop
PhoneGap 1.7.0See what's new!
Samstag, 5. Mai 12
Apache Cordova is a platform
for building native mobile
applications using HTML, CSSand JavaScript
About Apache Cordova™
Apache Cordova is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator
project. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications,
and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is
About Contribute Mailing List Download
Samstag, 5. Mai 12
Samstag, 5. Mai 12
Samstag, 5. Mai 12
Samstag, 5. Mai 12
PhoneGap Projekte
• www/
• index.html
• config.xml
• phonegap.js
Samstag, 5. Mai 12
Fazit
• Serviceorientierte Architektur
• Zunahme der JavaScript-Programmierung
• Identische Codebasis kann als Hybrid-App bereitgestellt werden
Samstag, 5. Mai 12
jQuery MobileTools & Ressourcen
Samstag, 5. Mai 12
Samstag, 5. Mai 12
Plans & PricingPlans & Pricing FeaturesFeatures AboutAbout SupportSupport BlogBlog LOG INLOG IN
This builder is great! It's so easy to
create simple web app interfaces.
Juhani Matilainen, Software Engineer
Smooth! I love it - and the Download
App is fantastic!
Per Hornshøj-Schierbeck, Senior Developer
Surely now the starting point for
every mobile UI we create.
Stephen Greatreux, Software Developer
What people are saying about CodiqaWhat people are saying about Codiqa
PLANS & PRICING30-day Free Trial! WEB DEMOWEB DEMO
Rapid PrototypingRapid Prototypingwith jQuery Mobilewith jQuery MobileEasy drag-and-drop jQuery Mobile appEasy drag-and-drop jQuery Mobile app
building and sharing. building and sharing. Free to use!Free to use!
Samstag, 5. Mai 12
Signup Contact Blog
Home Product Pricing Developers Blog About
The only 100% Cloud based development environmentfor Mobile, Tablet and Desktop
Free. Powerful. Completely uncompromising.
Developing a better wayLogin
Sign%Up%NowSign%Up%Now
Learn%MoreLearn%More
%%%%%%%%%%%%%%%%
Our%ServicesOur%Services
It's free!
How it works
We build Apps,
widgets and more
AC Widgets on
GitHub
Samstag, 5. Mai 12
Features Plug-ins Pricing About Us
SIGN UP NOW"Just would like to let you know that Tiggziis just amazing. I think it is 'the rocket fuel'for mobile development. I have tried othersand Tiggzi is the best tool."
Tiggzi Mobile App Builder
The Fastest & Easiest Wayto Create Mobile AppsCloud-based Builder for HTML5, jQuery Mobile, and PhoneGap Apps.Easily Connect to REST APIs, and Export for Android, iOS, or Mobile Web.
Mobile App BuilderLearn to build HTML5 apps, connect toREST APIs
Explore Features »
Tiggzi Plug-insExtend Tiggzi with powerful servicesfrom the plug-in library.
Learn More »
Development SupportWe're here to help you "go mobile"
Read More »
LATEST FROM THE BLOG
EVENTS
Where To Find Us In May
Check out where the Tiggzi team is headed: ATT Mobile Hackathon, May 4-5,Palo Alto, CA CONFESS 2012, May 7-9, Austria DC jQuery Users Group,Thursday, May 10 ATT Mobile Hackathon,
NEWS FROM TWITTER
Login
Sign Up
Password
Forgot password?
Email Address Remember me
Upcoming new features: http://t.co/Bmpbpfqo12 hours ago · reply · retweet · favorite
Where To Find Tiggzi Team In May - http://t.co/X3VHtIlK13 hours ago · reply · retweet · favorite
Samstag, 5. Mai 12
Rhomobile is now a Motorola Solutions company.The acquisition will allow both companies to deliverthe best in tools to develop and deploy apps for themobile enterprise.
CLICK HERE FOR THE ANNOUNCEMENT
CLICK HERE FOR MOREINFORMATION ABOUT RHOELEMENTS
MOBS
Get the hottest local deals on everything from
RT @nalwayaabhishek: Rhomobile Ajax Calls using JQuery Mobilehttp://t.co/MTG66oux
mobilize your enterprise appsmobilize your enterprise apps
Downloads Blog Google Group Contact Us
Home Products Docs Partners Apps Resources Company
Smartphone Apps Made EasyUse your web skills to write NATIVE apps once and build
for ALL smartphones with Rhodes 3.0. Write and build
apps online with RhoHub. Easily integrate with enterprise
apps and synchronize data to devices with RhoConnect.
The result:
Unmatched Developer Productivity
Synchronized Data and Easy App Integration
Cross-platform – One Codebase, Every Smartphone
INSTALL RHOSTUDIOINSTALL RHOSTUDIO
Build AppsBuild Apps In the CloudIn the Cloud Integrating Enterprise AppsIntegrating Enterprise Apps For Complete Enterprise MobilityFor Complete Enterprise Mobility
InfoWorld Nam
es
InfoWorld Nam
es
Rho ‘Top Choice’
Rho ‘Top Choice’
Mobile Framework
Mobile Framework
Samstag, 5. Mai 12
Showcase Docs Support Friends Blog DownloadDownload
Get Started
Download The-M-Project 1.1 andlearn how to get started. Happiness is only a few steps away.Learn more...
Features
It's Open Source, it's free, it's build onsolid ground, it's MVC, it's HTML5, it'sCSS3, it's I18N ready and it's a lotmore. Learn more...
Espresso
Espresso is The-M-Project's bestfriend that eases up the developmentprocess of mobile web apps a lot.Learn more...
Get Involved
Join us on GitHub, track bugs,discuss new features or even sendpull requests - any help will beappreciated. Learn more...
Samstag, 5. Mai 12
DocsDocs DownloadDownload PlatformsPlatforms ThemesThemes ResourcesResources ForumForum BlogBlog
jQuery UI Mobile Plugins Meetups Forum Events About Donate
In this section, we have gathered useful resources that will help you learn more about jQuery Mobile, find tools todevelop jQuery Mobile application designs and mockups, tutorials and tools to guide your through the development ofsimple or more complex applications and related articles.
Featured sites | Books | Apps & Frameworks | Plugins | Extensions | Tools | Themes | Articles & Tutorials
Featured jQuery Mobile sites from jQMGallery.comYou will find below a great sample collection of Mobile sites built with jQuery Mobile. More examples can be found inthe jQM Gallery.
OpenTable Ikea Sweden Khan Academy Disney World Slideshare Box.net
Stanford American Century Rugby World Cup Take Me Fishing Ryland Homes Moulin Rouge
Books
“Master Mobile WebApps with jQueryMobile”by Matt Doyle, Elated Books
“jQuery Mobile: Upand Running”by Maximiliano Firtman,O’Reilly Media
“jQuery Mobile”By Jon Reid,O’Reilly Media
“jQuery Mobile FirstLook”by Giulio Bai,Packt Publishing
“Adobe DreamweaverCS5.5: Designing andDeveloping for Mobilewith jQuery, HTML5,and CSS3”by David Powers,Adobe Press
“Using the CSS3Mobile Pack forAdobe Fireworks CS5”by Jim Babbage, Peachpit Press
“Pro jQuery Mobile”by Brad Broulik,Apress
“Sams Teach YourselfjQuery Mobile in 10Minutes (Sams TeachYourself — Minutes)”by Steven E. Holzner,Sams
“jQuery Mobile WebDevelopmentEssentials”by Raymond Camdenand Andy Matthews,Packt Publishing
Apps & frameworks PhoneGap – tool to wrap jQuery Mobile code for native app deployment
Codiqa – rapid jQuery Mobile app prototyping
Handheld Designer – drag and drop tool for building and hosting jQuery Mobile apps
Application Craft – drag and drop tool for building jQuery Mobile apps
Proto.io – drag and drop page builder
Tiggzi – cloud-based drag and drop tool for building jQuery Mobile apps connected to any REST API
NS Basic/App Studio – drag and drop tool for building jQuery Mobile apps
MobDis – drag and drop tool for building jQuery Mobile apps
Mobjectify – tool for building jQuery Mobile app mockups
M-Project – MVC framework based on jQuery Mobile
Rhomobile – enterprise mobile app framework
Neptune Application Designer – SAP HTML5 Designer optimized for jQuery Mobile for SAP Mobilityapplications
Octomobi – Online tool to create webapps with maps, image gallery and RSS feed in jQuery Mobile
Adaptor for AngularJS
jqmPHP – package of PHP classes for generating jQM markup
Drupal theme – theme for jQuery Mobile
Seaside (SmallTalk) – a jQuery Mobile implementation
Pyramid – Starter scaffolding for creating a jQuery Mobile Pyramid application
3rd party pluginsThese are all jQuery Mobile compatible plugins, many use the theme framework, auto-initialization and data- attributeconfiguration features or core mobile widgets.
Pagination PhotoSwipe Diapo slideshow Bartender
Google Maps Mobiscroll Datebox Android-like date picker
Leaflet’s mobile demo Simple Dialog Actionsheet Multiview
Splitview Swipe menu Swipe to delete 960 grid for jQuery Mobile
3rd party extensionsThese are 3rd Party extensions that add capabilities to existing functionality.
jQueryMobile-Rails – Incorporates the jQuery Mobile assets into your Rails applicationTwitter Bootstrap jQuery Mobile Theme – A jQuery Mobile theme based on Twitter BootstrapjQuery Mobile Icon Pack – Extra icons for your jQuery Mobile projectAppBoilerplate – A jQuery mobile application boilerplate aimed at web application and PhoneGap developersincluding an OS based theme switcher and full plugin supportRouter – Router/controller for jQuery Mobile that adds support for client-side parameters, regexp-basedroutes, and can be used with Backbone.js or Spine.jsSubpages – Allows multiple pages to be loaded in with a single requestSelective DOM caching – Allows pages to be selectively cached using the data-dom-cache attribute on eachpage. A custom pageshow event handler determines whether to remove the previous page.
ToolsjQuery Mobile stencils for OmniGrafflejQuery Mobile stencils for Visiobookmarklet for debugging #jQueryMobile page navigation problems
ThemesiOS Theme by TaitemsThemeRoller for Mobile
Articles & TutorialsPlease welcome. Metro style theme for jQuery Mobile. Video Vimeo, Published on April 27th, 2012 by Sergei Grebnov
More news from MS Open Tech: announcing the open source Metro style theme for jQuery Mobile Article interoperability@microsoft, Published on April 26th, 2012 by Abu Obeida
jQuery UK 2012 – jQuery Mobile Keynote – Todd Parker Video Presentation Vimeo, Published on April 24th, 2012 by White October (see also the conference presentation)
Implement responsive design with jQuery Mobile and CSS3 Article Tutorial IBM Developer Works, Published on April 24th, 2012 by Kris Hadlock
Building jQuery Mobile App with StackMob Backend API Tutorial Maxa Blog, Published on April 18th, 2012 by Max Katz
jQuery Mobile 1.1: Smoother, Faster, Nicer Article Elated, Published on April 16th, 2012 by Matt Doyle
Persistent Navigation in JQuery Mobile Tutorial intechnica //Blog, Published on March 30th, 2012 by Andy Still
jQuery Mobile Autocomplete now available Article andymatthews.net, Published on March 27th, 2012 by Andy Matthews
Example of Autocomplete in jQuery Mobile Tutorial Raymond Camden’s Blog, Published on March 27th, 2012 by Raymond Camden
Coding quickie: jQuery Mobile and dynamically created content Article Tutorial Electric Foundry, Published on March 27th, 2012 by Peter Virtanen
Developing mobile applications with PhoneGap and JQuery Mobile Article Tutorial Pieter De Rycke’s Blog, Published on March 26th, 2012 by Pieter De Rycke
jQuery Mobile is Awesome Part 2: Pages and Transitions Article Tutorial Codiqa Blog, Published on March 18th, 2012 by Max Lynch
jQuery Mobile Best Practices – a one year retrospective Article Tutorial Roughly Brilliant, Published on March 14th, 2012 by Shane Gliser
Using jQuery Mobile with MVC and Netduino for Home Automation Article Tutorial The Code Project, Published on March 14th, 2012 by Dan Thyer
jQuery Mobile Tutorial: Creating a Restaurant Picker Web App Tutorial Noupe, Published on March 8th, 2012 by Stephanie Walter
Active button in navbar in Jquery Mobile Tutorial Yousef Jadallah’s Blog, Published on March 6th, 2012 by Yousef Jadallah
Using Backbone.js with jQuery Mobile Article Tutorial Christophe Coenraets’ Blog, Published on March 5th, 2012 by Christophe Coenraets
jQuery Mobile 101 Tutorial Ubelly, Published on February 27th, 2012 by Shaun Dunne
Getting URL parameters in a jQuery Mobile page Tutorial Raymond Camden’s Blog, Published on February 24th, 2012 by Raymond Camden
Build Mobile-Friendly HTML5 Forms with ASP.NET MVC 4 and jQuery Mobile Tutorial MSDN Magazine , Published on February 23rd, 2012 by Rachel Appel
jQuery Mobile Keynote, Presentation by Todd Parker – jQuery UK Conference Presentation Speaker Deck, Published on February 11th, 2012 by Todd Parker (see also the conference video)
Adding Mobile Views to your Grails Applications with JQuery Mobile: A Real Life Example Tutorial Tomás Lin’s Programming Brain Dump, Published on February 11th, 2012 by Tomás Lin
From a List to a Details View using jQueryMobile and Backbone.js Tutorial The Other Steve Smith, Published on February 7th, 2012 by Steve Smith
Please welcome jQuery Mobile Boilerplate Article andymatthews.net, Published on February 2nd, 2012 by Andy Matthews
Building Great Mobile Sites Quickly with jQuery Mobile Video Presentation Webvanta, Published on February 2nd, 2012 by Michael Slater and Christopher Haupt
jQuery Mobile, HTML5 Mobile App Connected to Parse Mobile Backend Tutorial Maxa Blog, Published on February 1st, 2012 by Max Katz
From a List to a Details View using jQueryMobile and Backbone.js Tutorial Chariot Solutions, Published on January 30th, 2012 by Steve Smith
jQuery Mobile – What You Need to Know Tutorial 1st Web Designer, Published on January 30th, 2012 by Rochester Oliveira
jQuery Mobile Tutorials Tutorial Miami Coder, Published on January 16th, 2012 by Jorge
jsRender JSON APIs and jQuery Mobile Tutorial Roughly Brilliant, Published on January 3rd, 2012 by Shane Gliser
How To Improve Mobile Commerce SEO Using JQM Article Video Search Engine Land, Published on January 2nd, 2012 by Sherwood Stranieri
How to use jQuery Templates and JSON APIs with jQuery Presentation Roughly Brilliant, Published on December 15th, 2011 by Shane Gliser
Introduction to jQuery Mobile Tutorial Raymond Camden’s Blog, Published on December 15th, 2011 by Raymond Camden
Visual Mapper: jQuery Mobile to REST Services Tutorial Maxa Blog, Published on December 15th, 2011 by Max Katz
jQuery Mobile Events Diagram Article Published on December 10th, 2011 by Brad Broulik
Use PhoneGap Media API & jQuery Mobile UI Framework Tutorial Mobile Developer Works, Published on November 1st, 2011 by Elizabeth Baldwin
Passing Data Between Pages in jQuery Mobile Tutorial Mountaineering Coding, Published on December 1st, 2011 by Ryan Stewart
Mobile jQuery Client for Delphi REST Server Tutorial Marco’s tech world, Published on November 30th, 2011 by Marco Cantù
Automated UI Tests for jQuery Mobile Apps Using Selenium Video Published on November 21st, 2011 by Operation Mobile
Three Ways to Implement a Global Menu in jQuery Mobile Video Roughly Brilliant, Published on November 21st, 2011 by Shane Gliser
ASP.NET MVC 4 Mobile Features (with jQuery Mobile) Tutorial Published on November 12th, 2011 by Microsoft ASP.NET Team
Andy Matthews Tutorials, ranging from introduction to jQuery Mobile to the developmentment of moreadvanced features and plugins Tutorial andymatthews.net, Published on February 8th, 2011 and Updated on November 1st, 2011 by Andy Matthews
Adobe – Customizable starter design for jQuery Mobile Tutorial Article Video Adobe Developer Connection, Published on October 10th, 2011 by Chris Converse
Creating jQuery Mobile website themes in Fireworks using the CSS3 Mobile Pack Tutorial Article Adobe Developer Connection, Published on October 3rd, 2011 by Michael Dominic
Progressively enable the mobile web with ASP.NET MVC 4, HTML5, and jQuery Mobile Video Channel 9, Published on September 15th, 2011 by Phil Haack
Add charting on mobile browsers with PHP, XML, jQuery and jQuery mobile Tutorial IBM Developer Works, Published on September 13th, 2011 by Jack D. Herrington
Fast Drupal integration Tutorial Article Fedex Techie Blog, Published on September 6th, 2011 by Federico M Rinaldi
Using jQuery Mobile in SharePoint Tutorial Article SharePoint Dev Notes, Published on August 26th, 2011 by Chris Quick
Making jQuery Mobile templates even easier – with ColdFusion Tutorial Coldfusion Jedi, Published on August 26th, 2011 by Raymond Camden
jQuery Mobile & Rails Tutorial Article Metaskills.net, Published on August 24th, 2011
Loading dynamic formatted content in jQuery mobile with .load() Article Stikki.me, Published on August 18th, 2011 by jzellis
How to add admob to your jQueryMobile app, the right way Tutorial Video Pinehead.tv, Published on July 26th, 2011 by Anthony James
jQuery Mobile in Visualforce pages Tutorial Developerforce, Published on July 15th, 2011 by Quinton Wall
jQuery Mobile – adding Local Storage Tutorial Coldfusion Jedi, Published on July 13th, 2011 by Raymond Camden
Using and customizing jQuery Mobile themes Tutorial Article Adobe Developer Connection, Published on July 11th, 2011 by Matthew David
Using Linked Data and jQuery Mobile to produce a podcast explorer web app Tutorial greenhughes.com, Published on 9 July 2011 by Liam Green-Hughes
Building a jQuery Mobile HTML5 App with PhoneGap for Drupal 7, Part 2 – Camera Tutorial Jeff Linwood, Published on July 8th, 2011 by Jeff Linwood
Building a jQuery Mobile HTML5 App with PhoneGap for Drupal 7, Part 1 Tutorial Jeff Linwood, Published on July 7th, 2011 by Jeff Linwood
How to style buttons with jQuery Mobile Tutorial O’Reilly Answers, Published on June 28th, 2011 by chco
50 jQuery Mobile Development Tips Tutorial jQuery4u, Published on May 31st, 2011 by jquery4u
Dreamweaver 5.5 with jQuery Mobile support Video Adobe TV, Published on April 10th, 2011
Video of Boston PHP conference with Todd Parker and Scott Jehl Video Presentation Boston PHP, Published on March 14th, 2011 by Michael Bourque
Building an offline capable mobile web site with jQuery Mobile Tutorial Article Coldfusion Jedi, Published on March 12th, 2011 by Raymond Camden
Adding driving directions to a jQuery Mobile web site Tutorial Coldfusion Jedi, Published on March 9th, 2011 by Raymond Camden
jQuery Mobile: It’s Hot Presentation Coldfusion Jedi, Published on March 4th, 2011 by Raymond Camden
jQuery Mobile and JSON Tutorial IBM Developer Works, Published on March 1st, 2011 by Frank Ableson
Dynamically Appending Elements to jQuery Mobile ListView Tutorial Web Dev .NET, Published on February 24th, 2011 by Elijah Manor
Creating and using custom icons in jQuery Mobile Tutorial andymatthews.net, Published on February 13th, 2011 by Andy Matthews
Building with jQuery Mobile: Slides from a talk by Todd Parker and Scott Jehl Presentation Filament Group, Published on February 11th, 2011 by Filament Group
jQuery Mobile Form Validation Tutorial Web Dev .NET, Published on February 7th, 2011 by Elijah Manor
Use jQuery Mobile to Build a Native Android News Reader App Tutorial Mobile Tuts, Published on February 2nd, 2011 by Konur Unyelioglu
Build a Contacts Application With jQuery Mobile & the Android SDK – Part 1 Tutorial Mobile Tuts, Published on February 2nd, 2011 by Konur Unyelioglu
Top 10 jQuery Mobile Code Snippets that you need to know Tutorial Web Development Blog, Published on January 31st, 2011 by Ei Sabai Nyo
jQuery Mobile Framework – A Forms Tutorial Tutorial Mobile Tuts, Published on January 19th, 2011 by Konur Unyelioglu
Extend your SAP jQuery Mobile web app with HTML5 concepts and Native device features – Part 1 Tutorial Video SAP Community Network, Published on January 17th, 2011 by John Moy
Using Google Analytics with jQuery Mobile Tutorial Article jongales.com, Published on January 10th, 2011 by JG
Mobile Development with jQuery Mobile and PhoneGap Presentation Petefreitag.com, Published on January 10th, 2011 by Pete Freitag
Building Mobile Apps with WebMatrix and jQuery Mobile Tutorial Article Mikesdotnetting, Published on December 12th, 2010 by Mikesdotnetting
jQuery Mobile + CouchDB: P7 Part Series Tutorial Todd Anderson, Published on December 8th, 2010 by Todd Anderson
jQuery Mobile Quick Start Guide Tutorial Coldfusion Jedi
How to create a mobile WordPress theme with jQuery Mobile Tutorial Cats who code, Published on November 16th, 2010 by Jean-Baptiste Jung
jQuery Mobile: What Can It Do for You? Tutorial Article Elated, Published on November 5th, 2010 by Matt Doyle
Creating mobile web applications with jQuery mobile and Grails Tutorial train of thought, Published on October 31st, 2010 by Omar Marji
What jQuery Mobile Means for Developers Article Elated, Published on October 18th, 2010 by Sarah Perez
ResourcesResources
© 2010-12 The jQuery Foundation
Sponsored by Media Temple, Mobile Project Sponsors and Others.
http://jquerymobile.com/resources/Samstag, 5. Mai 12
Vielen Dank
Samstag, 5. Mai 12
Kontaktdaten• Mail
• https://www.xing.com/profile/Peter_Hecker
• https://www.facebook.com/peter.hecker65
• @itweiterbildung
Samstag, 5. Mai 12