CoboCards App FAQ & Wishes Feedback
Language: English Language
Sign up for free  Login

Get these flashcards, study & pass exams. For free! Even on iPhone/Android!

Enter your e-mail address and import flashcard set for free.  
Go!
All main topics / Interaktive Medien / Mobile Websites

IntMe_MobileWebsites (39 Cards)

Say thanks
1
Cardlink
0
»the Mobile Web is the Wild West« Herausforderungen:
- Viele Betriebssysteme
- Viele Browser
- Viele Hardware-Hersteller
- Viele Bildschirmgrössen
- Viele Auflösungen (z. B. Retina-Display)
- Viele Hard- und Softwarefunktionen, wie z. B. GPS oder Rotation
2
Cardlink
0
Adaptiv oder responsive?
3
Cardlink
0
Vorgehen
% für Container benutzen



Beispiel:



4
Cardlink
0
Grundlagen
- Nur JPG, PNG oder GIF verwenden
- JPG immer optimieren, z.B. mit jpegmini
- PNG optimieren mit kraken.io
5
Cardlink
0
Responsive Bilder



6
Cardlink
0
Responsive Hintergrundbilder
7
Cardlink
0
Retina Displays
Hochaufgelöste Bilder werden auf HiDPI-Displays (Retina) in hoher Präzision wiedergegeben.

Der Bedarf an Bandbreite ist vier Mal höher.

Ein Bild in Standardauflösung sieht auf einem Retina-Bildschirm unscharf aus. Fehlende Pixel müssen interpoliert werden.

Die Gerätepixel entsprechen nicht den CSS-Pixeln. Wenn man CSS- und Gerätepixel gleichsetzt, wäre die Darstellung zu klein.


8
Cardlink
0
Einige Pixeldichten
9
Cardlink
0
Skalieren von Bildern: Lösungsstrategien
1. Lösung mit HTML und CSS Sizing
Doppelt so grosse Grafik erzeugen und diese mit CSS verkleinern

<img src="bild300px.jpg" width="150" height="150">

oder

.bild {
  background-image: url(bild300px.jpg);
  background-size: 150px 150px;
}

Vorteil: Einfache Implementierung
Vorteil: Für Bilder und Hintergrundbilder anwendbar

Nachteil: Für alle Geräte dieselbe Datenmenge
10
Cardlink
0
Skalieren von Bildern: Lösungsstrategien


11
Cardlink
0
Skalieren von Bildern: Lösungsstrategien
12
Cardlink
0
Skalieren von Bildern: Lösungsstrategien
13
Cardlink
0
Skalieren von Bildern: Lösungsstrategien
14
Cardlink
0
Skalieren von Videos
15
Cardlink
0
Lösung für Youtube-Video ohne jQuery
16
Cardlink
0
Relative iFrame-Höhe berechnen
17
Cardlink
0
Zukunft
Geplant ist der <picture>- und/oder das srcset-Attribut





(Die Zahlen beziehen sich auf die Auflösungsdichte)
18
Cardlink
0
Retina Displays
Hochaufgelöste Bilder werden auf HiDPI-Displays (Retina) in hoher Präzision wiedergegeben.

Der Bedarf an Bandbreite ist vier Mal höher.

Ein Bild in Standardauflösung sieht auf einem Retina-Bildschirm unscharf aus. Fehlende Pixel müssen interpoliert werden.

Die Gerätepixel entsprechen nicht den CSS-Pixeln. Wenn man CSS- und Gerätepixel gleichsetzt, wäre die Darstellung zu klein.


19
Cardlink
0
Was muss man sonst in Betracht ziehen?
- Benutzerführung muss einfach, schnell und unkompliziert sein
- Mobile Netzwerke haben limitierte Kapazität oder Bandbreite
- Ziele der Anwender und ihr Verhalten herausfinden


20
Cardlink
0
Mobile Betriebssysteme
Microsoft Windows Phone 8.0
Basiert auf Windows 8 (ab 2002)

