Vorlesung Backup

Buffl

Mobile Computing & IoT

von Dominik W.

Pervasive Computing

Quantified Self, Life Logging

Categories

APP BASICS:

TYPES AND EFFECTS

Underlying Computing laws for the Internet of things

Memory Model

Intimate Computing

Potential Tasks

Mobile Computing vs. Desktop Computing

Summary Grundlagen

Mobile Computing, Mobile Computers are…

Categories of App Creation Tools

Ubiquitous Computing

Basic System Model

Mobile Computing: Classes of applications

Usability vs User Experience

Ways for supporting cognitive processing

Agile method principles/process

Possibilities of Mobile Devices

Android OS Design Principles

Revised version (2014) of Nielsen’s original heuristics

Heuristics can be used to do standard checks for usability:

Chunks

Progressive Web Apps (PWA) – „native“ Web-Apps

Logical Pixels

DESIGN AND PROGRAMMING

Recognized Usability experts

Device characteristics can be accessed using the User Agent String

Dealing with device differences

()

Classification of Mobile App Creation Tools I

Bewertungsschema und –kriterien, Web App

Design Methods: Feature Card (for Mobile Computing)

Design approach: Responsive Web Design (RWD)

Fluidity

Wir haben ein Grid und innerhalb dieses Grids fließen die Elemente, falls das Grid überschritten wird, wird es größer/angepasst.

Fluid Design: So lange es die breite für 3 gibt, dann machen wir 3 hin

Vorteil: Nur eine Version der Website

Nachteil: Nur eine limitierte Scala die angepasst werden kann.

Intimate Computing: Memory Problems

CSS – Media Queries

CSS – Box Modell

Moderne Content Organisation

CSS – Einfache Selektoren

Human Computer Interaction

Proactive Computing & human memory support

CSS – Warum Kaskade?

CSS – Grundlegende Syntax

ANALYSIS: User Stories

Mobile Web-Pages

Was soll getan werden um mit dem kleineren Platz haushalterischer umzugehen:

(3. -> Fettfinger problem)

Proactive Computing: MemoClip “Cognitive Unloading”

JavaScript

Prototypen

Document Object Model (DOM)

iOS OS-Stack

NeXT Foundation Framework

Flutter - Features

Responsive Web-Design

Design: Architecture

Information Architecture vs Wireframes

Information Architecture

CSS – Pseudoklassen

CSS – Pseudoelemente

CSS – Attributselektoren

CSS – Kindselektor

CSS – Nachfahrenselektor

CSS – Nachbarselektor

Flutter System Architecture

HTML – Grundgerüst einer Seite

Software Engineering for Mobile applications

Android User Interface – Common Layouts and Views

When writing your App

target domain

senses

memory

WWW

Components

Mobile app development

Difference between mobile and non-mobile apps

HTML – Grundlegende Tags

Quantified Self vs. Gamification

Think Aloud

Practical Think Aloud

Preparing Think aloud

Architecture Sketches Requirements

CSS – Einbindung

Design: User Interface

SE Process (Development)

Why User Interface / Software Co-Design

Software Engineering Issues: Checklist

jQuery

Android User Interface

Concept: Structure

Maximum of Columns

Typography and Text

Mobile Device vs. PC

Zusammenfassung HTML CSS JS

Web and organizational structure

Viele Informationen (& Design) in kleine Häppchen aufteilen, dann Baum aufbauen (Hierarchie bei 1) -> Informationen gliedern

The Scrum Development Process

CSS – Cascading Stylesheet

CSS – Vorteile

(Design) Engineering & Development Method

Progressive Enhancement

Man fängt mit dem kleinsten an

Interface Design: Widgets

Smartphones: More technical characteristics

Websites – Bausteine

Usability through Guidelines

Development: Waterfall vs. Agile

Hypertext Markup Language (HTML)

Modern Software Development Methods

TESTING

Visual sense

Single handed use vs. both handed use

Input variations

Typical Architectural Elements

Blur effect

Some Architecture Proposal

Golden Ratio

Holding vs. Performance

Usability-Evaluation (more summative)

Low Fidelity Prototypes

Usage of Icons and Colors

Interviews

Web adoption

-> How to adapt web pages on client side?

How to adapt web pages on client side

Forms of usability studies

HTML – Aufbau eines Elements

XMLHttpRequest

AJAX Web Application Model

Idee: Entkoppeln -> können evtl vorläufige Antwort geben, sind nicht blockiert und können zwischendrin noch was machen

Network problems uncovered: Delay, Jitter, Latency

(Motivationsfolie)

Sensor Networks - Common Problems!

- Solutions!

Hidden terminal: 3 kommunikationspartner, 2 können sich hören aber 1 kann nich hören, der behindert dann die anderen

RTS/CTS Ready to send, Clear to send

()

Software engineering for mobile networked apps

Probelms/Handling

PAN RADIO FREQUENCY (RF)

Personal Area Networks

Netze die kleineren Raum umspannen (bspw. Bluetooth)

Following Myths are false, e.g. interference area is wider than reception area.

