In-page structures allow content to be fragmented and organized in the proper manner for best viewing experience.
Traditionally, it requires coding to achieve such structures which not only requires technical knowledge and experience, but also very time consuming. At the code level, it is easy to make mistakes too.
This system offers a lot of in-built page structure so that Content Creators can easily choose to use without coding. Even if coding is not a problem, it allows content creators to focus on the content rather than in the display formats, structures and layouts.
This page illustrates what kind of structures are available which are of interest to the project.
Learning from the journalists, content in columns are much easier to read. That's why it always appears in newspapers, magazines and most printed publications.
Traditionally most web pages are presented in a single page format. To put content in columns, it requires coding. But most content creators are not programmers.
However, a single straight line format is now also applicable on mobiles. The limited width of display on mobile phones is a narrow column by nature.
The KHub system is designed with 'responsive' meaning that the same web page when viewed on desktop or on mobile, it will response by automatically changing its layout.
Columns
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
With tabs, there are many advantages:
- Better organize content into different focus
- Page under each individual tab may make use of entire width of the page for maximum view
- Allow quick access to focused content on-demand by going direct to the designated tab of interest
When the page is organized, it also creates a nice psychological feeling by the viewers compared with a non-organized long pages. It appears as a much cleaner layout.
In this system, it supports horizontal tabs. But in fact, vertical tabs are also available. However
- Vertical tabs requires coding. It can be made but requires more technical knowledge.
- The vertical tab occupies around 1/3 to 1/4 of the page, reducing the maximum viewable area.
Below is an example.
and the codes to create this vertical tab is below:
<div role="tabpanel" class="nav-tabs-vertical-container">
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-tabs--vertical" role="tablist">
<li role="presentation" class="nav-item">
<a class="nav-link active" href="#vertical-tab-1" aria-controls="vertical-tab-1" role="tab" data-toggle="tab">Home</a>
</li>
<li role="presentation" class="nav-item">
<a class="nav-link" href="#vertical-tab-2" aria-controls="vertical-tab-2" role="tab" data-toggle="tab">Profile</a>
</li>
<li role="presentation" class="nav-item">
<a class="nav-link" href="#vertical-tab-3" aria-controls="vertical-tab-3" role="tab" data-toggle="tab">Messages</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade show active" id="vertical-tab-1">
<p><strong>Home</strong> ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, exercitationem, quaerat veniam repudiandae illo ratione eaque omnis obcaecati quidem distinctio sapiente quo assumenda amet cumque nobis nulla qui dolore autem.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="vertical-tab-2">
<p><strong>Profile</strong> ipsum dolor sit amet, consectetur adipisicing elit. Ut odio facere minima porro quis. Maiores eius quibusdam et in corrupti necessitatibus consequatur debitis laudantium hic.</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="vertical-tab-3">
<p><strong>Messages</strong> ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, optio error consectetur ullam porro eligendi mollitia odio numquam aut cumque. Sed, possimus recusandae itaque laboriosam nesciunt voluptates veniam aspernatur voluptate eaque ratione totam ipsa optio aliquam incidunt dolorum amet illum.</p>
</div>
</div>
</div>
Content Creators can flexibly:
- Decide how many tabs to go
- Decide the tab titles they consider suitable. Normally the tab titles should be short
The consideration to use a tab structure is its appearance when there are too many tabs.
It is possible to create tabs of different levels. That means under each tab, content creators can create a second level of tabs. This page is exactly an example where there are 2 levels of tabs.
It can also happen that under the 1st tab, it is a simple text. On the 2nd tab it consists of 2 levels. On the 3rd tab, it can have 3 levels.
This is made possible by using the Nesting structure.
Collapses are also called Accordions. It is best used for a vertical on-demand structure inside the web page, such as FAQ.
- It helps to dramatically save a lot of space for those content which are not absolutely necessary, but at the same time make it available when needed.
- Allow fast search of answers.
When properly used, it can dramatically improve user experience.
Compared with vertical tabs, collapses or accordions make sure of entire width across the page, whereas for vertical tabs, the tab sidebar always take up 1/3 to 1/4 of the horizontal width.
It is quite common on mobiles too, because it is particularly important for space layout on mobiles.
Collapses or accordions can be applied for different purposes, up to the design of the content creator.
It is up to the content creator to:
- Decide how many collapses / accordions to use
- Decide what text to be used for the accordion titles or content
- It still matters from the perspective of user experience. In most cases, up to 6 collapses is appropriate
With the flexible structures supported in this KHub system, it is a good idea to add collapses / accordions to other content side-by-side, which serves as an assistant to users at that particular job of focus.
Following is an example which can give additional guidance to users in case they come across any questions. Use of FAQ can also release to a certain extent the burden of administrators by pro-actively providing these commonly seen problems.
What this report is about
- Admission
- Graduation
- Academic Performance
- Learning Outcomes
- Assessment of Performance
- Seven Attributes
- SFQ
- Institutional Surveys
FAQ
The information covered in this report ranges from 2015 to 2017.
The purpose of preparing these information is to give relevant and appropriate insights and feedback from reality.
In order to keep it confidential, only authorized people of the appropriate department will access those information relevant to them. Please do not circulate the links or the information provided here.
If there are any further information, please feel free to contact us by clicking the following button.
A carousel is a structure with rotating content normally once every 5-8 seconds. It is sometimes also called slideshows or rotating banner, which are very often seen on the front page of websites. The aim of carousels is mainly to draw attentions of the users.
The automatic self-rotating nature make things visible to the users drawing their attention. Normally videos or pictures are used for an eye-catching effect.
In commercial applications, it is often used for advertisement or promotions, with a CTA (call-to-action) button on the side. In an intranet, it can be used for internal promotions or notifications. It can also be used with proper content to promote organizational culture.
In fact, its rotating slide nature can also be visualized similar to a powerpoint presentation. It can be used for some simple training when no verbal explanation is necessary.
With the rich structural mechanism, a carousel can be much more fun because, for example:
- Carousel can contains not only pictures but also videos, or more ...
- Inside a carousel, it can be dual column, one column for video or pictures, another column for text
For each carousel, the time-to-rotate can be separately configured by the content creator.
Normally, a carousel can only be available on the top of the page. However, in this KHub system, it can be placed in any part of the page with the paragraph concept.
Following are some examples of carousels.
How Culture Drives Behaviours
In this video, Julien explains how we see the world through cultural glasses. By changing the glasses, you can change the way you interpret the world.
From Culture into Trust
In this video, Niall Ferguson outlines the compliance issue that has arisen over the past few decades, as highly regulated institutions have left ethics at the door in favour of profits, resulting in significant growth in public cynicism.
What is Culture
Culture is the system of shared beliefs, values, customs, behaviors, and artifacts that the members of society use to cope with their world and with one another, and that are transmitted from generation to generation through learning.
Culture is learned, shared, symbolic, all-encompassing, integrated. They are organized around a set of core values - key, basic or central values. New ideas that don't fit with these core values are rejected.
The Unspoken Reality
In this video, Sam and Frodo go through 2 conversations that show just how much they missed home. They expect their adventure to be far different than what it is.
Respect and Honor
In this video, Carter is introduced to the team. He starts by telling the boys that they are 'sirs' because they deserve respect but only until they abuse it. He gives them contracts that states that the kids will maintain their GPA grades and sit at the front row of those classes in order to pay basketball.
By combining different in-page structures and features together, more complicated layouts can be formed. It is a matter of how the content creators make their own design.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
Accordion Section 1: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Accordion Section 2: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Accordion Section 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Wiki is an important structure in Knowledge Management. To illustrate the wiki structure, these pages are all embedded inside a wiki structure.
Characteristics of a wiki structure include:
- Auto table of content for navigation
- In this system it is the table of content on the left sidebar. It is generated automatically.
- Links to go forward, backward or up
- In this system, they can be found at the bottom of every wiki page
- Re-ordering of hierarchy
- Order of sequence of wiki pages can be modified and same in this system. Of course, only authorized people can do that to avoid destruction of the overall structure
All 'intranet' (internal) pages can be easily organized by classification under a controlled taxonomy mechanism, which we call taxo-menu.
There are 2 levels of taxo-menu classification:
- The 1st level is a scenario-based classification, which defines the type of job or situation.
- The 2nd level is classification of pages frequently used in that particular type of job or situation.
The level 1 scenario can be chosen from the intranet menu after entering the intranet mode. The level 2 classified taxo-menu corresponding to the level 1 scenario will be available in the slide-out panel. Switching of level 1 scenario will change to a different set of level 1 taxo-menu.
This is a very special and unique feature of this KHub system, with the purpose of fast finding and reaching to the right page of information within 2~3 clicks. This design originally came from the use of Stream Deck, which work as a side panel for fast access and switching tools for online broadcasting.
The same mechanism can be customized for access of information for different departments, different teams or different projects in an organization.
It is difficult to understand with a verbal description. Please contact KF for a simple demonstration.
The KHub systems comes with a very nice taxonomy mechanism. Taxonomy can be built with multi-levels and multi-dimensional, free entries or controlled.
In fact, taxonomy is not only classification of pages. This in-page structure is another type of taxonomy which classify different parts of content and make it well organized.
In real life, building a taxonomy requires customization, and requires updates and attention from time to time. No easy demonstration can be shown. Here is a demo of Knowledge Base Building where some examples of taxonomy can be found.
A mockup system to manage customer relations
A mockup system for a medical association with 6 different areas for different users
Logins to see different areas for different types of users