Percorso Dynamic Media: nozioni di base, parte II

Benvenuti nel Percorso Dynamic Media: Nozioni di base, parte II, dove è possibile aspettarsi di apprendere quanto segue:

• Anatomia di un URL Dynamic Media e modo in cui Dynamic Media distribuisce i contenuti
• Nozioni di base sulla creazione di predefiniti immagine per il rendering delle risorse
• Set di immagini, set 360 gradi e set di file multimediali diversi

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

Anatomia di un URL Dynamic Media e modo in cui Dynamic Media distribuisce i contenuti

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

Anatomia 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 https://s7d1.scene7.com/is/image/. È facile osservare un insieme di immagini e capire se Dynamic Media le sta servendo semplicemente osservando il dominio del server. L’URL sarà abbastanza coerente. Tuttavia, alcuni clienti di Dynamic Media sono passati a un dominio server dedicato in cui potrebbe 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 viene chiamato jpearldemo.

ID o nome della risorsa, AdobeStock_28563982 è in verde. Tieni presente che la risorsa ha no estensione file 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. Il pyramic-TIFF consente a Dynamic Media di creare rapidamente copie trasformate in tempo reale.

E infine, ci sono alcuni parametri di elaborazione dell'immagine, ?wid=1000&fmt=jpeg&qlt=85, visualizzato in giallo alla fine.

L’intero percorso URL è live. Prova.

Con la finestra del browser ancora aperta all’URL di Dynamic Media e all’immagine di controllo, esaminiamo più da vicino come creare rappresentazioni dell’immagine modificando semplicemente 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, digita ?wid=500, quindi premere Invio. Prova.

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

Ora modifica il valore della larghezza di 500 pixel a 1000 pixel, quindi premere Invio. Prova.
Nel momento in cui premi Invio, il browser torna al server immagini Dynamic Media. Genera una nuova rappresentazione dell’orologio, basata sul nuovo valore di larghezza appena inserito, quindi consegna la nuova 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. È possibile consulta un elenco.

Provare ora ad aggiungere un parametro di rotazione all’immagine dell’orologio. E la fine del percorso URL, immediatamente successivo wid=1000, tipo &rotate=90, quindi premere Invio. Prova.

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

Di nuovo, nel momento in cui premi Invio, viene generata quasi istantaneamente una nuova rappresentazione dell’orologio. Potete vedere il tipo di prestazioni che ottenete, il che spiega perché Dynamic Media può fornire più di 800.000 richieste di immagini, al secondo, in un weekend intenso o in una festività importante.

Anche se è possibile modificare i parametri di elaborazione delle immagini in un URL immagine per immagine, non è un metodo efficiente, soprattutto se si dispone di decine di migliaia di immagini che compongono il sito web. Un approccio migliore consiste nell'utilizzare immagini preimpostate.

Nozioni di base sulla creazione di predefiniti immagine per il rendering delle risorse

Esistono diversi modi e luoghi in cui desideri creare un’immagine o renderla disponibile. In genere, i contenuti creativi vengono inseriti in Adobe Photoshop e salvano ciascuna di queste diverse rappresentazioni come immagini statiche.

Corretto: immagini statiche, ciascuna creata manualmente.

Ora immaginate che Creative Director guardi le immagini e dica:

"Volevo davvero effettuare questa ripresa in modo che la mano grande indicasse le quattro e la mano piccola indicasse l'1 per rendere più facile da vedere il quadrante dell'orologio."

Il creativo dovrebbe riprendere tutte queste nuove immagini statiche.

Ma con Dynamic Media, se avete predefiniti di immagine diversi, potete usarli ovunque. I predefiniti immagine impongono gli standard.

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

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

• una pagina dei dettagli del prodotto,
• griglia di ricerca,
• miniatura,
• carta acquisti, oppure
• immagine protagonista

Desideri che l’immagine venga distribuita con gli stessi parametri ovunque verranno 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, puoi vedere che è stato creato un nuovo predefinito immagine con il nome Medio. 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 Medio il predefinito per immagini 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. Dalla sezione Formato menu a discesa, puoi scegliere di distribuire risorse come JPEG, PNG, TIFF o in diversi altri formati. Avete flessibilità qui.

Selezione del Avanzate Questa scheda ti offre le opzioni per lo spazio colore della risorsa. A seconda del formato selezionato in Base nell’esempio precedente, era selezionato JPEG . Puoi distribuire le risorse in RGB, Gradazioni di grigio o CMYK. Dalla sezione Profilo colore menu a discesa, puoi selezionare come distribuire una risorsa immagine CMYK da utilizzare per la stampa. Inoltre, è possibile applicare parametri aggiuntivi per la nitidezza delle immagini. In questo caso, Maschera definizione dettagli è stato applicato.

Per creare un predefinito immagine, seleziona le opzioni dalla scheda Avanzate.

Ricordi in Anatomia di un URL Dynamic Media in precedenza, hai letto dell’URL di Dynamic Media e di come viene creato. Il Modificatore immagine è la casella di testo in cui è 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, il parametro bgc=451B15 è stato aggiunto. In altre parole, è stato aggiunto un colore di sfondo marrone scuro.

Potete immaginare un predefinito immagine come una ricetta per le immagini. Fornirà tutte le immagini che usano il predefinito, in modo coerente, ogni volta; sarà lo stesso. 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, vogliamo applicare la Medio predefinito immagine di un'immagine di una ciotola di cioccolato liquido.

Applicazione del predefinito immagine Media per generare una rappresentazione di un'immagine.

