LEARN@IGP
1
Introduction to IGP:Widgets
A general introduction and overview of the core IGP:Widgets library with guidelines on best usage. Updated: 28 November 2016
IGP:Widgets is a set of IGP:FoundationXHTML (FX) content block tagging patterns with Javascript assistance. They allow the very fast assembly of interactive content for any purpose.
IGP:Widgets are strictly HTML5, CSS-3 and Javascript and will work in any browser, device or reading system that supports (X)HTML5.
Tagging Patterns
IGP:Widgets conform to the IGP:FoundationXHTML tagging pattern method of construction. This allows consistent structural and semantic construction, editing and reuse of content in any context. Because they are independent content blocks they can be extracted and reused at any time.
Multiple Format Production
IGP:Widgets are compatible with all formats generated by IGP:Digital Publisher and IGP:Formats on Demand.
They can be used in any HTML5 content delivery format including Static Sites, SCORM packages and ePub 3 where reading systems support Javascript.
Widgets can be used for print PDF formats as static laid-out content as well as dynamic presentation tools in online content. If Widget content is unsuitable for print presentation FX exclude- selectors or Design Profiles can be used to insert alternative content for various formats.
The Widgets
Panel Sliding
Panel Sliding is designed for the quick assembly of a image gallery. It is a straight-forward HTML5 un-ordered list with an image and caption in each item.
The Image Sliding Widget is designed specifically for the very fast production of vertical or horizontal slide-shows of images and their captions. While other content can be included it is best to use Tutorial Panels if that is a requirement.
Tutorial Panels
Tutorial panels are designed to present more complex, multi-panel structured content in a sliding container viewport. These can contain any other content including any other FX tagging pattern blocks such as Questions and Answers and more.
The Tutorial Panel Widget allows the sequential presentation of sophisticated content. It can be designed to take over an entire viewport (in fixed layout mode) and contain any number of panels with any amount of content and interactivity. Again you have to test rigorously on tablet readers if you are planning on using a lot of hidden content.
The Tutorial Panels Tutorial ▶
Scrolling Panels
Scrolling panels are useful for the presentation of large content blocks in a smaller viewport. The user can slide the content left and right, up and down or on both X and Y axises to explore the container content.
The Scrolling Panel Widget can contain any other type of content. There are limitations on the dimension of that content and how-well it will perform in tablet reading system platforms. For example the scrolling table example presented here will not work in Apples iBooks at present.
The Scrolling Panels Tutorial ▶
Locked Panel
A locked panel puts a fixed panel at the top of a section and other content then flows underneath. This is useful for images that are referred to from flowing text or have a large question set about the image (as an example).
Popup Text
Any content can be a reference for a PopUp Text block. This opens in context with the refererence pointer item. It is ideal for sidebar styled content. Within IGP:FoundationXHTML it should not be used for Notes or Footnotes which have their own processing options for linking and pop-ups.
The PopUp Text Widget was designed primarily for text presentation and is ideal for Glossary definitions, notes, or other asides. It can contain any other content and images may be very useful.
Reveal
Reveal allows content to be scrolled open and closed through user interaction. It is useful where additional content is required that is an aside to the core content but ideally remains in linear reading context with the parent content.
The Reveal Widget can contain any content including text, images, rich media and interactivity.
Panel PopUp
Panel PopUp Panel is designed to take-over an entire viewport for the undivided attention of the user.
The Panel PopUp Widget can contain any content including text, images, rich media and interactivity.