Progettazione reattiva per pagine web responsive-design-for-web-pages

Progetta le pagine web in modo che si adattino al riquadro di visualizzazione client in cui vengono visualizzate. Con il design reattivo, le stesse pagine possono essere visualizzate in modo efficace su più dispositivi in entrambi gli orientamenti. L'immagine seguente illustra alcuni modi in cui una pagina può rispondere alle modifiche apportate alle dimensioni del riquadro di visualizzazione:

Sviluppa applicazioni Adobe Experience Manager (AEM) che generano pagine HTML5 adattabili a più dimensioni e orientamenti di finestre. Ad esempio, i seguenti intervalli di larghezze dei riquadri di visualizzazione corrispondono a vari tipi di dispositivi e orientamenti

Per informazioni sull’implementazione del comportamento di progettazione reattiva, consulta i seguenti argomenti:

Durante la progettazione, utilizza Sidekick per visualizzare in anteprima le pagine in diverse dimensioni dello schermo.

Prima di sviluppare before-you-develop

Prima di sviluppare l’applicazione AEM che supporta le pagine web, è necessario prendere diverse decisioni di progettazione. Ad esempio, è necessario disporre delle seguenti informazioni:

Struttura dell’applicazione application-structure

La tipica struttura di applicazioni AEM supporta tutte le implementazioni di progettazione reattiva:

Utilizzo delle query multimediali using-media-queries

Le query multimediali consentono l’utilizzo selettivo degli stili CSS per il rendering delle pagine. Gli strumenti e le funzioni di sviluppo AEM consentono di implementare in modo efficace ed efficiente le query multimediali nelle applicazioni.

Il gruppo W3C fornisce il consiglio Media Queries che descrive questa funzione CSS3 e la sintassi.

Creazione del file CSS creating-the-css-file

Nel file CSS, definisci le query multimediali in base alle proprietà dei dispositivi di destinazione. La seguente strategia di implementazione è efficace per la gestione degli stili per ogni query multimediale:

L'esempio di file multimediali We.Retail utilizza questa strategia per definire gli stili nella progettazione del sito. Il file CSS utilizzato da We.Retail si trova in */apps/weretail/clientlibs/clientlib-site/less/grid.less.

Nella tabella seguente sono elencati i file presenti nella cartella secondaria css.

Il file css.txt nella cartella /etc/designs/weretail/clientlibs elenca i file CSS inclusi nella cartella della libreria client. L’ordine dei file implementa la precedenza degli stili. Gli stili sono più specifici al diminuire delle dimensioni del dispositivo.

#base=css

style.css
 bootstrap.css

responsive-1200px.css
 responsive-980px-1199px.css
 responsive-768px-979px.css
 responsive-767px-max.css
 responsive-480px.css

Suggerimento: i nomi di file descrittivi ti consentono di identificare facilmente la dimensione di visualizzazione di destinazione.

Utilizzo delle query multimediali con le pagine AEM using-media-queries-with-aem-pages

Includi la cartella della libreria client nello script JSP del componente pagina. In questo modo è possibile generare il file CSS che include le query multimediali e fare riferimento al file.

<ui:includeClientLib categories="apps.weretail.all"/>

Lo script JSP genera il seguente codice HTML che fa riferimento ai fogli di stile:

<link rel="stylesheet" href="/etc/designs/weretail/clientlibs-all.css" type="text/css">
<link href="/etc/designs/weretail.css" rel="stylesheet" type="text/css">

Anteprima per dispositivi specifici previewing-for-specific-devices

Visualizza le anteprime delle pagine in diverse dimensioni di riquadro di visualizzazione per verificare il comportamento del design reattivo. In modalità Anteprima, Sidekick include un menu a discesa Dispositivi da utilizzare per selezionare un dispositivo. Quando selezioni un dispositivo, la pagina cambia in base alle dimensioni del riquadro di visualizzazione.

Per abilitare l'anteprima del dispositivo in Sidekick, è necessario configurare la pagina e il servizio MobileEmulatorProvider. Un'altra configurazione di pagina controlla l'elenco dei dispositivi visualizzati nell'elenco Dispositivi.

Aggiunta dell'elenco dei dispositivi adding-the-devices-list

L'elenco Dispositivi viene visualizzato in Sidekick quando la pagina include lo script JSP che esegue il rendering dell'elenco Dispositivi. Per aggiungere l'elenco Dispositivi a Sidekick, includere lo script /libs/wcm/mobile/components/simulator/simulator.jsp nella sezione head della pagina.

Includi il codice seguente nella JSP che definisce la sezione head:

<cq:include script="/libs/wcm/mobile/components/simulator/simulator.jsp"/>