Bluetooth mobile communication

Main purpose

Bluetooth architecture

Datenstrang und Audio getrennt

()

TCP congestion control

TCP and mobile networks

Idee: Wir wollen überlast vermeiden und schauen wie lange ein Paket unterwegs ist. Um das Netz stabil zu halten soll diese Überlast reduziert werden.

Idee: So schnell kommunizieren wie es geht, aber ohne dass Netz zusammenbricht

Bluetooth Pairing and Security

MAC RF networks

Bluetooth - Physical layer

Recht robus dank Gaussian frequency shift key

Frequency Hopping sorgt dafür dass Störungen nicht die ganze Zeit auftritt

Bluetooth Service/Profiles

SDP

Bluetooth - Master and Slave

Inquiry to connect

Reactivity is important for usability

There are 3 main response time limits: 0.1 sec (slider reacting), 1 sec (download of web pages), 10 sec (how long ppl can stay in the flow of the interaction)

-> once response time is slower than 1 sec, users hesitate and leave sites much more sooner.

Bluetooth - Connection: Baseband and Link layer

Baseband verwaltet Verbindungen, Link Manager: cell management

Network topology

Synchronization and addressing

Unverbundenen Zustand links, verbundener Zustand rechts (also IDs bekommen)

Links kann nicht mitspielen da sie den seed nicht haben -> hopping sequence nicht ausrechenbar -> nicht mitspielen

Baseband State transition

Range and Classes

Comparison BT TR/EDR and BLE

(Bluetooth low energy)

im groben wichtig zu wissen: reaktiv, keine audio, wenig bandbreite benötigt

Differences BLE to classical BT

Roles

Link Layer State Diagram BLE for both Peripheral & Central

Einfaches protokoll, verbraucht wenig Ressourcen.

Wenn verbunden dann entstehen Rollen: GATT Client GATT Server

BLE connection establishment

BLE Beacon Packet

typischer aufbau eines datensparenden pakets

Two Views on the same devices

Link Layer vs GATT view

White List

BLE/Bluetooth 4.0

Advertisement = “ein Hallo senden” = inquiry

Senden über advertisement beacons oder

ATT protocol

Generic ATTribute profile (GATT)

ZigBee

ZigBee vs Bluetooth vs Wifi

Physical Layer

Super Frame Structure

GTS Allocation management

Gut gegen overhearing

2 Teile: Superframe Struktur wird über master über beacon festgelegt. Graue Bereich wird nicht benutzt, alle sind inaktiv (Energiesparsam). Im weißen Bereich wird gesendet. Der CAP (Contention Access Period) Teil (vorne) ist für jeden frei zu senden, in CFP (Contention Free Period) bekommt man slots zugewiesen vom Master falls man braucht (GTS Allocation).

IEEE MAC (media access controll): Features

IEEE Addressing, Beacons

MAC Frame Overview

ZigBee topology

LoRa: Long Range Wireless Communication Standard

LoRa Stack

Für Telemetrie gedacht (Abfrage von sich selten änderneden Werten wie bspw. Wasserstand/-höhe, Temperatur)

Matter

Eigentlich unwichtig, wissen dass es existiert. Kann funktionieren, aber wird nich benutzt. Soll interoperability improven und operiert in höheren Layern als bspw. Zigbee. “Just don’t do it. Jo kann man machen aber braucht man das alles?”

LoRa Range and Bitrate

LoRa Restrictions

MAC: LoRa Devices

LoRa structure

LoRa WAN

Principle Communication Structures

Universal Plug and Play (UPnP)

(IOT MULTIMEDIA)

DLNA

UPnP Media Devices

DLNA 2-Box Models

3-Box Model

Two Basic Principles In IoT Middleware

& some IoT protocols

Service Principle of IoT

The Service Federation Triangle

Message Broker Definition

Service Orientation: OPC/UA

Message Queue Telemetrie Transport

Constrained Application Protocol (CoAP)

Resource Observing

Message Oriented Middleware (MOM)

IoT:

REST - Representational State Transfer

W3C Web Services

CSS – Größenangaben

Gastvorlesung AWS

Here’s a recap of the session.

I presented you AWS Amplify (https://docs.amplify.aws/): a set of tools and services to accelerate the development of mobile and web applications on AWS.

Amplify includes an opensource framework of libraries, UI components, CLI, and a graphic environment (Amplify Studio) to build the application backend and integrate it with web and mobile applications (iOS, Android and React Native).

Amplify makes it easy to create the AWS resources needed for the application, including Amazon Cognito.

Amplify creates resources in the linked AWS account and it sets the correctend points with a JSON config file. All services are visible and configurable even outside Amplify, and it is possible to import existing resources.

Amplify libraries, CLI, and console interface are free and you only pay for hosting and for the AWS services that are created when you add the feature, for example for the Cognito user pool that is created to authenticate users. Amplify Studio also provides integration with Figma to generate React code starting from the design on Figma. In this case, Amplify automatically converts Figma components into React components.

General HCI: Skeleton: Wireframes