j1-template 2024.1.3 → 2024.1.4

data/lib/starter_web/pages/public/tools/previewer/preview_speak2me.adoc

@@ -0,0 +1,740 @@
+---
+title:                                  Speak2Me
+title_extention:                        Samples for the TTS module
+tagline:                                Content samples
+
+date:                                   2024-02-15
+#last_modified:                         2023-01-01
+
+description: >
+                                        Speak2Me, a speech synthesise module for J1 Template, enables a so-called
+                                        Text-To-Speech converter. The converter functionality allows users to sit
+                                        back and listen to the browser read aloud the important contents on a
+                                        Web page.
+keywords: >
+                                        open source, free, template, jekyll, jekyllone, web,
+                                        sites, static, jamstack, bootstrap,
+                                        speech synthesise, sst, j1 module, speak2me, jquery
+
+image:
+  path:                                 /assets/images/pages/roundtrip/images-1920x1280-bw.jpg
+  width:                                1920
+  height:                               1280
+
+categories:                             [ Module ]
+tags:                                   [ Speech Synthesise, SST, Speak2Me, Preview ]
+
+book:
+  cover:                                /assets/images/collections/books/biography/a_life_in_questions.jpg
+
+toc:                                    true
+tts:                                    true
+comments:                               false
+exclude_from_search:                    false
+fab_menu_id:                            open_toc
+personalization:                        true
+regenerate:                             false
+permalink:                              /pages/public/tools/previewer/speak2me/
+
+resources:                              [
+                                          animate,
+                                          clipboard, carousel, comments,
+                                          gallery, lightbox, lightgallery,
+                                          masonry, masterslider, rouge, slick,
+                                          videojs, vimeoplayer
+                                        ]
+resource_options:
+  - toccer:
+      collapseDepth:                    4
+  - 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:                       //unsplash.com/@ripato/portfolio
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+
+//  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
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+// https://github.com/mdn/dom-examples/tree/main/web-speech-api
+// https://mdn.github.io/dom-examples/web-speech-api/speak-easy-synthesis/
+// https://stackoverflow.com/questions/11279291/a-good-text-to-speech-javascript-library
+// https://github.com/acoti/articulate.js
+// https://codepen.io/meetselva/pen/EVaLmP
+//
+
+[role="dropcap"]
+Speak2Me, a speech synthesise module for J1 Template, enables a so-called
+Text-To-Speech converter. The converter functionality allows users to sit
+back and listen to the browser read aloud the important contents on a web
+page.
+
+This page provides typical content elements used for webpages. Run the
+converter to experience how those content elements are spoken.
+
+[role="mb-4"]
+The converter is started by clicking on the *speaker* symbol
+mdi:speaker[24px, md-blue] which is placed top right in the *menu bar*.
+
+[CAUTION]
+====
+The Speak2Me module is currently only available as an experimental version,
+and only base elements are used for speech output. In the case of complex
+elements such as tables, images, carousels, or galleries, only information
+is spoken.
+
+Browsers from manufacturers such as *Firefox* or Chromium-based browsers
+like *Opera* use voices provided by Microsoft but in very poor quality and
+are not supported for speech output.
+
+Note that *Text-To-Speech* conversion is *not* available on mobile devices.
+====
+
+[role="mt-4"]
+mdi:clock-time-five-outline[24px, md-gray mr-2]
+*15-30 Minutes* to read
+
+// Include sub-documents (if any)
+// -----------------------------------------------------------------------------
+[role="mt-5"]
+== Text elements
+
+The most common text elements used are *headlines* and *paragraphs*.
+
+Headings typically represent *titles* and *subtitles* of sections within a
+webpage. They provide visual differentiation for your content and play
+an important role in accessibility. For example, headings help screen readers
+understand the structure of your page and assist in navigation.
+
+Paragraphs are structural elements displayed in a separated *block* element.
+However, some elements defined as a paragraph cannot be spoken because of
+their complexity.
+
+[role="mt-4"]
+=== Structured text
+
+Blocks in webpages that contain structured text refer to specific *sections*
+or *elements* of content that are organized and formatted in a structured
+manner to improve readability and accessibility. These text blocks are
+designed to provide a clear and organized presentation for human users to
+understand the discussed context better.
+
+Typical elements are:
+
+* all technical terms
+* highlighted text blocks
+* embedded code blocks
+
+[role="mt-4"]
+==== Technical terms
+
+Technological terms are specialized words or phrases used in a particular
+field or domain to describe specific concepts, processes, technologies,
+or ideas. These terms are often unique to a specific area of expertise
+and may have precise meanings well-understood by professionals and
+experts.
+
+Because of current limitations of the synthesise module *Speak2Me*, words
+are marked as *specialized* words are *not* spoken.
+
+The following _Rouge_ themes are used for J1 Template (specialized words are
+not spoken):
+
+* light theme — based on the Igor theme `igorpro`
+* dark theme — based on the Monokai theme `monokai.sublime`
+
+[role="mt-4"]
+==== Highlighted text
+
+Text blocks highlighted in webpages refer to sections of text that have
+been visually emphasized to stand out from the surrounding content. These
+blocks are typically formatted using different styles, such as changing
+the background color, applying a border, or using bold or italic fonts to
+make them more noticeable and draw attention to important information.
+
+[role="mt-4 mb-5"]
+.Output example
+----
+Startup the site ..
+Configuration file: ...
+
+ Incremental build: enabled
+      Generating...
+     J1 QuickSearch: creating search index ...
+     J1 QuickSearch: finished, index ready.
+     ....
+----
+
+[role="mt-4"]
+==== Code blocks
+
+In webpages, a code block refers to a section of code typically enclosed
+within special HTML or programming language tags to indicate that the content
+inside should be interpreted as code and not regular text. These code blocks
+are often used to display and format HTML, CSS, JavaScript, or other
+programming code snippets on a webpage.
+
+.JSON data block
+[source, json, role="noclip"]
+----
+{
+  "id": 3,
+  "title": "Roundtrip",
+  "tagline": "present images",
+  "url": "/pages/public/learn/roundtrip/present_images/",
+  "date": "2020-11-03 +0100",
+  "tags": [
+    "Introduction",
+    "Module",
+    "Image"
+  ],
+  "categories": [
+    "Roundtrip"
+  ],
+  "description": "Welcome to the preview page ... and galleries.\n",
+  "is_post": false
+}
+----
+
+[role="mt-4 mb-5"]
+.Javascript code
+[source, javascript]
+----
+// helper functions
+//
+function styleSheetLoaded(styleSheet) {
+  var sheets     = document.styleSheets,
+      stylesheet = sheets[(sheets.length - 1)];
+
+  // find CSS file 'styleSheetName' in document
+  for(var i in document.styleSheets) {
+    if(sheets[i].href && sheets[i].href.indexOf(styleSheet) > -1) {
+      return true;;
+    }
+  }
+}
+----
+
+[role="mt-4"]
+==== Quotations
+
+Elements that povide quotations in webpages are used to visually highlight an
+excerpt. They are designed to stand out from the regular text and clarify that
+the content is from another person, website, or any external source.
+
+Example of a *single* line quote:
+
+"Don't do stupid things twice. The selection is too big for that."
+-- Jean-Paul Sartre
+
+Example of a *multiline* line written quote:
+
+[quote, Albert Einstein]
+____
+What frightens me is not the destructive power of the bomb,
+but the explosive power of the human heart for evil.
+____
+
+[role="mt-4"]
+==== Parallax Quote
+
+To show a more eye-catching quote, a parallax quote can be used.
+
+++++
+<div id="banner_home_parallax" class="elevated-z0"></div>
+++++
+
+[role="mt-4"]
+Parallax quotes are used typically on landing pages to present e.g. the
+general idea of a website or can be used as an delimiter element on
+webpages.
+
+[role="mt-4"]
+=== Ordered text
+
+Headlines and paragraphs are commonly used to structure the content of a
+web page, making it more readable. See such a structure below that is
+typically used in larger text like articles, or books.
+
+[role="mt-4"]
+==== Chapter One
+
+    Tyrion Lannister stood resolute upon the prow of the majestic vessel,
+the Wind's Grace, its timeworn planks creaking beneath his weight.
+
+[role="mt-4"]
+===== Section One
+
+    It was a gusty tempest, much like the swirling turmoil that had
+beset his life ever since he had been forced to flee the shores of
+Westeros.
+
+[role="mt-5"]
+== Links
+
+Elemts for linking are an essential part of all webpages. They allow users to navigate
+between different *pages* and *websites*. In HTML, links are created using
+the anchor tag `<a>`. The anchor tag defines a hyperlink, a *clickable element*,
+that takes the user to *another* web page or a specific location on the *same page*.
+
+[role="mt-4"]
+=== Inline Links
+
+Inline links are hyperlinks embedded directly within the content of a paragraph
+or any other text element on a web page. These links allow users to navigate
+to other webpages, resources, or sections of the same page by clicking on
+the linked *text* element.
+
+[role="mt-4"]
+==== Inline Link Example
+
+All websites created by _Jekyll_ are based on Themes, a template
+system to ease the creation process of webpages, design, styles, navigation
+elements and more. For a wide range of website types, the
+link:{url-jamstack-club--j1-theme}[J1 Theme, {browser-window--new}] accessible
+at the Jamstack Club can be used. Check the preview function and, if the Jekyll
+Theme meet your needs, you can create a example web from here:
+link:{url-j1--rocketstart}[Rocketstart, {browser-window--new}] to create a
+Internet site in minutes.
+
+[role="mt-4"]
+=== Link Block
+
+A *block of links* refers to a section in a webpage containing a collection
+of organized hyperlinks. These links lead to different pages, resources, or
+external websites. Such blocks are commonly used to present links to point
+the reader to related content resources.
+
+[role="mt-4"]
+==== Link Block Example
+
+Find more to know: +
+mdi:link-variant[24px, md-gray mr-2 ml-3]
+J1 Theme at link:{url-jamstack-club--j1-theme}[Jamstack Club, {browser-window--new}] +
+mdi:link-variant[24px, md-gray mr-2 ml-3]
+Popular SSGs and Themes at link:{url-jamstack-club--themes}[Jamstack Club, {browser-window--new}] +
+mdi:link-variant[24px, md-gray mr-2 ml-3]
+Popular SSGs and Themes at link:{url-jekyll-themes--home}[Jekyll Themes, {browser-window--new}]
+
+[role="mt-5"]
+== Information Blocks
+
+Information elements draw the reader to certain statements by labeling them
+as priorities displayed in separate blocks. The J1 template system provides
+five types shown by the following examples.
+
+[NOTE]
+====
+Blocks of type *note* give additional details on the currently
+discussed topic that may help the reader to understand the following
+content better.
+====
+
+[TIP]
+====
+An *Information* block of type *tip* provides facts that may help
+the reader *to go further* or points to additional *options* available
+that can be used.
+====
+
+[IMPORTANT]
+====
+Blocks of type *important* provide facts that should be
+remembered.
+====
+
+[WARNING]
+====
+Blocks of type *warning* advise readers to act carefully and point to
+potential risks or trippings.
+====
+
+[CAUTION]
+====
+A block of type *caution* instructs readers of potential danger,
+harm, or consequences for the wrong usage.
+====
+
+
+[role="mt-5"]
+== Tables
+
+Table elements are used to organize and display data in a structured format.
+Tables consist of rows and columns, and they are primarily used to present
+tabular data such as technical data and other types of information that
+require a grid-like layout.
+
+.Files and Folders
+[cols="4a, 8a", width="100%", options="header", role="rtable mt-4"]
+|===
+|File\|Folder |Description
+
+|`_config.yml`
+|Stores all *side-wide* used configuration data. Many of these options can
+be specified from the command line executable but it's easier to specify
+them in a file so you don't have to remember them.
+
+|`_drafts`
+|Drafts are unpublished posts. The format of these files is without a
+date: `title.MARKUP`.
+
+|===
+
+
+[role="mt-5"]
+== Lists
+
+Lists are used to organize and present information in a structured and
+easily readable format. The element is commonly used for creating navigation
+menus and content outlines, steps in a process, and various other scenarios
+where a structured presentation of information is required.
+
+[role="mt-4"]
+=== Unordered list
+
+An unordered list represents a collection of items where the order of the
+items is not significant. The list elements are typically displayed with
+bullet points, or other marker symbols, preceding each item.
+
+An unordered list may look-alike:
+
+* _Windows_, _Linux_ and _MacOS_ platforms supported
+* _Jekyll_ v4 Support and _Ruby_ v3 Support
+* Asciidoc and Markdown Support
+
+[role="mt-4"]
+=== Ordered list
+
+An ordered list is a way to present a list of items in a specific order,
+where each item is preceded by a sequential number or letter. It's often
+used when you want to display information step-by-step or hierarchically.
+
+Here's an example of how an ordered list is displayed:
+
+. _Bootstrap_ extensions included
+. _Asciidoctor_ extensions included
+. Infinite Scoll Support
+
+[role="mt-4"]
+=== Definition list
+
+A definition list is a element used to create a list of terms and their
+corresponding definitions. It typically present a glossary, a set of
+key-value pairs, or any situation where you must associate terms with
+their explanations.
+
+[role="mt-4"]
+Performance::
+One of the main advantages of using a static site is that it is unbelievably
+fast to load. When the user requests a page, there is no need to request
+a database to generate the page itself. All the content is already placed
+in one HTML file.
+
+Security::
+Say goodbye to hacking and security issues issued every week. A static site
+has no database or other complex underlying interdependent parts. Indeed,
+your site will have fewer footprints and security issues since it
+only loads plain HTML files.
+
+[role="mt-5"]
+== Images
+
+There are two general image types used on webpages: block and inline
+images.
+
+[role="mt-4"]
+=== Inline image
+
+An inline image is displayed in the flow of another element, such as a
+paragraph block.
+
+[role="mt-4"]
+image:{{page.book.cover}}[height=480, role="mr-4 mb-2 float-left"]
+
+His working life has been defined by questions. *Why is this bastard
+lying to me?* was at the front of his mind as he conducted every interview.
+But it wasn't just politicians. Paxman's interviews with Dizzee Rascal,
+David Bowie, Russell Brand, Vivienne Westwood are legendary.
+
+He discussed belief with religious leaders and philosophers, economics
+with CEOs and bankers, books with writers and art and theatre with artists.
+
+After 22 years on University Challenge, Paxman is also the longest-serving
+active quizmaster on British television. Now, in these long-awaited memoirs,
+he spills the beans behind four decades in front of the camera.
+
+He offers reflections and stories from a career that has taken him as a
+reporter to many of the world's war zones and trouble spots - Central America,
+Beirut, Belfast, to the studios of Tonight, Panorama, Breakfast Time, the
+Six O'clock News. Filled with candid stories about the great, the good and
+the rotters that have crossed his path, his memoirs are as magnetic to read
+as Paxman is to watch.
+In that book, Paxman tells some terrific stories and laughs at much of the
+silliness in the world. A Life in Questions charts the life of the greatest
+political interviewer of our time.
+
+[role="mt-4"]
+=== Block image
+
+A block image is displayed as a discrete element on its own line in a
+document. webpages use block images for various purposes to enhance
+visual appeal, convey information, and improve the overall user
+experience.
+
+image::/assets/images/pages/panels/responsive-text-1920x800.jpg[{{page.title}}, width=1280, role="mb-4"]
+
+[role="mt-4 mb-5"]
+[NOTE]
+====
+Carefully chosen and well-placed images can significantly enhance
+the overall effectiveness of a web page.
+====
+
+[role="mt-4"]
+[#lightbox2]
+== Lightbox
+
+Lightboxes are UI elements commonly used in webpages for various purposes.
+They serve as a way to display content or interact with users without
+requiring them to navigate away from the current page. This UI element
+is typically designed to grab the user's attention and provide a focused
+interaction experience.
+
+[role="mb-4"]
+Find below an example of using the default lightbox of the J1 Template
+to display and enlarge an group of images.
+
+.Lightbox block for multiple images
+lightbox::example-group[ 395, {data-images-group}, group, role="mb-4 wm-800" ]
+
+
+[role="mt-5"]
+== Carousel
+
+Standard carousels dor J1 Template are based on OWL Carousel *V1* in the
+latest version. OWL Carousel is a clean and neat _jQuery_ slider plugin for
+creating fully responsive and touch-enabled carousels.
+
+[role="mt-4"]
+=== Text Carousel
+
+[role="mb-4"]
+A carousel is typically used for displaying images. The implementation for
+the J1 Template supports a lot more sources to be used for a slide show:
+simple text, for example.
+
+.Simple text
+carousel::demo_text_carousel[role="mb-4"]
+
+Important statements or topics can be placed 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!
+
+[role="mt-4"]
+=== Parallax text
+
+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.
+
+.Parallax effect
+carousel::demo_text_carousel_parallax[role="mb-4"]
+
+[role="mt-4"]
+=== 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 image carousel typically consists of a container with images and a navigation
+system, including buttons, arrows, or dots that allow users to move back and
+forth between images or select a specific image.
+
+Image carousels can also include animation effects, such as fade-in or
+slide-in transitions between images, to make the presentation more visually
+appealing.
+
+.Image Carousel
+slick::image_carousel_full[role="mb-5"]
+
+[role="mt-4"]
+=== Carousel from Collections
+
+[role="mb-4"]
+A carousel from a collection for J1 Template is a *pre-defined* carousel
+type to display collection *articles* on a webpage as a carousel. Collection
+carousels pull content from a specific *collection*. All Carousels for
+collections display the article image and a link to the article as a
+caption. All carousels for the J1 Template can be easily customized in
+various ways, such as changing the slider speed, or the navigation options
+like *Arrows* and *Dots*.
+
+.Collection Biography
+slick::collection_carousel_biography[role="mb-5"]
+
+
+[role="mt-4"]
+== Slider
+
+_Masterslider_ is a Query plugin fully integrated into the J1 Template.
+Jekyll One uses the *free* version of Masterslider well-known as *MS Lite*.
+The lite version does *not* support all features of the *full* product.
+The functionality of *filters*, *layouts* are limited and *no* overlay
+techniques are supported by the MS Lite version.
+
+[role="mt-4"]
+=== Slider using Thumbs
+
+To give the users better control over a slideshow, sliders provide complex UI
+elements like *thumbs* placed side-by-side left or right, or at the bottom
+of a slideshow. Find two examples below how to control a slideshow.
+
+.Image controls
+masterslider::ms_00004[role="mb-5"]
+
+.Text controls
+masterslider::ms_00007[role="mt-4 mb-5"]
+
+
+[role="mt-5"]
+== Galleries
+
+The J1 module link:{url-justified-gallery--home}[JustifiedGallery, {browser-window--new}]
+is a great tool to create *responsive* and high-quality *justified* image
+galleries. Jekyll One combines the gallery with a lightbox to enlarge the
+images of a gallery. See the gallery in action. And for sure, all what you see
+is even *responsive*.
+
+[role="mt-4"]
+[TIP]
+====
+Change the size of your current browser width to see what will happen!
+====
+
+.Masonry grid Gallery
+gallery::jg_old_times[role="mb-5"]
+
+
+[role="mt-5"]
+== Masonry Grid
+
+J1 Masonry is a great tool to create dynamic image galleries. Image galleries
+are popular on many websites, and masonry can be a useful tool for creating
+dynamic and visually appealing galleries.
+
+[role="mb-5"]
+[TIP]
+====
+Change the size of your current browser width to see what will happen!
+====
+
+.Image Cards
+masonry::image_fixed_height_lb[]
+
+[role="mt-4"]
+By using masonry, you can create a gallery that displays images of different
+sizes in an aesthetically pleasing and functional way.
+
+
+[role="mt-5"]
+== Audio Players
+
+Audio players can be embedded in webpages very easy by using the HTML5 audio
+tag `<audio>`. Browsers have a built-in multimedia framework for decoding
+and playing audio content directly within a webpage.
+
+.Ambient Piano
+audio::/assets/audio/sound-effects/ambient-piano.mp3[role="mt-4 mb-5"]
+
+
+[role="mt-4"]
+== Video Players
+
+Video players embedded in webpages are software components that integrate
+and play videos directly within a web page or application. These players
+are essential for websites, blogs, and apps that want to display video content
+without requiring users to download the video file or use any external
+media player.
+
+Embedded video players provide a seamless and user-friendly way to present
+video content to your audience.
+
+[role="mt-4"]
+=== HTML5
+
+HTML5 Video opens the doors to your way of presenting video content. All
+modern browsers support the video tag `<video>` for the HTML5. Browsers have
+a built-in multimedia framework already for decoding and displaying video
+content. No need to use such proprietary software components anymore.
+
+.HTML5 Player
+video::/assets/videos/gallery/html5/video1.mp4[poster="/assets/videos/gallery/video1-poster.jpg" role="mt-4 mb-5"]
+
+[role="mt-4"]
+=== VideoJS
+
+VideoJS is an Open Source JavaScript framework and library for building
+custom video players for the web. It provides a flexible and customizable
+platform for displaying and controlling video content on websites and web
+applications.
+
+.VideoJS
+videojs::/assets/videos/gallery/html5/video1.mp4[poster="/assets/videos/gallery/video1-poster.jpg" role="mt-4 mb-5"]
+
+[role="mt-5"]
+=== YouTube
+
+YouTube is a popular online video-sharing platform that allows users to
+upload, view, share, and comment on videos. It was created in February 2005
+and acquired by Google in November 2006. YouTube provides a platform for
+people and organizations to publish various video content.
+
+.Last Carpool Karaoke
+youtube::nV8UZJNBY6Y[poster="/assets/videos/gallery/video_adele_last_carpool_caraoke_poster.jpg" role="mt-4 mb-5"]
+
+[role="mt-5"]
+=== Wistia
+
+Wistia is a marketing software and video hosting platform made for B2B
+marketers with free or paid plans available. While Wistia may not be the
+*Big Man on Campus* (BMOC) like Vimeo, it still brings valuable functionality
+to the table for marketers and should be seriously considered as a viable
+video platform.
+
+.Wistia Video
+wistia::29b0fbf547[role="mt-5 mb-4"]
+
+[role="mt-5"]
+=== Vimeo
+
+Vimeo is an online video-sharing platform that allows users to upload,
+share, and view videos. It was founded in 2004 by a group of filmmakers
+and has since grown into a popular platform for individuals and businesses
+to showcase their videos. Vimeo is known for its emphasis on high-quality
+video content, creative expression, and a supportive community of creators.
+
+.Forever 21 Channel
+vimeo::179528528[role="mt-5 mb-7"]