Per visualizzare un esempio, aprire il file /apps/weretail/components/page/head.jsp in CRXDE Lite.

Registrazione dei componenti Pagina per la simulazione registering-page-components-for-simulation

Per abilitare il simulatore di dispositivi per il supporto delle pagine, registrare i componenti di pagina con il servizio di fabbrica MobileEmulatorProvider e definire la proprietà mobile.resourceTypes.

Quando si lavora con AEM, esistono diversi metodi per gestire le impostazioni di configurazione per tali servizi; per informazioni dettagliate, vedere Configurazione di OSGi.

Ad esempio, per creare un nodo [sling:OsgiConfig](/docs/experience-manager-65/content/implementing/deploying/configuring/configuring-osgi.md#adding-a-new-configuration-to-the-repository) nell'applicazione:

Aggiungi la seguente proprietà nodo:

Specifica dei gruppi di dispositivi specifying-the-device-groups

Per specificare i gruppi di dispositivi visualizzati nell'elenco Dispositivi, aggiungere una proprietà cq:deviceGroups al nodo jcr:content della pagina principale del sito. Il valore della proprietà è un array di percorsi ai nodi del gruppo di dispositivi.

Nodi del gruppo di dispositivi nella cartella /etc/mobile/groups.

La pagina principale del sito Geometrixx Media, ad esempio, è /content/geometrixx-media. Il nodo /content/geometrixx-media/jcr:content include la seguente proprietà:

Utilizzare la console Strumenti per creare e modificare gruppi di dispositivi.

Utilizzo di immagini adattive using-adaptive-images

Puoi utilizzare le query multimediali per selezionare una risorsa immagine da visualizzare nella pagina. Tuttavia, ogni risorsa che utilizza una query multimediale per condizionarne l’utilizzo viene scaricata nel client. La query multimediale determina semplicemente se la risorsa scaricata viene visualizzata.

Per risorse di grandi dimensioni, come le immagini, il download di tutte le risorse non rappresenta un utilizzo efficiente della pipeline dati del client. Per scaricare selettivamente le risorse, utilizza JavaScript per avviare la richiesta di risorse dopo che le query multimediali hanno eseguito la selezione.

La strategia seguente carica una singola risorsa scelta utilizzando le query multimediali:

Valutazione delle query multimediali tramite JavaScript evaluating-media-queries-using-javascript

Le implementazioni dell'interfaccia MediaQueryList definita dal W3C consentono di valutare le query multimediali tramite JavaScript. Puoi applicare la logica ai risultati delle query multimediali ed eseguire script mirati per la finestra corrente:

Selezione di risorse specifiche per i contenuti multimediali selecting-media-specific-resources

L'elemento immagine W3C utilizza query multimediali per determinare l'origine da utilizzare per gli elementi immagine. L’elemento immagine utilizza gli attributi dell’elemento per associare le query multimediali ai percorsi delle immagini.

La libreria picturefill.js disponibile gratuitamente offre funzionalità simili all'elemento picture proposto e utilizza una strategia simile. La libreria picturefill.js chiama window.matchMedia per valutare le query multimediali definite per un set di div elementi. Ogni elemento div specifica anche un'origine immagine. L'origine viene utilizzata quando la query multimediale dell'elemento div restituisce true.

La libreria picturefill.js richiede un codice HTML simile al seguente:

<div data-picture>
    <div data-src='path to default image'></div>
    <div data-src='path to small image'    data-media="(media query for phone)"></div>
    <div data-src='path to medium image'   data-media="(media query for tablet)"></div>
    <div data-src='path to large image'     data-media="(media query for monitor)"></div>
</div>

Quando viene eseguito il rendering della pagina, picturefull.js inserisce un elemento img come ultimo elemento figlio dell'elemento <div data-picture>:

<div data-picture>
    <div data-src='path to default image'></div>
    <div data-src='path to small image'    data-media="(media query for phone)"></div>
    <div data-src='path to medium image'   data-media="(media query for tablet)"></div>
    <div data-src='path to large image'     data-media="(media query for monitor)"></div>
    <img src="path to medium image">
</div>

In una pagina AEM, il valore dell'attributo data-src è il percorso di una risorsa nell'archivio.

Implementazione di immagini adattive nell’AEM implementing-adaptive-images-in-aem

Per implementare immagini adattive nell’applicazione AEM, devi aggiungere le librerie JavaScript richieste e includere nelle pagine il markup HTML richiesto.

Librerie

Ottieni le seguenti librerie JavaScript e includile in una cartella di librerie client:

Suggerimento: è possibile concatenare automaticamente più cartelle della libreria client incorporando.

HTML

Crea un componente che genera gli elementi div richiesti previsti dal codice picturefill.js. In una pagina AEM, il valore dell’attributo data-src è il percorso di una risorsa nell’archivio. Ad esempio, un componente pagina può eseguire il hardcode delle query multimediali e dei percorsi associati per le rappresentazioni delle immagini in DAM. In alternativa, crea un componente Immagine personalizzato che consenta agli autori di selezionare le rappresentazioni di immagini o di specificare le opzioni di rendering in fase di esecuzione.

L’esempio seguente HTML seleziona due rappresentazioni DAM della stessa immagine.

<div data-picture>
    <div data-src='/content/dam/geometrixx-media/articles/meridien.png'></div>
    <div data-src='/content/dam/geometrixx-media/articles/meridien.png/jcr:content/renditions/cq5dam.thumbnail.319.319.png'    data-media="(min-width: 769px)"></div>
    <div data-src='/content/dam/geometrixx-media/articles/meridien.png/jcr:content/renditions/cq5dam.thumbnail.140.100.png'   data-media="(min-width: 481px)"></div>
</div>

Informazioni sul rendering delle immagini nell’AEM understanding-image-rendering-in-aem

Per personalizzare il rendering delle immagini, è necessario comprendere l’implementazione predefinita del rendering delle immagini statiche AEM. AEM fornisce il componente Immagine e un servlet di rendering delle immagini che interagiscono per eseguire il rendering delle immagini per le pagine web. Quando il componente Immagine è incluso nel sistema paragrafo della pagina, si verificano le seguenti sequenze di eventi:

Ad esempio, la JSP del componente Immagine genera il seguente elemento HTML:

<img title="My Image" alt="My Image" class="cq-dd-image" src="/content/mywebsite/en/_jcr_content/par/image_0.img.jpg/1358372073597.jpg">

Quando il browser carica la pagina, richiede l’immagine utilizzando il valore dell’attributo src come URL. Sling decompone l’URL:

Il nodo image_0 ha un valore jcr:resourceType di foundation/components/image, che ha un valore sling:resourceSuperType di foundation/components/parbase. Il componente parbase include lo script img.GET.java che corrisponde al selettore e l’estensione del nome file dell’URL della richiesta. CQ utilizza questo script (servlet) per riprodurre l’immagine.

Per visualizzare il codice sorgente dello script, utilizzare CRXDE Lite per aprire /libs/foundation/components/parbase/img.GET.java
file.

Ridimensionamento delle immagini per le dimensioni correnti del riquadro di visualizzazione scaling-images-for-the-current-viewport-size

Ridimensiona le immagini in fase di runtime in base alle caratteristiche del riquadro di visualizzazione client per fornire immagini conformi ai principi di progettazione reattiva. Utilizza lo stesso pattern di progettazione del rendering statico delle immagini, utilizzando un servlet e un componente di authoring.

Il componente deve eseguire le seguenti attività:

Il servlet che elabora la richiesta di immagine deve eseguire le seguenti attività:

Soluzioni disponibili

AEM installa le seguenti implementazioni che puoi utilizzare o estendere.

Informazioni sul componente Immagine adattiva understanding-the-adaptive-image-component

Il componente Immagine adattiva genera chiamate al servlet del componente Immagine adattiva per eseguire il rendering di un’immagine ridimensionata in base allo schermo del dispositivo. Il componente include le seguenti risorse:

Aggiunta di elementi DIV adding-the-div-elements

Lo script adaptive-image.jsp include il seguente codice che genera elementi div e query multimediali:

<div data-picture data-alt='<%= alt %>'>
    <div data-src='<%= path + ".img.320.low." + extension + suffix %>'       data-media="(min-width: 1px)"></div>                                        <%-- Small mobile --%>
    <div data-src='<%= path + ".img.320.medium." + extension + suffix %>'    data-media="(min-width: 320px)"></div>  <%-- Portrait mobile --%>
    <div data-src='<%= path + ".img.480.medium." + extension + suffix %>'    data-media="(min-width: 321px)"></div>  <%-- Landscape mobile --%>
    <div data-src='<%= path + ".img.476.high." + extension + suffix %>'      data-media="(min-width: 481px)"></div>   <%-- Portrait iPad --%>
    <div data-src='<%= path + ".img.620.high." + extension + suffix %>'      data-media="(min-width: 769px)"></div>  <%-- Landscape iPad --%>
    <div data-src='<%= path + ".img.full.high." + extension + suffix %>'     data-media="(min-width: 1025px)"></div> <%-- Desktop --%>

    <%-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --%>
    <noscript>
        <img src='<%= path + ".img.320.low." + extension + suffix %>' alt='<%= alt %>'>
    </noscript>
</div>

La variabile path contiene il percorso della risorsa corrente (il nodo del componente immagine adattiva). Il codice genera una serie di elementi div con la seguente struttura:

<div data-scr = "*path-to-parent-node*.adaptive-image.adapt.*width*.*quality*.jpg" data-media="*media query*"></div>

Il valore dell'attributo data-scr è un URL che Sling risolve in Adaptive Image Component Servlet per il rendering dell'immagine. L’attributo data-media contiene la query multimediale valutata in base alle proprietà client.

Il codice HTML seguente è un esempio degli elementi div generati da JSP:

<div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.320.low.jpg'></div>
    <div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.320.medium.jpg'    data-media="(min-width: 320px)"></div>
    <div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.480.medium.jpg'    data-media="(min-width: 321px)"></div>
    <div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.476.high.jpg'     data-media="(min-width: 481px)"></div>
    <div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.620.high.jpg'     data-media="(min-width: 769px)"></div>
    <div data-src='/content/geometrixx-media/en/events/the-lineup-you-ve-been-waiting-for/jcr:content/article-content-par/adaptive_image.adapt.full.high.jpg'     data-media="(min-width: 1025px)"></div>

Modifica dei selettori delle dimensioni dell'immagine changing-the-image-size-selectors

Se personalizzi il componente Immagine adattiva e modifichi i selettori di larghezza, devi anche configurare Adaptive Image Component Servlet per supportare le larghezze.

Informazioni su Adaptive Image Component Servlet understanding-the-adaptive-image-component-servlet

Adaptive Image Component Servlet ridimensiona un’immagine JPEG in base a una larghezza specificata e imposta la qualità JPEG.

Interfaccia di Adaptive Image Component Servlet the-interface-of-the-adaptive-image-component-servlet

Adaptive Image Component Servlet è associato al servlet Sling predefinito e supporta le estensioni di file .jpg, .jpeg, .gif e .png. Il selettore servlet è img.

Pertanto, Sling risolve gli URL della richiesta HTTP nel seguente formato in questo servlet:

*path-to-node*.img.*extension*

Ad esempio, Sling inoltra le richieste HTTP con l’URL http://localhost:4502/content/geometrixx/adaptiveImage.img.jpg a Adaptive Image Component Servlet.

Due selettori aggiuntivi specificano la larghezza dell’immagine richiesta e la qualità JPEG. L’esempio seguente richiede un’immagine di larghezza pari a 480 pixel e di qualità media:

http://localhost:4502/content/geometrixx/adaptiveImage.adapt.480.MEDIUM.jpg

Proprietà immagine supportate

Il servlet accetta un numero finito di larghezze e qualità delle immagini. Le seguenti larghezze sono supportate per impostazione predefinita (in pixel):

Il valore completo indica che non viene applicata alcuna scala.

Sono supportati i seguenti valori per la qualità dei JPEG:

I valori numerici sono rispettivamente 0,4, 0,82 e 1,0.

Modifica delle larghezze supportate predefinite

Utilizza la console web (http://localhost:4502/system/console/configMgr) o un nodo sling:OsgiConfig per configurare le larghezze supportate di Adobe CQ Adaptive Image Component Servlet.

Per informazioni su come configurare i servizi AEM, vedere Configurazione di OSGi.

Dettagli di implementazione implementation-details

La classe com.day.cq.wcm.foundation.impl.AdaptiveImageComponentServlet estende la classe AbstractImageServlet. Il codice sorgente di AdaptiveImageComponentServlet si trova nella cartella /libs/foundation/src/impl/src/com/day/cq/wcm/foundation/impl.

La classe utilizza le annotazioni Felix SCR per configurare il tipo di risorsa e l’estensione di file a cui è associato il servlet e il nome del primo selettore.

@Component(metatype = true, label = "Adobe CQ Adaptive Image Component Servlet",
        description = "Render adaptive images in a variety of qualities")
@Service
@Properties(value = {
    @Property(name = "sling.servlet.resourceTypes", value = "foundation/components/adaptiveimage", propertyPrivate = true),
    @Property(name = "sling.servlet.selectors", value = "img", propertyPrivate = true),
    @Property(name = "sling.servlet.extensions", value ={
            "jpg",
            "jpeg",
            "png",
            "gif"
    }, propertyPrivate = true)
})

Il servlet utilizza l’annotazione Property SCR (SCR proprietà) per impostare la qualità e le dimensioni predefinite supportate per le immagini.

@Property(value = {
            "320", // iPhone portrait
            "480", // iPhone landscape
            "476", // iPad portrait
            "620" // iPad landscape
    },
            label = "Supported Widths",
            description = "List of widths this component is permitted to generate.")

La classe AbstractImageServlet fornisce il metodo doGet che elabora la richiesta HTTP. Questo metodo determina la risorsa associata alla richiesta, recupera le proprietà della risorsa dal repository e le restituisce in un oggetto ImageContext.

La classe AdaptiveImageComponentServlet sostituisce il metodo createLayer. Il metodo ottiene il percorso della risorsa immagine e la larghezza immagine richiesta dall'oggetto ImageContext. Quindi chiama i metodi della classe info.geometrixx.commons.impl.AdaptiveImageHelper, che esegue il ridimensionamento effettivo dell'immagine.

La classe AdaptiveImageComponentServlet esegue inoltre l'override del metodo writeLayer. Questo metodo applica la qualità JPEG all'immagine.

Servlet per modifica riferimento immagine (Geometrixx Common) image-reference-modification-servlet-geometrixx-common

Il Servlet Image Reference Modification di esempio genera attributi di dimensione per l'elemento img per ridimensionare un'immagine sulla pagina web.

Chiamata del servlet calling-the-servlet

Il servlet è associato alle risorse cq:page e supporta l'estensione di file .jpg. Il selettore del servlet è image. Pertanto, Sling risolve gli URL della richiesta HTTP nel seguente formato in questo servlet:

path-to-page-node.image.jpg

Ad esempio, Sling inoltra le richieste HTTP con l’URL http://localhost:4502/content/geometrixx/en.image.jpg a Image Reference Modification Servlet.

Tre selettori aggiuntivi specificano la larghezza, l’altezza e (facoltativamente) la qualità dell’immagine richiesta. L’esempio seguente richiede un’immagine di larghezza 770 pixel, altezza 360 pixel e qualità media.

http://localhost:4502/content/geometrixx/en.image.770.360.MEDIUM.jpg

Proprietà immagine supportate

Il servlet accetta un numero finito di dimensioni e valori di qualità delle immagini.

I seguenti valori sono supportati per impostazione predefinita (widthxheight):

Sono supportati i seguenti valori per la qualità delle immagini:

Quando si lavora con AEM, esistono diversi metodi per gestire le impostazioni di configurazione per tali servizi; per informazioni dettagliate, vedere Configurazione di OSGi.

Specifica della risorsa immagine specifying-the-image-resource

Il percorso dell’immagine, le dimensioni e i valori di qualità devono essere memorizzati come proprietà di un nodo nell’archivio:

Durante la creazione di una pagina, utilizza Sidekick per specificare l'immagine e aggiungere il nodo image alle proprietà della pagina:

Dettagli di implementazione implementation-details-1

La classe info.geometrixx.commons.impl.servlets.ImageReferenceModificationServlet estende la classe AbstractImageServlet. Se è installato il pacchetto cq-geometrixx-commons-pkg, il codice sorgente ImageReferenceModificationServlet si trova nella cartella /apps/geometrixx-commons/src/core/src/main/java/info/geometrixx/commons/impl/servlets.

La classe utilizza le annotazioni Felix SCR per configurare il tipo di risorsa e l’estensione di file a cui è associato il servlet e il nome del primo selettore.

@Component(metatype = true, label = "Adobe CQ Image Reference Modification Servlet",
        description = "Render the image associated with a page in a variety of dimensions and qualities")
@Service
@Properties(value = {
    @Property(name = "sling.servlet.resourceTypes", value = NameConstants.NT_PAGE, propertyPrivate = true),
    @Property(name = "sling.servlet.selectors", value = "image", propertyPrivate = true),
    @Property(name = "sling.servlet.extensions", value = "jpg", propertyPrivate = true)
})

Il servlet utilizza l’annotazione Property SCR (SCR proprietà) per impostare la qualità e le dimensioni predefinite supportate per le immagini.

@Property(label = "Image Quality",
            description = "Quality must be a double between 0.0 and 1.0", value = "0.82")
@Property(value = {
                "256x192", // Category page article list images
                "370x150", // "Most popular" desktop & iPad & carousel min-width: 1px
                "480x200", // "Most popular" phone
                "127x127", // article summary phone square images
                "770x360", // article summary, desktop
                "620x290", // article summary, tablet
                "480x225", // article summary, phone (landscape)
                "320x150", // article summary, phone (portrait) and fallback
                "375x175", // 2-column article summary, desktop
                "303x142", // 2-column article summary, tablet
                "1170x400", // carousel, full
                "940x340",  // carousel min-width: 980px
                "770x300",  // carousel min-width: 768px
                "480x190"   // carousel min-width: 480px
            },
            label = "Supported Resolutions",
            description = "List of resolutions this component is permitted to generate.")

La classe AbstractImageServlet fornisce il metodo doGet che elabora la richiesta HTTP. Questo metodo determina la risorsa associata alla chiamata, recupera le proprietà della risorsa dal repository e le salva in un oggetto ImageContext.

La classe ImageReferenceModificationServlet sostituisce il metodo createLayer e implementa la logica che determina la risorsa immagine da riprodurre. Il metodo recupera un nodo figlio del nodo jcr:content della pagina denominato image. Un oggetto Image è stato creato da questo nodo image e il metodo getFileReference restituisce il percorso del file di immagine dalla proprietà fileReference del nodo di immagine.

Sviluppo di una griglia di fluidi developing-a-fluid-grid

L'AEM consente di implementare in modo efficiente ed efficace le griglie fluide. In questa pagina viene illustrato come integrare la griglia dei fluidi o un'implementazione della griglia esistente (ad esempio Bootstrap) nell'applicazione AEM.

Se non conosci le griglie fluide, consulta la sezione Introduzione alle griglie fluide in fondo alla pagina. Questa introduzione fornisce una panoramica delle griglie di fluidi e indicazioni per la loro progettazione.

Definizione della griglia tramite un componente Pagina defining-the-grid-using-a-page-component

Utilizza i componenti di pagina per generare gli elementi HTML che definiscono i blocchi di contenuto della pagina. La ClientLibraryFolder a cui la pagina fa riferimento fornisce il CSS che controlla il layout dei blocchi di contenuto:

Ad esempio, l'applicazione geometrixx-media di esempio contiene il componente media-home. Questo componente page inserisce due script, che generano due elementi div della classe row-fluid:

<div class="page-content">
    <div class="row-fluid">
        <div class="span12">
            <cq:include path="grid-12-par" resourceType="foundation/components/parsys" />
        </div>
    </div>
    <div class="row-fluid">
        <div class="span8">
            <cq:include path="grid-8-par" resourceType="foundation/components/parsys" />
        </div>
        <div class="span4">
            <cq:include path="grid-4-par" resourceType="foundation/components/parsys" />
        </div>
    </div>
</div>

Ridimensionamento della griglia dei componenti Pagina scaling-the-page-component-grid

La struttura associata al componente di pagina geometrixx-media (/etc/designs/geometrixx-media) contiene l'elemento ClientLibraryFolder clientlibs. Questa ClientLibraryFolder definisce gli stili CSS per row-fluid classi, span* classi e span* classi figlio di row-fluid classi. Le query multimediali consentono di ridefinire gli stili per diverse dimensioni dei riquadri di visualizzazione.

L’esempio di CSS seguente è un sottoinsieme di tali stili. Questo sottoinsieme si concentra su span12, span8 e span4 classi e su query multimediali per due dimensioni del riquadro di visualizzazione. Osserva le seguenti caratteristiche del CSS:

/* default styles (no media queries) */
 .span12 { width: 940px }
 .span8 { width: 620px }
 .span4 { width: 300px }
 .row-fluid .span12 { width: 100% }
 .row-fluid .span8 { width: 65.95744680851064% }
 .row-fluid .span4 { width: 31.914893617021278% }

@media (min-width: 768px) and (max-width: 979px) {
 .span12 { width: 724px; }
 .span8 {     width: 476px; }
 .span4 {     width: 228px; }
 .row-fluid .span12 {     width: 100%;}
 .row-fluid .span8 {     width: 65.74585635359117%; }
 .row-fluid .span4 {     width: 31.491712707182323%; }
}

@media (min-width: 1200px) {
 .span12 { width: 1170px }
 .span8 { width: 770px }
 .span4 { width: 370px }
 .row-fluid .span12 { width: 100% }
 .row-fluid .span8 { width: 65.81196581196582% }
 .row-fluid .span4 { width: 31.623931623931625% }
}

Riposizionamento del contenuto nella griglia del componente Pagina repositioning-content-in-the-page-component-grid

Le pagine dell’applicazione Geometrixx Media di esempio distribuiscono le righe di blocchi di contenuto in orizzontale in riquadri di visualizzazione larghi. Nei riquadri di visualizzazione più piccoli, gli stessi blocchi sono distribuiti verticalmente. Il seguente esempio di CSS mostra gli stili che implementano questo comportamento per il codice HTML generato dal componente media-home page:

/* default styles (no media queries) */
    .row-fluid [class*="span"] {
        width: 100%;
        float: left;
}

@media (max-width: 767px) {
    [class*="span"], .row-fluid [class*="span"] {
        float: none;
        width: 100%;
    }
}

Modulare i componenti Pagina tip-modularize-your-page-components

Modularizza i componenti in modo da poter utilizzare il codice in modo efficiente. È probabile che il sito utilizzi diversi tipi di pagine, ad esempio una pagina di benvenuto, una pagina di articolo o una pagina di prodotto. Ogni tipo di pagina contiene diversi tipi di contenuto e probabilmente utilizza layout diversi. Tuttavia, quando alcuni elementi di ciascun layout sono comuni a più pagine, puoi riutilizzare il codice che implementa tale parte del layout.

Usa sovrapposizioni componenti pagina

Creare un componente pagina principale che fornisce script per la generazione di varie parti di una pagina, ad esempio head e body sezioni e header, content e footer sezioni all'interno del corpo della pagina.

Creare altri componenti di pagina che utilizzano il componente pagina principale come cq:resourceSuperType. Questi componenti includono script che sostituiscono gli script della pagina principale in base alle esigenze.

Ad esempio, l'applicazione goemetrixx-media include il componente page (sling:resourceSuperType è il componente page di base). Diversi componenti secondari (ad esempio articolo, categoria e media-home) utilizzano questo componente pagina come sling:resourceSuperType. Ogni componente secondario include un file content.jsp che esegue l’override del file content.jsp del componente page.

Riutilizza script

Crea più script JSP che generano combinazioni di righe e colonne comuni a più componenti di pagina. Ad esempio, lo script content.jsp dell'articolo e i componenti della home multimediale fanno entrambi riferimento allo script 8x4col.jsp.

Organizza gli stili CSS in base alle dimensioni del riquadro di visualizzazione di destinazione

Includi stili CSS e query multimediali per diverse dimensioni dei riquadri di visualizzazione in file separati. Utilizza le cartelle della libreria client per concatenarle.

Inserimento di componenti nella griglia della pagina inserting-components-into-the-page-grid

Quando i componenti generano un singolo blocco di contenuto, in genere la griglia stabilita dal componente Pagina controlla il posizionamento del contenuto.

In qualità di autore, il blocco di contenuto può essere renderizzato in varie dimensioni e posizioni relative. Il testo del contenuto non deve utilizzare indicazioni relative per fare riferimento ad altri blocchi di contenuto.

Se necessario, il componente deve fornire tutte le librerie CSS o JavaScript necessarie per il codice HTML generato. Utilizza una cartella della libreria client all’interno del componente in modo da generare i file CSS e JS. Per esporre i file, creare una dipendenza o incorporare la libreria in un'altra cartella della libreria client sotto la cartella /etc.

Griglie secondarie

Se il componente contiene più blocchi di contenuto, aggiungi i blocchi di contenuto all’interno di una riga per stabilire una griglia secondaria sulla pagina:

Ad esempio, il componente /apps/geometrixx-media/components/2-col-article-summary genera due colonne di contenuto. Il HTML generato ha la seguente struttura:

<div class="row-fluid mutli-col-article-summary">
    <div class="span6">
        <article>
            <div class="article-summary-image">...</div>
            <div class="social-header">...</div>
            <div class="article-summary-description">...</div>
            <div class="social">...</div>
        </article>
    </div>
</div>

I selettori .row-fluid .span6 del CSS della pagina si applicano agli elementi div della stessa classe e struttura in questo HTML. Tuttavia, il componente include anche la cartella /apps/geometrixx-media/components/2-col-article-summary/clientlibs della libreria client:

Ad esempio, nel file /apps/geometrixx-media/components/2-col-article-summary/clientlibs/css/responsive-480px.css sono inclusi i seguenti stili:

@media (max-width: 480px) {
    .mutli-col-article-summary .article-summary-image {
        float: left;
        width: 127px;
    }
    .mutli-col-article-summary .article-summary-description {
        width: auto;
        margin-left: 127px;
    }
    .mutli-col-article-summary .article-summary-description h4 {
        padding-left: 10px;
    }
    .mutli-col-article-summary .article-summary-text {
        margin-left: 127px;
        min-height: 122px;
        top: 0;
    }
}

Introduzione alle griglie fluide introduction-to-fluid-grids

Le griglie fluide consentono ai layout di pagina di adattarsi alle dimensioni del riquadro di visualizzazione client. Le griglie sono costituite da colonne e righe logiche che posizionano i blocchi di contenuto nella pagina.

Utilizzando la tecnologia HTML5 è possibile implementare la griglia e modificarla per adattare i layout di pagina a diverse dimensioni dei riquadri di visualizzazione:

Utilizzo di larghezze discrete using-discrete-widths

Per ogni intervallo di larghezze dei riquadri di visualizzazione di destinazione, utilizza una larghezza di pagina statica e blocchi di contenuto di larghezza costante. Quando si ridimensiona manualmente una finestra del browser, le modifiche alle dimensioni del contenuto vengono apportate a larghezze di finestra discrete (note anche come punti di interruzione). Pertanto, le progettazioni di pagine vengono rispettate più da vicino, ottimizzando l’esperienza utente.

Ridimensionamento della griglia scaling-the-grid

Le griglie consentono di ridimensionare i blocchi di contenuto in base alle diverse dimensioni dei riquadri di visualizzazione. I blocchi di contenuto si estendono su un numero specifico di colonne. Quando la larghezza delle colonne aumenta o diminuisce per adattarsi a dimensioni di riquadro di visualizzazione diverse, la larghezza dei blocchi di contenuto aumenta o diminuisce di conseguenza. Il ridimensionamento può supportare sia riquadri di grandi dimensioni che riquadri di medie dimensioni sufficientemente ampi da consentire il posizionamento affiancato dei blocchi di contenuto.

Riposizionamento del contenuto nella griglia repositioning-content-in-the-grid

La dimensione dei blocchi di contenuto può essere limitata da una larghezza minima, oltre la quale il ridimensionamento non è più efficace. Per i riquadri di visualizzazione più piccoli, la griglia può essere utilizzata per distribuire blocchi di contenuto in verticale anziché in orizzontale.

Progettazione della griglia designing-the-grid

Determina le colonne e le righe da posizionare nei blocchi di contenuto delle pagine. I layout di pagina determinano il numero di colonne e righe che si estendono sulla griglia.

Numero di colonne

Includi un numero di colonne sufficiente per posizionare in orizzontale i blocchi di contenuto in tutti i layout, per tutte le dimensioni dei riquadri di visualizzazione. Utilizza più colonne di quante siano attualmente necessarie per adattarle alle progettazioni di pagine future.

Contenuto riga

Utilizza le righe per controllare il posizionamento verticale dei blocchi di contenuto. Determina i blocchi di contenuto che condividono la stessa riga:

Implementazioni griglia grid-implementations

Crea classi e stili CSS per controllare il layout dei blocchi di contenuto in una pagina. Le progettazioni di pagine si basano spesso sulle dimensioni relative e sulla posizione dei blocchi di contenuto all’interno del riquadro di visualizzazione. Il riquadro di visualizzazione determina le dimensioni effettive dei blocchi di contenuto. I file CSS devono tenere conto delle dimensioni relativa e assoluta. Puoi implementare una griglia dei fluidi utilizzando tre tipi di classi CSS:

Le larghezze dei riquadri di visualizzazione di destinazione (e le relative query multimediali associate) delimitano le larghezze discrete utilizzate per il layout di una pagina.

Larghezze dei blocchi di contenuto widths-of-content-blocks

In genere, gli stili width delle classi dei blocchi di contenuto si basano sulle seguenti caratteristiche della pagina e della griglia:

Il CSS include una serie di query multimediali che utilizzano la seguente struttura:

@media(query_for_targeted_viewport){

  .class_for_container{ width:absolute_page_width }
  .class_for_row { width:100%}

  /* several selectors for content blocks   */
  .class_for_content_block1 { width:absolute_block_width1 }
  .class_for_content_block2 { width:absolute_block_width2 }
  ...

  /* several selectors for content blocks inside rows */
  .class_for_row .class_for_content_block1 { width:relative_block_width1 }
  .class_for_row .class_for_content_block2 { width:relative_block_width2 }
  ...
}

Utilizza il seguente algoritmo come punto di partenza per sviluppare le classi di elementi e gli stili CSS per le pagine.

Posizionamento dei blocchi di contenuto nelle righe positioning-content-blocks-in-rows

Utilizzare lo stile float della classe .row-fluid per controllare se i blocchi di contenuto in una riga sono disposti orizzontalmente o verticalmente.

Aggiungi lo stile al selettore .row-fluid all'interno di ogni query multimediale. Imposta il valore in base al layout di pagina utilizzato per la query multimediale. Ad esempio, il diagramma seguente illustra una riga che distribuisce il contenuto orizzontalmente per i riquadri di visualizzazione larghi e verticalmente per quelli stretti.

I seguenti CSS possono implementare questo comportamento:

@media (min-width: 768px) and (max-width: 979px) {
   .row-fluid {
       width:100%;
       float:left
   }
}

@media (max-width:480px){
    .row-fluid {
       width:100%;
       float:none
   }
}

Assegnazione di classi ai blocchi di contenuto assigning-classes-to-content-blocks

Per il layout di pagina di ogni dimensione del riquadro di visualizzazione di destinazione, determina il numero di colonne su cui si estende ciascun blocco di contenuto. Quindi, determina la classe da utilizzare per gli elementi div di tali blocchi di contenuto.

Dopo aver stabilito le classi div, puoi implementare la griglia utilizzando l’applicazione AEM.