Per creare i file HTML di origine per i vostri articoli, potete utilizzare un sistema CMS, ad esempio Adobe Experience Manager oppure un qualsiasi strumento: Dreamweaver, CMS o l'editor HTML. Vi consigliamo di utilizzare CSS (Cascading Style Sheets) per creare contenuto che possa essere reinserito in un flusso per tablet e telefoni di dimensioni diverse.

Nota:

in alcuni casi, è possibile utilizzare Adobe Muse per creare gli articoli HTML iniziali. Tuttavia, nella maggior parte dei casi, per modificare gli articoli HTML per l'utilizzo con AEM Mobile, è necessaria una conoscenza avanzata di HTML.

Video Creare articoli HTML

Video Creare articoli HTML
Questo video è stato registrato in origine per Adobe Digital Publishing Solution. Il processo continua a essere applicato ad AEM Mobile.
Adobe

Preparazione dei file HTML per il caricamento

Utilizzate HTML Article Packager per creare file di articolo per contenuto HTML. Quando trascinate la cartella contenente i file HTML sull'icona di Article Packager, l'utilità crea il file manifest.xml richiesto e comprime i file in un file articolo che è possibile caricare.

Per scaricare HTML Article Packager, consultate Installazione e configurazione di AEM Mobile.

  1. Scaricate e installate HTML Article Packager.

    In Mac OS, fate doppio clic sul file DMG e trascinate il file di HTML Article Packager nella cartella Applicazioni.

  2. Aggiungete il file HTML principale e le risorse richieste a una cartella. Denominate il file HTML principale index.html. Aprite la cartella nel Finder o in Esplora risorse.

    Includete solo i file a cui fate riferimento nel codice HTML. Se includete i file non utilizzati come riferimento, ad esempio le immagini PSD, aumentate inutilmente la dimensione del file.

  3. In una finestra del Finder o di Esplora risorse separata, aprite la cartella contenente l'utilità HTML Article Packager (ad esempio la cartella Applicazioni in Mac OS).

  4. Trascinate e rilasciate la cartella HTML sull'icona di HTML Article Packager.

    HTML Article Packager

    Nota:

    in Windows, la cartella contenente l'articolo deve trovarsi nello stesso percorso di unità in cui è installato HTML Article Packager.

    Il file dell'articolo viene creato allo stesso livello in cui si trova la cartella HTML.

  5. Nel portale on-demand, (https://aemmobile.adobe.com), modificate l'articolo e caricate il file dell'articolo.

    Per informazioni dettagliate, consultate Gestione degli articoli in AEM Mobile.

Plugin per sistemi CMS

Creazione di contenuti per Adobe Experience Manager (AEM)

Configurazione di AEM per l'utilizzo con AEM Mobile

Sistemi CMS di terze parti

Authoring basato su Web

 

Ottimizzazione del contenuto HTML per i dispositivi mobili

Il contenuto HTML che funziona correttamente nei browser desktop potrebbe non funzionare altrettanto bene sui dispositivi mobili. Nella creazione degli articoli HTML, effettuate le seguenti operazioni:

  • Ottimizzate le immagini per i dispositivi mobili. Un'immagine da 12000x8000 pixel con 300 dpi richiede un tempo di elaborazione più lungo rispetto a un'immagine 800x600 con 72 dpi. Evitate di utilizzare inutilmente immagini grandi per risparmiare spazio e migliorare le prestazioni.
  • Ottimizzate i file video e audio per ridurre le dimensioni e migliorare le prestazioni.
  • Semplificate il codice per i browser mobili e verificateli.

Per informazioni dettagliate, consultate Ottimizzazione del contenuto utilizzato nelle app AEM Mobile.

Utilizzo di font condivisi per gli articoli HTML

È possibile fare riferimento ai font caricati nell'app dagli articoli HTML. Facendo riferimento ai font caricati nell'app, migliorate la velocità di download e le prestazioni dell'articolo.

 

 

Nota:

I font condivisi utilizzati negli articoli HTML sono supportati solo nelle app mobili, non in Desktop Web Viewer. Per rendere disponibili i font in Desktop Web Viewer, potete includerli nell'articolo HTML oppure potete utilizzare le API per renderli disponibili tramite il contenuto condiviso.

  1. Caricate i font sul portale on-demand (Contenuti e Layout > Font e personalizzazione app). Consultate Personalizzazione di app AEM Mobile: Utilizzo di font personalizzati.

  2. Nella sezione Font e personalizzazione app del portale, create o modificate i font a cui desiderate fare riferimento. Accertatevi che il campo Nome file font sia popolato. Se necessario, caricate nuovamente i file di font.  

     

    Se desiderate aggiungere o modificare i font, aggiornate e reinviate l'app al fine di utilizzare i font.

  3. Nella sezione Fonte e personalizzazione app del portale, fate clic sull'icona per mostrare i file dei font e fate clic su Copia.

  4. Nel file HTML di origine, aggiungete i riferimenti ai font caricati.

    Articolo HTML di esempio che fa riferimento ai font dell'app

  5. Create un articolo HTML e aggiungetelo al progetto.

  6. Create un'app personalizzata che includa i font di riferimento. Testate l'articolo per essere sicuri che i font vengano visualizzati correttamente.

Nozioni di base sulla gestione dei movimenti touch nei visualizzatori

Per impostazione predefinita, toccando un'area non interattiva vengono visualizzate le barre di navigazione nei visualizzatori, mentre lo sfioramento consente di passare a un articolo oppure a una pagina successiva o precedente. Negli articoli HTML, i visualizzatori non visualizzano le barre di navigazione per gli elementi HTML interattivi noti, quali: <a/>, <video/>, <audio/>, <textarea/>, <input/> e <button/>. Toccando gli altri elementi vengono visualizzate le barre di navigazione.

Per un maggiore controllo della gestione dei movimenti touch nel contenuto interattivo avanzato, ad esempio giochi o presentazioni, utilizzate le HTML Gesture API.

Utilizzo delle HTML Gesture API

Le HTML Gesture API consentono di garantire un'ottima esperienza utente per elementi HTML interattivi più avanzati. Se, ad esempio, disponete di una presentazione a schermo intero, potete personalizzare l'esperienza per consentire agli utenti di passare all'articolo successivo sull'ultima diapositiva. Se disponete di un puzzle HTML, potete configurarlo in modo da visualizzare le barre di navigazione quando si tocca l'area di disegno, e non visualizzarle, invece, quando si tocca un pezzo del puzzle.

relinquishCurrentGesture() non è supportato nelle app Windows. Tutti gli altri movimenti touch sono supportati un tutte le piattaforme.

Vedete il file di esempio per i dettagli (solo in inglese).

Se state utilizzando Adobe Muse per creare articoli HTML, si consiglia di aggiungere al progetto Muse l'API Gestures. Bates Creative ha creato un mucow a tale scopo. Il codice e le istruzioni sono disponibili qui:

API Gestures AEM Mobile per Adobe Muse

 

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