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

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

Vedere anche Percorso Dynamic Medie; nozioni di base, parte I.

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

Dopo aver caricato e pubblicato le risorse Dynamic Medie, 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 Medie.

La prima parte dell’URL in rosso fa riferimento al dominio del server stesso. In questo caso, Dynamic Medie è in esecuzione su un dominio server generico, ovvero https://s7d1.scene7.com/is/image/. È facile osservare un insieme di immagini e capire se Dynamic Medie le sta servendo semplicemente osservando il dominio del server. L’URL sarà abbastanza coerente. Tuttavia, alcuni clienti Dynamic Medie sono passati a un dominio server dedicato in cui potrebbe essere 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 Medie, l’estensione del file viene eliminata e viene creato un tipo diverso di file: un file piramidale-TIFF. Il pyramic-TIFF consente a Dynamic Medie di creare rapidamente copie trasformate in tempo reale.

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 all’URL di Dynamic Medie 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, digitare ?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.

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 di Dynamic Medie. 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 Medie 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. E la fine del percorso URL, subito dopo wid=1000, digitare &rotate=90, quindi premere Invio. Prova.

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

Anche in questo caso, quando si preme Invio, viene generato quasi istantaneamente un nuovo rendering dell'orologio. Puoi vedere il tipo di prestazioni ottenute, il che spiega perché Dynamic Medie può inviare 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 dm-journey-e

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.

Buono: immagini statiche, ognuna creata manualmente.

Ora immaginate che Creative Director 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."

Il team creativo dovrebbe riprendere tutte le nuove immagini statiche.

Ma con Dynamic Medie, 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 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 verranno utilizzati.

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

Creazione di un predefinito immagine a partire dalla scheda Base.

Nell'esempio precedente è stato creato un nuovo predefinito immagine con il nome Medium. Dynamic Medie 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 le risorse come JPEG, PNG, TIFF o in 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, nell'esempio precedente è stato selezionato JPEG, è possibile distribuire le risorse in RGB, Gradazioni di grigio o CMYK. Dal menu a discesa Profilo colore, 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, è stata applicata Maschera definizione dettagli.

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

Ricordi in Anatomia di un URL Dynamic Medie precedente di aver letto dell'URL Dynamic Medie e di come è stato creato. 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 ricetta per le immagini. Fornirà sempre tutte le immagini che usano il predefinito in modo coerente; sarà sempre 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.

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

Copiate l'URL, quindi incollatelo nel browser per verificare l'aspetto dell'immagine. 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, ciò è dovuto in parte al fatto che con Dynamic Medie è 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 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 ricevuta come previsto. 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 Medie, 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 predefinito immagine Cart.

Dopo aver modificato il predefinito immagine e aver eliminato 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 Medie è 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.

Qui in Dynamic Medie potete 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 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 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 qualsiasi altro file multimediale interattivo, vuoi vedere come si presenta e si comporta per un cliente. Dynamic Medie 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.

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, esattamente 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. È possibile che nell'esempio precedente Incorpora si trovi 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 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 Medie.

Se consideriamo la vita come 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 Medie nel vostro lavoro e sul sito web della vostra azienda.

Leggi solo 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 hai appena letto, utilizza i materiali riportati di seguito per approfondire i concetti. In caso contrario, il Percorso Dynamic Medie è completo.

Argomenti della Guida di Dynamic Medie

Esercitazioni Dynamic Medie

Visualizzatori Dynamic Medie