[AEM Assets]{class="badge positive" title="Si applica ad AEM Assets)."}

Percorso Dynamic Media: nozioni di base, parte II dm-journey-part2

Benvenuti in Percorso Dynamic Media: nozioni di base, parte II, dove è possibile apprendere quanto segue:

Vedi anche Percorso Dynamic Media: nozioni di base, parte I.

Anatomia di un URL di Dynamic Media e modo in cui Dynamic Media distribuisce i contenuti dm-journey-d

Dopo aver caricato e pubblicato le risorse Dynamic Media, puoi copiare l’URL generato di una risorsa e incollarlo nel browser per vedere come la risorsa viene visualizzata da un cliente. Il seguente URL copiato per un’immagine di controllo viene suddiviso per colore per facilitarne la lettura e la comprensione.

Struttura di un URL Dynamic Media.

La prima parte dell’URL in rosso fa riferimento al dominio del server stesso. In questo caso, Dynamic Media è in esecuzione su un dominio server generico, ovvero https://s7d1.scene7.com/is/image/. Puoi verificare facilmente se Dynamic Media fornisce un set di immagini controllando il dominio del server. La struttura dell’URL è coerente. Tuttavia, alcuni clienti Dynamic Media sono passati a un dominio server dedicato in cui è name-of-your-company.scene7.com. Per l’imaging avanzato è necessario un dominio server dedicato.

Il nome dell’account è la porzione in viola. In questo caso, l’account è denominato jpearldemo.

L’ID o il nome della risorsa, AdobeStock_28563982, è in verde. Tieni presente che la risorsa ha l’estensione no come .png o .jpg. Quando le risorse vengono acquisite in Dynamic Media, l’estensione del file viene eliminata e viene creato un tipo diverso di file: un file piramidale-TIFF. La piramide-TIFF consente a Dynamic Media di creare rapidamente e istantaneamente le rappresentazioni.

Infine, alcuni parametri di elaborazione delle immagini, ?wid=1000&fmt=jpeg&qlt=85, sono visualizzati in giallo alla fine.

L’intero percorso URL è live. Prova.

Con la finestra del browser ancora aperta per l’URL di Dynamic Media e l’immagine di controllo, scopri come creare rappresentazioni dell’immagine modificando l’URL.

Rendering dell’immagine dell’orologio tramite l’URL

Inizia eliminando manualmente solo le regole di elaborazione delle immagini nel percorso URL; lascia il nome del server, il nome dell’account e l’ID della risorsa o il nome dell’immagine. Prova.

Ora aggiungi un parametro di elaborazione dell’immagine alla fine dell’URL. Nel campo URL, a destra del nome dell’immagine, digitare ?wid=500, quindi premere Invio. Prova.

Viene generata una nuova rappresentazione dell’orologio. Un vantaggio fondamentale da capire da questo semplice esercizio di modifica della larghezza dell’immagine è che l’immagine visualizzata viene generata al 100% in modo dinamico.

Modificare il valore della larghezza di 500 pixel in 1000 pixel, quindi premere Invio. Prova.
Quando si preme Invio, il browser torna al server immagini Dynamic Media. Genera una rappresentazione dell’orologio, in base al nuovo valore di larghezza immesso, quindi distribuisce l’immagine al browser e la memorizza in cache.

Dynamic Media dispone di numerosi parametri di elaborazione delle immagini che puoi utilizzare per ottimizzare le risorse delle immagini nelle pagine web. Puoi visualizzarne un elenco.

Provare ora ad aggiungere un parametro di rotazione all’immagine dell’orologio. Alla fine del percorso URL, immediatamente dopo wid=1000, digitare &rotate=90 e quindi premere Invio. Prova.

L’orologio è ancora leggermente inclinato verso sinistra. Modificare il valore di rotazione di 90 in 92, quindi premere Invio. Prova.

Di nuovo, nel momento in cui premi Invio, viene generato immediatamente un nuovo rendering dell’orologio. Puoi vedere i livelli di prestazioni, il che spiega perché Dynamic Media può fornire più di 800.000 richieste di immagini, al secondo, durante periodi di traffico elevato.

La modifica dei parametri di elaborazione delle immagini in un URL immagine per immagine non è efficiente, soprattutto per i siti web con migliaia di immagini. Un approccio migliore consiste nell’utilizzare immagini preimpostate.

Nozioni di base sulla creazione di predefiniti immagine per il rendering delle risorse dm-journey-e

Esistono diversi modi per creare un’immagine. Desideri avere un’immagine disponibile. In genere, un creativo professionista accede ad Adobe Photoshop e salva ciascuno di questi diversi rendering come immagini statiche.

Buono: immagini statiche, ognuna creata manualmente.

Ora immaginate che il lead creativo guardi le immagini e dica:

“Volevo davvero che questa ripresa facesse in modo che la mano grande puntasse verso le quattro e la mano piccola puntasse verso l’1 per rendere più facile da vedere il quadrante dell’orologio.”

La creatività riprende tutte le nuove immagini statiche.

