Show Menu
ARGOMENTI×

Best practices for HTML5 forms

Panoramica

AEM Forms include un componente denominato moduli HTML5. Consente di eseguire il rendering dei moduli PDF basati su XFA esistenti (file XDP) in formato HTML5. Questo documento contiene linee guida e consigli per ridurre i tempi di caricamento e migliorare le prestazioni dei moduli HTML5 sui dispositivi mobili.
La maggior parte dei dispositivi mobili dispone di una potenza di elaborazione limitata e di capacità di memoria limitate. Consente di migliorare il tempo di standby dei dispositivi mobili. I browser Web in esecuzione su un dispositivo mobile hanno accesso a risorse limitate (memoria limitata e capacità di elaborazione). Una volta raggiunto il limite, il comportamento del browser diventa lento. Questo documento contiene raccomandazioni per mantenere sotto controllo le dimensioni di un modulo HTML5. Un modulo più piccolo non viola i limiti di memoria e potenza di elaborazione di un dispositivo e offre un'esperienza più semplice.
Sebbene le raccomandazioni di cui a questo articolo siano destinate ai moduli HTML5, esse sono ugualmente applicabili ai moduli PDF basati su XFA. Queste best practice contribuiscono collettivamente alle prestazioni complessive dei moduli HTML5. È necessaria un'attenta pianificazione per sviluppare forme efficienti e produttive. Cominciamo:

I nodi sono una valuta dei moduli HTML5 e li utilizzano con cognizione di causa

In genere, un modulo XFA ha più elementi. Ad esempio, tabella, campo di testo e immagini. Ogni elemento ha una serie di proprietà per controllare il comportamento e l'aspetto dell'elemento. Quando viene eseguito il rendering di un modulo XFA in formato HTML5, tutti gli elementi XFA e le proprietà corrispondenti vengono convertiti in nodi DOM modello o HTML. Questi nodi si aggiungono alle dimensioni e alla complessità di un DOM. Rendering lento del modulo HTML5.
È più semplice per i browser eseguire il rendering di un DOM più snello. Pertanto, è possibile eseguire le seguenti ottimizzazioni su un modulo XFA per ridurre il numero di nodi. Di conseguenza, generate una struttura DOM snella:
  • Utilizzare la proprietà caption per aggiungere un'etichetta a un campo. Non utilizzate un elemento Testo separato per aggiungere un'etichetta. Aiuta a perdere peso aggiuntivo, portando a guadagni di prestazioni. Consente inoltre di evitare problemi di layout.
  • Ridurre al minimo il numero di elementi di testo Disegno di un modulo. Gli elementi di disegno sono utili per migliorare la leggibilità e l’aspetto, ma non dispongono di funzionalità di memorizzazione delle informazioni. È consigliabile unire più elementi di testo Disegno in un singolo elemento di testo Disegno. Non lasciate nulla di pietra rovesciata per rendere un modulo più snello.

Le prestazioni dei moduli Lite sono migliori, le risorse vengono compresse

Un modulo HTML5 può contenere più risorse esterne, ad esempio file immagine, JavaScript e CSS. Ogni volta che un browser richiede un modulo, le risorse esterne vengono inviate attraverso la rete. Il tempo necessario per viaggiare in rete è direttamente proporzionale alle dimensioni dei file.
Pertanto, ridurre le dimensioni delle risorse esterne e utilizzare solo risorse assolutamente necessarie è il metodo migliore per migliorare le prestazioni dei moduli. In un modulo XFA è possibile eseguire le seguenti ottimizzazioni per ridurre le dimensioni delle risorse esterne di un modulo:
  • Usate immagini Best practice per ottimizzare la qualità delle immagini compresse. Riduce l'attività di rete e la quantità di memoria necessaria per eseguire il rendering di un modulo. Di conseguenza, il tempo di caricamento del modulo diminuisce notevolmente.
  • Utilizzate l'opzione Riduci in AEM Configuration Manager (Day CQ HTML Library Manager) per comprimere i file JavaScript e CSS. Per informazioni dettagliate, consultate Impostazioni di configurazione OSGi.
  • Abilita compressione Web. Riduce la dimensione delle richieste e delle risposte originate da un modulo. Per informazioni dettagliate, consultate Ottimizzazione delle prestazioni del server moduli AEM.

Mantenere vivo l'interesse, mostrare solo i campi obbligatori

