Visualizzazione del contenuto dell'aiuto per la versione :

I componenti seguenti sono destinati a essere utilizzati durante l'authoring di contenuti per una pagina Web standard. Costituiscono un sottoinsieme dei componenti disponibili out-of-the-box per un'installazione standard di AEM.

Alcuni sono immediatamente disponibili nella barra laterale, altri anche utilizzando la modalità di progettazione per attivarli/disattivarli.

Attenzione:

Questa sezione illustra unicamente i componenti disponibili out-of-the-box in un'installazione AEM standard.

A seconda dell'istanza corrente è possibile che siano presenti componenti personalizzati sviluppati esplicitamente per le vostre esigenze. Questi possono anche avere lo stesso nome di alcuni dei componenti qui descritti.

I componenti sono disponibili durante la modifica di una pagina; in base all'interfaccia utilizzata:

  • Interfaccia touch:
    • la scheda Componenti del pannello laterale dell'Editor pagina
  • Interfaccia classica:
    • la scheda Componenti della barra laterale
    • il selettore Inserisci nuovo componente (quando si fa doppio clic nell’area Trascinate qui i componenti o le risorse)

Per entrambe le interfacce, è possibile selezionare un componente e trascinarlo nella posizione desiderata sulla pagina. È quindi possibile modificarlo:

