modules structure

visualengineers · Sep 27, 2020 · f881a26 · f881a26
1 parent bcd5e27
commit f881a26
Show file tree

Hide file tree

Showing 106 changed files with 5,792 additions and 1,220 deletions.
diff --git a/_concepts/emulator.md b/_concepts/emulator.md
@@ -0,0 +1,15 @@
+---
+layout: concept
+title: Emulator
+description: Emulator
+category: technology
+image: 
+image-credits:
+---
+
+<details markdown="1" open>
+<summary><h3>Examples</h3></summary> 
+
+There is no example yet. Feel free to <a href="{{ site.repo }}/edit/master/{{ page.path }}" target="_blank"><i class="fa fa-edit fa-fw"></i> edit this page</a>.
+
+</details>
diff --git a/_concepts/gestalt-principles.md b/_concepts/gestalt-principles.md
@@ -1,31 +1,50 @@
----
+---
 layout: concept
 title: Gestalt Principles
 description: Gestalt Principles in SCI Knowledge Base
 category: user experience
+image: https://upload.wikimedia.org/wikipedia/commons/e/e2/Gestalt.svg
+image-credits: Photo by Valessio / CC BY on <a href="https://creativecommons.org/licenses/by/4.0">https://creativecommons.org/licenses/by/4.0</a>
 ---
-The Gestalt Principles of Visual Perception are a set of rules based on psychological theories of human perception. They were developed in the 1920s by German psychologists Max Wertheimer, Kurt Koffka and Wolfgang Kohler.They stated that the human brain is wired to see structure, logic, and patterns in order to make sense of the world around us. In other words, humans want to see structure by default. The principles are widely used in modern design asthey help designers to determine which design elements are the most effective ones in order to get the user's attention, and create easy-to-use, intuitive products.
+The Gestalt Principles of Visual Perception are a set of rules based on psychological theories of human perception. They were developed in the 1920s by German psychologists Max Wertheimer, Kurt Koffka and Wolfgang Kohler who stated that the human brain is wired to see structure, logic, and patterns in order to make sense of the world. In other words, humans want to see structure by default. The principles are widely used in modern design asthey help designers to determine which design elements effectively catch the user's attention, and create easy-to-use, intuitive products. The six most common rules are listed below.
+
+<details markdown="1" open>
+<summary><h3>Figure-ground</h3></summary> 
+Humans organize their perception by interpreting closed shapes to be figures on a ground.
+</details>
+
+<details markdown="1" open>
+<summary><h3>Proximity</h3></summary> 
+Elements which are near to each other tend to be perceived as group.
+</details>
+
+<details markdown="1" open>
+<summary><h3>Common fate</h3></summary> 
+Elements pointing or moving in the same direction are perceived as group.
+</details>
 
-## Figure-ground
+<details markdown="1" open>
+<summary><h3>Similarity</h3></summary> 
+Similar looking elements tend to be perceived as group.
+</details>
+
+<details markdown="1" open>
+<summary><h3>Continuity</h3></summary> 
+Humans recognize oriented elements as perceptual wholes and follow them in visual flow.
+</details>
+
+<details markdown="1" open>
+<summary><h3>Closure</h3></summary> 
+Humans tend to automatically fill the gaps between visual elements to complete shapes.
+</details>
 
-## Similarity
 
-## Proximity
 
-## Common region
 
-## Continuity
 
-## Closure
 
-## Focal point
 
-<details markdown="1" open>
-<summary><h3>Examples</h3></summary> 
 
-![paper-prototyping]({{ site.baseurl }}/assets/img/paper_prototyping.JPG)
 
-![paper-prototyping1]({{ site.baseurl }}/assets/img/paper_prototyping1.JPG)
 
-</details>
 
