Introducción a AEM Sites: Tutorial de WKND

Le damos la bienvenida a un tutorial en varias partes diseñado para desarrolladores que utilicen Adobe Experience Manager (AEM) por primera vez. Este tutorial recorre la implementación de un sitio de AEM para una marca ficticia de estilo de vida de 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.

El tutorial está diseñado para funcionar con AEM as a Cloud Service y es compatible con AEM 6.5.5.0+ y AEM 6.4.8.1+. El sitio se implementa mediante:

Calcule entre 1 y 2 horas para pasar por cada parte del tutorial.

Entorno de desarrollo local

Se necesita un entorno de desarrollo local para completar este tutorial. Las capturas de pantalla y el vídeo se capturan utilizando el SDK de AEM as a Cloud Service que se ejecuta en un entorno Mac OS con Visual Studio Code como IDE. Los comandos y el código deben ser independientes del sistema operativo local, a menos que se indique lo contrario.

Software necesario

Lo siguiente debe instalarse de manera local:

NOTA

¿Es novato en el uso de AEM as a Cloud Service? Consulte la siguiente guía para configurar un entorno de desarrollo local con el SDK de AEM as a Cloud Service.

¿Es novato en AEM 6.5? Consulte la siguiente guía para configurar un entorno de desarrollo local.

Acerca del tutorial

WKND es una revista online ficticia y blog que se centra en la vida nocturna, actividades y eventos en varias ciudades internacionales.

Kit de IU de Adobe XD

Para acercar este tutorial a un escenario real, los talentosos diseñadores de experiencia de usuario de Adobe 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 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 IU XD:

El nombre WKND es adecuado porque esperamos que un desarrollador aproveche la mejor parte de un fin de semana para completar el tutorial.

Github

Todo el código del proyecto se puede encontrar en Github en el repositorio de la Guía de AEM:

GitHub: Proyecto WKND Sites

Además, cada parte del tutorial tiene su propia rama en GitHub. Un usuario puede iniciar el tutorial en cualquier momento simplemente comprobando la rama que corresponde a la parte anterior.

NOTA

Si estaba trabajando con la versión anterior de este tutorial, aún puede encontrar los paquetes de soluciones y código en GitHub.

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 de AEM, pero no creará todo el sitio de principio a fin. El sitio de referencia terminado es otro excelente recurso para explorar y ver más funciones de AEM 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 provienen de Adobe Stock y son Material 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, tiene acceso a más de 140 millones de imágenes de alta calidad y sin derechos de autor, incluidas fotos, gráficos, vídeos y plantillas para iniciar sus proyectos creativos.

Pasos siguientes

¡¿Qué estás esperando?! Inicie el tutorial navegando hasta el capítulo Configuración del proyecto y aprenda a generar un nuevo proyecto de Adobe Experience Manager utilizando el tipo de archivo del proyecto AEM.

En esta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now