-
Notifications
You must be signed in to change notification settings - Fork 0
/
streem.html
72 lines (66 loc) · 5.25 KB
/
streem.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Streem - Andreas Metzger</title>
<meta name="description" content="Andreas Metzger Portfolio Project">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,400italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/vendor/normalize.css">
<link rel="stylesheet" href="css/vendor/highslide.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<h1>Streem</h1>
<hr id="headhr"/>
</header>
<main>
<div class="main">
<figure class="main">
<a href="img/streem/scr1.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="img/streem/scr1.jpg" alt="Zoom Image"
title="Click to enlarge"/></a>
<figcaption><span>Figure 0:</span> Streem displaying a news article. Paragraphs are grouped logically and overlayed with automatically generated catchphrases that summarize the respective paragraph, enabling efficient skimming. The user is free to view the paragraphs that he deems the most relevant. User comments and a web of related articles are floating in the background.</figcaption>
</figure>
<figure class="small">
<a href="img/streem/scr2.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="img/streem/scr2.jpg" alt="Zoom Image"
title="Click to enlarge"/></a>
<figcaption><span>Figure 1:</span>A news grid shows all recent articles with their topic and core actor. The user can select articles, save them for later or indicate his interest in these information for the underlying learning system.</figcaption>
</figure>
<figure class="small">
<a href="img/streem/scr3.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="img/streem/scr3.jpg" alt="Zoom Image"
title="Click to enlarge"/></a>
<figcaption><span>Figure 2:</span>After selecting an article the user is presented with more information and summaries. Related information is presented chronologically in the background.</figcaption>
</figure>
<figure class="small">
<a href="img/streem/scr4.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="img/streem/scr4.jpg" alt="Zoom Image"
title="Click to enlarge"/></a>
<figcaption><span>Figure 3:</span>The timeline on the left-hand side can be used to rotate the 3D space and further inspect the relational tree.</figcaption>
</figure>
</div>
<section class="main">
<p>The presented images are in-browser screenshots from a working prototype.</p><p>Since the prototype used experimental web technologies that have now changed it is currently unavailable, unfortunately.</p>
<h3>Description:</h3>
<p>Streem is a user interface prototype that enables multidimensionalization for usually onedimensional news streams.</p>
<p>The idea and its prototype were realized in the context of a user interface design project whose goal was to develop experimental, cutting edge user interfaces that aid the user in reducing the information overflow he is exposed in todays modern digital environment. Streem addresses the challenge of people traversing great amounts of news streams everyday to find news that are truly relevant to them.</p>
<p>Streem is an application that analyzes news articles, identifies relations with other articles and summarizes them automatically so users can determine the relevance of the respective articles efficiently. By providing multiple views on an article with different information densities and user controls to indicate the personal relevance of an article to the system, Streem will eventually learn to propose relevant articles automatically to the user. Streem accumulates news streams from various sources (news sites), homogenizes them and displays relations between articles, even across sources. This contextualization enables Streem not only to display news articles and their relations grouped by topic. By setting information in context to other, already known information Streem enables the user to absorb new information much faster. The tree view visualization of articles furthermore boosts the discovery of interesting links between pieces of information that would otherwise have gone unnoticed, strenghening the user's understanding of the information's topic as a whole.</p>
</section>
</main>
<footer>
<div><div>
<p>©2016 Andreas Metzger</p>
</div></div>
</footer>
<!--
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
-->
<script src="js/vendor/highslide-full.js"></script>
<script src="js/slide_basic.js"></script>
</body>
</html>