+ All Categories
Home > Internet > Online / Offline

Online / Offline

Date post: 08-Aug-2015
Category:
Upload: peter-rozek
View: 367 times
Download: 2 times
Share this document with a friend
73
Peter Rozek @webinterface ONLINE OFFLINE Webinale 2015, 07. - 11. Juni 2015
Transcript
Page 1: Online / Offline

Peter Rozek@webinterface

ONLINE OFFLINEWebinale 2015, 07. - 11. Juni 2015

Page 2: Online / Offline

PETER ROZEK

Arbeite bei ecx.io (Digital Agentur)

Themengebiete: UX

Usability Accessibility

Frontend

Peter Rozek@webinterface

Page 3: Online / Offline

@webinterface „Ajax-vergleich“ von I, DanielSHaischt: wikimedia.org

AJAX Revolution

Page 4: Online / Offline

Bildnachweis: Instragram gingergibson@webinterface

Heute sind wir immer Online!

Page 5: Online / Offline

Sind wir immer Online?

@webinterface

No connection available

Page 6: Online / Offline

„We can’t keep building apps with the desktop mindset of permanent, fast connectivity, where a temporary disconnection or slow service is regarded as a problem and communicated as an error.“

Offline First by Team Hoodie

@webinterface

Page 7: Online / Offline

Desktop Performance„Wahnsinnige“ Geschwindigkeit

@webinterface Bildnachweis: starwars.gamona.de

Page 8: Online / Offline

@webinterface

Mobile Performance

Langsame Geschwindigkeit

Page 9: Online / Offline

@webinterface Bildnachweis: quazoo.com

Wir hätten gerne eine Zeitgemäße Website.

Page 10: Online / Offline

@webinterface

…so was zum Beispiel

Page 11: Online / Offline

@webinterface

…und Responsive

Page 12: Online / Offline

Es werden viel zu große und langsame Websites entwickelt.

@webinterface http://moto.oakley.com/

Page 13: Online / Offline

85.4MB und 471 HTTP requests

@webinterface http://moto.oakley.com/

Page 14: Online / Offline

@webinterface

Nach der Optimierung14.2MB und 291 request

Page 15: Online / Offline

@webinterface

Applikationen sollten schnell und Performant sein.

Bildnachweis: www.srf.ch

Page 16: Online / Offline

@webinterface

Warten ist kognitiver Stress

Page 17: Online / Offline

@webinterface

Keine Verzögerung

spürbar

> 100ms > 1s > 10s

Aufmerksamkeit schwindet

Arbeitsfluss wird nicht

gestört

Nielsens Heuristik Wahrnehmung von Antwortzeiten

Page 18: Online / Offline

@webinterface

Schlimmer als Warten ist Ungewissheit.

Page 19: Online / Offline

PerfomanceOptimierung

@webinterface

Page 20: Online / Offline

@webinterface

Conditional Loading

Page 21: Online / Offline

@webinterface

Problem: Alle Inhalte werden geladen

Page 22: Online / Offline

@webinterface

Lösung:Conditional Loading

Desktop Inhalte laden

Mobile Inhalte laden

Page 23: Online / Offline

@webinterface

if (window.matchMedia("(min-width:768px)").matches) {

// der Viewport ist mindestens 768px breit

} else {

// der Viewport ist kleiner als 768px

}}

matchMedia()

matchMedia Polyfill

Page 24: Online / Offline

@webinterface

Modernizr.load({

test: Modernizr.localstorage,

yep : 'storage.js',

nope: 'storage-polyfill.js'

});

Eleganter mit Modernizr

Page 25: Online / Offline

@webinterface

Ajax Include Pattern SkriptZusätzliche Inhalte werden ab einer bestimmten Bildschirmgröße automatisch geladen.

Bei kleineren Bildschirmen können zusätzliche Inhalte per Klick geladen werden.

Bildnachweis: filamentgroup.com

Page 26: Online / Offline

@webinterface

<div>

<h2 data-after="links.html"

data-media=„(min-widht: 40em)“>

<a href=„links.html“>Ergänzende Inhalte</a>

</h2>

</div>

Ajax Include Pattern Skript

data-after = Verweis auf die Datei die geladen werden solldata-media = Direktes laden ab einem bestimmten Media Query

Page 27: Online / Offline

@webinterface

The Boston Globe

Page 28: Online / Offline

@webinterface

The Boston Globe

Page 29: Online / Offline

@webinterface

Voraussetzung: Content First Mobile First

Page 30: Online / Offline

@webinterface

Lazy Loading

Page 31: Online / Offline

@webinterface

Lazy Loading mit jQuery Unveil

Unveil.js = 1kb groß

Page 32: Online / Offline

@webinterface

<img src="bg.png" data-src="img1.jpg" />

<img src="bg.png" data-src="img2.jpg" data-src-retina="img2-retina.jpg" />

Eleganter mit Modernizr

Page 33: Online / Offline

@webinterface

<img src="example.jpg" lazyload="1" />

Lazy Loading als W3C Standard

Page 34: Online / Offline

@webinterface

Picture TagResponsive Images

Page 35: Online / Offline

@webinterface

img {

max-width: 100%;

height: auto;

}

Bisherige Technik

Page 36: Online / Offline

@webinterface

Responsive Bilder mit dem picture-Element

Berücksichtigt folgende unterschiede: • Auflösung • Abmessung für verschiedene Viewport-Größen • Bildausschnitte, Seitenverhältnisse oder Motive • Dateiformate