diff --git a/_concepts/materiality.md b/_concepts/materiality.md
@@ -0,0 +1,17 @@
+---
+layout: concept
+title: Materiality
+description: materiality in SCI Knowledge Base
+category: design
+image: 
+image-credits: 
+---
+...
+
+<details markdown="1" open>
+<summary><h3>Examples</h3></summary> 
+
+![moodboard]({{ site.baseurl }}/assets/img/moodboard.png)
+
+</details>
+
diff --git a/_concepts/online-collaboration b/_concepts/online-collaboration
@@ -0,0 +1 @@
+
diff --git a/_concepts/projection.md b/_concepts/projection.md
@@ -0,0 +1,15 @@
+---
+layout: concept
+title: Projection
+description: projection
+category: technology
+image: 
+image-credits:
+---
+
+<details markdown="1" open>
+<summary><h3>Examples</h3></summary> 
+
+There is no example yet. Feel free to <a href="{{ site.repo }}/edit/master/{{ page.path }}" target="_blank"><i class="fa fa-edit fa-fw"></i> edit this page</a>.
+
+</details>
diff --git a/_concepts/software-framework.md b/_concepts/software-framework.md
@@ -0,0 +1,15 @@
+---
+layout: concept
+title: REFLEX Software Framework
+description: REFLEX Software Framework
+category: technology
+image: 
+image-credits:
+---
+
+<details markdown="1" open>
+<summary><h3>Examples</h3></summary> 
+
+There is no example yet. Feel free to <a href="{{ site.repo }}/edit/master/{{ page.path }}" target="_blank"><i class="fa fa-edit fa-fw"></i> edit this page</a>.
+
+</details>
diff --git a/_concepts/sustainable-materials.md b/_concepts/sustainable-materials.md
@@ -0,0 +1,33 @@
+---
+layout: concept
+title: Sustainability
+description: Sustainability
+category: society
+image: 
+image-credits:
+---
+Designing, prototyping and implementing shape-changing interfaces comes along with a high material consumption. Some of it already becomes waste after a short time what is best to avoid. In other words: The most sustainable material is the one that has never been used. Therefore, digitalize the design process if possible, hold online workshops, use emulators for prototyping, and reuse materials. If the use of new materials is necessary, sustainable materials that can be recycled and biodegrades should be preferred.
+
+**6 R's of Sustainability**
+
+- Reduce
+- Reuse
+- Recycle
+- Refuse
+- Rethink
+- Repair
+
+<details markdown="1" open>
+<summary><h3>Examples</h3></summary> 
+
+**Sustainable Fabrics**
+
+As it comes to elastic displays, the fabric on the surface must have sufficient elasticity and durability to withstand all user inputs and long-term installations. An option to consider is lyocell (also: tencel), which is not only elastic and durable, but also anti-bacterial and available in various textures.
+
+![Natural + Sustainable Fabric Guide](https://i.pinimg.com/originals/e2/e3/c0/e2e3c05376ea204f263dc378da255f77.jpg){:.responsive-media}
+
+**Digital Prototyping**
+
+Currently, we are developing an emulator for elastic displays. We hope, that it can be tested here soon.
+
+</details>
diff --git a/_concepts/tracking-technologies.md → _concepts/tracking.md b/_concepts/tracking-technologies.md → _concepts/tracking.md
@@ -1,7 +1,7 @@
 ---
 layout: concept
-title: Tracking Technologies
-description: tracking technologies in interactive visualizations
+title: Tracking
+description: tracking
 category: technology
 image: https://images.unsplash.com/photo-1549317336-206569e8475c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1834&q=80
 image-credits: Photo by <a href="https://unsplash.com/@zaks?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Zak Sakata</a> on <a href="/collections/9826918/laser%2Fled-lights?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a>

diff --git a/_data/navigation.yml b/_data/navigation.yml
@@ -1,10 +1,8 @@
 - title: About
   url: index
-- title: Best Practices
-  url: best-practices
-- title: Terms & Concepts
-  url: terms-and-concepts
+- title: Modules
+  url: index/#modules
+- title: Topics
+  url: topics
 - title: Resources
   url: resources
-- title: News
-  url: news
diff --git a/_data/toc.yml b/_data/toc.yml
@@ -1,16 +1,18 @@
-- title: About SCI-KB
+- title: About
   url: index
 
 - title: Modules
-  url: index/#modules
+  url: index
   links:
+    - title: Terms
+      url: terms
+    - title: Concepts
+      url: concepts
     - title: Best Practices
       url: best-practices
-    - title: Terms & Concepts
-      url: terms-and-concepts
 
 - title: Topics
-  url: index/#topics
+  url: topics
   links:
     - title: "Design"
       url: "design"
@@ -22,7 +24,7 @@
       url: "user-experience"
 
 - title: Workshop
-  url: index/#workshop-builder
+  url: workshop-builder
   links:
     - title: Interview
       url: interview-workshops

diff --git a/_layouts/best-practice.html b/_layouts/best-practice.html
@@ -23,7 +23,7 @@ <h4 class="strap">Best Practice</h4>
 <hr class="panel-line">
 
 <!--other best practices in same topic-->
-More Best Practices in <a class="capitalizeAll topic topic-{{ page.category | downcase | strip }}" href="{{ site.baseurl }}/{{ page.category | downcase | strip }}/">{{ page.category }}</a>
+More Best Practices in <a class="capitalizeAll topic topic-{{ page.category | downcase | strip }}" href="{{ site.baseurl }}/{{ page.category | downcase | strip  | replace:'user experience', 'user-experience' }}/">{{ page.category }}</a>
 
 <!-- ...in same category -->
 {% assign best-practices = site.best-practices | where: "category", page.category %}

diff --git a/_layouts/topic.html b/_layouts/topic.html
@@ -5,10 +5,12 @@
 <h4 class="strap">Topic</h4>
 <h1 class="capitalizeAll topic-{{ page.title | downcase | strip | replace:'user experience', 'user-experience'}} topic-headline">{{ page.title }}</h1>
 
+{{ page.description }}
+
 {{ content }}
 
-<h3>Best Practices</h3>
 {% assign best-practices = site.best-practices | where: "category", page.title %}
+<h3>Best Practices ({{ best-practices.size }})</h3>
 
 <ul class="tile">
 {% for item in best-practices %}
@@ -21,19 +23,18 @@ <h5>{{ item.title }}</h5>
 {%endfor%}
 </ul>
 
-<h3>Terms</h3>
-
-<!--<span class="capitalizeAll">{{ page.category | downcase | replace:'user-experience', 'User Experience' }}</span>-->
 {% assign terms = site.terms | where: "category", page.title %}
+<h3>Terms ({{ terms.size }})</h3>
+
 <ul class="plain column">
   {% for item in terms %} 
   <li><a href="{{ item.url | prepend: site.baseurl }}" alt="{{ item.description }}">{{ item.title }}</a></li>  
   {% endfor %}
 </ul>
 
-<h3>Concepts</h3>
-
 {% assign concepts = site.concepts | where: "category", page.title %}
+<h3>Concepts ({{ concepts.size }})</h3>
+
 <ul class="tile">{% for item in concepts %} 
   <li>
     <a href="{{ item.url | prepend: site.baseurl }}" alt="{{ item.description }}">
@@ -50,13 +51,9 @@ <h3>Concepts</h3>
 {% endfor %}
 </ul>
 
-
-
-
-
 <hr class="panel-line">
 <h4>Other Topics</h4>
-{% assign groups = site.best-practices | group_by: "category" | where_exp: "group", "group.name != page.title"%}
+{% assign groups = site.best-practices | group_by: "category" | where_exp: "group", "group.name != page.title" %}
 {% for group in groups %}
 <a class="capitalizeAll topic topic-{{ group.name | downcase | strip | replace:'user experience', 'user-experience'}}" href="{{ site.baseurl }}/{{ group.name | downcase | strip | replace:'user experience', 'user-experience' }}/">{{ group.name }}</a>
 {% endfor %}

diff --git a/_site/2019/daten-zum-anfassen/index.html b/_site/2019/daten-zum-anfassen/index.html
@@ -61,17 +61,14 @@
           <a class="nav-link" href="/sci-knowledge-base/index" ><span>About</span></a>
 			</li>
 			<li class="nav-item mr-4 mb-2 mb-lg-0">
-          <a class="nav-link" href="/sci-knowledge-base/best-practices" ><span>Best Practices</span></a>
+          <a class="nav-link" href="/sci-knowledge-base/index/#modules" ><span>Modules</span></a>
 			</li>
 			<li class="nav-item mr-4 mb-2 mb-lg-0">
-          <a class="nav-link" href="/sci-knowledge-base/terms-and-concepts" ><span>Terms & Concepts</span></a>
+          <a class="nav-link" href="/sci-knowledge-base/topics" ><span>Topics</span></a>
 			</li>
 			<li class="nav-item mr-4 mb-2 mb-lg-0">
           <a class="nav-link" href="/sci-knowledge-base/resources" ><span>Resources</span></a>
 			</li>
-			<li class="nav-item mr-4 mb-2 mb-lg-0">
-          <a class="nav-link" href="/sci-knowledge-base/news" ><span>News</span></a>
-			</li>
 		</ul>
 	</div>
 	<div class="navbar-nav d-none d-lg-block">
@@ -112,15 +109,15 @@
 
   <ul class="td-sidebar-nav__section pr-md-3">
     <li class="td-sidebar-nav__section-title">
-      <a  href="/sci-knowledge-base/index" class="align-left pl-0 pr-2 active td-sidebar-link td-sidebar-link__section">About SCI-KB</a>
+      <a  href="/sci-knowledge-base/index" class="align-left pl-0 pr-2 active td-sidebar-link td-sidebar-link__section">About</a>
     </li>
 
 
   </ul>
 
   <ul class="td-sidebar-nav__section pr-md-3">
     <li class="td-sidebar-nav__section-title">
-      <a  href="/sci-knowledge-base/index/#modules" class="align-left pl-0 pr-2 active td-sidebar-link td-sidebar-link__section">Modules</a>
+      <a  href="/sci-knowledge-base/index" class="align-left pl-0 pr-2 active td-sidebar-link td-sidebar-link__section">Modules</a>
     </li>
 
 
@@ -130,7 +127,7 @@
 
 
             <li class="td-sidebar-nav__section-title">
-              <a href="/sci-knowledge-base/best-practices" class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section">Best Practices</a>
+              <a href="/sci-knowledge-base/terms" class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section">Terms</a>
             </li>
 
             <ul>
@@ -142,7 +139,19 @@
 
 
             <li class="td-sidebar-nav__section-title">
-              <a href="/sci-knowledge-base/terms-and-concepts" class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section">Terms & Concepts</a>
+              <a href="/sci-knowledge-base/concepts" class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section">Concepts</a>
+            </li>
+
+            <ul>
+              <li class="collapse show" id="">
+
+
+              </li>
+            </ul>
+
+
+            <li class="td-sidebar-nav__section-title">
+              <a href="/sci-knowledge-base/best-practices" class="align-left pl-0 pr-2 td-sidebar-link td-sidebar-link__section">Best Practices</a>
             </li>
 
             <ul>
@@ -162,7 +171,7 @@
 
   <ul class="td-sidebar-nav__section pr-md-3">
     <li class="td-sidebar-nav__section-title">
-      <a  href="/sci-knowledge-base/index/#topics" class="align-left pl-0 pr-2 active td-sidebar-link td-sidebar-link__section">Topics</a>
+      <a  href="/sci-knowledge-base/topics" class="align-left pl-0 pr-2 active td-sidebar-link td-sidebar-link__section">Topics</a>
     </li>
 
 
@@ -228,7 +237,7 @@
 
   <ul class="td-sidebar-nav__section pr-md-3">
     <li class="td-sidebar-nav__section-title">
-      <a  href="/sci-knowledge-base/index/#workshop-builder" class="align-left pl-0 pr-2 active td-sidebar-link td-sidebar-link__section">Workshop</a>
+      <a  href="/sci-knowledge-base/workshop-builder" class="align-left pl-0 pr-2 active td-sidebar-link td-sidebar-link__section">Workshop</a>
     </li>