Tuttavia, con Dynamic Media, se disponi di diversi predefiniti per le immagini, puoi utilizzarli ovunque. I predefiniti immagine impongono gli standard.

Migliore: un file con più rappresentazioni create al volo utilizzando predefiniti immagine, ad esempio Search_Grid e Thumbnail.

In ogni luogo in cui è necessario avere un particolare tipo di immagine, ad esempio,

Desideri che l’immagine venga distribuita con gli stessi parametri ovunque vengano utilizzati.

Vediamo per un momento come viene creato un predefinito immagine in Dynamic Media.

Creazione di un predefinito immagine a partire dalla scheda Base.

Nell’esempio precedente è stato creato un nuovo predefinito immagine con il nome Medium. Dynamic Media utilizza un esempio di immagine preconfigurata, lo zaino, per aiutarti a visualizzare le caratteristiche del predefinito dell’immagine durante la sua creazione.

Il predefinito per immagini Medium ha una larghezza di 500 pixel e un’altezza di 800 pixel. Nella Parte I di questo Percorso, leggi come distribuire risorse in diversi formati. Dal menu a discesa Formato, puoi scegliere di distribuire risorse come JPEG, PNG, TIFF o diversi altri formati. Avete flessibilità qui.

Se selezioni la scheda Avanzate, puoi scegliere lo spazio colore della risorsa. A seconda del formato selezionato nella scheda Base, è possibile distribuire le risorse in RGB, Scala di grigio o CMYK. Utilizza il menu a discesa Profilo colore per selezionare come distribuire una risorsa immagine CMYK per la stampa. Inoltre, è possibile applicare parametri aggiuntivi per la nitidezza delle immagini. In questo caso, è stata applicata Maschera definizione dettagli.

Creazione di un predefinito immagine tramite la selezione delle opzioni dalla scheda Avanzate.

Ricordi in Struttura di un URL di Dynamic Media in precedenza di aver letto dell’URL di Dynamic Media e di come viene generato. Nella casella di testo Modificatore immagine è possibile digitare qualsiasi parametro di elaborazione immagine aggiuntivo desiderato. I parametri vengono inclusi nel nome predefinito dell’URL quando le immagini vengono distribuite, utilizzando il predefinito. Nella schermata precedente è stato aggiunto il parametro bgc=451B15. In altre parole, è stato aggiunto un colore di sfondo marrone scuro.

Potete immaginare un predefinito immagine come una configurazione per le immagini. Offre tutte le immagini che usano sempre il predefinito in modo coerente; è lo stesso. È stato aggiunto anche il parametro &op_brightness=+10 per aumentare leggermente la luminosità.

Una volta terminato, salvate il predefinito, che ora è disponibile per tutte le immagini. In questo caso, si desidera applicare il predefinito immagine Medium a un’immagine di una ciotola di cioccolato liquido.

Per generare una rappresentazione di un’immagine, applicare il predefinito immagine Medium.

Per verificare l’aspetto dell’immagine, copia l’URL e incollalo nel browser. Prova.

Nel browser, noterai il nome del predefinito immagine Medium nel percorso URL completo.

Potete vedere il tipo di chiarezza che viene visualizzata nell’immagine. Questa qualità è dovuta in parte al modo in cui è stata girata la ciotola di cioccolato. Inoltre, questo accade in parte perché con Dynamic Media è possibile memorizzare immagini più grandi di quelle distribuite ai canali digitali.

Se tutto sembra soddisfacente per la tua ciotola di cioccolato, incollare l’URL nelle pagine web in cui si desidera che l’immagine appaia sul tuo sito web.

Se osservi di nuovo l’immagine dell’orologio qui sotto, noterai un predefinito immagine Cart, un predefinito Grid, un predefinito Large, un predefinito PDP-page (pagina dettagli prodotto) e molti altri.

Predefiniti per immagini statiche e dinamiche. È stato eseguito il rendering dell’immagine di controllo utilizzando il predefinito immagine PDP-page.

Ma cosa succede se devi cambiare un’immagine sul tuo sito web? Si supponga, ad esempio, di aver eseguito alcuni test e di aver rilevato che l’immagine di 120 x 120 (predefinito immagine Cart) non viene percepita come previsto. Aumenta la dimensione dell’immagine aumentando la larghezza a 175 pixel e l’altezza a 175 pixel. In genere, si accede ad Adobe Photoshop e si ricreano tutte le immagini del carrello. Tuttavia, con Dynamic Media potete modificare il predefinito immagine aggiornando i valori di Larghezza e Altezza a 175 e salvate il predefinito, come illustrato nell’esempio seguente.

Modifica della larghezza e dell’altezza del predefinito immagine Cart.

Dopo aver modificato il predefinito immagine e aver cancellato la cache, tutte le immagini vengono aggiornate e tutti gli URL utilizzati con tale predefinito, non vengono modificati in alcun punto. Ciò significa che non sono necessari collegamenti interrotti e reindirizzamenti alle pagine web.

Set di immagini, set 360 gradi e set di file multimediali diversi dm-journey-f

Alcuni degli utilizzi più comuni di Dynamic Media sono la possibilità di creare set di immagini, set 360 gradi e set di file multimediali diversi.