Page 37: Online / Offline

@webinterface

<picture>

<source media="(min-width: 1024px)" srcset="large.jpg 1x, [email protected] 2x">

<source media="(min-width: 768px)" srcset="madium.jpg 1x, [email protected] 2x">

<source srcset="small.jpg 1x, [email protected] 2x">

<img src="static/images/dummy/fallback.jpg">

</picture>

Page 38: Online / Offline

@webinterface

Can i use?

Page 39: Online / Offline

Polyfill für Picture Tag: Picturefill

@webinterface

Page 40: Online / Offline

@webinterface

Alles Techniken um die Performance zu verbessern!

Page 41: Online / Offline

No ConnectionDaten Offline speichern

@webinterface

Page 42: Online / Offline

@webinterface

Cookies ?

Page 43: Online / Offline

@webinterface

Eingeschränkte Nutzung der Daten

Anzahl und Größe limitiert

Problem: Daten für eine Anwendung  dauerhaft offline speichern.

Page 44: Online / Offline

@webinterface

LocalStorage

Page 45: Online / Offline

@webinterface

Die User-Daten werden nicht mehr wie Cookies mit jedem HTTP-Request auf den Server übertragen.

Page 46: Online / Offline

@webinterface

HTML5 und LocalStorage

localStorage.setItem("key", „wert");

localStorage.getItem("key");

Page 47: Online / Offline

@webinterface

Formularverarbeitung

<form onsubmit="daten_speichern(); return false">

<input type="text" name="vorname" />

</form>

Page 48: Online / Offline

@webinterface

Daten speichern

function daten_speichern() {

localStorage.setItem("vorname", document.forms[0]["name"].value);

}

Page 49: Online / Offline

@webinterface

Daten ausgeben

function daten_ausgeben() {

document.getElementById("vorname").firstChild.nodeValue = localStorage.getItem("vorname");

}

Page 50: Online / Offline

@webinterface

LocalStorage für Offlinebetrieb

navigator.onLine

Page 51: Online / Offline

@webinterface

window.addEventListener('load', function() {

var status = document.getElementById("status");

function updateOnlineStatus(event) {

var condition = navigator.onLine ? "online" : "offline";

status.className = condition;

status.innerHTML = condition.toUpperCase();

log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition);

}

window.addEventListener('online', updateOnlineStatus);

window.addEventListener('offline', updateOnlineStatus);

});

"online" und "offline" Events

Page 52: Online / Offline

@webinterface

<div id="status"></div>

<div id="log"></div>

<p>This is a test</p>

HTML

Page 53: Online / Offline

@webinterface

Ergebnis

Page 54: Online / Offline

@webinterface

AppCache

Page 55: Online / Offline

@webinterface

HTML5 AppCache für WebApps und Websites.

Page 56: Online / Offline

@webinterface

Vorteile:

Offline surfen

Ressourcen sind lokal verfügbar und laden schnelle

Verminderte Serverlast

Page 57: Online / Offline

@webinterface http://alistapart.com

Page 58: Online / Offline

@webinterface

Wie funktioniert der HTML5 AppCache?

Browser sucht in der Website nach einem Verweis auf ein entsprechendes AppCache Manifest.

Page 59: Online / Offline

@webinterface

<html manifest="mein_offline_manifest.appcache">

...

</html>

Page 60: Online / Offline

@webinterface

Hat der Browser alle Dateien im AppCache gespeichert, holt er die Dateien nicht mehr vom Server.

Page 61: Online / Offline

@webinterface

Problem

AppCache hat kein Verfallsdatum

AppCache wird neu erzeugt wenn sich die Manifest-Datei ändert.

Aber erst nach „Aktualisieren-Button“

Page 62: Online / Offline

@webinterface

window.addEventListener('load', function(e) {

window.applicationCache.addEventListener('updateready', function(e) {

if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {

if (confirm('A new version of this site is available. Load it?')) {

window.location.reload();

}

} else {

// to do Stuff

}

}, false);

}, false);

Update mit JavaScript prüfen

Page 63: Online / Offline

@webinterface

Problem

Im Manifest werden zwei Dateien geladen: index.html und style.css

Was ist mir JavaScript

Page 64: Online / Offline

@webinterface

Lösung

Einstellungen im Manifest damit der Browser auch JavaScript kennt.

Page 65: Online / Offline

@webinterface

Neues Problem

Externe Scripte

Page 66: Online / Offline

@webinterface

Lösung CACHE: Ressourcen die der Browser in den AppCache laden soll.

NETWORK: Ressourcen die online abgerufen werden sollen.

FALLBACK: z.B. für dynamische Scripte

Page 67: Online / Offline

Resumé

@webinterface

Page 68: Online / Offline

@webinterface

„Don’t listen to naysayer“

Page 69: Online / Offline

@webinterface

Content First Mobile First Offline First

Page 70: Online / Offline

Vielen Dank und Merciemail: [email protected]

Peter Rozek@webinterface

Speaker Deck: https://speakerdeck.com/peterrozek

Slideshare: http://de.slideshare.net/peterrozek

Page 71: Online / Offline

@webinterface

…für meine Ellen

Page 72: Online / Offline

@webinterface

Fragen?

Page 73: Online / Offline

Peter Rozek@webinterface

Online / Offline

Peter Rozek, 09.06.2015 Berlin


Recommended