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
HTML – Kategorien von Elementen
How to adopt pages for mobile computing
Adaption Server-Side
(Provider/Transcoder doesn’t really work nowadays because it doesn’t support https)
Android User Interface – Themes
Übliche Probleme bei der Entwicklung von Websites
Browser-definierte Styles
Hosting von Websites
HTTPS
Wir greifen etwas ab per request und bekommen eine response von dem Server per HTML Doc.
Communication for IoT
Different Network Types
WAN, Wired Networks, SWPAN
Communication
Varying requirements: mobile vs. server (stationär)
Datenbandbreite geringer im mobilen fall
Andere Art auf Information zuzugreifen (Sessionzeiten)
Untersch. Anforderung bzgl. Zeitverzögerung
Preisunterschied
State Management
Everything is a widget
Widget erstellen
Declarative UI
Dart Language
Last changed8 months ago