Introdução ao AEM Sites: tutorial WKND
DICABem-vindo a um tutorial em várias partes projetado para desenvolvedores novatos no Adobe Experience Manager (AEM). Este tutorial aborda a implementação de um site do AEM para uma marca fictícia de estilo de vida, a WKND. O tutorial abrange tópicos fundamentais como configuração de projetos, componentes principais, modelos editáveis, bibliotecas do lado do cliente e desenvolvimento de componentes com o Adobe Experience Manager Sites.
Visão geral
O objetivo deste tutorial é ensinar ao desenvolvedor como implementar um site com base nos padrões e nas tecnologias mais recentes do Adobe Experience Manager (AEM). Após concluir este tutorial, o desenvolvedor entenderá os aspectos básicos da plataforma e os padrões de design comuns do AEM.
Opções para iniciar um projeto do Sites
Há duas abordagens básicas para iniciar um projeto do AEM Sites.
Arquétipo de projeto do AEM: abordagem tradicional ao desenvolvimento no AEM por meio da geração de um projeto mínimo do AEM, usando-se um modelo do Maven. Esta é a abordagem recomendada para projetos do AEM 6.5/6.4 e projetos do AEM as a Cloud Service que preveem uma personalização intensa. O tutorial oferece um grande aprofundamento no desenvolvimento no AEM.
Iniciar tutorial com o arquétipo de projeto do AEM
Modelos de site do AEM: também conhecido como criação rápida de sites, uma abordagem low-code para gerar um site do AEM com base em um modelo de site predefinido. Use componentes e modelos prontos para uso para montar e publicar um site rapidamente. Use um fluxo de trabalho de tema para aplicar estilos e personalizações específicos da marca apenas com CSS e JavaScript. Recomendado para novos projetos e desenvolvedores. Disponível somente para o AEM as a Cloud Service.
Iniciar tutorial com um modelo de site
Kit da interface do Adobe XD
Para aproximar este tutorial de um caso do mundo real, os talentosos designers de UX da Adobe criaram os modelos para o site por meio do Adobe XD. No decorrer do tutorial, várias partes dos designs são implementadas em um site do AEM totalmente criável. Agradecimentos especiais a Lorenzo Buosi e a Kilian Amendola, que criaram um belo design para o site da WKND.
Baixe os kits da interface do XD:
Site de referência
Uma versão acabada do site da WKND também está disponível como referência: https://wknd.site/
O tutorial aborda as principais habilidades de desenvolvimento necessárias para um desenvolvedor do AEM, mas não criará todo o site de ponta a ponta. O site de referência acabado é outro grande recurso para explorar e ver mais dos recursos prontos para uso do AEM.
Para testar o código mais recente antes de começar o tutorial, baixe e instale a última versão do GitHub.
Viabilizado pelo Adobe Stock
Muitas das imagens no site de referência da WKND provêm do Adobe Stock e são materiais de terceiros, conforme definido nos Termos adicionais dos ativos de demonstração, em https://www.adobe.com/legal/terms.html. Se você quiser usar uma imagem do Adobe Stock para outros propósitos além da exibição deste site de demonstração, como exibi-la em um site ou em materiais de marketing, é possível adquirir uma licença no Adobe Stock.
Com o Adobe Stock, você tem acesso a mais de 140 milhões de imagens de alta qualidade e isentas de royalties, incluindo fotos, gráficos, vídeos e modelos, para dar o pontapé inicial nos seus projetos de criação.
Próximas etapas
O que você está esperando? Saiba como gerar um novo projeto do Adobe Experience Manager com o arquétipo de projeto do AEM ou criar um site com um modelo de site.
