- Panoramica sullo sviluppo della Guida utente
- Introduzione per sviluppatori
- Guida introduttiva allo sviluppo per AEM Sites - Esercitazione WKND
- Concetti di base AEM
- Struttura dell’interfaccia AEM touch
- Concetti dell’interfaccia AEM touch
- Sviluppo AEM - Linee guida e migliori prassi
- Utilizzo delle librerie lato client
- Sviluppo e Page Diff
- Limitazioni per l’editor
- Quadro di protezione CSRF
- Modellazione dei dati - Modello di David Nuescheler
- Contributo a AEM
- Sicurezza
- Materiali di riferimento
- Creare un sito Web completo (interfaccia classica)
- Progettazione e Designer (interfaccia classica)
- Platform
- Guida di riferimento rapido per Sling
- Utilizzo di adattatori Sling
- Librerie di tag
- Modelli
- Utilizzo di Sling Resource Merger in AEM
- Sovrapposizioni
- Convenzioni di denominazione
- Creazione di un nuovo componente Campo interfaccia Granite
- Query Builder
- Assegnazione tag
- Personalizzazione delle pagine mostrate dal gestore errori
- Tipi di nodo personalizzati
- Aggiunta di font per il rendering grafico
- Connessione ai database SQL
- Esternalizzazione degli URL
- Creazione e utilizzo di processi per lo scarico
- Configurazione dell’utilizzo dei cookie
- Come accedere a AEM JCR a livello di programmazione
- Integrazione dei servizi con la console JMX
- Sviluppo dell’editor di massa
- Sviluppo di report
- eCommerce
- Componenti
- Componenti core
- Sistema di stili
- Panoramica sui componenti
- Componenti AEM - Nozioni di base
- Sviluppo di componenti AEM
- Sviluppo di componenti AEM - Esempi di codice
- Esportatore JSON per Content Services
- Abilitazione dell’esportazione JSON per un componente
- Editor immagine
- Tag Decoration
- Utilizzo di Nascondi condizioni
- Configurazione di più editor interni
- Modalità Sviluppatore
- Verifica dell’interfaccia
- Componenti per frammenti di contenuto
- Ottenimento di informazioni sulla pagina in formato JSON
- Internazionalizzazione
- Componenti interfaccia classica
- Gestione delle esperienze headless
- Senza testa e ibrido con AEM
- Abilitazione dell’esportazione JSON per un componente
- Applicazioni a pagina singola
- Introduzione SPA e Procedura dettagliata
- SPA Esercitazione WKND
- Guida introduttiva alla SPA in AEM - React
- Guida introduttiva a SPA in AEM - Angular
- Implementazione di un componente React per SPA
- SPA Dives
- Panoramica dell’editor SPA
- Sviluppo di SPA per AEM
- Blueprint SPA
- Componente pagina SPA
- Mappatura da modello dinamico a componente per SPA
- Routing modello SPA
- Integrazione Adobe Experience Platform Launch SPA e
- Rendering lato SPA e lato server
- Materiali di riferimento SPA
- API HTTP
- Frammenti di contenuto
- Frammenti esperienza
- Informazioni sui frammenti di contenuto e i servizi di contenuto in AEM
- Strumenti di sviluppo
- Strumenti di sviluppo
- Strumenti di modernizzazione AEM
- Editor finestre di dialogo
- Strumento di conversione finestra di dialogo
- Sviluppo con CRXDE Lite
- Gestione dei pacchetti con il cielo
- Come sviluppare AEM progetti con Eclipse
- Come creare AEM progetti con Apache Maven
- Come sviluppare progetti AEM utilizzando IntelliJ IDEA
- Come utilizzare lo strumento VLT
- Come utilizzare lo strumento Proxy Server
- Estensione AEM parentesi
- AEM Developer Tools for Eclipse
- AEM Repo Tool
- Personalizzazione
- Estensione AEM
- Personalizzazione dell’authoring delle pagine
- Personalizzazione delle console
- Personalizzazione delle visualizzazioni delle proprietà pagina
- Configurazione della pagina per la modifica collettiva delle proprietà pagina
- Personalizzazione ed estensione dei frammenti di contenuto
- Estensione dei flussi di lavoro
- Sviluppo ed estensione dei flussi di lavoro
- Creazione di modelli di flussi di lavoro
- Estensione della funzionalità del flusso di lavoro
- Interazione con flussi di lavoro a livello di programmazione
- Riferimento passo flusso di lavoro
- Best practice per i flussi di lavoro
- Riferimento per il processo di workflow
- Estensione di Multi Site Manager
- Tracciamento e analisi
- Cloud Services
- Creazione di estensioni personalizzate
- Forms
- Integrazione dei servizi con la console JMX
- Sviluppo dell’editor di massa
- Estensione dell’interfaccia classica
- Test
- Pianificazione
- Quali ambienti di test saranno necessari?
- Definizione dei casi di test
- Test - quando e con chi?
- Compilazione del piano di test
- Tracciamento dei risultati e invio di commenti
- Strumenti di verifica e tracciamento
- Accettazione e annullamento
- La prossima release…
- Elenchi di controllo
- Giorno Duro
- Verifica dell’interfaccia
- Best practice
- Panoramica sulle best practice
- Linee guida per lo sviluppo AEM e migliori prassi
- Tecniche consigliate per lo sviluppo
- Architettura dei contenuti
- Architettura del software
- Implementazione riferimento We.Retail
- Implementazione di riferimento We.Retail
- Prova di frammenti di contenuto in We.Retail
- Prova dei componenti core in We.Retail
- Prova di modelli modificabili in We.Retail
- Prova di layout reattivo in We.Retail
- Prova della struttura del sito globalizzata in We.Retail
- Prova di frammenti esperienza in We.Retail
- Suggerimenti sulla codifica
- Punteggi dei codici
- Bundle OSGI
- Integrazione JCR
- Esempi di codice
- Risoluzione dei problemi relativi a query lente
- Web per dispositivi mobili
Designer e Designer
Questo articolo descrive come creare un sito Web basato sull’interfaccia classica. Adobe consiglia di utilizzare le tecnologie AEM più recenti per i siti Web, come descritto in dettaglio nell'articolo Guida introduttiva allo sviluppo AEM Sites.
Sarà necessario creare una progettazione per il sito Web e, in AEM, utilizzare Designer.
Per ulteriori informazioni sull'accessibilità Web, vedere AEM e le linee guida sull'accessibilità Web.
Utilizzo di Designer
La progettazione può essere definita nella sezione progettazioni della scheda Strumenti:
Qui è possibile creare la struttura necessaria per memorizzare la progettazione, quindi caricare i fogli di stile CSS e le immagini richieste.
Le progettazioni sono memorizzate in /etc/designs. Il percorso della progettazione da utilizzare per un sito Web è specificato utilizzando la proprietà cq:designPath del nodo jcr:content.
Tutte le modifiche apportate a una pagina in modalità di progettazione vengono mantenute sotto il nodo di progettazione del sito e vengono applicate automaticamente a tutte le pagine con la stessa struttura.
Cosa ti serve
Per realizzare il progetto, è necessario:
CSS - I fogli di stile a cascata definiscono i formati di aree specifiche delle pagine.
Immagini - Qualsiasi immagine utilizzata per funzioni quali sfondi e pulsanti.
Considerazioni sulla progettazione del sito Web
Durante lo sviluppo di un sito Web, si consiglia vivamente di memorizzare immagini e file CSS in /etc/design/<project> in modo da poter fare riferimento alle risorse in base al progetto corrente, come descritto dal frammento di codice seguente.
<%= currentDesign.getPath() + "/static/img/icon.gif %>
L'esempio precedente offre diversi vantaggi:
-
I componenti possono avere un aspetto o un aspetto diverso in base a ciascun sito utilizzando un percorso di progettazione diverso.
-
La riprogettazione del sito Web può essere eseguita semplicemente indicando il percorso di progettazione a un altro nodo nella radice del sito da
design/v1adesign/v2. -
/etc/designse/contentsono gli unici URL esterni che il browser vede proteggersi da un utente esterno incuriosito da ciò che si trova sotto la vostra/appsstruttura. I vantaggi dell’URL riportati sopra consentono inoltre all’amministratore di sistema di impostare una maggiore sicurezza, in quanto l’esposizione delle risorse viene limitata a poche posizioni distinte.