I set di immagini sono in genere costituiti da una serie di risorse di immagini presentate come una singola entità. Questo tipo di set offre agli utenti un’esperienza di visualizzazione integrata, in cui gli utenti possono visualizzare diverse visualizzazioni di un elemento facendo clic su un’immagine di miniatura. I set di immagini consentono di presentare viste alternative di un elemento e il visualizzatore offre strumenti di zoom per esaminare attentamente le immagini. Visualizza un set di immagini denominato “In esecuzione” che utilizza il visualizzatore a comparsa.

All’interno di Dynamic Media è possibile vedere diverse immagini di scarpe da corsa. Si tratta di una serie di linee di prodotti che i reparti vendite e marketing desiderano visualizzare come una singola presentazione: un set di immagini.

Inizio della creazione di un set di immagini.

Per creare il set di immagini, scegliere Set di immagini dal menu a discesa Crea. Nel menu sono inoltre disponibili opzioni per creare un set di file multimediali diversi, un set 360 gradi e un set carosello. Questi set vengono creati in modo analogo a un set di immagini.

Un set di file multimediali diversi può contenere immagini, set di campioni, set 360 gradi, video e set di video adattivi. Prova. Un set 360 gradi consente agli utenti di ruotare un oggetto per esaminarlo. I set 360 gradi consentono di visualizzare i dettagli visivi chiave da qualsiasi angolazione. Prova.

La creazione di un set di immagini è semplice. Aggiungi le risorse immagine da includere nel set.

L’Editor set di immagini consente di aggiungere risorse immagine e riordinarne l’aspetto nel set.

È necessario assegnare un nome al set. Scegli il nome attentamente, poiché non potrai modificarlo in un secondo momento. Nell’esempio precedente, il set è denominato Running. Al termine, salvate il set.

Ecco l’immagine Running impostata in Experience Manager Assets.

L’immagine Running impostata in Experience Manager Assets, vista a schede.

Dopo aver creato un set di immagini, un set di file multimediali diversi, un set 360 gradi o altri file multimediali interattivi, visualizza in anteprima come si presenta e si comporta per un cliente. Dynamic Media dispone di numerosi visualizzatori incorporati che consentono di farlo.

Per prima cosa, selezionate il set di immagini da aprire in anteprima, come illustrato nell’esempio seguente.

L’immagine Running impostata nell’anteprima con l’opzione Visualizzatori selezionata.

Nell’anteprima puoi selezionare i campioni di scarpe da corsa e ingrandire e ridurre le scarpe. Per applicare un visualizzatore al set, selezionare Visualizzatori dal menu a discesa.

Set di immagini Running a cui è applicato il visualizzatore a comparsa.

In questo caso, è stato selezionato il visualizzatore Flyout. A questo punto, puoi visualizzare in anteprima il set di immagini nel visualizzatore. Tuttavia, è meglio visualizzarlo nel browser come lo vede un cliente. Seleziona URL in basso a sinistra, quindi copia l’URL e incollalo nel browser. Prova.

Il singolo URL consente di utilizzare il set di immagini e il visualizzatore nel punto desiderato sul sito web. Nell’esempio precedente, hai notato che Incorpora si trova a destra del pulsante URL. Selezionando Incorpora, puoi copiare il codice per questo set di immagini o visualizzatore e aggiungerlo a una pagina Web o a un componente Experience Manager Sites.

Il visualizzatore a comparsa è un visualizzatore standard predefinito di cui è possibile modificare le proprietà. Oppure, come per la creazione di un predefinito immagine, puoi creare un visualizzatore personalizzato.

Ora, supponiamo che il tuo team di vendita e marketing non preferisca il visualizzatore a comparsa. Gli piace la funzione di zoom, ma vogliono che i clienti vedano l’effetto zoom direttamente sopra le scarpe. In questo caso, applicate il visualizzatore InlineZoom al set di immagini e copiate e incollate l’URL nel browser per vedere come si comporta. Prova.

Quando si sposta il puntatore del mouse sulla scarpa, l’immagine si ingrandisce ed è possibile visualizzare maggiori dettagli mentre si sposta il puntatore. Questo effetto di zoom è dovuto alle dimensioni dell’immagine caricata inizialmente in Dynamic Media.

Se consideri il tuo ruolo come consumatore o come lavori nel tuo ruolo professionale e visiti diversi siti web, vedi esempi di queste funzioni. Rifletti su come viene eseguita questa operazione e su come utilizzare le funzionalità di Dynamic Media nel tuo lavoro e sul sito web della tua azienda.

Leggi i set di immagini e i visualizzatori. Osserviamo un paio di altri visualizzatori e proviamoli con risorse singole. Per ripristinare il visualizzatore, fare clic sul pulsante Aggiorna nell’angolo inferiore sinistro.

Facoltativo - Ulteriori informazioni

Per ulteriori informazioni su ciò che leggi, utilizza i materiali riportati di seguito per approfondire i concetti. In caso contrario, il Percorso Dynamic Media è completo.

Esercitazioni Dynamic Media

Visualizzatori Dynamic Media