die reise des mobile content
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.TRANSCRIPT
![Page 1: Die Reise des Mobile Content](https://reader030.vdocuments.site/reader030/viewer/2022020306/554d0aaeb4c905805d8b4ac2/html5/thumbnails/1.jpg)
Die Reise des Mobile Content. Namics.
Bernd Jansen. Technical Architect.Alexander Maier. Senior Software Engineer.
28. März 2012.
![Page 2: Die Reise des Mobile Content](https://reader030.vdocuments.site/reader030/viewer/2022020306/554d0aaeb4c905805d8b4ac2/html5/thumbnails/2.jpg)
Technologie. Architektur. Innovation. Namics.
Mobile. Eisberg.
• Content Management• Device Fragmentation• Application Integration• Support Functions
• Mobile Website• Mobile App
![Page 3: Die Reise des Mobile Content](https://reader030.vdocuments.site/reader030/viewer/2022020306/554d0aaeb4c905805d8b4ac2/html5/thumbnails/3.jpg)
Technologie. Architektur. Innovation. Namics.
Agenda.
1. Responsive Layout2. Dediziertes Mobile Web3. Native App4. Hybrid App
![Page 4: Die Reise des Mobile Content](https://reader030.vdocuments.site/reader030/viewer/2022020306/554d0aaeb4c905805d8b4ac2/html5/thumbnails/4.jpg)
Technologie. Architektur. Innovation. Namics.
Responsive.
Small Screen Large Screen
![Page 5: Die Reise des Mobile Content](https://reader030.vdocuments.site/reader030/viewer/2022020306/554d0aaeb4c905805d8b4ac2/html5/thumbnails/5.jpg)
Technologie. Architektur. Innovation. Namics.
Responsive. Beispiele.
![Page 6: Die Reise des Mobile Content](https://reader030.vdocuments.site/reader030/viewer/2022020306/554d0aaeb4c905805d8b4ac2/html5/thumbnails/6.jpg)
Technologie. Architektur. Innovation. Namics.
![Page 7: Die Reise des Mobile Content](https://reader030.vdocuments.site/reader030/viewer/2022020306/554d0aaeb4c905805d8b4ac2/html5/thumbnails/7.jpg)
![Page 8: Die Reise des Mobile Content](https://reader030.vdocuments.site/reader030/viewer/2022020306/554d0aaeb4c905805d8b4ac2/html5/thumbnails/8.jpg)
Technologie. Architektur. Innovation. Namics.
Responsive. Technologie.
• Web Standards• Flexible Grid• Media Queries• Mobile Frameworks• Content Management
![Page 9: Die Reise des Mobile Content](https://reader030.vdocuments.site/reader030/viewer/2022020306/554d0aaeb4c905805d8b4ac2/html5/thumbnails/9.jpg)
Technologie. Architektur. Innovation. Namics.
CSS3. Media Queries.
• Max Width • Min Width • Device Width• Orientation • Pixel Ratio
![Page 10: Die Reise des Mobile Content](https://reader030.vdocuments.site/reader030/viewer/2022020306/554d0aaeb4c905805d8b4ac2/html5/thumbnails/10.jpg)
Technologie. Architektur. Innovation. Namics.
Responsive. Architektur.
Browser
Content DeliveryResponsive Layout
![Page 11: Die Reise des Mobile Content](https://reader030.vdocuments.site/reader030/viewer/2022020306/554d0aaeb4c905805d8b4ac2/html5/thumbnails/11.jpg)
Technologie. Architektur. Innovation. Namics.
Responsive. Architektur.
Content DeliveryResponsive Layout
Browser
Content Management
Content
![Page 12: Die Reise des Mobile Content](https://reader030.vdocuments.site/reader030/viewer/2022020306/554d0aaeb4c905805d8b4ac2/html5/thumbnails/12.jpg)
Technologie. Architektur. Innovation. Namics.
Mobile Web.
Mobile Browser
![Page 13: Die Reise des Mobile Content](https://reader030.vdocuments.site/reader030/viewer/2022020306/554d0aaeb4c905805d8b4ac2/html5/thumbnails/13.jpg)
Technologie. Architektur. Innovation. Namics.
Mobile Web. Beispiele.
![Page 14: Die Reise des Mobile Content](https://reader030.vdocuments.site/reader030/viewer/2022020306/554d0aaeb4c905805d8b4ac2/html5/thumbnails/14.jpg)
Technologie. Architektur. Innovation. Namics.
Mobile Web. Technologie.
• Web Standards• Viewport• Flexible Grid• Media Queries• Mobile Frameworks• Dedizierter Content• Device Detection
![Page 15: Die Reise des Mobile Content](https://reader030.vdocuments.site/reader030/viewer/2022020306/554d0aaeb4c905805d8b4ac2/html5/thumbnails/15.jpg)
Technologie. Architektur. Innovation. Namics.
Mobile Web. Architektur.
Content DeliveryWebsite or
Mobile Website
Browser
Mobile Detection
![Page 16: Die Reise des Mobile Content](https://reader030.vdocuments.site/reader030/viewer/2022020306/554d0aaeb4c905805d8b4ac2/html5/thumbnails/16.jpg)
Technologie. Architektur. Innovation. Namics.
Mobile Web. Architektur.
Content Management
Content
Mobile Content
Content DeliveryWebsite or
Mobile Website
Browser
↓
Mobile Detection
![Page 17: Die Reise des Mobile Content](https://reader030.vdocuments.site/reader030/viewer/2022020306/554d0aaeb4c905805d8b4ac2/html5/thumbnails/17.jpg)
Technologie. Architektur. Innovation. Namics.
Native.
![Page 18: Die Reise des Mobile Content](https://reader030.vdocuments.site/reader030/viewer/2022020306/554d0aaeb4c905805d8b4ac2/html5/thumbnails/18.jpg)
Technologie. Architektur. Innovation. Namics.
Native. Beispiele.
![Page 19: Die Reise des Mobile Content](https://reader030.vdocuments.site/reader030/viewer/2022020306/554d0aaeb4c905805d8b4ac2/html5/thumbnails/19.jpg)
Technologie. Architektur. Innovation. Namics.
Native. Technologie.
• Plattformspezifisch• Hardware Access• Haptik• CRs / Updates• Interface Versioni...• X-Platform Dev.
![Page 20: Die Reise des Mobile Content](https://reader030.vdocuments.site/reader030/viewer/2022020306/554d0aaeb4c905805d8b4ac2/html5/thumbnails/20.jpg)
Technologie. Architektur. Innovation. Namics.
Hybrid.
![Page 21: Die Reise des Mobile Content](https://reader030.vdocuments.site/reader030/viewer/2022020306/554d0aaeb4c905805d8b4ac2/html5/thumbnails/21.jpg)
Technologie. Architektur. Innovation. Namics.
Hybrid.
![Page 22: Die Reise des Mobile Content](https://reader030.vdocuments.site/reader030/viewer/2022020306/554d0aaeb4c905805d8b4ac2/html5/thumbnails/22.jpg)
Technologie. Architektur. Innovation. Namics.
Hybrid. Beispiele.
![Page 23: Die Reise des Mobile Content](https://reader030.vdocuments.site/reader030/viewer/2022020306/554d0aaeb4c905805d8b4ac2/html5/thumbnails/23.jpg)
Technologie. Architektur. Innovation. Namics.
Hybrid. Technologie.
• Native Wrapper• Web Standards• Hardware Access
Best of Both Worlds!
![Page 24: Die Reise des Mobile Content](https://reader030.vdocuments.site/reader030/viewer/2022020306/554d0aaeb4c905805d8b4ac2/html5/thumbnails/24.jpg)
Technologie. Architektur. Innovation. Namics.
Hybrid. Architektur.
OnlineInterface
Native App
BrowserContent
Sync
Backend Integration
![Page 25: Die Reise des Mobile Content](https://reader030.vdocuments.site/reader030/viewer/2022020306/554d0aaeb4c905805d8b4ac2/html5/thumbnails/25.jpg)
Technologie. Architektur. Innovation. Namics.
Hybrid. Architektur.
ExternalInterface
OnlineInterface
ContentSync
Content Delivery
Content SyncNative App
Browser
![Page 26: Die Reise des Mobile Content](https://reader030.vdocuments.site/reader030/viewer/2022020306/554d0aaeb4c905805d8b4ac2/html5/thumbnails/26.jpg)
Technologie. Architektur. Innovation. Namics.
ExternalInterface
OnlineInterface
ContentSync
Hybrid. Architektur.
Content Management
Website Content
Mobile Content
Offline ContentContent Delivery
↓
Content SyncNative App
Browser
↓
![Page 27: Die Reise des Mobile Content](https://reader030.vdocuments.site/reader030/viewer/2022020306/554d0aaeb4c905805d8b4ac2/html5/thumbnails/27.jpg)
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
↓
![Page 28: Die Reise des Mobile Content](https://reader030.vdocuments.site/reader030/viewer/2022020306/554d0aaeb4c905805d8b4ac2/html5/thumbnails/28.jpg)
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
↓
![Page 29: Die Reise des Mobile Content](https://reader030.vdocuments.site/reader030/viewer/2022020306/554d0aaeb4c905805d8b4ac2/html5/thumbnails/29.jpg)
Technologie. Architektur. Innovation. Namics.
Weiteres.
DistributionLocation based Data HandlingOfflineStrong AuthenticationAnalyticsTransactions (offline)Personalization
![Page 31: Die Reise des Mobile Content](https://reader030.vdocuments.site/reader030/viewer/2022020306/554d0aaeb4c905805d8b4ac2/html5/thumbnails/31.jpg)