Android 1X, 2.X, 3.X, 4.X (im Moment 4.4.2)
Android wurde von der OHA (Open Handset Alliance) und Google entwickelt und basiert auf dem Linux Betriebssystem (ab 2008)

Research In Motion Version 10.2
Die Blackberry Mobiles für Business Anwendungen basieren auf dem Betriebssystem Research In Motion (RIM) (ab 2006)

iOS 7.1
Das Unix Betriebssystem iOS (früher iPhone OS) von Apple basiert auf Mac-OS-X und gibt es ausschliesslich für iPhone, iPad, iPad Mini und den iPod Touch (ab 2007)

Symbian OS (Symbian Belle)

Nokia, Sony Ericsson, Motorola, LG und verwenden dieses weit verbreitete Betriebssystem. Per April 2011 wurde die Symbian Foundation aufgelöst und die Tage dieses Betriebssystems sind gezählt (ab 2008)

Tizen 2.1 (MeeGo, Moblin, Maemo) (ab 2005)
Nokia verwendete Maemo für seine Highend Mobilegeräte. Ursprünglich sollte dieses Betriebssystem das Symbian OS ablösen. 2010: Zusammenarbeit Intel (Moblin) und Nokia => MeeGo
2011: Windows 8 als Standard bei Nokia
2011: MeeGo und Linux Mobile (LiMo) =>Tizen

WebOS 3.05
Die Firma Palm verwendet diese Linux Plattform für ihre PDAs. Wurde von HP ausgekauft (ab 2009)
2011: Einstellung der Entwicklung
2012: WebOS als Open-Source-Software
2013: An LG verkauft für den Einsatz auf Smart-TVs

Bada 2.0

Von Samsung entwickeltes Betriebssystem Bada, für welches diverse Apps zur Verfügung stehen (ab 2009)

Firefox OS 1.2
Betriebssystem, vollständig nach offenen Webstandards gebaut (ab 2013)

21
Cardlink
0
Mobile Browser
jB5: Symbian, Windows Mobile
- Polaris: Samsug, LG
- Android (Webkit): Android Geräte
- WebOS (Webkit): Palm
- Blackberry: Blackberry, Webkit ist angekündigt
- Blazor: Palm
- Firefox for Mobile: für Maemo, Windows Mobile und Android
- Internet Explorer Mobile: Diverse Hersteller mit Windows Mobile - Opera Mobile: Verschiedene Hersteller
- Opera Mini (läuft auf praktisch allen Plattformen)
Ruft nicht direkt Website auf, sondern kontaktiert den Opera Mini Server, welcher die Seite komprimiert und vor-rendert
- Nokia Series 40 (Webkit): Nokia S40; Nokia Series 60
- Safari (Webkit): iPhone, iPod, iPad, iPad Mini
- Dolphin Browser HD (Android)
- Mercury Browser (iPhone, Android)
- xScope Browser (Android)
22
Cardlink
0
Browser vs Rendering-Engine
- Gecko, die Rendering-Engine vom Mozilla Firefox wird sich ev. ändern: Mozilla (und Samsung) Servo

- Presto, die Rendering-Engine von Opera
13. Februar 2013 Ankündigung Opera: setzen auf WebKit
03. April 2013 Ankündigung Google: setzen auf Engine Blink
03. April 2013 Ankündigung Opera: setzen auf Engine Blink

- Trident, die Rendering-Engine des Internet Explorer
- WebKit, die Rendering-Engine von Safari und Chrome(?)
- Blink: neue Rendering Engine von Google (Chrome) und Opera
23
Cardlink
0
WebKit Standard Browser
24
Cardlink
0
Browser Erkennung
25
Cardlink
0
Mobile Bildschirmauflösungen
Einige Bildschirm-Auflösungen
26
Cardlink
0
Mobile Standards


27
Cardlink
0
Welche CSS verwenden wir?
Wir verwenden CSS2 und CSS3
28
Cardlink
0
Viewport – Bildschirmdarstellung







