j1-template 2022.5.0 → 2022.5.1.rc0

data/lib/starter_web/pages/public/_jupyter/where_to_go.adoc

@@ -1,270 +0,0 @@
----
-title:                                  Where to go
-tagline:                                presenting data analysis projects
-date:                                   2022-03-28 00:00:00
-description: >
-                                        The package nbinteract aims to enable authors and educators to create and
-                                        share interactive web pages easily. Interactive explanations of concepts are
-                                        useful for communicating and explaining tricky concepts.
-keywords: >
-                                        opensource, free, load, download, start, starter, example,
-                                        high, easy, use, secure, encrypt, standard, popular,
-                                        generate, create, learn, distribute, publish, deploy,
-                                        beginner, advanced, expert, student, learner, educator,
-                                        writer, reader, visitor,
-                                        framework, toolkit, integration, extension, module, api,
-                                        dynamic, static, generator, client, server, internet, local, localhost,
-                                        page, web, website, webdesign, material, design, responsive,
-                                        javascript, nodejs, ruby, windows, linux, osx, mac, os,
-                                        http, https, html, html5, css, scss, style,
-                                        browser, firefox, chrome, edge, opera, safari,
-                                        configuration, generator, navigation, menu, dropdown, fab, action, button,
-                                        application, interface, provider, api, repository,
-                                        cookie, language, translation, gdpr, dsgvo, privacy,
-                                        asciidoc, aciidoctor, bootstrap, jekyll, liquid,
-                                        hyvor, disqus, git, github, netlify, heroku, apple, microsoft,
-                                        provider, service, internet, support,
-                                        google, analytics, advertising, search, console, silverlight, score,
-                                        j1, nbi, j1-nbinteract, nbinteract, template, integration,
-                                        python, jupyter, notebook, textbook, api, app,
-                                        binder, binderhub, jupyterhub
-
-categories:                             [ Software, Python ]
-tags:                                   [ Binder, Jupyter, Notebooks ]
-
-scrollbar:                              false
-fab_menu_id:                            page_ctrl
-personalization:                        true
-
-permalink:                              /pages/public/jupyter/where-to-go/
-regenerate:                             false
-
-resources:                              [ animate, clipboard, rouge ]
-resource_options:
-  - attic:
-      opacity:                          0.3
-      slides:
-        - url:                          /assets/images/modules/attics/tldr-1920x800.jpg
-          alt:                          Photo by Alexander Redl on Unsplash
-          badge:
-            type:                       unsplash
-            author:                     Alexander Redl
-            href:                       https://unsplash.com/@alexanderredl
-
-#      slides:
-#        - url:                          /assets/images/modules/attics/yellow-cactus-1920x1280.jpg
-#          alt:                          Photo by Yellow Cactus on Unsplash
-#          badge:
-#            type:                       unsplash
-#            author:                     Yellow Cactus
-#            href:                       https://unsplash.com/@yellowcactus
----
-
-// Page Initializer
-// =============================================================================
-// Enable the Liquid Preprocessor
-:page-liquid:
-
-// Set (local) page attributes here
-// -----------------------------------------------------------------------------
-// :page--attr:                         <attr-value>
-//
-// :starter-web-enabled:
-:binder-badges-enabled:                 false
-
-:binder-app-launch--lab:                https://mybinder.org/v2/gh/jekyll-one/j1-binder-repo/main
-:binder-app-launch--tree:               https://mybinder.org/v2/gh/jekyll-one/j1-binder-repo/main?urlpath=/tree
-
-:url-j1-notebook--times-tables:         /pages/public/jupyter/examples/distributed/j1-circular-times-table/
-:url-j1-notebook--climate-change:       /pages/public/jupyter/examples/localized/climate-change-forecast/
-:url-j1-altair-local--visualizations:   /pages/public/jupyter/examples/localized/j1-altair-visualizations/
-:url-j1-bokeh-local--visualizations:    /pages/public/jupyter/examples/localized/j1-bokeh-visualizations/
-:url-j1-nbi-module-docs--local:         /pages/public/jupyter/docs/j1-nbinteract-docs/
-:url-j1-nbi-apis-binder--local:         /pages/public/jupyter/docs/binderhub/
-
-//  Load Liquid procedures
-// -----------------------------------------------------------------------------
-{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
-
-// Load page attributes
-// -----------------------------------------------------------------------------
-{% include {{load_attributes}} scope="global" %}
-
-
-// Page content
-// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-// image:/assets/images/badges/myBinder.png[Binder, link="https://mybinder.org/", {browser-window--new}]
-// image:/assets/images/badges/docsBinder.png[Binder, link="https://mybinder.readthedocs.io/en/latest/", {browser-window--new}]
-// See: https://towardsdatascience.com/ordinal-differential-equation-ode-in-python-8dc1de21323b
-
-ifeval::[{binder-badges-enabled} == true]
-image:https://mybinder.org/badge_logo.svg[Binder, link="{binder-app-launch--lab}", {browser-window--new}]
-endif::[]
-
-Jupyter Notebook (JN) is an open source web application based on the programming
-language _Python_ that allows data scientists to create and share documents
-that include explanatory text, live code, equations, and other multimedia
-resources like images or videos.
-
-To understand the technical terms of Jupyter (JN) better, below you find a
-brief description the base components.
-
-Jupyter Notebook App::
-The Jupyter Notebook *App* is a server-client application that allows editing
-and running notebook documents via a web browser. The Notebook App can be
-executed on a local desktop requiring no internet access or can be installed
-on a remote server and accessed through the internet in a cloud.
-
-Notebook documents::
-Notebook documents (or *notebooks* for short) are documents created by the
-Notebook App, and both computer code (e.g., Python) and rich text may contain
-elements (paragraphs, equations, figures, links, etc.). Notebook documents are
-human-readable documents, alongside code descriptions and results like figures,
-tables, etc.
-
-== The J1 Module NBI
-
-The _Python_ package `nbinteract` allows authors to convert Jupyter Notebooks
-into standalone HTML text pages: the *Textbooks*. The containing elements can
-include arbitrary Python code to generate output as well as Python libraries
-like _NumPy_ and _Pandas_ and libraries that create data visualisation like
-_Matplotlib_, _Plotly_,  _Altair_ or _Bokeh_.
-
-*Anyone* with a modern web browser can use the resulting web pages even if
-*no* Python or Jupyter installed on their computer. To make this possible,
-the J1 module *NBI* uses the freely available cloud service _Binder_.
-
-The built-in Starter Web of the template comes with a suitable NBI
-configuration and notebook documents for testing. You can find examples of
-pages that contain interactive textbooks under the menu `Lern` underneath
-the submenu `Experimental|Distributed Notebooks` or
-`Experimental|Localized Notebooks`.
-
-=== Notebooks vs. Textbooks
-
-Jupyter Notebook documents with the extension `.ipynb` are *data* files in
-the JSON format and can only be run using the *App* of Jupyter Notebook. On
-the other hand, Textbooks are HTML exports of Jupyter Notebooks with the
-extension `.html` to be viewed in a web browser without *no* the need using
-a locally installed Jupyter App to be displayed.
-
-For integrating textbooks in webpages, the notebooks with the extension
-`.ipynb` are to be *exported* to HTML (text) files using the Python program
-`nbinteract`. Textbooks that have already been exported can be found for the
-*Starter Web* in the folder `~/pages/public/jupyter/notebooks` in the
-subfolder `textbooks`.
-
-=== Distributed vs. Localized Textbooks
-
-The Python program `nbinteract` can export all types of containing elements of
-a Jupyter Notebook including embedded Javascript code that all
-modern web browsers can run. Important components of Jupyter notebooks are data
-visualizations to make sense of the data presented to the readers. Another
-important feature of Notebooks is *interactivity* which allows to change or
-select specific data elements to vary the output of data visualizations.
-
-The most flexible solution for interactive Notebooks are elements based on
-native Python code. To run the Python code as part of an HTML page, a
-computation engine is required for its execution. To run arbitrary Python code
-for generating output, the services at _Binder_ come into the game. The J1
-module *NBI* process Textbooks that contain Python code by connecting a running
-Jupyter Notebook instance (JN) in the cloud.
-
-Many modern visualization libraries used for Jupyter Notebooks are based on
-pure Javascript code that web browsers can process without the need of an
-additional (external) computation engine.
-
-Distributed Textbooks::
-Distributed Textbooks use embedded Python code that requires an additional
-computation engine. The module NBI of J1 Template connects via the _Binder_
-service for execution to process and display those notebooks. This remote
-execution allows *all* sorts of data visualization and interactivity Jupyter
-Notebooks can offer.
-
-Localized Textbooks::
-If the module NBI detects localized Textbooks, the module interface does
-*not* execute embedded Python code but displays those elements as *static*
-text sections. Data visualization elements are embedded as images or,
-depending on the visualization library used, as Javascript code that can
-be executed natively by a web browser. Available data visualization and
-interactivity depend on the visualization libraries used.
-
-
-== Where to go
-
-To get an impression of what exported Textbooks by the NBI module are and what
-can be achieved for static websites embedding and presenting Jupyter Notebooks
-the reader should first visit the already prepared Textbooks.
-
-Distributed Notebooks::
-Distributed Notebooks demonstrate the full power of the NBI module. An
-interesting example may be the interactive visualization of well-known
-*Time Tables*. This notebook is fun but shows some magic of mathematics.
-
-You find this fun notebook link:{url-j1-notebook--times-tables}[from here, {browser-window--new}].
-
-Localized Notebooks::
-An example of a simple localized notebook is shown by
-link:{url-j1-notebook--climate-change}[Climate Change Forecast, {browser-window--new}].
-The HTML export contains all text, code and graphical elements but is completely
-static, because no interactive elements are provided.
-
-// For a Starter Web, Altair and Bokeh examples are available only from
-// remote (jekyll.one)
-//
-ifdef::starter-web-enabled[]
-Localized Notebooks are in general limited in terms of interactivity and data
-visualization but can achieve *similar* results if a powerful Javascript-based
-visualization the library is used. An excellent example of such a powerful
-Javascript-based visualization library is demonstrated with the tour through
-the (interactive) graphic elements of
-link:{url-j1-bokeh-visualizations--remote}[Bokeh, {browser-window--new}].
-endif::[]
-
-ifndef::starter-web-enabled[]
-Localized Notebooks are in general limited in terms of interactivity and data
-visualization but can achieve *similar* results if a powerful Javascript-based
-visualization the library is used. An excellent example of such a powerful
-Javascript-based visualization library is demonstrated with the tour through
-the (interactive) graphic elements of
-link:{url-j1-bokeh-local--visualizations}[Bokeh, {browser-window--new}].
-endif::[]
-
-// For a Starter Web, NBI Docs and NBI APIs are available only from
-// remote (jekyll.one)
-//
-ifdef::starter-web-enabled[]
-NBI Documentation::
-Find more about how the NBI module works and what resources are used in
-this section. More about the module configuration and how it is used for static
-web pages can be found in this section:
-link:{url-j1-nbi-module-docs--remote}[NBI Docs, {browser-window--new}].
-endif::[]
-
-ifndef::starter-web-enabled[]
-NBI Documentation::
-Find more about how the NBI module works and what resources are used in
-this section. More about the module configuration and how it is used for static
-web pages can be found in this section:
-link:{url-j1-nbi-module-docs--local}[NBI Docs, {browser-window--new}].
-endif::[]
-
-ifdef::starter-web-enabled[]
-NBI APIs::
-More about the backgrounds of the NBI module and what are APIs are used
-under the hood can be found in this section. As the _Binder_ service is
-intensively used for distributed notebooks, more about these background service
-is provided at the
-link:{url-j1-nbi-apis--binder-remote}[Binder API, {browser-window--new}].
-endif::[]
-
-ifndef::starter-web-enabled[]
-NBI APIs::
-More about the backgrounds of the NBI module and what are APIs are used
-under the hood can be found in this section. As the _Binder_ service is
-intensively used for distributed notebooks, more about these background service
-is provided at the
-link:{url-j1-nbi-apis-binder--local}[Binder API, {browser-window--new}].
-endif::[]
-
-Having fun exploring the world of *Data Science* and *Analysis*.

data/lib/starter_web/pages/public/learn/_roundtrip/100_present_images.adoc

@@ -1,313 +0,0 @@
----
-title:                                  Roundtrip
-tagline:                                present images
-date:                                   2020-11-03 00:00:00
-description: >
-                                        Welcome to the preview page focussing on the image module. This page
-                                        shows some valuable features of the J1 Template to manage your image-based
-                                        content using lightboxes, carousels (slider), and galleries.
-
-categories:                             [ Roundtrip ]
-tags:                                   [ Introduction, Module, Image ]
-
-fab_menu_id:                            page_ctrl
-
-permalink:                              /pages/public/learn/roundtrip/present_images/
-regenerate:                             false
-
-resources:                              [
-                                          animate, clipboard, carousel,
-                                          justifiedGallery, lightbox, lightGallery,
-                                          masterslider, rouge
-                                        ]
-resource_options:
-  - attic:
-      slides:
-        - url:                          /assets/images/pages/roundtrip/images-1920x1280-bw.jpg
-          alt:                          Photo by Ricardo Gomez Angel on Unsplash
-          badge:
-            type:                       unsplash
-            author:                     Ricardo Gomez Angel
-            href:                       https://unsplash.com/@ripato/portfolio
----
-
-// Page Initializer
-// =============================================================================
-// Enable the Liquid Preprocessor
-:page-liquid:
-
-// Set (local) page attributes here
-// -----------------------------------------------------------------------------
-// :page--attr:                         <attr-value>
-:ms-slider-previewer:                   https://jekyll.one/pages/public/previewer/masterslider/
-:ms-slider-module-documentation:        https://jekyll.one/pages/public/manuals/modules/masterslider/
-
-//  Load Liquid procedures
-// -----------------------------------------------------------------------------
-{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
-
-// Load page attributes
-// -----------------------------------------------------------------------------
-{% include {{load_attributes}} scope="all" %}
-
-// Page content
-// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
-// Include sub-documents (if any)
-// -----------------------------------------------------------------------------
-[role="dropcap"]
-Welcome to the first preview page focussing on the image module. This page
-shows some valuable features of the J1 Template to manage your image-based
-content using lightboxes, carousels (slider), and galleries. The image module
-offers complex functionality based on powerful OpenSource libraries like
-JustifiedGallery for high-end, masonry-styled preview maps. J1 Template uses
-the _jQuery_ Plugin Owl Carousel as a base for image sliders. A carousel
-app (slider) lets you present your images as shows.
-
-Lightboxes like LightGallery or Lightbox V2 support your web for enlarged
-image views of your picture or video content. Have a look, a quick tour
-of what J1 can do for image data. Have fun!
-
-// [role="notranslate"]
-== J1 Lightbox blocks
-
-A Lightbox is, in general, a helper which displays enlarged, almost
-screen-filling versions of images (or videos) while dimming the remainder
-of the page. The technique, introduced by Lightbox V2, gained widespread
-popularity thanks to its simple style. The term lightbox has been employed
-since then for Javascript libraries to support such functionality.
-
-For the J1 Template, two different lightboxes are available:
-
-* Lightbox V2 (lightbox)
-* LightGallery
-
-The default tool employed by J1 Template is Lightbox V2, a Javascript library
-written by _Lokesh Dhakar_. The name of that (build-in) is *lightbox*.
-For more complex use cases, like a thumbnail gallery preview or video support,
-LightGallery can be used alternatively.
-
-NOTE: The name LightGallery implies a sort of a Gallery, but the library is a
-_lightbox_. And, LightGallery provides much more functionality on image-based
-data rather than enlarged displaying of images. See the examples below to check
-for the differences in comparison to the simpler Lightbox V2 lightbox.
-
-Both lightboxes are fully integrated to be used as standalone modules or
-used as helpers *under-the-hood* by other apps or modules focussing on
-image-data like gallery or carousel, the build-in carousel module.
-
-== Lightbox block Examples
-
-Find below an example of using the lightbox Lightbox standalone. See how
-single (individual) images are linked for use with Lightbox.
-
-.Lightbox block for standalone images
-lightbox::example-standalone[ 800, {data-images-standalone}, role="mb-4" ]
-
-Lightbox supports image groups (image sets). Click on the images below to
-see how Lightbox manages a group of images.
-
-.Lightbox block for grouped images
-lightbox::example-group[ 395, {data-images-group}, group, role="mb-4 wm-800" ]
-
-=== LightGallery Example
-
-LightGallery provides more complex functions on image data. The module
-supports a gallery-style thumbnail preview plus image resizing, a download
-dialog, sharing provider support, and more helpful. Check what
-LightGallery can do this by the following example.
-
-gallery::jg_old_times[ role="mb-4 wm-800" ]
-
-== J1 Carousel App
-
-J1 Carousel is based on OWL Carousel V1 in the latest (and unfortunately
-last) version of 1.3.3. OWL Carousel is a clean and neat _jQuery_ slider
-plugin for creating fully responsive and touch-enabled carousel sliders.
-
-NOTE: OWL Carousel V1 is no longer available on the Internet; for an
-unknown reason. Anyway, the J1 Template is using this version of OWL
-Carousel is a build-in carousel module because the software does an excellent
-job, is based on an MIT license with no issues using them for private and
-business use. And offers a lot of great features!
-
-=== Simple Text Carousel
-
-A slider or carousel is typically used for displaying images. Still, the
-implementation for the J1 Template supports a lot more sources to be
-displayed as a slide show: simple text, for example.
-
-.Carousel Example
-carousel::demo_text_carousel[role="mb-3"]
-
-Important statements or topics can be placed, e.g., on top of an article or
-a paragraph, to give them better visibility. In one line, you can present
-many facts to know animated for the reader's attention within a single
-line. No much space is needed!
-
-=== Parallax Text Carousel
-
-A more eye-minded type of text-based slide show is a parallax text slider. If
-you want to emphasize your statements focussing the meaning, this kind of a
-slide show may be interesting. Image-based slide shows may draw off the
-reader's attention from the text, therefore a pure text-based presentation
-maybe the better choice.
-
-.Carousel Example
-carousel::demo_text_carousel_parallax[role="mb-3"]
-
-Parallax text shows can be placed as banners on a page. For text shows,
-different animations are available. Internally, J1 Template uses some of
-the great CSS styles offered by _animate.css_.
-
-TIP: Have a look a https://daneden.github.io/animate.css/[Dan Eden's home page]
-to see all the possible dynamic styles you can create based on pure CSS. Some
-of them are implemented for OWL Carousel for animation. See the documentation
-for the CAROUSEL Module for more details.
-
-=== Simple Image Carousel
-
-Carousels are mostly used for pictures data to animate the images as a series.
-Find with the following some examples of how to use a carousel for your image
-data.
-
-A simple image show is useful, for example, as an animated (or not animated)
-banner presenting exciting things about your site or the products offered.
-
-.Carousel Example
-carousel::demo_simple[role="mb-3"]
-
-=== Carousel + Caption + Lightbox
-
-Carousels are used for an exceptionally compact form of image galleries.
-This example shows some pictures having individual caption text and supports
-a lightbox to enlarge images full size. For the example below, an almost simple
-lightbox is used: Lightbox V2; or short: lightbox.
-
-.Carousel Example
-carousel::demo_cats[role="mb-3"]
-
-The J1 module lightbox is a simple Lightbox but offers a bunch of impressive
-features for displaying images. For example, the lightbox can display all
-images (of a carousel) as a group. If one picture is opened in the lightbox,
-others are browsed by easy-to-use control buttons.
-
-=== One Slide Carousel + Lightbox
-
-The build-in Carousel carousel supports multiple and single image shows.
-Here you find an example of a single image slide show with controls enabled
-to browse all images back and forth. An indicator below the slider shows how
-many images the show contains.
-
-.Carousel Example
-carousel::demo_oneslide[role="mb-3"]
-
-== J1 Master Slider
-
-The Javascript tool _Master Slider_ is a 3rd party plugin fully integrated
-into the J1 Template by the module `masterslider`. J1 Template uses the
-*free* version of Master Slider (MS Lite). The Lite version does *not* support
-all features: the functionality of  *filters*, *layouts* are limited and no
-*overlay* techniques are supported by the MS Lite version.
-
-WARNING: The Master Slider (MS Lite and Pro version) is a so-called _jQuery_
-Plugin. _jQuery_ can simplify Javascript code a lot but will slow-down
-the runtime performance of the JS code. Expect for slower browsers and
-platforms, like mobiles or tablets, initializing an MS Slider will take
-a while to be finished.
-
-=== Carousels versus Sliders
-
-Sliders and Carousels are focussing quite the same thing: presenting image data
-dynamically as an app. The features of Sliders go far beyond what simple
-Carousels can do: presenting image-based data as *slideshows*. Well-known
-Office Products to create *presentations* are _Microsoft Powerpoint_ or
-_Google Docs_. Modern sliders like _Master Slider_ provide similar features to
-present animated *shows* (presentations) based on digital image data combined
-with text elements, buttons, or overlay techniques, e.g., for images or
-other digital data sources.
-
-In short: Carousels are used to present images, and sliders are used to create
-complex image-based slideshows (presentations).
-
-=== MS Slider using Controls + Filters + Lightbox
-
-The following slider uses the (CSS) filter feature of Master Slider.
-Filters can be used, for example, to *transform* the *style* of the images
-presented by a slider. In this example, the slider images are transformed
-from style *color* to *sepia*.
-
-WARNING: Lightbox support is only available for the MS Lite version of J1
-Template. The product versions *MS Lite* and *MS Pro* does not support
-Lightboxes on sliders out-of-the-box.
-
-TIP: Click on the Lightbox symbol mdi:image-outline[18px, md-gray] in the
-slides to see the *colored* images configured for the slider.
-
-masterslider::ms_00001[role="mt-4 mb-5"]
-
-=== MS Slider using Text Elements
-
-One of the major features of sliders is to present additional (animated)
-elements, like text data, connected to the images presented by a slider:
-the slideshow. MS Slider provides functions to combine images and text
-elements: the *MSInfo* element.
-
-masterslider::ms_00003[role="mt-4 mb-5"]
-
-=== MS Slider using ThumbImages
-
-To give the users better control over a slideshow, sliders provide complex UI
-elements like *thumbs* placed side-by-side (left|right), at the top, or at
-the bottom of a slideshow. Find two examples to control a slideshow by
-*thumb images*.
-
-masterslider::ms_00004[role="mt-4 mb-5"]
-
-masterslider::ms_00005[role="mt-4 mb-5"]
-
-=== MS Slider using MS Info in a complex Layout
-
-The following slider presents a slideshow that combines an MSInfo element
-at the bottom and the MS Layout `partialview`. A slideshow typically presents
-a larger number of slides. The layout `partialview` accompanies the *active*
-slide by their neighbors on the left and the right.
-
-masterslider::ms_00009[role="mt-4 mb-5"]
-
-=== More about MS Sliders
-
-If you're interested to learn more about MS Sliders, go for the following
-documents:
-
-* link:{ms-slider-previewer}[MS Slider Previewer, {browser-window--new}]
-* link:{ms-slider-module-documentation}[MS Slider module documentation, {browser-window--new}]
-
-
-== JustifiedGallery
-
-JustifiedGallery is a great _jQuery_ Plugin to create responsive, infinite,
-and high-quality justified image galleries. J1 Template combines the Gallery
-with the lightboxes supported to enlarge the images of a gallery. See the
-gallery in action; and for sure, all that you see is even responsive. Change
-the size of your current browser window, by width or height to see what will
-happen!
-
-Pictures you've made are typically not even in size. Images may have the
-same size (resolution), but some are orientated landscapes, or others
-may be portraits. For that reason, a more powerful gallery is needed to create
-so-called justified views. JustifiedGallery uses a so-called masonry grid
-layout. It works by placing elements in an optimal position based on available
-horizontal and vertical space. Sort of like mason fitting stones in a wall.
-You'll have seen it in use all over the Internet!
-
-.JustifiedGallery Example
-gallery::jg_customizer[role="mb-4"]
-
-== What next
-
-Hopefully, you've enjoyed exploring the possibilities J1 offers for managing
-and displaying digital image content. But much, much more can the J1 do for
-your web.
-
-Incredible? See the next example page link:{url-roundtrip--present-videos}[Present Videos].