Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter

Medienprodukte

Alexej AntropovDezember 2013

Einfluss der Endgeräte-Innovationen auf technische Realisierung netzbasierter

Medienprodukte1990 – 2010:

•Vielfalt der Geräteklassen nimmt zu•Grenzen der Geräteklassen verschwimmen•Q1/2013: 42,5 % der Mobiltelefone sind Smartphones•Prognose USA bis 2017: +45% Tablet-Nutzer;

+48% Smartphone-Nutzer

Vom PC über Handy zu Smartphone und Laptop

2010 – 2013:

Statistiken aus: Studie Mobile Effects 2013-1; Tomorrow Focus Media

Einfluss der Endgeräte-Innovationen auf

technische Realisierung netzbasierter Medienprodukte

Digitale Medien: komplexe Produkte, die aus vielen Einzelbestandteilen bestehen, die einzeln produziert und in einem gemeinsamen Rahmen integriert werden müssen.

Netzbasierte Medienprodukte:digitale Medienangebote wie z. B. Lernsysteme, Nachschlagwerke, Spiele, Webauftritte, elektronische Handelsplattformen, etc.

Definitionen in Anlehnung an: Malaka, R., Butz A., Hußmann H. (2009): Medieninformatik, eine Einführung

es geht um:

WebseitenMobile Webseiten

Apps

SPIEGEL Online FOM.de

Einfluss der Endgeräte-Innovationen auf

technische Realisierung netzbasierter Medienprodukte

Autorenwerkzeug

Autorenwerkzeug

Wiedergabe-programm

Wiedergabe-programm

Medienobjekt

(Datei(en))

Medienobjekt

(Datei(en))

Netzbasierte Medienprodukte unterscheiden sich in der technischen Realisierung grundlegend von anderen Produkten:

In Anlehnung an: Malaka, R., Butz A., Hußmann H. (2009): Medieninformatik, eine Einführung

•Webbrowser•Applikation

•Backend•Content Mangement System

Wiedergabe-Gerät

Wiedergabe-Gerät

•PC / Laptop•Tablet•Smartphone•TV•...

Endgeräte-Innovationen haben Einflus auf...

...Interfaces!...Applikation!

...Qualitätssicherung!

...Lifecycle Costs!

Neue Programmiersprachen

Anwendung der Programmiersprachen

Abbildungen aus: Malaka, R., Butz A., Hußmann H. (2009): Medieninformatik, eine EinführungStatistiken: World Wide Web Technology Surveys, w3techs.org

developer.apple.com; developer.android.com

WebWahlweise:81% PHP18% ASP.NET3% Java

89% JavaScript16% Flash

Development Kitsfrei wählbar

Web iOSWahlweise:81% PHP18% ASP.NET3% Java

Vorgabe:Objective-CCocoa (API)AppleScript

89% JavaScript16% Flash

Development Kits frei wählbar iOS SDK

Web iOS AndroidWahlweise:81% PHP18% ASP.NET3% Java

Vorgabe:Objective-CCocoa (API)AppleScript

Vorgabe:Java

Alternativ:CC++

89% JavaScript16% Flash

XML

Development Kits frei wählbar iOS SDK Android

Development Kit

Für Entwicklung von Applikationen für iOS und Android müssen andere Programmier-sprachen verwendet werden!

Interfaces

Herausforderung Fragmentierung

Quellen: Mobile Effects 2013-1, tomorrow focus media; Statista; Android Fragmentation 2013, open signals;

Verdreifachung von Android-Modellen zwischen 2012 – 2013...

...auf 11.868 Geräte-Modelle!

8 Android-Versionen auf dem Markt!

Genutzte mobile Betriebssysteme

Nutzung der Betriebssysteme im Zeitverlauf

Auflösungen von Android-Geräten

Strategische Entscheidung notwendig

In Anlehnung an: http://www.analog.de/mobile-website-responsive-design-web-app-native-app/

Vorteile NachteileMobile Webseite

• jederzeit parallel zur Desktop-Version realisierbar

• Inhaltlich exakt an Bedürfnisse von Mobilnutzern anpassbar

• läuft auf allen Plattformen

• Erhöhter Pflegeaufwand• Gleicher Content unter

verschiedenen URLs

Web-Applikation

• App-Feeling• jederzeit parallel zur Desktop-

Version realisierbar• läuft auf allen Plattformen

• Für User schwierig auffindbar, da nicht in App-Stores