I componenti sono ordinati in base a varie categorie (gruppi di componenti), che comprendono (per l'authoring delle pagine):

  • Generale: include i componenti di base tra cui testo, immagini, tabelle, grafici e così via.
  • Colonne: include i componenti che consentono di organizzare il layout dei contenuti.
  • Modulo: include tutti i componenti necessari alla creazione di moduli.

Generale

I componenti del gruppo Generale sono i componenti di base utilizzati per creare contenuti.

Elemento account

È possibile definire un collegamento con titolo e descrizione.

Immagine adattiva

Il componente Immagine adattiva genera immagini che vengono ridimensionate in base alla finestra nella quale viene aperta la pagina Web. Per utilizzare questo componente, occorre fornire una risorsa immagine dal file system o da DAM. Quando la pagina Web viene aperta, il browser scarica una copia dell’immagine ridimensionata, adatta per la finestra corrente. 

Le dimensioni della finestra dipendono dalle seguenti caratteristiche:

  • Schermo del dispositivo: nei dispositivi mobili le pagine Web vengono in genere visualizzate a schermo intero. 
  • Dimensioni della finestra del browser: gli utenti di computer laptop e desktop possono ridimensionare la finestra del browser.

Ad esempio, il componente genera un’immagine piccola quando la pagina Web viene aperta da uno smartphone e un’immagine media quando viene aperta da un tablet. Per un portatile, verrà invece creata un’immagine grande se la pagina viene aperta in una finestra del browser con dimensioni massime. Se la finestra del browser viene ridimensionata e ridotta, il componente trasmette un’immagine più piccola e aggiorna la visualizzazione.

Formati di immagine supportati

Per il componente Immagine adattiva potete usare file immagine con le seguenti estensioni:

  • .jpg
  • .jpeg
  • .png
  • .gif **

Attenzione:

** I file .gif animati non sono supportati in AEM per le rappresentazioni adattive.

Dimensioni e qualità delle immagini

Nella tabella seguente sono elencati i valori di larghezza immagine generati per determinate larghezze di visualizzazione. L’altezza dell’immagine generata è calcolata in modo da mantenere proporzioni costanti, senza spazi bianchi all’interno del bordo dell’immagine. Per evitare spazi bianchi può essere applicato il ritaglio.

Per le immagini JPEG, la dimensione di visualizzazione può inoltre influenzare la qualità JPEG. Sono possibili le seguenti qualità JPEG:

  • Bassa (0,42)
  • Media (0,82)
  • Alta (1,00)
Intervallo di larghezza di visualizzazione (pixel) Larghezza immagine (pixel) Qualità JPEG Tipo di dispositivo di destinazione
larghezza <= 319 320 Bassa  
larghezza = 320 320 Media Smartphone (verticale)
320 < larghezza < 481 480 Media Smartphone (orizzontale)
480 < larghezza < 769 476 Alta Tablet (verticale)
768 < larghezza < 1025 620 Alta Tablet (orizzontale)
larghezza <= 1025 Intera (dimensione originale) Alta Desktop

Proprietà

La finestra di dialogo consente di modificare le proprietà per l'istanza del componente Immagine adattiva, molte delle quali sono in comune con il componente Immagine, sul quale il primo si basa. Le proprietà sono disponibili in due schede:

  • Immagine
    • Immagine
      È possibile trascinare un’immagine da Content Finder oppure fare clic per aprire una finestra in cui caricare un’immagine. Una volta caricata l’immagine, è possibile ritagliarla, ruotarla o eliminarla. Per ingrandire e ridurre l’immagine, utilizzate la barra di scorrimento al di sotto dell’immagine (sopra i pulsanti OK e Annulla)
    • Ritaglia
      Consente di ritagliare un’immagine. Trascinate il bordo dell’immagine per ritagliare.
    • Rotazione
      Fate clic più volte fino a ottenere la rotazione desiderata.
    • Cancella
      Rimuove l’immagine corrente.
  • Avanzate
    • Titolo
      Il componente Immagine adattiva non utilizza questa proprietà.
    • Testo Alt
      Testo alternativo per l’immagine.
    • Collega a
      Il componente Immagine adattiva non utilizza questa proprietà.
    • Descrizione
      Il componente Immagine adattiva non utilizza questa proprietà.

Estensione del componente immagine adattiva

Per informazioni su come personalizzare il componente Immagine adattiva, consultate Il componente Immagine adattiva.

Carosello

Il componente Carosello consente di visualizzare le immagini associate a singole pagine:

  • una per volta
  • per un periodo di tempo limitato
  • in un ordine specificato
  • con un ritardo specificato

I controlli attivi consentono anche di muoversi in sequenza attraverso le pagine visualizzate in tempo reale, a richiesta. Fate clic sull'immagine di pagina visibile per passare alla pagina relativa. In altre parole, il carosello funge da controllo di navigazione.

Proprietà

Sono disponibili in due schede:

  • Carosello
    Consente di specificare il funzionamento del carosello:
    • Velocità di riproduzione
      Tempo in millisecondi prima della visualizzazione della diapositiva successiva.
    • Tempo di transizione
      Tempo in millisecondi per la transizione tra due dispositive.
    • Stile comandi
      Varie opzioni sono disponibili tramite un menu a discesa; ad esempio, Pulsanti Prec/Succ, Opzioni alto-destra.
  • Elenco
    Consente di specificare in che modo le pagine vengono incluse nel carosello:
    • Genera elenco con
      Esistono vari modi per generare un elenco di pagine: Pagine figlie, Elenco correzioni, Ricerca o Ricerca avanzata (tutti descritto di seguito).
      Indipendentemente dal metodo scelto, alle pagine incluse nell’elenco dovrebbe già essere associata un’immagine, che verrà visualizzata nel carosello. Se a una determinata pagina, nelle Proprietà pagina, non è associata un’immagine, è necessario eseguire l’associazione prima di iniziare; in caso contrario nel carosello sarà visualizzata una pagina vuota (o quasi completamente vuota). Consultate Modifica delle proprietà pagina.
      A seconda dell’elemento scelto sarà visualizzato un nuovo pannello:
      • Opzioni per le pagine secondarie
        • Pagina padre
          Consente di specificare il percorso manualmente o utilizzando il selettore. Non specificate nulla per utilizzare la pagina corrente.
      • Opzioni per elenco fisso
        • Pagine
          Consente di selezionare un elenco di pagine. Utilizzate + per aggiungere voci e i pulsanti su/giù per modificare l’ordine.
      • Opzioni per la ricerca
        • Inizia in
          Consente di immettere un percorso di inizio, manualmente o utilizzando il selettore.
        • Query di ricerca
          Consente di inserire una query di ricerca sotto forma di testo normale.
      • Opzioni di ricerca avanzata
        • Notazione predicato QueryBuilder
          Consente di inserire una query di ricerca utilizzando la notazione predicato QueryBuilder. Ad esempio, è possibile inserire “fulltext=Marketing” per visualizzare nel carosello tutte le pagine il cui contenuto include “Marketing”.
          Consultate API di QueryBuilder per una descrizione approfondita delle espressioni di query e per altri esempi.
    • Ordina per
      Selezionate jcr:title, jcr:created, cq:lastModified o cq:template dal menu a discesa.
    • Limite
      Il numero massimo di voci da utilizzare nel carosello; facoltativo.

Nota:

Potete creare un componente Carosello personalizzato per Adobe Experience Manager, per la visualizzazione delle risorse digitali presenti in DAM AEM. Per ulteriori informazioni, consultate Creazione di componenti Carosello personalizzati per Adobe Experience Manager.

Grafico

Il componente Grafico consente di aggiungere un grafico a barre, a linee o a torta. AEM crea un grafico a partire dai dati forniti. I dati vengono specificati digitando direttamente nella scheda Dati, o copiando e incollando un foglio di calcolo.

  • Dati
    • Dati grafico
      Inserite i dati per il grafico in formato CSV, utilizzando la virgola (“,”) come separatore di campo.
  • Avanzate
    • Tipo di grafico
      Selezionate un’opzione tra Grafico a torta, Grafico a linee e Grafico a barre.
    • Testo alternativo
      Testo alternativo che viene visualizzato al posto del grafico.
    • Larghezza
      Larghezza del grafico, in pixel.
    • Altezza
      Altezza del grafico, in pixel.

L'esempio seguente mostra un esempio di dati del grafico, seguiti dal grafico a barre risultante:

Nota:

Potete creare un controllo per grafici AEM personalizzato per la visualizzazione di dati presenti in AEM JCR. Per ulteriori informazioni, consultate Visualizzazione di dati di Adobe Experience Manager in un grafico.

Frammento di contenuto

I frammenti di contenuto vengono creati e gestiti come risorse indipendente dalla pagina. Potete quindi utilizzare questi frammenti, con le relative varianti, durante la creazione di pagine di contenuto.

Importazione progettazione

Questo consente di caricare un file zip che include un pacchetto di progettazione.

Scarica

Il componente Scarica crea un collegamento nella pagina Web selezionata per scaricare un file specifico. È possibile trascinare un contenuto da Content Finder oppure caricare un file.

  • Scarica
    • Descrizione
      Breve descrizione visualizzata con il collegamento per il download.
    • File
      File disponibile per il download nella pagina Web risultante. Trascinate una risorsa da Content Finder o fate clic nell’area per caricare il file da rendere disponibile come download.

Nell’esempio di seguito viene illustrato il componente Scarica di Geometrixx:

Esterno

Il componente per l’integrazione con applicazioni esterne (Esterno) consente di integrare applicazioni esterne nella pagina CQ tramite un iframe.

  • Esterno
    • Applicazione di destinazione
      Specificate l’URL dell’applicazione Web da integrare, ad esempio:
          http://en.wikipedia.org/wiki/Main_Page
    • Passa parametri
      Se necessario, selezionate la casella di selezione per i parametri da passare all’applicazione.
    • Larghezza e altezza
      Consente di definire la dimensione dell’iframe

L’applicazione esterna viene integrata nel sistema paragrafo della pagina CQ, ad esempio, quando si utilizza un'applicazione di destinazione http://en.wikipedia.org/wiki/Main_Page:

Nota:

A seconda del caso d’uso, per l’integrazione di applicazioni esterne possono essere disponibili altre opzioni, ad esempio l'Integrazione di portlet.

Flash

Il componente Flash permette di caricare un filmato Flash. Potete trascinare un contenuto Flash da Content Finder sul componente oppure usare la finestra di dialogo:

  • Flash
    • Filmato Flash
      Il file del filmato Flash. Potete trascinare una risorsa da Content Finder oppure fare clic per aprire una finestra con cui individuare il contenuto.
    • Dimensioni
      Dimensioni in pixel dell’area di visualizzazione destinata al filmato.
  • Immagine alternativa
    Un’immagine alternativa da visualizzare
  • Avanzate
    • Menu di scelta rapida
      Indica se il menu di scelta rapida deve essere visualizzato o nascosto.
    • Modalità finestra
      Aspetto della finestra, ad esempio opaca, trasparente o distinta (in tinta unita).
    • Colore di sfondo
      Un colore di sfondo selezionato dalla tavola colori fornita.
    • Versione minima
      Versione minima di Adobe Flash Player necessaria per riprodurre il filmato. L’impostazione predefinita è 9.0.0.
    • Attributi
      Eventuali altri attributi richiesti.

Immagine

Il componente Immagine visualizza un’immagine e il relativo testo in base ai parametri specificati.

È possibile caricare un'immagine, quindi modificarla e alterarla (ad esempio ritagliare, ruotare, aggiungere un collegamento/titolo/testo). La funzionalità è sostanzialmente la stessa in entrambe le interfacce, anche se l'aspetto varia:

  • Interfaccia touch

    Potete trascinare un'immagine dal Browser risorse direttamente sul componente o nella relativa finestra di dialogo Configura. È anche possibile caricare un'immagine dalla finestra di dialogo Configura; questa finestra di dialogo controlla anche tutte le definizioni e le operazioni di alterazione delle immagini:

    Una volta che l'immagine è caricata (non prima) è possibile utilizzare la modifica locale per ritagliare/ruotare l'immagine come richiesto:

    Nota:

    L'editor locale utilizza la dimensione e le proporzioni originali dell'immagine durante la modifica. Potete anche specificare proprietà di altezza e larghezza. Eventuali limitazioni relative a dimensioni e proporzioni definite nelle proprietà vengono applicate al salvataggio delle modifiche.

    In base all'istanza, le limitazioni minime e massime possono essere imposte anche a partire dalla progettazione della pagina; queste vengono sviluppate durante l'implementazione del progetto.

    Diverse opzioni aggiuntive sono disponibili nella modalità di modifica a schermo intero, ad esempio, mappa e zoom:

  • Interfaccia classica

    Potete trascinare un'immagine da Content Finder direttamente sul componente o nella relativa finestra di dialogo di modifica. È anche possibile fare doppio clic nell'area centrale della finestra di dialogo di modifica per sfogliare il file system locale e caricare un'immagine. Le due schede della finestra di dialogo Modifica controllano anche tutte le definizioni e le operazioni di alterazione delle immagini:

Nota:

In Internet Explorer non è possibile monitorare l’avanzamento del caricamento.

Se utilizzate Internet Explorer è necessario caricare l’immagine e fare clic su OK, quindi riaprire l’immagine per visualizzare il file caricato nell’anteprima e per eseguire eventuali modifiche (ad esempio, ritagliare l’immagine).

Per ulteriori informazioni sulle funzioni HTML5 utilizzate da AEM, consultare Piattaforme certificate.

Quando si carica un'immagine, è possibile configurare le opzioni seguenti:

  • Mappa
    Per mappare un’immagine, selezionate Mappa. È possibile specificare come si desidera creare la mappa immagine (rettangolare, poligonale, e così via) e specificare la destinazione dell’area.
  • Ritaglia
    Consente di ritagliare un’immagine. Utilizzare il mouse per ritagliare.
  • Rotazione
    Per ruotare un’immagine. Fate clic più volte fino a ottenere la rotazione desiderata.
  • Cancella
    Rimuove l’immagine corrente.
  • Barra Zoom (solo interfaccia classica)
    Per ingrandire e ridurre l’immagine, utilizzate la barra di scorrimento al di sotto dell’immagine (sopra i pulsanti OK e Annulla)
  • Titolo
    Il titolo dell’immagine.
  • Testo Alt
    Un testo alternativo da utilizzare per la creazione di contenuti accessibili.
  • Collega a
    Consente di creare un collegamento a risorse o altre pagine all’interno del sito Web.
  • Descrizione
    Una descrizione dell’immagine.
  • Dimensioni
    Consente di impostare l’altezza e la larghezza dell’immagine.

Nota:

Nell’interfaccia touch alcune opzioni sono disponibili solo nell’editor a schermo intero.

L'immagine finale (con Titolo e Descrizione) può essere visualizzata come:

Contenitore di layout

Il componente fornisce un sistema paragrafo a griglia che consente di aggiungere e posizionare i componenti all'interno di una griglia reattiva. Questo consente di definire layout di contenuti diversi in base alla larghezza dei dispositivi di destinazione, inclusa una gamma di telefoni, tablet e desktop.

Nota:

Questo componente è stato implementato con il linguaggio HTL (HTML Template Language).

Elenco

Il componente Elenco permette di configurare criteri di ricerca per la creazione di un elenco:

  • Elenco
    • Genera elenco con
      Consente di specificare la provenienza del contenuto dell’elenco. Sono disponibili diversi metodi:
    • A seconda dell'elemento scelto sarà visualizzato un nuovo pannello:
      • Opzioni per le pagine secondarie
        • Elemento secondario di (Pagina padre)
          Consente di specificare il percorso manualmente o utilizzando il selettore. Non specificate nulla per utilizzare la pagina corrente.
      • Opzioni per elenco fisso
        • Pagine
          Consente di selezionare un elenco di pagine. Utilizzate + per aggiungere voci e i pulsanti su/giù per modificare l’ordine.
      • Opzioni per la ricerca
        • Inizia in
          Consente di immettere un percorso di inizio, manualmente o utilizzando il selettore.
        • Query di ricerca
          Consente di inserire una query di ricerca sotto forma di testo normale.
      • Opzioni di ricerca avanzata
        • Notazione predicato QueryBuilder
          Consente di inserire una query di ricerca utilizzando la notazione predicato QueryBuilder. Ad esempio, è possibile inserire “fulltext=Marketing” per visualizzare nel carosello tutte le pagine il cui contenuto include “Marketing”.
          Consultate API di QueryBuilder per una descrizione approfondita delle espressioni di query e per altri esempi.
      • Tag
        Consente di specificare la Pagina padre, Tag/Parole chiave e i criteri di corrispondenza richiesti.
    • Visualizza come
      Consente di specificare le modalità della visualizzazione in elenco degli elementi, ad esempio Collegamenti, Teaser o Notizie.
    • Ordina per
      Consente di specificare se l’elenco è da ordinare e, in tal caso, i criteri da utilizzare per l’ordinamento. È possibile inserire un criterio oppure selezionarne uno dall’elenco a discesa.
    • Limite
      Consente di specificare il numero massimo di elementi da visualizzare nell’elenco.
    • Abilita feed
      Indica se attivare un feed RSS per l’elenco.
    • Paginare dopo
      Consente di specificare il numero di voci da visualizzare contemporaneamente. Se un elenco contiene più voci del numero specificato, verrà visualizzato in più parti.

Nell’esempio seguente, un componente Elenco visualizza una serie di pagine figlie, in base alle definizioni CSS personalizzate della progettazione di un sito.

Accesso

Forniscono i campi nome utente e password.

È possibile configurare i seguenti parametri:

  • Accesso
    • Etichetta sezione
      Testo lead-in per i campi di input.
    • Etichetta nome utente
      Testo per etichettare il campo del nome utente.
    • Etichetta password
      Testo per etichettare il campo della password.
    • Etichetta pulsante Accesso
      Testo per il pulsante di accesso.
    • Reindirizza a
      È possibile specificare la pagina del sito Web che verrà visualizzata una volta che l’utente ha eseguito l’accesso.
  • Accesso già effettuato
    • Etichetta pulsante Continua
      Testo per indicare che l’utente ha già eseguito l’accesso.

Stato ordine

  • Titolo
    • Titolo
      Consente di specificare il testo del titolo che si desidera visualizzare.
    • Collegamento
      Consente di specificare la pagina (prodotto) per il quale deve essere visualizzato lo stato dell’ordine.
    • Tipo/Dimensione
      Eseguire la selezione tra le opzioni disponibili.

Riferimento

Il componente Riferimento consente di fare riferimento a testo da un'altra pagina del sito Web AEM (all'interno dell'istanza corrente). Il contenuto del paragrafo cui viene fatto riferimento verrà visualizzato come se si trovasse nella pagina corrente. Il contenuto verrà aggiornato al modificarsi del paragrafo di origine (potrebbe essere necessario un aggiornamento della pagina).

  • Riferimento paragrafo
    • Riferimento
      Consente di specificare il percorso della pagina e il paragrafo cui si desidera fare riferimento (includere il contenuto).

Per specificare il percorso di un paragrafo è necessario aggiungere in coda al percorso (della pagina) quanto segue:

.../jcr:content/par/<paragraph-ID>

Esempio:

/content/geometrixx-outdoors/en/equipment/biking/cajamara/jcr:content/par/similar-products

Oltre a fare riferimento a un paragrafo specifico, il percorso può essere modificato anche in modo da specificare un sistema paragrafo completo. Questa operazione può essere eseguita inserendo in coda al percorso quanto segue:

/jcr:content/par

Esempio:

/content/geometrixx-outdoors/en/equipment/biking/cajamara/jcr:content/par

Una volta configurato il contenuto apparirà esattamente come nella pagina di origine. Il fatto che si tratti di un riferimento è visibile solo quando il componente viene aperto per la modifica:

Ricerca

Il componente Ricerca aggiunge alla pagina le funzionalità di ricerca.

È possibile configurare quanto segue:

  • Ricerca
    • Tipi di nodo
      Se la ricerca deve essere limitata a tipi di nodo specifici, elencarli qui; ad esempio, cq:Page.
    • Percorso di ricerca
      Consente di specificare la pagina radice del ramo che si desidera cercare.
    • Testo pulsante Cerca
      Nome visualizzato sul pulsante di ricerca.
    • Testo per statistiche
      Testo visualizzato sopra i risultati di ricerca.
    • Testo Nessun risultato
      In assenza di risultati viene visualizzato il testo inserito qui.
    • Controllo ortografia del testo
      Se qualcuno inserisce un termine simile, questo testo viene visualizzato prima del termine.
      Ad esempio, se digitate geometrixxe, il sistema mostra il messaggio “Provate con: Geometrixx”.
    • Testo per pagine simili
      Il testo visualizzato accanto a un risultato per pagine simili. Fate clic su questo collegamento per visualizzare le pagine con contenuto simile.
    • Testo di ricerche correlate
      Testo visualizzato accanto a ricerche per termini e argomenti correlati.
    • Testo di tendenze ricerca
      Titolo al di sopra dei termini di ricerca inseriti dall’utente.
    • Etichetta pagina risultati
      Testo visualizzato in fondo all’elenco, con collegamenti alle altre pagine di risultati.
    • Etichetta precedente
      Nome visualizzato sul collegamento alle pagine di ricerca precedenti.
    • Etichetta successiva
      Nome visualizzato sul collegamento verso le pagine di ricerca successive.

L’esempio seguente mostra il componente Ricerca dopo la ricerca della parola geometrixx dalla directory principale di un’installazione standard. L’esempio mostra anche l’impaginazione dei risultati:

L’esempio seguente mostra un termine di ricerca con errore ortografico e non disponibile:

Sitemap

Un elenco automatico di tipo sitemap, con impostazioni predefinite, include tutte le pagine, (sotto forma di collegamenti attivi), presenti nel sito Web corrente. Ad esempio, un estratto mostra quanto segue:

 Se necessario è possibile configurare:

  • Sitemap
    • Percorso directory principale
      Percorso di partenza per la creazione dell’elenco.

Presentazione

Questo componente permette di caricare una serie di immagini da visualizzare sulla pagina sotto forma di slideshow. Potete aggiungere o rimuovere immagini e assegnare un titolo a ognuna di esse. In Avanzate è inoltre possibile specificare la dimensione dell’area di visualizzazione.

È possibile configurare i seguenti parametri:

  • Diapositive
    • Nuova diapositiva
      È possibile specificare una selezione di diapositive utilizzando i pulsanti Aggiungi (e Rimuovi).
    • Titolo
      Consente di specificare un titolo, se necessario. Questo verrà sovrapposto alla diapositiva appropriata.
  • Avanzate
    • Dimensioni
      Consente di specificare larghezza e altezza in pixel.

Quindi, il componente Presentazione visualizza in sequenza ciascuna immagine per un breve lasso di tempo, prima di passare alla diapositiva successiva con un effetto di dissolvenza:

Tabelle

Nota:

Il componente Tabella è basato sull'editor Rich Text, come il componente Testo.

Si consiglia di utilizzare il componente Tabella per le tabelle, anche se è possibile generarle con il componente Testo.

Il componente Tabella è preconfigurato per consentire di generare, compilare e formattare una tabella. Utilizzando la finestra di dialogo è possibile configurare la tabella e creare contenuti:

  • da zero
  • copiando e incollando un foglio di calcolo o una tabella da un programma di modifica esterno (come Excel, OpenOffice, Notepad e così via).

Potete apportare semplici modifiche al contenuto utilizzando l’editor in linea:

Nella modalità a schermo intero è possibile configurare il layout della tabella:

La schermata seguente mostra un esempio del componente Tabella; la progettazione è determinata dal CSS specifico per il sito:

Tag cloud

Una tag cloud mostra una rappresentazione grafica di una selezione di tag associati al contenuto del sito Web:

Per la configurazione del componente Tag cloud, potete specificare:

  • Tag da visualizzare
    La posizione di origine dei tag da visualizzare. È possibile eseguire la selezione da una pagina o da una pagina con tutte le relative pagine figlie oppure tutti i tag.
  • Pagina
    La pagina alla quale verrà fatto riferimento.
  • Nessun collegamento sui tag
    Consente di specificare se i tag visualizzati devono fungere da collegamenti oppure no.

Per ulteriori informazioni sull'applicazione dei tag, consultare Utilizzo dei tag.

Testo

Nota:

Il componente Testo è basato sull'editor Rich Text, come il componente Tabella.

Si consiglia di utilizzare il componente Tabella per le tabelle, anche se è possibile generarle con il componente Testo.

Il componente Testo consente di immettere un blocco di testo utilizzando un editor WYSIWYG, con funzionalità fornite dall'editor Rich Text. Una selezione di icone consente di formattare il testo, comprese caratteristiche dei font, allineamento, collegamenti, elenchi e rientro. La funzionalità è sostanzialmente la stessa in entrambe le interfacce, anche se l'aspetto varia:

  • Interfaccia touch (modalità a schermo intero)

  • Interfaccia classica

Quando aprite la finestra di dialogo Configura (ottimizzata per il touch) o la scheda Stili della finestra di dialogo di modifica (interfaccia classica) è inoltre possibile impostare:

  • Spaziatore
  • Stile di testo

Il testo formattato verrà quindi visualizzato sulla pagina; la progettazione effettiva dipenderà dal sito CSS:

Per informazioni più dettagliate sul componente Testo e sulla funzionalità fornita dall'editor Rich Text, consultate la pagina Editor Rich Text.

Modifica locale

Oltre alla modalità di modifica Rich Text basata su finestra di dialogo, in AEM è disponibile la modifica locale, che consente di modificare direttamente il testo visualizzato nel layout della pagina. L'aspetto effettivo dipende, anche in questo caso, dall’interfaccia in uso.

Testo e immagine

Il componente Testo e immagine aggiunge un blocco di testo e un’immagine. È inoltre possibile aggiungere testo e immagini separatamente; per maggiori dettagli, vedete i componenti Testo e Immagine.

Come con i componenti di testo e immagine, l'aspetto varia in base all'interfaccia utilizzata, ma in entrambi i casi è possibile configurare:

  • Stili componente (Stili)
    Qui è possibile allineare l’immagine a sinistra o a destra. L’importazione predefinita è l’allineamento a sinistra, con l’immagine a sinistra.
  • Proprietà immagine (Proprietà immagine avanzate)
    Consente di specificare quanto segue:
    • Risorsa immagine
      Carica l’immagine richiesta.
    • Titolo
      Il titolo del blocco di testo, che verrà visualizzato al passaggio del mouse.
    • Testo Alt
      Testo alternativo che verrà mostrato qualora l’immagine non sia disponibile. Se lasciato vuoto, verrà utilizzato il titolo.
    • Collega a
      Specificate un percorso di destinazione.
    • Descrizione
      Una descrizione dell’immagine.
    • Dimensioni
      Imposta l’altezza e la larghezza dell’immagine.

L’esempio seguente mostra un componente Testo e immagine che visualizza l'immagine allineata a sinistra:

Titolo

Il componente Titolo può visualizzare uno dei seguenti elementi:

  • il nome della pagina corrente, qualora il campo Titolo venga lasciato vuoto; oppure
  • il testo specificato nel campo Titolo.

È possibile configurare i seguenti parametri:

  • Titolo
    Per utilizzare un nome diverso dal titolo della pagina, inseritelo in questo campo.
  • Collegamento
    L’URI se il titolo deve fungere da collegamento.
  • Tipo/Dimensione
    Consente di selezionare Piccolo o Grande dall’elenco a discesa. Piccolo viene generato come immagine. Grande viene generato come testo.

L’esempio seguente mostra un componente Titolo visualizzato; la progettazione dipende dal CSS specifico del sito.

Video

Il componente Video consente di inserire un elemento video predefinito, disponibile out-of-the-box, nella pagina. 

Nota:

Tenete presente che, per una transcodifica corretta, è necessario installare separatamente FFmpeg.

FFmpeg è utilizzato per generare rappresentazioni video quando l’elemento multimediale dinamico non è abilitato, mentre il transcoder video viene utilizzato per AEM con l’elemento multimediale dinamico abilitato. Per ulteriori informazioni, consultate Installazione e configurazione del transcoder video con FFmpeg.

Possono anche configurare i profili video per l'utilizzo con elementi di HTML5.

Dopo aver posizionato un'istanza del componente sulla pagina è possibile configurare:

  • Video
    • Risorsa video
      Consente di caricare o rilasciare la risorsa video.
    • Dimensioni
      Il formato nativo del video (altezza x larghezza in pixel) sarà visualizzato nel campo accanto a Dimensioni (vedere sopra). Immettete manualmente le dimensioni in larghezza e altezza per sovrascrivere le dimensioni native del video. Fate clic su OK per chiudere la finestra di dialogo.

Nota:

Tra i formati supportati:

  • .mp4
  • Ogg
  • FLV (video Flash)  

Colonne

Le colonne sono un meccanismo per controllare il layout del contenuto in AEM. In un'installazione standard sono inclusi componenti per la creazione di due e/o 3 colonne.

L'esempio seguente mostra il componente 2 Colonne in uso. È possibile utilizzare i segnaposto per i nuovi componenti:

2 Colonne

Componente Controllo colonna con impostazione predefinita di 2 colonne uguali.

3 Colonne

Componente Controllo colonna con impostazione predefinita di 3 colonne uguali.

Controllo colonna

Nota:

Il componente Controllo colonna è disponibile esclusivamente nell'interfaccia classica. Nell'interfaccia touch vengono utilizzati i componenti preconfigurati 2/3 Colonne.

Il componente Controllo colonna consente agli utenti di selezionare la modalità di suddivisione del contenuto del pannello principale della pagina Web in più colonne. Gli utenti possono selezionare il numero di colonne richiesto (da un elenco predefinito) e quindi creare, eliminare o spostare i contenuti all'interno di ciascuna colonna.

  • Controllo colonna
    • Layout colonna
      Consente di selezionare il numero di colonne desiderato. Una volta creata, ogni colonna include un proprio collegamento per trascinare componenti o risorse per l’aggiunta di contenuti.

Modulo

I componenti Modulo permettono di creare dei moduli che i visitatori possono compilare e inviare. I moduli e i componenti modulo consentono di raccogliere informazioni come ad esempio feedback dagli utenti (ad es. mediante un modulo di valutazione del livello di soddisfazione) e informazioni (ad es. mediante un modulo di registrazione utente).

Nota:

Consultate Aiuto moduli AEM per informazioni sui moduli AEM.

I moduli sono composti di diversi componenti distinti:

  • Modulo
    Questo componente è necessario per definire l’inizio e la fine di un nuovo modulo su una pagina. È quindi possibile inserire altri componenti tra tali elementi, ad esempio tabelle, file da scaricare e così via. 
  • Campi ed elementi modulo
    I campi e gli elementi modulo possono includere caselle di testo, pulsanti di scelta, immagini e così via. L’utente spesso compie un’azione in un campo modulo, ad esempio la digitazione di testo. Per ulteriori informazioni, consultate le sezioni sui singoli elementi modulo.
  • Componenti profilo
    I componenti profilo si riferiscono ai profili dei visitatori utilizzati per la collaborazione sui social network e in altre aree in cui è richiesta la personalizzazione in base al visitatore. 

Di seguito è visualizzato un modulo di esempio, composto dal componente Modulo (inizio e fine), con due campi di testo modulo per consentire l’input da parte del visitatore, un campo di testo generale utilizzato per il testo lead-in e un pulsante Invia.

Nota:

Informazioni sullo sviluppo e sulla personalizzazione ulteriori del moduli sono disponibili sulla pagina Sviluppo di moduli. Sono inclusi, tra gli altri, aggiunta di azioni, vincoli, precaricamento di campi e utilizzo di script per richiamare un servizio per l'esecuzione di un'azione.

Impostazioni comuni a numerosi componenti modulo

Anche se i vari componenti modulo hanno funzioni diverse, molti di essi offrono opzioni e parametri simili.

Quando si configura un componente modulo, la finestra di dialogo include le seguenti schede:

  • Titolo e testo
    Qui è necessario specificare le informazioni di base, come il titolo del modulo ed eventuale testo di accompagnamento. Se appropriato è inoltre possibile definire altre informazioni chiave, ad esempio se il campo consente una selezione multipla e quali voci possono essere selezionate.
  • Valori iniziali
    Consente di specificare un valore predefinito.
  • Vincoli
    Consente di specificare se un campo è obbligatorio ed eventuali vincoli associati al campo (ad esempio se il valore deve essere numerico e così via).
  • Attribuzione stile
    Indica la dimensione e lo stile dei campi.

Nota:

I campi disponibili variano notevolmente in base al singolo componente.

Queste schede forniscono i parametri necessari, che dipendono dal tipo di componente, ma possono includere:

  • Titolo e testo
    • Nome elemento
      Il nome dell’elemento. Indica la posizione di memorizzazione dei dati nell’archivio.
      Si tratta di un campo obbligatorio che deve contenere solo i caratteri seguenti:
      • caratteri alfanumerici
      • _ . / : -
    • Titolo
      Il titolo visualizzato insieme al campo. Se lasciato vuoto, viene visualizzato il titolo predefinito.
    • Descrizione
      Consente di fornire informazioni aggiuntive per l’utente, se necessario. Nel modulo è visualizzata sotto il campo, in un carattere più piccolo rispetto al titolo.
    • Mostra/Nascondi
      Determina quando il campo è visibile.
  • Valori iniziali
    • Valore predefinito
      Il valore visualizzato nel campo all’apertura del modulo, ovvero prima che venga compilato dall’utente.
  • Vincoli
    • Obbligatorio
      Dipende dal tipo di componente modulo, ma fornisce una o più caselle di controllo per indicare che questo campo, o alcune parti di esso, è/sono obbligatori.
    • Messaggio richiesto
      Un messaggio per informare gli utenti che questo campo è obbligatorio; un campo obbligatorio sarà anche contrassegnato da un asterisco.
    • Vincolo
      I vincoli disponibili per la selezione dipendono dal tipo di componente modulo.
    • Messaggio vincolo
      Un messaggio per informare gli utenti di ciò che è richiesto.
  • Attribuzione stile
    • Dimensioni
      In righe e colonne.
    • Larghezza
      In pixel.
    • CSS

Modulo (componente)

Il componente Modulo definisce l’inizio e la fine di un modulo con gli elementi Inizio modulo e Fine modulo. Questi sono sempre utilizzati in coppia per garantire la corretta definizione del modulo.

Tra l’inizio e la fine di un modulo potete aggiungere componenti modulo che definiscono i campi di immissione presentati agli utenti.

Inizio del modulo

Questo componente è necessario per definire l’inizio di un nuovo modulo su una pagina. È possibile configurare quanto segue:

  • Modulo
    • Pagina di ringraziamento
      La pagina cui viene fatto riferimento per ringraziare i visitatori dopo l’invio del modulo. Se lasciato vuoto, il modulo viene visualizzata di nuovo dopo l’invio.
    • Avvia flusso di lavoro
      Determina il flusso di lavoro attivato dopo l’invio del modulo.
  • Avanzate
    • Tipo di azione
      Un modulo richiede un’azione. L’azione definisce l’operazione attivata per l’esecuzione con i dati inviati dall’utente (simile a action= nel linguaggio HTML). Alcuni richiedono una Configurazione azione corrispondente.
      Una selezione di tipi di azione è inclusa in un’installazione standard di AEM:
      • Richiesta account
      • Crea contenuto
      • Crea lead
      • Crea e aggiorna account
      • Servizio e-mail: crea utente con sottoscrizione e aggiungi all'elenco
      • Servizio e-mail: invia messaggio di risposta automatica
      • Servizio e-mail: cancella sottoscrizione a mailing list
      • Modifica community
      • Modifica risorse
      • Modifica risorse controllate da flusso di lavoro
      • Mail
      • Dettagli ordine inoltrato
      • Aggiornamento profilo
      • Ripristina password
      • Imposta password
      • Contenuto store
        È il tipo di azione predefinito.
      • Contenuto store con caricamenti
      • Invia ordine
      • Annulla sottoscrizione utente
      • Aggiorna ordine
    • Identificatore modulo
      L’identificatore del modulo identifica in modo univoco il modulo. Utilizzate l’identificatore in presenza di diversi moduli su una stessa pagina, avendo cura di usare identificatori diversi per ciascuno.
    • Percorso di caricamento
      Il percorso alle proprietà dei nodi utilizzato per caricare i valori predefiniti nei campi del modulo.
      È un campo facoltativo che specifica il percorso a un nodo nell’archivio. Quando a questo nodo sono associate proprietà che corrispondono ai nomi di campo, i campi modulo corrispondenti vengono precaricati con il valore di tali proprietà. Se non esiste corrispondenza, il campo contiene il valore predefinito.
      Utilizzando Percorso di caricamento potete precaricare valori nei campi del modulo. Per ulteriori informazioni, consultate Precaricamento di valori nel modulo.
    • Convalida client
      Indica se la convalida del client è necessaria per questo modulo (la convalida server si verifica sempre). Questo può essere ottenuto in combinazione con il componente Captcha moduli.
    • Tipo risorsa validazione
      Definisce il tipo di risorsa per la convalida del modulo se si desidera convalidare l’intero modulo (anziché i singoli campi). Se state convalidando l’intero modulo, includete anche uno degli elementi seguenti: 
      • Uno script per la convalida del client:
           /apps/<miaApp>/form/<miaConvalida>/formclientvalidation.jsp
      • Uno script per la convalida sul lato server:
           /apps/<miaApp>/form/<miaConvalida>/formservervalidation.jsp
    • Configurazione azione
      Le opzioni disponibili in Configurazione azionedipendono dalla selezione in Tipo di azione:
      • Richiesta account
        • Pagina di creazione account
          Pagina utilizzata per la creazione di un nuovo account.
      • Crea contenuto
        • Percorso contenuto
          Il percorso a qualsiasi contenuto rilasciato dal modulo. Immettete un percorso che termini con una barra /. Questo significa che per ciascun modulo viene creato un nuovo nodo nel percorso specificato, ad esempio:
              /forms/feedback/
        • Tipo
          Selezionate il tipo desiderato.
        • Modulo
          Specificate il modulo.
        • Rendering con
          Selezionate l’opzione desiderata dall’elenco.
        • Tipo risorsa
          Se impostato, viene aggiunto a ogni commento come sling:resourceType
        • Selettore vista
      • Crea lead
        • Il lead verrà aggiunto a questo elenco
          Consente di specificare l’elenco di lead richiesto.
      • Crea e aggiorna account
        • Gruppo iniziale
          Gruppo cui assegnare il nuovo utente.
        • Pagina principale
          Pagina da visualizzare dopo l’accesso.
        • Percorso
          Il percorso (relativo) per la creazione e la memorizzazione del nuovo account.
        • Visualizza dati...
          Fate clic su questo pulsante per accedere alle informazioni sui risultati del modulo in Modifiche collettive. Da qui è possibile esportare le informazioni in un file .tsv (separato da tabulazioni) da utilizzare, ad esempio, in un foglio di calcolo Excel.
      • Mail
        • Da
          L’indirizzo e-mail dal quale deve essere inviato il messaggio.
        • Invia a
          Gli indirizzi e-mail cui deve essere inviato il modulo.
        • CC
          Gli indirizzi e-mail per l’invio in CC.
        • CCN
          Gli indirizzi e-mail per l’invio in CCN.
        • Oggetto
          L’oggetto del messaggio e-mail.
      • Ripristina password
        • Pagina modifica password
          Pagina utilizzata per modificare la password.
      • Archivia contenuto
        • Percorso contenuto
          Il percorso a qualsiasi contenuto rilasciato dal modulo. Immettete un percorso che termini con una barra /. Questo significa che per ciascun modulo viene creato un nuovo nodo nel percorso specificato, ad esempio:
              /forms/feedback/
        • Visualizza dati...
          Fate clic su questo pulsante per accedere alle informazioni sui risultati del modulo in Modifiche collettive. Da qui è possibile esportare le informazioni in un file .tsv (separato da tabulazioni) da utilizzare, ad esempio, in un foglio di calcolo Excel.
      • Contenuto store con caricamenti
        Prevede le stesse opzioni di Contenuto store.
      • Annulla sottoscrizione utente
        • Il lead verrà eliminato da questo elenco
          Consente di specificare l’elenco di lead richiesto.

Fine del modulo

Questo indica la fine del modulo. È possibile configurare quanto segue:

  • Fine modulo
    • Mostra pulsante Invia
      Indica se mostrare o meno un pulsante Invia.
    • Nome invio
      Identificatore utilizzato qualora il modulo contiene più pulsanti Invia.
    • Titolo invio
      Nome visualizzato sul pulsante, ad esempio Invia.
    • Mostra pulsante Ripristina
      Selezionate la casella di selezione per rendere visibile il pulsante Ripristina.
    • Titolo ripristino
      Nome visualizzato sul pulsante Ripristina.
    • Descrizione
      Informazioni riportate sotto il pulsante.

Nome account

Consente di inserire un nome account:

Indirizzo

Consente di inserire un campo di indirizzo internazionale nel seguente formato:

Il componente è configurato per l'utilizzo immediato, ma è possibile modificare la configurazione se necessario. Ad esempio, possono essere aggiunti vincoli per i singoli elementi dell'indirizzo. Lasciando i campi vuoti saranno utilizzate le impostazioni predefinite.

Captcha

Il componente Captcha richiede all’utente di inserire la stringa alfanumerica visualizzata sullo schermo. Con ogni aggiornamento della schermata viene visualizzata una stringa diversa.

È possibile configurare vari parametri per questo componente, incluso un messaggio da visualizzare se la stringa Captcha non è valida.

Gruppo di caselle di selezione

Un componente Gruppo di caselle di selezione consente di generare un elenco composto di una o più caselle. L’utente potrà selezionare più caselle.

Potete specificare vari parametri, inclusi un titolo, una descrizione e il nome dell'elemento. Utilizzate i pulsanti + e - per aggiungere o rimuovere elementi, quindi riposizionateli mediante le frecce verso l’alto o il basso.

Nota:

Utilizzando Percorso di caricamento elementi potete precaricare l’elenco del gruppo di caselle di selezione con i relativi valori.

Consultate Precaricamento dei campi modulo con più valori.

Dati carta di credito

Questo consente di includere i campi necessari per inserire i dati della carta di credito. È possibile configurarlo per specificare i tipi di carte accettate e le informazioni richieste (ad esempio, il codice di sicurezza).

Elenco a discesa

Un elenco a discesa più essere configurato con una serie di valori da selezionare:

È possibile specificare un titolo e le voci incluse nell'elenco. Utilizzate i pulsanti + e - per aggiungere o rimuovere le voci, quindi riposizionatele mediante le frecce verso l’alto o il basso. È possibile specificare se gli utenti sono autorizzati a selezionare più voci dall'elenco e tutte le voci che dovrebbero essere selezionate automaticamente al primo accesso all'elenco (valori iniziali).

Nota:

Utilizzando Percorso di caricamento elementi potete precaricare nell’elenco a discesa i relativi valori.

Consultate Precaricamento dei campi modulo con più valori.

Caricamento file

Il componente Caricamento file offre all’utente la possibilità di selezionare e caricare un file.

Nota:

Potete creare un componente di caricamento personalizzato per caricare i file su un Servlet Sling. Per ulteriori informazioni, consultate Caricamento di file in Adobe Experience Manager.

Campo nascosto

Questo componente consente di creare un campo nascosto. Questi possono essere utilizzati per vari scopi; ad esempio, quando è necessario eseguire un'azione dopo l'invio del modulo, o quando dati nascosti sono necessari in fase di post-elaborazione.

Nota:

Potete inoltre personalizzare il modulo in modo da mostrare o nascondere specifici componenti a seconda dei valori di altri campi nel modulo. La modifica della visibilità di un campo modulo è utile se il campo è richiesto solo in presenza di particolari condizioni.

Consultate Mostrare e nascondere i componenti di un modulo.

Pulsante immagine

Un pulsante immagine consente di creare un pulsante con testo e immagine personalizzati:

Caricamento immagine

Il componente Caricamento immagine offre all’utente la possibilità di selezionare e caricare un file immagine.

Campo collegamento

Il componente Campo collegamento permette di specificare un URL:

Viene utilizzato frequentemente per il modulo Evento calendario, in cui fornisce un campo URL/collegamento per un evento.

Campo password

Viene utilizzato per consentire all'utente di inserire la propria password:

Reimpostazione password

Questo componente fornisce all'utente due campi:

  • per inserire una password;
  • per inserire nuovamente la password e verificare che sia stata inserita correttamente.

Con le impostazioni predefinite, il componente si presenta come segue:

Gruppo pulsanti di scelta

Un gruppo pulsanti di scelta offre un elenco composto di uno o più pulsanti di scelta. L’utente potrà selezionarne solo uno.

È possibile specificare il nome dell'elemento insieme a una descrizione e a un titolo. Utilizzate i pulsanti + e - per aggiungere o rimuovere elementi, quindi riposizionateli mediante le frecce verso l’alto o il basso e se necessario specificate un valore predefinito:

Nota:

Utilizzando Percorso di caricamento elementi potete precaricare il gruppo di pulsanti di scelta con i relativi valori.

Consultate Precaricamento dei campi modulo con più valori.

Pulsante Invia

Questo componente permette di creare un pulsante Invia, con testo predefinito:

oppure con testo personalizzato:

Campo tag

Questo campo consente di selezionare i tag:

Potete specificare vari parametri, compresi i namespace utilizzabili mediante la scheda apposita:

  • Campo tag
    • Namespace consentiti
      • Geometrixx Outdoors
      • Flusso di lavoro
      • Forum
      • Fotografia Stock
      • Geometrixx Media
      • Tag standard
      • Marketing
      • Proprietà risorsa
    • Larghezza in pixel
    • Dimensione popup

Campo testo

Il campo di testo standard può essere configurato con la dimensione richiesta e con un messaggio introduttivo personalizzato:

Pulsanti invio workflow

Questo consente di creare un pulsante Invia da utilizzare in un flusso di lavoro.

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online