Hotspot dla TYPO3

Interaktywne obrazy wyjaśniają złożone produkty lepiej niż 1.000 słów tekstu

Plan budynku z 12 oznaczonymi pomieszczeniami, przekrój maszyny z 8 podpisanymi elementami, mapa Europy z 15 lokalizacjami - wszystkie te przypadki potrzebują klikalnych obszarów na obrazie. Odwiedzający klika na element i widzi jego specyfikację. Klika na lokalizację i widzi adres oraz kontakt. Rozszerzenia Hotspot dla TYPO3 sprawiają, że obrazy stają się interaktywne, łącząc zdefiniowane obszary z podpowiedziami, nakładkami lub linkami.

Ciekawszym pytaniem jest, czy w ogóle potrzebne jest do tego rozszerzenie. Hotspoty oparte na SVG działają bez rozszerzenia, są lżejsze, bardziej dostępne i w pełni kontrolowalne w sitepackage. Dla prostych zastosowań SVG to lepsza droga. Dla złożonych konfiguracji z wieloma hotspotami i pielęgnacją w backendzie przez redaktorów rozszerzenie uzasadnia swoje użycie.

Typowe scenariusze zastosowań

Zdjęcia produktów z klikalnymi elementami. Producenci maszyn, urządzeń i produktów technicznych używają hotspotów, aby opisać elementy na zdjęciu produktu. Kompresor przemysłowy z 8 zespołami: kliknięcie w silnik pokazuje dane wydajności, kliknięcie w filtr pokazuje interwały wymiany. Zamiast długiego opisu tekstowego informacje są udostępniane wizualnie. U producenta maszyn interaktywne zdjęcia produktów zwiększyły czas spędzony na stronach produktowych o 45%.

Plany budynków i kampusów. Uczelnie, szpitale i duże firmy pokazują interaktywne plany sytuacyjne: klikanie w budynki, wybór piętra, podgląd informacji o pomieszczeniach. TYPO3 dostarcza dane pomieszczeń z źródła Extbase, a hotspoty są pozycjonowane na rzucie. W szpitalu z 14 budynkami interaktywne plany całkowicie zastąpiły drukowany przewodnik.

Infografiki z informacjami szczegółowymi. Działy marketingu tworzą infografiki procesów, łańcuchów wartości lub struktur organizacyjnych. Zamiast statycznego pliku PNG elementy infografiki są klikalne: kliknięcie w etap procesu otwiera opis szczegółowy. Działa to szczególnie dobrze przy złożonych tematach, których nie da się wyjaśnić liniowo.

Architektura techniczna

Rozszerzenia Hotspot w TYPO3 składają się z trzech części: edytora backendowego do pozycjonowania hotspotów, struktury danych dla treści hotspotów i renderera frontendowego, który wyświetla hotspoty na obrazie.

Edytor backendowy to zwykle wizualny edytor umieszczania punktów: redaktor widzi obraz w backendzie TYPO3 i klika w miejsca, gdzie mają się pojawić hotspoty. Współrzędne są zapisywane jako wartości procentowe (względem wielkości obrazu), a nie jako piksele. Wartości procentowe zapewniają, że hotspoty pozostają we właściwym miejscu przy responsywnym wyświetlaniu obrazu.

Struktura danych na każdy hotspot: pozycja X (%), pozycja Y (%), tekst podpowiedzi, treść szczegółowa (HTML/Fluid), typ ikony i opcjonalnie link do strony szczegółów. Dane są zapisywane jako relacje inline (IRRE) do elementu treści: jeden element treści ma 1:n hotspotów.

Na frontendzie hotspoty są renderowane jako absolutnie pozycjonowane elementy HTML nad obrazem. Obraz leży w kontenerze z position: relative, a hotspoty mają position: absolute z left i top w procentach. Po kliknięciu lub najechaniu pojawia się podpowiedź jako nakładka, pozycjonowana względem hotspotu.

Alternatywa SVG działa bez rozszerzenia: obraz jest tworzony jako SVG (lub obraz jest osadzony jako <image> w SVG), hotspoty to elementy SVG (<circle>, <rect>, <polygon>) z atrybutami data- i handlerami zdarzeń. Treści podpowiedzi są odczytywane przez JavaScript z bloku <script type="application/json">.

Częste problemy i rozwiązania

Pozycje hotspotów przesuwają się na urządzeniach mobilnych. Obraz jest wyświetlany mniejszy na smartfonie, ale hotspoty pozostają w pozycji desktopowej. Przyczyna: hotspoty są pozycjonowane w pikselach zamiast procentach lub kontener nie ma responsywnego dostosowania rozmiaru. Rozwiązanie: wszystkie pozycje zapisywać w procentach, a kontener uczynić responsywnym przez max-width: 100% i height: auto. Dodatkowo: hotspoty na urządzeniach mobilnych wyświetlać jako listę pod obrazem, ponieważ dotyk palcem w małe punkty hotspot jest trudny.

Brak dostępności. Czysto wizualne hotspoty bez nawigacji klawiaturą i bez tekstu dla czytnika ekranu nie są dostępne. Rozwiązanie: każdy hotspot implementować jako <button> (a nie <div>), z aria-label dla czytnika ekranu i tabindex dla nawigacji klawiaturą. Treść podpowiedzi musi być powiązana przez aria-describedby.

Wydajność przy wielu hotspotach. 20+ hotspotów na obrazie generuje 20+ elementów DOM z listenerami zdarzeń. Na starszych urządzeniach mobilnych może to powodować zacięcia. Rozwiązanie: event delegation zamiast indywidualnych listenerów. Jeden listener na kontenerze zamiast 20 na hotspotach. Przy hotspotach SVG wydajność jest generalnie lepsza, ponieważ elementy SVG są natywnie renderowane przez przeglądarkę.

Migracja i kompatybilność wersji

Rozszerzenia Hotspot w TER obsługują TYPO3 v10 i v11. Dla v12 i v13 nie istnieją szeroko utrzymywane rozszerzenia Hotspot. Trend zmierza do rozwiązań opartych na SVG, implementowanych jako własny Content Element w sitepackage i niewymagających zewnętrznych rozszerzeń.

Migracja z rozszerzenia Hotspot na rozwiązanie oparte na SVG wymaga: eksportu danych hotspotów (współrzędne, teksty), utworzenia szablonu SVG, który renderuje punkty jako elementy SVG, oraz skonfigurowania własnego Content Element, który zarządza danymi przez relację IRRE. Nakład pracy wynosi 3-5 dni, w zależności od liczby obrazów z hotspotami.

Najbardziej przyszłościowe rozwiązanie: hotspoty oparte na CSS z <map> i <area> dla prostych scenariuszy, SVG z JavaScript dla złożonych interakcji. Gosign implementuje interaktywne obrazy jako własne Content Element i doradza w wyborze odpowiedniej technologii w oparciu o złożoność, wymagania dostępności i liczbę obrazów z hotspotami.