See? ``` -------------------------------- ### Set Presentation Duration Source: https://github.com/json-ld/w3c-tpac-2024-presentations/blob/main/Templates/Overview.html To set the total presentation duration to 45 minutes, add `duration=45` to the class attribute of the body element. ```html ``` -------------------------------- ### Create Two-Column Layout Source: https://github.com/json-ld/w3c-tpac-2024-presentations/blob/main/Templates/Overview.html Use the 'columns' class on a container element (like ul or div) to arrange its direct children into two columns. Content alternates between the left and right columns. ```html

This is the last element to appear ``` -------------------------------- ### YAML-LD Syntax: Quotes Source: https://github.com/json-ld/w3c-tpac-2024-presentations/blob/main/json-ld-recharter/index.html Shows how quotes can be omitted for simple string values in YAML-LD, making the syntax cleaner for certain elements like URIs and types. ```yaml-ld "@context": - https://www.w3.org/ns/credentials/v2 - https://www.w3id.org/vc-barcodes/v1 - https://www.w3id.org/utopia/v2 type: [VerifiableCredential, OpticalBarcodeCredential] credentialSubject: type: AamvaDriversLicenseScannableInformation protectedComponentIndex: uggAg issuer: did:key:zDnaeWjKfs1ob9QcgasjYSPEMkwq31hmvSAWPVAgnrt1e9GKj ``` -------------------------------- ### JSON-LD-star CG Draft: Annotations Source: https://github.com/json-ld/w3c-tpac-2024-presentations/blob/main/json-ld-star/index.html Demonstrates using a structured @annotation value for annotations in a JSON-LD-star Community Group draft. This allows attaching metadata to specific values. ```json { "@context": {...}, "@id": "bob", "age": { "@value": 42, "@annotation": {"certainty": 0.8} } } ``` ```turtle :bob :age 42 . << :bob :age 42 >> :certainty 0.8e0 . ``` -------------------------------- ### Display Real Time Seconds Source: https://github.com/json-ld/w3c-tpac-2024-presentations/blob/main/Templates/Overview.html Elements with the class 'seconds-real' will display the current seconds (00-59) and update in real-time. ```html 00 ``` -------------------------------- ### Utopia Driver's License VC in YAML-LD Source: https://github.com/json-ld/w3c-tpac-2024-presentations/blob/main/json-ld-recharter/index.html A Verifiable Credential for a Utopia Driver's License represented in YAML-LD. This format offers human-readability while maintaining compatibility with JSON-LD. ```yaml-ld { "@context": [ "https://www.w3.org/ns/credentials/v2", "https://www.w3id.org/vc-barcodes/v1", "https://www.w3id.org/utopia/v2" ], "type": [ "VerifiableCredential", "OpticalBarcodeCredential" ], "credentialSubject": { "type": "AamvaDriversLicenseScannableInformation", "protectedComponentIndex": "uggAg" }, "issuer": "did:key:zDnaeWjKfs1ob9QcgasjYSPEMkwq31hmvSAWPVAgnrt1e9GKj" } ``` -------------------------------- ### Individual Slide Transition Source: https://github.com/json-ld/w3c-tpac-2024-presentations/blob/main/Templates/Overview.html Apply a transition class to an individual section element to define a specific transition effect for when that slide disappears, overriding global settings. ```html

``` -------------------------------- ### Make Text Extra Big with 'shout' Class Source: https://github.com/json-ld/w3c-tpac-2024-presentations/blob/main/Templates/Overview.html Use the 'shout' class on text elements to make them significantly larger, often used for keywords or emphasis in presentations. ```html

Hurray! ``` -------------------------------- ### Image Overlay with Cover Class Source: https://github.com/json-ld/w3c-tpac-2024-presentations/blob/main/Templates/Overview.html Use the 'cover' class on an img tag to stretch an image to fill the entire text area of a slide. The image may be cropped if its aspect ratio does not match. ```html ``` -------------------------------- ### Automatic Slide Advancement Source: https://github.com/json-ld/w3c-tpac-2024-presentations/blob/main/Templates/Overview.html Set the 'data-timing' attribute on a slide section to specify the duration (MM:SS) before automatic advancement to the next slide. ```html