Copiate l’URL, quindi incollatelo nel browser per verificare l’aspetto dell’immagine. Prova.

Nel browser, notate il nome del predefinito immagine Medio 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, ciò è dovuto in parte al fatto che con Dynamic Media è possibile archiviare immagini di dimensioni maggiori rispetto a 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 nuovamente l’immagine dell’orologio qui sotto, noterai che è presente un Cart predefinito immagine, un Grid predefinito, un Large predefinito, un PDP-page (Product Detail Page) e molti altri.

Predefiniti per immagini statiche e dinamiche. L’immagine dell’orologio è stata riprodotta utilizzando PDP-page predefinito immagine.

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 Cart predefinito immagine) non viene ricevuto come pensavi. Per ingrandire l'immagine, aumentate la larghezza a 175 pixel e l'altezza a 175 pixel. In genere, è necessario accedere ad Adobe Photoshop e ricreare tutte le immagini del carrello. Con Dynamic Media, invece, è sufficiente modificare il predefinito immagine aggiornando i valori di Larghezza e Altezza a 175 e salvare il predefinito, come mostrato nell’esempio seguente.

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

Dopo aver modificato il predefinito immagine e aver eliminato la cache, tutte le immagini vengono aggiornate e tutti gli URL utilizzati con tale predefinito, esegui non cambiate ovunque. 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

Alcuni degli utilizzi più comuni di Dynamic Media è 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. Visualizzare un set di immagini denominato "In esecuzione" che utilizza il visualizzatore a comparsa.

Qui in Dynamic Media potete vedere diverse immagini di scarpe da corsa. Si tratta di una serie di linee di prodotti che il reparto vendite e marketing desidera che i clienti visualizzino come una singola presentazione, un set di immagini.

Inizio della creazione di un set di immagini.

Per creare il set di immagini, scegli Set immagini dal Crea menu a discesa. Si noti che sono disponibili anche opzioni per la creazione di un Set di file multimediali diversi, a 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 simula l’atto reale di girare 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. È sufficiente aggiungere le risorse immagine da includere nel set.

L’Editor set di immagini consente di aggiungere risorse immagine e di 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.

Ed ecco il Running Set di immagini in Experience Manager Assets.

Il Running Immagine 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 qualsiasi altro file multimediale interattivo, vuoi vedere come si presenta e si comporta per un cliente. Dynamic Media dispone di numerosi visualizzatori incorporati che permettono di fare proprio questo.

Si inizia selezionando il set di immagini generato per aprirlo in un'anteprima, come illustrato nell'esempio seguente.

Il Running Immagine impostata in 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, seleziona Visualizzatori dal menu a discesa.

Il Running Set di immagini con il visualizzatore a comparsa applicato.

In questo caso, il Flyout visualizzatore selezionato. A questo punto, puoi visualizzare in anteprima il set di immagini nel visualizzatore. Tuttavia, è meglio visualizzarlo nel browser, esattamente come lo vede un cliente. Selezione effettuata URL in basso a sinistra, 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, potresti aver notato che Incorpora si trova a destra del pulsante URL. Selezionando Incorpora, è possibile copiare il codice per questo set di immagini/visualizzatore e aggiungerlo a una pagina web o a un componente Experience Manager Sites.

Il visualizzatore a comparsa è un visualizzatore predefinito le cui proprietà possono essere modificate. Oppure, come per la creazione di un predefinito immagine, puoi creare un visualizzatore personalizzato.

Ora, supponiamo che al tuo team di vendita e marketing non piaccia 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, è sufficiente applicare il visualizzatore InlineZoom al set di immagini e copiarne e incollarne l’URL nel browser per vedere come si comporta. Prova.

Spostando il puntatore del mouse sulla scarpa, si ingrandisce l'immagine e si visualizzano maggiori dettagli quando si sposta il puntatore. E il motivo è semplicemente la dimensione dell'immagine che è stata caricata inizialmente in Dynamic Media.

Se consideriamo la vita come un consumatore, o come lavori nel tuo ruolo quotidiano, e vai su siti web diversi, vedi cose come questa. Pensate a come viene fatto, e come potete usare la potenza di Dynamic Media nel vostro lavoro e sul sito web della vostra azienda.

Leggi solo un po' di set di immagini e visualizzatori. Osserviamo un paio di altri visualizzatori e proviamoli con risorse singole. Per reimpostare il visualizzatore, fare clic su Aggiorna nell'angolo inferiore sinistro.

• ZoomVertical_dark visualizzatore applicato a una risorsa immagine. Prova.
• Zoom_light visualizzatore applicato a un’immagine. Prova.

Facoltativo - Ulteriori informazioni

Per saperne di più su ciò che hai appena letto, usa i materiali qui sotto per approfondire i concetti. In caso contrario, il Percorso Dynamic Media è completo.

Argomenti della Guida di Dynamic Media

• Creare predefiniti immagine
• Un elenco di parametri di elaborazione delle immagini che potete utilizzare nel campo Modificatore immagine quando create un predefinito immagine
• Visualizzare in anteprima le risorse
• Visualizzare in anteprima le risorse 3D
• Come creare set di immagini
• Come creare i set 360 gradi
• Come creare set di file multimediali diversi

Tutorial su Dynamic Media

• Utilizzare Dynamic Media con Experience Manager Assets
• Libreria di contenuti Adobe Experience Manager (ricerca il Dynamic Media)

Visualizzatori Dynamic Media

• Demo live di ogni visualizzatore

Risorse Business.Adobe.com