View
2.680
Download
0
Category
Preview:
DESCRIPTION
Bei der Implementierung von small Screen Websites, über hybride Apps, bis hin zu rein nativen Enterprise Anwendungen begegnet man verschiedensten technischen Herausforderungen. Dabei versprechen HTML5 und CSS3 Flexibilität, wie auch Portabilität. Die Einbindung von Lösungen wie ERP, CRM etc. ist bei Enterprise Applikationen unabdingbar.
Citation preview
Die Reise des Mobile Content. Namics.
Bernd Jansen. Technical Architect.Alexander Maier. Senior Software Engineer.
28. März 2012.
Technologie. Architektur. Innovation. Namics.
Mobile. Eisberg.
• Content Management• Device Fragmentation• Application Integration• Support Functions
• Mobile Website• Mobile App
Technologie. Architektur. Innovation. Namics.
Agenda.
1. Responsive Layout2. Dediziertes Mobile Web3. Native App4. Hybrid App
Technologie. Architektur. Innovation. Namics.
Responsive.
Small Screen Large Screen
Technologie. Architektur. Innovation. Namics.
Responsive. Beispiele.
Technologie. Architektur. Innovation. Namics.
Technologie. Architektur. Innovation. Namics.
Responsive. Technologie.
• Web Standards• Flexible Grid• Media Queries• Mobile Frameworks• Content Management
Technologie. Architektur. Innovation. Namics.
CSS3. Media Queries.
• Max Width • Min Width • Device Width• Orientation • Pixel Ratio
Technologie. Architektur. Innovation. Namics.
Responsive. Architektur.
Browser
Content DeliveryResponsive Layout
Technologie. Architektur. Innovation. Namics.
Responsive. Architektur.
Content DeliveryResponsive Layout
Browser
Content Management
Content
Technologie. Architektur. Innovation. Namics.
Mobile Web.
Mobile Browser
Technologie. Architektur. Innovation. Namics.
Mobile Web. Beispiele.
Technologie. Architektur. Innovation. Namics.
Mobile Web. Technologie.
• Web Standards• Viewport• Flexible Grid• Media Queries• Mobile Frameworks• Dedizierter Content• Device Detection
Technologie. Architektur. Innovation. Namics.
Mobile Web. Architektur.
Content DeliveryWebsite or
Mobile Website
Browser
Mobile Detection
Technologie. Architektur. Innovation. Namics.
Mobile Web. Architektur.
Content Management
Content
Mobile Content
Content DeliveryWebsite or
Mobile Website
Browser
↓
Mobile Detection
Technologie. Architektur. Innovation. Namics.
Native.
Technologie. Architektur. Innovation. Namics.
Native. Beispiele.
Technologie. Architektur. Innovation. Namics.
Native. Technologie.
• Plattformspezifisch• Hardware Access• Haptik• CRs / Updates• Interface Versioni...• X-Platform Dev.
Technologie. Architektur. Innovation. Namics.
Hybrid.
Technologie. Architektur. Innovation. Namics.
Hybrid.
Technologie. Architektur. Innovation. Namics.
Hybrid. Beispiele.
Technologie. Architektur. Innovation. Namics.
Hybrid. Technologie.
• Native Wrapper• Web Standards• Hardware Access
Best of Both Worlds!
Technologie. Architektur. Innovation. Namics.
Hybrid. Architektur.
OnlineInterface
Native App
BrowserContent
Sync
Backend Integration
Technologie. Architektur. Innovation. Namics.
Hybrid. Architektur.
ExternalInterface
OnlineInterface
ContentSync
Content Delivery
Content SyncNative App
Browser
Technologie. Architektur. Innovation. Namics.
ExternalInterface
OnlineInterface
ContentSync
Hybrid. Architektur.
Content Management
Website Content
Mobile Content
Offline ContentContent Delivery
↓
Content SyncNative App
Browser
↓
Technologie. Architektur. Innovation. Namics.
ExternalInterface
OnlineInterface
ContentSync
Hybrid. Architektur.
External Systems
ERP, CRM, etc
Content Management
Website Content
Mobile Content
Offline ContentContent Delivery
Integration Layer
↓
Content SyncNative App
Browser
↓
Technologie. Architektur. Innovation. Namics.
ExternalInterface
OnlineInterface
ContentSync
Hybrid. Architektur.
External Systems
ERP, CRM, etc
Content Management
Website Content
Mobile Content
Offline ContentContent Delivery
Integration Layer
↓
Content SyncNative App
Browser
↓
Technologie. Architektur. Innovation. Namics.
Weiteres.
DistributionLocation based Data HandlingOfflineStrong AuthenticationAnalyticsTransactions (offline)Personalization
Danke.
bernd.jansen@namics.comalexander.maier@namics.com
Responsive Layout.Dediziertes Mobile Web.Native App.Hybrid App.
Recommended