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.
The converter is started by clicking on the speaker symbol which is placed top right in the menu bar.
| 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. |
15-30 Minutes to read
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.
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
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
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.
Startup the site ..
Configuration file: ...
Incremental build: enabled
Generating...
J1 QuickSearch: creating search index ...
J1 QuickSearch: finished, index ready.
....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.
{
"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
}// 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;;
}
}
}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.
Example of a multiline line written quote:
What frightens me is not the destructive power of the bomb, but the explosive power of the human heart for evil.
Parallax Quote
To show a more eye-catching quote, a parallax quote can be used.
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.
Ordered text
Headlines and paragraphs are commonly used to structure the content of a webpage, making it more readable. See such a structure below that is typically used in larger text like articles, or books.
Chapter One
Tyrion Lannister stood resolute upon the prow of the majestic vessel, the Wind’s Grace, its timeworn planks creaking beneath his weight.
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.
Links
Elements for linking are an essential part of all webpages. They allow users to navigate between different pages and websites. In HTML, links are created by using the anchor tag <a>. The anchor tag defines a hyperlink, a clickable element, that takes the user to another webpage or a specific location on the same page.
Inline Links
Links are place inline a text are hyperlinks embedded directly within the content of a paragraph or any other text element on a webpage. Inline links allow users to navigate to other webpages, resources, or sections of the same page by clicking on the linked text element.
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 J1 Theme 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: Rocketstart to create a site on the Internet in minutes.
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.
Link Block Example
Find more to know:
J1 Theme at Jamstack Club
Popular SSGs and Themes at Jamstack Club
Popular SSGs and Themes at Jekyll Themes
Information Blocks
Elements for users' information 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.
| Blocks of type note give additional details on the currently discussed topic that may help the reader to understand the following content better. |
| 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. |
| Blocks of type important provide facts that should be remembered. |
| Blocks of type warning advise readers to act carefully and point to potential risks or trippings. |
| A block of type caution instructs readers of potential danger, harm, or consequences for the wrong usage. |
Tables
Elements displayed as tables are used to organize and present 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.
| File|Folder | Description |
|---|---|
| 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 are unpublished posts. The format of these files is without a date: |
Lists
List elements are used to organize and present information in a structured and easily readable format. Those elements are 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.
Unordered list
A 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
Ordered list
A 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
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 have to associate terms with their explanations.
- 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.
Images
There are two general types of image used on webpages: block and inline images.
Inline image
An image placed inline is displayed in the flow of another element, such as a paragraph block.
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.
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.
| Carefully chosen and well-placed images can significantly enhance the overall effectiveness of a webpage. |
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.
Find below an example of using the default lightbox of the J1 Template to display and enlarge an group of images.
Carousel
Standard carousels for J1 Template are based on OWL Carousel V1 in the latest version. This carousel is a clean and neat jQuery slider plugin for creating fully responsive and touch-enabled carousels.
Text Carousel
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.
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!
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.
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.
Carousel from Collections
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.
Slider
The tool Masterslider is a Query plugin fully integrated into the J1 Template. JekyllOne 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.
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.
Galleries
The J1 module JustifiedGallery is a great tool to create responsive and high-quality justified image galleries. JekyllOne 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.
| Change the size of your current browser width to see what will happen! |
Masonry Grid
The J1 Masonry module 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.
| Change the size of your current browser width to see what will happen! |
By using masonry, you can create a gallery that displays images of different sizes in an aesthetically pleasing and functional way.
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.
Video Players
Players for videos to be embedded in webpages are software components that integrate and play videos directly within a webpage 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.
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.
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.