Un modulo HTML5 può essere eseguito su centinaia di pagine. Il caricamento di un modulo con un numero elevato di campi risulta lento nel browser. In un modulo XFA è possibile eseguire le seguenti ottimizzazioni per ottimizzare i moduli con un gran numero di campi e pagine:
  • Valutare la suddivisione dei moduli di grandi dimensioni in più moduli. È inoltre possibile utilizzare un set di moduli per raggruppare tutti i moduli più piccoli e presentarli come un'unica unità. Un set di moduli carica solo i moduli richiesti. Inoltre, in un set di moduli è possibile configurare campi comuni in diversi moduli per condividere i binding dei dati. I binding dei dati consentono agli utenti di compilare le informazioni comuni una sola volta; le informazioni vengono compilate automaticamente nei moduli successivi, migliorando notevolmente le prestazioni. Per ulteriori dettagli sui set di moduli, consultate Set di moduli nei moduli AEM.
  • È consigliabile suddividere le sezioni e spostare ciascuna sezione in un'altra pagina. I moduli HTML5 caricano in modo dinamico ciascuna pagina nella richiesta di scorrimento della pagina. Solo la pagina scorrevole (la pagina visualizzata e le pagine che la precedono) sono memorizzate; le altre pagine vengono caricate su richiesta. La divisione e lo spostamento di una sezione in una pagina consente quindi di ridurre il tempo necessario per caricare un modulo. È inoltre possibile utilizzare la prima pagina del modulo come pagina di destinazione. È simile al sommario di un libro. Una pagina di destinazione del modulo contiene solo collegamenti alle altre sezioni del modulo. Migliora notevolmente il tempo di caricamento della prima pagina del modulo e migliora l'esperienza dell'utente.
  • Per impostazione predefinita, le sezioni condizionali devono essere nascoste. Rendere queste sezioni visibili solo quando viene soddisfatta una determinata condizione. Consente di mantenere al minimo le dimensioni del DOM. Potete anche utilizzare la navigazione con schede per visualizzare una sola sezione alla volta.

Minore è maggiore, riducete il numero di pagine

I moduli HTML5 possono contenere campi basati sui dati (tabelle e sottomoduli). Questi campi consentono di espandere le dimensioni del modulo in fase di esecuzione. Ad esempio, una tabella basata sui dati in un modulo HTML5 può estendersi su migliaia di righe. Tali tabelle possono causare un peggioramento del layout e delle prestazioni. Le ottimizzazioni suggerite di seguito consentono di ridurre i tempi di caricamento dei moduli HTML5 con campi basati sui dati:
  • Utilizzare gli script XFA per eseguire la navigazione tra le pagine per visualizzare i campi basati sui dati (tabelle e sottomoduli). Nella navigazione tra pagine, su una pagina vengono visualizzati solo dati specifici. Limita l'operazione di colorazione del browser ai campi visualizzati alla volta e semplifica la navigazione all'interno del modulo. Inoltre, gli utenti dei dispositivi mobili sono interessati solo a un sottoinsieme di dati. Consente di offrire un'ottima esperienza utente e di ridurre il tempo necessario per caricare i dati richiesti. Ci sono due soluzioni per il prezzo di una. Inoltre, la navigazione tra le pagine non è disponibile. È possibile utilizzare gli script XFA per sviluppare la navigazione tra le pagine.
  • Valutare l'unione di più colonne di sola lettura in un'unica colonna. Riduce la memoria necessaria per visualizzare il modulo. Inoltre, evitate di visualizzare le colonne che non richiedono input da parte degli utenti.
  • Valutare la suddivisione del modulo basato sui dati in un set di moduli, se i suggerimenti di cui sopra non apportano molti miglioramenti. Ad esempio, se una tabella ha più di 1000 righe, spostare ogni 100 righe in un modulo diverso. In questo modo si migliorerebbero i tempi di caricamento e le prestazioni dei moduli. Tenere presente che un set di moduli genera un XML di invio consolidato per tutti i moduli. Per distinguere i dati di ogni modulo, utilizzare origini dati diverse. Per ulteriori informazioni, consultate Set di moduli in AEM Forms .

Potenza di due per il documento di registrazione (DOR)

Un modulo XFA può contenere un numero elevato di sezioni dedicate solo al DOR (Document of Record). Per ridurre il numero di nodi e migliorare le prestazioni di un modulo di questo tipo, è possibile conservare diverse copie del modulo, una per compilare il modulo e un'altra per generare il documento di registrazione sul server. Nella copia per compilare il modulo XFA sono visualizzati i campi richiesti solo per acquisire i dati. Nel file XFA di generazione del documento di registrazione da, mantenere i campi obbligatori solo nell'output di stampa del modulo. Prima di scegliere l'approccio suggerito, valutare il guadagno in termini di prestazioni e il sovraccarico di manutenzione.

Scheda di riferimento rapido

Potete stampare la seguente scheda (fate clic sulla scheda per scaricare una versione ad alta risoluzione) e tenerla sulla scrivania per un riferimento rapido: Procedure ottimali per i moduli