Lecture Slides from the 2nd Lecture in "Social Learning and Knowledge Sharing Technologies" about Social Patterns & Graph Theories
Lecture at TU Darmstadt - Multimedia Communications Lab
Lecturers: Johannes Konert & Christoph Rensing
Today's web sites are increasingly being accessed through a wide variety of computing platforms ranging from the workstation to a laptop and through multiple access devices such as Internet Screen Phone, TV Set Top box, PDA, and cellular phones. Web sites are rarely de-signed and developed to fit such a large variety of contexts of use as each context (e.g., each computing platform, each device) has its own set of constraints. This pa-per describes a model-based approach for reengineering web pages into a presentation and a dialog model stored with XIML, a model-based user-interface specification language. These models are then further exploited to reengineer other user interfaces either for the same context of use (by changing presentation design options) or for different contexts of use (by changing properties of computing platform model). For this purpose, three key elements of the presentation model (i.e. presentation units, logical windows, and abstract interaction objects) and two key elements of the dialog model (i.e., navigational structure and transition) were defined.
Jazoon12: Tracing Requirements with the Eclipse Requirements Modeling Frameworkjastram
No matter whether a heavy-weight approach like RUP is employed or an agile one - requirements have to be collected and organized somehow. It is desirable to maintain the requirements and to establish a traceability between the requirements and the development artifacts. Such a traceability has many uses, including to support project management, testing or change management, to name just a few. In practice, it is difficult to find the right balance for requirements management: If requirements are not updated, their usefulness is severely limited. Likewise, an incomplete or incorrect traceability can be worse than having none at all. The cost of a correctly maintained traceability can in some circumstances out-weight their value. In this talk, we present the Eclipse Requirements Modeling Framework (RMF) and its GUI, ProR. RMF supports a generic data model that is based on the emerging ReqIF standard. ReqIF is an OMG standard that was developed by the automotive industry to aid the exchange of requirements between manufacturers and suppliers. ProR is the first clean-room implementation of a ReqIF tool. We expect most industry tools to support ReqIF by the end of 2012 (many tools, including Rational DOORS, already support the predecessor of ReqIF). Support for the project was pledged by Airbus, Thales, MKS and many others (see http://eclipse.org/rmf). As ProR is generic, it can be used with a wide range of development processes. But the real power stems from the ability to extend it with plugins to provide additional functionality. In this talk, we will also present a method for building a formal model of requirements. The method supports the iterative addition of requirements to the model, while evolving the requirements. We demonstrate how ProR (with the integration plugin) support tasks like link creation, change management and requirements evolution. As an Eclipse project, RMF can easily be integrated into existing tools. There is a lot of interest in the Topcased community, for instance, to integrate ProR for better requirements engineering support. Further, we are evaluating traceability support for SysML, implemented in Topcased. This talk addresses everybody who manages requirements and who deals with the software development process. Besides requirements engineers, this includes product managers, project managers and software architects. As systems being developed are getting more and more complex, the importance of an effective development process and an integrated tool chain are becoming increasingly important. RMF makes an open contribution in an area that so far has been under-represented in the Eclipse ecosystem.
Report about Software Architecture for Robotics, for class of Introduction to Robotics of Prof. Sukhan Lee, of department of computer engineering of Sungkyunkwan University.
Student: Lorran Pegoretti.
Suwon, South Korea, December 2013
Today's web sites are increasingly being accessed through a wide variety of computing platforms ranging from the workstation to a laptop and through multiple access devices such as Internet Screen Phone, TV Set Top box, PDA, and cellular phones. Web sites are rarely de-signed and developed to fit such a large variety of contexts of use as each context (e.g., each computing platform, each device) has its own set of constraints. This pa-per describes a model-based approach for reengineering web pages into a presentation and a dialog model stored with XIML, a model-based user-interface specification language. These models are then further exploited to reengineer other user interfaces either for the same context of use (by changing presentation design options) or for different contexts of use (by changing properties of computing platform model). For this purpose, three key elements of the presentation model (i.e. presentation units, logical windows, and abstract interaction objects) and two key elements of the dialog model (i.e., navigational structure and transition) were defined.
Jazoon12: Tracing Requirements with the Eclipse Requirements Modeling Frameworkjastram
No matter whether a heavy-weight approach like RUP is employed or an agile one - requirements have to be collected and organized somehow. It is desirable to maintain the requirements and to establish a traceability between the requirements and the development artifacts. Such a traceability has many uses, including to support project management, testing or change management, to name just a few. In practice, it is difficult to find the right balance for requirements management: If requirements are not updated, their usefulness is severely limited. Likewise, an incomplete or incorrect traceability can be worse than having none at all. The cost of a correctly maintained traceability can in some circumstances out-weight their value. In this talk, we present the Eclipse Requirements Modeling Framework (RMF) and its GUI, ProR. RMF supports a generic data model that is based on the emerging ReqIF standard. ReqIF is an OMG standard that was developed by the automotive industry to aid the exchange of requirements between manufacturers and suppliers. ProR is the first clean-room implementation of a ReqIF tool. We expect most industry tools to support ReqIF by the end of 2012 (many tools, including Rational DOORS, already support the predecessor of ReqIF). Support for the project was pledged by Airbus, Thales, MKS and many others (see http://eclipse.org/rmf). As ProR is generic, it can be used with a wide range of development processes. But the real power stems from the ability to extend it with plugins to provide additional functionality. In this talk, we will also present a method for building a formal model of requirements. The method supports the iterative addition of requirements to the model, while evolving the requirements. We demonstrate how ProR (with the integration plugin) support tasks like link creation, change management and requirements evolution. As an Eclipse project, RMF can easily be integrated into existing tools. There is a lot of interest in the Topcased community, for instance, to integrate ProR for better requirements engineering support. Further, we are evaluating traceability support for SysML, implemented in Topcased. This talk addresses everybody who manages requirements and who deals with the software development process. Besides requirements engineers, this includes product managers, project managers and software architects. As systems being developed are getting more and more complex, the importance of an effective development process and an integrated tool chain are becoming increasingly important. RMF makes an open contribution in an area that so far has been under-represented in the Eclipse ecosystem.
Report about Software Architecture for Robotics, for class of Introduction to Robotics of Prof. Sukhan Lee, of department of computer engineering of Sungkyunkwan University.
Student: Lorran Pegoretti.
Suwon, South Korea, December 2013
User-Centered Design
The Elements of User Experience
Navigation Model
Wireframes
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2014.
http://www.ivanomalavolta.com
When talking about modeling, I think there will be a bundle of terms that will come to our mind, UML, domain driven development, DSL, forward/reverse enginerring, MDD, MDA, BPMN. These technology or methodology have been there for years; And obviously, modeling has proven itself to provide value by improving communication, business-alignment, quality, and productivity. Its applicability includes a number of disciplines such as analysis, design, or development. But why aren’t we all doing Model Driven Development yet?
Web engineering focuses on the methodologies, techniques, and tools that are the foundation of Web application development and which support their design, development, evolution, and evaluation.
IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling &...Marco Brambilla
This tutorial focuses on the Domain-specific Language (DSL) called IFML, which has been adopted as a standard by OMG in March 2013. The Interaction Flow Modeling Language (IFML) is designed for expressing content, user interaction and control behaviour of the front-end of software applications, as well as the binding to the persistence and business logic layers. IFML is the missing piece for modeling the front end of software applications and perfectly complements other modeling dimensions in broad system modeling projects. Therefore, IFML works best when integrated with other modeling languages in the MDA suite, such as UML and BPMN. This tutorial illustrates the basic concepts of IFML, presents the design best practices and integration with other modelling languages, and discusses some industrial experiences (also featuring quantitative measures of productivity) achieved by the companion tool WebRatio. At the end of the tutorial, attendees will get a general knowledge about IFML (they will be able to design simple models and to derive models from existing interfaces), will be able to associate front-end design with system modelling at large, will see the associated MDE tool WebRatio at work, and will get a glimpse of real-life industrial applications developed for large enterprises. This will let them appreciate the advantages of a model-driven development approach at work within large-scale industrial project.
The tutorial is aimed at both industrial and academic attendees, including Ph.D. students. Prerequisite for attending the tutorial is a general knowledge about the bases of model-driven development, software engineering, and some general purpose modelling languages like UML.
Research Overview about the Multimedia Communications Lab (KOM) - Technische Universität Darmstadt - Germany
Research areas towards Adaptive Seamless Multimedia Communications are: Knowledge & Educational Technologies, Multimedia Technologies & Serious Games, Mobile Systems & Sensor Networks, Self-organizing Systems & Overlay Communications, Service-oriented Computing
Lecture Slides from the 1st Lecture in "Social Learning and Knowledge Sharing Technologies" about Learning Theories and Challenges
Lecture at TU Darmstadt - Multimedia Communications Lab
Lecturers: Johannes Konert & Christoph Rensing
User-Centered Design
The Elements of User Experience
Navigation Model
Wireframes
This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2014.
http://www.ivanomalavolta.com
When talking about modeling, I think there will be a bundle of terms that will come to our mind, UML, domain driven development, DSL, forward/reverse enginerring, MDD, MDA, BPMN. These technology or methodology have been there for years; And obviously, modeling has proven itself to provide value by improving communication, business-alignment, quality, and productivity. Its applicability includes a number of disciplines such as analysis, design, or development. But why aren’t we all doing Model Driven Development yet?
Web engineering focuses on the methodologies, techniques, and tools that are the foundation of Web application development and which support their design, development, evolution, and evaluation.
IFML - Interaction Flow Modeling Language - tutorial on UI and UX modeling &...Marco Brambilla
This tutorial focuses on the Domain-specific Language (DSL) called IFML, which has been adopted as a standard by OMG in March 2013. The Interaction Flow Modeling Language (IFML) is designed for expressing content, user interaction and control behaviour of the front-end of software applications, as well as the binding to the persistence and business logic layers. IFML is the missing piece for modeling the front end of software applications and perfectly complements other modeling dimensions in broad system modeling projects. Therefore, IFML works best when integrated with other modeling languages in the MDA suite, such as UML and BPMN. This tutorial illustrates the basic concepts of IFML, presents the design best practices and integration with other modelling languages, and discusses some industrial experiences (also featuring quantitative measures of productivity) achieved by the companion tool WebRatio. At the end of the tutorial, attendees will get a general knowledge about IFML (they will be able to design simple models and to derive models from existing interfaces), will be able to associate front-end design with system modelling at large, will see the associated MDE tool WebRatio at work, and will get a glimpse of real-life industrial applications developed for large enterprises. This will let them appreciate the advantages of a model-driven development approach at work within large-scale industrial project.
The tutorial is aimed at both industrial and academic attendees, including Ph.D. students. Prerequisite for attending the tutorial is a general knowledge about the bases of model-driven development, software engineering, and some general purpose modelling languages like UML.
Research Overview about the Multimedia Communications Lab (KOM) - Technische Universität Darmstadt - Germany
Research areas towards Adaptive Seamless Multimedia Communications are: Knowledge & Educational Technologies, Multimedia Technologies & Serious Games, Mobile Systems & Sensor Networks, Self-organizing Systems & Overlay Communications, Service-oriented Computing
Lecture Slides from the 1st Lecture in "Social Learning and Knowledge Sharing Technologies" about Learning Theories and Challenges
Lecture at TU Darmstadt - Multimedia Communications Lab
Lecturers: Johannes Konert & Christoph Rensing
Brand Management is also necessary for industrial goods. Thomas Dmoch describes several market Research techniques to grasp the brand Image of industrial goods
Presentation given at the OMG ADTF meeting in Salt Lake City, June 22, 2011.
We presented our experience with WebML and WebRatio and we opened a discussion on the need and the scope required for a user interaction modeling language. See more at:
http://www.modeldrivenstar.org/2011/06/some-highlights-from-salt-lake-city-omg.html
International Journal of Engineering and Science Invention (IJESI)inventionjournals
International Journal of Engineering and Science Invention (IJESI) is an international journal intended for professionals and researchers in all fields of computer science and electronics. IJESI publishes research articles and reviews within the whole field Engineering Science and Technology, new teaching methods, assessment, validation and the impact of new technologies and it will continue to provide information on the latest trends and developments in this ever-expanding subject. The publications of papers are selected through double peer reviewed to ensure originality, relevance, and readability. The articles published in our journal can be accessed online.
Micro Frontends
“Extending the microservice idea to frontend development”.
What does it really mean? Is it just abusing a certain hype? Should I consider it? How should I approach it?
These are just some of the questions one might ask when presented with this notion. Long story short – Micro front-ends are a reality! However, it is not for everyone.
In this session, we’re going to demystify micro frontends. We’re going to establish what it is, when it should be considered and the decisions to be made
Designing Powerful Web Applications Using AJAX and Other RIAsDave Malouf
This is the slide deck from the workshop given at UI11 on October 9, 2006. This presentation was given with myself (David Malouf) and Bill Scott (AJAX Evangelist @ Yahoo!).
The goal of the course was to teach people the basics of Interaction Design and then how to apply those principles to design using RIA technologies like AJAX and Flash.
Die umfangreiche Sensorik mobiler Endgeräte erlaubt es verschiedene Informationen über den Kontext des Nutzers eines mobilen Endgerätes zu bestimmen. Das Wissen über den Kontext eines Nutzers lässt sich dann nutzen um Lernanwendungen adaptiv zu gestalten. Die Adaptivität der Lernanwendung hat das Ziel den Lernenden automatisiert in seinem Lernprozess zu unterstützen. Der Vortrag gibt einen Überblick über verschiedene Formen der Kontextbestimmung und der Nutzung der Kontextinformation innerhalb von Lernanwendungen sowie die damit einhergehenden Potenziale. Zugleich werden die Grenzen der Kontextbestimmung und Nutzung angesprochen.
Design of a portable, mobile Bluetooth Low Energy connected Electromyographic Recorder for Serious Games. More information: http://blog.multimedia-communications.net/
Am Fachgebiet Multimedia Kommunikation an der TU Darmstadt forschen wir im Projekt “inDAgo” (Leitmotiv: “Länger unabhängig und mobil im Alter leben”) an Konzepten und Technologien, die Smartphones und Tablets als sinnvolle Unterstützung in den Alltag von Senioren integrieren. Mögliche Szenarien werden in dieser Präsentation beschrieben. Mehr Informationen gibt es unter: http://blog.multimedia-communications.net/multimedia-fuer-senioren-mobil-und-sicher-im-alter/
Learning at the workplace is quite often based on
sharing of experiences between workers. In this paper we
present the results of a survey we made about the worker’s
willingness to help colleagues and about the prerequisites for the use of a question and answering (Q&A) system supporting mobile users in the automotive sector. Especially we investigate whether the willingness to help and the information need differs in different work related activities. A Q&A system is a widespread used tool to pass experience based knowledge between persons distributed over different locations. The analysis of the survey shows that help from colleagues is valuable during the knowledge acquisition process. We also get
answers on what kind of information is helpful for technicians in the automotive sector. These insights have been incorporated into our concept and implementation. Our concept extends the fundamental Q&A idea to be used in automotive companies where especially strong requirements regarding the response time exist and where technicians work at different places and need mobile support.
Mobile Technologien und Zugänge zum WWW erlauben neue Formen des Lernens und bieten vielfältige Potenziale. Mit deren Realisierung sind aber zugleich praktische und technische Herausforderungen
verbunden, die dem mobilen Lernen im WWW
Grenzen auferlegen. Der Beitrag stellt Herausforderungen bei der Realisierung mobiler Anwendungen im Web vor und beschreibt, mittels welcher Verfahren diese zu lösen sind. Anhand verschiedener Beispiele werden die Potenziale, aber auch die Grenzen erörtert, die Lernanwendungen im mobilen Web bieten.
2. KOM – Multimedia Communications Lab
2
Approaches to Modern Web Application Development MVC, ACID, CRUD REST, LAMP <-> MEAN, PaaS
Social Media Systems Design Aspects
Content vs. User
Relationship Types
Roles, Levels, Badgets, Achievements as an instrument for Guidance
Responsibility and Democracy
Ambient Intimacy
Graph Theory Basics What have subways, emails and rivers in common? (or users, tags, resources)
Image sources: http://www.seawaterfoundation.org/siteImages/rivers_art.jpg,, http://vnfa8y5n3zndutm1.zippykid.netdna-cdn.com/wp-content/uploads/2011/12/url7.jpg, http://images.all-free- download.com/images/graphiclarge/s_bahn_71263.jpg, http://de.roblox.com/item.aspx?seoname=U-Bahn&id=28172595, http://faculty.kutztown.edu/rieksts/225/graphs/tripartite_files/image002.jpg,
Lecture 3 Social Patterns & Graph Theories Basics
3. KOM – Multimedia Communications Lab
3
Motivation
1. Challenge: Resource Selection & Navigation
4. Challenge: Cooperation & Collaboration
2. Challenge: Targeting
(How to find resources? How to navigate?)
How to motivate to reach learning goals?
Modern Web App Dev (Basics)
Social Systems Design Patterns
Graph Theory (Basics)
3. Challenge: Feedback
(How to design Peer Feedback/Assessment?)
(What is the path to the goal?)
(Who is the best candidate?)
How to establish a “community” sense?
Challenges
How to tell “what’s next”?
4. KOM – Multimedia Communications Lab
4
At the end of the lecture / exercise you will be able…
Learning objectives of lecture 3
..to repeat aspects to keep in mind when designing a new Social Learning and Knowledge Sharing System.
..to decide based on the aspects which components you want to use.
..to select and focus on specific Social System Design Patterns to support your system characteristics.
..to differentiate (basic) types of graph representations and you can decide and explain to which type example graphs belong to
5. KOM – Multimedia Communications Lab
5
Approaches to Modern Web Application Development
Image source: ok/FreeDigitalPhotos.net
Placement in the context of the lecture
1. Theories and Challenges
2. Structures and Pattern
Modeling Context
4. Context- Awareness
Search
Context Detection
3. Services and Mechanisms
Peer Tutoring Collabora. Tasks
Contextual Services
5. Evaluation
Foundations and Learning Theories
Challenge: Resource Selection & Navigation
Challenge: Coopera- tion & Collaboration
Challenge: Feedback & Targeting
Peer Assessment & Feedback
Learning Analytics
Learning Path Transparency
Offline Evaluation
Hypothesis validation
Formative and summative
Resources
Social Patterns
Graph Theory Basics
Scripted Collaboration
Re- com- men- der
Human
Resource
User / Learner
6. KOM – Multimedia Communications Lab
6
Codecademy Airbnb
Examples of Modern Web Applications
Characteristics (some..)
Changes in one GUI widget cause reload/filtering of data in other app parts
Far beyond text-based websites
Responsive Layout
7. KOM – Multimedia Communications Lab
7
.. with Web Application we mean: an application running (and displayed) in the browser
.. with Modern we mean: system design solutions supporting development, maintenance, performance and responsiveness of web applications beyond and in contrast to websites.
..with Approaches we mean: Technologies and Paradigms used to develop Modern Web Applications (this excludes hardware and runtime maintenance aspects) Components of a Modern Web Application
Image source: http://www.codeproject.com/Articles/645753/Challenges-and-solutions-Architecture-of-a-Modern
Approaches to Modern Web Application Development
Distributed System(s)
..so forget this illustration
8. KOM – Multimedia Communications Lab
8
Web server
Components of a (Modern) Web Application
Image sources: http://www.computero.com/media/HP-server.jpg, DryIcons/Shine, Tango IconSet
Server
Client
Operating System (OS)
Script language
DB
Operating System (OS)
Model
Controller
<!DOCTYPE html> <html>..</html>
View
Web browser
Script language
Local state
9. KOM – Multimedia Communications Lab
10
MVC (Pattern)
Model encapsulates the data (objects) state
View displays the data, is user interface and allows user actions
Controller reacts on user actions, coordinates model(s) and system communication
Modern Web Applications
Image sources: http://www.computero.com/media/HP-server.jpg, DryIcons/Shine, Tango IconSet
Web server
Server
Client
Operating System (OS)
Script language
DB
Operating System (OS)
Web browser
Script language
Local state
Model
Controller
View
Model
Controller
View
10. KOM – Multimedia Communications Lab
11
MVC (Pattern)
Modern Web Applications
Image sources: http://www.computero.com/media/HP-server.jpg, DryIcons/Shine, Tango IconSet
Web server
Server
Client
Operating System (OS)
Script language
DB
Operating System (OS)
Web browser
Script language
Local state
Model
Controller
View
Model
Controller
View
11. KOM – Multimedia Communications Lab
12
ACID (Database Design Properties)
Atomicity (all or nothing)
Consistency (constraint-based valid states)
Isolation (concurrency control)
Durability (no loss after commit)
Modern Web Applications
Image sources: http://www.computero.com/media/HP-server.jpg, DryIcons/Shine, Tango IconSet
Web server
Server
Client
Operating System (OS)
Script language
DB
Operating System (OS)
Web browser
Script language
Local state
Model
Controller
View
Model
Controller
View
12. KOM – Multimedia Communications Lab
13
CRUD (Persistent Storage [Interface] Properties)
Modern Web Applications
Image sources: http://www.computero.com/media/HP-server.jpg, DryIcons/Shine, Tango IconSet
Web server
Server
Client
Operating System (OS)
Script language
DB
Operating System (OS)
Web browser
Script language
Local state
Model
Controller
View
Model
Controller
View
Operation
SQL
HTTP
Create
INSERT
PUT / POST
Read (Retrieve)
SELECT
GET
Update (Modify)
UPDATE
PUT / PATCH
Delete (Destroy)
DELETE
DELETE
Web Service / API
13. KOM – Multimedia Communications Lab
14
REST (Property)
Representational state transfer
Stateless server & cachable responses
uniform ressource and service addresses
Alternative representations (?)
Interface-based operations (identify, create, modify, delete) New aspects:
Hypermedia as state transition machine
Using many HTTP methods
Modern Web Applications
Image sources: http://www.computero.com/media/HP-server.jpg, DryIcons/Shine, Tango IconSet
Web server
Server
Client
Operating System (OS)
Script language
DB
Operating System (OS)
Web browser
Script language
Local state
Model
Controller
View
Model
Controller
View
Web Service / API
HTTP-based example: http://www.airbnb.com/places
public class MyPlaces {
@GET
@Produces(MediaType.TEXT_PLAIN)
public String getIt() {
return "Darmstadt, Frankfurt, München";
}
@GET
@Produces(MediaType.APPLICATION_JSON)
public String getIt() {
return "{ ‘places‘: [‘Darmstadt‘,‘Frankfurt‘,‘München‘]}";
}
}
14. KOM – Multimedia Communications Lab
15
LAMP (Paradigm)
Linux OS
Apache Webserver
MySQL DB
PHP Server-side Language (Also popular as XAMP or XAPP)
Modern Web Applications
Image sources: http://www.computero.com/media/HP-server.jpg, DryIcons/Shine, Tango IconSet
Web server
Server
Client
Operating System (OS)
Script language
DB
Operating System (OS)
Web browser
Script language
Local state
Model
Controller
View
Model
Controller
View
Web Service / API
15. KOM – Multimedia Communications Lab
16
MEAN (Paradigm)
Node.js operating language
Express Webserver framework
MongoDB NoSQL storage
AngularJS client-binding (Also known as AMEN)
Modern Web Applications
Image sources: http://www.computero.com/media/HP-server.jpg, DryIcons/Shine, Tango IconSet
Web server
Server
Client
Operating System (OS)
Script language
DB
Operating System (OS)
Web browser
Script language
Local state
Model
Controller
View
Model
Controller
View
Web Service / API
New aspects:
MEAN adds a client-layer component to the stack
All JavaScript
16. KOM – Multimedia Communications Lab
17
Total number based on Wikipedia entries on ‚database‘, ‚webserver‘, ‚web application framework‘,… from 2014-10-29 (only to get a idea of dimensions)
Modern Web Application Development
Database (~50)
Webserver (~30)
Server: Web App Framework (~130)
Template Engine (~90)
Client: Web App Framework (JS: ~40)
SQLite
HyperSQL
MySQL
PostgreSQL
Cassandra
MongoDB
(Microsoft IIS)
Apache HTTP
Apache Tomcat
Jetty
Boa
NginX Mongoose WS
lighttpd
(Node.js)
Full solution frameworks: ASP.NET MVC, GWT
PHP (CakePHP, Zend)
Ruby (on Rails)
Python (Django, Pyramid)
Java Servlets (Spring, JSF, Struts)
ExpressJS
PHP / Smarty
Genshi
Cheetah
Mustache
JSP
Jade
Dojo
MochiKit
script. aculo.us
ExtJS
YUI
Qooxdoo
jQuery
Ember.js
AngularJS
17. KOM – Multimedia Communications Lab
18
PaaS (Pattern)
Platform as a Service
Cloud-Service model for delivery of a (scalable, reliable) operating platform for applications
Client creates and maintains application
Modern Web Applications
Image sources: http://www.computero.com/media/HP-server.jpg, DryIcons/Shine, Tango IconSet
Web server
Server
Client
Operating System (OS)
DB
Operating System (OS)
Web browser
Script language
Local state
Model
Controller
View
Model
Controller
View
Web Service / API
Script language
https://www.heroku.com/
https://cloud.google.com/appengine/
https://www.openshift.com/
18. KOM – Multimedia Communications Lab
19
Social System Design Patterns
Image and book reference: http://www.amazon.com/Designing-Social-Interfaces-Principles-Experience/dp/0596154925, http://www.amazon.com/Building-Social- Applications-Gavin-Bell/dp/0596518757/
Placement in the context of the lecture
1. Theories and Challenges
2. Structures and Pattern
Modeling Context
4. Context- Awareness
Search
Context Detection
3. Services and Mechanisms
Peer Tutoring Collabora. Tasks
Contextual Services
5. Evaluation
Foundations and Learning Theories
Challenge: Resource Selection & Navigation
Challenge: Coopera- tion & Collaboration
Challenge: Feedback & Targeting
Peer Assessment & Feedback
Learning Analytics
Learning Path Transparency
Offline Evaluation
Hypothesis validation
Formative and summative
Resources
Social Patterns
Graph Theory Basics
Scripted Collaboration
Re- com- men- der
Human
Resource
User / Learner
19. KOM – Multimedia Communications Lab
20
“The main issue with designing and maintaining a social web application is not the technology, it’s the psychology as people and their activities are the core of the application.”
The quote is no citation of other authors, but written by JK based on [Crumlish et al 2009] and [Bell 2009]
The main issue
20. KOM – Multimedia Communications Lab
21
Overview on Social System Design Aspects
1. Challenge: Resource Selection & Navigation
4. Challenge: Cooperation & Collaboration
2. Challenge: Targeting
3. Challenge: Feedback
How to motivate to reach learning goals?
How to design Peer Feedback/Assessment?
How to establish a “community” sense?
How to tell “what’s next”?
Content vs. User
Roles, Levels, Badges, Achievements
Responsibilities and Democracy
Relationship Types
Ambient Intimacy
21. KOM – Multimedia Communications Lab
22
Publisher-led
Product-led
Interest-Led
Image sources: taken screenshots from each website on 29.10.2014
Structural Patterns
Content vs. User
22. KOM – Multimedia Communications Lab
23
Publisher-led
Product-led
Interest-Led (hybrids exist)
Image sources of examples: taken screenshots from each website on 29.10.2014
Structural Patterns
Content vs. User
Publisher
Publisher
Interest
Interest
Interest
Product
23. KOM – Multimedia Communications Lab
24
Content-centric
User-centric
Event-centric
Image sources of examples: taken screenshots from each website on 29.10.2014
Structural Patterns
Content vs. User
24. KOM – Multimedia Communications Lab
25
Content-centric
User-centric
Event-centric (hybrids exist)
Image sources of examples: taken screenshots from each website on 29.10.2014
Structural Patterns
Content vs. User
Content (Event)
Content
Event
Content (User)
User (Content)
User
25. KOM – Multimedia Communications Lab
26
Publisher
Product
Interest
Content
Media Syndication
Customer Exchange
Learning/Sharing
Event
Marketing
Franchise
Gathering/Exchange
User
VIP Promotion
Grouping
Friendship
Illustration by J.Konert, no specific reference for these dimensions, but see [Bell2009, p. 123ff] for aspects
Structural Patterns
Most interesting for Social Learning and Knowledge Sharing are
Interest-led
Content-centered
Content vs. User
26. KOM – Multimedia Communications Lab
27
(some relationship arrows are omitted for better readability)
Image source: Tango Icon set,
Relationship Types
Relationship Types
Site owner
Users
Users
Resources
Conversation
Meta-Data Categories Tags
Groups
Friendship
Following
Following
Bookmarking
Following
Ownership
Ownership
Sharing
Sharing
Following
Ownership
Sharing
Ownership
Following
27. KOM – Multimedia Communications Lab
28
Technically
Symmetric relationships
Discovery of people/groups
Request, Acknowledgement, Decline, Ignore, Remove
Asymmetric relationships
Follow (Fan), Unfollow, Bookmark
Filter
Structure and Content creation
Group creation, deletion, handover ownership
Content creation, deletion, (remaining after account deletion)
Tagging
Privacy and Visibility settings for user-data, content, structures
Search and Recommendation (PULL, PUSH)
Administration (reporting, deletion, reasoning, explanation) [see later slides]
See [Crumlish et al, 2009], p.354-379 for further details. * read http://socialseriousgames.de/post/5437302687/social-serious-gaming-chi-2011-impressions for further details
Relationship Types
Make content and profile creation easy, syndicate and recommend this technically and allow structure to emerge later on
[cf. Crumlish et al., p378]
Symmetric
Asymmetric
28. KOM – Multimedia Communications Lab
29
What is reputation? It’s the general opinion (judgment) (more technically, a social evaluation) of (and by) the public (or a group or only a person) towards an entity (person, organization, object or group of entities) – as distinct and different from the background (others) – concerning the likelihood of the entity to behave in a certain way in the future [under certain circumstances]. It is a ubiquitous, spontaneous and highly efficient mechanism of social control. [Crumlish et al. 2009, p. 153], citing Ted Nadeau “Reputation 2.0” Good. So let’s give people something that helps for reputation. Consider
Cooperativeness vs. Competitiveness
Comparability
Quality vs. Quantity
Honor User Loyalty and Progress
Roles, Levels, Badges, Achievements
29. KOM – Multimedia Communications Lab
30
Named Levels
Reflect the experience (and/or reputation) Usual measures are
Activities
Likes/Follower
Completion of tasks/quests (if applicable) (similar, but not ordered, are badges (or labels).. ..given for specific behavior or characteristics..can be extended endlessly)
Honor User Loyalty and Progress
Newbie
Active member
Contri- butor
Trend setter
Expert
Leader
Enthusiast
Roles, Levels, Badges, Achievements
30. KOM – Multimedia Communications Lab
31
Achievements (or Awards)
Reflects accomplished activities
Used to encourage quality over quantity behavior
Common
Can be reversible
Seldom
Can be unexpected and hidden
Image source: Konert 2014, .p 67; cf. Konert et al. 2013, Crumlish 2009, p. 166ff
Honor User Loyalty and Progress
Roles, Levels, Badges, Achievements
31. KOM – Multimedia Communications Lab
32
Image source: https://s3.amazonaws.com/codecademy-blog/assets/intro-new-profile/whole_page.jpg
Example: codecademy.com Profile
Qualitative, single, static Achievements
Badgets for specific skills
Points (as a kind of level)
32. KOM – Multimedia Communications Lab
33
A Social Web Application should
offer a unique, protected identity (by email or OpenID etc.)
offer privacy settings (reasonable defaults, private, protected, public profile and activities)
enforce community guidelines (code of conduct)
grow organically (managed by owner and community)
provide tools for collective governance (reports, privileges, isolation, timed bans, ..)
allow collaborative filtering (votes, tagging)
never forget that all data belongs to the users (and that this implies rights to it)
Cf. [Bell, 2009, p. 209-224], [Crumlish et al, 2009, p. 383-397]; image taken from https://info.yahoo.com/legal/sg/yahoo/comms/
Responsibilities
Responsibilities and Democracy
33. KOM – Multimedia Communications Lab
34
User-generated content administration “Duty of housekeeping” Easy content creation benefits
Diversification: more variety, specificity, more use/benefits for users
Identification: own content supports emotional binding Iceberg effect:
Lot of content with low quality (that should remain under the surface)
..and: illicit content (18+, NS-symbols, ..) Solutions:
Youth protection
Content administration
Algorithmic Quality assessment
Responsibilities
Quality of content
Amount
Acceptable quality
Image source: hhttp://www.vertriebslexikon.de/bilder/Eisberg-2009.jpg
Responsibilities and Democracy
34. KOM – Multimedia Communications Lab
35
Responsibilities
User-generated content administration A little bit of German law (selection)
Operator is not responsible for law infringement of users
But operator must react promptly, if informed
§10 TMG - Speicherung von Information
Diensteanbieter sind für fremde Informationen, die sie für einen Nutzer speichern, nicht verantwortlich, sofern
(1) sie keine Kenntnis von der rechtswidrigen Handlung oder der Information haben und ihnen im Falle von Schadensersatzansprüchen auch keine Tatsachen oder Umstände bekannt sind, aus denen
die rechtswidrige Handlung oder die Information offensichtlich wird, oder (2) sie unverzüglich tätig geworden sind, um die Information zu entfernen oder den Zugang zu
ihr zu sperren, sobald sie diese Kenntnis erlangt haben.
Satz 1 findet keine Anwendung, wenn der Nutzer dem Diensteanbieter untersteht oder von ihm
beaufsichtigt wird.
§1004 BGB - Beseitigungs- und Unterlassungsanspruch (1) Wird das Eigentum in anderer Weise als durch Entziehung oder Vorenthaltung des Besitzes beeinträchtigt, so kann der Eigentümer von dem Störer die Beseitigung der Beeinträchtigung verlangen. Sind weitere Beeinträchtigungen zu besorgen, so kann der Eigentümer auf Unterlassung klagen. (2) Der Anspruch ist ausgeschlossen, wenn der Eigentümer zur Duldung verpflichtet ist.
Responsibilities and Democracy
35. KOM – Multimedia Communications Lab
36
Responsibility of Content Administration
User-generated content administration
Setting up prompt reaction and administration of content
Categories of procedures for administration of UGC*
Algorithm-based
User-based
Operator-based
Requirements to procedures for administration of UGC*
Correctness of taken decisions (to delete)
Cost efficiency
Speed of decision taking in each single case
Amount of content that can be processed
Complexity of content that can be processed
*UGC = user-generated content
Responsibilities and Democracy
36. KOM – Multimedia Communications Lab
38
Responsibility of Content Administration
Operator-based
User-based
Algorithm-based
Central
e.g. SecondLife
e.g. Knuddels
e.g. Chatsystems
Distributed
?
e.g. Wikipedia
e.g. P2P Sharing
Responsibilities and Democracy
37. KOM – Multimedia Communications Lab
39
Responsibility of Content Administration
Operator-Based Responsibility (Complex-Decision)
User-Based Intermediation (Fuzzy-Decision)
Algorithm-Based Mass-Processing (Pre-Decision)
Complexity of content
Amount of Content that can be processed
Examples:
Email complaints
Claim button
Word detection (NLP)
Responsibilities and Democracy
38. KOM – Multimedia Communications Lab
40
Ambient Intimacy
Key aspect for social learning success (beside serendipity)
“..is about being able to keep in touch with people with a level of regularity and intimacy that you wouldn’t usually have access to, because time and space conspire to make it impossible.” *
Removing cold ambience and the feeling of being with others using the application may dramatically increase app stickiness and in the context of SLKST the learning success (as it is mainly about self-regulation, continuity and connecting people by content).
Image sources: own facebook profile feed and video as listed above. * quote from http://www.reboot.dk/page/1236/en ; cf. [Crumlish et al 2009, p.135-152]
Ambient Intimacy
See Video for Interview with Twitter founder Evan Williams of Obvious http://www.technologyreview.com/video/416292/twitter-and-ambient-intimacy/
39. KOM – Multimedia Communications Lab
43
GRAPH THEORY
1. Theories and Challenges
2. Structures and Pattern
Modeling Context
4. Context- Awareness
Search
Context Detection
3. Services and Mechanisms
Peer Tutoring Collabora. Tasks
Contextual Services
5. Evaluation
Foundations and Learning Theories
Challenge: Resource Selection & Navigation
Challenge: Coopera- tion & Collaboration
Challenge: Feedback & Targeting
Peer Assessment & Feedback
Learning Analytics
Learning Path Transparency
Offline Evaluation
Hypothesis validation
Formative and summative
Resources
Social Patterns
Graph Theory Basics
Scripted Collaboration
Re- com- men- der
Human
Resource
User / Learner
40. KOM – Multimedia Communications Lab
45
A Graph G is a pair of sets (Vertexes and Edges) 퐺=(푉,퐸),푉=푥1,…,푥푛,퐸⊆푉2,푉 ∩퐸=∅
Vertexes of a Graph are 푉퐺, Edges are 퐸(퐺)
Number of vertextes 푉=푛=|퐺| is called the order of G
Number of Edges 퐸=푚=퐺
Two vertexes 푥푖,푥푗∈푉(퐺) are adjacent, if 푥푖,푥푗∈퐸퐺. Two edges are adjacent if they have an end in common.
The degree 푑푥=|퐸푥| of 푥 is the number of edges at 푥
A path is a non-empty (sub)graph 푃=(푉,퐸) of the form 푉=푥0,푥1,…,푥푘,퐸={푥0푥1,푥1푥2,…,푥푘−1푥푘} where 푥푖 distinct. 퐸 is the length of P
A tree is a graph where any two vertexes are connected by exactly one unique path Restrictions: This lecture only treats nontrivial, finite graphs and mostly simple graphs, i.e. 퐕>ퟎ,푮 known and <∞ , no loops, no double edges
This and following slides are based on [Diestel2006]
Graphs Defined
푥1
푥2
푥3
푥4
푥5
41. KOM – Multimedia Communications Lab
46
Vertexes represent users*
Edges represent relations (friendships) ** Metrics of interest
Which users belong closely to each other?
Which users spread information?
Which users are popular (trendsetting)?
A directed graph (or digraph) 퐷=(푉,퐴) is with V a finite, nonempty set of vertices and A a set of ordered pairs of distinct elements of V called arcs, 퐴={(푥푖,푥푗)} with 푖≠푗,푥푖,푥푗∈푉 meaning directed arcs from 푥푖 to 푥푗
In-degree 푑−푥 of a vertex x is the number of arcs into x. Out-degree equally defined for out-going arcs from x.
Image source: jscreationzs / FreeDigitalPhotos.net ; [[Oellermann, 2013, p.7]
Social Network Graphs
* Could be as well locations, resources, etc.., but is less common
** could be anything else like “exchanged emails”, “have been at the same spot”, “have a goal in common”. It is very usual to define the edges to the needs of your analysis
42. KOM – Multimedia Communications Lab
47
Metrics of interest
Which users belong closely to each other?
Which users spread information?
Which users are popular (trendsetting)?
Image source: jscreationzs / FreeDigitalPhotos.net ; [INSNA,2014]
Social Network Graphs
Range (diversity)
Number of links to different others (others are defined as different to the extent that they are not themselves linked to each other, or represent different groups or statuses)
(Tie) strength
Amount of time, emotional intensity, intimacy, and reciprocal services (frequency and multiplexity are also often used as a measure of strength) of a specific link.
Centrality
Extent to which an actor is central to a network. Various measures (including degree, closeness, and betweeness) have been used as indicators of centrality. Some measures of centrality weight an actor's links to others by the centrality of those others.
Closeness
Extent to which an actor is close to, or can easily reach all the other actors in the network. Usually measured by averaging the path distances (direct and indirect links) to all others. A direct link is counted as 1, indirect links receive proportionately less weight (e.g. 1/(number of hops)).
Betweeness
Extent to which an actor mediates, or falls between any other two actors on the shortest path between those actors. Usually averaged across all possible pairs in the network.
Prestige
Based on asymmetric relationships, prestigious actors are the object rather than the source of relations. Measures similar to centrality are calculated by accounting for the direction of the relationship (i.e. in-degree). Prestige can then be defined e.g. as in-degree / out-degree
43. KOM – Multimedia Communications Lab
48
Representation
Adjacency matrix
For our finite simple graphs a adjacency matrix is a matrix with zeros on its diagonal and ones (1) for each edge connecting 푥푖 and 푥푗. The matrix is always symmetric if the graph is undirected.
A= 0 10 101 01 100 10 111 11 000 01 00, algorithmically you store an 2-dimensional array A[i][j].
Adjacency list
Storage of all neighbors of the vertexes as a list, e.g.
퐴=푥2,푥4,푥1,푥3,푥4,푥2,푥4,푥5,푥1,푥2,푥3,푥3, algorithmically you store as well a 2-dimensional array
Which way is more efficient?
Depends on sparsity and operations
(Social Network) Graphs
푥1
푥2
푥3
푥4
푥5
44. KOM – Multimedia Communications Lab
49
A graph 푮=(푽,푬) is called n-partite if V admits a partition into r classes such that every edge has its ends in different classes. 2-partite is usually called bipartite.
A hypergraph is a generalization of a graph with 퐸⊆푃푉 ∅
In a k-uniform hypergraph all hyperedges have size k.
Thus an k-uniform k-partite hypergraph consists of edges connecting k-tupels of vertexes that all belong to k disjunct sets.
For hypergraphs see as well http://en.wikipedia.org/wiki/Hypergraph#Bipartite_graph_model
N-partite graphs and k-uniform hypergraphs
푥1
푥2
푥3
푥4
푥5
푥6
푥7
bipartite
3-partite
3-partite
3-uniform
퐻=푉,퐸,
푉=푉푏∩푉푔∩푉푟=푥1,푥2,…,푥7,
퐸={푥1푥4푥6,푥2푥5푥6,푥2푥5푥7,푥3푥4푥7}
45. KOM – Multimedia Communications Lab
50
How to weight the edges in an k-uniform, n-partite graph to recommend other related vertexes of a disjunctive set?
How to calculate a betweenness centrality of resources in such n- partite graphs with users, resources and tags?
Emerging aspects
See lectures 8 and 9 on recommender Systems in SLKST context
46. KOM – Multimedia Communications Lab
51
Approaches to Modern Web Application Development MVC, ACID, CRUD REST, LAMP, MEAN, PaaS
Social Media Systems Design Aspects
Graph Theory Basics Centrality metrics of (un)directed graphs N-partite, k-uniform hypergraphs
Image sources: http://www.seawaterfoundation.org/siteImages/rivers_art.jpg,, http://vnfa8y5n3zndutm1.zippykid.netdna-cdn.com/wp-content/uploads/2011/12/url7.jpg, http://images.all-free- download.com/images/graphiclarge/s_bahn_71263.jpg, http://de.roblox.com/item.aspx?seoname=U-Bahn&id=28172595, http://faculty.kutztown.edu/rieksts/225/graphs/tripartite_files/image002.jpg,
Summary
Content vs. User
Roles, Levels, Badges, Achievements
Relationship Types
푥1
푥2
푥3
푥4
푥5
푥6
푥7
Adjacence list 퐴=푥2,푥3,푥1,푥3,푥4,푥2,푥4,푥5,푥1,푥2,푥3,푥3
Responsibilities and Democracy
Ambient Intimacy
47. KOM – Multimedia Communications Lab
52
Task1 (2p)
Designing the relation of system design aspects and 3 systems as a graph (connecting social System Design Patterns with Graph Theory) Task 2 (2p) A new (fictive) SLKS system is described
Define and describe 6 types of relationships
How would you implement a reputation/progress system if you have to choose one pattern?
How do you handle content administration? A bonus challenge is included (task 1)
About the Exercise 3
48. KOM – Multimedia Communications Lab
53
Learner Models & Profiles
Learning Resources
Data Structures for Learning Content
Metadata to describe Learning Resources
Tags to describe Learning Resources
Next week: Lecture 4 Data Structures for Learner and Resources
Knowledge
Topics
Misconceptions
Learning Styles
Experience
…
49. KOM – Multimedia Communications Lab
54
Thank you for your attention, questions, feedback or hints.
Endslide
km-teaching@KOM.tu-da…. .de
km-teaching@KOM.tu-da…. .de
50. KOM – Multimedia Communications Lab
55
REST, see JAX-RS specs and https://jersey.java.net/documentation/latest/getting-started.html
Crumlish, C.; Malone, E.: Designing Social Interfaces: Principles, Patterns, and Practices for Improving the User Experience (Animal Guide) (p. 520). Sebastopol, USA: O’Reilly Media, 2009. Letzter Zugriff von http://www.amazon.com/Designing-Social-Interfaces-Principles-Experience/dp/0596154925
Bell, G.: Building Social Web Applications. Bell, Gavin . Sebastopol: O’Reilly Books, 2009. Letzter Zugriff 29.10.2014 von http://www.amazon.com/Building-Social-Applications-Gavin-Bell/dp/0596518757
Konert, J.; Gerwien, N.; Göbel, S.; Steinmetz, R. Bringing Game Achievements and Community Achievements Together. In Proceedings of the 7th European Conference on Game Based Learning (ECGBL) 2013, pages 319–328, Porto Portugal, 2013. Academic Publishing International. ISBN 978-1- 909507-63-0.
Konert, J.: Interactive Multimedia Learning: Using Social Media for Peer Education in Single-Player Educational Games (p. 220). Darmstadt, Germany: Springer, 2014. Letzter Zugriff von http://www.springer.com/engineering/signals/book/978-3-319-10255-9
Diestel, R.: Graph Theory (Graduate Texts in Mathematics) (3rd ed.). Springer, 2006. Letzter Zugriff 30.10.2014 von http://www.amazon.de/Graph-Theory-Graduate-Texts-Mathematics/dp/3540261834/
Oellermann, O. R.: Topics in Structural Graph Theory. (L. W. Beinecke & R. J. Wilson, Hrsg.). Cambridge, MA, USA: Cambridge University Press, 2013.
INSNA, International Network for Social Network Analysis, 2004. SNA Measures. , p.1. Available at: https://www.socialtext.net/data/workspaces/insna- socnet/attachments/index_of_sna_measures:20041202193540/original/Index of SNA Measures.xls.
Wikipedia, Hypergraphs, Letzer Zugriff 30.10.2014 von http://en.wikipedia.org/wiki/Hypergraph#Bipartite_graph_model
References (order of occurance)
51. KOM – Multimedia Communications Lab
56
REST, see JAX-RS specs and https://jersey.java.net/documentation/latest/getting-started.html
Crumlish, C.; Malone, E.: Designing Social Interfaces: Principles, Patterns, and Practices for Improving the User Experience (Animal Guide) (p. 520). Sebastopol, USA: O’Reilly Media, 2009. Letzter Zugriff von http://www.amazon.com/Designing-Social-Interfaces-Principles-Experience/dp/0596154925
Bell, G.: Building Social Web Applications. Bell, Gavin . Sebastopol: O’Reilly Books, 2009. Letzter Zugriff 29.10.2014 von http://www.amazon.com/Building-Social-Applications-Gavin-Bell/dp/0596518757
Diestel, R.: Graph Theory (Graduate Texts in Mathematics) (3rd ed.). Springer, 2006. Letzter Zugriff 30.10.2014 von http://www.amazon.de/Graph-Theory-Graduate-Texts-Mathematics/dp/3540261834/
Further Readings
52. KOM – Multimedia Communications Lab
57
Directly named on the corresponding slides
Image Sources