Introducción a AEM Sites: Tutorial de WKND

Le damos la bienvenida a un tutorial de varias partes diseñado para desarrolladores que utilicen Adobe Experience Manager (AEM) por primera vez. Este tutorial recorre la implementación de un sitio AEM para una marca ficticia de estilo de vida WKND. El tutorial trata temas fundamentales como la configuración del proyecto, los componentes principales, las plantillas editables, las bibliotecas del lado del cliente y el desarrollo de componentes con Adobe Experience Manager Sites.

Información general

El objetivo de este tutorial en varias partes es enseñar a los desarrolladores a implementar un sitio web utilizando los estándares y tecnologías más recientes en Adobe Experience Manager (AEM). Después de completar este tutorial, un desarrollador debe comprender la base básica de la plataforma y con conocimientos de patrones de diseño comunes en AEM.

Opciones para iniciar un proyecto de Sites

Existen dos enfoques básicos para iniciar un proyecto de AEM Sites.

AEM Tipo de archivo del proyecto : enfoque tradicional para el desarrollo de AEM mediante la generación de un proyecto de AEM mínimo con una plantilla Maven. Este es el enfoque recomendado para AEM proyectos de la versión 6.5/6.4 y AEM como proyectos Cloud Service que prevén una gran personalización. El tutorial ofrece una profundización en AEM desarrollo.

Inicie el tutorial con el tipo de archivo del proyecto AEM

Plantillas AEM sitio : un enfoque de código bajo para generar un sitio AEM mediante una plantilla de sitio predefinida. Utilice los componentes y las plantillas listas para usar para poner en marcha un sitio rápidamente. Utilice un flujo de trabajo temático para aplicar estilos y personalizaciones específicos de la marca solo con CSS y JavaScript. Recomendado para nuevos proyectos y desarrolladores. Actualmente solo está disponible para AEM como Cloud Service.

Iniciar el tutorial con una plantilla de sitio

Kit de interfaz de usuario de Adobe XD

Para hacer este tutorial más cercano a un escenario real, los talentosos diseñadores de experiencia de usuario crearon las maquetas para el sitio utilizando Adobe XD. A lo largo del tutorial, varias partes de los diseños se implementan en un sitio de AEM totalmente creativo. Agradecimiento especial a Lorenzo Buosi y Kilian Amendola que crearon el hermoso diseño para el sitio WKND.

Descargue los kits de interfaz de usuario de XD:

Sitio de referencia

También está disponible como referencia una versión terminada del sitio WKND: https://wknd.site/

El tutorial cubre las principales habilidades de desarrollo necesarias para un desarrollador AEM, pero no construirá todo el sitio de principio a fin. El sitio de referencia terminado es otro recurso bueno para explorar y ver más AEM funcionalidades listas para usar.

Para probar el código más reciente antes de entrar en el tutorial, descargue e instale la última versión de GitHub.

Con la tecnología de Adobe Stock

Muchas de las imágenes del sitio web de referencia de WKND son de Adobe Stock y son de terceros tal como se define en los términos adicionales de Demo Asset en https://www.adobe.com/legal/terms.html. Si desea utilizar una imagen de Adobe Stock para otros fines más allá de ver este sitio web de demostración, como incluirla en un sitio web o en materiales de marketing, puede adquirir una licencia en Adobe Stock.

Con Adobe Stock, usted tiene acceso a más de 140 millones de imágenes de alta calidad, libres de derechos de autor, incluyendo fotos, gráficos, videos y plantillas para iniciar sus proyectos creativos.

Siguientes pasos

¡¿Qué estás esperando?! Obtenga información sobre cómo generar un nuevo proyecto de Adobe Experience Manager mediante el tipo de archivo del proyecto AEM o crear un sitio con una plantilla de sitio.

En esta página