This slide will remain on screen no longer than 1 minute and 3 seconds, after which the next slide will be shown.

``` -------------------------------- ### CBOR-LD Compressed Utopia Driver's License VC Source: https://github.com/json-ld/w3c-tpac-2024-presentations/blob/main/json-ld-recharter/index.html A compressed representation of a Utopia Driver's License Verifiable Credential using CBOR-LD. This format is significantly smaller than its JSON-LD equivalent, as shown in the size comparison image. ```cbor-ld d90664a60183198000198001198002189d82187618a418b8a3189c18a618... ``` ```diagnostic 1636( { 1: [32768, 32769, 32770], 157: [118, 164], 184: {156: 166, 206: 178, 208: 3851559041}, 186: {156: 160, 168: h'75820020'}, 190: 170, ... ``` -------------------------------- ### Side Image Layout in HTML Slides Source: https://github.com/json-ld/w3c-tpac-2024-presentations/blob/main/Templates/Overview.html Use the 'side' class on a section to place an image to the left. Add 'r' for right alignment. The 'big' class increases image size. ```html

... slide content here...

``` ```html

... slide content here...

``` ```html

... slide content here...

``` ```html

... slide content here...

``` -------------------------------- ### Reset Clock Button Source: https://github.com/json-ld/w3c-tpac-2024-presentations/blob/main/Templates/Overview.html An element with the class 'timereset' acts as a button to reset the elapsed time to zero. ```html ``` -------------------------------- ### Custom Screen Reader Announcement Source: https://github.com/json-ld/w3c-tpac-2024-presentations/blob/main/Templates/Overview.html Create a div with role='region' and aria-live='assertive' to provide custom text announcements for screen readers when slides change, allowing for language customization. ```html

Terminé.

``` -------------------------------- ### Add Automatic Line Numbering to Preformatted Text Source: https://github.com/json-ld/w3c-tpac-2024-presentations/blob/main/Templates/Overview.html Apply the 'numbered' class to a 'pre' tag to automatically add line numbers to its content. This feature is limited to a maximum of 20 lines. ```html


No more than 20 lines will be numbered. (In the normal font size, a slide fits 13 lines.)
```

--------------------------------

### Replace List Bullets with Icons

Source: https://github.com/json-ld/w3c-tpac-2024-presentations/blob/main/Templates/Overview.html

Use the 'with-icons' class on a 'ul' element to replace default list bullets with the content of the first element within each 'li'. This allows for custom icons, emojis, or images.

```html

 ♪ North pole
  Metro pole

```

--------------------------------

### Display Real Time Hours

Source: https://github.com/json-ld/w3c-tpac-2024-presentations/blob/main/Templates/Overview.html

Elements with the class 'hours-real' will display the current hour (00-23) and update in real-time.

```html
00

```

--------------------------------

### Set Mouse Pointer Hide Timeout

Source: https://github.com/json-ld/w3c-tpac-2024-presentations/blob/main/Templates/Overview.html

To set a custom timeout for hiding the mouse pointer (e.g., 1.5 seconds), use the 'hidemouse=' class with the desired time in seconds.

```html


```

--------------------------------

### JSON-LD-star CG Draft: Reversed Annotation

Source: https://github.com/json-ld/w3c-tpac-2024-presentations/blob/main/json-ld-star/index.html

Shows how to annotate a quoted triple as an object in a JSON-LD-star Community Group draft. This allows attaching metadata to relationships.

```json
{
  "@context": {...},
  "@id": "bob",
  "knows": {
    "@id": "alice",
    "@annotation": {"accordingTo": "alice", "claimedBy": "bob"}
  }
}
```

```turtle
PREFIX : 
:bob :knows :alice .
<< :bob :knows :alice >> :accordingTo :alice .
:bob :claims << :bob :knows :alice >> .
```

--------------------------------

### Increment Duration Button

Source: https://github.com/json-ld/w3c-tpac-2024-presentations/blob/main/Templates/Overview.html

An element with the class 'timeinc' acts as a button to increase the presentation duration by one minute.

```html


```

--------------------------------

### Style Incremental Elements with Modifiers

Source: https://github.com/json-ld/w3c-tpac-2024-presentations/blob/main/Templates/Overview.html

Apply 'strong', 'greeked', or 'dim' classes to modify the appearance of incremental elements before, during, or after they are active. These can be combined and applied to individual elements or ancestors.

```html

  ...
```

--------------------------------

### JSON-LD-star CG Draft: Reverse Reification

Source: https://github.com/json-ld/w3c-tpac-2024-presentations/blob/main/json-ld-star/index.html

Illustrates reverse terms in a JSON-LD-star Community Group draft, inverting the subject/object relationship for claims. This is useful for representing who made a claim.

```json
{
  "@context": {
    ...
    "claimedBy": {
      "@reverse": "http://example.org/claims",
      "@type": "@id"
    }
  },
  "@id": {"@id": "bob", "knows": "alice"},
  "claimedBy": "alice"
}
```

```turtle
PREFIX : 
:alice :claims << :bob :knows :alice >> .
```

--------------------------------

### Pause/Resume Clock Button

Source: https://github.com/json-ld/w3c-tpac-2024-presentations/blob/main/Templates/Overview.html

An element with the class 'timepause' toggles the pause and resume state of the presentation clocks.

```html


```

--------------------------------

### Forcing Light Mode Text Color

Source: https://github.com/json-ld/w3c-tpac-2024-presentations/blob/main/Templates/Overview.html

Apply the 'lightmode' class to a section element to force black text on a white background, regardless of the OS dark mode setting. This is useful when overlaying text on light images.

```html


```

--------------------------------

### HTML Figure Element

Source: https://github.com/json-ld/w3c-tpac-2024-presentations/blob/main/Templates/Overview.html

Embed images like diagrams or charts within a 'figure' element. Use 'figcaption' for a caption if needed.

```html

```

--------------------------------

### Cover Image with Side Layout

Source: https://github.com/json-ld/w3c-tpac-2024-presentations/blob/main/Templates/Overview.html

The 'cover' class on an image within a side-aligned slide makes the image scale to fill the available space, potentially cropping.

```html

  
  ... slide content here...

```

--------------------------------

### Decrement Duration Button

Source: https://github.com/json-ld/w3c-tpac-2024-presentations/blob/main/Templates/Overview.html

An element with the class 'timedec' acts as a button to decrease the presentation duration by one minute.

```html


```

--------------------------------

### Embed Slide with Static Navigation

Source: https://github.com/json-ld/w3c-tpac-2024-presentations/blob/main/Templates/Overview.html

Embed a single slide into another document using an object or iframe. Append '?full&static' to the URL followed by '#' and the slide ID or number to disable navigation and index mode.

```html


```

```html


```

--------------------------------

### Hide Mouse Pointer

Source: https://github.com/json-ld/w3c-tpac-2024-presentations/blob/main/Templates/Overview.html

Add the class 'hidemouse' to the body element to automatically hide the mouse pointer after 5 seconds of inactivity in slide mode.

```html


```

--------------------------------

### Forcing Dark Mode Text Color

Source: https://github.com/json-ld/w3c-tpac-2024-presentations/blob/main/Templates/Overview.html

Apply the 'darkmode' class to a section element to force white text on a black background, regardless of the OS dark mode setting. This is useful when overlaying text on dark images.

```html


```

--------------------------------

### Watermark Overlay

Source: https://github.com/json-ld/w3c-tpac-2024-presentations/blob/main/Templates/Overview.html

Use a paragraph element with the class 'watermark' to display a text or image watermark overlaid on every slide. By default, it's rotated and centered.

```html
DRAFT!

```

--------------------------------

### Disable Mouse Clicks on Slides

Source: https://github.com/json-ld/w3c-tpac-2024-presentations/blob/main/Templates/Overview.html

Add the 'noclick' class to the body element to prevent mouse clicks from advancing slides. This is useful for presentations where click-based navigation is not desired.

```html


```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.