• Nutzung nativer Funktionen (Telefon, GPS, Kamera,...) eingeschränkt möglich

Native Applikation

• App-Feeling• Über die verschiedenen App-

Stores zu beziehen• Nutzung nativer Funktionen

(Telefon, GPS, Kamera, ...) möglich

• jederzeit parallel zur Desktop-Version realisierbar

• Apps müssen für unterschiedliche Plattformen entwickelt werden (Android, iOS, Win8,...)

• Updates müssen für alle Plattformen ausgerollt werden

• Hoher Preis

Responsive Webseite

• Gleicher HTML-Code wie Desktop-Version

• Kein zusätzlicher Pflegeaufwand• Läuft auf allen Plattformen• Einheitliche URLs

• hoher Aufwand für Nachrüstung bestehender Websites

• Änderungen müssen für alle Auflösungen vorgenommen werden

• erhöhter Konzeptionsaufwand („mobile first“)

Trend: responsive Webdesign

breakpoint 1 breakpoint 2

viewport > X X > viewport > Y Y < viewport

Die Breakpoints für Viewport (=sichtbarer Bereich im Browser-Fenster) werden gesetzt und nach Über/Unterschreiten dieser, passt sich das Design an :

• Responsive Design ist keine Technologie. Es ist eine Design- und Umsetzungsmethode rund um Media Queries von CSS3 oder Manipulierung des DOM per JavaScript.

• Bedeutung innerhalb von 2 Jahren stark gestiegen. Große Marken und Verleger setzen darauf, u. a. Starbucks, Disney, Google, Microsoft, ESPN, The Bosten Globe, AOL, Time.

Vorteile von responsive Webdesign überwiegen

Vorteile von Responsive Design:•Eine Applikation/Instanz ist weniger wartungsintensiv als Desktop-Version + mobile Version•Einheitliche URLs steigern organischen Suchmaschinentraffic•Social Sharing ist benutzerfreundlicher•Barrierefreiheit!

Herausforderungen in der Realisierung:•Ältere Browser unterstützen keine CSS Media Queries•Anwender können JavaScript deaktivieren•Bilderauslieferung ohne unnötige Bandbreite zu verschwenden•Eindeutige technische Unterscheidung der Geräteklasse nicht (einfach) möglich. Useragent beinhaltet u. a Geräte-Bezeichnung, Auflösung, Pixelratio aber nicht Geräteklasse!•Werbeauslieferung nicht einfach, da AdServer-Anbieter in der Anpassung zu langsam. Bislang nur Workarounds möglich

Qualitätssicherung & Lifecycle-Costs

Herausforderung: Vielfalt und Zukunft

+ Modelle!

+ Versionen

Browser

...gestern heutemorgen...

Betriebssysteme

Geräte

+ Versionen! + Zeitfaktor!

Abwärts-kompatibilit

ät ...?

Abwärts-kompatibilit

ät ...?

morgen veraltet...?

morgen veraltet...?

Fazit• zuerst: Endgeräte- und Technologieinnovationen = Technology-Push• kurz darauf: Technologie-Marktführer schaffen innovative netzbasierte

Medienprodukte • implizit werden Erwartungen der Anwender zu Anforderungen an alle

Medienprodukte = Market-Pull• stetiger Prozess wegen sehr kurzen Innovationszyklen (wenige Monate)

Technology-PushTechnology-Push

Anpassungsdruck:

Herausforderung und Chance

Anpassungsdruck:

Herausforderung und Chance

Technology-PushTechnology-PushTechnology-PushTechnology-Push Market-PullMarket-PullMarket-PullMarket-PullMarket-PullMarket-Pull

Vielen Dank für die Aufmerksamkeit!

Verwendete Quellen:Malaka, R., Butz A., Hußmann H. (2009): Medieninformatik, eine Einführung

Spath, D., et. al. (2011): Technologiemanagement – Grundlagen, Konzepte, Methoden Maurice, F. (2012): Mobile Webseiten – Strategien, Techniken, Dos und Don‘ts für Webentwickler

Studie Mobile Effects 2013-1; Tomorrow Focus Mediahttp://www.slideshare.net/fullscreen/eMarketerInc/emarketer-webinar-responsive-designa-solution-for-publishers-a-

question-for-marketers/2http://opensignal.com/reports/fragmentation-2013/fragmentation-2013.pdf

http://www.chip.de/news/Alcatel-One-Touch-Fire-Firefox-Handy-ab-90-Euro_60726398.htmlwww.w3techs.com