29
Cardlink
0
Viewports
Erlauben das Beeinflussen der Bildschirmdarstellung


Beispiel und empfohlener Eintrag

<meta name="viewport" content="width=device-width,
initial-scale=1.0, minimum-scale=1.0,user-
scalable=yes" />
30
Cardlink
0
Strategien für Mobile Programmierung 1.



31
Cardlink
0
Strategien für Mobile Programmierung 2.
32
Cardlink
0
Strategien für Mobile Programmierung 3.


33
Cardlink
0
Apps vs Web-Apps?
34
Cardlink
0
Strategien für HTML-Programmierung
1. Strategie: Keine Änderungen vornehmen, nur Optimierungen
Auf den Mobiles und dem Desktop werden dieselben Inhalte und Formatierungen zur Verfügung gestellt. Diese Strategie ist erfolgreich, wenn folgende Annahmen getroffen werden:


- Bandbreiten sind kein Thema in Bezug auf Kosten und Geschwindigkeiten
- Intelligente Browser reagieren auf das Darstellungsgerät
- Die Wünsche der mobilen Benützer sind nicht so wichtig

Mögliche Optimierungen
- Nicht unterstützte HTML-Befehle (wie Frames etc.) entfernen
- Grösse der Links anpassen (mindestens 44 Pixel)
- Überprüfung der Bildgrössen (Kilobytes)

Kritik
Nicht zu empfehlen. Zu viele Anwender verwenden Mobiles
35
Cardlink
0
Strategien für HTML-Programmierung
2. Strategie: Separate mobile Webseiten

Für die Smartphones gibt es völlig andere Webseiten (HTML, CSS, Bilder etc.)

- Inhalt anders angeordnet: Navigation unten, Inhalt oben
- Optimierte Bilder: kleine optimierte Bilder
- Struktur: Unwichtige Inhalte nur via Link erreichbar
- Besondere Inhalte für das Smartphone: ortsbezogene Werbung
- Es gibt zwei verschiedene Varianten der Website (Inhalt und Gestaltung)

Fragen
Wie wird bestimmt, was der Nutzer der mobilen Version braucht? Oft gibt es Links, wie «View Full Site» oder «Desktop Site»

Wie erkenne ich ein mobiles Gerät?
Über den User Agent

Kritik
- Nicht zu empfehlen. Aufwand, um Inhalt und Gestaltung doppelt zu warten ist zu hoch.
- Die Detection mit dem User Agent ist fehleranfällig
36
Cardlink
0
Strategien für HTML-Programmierung
3. Strategie: Progressive Enhancement und Feature Detection
Auf den Mobiles und dem Desktop werden ähnliche Inhalte und Formatierungen zur Verfügung gestellt. Dazu teilen wir die Browser in verschiedene Kategorien auf. Beispiel:


- Kategorie 1: Browser hat keine CSS-Unterstützung
- Kategorie 2: Browser hat limitierte CSS-Unterstützung
- Kategorie 3: Browser hat CSS Mobile Profile Unterstützung
- Kategorie 4: Browser hat CSS2-Unterstützung
- Kategorie 5: Browser hat CSS3-Unterstützung


Vorgehen


- Für das Herausfinden der Bildschirmgrössen können Media Queries und Media Features verwendet (MediaQuery Spezifikation) werden.

- Für das Herausfinden der unterstützten Funktionen kann Modernizer verwendet werden.

- Die Weiterentwicklung dieses Gedankens führt zum Responsive Webdesign (RWD)
37
Cardlink
0
Strategien für HTML-Programmierung
4. Strategie: Mobile WebApps


38
Cardlink
0
App: native, hybrid, HTML, Web
39
Cardlink
0
Werkzeuge für das Testen von Sites
Flashcard set info:
Author: CoboCards-User
Main topic: Interaktive Medien
Topic: Mobile Websites
Published: 18.06.2014
 
Card tags:
All cards (39)
no tags
Report abuse

Cancel
Email

Password

Login    

Forgot password?
Deutsch  English